@import url("/assets/fonts/self/fonts-f3a2728b.css");

/* Display auto-hébergé (Cabinet Grotesk) — remplace Bebas Neue (police bannie).
   Déclaré ici car tokens.css est importé par toutes les pages qui consomment
   var(--font-display) (epk, smart-links, bouyon hub…), donc la police est
   disponible avant tout rendu — aucun fallback sans-serif. */
@font-face {
  font-family: "Cabinet Grotesk";
  src: url("/assets/fonts/cabinet-grotesk.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
}

:root {
  --color-bg: #050505;
  --color-bg-alt: #f4f1eb;
  --color-surface: rgba(244, 241, 235, 0.8);
  --color-surface-strong: #101010;
  --color-text: #f2f2f2;
  --color-text-soft: rgba(242, 242, 242, 0.68);
  --color-inverse: #f2f2f2;
  --color-accent: #0887f8;
  --color-accent-soft: rgba(8, 135, 248, 0.12);

  /* Palette « plein jour » des transitions de la home — relevée sur la
     référence choisie par Terry le 2026-08-14 (pin Pinterest), pixels
     échantillonnés et non approximés à l'œil. Elle sert le liant entre
     sections ; le coral #ff6b6b reste au blog Bouyon. */
  --pin-ivory: #fff4ea;  /* Ambrosia Ivory — DOMINANTE : l'aplat de la bande */
  --pin-nuit: #04303f;   /* nuit dérivée — le texte posé sur l'ivoire (13:1) */
  --pin-pano: #3ebdc6;   /* Panorama Blue — le contour, la lueur */
  --pin-bird: #0096d1;   /* Blue Birds — le bleu franc, 3e ligne */
  --pin-aqua: #a8ead5;   /* Sweet Aqua — l'écume, halos et fonds doux */
  --color-border: rgba(255, 255, 255, 0.1);
  --shadow-strong: 0 24px 60px rgba(8, 31, 60, 0.22);
  --shadow-soft: 0 18px 42px rgba(16, 16, 16, 0.12);
  /* Échelle φ + réduction à 8 (décision Terry 2026-08-24, sources dans
     docs/research/bibliotheque/07-interface-design/_PROPORTIONS-ET-FLUENCE.md).
     Une progression géométrique en nombre d'or depuis 8, chaque valeur ramenée
     au nombre le plus proche dont la somme des chiffres redonne 8, sans jamais
     contenir le chiffre 4. C'est l'échelle canonique pour tout NOUVEL
     espacement ; 89 et 233 sont des nombres de Fibonacci, donc exactement
     sur φ. */
  --phi-1: 8px;
  --phi-2: 17px;
  --phi-3: 26px;
  --phi-4: 35px;
  --phi-5: 53px;
  --phi-6: 89px;
  --phi-7: 152px;
  --phi-8: 233px;

  /* Rayons et conteneur déplacés sur la même règle (somme des chiffres = 8,
     aucun 4). Écarts ≤ 5 px avec les valeurs d'origine — imperceptibles. */
  --radius-xs: 8px;
  --radius-sm: 17px;
  --radius-md: 26px;
  --radius-lg: 35px;
  --radius-pill: 998px;
  --container: min(1160px, calc(100vw - 35px));

  /* Alias hérités : mêmes noms, valeurs posées sur l'échelle. Deux paires de
     doublons assumées (12/16 → 17 et 20/24 → 26) : l'échelle a moins de
     barreaux que l'ancienne, c'est le but. 62 et 98 sont des barreaux de
     compatibilité (réduction 8, hors φ) pour les crans 64 et 96 que φ saute —
     à résorber vers --phi-5/--phi-6 après validation visuelle zone par zone. */
  --space-1: var(--phi-1);
  --space-2: var(--phi-2);
  --space-3: var(--phi-2);
  --space-4: var(--phi-3);
  --space-5: var(--phi-3);
  --space-6: var(--phi-4);
  --space-7: var(--phi-5);
  --space-8: 62px;
  --space-9: 98px;
  --font-display: "Cabinet Grotesk", sans-serif;
  --font-body: "Manrope", sans-serif;
  /* Durées posées sur la réduction à 8 (1+7+0 · 3+5+0 · 7+1+0). Écart de
     10 ms avec les valeurs d'origine — sous le seuil perceptible. */
  --duration-fast: 170ms;
  --duration-base: 350ms;
  --duration-slow: 710ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Valeurs exactes du parcours de définition validé le 09/09/2026. */
:root {
  --journey-font: "General Sans", sans-serif;
  --journey-ink: #153d46;
  --journey-button-text: #fff9eb;
  --journey-ink-hover: #245665;
  --journey-night: #08131b;
  --journey-text-muted: #d6e3dd;
  --journey-rule-dark: #678789;
  --journey-rule-light: #849c98;
  --journey-size-1: 1px;
  --journey-size-3: 3px;
  --journey-size-4: 4px;
  --journey-size-6: 6px;
  --journey-size-10: 10px;
  --journey-size-12: 12px;
  --journey-size-14: 14px;
  --journey-size-15: 15px;
  --journey-size-16: 16px;
  --journey-size-18: 18px;
  --journey-size-19: 19px;
  --journey-size-22: 22px;
  --journey-size-23: 23px;
  --journey-size-24: 24px;
  --journey-size-25: 25px;
  --journey-size-27: 27px;
  --journey-size-30: 30px;
  --journey-size-32: 32px;
  --journey-size-44: 44px;
  --journey-size-46: 46px;
  --journey-size-60: 60px;
  --journey-size-62: 62px;
  --journey-size-64: 64px;
  --journey-size-72: 72px;
  --journey-size-80: 80px;
  --journey-size-88: 88px;
  --journey-size-120: 120px;
  --journey-size-668: 668px;
  --journey-size-720: 720px;
  --journey-size-850: 850px;
}