/**
 * Mega Menu Builder - styles front.
 * Toutes les valeurs sont des variables CSS : surchargeables depuis le theme.
 */

:root {
	--mm-accent: #d1352b;
	--mm-text: #1f2933;
	--mm-muted: #5a6472;
	--mm-bg: #ffffff;
	--mm-border: #e6e8eb;
	--mm-shadow: 0 18px 40px -18px rgba(15, 23, 42, 0.28);
	--mm-radius: 4px;
	--mm-font-size: 14px;
}

/* ---------------------------------------------------------------------
 * Conteneur
 * ------------------------------------------------------------------ */

/* Le panneau est positionne par rapport a son item : le JS n'a plus qu'a
   calculer un decalage horizontal pour l'elargir au conteneur ou a l'ecran. */
.mm-has-panel {
	position: relative;
}

.mm-panel {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 9999;
	box-sizing: border-box;
	width: 100%;
	padding: 0;
	background: var(--mm-bg);
	border-top: 1px solid var(--mm-border);
	box-shadow: var(--mm-shadow);
	color: var(--mm-text);
	font-size: var(--mm-font-size);
	line-height: 1.5;
	text-align: left;

	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(-6px);
	transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s;
}

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

.mm-has-panel.mm-open > .mm-panel,
.mm-panel.mm-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
	transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s;
}

/* Pose par le JS sur un ancetre pendant l'ouverture, pour que le panneau
   passe au-dessus des elements voisins du header. */
[data-mm-stack].mm-stack-top {
	position: relative;
	z-index: 1000;
}

/* Le JS fixe --mm-offset-left / --mm-viewport-width pour le mode pleine largeur. */
.mm-panel--full {
	left: var(--mm-offset-left, 0px);
	width: var(--mm-viewport-width, 100vw);
}

.mm-panel--container {
	left: var(--mm-offset-left, 0px);
	width: var(--mm-viewport-width, 100%);
}

.mm-panel--item {
	left: 0;
	width: max-content;
	min-width: 280px;
	max-width: 90vw;
}

.mm-panel__inner {
	margin: 0 auto;
	max-width: var(--mm-max-width, 1240px);
	padding: var(--mm-padding, 32px);
}

.mm-panel--item .mm-panel__inner {
	max-width: none;
}

/* ---------------------------------------------------------------------
 * Intro / colonnes
 * ------------------------------------------------------------------ */

.mm-panel__intro {
	margin: 0 0 24px;
	color: var(--mm-muted);
	font-size: 13px;
}

.mm-panel__intro p {
	margin: 0 0 6px;
}

.mm-panel__columns {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--mm-gap, 40px);
	align-items: start;
}

/* ---------------------------------------------------------------------
 * Reset defensif.
 *
 * Les themes et constructeurs de page cachent les <ul> imbriques dans les
 * items de menu (leurs sous-menus deroulants) avec des regles descendantes
 * comme « .nav-menu li ul { display:none; position:absolute } ». Ces regles
 * attrapent aussi les listes du panneau et les font disparaitre, alors que
 * l'intro (une <div>) reste visible. On neutralise cet heritage sur le seul
 * contenu du panneau. Le panneau lui-meme (.mm-panel) garde sa propre logique
 * d'ouverture : quand il est ferme, il masque tout son contenu de toute facon.
 * ------------------------------------------------------------------ */

/* Reset structurel : applique en permanence. Il annule display:none,
   position:absolute, clip, max-height:0, etc. Il ne touche NI a la visibility,
   NI a l'opacity, NI aux pointer-events : ceux-la restent geres par .mm-panel,
   sinon le contenu d'un panneau ferme resterait cliquable. */
.mm-panel .mm-panel__columns,
.mm-panel .mm-col,
.mm-panel .mm-block,
.mm-panel .mm-list,
.mm-panel .mm-list__item,
.mm-panel .mm-panel__footer,
.mm-panel .mm-panel__intro {
	position: static;
	transform: none;
	clip: auto;
	clip-path: none;
	max-height: none;
	min-height: 0;
	overflow: visible;
	left: auto;
	right: auto;
	top: auto;
	inset: auto;
}

.mm-panel .mm-list,
.mm-panel .mm-list__item {
	display: block !important;
	float: none;
	width: auto;
	height: auto;
	margin: 0;
	background: none;
	box-shadow: none;
	border: 0;
}

.mm-panel .mm-list__item::before,
.mm-panel .mm-list__item::after {
	content: none;
	display: none;
}

.mm-panel .mm-panel__columns {
	display: grid !important;
}

/* Reset de visibilite : uniquement quand le panneau est ouvert (ou en apercu).
   Certains themes cachent leurs sous-menus par visibility/opacity plutot que
   par display ; on ne les force a « visible » qu'a l'ouverture. */
.mm-has-panel.mm-open > .mm-panel *,
.mm-panel.mm-open *,
.mm-panel--preview *,
.mm-standalone .mm-panel * {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
}

.mm-col {
	min-width: 0;
}

