/* ===========================================================
   TOKENS — seule source de vérité : couleurs, type, espace.
   Change une valeur ici, toute la page suit.
   =========================================================== */
:root{

  /* ---- Fonds ---- */
  --noir:        #050506;   /* fond de fenêtre, autour du conteneur */
  --panel:       #0B0B0E;   /* fond du conteneur arrondi */
  --carte:       #16161C;   /* cartes posées sur le noir */

  /* ---- Accents ---- */
  --or:          #F5C518;   /* rubans, chiffres, liserés */
  --or-doux:     #FFDD6B;   /* haut du dégradé CTA or, liens survolés */
  --rouge:       #E23B34;   /* CTA principal */
  --rouge-clair: #FF5A52;   /* haut du dégradé CTA rouge */
  --sur-or:      #1A1405;   /* texte et icônes posés SUR de l'or */
  --play:        #12100A;   /* triangle de lecture des vignettes */

  /* ---- Bande claire ---- */
  --band:        #F0E2B0;   /* sections claires + footer */
  --band-txt:    #191305;   /* titres sur bande claire */
  --band-lede:   #4C4326;   /* paragraphes sur bande claire */
  --papier:      #FFFDF6;   /* cartes blanches (offre, FAQ) */
  --band-corps:  #5C543C;   /* corps de texte sur papier */
  --band-montant:#6B6144;   /* montants neutres du tableau d'offre */
  --band-offert: #8A6B00;   /* « OFFERT » et marqueur FAQ */

  /* ---- Texte sur noir ---- */
  --creme:       #F4F1E8;
  --gris:        #98948D;

  /* ---- Filets et voiles récurrents ----
     Alphas de --or et du blanc. Regroupés ici pour qu'un changement
     d'intensité se fasse en un point, pas dans quinze règles. */
  --voile-or:    rgba(245,197,24,.12);  /* fond des pilules sombres */
  --fil-or-fin:  rgba(245,197,24,.10);  /* liseré du conteneur global */
  --fil-or:      rgba(245,197,24,.22);  /* bordure des cartes or */
  --fil-or-net:  rgba(245,197,24,.32);  /* bordure garantie, pilules */
  --fil-or-vif:  rgba(245,197,24,.50);  /* liseré haut des modules, choix 2 */
  --fil-blanc:   rgba(255,255,255,.07); /* bordure des cartes neutres */
  --fil-clair:   rgba(25,19,5,.18);     /* filets tiretés sur papier */

  /* ---- Typographie ---- */
  --disp:  'Bricolage Grotesque', system-ui, sans-serif;              /* titres, labels, boutons */
  --serif: 'Instrument Serif', Georgia, serif;                        /* accents de titre + chiffres — italique uniquement */
  --body:  system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;  /* paragraphes */

  /* ---- Géométrie ---- */
  --r:     28px;                    /* rayon conteneur global */
  --r-cd:  18px;                    /* rayon cartes */
  --pad:   clamp(20px, 5vw, 52px);  /* gouttière horizontale */
  --sec:   clamp(56px, 8vw, 96px);  /* respiration verticale */

  /* ---- Mouvement ---- */
  --ease:    cubic-bezier(.2,.7,.3,1);
  --stagger: 45ms;                  /* décalage entre mots révélés (aussi dans main.js) */
}