/* Garde-fou : masque le message .local-warn (visible uniquement en ouverture
   file:// sans CSS — voir boot.css ; ici pour les pages mode doc sans boot.css). */
.local-warn{display:none}

:root{
  --acc:#3AAEFF; --acc2:#FF7D33;
  --bg-0:#0B0E11; --bg-1:#11151A; --bg-2:#171C23;
  --line-0:#232A33; --line-1:#3A424D;
  --text-0:#E8E6E1; --text-1:#9AA3AD; --text-2:#8A93A0;
  /* Tokens thématisés (ADR-0024) — valeurs NUIT = les anciens littéraux, à l'identique. */
  --txt-shadow:0 2px 30px rgba(0,0,0,.55);
  --txt-shadow-strong:0 1px 2px rgba(0,0,0,.85),0 2px 22px rgba(0,0,0,.6);
  --txt-shadow-soft:0 2px 30px rgba(0,0,0,.6);
  --text-hi:#fff;
  --shade:#000;
  --drawer-shadow:-26px 0 64px rgba(0,0,0,.5);
  --mono: ui-monospace,"Cascadia Mono","JetBrains Mono",Consolas,monospace;
  --sans: system-ui,"Segoe UI",Roboto,sans-serif;
  --display:"Archivo","Arial Black","Helvetica Neue",system-ui,sans-serif;
  --radius:2px; --border:1px; --gap:8px;
  --edge:clamp(20px,4.6vw,56px);
  --ease:cubic-bezier(.2,.8,.2,1);
  --t-fast:140ms; --t-med:240ms; --t-slow:400ms;
  --head-h:74px;
}
/* ── Thème JOUR « datasheet papier » (ADR-0024) : la fiche technique imprimée de
   l'instrument. Papier ivoire, encre graphite, accents ré-encrés (AA mesuré :
   text-0 14,9:1 · text-1 7,6:1 · text-2 5,2:1 · acc 4,9:1 · acc2 5,2:1 sur bg-0).
   NUIT reste le défaut pour tous (prefers-color-scheme ignoré). ── */
html[data-theme=light]{
  --acc:#166BB8; --acc2:#A84718;
  --bg-0:#F4F1EA; --bg-1:#ECE7DB; --bg-2:#E3DDCE;
  --line-0:#CFC7B5; --line-1:#A9A090;
  --text-0:#1A1E24; --text-1:#4A5058; --text-2:#5E6570;
  --txt-shadow:none; --txt-shadow-strong:none; --txt-shadow-soft:none;
  --text-hi:#0B0E11;
  --shade:#B9B0A0;
  --drawer-shadow:-26px 0 64px rgba(74,64,44,.28);
}
html{scroll-behavior:smooth}
html,body{height:auto;overflow-x:hidden;overflow-y:auto}
body{margin:0;background:var(--bg-0);color:var(--text-0);
  font-family:var(--sans);line-height:1.65;-webkit-font-smoothing:antialiased;font-feature-settings:"kern" 1}
*{box-sizing:border-box}
::selection{background:color-mix(in srgb,var(--acc) 32%,transparent);color:var(--text-0)}

/* ---- WebGL : fond fixe persistant ---- */
/* #gl OPAQUE et stable : la 3D est peinte DERRIÈRE le loader (z-index 200, fond opaque). À la
   révélation on ne fond QUE le loader sur une scène déjà complète (jamais de site "qui se matérialise").
   Corrige aussi le bug reduced-motion (animation:none sur opacity:0 laissait la 3D invisible à jamais). */
#gl{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0;cursor:crosshair;
  touch-action:pan-y;opacity:1}

.skip{position:fixed;left:12px;top:-48px;z-index:60;background:var(--bg-2);
  border:1px solid var(--acc);color:var(--text-0);font-family:var(--mono);
  font-size:12px;padding:8px 12px;border-radius:var(--radius);transition:top var(--t-fast)}
.skip:focus{top:12px}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:1px}

/* ================= HEADER (fixe) ================= */
.mast{position:fixed;inset:0 0 auto 0;z-index:40;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--bg-0) 92%,transparent) 0,
    color-mix(in srgb,var(--bg-0) 74%,transparent) 82%,
    transparent 100%);
  border-bottom:1px solid color-mix(in srgb,var(--line-0) 70%,transparent)}
.strip{display:flex;justify-content:space-between;align-items:center;gap:16px;
  height:26px;padding:0 var(--edge);
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-2);font-variant-numeric:tabular-nums;
  border-bottom:1px solid color-mix(in srgb,var(--line-0) 55%,transparent);
  white-space:nowrap;overflow:hidden}
.strip-l,.strip-r{display:flex;align-items:center;gap:9px;min-width:0}
.strip-l{overflow:hidden;text-overflow:ellipsis}
.strip .sep{color:var(--line-1)}
#status{color:var(--acc)}
.led{width:6px;height:6px;border-radius:50%;background:var(--acc2);
  box-shadow:0 0 8px var(--acc2);animation:beat 1.9s infinite ease-in-out;flex:0 0 auto}
