/* ============================================================
   HOMEPAGE V3 — Direction artistique éditoriale
   Palette : crème #F5EFE6 · ambre chaud · or champagne
   Style    : magazine de luxe — Aesop / Byredo / Diptyque
   ============================================================ */

/* ── 0. Fond de page unifié ─────────────────────────────── */
body {
  background: #F5EFE6 !important;
}

/* ── 1. Masquer toutes les sections V2 ──────────────────── */
.v2-geste,
.v2-elixirs,
.v2-guide,
.v2-temoignages,
.v2-coffret {
  display: none !important;
}

/* ── 2. Hero — Nectar Doré transpirant ──────────────────── */
.hp-hero__bg {
  background-image: url('/assets/backgrounds/hero-nectar-dore.webp') !important;
  background-position: 55% center !important;
  animation: v5HeroKenBurns 18s cubic-bezier(.25,.46,.45,.94) forwards;
}
@keyframes v5HeroKenBurns {
  from { transform: scale(1.05); }
  to   { transform: scale(1.00); }
}
/* Overlay : assombrit le bas (texte) + léger voile gauche (sans tuer la vapeur dorée) */
.hp-hero__overlay {
  background:
    linear-gradient(
      to right,
      rgba(4,2,0,.36)   0%,
      rgba(4,2,0,.14)   28%,
      transparent       55%
    ),
    linear-gradient(
      to bottom,
      rgba(4,2,0,.05)   0%,
      rgba(4,2,0,0)     22%,
      rgba(4,2,0,.42)   72%,
      rgba(4,2,0,.78)  100%
    ) !important;
}

/* ── 3. Utilitaires partagés V3 ─────────────────────────── */
.v3-label {
  display: block;
  font-family: var(--f-sans);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: 22px;
}

.v3-link-arrow {
  display: inline-block;
  font-family: var(--f-sans);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #1A1410;
  text-decoration: none;
  border-bottom: 1px solid #C4B0A0;
  padding-bottom: 4px;
  margin-top: 28px;
  transition: color .25s, border-color .25s;
}
.v3-link-arrow:hover { color: var(--c-gold); border-color: var(--c-gold); }

/* ============================================================
   S1 — VAPEUR : la signature invisible (100vh plein écran)
   ============================================================ */
.v3-vapeur {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #140E08;
}

.v3-vapeur__bg {
  position: absolute;
  inset: 0;
}
.v3-vapeur__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 40%;
  display: block;
}

.v3-vapeur__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(14,10,5,.40)  0%,
    rgba(14,10,5,.08) 30%,
    rgba(14,10,5,.05) 55%,
    rgba(245,239,230,.90) 100%
  );
}

.v3-vapeur__body {
  position: absolute;
  z-index: 2;
  bottom: 20vh;
  left: 0;
  right: 0;
  text-align: center;
  padding: 0 24px;
}

.v3-vapeur__headline {
  font-family: var(--f-serif);
  font-size: clamp(32px, 5vw, 66px);
  color: #fff;
  line-height: 1.12;
  margin: 0 0 16px;
  font-weight: 400;
}
.v3-vapeur__headline em {
  font-family: var(--f-italic);
  font-style: italic;
  color: var(--c-gold);
}

.v3-vapeur__note {
  font-family: var(--f-sans);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  margin: 0;
}

/* Fondu bas vers les Ingrédients (même noir) */
.v3-vapeur::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 28vh;
  background: linear-gradient(to bottom, transparent, #0C0906);
  z-index: 3;
  pointer-events: none;
}

/* ============================================================
   S2 — SALON : premier regard éditorial (62/38)
   ============================================================ */
.v3-salon {
  display: grid;
  grid-template-columns: 62% 38%;
  min-height: 72vh;
  background: #F5EFE6;
  position: relative;
  z-index: 4;
  margin-top: -18vh;
}

.v3-salon__img {
  overflow: hidden;
}
.v3-salon__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  display: block;
}

.v3-salon__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(48px,7vw,100px) clamp(32px,4.5vw,68px);
}

.v3-salon__title {
  font-family: var(--f-serif);
  font-size: clamp(26px,3.6vw,50px);
  font-weight: 400;
  line-height: 1.16;
  color: #1A1410;
  margin: 0 0 24px;
}
.v3-salon__title em {
  font-family: var(--f-italic);
  font-style: italic;
  color: var(--c-gold);
}

.v3-salon__body {
  font-family: var(--f-sans);
  font-size: 13px;
  line-height: 1.9;
  color: #7A6450;
  max-width: 260px;
}

/* ============================================================
   S3 — CHAMBRE : l'intime (38/62 inversé)
   ============================================================ */
.v3-chambre {
  display: grid;
  grid-template-columns: 38% 62%;
  min-height: 80vh;
  background: #F5EFE6;
}

.v3-chambre__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(60px,8vw,120px) clamp(36px,5vw,72px);
}

.v3-chambre__title {
  font-family: var(--f-serif);
  font-size: clamp(24px,3.4vw,46px);
  font-weight: 400;
  line-height: 1.2;
  color: #1A1410;
  margin: 0 0 22px;
}
.v3-chambre__title em {
  font-family: var(--f-italic);
  font-style: italic;
  color: var(--c-gold);
}

.v3-chambre__note {
  font-family: var(--f-sans);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #A08878;
  margin: 0;
}

.v3-chambre__img {
  overflow: hidden;
}
.v3-chambre__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  display: block;
}

/* ============================================================
   S4 — LINGE : sensoriel plein écran (55vh)
   ============================================================ */
.v3-linge {
  position: relative;
  height: 70vh;
  overflow: hidden;
  background: #2A1E12;
}

.v3-linge__bg {
  position: absolute;
  inset: 0;
}
.v3-linge__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 50%;
  display: block;
}

.v3-linge__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(20,14,8,.08);
}

.v3-linge__text {
  position: absolute;
  z-index: 2;
  bottom: 0;
  right: 0;
  padding: 0 5vw 6vh 0;
  text-align: right;
}
.v3-linge__text span {
  font-family: var(--f-italic);
  font-style: italic;
  font-size: clamp(18px,2.4vw,32px);
  color: rgba(255,255,255,.72);
  letter-spacing: .02em;
}

/* Fondu haut depuis crème */
.v3-linge::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 20vh;
  background: linear-gradient(to bottom, #F5EFE6, transparent);
  z-index: 3;
  pointer-events: none;
}

/* Fondu bas vers la collection (même noir) */
.v3-linge::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 22vh;
  background: linear-gradient(to bottom, transparent, #0C0906);
  z-index: 3;
  pointer-events: none;
}

/* CTA discret dans la section linge */
.v3-linge__cta {
  display: inline-block;
  margin-top: 22px;
  font-family: var(--f-sans);
  font-size: 9px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.22);
  padding-bottom: 4px;
  transition: color .3s, border-color .3s;
}
.v3-linge__cta:hover { color: var(--c-gold); border-color: var(--c-gold); }

/* ============================================================
   S5 — DIPTYQUE : abstraction & matière
   ============================================================ */
.v3-diptych {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 56vh;
  background: #F5EFE6;
  position: relative;
  z-index: 4;
  margin-top: -10vh;
}

.v3-diptych__panel {
  overflow: hidden;
}
.v3-diptych__panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  display: block;
}

/* Panneau droit : texte + image */
.v3-diptych__right {
  display: flex;
  flex-direction: column;
  background: #F5EFE6;
}

.v3-diptych__body {
  padding: clamp(40px,5.5vw,80px) clamp(32px,4vw,60px);
  flex: 0 0 auto;
}

.v3-diptych__quote {
  font-family: var(--f-serif);
  font-size: clamp(20px,2.5vw,34px);
  font-weight: 400;
  line-height: 1.5;
  color: #1A1410;
  margin: 0;
}

.v3-diptych__img {
  flex: 1;
  overflow: hidden;
  min-height: 200px;
}
.v3-diptych__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}

/* ============================================================
   S6 — ESPACES : trois pièces en bande (portrait)
   ============================================================ */
.v3-espaces {
  background: #F5EFE6;
  padding: clamp(72px,9vw,130px) 0 0;
}

.v3-espaces__head {
  padding: 0 clamp(24px,5vw,80px);
  margin-bottom: 28px;
}

.v3-espaces__band {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 3px;
}

.v3-espaces__room {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
}
.v3-espaces__room img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  display: block;
  transition: transform .7s ease;
}
.v3-espaces__room:hover img {
  transform: scale(1.04);
}

.v3-espaces__caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 72px 22px 26px;
  background: linear-gradient(to bottom, transparent, rgba(14,9,4,.76));
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.v3-espaces__caption-title {
  font-family: var(--f-italic);
  font-style: italic;
  font-size: clamp(16px,1.5vw,22px);
  color: #fff;
  letter-spacing: .025em;
}
.v3-espaces__caption-sub {
  font-family: var(--f-sans);
  font-size: 10px;
  letter-spacing: .12em;
  color: rgba(255,255,255,.50);
  line-height: 1.75;
  display: none;
}
@media (min-width: 769px) {
  .v3-espaces__caption-sub { display: block; }
}

/* ============================================================
   S7 — PRODUITS : la conséquence de l'univers
   ============================================================ */
.v3-produits {
  background: #F5EFE6;
  padding: clamp(80px,10vw,140px) clamp(24px,5vw,80px) clamp(60px,8vw,100px);
}

.v3-produits__header {
  text-align: center;
  margin-bottom: clamp(40px,5vw,72px);
}

.v3-produits__title {
  font-family: var(--f-serif);
  font-size: clamp(38px,5.5vw,72px);
  font-weight: 400;
  color: #1A1410;
  line-height: 1.1;
  margin: 0;
}
.v3-produits__title em {
  font-family: var(--f-italic);
  font-style: italic;
  color: var(--c-gold);
}

.v3-produits__grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: clamp(20px,2.8vw,44px);
}

.v3-prod-card {
  text-decoration: none;
  color: inherit;
  display: block;
}
.v3-prod-card__img {
  aspect-ratio: 3/4;
  overflow: hidden;
  margin-bottom: 18px;
  background: #EDE7DC;
}
.v3-prod-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .65s ease;
}
.v3-prod-card:hover .v3-prod-card__img img {
  transform: scale(1.05);
}
.v3-prod-card__name {
  font-family: var(--f-serif);
  font-size: 17px;
  color: #1A1410;
  margin: 0 0 4px;
}
.v3-prod-card__desc {
  font-family: var(--f-italic);
  font-style: italic;
  font-size: 12px;
  color: #9A8070;
  margin: 0 0 6px;
}
.v3-prod-card__price {
  font-family: var(--f-sans);
  font-size: 12px;
  color: var(--c-gold);
  letter-spacing: .06em;
}

.v3-produits__footer {
  text-align: center;
  margin-top: clamp(40px,5vw,60px);
}

