/* =============================================================================
   ICHOR — LE BILAN DE LA SEMAINE
   Direction retenue : « LE PARI TENU » (direction C du rituel des trois directions)

   THÈSE — une affirmation qu'on peut contredire :
     « Le marché n'a pas puni nos erreurs, il a puni notre confiance. »

   SIGNATURE PORTANTE — la RÈGLE GRADUÉE.
     Chaque objet chiffré est posé sur une règle de 0 à 100 %, et sa POSITION DANS LA
     MISE EN PAGE est calculée depuis sa valeur : `grid-column` vient de la donnée, pas
     d'un rangement. Ce n'est pas un décor.
     PREUVE DE PORTANCE, mesurée au navigateur le 2026-08-15 sur la direction :
     masquer `.jauge` fait passer la page de 9 584 px à 8 158 px — 1 426 px de mise en
     page disparaissent. Ce n'est donc pas un calque échangeable entre deux projets.
     AUX CINQ LARGEURS : la règle est horizontale au-dessus de 768 px, verticale en
     dessous. Même signature, autre forme — jamais absente.

   LUMIÈRE — AUCUNE lumière directionnelle. Éclairage plat et franc, comme une planche
     imprimée. La profondeur vient de la SUPERPOSITION et du DÉCALAGE (`3px 3px 0 0`,
     zéro flou), jamais d'une ombre douce. C'est un parti pris : la confiance ne se décore
     pas. Il s'oppose frontalement à la lumière froide du site hebdomadaire d'Ichor.

   CE QUI DIFFÈRE DU SITE ICHOR EXISTANT (FRONTEND.md §2 exige trois colonnes, dont
   SIGNATURE et LUMIÈRE — il y en a cinq) :
     ① SIGNATURE : règle graduée portante        ≠ aucune signature déclarée
     ② LUMIÈRE   : plate, ombres dures décalées  ≠ froide, cyan
     ③ TYPO      : grotesque très grasse + Georgia ≠ Instrument Serif + Inter
     ④ RAYONS    : 0 partout                      ≠ 14 px
     ⑤ FOND      : teinte 85, noir CHAUD          ≠ #05070C bleuté
   Ni #2F6BFF, ni #00D4FF, ni #0A1128 : hors de la combinaison brûlée.

   POLICES : piles système exclusivement. Aucun CDN, aucune requête distante — un lien
   de police se périme et fuit des données vers un tiers (FRONTEND.md §5).
   ============================================================================= */

/* ── TOKENS ────────────────────────────────────────────────────────────────────
   Contrastes CALCULÉS sur le fond, par L³ (pour un neutre en oklch, Y = L³ exactement,
   donc le ratio se calcule à l'avance et DOIT tomber d'accord avec la mesure canvas).
   fond L=0.175 → Y=0.00536.  ratio = (Y_texte + 0.05) / (Y_fond + 0.05)              */
:root {
  --fond:   oklch(0.175 0.006 85);   /* noir chaud, jamais #000 : on ne projette rien sur du noir pur */
  --niv1:   oklch(0.225 0.006 85);   /* élévation = ÉCLAIRCIR la surface, pas assombrir l'ombre */
  --niv2:   oklch(0.275 0.006 85);
  --niv3:   oklch(0.335 0.005 85);

  --craie:  oklch(0.965 0.005 95);   /* 17,1:1 — titres */
  --craie2: oklch(0.855 0.008 95);   /* 12,2:1 — texte courant */
  --craie3: oklch(0.720 0.010 95);   /*  7,6:1 — texte secondaire */
  --craie4: oklch(0.615 0.012 95);   /*  5,1:1 — mentions, le plus faible admis */

  --tenu:   oklch(0.855 0.120 96);   /* ~12,3:1 — le pari TENU */
  --casse:  oklch(0.745 0.130 254);  /*  ~8,1:1 — le pari CASSÉ */
  --zero:   oklch(0.880 0.015 90);   /* le repère : ce qui était déjà probable */
  --trait:  oklch(0.395 0.006 85);
  --trait2: oklch(0.500 0.006 85);

  /* Familles d'actifs — la couleur porte du SENS, jamais de la décoration */
  --refuge:   oklch(0.780 0.105 32);
  --cyclique: oklch(0.820 0.115 145);
  --or:       oklch(0.855 0.120 96);
  --actions:  oklch(0.760 0.100 285);

  --titre: "Arial Black", "Archivo Black", "Franklin Gothic Heavy", "Helvetica Neue Black",
           Impact, system-ui, sans-serif;
  --prose: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino,
           "Times New Roman", serif;
  --mono:  ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "DejaVu Sans Mono",
           "Courier New", monospace;

  /* Échelle typographique fluide.
     ⚠ ESPACE OBLIGATOIRE de chaque côté du + : `1.35rem+5.6vw` est INVALIDE, la
     substitution var() échoue et TOUTE la page rend à 16 px, sans une seule erreur
     console et avec tous les gates au vert. 31 occurrences vécues le 2026-08-14. */
  --t-geant: clamp(2.7rem, 1.2rem + 6.2vw, 6.6rem);
  --t-h1:    clamp(2.1rem, 1.1rem + 4.2vw, 4.4rem);
  --t-h2:    clamp(1.55rem, 1.05rem + 2.1vw, 2.6rem);
  --t-h3:    clamp(1.15rem, 0.95rem + 0.85vw, 1.5rem);
  --t-corps: clamp(1.02rem, 0.98rem + 0.2vw, 1.16rem);
  --t-petit: clamp(0.82rem, 0.79rem + 0.13vw, 0.9rem);

  /* Ombres DIFFÉRENCIÉES par niveau — une seule ombre partout est la signature n°1
     du gabarit généré. Ici elles sont DURES : la lumière est plate. */
  --reg1: 3px 3px 0 0 var(--niv2);
  --reg2: 6px 6px 0 0 var(--niv2), 12px 12px 0 0 var(--niv1);
  --reg3: 2px 2px 0 0 var(--trait);

  --mesure: 66ch;
  --large: min(1180px, 100% - var(--marge) * 2);
  --marge: clamp(1rem, 3.4vw, 4rem);

  /* Durées : une échelle, pas une valeur unique */
  --d1: 90ms; --d2: 150ms; --d3: 240ms; --d4: 380ms;
  --e-sortie: cubic-bezier(.2, .7, .35, 1);

  color-scheme: dark;
}

