/* =============================================================== tokens == */
/* Pupitre de salle de controle : fond presque noir par defaut, un mode clair
   qui garde les memes roles. La couleur porte un sens et un seul :
   rouge = gauche, bleu = droite, gris/blanc = centre, vert = statut
   (adopte, pour, aligne). Aucune couleur n'est decorative. */
:root{
  color-scheme:dark;
  --f-disp:Archivo,"Arial Narrow",system-ui,sans-serif;
  --f-ui:Archivo,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"Martian Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --bg:#08090a; --panel:#0d0f10; --panel-2:#131618; --panel-3:#1a1d20;
  --line:#1f2326; --line-2:#30363a;
  --ink:#eef1f3; --ink-2:#a3abb2; --ink-3:#6e767d;
  --green:#3ddc84; --on-green:#03170b; --green-t:#3ddc84;
  --focus:#3ddc84;

  /* blocs : rouge / neutre / deux bleus ecartes en luminance */
  --b-gauche:#f0474e; --b-centre:#dfe4e9; --b-droite:#86b4ff;
  --b-drnat:#2a6bf0;  --b-divers:#7c848c;

  /* groupes, de gauche a droite : rampe rouge -> neutre -> bleu,
     luminances alternees pour que deux voisins ne se confondent pas */
  --g-LFI:#f0474e; --g-ECOS:#ff9ea1; --g-SOC:#c2343b; --g-GDR:#ffc7c9;
  --g-LIOT:#7c848c; --g-DEM:#b4bcc4; --g-EPR:#eef1f4; --g-NI:#565d63;
  --g-HOR:#c9dcfb; --g-DR:#86b4ff; --g-UDR:#bcd4ff; --g-RN:#2a6bf0;

  --pour:#3ddc84; --contre:#eef1f3; --abst:#5d656c;
}
@media (prefers-color-scheme:light){ :root:not([data-theme="dark"]){
  color-scheme:light;
  --bg:#eceef0; --panel:#fafbfb; --panel-2:#f1f3f4; --panel-3:#e4e7ea;
  --line:#d6dade; --line-2:#b9c0c6;
  --ink:#0a0c0d; --ink-2:#454c52; --ink-3:#6f777e;
  --green:#22c56e; --on-green:#03170b; --green-t:#0b7a3e;
  --focus:#0b7a3e;
  --b-gauche:#d42a31; --b-centre:#2e3338; --b-droite:#86aef0;
  --b-drnat:#1a4fc0;  --b-divers:#8a9299;
  --g-LFI:#d42a31; --g-ECOS:#f07b80; --g-SOC:#9e2027; --g-GDR:#f4b0b2;
  --g-LIOT:#6f777e; --g-DEM:#9aa2a9; --g-EPR:#2e3338; --g-NI:#c3c9ce;
  --g-HOR:#a9c4f2; --g-DR:#4f8ef0; --g-UDR:#8fb3f2; --g-RN:#1a4fc0;
  --pour:#1faa5e; --contre:#1a1d20; --abst:#b3bac0;
}}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#eceef0; --panel:#fafbfb; --panel-2:#f1f3f4; --panel-3:#e4e7ea;
  --line:#d6dade; --line-2:#b9c0c6;
  --ink:#0a0c0d; --ink-2:#454c52; --ink-3:#6f777e;
  --green:#22c56e; --on-green:#03170b; --green-t:#0b7a3e;
  --focus:#0b7a3e;
  --b-gauche:#d42a31; --b-centre:#2e3338; --b-droite:#86aef0;
  --b-drnat:#1a4fc0;  --b-divers:#8a9299;
  --g-LFI:#d42a31; --g-ECOS:#f07b80; --g-SOC:#9e2027; --g-GDR:#f4b0b2;
  --g-LIOT:#6f777e; --g-DEM:#9aa2a9; --g-EPR:#2e3338; --g-NI:#c3c9ce;
  --g-HOR:#a9c4f2; --g-DR:#4f8ef0; --g-UDR:#8fb3f2; --g-RN:#1a4fc0;
  --pour:#1faa5e; --contre:#1a1d20; --abst:#b3bac0;
}

/* =============================================================== base ==== */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--f-ui); font-size:14px; line-height:1.55; margin:0;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--f-disp); font-weight:800; font-stretch:68%;
  text-wrap:balance; margin:0; letter-spacing:-.01em; line-height:1.02}
h1{font-size:clamp(2.6rem,5.2vw,4.4rem); letter-spacing:-.02em}
h2{font-size:clamp(1.6rem,2.6vw,2.2rem)}
h3{font-size:1.5rem}
p{margin:0}
sup{font-size:.62em; line-height:0}
a{color:var(--ink); text-decoration-color:var(--line-2); text-underline-offset:3px}
a:hover{text-decoration-color:var(--ink)}
:focus-visible{outline:1px solid var(--focus); outline-offset:2px}
code{font-family:var(--f-mono); font-size:.85em}

.wrap{max-width:1360px; margin:0 auto; padding-inline:24px}
@media (max-width:560px){.wrap{padding-inline:16px}}

/* libelle d'instrument : rien ne s'affiche sans lui */
.lbl,.eyebrow{font-family:var(--f-mono); font-stretch:87.5%; font-size:10px;
  font-weight:500; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-3); line-height:1.4}
.eyebrow{margin-bottom:12px; color:var(--ink-2)}
.eyebrow::before{content:""; display:inline-block; width:6px; height:6px;
  background:var(--ink-3); margin-right:9px; vertical-align:1px}