.v3-produits__cta {
  display: inline-block;
  font-family: var(--f-sans);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #1A1410;
  text-decoration: none;
  border-bottom: 1px solid #1A1410;
  padding-bottom: 4px;
  transition: color .25s, border-color .25s;
}
.v3-produits__cta:hover { color: var(--c-gold); border-color: var(--c-gold); }

/* ============================================================
   S8 — COFFRET : moment culminant (58/42)
   ============================================================ */
.v3-coffret {
  display: grid;
  grid-template-columns: 58% 42%;
  min-height: 62vh;
  background: #F5EFE6;
  margin-top: clamp(40px,6vw,80px);
}

.v3-coffret__visual {
  overflow: hidden;
}
.v3-coffret__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  display: block;
}

.v3-coffret__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(40px,6vw,90px) clamp(36px,5vw,72px);
}

.v3-coffret__title {
  font-family: var(--f-serif);
  font-size: clamp(30px,4.2vw,60px);
  font-weight: 400;
  line-height: 1.12;
  color: #1A1410;
  margin: 0 0 26px;
}
.v3-coffret__title em {
  font-family: var(--f-italic);
  font-style: italic;
  color: var(--c-gold);
}

.v3-coffret__price-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 32px;
}
.v3-coffret__price {
  font-family: var(--f-sans);
  font-size: 19px;
  color: #1A1410;
  letter-spacing: .04em;
}
.v3-coffret__old {
  font-family: var(--f-sans);
  font-size: 11px;
  color: #B0A090;
  text-decoration: line-through;
}

.v3-coffret__cta {
  display: inline-block;
  font-family: var(--f-sans);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #fff;
  background: #1A1410;
  text-decoration: none;
  padding: 15px 30px;
  margin-bottom: 14px;
  transition: background .3s;
  align-self: flex-start;
}
.v3-coffret__cta:hover { background: var(--c-gold); }

.v3-coffret__secondary {
  display: inline-block;
  font-family: var(--f-sans);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #A09080;
  text-decoration: none;
  border-bottom: 1px solid #C8B9A8;
  padding-bottom: 3px;
  align-self: flex-start;
}

/* ============================================================
   MOBILE — Premium mobile-first ≤ 768px
   ============================================================ */
@media (max-width: 768px) {

  /* Hero portrait — flacon Nectar Doré centré, vapeur dorée visible */
  .hp-hero__bg {
    background-position: center 28% !important;
  }

  /* S1 VAPEUR — texte au-dessus du fondu crème */
  .v3-vapeur__body {
    bottom: 30vh;
    padding: 0 28px;
  }
  .v3-vapeur__headline {
    font-size: clamp(34px, 9vw, 54px);
  }
  .v3-vapeur__note {
    color: rgba(255,255,255,.62);
    font-size: 10px;
    margin-top: 14px;
  }

  /* S2 SALON — stack : image haute → texte généreux */
  .v3-salon {
    grid-template-columns: 1fr;
    min-height: auto;
    margin-top: -10vh;
  }
  .v3-salon__img { aspect-ratio: 5/4; }
  .v3-salon__img img { object-position: center 30%; }
  .v3-salon__text { padding: 40px 26px 52px; }
  .v3-salon__title {
    font-size: clamp(28px, 8vw, 44px);
    margin-bottom: 20px;
  }
  .v3-salon__body {
    max-width: none;
    font-size: 14px;
    line-height: 1.85;
  }

  /* S3 CHAMBRE — image d'abord, intime */
  .v3-chambre {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .v3-chambre__img {
    aspect-ratio: 5/4;
    order: -1;
  }
  .v3-chambre__img img { object-position: center 22%; }
  .v3-chambre__text { padding: 40px 26px 52px; }
  .v3-chambre__title {
    font-size: clamp(26px, 8vw, 42px);
    margin-bottom: 18px;
  }

  /* S4 LINGE — plein écran immersif */
  .v3-linge { height: 56vh; }
  .v3-linge::before { height: 12vh; }
  .v3-linge::after  { height: 16vh; }
  .v3-linge__text   { padding: 0 6vw 9vh 0; }
  .v3-linge__text span { font-size: clamp(20px, 5.5vw, 28px); }

  /* S5 DIPTYCH — une image forte + texte large */
  .v3-diptych {
    grid-template-columns: 1fr;
    margin-top: -6vh;
  }
  .v3-diptych__panel { aspect-ratio: 5/4; }
  .v3-diptych__right { min-height: auto; }
  .v3-diptych__body  { padding: 40px 26px 32px; }
  .v3-diptych__quote {
    font-size: clamp(22px, 6.5vw, 34px);
    line-height: 1.45;
  }
  .v3-diptych__img { min-height: 62vw; }

  /* S6 ESPACES — 3 pièces 16/9 empilées */
  .v3-espaces { padding-top: 50px; }
  .v3-espaces__head { margin-bottom: 20px; }
  .v3-espaces__band {
    grid-template-columns: 1fr;
    gap: 3px;
  }
  .v3-espaces__room { aspect-ratio: 16/9; }
  .v3-espaces__caption { padding: 48px 18px 20px; }
  .v3-espaces__caption-title { font-size: 17px; }
  .v3-espaces__caption-sub { display: none; }

  /* S7 PRODUITS — grille 2 colonnes équilibrée */
  .v3-produits { padding: 56px 20px 60px; }
  .v3-produits__title { font-size: clamp(30px, 8.5vw, 48px); }
  .v3-produits__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .v3-prod-card__name { font-size: 15px; }

  /* S8 COFFRET — image pleine largeur avec fondu bas → crème */
  .v3-coffret {
    grid-template-columns: 1fr;
    min-height: auto;
    margin-top: 0;
  }
  .v3-coffret__visual {
    aspect-ratio: 4/3;
    position: relative;
  }
  .v3-coffret__visual::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 35%;
    background: linear-gradient(to bottom, transparent, #F5EFE6);
    pointer-events: none;
  }
  .v3-coffret__text { padding: 40px 26px 56px; }
  .v3-coffret__title { font-size: clamp(28px, 8vw, 44px); }
  .v3-coffret__cta {
    align-self: stretch;
    text-align: center;
    padding: 18px 24px;
  }

}

/* ── Scroll reveal léger ───────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .v3-salon__text,
  .v3-chambre__text,
  .v3-diptych__body,
  .v3-espaces__head,
  .v3-produits__header,
  .v3-coffret__text {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .9s ease, transform .9s ease;
  }
  .v3-salon__text.is-visible,
  .v3-chambre__text.is-visible,
  .v3-diptych__body.is-visible,
  .v3-espaces__head.is-visible,
  .v3-produits__header.is-visible,
  .v3-coffret__text.is-visible {
    opacity: 1;
    transform: none;
  }
  /* Product card stagger */
  .v3-prod-card {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .85s ease, transform .85s ease;
  }
  .v3-prod-card.is-visible { opacity: 1; transform: none; }
  .v3-prod-card:nth-child(2) { transition-delay: .10s; }
  .v3-prod-card:nth-child(3) { transition-delay: .18s; }
  .v3-prod-card:nth-child(4) { transition-delay: .26s; }
  /* Confiance items stagger */
  .v3-confiance__item {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .8s ease, transform .8s ease;
  }
  .v3-confiance__item.is-visible { opacity: 1; transform: none; }
  .v3-confiance__item:nth-child(2) { transition-delay: .08s; }
  .v3-confiance__item:nth-child(3) { transition-delay: .16s; }
  .v3-confiance__item:nth-child(4) { transition-delay: .24s; }
  .v3-confiance__item:nth-child(5) { transition-delay: .32s; }
  /* Hero above-fold animations */
  .hp-hero__subtitle { animation: v3FadeUp .9s ease .55s both; }
  .hp-hero__reassurance { animation: v3FadeUp .9s ease .95s both; }
  @keyframes v3FadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* ============================================================
   V4 — DA Senior · CRO · Animations premium (2026-07)
   ============================================================ */

/* ── Hero — sous-titre & réassurance ────────────────────── */
.hp-hero__subtitle {
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: .15em;
  line-height: 2.1;
  color: rgba(255,255,255,.65);
  text-transform: uppercase;
  margin: 0 0 28px;
}
.hp-hero__reassurance {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 30px;
  flex-wrap: wrap;
}
.hp-hero__reassurance span:not(.hp-hero__rsep) {
  font-family: var(--f-sans);
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.42);
}
.hp-hero__rsep { color: var(--c-gold) !important; opacity: .55; font-size: 10px; }

/* ── Parallax hero — léger décalage de profondeur ───────── */
@media (min-width: 769px) {
  .hp-hero__bg {
    will-change: transform;
    top: -8% !important;
    height: 116% !important;
  }
}

/* ── Linge — couche matières ─────────────────────────────── */
.v3-linge__mat {
  display: block;
  font-family: var(--f-sans);
  font-size: 9px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(255,255,255,.36);
  margin-bottom: 9px;
}
.v3-linge__tag {
  font-family: var(--f-italic);
  font-style: italic;
  font-size: clamp(18px,2.4vw,32px);
  color: rgba(255,255,255,.72);
  letter-spacing: .02em;
}

/* ── Diptych — sous-texte matières ───────────────────────── */
.v3-diptych__sub {
  font-family: var(--f-sans);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #9A8070;
  margin: 28px 0 0;
  line-height: 2;
}

/* ── Product cards — univers olfactif + bouton ───────────── */
.v3-prod-card__olfact {
  font-family: var(--f-sans);
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #B8A890;
  margin: 5px 0 8px;
}
.v3-prod-card__action {
  display: inline-block;
  font-family: var(--f-sans);
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #1A1410;
  margin-top: 14px;
  border-bottom: 1px solid rgba(196,160,81,.35);
  padding-bottom: 3px;
  transition: color .3s, border-color .3s;
}
.v3-prod-card:hover .v3-prod-card__action {
  color: var(--c-gold);
  border-color: var(--c-gold);
}

/* ── Section CONFIANCE — piliers de marque (fond texture sombre) */
.v3-confiance {
  background: #0E0A06;
  padding: clamp(52px,7vw,88px) clamp(24px,6vw,100px);
  border-top: 1px solid rgba(196,160,81,.2);
  border-bottom: 1px solid rgba(196,160,81,.2);
  position: relative;
  overflow: hidden;
}
/* Fond texture — seule la partie liquide dorée est visible */
.v3-confiance__bg {
  position: absolute;
  top: -30%;
  left: 0;
  width: 100%;
  height: 160%;
  background: url('/assets/backgrounds/texture-concentration.webp') 0% 50% / 200% auto no-repeat;
  opacity: 0.38;
  z-index: 0;
  will-change: transform;
}
/* Voile sombre pour lisibilité */
.v3-confiance::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(8,5,2,.60);
  z-index: 1;
  pointer-events: none;
}
.v3-confiance__label {
  text-align: center;
  margin-bottom: clamp(36px,5vw,56px);
}
/* Faire remonter le contenu au-dessus des overlays */
.v3-confiance > .v3-label,
.v3-confiance__inner {
  position: relative;
  z-index: 2;
}
.v3-confiance .v3-label { color: rgba(196,160,81,.65) !important; }
.v3-confiance__inner {
  display: flex;
  align-items: stretch;
  justify-content: center;
  max-width: 1080px;
  margin: 0 auto;
}
.v3-confiance__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 clamp(10px,2vw,32px);
}
.v3-confiance__item + .v3-confiance__item {
  border-left: 1px solid rgba(196,160,81,.22);
}
.v3-confiance__num {
  font-family: var(--f-serif);
  font-size: clamp(24px,3.2vw,42px);
  font-weight: 400;
  color: #FAF7F2;
  line-height: 1;
  margin-bottom: 12px;
}
.v3-confiance__lbl {
  font-family: var(--f-sans);
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(196,160,81,.6);
  line-height: 1.8;
}

