/* ============================================================
   9MM — VIDEOS PRODUIT (loop hero + scroll scrubbe)
   Partage par body.html et mind.html. Le fond des videos est
   noir pur (#000) -> se fond dans la page. Mobile-first. "pv-".
   ============================================================ */

/* ---- Loop hero : remplace la canette statique ---- */
.pp-hero-media .pp-hero-video {
  display: block;
  height: clamp(320px, 56vh, 560px);
  width: auto;
  max-width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: contain;
  filter: drop-shadow(0 26px 44px rgba(0, 0, 0, 0.7));
  user-select: none;
  -webkit-user-drag: none;
  background: transparent;
  /* Fond noir ; masque doux pour fondre les bords du cadre dans la page
     (rayon = demi-cadre -> le fondu agit bien sur les bords visibles) */
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 80%, transparent 100%);
          mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 80%, transparent 100%);
}

/* ---- Section scroll scrubbe : la video avance avec le scroll ---- */
.pv-scroll {
  position: relative;
  height: 320vh;                 /* distance de scroll = duree du scrub */
  background: var(--bg);
}
.pv-scroll-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;               /* plein ecran reel sur mobile (barre URL) */
  display: grid;
  place-items: center;
  overflow: hidden;
}
/* Plus de lueur d'accent derrière la canette : le fond doit être UNI (retour Allan
   23/06) — la lueur faisait apparaître le carré du cadre vidéo. */
.pv-scroll-video {
  position: relative;
  z-index: 1;
  height: min(72svh, 720px);     /* canette entiere visible, place pour entete + legendes */
  width: auto;
  max-width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: contain;
  filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.6));
  /* Fond vidéo écrasé en #000 pur (crush ffmpeg) -> AUCUN masque : fond uniforme,
     pas de réduction ovale (retour Allan 23/06). */
}
/* Legendes-benefices : N elements, reveles un a un par le scroll (classe .is-on
   posee par product-scroll.js). Mobile-first = en bas, centre, un a la fois. */
.pv-scroll-cap {
  position: absolute;
  z-index: 2;
  max-width: 80vw;
  left: 50%;
  bottom: 11vh;
  transform: translateX(-50%);
  text-align: center;
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
}
.pv-scroll-cap.is-on { opacity: 1; }
.pv-scroll-cap .k {
  display: block;
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 6px;
}
.pv-scroll-cap .t { font-size: 1rem; line-height: 1.5; color: #e9e9f1; }
/* Lisibilité par-dessus la canette (retour Allan 23/06) */
.pv-scroll-cap .k, .pv-scroll-cap .t { text-shadow: 0 2px 14px rgba(0,0,0,.92); }

/* ============================================================
   V2.1 — Présentation de la canette DANS l'animation (retour Allan 23/06)
   La présentation (nom + accroche) est la 1re révélation du scroll
   (caps[0], visible à l'arrivée), puis transition vers les bénéfices.
   ============================================================ */
.pv-back { position: absolute; z-index: 4; top: 16px; left: 18px; pointer-events: auto; }
.pv-scroll-cap--intro {
  left: 50%; right: auto; transform: translateX(-50%);
  top: 8vh; bottom: auto; max-width: min(92vw, 660px); text-align: center;
}
.pv-cap-k {
  display: block; font-size: .74rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 10px; text-shadow: 0 2px 14px rgba(0,0,0,.92);
}
.pv-cap-title {
  display: block; margin: 0; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2rem, 8vw, 3.4rem); line-height: 1.04; text-transform: uppercase;
  color: var(--white); text-shadow: 0 3px 22px rgba(0,0,0,.96);
}
.pv-cap-hook {
  display: block; margin-top: 10px; font-size: clamp(1rem, 2.4vw, 1.2rem);
  color: var(--accent); text-shadow: 0 2px 14px rgba(0,0,0,.92);
}
.pv-cap-hint {
  display: block; margin-top: 22px; font-size: .72rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); text-shadow: 0 2px 12px rgba(0,0,0,.92);
  animation: pv-bounce 1.8s ease-in-out infinite;
}

