@charset "UTF-8";
/* =============================================================
   Header — Theme Builder (post 16)
   Transparent overlay on home, hairline editorial when sticky.
   All state-change transitions share the same 420ms ease so the
   header morphs as one cohesive unit.
   ============================================================= */

:root {
	--header-ease: cubic-bezier(0.3, 0, 0, 1);
	--header-dur: 420ms;
}

/* On every page that uses the Elementor header/footer template
   (home, prevhub, and the new editorial pages), overlay the hero:
   no background, absolute on top of the section beneath. */
body.page-template-elementor_header_footer .elementor-location-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
}


body.page-template-elementor_header_footer .elementor-location-header .elementor-section,
body.page-template-elementor_header_footer .elementor-location-header > section.elementor-section {
	background-color: transparent !important;
	background-image: none !important;
}

/* Header AND footer (theme-builder locations 16/17) were laid out
   for full-bleed sections — without overriding Elementor's default
   1140 px container, the logo + menu (header) and the partners +
   nav row (footer) collapse toward the centre, leaving large empty
   margins on the sides. Force every container in those two
   locations to span 100% on every page that uses this template. */
body.page-template-elementor_header_footer .elementor-location-header .elementor-section .elementor-container,
body.page-template-elementor_header_footer .elementor-location-footer .elementor-section .elementor-container,
body.page-template-elementor_header_footer .elementor-location-header .elementor-section.elementor-section-boxed > .elementor-container,
body.page-template-elementor_header_footer .elementor-location-footer .elementor-section.elementor-section-boxed > .elementor-container {
	max-width: 100% !important;
	width: 100%;
}

/* =============================================================
   Section transitions — declared on BASE state so they apply
   in both directions (scroll-down and scroll-up).
   ============================================================= */
.elementor-location-header > section.elementor-section,
.elementor-location-header .elementor-section.elementor-top-section {
	transition:
		padding var(--header-dur) var(--header-ease),
		background-color var(--header-dur) var(--header-ease),
		-webkit-backdrop-filter var(--header-dur) var(--header-ease),
		backdrop-filter var(--header-dur) var(--header-ease),
		border-color var(--header-dur) var(--header-ease),
		border-width var(--header-dur) var(--header-ease),
		box-shadow var(--header-dur) var(--header-ease);
}

/* =============================================================
   Sticky-on-scroll: editorial hairline.
   Deep marine-900 frosted glass, hairline gold border-bottom.
   ============================================================= */
.elementor-location-header .elementor-section.elementor-sticky--effects {
	background-color: rgba(4, 11, 22, 0.78) !important;
	-webkit-backdrop-filter: blur(16px) saturate(140%);
	backdrop-filter: blur(16px) saturate(140%);
	border-bottom: 1px solid var(--bz-or-55);
	box-shadow: none !important;
	/* Tightened from 6 → 4 px so the sticky bar reads as a hairline
	   rail instead of a band — the visitor's content stays the focus
	   on scroll. */
	padding-top: 4px !important;
	padding-bottom: 4px !important;
}

/* Shrink the menu item touch-target on sticky from 12 → 8 px each
   side, so the bar height is driven by the small logo + label height
   not by the navigation item padding. */
.elementor-location-header .elementor-sticky--effects .elementor-nav-menu > li > a {
	padding-top: 8px !important;
	padding-bottom: 8px !important;
}

/* Sticky: lock the logo anchor to the hex's visual size so the bg
   image (44 × 44 hex) sits centered on the nav-item baseline instead
   of being pushed up by the still-laid-out 48 px wordmark IMG. The
   wordmark IMG keeps width 84 + opacity 0 (so the morph animation
   still plays in reverse on scroll-up), but is taken out of flow
   here so it can't dictate the anchor height. The widget itself is
   forced to align to centre so the anchor sits on the section
   midline, matching the menu items. */