.mono,.num{font-family:var(--f-mono); font-stretch:87.5%;
  font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.num{font-size:.8em}
.muted{color:var(--ink-2)}
.small{font-size:12.5px}

/* ============================================================ barre ====== */
.bar{position:sticky; top:0; z-index:30; background:var(--bg);
  border-bottom:1px solid var(--line)}
.bar-in{display:flex; align-items:stretch; gap:20px; min-height:48px;
  border-bottom:1px solid var(--line)}
.bar-sections{display:flex}
/* deux niveaux : les pages du site, puis les sections de la page */
.sitenav{display:flex; flex:1; gap:2px; min-width:0; overflow-x:auto; scrollbar-width:none}
.sitenav a{display:flex; align-items:center; padding:0 14px; font-family:var(--f-disp);
  font-stretch:78%; font-weight:700; font-size:14px; color:var(--ink-3);
  text-decoration:none; white-space:nowrap; border-bottom:2px solid transparent;
  margin-bottom:-1px}
.sitenav a:hover{color:var(--ink)}
.sitenav a.on{color:var(--ink); border-bottom-color:var(--green)}
.brand{display:flex; align-items:center; gap:9px; text-decoration:none;
  font-family:var(--f-mono); font-stretch:87.5%; font-size:11px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2);
  white-space:nowrap}
.brand b{color:var(--ink); font-weight:700; margin-left:-3px}
.brand .mark{height:15px; width:auto; display:block; flex:none}
@keyframes blink{50%{opacity:.35}}
nav.jump{display:flex; flex:1; min-width:0; overflow-x:auto; scrollbar-width:none;
  /* le degrade signale qu'il reste des liens a droite sur ecran etroit */
  mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
nav.jump::-webkit-scrollbar{display:none}
nav.jump a{display:flex; align-items:center; padding:0 9px;
  font-family:var(--f-mono); font-stretch:87.5%; font-size:10px;
  letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3);
  text-decoration:none; white-space:nowrap; border-bottom:1px solid transparent;
  margin-bottom:-1px}
nav.jump a:hover{color:var(--ink)}
nav.jump a.on{color:var(--ink); border-bottom-color:var(--ink)}
.themebtn{display:flex; align-items:center; gap:8px; background:none;
  border:0; border-left:1px solid var(--line); padding:0 0 0 16px;
  color:var(--ink); cursor:pointer; font-family:var(--f-mono);
  font-stretch:87.5%; font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; white-space:nowrap}
.themebtn::after{content:""; width:22px; height:12px; border:1px solid var(--line-2);
  background:linear-gradient(90deg,var(--ink) 50%,transparent 50%)}
@media (max-width:700px){.brand span{display:none}}

/* ======================================================= boutons, champs */
.entry{display:flex; flex-wrap:wrap; gap:8px}
.btn{display:inline-flex; align-items:center; padding:10px 16px;
  font-family:var(--f-mono); font-stretch:87.5%; font-size:10.5px;
  letter-spacing:.12em; text-transform:uppercase; font-weight:600;
  text-decoration:none; border:1px solid transparent; cursor:pointer;
  transition:background .2s, border-color .2s}
.btn-1{background:var(--green); color:var(--on-green)}
.btn-1:hover{background:color-mix(in oklab,var(--green) 85%,var(--ink))}
.btn-2{background:transparent; color:var(--ink); border-color:var(--line-2)}
.btn-2:hover{border-color:var(--ink)}
.btn-s{padding:7px 12px}
.ibtn{background:transparent; color:var(--ink); border:1px solid var(--line-2);
  min-width:30px; height:30px; cursor:pointer; font:inherit}
.ibtn:hover{border-color:var(--ink)}
.ibtn.txt{font-family:var(--f-mono); font-stretch:87.5%; font-size:9.5px;
  letter-spacing:.12em; text-transform:uppercase; padding:0 10px; height:24px}
.seg{display:inline-flex; border:1px solid var(--line-2)}
.seg button{font-family:var(--f-mono); font-stretch:87.5%; font-size:9.5px;
  letter-spacing:.11em; text-transform:uppercase; padding:6px 11px;
  background:transparent; color:var(--ink-2); border:0; cursor:pointer;
  border-right:1px solid var(--line-2); white-space:nowrap}
.seg button:last-child{border-right:0}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--ink); color:var(--bg)}
input[type="search"],select{font:inherit; font-size:13px; padding:7px 10px;
  color:var(--ink); background:var(--panel-2); border:1px solid var(--line-2);
  border-radius:0; max-width:100%}
input[type="search"]{min-width:min(240px,100%)}
input[type="checkbox"]{accent-color:var(--green)}
label.ctl{font-size:12.5px; color:var(--ink-2); display:flex; gap:8px;
  align-items:center}

/* pastille d'etat : rectangle a peine arrondi, vert plein, texte fonce */
.pill{display:inline-flex; align-items:center; gap:5px; font-family:var(--f-mono);
  font-stretch:87.5%; font-size:9.5px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; padding:3px 7px; border-radius:2px;
  background:var(--green); color:var(--on-green); white-space:nowrap}
.pill.off{background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1px var(--line-2)}
.pill.run{background:var(--panel-3); color:var(--ink-2)}
.pill.run::before{content:""; width:5px; height:5px; background:var(--green);
  border-radius:50%; animation:blink .8s infinite}

/* ============================================================== panneaux */
section{padding-block:72px 0; scroll-margin-top:92px}
.panel{background:var(--panel); border:1px solid var(--line); position:relative;
  min-width:0}
.ph{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:6px 14px; padding:9px 14px; border-bottom:1px solid var(--line);
  position:relative; min-height:38px}
.ph .meta{display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  font-family:var(--f-mono); font-stretch:87.5%; font-size:10px;
  color:var(--ink-2); letter-spacing:.04em}
