/* =============================================================================
   LA SALLE DE LECTURE — feuille unique.

   Direction inscrite au registre FRONTEND.md §2 le 2026-08-24, prouvée sur
   directions/direction-a.html AVANT ce fichier. Thèse : le site ne vend rien,
   il ouvre le capot — un article de laboratoire auditable. Signature : la
   MARGE SAVANTE (les apartés — définitions, notation, provenance, renvoi —
   partagent la rangée de grille du passage qu'ils éclairent). Lumière : le
   papier est mat et plat ; la lumière vit DANS les instruments, fenêtres
   sombres éclairées de l'intérieur.

   DEUX SYSTÈMES DE COULEURS, UN SEUL VOCABULAIRE. Les classes des SVG et des
   composants sont stylées avec les variables historiques (--encre, --accent,
   --calque-*…) ; ce fichier leur donne les valeurs du papier à la racine, puis
   les REDÉFINIT dans le contexte `.instrument` / `.figure-graphique` /
   `.outil` : le même balisage rend juste sur les deux matières. C'est le
   mécanisme central de la feuille — le casser casse les deux thèmes à la fois.

   Les blocs marqués ⛔ sont des défauts MESURÉS sur ce dépôt, pas des goûts.
   Ils ont survécu à la refonte parce que leurs causes n'ont pas disparu.
   ============================================================================= */

