@charset "UTF-8";
/* =============================================================
   BRAND LIGHT — visual cohesion layer
   Concept: "Pour ceux qui n'éteignent pas la lumière."

   The site already establishes light through hero photography and
   gold accents. This file pushes the metaphor across every dark
   marine section: a single tungsten lamp pool reads as the same
   warm ceiling fixture from page to page, regardless of the
   editorial content underneath. Plus reveal pacing slowed and
   warmed, hover state on CTAs lit like an ember.

   Loaded after components.css / page-specific CSS so it can
   over-layer ambient lighting on existing sections.
   ============================================================= */

/* ============================================================
   A1 — Tungsten lamp pool
   Soft radial gold gradient at the top-centre of every marine
   narrative section. Reads as "the lamp above the bar." Excludes
   hero sections (those carry their own light through photography)
   and excludes the audit menu/bilan paperwork blocks (cream cards
   that live INSIDE marine sections — pool would conflict).
   ============================================================= */
/* Position scaffold for every section that gets the unified lamp
   pool. Heroes are excluded (own light from photography). The home
   page sections that previously carried their own pools from
   components.css are now folded into the same unified pool so the
   lamp reads identically across the brand. Only true marine
   narrative sections are included — cream CTAs / bridge sections
   keep their own ambient treatment. */
body.bz-prevhub .ph-sec--marine,
body.bz-audit-et-optimisation .ph-sec--marine,
body.bz-reputation-en-ligne .ph-sec--marine,
body.bz-a-propos .ap-sec--marine,
body.bz-home .sec.pb,
body.bz-home .pq,
body.bz-home .home-cta-sec,
body.bz-home .svc,
.intermezzo,
.bz-cross-sell {
	position: relative;
	isolation: isolate;
}

/* Unified lamp pool — user feedback 2026-05-06: light should sit
   on the section title, not bleed from the top edge. The radial
   centre is anchored at 22% from the top (the band where titles
   typically live across all our marine sections); no more linear
   top-bleed. Reads as a projector aimed at the headline rather
   than ambient ceiling light. */
body.bz-prevhub .ph-sec--marine:not(.ph-hero):not(.ph-genese--band)::before,
body.bz-audit-et-optimisation .ph-sec--marine:not(.au-hero):not(.ph-genese--band)::before,
body.bz-reputation-en-ligne .ph-sec--marine:not(.re-hero):not(.ph-genese--band)::before,
body.bz-a-propos .ap-sec--marine::before,
body.bz-home .sec.pb::before,
body.bz-home .pq::before,
body.bz-home .home-cta-sec::before,
body.bz-home .svc::before,
.intermezzo::before,
.bz-cross-sell::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(
			700px 380px at 50% 22%,
			rgba(184, 157, 100, 0.11) 0%,
			rgba(184, 157, 100, 0.06) 22%,
			rgba(184, 157, 100, 0.022) 50%,
			transparent 75%
		) !important;
	pointer-events: none;
	z-index: 0;
}

/* Per-section override: ap-equipe is unusually tall (~2944 px),
   so the default 22 % anchor lands on the David portrait band
   rather than the section title. Pull it up to 8 % so the lamp
   sits on "L'équipe d'experts". */
body.bz-a-propos .ap-equipe::before {
	background:
		radial-gradient(
			700px 380px at 50% 8%,
			rgba(184, 157, 100, 0.11) 0%,
			rgba(184, 157, 100, 0.06) 22%,
			rgba(184, 157, 100, 0.022) 50%,
			transparent 75%
		) !important;
}

/* Make sure the section's content sits above the pool. Sections
   with internal absolute-positioned layering (intermezzo bg photo,
   ph-genese--band photo + scrim + floating text) are excluded:
   forcing position:relative + z-index:1 on their elementor-container
   would clobber their layout and put the scrim on top of the text. */
body.bz-prevhub .ph-sec--marine:not(.ph-genese--band) > *,
body.bz-audit-et-optimisation .ph-sec--marine:not(.ph-genese--band) > *,
body.bz-reputation-en-ligne .ph-sec--marine:not(.ph-genese--band) > *,
body.bz-a-propos .ap-sec--marine > *,
body.bz-home .sec.pb > *,
body.bz-home .pq > *,
body.bz-home .svc > *,
body.bz-home .home-cta-sec > *,
.bz-cross-sell > * {
	position: relative;
	z-index: 1;
}

/* ============================================================
   A4 — Hover ember
   CTAs gain a soft warm halo on hover, like a coal catching air.
   Replaces the previous hard color-only state.
   ============================================================= */
/* Ghost selectors `.au-cta` / `.re-cta` were removed: those classes
   never existed in the rendered DOM (Audit + Réputation use the
   shared `.ph-cta-arrow` class). Round 10 polish 2026-05-08. */
