/* ============================================================
   Modern Menu — styles frontend
   Toutes les valeurs configurables passent par des --mm-* (wp_head).
   ============================================================ */

.mm-header *,
.mm-header *::before,
.mm-header *::after { box-sizing: border-box; }

.mm-header {
	position: relative;
	z-index: 9990;
	font-family: inherit;
}

/* Panneaux masqués par l'attribut [hidden] (recherche, tiroir mobile, voile).
   Ils portent tous un « display: flex », déclaration d'AUTEUR, qui l'emporte sur
   le « [hidden]{display:none} » de la feuille du navigateur : l'attribut hidden
   ne masquait donc rien. Le calque de recherche (position:fixed; inset:0;
   z-index:9993) restait posé en permanence sur toute la fenêtre, invisible mais
   cliquable → plus aucun clic ni survol ne passait, ni dans l'en-tête ni dans la
   page. On réaffirme le masquage. Le JS force déjà un reflow après avoir retiré
   l'attribut, les transitions d'ouverture jouent normalement. */
.mm-header [hidden] { display: none !important; }

/* ---------- Bannière (au-dessus de la barre) ---------- */
.mm-banner {
	position: relative;
	display: flex; align-items: center;
	height: var(--mm-banner-h, 38px);
	background: var(--mm-banner-bg, #111827);
	color: var(--mm-banner-color, #fff);
	font-size: var(--mm-banner-fs, 13px);
	font-weight: var(--mm-banner-fw, 500);
	line-height: 1.2;
	overflow: hidden;
}
/* Fenêtre de lecture : c'est elle qui rogne le texte trop long, et dans laquelle
   la piste défile. Le padding droit réserve la place de la croix. */
.mm-banner-viewport {
	flex: 1 1 auto; min-width: 0;
	display: flex; justify-content: center;
	padding: 0 24px;
	overflow: hidden;
}
.mm-banner-track {
	display: flex; align-items: center;
	white-space: nowrap;
	max-width: 100%;
}
/* Hors défilement, un message trop long est coupé proprement. La règle vise les
   enfants directs de la piste : selon qu'un lien global est réglé ou non, c'est
   le <span> du texte ou le <a> qui l'enveloppe (min-width:0 est indispensable
   pour qu'un élément flex accepte de rétrécir jusqu'aux points de suspension). */
.mm-banner:not(.is-marquee) .mm-banner-track > * {
	min-width: 0;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mm-banner-link { color: inherit; text-decoration: none; }
.mm-banner-link:hover { text-decoration: underline; }
.mm-banner a { color: inherit; }
.mm-banner-close {
	flex: 0 0 auto;
	background: none; border: 0; cursor: pointer;
	color: inherit; opacity: .65;
	font-size: 20px; line-height: 1;
	padding: 0 16px; align-self: stretch;
}
.mm-banner-close:hover { opacity: 1; }

/* Défilement continu. La piste contient deux copies identiques du message : on
   la translate de -50 %, donc au moment où la 1re copie sort à gauche la 2de est
   exactement à sa place de départ — la boucle est invisible. La durée est posée
   par le JS à partir de la vitesse réglée (px/s) et de la largeur réelle. */
.mm-banner.is-marquee .mm-banner-viewport { justify-content: flex-start; }
.mm-banner.is-marquee .mm-banner-track {
	max-width: none;
	animation: mm-marquee var(--mm-marquee-time, 20s) linear infinite;
	will-change: transform;
}
.mm-banner.is-marquee:hover .mm-banner-track { animation-play-state: paused; }
.mm-banner.is-marquee .mm-banner-text { padding-right: 3rem; }
@keyframes mm-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.mm-banner.is-marquee .mm-banner-track { animation: none; }
}

/* Barre */
.mm-header .mm-bar {
	width: 100%;
	background: var(--mm-bg);
	transition: background .35s ease, box-shadow .35s ease, height .3s ease;
}
.mm-header .mm-container {
	max-width: var(--mm-max);
	margin: 0 auto;
	padding: 0 24px;
	height: var(--mm-h);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	transition: height .3s ease;
}

/* Zones logo / menu / cta
   Les zones logo et CTA ont une base souple identique (flex:1 1 0) pour que le
   menu reste centré sur la page : ainsi, quand le logo rétrécit en sticky, le
   centre ne bouge pas et les items ne glissent pas latéralement. */
.mm-zone { display: flex; align-items: center; }
.mm-zone-logo { flex: 1 1 0; min-width: 0; }
.mm-zone-menu { flex: 0 1 auto; justify-content: center; }
.mm-zone-cta  { flex: 1 1 0; min-width: 0; justify-content: flex-end; gap: 16px; }

/* Alignement du menu sur desktop (data-mm-align, réglage « Menu »).
   Par défaut (center), logo et CTA ont la même base souple (flex:1 1 0) → menu
   centré sur la page. On déplace le menu en changeant quelle zone absorbe
   l'espace libre :
   - À droite : le logo grandit et pousse le menu contre le CTA. */
.mm-header[data-mm-align="right"] .mm-zone-cta { flex: 0 1 auto; }
/*   - À gauche : le CTA grandit, le logo garde sa largeur, le menu colle au logo. */
.mm-header[data-mm-align="left"] .mm-zone-logo { flex: 0 1 auto; }
.mm-header[data-mm-align="left"] .mm-zone-menu { justify-content: flex-start; }

/* ---------- Logo ---------- */
.mm-logo { flex: 0 0 auto; display: inline-flex; align-items: center; text-decoration: none; color: var(--mm-text); }
.mm-logo-text { font-size: 1.4rem; font-weight: 800; letter-spacing: -.02em; }
/* max-width:none : empêche un éventuel « img{max-width:100%} » du thème (Divi)
   de brider la largeur et donc de déformer le logo (étirement vertical). */
.mm-logo img { height: var(--mm-logo-h); width: auto; max-width: none; display: block; transition: height .3s ease; }
.mm-logo img.mm-logo-transp { display: none; }

/* ---------- Menu desktop ---------- */
.mm-menu-desktop {
	list-style: none;
	margin: 0; padding: 0;
	display: flex;
	align-items: center;
	gap: var(--mm-gap);
}
.mm-menu-desktop > li { position: relative; }

.mm-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	text-decoration: none;
	color: var(--mm-text);
	font-size: var(--mm-font-size);
	font-weight: var(--mm-font-weight);
	line-height: 1;
	padding: 10px 12px;
	border-radius: var(--mm-item-radius);
	transition: color .2s ease, background .2s ease;
	position: relative;
}
.mm-menu-desktop > li > .mm-link .mm-item-desc { display: none; }
.mm-icon { font-size: 18px; width: 18px; height: 18px; }

/* Chevron
   Taille et épaisseur réglables (onglet « Menu »). Les valeurs de repli servent
   si le CSS dynamique n'a pas été émis (shortcode hors wp_head, cache agressif). */
.mm-arrow {
	flex: 0 0 auto;
	width: var(--mm-arrow-size, 7px); height: var(--mm-arrow-size, 7px);
	border-right: var(--mm-arrow-w, 2px) solid currentColor;
	border-bottom: var(--mm-arrow-w, 2px) solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	transition: transform .25s ease;
	opacity: .7;
}

/* Variante « triangle plein ». Le triangle est dessiné par des bordures, sa
   largeur vaut donc 2× la demi-base : on divise pour rester visuellement
   comparable au tracé à taille de réglage égale. */
.mm-header[data-mm-arrow="caret"] .mm-arrow {
	width: 0; height: 0;
	border: 0;
	border-left: calc(var(--mm-arrow-size, 7px) / 1.4) solid transparent;
	border-right: calc(var(--mm-arrow-size, 7px) / 1.4) solid transparent;
	border-top: calc(var(--mm-arrow-size, 7px) / 1.4) solid currentColor;
	transform: none;
}

/* Variante « icône Dashicons ». L'icône porte déjà une direction : on annule le
   tracé et toutes les rotations, elle s'affiche telle qu'elle a été choisie. */
.mm-header[data-mm-arrow="dashicon"] .mm-arrow {
	width: auto; height: auto;
	border: 0;
	font-size: var(--mm-arrow-size, 7px);
	line-height: 1;
	transform: none;
}
.mm-menu-desktop > li:hover > .mm-link .mm-arrow { transform: rotate(225deg) translateY(-2px); }

/* Orientation des variantes. Le tracé se contente de pivoter de 45°, mais le
   triangle et l'icône partent déjà orientés : on reprend chaque cas là où le
   chevron tracé applique une rotation (survol desktop, sous-menus, mobile).
   Les sélecteurs sont préfixés par l'en-tête pour passer devant ces règles. */
.mm-header[data-mm-arrow="caret"] .mm-menu-desktop > li:hover > .mm-link .mm-arrow { transform: rotate(180deg); }
.mm-header[data-mm-arrow="caret"] .mm-sub-menu .mm-arrow,
.mm-header[data-mm-arrow="caret"] .mm-mobile-nav li.menu-item-has-children > .mm-link .mm-arrow,
.mm-header[data-mm-arrow="caret"] .mm-mobile-nav li.mm-has-mega > .mm-link .mm-arrow { transform: rotate(-90deg); }

.mm-header[data-mm-arrow="dashicon"] .mm-menu-desktop > li:hover > .mm-link .mm-arrow,
.mm-header[data-mm-arrow="dashicon"] .mm-sub-menu .mm-arrow,
.mm-header[data-mm-arrow="dashicon"] .mm-mobile-nav li.menu-item-has-children > .mm-link .mm-arrow,
.mm-header[data-mm-arrow="dashicon"] .mm-mobile-nav li.mm-has-mega > .mm-link .mm-arrow { transform: none; }

/* Badge */
.mm-badge {
	font-size: 10px; font-weight: 700;
	text-transform: uppercase; letter-spacing: .04em;
	background: var(--mm-accent); color: #fff;
	padding: 2px 7px; border-radius: 999px;
	vertical-align: middle;
}

/* Effets de survol */
.mm-header[data-mm-style="underline"] .mm-menu-desktop > li > .mm-link::after {
	content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px;
	height: 1px; background: var(--mm-hover);
	transform: scaleX(0); transform-origin: left;
	transition: transform .28s cubic-bezier(.65,.05,.36,1);
}
.mm-header[data-mm-style="underline"] .mm-menu-desktop > li:hover > .mm-link::after,
.mm-header[data-mm-style="underline"] .mm-menu-desktop > li.current-menu-item > .mm-link::after { transform: scaleX(1); }

.mm-header[data-mm-style="fade"] .mm-menu-desktop > li:hover > .mm-link { color: var(--mm-hover); background: color-mix(in srgb, var(--mm-hover) 10%, transparent); }

.mm-menu-desktop > li:hover > .mm-link { color: var(--mm-hover); }
.mm-highlight > .mm-link { color: var(--mm-accent); font-weight: 700; }

/* Libellés en majuscules (réglage « Menu »). L'interlettrage compense la perte
   de lisibilité des capitales. Porté par .mm-text, donc valable desktop, sous-
   menus, méga-menus et tiroir mobile, sans toucher aux descriptions ni badges. */
.mm-uppercase .mm-link .mm-text { text-transform: uppercase; letter-spacing: .06em; }

/* ---------- Sous-menu déroulant simple ---------- */
.mm-sub-menu {
	list-style: none; margin: 0; padding: 8px;
	position: absolute; top: calc(100% + 10px); left: 0;
	min-width: 230px;
	background: var(--mm-bg);
	border-radius: 14px;
	box-shadow: 0 18px 50px rgba(15,23,42,.16);
	border: 1px solid rgba(15,23,42,.06);
	opacity: 0; visibility: hidden; transform: translateY(8px);
	transition: opacity .22s ease, transform .22s ease, visibility .22s;
	z-index: 30;
}
.mm-menu-desktop > li:hover > .mm-sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }

