/* Accueil FR et EN : hero « des rushes au short » en 3D (28/10/2026).
   Scène en verre (composants verre de la charte v2) : une image du short floutée une seule fois et voilée,
   des surfaces translucides posées dessus. 8 images des rushes bruts flottent en profondeur autour d'un téléphone.
   Au défilement (hero-3d.js, Motion) : la caméra tourne autour, les rushes plongent un à un dans l'écran,
   puis le short monté démarre ; la capsule passe de lundi à jeudi.
   - Ordinateur (901 px et plus, 600 px de haut et plus) : tout le hero est épinglé sur 300vh, en plein écran :
     barre du haut et rail des chapitres cachés jusqu'à ce que le hero remonte (classe h3d-top sur <html>).
   - Mobile et tablette (900 px et moins) : la scène passe avant le texte et occupe tout l'écran dès le haut
     (épinglée sur 230svh). La barre du haut reste cachée tant qu'on n'a pas défilé (classe h3d-top sur <html>).
   - Sans Motion ou en mouvement réduit : rien n'est épinglé, les rushes restent en place, le short se lit dans le téléphone. */

.hero.h3d{max-width:none;margin:0;padding:0;position:relative}
.h3d{--h3d-fond:rgba(24,24,27,.55);--h3d-bord:rgba(255,255,255,.1);--h3d-reflet:inset 0 1px 0 rgba(255,255,255,.08)}
.h3d-pin{position:relative}
.h3d-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:48px;align-items:center;max-width:1336px;margin:0 auto}
.h3d .hero-left{position:relative;z-index:1}

