/* ============================================================
   SADIS AUTO — DA OYLA
   Éditorial luxe blanc · serif géant Instrument Serif vs Inter Tight
   Filets hairline 1px noirs · accent bleu #3A5AC9 réservé au header
   ============================================================ */

:root {
  --color-bg: #ffffff;
  --color-ink: #000000;
  --color-divider: #000000;
  --accent-auto: #3A5AC9;          /* EXCLUSIVEMENT header */
  --capsule-bg: #f7f7f5;
  --circle-bg: #2e2e2e;
  --pill-border: rgba(0, 0, 0, 0.08);
  --font-stack: 'Inter Tight', 'Inter', Arial, sans-serif;
  --font-serif: 'Instrument Serif', Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-stack);
  font-weight: 400;
  line-height: 1.35;
  overflow-x: hidden;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
button { font-family: inherit; }

/* ------------------------------------------------------------
   HEADER — la navigation unifiée (.sadis-nav) vit dans assets/nav.css.
   Pilule sombre fixed z-index 1000 : lisible sur fond clair OYLA
   comme sur les vidéos. Aucun style header local ici.
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   CONTENU — z-index 10, au-dessus du footer fixe (z-index 1)
   ------------------------------------------------------------ */
.page-content {
  position: relative;
  z-index: 10;
  background: var(--color-bg);
}

/* ------------------------------------------------------------
   ACTE 1 — HERO VIDÉO SCRUBÉE (500vh)
   ------------------------------------------------------------ */
.scroll-video-container {
  position: relative;
  height: 400vh; /* piste resserrée : plus de longue traîne blanche sans texte */
  background: #fff;
  z-index: 10;
}
.video-hero-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  background: #fff; /* studio blanc high-key : titre en noir OYLA */
  padding: 48px;
}
#scroll-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.hero-content {
  position: relative;
  z-index: 3;
  max-width: 700px;
  text-align: left;
}
/* LOGO VIVANT EN GRAND — les 3 barres + SADIS (Cormorant) + pôle en bleu.
   La marque ouvre le hero, au-dessus du kicker. */
.hero-brand {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-bottom: 22px;
}
.hero-brand svg {
  width: clamp(44px, 4.6vw, 64px);
  height: clamp(44px, 4.6vw, 64px);
  display: block;
  align-self: center;
}
.hero-brand-word {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: clamp(44px, 5.2vw, 76px);
  letter-spacing: 0.14em;
  line-height: 1;
  color: var(--color-ink);
}
.hero-brand-pole {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-style: italic;
  font-size: clamp(30px, 3.4vw, 50px);
  line-height: 1;
  color: var(--accent-auto); /* le pôle porte la couleur Auto */
}
.hero-kicker {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-auto); /* bleu Auto — signal couleur du pôle dès le hero */
  opacity: 1;
  margin-bottom: 18px;
}
.hero-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(36px, 6vw, 72px);
  line-height: 1.05;
  letter-spacing: -1px;
  color: var(--color-ink);
  margin-bottom: 24px;
}
.hero-title-line { display: block; overflow: visible; }
.hero-title-line-inner { display: block; will-change: transform; }
.hero-char { display: inline-block; }

.hero-btn { margin-left: 0; margin-top: 10px; }

/* ------------------------------------------------------------
   BOUTON PILL SIGNATURE — capsule + cercle 28px, «+» en pseudo
   ------------------------------------------------------------ */
.newsletter-btn-wrapper {
  display: inline-flex;
  align-items: center;
  background: #fff;
  border: 1px solid var(--pill-border);
  border-radius: 100px;
  padding: 4px 4px 4px 18px;
  cursor: pointer;
  text-decoration: none;
  color: var(--color-ink);
  transition: background-color 0.25s ease, transform 0.25s ease, color 0.25s ease;
  margin-left: 12px;
  flex-shrink: 0;
}
.newsletter-btn-text {
  font-family: var(--font-stack);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.1px;
  text-transform: uppercase;
  margin-right: 8px;
  white-space: nowrap;
}
.newsletter-btn-circle {
  width: 28px;
  height: 28px;
  background: var(--circle-bg);
  border-radius: 50%;
  font-size: 0;         /* masque le nœud texte «+» */
  position: relative;
  flex-shrink: 0;
}
.newsletter-btn-circle::before,
.newsletter-btn-circle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 1px;
  transition: background-color 0.25s ease;
}
.newsletter-btn-circle::before { width: 10px; height: 1.5px; }
.newsletter-btn-circle::after { width: 1.5px; height: 10px; }

