/* ============================================================
   VOLUMEDIA — Hero · variantes pilotées par body[data-hero]
   a Split · b Cover · c Vidéo immersive · d Mosaïque · e Type cinétique
   f Numéro éditorial · g Kiosque · h Portrait · i Collage · j Statement
   Les éléments optionnels sont masqués par défaut puis révélés/réagencés
   selon la variante. La variante "a" = disposition d'origine (split).
   ============================================================ */

/* éléments optionnels — masqués par défaut (variante a incluse) */
.hero-eyebrow,
.hero-lead,
.hero-cta2,
.hero-meta,
.hero-band,
.hero-chips,
.hero-mosaic,
.hero-rail,
.hero-photo,
.hero-portrait,
.hero-mformats{display:none}

/* styles de base des éléments optionnels (quand révélés) */
.hero-lead{font-size:clamp(15px,1.2vw,17px);line-height:1.55;color:var(--text-soft);font-weight:300;max-width:42ch;margin-top:20px}
.hero-meta{align-items:center;gap:18px;font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-top:38px}
.hero-meta i{width:5px;height:5px;border-radius:50%;background:var(--pink);display:inline-block}
.hero-rail{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--black);font-weight:800;font-size:14px;letter-spacing:.34em;text-transform:uppercase;color:var(--pink);padding-left:22px;border-left:2px solid var(--pink);align-self:stretch;align-items:center}

/* bande cinétique (E) */
.hero-band{position:relative;z-index:1;margin-top:34px;overflow:hidden;width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.hero-band-track{display:flex;width:max-content;animation:vmHeroScroll 26s linear infinite}
.hero-band-track span{font-family:var(--black);font-weight:900;font-size:clamp(32px,4vw,48px);letter-spacing:-0.02em;line-height:1;color:transparent;-webkit-text-stroke:1.4px var(--pink);padding:0 24px;white-space:nowrap}
.hero-band-track span.fill{color:var(--pink);-webkit-text-stroke:0}
@keyframes vmHeroScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.hero-band-track{animation:none}}

