/* Bloc cnd/site-header — en-tête commun (univers Réseau). Couleurs, typo, espacements : tokens
   uniquement. Les dimensions propres à la maquette sont des paramètres de composant (pas des tokens
   de design, cf. docs/tokens.md §4), déclarés une seule fois ci-dessous.
   Anti-décalage (CLS) : grille à hauteurs de rangées fixes, logo à dimensions réservées,
   réorganisation bureau/mobile en CSS seul, sous-menus en position absolue, panneau mobile caché
   au chargement. */
.cnd.cnd-site-header {
	--cnd-header-logo: 108px;
	--cnd-header-logo-mobile: 72px;
	--cnd-header-top: 58px;
	--cnd-header-nav: 62px;
	--cnd-header-round: 44px;
	--cnd-header-social: 30px;
	--cnd-header-sub-min: 250px;
	position: relative;
	z-index: 50;
	background: var(--surface);
	border-bottom: 1px solid var(--line);
	font-family: var(--font-body);
	color: var(--ink);
}
.cnd.cnd-site-header ul,
.cnd.cnd-site-header p {
	margin: 0;
	padding: 0;
	list-style: none;
}
/* Contre-QA v0.4.1, point 1 : le kit Elementor pose sa police d'accent (Roboto) directement sur les
   liens (.elementor-kit-N a, 0,1,1) ; la police de la racine ne leur parvenait pas. 0,2,1 : gagne
   même hors du gabarit maison. */
.cnd.cnd-site-header a { font-family: inherit; }

/* ---------- Grille bureau : [haut gauche | logo | haut droite] / [menu gauche | logo | menu droite] */
.cnd.cnd-site-header .cnd-site-header__inner {
	max-width: var(--cnd-site-width);
	margin: 0 auto;
	padding: 0 var(--s-5);
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	grid-template-rows: var(--cnd-header-top) var(--cnd-header-nav);
	grid-template-areas:
		"top-start logo top-end"
		"nav-start logo nav-end";
	column-gap: var(--s-5);
}
.cnd.cnd-site-header .cnd-site-header__top {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	min-width: 0;
	border-bottom: 1px solid var(--line);
}
.cnd.cnd-site-header .cnd-site-header__top--start { grid-area: top-start; }
.cnd.cnd-site-header .cnd-site-header__top--end { grid-area: top-end; justify-content: flex-end; gap: var(--s-5); }
.cnd.cnd-site-header .cnd-site-header__nav {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	min-width: 0;
	height: 100%;
}
.cnd.cnd-site-header .cnd-site-header__nav--start { grid-area: nav-start; }
.cnd.cnd-site-header .cnd-site-header__nav--end { grid-area: nav-end; justify-content: flex-end; }

/* Barre supérieure : 12 px (design system). « Suivez-nous » en --ink-3 : --ink-4 n'est pas un gris de texte. */
.cnd.cnd-site-header .cnd-site-header__follow {
	font-size: var(--t-caption);
	color: var(--ink-3);
	white-space: nowrap;
}
.cnd.cnd-site-header .cnd-site-header__social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: var(--cnd-header-social);
	height: var(--cnd-header-social);
	border-radius: var(--r-pill);
	border: 1px solid var(--line);
	background: var(--surface);
	color: var(--ink-3);
	text-decoration: none;
}
.cnd.cnd-site-header .cnd-site-header__social .cnd-icon { width: var(--s-4); height: var(--s-4); }
.cnd.cnd-site-header .cnd-site-header__social:hover { border-color: var(--brand-strong); color: var(--brand-strong); }
.cnd.cnd-site-header .cnd-site-header__toplink {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	font-size: var(--t-caption);
	font-weight: 500;
	color: var(--ink);
	text-decoration: none;
	white-space: nowrap;
}
.cnd.cnd-site-header .cnd-site-header__toplink .cnd-icon { color: var(--ink-3); }
.cnd.cnd-site-header .cnd-site-header__toplink:hover,
.cnd.cnd-site-header .cnd-site-header__toplink:hover .cnd-icon { color: var(--brand-strong); }

/* Logo : bloc noir, capitales blanches (image du site). Dimensions réservées par les attributs width/height. */
.cnd.cnd-site-header .cnd-site-header__logo {
	grid-area: logo;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	color: var(--ink);
}
.cnd.cnd-site-header .cnd-site-header__logo-img {
	display: block;
	width: var(--cnd-header-logo);
	height: var(--cnd-header-logo);
	max-width: none;
	object-fit: contain;
}

/* ---------- Pilules du menu : 14 px / 500. Au survol, teinte de l’univers
   (v0.33.8 : univers de la page, hérité de l’en-tête ; Réseau sur les pages neutres). */
