/**
 * Bloc « mein/site-header » — en-tête sticky définitif.
 *
 * Styles en CLASSES uniquement (aucun style inline dans render.php). Fidèle à la
 * maquette Header.dc.html. Réutilise les tokens de theme.json (couleurs sable /
 * crème / sauge / titres, dégradé orbe-logo, polices serif / sans). Les valeurs
 * avec transparence sont dérivées des tokens via color-mix() (aucun hex figé
 * lorsqu'un token existe).
 *
 * Enqueue automatique : déclaré via « style » dans block.json ; comme le bloc est
 * présent dans le template-part header, la feuille est chargée sur toutes les pages.
 *
 * Point de rupture : desktop >= 1180px, mobile < 1180px (identique à la maquette).
 */

/* -------------------------------------------------------------------------
 * Barre STICKY.
 *
 * Le wrapper <header class="wp-block-template-part"> (fourni par le template) est
 * rendu collant ici : c'est le SEUL sélecteur ciblant un élément hors du bloc,
 * nécessaire pour que le collage se fasse par rapport au défilement de la page
 * (le pied de page, lui, utilise <footer class="wp-block-template-part"> : aucune
 * collision). Le fond, le flou et la présentation restent portés par .mein-header.
 * ---------------------------------------------------------------------- */

header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 1000;
	/* Indice de compositing : promeut la barre sur sa propre couche. Neutre sur le
	   rendu Chromium mesuré (le collage reste identique) et sert de garde-fou contre
	   un decrochage du sticky lie au backdrop-filter sur iOS/Safari (a reconfirmer
	   sur appareil reel). N'introduit aucun containing block genant : les panneaux
	   du bloc s'ancrent sur .mein-header / .mein-header__bar, non sur ce wrapper. */
	transform: translateZ(0);
}

/* Décalage sous la barre d'administration WordPress (utilisateur connecté).
   Au-dessus de 782px la barre d'admin est position:fixed (hauteur 32px) : la barre
   du site se colle donc juste en dessous. */
.admin-bar header.wp-block-template-part {
	top: 32px;
}

/* Sous 782px, la barre d'admin WordPress repasse en position:absolute : elle défile
   AVEC la page au lieu de rester fixe. Conserver un décalage (46px) laisserait un
   vide entre le haut du viewport et la barre du site au défilement. On colle donc la
   barre du site à top:0 (visible seulement en session connectée, cas du client). */
@media screen and (max-width: 782px) {
	.admin-bar header.wp-block-template-part {
		top: 0;
	}
}

/* -------------------------------------------------------------------------
 * Verrou de défilement pendant l'ouverture du menu mobile (Bug 3).
 *
 * Technique position:fixed (jamais overflow:hidden sur html / body / .wp-site-blocks,
 * qui casserait le sticky). Le JS (view.js) mémorise window.scrollY, pose
 * body.style.top = -scrollY puis ajoute cette classe ; à la fermeture il retire la
 * classe, réinitialise top et restaure la position. Le décalage top négatif géré en
 * inline compense la mise en fixed : la page reste visuellement à la même hauteur,
 * mais ne peut plus défiler derrière le panneau. Le header (sticky) reste épinglé en
 * haut car sa contrainte sticky est purement géométrique (indépendante du gel).
 * Actif uniquement en mobile : le hamburger qui déclenche le verrou est display:none
 * en desktop. ---------------------------------------------------------------------- */

body.mein-nav-locked {
	position: fixed;
	left: 0;
	right: 0;
	width: 100%;
}

/* -------------------------------------------------------------------------
 * Racine du bloc : fond crème dégradé + flou d'arrière-plan.
 * ---------------------------------------------------------------------- */

.mein-header {
	position: relative;
	font-family: var(--wp--preset--font-family--sans);
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--wp--preset--color--sable) 92%, transparent) 0%,
		color-mix(in srgb, var(--wp--preset--color--sable) 88%, transparent) 58%,
		color-mix(in srgb, var(--wp--preset--color--sable) 0%, transparent) 100%
	);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

/* Conteneur centré de la barre. */
.mein-header__bar {
	position: relative;
	max-width: 1240px;
	margin: 0 auto;
	padding: 15px clamp(20px, 5vw, 64px);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

/* -------------------------------------------------------------------------
 * Logo (partagé avec le pied de page).
 * ---------------------------------------------------------------------- */

.mein-logo {
	display: inline-flex;
	align-items: center;
	gap: 13px;
	text-decoration: none;
}

.mein-logo__orbe {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--wp--preset--gradient--orbe-logo);
	box-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, 0.45),
		inset 0 -6px 12px rgba(108, 122, 88, 0.35);
}

