/* ─────────────────────────────────────────────────────────────────────────────
 * Barre de menu principale (widget ElementsKit Nav Menu, conteneur .main-menu-bar)
 * On neutralise le burger/offcanvas natif d'ElementsKit et on le remplace par le
 * même burger que la top bar : panneau plein écran sombre + flou, accordéon pour
 * les sous-menus. Les boutons « Trader finder » et « recherche » sont déplacés
 * dans le panneau (voir main-menu.js).
 *
 * Breakpoint : 1024px, aligné sur le breakpoint natif du widget ElementsKit
 * (data-responsive-breakpoint="1024").
 * ────────────────────────────────────────────────────────────────────────── */

/* Verrou du scroll pendant que le menu plein écran est ouvert (posé par main-menu.js) */
body.main-menu-open-lock {
	overflow: hidden;
}

/* ─── Bouton burger (injecté par main-menu.js) ──────────────────────────────── */
.main-menu-bar .main-menu-burger {
	display: none;
	width: 40px;
	height: 40px;
	padding: 0;
	margin: 0;
	background: transparent;
	border: 0;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 5px;
}

/* Neutralise la règle globale button:hover/:focus de reset.css (fond #c36) */
.main-menu-bar .main-menu-burger:hover,
.main-menu-bar .main-menu-burger:focus,
.main-menu-bar .main-menu-burger:active {
	background: transparent;
	color: inherit;
	outline: none;
	box-shadow: none;
}

