/* =========================================================
   VARIABLES.CSS — Design tokens partagés par tout le site
   ========================================================= */
:root {
  --orange: #FF6B35;
  --orange-d: #e85520;
  --navy: #1a1a2e;
  --navy-l: #2d2d4e;
  --teal: #4ECDC4;
  --green: #22c55e;
  --red: #ef4444;
  --amber: #f59e0b;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-800: #1f2937;
  --radius: 12px;
  --radius-lg: 18px;
  --shadow: 0 4px 24px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.14);
  --r: 12px; --rl: 18px;

  /* ── ECHELLE TYPOGRAPHIQUE ────────────────────────────────────────────
     Une taille par ROLE, pas par endroit. Tant que ces valeurs etaient
     ecrites a la main dans chaque regle, deux libelles voisins pouvaient
     diverger sans que personne le remarque.

     Le repere : 16 px est la taille par defaut d'un navigateur. Le corps
     du document n'impose aucune taille — il herite donc de 16 px, et
     tout ce qui descend en dessous le fait explicitement, donc pour une
     raison qu'on doit pouvoir justifier.

     --texte-champ merite un mot : sous 16 px, iOS zoome automatiquement
     des qu'on touche un champ. L'ecran saute, le formulaire sort du
     cadre, l'utilisateur dezoome a la main. Ce n'est pas un detail de
     confort, c'est un formulaire qui devient penible a remplir sur
     telephone — la ou la moitie des visiteurs arrivent.

     --texte-pastille est le seul palier sous 14 px. Il ne sert qu'aux
     etiquettes de quelques mots posees sur un aplat : les grossir
     deformerait la pastille sans rien rendre plus lisible. */
  --texte-courant: 16px;
  --texte-navigation: 15px;
  --texte-champ: 16px;
  --texte-bouton: 16px;
  --texte-libelle: 14px;
  --texte-aide: 14px;
  /* Le plancher de lisibilite du site. Dates, compteurs, mentions
     secondaires : en dessous, un texte n'est plus lu, il est devine. */
  --texte-meta: 13px;
  /* Les pastilles decoratives sont passees de 12 a 13 px : le plancher
     vaut pour elles aussi. Un mot pose sur un aplat de couleur reste
     court, il ne deforme rien en gagnant un pixel. */
  --texte-pastille: 13px;
  --titre-section: 20px;
  --titre-page: 24px;
  --interligne: 1.55;
}