/**
 * Header et navigation principale.
 * Emplacement : assets/css/components/header.css
 *
 * Mobile first. Bascule en navigation horizontale à 1200px.
 */

.site-header {
	position: sticky;
	top: 0;
	z-index: var(--z-header);
	background-color: var(--e4y-cream);
	transition: box-shadow var(--duration) var(--ease);
}

/* Ombre discrète au défilement, pour détacher le header du contenu. */
.site-header.is-scrolled {
	box-shadow: var(--shadow-sm);
}

/* Le panneau de navigation vit dans le header, qui a son z-index et crée donc
   son propre contexte d'empilement : le voile, déclaré après lui dans le
   document, passait par-dessus tout le bloc — panneau compris. Les liens
   paraissaient grisés et ne recevaient plus le clic. Le header monte au-dessus
   du voile le temps que le menu soit ouvert. */
.nav-open .site-header {
	z-index: calc(var(--z-overlay) + 1);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-5);
	min-height: var(--header-height-mob);
}


/* ------------------------------------------------------------
   Logo
   ------------------------------------------------------------ */

.site-header__logo {
	display: block;
	flex-shrink: 0;
	line-height: 0;
}

.site-header__mark {
	width: auto;
	height: 44px;
	transition: transform var(--duration) var(--ease);
}

.site-header__logo:hover .site-header__mark {
	transform: scale(1.04);
}


/* ------------------------------------------------------------
   Bouton burger
   ------------------------------------------------------------ */

.site-header__toggle {
	position: relative;
	z-index: calc(var(--z-overlay) + 1);
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: var(--radius-sm);
	cursor: pointer;
}

/* Les trois barres : une en élément, deux en pseudo-éléments. */
.site-header__burger,
.site-header__burger::before,
.site-header__burger::after {
	display: block;
	width: 26px;
	height: 2px;
	background-color: var(--e4y-green);
	border-radius: var(--radius-full);
	transition:
		transform var(--duration) var(--ease),
		opacity calc(var(--duration) / 2) var(--ease);
}

.site-header__burger::before,
.site-header__burger::after {
	content: '';
	position: absolute;
	left: 50%;
	margin-left: -13px;
}

.site-header__burger::before { transform: translateY(-8px); }
.site-header__burger::after  { transform: translateY(8px); }

/* État ouvert : les barres forment une croix. */
[aria-expanded='true'] .site-header__burger {
	background-color: transparent;
}

[aria-expanded='true'] .site-header__burger::before {
	transform: translateY(0) rotate(45deg);
}

[aria-expanded='true'] .site-header__burger::after {
	transform: translateY(0) rotate(-45deg);
}


/* ------------------------------------------------------------
   Mobile — le header flotte sur le hero

   La maquette 01_MOB ne pose pas de bandeau : le logo et le burger sont
   posés sur la photo, qui démarre au bord haut de l'écran. Le header sort
   donc du flux ; le fond crème ne revient qu'une fois la page défilée,
   sans quoi le logo se retrouverait sur du texte.
   ------------------------------------------------------------ */

@media (max-width: 767px) {

	.site-header {
		position: fixed;
		inset-inline: 0;
		background-color: transparent;
	}

	.site-header.is-scrolled {
		background-color: var(--e4y-cream);
	}

	/* L'en-tête ne flotte que s'il a un bandeau sur quoi flotter. Sans lui —
	   page introuvable, résultats de recherche, listes d'articles — il se
	   posait, transparent, par-dessus le premier titre de la page. Il redevient
	   alors une barre dans le flux. */
	body:not(:has(.page-hero)) .site-header {
		position: static;
		background-color: var(--e4y-cream);
	}

	body:not(:has(.page-hero)) .site-header__mark {
		height: 72px;
	}

	.site-header__inner {
		min-height: 0;
		padding-block: var(--space-5);   /* Figma : logo à 44 px du bord */
	}

	.site-header__mark {
		height: 104px;                   /* Figma : logo de 94 × 104 */
		transition:
			height var(--duration) var(--ease),
			transform var(--duration) var(--ease);
	}

	/* Une fois défilé, le bandeau reprend une hauteur de barre ordinaire. */
	.site-header.is-scrolled .site-header__inner {
		padding-block: var(--space-2);
	}

	.site-header.is-scrolled .site-header__mark {
		height: 48px;
	}

}


/* ------------------------------------------------------------
   Navigation, version mobile : panneau latéral
   ------------------------------------------------------------ */

.site-nav {
	position: fixed;
	inset: 0 0 0 auto;
	z-index: var(--z-overlay);
	width: min(320px, 85vw);
	padding: calc(var(--header-height-mob) + var(--space-7)) var(--space-6) var(--space-6);
	overflow-y: auto;
	background-color: var(--e4y-cream);
	transform: translateX(100%);
	visibility: hidden;
	transition:
		transform var(--duration) var(--ease),
		visibility 0s linear var(--duration);
}

