/* Pages YouTube FR et EN : hero « la vidéo en couches » en 3D (29/10/2026). Markup : _sources/build-youtube.mjs.
   Ni trajet ni téléphone, à la différence de l'accueil, du podcast et de la visite : une vidéo YouTube 16:9 en vue
   éclatée, comme un projet de montage ouvert (illustrations yt-rush.svg et yt-broll.svg). Les rushes au fond,
   quatre calques devant (B-roll, titres, sous-titres, chapitres) et, dessous, la piste des coupes et de la musique.
   Au défilement (hero-youtube.js, Motion) : les coupes ramènent 1 h de rushes à 20 min (chaque morceau coupé
   montre son nom : blanc, hésitation, répétition, autre prise), chaque calque se remplit à sa place, puis tout se
   referme de face en une seule image finie (« 20:00 de vidéo montée »), avec le prix de cette vidéo dans la légende.
   - Ordinateur (901 px et plus, 600 px de haut et plus) : tout le hero est épinglé sur 320vh, en plein écran :
     barre du haut et rail des chapitres cachés jusqu'à ce que le hero remonte (classe hy-top sur <html>).
   - Mobile et tablette (900 px et moins, 520 px de haut et plus) : la scène passe avant le texte et occupe tout
     l'écran dès le haut (épinglée sur 250svh). La barre du haut reste cachée tant qu'on n'a pas défilé (hy-top).
   - Téléphone à l'horizontale (moins de 520 px de haut), sans Motion ou en mouvement réduit : rien n'est épinglé,
     la scène montre l'état final (vidéo finie, de face).
   Sans JavaScript : la vidéo finie, sans la piste ni les étiquettes.
   Position finale de l'image : --ye (fraction de sa largeur, négatif = plus haut), lue aussi par hero-youtube.js ;
   la durée se pose juste au-dessus de l'image finie, la légende juste en dessous. */

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

