/* MADA-ANNUAIRE - jetons de design.
   Espacements, rayons, ombres, typographie. Aucune couleur ici : elles vivent
   dans palettes.css, sinon un changement de palette laisse des traces. */

:root {
	--police-titre: "Poppins", "Segoe UI", system-ui, sans-serif;
	--police-texte: "Inter", "Segoe UI", system-ui, sans-serif;

	--t-xs: 0.75rem;
	--t-sm: 0.875rem;
	--t-base: 1rem;
	--t-md: 1.125rem;
	--t-lg: 1.375rem;
	--t-xl: 1.75rem;
	--t-2xl: 2.25rem;
	--t-3xl: 3rem;

	--interligne-titre: 1.15;
	--interligne-texte: 1.65;

	--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;

	--rayon-sm: 6px;
	--rayon: 10px;
	--rayon-lg: 16px;
	--rayon-pilule: 999px;

	--largeur-contenu: 1200px;
	--gouttiere: var(--e-5);
	--colonnes: 3;

	/* Rythme partage avec outils/modeles.py. Une seule valeur d'ecart de grille
	   et une seule d'ecart de colonnes : c'est ce qui fait qu'une page parait
	   alignee plutot que bricolee. */
	--grille-ecart: var(--e-5);   /* 24 px, = ECART_GRILLE */
	--colonnes-ecart: var(--e-6); /* 32 px, = ECART_COLONNES */
	--bande-serree: 40px;
	--bande-normale: 72px;
	--bande-large: 96px;

	--ombre-sm: 0 1px 2px color-mix(in srgb, var(--ombre) 12%, transparent);
	--ombre-md: 0 4px 16px color-mix(in srgb, var(--ombre) 14%, transparent);
	--ombre-lg: 0 12px 40px color-mix(in srgb, var(--ombre) 18%, transparent);

	--transition: 160ms ease;
	--entete-hauteur: 76px;
}

/* Repli pour les navigateurs sans color-mix : ombres neutres plutôt
   qu'absentes. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
	:root {
		--ombre-sm: 0 1px 2px rgba(10, 20, 35, 0.12);
		--ombre-md: 0 4px 16px rgba(10, 20, 35, 0.14);
		--ombre-lg: 0 12px 40px rgba(10, 20, 35, 0.18);
	}
}

@media (max-width: 899px) {
	:root {
		--t-2xl: 1.75rem;
		--t-3xl: 2.125rem;
		--gouttiere: var(--e-4);
		--entete-hauteur: 64px;
	}
}