/* ============================================================
   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;
}

/* 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 */
.mm-arrow {
	width: 7px; height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	transition: transform .25s ease;
	opacity: .7;
}
.mm-menu-desktop > li:hover > .mm-link .mm-arrow { transform: rotate(225deg) translateY(-2px); }

/* 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; }

/* ---------- 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); }
.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; }

/* 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); }

/* 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). */
.admin-bar .mm-sticky .mm-bar { top: 32px; }
@media screen and (max-width: 782px) {
	.admin-bar .mm-sticky .mm-bar { top: 46px; }
}
@media screen and (max-width: 600px) {
	/* Sous 600px la barre d'admin n'est plus fixe : on recolle en haut. */
	.admin-bar .mm-sticky .mm-bar { top: 0; }
}

/* 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
   ============================================================ */
.mm-burger {
	display: none;
	flex-direction: column; justify-content: center; 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; }
.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é). */
.admin-bar .mm-mobile-dropdown.mm-sticky .mm-mobile-panel { top: calc(32px + var(--mm-h-sticky)); height: calc(100vh - 32px - var(--mm-h-sticky)); height: calc(100dvh - 32px - var(--mm-h-sticky)); }
@media screen and (max-width: 782px) {
	.admin-bar .mm-mobile-dropdown.mm-sticky .mm-mobile-panel { top: calc(46px + var(--mm-h-sticky)); height: calc(100vh - 46px - var(--mm-h-sticky)); height: calc(100dvh - 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. */
.mm-mobile-nav .mm-link .mm-arrow.is-split {
	box-sizing: content-box;
	padding: 16px 4px 16px 22px;
	margin: -16px 0;
	cursor: pointer;
}

/* 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; }
}