/* Carnet : site public, système « Coffre ».
   Sombre d'abord, clair soigné. Une seule couleur d'accent (le repère orange du cadran).
   Aucune ressource tierce : polices et images servies par le site (assets/fonts, assets/img).

   Sommaire
   1. Polices            6. En-tête, pied, boutons     11. Tableaux
   2. Jetons             7. Héros 3D (accueil)         12. Tableau des cryptos (top 50)
   3. Base               8. Planches annotées          13. Pages (sécurité, téléchargement, légal…)
   4. Grille             9. Lignes et étapes           14. Mouvement (html.motion)
   5. Typographie       10. Salle des coffres          15. Préférences (contraste, couleurs forcées) */

/* 1. Polices --------------------------------------------------------------------------------- */
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-wdth.woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("../fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("../fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

/* 2. Jetons ---------------------------------------------------------------------------------- */
/* Contrastes (WCAG 2.x) sur --bg : ink 16.5, ink-2 8.7, ink-3 5.9 (sombre) ; 16.0, 8.0, 5.5 (clair). */
:root {
  color-scheme: dark;
  --bg: #0b0c0e;
  --raise: #141519;
  --plate: #1a1b20;
  --slab: #1a1b20;
  --ink: #edece7;
  --ink-2: #aeada7;
  --ink-3: #8e8d87;
  --rule: #2a2b30;
  --rule-2: #3c3d43;
  --control: #6c6b66;
  --accent: #ff7a3d;
  --accent-text: #ff7a3d;
  --on-ink: #0b0c0e;
  --shadow: 0 1px 0 rgb(255 255 255 / 0.06) inset, 0 30px 80px -30px rgb(0 0 0 / 0.9);
  --room-edge: rgb(255 255 255 / 0.07);
  /* Accueil, salles (§4) : après le chapitre 01, chaque chapitre est une pièce posée sur un sol un peu
     moins noir que la page. Deux matières alternent pour que deux voisines ne se ressemblent jamais :
     graphite (chaud, plus sombre) et acier (froid, plus clair) ; la salle 06 est la plus sombre.
     Contrastes mesurés (WebKit) sous chaque texte, lumière zénithale comprise, au pire de l'acier :
     --hall-ink-3 ≥ 5.5, --hall-ink-2 ≥ 6.6, titres (--title) ≥ 9 ; en clair, 5.5 et plus. */
  --floor: #141519;
  --title: #f4eee3;
  --graphite: #1f1e21; --graphite-top: #2b292a;
  --steel: #1f252d; --steel-top: #2c3540;
  --vault: #0c0d10; --vault-top: #17181c;
  --lamp: #1d1b1b; --lamp-top: #29261f;
  --sill: #18191d;
  --lamp-glow: rgb(255 184 112 / 0.075);
  --lamp-glow-2: rgb(255 176 96 / 0.32);
  --hall-ink-2: #c3bcb0;
  --hall-ink-3: #aea799;
  --hall-control: #85847e;
  --hall-accent-text: #ff8a52;
  --hall-raise: rgb(255 255 255 / 0.05);
  --hall-rule: rgb(255 255 255 / 0.1);
  --hall-rule-2: rgb(255 255 255 / 0.2);
  /* La lumière : zénithale et chaude, comme dans la chambre au bout du héros ; un liseré sur l'arête. */
  --hall-light: rgb(255 236 210 / 0.1);
  --hall-edge: rgb(255 255 255 / 0.14);
  --hall-line: rgb(255 255 255 / 0.07);
  --hall-shadow: 0 1px 0 rgb(0 0 0 / 0.6), 0 4px 12px rgb(0 0 0 / 0.35), 0 50px 90px -40px rgb(0 0 0 / 0.95);
  --grain: url("../img/grain.svg");
  /* Instruments (la preuve de chaque salle) : peinture poudrée en léger relief, chanfrein clair en haut. */
  --plate-mix: 4.5%; /* la plaque : la teinte de sa salle, éclaircie d'autant */
  --plate-hi: rgb(255 255 255 / 0.13);
  --plate-side: rgb(255 255 255 / 0.05);
  --plate-lo: rgb(0 0 0 / 0.55);
  --plate-drop: 0 1px 0 rgb(0 0 0 / 0.45), 0 14px 28px -14px rgb(0 0 0 / 0.8);
  /* Plaque du chapitre : une fente creusée, le numéro en métal dedans. */
  --slot: rgb(0 0 0 / 0.32);
  --slot-in: inset 0 2px 5px rgb(0 0 0 / 0.6), inset 0 -1px 0 rgb(255 255 255 / 0.08), 0 1px 0 rgb(255 255 255 / 0.05);
  --num-lo: #8f8a82;
  /* Scène 3D du héros (lus par src/js/vault/theme.js) : mur du fond, encre des gravures, peinture, intérieur du coffre. */
  --gl-wall-top: #111216;
  --gl-wall-bot: #0c0d0f;
  --gl-fill: #e8e4da;
  --gl-powder: #1c1d20;
  --gl-chamber: #2b2b2d;

  --sans: "Instrument Sans", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --gutter: clamp(16px, 4.6vw, 72px);
  --max: 1360px;
  --gap: 24px;
  --sec-y: clamp(72px, 10vh, 140px);
  /* Accueil, chapitres : l'écart entre deux chapitres dépend de la largeur (pas de la hauteur) et reste
     toujours plus grand que tout écart à l'intérieur d'un chapitre (repère → titre → corps → blocs). */
  --chap-y: clamp(96px, 10vw, 144px);
  --room-y: clamp(88px, 9vw, 128px);
  --sp-head: 48px;
  --sp-body: 64px;
  --sp-block: 48px;
  --mast-h: 72px;
  /* Accueil, scène 3D en large : bande gardée sous la capture posée pour le repère du chapitre 01. */
  --land-band: 72px;
  /* Salles : retrait du panneau (--hall-x) et marge intérieure (--hall-in). En large, leur somme vaut la
     gouttière : le texte des salles retombe sur les colonnes de la page (et du chapitre 01). */
  --hall-x: calc(var(--gutter) / 2);
  --hall-in: calc(var(--gutter) / 2);
  --hall-pad: clamp(64px, 6.2vw, 100px);
  --hall-gap: clamp(28px, 3.4vw, 56px);
  --hall-r: 24px;
  --ease: cubic-bezier(0.16, 0.84, 0.24, 1);
}
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --bg: #eeede8;
    --raise: #f8f7f3;
    --plate: #e4e2db;
    --slab: #121317;
    --ink: #111215;
    --ink-2: #45464a;
    --ink-3: #5f5e59;
    --rule: #d3d1c9;
    --rule-2: #a9a79f;
    --control: #86847d;
    --accent: #e0501a;
    --accent-text: #a8380a;
    --on-ink: #eeede8;
    --shadow: 0 1px 2px rgb(20 20 20 / 0.06), 0 30px 70px -28px rgb(20 20 25 / 0.35);
    --room-edge: transparent;
    /* Salles en clair : papier chaud et acier à peine froid sur un sol gris chaud ; la 06 reste sombre. */
    --floor: #e2e0d8;
    --title: #14120e;
    --graphite: #f5f4f0; --graphite-top: #fdfcfa;
    --steel: #e9ecea; --steel-top: #f5f7f5;
    --vault: #111215; --vault-top: #1c1d22;
    --lamp: #f3f0e8; --lamp-top: #fbf7ee;
    --sill: #e9e7e0;
    --lamp-glow: rgb(255 196 128 / 0.2);
    --lamp-glow-2: rgb(214 140 60 / 0.3);
    --hall-ink-2: #45464a;
    --hall-ink-3: #5c5b56;
    --hall-control: #86847d;
    --hall-accent-text: #a8380a;
    --hall-raise: rgb(20 20 25 / 0.04);
    --hall-rule: rgb(20 20 25 / 0.12);
    --hall-rule-2: rgb(20 20 25 / 0.3);
    --hall-light: rgb(255 255 255 / 0.8);
    --hall-edge: rgb(255 255 255 / 0.95);
    --hall-line: rgb(20 20 25 / 0.09);
    --hall-shadow: 0 1px 1px rgb(40 32 20 / 0.07), 0 4px 12px -4px rgb(40 32 20 / 0.1), 0 40px 70px -40px rgb(40 32 20 / 0.35);
    --grain: url("../img/grain-light.svg");
    --plate-mix: 65%;
    --plate-hi: rgb(255 255 255 / 0.95);
    --plate-side: rgb(40 32 20 / 0.08);
    --plate-lo: rgb(40 32 20 / 0.18);
    --plate-drop: 0 1px 1px rgb(40 32 20 / 0.08), 0 12px 24px -14px rgb(40 32 20 / 0.3);
    --slot: rgb(40 32 20 / 0.06);
    --slot-in: inset 0 2px 4px rgb(40 32 20 / 0.16), inset 0 -1px 0 rgb(255 255 255 / 0.9), 0 1px 0 rgb(255 255 255 / 0.7);
    --num-lo: #5c5b56;
    --gl-wall-top: #f0efea;
    --gl-wall-bot: #e6e5df;
    --gl-fill: #16171a;
    --gl-powder: #55565b;
    --gl-chamber: #8c8c8a;
  }
}
@media (max-width: 759px) {
  :root { --mast-h: 64px; --gap: 16px; --sec-y: 64px; --chap-y: 72px; --room-y: 64px; --sp-head: 28px; --sp-body: 36px; --sp-block: 32px; }
  /* Téléphone : la gouttière est trop étroite pour être partagée ; le texte des salles est à 24 px du bord. */
  :root { --hall-x: 8px; --hall-in: 16px; --hall-pad: 52px; --hall-gap: 14px; --hall-r: 18px; }
}
@media (min-width: 760px) and (max-width: 1099px) {
  :root { --gap: 20px; --sp-body: 48px; --sp-block: 40px; --hall-x: 12px; --hall-in: calc(var(--gutter) - 12px); }
}

/* 3. Base ------------------------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.6 var(--sans);
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: normal;
  overflow-x: clip;
}
@media (max-width: 759px) { body { font-size: 16.5px; } }
img, svg, canvas, picture { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { font-weight: 520; text-wrap: balance; scroll-margin-top: 88px; }
p, li, dd { text-wrap: pretty; }
strong, b { font-weight: 600; color: var(--ink); }
em { font-style: italic; }
code { font-family: var(--mono); font-size: 0.88em; color: var(--ink); overflow-wrap: anywhere; }
table { border-collapse: collapse; }
button { font: inherit; color: inherit; }
main { display: block; }
main:focus { outline: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--accent); color: var(--on-ink); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 100; background: var(--ink); color: var(--bg); padding: 10px 14px; border-radius: 6px; text-decoration: none; }
.skip:focus { top: 12px; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; text-decoration-color: var(--rule-2); transition: text-decoration-color 0.2s, color 0.2s; }
a:hover { text-decoration-color: var(--accent); }
.link--quiet { color: var(--ink-2); font-size: 15.5px; }
.link--quiet:hover { color: var(--ink); }
.link--arrow { white-space: nowrap; }
.link--arrow::after { content: " →"; display: inline-block; white-space: pre; transition: transform 0.3s var(--ease); }
.link--arrow:hover::after { transform: translateX(4px); }
/* Téléphone : le lien peut passer à la ligne, la flèche reste collée au dernier mot. */
@media (max-width: 759px) { .link--arrow { white-space: normal; } .link--arrow::after { content: "\00a0→"; display: inline; } }

/* 4. Grille ---------------------------------------------------------------------------------- */
.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.grid > * { grid-column: 1 / -1; }
@media (min-width: 760px) {
  .span-7 { grid-column: 1 / span 9; }
  .span-8 { grid-column: 1 / span 10; }
  .span-9, .span-10 { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .span-7 { grid-column: 1 / span 7; }
  .span-8 { grid-column: 1 / span 8; }
  .span-9 { grid-column: 1 / span 9; }
  .span-10 { grid-column: 1 / span 10; }
  .span-steps { grid-column: 3 / -1; }
}
@media (max-width: 759px) {
  .grid { grid-template-columns: minmax(0, 1fr); }
}
.sec { padding-block: var(--sec-y); }
.sec--tight { padding-block: calc(var(--sec-y) * 0.7); }
.sec + .sec { padding-top: 0; }

/* Accueil : chapitres numérotés. Chacun s'ouvre sur un repère (numéro, intitulé, filet), puis titre,
   chapô, preuve, et se termine par un seul lien « en détail », toujours aligné sur la colonne 1.
   Une ancre (sommaire, rail) pose le repère juste sous l'en-tête. */
.chapter { padding-top: var(--chap-y); scroll-margin-top: calc(32px - var(--chap-y)); }
.chapter__body { margin-top: var(--sp-body); }
.chapter .more, .room .more { margin-top: var(--sp-block); }
.kicker { position: relative; display: flex; align-items: baseline; gap: 14px; margin: 0 0 var(--sp-head); padding-top: 14px; font: 500 12.5px/1.4 var(--mono); letter-spacing: 0.04em; color: var(--ink-2); }
.kicker::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--rule-2); transform-origin: 0 50%; }
.kicker::before { content: ""; position: absolute; z-index: 1; left: 0; top: -1px; width: 32px; height: 3px; background: var(--ink); transform-origin: 0 50%; }
/* Progression dans la page : la marque du chapitre n couvre n/7 du filet (sans JS aussi). */
.kicker[data-ch]::before { right: 0; width: auto; transform: scaleX(var(--ch)); }
.kicker[data-ch="1"] { --ch: 0.1429; }
.kicker[data-ch="2"] { --ch: 0.2857; }
.kicker[data-ch="3"] { --ch: 0.4286; }
.kicker[data-ch="4"] { --ch: 0.5714; }
.kicker[data-ch="5"] { --ch: 0.7143; }
.kicker[data-ch="6"] { --ch: 0.8571; }
.kicker[data-ch="7"] { --ch: 1; }
.kicker__n { color: var(--ink); font-variant-numeric: tabular-nums; }
.kicker__of { color: var(--ink-3); }
.kicker + h2 { margin-top: 0; }
/* La plaque des chapitres (01 à 07) : le numéro en grand, en métal (de l'encre vers le gris), dans une
   fente creusée ; « /07 » et l'intitulé en mono. Le filet de progression reste au-dessus. La fente est
   le second fond (padding-box), le métal le premier (découpé au texte) : un seul élément, sans
   pseudo-élément ; sans découpe au texte, le numéro garde simplement l'encre. */