/* Pont invisible entre l'item parent et son panneau : celui-ci s'ouvre 10px plus
   bas (top: calc(100% + 10px)) et n'existe qu'au :hover du <li>. En descendant
   lentement, la souris traverse ce vide, le :hover retombe et le panneau se
   referme avant d'être atteint. Le pont reste dans la hauteur de la barre, il ne
   déborde donc pas sur le contenu de la page. Les méga-menus sont exclus : ils
   sont en top:100%, sans écart (et leur <li> est en position:static). */
.mm-menu-desktop > li.menu-item-has-children:not(.mm-has-mega)::after {
	content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 12px;
}
/* Idem à l'horizontale pour le 3e niveau (left: calc(100% + 6px)). */
.mm-menu-desktop .mm-sub-menu > li.menu-item-has-children::after {
	content: ""; position: absolute; top: 0; bottom: 0; left: 100%; width: 8px;
}
.mm-sub-menu li { position: relative; }
.mm-sub-menu .mm-link { display: flex; width: 100%; color: var(--mm-text); border-radius: 8px; }
.mm-sub-menu .mm-link:hover { background: color-mix(in srgb, var(--mm-hover) 10%, transparent); color: var(--mm-hover); }
.mm-sub-menu .mm-arrow { transform: rotate(-45deg); margin-left: auto; }

