/* ==========================================================================
   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.

     Les tailles de texte suivent la largeur de l'écran plutôt que de changer
     par paliers : sur un téléphone étroit, un titre calé sur une taille fixe
     déborde ou casse un mot en deux.

     Aucune taille de texte lu ne descend sous 12 px. En dessous, on ne lit plus
     dehors, en plein soleil, sur un écran de 5 pouces — le cas de la plupart
     des visiteurs. */
  --t-xs: clamp(0.75rem, 0.71rem + 0.18vw, 0.8rem);
  --t-s: clamp(0.82rem, 0.79rem + 0.15vw, 0.88rem);
  --t-m: clamp(0.88rem, 0.85rem + 0.15vw, 0.94rem);
  --t-base: clamp(0.97rem, 0.94rem + 0.15vw, 1.02rem);
  --t-l: clamp(1.02rem, 0.98rem + 0.2vw, 1.12rem);
  --t-xl: clamp(1.1rem, 1.03rem + 0.3vw, 1.22rem);
  --t-2xl: clamp(1.2rem, 1.09rem + 0.5vw, 1.4rem);
  --t-3xl: clamp(1.5rem, 1.2rem + 1.5vw, 2.7rem);
  --t-4xl: clamp(2rem, 1.3rem + 3.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;
  }
}