.cnd.cnd-site-header .cnd-nav {
	display: flex;
	align-items: stretch;
	gap: var(--s-1);
	height: 100%;
}
.cnd.cnd-site-header .cnd-nav__item {
	position: relative;
	display: flex;
	align-items: center;
}
.cnd.cnd-site-header .cnd-nav__pill,
.cnd.cnd-site-header .cnd-nav__pill:focus {
	display: inline-flex;
	align-items: center;
	gap: var(--s-1);
	height: auto;
	min-height: 0;
	margin: 0;
	padding: var(--s-2) var(--s-4);
	border: none;
	border-radius: var(--r-pill);
	background: transparent;
	box-shadow: none;
	font-family: var(--font-body);
	font-size: var(--t-small);
	font-weight: 500;
	line-height: 1.2;
	color: var(--ink);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}
.cnd.cnd-site-header .cnd-nav__pill:hover,
.cnd.cnd-site-header .cnd-nav__pill[aria-expanded="true"],
.cnd.cnd-site-header .cnd-nav__pill[aria-current="page"] {
	background: var(--brand-tint);
	color: var(--brand-strong);
}
.cnd.cnd-site-header .cnd-nav__pill .cnd-icon {
	color: currentColor;
	transition: transform .15s ease;
}
.cnd.cnd-site-header .cnd-nav__pill[aria-expanded="true"] .cnd-icon { transform: rotate(180deg); }
/* Pilule double (v0.27.0) : lien + chevron, une seule pilule à l'œil (même teinte au survol et à
   l'ouverture), deux cibles au clavier. */
.cnd.cnd-site-header .cnd-nav__item--split > .cnd-nav__pill--link,
.cnd.cnd-site-header .cnd-nav__item--split > .cnd-nav__pill--link:focus {
	padding-right: var(--s-1);
	border-radius: var(--r-pill) 0 0 var(--r-pill);
}
.cnd.cnd-site-header .cnd-nav__item--split > .cnd-nav__caret,
.cnd.cnd-site-header .cnd-nav__item--split > .cnd-nav__caret:focus {
	padding-left: var(--s-1);
	border-radius: 0 var(--r-pill) var(--r-pill) 0;
}
/* Même hauteur pour les deux moitiés (le chevron de 14 px est plus bas que la ligne de texte). */
.cnd.cnd-site-header .cnd-nav__item--split > .cnd-nav__pill { min-height: calc(1.2em + 2 * var(--s-2)); }
.cnd.cnd-site-header .cnd-nav__item--split:hover > .cnd-nav__pill,
.cnd.cnd-site-header .cnd-nav__item--split:has(> [aria-expanded="true"]) > .cnd-nav__pill,
.cnd.cnd-site-header .cnd-nav__item--split:has(> [aria-current="page"]) > .cnd-nav__pill {
	background: var(--brand-tint);
	color: var(--brand-strong);
}

/* Sous-menus = « menu flottant » du design system : seul composant à ombre (--shadow-float),
   rayon 12 px, items 14 px. Rayon des items : 6 px au design system, sans token — --r-sm (8 px). */
.cnd.cnd-site-header .cnd-nav__sub {
	display: none;
	position: absolute;
	top: 100%;
	z-index: 60;
	min-width: var(--cnd-header-sub-min);
	padding: var(--s-2);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	box-shadow: var(--shadow-float);
}
.cnd.cnd-site-header .cnd-nav__sub--start { left: 0; }
.cnd.cnd-site-header .cnd-nav__sub--end { right: 0; }
/* Sans script : survol et focus clavier ouvrent le panneau. Avec script (.is-js) : seul l'état
   aria-expanded compte — sinon Échap ne pourrait pas refermer un panneau qui garde le focus. */
.cnd.cnd-site-header:not(.is-js) .cnd-nav__item:hover > .cnd-nav__sub,
.cnd.cnd-site-header:not(.is-js) .cnd-nav__item:focus-within > .cnd-nav__sub,
.cnd.cnd-site-header.is-js .cnd-nav__toggle[aria-expanded="true"] + .cnd-nav__sub {
	display: block;
}
.cnd.cnd-site-header .cnd-nav__link {
	display: block;
	padding: var(--s-2) var(--s-3);
	border-radius: var(--r-sm);
	font-size: var(--t-small);
	font-weight: 400;
	line-height: 1.4;
	color: var(--ink);
	text-decoration: none;
	white-space: nowrap;
}
.cnd.cnd-site-header .cnd-nav__link:hover,
.cnd.cnd-site-header .cnd-nav__link[aria-current="page"] {
	background: var(--surface-2);
	color: var(--brand-strong);
}
.cnd.cnd-site-header .cnd-nav__all {
	display: flex;
	width: 100%;
	margin-top: var(--s-2);
	box-sizing: border-box;
}

