/*
 * En-tete Metal-X.
 * Mise en page et effets verrouilles ici ; le contenu (logo, menu, libelles) reste editable cote WP.
 * Zero valeur en dur : couleurs / espacements / typos viennent des tokens theme.json (var --wp--preset--*).
 * Tokens de motion centralises dans :root (--mx-transition) pour l'animation ulterieure.
 */

/* --mx-transition est defini une seule fois dans base.css (charte), a partir des tokens de motion. */

/* Corrige la bande blanche par defaut sous l'en-tete et au-dessus du pied (block gap herite). */
.wp-site-blocks > main,
.wp-site-blocks > footer {
	margin-top: 0;
}

/* ---- Metriques de l'en-tete (source unique, consommee par le header fixe et les ancres) ---- */
:root {
	--mx-header-top-h: 56px;            /* hauteur du sur-header (mesuree : padding 16+16 + rangee 24) */
	--mx-header-h: 232px;               /* hauteur totale au repos = sur-header + barre principale */
	--mx-header-main-h-compact: 96px;   /* barre compacte : sous les 100px voulus, bordures comprises */
	--mx-header-logo-compact: 136px;    /* logo compact (ratio 1.43 -> 95px de haut, il cale la barre) */
}

/* La sentinelle est un repere de defilement pose par header.js. Elle fait TOUTE la hauteur de l'en-tete :
   elle ne sort donc de l'ecran qu'au moment ou le haut du hero atteint le haut du navigateur. C'est la
   que la barre bascule en compact, pas avant, sinon une bande vide apparait entre la barre compactee et
   le hero encore en route. Hors flux, invisible. */
.wp-site-blocks > header {
	position: relative;
}

.mx-header__sentinelle {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: var(--mx-header-h);
	pointer-events: none;
}

/* Conteneur global de l'en-tete : les deux bandes s'empilent, pleine largeur, sans ecart. */
.mx-header {
	width: 100%;
	/* Padding lateral fluide, partage sur-header + barre : 104 (>=1320) compresse jusqu'a 32 vers 980
	   (le passage en burger prend le relais en dessous). */
	--mx-header-pad: clamp(32px, calc(32px + 72 * (100vw - 980px) / 340), 104px);
}

.mx-header > * + * {
	margin-block-start: 0;
}

/* ---- Bande utilitaire (sur-header) ---- */
.mx-header__top {
	background-color: var(--wp--preset--color--black);
	color: var(--wp--preset--color--grey-light);
	padding-block: var(--wp--preset--spacing--30); /* 16 (homogeneise depuis 15) */
	padding-inline: var(--mx-header-pad); /* aligne sur la barre principale */
	column-gap: var(--wp--preset--spacing--40); /* 24 */
}

/* Acces compte : icone decorative en CSS, texte editable. */
.mx-header__account {
	column-gap: var(--wp--preset--spacing--20); /* 8 */
}

.mx-header__account::before {
	content: "";
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	background: url("../icons/icon-account.svg") center / contain no-repeat;
}

.mx-header__account-link {
	margin: 0;
}

.mx-header__account-link a {
	font-family: var(--wp--preset--font-family--titillium);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--xs); /* 12 */
	line-height: 1.2;
	color: var(--wp--preset--color--grey-light);
	text-decoration: none;
	transition: color var(--mx-transition);
}

.mx-header__account:hover .mx-header__account-link a,
.mx-header__account-link a:focus-visible {
	color: var(--wp--preset--color--white);
}

/* Selecteur de langue : filet vertical + libelle + chevron. */
.mx-header__lang {
	column-gap: var(--wp--preset--spacing--10); /* 4 */
	padding-inline-start: var(--wp--preset--spacing--40); /* 24, homogeneise depuis 29 */
	border-inline-start: 1px solid var(--wp--preset--color--border-light);
}

.mx-header__lang::after {
	content: "";
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	background: url("../icons/icon-arrow-down.svg") center / 8px no-repeat; /* 8, homogeneise depuis 9x6 */
	transition: transform var(--mx-transition);
}

.mx-header__lang:hover::after {
	transform: translateY(2px);
}