/* --- Fontes : auto-hébergées, OFL, servies depuis dist/fontes/. ------------- */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url(fontes/newsreader-italic-latin-1.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url(fontes/newsreader-italic-latin-ext-0.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(fontes/newsreader-normal-latin-3.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(fontes/newsreader-normal-latin-ext-2.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(fontes/schibsted-grotesk-normal-latin-1.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(fontes/schibsted-grotesk-normal-latin-ext-0.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* =============================================================================
   Tokens. Les ratios ne se recopient pas ici — un chiffre en commentaire cesse
   de suivre sa palette à la première retouche. Ils se MESURENT : node
   outils/contraste.mjs relit CE fichier (les deux matières, var() résolus)
   et refuse toute paire sous 4,5:1 texte / 3:1 non-texte.
   ============================================================================= */
:root {
  /* --- Le papier : froid, mat, plat. -------------------------------------- */
  --papier:      #F5F7F9;
  --papier-2:    #EAEDF1;
  --papier-3:    #DEE2E7;
  --encre-forte: #1B1F27;
  --encre-marge: #50565E;

  /* --- L'instrument : la fenêtre sombre éclairée de l'intérieur. ----------- */
  --instrument:   #12161B;
  --instrument-2: #1C2127;
  --cerne:        #2D333B;
  --grille-inst:  #323840;
  --donnee:       #D9DFE5;
  --donnee-2:     #A7ADB4;
  --mesure:       #58BA93;
  --mesure-encre: #005D3F;
  --hasard:       #B7BFC7;

  /* --- Vocabulaire HISTORIQUE, valeurs papier. Les SVG et composants lisent
         ces noms ; `.instrument`, `.figure-graphique` et `.outil` les
         redéfinissent plus bas. --------------------------------------------- */
  --fond:         var(--papier);
  --calque-1:     var(--papier-2);
  --calque-2:     var(--papier-3);
  --calque-3:     #D3D8DE;
  --filet:        #CDD1D6;   /* séparation décorative — pas de seuil WCAG */
  --filet-fort:   #7F858D;   /* bordure de contrôle : ≥ 3:1 exigé (WCAG 1.4.11) */
  --encre:        var(--encre-forte);
  --encre-douce:  #3A404A;
  --encre-faible: var(--encre-marge);
  --accent:       var(--mesure-encre);
  --accent-sourd: #2E8266;
  /* Les deux seules couleurs de marché — réservées aux bougies, pentes et
     fourchettes ; aucune interface ne les emploie. Versions encre sur papier. */
  --hausse:       #1B6E4A;
  --baisse:       #A63A2A;

  --rayon: 3px;
  --t1: 90ms; --t2: 160ms; --t3: 240ms; --t4: 400ms; --t5: 620ms;
  --courbe: cubic-bezier(0.22, 0.61, 0.36, 1);

  --marge:     clamp(1.15rem, 4vw, 3rem);
  --colonne:   min(68ch, 100%);
  --rythme:    1.55rem;
  --gouttiere-marge: clamp(2rem, 1rem + 3.4vw, 4.75rem);
  /* Décalage optique de la marge : la prose a une demi-interligne de ~6,3 px
     au-dessus de sa capitale, l'étiquette de marge ~4 px. */
  --marge-optique: 0.26rem;

  /* --- Échelle typographique. --------------------------------------------- */
  --pas-0:  clamp(0.76rem, 0.74rem + 0.10vw, 0.82rem);
  --pas-1:  clamp(0.92rem, 0.88rem + 0.20vw, 1.04rem);
  --pas-2:  clamp(1.05rem, 0.95rem + 0.45vw, 1.20rem);
  --pas-3:  clamp(1.20rem, 1.05rem + 0.60vw, 1.45rem);
  --pas-4:  clamp(1.60rem, 1.25rem + 1.50vw, 2.25rem);
  --pas-5:  clamp(1.85rem, 1.35rem + 1.40vw, 2.45rem);
  --pas-6:  clamp(2.20rem, 1.60rem + 2.80vw, 3.60rem);

  --romaine:   'Newsreader', Georgia, 'Times New Roman', serif;
  --grotesque: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --mono:      'Cascadia Mono', 'SF Mono', Consolas, 'Liberation Mono', monospace;
}

/* LE THÈME INSTRUMENT. Tout conteneur sombre redéclare le vocabulaire : les
   mêmes classes SVG et composants rendent juste sans se réécrire. Les ratios
   sont mesurés SUR #12161B.
   ⛔ `.figure-graphique .graphique` (le SVG) et PAS `.figure-graphique` : la
   figure elle-même est transparente sur le papier — ses tableaux de données,
   sa légende et leurs anneaux de focus se dessinent sur FOND CLAIR. Le thème
   posé sur la figure entière donnait un anneau émeraude claire à 2,21:1 sur
   papier — 7 zones défilables sous le plancher de 3:1, deux moteurs
   (verifier-clavier du 2026-08-24). */
.instrument,
.calque-accent,
.figure-graphique .graphique,
.outil {
  --fond:         var(--instrument);
  --calque-1:     var(--instrument-2);
  --calque-2:     var(--instrument-2);
  --calque-3:     #232933;
  --filet:        var(--grille-inst);
  --filet-fort:   var(--donnee-2);
  --encre:        var(--donnee);
  --encre-douce:  #C2C9D1;
  --encre-faible: var(--donnee-2);
  --accent:       var(--mesure);
  --accent-sourd: #3E8A6C;
  --hausse:       #4FBF8B;
  --baisse:       #E9846F;
}

/* =============================================================================
   Socle
   ============================================================================= */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 1.5rem;
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre-forte);
  font-family: var(--romaine);
  font-size: var(--pas-2);
  line-height: 1.65;
  font-optical-sizing: auto;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  /* PAS de overflow-x ici : masquer un débordement, c'est casser le détecteur. */
}

img, svg { max-width: 100%; height: auto; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}

::selection { background: #B9E3D1; color: var(--encre-forte); }

.evitement {
  position: absolute;
  left: var(--marge);
  top: 0;
  transform: translateY(-120%);
  z-index: 60;
  background: var(--encre-forte);
  color: var(--papier);
  border: 0;
  border-radius: 1px;
  padding: 0 1.15rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-family: var(--grotesque);
  font-size: 0.9rem;
  text-decoration: none;
}
.evitement:focus { transform: translateY(0); }
/* Le glissement est un OPT-IN : posé sur la base, il survivrait à `reduce` —
   mesuré à 0,140 s sur les six pages par outils/verifier-mouvement.mjs. */
@media (prefers-reduced-motion: no-preference) {
  .evitement { transition: transform var(--t2) var(--courbe); }
}

/* =============================================================================
   Typographie. La hiérarchie de la salle de lecture est une hiérarchie de
   MATIÈRE : romaine posée pour les titres et la prose, grotesque pour les
   étiquettes et les chiffres. Pas d'écart brutal de graisse — c'est l'optique
   variable de la romaine qui fait le titrage.
   ============================================================================= */

h1, h2, h3 {
  font-family: var(--romaine);
  font-weight: 500;
  margin: 0 0 0.5em;
  text-wrap: balance;
  color: var(--encre);
}

h1 {
  font-size: var(--pas-6);
  font-variation-settings: 'opsz' 44, 'wght' 500;
  line-height: 1.06;
  letter-spacing: -0.016em;
  max-width: 20ch;
}
h2 {
  font-size: var(--pas-4);
  font-variation-settings: 'opsz' 30, 'wght' 500;
  line-height: 1.16;
  letter-spacing: -0.012em;
  max-width: 26ch;
}
h3 {
  font-size: var(--pas-3);
  font-variation-settings: 'opsz' 20, 'wght' 500;
  line-height: 1.25;
  letter-spacing: -0.008em;
}
h4 {
  font-family: var(--grotesque);
  font-size: var(--pas-1);
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--encre-douce);
  border-top: 1px solid var(--filet);
  padding-top: 0.7rem;
  margin: 2.4rem 0 0.8rem;
}

p { margin: 0 0 1.15em; max-width: 68ch; text-wrap: pretty; }

a { color: var(--accent); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

strong { font-weight: 600; color: var(--encre); }

code, .nombre, .mono {
  font-family: var(--mono);
  font-size: 0.92em;
  font-variant-numeric: tabular-nums;
}
code {
  background: var(--calque-2);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  padding: 0.1em 0.38em;
}

blockquote {
  margin: 2.4rem 0;
  padding: 0.35rem 0 0.35rem 1.5rem;
  border-left: 3px solid var(--filet-fort);
  background: none;
  font-family: var(--romaine);
  font-style: italic;
  font-size: var(--pas-3);
  line-height: 1.45;
  color: var(--encre);
}
blockquote p:last-of-type { margin-bottom: 0.5rem; }
blockquote cite {
  display: block;
  font-family: var(--grotesque);
  font-size: var(--pas-1);
  font-style: normal;
  color: var(--encre-faible);
}

/* =============================================================================
   En-tête et navigation. Non collant : le papier reste calme, le lecteur
   descend. La marque existe à toutes les largeurs — un site qui se paie ne
   perd pas son nom au premier défilement d'écran.
   ============================================================================= */

.entete {
  border-bottom: 1px solid var(--filet-fort);
  background: var(--papier);
  padding-inline: max(var(--marge), calc((100% - 1180px) / 2 + var(--marge)));
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 1.5rem;
}

.marque { display: flex; flex-direction: column; justify-content: center; min-height: 44px; text-decoration: none; color: inherit; }
.marque-nom {
  font-family: var(--grotesque);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--encre-marge);
  padding-block: 1.05rem 0.3rem;
  white-space: nowrap;
}
.marque:hover .marque-nom { color: var(--encre-forte); }
.marque-suite { display: none; }

.nav-parcours {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.35rem;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-parcours a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  min-width: 44px;
  justify-content: center;
  padding: 0 0.65rem;
  font-family: var(--grotesque);
  font-size: 0.82rem;
  letter-spacing: 0.012em;
  color: var(--encre-marge);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--t2) ease, border-color var(--t2) ease;
}
.nav-parcours a:hover { color: var(--encre-forte); border-bottom-color: var(--filet-fort); }
.nav-parcours a[aria-current="page"] {
  color: var(--encre-forte);
  border-bottom-color: var(--mesure-encre);
  font-weight: 600;
}
.numero-nav {
  font-size: 0.75rem;
  color: var(--encre-marge);
  font-variant-numeric: tabular-nums;
}

/* Nav mobile DESSINÉE : une ligne unique qui défile, avec l'affordance
   d'ombres des tableaux. Un menu qui s'enroule sur trois lignes n'est pas une
   mise en page, c'est une mise en page qui a renoncé. */
@media (max-width: 46rem) {
  .entete { display: block; padding-inline: 0; }
  .marque-nom { padding: 0.85rem var(--marge) 0.1rem; }
  .entete > nav {
    overflow-x: auto;
    padding-inline: var(--marge);
    background:
      linear-gradient(to right, var(--papier) 0, rgba(245, 247, 249, 0) 100%) 0 0 / 26px 100% no-repeat local,
      linear-gradient(to left, var(--papier) 0, rgba(245, 247, 249, 0) 100%) 100% 0 / 26px 100% no-repeat local,
      linear-gradient(to right, rgba(27, 31, 39, 0.20) 0, rgba(27, 31, 39, 0) 100%) 0 0 / 15px 100% no-repeat scroll,
      linear-gradient(to left, rgba(27, 31, 39, 0.20) 0, rgba(27, 31, 39, 0) 100%) 100% 0 / 15px 100% no-repeat scroll;
  }
  .nav-parcours { flex-wrap: nowrap; gap: 0 1.15rem; }
  .nav-parcours a { white-space: nowrap; }
}

/* =============================================================================
   LA SIGNATURE — la marge savante.

   Chaque `.corps-section` est une grille à deux colonnes déclarées : la prose
   à gauche (68ch), la marge à droite (220–300px). Les apartés `.marge` se
   placent en colonne 2 SUR LA MÊME RANGÉE que le bloc qui les précède dans le
   flux — l'auto-placement `row` non dense fait exactement cela. PORTANTE :
   retirer les apartés laisse une colonne déclarée vide sur toute la section ;
   retirer la déclaration rend toute la largeur à la prose. Mesuré le
   2026-08-24 (directions/_mesure-portance.mjs) : 190 683 px² d'apartés à
   1440, −909 px de document à 375.
   Sous 64rem, les apartés deviennent des blocs intercalés OUVERTS — jamais
   des dépliants : un dépliant replié est indiscernable d'une boîte vide.
   ============================================================================= */

.section {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(2.3rem, 3.8vw, 3.4rem) var(--marge) clamp(1.4rem, 2.4vw, 2rem);
}
.section > .corps-section > :first-child { margin-top: 0; }

.corps-section { min-width: 0; }
.corps-section > * + * { margin-top: var(--rythme); }
.corps-section > p + p { margin-top: 1.1rem; }

@media (min-width: 64rem) {
  .corps-section {
    display: grid;
    grid-template-columns: minmax(0, 68ch) minmax(220px, 300px);
    column-gap: var(--gouttiere-marge);
    justify-content: start;
    align-items: start;
  }
  .corps-section > * { grid-column: 1; margin-top: var(--rythme); }
  .corps-section > :first-child { margin-top: 0; }
  .corps-section > .marge { grid-column: 2; }
  .corps-section > .pleine { grid-column: 1 / -1; }
  /* face à de la prose : hauteurs de capitale alignées */
  .corps-section > .marge { margin-top: calc(var(--rythme) + var(--marge-optique)); }
  .corps-section > .marge--instrument { margin-top: 1.85rem; }
  .corps-section > .marge--tete { margin-top: calc(0.5rem + var(--marge-optique)); }
}

/* La tête de section : numéro + filet, comme une entrée d'article de revue. */
.section-tete {
  border-top: 1px solid var(--filet-fort);
  padding-top: 0.75rem;
}
.numero-section {
  display: block;
  font-family: var(--grotesque);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--encre-marge);
  font-variant-numeric: tabular-nums;
}
.section-tete h2 { margin: 0.5rem 0 0; }

/* Les apartés. Le <details> reste dans le balisage pour que la page tienne
   sans JavaScript, mais l'affordance de repli est retirée : ni chevron, ni
   curseur, ni clic — plus AUCUN dépliant fermé, à aucune largeur. */
.marge {
  font-family: var(--grotesque);
  font-size: 0.82rem;
  line-height: 1.55;
  letter-spacing: 0.012em;
  color: var(--encre-marge);
}
.marge p { max-width: 40ch; margin: 0; }
.marge p + p { margin-top: 0.6rem; }

.pli {
  border-top: 1px solid var(--filet-fort);
  background: var(--papier-3);
  padding: 0.7rem 0.9rem 0.85rem;
}
.pli > summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.5rem;
  margin-bottom: 0.7rem;
  border-bottom: 1px solid var(--filet);
  cursor: default;
  pointer-events: none;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--encre-forte);
  list-style: none;
}
.pli > summary::-webkit-details-marker { display: none; }
.pli > summary::marker { content: ''; }
.pli-corps { padding-bottom: 0; }