@keyframes beat{0%,100%{opacity:.4;transform:scale(.85)}50%{opacity:1;transform:scale(1.12)}}
.bar{display:flex;justify-content:space-between;align-items:center;gap:16px;height:48px;padding:0 var(--edge)}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;flex:0 0 auto}
.mark{width:20px;height:20px;stroke:var(--text-1);stroke-width:1;fill:none;stroke-linecap:round;overflow:visible;transition:stroke var(--t-med)}
.mark-core{fill:var(--text-1);stroke:none;transition:fill var(--t-med)}
.mark-tick{stroke:var(--acc)}
.brand:hover .mark{stroke:var(--text-0)} .brand:hover .mark-core{fill:var(--acc)}
.wm{font-family:var(--mono);font-size:15px;letter-spacing:.02em;color:var(--text-0);font-weight:500}
.nav{display:flex;align-items:stretch;gap:2px;flex:0 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.tab{position:relative;background:none;border:0;cursor:pointer;text-decoration:none;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;
  color:var(--text-1);padding:6px 11px 8px;line-height:1;white-space:nowrap;
  display:inline-flex;align-items:baseline;gap:7px;transition:color var(--t-med) var(--ease)}
.tab .ti{font-size:10.5px;color:var(--text-2);transition:color var(--t-med)}
.tab::after{content:"";position:absolute;left:11px;right:11px;bottom:2px;height:1px;
  background:var(--acc);transform:scaleX(0);transform-origin:left;opacity:0;
  transition:transform var(--t-med) var(--ease),opacity var(--t-med)}
.tab:hover{color:var(--text-0)} .tab:hover .ti{color:var(--text-1)}
.tab.is-active{color:var(--text-0)} .tab.is-active .ti{color:var(--acc)}
.tab.is-active::after{transform:none;opacity:1;box-shadow:0 0 7px color-mix(in srgb,var(--acc) 65%,transparent)}

/* ================= STAGE / DECKS ================= */
.stage{position:relative;z-index:3;pointer-events:none}
.mast,.brand,.tab,.cue,.folios,.serigraph,.stage a,.stage button{pointer-events:auto}
.heroes{position:relative;min-height:100svh}
.hero{position:absolute;inset:0;display:flex;align-items:flex-end;
  padding:0 var(--edge) clamp(96px,15vh,150px);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity var(--t-slow) var(--ease),transform 620ms var(--ease),visibility 0s var(--t-slow)}
.hero.is-active{opacity:1;visibility:visible;transform:none;
  transition:opacity var(--t-slow) var(--ease),transform 620ms var(--ease),visibility 0s 0s}
.hero-in{max-width:min(640px,86vw)}
.hero-in::before{content:"";position:absolute;left:0;right:0;bottom:0;height:52vh;z-index:-1;
  pointer-events:none;background:linear-gradient(0deg,color-mix(in srgb,var(--bg-0) 62%,transparent),transparent)}
/* Hero épuré (TOUS écrans, choix humain 2026-07-10) : l'image seule — le titre bas-gauche
   est retiré (la catégorie vit dans le cue en bas). Les textes restent dans le DOM (SEO). */
.hero-in .kick,.hero-in .lede,.hero-in .sheet,.hero-in .cmd,.hero-in .desig{display:none}
.kick{font-family:var(--mono);font-size:12px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--text-2);display:flex;align-items:center;gap:11px;margin:0 0 clamp(16px,2.4vh,26px)}
.kick::before{content:"";width:26px;height:1px;background:var(--acc);flex:0 0 auto}
.kick .ki{color:var(--acc)}
.desig{font-family:var(--display);font-weight:900;
  font-size:clamp(2.35rem,6vw,4.4rem);line-height:.96;letter-spacing:-.025em;
  color:var(--text-0);text-transform:lowercase;margin:0 0 clamp(14px,2vh,22px);
  text-shadow:var(--txt-shadow)}
.lede{font-size:clamp(1rem,1.5vw,1.15rem);color:var(--text-1);max-width:44ch;margin:0 0 clamp(22px,3vh,34px)}
.sheet{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  background:color-mix(in srgb,var(--line-0) 60%,transparent);
  border:1px solid color-mix(in srgb,var(--line-0) 60%,transparent);
  max-width:520px;margin:0 0 clamp(24px,3.2vh,34px)}
.sheet>div{background:color-mix(in srgb,var(--bg-1) 62%,transparent);padding:11px 14px}
.sheet dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-2);margin-bottom:4px}
.sheet dd{margin:0;font-family:var(--mono);font-size:13px;color:var(--text-0)}
.cmd{position:relative;display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-0);text-decoration:none;padding:11px 18px 11px 32px;overflow:hidden;
  border:1px solid var(--line-1);background:color-mix(in srgb,var(--bg-2) 55%,transparent);
  clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,0 100%);
  transition:border-color var(--t-med),color var(--t-med),background var(--t-med)}
.cmd::before{content:"";position:absolute;left:14px;top:50%;width:6px;height:6px;margin-top:-3px;
  border-radius:50%;background:var(--line-1);transition:background var(--t-med),box-shadow var(--t-med)}
.cmd::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--acc) 22%,transparent),transparent);
  transform:translateX(-120%);transition:transform 520ms var(--ease)}
.cmd:hover{border-color:var(--acc);color:var(--text-hi)}
.cmd:hover::before{background:var(--acc);box-shadow:0 0 9px var(--acc)}
.cmd:hover::after{transform:translateX(120%)}
/* ---- Panneau SPEC du hero (décision humaine 2026-07-13) : la table « SPEC — domaine »
   quitte le bas du dossier (desktop JS) et vit en HUD sous le logo, à gauche — elle suit
   le canal actif (elle est DANS chaque .hero, la bascule est gratuite). Mobile ≤768px et
   no-JS : la table du dossier reprend sa place d'origine.
   FORME v3 (retour humain 2026-07-13 : « pas une tache, ça doit se fondre ») = ANNOTATION
   HUD : zéro fond, zéro cadre, zéro cases — typographie pure posée sur la scène (comme le
   strip), UN filet accent sous l'en-tête, colonnes alignées (subgrid), text-shadow pour la
   lisibilité sur le champ d'étoiles. Lignes révélées en cascade au changement de canal. */
.hero-spec{position:absolute;left:var(--edge);top:34vh;transform:translateY(-50%);
  width:min(380px,27vw)}
/* En-tête : badge SPEC · domaine · index de canal (rappel des onglets 01-04). */
.hero-spec__h{display:flex;align-items:center;gap:10px;margin:0 0 5px;padding:0 0 11px;
  border-bottom:1px solid color-mix(in srgb,var(--acc) 32%,transparent);
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-0);text-shadow:var(--txt-shadow)}
.hero-spec__i{flex:0 0 auto;color:var(--acc);
  border:1px solid color-mix(in srgb,var(--acc) 55%,transparent);
  padding:2px 7px;font-size:10.5px;letter-spacing:.14em}
