@charset "utf-8";
/* ------------------------------------------------------- hero, video de fond */
/* La video de la regie tourne en fond, deja tres assombrie a la fabrication.
   Elle remonte sous l'entete, qui reste translucide tant qu'on n'a pas defile. */

:root{ --h-entete: 76px; }
@media (max-width: 900px){ :root{ --h-entete: 66px; } }

.hero{
  position: relative; isolation: isolate;
  margin-top: calc(-1 * var(--h-entete));
  padding-block: calc(var(--h-entete) + clamp(28px, 4vw, 64px)) clamp(36px, 4.5vw, 72px);
}
.hero-fond{
  position: absolute; inset: 0; z-index: -1; overflow: hidden;
  background: #05090f url("studio-fond.jpg") center / cover no-repeat;
}
.hero-fond video{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity 1.2s ease;
}
.hero-fond video.joue{ opacity: 1; }
/* voile : plus dense sous le texte, fondu vers la page en bas */
.hero-fond::after{
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(10,18,30,.3) 0, rgba(10,18,30,0) 26%, rgba(10,18,30,0) 68%, var(--fond) 100%),
    linear-gradient(to right, rgba(10,18,30,.5) 0, rgba(10,18,30,.18) 62%, rgba(10,18,30,.08) 100%);
}
@media (max-width: 900px){
  .hero-fond{ background-image: url("studio-fond-mobile.jpg"); }
  .hero-fond::after{
    background: linear-gradient(to bottom, rgba(10,18,30,.15) 0, rgba(10,18,30,.4) 50%, var(--fond) 100%);
  }
}

.entete:not(.pose){ background: rgba(10,18,30,.3); }

/* sans portrait : le texte seul a gauche, la video occupe toute la largeur */
.hero{ min-height: min(82vh, 760px); display: flex; align-items: center; }
.hero-grille{ grid-template-columns: minmax(0, 1fr); }
.hero-texte{ max-width: 760px; }

/* sur telephone, « ENREGISTREMENT, » fait 11 fois la taille de police :
   le titre se regle sur la largeur pour ne jamais couper le mot en deux */
@media (max-width: 600px){
  .hero h1{ font-size: min(38px, calc((100vw - 40px) / 11)); }
}