/**
 * Navigation Arkéa.
 *
 * L'attribut `hidden` porte l'état fermé. Les règles d'affichage sont donc
 * écrites explicitement, état par état : une feuille de style d'auteur prime sur
 * celle du navigateur, et un simple `display: flex` effacerait `hidden` sans
 * qu'on s'en aperçoive.
 */

.arkea-nav {
	--arkea-nav-top: 100%;
	position: static;
}

.arkea-nav__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(1rem, 2vw, 2rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.arkea-nav__item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.arkea-nav__link {
	text-decoration: none;
	color: inherit;
}

.arkea-nav__link:hover,
.arkea-nav__link:focus-visible {
	text-decoration: underline;
}

/* RGAA 10.7 : la prise de focus reste visible, avec un décalage pour ne pas
   coller au texte. */
.arkea-nav :focus-visible {
	outline: 3px solid var(--wp--preset--color--primary, #005fcc);
	outline-offset: 3px;
}

.arkea-nav__link[aria-current="page"] {
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

/* ─── Boutons de dévoilement ─────────────────────────────────────────────── */

.arkea-nav__toggle,
.arkea-nav__burger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

/* Sans JavaScript, aucun bouton inerte n'est exposé : les liens restent
   utilisables, les panneaux ne sont simplement pas atteignables. */
.arkea-nav:not([data-arkea-mega="ready"]) .arkea-nav__toggle,
.arkea-nav:not([data-arkea-mega="ready"]) .arkea-nav__burger {
	display: none;
}

/* Entrée sans destination : le bouton porte l'intitulé, il n'est donc ni carré
   ni limité à l'icône. */
.arkea-nav__toggle--intitule {
	gap: 0.4em;
	min-width: 0;
	padding: 0 0.25rem;
	font: inherit;
}

.arkea-nav__chevron {
	width: 0.5em;
	height: 0.5em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-25%, -25%);
	transition: transform 0.15s ease-out;
}

.arkea-nav__toggle[aria-expanded="true"] .arkea-nav__chevron {
	transform: rotate(225deg) translate(-25%, -25%);
}

.arkea-nav__burger-bar,
.arkea-nav__burger-bar::before,
.arkea-nav__burger-bar::after {
	display: block;
	width: 24px;
	height: 2px;
	background: currentColor;
}

.arkea-nav__burger-bar::before,
.arkea-nav__burger-bar::after {
	content: "";
	position: relative;
}

.arkea-nav__burger-bar::before {
	top: -8px;
}

.arkea-nav__burger-bar::after {
	top: 6px;
}

/* ─── Panneau et sous-menu ───────────────────────────────────────────────── */

.arkea-nav__panel[hidden],
.arkea-nav__sublist[hidden] {
	display: none;
}

.arkea-nav__panel-inner > :last-child {
	margin-bottom: 0;
}

.arkea-nav__close {
	margin-top: 1rem;
	padding: 0.5rem 1.25rem;
	min-height: 44px;
	border: 1px solid currentColor;
	border-radius: 2px;
	background: none;
	color: inherit;
	cursor: pointer;
}

.arkea-nav__sublist {
	list-style: none;
	margin: 0;
	padding: 0.5rem 0 0;
}

.arkea-nav__subitem {
	padding: 0.25rem 0;
}

/* ─── Voile ──────────────────────────────────────────────────────────────── */

.arkea-nav__veil {
	position: fixed;
	inset: 0;
	z-index: 10;
	background: rgb(0 0 0 / 40%);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s ease-out, visibility 0.15s;
}

.arkea-nav__veil.is-visible {
	opacity: 1;
	visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
	.arkea-nav__chevron,
	.arkea-nav__veil {
		transition: none;
	}
}

/* ─── À partir de 1024 px : panneau pleine largeur ───────────────────────── */

@media (min-width: 1024px) {
	.arkea-nav__burger {
		display: none;
	}

	/* Le menu reste affiché même si l'état compact avait masqué la liste. */
	.arkea-nav__list {
		display: flex;
	}

	/* Position fixe : le panneau déborde de l'en-tête sans dépendre du
	   positionnement des blocs qui l'entourent. Son bord haut est fourni par le
	   script, qui mesure le bas de la navigation à chaque ouverture. */
	.arkea-nav__panel:not([hidden]) {
		display: block;
		position: fixed;
		inset-inline: 0;
		top: var(--arkea-nav-top);
		z-index: 20;
		max-height: calc(100vh - var(--arkea-nav-top));
		overflow-y: auto;
		padding: clamp(1.5rem, 3vw, 3rem) clamp(1rem, 5vw, 5rem);
		background: var(--wp--preset--color--white, #fff);
		border-top: 3px solid var(--wp--preset--color--primary, #005fcc);
		box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
	}

	.arkea-nav__sublist:not([hidden]) {
		display: block;
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 20;
		min-width: 14rem;
		padding: 0.5rem 1rem;
		background: var(--wp--preset--color--white, #fff);
		box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
	}
}

/* ─── En dessous de 1024 px : accordéon dans le flux ─────────────────────── */

@media (max-width: 1023px) {
	.arkea-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	/* Repliée : l'état est lu sur le hamburger, jamais sur la liste. Les deux
	   règles ci-dessous ne valent que script chargé — sans JavaScript il n'y a
	   pas de hamburger, et la liste doit rester dans le flux, dépliée. */
	.arkea-nav[data-arkea-mega="ready"] .arkea-nav__burger[aria-expanded="false"] + .arkea-nav__list {
		display: none;
	}

	/* Déployée, la liste sort du flux : l'en-tête est une rangée flex, où elle
	   n'obtiendrait que la largeur de son contenu, tassée contre le bord droit.
	   Elle devient donc un panneau pleine largeur sous l'en-tête, comme les
	   panneaux de méga-menu, dont elle reprend le bord haut calculé. */
	.arkea-nav[data-arkea-mega="ready"] .arkea-nav__list {
		position: fixed;
		inset-inline: 0;
		top: var(--arkea-nav-top);
		z-index: 30;
		max-height: calc(100dvh - var(--arkea-nav-top));
		overflow-y: auto;
		padding: 0 clamp(1rem, 5vw, 2rem) 1.5rem;
		background: var(--wp--preset--color--white, #fff);
		box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
	}

	.arkea-nav__item {
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 0.5rem 0;
		border-bottom: 1px solid rgb(0 0 0 / 10%);
	}

	/* Même noeud qu'au desktop, simplement remis dans le flux : aucun clonage. */
	.arkea-nav__panel:not([hidden]),
	.arkea-nav__sublist:not([hidden]) {
		display: block;
		flex-basis: 100%;
		padding: 1rem 0 0;
	}

	.arkea-nav__veil {
		display: none;
	}
}