.kicker[data-ch] { align-items: center; gap: 16px; padding-top: 22px; }
.kicker[data-ch] .kicker__n { display: inline-flex; align-items: baseline; gap: 4px; padding: 10px 13px 9px; border-radius: 10px; background: var(--slot); box-shadow: var(--slot-in); font: 560 clamp(32px, 2.8vw, 42px)/1 var(--sans); font-stretch: 75%; letter-spacing: -0.02em; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .kicker[data-ch] .kicker__n {
    background: linear-gradient(180deg, var(--title) 28%, var(--num-lo) 92%), linear-gradient(var(--slot), var(--slot));
    -webkit-background-clip: text, padding-box; background-clip: text, padding-box;
    -webkit-text-fill-color: transparent;
  }
}
.kicker[data-ch] .kicker__of { font: 500 12px/1 var(--mono); letter-spacing: 0.02em; color: var(--ink-3); -webkit-text-fill-color: var(--ink-3); }
.kicker[data-ch] .kicker__t { font: 500 12.5px/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
@media (max-width: 759px) {
  .kicker[data-ch] { gap: 12px; padding-top: 18px; }
  .kicker[data-ch] .kicker__n { padding: 8px 10px 7px; border-radius: 8px; font-size: 28px; }
}

/* « Sur cette page » : la charnière entre la mise en route et les chapitres, un lien par chapitre.
   Un repère de navigation, pas un chapitre : filet simple, sans la barre ni le numéro des chapitres. */
.sommaire { padding-bottom: 0; }
.sommaire .kicker { margin-bottom: 0; color: var(--ink-3); }
.sommaire .kicker::before { content: none; }
.chapters { margin-top: 8px; border-bottom: 1px solid var(--rule); }
.chapters a { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 8px; min-height: 56px; padding: 14px 36px 16px 0; border-top: 1px solid var(--rule); color: var(--ink); text-decoration: none; }
.chapters li:first-child a { border-top: 0; }
.chapters__n { grid-row: 1 / span 2; padding-top: 0.5em; font: 500 13px/1 var(--mono); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.chapters__t { font-size: clamp(20px, 1.7vw, 24px); line-height: 1.22; font-weight: 500; font-stretch: 94%; letter-spacing: -0.012em; text-decoration: underline 1px transparent; text-underline-offset: 0.2em; transition: text-decoration-color 0.2s; }
.chapters__d { grid-column: 2; margin-top: 4px; font-size: 15.5px; line-height: 1.45; color: var(--ink-2); }
.chapters a::after { content: "↓"; position: absolute; right: 4px; top: 18px; font: 400 15px/1 var(--mono); color: var(--ink-3); transition: transform 0.3s var(--ease), color 0.2s; }
.chapters a:hover .chapters__t { text-decoration-color: var(--accent); }
.chapters a:hover::after, .chapters a:focus-visible::after { transform: translateY(3px); color: var(--ink); }
/* Téléphone : les seuls intitulés, en deux colonnes compactes ; les chapitres arrivent juste après. */
@media (max-width: 759px) {
  .chapters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); margin-top: 4px; }
  .chapters a { grid-template-columns: 26px minmax(0, 1fr); align-items: baseline; min-height: 48px; padding: 13px 22px 13px 0; border-top: 1px solid var(--rule); }
  .chapters li:first-child a { border-top: 0; }
  .chapters li:nth-child(2) a { border-top: 0; }
  .chapters__n { grid-row: 1; padding-top: 0; font-size: 12px; }
  .chapters__t { font-size: 17px; }
  .chapters__d { display: none; }
  .chapters a::after { top: 17px; right: 2px; font-size: 13px; }
}
@media (min-width: 760px) and (max-width: 1099px) {
  .chapters a { grid-template-columns: 56px minmax(0, 11fr) minmax(0, 9fr); align-items: baseline; }
  .chapters__n { grid-row: 1; }
  .chapters__d { grid-column: 3; margin-top: 0; padding-left: var(--gap); }
}
/* Grand écran : une bande de cinq cases, comme une table des matières. */
@media (min-width: 1100px) {
  .chapters { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 20px; border-block: 1px solid var(--rule); }
  .chapters a { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 20px 20px 24px; border-top: 0; }
  .chapters li + li a { border-left: 1px solid var(--rule); }
  .chapters li:first-child a { padding-left: 0; }
  .chapters__n { padding-top: 0; margin-bottom: 6px; }
  .chapters__t { font-size: 22px; }
  .chapters__d { margin-top: 0; font-size: 15px; }
  .chapters a::after { top: 20px; right: 18px; }
}

/* Accueil : le sol et les salles. Après le chapitre 01 (posé sur le fond du héros, qu'on ne touche pas),
   la page passe en fondu sur un sol un peu moins noir (.floor) ; chaque chapitre y est une pièce du
   coffre (.hall) : coins arrondis, lumière zénithale chaude, liseré sur l'arête haute, ombre portée, et
   un vrai vide de sol entre deux pièces. La fin est la dernière pièce ; le pied de page prolonge le sol.
   Dans une salle, les jetons suivent sa matière : --bg prend sa teinte (la copie du prix de la scène 03
   et les halos des pastilles s'y fondent), --raise et les filets deviennent translucides.
   Les scènes collantes (03, 04, 06) sont dans ces pièces : ni overflow (la salle 06 garde clip), ni
   transform, ni filter, ni contain sur .floor ou .hall, jamais (position: sticky et fixed en dépendent ;
   le rail, position: fixed, est aussi dans .floor). */
.floor { background: linear-gradient(var(--bg), var(--floor) clamp(200px, 24vw, 360px)) var(--floor); padding-bottom: var(--hall-gap); }
.floor > :is(.hall, .end) {
  --hall-c: var(--graphite); --hall-top: var(--graphite-top);
  position: relative;
  width: min(100% - 2 * var(--hall-x), var(--max) + 3 * var(--gutter));
  margin: var(--hall-gap) auto 0;
  padding-block: var(--hall-pad) calc(var(--hall-pad) * 0.78);
  border: 1px solid var(--hall-line);
  border-radius: var(--hall-r);
  background:
    radial-gradient(64% 520px at 50% -140px, var(--hall-light), transparent 78%),
    var(--grain),
    linear-gradient(var(--hall-top), var(--hall-c) 600px) var(--hall-c);
  box-shadow: inset 0 1px 0 var(--hall-edge), var(--hall-shadow);
  scroll-margin-top: 0;
}
/* Les jetons suivent la matière ; la salle 06 garde ceux de la salle des coffres (§10), dans les deux thèmes. */
.floor > :is(.hall--graphite, .hall--steel, .hall--sill, .end) {
  --bg: var(--hall-c); --raise: var(--hall-raise); --rule: var(--hall-rule); --rule-2: var(--hall-rule-2);
  --ink-2: var(--hall-ink-2); --ink-3: var(--hall-ink-3); --control: var(--hall-control); --accent-text: var(--hall-accent-text);
}
.floor > .hall:first-child { margin-top: 0; }
.floor > :is(.hall, .end) > .wrap { max-width: calc(var(--max) + 2 * var(--hall-in)); padding-inline: var(--hall-in); }
.floor > .hall--steel { --hall-c: var(--steel); --hall-top: var(--steel-top); }
.floor h2.t-display-l, .floor .cov__title { color: var(--title); }
/* Le sommaire n'est pas une pièce : un seuil bas entre la mise en route et les salles, sans lumière. */
.floor > .hall--sill {
  --hall-c: var(--sill); --hall-top: var(--sill);
  padding-block: clamp(24px, 2.6vw, 36px) clamp(20px, 2.2vw, 32px);
  border-radius: calc(var(--hall-r) - 6px);
  background: var(--hall-c);
  box-shadow: inset 0 1px 0 var(--plate-side), 0 1px 0 rgb(0 0 0 / 0.3);
}
.floor > .hall--sill .chapters { border-bottom: 0; }
@media (min-width: 1100px) { .floor > .hall--sill .chapters { border-top: 0; margin-top: 12px; } }

/* Les instruments : la preuve de chaque salle (le tableau du 03, la projection du 04, la grille du 05,
   les questions du 07) sur une plaque en léger relief : sol, salle, instrument. Dès 760 px seulement :
   sur téléphone, la salle suffit et la largeur est comptée. La plaque est d'une seule teinte, --bg :
   la copie du prix (03) qui la survole s'y fond exactement. Le relief tient au chanfrein et à l'ombre. */
@media (min-width: 760px) {
  .floor > .hall :is(.recon, .scene--proj > .scene__stage, .cov__board, .qa__list) {
    --bg: color-mix(in srgb, var(--hall-c), #fff var(--plate-mix));
    padding: clamp(20px, 2.4vw, 36px);
    border: 1px solid; border-color: var(--plate-hi) var(--plate-side) var(--plate-lo);
    border-radius: 14px;
    background: var(--bg);
    box-shadow: var(--plate-drop);
  }
  .floor > .hall .qa__list { padding-block: 4px 24px; }
  .floor > .hall .qa__list .faq-item:first-of-type { border-top: 0; }
  .motion .floor > .hall .qa--home.is-staged .faq-item:first-of-type summary::before { content: none; }
}

/* Rail des chapitres : grand écran, avec JS. Des tirets dans la marge ; le chapitre en cours porte le
   repère. Les intitulés apparaissent au survol ou au clavier. Masqué pendant le héros et à la fin.
   Position : toujours dans le vide de sol, à droite des salles, centré dans cette marge (--rail-m :
   le retrait des salles, ou plus quand leur largeur plafonne), au moins à 6 px de l'arête d'une salle et
   du bord de l'écran : quand la marge est étroite (1200 à 1440 px), le repère orange se raccourcit. Le balisage suit le dernier chapitre,
   pour ne pas s'intercaler au clavier entre le héros et le chapitre 01. */
.rail { display: none; }
@media (min-width: 1200px) {
  /* Les pourcentages de right se rapportent à la fenêtre (sans barre de défilement), comme la largeur des salles. */
  html.js .rail { --rail-m: max(var(--hall-x), (100% - var(--max) - 3 * var(--gutter)) / 2); display: block; position: fixed; z-index: 30; right: max(6px, (var(--rail-m) - 22px) / 2); top: 50%; transform: translateY(-50%); opacity: 0; pointer-events: none; transition: opacity 0.3s; }
  html.js .rail.is-shown, html.js .rail:focus-within { opacity: 1; pointer-events: auto; }
  .rail ol { padding-block: 6px; }
  .rail a { position: relative; display: flex; align-items: center; justify-content: flex-end; width: min(24px, var(--hall-x) - 6px); min-height: 28px; color: var(--ink-3); text-decoration: none; }
  .rail a::after { content: ""; width: 12px; height: 1px; background: currentColor; transition: width 0.3s var(--ease), background-color 0.2s; }
  .rail a:hover, .rail a:focus-visible { color: var(--ink); }
  .rail a[aria-current="true"] { color: var(--ink); }
  .rail a[aria-current="true"]::after { width: min(22px, var(--hall-x) - 12px); height: 2px; background: var(--accent); }
  .rail a:focus-visible { outline-offset: 0; }
  .rail__t { position: absolute; right: calc(100% + 8px); top: 50%; display: flex; gap: 10px; padding: 4px 9px; white-space: nowrap; border: 1px solid var(--rule); border-radius: 4px; background: var(--bg); font: 400 12.5px/1.4 var(--mono); color: var(--ink-2); opacity: 0; transform: translate(6px, -50%); pointer-events: none; transition: opacity 0.2s, transform 0.3s var(--ease); }
  .rail__n { color: var(--ink-3); }
  .rail a[aria-current="true"] .rail__t { color: var(--ink); }
  .rail:hover .rail__t, .rail:focus-within .rail__t { opacity: 1; transform: translate(0, -50%); pointer-events: auto; }
}

/* 5. Typographie ----------------------------------------------------------------------------- */
.t-display-xl { font-size: clamp(46px, 7vw, 108px); line-height: 0.92; font-weight: 560; font-stretch: 78%; letter-spacing: -0.035em; }
.t-display-l { font-size: clamp(36px, 5vw, 80px); line-height: 0.96; font-weight: 540; font-stretch: 80%; letter-spacing: -0.032em; }
.t-h2 { font-size: clamp(28px, 3.1vw, 46px); line-height: 1.04; font-weight: 520; font-stretch: 86%; letter-spacing: -0.024em; }
.t-h3 { font-size: clamp(20px, 1.7vw, 24px); line-height: 1.22; font-weight: 500; font-stretch: 94%; letter-spacing: -0.012em; }
.lead { font-size: clamp(18px, 1.35vw, 21px); line-height: 1.5; color: var(--ink-2); max-width: 32em; }
.t-display-l + .lead, .t-display-xl + .lead, .t-h2 + .lead { margin-top: 24px; }
.small, .demo { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.mono, .mono-in, .path { font-family: var(--mono); font-size: 0.82em; letter-spacing: 0.01em; }
.mono-in { color: var(--ink); }
.path { white-space: nowrap; color: var(--ink); }
@media (max-width: 759px) { .path { white-space: normal; overflow-wrap: anywhere; } }
.ink-2 { color: var(--ink-2); }
.num { font-family: var(--mono); font-weight: 500; font-size: 0.92em; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.muted { color: var(--ink-3); }
.todo { font-family: var(--mono); font-size: 0.92em; color: var(--accent-text); text-decoration: underline dashed 1px; text-underline-offset: 0.25em; white-space: nowrap; }
.more { margin-top: 32px; font-size: 16px; }
.numeral { display: block; font-size: clamp(132px, 16vw, 248px); line-height: 0.8; font-weight: 460; font-stretch: 75%; letter-spacing: -0.055em; margin-left: -0.04em; font-variant-numeric: lining-nums tabular-nums; }
/* Le repère : petit triangle orange, seule couleur du site (puce de note, bouton, onglet actif). */
.tick { position: relative; padding-left: 20px; color: var(--ink-2); font-size: 15.5px; max-width: 38em; }
.tick::before { content: ""; position: absolute; left: 1px; top: 0.62em; width: 8px; height: 7px; background: var(--accent); clip-path: polygon(0 0, 100% 0, 50% 100%); }
* + .tick { margin-top: 16px; }
.prose > * + * { margin-top: 18px; }
.prose > h2 + * { margin-top: 24px; }
.prose p, .prose li { max-width: 38em; color: var(--ink-2); }
.prose ul { display: grid; gap: 10px; }
.prose ul > li { position: relative; padding-left: 22px; }
.prose ul > li::before { content: ""; position: absolute; left: 2px; top: 0.66em; width: 6px; height: 6px; background: var(--ink-3); }
.prose a:not([class]), .legal-doc a:not([class]) { color: var(--ink); }

/* 6. En-tête, pied de page, boutons --------------------------------------------------------- */
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 17px; letter-spacing: -0.01em; text-decoration: none; color: var(--ink); }
.brand__mark { position: relative; width: 15px; height: 15px; border: 1.5px solid currentColor; border-radius: 50%; flex: none; }
.brand__mark::after { content: ""; position: absolute; left: 50%; top: -4px; width: 7px; height: 6px; margin-left: -3.5px; background: var(--accent); clip-path: polygon(0 0, 100% 0, 50% 100%); }

.mast { position: sticky; top: 0; z-index: 40; height: var(--mast-h); background: var(--bg); border-bottom: 1px solid transparent; transition: background-color 0.3s, border-color 0.3s; }
.js .mast { background: transparent; }
.js .mast.is-stuck { background: color-mix(in srgb, var(--bg) 84%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); border-bottom-color: var(--rule); }
/* Accueil : l'en-tête passe par-dessus le héros (transparent tant que le coffre est épinglé). */
.page-home .mast { margin-bottom: calc(-1 * var(--mast-h)); }
/* Accueil, scène 3D épinglée : l'en-tête s'efface en descendant (site.js). */
.js .mast.is-away { transform: translateY(-101%); }
.js .mast { transition: transform 0.35s var(--ease), background-color 0.3s, border-color 0.3s; }
.mast__in { height: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); display: flex; align-items: center; gap: 28px; }
.mast__nav { margin-left: auto; }
.mast__nav ul { display: flex; gap: 4px; }
.mast__nav a { position: relative; display: block; padding: 10px 12px; font-size: 15px; color: var(--ink-2); text-decoration: none; }
.mast__nav a:hover, .mast__nav a[aria-current="page"] { color: var(--ink); }
.mast__nav a[aria-current="page"]::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 6px; height: 5px; margin-left: -3px; background: var(--accent); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.mast__cta { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border: 1px solid var(--control); border-radius: 6px; font-size: 15px; color: var(--ink); text-decoration: none; transition: border-color 0.2s, background-color 0.2s; }
.mast__cta:hover { border-color: var(--ink); }
.mast__cta[aria-current="page"] { border-color: var(--ink); }
/* Sélecteur de langue : la page équivalente dans l'autre langue (site.js garde la section en cours).
   Mono, discret, la langue en cours marquée comme l'onglet actif. En mobile : dans le menu. */
.langs { display: flex; align-items: center; margin-left: -16px; font: 500 13px/1 var(--mono); letter-spacing: 0.04em; }
.langs a { position: relative; display: block; padding: 11px 6px; color: var(--ink-3); text-decoration: none; transition: color 0.2s; }
.langs a:hover, .langs a[aria-current] { color: var(--ink); }
.langs a[aria-current]::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 6px; height: 5px; margin-left: -3px; background: var(--accent); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.langs__sep { color: var(--rule-2); }
/* Tablettes et petits écrans d'ordinateur : nav, langues et bouton tiennent sur une ligne dès 760 px. */
@media (min-width: 760px) and (max-width: 1099px) {
  .mast__in { gap: 18px; }
  .mast__nav a { padding-inline: 8px; }
  .langs { margin-left: -10px; }
}
.menu { display: none; }
@media (max-width: 759px) {
  .mast__in { gap: 12px; }
  .mast__nav { display: none; }
  .mast__cta { margin-left: auto; }
  .menu { display: block; }
  .menu summary { list-style: none; display: flex; align-items: center; gap: 8px; min-width: 44px; height: 44px; padding: 0 2px 0 6px; cursor: pointer; font: 400 13px/1 var(--mono); color: var(--ink); }
  .menu summary::-webkit-details-marker { display: none; }
  .menu__icon { position: relative; width: 16px; height: 10px; border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transition: transform 0.3s var(--ease); }
  .menu[open] .menu__icon { border-bottom-color: transparent; transform: translateY(2px) rotate(45deg); }
  .menu[open] .menu__icon::after { content: ""; position: absolute; left: 0; right: 0; top: 3px; border-top: 1.5px solid currentColor; transform: rotate(-90deg); }
  .menu__panel { position: absolute; left: 0; right: 0; top: var(--mast-h); background: var(--bg); border-bottom: 1px solid var(--rule); padding: 8px var(--gutter) 24px; max-height: calc(100svh - var(--mast-h)); overflow-y: auto; }
  .menu__panel a { display: flex; align-items: center; min-height: 56px; border-bottom: 1px solid var(--rule); font-size: 22px; font-weight: 500; font-stretch: 90%; text-decoration: none; color: var(--ink); }
  .menu__panel a[aria-current="page"]::after { content: ""; width: 7px; height: 6px; margin-left: 12px; background: var(--accent); clip-path: polygon(0 0, 100% 0, 50% 100%); }
  .js .mast:has(.menu[open]) { background: var(--bg); }
  .langs { display: none; }
  .menu__langs { display: flex; gap: 2px; margin-top: 24px; padding: 2px; border: 1px solid var(--control); border-radius: 8px; }
  .menu__panel .menu__langs a { flex: 1; justify-content: center; min-height: 44px; border: 0; border-radius: 6px; font-size: 16px; font-weight: 500; font-stretch: 100%; color: var(--ink-2); }
  .menu__panel .menu__langs a[aria-current] { background: var(--ink); color: var(--on-ink); }
}

.btn {
  display: inline-flex; align-items: center; gap: 12px; height: 48px; padding: 0 22px;
  background: var(--ink); color: var(--on-ink); border-radius: 8px; font-weight: 560; font-size: 16px;
  text-decoration: none; white-space: nowrap; transition: background-color 0.25s;
}
.btn::after { content: ""; width: 7px; height: 6px; background: var(--accent); clip-path: polygon(0 0, 100% 0, 50% 100%); transition: transform 0.35s var(--ease); }
.btn:hover { background: color-mix(in srgb, var(--ink) 88%, var(--accent)); }
.btn:hover::after { transform: translateY(3px); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 32px; }

/* Le pied de page est un palier de sol (toutes les pages) : sur l'accueil, il prolonge celui des salles. */
.foot { border-top: 1px solid var(--rule); padding-block: 56px 40px; background: var(--floor); box-shadow: inset 0 1px 0 var(--hall-line); font-size: 14.5px; color: var(--ink-2); }
.foot__grid { row-gap: 40px; }
.foot__brand p { margin-top: 16px; max-width: 26em; }
.foot h2 { font-size: 14.5px; font-weight: 500; color: var(--ink-2); margin-bottom: 12px; }
.foot li + li { margin-top: 2px; }
.foot__nav a { display: inline-block; padding: 4px 0; text-decoration: none; color: var(--ink); }
.foot__nav a:hover { text-decoration: underline; text-decoration-color: var(--accent); }
.foot__legal { display: grid; gap: 6px; padding-top: 24px; border-top: 1px solid var(--rule); font-size: 13px; color: var(--ink-2); }
.foot__legal p { max-width: 70em; }
.foot__end { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; }
.foot__sign a { color: var(--ink); text-decoration: none; }
.foot__sign a:hover { text-decoration: underline; text-decoration-color: var(--accent); }
@media (max-width: 759px) {
  .foot__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; }
  .foot__grid > .foot__nav--a { grid-column: 1; }
  .foot__grid > .foot__nav--b { grid-column: 2; }
}
@media (min-width: 760px) {
  .foot__brand { grid-column: 1 / span 5; }
  .foot__nav--a { grid-column: 7 / span 3; }
  .foot__nav--b { grid-column: 10 / span 3; }
  .foot__legal { margin-top: 16px; }
}

