/* Header custom Hygiène & Nature — cf. partials/header-nav.php */

.hn-header {
	--hn-blue: #069;
	--hn-blue-dark: #005580;
	--hn-max: 1500px;
	--hn-gutter: 30px;
	--hn-mega-pad: max(var(--hn-gutter), calc((100vw - var(--hn-max)) / 2 + var(--hn-gutter)));
	--hn-mega-rail: 300px;
	--hn-bar-h: 90px;
	position: relative;
	z-index: 100;
	font-family: 'Mohave', sans-serif;
}

.hn-container {
	max-width: var(--hn-max);
	margin: 0 auto;
	padding: 0 var(--hn-gutter);
	display: flex;
	align-items: center;
	gap: 30px;
}

/* ---- Top bar ---- */

.hn-topbar {
	background: #fff;
}

.hn-topbar .hn-container {
	justify-content: flex-end;
	min-height: 40px;
}

.hn-topnav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.hn-topnav a {
	display: inline-block;
	padding: 8px 0;
	color: var(--hn-blue);
	text-decoration: none;
}

.hn-topnav a::after {
	content: '\203A';
	margin-left: 6px;
}

.hn-topnav a:hover,
.hn-topnav a:focus-visible {
	text-decoration: underline;
}

.hn-topnav a[title="Connexion"] {
	padding: 8px 14px;
	color: #fff;
	background: var(--hn-blue);
	font-weight: 700;
}

.hn-topnav a[title="Connexion"]:hover {
	color: var(--hn-blue);
	background: #fff;
	box-shadow: inset 0 0 0 1px var(--hn-blue);
	text-decoration: none;
}

/* ---- Barre principale ---- */

.hn-bar {
	position: sticky;
	top: 0;
	background: var(--hn-blue);
}

.hn-bar .hn-container {
	min-height: var(--hn-bar-h);
	justify-content: space-between;
}

.hn-logo {
	display: block;
	flex: none;
}

.hn-logo-img {
	display: block;
	width: auto;
	height: 60px;
}

/* ---- Menu principal ---- */

.hn-nav {
	display: flex;
	align-items: center;
	margin-left: auto;
}

.hn-menu,
.hn-menu .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hn-menu {
	display: flex;
	align-items: center;
}

.hn-menu > li {
	position: relative;
}

.hn-menu > li > a {
	display: flex;
	align-items: center;
	padding: 12px 18px;
	/* Le lien occupe toute la hauteur de la barre : sinon il reste une bande
	   morte entre l'item et le panneau, qui referme le menu au survol. */
	min-height: var(--hn-bar-h);
	color: #fff;
	font-size: 1.1em;
	font-weight: 600;
	line-height: 1.2;
	text-transform: uppercase;
	text-decoration: none;
}

.hn-menu > li > a:hover,
.hn-menu > li > a:focus-visible,
.hn-menu > li.current-menu-item > a,
.hn-menu > li.current-menu-ancestor > a {
	color: #cfe6f2;
}

.hn-menu > li.menu-item-has-children > a::after {
	content: '';
	width: 6px;
	height: 6px;
	margin: -3px 0 0 8px;
	border: solid currentColor;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* Sous-menus (desktop) */

.hn-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 10;
	min-width: 280px;
	padding: 18px;
	background: #fff;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .18s, transform .18s, visibility .18s;
}

.hn-menu li:hover > .sub-menu,
.hn-menu li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.hn-menu .sub-menu a {
	display: block;
	padding: 5px 10px;
	color: var(--hn-blue);
	text-decoration: none;
	text-transform: uppercase;
}

.hn-menu .sub-menu a:hover,
.hn-menu .sub-menu a:focus-visible {
	background: #f1f7fa;
}

/* Niveau 3 */
.hn-menu .sub-menu .sub-menu {
	top: 0;
	left: 100%;
}

/* ---- Mega menu ----
   Actif via la classe CSS "hn-mega" (Apparence > Menus > options avancées),
   ou automatiquement dès 6 sous-items. */

.hn-menu > li.hn-mega,
.hn-menu > li:has(> .sub-menu > li:nth-child(6)) {
	position: static;
}

.hn-menu > li.hn-mega > .sub-menu,
.hn-menu > li:has(> .sub-menu > li:nth-child(6)) > .sub-menu {
	left: 0;
	right: 0;
	columns: 4 260px;
	column-gap: 40px;
	padding: 30px var(--hn-mega-pad);
}