/* L'image de logo remplace la PASTILLE, pas le texte : elle est donc calibrée sur le
   cercle qu'elle occupe (même carré, même arrondi). La hauteur de la barre reste ainsi
   identique quel que soit le fichier déposé dans les Réglages ; une image non carrée est
   rognée par object-fit plutôt que d'étirer l'en-tête. */
.mein-logo__image {
	flex: 0 0 auto;
	display: block;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	object-fit: cover;
}

.mein-logo__wordmark {
	line-height: 1;
}

.mein-logo__line1 {
	display: block;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 23px;
	font-weight: 600;
	letter-spacing: 0.2em;
	color: var(--wp--preset--color--titres);
	white-space: nowrap;
}

.mein-logo__line2 {
	display: block;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.44em;
	color: var(--wp--preset--color--sauge-fonce);
}

/* Chaque ligne du logo s'affiche indépendamment : l'interligne appartient donc au
   COUPLE de lignes. Portée seule, la ligne 2 serait poussée vers le bas et cesserait
   d'être centrée en face de la pastille. */
.mein-logo__line1 + .mein-logo__line2 {
	margin-top: 4px;
}

.mein-logo:focus-visible {
	outline: 2px solid var(--wp--preset--color--sauge);
	outline-offset: 4px;
	border-radius: 4px;
}

/* -------------------------------------------------------------------------
 * Navigation (barre inline sur desktop).
 * ---------------------------------------------------------------------- */

.mein-header__nav {
	display: flex;
	align-items: center;
	gap: clamp(12px, 1.2vw, 22px);
}

.mein-header__menu {
	display: flex;
	align-items: center;
	gap: clamp(12px, 1.2vw, 22px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mein-header__menu li {
	margin: 0;
	padding: 0;
}

.mein-header__menu a {
	display: inline-block;
	font-size: 14px;
	letter-spacing: 0.01em;
	font-weight: 500;
	color: var(--wp--preset--color--texte-sombre);
	text-decoration: none;
	white-space: nowrap;
	padding-bottom: 4px;
	border-bottom: 2px solid transparent;
	transition: color 0.22s ease, border-color 0.22s ease;
}

/* CORRECTIF D'AUDIT (WCAG 1.4.3) : le sauge sur le fond clair de l'en-tête est
   mesuré au pixel à 4,04:1, sous le seuil. Sauge foncé : au-delà de 5:1. Le
   soulignement, non textuel, reste en sauge (seuil 3:1, satisfait).
   Cf. règle de charte, assets/css/main.css. */
.mein-header__menu a:hover {
	color: var(--mein-sauge-sur-clair);
	border-bottom-color: color-mix(in srgb, var(--wp--preset--color--sauge) 50%, transparent);
}

/* Page courante : mise en évidence (sauge foncé, gras, soulignement).
   C'est l'élément de menu ACTIF, donc présent en permanence sur chaque page :
   il échouait dans tous ses états, pas seulement au survol. */
.mein-header__menu .current-menu-item > a,
.mein-header__menu a[aria-current="page"] {
	color: var(--mein-sauge-sur-clair);
	font-weight: 700;
	border-bottom-color: var(--wp--preset--color--sauge);
}

.mein-header__menu a:focus-visible {
	outline: 2px solid var(--wp--preset--color--sauge);
	outline-offset: 3px;
	border-radius: 3px;
}

/* -------------------------------------------------------------------------
 * Bouton d'appel à l'action (pastille sauge pleine).
 * ---------------------------------------------------------------------- */

/* CORRECTIF D'AUDIT (WCAG 1.4.3) : la crème sur ce fond sauge est mesurée à
   4,32:1, sous le seuil de 4,5:1. Blanc pur : 4,62:1. Voir la règle de charte en
   tête de assets/css/main.css. */
.mein-header__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--sauge);
	color: var(--mein-texte-sur-sauge);
	padding: 12px 24px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	margin-left: 6px;
	transition: background 0.25s ease, transform 0.25s ease;
}