/* ── Mobile — V4 ajouts ──────────────────────────────────── */
@media (max-width: 768px) {
  /* Hero */
  .hp-hero__subtitle { font-size: 9px; letter-spacing: .10em; margin-bottom: 18px; line-height: 2; }
  .hp-hero__reassurance { gap: 8px; margin-top: 16px; }
  /* Confiance — liste verticale premium */
  .v3-confiance {
    padding: 44px 24px 52px;
    border-top: none;
    border-bottom: none;
  }
  .v3-confiance__inner {
    flex-direction: column;
    align-items: stretch;
    max-width: none;
  }
  .v3-confiance__item {
    flex-direction: row;
    text-align: left;
    align-items: center;
    gap: 20px;
    padding: 20px 0;
    border-left: none !important;
    border-bottom: 1px solid rgba(196,160,81,.18);
  }
  .v3-confiance__item:last-child { border-bottom: none; }
  .v3-confiance__num { font-size: 26px; min-width: 54px; margin-bottom: 0; }
  /* Product cards */
  .v3-prod-card__olfact { font-size: 8px; letter-spacing: .12em; }
  .v3-prod-card__action { font-size: 8px; margin-top: 10px; }
}

/* ============================================================
   V5 — LE FLACON EST LA STAR (direction Diptyque/Aesop/Byredo)
   Juillet 2026 — produit en premier, décor en soutien
   ============================================================ */

/* ── Sections retirées du flux ───────────────────────────── */
/* v4-focus : cassait le rythme narratif juste après le Hero */
.v4-focus   { display: none !important; }
/* v3-diptych : remplacé par v4-collection */
.v3-diptych { display: none !important; }
/* v3-espaces : grille catalogue, sans valeur narrative */
.v3-espaces { display: none !important; }
/* v3-produits : doublon de v4-collection */
.v3-produits { display: none !important; }
/* v4-faq : tue l'élan émotionnel en bas de page */
/* La FAQ est réactivée : elle porte le rôle RASSURER de la page,
   et c'est là qu'on répond à « je ne sais pas quoi choisir ». */
/* .v4-faq { display: none !important; } */
/* V6 refonte — remplacés par le Rituel CARAT cinématographique */
.v3-vapeur      { display: none !important; }
.v5-ingredients { display: none !important; }
.v3-salon       { display: none !important; }
.v3-chambre     { display: none !important; }
.v3-linge       { display: none !important; }
/* V6 refonte — la comparaison casse l'élan vers le coffret */
.v4-compare     { display: none !important; }

/* ── V4-FOCUS : packshot héro plein cadre ────────────────── */
.v4-focus {
  display: grid;
  grid-template-columns: 56% 44%;
  min-height: 88vh;
  overflow: hidden;
}
.v4-focus__stage {
  position: relative;
  overflow: hidden;
}
.v4-focus__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}
.v4-focus__text {
  background: #FAF7F2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(52px,7vw,96px) clamp(40px,5.5vw,72px);
  border-left: 1px solid rgba(196,160,81,.12);
}
.v4-focus__eyebrow {
  display: block;
  font-family: var(--f-sans);
  font-size: 9px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: 22px;
}
.v4-focus__name {
  font-family: var(--f-serif);
  font-size: clamp(38px,4.8vw,64px);
  font-weight: 400;
  color: #1A1410;
  line-height: 1.06;
  margin: 0 0 14px;
}
.v4-focus__olfact {
  font-family: var(--f-sans);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-gold);
  opacity: .75;
  margin: 0 0 26px;
}
.v4-focus__desc {
  font-family: var(--f-sans);
  font-size: 13px;
  line-height: 1.9;
  color: #7A6450;
  margin: 0 0 30px;
}
.v4-focus__price {
  font-family: var(--f-sans);
  font-size: 15px;
  letter-spacing: .05em;
  color: #1A1410;
  margin: 0 0 26px;
}
.v4-focus__cta-primary {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--f-sans);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #FAF7F2;
  background: #1A1410;
  text-decoration: none;
  padding: 15px 30px;
  margin-bottom: 14px;
  transition: background .3s ease;
}
.v4-focus__cta-primary:hover { background: var(--c-gold); }
.v4-focus__cta-secondary {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--f-sans);
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #A09080;
  text-decoration: none;
  border-bottom: 1px solid rgba(196,160,81,.25);
  padding-bottom: 3px;
  transition: color .3s;
}
.v4-focus__cta-secondary:hover { color: var(--c-gold); }

/* ── V4-COLLECTION : les 4 Élixirs comme une collection ──── */
.v4-collection {
  background: #0C0906;
  padding: clamp(88px,10vw,140px) clamp(24px,4vw,56px) clamp(120px,14vw,180px);
  border-top: none;
  position: relative;
}
/* Fondu bas vers les avis (crème) */
.v4-collection::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 100px;
  background: linear-gradient(to bottom, transparent, #FAF7F2);
  z-index: 2;
  pointer-events: none;
}
.v4-collection__header {
  text-align: center;
  margin-bottom: clamp(44px,5.5vw,72px);
}
.v4-collection__label {
  display: block;
  font-family: var(--f-sans);
  font-size: 9px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(196,160,81,.5);
  margin-bottom: 18px;
}
.v4-collection__title {
  font-family: var(--f-serif);
  font-size: clamp(26px,3.6vw,50px);
  font-weight: 400;
  color: #FAF7F2;
  line-height: 1.1;
  margin: 0 0 14px;
}
.v4-collection__title em {
  font-family: var(--f-italic);
  font-style: italic;
  color: var(--c-gold);
}
.v4-collection__sub {
  font-family: var(--f-sans);
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(196,160,81,.35);
}
.v4-collection__band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px,1.4vw,20px);
}
.v4-col-item {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}
.v4-col-item__img {
  width: 100%;
  aspect-ratio: 2/3;
  overflow: hidden;
  background: #18120A;
  position: relative;
}
.v4-col-item__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s ease;
}
.v4-col-item:hover .v4-col-item__img img { transform: scale(1.05); }
.v4-col-item__name {
  font-family: var(--f-serif);
  font-size: clamp(14px,1.4vw,19px);
  font-weight: 400;
  color: #FAF7F2;
  margin: 4px 0 0;
}
.v4-col-item__olfact {
  font-family: var(--f-sans);
  font-size: 8px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(196,160,81,.5);
}
.v4-col-item__price {
  font-family: var(--f-sans);
  font-size: 11px;
  color: rgba(250,247,242,.3);
}
.v4-collection__footer {
  text-align: center;
  margin-top: clamp(44px,5vw,64px);
}
.v4-collection__coffret-cta {
  display: inline-block;
  font-family: var(--f-sans);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #0C0906;
  background: var(--c-gold);
  text-decoration: none;
  padding: 15px 36px;
  transition: opacity .3s;
}
.v4-collection__coffret-cta:hover { opacity: .85; }

/* ── V4-AVIS : preuve sociale premium ────────────────────── */
.v4-avis {
  background: #FAF7F2;
  padding: clamp(88px,10vw,140px) clamp(24px,5vw,80px) clamp(110px,13vw,160px);
  border-top: none;
  position: relative;
}
/* Fondu bas vers coffret (crème — confiance remontée en V6) */
.v4-avis::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 100px;
  background: linear-gradient(to bottom, transparent, #F5EFE6);
  z-index: 1;
  pointer-events: none;
}
.v4-avis__header {
  text-align: center;
  margin-bottom: clamp(44px,5.5vw,68px);
}
.v4-avis__title {
  font-family: var(--f-serif);
  font-size: clamp(26px,3.4vw,48px);
  font-weight: 400;
  color: #1A1410;
  line-height: 1.18;
  margin: 0;
}
.v4-avis__title em {
  font-family: var(--f-italic);
  font-style: italic;
  color: var(--c-gold);
}
.v4-avis__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px,2.4vw,36px);
  max-width: 1100px;
  margin: 0 auto;
}
.v4-avis__card {
  background: #FBF7F0;
  padding: clamp(26px,3vw,40px);
  border-top: 1px solid var(--c-gold);
  display: flex;
  flex-direction: column;
}
.v4-avis__stars {
  color: var(--c-gold);
  font-size: 12px;
  letter-spacing: 3px;
  margin-bottom: 18px;
}
.v4-avis__quote {
  font-family: var(--f-italic);
  font-style: italic;
  font-size: clamp(14px,1.4vw,17px);
  line-height: 1.75;
  color: #2C2018;
  margin: 0 0 20px;
  flex: 1;
}
.v4-avis__product {
  font-family: var(--f-sans);
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-gold);
  opacity: .7;
  margin: 0 0 8px;
}
.v4-avis__author {
  font-family: var(--f-sans);
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #9A8070;
}
.v4-avis__footer {
  text-align: center;
  margin-top: clamp(40px,5vw,58px);
  padding-top: clamp(28px,3.5vw,44px);
  border-top: 1px solid rgba(196,160,81,.15);
}
.v4-avis__summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-family: var(--f-sans);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #9A8070;
}
.v4-avis__score {
  font-family: var(--f-serif);
  font-size: 34px;
  color: #1A1410;
  line-height: 1;
}
.v4-avis__stars-total {
  color: var(--c-gold);
  letter-spacing: 3px;
  font-size: 11px;
}