/* Sous-sous-menu (vol) */
.mm-sub-menu .mm-sub-menu { top: -8px; left: calc(100% + 6px); }

/* ---------- Méga-menu ---------- */
.mm-has-mega { position: static; }
.mm-mega-panel {
	position: absolute; left: 0; right: 0; top: 100%;
	background: var(--mm-bg);
	border-top: 1px solid rgba(15,23,42,.06);
	box-shadow: 0 24px 60px rgba(15,23,42,.16);
	opacity: 0; visibility: hidden; transform: translateY(10px);
	transition: opacity .26s ease, transform .26s ease, visibility .26s;
	z-index: 25;
}
.mm-has-mega:hover > .mm-mega-panel { opacity: 1; visibility: visible; transform: translateY(0); }
.mm-mega-inner {
	max-width: var(--mm-max);
	margin: 0 auto;
	padding: 32px 24px;
}
.mm-mega-grid {
	list-style: none; margin: 0; padding: 0;
	display: grid;
	grid-template-columns: repeat(var(--mm-cols, 3), 1fr);
	gap: 14px 32px;
}
.mm-col-title > .mm-link {
	font-size: 13px; text-transform: uppercase; letter-spacing: .06em;
	color: var(--mm-accent); pointer-events: none; padding-left: 0; margin-bottom: 4px;
}
.mm-col-title > .mm-link .mm-arrow { display: none; }
.mm-mega-grid .mm-sub-col { list-style: none; margin: 0; padding: 0; position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; background: none; }
.mm-mega-grid .mm-sub-col .mm-link { flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 10px; border-radius: 10px; }
.mm-mega-grid .mm-sub-col .mm-link:hover { background: color-mix(in srgb, var(--mm-hover) 8%, transparent); }
.mm-item-desc { font-size: 12.5px; font-weight: 400; opacity: .65; color: var(--mm-text); }
.mm-mega-divi .mm-mega-inner { padding: 0; }

