/*
 * Masthead sur-mesure — nwc_child_theme
 * Justification complète : inc/header.php, .impeccable.md principes 2 et 4.
 *
 * Structure à deux niveaux :
 *   .nwc-masthead__utility — bandeau pratique (horaires/lieu/téléphone), encre/crème, mono.
 *   .nwc-masthead__main    — logo + nav + don.
 *
 * États :
 *   .nwc-masthead--floating        page d'accueil, flotte transparent sur le hero (texte clair).
 *   .nwc-masthead--floating.is-scrolled  bascule vers fond plein (texte encre).
 *   (sans --floating)              pages intérieures, toujours fond plein dès le chargement.
 */

/* Kadence fixe `#masthead{position:relative;z-index:11}` par sélecteur ID (header.min.css) :
   un sélecteur ID bat toujours une classe, quel que soit l'ordre de chargement — on reprend
   donc #masthead ici pour égaler puis dépasser cette spécificité (la cascade tranche ensuite
   en notre faveur car ce fichier se charge après celui du parent). */
#masthead.nwc-masthead {
	position: sticky;
	top: 0;
	z-index: 100;
	width: 100%;
	/* Kadence injecte `#masthead{background:#ffffff}` en <style> inline (réglages
	   Customizer) — même sélecteur ID que ce fichier ne peut pas battre par ordre de
	   cascade seul puisqu'il est injecté dans <head> après ce fichier. On écrase donc
	   explicitement ici (spécificité ID+classe, qui bat l'ID seul quel que soit l'ordre). */
	background: transparent;
	font-family: var(--nwc-font-body);
}

/* Sur l'accueil, le masthead flotte en superposition du hero (fond transparent
   avant scroll) plutôt que de pousser le contenu — la section hero compense
   avec son propre padding-top, voir base.css .nwc-hero. */
#masthead.nwc-masthead--floating {
	position: fixed;
	top: 0;
	left: 0;
	background: transparent;
}

/* --- Bandeau utilitaire --- */

.nwc-masthead__utility {
	background: var(--nwc-ink);
	border-bottom: 1px solid oklch(100% 0 0 / 0.08);
	transition: grid-template-rows var(--nwc-duration-base) var(--nwc-ease),
		opacity var(--nwc-duration-fast) var(--nwc-ease);
	display: grid;
	grid-template-rows: 1fr;
	overflow: hidden;
}

.nwc-masthead__utility-inner {
	max-width: var(--nwc-content-width);
	margin-inline: auto;
	padding: var(--nwc-space-2) var(--nwc-space-6);
	display: flex;
	align-items: center;
	gap: var(--nwc-space-3);
	font-family: var(--nwc-font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: oklch(97% 0.014 83 / 0.82);
	min-height: 0;
}

.nwc-masthead__utility-sep {
	color: oklch(97% 0.014 83 / 0.35);
}

.nwc-masthead__utility-phone {
	margin-left: auto;
	color: var(--nwc-gold);
	text-decoration: none;
	transition: color var(--nwc-duration-fast) var(--nwc-ease);
}

.nwc-masthead__utility-phone:hover {
	color: var(--nwc-cream);
}

/* Sur l'accueil flottant, le bandeau utilitaire se replie au scroll pour ne garder
   que l'essentiel (grid-template-rows plutôt que height : jamais animer une propriété
   de mise en page, cf. référence motion du skill). */
.nwc-masthead--floating.is-scrolled .nwc-masthead__utility {
	grid-template-rows: 0fr;
	opacity: 0;
	border-bottom-color: transparent;
}

.nwc-masthead--floating.is-scrolled .nwc-masthead__utility-inner {
	padding-block: 0;
}

/* --- Ligne principale --- */

/* Verre dépoli (demande de Jordan) plutôt qu'un fond crème opaque : on voit
   le contenu défiler derrière, flouté, au lieu d'une barre pleine qui coupe
   net la page. */
.nwc-masthead__main {
	background: oklch(97% 0.014 83 / 0.55);
	backdrop-filter: blur(16px) saturate(160%);
	-webkit-backdrop-filter: blur(16px) saturate(160%);
	transition: background-color var(--nwc-duration-base) var(--nwc-ease),
		box-shadow var(--nwc-duration-base) var(--nwc-ease);
}

.nwc-masthead__main-inner {
	max-width: var(--nwc-content-width);
	margin-inline: auto;
	padding: var(--nwc-space-4) var(--nwc-space-6);
	display: flex;
	align-items: center;
	gap: var(--nwc-space-7);
}

/* État flottant (accueil, avant scroll) : logo clair, nav claire — mais le bandeau
   utilitaire garde un fond plein (encre) pour rester lisible par-dessus la photo
   du hero (demande de Jordan, le fond transparent rendait le texte illisible). */
.nwc-masthead--floating .nwc-masthead__utility {
	background: var(--nwc-ink);
	border-bottom-color: oklch(100% 0 0 / 0.14);
}

/* Transparent veut dire transparent : sans ça, le flou (backdrop-filter)
   hérité de la règle de base restait actif même à fond transparent et
   formait une bande floutée/visible tout en haut de page (constat de
   Jordan) — alors qu'avant le scroll, rien ne doit se voir du tout. */
.nwc-masthead--floating:not(.is-scrolled) .nwc-masthead__main {
	background: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

.nwc-masthead--floating:not(.is-scrolled) .nwc-masthead__nav-link,
.nwc-masthead--floating:not(.is-scrolled) .nwc-masthead__brand-text {
	color: var(--nwc-cream);
}

.nwc-masthead--floating.is-scrolled .nwc-masthead__main {
	background: oklch(97% 0.014 83 / 0.55);
	box-shadow: var(--nwc-shadow-sm);
}

/* --- Logo (bascule claire/sombre en opacité, jamais de rechargement) --- */

.nwc-masthead__brand {
	display: inline-flex;
	flex-shrink: 0;
	text-decoration: none;
}

/* --- Emblème seul (pilule nav, accueil) ---
   Pas d'asset icône-seul dans la médiathèque (le carré existant contient
   toujours le texte "newwine LUXEMBOURG" sous le glyphe, cf. research/
   identite_visuelle.md) : recadrage CSS pur sur le carré existant plutôt
   qu'un nouvel asset recréé — image volontairement surdimensionnée et
   décalée dans un cercle overflow:hidden pour isoler le glyphe (flamme/
   silhouette) en haut du carré et masquer le texte en dessous. */
.nwc-masthead__logo-icon-wrap {
	display: inline-flex;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
	position: relative;
}

.nwc-masthead__logo-icon {
	position: absolute;
	top: -8%;
	left: 50%;
	width: 190%;
	height: auto;
	transform: translateX(-50%);
}

.nwc-masthead__logo-wrap {
	position: relative;
	display: inline-block;
	width: 10rem;
	height: 2.5625rem;
}

.nwc-masthead__logo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: left center;
	transition: opacity var(--nwc-duration-base) var(--nwc-ease);
}

.nwc-masthead__logo-dark {
	opacity: 1;
}

.nwc-masthead__logo-light {
	opacity: 0;
}

.nwc-masthead--floating:not(.is-scrolled) .nwc-masthead__logo-dark {
	opacity: 0;
}

.nwc-masthead--floating:not(.is-scrolled) .nwc-masthead__logo-light {
	opacity: 1;
}

/* --- Navigation --- */

.nwc-masthead__nav {
	margin-left: auto;
}

.nwc-masthead__nav-list {
	display: flex;
	align-items: center;
	gap: var(--nwc-space-6);
	list-style: none;
	margin: 0;
	padding: 0;
}

.nwc-masthead__nav-item {
	position: relative;
}

.nwc-masthead__nav-link {
	position: relative;
	display: inline-block;
	padding-block: var(--nwc-space-2);
	color: var(--nwc-ink);
	text-decoration: none;
	font-size: 0.9375rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	transition: color var(--nwc-duration-fast) var(--nwc-ease);
}

/* Soulignement qui glisse depuis la gauche au survol — jamais un simple changement
   de couleur instantané (geste réclamé : "une vraie animation d'interaction"). */
.nwc-masthead__nav-link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: 0;
	height: 1.5px;
	background: currentColor;
	opacity: 0.7;
	transition: right var(--nwc-duration-base) var(--nwc-ease);
}