/* Selecteur Polylang (bloc natif) : rendu en <nav><ul class="mx-header__lang-current"><li class="lang-item">.
   On garde le look d'origine (langue courante + chevron) : la langue courante reste visible, l'autre langue
   apparait en petit menu au survol, sous le chevron. */
.mx-header__lang-current {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	position: relative;
}

.mx-header__lang-current li {
	list-style: none;
	margin: 0;
}

/* La ou n'apparaissait qu'un libelle, les langues NON courantes se posent en menu au survol du groupe. */
.mx-header__lang-current .lang-item:not(.current-lang) {
	position: absolute;
	top: calc(100% + 8px);
	inset-inline-end: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--mx-transition), visibility var(--mx-transition);
	background-color: var(--wp--preset--color--grey-dark);
	padding: 6px 12px;
	border-radius: var(--mx-radius-s);
	white-space: nowrap;
	z-index: 20;
}

.mx-header__lang:hover .lang-item:not(.current-lang),
.mx-header__lang:focus-within .lang-item:not(.current-lang) {
	opacity: 1;
	visibility: visible;
}

.mx-header__lang-current a {
	font-family: var(--wp--preset--font-family--titillium);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--sm); /* 14 */
	line-height: 1.2;
	color: var(--wp--preset--color--white);
	text-decoration: none;
	/* Le selecteur affiche le slug de langue (« fr » / « en », cf. filtre pll_the_languages_args) :
	   on le rend en MAJUSCULES pour obtenir « FR » / « EN ». */
	text-transform: uppercase;
	text-transform: uppercase;
}

/* ---- Barre principale ---- */
.mx-header__main {
	background-color: var(--wp--preset--color--white);
	border-block: 1px solid var(--wp--preset--color--border-light);
	min-height: 175px; /* cote Figma */
	flex-wrap: nowrap; /* logo et nav restent sur une ligne : on compresse, on ne passe pas l'un sous l'autre */
	padding-inline: var(--mx-header-pad);
	column-gap: clamp(24px, calc(24px + 16 * (100vw - 980px) / 340), 40px); /* 40 -> 24 */
	row-gap: var(--wp--preset--spacing--40);
}

/* Logo : administre via les reglages du site (bloc Site Logo). Largeur figee pour le rythme. */
/* Largeur du logo forcee en CSS avec une specificite superieure au core
   (.wp-block-site-logo img { width:100% }, qui ignore l'attribut de bloc sur un SVG).
   L'attribut {"width":249} du bloc ne sert qu'a cadrer l'editeur ; le CSS fait foi sur le front. */
.mx-header__logo {
	flex: 0 0 auto;
}

.mx-header .mx-header__logo img {
	width: clamp(190px, calc(190px + 59 * (100vw - 980px) / 340), 249px); /* 249 (cote Figma) -> 190 */
	height: auto;
	display: block;
}

/* Navigation : items editables (bloc Navigation), style verrouille. */
.mx-header__nav.wp-block-navigation,
.mx-header__nav .wp-block-navigation__container {
	gap: clamp(20px, calc(20px + 20 * (100vw - 980px) / 340), 40px); /* 40 (homogeneise depuis 44) -> 20 */
}

.mx-header__nav .wp-block-navigation-item__content,
.mx-header__nav .wp-block-navigation-item__label {
	font-family: var(--wp--preset--font-family--urbanist);
	font-weight: 900;
	font-size: var(--wp--preset--font-size--md); /* 16 */
	line-height: 1;
	letter-spacing: 0.04em; /* 0.64px a 16px */
	text-transform: uppercase;
	color: var(--wp--preset--color--black);
	text-decoration: none;
}

.mx-header__nav .wp-block-navigation-item__content {
	transition: color var(--mx-transition);
}

/* Survol / focus des items : bascule vers l'orange de marque. [a confirmer : hover non specifie en maquette] */
.mx-header__nav .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.mx-header__nav .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--orange-dark);
}

/* Chevron des sous-menus : reprend le meme picto que le sur-header. */
.mx-header__nav .wp-block-navigation-submenu__toggle .wp-block-navigation__submenu-icon,
.mx-header__nav .wp-block-navigation-submenu__toggle svg {
	fill: currentColor;
}