/* ---------- CTA ---------- */
.mm-phone { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--mm-text); font-weight: 600; }
.mm-phone:hover { color: var(--mm-hover); }
.mm-phone-icon { font-size: 18px; color: var(--mm-accent); }

.mm-cta-btn {
	display: inline-flex; align-items: center;
	padding: 11px 22px;
	font-weight: 700; font-size: var(--mm-font-size);
	text-decoration: none;
	border-radius: var(--mm-btn-radius);
	transition: transform .15s ease, box-shadow .25s ease, background .2s ease, color .2s ease;
}
.mm-btn-solid { background: var(--mm-cta); color: var(--mm-cta-text); }
.mm-btn-solid:hover { transform: translateY(-2px); }
.mm-btn-outline { background: transparent; color: var(--mm-cta); box-shadow: inset 0 0 0 2px var(--mm-cta); }
.mm-btn-outline:hover { background: var(--mm-cta); color: var(--mm-cta-text); }

/* ---------- Sous-titres d'items (desktop) ---------- */
.mm-header[data-mm-subtitles="1"] .mm-menu-desktop > li > .mm-link { flex-direction: column; align-items: flex-start; gap: 1px; line-height: 1.2; }
.mm-header[data-mm-subtitles="1"] .mm-menu-desktop > li > .mm-link .mm-item-desc { display: block; font-size: 11.5px; }
.mm-header[data-mm-subtitles="1"] .mm-menu-desktop > li > .mm-link .mm-arrow { position: absolute; right: 0; top: 14px; }

/* ============================================================
   EXTRAS (recherche, panier, langue)
   ============================================================ */
.mm-icon-btn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 42px; height: 42px;
	background: none; border: 0; cursor: pointer; padding: 0;
	color: var(--mm-text); text-decoration: none;
	border-radius: 50%;
	transition: background .2s ease, color .2s ease;
	position: relative;
}
.mm-icon-btn:hover { color: var(--mm-hover); background: color-mix(in srgb, var(--mm-hover) 10%, transparent); }
.mm-icon-btn .dashicons { font-size: 21px; width: 21px; height: 21px; }
.mm-transparent:not(.mm-scrolled) .mm-icon-btn { color: var(--mm-transp-text); }

/* Panier */
.mm-cart-count {
	position: absolute; top: 4px; right: 2px;
	min-width: 17px; height: 17px; padding: 0 4px;
	font-size: 10px; font-weight: 700; line-height: 17px; text-align: center;
	background: var(--mm-accent); color: #fff; border-radius: 999px;
}
.mm-cart-count.is-empty { display: none; }

/* Sélecteur de langue */
.mm-lang { position: relative; }
.mm-lang-toggle { width: auto; gap: 6px; padding: 0 10px; border-radius: var(--mm-item-radius); }
.mm-lang-current { display: inline-flex; align-items: center; font-weight: 600; font-size: 13px; text-transform: uppercase; }
.mm-lang-current img { width: 20px; height: auto; border-radius: 3px; display: block; }
.mm-lang-list {
	list-style: none; margin: 0; padding: 6px;
	position: absolute; top: calc(100% + 8px); right: 0;
	min-width: 150px; background: var(--mm-bg);
	border-radius: 12px; box-shadow: 0 18px 50px rgba(15,23,42,.16);
	border: 1px solid rgba(15,23,42,.06);
	opacity: 0; visibility: hidden; transform: translateY(8px);
	transition: opacity .2s ease, transform .2s ease, visibility .2s;
	z-index: 40;
}
.mm-lang:hover .mm-lang-list,
.mm-lang.is-open .mm-lang-list { opacity: 1; visibility: visible; transform: translateY(0); }
.mm-lang-item a { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: var(--mm-text); font-size: 14px; }
.mm-lang-item a:hover { background: color-mix(in srgb, var(--mm-hover) 10%, transparent); }
.mm-lang-item img { width: 22px; height: auto; border-radius: 3px; }
.mm-lang-item.is-active a { font-weight: 700; }

/* ---------- Recherche ---------- */
.mm-search-wrap { z-index: 9993; }
.mm-search-form { display: flex; align-items: center; gap: 8px; }
.mm-search-input { flex: 1; border: 0; background: none; font-size: 1rem; color: inherit; outline: none; }
.mm-search-submit { background: none; border: 0; cursor: pointer; color: inherit; display: inline-flex; }
.mm-search-close { background: none; border: 0; cursor: pointer; color: inherit; }

/* Variante plein écran (modal) */
.mm-header[data-mm-search="modal"] .mm-search-wrap {
	position: fixed; inset: 0;
	background: var(--mm-bg-glass);
	backdrop-filter: blur(var(--mm-blur)) saturate(140%);
	-webkit-backdrop-filter: blur(var(--mm-blur)) saturate(140%);
	display: flex; align-items: center; justify-content: center;
	opacity: 0; transition: opacity .3s ease;
}
.mm-header[data-mm-search="modal"].mm-search-open .mm-search-wrap { opacity: 1; }
.mm-header[data-mm-search="modal"] .mm-search-form {
	width: min(680px, 86vw);
	border-bottom: 2px solid var(--mm-accent);
	padding: 14px 4px;
}
.mm-header[data-mm-search="modal"] .mm-search-input { font-size: 1.6rem; color: var(--mm-text); }
.mm-header[data-mm-search="modal"] .mm-search-close { position: absolute; top: 28px; right: 32px; font-size: 38px; color: var(--mm-text); }

