/* ═══════════════════════════════════════════════════════════════════════════
   ETAL — feuille commune du site Radish.
   Oignon 🧅, 04/08/2026 · repassée sur L'ÉTAL par Elio 🎨, 20/08/2026.

   POURQUOI CE FICHIER EXISTE
   Le site portait TROIS vocabulaires de variables pour UNE seule identité :
     · index.html : --papier / --encre / --radis / --filet
     · css/objectifs.css (12 pages) : --bg / --text / --accent / --border
     · les 62 pages de blog (dupliqué 59 fois) : --tx / --acc / --line
   Ce n'était pas un manque de temps : c'était l'absence de socle. Toute page
   neuve devait réinventer ses jetons, son en-tête et son pied. D'où le blocage.

   ─────────────────────────────────────────────────────────────────────────
   MISE À JOUR DU 20/08/2026 — PASSAGE À L'ÉTAL. LIRE AVANT DE MODIFIER.
   ─────────────────────────────────────────────────────────────────────────
   L'unification du 04/08 était un RENOMMAGE : elle a figé dans le socle du
   site la palette MAGENTA (--accent #D81B60, --bg #FAF6F4, fond sombre
   aubergine #140A10). Or l'app tourne sur L'ÉTAL depuis le 12/08 : fond crème
   #F9F4ED, accent terre cuite #814217, second accent sauge #4C583A. Le site
   vendait donc une identité que l'app n'a plus.

   SOURCE DE VÉRITÉ de ce qui suit :
     handoff-design-2026-08-19/radish-handoff/README.md §2 (jetons) et §3
     (grammaire de composants), direction retenue « L'Étal », arbitrage
     Geoffrey. Les valeurs sont recoupées avec css/styles.css (l'app), qui
     est le code publié.

   ⚠️ LE PIÈGE DE L'ACCENT — NE PAS REPARTIR DES JETONS DE BASE D'ORGANIC.
   Le système Organic donne un accent de base #c67139 (= --color-accent-500
   #d67f48 dans sa rampe). Sur le fond crème il ne tient que ~3:1 : c'est en
   dessous du seuil AA pour du texte. L'app fige #814217, mesuré 7,04:1 sur
   --bg et 6,47:1 sur --surface. C'est CETTE valeur qui est reprise ici.
   Toute réintroduction de #c67139 / #d67f48 comme couleur de TEXTE est une
   régression d'accessibilité.

   CONTRASTES MESURÉS (calculés, pas recopiés — WCAG 2.1 sur les 3 fonds) :
     clair  · text 12,89 · text-2 6,89 · accent 7,04 · leaf 6,94 · warn 5,41
     sombre · text 11,82 · text-2 7,82 · accent 7,92 · leaf 10,32 · warn 8,59
   Le pire cas du thème sombre n'est PAS le fond mais --surface (#474238, un
   brun clair) : tous les jetons y sont revérifiés et tiennent ≥ 4,5:1.
   Deux valeurs ont dû être relevées pour cela et ne viennent donc pas telles
   quelles du tableau du README : --info sombre (#60A5FA donnait 3,93 sur
   --surface → #93C0FF, 5,33) et --t-brock-t sombre (#E09B63 → 4,30 sur
   --surface → #EBAE7C, 5,17). Ne pas les « recorriger » vers le README.

   TYPOGRAPHIE — Bricolage Grotesque est SORTI de l'identité.
   L'Étal sert Caprasimo (titres) + Figtree (corps), déjà présentes dans
   /fonts/ et déjà servies à l'app. Le site les prend par les mêmes @font-face
   (§0 ci-dessous), donc sans requête externe.
   ⚠️ Caprasimo n'existe QU'EN UN SEUL POIDS (400). Ne jamais lui passer de
   font-weight : le navigateur synthétiserait un faux gras baveux. Le garde
   du §0 neutralise les font-weight hérités sur les éléments en --display.

   CONTRAINTES TENUES
   - CSP `default-src 'self'` : polices servies depuis /fonts/. Aucun @import,
     aucune ressource distante, aucun CDN.
   - `prefers-reduced-motion` : voir les feuilles filles (accueil / objectifs).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 0. POLICES — L'Étal : Caprasimo (titres) + Figtree (corps) ──────────
   Servies localement. Les `unicode-range` sont ceux de css/fonts.css : hors
   plage, le navigateur retombe SEUL sur la police système, sans requête. */