/* Fond : les rushes floutés une fois et voilés (ordinateur : derrière tout le hero ; mobile : derrière la scène) */
.hy-scene{position:absolute;inset:0;z-index:0;overflow:hidden;background:#120d26;pointer-events:none}
.hy-scene img{display:block;width:100%;height:100%;object-fit:cover;filter:blur(48px) saturate(120%);transform:scale(1.2)}
.hy-scene::after{content:'';position:absolute;inset:0;background:rgba(9,9,11,.6)}

/* Scène 3D : origine au centre, chaque objet centré puis placé par transform. Taille de base = taille finale (net) */
.hy-stage{--ye:-.02;position:relative;z-index:1;height:600px;container-type:size;perspective:1900px;perspective-origin:50% 42%}
.hy-world,.hy-legend,.hy-hud{--fw:min(86cqw,calc((100cqh - 170px) * 16 / 9))}
.hy-world{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;transform:translateY(calc(var(--fw) * var(--ye)))}
/* Sans JavaScript, et une fois l'image assemblée (classe hy-flat) : calques à plat, dans l'ordre du HTML
   (texte net, aucun z-fighting) */
.hy:not(.hy-js) .hy-world,.hy-world.hy-flat{transform-style:flat}

/* Calques de l'image (16:9), de l'arrière (rushes) vers l'avant (chapitres) */
.hy-pane{position:absolute;left:calc(var(--fw) / -2);top:calc(var(--fw) * -9 / 32);width:var(--fw);height:calc(var(--fw) * 9 / 16);border-radius:12px;backface-visibility:hidden}
.hy-p-rush{overflow:hidden;background:#150e31;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 30px 70px rgba(0,0,0,.5)}
.hy-shot{position:absolute;inset:0}
.hy-shot img{position:absolute;left:-8%;top:-6%;display:block;width:112%;height:112%;transform-origin:36% 46%}
/* Coins de viseur sur les rushes bruts : ils s'effacent pendant les coupes */
.hy-vf{position:absolute;inset:15% 5% 9%;pointer-events:none;opacity:0;--l:calc(var(--fw) * .045);--e:2px;--w:linear-gradient(#fafafa,#fafafa);
  background:var(--w) 0 0 / var(--l) var(--e),var(--w) 0 0 / var(--e) var(--l),var(--w) 100% 0 / var(--l) var(--e),var(--w) 100% 0 / var(--e) var(--l),
    var(--w) 0 100% / var(--l) var(--e),var(--w) 0 100% / var(--e) var(--l),var(--w) 100% 100% / var(--l) var(--e),var(--w) 100% 100% / var(--e) var(--l);
  background-repeat:no-repeat}
/* Emplacement en pointillé (avant), filet plein (après) */
.hy-wire,.hy-edge{position:absolute;inset:0;border-radius:inherit;pointer-events:none}
.hy-wire{border:1px dashed rgba(255,255,255,.34);background:rgba(250,250,250,.035)}
.hy-wire i{position:absolute;border:1px dashed rgba(255,255,255,.3);border-radius:6px}
.hy-edge{box-shadow:0 0 0 1px rgba(255,255,255,.2);opacity:0}
.hy-fill{margin:0}

/* Étiquettes des calques et des pistes (capitales mono, comme les étiquettes CLIP de la timeline). Allumée : fond
   violet en ::before, animé en opacité (rien à repeindre dans la scène 3D) */
.hy-tag{position:absolute;z-index:2;left:2.4%;top:4%;padding:2px 6px;border-radius:4px;background:rgba(9,9,11,.7);font-family:'Geist Mono',monospace;font-size:clamp(11px,calc(var(--fw) * .025),14px);font-weight:600;letter-spacing:.06em;line-height:1.5;color:#fafafa;white-space:nowrap;isolation:isolate}
.hy-tag::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;background:#6b46e5;opacity:0;transition:opacity .25s}
.hy-tag.on::before{opacity:1}

/* B-roll en incrustation */
.hy-inset{position:absolute;left:57%;top:10%;width:39%;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#120d29;box-shadow:0 0 0 2px rgba(250,250,250,.9),0 14px 30px rgba(0,0,0,.45)}
.hy-inset img{display:block;width:100%;height:100%}
/* Titre à l'écran */
.hy-ttl{position:absolute;right:4.5%;top:53%;display:flex;flex-direction:column;align-items:flex-end;text-align:right;gap:calc(var(--fw) * .006);font-family:'Geist',sans-serif;color:#fafafa;text-shadow:0 2px 14px rgba(0,0,0,.45)}
.hy-ttl small{font-size:calc(var(--fw) * .024);font-weight:500;color:#d4d4d8}
.hy-ttl b{font-size:calc(var(--fw) * .056);font-weight:700;line-height:1;letter-spacing:-.03em}
.hy-ttl i{display:block;width:calc(var(--fw) * .11);height:calc(var(--fw) * .008);margin-top:calc(var(--fw) * .01);border-radius:2px;background:#a48bff;transform-origin:100% 50%}
/* Sous-titres (la main levée est à gauche de l'image : le bandeau centré ne la recouvre pas) */
.hy-sub{position:absolute;left:50%;top:74%;transform:translateX(-50%);padding:.25em .55em;border-radius:6px;background:rgba(9,9,11,.62);font-family:'Geist',sans-serif;font-size:calc(var(--fw) * .034);font-weight:700;line-height:1.3;letter-spacing:-.01em;color:#fff;white-space:nowrap}
.hy-sub mark{padding:0 .2em;border-radius:3px;background:#6b46e5;color:#fff}
/* Lecteur générique : barre de chapitres */
.hy-player{position:absolute;left:0;right:0;bottom:0;height:24%;border-radius:0 0 12px 12px;background:linear-gradient(to top,rgba(9,9,11,.78),rgba(9,9,11,0))}
.hy-chl{position:absolute;left:3%;bottom:calc(9% + 1.6em);font-family:'Geist',sans-serif;font-size:max(10px,calc(var(--fw) * .022));font-weight:600;color:#fafafa;white-space:nowrap}
.hy-chl b{font-family:'Geist Mono',monospace;font-weight:500}
.hy-chbar{position:absolute;left:3%;right:3%;bottom:9%;height:calc(var(--fw) * .0075);min-height:3px}
.hy-ch{position:absolute;top:0;bottom:0;left:calc(var(--a) * 100%);width:calc(var(--w) * 100% - 3px);border-radius:2px;background:rgba(255,255,255,.32);transform-origin:0 50%}
.hy-ch::after{content:'';position:absolute;inset:0;border-radius:inherit;background:#a48bff;transform-origin:0 50%;transform:scaleX(var(--f,0))}
.hy-knob{position:absolute;top:50%;left:calc(var(--p) * 100%);width:calc(var(--fw) * .022);height:calc(var(--fw) * .022);margin:calc(var(--fw) * -.011) 0 0 calc(var(--fw) * -.011);border-radius:50%;background:#fafafa;box-shadow:0 0 0 3px rgba(164,139,255,.35)}

/* Piste de montage sous l'image : coupes (1 h en pointillé, morceaux gardés en clair) et musique */
.hy-tl{position:absolute;left:calc(var(--fw) / -2);top:calc(var(--fw) * 9 / 32 + var(--fw) * .03);width:var(--fw);box-sizing:border-box;display:flex;flex-direction:column;gap:calc(var(--fw) * .012);padding:calc(var(--fw) * .016);border-radius:12px;background:var(--hy-fond);border:1px solid var(--hy-bord);box-shadow:var(--hy-reflet),0 18px 40px rgba(0,0,0,.35)}
.hy-row{display:flex;align-items:center;gap:calc(var(--fw) * .016);height:calc(var(--fw) * .042)}
.hy-row .hy-tag{position:relative;left:auto;top:auto;flex:none;width:calc(var(--fw) * .15);box-sizing:border-box;text-align:center}
.hy-bar{position:relative;flex:1;height:70%;border-radius:4px;outline:1px dashed rgba(255,255,255,.2);outline-offset:2px}
.hy-seg{position:absolute;left:0;top:0;bottom:0;width:calc(var(--d) / 60 * 100%);border-radius:3px;background:#e4e4e7;box-shadow:inset -1px 0 0 rgba(9,9,11,.6);transform-origin:0 50%}
.hy-seg b{position:absolute;inset:0;border-radius:inherit;background:#3f3f46;opacity:0}
/* Nom du morceau coupé, au-dessus de lui (ordinateur ; placé par hero-youtube.js) */
.hy-cl{position:absolute;left:0;bottom:calc(100% + 6px);padding:2px 6px;border-radius:4px;background:#3f3f46;box-shadow:0 0 0 1px rgba(255,255,255,.14);font-family:'Geist Mono',monospace;font-size:clamp(11px,calc(var(--fw) * .024),14px);font-style:normal;font-weight:600;letter-spacing:.04em;line-height:1.4;color:#fafafa;white-space:nowrap;opacity:0;pointer-events:none}
.hy-wave{flex:1;height:100%;display:block;color:#a48bff;transform-origin:50% 50%}

/* Durée (verre), juste au-dessus de l'image finie, et légende des couches, juste en dessous */
.hy-hud{position:absolute;z-index:2;left:50%;bottom:calc(50% + var(--fw) * (.28125 - var(--ye)) + 16px);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 16px;border-radius:14px;background:rgba(39,39,42,.78);border:1px solid var(--hy-bord);box-shadow:var(--hy-reflet),0 18px 40px rgba(0,0,0,.4);font-family:'Geist',sans-serif;font-size:12.5px;font-weight:500;color:#a1a1aa;white-space:nowrap}
.hy-hud > span{display:flex;align-items:baseline;gap:7px}
.hy-hud b{font-size:20px;font-weight:600;letter-spacing:-.02em;line-height:1.1;color:#fafafa;font-variant-numeric:tabular-nums}
.hy-hud small{font-size:11.5px;font-weight:400;color:#a1a1aa}
.hy-legend{position:absolute;z-index:2;left:50%;top:calc(50% + var(--fw) * (.28125 + var(--ye)) + 22px);transform:translateX(-50%);display:flex;flex-wrap:wrap;justify-content:center;gap:5px;width:max-content;max-width:100%;margin:0;padding:0;list-style:none}
.hy-legend li{display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:rgba(39,39,42,.78);border:1px solid var(--hy-bord);box-shadow:var(--hy-reflet);font-family:'Geist',sans-serif;font-size:12.5px;font-weight:500;color:#fafafa;white-space:nowrap}
.hy-legend li::before{content:'';width:6px;height:6px;border-radius:50%;background:#a48bff}
/* Prix de la vidéo montrée (20 min), en tête de la légende */
.hy-legend .hy-price{background:#6b46e5;border-color:transparent;font-weight:600;color:#fff}
.hy-legend .hy-price::before{display:none}
.hy-say{display:none}
/* Pendant la scène plein écran : ni bouton de commande collant, ni retour en haut */
.motion-ready.hy-top .cta-sticky,.motion-ready.hy-top .to-top{opacity:0;pointer-events:none}

/* Sans JavaScript (et état final) : calques posés, piste, viseur et étiquettes masqués, durée finale et légende visibles */
.hy-wire,.hy-tl,.hy-pane > .hy-tag{opacity:0}
.hy-js .hy-wire,.hy-js .hy-pane > .hy-tag,.hy-js .hy-tl,.hy-js .hy-vf{opacity:1}

/* ---------- Ordinateur ---------- */
@media(min-width:901px){
  .hy-run,.hy-stick{position:static}
  .hy-pin{padding:124px 32px 40px}
  .hy .hero-left{gap:22px}
  .hy .crumbs{margin:0;color:#a1a1aa}
  .hy .crumbs a{border-bottom-color:rgba(255,255,255,.28)}
  .hy .crumbs a:hover{color:#fafafa}
  .hy .hero-kicker{margin:0;color:#a1a1aa}
  .hy .hero-title{margin:0;font-size:clamp(36px,min(3.9vw,7vh),64px);line-height:.98;color:#fafafa}
  .hy .hero-title em{color:#a1a1aa !important}
  .hy .hero-subtitle{max-width:560px;font-size:15.5px;line-height:1.6;color:#d4d4d8}
  .hy .hero-subtitle strong{color:#fafafa}
  .hy .hero-ctas{flex-direction:row;flex-wrap:wrap;align-items:center;gap:12px 16px}
  .hy .hero-note{flex-basis:100%;color:#a1a1aa}
  .hy .btn-ghost{background:rgba(255,255,255,.06);color:#fafafa;border-color:rgba(255,255,255,.22)}
  .hy .btn-ghost:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.32);color:#fafafa}
  /* Chiffres clés : tuiles de verre, prix à la minute en tuile pleine */
  .hy .trust-bar{position:relative;z-index:1;margin:32px auto 0;padding:0;max-width:1336px;background:none;border:0}
  .hy .trust-bar-inner{gap:12px;align-items:stretch}
  .hy .trust-stat{display:flex;flex-direction:column;justify-content:center;gap:6px;padding:14px 18px;text-align:left;border-radius:12px;background:var(--hy-fond);border:1px solid var(--hy-bord);box-shadow:var(--hy-reflet)}
  .hy .trust-stat::before{display:none}
  .hy .trust-stat-num{margin:0;font-size:30px;font-weight:600;color:#fafafa;font-variant-numeric:tabular-nums}
  .hy .trust-stat-num em{color:#a1a1aa}
  .hy .trust-stat-label{color:#a1a1aa}
  .hy .trust-stat.accent{background:#6b46e5;border-color:transparent}
  .hy .trust-stat.accent .trust-stat-num,.hy .trust-stat.accent .trust-stat-num em{color:#fff}
  .hy .trust-stat.accent .trust-stat-label{color:rgba(255,255,255,.86)}
}
@media(min-width:901px) and (min-height:600px){
  .motion-ready .hero.hy{height:320vh}
  .motion-ready .hy-pin{position:sticky;top:0;height:100vh;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;padding:48px 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 hy-top,
     posée par hero-youtube.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.hy-top .topbar:not(:focus-within){transform:translateY(-100%)}
  .motion-ready.hy-top .tc-rail:not(:focus-within){transform:translateX(-160%)}
  .motion-ready.hy-top .tc-bar{opacity:0;pointer-events:none}
  .motion-ready .hy-grid{width:100%}
  .motion-ready .hy-stage{height:min(calc(100vh - 230px),680px)}
  .motion-ready .hy .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 .hy-pin{margin-left:-64px;padding-left:96px}
}

/* ---------- Mobile et tablette ---------- */
@media(max-width:900px){
  .hy-pin{display:flex;flex-direction:column}
  .hy-grid{display:contents}
  .hy .hero-left{padding:96px 20px 0}
  .hy-run{margin:28px 20px 0}
  .hy-stick{position:relative;height:640px;border-radius:12px;overflow:hidden}
  .hy-stage{--ye:-.06;position:absolute;inset:64px 0 12px;height:auto;perspective:1900px;perspective-origin:50% 40%}
  .hy-world,.hy-legend,.hy-hud{--fw:min(92cqw,calc((100cqh - 200px) * 16 / 9))}
  .hy-tag{font-size:12.5px}
  /* Segments trop étroits pour un nom ; libellé du lecteur réduit au minutage */
  .hy-cl,.hy-chn,.hy-chd{display:none}
  .hy-hud{bottom:calc(50% + var(--fw) * (.28125 - var(--ye)) + 14px)}
  .hy-legend{top:calc(50% + var(--fw) * (.28125 + var(--ye)) + 26px);padding:0 16px;box-sizing:border-box;width:100%}
  .hy-legend li{padding:5px 10px;font-size:12px}
  .hy .trust-bar{margin:28px 0 48px}
}
/* Scène plein écran au défilement : seulement si l'écran est assez haut (pas un téléphone à l'horizontale) */
@media(max-width:900px) and (min-height:520px){
  .topbar{transition:transform .45s cubic-bezier(.16,1,.3,1)}
  .motion-ready.hy-top .topbar:not(:focus-within){transform:translateY(-100%)}
  .motion-ready .hy-run{order:-1;margin:0;height:250vh;height:250svh}
  .motion-ready .hy-stick{position:sticky;top:0;height:100vh;height:100svh;border-radius:0}
  .motion-ready .hy .hero-left{padding-top:36px}
  .motion-ready .hy-stage{top:104px;bottom:20px}
  .motion-ready .hy-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}
  .hy-say span{position:absolute;left:0;right:0;top:0;transition:opacity .35s,transform .45s cubic-bezier(.16,1,.3,1)}
  .hy-say span + span{color:#a1a1aa;opacity:0;transform:translateY(12px)}
  .hy-say.done span:first-child{opacity:0;transform:translateY(-12px)}
  .hy-say.done span + span{opacity:1;transform:none}
}

@media(min-width:901px) and (min-height:600px),(max-width:900px) and (min-height:520px){
  .motion-ready .hy-pane,.motion-ready .hy-world,.motion-ready .hy-tl{will-change:transform}
}