/* ---- En-tete FIXE + barre compacte au defilement (DESKTOP uniquement) ----
   Choix de mecanique : position:fixed + reserve d'espace, PLUTOT que sticky. En sticky, l'element garde
   sa place dans le flux : reduire la hauteur de la barre en etat compact reduirait aussi cette place et
   tout le contenu remonterait d'un coup (saut de mise en page). En fixed, la reserve est CONSTANTE, donc
   la bascule compact n'a aucun effet sur le flux : zero CLS. */
@media (min-width: 981px) {

	/* Reserve d'espace. Le parent direct du template part fait office de spacer : aucune balise ajoutee,
	   et sa hauteur ne varie JAMAIS (elle vaut toujours l'en-tete au repos). */
	.wp-site-blocks > header {
		min-height: var(--mx-header-h);
	}

	/* L'en-tete est fixe EN PERMANENCE : il occupe toujours le haut du viewport, donc il ne decouvre
	   jamais sa reserve d'espace (c'etait la cause de la bande vide, quand le seuil etait trop bas et
	   qu'une barre de 97px ne remplissait plus une reserve de 232). Consequence voulue : entre le haut
	   de page et le seuil, le hero glisse SOUS l'en-tete au lieu de le pousser. */
	.mx-header {
		position: fixed;
		top: 0;
		inset-inline: 0;
		/* Au-dessus du contenu et des voiles de section. Les modales sont des <dialog> ouvertes en
		   showModal() : elles vivent dans le « top layer », donc toujours au-dessus, sans z-index. */
		z-index: 100;
		transition: transform var(--mx-transition);
	}

	/* Barre d'administration WP (utilisateur connecte) : elle est fixee a top:0, on se cale dessous. */
	body.admin-bar .mx-header {
		top: var(--wp-admin-bar-height, 32px);
	}

	/* Etat compact. Le sur-header sort de l'ecran par le HAUT via une transform seule (aucun impact sur
	   le flux ni sur la hauteur reservee) : la barre principale vient se caler en haut du viewport.
	   La position ne change pas d'un etat a l'autre : les deux etats se rejoignent donc par une simple
	   animation (hauteur de barre, taille du logo, transform), l'en-tete se « transforme » sur place. */
	.mx-header.is-compact {
		transform: translateY( calc( -1 * var(--mx-header-top-h) ) );
	}

	.mx-header__main {
		transition: min-height var(--mx-transition), box-shadow var(--mx-transition);
	}

	.mx-header.is-compact .mx-header__main {
		min-height: var(--mx-header-main-h-compact);
		/* Le logo porte deja son propre blanc : en compact on retire tout le calage vertical,
		   la hauteur de la barre n'est plus donnee que par le logo reduit. */
		padding-block: 0;
		box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.10 ); /* detache la barre du contenu qui defile dessous */
	}

	/* Masquage au defilement VERS LE BAS : l'en-tete sort entierement par le haut (transform seule, donc
	   toujours zero impact sur le flux). Il revient des que l'on remonte (classe posee par header.js).
	   translateY(-100%) : la valeur suit la hauteur reelle de l'en-tete, rien a tenir a jour. */
	.mx-header.is-compact.is-hidden {
		transform: translateY( -100% );
	}

	.mx-header .mx-header__logo img {
		transition: width var(--mx-transition);
	}

	.mx-header.is-compact .mx-header__logo img {
		width: var(--mx-header-logo-compact);
	}

	/* Clavier : en compact l'en-tete est tronque (sur-header hors ecran) et il peut meme etre entierement
	   masque. Tout focus a l'interieur le redeploie en entier : sinon on focaliserait un element invisible
	   que la page ne peut pas ramener (l'en-tete etant fixe, aucun defilement ne le remonte).
	   Regle placee EN DERNIER : elle doit battre .is-hidden, de meme specificite. */
	.mx-header.is-compact:has( :focus-visible ) {
		transform: none;
	}

	/* Ancres : la cible ne doit pas se retrouver sous la barre fixe. */
	html {
		scroll-padding-top: var(--mx-header-main-h-compact);
	}
}