/* 7. Héros 3D (accueil) ---------------------------------------------------------------------- */
/* Sans JS, sans WebGL 2, avec « réduire les animations » ou en économie de données : l'affiche
   (rendue depuis la scène), puis la capture du tableau de bord dans le flux.
   html.gl (boot.js) : la scène est épinglée et s'ouvre au défilement (src/js/hero.js).
   « Large » = au moins 760 px ET paysage (7/5) : le titre est posé sur la scène. Sinon (téléphone,
   tablette en portrait) : le titre passe au-dessus, puis la scène s'épingle sous lui. La même
   requête est dans src/js/vault/tiers.js (MQ.wide) et sur les <source> de l'affiche. */
.hero { position: relative; }
.hero__pin { position: relative; display: flex; flex-direction: column; }
.hero__scene { display: contents; }
.hero__canvas, .hero__says { display: none; }
.hero__copy { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; padding-top: calc(var(--mast-h) + 64px); padding-bottom: clamp(56px, 11vh, 120px); }
.hero__copy > * { flex: none; }
.hero__title { max-width: 7.6em; font-size: clamp(44px, 6.3vw, 100px); }
@media (max-width: 759px), (max-aspect-ratio: 1399/1000) { .hero__title { font-size: clamp(42px, 12.4vw, 72px); } }
/* Paysage peu allongé (7/5 à 3/2) : la porte occupe plus de largeur, le titre se resserre pour ne pas la toucher. */
@media (min-width: 760px) and (min-aspect-ratio: 7/5) and (max-aspect-ratio: 3/2) { .hero__title { font-size: clamp(44px, 5.5vw, 100px); } .hero__lead { max-width: min(29em, 38vw); } }
.hero__lead { margin-top: 28px; max-width: min(29em, 42vw); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 34px; }
.hero__meta { margin-top: 40px; color: var(--ink-2); font-size: 12.5px; }
.hero__poster img { width: 100%; height: 100%; object-fit: cover; }
.landing { position: relative; z-index: 2; width: min(100% - 2 * var(--gutter), 1180px); margin: 0 auto; }

@media (min-width: 760px) and (min-aspect-ratio: 7/5) {
  .hero__copy { min-height: 100vh; min-height: 100svh; }
  .hero__poster { position: absolute; inset: 0 0 auto; height: 100vh; height: 100svh; overflow: hidden; }
}
@media (max-width: 759px), (max-aspect-ratio: 1399/1000) {
  .hero__copy { padding-top: calc(var(--mast-h) + 40px); padding-bottom: 28px; }
  .hero__lead { max-width: 34em; margin-top: 22px; }
  .hero__meta { margin-top: 26px; }
  .hero__poster img { aspect-ratio: 1 / 1; object-position: 50% 42%; max-height: 82svh; }
  .landing { width: calc(100% - 32px); margin-top: 8px; }
}

/* Scène vivante (html.gl) */
html.gl .hero__scene { display: block; position: relative; overflow: hidden; container-type: size; }
html.gl .hero__poster { position: absolute; inset: 0; height: auto; }
html.gl .hero__poster img { height: 100%; max-height: none; aspect-ratio: auto; }
html.gl .hero__canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.4s ease; }
html.gl.gl-on .hero__canvas { opacity: 1; }
html.gl-on .hero__poster { visibility: hidden; transition: visibility 0s 0.45s; }
/* La capture nette : posée à son rectangle final ; hero.js la déforme sur l'écran 3D pendant le relais. */
html.gl .landing { position: absolute; z-index: 1; margin: 0; opacity: 0; transform-origin: 0 0; will-change: transform, opacity; backface-visibility: hidden; }
html.gl .landing .frame__pic, html.gl .landing .frame__pic img { width: 100%; height: 100%; object-fit: cover; }
html.gl-on .hero__says { display: block; position: absolute; z-index: 2; inset: auto 0 clamp(40px, 9vh, 104px); pointer-events: none; }
.hero__say { position: absolute; bottom: 0; left: var(--gutter); max-width: 13em; visibility: hidden; opacity: 0; will-change: transform, opacity; font-size: clamp(24px, 2.6vw, 40px); font-weight: 520; font-stretch: 84%; line-height: 1.06; letter-spacing: -0.022em; text-wrap: balance; }
.hero__say span { color: var(--ink-2); }
/* Les légendes passent sur le métal : une ombre douce, de la couleur de la page, les détache. */
html.gl-on .hero__say { text-shadow: 0 0 18px var(--bg), 0 0 36px var(--bg), 0 1px 2px color-mix(in srgb, var(--bg) 60%, transparent); }

@media (min-width: 760px) and (min-aspect-ratio: 7/5) {
  /* Épinglage de 1,6 écran, 1400 px au moins : le coffre s'ouvre dans le temps (hero.js) ; la piste
     tient la scène immobile pendant toute la lecture pour un lecteur qui fait un ou deux coups de
     trackpad (≈ 650 px chacun, quel que soit l'écran) ou une page (espace) ; le coup suivant emmène
     la capture posée avec la page. Plus vite, la page attend au bout la fin de l'ouverture (hero.js). */
  html.gl .hero { height: calc(100vh + max(160vh, 1400px)); height: calc(100svh + max(160svh, 1400px)); }
  html.gl .hero__pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
  html.gl .hero__scene { position: absolute; inset: 0; }
  html.gl .hero__copy { position: absolute; inset: 0; min-height: 0; pointer-events: none; will-change: transform, opacity; }
  html.gl .hero__copy > * { pointer-events: auto; }
  html.gl .hero__copy.is-gone > * { pointer-events: none; }
  html.gl .landing {
    --lw: min(1180px, 100cqw - 2 * var(--gutter), (100cqh - var(--mast-h) - 88px - var(--land-band)) * 1.6);
    left: 0; right: 0; margin-inline: auto;
    top: calc(var(--mast-h) + (100cqh - var(--mast-h) - var(--land-band) - var(--lw) / 1.6) / 2);
    width: var(--lw); height: calc(var(--lw) / 1.6);
  }
  /* La suite de la page remonte sous la capture posée : à p = 1, le repère 01/07 est à 32 px sous
     elle ; il entre par le bas pendant la dernière approche de la caméra (comme sur téléphone).
     Même calcul que --lw (100svh = 100cqh ici ; le terme 100vw ne limite jamais en paysage 7/5).
     Paire vh puis svh, sans propriété personnalisée : un svh non reconnu annule la seconde
     déclaration et garde la première. Fond transparent : la scène a déjà la couleur de la page.
     Seulement quand la scène dessine (gl-on) : tant qu'elle charge, le titre et ses boutons sont
     encore à l'écran et le chapitre 01 ne doit pas remonter par-dessus. */
  html.gl-on .sec--after-hero {
    position: relative; z-index: 3; padding-top: 24px;
    margin-top: calc((100vh - var(--mast-h) + var(--land-band) - min(1180px, 100vw - 2 * var(--gutter), (100vh - var(--mast-h) - 88px - var(--land-band)) * 1.6) / 1.6) / -2 + 8px);
    margin-top: calc((100svh - var(--mast-h) + var(--land-band) - min(1180px, 100vw - 2 * var(--gutter), (100svh - var(--mast-h) - 88px - var(--land-band)) * 1.6) / 1.6) / -2 + 8px);
  }
}
@media (max-width: 759px), (max-aspect-ratio: 1399/1000) {
  /* Le titre défile normalement ; la scène s'épingle quand elle atteint le haut de l'écran, pendant
     1,3 écran : la porte s'ouvre quand elle y est presque (hero.js), la piste la tient immobile après
     un ou deux coups de doigt ; plus vite, la page attend au bout la fin de l'ouverture (hero.js).
     --copy-h (hauteur du texte) est mesuré par hero.js. */
  html.gl .hero { height: calc(var(--copy-h, 64svh) + 230vh); height: calc(var(--copy-h, 64svh) + 230svh); }
  html.gl .hero__pin { position: sticky; top: calc(-1 * var(--copy-h, 64svh)); }
  html.gl .hero__scene { height: 100vh; height: 100svh; }
  html.gl .landing { --lw: calc(100cqw - 32px); left: 16px; width: var(--lw); height: calc(var(--lw) / 1.6); top: calc(46cqh - var(--lw) / 3.2); }
  html.gl-on .hero__says { inset: 24px 0 auto; }
  .hero__say { top: 0; bottom: auto; font-size: clamp(22px, 6.4vw, 30px); max-width: 12em; }
  /* La suite de la page remonte sous la capture posée (centrée à 46 % de la scène) au lieu
     d'attendre la fin de la scène : elle glisse par-dessus pendant le fondu final. */
  html.gl .sec--after-hero {
    position: relative; z-index: 3;
    margin-top: calc(-54vh + (100vw - 32px) / 3.2 + 24px); margin-top: calc(-54svh + (100vw - 32px) / 3.2 + 24px);
    padding-top: 56px; background: linear-gradient(to bottom, transparent, var(--bg) 56px);
  }
}

