@charset "UTF-8";
/* ============================================================
   Bazinet component styles.
   Source of truth: Bazinet Solutions - Standalone.html (decoded
   template, second <style> block). Selectors and class names
   match the maquette verbatim — the carousel and reveal scripts
   query these names directly.
   ============================================================ */

/* ============================================
   HEADER
   ============================================ */
.hdr {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 56px;
  z-index: 20;
}

.hdr__logo {
  display: flex; align-items: center;
  text-decoration: none;
}

.hdr__logo img {
  height: 64px; width: auto; display: block;
}

.hdr__nav {
  display: flex; gap: 36px; align-items: center;
}

.hdr__nav a {
  font-family: var(--font-d);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bz-marine);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: border-color 220ms var(--ease), color 220ms var(--ease);
}

.hdr__nav a:hover { border-bottom-color: var(--bz-or); color: var(--bz-or); }

/* ============================================
   HERO · Variante A — Grille éditoriale asymétrique
   ============================================ */
.hero {
  position: relative;
  /* 100svh = small viewport height, never includes browser chrome — eliminates
     iOS Safari address-bar jump on scroll. 100vh kept as fallback for browsers
     that don't support svh (~95% supported as of 2025). */
  height: 100vh;
  height: 100svh;
  min-height: 760px;
  overflow: hidden;
  background: var(--bz-marine);
  display: grid;
  grid-template-columns: 88px 1fr;
  color: var(--bz-creme, #F4F1EA);
}

/* Rail vertical gauche */
.hero__rail {
  position: relative;
  border-right: 1px solid rgba(244,241,234,0.1);
  display: flex;
  flex-direction: column;
  padding: 132px 0 40px;
  align-items: center;
  justify-content: center;
  z-index: 15;
}

.hero__rail-brand,
.hero__rail-n {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-d);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  white-space: nowrap;
}

.hero__rail-brand { font-weight: 400; color: rgba(244,241,234,0.55); }

.hero__rail-n { font-weight: 500; color: var(--bz-or); letter-spacing: 0.28em; }

/* Override du header global pour le hero sombre */
.hero .hdr {
  grid-column: 1 / -1;
  z-index: 50;
}

.hero .hdr__logo img {
  /* le svg _blanc est déjà clair, on force opacité */
  filter: none;
}

.hero .hdr__nav a {
  color: rgba(244,241,234,0.95);
  border-bottom-color: transparent;
}

.hero .hdr__nav a:hover { color: var(--bz-or); border-bottom-color: var(--bz-or); }

/* Stage — occupe la col droite */
.hero__stage {
  position: relative;
  overflow: hidden;
  grid-column: 2;
  grid-row: 1;
  background: var(--bz-marine);
}

/* Slide = article absolu avec grille interne */
.hero__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  /* Crossfade longer (700 ms vs the previous 400 ms) so the photo +
     text handoff between slides feels continuous rather than snapped.
     Combined with the word-stagger inside the active slide, gives the
     four actes the feel of one editorial breath. */
  transition: opacity 700ms var(--ease);
}

.hero__slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* Swipe transition — when a touch swipe triggers a slide change,
   `.hero--swipe` is briefly added on the hero. Slides crossfade with
   a slight horizontal slide-in to give the gesture tactile feedback. */
.hero.hero--swipe .hero__slide {
  transition: opacity 480ms cubic-bezier(0.25, 0.7, 0, 1),
              transform 480ms cubic-bezier(0.25, 0.7, 0, 1);
}
.hero.hero--swipe .hero__slide:not(.is-active) {
  transform: translateX(-12px);
}
.hero.hero--swipe .hero__slide.is-active {
  transform: translateX(0);
}

/* Swipe affordance hint — one-shot animation on first visit (flagged
   via localStorage). The active glass card briefly rocks 6 px right
   then back, signalling the carousel is swipeable. */
@keyframes bz-hero-swipe-hint {
  0%   { transform: translateX(0); }
  35%  { transform: translateX(8px); }
  70%  { transform: translateX(-2px); }
  100% { transform: translateX(0); }
}
.hero.hero--hint .hero__slide.is-active .hero__text-wrap {
  animation: bz-hero-swipe-hint 1200ms cubic-bezier(0.3, 0, 0, 1);
}

.hero__slide-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  grid-template-rows: 132px 1fr 1fr 132px;
}

/* Photo - col 2, full height */
.hero__photo {
  grid-column: 2;
  grid-row: 1 / 5;
  position: relative;
  overflow: hidden;
}

.hero__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.08);
  transition: transform 1400ms var(--ease);
}

.hero__slide.is-active .hero__photo img {
  transform: scale(1);
}

.hero__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11,30,56,0.2) 0%, rgba(11,30,56,0.05) 40%, rgba(11,30,56,0.6) 100%);
  pointer-events: none;
}

/* ============================================================
   404 page — custom template at theme root (bazinet-child/404.php).
   Editorial layout: eyebrow + italic em title + lead + 2 CTAs.
   Inherits the marine palette so it reads as "still inside Bazinet"
   rather than a system page.
   ============================================================ */