/* le filet balaye le bandeau quand le panneau entre a l'ecran */
.ph::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:var(--ink); transform:scaleX(0); transform-origin:left; opacity:0}
.in .ph::after, .panel.in > .ph::after{animation:scan 1.3s cubic-bezier(.6,0,.2,1) .1s}
@keyframes scan{0%{transform:scaleX(0); opacity:1} 70%{transform:scaleX(1); opacity:1}
  100%{transform:scaleX(1); opacity:0}}
.pad{padding:14px}
.controls{display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center;
  padding:10px 14px; border-bottom:1px solid var(--line)}

.sechead{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:14px 48px; align-items:end; margin-bottom:20px}
.sechead p{max-width:62ch; color:var(--ink-2); font-size:14px}
@media (max-width:820px){.sechead{grid-template-columns:1fr}}

.note{margin-top:14px; border:1px solid var(--line); padding:14px 16px;
  display:grid; grid-template-columns:150px minmax(0,72ch); gap:6px 24px;
  font-size:13.5px; color:var(--ink-2)}
.note::before{content:"Note de lecture"; font-family:var(--f-mono);
  font-stretch:87.5%; font-size:10px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-3); grid-row:1 / span 3; padding-top:2px}
.note b{color:var(--ink)}
@media (max-width:700px){.note{grid-template-columns:1fr}
  .note::before{grid-row:auto}}

/* ======================================================= parties ======= */
/* Trois parties racontent la page : l'Assemblee, qui vote avec qui, et vous. */
.chapter{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 18px;
  border-top:1px solid var(--ink); padding-top:14px; margin-bottom:44px}
.chapter .lbl{color:var(--green-t)}
.chapter p{font-family:var(--f-disp); font-stretch:68%; font-weight:800;
  font-size:clamp(2.2rem,4.4vw,3.6rem); line-height:1; letter-spacing:-.02em;
  flex-basis:100%}
section:has(> .chapter){padding-block-start:110px}

/* ====================================================== page a propos === */
.about{padding-block:36px 0}
.about-lede{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));
  gap:18px 40px; margin-bottom:26px}
.about-lede p{font-size:16px; color:var(--ink-2); max-width:62ch}
.about-h{margin-top:56px}
.about-next{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));
  border-top:1px solid var(--line); border-left:1px solid var(--line); margin-top:18px}
.about-next > div{background:var(--panel); padding:16px 18px 20px; display:grid;
  gap:10px; align-content:start;
  border-right:1px solid var(--line); border-bottom:1px solid var(--line)}
.about-next p{font-size:13.5px; color:var(--ink-2)}
.about-next b{color:var(--ink)}
.about-next .lbl{color:var(--ink)}
/* mention d'edition : une note de bas de page, pas un encadre */
.fnote{margin-top:28px; padding-top:14px; border-top:1px solid var(--line);
  display:grid; gap:10px; max-width:80ch}
/* texte en image : les adresses ne sont pas dans le code de la page, donc
   pas collectables par un robot. Le gris choisi tient sur les deux fonds. */
.imgtxt{display:block; width:100%; max-width:760px; height:auto}

/* ================================================= avertissements ====== */
.disc{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  border-top:1px solid var(--line); border-left:1px solid var(--line)}
.disc > div{background:var(--panel); padding:14px 16px 16px;
  border-right:1px solid var(--line); border-bottom:1px solid var(--line)}
.disc p{font-size:13px; color:var(--ink-2); margin-top:8px}
.disc .lbl{color:var(--ink)}

/* ================================================================ hero === */
.hero{padding-block:36px 0; display:grid; gap:12px;
  grid-template-columns:minmax(0,5fr) minmax(0,8fr);
  grid-template-areas:"intro hemi" "coh hemi" "tiles tiles"}
.hero-intro{grid-area:intro; padding:18px 4px 12px; display:flex;
  flex-direction:column; gap:20px}
.hero-intro h1{max-width:9ch}
.lede{max-width:52ch; color:var(--ink-2); font-size:15px}
.hemi-panel{grid-area:hemi}
.coh-panel{grid-area:coh; align-self:end}
.tiles{grid-area:tiles}
@media (max-width:1020px){
  .hero{grid-template-columns:1fr; grid-template-areas:"intro" "hemi" "coh" "tiles"}
  .hero-intro h1{max-width:none}
}
.readout{display:grid; grid-template-columns:auto 1fr; gap:5px 16px; margin:0;
  border-top:1px solid var(--line); padding-top:14px}
.readout dt{font-family:var(--f-mono); font-stretch:87.5%; font-size:10px;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3)}
.readout dd{margin:0; font-family:var(--f-mono); font-stretch:87.5%;
  font-size:11px; color:var(--ink-2); font-variant-numeric:tabular-nums}

.hemi-top{display:flex; flex-wrap:wrap; gap:12px 20px; justify-content:space-between;
  align-items:flex-start; padding:14px 14px 0}
.hemi-title{flex:1 1 320px; min-width:0}
.hemi-title h2{font-size:clamp(1.4rem,2.2vw,1.9rem); margin-top:4px}
.hemi-title .qo{margin-top:6px; max-width:80ch}
.hemi-title #hemidossier{display:inline-block; margin-top:8px}
.hemi-nav{display:flex; gap:6px; align-items:center}
.hemi-nav select{max-width:230px; height:30px; padding:0 8px; font-size:12px}
.hemi-wrap{position:relative; padding:4px 14px 0}
#hemi{display:block; width:100%; touch-action:manipulation}
.hemi-key{display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px;
  padding:6px 14px 12px}
