/**
 * Jetons de design.
 * Les couleurs (--c-*) et polices (--f-*) sont injectées depuis inc/charte.php.
 * Ici : tout le reste de la charte. Modifier ces valeurs suffit à faire évoluer tout le site.
 */

/* Polices auto-hébergées (RGPD) — déposer les .woff2 dans assets/fonts/ puis décommenter.
@font-face { font-family: "Inter"; src: url("../fonts/Inter-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("../fonts/PlusJakartaSans-Variable.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
*/

:root {
	/* Échelle typographique fluide (mobile → bureau) */
	--t-xs: 0.8125rem;
	--t-s: 0.9375rem;
	--t-m: 1.0625rem;                               /* texte courant : 17px, lisible pour tous les âges */
	--t-l: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
	--t-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
	--t-2xl: clamp(2rem, 1.5rem + 2vw, 3rem);
	--interligne: 1.6;
	--interligne-titres: 1.2;

	/* Espacements (base 8px) */
	--e-1: 0.25rem;
	--e-2: 0.5rem;
	--e-3: 1rem;
	--e-4: 1.5rem;
	--e-5: 2rem;
	--e-6: 3rem;
	--e-7: 4.5rem;
	--e-section: clamp(3rem, 2rem + 4vw, 6rem);

	/* Formes */
	--rayon-s: 8px;       /* images, champs */
	--rayon: 16px;        /* cartes */
	--rayon-l: 24px;      /* grands blocs (accès rapide) */
	--rayon-xl: 32px;     /* panneaux bleus */
	--rayon-pilule: 999px;
	--ombre: 0 1px 2px rgb(0 0 0 / 0.05), 0 4px 16px rgb(0 0 0 / 0.06);
	--ombre-survol: 0 2px 4px rgb(0 0 0 / 0.06), 0 10px 28px rgb(0 0 0 / 0.1);
	--ombre-forte: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

	/* Mise en page */
	--largeur-contenu: 1280px;
	--largeur-texte: 70ch;
	--transition: 180ms ease;

	/* Focus clavier (RGAA 10.7) — toujours visible */
	--focus: 3px solid var(--c-secondaire);
	--focus-offset: 2px;
}