.elementor-location-header .elementor-sticky--effects .elementor-widget-image {
	align-self: center;
}
.elementor-location-header .elementor-sticky--effects .elementor-widget-image .elementor-widget-container {
	display: flex;
	align-items: center;
	min-height: 44px;
}
.elementor-location-header .elementor-sticky--effects .elementor-widget-image a {
	display: inline-flex;
	align-items: center;
	min-width: 44px;
	width: 44px;
	min-height: 44px;
	height: 44px;
	margin-top: auto;
	margin-bottom: auto;
}
.elementor-location-header .elementor-sticky--effects .elementor-widget-image img {
	position: absolute;
}

/* Vertical centring: Elementor compiles `align-items: middle` on each
   column wrap for this header (invalid CSS value), so the browser
   falls back to `flex-start` and the menu floats to the top of the
   bar. Force a real `center` here so the logo and menu align on the
   same horizontal mid-line in both rest and sticky states. */
.elementor-location-header .elementor-column > .elementor-widget-wrap,
.elementor-location-header .elementor-column > .elementor-widget-wrap.elementor-element-populated {
	align-content: center !important;
	align-items: center !important;
}


@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.elementor-location-header .elementor-section.elementor-sticky--effects {
		background-color: rgba(4, 11, 22, 0.96) !important;
	}
}

/* =============================================================
   Menu items — base transitions for color, size, letter-spacing.
   These apply in BOTH directions (rest ⇄ sticky).
   ============================================================= */
.elementor-location-header .elementor-nav-menu > li > a {
	transition:
		color var(--header-dur) var(--header-ease),
		font-size var(--header-dur) var(--header-ease),
		letter-spacing var(--header-dur) var(--header-ease),
		padding var(--header-dur) var(--header-ease) !important;
}