.newsletter-btn-wrapper:hover {
  background: #000;
  color: #fff;
}
.newsletter-btn-wrapper:hover .newsletter-btn-circle { background: #fff; }
.newsletter-btn-wrapper:hover .newsletter-btn-circle::before,
.newsletter-btn-wrapper:hover .newsletter-btn-circle::after { background: #000; }

/* ------------------------------------------------------------
   ACTE 2 — CATALOGUE HORIZONTAL ÉPINGLÉ (6 cartes, filets 1px)
   ------------------------------------------------------------ */
.awards-section {
  width: 100%;
  height: 100vh;
  background: #fff;
  border-top: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
  overflow: hidden;
  position: relative;
  z-index: 10;
}
.awards-grid {
  display: flex;
  width: max-content;
  height: 100%;
  will-change: transform;
}
.award-card {
  width: 33.333vw;
  padding: clamp(40px, 8vh, 80px) 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 4vh, 48px);
  border-right: 1px solid var(--color-divider);
  background: #fff;
  flex-shrink: 0;
}
.award-card:last-child { border-right: none; }
.award-image-container {
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.award-image-container img {
  max-width: 85%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.award-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.award-title {
  font-family: var(--font-stack);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.2px;
}
.award-price {
  font-size: 16px;
  font-weight: 500;
  opacity: 0.6;
}

/* ACTE 3 — Rideau vidéo central 0% → 100% */
.video-scaling-wrapper {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0%;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  z-index: 50;
  will-change: width;
  pointer-events: none;
}
#scroll-video-second {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 100vh;
  max-width: none;
  object-fit: cover;
}

/* ------------------------------------------------------------
   NOS PIÈCES — LE FILM CONTINU : UNE SEULE SCÈNE ÉPINGLÉE.
   Une section .familles-stage (~550vh de runway) pinnée par
   ScrollTrigger. À l'intérieur, un .familles-viewport 100vh
   contenant 5 couches superposées (position:absolute; inset:0).
   Une seule couche visible à la fois : l'opacité est pilotée par
   la progression [0,1] découpée en 5 bandes, avec un court
   crossfade. Jamais deux vidéos pleines simultanément → aucune
   couture horizontale. Accent bleu #3A5AC9 présent dans le texte.
   ------------------------------------------------------------ */
.familles-intro {
  background: #fff;
  border-bottom: 1px solid var(--color-divider);
}
.familles-label-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 48px;
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.familles-stage {
  position: relative;
  height: 550vh; /* runway total ≈ 110vh par famille */
  background: #fff;
  z-index: 10;
}
.familles-viewport {
  position: relative;
  height: 100vh;
  overflow: hidden;
  background: #fff;
}
/* LE FILM UNIQUE — une seule vidéo scrubée sur toute la scène (modèle Digital),
   les fondus entre catégories sont DANS le film → transitions coordonnées.
   Le film n'est qu'un FOND : légèrement adouci, le texte passe devant. */
#familles-film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  /* Le film n'est plus qu'une matière d'arrière-plan : désaturé et
     légèrement flouté, il se devine derrière le voile sans se regarder. */
  filter: saturate(0.65) blur(2px);
  transform: scale(1.03); /* compense le bord flou */
}
/* Voile FORT au-dessus du film : on LIT la section, la vidéo n'est
   qu'une respiration lumineuse derrière le texte. */
.familles-viewport::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.92) 0%,
    rgba(255, 255, 255, 0.84) 35%,
    rgba(255, 255, 255, 0.78) 65%,
    rgba(255, 255, 255, 0.86) 100%
  );
}
/* Les légendes passent AU-DESSUS du voile */
.famille-layer { z-index: 2; }
.famille-layer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center; /* bloc éditorial centré : on lit, on ne regarde plus */
  overflow: hidden;
  opacity: 0;
  will-change: opacity;
}
.famille-layer[data-layer="0"] { opacity: 1; } /* 1re couche visible au repos / no-JS */
.famille-scrub-video,
.famille-scrub-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* Grand bloc ÉDITORIAL — plus de carte : le texte vit directement sur
   le voile, typographie généreuse, on lit la famille comme une page. */
