/* ============================================================
   HOMEPAGE V11 — Refonte éditoriale complète · Août 2026
   Référence : Hero daccueil objectif.png
   Esprit    : Diptyque × Aesop × Loewe × Apple × Byredo
   Mobile-first · cinématographique · zéro bloc Shopify
   ============================================================ */

:root {
  --v11-noir:    #0A0704;
  --v11-noir-2:  #0D0906;
  --v11-ivoire:  #F7F2EA;
  --v11-or:      #C9A24D;
  --v11-or-doux: rgba(201,162,77,.72);
}

/* ── Sections remplacées par la V11 ─────────────────────── */
.hp-hero,
.v6-rituel,
.v6-respiration,
.v3-confiance,
.v4-focus,
.v8-sig-header {
  display: none !important;
}

body { background: var(--v11-noir) !important; }

/* ── Utilitaires V11 ────────────────────────────────────── */
.v11-eyebrow {
  display: block;
  font-family: var(--f-sans);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: .30em;
  text-transform: uppercase;
  color: var(--v11-or);
  opacity: .9;
}

/* ── Actions du hero ──────────────────────────────────────────
   Deux chemins, deux poids. Le primaire (Signature) est plein :
   c'est lui qui porte la conversion. Le secondaire garde le lien
   souligné de la maison. Empilés sur mobile, alignés au-delà. */
.v11-hero__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
@media (min-width: 720px) {
  .v11-hero__actions { flex-direction: row; align-items: center; gap: 28px; }
}

.v11-cta {
  display: inline-block;
  font-family: var(--f-sans);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--v11-or);
  text-decoration: none;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(201,162,77,.32);
  transition: color .5s ease, border-color .5s ease, letter-spacing .5s ease;
}
.v11-cta:hover {
  color: #E4C880;
  border-color: rgba(201,162,77,.85);
  letter-spacing: .29em;
}

/* Variante pleine. Texte noir sur champagne : contraste 7,2:1. */
.v11-cta--plein {
  padding: 15px 26px;
  background: var(--v11-or);
  color: #14110E;
  border: 1px solid var(--v11-or);
  border-bottom-color: var(--v11-or);
  transition: background .4s ease, transform .18s ease, letter-spacing .4s ease;
}
.v11-cta--plein:hover { background: #D8B463; border-color: #D8B463; color: #14110E; }
.v11-cta--plein:active { transform: translateY(1px); }

.v11-cta--ghost { color: var(--v11-ivoire); border-bottom-color: rgba(247,242,234,.28); }
.v11-cta--ghost:hover { color: var(--v11-ivoire); border-bottom-color: rgba(247,242,234,.6); }


/* Révélation au scroll — lente, opacity + translate */
.v11-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 1.5s cubic-bezier(.22,.61,.36,1),
              transform 1.5s cubic-bezier(.22,.61,.36,1);
}
.v11-reveal.is-in { opacity: 1; transform: none; }
.v11-reveal--d1 { transition-delay: .14s; }
.v11-reveal--d2 { transition-delay: .28s; }
.v11-reveal--d3 { transition-delay: .42s; }

@media (prefers-reduced-motion: reduce) {
  .v11-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ============================================================
   1 — HERO · Nectar Doré
   Le visuel a été composé avec une masse noire à gauche destinée
   à recevoir la typographie. On ne la remplit pas, on s'en sert.
   Mobile : image plein cadre, texte dans le noir en haut à gauche.
   Desktop : deux colonnes — le texte à gauche, la photographie à
   droite dans son format portrait d'origine, jamais rognée en
   paysage (ce qui couperait le produit).
   ============================================================ */
.v11-hero {
  position: relative;
  height: calc(100svh - 34px);
  min-height: 600px;
  max-height: 980px;
  overflow: hidden;
  background: #000;
  display: flex;
  align-items: flex-start;
  isolation: isolate;
}

.v11-hero__bg { position: absolute; inset: 0; z-index: 0; }
.v11-hero__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* 50% : le rognage horizontal n'est que de 20 % à ce ratio, et cette
     position garde le flacon entier tout en préservant le noir de gauche.
     Recalé par breakpoint plus bas. */
  object-position: 50% 50%;
  display: block;
}

/* Voile TRÈS localisé : la lumière champagne, la brume et les reflets du
   marbre doivent rester visibles. On assombrit seulement le haut gauche,
   là où la typographie se pose. Aucun aplat sur toute l'image. */
.v11-hero__veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(178deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.34) 26%, transparent 46%),
    linear-gradient(96deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.18) 34%, transparent 58%);
}

.v11-hero__inner {
  position: relative; z-index: 2;
  width: 100%;
  padding: clamp(104px,15vh,164px) clamp(22px,6vw,64px) 0;
  padding-left: calc(clamp(22px,6vw,64px) + env(safe-area-inset-left, 0px));
  max-width: 1440px;
  margin: 0 auto;
}

/* La colonne de texte n'occupe jamais toute la largeur : le produit doit
   continuer d'exister à droite. 64 % du viewport, plafonné pour que la
   ligne ne s'étire pas sur les grands mobiles. */
.v11-hero__inner > * { max-width: min(66vw, 330px); }

.v11-hero__marque {
  font-family: var(--f-serif);
  font-size: clamp(20px, 5.6vw, 26px);
  letter-spacing: .30em; text-indent: .30em;
  text-transform: uppercase;
  color: var(--v11-or);
  margin: 0;
}
.v11-hero__diamant {
  display: block; margin: 10px 0 0;
  font-size: 8px; color: var(--v11-or); opacity: .8;
}

/* ── Le titre ─────────────────────────────────────────────────
   Playfair Display, la serif de la marque. Cormorant 300 avait été
   essayé : plus fin, mais il perd son autorité à cette taille et lit
   moins cher. Playfair porte le contraste pleins/déliés ET la présence.

   Le titre se lit en TROIS temps, pas en un bloc :
     « Une maison »  ·  « ne se voit pas. »  ·  « Elle se ressent. »
   Les deux premiers sont serrés par l'interlignage ; le troisième est
   détaché par une vraie respiration. */
.v11-hero__title {
  font-family: var(--f-serif);           /* Playfair Display */
  font-weight: 400;
  font-size: clamp(32px, 8.7vw, 62px);
  line-height: 1.12;
  letter-spacing: -.004em;
  color: var(--v11-ivoire);
  margin: 0;
  text-wrap: balance;
  text-shadow: 0 2px 30px rgba(0,0,0,.55);
}
.v11-hero__title span { display: block; }
/* L'italique reste en Cormorant : sa finesse sert ici la hiérarchie,
   elle donne au 3e temps une voix distincte sans le rendre plus lourd. */
.v11-hero__title em {
  display: block;
  margin-top: clamp(10px, 1.5vh, 16px);   /* proximité : c'est une seule phrase */
  font-family: var(--f-italic);
  font-style: italic;
  font-weight: 400;
  font-size: 1.06em;
  letter-spacing: -.004em;
  color: var(--v11-or);
}

/* ── Le filet ─────────────────────────────────────────────────
   Grande respiration avant, petite après : c'est l'écart inégal
   qui crée le rythme, pas la répétition d'une même valeur. */
.v11-hero__fil {
  display: block; width: 40px; height: 1px;
  margin: clamp(62px, 8.6vh, 92px) 0 clamp(20px, 2.6vh, 26px);
  background: var(--v11-or); opacity: .5;
}

/* ── La signature de campagne ─────────────────────────────────
   Ce n'est pas un second titre : petite, très espacée, atténuée.
   Le contraste serif éditorial / petites capitales sans-serif porte
   à lui seul la hiérarchie. */
.v11-hero__sub {
  font-family: var(--f-sans);
  font-weight: 400;
  font-size: clamp(9.8px, 2.6vw, 12px);
  line-height: 2;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: rgba(247,242,234,.94);
  margin: 0;
  /* Ombre de lisibilité sur la photographie, pas un halo décoratif. */
  text-shadow: 0 1px 10px rgba(0,0,0,.7);
}

/* ── Les deux chemins ─────────────────────────────────────────
   Contrainte mesurée sur la page : le flacon commence à 62 % de la
   largeur du viewport, quel que soit le format (le recadrage `cover`
   est proportionnel). Le CTA doit donc tenir dans
       62vw − retrait gauche − marge noire visible
   soit environ 56vw − 24px. C'est une règle, pas un réglage à 390 px.

   Le bouton n'essaie pas d'avoir l'air luxueux : il l'est par ses
   proportions. Champagne mat désaturé, texte noir profond, aucune
   ombre, aucun dégradé, aucun reflet, coins quasi droits. */
.v11-hero__actions {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: clamp(22px, 2.9vh, 28px);
  margin-top: clamp(74px, 10vh, 108px);   /* le vide qui précède la décision */
}
.v11-hero__actions .v11-cta { white-space: nowrap; }

.v11-hero__actions .v11-cta--plein {
  display: inline-flex; align-items: center; justify-content: center;
  width: auto; max-width: calc(56vw - 24px);
  min-height: 48px;
  padding: 0 20px;
  /* Champagne désaturé (S 33 % au lieu de 42 %) : la matière lit comme
     un métal mat, plus comme un aplat jaune. Le filet est volontairement
     plus lumineux que le fond — c'est lui qui fait l'arête, pas une ombre. */
  background: #B99E6D;
  color: #14110E;                         /* contraste 7,1:1 */
  border: 1px solid #CBB183;
  border-radius: 1px;
  box-shadow: none;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .17em;
  gap: 10px;
  transition: background 200ms ease, border-color 200ms ease, opacity 140ms ease;
}
/* La seule chose qui bouge au survol : la flèche, de 3 px. */
.v11-hero__actions .v11-cta i {
  font-style: normal; display: inline-block;
  transition: transform 200ms cubic-bezier(.22,.61,.36,1);
}
.v11-hero__actions .v11-cta:hover i { transform: translateX(3px); }
.v11-hero__actions .v11-cta--plein:hover {
  background: #C4A876; border-color: #D6BE90;   /* luminosité seule */
  color: #14110E;
}
.v11-hero__actions .v11-cta--plein:active { opacity: .9; transform: none; }

/* Le secondaire reste du texte. Aucun fond, aucun cadre, aucun effet,
   et une largeur nettement inférieure pour qu'il ne rivalise pas. */
.v11-hero__actions .v11-cta--ghost {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 0 0 6px;
  font-size: 8.8px;
  font-weight: 500;
  letter-spacing: .13em;
  color: rgba(247,242,234,.92);
  border-bottom: 1px solid rgba(203,177,131,.5);   /* filet champagne discret */
  transition: color 200ms ease, border-color 200ms ease;
}
.v11-hero__actions .v11-cta--ghost:hover {
  color: var(--v11-ivoire); border-bottom-color: rgba(203,177,131,.85);
}

/* ── Entrée : image posée, puis la promesse, puis les chemins ──
   Uniquement opacity et transform. Environ 900 ms au total. */
.v11-hero__in { opacity: 0; animation: v11-hero-in 620ms cubic-bezier(.22,.61,.36,1) 180ms both; }
.v11-hero__in--d1 { animation-delay: 340ms; }
.v11-hero__in--d2 { animation-delay: 520ms; }
.v11-hero__in--d3 { animation-delay: 680ms; }
@keyframes v11-hero-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.v11-hero__bg img { animation: v11-hero-fond 900ms ease both; }
@keyframes v11-hero-fond { from { opacity: 0 } to { opacity: 1 } }

@media (prefers-reduced-motion: reduce) {
  .v11-hero__in, .v11-hero__bg img {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
}

/* ── Petits mobiles ───────────────────────────────────────────
   Le titre descend d'un cran, mais le RYTHME est conservé : c'est
   l'alternance densité / vide qui fait la composition, pas la taille
   des caractères. L'ancienne règle écrasait ici les deux silences
   (14px et 12px) et retassait tout le bloc. */
@media (max-width: 380px) {
  .v11-hero__title { font-size: 30px; }
}

/* ── Desktop : deux colonnes ──────────────────────────────────
   La photographie est un portrait (0,582). L'étaler en pleine largeur
   paysage la rognerait verticalement et couperait le produit. On lui
   donne donc sa propre colonne, où le rognage reste modeste. */
@media (min-width: 900px) {
  .v11-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    height: calc(100svh - 34px);
    max-height: none;
    overflow: hidden;
  }
  .v11-hero__bg {
    position: relative; inset: auto;
    grid-column: 2; grid-row: 1;
    height: 100%; overflow: hidden;
  }
  .v11-hero__bg img {
    width: 100%; height: 100%;
    object-fit: cover;
    /* Rognage vertical d'environ 31 % à cette largeur de colonne :
       le produit (37 % → 80 % de la source) reste entier. */
    object-position: 50% 52%;
  }
  /* Le fondu se fait DANS la colonne image, vers la gauche, pour souder
     la photographie au noir du texte sans aplat sur toute la scène. */
  .v11-hero__veil {
    grid-column: 2; grid-row: 1;
    position: relative; inset: auto; margin: 0; width: 100%; height: 100%;
    background: linear-gradient(90deg,
      #000 0%, rgba(0,0,0,.86) 6%, rgba(0,0,0,.42) 18%, transparent 38%);
  }
  .v11-hero__inner {
    grid-column: 1; grid-row: 1;
    align-self: center;
    padding: 0 clamp(40px,5vw,88px);
    max-width: none;
  }
  .v11-hero__title { max-width: 12ch; }
  .v11-hero__sub   { white-space: normal; }
}

/* Les CTA ne doivent jamais casser sur deux lignes. */
.v11-hero__actions .v11-cta { white-space: nowrap; }

/* ============================================================
   2 — BARRE AVANTAGES · fond noir, 4 colonnes
   ============================================================ */
.v11-bar {
  position: relative;
  z-index: 3;
  background: var(--v11-noir);
  padding: clamp(30px,6vw,56px) clamp(14px,4vw,64px);
}
/* 4 colonnes dès le mobile, séparateurs verticaux — comme la maquette */
.v11-bar__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 1180px;
  margin: 0 auto;
}
.v11-bar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 clamp(4px,1.6vw,26px);
}
.v11-bar__item + .v11-bar__item {
  border-left: 1px solid rgba(201,162,77,.20);
}

.v11-bar__icon {
  width: clamp(15px,4.2vw,20px);
  height: clamp(15px,4.2vw,20px);
  stroke: var(--v11-or);
  fill: none;
  stroke-width: 1.1;
  margin-bottom: clamp(9px,2.4vw,18px);
  opacity: .92;
}
.v11-bar__val {
  font-family: var(--f-sans);
  font-size: clamp(9.5px,2.7vw,14px);
  font-weight: 500;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--v11-or);
  margin-bottom: clamp(6px,1.6vw,9px);
  white-space: nowrap;
}
.v11-bar__lbl {
  font-family: var(--f-sans);
  font-size: clamp(6.8px,1.9vw,9.5px);
  font-weight: 300;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.75;
  color: rgba(247,242,234,.55);
}

/* ============================================================
   3 — LE RITUEL CARAT · titre + slider vertical
   ============================================================ */
.v11-rituel {
  position: relative;
  background: var(--v11-noir);
  isolation: isolate;
  overflow: hidden;
}

.v11-rituel__head {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: clamp(78px,17vw,140px) clamp(24px,6vw,64px) clamp(52px,11vw,84px);
}
.v11-rituel__head .v11-eyebrow { margin-bottom: clamp(24px,4.5vw,34px); }

.v11-rituel__title {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(32px,8.6vw,62px);
  line-height: 1.14;
  letter-spacing: -.01em;
  color: var(--v11-ivoire);
  margin: 0;
}
.v11-rituel__title em {
  display: block;
  font-family: var(--f-italic);
  font-style: italic;
  font-weight: 300;
  color: var(--v11-or);
}

/* ── Le slider ──────────────────────────────────────────── */
.v11-slider {
  position: relative;
  height: clamp(480px,82svh,720px);
  overflow: hidden;
  touch-action: pan-y;
}

/* Fond du carrousel · 08/09/2026 ────────────────────────────
   Les trois photos se croisent en fondu : à mi-parcours les deux
   sont semi-transparentes, et c'est le noir structurel de la section
   (#0A0704) qui passait entre elles — une image semblait apparaître
   au-dessus d'un canvas noir. Teinte dérivée de la moyenne réelle des
   trois images (#594029), ramenée à 38 % pour rester plus sombre. */
.v11-slider { background: #21180F; }

.v11-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.15s cubic-bezier(.4,0,.2,1),
              visibility 0s linear 1.15s;
}
.v11-slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 1;                    /* l'entrant passe AU-DESSUS du sortant */
  transition: opacity 1.15s cubic-bezier(.4,0,.2,1),
              visibility 0s linear 0s;
}

.v11-slide__bg { position: absolute; inset: 0; z-index: 0; }
.v11-slide__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.04);
  transition: transform 6s cubic-bezier(.25,.46,.45,.94);
}
.v11-slide.is-active .v11-slide__bg img { transform: scale(1.00); }

/* Ancrages mobiles calculés (base 390 × 844, slider ≈ 692px de haut)
   01 · 1086×1448 — flacon rendu 110px (28%), bord droit à 368px, texte 0→258
   02 · 1408×1117 — brume dorée conservée à gauche, rayons de lumière à droite
   03 · 1536×1024 — rideaux lumineux + canapé cadrés, table marbre au premier plan */