.hn-menu > li.hn-mega > .sub-menu > li,
.hn-menu > li:has(> .sub-menu > li:nth-child(6)) > .sub-menu > li {
	break-inside: avoid;
}

/* ---- Mega à onglets : « Nos produits » > Catégories / Métiers ----
   Structure attendue dans Apparence > Menus :

     Nos produits
       ├ Catégories  (lien personnalisé « # »)
       │   └ les pages catégories
       └ Métiers     (lien personnalisé « # »)
           └ les pages métiers

   Détecté automatiquement dès qu'un sous-item a lui-même des enfants.
   Onglet 1 affiché par défaut, le survol (ou le focus clavier) bascule.

   ponytail: display:contents sur le <li> pour empiler les panneaux dans la
   même cellule de grille -> zéro JS, mais les <li> perdent leur sémantique
   de liste dans certains lecteurs d'écran. Passer par un walker (wrapper
   dédié pour le rail et les panneaux) si l'accessibilité le demande. */

.hn-menu > li:has(> .sub-menu > li > .sub-menu) {
	position: static;
}

.hn-menu > li:has(> .sub-menu > li > .sub-menu) > .sub-menu {
	left: 0;
	right: 0;
	display: grid;
	grid-template-columns: var(--hn-mega-rail) 1fr;
	/* Pas de column-gap : la gouttière serait une zone morte, la souris
	   y perdrait le survol de l'onglet en allant vers le panneau. Le retrait
	   est repris en padding du panneau, qui lui reste survolable. */
	column-gap: 0;
	align-content: start;
	padding: 30px var(--hn-mega-pad);
}

/* Le <li> s'effface : son <a> devient une ligne du rail, son <ul> un panneau. */
.hn-menu > li:has(> .sub-menu > li > .sub-menu) > .sub-menu > li {
	display: contents;
}

/* Rail (colonne 1) */
.hn-menu > li:has(> .sub-menu > li > .sub-menu) > .sub-menu > li > a {
	grid-column: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 20px;
	font-size: 18px;
	font-weight: 600;
	text-transform: uppercase;
}

.hn-menu > li:has(> .sub-menu > li > .sub-menu) > .sub-menu > li > a::after {
	content: '\203A';
	font-size: 22px;
	line-height: 1;
}

.hn-menu > li:has(> .sub-menu > li > .sub-menu) > .sub-menu > li:hover > a,
.hn-menu > li:has(> .sub-menu > li > .sub-menu) > .sub-menu > li:focus-within > a {
	color: #fff;
	background: var(--hn-blue);
}

/* Panneaux (colonne 2) : tous empilés sur les mêmes lignes de grille,
   donc la hauteur du mega ne bouge pas d'un onglet à l'autre. */
.hn-menu > li:has(> .sub-menu > li > .sub-menu) > .sub-menu > li > .sub-menu {
	position: static;
	grid-column: 2;
	grid-row: 1 / span 20;
	columns: 3 220px;
	column-gap: 40px;
	min-width: 0;
	padding: 0 0 0 60px;
	background: none;
	box-shadow: none;
	transform: none;
	/* Petit délai avant bascule : un passage rapide sur l'autre onglet
	   (trajet en diagonale vers le panneau) ne change plus le contenu. */
	transition: opacity .15s .12s, visibility 0s .12s;
}

.hn-menu > li:has(> .sub-menu > li > .sub-menu) > .sub-menu > li > .sub-menu > li {
	break-inside: avoid;
}

/* Panneau affiché = celui survolé (ou au focus clavier), sinon le 1er.
   Une seule règle : pas de bataille de spécificité entre les états.
   Desktop uniquement : en mobile les deux panneaux restent dépliés. */
@media screen and (min-width: 1025px) {

	.hn-menu > li:has(> .sub-menu > li > .sub-menu) > .sub-menu > li:hover > .sub-menu,
	.hn-menu > li:has(> .sub-menu > li > .sub-menu) > .sub-menu > li:focus-within > .sub-menu,
	/* `:is(:hover, :focus-within)` sur l'item de 1er niveau : sans ça le
	   panneau par défaut reste `visibility: visible` (il surcharge le parent
	   caché) et capte la souris sous la barre, ce qui ouvrait le mega. */
	.hn-menu > li:is(:hover, :focus-within):has(> .sub-menu > li > .sub-menu) > .sub-menu:not(:has(> li:hover, > li:focus-within)) > li:first-child > .sub-menu {
		opacity: 1;
		visibility: visible;
	}

	/* Souris et clavier sur deux onglets différents : le survol prime,
	   sinon les deux panneaux se superposent. */
	.hn-menu > li:has(> .sub-menu > li > .sub-menu) > .sub-menu:has(> li:hover) > li:focus-within:not(:hover) > .sub-menu {
		opacity: 0;
		visibility: hidden;
	}
}