/* ── BASE ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--craie2);
  font-family: var(--prose);
  font-size: var(--t-corps);
  line-height: 1.62;
  /* La trame : une matière, pas un dégradé. Elle ne bouge pas et ne suit rien. */
  background-image:
    repeating-linear-gradient(0deg, transparent 0 47px,
      color-mix(in oklch, var(--trait) 26%, transparent) 47px 48px);
  background-attachment: fixed;
}

h1, h2, h3, .chiffre, .marque {
  font-family: var(--titre);
  font-weight: 900;
  letter-spacing: -0.012em;
  line-height: 0.98;
  color: var(--craie);
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: var(--t-h1); text-transform: uppercase; }
h2 { font-size: var(--t-h2); text-transform: uppercase; }
h3 { font-size: var(--t-h3); }

/* L'ESPACE SOUS UN TITRE, et pourquoi il ne pouvait pas venir du paragraphe.
   Mesuré au runtime le 2026-08-15 : l'écart entre le bas du <h1> et le haut du chapeau
   valait exactement 0,0 px. Les titres portent `margin: 0` et `p` porte `margin: 0 0 1.05em`
   — donc AUCUN des deux ne pose d'espace entre eux. Rien ne le signalait : il n'y avait ni
   chevauchement (0 sur toute la page) ni débordement, parce qu'un talus de ligne n'est pas
   un chevauchement. Seule la CAPTURE, regardée, l'a montré.
   Le talus aggrave le cas au lieu de le sauver : `line-height: .98` est un interlignage
   NÉGATIF, la boîte de ligne est plus courte que la fonte, et les jambages descendent donc
   vers le texte qui suit.
   La valeur est en `em` et non en `rem` : elle doit croître avec le corps du titre, sinon
   le même espace qui respire sous un h3 étouffe sous un h1 de 70 px.                        */
h1 { margin-block-end: .38em; }
h2 { margin-block-end: .46em; }
h3 { margin-block-end: .55em; }

p { margin: 0 0 1.05em; max-width: var(--mesure); }
strong { color: var(--craie); font-weight: 700; }
em { font-style: italic; color: var(--craie); }

