/* 42.fr · hero sur le système commun des études de cas (NOC 42, 42 Network) : titre à gauche à mi-hauteur, informations en bas, repère de défilement à droite.
   Singularité de 42.fr : le film tourne dans un grand espace à droite qui se fond dans le noir ; le texte reste toujours sur le noir, jamais sur une image chargée. */
.hero{position:relative;height:100vh;height:100svh;min-height:600px;background:#000!important;color:#fff;overflow:hidden}
.hero-stage{position:absolute;top:0;right:0;bottom:0;width:min(76%,calc(100% - 300px))}
.hero-stage .player{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;background:#000;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 38%);mask-image:linear-gradient(90deg,transparent 0,#000 38%);will-change:clip-path,transform}
.hero-stage .player video{object-fit:cover;object-position:60% 50%}
/* voiles noirs : en haut pour l’en-tête, en bas pour les informations */
.hero .pl-veil{background:linear-gradient(180deg,rgba(0,0,0,.55) 0,rgba(0,0,0,0) 18%,rgba(0,0,0,0) 62%,rgba(0,0,0,.9) 100%)}
.pl-hit{position:absolute;inset:0;z-index:1;background:none;border:0;padding:0;cursor:pointer}
.player[data-mode=full] .pl-hit{cursor:default}

.hero-title{position:absolute;left:var(--gutter);top:46%;transform:translateY(-50%);max-width:min(40vw,600px);z-index:4}
.hero-title .kick{color:rgba(255,255,255,.56);margin:0 0 22px}
.hero-title h1{font-size:clamp(72px,10.4vw,176px);font-weight:500;letter-spacing:-.05em;line-height:.88;padding-bottom:.04em;margin:0 0 0 -.03em}
.hero-title .desc{margin:28px 0 0;font-size:clamp(17px,1.45vw,22px);line-height:1.38;color:rgba(255,255,255,.74);letter-spacing:-.01em}
.hero .line{display:block;overflow:hidden}
.hero .line>span{display:block}
.hero .pl-big{position:static;margin-top:clamp(28px,4svh,44px)}
.hero .pl-ic{width:56px}
.hero .pl-l b{font-size:clamp(17px,1.3vw,21px)}
.hero .pl-l .mono{font-size:12px}

.hero-meta{position:absolute;left:var(--gutter);right:calc(var(--gutter-r) + 160px);bottom:calc(28px + env(safe-area-inset-bottom,0px));display:grid;grid-template-columns:.7fr .5fr 1fr 1.3fr;gap:24px;margin:0;color:rgba(255,255,255,.86);z-index:4}
.hero-meta dt{color:rgba(255,255,255,.5);margin-bottom:4px}
.hero-meta dd{margin:0;font-size:15px;line-height:1.35}
.hero-cue{position:absolute;right:var(--gutter-r);bottom:calc(28px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:12px;color:rgba(255,255,255,.56);z-index:4}
.hero-cue .cue-in{display:flex;align-items:center;gap:12px}
.hero-cue i{position:relative;display:block;width:1px;height:28px;background:rgba(255,255,255,.18);overflow:hidden}
.hero-cue i::after{content:"";position:absolute;left:0;top:0;width:1px;height:12px;background:#fff;animation:cue 2.2s cubic-bezier(.65,0,.35,1) infinite}
.hero .pl-mini{right:var(--gutter-r);bottom:calc(84px + env(safe-area-inset-bottom,0px));min-height:36px;font-size:11px;background:rgba(0,0,0,.55);border-color:rgba(255,255,255,.28);opacity:.8;z-index:4}
.hero .pl-mini:hover{opacity:1}

/* le film entier : la scène s’ouvre sur tout l’écran, au-dessus de la page */
.hero .player[data-mode=full]{position:fixed;inset:0;z-index:200;-webkit-mask-image:none;mask-image:none;transform:none!important;filter:none!important;clip-path:none!important}
.hero .player[data-mode=full] video{object-fit:contain;object-position:50% 50%}
html.film-open,html.film-open body{overflow:hidden}

@media (max-width:860px){
  .hero{height:auto;min-height:100svh;display:flex;flex-direction:column;padding:calc(84px + env(safe-area-inset-top,0px)) 0 calc(28px + env(safe-area-inset-bottom,0px))}
  .hero-title{order:1;position:static;transform:none;max-width:none;padding:0 var(--gutter-r) 0 var(--gutter)}
  .hero-title .kick{margin-bottom:14px}
  .hero-title h1{font-size:clamp(64px,19vw,104px)}
  .hero-title .desc{margin-top:16px;font-size:16px}
  .hero .pl-big{margin-top:24px}
  .hero-stage{order:2;position:relative;width:100%;aspect-ratio:16/9;margin:28px 0;flex:none}
  .hero-stage .player{-webkit-mask-image:none;mask-image:none}
  .hero-stage .player video{object-position:50% 50%}
  .hero .pl-veil{display:none}
  .hero .pl-mini{right:8px;bottom:8px}
  .hero-meta{order:3;position:static;margin-top:auto;padding:0 var(--gutter-r) 0 var(--gutter);grid-template-columns:1fr 1fr;gap:10px 16px}
  .hero-meta dd{font-size:14px}
  .hero-cue{display:none}
}
@media (prefers-reduced-motion:reduce){.hero-stage .player{will-change:auto}.hero-cue i::after{animation:none}}