.v11-slide--01 .v11-slide__bg img { object-position: 71% center; }
.v11-slide--02 .v11-slide__bg img { object-position: 46% center; }
.v11-slide--03 .v11-slide__bg img { object-position: 62% center; }

/* Voile : fondu haut (raccord avec le titre) + lisibilité gauche/bas */
.v11-slide__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to bottom,
      var(--v11-noir)   0%,
      rgba(10,7,4,.42) 10%,
      transparent      26%),
    linear-gradient(95deg,
      rgba(6,4,2,.82)  0%,
      rgba(6,4,2,.50) 34%,
      rgba(6,4,2,.12) 64%,
      transparent     84%),
    linear-gradient(to bottom,
      transparent      62%,
      rgba(8,5,3,.55) 88%,
      rgba(10,7,4,.86) 100%);
}

/* Contenu de l'étape */
.v11-slide__content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center;
  gap: clamp(20px,5vw,44px);
  padding: 0 clamp(24px,6vw,80px);
  max-width: 1320px;
  margin: 0 auto;
}

/* Rail vertical des numéros — 01 / 02 / 03 */
.v11-rail {
  position: absolute;
  z-index: 3;
  left: clamp(24px,6vw,80px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(26px,5vh,40px);
  pointer-events: none;
}
.v11-rail__num {
  font-family: var(--f-sans);
  font-size: clamp(13px,3.6vw,16px);
  font-weight: 300;
  letter-spacing: .06em;
  color: rgba(247,242,234,.26);
  transition: color .8s ease;
  position: relative;
}
.v11-rail__num.is-on { color: var(--v11-ivoire); }
/* Point doré à gauche du numéro actif */
.v11-rail__num.is-on::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--v11-or);
  transform: translate(-50%,-50%) translateX(-19px);
  box-shadow: 0 0 12px rgba(201,162,77,.85);
}
.v11-rail__line {
  width: 1px;
  height: clamp(30px,6vh,48px);
  background: linear-gradient(to bottom,
    rgba(247,242,234,.30),
    rgba(247,242,234,.08));
}

/* Texte de l'étape — décalé à droite du rail */
/* Texte confiné à gauche du rail — ne recouvre jamais le flacon */
.v11-slide__text {
  margin-left: clamp(40px,10vw,110px);
  max-width: min(52%, 300px);
}
.v11-slide__title {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(29px,7.6vw,56px);
  line-height: 1.06;
  letter-spacing: -.01em;
  color: var(--v11-ivoire);
  margin: 0 0 clamp(16px,2.8vh,24px);
  text-shadow: 0 2px 30px rgba(0,0,0,.6);
}
.v11-slide__body {
  font-family: var(--f-sans);
  font-size: clamp(11.5px,3.1vw,14px);
  font-weight: 300;
  line-height: 2.05;
  letter-spacing: .035em;
  color: rgba(247,242,234,.70);
  margin: 0;
  text-shadow: 0 1px 16px rgba(0,0,0,.7);
}

/* Indicateurs — points en bas */
.v11-dots {
  position: absolute;
  z-index: 4;
  bottom: clamp(30px,5.5vh,52px);
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.v11-dots::before,
.v11-dots::after {
  content: '';
  width: clamp(30px,9vw,64px);
  height: 1px;
  background: rgba(247,242,234,.16);
}
.v11-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 1px solid rgba(247,242,234,.42);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background .6s ease, border-color .6s ease, transform .6s ease;
}
.v11-dot.is-on {
  background: var(--v11-or);
  border-color: var(--v11-or);
  transform: scale(1.15);
  box-shadow: 0 0 14px rgba(201,162,77,.6);
}

/* ============================================================
   4 — NOS SIGNATURES · grande image + titre + CTA
   ============================================================ */
.v11-signatures {
  position: relative;
  height: clamp(500px,78svh,760px);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--v11-noir);
  isolation: isolate;
}

.v11-signatures__bg { position: absolute; inset: 0; z-index: 0; }
/* Visuel lifestyle sans produit : le texte centré ne masque jamais un flacon.
   1536×1024 — ancrage 42% pour cadrer le voilage lumineux et le marbre. */
.v11-signatures__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 42% center;
  display: block;
}

/* Image très lumineuse → voile central appuyé pour le texte ivoire */
.v11-signatures__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to bottom,
      var(--v11-noir)   0%,
      rgba(10,7,4,.52) 11%,
      rgba(10,7,4,.20) 24%,
      transparent      38%),
    linear-gradient(to bottom,
      transparent      60%,
      rgba(10,7,4,.46) 84%,
      var(--v11-noir) 100%),
    radial-gradient(ellipse 92% 58% at 50% 48%,
      rgba(6,4,2,.74) 0%,
      rgba(6,4,2,.52) 42%,
      rgba(6,4,2,.20) 74%,
      transparent    100%);
}

.v11-signatures__inner {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 clamp(24px,7vw,80px);
}
.v11-signatures__inner .v11-eyebrow { margin-bottom: clamp(26px,4.6vw,36px); }

.v11-signatures__title {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(34px,9.2vw,68px);
  line-height: 1.12;
  letter-spacing: -.012em;
  color: var(--v11-ivoire);
  margin: 0 0 clamp(34px,5.5vw,50px);
  text-shadow: 0 2px 36px rgba(0,0,0,.62);
}
.v11-signatures__title em {
  display: block;
  font-family: var(--f-italic);
  font-style: italic;
  font-weight: 300;
  color: rgba(247,242,234,.94);
}

/* Raccord vers les panneaux signatures qui suivent */
.v8-signatures { background: var(--v11-noir); }

/* ============================================================
   V12 — LES 4 SIGNATURES · visuels panoramiques éditoriaux
   Images 16:9 composées pour recevoir le texte :
   moitié gauche vide, flacon à droite, jamais recadrées.
   Mobile  : image entière en haut, texte dessous
   Desktop : image pleine largeur, texte posé dans le vide
   ============================================================ */

.v9-bridge { display: none !important; }

.v12-sig {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--v12-bg);
  isolation: isolate;
}

/* ── Révélation · 08/09/2026 ──────────────────────────────────
   Le bloc partait de opacity:0 + translateY(30px) sur un parent noir
   (#0A0704) : tant qu'il n'était pas révélé, c'est le fond structurel
   du site qu'on voyait à sa place. Avec un seuil d'observation de 15 %
   sur une carte de 842 px, 159 px de noir défilaient avant l'apparition.
   Le bloc est donc désormais TOUJOURS peint — il ne peut plus découvrir
   son parent — et la révélation se joue à l'intérieur, sur le contenu,
   au-dessus du fond propre de la carte. */
.v12-sig__inner > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .95s cubic-bezier(.22,.61,.36,1),
              transform .95s cubic-bezier(.22,.61,.36,1);
}
.v12-sig.is-in .v12-sig__inner > * { opacity: 1; transform: none; }
.v12-sig.is-in .v12-sig__inner > *:nth-child(2) { transition-delay: .07s; }
.v12-sig.is-in .v12-sig__inner > *:nth-child(3) { transition-delay: .13s; }
.v12-sig.is-in .v12-sig__inner > *:nth-child(4) { transition-delay: .18s; }
.v12-sig.is-in .v12-sig__inner > *:nth-child(n+5) { transition-delay: .22s; }

/* Filet de sécurité : sans JavaScript, aucun observateur ne pose is-in.
   Le contenu doit rester lisible, la révélation est un agrément. */
.no-js .v12-sig__inner > * { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .v12-sig__inner > * { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ── Identité de chaque senteur ──────────────────────────────
   --v12-edge : couleur relevée sur le bas de l'image MOBILE
   --v12-bg   : même teinte assombrie, où le texte se pose
   Le bloc texte prolonge la chute de lumière de la photo.    */
.v12-sig--01 { --v12-edge: #54362B; --v12-bg: #33211B; --v12-glow: rgba(224,186,166,.13); }
.v12-sig--02 { --v12-edge: #51565C; --v12-bg: #2B2E31; --v12-glow: rgba(178,206,224,.13); }
.v12-sig--03 { --v12-edge: #6A5030; --v12-bg: #38291A; --v12-glow: rgba(217,185,120,.15); }
/* 04 = Musc de Soie depuis le 11/09/2026 : bas de sa photo mobile #453A3B
   (avant : #52272E, Cerisier Poudré). Fond = même teinte à ~56 %. */
.v12-sig--04 { --v12-edge: #453A3B; --v12-bg: #272021; --v12-glow: rgba(212,194,204,.13); }

/* ── Visuel — jamais recadré ─────────────────────────────────
   Deux jeux d'images, deux compositions distinctes :
   · mobile  928×1152 (4:5)  — chapitre vertical, flacon grand
   · desktop 1376×768 (16:9) — panoramique, texte dans le vide
   Le cadre adopte le ratio natif de chacun + `contain` :
   aucun rognage possible, flacon toujours entier.            */
.v12-sig__visual {
  position: relative;
  width: 100%;
  aspect-ratio: 928 / 1152;
  background: var(--v12-bg);
}
.v12-sig__visual { overflow: hidden; }
.v12-sig__visual picture { display: block; position: absolute; inset: 0; }
.v12-sig__visual img { position: absolute; inset: 0; }
.v12-sig__visual img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  transform: scale(1.001);
  transition: transform 1.8s cubic-bezier(.22,.61,.36,1);
}

/* Raccord image → texte : la lumière du bas de la photo se prolonge */
.v12-sig__visual::after {
  content: '';
  position: absolute;
  inset: auto 0 -1px 0;
  height: 16%;
  background: linear-gradient(to bottom, transparent, var(--v12-edge));
  pointer-events: none;
}

/* ── Bloc texte ──────────────────────────────────────────── */
.v12-sig__body {
  position: relative;
  background: linear-gradient(to bottom,
    var(--v12-edge)  0%,
    var(--v12-bg)   32%,
    var(--v12-bg)  100%);
  padding: clamp(34px,8vw,60px) clamp(26px,7vw,54px) clamp(50px,12vw,74px);
}
.v12-sig__body::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 20% 0%, var(--v12-glow), transparent 72%);
  pointer-events: none;
}
.v12-sig__inner { position: relative; z-index: 1; }

.v12-sig__num {
  display: block;
  font-family: var(--f-sans);
  font-size: 9px;
  letter-spacing: .30em;
  text-transform: uppercase;
  color: rgba(233,207,150,.90);
  margin-bottom: clamp(14px,3vw,20px);
}

.v12-sig__name {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(33px,9vw,58px);
  line-height: 1.04;
  letter-spacing: -.012em;
  color: var(--v11-ivoire);
  margin: 0 0 clamp(12px,2.6vw,18px);
  text-shadow: 0 2px 22px rgba(0,0,0,.35);
}

.v12-sig__sign {
  font-family: var(--f-sans);
  font-size: clamp(9.5px,2.6vw,11px);
  letter-spacing: .22em;
  text-transform: uppercase;
  line-height: 1.7;
  color: #E3C88E;
  margin: 0 0 clamp(18px,4vw,26px);
}

.v12-sig__desc {
  font-family: var(--f-sans);
  font-size: clamp(12.5px,3.3vw,14.5px);
  font-weight: 300;
  line-height: 1.95;
  letter-spacing: .012em;
  color: rgba(247,242,234,.72);
  margin: 0;
  max-width: 46ch;
}

.v12-sig__rule {
  height: 1px;
  background: rgba(247,242,234,.16);
  margin: clamp(26px,6vw,38px) 0 clamp(24px,5vw,34px);
}

/* ── Informations ────────────────────────────────────────── */
.v12-sig__meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px,5vw,44px);
}
.v12-sig__meta-item { display: flex; align-items: flex-start; gap: 11px; }
.v12-sig__icon {
  flex: 0 0 auto;
  width: 17px; height: 17px;
  margin-top: 1px;
  fill: none;
  stroke: #E3C88E;
  stroke-width: 1.1;
  stroke-linejoin: round;
  opacity: .9;
}
.v12-sig__meta-lbl {
  display: block;
  font-family: var(--f-sans);
  font-size: 8.5px;
  letter-spacing: .20em;
  text-transform: uppercase;
  color: rgba(233,207,150,.82);
  margin-bottom: 6px;
}
.v12-sig__meta-val {
  display: block;
  font-family: var(--f-sans);
  font-size: clamp(11px,2.9vw,12.5px);
  font-weight: 300;
  line-height: 1.65;
  color: rgba(247,242,234,.85);
}

/* ── Prix + CTA ──────────────────────────────────────────── */
.v12-sig__foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(20px,4.5vw,28px);
  margin-top: clamp(30px,7vw,44px);
}
.v12-sig__price {
  font-family: var(--f-serif);
  font-size: clamp(24px,6vw,32px);
  color: var(--v11-ivoire);
  line-height: 1;
}
.v12-sig__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 clamp(24px,6vw,34px);
  border-radius: 2px;
  background: linear-gradient(180deg, #C9A24D, #B58F3D);
  color: #1A1206;
  font-family: var(--f-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .20em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 8px 26px -12px rgba(0,0,0,.7);
  transition: background .45s ease, box-shadow .45s ease;
}
.v12-sig__cta span { transition: transform .45s cubic-bezier(.22,.61,.36,1); }
.v12-sig__cta:hover {
  background: linear-gradient(180deg, #D8B463, #C09846);
  box-shadow: 0 14px 32px -12px rgba(0,0,0,.75);
}
.v12-sig__cta:hover span { transform: translateX(5px); }

@media (hover: hover) {
  .v12-sig:hover .v12-sig__visual img { transform: scale(1.022); }
}

/* ============================================================
   V12 — DESKTOP ≥ 900px
   L'image occupe toute la largeur ; le texte se pose dans le
   vide composé à gauche. Aucun recadrage : le cadre garde le
   ratio natif de la photo.
   ============================================================ */
@media (min-width: 900px) {
  .v12-sig { display: block; }

  .v12-sig__visual { aspect-ratio: 1376 / 768; }
  .v12-sig__visual::after { display: none; }

  /* Voile très léger à gauche — lisibilité sans ternir la scène */
  .v12-sig__visual::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(95deg,
      rgba(8,6,4,.58)  0%,
      rgba(8,6,4,.40) 26%,
      rgba(8,6,4,.14) 45%,
      transparent     60%);
  }

  .v12-sig__body {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    background: none;
    padding: 0 0 0 clamp(56px,7vw,120px);
  }
  .v12-sig__body::before { display: none; }

  /* Le texte reste dans la moitié gauche laissée vide */
  .v12-sig__inner { max-width: min(44%, 520px); }

  .v12-sig__name  { text-shadow: 0 2px 30px rgba(0,0,0,.55); }
  .v12-sig__desc  { color: rgba(247,242,234,.80); }

  .v12-sig__foot {
    flex-direction: row;
    align-items: center;
    gap: clamp(28px,3.5vw,48px);
  }
}

/* ============================================================
   5 — AVIS CLIENTS · basculés en noir CARAT
   La page entière devient un seul film sombre : plus aucune
   rupture crème entre les signatures et la preuve sociale.
   Placés APRÈS les panneaux (voir index.html) : on rassure
   une fois le désir installé, jamais avant.
   ============================================================ */
.v4-avis {
  background: var(--v11-noir) !important;
  position: relative;
  isolation: isolate;
  padding: clamp(74px,13vw,130px) clamp(24px,5vw,80px) clamp(80px,12vw,140px) !important;
}

/* Fondu haut : sortie douce du coffret vers les avis */
.v4-avis::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: clamp(70px,11vw,120px);
  background: linear-gradient(to bottom, rgba(6,4,2,.85), transparent);
  z-index: 0;
  pointer-events: none;
}
/* Fondu bas : entrée vers la suite, plus de crème */
.v4-avis::after {
  height: clamp(80px,12vw,130px) !important;
  background: linear-gradient(to bottom, transparent, var(--v11-noir)) !important;
}

.v4-avis__header,
.v4-avis__grid,
.v4-avis__footer { position: relative; z-index: 2; }

.v4-avis__header .v3-label {
  color: var(--v11-or) !important;
  opacity: .85 !important;
}
.v4-avis__title { color: var(--v11-ivoire) !important; }
.v4-avis__title em {
  font-family: var(--f-italic);
  font-style: italic;
  color: var(--v11-or) !important;
}

/* Cartes : filet doré à gauche sur fond noir, aucun rectangle */
.v4-avis__card {
  background: transparent !important;
  border-top: none !important;
  border-left: 1px solid rgba(201,162,77,.34) !important;
}
.v4-avis__quote   { color: rgba(247,242,234,.90) !important; }
.v4-avis__product { color: var(--v11-or) !important; opacity: .78 !important; }
.v4-avis__author  { color: rgba(247,242,234,.44) !important; }
.v4-avis__verified{ color: rgba(201,162,77,.62) !important; }
.v4-avis__stars,
.v4-avis__stars-total { color: var(--v11-or) !important; }

.v4-avis__footer {
  border-top: 1px solid rgba(201,162,77,.18) !important;
}
.v4-avis__summary { color: rgba(247,242,234,.48) !important; }
.v4-avis__score   { color: var(--v11-ivoire) !important; }