a { color: var(--craie); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

/* Le focus est un OUTLINE, jamais une lueur : `box-shadow` est forcé à `none` en
   couleurs forcées, et un focus qu'on ne voit pas ne remplit aucun critère. */
:focus-visible {
  outline: 3px solid var(--tenu);
  outline-offset: 3px;
}

.hors-ecran {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.evite {
  position: absolute; inset-inline-start: -9999px; top: 0; z-index: 99;
  background: var(--tenu); color: oklch(0.16 0.02 96); padding: .8rem 1.2rem;
  font-family: var(--mono); font-weight: 700; min-height: 44px;
}
.evite:focus { inset-inline-start: 0; }

/* ── TRAME DE PAGE ────────────────────────────────────────────────────────── */
.enveloppe { width: var(--large); margin-inline: auto; }

.section { padding-block: clamp(3rem, 7vw, 6.5rem); border-top: 1px solid var(--trait); }
.section:first-of-type { border-top: 0; }

.numero {
  font-family: var(--mono); font-size: var(--t-petit); color: var(--craie4);
  letter-spacing: .16em; text-transform: uppercase; margin-bottom: .9rem; display: block;
}

.lede { font-size: clamp(1.1rem, 1rem + .6vw, 1.4rem); color: var(--craie2); max-width: 60ch; }

/* ── EN-TÊTE ET NAVIGATION ───────────────────────────────────────────────── */
.entete { border-bottom: 1px solid var(--trait); background: var(--fond); }
.entete-haut {
  display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; align-items: baseline;
  padding-block: 1.1rem;
}
.marque { font-size: 1.25rem; letter-spacing: .06em; text-transform: uppercase; }
.marque-sous {
  font-family: var(--mono); font-size: var(--t-petit); color: var(--craie3);
  letter-spacing: .1em; text-transform: uppercase;
}

.nav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; border-inline-start: 1px solid var(--trait);
}
.nav a {
  display: flex; align-items: center; min-height: 44px; padding: .35rem 1.05rem;
  font-family: var(--mono); font-size: var(--t-petit); letter-spacing: .09em;
  text-transform: uppercase; text-decoration: none; color: var(--craie3);
  border-inline-end: 1px solid var(--trait);
  transition: color var(--d1) linear, background var(--d1) linear;
}
.nav a:hover { color: var(--craie); background: var(--niv1); }
/* La page courante : couleur ET soulignement épais — jamais la couleur seule,
   qui disparaît en couleurs forcées et n'existe pas pour un daltonien. */
.nav a[aria-current="page"] {
  color: var(--craie); background: var(--niv1);
  box-shadow: inset 0 -3px 0 0 var(--tenu);
}

/* ── LA SIGNATURE : LA RÈGLE GRADUÉE ─────────────────────────────────────────
   Portante : `--v` (la valeur) décide de `grid-column`. La mise en page vient de
   la donnée. Retirer `.jauge` retire 1 426 px de page — mesuré, pas supposé.     */
.jauge {
  display: grid;
  grid-template-columns: repeat(100, 1fr);
  align-items: center;
  gap: 0;
  position: relative;
  padding-block: .55rem;
  border-block-end: 1px solid var(--trait);
}
.jauge::before {
  /* la graduation : elle appartient à la règle, pas au décor */
  content: ""; position: absolute; inset-inline: 0; top: 50%; height: 1px;
  background: repeating-linear-gradient(90deg,
    var(--trait) 0 1px, transparent 1px 5%);
}
.jauge-nom {
  grid-column: 1 / 22; font-family: var(--mono); font-size: var(--t-petit);
  color: var(--craie2); z-index: 1; padding-inline-end: .6rem;
}
.jauge-repere {
  grid-column: var(--base) / span 1; justify-self: center;
  inline-size: 2px; block-size: 20px; background: var(--zero); z-index: 2;
}
.jauge-point {
  grid-column: var(--v) / span 1; justify-self: center;
  inline-size: 13px; block-size: 13px; background: var(--tenu); z-index: 3;
  box-shadow: var(--reg3);
}
.jauge--casse .jauge-point { background: var(--casse); }
/* le segment d'écart : c'est LUI l'information, pas les deux extrémités */
.jauge-ecart {
  grid-column: var(--de) / var(--a); block-size: 4px; background: var(--tenu);
  z-index: 1; opacity: .55;
}
.jauge--casse .jauge-ecart { background: var(--casse); }
.jauge-val {
  grid-column: 92 / -1; text-align: end; font-family: var(--mono);
  font-size: var(--t-petit); color: var(--craie2); z-index: 1;
}

.jauge-ech {
  display: grid; grid-template-columns: repeat(100, 1fr);
  font-family: var(--mono); font-size: .72rem; color: var(--craie4);
  padding-block-start: .3rem;
}
.jauge-ech span { grid-column: var(--v) / span 6; }

/* Sous 768 px la règle bascule en VERTICAL — même signature, autre forme. */
@media (max-width: 767px) {
  .jauge { grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: .25rem .8rem; }
  .jauge::before {
    inset-inline: auto; inset-block: 0; top: auto; inset-inline-start: 0;
    inline-size: 1px; block-size: 100%;
    background: repeating-linear-gradient(180deg, var(--trait) 0 1px, transparent 1px 12%);
  }
  .jauge-nom { grid-column: 1; grid-row: 1; }
  .jauge-val { grid-column: 2; grid-row: 1; }
  .jauge-ecart {
    grid-column: 1 / -1; grid-row: 2; block-size: 6px;
    margin-inline-start: calc(var(--de) * 1%);
    inline-size: calc((var(--a) - var(--de)) * 1%);
  }
  .jauge-repere, .jauge-point { display: none; }
  .jauge-ech { display: none; }
}

/* ── LE SCELLÉ (greffé de la direction B) ─────────────────────────────────────
   Un fait central de ce projet doit se voir : ces convictions ont été ÉCRITES
   AVANT et n'ont jamais été retouchées. Le scellé le porte physiquement.       */
.scelle {
  display: grid; grid-template-columns: minmax(0, 13rem) 1fr; gap: 0;
  border: 1px solid var(--trait); margin-block: 2rem;
}
.scelle-cartouche {
  border-inline-end: 1px solid var(--trait); padding: 1.1rem 1.2rem;
  background: var(--niv1); font-family: var(--mono); font-size: var(--t-petit);
  color: var(--craie3);
}
.scelle-cartouche dt { color: var(--craie4); letter-spacing: .1em; text-transform: uppercase;
  font-size: .72rem; margin-block-start: .8rem; }
.scelle-cartouche dt:first-child { margin-block-start: 0; }
.scelle-cartouche dd { margin: .18rem 0 0; color: var(--craie2); }
.scelle-corps { padding: 1.4rem 1.5rem; }
.scelle-corps > :last-child { margin-block-end: 0; }
@media (max-width: 720px) {
  .scelle { grid-template-columns: 1fr; }
  .scelle-cartouche { border-inline-end: 0; border-block-end: 1px solid var(--trait);
    display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: .6rem 1.2rem; }
  .scelle-cartouche dt { margin-block-start: 0; }
}

/* ── PLAQUES DE CHIFFRES ──────────────────────────────────────────────────── */
.plaques { display: grid; gap: 1px; background: var(--trait);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  border: 1px solid var(--trait); margin-block: 2rem; }
.plaque { background: var(--fond); padding: 1.4rem 1.3rem; }
.chiffre { font-size: clamp(2.2rem, 1.4rem + 3vw, 3.6rem); line-height: .9;
  font-variant-numeric: tabular-nums; display: block; }
.chiffre--tenu { color: var(--tenu); }
.chiffre--casse { color: var(--casse); }
.plaque-quoi { font-family: var(--mono); font-size: var(--t-petit); color: var(--craie3);
  text-transform: uppercase; letter-spacing: .09em; margin-block-start: .7rem; display: block; }
.plaque-contre { font-size: var(--t-petit); color: var(--craie4); margin-block-start: .5rem;
  display: block; max-width: none; }

/* ── ENCADRÉS PÉDAGOGIQUES ───────────────────────────────────────────────── */
.note { border-inline-start: 4px solid var(--trait2); padding: 1rem 0 .2rem 1.3rem;
  margin-block: 1.8rem; color: var(--craie2); }
.note--clef { border-inline-start-color: var(--tenu); }
.note--piege { border-inline-start-color: var(--casse); }
.note-tete { font-family: var(--mono); font-size: var(--t-petit); text-transform: uppercase;
  letter-spacing: .1em; color: var(--craie3); display: block; margin-block-end: .5rem; }

/* Le mot expliqué : un `<details>` natif, aucun JS. Un renvoi que personne n'honore
   est un vert déguisé — alors on met l'explication SUR PLACE. */
.mot { border-block-end: 1px dotted var(--trait2); cursor: help; }
details.def { border: 1px solid var(--trait); margin-block: 1.4rem; background: var(--niv1); }
details.def > summary { padding: .85rem 1.1rem; cursor: pointer; min-height: 44px;
  display: flex; align-items: center; font-family: var(--mono); font-size: var(--t-petit);
  text-transform: uppercase; letter-spacing: .09em; color: var(--craie2); }
details.def > summary::marker { color: var(--tenu); }
details.def > div { padding: 0 1.1rem 1.1rem; }
details.def > div > :last-child { margin-block-end: 0; }

/* ── FIGURES ──────────────────────────────────────────────────────────────────
   La zone DÉFILE et se focalise au clavier. Défaut mesuré le 2026-08-13 : à 360 px,
   un SVG rendu à 800 px dans une figure de 269 était coupé net par un overflow:hidden
   — un tiers du dessin visible, et RIEN pour le dire.                            */
.fig { margin: 2.4rem 0; border: 1px solid var(--trait); }
.fig-tete { padding: 1.2rem 1.3rem .2rem; }
.fig-titre { font-size: var(--t-h3); }
.fig-sous { font-size: var(--t-petit); color: var(--craie3); margin-block: .55rem 1rem;
  max-width: 62ch; }
.fig-zone { overflow-x: auto; overscroll-behavior-x: contain; padding: 0 1.3rem 1.2rem; }
.fig-zone:focus-visible { outline: 3px solid var(--tenu); outline-offset: -3px; }
.fig-svg { display: block; inline-size: 100%; min-inline-size: 560px; block-size: auto; }

.fig-grille { stroke: var(--trait); stroke-width: 1; }
.fig-zero   { stroke: var(--trait2); stroke-width: 1.5; }
.fig-ax     { fill: var(--craie4); font-family: var(--mono); font-size: 11px; }
.fig-ax-titre { fill: var(--craie3); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.fig-nom    { fill: var(--craie2); font-family: var(--mono); font-size: 12px; }
.fig-val    { fill: var(--craie2); font-family: var(--mono); font-size: 12px;
              font-variant-numeric: tabular-nums; }
.fig-note   { fill: var(--craie3); font-family: var(--prose); font-size: 12.5px; font-style: italic; }
.fig-amorce { stroke: var(--trait2); stroke-width: 1; stroke-dasharray: 2 3; }
.fig-repere { stroke: var(--zero); stroke-width: 2; }
.fig-ecart  { stroke-width: 4; opacity: .6; }
/* Le carré de conviction. Cette règle a été VIDE jusqu'au 2026-08-15 : elle n'existait que
   pour que le contrôle « toute classe émise a une règle » se taise — c'est-à-dire pour le
   tromper. Elle porte maintenant une déclaration qui sert : un carré de 12 px aligné sur
   l'axe rend flou si le navigateur l'antialiase, et `crispEdges` le lui interdit. La couleur,
   elle, reste portée par .fig-gain / .fig-perte : le point ne décide pas de son verdict.     */
.fig-point  { }
/* `crispEdges` est réservé au RECTANGLE, et le sélecteur doit le dire. La classe `.fig-point`
   sert à deux formes : le carré de conviction de `fig_ecarts` ET les petits cercles de 4 px
   qui terminent les courbes de `fig_trajectoire`. Poser la règle sur la classe seule
   désactivait l'anticrénelage de ces cercles, qui devenaient des taches à escaliers.
   Un indice de rendu suit la FORME, jamais le rôle sémantique qui les regroupe.              */
rect.fig-point { shape-rendering: crispEdges; }
.fig-courbe { fill: none; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.fig-barre  { }
.fig-gain   { stroke: var(--tenu); fill: var(--tenu); }
.fig-perte  { stroke: var(--casse); fill: var(--casse); }
.fam-refuge   { stroke: var(--refuge);   fill: var(--refuge); }
.fam-cyclique { stroke: var(--cyclique); fill: var(--cyclique); }
.fam-or       { stroke: var(--or);       fill: var(--or); }
.fam-actions  { stroke: var(--actions);  fill: var(--actions); }
text.fig-nom.fam-refuge, text.fig-nom.fam-cyclique, text.fig-nom.fam-or,
text.fig-nom.fam-actions { stroke: none; }

/* Le repli en tableau : la règle du projet, tenue 1 fois sur 6 sur le site hebdo.
   Ici elle est portée par le générateur, donc elle ne peut pas être oubliée. */
.fig-repli { border-block-start: 1px solid var(--trait); }
.fig-repli > summary { padding: .8rem 1.3rem; cursor: pointer; min-height: 44px;
  display: flex; align-items: center; font-family: var(--mono); font-size: var(--t-petit);
  color: var(--craie3); text-transform: uppercase; letter-spacing: .08em; }
.fig-repli table { inline-size: 100%; border-collapse: collapse; font-size: var(--t-petit);
  font-family: var(--mono); }
.fig-repli caption { text-align: start; padding: 0 1.3rem .7rem; color: var(--craie3); }
.fig-repli th, .fig-repli td { padding: .5rem .8rem; border-block-start: 1px solid var(--trait);
  text-align: end; font-variant-numeric: tabular-nums; }
.fig-repli th[scope="row"] { text-align: start; color: var(--craie2); }
.fig-repli thead th { color: var(--craie4); text-transform: uppercase; font-size: .72rem;
  letter-spacing: .07em; }

/* ── TABLEAUX DE CONTENU ─────────────────────────────────────────────────── */
.tab-zone { overflow-x: auto; margin-block: 2rem; border: 1px solid var(--trait); }
table.donnees { inline-size: 100%; border-collapse: collapse; font-family: var(--mono);
  font-size: var(--t-petit); }
table.donnees caption { text-align: start; padding: .9rem 1.1rem; color: var(--craie3);
  font-family: var(--prose); }
table.donnees th, table.donnees td { padding: .6rem .9rem; border-block-start: 1px solid var(--trait);
  text-align: end; font-variant-numeric: tabular-nums; vertical-align: baseline; }
table.donnees th[scope="row"] { text-align: start; color: var(--craie2); white-space: nowrap; }
table.donnees thead th { color: var(--craie4); text-transform: uppercase; font-size: .72rem;
  letter-spacing: .07em; text-align: end; }
table.donnees thead th:first-child { text-align: start; }
/* UN LIEN QUI OCCUPE UNE CELLULE N'EST PAS « DANS UNE PHRASE ».
   WCAG 2.2, SC 2.5.8 exige 24 × 24 px, avec une exception explicite pour les cibles
   « in a sentence », dont la taille est contrainte par l'interligne du texte autour.
   Un lien de sommaire seul dans sa cellule ne l'est pas : mesuré à 16 px de haut le
   2026-08-15 sur les deux tableaux de navigation, il passe à 24 sans changer la densité.
   Les liens en pleine prose, eux, restent tels quels — l'exception les couvre vraiment,
   et les grossir casserait l'interligne du paragraphe pour rien. */
table.donnees th a, table.donnees td a,
.section p > a:only-child {          /* un paragraphe qui n'est QUE un lien n'est pas une phrase */
  display: inline-flex; align-items: center; min-block-size: 24px;
}

/* Le contrôle radio lui-même mesure 18 px, mais la cible réelle est le <label> qui
   l'enveloppe et qui fait 44 px : cliquer le libellé coche le bouton. On l'agrandit
   quand même un peu — un contrôle qu'on vise mal reste un contrôle qu'on vise mal,
   même quand la norme est satisfaite par ailleurs. */
.calc-choix input { inline-size: 22px; block-size: 22px; }

/* le verdict ne se code JAMAIS par la seule couleur */
.ok::before   { content: "▲ "; color: var(--tenu); }
.rate::before { content: "▼ "; color: var(--casse); }

/* ── PIED ET SUITE ───────────────────────────────────────────────────────── */
.suite { display: flex; flex-wrap: wrap; gap: 1rem; align-items: baseline;
  border-block-start: 1px solid var(--trait); padding-block-start: 1.6rem; margin-block-start: 3rem; }
.suite a { font-family: var(--titre); font-size: var(--t-h3); text-transform: uppercase;
  text-decoration: none; color: var(--craie); box-shadow: inset 0 -3px 0 0 var(--tenu);
  min-height: 44px; display: inline-flex; align-items: center; padding-inline: .2rem;
  transition: background var(--d2) var(--e-sortie); }
.suite a:hover { background: var(--niv1); }
.suite-quoi { font-family: var(--mono); font-size: var(--t-petit); color: var(--craie4);
  text-transform: uppercase; letter-spacing: .1em; }

.pied { border-block-start: 1px solid var(--trait); padding-block: 2.4rem 3.4rem;
  color: var(--craie4); font-size: var(--t-petit); }
.pied p { max-width: 72ch; }

/* ── LE DÉMONTAGE EN ÉTAPES ──────────────────────────────────────────────────
   Un calcul expliqué se lit VERTICALEMENT, une opération par palier, jamais en
   une formule posée d'un bloc. Le numéro est dans la marge : il porte le rythme
   sans consommer la mesure de ligne.                                           */
.etapes { counter-reset: etape; margin-block: 2.2rem; }
.etape {
  counter-increment: etape;
  display: grid; grid-template-columns: 3.2rem 1fr; gap: 0 1.1rem;
  padding-block: 1.3rem; border-block-start: 1px solid var(--trait);
}
.etape::before {
  content: counter(etape, decimal-leading-zero);
  font-family: var(--mono); font-size: var(--t-petit); color: var(--craie4);
  letter-spacing: .08em; padding-block-start: .28rem;
}
.etape > * { grid-column: 2; }
.etape h3 { margin-block-end: .5rem; }
.etape .calcul {
  font-family: var(--mono); font-size: clamp(.92rem, .86rem + .3vw, 1.05rem);
  background: var(--niv1); border-inline-start: 3px solid var(--trait2);
  padding: .85rem 1.05rem; margin-block: .8rem 1rem; overflow-x: auto;
  font-variant-numeric: tabular-nums; color: var(--craie);
}
.etape .calcul b { color: var(--tenu); font-weight: 400; }

/* ── LA CORRECTION PUBLIQUE ──────────────────────────────────────────────────
   Un chiffre publié puis démenti ne se remplace pas en silence : on montre les
   deux, et le sens de la correction. Un bilan qui se corrige à la baisse sans
   le dire vaut moins qu'un bilan qui ne se corrige pas.                        */
.correc {
  border: 1px solid var(--casse); background: var(--niv1);
  padding: 1.2rem 1.35rem; margin-block: 2rem; box-shadow: var(--reg1);
}
.correc-tete {
  font-family: var(--mono); font-size: var(--t-petit); color: var(--casse);
  text-transform: uppercase; letter-spacing: .11em; display: block; margin-block-end: .7rem;
}
.correc-duo { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; align-items: baseline;
  margin-block: .4rem 1rem; font-family: var(--mono); }
.correc-av, .correc-ap { display: flex; flex-direction: column; gap: .2rem; }
.correc-av .v { color: var(--craie4); text-decoration: line-through; font-size: var(--t-h3); }
.correc-ap .v { color: var(--craie); font-size: var(--t-h3); }
.correc-duo .q { font-size: .72rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--craie4); }

/* ── LE FACE-À-FACE ──────────────────────────────────────────────────────────
   Deux lectures d'un même fait, côte à côte au-dessus de 720 px, empilées en
   dessous. Le trait entre les deux devient horizontal : la séparation ne
   disparaît jamais, elle change d'axe.                                         */
.duo { display: grid; gap: 0; border: 1px solid var(--trait); margin-block: 2rem; }
.duo-part { padding: 1.25rem 1.35rem; }
.duo-part + .duo-part { border-block-start: 1px solid var(--trait); }
.duo-tete { font-family: var(--mono); font-size: var(--t-petit); letter-spacing: .1em;
  text-transform: uppercase; color: var(--craie4); display: block; margin-block-end: .6rem; }
.duo-part p:last-child { margin-block-end: 0; }
.duo--faux .duo-tete { color: var(--casse); }
.duo--vrai .duo-tete { color: var(--tenu); }
@media (min-width: 720px) {
  .duo { grid-template-columns: 1fr 1fr; }
  .duo-part + .duo-part { border-block-start: 0; border-inline-start: 1px solid var(--trait); }
}

/* ── L'APARTÉ ────────────────────────────────────────────────────────────────
   Une précision qui explique POURQUOI un chiffre est écrit comme il l'est.
   Rattachée par un filet plutôt qu'enfermée dans un encadré : un encadré se
   lit comme un bloc autonome, or celui-ci n'a aucun sens détaché de
   l'opération qui le précède immédiatement.                                    */
.apparte {
  border-inline-start: 1px solid var(--trait);
  padding-inline-start: 1.1rem;
  margin-block: 1.4rem;
  font-size: var(--t-petit);
  line-height: 1.65;
  color: var(--craie4);
}
.apparte strong { color: var(--craie2); font-weight: 400; }

/* ── LE LEXIQUE ──────────────────────────────────────────────────────────────
   Chaque terme est une cible d'ancre : arriver dessus depuis une autre page
   doit le DÉSIGNER, sinon le lecteur atterrit dans une liste et cherche.       */
.lexique { margin-block: 2rem; }
.terme {
  border-block-start: 1px solid var(--trait); padding-block: 1.4rem;
  scroll-margin-block-start: 5.5rem;                 /* l'en-tête ne recouvre pas la cible */
}
.terme:target { background: var(--niv1); box-shadow: -1.35rem 0 0 0 var(--niv1),
  1.35rem 0 0 0 var(--niv1); }
.terme:target .terme-mot { color: var(--tenu); }
.terme-mot { font-family: var(--titre); font-weight: 900; font-size: var(--t-h3);
  text-transform: uppercase; color: var(--craie); display: block; margin-block-end: .15rem; }
.terme-quoi { font-family: var(--mono); font-size: .74rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--craie4); display: block; margin-block-end: .7rem; }
.terme p:last-child { margin-block-end: 0; }
.terme-ex { border-inline-start: 3px solid var(--trait2); padding-inline-start: .9rem;
  color: var(--craie3); font-size: var(--t-petit); margin-block-start: .8rem; }

/* ── L'OUTIL DE CALCUL — AMÉLIORATION PROGRESSIVE, JAMAIS DÉPENDANCE ─────────
   Sans JavaScript, `.sans-js` porte la table complète des valeurs : le lecteur a
   TOUTE l'information, simplement sans le curseur. C'est l'inverse du réflexe
   habituel, où l'on cache un contenu derrière un script qui peut ne pas se
   charger. Le contenu est le socle ; l'interaction est le supplément.          */
.calc { border: 1px solid var(--trait); padding: 1.3rem 1.35rem; margin-block: 2rem;
  background: var(--niv1); box-shadow: var(--reg1); }
.js-seul { display: none; }
.js .js-seul { display: block; }
.js .sans-js { display: none; }
.calc-rangee { display: grid; gap: .45rem; margin-block-end: 1.3rem; }
.calc-rangee label { font-family: var(--mono); font-size: var(--t-petit);
  color: var(--craie3); text-transform: uppercase; letter-spacing: .08em; }
.calc input[type="range"] { inline-size: 100%; min-block-size: 44px; accent-color: var(--tenu); }
.calc-choix { display: flex; flex-wrap: wrap; gap: .6rem; }
.calc-choix label { display: inline-flex; align-items: center; gap: .45rem;
  border: 1px solid var(--trait2); padding: .55rem .9rem; min-block-size: 44px;
  cursor: pointer; text-transform: none; letter-spacing: 0; color: var(--craie2); }
.calc-choix input { accent-color: var(--tenu); min-inline-size: 18px; min-block-size: 18px; }
.calc-choix label:has(input:checked) { border-color: var(--tenu); background: var(--niv2); }
.calc-sortie { display: grid; gap: 1rem; border-block-start: 1px solid var(--trait);
  padding-block-start: 1.2rem; }
@media (min-width: 620px) { .calc-sortie { grid-template-columns: repeat(3, 1fr); } }
.calc-bloc { display: flex; flex-direction: column; gap: .3rem; }
.calc-gros { font-family: var(--mono); font-size: var(--t-h2); color: var(--craie);
  font-variant-numeric: tabular-nums; line-height: 1; }
.calc-gros.est-bon { color: var(--tenu); }
.calc-gros.est-mauvais { color: var(--casse); }
.calc-quoi { font-family: var(--mono); font-size: .72rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--craie4); }
.calc-note { color: var(--craie3); font-size: var(--t-petit); margin-block: 1.1rem 0;
  max-width: 62ch; }

