/* ================================================================
     TROIS VOIX, INDEXÉES SUR LE RÔLE — PAS SUR LE THÈME
       --dsp  STRUCTURE : titres, KPI, numéros.
       --txt  RÉCIT     : Archivo en sombre → le serif choisi en clair.
       --ui   DONNÉE    : IBM Plex Mono partout — le pont entre les mondes.
       --kick ÉTIQUETTE : Plex Mono en sombre → Libre Franklin en clair.
     DEUX ÉCHELLES :
       --fs  structure = 1 PARTOUT   → les titres ne changent pas de corps
       --fb  récit                   → compense la x-height du serif
     ⚠ Le WORDMARK n'est pas un titre : il reste en Syne 800 quoi qu'il
     arrive (règle .brand .wm), c'est le logo, pas de la typographie de page.
     ================================================================ */
  /* ---------- SOMBRE — voix MERIDIAN ---------- */
  html[data-theme="dark"]{--s0:#000000;--s1:#0A0A0B;--s2:#141416;--s3:#1D1D20;
    --brd:rgba(255,255,255,.12);--brd2:rgba(255,255,255,.06);
    --ink1:#FFFFFF;--ink2:rgba(255,255,255,.62);--ink3:rgba(255,255,255,.38);--dotA:.13;
    --dsp:'Syne';--txt:'Archivo';--ui:'IBM Plex Mono';--kick:'IBM Plex Mono';
    --dw:800;--fs:1;--fb:1;--grav:0;--accT:var(--acc);--okT:var(--ok);
    --glass:78%;--relief:none;--mapOff:rgba(255,255,255,.07);}
  /* ---------- CLAIR — crème sur crème, voix INSTITUTIONNELLE (D6, tranché Nemar) ---------- */
  html[data-theme="light"]{--s0:#ECE7DB;--s1:#F6F0E2;--s2:#E0D9C7;--s3:#D5CCB6;
    --brd:rgba(74,58,32,.26);--brd2:rgba(74,58,32,.13);
    --ink1:#16130F;--ink2:rgba(22,19,15,.76);--ink3:rgba(22,19,15,.54);--dotA:.30;
    --dsp:'Libre Baskerville';--txt:'Libre Baskerville';--ui:'IBM Plex Mono';--kick:'Libre Franklin';
    --dw:700;--fs:1;--fb:1;--grav:1;--accT:var(--accL);--okT:#007646;
    --glass:88%;--relief:0 1px 0 rgba(255,255,255,.55) inset;--mapOff:rgba(74,58,32,.10);}
  /* ---------- LES QUATRE UNIVERS ---------- */
  html[data-univers="comprendre"]{--acc:#FF3B2E;--accL:#D10D00;--gap:16px;--rad:18px;--pad:26px;--sp:24;}
  html[data-univers="instruire"] {--acc:#2E7DFF;--accL:#005BF0;--gap:11px;--rad:10px;--pad:20px;--sp:20;}
  html[data-univers="explorer"]  {--acc:#00C8E0;--accL:#00707E;--gap:13px;--rad:20px;--pad:24px;--sp:30;}
  html[data-univers="decider"]   {--acc:#FF6A00;--accL:#AD4800;--gap:20px;--rad:16px;--pad:32px;--sp:40;}
  :root{--accT:#FF3B2E;--accQ:color-mix(in srgb,var(--acc) 13%,transparent);
    --ok:#12C57C;--okT:#007646;--warn:#FF6A00;--e:cubic-bezier(.16,1,.3,1);}

  /* ================================================================
     LA MARQUE — rampes de la planche « Logo Montagne v4 », verbatim.
     Cinq tons par teinte : f0 arête · f1 face claire · f2 · f3 face d'ombre
     · pk le pic. Le mark prend la teinte de l'univers actif — la marque
     change de lumière en même temps que le mode, elle ne se contente pas
     de subir un recolorage à plat.
     La rampe cyan (Explorer) n'existait pas dans la planche : construite
     sur les mêmes écarts que les quatre autres.
     ================================================================ */
  html[data-univers="comprendre"]{--f0:#FF8072;--f1:#FF3B2E;--f2:#E42012;--f3:#B31409;--pk:#FFFFFF;}
  html[data-univers="instruire"] {--f0:#77ACFF;--f1:#2E7DFF;--f2:#1E64E6;--f3:#1449B8;--pk:#FFFFFF;}
  html[data-univers="explorer"]  {--f0:#6FE6F5;--f1:#00C8E0;--f2:#00A6BB;--f3:#007D8C;--pk:#FFFFFF;}
  html[data-univers="decider"]   {--f0:#FF9E45;--f1:#FF6A00;--f2:#EA5400;--f3:#B23F00;--pk:#FFFFFF;}

  .mk{display:inline-block;width:30px;height:30px;flex:none;
    filter:drop-shadow(0 2px 6px rgba(0,0,0,.35)) drop-shadow(0 0 9px color-mix(in srgb,var(--f1) 42%,transparent));}
  .mk svg{width:100%;height:100%;overflow:visible;display:block;}
  .mk .f-r{fill:var(--f3);}
  .mk .f-l{fill:var(--f1);}
  .mk .f-spine{fill:var(--f0);}
  .mk .f-pksh{fill:var(--f3);}
  .mk .f-pk{fill:var(--pk);}
  .mk .f-wire,.mk .f-wire2{fill:none;stroke:var(--f0);stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round;opacity:0;}
  /* en clair le halo n'a pas lieu d'être : la lumière devient gravure */
  html[data-theme="light"] .mk{filter:drop-shadow(0 1px 2px rgba(74,58,32,.30));}

  /* ---- LA SIGNATURE — le filaire se trace, les faces montent dessous,
     le pic s'allume. Cycle de 20 s : ~2,8 s de geste, 17 s de calme.
     Rejouée au chargement et à chaque bascule par logo.js. ---- */
  .mk.sig{animation:mkGlow 20s var(--e) infinite;}
  .mk.sig .f-wire {animation:mkW  20s var(--e) infinite;stroke-dasharray:172;}
  .mk.sig .f-wire2{animation:mkW2 20s var(--e) infinite;stroke-dasharray:47;}
  .mk.sig .f-l    {animation:mkL  20s var(--e) infinite;transform-origin:32px 54px;}
  .mk.sig .f-r    {animation:mkR  20s var(--e) infinite;transform-origin:32px 54px;}
  .mk.sig .f-spine{animation:mkS  20s var(--e) infinite;transform-origin:32px 54px;}
  .mk.sig .f-pk,.mk.sig .f-pksh{animation:mkP 20s var(--e) infinite;transform-origin:32px 15px;}
  @keyframes mkW {0%{opacity:.95;stroke-dashoffset:172}5%{opacity:.95;stroke-dashoffset:0}12%,100%{opacity:0;stroke-dashoffset:0}}
  @keyframes mkW2{0%,3%{opacity:0;stroke-dashoffset:47}7%{opacity:.85;stroke-dashoffset:0}12%,100%{opacity:0}}
  @keyframes mkL {0%,4%{opacity:0;transform:translateY(11px)}9%,100%{opacity:1;transform:none}}
  @keyframes mkR {0%,6%{opacity:0;transform:translateY(11px)}11%,100%{opacity:1;transform:none}}
  @keyframes mkS {0%,7%{opacity:0}12%,100%{opacity:1}}
  @keyframes mkP {0%,8%{opacity:0;transform:scale(.25)}11%{opacity:1;transform:scale(1.22)}14%,100%{opacity:1;transform:none}}
  @keyframes mkGlow{0%,8%{filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}
    12%{filter:drop-shadow(0 2px 6px rgba(0,0,0,.35)) drop-shadow(0 0 20px var(--f1))}
    22%,100%{filter:drop-shadow(0 2px 6px rgba(0,0,0,.35)) drop-shadow(0 0 9px color-mix(in srgb,var(--f1) 42%,transparent))}}
  @media(prefers-reduced-motion:reduce){
    .mk.sig,.mk.sig *{animation:none!important;}
    .mk .f-wire,.mk .f-wire2{opacity:0;}}

  /* ---- LE WORDMARK — Syne 800, suffixe coloré, ligne prolongée.
     Traitement de la planche « Wordmark et Contexte », section header. ---- */
  .brand{display:flex;align-items:center;gap:11px;min-width:0;}
  .brand .wm{font-family:'Syne',sans-serif;font-weight:800;letter-spacing:.06em;
    font-size:17px;color:var(--ink1);white-space:nowrap;}
  .brand .wmx{font-family:'Syne',sans-serif;font-weight:700;letter-spacing:.06em;
    font-size:17px;color:var(--accT);white-space:nowrap;}
  .brand .ext{height:2px;width:clamp(0px,5vw,74px);border-radius:2px;flex:none;
    background:linear-gradient(90deg,var(--f1),transparent);}
  @media(max-width:1180px){.brand .ext{display:none;}}
  @media(max-width:760px){.brand .wmx{display:none;}}

  /* ---------- SÉLECTEUR TYPO — PROVISOIRE. D6 est le défaut (tranché).
     D10 et D2 restent accessibles pour comparer. À RETIRER au nettoyage. */
  html[data-theme="light"][data-typo="D10"]{--dsp:'Syne';--txt:'Newsreader';--dw:800;--fb:1.06;}
  html[data-theme="light"][data-typo="D2"] {--dsp:'Newsreader';--txt:'Newsreader';--dw:700;--fb:1.06;}
  .typosel{display:none;}
  html[data-theme="light"] .typosel{display:inline-flex;align-items:center;gap:2px;
    border:1px dashed var(--brd);border-radius:99px;padding:3px 5px 3px 11px;}
  .typosel b{font-family:'IBM Plex Mono',monospace;font-size:8.5px;letter-spacing:.16em;
    text-transform:uppercase;color:var(--ink3);font-weight:500;margin-right:5px;}
  .typosel button{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.06em;
    color:var(--ink2);background:transparent;border:0;border-radius:99px;padding:5px 9px;cursor:pointer;transition:.2s var(--e);}
  .typosel button.on{background:var(--accT);color:#fff;}
  .typosel button:not(.on):hover{color:var(--ink1);background:var(--accQ);}
  *{box-sizing:border-box;margin:0;padding:0;}
  .bg{position:fixed;top:0;left:0;right:0;bottom:0;z-index:-2;background:var(--s0);transition:background .45s var(--e);}
  #dots{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;pointer-events:none;}
  body{font-family:var(--txt),serif;-webkit-font-smoothing:antialiased;line-height:1.55;color:var(--ink1);min-height:100vh;}

  .top{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:16px;padding:12px 26px;flex-wrap:wrap;
    background:color-mix(in srgb,var(--s0) 90%,transparent);border-bottom:1px solid var(--brd);}
  .crumb{font-family:var(--ui),monospace;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);}
  .modes{display:flex;gap:2px;background:var(--s2);border:1px solid var(--brd);border-radius:99px;padding:3px;margin:0 auto;}
  .modes button{font-family:var(--txt),serif;font-size:calc(13px*var(--fb));font-weight:600;color:var(--ink2);
    background:transparent;border:0;border-radius:99px;padding:7px 16px;cursor:pointer;transition:.26s var(--e);}
  .modes button.on{background:var(--accT);color:#fff;}
  .modes button:not(.on):hover{color:var(--ink1);background:var(--accQ);}
  .badge{font-family:var(--ui),monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--okT);
    border:1px solid color-mix(in srgb,var(--okT) 45%,transparent);border-radius:99px;padding:5px 10px;}
  html[data-theme="dark"] .badge{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,transparent);}
  .tg{font-family:var(--ui),monospace;font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink2);
    background:transparent;border:1px solid var(--brd);border-radius:99px;padding:7px 12px;cursor:pointer;transition:.25s;}
  .tg:hover{border-color:var(--accT);color:var(--accT);}
  .kbd{font-family:var(--ui),monospace;font-size:9.5px;color:var(--ink3);border:1px solid var(--brd);border-radius:6px;padding:4px 8px;}

  .shell{display:grid;grid-template-columns:212px 1fr;gap:34px;max-width:1340px;margin:0 auto;padding:30px 26px 140px;}
  .shell.wide{grid-template-columns:1fr;}
  @media(max-width:940px){.shell{grid-template-columns:1fr;gap:18px;}.rail{position:static!important;}}
  .rail{position:sticky;top:78px;align-self:start;display:flex;flex-direction:column;gap:1px;}
  .rail a{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;text-decoration:none;
    font-size:calc(13px*var(--fb));color:var(--ink2);transition:.22s var(--e);border:1px solid transparent;}
  .rail a .i{font-family:var(--ui),monospace;font-size:10px;color:var(--ink3);}
  .rail a .pt{width:6px;height:6px;border-radius:50%;background:var(--ink3);flex:none;transition:.25s;}
  .rail a:hover{color:var(--ink1);background:var(--s1);transform:translateX(2px);}
  .rail a.on{color:var(--ink1);border-color:var(--brd);background:var(--s1);}
  .rail a.on .pt{background:var(--accT);box-shadow:0 0 0 3px var(--accQ);}
  .railcap{font-family:var(--ui),monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);padding:0 11px 10px;}

  .col{display:flex;flex-direction:column;gap:var(--gap);min-width:0;}
  .card{border:1px solid var(--brd);border-radius:var(--rad);overflow:hidden;position:relative;
    background:color-mix(in srgb,var(--s1) var(--glass),transparent);box-shadow:var(--relief);
    transition:border-color .3s var(--e),background .3s var(--e);}
  .card:hover{border-color:color-mix(in srgb,var(--accT) 38%,var(--brd));}
  .pad{padding:var(--pad);}
  @media(max-width:640px){.pad{padding:20px;}}
  .kicker{font-family:var(--ui),monospace;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink3);margin-bottom:14px;}
  .kicker b{color:var(--accT);font-weight:600;}
  h1{font-family:var(--dsp),serif;font-weight:var(--dw);font-size:calc(clamp(27px,3.5vw,40px)*var(--fs));
    line-height:1.06;letter-spacing:-.02em;text-wrap:balance;}
  h2{font-family:var(--dsp),serif;font-weight:var(--dw);font-size:calc(clamp(20px,2.6vw,29px)*var(--fs));
    line-height:1.1;letter-spacing:-.018em;text-wrap:balance;}
  h2 .em{color:var(--accT);}
  .meta{font-family:var(--ui),monospace;font-size:11px;color:var(--ink3);letter-spacing:.02em;margin-top:12px;}
  p.body{color:var(--ink2);font-size:calc(15px*var(--fb));line-height:1.6;max-width:62ch;margin-top:14px;}
  p.body b{color:var(--ink1);font-weight:600;}

  .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;}
  .chip{display:inline-flex;align-items:center;gap:8px;font-size:calc(12.5px*var(--fb));color:var(--ink2);
    border:1px solid var(--brd);border-radius:99px;padding:7px 13px;background:var(--s2);transition:.25s var(--e);}
  .chip:hover{border-color:var(--accT);color:var(--ink1);transform:translateY(-2px);}
  .chip .d{width:6px;height:6px;border-radius:50%;flex:none;}

  .kpis{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--brd);}
  @media(max-width:860px){.kpis{grid-template-columns:repeat(2,1fr);}}
  .kpi{padding:20px 22px;border-right:1px solid var(--brd);position:relative;overflow:hidden;transition:background .3s;}
  .kpi:last-child{border-right:0;}
  .kpi:hover{background:var(--accQ);}
  .kpi .v{font-family:var(--dsp),serif;font-weight:var(--dw);font-size:calc(clamp(25px,2.9vw,32px)*var(--fs));
    letter-spacing:-.03em;line-height:1;position:relative;z-index:2;}
  .kpi.hero .v{color:var(--accT);}
  .kpi .k{font-size:calc(12.5px*var(--fb));color:var(--ink2);margin-top:7px;position:relative;z-index:2;}
  .kpi .s{font-family:var(--ui),monospace;font-size:10px;color:var(--ink3);margin-top:3px;position:relative;z-index:2;}
  .kpi .pin{position:absolute;top:14px;right:14px;font-family:var(--ui),monospace;font-size:9px;letter-spacing:.1em;
    text-transform:uppercase;color:var(--ink3);opacity:0;transition:.2s;cursor:pointer;z-index:3;}
  .kpi:hover .pin{opacity:1;} .kpi .pin:hover{color:var(--accT);}
  .kpi canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;opacity:.55;}

  .split{display:grid;grid-template-columns:1fr 300px;}
  @media(max-width:940px){.split{grid-template-columns:1fr;}}
  .aside{border-left:1px solid var(--brd);padding:var(--pad);background:var(--s2);}
  @media(max-width:940px){.aside{border-left:0;border-top:1px solid var(--brd);}}
  .aside .t{font-family:var(--ui),monospace;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--accT);margin-bottom:10px;}
  .aside p{font-size:calc(13px*var(--fb));color:var(--ink2);line-height:1.6;}

  .bars{margin-top:24px;display:flex;flex-direction:column;gap:15px;}
  .brow{display:grid;grid-template-columns:1fr 46px;gap:14px;align-items:center;}
  .btrack{height:15px;border:1px solid var(--brd);border-radius:4px;overflow:hidden;background:var(--s2);}
  .btrack svg{display:block;width:100%;height:100%;}
  .blab{font-size:calc(13px*var(--fb));color:var(--ink2);margin-bottom:6px;} .blab b{color:var(--ink1);font-weight:600;}
  .bval{font-family:var(--ui),monospace;font-size:12px;text-align:right;color:var(--ink1);}

  .scene{position:relative;width:100%;overflow:hidden;border-top:1px solid var(--brd);background:var(--s0);}
  .scene svg,.scene canvas{display:block;width:100%;}
  .sfoot{font-family:var(--ui),monospace;font-size:9.5px;color:var(--ink3);padding:10px 18px;border-top:1px solid var(--brd);
    letter-spacing:.04em;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;}

  /* ---------- CARTE DE FRANCE ---------- */
  .carte{display:grid;grid-template-columns:1fr 320px;border-top:1px solid var(--brd);}
  @media(max-width:940px){.carte{grid-template-columns:1fr;}}
  .mapwrap{position:relative;background:var(--s0);padding:12px;}
  .mapwrap svg{display:block;width:100%;height:auto;overflow:visible;}
  .dep{fill:var(--mapOff);stroke:var(--s0);stroke-width:.6;cursor:pointer;
    transition:fill .25s var(--e),opacity .5s var(--e);opacity:0;}
  .dep.vu{opacity:1;}
  .dep.actif{cursor:pointer;}
  .dep:hover{fill:var(--accT)!important;}
  .dep.sel{stroke:var(--ink1);stroke-width:1.4;}
  .maplg{position:absolute;left:20px;bottom:14px;display:flex;gap:12px;align-items:center;
    font-family:var(--ui),monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);}
  .maplg i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;vertical-align:-1px;}
  .fdep{border-left:1px solid var(--brd);padding:22px;background:var(--s2);display:flex;flex-direction:column;gap:14px;}
  @media(max-width:940px){.fdep{border-left:0;border-top:1px solid var(--brd);}}
  .fdep .num{font-family:var(--dsp),serif;font-weight:var(--dw);font-size:calc(40px*var(--fs));line-height:.9;
    letter-spacing:-.04em;color:var(--accT);}
  .fdep .nm{font-family:var(--dsp),serif;font-weight:var(--dw);font-size:calc(18px*var(--fs));letter-spacing:-.01em;margin-top:-4px;}
  .fdep .st{font-family:var(--ui),monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase;
    border:1px solid var(--brd);border-radius:99px;padding:4px 9px;align-self:flex-start;color:var(--ink3);}
  .fdep .st.a{color:var(--accT);border-color:color-mix(in srgb,var(--accT) 50%,transparent);}
  .fdep .st.s{color:var(--okT);border-color:color-mix(in srgb,var(--okT) 50%,transparent);}
  html[data-theme="dark"] .fdep .st.s{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 50%,transparent);}
  .fdep .lg{display:flex;flex-direction:column;gap:9px;margin-top:2px;}
  .fdep .lg div{display:flex;justify-content:space-between;gap:10px;font-size:calc(12.5px*var(--fb));
    color:var(--ink2);border-bottom:1px solid var(--brd2);padding-bottom:8px;}
  .fdep .lg b{color:var(--ink1);font-family:var(--ui),monospace;font-size:12px;font-weight:600;}
  .fdep .vide{font-size:calc(13px*var(--fb));color:var(--ink3);line-height:1.6;}
  .fdep .barre{height:5px;background:var(--s3);border-radius:3px;overflow:hidden;}
  .fdep .barre i{display:block;height:100%;background:var(--accT);border-radius:3px;transition:width .6s var(--e);}

  .adv{display:flex;flex-direction:column;gap:11px;margin-top:22px;}
  .arow{display:grid;grid-template-columns:150px 1fr 62px;gap:14px;align-items:center;font-size:calc(13px*var(--fb));}
  @media(max-width:640px){.arow{grid-template-columns:1fr;gap:5px;}}
  .arow .tr{height:9px;background:var(--s2);border:1px solid var(--brd2);border-radius:3px;overflow:hidden;}
  .arow .fl{height:100%;background:var(--accT);border-radius:2px;transition:width 1.1s var(--e);}
  .arow .vv{font-family:var(--ui),monospace;font-size:11.5px;color:var(--ink2);text-align:right;}

  .win{display:flex;flex-direction:column;}
  .wrow{display:grid;grid-template-columns:120px 1fr 96px;gap:16px;align-items:center;padding:16px 0;
    border-bottom:1px solid var(--brd2);transition:.25s;}
  .wrow:last-child{border-bottom:0;} .wrow:hover{padding-left:8px;}
  @media(max-width:700px){.wrow{grid-template-columns:1fr;gap:6px;}}
  .wdate{font-family:var(--ui),monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--ink3);display:flex;align-items:center;gap:8px;}
  .wdate .p{width:7px;height:7px;border-radius:50%;background:var(--accT);flex:none;position:relative;}
  .wdate .p:after{content:'';position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--accT);opacity:.5;animation:ring 2.6s ease-out infinite;}
  .wrow.echu .wdate .p{background:var(--warn);} .wrow.echu .wdate .p:after{border-color:var(--warn);}
  @keyframes ring{0%{transform:scale(.6);opacity:.8}100%{transform:scale(2.6);opacity:0}}
  .wtxt{font-size:calc(13.5px*var(--fb));color:var(--ink2);}
  .wval{font-family:var(--dsp),serif;font-weight:var(--dw);font-size:calc(16px*var(--fs));text-align:right;letter-spacing:-.02em;}

  .cta{display:inline-flex;align-items:center;gap:9px;margin-top:22px;font-weight:700;font-size:calc(13px*var(--fb));
    color:var(--accT);border:1px solid color-mix(in srgb,var(--accT) 45%,transparent);border-radius:10px;padding:10px 16px;
    background:var(--accQ);cursor:pointer;transition:.25s var(--e);}
  .cta:hover{border-color:var(--accT);transform:translateY(-2px);}
  .note{font-family:var(--ui),monospace;font-size:10px;color:var(--ink3);margin-top:14px;line-height:1.7;}

  .dhead{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--ui),monospace;font-size:9.5px;
    letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);border-bottom:1px solid var(--brd);padding-bottom:10px;margin-bottom:18px;}
  table{width:100%;border-collapse:collapse;font-size:12px;font-family:var(--ui),monospace;}
  th{text-align:left;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);font-weight:500;
    padding:9px 10px;border-bottom:1px solid var(--brd);}
  td{padding:9px 10px;border-bottom:1px solid var(--brd2);color:var(--ink2);}
  tr:hover td{background:var(--accQ);color:var(--ink1);}
  td.num{text-align:right;color:var(--ink1);}
  .tagS{font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--brd);border-radius:4px;padding:2px 6px;color:var(--ink3);}
  .tagS.net{color:var(--okT);border-color:color-mix(in srgb,var(--okT) 40%,transparent);}
  html[data-theme="dark"] .tagS.net{color:var(--ok);}
  .tagS.ren{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 40%,transparent);}
  .formula{border-left:2px solid var(--accT);padding:14px 18px;margin-top:16px;font-family:var(--ui),monospace;
    font-size:11.5px;line-height:1.9;color:var(--ink2);background:var(--s2);}
  .formula b{color:var(--accT);font-weight:600;} .formula i{font-style:normal;color:var(--ink3);}

  .atlas{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);}
  @media(max-width:940px){.atlas{grid-template-columns:1fr;}}
  .filters{display:flex;gap:7px;flex-wrap:wrap;padding:14px var(--pad);border-bottom:1px solid var(--brd);}
  .flt{font-family:var(--ui),monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);
    border:1px solid var(--brd);border-radius:99px;padding:6px 12px;cursor:pointer;transition:.22s;}
  .flt:hover,.flt.on{border-color:var(--accT);color:var(--accT);background:var(--accQ);}

  .verdict{display:grid;grid-template-columns:auto 1fr auto;gap:26px;align-items:center;}
  @media(max-width:760px){.verdict{grid-template-columns:1fr;gap:14px;}}
  .score{font-family:var(--dsp),serif;font-weight:var(--dw);font-size:calc(clamp(52px,8vw,82px)*var(--fs));
    line-height:.9;letter-spacing:-.04em;color:var(--accT);}
  .scoreL{font-family:var(--ui),monospace;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink3);margin-top:8px;}
  .gauge{display:flex;gap:4px;margin-top:14px;}
  .gauge i{height:5px;flex:1;background:var(--brd);border-radius:2px;}
  .gauge i.f{background:var(--accT);}
  .goRow{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;padding:20px 0;border-bottom:1px solid var(--brd2);}
  .goRow:last-child{border-bottom:0;}
  .goTag{font-family:var(--ui),monospace;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;border-radius:99px;padding:6px 13px;white-space:nowrap;}
  .goTag.go{color:var(--okT);border:1px solid color-mix(in srgb,var(--okT) 45%,transparent);background:color-mix(in srgb,var(--okT) 9%,transparent);}
  html[data-theme="dark"] .goTag.go{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,transparent);}
  .goTag.wait{color:var(--warn);border:1px solid color-mix(in srgb,var(--warn) 45%,transparent);background:color-mix(in srgb,var(--warn) 10%,transparent);}
  .goTag.no{color:var(--ink3);border:1px solid var(--brd);}

  .view{display:none;} .view.on{display:block;animation:vin .4s var(--e);}
  @keyframes vin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

  .build{margin-top:26px;border:1px dashed var(--brd);border-radius:18px;}
  .lib{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:11px;margin-top:18px;}
  .lib .it{border:1px solid var(--brd);border-radius:12px;padding:14px;background:var(--s1);}
  .lib .it b{font-family:var(--ui),monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--accT);display:block;margin-bottom:6px;}
  .lib .it span{font-size:calc(12.5px*var(--fb));color:var(--ink2);line-height:1.55;}
  .lib .it em{font-style:normal;font-family:var(--ui),monospace;font-size:9.5px;color:var(--ink3);display:block;margin-top:7px;}
  pre{font-family:var(--ui),monospace;font-size:11px;line-height:1.75;color:var(--ink2);background:var(--s2);
    border:1px solid var(--brd);border-radius:12px;padding:18px;overflow-x:auto;margin-top:16px;}
  pre i{font-style:normal;color:var(--ink3);} pre b{color:var(--accT);font-weight:600;}
  .ol{counter-reset:o;display:flex;flex-direction:column;gap:9px;margin-top:16px;}
  .ol li{list-style:none;counter-increment:o;display:grid;grid-template-columns:26px 1fr;gap:11px;font-size:calc(13.5px*var(--fb));color:var(--ink2);}
  .ol li:before{content:counter(o,decimal-leading-zero);font-family:var(--ui),monospace;font-size:10px;color:var(--accT);padding-top:3px;}
  .ol li b{color:var(--ink1);font-weight:600;}
  footer{max-width:1340px;margin:0 auto;padding:0 26px 60px;font-family:var(--ui),monospace;font-size:10px;color:var(--ink3);line-height:1.9;}

  /* ================================================================
     TRAITEMENT ÉDITION — en CLAIR seulement.
     Un journal, ce n'est pas une police : c'est une mise en page.
     Filet double · lettrine · petites capitales · colonne de marge.
     ================================================================ */
  html[data-theme="light"] .kicker{font-family:var(--kick),sans-serif;font-weight:700;
    letter-spacing:.24em;color:var(--ink1);padding-bottom:7px;margin-bottom:20px;
    position:relative;border-bottom:2.4px solid currentColor;}
  html[data-theme="light"] .kicker:after{content:'';position:absolute;left:0;right:0;bottom:-4px;
    border-bottom:.8px solid currentColor;opacity:.5;}
  html[data-theme="light"] .kicker b{color:var(--accT);}
  html[data-theme="light"] .dhead{font-family:var(--kick),sans-serif;font-weight:600;letter-spacing:.18em;}
  html[data-theme="light"] .aside .t{font-family:var(--kick),sans-serif;font-weight:700;letter-spacing:.2em;}
  /* la lettrine — premier paragraphe des six chapitres du récit, nulle part ailleurs */
  html[data-theme="light"] section.card[id^="c"] .pad > p.body:first-of-type::first-letter{
    float:left;font-family:var(--dsp),serif;font-weight:var(--dw);font-size:3.1em;line-height:.76;
    padding:.04em .085em 0 0;color:var(--accT);}
  /* l'encadré devient la colonne de marge du journal : un filet, pas un panneau */
  html[data-theme="light"] .aside{background:transparent;border-left:2.4px solid var(--ink1);}

  /* ================================================================
     LES PUITS — l'instrument reste noir dans le papier.
     Doctrine : le clair est le PAPIER, le sombre est l'INSTRUMENT.
     Une carte, une projection : ce sont des machines. En mode clair
     elles ne pâlissent pas — elles s'encastrent, bord à bord, comme
     une planche imprimée en pleine page. Le fond traverse l'écran ;
     le contenu, lui, reste dans la colonne de lecture.
     ================================================================ */
  html[data-theme="light"] [data-puits]{
    --s0:#000000;--s1:#0A0A0B;--s2:#141416;--s3:#1D1D20;
    --brd:rgba(255,255,255,.12);--brd2:rgba(255,255,255,.06);
    --ink1:#FFFFFF;--ink2:rgba(255,255,255,.62);--ink3:rgba(255,255,255,.38);
    --accT:var(--acc);--okT:var(--ok);--mapOff:rgba(255,255,255,.07);
    --relief:none;--glass:100%;--grav:0;
    background:#000;color:#FFFFFF;border:0;border-radius:0;
    /* Bord à bord. Deux corrections mesurées à l'écran :
       ① on déborde de 40px de plus de chaque côté — 100vw inclut la barre de
         défilement, ce surplus est avalé par overflow-x:clip et garantit le
         bord à bord quelle que soit la largeur de cette barre ;
       ② le décalage du rail (212 + 34) / 2 = 123px, sinon le puits est centré
         sur la fenêtre alors que la colonne, elle, est décalée à droite. */
    margin-left:calc(-1 * ((100vw - 100%) / 2) - 163px);
    margin-right:calc(-1 * ((100vw - 100%) / 2) + 83px);
    /* Le FOND traverse l'écran, le CONTENU reste aligné sur la colonne de
       lecture — au pixel près sur les chapitres voisins, sinon la rupture
       se lit comme un défaut au lieu d'une intention.
       Le padding est l'EXACT OPPOSÉ de la marge : attention, un pourcentage
       de padding se mesure sur le bloc conteneur (.col), jamais sur l'élément.
       Vérifié à l'écran : contenu 315→1357, identique au chapitre 03. */
    padding:20px max(0px,calc(((100vw - 100%) / 2) - 83px)) 20px max(0px,calc(((100vw - 100%) / 2) + 163px));}
  html[data-theme="light"] [data-puits]:hover{border:0;}
  html[data-theme="light"] [data-puits] .kicker{color:#FFFFFF;}
  html[data-theme="light"] [data-puits] .kicker:after{opacity:.35;}
  html[data-theme="light"] [data-puits] .aside{border-left-color:rgba(255,255,255,.5);}
  /* sous 940px le rail passe au-dessus : plus de décalage de colonne à compenser */
  @media(max-width:940px){
    html[data-theme="light"] [data-puits]{
      margin-left:calc(-1 * ((100vw - 100%) / 2) - 40px);
      margin-right:calc(-1 * ((100vw - 100%) / 2) - 40px);
      padding-left:max(0px,calc(((100vw - 100%) / 2) + 40px));
      padding-right:max(0px,calc(((100vw - 100%) / 2) + 40px));}}
  /* Le débord ne doit jamais créer de défilement horizontal.
     clip (et non hidden) ne crée pas de conteneur de défilement : le rail
     reste sticky — vérifié à l'écran. Il faut les DEUX : l'overflow de body
     est propagé au viewport, body cesse alors de clipper lui-même. */
  html{overflow-x:clip;}
  body{overflow-x:clip;}