.famille-caption {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 880px;
  margin: 0 max(48px, 6vw);
  padding: 0;
  background: none;
  border: 0;
  border-left: 3px solid var(--accent-auto); /* filet bleu vertical — Auto = bleu */
  padding-left: clamp(24px, 3vw, 40px);
}
/* Kicker bleu : numéro 01–05 + étiquette de catégorie */
.famille-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.famille-num {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--accent-auto); /* bleu #3A5AC9 — numéros 01–05 */
}
.famille-kicker-tag {
  display: inline-block;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-auto);                 /* texte bleu */
  background: rgba(58, 90, 201, 0.1);         /* pastille bleu clair */
  border: 1px solid rgba(58, 90, 201, 0.35);
  border-radius: 100px;
}
.famille-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(44px, 6vw, 84px);
  line-height: 1.02;
  letter-spacing: -1.5px;
  color: var(--color-ink); /* encre serif géante — le titre EST la scène */
}
/* Chapeau : la phrase forte, en grand — performance, exigence, promesse */
.famille-lead {
  font-size: clamp(19px, 1.7vw, 24px);
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: -0.3px;
  max-width: 34em;
  color: var(--color-ink);
}
/* Corps : marques, preuves, service — la lecture continue */
.famille-body {
  font-size: clamp(16px, 1.25vw, 18px);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.1px;
  max-width: 40em;
  color: rgba(32, 42, 52, 0.78);
}
/* Écrans peu hauts : le bloc éditorial se compacte pour rester entier
   sous la nav flottante, sans jamais se faire couper. */
@media (max-height: 760px) {
  .famille-layer { padding-top: 96px; padding-bottom: 28px; }
  .famille-caption { gap: 12px; }
  .famille-title { font-size: clamp(32px, 5.5vh, 52px); }
  .famille-lead { font-size: clamp(15px, 2.4vh, 19px); line-height: 1.4; }
  .famille-body { font-size: clamp(13px, 2.1vh, 16px); line-height: 1.5; }
}

/* Compat : ancienne classe encore utilisée ailleurs */
.famille-parts {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.2px;
  max-width: 60ch;
  color: var(--color-ink);
}
.famille-brands {
  display: flex;
  align-items: center;
  gap: 12px 18px;
  flex-wrap: wrap;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-ink);
}
.famille-brands-lbl {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid var(--accent-auto); /* étiquette « Marques » bleue */
  color: var(--accent-auto);
  border-radius: 100px;
  opacity: 1;
}
.famille-brand-logos {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
/* Logos en VRAIES COULEURS, posés sur une pastille blanche arrondie */
.famille-brand-logos img {
  height: 22px;
  width: auto;
  max-width: 92px;
  object-fit: contain;
  filter: none; /* couleur d'origine — plus de grayscale */
  opacity: 1;
  background: #fff;
  padding: 5px 9px;
  border-radius: 6px;
  border: 1px solid var(--pill-border);
  box-sizing: content-box;
}

/* ------------------------------------------------------------
   NOS PIÈCES — MONDE SCROLL-WORLD (plugin) : thème SADIS Auto.
   Le moteur injecte son CSS dans @layer sw ; ces règles non-layered
   gagnent toujours. Blanc OYLA, bleu Auto, titres serif.
   ------------------------------------------------------------ */
#auto-world {
  --sw-bg: #fff;
  --sw-ink: var(--color-ink);
  --sw-ink-soft: rgba(32, 42, 52, 0.55);
  --sw-accent: var(--accent-auto);
  --sw-font-display: var(--font-serif);
  --sw-font-body: var(--font-stack);
}
/* Chrome du moteur inutile ici : la nav SADIS et la page portent déjà tout */
#auto-world .sw-topbar,
#auto-world .sw-scrollbar,
#auto-world .sw-pt { display: none; }
/* Titre serif éditorial (pas de graisse 700 sur le serif de la DA) */
#auto-world .sw-copy__title {
  font-weight: 400;
  letter-spacing: -1px;
  font-size: clamp(2.4rem, 4.8vw, 4rem);
}
/* Bloc texte un peu plus large : les textes éditoriaux respirent */
#auto-world .sw-copy { width: min(46vw, 600px); }
/* LE FILM S'EFFACE, LE MESSAGE DOMINE : la vidéo n'est qu'une matière de
   fond claire — on LIT la section (pièces, marques, service), on ne la
   regarde pas. Voile blanc global + désaturation forte. */