/* 8. Planches annotées ----------------------------------------------------------------------- */
.frame { position: relative; border-radius: 10px; box-shadow: var(--shadow); background: var(--raise); }
.frame__pic img { width: 100%; height: auto; border-radius: inherit; }
.frame::after { content: ""; position: absolute; inset: 0; border-radius: inherit; outline: 1px solid var(--rule); outline-offset: -1px; pointer-events: none; }
.frame > .frame__pic { border-radius: 10px; overflow: hidden; }
html.gl .landing .frame__pic, html.gl .landing .frame__pic img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 759px) { .frame, .frame > .frame__pic { border-radius: 8px; } }

.pins li, .pin { position: absolute; z-index: 2; width: 24px; height: 24px; margin: -12px 0 0 -12px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--on-ink); font: 500 12px/1 var(--mono); box-shadow: 0 0 0 4px color-mix(in srgb, var(--bg) 70%, transparent), 0 0 0 5.5px var(--accent); transition: transform 0.25s var(--ease), background-color 0.2s, color 0.2s; }
.pin.is-hot { transform: scale(1.15); background: var(--accent); color: var(--bg); }
@media (max-width: 759px) { .pins li, .pin { width: 20px; height: 20px; margin: -10px 0 0 -10px; font-size: 11px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--bg) 70%, transparent), 0 0 0 4.5px var(--accent); } }
/* Positions mesurées sur les captures 1440 × 900 (voir README) : à reprendre si l'application change. */
.pins--dash .p1 { left: 32.36%; top: 29.78%; }
.pins--dash .p2 { left: 44.44%; top: 64.78%; }
.pins--dash .p3 { left: 88.96%; top: 13.33%; }
.pins--dash .p4 { left: 83.68%; top: 29.33%; }
.pins--dash .p5 { left: 83.61%; top: 5.78%; }
.pins--wallets .p1 { left: 45.14%; top: 24.44%; }
.pins--ops .p1 { left: 78.54%; top: 50.44%; }
.pins--staking .p1 { left: 40.49%; top: 51.11%; }
/* Captures anglaises (src/assets/screens/en) : libellés de longueur différente, mêmes repères. */
html[lang="en"] .pins--dash .p5 { left: 85%; top: 9.6%; }
html[lang="en"] .pins--ops .p1 { left: 77.5%; }
html[lang="en"] .pins--staking .p1 { left: 43.19%; }

.notes { display: grid; grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); column-gap: var(--gap); margin-top: 32px; border-top: 1px solid var(--rule); }
.notes li { position: relative; display: flex; gap: 14px; padding: 18px 8px 20px 0; border-bottom: 1px solid var(--rule); font-size: 15.5px; line-height: 1.5; color: var(--ink-2); border-radius: 2px; transition: color 0.2s; }
.notes li.is-hot { color: var(--ink); }
.notes__n { flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin-top: 0.05em; border-radius: 50%; border: 1px solid var(--control); font: 500 11.5px/1 var(--mono); color: var(--ink); transition: background-color 0.2s, color 0.2s, border-color 0.2s; }
.notes li.is-hot .notes__n { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.notes__n--mark { border: 0; }
.notes__n--mark::before { content: ""; width: 8px; height: 7px; background: var(--accent); clip-path: polygon(0 0, 100% 0, 50% 100%); }
@media (min-width: 760px) {
  .notes--3, .notes--4 { --cols: 2; }
}
@media (min-width: 1100px) {
  .notes--3 { --cols: 3; }
  .notes--4 { --cols: 4; }
}
.demo { margin-top: 16px; }
.plate { margin-top: 48px; }
.plate figcaption .notes { margin-top: 28px; }
@media (min-width: 1100px) {
  .plate--bleed .frame { margin-right: calc(-1 * var(--gutter)); border-radius: 10px 0 0 10px; }
  .plate--bleed .frame > .frame__pic, .plate--bleed .frame::after { border-radius: 10px 0 0 10px; }
  .plate--bleed figcaption { padding-right: 0; }
}

/* Accueil : après l'atterrissage. */
.sec--after-hero { padding-top: 40px; }
.s1__title { margin-top: clamp(16px, 3vh, 40px); }
.sec--after-hero .notes { margin-top: clamp(36px, 5vh, 56px); }
@media (min-width: 1100px) { .s1__title { grid-column: 1 / span 9; } }
@media (min-width: 760px) { .sec--after-hero .notes, .sec--after-hero .demo { max-width: 1180px; margin-inline: auto; } }

/* Staking de l'accueil : positions repérées, détail agrandi ; la projection suit, sur toute la largeur. */
.srcs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.srcs li { padding: 6px 10px; border: 1px solid var(--rule-2); border-radius: 4px; font: 400 13px/1.4 var(--mono); color: var(--ink-2); }
.yield { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px var(--gap); }
.yield__aside { display: grid; gap: 24px; align-content: start; }
/* Le cadre ne montre que le tableau « Rendement par crypto » de la capture 2880 px : de l'en-tête
   des colonnes au bas de la carte (y 872 à 1418), sans le titre ni la ligne d'explication, qui serait
   coupée en plein milieu. À droite, on s'arrête entre deux colonnes, par langue : après
   « Récompenses 12 mois » (fin du texte x 1939 en français, 2002 en anglais), avec au moins 28 px de
   panneau vide sous le fondu ; la colonne suivante commence au-delà du cadre (x 2041 et 2101). */
.frame--zoom { aspect-ratio: 1517 / 546; overflow: hidden; }
.frame--zoom .frame__pic { position: absolute; inset: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - var(--fade, 28px)), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - var(--fade, 28px)), transparent); }
.frame--zoom .frame__pic img { width: 189.85%; max-width: none; margin-left: -32.83%; margin-top: -57.48%; border-radius: 0; }
html[lang="en"] .frame--zoom { aspect-ratio: 1582 / 546; }
html[lang="en"] .frame--zoom .frame__pic img { width: 182.05%; margin-left: -31.48%; margin-top: -55.12%; }
.pins--yield .p1 { left: 44.17%; top: 8.79%; }
html[lang="en"] .pins--yield .p1 { left: 45.89%; }
/* Téléphone : les trois premières colonnes seulement, jusqu'à « 30 j » / « 30 days » (texte fini à
   x 1151 et 1203, colonne suivante à 1218 et 1278), avec un fondu plus court. */