.site-nav.is-open {
	transform: translateX(0);
	visibility: visible;
	transition:
		transform var(--duration) var(--ease),
		visibility 0s;
}

.site-nav__backdrop {
	position: fixed;
	inset: 0;
	z-index: calc(var(--z-overlay) - 1);
	background-color: var(--e4y-overlay-dark);
	opacity: 0;
	transition: opacity var(--duration) var(--ease);
}

.site-nav__backdrop.is-visible {
	opacity: 1;
}

/* Empêche le défilement de la page quand le menu est ouvert. */
body.nav-open {
	overflow: hidden;
}


/* ------------------------------------------------------------
   Liste et liens
   ------------------------------------------------------------ */

.site-nav__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav__list a {
	display: block;
	padding-block: var(--space-3);
	/* Eigerdals : vérifié sur le node 38:617, où « E4Y Hub » est composé en
	   Eigerdals sauf le E, le Y et le H, chacun rabattu sur HomepageBaukasten
	   faute de glyphe. Les fichiers complets ayant été livrés, la navigation
	   suit --font-display sans rustine. */
	font-family: var(--font-display);
	font-size: var(--fs-lead);
	font-weight: var(--fw-semibold);
	color: var(--e4y-green);
	text-decoration: none;
	transition: color var(--duration) var(--ease);
}

.site-nav__list a:hover,
.site-nav__list a:focus-visible {
	color: var(--color-accent);
}

/* Page courante. WordPress ajoute ces classes automatiquement. */
.site-nav__list .current-menu-item > a,
.site-nav__list .current_page_item > a,
.site-nav__list .current-menu-parent > a,
.site-nav__list .current-page-ancestor > a {
	color: var(--e4y-amber);
}


/* ------------------------------------------------------------
   Sous-menus
   ------------------------------------------------------------ */

.site-nav__list .sub-menu {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	margin: 0;
	padding: 0 0 var(--space-2) var(--space-4);
	list-style: none;
}

.site-nav__list .sub-menu a {
	padding-block: var(--space-2);
	font-size: var(--fs-body);
	font-weight: var(--fw-regular);
}


/* ============================================================
   Desktop
   ============================================================ */

@media (min-width: 1200px) {

	.site-header__inner {
		min-height: var(--header-height);
		transition: min-height var(--duration) var(--ease);
	}

	.site-header__mark {
		height: 108px;   /* Figma : logo de 105 × 108 px */
		transition: height var(--duration) var(--ease);
	}

	/* Le header se compacte au défilement : la maquette montre l'état haut de
	   page, mais collé en permanence à 148 px il amputerait trop le viewport —
	   notamment la FAQ, calée sur une hauteur d'écran. */
	.site-header.is-scrolled .site-header__inner {
		min-height: var(--header-height-scrolled);
	}

	.site-header.is-scrolled .site-header__mark {
		height: 60px;
	}

	.site-header__toggle,
	.site-nav__backdrop {
		display: none;
	}

	.site-nav {
		position: static;
		width: auto;
		padding: 0;
		overflow: visible;
		background: none;
		transform: none;
		visibility: visible;
		transition: none;
	}

	.site-nav__list {
		flex-direction: row;
		align-items: center;
		gap: clamp(var(--space-4), 2vw, var(--space-6));
	}

	.site-nav__list > li {
		position: relative;
	}

	.site-nav__list > li > a {
		padding-block: var(--space-2);
		font-size: var(--fs-h3);   /* Figma : 24 px */
	}

	/* Soulignement animé sur la page courante et au survol. */
	.site-nav__list > li > a::after {
		content: '';
		display: block;
		height: 2px;
		margin-top: 4px;
		background-color: currentColor;
		border-radius: var(--radius-full);
		transform: scaleX(0);
		transform-origin: left;
		transition: transform var(--duration) var(--ease);
	}

	.site-nav__list > li > a:hover::after,
	.site-nav__list > li > a:focus-visible::after,
	.site-nav__list > .current-menu-item > a::after,
	.site-nav__list > .current_page_item > a::after {
		transform: scaleX(1);
	}

	/* Sous-menu déroulant, prévu pour les pages pays. */
	.site-nav__list .sub-menu {
		position: absolute;
		top: 100%;
		left: 50%;
		z-index: var(--z-header);
		min-width: 220px;
		padding: var(--space-3);
		background-color: var(--e4y-cream);
		border-radius: var(--radius-lg);
		box-shadow: var(--shadow-md);
		opacity: 0;
		visibility: hidden;
		transform: translate(-50%, var(--space-2));
		transition:
			opacity var(--duration) var(--ease),
			transform var(--duration) var(--ease),
			visibility 0s linear var(--duration);
	}

	.site-nav__list > li:hover .sub-menu,
	.site-nav__list > li:focus-within .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: translate(-50%, 0);
		transition:
			opacity var(--duration) var(--ease),
			transform var(--duration) var(--ease),
			visibility 0s;
	}
}