.marge-def { margin: 0; }
.marge-def dt {
  font-family: var(--romaine);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.3;
  color: var(--encre-forte);
}
.marge-def dd { margin: 0.3rem 0 0; max-width: 40ch; }
.marge-def dd + dt {
  margin-top: 0.95rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--filet);
}
.marge-formule {
  font-family: var(--romaine);
  font-size: 1.15rem;
  line-height: 1.4;
  color: var(--encre-forte);
}
.marge-formule i { font-style: italic; }

@media (min-width: 64rem) {
  .pli { background: transparent; padding: 0.15rem 0 0; }
  .pli > summary { padding-bottom: 0.55rem; margin-bottom: 0.75rem; }
}

/* =============================================================================
   Blocs de contenu
   ============================================================================= */

.hero { padding-top: clamp(2rem, 4vw, 3.4rem); }

.sur-titre {
  font-family: var(--grotesque);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  color: var(--encre-marge);
  max-width: 48ch;
  line-height: 1.5;
  margin: 0 0 1.1rem;
}
.chapeau {
  font-family: var(--romaine);
  font-size: var(--pas-3);
  line-height: 1.62;
  color: var(--encre-forte);
  max-width: 62ch;
  margin: 1.5rem 0 0;
}

/* Le calque neutre : un encadré de lecture sur papier. Le calque ACCENTUÉ est
   un INSTRUMENT : la fenêtre sombre éclairée de l'intérieur — l'unique ombre
   de la feuille est cette lueur interne. */
.calque {
  background: var(--papier-2);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  padding: clamp(1.2rem, 0.8rem + 1.5vw, 2.1rem);
  margin: 2rem 0;
}
.calque > :last-child { margin-bottom: 0; }

/* ⛔ PAS de `position: relative` ici, et c'est mesuré : un relative décoratif
   fait de l'encadré le BLOC ENGLOBANT des infobulles ancrées en `absolute` —
   une bulle de 101 px n'a aucune position valide dans un calque de 150 px, le
   navigateur la colle au sommet du bloc et elle recouvre le mot qu'elle
   explique (12 défauts, 2 moteurs, verifier-definitions du 2026-08-24). Le
   cousin exact du « transform capture position: fixed » déjà payé ici. */
.calque-accent,
.instrument {
  background: linear-gradient(to top, var(--instrument-2) 0%, var(--instrument) 68%);
  border: 1px solid var(--cerne);
  border-radius: var(--rayon);
  color: var(--donnee);
  box-shadow:
    inset 0 1px 0 rgba(216, 226, 232, 0.07),
    inset 0 -34px 46px -34px rgba(88, 186, 147, 0.24);
  padding: clamp(1.35rem, 3vw, 2.1rem);
}
.calque-accent { margin: 2rem 0; }
.calque-accent :focus-visible, .instrument :focus-visible { outline-color: var(--mesure); }
/* Pas de rustine par élément ici : .calque-accent est un CONTEXTE DE THÈME
   (voir le bloc en tête de feuille) — strong, code, liens et titres y lisent
   leurs variables re-déclarées. La version à rustines laissait les strong à
   l'encre noire sur fond noir : 1,02:1 sur 4 pages, gate runtime du 2026-08-24. */
.calque-accent h4 { border-color: var(--cerne); }

.etiquette {
  display: inline-block;
  font-family: var(--grotesque);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--encre-douce);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--filet-fort);
  border-radius: 0;
  padding: 0 0 0.3rem;
  margin-bottom: 0.9rem;
}
.etiquette-mythe { color: var(--encre-faible); border-bottom-style: dashed; }
/* Seule variante à garder l'accent : elle tranche entre deux affirmations. */
.etiquette-fait { color: var(--accent); border-bottom-color: var(--accent); }

/* Le chiffre qui frappe — la preuve du héros et des grilles de chiffres. */
.chiffre-cle {
  display: block;
  font-family: var(--grotesque);
  font-size: var(--pas-5);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.022em;
  color: var(--accent);
}
.chiffre-legende {
  display: block;
  font-family: var(--romaine);
  font-size: 1.02rem;
  line-height: 1.4;
  color: var(--encre);
  margin-top: 0.55rem;
}

.grille-chiffres {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--filet-fort);
  background: none;
  border-radius: 0;
  margin: clamp(1.7rem, 3vw, 2.4rem) 0 0;
}
.grille-chiffres > * {
  background: none;
  padding: 1.15rem 0;
  margin: 0;
  border-bottom: 1px solid var(--filet);
}
.grille-chiffres > :last-child { border-bottom: 0; }
@media (min-width: 46rem) {
  /* 10rem et pas 14 : trois chiffres de preuve doivent tenir de front dans la
     colonne de prose (68ch ≈ 700 px) — à 14rem le troisième tombait ORPHELIN
     sous les deux autres, vu sur la capture du 2026-08-24. */
  .grille-chiffres { grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr)); column-gap: clamp(1.4rem, 3vw, 2.6rem); }
  .grille-chiffres > * {
    border-bottom: 0;
    border-left: 1px solid var(--filet);
    padding: 1.35rem 0 0 clamp(1rem, 2vw, 1.6rem);
  }
  .grille-chiffres > :first-child { border-left: 0; padding-left: 0; }
}

/* La source, rattachée à l'affirmation — grotesque de marge, filet haut. */
.source {
  display: block;
  font-family: var(--grotesque);
  font-size: 0.78rem;
  line-height: 1.5;
  letter-spacing: 0.012em;
  color: var(--encre-marge);
  margin-top: 0.6rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--filet);
  max-width: 34ch;
}
.source a { color: var(--encre-douce); }

/* Le bloc d'ouverture « en bref ». */
.en-bref {
  margin: 0 0 2.4rem;
  padding: 0.7rem 0 0.9rem;
  border-top: 1px solid var(--filet-fort);
  border-bottom: 1px solid var(--filet);
  background: none;
  border-radius: 0;
}
.en-bref-phrase {
  margin: 0 0 0.9rem;
  font-family: var(--romaine);
  font-size: var(--pas-3);
  line-height: 1.4;
  color: var(--encre-forte);
  font-weight: 500;
}
.en-bref-points { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.35rem; }
.en-bref-points > li { color: var(--encre-douce); }
.en-bref-pied {
  margin: 1rem 0 0;
  padding-top: 0.8rem;
  border-top: 1px solid var(--filet);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  justify-content: space-between;
  color: var(--encre-faible);
  font-family: var(--grotesque);
  font-size: var(--pas-0);
}
.en-bref-duree { font-variant-numeric: tabular-nums; }

.note-lecture { font-size: var(--pas-1); color: var(--encre-douce); max-width: 68ch; }
.renvoi-mesure {
  display: block;
  margin-top: 0.5rem;
  color: var(--encre-faible);
  font-family: var(--grotesque);
  font-size: var(--pas-0);
}

/* =============================================================================
   Tableaux. L'affordance de défilement est double : les ombres latérales
   (solidaires du cadre) masquées par des couvertures solidaires du contenu —
   le procédé s'efface seul quand le tableau tient — et la mention texte.
   ============================================================================= */

.table-enveloppe {
  overflow-x: auto;
  margin: 2rem 0;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(to right, var(--papier) 0, rgba(245, 247, 249, 0) 100%) 0 0 / 26px 100% no-repeat local,
    linear-gradient(to left, var(--papier) 0, rgba(245, 247, 249, 0) 100%) 100% 0 / 26px 100% no-repeat local,
    linear-gradient(to right, rgba(27, 31, 39, 0.20) 0, rgba(27, 31, 39, 0) 100%) 0 0 / 15px 100% no-repeat scroll,
    linear-gradient(to left, rgba(27, 31, 39, 0.20) 0, rgba(27, 31, 39, 0) 100%) 100% 0 / 15px 100% no-repeat scroll;
}
.table-enveloppe:focus-visible { outline-offset: 2px; }