/* Variante champ déroulant */
.mm-header[data-mm-search="dropdown"] .mm-search-wrap {
	position: absolute; top: 100%; right: 24px;
	width: min(360px, 80vw);
	background: var(--mm-bg);
	border-radius: 14px; box-shadow: 0 18px 50px rgba(15,23,42,.16);
	border: 1px solid rgba(15,23,42,.06);
	padding: 10px 14px;
	opacity: 0; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease;
}
.mm-header[data-mm-search="dropdown"].mm-search-open .mm-search-wrap { opacity: 1; transform: translateY(0); }
.mm-header[data-mm-search="dropdown"] .mm-search-input { color: var(--mm-text); padding: 8px 0; }
.mm-header[data-mm-search="dropdown"] .mm-search-close { display: none; }

/* Lien « Mon compte » dans le tiroir mobile : pleine largeur, icône + libellé,
   posé juste au-dessus du CTA. */
.mm-mobile-account {
	display: flex; align-items: center; justify-content: center; gap: 10px;
	width: 100%;
	padding: 12px 0;
	color: var(--mm-mobile-text);
	text-decoration: none;
	font-size: calc(var(--mm-font-size-m, 18px) * .8);
	opacity: .9;
}
.mm-mobile-account:hover { opacity: 1; }
.mm-mobile-account .dashicons { width: 20px; height: 20px; font-size: 20px; }

/* Extras en mobile */
.mm-mobile-extras { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.mm-mobile-extras .mm-icon-btn,
.mm-mobile-extras .mm-lang-toggle { color: var(--mm-mobile-text); }
.mm-mobile-panel .mm-lang-list { background: rgba(255,255,255,.08); border: 0; }
.mm-mobile-panel .mm-lang-item a { color: var(--mm-mobile-text); }

/* ============================================================
   STICKY
   ============================================================ */
.mm-sticky .mm-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 9990; }
.mm-spacer { height: var(--mm-h); }

/* ---------- Portée du sticky quand il y a une bannière ----------
   Sans bannière, rien ne change : les règles ci-dessus s'appliquent seules.

   « Tout » : c'est l'en-tête ENTIER qui se fixe, bannière comprise. La barre
   repasse donc en flux à l'intérieur (sinon elle se fixerait à top:0 et
   recouvrirait la bannière). L'espaceur réserve les deux hauteurs. */
.mm-has-banner.mm-sticky[data-mm-sticky="all"] { position: fixed; top: 0; left: 0; right: 0; }
.mm-has-banner.mm-sticky[data-mm-sticky="all"] .mm-bar { position: static; }
.mm-has-banner.mm-sticky[data-mm-sticky="all"]:not(.mm-transparent) + .mm-spacer {
	height: calc(var(--mm-h) + var(--mm-banner-h, 38px));
}
.admin-bar .mm-has-banner.mm-sticky[data-mm-sticky="all"] { top: 32px; }

/* « Barre seule » : tout reste en flux au départ, la bannière défile donc
   normalement. Le JS pose .mm-bar-stuck dès que la bannière est passée : la
   barre se fixe alors, et l'espaceur apparaît au même instant pour compenser
   la hauteur qu'elle libère dans le flux (sinon la page sauterait). */
.mm-has-banner.mm-sticky[data-mm-sticky="bar"] .mm-bar { position: static; }
.mm-has-banner.mm-sticky[data-mm-sticky="bar"] + .mm-spacer { display: none; }
.mm-has-banner.mm-sticky[data-mm-sticky="bar"].mm-bar-stuck .mm-bar { position: fixed; top: 0; left: 0; right: 0; }
.mm-has-banner.mm-sticky[data-mm-sticky="bar"].mm-bar-stuck:not(.mm-transparent) + .mm-spacer {
	display: block; height: var(--mm-h);
}

/* Décale l'en-tête fixe sous la barre d'admin WordPress (visible uniquement
   quand on est connecté ; masquée en navigation privée).

   La hauteur n'est plus écrite en dur : le JS mesure la barre réellement
   affichée et pose --mm-admin-h. 32px n'est vrai que pour une barre d'admin
   standard — Divi, WooCommerce ou n'importe quel plugin peuvent y ajouter des
   éléments et la faire grandir, et l'en-tête passait alors dessous. Les valeurs
   dans les var() ne servent plus que de repli, le temps que le JS s'exécute.

   Sélecteurs volontairement lourds (body + .mm-header) : la règle doit passer
   devant une éventuelle feuille de thème enfant qui viserait .mm-bar. */
