/* =========================================================
   Arcanes Mega Menu — styles front
   ========================================================= */

:root {
	--amm-vert-fonce: #667a6e;
	--amm-vert-clair: #75a159;
}

/* Conteneur global des panels, injecté dans le footer, hors du menu. */
#amm-panels {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	pointer-events: none;
	z-index: 9999;
}

/* Chaque panel est positionné dynamiquement en JS (top calculé via headerBottom()). */
.amm-panel {
	position: fixed;
	left: 0;
	width: 100%;
	background: #ffffff;
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	/* visibility attend la fin du fondu (0.18s) avant de couper le rendu :
	   sans ce délai, le panel disparaît instantanément au lieu de s'estomper. */
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
	pointer-events: none;
}

.amm-panel.amm-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
	/* À l'ouverture, visibility bascule à "visible" immédiatement (délai 0). */
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0s;
}

/* Évite un double padding en haut du template Elementor à l'intérieur du panel. */
.amm-panel .elementor-section:first-child {
	padding-top: 0 !important;
}

/* Chevron SVG ajouté automatiquement en JS derrière chaque lien concerné. */
.amm-chevron {
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-left: 8px;
	vertical-align: middle;
	fill: none;
	stroke: var(--amm-vert-fonce);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.18s ease, stroke 0.18s ease;
}

/* État hover / ouvert sur le lien de premier niveau.
   Le texte reste dans le vert foncé conforme WCAG (4.59:1) : seul le
   soulignement (text-decoration, qui suit la largeur du texte et non
   la boîte du lien) et le chevron passent au vert clair. */
li:has( > a[data-amm-item] ):hover > a,
li:has( > a[data-amm-item] ) > a[aria-expanded="true"] {
	color: var(--amm-vert-fonce) !important;
	font-weight: 700 !important;
	text-decoration-line: underline;
	text-decoration-color: var(--amm-vert-clair);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

li:has( > a[data-amm-item] ):hover > a .amm-chevron,
li:has( > a[data-amm-item] ) > a[aria-expanded="true"] .amm-chevron {
	stroke: var(--amm-vert-clair);
	transform: rotate(180deg);
}

/* =========================================================
   Mobile : le panel repasse dans le flux normal (accordéon)
   plutôt qu'en position fixed par-dessus le contenu.
   ========================================================= */
@media (max-width: 1024px) {
	.amm-panel {
		position: static;
		width: 100%;
		box-shadow: none;
		display: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		pointer-events: auto;
	}

	.amm-panel.amm-visible {
		display: block;
	}
}