.nwc-masthead__nav-link:hover::after,
.nwc-masthead__nav-item.current-menu-item .nwc-masthead__nav-link::after {
	right: 0;
}

.nwc-masthead__nav-item.has-submenu {
	display: flex;
	align-items: center;
}

/* Chevron en vrai <span> dans le balisage (inc/header.php), pas en pseudo-
   élément : ::after est déjà pris par le soulignement au survol sur ce même
   lien (règle au-dessus) — un ::before, lui, s'insère avant le texte quel
   que soit son margin, ce qui plaçait le chevron avant "Nous connaitre"
   au lieu d'après (constat de Jordan). Les deux pièges réglés en passant
   par un élément réel. */
.nwc-masthead__nav-chevron {
	display: inline-block;
	width: 0.3em;
	height: 0.3em;
	margin-left: 0.4em;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	opacity: 0.6;
	vertical-align: middle;
}

/* Bouton accordéon (mobile) : masqué par défaut. Sans ce reset desktop,
   le <button> n'a aucune règle de ce fichier en dehors du media query mobile
   (qui le met en display:flex) et retombe sur le style bouton générique du
   thème parent Kadence (background doré --global-palette-btn-bg) — 2 boîtes
   dorées pleines après "Nous connaitre"/"Enseignement" en desktop (constat
   Jordan, capture du 25/10/2026). Réaffiché en display:flex uniquement dans
   @media (max-width: 61.9375rem) ci-dessous. */
.nwc-masthead__nav-expand {
	display: none;
}

.nwc-masthead__submenu {
	position: absolute;
	top: calc(100% + 0.75rem);
	left: 0;
	min-width: 15rem;
	margin: 0;
	padding: var(--nwc-space-3);
	list-style: none;
	background: var(--nwc-paper);
	border-radius: var(--nwc-radius-md);
	box-shadow: var(--nwc-shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity var(--nwc-duration-base) var(--nwc-ease),
		transform var(--nwc-duration-base) var(--nwc-ease),
		visibility 0s linear var(--nwc-duration-base);
}

/* Bornée au desktop (bug audit mobile [CHEF-MOBILE] 9/10/2026) : certains
   navigateurs mobiles appliquent un ":hover" persistant après un tap (hover
   collant, connu sur Safari/Chrome mobile). Sans cette borne, un simple tap
   sur "Nous connaitre"/"Enseignement" pouvait laisser le sous-menu ouvert et
   intercepter les taps suivants (burger, pilule CTA) même menu fermé — sur
   mobile, l'ouverture passe uniquement par .nwc-masthead__nav.is-open. */
@media (min-width: 62rem) {
	.nwc-masthead__nav-item.has-submenu:hover .nwc-masthead__submenu,
	.nwc-masthead__nav-item.has-submenu:focus-within .nwc-masthead__submenu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		transition-delay: 0s;
	}
}

/* Bornée au desktop (bug confirmé par capture Jordan, 25/10/2026) : cette
   règle n'était pas bornée à l'origine. Spécificité strictement identique
   (0,2,0) à l'override mobile crème plus bas dans ce fichier
   (.nwc-masthead__submenu .nwc-masthead__nav-link, dans
   @media max-width:61.9375rem) — un conflit à spécificité égale, départagé
   uniquement par l'ordre des règles, qui s'est avéré instable au runtime
   (constaté en vérification Playwright : le texte des sous-items de
   l'accordéon mobile "Nous connaitre"/"Enseignement" passait de façon
   intermittente à cette couleur encre, identique au fond encre du panneau
   plein écran mobile → texte invisible, séparateurs seuls visibles). Border
   au desktop élimine le conflit à la racine au lieu de dépendre de l'ordre
   des règles dans le fichier. */
@media (min-width: 62rem) {
	.nwc-masthead__submenu .nwc-masthead__nav-link {
		display: block;
		color: var(--nwc-ink);
		padding: var(--nwc-space-2) var(--nwc-space-3);
		border-radius: var(--nwc-radius-sm);
		font-weight: 400;
	}
}

/* Le panneau du sous-menu est toujours clair (fond papier), même quand le
   header flotte en crème sur le hero — mais la règle "header flottant → tous
   les liens en crème" (plus haut, 3 classes) a plus de spécificité que la
   règle ci-dessus (2 classes) et rendait ce texte quasi invisible (crème sur
   crème, signalé par Jordan). Cette règle, à spécificité égale mais plus
   précise sur le contexte flottant, reprend la main.
   Bornée au desktop (bug confirmé par capture Jordan, 25/10/2026, même cause
   que la règle ci-dessus) : sans la borne, cette règle (4 classes, dont
   .nwc-masthead--floating présent sur accueil/actualite/messages dès le
   chargement — avant le premier scroll qui pose .is-scrolled) battait aussi
   l'override mobile crème (2 classes, plus bas dans ce fichier) en PLEIN
   dans le scénario réel de Jordan (page d'accueil, menu mobile ouvert sans
   avoir scrollé) → texte des sous-items de l'accordéon repassé en encre sur
   fond encre, invisible. C'était la cause principale de l'intermittence. */
