/*
 * Widget Header Complet — CSS isolé (variables du thème avec fallback).
 * Le sticky réel est posé en JS (.is-stuck → position: fixed) : un
 * `position: sticky` n'a aucune course utile dans un widget Elementor.
 */

.myfw-header-full {
	--myfw-hf-bg: #ffffff;
	--myfw-hf-bg-op: 100;
	--myfw-hf-pad-y: 16px;
	--myfw-hf-pad-y-scrolled: 10px;
	--myfw-hf-content-max: 1200px;
	--myfw-hf-capsule-radius: 40px;
	--myfw-hf-capsule-max: 1120px;
	--myfw-hf-capsule-inset: 14px;
	--myfw-hf-nav-gap: 28px;
	--myfw-hf-btn-gap: 12px;
	--myfw-hf-btn-radius: 6px;
	--myfw-hf-logo-h: 40px;
	--myfw-hf-nav-color: var(--color-text, #1a1a1a);
	--myfw-hf-nav-color-hover: var(--color-accent, #2563eb);

	position: relative;
	z-index: 10;
	/* Couleur de fond avec opacité réglable (0–100). 1re ligne = repli
	   pour les navigateurs sans color-mix. */
	background-color: var(--myfw-hf-bg);
	background-color: color-mix( in srgb, var(--myfw-hf-bg) calc( var(--myfw-hf-bg-op, 100) * 1% ), transparent );
	transition: background-color 0.25s ease, box-shadow 0.25s ease, border-radius 0.25s ease, max-width 0.25s ease, margin 0.25s ease;
}

/* ---- Effet verre liquide (bandeau) ----
   Opacité et flou gérés par leurs PROPRES variables (--myfw-hf-glass-*),
   jamais --myfw-hf-bg-op : cette dernière est aussi réécrite sur
   `.is-scrolled` par la couleur « Après défilement », et un mode verre qui
   la partagerait redeviendrait opaque dès qu'on scrolle. Saturation,
   reflet et bordure sont volontairement fixes (non exposés en réglage) —
   c'est ce qui fait "l'allure verre liquide", pas la peine d'en faire des
   curseurs de plus. */
.myfw-header-full--glass {
	background-color: var(--myfw-hf-bg);
	background-color: color-mix( in srgb, var(--myfw-hf-bg) calc( var(--myfw-hf-glass-op, 45) * 1% ), transparent );
	background-image: linear-gradient(
		var(--myfw-hf-glass-shine-angle, 135deg),
		var(--myfw-hf-glass-shine-start, rgba(255, 255, 255, 0.55)) 0%,
		var(--myfw-hf-glass-shine-end, rgba(255, 255, 255, 0)) var(--myfw-hf-glass-shine-size, 55%)
	);
	backdrop-filter: blur( var(--myfw-hf-glass-blur, 22px) ) saturate( var(--myfw-hf-glass-saturate, 180%) );
	-webkit-backdrop-filter: blur( var(--myfw-hf-glass-blur, 22px) ) saturate( var(--myfw-hf-glass-saturate, 180%) );
	outline: 1px solid var(--myfw-hf-glass-border, rgba(255, 255, 255, 0.35));
	outline-offset: -1px;
}
.myfw-header-full--glass::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	border-radius: inherit;
	box-shadow:
		inset 0 1px 0 var(--myfw-hf-glass-highlight, rgba(255, 255, 255, 0.55)),
		inset 0 -1px 0 rgba(0, 0, 0, 0.07),
		inset 0 -14px 18px -16px rgba(0, 0, 0, 0.16);
}

/* ---- Capsule flottante centrée ----
   `.is-capsule` est posée par le PHP (mode « Toujours ») ou par le JS
   (mode « après défilement »). Dans l'éditeur Elementor, on affiche
   toujours la forme pour pouvoir la régler. */
.myfw-header-full--capsule.is-capsule,
body.elementor-editor-active .myfw-header-full--capsule {
	max-width: var(--myfw-hf-capsule-max, 1120px);
	margin-inline: auto;
	border-radius: var(--myfw-hf-capsule-radius, 40px);
}
.myfw-header-full--capsule.is-capsule:not(.is-stuck),
body.elementor-editor-active .myfw-header-full--capsule:not(.is-stuck) {
	margin-top: var(--myfw-hf-capsule-inset, 14px);
}
.myfw-header-full--capsule.is-capsule.is-stuck {
	top: var(--myfw-hf-capsule-inset, 14px);
	left: var(--myfw-hf-capsule-inset, 14px);
	right: var(--myfw-hf-capsule-inset, 14px);
	width: auto;
}

.myfw-header-full__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp( 16px, 3vw, 40px );
	padding-block: var(--myfw-hf-pad-y);
	padding-inline: clamp( 16px, 4vw, 40px );
	transition: padding 0.25s ease;
}
.myfw-header-full--contained .myfw-header-full__bar {
	max-width: var(--myfw-hf-content-max);
	margin-inline: auto;
	width: 100%;
}