.hemi-key #hemireplay{margin-left:auto}
.key{display:inline-flex; flex-wrap:wrap; align-items:center; gap:4px 10px;
  font-family:var(--f-mono); font-stretch:87.5%; font-size:9.5px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2)}
.key i{display:inline-block; width:8px; height:8px; border-radius:50%;
  margin-right:-4px}
.key i.hollow{background:transparent!important; box-shadow:inset 0 0 0 1px var(--ink-2)}
.key i.k-pour{background:var(--pour); border-radius:0}
.key i.k-contre{background:var(--contre); border-radius:0}
.key i.k-abst{background:var(--abst); border-radius:0}

.tally{display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--line)}
.tally > div{padding:10px 14px 12px; border-right:1px solid var(--line)}
.tally > div:last-child{border-right:0}
.tally b{display:block; font-family:var(--f-disp); font-stretch:68%;
  font-weight:800; font-size:clamp(1.9rem,3.4vw,2.8rem); line-height:1;
  font-variant-numeric:tabular-nums; margin-top:6px; letter-spacing:-.01em}
.tally > div:nth-child(1) b{color:var(--green-t)}
.tally > div:nth-child(4) b{color:var(--ink-3)}
@media (max-width:520px){.tally{grid-template-columns:1fr 1fr}
  .tally > div:nth-child(2){border-right:0}
  .tally > div:nth-child(-n+2){border-bottom:1px solid var(--line)}}

.margin{border-top:1px solid var(--line); padding:12px 14px 14px}
.margin-head{display:flex; justify-content:space-between; align-items:baseline;
  gap:10px; margin-bottom:26px}
.margin-val{display:flex; align-items:baseline; gap:8px}
.margin-val b{font-family:var(--f-disp); font-stretch:68%; font-weight:800;
  font-size:1.5rem; line-height:1; font-variant-numeric:tabular-nums}
.mbar{position:relative; height:12px; background:var(--panel-3);
  background-image:repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),var(--line) calc(10% - 1px) 10%)}
.mfill{position:absolute; left:0; top:0; bottom:0; width:0; background:var(--green);
  transition:width .5s cubic-bezier(.22,1,.36,1)}
.mbar.lost .mfill{background:var(--ink-2)}
.mthr{position:absolute; left:50%; top:-20px; bottom:-4px; width:1px; background:var(--ink)}
.mthr .lbl{position:absolute; bottom:100%; left:6px; white-space:nowrap;
  color:var(--ink); transform:translateY(12px)}
.mthr::after{content:""; position:absolute; top:0; left:-3px; border:3.5px solid transparent;
  border-top-color:var(--ink)}
.mscale{display:flex; justify-content:space-between; margin-top:6px;
  font-family:var(--f-mono); font-stretch:87.5%; font-size:9.5px; color:var(--ink-3);
  letter-spacing:.06em; font-variant-numeric:tabular-nums}
#h-share{color:var(--ink)}

/* ================================ alignement : carres verts en escalier == */
.coh{padding:6px 14px 12px}
.coh-row{display:grid; grid-template-columns:48px 108px 40px minmax(0,1fr);
  gap:10px; align-items:center; padding:3.5px 0}
.coh-g{display:flex; align-items:center; gap:6px; font-family:var(--f-mono);
  font-stretch:87.5%; font-size:10px; letter-spacing:.06em; color:var(--ink)}
.coh-g i{width:3px; height:12px; flex:none}
.sqs{display:flex; gap:2px}
.sq{display:block; width:9px; height:9px; box-shadow:inset 0 0 0 1px var(--line-2)}
.sq.on{background:var(--green); box-shadow:none}
.sq.off{box-shadow:inset 0 0 0 1px var(--ink-2)}
.sq.abs{box-shadow:inset 0 0 0 1px var(--line)}
.sq.na{background:var(--panel-3); box-shadow:none}
.coh-line{font-family:var(--f-mono); font-stretch:87.5%; font-size:9px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.coh-row .num{text-align:right; color:var(--ink)}
.sqs .sq{animation:sqin .35s both; animation-delay:calc(var(--k,0) * 22ms)}
@keyframes sqin{from{transform:scale(0)} to{transform:scale(1)}}

/* =============================================================== tiles === */
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  border:1px solid var(--line); background:var(--panel)}
.tile{padding:12px 14px 14px; border-right:1px solid var(--line); margin-right:-1px}
.tile span{display:block}
.tile b{display:block; font-family:var(--f-disp); font-stretch:68%; font-weight:800;
  font-size:clamp(1.8rem,2.8vw,2.4rem); line-height:1; margin-top:8px;
  font-variant-numeric:tabular-nums; letter-spacing:-.01em}

/* ============================================================== legend === */
.legend{display:flex; flex-wrap:wrap; gap:6px; padding:12px 14px 4px}
.lgd{display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  font-family:var(--f-mono); font-stretch:87.5%; font-size:9.5px;
  letter-spacing:.08em; text-transform:uppercase; padding:4px 8px;
  border:1px solid var(--line-2); background:transparent; color:var(--ink)}
.lgd[aria-pressed="false"]{opacity:.35}
.lgd .sw{width:8px; height:8px; border-radius:50%; flex:none}
.lgd .sw.ring{background:transparent!important; box-shadow:inset 0 0 0 1.5px var(--b-divers)}
.lgd .ct{color:var(--ink-3)}

/* ============================================================= scatter === */
.scatter-wrap{position:relative; padding:6px 14px 10px}
#scatter{width:100%; display:block; touch-action:none}
.tip{position:absolute; pointer-events:none; z-index:9; opacity:0;
  background:var(--panel-2); border:1px solid var(--line-2);
  padding:8px 10px; font-size:12px; max-width:260px; line-height:1.45;
  transition:opacity .1s; color:var(--ink)}