@media (min-width: 62rem) {
	.nwc-masthead--floating:not(.is-scrolled) .nwc-masthead__submenu .nwc-masthead__nav-link {
		color: var(--nwc-ink);
	}
}

.nwc-masthead__submenu .nwc-masthead__nav-link::after {
	display: none;
}

.nwc-masthead__submenu .nwc-masthead__nav-link:hover {
	background: var(--nwc-cream);
}

/* --- Mega-menu "Nous connaître" — modèle fourni par Jordan, palette de l'affiche
   officielle du 10e anniversaire (encre / or / braise) plutôt que la palette
   teal/blanc de la référence. --- */

/* Le panneau à 3 colonnes (~50rem) déborderait du viewport s'il restait ancré
   au lien déclencheur (positionné assez à gauche dans la nav) : on le centre
   plutôt sous toute la barre de navigation. Nécessite que le <li> parent ne
   serve plus de contexte de positionnement (:has, support navigateurs 2026 ok). */
.nwc-masthead__nav {
	position: relative;
}

.nwc-masthead__nav-item.has-submenu:has(.nwc-masthead__submenu--mega) {
	position: static;
}

.nwc-masthead__submenu--mega {
	position: absolute;
	top: calc(100% + 0.75rem);
	left: 50%;
	right: auto;
	transform: translateX(-50%);
	display: grid;
	grid-template-columns: repeat(3, 14rem);
	gap: var(--nwc-space-2);
	min-width: 0;
	padding: var(--nwc-space-3);
	background: var(--nwc-paper);
}

.nwc-masthead__nav-item.has-submenu:has(.nwc-masthead__submenu--mega):hover .nwc-masthead__submenu--mega,
.nwc-masthead__nav-item.has-submenu:has(.nwc-masthead__submenu--mega):focus-within .nwc-masthead__submenu--mega {
	transform: translateX(-50%) translateY(0);
}

.nwc-masthead__mega-item {
	list-style: none;
}

.nwc-masthead__mega-link {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: var(--nwc-space-4);
	border-radius: var(--nwc-radius-md);
	text-decoration: none;
	color: var(--nwc-ink);
	transition: background-color var(--nwc-duration-fast) var(--nwc-ease);
}

.nwc-masthead__mega-link:hover {
	background: var(--nwc-cream);
}

.nwc-masthead__mega-visual {
	display: flex;
	align-items: flex-end;
	height: 5.5rem;
	margin-bottom: var(--nwc-space-4);
	border-radius: var(--nwc-radius-sm);
	padding: var(--nwc-space-3);
	overflow: hidden;
	position: relative;
}

/* Trois couleurs d'accent, une par rubrique — directement les teintes de
   l'affiche du 10e anniversaire (or, braise, encre). */
.nwc-masthead__mega-item[data-accent="gold"] .nwc-masthead__mega-visual {
	background: linear-gradient(135deg, var(--nwc-gold) 0%, var(--nwc-gold-deep) 100%);
}

.nwc-masthead__mega-item[data-accent="ember"] .nwc-masthead__mega-visual {
	background: linear-gradient(135deg, var(--nwc-ember) 0%, var(--nwc-ember-deep) 100%);
}

.nwc-masthead__mega-item[data-accent="ink"] .nwc-masthead__mega-visual {
	background: linear-gradient(135deg, var(--nwc-ink-soft) 0%, var(--nwc-ink) 100%);
}

.nwc-masthead__mega-numeral {
	font-family: var(--nwc-font-display);
	font-size: 2.5rem;
	line-height: 1;
	color: oklch(100% 0 0 / 0.5);
}

.nwc-masthead__mega-title {
	font-weight: 600;
	font-size: 1rem;
	margin-bottom: var(--nwc-space-2);
}

.nwc-masthead__mega-desc {
	font-size: var(--nwc-text-small);
	color: var(--nwc-slate);
	line-height: var(--nwc-leading-body);
	flex: 1;
}

.nwc-masthead__mega-cta {
	margin-top: var(--nwc-space-3);
	font-size: var(--nwc-text-small);
	font-weight: 600;
	color: var(--nwc-gold-deep);
}

.nwc-masthead__mega-cta span {
	display: inline-block;
	transition: transform var(--nwc-duration-fast) var(--nwc-ease);
}

.nwc-masthead__mega-link:hover .nwc-masthead__mega-cta span {
	transform: translateX(3px);
}

@media (max-width: 61.9375rem) {
	.nwc-masthead__submenu--mega {
		grid-template-columns: 1fr;
		background: transparent;
		padding: 0;
	}

	.nwc-masthead__mega-link {
		color: var(--nwc-cream);
		flex-direction: row;
		align-items: center;
		gap: var(--nwc-space-4);
		padding: var(--nwc-space-3) 0;
	}

	.nwc-masthead__mega-visual {
		flex-shrink: 0;
		width: 4rem;
		height: 4rem;
		margin-bottom: 0;
	}

	.nwc-masthead__mega-numeral {
		font-size: 1.5rem;
	}

	.nwc-masthead__mega-desc {
		color: oklch(97% 0.014 83 / 0.65);
	}

	.nwc-masthead__mega-cta {
		display: none;
	}
}

/* --- Bloc Don : un repère, pas un bouton pilule générique --- */

.nwc-masthead__action {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: var(--nwc-space-3);
}

/* --- Icône recherche + CTA "Nous contacter" (pilule, accueil uniquement) ---
   Référence liquid-glass : loupe + bouton pilule sombre avec flèche en cercle
   blanc, placés avant le bouton "Donner" existant (fanion braise, conservé
   tel quel — 2 CTA distincts, dons vs contact). Markup conditionnel dans
   inc/header.php ($is_pill). */
.nwc-masthead__search {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	border: 1.5px solid currentColor;
	background: transparent;
	color: var(--nwc-ink);
	cursor: pointer;
	padding: 0;
	text-decoration: none;
	transition: color var(--nwc-duration-fast) var(--nwc-ease), background var(--nwc-duration-fast) var(--nwc-ease);
}