.mm-col--1 { grid-column: span 1; }
.mm-col--2 { grid-column: span 2; }
.mm-col--3 { grid-column: span 3; }
.mm-col--4 { grid-column: span 4; }
.mm-col--5 { grid-column: span 5; }
.mm-col--6 { grid-column: span 6; }
.mm-col--7 { grid-column: span 7; }
.mm-col--8 { grid-column: span 8; }
.mm-col--9 { grid-column: span 9; }
.mm-col--10 { grid-column: span 10; }
.mm-col--11 { grid-column: span 11; }
.mm-col--12 { grid-column: span 12; }

.mm-col__title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px;
	font-size: 14px;
	font-weight: 700;
	color: var(--mm-text);
	letter-spacing: 0.01em;
}

.mm-col__title-link {
	display: flex;
	align-items: center;
	gap: 8px;
	color: inherit;
	text-decoration: none;
}

.mm-col__title-link:hover .mm-col__title-text {
	color: var(--mm-accent);
}

.mm-col__icon {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	font-size: 18px;
	line-height: 1;
	color: var(--mm-text);
	opacity: 0.85;
}

.mm-col__icon--img {
	object-fit: contain;
}

.mm-col__icon--svg svg {
	display: block;
	width: 18px;
	height: 18px;
}

/* ---------------------------------------------------------------------
 * Blocs
 * ------------------------------------------------------------------ */

.mm-block + .mm-block {
	margin-top: 14px;
}

.mm-heading {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 700;
	text-transform: none;
	color: var(--mm-text);
}

.mm-text {
	margin: 0;
	color: var(--mm-muted);
	font-size: 13px;
}

.mm-text p {
	margin: 0 0 6px;
}

.mm-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mm-list__item {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mm-list__item > a,
.mm-list__item > span {
	display: inline-flex;
	align-items: baseline;
	gap: 5px;
	padding: 4px 0;
	color: var(--mm-text);
	text-decoration: none;
	font-size: 13.5px;
	transition: color 0.12s ease;
}

.mm-list__item > a:hover,
.mm-list__item > a:focus-visible {
	color: var(--mm-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.mm-list__count {
	color: var(--mm-muted);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}

.mm-list__badge {
	display: inline-block;
	padding: 1px 6px;
	border-radius: 999px;
	background: var(--mm-accent);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 1.6;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.mm-list__item.is-highlight > a,
.mm-list__item.is-highlight > span {
	color: var(--mm-accent);
}

.mm-list__item--more {
	margin-top: 4px;
}

.mm-more {
	display: inline-flex;
	align-items: baseline;
	gap: 5px;
	padding: 4px 0;
	color: var(--mm-accent);
	font-size: 13.5px;
	text-decoration: none;
}

.mm-more:hover,
.mm-more:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.mm-more .mm-list__count {
	color: inherit;
	opacity: 0.85;
}

.mm-image {
	margin: 0;
}

.mm-image__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--mm-radius);
}

.mm-image__caption {
	display: block;
	margin-top: 6px;
	color: var(--mm-muted);
	font-size: 12px;
}

/* ---------------------------------------------------------------------
 * Pied
 * ------------------------------------------------------------------ */

.mm-panel__footer {
	margin-top: 28px;
	padding-top: 16px;
	border-top: 1px solid var(--mm-border);
}

.mm-footer__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--mm-text);
	font-size: 13.5px;
	font-weight: 700;
	text-decoration: none;
}

.mm-footer__link:hover,
.mm-footer__link:focus-visible {
	color: var(--mm-accent);
}

.mm-footer__count {
	font-weight: 400;
	color: var(--mm-muted);
}

.mm-footer__link:hover .mm-footer__count {
	color: inherit;
}

.mm-footer__arrow {
	transition: transform 0.14s ease;
}

.mm-footer__link:hover .mm-footer__arrow {
	transform: translateX(3px);
}

/* ---------------------------------------------------------------------
 * Mobile / accordeon
 * ------------------------------------------------------------------ */

.mm-mobile .mm-panel {
	position: static;
	width: 100%;
	max-width: none;
	left: auto;
	transform: none;
	box-shadow: none;
	border-top: 0;
	display: none;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: none;
}

.mm-mobile .mm-has-panel.mm-open > .mm-panel {
	display: block;
}

.mm-mobile .mm-panel__inner {
	padding: 12px 0 20px;
}

.mm-mobile .mm-panel__columns {
	grid-template-columns: repeat(1, minmax(0, 1fr));
	gap: 20px;
}

.mm-mobile .mm-col {
	grid-column: span 1 !important;
}

/* ---------------------------------------------------------------------
 * Apercu dans l'admin / shortcode
 * ------------------------------------------------------------------ */

.mm-panel--preview,
.mm-standalone .mm-panel {
	position: relative;
	top: auto;
	left: auto;
	width: 100%;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: none;
	transition: none;
	border: 1px solid var(--mm-border);
	border-radius: var(--mm-radius);
}

@media (prefers-reduced-motion: reduce) {
	.mm-panel,
	.mm-footer__arrow {
		transition: none;
	}
}