/* ============================================================
   Accessibility & visual fixes — Phase 3 (2026-05-07)
   Adds focus-visible parity, prefers-reduced-motion coverage,
   gold-on-cream contrast hardening, tablet touch targets, and
   the Elementor menu-toggle aria sanitisation.
   Loaded site-wide after components/header/footer.
   ============================================================ */

/* ----------------------------------------------------------------
   1. focus-visible parity for hover-only interactive states.
   Each :hover rule documented in components.css and page CSS that
   leads to a visible visual change is mirrored here for keyboard
   users via :focus-visible. The `:is()` group keeps maintenance low.
   ---------------------------------------------------------------- */

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

.bz-site-header .hdr__nav a:focus-visible {
	color: var(--bz-or, #B89D64);
	outline: none;
}

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

.cta__action:focus-visible,
.cta__action--secondary:focus-visible,
.cta__action--ghost:focus-visible {
	outline: 2px solid var(--bz-or, #B89D64);
	outline-offset: 3px;
}

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

.ftr__partners-logos img:focus-visible {
	opacity: 1;
	outline: 2px solid var(--bz-or, #B89D64);
	outline-offset: 4px;
}

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

/* Audit/Réputation use .ph-cta-arrow scoped by body class — the
   .au-cta / .re-cta selectors that lived here previously didn't
   match anything in the rendered DOM (drift fix 2026-05-08). */
.ph-cta-arrow:focus-visible {
	color: var(--bz-or, #B89D64);
	outline: 2px solid var(--bz-or, #B89D64);
	outline-offset: 3px;
}

.svc__cta:focus-visible {
	color: var(--bz-or, #B89D64);
	outline: 2px solid var(--bz-or, #B89D64);
	outline-offset: 3px;
}

.hero__svc-btn:focus-visible {
	color: var(--bz-or, #B89D64);
	outline: 2px solid var(--bz-or, #B89D64);
	outline-offset: 3px;
}

.pager__btn:focus-visible {
	color: var(--bz-creme, #F4F1EA);
	outline: 2px solid var(--bz-or, #B89D64);
	outline-offset: 3px;
}

/* ----------------------------------------------------------------
   2. Gold-on-cream contrast hardening — replace --bz-or (#B89D64,
   2.5:1 on cream FAIL AA) with --bz-or-deep (#8C6F3D, ~5.1:1 PASS
   AA) for body text, eyebrows, em accents and links sitting on
   cream sections. Pure marine sections keep the original gold.
   ---------------------------------------------------------------- */

/* All three service pages use the shared .ph-eyebrow / .ph-sec-title
   class (the .au-eyebrow and .re-eyebrow names that lived here didn't
   match anything in the rendered DOM — drift fix 2026-05-08). */
body.bz-prevhub .ph-sec--cream .ph-eyebrow .elementor-heading-title,
body.bz-prevhub .ph-sec--cream .ph-eyebrow,
body.bz-audit-et-optimisation .ph-sec--cream .ph-eyebrow .elementor-heading-title,
body.bz-audit-et-optimisation .ph-sec--cream .ph-eyebrow,
body.bz-audit-et-optimisation .ph-sec--cream-warm .ph-eyebrow .elementor-heading-title,
body.bz-audit-et-optimisation .ph-sec--cream-warm .ph-eyebrow,
body.bz-reputation-en-ligne .ph-sec--cream .ph-eyebrow .elementor-heading-title,
body.bz-reputation-en-ligne .ph-sec--cream .ph-eyebrow,
body.bz-reputation-en-ligne .ph-sec--cream-warm .ph-eyebrow .elementor-heading-title,
body.bz-reputation-en-ligne .ph-sec--cream-warm .ph-eyebrow,
body.bz-a-propos .ap-sec--cream .ap-eyebrow,
.ph-sec--cream em,
.ph-sec--cream-warm em,
.ap-sec--cream em {
	color: var(--bz-or-deep, #8C6F3D);
}

/* Eyebrows (tagged classes) sitting on any cream-toned background */
.ph-sec--cream .ph-sec-eyebrow,
.ph-sec--cream-warm .ph-sec-eyebrow,
.ap-sec--cream .ap-eyebrow {
	color: var(--bz-or-deep, #8C6F3D);
}

/* Section + CTA titles' italic em accent on cream — the gold em
   inside .ph-sec-title and .ph-cta-title was not covered by the
   original patch, leaving 2.5:1 italic gold on cream (drift fix
   2026-05-08). */
.ph-sec--cream .ph-sec-title em,
.ph-sec--cream-warm .ph-sec-title em,
.ph-sec--cream .ph-cta-title em,
.ph-sec--cream-warm .ph-cta-title em,
.ph-cta-sec .ph-cta-title em,
.ph-cta-sec .ph-cta-eyebrow .elementor-heading-title,
.ph-cta-sec .ph-cta-eyebrow {
	color: var(--bz-or-deep, #8C6F3D);
}

/* The italic gold "soft promise" tagline above the contact form sits
   on cream-3 (#E4DCC9, slightly darker than cream). Original gold is
   2.34:1 here — bump to or-deep for 4.85:1 pass. */
.bz-contact-promise,
.bz-contact-promise em {
	/* or-deeper for AA at 13 px on cream-2 — was failing 2.15:1 because
	   the global .elementor-widget-html p em selector overrode our
	   parent-level color. Audit L-4 round 3 fix 2026-05-08. */
	color: var(--bz-or-deeper, #6B5226) !important;
}

/* Sections marine : le or-deeper conçu pour le crème lisait
   orange/brun sur fond marine (constat client 2026-05-09, mobile
   accueil). Sur marine, l'or régulier #B89D64 passe largement le
   contraste AA — on remet la teinte standard. */
body.bz-home .home-cta-sec .bz-contact-promise,
body.bz-home .home-cta-sec .bz-contact-promise em,
.ph-sec--marine .bz-contact-promise,
.ph-sec--marine .bz-contact-promise em {
	color: var(--bz-or, #B89D64) !important;
}

/* Loi 25 consent link inside the form — must read clearly because
   it's the privacy-policy referent. Previously gold on cream = 2.34:1.
   Override the !important rule from cta-form.css:706. */
.bz-contact-form .elementor-field-type-acceptance a {
	color: var(--bz-or-deep, #8C6F3D) !important;
}

/* "The Trois leviers" filler card (svc grid) sits on cream — its
   italic text already inherits marine text color, this is just a
   safety net if any sub-element uses --bz-or there. */
.svc__grid::after { color: var(--bz-titane, #4A4A4A); }

/* ----------------------------------------------------------------
   3. prefers-reduced-motion — three animations missed the original
   coverage: the footer marquee (infinite), the hero swipe-hint
   (one-shot wiggle on first visit), and the passerelle pcbPulse
   pad/via scale-in. Stop them all when the user opts out.
   ---------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.ftr--marquee .ftr__marquee-track,
	.ftr__marquee-track {
		animation: none !important;
	}
	.hero--hint .hero__slide.is-active .hero__text-wrap {
		animation: none !important;
	}
	.passerelle.is-in .passerelle__pcb .pad,
	.passerelle.is-in .passerelle__pcb .via-outer {
		animation: none !important;
		opacity: 1;
		transform: none;
	}
	/* pcbSignal — passerelle and footer pcb running 4200ms / 5200ms
	   loops. Both stop here (the previous rule only stopped opacity). */
	.passerelle.is-in .passerelle__pcb .trace--signal,
	.ftr__pcb .trace--signal,
	[class*="trace--signal"] {
		animation: none !important;
	}
	/* Hero photo slow zoom on activation */
	.hero__slide.is-active .hero__photo img {
		transition: none !important;
		transform: none !important;
	}
}

/* ----------------------------------------------------------------
   4. Tablet touch target — hero carousel CTA buttons render at 39 px
   on tablet desktop layout (≥961 px). WCAG/Apple HIG recommend
   44 px minimum for touch. Bump padding so the click target reaches
   the threshold without growing the visible button text.
   ---------------------------------------------------------------- */

@media (min-width: 961px) and (max-width: 1280px) {
	.hero__svc-btn,
	.ph-cta-arrow,
	.ph-cta-primary .elementor-button {
		min-height: 44px;
		padding-block: 12px;
		display: inline-flex;
		align-items: center;
	}
}

/* ----------------------------------------------------------------
   5. Hero H1 alignment across all four service pages.
   Audit/Reputation/Apropos use clamp(34px, 4vw, 64px); Prevhub was
   stuck at clamp(28px, 3vw, 60px) — ~6 % smaller at 1707 px. Align.
   ---------------------------------------------------------------- */

body.bz-prevhub .ph-hero .ph-title .elementor-heading-title {
	font-size: var(--fs-h1, clamp(34px, 4vw, 64px));
}

/* ----------------------------------------------------------------
   6. Sanitise the parasite Elementor menu toggle (the default
   hamburger that ships with Elementor's nav widget). It renders
   invisibly (size 0×0) but still appears in the accessibility tree
   with aria-expanded="true" — confusing screen readers.
   ---------------------------------------------------------------- */

.elementor-menu-toggle {
	display: none !important;
}

/* ----------------------------------------------------------------
   7. Replace the `transition: all` anti-pattern on .arr (carousel
   arrows) with a property list — keeps the easing intent while
   avoiding GPU lag on properties not actually animated.
   ---------------------------------------------------------------- */

.hero .arrows .arr {
	transition:
		opacity 280ms cubic-bezier(0.3, 0, 0, 1),
		color 280ms cubic-bezier(0.3, 0, 0, 1),
		transform 280ms cubic-bezier(0.3, 0, 0, 1);
}

/* ================================================================
   PHASE 4 — Décisions L1/P7-B/P8-A/D6/D7/D8 appliquées (2026-05-07)
   ================================================================ */

/* ----------------------------------------------------------------
   L1. Logos partenaires — encadrement cream pour neutraliser le
   rouge tout en laissant les logos 100% intacts. Chaque logo dans
   un cartouche `--bz-creme` avec padding interne et radius modeste.
   ---------------------------------------------------------------- */

.ftr--marquee .ftr__partners-logos img,
.ftr__partners-logos img {
	background: var(--bz-creme, #F4F1EA);
	padding: 12px 18px;
	border-radius: 4px;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset,
	            0 4px 14px rgba(4, 11, 22, 0.30);
	transition:
		transform 280ms cubic-bezier(0.3, 0, 0, 1),
		box-shadow 280ms cubic-bezier(0.3, 0, 0, 1);
}

.ftr--marquee .ftr__partners-logos img:hover,
.ftr--marquee .ftr__partners-logos img:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset,
	            0 8px 22px rgba(4, 11, 22, 0.40);
}

/* Mobile-only intro partners: match the desktop cosign treatment
   (grayscale + opacity, no badge bg). The previous cream-square
   wrapper was removed on 2026-05-08 — the user wants the same
   discrete look as desktop. */

/* ----------------------------------------------------------------
   P8-A. Filter chromatique uniforme — appliqué seulement aux photos
   "éditoriales" (intermezzo, origine bands, équipe). On évite les
   hero photos parce que le filter crée un nouveau compositing layer
   qui repaint pendant le scroll → micro-shifts visuels qui lisent
   comme un zoom léger. Sur les grosses images hero (1200×800+), le
   coût est trop visible.
   ---------------------------------------------------------------- */

.ph-genese-img img,
.au-genese-img img,
.intermezzo img,
.intermezzo__img,
.ap-mission__photo img,
.ap-distingue__photo img {
	filter: grayscale(8%) contrast(1.05);
}

/* Origine band mobile positioning lives in the consolidated rule
   inside @media (max-width: 720px) below — see "Origine bands —
   david-origine-unified.png" comment. */

/* P7-B. Photos d'équipe : filtre légèrement plus marqué pour
   homogénéiser malgré les origines variables. */
.ap-equipe img,
.team-photo img,
[class*="team-"] img {
	filter: grayscale(15%) contrast(1.05);
}

/* Hero photos : aucun filter pour éviter scroll jank. Le rendu reste
   naturel et fluide pendant les changements de viewport. */
.hero__photo img,
.ph-hero-photo img,
.ph-hero__col-photo img,
.au-hero-photo img,
.au-hero__col-photo img,
.re-hero__col-photo img,
.ap-hero__photo-frame img,
.ap-hero__photo-col img,
.bz-contact-hero__photo img {
	filter: none;
}

/* ----------------------------------------------------------------
   Hero photo "zoom on scroll" fix — on mobile, browsers (especially
   Android Chrome) recompute `100vh` when the URL bar collapses or
   expands during scroll. With `min-height: 100vh` on hero sections
   and `object-fit: cover` on the photo, the changing container size
   re-crops the photo each frame → reads as a soft zoom in/out.
   Replacing `100vh` with `100svh` (small viewport — fixed at the
   smaller of the two states) stops the recompute on mobile.
   ---------------------------------------------------------------- */

@media (max-width: 720px) {
	body.bz-prevhub .ph-hero,
	body.bz-prevhub .ph-hero > .elementor-container,
	body.bz-prevhub .ph-hero__col-photo,
	body.bz-audit-et-optimisation .au-hero,
	body.bz-audit-et-optimisation .au-hero > .elementor-container,
	body.bz-audit-et-optimisation .au-hero__col-photo,
	body.bz-reputation-en-ligne .re-hero,
	body.bz-reputation-en-ligne .re-hero > .elementor-container,
	body.bz-reputation-en-ligne .re-hero__col-photo,
	body.bz-a-propos .ap-hero,
	body.bz-a-propos .ap-hero > .elementor-container,
	body.bz-a-propos .ap-hero__photo-col,
	body.bz-contact .bz-contact-hero,
	body.bz-contact .bz-contact-hero > .elementor-container,
	body.bz-contact .bz-contact-hero__photo-col,
	body.bz-home .hero {
		min-height: 100svh !important;
	}
	/* Lock the photo to a fixed pixel height so any URL-bar viewport
	   shifts don't re-crop the image. Using svh ensures the lock
	   matches the smaller (URL-bar visible) state. */
	body.bz-prevhub .ph-hero__col-photo img,
	body.bz-audit-et-optimisation .au-hero__col-photo img,
	body.bz-reputation-en-ligne .re-hero__col-photo img,
	body.bz-a-propos .ap-hero__photo-col img,
	body.bz-contact .bz-contact-hero__photo-col img,
	body.bz-home .hero__photo img {
		height: 100svh !important;
	}

	/* Origine bands — push David's head into the left third of the
	   visible mobile frame, looking right, body extending out of frame.
	   The dedicated `david-origine-mobile.png` portrait crop kept David
	   too central (600×800 image had no horizontal crop budget). We use
	   the wider 1024×572 `unified.png` so cover-fit creates enough
	   horizontal slack for object-position to slide the head to ~15%
	   of the visible frame. 2026-05-13. */
	body.bz-prevhub .ph-genese--band .ph-genese-img img,
	body.bz-audit-et-optimisation .ph-genese--band .ph-genese-img img,
	body.bz-reputation-en-ligne .re-origine .ph-genese-img img {
		content: url("/wp-content/themes/bazinet-child/assets/img/david-origine-unified.png");
		object-position: 45% 50% !important;
		/* Mobile-only dimming so the italic citation + gold filet + name
		   attribution always win contrast against the photo (the section
		   has no ::after gradient veil on the band variant). 2026-05-13. */
		filter: grayscale(8%) contrast(1.05) brightness(0.6) !important;
	}
}

/* Desktop ≥ 721 px — origine bands are very wide (~3:1 aspect),
   so cover-fit shows the full image width and David sits at the
   visual center. Pull him slightly LEFT so the citation overlay
   on the right side of the section gets cleaner negative space.
   We scale the image up 10 % to gain horizontal cropping room,
   then translate left 4 %. The section's overflow:hidden crops
   the spillover. */
@media (min-width: 721px) {
	/* Pull David further LEFT on PC origine bands so the citation
	   overlay on the right gets cleaner negative space. Specificity
	   bumped (double body class + is-in variants) to win over the
	   per-page reveal scale(1.04) → scale(1) transition.
	   Audit T6 round 22 fix 2026-05-08. */
	body.bz-prevhub.bz-prevhub .ph-genese--band .ph-genese-img img,
	body.bz-prevhub.bz-prevhub .ph-genese--band.is-in .ph-genese-img img,
	body.bz-prevhub.bz-prevhub [data-reveal].is-in .ph-genese-img img,
	body.bz-audit-et-optimisation.bz-audit-et-optimisation .ph-genese--band .ph-genese-img img,
	body.bz-audit-et-optimisation.bz-audit-et-optimisation .ph-genese--band.is-in .ph-genese-img img,
	body.bz-reputation-en-ligne.bz-reputation-en-ligne .re-origine .ph-genese-img img {
		/* Math safety: scale(s) crée un overflow (s-1)/2 de chaque côté.
		   translateX(-X% IMG) déplace de -X*s/100 du conteneur. Pour ne
		   pas exposer l'arête droite, X*s < (s-1)*50 → avec s=1.2,
		   X < 8.33. On garde -7% (marge ~1.6% du conteneur). Fix bug
		   bande marine visible à droite sur PC, 2026-05-17. */
		transform: scale(1.2) translateX(-7%) !important;
		transform-origin: center;
	}
}

/* Reset for SVG icons + partner logos (line-art shouldn't get the
   photo filter even on the éditorial selectors above). */
img[src$=".svg"],
.svc__icon img,
.bz-select__icon,
.ftr__partners-logos img,
.ftr__intro-partner img {
	filter: none;
}

/* ----------------------------------------------------------------
   D6. Ralentir les animations infinies pour réduire la fatigue
   visuelle des utilisateurs longs sur la page.
   ---------------------------------------------------------------- */

/* Réputation cadran 24h — was 3.6s, slow to 5.5s */
.re-cadran .re-cadran__pulse,
.re-cadran-pulse {
	animation-duration: 5.5s !important;
}

/* À propos network animations — was 10s, keep but reduce intensity
   via lower opacity peaks. The animations themselves are fine, it's
   the visibility we soften. */
body.bz-a-propos .ap-pulse__halo {
	opacity: 0.55;
}
body.bz-a-propos .ap-pulse__node {
	opacity: 0.85;
}

/* ----------------------------------------------------------------
   D7. Aérer les sections denses : +20% padding vertical sur les
   sections où le contenu est verbeux ou aux nombreuses cartes.
   ---------------------------------------------------------------- */

@media (min-width: 961px) {
	body.bz-prevhub .ph-sec--marine,
	body.bz-prevhub .ph-sec--cream,
	body.bz-prevhub .ph-sec--cream-warm {
		padding-top: clamp(96px, 14vh, 192px);
		padding-bottom: clamp(96px, 14vh, 192px);
	}
	body.bz-home .sec.pb,
	body.bz-home .sec.pq {
		padding-top: clamp(96px, 14vh, 192px);
		padding-bottom: clamp(96px, 14vh, 192px);
	}
}

/* ----------------------------------------------------------------
   D8. Modérer l'usage du « № 01 » typographique — le réserver à 3
   endroits clés (services accueil, problèmes, méthode audit). Sur
   les autres usages décoratifs, retirer la numérotation visuelle.
   ---------------------------------------------------------------- */

/* The PrevHub feature cards have № prefixes that read as decoration —
   they do not communicate ordering for the reader. Hide them. */
.ph-feature-card .ph-feature-card__num,
.re-pane__num:not(.is-key),
.au-step__num.is-decorative {
	display: none;
}

/* ----------------------------------------------------------------
   Mobile portrait hero swaps — service pages.
   Each landscape hero image gets a portrait companion for mobile
   (≤720 px). We use `content: url()` on the img element which lets us
   swap the rendered bitmap without touching the markup. The original
   `src` attribute stays in place so right-click/save behaves and SEO
   crawlers see the canonical image.
   ---------------------------------------------------------------- */

@media (max-width: 720px) {
	body.bz-prevhub .ph-hero-photo img {
		content: url("/wp-content/themes/bazinet-child/assets/img/prevhub-hero-mobile.png");
	}
	body.bz-audit-et-optimisation .au-hero-photo img,
	body.bz-audit-et-optimisation .au-hero__col-photo img {
		content: url("/wp-content/themes/bazinet-child/assets/img/audit-hero-mobile.png");
	}
	body.bz-reputation-en-ligne .re-hero-photo img,
	body.bz-reputation-en-ligne .re-hero__col-photo img {
		content: url("/wp-content/themes/bazinet-child/assets/img/reputation-hero-mobile.png");
	}
	body.bz-a-propos .ap-hero__photo-frame img,
	body.bz-a-propos .ap-hero__photo-col img {
		content: url("/wp-content/themes/bazinet-child/assets/img/apropos-hero-mobile.png");
	}
}

/* ----------------------------------------------------------------
   Mobile hero titles — 15% smaller across all hero pages.
   Reason: original mobile sizes (38-46 px) felt too large in the
   stacked mobile layout where the title competes with eyebrow + CTA
   in a narrow viewport. ~85% size restores editorial proportion.
   ---------------------------------------------------------------- */

@media (max-width: 720px) {
	/* Home hero — kept at 32 px (visual landing page anchor). */
	body.bz-home .hero__title {
		font-size: 32px !important;
	}
	/* Service + secondary pages — H1 floors at 28 px (matches the
	   section-H2 clamp floor). Below 28 px the next-section H2 reads
	   visually larger than the page H1 on a 360 px viewport — broken
	   visual hierarchy. Was 23 px (a11y-fixes 2026-05-07); bumped to
	   clamp(28, 7vw, 38) so the H1 still scales fluidly to ~38 px on
	   the largest "mobile" widths without ever falling under H2. */
	body.bz-prevhub .ph-hero .ph-title .elementor-heading-title,
	body.bz-audit-et-optimisation .ph-hero .ph-title .elementor-heading-title,
	body.bz-audit-et-optimisation .au-hero .ph-title .elementor-heading-title,
	body.bz-reputation-en-ligne .ph-hero .ph-title .elementor-heading-title,
	body.bz-reputation-en-ligne .re-hero .ph-title .elementor-heading-title,
	body.bz-a-propos .ap-hero__title,
	body.bz-a-propos .ap-hero .elementor-heading-title {
		font-size: clamp(28px, 7vw, 38px) !important;
		line-height: 1.1 !important;
	}
	/* Contact page hero h1 — sélecteur strictement scopé sur le titre.
	   ATTENTION : `.bz-contact-hero .elementor-heading-title` (sans
	   `__title` au milieu) attrape AUSSI l'eyebrow `Contact` qui est
	   un heading widget dans le même hero. Bug constaté 2026-05-09 :
	   l'eyebrow se gonflait à 28-38 px sur mobile et son
	   `text-transform: uppercase` natif faisait croire à un "titre en
	   MAJUSCULES". Garder `__title` dans la chaîne de descendants. */
	body.bz-contact .bz-contact-hero__title .elementor-heading-title {
		font-size: clamp(28px, 7vw, 38px) !important;
		line-height: 1.1 !important;
	}
}

/* ----------------------------------------------------------------
   Home hero CTA mobile — the previous block here injected a shorter
   "Faire le point" label via `font-size: 0` on the original text +
   `::before { content: "..." }`. Removed 2026-05-08: the actual CTA
   label is now "Discutons" (9 chars), short enough to fit any viewport
   without the CSS hack. The real DOM text wins on every device.
   ---------------------------------------------------------------- */

/* ----------------------------------------------------------------
   Mobile chevron pulse — JS adds .bz-chevron-pulse briefly when each
   card enters the viewport. Animation = a single bounce + opacity
   ramp so the chevron quickly says "click me" without distraction.
   ---------------------------------------------------------------- */

@keyframes bz-chevron-bounce {
	0%, 100% { transform: translateY(0); opacity: 1; }
	30%      { transform: translateY(-3px); opacity: 0.85; }
	60%      { transform: translateY(2px);  opacity: 1; }
}

.svc__chevron.bz-chevron-pulse {
	animation: bz-chevron-bounce 800ms cubic-bezier(0.3, 0, 0, 1) 2;
}

@media (prefers-reduced-motion: reduce) {
	.svc__chevron.bz-chevron-pulse { animation: none; }
}

/* ----------------------------------------------------------------
   Home mobile services — reduce inner padding on the cream cards
   so the body text gets readable line lengths. Default 32 px each
   side eats too much width at 360-414 px viewports.
   ---------------------------------------------------------------- */

@media (max-width: 720px) {
	body.bz-home .svc__card .svc__toggle {
		padding: 24px 18px 18px !important;
	}
	body.bz-home .svc__card .svc__body-inner,
	body.bz-home .svc__card .svc__body-pad {
		padding-left: 18px !important;
		padding-right: 18px !important;
		padding-bottom: 22px !important;
	}
}

/* ----------------------------------------------------------------
   Heroes service pages — structural alignment (MUST-2, 2026-05-08).
   Prevhub already had a vertical "PREVHUB" rail + a scalable eyebrow
   (clamp 13-17px). Audit and Réputation diverged: no rail, fixed
   12px eyebrow. On 1920px viewports the eyebrow size differential
   was ~40 % visible. This block aligns all three so the service
   pages read as a coherent set.
   ---------------------------------------------------------------- */

/* Eyebrow scalable on Audit + Réputation (was static 12 px) */
body.bz-audit-et-optimisation .ph-hero .ph-eyebrow .elementor-heading-title,
body.bz-audit-et-optimisation .au-hero .ph-eyebrow .elementor-heading-title,
body.bz-reputation-en-ligne .ph-hero .ph-eyebrow .elementor-heading-title,
body.bz-reputation-en-ligne .re-hero .ph-eyebrow .elementor-heading-title {
	font-size: clamp(13px, 1.05vw, 17px) !important;
}

/* Vertical AUDIT rail on the left edge of audit hero */
body.bz-audit-et-optimisation .ph-hero,
body.bz-audit-et-optimisation .au-hero {
	position: relative;
}
body.bz-audit-et-optimisation .ph-hero::before,
body.bz-audit-et-optimisation .au-hero::before {
	content: "AUDIT · OPTIMISATION";
	position: absolute;
	left: 24px;
	top: 50%;
	transform: translateY(-50%) rotate(180deg);
	writing-mode: vertical-rl;
	font-family: var(--font-d);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.4em;
	color: rgba(244, 241, 234, 0.30);
	pointer-events: none;
	z-index: 1;
}

/* Vertical RÉPUTATION rail on the left edge of reputation hero */
body.bz-reputation-en-ligne .ph-hero,
body.bz-reputation-en-ligne .re-hero {
	position: relative;
}
body.bz-reputation-en-ligne .ph-hero::before,
body.bz-reputation-en-ligne .re-hero::before {
	content: "RÉPUTATION · EN LIGNE";
	position: absolute;
	left: 24px;
	top: 50%;
	transform: translateY(-50%) rotate(180deg);
	writing-mode: vertical-rl;
	font-family: var(--font-d);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.4em;
	color: rgba(244, 241, 234, 0.30);
	pointer-events: none;
	z-index: 1;
}

/* Hide the rail on mobile — narrow viewport, the rail competes with
   the editorial copy for left-edge real estate. */
@media (max-width: 720px) {
	body.bz-audit-et-optimisation .ph-hero::before,
	body.bz-audit-et-optimisation .au-hero::before,
	body.bz-reputation-en-ligne .ph-hero::before,
	body.bz-reputation-en-ligne .re-hero::before {
		display: none;
	}
}

/* =============================================================
   T7 (round 22) · Origine band photo scrim on desktop.
   The 3 service origine bands (Prevhub / Audit / Réputation) need
   a soft 10 % darken so the gold italic accent and pull-quote text
   stay legible against varied photo regions. Subtle linear gradient
   leans heavier on the bottom where the citation sits.
   ============================================================= */
@media (min-width: 721px) {
	body.bz-prevhub .ph-genese--band::after,
	body.bz-audit-et-optimisation .ph-genese--band::after,
	body.bz-reputation-en-ligne .re-origine.ph-genese--band::after {
		background: linear-gradient(180deg,
			rgba(11, 30, 56, 0.08) 0%,
			rgba(11, 30, 56, 0.18) 60%,
			rgba(11, 30, 56, 0.32) 100%) !important;
	}
}

/* =============================================================
   ROUND 17 — Mobile spacing + typography parity (2026-05-08)
   Brings non-home pages up to the reading-comfort baseline that
   the home was tuned to: section padding clamp(96-130) symmetric,
   body p ≥ 16.5 px, card / icon-box H3 ≥ 18 px. Audit per page
   verified before applying — see chat log.
   ============================================================= */
@media (max-width: 720px) {
	/* --- Section padding · service pages + à propos. Sections marked
	   `bz-sec--bleed` (heroes + photo-quote bands) are excluded
	   because they have their own internal layout (full-bleed photo
	   + absolute-positioned text). Convention introduced round 18 to
	   replace the fragile per-page :not() exclusion chain. --- */
	body.bz-prevhub section.elementor-top-section.ph-sec--marine:not(.bz-sec--bleed),
	body.bz-prevhub section.elementor-top-section.ph-sec--cream:not(.bz-sec--bleed),
	body.bz-prevhub section.elementor-top-section.ph-sec--cream-warm:not(.bz-sec--bleed),
	body.bz-prevhub section.elementor-top-section.ph-sec--encre:not(.bz-sec--bleed),
	body.bz-audit-et-optimisation section.elementor-top-section.ph-sec--marine:not(.bz-sec--bleed),
	body.bz-audit-et-optimisation section.elementor-top-section.ph-sec--cream:not(.bz-sec--bleed),
	body.bz-audit-et-optimisation section.elementor-top-section.ph-sec--cream-warm:not(.bz-sec--bleed),
	body.bz-audit-et-optimisation section.elementor-top-section.ph-sec--encre:not(.bz-sec--bleed),
	body.bz-reputation-en-ligne section.elementor-top-section.ph-sec--marine:not(.bz-sec--bleed),
	body.bz-reputation-en-ligne section.elementor-top-section.ph-sec--cream:not(.bz-sec--bleed),
	body.bz-reputation-en-ligne section.elementor-top-section.ph-sec--cream-warm:not(.bz-sec--bleed),
	body.bz-reputation-en-ligne section.elementor-top-section.ph-sec--encre:not(.bz-sec--bleed),
	body.bz-a-propos section.elementor-top-section.ap-sec--marine:not(.bz-sec--bleed),
	body.bz-a-propos section.elementor-top-section.ap-sec--cream:not(.bz-sec--bleed),
	body.bz-a-propos section.elementor-top-section.ap-sec--cream-warm:not(.bz-sec--bleed) {
		padding-top: clamp(96px, 14vh, 130px) !important;
		padding-bottom: clamp(96px, 14vh, 130px) !important;
	}

	/* --- Body p bump to iOS-comfort range. Double body class for
	   specificity over per-page mobile rules with !important.
	   Source of truth for mobile body typo (audit I-001 round 18). --- */
	body.bz-prevhub.bz-prevhub .ph-sec-intro p,
	body.bz-prevhub.bz-prevhub .ph-method__step-body,
	body.bz-prevhub.bz-prevhub .ph-method__step-lead,
	body.bz-prevhub.bz-prevhub .ph-pillar-desc,
	body.bz-prevhub.bz-prevhub .ph-feature-card .elementor-icon-box-description,
	body.bz-prevhub.bz-prevhub .ph-feature-card .elementor-icon-box-content > p,
	body.bz-audit-et-optimisation.bz-audit-et-optimisation .ph-sec-intro p,
	body.bz-audit-et-optimisation.bz-audit-et-optimisation .au-step__body,
	body.bz-audit-et-optimisation.bz-audit-et-optimisation .au-step__lead,
	body.bz-audit-et-optimisation.bz-audit-et-optimisation .au-cat__body,
	body.bz-audit-et-optimisation.bz-audit-et-optimisation .au-cat__intro,
	body.bz-audit-et-optimisation.bz-audit-et-optimisation .au-cat__sub,
	body.bz-audit-et-optimisation.bz-audit-et-optimisation .au-cat__item-impact,
	body.bz-audit-et-optimisation.bz-audit-et-optimisation .au-card__closing-editorial,
	body.bz-reputation-en-ligne.bz-reputation-en-ligne .ph-sec-intro p,
	body.bz-reputation-en-ligne.bz-reputation-en-ligne .re-pane__body,
	body.bz-reputation-en-ligne.bz-reputation-en-ligne .re-eclairage__lead,
	body.bz-reputation-en-ligne.bz-reputation-en-ligne .re-cadran__items li,
	body.bz-reputation-en-ligne.bz-reputation-en-ligne .re-approche__step-body,
	body.bz-a-propos.bz-a-propos .ap-mission__body p,
	body.bz-a-propos.bz-a-propos .ap-distingue__body,
	body.bz-a-propos.bz-a-propos .ap-valeurs__body,
	body.bz-a-propos.bz-a-propos .ap-equipe__bio p,
	body.bz-contact.bz-contact .bz-contact-process__step-body,
	body.bz-contact.bz-contact .bz-contact-faq__answer p {
		font-size: 16.5px !important;
		line-height: 1.6 !important;
	}

	/* --- Pane / step / card titles (H3 / H4) bumped from 16-22 to
	   ~19 px. The 16 px H3 on Prevhub icon-boxes was the smallest
	   editorial title on the site. Double body class for specificity
	   over per-page mobile rules with !important. --- */
	body.bz-prevhub.bz-prevhub .ph-feature-card .elementor-icon-box-title,
	body.bz-audit-et-optimisation.bz-audit-et-optimisation .au-step__title,
	body.bz-audit-et-optimisation.bz-audit-et-optimisation .au-cat__title,
	body.bz-reputation-en-ligne.bz-reputation-en-ligne .re-pane__title,
	body.bz-reputation-en-ligne.bz-reputation-en-ligne .re-approche__step-title,
	body.bz-a-propos.bz-a-propos .ap-distingue__title,
	body.bz-a-propos.bz-a-propos .ap-valeurs__title,
	body.bz-a-propos.bz-a-propos .ap-equipe__name,
	body.bz-contact.bz-contact .bz-contact-process__step-title,
	body.bz-contact.bz-contact .bz-contact-faq__question {
		font-size: 19px !important;
		line-height: 1.3 !important;
	}

	/* --- CTA labels — typically 12-13 px uppercase, bumped to 14 px
	   for tap-target clarity, matching the home's 15 px hero CTA.
	   Also enforces min-height 44 px for tap target (audit I-003). --- */
	body.bz-prevhub .ph-cta-arrow,
	body.bz-audit-et-optimisation .ph-cta-arrow,
	body.bz-reputation-en-ligne .ph-cta-arrow,
	body.bz-a-propos .ap-cta,
	body.bz-contact .bz-contact-hero__cta,
	body.bz-home .hero__svc-btn,
	body.bz-home .svc__cta,
	body.bz-prevhub .svc__cta,
	body.bz-audit-et-optimisation .svc__cta,
	body.bz-reputation-en-ligne .svc__cta {
		font-size: 14px !important;
		letter-spacing: 0.20em !important;
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}

	/* --- P-003 (audit) · Service plan H3 on Prevhub bumped 22 → 25 px
	   so the buying choice ("Mode Autonome" vs "Mode Délégué") reads
	   with the weight of an actual decision. --- */
	body.bz-prevhub.bz-prevhub .ph-mode-tag,
	body.bz-prevhub.bz-prevhub .ph-mode-headline {
		font-size: 25px !important;
		line-height: 1.25 !important;
	}

	/* --- P-004 (audit) · Footnote sources `.au-bilan__txn` was 9.5 px,
	   under WCAG AA threshold for legibility. Bumped to 11.5 px. --- */
	body.bz-audit-et-optimisation.bz-audit-et-optimisation .au-bilan__txn {
		font-size: 11.5px !important;
		line-height: 1.55 !important;
	}
}

/* =============================================================
   HEROES · harmonisation du format des titres (2026-05-09)
   Référence : audit & optimisation. Audit a la signature canonique
   (eyebrow gold clamp(13-17) à 0.42em + filet 32 px, h1 italic-gold,
   carte glass à border-left or 1.5 px). Les autres pages avaient
   chacune des écarts mineurs qui se voyaient surtout sur mobile :
   À propos · eyebrow figé à 12 px, Contact · eyebrow weight 500 +
   letter-spacing 0.22em + filet 28 px, em title à font-style normal,
   carte glass mobile à border 1 px or-30 (au lieu de border-left
   1.5 px or). Ce bloc aligne les 5 héros sur la même grammaire.
   ============================================================= */

/* À propos · eyebrow scalable comme audit/prevhub/réputation
   (était 12 px fixe) */
body.bz-a-propos .ap-hero__eyebrow {
	font-size: clamp(13px, 1.05vw, 17px);
	font-weight: 600;
}

/* Contact · eyebrow weight + letter-spacing + filet alignés sur audit */
body.bz-contact .bz-contact-hero__eyebrow .elementor-heading-title {
	font-weight: 600;
	letter-spacing: 0.42em;
}
body.bz-contact .bz-contact-hero__eyebrow .elementor-heading-title::before {
	width: 32px;
}

/* Contact · em du titre en italic gold (était font-style: normal,
   incohérent avec audit / prevhub / apropos qui sont italic) */
body.bz-contact .bz-contact-hero__title em,
body.bz-contact .bz-cycle-static {
	font-style: italic;
}

/* Mobile + tablet · carte glass du Contact alignée sur la signature
   des autres heroes : border-left or 1.5 px + box-shadow, plus de
   bordure pleine. */
@media (max-width: 960px) {
	body.bz-contact .bz-contact-hero__text-col > .elementor-widget-wrap,
	body.bz-contact .bz-contact-hero__text-col > .elementor-element-populated {
		border: 0 !important;
		border-left: 1.5px solid var(--bz-or, #B89D64) !important;
		box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.55) !important;
		padding: clamp(28px, 4.5vh, 44px) clamp(24px, 5vw, 36px) !important;
	}
}

/* Tablet uniquement (721-960) · h1 à clamp(28, 8vw, 40) comme les
   autres pages services le font via components.css 3459. NE PAS
   inclure mobile (≤720) ici : a11y-fixes 528-532 gère mobile à
   clamp(28, 7vw, 38) avec !important et doit rester souverain.
   Bug constaté 2026-05-09 : ancienne règle à @media (max-width: 960)
   gagnait en source-order et faisait Contact ~33 px vs ~29 px sur
   les autres pages à 412 px viewport. */
@media (min-width: 721px) and (max-width: 960px) {
	body.bz-contact .bz-contact-hero__title .elementor-heading-title {
		font-size: clamp(28px, 8vw, 40px) !important;
		line-height: 1.1 !important;
	}
}

/* Mobile · positionnement vertical de la carte glass identique
   aux autres heroes. Avant : text-col en flex align-items:center
   avec padding 110/60 → la carte se centrait verticalement (~50 %
   du viewport). Après : container avec padding-top 30vh comme dans
   components.css 3375 → la carte démarre à 30 % du viewport (haut)
   comme audit / prevhub / réputation / À propos.
   Le texte du card est aligné début-de-flex (pas centré). */
@media (max-width: 960px) {
	body.bz-contact .bz-contact-hero > .elementor-container {
		flex-direction: column !important;
		justify-content: flex-start !important;
		align-items: stretch !important;
		padding: 30vh 0 clamp(40px, 8vh, 80px) !important;
		gap: 0 !important;
	}
	body.bz-contact .bz-contact-hero__text-col {
		display: block !important;
		align-items: stretch !important;
		padding: 0 !important;
		margin: 0 clamp(16px, 5vw, 28px) !important;
	}
}

/* Prevhub · neutralise le padding 80/24/60 hérité de
   prevhub-page.css 341 qui s'ajoutait au-dessus du padding
   30vh du container et poussait la carte ~80 px plus bas que
   les autres heroes. Le système unifié (components.css 3343-)
   suffit : margins latéraux + padding intérieur du populated. */
@media (max-width: 960px) {
	body.bz-prevhub .ph-hero__col-text {
		padding: 0 !important;
	}
}