@media (max-width: 759px) {
  .frame--zoom { --fade: 16px; aspect-ratio: 697 / 546; }
  .frame--zoom .frame__pic img { width: 413.2%; margin-left: -71.45%; margin-top: -125.11%; }
  html[lang="en"] .frame--zoom { aspect-ratio: 752 / 546; }
  html[lang="en"] .frame--zoom .frame__pic img { width: 382.98%; margin-left: -66.22%; margin-top: -115.96%; }
  .pins--yield .p1 { left: 75.9%; }
  html[lang="en"] .pins--yield .p1 { left: 70.2%; }
}
.proj { width: 100%; height: auto; overflow: visible; }
.proj__axis { fill: none; stroke: var(--ink-3); stroke-width: 1.5; }
.proj__sans { fill: none; stroke: var(--ink-2); stroke-width: 1.5; stroke-dasharray: 5 6; }
.proj__avec { fill: none; stroke: var(--ink); stroke-width: 2; }
.proj__dot { fill: none; stroke: var(--accent); stroke-width: 8; stroke-linecap: round; } /* un point : trait de longueur nulle */
.proj__lbl { font: 400 17px var(--mono); fill: var(--ink-2); }
.proj__lbl--ink { fill: var(--ink); }
/* L'écart entre les deux courbes à 10 ans : le résultat, à l'accent. Le curseur ne sert qu'à la scène 04. */
.proj__gap { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.proj__cursor { display: none; fill: none; stroke: var(--rule-2); stroke-width: 1; }
.yield__notes { margin-top: 0; }
/* Accueil : la projection, seconde preuve du chapitre, grande et seule (scène 04 de stage.js). */
.scene--proj { margin-top: var(--sp-block); }
.scene--proj .demo { margin: 0 0 20px; font-family: var(--mono); font-size: 13px; }
/* Réglée sur la hauteur de l'écran, mais jamais sous 560 px (écran bas : les libellés restent lisibles). */
.scene--proj .proj { width: min(100%, 1080px, max(560px, (100vh - var(--mast-h) - 220px) * 2.83)); }
@supports (height: 1svh) { .scene--proj .proj { width: min(100%, 1080px, max(560px, (100svh - var(--mast-h) - 220px) * 2.83)); } }
.scene--proj .proj__lbl { font-size: 10.5px; }
.scene--proj .tick { margin-top: 24px; }
@media (max-width: 759px) {
  .scene--proj .proj { width: calc(100% + 2 * var(--gutter) - 8px); max-width: none; margin-inline: calc(4px - var(--gutter)); }
  .scene--proj .proj__lbl { font-size: 23px; }
  /* Plus haut sur téléphone : le tracé s'étire (×2,2 depuis l'axe, traits non étirés), pas les libellés,
     qui suivent les courbes. Le viewBox est calé en bas (xMidYMax) : le haut gagné est au-dessus de y 0. */
  .scene--proj .proj { aspect-ratio: 640 / 420; }
  .scene--proj .proj__plot { transform: scaleY(2.2); transform-origin: 0 190px; }
  .scene--proj .proj__plot path { vector-effect: non-scaling-stroke; }
  .scene--proj .proj__dot { stroke-width: 7px; }
  .scene--proj .proj__lbl--ink { transform: translateY(-187px); }
  .scene--proj .proj__lbl--sans { transform: translateY(-88px); }
}
@media (min-width: 1100px) {
  .yield { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .yield__zoom { grid-column: 1 / span 8; }
  .yield__aside { grid-column: 9 / -1; }
}
.proj-fig { margin-top: 48px; max-width: 640px; }
.proj-fig .proj { max-width: 560px; }

/* 9. Lignes à étiquette et étapes numérotées ------------------------------------------------- */
/* Fiches en bande (accueil) : étiquette mono sur un filet, texte court ; 3 ou 4 colonnes en large. */
.facts { display: grid; gap: 0 var(--gap); margin-top: var(--sp-block); }
.facts > div { padding: 14px 0 18px; border-top: 1px solid var(--rule-2); }
.facts dt { font: 500 12.5px/1.4 var(--mono); letter-spacing: 0.04em; color: var(--ink-3); }
.facts dd { margin-top: 8px; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); max-width: 30em; }
.facts .mono-in { white-space: nowrap; }
@media (min-width: 760px) {
  .facts--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .facts--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) { .facts--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.rows { margin-top: 48px; border-bottom: 1px solid var(--rule); }
.rows > div { padding: 20px 0; border-top: 1px solid var(--rule); }
.rows dt { font: 400 13px/1.5 var(--mono); color: var(--ink-3); letter-spacing: 0.01em; padding-top: 0.2em; }
.rows dd { margin-top: 4px; color: var(--ink-2); max-width: 38em; }
.rows dd strong { color: var(--ink); }
@media (min-width: 760px) {
  .rows > div { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); column-gap: var(--gap); }
  .rows dd { margin-top: 0; }
}
@media (min-width: 1100px) {
  .rows--2up { display: grid; grid-template-columns: 1fr 1fr; column-gap: calc(var(--gap) * 2); border-bottom: 0; }
  .rows--2up > div { grid-template-columns: minmax(0, 1fr); row-gap: 6px; border-bottom: 1px solid var(--rule); margin-bottom: -1px; }
}

.steps { margin-top: 48px; border-bottom: 1px solid var(--rule); }
.step { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 8px; padding: 24px 0 28px; border-top: 1px solid var(--rule); }
.step__n { position: relative; grid-row: 1 / span 2; padding-top: 0.55em; font: 500 13px/1 var(--mono); color: var(--ink-3); transition: color 0.3s; }
.step__t { font-size: clamp(20px, 1.7vw, 24px); line-height: 1.22; font-weight: 500; font-stretch: 94%; letter-spacing: -0.012em; transition: color 0.4s; }
.step__aside { margin-top: 12px; color: var(--ink-2); max-width: 33em; }
.step__aside > * + * { margin-top: 12px; }
.steps--big .step__t { font-size: clamp(26px, 3.3vw, 48px); line-height: 1.05; font-weight: 480; font-stretch: 86%; letter-spacing: -0.025em; }
.steps--big .step__n { padding-top: 0.9em; }
.steps--big .step__aside { margin-top: 16px; }
@media (min-width: 1100px) {
  .steps--big .step { grid-template-columns: 56px minmax(0, 11fr) minmax(0, 9fr); column-gap: 8px var(--gap); }
  .steps--big .step__n { grid-row: 1; }
  .steps--big .step__aside { grid-column: 3; grid-row: 1; margin-top: 0.45em; padding-left: var(--gap); font-size: 16px; }
}
/* Étape au centre de l'écran (site.js) : seul le repère et le titre changent ; le texte jamais. */
.js .steps--big .step:not(.is-on) .step__t { color: var(--ink-2); }
.step.is-on .step__n { color: var(--accent-text); }
.step__n::before { content: ""; position: absolute; left: -16px; top: calc(0.55em + 3px); width: 7px; height: 6px; background: var(--accent); clip-path: polygon(0 0, 100% 0, 50% 100%); transform: scale(0); transition: transform 0.4s var(--ease); }
.steps--big .step__n::before { top: calc(0.9em + 3px); }
.step.is-on .step__n::before { transform: scale(1); }
@media (max-width: 759px) {
  .step { grid-template-columns: 36px minmax(0, 1fr); padding: 22px 0 26px; }
  .step__n::before { display: none; }
}

/* 10. Salle des coffres (îlot sombre dans les deux thèmes) ----------------------------------- */
.room, .vault-plate {
  --ink: #edece7; --ink-2: #aeada7; --ink-3: #8e8d87; --rule: #2a2b30; --rule-2: #3c3d43; --control: #6c6b66;
  --accent: #ff7a3d; --accent-text: #ff7a3d; --on-ink: #121317; --bg: var(--slab);
  --title: #f4eee3; --num-lo: #8f8a82; --slot: rgb(0 0 0 / 0.45);
  --slot-in: inset 0 2px 5px rgb(0 0 0 / 0.7), inset 0 -1px 0 rgb(255 255 255 / 0.09), 0 1px 0 rgb(255 255 255 / 0.05);
  color-scheme: dark;
  background: var(--slab); color: var(--ink);
  border-top: 1px solid var(--room-edge);
}
/* clip, pas hidden : même découpe (coins, cadran), sans conteneur de défilement, sinon la scène 06
   (position: sticky) défile avec la salle. Safari < 16 garde hidden : la scène défile, rien ne casse. */
.room { position: relative; overflow: hidden; overflow: clip; isolation: isolate; margin-top: var(--chap-y); padding-block: var(--room-y); }
/* Grand écran : la salle déborde de moitié dans la marge, et son contenu retombe exactement sur les
   colonnes de la page (même bord gauche, même bord droit que les autres chapitres). */
@media (min-width: 1100px) {
  .room { margin-inline: calc(var(--gutter) / 2); border-radius: 20px; }
  .room > .wrap { max-width: calc(var(--max) + var(--gutter)); padding-inline: calc(var(--gutter) / 2); }
}
/* Accueil : la salle 06 est la pièce blindée du sol, la plus sombre (plus que le sol : on y descend).
   Un cadre d'acier en double filet, une ombre zénithale rentrante et quatre rivets juste dans le cadre,
   posés par-dessus (::after, sans pointeur) : le cadran gravé passe dessous ; les 24 cases dans un bac
   en creux. Même largeur que les autres salles (et que la salle d'avant jusqu'à 1500 px environ ;
   au-delà, plafonnée comme elles). */
.floor > .hall--vault {
  --hall-c: var(--vault); --hall-top: var(--vault-top); --bg: var(--vault);
  --frame: 14px;
  border-color: rgb(255 255 255 / 0.1);
  background:
    radial-gradient(56% 440px at 50% -160px, rgb(255 236 210 / 0.07), transparent 78%),
    url("../img/grain.svg"),
    linear-gradient(var(--hall-top), var(--hall-c) 520px) var(--hall-c);
  box-shadow: var(--hall-shadow);
}
.floor > .hall--vault::after {
  --rivet: radial-gradient(circle at 50% 50%, #c4c6cc 0 0.9px, #6d6f76 2.2px, #2c2d33 3.8px, #050506 4.8px, rgb(255 255 255 / 0.16) 5.4px, transparent 6.2px);
  --at: calc(var(--frame) + 5px);
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background:
    var(--rivet) var(--at) var(--at) / 14px 14px no-repeat,
    var(--rivet) calc(100% - var(--at)) var(--at) / 14px 14px no-repeat,
    var(--rivet) var(--at) calc(100% - var(--at)) / 14px 14px no-repeat,
    var(--rivet) calc(100% - var(--at)) calc(100% - var(--at)) / 14px 14px no-repeat;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.16),
    inset 0 0 0 var(--frame) #1f2025,
    inset 0 0 0 calc(var(--frame) + 1px) rgb(255 255 255 / 0.11),
    inset 0 0 0 calc(var(--frame) + 2px) rgb(0 0 0 / 0.75),
    inset 0 26px 36px -20px rgb(0 0 0 / 0.8);
}
@media (max-width: 759px) { .floor > .hall--vault { --frame: 7px; } }
.floor > .hall--vault .seed { padding: clamp(10px, 1.4vw, 20px); border-radius: 14px; background: linear-gradient(rgb(0 0 0 / 0.38), rgb(0 0 0 / 0.2)); box-shadow: inset 0 2px 8px rgb(0 0 0 / 0.7), inset 0 0 0 1px rgb(0 0 0 / 0.5), 0 1px 0 rgb(255 255 255 / 0.09); }
/* Le cadran gravé : centré sur le coin haut droit de la salle, il n'occupe que la marge haute, à droite
   du titre. Assez petit pour ne croiser aucun texte (ni le titre, ni la grille des 24 mots). */
.room__dial { position: absolute; z-index: -1; top: 0; right: 0; width: min(36vw, 440px); aspect-ratio: 1; color: var(--ink); opacity: 0.16; transform: translate3d(50%, calc(-50% + var(--py, 0px)), 0); pointer-events: none; }
@media (max-width: 759px) { .room__dial { display: none; } }
.dial { width: 100%; height: 100%; transform: rotate(var(--rot, 0deg)); }
.room__title { max-width: 11em; }
.room__lead { margin-top: 24px; }
.seed { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.seed li { position: relative; aspect-ratio: 2.6 / 1; border: 1px solid var(--rule-2); border-radius: 4px; background: rgb(0 0 0 / 0.16); box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.35); }
.seed span { position: absolute; left: 6px; top: 4px; font: 400 11px/1 var(--mono); color: var(--ink-3); }
.seed__say { color: var(--ink-2); }
/* Accueil : les 24 cases sous le chapô, en grand, avec leur phrase (scène 06 de stage.js). Fermées :
   filet plein, volet sombre en creux (plus foncé que la salle), numéro à l'encre. La page Sécurité
   garde sa grille. */
.scene--seed { margin-top: var(--sp-body); }
.room .seed { width: min(100%, 1040px); gap: 10px; }
.room .seed li { aspect-ratio: 2.4 / 1; background: rgb(0 0 0 / 0.32); box-shadow: inset 0 1px 3px rgb(0 0 0 / 0.45); }
.room .seed span { left: 10px; top: 8px; font-size: 13px; color: var(--ink); }
.room .seed__say { margin-top: 36px; max-width: 40em; font-size: clamp(18px, 1.4vw, 21px); }
.room .seed__say strong { display: block; margin-bottom: 12px; font-size: clamp(28px, 3vw, 46px); line-height: 1.05; font-weight: 520; font-stretch: 86%; letter-spacing: -0.024em; color: var(--ink); }
/* Trois paliers : la thèse (titre, chapô, 24 mots), l'inventaire (gardé | pas demandé), la fiche technique. */
.room__sub { font-size: 15px; font-weight: 500; color: var(--ink-2); padding-bottom: 14px; border-bottom: 1px solid var(--rule-2); }
.inventory { display: grid; gap: 32px; margin-top: var(--sp-body); }
.inventory li { padding: 13px 0; border-bottom: 1px solid var(--rule); font-size: 17px; line-height: 1.45; }
.inventory__col:last-child li { color: var(--ink-2); }
.room__sheet { margin-top: var(--sp-body); }
.room__sheet .facts { margin-top: 0; }
.room__sheet .facts > div { border-top: 0; }
@media (max-width: 759px) { .room__sheet .facts > div + div { border-top: 1px solid var(--rule); } }
@media (min-width: 760px) and (max-width: 1099px) { .room__sheet .facts > div:nth-child(n + 3) { border-top: 1px solid var(--rule); } }
.room__audit { border-top: 1px solid var(--rule); }
.room__audit > div { padding: 14px 0 0; }
.room__audit dt { font: 500 12.5px/1.4 var(--mono); letter-spacing: 0.04em; color: var(--ink-3); }
.room__audit dd { margin-top: 6px; color: var(--ink); }
@media (min-width: 760px) {
  .seed { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .inventory { grid-template-columns: 1fr 1fr; column-gap: var(--gap); }
  .room__audit > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); align-items: baseline; }
  .room__audit dd { margin-top: 0; }
}
@media (min-width: 1100px) {
  .room__title, .room__lead { grid-column: 1 / span 7; }
  .seed li { aspect-ratio: 1.9 / 1; }
  .room__audit > div { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .room__audit dd { grid-column: 2 / -1; }
}
/* Téléphone : la grille des 24 mots tient sur 6 colonnes de cases basses, et la fiche technique
   sur deux colonnes, en plus petit : même contenu, environ 300 px de moins. */
@media (max-width: 759px) {
  .seed { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
  .seed li { aspect-ratio: auto; height: 28px; }
  .seed span { left: 4px; top: 3px; font-size: 10px; }
  .room .seed { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .room .seed li { height: auto; aspect-ratio: 2.1 / 1; }
  .room .seed span { left: 7px; top: 6px; font-size: 11.5px; }
  .room .seed__say { margin-top: 24px; }
  .inventory { gap: 24px; }
  .inventory li { padding: 9px 0; font-size: 16px; }
  .room__sheet .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); }
  .room__sheet .facts > div { padding: 12px 0 14px; }
  .room__sheet .facts > div + div { border-top: 0; }
  .room__sheet .facts > div:nth-child(n + 3) { border-top: 1px solid var(--rule); }
  .room__sheet .facts dt { font-size: 12px; }
  .room__sheet .facts dd { margin-top: 4px; font-size: 14px; line-height: 1.45; }
  .room__sheet .facts .mono-in { font-size: 12px; white-space: normal; overflow-wrap: anywhere; }
}

/* 11. Tableaux ------------------------------------------------------------------------------- */
.sheet-wrap { margin-top: 48px; overflow-x: auto; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); }
@media (min-width: 1100px) { .sheet-wrap { -webkit-mask-image: none; mask-image: none; } }
.sheet { width: 100%; font-size: 16px; }
.sheet caption { caption-side: top; text-align: left; padding-bottom: 14px; font-size: 14.5px; color: var(--ink-2); }
.sheet thead th, .sheet thead td { font: 400 12.5px/1.4 var(--mono); color: var(--ink-3); text-align: left; padding: 0 16px 12px 0; border-bottom: 1px solid var(--rule-2); vertical-align: bottom; }
.sheet thead .num { text-align: right; }
.sheet tbody th, .sheet tbody td { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; color: var(--ink-2); }
.sheet tbody th[scope="row"] { font-weight: 500; color: var(--ink); white-space: nowrap; }
.sheet tbody .num { text-align: right; color: var(--ink); }
.sheet tbody tr { transition: background-color 0.15s; }
.sheet tbody tr:hover { background: var(--raise); }
.sheet + .small, .sheet-wrap + .small { margin-top: 16px; max-width: 42em; }

/* Rapprochement (accueil) : en grand, une idée (scène 03 de stage.js). L'en-tête reste en mono 12,5. */
.recon { display: grid; grid-template-columns: minmax(0, 1fr); }
.recon .sheet-wrap { margin-top: 0; }
.sheet--recon { min-width: 640px; font-size: clamp(17px, 1.5vw, 22px); }
.sheet--recon tbody td { padding-block: clamp(18px, 2vw, 30px); }
.sheet--recon tbody .num { font-size: clamp(20px, 1.75vw, 28px); }
.sheet--recon td.mono { font-size: clamp(14px, 1.1vw, 16px); color: var(--ink-2); white-space: nowrap; }
.sheet--recon .resolve__v { color: var(--accent-text); }
.sheet--recon tr.is-hit td { color: var(--ink); }
.sheet--recon tbody tr:hover { background: none; }
.recon__b { position: relative; width: 28px; padding: 0 !important; border-bottom-color: transparent !important; }
thead .recon__b { border-bottom-color: var(--rule-2) !important; }
.recon__b::after { content: ""; position: absolute; left: 6px; width: 10px; border-right: 1px solid var(--accent); }
.recon__b--top::after { top: 50%; bottom: 0; border-top: 1px solid var(--accent); }
.recon__b--mid::after { top: 0; bottom: 0; }
.recon__b--bot::after { top: 0; bottom: 50%; border-bottom: 1px solid var(--accent); }
.recon__b--mid::before { content: ""; position: absolute; left: 16px; top: 50%; width: 12px; border-top: 1px solid var(--accent); }
.recon__note { margin-top: 16px; font: 500 clamp(22px, 2vw, 30px)/1.15 var(--sans); letter-spacing: -0.015em; color: var(--ink); }
.recon__cap { margin-top: 8px; }
@media (min-width: 1100px) {
  .recon { grid-template-columns: minmax(0, 10fr) minmax(0, 2fr); column-gap: var(--gap); align-items: center; }
  .recon__note { margin-top: 0; padding-left: 4px; }
  .recon__cap { grid-column: 1 / -1; }
}
@media (max-width: 759px) {
  .recon .sheet-wrap { overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .sheet--recon { min-width: 0; display: block; }
  .sheet--recon thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .sheet--recon tbody { display: block; border-top: 1px solid var(--rule-2); }
  .sheet--recon tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; padding: 18px 0 18px 14px; border-bottom: 1px solid var(--rule); }
  .sheet--recon tbody td { padding: 0; border: 0; }
  .sheet--recon td:nth-child(1) { grid-column: 1; grid-row: 1; font-size: 12.5px; }
  .sheet--recon td:nth-child(2) { grid-column: 1; grid-row: 2; color: var(--ink); }
  .sheet--recon td:nth-child(3) { grid-column: 1; grid-row: 3; font-size: 14.5px; }
  .sheet--recon td:nth-child(4) { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .sheet--recon td:nth-child(5) { grid-column: 2; grid-row: 3; }
  .sheet--recon .recon__b { display: none; }
  .sheet--recon tr:nth-child(1), .sheet--recon tr:nth-child(3) { box-shadow: inset 2px 0 0 var(--accent); }
  .recon__note { margin-top: 20px; }
}
.resolve { position: relative; }
.resolve__q { position: absolute; right: 16px; top: 14px; color: var(--accent-text); opacity: 0; }
/* « prix ? » (et la copie qui voyage, 14 bis) : la boîte de texte exacte de la cellule. */
.sheet--recon .resolve__q { inset: 0; padding: inherit; display: flex; justify-content: flex-end; white-space: nowrap; }

/* Prix de revient (Fonctionnalités). */
.cost { margin-top: 40px; max-width: 720px; }
.cost__cap { color: var(--ink-2); font-size: 15.5px; max-width: 36em; }
.cost .sheet-wrap { margin-top: 20px; -webkit-mask-image: none; mask-image: none; }
.sheet--cost { font-size: 17px; }
.sheet--cost .num { width: 9.5em; }
.sheet--cost tbody th[scope="row"] { font-weight: 400; color: var(--ink-2); }
.sheet--cost .is-total th, .sheet--cost .is-total td { border-top: 1px solid var(--rule-2); border-bottom: 3px double var(--rule-2); font-weight: 500; color: var(--ink); }
.sheet--cost [data-col] { transition: color 0.3s; }
.cost[data-method="pmp"] [data-col="fifo"], .cost[data-method="fifo"] [data-col="pmp"] { color: var(--ink-2); }
.cost[data-method] tbody tr:hover { background: none; }
.cost__seg { margin-top: 24px; }

/* Segments (filtres, PMP | FIFO). */
.seg { display: inline-flex; border: 1px solid var(--control); border-radius: 8px; padding: 2px; gap: 2px; }
.seg__btn { min-height: 36px; padding: 0 14px; border: 0; border-radius: 6px; background: transparent; color: var(--ink-2); cursor: pointer; font-size: 15px; transition: background-color 0.2s, color 0.2s; }
.seg__btn:hover { color: var(--ink); }
.seg__btn[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }
@media (max-width: 759px) { .seg__btn { min-height: 44px; } }

/* 12. Tableau des 50 premières cryptos -------------------------------------------------------- */
.cov { row-gap: 56px; align-items: start; }
.cov__title { font-weight: 400; }
.cov__of { display: block; margin-top: 22px; font-size: clamp(22px, 2vw, 28px); line-height: 1.12; font-weight: 500; font-stretch: 88%; letter-spacing: -0.015em; max-width: 14em; }
.cov__text { margin-top: 20px; color: var(--ink-2); max-width: 28em; }
.source { margin-top: 24px; font: 400 13px/1.6 var(--mono); color: var(--ink-2); max-width: 34em; }
@media (min-width: 1100px) {
  .cov__side { grid-column: 1 / span 4; position: sticky; top: 112px; }
  .cov__board { grid-column: 6 / -1; }
}
/* Accueil : le texte à gauche (colonnes 1 à 4), le tableau à droite (5 à 12) avec sa légende-filtre
   juste au-dessus ; la source et le lien ferment la colonne de texte. En étroit : texte, légende,
   tableau, puis source et lien. */
.cov--home { row-gap: 0; }
.cov--home .cov__board { margin-top: var(--sp-body); }
.cov--home .cov__foot { margin-top: var(--sp-block); }
.cov--home .source { margin-top: 0; }
.cov--home .cov__foot .more { margin-top: 16px; }
.cov--home .legend { margin: 0 0 16px; max-width: none; }
.cov--home .board__cap { min-height: 3em; }
@media (min-width: 760px) {
  .cov--home .legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--rule); }
  .cov--home .legend li { border-bottom: 0; }
  .cov--home .legend li + li { border-left: 1px solid var(--rule); }
  .cov--home .legend__item { padding: 0 14px; }
  .cov--home .board__grid { grid-template-columns: repeat(10, minmax(0, 1fr)); }
}
@media (min-width: 760px) and (max-width: 1099px) {
  .cov--home .cov__side { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--gap); align-items: end; }
  .cov--home .cov__text { margin-top: 0; }
}
@media (min-width: 1100px) {
  /* Source et lien sous le tableau, sur toute la largeur : le lien ferme le chapitre, comme ailleurs. */
  .cov--home .cov__side { grid-column: 1 / span 4; grid-row: 2; position: static; }
  .cov--home .cov__board { grid-column: 5 / -1; grid-row: 2; margin-top: 0; }
  .cov--home .cov__foot { grid-column: 1 / -1; grid-row: 3; }
}