.tip b{display:block; font-size:13px}
.tip .lbl{display:block; margin-top:4px}
.axnote{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-family:var(--f-mono); font-stretch:87.5%; font-size:9.5px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
  padding:8px 14px 12px; border-top:1px solid var(--line)}

/* ============================================================= bascule === */
.duo{display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); gap:12px;
  align-items:start}
@media (max-width:900px){.duo{grid-template-columns:1fr}}
.morph-wrap{padding:6px 14px}
.morph-wrap canvas{display:block; width:100%}
.flip{margin:0; display:grid; grid-template-columns:1fr 1fr}
.flip > div{padding:14px; border-bottom:1px solid var(--line)}
.flip > div + div{border-left:1px solid var(--line)}
.flip dt{display:flex; justify-content:space-between; align-items:center}
.flip dd{margin:10px 0 0}
.vrow{display:grid; grid-template-columns:1fr auto; gap:4px 8px; margin-top:10px;
  font-size:12px; color:var(--ink-2)}
.vrow b{font-family:var(--f-disp); font-stretch:68%; font-weight:800; font-size:1.7rem;
  line-height:1; color:var(--ink); font-variant-numeric:tabular-nums}
.vrow .vb{grid-column:1/-1; height:6px; background:var(--panel-3); position:relative}
.vrow .vb i{position:absolute; inset:0 auto 0 0; background:var(--ink);
  transition:width .9s cubic-bezier(.22,1,.36,1)}
.vrow.top .vb i{background:var(--green)}
.flip .h{font-family:var(--f-disp); font-stretch:68%; font-weight:800;
  font-size:1.35rem; line-height:1.05; margin-top:4px}
.prose{display:grid; gap:10px; color:var(--ink-2); font-size:13.5px}

/* ============================================================= heatmap === */
.hm-scroll{overflow-x:auto; padding:14px}
table.hm{border-collapse:separate; border-spacing:2px; margin:0 auto}
table.hm th{font-family:var(--f-mono); font-stretch:87.5%; font-weight:500;
  font-size:10px; letter-spacing:.06em; color:var(--ink-2); padding:2px 6px;
  white-space:nowrap; text-align:right}
table.hm th.col{writing-mode:vertical-rl; transform:rotate(180deg);
  text-align:left; height:52px; padding:4px 2px}
table.hm td{width:52px; height:34px; text-align:center; font-family:var(--f-mono);
  font-stretch:87.5%; font-size:11px; font-variant-numeric:tabular-nums;
  cursor:default; transition:outline-color .15s; outline:1px solid transparent}
table.hm td:hover{outline-color:var(--ink)}
table.hm td.self{background:transparent!important; color:var(--ink-3);
  box-shadow:inset 0 0 0 1px var(--line)}
.in table.hm td{animation:cellin .5s both; animation-delay:calc(var(--k,0) * 6ms)}
@keyframes cellin{from{opacity:0}}
.scale{display:flex; align-items:center; gap:8px; font-family:var(--f-mono);
  font-stretch:87.5%; font-size:9.5px; letter-spacing:.06em; color:var(--ink-2)}
.scale .ramp{height:8px; width:120px;
  background:linear-gradient(90deg,color-mix(in oklab,var(--green) 4%,var(--panel)),var(--green))}

/* ========================================================= par domaine == */
.ramp.ramp-full{background:linear-gradient(90deg,color-mix(in oklab,var(--green) 4%,var(--panel)),var(--green))}
#themes .hm-scroll{max-height:620px; overflow:auto}
table.thm{margin:0}
table.thm th.thh{writing-mode:horizontal-tb; transform:none; text-align:left;
  vertical-align:bottom; white-space:normal; width:118px; min-width:96px;
  font-size:10px; line-height:1.3; padding:4px 6px 8px; color:var(--ink)}
table.thm th.thh .lbl{display:block; margin-top:4px; letter-spacing:.06em}
table.thm thead th{position:sticky; top:0; background:var(--panel); z-index:1}
table.thm tbody th{text-align:left; position:sticky; left:0; background:var(--panel);
  z-index:1; max-width:210px; overflow:hidden; text-overflow:ellipsis}
table.thm td{width:auto; min-width:96px; height:30px}
table.thm tr.ref th, table.thm tr.ref td{border-bottom:1px solid var(--ink)}

/* =============================================================== table === */
.split{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:12px; align-items:start}
@media (max-width:960px){.split{grid-template-columns:1fr}}
.tbl-scroll{overflow:auto; max-height:640px}
table.dep{width:100%; border-collapse:collapse; font-size:13px}
table.dep thead th{position:sticky; top:0; z-index:2; background:var(--panel-2);
  border-bottom:1px solid var(--line-2); text-align:left; font-family:var(--f-mono);
  font-stretch:87.5%; font-weight:500; font-size:9.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3); padding:9px 12px;
  white-space:nowrap; cursor:pointer; user-select:none}
table.dep thead th[aria-sort]{color:var(--ink)}
table.dep thead th .ar{color:var(--green-t)}
table.dep td{padding:8px 12px; border-bottom:1px solid var(--line); white-space:nowrap}
table.dep tbody tr{cursor:pointer}
table.dep tbody tr:hover{background:var(--panel-2)}
table.dep tbody tr[aria-selected="true"]{background:var(--panel-3);
  box-shadow:inset 2px 0 0 var(--ink)}
td.r,th.r{text-align:right!important; font-family:var(--f-mono); font-stretch:87.5%;
  font-variant-numeric:tabular-nums}
