/* ------------------------------------------------------------------
   Benchmark IA 2026 — Circularity — feuille de style
   Les valeurs viennent du relevé fait sur le PDF du rapport
   (charte-mise-en-forme.md). Rien n'est choisi au jugé.
-------------------------------------------------------------------*/

/* Les polices sont servies par le site lui-même : aucune requête vers un
   tiers, rien à charger depuis Google. Inter Tight et Carlito sont sous
   licence SIL Open Font (voir assets/polices/LICENCE-*.txt). */

@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('polices/inter-tight-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('polices/inter-tight-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('polices/inter-tight-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('polices/inter-tight-latin-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('polices/inter-tight-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('polices/inter-tight-latin-ext-600-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('polices/inter-tight-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('polices/inter-tight-latin-ext-700-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Carlito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('polices/carlito-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Carlito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('polices/carlito-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Carlito';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('polices/carlito-latin-400-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Carlito';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('polices/carlito-latin-ext-400-italic.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Carlito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('polices/carlito-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Carlito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('polices/carlito-latin-ext-700-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Carlito';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('polices/carlito-latin-700-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Carlito';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('polices/carlito-latin-ext-700-italic.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root {
  /* les constantes du rapport */
  --navy:        #15345C;
  --encre:       #231F20;
  --legende:     #44546A;
  --mention:     #8C97A8;
  --neutre:      #F2F6F5;
  --trait:       #E3E8EE;

  /* les deux états, tels que le rapport les code */
  --amorcage:    #FFC03C;
  --acceleration:#279CE5;

  /* les trois piliers */
  --p1: #59C1A4;  --p1-pale: #EDF7F4;
  --p2: #FF9E87;  --p2-pale: #FFF3F1;
  --p3: #A59FFD;  --p3-pale: #F4F3FF;

  /* l'accent courant : réaffecté au thème affiché */
  --accent:      #15345C;
  --accent-pale: #EDF1F6;

  --titre: 'Inter Tight', 'Segoe UI', system-ui, sans-serif;
  --corps: 'Carlito', Calibri, 'Segoe UI', system-ui, sans-serif;

  --menu: 310px;
  --lecture: 40px;

  /* ---- l'habillage : marine comme la V3. Mode coloré par défaut ---- */
  --chrome:        #15345C;
  --chrome-2:      #10294A;   /* pied de menu, un cran plus sombre */
  --chrome-texte:  #C6DAE8;
  --chrome-titre:  #FFFFFF;
  --chrome-trait:  rgba(255,255,255,.13);
  --chrome-survol: rgba(255,255,255,.07);
  --chrome-actif:  rgba(5,227,178,.14);
  --chrome-mention:#7CA0BC;
  --chrome-jeton:  rgba(255,255,255,.26);
  --page-fond:     #F7F9FA;
  --feuille:       #FFFFFF;
  --mint:          #05E3B2;
}

/* ---- mode blanc ---- */
:root[data-mode="clair"] {
  --chrome:        #FFFFFF;
  --chrome-2:      #FFFFFF;
  --chrome-texte:  #15345C;
  --chrome-titre:  #15345C;
  --chrome-trait:  #E3E8EE;
  --chrome-survol: #F2F6F5;
  --chrome-actif:  var(--accent-pale);
  --chrome-mention:#8C97A8;
  --chrome-jeton:  #E3E8EE;
  --page-fond:     #FFFFFF;
  --feuille:       #FFFFFF;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: #fff; color: var(--encre);
  font-family: var(--corps); font-size: 16.5px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

.surtitre {
  font-family: var(--titre); font-weight: 600; font-size: .70rem;
  letter-spacing: .14em; text-transform: uppercase;
}

/* ============================ page de garde ============================ */
.garde {
  min-height: 100vh; display: flex; flex-direction: column;
  background: var(--navy); color: #fff;
}
.garde-haut { padding: 44px 40px 0; }
.garde-centre {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  padding: 0 40px; max-width: 1080px; width: 100%; margin: 0 auto;
}
/* titre, sous-titre et accroche tiennent exactement la même largeur */
.garde h1, .garde .sous-titre, .garde .accroche { max-width: 620px; }
.garde h1 {
  font-family: var(--titre); font-weight: 600; font-size: clamp(2rem, 4vw, 2.9rem);
  line-height: 1.1; margin: 0 0 10px; letter-spacing: -.015em;
}
.garde .sous-titre {
  font-family: var(--titre); font-weight: 500; font-size: clamp(1.15rem, 2vw, 1.5rem);
  line-height: 1.25; color: #fff; margin: 0 0 20px;
}
.garde .accroche {
  font-size: 1.08rem; line-height: 1.55; color: #9FC0D8; margin: 0 0 48px;
}
.garde-split { display: grid; grid-template-columns: 1fr 1fr; gap: 0; max-width: 780px; }
.garde-volet { padding: 28px 34px 30px 0; }
.garde-volet + .garde-volet { padding: 28px 0 30px 34px; border-left: 1px solid rgba(255,255,255,.18); }
.garde-volet h2 {
  font-family: var(--titre); font-weight: 600; font-size: 1.05rem;
  margin: 0 0 6px; color: #fff;
}
.garde-volet p { color: #8FA9CC; font-size: .92rem; margin: 0 0 18px; }
.garde-bas {
  padding: 24px 40px 30px; border-top: 1px solid rgba(255,255,255,.14);
  color: #8FA9CC; font-size: .85rem; display: flex; gap: 26px; flex-wrap: wrap;
}
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.logo svg { flex: 0 0 auto; display: block; }
.logo b {
  font-family: var(--titre); font-weight: 600; font-size: 1.02rem;
  letter-spacing: -.005em; line-height: 1.2; white-space: nowrap;
}
.logo b span { font-weight: 400; color: var(--mention); }
.garde .logo b { font-size: 1.15rem; color: #fff; }
.garde .logo b span { color: #8FA9CC; }

.champ { display: block; margin: 0 0 14px; }
.champ span {
  display: block; font-family: var(--titre); font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: #8FA9CC; margin: 0 0 5px;
}
.champ input {
  width: 100%; padding: 11px 13px; font: inherit; font-size: .95rem;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.22);
  border-radius: 3px; color: #fff;
}
.champ input::placeholder { color: #6C86A8; }
.champ input:focus { outline: 0; border-color: #06E3B3; background: rgba(255,255,255,.12); }
.facultatif { color: #6C86A8; text-transform: none; letter-spacing: 0; font-size: .7rem; }

.bouton {
  display: inline-flex; align-items: center; gap: 9px; padding: 11px 20px;
  font-family: var(--titre); font-weight: 600; font-size: .92rem;
  background: #06E3B3; color: #06304A; border-radius: 3px;
}
.bouton:hover { background: #4DEECA; }
.bouton.creux { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.bouton.creux:hover { background: rgba(255,255,255,.08); }
.erreur { color: #FF9E87; font-size: .88rem; margin: 8px 0 0; min-height: 1.2em; }

/* ============================ ossature ============================ */
.appli { display: flex; min-height: 100vh; }

.menu {
  width: var(--menu); flex: 0 0 var(--menu); position: sticky; top: 0; height: 100vh;
  background: var(--chrome); border-right: 1px solid var(--chrome-trait);
  display: flex; flex-direction: column; z-index: 30; color: var(--chrome-texte);
}
.menu-tete {
  display: flex; align-items: center; gap: 4px;
  padding: 18px 14px 14px 18px; border-bottom: 1px solid var(--chrome-trait);
}
.menu-tete .logo { margin-right: auto; color: var(--chrome-titre); min-width: 0; }
.menu-tete .logo b { color: var(--chrome-titre); font-size: .94rem; }
.menu-tete .logo b span { color: var(--chrome-mention); }
.menu-corps {
  flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 0 0 18px; min-height: 0;
  /* l'ascenseur reste discret : un filet, pas la barre grise du système */
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  transition: scrollbar-color .2s;
}
.menu-corps:hover { scrollbar-color: var(--chrome-jeton) transparent; }
.menu-corps::-webkit-scrollbar { width: 8px; }
.menu-corps::-webkit-scrollbar-track { background: transparent; }
.menu-corps::-webkit-scrollbar-thumb {
  background: transparent; border-radius: 4px;
  border: 3px solid transparent; background-clip: content-box;
}
.menu-corps:hover::-webkit-scrollbar-thumb { background: var(--chrome-jeton); background-clip: content-box; }
.menu-corps::-webkit-scrollbar-thumb:hover { background: var(--chrome-mention); background-clip: content-box; }
/* et un dégradé en pied de menu pour dire qu'il reste à lire */
.menu-corps { --voile: 22px; }
.menu { position: sticky; }
.menu-corps-voile {
  position: absolute; left: 0; right: 0; height: 26px; pointer-events: none; z-index: 2;
  background: linear-gradient(to top, var(--chrome), transparent);
}
.menu-pied {
  border-top: 1px solid var(--chrome-trait); padding: 12px 18px 16px; background: var(--chrome-2);
}

.poignee {
  position: absolute; top: 0; right: -3px; width: 6px; height: 100%;
  cursor: col-resize; z-index: 31;
}
.poignee:hover::after, .poignee.active::after {
  content: ''; position: absolute; top: 0; left: 2px; width: 2px; height: 100%; background: var(--mint);
}
.replier {
  width: 30px; height: 30px; border-radius: 3px; color: var(--chrome-mention);
  display: grid; place-items: center; flex: 0 0 auto;
}
.replier:hover { background: var(--chrome-survol); color: var(--chrome-titre); }

/* menu replié */
.appli.replie { --menu: 0px; }
.appli.replie .menu { border-right: 0; }
.appli.replie .menu > * { display: none; }
.deplier {
  position: fixed; top: 16px; left: 14px; z-index: 40; width: 38px; height: 38px;
  background: #fff; border: 1px solid var(--trait); border-radius: 3px;
  display: none; place-items: center; color: var(--navy);
  box-shadow: 0 2px 10px rgba(21,52,92,.08);
}
.appli.replie .deplier { display: grid; }

/* ---- les blocs du menu ---- */
.bloc { padding: 16px 18px 4px; }
.bloc + .bloc { border-top: 1px solid var(--chrome-trait); }
.bloc-tete {
  display: flex; align-items: baseline; gap: 9px; margin: 0 0 8px;
  font-family: var(--titre); font-weight: 600; font-size: .74rem;
  letter-spacing: .13em; text-transform: uppercase; color: var(--chrome-titre);
}
.bloc-tete em { font-style: normal; color: var(--chrome-mention); font-size: .78rem; }

.lien {
  display: flex; align-items: baseline; gap: 10px; width: 100%; text-align: left;
  padding: 7px 10px 7px 8px; border-radius: 3px; font-size: .93rem; color: var(--chrome-texte);
  border-left: 2px solid transparent;
}
.lien:hover { background: var(--chrome-survol); color: var(--chrome-titre); }
.lien.ici {
  background: var(--chrome-actif); border-left-color: var(--accent);
  font-weight: 700; color: var(--chrome-titre);
}
.lien .no {
  font-family: var(--titre); font-weight: 600; font-size: .78rem;
  color: var(--chrome-mention); min-width: 22px;
}
.lien.ici .no { color: var(--accent); }
.lien .pastille {
  margin-left: auto; font-family: var(--titre); font-size: .7rem; font-weight: 600;
  color: var(--accent); background: var(--chrome-actif); border-radius: 9px; padding: 1px 7px;
}
:root[data-mode="clair"] .lien .pastille { background: var(--accent-pale); }
.pilier-tete {
  display: flex; align-items: center; gap: 8px; margin: 14px 0 4px; padding: 0 8px;
  font-family: var(--titre); font-weight: 600; font-size: .68rem;
  letter-spacing: .13em; text-transform: uppercase; color: var(--chrome-mention);
}
.pilier-tete i { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }

/* ---- le prisme : en haut, dans son encadré, comme en V3 ---- */
.menu-prisme {
  margin: 14px 14px 4px; padding: 14px 15px 12px; border-radius: 5px;
  background: var(--chrome-survol); box-shadow: inset 0 0 0 1px var(--chrome-trait);
}
:root[data-mode="clair"] .menu-prisme { background: #FBFCFD; }
.menu-prisme .bloc-tete { margin-bottom: 10px; }
.prisme-ligne { margin: 0 0 12px; }
.prisme-ligne > .surtitre { color: var(--chrome-mention); display: block; margin: 0 0 7px; }
.jetons { display: flex; flex-wrap: wrap; gap: 6px; }
.jeton {
  position: relative; padding: 5px 11px; border-radius: 3px; font-family: var(--titre);
  font-weight: 600; font-size: .8rem; color: var(--chrome-texte);
  box-shadow: inset 0 0 0 1px var(--chrome-jeton);
}
.jeton:hover { box-shadow: inset 0 0 0 1px var(--mint); color: var(--chrome-titre); }
.jeton.on { color: var(--navy); background: var(--mint); box-shadow: none; }
:root[data-mode="clair"] .jeton.on { color: #fff; background: var(--navy); }
.jeton[data-etat="amorcage"].on { background: var(--amorcage); color: #5A3F00; }
.jeton[data-etat="acceleration"].on { background: var(--acceleration); color: #fff; }
.jeton .infobulle {
  position: absolute; left: 0; top: calc(100% + 7px); z-index: 50; width: 216px;
  padding: 9px 11px; background: var(--navy); color: #fff; border-radius: 3px;
  font-family: var(--corps); font-weight: 400; font-size: .81rem; line-height: 1.4;
  opacity: 0; visibility: hidden; transition: opacity .12s; pointer-events: none;
  box-shadow: 0 6px 22px rgba(21,52,92,.22);
}
.jeton:hover .infobulle, .jeton:focus-visible .infobulle { opacity: 1; visibility: visible; }
.prisme-neant {
  font-size: .82rem; color: var(--chrome-mention); margin: 2px 0 0; padding: 0 2px;
}
.prisme-neant button { text-decoration: underline; text-underline-offset: 2px; }

/* ---- mon rapport : c'est là qu'on veut emmener le lecteur ---- */
.bloc-rapport { margin: 2px 0 0; }
.editer {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 10px;
  width: 100%; text-align: left; padding: 11px 14px; border-radius: 4px;
  background: var(--mint); color: #06304A;
  font-family: var(--titre); transition: background .15s, transform .12s;
}
.editer .nom {
  font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; white-space: nowrap;
}
.editer .compte {
  grid-column: 1; font-weight: 600; font-size: .74rem; opacity: .7; white-space: nowrap;
}
.editer .fleche { grid-column: 2; grid-row: 1 / span 2; flex: 0 0 auto; }
.editer:hover { background: #4DEECA; }
.editer:active { transform: translateY(1px); }
.editer[disabled] {
  background: transparent; color: var(--chrome-mention); cursor: default;
  box-shadow: inset 0 0 0 1px var(--chrome-trait);
}
.editer[disabled] .fleche { opacity: .4; }
.editer[disabled]:hover { background: transparent; }
.aide-rapport {
  font-size: .76rem; line-height: 1.4; color: var(--chrome-mention); margin: 8px 2px 0;
}

/* ============================ la lecture ============================ */
.lecture { flex: 1; min-width: 0; background: var(--page-fond); }
.bandeau {
  position: sticky; top: 0; z-index: 20; background: var(--feuille);
  backdrop-filter: blur(6px); border-bottom: 1px solid var(--trait);
}
.bandeau-dedans {
  max-width: 1000px; margin: 0 auto; padding: 13px 40px 11px;
  display: flex; align-items: center; gap: 16px;
}
.courant { font-family: var(--titre); font-weight: 600; font-size: .7rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--navy); }
.bandeau .filet { height: 2px; background: var(--accent); }
.pour-vous {
  margin-left: auto; display: flex; align-items: center; gap: 8px;
  font-family: var(--titre); font-size: .76rem; font-weight: 600; color: var(--legende);
}
#raccourci { margin-left: auto; }
#raccourci:not(:empty) + * { margin-left: 0; }
.pour-vous:not(:empty) ~ #raccourci { margin-left: 14px; }

/* le raccourci vers le rapport, visible pendant toute la lecture */
.raccourci-rapport {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 7px;
  border-radius: 999px; background: var(--mint); color: #06304A;
  font-family: var(--titre); font-weight: 600; font-size: .8rem;
  box-shadow: 0 1px 3px rgba(6,48,74,.18); transition: background .15s;
}
.raccourci-rapport:hover { background: #4DEECA; }
.raccourci-rapport b { font-weight: 700; }
.pastille-nb {
  display: grid; place-items: center; min-width: 21px; height: 21px; padding: 0 5px;
  border-radius: 999px; background: #06304A; color: var(--mint); font-size: .74rem;
}
.pour-vous .puce { width: 8px; height: 8px; border-radius: 50%; background: var(--navy); }

.page {
  max-width: 1040px; margin: 0 auto; padding: 0 40px 120px;
  background: var(--feuille); min-height: 100vh;
}
/* en mode coloré, la colonne de lecture se détache comme une feuille */
:root:not([data-mode="clair"]) .page,
:root:not([data-mode="clair"]) .rapport {
  box-shadow: 0 0 0 1px var(--trait);
}
/* la colonne de texte : le repère de thème à gauche, la gouttière de marquage à droite */
.colonne { max-width: 70ch; margin-left: 122px; margin-right: 128px; }

/* ---- ouverture de thème ---- */
.ouverture { position: relative; padding: 46px 0 0; }
.repere { position: absolute; left: 0; top: 46px; width: 106px; }
.repere .no { font-family: var(--corps); font-weight: 700; font-size: 1.6rem; color: var(--accent); }
.repere .mot { font-family: var(--titre); font-size: .62rem; letter-spacing: .13em;
  color: var(--mention); text-transform: uppercase; margin-top: 2px; }
.ouverture h1 {
  font-family: var(--titre); font-weight: 600; font-size: 2rem; line-height: 1.14;
  color: var(--navy); margin: 0 0 18px; letter-spacing: -.005em;
}
.pilier-fil {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px;
  font-family: var(--titre); font-weight: 600; font-size: .68rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--mention);
}
.pilier-fil i { width: 20px; height: 2px; background: var(--accent); }

/* ---- encadré des titres courts ---- */
.sommaire-theme {
  background: var(--accent-pale); padding: 18px 24px 20px; margin: 30px 0 0 -22px;
}
.sommaire-theme .surtitre { color: var(--mention); }
.sommaire-theme ol { list-style: none; margin: 12px 0 0; padding: 0; }
.sommaire-theme li { margin: 0 0 4px; }
.sommaire-theme button {
  display: flex; gap: 12px; align-items: baseline; width: 100%; text-align: left;
  padding: 4px 6px; border-radius: 3px;
  font-family: var(--titre); font-weight: 600; font-size: .96rem; color: var(--navy);
}
.sommaire-theme button:hover { background: rgba(255,255,255,.6); }
.sommaire-theme .no { color: var(--accent); font-size: .8rem; min-width: 20px; }

/* ---- label de section ---- */
.section-label {
  font-family: var(--titre); font-weight: 600; font-size: .78rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent); margin: 44px 0 14px;
}

/* ---- la brique, unité de lecture et de marquage ---- */
.brique { position: relative; margin: 0 0 26px; scroll-margin-top: 90px; }
.brique .gouttiere {
  position: absolute; right: -128px; top: 0; width: 112px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  opacity: 0; transition: opacity .12s;
}
/* le bouton Retenir ne dépend QUE du survol et du fait d'avoir déjà retenu :
   il n'a rien à voir avec le prisme. */
.brique:hover .gouttiere, .brique:focus-within .gouttiere,
.brique.retenue .gouttiere { opacity: 1; }
/* un bouton, et qui se voit comme tel */
.marquer {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--titre); font-weight: 600; font-size: .78rem; color: var(--navy);
  padding: 5px 11px 5px 9px; border-radius: 4px;
  box-shadow: inset 0 0 0 1px var(--trait), 0 1px 2px rgba(21,52,92,.06);
  white-space: nowrap; background: #fff; transition: box-shadow .12s, background .12s;
}
.marquer .signe {
  font-size: .9rem; line-height: 1; color: var(--accent); font-weight: 700;
}
.marquer:hover {
  background: var(--accent-pale); box-shadow: inset 0 0 0 1px var(--accent), 0 1px 3px rgba(21,52,92,.1);
}
.marquer.on { color: #fff; background: var(--navy); box-shadow: none; }
.marquer.on .signe { color: var(--mint); }
.marquer.on:hover { background: #1E4677; box-shadow: none; }
.sous-gouttiere { display: flex; align-items: center; gap: 6px; padding-left: 2px; }

.brique p { margin: 0 0 9px; text-align: justify; hyphens: auto; }
.brique p:last-child { margin-bottom: 0; }

/* enseignement : barre dans l'accent, phrase d'ouverture en gras navy */
.b-enseignement { padding-left: 0; }
.b-enseignement::before {
  content: ''; position: absolute; left: -18px; top: 6px; width: 2px; height: 1.1em;
  background: var(--accent);
}
.b-enseignement .ouvre { font-weight: 700; color: var(--navy); }

/* chapeau */
.b-chapeau p { color: var(--encre); }

/* exergue : la phrase de couverture, posée avant l'édito */
.b-exergue { margin: 0 0 34px; }
.b-exergue p {
  font-family: var(--titre); font-weight: 600; font-size: 1.22rem; line-height: 1.35;
  color: var(--navy); text-align: left;
}

/* le repli : la phrase d'ouverture reste, la suite s'ouvre à la demande */
.brique.repliable .suite { display: none; }
.brique.repliable.ouverte > .suite,
body.tout-deplie .brique.repliable > .suite { display: block; }
.brique.repliable.ouverte p .suite,
body.tout-deplie .brique.repliable p .suite { display: inline; }
.lire-suite {
  display: inline-flex; align-items: center; gap: 5px; margin-left: 2px;
  font-family: var(--titre); font-weight: 600; font-size: .78rem; color: var(--accent);
  vertical-align: baseline;
}
.lire-suite:hover { text-decoration: underline; text-underline-offset: 3px; }
.brique.repliable.ouverte .lire-suite,
body.tout-deplie .lire-suite { display: none; }
.tout-deplier {
  display: block; width: 100%; text-align: left; margin: 0 0 10px;
  font-family: var(--titre); font-weight: 600; font-size: .78rem;
  color: var(--chrome-mention); padding: 4px 0;
}
.tout-deplier:hover { color: var(--chrome-titre); }

/* le focus FCC est une autre étude : le rapport le pose sur un fond gris */
body.fond-gris .page, body.fond-gris .lecture, body.fond-gris .bandeau { background: var(--neutre); }
body.fond-gris .sommaire-theme, body.fond-gris .rubrique.socle { background: #fff; }

/* citation */
.b-citation { margin: 22px 0 30px; padding-left: 0; }
.b-citation::before {
  content: '\201D'; position: absolute; left: -26px; top: -10px;
  font-family: var(--titre); font-weight: 700; font-size: 1.9rem; color: var(--accent);
}
.b-citation p { font-style: italic; text-align: left; }
.b-citation .attr {
  font-family: var(--titre); font-size: .78rem; color: var(--legende); margin-top: 4px;
}

/* rubriques : socle, commencer, loin */
.rubrique { margin: 40px 0 0; position: relative; }
.rubrique > .surtitre { color: var(--rub); display: block; margin: 0 0 4px; }
.rubrique::before {
  content: ''; position: absolute; left: -22px; top: 1px; width: 4px; height: 26px; background: var(--rub);
}
.rubrique.socle { --rub: var(--accent); background: var(--accent-pale); padding: 20px 26px 8px; margin-left: -22px; }
.rubrique.socle::before { left: 0; top: 20px; }
.rubrique.socle > .surtitre { margin-left: 0; }
.rubrique.commencer { --rub: var(--amorcage); }
.rubrique.loin { --rub: var(--acceleration); }
.rubrique.question { --rub: var(--navy); }
.rubrique.synthese { --rub: var(--accent); }

.rubrique .brique { margin: 16px 0 18px; padding-left: 30px; }
.rubrique .brique::before {
  content: ''; position: absolute; left: 0; top: .2em;
  width: 18px; height: 1.2em; background: var(--rub);
  -webkit-mask: var(--puce) center/contain no-repeat; mask: var(--puce) center/contain no-repeat;
}
.rubrique.socle    .brique { --puce: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8.5l4 4 8-9' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E"); }
.rubrique.commencer .brique { --puce: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 8h13M9 3l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E"); }
.rubrique.loin      .brique { --puce: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 13L13 3M6 3h7v7' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E"); }
.rubrique.question  .brique { --puce: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E"); }
.rubrique.synthese  .brique { --puce: none; padding-left: 0; }
.rubrique .brique p { text-align: left; }
.rubrique .brique .ouvre { font-weight: 700; color: var(--navy); }
.rubrique .brique .gouttiere { right: -158px; }
.rubrique.socle .brique .gouttiere { right: -150px; }

/* panneaux de chiffres, recomposés */
.chiffres {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 18px 24px; margin: 16px 0 22px; padding-top: 14px; border-top: 1px solid var(--navy);
}
.chiffres .val {
  font-family: var(--titre); font-weight: 600; font-size: 1.6rem; color: var(--navy); line-height: 1.1;
}
.chiffres .leg { font-size: .82rem; color: var(--legende); line-height: 1.35; margin-top: 2px; }
.sous-label {
  font-family: var(--titre); font-weight: 600; font-size: .76rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--navy); margin: 26px 0 0;
}

/* ---- le prisme : met en avant, ne masque pas ---- */

/* ce qui ne vous concerne pas reste lisible, mais s'efface nettement */
.appli.prisme .brique:not(.pour-vous-ci) { opacity: .42; filter: saturate(.3); }
.appli.prisme .brique:not(.pour-vous-ci):hover { opacity: 1; filter: none; }

/* ce qui vous concerne porte son étiquette dans la marge et un filet de couleur */
.prisme-marque {
  position: absolute; left: -122px; top: .05em; width: 106px;
  display: flex; flex-direction: column; align-items: flex-end; gap: 3px;
}
.rubrique .brique .prisme-marque { left: -152px; }
.rubrique.socle .brique .prisme-marque { left: -144px; }
.prisme-marque span {
  font-family: var(--titre); font-weight: 600; font-size: .64rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--navy); white-space: nowrap;
  padding: 1px 0 1px 7px; border-left: 3px solid var(--navy);
}
.prisme-marque span.amorcage { color: #A97A00; border-left-color: var(--amorcage); }
.prisme-marque span.acceleration { color: #1B6FA8; border-left-color: var(--acceleration); }

.appli.prisme .brique.pour-vous-ci::after {
  content: ''; position: absolute; left: -10px; top: -3px; bottom: -3px; width: 2px;
  background: var(--marque, var(--navy)); opacity: .45;
}
.rubrique .brique.pour-vous-ci::after { display: none; }

/* et dans l'encadré des titres, un repère sur les enseignements concernés */
.appli.prisme .sommaire-theme li.pv .no::after {
  content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); margin-left: 5px; vertical-align: 1px;
}
.appli.prisme .sommaire-theme li:not(.pv) { opacity: .45; }

/* la barre du haut : combien de passages, et de quoi sauter de l'un à l'autre */
.pour-vous .saut { display: inline-flex; gap: 3px; margin-left: 6px; }
.pour-vous .saut button {
  width: 24px; height: 24px; border-radius: 3px; display: grid; place-items: center;
  color: var(--legende); box-shadow: inset 0 0 0 1px var(--trait);
}
.pour-vous .saut button:hover { color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.brique.vise { animation: vise 1.6s ease-out; }
@keyframes vise {
  0%, 25% { box-shadow: -6px 0 0 6px var(--accent-pale), 6px 0 0 6px var(--accent-pale); }
  100% { box-shadow: -6px 0 0 6px transparent, 6px 0 0 6px transparent; }
}

/* ---- menu de marquage ---- */
.choix {
  position: absolute; z-index: 60; background: #fff; border: 1px solid var(--trait);
  border-radius: 4px; box-shadow: 0 10px 34px rgba(21,52,92,.16); padding: 5px;
  min-width: 178px;
}
.choix button {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  padding: 7px 10px; border-radius: 3px; font-size: .88rem; color: var(--navy);
}
.choix button:hover { background: var(--neutre); }
.choix button.on { font-weight: 700; }
.choix button .coche { width: 14px; color: var(--accent); }
.choix .sep { height: 1px; background: var(--trait); margin: 4px 0; }
.choix .retirer { color: var(--legende); font-size: .84rem; }

/* ============================ l'essentiel ============================ */
.essentiel { padding-top: 46px; }
.cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 16px; }
.essentiel .carte {
  border: 1px solid var(--trait); border-radius: 4px; padding: 20px 24px 14px;
}
.note-essentiel { color: var(--mention); font-size: .85rem; margin: 22px 0 0; }
.groupe-pied { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.essentiel .carte h3 {
  font-family: var(--titre); font-weight: 600; font-size: 1.02rem; color: var(--navy); margin: 0 0 8px;
}
.deux-groupes { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 30px 0 34px; }
.groupe { padding: 20px 24px; border-radius: 4px; }
.groupe p { text-align: left; }
.groupe.a { background: #FFF8E8; }
.groupe.b { background: #EAF4FC; }
.groupe .surtitre { display: block; margin: 0 0 8px; }
.groupe.a .surtitre { color: #A97A00; }
.groupe.b .surtitre { color: #1B6FA8; }

/* ============================ le rapport édité ============================ */
.rapport {
  max-width: 900px; margin: 0 auto; padding: 40px 48px 120px;
  background: var(--feuille); min-height: 100vh;
}
.rapport-tete { border-bottom: 2px solid var(--navy); padding-bottom: 18px; margin-bottom: 26px; }
.rapport-tete h1 { font-family: var(--titre); font-weight: 600; font-size: 1.9rem;
  color: var(--navy); margin: 0 0 6px; }
.rapport-tete .meta { color: var(--legende); font-size: .9rem; }
.synth-ligne {
  display: grid; grid-template-columns: 26px 1fr auto; gap: 12px; align-items: baseline;
  padding: 7px 0; border-bottom: 1px solid var(--trait);
}

/* la corbeille : discrète, elle se révèle sur la ligne survolée */
.jeter {
  color: var(--mention); padding: 3px 5px; border-radius: 3px; line-height: 0;
  opacity: 0; transition: opacity .12s, color .12s, background .12s;
}
.synth-ligne:hover .jeter, .bloc-retenu:hover .jeter,
.jeter:focus-visible { opacity: 1; }
.jeter:hover { color: #C0392B; background: #FDEDEA; }
.bloc-retenu .sous-label { display: flex; align-items: baseline; gap: 8px; }
.bloc-retenu .jeter { margin-left: auto; }
@media print { .jeter { display: none !important; } }
.synth-ligne .no { font-family: var(--titre); font-weight: 600; font-size: .78rem; color: var(--sa); }
.synth-ligne .ti { font-family: var(--titre); font-weight: 600; font-size: .96rem; color: var(--navy); }
.synth-groupe { margin: 0 0 26px; }
.synth-groupe > .surtitre { color: var(--mention); display: block; margin: 0 0 8px; }
.barre-actions {
  position: sticky; top: 0; z-index: 10; background: var(--feuille);
  border-bottom: 1px solid var(--trait);
  padding: 12px 40px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.barre-actions .bouton { background: var(--navy); color: #fff; }
.barre-actions .bouton:hover { background: #1E4677; }
.barre-actions .bouton.creux { background: #fff; color: var(--navy); box-shadow: inset 0 0 0 1px var(--trait); }
.barre-actions .bouton.creux:hover { box-shadow: inset 0 0 0 1px var(--navy); }

/* ============================ voile modal ============================ */
.voile {
  position: fixed; inset: 0; z-index: 70; background: rgba(21,52,92,.34);
  display: grid; place-items: center; padding: 24px;
}
.modale {
  background: #fff; border-radius: 5px; max-width: 470px; width: 100%;
  padding: 30px 34px 28px; box-shadow: 0 24px 64px rgba(21,52,92,.3);
}
.modale h2 { font-family: var(--titre); font-weight: 600; font-size: 1.25rem;
  color: var(--navy); margin: 0 0 8px; }
.modale p { color: var(--legende); font-size: .93rem; margin: 0 0 18px; }
.modale .champ span { color: var(--mention); }
.modale .champ input {
  background: #fff; border: 1px solid var(--trait); color: var(--encre);
}
.modale .champ input:focus { border-color: var(--navy); }
.modale .bouton { background: var(--navy); color: #fff; }
.modale .rangee { display: flex; gap: 10px; align-items: center; margin-top: 4px; }
.modale .fermer { margin-left: auto; color: var(--legende); font-size: .88rem; }
.case {
  display: flex; align-items: flex-start; gap: 9px; margin: 2px 0 10px;
  font-size: .92rem; color: var(--encre); cursor: pointer;
}
.case input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--navy); flex: 0 0 auto; }
.case b { color: var(--navy); }
.mention-donnees {
  font-size: .78rem !important; line-height: 1.45; color: var(--mention) !important;
  margin: 0 0 16px !important;
}

/* ============================ responsive ============================ */
@media (max-width: 1320px) {
  .colonne { margin-left: 0; margin-right: 0; }
  .brique .gouttiere { position: static; opacity: 1; width: auto; margin: 0 0 6px;
    flex-direction: row; align-items: center; gap: 8px; justify-content: flex-end; }
  .rubrique .brique .gouttiere, .rubrique.socle .brique .gouttiere { right: auto; }
  .repere { position: static; width: auto; display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px; }
  .appli.prisme .brique.pour-vous-ci::after { display: none; }
}
@media (max-width: 900px) {
  body { font-size: 16px; }
  .menu {
    position: fixed; left: 0; top: 0; height: 100vh; width: min(88vw, 340px);
    transform: translateX(-102%); transition: transform .22s ease;
    box-shadow: 0 0 40px rgba(21,52,92,.18);
  }
  .appli.ouvert .menu { transform: none; }
  .appli { display: block; }
  .deplier { display: grid !important; }
  .appli.ouvert .deplier { display: none !important; }
  .poignee { display: none; }
  .bandeau-dedans { padding: 12px 20px 10px 62px; }
  .page, .rapport { padding-left: 20px; padding-right: 20px; }
  .sommaire-theme, .rubrique.socle { margin-left: 0; }
  .ouverture h1 { font-size: 1.55rem; }
  .garde-split { grid-template-columns: 1fr; }
  .garde-volet { padding: 24px 0; }
  .garde-volet + .garde-volet { padding: 24px 0 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.18); }
  .deux-groupes { grid-template-columns: 1fr; }
  .garde-haut, .garde-centre, .garde-bas { padding-left: 22px; padding-right: 22px; }
}
.ecran-voile {
  position: fixed; inset: 0; background: rgba(21,52,92,.32); z-index: 25; display: none;
}
@media (max-width: 900px) { .appli.ouvert .ecran-voile { display: block; } }

/* ---- le back-office ouvre le rapport : pas de menu, pas de marquage ---- */
body.mode-bo .menu, body.mode-bo .deplier, body.mode-bo .poignee,
body.mode-bo .jeter, body.mode-bo [data-vue="essentiel"] { display: none !important; }
body.mode-bo .appli { display: block; }
body.mode-bo .bandeau-dedans::after {
  content: 'Back-office — imprimez en PDF, puis envoyez depuis la boîte générique';
  margin-left: auto; font-family: var(--titre); font-weight: 600; font-size: .74rem;
  letter-spacing: .04em; color: #A05A00; background: #FFF3E0; padding: 4px 11px; border-radius: 10px;
}

/* ============================ impression ============================ */
@media print {
  .menu, .bandeau, .barre-actions, .gouttiere, .deplier, .poignee, .ecran-voile { display: none !important; }
  body { font-size: 10.5pt; }
  .rapport, .page { max-width: none; padding: 0; }
  .colonne { margin-left: 0; max-width: none; }
  .brique { break-inside: avoid; }
  .rubrique.socle { background: var(--accent-pale) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .synth-ligne { break-inside: avoid; }
  a { text-decoration: none; }
  @page { size: A4; margin: 18mm 20mm; }
}