#auto-world .sw-scene__video,
#auto-world .sw-scene__still { filter: saturate(0.55) brightness(1.03); }
/* Voile global + large bandeau de lecture à gauche */
#auto-world .sw-copylayer { background: rgba(255, 255, 255, 0.34); }
#auto-world .sw-copylayer::before {
  width: min(76vw, 1040px);
  background: linear-gradient(
    90deg,
    #fff 0%,
    rgba(255, 255, 255, 0.95) 32%,
    rgba(255, 255, 255, 0.6) 64%,
    transparent 100%
  );
}
/* Posters d'entrée/sortie : MÊME traitement que les scènes voilées
   (img à opacité 0.66 sur fond blanc == voile blanc 34 % sur l'image),
   pour que la bascule épinglée reste visuellement identique. */
#auto-world .sw-edge { opacity: 0.66; filter: saturate(0.55) brightness(1.03); }
/* Le bloc texte prend plus de place, les corps montent d'un cran */
#auto-world .sw-copy { width: min(54vw, 700px); }
#auto-world .sw-copy__body { font-size: clamp(1.05rem, 1.45vw, 1.3rem); line-height: 1.6; }
#auto-world .sw-copy__logoslbl { color: rgba(32, 42, 52, 0.6); }
/* LOGOS MARQUES EN VEDETTE — en tête de carte, c'est ce que SADIS vend.
   Grandes pastilles blanches, ombre douce, juste sous le kicker. */
#auto-world .sw-copy__logos {
  gap: 14px;
  margin: 20px 0 6px;
  align-items: center;
}
/* Pastilles UNIFORMES : même boîte pour tous les logos — le logo se
   centre dedans (object-fit contain), la grille respire régulièrement. */
#auto-world .sw-copy__logos img {
  width: 148px;
  height: 66px;
  object-fit: contain;
  padding: 12px 18px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(17, 24, 39, 0.16); /* liseré plus franc : les logos pâles ressortent */
  box-shadow: 0 8px 26px rgba(17, 24, 39, 0.13);
}
/* Les règles globales de liens (non-layered) battent le @layer du moteur :
   on réaffirme les couleurs des boutons du monde. */
#auto-world .sw-btn { line-height: 1.2; }
#auto-world .sw-btn--primary { color: #fff; }
#auto-world .sw-btn--primary:hover { color: #fff; }
#auto-world .sw-btn--ghost { color: var(--color-ink); }
/* Écrans peu hauts : le bloc texte du monde se compacte pour rester ENTIER
   à l'écran — rien ne doit être coupé ni illisible. */
@media (max-height: 820px) {
  #auto-world .sw-copy__title { font-size: clamp(1.7rem, 5.2vh, 2.6rem); margin-top: 8px; }
  #auto-world .sw-copy__body { margin-top: 10px; font-size: clamp(.86rem, 2.3vh, 1rem); line-height: 1.45; }
  #auto-world .sw-copy__body--2 { margin-top: 8px; }
  #auto-world .sw-copy__eyebrow { margin-top: 10px; }
  #auto-world .sw-copy__logos { margin: 12px 0 4px; gap: 8px; }
  #auto-world .sw-copy__logos img { width: 112px; height: 50px; padding: 8px 12px; }
  #auto-world .sw-copy__cta { margin-top: 16px; }
  #auto-world .sw-btn { padding: 10px 18px; font-size: .86rem; }
}
/* Téléphones : le moteur ancre sa carte par le BAS (pensé pour sa petite
   carte d'origine) — les cartes SADIS sont bien plus hautes (pastilles
   marques + 2 paragraphes), le haut sortait de l'écran et les logos
   disparaissaient. On re-centre la carte et on compacte tout pour qu'elle
   tienne ENTIÈRE : les logos, c'est ce que SADIS vend, ils doivent se voir. */
@media (max-width: 860px) {
  #auto-world .sw-copy {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    max-height: calc(100svh - 88px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  #auto-world .sw-copy__num { font-size: .64rem; }
  #auto-world .sw-copy__eyebrow { margin-top: 8px; font-size: .68rem; }
  #auto-world .sw-copy__logoslbl { font-size: .64rem; }
  #auto-world .sw-copy__logos { gap: 6px; margin: 8px 0 2px; }
  #auto-world .sw-copy__logos img {
    width: 78px;
    height: 36px;
    padding: 5px 9px;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(17, 24, 39, 0.1);
  }
  #auto-world .sw-copy__title { font-size: clamp(1.35rem, 6vw, 1.8rem); margin-top: 8px; }
  #auto-world .sw-copy__body { margin-top: 8px; font-size: clamp(.82rem, 3.4vw, .94rem); line-height: 1.42; }
  #auto-world .sw-copy__body--2 { margin-top: 6px; }
  #auto-world .sw-copy__cta { margin-top: 12px; }
  #auto-world .sw-btn { padding: 11px 18px; font-size: .84rem; }
}

