/* ==========================================================================
   01-TOKENS.CSS — La source unique de vérité
   --------------------------------------------------------------------------
   Toutes les couleurs, tailles, espacements et durées du site vivent ici.
   Aucun hex, aucune valeur en dur ailleurs dans le site.
   Changer une valeur ici la répercute sur les 12 pages.
   ========================================================================== */

:root {

  /* --- COULEURS -------------------------------------------------------- */
  /* Registre blanc et discret : le site est blanc, le texte est noir,
     et UN seul accent vif, employé avec parcimonie. */

  --blanc:        #FFFFFF;
  --noir:         #0A0A0A;   /* texte principal — 19.8:1 sur blanc */
  --gris-surface: #F4F4F2;   /* aplats de section */
  --gris-filet:   #E4E4E1;   /* filets, séparateurs */
  --gris-texte:   #6E6E6E;   /* texte secondaire — 5.1:1 sur blanc */
  --bleu-ciel:    #E6F2FC;   /* aplats alternés de l'accueil — le noir y tient 18:1 */

  /* Accent unique. #0047FF tient 6.28:1 sur blanc : utilisable en texte
     ET en fond de bouton avec du blanc dessus. */
  --accent:        #0047FF;
  --accent-fonce:  #0035C4;  /* survol */
  --accent-voile:  rgba(0, 71, 255, .08);
  /* Sur fond noir, #0047FF tombe à 1.9:1 : illisible. Version éclaircie
     réservée aux sections inversées. */
  --accent-clair:  #93AEFF;

  /* Inversion (sections noires) */
  --inv-fond:     #0A0A0A;
  --inv-texte:    #FFFFFF;
  --inv-secondr:  #A8A8A8;   /* 7.4:1 sur #0A0A0A */
  --inv-filet:    rgba(255, 255, 255, .18);

  /* --- TYPOGRAPHIE ------------------------------------------------------ */
  /* Schibsted Grotesk : grotesque contemporaine, dense et sans afféterie.
     JetBrains Mono : réservée aux libellés, numéros et métadonnées — c'est
     ce contraste sans/mono qui donne le registre éditorial. */

  --f-texte: "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --f-mono:  "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Échelle typographique fluide — ratio ~1.25 */
  --t-xs:   0.75rem;
  --t-s:    0.875rem;
  --t-base: 1rem;
  --t-m:    clamp(1.05rem, 0.4vw + 0.95rem, 1.2rem);
  --t-l:    clamp(1.35rem, 1vw + 1.1rem, 1.75rem);
  --t-xl:   clamp(1.8rem, 2vw + 1.3rem, 2.6rem);
  --t-2xl:  clamp(2.4rem, 4vw + 1.4rem, 4.2rem);
  --t-3xl:  clamp(3rem, 7vw + 1rem, 7.5rem);

  /* --- ESPACEMENTS ------------------------------------------------------ */
  /* Base 4px, progression régulière. */

  --e-1:  4px;
  --e-2:  8px;
  --e-3:  12px;
  --e-4:  16px;
  --e-5:  24px;
  --e-6:  32px;
  --e-7:  48px;
  --e-8:  64px;
  --e-9:  96px;
  --e-10: 128px;
  --e-11: 180px;

  /* --- GRILLE ----------------------------------------------------------- */

  --grille-max:  1560px;   /* largeur maximale du contenu */
  --grille-cols: 12;
  --grille-gap:  var(--e-5);
  --marge:       var(--e-5);   /* gouttière latérale, augmentée aux paliers */

  /* --- TRAITS ET RAYONS -------------------------------------------------- */
  /* Registre Swiss : filets d'un pixel, angles nets. Aucun arrondi mou,
     aucune ombre portée décorative. */

  --filet: 1px solid var(--gris-filet);
  --r-0:   0;
  --r-s:   2px;

  /* --- MOUVEMENT --------------------------------------------------------- */
  /* Durées choisies par distance parcourue, pas une valeur unique copiée. */

  --d-instant: 120ms;   /* survol d'un lien, changement de couleur */
  --d-court:   240ms;   /* petit déplacement, bascule */
  --d-moyen:   480ms;   /* apparition d'un bloc */
  --d-long:    900ms;   /* révélation d'un titre, ligne par ligne */

  --ease:     cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* --- HAUTEURS D'EN-TÊTE ------------------------------------------------ */

  --h-barre-haute: 38px;
  --h-barre-nav:   68px;
}


/* Paliers : la gouttière et la grille respirent avec la largeur. */

@media (min-width: 768px)  { :root { --marge: var(--e-7); --grille-gap: var(--e-6); } }
@media (min-width: 1200px) { :root { --marge: var(--e-8); } }
@media (min-width: 1600px) { :root { --marge: var(--e-9); } }