.nwc-masthead__search:hover,
.nwc-masthead__search:focus-visible {
	background: var(--nwc-gold);
	color: var(--nwc-ink);
	border-color: var(--nwc-gold);
}

.nwc-masthead__search svg {
	width: 1.05rem;
	height: 1.05rem;
}

.nwc-masthead--floating:not(.is-scrolled) .nwc-masthead__search {
	color: var(--nwc-cream);
}

/*
 * Même animation de survol (cercle qui glisse vers la gauche + flèche qui
 * pivote de 45°) que .nwc-hero__cta-primary (hero-liquidglass.css) — même
 * référence Jordan (composant "ButtonWithIcon"), même grammaire de mouvement
 * (tokens --nwc-duration-base/--nwc-ease), dupliquée ici plutôt que
 * factorisée dans components.css car les deux pilules vivent dans deux
 * fichiers déjà séparés par contexte (nav vs hero) et ont des tailles de
 * cercle différentes (1.75rem ici, 2.25rem dans le hero). Si une 3e pilule
 * identique apparaît, cf. commentaire là-bas pour factoriser dans
 * components.css.
 */
.nwc-masthead__pill-cta {
	position: relative;
	display: inline-flex;
	align-items: center;
	/* padding-right réserve au repos la place du cercle (position absolue,
	   hors flux — sans cette réserve le texte déborde sous le cercle, même
	   bug que .nwc-hero__cta-primary avant correction, voir commentaire
	   là-bas). */
	padding: 0.4rem 2.3rem 0.4rem 1.05rem;
	border-radius: 999px;
	background: var(--nwc-ink);
	color: var(--nwc-cream);
	text-decoration: none;
	font-size: 0.875rem;
	font-weight: 600;
	transition: background-color var(--nwc-duration-fast) var(--nwc-ease);
}

.nwc-masthead__pill-cta:hover {
	background: var(--nwc-ink-soft);
	color: var(--nwc-cream);
}

.nwc-masthead__pill-cta-arrow {
	position: absolute;
	top: 50%;
	left: calc(100% - 1.75rem - 0.35rem);
	z-index: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background: var(--nwc-cream);
	color: var(--nwc-ink);
	transform: translateY(-50%);
}

.nwc-masthead__pill-cta-arrow svg {
	width: 0.8rem;
	height: 0.8rem;
	transition: transform var(--nwc-duration-base) var(--nwc-ease);
}

.nwc-masthead__pill-cta:hover .nwc-masthead__pill-cta-arrow svg {
	transform: rotate(45deg);
}

/* Le texte reste au-dessus du cercle pendant le glissement. */
.nwc-masthead__pill-cta > span:not(.nwc-masthead__pill-cta-arrow) {
	position: relative;
	z-index: 1;
}

@media (min-width: 73.0625rem) {
	/* Le glissement n'a de sens que tant que le texte est visible (en
	   dessous de 73rem la pilule devient icône seule, cf. media query
	   suivante) — sinon le padding-left grandirait pour rien. */
	.nwc-masthead__pill-cta {
		transition: background-color var(--nwc-duration-fast) var(--nwc-ease),
			padding var(--nwc-duration-base) var(--nwc-ease);
	}

	.nwc-masthead__pill-cta:hover {
		padding-left: 2.3rem;
		padding-right: 0.4rem;
	}

	.nwc-masthead__pill-cta-arrow {
		transition: left var(--nwc-duration-base) var(--nwc-ease);
	}

	.nwc-masthead__pill-cta:hover .nwc-masthead__pill-cta-arrow {
		left: 0.35rem;
	}
}

@media (max-width: 73rem) {
	/* La pilule nav perd vite de la place (logo + 5 liens + loupe + 2 CTA) :
	   le CTA secondaire texte se réduit à l'icône seule avant le burger mobile
	   (qui masque déjà le reste à 992px). */
	.nwc-masthead__pill-cta span:not(.nwc-masthead__pill-cta-arrow) {
		display: none;
	}

	.nwc-masthead__pill-cta {
		padding: 0.35em;
	}

	/* Pas de texte à côté : le cercle revient en flux normal (centré par le
	   flex du parent) plutôt qu'en position absolue calée pour un glissement
	   qui n'a plus lieu d'être. */
	.nwc-masthead__pill-cta-arrow {
		position: static;
		transform: none;
	}
}

@media (max-width: 61.9375rem) {
	.nwc-masthead__search {
		display: none;
	}
}

.nwc-masthead__give {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding: 0.7em 1.4em 0.7em 1.1em;
	background: var(--nwc-ember);
	color: var(--nwc-cream);
	text-decoration: none;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	/* Pointe asymétrique façon fanion plutôt qu'un rectangle à coins arrondis —
	   volontairement pas un border-radius uniforme ni une pilule. */
	clip-path: polygon(0 0, 100% 0, 92% 50%, 100% 100%, 0 100%);
	transition: background-color var(--nwc-duration-fast) var(--nwc-ease),
		transform var(--nwc-duration-fast) var(--nwc-ease);
}

.nwc-masthead__give:hover {
	background: var(--nwc-ember-deep);
	transform: translateX(2px);
}

/* --- Bascule mobile --- */

.nwc-masthead__toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	/* Bug audit mobile [CHEF-MOBILE] 9/10/2026 : .nwc-masthead__nav (plein
	   écran, menu ouvert) est un frère cadet dans le DOM de ce bouton, donc le
	   couvrait à l'écran (ordre de peinture) — la croix de fermeture n'était
	   plus tapable une fois le menu ouvert. position+z-index le garde toujours
	   au-dessus, menu ouvert ou fermé. */
	position: relative;
	z-index: 2;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	margin-left: auto;
	/* !important nécessaire : le reset global de boutons de Kadence
	   (button, .wp-element-button… dans global.min.css) posait un fond
	   "braise" ici malgré la classe plus spécifique — repéré en audit mobile
	   [CHEF-MOBILE] 9/10/2026 (bouton burger rendu en carré rouge plein une
	   fois le menu ouvert, au lieu des deux barres fines). */
	background: none !important;
	border: none;
	cursor: pointer;
}

.nwc-masthead__toggle:focus-visible {
	outline: 2px solid var(--nwc-gold);
	outline-offset: 2px;
}

.nwc-masthead__toggle-bar {
	width: 1.5rem;
	height: 2px;
	background: currentColor;
	color: var(--nwc-ink);
	transition: transform var(--nwc-duration-fast) var(--nwc-ease), opacity var(--nwc-duration-fast) var(--nwc-ease);
}

