/**
 * Dahu Theme Annad 2026 — navigation principale desktop : dropdowns classiques + mega menu.
 *
 * Ouverture pilotée par assets/js/mega-menu.js via la classe .is-open sur le <li>.
 * Sans JS (nav sans .is-enhanced) : repli CSS au survol / focus-within.
 * La nav n'est affichée qu'à partir de 64em (voir header.css).
 */

:root {
	--font-nav: "Inter", var(--font-body);
	--annad-nav-size: 16px;
	--color-nav-active-bg: var(--wp--preset--color--blanc); /* palette theme.json « Blanc » */
	--color-nav-active-text: var(--color-on-surface-light);
}

.primary-nav__menu {
	display: flex;
	align-items: stretch;
	gap: 0.75rem;
	height: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.primary-nav__menu > li {
	position: relative; /* ancrage des dropdowns classiques */
	display: flex;
	align-items: center;
}

/* Le mega menu s'ancre sur .site-header (pleine largeur), pas sur le <li> */
.primary-nav__menu > li.has-mega-menu {
	position: static;
}

/* Liens de niveau 1 : Inter SemiBold 16px (assets/css/fonts.css), soulignés au survol / focus / état courant */
.primary-nav__menu > li > a {
	display: flex;
	align-items: center;
	align-self: center;
	height: auto;
	padding: 0.5rem 1rem;
	font-family: var(--font-nav);
	font-size: var(--annad-nav-size);
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase; /* la casse vient du CSS, pas de la saisie du menu */
	white-space: nowrap;
	color: inherit;
	text-decoration: none;
	border-radius: 999px;
	transition: color var(--transition), background-color var(--transition);
}

@media (min-width: 80em) {
	.primary-nav__menu {
		gap: 1.25rem;
	}
}

/* Juste au-dessus du palier (64em à 72em) : logo + quatre éléments de menu + icônes dépassaient la
   barre d'une vingtaine de pixels à 1024px de large (défilement horizontal de la page). Écarts et
   retraits resserrés sur cette seule plage. */
@media (min-width: 64em) and (max-width: 71.9375em) {
	.primary-nav__menu {
		gap: 0.25rem;
	}

	.primary-nav__menu > li > a {
		padding-inline: 0.75rem;
	}
}


/* Le premier des liens du menu */
.primary-nav__menu > li:first-child > a { 
background:white;
color:black;
}



/* Survol, focus clavier, panneau ouvert et élément courant WordPress : simple soulignement, sans fond.
   Premier niveau uniquement (liens du mega menu / sous-menus non concernés) ; la pilule « nav-cta »
   garde son propre style (header.css). */
.primary-nav__menu > li:not(.nav-cta) > a:hover,
.primary-nav__menu > li:not(.nav-cta) > a:focus-visible,
.primary-nav__menu > li:not(.nav-cta).is-open > a,
.primary-nav__menu > li:not(.nav-cta).current-menu-item > a,
.primary-nav__menu > li:not(.nav-cta).current-menu-ancestor > a,
.primary-nav__menu > li:not(.nav-cta).current-menu-parent > a {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.35em;
}

/* Barre glissante (assets/js/nav-indicator.js) : remplace le soulignement natif ci-dessus, qui
   reste le repli sans JS. Positionnée par le script (translate + largeur) sous le texte du lien. */
.primary-nav.has-indicator .primary-nav__menu > li:not(.nav-cta) > a {
	text-decoration: none;
}

.primary-nav__indicator {
	position: absolute;
	top: 0;
	left: 0;
	height: 2px;
	background-color: currentColor;
	border-radius: 1px;
	opacity: 0;
	pointer-events: none;
	transition:
		transform var(--annad-transition-base) var(--annad-ease),
		width var(--annad-transition-base) var(--annad-ease),
		background-color var(--annad-transition-base) var(--annad-ease),
		opacity var(--annad-transition-fast) var(--annad-ease);
}

.primary-nav__indicator.is-visible {
	opacity: 1;
}

/* Apparition en place (barre jusque-là masquée) : seul le fondu est animé */
.primary-nav__indicator.no-slide {
	transition: opacity var(--annad-transition-fast) var(--annad-ease);
}

/* ---------- Panneaux : fermés par défaut ----------
   Apparition / disparition animées (tokens --annad-transition-*, header.css) : fondu + léger
   déplacement vertical. Panneau fermé : visibility: hidden appliquée à la FIN de la transition
   (hors accessibilité et hors tabulation, comme le tiroir d'onglets) ; jamais display: none. */

.sub-menu--dropdown,
.mega-menu-panel {
	display: block;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transform: translateY(calc(-1 * var(--annad-panel-shift)));
	transition:
		opacity var(--annad-transition-base) var(--annad-ease),
		transform var(--annad-transition-base) var(--annad-ease),
		visibility 0s linear var(--annad-transition-base);
	z-index: var(--z-dropdown);
	background-color: var(--color-bg);
	box-shadow: var(--shadow);
}

.primary-nav__menu > li.is-open > .sub-menu--dropdown,
.primary-nav__menu > li.is-open > .mega-menu-panel,
.primary-nav:not(.is-enhanced) .primary-nav__menu > li:hover > .sub-menu--dropdown,
.primary-nav:not(.is-enhanced) .primary-nav__menu > li:hover > .mega-menu-panel,
.primary-nav:not(.is-enhanced) .primary-nav__menu > li:focus-within > .sub-menu--dropdown,
.primary-nav:not(.is-enhanced) .primary-nav__menu > li:focus-within > .mega-menu-panel {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	transform: none;
	transition:
		opacity var(--annad-transition-base) var(--annad-ease),
		transform var(--annad-transition-base) var(--annad-ease),
		visibility 0s linear 0s;
}

.primary-nav .sub-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.primary-nav .sub-menu a,
.mega-menu-panel a {
	display: block;
	padding: 0.375rem 0;
	color: inherit;
	text-decoration: none;
}

.primary-nav .sub-menu a:hover,
.mega-menu-panel a:hover {
	text-decoration: underline;
}

/* ---------- Filet de sécurité : tout sous-menu de premier niveau hors mega menu ----------
   Même si le balisage ne passe pas par Annad_Mega_Menu_Walker (menu en cours de construction,
   classes absentes), un sous-menu n'est jamais rendu à plat dans la barre : masqué par défaut,
   panneau sombre ouvert au survol / focus (sans JS) ou par mega-menu.js (classe .is-open). */
.primary-nav__menu > li:not(.has-mega-menu) > ul.sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: var(--z-dropdown);
	display: block;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transform: translateY(calc(-1 * var(--annad-panel-shift)));
	transition:
		opacity var(--annad-transition-base) var(--annad-ease),
		transform var(--annad-transition-base) var(--annad-ease),
		visibility 0s linear var(--annad-transition-base);
	min-width: 14rem;
	margin: 0;
	padding: 0.75rem 1rem;
	list-style: none;
	background-color: var(--color-bg);
	border-radius: 0 0 var(--radius-large) var(--radius-large);
	box-shadow: var(--shadow);
}