.hero-spec__d{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hero-spec__n{margin-left:auto;flex:0 0 auto;color:var(--text-2);letter-spacing:.1em;
  font-size:11px}
/* Relevé : colonne libellés | colonne valeurs, SANS traits. Libellés jamais coupés
   (nowrap), colonne au plus long libellé, alignée sur TOUTES les lignes (subgrid ;
   repli 104px sans subgrid). Baselines calées (dt 11px / dd 13.5px -> +2px de padding). */
.hero-spec__t{margin:0;display:grid;grid-template-columns:max-content minmax(0,1fr)}
.hero-spec__t>div{grid-column:1/-1;display:grid;
  grid-template-columns:104px minmax(0,1fr);grid-template-columns:subgrid}
.hero-spec__t dt{padding:13px 18px 0 0;align-self:start;white-space:nowrap;
  font-family:var(--mono);font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--text-2);text-shadow:var(--txt-shadow)}
.hero-spec__t dd{margin:0;padding:11px 0 0;align-self:start;
  font-family:var(--mono);font-size:13.5px;line-height:1.4;color:var(--text-0);
  text-shadow:var(--txt-shadow-strong)}
/* Révélation en cascade des lignes quand le canal devient actif (l'instrument « écrit »
   la fiche). Neutralisée en ?shot (captures déterministes) et reduced-motion. */
.hero .hero-spec__t>div{opacity:0;transform:translateY(5px)}
.hero.is-active .hero-spec__t>div{opacity:1;transform:none;
  transition:opacity 300ms var(--ease),transform 300ms var(--ease)}
.hero.is-active .hero-spec__t>div:nth-child(1){transition-delay:40ms}
.hero.is-active .hero-spec__t>div:nth-child(2){transition-delay:85ms}
.hero.is-active .hero-spec__t>div:nth-child(3){transition-delay:130ms}
.hero.is-active .hero-spec__t>div:nth-child(4){transition-delay:175ms}
.hero.is-active .hero-spec__t>div:nth-child(5){transition-delay:220ms}
.hero.is-active .hero-spec__t>div:nth-child(6){transition-delay:265ms}
html.shot .hero .hero-spec__t>div{opacity:1;transform:none;transition:none}
@media (prefers-reduced-motion:reduce){
  .hero .hero-spec__t>div{opacity:1;transform:none;transition:none}
}
/* Thème jour : encre sur papier — pas d'ombres portées, filet d'en-tête encre bleutée. */
html[data-theme=light] .hero-spec__h,
html[data-theme=light] .hero-spec__t dt,
html[data-theme=light] .hero-spec__t dd{text-shadow:none}
html.no-js .hero-spec{display:none}
@media (min-width:769px){ html:not(.no-js) .folio .specs{display:none} }
/* 769-1200px (petits desktops, fenêtres réduites, échelle Windows 125-175 %) : variante
   COMPACTE — visible partout sur desktop (retour humain), resserrée pour flotter
   au-dessus de la ligne d'eau sans toucher l'objet 3D. */
@media (max-width:1200px){
  .hero-spec{width:min(284px,26vw)}
  .hero-spec__h{padding:0 0 8px;font-size:10.5px;gap:8px;margin-bottom:3px}
  .hero-spec__i{font-size:9.5px;padding:1px 6px}
  .hero-spec__n{font-size:10px}
  .hero-spec__t>div{grid-template-columns:84px minmax(0,1fr);grid-template-columns:subgrid}
  .hero-spec__t dt{padding:10px 14px 0 0;font-size:10px}
  .hero-spec__t dd{padding:8px 0 0;font-size:12px;line-height:1.4}
}
@media (max-width:768px){ .hero-spec{display:none} }

.cue{position:absolute;left:50%;bottom:clamp(18px,3.4vh,30px);transform:translateX(-50%);
  display:inline-flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none;
  padding:11px 22px 9px;overflow:hidden;
  border:1px solid var(--line-1);
  background:color-mix(in srgb,var(--bg-2) 66%,transparent);
  clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,0 100%);
  font-family:var(--mono);font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--text-1);
  transition:color var(--t-med),border-color var(--t-med),background var(--t-med)}
.cue::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--acc) 20%,transparent),transparent);
  transform:translateX(-120%);transition:transform 520ms var(--ease)}
.cue:hover{color:var(--text-0);border-color:var(--acc);
  background:color-mix(in srgb,var(--bg-2) 84%,transparent)}
.cue:hover::after{transform:translateX(120%)}
.cue:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.cue-lbl{position:relative;z-index:1;line-height:1}
.cue-ar{position:relative;z-index:1;display:block;width:16px;height:20px;overflow:hidden}
.cue-chev{display:block;width:16px;height:20px;fill:none;
  stroke:var(--acc);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  animation:cuefall 1.9s var(--ease) infinite}
@keyframes cuefall{0%{transform:translateY(-45%);opacity:0}25%{opacity:1}72%{opacity:1}100%{transform:translateY(45%);opacity:0}}

/* -------- FOLIOS -------- */
.folios{position:relative;padding:clamp(64px,10vh,120px) var(--edge) 0;
  background:linear-gradient(180deg,transparent 0,
    color-mix(in srgb,var(--bg-0) 78%,transparent) 12vh,
    color-mix(in srgb,var(--bg-0) 90%,transparent) 40vh,var(--bg-0) 78vh)}
