/**
 * Custom Menu for Elementor – Styles frontend
 * Couleurs : Blanc (#ffffff) & Or (#f8b001)
 * ─────────────────────────────────────────────────────────────
 */

/* ══════════════════════════════════════════════════════════════
   1. VARIABLES CSS
   ══════════════════════════════════════════════════════════════ */
.cm-nav {
	--cm-primary:         #f8b001;
	--cm-primary-light:   rgba(248, 176, 1, 0.10);
	--cm-primary-dark:    #d99900;
	--cm-white:           #ffffff;
	--cm-dark:            #1a1a1a;
	--cm-gray:            #555555;
	--cm-light-gray:      #f5f5f5;
	--cm-border:          #e8e8e8;
	--cm-shadow-sm:       0 2px 8px rgba(0,0,0,0.08);
	--cm-shadow-md:       0 8px 30px rgba(0,0,0,0.12);
	--cm-shadow-lg:       0 16px 48px rgba(0,0,0,0.15);
	--cm-radius:          4px;
	--cm-transition:      0.3s ease;
}

/* ══════════════════════════════════════════════════════════════
   2. RESET / BASE
   ══════════════════════════════════════════════════════════════ */
.cm-nav *,
.cm-nav *::before,
.cm-nav *::after {
	box-sizing: border-box;
}

.cm-nav ul,
.cm-nav li {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cm-nav a {
	text-decoration: none;
}

/* ══════════════════════════════════════════════════════════════
   3. CONTENEUR NAV
   ══════════════════════════════════════════════════════════════ */
.cm-nav {
	position: relative;
	width: 100%;
	z-index: 1000;
}

/* Wrapper interne : fond réel, padding, shadow */
.cm-nav__inner-wrap {
	background-color: var(--cm-white);
	width: 100%;
	position: relative;
	transition: background-color var(--cm-transition), box-shadow var(--cm-transition);
}

/* ── Sticky – position gérée par JavaScript (classe cm-nav--fixed) ── */
/* Le wrapper n'est plus sticky en CSS pour éviter les conflits Elementor */

.cm-nav--scrolled .cm-nav__inner-wrap {
	box-shadow: var(--cm-shadow-md);
}

/* ── Rangée flex ── */
.cm-nav__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

/* ══════════════════════════════════════════════════════════════
   4. MENU HORIZONTAL
   ══════════════════════════════════════════════════════════════ */
.cm-nav__menu {
	display: flex;
	align-items: stretch;
	flex-wrap: nowrap;
	margin: 0;
	padding: 0;
}

/* ── Item ── */
.cm-nav__item {
	position: relative;
}

/* ── Lien principal ── */
.cm-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 16px 18px;
	color: var(--cm-dark);
	font-size: 15px;
	font-weight: 500;
	white-space: nowrap;
	position: relative;
	transition: color var(--cm-transition), background-color var(--cm-transition);
	cursor: pointer;
}

/* Ligne de soulignement animée */
.cm-nav__menu > .cm-nav__item > .cm-nav__link::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 18px;
	right: 18px;
	height: 2px;
	background-color: var(--cm-primary);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--cm-transition);
	border-radius: 1px;
}

.cm-nav__menu > .cm-nav__item:hover > .cm-nav__link,
.cm-nav__menu > .cm-nav__item.cm-item--active > .cm-nav__link {
	color: var(--cm-primary);
}

.cm-nav__menu > .cm-nav__item:hover > .cm-nav__link::after,
.cm-nav__menu > .cm-nav__item.cm-item--active > .cm-nav__link::after {
	transform: scaleX(1);
}

/* ── Icône ── */
.cm-nav__icon {
	font-size: 15px;
	flex-shrink: 0;
}

/* ── Badge ── */
.cm-nav__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 2px 7px;
	background-color: var(--cm-primary);
	color: var(--cm-white);
	font-size: 10px;
	font-weight: 700;
	border-radius: 20px;
	letter-spacing: 0.6px;
	line-height: 1.5;
	text-transform: uppercase;
	flex-shrink: 0;
}

/* ── Flèche dropdown ── */
.cm-nav__arrow {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	transition: transform var(--cm-transition);
	color: inherit;
	opacity: 0.7;
}

.cm-nav__item--has-children:hover > .cm-nav__link .cm-nav__arrow {
	transform: rotate(180deg);
}

/* ══════════════════════════════════════════════════════════════
   5. DROPDOWN
   ══════════════════════════════════════════════════════════════ */
.cm-nav__dropdown {
	display: block;
	position: absolute;
	top: calc(100% + 2px);
	left: 0;
	min-width: 220px;
	background-color: var(--cm-white);
	border-top: 3px solid var(--cm-primary);
	border-radius: 0 var(--cm-radius) var(--cm-radius) var(--cm-radius);
	box-shadow: var(--cm-shadow-md);
	padding: 8px 0;
	margin: 0;
	z-index: 1001;
	pointer-events: none;
	list-style: none;
}