/* La couleur est redéclarée au survol pour battre la règle globale de survol des
   liens générée par theme.json (cf. main.css). Blanc sur sauge-fonce : 5,98:1. */
.mein-header__cta:hover {
	background: var(--wp--preset--color--sauge-fonce);
	color: var(--mein-texte-sur-sauge);
	transform: translateY(-2px);
}

.mein-header__cta:focus-visible {
	outline: 2px solid var(--wp--preset--color--sauge-fonce);
	outline-offset: 3px;
}

/* -------------------------------------------------------------------------
 * Bouton hamburger (masqué en desktop, visible en mobile).
 * ---------------------------------------------------------------------- */

.mein-header__toggle {
	display: none; /* Desktop : caché. */
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 46px;
	height: 46px;
	padding: 0 11px;
	background: transparent;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--titres) 18%, transparent);
	border-radius: 12px;
	cursor: pointer;
}

.mein-header__toggle-bar {
	display: block;
	height: 1.6px;
	border-radius: 2px;
	background: var(--wp--preset--color--titres);
	transition: transform 0.25s ease, opacity 0.2s ease;
}

.mein-header__toggle:focus-visible {
	outline: 2px solid var(--wp--preset--color--sauge);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
 * Mobile (< 1180px) : le hamburger apparaît, la nav devient un panneau déroulant.
 * ---------------------------------------------------------------------- */

@media (max-width: 1179.98px) {

	.mein-header__toggle {
		display: flex;
	}

	/* La nav quitte le flux de la barre et devient un panneau plein largeur. */
	.mein-header__nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		display: none;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 14px clamp(20px, 5vw, 64px) 26px;
		background: color-mix(in srgb, var(--wp--preset--color--sable) 97%, transparent);
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
		border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--titres) 8%, transparent);
		/* Le panneau ne dépasse jamais le bas du viewport : il s'arrête sous la barre
		   (100% = hauteur de la barre, bloc conteneur du panneau en absolute) et scrolle
		   en interne si son contenu (dont l'accordéon mega déplié) déborde. dvh gère
		   la barre d'URL mobile ; repli en vh pour les navigateurs sans dvh. border-box
		   pour que le plafond inclue le padding (sinon le padding déborde sous le pli). */
		box-sizing: border-box;
		max-height: calc(100vh - 100%);
		max-height: calc(100dvh - 100%);
		overflow-y: auto;
		/* Coupe le report du défilement vers la page derrière (chaînage de scroll). */
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
	}

	/* Ouverture pilotée par le JS (view.js) via la classe is-nav-open. */
	.mein-header.is-nav-open .mein-header__nav {
		display: flex;
	}

	.mein-header__menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		width: 100%;
	}

	.mein-header__menu a {
		font-size: 17px;
		padding: 13px 4px;
		border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--titres) 7%, transparent);
		color: var(--wp--preset--color--titres);
	}

	.mein-header__menu a:hover {
		border-bottom-color: color-mix(in srgb, var(--wp--preset--color--titres) 7%, transparent);
	}

	.mein-header__menu .current-menu-item > a,
	.mein-header__menu a[aria-current="page"] {
		/* Même correctif que la variante bureau, cf. règle de charte (main.css). */
		color: var(--mein-sauge-sur-clair);
		border-bottom-color: color-mix(in srgb, var(--wp--preset--color--titres) 7%, transparent);
	}

	.mein-header__cta {
		margin-left: 0;
		margin-top: 16px;
		padding: 15px 24px;
		font-size: 13px;
	}

	.mein-header__cta:hover {
		transform: none;
	}
}

/* =========================================================================
 * MEGA MENU (tout item .menu-item-has-mega).
 *
 * Piloté par la HIÉRARCHIE du menu WordPress (thème : Mein_Header_Nav) : chaque
 * item de premier niveau ayant des enfants devient un mega menu.
 * Déclencheur = <button class="mein-header__mega-toggle"> (pattern disclosure) ;
 * panneau = <div id="mein-mega-{ID}" class="mein-mega"> (id unique par item,
 * repris par aria-controls). Le panneau est soit multi-colonnes (une
 * .mein-mega__col par enfant de 2e niveau ayant lui-même des enfants), soit une
 * seule .mein-mega__list (enfants de 2e niveau tous feuilles). La grille
 * .mein-mega (auto-fit) s'adapte à 1, 2 ou 3 colonnes sans code supplémentaire.
 *
 * Ouverture (desktop) : survol OU focus clavier SANS JS (repli), et état
 * aria-expanded="true" / classe .is-mega-open (piloté par view.js) sinon.
 * Le repli focus-within est neutralisé dès que JS est actif (.mein-header--js)
 * afin que le bouton reste l'autorité de la disclosure au clavier.
 * ====================================================================== */

