/* =====================================================================
   tokens.css — variables de design
   Journée Sectorielle de Formation des Servants d'Autel 2026
   ===================================================================== */

:root {
  /* ---- Couleurs ---- */
  --bleu:            #0B1D36;
  --bleu-2:          #1E3A5F;
  --bleu-3:          #2F5285;   /* bordures sur fond bleu */
  --rouge:           #C53030;
  --or:              #D4A017;
  --or-clair:        #E8C25F;
  --blanc:           #FFFFFF;
  --fond:            #F7F9FC;
  --succes:          #16803C;
  --erreur:          #B42318;

  /* Textes */
  --texte:           #0B1D36;
  --texte-doux:      #4A5A72;
  --texte-faible:    #6E7C91;
  --texte-invers:    #FFFFFF;
  --texte-invers-doux: #C3D0E2;

  /* Filets et surfaces */
  --filet:           #DCE3EE;
  --filet-fort:      #C3CEDF;
  --filet-or:        rgba(212, 160, 23, 0.55);
  --filet-or-faible: rgba(212, 160, 23, 0.28);
  --surface:         #FFFFFF;
  --surface-douce:   #EEF2F8;

  /* ---- Typographie ---- */
  --police-titre: "Spectral", Georgia, "Times New Roman", serif;
  --police-texte: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Échelle de type : base 17px mobile → 18px desktop */
  --t-base:   1.0625rem;   /* 17px */
  --t-petit:  0.9375rem;   /* 15px */
  --t-micro:  0.8125rem;   /* 13px */
  --t-md:     clamp(1.125rem, 1rem + 0.5vw,  1.3125rem);
  --t-lg:     clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem);
  --t-xl:     clamp(1.75rem, 1.4rem + 1.7vw, 2.5rem);
  --t-2xl:    clamp(2.125rem, 1.6rem + 2.6vw, 3.5rem);

  --interligne-titre: 1.12;
  --interligne:       1.6;
  --interligne-large: 1.72;   /* pour le serif en corps de texte */

  /* ---- Espacement ---- */
  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-5: 1.5rem;
  --e-6: 2rem;
  --e-7: 3rem;
  --e-8: 4rem;
  --e-9: 6rem;

  --marge-laterale: 1rem;        /* 16px, imposé par le cahier */
  --largeur-page:   1120px;
  --largeur-texte:  62ch;        /* < 80 caractères */

  /* ---- Formes ---- */
  --rayon-s:  4px;
  --rayon-m:  8px;
  --rayon-l:  14px;
  --rayon-rond: 999px;

  /* ---- Cibles tactiles ---- */
  --hauteur-champ:  48px;
  --hauteur-bouton: 48px;

  /* ---- Élévation (usage parcimonieux) ---- */
  --ombre-menu: 0 18px 40px rgba(11, 29, 54, 0.18);

  /* ---- Mouvement ---- */
  --duree-courte: 140ms;
  --duree:        260ms;
  --duree-longue: 620ms;
  --courbe:       cubic-bezier(0.22, 0.61, 0.36, 1);

  /* ---- Empilement ---- */
  --z-entete:  100;
  --z-menu:    200;
  --z-modale:  300;
  --z-toast:   400;
}

@media (min-width: 768px) {
  :root {
    --base: 1.125rem;
    --t-base: 1.125rem;   /* 18px */
    --marge-laterale: 2rem;
  }
}

/* Les animations non déclenchées par l'utilisateur sont supprimées. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duree-courte: 0ms;
    --duree: 0ms;
    --duree-longue: 0ms;
  }
}