/* Sticky menu styling — UPPERCASE, gold, lighter weight, wider tracking */
.elementor-location-header .elementor-sticky--effects .elementor-nav-menu > li > a {
	color: var(--bz-or, #B89D64) !important;
	text-transform: uppercase !important;
	font-weight: 400 !important;
	font-size: 12px !important;
	letter-spacing: 0.18em !important;
}

/* Sticky hover inversion: gold → cream */
.elementor-location-header .elementor-sticky--effects .elementor-nav-menu > li > a:hover,
.elementor-location-header .elementor-sticky--effects .elementor-nav-menu > li.current-menu-item > a {
	color: var(--bz-creme, #F4F1EA) !important;
}

/* Pointer underline: grow from left, gold, hairline */
.elementor-location-header .elementor-sticky--effects .elementor-nav-menu > li > a::before,
.elementor-location-header .elementor-sticky--effects .elementor-nav-menu > li > a::after {
	transform-origin: left center !important;
	background-color: rgba(184, 157, 100, 0.95) !important;
	height: 1px !important;
	transition: transform var(--header-dur) var(--header-ease) !important;
}

/* Center menu items in their column when sticky (matches the rest state) */
.elementor-location-header .elementor-sticky--effects .elementor-widget-nav-menu .elementor-nav-menu--main {
	justify-content: center !important;
}

/* =============================================================
   Logo morph — single-element scale transform on scroll (L2).
   Updated 2026-05-08 — replaces the previous dual-element trick
   (IMG fade-out + background-image fade-in) which made the B
   visibly clignote at mid-transition because the two layers sat
   at different positions (img left, bg centered).

   Now we keep the IMG visible in both states and just shrink it
   in place on sticky via transform: scale(). GPU-accelerated,
   no fade, no swap, no flicker. The data-tone filter on the IMG
   handles light/dark color changes.
   ============================================================= */
.elementor-location-header .elementor-widget-image a {
	display: inline-flex;
	align-items: center;
	position: relative;
	min-height: 40px;
	/* No more background-image trick — the IMG carries the visual
	   weight in both states. */
}

.elementor-location-header .elementor-widget-image img {
	display: block;
	transform-origin: left center;
	transition: transform var(--header-dur) var(--header-ease);
	will-change: transform;
}

/* Elementor per-post CSS sets `width: 140 px` on the header image widget
   (post-16.css → .elementor-16 .elementor-element.elementor-element-c50c56e img).
   That comes from the widget's image_size setting and we'd need to edit
   the Elementor data to suppress it. Instead, override with matching
   specificity (3 class selectors) so the hex sits at an editorial size
   in the header. Updated 2026-05-08 — 36 px reads as a discrete mark. */
.elementor-16.elementor-16 .elementor-element.elementor-element-c50c56e img {
	width: 44px;
	height: auto;
}

/* Sticky: shrink the IMG in place via transform (origin: left center).
   44 × 0.75 ≈ 33 px — discrete enough for a tighter sticky bar,
   bold enough to remain a present mark. */
.elementor-location-header .elementor-sticky--effects .elementor-widget-image img {
	transform: scale(0.75);
}

/* =============================================================
   Sub-menu dropdown — editorial-coherent with the sticky menu.
   UPPERCASE, wide tracking, hairline gold separators, marine-900
   frosted glass background, gold accent border-left signature.
   ============================================================= */
.elementor-location-header .elementor-nav-menu--dropdown,
.elementor-location-header .sub-menu {
	background-color: rgba(4, 11, 22, 0.78) !important;
	-webkit-backdrop-filter: blur(16px) saturate(140%);
	backdrop-filter: blur(16px) saturate(140%);
	border-left: 2px solid var(--bz-or, #B89D64);
	border-top: 1px solid rgba(184, 157, 100, 0.4);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32);
	min-width: 280px;
	padding: 0 !important;
}

/* No-backdrop-filter fallback — solidify the dropdown so type stays
   readable even when transparency degrades. Mirrors the same fallback
   we apply on the sticky header itself. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.elementor-location-header .elementor-nav-menu--dropdown,
	.elementor-location-header .sub-menu {
		background-color: rgba(4, 11, 22, 0.96) !important;
	}
}

/* Light-tone pages — flip the dropdown background to the same cream-frost
   used by the sticky header on `[data-tone="light"]` so opening the menu
   on a white/cream page section reads as one coherent surface, not two
   stacked blocks (dark dropdown floating over cream header). The text
   inside flips to marine for contrast (handled below). */
.elementor-location-header[data-tone="light"] .elementor-nav-menu--dropdown,
.elementor-location-header[data-tone="light"] .sub-menu {
	background-color: rgba(239, 233, 221, 0.85) !important;
	border-top-color: var(--bz-marine-18);
	box-shadow: 0 12px 28px rgba(11, 30, 56, 0.20);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.elementor-location-header[data-tone="light"] .elementor-nav-menu--dropdown,
	.elementor-location-header[data-tone="light"] .sub-menu {
		background-color: rgba(239, 233, 221, 0.97) !important;
	}
}

/* Light-tone dropdown links — cream → marine. Hover/active stays gold so
   the chromatic accent remains identical across both tones. */
.elementor-location-header[data-tone="light"] .sub-menu li a,
.elementor-location-header[data-tone="light"] .sub-menu .elementor-item {
	color: var(--bz-marine, #0B1E38) !important;
}

.elementor-location-header[data-tone="light"] .sub-menu li:not(.current-menu-item) > a:hover {
	background-color: rgba(184, 157, 100, 0.10) !important;
}

.elementor-location-header[data-tone="light"] .sub-menu li {
	border-bottom-color: rgba(11, 30, 56, 0.10);
}

/* Hairline separator between items (last item has none) */
.elementor-location-header .sub-menu li {
	border-bottom: 1px solid rgba(184, 157, 100, 0.12);
}
.elementor-location-header .sub-menu li:last-child {
	border-bottom: 0;
}

.elementor-location-header .sub-menu li a,
.elementor-location-header .sub-menu .elementor-item {
	display: flex !important;
	align-items: center;
	gap: 16px;
	color: var(--bz-creme, #F4F1EA) !important;
	background-color: transparent !important;
	font-family: "Montserrat", system-ui, sans-serif !important;
	font-size: 12px !important;
	font-weight: 400 !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase !important;
	padding: 16px 28px !important;
	border: 0 !important;
	box-shadow: inset 0 0 0 transparent;
	transition:
		color 240ms var(--header-ease),
		padding-left 240ms var(--header-ease),
		background-color 240ms var(--header-ease),
		box-shadow 240ms var(--header-ease);
}

/* Right-side arrow (→) — sits in flex flow with margin-left:auto so it
   ALWAYS reserves its space at the right edge of the link, even when
   invisible. Text never extends into the arrow zone. */
.elementor-location-header .sub-menu li > a::after,
.elementor-location-header .sub-menu .elementor-item::after {
	content: '→';
	margin-left: auto;
	color: var(--bz-or, #B89D64);
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0;
	flex-shrink: 0;
	opacity: 0;
	transform: translateX(-8px);
	transition:
		opacity 240ms var(--header-ease),
		transform 240ms var(--header-ease);
	pointer-events: none;
}

/* === ACTIVE state (current page — "you are here") =============
   3px gold bar on the left + tinted background + persistent gold
   text. Even without hover, this item is visually anchored.       */
.elementor-location-header .sub-menu li.current-menu-item > a,
.elementor-location-header .sub-menu .elementor-item.elementor-item-active {
	color: var(--bz-or, #B89D64) !important;
	background-color: rgba(184, 157, 100, 0.18) !important;
	box-shadow: inset 3px 0 0 var(--bz-or, #B89D64) !important;
	padding-left: 36px !important;
}

/* === HOVER state (intent to navigate) =========================
   Cream → gold, padding shift, arrow → slides in on the right.
   Excludes current-menu-item so the active styling stays distinct. */
.elementor-location-header .sub-menu li:not(.current-menu-item) > a:hover {
	color: var(--bz-or, #B89D64) !important;
	background-color: rgba(184, 157, 100, 0.08) !important;
	padding-left: 36px !important;
}

.elementor-location-header .sub-menu li:not(.current-menu-item) > a:hover::after {
	opacity: 1;
	transform: translateX(0);
}

/* =============================================================
   Desktop layout — menu centered in its column, both states.
   ============================================================= */
@media (min-width: 961px) {
	.elementor-location-header > section.elementor-section,
	.elementor-location-header .elementor-section.elementor-top-section {
		padding-right: 24px !important;
	}
	.elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--main {
		justify-content: center !important;
	}
	/* Sub-menu opens RIGHTWARD from the parent item: left edge of the
	   dropdown aligned with the left edge of "Services" trigger. */
	.elementor-location-header .elementor-nav-menu--dropdown,
	.elementor-location-header .sub-menu {
		left: 0 !important;
		right: auto !important;
	}
}

/* =============================================================
   Mobile: ditch the overlay tricks, keep readable.
   ============================================================= */
@media (max-width: 960px) {
	body.page-template-elementor_header_footer .elementor-location-header {
		position: relative;
	}
	body.page-template-elementor_header_footer .elementor-location-header .elementor-section,
	body.page-template-elementor_header_footer .elementor-location-header > section.elementor-section {
		background-color: var(--bz-marine, #0B1E38) !important;
	}
}

/* =============================================================
   Tone-aware header — when the section behind is light (cream),
   header switches to marine glass + marine links. JS sets
   data-tone="light"|"dark" on .elementor-location-header.
   Default (no attribute, or "dark") keeps the existing behavior.
   ============================================================= */
.elementor-location-header[data-tone="light"] .elementor-section.elementor-sticky--effects {
	background-color: rgba(239, 233, 221, 0.55) !important;
	border-bottom-color: rgba(11, 30, 56, 0.30);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.elementor-location-header[data-tone="light"] .elementor-section.elementor-sticky--effects {
		background-color: rgba(239, 233, 221, 0.92) !important;
	}
}

/* Menu links: marine on light, hover/current = gold */
.elementor-location-header[data-tone="light"] .elementor-sticky--effects .elementor-nav-menu > li > a {
	color: var(--bz-marine, #0B1E38) !important;
}

.elementor-location-header[data-tone="light"] .elementor-sticky--effects .elementor-nav-menu > li > a:hover,
.elementor-location-header[data-tone="light"] .elementor-sticky--effects .elementor-nav-menu > li.current-menu-item > a {
	color: var(--bz-or, #B89D64) !important;
}

/* Logo wordmark — swap to the marine SVG variant when over light bg.
   `content: url()` replaces the rendered IMG payload while keeping the
   widget's intrinsic sizing rules intact. */
.elementor-location-header[data-tone="light"] .elementor-widget-image img {
	content: url("../img/bazinet-icon-bleu.svg");
	filter: none;
}

/* Hex B icon tone — handled entirely by the [data-tone="light"]
   filter on the IMG above (the marine SVG bg-image swap was part
   of the old dual-element morph and is no longer needed since the
   IMG persists in both states). */

/* ============================================================
   Service pages (Prevhub, Audit, Réputation) + À propos all have
   a HERO PHOTO occupying the right half of the viewport. The
   header sits absolute over both halves — left = marine bg, right
   = photo. Default nav text is dark grey (#4A4A4A) which becomes
   INVISIBLE over the bright photo half (issue: "menu brisé").

   Fix: force cream nav text at rest on these pages. The header-tone
   JS still switches to marine when scrolled into a light section.
   ============================================================ */
body.bz-prevhub .elementor-location-header:not([data-tone="light"]) .elementor-nav-menu--main .elementor-item,
body.bz-audit-et-optimisation .elementor-location-header:not([data-tone="light"]) .elementor-nav-menu--main .elementor-item,
body.bz-reputation-en-ligne .elementor-location-header:not([data-tone="light"]) .elementor-nav-menu--main .elementor-item,
body.bz-a-propos .elementor-location-header:not([data-tone="light"]) .elementor-nav-menu--main .elementor-item {
	color: var(--bz-or, #B89D64) !important;
	text-shadow: 0 1px 8px rgba(11, 30, 56, 0.45);
}

/* Hover on these pages — passage gold → cream pour qu'on voit le
   changement de couleur au survol (avant : hover et défaut étaient
   tous deux gold = aucun feedback visuel). 2026-05-21 user report. */
body.bz-prevhub .elementor-location-header:not([data-tone="light"]) .elementor-nav-menu--main .elementor-item:hover,
body.bz-audit-et-optimisation .elementor-location-header:not([data-tone="light"]) .elementor-nav-menu--main .elementor-item:hover,
body.bz-reputation-en-ligne .elementor-location-header:not([data-tone="light"]) .elementor-nav-menu--main .elementor-item:hover,
body.bz-a-propos .elementor-location-header:not([data-tone="light"]) .elementor-nav-menu--main .elementor-item:hover {
	color: var(--bz-creme, #F4F1EA) !important;
}

/* Legal pages have a permanently light background (no marine hero), so the
   nav text must stay readable at rest — force marine. Hover → gold. */
body.bz-mentions-legales .elementor-location-header .elementor-nav-menu--main .elementor-item,
body.bz-politique-de-confidentialite .elementor-location-header .elementor-nav-menu--main .elementor-item {
	color: var(--bz-marine, #0B1E38) !important;
}
body.bz-mentions-legales .elementor-location-header .elementor-nav-menu--main .elementor-item:hover,
body.bz-mentions-legales .elementor-location-header .elementor-nav-menu--main .current-menu-item > .elementor-item,
body.bz-politique-de-confidentialite .elementor-location-header .elementor-nav-menu--main .elementor-item:hover,
body.bz-politique-de-confidentialite .elementor-location-header .elementor-nav-menu--main .current-menu-item > .elementor-item {
	color: var(--bz-or, #B89D64) !important;
}