body.admin-bar .mm-header.mm-sticky .mm-bar { top: var(--mm-admin-h, 32px); }
body.admin-bar .mm-header.mm-has-banner.mm-sticky[data-mm-sticky="all"] { top: var(--mm-admin-h, 32px); }
@media screen and (max-width: 782px) {
	body.admin-bar .mm-header.mm-sticky .mm-bar { top: var(--mm-admin-h, 46px); }
	/* Portée « tout » : c'est l'en-tête qui est fixé, pas la barre. */
	body.admin-bar .mm-header.mm-has-banner.mm-sticky[data-mm-sticky="all"] { top: var(--mm-admin-h, 46px); }
}
@media screen and (max-width: 600px) {
	/* Sous 600px la barre d'admin n'est plus fixe : elle défile avec la page, il
	   n'y a donc plus rien à compenser. Le JS mesure 0 dans ce cas. */
	body.admin-bar .mm-header.mm-sticky .mm-bar { top: var(--mm-admin-h, 0px); }
	body.admin-bar .mm-header.mm-has-banner.mm-sticky[data-mm-sticky="all"] { top: var(--mm-admin-h, 0px); }
}

/* Glassmorphism (appliqué quand l'en-tête devient solide/au scroll) */
.mm-header.is-solid .mm-bar,
.mm-header.mm-scrolled .mm-bar {
	background: var(--mm-bg-glass);
	backdrop-filter: blur(var(--mm-blur)) saturate(140%);
	-webkit-backdrop-filter: blur(var(--mm-blur)) saturate(140%);
}
.mm-has-shadow.mm-scrolled .mm-bar { box-shadow: 0 6px 30px rgba(15,23,42,.10); }

/* Réduction au scroll */
.mm-shrink.mm-scrolled .mm-container { height: var(--mm-h-sticky); }
.mm-shrink.mm-scrolled .mm-logo img { height: calc(var(--mm-logo-h) * .82); }

/* ============================================================
   MODE TRANSPARENT (sur le hero)
   ============================================================ */
.mm-transparent:not(.mm-scrolled) .mm-bar { background: transparent; box-shadow: none; }
.mm-transparent:not(.mm-scrolled) .mm-link,
.mm-transparent:not(.mm-scrolled) .mm-logo-text,
.mm-transparent:not(.mm-scrolled) .mm-phone { color: var(--mm-transp-text); }
.mm-transparent:not(.mm-scrolled) .mm-burger span { background: var(--mm-transp-text); }
.mm-transparent:not(.mm-scrolled) .mm-logo-default { display: none; }
.mm-transparent:not(.mm-scrolled) .mm-logo-transp { display: block; }
/* En transparent, l'en-tête se superpose au contenu */
.mm-transparent.mm-sticky + .mm-spacer { display: none; }

/* ============================================================
   BURGER
   ============================================================ */
/* align-items: flex-end → les 3 barres (26px) se calent sur le bord DROIT du
   bouton (44px), qui affleure lui-même le padding du conteneur. Sans ça, la
   valeur par défaut les plaquait à gauche du bouton : le burger paraissait
   rentré de 18px vers l'intérieur alors que le logo, à gauche, affleurait bien.
   La cible tactile reste entière, elle déborde simplement vers la gauche. */
.mm-burger {
	display: none;
	flex-direction: column; justify-content: center; align-items: flex-end; gap: 5px;
	width: 44px; height: 44px;
	background: none; border: 0; cursor: pointer; padding: 0;
}
.mm-burger span { display: block; width: 26px; height: 2px; background: var(--mm-text); border-radius: 2px; transition: transform .3s ease, opacity .25s ease; }
.mm-body-locked { overflow: hidden; }
.mm-open .mm-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mm-open .mm-burger span:nth-child(2) { opacity: 0; }
.mm-open .mm-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   MENU MOBILE
   ============================================================ */
.mm-overlay {
	position: fixed; inset: 0;
	background: rgba(2,6,23,.55);
	opacity: 0; visibility: hidden;
	transition: opacity .3s ease, visibility .3s;
	z-index: 9991;
}
.mm-open .mm-overlay { opacity: 1; visibility: visible; }

.mm-mobile-panel {
	position: fixed; top: 0; bottom: 0;
	background: var(--mm-mobile-bg);
	color: var(--mm-mobile-text);
	z-index: 9992;
	display: flex; flex-direction: column;
	padding: 22px;
	overflow-y: auto;
	transition: transform .4s cubic-bezier(.4,0,.1,1), opacity .3s ease;
}
.mm-mobile-panel .mm-logo,
.mm-mobile-panel .mm-link,
.mm-mobile-panel .mm-phone { color: var(--mm-mobile-text); }

/* Variante : drawer droite */
.mm-mobile-slide-right .mm-mobile-panel { right: 0; width: var(--mm-mobile-w); transform: translateX(100%); }
.mm-mobile-slide-right.mm-open .mm-mobile-panel { transform: translateX(0); }
/* Variante : drawer gauche */
.mm-mobile-slide-left .mm-mobile-panel { left: 0; width: var(--mm-mobile-w); transform: translateX(-100%); }
.mm-mobile-slide-left.mm-open .mm-mobile-panel { transform: translateX(0); }
/* Variante : plein écran */
.mm-mobile-fullscreen .mm-mobile-panel { inset: 0; width: 100%; transform: translateY(-100%); opacity: 0; }
.mm-mobile-fullscreen.mm-open .mm-mobile-panel { transform: translateY(0); opacity: 1; }
.mm-mobile-fullscreen .mm-mobile-nav { margin-top: 0; }

