/* Header — Commune de La Petite-Raon */

/* Le header est maintenant flottant (position: fixed) et se superpose au
   hero : on ne réserve donc plus d'espace en haut de #page-container (le
   commentaire d'origine expliquait déjà pourquoi ce padding doit rester à
   0 : annuler le padding-top que Divi ajoute pour sa propre "Fixed
   Navigation Bar", inutilisée ici). */
#page-container {
	padding-top: 0 !important;
}

/* ==========================================================================
   Header flottant "capsule" (.header-capsule-mairie)
   .site-header : bandeau invisible, en position fixed, qui sert uniquement
                  de zone d'ancrage en haut de l'écran.
   .site-header__inner : la capsule visible à proprement parler (fond blanc
                  translucide, coins très arrondis, ombre discrète).
   Séparer les deux permet à .site-header de laisser passer les clics
   (pointer-events: none) partout sauf sur la capsule elle-même, pour ne
   jamais bloquer le contenu du hero affiché derrière/dessous.
   ========================================================================== */

.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
	padding: 20px 16px 0;
	background: transparent;
	border-bottom: none;
	pointer-events: none;
	transition: transform 0.3s ease;
}

/* Ajoutée/retirée par header.js au scroll (voir plus bas dans le fichier).
   +40px sous -100% pour être sûr d'emporter l'ombre portée de la capsule,
   qui déborde de sa propre boîte et resterait sinon visible à l'écran. */
.site-header--hidden {
	transform: translateY(calc(-100% - 40px));
}

.site-header__inner {
	pointer-events: auto;
	position: relative;
	width: 98%;
	max-width: 1800px;
	min-height: 72px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 8px 40px;
	background: rgba(255, 255, 255, 0.96);
	border-radius: 50px;
	box-shadow: 0 8px 30px rgba(28, 48, 62, 0.12);
}

/* Compensation pour le texte du hero de la page d'accueil (.hero-text-section,
   une ligne Divi en position absolute/top:0 qui contenait le texte "Bienvenue"
   avec 72px de padding-top, calé sur l'ancien header non flottant). Avec le
   nouveau header fixed, il faut repousser ce texte sous la capsule pour
   qu'elle ne le recouvre plus plus — l'image de fond du hero, elle, continue
   de s'étendre derrière la capsule (c'est l'effet flottant recherché).
   Valeur = marge du haut + hauteur de la capsule + une marge de respiration. */
/* Répète la classe pour dépasser strictement la spécificité (et pas
   seulement l'égaler) du padding inline injecté par Divi sur cette ligne
   (réglage du module, lui aussi en !important) : à spécificité égale,
   c'est l'ordre d'apparition dans le HTML qui déciderait, et le <style>
   de Divi est injecté après ce fichier. */
.hero-text-section.hero-text-section.hero-text-section {
	padding-top: 130px !important;
}

/* Logo + titre */
.site-header__brand {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}

.site-header__titles-link {
	display: flex;
	text-decoration: none;
	color: inherit;
}

.site-header__logo,
.site-header__brand img,
.custom-logo {
	height: 40px;
	width: auto;
}

.site-header__titles {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
	padding-top: 3px;
}

.site-header__name {
	font-size: 24px; 
	font-weight: 700;
	color: var(--color-titre);
	margin-top: -10px; /* remonte le titre pour mieux l'aligner avec le logo */
}

.site-header__tagline {
	font-size: 14px;
	color: var(--color-texte);
}

/* Menu — centré sur la capsule elle-même (position absolute + translateX),
   et non plus sur l'espace restant entre logo et recherche : sinon
   l'ouverture du champ de recherche (qui agrandit son propre bloc) réduisait
   cet espace et faisait glisser tout le menu vers la gauche. Ici il reste
   fixe au centre quels que soient les changements de largeur des voisins. */
.site-header__nav {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	justify-content: center;
}

.site-header__menu {
	display: flex;
	align-items: center;
	gap: clamp(16px, calc(-2.2857px + 1.7857vw), 32px) /* 16->32px */;
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-header__menu a {
	position: relative;
	display: inline-block;
	padding-bottom: 4px;
	font-size: clamp(0.9375rem, calc(0.8958rem + 0.2083vw), 1.0625rem) /* 15->17px */;
	font-weight: 600;
	color: var(--color-titre);
	text-decoration: none;
	transition: color 0.25s ease;
}

.site-header__menu a::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 3px;
	background: var(--color-principale);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.25s ease;
}

.site-header__menu a:hover,
.site-header__menu .current-menu-item > a,
.site-header__menu .current_page_item > a,
.site-header__menu .current-menu-parent > a,
.site-header__menu .current-menu-ancestor > a,
.site-header__menu .current_page_parent > a,
.site-header__menu .current_page_ancestor > a {
	color: var(--color-principale);
}

