/*
 * Header ESM — Phase 2 (stabilisation)
 * Valeurs reprises des mesures réelles du header actuel (Phase 1), pas inventées :
 * hauteur de ligne 100px, logo 90x60, CTA vert #5F6446, liens marron #8B5E3C,
 * sous-menus fond #F8F4EE, police titres Playfair Display / sous-menus Cormorant Upright.
 *
 * Un seul breakpoint (1024px) au lieu des deux traitements différents (tablette/mobile)
 * de l'ancien header : la version tablette n'était qu'un correctif incomplet côté
 * historique (voir rapport Phase 1), pas une intention de design distincte à reproduire.
 *
 * z-index : 500 pour le header (identique à l'existant, .ehf-header #masthead),
 * 499 pour le panneau de sous-menu mobile (sous le header, au-dessus du contenu).
 */

:root {
	--esm-color-cream: #F5EEE6;
	--esm-color-espresso: #5B3A29;
	--esm-color-brown-light: #8B5E3C;
	--esm-color-green: #5F6446;
	--esm-color-submenu-bg: #F8F4EE;
	--esm-color-submenu-text: #5E4634;
	--esm-color-white: #FFFFFF;

	--esm-font-heading: "Playfair Display", serif;
	--esm-font-ui: "Poppins", sans-serif;
	/* Phase 5 : Cormorant Upright (police d'origine, mesurée en Phase 1/2) remplacée
	   par Playfair Display — plus proche visuellement (serif élégant) que Poppins,
	   et cohérent avec le niveau supérieur du menu qui l'utilise déjà. Cormorant
	   Upright n'était chargé que par l'ancien header (désactivé en Phase 3a) ; ce
	   changement termine sa suppression complète du site (3 polices restantes). */
	--esm-font-submenu: "Playfair Display", serif;

	--esm-header-height: 116px;
	--esm-header-total-height: 116px;
	--esm-header-z: 500;
	--esm-submenu-z: 499;

	--esm-transition-fast: 160ms;
}

/* ---------- Header shell ---------- */

/* position: fixed plutôt que sticky : le CSS existant du site (overflow-x:hidden
   sur html/body, hérité de l'ancien header, encore actif tant que le nettoyage
   Phase 3-4 n'a pas eu lieu) empêche position:sticky de fonctionner. Le padding-top
   sur #page ci-dessous compense le retrait du header du flux normal. */
.esm-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: var(--esm-header-total-height);
	z-index: var(--esm-header-z);
	background-color: var(--esm-color-cream);
	width: 100%;
	box-sizing: border-box;
}

/* WordPress ajoute une barre d'administration fixe (32px, 46px en mobile) pour les
   utilisateurs connectés : le header doit se décaler d'autant pour ne pas passer dessous. */
body.admin-bar .esm-header {
	top: 32px;
}

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

#page {
	padding-top: var(--esm-header-total-height);
}

/* Empêche le header fixe de masquer la cible de tout saut d'ancre (lien #id vers
 * un titre, accordéon avec lien profond, scrollIntoView() JS présent ou futur).
 * Posé une seule fois sur l'élément racine (conteneur de scroll) plutôt que sur
 * des cibles listées au cas par cas : s'applique automatiquement à toute ancre,
 * y compris celles qui n'existent pas encore. scroll-padding-top est respecté
 * aussi bien par la navigation par ancre native que par scrollIntoView() (même
 * algorithme de scroll, spec CSSOM View).
 */
html {
	scroll-padding-top: var(--esm-header-total-height);
}

html:has(body.admin-bar) {
	scroll-padding-top: calc(var(--esm-header-total-height) + 32px);
}

@media (max-width: 782px) {
	html:has(body.admin-bar) {
		scroll-padding-top: calc(var(--esm-header-total-height) + 46px);
	}
}

/* Neutralise l'espace blanc entre le header (fixed) et le hero de chaque page :
 * la première section Elementor de page-content a systématiquement son propre
 * margin-top/padding-top (ex. 80px + 50px), pensé à l'origine pour compenser
 * l'ancien header. Sélecteur structurel (":first-child"), jamais un ID Elementor
 * lié à une page en particulier : s'applique donc identiquement à toutes les pages.
 */
.page-content > .elementor > .elementor-element:first-child {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

/* Respiration éditoriale sous le header fixe pour les articles de blog et pages text-first */
body.single-post:not(.postid-10406) .page-content > .elementor > .elementor-element:first-child,
body.page-id-480 .page-content > .elementor > .elementor-element:first-child {
	padding-top: 48px !important;
}

@media (max-width: 768px) {
	body.single-post:not(.postid-10406) .page-content > .elementor > .elementor-element:first-child,
	body.page-id-480 .page-content > .elementor > .elementor-element:first-child {
		padding-top: 32px !important;
	}
}

.esm-header__inner {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 8px;
	width: 100%;
	height: var(--esm-header-height);
	box-sizing: border-box;
	padding: 10px 24px;
}

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

.esm-header__brand {
	flex: 0 0 auto;
	display: block;
	line-height: 0;
}

.esm-header__logo {
	display: block;
	width: 108px;
	height: 72px;
}

/* ---------- Navigation desktop (> 1024px) ---------- */

.esm-nav {
	flex: 1 1 auto;
	min-width: 0;
}

.esm-menu {
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}

.esm-menu-item {
	position: relative;
	display: flex;
	align-items: center;
}

.esm-menu-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 10px;
	font-family: var(--esm-font-heading);
	font-size: 18px;
	font-weight: 500;
	color: var(--esm-color-brown-light);
	text-decoration: none;
	white-space: nowrap;
}

