/**
 * AVENA — Header (template Elementor Theme Builder, pas un widget custom
 * du plugin). Classes posées manuellement sur les éléments dans Elementor :
 * .avena-header (conteneur), .avena-header__logo, .avena-header__menu,
 * .avena-header__cta, .avena-header__lang. Chargé sur TOUTES les pages
 * (cf. register_assets() dans class-avena-plugin.php), pas seulement là où
 * un widget du plugin est présent, puisque le header apparaît partout.
 * Les règles de fin de fichier réservent la superposition transparente à
 * l'accueil (body.home) et remettent les autres pages dans le flux normal.
 */
.avena-header {
	display: flex !important;
	flex-direction: row !important;
	justify-content: space-between !important;
	align-items: center !important;

	/*
	 * Header transparent, superposé par-dessus le hero (cf. lpp-avena.ch)
	 * plutôt qu'une barre solide séparée au-dessus. Sort du flux normal :
	 * voir le padding-top compensatoire ajouté sur .avena-sim-hero-slider
	 * (hero-slider.css) pour que le titre ne passe pas sous le header.
	 */
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	z-index: 100 !important;
	background-color: transparent !important;
	box-shadow: none !important; /* ombre de séparation retirée, plus pertinente pour un header transparent */

	/*
	 * Même rayon que .avena-sim-hero-slider (hero-slider.css) sur les coins
	 * hauts, par cohérence si un fond redevenait visible ici un jour — sans
	 * effet visuel tant que le header reste transparent.
	 */
	border-top-left-radius: 4px !important;
	border-top-right-radius: 4px !important;

	padding-top: 40px !important;
	padding-bottom: 40px !important;

	padding-right: 30px !important;

	padding-left: 30px !important;
	/*
	 * margin:10px (ancien correctif pour l'espace blanc entre le header en
	 * flux normal et le hero) retiré : incompatible avec position:absolute +
	 * top:0/left:0/width:100% (aurait décalé le header et débordé du
	 * viewport). Devenu sans objet puisque le header superpose désormais le
	 * hero au lieu d'être empilé au-dessus.
	 */
	margin: 0 !important;
	margin-top: 0!important;
}

/*
 * Neutralise le "Sticky" d'Elementor (réglage Theme Builder du template
 * header, hors de ce plugin — cf. Advanced > Motion Effects > Sticky à
 * repasser sur "None" côté admin, c'est le vrai fixe). Constaté en prod
 * (2026-08-24) : le header reste collé en haut pendant le scroll et
 * chevauche le titre du hero, alors que .avena-header est déjà en
 * position:absolute !important ci-dessus — Elementor doit donc togguer une
 * classe (elementor-sticky / --active / --effects) dont la règle CSS est
 * elle-même !important, à égalité de priorité avec la nôtre, donc départagée
 * par la spécificité : sélecteur composé (deux classes) plutôt qu'une seule
 * pour être sûr de gagner quel que soit l'ordre de chargement des feuilles
 * de style.
 */
.avena-header.elementor-sticky,
.avena-header.elementor-sticky--active,
.avena-header.elementor-sticky--effects {
	position: absolute !important;
	top: 0 !important;
}

/*
 * Alignement vertical : tous les enfants directs (logo, menu, CTA, FR) sont
 * déjà centrés via align-items sur .avena-header, mais le logo (widget image
 * Elementor) peut introduire un line-height différent des autres éléments —
 * on le neutralise ici pour éviter tout décalage d'1-2px.
 */
.avena-header__logo {
	display: inline-flex;
	align-items: center;
	line-height: 1;
}



.avena-header__menu {
	display: flex;
	align-items: center;
	gap: 48px;
}

.avena-header__menu a {
	position: relative;
	display: inline-block;
	color: #ffffff; /* --avena-color-white : var() ne se résout pas ici, hors du scope .avena-sim-* de tokens.css */
	font-family: 'Circular Std', sans-serif;
	font-weight: 600;
	font-size: 15px;
	line-height: 1;
	letter-spacing: 0.4px;
	text-decoration: none;
	padding-bottom: 4px;
	transition: opacity 0.2s ease, color 0.2s ease;
}

.avena-header__menu a::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 2px;
	/* #85C695 codé en dur : tokens.css ne définit actuellement aucune variable --avena-color-green valant cette teinte (cf. hero-slider.css/lead-form.css pour le détail). */
	background-color: #85c695;
	transition: width 0.25s ease;
}

.avena-header__menu a:hover {
	color: #85c695;
}

.avena-header__menu a:hover::after {
	width: 100%;
}