.main-menu-bar .main-menu-burger span {
	display: block;
	width: 22px;
	height: 2px;
	background: #771783;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.main-menu-bar.main-menu--open .main-menu-burger span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}
.main-menu-bar.main-menu--open .main-menu-burger span:nth-child(2) {
	opacity: 0;
}
.main-menu-bar.main-menu--open .main-menu-burger span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* ─── Responsive : passage en burger (≤ 780px) ──────────────────────────────── */
@media (max-width: 1024px) {

	/* On masque tout ce qui vient du responsive natif ElementsKit */
	.main-menu-bar .elementskit-menu-hamburger,
	.main-menu-bar .elementskit-menu-overlay,
	.main-menu-bar .elementskit-nav-identity-panel {
		display: none !important;
	}

	/* Notre burger, aligné à droite */
	.main-menu-bar .main-menu-burger {
		display: inline-flex;
	}

	.main-menu-bar .ekit-wid-con {
		position: relative !important;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	/* Le bouton Trader finder reste visible dans la barre ; le burger passe à sa
	 * droite (à l'extrémité). Le widget nav ne prend que sa largeur utile. */
	.main-menu-bar {
		align-items: center;
	}
	.main-menu-bar > .elementor-widget-ekit-nav-menu {
		order: 1;
		flex: 0 0 auto;
		width: auto;
	}

	/* Le conteneur du menu devient un panneau plein écran, masqué par défaut.
	 * --main-menu-top (hauteur du bandeau header) est posé par main-menu.js à
	 * l'ouverture. On force le reset du positionnement offcanvas d'ElementsKit. */
	.main-menu-bar .elementskit-menu-container {
		display: none !important;
		position: fixed !important;
		top: var(--main-menu-top, 0px) !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		transform: none !important;
		visibility: visible !important;
		opacity: 1 !important;
		width: auto !important;
		height: auto !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 24px 20px !important;
		background: rgba(30, 30, 30, 0.7) !important;
		backdrop-filter: blur(20px) !important;
		-webkit-backdrop-filter: blur(20px) !important;
		overflow-y: auto !important;
		z-index: 1000;
	}

	.main-menu-bar.main-menu--open .elementskit-menu-container {
		display: block !important;
	}

	/* Liste principale : verticale, pleine largeur, hauteur selon le contenu
	 * (sinon ElementsKit lui donne 100% et repousse le bouton recherche en bas). */
	.main-menu-bar .elementskit-navbar-nav {
		flex-direction: column !important;
		width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		flex: 0 0 auto !important;
		padding: 0 !important;
	}

	.main-menu-bar .elementskit-navbar-nav > li {
		width: 100%;
		margin: 0 !important;
	}

	/* Liens : blancs sur le panneau sombre */
	.main-menu-bar .elementskit-navbar-nav a {
		display: flex !important;
		align-items: center;
		width: 100%;
		padding: 10px 20px !important;
		color: #ffffff !important;
		justify-content: flex-start;
	}

	.main-menu-bar .elementskit-navbar-nav a:hover {
		color: #ffffff !important;
	}

	/* Sous-menus (accordéon) : masqués sauf sur le parent .is-open.
	 * On annule le positionnement/dropdown desktop d'ElementsKit. Sélecteur volontairement
	 * spécifique (.elementskit-navbar-nav li) pour battre les règles ElementsKit qui
	 * remettraient le sous-menu en position: absolute (sinon superposition). */
	.main-menu-bar .elementskit-navbar-nav li .elementskit-submenu-panel {
		display: none !important;
		position: static !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		transform: none !important;
		visibility: visible !important;
		opacity: 1 !important;
		width: 100% !important;
		min-width: 0 !important;
		max-height: none !important;
		margin: 0 !important;
		padding: 0 !important;
		background: transparent !important;
		box-shadow: none !important;
		border: 0 !important;
	}

	.main-menu-bar .elementskit-navbar-nav li.menu-item.is-open > .elementskit-submenu-panel {
		display: block !important;
	}

	/* Indentation progressive des niveaux de sous-menu */
	.main-menu-bar .elementskit-submenu-panel a {
		padding-left: 36px !important;
		font-weight: 400;
	}
	.main-menu-bar .elementskit-submenu-panel .elementskit-submenu-panel a {
		padding-left: 52px !important;
	}

	/* Chevron : on masque l'indicateur SVG bordé d'ElementsKit… */
	.main-menu-bar .elementskit-submenu-indicator {
		display: none !important;
	}

	/* …et on dessine un chevron simple en CSS sur le lien parent.
	 * Fermé : pointe à droite. Ouvert : pointe en bas. Toujours blanc. */
	.main-menu-bar .elementskit-navbar-nav li.menu-item-has-children > a::after {
		content: "";
		display: inline-block;
		flex-shrink: 0;
		width: 8px;
		height: 8px;
		margin-left: auto;
		border-style: solid;
		border-color: #ffffff;
		border-width: 2px 2px 0 0;
		transform: rotate(45deg);
		transition: transform 0.2s ease;
	}

	.main-menu-bar .elementskit-navbar-nav li.menu-item-has-children.is-open > a::after {
		transform: rotate(135deg);
	}

	/* ─── Boutons déplacés (Trader finder + recherche) ───────────────────────
	 * .main-menu__extra est ajoutée par main-menu.js sur chaque widget déplacé. */
	.main-menu-bar .elementskit-menu-container .main-menu__extra {
		width: 100%;
		padding: 10px 20px;
	}

	.main-menu-bar .elementskit-menu-container .main-menu__extra .elementor-button {
		width: 100%;
		justify-content: center;
	}

	/* Bouton recherche : reste dans le flux (juste sous le menu), aligné à gauche. */
	.main-menu-bar .elementskit-menu-container .main-menu__extra,
	.main-menu-bar .elementskit-menu-container .main-menu__extra .ekit-wid-con {
		position: static !important;
		text-align: left !important;
	}

	/* Loupe centrée dans son cercle */
	.main-menu-bar .elementskit-menu-container .main-menu__extra .ekit_navsearch-button,
	.main-menu-bar .elementskit-menu-container .main-menu__extra .ekit-navsearch-button {
		position: static !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		margin: 0 !important;
		color: #ffffff !important;
	}

	.main-menu-bar .elementskit-menu-container .main-menu__extra .ekit_navsearch-button > *,
	.main-menu-bar .elementskit-menu-container .main-menu__extra .ekit-navsearch-button > * {
		margin: 0 !important;
		line-height: 1 !important;
	}
}

/* Flou des sous-menus : desktop uniquement (en mobile ils sont à plat dans le burger). */
@media (min-width: 1025px) {
	.elementskit-submenu-panel {
		backdrop-filter: blur(20px) !important;
		-webkit-backdrop-filter: blur(20px) !important;
	}

	/* ─── Typo + largeur du dropdown desktop ────────────────────────────────
	 * ElementsKit met les liens du sous-menu en gras par défaut ; on repasse
	 * en normal, on élargit le panneau (les items de 2-3 mots renvoyaient le
	 * dernier mot à la ligne) et on ajoute un peu d'air à gauche/droite.
	 * Sélecteur scopé via ".elementskit-navbar-nav li" (même pattern que le
	 * panneau mobile plus haut) : ".elementskit-submenu-panel" seul matchait
	 * aussi la barre de premier niveau et cassait son centrage vertical. */
	.main-menu-bar .elementskit-navbar-nav li .elementskit-submenu-panel a {
		font-weight: 400 !important;
	}

	.main-menu-bar .elementskit-navbar-nav li .elementskit-submenu-panel {
		min-width: 270px !important;
		padding-left: 20px !important;
		padding-right: 20px !important;
	}

	/* Resserre le rythme vertical entre les items du dropdown : le padding
	 * vertical natif de chaque lien (15px haut/bas, ElementsKit) était peu
	 * visible tant que le texte passait sur 2 lignes (avant le fix de largeur
	 * ci-dessus). Une fois le texte sur 1 ligne, ce même padding paraît
	 * beaucoup plus genereux autour d'un texte plus court → items qui
	 * semblent plus espacés entre eux, sans qu'aucune marge n'ait été
	 * ajoutée. On le resserre a 10px pour retrouver une densite proche de
	 * l'original. Ne touche pas au padding horizontal du conteneur ci-dessus. */
	.main-menu-bar .elementskit-navbar-nav li .elementskit-submenu-panel a.dropdown-item {
		padding-top: 10px !important;
		padding-bottom: 10px !important;
	}

	/* Sous-sous-menu (un .elementskit-submenu-panel imbriqué dans un autre) :
	 * pas de flyout latéral, on l'affiche dans le flux sous son parent, indenté. */
	.main-menu-bar .elementskit-submenu-panel .elementskit-submenu-panel {
		position: static !important;
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
		transform: none !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		width: 100% !important;
		min-width: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		box-shadow: none !important;
		background: transparent !important;
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
	}

	/* Indentation des items du sous-sous-menu */
	.main-menu-bar .elementskit-submenu-panel .elementskit-submenu-panel li a {
		padding-left: 40px !important;
	}

	/* Chevron des parents imbriqués (ex. « Our Business ») masqué : leur sous-menu
	 * est déjà déplié dans le flux. On ne cible que les indicateurs situés DANS un
	 * sous-menu, donc les chevrons des items principaux restent visibles. */
	.main-menu-bar .elementskit-submenu-panel .elementskit-submenu-indicator {
		display: none !important;
	}

	/* Items principaux (premier niveau) uniquement : liseré orange en haut au survol.
	 * Bordure transparente par défaut pour éviter tout décalage vertical. */
	.main-menu-bar .elementskit-navbar-nav > li {
		border-top: 2px solid transparent;
		padding-top: 33px;
		/* Espace entre l'item et le panneau du sous-menu. Comme le panneau est en
		 * top:100% du <li>, ce padding le descend tout en restant dans la zone de
		 * survol : le sous-menu ne se ferme pas quand la souris traverse le vide. */
		padding-bottom: 20px;
	}
	.main-menu-bar .elementskit-navbar-nav > li:hover {
		border-top-color: #FF7100;
	}

	/* Largeur du panneau de sous-menu : s'adapte au texte (une seule ligne),
	 * avec un plancher de 280px. */
	.main-menu-bar .elementskit-navbar-nav > li > .elementskit-submenu-panel {
		width: max-content !important;
		min-width: 280px !important;
		max-width: 90vw !important;
	}

	.main-menu-bar .elementskit-submenu-panel a {
		white-space: nowrap !important;
	}

	/* Resserre l'espacement vertical entre items de sous-menu */
	.main-menu-bar .elementskit-submenu-panel li {
		margin: 0 !important;
	}
	.main-menu-bar .elementskit-submenu-panel li a {
		padding-top: 8px !important;
		padding-bottom: 8px !important;
	}
	/* Encore plus resserré dans le sous-sous-menu */
	.main-menu-bar .elementskit-submenu-panel .elementskit-submenu-panel li a {
		padding-top: 4px !important;
		padding-bottom: 4px !important;
	}

	/* Survol des items de sous-menu : on garde le texte orange (géré par ElementsKit)
	 * mais on supprime le fond plus clair. Sélecteur spécifique pour battre le fond
	 * généré par ElementsKit/Elementor. */
	.main-menu-bar .elementskit-navbar-nav .elementskit-submenu-panel li:hover,
	.main-menu-bar .elementskit-navbar-nav .elementskit-submenu-panel li:hover > a,
	.main-menu-bar .elementskit-navbar-nav .elementskit-submenu-panel li a:hover,
	.main-menu-bar .elementskit-navbar-nav .elementskit-submenu-panel li a:focus {
		background: transparent !important;
		background-color: transparent !important;
	}
}

/* ─── Chevron « → » à droite du bouton Trader finder (#tf-btn-header) ────────────
 * Ajouté en ::after sur le content-wrapper (dernier enfant = le texte), pour
 * survivre au re-render Elementor. Le chevron prend la couleur du texte via mask. */
/* Centrage vertical robuste : sur Chrome, le centrage par line-height/baseline
 * décale le texte de quelques pixels vers le haut. En pilotant l'alignement
 * par flexbox de bout en bout (bouton + wrapper + libellé), le rendu ne dépend
 * plus des métriques de police et devient identique sur tous les navigateurs. */
#tf-btn-header.elementor-button {
	display: inline-flex !important;
	align-items: center !important;
}

#tf-btn-header .elementor-button-content-wrapper {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	line-height: 1;
}

#tf-btn-header .elementor-button-text {
	line-height: 1;
}

#tf-btn-header .elementor-button-content-wrapper::after {
	content: "";
	flex-shrink: 0;
	width: 1em;
	height: 1em;
	background-color: currentColor;
	-webkit-mask: no-repeat center / contain;
	mask: no-repeat center / contain;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M6 4l4 4-4 4' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M6 4l4 4-4 4' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}