body.error404 {
	background: var(--bz-marine, #0B1E38);
	color: var(--bz-creme, #F4F1EA);
}

.bz-404 {
	background: var(--bz-marine, #0B1E38);
	color: var(--bz-creme, #F4F1EA);
	min-height: 60vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(64px, 10vh, 160px) clamp(24px, 5vw, 88px);
}

.bz-404__inner {
	max-width: 720px;
	text-align: center;
}

.bz-404__eyebrow {
	font-family: var(--font-d);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.42em;
	text-transform: uppercase;
	color: var(--bz-or, #B89D64);
	margin: 0 0 clamp(20px, 2.6vh, 32px);
	line-height: 1;
}

.bz-404__title {
	font-family: var(--font-d);
	font-size: clamp(34px, 4vw, 64px);
	font-weight: 300;
	line-height: 1.1;
	letter-spacing: -0.018em;
	color: var(--bz-creme, #F4F1EA);
	margin: 0 0 clamp(20px, 2.4vh, 28px);
}
.bz-404__title em {
	font-style: italic;
	font-weight: 300;
	color: var(--bz-or, #B89D64);
}

.bz-404__lead {
	font-family: var(--font-b);
	font-size: clamp(15px, 1.05vw, 18px);
	line-height: 1.65;
	color: rgba(244, 241, 234, 0.82);
	margin: 0 auto clamp(36px, 4.4vh, 56px);
	max-width: 52ch;
}

.bz-404__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	justify-content: center;
}

.bz-404__btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: var(--font-d);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 14px 0;
	transition: gap 280ms cubic-bezier(0.3, 0, 0, 1), color 280ms cubic-bezier(0.3, 0, 0, 1);
}
.bz-404__btn--primary {
	color: var(--bz-or, #B89D64);
	border-bottom: 1px solid var(--bz-or, #B89D64);
}
.bz-404__btn--secondary {
	color: rgba(244, 241, 234, 0.82);
	border-bottom: 1px solid rgba(244, 241, 234, 0.30);
}
.bz-404__btn:hover,
.bz-404__btn:focus-visible {
	gap: 18px;
	color: var(--bz-or, #B89D64);
	outline: none;
}
.bz-404__btn:focus-visible {
	outline: 2px solid var(--bz-or, #B89D64);
	outline-offset: 6px;
}

/* Zone texte — déborde sur la photo */
.hero__text-wrap {
  grid-column: 1 / 3;
  grid-row: 2 / 4;
  align-self: center;
  padding: 0 0 0 56px;
  z-index: 3;
  max-width: 1400px;
  pointer-events: none;
}

.hero__texts {
  position: relative;
  max-width: 720px;
  pointer-events: auto;
}

.hero__act {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms var(--ease);
}

.hero__act.is-active {
  position: relative;
  opacity: 1;
  pointer-events: auto;
}

.hero__act .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-d);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bz-or);
  margin: 0 0 40px;
  padding-left: 0;
}

.hero__act .eyebrow::before {
  content: "";
  width: 44px; height: 1px;
  background: currentColor;
  position: static;
}

.hero__title {
  font-family: var(--font-d);
  font-weight: 300;
  font-size: clamp(38px, 4.4vw, 68px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--bz-creme, #F4F1EA);
  margin: 0;
  text-wrap: balance;
}

.hero__line {
  display: block;
}

/* Word-level fade-in stagger. Replaces the previous line-level
   slide-up (translateY 110% → 0) which felt saccadé and re-played
   identically on every slide change. Each word fades in 60 ms after
   the previous, with --bz-word-delay set inline by PHP per word.
   No vertical transform — just a 4px lift so the eye registers the
   reveal without "popping". */
.hero__word {
  display: inline-block;
  will-change: opacity, transform;
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 620ms var(--ease),
    transform 620ms var(--ease);
  transition-delay: 0ms;
}

.hero__slide.is-active .hero__act.is-active .hero__word {
  opacity: 1;
  transform: translateY(0);
  transition-delay: var(--bz-word-delay, 0ms);
}

.hero__title .gold {
  color: var(--bz-or);
  font-style: italic;
  font-weight: 300;
  display: inline-block;
}

/* gold standalone line wrap */
.hero__title > .gold {
  display: block;
  overflow: hidden;
}

/* Hero subline — short functional line below the gold title that
   names the concrete offer ("Plateforme de conformité, audit, réputation —
   pour les restaurateurs du Québec"). Optional per slide; rendered
   only when the widget setting is non-empty. Sober, restrained typography
   so it reads as supporting clarity, not competing with the headline. */
.hero__subline {
  margin: 18px 0 0;
  font-family: var(--font-d);
  font-size: clamp(13px, 0.95vw + 6px, 15.5px);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0.01em;
  color: var(--bz-creme-78);
  max-width: 44ch;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 900ms var(--ease), transform 900ms var(--ease);
  transition-delay: 720ms;
}

.hero__slide.is-active .hero__act.is-active .hero__subline {
  opacity: 1;
  transform: translateY(0);
}

/* ====== Service CTAs dans le hero ====== */
.hero__svc-ctas {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 900ms var(--ease), transform 900ms var(--ease);
  transition-delay: 800ms;
}

.hero__slide.is-active .hero__act.is-active .hero__svc-ctas {
  opacity: 1;
  transform: translateY(0);
}

.hero__svc-btn {
  --bg: transparent;
  --bd: rgba(244,241,234,0.28);
  --fg: var(--bz-creme, #F4F1EA);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 20px 13px 18px;
  font-family: var(--font-d);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg);
  text-decoration: none;
  background: var(--bg);
  border: 1px solid var(--bd);
  transition: color 320ms var(--ease), border-color 320ms var(--ease), background 320ms var(--ease), gap 320ms var(--ease);
}

.hero__svc-btn::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--bz-or);
  transform: rotate(45deg);
  transition: transform 320ms var(--ease);
}

.hero__svc-btn:hover {
  --bd: var(--bz-or);
  --fg: var(--bz-or);
  gap: 14px;
}

.hero__svc-btn:hover::before { transform: rotate(225deg); }

/* In-card pagination footer is mobile-only — the global .hero__dock
   below is what desktop uses. Hidden by default, revealed on mobile
   via the @media block far below. */
.hero__act-footer { display: none; }

/* ====== DOCK en bas : counter + pagination + arrows ====== */
.hero__dock {
  position: absolute;
  left: 88px;
  right: 0;
  bottom: 0;
  height: 132px;
  display: grid;
  /* Was `auto 1fr auto` (counter | pager | arrows). The counter is hidden
     below — collapse to 2 columns so the pager starts cleanly at the dock's
     left edge instead of leaving an empty 80-px gap. */
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 48px;
  padding: 0 56px;
  border-top: 1px solid rgba(244,241,234,0.14);
  background: linear-gradient(0deg, rgba(11,30,56,0.82), rgba(11,30,56,0.25));
  backdrop-filter: blur(6px);
  z-index: 10;
}

.counter {
  font-family: var(--font-d);
  font-variant-numeric: tabular-nums;
  color: var(--bz-creme, #F4F1EA);
  /* Hidden by client request. Carousel JS still updates `[data-count]`
     internally — the element is just visually removed from the dock.
     `display: none` also pulls it from the accessibility tree so screen
     readers don't announce "01 / 04" on every slide change. */
  display: none;
  align-items: baseline;
  gap: 14px;
}

.counter .cur {
  font-size: 56px;
  line-height: 1;
  font-weight: 300;
  letter-spacing: -0.02em;
}

.counter .sep {
  font-size: 20px;
  font-weight: 200;
  color: rgba(244,241,234,0.3);
}

.counter .tot {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: rgba(244,241,234,0.8);
  text-transform: uppercase;
}

/* Pager - 3 barres horizontales avec label */
.pager {
  display: grid;
  grid-template-columns: repeat(4, minmax(110px, 170px));
  gap: 18px;
  align-self: end;
  padding-bottom: 28px;
  flex-direction: row;
}

.pager__btn {
  all: unset;
  cursor: pointer;
  padding: 16px 0 0;
  text-align: left;
  color: rgba(244,241,234,0.8);
  font-family: var(--font-d);
  display: block;
  transition: color .28s var(--ease);
}

.pager__btn:hover { color: var(--bz-creme, #F4F1EA); }

.pager__btn.is-active { color: var(--bz-creme, #F4F1EA); }

.pager__line {
  display: block;
  height: 1px;
  background: rgba(244,241,234,0.2);
  position: relative;
  overflow: hidden;
  width: 100%;
  margin-bottom: 12px;
}

.pager__line i {
  position: absolute;
  inset: 0;
  background: var(--bz-or);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 620ms var(--ease);
}

.pager__btn.is-active .pager__line i {
  transform: scaleX(1);
  transition: transform 9000ms linear;
}

.pager__num {
  /* Was `inline-block`. Hidden by client request — pager labels keep their
     descriptive names ("Vue d'ensemble", "Prevhub", "Audit", "Réputation")
     without the leading "01/02/03/04" italic gold prefix. */
  display: none;
  font-size: 15px;
  letter-spacing: 0.18em;
  font-weight: 400;
  font-style: italic;
  color: var(--bz-or);
  margin-right: 10px;
}

.pager__label {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.pager__dot { display: none; }

/* Arrows */
.arrows {
  display: flex;
  gap: 8px;
  align-self: center;
}

.arr {
  all: unset;
  cursor: pointer;
  width: 48px; height: 48px;
  border: 1px solid rgba(244,241,234,0.25);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bz-creme, #F4F1EA);
  transition:
    border-color .28s var(--ease),
    background-color .28s var(--ease),
    color .28s var(--ease),
    transform .28s var(--ease);
}

.arr:hover {
  border-color: var(--bz-or);
  background: var(--bz-or);
  color: var(--bz-marine-900);
  transform: none;
}

.arr svg { display: block; width: 22px; height: 8px; }

/* ============================================
   Defeat Hello Elementor reset.css's default
   `button:hover/focus { background-color: #c36 }`
   (a brick-red) which bleeds through any custom
   <button> whose :hover rule doesn't explicitly set
   background. Each rule below states the maquette's
   intended hover/focus look so nothing is left to
   the parent theme's reset.
   ============================================ */

/* Hero in-slide CTAs — transparent base, subtle gold accent on hover/focus */
.hero__svc-btn:hover,
.hero__svc-btn:focus,
.hero__svc-btn:focus-visible {
  background-color: transparent;
  color: var(--bz-or);
  text-decoration: none;
}
.hero__svc-btn:focus-visible {
  outline: 2px solid var(--bz-or);
  outline-offset: 3px;
}

/* Hero pager dots — subtle text colour shift only, keep transparent bg */
.pager__btn:hover,
.pager__btn:focus,
.pager__btn:focus-visible {
  background-color: transparent;
  color: var(--bz-creme, #F4F1EA);
  text-decoration: none;
}
.pager__btn:focus-visible {
  outline: 2px solid var(--bz-or);
  outline-offset: 4px;
}

/* Prev/next dock arrows — gold-fill on hover (defined above) plus matching focus state */
.arr:focus,
.arr:focus-visible {
  border-color: var(--bz-or);
  background-color: var(--bz-or);
  color: var(--bz-marine-900);
}
.arr:focus-visible {
  outline: 2px solid var(--bz-or);
  outline-offset: 3px;
}

.hero__footer { display: contents; }

@media (max-width: 960px) {
  .hero {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
  }
  .hero__rail { display: none; }
  .hero__stage { grid-column: 1; grid-row: 1; }
  .hero__slide-grid {
    grid-template-columns: 1fr;
    grid-template-rows: 100px 1fr 1fr 110px;
  }
  .hero__photo { grid-column: 1; grid-row: 1 / 5; }
  /* Soft, even darken — just enough to ensure the hamburger and the
     pager arrows stay readable at the edges. The glass card carries
     the contrast for the H1 itself, so we don't need the heavy
     bottom-darkening gradient that lived here previously. */
  .hero__photo::after {
    background: var(--bz-marine-18);
  }
  .hero__text-wrap { padding: 0 24px; grid-column: 1; }
  .hero__title { font-size: 46px; line-height: 1.05; }
  .hero__dock {
    left: 0;
    padding: 0 24px;
    grid-template-columns: auto auto;
    justify-content: space-between;
    height: 92px;
  }
  .pager { display: none; }
  .hdr { padding: 20px 24px; }
  .hdr__nav { display: none; }
}

[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1000ms var(--ease), transform 1000ms var(--ease);
  transition-delay: var(--d, 0ms);
}

[data-reveal].is-in { opacity: 1; transform: none; }

/* Passerelles: keep their background always visible — only the SVG
   trace animation should reveal on scroll, not the section gradient.
   `is-in` is still added by the observer so .passerelle__pcb .trace
   still animates via stroke-dashoffset. */
.passerelle[data-reveal] {
  opacity: 1;
  transform: none;
}

/* ---- Section chrome ---- */
.sec { position: relative; }

.sec__num-vert {
  position: absolute;
  left: 56px; top: 120px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-d);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--bz-n-500);
  display: flex; align-items: center; gap: 20px;
}

.sec__num-vert::after {
  content: ""; width: 1px; height: 60px; background: currentColor; opacity: 0.5;
}

/* Ornement vertical décoratif (sans texte) — filets + losange or */
.sec__ornament {
  position: absolute;
  left: 56px; top: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  pointer-events: none;
}

.sec__ornament-line {
  width: 1px;
  background: rgba(74,74,74,0.3);
}

.sec__ornament-line:first-child { height: 80px; }

.sec__ornament-line:last-child { height: 160px; background: linear-gradient(180deg, rgba(74,74,74,0.3) 0%, rgba(74,74,74,0) 100%); }

.sec__ornament--dark .sec__ornament-line { background: rgba(244,241,234,0.18); }

.sec__ornament--dark .sec__ornament-line:last-child { background: linear-gradient(180deg, rgba(244,241,234,0.18) 0%, rgba(244,241,234,0) 100%); }

.sec__ornament-diamond {
  width: 7px; height: 7px;
  background: var(--bz-or);
  transform: rotate(45deg);
  box-shadow: 0 0 0 4px rgba(184,157,100,0.08);
}

@media (max-width: 960px) {
  .sec__ornament { display: none; }
}

/* ============================================
   TRANSITION — passerelles circuit imprimé
   Chaque passerelle est un segment de PCB traversant la page.
   Pistes, vias, pads, sérigraphie — cohérent entre sections.
   ============================================ */
/* ============================================================
   IMPROVEMENT BUNDLE — mobile UX/UI inspection follow-ups (2026-05).
   Grouped here so the related tweaks live in one block; each rule is
   commented with its priority/source from the inspection plan.
   ============================================================ */

/* #3 — Home hero title floor bump on the very smallest phones (320 px
   wide / 568 px tall = iPhone SE 1st gen). Pushes the min font from
   19 px → 22 px so the headline reads with presence on the smallest
   real-world device. */
@media (max-width: 360px) and (max-height: 600px) {
	html body.bz-home .hero__title {
		font-size: clamp(22px, calc(5vw + 0.4vh), 26px) !important;
		line-height: 1.15;
	}
	html body.bz-home .hero__act .eyebrow {
		font-size: 11.5px !important;
	}
}

/* #5 — PrevHub L'Exigence table: bump body font 15 → 16 px, line-
   height 1.4 → 1.5 so the obligation labels read more comfortably on
   mobile. */
@media (max-width: 720px) {
	body.bz-prevhub .ph-reg__obligation {
		font-size: 16px !important;
	}
	body.bz-prevhub .ph-reg__freq {
		font-size: 13px !important;
		line-height: 1.5 !important;
	}
}

/* #8 — Form clarification: highlight the "ou cellulaire requis" /
   "ou courriel requis" placeholder text in italic gold dim so users
   read it as guidance, not as plain placeholder noise. */
.bz-contact-form .elementor-form input[type="email"]::placeholder,
.bz-contact-form .elementor-form input[type="tel"]::placeholder {
	font-style: italic;
	color: var(--bz-or-55);
	font-size: 12.5px;
}

/* #10 — Stamp out the legacy amber-soft (#E0A840) accent across
   PrevHub. Any focus-rings / link-states still anchored on that token
   move to the standard Bazinet gold (#B89D64) for visual cohesion. */
body.bz-prevhub .elementor-button:focus-visible,
body.bz-prevhub .elementor-form input:focus,
body.bz-prevhub .elementor-form textarea:focus,
body.bz-prevhub .elementor-form select:focus {
	border-color: var(--bz-or, #B89D64) !important;
	box-shadow: 0 0 0 3px rgba(184, 157, 100, 0.16) !important;
}

/* #11 — Footer marquee scroll speed. Mobile readers can't track text
   moving at desktop speed; slow it from 66s/track to 110s/track on
   phones so the brand wordmark passes by readably. */
@media (max-width: 720px) {
	.ftr--marquee .ftr__marquee-track {
		animation-duration: 110s !important;
	}
}

.passerelle {
  position: relative;
  overflow: hidden;
  --pcb-trace: rgba(184,157,100,0.85);
  --pcb-trace-dim: rgba(184,157,100,0.35);
  --pcb-pad: var(--bz-or);
  --pcb-label: rgba(244,241,234,0.5);
  --pcb-bg: var(--bz-encre-bleu);
  --pcb-silk: rgba(244,241,234,0.14);
  background: var(--pcb-bg);
}

/* Hide the decorative animated PCB-trace passerelles on mobile —
   they were a desktop ornament and don't read well on a small screen.
   Also hides the parent <section> so the surrounding 120 px gap
   collapses too. */
@media (max-width: 960px) {
  .passerelle,
  .elementor-section:has(> .elementor-container > .elementor-column > .elementor-element-populated > .passerelle),
  .elementor-section:has(.passerelle) {
    display: none !important;
  }
}

/* Variantes de fond */
.passerelle--dark {
  background: linear-gradient(180deg, var(--bz-marine) 0%, #070D1A 55%, var(--bz-encre-bleu) 100%);
}

.passerelle--to-marine {
  background: linear-gradient(180deg, var(--bz-encre-bleu) 0%, #070D1A 45%, var(--bz-marine) 100%);
}

.passerelle--in-cream,
.passerelle--out-cream {
  background: var(--bz-creme-2);
  --pcb-trace: rgba(184,157,100,0.85);
  --pcb-trace-dim: rgba(11,30,56,0.22);
  --pcb-pad: var(--bz-or);
  --pcb-label: rgba(11,30,56,0.55);
  --pcb-silk: rgba(11,30,56,0.15);
}

.passerelle--in-cream { box-shadow: inset 0 1px 0 rgba(11,30,56,0.08); }

.passerelle--out-cream { box-shadow: inset 0 -1px 0 rgba(11,30,56,0.08); }

/* Canvas PCB — le SVG occupe toute la passerelle */
.passerelle__pcb {
  display: block;
  width: 100%;
  height: 70px;
}

.passerelle__pcb .trace {
  fill: none;
  stroke: var(--pcb-trace);
  stroke-width: 0.8;
  stroke-linecap: square;
  stroke-linejoin: miter;
  stroke-dasharray: 2200;
  stroke-dashoffset: 2200;
  transition: stroke-dashoffset 2200ms var(--ease);
  opacity: 0.7;
}

.passerelle__pcb .trace--dim {
  stroke: var(--pcb-trace-dim);
  stroke-width: 0.6;
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  opacity: 0.5;
}

.passerelle__pcb .pad {
  fill: var(--pcb-pad);
}

.passerelle__pcb .via-outer {
  fill: none;
  stroke: var(--pcb-pad);
  stroke-width: 1.4;
}

.passerelle__pcb .via-inner {
  fill: var(--pcb-bg, var(--bz-encre-bleu));
}

.passerelle--in-cream .passerelle__pcb .via-inner,
.passerelle--out-cream .passerelle__pcb .via-inner {
  fill: var(--bz-creme-2);
}

.passerelle__pcb .silk {
  font-family: 'JetBrains Mono', ui-monospace, SF Mono, Menlo, monospace;
  font-size: 8px;
  fill: var(--pcb-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.55;
}

.passerelle__pcb .silk--big {
  font-family: var(--font-d);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.42em;
  opacity: 0.7;
}

.passerelle__pcb .silk--num {
  font-family: var(--font-d);
  font-size: 11px;
  font-weight: 300;
  font-style: italic;
  letter-spacing: 0.28em;
  fill: var(--pcb-pad);
  opacity: 0.85;
}

.passerelle--in-cream .passerelle__pcb .silk--big,
.passerelle--out-cream .passerelle__pcb .silk--big {
  fill: var(--bz-marine);
}

/* Animation au scroll : les pistes se dessinent */
.passerelle.is-in .passerelle__pcb .trace:not(.trace--dim) {
  stroke-dashoffset: 0;
}

.passerelle.is-in .passerelle__pcb .pad,
.passerelle.is-in .passerelle__pcb .via-outer {
  animation: pcbPulse 1200ms var(--ease) both 800ms;
}

@keyframes pcbPulse {
  0% { opacity: 0; transform: scale(0.2); }
  60% { opacity: 1; transform: scale(1.15); }
  100% { opacity: 1; transform: scale(1); }
}

.passerelle__pcb .pad, .passerelle__pcb .via-outer {
  transform-box: fill-box;
  transform-origin: center;
}

/* Signal lumineux qui parcourt la piste principale après son tracé.
   Astuce : on duplique la piste en .trace--signal avec un dash court
   et on anime stroke-dashoffset en boucle. */
.passerelle__pcb .trace--signal {
  fill: none;
  stroke: #FFE2A0;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 70 2200;
  stroke-dashoffset: 2270;
  opacity: 0;
  filter: drop-shadow(0 0 5px rgba(255,220,140,0.9)) drop-shadow(0 0 12px rgba(240,180,80,0.55));
  pointer-events: none;
}

.passerelle.is-in .passerelle__pcb .trace--signal {
  animation: pcbSignal 4200ms linear infinite 2000ms;
}

.passerelle--in-cream .passerelle__pcb .trace--signal,
.passerelle--out-cream .passerelle__pcb .trace--signal {
  stroke: #D6A54A;
  filter: drop-shadow(0 0 5px rgba(214,165,74,0.75)) drop-shadow(0 0 12px rgba(184,120,40,0.35));
}

@keyframes pcbSignal {
  0%   { stroke-dashoffset: 2060; opacity: 0; }
  6%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .passerelle.is-in .passerelle__pcb .trace--signal { animation: none; opacity: 0; }
}

@media (max-width: 960px) {
  .passerelle__pcb { height: 120px; }
}

/* ============================================
   BLOC 2 — PROBLÈMES (marine dramatique + filets)
   ============================================ */
.pb {
  background: var(--bz-encre-bleu);
  color: #E8ECF2;
  padding: 32px 88px 120px;
  position: relative;
  overflow: hidden;
}

.pb::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(900px 600px at 10% 10%, rgba(184,157,100,0.05), transparent 55%),
    radial-gradient(700px 500px at 95% 85%, rgba(184,157,100,0.03), transparent 55%);
  pointer-events: none;
}

/* The decorative "PROBLÈMES" oversized background text was removed per
   client request — it competed with the editorial title and read as
   noise on smaller viewports. The .pb section now relies solely on its
   eyebrow + headline for hierarchy. */

.pb > * { position: relative; z-index: 1; }

.pb .sec__num-vert { color: rgba(244,241,234,0.5); }

.pb__wrap {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 56px;
  max-width: 1480px;
  margin: 0 auto;
}

/* =============================================================
   TESTIMONIALS — bz-testimonials (full section, Home)
                  bz-testimonials-band (compact band, service pages)

   Pattern: cream-warm background to differentiate from neighboring
   marine sections. Cards are off-white paper-like with gold accents.
   Photo placeholder is a simple gold-edged circle with initials —
   client should replace each img src with a real client portrait.

   Note: the placeholder content here is realistic so the client can
   SEE what kind of copy + images to source. Replace each entry with
   actual client testimonials when collected.
   ============================================================= */

.bz-testimonials {
  background: var(--bz-creme-2, #EFE9DD);
  padding: clamp(80px, 12vh, 140px) clamp(32px, 5vw, 88px);
  color: var(--bz-marine, #0B1E38);
}

.bz-testimonials__inner {
  max-width: 1180px;
  margin: 0 auto;
}

.bz-testimonials__eyebrow {
  font-family: var(--font-d);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--bz-or, #B89D64);
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  line-height: 1;
}
.bz-testimonials__eyebrow::before,
.bz-testimonials__eyebrow::after {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--bz-or, #B89D64);
  flex-shrink: 0;
}

.bz-testimonials__title {
  font-family: var(--font-d);
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 300;
  line-height: 1.15;
  color: var(--bz-marine, #0B1E38);
  text-align: center;
  margin: 0 auto;
  max-width: 24ch;
  letter-spacing: -0.012em;
}
.bz-testimonials__title em {
  font-style: italic;
  color: var(--bz-or, #B89D64);
}

.bz-testimonials__placeholder-note {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: rgba(184, 78, 78, 0.85);
  text-align: center;
  margin: 18px auto 0;
  padding: 8px 16px;
  border: 1px dashed rgba(184, 78, 78, 0.55);
  border-radius: 2px;
  max-width: 70ch;
  letter-spacing: 0.04em;
  line-height: 1.5;
}

.bz-testimonials__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(24px, 2.8vw, 40px);
  margin-top: clamp(48px, 6vh, 72px);
}

@media (min-width: 980px) {
  .bz-testimonials__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.bz-testimonial {
  background: var(--bz-creme, #F4F1EA);
  border: 1px solid rgba(184, 157, 100, 0.22);
  padding: clamp(32px, 4vh, 48px) clamp(28px, 3.4vw, 44px);
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2vh, 24px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 1px 2px rgba(11, 30, 56, 0.04),
    0 12px 32px -16px var(--bz-marine-18);
}

.bz-testimonial__head {
  display: flex;
  align-items: center;
  gap: 18px;
}

.bz-testimonial__avatar {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--bz-marine, #0B1E38);
  border: 2px solid var(--bz-or, #B89D64);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.bz-testimonial__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bz-testimonial__initials {
  font-family: var(--font-d);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--bz-or, #B89D64);
}

.bz-testimonial__stars {
  font-size: 14px;
  letter-spacing: 0.18em;
  color: var(--bz-or, #B89D64);
  margin: 0 0 0 auto;
  line-height: 1;
}

.bz-testimonial__quote {
  font-family: var(--font-d);
  font-size: clamp(15px, 1.05vw, 17px);
  font-weight: 400;
  font-style: italic;
  line-height: 1.6;
  color: rgba(11, 30, 56, 0.92);
  margin: 0;
  position: relative;
  padding-left: 18px;
}
.bz-testimonial__quote::before {
  content: "«";
  position: absolute;
  left: 0;
  top: -2px;
  color: var(--bz-or, #B89D64);
  font-size: 22px;
  font-style: normal;
}
.bz-testimonial__quote::after {
  content: " »";
  color: var(--bz-or, #B89D64);
  font-style: normal;
}

.bz-testimonial__author {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: clamp(14px, 1.6vh, 20px);
  border-top: 1px solid var(--bz-or-30);
}
.bz-testimonial__name {
  font-family: var(--font-d);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--bz-marine, #0B1E38);
}
.bz-testimonial__role {
  font-family: var(--font-d);
  font-size: 12px;
  font-weight: 400;
  font-style: italic;
  color: rgba(11, 30, 56, 0.62);
  letter-spacing: 0.02em;
}

@media (max-width: 720px) {
  .bz-testimonials__grid {
    grid-template-columns: 1fr;
  }
}

/* Compact band — for service pages: 1 testimonial, full-width strip */
.bz-testimonials-band {
  background: var(--bz-creme-2, #EFE9DD);
  padding: clamp(60px, 8vh, 90px) clamp(32px, 5vw, 88px);
  color: var(--bz-marine, #0B1E38);
}
.bz-testimonials-band__inner {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
.bz-testimonials-band__eyebrow {
  font-family: var(--font-d);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--bz-or, #B89D64);
  margin: 0 auto 24px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.bz-testimonials-band__eyebrow::before,
.bz-testimonials-band__eyebrow::after {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--bz-or, #B89D64);
  flex-shrink: 0;
}
.bz-testimonials-band__quote {
  font-family: var(--font-d);
  font-size: clamp(20px, 2vw, 30px);
  font-weight: 300;
  font-style: italic;
  line-height: 1.4;
  color: var(--bz-marine, #0B1E38);
  margin: 0 auto;
  max-width: 28ch;
}
.bz-testimonials-band__quote::before {
  content: "« ";
  color: var(--bz-or, #B89D64);
}
.bz-testimonials-band__quote::after {
  content: " »";
  color: var(--bz-or, #B89D64);
}
.bz-testimonials-band__author {
  font-family: var(--font-d);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(11, 30, 56, 0.78);
  margin: 24px auto 0;
}
.bz-testimonials-band__author::before {
  content: "— ";
  color: var(--bz-or, #B89D64);
}

.pb__eyebrow {
  font-family: var(--font-d);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bz-or);
  margin: 0 0 40px;
}

.pb__title {
  font-family: var(--font-d);
  font-weight: 300;
  font-size: clamp(44px, 4.8vw, 78px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--bz-creme, #F4F1EA);
  margin: 0 0 64px;
  max-width: 24ch;
}

.pb__title em {
  font-style: italic; font-weight: 300; color: var(--bz-or);
}

.pb__frictions {
  list-style: none; padding: 0; margin: 0 0 72px;
  border-top: 1px solid rgba(244,241,234,0.18);
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 56px;
}

.pb__friction {
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: center;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(244,241,234,0.18);
  transition: padding 520ms var(--ease), background 520ms var(--ease);
}

.pb__friction .n {
  font-family: var(--font-d);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.18em;
  color: rgba(184,157,100,0.95);
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
}
/* Friction icons (replaced the old "№ 01" numeric labels).
   Sized at 36 px — visible without dominating the row. */
.pb__friction .n svg {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  transition: color 320ms var(--ease), transform 320ms var(--ease);
}
/* The trailing gold dot (.pb__friction .mark) was removed from the
   layout — kept hidden in case cached HTML still has the markup. */
.pb__friction .mark {
  display: none;
}

.pb__friction .l {
  font-family: var(--font-d);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.5;
  letter-spacing: 0;
  color: rgba(244,241,234,0.96);
  transition: color 320ms var(--ease);
}

/* Hover — subtle color shift on icon + label, no padding-shift
   (the previous padding-left: 12px squeezed the text column and
   forced the label to wrap to extra lines). */
.pb__friction:hover .n {
  color: var(--bz-or, #B89D64);
}
.pb__friction:hover .n svg {
  transform: scale(1.06);
}
.pb__friction:hover .l {
  color: var(--bz-creme, #F4F1EA);
}

.pb__outro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
}

.pb__outro p {
  font-family: var(--font-b);
  font-size: 19px;
  line-height: 1.7;
  color: rgba(244,241,234,0.9);
  margin: 0;
}

.pb__closer {
  font-family: var(--font-d) !important;
  font-weight: 400 !important;
  font-size: 26px !important;
  line-height: 1.4 !important;
  color: var(--bz-creme, #F4F1EA) !important;
  border-left: 1px solid var(--bz-or);
  padding-left: 32px;
}

.pb__closer strong {
  font-weight: 500;
  color: var(--bz-or);
}

/* ============================================
   TRANSITION — bandeau image ambiance
   ============================================ */
.intermezzo {
  position: relative;
  height: 60vh;
  min-height: 440px;
  background: var(--bz-encre-bleu);
  overflow: hidden;
}

.intermezzo__img {
  position: absolute; inset: 0;
  /* background-image is set inline by the Intermezzo widget so authors can
     swap the photo from the Media Library without touching CSS. */
  background-size: cover;
  background-position: center 35%;
  filter: grayscale(15%) contrast(1.05);
  transform: scale(1.05);
  transition: transform 1400ms var(--ease);
}

.intermezzo.is-in .intermezzo__img { transform: scale(1); }

.intermezzo::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,30,56,0.35) 0%, rgba(11,30,56,0.75) 100%);
  pointer-events: none;
}

.intermezzo__quote {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 88px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.intermezzo__quote p {
  font-family: var(--font-d);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--bz-creme, #F4F1EA);
  margin: 0 0 24px;
  max-width: 32ch;
}

.intermezzo__quote p::before { content: "« "; color: var(--bz-or); }

.intermezzo__quote p::after { content: " »"; color: var(--bz-or); }

.intermezzo__quote cite {
  font-family: var(--font-d);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-style: normal;
  color: rgba(244,241,234,0.88);
  display: flex; align-items: center; gap: 16px;
}

.intermezzo__quote cite::before {
  content: ""; width: 40px; height: 1px; background: var(--bz-or);
}

/* ============================================
   BLOC 3 — SERVICES (crème chaud + tabs éditoriaux)
   ============================================ */
.svc {
  background: var(--bz-creme-2);
  padding: 24px 88px 72px;
  position: relative;
  overflow: hidden;
}

.svc::before {
  content: "";
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(11,30,56,0.018) 0 1px, transparent 1px 3px);
  pointer-events: none;
}

.svc > * { position: relative; z-index: 1; }

.svc__head {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 56px;
  margin-bottom: 40px;
  max-width: 1480px;
  margin-left: auto; margin-right: auto;
}

.svc__eyebrow {
  font-family: var(--font-d);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bz-or);
  margin: 0 0 16px;
}

.svc__title {
  font-family: var(--font-d);
  font-weight: 300;
  font-size: clamp(40px, 4.6vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--bz-marine);
  margin: 0;
}

.svc__title em { font-style: italic; font-weight: 300; color: var(--bz-or); }

.svc__intro {
  font-family: var(--font-b);
  font-size: 19px;
  line-height: 1.7;
  color: var(--bz-titane);
  margin: 8px 0 0;
  max-width: 42ch;
}

.svc__grid {
  max-width: 1480px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(11,30,56,0.15);
  border-top: 1px solid rgba(11,30,56,0.15);
  border-bottom: 1px solid rgba(11,30,56,0.15);
}

.svc__card {
  background: var(--bz-creme-2);
  padding: 32px 32px 28px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: background 420ms var(--ease);
}

.svc__card:hover { background: var(--bz-creme-3); }

.svc__head-row {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 24px;
  padding: 0 0 28px;
  border-bottom: 1px solid rgba(11,30,56,0.18);
  margin-bottom: 28px;
}

.svc__card-n {
  font-family: var(--font-d);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.32em;
  color: var(--bz-n-500);
  margin: 0 0 20px;
  display: flex; align-items: center; gap: 14px;
}

.svc__card-n::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: 0.35; max-width: 48px; }

.svc__card h3 {
  font-family: var(--font-d);
  font-weight: 300;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--bz-marine);
  margin: 0 0 14px;
}

.svc__card .svc__tag {
  font-family: var(--font-d);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.12em;
  color: var(--bz-titane);
  margin: 0;
  font-style: italic;
  line-height: 1.5;
}

.svc__body { flex: 1; display: flex; flex-direction: column; }

.svc__body-inner { flex: 1; display: flex; flex-direction: column; }

.svc__card .svc__accroche {
  font-family: var(--font-d);
  font-weight: 300;
  font-style: italic;
  font-size: 21px;
  line-height: 1.45;
  color: var(--bz-marine);
  margin: 0 0 26px;
  padding-left: 22px;
  border-left: 1px solid var(--bz-or);
}

.svc__card .svc__corps {
  font-family: var(--font-b);
  font-size: 19px;
  line-height: 1.7;
  color: var(--bz-titane);
  margin: 0 0 14px;
}

.svc__card .svc__corps + .svc__corps { margin-top: 4px; }

.svc__card .svc__cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-d);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bz-marine);
  text-decoration: none;
  padding-top: 20px;
  margin-top: auto;
  border-top: 1px solid rgba(11,30,56,0.2);
  align-self: flex-start;
  transition: color 260ms var(--ease), gap 260ms var(--ease);
}

.svc__card .svc__cta:hover,
.svc__card .svc__cta:focus-visible { color: var(--bz-or); gap: 20px; }

.svc__card .svc__cta svg { transition: transform 260ms var(--ease); }

.svc__card .svc__cta:hover svg,
.svc__card .svc__cta:focus-visible svg { transform: translateX(4px); }

/* ============================================
   BLOC 4 — POURQUOI BAZINET (encre + portrait + timeline)
   ============================================ */
.pq {
  background: var(--bz-encre-bleu);
  color: rgba(244,241,234,0.88);
  padding: 32px 88px 120px;
  position: relative;
  overflow: hidden;
}

.pq::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(800px 600px at 75% 30%, rgba(184,157,100,0.04), transparent 60%),
    radial-gradient(600px 500px at 10% 80%, rgba(11,30,56,0.3), transparent 60%);
  pointer-events: none;
}

.pq::after {
  display: none;
}

.pq > * { position: relative; z-index: 1; }

.pq .sec__num-vert { color: rgba(244,241,234,0.5); }

.pq__wrap {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 80px;
  max-width: 1480px;
  margin: 0 auto;
  align-items: stretch;
}

.pq__col-portrait { position: relative; }

.pq__caption {
  font-family: var(--font-d);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(244,241,234,0.7);
  margin: 24px 0 0;
  padding-left: 16px;
  border-left: 1px solid var(--bz-or);
}

.pq__portrait {
  position: relative;
  aspect-ratio: 4 / 5.3;
  overflow: hidden;
  background: #0a0a0a;
}

.pq__portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1600ms var(--ease);
}

.pq__portrait::before {
  content: "";
  position: absolute;
  left: -16px; top: -16px;
  width: 40%; height: 40%;
  border-top: 1px solid var(--bz-or);
  border-left: 1px solid var(--bz-or);
  z-index: 2;
  pointer-events: none;
}

.pq__portrait::after {
  content: "";
  position: absolute;
  right: -16px; bottom: -16px;
  width: 40%; height: 40%;
  border-bottom: 1px solid var(--bz-or);
  border-right: 1px solid var(--bz-or);
  z-index: 2;
  pointer-events: none;
}

.pq__meta {
  margin-top: 28px;
  padding: 24px 28px;
  border: 1px solid rgba(244,241,234,0.18);
  background: rgba(244,241,234,0.02);
}

.pq__meta-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(244,241,234,0.12);
  margin-bottom: 18px;
}

.pq__meta-label {
  font-family: var(--font-d);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(184,157,100,0.85);
}

.pq__meta-since {
  font-family: var(--font-d);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(244,241,234,0.5);
}

.pq__roles {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pq__roles li {
  font-family: var(--font-d);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.35;
  color: var(--bz-creme, #F4F1EA);
  display: grid;
  grid-template-columns: 14px 1fr;
  align-items: baseline;
  gap: 12px;
}

.pq__roles li::before {
  content: "";
  width: 6px; height: 1px;
  background: var(--bz-or);
  display: block;
  transform: translateY(-4px);
}

.pq__eyebrow {
  font-family: var(--font-d);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--bz-or);
  margin: 0 0 20px;
}

.pq__signature {
  font-family: var(--font-d);
  font-weight: 200;
  font-size: clamp(90px, 12vw, 180px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--bz-creme, #F4F1EA);
  margin: 0 0 8px;
  display: block;
}

.pq__signature em {
  font-style: italic;
  font-weight: 200;
  color: var(--bz-or);
}

.pq__signature-sub {
  font-family: var(--font-d);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: rgba(244,241,234,0.55);
  margin: 0 0 56px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.pq__signature-sub::before {
  content: "";
  width: 16px; height: 1px;
  background: rgba(244, 241, 234, 0.85);
}

.pq__title {
  font-family: var(--font-d);
  font-weight: 300;
  font-size: clamp(32px, 3.4vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--bz-creme, #F4F1EA);
  margin: 0 0 36px;
  max-width: 18ch;
}

.pq__title em { font-style: italic; font-weight: 300; color: var(--bz-or); }

.pq__lead {
  font-family: var(--font-d);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.45;
  color: rgba(244,241,234,0.95);
  margin: 0 0 40px;
  max-width: 40ch;
}

.pq__lead--quote {
  font-style: italic;
  font-weight: 300;
  position: relative;
  padding-left: 28px;
  border-left: 1px solid var(--bz-or);
  margin-bottom: 16px;
}

.pq__quote-mark {
  color: var(--bz-or);
  font-style: normal;
  font-weight: 400;
  font-size: 1.05em;
  margin-right: 2px;
}

.pq__quote-mark--close {
  margin-left: 4px;
  margin-right: 0;
}

.pq__quote-attr {
  font-family: var(--font-d);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(184,157,100,0.85);
  margin: 0 0 40px;
  padding-left: 28px;
  display: inline-flex;
  align-items: center;
  gap: 16px;
}

.pq__quote-attr-rule {
  width: 36px; height: 1px;
  background: var(--bz-or);
  display: inline-block;
}

.pq__body p {
  font-family: var(--font-b);
  font-size: 18px;
  line-height: 1.75;
  color: rgba(244,241,234,0.7);
  margin: 0 0 20px;
  max-width: 52ch;
}

.pq__timeline {
  margin: 96px auto 0;
  padding-top: 48px;
  max-width: 1480px;
  border-top: 1px solid rgba(244,241,234,0.18);
}

/* Bronze-framed year bookends — mobile-only editorial layout.
   Hidden on desktop where the horizontal 7-col timeline still puts
   the start/end years inline with their roles. */
.pq__tl-bookend { display: none; }

.pq__tl-label {
  font-family: var(--font-d);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(244,241,234,0.5);
  margin: 0 0 56px;
  display: flex; align-items: center; gap: 16px;
}

.pq__tl-label::after {
  content: ""; flex: 1; height: 1px; background: rgba(244,241,234,0.2);
}

.pq__tl {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 20px;
  position: relative;
}

/* Horizontal connecting rail */
.pq__tl::before {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  top: 7px;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(244,241,234,0.1) 0%,
    rgba(198,164,108,0.5) 50%,
    var(--bz-or) 100%);
}

.pq__tl li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Generous vertical breathing between the gold rail and the
     year/role label — the dot floats clean, the text hangs below
     without pressing against the rail. */
  padding-top: 64px;
  font-family: var(--font-d);
  color: var(--bz-creme, #F4F1EA);
}

/* Station dot */
.pq__tl li::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #0E1020;
  border: 1px solid rgba(244,241,234,0.35);
  box-sizing: border-box;
}

.pq__tl li.is-now::before {
  background: var(--bz-or);
  border-color: var(--bz-or);
  box-shadow: 0 0 0 4px rgba(198,164,108,0.15);
}

.pq__tl-year {
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--bz-or);
  font-variant-numeric: tabular-nums;
  margin-bottom: 12px;
  min-height: 14px;
}

.pq__tl li:not(.is-now):not(:first-child) .pq__tl-year {
  color: rgba(244,241,234,0.35);
}

.pq__tl-role {
  font-size: 14px;
  line-height: 1.45;
  color: rgba(244,241,234,0.85);
}

.pq__tl li.is-now .pq__tl-role {
  color: var(--bz-or);
  font-weight: 500;
}

/* ============================================
   BLOC 5 — CTA FINAL (marine solennel)
   ============================================ */
.cta {
  background: var(--bz-marine);
  color: var(--bz-creme, #F4F1EA);
  padding: 200px 88px 180px;
  position: relative;
  overflow: hidden;
  text-align: center;
}

.cta::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(900px 600px at 50% 40%, rgba(184,157,100,0.06), transparent 55%),
    repeating-linear-gradient(45deg, rgba(184,157,100,0.025) 0 1px, transparent 1px 16px);
  pointer-events: none;
}

.cta__wrap { position: relative; z-index: 1; max-width: 1000px; margin: 0 auto; }

.cta__eyebrow {
  font-family: var(--font-d);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--bz-or);
  margin: 0 0 56px;
  display: inline-flex;
  align-items: center;
  gap: 16px;
}

.cta__eyebrow::before,
.cta__eyebrow::after {
  content: ""; width: 40px; height: 1px; background: currentColor; opacity: 0.6;
}

.cta h2 {
  font-family: var(--font-d);
  font-weight: 300;
  font-size: clamp(48px, 5.8vw, 96px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--bz-creme, #F4F1EA);
  margin: 0 0 56px;
}

.cta h2 em { font-style: italic; font-weight: 300; color: var(--bz-or); }

.cta p {
  font-family: var(--font-b);
  font-size: 21px;
  line-height: 1.6;
  color: rgba(244,241,234,0.75);
  margin: 0 auto 80px;
  max-width: 56ch;
}

.cta__action {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  text-decoration: none;
  color: var(--bz-marine);
  background: var(--bz-or);
  padding: 24px 40px;
  font-family: var(--font-d);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  transition: background 320ms var(--ease), color 320ms var(--ease), gap 320ms var(--ease), box-shadow 320ms var(--ease);
  box-shadow: 0 16px 40px -20px rgba(184,157,100,0.8);
}

.cta__action:hover { background: var(--bz-creme, #F4F1EA); color: var(--bz-marine); gap: 32px; box-shadow: 0 24px 60px -20px rgba(244,241,234,0.5); }

.cta__action svg { transition: transform 320ms var(--ease); }

.cta__action:hover svg { transform: translateX(8px); }

/* ============================================
   Bazinet_Button widget — variants and modifiers.
   Extends .cta__action; the primary style stays untouched so the
   closing CTA section keeps its current rendering.
   ============================================ */

.cta__action--secondary {
  background: transparent;
  border: 1px solid var(--bz-or);
  color: var(--bz-or);
  box-shadow: none;
}
.cta__action--secondary:hover {
  background: var(--bz-or);
  color: var(--bz-marine);
  box-shadow: 0 16px 40px -20px rgba(184,157,100,0.6);
}

.cta__action--ghost {
  background: transparent;
  padding: 12px 0;
  color: var(--bz-or);
  letter-spacing: 0.18em;
  box-shadow: none;
}
.cta__action--ghost:hover {
  background: transparent;
  color: var(--bz-or);
  box-shadow: none;
  text-decoration: underline;
  text-underline-offset: 6px;
}

.cta__action--full {
  width: 100%;
  justify-content: center;
}

@media (max-width: 960px) {
  .cta__action { padding: 20px 28px; font-size: 14px; letter-spacing: 0.22em; }
  .cta__action--ghost { padding: 10px 0; }
}

/* ============================================
   FOOTER
   ============================================ */
.ftr {
  background: #0a0a0a;
  color: rgba(244,241,234,0.75);
  padding: 80px 88px 48px;
  font-family: var(--font-d);
}

.ftr__top {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 56px;
  padding-bottom: 40px;
  position: relative;
}

/* Lignes de circuit intégré (cohérent avec les passerelles) */
.ftr__top::after,
.ftr__partners::before,
.ftr__partners::after {
  display: none;
}

.ftr__top > span.ftr__diamond,
.ftr__partners > span.ftr__diamond,
.ftr__partners .via-l,
.ftr__partners .via-r {
  display: none;
}

.ftr__pcb {
  display: block;
  width: 100%;
  height: 28px;
  overflow: visible;
  pointer-events: none;
}

.ftr__pcb .trace {
  fill: none;
  stroke: rgba(184,157,100,0.55);
  stroke-width: 0.8;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.ftr__pcb .trace--dim {
  stroke: rgba(244,241,234,0.14);
  stroke-width: 0.6;
}

.ftr__pcb .pad { fill: var(--bz-or); }

.ftr__pcb .via-outer {
  fill: none;
  stroke: var(--bz-or);
  stroke-width: 1.1;
}

.ftr__pcb .via-inner { fill: #0a0a0a; }

.ftr__pcb .trace--signal {
  fill: none;
  stroke: #FFE2A0;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 60 2000;
  stroke-dashoffset: 2060;
  opacity: 0;
  filter: drop-shadow(0 0 4px rgba(255,220,140,0.85)) drop-shadow(0 0 10px rgba(240,180,80,0.45));
  animation: pcbSignal 5200ms linear infinite 600ms;
}

@media (prefers-reduced-motion: reduce) {
  .ftr__pcb .trace--signal { animation: none; opacity: 0; }
}

.ftr__brand {
  display: flex; align-items: center;
}

.ftr__brand img { height: 64px; width: auto; display: block; }

.ftr__links {
  display: flex; gap: 40px;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ftr__links a {
  color: rgba(244,241,234,0.88);
  text-decoration: none;
  transition: color 220ms var(--ease);
}

.ftr__links a:hover { color: var(--bz-or); }

.ftr__partners {
  display: flex;
  align-items: center;
  gap: 56px;
  padding: 32px 0;
  position: relative;
}

.ftr__partners::before { top: 0; }

.ftr__partners::after { bottom: 0; }

/* Vias aux deux extrémités de chaque ligne partenaires */
.ftr__partners > .ftr__diamond--top { top: -5px; left: 0; transform: none; }

.ftr__partners > .ftr__diamond--bot { bottom: -5px; right: 0; left: auto; transform: none; }

.ftr__partners .via-r { top: -5px; right: 0; }

.ftr__partners .via-l { bottom: -5px; left: 0; }

.ftr__partners-label {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(244,241,234,0.6);
  white-space: nowrap;
}

.ftr__partners-logos {
  display: flex;
  align-items: center;
  gap: 48px;
  flex-wrap: wrap;
}

.ftr__partners-logos img {
  height: 40px;
  width: auto;
  opacity: 0.8;
  filter: grayscale(1) brightness(1.3);
  transition: opacity 280ms var(--ease), filter 280ms var(--ease);
}

.ftr__partners-logos img:hover {
  opacity: 1;
  filter: none;
}

.ftr__bot {
  padding-top: 32px;
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 0.12em;
  color: rgba(244,241,234,0.6);
  display: flex; justify-content: space-between;
}

@media (max-width: 960px) {
  .pb, .svc, .pq, .cta { padding: 40px 24px 72px; }
  .pb__wrap, .svc__head, .pq__wrap { grid-template-columns: 1fr; gap: 32px; }
  .sec__num-vert { display: none; }
  .pb__friction { grid-template-columns: 50px 1fr; gap: 16px; padding: 14px 0; }
  .pb__frictions { grid-template-columns: 1fr; }
  .pb__friction .l { font-size: 18px; }
  .pb__friction .mark { display: none; }
  .pb__outro { grid-template-columns: 1fr; gap: 32px; }
  .pb__closer { border-left: 0; padding-left: 0; border-top: 1px solid rgba(184,157,100,0.5); padding-top: 24px; }
  .intermezzo__quote { padding: 40px 24px; }
  .svc__grid { grid-template-columns: minmax(0, 1fr); }
  .svc__card { min-height: auto; padding: 40px 28px; min-width: 0; }
  .pq__portrait { aspect-ratio: 4/5; max-width: 480px; margin: 0 auto; }
  .pq__signature { font-size: 72px !important; }
  .pq__signature-sub { margin-bottom: 32px; }
  .pq__timeline { margin-top: 48px; padding-top: 32px; }
  .pq__tl-label { margin-bottom: 32px; }
  /* Mobile timeline: vertical rail. Each entry is a row with the dot
     on the left, then role on the same baseline. Year columns are
     hidden — the start/end years live in the bronze-framed bookends
     above and below the timeline (see .pq__tl-bookend). */
  .pq__tl {
    display: block !important;
    grid-template-columns: 1fr;
    gap: 0;
    padding-left: 0;
  }
  .pq__tl::before {
    display: block !important;
    left: 6.5px;
    right: auto;
    top: 12px;
    bottom: 12px;
    width: 1px;
    height: auto;
    background: rgba(244, 241, 234, 0.18);
  }
  .pq__tl li {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 12px 0 12px 28px;
  }
  .pq__tl li + li {
    margin-top: 0;
  }
  .pq__tl li::before {
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    /* Dot fill = original encre-bleu (slightly darker than the marine
       page bg). The box-shadow halo uses the marine surround colour so
       it stays invisible on the page bg while masking the rail line
       behind the dot — no sub-pixel bleed-through on any device. */
    box-shadow: 0 0 0 3px var(--bz-marine, #0B1E38);
  }
  .pq__tl::before { z-index: 1; }
  /* Inline year is hidden on mobile — it lives in the bookends instead. */
  .pq__tl-year {
    display: none;
  }
  .pq__tl-role {
    flex: 1;
    line-height: 1.35;
  }

  /* Year bookends — same visual principle as the "PRENDRE RENDEZ-VOUS"
     eyebrow: short 40 px hairline on each side of the year text,
     gold currentColor at 60 % opacity. Centered cluster, not stretched
     full-width. */
  .pq__tl-bookend {
    display: flex;
    justify-content: center;
    width: 100%;
  }
  .pq__tl-bookend-row {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    font-family: 'JetBrains Mono', ui-monospace, SF Mono, Menlo, monospace;
    font-variant-numeric: tabular-nums;
    color: var(--bz-or, #B89D64);
    letter-spacing: 0.32em;
    line-height: 1;
  }
  .pq__tl-bookend-row::before,
  .pq__tl-bookend-row::after {
    content: '';
    width: 40px;
    height: 1px;
    background: currentColor;
    opacity: 0.6;
  }
  .pq__tl-bookend-row span {
    flex: 0 0 auto;
    font-size: clamp(13px, 4vw, 18px);
    font-weight: 500;
  }
  .pq__tl-bookend-caption {
    margin: 0;
    text-align: center;
    font-family: var(--font-d);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(11px, 3vw, 13px);
    letter-spacing: 0.02em;
    line-height: 1.2;
    color: var(--bz-or-55);
  }
  .pq__tl-bookend--start {
    margin-bottom: clamp(20px, 3vh, 32px);
  }
  .pq__tl-bookend--end {
    margin-top: clamp(20px, 3vh, 32px);
  }
  /* The "is-now" gold dot at the bottom (originally on the 2026 li)
     loses its meaning since 2026 is now in the bookend. Make it
     identical to the others so the visual rail reads cleanly. */
  .pq__tl li.is-now::before {
    background: #0E1020;
    border-color: rgba(244,241,234,0.35);
    box-shadow: none;
  }
  .pq__tl li.is-now .pq__tl-role {
    color: rgba(244,241,234,0.85);
    font-weight: 400;
  }
  .ftr { padding: 48px 24px 32px; }
  .ftr__top { grid-template-columns: 1fr; }
  .ftr__links { flex-wrap: wrap; gap: 24px; }
  .ftr__partners { flex-direction: column; align-items: flex-start; gap: 24px; }
  .ftr__partners-logos { gap: 32px; }
  .ftr__partners-logos img { height: 32px; }
  .ftr__bot { flex-direction: column; gap: 16px; }
}

/* ============================================================
   Elementor host overrides.
   When our widgets sit inside Elementor sections, the default
   1140 px boxed container collapses the hero, passerelle, and
   footer which all rely on full viewport width. We force the
   Elementor container to expand on every section that contains
   one of our top-level wrappers.
   ============================================================ */
body.bz-home .elementor-section .elementor-container,
body.bz-home .elementor-element > .elementor-widget-wrap,
body.bz-home .elementor-widget-bazinet-hero-carousel,
body.bz-home .elementor-widget-bazinet-passerelle,
body.bz-home .elementor-widget-bazinet-problemes,
body.bz-home .elementor-widget-bazinet-intermezzo,
body.bz-home .elementor-widget-bazinet-services,
body.bz-home .elementor-widget-bazinet-pourquoi,
body.bz-home .elementor-widget-bazinet-partners-footer {
  max-width: 100%;
  width: 100%;
}

body.bz-home .elementor-section.elementor-section-boxed > .elementor-container {
  max-width: 100%;
}

/* Elementor wraps each widget in .elementor-widget-container with default padding.
   Our widgets render their own <section> with the right padding, so reset. */
body.bz-home .elementor-widget-bazinet-hero-carousel .elementor-widget-container,
body.bz-home .elementor-widget-bazinet-passerelle .elementor-widget-container,
body.bz-home .elementor-widget-bazinet-problemes .elementor-widget-container,
body.bz-home .elementor-widget-bazinet-intermezzo .elementor-widget-container,
body.bz-home .elementor-widget-bazinet-services .elementor-widget-container,
body.bz-home .elementor-widget-bazinet-pourquoi .elementor-widget-container,
body.bz-home .elementor-widget-bazinet-partners-footer .elementor-widget-container {
  padding: 0;
  margin: 0;
}

/* ============================================================
   Site Header (Theme Builder, non-home pages)
   Slim version of .hdr on a marine background. Reuses the
   maquette's nav typography and gold hover from .hdr__nav, but
   removes the absolute-positioned overlay behaviour that the
   hero relies on.
   ============================================================ */
.bz-site-header {
  background: var(--bz-marine);
  color: var(--bz-creme, #F4F1EA);
  position: relative;
  z-index: 50;
  border-bottom: 1px solid rgba(244,241,234,0.06);
}
.bz-site-header .hdr {
  position: relative;
  top: auto; left: auto; right: auto;
  padding: 22px 56px;
}
.bz-site-header .hdr__logo img {
  height: 52px;
}
.bz-site-header .hdr__nav a {
  color: rgba(244,241,234,0.92);
}
.bz-site-header .hdr__nav a:hover {
  color: var(--bz-or);
  border-bottom-color: var(--bz-or);
}
@media (max-width: 960px) {
  .bz-site-header .hdr { padding: 16px 24px; }
  .bz-site-header .hdr__nav { display: none; }
}

/* Body background on interior pages: marine is reserved for the home hero.
   Everywhere else, default to white so widgets that don't paint their own
   background remain legible. */
body:not(.bz-home) { background: #FFFFFF; }

/* =============================================================
   HERO chapter index — moved here from prevhub-page.css so the
   Réputation page (which doesn't load prevhub-page.css) gets the
   same styling. Editorial table of chapters injected by
   prevhub-hero-index.js into the hero text column.
   ============================================================= */
.ph-hero-index {
	display: block;
	margin-top: clamp(40px, 5vh, 72px);
	padding-top: clamp(24px, 2.8vh, 40px);
	border-top: 1px solid rgba(196, 130, 26, 0.30);
	max-width: 760px;
}

.ph-hero-index__label {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-family: var(--font-d);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.36em;
	text-transform: uppercase;
	color: var(--ph-amber, #C4821A);
	margin-bottom: clamp(20px, 2.4vh, 28px);
}

.ph-hero-index__label::before {
	content: "";
	display: inline-block;
	width: 28px;
	height: 1px;
	background: var(--ph-amber, #C4821A);
}

.ph-hero-index__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(14px, 1.6vh, 22px) clamp(24px, 2.8vw, 44px);
}

.ph-hero-index__item {
	margin: 0;
}

.ph-hero-index__link {
	display: inline-flex;
	align-items: baseline;
	gap: 16px;
	padding: 6px 0;
	font-family: var(--font-d);
	font-size: clamp(15px, 1.1vw, 18px);
	font-weight: 300;
	color: rgba(244, 241, 234, 0.92);
	text-decoration: none;
	cursor: pointer;
	position: relative;
	transition:
		color 320ms cubic-bezier(0.3, 0, 0, 1),
		gap   320ms cubic-bezier(0.3, 0, 0, 1);
}

.ph-hero-index__num {
	flex-shrink: 0;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.20em;
	color: var(--ph-amber, #C4821A);
	font-variant-numeric: tabular-nums;
	min-width: 26px;
}

.ph-hero-index__text {
	display: inline-flex;
	align-items: baseline;
	gap: 10px;
	flex: 1;
}

.ph-hero-index__text::after {
	content: "";
	display: inline-block;
	width: 0;
	height: 1px;
	background: var(--ph-amber, #C4821A);
	transition: width 320ms cubic-bezier(0.3, 0, 0, 1);
	align-self: center;
}

.ph-hero-index__link:hover,
.ph-hero-index__link:focus-visible {
	color: var(--ph-amber-soft, #E0A840);
	gap: 18px;
	outline: none;
}

.ph-hero-index__link:hover .ph-hero-index__text::after,
.ph-hero-index__link:focus-visible .ph-hero-index__text::after {
	width: clamp(20px, 1.8vw, 32px);
}

@media (max-width: 960px) {
	.ph-hero-index {
		margin-top: 40px;
		padding-top: 20px;
	}
	.ph-hero-index__list {
		grid-template-columns: 1fr;
		gap: 12px;
	}
}

/* =============================================================
   LEGAL PAGES — politique de confidentialité, mentions légales.
   Wrapper injected via the_content filter (functions.php). Editorial
   layout: constrained reading width, sober hierarchy, no Elementor
   chrome. Reuses the site's marine + amber palette.
   ============================================================= */
.bz-legal {
	max-width: 800px;
	margin: 0 auto;
	padding: clamp(80px, 12vh, 140px) clamp(20px, 4vw, 40px) clamp(60px, 10vh, 100px);
	color: var(--bz-marine, #0B1E38);
	font-family: var(--font-b);
	font-size: 17px;
	line-height: 1.75;
}

.bz-legal__head {
	margin-bottom: clamp(40px, 6vh, 64px);
	padding-bottom: clamp(20px, 3vh, 32px);
	border-bottom: 1px solid var(--bz-or-30);
}

.bz-legal__title {
	font-family: var(--font-d);
	font-size: clamp(32px, 4vw, 48px);
	font-weight: 300;
	margin: 0;
	letter-spacing: -0.01em;
	line-height: 1.15;
	color: var(--bz-marine, #0B1E38);
}

.bz-legal__content h2 {
	font-family: var(--font-d);
	font-size: clamp(20px, 2vw, 24px);
	font-weight: 600;
	margin: clamp(40px, 5vh, 56px) 0 clamp(12px, 1.6vh, 16px);
	letter-spacing: -0.005em;
	color: var(--bz-marine, #0B1E38);
}

.bz-legal__content p {
	margin: 0 0 clamp(14px, 2vh, 20px);
}

.bz-legal__content ul {
	margin: 0 0 clamp(14px, 2vh, 20px);
	padding-left: 24px;
}

.bz-legal__content li {
	margin-bottom: 8px;
}

.bz-legal__content strong {
	color: var(--bz-marine, #0B1E38);
	font-weight: 600;
}

.bz-legal__content em {
	font-style: italic;
}

.bz-legal__content a {
	color: var(--bz-or, #B89D64);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color 220ms cubic-bezier(0.3, 0, 0, 1);
}

.bz-legal__content a:hover,
.bz-legal__content a:focus-visible {
	color: var(--bz-marine, #0B1E38);
	outline: none;
}

/* =============================================================
   MOBILE MENU — hamburger button + slide-in drawer overlay.
   Visible only ≤ 960 px. The desktop Elementor header is hidden
   below this breakpoint so mobile gets a clean experience without
   the wordmark band eating viewport. Drawer uses the same
   marine-frosted glass as the desktop sticky header for visual
   continuity (rgba(4, 11, 22, 0.78) + 16 px backdrop blur).
   ============================================================= */

/* Mobile-only display rules ---------------------------------- */

@media (max-width: 960px) {
	/* Hide the Elementor header (wordmark + nav band). The mobile
	   menu replaces it entirely with the hamburger toggle. */
	.elementor-location-header { display: none !important; }
	/* Compensate for the lost header padding so content starts at the top */
	body { padding-top: 0; }
}

/* Burger visible jusqu'à 1099px pour combler la « dead zone » qui
   existait entre 961 (burger qui se cachait avant) et 1100 (largeur
   où le menu desktop Elementor revient). Sans ce raise, l'utilisateur
   se retrouvait sans aucun menu visible entre 970 et 1099 px.
   Bug user 2026-05-19. */
@media (min-width: 1100px) {
	/* Hide the mobile toggle + drawer entirely on desktop */
	.bz-mobile-toggle,
	.bz-mobile-drawer { display: none !important; }
}

/* Body scroll lock when drawer is open */
html.bz-mobile-menu-open,
html.bz-mobile-menu-open body {
	overflow: hidden;
	overscroll-behavior: contain;
}

/* ----- Back-to-top button (mobile only) -----
   Appears after scrolling past 60vh / 300px (whichever is greater).
   Smooth scroll on tap. Hidden on desktop (≥ 961 px). Animates in/out
   via opacity + translate, not display:none, so the transition is smooth. */
.bz-back-to-top {
	position: fixed;
	right: 18px;
	bottom: calc(18px + env(safe-area-inset-bottom, 0px));
	z-index: 9997;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--bz-or, #B89D64);
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transform: translateY(8px);
	pointer-events: none;
	transition: opacity 320ms cubic-bezier(0.3, 0, 0, 1),
	            transform 320ms cubic-bezier(0.3, 0, 0, 1),
	            background 220ms cubic-bezier(0.3, 0, 0, 1),
	            border-color 220ms cubic-bezier(0.3, 0, 0, 1);
	-webkit-tap-highlight-color: transparent;
}

.bz-back-to-top:not([hidden]) {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.bz-back-to-top:hover,
.bz-back-to-top:focus-visible {
	color: var(--bz-creme, #F4F1EA);
	outline: none;
}

@media (min-width: 961px) {
	.bz-back-to-top { display: none !important; }
}

/* ----- Floating "Discutons" CTA (mobile, long pages) -----
   Sits bottom-LEFT (back-to-top is bottom-right) so they don't fight
   for the same thumb zone. Appears after the user has scrolled past
   the first viewport — the "I'm reading and need a way out" moment.
   Marine-frosted glass with hairline gold border + italic gold label
   so it reads as a *quiet invitation*, not a sticky bar. */
/* Floating CTA hidden on mobile across the entire site — the contact
   anchor in the bottom of each page already covers the same intent
   without competing with the mobile menu drawer or the small viewport. */
@media (max-width: 960px) {
	.bz-floating-cta {
		display: none !important;
	}
}

.bz-floating-cta {
	position: fixed;
	left: 18px;
	bottom: calc(18px + env(safe-area-inset-bottom, 0px));
	z-index: 9997;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	background: rgba(4, 11, 22, 0.78);
	-webkit-backdrop-filter: blur(14px) saturate(150%);
	backdrop-filter: blur(14px) saturate(150%);
	border: 1px solid rgba(184, 157, 100, 0.35);
	color: var(--bz-or, #B89D64);
	text-decoration: none;
	font-family: var(--font-d);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	line-height: 1;
	opacity: 0;
	transform: translateY(8px);
	pointer-events: none;
	transition: opacity 360ms cubic-bezier(0.3, 0, 0, 1),
	            transform 360ms cubic-bezier(0.3, 0, 0, 1),
	            background 240ms cubic-bezier(0.3, 0, 0, 1),
	            border-color 240ms cubic-bezier(0.3, 0, 0, 1);
	-webkit-tap-highlight-color: transparent;
}
.bz-floating-cta:not([hidden]) {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}
.bz-floating-cta:hover,
.bz-floating-cta:focus-visible {
	background: rgba(184, 157, 100, 0.18);
	border-color: var(--bz-or, #B89D64);
	color: var(--bz-or, #B89D64);
	outline: none;
}
.bz-floating-cta__arrow {
	flex-shrink: 0;
	transition: transform 280ms cubic-bezier(0.3, 0, 0, 1);
}
.bz-floating-cta:hover .bz-floating-cta__arrow {
	transform: translateX(2px);
}
@media (min-width: 961px) {
	.bz-floating-cta { display: none !important; }
}

/* ----- Hamburger toggle button ----- */

/* Naked 3-line hamburger — no chip, no border, no backdrop. Just three
   gold hairline strokes floating top-right. The bars carry a subtle
   drop-shadow so they stay readable when the toggle sits over a cream
   or photo background. The button keeps a 44 × 44 tap area for a11y
   even though the visible bars only span 26 px. */
.bz-mobile-toggle {
	position: fixed;
	top: 14px;
	right: 14px;
	z-index: 9999;
	width: 52px;
	height: 52px;
	padding: 0;
	margin: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	-webkit-tap-highlight-color: transparent;
	transition: transform 320ms cubic-bezier(0.3, 0, 0, 1);
}

.bz-mobile-toggle:focus-visible {
	outline: 2px solid var(--bz-or, #B89D64);
	outline-offset: 4px;
}

.bz-mobile-toggle__bars {
	position: relative;
	display: block;
	width: 30px;
	height: 16px;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
}

.bz-mobile-toggle__bar {
	position: absolute;
	left: 0;
	width: 100%;
	height: 1.8px;
	background: var(--bz-or, #B89D64);
	border-radius: 0;
	transition:
		transform 320ms cubic-bezier(0.3, 0, 0, 1),
		opacity 220ms cubic-bezier(0.3, 0, 0, 1),
		width 320ms cubic-bezier(0.3, 0, 0, 1);
}

.bz-mobile-toggle__bar--top { top: 0; }
.bz-mobile-toggle__bar--mid { top: 50%; transform: translateY(-50%); width: 70%; }
.bz-mobile-toggle__bar--bot { bottom: 0; }

/* Open state: morph to X */
.bz-mobile-toggle.is-open .bz-mobile-toggle__bar--top {
	top: 50%;
	transform: translateY(-50%) rotate(45deg);
}

.bz-mobile-toggle.is-open .bz-mobile-toggle__bar--mid {
	opacity: 0;
	width: 0;
}

.bz-mobile-toggle.is-open .bz-mobile-toggle__bar--bot {
	bottom: auto;
	top: 50%;
	transform: translateY(-50%) rotate(-45deg);
}

/* ----- Drawer overlay ----- */

.bz-mobile-drawer {
	position: fixed;
	inset: 0;
	z-index: 9998;
	display: flex;
	flex-direction: column;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition:
		opacity 380ms cubic-bezier(0.3, 0, 0, 1),
		visibility 0s linear 380ms;
	background: rgba(4, 11, 22, 0.78);
	-webkit-backdrop-filter: blur(20px) saturate(150%);
	backdrop-filter: blur(20px) saturate(150%);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.bz-mobile-drawer { background: rgba(4, 11, 22, 0.96); }
}

.bz-mobile-drawer.is-open {
	pointer-events: auto;
	opacity: 1;
	visibility: visible;
	transition:
		opacity 380ms cubic-bezier(0.3, 0, 0, 1),
		visibility 0s linear 0s;
}

.bz-mobile-drawer__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0;
	width: 100%;
	flex: 1 1 auto;
	min-height: 0;
	padding: clamp(80px, 12vh, 120px) clamp(28px, 8vw, 56px) 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	transform: translateY(-12px);
	opacity: 0;
	transition:
		transform 480ms cubic-bezier(0.3, 0, 0, 1) 60ms,
		opacity 480ms cubic-bezier(0.3, 0, 0, 1) 60ms;
}

.bz-mobile-drawer.is-open .bz-mobile-drawer__inner {
	transform: translateY(0);
	opacity: 1;
}

/* Brand mark — sits between the menu and the legal sub-row like an
   editorial publication signature. The wrapper absorbs the leftover
   vertical space (`flex: 1 0 auto` — grows but never shrinks below
   the image) and centers its child, so on tall phones the hex sits
   in the middle, on short phones it stays at full size and the inner
   scrolls if needed. */
.bz-mobile-drawer__brand {
	display: flex;
	flex: 1 0 auto;
	align-items: center;
	justify-content: center;
	padding: clamp(20px, 4vh, 40px) 0;
	transition: opacity 220ms cubic-bezier(0.3, 0, 0, 1);
	/* Drawer brand is wrapped in a flex spacer that absorbs leftover
	   vertical space — that's a large invisible click area below the
	   menu items. Disable pointer events on the spacer itself; only
	   the visible IMG (re-enabled below) can receive taps so a finger
	   landing in the gap doesn't accidentally jump to the home page. */
	pointer-events: none;
}
.bz-mobile-drawer__brand img {
	pointer-events: auto;
}

.bz-mobile-drawer__brand:hover,
.bz-mobile-drawer__brand:focus-visible {
	opacity: 0.85;
	outline: none;
}

.bz-mobile-drawer__brand img {
	display: block;
	width: clamp(56px, 9vh, 80px);
	height: auto;
	opacity: 0.7;
}

/* ----- Menu list inside the drawer ----- */

.bz-mobile-drawer__nav {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
}

/* Editorial table-of-contents layout: each top-level entry is a big
   italic light Montserrat title. The Services chapter contains its
   three sub-services as a hairline-bordered list below its title. */
.bz-mobile-drawer .bz-mobile-menu__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.bz-mobile-drawer .bz-mobile-menu__list > li {
	margin: 0;
	padding: 0;
	border-bottom: 0;
	position: relative;
}

/* Top-level link — big italic light Montserrat. Same style for all
   three top entries (Services / À propos / Contact) so the menu reads
   as one coherent index, not as "an eyebrow then two links". */
.bz-mobile-drawer .bz-mobile-menu__list > li > a {
	display: block;
	padding: 4px 0 0;
	font-family: var(--font-d);
	font-size: clamp(28px, 8vw, 38px);
	font-weight: 200;
	font-style: italic;
	letter-spacing: -0.005em;
	line-height: 1.1;
	color: rgba(244, 241, 234, 0.85);
	text-decoration: none;
	transition: color 220ms cubic-bezier(0.3, 0, 0, 1), padding-left 220ms cubic-bezier(0.3, 0, 0, 1);
}

/* Services parent (no href) is unified with the other two top items
   visually — same big italic light. Override the global non-clickable
   parent rules from the desktop dropdown styles. */
.bz-mobile-drawer .menu-item-has-children > a:not([href]),
.bz-mobile-drawer .menu-item-has-children > a[href="#"] {
	font-family: var(--font-d);
	font-size: clamp(28px, 8vw, 38px);
	font-weight: 200;
	font-style: italic;
	text-transform: none;
	letter-spacing: -0.005em;
	color: rgba(244, 241, 234, 0.85);
	padding: 4px 0 0;
	cursor: default;
}

/* Sub-services list — gold uppercase mini-caps, hairline left border
   so they read as a "chapter sub-section" indented under Services. */
.bz-mobile-drawer .sub-menu {
	list-style: none;
	margin: clamp(14px, 2vh, 18px) 0 0 0;
	padding: 0 0 0 clamp(18px, 4vw, 24px);
	display: flex;
	flex-direction: column;
	gap: 0;
	border-left: 1px solid var(--bz-or-30);
}

.bz-mobile-drawer .sub-menu li {
	margin: 0;
}

.bz-mobile-drawer .sub-menu li a {
	display: block;
	padding: clamp(11px, 1.5vh, 14px) 0;
	font-family: var(--font-d);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--bz-or, #B89D64);
	text-decoration: none;
	transition: color 220ms cubic-bezier(0.3, 0, 0, 1), padding-left 220ms cubic-bezier(0.3, 0, 0, 1);
}

.bz-mobile-drawer .sub-menu li a:hover,
.bz-mobile-drawer .sub-menu li a:focus-visible {
	color: var(--bz-creme, #F4F1EA);
	padding-left: 6px;
	outline: none;
}

.bz-mobile-drawer a:hover,
.bz-mobile-drawer a:focus-visible {
	color: var(--bz-or, #B89D64);
	outline: none;
}

.bz-mobile-drawer .current-menu-item > a {
	color: var(--bz-or, #B89D64);
}

/* Generous spacing between chapters — no decorative separator. The
   chapter numbers (Nº 01 / 02 / 03) and the big italic titles do the
   visual work. The whitespace alone signals "this is a new chapter". */
.bz-mobile-drawer .bz-mobile-menu__list > li + li {
	margin-top: clamp(40px, 6vh, 60px);
}

/* === ACCORDION on the Services parent ============================
   On mobile, "Services" is a non-clickable parent on desktop (hover
   dropdown). On mobile we make it tap-to-expand: the sub-menu slides
   open, the chevron rotates, aria-expanded flips. Single tap reveals
   the 3 services. Second tap on a service navigates.
   ================================================================ */

/* Wrap the Services parent <a>/<button> in a flex row so the chevron
   sits at the right edge of the title. */
.bz-mobile-drawer .menu-item-has-children > a:not([href]),
.bz-mobile-drawer .menu-item-has-children > a[href="#"],
.bz-mobile-drawer .menu-item-has-children > .bz-submenu-toggle {
	display: flex !important;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	background: transparent;
	border: 0;
	cursor: pointer;
	text-align: left;
	-webkit-tap-highlight-color: transparent;
}

/* Chevron — small gold caret that rotates on expand. */
.bz-mobile-drawer .bz-submenu-chevron {
	flex-shrink: 0;
	width: 14px;
	height: 14px;
	margin-bottom: 6px;
	color: var(--bz-or, #B89D64);
	transition: transform 360ms cubic-bezier(0.3, 0, 0, 1);
	pointer-events: none;
}

.bz-mobile-drawer .menu-item-has-children[aria-expanded="true"] .bz-submenu-chevron,
.bz-mobile-drawer .menu-item-has-children.is-open .bz-submenu-chevron {
	transform: rotate(180deg);
}

/* Sub-menu collapsed by default — height 0 + transition. The
   max-height value is generous enough for 3-5 sub-items at any size. */
.bz-mobile-drawer .menu-item-has-children .sub-menu {
	max-height: 0;
	overflow: hidden;
	margin-top: 0;
	border-left-color: transparent;
	transition:
		max-height 480ms cubic-bezier(0.3, 0, 0, 1),
		margin-top 320ms cubic-bezier(0.3, 0, 0, 1),
		border-left-color 320ms cubic-bezier(0.3, 0, 0, 1);
}

.bz-mobile-drawer .menu-item-has-children.is-open .sub-menu {
	max-height: 400px;
	margin-top: clamp(14px, 2vh, 18px);
	border-left-color: var(--bz-or-30);
}

/* ----- Footer legal mini-row -----
   Direct child of `.bz-mobile-drawer` (sibling of `__inner`) so it is
   pinned at the visual bottom of the drawer regardless of menu height
   or accordion state. The inner has `flex: 1` so it grows to fill the
   remaining space; legal stays at its natural height at the bottom. */

.bz-mobile-drawer__legal {
	flex: 0 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: clamp(14px, 2vh, 20px) clamp(28px, 8vw, 56px) clamp(18px, 3vh, 28px);
	border-top: 1px solid rgba(184, 157, 100, 0.14);
	font-family: var(--font-d);
	font-size: 10.5px;
	font-weight: 400;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.bz-mobile-drawer__legal a {
	color: rgba(244, 241, 234, 0.55);
	text-decoration: none;
}

.bz-mobile-drawer__legal a:hover,
.bz-mobile-drawer__legal a:focus-visible {
	color: var(--bz-or, #B89D64);
	outline: none;
}

.bz-mobile-drawer__legal span {
	color: rgba(244, 241, 234, 0.25);
}

/* On short phones (small iPhones, landscape) tighten the inner
   spacing so the brand mark always has room to sit centered without
   being clipped by the legal sub-row at the bottom. */
@media (max-height: 720px) {
	.bz-mobile-drawer__inner {
		padding-top: clamp(56px, 9vh, 80px);
	}
	.bz-mobile-drawer .bz-mobile-menu__list > li + li {
		margin-top: clamp(22px, 4vh, 36px);
	}
	.bz-mobile-drawer .bz-mobile-menu__list > li > a,
	.bz-mobile-drawer .menu-item-has-children > a:not([href]),
	.bz-mobile-drawer .menu-item-has-children > a[href="#"] {
		font-size: clamp(22px, 6vw, 30px);
	}
	.bz-mobile-drawer__brand {
		padding: clamp(10px, 2vh, 20px) 0;
	}
}

/* =============================================================
   MOBILE HEROES — Option B: glass card overlay over the photo.
   Applies to all service-page heroes (PrevHub, Audit, Réputation,
   À propos). The photo becomes the section background; the text
   column transforms into a marine-frosted glass card with a 1.5 px
   gold left-border (Bazinet signature). Desktop layout untouched.
   ============================================================= */
@media (max-width: 960px) {
	html body.bz-prevhub .ph-hero,
	html body.bz-audit-et-optimisation .au-hero,
	html body.bz-reputation-en-ligne .re-hero,
	html body.bz-a-propos .ap-hero {
		position: relative;
		min-height: 100vh;
		min-height: 100dvh;
		overflow: hidden;
	}

	/* Container: stack but keep the photo positioned absolutely behind
	   the text card. Card sits at a CONSISTENT vertical position
	   (~30 % from the top) across pages regardless of content height,
	   so the photo-above-card ratio reads as one coherent system rather
	   than four pages each with their own vertical balance. */
	html body.bz-prevhub .ph-hero > .elementor-container,
	html body.bz-audit-et-optimisation .au-hero > .elementor-container,
	html body.bz-reputation-en-ligne .re-hero > .elementor-container,
	html body.bz-a-propos .ap-hero > .elementor-container {
		flex-direction: column !important;
		justify-content: flex-start !important;
		align-items: stretch !important;
		min-height: 100vh;
		min-height: 100dvh;
		padding: 30vh 0 clamp(40px, 8vh, 80px) !important;
		gap: 0 !important;
	}

	/* Photo column: pulled out of flow, placed behind everything as
	   the section's full-bleed cinematic backdrop. */
	html body.bz-prevhub .ph-hero__col-photo,
	html body.bz-audit-et-optimisation .au-hero__col-photo,
	html body.bz-reputation-en-ligne .re-hero__col-photo,
	html body.bz-a-propos .ap-hero__photo-col {
		position: absolute !important;
		inset: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		z-index: 0;
	}

	html body.bz-prevhub .ph-hero__col-photo .elementor-element-populated,
	html body.bz-audit-et-optimisation .au-hero__col-photo .elementor-element-populated,
	html body.bz-reputation-en-ligne .re-hero__col-photo .elementor-element-populated,
	html body.bz-a-propos .ap-hero__photo-col .elementor-element-populated {
		height: 100%;
		min-height: 100%;
		padding: 0 !important;
	}

	html body.bz-prevhub .ph-hero__col-photo img,
	html body.bz-audit-et-optimisation .au-hero__col-photo img,
	html body.bz-reputation-en-ligne .re-hero__col-photo img,
	html body.bz-a-propos .ap-hero__photo-col img,
	html body.bz-a-propos .ap-hero__photo-frame,
	html body.bz-a-propos .ap-hero__photo-frame img {
		width: 100% !important;
		height: 100% !important;
		min-height: 100%;
		max-width: 100%;
		object-fit: cover !important;
		object-position: center !important;
	}

	/* Text column: becomes a centered glass card. Marine frost with
	   gold left-border (the same signature used on `.bz-cross-sell`
	   accents). Padding tuned for a 320 px viewport without crowding. */
	html body.bz-prevhub .ph-hero__col-text,
	html body.bz-audit-et-optimisation .au-hero__col-text,
	html body.bz-reputation-en-ligne .re-hero__col-text,
	html body.bz-a-propos .ap-hero__text-col {
		position: relative;
		z-index: 1;
		width: auto !important;
		max-width: none !important;
		margin: 0 clamp(16px, 5vw, 28px);
	}

	html body.bz-prevhub .ph-hero__col-text .elementor-element-populated,
	html body.bz-audit-et-optimisation .au-hero__col-text .elementor-element-populated,
	html body.bz-reputation-en-ligne .re-hero__col-text .elementor-element-populated,
	html body.bz-a-propos .ap-hero__text-col .elementor-element-populated {
		padding: clamp(28px, 4.5vh, 44px) clamp(24px, 5vw, 36px) !important;
		background: rgba(4, 11, 22, 0.68);
		-webkit-backdrop-filter: blur(14px) saturate(150%);
		backdrop-filter: blur(14px) saturate(150%);
		border-left: 1.5px solid var(--bz-or, #B89D64);
		box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.55);
		min-height: auto !important;
	}

	/* Fallback for browsers without backdrop-filter — solid marine. */
	@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
		html body.bz-prevhub .ph-hero__col-text .elementor-element-populated,
		html body.bz-audit-et-optimisation .au-hero__col-text .elementor-element-populated,
		html body.bz-reputation-en-ligne .re-hero__col-text .elementor-element-populated,
		html body.bz-a-propos .ap-hero__text-col .elementor-element-populated {
			background: rgba(4, 11, 22, 0.92);
		}
	}

	/* H1 + lead inside the card scale down for mobile reading comfort.
	   Desktop sizes (clamp values) already handle this for some pages,
	   but the card layout justifies tighter mobile typography. */
	html body.bz-prevhub .ph-hero__col-text .elementor-widget-heading h1,
	html body.bz-audit-et-optimisation .au-hero__col-text .elementor-widget-heading h1,
	html body.bz-reputation-en-ligne .re-hero__col-text .elementor-widget-heading h1,
	html body.bz-a-propos .ap-hero__text-col .elementor-widget-heading h1 {
		font-size: clamp(28px, 8vw, 40px);
		line-height: 1.1;
	}

}

/* Hide the chapter index ("Parcours") on small mobile — too dense in a
   small glass card. The mobile menu drawer already exposes the service
   navigation. Tablets ≥ 720 px keep it. */
@media (max-width: 720px) {
	.ph-hero-index { display: none !important; }
}

/* =============================================================
   HOME HERO — Mobile Option B: glass card overlay over the
   carousel slide photos. Same visual system as the 4 service
   pages so the entire site reads as one coherent mobile design.
   The carousel rotation logic stays intact — only the visual
   container of the text changes.
   ============================================================= */
@media (max-width: 960px) {
	html body.bz-home .hero {
		/* Use small-viewport-height (svh) so the carousel arrows in the
		   `.hero__dock` ALWAYS stay above the dynamic mobile URL bar on
		   first load. Plain 100vh would let the dock slip under Safari's
		   URL bar; svh excludes that bar by definition. */
		min-height: 100svh !important;
		height: 100svh;
		max-height: 100svh;
		position: relative;
	}

	/* Make the photo cover the whole hero */
	html body.bz-home .hero__photo,
	html body.bz-home .hero__photo img {
		width: 100%;
		height: 100%;
	}

	html body.bz-home .hero__photo img {
		object-fit: cover;
		object-position: center;
	}

	/* Carousel dock — re-styled as a glass FOOTER PANEL of the card,
	   not a separate band. Same marine-frost chrome as the text-wrap
	   (bg, blur, gold left border) and matching horizontal margins,
	   so the card + dock read as one continuous editorial vitrine.
	   Counter sits left, arrows right, hairline rule on top as the
	   footer separator. */
	/* Hide the global desktop dock on mobile — pagination now lives
	   inside each glass card via .hero__act-footer (rendered per slide). */
	html body.bz-home .hero__dock {
		display: none !important;
	}

	/* Glass card on home — flex column with a soft floor of 38 svh so
	   short slides (e.g. the master "Des suivis automatisés…") get a
	   minimal presence and don't feel like a label vs the photo. Tall
	   slides (Audit) extend naturally past the floor — no forced 60%
	   ceiling, just a baseline for visual rhythm across the carousel. */
	html body.bz-home .hero__text-wrap {
		display: flex !important;
		flex-direction: column !important;
		margin-bottom: clamp(48px, 8svh, 88px) !important;
		min-height: 38svh !important;
		padding-bottom: clamp(18px, 2.6vh, 28px) !important;
	}

	html body.bz-home .hero__texts {
		flex: 0 0 auto;
	}

	html body.bz-home .hero__act-footer {
		margin-top: auto !important;
	}

	/* In-card pagination — 4 refined rectangles, evenly distributed, the
	   active one richly gold with a soft halo, the others a thin cream
	   wash. Hairline (2 px) for editorial restraint, distributed via
	   flex 1 1 0 so they carry the same width whatever the card. */
	html body.bz-home .hero__act-footer {
		display: flex !important;
		align-items: stretch !important;
		justify-content: space-between !important;
		gap: clamp(6px, 1.8vw, 10px) !important;
		margin-top: auto !important;
		padding-top: clamp(16px, 2.6vh, 22px) !important;
		border-top: 1px solid rgba(184, 157, 100, 0.18);
		pointer-events: auto;
	}

	html body.bz-home .hero__prog-bar {
		all: unset;
		flex: 1 1 0;
		min-width: 24px;
		height: 2px;
		background: linear-gradient(90deg,
			rgba(244, 241, 234, 0.14) 0%,
			rgba(244, 241, 234, 0.24) 50%,
			rgba(244, 241, 234, 0.14) 100%);
		cursor: pointer;
		box-sizing: border-box;
		position: relative;
		overflow: hidden;
		transition: box-shadow 360ms cubic-bezier(0.3, 0, 0, 1);
		-webkit-tap-highlight-color: transparent;
	}
	/* 44 px tap target around the 2 px visual line */
	html body.bz-home .hero__prog-bar::before {
		content: '';
		position: absolute;
		inset: -22px -2px;
		z-index: 2;
	}
	/* Gold fill that grows left→right over the 9 s autoplay tick. Sits
	   absolute on top of the bar so its width never affects layout (zero
	   reflow). Uses a CSS animation rather than a transition so the fill
	   plays even when .is-active is the initial server-rendered state on
	   the first bar (transitions don't fire on initial computed values). */
	@keyframes bz-prog-fill {
		from { transform: scaleX(0); }
		to   { transform: scaleX(1); }
	}
	html body.bz-home .hero__prog-bar::after {
		content: '';
		position: absolute;
		inset: 0;
		background: linear-gradient(90deg,
			rgba(184, 157, 100, 0.85) 0%,
			rgba(212, 184, 124, 1) 50%,
			rgba(184, 157, 100, 0.85) 100%);
		transform: scaleX(0);
		transform-origin: left center;
		pointer-events: none;
		z-index: 1;
	}
	html body.bz-home .hero__prog-bar.is-active {
		box-shadow: 0 0 0 1px rgba(184, 157, 100, 0.18),
		            0 0 14px -2px var(--bz-or-55);
	}
	html body.bz-home .hero__prog-bar.is-active::after {
		animation: bz-prog-fill 9000ms linear forwards;
	}
	html body.bz-home .hero__prog-bar:hover,
	html body.bz-home .hero__prog-bar:focus-visible {
		background: var(--bz-or-55);
		outline: none;
	}


	/* Tighten act spacing on mobile so the act content doesn't push
	   against the in-card footer. */
	html body.bz-home .hero__act .eyebrow {
		margin-bottom: clamp(20px, 3vh, 28px) !important;
	}
	html body.bz-home .hero__svc-ctas {
		margin-top: clamp(20px, 3vh, 28px) !important;
	}

	html body.bz-home .hero .arrows {
		grid-column: 1;
		justify-self: center;
		align-self: center;
		gap: 18px !important;
		margin: 0;
	}

	html body.bz-home .arr {
		width: 56px !important;
		height: 56px !important;
		min-height: 56px;
		min-width: 56px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		background: rgba(4, 11, 22, 0.55);
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
		border: 1px solid rgba(184, 157, 100, 0.45);
		color: var(--bz-or, #B89D64);
		transition: background 220ms cubic-bezier(0.3, 0, 0, 1), border-color 220ms cubic-bezier(0.3, 0, 0, 1);
	}

	html body.bz-home .arr:hover,
	html body.bz-home .arr:focus-visible {
		background: rgba(184, 157, 100, 0.18);
		border-color: var(--bz-or, #B89D64);
		outline: none;
	}

	html body.bz-home .arr svg,
	html body.bz-home .arr [class*="line"] {
		color: var(--bz-or, #B89D64);
	}

	/* Counter "02 / 04" — make it readable on all photos */
	html body.bz-home .counter {
		color: var(--bz-creme, #F4F1EA);
		font-size: 14px;
		letter-spacing: 0.2em;
		text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
	}

	/* Text wrap becomes the floating glass card. Same vertical position
	   (~25 vh from top — slightly higher than service pages so the
	   carousel arrows have breathing room below). */
	html body.bz-home .hero__text-wrap {
		padding: clamp(28px, 4.5vh, 44px) clamp(24px, 5vw, 36px) !important;
		margin: 25svh clamp(16px, 5vw, 28px) clamp(110px, 14svh, 140px) !important;
		background: rgba(4, 11, 22, 0.68);
		-webkit-backdrop-filter: blur(14px) saturate(150%);
		backdrop-filter: blur(14px) saturate(150%);
		border-left: 1.5px solid var(--bz-or, #B89D64);
		box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.55);
		grid-column: 1;
		align-self: start;
	}

	@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
		html body.bz-home .hero__text-wrap {
			background: rgba(4, 11, 22, 0.92);
		}
	}

	/* Hero title — fluid scale across all phone formats. Uses both
	   viewport width (vw) and viewport height (svh) so the title shrinks
	   on short Android phones and on narrow viewports. Tuned so 320 px
	   renders at ~26, 360 at ~30, 390 at ~32, 414 at ~34, larger phones
	   ~36, never exceeding 38. Bumped on user feedback (2026-05-06). */
	html body.bz-home .hero__title {
		font-size: clamp(26px, calc(6.5vw + 0.4vh), 38px) !important;
		line-height: 1.1;
		letter-spacing: -0.005em;
	}

	/* Eyebrow — small uppercase chapter label above the title. Scales
	   gently with viewport width so it stays readable on 320 px phones
	   without becoming oversized on 414 px. */
	html body.bz-home .hero__act .eyebrow {
		font-size: clamp(11.5px, calc(1.6vw + 6.5px), 12.5px) !important;
		letter-spacing: 0.22em !important;
		line-height: 1.4;
	}

	/* The service CTAs (Découvrir / Évaluer / Encadrer) need a 44 px
	   tap target. Default mobile is too thin. Bump padding so they
	   meet the WCAG/iOS guidelines we flagged in Phase 1. */
	html body.bz-home .hero__svc-btn,
	html body.bz-home .cta__action {
		min-height: 44px;
		padding-top: 14px !important;
		padding-bottom: 14px !important;
		display: inline-flex;
		align-items: center;
	}

}

/* On short-to-medium phones (iPhone SE, S8, common Androids) the
   card padding and inter-element margins tighten so the act content
   plus the progress bar all fit comfortably inside the 60svh vitrine.
   Title/eyebrow font sizes are NOT overridden here — they use the
   fluid `vw + vh` clamp from the main mobile rule, which already
   scales smoothly across all phone formats. */
@media (max-width: 960px) and (max-height: 800px) {
	html body.bz-home .hero__text-wrap {
		margin-top: clamp(48px, 10svh, 88px) !important;
		padding: clamp(16px, 2.5vh, 24px) clamp(18px, 5vw, 26px) !important;
	}
	html body.bz-home .hero__act .eyebrow {
		margin-bottom: clamp(14px, 2.4vh, 22px) !important;
	}
	html body.bz-home .hero__svc-ctas {
		margin-top: clamp(14px, 2.4vh, 22px) !important;
	}
	/* Footer keeps `margin-top: auto` (declared further down in the
	   main mobile rule) so it stays anchored to the bottom of the
	   60svh card; only padding-top tightens here. */
	html body.bz-home .hero__act-footer {
		padding-top: clamp(12px, 2vh, 18px) !important;
	}
}