/* ── V4-COMPARE : CARAT vs. spray classique ─────────────── */
.v4-compare {
  background: #16110C;
  padding: clamp(88px,10vw,130px) clamp(24px,5vw,80px) clamp(120px,14vw,170px);
  position: relative;
}
/* Fondu bas vers coffret (crème) */
.v4-compare::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 100px;
  background: linear-gradient(to bottom, transparent, #F5EFE6);
  z-index: 1;
  pointer-events: none;
}
.v4-compare__header {
  text-align: center;
  margin-bottom: clamp(44px,6vw,72px);
}
.v4-compare__title {
  font-family: var(--f-serif);
  font-size: clamp(26px,3.6vw,50px);
  font-weight: 400;
  color: #FAF7F2;
  line-height: 1.14;
  margin: 0;
}
.v4-compare__title em {
  font-family: var(--f-italic);
  font-style: italic;
  color: var(--c-gold);
}
.v4-compare__table {
  max-width: 780px;
  margin: 0 auto;
}
.v4-compare__head {
  display: grid;
  grid-template-columns: 1fr 52px 1fr;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(196,160,81,.1);
}
.v4-compare__head-classic {
  font-family: var(--f-sans);
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(250,247,242,.2);
  text-align: right;
}
.v4-compare__head-carat {
  font-family: var(--f-sans);
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(196,160,81,.55);
}
.v4-compare__row {
  display: grid;
  grid-template-columns: 1fr 52px 1fr;
  gap: 12px;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid rgba(196,160,81,.06);
}
.v4-compare__row:last-child { border-bottom: none; }
.v4-compare__classic {
  font-family: var(--f-sans);
  font-size: 12px;
  letter-spacing: .03em;
  color: rgba(250,247,242,.22);
  text-align: right;
  text-decoration: line-through;
  text-decoration-color: rgba(250,247,242,.1);
}
.v4-compare__vs {
  font-family: var(--f-sans);
  font-size: 8px;
  letter-spacing: .1em;
  color: rgba(196,160,81,.3);
  text-align: center;
  white-space: nowrap;
}
.v4-compare__carat {
  font-family: var(--f-sans);
  font-size: 13px;
  color: rgba(250,247,242,.78);
}
.v4-compare__carat strong {
  color: #FAF7F2;
  font-weight: 500;
}
.v4-compare__footer {
  text-align: center;
  margin-top: clamp(44px,5vw,64px);
}
.v4-compare__cta {
  display: inline-block;
  font-family: var(--f-sans);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--c-gold);
  text-decoration: none;
  border: 1px solid rgba(196,160,81,.3);
  padding: 15px 36px;
  transition: all .3s;
}
.v4-compare__cta:hover { background: var(--c-gold); color: #0C0906; }

/* ── V4-FAQ : accordion premium ──────────────────────────── */
.v4-faq {
  background: #F5EFE6;
  padding: clamp(72px,9vw,120px) clamp(24px,5vw,80px);
  border-top: 1px solid rgba(196,160,81,.1);
}
.v4-faq__header {
  text-align: center;
  margin-bottom: clamp(44px,5.5vw,72px);
}
.v4-faq__title {
  font-family: var(--f-serif);
  font-size: clamp(26px,3.4vw,48px);
  font-weight: 400;
  color: #1A1410;
  line-height: 1.2;
  margin: 0;
}
.v4-faq__list {
  max-width: 720px;
  margin: 0 auto;
}
.v4-faq__item {
  border-bottom: 1px solid rgba(196,160,81,.18);
}
.v4-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0;
  cursor: pointer;
  user-select: none;
}
.v4-faq__q-text {
  font-family: var(--f-sans);
  font-size: 13px;
  line-height: 1.5;
  color: #1A1410;
  letter-spacing: .02em;
}
.v4-faq__icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-gold);
  font-size: 20px;
  font-family: var(--f-sans);
  font-weight: 300;
  line-height: 1;
  transition: transform .35s ease;
}
.v4-faq__item.is-open .v4-faq__icon { transform: rotate(45deg); }
.v4-faq__answer {
  font-family: var(--f-sans);
  font-size: 13px;
  line-height: 1.9;
  color: #7A6450;
  max-height: 0;
  overflow: hidden;
  padding-right: 40px;
  transition: max-height .4s ease;
}
.v4-faq__item.is-open .v4-faq__answer {
  max-height: 400px;
  padding-bottom: 24px;
}

/* ── Reveal V5 — animation scroll ────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .v5-ingredients {
    opacity: 0;
    transition: opacity 1.2s ease;
  }
  .v5-ingredients.is-visible { opacity: 1; }

  .v4-focus__text,
  .v4-collection__header,
  .v4-avis__header,
  .v4-compare__header,
  .v4-faq__header {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .9s ease, transform .9s ease;
  }
  .v4-focus__text.is-visible,
  .v4-collection__header.is-visible,
  .v4-avis__header.is-visible,
  .v4-compare__header.is-visible,
  .v4-faq__header.is-visible { opacity: 1; transform: none; }

  .v4-avis__card {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .8s ease, transform .8s ease;
  }
  .v4-avis__card.is-visible { opacity: 1; transform: none; }
  .v4-avis__card:nth-child(2) { transition-delay: .1s; }
  .v4-avis__card:nth-child(3) { transition-delay: .2s; }

  .v4-col-item {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .8s ease, transform .8s ease;
  }
  .v4-col-item.is-visible { opacity: 1; transform: none; }
  .v4-col-item:nth-child(2) { transition-delay: .08s; }
  .v4-col-item:nth-child(3) { transition-delay: .16s; }
  .v4-col-item:nth-child(4) { transition-delay: .24s; }
}

/* ── Mobile — V5 produit central ─────────────────────────── */
@media (max-width: 768px) {
  /* V4-FOCUS */
  .v4-focus {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .v4-focus__stage { aspect-ratio: 4/3; }
  .v4-focus__text {
    border-left: none;
    border-top: 1px solid rgba(196,160,81,.1);
    padding: 36px 24px 52px;
  }
  .v4-focus__name { font-size: clamp(34px,9vw,50px); }
  .v4-focus__cta-primary {
    align-self: stretch;
    text-align: center;
    padding: 17px 24px;
  }

  /* V4-COLLECTION */
  .v4-collection { padding: 52px 20px 60px; }
  .v4-collection__band { grid-template-columns: repeat(2, 1fr); gap: 10px; }

  /* V4-AVIS */
  .v4-avis { padding: 60px 20px; }
  .v4-avis__grid { grid-template-columns: 1fr; gap: 14px; }
  .v4-avis__summary { flex-direction: column; gap: 6px; }

  /* V4-COMPARE */
  .v4-compare { padding: 56px 20px; }
  .v4-compare__head { display: none; }
  .v4-compare__row {
    grid-template-columns: 1fr;
    gap: 3px;
    padding: 14px 0;
  }
  .v4-compare__classic { text-align: left; font-size: 10px; }
  .v4-compare__vs { text-align: left; font-size: 8px; }
  .v4-compare__carat { font-size: 14px; }

  /* V4-FAQ */
  .v4-faq { padding: 56px 20px; }
  .v4-faq__answer { padding-right: 0; }
  .v4-faq__item.is-open .v4-faq__answer { padding-bottom: 20px; }
}

/* ============================================================
   V5 — INGRÉDIENTS : les 4 univers olfactifs
   Image pleine largeur + zoom très léger au scroll
   ============================================================ */
.v5-ingredients {
  position: relative;
  overflow: hidden;
  background: #0C0906;
  line-height: 0;
}
.v5-ingredients__frame {
  width: 100%;
  overflow: hidden;
}
.v5-ingredients__img {
  width: 100%;
  height: auto;
  display: block;
  transform: scale(1.05);
  transition: transform 11s cubic-bezier(.25,.46,.45,.94);
}
.v5-ingredients.is-visible .v5-ingredients__img {
  transform: scale(1.00);
}

/* Fondu bas vers le salon (crème) — s'imbrique avec le margin-top du salon */
.v5-ingredients::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 28vh;
  background: linear-gradient(to bottom, transparent, #F5EFE6);
  z-index: 4;
  pointer-events: none;
}

@media (max-width: 768px) {
  .v5-ingredients__frame {
    height: 240px;
    overflow: hidden;
  }
  .v5-ingredients__img {
    width: 280%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    object-position: 42% center;
    margin-left: -90%;
  }
}

/* ============================================================
   V6 — LE RITUEL CARAT
   Juillet 2026 — Direction Loewe / Byredo / Aesop
   3 étapes cinématographiques plein écran + grande respiration
   ============================================================ */

/* ── Hero — fondu bas vers le Rituel ───────────────────────── */
.hp-hero {
  position: relative;
}
.hp-hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 20vh;
  background: linear-gradient(to bottom, transparent, #060301);
  z-index: 10;
  pointer-events: none;
}

/* ── Rituel — conteneur ─────────────────────────────────────── */
.v6-rituel {
  position: relative;
}

/* ── Étape individuelle ─────────────────────────────────────── */
.v6-step {
  position: relative;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

.v6-step__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-repeat: no-repeat;
  will-change: transform;
}

/* ── Images de fond ─────────────────────────────────────────── */
.v6-step--01 .v6-step__bg {
  background-image: url('/assets/backgrounds/spray-micro-gouttelettes.webp');
  background-position: 42% center;
}
.v6-step--02 .v6-step__bg {
  background-image: url('/assets/backgrounds/vapeur-matiere.webp');
  background-position: center 28%;
}
.v6-step--03 .v6-step__bg {
  background-image: url('/assets/backgrounds/salon-table-elixir.webp');
  background-position: center center;
}

/* ── Gradient de lecture (lisibilité du texte en bas) ──────── */
.v6-step--01::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(6,3,1,.93)  0%,
    rgba(6,3,1,.18) 46%,
    transparent     100%);
  z-index: 2;
  pointer-events: none;
}
.v6-step--02::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(8,5,2,.90)  0%,
    rgba(8,5,2,.12) 44%,
    transparent     100%);
  z-index: 2;
  pointer-events: none;
}
.v6-step--03::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(6,4,2,.92)  0%,
    rgba(6,4,2,.08) 48%,
    transparent     100%);
  z-index: 2;
  pointer-events: none;
}