/* Bouton « Contactez-nous » : bouton principal de l’univers de la page (v0.33.8), règles .cnd-btn--primary. */
.cnd.cnd-site-header .cnd-site-header__cta { margin-left: var(--s-2); white-space: nowrap; }

/* ---------- Boutons ronds (mobile) */
.cnd.cnd-site-header .cnd-site-header__round {
	display: none;
	align-items: center;
	justify-content: center;
	flex: none;
	width: var(--cnd-header-round);
	height: var(--cnd-header-round);
	min-height: 0;
	margin: 0;
	padding: 0;
	border-radius: var(--r-pill);
	text-decoration: none;
	cursor: pointer;
}
/* Couleurs à part de `display` : un :focus plus spécifique ne doit jamais masquer le bouton. */
.cnd.cnd-site-header .cnd-site-header__round,
.cnd.cnd-site-header .cnd-site-header__round:focus {
	border: 1px solid var(--line);
	background: var(--surface);
	box-shadow: none;
	color: var(--ink);
}
.cnd.cnd-site-header .cnd-site-header__round:hover { background: var(--surface-2); color: var(--ink); }
.cnd.cnd-site-header .cnd-site-header__burger-open,
.cnd.cnd-site-header .cnd-site-header__burger-close { display: inline-flex; }
.cnd.cnd-site-header .cnd-site-header__burger[aria-expanded="true"] .cnd-site-header__burger-open,
.cnd.cnd-site-header .cnd-site-header__burger[aria-expanded="false"] .cnd-site-header__burger-close { display: none; }

/* ---------- Panneau mobile : dans le flux, sous la barre (ouvert par l'utilisateur — un décalage
   provoqué par une action de l'utilisateur ne compte pas dans le CLS). */
.cnd.cnd-site-header .cnd-site-header__panel {
	border-top: 1px solid var(--line);
	padding: var(--s-5);
	background: var(--surface);
}
.cnd.cnd-site-header .cnd-site-header__panel[hidden] { display: none; }
.cnd.cnd-site-header .cnd-mnav {
	display: flex;
	flex-direction: column;
	gap: var(--s-5);
}
.cnd.cnd-site-header .cnd-mnav__title {
	margin-bottom: var(--s-2);
	font-size: var(--t-caption);
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ink-3);
}
.cnd.cnd-site-header .cnd-mnav__link {
	display: block;
	padding: var(--s-3) 0;
	border-bottom: 1px solid var(--line);
	font-size: var(--t-body);
	color: var(--ink);
	text-decoration: none;
}
.cnd.cnd-site-header .cnd-mnav__link:hover,
.cnd.cnd-site-header .cnd-mnav__link[aria-current="page"] { color: var(--brand-strong); }
.cnd.cnd-site-header .cnd-mnav__actions {
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
	margin-top: var(--s-6);
}
.cnd.cnd-site-header .cnd-mnav__actions .cnd-btn { width: 100%; box-sizing: border-box; }
.cnd.cnd-site-header .cnd-mnav__social {
	display: flex;
	justify-content: center;
	gap: var(--s-3);
	margin-top: var(--s-5);
}
.cnd.cnd-site-header .cnd-site-header__social--lg {
	width: calc(var(--cnd-header-social) + var(--s-3));
	height: calc(var(--cnd-header-social) + var(--s-3));
}

/* ---------- Bureau étroit : les pilules se resserrent avant le passage en mobile. */
@media (max-width: 1199px) {
	.cnd.cnd-site-header .cnd-site-header__inner { column-gap: var(--s-3); }
	.cnd.cnd-site-header .cnd-nav__pill,
	.cnd.cnd-site-header .cnd-nav__pill:focus { padding: var(--s-2) var(--s-3); }
}

/* ---------- Mobile (< 900 px, maquette) : [compte | logo | menu] */
@media (max-width: 899px) {
	.cnd.cnd-site-header .cnd-site-header__inner {
		grid-template-columns: var(--cnd-header-round) minmax(0, 1fr) var(--cnd-header-round);
		grid-template-rows: auto;
		grid-template-areas: "account logo burger";
		align-items: center;
		padding: var(--s-2) var(--s-5);
	}
	.cnd.cnd-site-header .cnd-site-header__top,
	.cnd.cnd-site-header .cnd-site-header__nav { display: none; }
	.cnd.cnd-site-header .cnd-site-header__account { grid-area: account; display: inline-flex; }
	.cnd.cnd-site-header .cnd-site-header__burger { grid-area: burger; display: inline-flex; }
	.cnd.cnd-site-header .cnd-site-header__logo-img {
		width: var(--cnd-header-logo-mobile);
		height: var(--cnd-header-logo-mobile);
	}
}
@media (min-width: 900px) {
	.cnd.cnd-site-header .cnd-site-header__panel { display: none; }
}