.site-header__menu a:hover::before,
.site-header__menu .current-menu-item > a::before,
.site-header__menu .current_page_item > a::before,
.site-header__menu .current-menu-parent > a::before,
.site-header__menu .current-menu-ancestor > a::before,
.site-header__menu .current_page_parent > a::before,
.site-header__menu .current_page_ancestor > a::before {
	transform: scaleX(1);
}

/* Sous-menus (niveau 2) — menu déroulant, affiché au survol/focus du parent.
   La flèche est en ::after (le soulignement ci-dessus utilise ::before) :
   un élément ne peut avoir qu'un seul ::after, les deux entraient en
   conflit et le soulignement disparaissait sur les liens avec sous-menu. */
.site-header__menu li.menu-item-has-children {
	position: relative;
}

.site-header__menu li.menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-left: 6px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	vertical-align: middle;
}

.site-header__menu ul.sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 10;
	min-width: 220px;
	list-style: none;
	margin: 0;
	padding: 8px 0;
	background: var(--color-bg-principal);
	border: 1px solid var(--color-contraste);
	border-radius: 16px;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}

.site-header__menu li.menu-item-has-children:hover > ul.sub-menu,
.site-header__menu li.menu-item-has-children:focus-within > ul.sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0s;
}

.site-header__menu ul.sub-menu a {
	display: block;
	padding: 8px 16px;
	border-left: 3px solid transparent;
	font-size: var(--fs-sm);
	font-weight: 500;
	white-space: nowrap;
}

.site-header__menu ul.sub-menu a::before {
	display: none;
}

/* Page actuellement affichée, dans le sous-menu */
.site-header__menu ul.sub-menu .current-menu-item > a,
.site-header__menu ul.sub-menu .current_page_item > a {
	background: var(--color-contraste);
	border-left-color: var(--color-principale);
	color: var(--color-titre);
	font-weight: 700;
}

.site-header__menu ul.sub-menu a:hover {
	background: var(--color-contraste);
	color: var(--color-principale);
}

/* Bouton "Nous contacter" — pour l'activer, ajouter la classe CSS
   "menu-btn-contact" à l'item de menu concerné depuis Apparence > Menus
   (Options d'écran > cocher "Classes CSS", puis champ "Classes CSS
   (facultatif)" de l'item). Sans cette classe, le lien reste un lien de
   menu normal : rien à faire côté code pour l'activer/désactiver. */
.site-header__menu li.menu-btn-contact > a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 24px;
	background: var(--color-principale);
	color: var(--color-titre-claire);
	border-radius: 999px;
	transition: filter 0.25s ease;
}

.site-header__menu li.menu-btn-contact > a::before {
	display: none;
}

.site-header__menu li.menu-btn-contact > a:hover,
.site-header__menu li.menu-btn-contact > a:focus-visible {
	color: var(--color-titre-claire);
	filter: brightness(0.85);
}

/* Recherche — intégrée dans la capsule : loupe + champ + bouton forment
   UN seul bloc visuel (fond gris clair commun, arrondi complet), plutôt
   que des éléments séparés par un espace. Le champ s'ouvre EN LIGNE, à
   gauche de la loupe (qui reste fixe à droite grâce à "order"), en
   s'élargissant sur place plutôt qu'en encadré flottant détaché sous la
   barre. */
.site-header__search {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
	margin-left: auto;
	background: var(--color-contraste);
	border-radius: 999px;
	padding: 4px;
}

.site-header__search-toggle {
	order: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: none;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	color: var(--color-titre);
	flex-shrink: 0;
}

.site-header__search-toggle:focus-visible {
	outline: none;
}

.site-header__burger:focus-visible {
	outline: none;
}

/* header.js met le focus sur le champ dès l'ouverture (pas seulement à la
   tabulation clavier) : le contour de focus global s'affichait donc à
   chaque ouverture, et coupé par l'overflow:hidden du conteneur (nécessaire
   à l'animation d'ouverture), il ne restait visible que par fragments
   (soulignement, barre verticale). */
.site-header__search-form .search-field:focus-visible,
.site-header__search-form .search-submit:focus-visible {
	outline: none;
}

.site-header__search-form {
	order: 1;
	display: flex;
	align-items: center;
	gap: 4px;
	width: 0;
	overflow: hidden;
	opacity: 0;
	transition: width 0.25s ease, opacity 0.2s ease;
}

.site-header__search-form.is-open {
	width: 220px;
	opacity: 1;
}

.site-header__search-form .search-field {
	width: 100%;
	min-width: 0;
	background: transparent;
	border: none;
	padding: 6px 10px;
	font-size: 14px;
	color: var(--color-titre);
}

.site-header__search-form .search-submit {
	background: var(--color-principale);
	color: var(--color-titre-claire);
	border: none;
	border-radius: 999px;
	padding: 6px 14px;
	font-size: 14px;
	cursor: pointer;
}

/* Bouton burger — masqué par défaut, affiché uniquement sous 1200px
   (voir media query plus bas). Les 3 barres se transforment en croix
   via l'attribut aria-expanded, déjà mis à jour par le JS. */