/* ── Gradient de transition bas (fondu vers étape suivante) ── */
.v6-step::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 3;
  pointer-events: none;
}
.v6-step--01::after { height: 20vh; background: linear-gradient(to bottom, transparent, #0A0704); }
.v6-step--02::after { height: 20vh; background: linear-gradient(to bottom, transparent, #110805); }
.v6-step--03::after { height: 28vh; background: linear-gradient(to bottom, transparent, #0C0906); }

/* ── Contenu texte ──────────────────────────────────────────── */
.v6-step__content {
  position: relative;
  z-index: 4;
  padding: 0 clamp(36px,5vw,80px) clamp(64px,10vh,120px);
  max-width: 620px;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .85s ease, transform .85s ease;
}
.v6-step.is-visible .v6-step__content {
  opacity: 1;
  transform: translateY(0);
}

.v6-step__num {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: clamp(16px,2.4vh,28px);
}
.v6-step__num-label {
  font-family: var(--f-sans);
  font-size: 9px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--c-gold);
  opacity: .7;
}
.v6-step__num-count {
  font-family: var(--f-sans);
  font-size: 9px;
  letter-spacing: .12em;
  color: rgba(196,160,81,.28);
}

.v6-step__title {
  font-family: var(--f-serif);
  font-size: clamp(52px,7.5vw,108px);
  font-weight: 400;
  line-height: .92;
  color: #FAF7F2;
  margin: 0 0 clamp(18px,2.5vh,32px);
  letter-spacing: -.01em;
}
.v6-step__title em {
  font-family: var(--f-italic);
  font-style: italic;
  color: rgba(250,247,242,.85);
}

.v6-step__body {
  font-family: var(--f-sans);
  font-size: clamp(12px,1.05vw,14px);
  line-height: 1.85;
  color: rgba(250,247,242,.50);
  max-width: 320px;
  letter-spacing: .01em;
}

.v6-step__cta {
  display: inline-block;
  margin-top: clamp(22px,3.5vh,40px);
  font-family: var(--f-sans);
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(196,160,81,.80);
  text-decoration: none;
  border-bottom: 1px solid rgba(196,160,81,.28);
  padding-bottom: 4px;
  transition: color .3s, border-color .3s;
}
.v6-step__cta:hover {
  color: var(--c-gold);
  border-color: var(--c-gold);
}

/* ── RESPIRATION — grande image immersive ───────────────────── */
.v6-respiration {
  position: relative;
  height: 68vh;
  min-height: 460px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0C0906;
}

.v6-respiration__top-fade {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 28vh;
  background: linear-gradient(to bottom, #0C0906, transparent);
  z-index: 3;
  pointer-events: none;
}

.v6-respiration__bg {
  position: absolute;
  inset: 0;
  background-image: url('/assets/backgrounds/lifestyle-salon-luxe.webp');
  background-size: cover;
  background-position: center 40%;
  opacity: .82;
  will-change: transform;
}

.v6-respiration::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(6,4,2,.35);
  z-index: 2;
  pointer-events: none;
}

/* Fondu bas vers v3-confiance (même noir) */
.v6-respiration::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 28vh;
  background: linear-gradient(to bottom, transparent, #0E0A06);
  z-index: 4;
  pointer-events: none;
}

.v6-respiration__text {
  position: relative;
  z-index: 5;
  text-align: center;
  padding: 0 clamp(28px,12vw,240px);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 1.1s ease, transform 1.1s ease;
}
.v6-respiration.is-visible .v6-respiration__text {
  opacity: 1;
  transform: translateY(0);
}

.v6-respiration__quote {
  font-family: var(--f-italic);
  font-size: clamp(22px,3vw,48px);
  font-style: italic;
  font-weight: 300;
  color: #FAF7F2;
  line-height: 1.4;
  letter-spacing: .005em;
  margin: 0;
}

.v6-respiration__sub {
  display: block;
  margin-top: 8px;
  font-family: var(--f-italic);
  font-size: clamp(18px,2.4vw,38px);
  font-style: italic;
  font-weight: 300;
  color: var(--c-gold);
  opacity: .82;
}

/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .hp-hero::after { height: 15vh; }

  .v6-step {
    height: 60svh;
    min-height: 400px;
  }
  .v6-step--01 .v6-step__bg { background-position: 38% center; }
  .v6-step--02 .v6-step__bg { background-position: 35% 25%; }
  .v6-step--03 .v6-step__bg { background-position: 62% center; }
  .v6-step__content {
    padding: 0 24px clamp(56px,12vh,90px);
  }
  .v6-step__title { font-size: clamp(44px,13vw,64px); }
  .v6-step__body { font-size: 12px; max-width: none; }
  .v6-step--01::after { height: 25vh; }
  .v6-step--02::after { height: 25vh; }
  .v6-step--03::after { height: 32vh; }

  .v6-respiration {
    height: 56vh;
    min-height: 340px;
  }
  .v6-respiration__quote { font-size: clamp(18px,5.5vw,26px); }
  .v6-respiration__sub   { font-size: clamp(15px,4.5vw,22px); }
}

/* ============================================================
   V7 — CRO & Qualité Luxe — Août 2026
   Head of Digital : rythme film, galerie parfumerie,
   témoignages crédibles, coffret premium, transitions fluides
   ============================================================ */

/* ── 1. Transitions fluides : confiance sans bordures dorées ── */
.v3-confiance {
  border-top: none !important;
  border-bottom: none !important;
}
/* Fondu doux confiance → collection (même fond sombre) */
.v4-collection::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 80px;
  background: linear-gradient(to bottom, #0E0A06, transparent);
  z-index: 1;
  pointer-events: none;
}
/* Collection → Avis : fondu plus généreux */
.v4-collection::after {
  height: 180px !important;
}
/* Plus d'espace bas pour que le dégradé ne passe pas sur le CTA */
.v4-collection {
  padding-bottom: clamp(160px,18vw,240px) !important;
}

/* ── 2. Galerie de parfumerie — v4-collection ─────────────── */

/* Espacement généreux entre les flacons — air de parfumerie */
.v4-collection__band {
  gap: clamp(28px, 3.5vw, 52px);
}

/* Flacon complet visible sur fond obscur — effet vitrine */
.v4-col-item__img img {
  object-fit: contain !important;
  padding: clamp(14px, 1.8vw, 26px) clamp(10px, 1.2vw, 18px);
  transition: transform .7s cubic-bezier(.25,.46,.45,.94) !important;
}
/* Annule le scale initial — le card translateY suffit */
.v4-col-item:hover .v4-col-item__img img {
  transform: none !important;
}

/* Halo doré au hover via box-shadow */
.v4-col-item__img {
  transition: box-shadow .65s cubic-bezier(.25,.46,.45,.94);
}
.v4-col-item:hover .v4-col-item__img {
  box-shadow: 0 28px 56px -10px rgba(196,160,81,.22);
}

/* Carte : monte délicatement au hover */
.v4-col-item {
  gap: clamp(12px, 1.4vw, 18px);
  transition: opacity .8s ease, transform .7s cubic-bezier(.25,.46,.45,.94) !important;
  will-change: transform;
}
.v4-col-item.is-visible:hover {
  transform: translateY(-13px);
}

/* Nom → or au hover */
.v4-col-item__name {
  transition: color .4s ease;
  margin-top: 2px !important;
}
.v4-col-item:hover .v4-col-item__name {
  color: var(--c-gold);
}

/* Prix légèrement plus présent */
.v4-col-item__price {
  color: rgba(250,247,242,.45) !important;
  font-size: 12px !important;
  letter-spacing: .06em;
}

/* "Découvrir →" révélé au hover */
.v4-col-item__discover {
  font-family: var(--f-sans);
  font-size: 8px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(196,160,81,.65);
  opacity: 0;
  transform: translateY(5px);
  transition: opacity .4s ease .05s, transform .4s ease .05s;
  display: block;
}
.v4-col-item:hover .v4-col-item__discover {
  opacity: 1;
  transform: translateY(0);
}

/* Mobile : 2 colonnes avec espacement */
@media (max-width: 768px) {
  .v4-collection__band { gap: 20px !important; }
  .v4-collection { padding-bottom: 80px !important; }
  .v4-collection::after { height: 100px !important; }
}

/* ── 3. Témoignages crédibles — v4-avis ──────────────────── */

/* Bordure éditoriale gauche — style magazine */
.v4-avis__card {
  border-top: none !important;
  border-left: 2px solid rgba(196,160,81,.5);
  padding-left: clamp(24px, 3vw, 38px) !important;
  padding-top: clamp(20px, 2.5vw, 32px) !important;
  padding-bottom: clamp(20px, 2.5vw, 32px) !important;
  background: transparent !important;
  gap: 12px;
}

/* Étoiles — plus subtiles */
.v4-avis__stars {
  font-size: 10px !important;
  letter-spacing: 2px !important;
  margin-bottom: 12px !important;
  opacity: .82;
}

/* Quote — légèrement plus grande pour impact */
.v4-avis__quote {
  font-size: clamp(14px, 1.3vw, 16px) !important;
  margin-bottom: 14px !important;
}

/* Badge "Achat vérifié" */
.v4-avis__verified {
  font-family: var(--f-sans);
  font-size: 8px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(196,160,81,.6);
  display: block;
}

/* Auteur — discret mais présent */
.v4-avis__author {
  color: #8A7A68 !important;
  letter-spacing: .14em !important;
  margin-top: 4px;
}

/* Plus d'air entre les cartes */
.v4-avis__grid {
  gap: clamp(28px, 3.5vw, 52px) !important;
}

/* Label section — discret */
.v4-avis__header .v3-label {
  opacity: .5;
}

/* Fond légèrement plus chaud */
.v4-avis {
  background: #F8F4EE !important;
}
/* Transition avis → coffret */
.v4-avis::after {
  background: linear-gradient(to bottom, transparent, #F5EFE6) !important;
  height: 120px !important;
}

@media (max-width: 768px) {
  .v4-avis__card {
    padding-left: 18px !important;
  }
}

/* ── 4. Coffret — offre premium évidente ─────────────────── */

/* Pas de marge arrachée — s'enchaîne naturellement */
.v3-coffret {
  margin-top: 0 !important;
}

/* Badge "Vous économisez" */
.v3-coffret__savings {
  display: inline-flex;
  align-items: center;
  font-family: var(--f-sans);
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-gold);
  background: rgba(196,160,81,.09);
  border: 1px solid rgba(196,160,81,.22);
  padding: 7px 16px;
  margin-bottom: 20px;
  align-self: flex-start;
}

/* Liste des contenus */
.v3-coffret__contents {
  list-style: none;
  padding: 0;
  margin: 0 0 30px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.v3-coffret__contents li {
  font-family: var(--f-sans);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #8A7A6A;
  padding-left: 16px;
  position: relative;
}
.v3-coffret__contents li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: rgba(196,160,81,.45);
  font-family: var(--f-sans);
}

/* Ligne de réassurance */
.v3-coffret__reassurance {
  display: block;
  font-family: var(--f-sans);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(196,160,81,.45);
  margin-top: 18px;
}

@media (max-width: 768px) {
  .v3-coffret__savings { font-size: 8px; padding: 6px 12px; }
  .v3-coffret__contents { margin-bottom: 22px; }
}

/* ============================================================
   V8 — SECTION ÉDITORIALE : LES 4 SIGNATURES + COFFRET
   Août 2026 — Style magazine Byredo / Aesop / Diptyque
   ============================================================ */

/* Masquer l'ancienne collection et l'ancien coffret */
.v4-collection { display: none !important; }
.v3-coffret    { display: none !important; }

/* ─── SECTION WRAPPER ─── */
.v8-signatures {
  background: #0E0B07;
  position: relative;
}

/* ─── EN-TÊTE ÉDITORIAL ─── */
.v8-sig-header {
  text-align: center;
  padding: clamp(80px, 10vw, 140px) clamp(24px, 6vw, 80px) clamp(60px, 7vw, 100px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  position: relative;
  overflow: hidden;
  z-index: 5;           /* au-dessus de tous les panels V9 (z-index 1-4) */
  background-image: url('/assets/backgrounds/choisissez-la-signature.webp');
  background-size: cover;
  background-position: center center;
  /* Fondu vers le bas — le sig-header se dissout dans le panel 01 */
  -webkit-mask-image: linear-gradient(to bottom, black 0, black 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 0, black 80%, transparent 100%);
}

/* Voile noir 75% — photo en fond, texte au premier plan */
.v8-sig-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .75);
  z-index: 0;
}

/* Tous les enfants au-dessus du voile */
.v8-sig-header > * {
  position: relative;
  z-index: 1;
}

.v8-sig-header .v3-label {
  color: rgba(196,160,81,.5);
}

.v8-sig-header__title {
  font-family: var(--f-serif);
  font-size: clamp(28px, 4vw, 54px);
  font-weight: 400;
  color: var(--c-cream);
  line-height: 1.18;
  margin: 0;
  letter-spacing: .01em;
}

.v8-sig-header__title em {
  font-family: var(--f-italic);
  font-style: italic;
  color: rgba(250,247,242,.7);
}

.v8-sig-header__sub {
  font-family: var(--f-sans);
  font-size: clamp(12px, 1.1vw, 14px);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(250,247,242,.32);
  margin: 0;
  max-width: 440px;
}

/* ─── FRAGRANCE ROW ─── */
.v8-frag {
  display: grid;
  grid-template-columns: 60% 40%;
  min-height: 76vh;
  position: relative;
  overflow: hidden;
}

.v8-frag--reverse {
  grid-template-columns: 40% 60%;
}

/* Visual column */
.v8-frag__visual {
  position: relative;
  overflow: hidden;
}

.v8-frag__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.1s cubic-bezier(.25,.46,.45,.94);
}

.v8-frag:hover .v8-frag__visual img {
  transform: scale(1.03);
}

/* Pour les rows inversées: image reste à droite (2e colonne dans le DOM, affichée en 2e) */
.v8-frag--reverse .v8-frag__visual {
  order: 2;
}
.v8-frag--reverse .v8-frag__content {
  order: 1;
}

/* Content column */
.v8-frag__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(48px, 6vw, 96px) clamp(32px, 4.5vw, 72px);
  position: relative;
}

/* Teinte de fond par parfum */
.v8-frag--01 .v8-frag__content { background: #18100A; }
.v8-frag--02 .v8-frag__content { background: #08101A; }
.v8-frag--03 .v8-frag__content { background: #160C04; }
.v8-frag--04 .v8-frag__content { background: #080F0A; }

/* Numéro */
.v8-frag__num {
  font-family: var(--f-sans);
  font-size: 9px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(196,160,81,.45);
  display: block;
  margin-bottom: clamp(20px, 2.5vw, 32px);
}

/* Nom */
.v8-frag__name {
  font-family: var(--f-serif);
  font-size: clamp(22px, 2.8vw, 40px);
  font-weight: 400;
  color: var(--c-cream);
  letter-spacing: .02em;
  margin: 0 0 clamp(12px, 1.5vw, 20px);
  line-height: 1.1;
}

/* Tagline */
.v8-frag__tagline {
  font-family: var(--f-italic);
  font-style: italic;
  font-size: clamp(15px, 1.6vw, 22px);
  color: rgba(250,247,242,.65);
  letter-spacing: .02em;
  display: block;
  margin-bottom: clamp(20px, 2.5vw, 32px);
  line-height: 1.3;
}

/* Description */
.v8-frag__desc {
  font-family: var(--f-sans);
  font-size: clamp(12px, 1.05vw, 14px);
  color: rgba(250,247,242,.38);
  letter-spacing: .06em;
  line-height: 1.9;
  margin: 0 0 clamp(28px, 3.5vw, 48px);
}

/* Meta bloc */
.v8-frag__meta {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 24px);
  margin-bottom: clamp(28px, 3.5vw, 48px);
  padding-top: clamp(20px, 2.5vw, 32px);
  border-top: 1px solid rgba(196,160,81,.14);
}

.v8-frag__meta-block {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.v8-frag__meta-label {
  font-family: var(--f-sans);
  font-size: 8px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(196,160,81,.45);
}

.v8-frag__meta-val {
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(250,247,242,.55);
  line-height: 1.6;
}

/* Footer prix + CTA */
.v8-frag__footer {
  display: flex;
  align-items: center;
  gap: 24px;
}

.v8-frag__price {
  font-family: var(--f-serif);
  font-size: clamp(18px, 1.8vw, 24px);
  color: var(--c-cream);
  letter-spacing: .04em;
}

.v8-frag__cta {
  font-family: var(--f-sans);
  font-size: 9px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(196,160,81,.35);
  padding-bottom: 3px;
  transition: color .3s ease, border-color .3s ease;
}

.v8-frag__cta:hover {
  color: #dfc077;
  border-color: rgba(196,160,81,.7);
}

/* ─── SCROLL REVEAL ─── */
.v8-frag {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .9s cubic-bezier(.25,.46,.45,.94),
              transform .9s cubic-bezier(.25,.46,.45,.94);
}

.v8-frag.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── COFFRET V8 ─── */
.v8-coffret {
  display: grid;
  grid-template-columns: 55% 45%;
  min-height: 70vh;
  background: #0A0704;
  position: relative;
  /* opacity:0 + translateY retirés le 08/09/2026 : la classe .is-visible
     n'était jamais posée, et le bloc ne devait sa visibilité qu'à un
     !important déclaré plus loin. Il découvrait le noir du parent. */
}

.v8-coffret.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.v8-coffret__visual {
  position: relative;
  overflow: hidden;
  background: #120D08;
}

.v8-coffret__visual img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: clamp(40px, 5vw, 80px);
  transition: transform 1.1s cubic-bezier(.25,.46,.45,.94);
}

.v8-coffret:hover .v8-coffret__visual img {
  transform: scale(1.03);
}

.v8-coffret__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(48px, 6vw, 96px) clamp(32px, 4.5vw, 72px);
  border-left: 1px solid rgba(196,160,81,.1);
}

.v8-coffret__title {
  font-family: var(--f-serif);
  font-size: clamp(22px, 2.8vw, 40px);
  font-weight: 400;
  color: var(--c-cream);
  letter-spacing: .02em;
  margin: 12px 0 clamp(28px, 3.5vw, 44px);
  line-height: 1.18;
}

.v8-coffret__title em {
  font-family: var(--f-italic);
  font-style: italic;
  color: rgba(250,247,242,.6);
}

/* Badges */
.v8-coffret__badges {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 1.8vw, 24px);
  margin-bottom: clamp(28px, 3.5vw, 44px);
}

.v8-coffret__badge {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: clamp(14px, 1.8vw, 20px);
  border: 1px solid rgba(196,160,81,.15);
  background: rgba(196,160,81,.04);
}

.v8-coffret__badge-num {
  font-family: var(--f-serif);
  font-size: clamp(20px, 2.2vw, 30px);
  color: var(--c-gold);
  letter-spacing: .04em;
  line-height: 1;
}

.v8-coffret__badge-lbl {
  font-family: var(--f-sans);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(250,247,242,.38);
  line-height: 1.5;
}

.v8-coffret__badge-num-sm {
  font-family: var(--f-sans);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(250,247,242,.55);
  line-height: 1.55;
  display: block;
}

/* Prix */
.v8-coffret__price-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: clamp(20px, 2.5vw, 30px);
  padding-top: clamp(20px, 2.5vw, 30px);
  border-top: 1px solid rgba(196,160,81,.14);
}

.v8-coffret__price {
  font-family: var(--f-serif);
  font-size: clamp(22px, 2.2vw, 30px);
  color: var(--c-cream);
  letter-spacing: .04em;
}

.v8-coffret__old {
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: .1em;
  color: rgba(250,247,242,.3);
  text-decoration: line-through;
}

.v8-coffret__saving {
  display: block;
  width: 100%;
  font-family: var(--f-sans);
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(196,160,81,.55);
}

/* CTA coffret */
.v8-coffret__cta {
  display: inline-block;
  font-family: var(--f-sans);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #0E0B07;
  background: var(--c-gold);
  padding: 16px 32px;
  text-decoration: none;
  align-self: flex-start;
  transition: background .35s ease, color .35s ease;
}

.v8-coffret__cta:hover {
  background: #dfc077;
}

/* ─── MOBILE V8 ─── */
@media (max-width: 768px) {

  .v8-sig-header {
    padding: 60px 24px 44px;
  }

  .v8-frag,
  .v8-frag--reverse {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .v8-frag--reverse .v8-frag__visual,
  .v8-frag--reverse .v8-frag__content {
    order: unset;
  }

  .v8-frag__visual {
    aspect-ratio: 4 / 3;
    order: 1;
  }

  .v8-frag--reverse .v8-frag__visual { order: 1; }
  .v8-frag--reverse .v8-frag__content { order: 2; }

  .v8-frag__content {
    order: 2;
    padding: 36px 24px 44px;
  }

  .v8-frag__meta {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
  }

  .v8-coffret {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .v8-coffret__visual {
    aspect-ratio: 4 / 3;
  }

  .v8-coffret__visual img {
    padding: 24px;
  }

  .v8-coffret__content {
    border-left: none;
    border-top: 1px solid rgba(196,160,81,.1);
    padding: 36px 24px 52px;
  }

  .v8-coffret__badges {
    grid-template-columns: 1fr 1fr;
  }

  .v8-coffret__cta {
    width: 100%;
    text-align: center;
  }
}

/* ============================================================
   V9 — BANNIÈRES IMMERSIVES : LES 4 SIGNATURES
   Direction Diptyque / Rituals / Byredo / Aesop
   Bannière horizontale pleine largeur · Texte gauche · Produit droite
   Overlay couleur discret · Gradient texte · Luxe & respiration
   ============================================================ */

/* Masquer les anciens frags V8 (zero-deletion policy) */
.v8-frag { display: none !important; }

/* ─── ANIMATION ─── */

@keyframes v9-ken-burns {
  from { transform: scale(1); }
  to   { transform: scale(1.025); }
}

/* ─── BANNIÈRE — DESKTOP ─── */
.v9-panel {
  position: relative;
  height: 100vh;
  min-height: 620px;
  overflow: hidden;
  margin-bottom: 0;
}

/* Desktop : desc + meta masquées pour respiration et cohérence luxe */
.v9-panel .v9-desc,
.v9-panel .v9-meta { display: none; }

.v9-panel:last-of-type { margin-bottom: 0; }

/* ─── IMAGE FOND ─── */
/*
  inset: -40px 0 — marge extra pour absorber le mouvement parallaxe
  sans jamais exposer le fond du panel derrière l'image.
*/
.v9-panel__bg {
  position: absolute;
  inset: -40px 0;
  z-index: 0;
  transform: translateY(var(--parallax-y, 0px));
}

.v9-panel__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  will-change: transform;
  animation: v9-ken-burns 32s ease-in-out infinite alternate;
}

/*
  Cadrage éditorial — alternance gauche/droite du flacon pour un rendu
  magazine/campagne. Plus d'espace décor, moins de fiche produit centrée.
*/
.v9-panel--01 .v9-panel__bg img { object-position: 64% 24%; }
.v9-panel--02 .v9-panel__bg img { object-position: 36% 32%; }
.v9-panel--03 .v9-panel__bg img { object-position: 66% 18%; }
.v9-panel--04 .v9-panel__bg img { object-position: 34% 34%; }

/*
  DISSOLUTION CINÉMATIQUE — structure d'empilement.
  Chaque panel chevauche le précédent de 220px via margin-top négatif.
  Z-index ascendant : le panel suivant passe toujours devant.
  La zone de chevauchement révèle le panel du dessous à travers
  la transparence du mask-image → vrai dissolve photographique.
*/
.v9-panel--01 { z-index: 1; }
.v9-panel--02 { background: #050505; z-index: 2; margin-top: -220px; }
.v9-panel--03 { background: #050505; z-index: 3; margin-top: -220px; }
.v9-panel--04 { background: #050505; z-index: 4; margin-top: -220px; }

/* ─── DISSOLUTION CINÉMATIQUE — MASK-IMAGE PAR PANEL ─── */
/*
  Principe LV Fragrance / Dior Maison / Apple :
  Chaque scène est masquée en haut et/ou en bas par un dégradé
  de transparence. Dans la zone de chevauchement (220px),
  le panel du dessus (z-index supérieur, transparent en haut)
  laisse voir le panel du dessous → DISSOLVE PHOTOGRAPHIQUE PUR.

  Zones de transition :
    - Haut (panels 02-04) : 0 → opaque sur 22% (~195px à 100vh)
    - Bas (panels 01-03) : opaque → transparent sur les 28% finaux

  Le texte (positionné à top: 44%) reste dans la zone 22-72%,
  hors de toute zone masquée — il n'est jamais affecté.
*/

/* Pseudo-élément de base — transparent, juste structure */
.v9-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: transparent;
}

/* PANEL 01 — fondu uniquement en bas (premier, rien au-dessus) */
.v9-panel--01 {
  -webkit-mask-image: linear-gradient(to bottom,
    black           0,
    black           72%,
    transparent     100%
  );
  mask-image: linear-gradient(to bottom,
    black           0,
    black           72%,
    transparent     100%
  );
}

/* PANELS 02 & 03 — fondu haut ET bas */
.v9-panel--02,
.v9-panel--03 {
  -webkit-mask-image: linear-gradient(to bottom,
    transparent     0,
    black           22%,
    black           72%,
    transparent     100%
  );
  mask-image: linear-gradient(to bottom,
    transparent     0,
    black           22%,
    black           72%,
    transparent     100%
  );
}

/* PANEL 04 — fondu uniquement en haut (dernier, rien en dessous) */
.v9-panel--04 {
  -webkit-mask-image: linear-gradient(to bottom,
    transparent     0,
    black           22%,
    black           100%
  );
  mask-image: linear-gradient(to bottom,
    transparent     0,
    black           22%,
    black           100%
  );
}

/* ─── LISIBILITÉ TEXTE (couche 2) ─── */
/*
  Dégradé noir à 12% max — invisible à l'œil nu, efficace pour le texte.
  Aucun filtre coloré. Aucun rectangle. Le texte flotte sur l'image.
*/
.v9-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    to right,
    rgba(0,0,0,.12) 0%,
    rgba(0,0,0,.05) 20%,
    transparent     38%
  );
  pointer-events: none;
}

/* ─── TEXTE : LÉGÈREMENT AU-DESSUS DU CENTRE ─── */
.v9-panel__text {
  position: absolute;
  top: 44%;
  left: clamp(32px, 6vw, 88px);
  transform: translateY(-50%);
  z-index: 3;
  max-width: min(460px, 44%);
  opacity: 0;
  transition: opacity .9s cubic-bezier(.25,.46,.45,.94);
}

.v9-panel__text.is-visible { opacity: 1; }

/* ─── CASCADE DES ENFANTS ─── */
.v9-panel__text > * {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity  .85s cubic-bezier(.25,.46,.45,.94),
    transform .85s cubic-bezier(.25,.46,.45,.94);
}
.v9-panel__text.is-visible > *:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: .12s; }
.v9-panel__text.is-visible > *:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: .24s; }
.v9-panel__text.is-visible > *:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: .36s; }
.v9-panel__text.is-visible > *:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: .48s; }
.v9-panel__text.is-visible > *:nth-child(5) { opacity: 1; transform: translateY(0); transition-delay: .60s; }
.v9-panel__text.is-visible > *:nth-child(6) { opacity: 1; transform: translateY(0); transition-delay: .72s; }