.folios::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    repeating-linear-gradient(0deg,transparent 0 31px,color-mix(in srgb,var(--line-0) 40%,transparent) 31px 32px),
    repeating-linear-gradient(90deg,transparent 0 31px,color-mix(in srgb,var(--line-0) 40%,transparent) 31px 32px);
  opacity:.35;mask-image:linear-gradient(180deg,transparent,#000 22vh)}
.folio{display:none;position:relative;z-index:1;max-width:1180px;margin:0 auto;padding-bottom:clamp(70px,10vh,120px)}
.folio.is-active{display:block}
.folio-head{max-width:60ch;margin:0 0 clamp(34px,5vh,56px)}
.sec-idx{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-2);display:flex;align-items:center;gap:12px;margin:0 0 14px}
.sec-idx::after{content:"";flex:1;height:1px;max-width:120px;background:color-mix(in srgb,var(--line-0) 80%,transparent)}
.folio-head h2{font-family:var(--sans);font-weight:600;font-size:clamp(1.55rem,3vw,2.2rem);
  line-height:1.1;letter-spacing:-.01em;color:var(--text-0);margin:0 0 12px}
.sec-lede{color:var(--text-1);font-size:1rem;margin:0;max-width:56ch}
.fiches{display:grid;gap:16px;grid-template-columns:repeat(3,minmax(0,1fr));margin:0 0 clamp(40px,6vh,64px)}
.contact-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:820px}
.fiche{position:relative;background:color-mix(in srgb,var(--bg-2) 88%,transparent);
  border:1px solid var(--line-0);padding:16px 18px 20px;
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%);
  transition:border-color var(--t-med) var(--ease),transform var(--t-med) var(--ease),background var(--t-med)}
.fiche::before{content:"";position:absolute;left:0;top:0;width:22px;height:1px;background:var(--acc);
  transform:scaleX(0);transform-origin:left;transition:transform var(--t-med) var(--ease)}
.fiche:hover{border-color:var(--line-1);transform:translateY(-3px);background:color-mix(in srgb,var(--bg-2) 96%,transparent)}
.fiche:hover::before{transform:none;box-shadow:0 0 8px color-mix(in srgb,var(--acc) 60%,transparent)}
.fiche-h{display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-2);border-bottom:1px solid var(--line-0);padding-bottom:9px;margin-bottom:12px}
.fiche-h .ref{color:var(--acc)}
.fiche-t{font-family:var(--sans);font-weight:600;font-size:1.02rem;line-height:1.25;color:var(--text-0);margin:0 0 12px}
.tags{list-style:none;margin:0 0 15px;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.tags li{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--text-1);border:1px solid var(--line-0);padding:3px 7px;line-height:1.2}
.car{margin:0;display:flex;flex-direction:column;gap:11px}
.car>div{display:grid;grid-template-columns:1fr}
.car dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-2);margin-bottom:3px}
.car dd{margin:0;font-size:.9rem;color:var(--text-1);line-height:1.5}
.fiche-link{display:inline-flex;align-items:center;gap:8px;margin-top:16px;
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-2);text-decoration:none;transition:color var(--t-med) var(--ease)}
.fiche-link .fl-arrow{display:inline-block;color:var(--acc);transition:transform var(--t-med) var(--ease),color var(--t-med)}
.fiche:hover .fiche-link{color:var(--text-1)}
.fiche:hover .fl-arrow{transform:translateX(3px)}
.fiche-link:hover{color:var(--text-0)}
.fiche-link:hover .fl-arrow{transform:translateX(6px)}
.fiche-link:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:1px}
.fiche-link{cursor:pointer}
.specs{max-width:660px;margin:0 0 clamp(40px,6vh,64px)}
.specs h3{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-1);display:flex;align-items:center;gap:10px;margin:0 0 14px}
.specs-i{color:var(--acc);border:1px solid color-mix(in srgb,var(--acc) 50%,transparent);padding:2px 6px;font-size:10px;letter-spacing:.14em}
.specs table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.specs tr{border-bottom:1px solid var(--line-0)}
.specs tr:first-child{border-top:1px solid var(--line-0)}
.specs th{text-align:left;font-family:var(--mono);font-weight:400;font-size:12px;letter-spacing:.06em;
  color:var(--text-2);padding:10px 16px 10px 0;white-space:nowrap;width:34%;vertical-align:top}
.specs td{padding:10px 0;font-size:.94rem;color:var(--text-0)}
.folio-cta{display:flex;align-items:center;gap:22px;flex-wrap:wrap;border-top:1px solid var(--line-0);padding-top:clamp(24px,3.5vh,36px)}
.cta-q{margin:0;font-size:1.15rem;color:var(--text-0);font-weight:600}

/* ================= FOOTER ================= */
.serigraph{position:relative;z-index:1;background:var(--bg-0);border-top:1px solid var(--line-0);
  padding:clamp(40px,6vh,64px) var(--edge) 28px;margin-top:0}
.seri-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;max-width:1180px;margin:0 auto clamp(30px,4vh,44px)}
.seri-h{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-2);margin:0 0 12px}
.seri-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-family:var(--mono);font-size:12.5px;color:var(--text-1)}
.seri-list a{color:var(--text-1);text-decoration:none;transition:color var(--t-med)}
.seri-list a:hover{color:var(--acc)}
.seri-link{background:none;border:0;padding:0;cursor:pointer;text-align:left;font:inherit;color:var(--text-1);display:inline-flex;gap:9px;transition:color var(--t-med)}
.seri-link span{color:var(--text-2)}
.seri-link:hover{color:var(--acc)} .seri-link:hover span{color:var(--acc)}
.seri-base{max-width:1180px;margin:0 auto;font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  color:var(--text-2);border-top:1px solid var(--line-0);padding-top:18px}
.fid{position:absolute;font-family:var(--mono);color:var(--line-1);font-size:12px;line-height:1}
.fid-tl{left:14px;top:12px} .fid-tr{right:14px;top:12px} .fid-bl{left:14px;bottom:10px} .fid-br{right:14px;bottom:10px}

/* ================= RÉVÉLATION ================= */
.rv{opacity:0;transform:translateY(16px);transition:opacity 520ms var(--ease),transform 620ms var(--ease)}
.rv.in{opacity:1;transform:none}