.site-header__burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	padding: 8px;
	background: none;
	border: none;
	cursor: pointer;
	flex-shrink: 0;
}

.site-header__burger-line {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--color-titre);
	border-radius: 1px;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.site-header__burger[aria-expanded="true"] .site-header__burger-line:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.site-header__burger[aria-expanded="true"] .site-header__burger-line:nth-child(2) {
	opacity: 0;
}

.site-header__burger[aria-expanded="true"] .site-header__burger-line:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* Sous 1200px : le menu horizontal est remplacé par un volet déroulant
   ouvert/fermé par le bouton burger (classe .is-open ajoutée par le JS),
   et la capsule se resserre : moins de largeur, moins de padding. */
@media (max-width: 1150px) {
	.site-header {
		padding: 18px 12px 0;
	}

	.site-header__inner {
		width: 95%;
		min-height: 76px;
		padding: 8px 24px;
		gap: 16px;
	}

	.hero-text-section.hero-text-section.hero-text-section {
		padding-top: 114px !important;
	}

	.site-header__burger {
		display: flex;
	}

	.site-header__nav {
		display: flex;
		flex: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		margin-top: 12px;
		background: rgba(255, 255, 255, 0.98);
		border-radius: 24px;
		box-shadow: 0 8px 30px rgba(28, 48, 62, 0.12);
		padding: 20px 24px;
		max-height: calc(100vh - 140px);
		overflow-y: auto;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
	}

	.site-header__nav.is-open {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0s;
	}

	.site-header__menu {
		flex-direction: column;
		align-items: flex-start;
		width: 100%;
		gap: 20px;
	}

	/* Chaque lien occupe toute la largeur du volet et garde une hauteur
	   confortable au doigt (>= 44px, WCAG 2.5.5 / RGAA 12.9). */
	.site-header__menu > li {
		width: 100%;
	}

	.site-header__menu > li > a {
		display: flex;
		align-items: center;
		min-height: 44px;
	}

	/* Pas de survol au tactile : les sous-menus restent toujours dépliés,
	   indentés sous leur parent, au lieu d'un menu flottant caché. */
	.site-header__menu li.menu-item-has-children > a::before {
		display: none;
	}

	.site-header__menu ul.sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: none;
		min-width: 0;
		background: transparent;
		border: none;
		box-shadow: none;
		padding: 4px 0 0 16px;
		margin-top: 4px;
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	.site-header__menu ul.sub-menu a {
		display: flex;
		align-items: center;
		min-height: 44px;
		padding: 0;
		white-space: normal;
		color: var(--color-texte);
	}

	.site-header__menu li.menu-btn-contact > a {
		width: 100%;
	}
}

/* Téléphone (600px et moins) : la capsule se resserre encore, dans les
   mêmes proportions que le reste du menu burger activé ci-dessus. */
@media (max-width: 900px) {
	.site-header {
		padding: 12px 12px 0;
	}

	.site-header__inner {
		width: 96%;
		min-height: 64px;
		padding: 8px 20px;
		gap: 10px;
		border-radius: 32px;
	}

	.hero-text-section.hero-text-section.hero-text-section {
		padding-top: 96px !important;
	}

	.site-header__name {
		font-size: clamp(20px, calc(18.1818px + 0.5682vw), 24px); /* 20->24px */
	}

	.site-header__tagline {
		font-size: var(--fs-xs);
	}

	.site-header__search-form.is-open {
		width: 180px;
	}
}

/* Sous 600px : le champ de recherche sort de la capsule et s'ouvre en
   volet déroulant sous le header (même principe que le menu burger),
   au lieu de s'élargir en ligne — plus assez de place à côté du logo
   et du bouton burger à cette largeur. */
@media (max-width: 600px) {
	.site-header__inner {
    width: 100%;
}

	.site-header__search-form {
		width: auto;
		overflow: visible;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		margin-top: 12px;
		background: rgba(255, 255, 255, 0.98);
		border-radius: 24px;
		box-shadow: 0 8px 30px rgba(28, 48, 62, 0.12);
		padding: 12px 16px;
		gap: 8px;
		visibility: hidden;
		transform: translateY(-8px);
		transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
	}
		.site-header__name {
		font-size: 18px; /* 20->24px */
	}

	.site-header__search-form.is-open {
		width: auto;
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0s;
	}

	.site-header__search-form .search-field {
		background: var(--color-bg-principal);
		border: 1px solid var(--color-contraste);
		border-radius: 999px;
	}
}

/* Respecte la préférence système "réduire les animations" (RGAA 13.3 / WCAG 2.3.3). */
@media (prefers-reduced-motion: reduce) {
	.site-header,
	.site-header__nav,
	.site-header__nav.is-open,
	.site-header__search-form,
	.site-header__search-form.is-open,
	.site-header__burger-line {
		transition: none;
	}
}