.bz-cta,
.ph-cta-arrow,
.svc__cta,
.bz-mobile-drawer__brand,
.elementor-button[type="submit"],
.bz-floating-cta,
.bz-back-to-top {
	transition:
		color 320ms var(--ease, cubic-bezier(0.3, 0, 0, 1)),
		border-color 320ms var(--ease, cubic-bezier(0.3, 0, 0, 1)),
		background-color 320ms var(--ease, cubic-bezier(0.3, 0, 0, 1)),
		box-shadow 480ms var(--ease, cubic-bezier(0.3, 0, 0, 1));
}

.bz-cta:hover,
.ph-cta-arrow:hover,
.svc__cta:hover {
	box-shadow:
		0 0 0 1px var(--bz-or-55),
		0 0 26px -6px rgba(184, 157, 100, 0.40);
}

.elementor-button[type="submit"]:hover,
.bz-floating-cta:hover,
.bz-back-to-top:hover {
	box-shadow:
		0 0 0 1px rgba(184, 157, 100, 0.65),
		0 0 32px -4px rgba(184, 157, 100, 0.45);
}

/* ============================================================
   A3 — Reveal pacing: slower, warmer
   Override the global reveal timing so on-scroll entrance feels
   like a tungsten filament warming up rather than a snap-in.
   ============================================================= */
[data-reveal] {
	transition-duration: 1000ms !important;
	transition-timing-function: cubic-bezier(0.16, 0.84, 0.24, 1) !important;
}
@media (prefers-reduced-motion: reduce) {
	[data-reveal] {
		transition: none !important;
	}
}

/* ============================================================
   A2 — Cinematic vignette on hero photos
   Subtle inner shadow on hero imagery so they read like film
   stills — corners darken, centre stays lit. Excludes the home
   carousel slides (their position:absolute layout would break)
   AND skips the slides because the slide image we generate already
   has cinematic lighting baked in via the prompt.
   ============================================================= */
.au-hero__col-photo::after,
.re-hero__col-photo::after,
.ap-hero__photo-col::after,
body.bz-contact .bz-contact-hero__photo-col::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(
		ellipse at center,
		transparent 55%,
		rgba(4, 11, 22, 0.28) 100%
	);
	pointer-events: none;
	z-index: 1;
}

/* Ensure hero text/glass overlays still sit above the vignette */
.au-hero__col-text,
.re-hero__col-text,
.ap-hero__text-col,
body.bz-contact .bz-contact-hero__text-col {
	z-index: 2;
}

/* ============================================================
   C6 — Form focus: projecteur on the active field
   The form is the moment a visitor reaches out. Make each focused
   field feel like a lamp turning toward it: gold border thickens,
   soft outer glow appears, label brightens.
   ============================================================= */
.bz-contact-form input[type="text"],
.bz-contact-form input[type="email"],
.bz-contact-form input[type="tel"],
.bz-contact-form input[type="url"],
.bz-contact-form textarea,
.bz-contact-form select {
	transition:
		border-color 320ms var(--ease, cubic-bezier(0.3, 0, 0, 1)),
		box-shadow 480ms var(--ease, cubic-bezier(0.3, 0, 0, 1)),
		background-color 320ms var(--ease, cubic-bezier(0.3, 0, 0, 1));
}

.bz-contact-form input[type="text"]:focus,
.bz-contact-form input[type="email"]:focus,
.bz-contact-form input[type="tel"]:focus,
.bz-contact-form input[type="url"]:focus,
.bz-contact-form textarea:focus,
.bz-contact-form select:focus {
	outline: none !important;
	border-color: rgba(184, 157, 100, 0.85) !important;
	box-shadow:
		0 0 0 1px var(--bz-or-55),
		0 0 18px -4px rgba(184, 157, 100, 0.35) !important;
}

/* Label brightens to gold when its field has focus (sibling
   selector lifts it without JavaScript). */