/* ============================================================
   V14 — LE COFFRET ÉLIXIRS · visuels lifestyle réalistes
   Réutilise l'architecture v8-coffret : seuls le cadrage, les
   fonds et les raccords changent.
   Mobile  : 1200×896 (4:3) puis texte · Desktop : 1376×768 (16:9)
   Jamais de recadrage : le cadre prend le ratio natif + contain.
   ============================================================ */
.v8-coffret {
  display: block !important;
  min-height: 0 !important;
  background: var(--v14-bg) !important;
  isolation: isolate;
  --v14-bg: #17120C;   /* brun très profond, relevé sur le bas des photos */
}

.v8-coffret__visual {
  position: relative;
  width: 100%;
  aspect-ratio: 1195 / 896;
  background: var(--v14-bg) !important;
  overflow: hidden;
}
.v8-coffret__visual { overflow: hidden; }
.v8-coffret__visual picture { display: block; position: absolute; inset: 0; }
.v8-coffret__visual img { position: absolute; inset: 0; }
.v8-coffret__visual img {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  object-position: center;
  padding: 0 !important;
  display: block;
}

/* Fondu colorimétrique image → bloc texte, aucune coupure franche */
.v8-coffret__visual::after {
  content: '';
  position: absolute;
  inset: auto 0 -1px 0;
  height: 24%;
  background: linear-gradient(to bottom, transparent, var(--v14-bg));
  pointer-events: none;
}

.v8-coffret__content {
  position: relative;
  border-left: none !important;
  padding: clamp(6px,2vw,16px) clamp(26px,7vw,54px)
           clamp(56px,13vw,80px) !important;
  background: var(--v14-bg);
}

.v8-coffret__title {
  font-size: clamp(30px,8vw,52px) !important;
  line-height: 1.08 !important;
  color: var(--v11-ivoire) !important;
  margin: clamp(12px,3vw,18px) 0 clamp(16px,4vw,24px) !important;
}
.v8-coffret__title em { color: var(--v11-or) !important; }

.v8-coffret__desc {
  font-family: var(--f-sans);
  font-size: clamp(12.5px,3.3vw,15px);
  font-weight: 300;
  line-height: 1.95;
  letter-spacing: .012em;
  color: rgba(247,242,234,.68);
  margin: 0 0 clamp(30px,7vw,42px);
  max-width: 46ch;
}

.v8-coffret__badges {
  gap: clamp(16px,4.5vw,26px) clamp(14px,4vw,24px) !important;
  margin-bottom: clamp(30px,7vw,42px) !important;
}

/* CTA pleine largeur sur mobile, mais élégant */
.v8-coffret__cta {
  width: 100%;
  max-width: 100%;
  justify-content: center;
  border-radius: 2px;
}

/* ── Desktop : image à gauche, texte à droite, beaucoup d'air ── */
@media (min-width: 900px) {
  .v8-coffret {
    display: grid !important;
    grid-template-columns: 56% 44%;
    align-items: center;
  }
  .v8-coffret__visual { aspect-ratio: 1376 / 768; }
  /* Fondu latéral vers le bloc texte */
  .v8-coffret__visual::after {
    inset: 0 -1px 0 auto;
    width: 22%;
    height: auto;
    background: linear-gradient(to right, transparent, var(--v14-bg));
  }
  .v8-coffret__content {
    padding: clamp(56px,6vw,90px) clamp(48px,5.5vw,86px) !important;
  }
  .v8-coffret__cta { width: auto; }
}

/* ============================================================
   V13 — CLÔTURE · réassurance + CTA final
   Dernière image du film : on rassure, puis on invite à agir.
   ============================================================ */
.v13-final {
  position: relative;
  background: var(--v11-noir);
  isolation: isolate;
  overflow: hidden;
  padding: clamp(76px,17vw,140px) clamp(26px,7vw,64px)
           calc(clamp(80px,18vw,150px) + env(safe-area-inset-bottom, 0px));
  text-align: center;
}
/* Halo doré très bas — la lumière revient une dernière fois */
.v13-final::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 90% 62% at 50% 42%,
    rgba(201,162,77,.13) 0%,
    rgba(201,162,77,.04) 46%,
    transparent 76%);
}
.v13-final__inner { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; }
.v13-final__inner .v11-eyebrow { margin-bottom: clamp(22px,4.5vw,32px); }

.v13-final__title {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(30px,8.2vw,54px);
  line-height: 1.12;
  letter-spacing: -.012em;
  color: var(--v11-ivoire);
  margin: 0 0 clamp(18px,4vw,26px);
}
.v13-final__title em {
  display: block;
  font-family: var(--f-italic);
  font-style: italic;
  font-weight: 300;
  color: var(--v11-or);
}

.v13-final__sub {
  font-family: var(--f-sans);
  font-size: clamp(12px,3.2vw,14.5px);
  font-weight: 300;
  line-height: 1.95;
  letter-spacing: .02em;
  color: rgba(247,242,234,.66);
  margin: 0 auto clamp(34px,7vw,48px);
  max-width: 40ch;
}

/* ── Appels à l'action ───────────────────────────────────── */
.v13-final__ctas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(18px,4vw,24px);
}
.v13-final__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  width: 100%;
  max-width: 340px;
  min-height: 56px;
  padding: 0 clamp(28px,7vw,40px);
  border-radius: 2px;
  background: linear-gradient(180deg, #C9A24D, #B58F3D);
  color: #1A1206;
  font-family: var(--f-sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .20em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.8);
  transition: background .45s ease, box-shadow .45s ease;
}
.v13-final__cta span { transition: transform .45s cubic-bezier(.22,.61,.36,1); }
.v13-final__cta:hover {
  background: linear-gradient(180deg, #D8B463, #C09846);
  box-shadow: 0 16px 36px -12px rgba(0,0,0,.85);
}
.v13-final__cta:hover span { transform: translateX(5px); }

.v13-final__alt {
  font-family: var(--f-sans);
  font-size: 10.5px;
  font-weight: 300;
  letter-spacing: .10em;
  color: rgba(247,242,234,.58);
  text-decoration: none;
  border-bottom: 1px solid rgba(247,242,234,.20);
  padding-bottom: 4px;
  transition: color .35s ease, border-color .35s ease;
}
.v13-final__alt:hover {
  color: var(--v11-ivoire);
  border-color: rgba(247,242,234,.55);
}

/* ── Réassurance ─────────────────────────────────────────── */
.v13-final__trust {
  list-style: none;
  margin: clamp(44px,9vw,62px) 0 0;
  padding: clamp(30px,6vw,40px) 0 0;
  border-top: 1px solid rgba(201,162,77,.18);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  gap: clamp(10px,3vw,44px);
  /* Reprend un peu du padding de section pour tenir sur une seule ligne */
  margin-inline: clamp(-14px, -2.6vw, 0px);
}
.v13-final__trust li {
  display: flex;
  align-items: center;
  gap: clamp(5px,1.6vw,9px);
  font-family: var(--f-sans);
  font-size: clamp(7.4px,2vw,10px);
  font-weight: 300;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(247,242,234,.56);
  white-space: nowrap;
}
.v13-final__trust svg {
  width: clamp(12px,3.4vw,15px);
  height: clamp(12px,3.4vw,15px);
  flex: 0 0 auto;
  fill: none;
  stroke: var(--v11-or);
  stroke-width: 1.1;
  stroke-linejoin: round;
  opacity: .82;
}

@media (min-width: 700px) {
  .v13-final__ctas { flex-direction: row; justify-content: center; gap: clamp(26px,4vw,40px); }
  .v13-final__cta  { width: auto; }
}

/* ============================================================
   DESKTOP — ≥ 768px
   ============================================================ */
@media (min-width: 768px) {

  /* Desktop = adaptation. L'image est portrait (2:3) : dans un cadre paysage
     le flacon dépasse la fenêtre. On ancre sur brume + haut du flacon,
     la composition la plus évocatrice. À remplacer par un visuel desktop dédié. */
  .v11-hero { height: calc(100svh - 34px); max-height: none; }
  /* L'image desktop est déjà cadrée en paysage : plus besoin de la
     décaler vers le haut, le flacon tient entier dans le cadre. */
  .v11-hero__bg img { object-position: center center; }
  .v11-hero__veil {
    background:
      linear-gradient(100deg,
        rgba(6,4,2,.74)  0%,
        rgba(6,4,2,.40) 26%,
        rgba(6,4,2,.08) 52%,
        transparent     72%),
      linear-gradient(to bottom,
        rgba(6,4,2,.34)  0%,
        transparent     24%,
        transparent     58%,
        rgba(6,4,2,.52) 88%,
        rgba(10,7,4,.84) 100%);
  }

  /* La barre est déjà en 4 colonnes dès le mobile — rien à redéfinir */

  .v11-slide--01 .v11-slide__bg img { object-position: 60% center; }
  .v11-slide__veil {
    background:
      linear-gradient(to bottom,
        var(--v11-noir)   0%,
        rgba(10,7,4,.36)  9%,
        transparent      24%),
      linear-gradient(95deg,
        rgba(6,4,2,.76)  0%,
        rgba(6,4,2,.40) 30%,
        rgba(6,4,2,.06) 58%,
        transparent     78%),
      linear-gradient(to bottom,
        transparent      66%,
        rgba(8,5,3,.46) 89%,
        rgba(10,7,4,.80) 100%);
  }
  .v11-slide__text { margin-left: clamp(90px,10vw,150px); }
}

/* ============================================================
   GRAND ÉCRAN — ≥ 1200px
   ============================================================ */
@media (min-width: 1200px) {
  .v11-hero__inner,
  .v11-slide__content { padding-left: clamp(80px,7vw,130px); }
  .v11-rail { left: clamp(80px,7vw,130px); }
}

/* ============================================================
   V20 — CRO : achat direct dans les sections
   Deux styles de CTA seulement :
   · TRANSACTION = bouton doré plein   (.v12-sig__buy, .v8-coffret__buy, .v3-coffret__buy)
   · EXPLORATION = lien souligné       (.v12-sig__cta, .v8-coffret__cta, .v3-coffret__cta)
   Aucune couleur, image ou typographie nouvelle : le doré existant
   est simplement réaffecté à l'intention la plus forte.
   ============================================================ */

.v12-sig__foot { gap: clamp(14px,3vw,18px); width: 100%; }

.v12-sig__price-row {
  display: flex; align-items: baseline; gap: 12px;
}
.v12-sig__vol {
  font-family: var(--f-sans);
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(240,235,226,.42);
}

/* — TRANSACTION — */
.v12-sig__buy, .v8-coffret__buy, .v3-coffret__buy {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; max-width: 420px; min-height: 54px;
  padding: 0 clamp(24px,6vw,34px);
  border: 0; border-radius: 2px; cursor: pointer;
  background: linear-gradient(180deg, #C9A24D, #B58F3D);
  color: #1A1206;
  font-family: var(--f-sans); font-size: 10.5px; font-weight: 500;
  letter-spacing: .20em; text-transform: uppercase; text-decoration: none;
  box-shadow: 0 8px 26px -12px rgba(0,0,0,.7);
  transition: background .45s ease, box-shadow .45s ease, transform .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.v12-sig__buy:hover, .v8-coffret__buy:hover, .v3-coffret__buy:hover {
  background: linear-gradient(180deg, #D8B463, #C09846);
  box-shadow: 0 14px 32px -12px rgba(0,0,0,.75);
}
.v12-sig__buy:active, .v8-coffret__buy:active, .v3-coffret__buy:active { transform: scale(.985); }

/* — Réassurance sous l'action — */
.v12-sig__reassure, .v8-coffret__reassure {
  font-family: var(--f-sans); font-size: 10px; letter-spacing: .08em;
  color: rgba(240,235,226,.40); line-height: 1.5; margin: 0;
}

/* — EXPLORATION (rétrogradé du bouton plein vers le lien) — */
/* Soulignement collé au texte, mais zone tactile de 44 px :
   le trait passe en text-decoration, la hauteur vient du padding. */
.v12-sig__cta, .v8-coffret__cta {
  background: none !important; box-shadow: none !important;
  min-height: 44px; padding: 0; border-radius: 0; border-bottom: 0;
  color: var(--v11-ivoire);
  font-size: 10px; letter-spacing: .18em;
  align-self: flex-start; width: auto;
  text-decoration: underline;
  text-decoration-color: rgba(201,162,77,.38);
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  transition: text-decoration-color .35s ease;
}
.v12-sig__cta:hover, .v8-coffret__cta:hover {
  background: none !important; text-decoration-color: rgba(201,162,77,.9);
}

.v8-coffret__content { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.v8-coffret__buy, .v3-coffret__buy { margin-top: 4px; }

.v3-coffret__cta {
  background: none !important; border: 0; padding: 0;
  color: inherit; font-size: 10px; letter-spacing: .18em;
  display: inline-flex; gap: 8px; align-items: center;
  min-height: 44px; width: auto;
  text-decoration: underline;
  text-decoration-color: rgba(201,162,77,.38);
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}
.v3-coffret__cta:hover { background: none !important; text-decoration-color: rgba(201,162,77,.9); }
.v3-coffret__buy { margin: 18px 0 12px; }

@media (min-width: 900px) {
  .v12-sig__buy, .v8-coffret__buy, .v3-coffret__buy { width: auto; min-width: 260px; }
}

/* ── V20 — bloc pré-lancement (remplace les témoignages) ─────── */
.v4-avis__intro {
  max-width: 620px; margin: 0 auto; padding: 0 clamp(20px,6vw,40px);
  text-align: center;
}
.v4-avis__intro-lead {
  font-family: var(--f-serif); font-size: clamp(18px,4.6vw,23px);
  line-height: 1.42; margin: 0 0 16px; color: var(--v11-ivoire);
}
.v4-avis__intro-text {
  font-size: clamp(13px,3.4vw,15px); line-height: 1.72;
  margin: 0 0 20px; color: rgba(240,235,226,.62);
}
.v4-avis__intro-sign {
  font-family: var(--f-sans); font-size: 10px; letter-spacing: .20em;
  text-transform: uppercase; color: rgba(201,162,77,.72); margin: 0;
}
/* Sans la grille de cartes, la section respirait dans le vide. */
.v4-avis--prelaunch { padding-bottom: clamp(56px,9vw,96px) !important; }
.v4-avis--prelaunch .v4-avis__header { margin-bottom: clamp(26px,5vw,38px); }

/* Desktop : le pied de section repasse en colonne. En rangée, les
   quatre nouveaux éléments (prix, bouton, réassurance, lien) se
   compressaient dans 44 % de largeur et chevauchaient le visuel. */
@media (min-width: 900px) {
  .v12-sig__foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .v12-sig__price-row { gap: 14px; }
  .v12-sig__reassure { max-width: 42ch; }
}

/* ═══════════════════════════════════════════════════════════════
   L'ATELIER — section homepage
   Split image / texte. Elle répond à une objection commerciale
   (« choisir un parfum sans le sentir »), pas seulement à un besoin
   esthétique : la copy passe donc avant l'image sur mobile.
   ═══════════════════════════════════════════════════════════════ */
.v11-atelier {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--v11-noir-2);
  overflow: hidden;
}

.v11-atelier__media { position: relative; }
.v11-atelier__media img {
  display: block; width: 100%; height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover; object-position: 50% 42%;
}
/* Fondu vers le fond : l'image ne doit pas se terminer sur une arête. */
.v11-atelier__media::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 34%;
  background: linear-gradient(to bottom, transparent, var(--v11-noir-2));
  pointer-events: none;
}

.v11-atelier__texte { padding: 34px 24px 60px; }

.v11-atelier__titre {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(30px, 8.4vw, 46px);
  line-height: 1.14;
  letter-spacing: -.015em;
  color: var(--v11-ivoire);
  margin: 14px 0 22px;
}
.v11-atelier__titre em {
  display: block;
  font-family: var(--f-italic);
  font-style: italic;
  color: var(--v11-or);
}

.v11-atelier__accroche {
  font-family: var(--f-sans);
  font-size: 16px; line-height: 1.55;
  color: var(--v11-ivoire);
  margin: 0 0 10px;
}
.v11-atelier__corps {
  font-family: var(--f-sans);
  font-size: 15px; line-height: 1.72;
  color: rgba(247,242,234,.66);
  max-width: 34ch;
  margin: 0 0 18px;
}
.v11-atelier__secret {
  font-family: var(--f-italic);
  font-style: italic;
  font-size: 15.5px; line-height: 1.5;
  color: var(--v11-or-doux);
  max-width: 30ch;
  margin: 0 0 28px;
}
.v11-atelier__duree {
  font-family: var(--f-sans);
  font-size: 11px; letter-spacing: .12em;
  color: rgba(247,242,234,.4);
  margin: 16px 0 0;
}

@media (min-width: 900px) {
  .v11-atelier { grid-template-columns: 1fr 1fr; align-items: center; }
  .v11-atelier__media img { aspect-ratio: 3 / 4; height: 100%; }
  .v11-atelier__media::after { inset: 0 auto 0 auto; right: 0; width: 22%; height: 100%;
    background: linear-gradient(to right, transparent, var(--v11-noir-2)); }
  .v11-atelier__texte { padding: 72px 8vw 72px 56px; }
  .v11-atelier__titre { font-size: clamp(38px, 3.4vw, 52px); }
}

/* Bifurcation : sous-titre et relance Atelier. */
.v11-signatures__sub {
  font-family: var(--f-sans);
  font-size: 14px; font-weight: 300; line-height: 1.8;
  letter-spacing: .03em;
  color: rgba(247,242,234,.68);
  margin: 0 0 26px;
}
.v11-signatures__autre {
  font-family: var(--f-italic); font-style: italic;
  font-size: 15px; line-height: 1.6;
  color: var(--v11-or-doux);
  margin: 0;
}
.v11-signatures__autre a {
  display: block;
  margin-top: 10px;
  font-family: var(--f-sans); font-style: normal;
  font-size: 10px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--v11-or); text-decoration: none;
  border-bottom: 1px solid rgba(201,162,77,.32);
  padding-bottom: 6px;
}
.v11-signatures__autre a:hover { color: #E4C880; border-color: rgba(201,162,77,.85); }
@media (min-width: 720px) {
  .v11-signatures__autre a { display: inline-block; margin-top: 0; margin-left: 10px; }
}

/* Les réglages hero du sprint précédent (sous-titre à 24ch, 12px) ont été
   retirés : ils écrasaient la composition de campagne définie plus haut,
   forçaient la signature sur trois lignes et la rendaient trop grosse. */

/* Lien Atelier dans la réponse FAQ. */
.v4-faq__lien {
  display: inline-block; margin-top: 14px;
  font-family: var(--f-sans); font-size: 10px;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--v11-or); text-decoration: none;
  border-bottom: 1px solid rgba(201,162,77,.32); padding-bottom: 5px;
}
.v4-faq__lien:hover { color: #E4C880; border-color: rgba(201,162,77,.85); }

/* ═══════════════════════════════════════════════════════════════
   FAQ — remise au thème de la page
   Elle était masquée ; réactivée telle quelle, elle ouvrait un bloc
   ivoire au milieu d'une page noire. Une page a UN thème : le
   visiteur ne doit pas croire qu'il a changé de site en scrollant.
   ═══════════════════════════════════════════════════════════════ */
.v4-faq { background: var(--v11-noir-2); border-top-color: rgba(201,162,77,.16); }
.v4-faq__title { color: var(--v11-ivoire); }
.v4-faq__item { border-color: rgba(247,242,234,.12); }
.v4-faq__q-text { color: var(--v11-ivoire); }
.v4-faq__icon { color: var(--v11-or); }
.v4-faq__answer { color: rgba(247,242,234,.66); }
.v4-faq__header .v11-eyebrow, .v4-faq__over { color: var(--v11-or); }

/* L'en-tête de la FAQ attendait une classe `is-visible` posée par un
   observateur qui n'existe pas dans main.js. Le bug était invisible
   tant que la section était masquée : réactivée, l'en-tête restait à
   opacity 0. On le rend visible sans dépendre de ce script. */
.v4-faq__header { opacity: 1 !important; transform: none !important; }

/* ══════════════════════════════════════════════════════════════
   V15 — CONVERSION · 08/09/2026
   Deux ajouts seulement : la ligne de catégorie du hero, et le
   sélecteur des quatre atmosphères. Mêmes tokens, même famille
   typographique : rien de nouveau dans la direction artistique.
   ══════════════════════════════════════════════════════════════ */

/* ── Hero : ce que CARAT vend, avant la phrase d'atmosphère ──
   Le visiteur froid doit pouvoir nommer la catégorie sans scroller. */
.v11-hero__cat {
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: clamp(10.5px, 2.9vw, 12px);
  line-height: 1.45;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--v11-or);
  margin: 0 0 clamp(16px, 2.2vh, 22px);
  text-shadow: 0 1px 10px rgba(0,0,0,.7);
}

/* La promesse porte maintenant une phrase complète : elle doit rester
   lisible, donc un cran au-dessus de l'ancien 9,8 px. */
.v11-hero__sub { font-size: clamp(11.5px, 3vw, 13px); line-height: 1.95; }

.v11-hero__in--d4 { animation-delay: 820ms; }

/* ── Les 4 Signatures · quatre territoires ────────────────────
   Aucun cadre : la séparation vient de l'espace et d'une lumière
   propre à chaque Signature. Les matières sont des dégradés radiaux
   très basse opacité — ressenties avant d'être vues, ~10 % de lumière
   sur 90 % de noir CARAT. Aucun asset chargé. */
.v15-atmo {
  position: relative;
  background: var(--v11-noir-2);
  padding: clamp(34px, 5.4vh, 66px) 20px clamp(18px, 3.2vh, 40px);
  overflow: hidden;
}

/* La lumière de la photographie qui suit commence à remonter ici.
   La teinte visée n'est pas choisie à l'estime : c'est la couleur
   moyenne des premières lignes de cette photo. Mesures : #253946 en
   mobile et #8796A3 en desktop pour Perle d'Azur, qui ouvre la série
   depuis le 11/09/2026 (avant : #846455, Velours Sucré).
   Sans cela, le dégradé s'arrêtait 130 niveaux plus bas et la jonction
   se lisait comme une bande noire. Montée progressive : l'essentiel
   du chemin se fait sur le dernier tiers. */
.v15-atmo::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 46%;
  background: linear-gradient(to bottom,
    rgba(37, 57, 70, 0)   0%,
    rgba(37, 57, 70, .10) 42%,
    rgba(37, 57, 70, .30) 72%,
    rgba(37, 57, 70, .62) 100%);
  pointer-events: none;
}

.v15-atmo__inner { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; text-align: center; }

.v15-atmo__title {
  font-family: var(--f-serif, 'Playfair Display', serif);
  font-weight: 400;
  font-size: clamp(25px, 6.2vw, 38px);
  line-height: 1.14;
  color: var(--v11-ivoire);
  margin: 0;
}
.v15-atmo__sub {
  font-family: var(--f-sans);
  font-size: clamp(12.5px, 3.3vw, 14.5px);
  line-height: 1.55;
  color: rgba(247,242,234,.72);
  margin: 10px 0 clamp(20px, 3vh, 32px);
}

.v15-atmo__list {
  position: relative;
  isolation: isolate;
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(4px, 1.4vw, 10px);
}
/* Quatre colonnes seulement à partir de 1024 px : en dessous, les noms
   les plus longs passaient sur deux lignes et cassaient l'alignement. */
@media (min-width: 1024px) {
  .v15-atmo__list { grid-template-columns: repeat(4, 1fr); gap: 0; }
  .v15-atmo { padding: clamp(58px, 8vh, 96px) 40px clamp(30px, 4.4vh, 56px); }
  .v15-atmo__link { padding: 30px 24px 34px; min-height: 150px; }
  /* Sur desktop, la section n'enchaîne pas sur la photographie mais sur
     le fond sombre de la bande produit : la remontée de lumière doit
     s'arrêter bien plus bas, sinon elle éclaire pour rien. */
  .v15-atmo::after {
    height: 38%;
    background: linear-gradient(to bottom,
      rgba(135, 150, 163, 0)   0%,
      rgba(135, 150, 163, .08) 46%,
      rgba(135, 150, 163, .32) 100%);
  }
}

/* Le lien occupe toute la cellule : aucun cadre visible, mais on ne
   vise jamais le texte au doigt. */
.v15-atmo__link {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-height: 116px;
  padding: clamp(12px, 3.2vw, 22px) clamp(11px, 2.8vw, 18px);
  text-decoration: none;
}

/* La matière est portée par la COMPOSITION, pas par chaque cellule.
   Posée sur les cellules, chaque dégradé était découpé par son bord et
   redessinait le rectangle qu'on cherchait à supprimer. Ici, quatre
   nappes de lumière se recouvrent en une seule atmosphère continue :
   aucune arête droite ne peut apparaître.
   Ordre des nappes = ordre des Signatures : Perle d'Azur, Velours
   Sucré, Nectar Doré, Musc de Soie (rose poudré repris de la 4e). */
.v15-atmo__list::before {
  content: '';
  position: absolute;
  inset: -14% -8%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(46% 34% at 16% 30%, rgba(186,203,219,.123), transparent 72%),
    radial-gradient(44% 32% at 88% 20%, rgba(198,152,122,.13), transparent 70%),
    radial-gradient(48% 36% at 12% 82%, rgba(214,176,110,.14), transparent 72%),
    radial-gradient(44% 34% at 86% 76%, rgba(216,180,182,.123), transparent 70%);
}
@media (min-width: 1024px) {
  .v15-atmo__list::before {
    background:
      radial-gradient(26% 62% at 12% 66%, rgba(186,203,219,.123), transparent 72%),
      radial-gradient(24% 58% at 37% 22%, rgba(198,152,122,.13), transparent 70%),
      radial-gradient(27% 64% at 63% 72%, rgba(214,176,110,.14), transparent 72%),
      radial-gradient(24% 58% at 88% 26%, rgba(216,180,182,.123), transparent 70%);
  }
}

.v15-atmo__num {
  font-family: var(--f-sans);
  font-size: 10.5px;
  letter-spacing: .26em;
  color: rgba(201,162,77,.62);
}
.v15-atmo__mot {
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--v11-or);
}
.v15-atmo__nom {
  font-family: var(--f-serif, 'Playfair Display', serif);
  font-size: clamp(19px, 5.2vw, 26px);
  line-height: 1.16;
  color: var(--v11-ivoire);
  margin-top: 3px;
  transition: color 300ms ease;
}
.v15-atmo__desc {
  font-family: var(--f-sans);
  font-size: 12px;
  line-height: 1.45;
  color: rgba(240,235,226,.66);
  margin-top: 4px;
}
.v15-atmo__trait {
  display: block;
  width: 26px; height: 1px;
  margin-top: 10px;
  background: rgba(201,162,77,.55);
  transition: width 380ms cubic-bezier(.22,.61,.36,1), background-color 300ms ease;
}
@media (prefers-reduced-motion: reduce) { .v15-atmo__trait, .v15-atmo__nom { transition: none; } }