.avena-header__cta {
	display: inline-flex;
	align-items: center;
	background-color: #009e4d; /* --avena-color-primary : var() ne se résout pas ici, hors du scope .avena-sim-* de tokens.css */
	color: #ffffff; /* --avena-color-white : idem */
	border-radius: 999px; /* forme pilule */
	padding: 14px 28px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.3px;
	border: none;
	box-shadow: 0 4px 12px rgba( 0, 158, 77, 0.25 );
	transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.avena-header__cta:hover {
	background-color: #009e4d;
	filter: brightness( 0.92 );
	transform: translateY( -1px );
	box-shadow: 0 6px 16px rgba( 0, 158, 77, 0.35 );
}

.avena-header__lang {
	display: inline-block;
	color: #ffffff; /* --avena-color-white : var() ne se résout pas ici, hors du scope .avena-sim-* de tokens.css */
	font-family: 'Circular Std', sans-serif;
	font-weight: 500;
	font-size: 16px;
	line-height: 1;
	letter-spacing: 0.2px;
	cursor: pointer;
	padding: 6px 10px;
	border: 1px solid rgba( 255, 255, 255, 0.25 );
	border-radius: 6px;
	transition: opacity 0.2s ease, border-color 0.2s ease;
}

.avena-header__lang:hover {
	opacity: 0.8;
	border-color: rgba( 255, 255, 255, 0.45 );
}


header.elementor-location-header {
	/*
	 * position:static (2026-08-24) : cause probable du header qui reste
	 * collé à l'écran pendant le scroll (vérifié via l'inspecteur, cf.
	 * capture client) — .avena-header (l'élément visuel, à l'intérieur de ce
	 * wrapper) est en position:absolute, qui se positionne par rapport à son
	 * ancêtre positionné le plus proche. Si CE wrapper est fixed/sticky par
	 * défaut (thème ou Elementor), .avena-header hérite de ce comportement
	 * au lieu de simplement se positionner en haut du hero puis défiler avec
	 * la page. On le repasse en flux normal ici pour que ce soit bien
	 * .avena-header (top:0 de la page, cf. plus haut) qui gère l'overlay,
	 * pas ce wrapper.
	 */
	position: static !important;
	margin: 0 !important;
	padding: 0 !important;
	min-height: 0 !important;
	line-height: 0 !important; /* évite un espace résiduel dû à un inline-block vide */
}

/*
 * Mobile (même breakpoint 600px que hero-slider.css) : aucune media query
 * n'existait ici avant — le CTA gardait son padding/font-size desktop dans
 * une ligne trop étroite et le texte "En savoir plus" wrappait sur 3 lignes.
 * On resserre le header et on force le CTA sur une seule ligne.
 */
@media ( max-width: 767px ) {
	header.elementor-location-header {
		position: absolute !important;
		top: 0 !important;
		left: 0 !important;
		width: 100% !important;
		z-index: 1000 !important;
		background: transparent !important;
	}

	/*
	 * Elementor peut poser le sticky sur le wrapper du template ou sur un
	 * conteneur intermédiaire plutôt que sur .avena-header. Ces sélecteurs
	 * mobiles neutralisent ces variantes : le header reste ancré en haut du
	 * hero et quitte naturellement l'écran avec lui.
	 */
	header.elementor-location-header.elementor-sticky,
	header.elementor-location-header.elementor-sticky--active,
	header.elementor-location-header.elementor-sticky--effects,
	.elementor-location-header.elementor-sticky,
	.elementor-location-header.elementor-sticky--active,
	.elementor-location-header.elementor-sticky--effects {
		position: absolute !important;
		top: 0 !important;
		left: 0 !important;
		width: 100% !important;
		transform: none !important;
	}

	header.elementor-location-header .elementor-sticky:not( .avena-header ),
	header.elementor-location-header .elementor-sticky--active:not( .avena-header ),
	header.elementor-location-header .elementor-sticky--effects:not( .avena-header ) {
		position: static !important;
		top: auto !important;
		left: auto !important;
		width: auto !important;
		transform: none !important;
	}

	header.elementor-location-header > .elementor,
	header.elementor-location-header .elementor-section,
	header.elementor-location-header .e-con {
		background-color: transparent !important;
	}

	.avena-header {
		position: absolute !important;
		top: 0 !important;
		left: 0 !important;
		width: 100% !important;
		z-index: 1001 !important;
		background-color: transparent !important;
		min-height: 110px !important;
		padding: 24px 28px !important;
		gap: 0 !important;
	}

	/* Maquette mobile : logo AVENA centré indépendamment du hamburger. */
	.avena-header__logo {
		position: absolute !important;
		top: 50% !important;
		left: 50% !important;
		width: 170px !important;
		max-width: 46vw !important;
		transform: translate( -50%, -50% ) !important;
		z-index: 1;
	}

	.avena-header__logo img,
	.avena-header__logo svg {
		display: block;
		width: 100% !important;
		height: auto !important;
	}

	.avena-header__cta {
		padding: 10px 16px;
		font-size: 12px;
		white-space: nowrap;
	}

	.avena-header__lang {
		font-size: 13px;
		padding: 4px 8px;
	}

	.avena-header__menu {
		margin-left: auto;
		position: static !important;
		z-index: 2;
	}

	/*
	 * Bouton hamburger (rendu par Elementor sur le widget Nav Menu qui porte
	 * .avena-header__menu, cf. commentaire en tête de fichier) mal aligné
	 * verticalement par rapport au logo/CTA sur mobile réel. .avena-header__menu
	 * est déjà display:flex + align-items:center (cf. plus haut), donc le
	 * toggle devrait déjà être centré — le décalage vient très probablement du
	 * padding/line-height par défaut d'Elementor sur .elementor-menu-toggle,
	 * qui agrandit sa propre boîte sans que le contenu (icône) soit recentré
	 * dedans. Reset ciblé sur le sélecteur générique Elementor, pas de classe
	 * custom posée dessus dans Elementor pour ce bouton.
	 */
	.avena-header__menu .elementor-menu-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		align-self: center;
		margin: 0;
		padding: 0;
		line-height: 1;
		width: 32px;
		height: 32px;
		color: #009e4d !important;
		background: transparent !important;
		border: 0 !important;
	}

	.avena-header__menu .elementor-menu-toggle svg,
	.avena-header__menu .elementor-menu-toggle svg path,
	.avena-header__menu .elementor-menu-toggle i,
	.avena-header__menu .elementor-menu-toggle * {
		color: #009e4d !important;
		fill: #009e4d !important;
		stroke: #009e4d !important;
	}

	.avena-header__menu .elementor-menu-toggle svg {
		width: 32px;
		height: 32px;
		filter: none !important;
	}

	.avena-header__menu .elementor-menu-toggle .eicon-menu-bar::before,
	.avena-header__menu .elementor-menu-toggle [class*="icon"]::before {
		color: #009e4d !important;
	}

	/* Le panneau commence exactement sous le bandeau de 110px et recouvre le hero. */
	.avena-header__menu .elementor-nav-menu--dropdown,
	.avena-header__menu .elementor-nav-menu--dropdown.elementor-nav-menu__container {
		position: fixed !important;
		top: 110px !important;
		left: 0 !important;
		width: 100vw !important;
		min-width: 100vw !important;
		margin: 0 !important;
		border: 0 !important;
		border-radius: 0 !important;
		background: #104651 !important;
		box-shadow: 0 8px 16px rgba( 16, 70, 81, 0.18 ) !important;
		z-index: 1002 !important;
	}

	.avena-header__menu .elementor-nav-menu--dropdown ul,
	.avena-header__menu .elementor-nav-menu--dropdown .elementor-nav-menu {
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		background: #104651 !important;
	}

	.avena-header__menu .elementor-nav-menu--dropdown li {
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.avena-header__menu .elementor-nav-menu--dropdown a,
	.avena-header__menu .elementor-nav-menu--dropdown .elementor-item {
		display: flex !important;
		align-items: center !important;
		width: 100% !important;
		min-height: 45px !important;
		margin: 0 !important;
		padding: 0 20px !important;
		border: 0 !important;
		border-bottom: 2px solid #009e4d !important;
		border-radius: 0 !important;
		background: #104651 !important;
		box-shadow: none !important;
		color: #ffffff !important;
		font-family: 'Circular Std', sans-serif !important;
		font-size: 15px !important;
		font-weight: 400 !important;
		line-height: 1.2 !important;
		letter-spacing: 0.2px !important;
		text-decoration: none !important;
		transform: none !important;
	}

	.avena-header__menu .elementor-nav-menu--dropdown a::after,
	.avena-header__menu .elementor-nav-menu--dropdown .elementor-item::after {
		display: none !important;
	}

	.avena-header__menu .elementor-nav-menu--dropdown .elementor-item-active,
	.avena-header__menu .elementor-nav-menu--dropdown .current-menu-item > a,
	.avena-header__menu .elementor-nav-menu--dropdown a:hover,
	.avena-header__menu .elementor-nav-menu--dropdown a:focus-visible {
		background: #85c695 !important;
		color: #104651 !important;
	}

	.avena-header__mobile-actions {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		width: 100%;
		margin: 0;
		padding: 0;
		background: #104651;
	}

	.avena-header__mobile-actions .avena-header__cta,
	.avena-header__mobile-actions .avena-header__lang {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: 100% !important;
		min-height: 45px !important;
		margin: 0 !important;
		padding: 0 20px !important;
		border: 0 !important;
		border-bottom: 2px solid #009e4d !important;
		border-radius: 0 !important;
		background: #104651 !important;
		box-shadow: none !important;
		color: #ffffff !important;
		font-family: 'Circular Std', sans-serif !important;
		font-size: 15px !important;
		font-weight: 400 !important;
		line-height: 1.2 !important;
		letter-spacing: 0.2px !important;
		text-align: center !important;
		text-decoration: none !important;
		white-space: nowrap;
		transform: none !important;
		filter: none !important;
	}

	.avena-header__mobile-actions .avena-header__cta:hover,
	.avena-header__mobile-actions .avena-header__cta:focus-visible,
	.avena-header__mobile-actions .avena-header__lang:hover,
	.avena-header__mobile-actions .avena-header__lang:focus-visible {
		background: #85c695 !important;
		color: #104651 !important;
	}
}

/*
 * Pages internes : fond opaque et hauteur réellement réservée au header.
 * WordPress pose .home sur la page d'accueil. Sans cette classe, le header
 * bleu est le comportement par défaut, y compris sur les nouvelles pages.
 * Ces règles passent après les variantes mobiles/sticky ci-dessus.
 */
body:not( .home ) .elementor-location-header {
	position: relative !important;
	top: auto !important;
	left: auto !important;
	width: 100% !important;
	background: #104651 !important;
	transform: none !important;
}

body:not( .home ) .elementor-location-header .elementor-sticky:not( .avena-header ),
body:not( .home ) .elementor-location-header .elementor-sticky--active:not( .avena-header ),
body:not( .home ) .elementor-location-header .elementor-sticky--effects:not( .avena-header ) {
	position: static !important;
	top: auto !important;
	left: auto !important;
	transform: none !important;
}

body:not( .home ) .avena-header {
	position: relative !important;
	top: auto !important;
	left: auto !important;
	background: #104651 !important;
	border-radius: 0 !important;
	transform: none !important;
}

@media ( max-width: 767px ) {
	/* Le panneau suit le bas du header, même avec la barre d'admin WordPress. */
	body:not( .home ) .avena-header__menu .elementor-nav-menu--dropdown,
	body:not( .home ) .avena-header__menu .elementor-nav-menu--dropdown.elementor-nav-menu__container {
		position: absolute !important;
		top: 100% !important;
	}
}

/*
 * German page only (Polylang sets <html lang="de-DE">): the German menu labels
 * are much longer than the French ones ("Muss ich meine Vorsorge anpassen?").
 * - 768 px and up: let the menu box shrink so the CTA and the language
 *   switcher stay on screen (no horizontal scroll).
 * - 1025–1799 px: tighter items; the long last item may wrap on 2 lines so the
 *   menu stays on one row (1100 px and up).
 * Scoped to de-DE so the French header is untouched.
 */
@media ( min-width: 768px ) {
	html[lang="de-DE"] .avena__menu,
	html[lang="de-DE"] .avena-header__menu {
		min-width: 0;
		flex-shrink: 1;
	}
}

@media ( min-width: 1025px ) and ( max-width: 1799px ) {
	html[lang="de-DE"] .avena__menu .elementor-nav-menu--main .elementor-item {
		padding-left: 10px !important;
		padding-right: 10px !important;
		font-size: 14px !important;
		letter-spacing: 0 !important;
	}

	html[lang="de-DE"] .avena__menu .elementor-nav-menu--main .menu-item:last-child .elementor-item {
		max-width: 160px;
		white-space: normal !important;
		text-align: center;
		line-height: 1.2 !important;
	}
}

@media ( min-width: 1025px ) and ( max-width: 1199px ) {
	html[lang="de-DE"] .avena__menu .elementor-nav-menu--main .elementor-item {
		padding-left: 4px !important;
		padding-right: 4px !important;
		font-size: 12.5px !important;
	}

	html[lang="de-DE"] .avena__menu .elementor-nav-menu--main .menu-item:last-child .elementor-item {
		max-width: 105px;
	}

	/* Keep "Mehr erfahren" on one line in this narrow range. */
	html[lang="de-DE"] .avena-header__cta {
		white-space: nowrap !important;
		flex-shrink: 0 !important;
	}
}

/*
 * Language switcher (FR / DE) built by avena-header.js from the heading
 * .avena-header__lang. The wrapper keeps the heading's classes, so the
 * existing .avena-header__lang look (border, padding, font) is reused.
 */
.avena-lang-switch {
	position: relative;
	padding: 0 !important;
	line-height: 1;
}

.avena-lang-switch__toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 6px 10px;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	line-height: 1;
	letter-spacing: inherit;
	cursor: pointer;
}