.nwc-masthead--floating:not(.is-scrolled) .nwc-masthead__toggle-bar {
	color: var(--nwc-cream);
}

/* Icône burger à 3 barres (standard), pas 2 (constat Jordan, capture
   25/10/2026) : la barre du milieu disparaît et les deux autres pivotent
   pour former la croix — translateY calé sur la distance centre-à-centre
   réelle entre deux barres (hauteur 2px + gap 5px = 7px), pas une valeur
   arbitraire. */
.nwc-masthead__toggle[aria-expanded="true"] .nwc-masthead__toggle-bar:first-child {
	transform: translateY(7px) rotate(45deg);
}

.nwc-masthead__toggle[aria-expanded="true"] .nwc-masthead__toggle-bar:nth-child(2) {
	opacity: 0;
}

.nwc-masthead__toggle[aria-expanded="true"] .nwc-masthead__toggle-bar:last-child {
	transform: translateY(-7px) rotate(-45deg);
}

/* Le panneau plein écran (ci-dessous) rend désormais le bouton toggle
   toujours visuellement SUR le fond encre une fois le menu ouvert (plus
   jamais dans une pilule claire par-dessus un hero) : la croix passe donc
   en crème dès l'ouverture, pour rester lisible quel que soit l'état
   --floating/--pill de la page. */
.nwc-masthead__toggle[aria-expanded="true"] .nwc-masthead__toggle-bar {
	color: var(--nwc-cream);
}

/* --- Mobile --- */