.bz-contact-form .elementor-field-group:focus-within > .elementor-field-label {
	color: var(--bz-or, #B89D64) !important;
	transition: color 320ms var(--ease, cubic-bezier(0.3, 0, 0, 1));
}

/* ============================================================
   A6 — Hairline gold transition between marine ↔ cream sections
   A 1px gold filament fading at both ends bridges the tonal jump
   between dark and light grounds. Reads like a tungsten thread
   guiding the eye from one chapter to the next.
   ============================================================= */
.ph-sec--marine + .ph-sec--cream,
.ph-sec--cream + .ph-sec--marine,
.ap-sec--marine + .ap-sec--cream,
.ap-sec--cream + .ap-sec--marine {
	position: relative;
}

.ph-sec--marine + .ph-sec--cream::before,
.ph-sec--cream + .ph-sec--marine::before,
.ap-sec--marine + .ap-sec--cream::before,
.ap-sec--cream + .ap-sec--marine::before {
	content: "";
	position: absolute;
	top: 0;
	left: 14%;
	right: 14%;
	height: 1px;
	background: linear-gradient(
		to right,
		transparent 0%,
		rgba(184, 157, 100, 0.35) 12%,
		rgba(184, 157, 100, 0.85) 50%,
		rgba(184, 157, 100, 0.35) 88%,
		transparent 100%
	);
	z-index: 3;
	pointer-events: none;
}

/* ============================================================
   C1 — Services home: invert cream → marine + cream paper cards
   The previous cream block created a hard tonal break between
   Constat (dark) and Pourquoi Bazinet (dark). Now the section
   reads as one continuous "night" zone with three cream papers
   floating on it, lit from above. Same paperwork language as
   the Audit menu/receipt — visual cohesion across the brand.
   ============================================================= */
.svc {
	background: var(--bz-marine, #0B1E38);
	color: var(--bz-creme, #F4F1EA);
}

/* The cream-on-cream stripe pattern from components.css is replaced
   by the unified lamp pool defined at the top of this file (the
   body.bz-home .svc::before selector). */

/* Title and intro colours flip for the dark ground. */
.svc__title {
	color: var(--bz-creme, #F4F1EA);
}

.svc__intro {
	color: rgba(244, 241, 234, 0.80);
}

/* Grid drops the cream-divider trick (now invisible on marine),
   and gains real spacing between the floating cards. */
.svc__grid {
	background: transparent;
	border-top: 0;
	border-bottom: 0;
	gap: clamp(20px, 1.6vw, 32px);
	padding: 0;
}

/* Each card is a cream paper floating on marine. Soft warm-rim
   border, dual-layer shadow for depth, slight translate-y on
   hover (ember-like lift). The section's cream-on-marine
   inheritance is reset here to marine-on-cream inside the card. */
.svc__card {
	background: var(--bz-creme-2, #EFE9DD);
	color: var(--bz-marine, #0B1E38);
	border: 1px solid var(--bz-or-30);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.55) inset,
		0 4px 14px rgba(4, 11, 22, 0.30),
		0 24px 56px -18px rgba(4, 11, 22, 0.55);
	transition:
		background 420ms var(--ease, cubic-bezier(0.3, 0, 0, 1)),
		border-color 420ms var(--ease),
		box-shadow 480ms var(--ease),
		transform 480ms var(--ease);
}

/* Text inside the card defaults to marine; specific elements that
   need a softer tone (italic subtitles, body text) get explicit
   colours from the existing CSS. */
.svc__card .svc__name,
.svc__card h3 {
	color: var(--bz-marine, #0B1E38) !important;
}
.svc__card .svc__tag,
.svc__card .svc__accroche,
.svc__card .svc__corps {
	color: var(--bz-titane, #4A4A4A) !important;
}
.svc__card .svc__cta {
	color: var(--bz-marine, #0B1E38) !important;
	border-top-color: rgba(11, 30, 56, 0.20) !important;
}
.svc__card .svc__cta:hover {
	color: var(--bz-or, #B89D64) !important;
}

.svc__card:hover,
.svc__card[data-svc-state="open"] {
	background: var(--bz-creme-3, #E4DCC9);
	border-color: var(--bz-or-55);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.65) inset,
		0 6px 18px rgba(4, 11, 22, 0.35),
		0 32px 72px -16px rgba(4, 11, 22, 0.65),
		0 0 38px -10px rgba(184, 157, 100, 0.40);
}

.svc__card:hover {
	transform: translateY(-2px);
}

/* On mobile the cards stack — keep the spacing comfortable. Also
   force solid cream for the open state on touch devices, where
   the accordion auto-opens and the previous white-alpha would
   read as muted gray on the marine ground. */
@media (max-width: 720px) {
	.svc__grid {
		grid-template-columns: 1fr;
		/* P3 · 18 → 24 px gap for more breathing between stacked
		   service cards on mobile (round 3 polish 2026-05-08). */
		gap: 24px;
		padding: 0 4px;
	}
	.svc__card[data-svc-state="open"] {
		background: var(--bz-creme-2, #EFE9DD);
		border-color: rgba(184, 157, 100, 0.40);
	}
}

/* Filler 4th cell on PC — match the cream paper aesthetic of the
   real cards. Reads as a quote anchor in the same tonal family
   as the 3 service cards beside it; no hover lift so it stays
   visually inert (it isn't a clickable card).
   A small gold diamond watermark at top-centre marks it as an
   editorial anchor so it doesn't read as an empty card next to
   the 3 service cards beside it. */
@media (min-width: 961px) {
	.svc__grid::after {
		background:
			url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><rect x='2' y='2' width='10' height='10' transform='rotate(45 7 7)' fill='%23B89D64' opacity='0.85'/></svg>") no-repeat center top 32px / 14px 14px,
			var(--bz-creme-2, #EFE9DD) !important;
		color: var(--bz-titane, #4A4A4A) !important;
		border: 1px solid var(--bz-or-30) !important;
		box-shadow:
			0 1px 0 rgba(255, 255, 255, 0.55) inset,
			0 4px 14px rgba(4, 11, 22, 0.30),
			0 24px 56px -18px rgba(4, 11, 22, 0.55) !important;
	}
}

/* Passerelle widget retired — kept hidden until full removal.
   See HEALTH-5: render() returns early in class-passerelle.php. */
.passerelle,
.passerelle__pcb {
	display: none !important;
}

/* ============================================================
   Origine bands — strengthened scrim (2026-05-06)
   The new ambient lamp pool brightened nearby sections, making
   the relatively soft origine scrim (rgba(11,30,56,0.35→0.85))
   read as too thin: the photo backdrop bled through the quote
   text. Bumping the scrim to a deeper marine (#040B16) at higher
   opacity restores legibility without changing the art direction.
   ============================================================ */
body.bz-prevhub .ph-genese--band::after,
body.bz-audit-et-optimisation .ph-genese--band::after,
body.bz-reputation-en-ligne .re-origine.ph-genese--band::after {
	background: linear-gradient(180deg,
		rgba(4, 11, 22, 0.20) 0%,
		rgba(4, 11, 22, 0.55) 55%,
		rgba(4, 11, 22, 0.85) 100%) !important;
}

/* Local vignette focused at the bottom-left where the quote text
   anchors — adds a darker patch behind the words while keeping the
   top-right photo area visible (the lamp + counter scene). */
body.bz-prevhub .ph-genese--band,
body.bz-audit-et-optimisation .ph-genese--band,
body.bz-reputation-en-ligne .re-origine.ph-genese--band {
	position: relative;
}

body.bz-prevhub .ph-genese--band .ph-genese-text::before,
body.bz-audit-et-optimisation .ph-genese--band .ph-genese-text::before,
body.bz-reputation-en-ligne .re-origine.ph-genese--band .ph-genese-text::before {
	content: none;
}

/* ============================================================
   B1 — italic-or in body copy
   The page-specific CSS only colours em accents inside .ph-title,
   .ph-sec-title, .ph-cta-title (i.e. headings). Body paragraphs
   have no em styling rule, so accents added in the editorial pass
   (2026-05-06) render as plain cream italic.

   This rule colours every em inside a body paragraph or HTML widget
   gold (or amber on Prevhub) so the editorial accent reads as the
   intended typographic emphasis. Scoped narrowly to body copy via
   parent-element selectors so it doesn't double up on heading ems.
   ============================================================ */
.pb__closer em,
.pb__lead em,
.pq__body p em,
.pq__lead em,
.au-bilan__context em,
.au-methode__lead em,
.au-retour__lead em,
.re-passant__lead em,
.re-panneaux__lead em,
.re-eclairage__lead em,
.ap-mission__body em,
.bz-cross-sell__lead em,
.elementor-widget-text-editor p em,
.elementor-widget-html p em {
	color: var(--bz-or, #B89D64);
	font-style: italic;
	font-weight: 400;
}

/* On Prevhub the em accent is amber, not gold (per C2 decision). */
body.bz-prevhub .pb__closer em,
body.bz-prevhub .pq__body p em,
body.bz-prevhub .ph-reponse em,
body.bz-prevhub .ph-modes-sec em,
body.bz-prevhub .ph-partners em,
body.bz-prevhub .elementor-widget-text-editor p em,
body.bz-prevhub .elementor-widget-html p em {
	color: #C4821A;
}

/* ============================================================
   PREVHUB — amber accent override
   The client wants the Prevhub page on amber (#C4821A) rather
   than the standard brand gold (#B89D64). The page-level content
   already uses amber via prevhub-page.css; this block carries the
   amber across the cross-cutting layers we own here in brand-light:
   the lamp pool, hover ember, cross-sell cards, and floating CTAs.
   Global chrome (header menu, footer, mobile drawer) stays gold so
   navigation reads consistently across the whole site.
   ============================================================ */
body.bz-prevhub .ph-sec--marine:not(.ph-hero):not(.ph-genese--band)::before,
body.bz-prevhub .bz-cross-sell::before {
	background:
		radial-gradient(
			700px 380px at 50% 22%,
			rgba(196, 130, 26, 0.20) 0%,
			rgba(196, 130, 26, 0.10) 22%,
			rgba(196, 130, 26, 0.03) 50%,
			transparent 75%
		) !important;
}

body.bz-prevhub .bz-cta:hover,
body.bz-prevhub .ph-cta-arrow:hover,
body.bz-prevhub .svc__cta:hover {
	box-shadow:
		0 0 0 1px rgba(196, 130, 26, 0.55),
		0 0 26px -6px rgba(196, 130, 26, 0.40);
}

body.bz-prevhub .elementor-button[type="submit"]:hover,
body.bz-prevhub .bz-floating-cta:hover,
body.bz-prevhub .bz-back-to-top:hover {
	box-shadow:
		0 0 0 1px rgba(196, 130, 26, 0.65),
		0 0 32px -4px rgba(196, 130, 26, 0.45);
}

body.bz-prevhub .bz-cross-sell__card {
	border-color: rgba(196, 130, 26, 0.22);
}

body.bz-prevhub .bz-cross-sell__card:hover {
	border-color: rgba(196, 130, 26, 0.55);
}

/* Form focus on the Prevhub CTA → amber tint */
body.bz-prevhub .bz-contact-form input:focus,
body.bz-prevhub .bz-contact-form textarea:focus,
body.bz-prevhub .bz-contact-form select:focus {
	border-color: rgba(196, 130, 26, 0.85) !important;
	box-shadow:
		0 0 0 1px rgba(196, 130, 26, 0.55),
		0 0 18px -4px rgba(196, 130, 26, 0.35) !important;
}

body.bz-prevhub .bz-contact-form .elementor-field-group:focus-within > .elementor-field-label {
	color: #C4821A !important;
}

/* ============================================================
   A1 — Tungsten lamp pool, mobile recalibration
   Desktop anchors the pool at `50% 22%` of section height. On
   mobile, sections stack vertically and become 1500–2500 px tall,
   so 22 % lands hundreds of pixels below the title — the lamp
   pools on random body copy instead of the headline.
   Re-anchor in pixels from the top so the light always sits on
   the eyebrow + title band, regardless of section length.
   Default mobile section padding-top is clamp(96px, 14vh, 130px),
   plus an eyebrow (~20 px) — title centre lives around 140–180 px.
   ============================================================ */
@media (max-width: 720px) {
	body.bz-prevhub .ph-sec--marine:not(.ph-hero):not(.ph-genese--band)::before,
	body.bz-audit-et-optimisation .ph-sec--marine:not(.au-hero):not(.ph-genese--band)::before,
	body.bz-reputation-en-ligne .ph-sec--marine:not(.re-hero):not(.ph-genese--band)::before,
	body.bz-a-propos .ap-sec--marine::before,
	body.bz-a-propos .ap-equipe::before,
	body.bz-home .sec.pb::before,
	body.bz-home .pq::before,
	body.bz-home .home-cta-sec::before,
	body.bz-home .svc::before,
	.intermezzo::before,
	.bz-cross-sell::before {
		background:
			radial-gradient(
				460px 320px at 50% 130px,
				rgba(184, 157, 100, 0.13) 0%,
				rgba(184, 157, 100, 0.06) 28%,
				rgba(184, 157, 100, 0.022) 60%,
				transparent 85%
			) !important;
	}

	/* Cross-sell ("Découvrir nos services") suit toujours une autre
	   section marine (CTA, intermezzo, etc.). Sur mobile la lampe s'y
	   coupait net à la jonction et ne s'étendait pas sur la section
	   du dessus → effet "lampe orpheline" bizarre. On la coupe
	   complètement sur mobile pour les cross-sell de toutes les pages.
	   Le losange or à la frontière (home-overrides.css) gère la
	   transition visuelle entre les 2 sections marine. */
	.bz-cross-sell::before {
		background: none !important;
	}
}

/* =============================================================
   Filet → middle-dot conversion (client request 2026-05-13)
   The decorative ::before/::after gold hairline that prefixes
   every eyebrow used to read like an em-dash AI-tell. We swap
   the line for a middle-dot `·` glyph, preserving structural
   hierarchy (chapter-marker feel) without the linear-dash
   association. Wide selector list to catch every variant that
   currently renders a filet across the site.
   ============================================================= */
.eyebrow::before,
.eyebrow::after,
.hero__act .eyebrow::before,
.pb__eyebrow::before,
.svc__eyebrow::before,
.pq__eyebrow::before,
.cta__eyebrow::before,
.cta__eyebrow::after,
.bz-testimonials__eyebrow::before,
.bz-testimonials__eyebrow::after,
.bz-testimonials-band__eyebrow::before,
.bz-testimonials-band__eyebrow::after,
.bz-cross-sell__eyebrow::before,
.bz-cross-sell__eyebrow::after,
.ph-eyebrow .elementor-heading-title::before,
.ph-sec-eyebrow .elementor-heading-title::before,
.au-eyebrow .elementor-heading-title::before,
.re-eyebrow .elementor-heading-title::before,
.ap-eyebrow .elementor-heading-title::before,
.intermezzo__quote cite::before,
.svc__card .svc__features li::before,
.pq__roles li::before,
.pq__signature-sub::before,
body.bz-audit-et-optimisation .au-step__list li::before,
.ftr--marquee .ftr__intro-eyebrow::before,
.ftr--marquee .ftr__intro-eyebrow::after,
.ftr--marquee .ftr__stage::before {
	content: "·" !important;
	display: inline-block !important;
	width: auto !important;
	height: auto !important;
	background: transparent !important;
	color: var(--bz-or, #B89D64) !important;
	font-family: var(--font-d) !important;
	font-size: 1.6em !important;
	line-height: 1 !important;
	font-weight: 700 !important;
	margin: 0 0.55em 0 0 !important;
	vertical-align: middle !important;
	flex-shrink: 0 !important;
	border: 0 !important;
}

/* Eyebrows wrapped between two filets (CTA, testimonials, footer
   intro) get a trailing dot mirrored on ::after. */
.eyebrow::after,
.cta__eyebrow::after,
.bz-testimonials__eyebrow::after,
.bz-testimonials-band__eyebrow::after,
.bz-cross-sell__eyebrow::after,
.ftr--marquee .ftr__intro-eyebrow::after {
	margin: 0 0 0 0.55em !important;
}

/* =============================================================
   Home eyebrows — clean treatment (no `·` decoration).
   - Left-aligned eyebrows get a 28px indent before the text
     (hero slides, LE CONSTAT, CE QUE NOUS FAISONS, POURQUOI BAZINET).
   - Centered eyebrows keep their centered alignment, no indent
     (PRENDRE RENDEZ-VOUS, DÉCOUVRIR NOS SERVICES, Ils nous ont fait confiance).
   - PORTRAIT DU FONDATEUR keeps a `-` mark in cream (see rule below).
   Other pages keep the global `·` from the filet→dot rule.
   2026-05-13 client request. */
body.bz-home .hero__act .eyebrow {
	position: relative;
	display: inline-block;
	padding-left: 0;
}
body.bz-home .pb__eyebrow,
body.bz-home .svc__eyebrow,
body.bz-home .pq__eyebrow {
	position: relative;
	display: inline-block;
	padding-left: 0;
}
body.bz-home .hero__act .eyebrow::before,
body.bz-home .hero__act .eyebrow::after,
body.bz-home .pb__eyebrow::before,
body.bz-home .pb__eyebrow::after,
body.bz-home .svc__eyebrow::before,
body.bz-home .svc__eyebrow::after,
body.bz-home .pq__eyebrow::before,
body.bz-home .pq__eyebrow::after,
body.bz-home .cta__eyebrow::before,
body.bz-home .cta__eyebrow::after,
body.bz-home .bz-testimonials__eyebrow::before,
body.bz-home .bz-testimonials__eyebrow::after,
body.bz-home .bz-cross-sell__eyebrow::before,
body.bz-home .bz-cross-sell__eyebrow::after {
	content: none !important;
	display: none !important;
	background: transparent !important;
}

/* =============================================================
   Other pages — extend the home eyebrow treatment.
   The global filet→dot rule above adds a `·` before every eyebrow
   site-wide. The home page suppressed those individually. Here we
   suppress them on Prevhub, Audit, Réputation, À propos so the
   eyebrows read as plain caps with no decoration, matching the home
   model. Editorial filets that are intentionally kept (origine band
   signature `.ph-pullquote-attr p::before`, intermezzo cite signature
   restored just below) are NOT touched. 2026-05-13 client request. */
.ph-eyebrow .elementor-heading-title::before,
.ph-eyebrow .elementor-heading-title::after,
.ph-sec-eyebrow .elementor-heading-title::before,
.ph-sec-eyebrow .elementor-heading-title::after,
.au-eyebrow .elementor-heading-title::before,
.au-eyebrow .elementor-heading-title::after,
.re-eyebrow .elementor-heading-title::before,
.re-eyebrow .elementor-heading-title::after,
.ap-eyebrow .elementor-heading-title::before,
.ap-eyebrow .elementor-heading-title::after,
.ap-eyebrow::before,
.ap-eyebrow::after,
.ap-hero__eyebrow::before,
.ap-hero__eyebrow::after,
.bz-contact-process__eyebrow::before,
.bz-contact-process__eyebrow::after,
.bz-contact-faq__eyebrow::before,
.bz-contact-faq__eyebrow::after,
.bz-cross-sell__eyebrow::before,
.bz-cross-sell__eyebrow::after,
.ftr--marquee .ftr__intro-eyebrow::before,
.ftr--marquee .ftr__intro-eyebrow::after,
.ph-modes-quatuor__header::before,
.ph-modes-quatuor__header::after,
.ph-hero-index__label::before,
.ph-hero-index__label::after,
.ph-cta-eyebrow .elementor-heading-title::before,
.ph-cta-eyebrow .elementor-heading-title::after,
.bz-contact-hero__eyebrow .elementor-heading-title::before,
.bz-contact-hero__eyebrow .elementor-heading-title::after {
	content: none !important;
	display: none !important;
	background: transparent !important;
}

/* Service card chips (.svc__features li) — center the global `·`
   dot vertically. The original ::before used top: 0.65em calibrated
   for a 1px-tall filet; the dot glyph at 1.6em needs proper centering
   instead. 2026-05-13. */
.svc__card .svc__features li {
	position: relative;
}
.svc__card .svc__features li::before {
	top: 50% !important;
	transform: translateY(-50%) !important;
	font-size: 1.3em !important;
	line-height: 1 !important;
}

/* À propos · « Ce qui nous distingue » pullquote — wrap the line
   « Nous connaissons votre industrie de l'intérieur. » in inline
   parentheses, replacing the original gold filets. 2026-05-13 client
   request. */
.ap-distingue__pullquote::before,
.ap-distingue__pullquote::after {
	display: inline !important;
	background: transparent !important;
	width: auto !important;
	height: auto !important;
	color: inherit !important;
	font-family: inherit !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	font-style: inherit !important;
	line-height: inherit !important;
	letter-spacing: inherit !important;
	text-align: inherit !important;
	vertical-align: baseline !important;
	margin: 0 !important;
	border: 0 !important;
	opacity: 1 !important;
}
.ap-distingue__pullquote::before { content: "«\00A0" !important; }
.ap-distingue__pullquote::after  { content: "\00A0»" !important; }

/* =============================================================
   CLIENT BEFORE/AFTER demo — restore the original gold filet on
   slide 1 of the home hero ("POUR LES RESTAURATEURS QUÉBÉCOIS")
   and on "LE CONSTAT". Lets the client compare the original look
   vs the cleaned model side-by-side. Remove this block after the
   review session. 2026-05-13. */
body.bz-home .hero__slide[data-slide="0"] .eyebrow,
body.bz-home.bz-home .pb__eyebrow {
	display: inline-flex !important;
	align-items: center !important;
	gap: 14px !important;
}
body.bz-home .hero__slide[data-slide="0"] .eyebrow::before,
body.bz-home.bz-home .pb__eyebrow::before {
	content: "" !important;
	display: inline-block !important;
	width: 40px !important;
	height: 1px !important;
	background: var(--bz-or, #B89D64) !important;
	color: transparent !important;
	font-size: 0 !important;
	margin: 0 !important;
	flex: 0 0 auto !important;
	border: 0 !important;
	opacity: 1 !important;
}

/* Contact hero DISCUTONS link — remove the hairline gold underline
   that read like a residual filet. 2026-05-13 client request. */
body.bz-contact .bz-contact-hero__cta {
	border-bottom: 0 !important;
	padding-bottom: 0 !important;
}

/* Contact · COMMENT ON TRAVAILLE + POUR ALLER PLUS LOIN eyebrows —
   lift the colour from the dark amber (#6B5226) to the brand gold so
   the section titles read on-brand. 2026-05-13 client request,
   extended 2026-05-14 to faq eyebrow. */
body.bz-contact .bz-contact-process__eyebrow,
body.bz-contact .bz-contact-process__eyebrow *,
body.bz-contact .bz-contact-faq__eyebrow,
body.bz-contact .bz-contact-faq__eyebrow * {
	color: var(--bz-or, #B89D64) !important;
}

/* DAVID BAZINET · FONDATEUR signature on home intermezzo — 2026-05-14
   client request: remove the leading filet and lift the colour to
   brand gold so the home signature matches the service-page genese
   bands. */
.intermezzo__quote cite::before {
	content: none !important;
}
.intermezzo__quote cite {
	color: var(--bz-or, #B89D64) !important;
}

/* PORTRAIT DU FONDATEUR — harmonised 2026-05-14 to match the gold
   40px filet used on every other hero/section eyebrow. The signature
   sits below the David name in the Pourquoi Bazinet section; using
   the same gold hairline as the section eyebrow above unifies the
   block. */
body.bz-home .pq__signature-sub {
	display: inline-flex !important;
	align-items: center !important;
	gap: 14px !important;
}
body.bz-home .pq__signature-sub::before {
	content: "" !important;
	display: inline-block !important;
	background: rgba(244, 241, 234, 0.55) !important;
	color: rgba(244, 241, 234, 0.55) !important;
	width: 24px !important;
	height: 1px !important;
	font-size: 0 !important;
	font-weight: 400 !important;
	letter-spacing: normal !important;
	line-height: 1 !important;
	margin: 0 !important;
	padding: 0 !important;
	vertical-align: middle !important;
	border: 0 !important;
	flex: 0 0 auto !important;
	flex-shrink: 0 !important;
	opacity: 1 !important;
}

/* The footer's section-break divider above the B emblem — removed
   entirely per client request 2026-05-13. The B emblem stands on its
   own; no ornament above it. */
.ftr--marquee .ftr__stage::before {
	content: none !important;
	display: none !important;
	background: transparent !important;
}

/* =============================================================
   CLIENT DECISION 2026-05-14 — restore the gold 40px filet (---)
   in front of hero titles + section titles only. Generalizes the
   2026-05-13 demo block (originally slide 0 + Le constat) to all
   hero/section eyebrows site-wide. Overrides the upstream
   "filet→dot" (block A, ~l. 588) and "clean treatment" (block B,
   ~l. 663 + 691) blocks via source-order + !important.

   Centered eyebrows (home CTA, home témoignages, témoignages-band,
   cross-sell, Prevhub CTA) get a mirror filet on ::after for the
   original ---TEXTE--- look.

   Non-title decorations are NOT touched here: svc__features bullets,
   pq__roles bullets, pq__signature-sub, intermezzo cite, audit
   step-list bullets, footer marquee intro + stage — all keep their
   post-2026-05-13 state.
   ============================================================= */

/* Parent layout — flex with gap so the filet sits flush with the
   uppercase text. Applied only to raw eyebrow classes (NOT to
   Elementor heading-title wrappers, which Elementor itself styles). */
body.bz-home .hero__act .eyebrow,
body.bz-home .pb__eyebrow,
body.bz-home .svc__eyebrow,
body.bz-home .pq__eyebrow,
.ap-hero__eyebrow,
.ap-eyebrow,
.bz-contact-process__eyebrow,
.bz-contact-faq__eyebrow,
.ftr--marquee .ftr__intro-eyebrow {
	display: inline-flex !important;
	align-items: center !important;
	gap: 14px !important;
	padding-left: 0 !important;
}

/* Cross-sell eyebrow — block-level flex, centered via auto margin so
   "Découvrir nos services" / "Découvrir aussi" sits flush with the
   centered section title below it. 2026-05-14 client request. */
.bz-cross-sell__eyebrow {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 14px !important;
	width: fit-content !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 0 !important;
}

/* Centered eyebrows — flex centered, gap on both sides of the text. */
body.bz-home .cta__eyebrow,
body.bz-home .bz-testimonials__eyebrow,
.bz-testimonials-band__eyebrow {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 14px !important;
}

/* Leading filet ::before — all hero + section eyebrows. */
body.bz-home .hero__act .eyebrow::before,
body.bz-home .pb__eyebrow::before,
body.bz-home .svc__eyebrow::before,
body.bz-home .pq__eyebrow::before,
body.bz-home .cta__eyebrow::before,
body.bz-home .bz-testimonials__eyebrow::before,
body.bz-home .bz-cross-sell__eyebrow::before,
.bz-testimonials-band__eyebrow::before,
.bz-cross-sell__eyebrow::before,
.ph-eyebrow .elementor-heading-title::before,
.ph-sec-eyebrow .elementor-heading-title::before,
.ph-cta-eyebrow .elementor-heading-title::before,
.au-eyebrow .elementor-heading-title::before,
.re-eyebrow .elementor-heading-title::before,
.ap-hero__eyebrow::before,
.ap-eyebrow::before,
.ap-eyebrow .elementor-heading-title::before,
.bz-contact-hero__eyebrow .elementor-heading-title::before,
.bz-contact-process__eyebrow::before,
.bz-contact-faq__eyebrow::before,
.ftr--marquee .ftr__intro-eyebrow::before {
	content: "" !important;
	display: inline-block !important;
	width: 40px !important;
	height: 1px !important;
	background: var(--bz-or, #B89D64) !important;
	color: transparent !important;
	font-size: 0 !important;
	line-height: 1 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	flex: 0 0 auto !important;
	flex-shrink: 0 !important;
	opacity: 1 !important;
	vertical-align: middle !important;
	position: static !important;
}

/* Trailing filet ::after — centered eyebrows only.
   Excluded (single leading filet only): home CTA "Prendre rendez-vous",
   cross-sell band ("Découvrir nos services" / "Découvrir aussi"), and
   the Prevhub/Audit/Réputation form-title CTA "Rencontrons-nous".
   2026-05-14 client request. */
body.bz-home .bz-testimonials__eyebrow::after,
.bz-testimonials-band__eyebrow::after {
	content: "" !important;
	display: inline-block !important;
	width: 40px !important;
	height: 1px !important;
	background: var(--bz-or, #B89D64) !important;
	color: transparent !important;
	font-size: 0 !important;
	line-height: 1 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	flex: 0 0 auto !important;
	flex-shrink: 0 !important;
	opacity: 1 !important;
	vertical-align: middle !important;
	position: static !important;
}

/* =============================================================
   2026-05-14 — Prevhub-specific filet visibility bump.
   On the Prevhub cream sections, the 1px-tall filets render
   anti-aliased and look duller (perceived as amber) compared to
   the same filet on marine (e.g. cross-sell band). Bumping to 2px
   gives the eyebrow filets the same visual weight as the cross-
   sell filet so the page reads consistently gold. Also nudges the
   form submit button arrow to a brighter gold for the same reason.
   ============================================================= */
body.bz-prevhub .ph-eyebrow .elementor-heading-title::before,
body.bz-prevhub .ph-sec-eyebrow .elementor-heading-title::before,
body.bz-prevhub .ph-cta-eyebrow .elementor-heading-title::before,
body.bz-prevhub .ph-cta-eyebrow .elementor-heading-title::after,
body.bz-prevhub .ph-modes-quatuor__header::before {
	background: var(--ph-amber, #C4821A) !important;
}

body.bz-prevhub .bz-contact-form .elementor-form button.elementor-button::after,
body.bz-prevhub .ph-form.bz-contact-form .elementor-form button.elementor-button::after,
body.bz-prevhub .ph-form .elementor-form .elementor-button::after {
	background: var(--ph-amber, #C4821A) !important;
}