table {
  border-collapse: collapse;
  width: 100%;
  /* ⛔ Sans plancher, un tableau à trois colonnes se comprime sur téléphone en
     piles de syllabes au lieu de défiler. Constaté à 360 px sur decide.html. */
  min-width: 32rem;
  font-family: var(--grotesque);
  font-size: var(--pas-1);
  font-variant-numeric: tabular-nums;
}
thead th {
  text-align: left;
  vertical-align: bottom;
  padding: 0 0.9rem 0.7rem 0;
  border-bottom: 1.5px solid var(--filet-fort);
  background: none;
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: normal;
  text-transform: none;
  color: var(--encre-forte);
}
thead th:last-child { padding-right: 0; }
.th-note {
  display: block;
  margin-top: 0.25rem;
  font-weight: 400;
  font-size: 0.76rem;
  letter-spacing: 0.012em;
  color: var(--encre-marge);
}
/* La couleur de base passe par l'HÉRITAGE sur tbody, jamais par `td { color }` :
   une déclaration directe (0,1,1) battrait toute classe de variante (0,1,0). */
tbody { color: var(--encre-forte); }
th, td {
  padding: 0.78rem 0.9rem 0.78rem 0;
  text-align: left;
  border-bottom: 1px solid var(--filet);
  vertical-align: top;
}
tbody th { font-weight: 400; font-size: 0.88rem; }
tbody th:last-child, tbody td:last-child { padding-right: 0; }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 1px solid var(--filet-fort); }

/* ⛔ Un lien de cellule est une cible de navigation : 22 px mesurés sous le
   plancher de 24 px (SC 2.5.8). Corrigé sur le COMPOSANT. */
.table-enveloppe th a,
.table-enveloppe td a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
}
/* ⛔ `tabular-nums` NE SE POSE QUE LÀ OÙ DES CHIFFRES S'ALIGNENT VERTICALEMENT
   (colonnes de tableau, graduations de graphique, champs de saisie). Sur
   Schibsted comme sur Newsreader, il donne à la VIRGULE la chasse d'un
   chiffre : « 49,7 % » s'affiche « 49 , 7 % ». Mesuré sur `.chiffre-cle` (le
   héros de l'accueil), `.commande output` et `.resultat dd` le 2026-08-24 —
   la règle avait déjà été écrite pour `.rail-valeur`, puis recopiée nulle
   part : un correctif à recopier est un mécanisme à extraire. */
td.num, th.num { font-variant-numeric: tabular-nums; text-align: right; }

/* Le losange du tableau croisé : la forme n'est pas le seul porteur — la
   valeur passe en gras et le losange porte un `title` (WCAG 1.4.1). */
.marque-sortant {
  color: var(--accent);
  font-size: 0.78em;
  margin-left: 0.3em;
  vertical-align: 0.08em;
}

/* L'accent des colonnes suit le VRAI : `val-confirm` le porte, `val-pivot`
   se compose en gris — exact, mais inobservable. */
.val-pivot { color: var(--encre-marge); }
.val-confirm { color: var(--accent); font-weight: 600; }

/* =============================================================================
   Graphiques de MESURE : des fenêtres sombres. Le thème instrument redéfinit
   le vocabulaire ; les classes des SVG ne changent pas.
   ============================================================================= */

.figure-graphique { margin: 2.4rem 0 0; }
.figure-graphique .graphique {
  width: 100%;
  height: auto;
  display: block;
  background: linear-gradient(to top, var(--instrument-2) 0%, var(--instrument) 68%);
  border: 1px solid var(--cerne);
  border-radius: var(--rayon);
  font-family: var(--grotesque);
  font-variant-numeric: tabular-nums;
}

.grille line { stroke: var(--filet); stroke-width: 1; }
.graduation { fill: var(--encre-faible); font-family: var(--grotesque); font-size: 11px; }

.bougie .meche { stroke-width: 1; }
.bougie.hausse .meche, .bougie.hausse .corps { stroke: var(--hausse); fill: var(--hausse); }
.bougie.baisse .meche, .bougie.baisse .corps { stroke: var(--baisse); fill: var(--baisse); }

.courbe { stroke-width: 2; stroke-linejoin: miter; stroke-linecap: butt; }
.courbe.ema50  { stroke: var(--accent); }
.courbe.ema200 { stroke: #D9B84A; }
.courbe.oscillateur { stroke: var(--accent); stroke-width: 1.6; }

.fond-panneau { fill: var(--calque-2); }
.seuil { stroke: var(--filet-fort); stroke-width: 1; stroke-dasharray: 3 3; }

.zone rect { fill: color-mix(in srgb, var(--accent) 14%, transparent); }
.zone.zone-attente rect { fill: color-mix(in srgb, var(--encre-faible) 16%, transparent); }
.repere line { stroke: var(--encre-faible); stroke-width: 1; stroke-dasharray: 2 3; }
.repere circle { fill: var(--accent); }
.repere .repere-cible { fill: var(--accent-sourd); stroke: var(--accent); stroke-width: 1; }

/* Histogrammes : deux séries au plus, distinguées d'abord par la HAUTEUR. */
.serie-barres .barre { fill: var(--accent-sourd); }
.serie-barres.serie-ema .barre { fill: var(--accent); }
.serie-barres.serie-sma .barre { fill: var(--encre-faible); }

/* Fourchettes : le trait (ce qu'on IGNORE) domine, le point reste sourd, la
   verticale de zéro est le seul accent. */
.trait-fourchette { stroke: var(--accent-sourd); stroke-width: 3; stroke-linecap: butt; }
.borne-fourchette { stroke: var(--accent-sourd); stroke-width: 2; }
.point-fourchette { fill: var(--encre); }
.ligne-zero { stroke: var(--accent); stroke-width: 2; }
.bande-commune { fill: color-mix(in srgb, var(--accent) 14%, transparent); }
.etiquette-fourchette { font-size: 13px; }

/* ⛔ LES DEUX TRACÉS DES FOURCHETTES basculent à 700 px, le seuil de la règle
   de police : c'est ELLE qui cassait la variante côte à côte (.graduation à
   21px gonfle l'étiquette de 236 à 383 unités pour 248 de marge). Diverger
   les deux seuils rouvrirait le défaut entre eux.
   Spécificité (0,2,0) VOLONTAIRE sur la bascule : une règle générique
   `.figure-graphique svg` à (0,1,1) la battrait par ordre source — mesuré sur
   direction-b.html, les DEUX tracés rendus à 1440. */
.figure-graphique .fourchettes-etroit { display: none; }
@media (max-width: 700px) {
  .figure-graphique .fourchettes-large { display: none; }
  .figure-graphique .fourchettes-etroit { display: block; }
}
.categorie { font-size: 13px; }
@media (max-width: 700px) {
  .graduation { font-size: 21px; }
  .categorie { font-size: 23px; }
}

/* Sans JavaScript, les trois vues du comparateur s'affichent à la suite,
   chacune avec son titre ; avec JavaScript le bouton pressé porte déjà
   l'information. */
.libelle-vue {
  font-family: var(--grotesque);
  font-size: var(--pas-0);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--encre-douce);
  margin: 1.4rem 0 0.2rem;
}
.js .libelle-vue { display: none; }

/* La légende est de la PROSE : elle vit sur le papier, sous l'instrument. */
figcaption {
  margin-top: 1.05rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--filet);
  font-family: var(--romaine);
  font-size: 1.02rem;
  line-height: 1.62;
  color: var(--encre-forte);
  max-width: 62ch;
}

.donnees-brutes { margin-top: 0.9rem; }
.donnees-brutes summary {
  cursor: pointer;
  font-family: var(--grotesque);
  font-size: var(--pas-1);
  color: var(--accent);
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--filet);
  border-radius: 0;
  padding: 0;
  list-style: none;
  width: fit-content;
}
.donnees-brutes summary::-webkit-details-marker { display: none; }
.donnees-brutes summary::before {
  content: "";
  width: 0.5rem; height: 0.5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--t2) var(--courbe);
}
.donnees-brutes[open] summary::before { transform: rotate(-135deg) translate(-2px, -2px); }
.donnees-brutes summary:hover { color: var(--encre-forte); }
.donnees-brutes table { margin-top: 0.6rem; }

/* =============================================================================
   SCHÉMAS EXPLICATIFS : des dessins de livre, sur papier. Ils montrent un
   MÉCANISME, pas une mesure — le papier est leur matière, l'encre leur trait.
   ============================================================================= */

.figure-schema { margin: 2.6rem 0 0; }

/* ⛔ L'ENVELOPPE DÉFILANTE : 960 unités dans 322 px = annotations à 5 px. On
   borne par le bas et on laisse glisser ; `tabindex` est posé au composant —
   un conteneur qui défile sans être focalisable est inatteignable au clavier. */