/* -------------------------------------------------------------------------
 * Bouton déclencheur (rendu comme un item de menu, avec chevron).
 * ---------------------------------------------------------------------- */

.mein-header__mega-toggle {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	padding: 0 0 4px 0;
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.01em;
	line-height: 1;
	color: var(--wp--preset--color--texte-sombre);
	cursor: pointer;
	transition: color 0.22s ease, border-color 0.22s ease;
}

/* Sauge foncé : le sauge sur le fond de l'en-tête est mesuré à 4,11:1 (pixel).
   Cf. règle de charte, assets/css/main.css. */
.mein-header__mega-toggle:hover {
	color: var(--mein-sauge-sur-clair);
	border-bottom-color: color-mix(in srgb, var(--wp--preset--color--sauge) 50%, transparent);
}

.mein-header__mega-toggle:focus-visible {
	outline: 2px solid var(--wp--preset--color--sauge);
	outline-offset: 3px;
	border-radius: 3px;
}

/* Chevron : carré bordé pivoté (vers le bas fermé, vers le haut ouvert). */
.mein-header__mega-chevron {
	width: 8px;
	height: 8px;
	margin-top: -3px;
	border-right: 1.6px solid currentColor;
	border-bottom: 1.6px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.22s ease, margin-top 0.22s ease;
}

.menu-item-has-mega:hover .mein-header__mega-chevron,
.menu-item-has-mega.is-mega-open .mein-header__mega-chevron,
.mein-header__mega-toggle[aria-expanded="true"] .mein-header__mega-chevron {
	margin-top: 3px;
	transform: rotate(-135deg);
}

/* -------------------------------------------------------------------------
 * Panneau : carte crème, ombre douce, coins arrondis, grille de colonnes.
 * (Apparence commune desktop + mobile ; positionnement spécifique plus bas.)
 * ---------------------------------------------------------------------- */

.mein-mega {
	background: var(--wp--preset--color--creme);
	/* Filet plus lisible pour détacher la carte du fond sable de la page. */
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--titres) 11%, transparent);
	border-radius: 20px;
	/* Ombre en deux couches (contact net + halo doux), dérivée du token titres afin
	   de flotter franchement sur la page sans hex figé. */
	box-shadow:
		0 3px 10px -6px color-mix(in srgb, var(--wp--preset--color--titres) 24%, transparent),
		0 26px 60px -34px color-mix(in srgb, var(--wp--preset--color--titres) 46%, transparent);
	padding: clamp(22px, 2.4vw, 36px);
	display: grid;
	/* 2 colonnes par défaut, extensible à une 3e si une catégorie apparaît. */
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: clamp(22px, 3vw, 44px);
	text-align: left;
}

/* Accent de colonne / prestation, dérivé du champ couleur_accent du terme.
 *
 * Trois jetons par variante :
 *  --mein-mega-accent      : accent décoratif (pastille, flèche, filet, survol de fond).
 *  --mein-mega-focus       : accent du focus visible, garanti >= 3:1 sur crème
 *                            (WCAG 2.2 1.4.11 Contraste des éléments non textuels).
 *  --mein-mega-accent-text : couleur de survol du TEXTE, garantie >= 4.5:1 sur crème
 *                            (WCAG 1.4.3 Contraste minimum). Le terracotta plein
 *                            (2.68:1) et le terracotta foncé (3.35:1) échouant en
 *                            texte normal, la variante terracotta retombe sur « titres ».
 */
.mein-mega .is-sauge {
	--mein-mega-accent: var(--wp--preset--color--sauge);
	--mein-mega-focus: var(--wp--preset--color--sauge-fonce);
	--mein-mega-accent-text: var(--wp--preset--color--sauge-fonce);
}

.mein-mega .is-terracotta {
	--mein-mega-accent: var(--wp--preset--color--terracotta);
	--mein-mega-focus: var(--wp--preset--color--terracotta-fonce);
	--mein-mega-accent-text: var(--wp--preset--color--titres);
}

