/* ============================================================
   jean.cloud — Design tokens · « L'AFFICHE »
   ------------------------------------------------------------
   Refonte cartoon : couleur UNIE jaune #FFC21C, gros trait noir,
   ombres dures, bulles BD. Plus de nuage. Geist en noir épais.
   Les éléments M:armites du rebond gardent les VRAIS tokens marque.
   ============================================================ */

:root {
  /* ----- COULEURS À PLAT (cartoon, aucune nuance, aucun dégradé) ----- */
  --jaune:      #FFC21C;   /* fond principal, couleur unie            */
  --jaune-clair:#FFD24E;   /* aplat clair                              */
  --orange:     #F6900E;   /* combinaison de ski de Jean              */
  --orange-vif: #FF7A1A;   /* accent chaud                            */
  --blanc:      #FFFFFF;   /* panneaux, veste                          */
  --noir:       #17120B;   /* trait, encre, texte                      */
  --noir-2:     #3A332A;   /* texte secondaire sur clair               */

  /* contour BD — épaisseur pilotable (Tweak) */
  --trait:      4px;
  --ombre:      7px;       /* décalage de l'ombre dure                 */

  /* fond de page (Tweak : jaune / orange / blanc) */
  --fond:       var(--jaune);

  /* ----- M:ARMITES — vrais tokens de marque (rebond seulement) ----- */
  --marmite-bleu-roi:  #001789;
  --marmite-bleu-nuit: #0F1455;
  --marmite-turquoise: #32D7D7;

  /* alias hérités (pour tout reste de code) */
  --ink: var(--noir); --paper: var(--jaune); --sky: var(--orange); --sky-deep: var(--orange-vif);

  /* ============================================================
     TYPOGRAPHIE — Geist, épais. Pas de serif (on est en BD).
     ============================================================ */
  --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-serif: var(--font-sans);

  --fs-mega:    clamp(56px, 11vw, 168px);
  --fs-display: clamp(44px, 7.5vw, 104px);
  --fs-h1:      clamp(34px, 5vw, 64px);
  --fs-h2:      clamp(28px, 3.6vw, 48px);
  --fs-h3:      clamp(20px, 2vw, 28px);
  --fs-lede:    clamp(18px, 1.6vw, 23px);
  --fs-body:    17px;
  --fs-small:   15px;
  --fs-eyebrow: 13px;

  --lh-mega:   0.86;
  --lh-tight:  1.02;
  --lh-snug:   1.22;
  --lh-body:   1.55;
  --ls-mega:  -0.03em;
  --ls-eyebrow:0.16em;

  /* ----- ESPACES / RAYONS / MOUVEMENT ----- */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;
  --space-9:96px; --space-10:128px;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --ease-out:    cubic-bezier(0.2, 0.7, 0.1, 1);
  --ease-spring: cubic-bezier(0.34, 1.6, 0.5, 1);
  --dur-1:120ms; --dur-2:220ms; --dur-3:360ms;
}

/* fond de page — Tweak */
:root[data-fond="orange"] { --fond: var(--orange); }
:root[data-fond="blanc"]  { --fond: var(--blanc); }
:root[data-fond="jaune"]  { --fond: var(--jaune); }

/* épaisseur du trait — Tweak */
:root[data-trait="fin"]    { --trait: 3px; --ombre: 5px; }
:root[data-trait="epais"]  { --trait: 5px; --ombre: 9px; }
:root[data-trait="enorme"] { --trait: 7px; --ombre: 12px; }