@media (max-width: 61.9375rem) {
	/* Demande Jordan (capture mobile 25/10/2026) : le bandeau horaires/téléphone
	   est illisible une fois compressé sur petit écran — on le retire entièrement
	   en dessous de ce même seuil (celui où la nav bascule en burger), inchangé
	   au-dessus. La pilule de nav remonte alors proprement puisque ce bandeau
	   est display:none plutôt que vide/réduit (pas de bloc résiduel). */
	.nwc-masthead__utility {
		display: none;
	}

	.nwc-masthead__utility-item:not(.nwc-masthead__utility-phone):not(:first-child) {
		display: none;
	}

	.nwc-masthead__utility-sep {
		display: none;
	}

	.nwc-masthead__toggle {
		display: flex;
	}

	/* Le gap de 48px (desktop) entre logo/burger/don déborde en dessous de 992px
	   (nav retirée du flux, donc plus que 3 enfants serrés) — resserré ici. */
	.nwc-masthead__main-inner {
		gap: var(--nwc-space-3);
	}

	.nwc-masthead__logo-wrap {
		width: 7.5rem;
		height: 1.9219rem;
	}

	/* Bug signalé par Jordan (capture du 25/10/2026) : la croix de fermeture
	   (.nwc-masthead__toggle, bouton RESTÉ dans la barre du header, jamais
	   déplacé) se retrouvait visuellement au milieu du panneau, superposée sur
	   "Accueil"/séparateur. Cause réelle : ce panneau (.nwc-masthead__nav)
	   s'ouvrait en `inset:0` — plein viewport DEPUIS Y=0 — alors que le header
	   (bandeau horaires + barre logo/burger) occupe déjà ~86px en haut de
	   l'écran. Le panneau démarrait donc SOUS le header visuellement (son fond
	   encre recouvrait tout), mais son premier item "Accueil" (padding-top
	   fixe ~96px, sans lien avec la vraie hauteur du header) tombait quasiment
	   à la même hauteur que le bouton toggle (86–130px) : collision. Le bouton
	   n'a jamais bougé, c'est le panneau qui remontait dans son espace.
	   Fix : le panneau démarre exactement sous le header réel, hauteur mesurée
	   en JS (header.js, écrit dans --nwc-header-offset à l'ouverture, car le
	   bandeau horaires peut changer de hauteur selon la largeur d'écran/le
	   texte) — jamais Y=0. Le bouton reste ainsi visuellement dans la barre du
	   header, au-dessus du panneau, jamais dans son flux de contenu. */
	.nwc-masthead__nav {
		position: fixed;
		top: var(--nwc-header-offset, 5.375rem);
		left: 0;
		right: 0;
		bottom: 0;
		margin: 0;
		background: var(--nwc-ink);
		display: flex;
		align-items: flex-start;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-12px);
		transition: opacity var(--nwc-duration-base) var(--nwc-ease),
			transform var(--nwc-duration-base) var(--nwc-ease),
			visibility 0s linear var(--nwc-duration-base);
	}

	.nwc-masthead__nav.is-open {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		transition-delay: 0s;
	}

	.nwc-masthead__nav-list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		width: 100%;
		height: 100%;
		overflow-y: auto;
		padding: var(--nwc-space-9) var(--nwc-space-6);
	}

	/* Rythme vertical cohérent (constat de Jordan, capture du 25/10/2026 :
	   "grand vide entre Accueil et Nous connaître, entre Actualité et
	   Enseignement") : chaque item top-level — qu'il ait un sous-menu ou
	   non — reçoit exactement le même padding vertical et un séparateur
	   fin, plutôt qu'un `gap` sur la liste qui ne traitait pas les deux cas
	   (ligne simple vs ligne + bouton accordéon) de façon identique. */
	.nwc-masthead__nav-item {
		width: 100%;
		border-bottom: 1px solid oklch(100% 0 0 / 0.1);
		opacity: 0;
		transform: translateY(10px);
		transition: opacity var(--nwc-duration-base) var(--nwc-ease),
			transform var(--nwc-duration-base) var(--nwc-ease);
	}

	.nwc-masthead__nav-item:last-child {
		border-bottom: none;
	}

	.nwc-masthead__nav.is-open .nwc-masthead__nav-item {
		opacity: 1;
		transform: translateY(0);
	}

	.nwc-masthead__nav .nwc-masthead__nav-link {
		display: flex;
		align-items: center;
		width: 100%;
		/* ~1rem mini de zone de tap verticale (demande explicite de Jordan) +
		   rythme identique à .nwc-masthead__nav-expand ci-dessous, pour que
		   les items avec et sans sous-menu s'alignent à la même hauteur. */
		padding-block: var(--nwc-space-4);
		color: var(--nwc-cream);
		font-size: var(--nwc-text-h3);
		font-family: var(--nwc-font-display);
	}

	/* Chevron desktop (décoratif, dans le lien) masqué sur mobile : remplacé
	   par le vrai bouton accordéon ci-dessous, qui porte le chevron
	   fonctionnel aligné à droite sur la même ligne. */
	.nwc-masthead__nav .nwc-masthead__nav-link .nwc-masthead__nav-chevron {
		display: none;
	}

	/* Écrase `.nwc-masthead__nav-item.has-submenu{display:flex}` (règle desktop
	   plus haut dans ce fichier, non bornée par média-requête à l'origine) :
	   sans ce reset, le `<li>` restait en `flex` sur mobile et plaçait le
	   sous-menu À CÔTÉ du parent au lieu d'EN DESSOUS (bug constaté en
	   vérification visuelle du 25/10/2026 — exactement le problème signalé
	   par Jordan sur la capture d'origine). */
	.nwc-masthead__nav-item.has-submenu {
		display: block;
	}

	.nwc-masthead__nav-row {
		display: flex;
		align-items: center;
		width: 100%;
	}

	.nwc-masthead__nav-row .nwc-masthead__nav-link {
		flex: 1 1 auto;
		min-width: 0;
	}

	/* Bouton accordéon : chevron aligné à droite SUR LA MÊME LIGNE que le
	   label (corrige le chevron décoratif mal placé en dessous du label sur
	   la capture de Jordan), zone de tap généreuse (≥44px dans les deux
	   sens) et retour clavier/lecteur d'écran via aria-expanded. */
	.nwc-masthead__nav-expand {
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 2.75rem;
		height: 2.75rem;
		margin-left: var(--nwc-space-2);
		padding: 0;
		background: none !important;
		border: none;
		border-radius: var(--nwc-radius-sm);
		color: var(--nwc-cream);
		cursor: pointer;
	}

	.nwc-masthead__nav-expand:focus-visible {
		outline: 2px solid var(--nwc-gold);
		outline-offset: 2px;
	}

	.nwc-masthead__nav-expand-chevron {
		display: inline-block;
		width: 0.55em;
		height: 0.55em;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg);
		transition: transform var(--nwc-duration-fast) var(--nwc-ease);
	}

	/* Rotation 180° à l'ouverture (chevron qui pivote, demande explicite de
	   Jordan) — piloté par aria-expanded, pas par une classe JS dupliquée. */
	.nwc-masthead__nav-expand[aria-expanded="true"] .nwc-masthead__nav-expand-chevron {
		transform: rotate(225deg);
	}

	/* Accordéon replié par défaut (demande explicite de Jordan : "pas en
	   accordéon replié par défaut" était le bug) : grid-template-rows 0fr→1fr
	   plutôt qu'une animation de height directe — même convention motion que
	   .nwc-masthead__utility plus haut dans ce fichier. position:static (pas
	   absolute) : le sous-menu doit repousser le flux de la liste, pas se
	   superposer dessus (cf. référence desktop, découplée ici). */
	.nwc-masthead__nav.is-open .nwc-masthead__submenu {
		position: static;
		display: grid;
		/* `grid-auto-rows` répété à la même valeur que `grid-template-rows` :
		   le sous-menu a plusieurs `<li>`, donc plusieurs rangées implicites —
		   sans forcer aussi `grid-auto-rows`, seule la première rangée se
		   compresserait et la liste déborderait au lieu de se replier. */
		grid-template-rows: 0fr;
		grid-auto-rows: 0fr;
		opacity: 0;
		visibility: hidden;
		min-width: 0;
		margin: 0;
		padding: 0 0 0 var(--nwc-space-4);
		box-shadow: none;
		background: transparent;
		overflow: hidden;
		transform: none;
		transition: grid-template-rows var(--nwc-duration-base) var(--nwc-ease),
			grid-auto-rows var(--nwc-duration-base) var(--nwc-ease),
			opacity var(--nwc-duration-fast) var(--nwc-ease),
			visibility 0s linear var(--nwc-duration-base);
	}

	.nwc-masthead__nav.is-open .nwc-masthead__nav-item.is-expanded .nwc-masthead__submenu {
		grid-template-rows: 1fr;
		grid-auto-rows: 1fr;
		opacity: 1;
		visibility: visible;
		padding-block: var(--nwc-space-2) var(--nwc-space-3);
		transition-delay: 0s;
	}

	/* grid-template-rows:0fr→1fr anime la PISTE de la grille, pas son
	   contenu : sans ce wrapper, le `<ul>` (contenu direct, hauteur réelle)
	   ne serait jamais comprimé et déborderait au lieu de se replier —
	   convention éprouvée du même pattern grid-rows pour masquer un bloc de
	   hauteur variable sans connaître sa hauteur à l'avance. */
	.nwc-masthead__nav.is-open .nwc-masthead__submenu > li {
		min-height: 0;
		overflow: hidden;
	}

	/* Hiérarchie typographique distincte entre item parent et sous-item
	   (constat de Jordan : "les deux sont à peu près la même taille") —
	   taille et poids réduits, indentation claire EN DESSOUS du parent
	   plutôt qu'à côté. */
	.nwc-masthead__submenu .nwc-masthead__nav-link {
		display: block;
		width: 100%;
		padding-block: var(--nwc-space-3);
		color: oklch(97% 0.014 83 / 0.72);
		font-size: var(--nwc-text-body);
		font-weight: 400;
		font-family: var(--nwc-font-body);
	}

	.nwc-masthead__submenu .nwc-masthead__nav-link:hover,
	.nwc-masthead__submenu .nwc-masthead__nav-link:focus-visible {
		color: var(--nwc-gold);
	}

	.nwc-masthead__action {
		margin-left: var(--nwc-space-3);
	}

	.nwc-masthead__give-label {
		font-size: 0.8125rem;
	}
}