/* pastilles collage (I) */
.hero-chips{position:absolute;inset:0;z-index:1;pointer-events:none}
.hero-chip{position:absolute;font-family:var(--black);font-weight:700;font-size:clamp(13px,1.2vw,16px);padding:9px 18px;border-radius:999px;background:var(--surface);border:1.5px solid var(--pink);color:var(--pink);box-shadow:var(--shadow-sm);white-space:nowrap}
.hero-chip.c1{top:24%;left:7%;transform:rotate(-9deg)}
.hero-chip.c2{top:30%;right:7%;transform:rotate(8deg);background:var(--pink);color:#fff}
.hero-chip.c3{bottom:26%;left:10%;transform:rotate(7deg)}
.hero-chip.c4{bottom:22%;right:10%;transform:rotate(-7deg)}
.hero-chip.c5{top:18%;right:28%;transform:rotate(5deg)}

/* fond mosaïque (G) */
.hero-mosaic{position:absolute;inset:0;z-index:0;grid-template-columns:repeat(6,1fr);grid-auto-rows:1fr;gap:12px;padding:12px}
.hero-mosaic span{border-radius:12px}
.hero-mosaic span:nth-child(3n){background:linear-gradient(160deg,#ff4dc6,#cc0089)}
.hero-mosaic span:nth-child(3n+1){background:linear-gradient(160deg,#3a2540,#14101a)}
.hero-mosaic span:nth-child(3n+2){background:linear-gradient(160deg,var(--pink-2),var(--pink))}
.hero-mosaic::after{content:"";position:absolute;inset:0;background:color-mix(in srgb,var(--bg) 64%,transparent)}

/* portrait créateur (H) */
.hero-portrait{position:relative;width:100%;max-width:440px;height:clamp(380px,52vh,540px);border-radius:24px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);
  background:radial-gradient(120% 90% at 50% 20%,rgba(255,0,173,.4),transparent 60%),linear-gradient(160deg,#3a2540,#14101a);
  align-items:flex-end;justify-content:center}
.hero-portrait .hero-portrait-ic{position:absolute;top:50%;left:50%;transform:translate(-50%,-60%);width:120px;height:120px;color:rgba(255,255,255,.32)}
.hero-portrait .hero-portrait-tag{position:relative;z-index:2;margin-bottom:24px;padding:9px 18px;border-radius:999px;background:rgba(0,0,0,.4);backdrop-filter:blur(8px);color:#fff;font-size:13px;font-weight:500}

/* mosaïque de formats (D) */
.hero-mformats{gap:14px;justify-content:center}
.hero-mformats .hmf{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-sm);display:flex;align-items:flex-end}
.hero-mformats .hmf-tall{width:clamp(160px,16vw,200px);height:clamp(310px,40vh,380px)}
.hero-mformats .hmf-col{display:flex;flex-direction:column;gap:14px}
.hero-mformats .hmf-col .hmf{width:clamp(190px,20vw,240px);height:clamp(148px,19vh,183px)}
.hero-mformats .hmf .hmf-thumb{position:absolute;inset:0;z-index:0}
.hero-mformats .hmf.g1 .hmf-thumb{background:linear-gradient(160deg,var(--pink-2),var(--pink-deep))}
.hero-mformats .hmf.g2 .hmf-thumb{background:linear-gradient(160deg,#3a2540,#14101a)}
.hero-mformats .hmf.g3 .hmf-thumb{background:linear-gradient(160deg,#ffb1e2,var(--pink))}
.hero-mformats .hmf .hmf-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(0,0,0,.45),transparent 55%)}
.hero-mformats .hmf .hmf-cap{position:relative;z-index:2;padding:14px 16px 16px;color:#fff;font-weight:600;font-size:14px;line-height:1.2;letter-spacing:-0.01em;text-shadow:0 2px 14px rgba(0,0,0,.4)}
.hero-mformats .hmf .hmf-cap small{display:block;font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.8;margin-bottom:3px}

/* ============ B · COVER MANIFESTE (centré) ============ */
body[data-hero="b"] .hero-inner{grid-template-columns:1fr}
body[data-hero="b"] .hero-text{align-items:center;text-align:center;max-width:920px;margin:0 auto}
body[data-hero="b"] .hero-media{display:none}
body[data-hero="b"] .hero-eyebrow{display:inline-flex;order:-1;margin-bottom:20px}
body[data-hero="b"] .hero-meta{display:flex;justify-content:center}
body[data-hero="b"] .hero h1{font-size:clamp(36px,5.2vw,64px);max-width:18ch}

/* ============ C · VIDÉO IMMERSIVE (cinéma) ============ */
body[data-hero="c"] .hero-aurora{display:none}
body[data-hero="c"] .hero-media{position:absolute;inset:0;z-index:0;display:block}
body[data-hero="c"] .hero-media .launch-frame{width:100%;height:100%;border-radius:0;aspect-ratio:auto;border:0}
body[data-hero="c"] .hero-media .launch-ph{filter:brightness(.62) saturate(.92)}
body[data-hero="c"] .hero-media .launch-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(8,5,7,.92) 0%,rgba(8,5,7,.74) 50%,rgba(8,5,7,.55) 100%)}
body[data-hero="c"] .hero-inner{grid-template-columns:1fr;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding-top:96px;padding-bottom:clamp(48px,7vh,92px)}
body[data-hero="c"] .hero-text{max-width:880px}
body[data-hero="c"] .hero-eyebrow{display:inline-flex;order:-1;margin-bottom:18px}
body[data-hero="c"] .hero-badge{display:none}
body[data-hero="c"] .hero h1{color:#fff;font-size:clamp(34px,4.6vw,56px)}
body[data-hero="c"] .hero-lead{display:block;color:rgba(247,242,245,.8)}
body[data-hero="c"] .hero-cta2{display:inline-flex;color:#fff;border-color:rgba(255,255,255,.34)}

/* ============ D · MOSAÏQUE MULTI-FORMATS ============ */
body[data-hero="d"] .hero-media .launch-frame{display:none}
body[data-hero="d"] .hero-media .hero-mformats{display:flex}
body[data-hero="d"] .hero-eyebrow{display:inline-flex;order:-1;margin-bottom:16px}
body[data-hero="d"] .hero h1{font-size:clamp(30px,3.8vw,46px);max-width:13ch}

/* ============ E · TYPE CINÉTIQUE ============ */
body[data-hero="e"] .hero-inner{grid-template-columns:1fr}
body[data-hero="e"] .hero-media{display:none}
body[data-hero="e"] .hero-eyebrow{display:inline-flex;order:-1;margin-bottom:16px}
body[data-hero="e"] .hero-band{display:block}
body[data-hero="e"] .hero h1{font-size:clamp(34px,4.8vw,58px);max-width:17ch}

/* ============ F · NUMÉRO ÉDITORIAL ============ */
body[data-hero="f"] .hero-inner{grid-template-columns:auto 1fr;gap:clamp(28px,4vw,54px)}
body[data-hero="f"] .hero-media{display:none}
body[data-hero="f"] .hero-rail{display:flex}
body[data-hero="f"] .hero-eyebrow{display:inline-flex;margin-bottom:18px}
body[data-hero="f"] .hero-lead{display:block}
body[data-hero="f"] .hero-cta2{display:inline-flex}
body[data-hero="f"] .hero h1{font-size:clamp(32px,4.4vw,55px);max-width:16ch}
@media (max-width:760px){body[data-hero="f"] .hero-rail{display:none}}

/* ============ G · KIOSQUE PLEIN CADRE (glass) ============ */
body[data-hero="g"] .hero-mosaic{display:grid}
body[data-hero="g"] .hero-media{display:none}
body[data-hero="g"] .hero-inner{grid-template-columns:1fr;justify-items:center}
body[data-hero="g"] .hero-text{align-items:center;text-align:center;max-width:760px;
  background:color-mix(in srgb,var(--surface) 80%,transparent);backdrop-filter:blur(16px);
  border:1px solid var(--line);border-radius:26px;box-shadow:var(--shadow);padding:clamp(34px,4vw,54px)}
body[data-hero="g"] .hero-eyebrow{display:inline-flex;margin-bottom:14px}
body[data-hero="g"] .hero-cta2{display:inline-flex}
body[data-hero="g"] .hero h1{font-size:clamp(32px,4.2vw,50px);max-width:18ch}

/* ============ H · PORTRAIT CRÉATEUR ============ */
body[data-hero="h"] .hero-inner{grid-template-columns:.92fr 1.08fr}
body[data-hero="h"] .hero-media{display:flex;justify-content:flex-start}
body[data-hero="h"] .hero-media .launch-frame{display:none}
body[data-hero="h"] .hero-media .hero-portrait{display:flex}
body[data-hero="h"] .hero-eyebrow{display:inline-flex;order:-1;margin-bottom:16px}
body[data-hero="h"] .hero-lead{display:block}
body[data-hero="h"] .hero-cta2{display:inline-flex}
body[data-hero="h"] .hero h1{font-size:clamp(32px,4.2vw,50px);max-width:15ch}

/* ============ I · COLLAGE STICKER ============ */
body[data-hero="i"] .hero-inner{grid-template-columns:1fr}
body[data-hero="i"] .hero-media{display:none}
body[data-hero="i"] .hero-text{align-items:center;text-align:center;max-width:760px;margin:0 auto;position:relative;z-index:3}
body[data-hero="i"] .hero-chips{display:block}
body[data-hero="i"] .hero-badge{margin-left:auto;margin-right:auto}
body[data-hero="i"] .hero h1{font-size:clamp(34px,4.8vw,56px);max-width:17ch}

/* ============ J · STATEMENT MINIMAL ============ */
body[data-hero="j"] .hero-aurora{opacity:.5}
body[data-hero="j"] .hero-inner{grid-template-columns:1fr}
body[data-hero="j"] .hero-media{display:none}
body[data-hero="j"] .hero-badge{display:none}
body[data-hero="j"] .hero-eyebrow{display:inline-flex;order:-1;margin-bottom:20px}
body[data-hero="j"] .hero-lead{display:block;margin-top:30px}
body[data-hero="j"] .hero h1{font-size:clamp(42px,7vw,80px);max-width:15ch;font-weight:400;line-height:1.05}

/* ============ K · PHOTO PLEIN CADRE (éditorial centré, cosy) ============ */
body[data-hero="k"] .hero-aurora{display:none}
body[data-hero="k"] .hero-media{display:none}
body[data-hero="k"] .hero-photo{display:none}
body[data-hero="k"] .hero{background:#1a0d14 url("../assets/vm-hero-cosy.webp") center/cover no-repeat}
body[data-hero="k"] .hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,var(--bg) 0%,color-mix(in srgb,var(--bg) 88%,transparent) 5%,color-mix(in srgb,var(--bg) 55%,transparent) 11%,color-mix(in srgb,var(--bg) 22%,transparent) 17%,transparent 23%),linear-gradient(to bottom,rgba(26,8,18,.46),rgba(26,8,18,.34) 45%,rgba(26,8,18,.6) 88%);pointer-events:none}
body[data-hero="k"] .hero-inner{grid-template-columns:1fr;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding-top:96px;position:relative;z-index:2}
body[data-hero="k"] .hero-text{align-items:center;text-align:center;max-width:920px;margin:0 auto}
body[data-hero="k"] .hero-badge{display:none}
body[data-hero="k"] .hero h1{color:#fff;font-size:clamp(30px,4vw,56px);line-height:1.14;max-width:34ch;white-space:normal;text-wrap:balance;letter-spacing:-0.018em}
body[data-hero="k"] .hero h1 .em{font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-weight:600;color:#fff;letter-spacing:0;font-size:1.16em;line-height:.9}
@media (max-width:820px){body[data-hero="k"] .hero h1{font-size:clamp(28px,6vw,40px);max-width:18ch}}
body[data-hero="k"] .hero-lead{display:block;color:rgba(255,255,255,.84);max-width:48ch;margin:22px auto 0;font-size:clamp(15px,1.3vw,18px);line-height:1.6}
body[data-hero="k"] .hero-cta{flex-direction:column;align-items:center;gap:18px}
body[data-hero="k"] .hero-cta .btn-primary{background:#fff !important;color:#16110F !important;padding:12px 26px;font-size:13.5px;box-shadow:0 14px 36px -16px rgba(0,0,0,.55)}
body[data-hero="k"] .hero-cta .btn-primary:hover{background:#fff !important;transform:translateY(-2px)}
body[data-hero="k"] .hero-cta .btn-primary svg{stroke:#16110F}

/* ============ L · IMAGE EN BIAIS À DROITE + TEXTE SUR BLANC ============ */
body[data-hero="l"] .hero{background:var(--bg);overflow:hidden}
body[data-hero="l"] .hero-aurora{display:none}
body[data-hero="l"] .hero-media{display:none}
body[data-hero="l"] .hero-photo{display:none}
body[data-hero="l"] .hero::before{content:"";position:absolute;top:-6%;right:-6%;width:62%;height:112%;z-index:0;
  background:url("../assets/vm-hero-cosy.webp") center/cover no-repeat;
  transform:rotate(-3deg);
  clip-path:polygon(16% 0,100% 0,100% 100%,4% 100%);
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 28%);
  mask-image:linear-gradient(to right,transparent 0,#000 28%);
  box-shadow:0 30px 80px -34px rgba(22,17,15,.45)}
body[data-hero="l"] .hero-inner{grid-template-columns:1fr;min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;position:relative;z-index:2}
body[data-hero="l"] .hero-text{align-items:flex-start;text-align:left;max-width:620px}
body[data-hero="l"] .hero-badge{display:none}
body[data-hero="l"] .hero-eyebrow{display:inline-flex;margin-bottom:18px}
body[data-hero="l"] .hero h1{font-size:clamp(34px,4.4vw,58px);line-height:1.1;max-width:14ch}
body[data-hero="l"] .hero h1 .em{font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-weight:600;font-size:1.14em;line-height:.9}
body[data-hero="l"] .hero-lead{display:block;max-width:42ch}
@media (max-width:820px){
  body[data-hero="l"] .hero::before{width:100%;right:0;top:0;height:100%;transform:none;clip-path:none;opacity:.16;-webkit-mask-image:none;mask-image:none;box-shadow:none}
  body[data-hero="l"] .hero-text{max-width:none}
}

/* ============ M · COMPTEUR MONUMENT ============
   Presque pas de texte : le nombre d'abonnés cumulés EST le hero.
   Sur écran à souris, les chiffres sont fondus dans le fond et un halo
   rose suit le curseur pour les révéler (--mx/--my posés par vm.js).
/* ============================================================
   HERO M — décor seul, épinglé
   Le hero ne contient plus que son fond : accroche, compteur et
   profil vivent dans .reel-scene (vm-components.css), qui le
   recouvre dès le chargement. C'est ce qui permet au compteur
   d'être UN SEUL élément du hero jusqu'au profil Instagram.
   --rp est posé sur :root par vm.js.
   ============================================================ */
/* Le décor n'est PAS épinglé : il défile et sort de l'écran comme une vraie
   page qu'on descend. C'est lui qui donne la sensation de scroll — la scène,
   elle, reste fixe par-dessus. Il s'efface complètement en partant. */
body[data-hero="m"] .hero{
  position:relative;z-index:0;
  min-height:100svh;height:100svh;
  background:#1a0d14 url("../assets/vm-hero-cosy.webp") center/cover no-repeat;
  /* --rpr (et non --rp) : la progression est posée sur :root par vm.js —
     .hero est un frère de .reel, il ne verrait pas une variable locale. */
  opacity:calc(1 - clamp(0, calc((var(--rpr,0) - .04) / .20), 1));
}
body[data-hero="m"] .hero-aurora,
body[data-hero="m"] .hero-media,
body[data-hero="m"] .hero-inner,
body[data-hero="m"] .hero-badge{display:none}
/* voile : assombrit le setup média pour que le compteur ressorte, et fond
   vers la couleur de page en bas pour enchaîner sans couture */
body[data-hero="m"] .hero::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to top, var(--bg) 0%, color-mix(in srgb, var(--bg) 52%, transparent) 4%,
      color-mix(in srgb, var(--bg) 13%, transparent) 11%, transparent 20%),
    linear-gradient(to bottom, rgba(18,7,14,.6), rgba(18,7,14,.4) 45%, rgba(18,7,14,.68));
}
/* halo rose derrière le compteur : il rétrécit avec lui */
body[data-hero="m"] .hero::after{
  content:"";position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%) scale(calc(1 - var(--rp,0) * .55));
  width:min(1100px,124vw);aspect-ratio:1.5;z-index:1;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,
    color-mix(in srgb, var(--pink) 42%, transparent),
    color-mix(in srgb, var(--pink) 14%, transparent) 42%, transparent 70%);
  filter:blur(46px);
  opacity:calc(1 - clamp(0, calc((var(--rp,0) - .18) / .3), 1) * .7);
}