.esm-menu-link:hover,
.esm-menu-link:focus-visible {
	color: var(--esm-color-green);
}

.esm-menu-item--current > .esm-menu-link,
.esm-menu-item--has-children.esm-submenu-open > .esm-menu-link,
.esm-menu-item--has-children:hover > .esm-menu-link {
	text-decoration: underline;
	text-underline-offset: 8px;
	text-decoration-thickness: 2px;
	text-decoration-color: var(--esm-color-brown-light);
}

.esm-menu-link:focus-visible,
.esm-submenu-toggle:focus-visible {
	outline: 2px solid var(--esm-color-green);
	outline-offset: 2px;
	border-radius: 2px;
}

/* !important nécessaire ici : hello-elementor/assets/css/reset.css impose un fond,
   une bordure et une couleur par défaut à tout [type="button"]/button du site. */
.esm-submenu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	margin: 0;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	cursor: pointer;
	color: var(--esm-color-brown-light) !important;
}

.esm-submenu-toggle-icon {
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	transition: transform var(--esm-transition-fast) ease;
}

.esm-submenu-toggle[aria-expanded="true"] .esm-submenu-toggle-icon {
	transform: rotate(-135deg) translateY(1px);
}

/* Sous-menus : ouverts au survol ou au clic (desktop) */
.esm-submenu {
	list-style: none;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	background-color: var(--esm-color-submenu-bg);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 0 57px -21px rgba(0, 0, 0, 0.23);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity var(--esm-transition-fast) ease, transform var(--esm-transition-fast) ease, visibility var(--esm-transition-fast);
	z-index: var(--esm-submenu-z);
}