/* --- Variante "pilule" (TOUT LE SITE) ---
 * Demande (mission hero liquid-glass, _team/board.md [AGENT-HERO-LIQUIDGLASS]) :
 * reproduire la nav flottante en pilule, marges visibles de chaque côté, de la
 * référence visuelle fournie par Jordan.
 *
 * Décision tranchée par Jordan (retour du 9/10/2026, annule la décision
 * précédente ci-dessous conservée pour mémoire) : la pilule doit être
 * EXACTEMENT la même sur TOUTES les pages, pas seulement l'accueil — classe
 * ajoutée inconditionnellement dans inc/header.php ($is_pill = true).
 *
 * Contrainte résolue pour appliquer ça partout sans perte de contraste :
 * la plupart des pages intérieures n'ont PAS de hero plein écran sombre
 * (.nwc-masthead--floating ne s'applique qu'à l'accueil + actualite +
 * messages, cf. inc/header.php) — sur ces pages le header n'est jamais
 * transparent, donc la pilule DOIT être opaque dès le chargement (sinon
 * illisible sur un fond de page clair). Sur les pages flottantes (accueil,
 * actualite, messages), la pilule redevient le "ghost" translucide
 * uniquement avant le scroll (même bascule qu'avant, juste réécrite pour
 * dépendre de .nwc-masthead--floating plutôt que d'être la valeur par
 * défaut). Texte : couleur crème uniquement en combinaison avec
 * --floating:not(.is-scrolled) (règle déjà existante plus haut dans ce
 * fichier, inchangée) — partout ailleurs, texte encre par défaut (déjà le
 * cas, .nwc-masthead__nav-link{color:var(--nwc-ink)}).
 *
 * Ancienne justification (accueil uniquement), conservée pour traçabilité :
 * limiter la pilule à l'accueil réduisait la surface de régression pendant
 * que cette mission n'était pas encore validée par le contrôle visuel —
 * le contrôle est passé depuis, Jordan a tranché pour l'application globale. */
/* max-width réduit (62rem au lieu de 72rem) : avec margin-inline:auto déjà
   hérité (.nwc-masthead__main-inner), ça suffit à produire la marge visible
   de chaque côté de la référence, sans écraser le centrage automatique sur
   très grand écran (jamais de margin-inline fixe ici, voir constat ci-dessous). */
#masthead.nwc-masthead--pill .nwc-masthead__main-inner {
	max-width: 62rem;
	margin-block-start: var(--nwc-space-4);
	border-radius: 999px;
}

#masthead.nwc-masthead--pill .nwc-masthead__main {
	background: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

/* Translucide, pas opaque (retour de Jordan : "trop blanc, il faut que ce
   soit plus flou/transparent") — 0.82 gardait assez de lisibilité sur
   n'importe quel fond de page mais ne laissait plus rien deviner du
   contenu derrière une fois scrollé. 0.6 + flou plus marqué : le texte
   défilé derrière la pilule reste visible, flouté, sans jamais mettre en
   danger la lisibilité du texte du menu lui-même (fond encore assez dense
   pour ça, vérifié visuellement sur fond clair ET sombre). */
#masthead.nwc-masthead--pill .nwc-masthead__main-inner {
	background: oklch(97% 0.014 83 / 0.6);
	backdrop-filter: blur(22px) saturate(180%);
	-webkit-backdrop-filter: blur(22px) saturate(180%);
	border: 1px solid oklch(23% 0.05 265 / 0.08);
	box-shadow: var(--nwc-shadow-md);
	transition: background-color var(--nwc-duration-base) var(--nwc-ease),
		border-radius var(--nwc-duration-base) var(--nwc-ease),
		margin var(--nwc-duration-base) var(--nwc-ease);
}

/* Ghost translucide : uniquement avant le scroll sur les pages à hero
   plein écran sombre (accueil, actualite, messages — .nwc-masthead--floating,
   cf. inc/header.php $floating_slugs). Le texte passe en crème via la règle
   générale ".nwc-masthead--floating:not(.is-scrolled) .nwc-masthead__nav-link"
   déjà présente plus haut dans ce fichier (pas spécifique à la pilule).
 *
 * Correctif contraste (constat Jordan, capture du 25/10/2026) : le fond
 * "ghost" était teinté crème à 14% d'opacité — sur un hero doré/clair, ce
 * voile quasi invisible laissait le fond de l'image dominer et le texte
 * crème (clair sur clair) devenait illisible. On passe à un verre teinté
 * ENCRE (même teinte que --nwc-ink, cf. tokens.css) et on remonte l'opacité
 * à 0.6 : la pilule forme alors un vrai fond sombre sous le texte crème,
 * quel que soit l'endroit du hero où elle se trouve (doré, clair ou texture),
 * au lieu de dépendre du contraste du hero lui-même. */
@media (min-width: 62rem) {
	#masthead.nwc-masthead--pill.nwc-masthead--floating:not(.is-scrolled) .nwc-masthead__main-inner {
		background: oklch(23% 0.05 265 / 0.6);
		border-color: oklch(100% 0 0 / 0.16);
	}
}