.schema-enveloppe {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  background: var(--papier-2);
}
.schema-enveloppe:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.schema { display: block; width: 100%; min-width: 44rem; height: auto; }

.schema text { fill: var(--encre-douce); font-family: var(--grotesque); }

.schema .trace { fill: none; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.schema .trace-prix, .schema .trace-moyenne { stroke: var(--encre); }
.schema .trace-moyenne { stroke: var(--accent); stroke-width: 2.8; }
.schema .trace-osc { stroke: var(--accent); stroke-width: 2.2; }
.schema .trace-ema { stroke: var(--accent); }
.schema .trace-sma { stroke: var(--encre-faible); stroke-dasharray: 5 4; }
.schema .trace-wilder { stroke: #8A6D1F; }
.schema .echantillon { stroke-width: 3; fill: none; }

.schema .panneau { fill: var(--papier); stroke: var(--filet); stroke-width: 1; }
.schema .titre-panneau { fill: var(--encre-faible); font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; }

.schema .pente { fill: none; stroke-width: 3.4; stroke-dasharray: 9 6; stroke-linecap: round; }
.schema .pente-hausse { stroke: var(--hausse); }
.schema .pente-baisse { stroke: var(--baisse); }
.schema .sommet { fill: var(--papier); stroke: var(--encre); stroke-width: 2.4; }
.schema .alignement { stroke: var(--filet-fort); stroke-width: 1.2; stroke-dasharray: 2 5; }

.schema .annotation text { fill: var(--encre); font-weight: 600; }
.schema .rappel { stroke: var(--filet-fort); stroke-width: 1.2; fill: none; }
.schema .rappel-point { fill: var(--filet-fort); }
.schema .annotation-accent text { fill: var(--accent); }
.schema .annotation-accent .rappel, .schema .annotation-accent .rappel-point { stroke: var(--accent); fill: none; }
.schema .annotation-accent .rappel-point { fill: var(--accent); }
.schema .annotation-hausse text { fill: var(--hausse); }
.schema .annotation-hausse .rappel { stroke: var(--hausse); }
.schema .annotation-hausse .rappel-point { fill: var(--hausse); }
.schema .annotation-baisse text { fill: var(--baisse); }
.schema .annotation-baisse .rappel { stroke: var(--baisse); }
.schema .annotation-baisse .rappel-point { fill: var(--baisse); }
.schema .annotation-sourd text { fill: var(--encre-faible); font-weight: 500; }

.schema .axe { stroke: var(--filet-fort); stroke-width: 1.4; fill: none; }
.schema .grille-horizontale, .schema .grille-verticale { stroke: var(--filet); stroke-width: 1; fill: none; }
.schema .axe-zero { stroke: var(--accent); stroke-width: 2; fill: none; }
.schema .axe-zero-nom { fill: var(--accent); font-size: 14px; font-weight: 600; }
.schema .axe-graduation { fill: var(--encre-faible); font-family: var(--grotesque); font-size: 13px; }
.schema .axe-nom { fill: var(--encre-faible); font-size: 13px; }
.schema .legende-nom { fill: var(--encre); font-size: 15px; font-weight: 600; }
.schema .legende-quoi { fill: var(--encre-faible); font-size: 13px; }

.schema .vignette { fill: var(--papier); stroke: var(--filet); stroke-width: 1; }
.schema .vignette-nom { fill: var(--encre); font-size: 16px; font-weight: 700; }
.schema .vignette-phrase { fill: var(--encre-faible); font-size: 13px; }
.schema .titre-colonne { fill: var(--encre); font-size: 17px; font-weight: 700; }
.schema .titre-colonne .sous { fill: var(--encre-faible); font-size: 13px; font-weight: 400; }
.schema .titre-rangee { fill: var(--encre); font-size: 16px; font-weight: 700; }
.schema .note-grille { fill: var(--encre-faible); font-size: 12px; }
.schema .mini { fill: none; stroke-width: 3; stroke-linecap: round; }
.schema .mini-encre { stroke: var(--encre); }
.schema .mini-accent { stroke: var(--accent); }
.schema circle.mini-encre { fill: var(--encre); stroke: none; }
.schema circle.mini-accent { fill: var(--accent); stroke: none; }
.schema .mini-nom { fill: var(--encre-faible); font-size: 12px; }

.schema .fourchette .barre { stroke: var(--accent-sourd); stroke-width: 5; fill: none; }
.schema .fourchette .mors { stroke: var(--accent-sourd); stroke-width: 2.4; fill: none; }
.schema .fourchette .centre { fill: var(--encre); }
.schema .fourchette-hausse .barre, .schema .fourchette-hausse .mors { stroke: var(--hausse); }
.schema .fourchette-baisse .barre, .schema .fourchette-baisse .mors { stroke: var(--baisse); }
.schema .fourchette-nom { fill: var(--encre); font-size: 14px; font-weight: 600; }
.schema .fourchette-quoi { fill: var(--encre-faible); font-size: 12px; }

.schema .essai { fill: var(--encre-faible); opacity: 0.55; }
.schema .essai-retenu { fill: var(--baisse); opacity: 1; stroke: var(--papier); stroke-width: 2; }

.schema .mesure { stroke: var(--filet-fort); stroke-width: 1; stroke-dasharray: 3 3; fill: none; }
.schema .mesure-double { stroke: var(--accent); stroke-width: 2; fill: none; }
.schema .mesure-nom { fill: var(--accent); font-size: 14px; font-weight: 600; }
.schema .mesure-avertissement { fill: var(--encre-faible); font-size: 12.5px; }

/* Hachurée et non aplatie : un aplat translucide disparaît en contrastes
   forcés, et il emporterait le sujet de la figure. */
.schema .bande-aveugle { fill: color-mix(in srgb, var(--encre-faible) 12%, transparent); }
.schema .hachure { stroke: var(--encre-faible); stroke-width: 1; opacity: 0.5; }
.schema .bande-nom { fill: var(--encre-douce); font-size: 14px; font-weight: 600; }
/* ⛔ LES JALONS PORTAIENT L'ACCENT À L'ENVERS : l'émeraude marquait le PIVOT —
   l'instant que « personne ne connaît » — et la confirmation restait en couleur
   de marché. La convention du site (bloc « le taux fabriqué », plus bas) dit
   l'inverse : l'accent porte le RÉEL, l'invisible n'est qu'un contour neutre
   discontinu. Relevé par une relecture fraîche le 2026-08-24. */
.schema .jalon-pivot { stroke: var(--encre-faible); stroke-width: 2; stroke-dasharray: 5 4; fill: none; }
.schema .jalon-confirmation { stroke: var(--accent); stroke-width: 2; fill: none; }
.schema .jalon-pivot-point { fill: var(--papier); stroke: var(--encre-faible); stroke-width: 2; }
.schema .jalon-confirmation-point { fill: var(--accent); stroke: var(--papier); stroke-width: 2; }

.schema .rail-trait { stroke-width: 4; fill: none; }
.schema .rail-mors { stroke-width: 3; fill: none; }
.schema .rail-baisse .rail-trait, .schema .rail-baisse .rail-mors { stroke: var(--baisse); }
.schema .rail-baisse .rail-pointe { fill: var(--baisse); }
.schema .rail-hausse .rail-trait, .schema .rail-hausse .rail-mors { stroke: var(--hausse); }
.schema .rail-hausse .rail-pointe { fill: var(--hausse); }
.schema .rail-nom { fill: var(--encre); font-size: 14px; font-weight: 600; }
/* ⛔ PAS DE CHASSE FIXE SUR CES VALEURS : en monospace, l'insécable avant « % »
   occupe la largeur d'un chiffre et « 65,7 % » s'affiche troué. */
.schema .rail-valeur { font-size: 17px; font-weight: 700; }
.schema .rail-valeur-hausse { fill: var(--hausse); }
.schema .rail-valeur-baisse { fill: var(--baisse); }
.schema .rail-egalite { fill: var(--encre-faible); font-size: 13px; }

/* Le taux fabriqué, dans les schémas comme dans les figures de mesure :
   l'accent porte le RÉEL (la confirmation, la ligne du hasard) ; le chiffre
   fabriqué est un CONTOUR discontinu. */
.schema .ligne-hasard { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 7 5; fill: none; }
.schema .ligne-hasard-nom { fill: var(--accent); font-size: 13px; font-weight: 600; }
.schema .barre-pivot { fill: none; stroke: var(--encre-faible); stroke-width: 2; stroke-dasharray: 5 3; }
.schema .barre-confirmation { fill: var(--accent-sourd); }
.schema .barre-valeur { fill: var(--encre); font-size: 14px; font-weight: 700; }
.schema .fenetre-nom { fill: var(--encre); font-size: 15px; font-weight: 600; }
.schema .fenetre-quoi { fill: var(--encre-faible); font-size: 12px; }
.schema .verdict { fill: var(--encre-douce); font-size: 14px; }

/* ⛔ L'ANIMATION DE TRACÉ A ÉTÉ ÉCRITE, PUIS RETIRÉE : un tracé qui attend un
   déclencheur sort en cadre VIDE si le déclencheur ne part pas. Ce qui reste
   n'anime que des éléments DÉJÀ VISIBLES, sans opacité ni masquage. */
@media (prefers-reduced-motion: no-preference) {
  .schema .essai-retenu {
    /* 2 itérations et pas infinite : 4,8 s au total, sous les 5 s de WCAG
       2.2.2 — au-delà il faudrait un contrôle de pause. Le point attire
       l œil au chargement puis se tient immobile. */
    animation: respire 2.4s var(--courbe) 2;
    transform-box: fill-box;
    transform-origin: center;
  }
  @keyframes respire {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.22); }
  }
  .figure-schema .annotation { transition: transform var(--t3) var(--courbe); }
  .figure-schema:hover .annotation-accent,
  .figure-schema:hover .annotation-hausse,
  .figure-schema:hover .annotation-baisse { transform: translateY(-2px); }
}