.esm-menu-item--has-children:hover > .esm-submenu,
.esm-menu-item--has-children.esm-submenu-open > .esm-submenu,
.esm-submenu:focus-within {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.esm-submenu li:not(:first-child) {
	border-top: 1px solid rgba(91, 58, 41, 0.12);
}

.esm-submenu .esm-menu-link {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 12px 20px;
	font-family: var(--esm-font-submenu);
	font-size: 17px;
	font-weight: 500;
	color: var(--esm-color-submenu-text);
	white-space: normal;
	text-decoration: none !important;
	transition: background-color var(--esm-transition-fast) ease, color var(--esm-transition-fast) ease;
}

.esm-submenu .esm-menu-link:hover,
.esm-submenu .esm-menu-link:focus-visible {
	background-color: var(--esm-color-green);
	color: var(--esm-color-white);
}

/* ---------- CTA ---------- */

/* !important sur color/background : une règle globale plus spécifique (couleur de
   texte par défaut du site) l'emporterait sinon sur ce lien-bouton. */
.esm-header__cta {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background-color: var(--esm-color-green) !important;
	color: var(--esm-color-white) !important;
	font-family: var(--esm-font-ui);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-decoration: none;
	text-transform: uppercase;
	border-radius: 24px;
	padding: 10px 20px;
	white-space: nowrap;
	transition: background-color var(--esm-transition-fast) ease;
}

.esm-header__cta:hover,
.esm-header__cta:focus-visible {
	background-color: var(--esm-color-espresso) !important;
}

.esm-header__cta-icon {
	flex: 0 0 auto;
}

.esm-header__cta-text--short {
	display: none;
}

/* ---------- Toggle hamburger (masqué > 1024px) ---------- */

.esm-menu-toggle {
	display: none;
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	padding: 0;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	cursor: pointer;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
}

.esm-menu-toggle:focus-visible {
	outline: 2px solid var(--esm-color-green);
	outline-offset: 2px;
}

.esm-menu-toggle__bar {
	display: block;
	width: 22px;
	height: 2px;
	background-color: #494C4F;
	transition: transform var(--esm-transition-fast) ease, opacity var(--esm-transition-fast) ease;
}

/* Fermé : hamburger (3 barres). Ouvert : chevron vers le haut, cohérent avec
   les chevrons (vers le bas) qui ouvrent les sous-menus. */
.esm-menu-toggle__chevron {
	display: none;
	width: 10px;
	height: 10px;
	border-right: 2px solid #494C4F;
	border-bottom: 2px solid #494C4F;
	transform: rotate(-135deg);
}

.esm-menu-toggle[aria-expanded="true"] .esm-menu-toggle__bar {
	display: none;
}

.esm-menu-toggle[aria-expanded="true"] .esm-menu-toggle__chevron {
	display: block;
}

/* ---------- 1025–1450px : resserre le menu pour tenir sur une ligne ----------
   Entre le seuil hamburger (1024px) et 1450px, les 9 items du menu + le CTA
   complet ne tenaient pas sur une seule ligne (le dernier item, souvent
   "Contact", passait à la ligne). Corrigé sans toucher à la taille du texte :
   padding horizontal des liens légèrement réduit + CTA en version courte
   (même texte "Itinéraire" déjà utilisé en mobile). Au-delà de 1450px, il y a
   assez de place pour le CTA complet et le padding d'origine.
   max-width (pas de min-width) volontairement : un min-width séparé du
   max-width:1024px du bloc mobile ci-dessous créait une zone morte entre les
   deux à cause des largeurs fractionnaires (zoom navigateur ≠ 100%), qui a fait
   disparaître le CTA. Le bloc ≤1024px suivant, plus spécifique et placé après,
   prend la main normalement dans son propre intervalle. */
@media (max-width: 1450px) {
	.esm-menu-link {
		padding-left: 8px;
		padding-right: 8px;
	}

	.esm-header__cta-text--full {
		display: none;
	}

	.esm-header__cta-text--short {
		display: inline;
	}
}

/* ---------- ≤ 1024px : menu plein écran ---------- */

@media (max-width: 1024px) {
	.esm-header__cta-text--full {
		display: none;
	}
	.esm-header__cta-text--short {
		display: inline;
	}

	.esm-menu-toggle {
		display: inline-flex;
	}

	.esm-nav {
		position: fixed;
		top: var(--esm-header-height);
		left: 0;
		right: 0;
		bottom: 0;
		background-color: var(--esm-color-cream);
		overflow-y: auto;
		z-index: var(--esm-header-z);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition: opacity var(--esm-transition-fast) ease, transform var(--esm-transition-fast) ease, visibility var(--esm-transition-fast);
	}

	.esm-nav.esm-nav--open {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.esm-menu {
		flex-direction: column;
		align-items: stretch;
		padding: 8px 0;
	}

	/* .esm-menu-item reste display:flex (règle desktop) pour aligner lien+bouton
	   sur une ligne ; il faut autoriser le sous-menu à passer à la ligne suivante
	   au lieu de s'aligner à côté en tant que 3e élément flex. */
	.esm-menu-item {
		flex-wrap: wrap;
	}

	.esm-submenu {
		flex-basis: 100%;
		width: 100%;
	}

	.esm-menu-link {
		flex: 1 1 auto;
		width: auto;
		box-sizing: border-box;
		padding: 14px 24px;
		font-size: 16px;
		border-bottom: 1px solid rgba(91, 58, 41, 0.1);
	}

	/* Le bouton toggle du sous-menu doit rester sur la même ligne que le lien
	   (voir .esm-menu-item flex-wrap plus haut : seul .esm-submenu doit passer
	   à la ligne, pas ce bouton).
	   Zone cliquable élargie à 44x44px (repère d'accessibilité usuel, la taille
	   d'origine de 24x24px était trop petite au toucher) + marge à droite pour
	   l'éloigner du bord réel de l'écran, où les gestes système (retour iOS/
	   Android) rendent le tap peu fiable. L'icône elle-même (8px) reste centrée,
	   inchangée visuellement. */
	.esm-menu-item--has-children .esm-submenu-toggle {
		flex: 0 0 auto;
		width: 44px;
		height: 44px;
		margin-right: 8px;
		border-bottom: 1px solid rgba(91, 58, 41, 0.1);
	}

	/* Sous-menus mobile : accordéon en flux normal, pas de position absolue */
	.esm-submenu {
		position: static;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		max-height: 0;
		overflow: hidden;
		transition: max-height var(--esm-transition-fast) ease;
		background-color: var(--esm-color-submenu-bg);
	}

	.esm-menu-item--has-children.esm-submenu-open > .esm-submenu {
		max-height: 1000px;
	}

	.esm-submenu .esm-menu-link {
		padding: 14px 24px 14px 40px;
		font-size: 15px;
		border-bottom: 1px solid rgba(91, 58, 41, 0.08);
	}
}

/* ---------- Très petits écrans (≤340px) : évite le débordement horizontal ---------- */

@media (max-width: 340px) {
	.esm-header__inner {
		padding: 10px 12px;
		gap: 4px;
	}

	.esm-header__logo {
		width: 84px;
		height: 56px;
	}

	.esm-header__cta {
		padding: 8px 12px;
		font-size: 11px;
	}
}

/* ---------- Accessibilité ---------- */

@media (max-width: 1024px) {
	body.esm-nav-open-lock {
		overflow: hidden;
	}
}

@media (prefers-reduced-motion: reduce) {
	.esm-menu-toggle__bar,
	.esm-submenu,
	.esm-submenu-toggle-icon,
	.esm-nav {
		transition: none !important;
	}
}