.mark { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--ink); }
.mark--full { background: var(--ink); }
.mark--partial { background: linear-gradient(90deg, var(--ink) 50%, transparent 50%); }
.mark--planned { border-color: var(--control); }

.legend { margin-top: 28px; max-width: 20em; border-top: 1px solid var(--rule); }
.legend li { border-bottom: 1px solid var(--rule); }
.legend__item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0 4px 0 0; font-size: 15.5px; color: var(--ink); background: none; border: 0; text-align: left; }
button.legend__item { cursor: pointer; }
button.legend__item:hover { background: var(--raise); }
.legend__n { margin-left: auto; font: 500 13px/1 var(--mono); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.legend__item[aria-pressed="true"] { background: var(--raise); }
.legend__item[aria-pressed="true"] .legend__label::after { content: ""; display: inline-block; width: 7px; height: 6px; margin-left: 10px; vertical-align: 0.15em; background: var(--accent); clip-path: polygon(0 0, 100% 0, 50% 100%); }

.board__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
@media (min-width: 1100px) { .board__grid { grid-template-columns: repeat(10, minmax(0, 1fr)); } }
.board__cell { position: relative; aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7%; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); transition: background-color 0.2s; }
.board__rank { position: absolute; left: 6px; top: 6px; font: 400 11px/1 var(--mono); color: var(--ink-3); }
.board__cell > .mark { position: absolute; right: 6px; top: 6px; width: 9px; height: 9px; border-width: 1.25px; }
.board__logo { width: 32%; height: auto; border-radius: 50%; transition: opacity 0.25s; }
.board__nologo { display: grid; place-items: center; width: 28%; aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--control); font: 400 12px/1 var(--mono); color: var(--ink-3); }
.board__sym { max-width: 88%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 12px/1.2 var(--mono); color: var(--ink-2); transition: color 0.25s; }
.board__cell.is-hot { background: var(--raise); box-shadow: inset 0 0 0 2px var(--accent); }
.board__cell:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; background: var(--raise); }
/* Légende pressée : seules les cases de ce statut gardent leur logo plein. */
.board[data-only] .board__cell:not(.is-match) .board__logo, .board[data-only] .board__cell:not(.is-match) .board__nologo, .board[data-only] .board__cell:not(.is-match) > .mark { opacity: 0.22; }
.board[data-only] .board__cell:not(.is-match) .board__sym { color: var(--ink-3); }
.board__cap { margin-top: 16px; min-height: 4.5em; font: 400 13px/1.5 var(--mono); color: var(--ink-2); }
.board__idle--touch, .board__hot:empty { display: none; }
.board__cap:has(.board__hot:not(:empty)) .board__idle { display: none; }
@media (hover: none) { .board__idle--hover { display: none; } .board__idle--touch { display: inline; } }
html:not(.js) .board__cap { display: none; }
@media (max-width: 400px) { .board__sym { font-size: 10.5px; } .board__rank { font-size: 10px; left: 4px; top: 4px; } .board__cell > .mark { right: 4px; top: 4px; } }

/* Questions. */
.qa { row-gap: 40px; align-items: start; }
.qa__list > .more { margin-top: 28px; }
.qa--home { row-gap: 0; }
@media (min-width: 1100px) {
  .qa__side { grid-column: 1 / span 4; }
  .qa__list { grid-column: 6 / -1; }
  .qa--home .qa__list, .qa--home .more { grid-column: 1 / span 8; }
}
.faq-item { border-top: 1px solid var(--rule); }
.faq-item:last-of-type { border-bottom: 1px solid var(--rule); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; padding: 24px 0; font-size: clamp(20px, 1.7vw, 24px); line-height: 1.22; font-weight: 500; font-stretch: 94%; letter-spacing: -0.012em; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: ""; flex: none; width: 13px; height: 13px; margin-top: 0.4em; background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat; color: var(--ink-3); transition: transform 0.4s var(--ease), color 0.2s; }
.faq-item summary:hover::after { color: var(--ink); }
.faq-item[open] summary::after { transform: rotate(45deg); color: var(--accent); }
.faq-a { padding: 0 3em 28px 0; color: var(--ink-2); max-width: 38em; }
.faq-a p + p { margin-top: 12px; }
.faq-a a { color: var(--ink); }
@media (max-width: 759px) { .faq-a { padding-right: 0; } }
@supports (interpolate-size: allow-keywords) {
  .motion .faq-item { interpolate-size: allow-keywords; }
  .motion .faq-item::details-content { height: 0; overflow: clip; transition: height 0.35s var(--ease), content-visibility 0.35s allow-discrete; }
  .motion .faq-item[open]::details-content { height: auto; }
}
.jump { display: none; }
@media (min-width: 1100px) {
  .jump { display: block; margin-top: 40px; }
  .jump ol { border-top: 1px solid var(--rule); }
  .jump a { display: block; padding: 7px 0; border-bottom: 1px solid var(--rule); font: 400 13px/1.45 var(--mono); color: var(--ink-2); text-decoration: none; }
  .jump a:hover { color: var(--ink); }
}

/* Fin de page. */
/* Le filet de fin s'arrête aux bords du contenu : seul le pied de page traverse toute la largeur. */
.end { padding-block: var(--sec-y); }
.chapter + .end, .chapter + .rail + .end { padding-top: var(--chap-y); }
/* Un vrai bord (et non un dégradé), pour que le filet reste visible en couleurs forcées. */
.end__grid { position: relative; align-items: center; row-gap: 40px; padding-top: var(--sp-body); }
.end__grid::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); border-top: 1px solid var(--rule-2); }
.end__dial { position: relative; width: 160px; }
.end__dial picture { display: block; }
.end__dial img { width: 100%; aspect-ratio: 1; border-radius: 50%; box-shadow: var(--shadow); }
.end__actions { margin-top: 32px; }
.end .lead { margin-top: 24px; }
@media (min-width: 760px) {
  .end__dial { grid-column: 1 / span 4; width: auto; max-width: 280px; }
  .end__copy { grid-column: 5 / -1; }
}
/* Accueil : la fin est la dernière pièce du sol (§4), une chambre éclairée : une lampe ambrée sur le
   cadran, comme au bout du héros. La pièce sépare déjà : pas de filet. */
.floor > .end {
  --hall-c: var(--lamp); --hall-top: var(--lamp-top);
  background:
    radial-gradient(min(520px, 80%) 380px at var(--lamp-at, clamp(120px, 20%, 340px) 50%), var(--lamp-glow), transparent 72%),
    radial-gradient(64% 520px at 50% -140px, var(--hall-light), transparent 78%),
    var(--grain),
    linear-gradient(var(--hall-top), var(--hall-c) 600px) var(--hall-c);
}
.floor > .end .end__grid { padding-top: 0; }
@media (max-width: 759px) { .floor > .end { --lamp-at: 30% 26%; } }
.floor > .end .end__grid::before { content: none; }
.floor > .end .end__dial img { box-shadow: var(--shadow), 0 0 140px -24px var(--lamp-glow-2); }

/* 13. Pages ---------------------------------------------------------------------------------- */
.phead { padding-top: clamp(56px, 12vh, 128px); padding-bottom: clamp(56px, 9vh, 104px); }
@media (min-width: 1100px) {
  .phead__title { grid-column: 1 / span 9; }
  .phead__lead { grid-column: 1 / span 7; }
}

/* Index latéral des pages longues. */
.doc { padding-bottom: var(--sec-y); row-gap: 0; }
.toc ol { display: flex; flex-wrap: wrap; gap: 4px 20px; padding-block: 16px; border-block: 1px solid var(--rule); }
.toc a { display: inline-flex; align-items: baseline; gap: 8px; min-height: 32px; padding-block: 6px; font: 400 13px/1.45 var(--mono); color: var(--ink-2); text-decoration: none; }
.toc a:hover { color: var(--ink); }
.toc__n { color: var(--ink-3); }
.toc a[aria-current="true"] { color: var(--ink); }
.chap { padding-top: clamp(72px, 11vh, 136px); }
.chap:first-child { padding-top: clamp(48px, 7vh, 88px); }
.chap > .rows--chap { margin-top: 48px; }
@media (min-width: 1100px) {
  .toc { grid-column: 1 / span 3; grid-row: 1 / span 20; }
  .toc ol { position: sticky; top: 112px; display: block; padding: 0; border: 0; border-top: 1px solid var(--rule); margin-top: clamp(48px, 7vh, 88px); }
  .toc li { border-bottom: 1px solid var(--rule); }
  .toc a { position: relative; display: flex; padding: 10px 0 10px 18px; }
  .toc a::before { content: ""; position: absolute; left: 1px; top: 50%; width: 7px; height: 6px; margin-top: -3px; background: var(--accent); clip-path: polygon(0 0, 100% 0, 50% 100%); transform: scale(0); transition: transform 0.4s var(--ease); }
  .toc a[aria-current="true"]::before { transform: scale(1); }
  .doc__body { grid-column: 4 / -1; }
  .doc__body .prose, .doc__body > .chap > .lead, .doc__body > .chap > .t-h2 { max-width: 46rem; }
}

/* Sécurité : la plaque des 24 mots et le schéma des flux. */
.vault-plate { position: relative; border-radius: 16px; padding: clamp(28px, 4vw, 56px); margin-top: clamp(48px, 7vh, 80px); display: grid; gap: 32px; }
.seedplate__copy p { margin-top: 16px; color: var(--ink-2); max-width: 36em; }
@media (min-width: 1100px) { .vault-plate { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; column-gap: 56px; } }

.flow { margin-top: 48px; }
.flow__bar { display: flex; justify-content: flex-end; margin-bottom: 16px; min-height: 0; }
.switch { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 4px; border: 0; background: none; cursor: pointer; font-size: 15.5px; color: var(--ink); }
.switch__track { position: relative; width: 40px; height: 24px; border-radius: 12px; border: 1px solid var(--control); transition: background-color 0.25s, border-color 0.25s; }
.switch__knob { position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink-2); transition: transform 0.3s var(--ease), background-color 0.25s; }
.switch[aria-checked="true"] .switch__track { background: var(--ink); border-color: var(--ink); }
.switch[aria-checked="true"] .switch__knob { transform: translateX(16px); background: var(--accent); }
.flow__grid { display: grid; gap: 32px; }
.flow__mac { border: 1px solid var(--rule-2); border-radius: 12px; padding: 20px; align-self: center; }
.flow__mac h3 { font-size: 15px; font-weight: 500; color: var(--ink-2); }
.flow__mac ul { margin-top: 14px; display: grid; gap: 8px; }
.flow__mac li { padding: 12px 14px; border-radius: 8px; background: var(--raise); font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.flow__mac b { display: block; font-weight: 600; color: var(--ink); font-size: 15.5px; }
.flow__core { position: relative; outline: 1px solid var(--rule-2); outline-offset: -1px; }
.wire { position: relative; display: grid; gap: 8px; padding: 0 0 24px 20px; border-left: 1px solid var(--ink-2); }
.wire--none { border-left: 1px dashed var(--control); }
.wire__what { font: 400 13px/1.45 var(--mono); color: var(--ink); }
.wire--none .wire__what { color: var(--ink-2); }
.wire__line { display: none; }
.wire__to { font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.wire__to b { display: block; font-size: 16px; font-weight: 600; color: var(--ink); }
.wire__tor { display: none; }
.flow__cap { margin-top: 24px; color: var(--ink-2); font-size: 15.5px; max-width: 42em; }
.flow__cap .tick { display: inline; padding-left: 18px; font-size: inherit; }
.flow__cap .tick::before { top: 0.5em; }
@media (min-width: 760px) {
  .flow__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 0; align-items: center; }
  .flow__core::after { content: ""; position: absolute; left: 100%; top: 50%; width: 21px; border-top: 1px solid var(--ink-2); }
  .flow__wires { position: relative; padding-left: 20px; }
  .wire { grid-template-columns: minmax(0, 1fr) minmax(0, 15em); column-gap: 20px; align-items: center; padding: 18px 0 18px 0; border-left: 0; }
  .wire::before { content: ""; position: absolute; left: -20px; top: 0; bottom: 0; border-left: 1px solid var(--ink-2); }
  .wire:first-child::before { top: 50%; }
  .wire:last-child::before { bottom: 50%; border-left-style: dashed; border-left-color: var(--control); }
  .wire--none { border-left: 0; }
  .wire__what { grid-column: 1; grid-row: 1; align-self: center; padding-right: 24px; transform: translateY(calc(-50% - 12px)); }
  .wire__line { display: block; position: relative; grid-column: 1; grid-row: 1; align-self: center; margin-left: -20px; border-top: 1px solid var(--ink-2); }
  .wire__line::after { content: ""; position: absolute; right: -1px; top: -5px; width: 7px; height: 9px; background: var(--ink-2); clip-path: polygon(0 0, 100% 50%, 0 100%); }
  .wire--none .wire__line { border-top: 1px dashed var(--control); width: 55%; }
  .wire--none .wire__line::after { width: 12px; height: 12px; top: -6px; right: -6px; background: linear-gradient(45deg, transparent calc(50% - 0.75px), var(--accent) calc(50% - 0.75px), var(--accent) calc(50% + 0.75px), transparent calc(50% + 0.75px)), linear-gradient(-45deg, transparent calc(50% - 0.75px), var(--accent) calc(50% - 0.75px), var(--accent) calc(50% + 0.75px), transparent calc(50% + 0.75px)); clip-path: none; }
  .wire__to { grid-column: 2; grid-row: 1; padding: 14px 16px; border: 1px solid var(--rule); border-radius: 10px; }
  .wire__tor { position: absolute; left: 40%; top: -12px; display: grid; place-items: center; height: 24px; padding: 0 10px; border-radius: 12px; background: var(--ink); color: var(--on-ink); font: 500 12px/1 var(--mono); opacity: 0; transform: scale(0.6); transition: opacity 0.3s, transform 0.4s var(--ease); }
  .flow.is-tor .wire__tor { opacity: 1; transform: scale(1); }
  .flow.is-tor .wire:not(.wire--none) .wire__line { border-top-style: solid; }
}

/* Statuts (Cryptos). */
.statuses { display: grid; margin-top: 40px; border-top: 1px solid var(--rule); }
.statuses > div { padding: 24px 0; border-bottom: 1px solid var(--rule); }
.statuses dt { display: flex; align-items: center; gap: 12px; font-size: clamp(20px, 1.7vw, 24px); font-weight: 500; font-stretch: 94%; letter-spacing: -0.012em; }
.statuses dt .mark { width: 12px; height: 12px; }
.statuses dd { margin-top: 10px; color: var(--ink-2); max-width: 30em; }
@media (min-width: 760px) {
  .statuses { grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--rule); }
  .statuses > div { padding: 24px 24px 28px; border-bottom: 0; border-left: 1px solid var(--rule); }
  .statuses > div:first-child { border-left: 0; padding-left: 0; }
}
.statuses + .tick { margin-top: 32px; }