/* =============================================================================
   Outils interactifs : des instruments sombres. Sans JavaScript, le bloc reste
   lisible et affiche sa valeur par défaut, calculée à la construction.
   ============================================================================= */

.outil {
  /* pas de position: relative — même piège de bloc englobant que .calque-accent */
  background: linear-gradient(to top, var(--instrument-2) 0%, var(--instrument) 68%);
  border: 1px solid var(--cerne);
  border-radius: var(--rayon);
  color: var(--donnee);
  box-shadow:
    inset 0 1px 0 rgba(216, 226, 232, 0.07),
    inset 0 -34px 46px -34px rgba(88, 186, 147, 0.24);
  padding: clamp(1.35rem, 3vw, 2.1rem);
  margin: 2.4rem 0 0;
}
.outil :focus-visible { outline-color: var(--mesure); }
.outil p { color: var(--donnee); }

.outil-titre {
  font-family: var(--grotesque);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--donnee-2);
  border-bottom: 1px solid var(--cerne);
  padding-bottom: 0.7rem;
  margin: 0 0 1.2rem;
}

.commandes { display: grid; gap: clamp(1.4rem, 3vw, 2.4rem); margin-bottom: 1.4rem; }
@media (min-width: 40rem) {
  .commandes { grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); }
}
.commande { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.commande label {
  font-family: var(--grotesque);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--donnee-2);
}
.commande output {
  font-family: var(--grotesque);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--mesure);
}

/* Les curseurs : la piste se remplit d'émeraude jusqu'à la valeur (`--rempli`
   est posé par le script ; sans lui la piste reste neutre, jamais fausse). */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  --rempli: 0%;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 10px;
  border: 1px solid var(--donnee-2);
  border-radius: 999px;
  background: linear-gradient(to right, var(--mesure) 0 var(--rempli), var(--instrument) var(--rempli) 100%);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  margin-top: -8px;
  border-radius: 50%;
  background: var(--mesure);
  border: 2px solid var(--instrument);
}
input[type="range"]::-moz-range-track {
  height: 10px;
  border: 1px solid var(--donnee-2);
  border-radius: 999px;
  background: linear-gradient(to right, var(--mesure) 0 var(--rempli), var(--instrument) var(--rempli) 100%);
}
input[type="range"]::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--mesure);
  border: 2px solid var(--instrument);
}
input[type="range"]:focus { outline: none; }
input[type="range"]:focus-visible {
  outline: 2px solid var(--mesure);
  outline-offset: -2px;
  border-radius: 4px;
}

input[type="number"] {
  background: var(--instrument-2);
  color: var(--donnee);
  border: 1px solid var(--donnee-2);
  border-radius: var(--rayon);
  padding: 0.55rem 0.7rem;
  min-height: 44px;
  font-family: var(--grotesque);
  font-size: var(--pas-1);
  font-variant-numeric: tabular-nums;
  width: 100%;
}
input::placeholder { color: var(--donnee-2); opacity: 1; }

.resultat {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  gap: 0.9rem 2rem;
  background: none;
  border: 0;
  border-top: 1px solid var(--cerne);
  border-radius: 0;
  margin-top: clamp(1.7rem, 3vw, 2.3rem);
  padding-top: clamp(1.3rem, 2.5vw, 1.8rem);
}
.resultat > div { background: none; padding: 0; }
.resultat dt {
  font-family: var(--grotesque);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--donnee-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.resultat dd {
  margin: 0.35rem 0 0;
  font-family: var(--grotesque);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--donnee);
}

.note-sans-js { font-size: var(--pas-0); color: var(--donnee-2); margin-top: 1rem; }
.js .note-sans-js { display: none; }

.bouton-lissage {
  font-family: var(--grotesque);
  font-size: var(--pas-1);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--donnee);
  background: var(--instrument-2);
  border: 1px solid var(--donnee-2);
  border-radius: var(--rayon);
  padding: 0.5rem 1rem;
  min-height: 44px;
  cursor: pointer;
  transition: color var(--t2) var(--courbe), background var(--t2) var(--courbe),
              border-color var(--t2) var(--courbe);
}
.bouton-lissage:hover { color: var(--mesure); border-color: var(--mesure); }
.bouton-lissage[aria-pressed="true"] {
  color: var(--instrument);
  background: var(--mesure);
  border-color: var(--mesure);
  font-weight: 600;
}

/* La bande de pondération du banc. */
.ponderation-barres {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 1.4rem;
  padding: 1rem;
  background: var(--instrument-2);
  border: 1px solid var(--cerne);
  border-radius: var(--rayon);
}
.poids { height: 3px; background: var(--accent-sourd); transform-origin: left center; }
.poids:first-child { background: var(--accent); }

/* =============================================================================
   Sources et glossaire
   ============================================================================= */

.liste-sources { list-style: none; padding: 0; margin: 0; }
.liste-sources li {
  padding: 1rem 0;
  border-bottom: 1px solid var(--filet);
  max-width: 74ch;
}
.liste-sources li:last-child { border-bottom: 0; }
.liste-sources a {
  font-family: var(--mono);
  font-size: var(--pas-0);
  overflow-wrap: anywhere;
  display: inline-flex;
  align-items: center;
  margin-top: 0.3rem;
  min-height: 44px;
}

.glossaire { display: grid; gap: 0; margin: 1.6rem 0; border-top: 1px solid var(--filet-fort); }
.glossaire-entree {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--filet);
  border-radius: 0;
}
.glossaire-entree > summary {
  padding: 0.7rem 0.2rem;
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem;
  min-height: 44px;
}
.glossaire-entree > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.glossaire-terme { font-family: var(--romaine); font-style: italic; font-size: 1.1rem; color: var(--encre-forte); }
.glossaire-aussi { color: var(--encre-faible); font-family: var(--grotesque); font-size: var(--pas-0); }
.glossaire-corps { padding: 0.2rem 0.2rem 1rem; border-top: 1px solid var(--filet); }
.glossaire-corps > p { margin: 0.8rem 0 0; }
.glossaire-analogie { color: var(--encre-douce); }
.glossaire-piege { color: var(--encre-douce); border-left: 2px solid var(--baisse); padding-left: 0.8rem; }

/* =============================================================================
   Pied de page et navigation basse
   ============================================================================= */