@font-face{font-family:'Caprasimo';font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/caprasimo-latin.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:'Caprasimo';font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/caprasimo-latin-ext.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:'Figtree';font-style:normal;font-weight:300 900;font-display:swap;
  src:url(/fonts/figtree-latin.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:'Figtree';font-style:normal;font-weight:300 900;font-display:swap;
  src:url(/fonts/figtree-latin-ext.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;}

/* ─── 1. JETONS — le vocabulaire unique du site ─────────────────────────── */
:root{
  color-scheme:light dark;

  /* Crème de l'Étal, jamais du graphite — et plus jamais le rose #FAF6F4. */
  --bg:#F9F4ED; --surface:#F5EAD8; --surface-2:#EEE7DB; --surface-3:#DDCFB2;
  --border:rgba(46,43,37,.16); --border-fort:rgba(46,43,37,.32);
  --text:#2E2B25; --text-2:#5C5347;

  /* Accent : UNE SEULE terre cuite d'action. La variante « aplat » existe
     toujours pour ne pas casser les 12 pages qui l'appellent, mais en Étal
     les deux valent la même chose en clair — c'est voulu, pas un oubli. */
  --accent:#814217; --accent-aplat:#814217; --accent-sur:#FFFFFF;
  --accent-dim:rgba(129,66,23,.12);

  /* Sauge : le SECOND accent, réservé au sourcé. Jamais décoratif (README §2,
     règle 1 — « ce bug a été corrigé deux fois, il ne revient pas »). */
  --leaf:#4C583A; --leaf-dim:rgba(76,88,58,.14);

  --warn:#8A5A0B; --warn-dim:rgba(138,90,11,.12);
  --info:#1D4FD8; --info-dim:rgba(29,79,216,.10);
  --track:#DDCFB2;

  /* Rayons de L'Étal (README §2) : conteneur 16, carte interne 14, petit 8,
     pilule 999. L'ancienne échelle 12/8/3 était celle de l'imprimé magenta. */
  --r-lg:16px; --r-md:14px; --r-sm:8px; --r-pill:999px;

  /* L'ombre dure d'imprimé (2px 3px, décalée) appartenait à la direction
     magenta. L'Étal ne pose pas d'ombre portée sur une carte : on garde un
     jeton doux pour les seuls éléments flottants (menu, feuille). */
  --shadow:0 3px 10px rgba(46,43,37,.16);
  --shadow-fort:0 12px 32px rgba(46,43,37,.22);

  /* Typo de L'Étal. --serif et --grot restent des ALIAS : 55 déclarations
     dans accueil.css / objectifs.css les appellent, les renommer serait un
     second chantier. Ils pointent désormais sur les bonnes familles. */
  --display:'Caprasimo',Georgia,'Times New Roman',serif;
  --serif:var(--display);
  --sans:'Figtree',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --grot:var(--sans);
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.32,.72,.28,1);

  /* Les tons de personnage, repris de js/mascots.js (APLAT + REGISTRY), qui
     est la SOURCE DE VÉRITÉ du casting. Le ton brut ne sert que d'aplat ou de
     filet ; la variante `-t` est la SEULE qui porte du texte.
     Les 5 du casting de L'Étal : pousse · brock · pep · oli · aube.
     ⚠️ POM ET AVO SONT CONSERVÉS, ET C'EST DÉLIBÉRÉ. Ils ne font plus partie
     du casting dessiné, mais js/mascots.js les SERT ENCORE (personas `forme`
     et `masse`) et le README §6 INTERDIT de migrer le casting tant que
     l'écran « Reprise de rôle » n'est pas codé. Les supprimer ici casserait
     /objectifs/perte-de-poids.html et /objectifs/prise-de-masse.html, qui
     sont en ligne. Ce qui est corrigé, c'est leur VALEUR : le fuchsia
     #FF6B9A et l'orange #F2683C sont morts, l'app les a repeints sur les
     rampes terre cuite et sauge le 12/08. Voir le compte rendu du lot. */
  --t-pousse:#8FA073; --t-pousse-t:#56633F;
  --t-brock:#B2622D;  --t-brock-t:#8C491A;
  --t-pep:#474238;    --t-pep-t:#474238;
  --t-oli:#56633F;    --t-oli-t:#3D472B;
  --t-aube:#643312;   --t-aube-t:#643312;
  --t-hilal:var(--t-aube); --t-hilal-t:var(--t-aube-t);  /* ex-nom d'Aube */
  --t-pom:#C98A5E;    --t-pom-t:#8C491A;                 /* transitoire */
  --t-avo:#728157;    --t-avo-t:#56633F;                 /* transitoire */
}

/* Défaut de persona, sous :where() donc de spécificité NULLE.
   Demandé par Elio le 04/08 : posés dans le `:root` ordinaire (0,1,0), ces jetons
   seraient à égalité avec le <style> en ligne d'une page, et la page ne gagnerait
   que par ordre de déclaration — c'est-à-dire par chance. Sous :where(), toute
   page les écrase par construction, y compris une page SANS <style> en ligne qui
   les redéfinirait plus tard.
   Rappel de la règle qui a produit le bug du 04/08 : un ton de mascotte ne
   traverse JAMAIS un document commun (a-propos, legal, sources, en-tête, pied).
   Ces valeurs sont un repli neutre, pas une identité. */
:where(:root){
  --p-vif:#814217; --p-accent:#643312; --p-accent-dim:rgba(129,66,23,.12);
}

/* Thème sombre de L'Étal : un BRUN CHAUD (#231F1B), pas l'aubergine #140A10 de
   la direction magenta, et surtout pas un gris neutre. Le texte plafonne à
   #E4DAC9 — pas de blanc pur, il fait un halo sur les gros chiffres (README §2).
   ⚠️ SPÉCIFICITÉ — le `:where()` n'est PAS décoratif. Le contrat d'Elio est que
   le <style> en ligne d'une page, chargé APRÈS ce <link>, gagne À SPÉCIFICITÉ
   ÉGALE : c'est ainsi que chaque page /objectifs/ pose son ton de persona.
   Écrit `:root:not([data-theme="light"])`, ce bloc pèse 0,2,0 et écrasait les
   jetons de persona en sombre — régression MESURÉE sur a-propos.html le 04/08.
   `:where()` ne compte pas dans la spécificité : le bloc repèse 0,1,0.
   NE PAS RETIRER LE :where(). Le contrôle tools/qa/etal-garde.js le vérifie. */
@media (prefers-color-scheme:dark){:root:where(:not([data-theme="light"])){
  color-scheme:dark;
  --bg:#231F1B; --surface:#474238; --surface-2:#3A352D; --surface-3:#2E2A24;
  --border:rgba(228,218,201,.16); --border-fort:rgba(228,218,201,.34);
  --text:#E4DAC9; --text-2:#C9BEAB;
  --accent:#F6A06B; --accent-aplat:#F6A06B; --accent-sur:#231F1B;
  --accent-dim:rgba(246,160,107,.18);
  --leaf:#C2D4A4; --leaf-dim:rgba(194,212,164,.18);
  --warn:#EFB05A; --warn-dim:rgba(239,176,90,.16);
  --info:#93C0FF; --info-dim:rgba(147,192,255,.16);
  --track:#2E2A24;
  --shadow:0 3px 10px rgba(0,0,0,.42);
  --shadow-fort:0 12px 32px rgba(0,0,0,.52);
  /* Aplats remontés de deux pas de rampe en sombre (README §2, note du
     tampon) : sur #231F1B, Pep (#474238) et Aube (#643312) se noient dans
     le fond. Ne concerne QUE l'aplat ; la variante -t est calibrée à part. */
  --t-pousse:#AEBF92; --t-brock:#D67F48; --t-pep:#82796A;
  --t-oli:#8FA073;    --t-aube:#B2622D;
  --t-pom:#DDA97F;    --t-avo:#AEBF92;
  --t-pousse-t:#AEBF92; --t-brock-t:#EBAE7C; --t-pep-t:#C0B6A5;
  --t-oli-t:#CCDBB2;    --t-aube-t:#E8B48C;
  --t-pom-t:#E3B48C;    --t-avo-t:#AEBF92;
}}
@media (prefers-color-scheme:dark){:where(:root):where(:not([data-theme="light"])){
  --p-vif:#F6A06B; --p-accent:#F6A06B; --p-accent-dim:rgba(246,160,107,.18);
}}

/* Choix explicite de l'utilisateur (bouton de thème de l'accueil).
   Doit rester le CLONE EXACT du bloc `prefers-color-scheme` ci-dessus : toute
   valeur modifiée d'un côté et pas de l'autre produit un thème sombre qui
   change selon qu'on l'a choisi ou subi. */
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#231F1B; --surface:#474238; --surface-2:#3A352D; --surface-3:#2E2A24;
  --border:rgba(228,218,201,.16); --border-fort:rgba(228,218,201,.34);
  --text:#E4DAC9; --text-2:#C9BEAB;
  --accent:#F6A06B; --accent-aplat:#F6A06B; --accent-sur:#231F1B;
  --accent-dim:rgba(246,160,107,.18);
  --leaf:#C2D4A4; --leaf-dim:rgba(194,212,164,.18);
  --warn:#EFB05A; --warn-dim:rgba(239,176,90,.16);
  --info:#93C0FF; --info-dim:rgba(147,192,255,.16);
  --track:#2E2A24;
  --shadow:0 3px 10px rgba(0,0,0,.42);
  --shadow-fort:0 12px 32px rgba(0,0,0,.52);
  /* Aplats remontés de deux pas de rampe en sombre (README §2, note du
     tampon) : sur #231F1B, Pep (#474238) et Aube (#643312) se noient dans
     le fond. Ne concerne QUE l'aplat ; la variante -t est calibrée à part. */
  --t-pousse:#AEBF92; --t-brock:#D67F48; --t-pep:#82796A;
  --t-oli:#8FA073;    --t-aube:#B2622D;
  --t-pom:#DDA97F;    --t-avo:#AEBF92;
  --t-pousse-t:#AEBF92; --t-brock-t:#EBAE7C; --t-pep-t:#C0B6A5;
  --t-oli-t:#CCDBB2;    --t-aube-t:#E8B48C;
  --t-pom-t:#E3B48C;    --t-avo-t:#AEBF92;
}
:where(:root[data-theme="dark"]){
  --p-vif:#F6A06B; --p-accent:#F6A06B; --p-accent-dim:rgba(246,160,107,.18);
}

/* ─── 2. GARDE CAPRASIMO — le faux gras ─────────────────────────────────────
   Caprasimo n'a qu'un poids (400). Les 55 règles écrites pour Bricolage
   Grotesque (variable 200-800) posent des font-weight 600/700/800 : laissées
   telles quelles, elles font SYNTHÉTISER un gras par le navigateur, qui
   épaissit et bave sur un display déjà très gras.
   On neutralise donc le poids partout où la famille est Caprasimo, sans avoir
   à rouvrir les 55 déclarations. `:where()` garde la spécificité à zéro. */
:where([style*="--display"],h1,h2,h3,h4,h5,h6,.tampon,.mot,.chiffre){
  font-synthesis-weight:none;
}
:where(h1,h2,h3,h4,h5,h6){ letter-spacing:-.015em; line-height:1.12; }

/* ─── 3. MOUVEMENT — respecté globalement ───────────────────────────────────
   Les feuilles filles portent leurs propres animations ; ce garde-fou est
   posé ici pour qu'AUCUNE page du socle ne puisse l'oublier. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}