/* ==========================================================================
   Jetons de design SEMA
   Palette dérivée du logo : marine #023375 (57 % des pixels du logo) et
   rouge #D40A10 (10 %). Les nuances intermédiaires sont construites pour
   garder un contraste AA sur fond blanc.
   Répartition visée 60 / 30 / 10 : blanc et bleu très clair dominent,
   le marine structure, le rouge reste réservé à l'action.
   ========================================================================== */

:root {
	/* ---- Marine : couleur principale ---- */
	--marine-900: #001a44;
	--marine-800: #012456;
	--marine-700: #023375; /* Primaire — issue du logo */
	--marine-600: #0a4590;
	--marine-500: #1560b8;
	--marine-300: #8fb5e4;
	--marine-200: #c3d6f0;
	--marine-100: #e4edf9;
	--marine-50:  #f2f7fd;

	/* ---- Rouge : couleur d'accent, réservée aux actions ---- */
	--rouge-800: #8e070b;
	--rouge-700: #af080d;
	--rouge-600: #d40a10; /* Accent — issue du logo */
	--rouge-500: #e8262c;
	--rouge-100: #fde8e9;
	--rouge-50:  #fef4f4;

	/* ---- Neutres, légèrement bleutés pour s'accorder au marine ---- */
	--encre:        #0c1524;
	--encre-2:      #4b5a70;
	--encre-3:      #7d8aa0;
	--bordure:      #e3e9f2;
	--bordure-forte:#cbd5e5;
	--surface:      #ffffff;
	--surface-2:    #f6f9fd;
	--fond:         #ffffff;

	/* ---- Couleurs fonctionnelles ---- */
	--succes: #157f4a;
	--alerte: #b45309;
	--erreur: #c0201c;

	/* ---- Rôles sémantiques ---- */
	--c-primaire:       var(--marine-700);
	--c-primaire-fonce: var(--marine-800);
	--c-primaire-clair: var(--marine-100);
	--c-secondaire:     var(--marine-500);
	--c-accent:         var(--rouge-600);
	--c-accent-fonce:   var(--rouge-700);
	--c-texte:          var(--encre);
	--c-texte-2:        var(--encre-2);
	--c-bordure:        var(--bordure);

	/* ---- Typographie ---- */
	--police-titre: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
	--police-texte: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
	--police-citation: 'Newsreader', Georgia, 'Times New Roman', serif;

	--txt-xs:   0.8125rem;
	--txt-sm:   0.875rem;
	--txt-base: 1rem;
	--txt-lg:   clamp(1.0625rem, 1.02rem + 0.18vw, 1.1875rem);
	--txt-xl:   clamp(1.1875rem, 1.1rem + 0.35vw, 1.375rem);

	--titre-s:    clamp(1.1875rem, 1.12rem + 0.34vw, 1.375rem);
	--titre-m:    clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem);
	--titre-l:    clamp(1.75rem, 1.42rem + 1.5vw, 2.625rem);
	--titre-xl:   clamp(2rem, 1.5rem + 2.3vw, 3.25rem);
	--titre-hero: clamp(2.25rem, 1.5rem + 3.4vw, 4.25rem);

	--interligne-serre:  1.1;
	--interligne-titre:  1.16;
	--interligne-texte:  1.68;

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

	--espace-section: clamp(4rem, 3rem + 5vw, 7.5rem);

	/* ---- Grille ---- */
	--largeur-conteneur: 1240px;
	--largeur-texte: 68ch;
	--gouttiere: clamp(1rem, 0.5rem + 2.5vw, 2.5rem); /* 16 px minimum sur mobile */

	/* ---- Rayons ---- */
	--r-s:  8px;
	--r-m:  14px;
	--r-l:  22px;
	--r-xl: 32px;
	--r-pilule: 999px;

	/* ---- Ombres, teintées de marine plutôt que de noir ---- */
	--ombre-s: 0 1px 2px rgba(2, 51, 117, 0.06), 0 2px 8px rgba(2, 51, 117, 0.05);
	--ombre-m: 0 4px 12px rgba(2, 51, 117, 0.07), 0 12px 28px rgba(2, 51, 117, 0.07);
	--ombre-l: 0 10px 24px rgba(2, 51, 117, 0.08), 0 28px 60px rgba(2, 51, 117, 0.12);
	--ombre-accent: 0 8px 24px rgba(212, 10, 16, 0.24);

	/*
	 * ---- Transitions ----
	 * Tempo calqué sur cliniqueachark.ma, dont tout le mouvement tient à des
	 * transitions CSS : duration-300 pour le retour immédiat d'un bouton,
	 * duration-500 pour les cartes et les couleurs, duration-700 pour les
	 * grands mouvements d'image. Ces durées longues sont ce qui donne
	 * l'impression de calme ; les raccourcir casserait l'effet recherché.
	 */
	--transition-rapide: 300ms cubic-bezier(0.4, 0, 0.2, 1);
	--transition: 500ms cubic-bezier(0.4, 0, 0.2, 1);
	--transition-douce: 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
	--transition-reveal: 850ms cubic-bezier(0.16, 1, 0.3, 1);

	/*
	 * Courbe d'entrée, reprise de la référence : un départ franc puis une
	 * décélération longue. C'est elle qui donne aux apparitions leur impression
	 * de poids, là où un ease-out standard paraît mou.
	 */
	--courbe-entree: cubic-bezier(0.2, 0.8, 0.2, 1);
	--duree-entree: 1200ms;

	/* ---- Empilement ---- */
	--z-entete: 100;
	--z-nav: 110;
	--z-voile: 105;
}

/* Les animations d'apparition sont un confort, jamais une condition de lecture. */
@media (prefers-reduced-motion: reduce) {
	:root {
		--transition-rapide: 1ms;
		--transition: 1ms;
		--transition-douce: 1ms;
		--transition-reveal: 1ms;
	}
}