/* ------------------------------------------------------------
   MARQUES & PARTENAIRES — mur de marques (grille hairline OYLA)
   Grille de cellules à filets 1px : chaque cellule = un logo
   (grayscale, hauteur homogène) OU un wordmark typographique.
   Filets sans doublon : conteneur border-top+left, cellules
   border-right+bottom. Accent bleu réservé au tag/compteur.
   ------------------------------------------------------------ */
.brand-wall {
  background: #fff;
  border-bottom: 1px solid var(--color-divider);
}
.brand-wall-head {
  padding: clamp(56px, 9vh, 104px) 48px clamp(32px, 5vh, 56px);
  border-bottom: 1px solid var(--color-divider);
}
.brand-wall-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.brand-wall-tag {
  display: inline-block;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-auto);                 /* bleu — label de section */
  background: rgba(58, 90, 201, 0.1);
  border: 1px solid rgba(58, 90, 201, 0.35);
  border-radius: 100px;
}
.brand-wall-count {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-auto);                 /* bleu — compteur */
}
.brand-wall-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 76px);
  line-height: 1.02;
  letter-spacing: -1px;
  color: var(--color-ink);
}
.brand-wall-sub {
  margin-top: 22px;
  max-width: 62ch;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.2px;
  color: var(--color-ink);
  opacity: 0.8;
}

/* Étiquette de groupe hairline (Distribuées par SADIS / Mondiales) */
.brand-wall-grouplabel {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 48px;
  border-bottom: 1px solid var(--color-divider);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.brand-wall-grouplabel span:last-child { opacity: 0.55; }

/* La grille : filets hairline sans doublon */
.brand-wall-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--color-divider);
  border-left: 1px solid var(--color-divider);
}
/* Le groupe qui suit un grouplabel n'a pas besoin de son propre border-top */
.brand-wall-grouplabel + .brand-wall-grid { border-top: none; }

.wall-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 128px;
  padding: 24px 20px;
  border-right: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
  background: #fff;
  transition: background-color 0.25s ease;
}
.wall-cell:hover { background: #fafafa; }

/* Cellules logo : EN COULEUR (couleurs de marque d'origine) */
.wall-cell--logo img {
  height: 34px;
  width: auto;
  max-width: 132px;
  object-fit: contain;
  filter: none;
  opacity: 1;
  transition: transform 0.25s ease;
}
.wall-cell--logo:hover img { transform: scale(1.06); }
/* SVG mondiaux (Bosch rouge, SKF bleu, Shell jaune) : couleur d'origine */
.wall-cell--svg img { filter: none; opacity: 1; }
.wall-cell--svg:hover img { filter: none; opacity: 1; transform: scale(1.06); }

/* Cellules wordmark : typo soignée en BLEU du pôle Auto */
.wall-cell--word {
  font-family: var(--font-stack);
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent-auto);
  opacity: 1;
  transition: opacity 0.25s ease;
}
.wall-cell--word:hover { opacity: 0.7; }

/* ------------------------------------------------------------
   ACTE 4 — COLONNE STICKY + STAT-CARDS (.outer-section)
   ------------------------------------------------------------ */
.outer-section {
  background: #fff;
  border-bottom: 1px solid var(--color-divider);
  position: relative;
  z-index: 10;
}
.grid-container {
  display: grid;
  grid-template-columns: 50% 50%;
}
.left-col {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 48px 96px 48px 48px;
}
.left-heading {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(32px, 4vw, 42px);
  line-height: 1.15;
  letter-spacing: -0.5px;
  color: var(--accent-auto); /* titre de section en bleu du pôle Auto */
}
.left-middle {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin: 40px 0;
}
.left-p {
  font-size: 24px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.2px;
}
.left-cta { margin-left: 0; align-self: flex-start; }

.right-col { border-left: 1px solid var(--color-divider); }
.right-card {
  padding: 48px;
  border-bottom: 1px solid var(--color-divider);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 45vh;
}
.right-card:last-child { border-bottom: none; }