/* ─── TYPOGRAPHIE DESKTOP ─── */
.v9-num {
  display: block;
  font-family: var(--f-sans);
  font-size: 8px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: rgba(196,160,81,.60);
  margin-bottom: clamp(14px, 1.8vw, 22px);
  text-shadow: 0 1px 6px rgba(0,0,0,.50);
}

.v9-name {
  font-family: var(--f-serif);
  font-size: clamp(32px, 4.4vw, 62px);
  font-weight: 400;
  color: #ffffff;
  letter-spacing: .01em;
  line-height: .96;
  margin: 0 0 clamp(12px, 1.2vw, 18px);
  text-shadow: 0 2px 16px rgba(0,0,0,.55), 0 1px 4px rgba(0,0,0,.40);
}

.v9-tagline {
  display: block;
  font-family: var(--f-italic);
  font-style: italic;
  font-size: clamp(14px, 1.5vw, 20px);
  color: rgba(255,255,255,.70);
  letter-spacing: .02em;
  line-height: 1.4;
  margin-bottom: clamp(18px, 2.2vw, 28px);
  text-shadow: 0 1px 10px rgba(0,0,0,.50);
}

.v9-desc {
  font-family: var(--f-sans);
  font-size: clamp(10.5px, .82vw, 12.5px);
  color: rgba(255,255,255,.45);
  letter-spacing: .072em;
  line-height: 2.1;
  margin: 0 0 clamp(20px, 2.4vw, 32px);
}

