/*
 * KMM Consulting — main.css
 * Chargée sur toutes les pages. CSS natif, sans compilation.
 *
 * Ordre des couches : les couches déclarées plus loin l’emportent,
 * quelle que soit la spécificité des sélecteurs (pas de !important).
 */
@layer wp, reset, tokens, base, layout, components, sections, utilities;
/* « wp » : styles de WordPress (blocs, styles globaux), rangés sous le thème par inc/enqueue.php. */

/* =========================================================================
 * Polices auto-hébergées (licence OFL, voir assets/fonts/LICENSE-OFL.txt)
 * Les polices « Fallback » ajustent Arial aux proportions des polices KMM :
 * le texte ne « saute » pas quand la vraie police arrive (CLS).
 * ====================================================================== */
@font-face {
	font-family: "Space Grotesk";
	src: url("../fonts/space-grotesk-500.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Space Grotesk";
	src: url("../fonts/space-grotesk-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Inter";
	src: url("../fonts/inter-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Inter";
	src: url("../fonts/inter-600.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "JetBrains Mono";
	src: url("../fonts/jetbrains-mono-500.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Space Grotesk Fallback";
	src: local("Arial"), local("Helvetica"), local("Liberation Sans");
	size-adjust: 110.9%;
	ascent-override: 88.7%;
	descent-override: 26.3%;
	line-gap-override: 0%;
}
@font-face {
	font-family: "Inter Fallback";
	src: local("Arial"), local("Helvetica"), local("Liberation Sans");
	size-adjust: 107.06%;
	ascent-override: 90.49%;
	descent-override: 22.54%;
	line-gap-override: 0%;
}

/* =========================================================================
 * Reset
 * ====================================================================== */
@layer reset {
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	* {
		margin: 0;
	}

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

	img,
	picture,
	video,
	canvas,
	svg {
		display: block;
		max-inline-size: 100%;
	}

	img,
	video {
		block-size: auto;
	}

	input,
	button,
	textarea,
	select {
		font: inherit;
		color: inherit;
	}

	button {
		cursor: pointer;
	}

	ul[class],
	ol[class] {
		list-style: none;
		padding: 0;
	}

	p,
	h1,
	h2,
	h3,
	h4 {
		overflow-wrap: break-word;
	}
}

/* =========================================================================
 * Tokens
 * Couleur de marque relevée sur le logo officiel : #021568 (teinte 229°).
 * Toute la palette est harmonisée sur cette teinte.
 * ====================================================================== */
@layer tokens {
	:root {
		/* --- Couleurs brutes (source unique : ne pas dupliquer ailleurs) --- */
		--kmm-navy: #021568;        /* Bleu du logo : fonds sombres, bouton principal, titres */
		--kmm-navy-soft: #0b2585;   /* Surfaces posées sur fond sombre */
		--kmm-navy-muted: #b4bfe6;  /* Texte secondaire sur fond sombre */
		--kmm-blue: #3da5f5;        /* Bleu clair : traits, impulsions, accents sur fond sombre. Décoratif seulement sur blanc */
		--kmm-blue-hover: #6cbaf8;  /* Survol du bouton bleu clair */
		--kmm-blue-strong: #1257d1; /* Liens et focus sur fond clair */
		--kmm-white: #ffffff;
		--kmm-gray-100: #f2f4f9;    /* Sections alternées */
		--kmm-gray-200: #e3e7f0;    /* Bordures de cartes (décoratif) */
		--kmm-gray-400: #c4c9d8;    /* Séparateurs, trait « imaginer » sur fond clair (décoratif) */
		--kmm-gray-600: #5f6780;    /* Texte secondaire, bordures de champs */
		--kmm-gray-800: #252b3d;    /* Texte courant */
		--kmm-success: #0b7a43;
		--kmm-error: #c62a2f;
		--kmm-whatsapp: #0b7a43;    /* Vert WhatsApp assombri pour atteindre le contraste AA */

		/* --- Couleurs sémantiques (surface claire par défaut) --- */
		--color-bg: var(--kmm-white);
		--color-surface: var(--kmm-white);
		--color-surface-alt: var(--kmm-gray-100);
		--color-heading: var(--kmm-navy);
		--color-text: var(--kmm-gray-800);
		--color-text-muted: var(--kmm-gray-600);
		--color-link: var(--kmm-blue-strong);
		--color-link-hover: var(--kmm-navy);
		--color-focus: var(--kmm-blue-strong);
		--color-border: var(--kmm-gray-200);
		--color-border-strong: var(--kmm-gray-400);
		--color-border-input: var(--kmm-gray-600);
		--color-accent: var(--kmm-blue);
		--color-label: var(--kmm-blue-strong);
		--color-success: var(--kmm-success);
		--color-error: var(--kmm-error);

		--btn-primary-bg: var(--kmm-navy);
		--btn-primary-bg-hover: var(--kmm-navy-soft);
		--btn-primary-text: var(--kmm-white);
		--btn-secondary-text: var(--kmm-navy);
		--btn-secondary-border: var(--kmm-navy);
		--btn-secondary-bg-hover: var(--kmm-gray-100);

		/* --- Typographie --- */
		--font-display: "Space Grotesk", "Space Grotesk Fallback", "Segoe UI", Arial, sans-serif;
		--font-body: "Inter", "Inter Fallback", "Segoe UI", Roboto, Arial, sans-serif;
		--font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;

		--fs-hero: clamp(2rem, 0.25rem + 8.6vw, 4.75rem);  /* Chaque verbe du Hero tient sur une ligne dès 320 px */
		--fs-h1: clamp(2rem, 1.1rem + 3.4vw, 3.75rem);      /* « Télécommunications » tient à 360 px sans césure */
		--fs-h2: clamp(1.875rem, 1.5rem + 1.6vw, 2.875rem);
		--fs-h3: clamp(1.3rem, 1.2rem + 0.5vw, 1.625rem);
		--fs-lead: clamp(1.125rem, 1.05rem + 0.4vw, 1.3rem);
		--fs-body: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
		--fs-small: 0.875rem;
		--fs-label: 0.75rem;

		--lh-tight: 1.08;
		--lh-heading: 1.18;
		--lh-base: 1.6;

		--measure: 68ch;

		/* --- Espacements --- */
		--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;
		--space-10: 8rem;
		--section-y: clamp(4rem, 2.5rem + 6vw, 8rem);

		/* --- Largeurs --- */
		--container: 80rem;         /* 1280px */
		--container-narrow: 47.5rem; /* 760px */
		--gutter: clamp(1rem, 0.5rem + 2vw, 1.5rem);

		/* --- Formes --- */
		--radius-sm: 4px;
		--radius-md: 6px;
		--radius-lg: 10px;
		--radius-full: 999px;
		--shadow-sm: 0 1px 2px rgb(2 21 104 / 0.06), 0 4px 12px rgb(2 21 104 / 0.06);
		--shadow-header: 0 1px 0 rgb(2 21 104 / 0.08), 0 6px 20px rgb(2 21 104 / 0.08);

		/* --- Grammaire des traits (géométrie octilinéaire : 0°, 45°, 90°) --- */
		--trait-width: 1.5px;
		--trait-dash: 3 7;
		--node-r: 4px;

		/* --- Cibles tactiles et focus --- */
		--target-min: 48px;
		--focus-width: 3px;
		--focus-offset: 2px;
		--header-h: 64px;

		/* --- Mouvement --- */
		--dur-fast: 150ms;
		--dur-base: 250ms;
		--dur-slow: 400ms;
		--dur-draw: 900ms;
		--ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
		--ease-inout: cubic-bezier(0.6, 0, 0.3, 1);

		/* --- Superpositions --- */
		--z-base: 0;
		--z-raised: 10;
		--z-sticky: 50;
		--z-header: 100;
		--z-mobile-bar: 110;
		--z-menu: 200;
		--z-skip: 300;
	}

	/*
	 * Surface sombre : tout bloc portant data-surface="dark" bascule ses couleurs
	 * sémantiques. Les composants s’adaptent seuls, sans variante dédiée.
	 */
	[data-surface="dark"] {
		--color-bg: var(--kmm-navy);
		--color-surface: var(--kmm-navy-soft);
		--color-surface-alt: var(--kmm-navy-soft);
		--color-heading: var(--kmm-white);
		--color-text: var(--kmm-white);
		--color-text-muted: var(--kmm-navy-muted);
		--color-link: var(--kmm-blue);
		--color-link-hover: var(--kmm-white);
		--color-focus: var(--kmm-white); /* Blanc : se distingue du bouton bleu clair */
		--color-border: rgb(255 255 255 / 0.16);
		--color-border-strong: rgb(255 255 255 / 0.32);
		--color-border-input: var(--kmm-navy-muted);
		--color-label: var(--kmm-blue);

		--btn-primary-bg: var(--kmm-blue);
		--btn-primary-bg-hover: var(--kmm-blue-hover);
		--btn-primary-text: var(--kmm-navy);
		--btn-secondary-text: var(--kmm-white);
		--btn-secondary-border: rgb(255 255 255 / 0.72);
		--btn-secondary-bg-hover: rgb(255 255 255 / 0.08);

		background-color: var(--color-bg);
		color: var(--color-text);
	}
}

/* =========================================================================
 * Base
 * ====================================================================== */
@layer base {
	html {
		color-scheme: light;
		scroll-padding-block-start: calc(var(--header-h) + var(--space-4));
	}

	@media (prefers-reduced-motion: no-preference) {
		html {
			scroll-behavior: smooth;
		}
	}

	body {
		min-block-size: 100vh;
		overflow-x: clip; /* Garde-fou uniquement : tout débordement réel se corrige à la source. */
		background-color: var(--color-bg);
		color: var(--color-text);
		font-family: var(--font-body);
		font-size: var(--fs-body);
		font-weight: 400;
		line-height: var(--lh-base);
		font-synthesis: none;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		text-rendering: optimizeLegibility;
	}

	h1,
	h2,
	h3,
	h4 {
		color: var(--color-heading);
		font-family: var(--font-display);
		line-height: var(--lh-heading);
		text-wrap: balance;
		/* Mots longs (« Télécommunications ») : césure sur petit écran. */
		hyphens: auto;
		-webkit-hyphens: auto;
	}

	h1 {
		font-size: var(--fs-h1);
		font-weight: 700;
		line-height: var(--lh-tight);
		letter-spacing: -0.025em;
	}

	h2 {
		font-size: var(--fs-h2);
		font-weight: 700;
		letter-spacing: -0.02em;
	}

	h3 {
		font-size: var(--fs-h3);
		font-weight: 500;
		letter-spacing: -0.01em;
	}

	h4 {
		font-size: var(--fs-body);
		font-weight: 700;
	}

	@media (min-width: 48em) {
		h1,
		h2,
		h3,
		h4 {
			hyphens: manual;
			-webkit-hyphens: manual;
		}
	}

	p {
		text-wrap: pretty;
	}

	strong,
	b {
		font-weight: 600;
	}

	small {
		font-size: var(--fs-small);
	}

	a {
		color: var(--color-link);
		text-decoration-line: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 0.2em;
		transition: color var(--dur-fast) var(--ease-out), text-decoration-thickness var(--dur-fast) var(--ease-out);
	}

	a:hover {
		color: var(--color-link-hover);
		text-decoration-thickness: 2px;
	}

	:focus-visible {
		outline: var(--focus-width) solid var(--color-focus);
		outline-offset: var(--focus-offset);
		border-radius: var(--radius-sm);
	}

	::selection {
		background-color: var(--kmm-blue);
		color: var(--kmm-navy);
	}

	code,
	kbd,
	samp,
	pre {
		font-family: var(--font-mono);
		font-size: 0.9em;
	}

	hr {
		border: 0;
		border-block-start: 1px solid var(--color-border);
	}

	[hidden] {
		display: none !important; /* Seule exception : l’attribut natif doit toujours masquer. */
	}

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

/* =========================================================================
 * Mise en page
 * ====================================================================== */
@layer layout {
	.l-container {
		inline-size: 100%;
		max-inline-size: calc(var(--container) + 2 * var(--gutter));
		margin-inline: auto;
		padding-inline: var(--gutter);
	}

	.l-container--narrow {
		max-inline-size: calc(var(--container-narrow) + 2 * var(--gutter));
	}

	.l-section {
		padding-block: var(--section-y);
	}

	.l-section--alt {
		background-color: var(--color-surface-alt);
	}

	/* Empilement vertical régulier : l’espace est porté par le parent. */
	.l-stack {
		display: flex;
		flex-direction: column;
		gap: var(--stack-space, var(--space-5));
	}

	/* Rangée d’éléments qui passent à la ligne (boutons, étiquettes). */
	.l-cluster {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--cluster-space, var(--space-3));
	}

	/* Grilles : 1 colonne sur mobile, puis 2 et 3 colonnes. */
	.l-grid {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: var(--grid-space, var(--space-5));
	}

	/* Tuiles de secteurs : 2 colonnes dès le mobile. */
	.l-grid--tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--grid-space, var(--space-4));
	}

	@media (min-width: 48em) {
		.l-grid--2,
		.l-grid--3 {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

		.l-grid--tiles {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}
	}

	@media (min-width: 64em) {
		.l-grid--3 {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}

		.l-grid--tiles {
			grid-template-columns: repeat(4, minmax(0, 1fr));
		}
	}

}

/* =========================================================================
 * Composants
 * ====================================================================== */
@layer components {

	/* ---------- Icônes ---------- */
	.c-icon {
		display: inline-block;
		flex: none;
		inline-size: var(--icon-size, 1.25em);
		block-size: var(--icon-size, 1.25em);
		fill: none;
		stroke: currentColor;
		stroke-width: 1.75;
		stroke-linecap: round;
		stroke-linejoin: round;
		vertical-align: -0.2em;
	}

	/* ---------- Logo (jamais modifié : dimensions et pastille seulement) ---------- */
	.c-logo {
		display: inline-flex;
		align-items: center;
	}

	.c-logo__image {
		inline-size: auto;
		block-size: var(--logo-h, 2.25rem);
	}

	.c-logo--on-plate {
		padding: var(--space-2) var(--space-3);
		border-radius: var(--radius-md);
		background-color: var(--kmm-white);
	}

	.c-logo--text {
		color: var(--color-heading);
		font-family: var(--font-display);
		font-size: 1.25rem;
		font-weight: 700;
		letter-spacing: -0.01em;
	}

	/* ---------- Libellé technique (usage parcimonieux) ---------- */
	.c-label {
		display: inline-block;
		color: var(--color-label);
		font-family: var(--font-mono);
		font-size: var(--fs-label);
		font-weight: 500;
		line-height: 1.4;
		letter-spacing: 0.08em;
		text-transform: uppercase;
	}

	/* ---------- Boutons ---------- */
	.c-button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--space-2);
		min-block-size: var(--target-min);
		padding: var(--space-3) var(--space-5);
		border: 1.5px solid transparent;
		border-radius: var(--radius-md);
		font-family: var(--font-body);
		font-size: 1rem;
		font-weight: 600;
		line-height: 1.25;
		text-align: center;
		text-decoration: none;
		transition:
			background-color var(--dur-fast) var(--ease-out),
			border-color var(--dur-fast) var(--ease-out),
			color var(--dur-fast) var(--ease-out);
	}

	.c-button:hover {
		text-decoration: none;
	}

	.c-button .c-icon {
		--icon-size: 1.25rem;
		transition: transform var(--dur-fast) var(--ease-out);
	}

	.c-button:hover .c-icon--arrow-right {
		transform: translateX(3px);
	}

	.c-button--primary {
		background-color: var(--btn-primary-bg);
		color: var(--btn-primary-text);
	}

	.c-button--primary:hover {
		background-color: var(--btn-primary-bg-hover);
		color: var(--btn-primary-text);
	}

	.c-button--secondary {
		border-color: var(--btn-secondary-border);
		background-color: transparent;
		color: var(--btn-secondary-text);
	}

	.c-button--secondary:hover {
		background-color: var(--btn-secondary-bg-hover);
		color: var(--btn-secondary-text);
	}

	.c-button--whatsapp {
		background-color: var(--kmm-whatsapp);
		color: var(--kmm-white);
	}

	.c-button--whatsapp:hover {
		background-color: #09663a;
		color: var(--kmm-white);
	}

	.c-button--block {
		inline-size: 100%;
	}

	/* ---------- En-tête de section ---------- */
	.c-section-header {
		display: flex;
		flex-direction: column;
		gap: var(--space-4);
		max-inline-size: 48rem;
		margin-block-end: var(--space-7);
	}

	.c-section-header--center {
		align-items: center;
		margin-inline: auto;
		text-align: center;
	}

	.c-section-header__intro {
		max-inline-size: var(--measure);
		color: var(--color-text-muted);
		font-size: var(--fs-lead);
		line-height: 1.55;
	}

	/* ---------- Texte d’introduction ---------- */
	.c-lead {
		max-inline-size: var(--measure);
		font-size: var(--fs-lead);
		line-height: 1.55;
	}

	/* ---------- Étiquettes (secteurs, technologies) ---------- */
	.c-tag {
		display: inline-flex;
		align-items: center;
		gap: var(--space-2);
		min-block-size: 2rem;
		padding: var(--space-1) var(--space-3);
		border: 1px solid var(--color-border-strong);
		border-radius: var(--radius-full);
		color: var(--color-text);
		font-size: var(--fs-small);
		line-height: 1.3;
		text-decoration: none;
	}

	a.c-tag {
		min-block-size: 2.25rem;
	}

	a.c-tag:hover {
		border-color: var(--color-link);
		color: var(--color-link);
	}

	/* ---------- Carte (base commune) ---------- */
	.c-card {
		position: relative;
		display: flex;
		flex-direction: column;
		gap: var(--space-4);
		padding: var(--space-6);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-lg);
		background-color: var(--color-surface);
		transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
	}

	.c-card__title {
		font-size: var(--fs-h3);
	}

	.c-card__text {
		color: var(--color-text-muted);
	}

	/* Toute la carte est cliquable, mais seul le titre est un lien (pas de liens imbriqués). */
	.c-card__link {
		color: inherit;
		text-decoration: none;
	}

	.c-card__link::after {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: inherit;
	}

	.c-card__link:focus-visible {
		outline: none;
	}

	.c-card:has(.c-card__link:focus-visible) {
		outline: var(--focus-width) solid var(--color-focus);
		outline-offset: var(--focus-offset);
	}

	.c-card:has(.c-card__link):hover {
		border-color: var(--color-border-strong);
		box-shadow: var(--shadow-sm);
	}

	.c-card__more {
		display: inline-flex;
		align-items: center;
		gap: var(--space-2);
		margin-block-start: auto;
		color: var(--color-link);
		font-weight: 600;
	}
}

/* =========================================================================
 * Header, navigation, fil d’Ariane, footer, barre mobile (LOT 3)
 * ====================================================================== */
@layer components {
	:root {
		--admin-bar: 0px;
		--mobile-bar-h: 4.5rem;
	}

	.admin-bar {
		--admin-bar: 46px;
	}

	@media (min-width: 48.9375em) {
		.admin-bar {
			--admin-bar: 32px;
		}
	}

	/* Header fixe : aucun décalage au défilement. */
	.js body {
		padding-block-start: var(--header-h);
	}

	.c-header-sentinel {
		position: absolute;
		inset-block-start: 0;
		block-size: 8px;
		inline-size: 1px;
		pointer-events: none;
	}

	.c-site-header {
		z-index: var(--z-header);
		background-color: var(--kmm-white);
		transition: box-shadow var(--dur-base) var(--ease-out);
	}

	.js .c-site-header {
		position: fixed;
		inset-block-start: var(--admin-bar);
		inset-inline: 0;
	}

	.c-site-header.is-scrolled {
		box-shadow: var(--shadow-header);
	}

	.c-site-header__bar {
		display: flex;
		align-items: center;
		gap: var(--space-5);
		block-size: var(--header-h);
		transition: block-size var(--dur-base) var(--ease-out);
	}

	.is-scrolled .c-site-header__bar {
		block-size: 56px;
	}

	.c-site-header__brand {
		display: inline-flex;
		align-items: center;
		min-block-size: var(--target-min);
		margin-inline-end: auto;
		text-decoration: none;
	}

	.c-site-header__brand .c-logo__image {
		--logo-h: 2.75rem; /* « CONSULTING » reste lisible */
		transition: block-size var(--dur-base) var(--ease-out);
	}

	.is-scrolled .c-site-header__brand .c-logo__image {
		--logo-h: 2.25rem;
	}

	.c-site-header__cta,
	.c-nav {
		display: none;
	}

	/* ---------- Bouton Menu (mobile) ---------- */
	.c-menu-toggle {
		display: inline-flex;
		align-items: center;
		gap: var(--space-2);
		min-block-size: var(--target-min);
		padding-inline: var(--space-4);
		border: 1.5px solid var(--color-border-strong);
		border-radius: var(--radius-md);
		background: transparent;
		color: var(--kmm-navy);
		font-weight: 600;
	}

	.c-menu-toggle .c-icon {
		--icon-size: 1.375rem;
	}

	.c-menu-toggle[aria-expanded="true"] .c-menu-toggle__open,
	.c-menu-toggle:not([aria-expanded="true"]) .c-menu-toggle__close {
		display: none;
	}

	.no-js .c-menu-toggle {
		display: none;
	}

	/* ---------- Menu mobile ---------- */
	.c-mobile-nav {
		border-block-start: 1px solid var(--color-border);
		background-color: var(--kmm-white);
	}

	.js .c-mobile-nav {
		position: fixed;
		inset: calc(var(--admin-bar) + var(--header-h)) 0 0;
		z-index: var(--z-menu);
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.js .c-mobile-nav:not(.is-open) {
		display: none;
	}

	.is-menu-open {
		overflow: hidden;
	}

	.c-mobile-nav__inner {
		display: flex;
		flex-direction: column;
		gap: var(--space-6);
		padding-block: var(--space-4) var(--space-7);
	}

	.c-mobile-nav__list > li {
		border-block-end: 1px solid var(--color-border);
	}

	.c-mobile-nav__link {
		display: flex;
		align-items: center;
		min-block-size: 3.5rem;
		color: var(--kmm-navy);
		font-family: var(--font-display);
		font-size: 1.375rem;
		font-weight: 500;
		text-decoration: none;
	}

	.c-mobile-nav__sub {
		padding-block-end: var(--space-3);
	}

	.c-mobile-nav__sublink,
	.c-nav__sublink {
		display: flex;
		align-items: center;
		gap: var(--space-3);
		min-block-size: var(--target-min);
		color: var(--color-text);
		text-decoration: none;
	}

	.c-nav__group,
	.c-mobile-nav__group {
		padding: var(--space-3) var(--space-3) var(--space-1);
		color: var(--color-text-muted);
		font-size: var(--fs-label);
		font-weight: 600;
		letter-spacing: 0.06em;
		text-transform: uppercase;
	}

	.c-mobile-nav__group {
		padding-inline: 0;
	}

	.c-mobile-nav__sublink .c-icon,
	.c-nav__sublink .c-icon {
		color: var(--kmm-blue-strong);
	}

	.c-mobile-nav [aria-current="page"],
	.c-mobile-nav [data-section="current"] {
		text-decoration: underline;
		text-decoration-thickness: 2px;
		text-underline-offset: 0.3em;
	}

	/* ---------- Navigation desktop ---------- */
	@media (min-width: 64em) {
		.c-nav {
			display: block;
		}

		.c-site-header__cta {
			display: inline-flex;
		}

		.c-menu-toggle,
		.c-mobile-nav {
			display: none !important; /* Masqué au-dessus de 1024 px, y compris sans JavaScript. */
		}

		.c-nav__list {
			display: flex;
			align-items: center;
			gap: var(--space-1);
		}

		.c-nav__item {
			position: relative;
			display: flex;
			align-items: center;
		}

		.c-nav__link {
			display: inline-flex;
			align-items: center;
			min-block-size: var(--target-min);
			padding-inline: var(--space-3);
			color: var(--kmm-navy);
			font-weight: 600;
			font-size: 0.9375rem;
			text-decoration: none;
		}

		/* 1024–1279 px : espacements resserrés, pour que 5 éléments et le bouton tiennent avec de la marge. */
		@media (max-width: 79.99em) {
			.c-site-header__bar { gap: var(--space-4); }
			.c-nav__link { padding-inline: var(--space-2); }
			.c-site-header__cta { padding-inline: var(--space-4); }
		}

		.c-nav__item.has-children .c-nav__link {
			padding-inline-end: var(--space-1);
		}

		.c-nav__link:hover,
		.c-nav__link[aria-current="page"],
		.c-nav__link[data-section="current"] {
			color: var(--kmm-navy);
			text-decoration: underline;
			text-decoration-thickness: 2px;
			text-underline-offset: 0.45em;
		}

		.c-nav__toggle {
			display: inline-grid;
			place-items: center;
			inline-size: 2rem;
			block-size: var(--target-min);
			padding: 0;
			border: 0;
			border-radius: var(--radius-sm);
			background: transparent;
			color: var(--kmm-navy);
		}

		.c-nav__toggle .c-icon {
			transition: transform var(--dur-fast) var(--ease-out);
		}

		.c-nav__toggle[aria-expanded="true"] .c-icon {
			transform: rotate(180deg);
		}

		.c-nav__sub {
			position: absolute;
			inset-block-start: 100%;
			inset-inline-start: 0;
			z-index: var(--z-raised);
			display: none;
			min-inline-size: 21rem;
			padding: var(--space-2);
			border: 1px solid var(--color-border);
			border-radius: var(--radius-lg);
			background-color: var(--kmm-white);
			box-shadow: var(--shadow-header);
		}

		.c-nav__item.is-open > .c-nav__sub,
		.no-js .c-nav__item:hover > .c-nav__sub,
		.no-js .c-nav__item:focus-within > .c-nav__sub {
			display: block;
		}

		.c-nav__sublink {
			padding-inline: var(--space-3);
			border-radius: var(--radius-md);
			font-size: 0.9375rem;
		}

		.c-nav__sublink:hover,
		.c-nav__sublink[aria-current="page"] {
			background-color: var(--kmm-gray-100);
			color: var(--kmm-navy);
		}
	}

	/* ---------- Fil d’Ariane ---------- */
	.c-breadcrumb {
		padding-block: var(--space-4);
		font-size: var(--fs-small);
	}

	.c-breadcrumb__list {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--space-1) var(--space-2);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.c-breadcrumb__item {
		display: inline-flex;
		align-items: center;
		gap: var(--space-2);
	}

	/* Séparateur : chevron à 45°, dessiné en CSS (non lu par les lecteurs d’écran). */
	.c-breadcrumb__item + .c-breadcrumb__item::before {
		content: "";
		inline-size: 0.4em;
		block-size: 0.4em;
		border-block-start: 1.5px solid var(--kmm-gray-400);
		border-inline-end: 1.5px solid var(--kmm-gray-400);
		transform: rotate(45deg);
	}

	.c-breadcrumb__link {
		display: inline-flex;
		align-items: center;
		min-block-size: 1.5rem;
		color: var(--color-text-muted);
	}

	.c-breadcrumb__current {
		color: var(--color-text);
		font-weight: 600;
	}

	/* ---------- Canaux de contact ---------- */
	.c-channels {
		display: flex;
		flex-direction: column;
		gap: var(--space-4);
	}

	.c-channels__item {
		display: flex;
		align-items: flex-start;
		gap: var(--space-3);
	}

	.c-channels__item > .c-icon {
		margin-block-start: 0.2em;
		color: var(--color-label);
	}

	.c-channels__content {
		display: flex;
		flex-direction: column;
		gap: var(--space-1);
	}

	.c-channels__link {
		color: var(--color-text);
		text-decoration: none;
	}

	.c-channels__link:hover {
		color: var(--color-link-hover);
		text-decoration: underline;
	}

	.c-channels__map {
		color: var(--color-link);
		font-size: var(--fs-small);
		text-decoration: underline;
	}

	.c-channels__address {
		font-style: normal;
	}

	/* ---------- Footer ---------- */
	.c-site-footer {
		padding-block: var(--space-8) var(--space-6);
		font-size: 0.9375rem;
	}

	.c-site-footer__grid {
		display: grid;
		gap: var(--space-7);
	}

	@media (min-width: 48em) {
		.c-site-footer__grid {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}

	@media (min-width: 64em) {
		.c-site-footer__grid {
			grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr));
		}
	}

	.c-site-footer__logo {
		display: inline-flex;
		align-self: flex-start;
		text-decoration: none;
		--logo-h: 3rem;
	}

	.c-site-footer__text {
		max-inline-size: 36ch;
		color: var(--color-text-muted);
	}

	.c-site-footer__title {
		margin-block-end: var(--space-4);
		color: var(--color-heading);
		font-size: 1rem;
		font-weight: 700;
		letter-spacing: 0;
	}

	.c-site-footer__links,
	.c-site-footer__legal {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.c-site-footer__links a,
	.c-site-footer__legal a {
		display: inline-flex;
		align-items: center;
		min-block-size: 2.25rem;
		color: var(--color-text);
		text-decoration: none;
	}

	.c-site-footer__links a:hover,
	.c-site-footer__legal a:hover,
	.c-site-footer a[aria-current="page"] {
		text-decoration: underline;
	}

	.c-site-footer__bottom {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-2) var(--space-6);
		margin-block-start: var(--space-8);
		padding-block-start: var(--space-5);
		border-block-start: 1px solid var(--color-border);
		color: var(--color-text-muted);
		font-size: var(--fs-small);
	}

	.c-site-footer__legal {
		display: flex;
		flex-wrap: wrap;
		gap: 0 var(--space-5);
	}

	/* ---------- Barre d’action mobile ---------- */
	.c-mobile-bar {
		position: fixed;
		inset: auto 0 0;
		z-index: var(--z-mobile-bar);
		display: flex;
		gap: var(--space-2);
		padding: var(--space-3) var(--gutter) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
		border-block-start: 1px solid var(--color-border);
		background-color: var(--kmm-white);
		box-shadow: 0 -6px 20px rgb(2 21 104 / 0.08);
		transition: transform var(--dur-base) var(--ease-out), visibility var(--dur-base);
	}

	.c-mobile-bar > .c-button {
		flex: 1 1 0;
		padding-inline: var(--space-3);
	}

	.c-mobile-bar.is-enhanced:not(.is-visible),
	.is-menu-open .c-mobile-bar {
		visibility: hidden;
		transform: translateY(110%);
	}

	.has-mobile-bar {
		padding-block-end: calc(var(--mobile-bar-h) + env(safe-area-inset-bottom, 0px));
	}

	@media (min-width: 48em) {
		.c-mobile-bar {
			display: none;
		}

		.has-mobile-bar {
			padding-block-end: 0;
		}
	}
}

/* =========================================================================
 * Utilitaires
 * ====================================================================== */
@layer utilities {
	.u-visually-hidden:not(:focus):not(:active) {
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.u-skip-link {
		position: absolute;
		inset-block-start: var(--space-3);
		inset-inline-start: var(--space-3);
		z-index: var(--z-skip);
		padding: var(--space-3) var(--space-5);
		border-radius: var(--radius-md);
		background-color: var(--kmm-navy);
		color: var(--kmm-white);
		font-weight: 600;
		transform: translateY(-200%);
	}

	.u-skip-link:focus {
		transform: none;
	}

	.u-text-muted {
		color: var(--color-text-muted);
	}

	/* Apparition discrète, uniquement pour les éléments marqués data-reveal. */
	@media (prefers-reduced-motion: no-preference) {
		.js [data-reveal] {
			transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
		}

		.js [data-reveal]:not(.is-revealed) {
			opacity: 0;
			transform: translateY(12px);
		}
	}
}