/* ================= RESPONSIVE ================= */
@media (max-width:1100px){ .fiches{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:768px){
  :root{--head-h:70px}
  .desig{font-size:clamp(2.1rem,9vw,3rem)}
  .fiches,.contact-grid{grid-template-columns:1fr}
  .seri-cols{grid-template-columns:1fr;gap:22px}
  .strip-r .sep:last-of-type,.strip-r span:last-child{display:none}
}
/* Mobile (choix humain : nav en 2e rangée pleine largeur). Tout consolidé sous ≤600px.
   Desktop strictement inchangé (hors MQ). Nav = grille 4 colonnes égales (jamais de débordement). */
@media (max-width:600px){
  .strip{font-size:10px;padding:0 16px}
  .bar{flex-wrap:wrap;height:auto;padding:8px 16px 0;row-gap:0}
  .wm{font-size:14px}
  .nav{order:3;flex:1 0 100%;width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
    gap:0;margin-top:8px;overflow:visible;
    border-top:1px solid color-mix(in srgb,var(--line-0) 55%,transparent)}
  .nav::-webkit-scrollbar{display:none}
  .tab{flex:none;min-width:0;justify-content:center;padding:9px 3px 10px;gap:4px;
    font-size:11px;letter-spacing:0;white-space:nowrap;overflow:hidden}
  .tab .ti{font-size:9px}
  .tab::after{left:6px;right:6px}
  /* Hero mobile : titre plus petit + posé plus bas dans l'eau (masquage kick/lede/sheet/cmd = règle globale ci-dessus). */
  .hero{padding-bottom:clamp(104px,15vh,132px)}
  .hero-in{max-width:min(560px,90vw)}
  .desig{font-size:clamp(1.45rem,6.8vw,2.05rem);line-height:1.02;letter-spacing:-.02em;margin:0;
    overflow-wrap:break-word;text-shadow:var(--txt-shadow-strong)}
  .specs th{white-space:normal;width:42%}
  .folios{padding-left:16px;padding-right:16px}
}
@media (max-width:340px){ .tab .ti{display:none} }
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  .led,.st-open::before,.cue-chev{animation:none}
  .hero{transition:opacity 120ms linear,visibility 0s}
  .cmd::after{display:none}
  *{transition-duration:.01ms !important}
}
/* ================= CAPTURE (?shot) ================= */
html:has(body.shot){scroll-behavior:auto}
body.shot #gl{opacity:1!important;animation:none!important}
body.shot .rv{opacity:1!important;transform:none!important}
body.shot .hero:not(.is-active){display:none!important}
body.shot .hero.is-active{opacity:1!important;visibility:visible!important;transform:none!important}

/* ── Vignette line-art en tête de fiche ── */
.fiche-visual{position:relative;display:block;margin:0 0 14px;width:100%;aspect-ratio:16/9;overflow:hidden;
  background:linear-gradient(180deg,color-mix(in srgb,var(--bg-1) 80%,var(--shade)),var(--bg-2));
  border:1px solid var(--line-0);
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
  transition:border-color var(--t-med) var(--ease)}
.fiche-visual::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg,transparent 0 15px,color-mix(in srgb,var(--line-0) 60%,transparent) 15px 16px),
    repeating-linear-gradient(90deg,transparent 0 15px,color-mix(in srgb,var(--line-0) 60%,transparent) 15px 16px);
  opacity:.45;mask-image:radial-gradient(130% 130% at 50% 30%,#000,transparent 80%)}
.fiche-visual__art{position:relative;display:block;height:100%;width:70%;max-width:220px;margin:0 auto;
  color:var(--text-2);transition:color var(--t-med) var(--ease)}
.fiche-visual__tick{position:absolute;right:9px;top:9px;width:12px;height:2px;
  background:var(--acc2);box-shadow:0 0 7px var(--acc2);opacity:.85}
.fiche:hover .fiche-visual{border-color:var(--line-1)}
.fiche:hover .fiche-visual__art{color:var(--acc)}

/* ── Lockup Unreal Engine 5 (logo officiel via mix-blend screen) ── */
.ue-lockup{display:inline-flex;align-items:center;line-height:1;
  border:1px solid var(--line-1);background:color-mix(in srgb,var(--bg-2) 60%,transparent);
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,0 100%);
  padding:8px 14px;transition:border-color var(--t-med)}
.ue-lockup:hover{border-color:color-mix(in srgb,var(--line-1) 55%,var(--text-0))}
.ue-fallback{display:inline-flex;align-items:center;gap:10px}
.ue-mark{width:22px;height:22px;flex:0 0 auto;fill:none;stroke:var(--text-1);stroke-width:1.2;overflow:visible}
.ue-mark-u{stroke:var(--text-0);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ue-txt{display:flex;flex-direction:column;gap:2px;font-family:var(--mono)}
.ue-made{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-2)}
.ue-name{font-size:12.5px;letter-spacing:.10em;text-transform:uppercase;color:var(--text-0)}
.ue-name b{font-weight:600;color:var(--acc)}
.ue-badge{display:none;height:46px;width:auto;max-width:100%;mix-blend-mode:screen}
.ue-lockup.has-badge{padding:2px 6px;border-color:transparent;background:none}
.ue-lockup.has-badge .ue-badge{display:block}
.ue-lockup.has-badge .ue-fallback{display:none}
.hero-in .ue-lockup{margin:0 0 clamp(18px,2.6vh,26px)}

/* ── LED orange de disponibilité (statut) ── */
.sheet dd.st-open{display:flex;align-items:center;gap:8px}
.sheet dd.st-open::before{content:"";flex:0 0 auto;width:6px;height:6px;border-radius:50%;
  background:var(--acc2);box-shadow:0 0 7px color-mix(in srgb,var(--acc2) 80%,transparent);
  animation:beat 1.9s infinite ease-in-out}