.chip{display:inline-flex; align-items:center; gap:5px; font-family:var(--f-mono);
  font-stretch:87.5%; font-size:9.5px; letter-spacing:.06em; padding:2px 6px 2px 4px;
  border:1px solid var(--line-2); color:var(--ink); white-space:nowrap}
.chip i{width:7px; height:7px; border-radius:50%; display:block}
.gone{font-family:var(--f-mono); font-stretch:87.5%; font-size:9px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-2); padding:1px 5px;
  box-shadow:inset 0 0 0 1px var(--line-2); vertical-align:2px}

/* ========================================================== fiche ======== */
/* Trois chiffres, une ligne, pas de tableau : la fiche respire. */
.trio{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px;
  margin-top:4px}
.trio b{display:block; font-family:var(--f-disp); font-stretch:68%; font-weight:800;
  font-size:1.6rem; line-height:1.05; margin:5px 0 3px; font-variant-numeric:tabular-nums}
.trio .small{display:block; color:var(--ink-3)}
/* Reglette de position : on lit une place entre deux extremes, pas un score. */
.pos + .pos{margin-top:16px}
.pos-h{display:flex; justify-content:space-between; align-items:baseline; gap:10px}
.pos-h b{font-family:var(--f-disp); font-stretch:68%; font-weight:800; font-size:1.6rem;
  line-height:1; font-variant-numeric:tabular-nums}
.pos-bar{position:relative; height:10px; background:var(--panel-3); margin-top:8px}
.pos-bar .zero{position:absolute; left:50%; top:-3px; bottom:-3px; width:1px;
  background:var(--line-2)}
.pos-bar .cur{position:absolute; top:-3px; bottom:-3px; width:3px; background:var(--ink);
  transform:translateX(-1.5px)}
.pos-bar .moy{position:absolute; top:2px; bottom:2px; width:1px; background:var(--ink-3)}
.pos-bar .moy::after{content:""; position:absolute; left:-2px; top:-4px;
  border:2.5px solid transparent; border-top-color:var(--ink-3)}
.pos-ax{display:flex; justify-content:space-between; margin-top:5px}
.pos-s{margin-top:6px}
.pos-note{margin-top:14px; padding-top:10px; border-top:1px dashed var(--line)}
.dtl .who{padding:14px 14px 12px}
.dtl h3{font-size:clamp(1.8rem,3vw,2.4rem); margin-top:8px}
.dtl .sub{font-size:13px; color:var(--ink-2); margin-top:8px; display:flex;
  flex-wrap:wrap; gap:6px 10px; align-items:center}
.bio{display:flex; flex-wrap:wrap; gap:4px; margin-top:12px}
.bio a,.bio span{font-family:var(--f-mono); font-stretch:87.5%; font-size:10px;
  padding:3px 7px; border:1px solid var(--line); color:var(--ink-2); text-decoration:none}
.bio a{color:var(--ink); border-color:var(--line-2); overflow-wrap:anywhere}
.bio a:hover{border-color:var(--ink)}
.kv{display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--line)}
.kv > div{padding:10px 14px 12px; border-right:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.kv > div:nth-child(3n){border-right:0}
.kv span{display:block; font-family:var(--f-mono); font-stretch:87.5%; font-size:9.5px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3)}
.kv b{display:block; font-family:var(--f-disp); font-stretch:68%; font-weight:800;
  font-size:1.75rem; line-height:1; margin-top:7px; font-variant-numeric:tabular-nums}
.kv.k4{grid-template-columns:repeat(4,minmax(0,1fr))}
.kv.k4 > div:nth-child(3n){border-right:1px solid var(--line)}
.kv.k4 > div:nth-child(4n){border-right:0}
@media (max-width:480px){.kv,.kv.k4{grid-template-columns:1fr 1fr}
  .kv > div:nth-child(3n),.kv.k4 > div:nth-child(4n){border-right:1px solid var(--line)}
  .kv > div:nth-child(2n){border-right:0}}
.blk{padding:12px 14px; border-bottom:1px solid var(--line)}
.blk:last-child{border-bottom:0}
.blk-h{display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  margin-bottom:9px}
.blk-h .num{color:var(--ink)}
.align-row{display:flex; gap:3px; flex-wrap:wrap}
.align-row .sq{width:14px; height:14px}
.align-key{display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:8px}
.align-key span{display:inline-flex; align-items:center; gap:6px}
.align-key .sq{width:8px; height:8px; animation:none}
.subhead{font-family:var(--f-mono); font-stretch:87.5%; font-size:10px;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3);
  margin:14px 0 6px}
.subhead:first-child{margin-top:0}
.simrow{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 10px;
  align-items:center; padding:3px 0; font-size:12.5px}
.simrow .bar{grid-column:1/-1; height:3px; background:var(--panel-3)}
.simrow .bar i{display:block; height:100%; background:var(--green);
  transition:width .5s cubic-bezier(.22,1,.36,1)}