/* Titre de colonne : conteneur <div> (et non un <h3>) — un menu de navigation ne
 * doit pas peser sur la hiérarchie des titres de la page (sinon des H3 passent avant
 * le H1 du contenu), cf. class-mein-header-nav.php. La liste de liens de la colonne
 * est nommée par ce titre via aria-labelledby. Styles neutres conservés par sécurité. */
.mein-mega__col-heading {
	margin: 0;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: inherit;
}

/* En-tête de colonne : lien vers la page d'agrégation de la catégorie.
   Nettement détaché de sa liste (marge + filet accentué sous le titre serif). */
.mein-mega__col-header {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	margin-bottom: 18px;
	padding-bottom: 12px;
	text-decoration: none;
	border-bottom: 1px solid color-mix(in srgb, var(--mein-mega-accent) 36%, transparent);
}

.mein-mega__col-titre {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 23px;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: 0.005em;
	color: var(--wp--preset--color--titres);
	transition: color 0.2s ease;
}

.mein-mega__col-fleche {
	font-size: 15px;
	color: var(--mein-mega-accent);
	transition: transform 0.2s ease;
}

.mein-mega__col-header:hover .mein-mega__col-titre {
	color: var(--mein-mega-accent-text);
}

.mein-mega__col-header:hover .mein-mega__col-fleche {
	transform: translateX(3px);
}

.mein-mega__col-header:focus-visible {
	outline: 2px solid var(--mein-mega-focus);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Liste des prestations d'une colonne. */
.mein-mega__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

/* Chaque prestation = une grille [gouttière puce | contenu]. La puce vit dans sa
   propre colonne (jamais par-dessus le texte) ; le nom et la description partagent
   la colonne de droite, donc restent parfaitement alignés l'un sous l'autre. */
.mein-mega__item {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 13px;
	align-items: start;
	padding: 10px 14px;
	border-radius: 12px;
	border-left: 3px solid transparent;
	transition: background 0.2s ease, border-color 0.2s ease;
}

/* Puce d'accent persistante, posée dans la gouttière et alignée sur la 1re ligne
   du nom. Colonne dédiée : aucun recouvrement du texte n'est possible. */
.mein-mega__item::before {
	content: "";
	grid-column: 1;
	grid-row: 1;
	align-self: start;
	width: 7px;
	height: 7px;
	margin-top: 7px;
	border-radius: 50%;
	background: var(--mein-mega-accent);
}

.mein-mega__item:hover {
	background: color-mix(in srgb, var(--mein-mega-accent) 10%, transparent);
	border-left-color: var(--mein-mega-accent);
}

.mein-mega__link {
	grid-column: 2;
	grid-row: 1;
	display: block;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--titres);
	text-decoration: none;
	transition: color 0.2s ease;
}

.mein-mega__item:hover .mein-mega__link {
	color: var(--mein-mega-accent-text);
}

.mein-mega__link:focus-visible {
	outline: 2px solid var(--mein-mega-focus);
	outline-offset: 2px;
	border-radius: 3px;
}

/* Description : coupée à EXACTEMENT 2 lignes sur TOUTES les prestations (clamp
   identique) avec une hauteur réservée de 2 lignes. Rythme régulier et troncature
   intentionnelle, cohérente entre les colonnes Approche et Soins. */
.mein-mega__desc {
	grid-column: 2;
	grid-row: 2;
	display: -webkit-box;
	margin-top: 4px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 13px;
	line-height: 1.5;
	color: var(--wp--preset--color--texte);
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 3em;
}

/* -------------------------------------------------------------------------
 * Desktop (>= 1180px) : panneau flottant absolu sous la barre.
 *
 * L'item mega n'établit PAS de contexte de positionnement (static) : le panneau
 * s'ancre sur .mein-header__bar (position:relative, max 1240px, centré), d'où un
 * panneau aligné sur le conteneur, largeur proche du contenu.
 * ---------------------------------------------------------------------- */