/* ---- Sous-menu deroulant (DESKTOP uniquement : sous 980px on passe en overlay burger) ----
   Panneau gris ultra-clair uni, sans bordure ni ombre (cote Figma « sous-menu »), items Titillium 18 noir
   sur une seule ligne, aeres. On neutralise le style natif WP (fond blanc + filet + paddings d'items).
   Le comportement (openSubmenusOnClick, clavier, aria) n'est pas touche. */
@media (min-width: 981px) {
	/* Selecteur volontairement specifique : WP core pose fond blanc + filet via
	   « .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container » (0,3,0).
	   .mx-header__nav ETANT l'element .wp-block-navigation, on passe a (0,4,0) pour le battre proprement
	   (pas de !important). */
	.mx-header__nav.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
		background-color: var(--wp--preset--color--grey-ultralight);
		border: 0;
		border-radius: 0;
		min-width: 0; /* bat le min-width natif de WP : la largeur suit le plus long libelle */
		padding: var(--wp--preset--spacing--50) 44px; /* 40 / 44 (cotes Figma) */
		display: flex;
		flex-direction: column;
		gap: var(--wp--preset--spacing--20); /* 8 (cote Figma) */
		/* Panneau DECOLLE de la barre de menu (WP le colle a « top: 100% »). Sans risque de survol :
		   les parents sont des <button> (openSubmenusOnClick), le panneau s'ouvre au clic, pas au survol. */
		top: calc(100% + var(--wp--preset--spacing--25)); /* 12, pas de l'echelle le plus proche de « une dizaine » */
	}

	/* Le texte est rendu dans le SPAN .wp-block-navigation-item__label, qui a sa PROPRE regle plus haut
	   (Urbanist 900 / uppercase, commune a tout le menu) : styler le <a> parent ne suffit pas, le span ne
	   l'herite pas. On cible donc les deux. */
	.mx-header__nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
	.mx-header__nav .wp-block-navigation__submenu-container .wp-block-navigation-item__label {
		padding: 0; /* le rythme vient du gap, pas des paddings natifs */
		font-family: var(--wp--preset--font-family--titillium);
		font-weight: 400;
		font-size: var(--wp--preset--font-size--lead); /* 18 */
		line-height: 1.2;
		/* Annule l'heritage du menu principal (uppercase + interlettrage) : le sous-menu est en casse
		   normale (cote Figma « sous-menu »). Scope sous-menu uniquement, le menu principal ne bouge pas. */
		text-transform: none;
		letter-spacing: normal;
		text-align: left; /* entrees du sous-menu ferrees a gauche (n'etaient pas alignees) */
		color: var(--wp--preset--color--black);
		white-space: nowrap;
	}

	/* Survol / focus clavier : meme bascule orange que le menu principal. */
	.mx-header__nav .wp-block-navigation__submenu-container .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
	.mx-header__nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
		color: var(--wp--preset--color--orange-dark);
	}
}

/* ---- Etat « page courante » ----
   Marquage pose par WordPress (current-menu-item / current-menu-ancestor, plus aria-current="page" sur le
   lien) et complete par inc/menu-etat-actif.php pour les pages descendantes absentes du menu.
   L'etat actif est DISTINCT du survol : le survol ajoute un filet qui grandit sous l'entree (anim.css),
   l'etat actif est une bascule de COULEUR permanente, sans filet. Survoler l'entree courante ajoute donc
   le filet par-dessus l'orange, les deux etats restent lisibles separement.
   Le libelle est dans un span .wp-block-navigation-item__label qui porte sa propre couleur : on cible le
   lien ET le span (le span n'herite pas de la couleur du lien, cf. correctif du sous-menu ci-dessus).
   Section placee APRES le bloc sous-menu : a specificite egale, c'est la derniere regle qui gagne. */
.mx-header__nav .current-menu-item > .wp-block-navigation-item__content,
.mx-header__nav .current-menu-ancestor > .wp-block-navigation-item__content,
.mx-header__nav .current-menu-item > .wp-block-navigation-item__content .wp-block-navigation-item__label,
.mx-header__nav .current-menu-ancestor > .wp-block-navigation-item__content .wp-block-navigation-item__label {
	color: var(--wp--preset--color--orange-dark);
}