/* Compensation de la barre d'administration WordPress. */
body.admin-bar .site-header { top: 32px; }
body.admin-bar .site-nav    { top: 32px; }

@media (max-width: 782px) {
	body.admin-bar .site-header,
	body.admin-bar .site-nav { top: 46px; }
}


/* ============================================================
   Panneau mobile — présentation

   Le panneau existe jusqu'à 1200 px ; au-delà, la navigation redevient une
   rangée horizontale et rien de ce qui suit ne s'applique.
   ============================================================ */

@media (max-width: 1199px) {

	.site-nav {
		width: min(360px, 88vw);
		box-shadow: var(--shadow-lg);
	}

	/* Les entrées respirent : un filet les sépare, et la page courante porte
	   un repère ambre plutôt qu'un simple changement de couleur — sur une
	   liste courte, la couleur seule se remarque mal. */
	.site-nav__list {
		gap: 0;
	}

	.site-nav__list > li + li {
		border-block-start: 1px solid var(--color-border);
	}

	.site-nav__list > li > a {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-4);
		padding-block: var(--space-4);
		padding-inline-start: var(--space-4);
		font-size: var(--fs-h3);
	}

	/* Le repère de la page courante, et la trace que laisse le survol. */
	.site-nav__list > li > a::before {
		content: '';
		position: absolute;
		inset-block: var(--space-2);
		inset-inline-start: 0;
		width: 3px;
		background-color: var(--e4y-amber);
		border-radius: var(--radius-full);
		transform: scaleY(0);
		transform-origin: center;
		transition: transform var(--duration) var(--ease);
	}

	.site-nav__list > li > a:hover::before,
	.site-nav__list > li > a:focus-visible::before,
	.site-nav__list .current-menu-item > a::before,
	.site-nav__list .current_page_item > a::before,
	.site-nav__list .current-menu-parent > a::before,
	.site-nav__list .current-page-ancestor > a::before {
		transform: scaleY(1);
	}

	/* Chevron discret, qui avance au survol. */
	.site-nav__list > li > a::after {
		content: '';
		flex: none;
		width: 8px;
		height: 8px;
		border-block-start: 2px solid currentColor;
		border-inline-end: 2px solid currentColor;
		opacity: 0.45;
		transform: rotate(45deg);
		transition:
			transform var(--duration) var(--ease),
			opacity var(--duration) var(--ease);
	}

	.site-nav__list > li > a:hover::after,
	.site-nav__list > li > a:focus-visible::after {
		opacity: 1;
		transform: rotate(45deg) translate(2px, -2px);
	}

	/* Entrée en cascade : les entrées suivent le panneau qui glisse, l'une
	   après l'autre. Le décalage est celui des révélations du thème. */
	.site-nav__list > li {
		opacity: 0;
		transform: translateX(var(--space-5));
		transition:
			opacity var(--duration) var(--ease-sortie),
			transform var(--duration) var(--ease-sortie);
	}

	.site-nav.is-open .site-nav__list > li {
		opacity: 1;
		transform: none;
	}

	.site-nav.is-open .site-nav__list > li:nth-child(1) { transition-delay: calc(1 * var(--anim-decalage)); }
	.site-nav.is-open .site-nav__list > li:nth-child(2) { transition-delay: calc(2 * var(--anim-decalage)); }
	.site-nav.is-open .site-nav__list > li:nth-child(3) { transition-delay: calc(3 * var(--anim-decalage)); }
	.site-nav.is-open .site-nav__list > li:nth-child(4) { transition-delay: calc(4 * var(--anim-decalage)); }
	.site-nav.is-open .site-nav__list > li:nth-child(5) { transition-delay: calc(5 * var(--anim-decalage)); }
	.site-nav.is-open .site-nav__list > li:nth-child(6) { transition-delay: calc(6 * var(--anim-decalage)); }

}


/* La cascade est un agrément : elle disparaît avec les autres animations. */
@media (max-width: 1199px) and (prefers-reduced-motion: reduce) {

	.site-nav__list > li {
		opacity: 1;
		transform: none;
		transition: none;
	}

}


/* ------------------------------------------------------------
   Entrée de menu sans destination

   « Nos pays » n'ouvre aucune page : il ne fait que rassembler ses enfants.
   Le chevron des autres entrées annonce un départ, il n'a donc rien à faire
   ici — et le curseur cesse d'annoncer un lien.
   ------------------------------------------------------------ */

.site-nav__list > li > a[href="#"]::after {
	content: none;
}

.site-nav__list > li > a[href="#"] {
	cursor: default;
}