/**
 * FTI — Mega-menus : habillage des popups Elementor utilisés en mega-menu + indices sur le menu.
 * Les classes sont posées par fti-megamenu.js (fti-mega-modal, is-mega-open, fti-has-mega).
 */

/* --- Modale transparente : on retire le cadre blanc d'Elementor ; seul le panneau
 *     (qui porte son propre fond) reste visible. --- */
.fti-mega-modal .dialog-widget-content {
	background: transparent !important;
	box-shadow: none !important;
	border-radius: 0 !important;
}

/* --- Largeur pleine du panneau mega. Le réglage « Largeur » du popup (même posé à 100vw dans Elementor)
 *     ne s'impose pas toujours côté front : la CSS générée garde un `.dialog-message` à ~1280px (width) /
 *     1360px (max-width). On force donc la pleine largeur ici ; les gouttières internes du div fluide gèrent
 *     les marges. Si une barre de défilement verticale crée un débordement horizontal, remplacer 100vw par
 *     100%. --- */
.fti-mega-modal .dialog-message {
	width: 100vw !important;
	max-width: 100vw !important;
}

/* --- Elementor pose un `style="display:block"` INLINE sur le wrapper document du popup
 *     (.elementor-location-popup), ce qui aplatit la disposition flex attendue à ce niveau et casse la
 *     largeur fluide + les gouttières. On rétablit le flex (colonne → l'enfant fluide prend toute la largeur).
 *     `!important` indispensable face au style inline. --- */
.fti-mega-modal .elementor-location-popup {
	display: flex !important;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

/* --- Animation d'ouverture : slide-up de 40px sur 0.35s. On remplace l'animation d'entrée
 *     d'Elementor par la nôtre, calée précisément. Re-jouée à chaque affichage (display none→flex). --- */
.fti-mega-modal .dialog-widget-content {
	animation: fti-mega-in 0.35s ease both !important;
}
@keyframes fti-mega-in {
	from { opacity: 0; transform: translateY( 24px ); }
	to   { opacity: 1; transform: translateY( 0 ); }
}
@media ( prefers-reduced-motion: reduce ) {
	.fti-mega-modal .dialog-widget-content { animation: none !important; }
}

/* --- Item de menu portant un mega-menu : chevron après le libellé. ---
 * Elementor pose déjà un ::after ABSOLU (effet « pointer ») sur .elementor-item, dont le
 * `content` n'apparaît qu'au survol. On déclare donc notre pseudo en flux (position: static),
 * après le texte (le lien est en flex-row), et permanent (content explicite), en neutralisant
 * les propriétés du pointeur Elementor. !important nécessaire compte tenu de la forte spécificité.
 * Le chevron s'appuie sur la classe serveur « fti-mega-<id> » (posée dans Apparence → Menus) pour
 * être rendu dès le premier affichage, sans attendre le JS — évite tout « pop » au chargement.
 * Restreint à l'en-tête (.elementor-location-header) : les mêmes items réutilisés dans le menu de
 * pied de page ne doivent pas afficher de chevron. */
.fti-has-mega > a.elementor-item::after,
.elementor-location-header li[class*="fti-mega-"] > a.elementor-item::after {
	content: "" !important;
	position: static !important;
	display: inline-block !important;
	inset: auto !important;
	width: 0.42em !important;
	height: 0.42em !important;
	margin: 0 0 0 0.45em !important;
	border: 0 !important;
	border-right: 2px solid currentColor !important;
	border-bottom: 2px solid currentColor !important;
	background: none !important;
	opacity: 1 !important;
	transform: translateY( calc( -0.12em + 2px ) ) rotate( 45deg );
	transition: transform 0.25s ease;
	flex: 0 0 auto;
}
/* Chevron retourné quand le mega-menu est ouvert. */
.fti-has-mega.is-mega-open > a.elementor-item::after {
	transform: translateY( calc( 0.08em + 2px ) ) rotate( -135deg );
}

/* --- Voile blanc 50% sur la partie basse de la page (sous le panneau) : détache le mega-menu
 *     du contenu derrière tout en laissant l'en-tête/menu dégagé. `top` posé en JS (haut du panneau).
 *     pointer-events:none → ne gêne pas la fermeture au survol ni les clics. z-index sous le panneau. --- */
.fti-mega-veil {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba( 255, 255, 255, 0.5 );
	-webkit-backdrop-filter: blur( 6px ); /* flou du fond de page → met le mega-menu en avant. */
	backdrop-filter: blur( 6px );
	pointer-events: none;
	z-index: 0;
	animation: fti-veil-in 0.35s ease both; /* fade-in léger, re-joué à chaque ouverture. */
}
@keyframes fti-veil-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@media ( prefers-reduced-motion: reduce ) {
	.fti-mega-veil { animation: none !important; }
}

/* --- Couleur de roll maintenue sur l'item tant que son mega-menu est ouvert. --- */
.menu-item.is-mega-open > a.elementor-item {
	color: var( --e-global-color-81f9425, #145ea8 ) !important;
}