/* ============================================================
   ÉDUC'ANJOU — tokens.css
   Source de vérité unique. Aucune valeur en dur ailleurs.
   Trois couches : primitive → sémantique → composant.
   ============================================================ */

/* ============================================================
   COUCHE 1 — PRIMITIVES
   Valeurs brutes. Jamais utilisées directement dans un composant.
   ============================================================ */
:root{
  --vert-950:#1A2C22;
  --vert-900:#24402F;
  --vert-800:#33583F;
  --vert-700:#427254;
  --vert-600:#5A9A73;
  --vert-500:#74AE8B;
  --vert-400:#9CC5AD;
  --vert-300:#BBD6C4;
  --vert-200:#D9E9DE;
  --vert-100:#EDF5F0;
  --vert-050:#F8FBF9;
  --vert-nuit:#0F1913;

  --lime-400:#D4FA6B;
  --lime-500:#C3F53C;
  --lime-600:#A5D91F;
  --vert-feuille:#A8D48C;

  --ciel-200:#D3E2E9;
  --sable-100:#F1ECE2;
  --blanc:#FFFFFF;
  --noir:#000000;

  --verre-clair:rgba(255,255,255,.14);
  --verre-sombre:rgba(22,38,28,.32);
  --verre-bord:rgba(255,255,255,.28);
  --verre-clair-fort:rgba(255,255,255,.26);

  --font-display:"Archivo",Helvetica,Arial,sans-serif;
  --font-texte:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;

  --r-pilule:999px;
  --r-conteneur:28px;
  --r-carte:16px;
  --r-champ:12px;

  --e-1:4px;  --e-2:8px;  --e-3:12px; --e-4:16px;
  --e-5:24px; --e-6:32px; --e-7:48px; --e-8:64px;
  --e-9:96px; --e-10:128px;

  --ombre-carte:0 18px 48px rgba(12,23,17,.18);
  --ombre-verre:0 10px 34px rgba(12,23,17,.20);
  --flou-verre:blur(18px) saturate(140%);

  /* voiles photo : brume claire en haut, voile vert profond au centre et en bas */
  --brume:rgba(255,255,255,.22);
  --brume-nulle:rgba(255,255,255,0);
  --voile-leger:rgba(26,44,34,.34);
  --voile-moyen:rgba(26,44,34,.52);
  --voile-fort:rgba(26,44,34,.78);
  --verre-opaque:rgba(26,44,34,.92);
  --ombre-titre:0 2px 24px rgba(12,23,17,.38);
  --brume-forte:rgba(255,255,255,.72);
  --brume-moyenne:rgba(255,255,255,.34);
  --blanc-45:rgba(255,255,255,.45);
  --trait-sombre:rgba(18,32,25,.12);
  --blanc-70:rgba(255,255,255,.70);
  --blanc-90:rgba(255,255,255,.90);
  --ombre-douce:0 1px 2px rgba(12,23,17,.06),0 14px 40px rgba(12,23,17,.10);
  --ombre-pilule:0 1px 2px rgba(12,23,17,.08),0 4px 14px rgba(12,23,17,.08);
  --lueur-sombre:rgba(66,114,84,.38);
  --lueur-nulle:rgba(66,114,84,0);

  /* ajouts pour l'habillage des pages existantes */
  --rouille-600:#C4400F;
  --ambre-500:#E0A80F;
  --rouille-voile:rgba(196,64,15,.10);
  --vert-950-08:rgba(26,44,34,.08);
  --vert-950-18:rgba(26,44,34,.18);
  --vert-950-20:rgba(26,44,34,.20);
  --vert-950-36:rgba(26,44,34,.36);
  --vert-950-50:rgba(26,44,34,.50);
  --vert-950-62:rgba(26,44,34,.62);
  --vert-950-70:rgba(26,44,34,.70);
  --vert-950-84:rgba(26,44,34,.84);
  --blanc-10:rgba(255,255,255,.10);
  --blanc-58:rgba(255,255,255,.58);
  --blanc-60:rgba(255,255,255,.60);
  --blanc-86:rgba(255,255,255,.86);
  --vert-050-94:rgba(248,251,249,.94);
  --lime-500-55:rgba(195,245,60,.55);
  --vert-400-34:rgba(156,197,173,.34);
  --vert-200-30:rgba(217,233,222,.30);
  --vert-050-0:rgba(248,251,249,0);

  /* typographie */
  --taille-d1:clamp(40px,7vw,76px);
  --taille-d2:clamp(28px,4vw,42px);
  --taille-d3:22px;
  --taille-lead:18px;
  --taille-courant:16px;
  --taille-bouton:15px;
  --taille-petit:13px;
  --taille-mini:12px;
  --hauteur-agenda:1000px;
  --hauteur-agenda-mobile:1020px;
  --hauteur-avis-heros:64px;
  --duree-defilement-valeurs:48s;
  --taille-interface:13px;
  --taille-d1-capitales:clamp(32px,5.6vw,72px);
  --taille-reponse:clamp(22px,2.6vw,32px);
  --taille-citation:clamp(26px,3.6vw,46px);
  --interlettrage-capitales:-.015em;
  --interlettrage-interface:.01em;
  --interligne-d1:.98;
  --interligne-d2:1.08;
  --interligne-d3:1.25;
  --interligne-courant:1.55;
  --interlettrage-d1:-.03em;
  --interlettrage-d2:-.02em;
  --interlettrage-d3:-.01em;
  --graisse-display:600;
  --graisse-italique:400;
  --graisse-texte:400;
  --graisse-moyenne:500;
  --mesure:60ch;
  --mesure-titre:16ch;
  --mesure-courte:46ch;
  --mesure-citation:28ch;

  /* gabarits */
  --largeur-page:1200px;
  --hauteur-heros:clamp(600px,92svh,900px);
  --ratio-carre:1/1;
  --largeur-portrait:440px;
  --largeur-portrait-mobile:78%;
  --masque-plein:rgba(0,0,0,1);
  --masque-vide:rgba(0,0,0,0);
  --ratio-large:16/10;
  --taille-pastille:28px;
  --taille-point:8px;
  --filet-court:40px;
  --hauteur-bascule:clamp(420px,70svh,640px);
  --ratio-portrait:4/5;
  --cible-tactile:48px;
  --trait:1px;
  --trait-focus:2px;
  --plan-nav:10;
  --plan-menu:100;
  --duree-courte:.15s;
  --duree-moyenne:.35s;
  --courbe:cubic-bezier(.2,.7,.2,1);
  --mesure-heros:22ch;
  --mesure-titre-large:24ch;
  --largeur-preuve:180px;
  --largeur-preuves:920px;
  --hauteur-bandeau-muet:clamp(220px,34vw,440px);
  --duree-lente:.8s;
  --zoom-survol:1.03;
  --zoom-point:1.4;
  --graisse-gras:600;
  --graisse-logo:800;
  --taille-logo:clamp(22px,2.4vw,28px);
  --trait-logo:.6px;
  --trait-titre-contour:var(--trait-logo);
  --interlettrage-logo:-.02em;
  --largeur-carte-avis:280px;
  --surligne-debut:58%;
  --surligne-fin:94%;
  --taille-chiffre:clamp(40px,6vw,64px);
  /* héros photo sombre (validé sur maquette) */
  --nuit-95:rgba(8,16,11,.92);
  --nuit-70:rgba(8,16,11,.70);
  --nuit-45:rgba(8,16,11,.45);
  --nuit-20:rgba(8,16,11,.20);
  --nuit-0:rgba(8,16,11,0);
  --nuit-60:rgba(8,16,11,.60);
  --hauteur-bandeau-portrait:clamp(600px,160vw,720px);
  --hauteur-zone-mobile:clamp(720px,200vw,860px);
  --duree-defilement-villes:22s;
  --hauteur-bandeau-large:clamp(560px,52vw,760px);
  --filtre-photo-lumineux:saturate(1.05) contrast(1.04);
  --verre-nuit:rgba(20,34,26,.46);
  --verre-nuit-dense:rgba(15,25,19,.86);
  --filtre-photo:saturate(.92) contrast(1.06) brightness(.9);
  --taille-titre-heros:clamp(34px,5.4vw,76px);
  --interligne-titre-heros:.94;
  --taille-titre-heros-long:clamp(24px,5vw,64px);
  --interlettrage-surtitre:.32em;
  --trait-titre-lime:1.4px;
  --largeur-trait-lime:64px;
  --epaisseur-trait-lime:3px;
  --mesure-titre-heros:14ch;
  --hauteur-heros-court:clamp(440px,62svh,620px);
  --taille-titre-section:clamp(26px,3.4vw,44px);
  --interligne-titre-section:1.02;
  --interlettrage-titre-section:-.01em;
  --duree-defilement:68s;
  --largeur-etoiles:66px;
  --largeur-villes:760px;
}