/* Souris : la matière monte un peu, le trait s'allonge. Rien d'autre. */
@media (hover: hover) and (pointer: fine) {
  .v15-atmo__link:hover .v15-atmo__nom { color: #FFFBF4; }
  .v15-atmo__link:hover .v15-atmo__trait { width: 46px; background: var(--v11-or); }
}
/* Doigt : un simple assombrissement au contact. */
.v15-atmo__link:active .v15-atmo__trait { width: 40px; }

.v15-atmo__link:focus-visible { outline: 1px solid var(--v11-or); outline-offset: -6px; }

/* Le défilement d'ancre doit s'arrêter sous la barre de navigation fixe. */
[id^="signature-"] { scroll-margin-top: 84px; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Titre de la section bénéfices : la barre n'en avait pas, elle passait
   pour une frise décorative plutôt que pour une réponse à « pourquoi ». */
.v15-pourquoi__titre {
  font-family: var(--f-serif, 'Playfair Display', serif);
  font-weight: 400;
  font-size: clamp(24px, 6vw, 36px);
  line-height: 1.15;
  color: var(--v11-ivoire);
  text-align: center;
  margin: 0 0 clamp(28px, 4.4vh, 44px);
  padding: 0 22px;
}

/* ── Carte Signature · compaction mobile ──────────────────────
   L'image n'est PAS recadrée : la règle « flacon toujours entier »
   reste prioritaire. Toute la hauteur est reprise sur le bloc texte,
   qui répétait ce que la page dit déjà ailleurs.
   Ce que la carte doit montrer : nom · 3 descripteurs · prix ·
   volume · Ajouter au panier. Le reste part. */
@media (max-width: 899px) {
  .v12-sig__num  { font-size: 10px; margin-bottom: 9px; }
  .v12-sig__name { font-size: clamp(30px, 8.2vw, 40px); margin-bottom: 8px; }

  /* La phrase d'atmosphère suffit : le paragraphe long faisait
     doublon avec la fiche produit, à un clic de là. */
  .v12-sig__desc { display: none; }
  .v12-sig__rule { margin: 14px 0; }

  /* Les trois descripteurs en une ligne, sans icône ni libellé.
     « Pour » est couvert par la section Usages. */
  .v12-sig__meta { display: block; }
  .v12-sig__meta-item + .v12-sig__meta-item { display: none; }
  .v12-sig__meta-item .v12-sig__icon,
  .v12-sig__meta-item .v12-sig__meta-lbl { display: none; }
  .v12-sig__meta-item { gap: 0; }
  .v12-sig__meta-val {
    font-family: var(--f-sans);
    font-size: 11.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    line-height: 1.5;
  }

  .v12-sig__foot { gap: 15px; margin-top: 20px; }
}

/* Réassurance de carte : 10 px à 40 % d'opacité était sous le seuil
   de lisibilité. Remonté au minimum utilisable. */
.v12-sig__reassure, .v8-coffret__reassure {
  font-size: 12px;
  color: rgba(240,235,226,.68);
}

/* Respiration du bloc texte en mobile : 34 px en haut et 50 px en bas
   étaient calés pour un bloc qui portait un paragraphe. Il n'en porte
   plus. */
@media (max-width: 899px) {
  .v12-sig__body { padding: 26px 24px 32px; }
  .v12-sig__sign { margin-bottom: 12px; }
  .v12-sig__rule { margin: 11px 0; }
  .v12-sig__foot { gap: 12px; margin-top: 16px; }
}

/* ── CTA du hero · lisibilité et zone tactile ─────────────────
   9 px et 8,8 px passaient sous le seuil de lisibilité, et le CTA
   secondaire n'offrait que 21 px de hauteur au pouce. Le filet
   champagne reste collé au texte : c'est la zone tactile qui
   s'agrandit autour, pas le trait. */
.v11-hero__actions .v11-cta--plein { font-size: 11px; letter-spacing: .15em; }
.v11-hero__actions .v11-cta--ghost {
  font-size: 10.5px;
  letter-spacing: .12em;
  padding: 0 0 6px;
  position: relative;
}
.v11-hero__actions .v11-cta--ghost::before {
  content: '';
  position: absolute;
  inset: -13px -8px -12px -8px;      /* 44 px de haut au total */
  }

/* Plancher de 11 px sur les liens d'action — placé ici parce que cette
   feuille est chargée en dernier ; les mêmes règles dans base.css
   perdaient contre les feuilles v3/v11. */
.v4-faq .v4-faq__lien,
.v13-final .v13-final__alt,
.v4-compare .v4-compare__cta,
.v3-coffret .v3-coffret__secondary,
.nd-quick .nd-quick__link { font-size: 11.5px; }

/* Panier vide : le lien qui ramène vers les produits est le seul geste
   possible depuis cet écran. Il ne peut pas être le plus petit texte. */
.mini-cart__empty a { font-size: 11.5px; }

/* ── Promesse du hero ─────────────────────────────────────────
   Forme publicitaire courte : deux lignes, aucune ne peut atteindre
   le flacon (bord clair mesuré à x = 225 sur 375). Le garde-fou de
   largeur reste, même si la phrase courte n'en a plus besoin : il
   protège toute reformulation future. */
.v11-hero__sub {
  max-width: calc(56vw - 24px);
  line-height: 1.95;
}

/* ── Zones tactiles des liens d'action ────────────────────────
   Le texte et le filet gardent leur dimension : c'est la boîte qui
   grandit autour. Rien ne bouge visuellement, le doigt atteint sa cible. */
.v11-atelier .v11-cta,
.v4-faq__lien,
.v13-final__alt,
.footer__nl-btn,
.footer__social-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Puces du carrousel : 8 px de dessin, 44 px de zone. */
.v11-dot { padding: 18px; background-clip: content-box; box-sizing: content-box; }

/* Liens de colonne du pied de page : 19 px, c'était trop peu pour une
   liste de dix-huit entrées. 34 px sans étirer le pied de page — le
   plancher de 44 doublerait sa hauteur, compromis assumé. */
.footer__col-link { display: inline-flex; align-items: center; min-height: 34px; }


/* ============================================================
   V16 — RÉÉCRITURE COPYWRITING + CRO · 11/09/2026
   Styles des seuls éléments de texte nouveaux. Même famille
   typographique, mêmes couleurs, mêmes rythmes que les blocs voisins.
   ============================================================ */

/* ── Le dernier geste · le problème, avant les produits ─────────
   Même fond que le sélecteur qui suit : les deux se lisent comme une
   seule respiration entre le hero et les Signatures. */
.v16-geste {
  position: relative;
  background: var(--v11-noir-2);
  padding: clamp(64px, 11vh, 120px) 24px clamp(10px, 2vh, 24px);
  text-align: center;
}
.v16-geste__inner { max-width: 640px; margin: 0 auto; }
.v16-geste__titre {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(27px, 7.4vw, 46px);
  line-height: 1.14;
  letter-spacing: -.012em;
  color: var(--v11-ivoire);
  margin: 0 0 clamp(18px, 4vw, 26px);
}
.v16-geste__titre span { display: block; }
.v16-geste__titre em {
  display: block;
  margin-top: .3em;
  padding-bottom: .08em;            /* jambages de l'italique */
  font-family: var(--f-italic);
  font-style: italic;
  font-weight: 300;
  color: var(--v11-or);
}
.v16-geste__corps {
  font-family: var(--f-sans);
  font-size: clamp(13px, 3.5vw, 15px);
  font-weight: 300;
  line-height: 1.85;
  color: rgba(247,242,234,.68);
  max-width: 40ch;
  margin: 0 auto clamp(26px, 5vw, 36px);
}
.v16-geste__moments {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; align-items: center; gap: 11px;
}
.v16-geste__moments li {
  font-family: var(--f-sans);
  font-size: 11px;                  /* plancher de lisibilité des libellés */
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(201,162,77,.85);
}
@media (min-width: 700px) {
  .v16-geste__moments { flex-direction: row; justify-content: center; gap: 0; }
  .v16-geste__moments li { padding: 0 clamp(16px, 2.4vw, 28px); }
  .v16-geste__moments li + li { border-left: 1px solid rgba(201,162,77,.24); }
}
/* Emplacement prêt pour ASSET_REQUIRED_HOME_EMOTIONAL (image au-dessus du texte). */
.v16-geste--media .v16-geste__media { max-width: 640px; margin: 0 auto clamp(32px, 6vw, 48px); }
.v16-geste__media img { display: block; width: 100%; height: auto; }

/* ── Pourquoi CARAT · la caractéristique, puis ce qu'elle change ──
   Une phrase de bénéfice par pilier : illisible sur quatre colonnes
   de 85 px, d'où deux colonnes sous 700 px. */
.v11-bar__val { white-space: normal; }
.v11-bar__txt {
  font-family: var(--f-sans);
  font-size: clamp(12px, 3.2vw, 13.5px);
  font-weight: 300;
  line-height: 1.6;
  color: rgba(247,242,234,.64);
  max-width: 24ch;
  margin: 0;
}
@media (max-width: 699px) {
  .v11-bar__inner { grid-template-columns: repeat(2, 1fr); row-gap: 34px; }
  .v11-bar__item:nth-child(3) { border-left: 0; }
}

/* ── Sélecteur : phrases de longueurs inégales ───────────────────
   « Un vrai cocon. » tient sur une ligne, sa voisine sur deux : le
   trait doré se cale en bas de chaque cellule pour que les quatre
   restent alignés rangée par rangée. */
.v15-atmo__item { display: flex; }
/* La section est centrée : une phrase sur deux lignes l'était aussi. */
.v15-atmo__link { flex: 1; text-align: left; }
.v15-atmo__desc { flex: 1 0 auto; }


/* ============================================================
   V17 — CRO MOBILE · HIÉRARCHIE D'ATTENTION · RYTHME DE SCROLL
   11/09/2026. Dans chaque écran : bénéfice → produit → explication
   → prix / preuve → action. Les hauteurs alternent volontairement
   (immersion, compact, produit, compact, émotion, preuve, action).
   Même palette, mêmes familles, aucun nouvel asset.
   Les sections existantes ne changent QUE sous 900 px : le desktop
   sera décliné après validation du mobile.
   ============================================================ */

/* Nouveaux éléments : styles de base, toutes largeurs ─────────── */
.v12-sig__plus {
  font-family: var(--f-italic);
  font-style: italic;
  font-size: 16px;
  line-height: 1.5;
  color: var(--v11-or-doux);
  margin: 10px 0 0;
  max-width: 46ch;
}
.v8-coffret__format {
  font-family: var(--f-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--v11-or);
  margin: 0;
}

/* ── Choix des 4 Signatures · carrousel ─────────────────────────
   Carte à 84 % : la suivante dépasse, le geste de swipe s'explique
   seul. Arrêt net sur chaque carte. Aucune flèche. */
.v17-choix { position: relative; }
.v17-choix__rail {
  list-style: none;
  margin: 0;
  padding: 0 20px;
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 20px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.v17-choix__rail::-webkit-scrollbar { display: none; }
.v17-choix__carte { flex: 0 0 84%; scroll-snap-align: start; display: flex; }
.v17-choix__carte--01 { --v17-fond: #23292E; }
.v17-choix__carte--02 { --v17-fond: #2E221D; }
.v17-choix__carte--03 { --v17-fond: #30251A; }
.v17-choix__carte--04 { --v17-fond: #29232A; }
.v17-choix__lien {
  display: flex;
  flex-direction: column;
  width: 100%;
  text-align: left;
  text-decoration: none;
  background: var(--v17-fond);
  border-radius: 2px;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.v17-choix__img { display: block; aspect-ratio: 10 / 11; overflow: hidden; background: var(--v17-fond); }
.v17-choix__img img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 40%;   /* flacon toujours entier */
}
.v17-choix__texte { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px 6px; flex: 1; }
.v17-choix__num {
  font-family: var(--f-sans); font-size: 11px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--v11-or);
}
.v17-choix__nom {
  font-family: var(--f-serif); font-weight: 400;
  font-size: 25px; line-height: 1.15; color: var(--v11-ivoire); margin-top: 2px;
}
.v17-choix__desc {
  font-family: var(--f-sans); font-size: 15px; line-height: 1.45;
  color: rgba(247,242,234,.78);
}
.v17-choix__pied {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: auto; padding-top: 10px;
  min-height: 48px;
  border-top: 1px solid rgba(247,242,234,.12);
}
.v17-choix__texte .v17-choix__desc { margin-bottom: 10px; }
.v17-choix__prix { font-family: var(--f-sans); font-size: 13px; letter-spacing: .03em; color: rgba(247,242,234,.72); }
.v17-choix__go {
  font-family: var(--f-sans); font-size: 11px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--v11-or);
}
.v17-choix__go i { font-style: normal; display: inline-block; margin-left: 6px; transition: transform 200ms ease; }
.v17-choix__lien:active .v17-choix__go i { transform: translateX(3px); }
.v17-choix__lien:focus-visible { outline: 1px solid var(--v11-or); outline-offset: -4px; }
.v17-choix__compteur {
  margin: 16px 0 0; text-align: center;
  font-family: var(--f-sans); font-size: 11px; letter-spacing: .24em;
  color: rgba(247,242,234,.46);
}
.v17-choix__compteur span { color: var(--v11-ivoire); }
@media (hover: hover) and (pointer: fine) {
  .v17-choix__lien:hover .v17-choix__go i { transform: translateX(3px); }
}
@media (min-width: 900px) {
  .v17-choix__rail {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
    overflow: visible; padding: 0; max-width: 1080px; margin: 0 auto;
  }
  .v17-choix__compteur { display: none; }
}

/* ── Rituel compact · trois étapes, image à ratio fixe ──────────── */
.v17-rituel { background: var(--v11-noir); padding: 56px 20px 60px; }
.v17-rituel__tete { text-align: center; margin-bottom: 26px; }
.v17-rituel__tete .v11-eyebrow { margin-bottom: 14px; }
.v17-rituel__titre {
  font-family: var(--f-serif); font-weight: 400;
  font-size: clamp(30px, 8.2vw, 52px); line-height: 1.12;
  letter-spacing: -.01em; color: var(--v11-ivoire); margin: 0;
}
.v17-rituel__titre em {
  display: block; padding-bottom: .06em;
  font-family: var(--f-italic); font-style: italic; font-weight: 300; color: var(--v11-or);
}
.v17-rituel__etapes { list-style: none; margin: 0 auto; padding: 0; max-width: 1180px; display: grid; }
.v17-rituel__etape {
  display: grid; grid-template-columns: 1fr 44%; align-items: center; gap: 16px;
  padding: 14px 0;
  border-top: 1px solid rgba(201,162,77,.16);
}
.v17-rituel__num {
  display: block; font-family: var(--f-sans); font-size: 12px;
  letter-spacing: .2em; color: var(--v11-or); margin-bottom: 8px;
}
.v17-rituel__nom {
  font-family: var(--f-serif); font-weight: 400;
  font-size: 22px; line-height: 1.2; color: var(--v11-ivoire); margin: 0 0 6px;
}
.v17-rituel__corps {
  font-family: var(--f-sans); font-size: 15px; font-weight: 300; line-height: 1.55;
  color: rgba(247,242,234,.70); margin: 0;
}
.v17-rituel__img { aspect-ratio: 5 / 4; overflow: hidden; border-radius: 2px; background: #21180F; }
.v17-rituel__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.v17-rituel__etape--01 img { object-position: 72% 34%; }   /* buse + brume */
.v17-rituel__etape--02 img { object-position: 30% 45%; }   /* la brume dans la lumière */
.v17-rituel__etape--03 img { object-position: 62% 62%; }   /* le salon installé */
@media (min-width: 900px) {
  .v17-rituel { padding: 100px 48px; }
  .v17-rituel__tete { margin-bottom: 48px; }
  .v17-rituel__etapes { grid-template-columns: repeat(3, 1fr); gap: 32px; }
  .v17-rituel__etape { grid-template-columns: 1fr; border-top: 0; padding: 0; }
  .v17-rituel__img { order: -1; aspect-ratio: 4 / 3; }
}

/* Microcopie : plus rien sous 11 px. */
.v11-eyebrow { font-size: 11px; letter-spacing: .24em; }

@media (max-width: 899px) {

  /* ── 1. Hero : même composition, titre au niveau du brief ────── */
  .v11-hero__cat,
  .v11-hero__title { max-width: min(86vw, 380px); }
  .v11-hero__title { font-size: clamp(34px, 9.8vw, 46px); line-height: 1.07; }
  .v11-hero__title em { margin-top: 8px; }
  .v11-hero__fil { margin: clamp(30px, 4.4vh, 48px) 0 clamp(14px, 2vh, 20px); }
  /* Le conteneur héritait de la largeur du bloc texte (66vw) et rognait de
     8 px le libellé « Créer ma Signature ». */
  .v11-hero__actions { margin-top: clamp(40px, 6vh, 64px); max-width: min(86vw, 380px); }
  .v11-hero__actions .v11-cta--ghost { max-width: none; }
  /* Les éclats dorés de la photographie passaient derrière la promesse :
     par endroits le contraste tombait à 1,2:1. Double ombre serrée, la
     composition et la couleur du texte ne changent pas. */
  .v11-hero__sub, .v11-hero__cat {
    text-shadow: 0 1px 3px rgba(0,0,0,.92), 0 2px 16px rgba(0,0,0,.85);
  }

  /* ── 2. Déclic : la phrase de résultat domine ────────────────── */
  .v16-geste { padding: 56px 24px 44px; }
  .v16-geste__titre { margin-bottom: 18px; }
  .v16-geste__titre span {
    font-size: 20px; line-height: 1.35; color: rgba(247,242,234,.62);
  }
  .v16-geste__titre em {
    margin-top: 16px;
    font-size: clamp(34px, 9.4vw, 40px); line-height: 1.1; font-weight: 400;
  }
  .v16-geste__corps { font-size: 16px; line-height: 1.7; margin-bottom: 26px; }
  .v16-geste__moments { flex-direction: row; justify-content: center; align-items: stretch; gap: 0; }
  .v16-geste__moments li {
    flex: 1 1 0; padding: 0 8px;
    font-size: 11px; letter-spacing: .12em; line-height: 1.5;
  }
  .v16-geste__moments li + li { border-left: 1px solid rgba(201,162,77,.24); }

  /* ── 3. Choix : le carrousel court bord à bord ───────────────── */
  .v15-atmo { padding: 44px 0 34px; }
  .v15-atmo::after { display: none; }
  .v15-atmo__title { padding: 0 24px; font-size: clamp(28px, 7.8vw, 36px); }
  .v15-atmo__sub { padding: 0 24px; font-size: 15px; margin: 10px 0 22px; }

  /* ── 4. Pourquoi CARAT : 2 × 2, et la lumière de Perle d'Azur
        remonte déjà (couleur relevée en haut de son cadrage carré). */
  .v11-bar { padding: 40px 14px 46px; }
  .v11-bar::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 42%;
    background: linear-gradient(to bottom,
      rgba(58, 81, 94, 0) 0%, rgba(58, 81, 94, .14) 48%, rgba(58, 81, 94, .56) 100%);
    pointer-events: none;
  }
  .v11-bar__inner { position: relative; z-index: 1; row-gap: 28px; }
  .v15-pourquoi__titre { font-size: clamp(28px, 7.4vw, 34px); margin-bottom: 26px; }
  .v11-bar__val { font-size: 12px; letter-spacing: .12em; }
  .v11-bar__txt { font-size: 14px; line-height: 1.5; }

  /* ── 5. Modules produits : packshot, bénéfice, prix et bouton dans
        le même écran. Cadrage carré à 45 % : les quatre flacons restent
        entiers (vérifié sur les quatre images). Les raccords sont
        relevés sur le bas du nouveau cadrage, assombris à 62 / 42 %. */
  .v12-sig__visual { aspect-ratio: 1 / 1; }
  .v12-sig__visual img { object-fit: cover; object-position: 50% 45%; }
  .v12-sig__visual::after { height: 22%; }
  .v12-sig--02 { --v12-edge: #4A4A4E; --v12-bg: #323235; }   /* Perle d'Azur */
  .v12-sig--01 { --v12-edge: #5A3F35; --v12-bg: #3D2B24; }   /* Velours Sucré */
  .v12-sig--03 { --v12-edge: #6C5030; --v12-bg: #493621; }   /* Nectar Doré */
  .v12-sig--04 { --v12-edge: #5C5757; --v12-bg: #3F3B3B; }   /* Musc de Soie */

  .v12-sig__body { padding: 20px 22px 28px; }
  .v12-sig__num  { font-size: 11px; margin-bottom: 8px; }
  .v12-sig__name {
    font-size: 26px; line-height: 1.1; margin-bottom: 8px;
    color: var(--v11-or);
  }
  /* Le bénéfice devient la phrase dominante du module. */
  .v12-sig__sign {
    font-family: var(--f-serif); font-weight: 400;
    font-size: 23px; line-height: 1.22; letter-spacing: -.005em;
    text-transform: none; color: var(--v11-ivoire);
    margin: 0 0 10px; text-wrap: balance;
  }
  .v12-sig__desc {
    display: block; font-size: 15.5px; line-height: 1.6;
    color: rgba(247,242,234,.76);
  }
  .v12-sig__plus { font-size: 15.5px; margin-top: 6px; }
  .v12-sig__rule { margin: 14px 0 12px; }
  .v12-sig__meta-val { font-size: 12px; letter-spacing: .16em; }
  .v12-sig__foot { gap: 12px; margin-top: 14px; }
  .v12-sig__price { font-size: 26px; }
  /* « 3 pulvérisations · Maison & textiles » est dit juste au-dessus,
     dans Pourquoi CARAT : sur mobile, la répétition coûtait 4 × 30 px. */
  .v12-sig__reassure { display: none; }

  /* ── 6. L'Atelier : plus d'espace, un bouton pleine largeur ──── */
  .v11-atelier__texte { padding: 26px 24px 52px; }
  .v11-atelier__accroche { font-size: 17px; }
  .v11-atelier__corps { font-size: 16px; }
  .v11-atelier .v11-cta--plein {
    display: flex; align-items: center; justify-content: center;
    width: 100%; min-height: 54px; padding: 0 20px;
    font-size: 11px; font-weight: 500; letter-spacing: .18em; text-align: center;
  }
  .v11-atelier__duree { font-size: 12px; letter-spacing: .03em; text-align: center; }

  /* Contrôle de design (12/09/2026). « 250 ML » à 42 % d'opacité lisait
     gris délavé sur les fonds colorés des modules produits ; et un
     interlettrage large reste réservé aux courts libellés en capitales,
     pas aux phrases en minuscules. */
  .v12-sig__vol { color: rgba(247,242,234,.78); }
  .v8-coffret__reassure { letter-spacing: .02em; }
  .v13-final__alt { letter-spacing: .04em; }

  /* ── 8. Coffret : le prix d'abord, l'économie juste en dessous ─ */
  .v8-coffret__content { gap: 12px; padding: 4px 24px 52px !important; }
  .v8-coffret__title { font-size: clamp(30px, 8.4vw, 40px) !important; margin: 6px 0 2px !important; }
  .v8-coffret__desc { font-size: 15.5px; line-height: 1.7; margin: 0; }
  .v8-coffret__price-row { width: 100%; margin: 4px 0 0; padding-top: 16px; row-gap: 6px; }
  .v8-coffret__price { font-size: 34px; }
  .v8-coffret__old { font-size: 13px; letter-spacing: .02em; color: rgba(250,247,242,.46); }
  .v8-coffret__saving { font-size: 12px; letter-spacing: .14em; color: rgba(201,162,77,.9); }

  /* ── 9. Pré-lancement : deux phrases, pas un écran ──────────── */
  .v4-avis--prelaunch { padding: 48px 24px 46px !important; }
  .v4-avis--prelaunch::before,
  .v4-avis--prelaunch::after { display: none; }
  .v4-avis--prelaunch .v4-avis__header { margin-bottom: 14px; }
  .v4-avis--prelaunch .v4-avis__title { font-size: clamp(28px, 7.6vw, 34px); }
  .v4-avis__intro-lead { font-size: 20px; margin-bottom: 8px; }
  .v4-avis__intro-text { font-size: 15px; margin: 0; }

  /* ── 10. FAQ : cinq questions, lisibles au pouce ─────────────── */
  .v4-faq { padding: 48px 22px 40px; }
  .v4-faq__header { margin-bottom: 16px; }
  .v4-faq__title { font-size: clamp(26px, 7vw, 32px); }
  .v4-faq__question { padding: 15px 0; min-height: 56px; }
  .v4-faq__q-text { font-size: 15.5px; letter-spacing: 0; }
  .v4-faq__answer { font-size: 15px; line-height: 1.7; }

  /* ── 11. CTA final ──────────────────────────────────────────── */
  .v13-final { padding: 60px 24px calc(60px + env(safe-area-inset-bottom, 0px)); }
  .v13-final__sub { font-size: 16px; line-height: 1.7; margin-bottom: 28px; }
  .v13-final__trust { margin-top: 34px; padding-top: 22px; }

  /* ── 12. Newsletter et pied de page : une zone de service ────── */
  .footer { padding: 44px 20px 28px; }
  .footer__inner { padding-top: 0; padding-bottom: 0; }
  .footer__lettre { padding-bottom: 30px; margin-bottom: 26px; }
  .footer__top--quad { grid-template-columns: 1fr 1fr; gap: 22px 16px; }
  .footer__col-links { gap: 0; }
  .footer__bottom--center { gap: 12px; padding-top: 22px; }
}


/* ============================================================
   V19 — CONTINUITÉ ENTRE LES SECTIONS · 12/09/2026
   La page se lisait comme une succession de blocs découpés : chaque
   image commençait et finissait sur une arête franche. Désormais
   chaque bloc image s'ouvre sur la couleur de la section précédente
   et se referme sur celle de la suivante. Aucune couleur nouvelle,
   aucune animation ajoutée : uniquement des raccords.
   ============================================================ */
.v16-geste--media .v16-geste__media,
.v18-panneau__visuel,
.v17-choix__img,
.v11-atelier__media { position: relative; overflow: hidden; }

/* Ouverture : le noir de la section précédente descend dans l'image. */
.v16-geste--media .v16-geste__media::before,
.v18-panneau__visuel::before,
.v11-atelier__media::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 17%;
  background: linear-gradient(to bottom, var(--v11-noir), transparent);
  pointer-events: none; z-index: 1;
}
/* Fermeture : l'image se fond dans le bloc texte qui suit. */
.v16-geste--media .v16-geste__media::after {
  content: ''; position: absolute; inset: auto 0 -1px 0; height: 24%;
  background: linear-gradient(to bottom, transparent, var(--v11-noir-2));
  pointer-events: none;
}
@media (max-width: 899px) {
  .v8-coffret__visual::before {
    content: ''; position: absolute; inset: 0 0 auto 0; height: 16%;
    background: linear-gradient(to bottom, var(--v11-noir), transparent);
    pointer-events: none; z-index: 1;
  }
}

/* Cartes du carrousel : l'image se fond dans la carte, plus d'arête. */
.v17-choix__img::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 13%;
  background: linear-gradient(to bottom, var(--v17-fond), transparent);
  pointer-events: none; z-index: 1;
}
.v17-choix__img::after {
  content: ''; position: absolute; inset: auto 0 -1px 0; height: 26%;
  background: linear-gradient(to bottom, transparent, var(--v17-fond));
  pointer-events: none;
}
.v17-choix__lien { border-radius: 3px; }
.v17-choix__pied { border-top-color: rgba(247,242,234,.08); }

/* Rituel en carrousel : même respiration, un cran plus compact. */
@media (max-width: 899px) {
  .v11-rituel__head { padding: 52px 24px 32px; }
  .v11-rituel__title { font-size: clamp(30px, 8.2vw, 46px); }
  .v11-slider { height: clamp(460px, 74svh, 640px); }
}

/* CTA final : un intérieur habité derrière la dernière question. */
.v13-final--media { position: relative; isolation: isolate; }
.v13-final--media .v13-final__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.v13-final--media .v13-final__media img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: 72% 64%;      /* garde le flacon et la lampe */
  display: block;
}
/* Le haut reste noir plein — la question se lit sans concurrence ; la
   scène n'apparaît qu'à partir des boutons, et se referme en bas. */
.v13-final--media .v13-final__veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom,
    var(--v11-noir) 0%, var(--v11-noir) 38%, rgba(10,7,4,.72) 54%,
    rgba(10,7,4,.58) 70%, rgba(10,7,4,.86) 92%, var(--v11-noir) 100%);
}
/* Les deux textes secondaires tombent sur la partie chargée de la scène. */
.v13-final--media .v13-final__alt,
.v13-final--media .v13-final__trust li { text-shadow: 0 1px 12px rgba(0,0,0,.9); }
.v13-final--media::before { z-index: 1; }        /* le halo doré passe sur l'image */
.v13-final--media .v13-final__inner { position: relative; z-index: 2; }
@media (min-width: 900px) {
  .v13-final--media .v13-final__media img { object-position: 76% 58%; }
  .v13-final--media .v13-final__veil {
    background: linear-gradient(to bottom,
      var(--v11-noir) 0%, rgba(10,7,4,.78) 22%, rgba(10,7,4,.62) 52%,
      rgba(10,7,4,.80) 84%, var(--v11-noir) 100%);
  }
}

/* ── Bloc « problème » avec son image (12/09/2026) ──────────────
   L'image ouvre la section, à ras : c'est un changement de chapitre
   après le héros. Recadrée en 4:3 pour tenir la cible de 70-80 svh —
   en 4:5 la section montait à 105 svh. */
.v16-geste--media .v16-geste__media { max-width: none; margin: 0 0 26px; }
.v16-geste--media .v16-geste__media img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  object-position: 62% 46%;   /* garde le voilage et la colonne de lumière */
  display: block;
}
@media (max-width: 899px) {
  .v16-geste--media { padding-top: 0; }
}
@media (min-width: 900px) {
  .v16-geste--media .v16-geste__media img { aspect-ratio: 21 / 9; }
}

/* ============================================================
   V18 — LES QUATRE UNIVERS · une seule section commutable
   12/09/2026. Remplace quatre modules produit successifs presque
   plein écran par un seul, où l'on passe d'une Signature à l'autre
   par onglet ou par glissement. Le client vient de CHOISIR dans le
   carrousel : ici il se PROJETTE, et il achète sans changer d'écran.
   Fonds de bloc texte relevés sur le bas de chaque scène.
   ============================================================ */
.v18-univers { background: var(--v11-noir); padding: 0 0 30px; }

.v18-univers__onglets {
  display: flex; justify-content: center; gap: 2px;
  overflow-x: auto; scrollbar-width: none;
  padding: 26px 12px 14px;
}
.v18-univers__onglets::-webkit-scrollbar { display: none; }
.v18-univers__onglet {
  flex: 0 0 auto; background: none; border: 0; cursor: pointer;
  min-height: 44px; padding: 8px 12px 10px; white-space: nowrap;
  font-family: var(--f-sans); font-size: 11.5px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(247,242,234,.46);
  border-bottom: 1px solid transparent;
  transition: color .35s ease, border-color .35s ease;
  -webkit-tap-highlight-color: transparent;
}
.v18-univers__onglet.is-on { color: var(--v11-or); border-bottom-color: var(--v11-or); }
.v18-univers__onglet:focus-visible { outline: 1px solid var(--v11-or); outline-offset: 2px; }

.v18-univers__rail {
  display: flex; overflow-x: auto;
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.v18-univers__rail::-webkit-scrollbar { display: none; }

.v18-panneau { flex: 0 0 100%; scroll-snap-align: start; background: var(--v18-bg); }
.v18-panneau--01 { --v18-bg: #1A2128; }   /* bas de scène #4B6276 — matin froid */
.v18-panneau--02 { --v18-bg: #120C09; }   /* bas de scène #0B0402 — nuit chaude */
.v18-panneau--03 { --v18-bg: #140A04; }   /* bas de scène #1E0E04 — heure dorée */
.v18-panneau--04 { --v18-bg: #0B0F0F; }   /* bas de scène #101515 — nuit satinée */

.v18-panneau__visuel {
  position: relative; width: 100%;
  aspect-ratio: 928 / 1152; overflow: hidden; background: var(--v18-bg);
}
.v18-panneau__visuel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v18-panneau__visuel::after {
  content: ''; position: absolute; inset: auto 0 -1px 0; height: 14%;
  background: linear-gradient(to bottom, transparent, var(--v18-bg));
  pointer-events: none;
}

.v18-panneau__texte { padding: 20px 22px 26px; }
.v18-panneau__num {
  display: block; font-family: var(--f-sans); font-size: 11px;
  letter-spacing: .2em; text-transform: uppercase;
  color: rgba(233,207,150,.9); margin-bottom: 8px;
}
.v18-panneau__nom {
  font-family: var(--f-serif); font-weight: 400; font-size: 26px; line-height: 1.1;
  color: var(--v11-or); margin: 0 0 8px;
}
/* Le bénéfice domine : c'est la seule phrase que le visiteur doit retenir. */
.v18-panneau__promesse {
  font-family: var(--f-serif); font-weight: 400; font-size: 23px; line-height: 1.22;
  letter-spacing: -.005em; color: var(--v11-ivoire); margin: 0 0 10px; text-wrap: balance;
}
.v18-panneau__corps {
  font-family: var(--f-sans); font-size: 15.5px; font-weight: 300; line-height: 1.6;
  color: rgba(247,242,234,.76); margin: 0; max-width: 46ch;
}
.v18-panneau__plus {
  font-family: var(--f-italic); font-style: italic; font-size: 15.5px; line-height: 1.5;
  color: var(--v11-or-doux); margin: 6px 0 0; max-width: 46ch;
}
.v18-panneau__atmo {
  font-family: var(--f-sans); font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(247,242,234,.85); margin: 14px 0 0; padding-top: 12px;
  border-top: 1px solid rgba(247,242,234,.14);
}
.v18-panneau__pied { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 16px; }
.v18-panneau__prix-ligne { display: flex; align-items: baseline; gap: 12px; }
.v18-panneau__prix { font-family: var(--f-serif); font-size: 26px; color: var(--v11-ivoire); line-height: 1; }
.v18-panneau__vol {
  font-family: var(--f-sans); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(247,242,234,.62);
}
/* Transaction : même bouton doré que le reste du site. */
.v18-panneau__buy {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; max-width: 420px; min-height: 54px; padding: 0 clamp(24px,6vw,34px);
  border: 0; border-radius: 2px; cursor: pointer;
  background: linear-gradient(180deg, #C9A24D, #B58F3D); color: #1A1206;
  /* 11,5 px : c'est le bouton d'achat principal, il ne descend pas sous le
     plancher de lisibilité des libellés fonctionnels. */
  font-family: var(--f-sans); font-size: 11.5px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  box-shadow: 0 8px 26px -12px rgba(0,0,0,.7);
  transition: background .45s ease, box-shadow .45s ease, transform .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.v18-panneau__buy:hover { background: linear-gradient(180deg, #D8B463, #C09846); }
.v18-panneau__buy:active { transform: scale(.985); }
/* Exploration : lien souligné, jamais un second bouton. */
.v18-panneau__cta {
  min-height: 44px; display: inline-flex; align-items: center;
  color: var(--v11-ivoire); font-family: var(--f-sans); font-size: 11.5px;
  letter-spacing: .18em; text-transform: uppercase; text-decoration: underline;
  text-decoration-color: rgba(201,162,77,.38); text-decoration-thickness: 1px;
  text-underline-offset: 6px; transition: text-decoration-color .35s ease;
}
.v18-panneau__cta:hover { text-decoration-color: rgba(201,162,77,.9); }

.v18-univers__compteur {
  text-align: center; margin: 14px 0 0;
  font-family: var(--f-sans); font-size: 11px; letter-spacing: .24em;
  color: rgba(247,242,234,.46);
}
.v18-univers__compteur span { color: var(--v11-ivoire); }

/* Desktop : image et texte côte à côte, l'onglet reste le pilote. */
@media (min-width: 900px) {
  .v18-univers { padding-bottom: 56px; }
  .v18-univers__onglets { padding: 48px 24px 26px; gap: 10px; }
  .v18-univers__onglet { font-size: 12.5px; padding: 10px 18px 12px; }
  .v18-panneau { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
  .v18-panneau__visuel { aspect-ratio: 928 / 1152; max-height: 76vh; }
  .v18-panneau__visuel::after { display: none; }
  .v18-panneau__texte { padding: 0 clamp(40px,5vw,80px); max-width: 560px; }
  .v18-panneau__nom { font-size: 38px; }
  .v18-panneau__promesse { font-size: 30px; }
  .v18-panneau__buy { width: auto; min-width: 280px; }
  .v18-univers__compteur { display: none; }
}


/* ============================================================
   V20 — PRODUCT STAGE · 12/09/2026 (passe 2)
   Chaque Signature tient dans un écran : nom, descripteurs, scène,
   bénéfice, prix, bouton. La scène occupe ~52 % du viewport au lieu
   de 58 %, et le recadrage écarte la bande morte en bas de la scène
   Perle d'Azur (défaut signalé). L'atmosphère de la section suit la
   Signature affichée.
   ============================================================ */
.v18-univers {
  background: var(--v18-scene, var(--v11-noir));
  transition: background-color 900ms cubic-bezier(.22,.61,.36,1);
}
.v18-univers[data-univers="01"] { --v18-scene: #121821; --v18-teinte: rgba(150,180,205,.16); }
.v18-univers[data-univers="02"] { --v18-scene: #1B1310; --v18-teinte: rgba(214,168,138,.16); }
.v18-univers[data-univers="03"] { --v18-scene: #1C1208; --v18-teinte: rgba(226,176,96,.17); }
.v18-univers[data-univers="04"] { --v18-scene: #14161A; --v18-teinte: rgba(190,176,200,.15); }
/* La lueur de la Signature remonte derrière la navigation. */
.v18-univers__onglets {
  position: relative;
  background: radial-gradient(120% 150% at 50% 120%, var(--v18-teinte), transparent 70%);
  transition: background 900ms ease;
}

.v18-panneau { background: var(--v18-scene, var(--v11-noir)); }

/* 1. Nom et descripteurs AVANT la scène : on sait ce qu'on regarde. */
/* ── §8 · Des Élixirs à L'Atelier, sans coupure ─────────────────
   La fin de la collection s'assombrit et le noir de L'Atelier monte
   à sa rencontre : le laboratoire émerge de la collection au lieu de
   commencer une nouvelle page. */
.v18-univers { position: relative; }
.v18-univers::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 90px;
  background: linear-gradient(to bottom, transparent, var(--v11-noir-2));
  pointer-events: none;
}
.v11-atelier { position: relative; }
.v11-atelier::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 64px;
  background: linear-gradient(to bottom, var(--v11-noir-2), transparent);
  pointer-events: none; z-index: 2;
}

/* ── §3 · Chapitre PROBLÈME · transition cinématographique ──────
   La scène prend l'écran et sort du héros par un fondu ; la première
   phrase se lit DANS l'image ; la phrase de résultat arrive au sortir
   de la scène ; les trois moments deviennent un rail discret. */
.v16-geste--scene { padding: 0 0 clamp(34px, 6vh, 56px); background: var(--v11-noir-2); }
.v16-geste__scene { position: relative; overflow: hidden; aspect-ratio: 4 / 5; }
.v16-geste__scene img {
  width: 100%; height: 100%; object-fit: cover; object-position: 58% 42%; display: block;
  transform: scale(1.04); transition: transform 2.4s cubic-bezier(.22,.61,.36,1);
}
.v16-geste--scene.is-vu .v16-geste__scene img { transform: scale(1); }
.v16-geste__voile {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, var(--v11-noir) 0%, rgba(10,7,4,.34) 16%, transparent 38%),
    /* La phrase d'amorce se lit sur une photographie très claire : le bas
       de la scène descend franchement, ce qui la rend lisible ET prépare
       l'entrée dans la section sombre qui suit. */
    linear-gradient(to bottom, transparent 40%, rgba(13,9,6,.58) 64%,
                    rgba(13,9,6,.90) 86%, var(--v11-noir-2) 100%);
}
.v16-geste__amorce {
  position: absolute; left: 24px; right: 24px; bottom: clamp(118px, 26vw, 150px);
  margin: 0; font-family: var(--f-serif); font-weight: 400;
  font-size: clamp(21px, 5.6vw, 28px); line-height: 1.3;
  color: #F7F2EA; text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 2px 22px rgba(0,0,0,.75);
}
.v16-geste--scene .v16-geste__inner { padding: clamp(26px, 5vw, 40px) 24px 0; }
.v16-geste--scene .v16-geste__titre { margin: 0 0 clamp(16px, 3.6vw, 24px); }
.v16-geste--scene .v16-geste__titre em {
  margin-top: 0; font-size: clamp(32px, 9vw, 44px); line-height: 1.1;
}
.v16-geste--scene .v16-geste__corps { font-size: 16px; line-height: 1.7; margin-bottom: clamp(20px, 4vw, 28px); }
/* Rail discret : une ligne, séparée par des points, jamais un bloc. */
.v16-geste--scene .v16-geste__moments {
  flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 0;
  border-top: 1px solid rgba(201,162,77,.18); padding-top: 14px;
}
.v16-geste--scene .v16-geste__moments li {
  flex: 0 0 auto; padding: 0 10px; border: 0;
  font-size: 11px; letter-spacing: .14em; color: rgba(247,242,234,.54);
}
.v16-geste--scene .v16-geste__moments li + li::before {
  content: '·'; margin-right: 12px; color: rgba(201,162,77,.5);
}
@media (min-width: 900px) {
  .v16-geste__scene { aspect-ratio: 21 / 9; }
  .v16-geste__amorce { left: 8vw; right: auto; max-width: 18ch; font-size: clamp(26px, 2.4vw, 34px); }
  .v16-geste--scene .v16-geste__inner { max-width: 760px; margin: 0 auto; text-align: center; }
}

/* ── §4 · Le choix, en un écran ────────────────────────────────
   Quatre mots d'atmosphère, quatre noms. On s'oriente, on n'achète
   pas encore : l'achat est au Product Stage, juste après. */
.v20-choix {
  list-style: none; margin: 0; padding: 0 20px;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
  max-width: 1080px; margin-inline: auto;
}
.v20-choix__item { display: flex; }
.v20-choix__lien {
  position: relative; flex: 1; display: flex; flex-direction: column; gap: 4px;
  min-height: 104px; padding: 18px 16px 20px;
  text-decoration: none; border-radius: 2px;
  background: linear-gradient(160deg, var(--v20-teinte), rgba(10,7,4,0) 82%), rgba(247,242,234,.028);
  transition: background 420ms ease, transform 200ms ease;
  -webkit-tap-highlight-color: transparent;
}
.v20-choix__item--01 { --v20-teinte: rgba(150,180,205,.20); }
.v20-choix__item--02 { --v20-teinte: rgba(214,168,138,.20); }
.v20-choix__item--03 { --v20-teinte: rgba(226,176,96,.20); }
.v20-choix__item--04 { --v20-teinte: rgba(190,176,200,.18); }
.v20-choix__mot {
  font-family: var(--f-sans); font-size: 11px; font-weight: 500;
  letter-spacing: .24em; text-transform: uppercase; color: var(--v11-or);
}
.v20-choix__nom {
  font-family: var(--f-serif); font-size: 22px; line-height: 1.15;
  color: var(--v11-ivoire); margin-top: auto;
}
.v20-choix__lien:active { transform: scale(.99); }
.v20-choix__lien:focus-visible { outline: 1px solid var(--v11-or); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .v20-choix__lien:hover { background: linear-gradient(160deg, var(--v20-teinte), rgba(10,7,4,0) 70%), rgba(247,242,234,.05); }
}
@media (min-width: 900px) {
  .v20-choix { grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 0 40px; }
  .v20-choix__lien { min-height: 132px; padding: 22px 20px 24px; }
  .v20-choix__nom { font-size: 25px; }
}

/* ── §5 · Les preuves, par ordre de valeur commerciale ──────────
   « 3 pulvérisations » est l'argument qui vend. « 250 ml » est une
   information de format : les deux n'ont plus le même poids. */
.v20-preuves { max-width: 640px; margin: 0 auto; padding: 0 24px; text-align: center; }
.v20-preuves__phare { margin: 0 0 22px; }
.v20-preuves__phare strong {
  display: block; font-family: var(--f-serif); font-weight: 400;
  font-size: clamp(30px, 8.4vw, 44px); line-height: 1.1; color: var(--v11-ivoire);
}
.v20-preuves__phare span {
  display: block; margin-top: 8px;
  font-family: var(--f-sans); font-size: 15px; font-weight: 300;
  color: rgba(247,242,234,.72);
}
.v20-preuves__second { margin: 0 0 22px; padding-top: 20px; border-top: 1px solid rgba(201,162,77,.20); }
.v20-preuves__second strong {
  display: block; font-family: var(--f-sans); font-size: 12.5px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--v11-or);
}
.v20-preuves__second span {
  display: block; margin-top: 6px;
  font-family: var(--f-sans); font-size: 14.5px; font-weight: 300; color: rgba(247,242,234,.68);
}
.v20-preuves__mineur { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.v20-preuves__mineur li {
  font-family: var(--f-sans); font-size: 13px; font-weight: 300; line-height: 1.5;
  color: rgba(247,242,234,.64);
}
.v20-preuves__mineur strong {
  font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  font-size: 11px; color: rgba(247,242,234,.72); margin-right: 6px;
}
@media (min-width: 900px) {
  .v20-preuves { max-width: 760px; }
  .v20-preuves__mineur { grid-template-columns: 1fr 1fr; gap: 18px; }
}

.v18-panneau__entete { padding: 14px 22px 12px; }
.v18-panneau__nom {
  font-family: var(--f-serif); font-weight: 400; font-size: 27px; line-height: 1.08;
  color: var(--v11-or); margin: 0 0 5px;
}
.v18-panneau__atmo {
  font-family: var(--f-sans); font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(247,242,234,.66); margin: 0; padding: 0; border: 0;
}

/* 2. La scène : recadrée, jamais plus de ~52 % du viewport. */
.v18-panneau__visuel { aspect-ratio: 39 / 43; }
.v18-panneau__visuel img { object-position: 50% 30%; }

/* 3. Vente : bénéfice, prix, bouton — dans le même écran que la scène. */
.v18-panneau__vente { padding: 16px 22px 6px; }
.v18-panneau__promesse {
  font-family: var(--f-serif); font-weight: 400; font-size: 24px; line-height: 1.2;
  color: var(--v11-ivoire); margin: 0 0 12px; text-wrap: balance;
}
.v18-panneau__prix-ligne { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }

/* 4. Secondaire : le corps, la projection, le lien de fiche. */
.v18-panneau__texte { padding: 12px 22px 26px; }
.v18-panneau__corps { margin: 0; }
.v18-panneau__cta { margin-top: 10px; }

@media (min-width: 900px) {
  .v18-panneau {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "img entete" "img vente" "img texte";
    align-content: center; column-gap: clamp(32px,4vw,72px);
  }
  .v18-panneau__visuel { grid-area: img; aspect-ratio: 928 / 1152; }
  .v18-panneau__visuel img { object-position: 50% 50%; }
  .v18-panneau__entete { grid-area: entete; padding: 0 clamp(40px,5vw,80px) 10px 0; align-self: end; }
  .v18-panneau__vente  { grid-area: vente;  padding: 0 clamp(40px,5vw,80px) 0 0; }
  .v18-panneau__texte  { grid-area: texte;  padding: 14px clamp(40px,5vw,80px) 0 0; }
  .v18-panneau__nom { font-size: 40px; }
  .v18-panneau__promesse { font-size: 30px; }
}


/* ============================================================
   V21 — CONTINUITÉ TOTALE · 12/09/2026 (passe 3)
   Une seule règle : plus jamais « photo puis bloc de couleur ».
   La scène se prolonge derrière le bénéfice, le prix et l'achat ;
   la teinte de chaque chapitre contamine le suivant ; la barre
   d'annonce se retire passé le héros. Aucun asset, aucun texte.
   ============================================================ */

/* ── Le header rend sa hauteur après le héros ────────────────── */
.topbar { transition: transform 480ms cubic-bezier(.22,.61,.36,1); }
.nav {
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              backdrop-filter var(--dur) var(--ease),
              top 480ms cubic-bezier(.22,.61,.36,1), height 480ms cubic-bezier(.22,.61,.36,1);
}
@media (max-width: 899px) {
  .page-defilee .topbar { transform: translateY(-100%); }
  .page-defilee .nav { top: 0; height: 56px; }
}

/* ── Product Stage : la photographie porte la vente ──────────────
   La scène descend derrière le bénéfice, le prix et le bouton ; le
   bloc de vente remonte dans son dégradé. Le panneau n'a plus de
   couleur propre : la teinte animée de la section respire derrière,
   et pendant le glissement l'univers précédent déteint sur le
   suivant le temps que le fond accompagne. */
.v18-panneau, .v18-panneau__visuel { background: transparent; }
@media (max-width: 899px) {
  .v18-panneau__visuel { aspect-ratio: 39 / 50; }
  /* La scène émerge de la teinte de sa Signature : plus d'arête entre
     l'atmosphère et la photographie. */
  .v18-panneau__visuel::before {
    height: 16%;
    background: linear-gradient(to bottom, var(--v18-scene, var(--v11-noir)), transparent);
  }
  .v18-panneau__visuel::after {
    height: 54%;
    background: linear-gradient(to bottom,
      transparent 0%, rgba(10,8,6,.38) 30%, rgba(10,8,6,.82) 62%, rgba(10,8,6,.96) 100%);
  }
  .v18-panneau__vente { margin-top: -172px; position: relative; z-index: 2; padding-top: 0; }
  .v18-panneau__texte { position: relative; z-index: 2; }
  .v18-panneau__promesse { text-shadow: 0 1px 14px rgba(0,0,0,.55); }
}
/* Entrée de la section : le noir du chapitre précédent descend, et la
   lueur de la Signature s'éteint sur la section, pas sur un conteneur —
   le halo des onglets se coupait net à son bord. */
.v18-univers__onglets { background: none; }
.v18-univers::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 230px; z-index: 0;
  background:
    linear-gradient(to bottom, var(--v11-noir-2), transparent 70px),
    radial-gradient(140% 100% at 50% 0%, var(--v18-teinte, transparent), transparent 75%);
  pointer-events: none;
}
.v18-univers__rail, .v18-univers__compteur { position: relative; z-index: 1; }

/* ── Les preuves : pont neutre entre la collection et L'Atelier ──
   L'ancien dégradé bleu (calibré quand la section précédait la photo
   de Perle d'Azur) n'a plus de raison d'être depuis le déplacement. */
.v11-bar { background: var(--v11-noir-2); }
@media (max-width: 899px) { .v11-bar::after { display: none; } }

/* ── L'Atelier s'achève dans la chaleur du Rituel ────────────── */
.v11-atelier::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 90px; z-index: 2;
  background: linear-gradient(to bottom, transparent, #150E08);
  pointer-events: none;
}
.v11-rituel { background: linear-gradient(to bottom, #150E08 0, var(--v11-noir) 240px); }

/* ── Le Rituel se dépose sur le brun du Coffret ──────────────── */
.v11-rituel::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 72px; z-index: 3;
  background: linear-gradient(to bottom, transparent, #17120C);
  pointer-events: none;
}

/* ── Le Coffret : même principe que les Product Stages ───────── */
@media (max-width: 899px) {
  .v8-coffret__visual::before {
    background: linear-gradient(to bottom, #17120C, transparent);
  }
  .v8-coffret__visual::after {
    height: 42%;
    background: linear-gradient(to bottom, transparent, rgba(23,18,12,.6) 55%, var(--v14-bg) 100%);
  }
  .v8-coffret__content {
    margin-top: -58px; position: relative; z-index: 2;
    background: transparent !important;
    padding-top: 0 !important;
  }
}

/* ── Pré-lancement : une preuve, pas un chapitre ─────────────── */
@media (max-width: 899px) {
  .v4-avis--prelaunch { padding: 34px 24px 30px !important; }
  .v4-avis--prelaunch .v4-avis__header { margin-bottom: 8px; }
  .v4-avis--prelaunch .v4-avis__title { font-size: clamp(24px, 6.6vw, 30px); }
}

/* ── CTA final : titre court, section resserrée ──────────────── */
@media (max-width: 899px) {
  .v13-final { padding: 52px 24px calc(46px + env(safe-area-inset-bottom, 0px)); }
}


/* ============================================================
   V22 — L'APRÈS-HÉROS ALLÉGÉ · 12/09/2026 (passe 4)
   Moins expliquer, plus faire ressentir : la scène du problème ne
   porte plus que ses deux messages, le choix devient quatre portes
   en matière d'univers, la preuve devient une bande. Aucun nouvel
   asset : les portes réutilisent les scènes déjà chargées par les
   Product Stages, cadrées côté décor.
   ============================================================ */

/* ── Le problème : l'image et deux messages, rien d'autre ────── */
@media (max-width: 899px) {
  .v16-geste--scene { padding-bottom: 0; }
  .v16-geste--scene .v16-geste__inner {
    position: relative; z-index: 2;
    margin-top: -52px;                 /* le titre entre dans le fondu de la scène */
    padding: 0 24px 30px;
  }
  .v16-geste--scene .v16-geste__titre { margin: 0; }
  .v16-geste--scene .v16-geste__titre em {
    margin-top: 0; font-size: clamp(30px, 8.4vw, 40px);
    text-shadow: 0 2px 18px rgba(0,0,0,.55);
  }

  /* Enchaînement direct : la question colle au message. */
  .v15-atmo { padding: 22px 0 30px; }
  .v15-atmo__title {
    font-size: clamp(22px, 5.9vw, 30px); line-height: 1.24;
    padding: 0 24px; margin-bottom: 18px;
  }
}

/* ── Quatre portes d'entrée dans les univers ─────────────────── */
.v20-choix__lien {
  min-height: 132px; padding: 14px 15px 15px;
  background-size: 190% auto; background-repeat: no-repeat;
  position: relative; isolation: isolate; overflow: hidden; border-radius: 2px;
}
/* Cadrées côté décor : les flacons sont à droite des scènes. */
.v20-choix__item--01 .v20-choix__lien { background-image: url(/assets/home/signatures/scenes/perle-azur.webp); background-position: 0% 26%; }
.v20-choix__item--02 .v20-choix__lien { background-image: url(/assets/home/signatures/scenes/velours-sucre.webp); background-position: 0% 42%; }
.v20-choix__item--03 .v20-choix__lien { background-image: url(/assets/home/signatures/scenes/nectar-dore.webp); background-position: 0% 60%; }
.v20-choix__item--04 .v20-choix__lien { background-image: url(/assets/home/signatures/scenes/musc-de-soie.webp); background-position: 14% 38%; }
.v20-choix__lien::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(168deg,
    rgba(8,6,5,.74) 0%, rgba(8,6,5,.22) 46%, rgba(8,6,5,.30) 68%, rgba(8,6,5,.72) 100%);
  transition: background 300ms ease;
}
.v20-choix__mot, .v20-choix__nom { position: relative; z-index: 1; }
.v20-choix__mot { text-shadow: 0 1px 8px rgba(0,0,0,.8); }
.v20-choix__nom { text-shadow: 0 1px 12px rgba(0,0,0,.75); }
@media (hover: hover) and (pointer: fine) {
  .v20-choix__lien:hover::before {
    background: linear-gradient(168deg,
      rgba(8,6,5,.62) 0%, rgba(8,6,5,.12) 46%, rgba(8,6,5,.20) 68%, rgba(8,6,5,.62) 100%);
  }
}
@media (min-width: 900px) { .v20-choix__lien { min-height: 156px; } }

/* ── La bande de preuve : une affirmation, une ligne ─────────── */
.v11-bar { padding: 34px 24px 36px; }
.v20-preuves--bande { max-width: 640px; }
.v20-preuves--bande .v20-preuves__phare { margin: 0 0 14px; }
.v20-preuves--bande .v20-preuves__phare strong { font-size: clamp(27px, 7.4vw, 36px); }
.v20-preuves--bande .v20-preuves__phare span { font-size: 14.5px; margin-top: 6px; }
.v20-preuves--bande { padding-inline: 0; }   /* le double retrait pliait la ligne */
.v20-preuves__ligne {
  margin: 0; padding-top: 14px;
  border-top: 1px solid rgba(201,162,77,.16);
  font-family: var(--f-sans); font-size: 11px; font-weight: 500;
  letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
  color: rgba(247,242,234,.56);
}


/* ============================================================
   V23 — PRODUCT STAGE EN FONDU · 12/09/2026 (passe 5, prototype)
   Un seul espace qui change d'atmosphère. Les quatre panneaux sont
   empilés dans la même cellule : le décor sortant se dissout en
   avançant très légèrement, le suivant se dépose en reculant, la
   lumière vire avant l'image, le texte émerge après. Réglages de
   lumière prototypés sur Perle ↔ Velours.
   ============================================================ */

/* ── L'empilement : plus de rail, une scène ──────────────────── */
.v18-univers--fondu { position: relative; }
.v18-univers--fondu .v18-univers__rail {
  display: grid; overflow: visible;
  scroll-snap-type: none;
}
.v18-univers--fondu .v18-panneau {
  grid-area: 1 / 1; min-width: 0;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 700ms cubic-bezier(.4,0,.2,1), visibility 0s linear 760ms;
}
.v18-univers--fondu .v18-panneau.est-actif {
  opacity: 1; visibility: visible; pointer-events: auto; z-index: 1;
  transition-delay: 90ms, 0s;
}
/* Avant l'initialisation (ou sans JavaScript) : le premier univers. */
.v18-univers--fondu:not([data-univers]) .v18-panneau:first-child {
  opacity: 1; visibility: visible; pointer-events: auto;
}

/* Le décor : le sortant avance en se dissolvant, l'entrant se dépose.
   Le geste a une direction (--v23-sens, posé par le contrôleur) : le
   décor entrant arrive de quelques pixels du côté du geste, le sortant
   s'efface de l'autre — un souffle, pas un carrousel. */
.v18-univers--fondu .v18-panneau__visuel img {
  transform: scale(1.035) translateX(calc(var(--v23-sens, 0) * 10px));
  transition: transform 950ms cubic-bezier(.22,.61,.36,1);
}
.v18-univers--fondu .v18-panneau.est-sortant .v18-panneau__visuel img {
  transform: scale(1.035) translateX(calc(var(--v23-sens, 0) * -10px));
}
.v18-univers--fondu .v18-panneau.est-actif .v18-panneau__visuel img { transform: scale(1) translateX(0); }

/* Le texte émerge après la lumière et le décor. */
.v18-univers--fondu .v18-panneau__entete,
.v18-univers--fondu .v18-panneau__vente,
.v18-univers--fondu .v18-panneau__texte {
  opacity: 0; transform: translateY(8px);
  transition: opacity 300ms ease, transform 300ms ease;
}
.v18-univers--fondu .v18-panneau.est-actif .v18-panneau__entete { opacity: 1; transform: none; transition-delay: 300ms; }
.v18-univers--fondu .v18-panneau.est-actif .v18-panneau__vente  { opacity: 1; transform: none; transition-delay: 380ms; }
.v18-univers--fondu .v18-panneau.est-actif .v18-panneau__texte  { opacity: 1; transform: none; transition-delay: 460ms; }

/* ── La lumière vire avant que l'image n'arrive ──────────────── */
.v18-univers--fondu .v23-lumiere {
  position: absolute; left: 0; right: 0; top: 0; height: 660px;
  pointer-events: none; z-index: 1;
}
.v23-lumiere i { position: absolute; inset: 0; opacity: 0; transition: opacity 640ms ease; }
/* Quatre lumières, une par atmosphère : blanche → enveloppante →
   solaire → satinée. La lumière vire avant que le décor n'arrive. */
.v23-lumiere__froide  { background: radial-gradient(120% 82% at 22% 30%, rgba(158,190,214,.17), transparent 70%); }
.v23-lumiere__chaude  { background: radial-gradient(120% 86% at 74% 44%, rgba(226,168,110,.19), transparent 72%); }
.v23-lumiere__solaire { background: radial-gradient(130% 90% at 76% 26%, rgba(240,190,110,.22), transparent 70%); }
.v23-lumiere__satinee { background: radial-gradient(120% 85% at 58% 38%, rgba(186,164,192,.14), transparent 72%); }
.v18-univers--fondu[data-univers="01"] .v23-lumiere__froide  { opacity: 1; }
.v18-univers--fondu[data-univers="02"] .v23-lumiere__chaude  { opacity: 1; }
.v18-univers--fondu[data-univers="03"] .v23-lumiere__solaire { opacity: 1; }
.v18-univers--fondu[data-univers="04"] .v23-lumiere__satinee { opacity: 1; }

/* ── L'entête entre dans la scène (composition éditoriale) ───── */
@media (max-width: 899px) {
  .v18-univers--fondu .v18-panneau__entete {
    position: relative; z-index: 2;
    margin-bottom: -42px; padding-bottom: 0;
  }
  .v18-univers--fondu .v18-panneau__nom { text-shadow: 0 1px 14px rgba(0,0,0,.45); }
  .v18-univers--fondu .v18-panneau__atmo { text-shadow: 0 1px 8px rgba(0,0,0,.55); }
}

/* ── La progression : un fil, pas un second sélecteur ────────── */
.v23-prog {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  gap: clamp(6px, 2vw, 12px); padding: 22px 14px 12px;
}
.v23-prog__nom {
  background: none; border: 0; cursor: pointer;
  min-height: 44px; padding: 10px 3px;
  font-family: var(--f-sans); font-size: 11px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(247,242,234,.4); position: relative;
  transition: color 420ms ease; -webkit-tap-highlight-color: transparent;
}
.v23-prog__nom.is-on { color: var(--v11-or); }
.v23-prog__nom::after {
  content: ''; position: absolute; left: 2px; right: 2px; bottom: 8px; height: 1px;
  background: var(--v11-or); transform: scaleX(0); transform-origin: left;
  transition: transform 520ms cubic-bezier(.22,.61,.36,1);
}
.v23-prog__nom.is-on::after { transform: scaleX(1); }
.v23-prog__nom:focus-visible { outline: 1px solid var(--v11-or); outline-offset: 2px; }
.v23-prog__lien { flex: 0 1 clamp(8px, 3vw, 24px); height: 1px; background: rgba(201,162,77,.22); }
.v18-univers--fondu .v18-univers__compteur { display: none; }

/* ── Arrivée directe depuis une porte : aucune transition ────── */
.v23-sans-transition .v18-panneau,
.v23-sans-transition .v18-panneau *,
.v23-sans-transition .v23-lumiere i { transition: none !important; }

/* ── Mouvement réduit : tout est immédiat ────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .v18-univers--fondu .v18-panneau,
  .v18-univers--fondu .v18-panneau__entete,
  .v18-univers--fondu .v18-panneau__vente,
  .v18-univers--fondu .v18-panneau__texte,
  .v23-lumiere i, .v23-prog__nom::after { transition: none !important; }
  .v18-univers--fondu .v18-panneau__visuel img { transform: none !important; transition: none !important; }
}


/* ============================================================
   V24 — COMPOSITION PERLE « VARIANTE C » · 12/09/2026 (choix Samy)
   La scène pleine : le nom entre dans l'image, le bénéfice n'apparaît
   que dans la bande calme SOUS la base du flacon, la vente enchaîne
   sur la même teinte. Sur mobile, le fil « 01 ─── 04 » remplace les
   onglets nommés ; le passage d'une Signature à l'autre reste porte
   d'entrée + glissement horizontal. Perle validée le 12/09/2026, puis
   étendue à Velours ; Nectar et Musc après validation.
   ============================================================ */

.v23-fil { display: none; }
.v23-fleche { display: none; }

@media (max-width: 899px) {
  .v18-univers--fondu .v23-prog { display: none; }
  .v18-univers--fondu .v23-fil {
    position: relative; z-index: 2;
    display: flex; align-items: center; gap: 12px;
    padding: 18px 22px 10px;
    font-family: var(--f-sans); font-size: 10.5px; letter-spacing: .18em;
    color: rgba(247,242,234,.62);
  }
  .v23-fil__barre { flex: 1; height: 1px; background: rgba(247,242,234,.16); position: relative; }
  .v23-fil__barre i {
    position: absolute; top: 0; left: 0; height: 1px; width: 25%;
    background: var(--v11-or);
    transition: left 520ms cubic-bezier(.22,.61,.36,1);
  }

  /* La composition, sur les quatre Signatures. Le flacon reste
     intégralement visible : aucun texte ne redescend sur lui. Les
     voiles reprennent la teinte de scène de CHAQUE univers pour que
     l'image fonde dans le fond sans arête. */
  .v18-univers--fondu .v18-panneau { position: relative; }
  .v18-univers--fondu .v18-panneau .v18-panneau__entete {
    position: absolute; z-index: 3; top: 16px; left: 22px;
    margin: 0; padding: 0;
  }
  .v18-univers--fondu .v18-panneau .v18-panneau__visuel { aspect-ratio: 39 / 52; }
  .v18-univers--fondu .v18-panneau .v18-panneau__visuel img { object-position: 50% 34%; }
  .v18-univers--fondu .v18-panneau .v18-panneau__vente {
    margin-top: -56px; position: relative; z-index: 2; padding-top: 0;
  }
  .v18-univers--fondu .v18-panneau .v18-panneau__promesse { font-size: 23px; }
  /* Voiles haut/bas assortis à la teinte de scène (--v18-scene). */
  .v18-univers--fondu .v18-panneau--01 .v18-panneau__visuel::before {
    height: 20%; background: linear-gradient(to bottom, rgba(14,17,22,.6), transparent); }
  .v18-univers--fondu .v18-panneau--01 .v18-panneau__visuel::after {
    height: 34%; background: linear-gradient(to bottom, transparent, rgba(18,24,33,.55) 55%, rgba(18,24,33,.97) 100%); }
  .v18-univers--fondu .v18-panneau--02 .v18-panneau__visuel::before {
    height: 20%; background: linear-gradient(to bottom, rgba(20,14,12,.6), transparent); }
  .v18-univers--fondu .v18-panneau--02 .v18-panneau__visuel::after {
    height: 34%; background: linear-gradient(to bottom, transparent, rgba(27,19,16,.55) 55%, rgba(27,19,16,.97) 100%); }
  .v18-univers--fondu .v18-panneau--03 .v18-panneau__visuel::before {
    height: 20%; background: linear-gradient(to bottom, rgba(21,14,6,.6), transparent); }
  .v18-univers--fondu .v18-panneau--03 .v18-panneau__visuel::after {
    height: 34%; background: linear-gradient(to bottom, transparent, rgba(28,18,8,.55) 55%, rgba(28,18,8,.97) 100%); }
  .v18-univers--fondu .v18-panneau--04 .v18-panneau__visuel::before {
    height: 20%; background: linear-gradient(to bottom, rgba(15,17,20,.6), transparent); }
  .v18-univers--fondu .v18-panneau--04 .v18-panneau__visuel::after {
    height: 34%; background: linear-gradient(to bottom, transparent, rgba(20,22,26,.55) 55%, rgba(20,22,26,.97) 100%); }

  /* ── Le passage d'un Élixir à l'autre : deux flèches sur pastille
     de verre sombre, à mi-hauteur de la scène, loin du flacon. La
     pastille garantit la lisibilité sur les scènes claires (Perle)
     comme sombres (Musc) ; la flèche « suivant » fait un léger appel
     du geste à l'arrivée sur la scène, puis se tient tranquille. ── */
  .v18-univers--fondu .v18-univers__rail { position: relative; }
  .v18-univers--fondu .v23-fleche {
    display: flex; align-items: center; justify-content: center;
    position: absolute; z-index: 4;
    top: calc(66.66vw - 30px); width: 48px; height: 60px;
    padding: 0; border: 0; background: none; cursor: pointer;
    color: rgba(247,242,234,.95);
    -webkit-tap-highlight-color: transparent;
    transition: opacity 300ms ease;
  }
  .v23-fleche--prec { left: 6px; }
  .v23-fleche--suiv { right: 6px; }
  .v23-fleche::before {
    content: ''; position: absolute; width: 42px; height: 42px;
    border-radius: 50%;
    background: rgba(10, 12, 16, .42);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border: 1px solid rgba(247, 242, 234, .3);
    box-shadow: 0 2px 14px rgba(0, 0, 0, .28);
  }
  .v23-fleche svg { position: relative; }
  .v23-fleche[disabled] { opacity: .2; pointer-events: none; }
  .v23-fleche:focus-visible { outline: 1px solid var(--v11-or); outline-offset: 2px; }
  /* L'appel du geste : deux petits mouvements, une seule fois. */
  @keyframes v23-appel { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
  .v23-fleche--suiv.v23-appel { animation: v23-appel 850ms ease-in-out 2; animation-delay: 700ms; }
}

@media (prefers-reduced-motion: reduce) {
  .v23-fil__barre i { transition: none !important; }
  .v23-fleche--suiv.v23-appel { animation: none !important; }
}


/* ============================================================
   V25 — L'ATMOSPHÈRE QUI VIRE · 12/09/2026
   Chaque panneau porte le fond de SON univers en dur : le virage de
   teinte se fait dans le fondu croisé lui-même (le bleu de Perle se
   retire pendant que le brun de Velours s'installe), au lieu de
   sauter quand data-univers change. Le fond de section, derrière,
   continue de virer en 900 ms.
   ============================================================ */
.v18-univers--fondu .v18-panneau--01 { background: #121821; }
.v18-univers--fondu .v18-panneau--02 { background: #1B1310; }
.v18-univers--fondu .v18-panneau--03 { background: #1C1208; }
.v18-univers--fondu .v18-panneau--04 { background: #14161A; }


/* ============================================================
   V26 — LE MOMENT DE PROJECTION · 12/09/2026 (passe ciblée)
   1) La scène « Vous avez rangé » devient scroll-driven : les trois
      mots apparaissent au fil du défilement, la lumière se réchauffe,
      les mots se retirent et « Il reste… » prend le relais DANS la
      scène — plus de bloc de texte séparé sous l'image. La variable
      --gp (0→1, posée par le contrôleur) pilote tout ; sans JS ou en
      mouvement réduit elle vaut 1 : état final composé, tout lisible.
   2) Les quatre portes deviennent des scènes émotionnelles de la même
      campagne (aucun flacon), avec micro-réaction au toucher.
   ============================================================ */

/* ── 1 · La scène qui se transforme ──────────────────────────── */
.v16-geste--vivante { --gp: 1; padding-bottom: 0; }
.v16-geste--vivante .v16-geste__scene img {
  transform: translateY(calc(var(--gp) * -12px)) scale(calc(1.07 - var(--gp) * 0.05));
  transition: none;
}
/* La lumière se réchauffe et l'exposition descend : la pièce passe du
   matin cru au moment ressenti. */
.v16-geste__chaleur {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 68% 58%, rgba(226,168,110,.26), transparent 70%),
    linear-gradient(to bottom, rgba(20,12,6,.14), rgba(20,12,6,.30));
  opacity: clamp(0, (var(--gp) - .46) * 3.2, 1);
}
/* Les trois mots : un par respiration de scroll, puis ils se retirent
   sans disparaître. */
.v16-geste--vivante .v16-geste__amorce {
  position: absolute; top: clamp(52px, 13vw, 92px); left: 24px; right: 24px; bottom: auto;
  display: grid; gap: 7px;
  opacity: calc(1 - clamp(0, (var(--gp) - .5) * 2.2, .72));
}
.v16-geste__mot { display: block; }
.v16-geste__mot--1 {
  opacity: clamp(0, (var(--gp) - .05) * 11, 1);
  transform: translateY(calc((1 - clamp(0, (var(--gp) - .05) * 11, 1)) * 12px));
}
.v16-geste__mot--2 {
  opacity: clamp(0, (var(--gp) - .17) * 11, 1);
  transform: translateY(calc((1 - clamp(0, (var(--gp) - .17) * 11, 1)) * 12px));
}
.v16-geste__mot--3 {
  opacity: clamp(0, (var(--gp) - .29) * 11, 1);
  transform: translateY(calc((1 - clamp(0, (var(--gp) - .29) * 11, 1)) * 12px));
}
/* « Il reste… » prend le relais, dans la scène, sur le bas assombri. */
.v16-geste--vivante .v16-geste__titre {
  position: absolute; left: 24px; right: 24px; bottom: clamp(40px, 10vw, 76px);
  margin: 0;
  opacity: clamp(0, (var(--gp) - .54) * 4, 1);
  transform: translateY(calc((1 - clamp(0, (var(--gp) - .54) * 4, 1)) * 16px));
}
.v16-geste--vivante .v16-geste__titre em {
  margin-top: 0; font-size: clamp(28px, 7.8vw, 40px); line-height: 1.12;
  text-shadow: 0 1px 3px rgba(0,0,0,.85), 0 2px 24px rgba(0,0,0,.6);
}
@media (min-width: 900px) {
  .v16-geste--vivante .v16-geste__amorce { left: 8vw; right: auto; top: 12vh; }
  .v16-geste--vivante .v16-geste__titre { left: 8vw; right: auto; bottom: 12vh; text-align: left; }
}

/* ── 2 · Les portes émotionnelles ────────────────────────────── */
.v20-choix__lien { background-image: none !important; min-height: 150px; }
.v20-choix__fond {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.001);
  transition: transform 220ms ease;
}
/* Images portrait 3:4 (assets Samy 12/09) : cadrer la zone parlante. */
.v20-choix__item--01 .v20-choix__fond { object-position: 50% 62%; }
.v20-choix__item--02 .v20-choix__fond { object-position: 50% 44%; }
.v20-choix__item--03 .v20-choix__fond { object-position: 50% 55%; }
.v20-choix__item--04 .v20-choix__fond { object-position: 50% 42%; }
/* Le voile laisse la scène vendre ; les deux textes restent lisibles. */
.v20-choix__lien::before {
  background: linear-gradient(168deg,
    rgba(8,6,5,.56) 0%, rgba(8,6,5,.10) 46%, rgba(8,6,5,.16) 68%, rgba(8,6,5,.58) 100%);
}
/* Le toucher : on ENTRE dans la scène — elle s'approche, le voile se
   retire, le nom gagne en présence. 220 ms. */
.v20-choix__lien { transition: background 420ms ease; }
.v20-choix__lien:active { transform: none; }
.v20-choix__lien:active .v20-choix__fond { transform: scale(1.05); }
.v20-choix__lien:active::before {
  background: linear-gradient(168deg,
    rgba(8,6,5,.42) 0%, rgba(8,6,5,.04) 46%, rgba(8,6,5,.08) 68%, rgba(8,6,5,.46) 100%);
}
.v20-choix__nom { transition: transform 220ms ease; }
.v20-choix__lien:active .v20-choix__nom { transform: translateY(-2px); }
@media (min-width: 900px) {
  .v20-choix__lien { min-height: 176px; }
  .v20-choix__lien:hover .v20-choix__fond { transform: scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
  .v16-geste--vivante { --gp: 1; }
  .v16-geste--vivante .v16-geste__scene img { transform: none !important; }
  .v20-choix__fond, .v20-choix__nom { transition: none !important; }
}