/* ── Animation : Fondu (défaut) ── */
.cm-anim--fade .cm-nav__dropdown {
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity var(--cm-transition), visibility var(--cm-transition), transform var(--cm-transition);
}

.cm-anim--fade .cm-nav__item--has-children:hover > .cm-nav__dropdown,
.cm-anim--fade .cm-nav__dropdown.cm-dropdown--open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}

/* ── Animation : Glisser vers haut ── */
.cm-anim--slide-up .cm-nav__dropdown {
	opacity: 0;
	visibility: hidden;
	transform: translateY(16px);
	transition: opacity var(--cm-transition), visibility var(--cm-transition), transform var(--cm-transition);
}

.cm-anim--slide-up .cm-nav__item--has-children:hover > .cm-nav__dropdown,
.cm-anim--slide-up .cm-nav__dropdown.cm-dropdown--open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}

/* ── Animation : Zoom ── */
.cm-anim--scale .cm-nav__dropdown {
	opacity: 0;
	visibility: hidden;
	transform: scale(0.92) translateY(6px);
	transform-origin: top left;
	transition: opacity var(--cm-transition), visibility var(--cm-transition), transform var(--cm-transition);
}

.cm-anim--scale .cm-nav__item--has-children:hover > .cm-nav__dropdown,
.cm-anim--scale .cm-nav__dropdown.cm-dropdown--open {
	opacity: 1;
	visibility: visible;
	transform: scale(1) translateY(0);
	pointer-events: auto;
}

/* ── Animation : Flip ── */
.cm-anim--flip .cm-nav__dropdown {
	opacity: 0;
	visibility: hidden;
	transform: perspective(400px) rotateX(-12deg) translateY(6px);
	transform-origin: top center;
	transition: opacity var(--cm-transition), visibility var(--cm-transition), transform var(--cm-transition);
}

.cm-anim--flip .cm-nav__item--has-children:hover > .cm-nav__dropdown,
.cm-anim--flip .cm-nav__dropdown.cm-dropdown--open {
	opacity: 1;
	visibility: visible;
	transform: perspective(400px) rotateX(0) translateY(0);
	pointer-events: auto;
}

/* ── Liens du dropdown ── */
.cm-nav__dropdown .cm-nav__item {
	width: 100%;
}

.cm-nav__dropdown .cm-nav__link {
	display: flex;
	align-items: center;
	padding: 10px 20px;
	color: var(--cm-gray);
	font-size: 14px;
	font-weight: 400;
	border-left: 3px solid transparent;
	transition: color var(--cm-transition), background-color var(--cm-transition),
	            border-left-color var(--cm-transition), padding-left var(--cm-transition);
	white-space: nowrap;
}

.cm-nav__dropdown .cm-nav__link::after {
	display: none; /* Pas de soulignement dans le dropdown */
}

.cm-nav__dropdown .cm-nav__item:hover > .cm-nav__link {
	color: var(--cm-primary);
	background-color: var(--cm-primary-light);
	border-left-color: var(--cm-primary);
	padding-left: 24px;
}

/* ══════════════════════════════════════════════════════════════
   6. HAMBURGER
   ══════════════════════════════════════════════════════════════ */
.cm-hamburger {
	display: none;
	flex-direction: column;
	justify-content: space-between;
	width: 28px;
	height: 20px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	flex-shrink: 0;
	z-index: 1002;
}

.cm-hamburger span {
	display: block;
	width: 100%;
	height: 2px;
	background-color: var(--cm-dark);
	border-radius: 2px;
	transform-origin: center;
	transition: transform 0.35s ease, opacity 0.25s ease, background-color var(--cm-transition);
}

/* Croix de fermeture */
.cm-hamburger--active span:nth-child(1) {
	transform: translateY(9px) rotate(45deg);
	background-color: var(--cm-primary);
}

.cm-hamburger--active span:nth-child(2) {
	opacity: 0;
	transform: scaleX(0);
}

.cm-hamburger--active span:nth-child(3) {
	transform: translateY(-9px) rotate(-45deg);
	background-color: var(--cm-primary);
}

/* ══════════════════════════════════════════════════════════════
   7. MENU MOBILE
   ══════════════════════════════════════════════════════════════ */
.cm-mobile-menu {
	display: none;
	background-color: var(--cm-white);
	border-top: 3px solid var(--cm-primary);
	overflow: hidden;
}

.cm-mobile-menu__list {
	padding: 6px 0 12px;
}

/* Liens mobile */
.cm-mobile-menu .cm-nav__link {
	padding: 13px 20px;
	font-size: 15px;
	color: var(--cm-dark);
	border-bottom: 1px solid var(--cm-border);
	width: 100%;
	display: flex;
	align-items: center;
	gap: 8px;
	transition: color var(--cm-transition), background-color var(--cm-transition);
}

