/* ==========================================================================
   tokens.css : extrait de « Sarah Coaching - 1c Sorbet » (prune, mandarine, ludique).
   Tout le reste du site n'utilise que ces variables.
   ========================================================================== */
:root {
  /* Palette */
  --fond: #E6DEFA;
  --prune: #3B2A6B;
  --prune-survol: #4D3A85;
  --mandarine: #FF9F1C;
  --encre: #1B1530;
  --surface: #FFFFFF;
  --encre-doux: color-mix(in srgb, var(--encre) 80%, var(--fond));   /* texte secondaire */
  --trait-fond: color-mix(in srgb, var(--prune) 22%, var(--fond));   /* rail du trait de la méthode */
  --placeholder: color-mix(in srgb, var(--encre) 16%, var(--surface));

  /* Polices : Gloock (titres), Figtree 400 / 600 / 700 (texte) */
  --font-titre: 'Gloock', Georgia, 'Times New Roman', serif;
  --font-texte: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fw-normal: 400;
  --fw-moyen: 600;
  --fw-gras: 700;

  /* Tailles et interlignes */
  --h1-mobile: 40px;
  --h1-desktop: 72px;
  --h1-interligne: 1.08;
  --h2-mobile: 32px;
  --h2-desktop: 48px;
  --h2-interligne: 1.12;
  --h3: 24px;
  --h3-interligne: 1.2;
  --texte: 16px;
  --texte-grand: 18px;
  --texte-interligne: 1.55;
  --texte-petit: 14px;
  --micro: 13px;
  --bandeau-taille: 12px;
  --mesure: 62ch;

  /* Espacements : base 4 px, marges 20, blocs 20 à 28 */
  --u: 4px;
  --s-1: calc(var(--u) * 1);
  --s-2: calc(var(--u) * 2);
  --s-3: calc(var(--u) * 3);
  --s-4: calc(var(--u) * 4);
  --s-5: calc(var(--u) * 5);
  --s-6: calc(var(--u) * 6);
  --s-7: calc(var(--u) * 7);
  --s-8: calc(var(--u) * 8);
  --s-10: calc(var(--u) * 10);
  --s-12: calc(var(--u) * 12);
  --s-16: calc(var(--u) * 16);
  --s-24: calc(var(--u) * 24);
  --marge: var(--s-5);
  --bloc: var(--s-5);
  --bloc-l: var(--s-7);
  --section: var(--s-16);
  --section-desktop: calc(var(--u) * 28);
  --conteneur: 1120px;
  --cible: 44px;

  /* Bordures 2 px encre, rayons 10 à 24 */
  --bordure: 2px;
  --rayon-s: 10px;
  --rayon-burger: 12px;
  --rayon-m: 14px;
  --rayon-l: 24px;

  /* Boutons : prune pleine, bordure encre, ombre décalée mandarine (4 px), rayon 14 */
  --decalage-bouton: 4px;
  --decalage-bouton-actif: 1px;
  --decalage-carte: 6px;
  --presse-echelle: .97;

  /* Mouvement */
  --ease-sortie: cubic-bezier(.23, 1, .32, 1);
  --duree-rapide: 150ms;
  --duree: 250ms;
  --reveal-duree: 600ms;
  --reveal-distance: 20px;
  --reveal-decalage: 80ms;
  --rotation-etiquette: -2deg;
  --rotation-croix: 45deg;

  /* Divers */
  --ratio-portrait: 4 / 5;
  --z-entete: 40;
  --z-barre: 50;
}