/* ── Page projet (overlay/drawer) ── */
.prj{position:fixed;inset:0;z-index:80;display:flex;justify-content:flex-end;pointer-events:auto}
.prj *{pointer-events:auto}
.prj[hidden]{display:none}
.prj-scrim{position:absolute;inset:0;cursor:pointer;
  background:radial-gradient(130% 120% at 78% 0%,color-mix(in srgb,var(--bg-0) 40%,var(--shade)) 0%,color-mix(in srgb,var(--bg-0) 8%,var(--shade)) 100%);
  opacity:0;transition:opacity var(--t-slow) var(--ease)}
.prj.is-open .prj-scrim{opacity:.9}
/* couverture projet (poster côté gauche) */
.prj-cover{position:absolute;left:0;top:0;bottom:0;width:calc(100% - min(720px,100%));
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  padding:clamp(28px,6vw,90px);
  opacity:0;transform:translateX(-22px);
  transition:opacity var(--t-slow) var(--ease) 90ms,transform var(--t-slow) var(--ease) 90ms}
.prj.is-open .prj-cover{opacity:1;transform:none}
.prj-cover-in{width:100%;max-width:480px}
.prj-cover .prj-eyebrow{margin:0 0 18px}
.prj-cover-title{font-family:var(--display);font-weight:900;
  font-size:clamp(2rem,3.4vw,3.1rem);line-height:1.0;letter-spacing:-.025em;
  color:var(--text-0);margin:0 0 18px;text-shadow:var(--txt-shadow-soft)}
.prj-cover .prj-tags{margin:0 0 26px}
.prj-cover-fig{margin:0}
@media (min-width:1024px){ .prj-panel .prj-head, .prj-panel .prj-figure{display:none} }
@media (max-width:1023px){ .prj-cover{display:none} }
.prj-panel{position:relative;display:flex;flex-direction:column;width:min(720px,100%);max-width:100%;height:100%;min-height:0;
  background:var(--bg-1);border-left:1px solid var(--line-1);box-shadow:var(--drawer-shadow);
  transform:translateX(48px);opacity:0;transition:transform var(--t-slow) var(--ease),opacity var(--t-slow) var(--ease)}
.prj.is-open .prj-panel{transform:none;opacity:1}
.prj-panel:focus{outline:none}
.prj-panel::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--acc);opacity:.55}
.prj-corner{position:absolute;width:9px;height:9px;pointer-events:none;z-index:2}
.prj-corner::before,.prj-corner::after{content:"";position:absolute;background:var(--line-1)}
.prj-corner::before{left:0;top:0;width:100%;height:1px}
.prj-corner::after{left:0;top:0;width:1px;height:100%}
.prj-corner--tl{left:12px;top:12px}
.prj-corner--br{right:12px;bottom:12px;transform:rotate(180deg)}
.prj-top{flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;gap:16px;
  height:52px;padding:0 clamp(18px,3vw,34px);border-bottom:1px solid var(--line-0)}
.prj-crumb{margin:0;font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-2)}
.prj-crumb span{color:var(--line-1);margin:0 4px}
.prj-close{display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  background:color-mix(in srgb,var(--bg-2) 55%,transparent);border:1px solid var(--line-1);
  color:var(--text-1);font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  padding:7px 10px 7px 13px;clip-path:polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,0 100%);
  transition:border-color var(--t-med),color var(--t-med),background var(--t-med)}
.prj-close-k{border:1px solid var(--line-0);padding:1px 5px;color:var(--text-2);font-size:10px;line-height:1.3}
.prj-close:hover{border-color:var(--acc);color:var(--text-0);background:color-mix(in srgb,var(--acc) 10%,transparent)}
.prj-close:hover .prj-close-k{border-color:var(--acc);color:var(--acc)}
.prj-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding:clamp(22px,3.4vw,40px) clamp(18px,3vw,40px) clamp(44px,7vh,84px);
  scrollbar-width:thin;scrollbar-color:var(--line-1) transparent}
.prj-scroll::-webkit-scrollbar{width:11px}
.prj-scroll::-webkit-scrollbar-thumb{background:var(--line-1);border:3px solid var(--bg-1)}
.prj-head{margin:0 0 clamp(20px,3vh,30px)}
.prj-eyebrow{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin:0 0 14px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-2)}
.prj-ref{position:relative;padding-left:15px;color:var(--acc)}
.prj-ref::before{content:"";position:absolute;left:0;top:50%;width:7px;height:7px;margin-top:-3.5px;
  background:var(--acc2);box-shadow:0 0 8px var(--acc2)}
.prj-dot{width:3px;height:3px;background:var(--line-1)}
.prj-slash{color:var(--line-1)}
.prj-domain{color:var(--text-1)}
.prj-title{font-family:var(--display);font-weight:900;font-size:clamp(1.7rem,4.2vw,2.55rem);
  line-height:1.02;letter-spacing:-.02em;color:var(--text-0);margin:0 0 16px}
.prj-tags{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0}
.prj-tags li{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--text-1);
  border:1px solid var(--line-0);padding:3px 8px;line-height:1.25}
.prj-figure{margin:0 0 clamp(22px,3.4vh,32px)}
.prj-figure-frame{position:relative;width:100%;aspect-ratio:3/2;overflow:hidden;
  background:linear-gradient(180deg,var(--bg-2),color-mix(in srgb,var(--bg-1) 82%,var(--shade)));
  border:1px solid var(--line-0);
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px))}
.prj-figure-frame::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg,transparent 0 23px,color-mix(in srgb,var(--line-0) 55%,transparent) 23px 24px),
    repeating-linear-gradient(90deg,transparent 0 23px,color-mix(in srgb,var(--line-0) 55%,transparent) 23px 24px);
  opacity:.5;mask-image:radial-gradient(120% 120% at 50% 42%,#000,transparent 78%)}
.prj-figure__art{position:relative;display:block;height:100%;width:82%;max-width:460px;margin:0 auto;color:var(--text-1)}
.prj-figure__tag{position:absolute;left:12px;top:10px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--text-2)}
.prj-figure__tick{position:absolute;right:0;top:16px;width:18px;height:2px;background:var(--acc2);box-shadow:0 0 8px var(--acc2)}
.prj-figure__cap{margin:11px 2px 0;font-family:var(--mono);font-size:11px;letter-spacing:.03em;color:var(--text-2);line-height:1.55}
.prj-resume{margin:0 0 clamp(24px,3.6vh,36px);max-width:60ch;padding-left:16px;border-left:2px solid var(--acc);
  font-size:clamp(1.02rem,1.7vw,1.16rem);line-height:1.6;color:var(--text-0)}