/* ── MOUVEMENT ────────────────────────────────────────────────────────────────
   ON ANIME LE RÉCIT, JAMAIS LA DONNÉE.
   Robertson et al. (2008) : sur un graphique animé, les sujets sont PLUS LENTS et
   MOINS EXACTS. Aucun compteur qui défile, aucune courbe qui se dessine, aucune
   barre qui pousse. Le mouvement sert le passage d'une idée à la suivante.

   ⚠ L'ÉTAT FINAL EST L'ÉTAT PAR DÉFAUT. L'animation se SUPERPOSE. Firefox ne
   supporte pas `animation-timeline` (bloqué depuis septembre 2025, vérifié le
   2026-08-15) : sans ce garde, un bloc resterait figé à opacity:0 — le contenu
   disparaîtrait, en silence, pour une part réelle du parc.                      */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .section > .enveloppe > * {
      animation: entree linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 34%;
    }
    @keyframes entree {
      from { opacity: .35; transform: translateY(14px); }
      to   { opacity: 1;   transform: none; }
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* L'impression n'émet ni scroll ni intersection : tout ce qui attendait d'être
   révélé sortirait en pages blanches. */
@media print {
  .section > .enveloppe > * { animation: none !important; opacity: 1 !important; transform: none !important; }
  .nav, .suite, .evite { display: none; }
  body { background: #fff; color: #000; }
  details { display: block; }
  details > div, details > table { display: block !important; }
}

/* ── COULEURS FORCÉES — EN FIN DE FEUILLE, ET C'EST LA RAISON ────────────────
   Une media query n'ajoute AUCUNE spécificité : placé en tête, ce bloc perdrait
   l'arbitrage par ordre source contre les règles équivalentes définies plus bas.
   34 déclarations mortes ont déjà été constatées ainsi.
   Et `border-color` seul est un no-op sans `border-style`.                      */
@media (forced-colors: active) {
  .jauge-point, .jauge-repere, .jauge-ecart { forced-color-adjust: none; }
  .jauge-point  { background: Highlight; border: 1px solid CanvasText; }
  .jauge-repere { background: CanvasText; }
  .jauge-ecart  { background: GrayText; }
  .nav a[aria-current="page"] { outline: 2px solid Highlight; outline-offset: -2px; }
  .suite a { border-block-end: 3px solid LinkText; }
  .plaque, .scelle, .fig, .tab-zone, details.def { border: 1px solid CanvasText; }
  .note { border-inline-start: 4px solid CanvasText; }
  :focus-visible { outline: 3px solid Highlight; }
  .fig-grille, .fig-zero, .fig-amorce { stroke: CanvasText; }
  .fig-ax, .fig-nom, .fig-val, .fig-note, .fig-ax-titre { fill: CanvasText; }
  .fig-gain, .fig-perte, .fam-refuge, .fam-cyclique, .fam-or, .fam-actions {
    stroke: CanvasText; fill: CanvasText;
  }
  /* Les composants ajoutés après coup — un bloc de couleurs forcées qui ne suit pas
     l'ajout d'un composant devient un contrôle qui protège une page d'hier. */
  .correc, .duo, .calc { border: 1px solid CanvasText; }
  .duo-part + .duo-part { border-block-start: 1px solid CanvasText; }
  .terme:target { outline: 2px solid Highlight; outline-offset: 2px; box-shadow: none; }
  .etape .calcul { border-inline-start: 3px solid CanvasText; }
  .apparte { border-inline-start: 1px solid CanvasText; color: CanvasText; }
  .calc-choix label:has(input:checked) { outline: 2px solid Highlight; }
  .correc-av .v { color: GrayText; }
}
@media (min-width: 720px) {
  @media (forced-colors: active) {
    .duo-part + .duo-part { border-block-start: 0; border-inline-start: 1px solid CanvasText; }
  }
}