.suite {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  gap: clamp(0.9rem, 2vw, 1.4rem);
  background: none;
  border: 0;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--marge);
}
/* Affordance réelle : un bloc cliquable généreux, une flèche, un survol net. */
.suite-lien {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.2rem 1.1rem;
  padding: clamp(0.95rem, 2.2vw, 1.3rem) clamp(1rem, 2.4vw, 1.4rem);
  border: 1px solid var(--filet-fort);
  border-radius: var(--rayon);
  background: var(--papier);
  text-decoration: none;
  color: var(--encre-forte);
  min-height: 44px;
  transition: background-color var(--t2) ease, border-color var(--t2) ease, color var(--t2) ease;
}
.suite-lien:hover {
  background: var(--papier-3);
  border-color: var(--mesure-encre);
  color: var(--mesure-encre);
}
.suite-lien::after {
  content: "\2192";
  grid-area: 1 / 2 / 3 / 3;
  align-self: center;
  font-family: var(--grotesque);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--mesure-encre);
  transition: transform var(--t2) ease;
}
.suite-lien:hover::after { transform: translateX(3px); }
.suite-prec::after { content: "\2190"; }
.suite-prec:hover::after { transform: translateX(-3px); }
.suite-role {
  grid-area: 1 / 1;
  display: block;
  min-width: 0;
  font-family: var(--grotesque);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--encre-marge);
}
.suite-titre {
  grid-area: 2 / 1;
  display: block;
  min-width: 0;
  margin-top: 0.2rem;
  font-family: var(--romaine);
  font-size: var(--pas-3);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: normal;
}
.suite-suiv { text-align: left; }

.pied {
  border-top: 1px solid var(--filet-fort);
  background: var(--papier-2);
  margin-top: clamp(2.5rem, 4.5vw, 3.6rem);
  padding: clamp(1.9rem, 3.5vw, 2.7rem) 0 clamp(2.2rem, 4vw, 3.2rem);
  max-width: none;
}
.pied-corps {
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: var(--marge);
}
.avertissement {
  margin: 0;
  background: none;
  border: 0;
  border-radius: 0;
  border-top: 1px solid var(--filet-fort);
  padding-top: 1.2rem;
  max-width: 74ch;
  font-family: var(--grotesque);
  font-size: 0.83rem;
  line-height: 1.65;
  color: var(--encre-forte);
}
/* Le <strong> d'ouverture joue l'étiquette du bloc. */
.avertissement > strong {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--encre-marge);
}
.pied-meta {
  margin: 1.2rem 0 0;
  font-family: var(--grotesque);
  font-size: var(--pas-0);
  color: var(--encre-faible);
  max-width: none;
}

/* =============================================================================
   Révélations — le décor peut échouer, le contenu NON.

   ⛔ PAS `transform: translateY`, ET LE MOTIF N'EST PAS COSMÉTIQUE : un
   `transform` fait de l'élément le BLOC ENGLOBANT de ses descendants en
   `position: fixed`. Les infobulles de définition comptent être fixées au
   VIEWPORT — mesuré le 2026-08-16 : 584 bulles rendues jusqu'à 61 125 px sous
   le cadre. `top` sur `position: relative` produit le même glissement sans le
   piège.
   ⛔ AUCUNE OPACITÉ SUR LE CONTENU, jamais : une capture pleine page a rendu
   deux sections entières invisibles quand le déclencheur n'est pas parti. La
   révélation ne joue que sur une translation, qui n'a jamais empêché
   personne de lire.
   ============================================================================= */

@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    position: relative;
    top: 14px;
    transition: top var(--t5) var(--courbe);
  }
  .js .reveal.vu { top: 0; }
}

/* =============================================================================
   LES MOTS DÉFINIS AU POINT D'USAGE. Sans CSS : lisible dans le flux. Sans
   JavaScript : `:hover`/`:focus-within`. Ne déborde JAMAIS horizontalement.
   ============================================================================= */

.terme-defini { display: inline; }

.terme-mot {
  font: inherit;
  font-style: italic;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: help;
  border-bottom: 1px dotted var(--accent);
  touch-action: manipulation;
  /* La cible tactile se paie sur une zone ÉTENDUE, jamais sur la ligne de
     texte : un min-height casserait l'interligne du paragraphe. Le ::after
     invisible porte le bouton au-dessus du plancher 2.5.8 (mesuré 19,1 px de
     boîte dans un chapeau → ~31 px de zone) sans déplacer un seul pixel. */
  position: relative;
}
.terme-mot::after {
  content: "";
  position: absolute;
  inset: -6px -4px;
}
.terme-mot:hover, .terme-mot:focus-visible { border-bottom-style: solid; color: var(--accent); }
.terme-mot:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ⛔ LA BULLE SE POSE EN BAS DE L'ÉCRAN PAR DÉFAUT, ET C'EST LE SOCLE : le
   bloc englobant d'une bulle centrée sur un mot est le MOT — rien dans cette
   chaîne ne connaît le bord du cadre. Mesuré : 86 px de débordement à 1440.
   Fixée au bas du viewport, elle ne déborde plus, à aucune largeur. */
.terme-bulle {
  position: fixed;
  z-index: 30;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  top: auto;
  transform: none;
  width: auto;
  max-width: none;
  padding: 0.7rem 0.9rem;
  background: var(--papier-3);
  border: 1px solid var(--encre-faible);
  border-radius: var(--rayon);
  color: var(--encre-douce);
  font-family: var(--grotesque);
  font-size: var(--pas-0);
  line-height: 1.45;
  text-align: left;
  font-style: normal;
  /* `visibility` et non `display` : un `display:none` sort l'élément de
     l'arbre d'accessibilité, et `aria-describedby` n'aurait plus rien à lire. */
  visibility: hidden;
  opacity: 0;
}
.terme-defini:hover .terme-bulle,
.terme-defini:focus-within .terme-bulle { visibility: visible; opacity: 1; }

/* ⛔ ÉCHAP DOIT POUVOIR REFERMER UNE BULLE — WCAG 1.4.13. L'attribut est posé
   par le script SUR LE MOT ; sans JavaScript, le comportement reste celui du
   survol, déjà correct. */
.terme-defini[data-bulle="repliee"]:hover .terme-bulle,
.terme-defini[data-bulle="repliee"]:focus-within .terme-bulle {
  visibility: hidden;
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .terme-bulle { transition: opacity var(--t2) var(--courbe), visibility 0s linear var(--t2); }
  .terme-defini:hover .terme-bulle,
  .terme-defini:focus-within .terme-bulle { transition-delay: 0s; }
}

/* ⛔ LA BULLE REVIENT CONTRE LE MOT — seulement si le navigateur sait la
   replier lui-même (ancrage CSS mesuré présent dans les deux moteurs). En
   `absolute` et PAS `fixed` : une boîte fixe ancrée ne compense pas le
   défilement (mesuré : bulle à 1 208 px pour un mot à 481 px après 837 px de
   défilement). Le nom d'ancre est écrit par `definirLesTermes`, un par terme. */
@supports (position-try-fallbacks: block-start span-inline-start) {
  @media (min-width: 48.0625rem) {
    .terme-bulle {
      position: absolute;
      position-area: block-start span-inline-end;
      position-try-fallbacks:
        block-start span-inline-start,
        block-end span-inline-end,
        block-end span-inline-start;
      inset: auto;
      width: max-content;
      max-width: min(28rem, 60vw);
      margin: 0.5rem 0;
    }
  }
}

/* =============================================================================
   Divers conservés tels quels — chacun est né d'un défaut mesuré.
   ============================================================================= */