.prj-blocks{display:flex;flex-direction:column;gap:clamp(18px,2.6vh,26px);margin:0 0 clamp(28px,4vh,42px)}
.prj-block__h{display:flex;align-items:baseline;gap:10px;margin:0 0 9px;
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-1)}
.prj-block__i{color:var(--acc);font-size:11px;letter-spacing:.1em;border:1px solid color-mix(in srgb,var(--acc) 45%,transparent);padding:2px 6px}
.prj-block p{margin:0;max-width:64ch;color:var(--text-1);font-size:.98rem;line-height:1.62}
.prj-specs{margin:0 0 clamp(28px,4vh,40px);max-width:640px}
.prj-specs__h{display:flex;align-items:center;gap:10px;margin:0 0 14px;
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-1)}
.prj-specs__i{color:var(--acc);border:1px solid color-mix(in srgb,var(--acc) 50%,transparent);padding:2px 6px;font-size:10px;letter-spacing:.14em}
.prj-specs__t{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.prj-specs__t tr{border-bottom:1px solid var(--line-0)}
.prj-specs__t tr:first-child{border-top:1px solid var(--line-0)}
.prj-specs__t th{width:38%;text-align:left;vertical-align:top;white-space:nowrap;
  font-family:var(--mono);font-weight:400;font-size:12px;letter-spacing:.05em;color:var(--text-2);padding:10px 16px 10px 0}
.prj-specs__t td{padding:10px 0;font-size:.94rem;color:var(--text-0)}
.prj-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  border-top:1px solid var(--line-0);padding-top:clamp(22px,3vh,30px)}
.prj-foot__q{margin:0;font-size:1.08rem;font-weight:600;color:var(--text-0)}
.prj-cmd{position:relative;display:inline-flex;align-items:center;gap:10px;overflow:hidden;
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-0);text-decoration:none;
  padding:11px 18px 11px 31px;border:1px solid var(--acc2);background:color-mix(in srgb,var(--acc2) 10%,transparent);
  clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,0 100%);
  transition:background var(--t-med),color var(--t-med),border-color var(--t-med)}
.prj-cmd::before{content:"";position:absolute;left:13px;top:50%;width:6px;height:6px;margin-top:-3px;
  border-radius:50%;background:var(--acc2);box-shadow:0 0 9px var(--acc2)}
.prj-cmd:hover{background:color-mix(in srgb,var(--acc2) 20%,transparent);color:var(--text-hi);border-color:var(--acc2)}
body.prj-lock{position:fixed;left:0;right:0;width:100%;overflow:hidden}
@media (max-width:640px){
  .prj-panel{width:100%;border-left:0}
  .prj-panel::before{opacity:.4}
  .prj-foot{flex-direction:column;align-items:flex-start}
  .prj-cmd{width:100%;justify-content:center;padding-left:31px}
}
@media (prefers-reduced-motion:reduce){
  .prj-scrim,.prj-panel{transition:none}
  .prj-panel{transform:none}
  .fiche-visual,.fiche-visual__art{transition:none}
}
/* --- Fix CSP (ADR-0021) : remplace les 29 attributs style= inline des SVG (fills) ---
   Rendu strictement identique ; permet une CSP sans 'unsafe-inline'. */
.vis-sprite{position:absolute;width:0;height:0;overflow:hidden}
.s-acc{stroke:var(--acc)}
.s-acc2{stroke:var(--acc2)}

/* ── Médias réels des fiches (remplacent le croquis SVG dès qu'ils existent) ── */
.prj-media{margin:0 0 clamp(18px,2.6vh,26px)}
.prj-media img,.prj-media video{display:block;width:100%;border:1px solid var(--line-0);background:var(--bg-0)}
.prj-media video{aspect-ratio:16/9}
.prj-media img{height:auto}
.fiche-visual__img{position:relative;display:block;width:100%;height:100%;object-fit:cover;
  transition:transform var(--t-med) var(--ease)}
.fiche:hover .fiche-visual__img{transform:scale(1.04)}

/* ── Carte ENTIÈREMENT cliquable (décision humaine 2026-07-10, « comme YouTube ») ── */
.fiche.is-click{cursor:pointer}
.fiche-link--cover{position:absolute;inset:0;z-index:2;margin:0;display:block}
/* Affordance PERSISTANTE (critique DA) : flèche fantôme bas-droite des cartes cliquables. */
.fiche.is-click::after{content:"→";position:absolute;right:16px;bottom:12px;
  font-family:var(--mono);font-size:14px;line-height:1;color:var(--text-2);opacity:.55;
  transition:transform var(--t-med) var(--ease),color var(--t-med),opacity var(--t-med)}
.fiche.is-click:hover::after{color:var(--acc);opacity:1;transform:translateX(4px)}
.fiche-t--mail{color:var(--acc)}

/* ── Cue : la CATÉGORIE (pas « Dossier »), BIEN visible (demande humaine : « qu'on le voie ») ── */
.cue{padding:15px 32px 12px;gap:10px}
.cue-lbl{font-size:16px;letter-spacing:.2em;max-width:min(80vw,720px);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-0)}
.cue-ar{width:30px;height:34px}
.cue-chev{width:30px;height:34px;stroke-width:2.1}
@media (max-width:600px){ .cue-lbl{font-size:12.5px;letter-spacing:.12em} .cue{padding:12px 18px 10px} }