/* ---- Logo ---- */
.myfw-header-full__logo {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	flex-shrink: 0;
}
.myfw-header-full__logo-image {
	display: block;
	/* !important : de nombreux thèmes forcent `img { height: auto }`,
	   ce qui rendrait le réglage de hauteur sans effet. */
	height: var(--myfw-hf-logo-h) !important;
	width: auto !important;
	max-width: none;
	transition: height 0.25s ease;
}
.myfw-header-full__logo-text {
	font-family: var(--font-heading, inherit);
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--color-text, #1a1a1a);
}

/* ---- Bloc droit (nav + boutons) ---- */
.myfw-header-full__collapse {
	display: flex;
	align-items: center;
	gap: clamp( 16px, 3vw, 36px );
}

.myfw-header-full__nav {
	display: flex;
	align-items: center;
	gap: var(--myfw-hf-nav-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}
.myfw-header-full__nav li {
	margin: 0;
}
.myfw-header-full__nav a {
	display: inline-block;
	padding: 6px 0;
	text-decoration: none;
	color: var(--myfw-hf-nav-color);
	font-family: var(--font-body, inherit);
	transition: color 0.2s ease;
}
.myfw-header-full__nav a:hover,
.myfw-header-full__nav .current-menu-item > a {
	color: var(--myfw-hf-nav-color-hover);
}

/* Lien de la section actuellement à l'écran (scrollspy). Surchargeable
   dans « CSS personnalisé » : selector .myfw-header-full__nav-link.is-current { … } */
.myfw-header-full__nav-link.is-current {
	color: var(--myfw-hf-nav-color-hover);
	font-weight: 600;
}

.myfw-header-full__actions {
	display: flex;
	align-items: center;
	gap: var(--myfw-hf-btn-gap);
}

/* ---- Style d'affichage des liens (au survol / sur sa section) ---- */
[class*="myfw-header-full--linkfx-"] .myfw-header-full__nav a {
	position: relative;
	z-index: 0;
}

/* -- Soulignement (trois variantes de direction) -- */
[class*="myfw-header-full--linkfx-underline-"] .myfw-header-full__nav a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background-color: var(--myfw-hf-nav-underline, currentColor);
	transform: scaleX( 0 );
	transition: transform 0.28s ease;
}
.myfw-header-full--linkfx-underline-lr .myfw-header-full__nav a::after {
	transform-origin: left center;
}
.myfw-header-full--linkfx-underline-rl .myfw-header-full__nav a::after {
	transform-origin: right center;
}
.myfw-header-full--linkfx-underline-center .myfw-header-full__nav a::after {
	transform-origin: center center;
}
[class*="myfw-header-full--linkfx-underline-"] .myfw-header-full__nav a:hover::after,
[class*="myfw-header-full--linkfx-underline-"] .myfw-header-full__nav a:focus-visible::after,
[class*="myfw-header-full--linkfx-underline-"] .myfw-header-full__nav a.is-current::after {
	transform: scaleX( 1 );
}

/* -- Pastille / Fond : bloc de couleur derrière le lien, façon onglet --
   Idéal avec la forme « Capsule flottante ». `::before` (pas `::after`,
   déjà utilisé par le soulignement) et `inset` en `em` pour rester
   proportionné à la taille du texte, quelle que soit la typographie. */
.myfw-header-full--linkfx-pill .myfw-header-full__nav a::before,
.myfw-header-full--linkfx-background .myfw-header-full__nav a::before {
	content: "";
	position: absolute;
	inset: -0.4em -0.9em;
	z-index: -1;
	background-color: var(--myfw-hf-nav-underline, color-mix( in srgb, currentColor 12%, transparent ));
	opacity: 0;
	transform: scale( 0.85 );
	transition: opacity 0.2s ease, transform 0.2s ease;
}
.myfw-header-full--linkfx-pill .myfw-header-full__nav a::before {
	border-radius: 999px;
}
.myfw-header-full--linkfx-background .myfw-header-full__nav a::before {
	border-radius: 8px;
}
.myfw-header-full--linkfx-pill .myfw-header-full__nav a:hover::before,
.myfw-header-full--linkfx-pill .myfw-header-full__nav a:focus-visible::before,
.myfw-header-full--linkfx-pill .myfw-header-full__nav a.is-current::before,
.myfw-header-full--linkfx-background .myfw-header-full__nav a:hover::before,
.myfw-header-full--linkfx-background .myfw-header-full__nav a:focus-visible::before,
.myfw-header-full--linkfx-background .myfw-header-full__nav a.is-current::before {
	opacity: 1;
	transform: scale( 1 );
}