@media (min-width: 1180px) {

	.menu-item-has-mega {
		position: static;
	}

	/* Carte flottante ancrée sur .mein-header__bar : les insets gauche/droite valent
	   le padding de la barre, donc la carte s'aligne exactement sur le contenu de
	   l'en-tête (logo / nav), reste contenue (~1112px max sur 1240) et jamais collée
	   aux bords du viewport. */
	.mein-mega {
		position: absolute;
		top: 100%;
		left: clamp(20px, 5vw, 64px);
		right: clamp(20px, 5vw, 64px);
		margin-top: 14px;
		z-index: 1001;
		grid-template-columns: 1fr 1fr;
		column-gap: 0;
		opacity: 0;
		visibility: hidden;
		transform: translateY(8px);
		pointer-events: none;
		transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s;
	}

	/* Pont de survol transparent : comble la zone morte (~45px) entre le bas du
	   bouton et le haut de la carte flottante (margin-top 14px). Sans ce pont, le
	   pointeur perd le :hover en traversant le vide et le panneau se referme avant
	   d'etre atteint. Le pont est un pseudo-element de la carte : pointer-events
	   etant herite, il est INERTE quand le mega est ferme (la carte est alors
	   pointer-events:none, donc le CTA et les liens de nav dessous restent
	   cliquables) et ACTIF des que la carte s'ouvre (pointer-events:auto), ce qui
	   maintient le survol continu du bouton jusqu'a la carte. */
	.mein-mega::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: -46px;
		height: 46px;
		/* Transparent, sans fond ; pointer-events herite de la carte. */
	}

	/* Séparation nette des 2 colonnes : gouttière interne + fin filet centré.
	   align-items: stretch (défaut de la grille) => les colonnes ont la même hauteur,
	   donc le filet court sur toute la hauteur de la carte. */
	.mein-mega__col {
		padding-inline: clamp(26px, 2.6vw, 44px);
	}

	.mein-mega__col:first-child {
		padding-left: 0;
	}

	.mein-mega__col:last-child {
		padding-right: 0;
		border-left: 1px solid color-mix(in srgb, var(--wp--preset--color--titres) 9%, transparent);
	}

	/* Ouverture : survol souris, focus clavier (repli sans JS), ou état du bouton. */
	.menu-item-has-mega:hover > .mein-mega,
	.mein-header:not(.mein-header--js) .menu-item-has-mega:focus-within > .mein-mega,
	.menu-item-has-mega.is-mega-open > .mein-mega,
	.mein-header__mega-toggle[aria-expanded="true"] ~ .mein-mega {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		pointer-events: auto;
		transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s;
	}
}

/* -------------------------------------------------------------------------
 * Mobile (< 1180px) : le panneau devient un accordéon empilé sous le bouton.
 *
 * Le bouton s'aligne sur les liens du menu mobile ; les colonnes s'empilent en
 * pleine largeur. Ouverture pilotée par aria-expanded / .is-mega-open (JS), avec
 * repli focus-within sans JS.
 * ---------------------------------------------------------------------- */

@media (max-width: 1179.98px) {

	.menu-item-has-mega {
		width: 100%;
	}

	.mein-header__mega-toggle {
		width: 100%;
		justify-content: space-between;
		font-size: 17px;
		padding: 13px 4px;
		border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--titres) 7%, transparent);
		color: var(--wp--preset--color--titres);
	}

	.mein-header__mega-toggle:hover {
		border-bottom-color: color-mix(in srgb, var(--wp--preset--color--titres) 7%, transparent);
	}

	.mein-mega {
		display: none;
		grid-template-columns: 1fr;
		gap: 18px;
		margin: 0;
		padding: 10px 4px 16px;
		background: transparent;
		border: 0;
		border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--titres) 7%, transparent);
		border-radius: 0;
		box-shadow: none;
	}

	.mein-header:not(.mein-header--js) .menu-item-has-mega:focus-within > .mein-mega,
	.menu-item-has-mega.is-mega-open > .mein-mega,
	.mein-header__mega-toggle[aria-expanded="true"] ~ .mein-mega {
		display: grid;
	}

	.mein-mega__col-titre {
		font-size: 19px;
	}
}

/* -------------------------------------------------------------------------
 * Respect de prefers-reduced-motion.
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.mein-header__cta,
	.mein-header__menu a,
	.mein-header__toggle-bar,
	.mein-header__mega-toggle,
	.mein-header__mega-chevron,
	.mein-mega,
	.mein-mega__col-titre,
	.mein-mega__col-fleche,
	.mein-mega__item,
	.mein-mega__link {
		transition: none;
	}

	.mein-header__cta:hover {
		transform: none;
	}

	/* Le panneau apparaît sans glissement vertical. */
	.mein-mega {
		transform: none;
	}
}