/* Tableau des cryptos (Cryptos). */
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 32px; padding: 12px 0; background: var(--bg); }
.search { position: relative; display: flex; align-items: center; flex: 1 1 220px; max-width: 340px; height: 44px; border: 1px solid var(--control); border-radius: 8px; padding-left: 38px; color: var(--ink-2); }
.search .icon { position: absolute; left: 12px; top: 50%; margin-top: -8px; }
.search input { width: 100%; height: 100%; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 16px; outline: none; }
.search input::placeholder { color: var(--ink-3); }
.search:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.coin-count { margin-top: 12px; font: 400 13px/1.5 var(--mono); color: var(--ink-2); min-height: 1.5em; }
.coin-empty { padding: 32px 0; color: var(--ink-2); }
.coins-wrap { margin-top: 12px; }
.coins { width: 100%; font-size: 15.5px; }
.coins thead th { position: sticky; top: var(--mast-h); z-index: 3; background: var(--bg); font: 400 12.5px/1.4 var(--mono); color: var(--ink-3); text-align: left; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--rule-2); }
.coins td, .coins th[scope="row"] { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--rule); vertical-align: middle; text-align: left; color: var(--ink-2); }
.coins tbody tr:hover { background: var(--raise); }
.coins .c-rank { width: 3.5em; font-family: var(--mono); font-size: 13px; color: var(--ink-3); text-align: left; }
.coins th.c-name { font-weight: 500; color: var(--ink); }
.coin { display: flex; align-items: center; gap: 12px; }
.coin-logo { width: 24px; height: 24px; border-radius: 50%; flex: none; }
.coin-logo-empty { display: grid; place-items: center; border: 1px solid var(--control); font: 400 11px/1 var(--mono); color: var(--ink-3); }
.coin-sym { font: 400 12.5px/1 var(--mono); color: var(--ink-2); margin-left: 4px; }
.status { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; color: var(--ink); }
.c-label { display: none; }
.c-note { font-size: 14px; max-width: 30em; }
.c-via { white-space: nowrap; }
.yes { color: var(--ink); }
.coins-after { margin-top: 20px; max-width: 46em; }
@media (min-width: 1100px) {
  .filters { position: sticky; top: var(--mast-h); z-index: 4; }
  .js .coins thead th { top: calc(var(--mast-h) + 68px); }
}
@media (max-width: 759px) {
  .coins thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .coins, .coins tbody { display: block; }
  .coins tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 6px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
  .coins td, .coins th[scope="row"] { padding: 0; border: 0; }
  .coins .c-rank { display: none; }
  .coins .c-name { grid-column: 1; }
  .coins .c-status { grid-column: 2; justify-self: end; font-size: 14px; }
  .coins .c-via, .coins .c-staking { grid-column: 1 / -1; font-size: 14px; }
  .coins .is-empty { display: none; }
  .coins .c-note { grid-column: 1 / -1; font-size: 13.5px; }
  .coins .c-note:empty { display: none; }
  .c-label { display: inline-block; min-width: 5.5em; font: 400 12.5px/1.4 var(--mono); color: var(--ink-3); }
  .seg { flex-wrap: wrap; }
  .search { max-width: none; }
}

/* Téléchargement : la fiche. */
.phead--dl .grid { row-gap: 48px; align-items: start; }
.spec { border: 1px solid var(--rule-2); border-radius: 14px; padding: clamp(24px, 3vw, 36px); background: var(--raise); }
.spec__head { display: flex; align-items: center; gap: 18px; }
.spec__dial { width: 64px; flex: none; }
.spec__dial img { border-radius: 50%; }
.rows--spec { margin-top: 24px; }
.rows--spec > div { padding: 14px 0; }
@media (min-width: 760px) { .rows--spec > div { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); } }
/* Une ligne par plateforme : nom, puis état (« Bientôt » ou bouton) et configuration connue. */
.rows--plat > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: var(--gap); align-items: baseline; padding: 16px 0; }
.rows--plat dt { font: 500 17px/1.4 var(--sans); color: var(--ink); letter-spacing: 0; padding-top: 0; }
.rows--plat dd { margin-top: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.plat__btn { white-space: normal; max-width: 100%; height: auto; min-height: 48px; padding: 12px 18px; gap: 10px; }
/* Dès qu'un bouton est affiché, la colonne des noms se resserre pour lui laisser la place. */
.rows--plat:has(.plat__btn) > div { grid-template-columns: 6em minmax(0, 1fr); }
.rows--plat { container: plat / inline-size; }
/* Carte trop étroite pour un bouton à côté du nom (téléphone, tablette, 1100 px) : la ligne s'empile. */
@container plat (max-width: 379px) { .rows--plat:has(.plat__btn) > div { grid-template-columns: minmax(0, 1fr); row-gap: 10px; } }
.plat__soon { position: relative; padding-left: 18px; font: 500 14px/1.4 var(--mono); color: var(--ink); }
.plat__soon::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 8px; height: 7px; background: var(--accent); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.plat__req { font-size: 14px; line-height: 1.45; color: var(--ink-3); }
.plat__notes { margin-top: 24px; font-size: 14.5px; color: var(--ink-2); }
.plat__notes-t { font: 400 13px/1.5 var(--mono); color: var(--ink-3); margin-bottom: 6px; }
.spec .small { margin-top: 10px; }
.warn { margin-top: 20px; padding: 16px 18px; border: 1px solid var(--rule-2); border-radius: 10px; font-size: 14.5px; color: var(--ink-2); }
@media (min-width: 1100px) {
  .dl__copy { grid-column: 1 / span 6; }
  .spec { grid-column: 8 / -1; }
}
.limits { margin-top: 32px; border-top: 1px solid var(--rule); max-width: 46rem; }
.limits li { position: relative; padding: 16px 0 16px 28px; border-bottom: 1px solid var(--rule); color: var(--ink-2); }
.limits li::before { content: ""; position: absolute; left: 2px; top: calc(16px + 0.45em); width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--control); }

/* Pages légales. */
.legal { padding-bottom: var(--sec-y); }
.toc--legal { display: none; }
.legal-doc { max-width: 40em; font-size: 16.5px; line-height: 1.65; }
.legal-doc h2 { margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--rule); font-size: 26px; font-weight: 540; font-stretch: 90%; letter-spacing: -0.015em; line-height: 1.15; }
.legal-doc h2:first-child { margin-top: 0; }
.legal-doc h3 { margin-top: 32px; font-size: 19px; font-weight: 560; letter-spacing: -0.01em; }
.legal-doc > p, .legal-doc > ul, .legal-doc > dl { margin-top: 16px; }
.legal-doc ul { display: grid; gap: 10px; }
.legal-doc li { position: relative; padding-left: 22px; }
.legal-doc li::before { content: ""; position: absolute; left: 2px; top: 0.7em; width: 6px; height: 6px; background: var(--ink-3); }
.legal-doc dl.legal > div { padding: 14px 0; border-top: 1px solid var(--rule); }
.legal-doc dl.legal > div:last-child { border-bottom: 1px solid var(--rule); }
.legal-doc dl.legal dt { font: 400 13px/1.5 var(--mono); color: var(--ink-3); }
.legal-doc dl.legal dd { margin-top: 4px; }
.legal-doc__date { margin-top: 48px !important; font: 400 13px/1.5 var(--mono); color: var(--ink-3); }
@media (min-width: 760px) { .legal-doc dl.legal > div { display: grid; grid-template-columns: 12em minmax(0, 1fr); column-gap: 24px; } .legal-doc dl.legal dd { margin-top: 0; } }
@media (min-width: 1100px) {
  .toc--legal { display: block; grid-column: 1 / span 2; }
  .toc--legal ol { margin-top: 0; }
  .legal-doc { grid-column: 3 / span 8; }
}

/* 404. */
.lost__in { min-height: 70svh; align-content: center; row-gap: 40px; padding-block: 64px; }
.lost__dial { width: 160px; transform: rotate(-24deg); }
.lost__dial img { border-radius: 50%; box-shadow: var(--shadow); }
.lost .lead { margin-top: 24px; }
@media (min-width: 760px) {
  .lost__in { align-items: center; }
  .lost__dial { grid-column: 1 / span 3; width: 100%; max-width: 240px; }
  .lost__copy { grid-column: 5 / -1; }
}

/* Racine du site (x-default) : choix de la langue, affiché sans JavaScript (src/js/lang.js
   redirige sinon avant l'affichage). Puis la 404 de la racine, bilingue : lang.js pose
   html[data-lang] et seule la langue du navigateur reste (une règle par langue de locales.json). */
.pick__in { min-height: 100vh; min-height: 100svh; display: grid; align-content: center; row-gap: 40px; padding-block: 56px; }
.pick__dial { width: 112px; transform: rotate(-24deg); }
.pick__dial img { border-radius: 50%; box-shadow: var(--shadow); }
.pick__brand { margin-bottom: 28px; }
.pick__t { display: block; }
.pick__list { display: grid; gap: 12px; margin-top: 40px; max-width: 760px; }
.pick__opt { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 18px; row-gap: 6px; height: 100%; padding: 22px 24px 20px; border: 1px solid var(--rule-2); border-radius: 12px; background: var(--raise); color: var(--ink); text-decoration: none; transition: border-color 0.2s; }
.pick__opt:hover { border-color: var(--ink); }
.pick__code { grid-row: 1 / span 3; padding-top: 7px; font: 500 13px/1 var(--mono); letter-spacing: 0.04em; color: var(--accent-text); }
.pick__name { font-size: 26px; line-height: 1.15; font-weight: 540; font-stretch: 86%; letter-spacing: -0.016em; }
.pick__blurb { font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.pick__go { margin-top: 8px; font-size: 15px; font-weight: 560; }
.pick__go::after { content: " →"; display: inline-block; white-space: pre; transition: transform 0.3s var(--ease); }
.pick__opt:hover .pick__go::after { transform: translateX(4px); }
@media (min-width: 760px) {
  .pick__in { grid-template-columns: minmax(0, 200px) minmax(0, 1fr); column-gap: clamp(40px, 6vw, 96px); align-items: center; }
  .pick__dial { width: 100%; }
  .pick__list { grid-template-columns: 1fr 1fr; gap: 16px; }
}
.lost__t { display: block; }
html[data-lang] .lost__t { color: var(--ink); }
html[data-lang="fr"] [data-pick="en"], html[data-lang="en"] [data-pick="fr"] { display: none; }
html:not([data-lang]) .lost__alt { display: none; }

/* 14. Mouvement (html.motion : JS actif, sans « réduire les animations » ni économie de données) */
/* Levée : titres, cadres, tableaux. Jamais les paragraphes, toujours visibles. */
.motion [data-lift]:not(.is-in) { opacity: 0; transform: translateY(14px); }
.motion [data-lift] { transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); transition-delay: var(--d, 0ms); }
.motion [data-settle]:not(.is-in) { opacity: 0; transform: translateY(14px) scale(0.975); }
.motion [data-settle] { transition: opacity 0.6s var(--ease), transform 0.8s var(--ease); }
.motion .pins:not(.is-in) li { opacity: 0; transform: scale(0.6); }
.motion .pins li { transition: opacity 0.4s var(--ease), transform 0.5s var(--ease), background-color 0.2s, color 0.2s; transition-delay: calc(var(--i, 0) * 90ms + 300ms); }
.motion .pins.is-in li { animation: pin-pulse 0.7s var(--ease) both; animation-delay: calc(var(--i, 0) * 90ms + 450ms); }
.motion .pins li.is-hot { transition-delay: 0ms; }
@keyframes pin-pulse {
  0% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--bg) 70%, transparent), 0 0 0 5.5px var(--accent), 0 0 0 5.5px color-mix(in srgb, var(--accent) 60%, transparent); }
  100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--bg) 70%, transparent), 0 0 0 5.5px var(--accent), 0 0 0 16px transparent; }
}
.motion [data-resolve]:not(.is-in) .resolve__v { opacity: 0; transform: translateY(6px); }
.motion [data-resolve]:not(.is-in) .resolve__q { opacity: 1; }
.motion .resolve__v { display: inline-block; transition: opacity 0.5s var(--ease) 0.4s, transform 0.5s var(--ease) 0.4s; }
.motion .resolve__q { transition: opacity 0.3s 0.3s; }
.motion .board__grid:not(.is-in) .board__cell { opacity: 0; transform: translateY(6px); }
.motion .board__cell { transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), background-color 0.2s; transition-delay: calc(var(--i, 0) * 10ms); }
.motion .board__grid.is-in .board__cell { transition-delay: calc(var(--i, 0) * 10ms), calc(var(--i, 0) * 10ms), 0ms; }
.motion .board__grid.is-done .board__cell { transition-delay: 0ms; }
/* Repère de chapitre : le filet se trace, puis la marque ; le texte ne disparaît jamais. */
.motion [data-rule]:not(.is-in)::after, .motion [data-rule]:not(.is-in)::before { transform: scaleX(0); }
.motion [data-rule]::after { transition: transform 0.7s var(--ease); }
.motion [data-rule]::before { transition: transform 0.4s var(--ease) 0.45s; }
/* Barre de progression (site.js, 5 bis) : pas retracée depuis 0 ; elle apparaît déjà à (n-1)/7 (fondu),
   puis gagne son septième d'un trait (.is-on, 0,9 s, départ et arrivée doux) quand le repère passe aux deux tiers de l'écran ;
   sans .is-on, pas de transition sur la longueur : elle revient en place sans se voir. Tant qu'elle
   n'est pas apparue, elle attend à (n-1)/7. Sans JS ni animations, elle reste à n/7. */