.myfw-header-full__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.55em 1.2em;
	border: 1.5px solid transparent;
	border-radius: var(--myfw-hf-btn-radius);
	text-decoration: none;
	font-family: var(--font-body, inherit);
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

/* ---- Animation au survol des boutons ---- */
.myfw-header-full--btnfx-grow .myfw-header-full__btn:hover,
.myfw-header-full--btnfx-grow .myfw-header-full__btn:focus-visible {
	transform: scale( 1.05 );
}
.myfw-header-full--btnfx-float .myfw-header-full__btn:hover,
.myfw-header-full--btnfx-float .myfw-header-full__btn:focus-visible {
	transform: translateY( -3px );
}
.myfw-header-full--btnfx-sink .myfw-header-full__btn:hover,
.myfw-header-full--btnfx-sink .myfw-header-full__btn:focus-visible {
	transform: translateY( 2px );
}
.myfw-header-full__btn--primary {
	background-color: var(--myfw-hf-btn-primary-bg, var(--color-primary, #111827));
	color: var(--myfw-hf-btn-primary-color, #ffffff);
	border-color: var(--myfw-hf-btn-border, var(--myfw-hf-btn-primary-bg, var(--color-primary, #111827)));
}
.myfw-header-full__btn--secondary {
	background-color: var(--myfw-hf-btn-secondary-bg, var(--color-secondary, #6b7280));
	color: var(--myfw-hf-btn-secondary-color, #ffffff);
	border-color: var(--myfw-hf-btn-secondary-bg, var(--color-secondary, #6b7280));
}
.myfw-header-full__btn--outline {
	background-color: transparent;
	color: var(--myfw-hf-btn-outline-color, var(--myfw-hf-btn-primary-bg, var(--color-primary, #111827)));
	border-color: var(--myfw-hf-btn-border, currentColor);
}

/* ---- Bouton « Verre liquide » ----
   Réutilise le reflet/la bordure du mode Verre liquide du bandeau (Style →
   Largeur, style & disposition) pour un rendu cohérent, avec son propre
   flou (fonctionne même si le bandeau n'est pas en verre liquide). */
.myfw-header-full__btn--glass {
	background-color: var(--myfw-hf-btn-glass-tint, rgba(255, 255, 255, 0.22));
	background-image: linear-gradient(
		var(--myfw-hf-glass-shine-angle, 135deg),
		var(--myfw-hf-glass-shine-start, rgba(255, 255, 255, 0.55)) 0%,
		var(--myfw-hf-glass-shine-end, rgba(255, 255, 255, 0)) var(--myfw-hf-glass-shine-size, 55%)
	);
	-webkit-backdrop-filter: blur( var(--myfw-hf-btn-glass-blur, 16px) ) saturate( var(--myfw-hf-glass-saturate, 180%) );
	backdrop-filter: blur( var(--myfw-hf-btn-glass-blur, 16px) ) saturate( var(--myfw-hf-glass-saturate, 180%) );
	color: var(--myfw-hf-btn-glass-color, #ffffff);
	border-color: var(--myfw-hf-btn-border, var(--myfw-hf-glass-border, rgba(255, 255, 255, 0.35)));
	box-shadow: inset 0 1px 0 var(--myfw-hf-glass-highlight, rgba(255, 255, 255, 0.5)), inset 0 -1px 0 rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.15);
}
.myfw-header-full__btn--glass:hover,
.myfw-header-full__btn--glass:focus-visible {
	background-color: color-mix( in srgb, var(--myfw-hf-btn-glass-tint, rgba(255, 255, 255, 0.22)) 100%, #ffffff 12% );
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), inset 0 -1px 0 rgba(0, 0, 0, 0.08), 0 10px 30px rgba(0, 0, 0, 0.18);
}

/* ---- Disposition empilée ---- */
.myfw-header-full--stacked .myfw-header-full__bar {
	flex-direction: column;
	justify-content: center;
	gap: 14px;
}
.myfw-header-full--stacked .myfw-header-full__logo-image {
	height: calc( var(--myfw-hf-logo-h) * 1.7 ) !important;
}
.myfw-header-full--stacked .myfw-header-full__logo-text {
	font-size: 1.7rem;
}

/* L'ordre liens / boutons est géré par l'ordre du DOM (voir le PHP). */

/* ---- Burger ----
   Barres et espacement des barres volontairement fixes (non exposés en
   réglage) : couleur, taille, fond et forme du bouton suffisent à en
   changer l'allure. */
.myfw-header-full__toggle {
	--bar: var(--myfw-hf-toggle-bar-color, var(--myfw-hf-nav-color));
	display: none;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 5px;
	width: var(--myfw-hf-toggle-size, 42px);
	height: var(--myfw-hf-toggle-size, 42px);
	padding: 0;
	border: 0;
	border-radius: var(--myfw-hf-toggle-shape-radius, 0);
	background-color: var(--myfw-hf-toggle-bg, transparent);
	cursor: pointer;
	flex-shrink: 0;
}
.myfw-header-full__toggle span {
	display: block;
	width: 22px;
	height: 2px;
	background-color: var(--bar);
	transition: transform 0.25s ease, opacity 0.2s ease;
}
.myfw-header-full__toggle[aria-expanded="true"] span:nth-child( 1 ) {
	transform: translateY( 7px ) rotate( 45deg );
}
.myfw-header-full__toggle[aria-expanded="true"] span:nth-child( 2 ) {
	opacity: 0;
}
.myfw-header-full__toggle[aria-expanded="true"] span:nth-child( 3 ) {
	transform: translateY( -7px ) rotate( -45deg );
}

/* ---- Transparent (haut de page) : hors flux, se superpose au bloc
   suivant, jusqu'à ce qu'il soit fixé (si sticky actif). ---- */
.myfw-header-full--transparent:not(.is-stuck) {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	background-color: transparent;
	box-shadow: none;
}
/* Le wrapper Elementor du widget reste sinon un enfant du flux du conteneur
   (gap, hauteur résiduelle) : il laisse un « trou » au-dessus du bloc suivant.
   On le sort aussi du flux ; le header (absolute puis fixed) s'y ancre. */
.elementor-widget-myfw-header-full:has( .myfw-header-full--transparent ) {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 10;
	margin: 0;
}

/* « Transparent » et « Verre liquide » ensemble : Transparent l'emporterait
   sinon (règle plus spécifique ci-dessus), rendant le verre invisible tant
   que le header n'est pas fixé. On restitue explicitement le fond du verre
   pour cette combinaison précise. */
.myfw-header-full--transparent.myfw-header-full--glass:not(.is-stuck) {
	background-color: var(--myfw-hf-bg);
	background-color: color-mix( in srgb, var(--myfw-hf-bg) calc( var(--myfw-hf-glass-op, 45) * 1% ), transparent );
}

/* ---- Apparence après défilement ----
   Toujours active dès que la page a défilé (pas de réglage à activer en
   plus) : la couleur/l'ombre se règlent via les contrôles « Après
   défilement », qui réécrivent ces mêmes variables sur .is-scrolled. */
.myfw-header-full.is-scrolled .myfw-header-full__bar {
	padding-block: var(--myfw-hf-pad-y-scrolled);
}
.myfw-header-full.is-scrolled .myfw-header-full__logo-image {
	height: calc( var(--myfw-hf-logo-h) * 0.85 ) !important;
}
.myfw-header-full--shadow-scrolled.is-scrolled {
	box-shadow: 0 6px 24px rgba( 0, 0, 0, 0.08 );
}

/* ---- Sticky réel (classe posée par le JS) ---- */
.myfw-header-full.is-stuck {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	z-index: 999;
	box-shadow: 0 6px 24px rgba( 0, 0, 0, 0.08 );
}

.myfw-header-full__spacer {
	flex: 0 0 auto;
}

@media ( prefers-reduced-motion: reduce ) {
	.myfw-header-full,
	.myfw-header-full__bar,
	.myfw-header-full__logo-image,
	.myfw-header-full__toggle span,
	.myfw-header-full__nav a::after,
	.myfw-header-full__btn,
	.myfw-header-full__collapse {
		transition: none !important;
	}
	[class*="myfw-header-full--btnfx-"] .myfw-header-full__btn:hover {
		transform: none;
	}
}