@media (max-width: 61.9375rem) {
	#masthead.nwc-masthead--pill .nwc-masthead__main-inner {
		margin-inline: var(--nwc-space-3);
		border-radius: var(--nwc-radius-lg);
	}

	/* Correctif mobile (retour Jordan, capture du 25/10/2026, 3e tour) : "ici
	   pas besoin de mettre le menu en sombre" — le fond encre à 60% d'opacité
	   ci-dessus (desktop, conservé tel quel juste au-dessus) rendait la
	   pilule fermée terne/brouillée sur le hero doré en mobile. On revient à
	   un verre clair quasi transparent (même esprit que le ghost crème
	   d'origine, mais sans le problème de lisibilité : logo/burger/flèche
	   reçoivent chacun leur propre ombre portée ci-dessous au lieu de
	   compter sur un fond sombre global). Exclut explicitement l'état menu
	   ouvert : ce bloc ne doit pas interférer avec le fond encre plein écran
	   du panneau (règle `:has(.nwc-masthead__nav.is-open)` plus bas). */
	#masthead.nwc-masthead--pill.nwc-masthead--floating:not(.is-scrolled):not(:has(.nwc-masthead__nav.is-open)) .nwc-masthead__main-inner {
		background: oklch(100% 0 0 / 0.14);
		border-color: oklch(100% 0 0 / 0.26);
	}

	/* Sans fond sombre de pilule pour les porter, logo clair / burger /
	   cercle flèche ont besoin de leur propre traitement de contraste sur le
	   hero doré — une ombre portée encre suffit, pas besoin de reposer sur
	   un fond opaque derrière eux. Scopé au même état (fermé, hero flottant,
	   mobile) ; n'affecte ni le desktop (fond encre conservé) ni le menu
	   ouvert (déjà sur fond encre plein, cf. règle crème plus bas). */
	#masthead.nwc-masthead--pill.nwc-masthead--floating:not(.is-scrolled):not(:has(.nwc-masthead__nav.is-open)) .nwc-masthead__logo-light {
		filter: drop-shadow(0 1px 3px oklch(23% 0.05 265 / 0.55));
	}

	#masthead.nwc-masthead--pill.nwc-masthead--floating:not(.is-scrolled):not(:has(.nwc-masthead__nav.is-open)) .nwc-masthead__toggle-bar {
		filter: drop-shadow(0 1px 2px oklch(23% 0.05 265 / 0.6));
	}

	#masthead.nwc-masthead--pill.nwc-masthead--floating:not(.is-scrolled):not(:has(.nwc-masthead__nav.is-open)) .nwc-masthead__pill-cta-arrow {
		box-shadow: 0 1px 3px oklch(23% 0.05 265 / 0.35);
	}

	/* Bug critique trouvé en audit mobile [CHEF-MOBILE] 9/10/2026 : le menu
	   mobile plein écran (.nwc-masthead__nav, position:fixed; inset:0) est un
	   descendant de .nwc-masthead__main-inner, qui porte un backdrop-filter
	   (verre dépoli de la pilule). Un backdrop-filter crée un bloc englobant
	   pour ses descendants en position:fixed (spec CSS Filter Effects) : le
	   menu "plein écran" se retrouvait donc confiné à la toute petite boîte
	   de la pilule (≈364×76px) au lieu de couvrir le viewport, avec son texte
	   qui débordait par-dessus le hero — illisible, inutilisable, et les
	   sous-menus fermés restaient cliquables par-dessus le reste du site.
	   Fix : supprimer le backdrop-filter de la pilule (et du fond plein des
	   pages intérieures) tant que le menu est ouvert, ce qui rétablit le
	   bloc englobant normal (le viewport) pour .nwc-masthead__nav. */
	#masthead:has(.nwc-masthead__nav.is-open) .nwc-masthead__main-inner,
	#masthead:has(.nwc-masthead__nav.is-open) .nwc-masthead__main {
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}

	/* Panneau mobile RÉELLEMENT plein écran (demande explicite de Jordan,
	   capture du 25/10/2026, 2e tour) : avant ce correctif, le panneau
	   ouvert démarrait sous le header (--nwc-header-offset) et le header
	   restait une pilule flottante avec marges + coins arrondis — le fond
	   doré du hero dépassait donc en haut ET en bas du panneau (coins
	   arrondis visibles). Fix : dès que le menu est ouvert, tout le
	   masthead (pas seulement le panneau) devient une colonne flex en
	   position fixed/inset:0/100dvh (dvh plutôt que vh pour la barre
	   d'adresse mobile) — la barre du haut (logo + bouton de fermeture)
	   garde sa hauteur de contenu, le panneau de nav prend le reste en
	   flex:1, aucune marge ni rayon ne subsiste nulle part. Bandeau
	   horaires masqué pendant l'ouverture : Jordan veut UNE seule barre en
	   haut (logo + fermeture), pas deux bandeaux superposés. */
	#masthead:has(.nwc-masthead__nav.is-open) {
		position: fixed;
		inset: 0;
		z-index: 200;
		display: flex;
		flex-direction: column;
		height: 100dvh;
		background: var(--nwc-ink);
		overflow: hidden;
	}

	#masthead:has(.nwc-masthead__nav.is-open) .nwc-masthead__utility {
		display: none;
	}

	/* La barre (logo + croix) doit rester visuellement AU-DESSUS du panneau
	   nav plein écran ci-dessous (même convention que .nwc-masthead__toggle
	   plus haut dans ce fichier : frère cadet dans le DOM, donc peint
	   par-dessus sans ce z-index) — sinon le panneau (fixed, inset:0 depuis
	   Y=0) recouvre le logo. */
	#masthead:has(.nwc-masthead__nav.is-open) .nwc-masthead__main {
		position: relative;
		z-index: 2;
		flex: 0 0 auto;
		background: var(--nwc-ink);
	}

	/* z-index sur .nwc-masthead__main (ci-dessus) ne suffit PAS à lui seul :
	   .nwc-masthead__nav est niché DANS .nwc-masthead__main (via
	   .nwc-masthead__main-inner), donc dans le MÊME contexte d'empilement
	   que le logo — il faut élever le logo localement aussi (même
	   convention que .nwc-masthead__toggle, qui a déjà son propre z-index
	   plus haut dans ce fichier et reste visible pour cette raison), sinon
	   le panneau nav (fixed, plus tard dans le DOM que le logo) le
	   recouvre malgré le z-index du parent. Constat Jordan, capture :
	   logo invisible une fois le menu ouvert. */
	#masthead:has(.nwc-masthead__nav.is-open) .nwc-masthead__brand {
		position: relative;
		z-index: 2;
	}

	/* Écrase la pilule (marge, coins arrondis, fond translucide) : la barre
	   du haut doit coller aux bords de l'écran, pas flotter en îlot. */
	#masthead.nwc-masthead--pill:has(.nwc-masthead__nav.is-open) .nwc-masthead__main-inner {
		margin: 0;
		max-width: 100%;
		border-radius: 0;
		background: var(--nwc-ink);
		border: none;
		box-shadow: none;
	}

	/* Le bouton "Nous contacter" (flèche) de la barre fermée disparaît à
	   l'ouverture : demande explicite de Jordan (clarification du
	   25/10/2026) — un seul bouton sans ambiguïté en haut à droite du
	   panneau ouvert, la croix de fermeture (.nwc-masthead__toggle), jamais
	   la flèche "Nous contacter" à côté qui pourrait se confondre avec elle. */
	#masthead:has(.nwc-masthead__nav.is-open) .nwc-masthead__action {
		display: none;
	}

	/* Correctif du 25/10/2026 (constat Jordan, capture) : `position: static`
	   était une erreur — .nwc-masthead__nav est niché DANS
	   .nwc-masthead__main-inner (ligne HORIZONTALE logo/croix), pas un
	   frère direct de .nwc-masthead__main au niveau du masthead. Le rendre
	   `static` le réinjectait comme item flex DANS cette ligne horizontale :
	   logo + croix empilés à gauche dans une colonne étroite, nav coincé
	   au milieu dans le reste de la largeur — pas du tout plein écran.
	   Fix : le panneau nav reste en `position: fixed`, mais ancré à Y=0
	   (inset:0) au lieu de dépendre de --nwc-header-offset (mesuré en JS) —
	   la barre du haut (.nwc-masthead__main, z-index:2 ci-dessus) reste
	   visuellement AU-DESSUS du panneau grâce à l'ordre d'empilement, pas en
	   repoussant le panneau plus bas. Le padding-top existant de
	   .nwc-masthead__nav-list (var(--nwc-space-9), cf. règle plus haut dans
	   ce fichier) dégage déjà assez d'espace sous la barre. */
	#masthead:has(.nwc-masthead__nav.is-open) .nwc-masthead__nav {
		position: fixed;
		inset: 0;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		height: 100dvh;
	}
}