.v9-meta {
  display: flex;
  gap: clamp(22px, 3vw, 42px);
  margin-bottom: clamp(22px, 2.6vw, 36px);
  padding-top: clamp(14px, 1.6vw, 22px);
  border-top: 1px solid rgba(196,160,81,.15);
}

.v9-meta__label {
  display: block;
  font-family: var(--f-sans);
  font-size: 7.5px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(196,160,81,.48);
  margin-bottom: 6px;
}

.v9-meta__val {
  display: block;
  font-family: var(--f-sans);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.50);
  line-height: 1.7;
}

.v9-footer {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.v9-price {
  font-family: var(--f-serif);
  font-size: clamp(17px, 1.7vw, 24px);
  color: #ffffff;
  letter-spacing: .05em;
  white-space: nowrap;
}

.v9-cta {
  display: inline-block;
  font-family: var(--f-sans);
  font-size: 8.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #0A0806;
  background: var(--c-gold);
  padding: 13px 24px;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background .5s cubic-bezier(.25,.46,.45,.94),
    box-shadow  .5s cubic-bezier(.25,.46,.45,.94),
    transform   .5s cubic-bezier(.25,.46,.45,.94);
}

.v9-cta:hover {
  background: #d4aa5c;
  box-shadow: 0 5px 40px rgba(196,160,81,.30), 0 0 18px rgba(196,160,81,.12);
  transform: translateY(-2px);
}

/* ─── BRIDGE — RESPIRATION AVANT LE COFFRET ─── */
.v9-bridge {
  text-align: center;
  padding: clamp(72px, 10vw, 128px) clamp(24px, 8vw, 80px);
  background: var(--c-bg);
}

.v9-bridge__label {
  display: block;
  font-family: var(--f-sans);
  font-size: 8.5px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--c-gold);
  opacity: 0;
  margin-bottom: clamp(14px, 1.6vw, 22px);
  transition: opacity 1s ease .1s, transform .9s ease .1s;
  transform: translateY(8px);
}

.v9-bridge__title {
  font-family: var(--f-serif);
  font-size: clamp(28px, 3.6vw, 52px);
  font-weight: 400;
  color: var(--c-cream);
  letter-spacing: .01em;
  line-height: 1.12;
  margin: 0;
  opacity: 0;
  transition: opacity 1s ease .28s, transform .9s ease .28s;
  transform: translateY(8px);
}

.v9-bridge.is-visible .v9-bridge__label,
.v9-bridge.is-visible .v9-bridge__title {
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════════
   V9 MOBILE — Bannières paysage premium (400-500px)
   Format horizontal : tiers gauche = texte, tiers droit = flacon
   Ratio visuel ~4:3 — JAMAIS 100vh ni aspect-ratio 9:16

   Calcul image : 1536×1024 → scale hauteur 430px → rendu 645×430
   Overflow horizontal = 270px
   object-position X% → décalage = X% × 270px
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── Base panel : bannière compacte paysage ── */
  .v9-panel {
    height: clamp(400px, 112vw, 500px) !important;
    min-height: 0 !important;
    background: #080808;
    margin-bottom: 0;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    overflow: hidden;
    position: relative;
  }

  /* Chevauchements desktop annulés, stacking context préservé */
  .v9-panel--01 { z-index: 1; margin-top: 0 !important; }
  .v9-panel--02 { z-index: 2; margin-top: 0 !important; }
  .v9-panel--03 { z-index: 3; margin-top: 0 !important; }
  .v9-panel--04 { z-index: 4; margin-top: 0 !important; }

  /* ── Image : couvre exactement la bannière, sans parallax ── */
  .v9-panel__bg {
    inset: 0 !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    transform: none !important;
  }
  .v9-panel__bg img { animation: none !important; }

  /* ── COMPOSITION PAR SENTEUR ──
     Objectif : flacon entier sur le tiers droit, décor visible à gauche
     Valeurs de départ — ajustables visuellement senteur par senteur
  */
  .v9-panel--01 .v9-panel__bg img { object-position: 60% 50%; }
  .v9-panel--02 .v9-panel__bg img { object-position: 58% 50%; }
  .v9-panel--03 .v9-panel__bg img { object-position: 58% 50%; }
  .v9-panel--04 .v9-panel__bg img { object-position: 58% 50%; }

  /* ── ::before — transitions cinématiques desktop supprimées ──
     Elles créaient des bandes noires entre les bannières compactes.
  */
  .v9-panel--01::before,
  .v9-panel--02::before,
  .v9-panel--03::before,
  .v9-panel--04::before {
    content: none !important;
    display: none !important;
    background: none !important;
  }

  /* ── ::after — dégradé gauche + bas (lisibilité texte uniquement) ──
     Gauche (90deg) : zone texte assombrie, flacon et décor clairs
     Bas   (0deg)  : pied discret, transition vers la carte suivante
     Aucune teinte : l'univers vient de la photographie, pas du voile
  */
  .v9-panel--01::after,
  .v9-panel--02::after,
  .v9-panel--03::after,
  .v9-panel--04::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    height: auto !important;
    width: auto !important;
    background:
      linear-gradient(
        90deg,
        rgba(6,5,4,.62)   0%,
        rgba(6,5,4,.34)  34%,
        rgba(6,5,4,.06)  60%,
        transparent      76%
      ),
      linear-gradient(
        0deg,
        rgba(5,4,3,.58)   0%,
        rgba(5,4,3,.12)  38%,
        transparent      65%
      ) !important;
    pointer-events: none !important;
    z-index: 1 !important;
  }

  /* ── Texte : ancré bas-gauche, dans la zone de dégradé ── */
  .v9-panel__text {
    position: absolute !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: auto !important;
    transform: none !important;
    width: min(47%, 280px) !important;
    max-width: none !important;
    padding: 0 0 28px 22px !important;
    text-align: left !important;
    z-index: 4 !important;
    opacity: 0;
    transition: opacity .85s cubic-bezier(.25,.46,.45,.94);
  }
  .v9-panel__text.is-visible { opacity: 1; }

  .v9-panel--01 .v9-panel__text,
  .v9-panel--02 .v9-panel__text,
  .v9-panel--03 .v9-panel__text,
  .v9-panel--04 .v9-panel__text {
    left: 0 !important;
    right: auto !important;
    padding-left: 22px !important;
    padding-right: 0 !important;
    text-align: left !important;
  }

  /* Desc + meta masquées */
  .v9-panel .v9-desc,
  .v9-panel .v9-meta { display: none !important; }

  /* ── Typographie ── */
  .v9-num {
    color: rgba(196,160,81,.95) !important;
    font-size: 8px !important;
    letter-spacing: .16em !important;
    margin-bottom: 4px;
    display: block !important;
  }
  .v9-name {
    color: #ffffff !important;
    font-size: clamp(28px, 7.5vw, 40px) !important;
    line-height: 1.0 !important;
    margin-bottom: 5px !important;
    text-shadow:
      0 2px 24px rgba(0,0,0,.96),
      0 1px 8px rgba(0,0,0,.88),
      0 0    3px rgba(0,0,0,.72) !important;
  }
  /* Cerisier Poudré : évite rupture sur 3 lignes dans la zone de 47% */
  .v9-panel--04 .v9-name {
    font-size: clamp(23px, 6vw, 32px) !important;
  }
  .v9-tagline {
    color: rgba(255,255,255,.88) !important;
    font-size: clamp(9.5px, 2.8vw, 12px) !important;
    line-height: 1.4 !important;
    margin-bottom: 10px !important;
    text-shadow:
      0 1px 14px rgba(0,0,0,.92),
      0 0    5px rgba(0,0,0,.70) !important;
  }
  .v9-price {
    color: #ffffff !important;
    font-size: clamp(10px, 3vw, 13px) !important;
    text-shadow: 0 1px 12px rgba(0,0,0,.90) !important;
    white-space: nowrap;
    display: block !important;
    margin-bottom: 0 !important;
  }
  .v9-footer {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    margin-top: 8px !important;
  }
  .v9-cta {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 36px !important;
    width: auto !important;
    max-width: 100% !important;
    white-space: nowrap;
    padding: 0 16px !important;
    font-size: 6.5px !important;
  }

  /* Bridge mobile */
  .v9-bridge { padding: clamp(56px, 12vw, 88px) 24px; }
}