/* ---- Responsive : bascule en menu overlay (burger) sous 980px ----
   La nav compressee ne tient plus au-dela ; on passe en burger (au lieu du 600px natif de WP). */
@media (max-width: 980px) {
	.mx-header {
		--mx-header-pad: var(--wp--preset--spacing--40); /* 24 */
	}

	.mx-header__main {
		justify-content: space-between;
		min-height: 120px;
	}

	.mx-header .mx-header__logo img {
		width: 160px;
	}

	/* Affiche le bouton burger et masque le menu inline (rendu en overlay seulement une fois ouvert). */
	.mx-header__nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.mx-header__nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none !important;
	}

	/* Burger a 3 lignes (convention), cible tactile 44px. Le bouton natif WP rend un SVG a 2 lignes :
	   on le masque et on peint icon-menu.svg (3 lignes) en masque teinte, ce qui laisse choisir la couleur
	   (grey-dark sur la barre blanche) quel que soit le fill du fichier. */
	.mx-header__nav .wp-block-navigation__responsive-container-open {
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
	}

	.mx-header__nav .wp-block-navigation__responsive-container-open svg {
		display: none;
	}

	.mx-header__nav .wp-block-navigation__responsive-container-open::before {
		content: "";
		width: 28px;
		height: 28px;
		background-color: var(--wp--preset--color--grey-dark);
		-webkit-mask: url("../icons/icon-menu.svg") center / contain no-repeat;
		mask: url("../icons/icon-menu.svg") center / contain no-repeat;
	}
}

/* ---- Overlay burger retravaille (mobile/tablette) : liste aeree, ferree a gauche, filets separateurs,
   croix 44px. Le style natif WP centrait les items sans separation. ---- */
@media (max-width: 980px) {

	/* Croix de fermeture : cible 44px, coin haut-droit confortable au pouce. */
	.mx-header__nav .wp-block-navigation__responsive-container-close {
		top: var(--wp--preset--spacing--40); /* 24 */
		right: var(--wp--preset--spacing--40); /* 24 */
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
	}

	.mx-header__nav .wp-block-navigation__responsive-container-close svg {
		width: 28px;
		height: 28px;
	}

	/* Zone de contenu : on reserve le haut pour la croix (marge augmentee pour eloigner la 1re entree et
	   son chevron de la croix -> pas de miss-clic entre les deux), padding lateral homogene.
	   Selecteur qualifie .wp-block-navigation (0,4,0) pour battre le padding-top natif de WP core
	   (calc(24px + 2rem) = 56px, qui laissait la 1re entree trop haut, contre la croix). */
	.mx-header__nav.wp-block-navigation .is-menu-open .wp-block-navigation__responsive-container-content {
		width: 100%;
		padding: 96px var(--wp--preset--spacing--40) var(--wp--preset--spacing--50); /* 96 (etait 72) / 24 / 40 */
	}

	/* Liste : colonne pleine largeur, ferree a gauche (au lieu du centrage natif « items-justified-center »).
	   width:100% force la pleine largeur meme si WP centre la liste en flex-item (align-items du parent). */
	.mx-header__nav .is-menu-open .wp-block-navigation__container {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
		justify-content: flex-start;
		width: 100%;
		gap: 0;
	}

	/* Entrees de premier niveau : pleine largeur + filet separateur en bas. */
	.mx-header__nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
		width: 100%;
		border-block-end: 1px solid var(--wp--preset--color--grey-light);
	}

	/* Libelles ferres a gauche, cible tactile 44px, rythme aere. */
	.mx-header__nav .is-menu-open .wp-block-navigation-item__content {
		display: flex;
		align-items: center;
		width: 100%;
		min-height: 44px;
		padding-block: var(--wp--preset--spacing--30); /* 16 */
		text-align: left;
	}

	.mx-header__nav .is-menu-open .wp-block-navigation-item__label {
		text-align: left;
	}
}