.simrow .nm{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  display:flex; align-items:center; gap:7px}
.simrow .nm .chip{padding:1px 5px 1px 3px}
.path{display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.path .arrow{color:var(--ink-3); font-family:var(--f-mono); font-size:11px}

/* sparkline : accord siege par siege, de gauche a droite */
.spark{position:relative; height:72px; margin-top:4px}
.spark svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.spark .grid{stroke:var(--line); stroke-width:1; stroke-dasharray:2 3}
.spark .area{fill:color-mix(in oklab,var(--green) 16%,transparent)}
.spark .ln{fill:none; stroke:var(--green); stroke-width:1.5}
.spark .me{stroke:var(--ink); stroke-width:1}
.spark .dot{position:absolute; width:7px; height:7px; border-radius:50%;
  background:var(--ink); box-shadow:0 0 0 2px var(--panel);
  transform:translate(-50%,-50%)}
.spark .gl{position:absolute; right:0; font-family:var(--f-mono); font-size:9px;
  color:var(--ink-3); transform:translateY(-110%)}
.spark-ax{display:flex; justify-content:space-between; margin-top:5px}
.spark .ln{stroke-dasharray:1000}
.in .spark .ln{animation:draw 1.4s cubic-bezier(.4,0,.2,1) .1s both}
@keyframes draw{from{stroke-dashoffset:1000}}

/* ============================================= assidus et passerelles === */
.duo-even{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
@media (max-width:900px){.duo-even{grid-template-columns:1fr}}
.who-btn{display:inline-flex; align-items:center; gap:7px; background:none; border:0;
  padding:0; color:var(--ink); font:inherit; font-size:12.5px; cursor:pointer;
  text-align:left; min-width:0}
.who-btn:hover{text-decoration:underline; text-underline-offset:3px}
.pair{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 10px;
  align-items:center; padding:6px 0}
.pair + .pair{border-top:1px dashed var(--line)}
.pair-who{display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; min-width:0}
.plus{color:var(--ink-3); font-family:var(--f-mono); font-size:11px}
.pair .num{font-size:13px; color:var(--ink)}
.pbar{grid-column:1/-1; position:relative; height:6px; background:var(--panel-3)}
.pbar i{position:absolute; inset:0 auto 0 0; background:var(--green);
  transition:width .6s cubic-bezier(.22,1,.36,1)}
.pbar b{position:absolute; top:-4px; bottom:-4px; width:1px; background:var(--ink)}
.pco{grid-column:1/-1}
.br .blk-h{margin-bottom:4px}
.gbar.asrow{grid-template-columns:minmax(0,230px) 1fr 52px; padding:5px 14px}
.gbar.asrow:first-child{padding-top:12px}
.asrow .who-btn{overflow:hidden; white-space:nowrap}

/* ====================================================== le saviez-vous == */
.facts{display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
  border-top:1px solid var(--line); border-left:1px solid var(--line)}
.fact{background:var(--panel); padding:14px 16px 18px; border-right:1px solid var(--line);
  border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:8px}
.fact > b{font-family:var(--f-disp); font-stretch:68%; font-weight:800;
  font-size:clamp(2.4rem,4vw,3.2rem); line-height:.95; letter-spacing:-.01em;
  font-variant-numeric:tabular-nums}
.fact > b small{font-size:.4em; font-weight:700; letter-spacing:0; margin-left:4px;
  color:var(--ink-2)}
.fact p{font-size:13px; color:var(--ink-2)}
.fact .who-btn{display:inline; font-size:13px; font-weight:600}
.fact .chip{vertical-align:1px}
.in .fact{animation:tilein .6s both}
.in .fact:nth-child(2){animation-delay:.06s} .in .fact:nth-child(3){animation-delay:.12s}
.in .fact:nth-child(4){animation-delay:.18s} .in .fact:nth-child(5){animation-delay:.24s}
.in .fact:nth-child(6){animation-delay:.3s}  .in .fact:nth-child(7){animation-delay:.36s}
.in .fact:nth-child(8){animation-delay:.42s} .in .fact:nth-child(9){animation-delay:.48s}

/* ======================================================== transfuges ===== */
.moves{display:flex; flex-direction:column}
.mv{padding:11px 14px; display:grid; grid-template-columns:minmax(0,220px) minmax(0,1fr) auto;
  gap:8px 20px; align-items:center; border-bottom:1px solid var(--line)}
.mv:last-child{border-bottom:0}
.mv .nm{font-weight:600}
.mv .dates{font-family:var(--f-mono); font-stretch:87.5%; font-size:10px;
  color:var(--ink-3); margin-top:2px}
.tl{position:relative; height:22px; background:var(--panel-2)}
.tl span{position:absolute; top:3px; bottom:3px; display:flex; align-items:center;
  min-width:3px; transform-origin:left; box-shadow:inset -1px 0 0 var(--panel)}
.in .tl span{animation:grow .8s cubic-bezier(.22,1,.36,1) both;
  animation-delay:calc(var(--k,0) * 70ms)}
@keyframes grow{from{transform:scaleX(0)}}
@media (max-width:640px){.mv{grid-template-columns:1fr}}

/* ============================================================ boussole === */
.q{border-bottom:1px solid var(--line); padding:14px;
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px 20px;
  align-items:center}
.q:last-of-type{border-bottom:0}
.q .qt{font-size:14.5px; line-height:1.35; font-weight:600}
.q .qth{color:var(--green-t); margin-bottom:5px}
.qo{font-size:12px; line-height:1.45; color:var(--ink-3); margin-top:4px}
.qm{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin-top:8px}
.qm .lbl{letter-spacing:.08em}
.qbar{position:relative; width:90px; height:5px; background:var(--panel-3)}
.qbar i{position:absolute; inset:0 auto 0 0; background:var(--green)}
.qbar.lost i{background:var(--ink-3)}
.qbar::after{content:""; position:absolute; left:50%; top:-3px; bottom:-3px;
  width:1px; background:var(--ink)}
.lnk{background:none; border:0; padding:0; cursor:pointer; color:var(--ink-2);
  font-family:var(--f-mono); font-stretch:87.5%; font-size:9.5px; letter-spacing:.1em;
  text-transform:uppercase; text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:var(--line-2)}
.lnk:hover{color:var(--ink)}
.q .seg button[aria-pressed="true"].p{background:var(--green); color:var(--on-green)}
.q .seg button[aria-pressed="true"].c{background:var(--ink); color:var(--bg)}
.q .seg button[aria-pressed="true"].n{background:var(--ink-3); color:var(--bg)}
@media (max-width:640px){.q{grid-template-columns:1fr}}
.res-empty{color:var(--ink-2); font-size:13px; padding:16px 14px}
.res-empty b{display:block; font-family:var(--f-disp); font-stretch:68%;
  font-weight:800; font-size:3rem; line-height:1; color:var(--ink); margin-top:14px}
.gbar{display:grid; grid-template-columns:44px 1fr 40px; gap:10px;
  align-items:center; padding:3px 0}
.gbar > span:first-child{font-family:var(--f-mono); font-stretch:87.5%; font-size:10px}
.gbar .track{height:10px; background:var(--panel-3)}
.gbar .track i{display:block; height:100%;
  transition:width .5s cubic-bezier(.22,1,.36,1)}
.gbar .num{text-align:right}
.sticky-res{position:sticky; top:104px}
#results .blk:first-child{padding-top:14px}

/* =============================================================== glossaire */
.glos{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  border-top:1px solid var(--line); border-left:1px solid var(--line)}
.glos > div{background:var(--panel); padding:12px 14px; display:grid;
  grid-template-columns:4px 1fr; gap:12px; border-right:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.glos i{display:block; align-self:stretch}
.glos b{font-family:var(--f-mono); font-stretch:87.5%; font-size:11px; letter-spacing:.06em}
.glos span{font-size:12.5px; color:var(--ink-2); display:block; margin-top:2px}
.glos em{font-style:normal; display:block; margin-top:6px}

/* =============================================================== methode == */
.method{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:0; border-top:1px solid var(--line); border-left:1px solid var(--line);
  align-items:start}
.method details{background:var(--panel); padding:0 14px;
  border-right:1px solid var(--line); border-bottom:1px solid var(--line)}
.method details[open]{padding-bottom:14px}
.method details > * + *{margin-top:8px}
.method summary{cursor:pointer; padding:12px 0; font-weight:600; font-size:13.5px;
  list-style:none; display:flex; align-items:center; gap:10px}
.method summary::-webkit-details-marker{display:none}
.method summary::before{content:"+"; font-family:var(--f-mono); color:var(--ink-3);
  width:12px}
.method details[open] summary::before{content:"−"; color:var(--green-t)}
.method p,.method li{font-size:13px; color:var(--ink-2)}
.method ul{margin:0; padding-left:17px}
.method li{margin-bottom:5px}
pre{background:var(--bg); border:1px solid var(--line); padding:11px 13px;
  overflow-x:auto; font-family:var(--f-mono); font-stretch:87.5%; font-size:11px;
  line-height:1.55; color:var(--ink)}

footer{border-top:1px solid var(--line); margin-top:80px; padding-block:22px 40px}
.foot{display:flex; flex-wrap:wrap; gap:8px 24px; font-size:12.5px; color:var(--ink-3)}

/* ======================================================== demonstration == */
.demo canvas{display:block; width:100%}
.demo-head{display:flex; gap:12px; align-items:stretch; flex-wrap:wrap;
  border-bottom:1px solid var(--line)}
.demo-head .btn{margin:10px 14px 10px auto; align-self:center}
.demo-steps{list-style:none; display:grid; margin:0; padding:0; flex:1 1 520px;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); counter-reset:st}
.demo-steps li{padding:10px 14px 12px; counter-increment:st; position:relative;
  border-right:1px solid var(--line); transition:background .25s}
.demo-steps li::after{content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:var(--green); transform:scaleX(0); transform-origin:left;
  transition:transform .4s}
.demo-steps li.on{background:var(--panel-2)}
.demo-steps li.on::after{transform:scaleX(1)}
.demo-steps li b{display:block; font-size:13px; line-height:1.3}
.demo-steps li b::before{content:"Phase " counter(st); display:block;
  font-family:var(--f-mono); font-stretch:87.5%; font-size:9.5px; font-weight:400;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); margin-bottom:5px}
.demo-steps li span{display:block; font-size:12px; color:var(--ink-3);
  margin-top:3px; line-height:1.4}
.cap{font-family:var(--f-mono); font-stretch:87.5%; font-size:10.5px;
  color:var(--ink-2); margin-top:10px; min-height:1.3em}

/* ============================================== bandeau de consentement = */
.cbar{position:fixed; left:0; right:0; bottom:0; z-index:60; background:var(--panel);
  border-top:1px solid var(--ink)}
.cbar-in{display:flex; flex-wrap:wrap; gap:12px 24px; align-items:center;
  justify-content:space-between; padding-block:12px}
.cbar p{font-size:13px; color:var(--ink-2); max-width:78ch}
.cbar b{color:var(--ink)}
.cbtn{display:flex; gap:8px; flex:none}
@media (max-width:560px){.cbtn{width:100%} .cbtn .btn{flex:1; justify-content:center}}

/* ============================================ revelation au defilement === */
/* Seuls les blocs encore sous la ligne de flottaison au chargement recoivent
   .pre : la premiere image de la page est toujours complete. */
[data-rv]{transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1)}
[data-rv].pre{opacity:0; transform:translateY(24px)}
.tiles.in .tile{animation:tilein .6s both; animation-delay:calc(var(--k,0) * 70ms)}
@keyframes tilein{from{opacity:0; transform:translateY(8px)}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important; transition:none!important}
  [data-rv].pre{opacity:1; transform:none}
  .ph::after{display:none}
}