/* ============================================================
   COUCHE 2 — SÉMANTIQUE
   Les rôles. C'est ce qu'on utilise dans les composants.
   ============================================================ */
:root{
  --fond-page:var(--vert-050);
  --fond-clair:var(--blanc);
  --fond-sombre:var(--vert-950);
  --fond-panneau:var(--vert-100);

  --texte:var(--vert-950);
  --texte-doux:var(--vert-800);
  --texte-inverse:var(--blanc);
  --texte-inverse-doux:rgba(255,255,255,.72);

  --accent:var(--lime-500);
  --accent-texte:var(--vert-950);

  --bordure:rgba(18,32,25,.13);
  --bordure-inverse:rgba(255,255,255,.20);

  --accent-survol:var(--lime-400);

  --verre-fond:var(--verre-clair);
  --verre-fond-sombre:var(--verre-sombre);
  --verre-fond-survol:var(--verre-clair-fort);
  --verre-contour:var(--verre-bord);
  --verre-repli:var(--verre-opaque);

  --photo-brume:var(--brume);
  --photo-brume-nulle:var(--brume-nulle);
  --photo-voile-leger:var(--voile-leger);
  --photo-voile-moyen:var(--voile-moyen);
  --photo-voile-fort:var(--voile-fort);
  --photo-ombre-texte:var(--ombre-titre);

  /* photo claire en haut : le titre est foncé, quel que soit le thème */
  --photo-brume-forte:var(--brume-forte);
  --photo-brume-moyenne:var(--brume-moyenne);
  --photo-titre:var(--vert-950);
  --photo-titre-doux:var(--vert-800);

  --verre-lumineux:var(--blanc-45);
  --verre-lumineux-contour:var(--blanc-70);
  --verre-lumineux-actif:var(--blanc-90);
  --ombre-surface:var(--ombre-douce);
  --ombre-bouton:var(--ombre-pilule);

  --bloc-sombre-lueur:var(--lueur-sombre);
  --bloc-sombre-lueur-nulle:var(--lueur-nulle);

  --degrade-pale-haut:var(--ciel-200);
  --degrade-pale-bas:var(--vert-100);
  --texte-sur-pale:var(--vert-950);
  --texte-sur-pale-doux:var(--vert-800);
  --contour-sur-pale:var(--trait-sombre);

  /* mise en valeur du texte : le gras est surligné d'un vert pâle (jamais l'accent) */
  --surligneur:var(--vert-200);
  --surligneur-nul:var(--brume-nulle);
  --puce:var(--vert-600);
  /* logo : « ÉDUC’ » plein, « ANJOU » en contour ; en blanc sur photo sombre */
  --logo-encre:var(--noir);
  --logo-encre-inverse:var(--blanc);
  --texte-inverse-filigrane:var(--verre-bord);
  --heros-voile-fort:var(--nuit-95);
  --heros-voile-moyen:var(--nuit-70);
  --heros-voile-doux:var(--nuit-45);
  --heros-voile-leger:var(--nuit-20);
  --heros-voile-nul:var(--nuit-0);
  --nav-verre-sombre:var(--verre-nuit);
  --mot-cle-sur-photo:var(--accent);
  --contour-cadre-valeur:var(--accent);
  /* trame : fond clair rythmé par des blocs nuit */
  --fond-nuit:var(--vert-nuit);
  --trait-sur-clair:var(--vert-950);
  --trait-sur-nuit:var(--accent);
  --heros-voile-soutenu:var(--nuit-60);

  --anneau-focus:var(--texte);
  --anneau-focus-inverse:var(--blanc);
  --fond-detourage:var(--vert-100);

  /* rôles ajoutés pour l'habillage des pages existantes */
  --texte-discret:var(--vert-700);
  --texte-filigrane:var(--vert-950-18);
  --texte-inverse-fort:var(--blanc-86);
  --texte-inverse-discret:var(--blanc-58);
  --bordure-legere:var(--vert-950-08);
  --bordure-inverse-legere:var(--blanc-10);
  --accent-lisible:var(--vert-700);
  --fond-sombre-2:var(--vert-900);
  --fond-clair-translucide:var(--blanc-60);
  --fond-page-translucide:var(--vert-050-94);
  --ombre-teinte:var(--vert-950-08);
  --filet-accent:var(--vert-400);
  --voile-20:var(--vert-950-20);
  --voile-34:var(--voile-leger);
  --voile-36:var(--vert-950-36);
  --voile-50:var(--vert-950-50);
  --voile-52:var(--voile-moyen);
  --voile-62:var(--vert-950-62);
  --voile-70:var(--vert-950-70);
  --voile-78:var(--voile-fort);
  --voile-84:var(--vert-950-84);
  --lueur-accent:var(--lime-500-55);
  --lueur-vert:var(--vert-400-34);
  --lueur-pale:var(--vert-200-30);
  --lueur-transparente:var(--vert-050-0);
  --masque-opaque:var(--masque-plein);
  --masque-transparent:var(--masque-vide);
  /* jauge et alertes (couleurs d'état, distinctes de l'accent) */
  --etat-bon:var(--vert-700);
  --etat-moyen:var(--lime-600);
  --etat-attention:var(--ambre-500);
  --etat-critique:var(--rouille-600);
  --etat-critique-fond:var(--rouille-voile);
  /* carte de la zone d'intervention */
  --carte-depart:var(--vert-950);
  --carte-2:var(--vert-700);
  --carte-3:var(--vert-600);
  --carte-4:var(--vert-500);
  --carte-5:var(--vert-800);
  --carte-6:var(--vert-400);
  --carte-trait:var(--vert-950);
}

/* Le site est toujours clair : pas de mode sombre, même si l'appareil du visiteur en utilise un.
   color-scheme empêche aussi le navigateur d'assombrir de lui-même les champs et les barres de défilement. */
:root{color-scheme:light}