.primary-nav__menu > li:not(.has-mega-menu).is-open > ul.sub-menu,
.primary-nav:not(.is-enhanced) .primary-nav__menu > li:not(.has-mega-menu):hover > ul.sub-menu,
.primary-nav:not(.is-enhanced) .primary-nav__menu > li:not(.has-mega-menu):focus-within > ul.sub-menu {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	transform: none;
	transition:
		opacity var(--annad-transition-base) var(--annad-ease),
		transform var(--annad-transition-base) var(--annad-ease),
		visibility 0s linear 0s;
}

/* Items du dropdown : casse et graisse normales, une ligne par lien */
.primary-nav__menu > li:not(.has-mega-menu) > ul.sub-menu li {
	display: block;
}

.primary-nav__menu > li:not(.has-mega-menu) > ul.sub-menu a {
	display: block;
	padding: 0.5rem 0;
	font-size: 0.875rem;
	font-weight: 600;
	white-space: nowrap;
	text-transform: none;
	color: var(--color-text);
	text-decoration: none;
}

.primary-nav__menu > li:not(.has-mega-menu) > ul.sub-menu a:hover {
	color: var(--color-brand-green);
}

/* ---------- Dropdown classique ---------- */

.sub-menu--dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 14rem;
	padding: 0.75rem 1rem;
}

/* Niveau 3 dans un dropdown classique : liste indentée, pas de flyout */
.sub-menu--dropdown .sub-menu {
	padding-left: 1rem;
}

/* ---------- Élément « nav-cta » (pilule, style dans header.css) ---------- */

.primary-nav__menu > li.nav-cta {
	margin-right: 1rem;
}

.primary-nav__menu > li.nav-cta > a {
	height: auto;
	text-decoration: none;
}

/* ---------- Mega menu (maquette « Menu produits V4 ») ---------- */

.mega-menu-panel {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	color: var(--color-on-surface-light);
	background-color: var(--color-surface-light);
	border-radius: 0 0 var(--radius-large) var(--radius-large);
}

.mega-menu-panel__inner {
	max-width: var(--container-max);
	margin-inline: auto;
	padding: 2.5rem var(--gutter) 3rem;
}

.mega-menu-panel a:focus-visible,
.mega-menu-panel button:focus-visible {
	outline: 2px solid var(--color-on-surface-light);
	outline-offset: 2px;
}

/* Niveau 2 : catégories empilées à gauche, panneaux de catégorie à droite.
   Hauteur FIXE du mega menu, sans mesure JS : les <li> de catégorie sont « transparents »
   (display: contents), leurs en-têtes se rangent dans la colonne 1 (une rangée chacun) et TOUS
   les panneaux se superposent dans la colonne 2, sur toute la hauteur (grid-row: 1 / -1).
   La rangée finale en 1fr absorbe la hauteur du panneau le plus haut : les rangées des en-têtes
   ne s'étirent pas, et le conteneur prend la hauteur du plus grand panneau, quelle que soit la
   catégorie active. Les panneaux inactifs restent rendus (visibility: hidden, jamais display: none)
   pour compter dans ce calcul. 12 rangées d'en-têtes prévues : au-delà, les catégories
   supplémentaires s'ajoutent sous la grille sans casser le menu. */