/*
 * The Hello Elementor theme styles every <button> (reset.css: pink/red border
 * and text, hover background). Neutralise it for the switcher in all states.
 */
.avena-lang-switch .avena-lang-switch__toggle,
.avena-lang-switch .avena-lang-switch__toggle:hover,
.avena-lang-switch .avena-lang-switch__toggle:focus,
.avena-lang-switch .avena-lang-switch__toggle:active {
	padding: 6px 10px !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
	color: inherit !important;
	font: inherit !important;
	line-height: 1 !important;
	text-decoration: none !important;
	outline: none;
}

/*
 * The theme also forces display:inline-block on <button>: the chevron then
 * became an inline span and only showed as a thin vertical bar ("|").
 */
.avena-lang-switch .avena-lang-switch__toggle {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
}

.avena-lang-switch .avena-lang-switch__chevron {
	display: inline-block !important;
	flex: 0 0 auto;
}

.avena-lang-switch .avena-lang-switch__toggle:focus-visible {
	outline: 2px solid #85c695 !important;
	outline-offset: 2px;
	border-radius: 4px;
}

.avena-lang-switch__chevron {
	width: 6px;
	height: 6px;
	margin-top: -3px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate( 45deg );
	transition: transform 0.2s ease, margin 0.2s ease;
}