/* Niveau 4 éventuel (sous-catégories) : simple liste indentée. */
.hn-menu > li:has(> .sub-menu > li > .sub-menu) > .sub-menu .sub-menu .sub-menu {
	position: static;
	left: auto;
	top: auto;
	min-width: 0;
	padding: 0 0 6px 16px;
	background: none;
	box-shadow: none;
	opacity: 1;
	visibility: visible;
	transform: none;
}

/* ---- Sélecteur de langue (Polylang) ---- */

.hn-menu > li.pll-parent-menu-item > a {
	padding-left: 12px;
	padding-right: 12px;
}

/* Derniers items : dropdown ancré à droite (sinon il déborde du viewport). */
.hn-menu > li:last-child > .sub-menu,
.hn-menu > li.pll-parent-menu-item > .sub-menu {
	left: auto;
	right: 0;
}

.hn-menu > li.pll-parent-menu-item > .sub-menu {
	min-width: 0;
}

.hn-menu .lang-item a {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* ---- Recherche ---- */

.hn-search {
	position: static;
}

.hn-search summary {
	display: flex;
	align-items: center;
	padding: 12px 14px;
	color: #fff;
	cursor: pointer;
	list-style: none;
}

.hn-search summary::-webkit-details-marker {
	display: none;
}

.hn-search-panel {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	padding: 24px 0;
	background: #fff;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
}

/* Fermé, le panneau garde une boîte fantôme (::details-content) qui déborde. */
.hn-search:not([open]) .hn-search-panel {
	display: none;
}

/* Le champ hérite du style Uncode (.search-field), il suffit de l'étirer. */
.hn-search-panel form {
	flex: 1;
}

/* ---- Burger (masqué en desktop) ---- */

.hn-menu-toggle {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.hn-burger {
	display: none;
	flex-direction: column;
	gap: 5px;
	padding: 12px;
	cursor: pointer;
}

.hn-burger span {
	display: block;
	width: 26px;
	height: 2px;
	background: #fff;
}

.hn-menu-toggle:focus-visible + .hn-burger {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* ---- Mobile ---- */

@media screen and (max-width: 1024px) {

	.hn-burger {
		display: flex;
	}

	.hn-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		max-height: calc(100vh - var(--hn-bar-h));
		padding-bottom: 20px;
		overflow-y: auto;
		background: var(--hn-blue);
	}

	.hn-menu-toggle:checked ~ .hn-nav {
		display: flex;
	}

	.hn-menu {
		display: block;
	}

	.hn-menu > li > a {
		padding: 14px var(--hn-gutter);
		min-height: 0;
	}

	/* Sous-menus dépliés : pas de JS. */
	.hn-menu .sub-menu,
	.hn-menu > li.hn-mega > .sub-menu,
	.hn-menu > li:has(> .sub-menu > li:nth-child(6)) > .sub-menu {
		position: static;
		columns: auto;
		display: block;
		min-width: 0;
		padding: 0 0 10px;
		background: transparent;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.hn-menu .sub-menu a {
		padding: 8px var(--hn-gutter) 8px calc(var(--hn-gutter) + 20px);
		color: #cfe6f2;
	}

	.hn-menu .sub-menu a:hover {
		background: var(--hn-blue-dark);
	}

	.hn-search {
		order: -1;
	}

	.hn-search-panel {
		position: static;
		box-shadow: none;
		padding: 16px var(--hn-gutter);
	}
}

/* ---- Mega à onglets en mobile : les deux panneaux dépliés à la suite ---- */

@media screen and (max-width: 1024px) {

	.hn-menu > li:has(> .sub-menu > li > .sub-menu) > .sub-menu {
		display: block;
		padding: 0 0 10px;
	}

	.hn-menu > li:has(> .sub-menu > li > .sub-menu) > .sub-menu > li {
		display: block;
	}

	.hn-menu > li:has(> .sub-menu > li > .sub-menu) > .sub-menu > li > a {
		padding: 12px var(--hn-gutter);
		color: #fff;
		background: var(--hn-blue-dark);
	}

	.hn-menu > li:has(> .sub-menu > li > .sub-menu) > .sub-menu > li > .sub-menu {
		columns: auto;
		opacity: 1;
		visibility: visible;
	}
}