.stomp-stack { position: relative; overflow: hidden; }
.stomp-stack .heading-style-h1:first-child { display: none; } /* duplicata structurel — hook futur */
.heading-style-h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(46px, 5.5vw, 70px);
  line-height: 0.95;
  letter-spacing: -1.5px;
  white-space: nowrap;
  color: var(--accent-auto); /* chiffres clés en bleu du pôle Auto */
}
.detail-paragraph {
  font-size: 24px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.2px;
  padding-top: 42px;
}
.card-subtext {
  font-size: 13px;
  font-weight: 400;
  margin-top: 12px;
  opacity: 0.6;
}

/* ------------------------------------------------------------
   FAQ — table hairline
   ------------------------------------------------------------ */
.faq {
  background: #fff;
  border-bottom: 1px solid var(--color-divider);
  padding: clamp(64px, 10vh, 120px) 48px;
}
.faq-heading {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(32px, 4vw, 42px);
  line-height: 1.15;
  letter-spacing: -0.5px;
  margin-bottom: clamp(32px, 5vh, 56px);
}
.faq-item { border-top: 1px solid var(--color-divider); }
.faq-item:last-of-type { border-bottom: 1px solid var(--color-divider); }
.faq-item summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 28px 0;
  cursor: pointer;
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 400;
  letter-spacing: -0.2px;
  transition: opacity 0.25s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { opacity: 0.6; }
.faq-plus {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--circle-bg);
  position: relative;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}
.faq-plus::before,
.faq-plus::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 1px;
}
.faq-plus::before { width: 10px; height: 1.5px; }
.faq-plus::after { width: 1.5px; height: 10px; }
.faq-item[open] .faq-plus { transform: rotate(45deg); }
.faq-answer {
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: -0.2px;
  max-width: 70ch;
  padding: 0 0 32px;
  opacity: 0.8;
}

/* ------------------------------------------------------------
   B2C TEASER — SADIS Parts
   ------------------------------------------------------------ */
/* ------------------------------------------------------------
   SADIS PARTS — teaser « BIENTÔT » : panneau sombre spectaculaire
   (rupture forte contre la page blanche OYLA). Lueur bleue pulsante,
   badge à point qui « ping », titre à balayage lumineux, marquee,
   entrée au scroll (.is-in via IntersectionObserver).
   ------------------------------------------------------------ */
/* ------------------------------------------------------------
   SADIS PARTS — annonce éditoriale sur blanc, grammaire OYLA :
   filets hairline, serif géant, bleu parcimonieux. L'élément
   signature est la « fiche de lancement », plaque de catalogue.
   ------------------------------------------------------------ */
.b2c {
  border-top: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
  background: #fff;
  padding: clamp(72px, 11vh, 140px) 48px;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.b2c.is-in { opacity: 1; transform: none; }

.b2c-kicker {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-auto);
  margin-bottom: 40px;
}

.b2c-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr);
  gap: clamp(48px, 6vw, 112px);
  align-items: start;
  max-width: 1360px;
}

.b2c-heading {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(38px, 4.8vw, 68px);
  line-height: 1.04;
  letter-spacing: -1px;
  color: var(--color-ink);
  max-width: 17ch;
  margin-bottom: 28px;
}
.b2c-p {
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.55;
  letter-spacing: -0.2px;
  color: rgba(0, 0, 0, 0.72);
  max-width: 52ch;
  margin-bottom: 40px;
}
.b2c-cta { margin-left: 0; }

/* La fiche : plaque de catalogue à filets, pas une carte */
.b2c-fiche {
  border: 1px solid var(--color-ink);
  background: #fff;
}
.b2c-fiche-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--color-ink);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-ink);
}
.b2c-fiche-head span:last-child { color: var(--accent-auto); }
.b2c-fiche-rows { margin: 0; }
.b2c-fiche-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: 18px 20px;
}
.b2c-fiche-row + .b2c-fiche-row { border-top: 1px solid var(--color-divider); }
.b2c-fiche-row dt {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(0, 0, 0, 0.55);
}
.b2c-fiche-row dd {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.1px;
  text-align: right;
  color: var(--color-ink);
}
.b2c-status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-auto);
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .b2c-grid { grid-template-columns: 1fr; }
  .b2c-fiche { max-width: 520px; }
}
@media (prefers-reduced-motion: reduce) {
  .b2c { opacity: 1; transform: none; transition: none; }
}

