/* Jetons de design.
   Les cinq teintes de la charte (Typos + Couleurs.pdf) deviennent des surfaces pleines.
   Accent jaune repris des rayons lumineux du dépliant myopie (Amandine Desjeux). */
:root {
  /* Charte */
  --sky: #BEE1FF;
  --blue-3: #2374ED;
  --blue-2: #1B5EDA;
  --blue: #1F53BF;
  --navy: #162B55;
  --graphite: #2B2B2B;

  /* Dérivées */
  --night: #0B1736;
  --ice: #EEF6FF;
  --sun: #FFC94D;
  --sun-deep: #F2B01E;
  --paper: #FFFFFF;
  --line: #D5E3F5;
  --muted: #56627D;
  --ink: var(--navy);
  --text: #1E2738;

  /* Typographie */
  --font-display: "League Spartan", "Futura", "Arial Black", sans-serif;
  --font: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-body: 1.0625rem;
  --fs-small: 0.875rem;
  --fs-h3: clamp(1.3rem, 1.1rem + 0.6vw, 1.6rem);
  --fs-h2: clamp(2.2rem, 1.3rem + 3.4vw, 4.4rem);
  --fs-h1: clamp(2.8rem, 1.4rem + 5.2vw, 6.4rem);
  --fs-mega: clamp(3.4rem, 1.2rem + 8.4vw, 9.6rem);

  /* Formes */
  --r-xl: clamp(28px, 4vw, 48px);
  --r-lg: 28px;
  --r-md: 20px;
  --r-sm: 12px;
  --drop: 50% 0 50% 50%;
  --shadow: 0 24px 60px -24px rgba(22, 43, 85, 0.35);

  /* Espacements */
  --gutter: clamp(16px, 4vw, 40px);
  --section: clamp(64px, 8vw, 128px);
  --container: 1280px;

  --ease: cubic-bezier(0.34, 1.3, 0.64, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}