/*
 * Design system V2.1 — tokens.
 * Seule source des valeurs de design : les autres feuilles n'utilisent que ces variables.
 *
 * Rôles des couleurs : bleu = institution / structure ; doré = action / participation ;
 * ivoire = respiration ; rouge = accent très ponctuel (erreurs, alertes).
 * Le doré n'est jamais une couleur de texte sur fond clair (2,1:1 pour le 500, 2,6:1 pour le 600) : aplats et filets uniquement.
 */

:root {
	/* Palette */
	--color-blue-900: #0b1f3a;
	--color-blue-800: #12315a;
	--color-blue-700: #1d4c8f;
	--color-ivory-50: #faf8f2;
	--color-ivory-100: #f4f1e8;
	--color-gold-500: #d6a441;
	--color-gold-600: #c6922c;
	--color-gold-100: #f5e6bf;
	--color-gray-900: #1f2937;
	--color-gray-700: #4b5563;
	--color-gray-500: #6b7280;
	--color-gray-300: #d1d5db;
	--color-gray-200: #e5e7eb;
	--color-gray-100: #f3f4f6;
	--color-red-600: #b74a3a;
	--color-white: #fff;

	/* Rôles */
	--color-bg: var(--color-white);          /* fond principal dominant (maquette V2.1) */
	--color-bg-soft: var(--color-ivory-50);  /* respiration ponctuelle */
	--color-bg-alt: var(--color-ivory-100);
	--color-surface: var(--color-white);
	--color-text: var(--color-gray-900);
	--color-text-muted: var(--color-gray-700);
	--color-text-subtle: var(--color-gray-500); /* ≥ 4.5:1 sur ivoire 50 et blanc uniquement */
	--color-heading: var(--color-blue-800);
	--color-link: var(--color-blue-700);
	--color-link-hover: var(--color-blue-900);
	--color-border: var(--color-gray-200);
	--color-border-strong: var(--color-gray-300);
	--color-border-input: var(--color-gray-500);
	--color-accent: var(--color-gold-500);
	--color-danger: var(--color-red-600);
	--color-focus: var(--color-blue-700);
	--color-focus-on-dark: var(--color-gold-500);
	--color-on-dark: var(--color-ivory-50);
	--color-on-dark-muted: #c5c8ca; /* ivoire 78 % sur bleu 900, contraste 9.8:1 */

	/* Typographie */
	--font-serif: "Source Serif 4", Georgia, "Times New Roman", serif; /* Merriweather reste déclarée dans fonts.css pour un retour arrière */
	--font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	/* Échelle fluide : valeur mobile à 360px, valeur desktop atteinte à 1024px. */
	--text-h1: clamp(2.25rem, 1.5723rem + 3.012vw, 3.5rem);     /* 36 → 56 */
	--text-h2: clamp(1.875rem, 1.5361rem + 1.506vw, 2.5rem);    /* 30 → 40 */
	--text-h3: clamp(1.5rem, 1.2967rem + 0.9036vw, 1.875rem);   /* 24 → 30 */
	--text-h4: clamp(1.25rem, 1.1145rem + 0.6024vw, 1.5rem);    /* 20 → 24 */
	--text-lead: clamp(1.125rem, 1.0233rem + 0.4518vw, 1.3125rem); /* 18 → 21 */
	--text-body: clamp(1rem, 0.9322rem + 0.3012vw, 1.125rem);   /* 16 → 18 */
	--text-ui: 1rem;        /* 16 : boutons, champs */
	--text-nav: 0.9375rem;  /* 15 : navigation et CTA du header (header compact, charte V2.1) */
	--text-card-title: 1.1875rem; /* 19 : titres des cartes de collection (maquette V2.1) */
	--text-brand: 1.0625rem;      /* 17 : wordmark provisoire, première ligne */
	--text-small: 0.875rem; /* 14 */
	--text-xs: 0.8125rem;   /* 13 : badges */
	--text-figure: clamp(2.5rem, 1.9578rem + 2.4096vw, 3.5rem); /* 40 → 56 : chiffres clés */

	--leading-tight: 1.2;
	--leading-snug: 1.35;
	--leading-body: 1.65;
	--tracking-heading: -0.015em;
	--weight-heading: 650;         /* H2–H4, titres de cartes */
	--weight-display: 700;         /* H1 */
	--tracking-caps: 0.08em;

	--weight-regular: 400;
	--weight-medium: 500;
	--weight-semibold: 600;
	--weight-bold: 700;

	/* Espacements : 4, 8, 12, 16, 24, 32, 48, 64, 96 */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-7: 3rem;
	--space-8: 4rem;
	--space-9: 6rem;

	/* Rythme vertical des sections */
	--section-space: var(--space-8);

	/* Largeurs */
	--width-container: 75rem;  /* 1200 */
	--width-editorial: 48.75rem; /* 780 */
	--gutter: 1.25rem;         /* 20, mobile */

	/* Rayons */
	--radius-sm: 0.5rem;  /* 8 */
	--radius-md: 0.75rem; /* 12 */
	--radius-lg: 1rem;    /* 16 */
	--radius-pill: 999px;

	/* Ombres : très légères, teintées bleu */
	--shadow-sm: 0 1px 2px rgb(11 31 58 / 0.06);
	--shadow-md: 0 6px 20px -8px rgb(11 31 58 / 0.14), 0 1px 3px rgb(11 31 58 / 0.05);
	--shadow-header: 0 4px 16px -10px rgb(11 31 58 / 0.18);

	/* Focus */
	--focus-ring: 3px solid var(--color-focus);
	--focus-offset: 2px;

	/* Transitions */
	--duration-fast: 120ms;
	--duration-base: 200ms;
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);

	/* Hauteur du header (utilisée pour les ancres et le menu mobile) */
	--header-height: 4rem;

	/* Plan de superposition */
	--z-header: 100;
}

/* Tablette : 768–1023 */
@media (min-width: 48em) {
	:root {
		--gutter: 2rem;
		--section-space: var(--space-8);
	}
}

/* Desktop : ≥ 1024 */
@media (min-width: 64em) {
	:root {
		--gutter: 3rem;
		--section-space: var(--space-9);
		--header-height: 4.25rem;
	}
}

/* Large desktop : ≥ 1440 */
@media (min-width: 90em) {
	:root {
		--gutter: 4rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--duration-fast: 0ms;
		--duration-base: 0ms;
	}
}