/* Design tokens du CAP Lapeyrouse-Fossat — SOURCE UNIQUE (standard Codia, C2).
   Chargé en PREMIER par index.html, avant toute autre feuille de style.
   Aucune autre feuille ni aucun <style> ne redéfinit :root : pour changer une
   couleur, la typo d'affichage ou le gabarit, modifier uniquement ce fichier.
   Liste suivie par tests/helpers/conventions.js > CANONICAL_CSS_VARS. */
:root {
  --navy-950: #01152d;
  --navy-900: #042039;
  --navy-800: #0a2c4a;
  --navy-700: #15385b;
  --navy-600: #264b73;
  --gold-500: #b79044;
  --gold-400: #c9a460;
  --gold-300: #dcbc82;
  --gold-600: #97772f;
  --gold-700: #8b6a32;
  /* Sémantiques succès / erreur — utilisées pour les badges, status pills,
     hovers destructifs et bordures left de cartes. Les versions rgba(...)
     correspondantes restent hardcodées (rgba(76, 145, 80, 0.x) pour green,
     rgba(196, 69, 61, 0.x) pour red) — si tu changes les teintes ci-dessous,
     mets à jour ces rgba en parallèle. */
  --green-500: #4c9150;
  --red-500: #c4453d;
  --red-700: #a33933;
  --cream: #f5efe3;
  --cream-100: #fbf8f0;
  --cream-dark: #e8dfc9;
  --ink: #01152d;
  --muted: #566479;
  --line: rgba(183, 144, 68, 0.2);
  --line-strong: rgba(183, 144, 68, 0.42);
  --font-display: 'Cormorant Garamond', Georgia, serif;
  /* Largeur du site (2026-10-05). UNE règle pour tous les conteneurs de
     premier niveau — menu, en-têtes, sections, pied de page, espace membres,
     admin : ils s'alignent au pixel. Le contenu fait au plus
     --container − 2 × --gutter = 1216 px. Les blocs plus étroits (accroche,
     objectifs, mentions légales…) sont des largeurs de LECTURE, à l'intérieur. */
  --container: 1280px;  /* largeur max du conteneur, marges comprises */
  --gutter: 32px;       /* marge latérale ; 20px sur mobile (≤ 768px) */
}

/* Même palier que la mise en page mobile du site (768 px), pour que marge
   et mise en page basculent ensemble. */
@media (max-width: 768px) {
  :root { --gutter: 20px; }
}