.mega-cats {
	--annad-mega-max-height: calc(100vh - var(--header-height) - 7rem); /* plafond : le menu ne dépasse pas l'écran */
	display: grid;
	grid-template-columns: 15rem minmax(0, 1fr);
	grid-template-rows: repeat(12, auto) 1fr;
	column-gap: 3rem;
	row-gap: 0;
	min-height: 16rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mega-cats > li {
	display: contents;
}

.mega-cat__head {
	grid-column: 1;
	margin-bottom: 0.5rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.125rem 0.25rem 0.125rem 0.75rem;
	border-radius: 0.5rem;
	transition: background-color var(--transition);
}

.mega-menu-panel .mega-cat__head > a {
	flex: 1 1 auto;
	padding: 0.5rem 0;
	font-size: 0.9375rem;
	font-weight: 600;
}

.mega-cat__toggle {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	color: inherit;
	background: none;
	border: 0;
}

/* Catégorie active (JS) — sans JS : survol / focus, première catégorie par défaut */
.mega-cats > li.is-active > .mega-cat__head,
.primary-nav:not(.is-enhanced) .mega-cats > li:hover > .mega-cat__head,
.primary-nav:not(.is-enhanced) .mega-cats > li:focus-within > .mega-cat__head,
.primary-nav:not(.is-enhanced) .mega-cats:not(:hover):not(:focus-within) > li:first-child > .mega-cat__head {
	background-color: var(--color-on-surface);
	box-shadow: var(--shadow);
}

/* Niveau 3 : colonnes de la catégorie — une colonne par titre réellement présent dans le menu.
   Tous les panneaux dans la même zone ; seul l'actif est visible (fondu court entre catégories).
   Contenu plus haut que le plafond : défilement à l'intérieur du panneau. */
.mega-cat__panel {
	position: relative; /* ancrage du bouton nav-cta-secondary */
	grid-column: 2;
	grid-row: 1 / -1;
	display: grid;
	max-height: var(--annad-mega-max-height);
	overflow-y: auto;
	overscroll-behavior: contain;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition:
		opacity var(--annad-transition-fast) var(--annad-ease),
		visibility 0s linear var(--annad-transition-fast);
	grid-auto-flow: column;
	grid-auto-columns: minmax(9rem, 13rem);
	justify-content: start;
	align-items: start;
	gap: 1.5rem 3rem;
}

.mega-cats > li.is-active > .mega-cat__panel,
.primary-nav:not(.is-enhanced) .mega-cats > li:hover > .mega-cat__panel,
.primary-nav:not(.is-enhanced) .mega-cats > li:focus-within > .mega-cat__panel,
.primary-nav:not(.is-enhanced) .mega-cats:not(:hover):not(:focus-within) > li:first-child > .mega-cat__panel {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	transition:
		opacity var(--annad-transition-fast) var(--annad-ease),
		visibility 0s linear 0s;
}

/* Titres de colonnes : texte simple (URL « # ») ou lien */
.mega-col__title,
.mega-menu-panel .mega-cat__panel > li > a {
	display: block;
	margin-bottom: 0.75rem;
	padding: 0;
	font-size: 0.8125rem;
	font-weight: 600;
	color: color-mix(in srgb, var(--color-on-surface-light) 65%, transparent);
}

.mega-menu-panel .mega-col__links a {
	padding: 0.375rem 0;
	font-size: 0.875rem;
	font-weight: 700;
}

/* Classe de menu « nav-cta-secondary » : petit bouton en bas à droite du panneau
   (ex. « Découvrir notre savoir-faire »). */
.mega-cat__panel:has(> .nav-cta-secondary) {
	padding-bottom: 3.5rem;
}

.mega-cat__panel > li.nav-cta-secondary {
	position: absolute;
	right: 0;
	bottom: 0;
}

.menu-item.nav-cta-secondary > a,
.mega-menu-panel .mega-cat__panel > li.nav-cta-secondary > a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0.5rem 1rem;
	font-size: 0.75rem;
	font-weight: 600;
	text-decoration: none;
	color: inherit;
	background-color: color-mix(in srgb, currentColor 12%, transparent);
	border-radius: 0.5rem;
}

.menu-item.nav-cta-secondary > a::after {
	content: "\2192";
	font-size: 0.875rem;
}

/* Mouvement réduit : les tokens --annad-transition-* valent 0s (header.css) ; transitions restantes coupées */
@media (prefers-reduced-motion: reduce) {
	.primary-nav__menu > li > a,
	.mega-cat__head,
	.sub-menu--dropdown,
	.mega-menu-panel,
	.primary-nav__menu > li:not(.has-mega-menu) > ul.sub-menu,
	.mega-cat__panel {
		transform: none;
		transition: none;
	}
}