/* Variante : menu déroulant SOUS la barre.
   Le logo et le burger restent visibles ; le burger se transforme en croix
   (pas de croix séparée). Le panneau descend sous la barre. */
.mm-mobile-dropdown .mm-mobile-head { display: none; }
.mm-mobile-dropdown:not(.mm-sticky) .mm-bar { position: relative; z-index: 9990; }

/* Style « déroulant » + bannière collée : le panneau descend sous la bannière ET
   la barre, pas seulement la barre. (Les variantes avec la barre d'admin WP
   connectée ne sont pas couvertes : l'aperçu connecté décalera le panneau.) */
.mm-has-banner.mm-mobile-dropdown.mm-sticky[data-mm-sticky="all"] .mm-mobile-panel {
	top: calc(var(--mm-banner-h, 38px) + var(--mm-h-sticky));
	height: calc(100vh - var(--mm-banner-h, 38px) - var(--mm-h-sticky));
	height: calc(100dvh - var(--mm-banner-h, 38px) - var(--mm-h-sticky));
}
.mm-mobile-dropdown .mm-mobile-panel {
	position: fixed; top: var(--mm-h-sticky); left: 0; right: 0;
	width: 100%;
	height: calc(100vh - var(--mm-h-sticky));
	/* dvh = hauteur réelle visible : 100vh inclut la zone derrière la barre du
	   navigateur mobile → sinon le CTA en bas est masqué/coupé. */
	height: calc(100dvh - var(--mm-h-sticky));
	padding: 14px 22px calc(24px + env(safe-area-inset-bottom, 0px));
	overflow: hidden; /* les volets gèrent leur propre défilement. */
	transform: translateY(-100%);
	opacity: 0;
	z-index: 9985;
	transition: transform .38s cubic-bezier(.4,0,.1,1), opacity .3s ease;
}
.mm-mobile-dropdown.mm-open .mm-mobile-panel { transform: translateY(0); opacity: 1; }
.mm-mobile-dropdown .mm-overlay { z-index: 9970; }
/* Menu ouvert : barre RÉELLEMENT solide, dans la même couleur que le panneau
   (--mm-mobile-bg). On retire le verre translucide qui laissait transparaître le
   hero → sinon la barre était plus foncée que le panneau (couleurs qui
   « s'additionnent ») et un raccord visible apparaissait entre barre et menu. */
.mm-mobile-dropdown.mm-open .mm-bar {
	background: var(--mm-mobile-bg);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}
.mm-mobile-dropdown.mm-open .mm-burger span { background: var(--mm-text); }
.mm-mobile-dropdown.mm-open .mm-logo-default { display: block; }
.mm-mobile-dropdown.mm-open .mm-logo-transp { display: none; }
/* Décalage sous la barre d'admin WordPress (aperçu connecté). Même principe que
   pour la barre : hauteur mesurée par le JS, valeur en dur seulement en repli. */
.admin-bar .mm-mobile-dropdown.mm-sticky .mm-mobile-panel { top: calc(var(--mm-admin-h, 32px) + var(--mm-h-sticky)); height: calc(100vh - var(--mm-admin-h, 32px) - var(--mm-h-sticky)); height: calc(100dvh - var(--mm-admin-h, 32px) - var(--mm-h-sticky)); }
@media screen and (max-width: 782px) {
	.admin-bar .mm-mobile-dropdown.mm-sticky .mm-mobile-panel { top: calc(var(--mm-admin-h, 46px) + var(--mm-h-sticky)); height: calc(100vh - var(--mm-admin-h, 46px) - var(--mm-h-sticky)); height: calc(100dvh - var(--mm-admin-h, 46px) - var(--mm-h-sticky)); }
}
@media screen and (max-width: 600px) {
	.admin-bar .mm-mobile-dropdown.mm-sticky .mm-mobile-panel { top: var(--mm-h-sticky); height: calc(100vh - var(--mm-h-sticky)); height: calc(100dvh - var(--mm-h-sticky)); }
}

.mm-mobile-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
/* Le logo du tiroir ne doit pas déborder sur la croix. */
.mm-mobile-head .mm-logo { min-width: 0; }
.mm-mobile-head .mm-logo img { max-height: 40px; }
.mm-close {
	position: relative; z-index: 2;
	display: inline-flex; align-items: center; justify-content: center;
	flex: 0 0 auto; width: 44px; height: 44px;
	background: none; border: 0; cursor: pointer;
	color: var(--mm-mobile-text); font-size: 36px; line-height: 1;
}

/* Conteneur des volets : fenêtre fixe qui masque ce qui glisse sur les côtés. */
.mm-mobile-nav { flex: 1; position: relative; overflow: hidden; }
/* Styles des liens : scopés à .mm-mobile-nav (et non .mm-menu-mobile) pour
   couvrir aussi les sous-volets, désormais aplatis hors du volet racine. */