.avena-lang-switch.is-open .avena-lang-switch__chevron {
	margin-top: 3px;
	transform: rotate( -135deg );
}

.avena-lang-switch__list {
	position: absolute;
	top: calc( 100% + 6px );
	right: 0;
	z-index: 1000;
	min-width: 100%;
	margin: 0;
	padding: 4px 0;
	list-style: none;
	background: #104651;
	border: 1px solid rgba( 255, 255, 255, 0.25 );
	border-radius: 6px;
	box-shadow: 0 6px 16px rgba( 0, 0, 0, 0.25 );
}

.avena-lang-switch__list[hidden] {
	display: none;
}

.avena-lang-switch__list li {
	margin: 0;
	padding: 0;
}

.avena-lang-switch__list a {
	display: block;
	padding: 8px 14px;
	color: #ffffff;
	font-size: 15px;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
}

.avena-lang-switch__list a:hover,
.avena-lang-switch__list a:focus-visible {
	background: rgba( 255, 255, 255, 0.1 );
}

.avena-lang-switch__list a[aria-current="true"] {
	color: #85c695;
	font-weight: 700;
}

/* Mobile: the switcher sits in the burger menu → show "FR | DE" inline, no dropdown. */
@media ( max-width: 767px ) {
	.avena-header__mobile-actions .avena-lang-switch__toggle {
		display: none !important;
	}

	.avena-header__mobile-actions .avena-lang-switch__list,
	.avena-header__mobile-actions .avena-lang-switch__list[hidden] {
		position: static;
		display: flex !important;
		justify-content: center;
		align-items: center;
		gap: 0;
		min-width: 0;
		padding: 0;
		background: none;
		border: 0;
		box-shadow: none;
	}

	.avena-header__mobile-actions .avena-lang-switch__list li + li::before {
		content: "|";
		padding: 0 4px;
		color: rgba( 255, 255, 255, 0.5 );
	}

	.avena-header__mobile-actions .avena-lang-switch__list li {
		display: flex;
		flex: 0 0 auto;
		align-items: center;
		width: auto !important;
	}

	/* Beat the burger-menu link styles (.elementor-nav-menu--dropdown a). */
	.avena-header__mobile-actions .avena-lang-switch__list a {
		display: inline-block !important;
		width: auto !important;
		min-height: 0 !important;
		padding: 12px 10px !important;
		border: 0 !important;
		background: none !important;
		color: #ffffff !important;
	}

	.avena-header__mobile-actions .avena-lang-switch__list a[aria-current="true"] {
		color: #85c695 !important;
		font-weight: 700 !important;
	}
}