/* ------------------------------------------------------------
   STATEMENT — serif géant centré
   ------------------------------------------------------------ */
.statement {
  background: #fff;
  border-bottom: 1px solid var(--color-divider);
  padding: clamp(96px, 18vh, 200px) 48px;
  display: flex;
  justify-content: center;
}
.statement-big {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(32px, 4.6vw, 64px);
  line-height: 1.1;
  letter-spacing: -1px;
  text-align: center;
  max-width: 22ch;
}

/* ------------------------------------------------------------
   CTA BAND
   ------------------------------------------------------------ */
.cta-band {
  background: #fff;
  padding: clamp(80px, 14vh, 160px) 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
}
.cta-heading {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1.05;
  letter-spacing: -1px;
  color: var(--accent-auto); /* titre CTA en bleu du pôle Auto */
}
.cta-sub {
  font-size: 18px;
  line-height: 1.35;
  letter-spacing: -0.2px;
  opacity: 0.8;
}
.cta-btn { margin-left: 0; margin-top: 12px; }

/* ------------------------------------------------------------
   ACTE 5 — SPACER + FOOTER FIXE RÉVÉLÉ
   ------------------------------------------------------------ */
.footer-spacer {
  pointer-events: none;
  background: transparent;
  width: 100%;
  height: 480px; /* resynchronisé en JS = footer.offsetHeight */
}

.replica-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  background: #ffffff;
  padding: 80px 48px;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.5fr;
  gap: 48px;
}
.footer-header-item {
  height: 24px;
  margin-bottom: 48px;
  font-size: 15px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
}
.footer-logo { display: inline-flex; align-items: center; gap: 8px; }
.footer-logo-word {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 0.08em;
  color: var(--color-ink);
  text-transform: none;
}
.footer-credit {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.2px;
  margin-bottom: 12px;
  max-width: 42ch;
}
.footer-links { display: flex; flex-direction: column; gap: 12px; }
.footer-links a {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.2px;
  text-decoration: none;
  transition: opacity 0.25s ease;
}
.footer-links a:hover { opacity: 0.6; }
.footer-links a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.footer-desc {
  font-size: 18px;
  line-height: 1.35;
  letter-spacing: -0.2px;
  max-width: 380px;
  margin-bottom: 24px;
}