/* Visible pour un lecteur d'écran, hors de l'écran pour les autres. */
.visuellement-cache {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* ⛔ DANS UN CONTENEUR DÉFILANT, UN TEXTE CACHÉ EN ABSOLU S'ÉCHAPPE ET POUSSE
   LA PAGE : 141 px de débordement mesurés à 375 px sur decide.html. Dans le
   flux, un pavé de 1 px est rogné par l'enveloppe et reste lu. */
.table-enveloppe :is(td, th) .visuellement-cache {
  position: static;
  display: inline-block;
  margin: 0;
  vertical-align: middle;
}

/* ⛔ Un mot insécable très long élargit sa colonne de grille et pousse le
   document hors du cadre (`min-width: auto` par défaut) : 591 px de document
   pour 375 px de fenêtre, mesuré. Les deux règles sont nécessaires. */
.corps-section, .table-enveloppe, .figure-graphique, .figure-schema, .outil, .calque, .calque-accent { min-width: 0; }
th, td, .chiffre-cle, .resultat dd { overflow-wrap: anywhere; }
h1, h2, h3, h4, figcaption, p { overflow-wrap: break-word; }
body { overflow-wrap: break-word; }

/* =============================================================================
   Largeurs
   ============================================================================= */

@media (max-width: 1024px) {
  :root { --gouttiere-marge: clamp(1.6rem, 2.5vw, 2.6rem); }
}

/* =============================================================================
   Impression
   ============================================================================= */

@media print {
  /* Ctrl+P n'émet ni scroll ni intersection : tout ce qui attendait d'être
     révélé sortirait décalé. */
  .js .reveal, .js .reveal.vu { top: 0 !important; transition: none !important; }
  .js .figure-schema .trace, .js .figure-schema .pente {
    stroke-dasharray: none !important; stroke-dashoffset: 0 !important;
  }
  .schema-enveloppe { overflow: visible; }
  .schema { min-width: 0; }
  .entete, .evitement, .suite { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .calque-accent, .instrument, .outil {
    background: #fff;
    color: #000;
    border: 1px solid #000;
    box-shadow: none;
    break-inside: avoid;
  }
  .figure-graphique .graphique { background: #fff; border: 1px solid #000; }
  .calque-accent p, .outil p, .commande label, .commande output,
  .resultat dt, .resultat dd, .outil-titre { color: #000; }
  figcaption { color: #000; border-top-color: #000; }
  .marge, .pli, figure, table { break-inside: avoid; }
  .pied { background: #fff; }
  /* Sur les planches imprimées, l'encre remplace les thèmes. */
  .grille line, .seuil, .axe { stroke: #000; }
  .graduation, .schema text { fill: #000; }
  .courbe, .schema .trace { stroke: #000; }
}

/* =============================================================================
   COULEURS FORCÉES — EN FIN DE FEUILLE, impérativement : une media query
   n'ajoute aucune spécificité, ce bloc gagne l'arbitrage par ordre source.
   `border-color` seul est un no-op sans `border-style` : forme complète.
   ============================================================================= */

@media (forced-colors: active) {
  .calque, .calque-accent, .instrument, .outil, .schema-enveloppe,
  .table-enveloppe, .resultat > div {
    border: 1px solid CanvasText;
    background: Canvas;
    box-shadow: none;
  }
  .figure-graphique .graphique { background: Canvas; border: 1px solid CanvasText; }
  .etiquette { border-bottom: 1px solid CanvasText; color: CanvasText; }
  .chiffre-cle, .sur-titre, .outil p, .commande output,
  .val-pivot, .val-confirm, .resultat dd, .suite-role { color: CanvasText; }
  .ponderation-barres .poids, .poids:first-child { background: CanvasText; forced-color-adjust: none; }

  .grille line, .seuil { stroke: CanvasText; }
  .graduation { fill: CanvasText; }
  /* ⛔ Les variantes DOIVENT être énumérées, et les bases nues RETIRÉES :
     `.courbe` seul à (0,1,0) est une règle MORTE contre `.courbe.ema50`
     (0,2,0) — une media query n'ajoute aucune spécificité, l'ordre source ne
     suffit pas. Mesuré le 2026-08-24 : 0 courbe et 0 bougie sans variante
     dans les 6 pages ; les bases nues étaient donc mortes PARTOUT. */
  .courbe.ema50, .courbe.ema200, .courbe.oscillateur { stroke: CanvasText; }
  .bougie.hausse .corps, .bougie.hausse .meche,
  .bougie.baisse .corps, .bougie.baisse .meche { stroke: CanvasText; fill: Canvas; }
  .trait-fourchette, .borne-fourchette { stroke: CanvasText; }
  .point-fourchette { fill: CanvasText; }
  .ligne-zero { stroke: Highlight; stroke-width: 3; forced-color-adjust: none; }
  .bande-commune { display: none; }

  /* Chaque classe de texte est énumérée À SA spécificité : « .schema text »
     seul est une règle morte contre toute variante (0,2,0+) de la base —
     l audit runtime les a comptées une à une le 2026-08-24. Les trois noms en
     Highlight restent déclarés PLUS BAS, donc gagnants à égalité. */
  .schema .titre-panneau, .schema .axe-graduation, .schema .axe-nom,
  .schema .legende-nom, .schema .legende-quoi, .schema .vignette-nom,
  .schema .vignette-phrase, .schema .titre-colonne, .schema .titre-colonne .sous,
  .schema .titre-rangee, .schema .note-grille, .schema .mini-nom,
  .schema .fourchette-nom, .schema .fourchette-quoi, .schema .rail-nom,
  .schema .rail-valeur, .schema .rail-valeur-hausse, .schema .rail-valeur-baisse,
  .schema .rail-egalite, .schema .barre-valeur, .schema .fenetre-nom,
  .schema .fenetre-quoi, .schema .verdict, .schema .bande-nom,
  .schema .mesure-avertissement, .schema .annotation text,
  .schema .annotation-accent text, .schema .annotation-hausse text,
  .schema .annotation-baisse text, .schema .annotation-sourd text { fill: CanvasText; }
  .schema .trace, .schema .echantillon, .schema .axe { stroke: CanvasText; }
  .schema .panneau, .schema .vignette { fill: Canvas; stroke: CanvasText; }
  .schema .sommet { fill: Canvas; stroke: CanvasText; }
  .schema .pente, .schema .mesure-double, .schema .axe-zero, .schema .ligne-hasard {
    stroke: Highlight; forced-color-adjust: none;
  }
  .schema .axe-zero-nom, .schema .ligne-hasard-nom, .schema .mesure-nom {
    fill: Highlight; forced-color-adjust: none;
  }
  .schema .alignement, .figure-schema .schema .rappel { stroke: CanvasText; }
  .figure-schema .schema .rappel-point, .schema .essai, .schema .fourchette .centre { fill: CanvasText; }
  .schema .essai-retenu { fill: Highlight; forced-color-adjust: none; }
  .schema .fourchette .barre, .schema .fourchette .mors { stroke: CanvasText; }
  /* Rempli contre contour, puisque la couleur ne sépare plus — et le rempli
     est la CONFIRMATION : l'accent système porte le vrai, là aussi. */
  .schema .barre-confirmation { fill: Highlight; forced-color-adjust: none; }
  .schema .barre-pivot { fill: Canvas; stroke: CanvasText; stroke-width: 2; }
  .figure-schema .schema .rail-trait, .figure-schema .schema .rail-mors { stroke: CanvasText; }
  .figure-schema .schema .rail-pointe { fill: CanvasText; }
  .schema .jalon-pivot, .schema .jalon-confirmation { stroke: CanvasText; }
  /* Le pivot reste CREUX : plein contre creux est la seule distinction qui
     survit au monochrome, avec le pointillé du trait. */
  .schema .jalon-pivot-point { fill: Canvas; stroke: CanvasText; }
  .schema .jalon-confirmation-point { fill: CanvasText; }
  .schema .bande-aveugle { fill: Canvas; }
  .schema .hachure { stroke: CanvasText; opacity: 1; }
  .schema .grille-horizontale, .schema .grille-verticale { stroke: CanvasText; }

  .entete { border-bottom: 1px solid CanvasText; }
  .pied { border-top: 1px solid CanvasText; }
  .pli { border-top: 1px solid CanvasText; }
  .pli > summary { border-bottom: 1px solid CanvasText; }
  .nav-parcours a[aria-current="page"] { border-bottom: 2px solid Highlight; }
  .suite-lien { border: 1px solid CanvasText; }
  .glossaire-piege { border-left: 2px solid CanvasText; }
  .en-bref { border-top: 1px solid CanvasText; border-bottom: 1px solid CanvasText; }
  .section-tete { border-top: 1px solid CanvasText; }

  input[type="range"]::-webkit-slider-runnable-track { background: Canvas; border: 1px solid CanvasText; }
  input[type="range"]::-moz-range-track { background: Canvas; border: 1px solid CanvasText; }
  input[type="range"]::-webkit-slider-thumb { background: Highlight; border: 2px solid CanvasText; }
  input[type="range"]::-moz-range-thumb { background: Highlight; border: 2px solid CanvasText; }
  .bouton-lissage:not([aria-pressed="true"]) { border: 1px solid CanvasText; }
  .bouton-lissage[aria-pressed="true"] {
    background: Highlight;
    color: HighlightText;
    border: 1px solid Highlight;
    forced-color-adjust: none;
  }
}