.cm-mobile-menu .cm-nav__link:hover,
.cm-mobile-menu .cm-nav__item.cm-item--active > .cm-nav__link {
	color: var(--cm-primary);
	background-color: var(--cm-primary-light);
}

/* Icône toggle enfants */
.cm-nav__toggle-icon {
	margin-left: auto;
	flex-shrink: 0;
	transition: transform var(--cm-transition);
	color: inherit;
	opacity: 0.6;
}

.cm-nav__item.cm-item--open > .cm-nav__link .cm-nav__toggle-icon {
	transform: rotate(180deg);
}

/* Sous-menu mobile */
.cm-mobile-menu .cm-nav__dropdown {
	position: static;
	opacity: 1;
	visibility: visible;
	transform: none;
	box-shadow: none;
	border-top: none;
	border-radius: 0;
	border-left: 3px solid var(--cm-primary);
	margin-left: 20px;
	padding: 0;
	pointer-events: auto;
	transition: none;
}

.cm-mobile-menu .cm-nav__dropdown .cm-nav__link {
	font-size: 14px;
	padding-left: 20px;
	background-color: var(--cm-light-gray);
}

.cm-mobile-menu .cm-nav__dropdown .cm-nav__item:hover > .cm-nav__link {
	background-color: var(--cm-primary-light);
	border-left: none;
	padding-left: 20px;
}

/* ══════════════════════════════════════════════════════════════
   8. RESPONSIVE
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
	.cm-nav__menu {
		display: none !important;
	}

	.cm-hamburger {
		display: flex;
	}

	.cm-nav--mobile-open .cm-mobile-menu {
		display: block;
	}
}

/* Micro-ajustement pour les très petits écrans */
@media (max-width: 480px) {
	.cm-nav__inner-wrap {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
}

/* ══════════════════════════════════════════════════════════════
   9. PLACEHOLDER ÉDITEUR ELEMENTOR
   ══════════════════════════════════════════════════════════════ */
.cm-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 30px 20px;
	background: repeating-linear-gradient(
		45deg,
		#faf5df,
		#faf5df 10px,
		#fff8e1 10px,
		#fff8e1 20px
	);
	border: 2px dashed #f8b001;
	border-radius: 6px;
	text-align: center;
	color: #666;
	font-size: 14px;
}

/* ══════════════════════════════════════════════════════════════
   10. STICKY FIXÉ (géré par JavaScript)
   ══════════════════════════════════════════════════════════════ */

/* État fixé appliqué dynamiquement par JS */
.cm-nav--fixed {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	z-index: 9999 !important;
	animation: cm-slidedown 0.3s ease;
}

@keyframes cm-slidedown {
	from { transform: translateY(-100%); }
	to   { transform: translateY(0); }
}

/* Placeholder qui maintient la hauteur dans le flux lors du sticky */
.cm-nav-placeholder {
	display: block;
}

/* ══════════════════════════════════════════════════════════════
   11. INTÉGRATION ELEMENTOR
   ══════════════════════════════════════════════════════════════ */

/**
 * Problème #1 : Elementor met overflow:hidden sur ses sections/colonnes.
 * Les dropdowns (position:absolute) sont donc coupés.
 * → On force overflow:visible sur toute la chaîne parente du widget.
 */
.elementor-widget-custom-menu,
.elementor-widget-custom-menu .elementor-widget-container {
	overflow: visible !important;
	position: relative;
}

/* Z-index suffisant pour que les dropdowns passent au-dessus de tous les widgets */
.elementor-widget-custom-menu {
	z-index: 100;
}

/* Assure que les sections contenant le widget ne clippent pas les dropdowns */
.elementor-section:has(.cm-nav),
.elementor-container:has(.cm-nav),
.e-con:has(.cm-nav),
.e-con-inner:has(.cm-nav) {
	overflow: visible !important;
}

/* ── Mode intégration ─────────────────────────────────────────────────────── */

/**
 * Mode « standalone » (section dédiée au menu, pleine largeur).
 * Le widget prend 100% de la colonne, avec son propre fond.
 */
.cm-nav--mode-standalone {
	width: 100%;
}

/**
 * Mode « header » (menu intégré dans une section avec logo + boutons).
 * Le widget s'étire pour occuper l'espace disponible entre les autres colonnes.
 * Le fond est transparent par défaut pour hériter de la section.
 */
.cm-nav--mode-header {
	width: 100%;
	flex: 1 1 auto;
}

.cm-nav--mode-header .cm-nav__inner-wrap {
	background-color: transparent !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	min-height: 0;
}

/* En mode header, les liens épousent la hauteur de la rangée */
.cm-nav--mode-header .cm-nav__menu > .cm-nav__item > .cm-nav__link {
	height: 100%;
}