/* base.css — jetons, typographie, primitives.
   Aucune couleur en dur : tout vient des variables injectées par
   inc/branding.php depuis config/<etablissement>.json. */

/* Police unique : Nunito, auto-hébergée. Pas de Google Fonts en direct,
   le chargement distant transmet l'adresse IP des élèves à un tiers, ce
   que la CNIL a sanctionné. Une seule famille pour tout l'écran : les
   titres se distinguent par la graisse (800) et non par une seconde
   police, ce qui supprime les ruptures visuelles entre le haut et le bas
   d'une page. Nunito a des terminaisons arrondies — lisible pour un
   sixième, jamais enfantine pour un terminale. */
@font-face {
	font-family: 'JCF Sans';
	src: url('../fonts/nunito-400.woff2') format('woff2');
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: 'JCF Sans';
	src: url('../fonts/nunito-600.woff2') format('woff2');
	font-weight: 600;
	font-display: swap;
}
@font-face {
	font-family: 'JCF Sans';
	src: url('../fonts/nunito-800.woff2') format('woff2');
	font-weight: 800;
	font-display: swap;
}

:root {
	/* Repli si branding.php n'a pas encore injecté la charte. */
	--sa-navy: #364763;
	--sa-navy-deep: #222E42;
	--sa-navy-soft: #5B6C88;
	--sa-paper: #F2F4F7;
	--sa-line: #D5DBE4;
	--sa-ink: #1B2331;

	/* Couleurs d'état : fonctionnelles, jamais décoratives. */
	--sa-alerte: #A6321F;
	--sa-succes: #2E6B4F;

	--police-display: 'JCF Sans', 'Nunito', 'Avenir Next', system-ui, -apple-system, sans-serif;
	--police-texte: 'JCF Sans', 'Nunito', 'Avenir Next', system-ui, -apple-system, sans-serif;

	/* Échelle typographique, ratio 1.25. */
	--t-xs: 0.75rem;
	--t-s: 0.875rem;
	--t-m: 1rem;
	--t-l: 1.25rem;
	--t-xl: 1.75rem;
	--t-2xl: 2.5rem;
	--t-3xl: 3.5rem;

	/* Espacement, base 4px. */
	--e-1: 0.25rem;
	--e-2: 0.5rem;
	--e-3: 0.75rem;
	--e-4: 1rem;
	--e-5: 1.25rem;
	--e-6: 1.5rem;
	--e-7: 1.75rem;
	--e-8: 2rem;
	--e-10: 2.5rem;
	--e-12: 3rem;
	--e-16: 4rem;
	--e-20: 5rem;

	--rayon: 3px;          /* Le blason est anguleux : presque aucun arrondi. */
	--filet: 1px solid var(--sa-line);
	--transition: 160ms ease;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--sa-paper);
	color: var(--sa-ink);
	font-family: var(--police-texte);
	font-size: var(--t-m);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
	font-family: var(--police-display);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.015em;
	margin: 0;
}

a { color: var(--sa-navy); text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* Focus toujours visible : une partie des élèves navigue au clavier
   sur les tablettes de l'établissement. */
:focus-visible {
	outline: 3px solid var(--sa-navy);
	outline-offset: 2px;
}

/* Le motif du blason : deux filets qui encadrent le nom.
   Seul ornement de l'interface, repris là où une séparation porte du sens. */
.double-filet {
	border-top: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	padding: var(--e-2) 0;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}