/* ── Micro-interactions (demande humaine 2026-07-10 : « agréable à utiliser ») ──
   Budget §6.5 respecté : transform/opacity/couleur, 140-240 ms, neutralisées en reduced-motion. */
.tab{transition:color var(--t-med) var(--ease),transform var(--t-fast) var(--ease)}
.tab:hover{transform:translateY(-1px)}
.tab:hover::after{transform:scaleX(.6);opacity:.45}
.tab.is-active:hover::after{transform:none;opacity:1}
.lang a{position:relative}
.lang a::after{content:"";position:absolute;left:1px;right:1px;bottom:-2px;height:1px;
  background:var(--acc);transform:scaleX(0);transform-origin:left;opacity:0;
  transition:transform var(--t-med) var(--ease),opacity var(--t-med)}
.lang a:hover::after{transform:none;opacity:.8}
.mode-ic{transition:transform var(--t-med) var(--ease)}
.mode:hover .mode-ic{transform:rotate(-24deg)}
html[data-theme=light] .mode:hover .mode-ic{transform:scaleX(-1) rotate(-24deg)}
.brand .wm{transition:letter-spacing var(--t-med) var(--ease)}
.brand:hover .wm{letter-spacing:.06em}
.fiche-visual__art{transition:color var(--t-med) var(--ease),transform var(--t-med) var(--ease)}
.fiche:hover .fiche-visual__art{transform:scale(1.04)}
.seri-link{transition:color var(--t-med),transform var(--t-fast) var(--ease)}
.seri-link:hover{transform:translateX(3px)}
.cue:hover .cue-lbl{color:var(--acc)}
.cue:hover .cue-chev{stroke:var(--text-0)}

/* ── Projet « EN COURS » (décision humaine 2026-07-10) : carte distinguée + site dédié ── */
.live-badge{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--acc2);border:1px solid color-mix(in srgb,var(--acc2) 55%,transparent);
  background:color-mix(in srgb,var(--acc2) 10%,transparent);
  padding:2px 6px;line-height:1.2;white-space:nowrap}
.fiche--live{border-color:color-mix(in srgb,var(--acc2) 45%,var(--line-0))}
.fiche--live::before{transform:none;background:var(--acc2);
  box-shadow:0 0 8px color-mix(in srgb,var(--acc2) 60%,transparent)}
.fiche-link--ext{color:var(--acc2);margin-left:18px}
.fiche-link--ext .fl-arrow{color:var(--acc2)}
.fiche-link--ext:hover{color:var(--text-0)}
.prj-crumb .crumb-t{color:inherit;margin:0}

/* ── Sélecteur de langue FR|EN (ADR-0023) — liens simples, zéro JS ── */
.lang{display:inline-flex;align-items:baseline;gap:6px;flex:0 0 auto;margin-left:10px;
  font-family:var(--mono);font-size:11px;letter-spacing:.08em}
.lang span{color:var(--line-1)}
.lang a{color:var(--text-2);text-decoration:none;padding:2px 1px;transition:color var(--t-med)}
.lang a:hover{color:var(--text-0)}
.lang a[aria-current]{color:var(--acc)}
@media (max-width:600px){ .lang{margin-left:auto} }

/* ── Bouton HUD jour/nuit « terminateur » (ADR-0024) — fin de .strip-r ── */
.mode{display:inline-flex;align-items:center;background:none;border:0;cursor:pointer;
  color:var(--text-2);padding:2px 0 2px 4px;line-height:1;transition:color var(--t-med)}
.mode:hover{color:var(--acc)}
.mode-ic{width:13px;height:13px;display:block}
html[data-theme=light] .mode-ic{transform:scaleX(-1)}  /* la moitié encrée bascule avec le thème */

/* ================= Gén-C : no-JS, poster, page projet ================= */
/* Mode ?shot&poster : ne capture QUE le canvas (génération de img/hero-poster.jpg). */
html.poster .mast,html.poster .stage,html.poster .prj,html.poster .hero-poster{display:none!important}
/* Utilitaire "visually hidden" (h1 sémantique de l'accueil). */
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* Poster hero = frame réelle capturée du rendu (ADR-0021e). Servi :
   - sans JS (le WebGL n'existe pas) ; - sous prefers-reduced-motion (webgl.js ne démarre pas). */
.hero-poster{display:none;position:fixed;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:0;pointer-events:none}
html.no-js .hero-poster{display:block}
html.no-js #gl{display:none}
@media (prefers-reduced-motion:reduce){ html:not(.shot) .hero-poster{display:block} }
/* (ADR-0028, décision humaine 2026-07-13 : « l'animation est la priorité maximum ».)
   Le repli poster + ambiance CSS d'attente (ADR-0027, 5e-6e passes) est RETIRÉ : le
   loader attend la VRAIE 3D animée, même ~20 s sous Firefox. Le poster ne sert plus
   qu'au no-JS et à reduced-motion, comme à l'origine (ADR-0021e). */
/* Sans JS : les 4 dossiers empilés, lisibles, et la révélation au scroll neutralisée. */
html.no-js .folio{display:block}
html.no-js .rv{opacity:1;transform:none;transition:none}
/* Page projet statique /projets/<slug>/ (réutilise les classes .prj-* de contenu). */
.prj-page{position:relative;z-index:3;max-width:760px;margin:0 auto;
  padding:calc(var(--head-h) + clamp(28px,6vh,64px)) var(--edge) clamp(56px,9vh,96px)}
.prj-page .prj-crumb{margin:0 0 clamp(22px,3.4vh,32px)}
.prj-page .prj-crumb a{color:inherit;text-decoration:none;transition:color var(--t-med)}
.prj-page .prj-crumb a:hover{color:var(--acc)}
.prj-page .prj-title{font-size:clamp(2rem,5.2vw,3.1rem)}
.prj-page .prj-figure{max-width:640px}