/* ============================================================
   En-tête Divi — passage en position fixe (sticky)
   + effet "verre dépoli" et compactage progressif au scroll
   via animations pilotées par le défilement (CSS pur, sans JS).

   ⚠️ Particularité de ce header Divi :
   - La SECTION (.et_pb_section_0_tb_header) a un padding 0 et n'a pas
     de hauteur propre.
   - La RANGÉE (.et_pb_row_0_tb_header) est en position: absolute (top:0)
     et c'est elle qui contient visuellement logo + menu.
   → Le fond visuel et la hauteur se règlent sur la RANGÉE.
   ============================================================ */

/* Hauteur cible du header sticky (réutilisée pour l'offset d'ancre).
   Si tu retouches la valeur, scroll-padding-top suit automatiquement. */
:root {
	--vo-header-height: 115px;
}

/* On épingle le wrapper du header (Theme Builder) ET la section. */
body .et-l--header,
body div.et_pb_section.et_pb_section_0_tb_header {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	z-index: 9999 !important;
	transform: none !important;
	filter: none !important;
}

/* Hauteur réduite : on bat le padding!important injecté par Divi
   via une spécificité plus forte + notre propre !important.

   ⚠️ Le backdrop-filter et le background animé sont déportés sur un
   ::before plutôt que sur la rangée elle-même. Pourquoi ? Parce que
   backdrop-filter sur la rangée en ferait un "containing block" pour
   tous les descendants en position: fixed (cf. menu mobile), ce qui
   casse leur positionnement relatif au viewport. */
body div.et_pb_section.et_pb_section_0_tb_header
	.et_pb_row_0_tb_header.et_pb_row {
	padding-top: 6px !important;
	padding-bottom: 6px !important;
	background-color: transparent;
	isolation: isolate; /* contient le ::before z-index:-1 dans le scope de la rangée */
}

body div.et_pb_section.et_pb_section_0_tb_header
	.et_pb_row_0_tb_header.et_pb_row::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-color: transparent;
	transition: background-color 0.35s ease,
				backdrop-filter 0.35s ease,
				-webkit-backdrop-filter 0.35s ease,
				box-shadow 0.35s ease;
}

/* Logo : on réduit aussi sa taille de départ pour gagner de la hauteur. */
body .et_pb_image_0_tb_header.et_pb_image {
	width: 240px !important;
}

.et_pb_image_0_tb_header .et_pb_image_wrap img {
	transition: transform 0.35s ease;
	transform-origin: left center;
}

/* --- Variante moderne : scroll-driven animations
   (Chrome/Edge 115+, Firefox 144+) --- */
@supports (animation-timeline: scroll()) {

	body div.et_pb_section.et_pb_section_0_tb_header
		.et_pb_row_0_tb_header.et_pb_row::before {
		animation: vo-header-scrolled linear both;
		animation-timeline: scroll(root);
		animation-range: 0 220px;
	}

	@keyframes vo-header-scrolled {
		to {
			background-color: rgba(29, 57, 47, 0.96);
			backdrop-filter: saturate(140%) blur(12px);
			-webkit-backdrop-filter: saturate(140%) blur(12px);
			box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
		}
	}

	.et_pb_image_0_tb_header .et_pb_image_wrap img {
		animation: vo-header-logo-shrink linear both;
		animation-timeline: scroll(root);
		animation-range: 0 220px;
	}

	@keyframes vo-header-logo-shrink {
		to {
			transform: scale(0.70);
		}
	}
}

/* --- Fallback : fond permanent pour navigateurs sans scroll-timeline --- */
@supports not (animation-timeline: scroll()) {

	body div.et_pb_section.et_pb_section_0_tb_header
		.et_pb_row_0_tb_header.et_pb_row::before {
		background-color: rgba(29, 57, 47, 0.92);
		backdrop-filter: saturate(140%) blur(10px);
		-webkit-backdrop-filter: saturate(140%) blur(10px);
		box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
	}
}

/* ============================================================
   Gouttière horizontale du header alignée sur le contenu.
   Le header est figé à 72px de padding gauche/droite sur toutes les
   tailles (réglage Theme Builder), alors que les rangées de contenu
   passent à 40px (≤980px) puis 20px (≤767px). On reproduit ces paliers
   pour que le logo soit cohérent avec le reste de la page en mobile.
   ============================================================ */
@media only screen and (max-width: 980px) {
	body div.et_pb_section.et_pb_section_0_tb_header
		.et_pb_row_0_tb_header.et_pb_row {
		padding-left: 40px !important;
		padding-right: 40px !important;
	}
}

@media only screen and (max-width: 767px) {
	body div.et_pb_section.et_pb_section_0_tb_header
		.et_pb_row_0_tb_header.et_pb_row {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
}

/* Menu mobile ouvert : fond opaque par-dessus le header fixe */
.et_pb_menu_0_tb_header .et_mobile_nav_menu .mobile_nav.opened .et_mobile_menu {
	background-color: rgba(29, 57, 47, 0.98);
	backdrop-filter: saturate(140%) blur(12px);
	-webkit-backdrop-filter: saturate(140%) blur(12px);
}

/* Visual Builder en mode édition (et-fb) : on neutralise le fixed */
body.et-fb .et-l--header,
body.et-fb div.et_pb_section.et_pb_section_0_tb_header {
	position: relative !important;
}

/* ============================================================
   Offset d'ancre — empêche le header sticky de masquer le titre
   des sections quand on clique sur un lien #section.
   ============================================================ */

html {
	scroll-padding-top: calc(var(--vo-header-height) + 16px);
}

/* Belt & suspenders : certains scrolls JS (Divi smooth scroll) ne
   respectent pas scroll-padding-top ; scroll-margin sur la cible
   est honoré par scrollIntoView et certains polyfills. */
.et_pb_section[id],
[id^="noous"],
[id^="equipe"],
[id^="services"],
[id^="contact"] {
	scroll-margin-top: calc(var(--vo-header-height) + 16px);
}

/* Respect des préférences utilisateur (motion) */
@media (prefers-reduced-motion: reduce) {

	body div.et_pb_section.et_pb_section_0_tb_header
		.et_pb_row_0_tb_header.et_pb_row::before,
	.et_pb_image_0_tb_header .et_pb_image_wrap img {
		animation: none !important;
		transition: none !important;
	}
}