.motion .kicker.is-fill::before { transform: scaleX(var(--fill)); transition: opacity 0.25s var(--ease) 0.1s; }
.motion .kicker.is-fill.is-on::before { transform: scaleX(var(--ch)); transition: opacity 0.25s var(--ease) 0.1s, transform 0.9s cubic-bezier(0.4, 0, 0.2, 1); }
.motion .kicker.is-fill:not(.is-in)::before { transform: scaleX(var(--fill)); opacity: 0; }
.motion .seed:not(.is-in) li { opacity: 0; }
.motion .seed li { transition: opacity 0.5s var(--ease); transition-delay: calc(var(--i, 0) * 18ms); }

/* 14 bis. Mises en scène des chapitres (stage.js, accueil). Les états de départ n'existent que sous
   .is-staged / [data-stage] / .is-mute, posés par le script : sans lui, tout est dans son état final. */
/* 03. Lignes 2 et 3 en retrait, « prix ? » en attente ; le prix d'achat s'allume, sa copie descend
   jusqu'à la réception, l'accolade se trace avec elle ; posé, le prix devient le résultat. stage.js écrit
   l'opacité des lignes. Sur téléphone, pas d'accolade : la barre de la 3e ligne arrive (--bar). */
.recon__chip { position: absolute; inset: 0; padding: inherit; display: flex; justify-content: flex-end; color: var(--accent-text); white-space: nowrap; pointer-events: none; opacity: 0; transform-origin: 100% 0; will-change: transform; }
/* Fond plein : la copie se détache de la source et couvre ce qu'elle survole (quantités, « prix ? »). */
.recon__chip > span { align-self: flex-start; background: var(--bg); box-shadow: 0 0 0 6px var(--bg); }
.motion .recon.is-staged tbody tr:nth-child(n+2) { opacity: 0.3; }
.motion .recon.is-staged tbody tr:first-child td:nth-child(5) { transition: color 0.3s; }
.motion .recon.is-staged.is-src tbody tr:first-child td:nth-child(5) { color: var(--accent-text); }
.motion .recon.is-staged .recon__b::after { transform: scaleY(var(--k, 0)); transform-origin: 50% 0; }
.motion .recon.is-staged .recon__b--mid::before { opacity: 0; transition: opacity 0.3s var(--ease); }
.motion .recon.is-staged.is-landed .recon__b--mid::before { opacity: 1; }
.motion .recon.is-staged tbody tr:nth-child(2) td:nth-child(5) { transition: opacity 0.2s; }
.motion .recon.is-staged.is-pass tbody tr:nth-child(2) td:nth-child(5) { opacity: 0.25; }
.motion .recon.is-staged .resolve__v { opacity: 0; transition: opacity 0.3s var(--ease); }
.motion .recon.is-staged .resolve__q { opacity: 1; transition: opacity 0.2s; }
.motion .recon.is-staged.is-landed .resolve__v { opacity: 1; }
.motion .recon.is-staged.is-near .resolve__q, .motion .recon.is-staged.is-landed .resolve__q { opacity: 0; }
.motion .recon.is-staged .recon__note { opacity: 0; transform: translateY(8px); transition: opacity 0.4s var(--ease), transform 0.5s var(--ease); }
.motion .recon.is-staged.is-said .recon__note { opacity: 1; transform: none; }
@media (max-width: 759px) {
  .motion .recon.is-staged tbody tr:nth-child(n+2) td:nth-child(4) { transition: opacity 0.2s; }
  .motion .recon.is-staged.is-going tbody tr:nth-child(n+2) td:nth-child(4) { opacity: 0.25; }
  .motion .recon.is-staged tbody tr:nth-child(3) { position: relative; box-shadow: none; }
  .motion .recon.is-staged tbody tr:nth-child(3)::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--accent); opacity: var(--bar, 0); }
}
/* 04. Un curseur balaie les dix ans : les deux courbes se découvrent derrière lui (clipPath), le point
   suit « avec réinvestissement » ; puis les libellés, puis l'écart à 10 ans (stage.js écrit la largeur
   découverte, le curseur, le point et l'écart). */
.motion .proj.is-staged .proj__cursor { display: inline; transition: opacity 0.3s; }
.motion .proj.is-staged.is-avec .proj__cursor { opacity: 0; }
.motion .proj.is-staged :is(.proj__lbl--ink, .proj__lbl--sans) { opacity: 0; transition: opacity 0.4s var(--ease); }
.motion .proj.is-staged.is-sans .proj__lbl--sans, .motion .proj.is-staged.is-avec .proj__lbl--ink { opacity: 1; }
/* 05. Le tableau se range par statut (même aspect que la légende pressée, en plus marqué), dans l'ordre
   du classement ; dans la légende, la pastille des statuts pas encore montrés s'estompe comme leurs
   cases (pas d'orange : rien n'est choisi ; aucun libellé atténué). */
.motion .board[data-stage] :is(.board__logo, .board__nologo, .board__cell > .mark, .board__sym, .board__rank) { transition: opacity 0.45s var(--ease); transition-delay: calc(var(--i, 0) * 12ms); }
.motion .board[data-stage="1"] .board__cell:not([data-support="full"]) :is(.board__logo, .board__nologo, .mark, .board__sym),
.motion .board[data-stage="2"] .board__cell[data-support="planned"] :is(.board__logo, .board__nologo, .mark, .board__sym) { opacity: 0.12; }
.motion .board[data-stage="1"] .board__cell:not([data-support="full"]) .board__rank,
.motion .board[data-stage="2"] .board__cell[data-support="planned"] .board__rank { opacity: 0.4; }
.motion .legend__item .mark { transition: opacity 0.3s var(--ease); }
.motion .legend__item.is-mute .mark { opacity: 0.22; }
/* 06. Les 24 cases sont des emplacements vides (pointillés, ligne d'écriture) ; un volet les ferme
   rangée par rangée (--s, écrit par stage.js) ; fermées, elles ont exactement l'aspect de base. */
.motion .room .seed.is-staged li { background: none; box-shadow: none; border-style: dashed; }
.motion .room .seed.is-staged li::before { content: ""; position: absolute; left: 14%; right: 14%; bottom: 30%; height: 1px; background: var(--ink-3); opacity: 0.5; }
.motion .room .seed.is-staged li::after { content: ""; position: absolute; inset: 0; border-radius: 3px; background: rgb(0 0 0 / 0.32); box-shadow: inset 0 1px 3px rgb(0 0 0 / 0.45), inset 0 -1px 0 rgb(255 255 255 / 0.1); transform: scaleY(var(--s, 0)); transform-origin: 50% 0; }
.motion .room .seed.is-staged span { z-index: 1; color: var(--ink-3); transition: color 0.3s; }
.motion .room .seed.is-staged li.is-shut { border-style: solid; }
.motion .room .seed.is-staged li.is-shut::after { box-shadow: inset 0 1px 3px rgb(0 0 0 / 0.45); }
.motion .room .seed.is-staged li.is-shut::before { opacity: 0; }
.motion .room .seed.is-staged li.is-shut span { color: var(--ink); }
.motion .room .seed.is-staged + .seed__say strong { color: var(--ink-2); transition: color 0.3s; }
.motion .room .seed.is-staged.is-said + .seed__say strong { color: var(--ink); }
/* 07. Les filets des questions se tracent l'un après l'autre (le dernier filet, en bas, reste fixe). */
.motion .qa--home.is-staged .faq-item { border-top-color: transparent; }
.motion .qa--home.is-staged .faq-item summary { position: relative; }
.motion .qa--home.is-staged .faq-item summary::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--rule); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.6s var(--ease); }
.motion .qa--home.is-staged .faq-item.is-ruled summary::before { transform: none; }
/* Fin. Le disque gradué (copie de l'image, découpée dans l'anneau sombre) revient à 0. */
.end__face { position: absolute; inset: 0; clip-path: circle(31.8% at 52.1% 49.9%); transform-origin: 52.1% 49.9%; pointer-events: none; will-change: transform; }
.end__face img { box-shadow: none; }

/* 14 ter. Scènes épinglées (stage.js) : l'étage (la preuve, à sa hauteur naturelle) est suivi dans sa
   piste (.scene) d'une courte longueur de défilement (::after) ; il colle centré dans l'écran sous
   l'en-tête (--sh : sa hauteur, écrite par stage.js ; avant elle, il colle sous l'en-tête). La scène se
   joue dans le temps, déclenchée à son arrivée : la piste ne fait que la tenir immobile le temps d'un
   coup de trackpad, sans faire « pédaler » le lecteur. Plus haut que l'écran (téléphone à l'horizontale) :
   calé sous l'en-tête. Pas de vide autour de la preuve hors épinglage.
   Sans html.pinned (pas de JS, animations réduites, couleurs forcées) ou à l'impression : hauteur
   naturelle, rien ne colle. Paire vh puis svh dans @supports : un var() dans un calc à unité inconnue
   serait invalide au calcul. */
.scene__stage { display: flow-root; }
@media screen {
  .motion.pinned .scene { position: relative; display: flow-root; }
  .motion.pinned .scene::after { content: ""; display: block; height: calc(var(--pin) * 1vh); }
  .motion.pinned .scene__stage { position: sticky; top: max(var(--mast-h), calc((100vh + var(--mast-h) - var(--sh, 100vh)) / 2)); }
  @supports (height: 1svh) {
    .motion.pinned .scene::after { height: calc(var(--pin) * 1svh); }
    .motion.pinned .scene__stage { top: max(var(--mast-h), calc((100svh + var(--mast-h) - var(--sh, 100svh)) / 2)); }
  }
}
/* Un quart à un tiers d'écran : la scène reste immobile ~90 % de sa lecture pour un lecteur au trackpad
   (coup, élan, pause) ; sans piste, elle bouge la moitié du temps ; plus long, le lecteur défile pour
   rien une fois la scène finie (essais WebKit, 1440 × 900 et 390 × 844). */
.scene--recon { --pin: 30; }
.scene--proj { --pin: 25; }
.scene--seed { --pin: 30; }
@media (max-width: 759px) {
  .scene--recon, .scene--proj, .scene--seed { --pin: 25; }
}
/* 06 : le cadran de la salle passe derrière les cases (copie posée par stage.js), centré sur la grille. */
.motion.pinned .room > .room__dial { display: none; }
.room__dial--stage { display: block; top: 50%; right: auto; left: min(50%, 520px); width: min(84vh, 760px); opacity: 0.13; transform: translate3d(-50%, -50%, 0); }
@supports (height: 1svh) { .room__dial--stage { width: min(84svh, 760px); } }
@media (max-width: 759px) { .room__dial--stage { display: block; width: min(110vw, 520px); opacity: 0.1; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation: none !important; }
}

/* 15. Préférences ---------------------------------------------------------------------------- */
@media (prefers-contrast: more) {
  :root { --ink-3: var(--ink-2); --rule: var(--control); --rule-2: var(--control); --hall-ink-3: var(--hall-ink-2); --hall-rule: var(--hall-control); --hall-rule-2: var(--hall-control); --hall-line: var(--control); }
  .room, .vault-plate { --ink-3: #aeada7; --rule: #6c6b66; }
}
@media (forced-colors: active) {
  .mark { border-color: currentColor; forced-color-adjust: none; }
  .mark--full { background: CanvasText; }
  .mark--partial { background: linear-gradient(90deg, CanvasText 50%, Canvas 50%); }
  :focus-visible { outline-color: Highlight; }
  .btn::after, .tick::before, .brand__mark::after, .kicker::before, .kicker::after, .rail a::after { background: CanvasText; forced-color-adjust: none; }
  .pins li { forced-color-adjust: none; }
  .board__cell.is-hot { outline: 2px solid Highlight; outline-offset: -2px; }
  /* Salles : les fonds disparaissent (les couleurs forcées gardent les dégradés et le grain : on les
     retire), les bords restent (panneaux, plaques, fente du numéro). */
  .floor, .floor > :is(.hall, .end), .floor > .hall :is(.recon, .scene--proj > .scene__stage, .cov__board, .qa__list),
  .floor > .hall--vault .seed, .room .seed li, .motion .room .seed.is-staged li::after { background-image: none; box-shadow: none; }
  .floor > :is(.hall, .end) { border: 1px solid CanvasText; }
  .kicker[data-ch] .kicker__n { background: none; -webkit-text-fill-color: currentColor; border: 1px solid CanvasText; }
  .floor > .hall--vault::after { content: none; }
}
/* Impression : encre sombre sur papier, partout (salle 06 comprise) ; ni sol, ni ombres, ni métal. */
@media print {
  :root, .room, .vault-plate, .floor > :is(.hall, .end) {
    color-scheme: light;
    --bg: #fff; --ink: #111215; --ink-2: #45464a; --ink-3: #5f5e59; --title: #111215; --rule: #d3d1c9; --rule-2: #a9a79f; --control: #86847d;
    --accent-text: #a8380a; --hall-line: #d3d1c9;
  }
  .floor, .foot, .floor > :is(.hall, .end), .floor > .hall :is(.recon, .scene--proj > .scene__stage, .cov__board, .qa__list), .floor > .hall--vault .seed,
  .room .seed li, .motion .room .seed.is-staged li::after, .floor > .end .end__dial img { background: none; box-shadow: none; }
  .floor > .hall--vault::after { content: none; }
  /* Rien ne reste en attente de révélation sur papier (site.js n'écoute pas beforeprint ; stage.js remet
     ses scènes à leur état final) : titres, cadres, repères, cases, tableau et filets sont imprimés. */
  .motion :is([data-lift], [data-settle], .pins li, .board__cell, .seed li, .resolve__v) { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
  .motion [data-resolve] .resolve__q { opacity: 0 !important; }
  .motion [data-rule]::after, .motion [data-rule]:not([data-ch])::before { transform: none !important; transition: none !important; }
  .motion [data-rule][data-ch]::before { transform: scaleX(var(--ch)) !important; opacity: 1 !important; transition: none !important; }
  .kicker[data-ch] .kicker__n { background: none; box-shadow: none; -webkit-text-fill-color: currentColor; border: 1px solid var(--rule-2); }
  .floor > :is(.hall, .end) { break-inside: auto; }
}