@media (max-width: 768px) {
  .pv-scroll { height: 260vh; }
  .pp-buy { margin-top: -32vh; }            /* overlap réduit sur mobile (#4) */
  .pv-scroll-cap { bottom: 9vh; }
  /* Présentation en haut + canette descendue : l'accroche ne tombe plus sur la
     canette même quand le titre passe sur 2 lignes (retour Allan 23/06, mobile). */
  .pv-scroll-cap--intro { top: 4vh; max-width: 92vw; }
  .pv-cap-title { font-size: clamp(1.85rem, 8.5vw, 2.5rem); }
  .pv-scroll-video { height: min(64svh, 560px); transform: translateY(5vh); }
}

/* Desktop : les 4 legendes flanquent la canette (cote = --l/--r ; hauteur = --hi/--lo). */
@media (min-width: 1000px) {
  .pv-scroll-cap { max-width: 250px; left: auto; right: auto; top: auto; bottom: auto; transform: none; text-align: left; }
  .pv-scroll-cap--l  { right: calc(50% + 240px); text-align: right; }
  .pv-scroll-cap--r  { left:  calc(50% + 240px); }
  .pv-scroll-cap--hi { top: 22vh; }
  .pv-scroll-cap--lo { bottom: 22vh; }
  /* La présentation reste centrée (retour Allan 23/06) */
  .pv-scroll-cap--intro { left: 50%; right: auto; transform: translateX(-50%);
    top: 7vh; bottom: auto; max-width: 720px; text-align: center; }
}

/* ============================================================
   ENTREE IMMERSIVE — entete courte en overlay (remplace le hero loop)
   Posee en haut de la 1re fenetre, par-dessus la section scroll sticky.
   ============================================================ */
.pv-intro {
  position: absolute;
  z-index: 3;
  top: 0; left: 0; right: 0;
  padding: 18px 0 0;
  text-align: center;
  pointer-events: none;          /* laisse passer le scroll ; .pp-back reactive */
}
.pv-intro .pp-back { pointer-events: auto; }
.pv-intro-kicker { margin: 14px auto 10px; }
.pv-intro-title  { margin: 0 0 6px; }
.pv-intro-hook   { margin: 0; }

/* Indice de scroll visible */
.pv-scroll-hint {
  margin: 14px 0 0;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.pv-scroll-hint-arrow {
  font-size: 1.1rem;
  color: var(--accent);
  animation: pv-bounce 1.6s ease-in-out infinite;
}
@keyframes pv-bounce {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50%      { transform: translateY(6px); opacity: 1; }
}

/* ============================================================
   BLOC CTA CENTRAL « Acheter » (gros bouton accent, centre)
   ============================================================ */
.pp-buy {
  padding: 64px 0 72px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, var(--accent-soft) 0%, transparent 60%),
    var(--bg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  /* #4 (retour Kevin) : la section CTA "monte" sur la fin de l'animation
     scroll pour supprimer la zone blanche (canette estompée) avant le CTA.
     Fond opaque + z-index → recouvre proprement la queue du .pv-scroll. */
  position: relative;
  z-index: 2;
  margin-top: -42vh;
}
.pp-buy-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pp-buy-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.8rem, 6vw, 2.6rem);
  line-height: 1.1;
  text-transform: uppercase;
  margin: 10px 0 18px;
  color: var(--white);
}
.pp-buy-chips { justify-content: center; margin-bottom: 30px; }

/* Variante XL du bouton accent (.pp-cta) pour le CTA central */
.pp-cta--xl {
  font-size: 1.05rem;
  padding: 18px 48px;
  box-shadow: 0 16px 40px -14px var(--accent-glow);
}

/* CTA repete au fil des sections */
.pp-cta-inline { margin-top: 32px; }

@media (prefers-reduced-motion: reduce) {
  .pv-scroll-hint-arrow, .pv-cap-hint { animation: none; }
}

/* ---- Accessibilite : pas de scrub, poster statique ---- */
@media (prefers-reduced-motion: reduce) {
  .pv-scroll { height: auto; }
  .pv-scroll-sticky { position: static; height: auto; min-height: 70vh; padding: 96px 0 48px; }
  /* Entete repositionnee dans le flux (plus d'overlay absolu). */
  .pv-intro { position: static; padding: 18px 0 8px; }
  /* Pas de scrub : les legendes s'empilent sous la canette, toutes visibles. */
  .pv-scroll-cap { position: static; opacity: 1; transform: none; max-width: 520px;
    left: auto; right: auto; top: auto; bottom: auto; margin: 12px auto 0; text-align: center; }
}