/* ═══════════════════════════════════════════════════════════════
   TRANSITIONS PREMIUM MOBILE — Continuité cinématographique
   Signatures Élixirs & Rituel CARAT
   Ajout après le bloc v9 pour surcharger content:none par cascade.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── Sig-header : désactiver le mask-image desktop ──
     Sur desktop le panel 01 remonte par -220px sous le header (dissolve).
     Sur mobile il n'y a plus ce chevauchement → mask crée une zone
     transparente exposant le fond sombre (#0E0B07) = bande noire parasite.
  */
  .v8-sig-header {
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  /* ── v9-panel ::before — voile supérieur + fondu bas teinté ──
     Surcharge le "content: none !important" du bloc précédent.
     Deux couches par senteur :
       1. Top : fondu très léger (28px) depuis le header vers l'image
       2. Bottom : fondu teinté (80px) vers la couleur de la section suivante
     z-index: 2 → au-dessus de l'image (z:0) et du ::after (z:1),
     sous le texte (z:4).
  */

  /* Correction subpixel : ferme le seam 1px entre panneaux */
  .v9-panel--02,
  .v9-panel--03,
  .v9-panel--04 {
    margin-top: -1px !important;
  }

  /* 01 Velours Sucré → Perle d'Azur : bleu nuit désaturé */
  .v9-panel--01::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    background:
      linear-gradient(to bottom,
        rgba(7,6,5,.32)  0%,
        rgba(7,6,5,.10)  6%,
        transparent     16%
      ),
      linear-gradient(to bottom,
        transparent        74%,
        rgba(8,11,20,.12)  82%,
        rgba(8,11,20,.42)  91%,
        rgba(8,11,20,.72) 100%
      ) !important;
    pointer-events: none !important;
    z-index: 2 !important;
  }

  /* 02 Perle d'Azur → Nectar Doré : ambre brun doré désaturé */
  .v9-panel--02::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    background:
      linear-gradient(to bottom,
        rgba(7,6,5,.48)   0%,
        rgba(7,6,5,.20)   7%,
        rgba(7,6,5,.05)  14%,
        transparent      20%
      ),
      linear-gradient(to bottom,
        transparent        74%,
        rgba(20,14,6,.12)  82%,
        rgba(20,14,6,.42)  91%,
        rgba(20,14,6,.72) 100%
      ) !important;
    pointer-events: none !important;
    z-index: 2 !important;
  }

  /* 03 Nectar Doré → Cerisier Poudré : vert profond naturel */
  .v9-panel--03::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    background:
      linear-gradient(to bottom,
        rgba(7,6,5,.48)  0%,
        rgba(7,6,5,.20)  7%,
        rgba(7,6,5,.05) 14%,
        transparent     20%
      ),
      linear-gradient(to bottom,
        transparent       74%,
        rgba(6,12,8,.12)  82%,
        rgba(6,12,8,.42)  91%,
        rgba(6,12,8,.72) 100%
      ) !important;
    pointer-events: none !important;
    z-index: 2 !important;
  }

  /* 04 Cerisier Poudré → section coffret : noir brun CARAT */
  .v9-panel--04::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    background:
      linear-gradient(to bottom,
        rgba(7,6,5,.48)  0%,
        rgba(7,6,5,.20)  7%,
        rgba(7,6,5,.05) 14%,
        transparent     20%
      ),
      linear-gradient(to bottom,
        transparent      74%,
        rgba(8,6,4,.12)  82%,
        rgba(8,6,4,.42)  91%,
        rgba(8,6,4,.72) 100%
      ) !important;
    pointer-events: none !important;
    z-index: 2 !important;
  }

  /* ── Rituel CARAT — séquence continue, fondu cinématographique ──
     Extension du ::after sur toute la hauteur (inset:0) pour gérer
     le fondu supérieur ET inférieur en une seule couche.
     Noir brun ultra-léger : même univers chaud entre les trois étapes.
     z-index: 3 → au-dessus du ::before lecture (z:2), sous le texte (z:4).
  */
  .v6-step--01::after {
    inset: 0 !important;
    height: auto !important;
    background:
      linear-gradient(to bottom,
        rgba(7,6,5,.26)   0%,
        rgba(7,6,5,.07)   5%,
        transparent      14%
      ),
      linear-gradient(to bottom,
        transparent        72%,
        rgba(10,7,4,.16)  84%,
        #0A0704          100%
      ) !important;
  }
  .v6-step--02::after {
    inset: 0 !important;
    height: auto !important;
    background:
      linear-gradient(to bottom,
        rgba(7,6,5,.26)   0%,
        rgba(7,6,5,.07)   5%,
        transparent      14%
      ),
      linear-gradient(to bottom,
        transparent        72%,
        rgba(17,8,5,.16)  84%,
        #110805          100%
      ) !important;
  }
  .v6-step--03::after {
    inset: 0 !important;
    height: auto !important;
    background:
      linear-gradient(to bottom,
        rgba(7,6,5,.26)   0%,
        rgba(7,6,5,.07)   5%,
        transparent      14%
      ),
      linear-gradient(to bottom,
        transparent        70%,
        rgba(12,9,6,.16)  83%,
        #0C0906          100%
      ) !important;
  }
}

/* ============================================================
   V10 — RYTHME & CONVERSION — Août 2026
   CTAs discrets, lifestyle salon, respiration Pourquoi CARAT,
   fumée subtile step 02, hauteur mobile accélérée
   ============================================================ */

/* ── Fumée subtile sur "Laissez diffuser" (step 02) ───────── */
.v6-step--02 .v6-step__bg {
  animation: v6SmokeFloat 28s ease-in-out infinite alternate;
}
@keyframes v6SmokeFloat {
  from { transform: scale(1.00) translateY(0%); }
  to   { transform: scale(1.04) translateY(-0.8%); }
}

/* ── CTA subtil dans les étapes 01 et 02 ─────────────────── */
.v6-step__cta--subtle {
  display: inline-block;
  margin-top: clamp(16px,2.5vh,28px);
  font-family: var(--f-sans);
  font-size: 9px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(196,160,81,.60);
  text-decoration: none;
  border-bottom: 1px solid rgba(196,160,81,.18);
  padding-bottom: 3px;
  transition: color .3s, border-color .3s;
}
.v6-step__cta--subtle:hover {
  color: var(--c-gold);
  border-color: rgba(196,160,81,.55);
}

/* ── v6-respiration — CTA lifestyle ──────────────────────── */
.v6-respiration__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.v6-respiration__cta {
  display: inline-block;
  font-family: var(--f-sans);
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(255,255,255,.68);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.24);
  padding-bottom: 4px;
  transition: color .3s, border-color .3s;
}
.v6-respiration__cta:hover {
  color: #FAF7F2;
  border-color: rgba(255,255,255,.60);
}

/* ── v3-confiance (Pourquoi CARAT) — plus de respiration ─── */
.v3-confiance {
  padding: clamp(80px,11vw,130px) clamp(24px,6vw,100px) clamp(72px,9vw,110px) !important;
}
.v3-confiance > .v3-label {
  font-size: 11px !important;
  letter-spacing: .26em !important;
  margin-bottom: clamp(52px,7vw,80px) !important;
}
.v3-confiance__num {
  font-size: clamp(28px,3.8vw,52px) !important;
  margin-bottom: 18px !important;
}
.v3-confiance__lbl {
  font-size: 10px !important;
  line-height: 2.1 !important;
}

/* CTA à la fin de la section Pourquoi CARAT */
.v3-confiance__footer-cta {
  position: relative;
  z-index: 2;
  text-align: center;
  margin-top: clamp(52px,7vw,80px);
}
.v3-confiance__footer-cta a {
  display: inline-block;
  font-family: var(--f-sans);
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(196,160,81,.72);
  text-decoration: none;
  border-bottom: 1px solid rgba(196,160,81,.24);
  padding-bottom: 4px;
  transition: color .3s, border-color .3s;
}
.v3-confiance__footer-cta a:hover {
  color: var(--c-gold);
  border-color: var(--c-gold);
}

/* Mobile adjustments */
@media (max-width: 767px) {
  .v3-confiance {
    padding: clamp(60px,16vw,88px) 24px clamp(56px,14vw,80px) !important;
  }
  .v3-confiance__footer-cta {
    margin-top: clamp(40px,10vw,56px);
  }
  .v6-respiration {
    height: 60svh !important;
    min-height: 360px !important;
  }
}