/**
 * Footer — menu « Our Websites » (widget ElementsKit Nav Menu #footer__our-website-menu).
 *
 * ElementsKit free bascule le widget en burger sous 767px (pas d'option « None »).
 * Plutôt que le burger natif ou l'accordeon en flux (qui decale tout le footer et
 * oblige a scroller), on garde la pilule « Our Websites + chevron » visible et on
 * ouvre le sous-menu dans un panneau flottant a fond sombre flou (esprit top bar).
 *
 * Le panneau s'ouvre SOUS la pilule. footer.js le deplace dans <body> a l'ouverture
 * (portal) : c'est indispensable car, laisse dans le footer, le panneau ouvert vers
 * le bas passait DERRIERE les sections Elementor suivantes (Preference Center, etc.).
 * Une fois dans <body> il est en position: fixed, z-index tres eleve, donc au-dessus
 * de tout. Il est stylise par la classe .footer-menu-panel (posee par footer.js) et
 * non par un selecteur descendant du widget, justement parce qu'il n'y est plus.
 *
 * Cantonne au mobile (≤ 767px) : le comportement desktop natif d'ElementsKit reste
 * intact (le dropdown au survol utilise les styles ElementsKit d'origine).
 */

@media (max-width: 767px) {
	/* Masquer le burger natif, sa fermeture, l'overlay et le panneau d'identite */
	#footer__our-website-menu .elementskit-menu-hamburger,
	#footer__our-website-menu .elementskit-menu-close,
	#footer__our-website-menu .elementskit-menu-overlay,
	#footer__our-website-menu .elementskit-nav-identity-panel {
		display: none !important;
	}

	/* Remettre le conteneur offcanvas dans le flux normal du document */
	#footer__our-website-menu .elementskit-menu-container {
		position: static !important;
		transform: none !important;
		left: auto !important;
		right: auto !important;
		width: auto !important;
		max-width: none !important;
		height: auto !important;
		background: transparent !important;
		box-shadow: none !important;
		padding: 0 !important;
		overflow: visible !important;
		visibility: visible !important;
		opacity: 1 !important;
	}

	/* Liste de premier niveau : n'affiche que la pilule « Our Websites » (le toggle) */
	#footer__our-website-menu ul.elementskit-navbar-nav {
		display: flex !important;
		position: static !important;
		overflow: visible !important;
	}

	#footer__our-website-menu li.menu-item-has-children {
		position: relative !important;
	}

	/* Panneau flottant. Stylise par classe car footer.js le porte dans <body>.
	   Ferme par defaut ; ouvert = fixed, coordonnees left/top posees en JS.
	   ElementsKit impose max-height: 0 (accordeon) et visibility: hidden sur les
	   items : on les annule explicitement. */
	.footer-menu-panel {
		display: none !important;
	}

	.footer-menu-panel.is-open {
		display: block !important;
		position: fixed !important;
		top: auto;
		right: auto;
		bottom: auto;
		min-width: 200px !important;
		max-width: 260px !important;
		max-height: none !important;
		margin: 0 !important;
		padding: 8px 0 !important;
		list-style: none;
		background: rgba(30, 30, 30, 0.7) !important;
		backdrop-filter: blur(20px) !important;
		-webkit-backdrop-filter: blur(20px) !important;
		border-radius: 8px !important;
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) !important;
		overflow: visible !important;
		transform: none !important;
		visibility: visible !important;
		z-index: 99999 !important;
	}

	.footer-menu-panel.is-open li {
		width: 100% !important;
		margin: 0 !important;
		visibility: visible !important;
	}

	.footer-menu-panel.is-open a {
		display: block !important;
		padding: 10px 20px !important;
		color: #ffffff !important;
		visibility: visible !important;
		white-space: nowrap;
	}

	.footer-menu-panel.is-open a:hover,
	.footer-menu-panel.is-open a:focus {
		color: #ffffff !important;
		opacity: 0.75;
	}
}

/* Chevron : pas de bordure (la pilule d'ElementsKit autour du chevron est retiree),
   et rotation quand le menu est ouvert (la classe .footer-menu--open n'est posee
   qu'en mobile par footer.js, donc sans effet en desktop). */
#footer__our-website-menu .elementskit-submenu-indicator {
	border: 0 !important;
}

#footer__our-website-menu.footer-menu--open .elementskit-submenu-indicator {
	transform: rotate(180deg);
}