/* ==========================================================================
   Jetons de conception — site public EDEC
   Source de vérité : CLAUDE.md §4 et docs/maquettes/edec-maquette-site.html.
   Aucun composant ne doit écrire une valeur brute : tout passe par un jeton.
   ========================================================================== */

:root {
  /* ---------- Les onze couleurs ---------- */
  --encre: #14100e;       /* fond sombre, texte principal */
  --encre-2: #241c17;     /* surfaces sombres */
  --encre-3: #3a2e26;     /* bordures sur fond sombre */
  --kaolin: #f0e7d8;      /* fond clair du site */
  --kaolin-2: #e2d4be;    /* bordures sur fond clair */
  --blanc: #fffcf7;       /* cartes */
  --laterite: #d9541f;    /* accent principal, direct, actions */
  --laterite-d: #b03f12;  /* survol */
  --or: #d8a24a;          /* chiffres, dates */
  --foret: #1e3b32;       /* catégories, badges */
  --gris: #8a7862;        /* texte secondaire */

  /* ---------- Rôles dérivés ----------
     Nuances relevées dans la maquette. Elles n'ajoutent aucune couleur au
     nuancier : ce sont des rôles nommés, pour éviter les valeurs en dur. */
  --texte: var(--encre);
  --texte-doux: #5c5048;        /* paragraphe secondaire sur fond clair */
  --texte-inverse: var(--blanc);
  --texte-inverse-doux: #c9bdae; /* chapô sur fond sombre */
  --texte-inverse-gris: #9c8c7c; /* légende sur fond sombre */
  --texte-fantome: #6b5a4c;      /* texte de réserve, images manquantes */
  --sable: #cbb79a;              /* dégradés de réserve d'image */

  --fond: var(--kaolin);
  --fond-carte: var(--blanc);
  --fond-sombre: var(--encre);
  --fond-sombre-2: var(--encre-2);
  --bordure: var(--kaolin-2);
  --bordure-sombre: var(--encre-3);
  --focus: var(--laterite);

  /* ---------- Typographie ---------- */
  --police-titre: 'Bricolage Grotesque', system-ui, -apple-system, sans-serif;
  --police-texte: 'Public Sans', system-ui, -apple-system, sans-serif;
  --police-donnee: 'Space Mono', ui-monospace, 'Courier New', monospace;

  --graisse-normale: 400;
  --graisse-moyenne: 500;
  --graisse-demi: 600;
  --graisse-forte: 700;
  --graisse-noire: 800;

  /* Échelle fluide : la borne basse tient à 360 px, la haute à 1280 px. */
  --t-xs: 0.66rem;
  --t-s: 0.82rem;
  --t-m: 0.9rem;
  --t-base: 1rem;
  --t-l: 1.08rem;
  --t-xl: 1.18rem;
  --t-2xl: 1.35rem;
  --t-3xl: clamp(1.8rem, 3.4vw, 2.7rem);
  --t-4xl: clamp(2.6rem, 5.6vw, 4.4rem);

  --interligne-serre: 1.05;
  --interligne: 1.65;
  --chasse-titre: -0.03em;
  --chasse-titre-serree: -0.035em;
  --chasse-donnee: 0.1em;

  /* ---------- Espacements — échelle de 4 px ---------- */
  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 20px;
  --e-6: 24px;
  --e-7: 32px;
  --e-8: 40px;
  --e-9: 56px;
  --e-10: 72px;
  --section-y: clamp(52px, 6vw, 76px);

  /* ---------- Rayons ---------- */
  --r-s: 6px;
  --r-m: 10px;
  --r-l: 14px;
  --r-xl: 20px;
  --r-pilule: 100px;

  /* ---------- Ombres ---------- */
  --ombre-carte: 0 12px 28px rgb(20 16 14 / 9%);

  /* ---------- Structure ---------- */
  --largeur-page: 1180px;
  --gouttiere: 24px;
  --hauteur-entete: 72px;

  /* ---------- Mouvement ----------
     Neutralisé plus bas quand l'utilisateur demande moins d'animations. */
  --duree-courte: 0.2s;
  --duree-moyenne: 0.25s;
  --duree-rythme: 0.9s;
  --duree-pouls: 1.8s;
  --transition: var(--duree-courte) ease;

  /* ---------- Plans ---------- */
  --z-entete: 50;
  --z-menu: 60;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duree-courte: 0.01ms;
    --duree-moyenne: 0.01ms;
    --transition: 0.01ms linear;
  }
}