/* =========================================================
   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 ne s'anime pas en soi (elle bascule net), mais on lui
	   donne un délai à la fermeture pour qu'elle ne passe à "hidden"
	   qu'une fois l'animation d'opacity/transform terminée. À l'ouverture,
	   le délai est nul : le panel doit redevenir visible immédiatement. */
	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;
	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 / tablette (≤1024px) : le mega menu ne s'applique qu'au-dessus
   de 1024px. En dessous, le plugin n'affiche ni n'intercepte rien - le
   menu mobile est construit directement dans Elementor (accordéon natif
   sur de vrais sous-éléments de menu).
   ========================================================= */
@media (max-width: 1024px) {
	.amm-panel,
	.amm-chevron {
		display: none !important;
	}
}