/* ─────────────────────────────────────────────────────────────────────
   Tokens — Construction CEG
   v1.00 · Source de vérité : Charte_Graphique/charte-graphique.html
   Palette dérivée des actifs réels de marque (logo chrome CEG, logo ACÉRO,
   photographie de chantier au couchant sur le fleuve).
   Toute modification ici doit être reportée dans la charte graphique.
   ───────────────────────────────────────────────────────────────────── */

:root {
	/* ─── Palette officielle (associations sémantiques par division) ─── */
	--bleu-ceg:      #0E5C97;  /* PRIMAIRE · Modulaire préfabriqué (cœur de métier) */
	--bleu-glacier:  #3E9BD1;  /* Maritime · highlight du logo chrome */
	--navy-boreal:   #0A2A43;  /* Produits ACÉRO · fond profond */
	--graphite:      #262A2E;  /* Texte principal · structures d'acier */
	--couchant:      #E0892C;  /* Location d'équipements · accent / appels à l'action */

	/* ─── Neutres ─── */
	--glace:         #EAF0F4;  /* Surface froide claire */
	--banquise:      #FAFBFC;  /* Fond de page */
	--brume:         #6B7682;  /* Texte secondaire / légendes */
	--ligne:         rgba(38, 42, 46, .12); /* Filets / bordures */

	/* ─── Typographie ─── */
	/* Archivo : titres industriels robustes. Inter : corps lisible.
	   Space Mono : étiquettes techniques, eyebrows, specs (esprit feuille de specs). */
	--font-display: 'Archivo', 'Arial Narrow', system-ui, sans-serif;
	--font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--font-mono:    'Space Mono', ui-monospace, SFMono-Regular, Consolas, monospace;

	--text-h1:      clamp(2rem, 5vw, 3.25rem);
	--text-h2:      clamp(1.5rem, 3vw, 2rem);
	--text-h3:      1.125rem;
	--text-body:    1rem;
	--text-body-sm: 0.875rem;
	--text-caption: 0.6875rem;

	--tracking-eyebrow: 0.22em;
	--tracking-h1: -0.01em;
	--tracking-h3: 0.04em;
	--line-height-body: 1.7;

	/* ─── Espacement (échelle 8px) ─── */
	--s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
	--s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
	--s-9: 96px;  --s-10: 128px;

	/* ─── Layout ─── */
	--container: 1400px;
	--header-height: 72px;
	--radius: 3px;
	--radius-lg: 8px;

	/* ─── Animation ─── */
	--duration-fast: 150ms;
	--duration-base: 250ms;
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);

	/* ─── Ombres ─── */
	--shadow-sm: 0 1px 4px rgba(10, 42, 67, .08);
	--shadow-md: 0 6px 20px rgba(10, 42, 67, .10);
	--shadow-lg: 0 16px 48px rgba(10, 42, 67, .14);
}

@media (max-width: 640px) {
	:root {
		--text-body-sm: 1rem;
		--header-height: 60px;
	}
}