/* =============================================================
Home overrides — hero polish (hairline arrows, type scale,
photo boundary), services accordion redesign, section padding,
timeline column count.
============================================================= */
/* === Hero arrows: hidden by client request (2026-05-19).
La pagination (pager dots) reste comme seule navigation entre slides.
Garde les autres règles ci-dessous au cas où on veut les réactiver. === */
.hero .arrows {
display: none !important;
}
/* === Hero arrows (legacy styling — inactif tant que .arrows est display:none) === */
.hero .arrows {
gap: 28px;
align-items: center;
}
.hero .arrows .arr {
all: unset;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 4px;
color: var(--bz-or, #B89D64);
opacity: 0.7;
transition: opacity 280ms cubic-bezier(0.3, 0, 0, 1);
}
.hero .arrows .arr:hover,
.hero .arrows .arr:focus,
.hero .arrows .arr:focus-visible {
background: transparent !important;
border: 0 !important;
color: var(--bz-or, #B89D64) !important;
opacity: 1;
transform: none;
outline: none;
}
.hero .arrows .arr svg {
display: block;
width: 36px;
height: 8px;
overflow: visible;
transition: width 280ms cubic-bezier(0.3, 0, 0, 1),
transform 280ms cubic-bezier(0.3, 0, 0, 1);
}
/* On hover: extend the trailing line 6px in the direction of travel */
.hero .arrows .arr--prev:hover svg {
transform: translateX(-6px);
}
.hero .arrows .arr--next:hover svg {
transform: translateX(6px);
}
/* Subtle focus ring for accessibility (keyboard users) — gold underline only */
.hero .arrows .arr:focus-visible {
box-shadow: 0 1px 0 var(--bz-or, #B89D64);
}
/* =============================================================
Hero text — hard-constrain to col 1 so the title NEVER touches
the photo. If the copy is long it wraps to 4-5 lines instead
(acceptable per spec). The gradient on the photo's left edge
is kept as a visual softening of the boundary itself.
============================================================= */
@media (min-width: 961px) {
/* Text wrap occupies col 1 only (was 1/3 = full width of stage).
align-self:center vertically centres the block within the slide,
then a margin-top equal to about half the header height nudges
the perceived centre into the *visible* area (below the absolute
header overlay), matching the prevhub hero treatment. */
.hero .hero__text-wrap {
grid-column: 1;
max-width: none;
padding-right: clamp(24px, 2vw, 56px);
align-self: center;
margin-top: clamp(50px, 7vh, 110px);
}
.hero .hero__texts {
max-width: 100%;
}
/* Type scale: grows with viewport width so the headline keeps a
confident editorial weight on large/4K monitors instead of being
marooned in a corner. Min ensures it stays readable on smaller
desktops; max keeps it from going billboard-huge. */
.hero .hero__title {
font-size: clamp(28px, 3vw, 60px);
letter-spacing: -0.015em;
line-height: 1.12;
}
.hero .hero__act .eyebrow {
font-size: clamp(13px, 1.05vw, 17px);
margin-bottom: clamp(28px, 2.4vw, 44px);
gap: 14px;
}
/* Hero slide CTA — scale uppercase label + trailing arrow with viewport. */
.hero .hero__svc-btn {
font-size: clamp(12px, 0.9vw, 15px);
}
.hero .hero__svc-btn::after {
width: clamp(42px, 3.4vw, 64px);
}
.hero .hero__svc-btn:hover::after,
.hero .hero__svc-btn:focus-visible::after {
width: clamp(62px, 5vw, 92px);
}
}
/* =============================================================
Hero slide CTAs — replace the rectangular .hero__svc-btn
with an editorial hairline link: text + chevron + a thin gold
line that extends on hover (mirrors the hero prev/next arrows).
============================================================= */
.hero .hero__svc-ctas {
gap: 32px;
}
.hero .hero__svc-btn {
--svc-fg: rgba(244, 241, 234, 0.92);
--svc-line: rgba(184, 157, 100, 0.85);
all: unset;
cursor: pointer;
position: relative;
display: inline-flex;
align-items: center;
gap: 14px;
padding: 6px 0;
font-family: var(--font-d);
font-weight: 500;
font-size: 12px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--svc-fg);
background: transparent;
border: 0;
transition: color 320ms var(--ease, cubic-bezier(0.3, 0, 0, 1)),
gap 320ms var(--ease, cubic-bezier(0.3, 0, 0, 1));
}
/* Reset legacy ::before diamond — replace with line+chevron in ::after */
.hero .hero__svc-btn::before {
content: none;
}
/* Trailing arrow (line + chevron tip) drawn via SVG mask so it tints
with the link color and stretches naturally on hover. */
.hero .hero__svc-btn::after {
content: "";
display: inline-block;
width: 42px;
height: 8px;
background: var(--svc-line);
-webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / 100% 100%;
mask: url("data:image/svg+xml;utf8,") no-repeat center / 100% 100%;
transition: width 320ms var(--ease, cubic-bezier(0.3, 0, 0, 1)),
background-color 320ms var(--ease, cubic-bezier(0.3, 0, 0, 1));
flex-shrink: 0;
align-self: center;
}
/* On hover: line stretches, color → gold, letter-spacing breathes */
.hero .hero__svc-btn:hover,
.hero .hero__svc-btn:focus-visible {
color: var(--bz-or, #B89D64);
gap: 18px;
background: transparent !important;
border: 0 !important;
outline: none;
}
.hero .hero__svc-btn:hover::after,
.hero .hero__svc-btn:focus-visible::after {
width: 62px;
background: var(--bz-or, #B89D64);
}
.hero .hero__svc-btn:focus-visible {
box-shadow: 0 1px 0 var(--bz-or, #B89D64);
}
/* =============================================================
Bottom CTA — calendar embed wrapper.
When calendar_embed_url is set on the widget, the iframe sits
in a centered max-width container with a hairline gold frame
that echoes the editorial CTA chevron.
============================================================= */
.sec.cta .cta__calendar {
margin: 40px auto 0;
max-width: 920px;
width: 100%;
background: rgba(244, 241, 234, 0.04);
border: 1px solid rgba(184, 157, 100, 0.25);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.32);
}
.sec.cta .cta__calendar iframe {
display: block;
width: 100%;
background: transparent;
}
@media (max-width: 720px) {
.sec.cta .cta__calendar {
margin-top: 28px;
}
}
/* =============================================================
Home CTA — eyebrow / title / body / form alignment.
The Elementor column wrapping these widgets is flex-row + flex-
wrap, so widgets without a flex-basis pack side-by-side. Each
top-level widget claims its own row, then inner text is capped
at the maquette's .cta__wrap (1000px) and .cta p (56ch) so the
typography reads as a centered column instead of full-bleed.
============================================================= */
.home-cta-sec > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-element,
.home-cta-sec > .elementor-container > .elementor-column > .elementor-element-populated > .elementor-element {
flex-basis: 100% !important;
width: 100% !important;
}
.home-cta-sec .cta__eyebrow {
display: flex !important;
justify-content: center !important;
align-items: center !important;
gap: 16px !important;
}
.home-cta-sec .cta__title .elementor-heading-title {
/* Capped at 56px (was 72px) so the home hero H1 stays the largest
type on the page — hero H1 uses clamp(34, 4vw, 64), and we want
the CTA title visibly smaller (Round 10 hierarchy fix). */
font-size: clamp(34px, 3.6vw, 56px);
line-height: 1.1;
letter-spacing: -0.015em;
max-width: 920px;
margin-left: auto;
margin-right: auto;
}
.home-cta-sec .cta__body p {
font-size: 18px;
line-height: 1.7;
max-width: 52ch;
margin-left: auto;
margin-right: auto;
}
/* Tighter vertical rhythm between the four widgets, so the section
reads as a single composition. */
.home-cta-sec {
padding-top: 140px !important;
padding-bottom: 140px !important;
}
.home-cta-sec .cta__eyebrow {
margin-bottom: 40px !important;
}
.home-cta-sec .cta__eyebrow .elementor-heading-title {
font-size: 12px;
letter-spacing: 0.42em;
}
.home-cta-sec .cta__title {
margin-bottom: 32px !important;
}
.home-cta-sec .cta__body {
margin-bottom: 64px !important;
}
/* Tighter rhythm on mobile — the title + lead + form was reading as
three islands with too much marine sea between them. Pulls the form
closer to the copy that introduces it. */
@media (max-width: 720px) {
.home-cta-sec.elementor-section {
padding-top: clamp(56px, 9vh, 88px) !important;
padding-bottom: clamp(56px, 9vh, 88px) !important;
}
.home-cta-sec .cta__title {
margin-bottom: 18px !important;
}
.home-cta-sec .cta__body {
margin-bottom: 28px !important;
}
.home-cta-sec .cta__body p {
font-size: 15px;
line-height: 1.55;
}
.home-cta-sec .home-form {
padding: 28px 22px !important;
}
}
/* Form: hairline gold frame to give it editorial weight against
the marine background. */
.home-cta-sec .home-form {
max-width: 880px !important;
padding: 48px 56px;
background: rgba(244, 241, 234, 0.02);
border: 1px solid rgba(184, 157, 100, 0.18);
box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.6);
}
/* Slightly more legible labels (12px instead of 11px). */
.home-cta-sec .home-form .elementor-form .elementor-field-label {
font-size: 12px !important;
letter-spacing: 0.24em !important;
color: var(--bz-creme-78) !important;
margin-bottom: 12px !important;
}
/* Inputs: a touch more breathing room. */
.home-cta-sec .home-form .elementor-form input[type="text"],
.home-cta-sec .home-form .elementor-form input[type="email"],
.home-cta-sec .home-form .elementor-form input[type="tel"],
.home-cta-sec .home-form .elementor-form textarea {
padding: 16px 18px !important;
}
/* Submit button: center it on the section's symmetry axis.
(Modern Elementor Pro wraps the submit in .e-form__buttons,
not .elementor-button-wrapper.) */
.home-cta-sec .home-form .e-form__buttons {
justify-content: center !important;
margin-top: 24px;
}
/* Service icons on mobile — wrapped in a thin bronze hexagon frame
that echoes the Bazinet brand emblem-B. Each icon becomes a "sceau"
(wax seal) at the top of the card. The hex outline is rendered via
inline SVG background, so the icon SVG/PNG inside renders untouched
on top. Centered horizontally for a clean editorial top-of-card. */
@media (max-width: 720px) {
.svc__card .svc__toggle {
align-items: center !important;
text-align: center;
}
.svc__card .svc__icon {
width: 84px !important;
height: 84px !important;
margin: 0 auto 18px !important;
padding: 16px;
box-sizing: border-box;
background: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
/* All three service icons sized uniformly inside the bronze hex
frame — no per-icon overrides needed since every icon is a
modern SVG with comparable visible-content ratios. */
.svc__card .svc__icon img {
width: 64px !important;
height: 64px !important;
max-width: none !important;
max-height: none !important;
object-fit: contain;
}
/* Title gets centered alignment to flow with the centered hex */
.svc__card .svc__title {
text-align: center;
}
}
/* Disclaimer "Vos informations… Loi 25 (Québec)…" hidden site-wide on
ALL forms (mobile + desktop). The information lives in the privacy
policy page; redundant noise on the contact form. */
.bz-contact-disclaimer {
display: none !important;
}
/* Mobile form refinements (≤ 720 px). */
@media (max-width: 720px) {
.home-cta-sec .home-form {
padding: 32px 24px;
}
/* Shorter submit CTA on mobile — "Envoyer ma demande" → "Envoyer".
Approach: hide the original
entirely (display:none) and inject our shorter text via ::after
on the content wrapper. This avoids the original text node
reserving its full width even at font-size:0. */
html body .bz-contact-form button[type="submit"] .elementor-button-text {
display: none !important;
}
html body .bz-contact-form button[type="submit"] .elementor-button-content-wrapper::after {
content: 'Envoyer';
font-size: 13px;
letter-spacing: 0.28em;
text-transform: uppercase;
font-weight: 500;
color: var(--bz-marine, #0B1E38);
font-family: var(--font-d);
}
/* Compact promise on mobile — shorter copy injected via pseudo. */
.bz-contact-promise em {
font-size: 0 !important;
}
.bz-contact-promise em::before {
content: 'Réponse dans les 48 h ouvrables';
font-size: 13.5px;
font-style: italic;
}
}
/* =============================================================
Services accordion — closed by default, click to expand.
Built on the existing svc structure but with a button toggle,
icon at top, and a hidden body that slides open.
============================================================= */
/* Reset the button styling so the whole head reads as the card surface */
.svc__card .svc__toggle {
all: unset;
display: flex;
flex-direction: column;
gap: 24px;
cursor: pointer;
padding: 32px 32px 24px;
width: 100%;
box-sizing: border-box;
color: inherit;
text-align: left;
}
.svc__card .svc__toggle:focus-visible {
outline: 1px solid var(--bz-or, #B89D64);
outline-offset: -1px;
}
/* Icon at the top of the card — uniform square, icons centered.
Scaled up from 58 → 72 to match the bigger headline weight below. */
.svc__card .svc__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 72px;
height: 72px;
margin-bottom: 8px;
}
/* All three service icons are now SVG with comparable density —
uniform width/height + object-fit:contain handles consistent visual
sizing without per-icon caps. */
.svc__card .svc__icon img {
display: block;
width: 56px;
height: 56px;
max-width: 100%;
max-height: 100%;
object-fit: contain;
transition: transform 320ms cubic-bezier(0.3, 0, 0, 1);
}
.svc__card[data-svc-state="open"] .svc__icon img {
transform: scale(1.05);
}
/* Header row: number + name + tag (was a div, now a span inside button) */
.svc__card .svc__head-row {
display: flex;
flex-direction: column;
gap: 6px;
border-bottom: 0; /* the legacy components.css gives this a hairline; the accroche-row already provides one */
padding-bottom: 0;
}
.svc__card .svc__name {
display: block;
font-family: var(--font-d);
font-weight: 300;
font-size: 46px;
line-height: 1.05;
letter-spacing: -0.012em;
color: inherit;
}
/* Léger rapprochement entre Prev et Hub/Gab dans le titre des cartes
svc. La transition couleur sur la pointe du "v" crée un trou
optique : un margin-left légèrement négatif resserre sans chevaucher
(l'overlap -0.12em précédent rendait les lettres trop collées,
user report 2026-05-21). */
.svc__card .svc__name .bz-brand-hub,
.svc__card .svc__name .bz-brand-gab {
margin-left: -0.02em;
}
/* svc__tag (italic subtitle below the name) — bumped for legibility */
.svc__card .svc__tag {
font-size: 20px !important;
line-height: 1.4 !important;
}
/* Accroche row: visible always, chevron on the right.
Gold border-top now stronger (0.20 → 0.45) so the row reads as
"click here to expand". Hover bumps the gold tint and adds a
subtle bg wash to reinforce the affordance. */
.svc__card .svc__accroche-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding-top: 22px;
padding-bottom: 4px;
border-top: 1px solid rgba(184, 157, 100, 0.45);
transition: border-color 260ms cubic-bezier(0.3, 0, 0, 1),
padding-left 260ms cubic-bezier(0.3, 0, 0, 1);
}
.svc__card .svc__toggle:hover .svc__accroche-row {
border-top-color: var(--bz-or, #B89D64);
}
.svc__card .svc__accroche {
flex: 1;
font-family: var(--font-d);
font-size: 19px;
font-weight: 500;
letter-spacing: 0.02em;
line-height: 1.4;
color: inherit;
margin: 0;
}
.svc__card .svc__chevron {
color: var(--bz-or, #B89D64);
flex-shrink: 0;
width: 22px;
height: 13px;
transition: transform 320ms cubic-bezier(0.3, 0, 0, 1);
}
.svc__card[data-svc-state="open"] .svc__chevron {
transform: rotate(180deg);
}
.svc__card[data-svc-state="open"] .svc__accroche-row {
border-top-color: var(--bz-or, #B89D64);
}
/* Hover hint: chevron travels down by 2px to suggest expansion */
.svc__card .svc__toggle:hover .svc__chevron {
transform: translateY(2px);
}
.svc__card[data-svc-state="open"] .svc__toggle:hover .svc__chevron {
transform: rotate(180deg) translateY(-2px);
}
/* Body — hidden by default, slides open via max-height + opacity */
.svc__card .svc__body {
overflow: hidden;
max-height: 0;
opacity: 0;
transition:
max-height 380ms cubic-bezier(0.3, 0, 0, 1),
opacity 280ms cubic-bezier(0.3, 0, 0, 1);
}
.svc__card .svc__body[hidden] { display: block !important; } /* override the [hidden] attribute so transition still applies */
.svc__card[data-svc-state="open"] .svc__body {
max-height: 1000px;
opacity: 1;
}
.svc__card .svc__body-inner {
padding: 0 32px 32px;
display: flex;
flex-direction: column;
gap: 20px;
}
.svc__card .svc__body .svc__corps {
font-size: 18px;
line-height: 1.6;
color: inherit;
margin: 0;
}
/* Features list — gold dashes, editorial spacing */
.svc__card .svc__features {
list-style: none;
margin: 10px 0 4px;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.svc__card .svc__features li {
position: relative;
padding-left: 26px;
font-size: 17px;
line-height: 1.5;
color: inherit;
}
.svc__card .svc__features li::before {
content: '';
position: absolute;
left: 0;
top: 0.65em;
width: 16px;
height: 1px;
background: var(--bz-or, #B89D64);
}
/* Body CTA at the bottom of the expanded card — bump to match the
rest of the body type scale. */
.svc__card .svc__cta {
font-size: 16px !important;
letter-spacing: 0.20em !important;
padding-top: 24px !important;
gap: 18px !important;
}
/* Recoller "Découvrir PREVHUB" / "Découvrir PREVGAB" en un seul mot
inline. En display:inline-flex (par défaut sur .svc__cta), le span
.bz-brand-hub/gab est blockifié et devient un item flex séparé qui
peut sauter à la ligne suivante quand la largeur ne suffit pas, ce
qui sépare visuellement PREV de HUB/GAB. On bascule en inline-block
pour que le contenu retrouve un flux inline naturel (PREV+span sans
espace = pas de point de rupture entre eux). `white-space: nowrap`
empêche le retour à la ligne de la flèche → sur mobile. On garde
l'arrow alignée par un margin-left au lieu du gap flex. */
.svc__card .svc__cta {
display: inline-block !important;
gap: 0 !important;
white-space: nowrap;
}
.svc__card .svc__cta svg {
margin-left: 14px;
vertical-align: middle;
}
.svc__card .svc__cta .bz-brand-hub,
.svc__card .svc__cta .bz-brand-gab {
display: inline !important;
}
/* Hover state on whole card — subtle accent on icon */
.svc__card:hover .svc__icon img {
transform: scale(1.05);
}
@media (prefers-reduced-motion: reduce) {
.svc__card .svc__body,
.svc__card .svc__chevron,
.svc__card .svc__icon img {
transition: none !important;
}
}
/* =============================================================
Section ornament (vertical hairline + gold diamond at the top
of each section) — hidden site-wide. The eyebrow text +
passerelle PCB transitions already mark section boundaries;
the ornament was redundant and stopped aligning cleanly with
the 2-col services grid.
============================================================= */
.sec__ornament {
display: none;
}
/* Now that the ornament is gone, the major sections need extra
top breathing room so the head doesn't slam into the passerelle
above. Bumped from the original 24/32px to ~96/120px. */
@media (min-width: 961px) {
.sec.svc {
padding-top: 96px;
}
.sec.pq {
padding-top: 112px;
}
/* Le constat (.pb) — the legacy radial gold glow was anchored at
10% 10% (near the top-left corner), creating a visible warm seam
right at the boundary with the passerelle above. Push it deeper
into the section so it reads as ambient lighting, not a cut. */
.sec.pb::before {
background:
radial-gradient(900px 600px at 10% 45%, rgba(184, 157, 100, 0.05), transparent 55%),
radial-gradient(700px 500px at 95% 85%, rgba(184, 157, 100, 0.03), transparent 55%) !important;
}
/* Align the services head to the 2-col grid below: title block
strictly contained in the left half (above Prevhub), intro
paragraph in the right half (above Audit). The title's gold
"opérations" word never crosses the column boundary. */
.svc__head {
grid-template-columns: 1fr 1fr;
}
.svc__head > div:first-child {
max-width: 100%;
}
/* Constrain the H2 itself in case copy gets longer — wraps inside
the left column instead of bleeding into the right. */
.svc__title {
max-width: 100%;
}
/* Drop the intro paragraph so its baseline aligns with the H2
title (skipping past the eyebrow on the left), rather than
sitting at the top with the eyebrow. */
.svc__head .svc__intro {
margin-top: 43px;
}
/* Services grid — 2 columns instead of 3 (numéros déjà masqués
plus haut). The service name + icon already carry the headline
weight, so the eyebrow numbers were redundant. */
.svc__grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* =============================================================
Filler 4th cell — purely decorative, fills the empty 4th slot
of the 2x2 grid when there are 3 services. Pure CSS via
::after on .svc__grid; auto-placed by Grid as the next item.
TO REMOVE when adding a 4th real service: delete the entire
block below (start from .svc__grid::after through closing `}`).
The grid will then naturally hold 4 service cards in 2 rows.
============================================================= */
/* Le ::after décoratif (« Trois leviers, un même cadre de pensée. »)
servait de 4e cellule quand il n'y avait que 3 services. Maintenant
qu'on a 4 vraies cartes (Prevhub, Prevgab, Audit, Réputation), la
grille 2x2 est complète et le ::after est retiré.
Si on revient un jour à 3 services, restaurer la règle d'origine
ci-dessous (commentée). */
/*
@media (min-width: 961px) {
.svc__grid::after {
content: "Trois leviers, un même cadre de pensée.";
background: var(--bz-creme-2);
display: flex;
align-items: center;
justify-content: center;
padding: 48px 56px;
font-family: var(--font-d);
font-weight: 300;
font-style: italic;
font-size: 28px;
line-height: 1.25;
letter-spacing: -0.01em;
color: var(--bz-marine, #0B1E38);
text-align: center;
position: relative;
}
}
*/
/* Neutraliser le ::after au cas où une autre feuille (brand-light) le
réactiverait. */
@media (min-width: 961px) {
body.bz-home .svc__grid::after {
content: none !important;
display: none !important;
}
}
/* =============================================================
Pourquoi Bazinet timeline — 9 columns (was 8).
Realign the connecting rail so it ends exactly at the last
dot (no overflow past 2026 / Fondation).
============================================================= */
.pq__tl {
/* `minmax(0, 1fr)` instead of bare `1fr` so a column with
long content (e.g. a longer role label) can't widen its track
past 1/9 of the row — otherwise the dot positions drift and
the connecting rail no longer ends at the last dot's center. */
grid-template-columns: repeat(9, minmax(0, 1fr)) !important;
}
/* Sur tablette (721-1199px), les colonnes deviennent trop étroites
(~76px à 1024px) et "Directeur régional multi-établissements"
déborde horizontalement sur la colonne suivante "Directeur général
de groupe". Le trait d'union insécable U+2011 dans "multi‑établisse-
ments" bloque `hyphens: auto`. On force le wrap avec
`overflow-wrap: anywhere` et on réduit la taille du label pour
maximiser la lisibilité dans la colonne étroite. */
@media (min-width: 721px) and (max-width: 1199px) {
.pq__tl-role {
font-size: 12px !important;
line-height: 1.3 !important;
overflow-wrap: anywhere !important;
word-break: break-word !important;
}
}
.pq__tl::before {
/* Dot is 14 px, centered at left:0 of each li. The rail must
start at the first dot's center (7 px) and end at the last
dot's center.
With `repeat(9, 1fr)` and `gap: 20 px`, the last column's
left edge is at (8 × (W + 20)) / 9 = 8W/9 + 17.78 px.
Dot center is +7 px from that.
Final right-inset = (100 % - last-col-left) - 7 px
= 100 %/9 - 17.78 px - 7 px
= calc(100 %/9 - 24.78 px). */
left: 7px !important;
right: calc(100% / 9 - 24.78px) !important;
}
/* Hide the hairline that filled the rest of the row after the
"BÂTI DE L'INTÉRIEUR · 25 ANS SUR LE PLANCHER" label — the
passerelle PCB above already provides the horizontal ornament. */
.pq__tl-label::after {
display: none;
}
/* Hide the empty year fillers ("·") on intermediate timeline items.
Only the first (1999) and last (2026, .is-now) keep their year
visible above the role label. The min-height on .pq__tl-year
preserves vertical alignment so all roles stay on the same line.
Station circles on the rail are kept untouched. */
.pq__tl li:not(:first-child):not(.is-now) .pq__tl-year {
visibility: hidden;
}
/* Drop-line connector — short vertical hairline between the rail dot
et le label rôle, sur les items intermédiaires uniquement. On
décale le sommet vers le bas (top:30px au lieu de 16px) pour
laisser un vide volontaire entre le point sur le rail et le
départ de la ligne — composition plus aérée, la ligne "tombe"
vers le rôle depuis un peu plus bas plutôt que de toucher le dot. */
.pq__tl li:not(:first-child):not(.is-now)::after {
content: "";
position: absolute;
left: 6.5px;
top: 30px;
width: 1px;
height: 22px;
background: linear-gradient(180deg,
var(--bz-or-55) 0%,
rgba(184, 157, 100, 0.10) 100%);
pointer-events: none;
}
/* Allow long role text to wrap naturally inside narrower columns.
With 9 columns at typical content widths (~120 px / col after gap),
roles like "Directeur général de groupe" or "Fondation de Bazinet
Solutions Intégrées" wrap to 3-4 lines and would otherwise butt up
against the next column's text. The padding-right reserves a 12 px
safety margin per cell without shifting the dot (left:0 of each li,
the rail formula uses dot-center positions that remain unchanged). */
.pq__tl-role {
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
padding-right: 12px;
}
/* Slightly tighter line-height on the longest labels so the wrapped
columns don't tower over the others — keeps row heights closer. */
.pq__tl li .pq__tl-role {
line-height: 1.35;
}
/* =============================================================
Footer partner logos — high-res transparent PNGs. Drop the
legacy grayscale filter so the brand red shows on the dark
footer; keep a soft opacity so they read as supporting marks
rather than primary attention. */
.ftr__partners-logos img {
filter: none !important;
opacity: 0.85 !important;
}
.ftr__partners-logos img:hover {
opacity: 1 !important;
}
/* =============================================================
Services cards — "reveal on intent".
At rest the card is fully transparent: only a hairline gold
frame and a whisper of shadow suggest its presence, so the
cream-2 section reads as a single editorial canvas. On hover
(and once the accordion is open) the card materialises:
white wash fades in, border deepens, shadow lifts. This
mirrors the form-box transparency philosophy from the CTA,
re-tinted for cream.
Drop the legacy grid hairlines (.svc__grid bg + borders) —
the per-card frame and gap now carry the separation.
============================================================= */
.svc__grid {
gap: clamp(20px, 1.6vw, 28px) !important;
background: transparent !important;
border-top: 0 !important;
border-bottom: 0 !important;
}
.svc__card {
/* Rest state — subtle white wash + layered "3D plate" shadows:
1. inset top highlight → light catches the upper edge
2. inset bottom shade → suggests the card has thickness
3. close ambient → grounds the card on the surface
4. mid depth (sharp) → primary lift cue
5. far depth (diffuse) → ambient occlusion underneath */
background: rgba(255, 255, 255, 0.22);
border: 1px solid rgba(184, 157, 100, 0.20);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.55),
inset 0 -1px 0 rgba(11, 30, 56, 0.06),
0 1px 2px rgba(11, 30, 56, 0.05),
0 10px 24px -14px var(--bz-marine-18),
0 26px 50px -32px rgba(11, 30, 56, 0.28);
transition:
background-color 420ms cubic-bezier(0.3, 0, 0, 1),
border-color 420ms cubic-bezier(0.3, 0, 0, 1),
box-shadow 420ms cubic-bezier(0.3, 0, 0, 1),
transform 420ms cubic-bezier(0.3, 0, 0, 1);
}
/* Materialise on hover OR when accordion is open. components.css
line 1127 sets a hover background on .svc__card — our rule has
the same specificity AND comes later in the cascade, so it wins.
The shadow stack scales up (deeper, wider, slightly stronger
highlight) so the card reads as physically lifted off the page. */
.svc__card:hover,
.svc__card[data-svc-state="open"] {
background: rgba(255, 255, 255, 0.68);
border-color: rgba(184, 157, 100, 0.40);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.75),
inset 0 -1px 0 rgba(11, 30, 56, 0.08),
0 2px 4px rgba(11, 30, 56, 0.06),
0 18px 36px -14px rgba(11, 30, 56, 0.24),
0 40px 80px -36px rgba(11, 30, 56, 0.36);
}
/* Lift only on hover (not when "open" — when open the card sits
in flow alongside its expanded body so a translate would offset
the reading column). 4 px lift + 0.5 % scale amplifies the 3D
read without making the card feel like it's flying. */
.svc__card:hover {
transform: translateY(-4px) scale(1.005);
}
@media (prefers-reduced-motion: reduce) {
.svc__card { transition: none; }
.svc__card:hover { transform: none; }
}
/* Filler 4th cell — same dimensional rest state as a real card.
It never receives focus/hover so it stays at rest forever, which
reads as a quiet anchor in the 4th slot of the 2×2 grid. */
@media (min-width: 961px) {
.svc__grid::after {
background: rgba(255, 255, 255, 0.22) !important;
border: 1px solid rgba(184, 157, 100, 0.20);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.55),
inset 0 -1px 0 rgba(11, 30, 56, 0.06),
0 1px 2px rgba(11, 30, 56, 0.05),
0 10px 24px -14px var(--bz-marine-18),
0 26px 50px -32px rgba(11, 30, 56, 0.28);
}
}
/* Mobile override — the desktop 8-column timeline becomes a single
stacked column so each station role/year reads on one line. The
horizontal rail decorates desktop only; on mobile we hide it
(handled separately) and let the dots flow vertically. */
@media (max-width: 960px) {
html body.bz-home .pq__tl {
grid-template-columns: minmax(0, 1fr) !important;
gap: 28px !important;
}
}
/* Mobile: hide the "David Bazinet" caption under the portrait in the
"Pourquoi Bazinet" section. Desktop and tablet keep it for the
editorial composition; on mobile the portrait + signature carry the
intent on their own without the redundant caption. */
@media (max-width: 720px) {
html body.bz-home .pq__caption {
display: none;
}
}
/* ============================================================
Home — "Nos solutions" snapshot band
Inserted between hero and Constat to give the visitor immediate
functional clarity: who we are (label), what we sell (3 cards).
Cream-warm ground = a clean editorial pause between the marine
hero atmosphere and the dark-marine Constat that follows.
============================================================ */
body.bz-home .home-snapshot {
/* Token aligned: was `--bz-creme-warm` (which doesn't exist in tokens.css)
with #E8E6E2 fallback. Canonical is `--bz-creme-2` = #EFE9DD. */
background: var(--bz-creme-2, #EFE9DD);
padding: clamp(48px, 7vh, 88px) 0;
}
body.bz-home .home-snapshot__inner {
max-width: 1280px;
margin: 0 auto;
padding: 0 clamp(24px, 5vw, 88px);
}
body.bz-home .home-snapshot__eyebrow {
font-family: var(--font-d);
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--bz-or, #B89D64);
margin: 0 0 clamp(28px, 4vh, 44px);
padding-left: 0;
position: relative;
}
body.bz-home .home-snapshot__eyebrow::before {
content: "";
display: inline-block;
width: 24px;
height: 1px;
background: var(--bz-or, #B89D64);
vertical-align: middle;
margin-right: 14px;
opacity: 0.65;
}
body.bz-home .home-snapshot__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(14px, 1.4vw, 22px);
}
body.bz-home .home-snapshot__card {
position: relative;
display: block;
padding: clamp(28px, 3vh, 36px) clamp(24px, 2vw, 32px);
background: rgba(255, 255, 255, 0.55);
border: 1px solid rgba(184, 157, 100, 0.28);
text-decoration: none;
color: inherit;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.55) inset,
0 4px 14px rgba(4, 11, 22, 0.08),
0 24px 56px -22px rgba(4, 11, 22, 0.20);
transition:
background 320ms cubic-bezier(0.3, 0, 0, 1),
border-color 320ms cubic-bezier(0.3, 0, 0, 1),
transform 320ms cubic-bezier(0.3, 0, 0, 1),
box-shadow 320ms cubic-bezier(0.3, 0, 0, 1);
}
body.bz-home .home-snapshot__card:hover {
background: rgba(255, 255, 255, 0.85);
border-color: var(--bz-or-55);
transform: translateY(-2px);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.65) inset,
0 6px 18px rgba(4, 11, 22, 0.12),
0 32px 72px -18px rgba(4, 11, 22, 0.30),
0 0 38px -10px var(--bz-or-30);
}
body.bz-home .home-snapshot__card-icon {
display: inline-flex;
width: 36px;
height: 36px;
margin-bottom: clamp(14px, 2vh, 20px);
}
body.bz-home .home-snapshot__card-icon img {
width: 100%;
height: 100%;
object-fit: contain;
opacity: 0.85;
}
body.bz-home .home-snapshot__card-title {
font-family: var(--font-d);
font-size: clamp(20px, 1.4vw, 24px);
font-weight: 400;
color: var(--bz-marine, #0B1E38);
margin: 0 0 8px;
line-height: 1.15;
letter-spacing: -0.005em;
}
body.bz-home .home-snapshot__card-title em {
color: var(--bz-or, #B89D64);
font-style: italic;
font-weight: 300;
}
body.bz-home .home-snapshot__card-body {
font-family: var(--font-d);
font-size: 14px;
line-height: 1.55;
color: var(--bz-titane, #4A4A4A);
margin: 0 0 clamp(18px, 2.4vh, 26px);
}
body.bz-home .home-snapshot__card-arrow {
position: relative;
display: inline-block;
width: 28px;
height: 1px;
background: var(--bz-or, #B89D64);
vertical-align: middle;
transition: width 320ms cubic-bezier(0.3, 0, 0, 1);
}
body.bz-home .home-snapshot__card-arrow::after {
content: "";
position: absolute;
right: -1px;
top: -3px;
width: 7px;
height: 7px;
border-top: 1px solid var(--bz-or, #B89D64);
border-right: 1px solid var(--bz-or, #B89D64);
transform: rotate(45deg);
}
body.bz-home .home-snapshot__card:hover .home-snapshot__card-arrow {
width: 40px;
}
/* Mobile: stack the 3 cards. Reduce padding so the band stays
compact and doesn't dominate the scroll between hero and Constat. */
@media (max-width: 720px) {
body.bz-home .home-snapshot {
padding: clamp(40px, 5vh, 56px) 0;
}
body.bz-home .home-snapshot__grid {
grid-template-columns: 1fr;
gap: 12px;
}
body.bz-home .home-snapshot__card {
padding: clamp(22px, 3vh, 28px) clamp(20px, 5vw, 24px);
}
body.bz-home .home-snapshot__card-icon {
width: 30px;
height: 30px;
margin-bottom: 12px;
}
body.bz-home .home-snapshot__card-title {
font-size: 19px;
}
}
/* Hero carousel — match the service pages' photo placement: 50/50 split
between text and photo column on desktop (was 1.1fr 1fr — text-dominant). */
@media (min-width: 961px) {
body.bz-home .hero__slide-grid {
grid-template-columns: 1fr 1fr;
}
}
/* Hero photo — lighten the overlay. Original gradient had darkening
bands at top (0.2) and bottom (0.6) that made the image feel heavy;
we keep only a soft bottom fade (0.3 = 50% lighter than before) to
keep the carousel dock readable, and clear the rest of the image. */
body.bz-home .hero__photo::after {
background: linear-gradient(180deg, rgba(11, 30, 56, 0) 0%, rgba(11, 30, 56, 0) 50%, rgba(11, 30, 56, 0.3) 100%);
}
/* Remove the small gold diamond watermark on the 4th filler cell
("Trois leviers, un même cadre de pensée."). brand-light.css line
382 sets a rotated-rect SVG background on `.svc__grid::after`; keep
the cream backdrop, drop just the diamond image. */
@media (min-width: 961px) {
body.bz-home .svc__grid::after {
background:
var(--bz-creme-2, #EFE9DD) !important;
}
}
/* Hero pager — make the four service labels (Vue d'ensemble · Prevhub ·
Audit · Réputation) instantly readable so visitors see the full offer
without waiting for autoplay. Bigger labels, more contrast on the
inactive state, and the active label tinted gold to signal it. */
@media (min-width: 961px) {
body.bz-home .pager__label {
font-size: 15px;
letter-spacing: 0.16em;
}
body.bz-home .pager__btn {
color: rgba(244, 241, 234, 0.55);
}
body.bz-home .pager__btn:hover,
body.bz-home .pager__btn:focus-visible {
color: var(--bz-creme, #F4F1EA);
}
body.bz-home .pager__btn.is-active {
color: var(--bz-or, #B89D64);
}
body.bz-home .pager__line {
height: 2px;
}
}
/* =============================================================
Pager hero — 5 slides depuis l'ajout de PrevGab.
La règle d'origine dans components.css fige le grid à
`repeat(4, minmax(110px, 170px))` qui force le 5e bouton à
passer sur une 2e ligne. On bascule en `repeat(5, ...)` avec
des cellules plus étroites pour que tout tienne sur une ligne.
Si jamais on ajoute un 6e service, ajuster ici.
============================================================= */
@media (min-width: 961px) {
body.bz-home .pager {
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 14px;
}
body.bz-home .pager__label {
font-size: 13.5px;
letter-spacing: 0.13em;
white-space: nowrap;
}
}
/* Hero eyebrow — slide 0 ("POUR LES RESTAURATEURS QUÉBÉCOIS") is
longer than the service eyebrows and can wrap to 2 lines on narrower
desktops, which would push slide-0's CTA out of alignment with the
other three slides. Reserve the same vertical footprint on all four
slides so the title and CTA stay at identical Y positions. */
@media (min-width: 961px) {
body.bz-home .hero__act .eyebrow {
min-height: 2.6em;
align-items: center;
}
/* Hero slide CTA — center the button in the empty space between
the slogan text and the pager dock at the bottom. Each slide's
.hero__act is a flex column with a generous min-height; the CTA
wrap uses auto top + bottom margins so it sits in the visual
middle of whatever space remains under the title. Slides with
longer titles get a smaller margin (CTA closer to title); slide 0
(shortest title) gets the most breathing room around the CTA. */
body.bz-home .hero__act {
display: flex;
flex-direction: column;
min-height: 540px;
}
body.bz-home .hero__act .hero__svc-ctas {
margin-top: auto;
margin-bottom: auto;
}
}
/* ============================================================
Home mobile — section breathing (round 2 polish, 2026-05-08).
Two sections felt cramped on mobile:
1. Constat (.pb) — 6 frictions in a stack, tight gaps.
2. Pourquoi (.pq) — David portrait + bio + quote + timeline
collapsing into a wall of text.
Adds vertical breathing + softer typography on mobile only.
============================================================ */
@media (max-width: 720px) {
/* =================================================================
P1 · Standardize mobile section padding (2026-05-08, round 3)
All major sections share the same vertical rhythm so the page
doesn't have one section padded 40 px and the next 100 px. Hero
stays at 0 because its layout fills the viewport on its own. */
body.bz-home .sec.svc,
body.bz-home .sec.pq,
body.bz-home .home-cta-sec,
body.bz-home .bz-cross-sell {
padding-top: clamp(96px, 14vh, 130px) !important;
padding-bottom: clamp(96px, 14vh, 130px) !important;
}
/* =================================================================
P2 · Visible breaks between same-color sections
Constat + Intermezzo are both encre, CTA + Cross-sell are both
marine — without a hairline they read as one merged section.
Renders a 32 px × 1 px centered gold rule via ::after on the
PREVIOUS section's padding-bottom area (the ::before pseudos are
reserved for the radial lamp pools). Visible centered between
the two sections like a chapter mark.
================================================================= */
body.bz-home .sec.pb,
body.bz-home .bz-cross-sell-sec {
position: relative;
}
/* Section-break ornament: a small gold diamond/losange between
sections of the same colour (Constat→Intermezzo, CTA→Cross-sell).
Attached to the LATER section as ::before with top:0 + translateY(-50%)
so the diamond sits half on each side of the seam. Attaching to the
later section avoids the previous CTA-side ::after which got clipped
by .home-cta-sec's overflow:hidden — only the upper chevron showed.
Background is transparent so all four gold edges read on both sides. */
body.bz-home .sec.pb::after,
body.bz-home .bz-cross-sell-sec::before {
content: "";
position: absolute;
left: 50%;
width: 10px;
height: 10px;
border: 1px solid rgba(184, 157, 100, 0.65);
background: transparent;
pointer-events: none;
z-index: 3;
}
body.bz-home .sec.pb::after {
bottom: 0;
transform: translate(-50%, 50%) rotate(45deg);
}
body.bz-home .bz-cross-sell-sec::before {
top: 0;
transform: translate(-50%, -50%) rotate(45deg);
/* Client request 2026-05-17 : masquer le losange après le
formulaire sur mobile. La règle déclarative ci-dessus est
conservée comme référence ; le content:none l'annule. */
content: none;
}
/* --- Constat (problèmes block) --- */
body.bz-home .sec.pb,
body.bz-home section.pb {
padding-top: clamp(96px, 14vh, 130px);
padding-bottom: clamp(96px, 14vh, 130px);
}
body.bz-home .pb__frictions {
grid-template-columns: 1fr;
/* P3 · More breathing between friction items on mobile */
row-gap: clamp(40px, 6vh, 60px);
margin-bottom: clamp(48px, 6vh, 72px);
}
body.bz-home .pb__friction {
padding: 18px 0;
grid-template-columns: 44px 1fr;
gap: 18px;
}
body.bz-home .pb__friction .l {
font-size: 18.5px;
line-height: 1.55;
display: block;
}
/* Punch sentence — bold, high contrast cream so the eye lands here
first. Was running together with the explanation in one flat
weight, making mobile rows hard to scan. */
body.bz-home .pb__friction .pb__l-title {
display: block;
font-weight: 600;
font-size: 19px;
letter-spacing: -0.005em;
color: var(--bz-creme, #F4F1EA);
margin-bottom: 4px;
}
/* Explanation — softer, drops to a body weight + lighter cream
for the secondary reading layer. */
body.bz-home .pb__friction .pb__l-body {
display: block;
font-weight: 400;
font-size: 17.5px;
line-height: 1.55;
color: rgba(244, 241, 234, 0.72);
}
body.bz-home .pb__friction .n svg {
width: 28px;
height: 28px;
}
body.bz-home .pb__friction .mark {
display: none; /* the gold dot crowds the row in narrow column */
}
/* Vertically center the icon to the title (sentence 1), not the
whole text block. With items of variable height (2–4 lines),
anchoring to top + matching the title's first-line height keeps
icons visually aligned across all 6 rows. */
body.bz-home .pb__friction {
align-items: start;
}
body.bz-home .pb__friction .n {
margin-top: 2px;
}
/* --- Pourquoi block — gaps between sub-blocks (B) + softer typo (C) --- */
body.bz-home .pq__inner,
body.bz-home .pq__col-text {
display: flex;
flex-direction: column;
gap: clamp(40px, 6vh, 80px);
}
body.bz-home .pq__body p {
font-size: 18px;
line-height: 1.7;
}
body.bz-home .pq__lead--quote,
body.bz-home .pq__lead {
font-size: clamp(20px, 5vw, 26px);
line-height: 1.4;
}
body.bz-home .pq__title {
font-size: clamp(26px, 6.5vw, 34px);
line-height: 1.15;
}
body.bz-home .pq__signature {
font-size: clamp(36px, 9vw, 48px);
line-height: 1;
}
/* Add breathing between the timeline label and the timeline itself */
body.bz-home .pq__timeline {
margin-top: clamp(32px, 5vh, 56px);
}
/* --- Mobile typography bump (2026-05-08, refined +10 % on
2026-05-08 round 2) ---
User feedback: home text felt "un peu petit" on mobile, then
confirmed the first bump and asked for a further +10 % on body
copy. Headings stay where they are (already at editorial scale)
— only body, leads and CTA get the extra lift. */
body.bz-home .hero__svc-btn {
font-size: 15px;
letter-spacing: 0.20em;
}
body.bz-home .pb__outro {
font-size: 20.5px;
line-height: 1.65;
}
body.bz-home .bz-cross-sell__name {
font-size: 24px;
}
body.bz-home .bz-cross-sell__lead {
font-size: 16.5px;
line-height: 1.5;
}
body.bz-home .bz-cross-sell__arrow {
font-size: 14px;
}
/* Service cards (.svc__card) — accroche + body got their own
+10 % since they're inside cream cards on a marine section
and still felt slightly tight. */
body.bz-home .svc__card .svc__accroche {
font-size: 21px;
line-height: 1.45;
/* T2 round 22 fix · drop the gold border-left + padding so the
accroche line breathes next to the chevron toggle on the right. */
border-left: 0 !important;
padding-left: 0 !important;
}
body.bz-home .svc__card .svc__corps {
font-size: 19.5px;
line-height: 1.65;
}
body.bz-home .svc__intro {
font-size: 21px;
line-height: 1.6;
}
}
/* =============================================================
Hero text — static (no per-slide reveal animation)
Client request 2026-05-09 : the word-by-word title stagger
and the subline fade replayed on every slide change and read
as noise. Force the final visible state and disable transitions.
CTA buttons (.hero__svc-ctas) keep their reveal — by design.
============================================================= */
body.bz-home .hero__word,
body.bz-home .hero__slide.is-active .hero__act.is-active .hero__word {
opacity: 1;
transform: none;
transition: none;
transition-delay: 0ms;
}
body.bz-home .hero__subline,
body.bz-home .hero__slide.is-active .hero__act.is-active .hero__subline {
opacity: 1;
transform: none;
transition: none;
transition-delay: 0ms;
}
/* =============================================================
Hero slide change — "page turn" feel
Client request 2026-05-09 : the previous opacity-only crossfade
(700 ms) combined with the photo Ken Burns restart felt saccadé.
Replace with a longer, smoother reveal where the incoming slide
glides in from the right while fading in — visual metaphor of a
page being turned, not two layers blinking.
============================================================= */
body.bz-home .hero__slide {
transition: opacity 2200ms cubic-bezier(0.45, 0, 0.55, 1);
}
body.bz-home .hero__slide.is-active {
animation: bz-hero-page-turn 2200ms cubic-bezier(0.45, 0, 0.55, 1);
}
@keyframes bz-hero-page-turn {
0% { opacity: 0; transform: translateX(16px); }
100% { opacity: 1; transform: translateX(0); }
}
/* Photo : kill the scale(1.08) → scale(1) Ken Burns restart on
every slide change. It was a major contributor to the saccadé
feel. The photo now stays at its natural scale through the
crossfade, letting the page-turn motion read clearly. */
body.bz-home .hero__photo img,
body.bz-home .hero__slide.is-active .hero__photo img {
transform: none;
transition: none;
}
@media (prefers-reduced-motion: reduce) {
body.bz-home .hero__slide.is-active {
animation: none;
}
}
/* =============================================================
Pourquoi — timeline rail bounds (mobile)
The vertical rail used `top: 12px; bottom: 12px` (li padding) but
the dots sit at the vertical center of each li, ~22 px below the
li edge. The line therefore overshot the first and last dot by
~10 px. Anchor the rail to the dot centers instead.
12 px li padding-top + ~10 px half-line of role text ≈ 22 px.
============================================================= */
@media (max-width: 960px) {
body.bz-home .pq__tl::before {
top: 22px;
bottom: 22px;
}
}
/* =============================================================
BZ-PG-SHOWCASE — bloc dédié PrevGab sur la page d'accueil
Remplace l'ancien services-grid (« Trois manières... ») qui
servait de placeholder en attendant la plateforme PrevGab.
Mise en page : 2 colonnes desktop (texte gauche, photo droite),
1 colonne mobile (texte au-dessus, photo dessous).
Accent mauve (signature PrevGab) sur eyebrow, italique de titre,
dots de signaux et flèche CTA.
============================================================= */
body.bz-home .bz-pg-showcase-sec {
background: var(--bz-marine, #0B1E38);
}
body.bz-home .bz-pg-showcase {
padding: clamp(80px, 12vh, 160px) clamp(32px, 5vw, 88px);
color: var(--bz-creme, #F4F1EA);
}
body.bz-home .bz-pg-showcase__inner {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: clamp(40px, 5vw, 88px);
align-items: center;
max-width: 1320px;
margin: 0 auto;
}
@media (max-width: 960px) {
body.bz-home .bz-pg-showcase__inner {
grid-template-columns: 1fr;
gap: clamp(32px, 4vh, 48px);
}
}
body.bz-home .bz-pg-showcase__eyebrow {
font-family: var(--font-d);
font-size: clamp(12px, 1vw, 14px);
font-weight: 600;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--bz-mauve, #7B52AB);
margin: 0 0 clamp(20px, 2.4vh, 28px);
display: flex;
align-items: center;
gap: 14px;
line-height: 1;
}
body.bz-home .bz-pg-showcase__eyebrow::before {
content: "";
display: inline-block;
width: 32px;
height: 1px;
background: var(--bz-mauve, #7B52AB);
flex-shrink: 0;
}
body.bz-home .bz-pg-showcase__title {
font-family: var(--font-d);
font-size: clamp(30px, 3.4vw, 52px);
font-weight: 300;
line-height: 1.1;
letter-spacing: -0.014em;
color: var(--bz-creme, #F4F1EA);
margin: 0 0 clamp(20px, 2.4vh, 32px);
max-width: 540px;
}
body.bz-home .bz-pg-showcase__title em {
font-style: italic;
font-weight: 300;
color: var(--bz-mauve-soft, #B89CD9);
}
body.bz-home .bz-pg-showcase__lead {
font-family: var(--font-b);
font-size: clamp(15px, 1.05vw, 17.5px);
line-height: 1.65;
color: var(--bz-creme-78);
margin: 0 0 clamp(28px, 3.6vh, 40px);
max-width: 540px;
}
body.bz-home .bz-pg-showcase__signals {
list-style: none;
padding: 0;
margin: 0 0 clamp(32px, 4vh, 48px);
display: flex;
flex-direction: column;
gap: 12px;
}
body.bz-home .bz-pg-showcase__signals li {
font-family: var(--font-d);
font-size: clamp(13px, 1vw, 15px);
font-weight: 400;
color: var(--bz-creme, #F4F1EA);
letter-spacing: 0.01em;
display: flex;
align-items: center;
gap: 14px;
}
body.bz-home .bz-pg-showcase__dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--bz-mauve, #7B52AB);
box-shadow: 0 0 0 3px rgba(123, 82, 171, 0.18);
flex-shrink: 0;
}
body.bz-home .bz-pg-showcase__cta {
display: inline-flex;
align-items: center;
gap: 14px;
padding: 14px 0;
font-family: var(--font-d);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--bz-mauve-soft, #B89CD9);
text-decoration: none;
border-bottom: 1px solid var(--bz-mauve-30);
transition: gap 320ms var(--ease), color 320ms var(--ease), border-color 320ms var(--ease);
}
body.bz-home .bz-pg-showcase__cta:hover,
body.bz-home .bz-pg-showcase__cta:focus-visible {
gap: 22px;
color: #FFFFFF;
border-color: var(--bz-mauve-55);
outline: none;
}
body.bz-home .bz-pg-showcase__cta svg {
margin-top: 1px;
}
body.bz-home .bz-pg-showcase__photo {
position: relative;
border-radius: 2px;
overflow: hidden;
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.32);
}
body.bz-home .bz-pg-showcase__photo img {
display: block;
width: 100%;
height: auto;
object-fit: cover;
filter: grayscale(6%) contrast(1.04);
}
/* =============================================================
Hero carousel — masquer les flèches prev/next dans le dock.
Les chiffres + pager labels + auto-play suffisent à la navigation,
les flèches font doublon visuellement (demande client).
============================================================= */
body.bz-home #hero .arr,
body.bz-home #hero .arr--prev,
body.bz-home #hero .arr--next,
body.bz-home #hero button[data-prev],
body.bz-home #hero button[data-next] {
display: none !important;
}