/* ---- Rubriques parentes du menu mobile : sous-menus TOUJOURS OUVERTS (choix assume, valide).
   WP 7.1 a migre la navigation vers l'Interactivity API : dans l'overlay, l'etat du sous-menu reste
   bloque « ouvert » (aria-expanded lie a un state qui ne bascule plus) et le tap natif ne referme plus
   l'accordeon livre en juillet. Plutot que de laisser un chevron/bouton inerte, on affiche les
   sous-entrees en permanence, on RETIRE le chevron et on neutralise le bouton parent (voir header.js
   pour la non-focalisation clavier + aria-disabled, en mobile seulement). Desktop non concerne : tout
   est sous @media (max-width:980px). ---- */
@media (max-width: 980px) {

	/* Sous-menus toujours deplies (plus d'accordeon a piloter). */
	.mx-header__nav .is-menu-open .wp-block-navigation__submenu-container {
		display: block;
	}

	/* Panneau de sous-menu : pleine largeur (retrait gauche uniforme quel que soit le parent), indente,
	   HAUT RESSERRE (la 1re sous-entree colle a la rubrique parente : ecart parent -> sous-entree reduit),
	   petit air en bas pour detacher la derniere sous-entree du filet separateur.
	   Selecteur qualifie .wp-block-navigation + .has-child (0,5,0) pour battre le padding natif de WP core. */
	.mx-header__nav.wp-block-navigation .is-menu-open .has-child .wp-block-navigation__submenu-container {
		width: 100%;
		padding-left: var(--wp--preset--spacing--40); /* 24 */
		padding-block-start: 0;
		padding-block-end: var(--wp--preset--spacing--20); /* 8 */
		/* Ecart rubrique parente -> 1re sous-entree : le panneau colle deja la 1re sous-entree (gap de boite
		   nul), mais la rangee parente et la 1re sous-entree font chacune 44px, ce qui laisse un ecart
		   centre a centre de 44px (encore trop aere). On remonte le panneau de 16px (marge negative) pour
		   que la 1re sous-entree se glisse SOUS le libelle parent (ecart centre a centre 44 -> 28px), la
		   rubrique se lisant alors comme un intitule de section. La cible tactile des sous-entrees reste 44px
		   (seule la position du panneau bouge, pas la hauteur des rangees). */
		margin-block-start: calc( var(--wp--preset--spacing--30) * -1 ); /* -16 */
	}

	/* Sous-entrees : Titillium 400, rangee compacte 44px (cible tactile a11y respectee), border-box pour
	   que min-height + padding ne s'additionnent pas. */
	.mx-header__nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		box-sizing: border-box;
		min-height: 44px;
		padding-block: var(--wp--preset--spacing--10); /* 4 */
	}
	.mx-header__nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
	.mx-header__nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__label {
		font-family: var(--wp--preset--font-family--titillium);
		font-weight: 400;
	}

	/* Chevron RETIRE (pas seulement cache) : sous-menu toujours ouvert, plus rien a indiquer. On sort le
	   pseudo-chevron du flux (display:none) et on masque l'icone native. */
	.mx-header__nav .is-menu-open .wp-block-navigation-submenu__toggle::after,
	.mx-header__nav .is-menu-open .wp-block-navigation__submenu-icon {
		display: none;
	}

	/* Bouton parent neutralise : il ne bascule plus rien -> non cliquable (aucun controle inerte au tap) ;
	   redevient un simple libelle de rubrique. header.js pose tabindex=-1 + aria-disabled en mobile. */
	.mx-header__nav .is-menu-open .wp-block-navigation-submenu__toggle {
		pointer-events: none;
		cursor: default;
		padding-inline-end: 0; /* plus de place reservee pour le chevron */
	}
}

/* Accessibilite : focus visible homogene sur les cibles cliquables de l'en-tete. */
.mx-header a:focus-visible,
.mx-header .wp-block-navigation-item__content:focus-visible {
	outline: 2px solid var(--wp--preset--color--yellow);
	outline-offset: 3px;
}

/* Respect de prefers-reduced-motion : on neutralise les transitions preparees. L'en-tete lui-meme est
   inclus (transform du passage en compact) : la bascule devient INSTANTANEE, mais l'etat compact reste
   bien applique (on supprime l'animation, pas la fonctionnalite). */
@media (prefers-reduced-motion: reduce) {
	.mx-header,
	.mx-header * {
		transition: none !important;
	}
}