/* ==========================================================================
   tokens.css — design system ESM
   Source unique de vérité : couleurs, typographie, layout, motion.

   Les tailles, graisses, interlignages, letter-spacing et paddings ci-dessous
   sont alignés sur les valeurs RÉELLES mesurées sur stanford.edu (voir
   audit-stanford/tokens-reels.md), pas sur une estimation. Les couleurs de
   marque (--primary, --accent), elles, viennent du logo ESM lui-même
   (assets/img/logo-esm@2x.png, extraction par pixel — un seul bleu vif et
   un seul orange y apparaissent, aucun bleu marine) : le bleu marine utilisé
   jusqu'ici était une approximation « maritime » inventée, pas la couleur
   réelle de l'école. --primary GARDE le rôle du rouge cardinal chez
   Stanford : petites touches (libellés meta, accents, boutons), jamais un
   aplat de section pleine largeur — voir audit-stanford/ecarts.md #5. Le
   footer reste donc en --black, pas en couleur de marque.
   ========================================================================== */

:root {
  /* ---------- Couleurs ----------
     Alignées sur tokens-reels.md : #111111 (texte principal, pur noir) et
     #43423e (texte secondaire) sont les couleurs de texte réelles les plus
     fréquentes sur stanford.edu ; #d5d5d4 (bordures) correspondait déjà à
     notre valeur.

     --primary / --accent : extraits du logo ESM (bleu ~#0397ed, orange
     ~#f08813, un seul ton de chaque — vérifié par histogramme de couleurs,
     voir le rapport). Recalés en luminosité pour rester utilisables en
     texte sur fond blanc (WCAG AA, ratio ≥ 4.5:1) : le bleu et l'orange
     BRUTS du logo (--primary-bright / --accent-bright, ~3:1 sur blanc)
     restent réservés aux aplats, bordures, icônes et fonds de badge — jamais
     à du texte fin sur blanc. --primary-tint / --accent-tint : même teinte
     à 10 % sur blanc, pour les fonds de badge/chip discrets. */
  --primary: #027abf;        /* bleu ESM, recalé texte (contraste 4.63:1/blanc) */
  --primary-bright: #0397ed; /* bleu ESM exact du logo — décoratif uniquement */
  --primary-dark: #015a8c;   /* survol des boutons/liens */
  --primary-tint: #e6f5fd;
  --accent: #ad610b;         /* orange ESM, recalé texte (contraste 4.68:1/blanc) */
  --accent-bright: #f08813;  /* orange ESM exact du logo — décoratif uniquement */
  --accent-tint: #fdf1e4;
  --black: #111111;          /* texte principal — aligné sur #111111 mesuré */
  --white: #ffffff;
  --cool-grey: #43423e;      /* texte secondaire — aligné sur #43423e mesuré */
  --light-grey: #eaeaea;     /* fond clair — aligné sur #eaeaea mesuré */
  --sand: #f9f6ef;
  --border: #d5d5d4;         /* déjà identique à la valeur mesurée */

  /* Fond sombre teinté bleu ESM (pas un noir neutre) : utilisé sur les 2
     blocs pleine largeur qui restent sombres (pied de page, compteurs
     Formations). Assez foncé pour garder un contraste élevé — le blanc,
     mais aussi --primary-bright et --accent-bright directement, y passent
     tous l'AA texte (5.45:1 et 6.75:1, calcul vérifié) : contrairement à
     un fond blanc, les couleurs vives du logo peuvent donc y être posées
     telles quelles, sans recalage. */
  --navy-deep: #0b1d28;

  /* ---------- Typographie ----------
     Familles : équivalents libres des fontes Stanford (edict n'est pas une
     police web librement disponible), déjà choisis au prompt 1 et conservés.
     La police d'affichage est importée en variable-width (wght 200..900,
     voir index.html) pour pouvoir appliquer le poids réel 440. */
  --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-body: "Roboto", "Helvetica Neue", Arial, sans-serif;

  /* Échelle alignée sur tokens-reels.md (desktop 1500px → mobile 390px).
     Note : chez Stanford, le H2 hors-hero (80px) est PLUS GRAND que la
     légende du hero (64px) — inversion volontaire par rapport à l'ancienne
     échelle ESM où --fs-hero était le plus gros texte du site. Voir le
     rapport pour la conséquence visuelle et l'arbitrage resté ouvert. */
  --fs-hero: clamp(2.5rem, 1.973rem + 2.1622vw, 4rem);   /* 40px → 64px */
  --fs-h2:   clamp(3.5rem, 2.973rem + 2.1622vw, 5rem);   /* 56px → 80px */
  --fs-h3:   1.25rem;                                     /* 20px, constant (non fluide chez eux) */
  --fs-lead: clamp(1.125rem, 1.0811rem + 0.1802vw, 1.25rem); /* 18px → 20px */
  --fs-body: 1rem;
  --fs-meta: 0.875rem;       /* 14px, aligné (était 13px) */

  /* Interlignages / graisses / approches — alignés sur les valeurs mesurées */
  --lh-hero: 1.1;            /* 70.4/64 ≈ 1.1 (desktop), 44/40 = 1.1 (mobile) */
  --lh-h2: 1.1;              /* 88/80 = 1.1 (desktop), 61.6/56 = 1.1 (mobile) */
  --lh-h3: 1.2;              /* 24/20 = 1.2 */
  --lh-lead: 1.4;            /* 28/20 = 1.4 (desktop), 25.2/18 = 1.4 (mobile) */
  --lh-body: 1.65;
  --fw-hero: 440;            /* graisse variable réelle du display Stanford */
  --fw-h2: 440;
  --fw-h3: 500;              /* titres de carte : même graisse que Stanford */
  /* Signes opposés, comme mesuré : la légende du hero est traquée
     positivement (+0.64px/64px), le H2 est resserré (-0.8px/80px). */
  --ls-hero: 0.01em;         /* ≈ +0.64px/64px (desktop) */
  --ls-h2: -0.01em;          /* ≈ -0.8px/80px (desktop) */
  --ls-meta: normal;         /* Stanford NE TRAQUE PAS ses libellés meta */

  /* ---------- Layout ----------
     Gouttière alignée sur 40px desktop / 16px mobile (mesurés). Le
     conteneur garde son plafond existant : les deux points de mesure
     (1500px et 390px) ne permettent pas de déduire un comportement fiable
     au-delà de ~1500px, donc --container n'est pas retouché ici — voir le
     rapport. */
  --container: 1500px;
  --gutter: clamp(1rem, 0.473rem + 2.1622vw, 2.5rem);   /* 16px → 40px */
  /* Padding vertical des sections « courantes » : aligné sur la valeur
     uniforme mesurée sur les 2 sections à en-tête épinglé de Stanford
     (« Stanford News » et la section IA), 34px → 61px. */
  --section-py: clamp(2.125rem, 1.5321rem + 2.4324vw, 3.8125rem); /* 34px → 61px */

  /* Padding-top des sections qui ouvrent un nouveau chapitre (« Advancing
     the Frontier », « Research for a Better World »…) : remesuré à environ
     le double du padding courant, 62px → 128px (audit-stanford/geometrie.md,
     partie B). Utilisé sur .formations, qui rejoue « Research for a Better
     World » — voir formations.css. */
  --section-py-chapter-top: clamp(3.875rem, 2.426rem + 5.946vw, 8rem); /* 62px → 128px */

  /* Décalage de l'en-tête de section épinglé (partie B) : hauteur du header
     compacté + 40px, comme mesuré chez Stanford (top: 40px). */
  --sticky-head-top: calc(var(--header-h-compact) + 40px);

  /* ---------- Header ---------- */
  --header-h: 80px;
  --header-h-compact: 64px;

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 200ms;
  --dur-base: 300ms;
  --dur-menu: 350ms;
  --dur-slow: 600ms;

  /* ---------- Élévation ---------- */
  --shadow-header: 0 1px 12px rgba(17, 17, 17, 0.10);
  --shadow-menu: 0 18px 32px -12px rgba(17, 17, 17, 0.18);

  /* ---------- Focus ---------- */
  --focus-width: 2px;
  --focus-offset: 2px;
}

@media (max-width: 1023px) {
  :root {
    --header-h: 64px;
    --header-h-compact: 56px;
  }
}