.mm-mobile-nav .mm-link { display: flex; align-items: center; justify-content: space-between; padding: 13px 4px; font-size: var(--mm-font-size-m); }
.mm-mobile-nav .mm-text { min-width: 0; overflow-wrap: break-word; }
.mm-mobile-nav .mm-item-desc { display: none; }
.mm-mobile-nav .mm-arrow { border-color: var(--mm-mobile-text); }

/* ============================================================
   DRILL-DOWN MOBILE
   Chaque niveau = un volet plein cadre. Taper un parent fait glisser
   le volet enfant depuis la droite ; « Retour » le renvoie à droite.
   ============================================================ */
.mm-menu-mobile,
.mm-mobile-nav .mm-sub-menu,
.mm-mobile-nav .mm-mega-panel {
	position: absolute; inset: 0;
	display: flex; flex-direction: column; justify-content: center; gap: 2px;
	margin: 0; padding: 54px 4px 24px;
	list-style: none;
	background: var(--mm-mobile-bg);
	overflow-y: auto; overflow-x: hidden;
	min-width: 0; max-height: none; box-shadow: none; border: 0;
	opacity: 1; visibility: visible;
	transform: translateX(100%);
	transition: transform .42s cubic-bezier(.4, 0, .2, 1);
}
/* Volet racine visible d'emblée (sans bouton Retour). */
.mm-menu-mobile { transform: translateX(0); padding-top: 8px; }
/* Volet actif : ramené en place (entre par la droite). */
.mm-mobile-nav .mm-drill-active { transform: translateX(0); }
/* Volet parent poussé hors champ vers la gauche (transition « push » iOS).
   Déclaré APRÈS .mm-drill-active : un volet ayant les deux classes (niveau
   intermédiaire) doit être poussé à gauche, pas laissé au centre. */
.mm-mobile-nav .mm-drill-out { transform: translateX(-100%); }

/* Méga-menu aplati en simple liste dans son volet. */
.mm-mobile-nav .mm-mega-inner { padding: 0; max-width: none; }
.mm-mobile-nav .mm-mega-grid,
.mm-mobile-nav .mm-sub-col {
	display: block; max-height: none; margin: 0; padding: 0; list-style: none;
	min-width: 0; gap: 0;
}

/* Chevrons des parents : pointent vers la droite (= entrer dans le niveau). */
.mm-mobile-nav li.menu-item-has-children > .mm-link .mm-arrow,
.mm-mobile-nav li.mm-has-mega > .mm-link .mm-arrow { transform: rotate(-45deg); }

/* Parent à lien réel : le chevron est la seule zone qui ouvre le sous-volet
   (le reste du lien navigue). On lui donne une cible tactile confortable.
   ⚠️ Cette cible NE DOIT PAS être un padding : le chevron est dessiné par les
   bordures de l'élément lui-même, donc tout padding repousse ces bordures et
   grossit le dessin (chevron démesuré, cf. v1.0.22). On passe par un
   pseudo-élément transparent, qui étend la zone cliquable sans rien redessiner. */
.mm-mobile-nav .mm-link .mm-arrow.is-split {
	position: relative;
	cursor: pointer;
}
.mm-mobile-nav .mm-link .mm-arrow.is-split::before {
	content: "";
	position: absolute;
	top: -16px; bottom: -16px; left: -22px; right: -10px;
}

/* Bouton « Retour » injecté en JS, épinglé en haut du volet. */
.mm-drill-back {
	position: absolute; top: 14px; left: 0;
	display: inline-flex; align-items: center; gap: 9px;
	background: none; border: 0; cursor: pointer;
	color: var(--mm-mobile-text); opacity: .6;
	font-family: inherit; font-size: calc(var(--mm-font-size-m) * .9);
	padding: 6px 4px; transition: opacity .2s ease;
}
.mm-drill-back:hover { opacity: 1; }
.mm-drill-back-arrow {
	width: 9px; height: 9px;
	border-left: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
}

.mm-mobile-cta { display: flex; flex-direction: column; gap: 12px; margin-top: 22px; padding-top: 6px; }
.mm-mobile-cta .mm-cta-btn { justify-content: center; }
/* Couleur du CTA spécifique au mobile (repli sur la couleur desktop). */
.mm-mobile-cta .mm-btn-solid { background: var(--mm-cta-m); color: var(--mm-cta-text-m); }
.mm-mobile-cta .mm-btn-outline { color: var(--mm-cta-m); box-shadow: inset 0 0 0 2px var(--mm-cta-m); }
.mm-mobile-cta .mm-btn-outline:hover { background: var(--mm-cta-m); color: var(--mm-cta-text-m); }

/* Message admin */
.mm-empty { color: #b91c1c; font-size: 13px; margin: 0; }

/* Accessibilité : focus visible */
.mm-link:focus-visible,
.mm-cta-btn:focus-visible,
.mm-burger:focus-visible { outline: 2px solid var(--mm-accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
	.mm-header *, .mm-mobile-panel { transition: none !important; }
}