/* Scène : floutée une fois, voilée. Ordinateur : derrière tout le hero ; mobile : derrière la scène 3D seulement */
.h3d-scene{position:absolute;inset:0;z-index:0;overflow:hidden;background:#111113;pointer-events:none}
.h3d-scene img{display:block;width:100%;height:100%;object-fit:cover;filter:blur(40px) saturate(125%);transform:scale(1.2)}
.h3d-scene::after{content:'';position:absolute;inset:0;background:rgba(9,9,11,.62)}

/* Scène 3D */
.h3d-stage{position:relative;z-index:1;height:600px;container-type:size;perspective:1300px;perspective-origin:50% 45%}
.h3d-world{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;transform:rotateX(4deg) rotateY(-12deg)}
.h3d-card{--cw:min(18cqw,16cqh);--x:var(--dx);--y:var(--dy);--z:var(--dz);--ry:var(--dry);--rz:var(--drz);position:absolute;left:calc(var(--cw) / -2);top:calc(var(--cw) * -8 / 9);width:var(--cw);height:calc(var(--cw) * 16 / 9);margin:0;border-radius:10px;overflow:hidden;background:#27272a;box-shadow:0 0 0 1px rgba(255,255,255,.16),0 18px 40px rgba(0,0,0,.45);backface-visibility:hidden;
  transform:translate3d(calc(var(--x) * 1cqw),calc(var(--y) * 1cqh),calc(var(--z) * 1px)) rotateY(calc(var(--ry) * 1deg)) rotateZ(calc(var(--rz) * 1deg));opacity:var(--o,1)}
.h3d-card img{display:block;width:100%;height:100%;object-fit:cover}
.h3d-tag,.h3d-tc{position:absolute;padding:2px 6px;border-radius:4px;background:rgba(9,9,11,.66);font-family:'Geist Mono',monospace;font-size:9.5px;line-height:1.4;color:#fafafa;white-space:nowrap}
.h3d-tag{left:7px;top:7px;font-weight:600;letter-spacing:.08em}
.h3d-tc{right:7px;bottom:7px;color:#d4d4d8;font-variant-numeric:tabular-nums}
.h3d-phone{--ph:min(78cqh,120cqw);position:absolute;left:calc(var(--ph) * -9 / 38);top:calc(var(--ph) / -2);width:calc(var(--ph) * 9 / 19);height:var(--ph);box-sizing:border-box;padding:calc(var(--ph) * .018);border-radius:calc(var(--ph) * .075);background:#09090b;box-shadow:0 0 0 1px rgba(255,255,255,.16),0 30px 70px rgba(0,0,0,.55);transform:rotateY(-8deg)}
.h3d-screen{position:relative;height:100%;border-radius:calc(var(--ph) * .058);overflow:hidden;background:#111113}
.h3d-screen video{display:block;width:100%;height:100%;object-fit:cover}
.h3d-screen .spot-sound{position:absolute;right:10px;bottom:10px;display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border:1px solid rgba(255,255,255,.18);border-radius:8px;background:rgba(9,9,11,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;font-family:'Geist',sans-serif;font-size:12px;font-weight:500;cursor:pointer;transition:background .15s}
.h3d-screen .spot-sound:hover{background:rgba(9,9,11,.82)}
.h3d-screen .spot-sound:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(164,139,255,.5)}
.h3d-screen .spot-sound svg{width:15px;height:15px;display:block;flex:none}
.h3d-screen .spot-sound .ico-on,.h3d-screen .spot-sound[aria-pressed="true"] .ico-off{display:none}
.h3d-screen .spot-sound[aria-pressed="true"] .ico-on{display:block}
.h3d-drop{display:none;position:absolute;inset:10px;border:1.5px dashed rgba(255,255,255,.22);border-radius:calc(var(--ph) * .045);flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:14px;text-align:center;font-family:'Geist',sans-serif;font-size:13px;font-weight:500;line-height:1.3;color:#a1a1aa}
.h3d-count{font-family:'Geist Mono',monospace;font-size:12px;color:#a1a1aa}
.h3d-count b{display:block;margin-bottom:4px;font-family:'Geist',sans-serif;font-size:44px;font-weight:600;letter-spacing:-.03em;line-height:1;color:#fafafa;font-variant-numeric:tabular-nums}
.h3d-op{display:inline-flex;align-items:center;gap:6px;min-height:20px;color:#fafafa}
.h3d-op svg{width:14px;height:14px;flex:none;color:#a48bff}

/* Capsule des jours (verre) : de lundi (rushes reçus) à jeudi (short livré) */
.h3d-days{position:absolute;z-index:2;left:50%;bottom:0;transform:translateX(-50%);display:none;gap:2px;padding:4px;border-radius:999px;background:rgba(39,39,42,.78);border:1px solid var(--h3d-bord);box-shadow:var(--h3d-reflet),0 18px 40px rgba(0,0,0,.4);white-space:nowrap}
.h3d-days span{padding:6px 12px;border-radius:999px;font-family:'Geist',sans-serif;font-size:12.5px;font-weight:500;color:#a1a1aa;transition:background-color .25s cubic-bezier(.16,1,.3,1),color .2s}
.h3d-days span.on{background:#fafafa;color:#09090b}
.h3d-say{display:none}

/* ---------- Ordinateur ---------- */
@media(min-width:901px){
  .h3d-run,.h3d-stick{position:static}
  .h3d-pin{padding:124px 32px 40px}
  .h3d .hero-left{gap:24px}
  .h3d .hero-kicker{margin:0;color:#a1a1aa}
  .h3d .hero-rating{align-self:flex-start;margin:0;background:var(--h3d-fond);border-color:var(--h3d-bord);box-shadow:var(--h3d-reflet)}
  .h3d .hero-rating-stars{color:#a48bff}
  .h3d .hero-rating-text{color:#fafafa}
  .h3d .hero-rating-text strong{color:#c4b5fd}
  .h3d .hero-title{margin:0;font-size:clamp(38px,min(4.3vw,7.6vh),70px);line-height:.95;color:#fafafa}
  .h3d .hero-title em{color:#a1a1aa !important}
  .h3d .hero-title-rest{display:block;margin-top:.55em;font-size:.42em;line-height:1.32;letter-spacing:-.015em;font-weight:400;color:#d4d4d8}
  .h3d .hero-title .strike{color:#a1a1aa}
  .h3d .hero-subtitle{max-width:540px;font-size:16px;color:#d4d4d8}
  .h3d .hero-subtitle strong{color:#fafafa}
  .h3d .hero-ctas{flex-direction:row;flex-wrap:wrap;align-items:center;gap:12px 16px}
  .h3d .hero-cta-note{flex-basis:100%;color:#a1a1aa !important}
  .h3d .btn-ghost{background:rgba(255,255,255,.06);color:#fafafa;border-color:rgba(255,255,255,.22)}
  .h3d .btn-ghost:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.32);color:#fafafa}
  /* Chiffres clés : tuiles de verre, 72h (la promesse) en tuile pleine */
  .h3d .trust-bar{position:relative;z-index:1;margin:32px auto 0;padding:0;max-width:1336px;background:none;border:0}
  .h3d .trust-bar-inner{gap:12px;align-items:stretch}
  .h3d .trust-stat{display:flex;flex-direction:column;justify-content:center;gap:6px;padding:14px 18px;text-align:left;border-radius:12px;background:var(--h3d-fond);border:1px solid var(--h3d-bord);box-shadow:var(--h3d-reflet)}
  .h3d .trust-stat::before{display:none}
  .h3d .trust-stat-num{margin:0;font-size:30px;font-weight:600;color:#fafafa;font-variant-numeric:tabular-nums}
  .h3d .trust-stat-num em{color:#a1a1aa}
  .h3d .trust-stat-label{color:#a1a1aa}
  .h3d .trust-stat.accent{background:#6b46e5;border-color:transparent}
  .h3d .trust-stat.accent .trust-stat-num,.h3d .trust-stat.accent .trust-stat-num em{color:#fff}
  .h3d .trust-stat.accent .trust-stat-label{color:rgba(255,255,255,.86)}
}
@media(min-width:901px) and (min-height:600px){
  .motion-ready .hero.h3d{height:300vh}
  .motion-ready .h3d-pin{position:sticky;top:0;height:100vh;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;padding:56px 32px 20px;overflow:hidden}
  /* Hero plein écran : barre du haut et rail des chapitres cachés tant que la scène est épinglée (classe h3d-top,
     posée par hero-3d.js), de retour dès que le hero remonte ou qu'on y arrive au clavier */
  .topbar,.tc-rail{transition:transform .5s cubic-bezier(.16,1,.3,1)}
  .motion-ready.h3d-top .topbar:not(:focus-within){transform:translateY(-100%)}
  .motion-ready.h3d-top .tc-rail:not(:focus-within){transform:translateX(-160%)}
  .motion-ready.h3d-top .tc-bar{opacity:0;pointer-events:none}
  .motion-ready .h3d-grid{width:100%}
  .motion-ready .h3d-stage{height:min(calc(100vh - 250px),660px)}
  .motion-ready .h3d .trust-bar{margin-top:20px;width:100%}
}
/* Avec le rail des chapitres (≥ 1101 px) : la scène passe aussi sous la place du rail, le contenu ne bouge pas */
@media(min-width:1101px) and (min-height:600px){
  .motion-ready .h3d-pin{margin-left:-64px;padding-left:96px}
}
/* Ordinateur étroit : la scène se resserre pour que les rushes du bord ne soient pas coupés */
@media(min-width:901px) and (max-width:1200px){
  .h3d-stage{margin:0 6%}
}

/* ---------- Mobile et tablette ---------- */
@media(max-width:900px){
  .h3d-pin{display:flex;flex-direction:column}
  .h3d-grid{display:contents}
  .h3d .hero-left{padding:96px 20px 0}
  .h3d-run{margin:28px 20px 0}
  .h3d-stick{position:relative;height:540px;border-radius:12px;overflow:hidden}
  .h3d-stage{position:absolute;inset:0;height:auto;perspective:900px}
  .h3d-card{--cw:min(22cqw,14cqh);--x:var(--mx);--y:var(--my);--z:var(--mz);--ry:var(--mry);--rz:var(--mrz)}
  .h3d-phone{--ph:min(62cqh,100cqw)}
  .h3d .trust-bar{margin:28px 0 48px}
  .topbar{transition:transform .45s cubic-bezier(.16,1,.3,1)}
  .motion-ready.h3d-top .topbar:not(:focus-within){transform:translateY(-100%)}
  .motion-ready .h3d-run{order:-1;margin:0;height:230vh;height:230svh}
  .motion-ready .h3d-stick{position:sticky;top:0;height:100vh;height:100svh;border-radius:0}
  .motion-ready .h3d .hero-left{padding-top:36px}
  .motion-ready .h3d-stage{top:72px;bottom:64px}
  .motion-ready .h3d-phone{--ph:min(64cqh,100cqw)}
  .motion-ready .h3d-say{display:block;position:absolute;z-index:2;left:20px;right:20px;top:22px;margin:0;height:72px;font-family:'Geist',sans-serif;font-size:clamp(26px,7.6vw,34px);font-weight:600;line-height:1.05;letter-spacing:-.04em;color:#fafafa}
  .h3d-say span{position:absolute;left:0;right:0;top:0;transition:opacity .35s,transform .45s cubic-bezier(.16,1,.3,1)}
  .h3d-say span + span{color:#a1a1aa;opacity:0;transform:translateY(12px)}
  .h3d-say.done span:first-child{opacity:0;transform:translateY(-12px)}
  .h3d-say.done span + span{opacity:1;transform:none}
  .motion-ready .h3d-days{bottom:16px}
}

/* Avec Motion : téléphone vide (zone de dépôt) au départ, le short apparaît à la fin */
@media(min-width:901px) and (min-height:600px),(max-width:900px){
  .motion-ready .h3d-drop{display:flex}
  .motion-ready .h3d-days{display:flex}
  .motion-ready .h3d-screen video,.motion-ready .h3d-screen .spot-sound{opacity:0}
  .motion-ready .h3d-card,.motion-ready .h3d-world,.motion-ready .h3d-phone{will-change:transform}
}