/* Capsule contact (héritée de la capsule newsletter OYLA) */
.contact-capsule {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--capsule-bg);
  border-radius: 100px;
  padding: 6px 6px 6px 24px;
  max-width: 440px;
  text-decoration: none;
  transition: box-shadow 0.25s ease;
}
.contact-capsule:hover,
.contact-capsule:focus-visible { box-shadow: 0 0 0 1px #000; }
.contact-capsule-mail { font-size: 14px; letter-spacing: -0.1px; }
.capsule-btn { margin-left: 0; }

/* ------------------------------------------------------------
   RESPONSIVE — tablette
   ------------------------------------------------------------ */
@media (max-width: 992px) {
  .hero-title { font-size: 48px; line-height: 1.1; }
  .left-heading { font-size: 30px; }
  .left-p { font-size: 18px; line-height: 1.5; }
  .detail-paragraph { font-size: 18px; line-height: 1.5; padding-top: 28px; }
  .heading-style-h1 { font-size: 44px !important; letter-spacing: -1px; }

  .award-card { width: 50vw; }
  .award-image-container { height: 220px; }

  .left-col { padding: 40px 32px; }
  .right-card { padding: 40px 32px; min-height: 40vh; }

  .famille-caption { margin: 0 32px; max-width: 640px; }
  .familles-label-row { padding: 18px 32px; }
  .brand-wall-head { padding-left: 32px; padding-right: 32px; }
  .brand-wall-grouplabel { padding-left: 32px; padding-right: 32px; }
  .brand-wall-grid { grid-template-columns: repeat(4, 1fr); }
  .faq, .b2c, .statement, .cta-band { padding-left: 32px; padding-right: 32px; }
  .b2c { grid-template-columns: 1fr; align-items: start; }
  .b2c-right { justify-content: flex-start; }

  .replica-footer {
    padding: 60px 32px;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .replica-footer .footer-col:last-child { grid-column: span 2; margin-top: 24px; }
  .footer-credit, .footer-desc { font-size: 16px; line-height: 1.5; }
  .footer-links a { font-size: 16px; }
}

/* ------------------------------------------------------------
   RESPONSIVE — mobile
   ------------------------------------------------------------ */
@media (max-width: 767px) {
  .video-hero-sticky { padding: 32px 16px; height: 100vh; height: 100svh; }
  .hero-title { font-size: 38px; }

  .award-card { width: 85vw; padding: 32px 24px; }
  .award-image-container { height: 180px; }

  .grid-container { grid-template-columns: 1fr; }
  .left-col {
    position: relative;
    top: auto;
    height: auto;
    padding: 48px 16px;
  }
  .right-col { border-left: none; border-top: 1px solid var(--color-divider); }
  .right-card { padding: 40px 16px; min-height: 0; }
  .heading-style-h1 { font-size: 34px !important; letter-spacing: -0.5px; }
  .left-p { font-size: 17px; line-height: 1.5; }
  .detail-paragraph { font-size: 17px; line-height: 1.5; padding-top: 24px; }

  .famille-caption { margin: 0 16px; padding-left: 18px; gap: 14px; }
  .famille-title { font-size: 36px; letter-spacing: -0.8px; }
  .famille-lead { font-size: 17px; line-height: 1.5; }
  .famille-body { font-size: 15px; line-height: 1.55; }
  .famille-parts { font-size: 16px; line-height: 1.5; }
  .famille-kicker-tag, .brand-wall-tag { font-size: 12px; }
  .familles-label-row { padding: 16px; }
  .brand-wall-head { padding-left: 16px; padding-right: 16px; }
  .brand-wall-grouplabel { padding: 16px; }
  .brand-wall-grid { grid-template-columns: repeat(3, 1fr); }
  .brand-wall-sub { font-size: 16px; line-height: 1.55; }
  .wall-cell { min-height: 104px; padding: 20px 12px; }
  .wall-cell--logo img { height: 28px; max-width: 100px; }
  .wall-cell--word { font-size: 14px; }

  .faq, .b2c, .statement, .cta-band { padding-left: 16px; padding-right: 16px; }
  .b2c-p, .faq-answer { font-size: 16px; line-height: 1.55; }
  .cta-sub { font-size: 16px; line-height: 1.5; }

  .newsletter-btn-wrapper { min-height: 44px; }

  .replica-footer { padding: 48px 16px; grid-template-columns: 1fr; }
  .replica-footer .footer-col:last-child { grid-column: auto; margin-top: 0; }
  .footer-header-item { margin-bottom: 24px; }
  .footer-credit, .footer-desc { font-size: 16px; line-height: 1.5; }
  .footer-links a { font-size: 16px; }
}

/* ------------------------------------------------------------
   RESPONSIVE — très petit écran : mur de marques 2 colonnes
   ------------------------------------------------------------ */
@media (max-width: 480px) {
  .brand-wall-grid { grid-template-columns: repeat(2, 1fr); }
  .wall-cell { min-height: 92px; }
}

/* ------------------------------------------------------------
   PREFERS-REDUCED-MOTION — tout visible statiquement
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .scroll-video-container { height: 100vh; }
  .hero-title-line-inner, .hero-content, .hero-btn, .hero-kicker {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  .awards-section { height: auto; }
  .awards-grid {
    width: 100%;
    flex-wrap: wrap;
    transform: none !important;
  }
  .award-card {
    width: 50%;
    border-bottom: 1px solid var(--color-divider);
  }
  .video-scaling-wrapper { display: none; }

  /* Mur de marques : grille purement statique, aucune transition */
  .wall-cell, .wall-cell--logo img, .wall-cell--word { transition: none !important; }

  /* Scène épinglée → statique : les 5 familles empilées verticalement,
     chaque vidéo posée sur son poster/1re frame, légende visible. */
  .familles-stage { height: auto; }
  .familles-viewport { height: auto; overflow: visible; }
  .famille-layer {
    position: relative;
    inset: auto;
    display: block;
    opacity: 1 !important;
    min-height: auto;
    border-bottom: 1px solid var(--color-divider);
  }
  #familles-film { position: relative; height: auto; aspect-ratio: 16 / 9; }
  .famille-caption { background: none; margin: 40px 24px; }

  .left-col { position: relative; height: auto; }
  [data-fade-slide-in] { opacity: 1 !important; transform: none !important; visibility: visible !important; }

  .newsletter-btn-wrapper, .faq-plus, .contact-capsule {
    transition: none !important;
  }
}
@media (prefers-reduced-motion: reduce) and (max-width: 767px) {
  .award-card { width: 100%; }
}