/* ------------------------------------------------------------------------
   Le film comme hero plein ecran.

   Le film occupe tout l'ecran, l'en-tete passe par-dessus, et les deux
   boutons se posent sur l'image.

   Aucun voile ici, et c'est voulu. La mesure de douze instants dans les six
   scenes avait montre que le film n'avait aucune zone libre : chaque scene
   est une diapositive complete. Plutot que de masquer le film pour poser des
   boutons dessus, c'est le film qui a ete modifie, dans motion-design :
   ligne du coin haut droit retiree, barre de chapitres remontee de 30 px.
   Il reserve maintenant une bande de 70 px au bas de son image, soit 7,8 %
   de sa hauteur, et sa barre de chapitres reste entierement visible
   au-dessus. Les boutons se posent dans cette bande, sur du fond.

   svh plutot que vh : sur telephone, vh vaut la fenetre barres du navigateur
   repliees, donc le contenu deborde tant qu'elles sont la. svh est la plus
   petite des deux, ce qui garantit que le hero tient, toujours.
   ------------------------------------------------------------------------ */

.c-hero-film {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 420px;
  overflow: hidden;
  background: var(--dark);
}

/* cover, pas contain : le film doit remplir l'ecran sans bande. Le film est
   en 16/9, comme la quasi-totalite des ecrans d'ordinateur, donc le rognage
   est nul ou minime. object-position centre : s'il y a rognage, il se
   repartit en haut et en bas, la ou le film laisse ses marges. */
.c-hero-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: var(--dark);
}

/* Avant que le script ait choisi le film, on ne rogne rien : la forme de
   l'ecran n'est pas encore confrontee a celle de l'image. */
.c-hero-film:not([data-motion-format]) .c-hero-video { object-fit: contain; }

/* Film paysage, 16/9. Hors de cette fourchette, cover couperait ses textes :
   on montre l'image entiere. Mesure a l'appui : 0 % de rognage sur un ecran
   16/9, 11 % sur un 16/10. */
@media (max-aspect-ratio: 5 / 3), (min-aspect-ratio: 17 / 9) {
  .c-hero-film[data-motion-format="paysage"] .c-hero-video { object-fit: contain; }
}

/* Film portrait, 9/16. Meme principe, autour de son propre rapport.

   La borne basse n'est pas choisie au jugement. Le film reserve 87 px de
   marge laterale sur 1080, soit 8,06 %. Remplir l'ecran exige de rogner
   (1 - rapport / 0,5625) de la largeur, moitie de chaque cote ; ce rognage
   reste dans la marge tant que le rapport depasse 0,472. Verifie a l'ecran :
   a 0,450, « directo. » etait coupe a gauche et les cartes laterales
   amputees.

   En dessous, et au-dessus de 5/8 pour les tablettes, on montre l'image
   entiere. Les bandes qui apparaissent ont la couleur de fond du film, qui
   est celle de la page : elles ne se voient pas. Une bande invisible vaut
   mieux qu'un titre ampute. */
.c-hero-film[data-motion-format="portrait"] .c-hero-video { object-fit: contain; }

@media (min-aspect-ratio: 12 / 25) and (max-aspect-ratio: 5 / 8) {
  .c-hero-film[data-motion-format="portrait"] .c-hero-video { object-fit: cover; }
}

/* Le titre existe pour la structure du document et pour qui n'affiche pas
   la video. Le film porte le message a l'ecran, le repeter par-dessus le
   dedoublerait. */
.c-hero-titre {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Les boutons se posent dans la bande que le film laisse libre en bas,
   7,8 % de sa hauteur. Rien ne les voile : ils sont sur du fond, pas sur
   l'image. La barre de chapitres du film reste entierement visible
   au-dessus, c'est elle qui enumere les etapes. */
.c-hero-actions {
  position: absolute;
  left: clamp(20px, 5vw, 80px);
  bottom: clamp(10px, 1.6vh, 18px);
  z-index: 2;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.c-hero-actions a {
  padding: 12px 22px;
  border-radius: 100px;
  font-weight: 900;
  font-size: 14px;
  white-space: nowrap;
}

.c-hero-essai { background: var(--coral); color: var(--dark); }
.c-hero-formule { border: 1px solid rgba(255, 255, 255, .55); color: #fff; }
.c-hero-formule:hover { background: rgba(255, 255, 255, .1); }

/* La pause : une pastille discrete dans le coin oppose, loin des boutons et
   loin du titre du film. Son libelle est dans aria-label, son dessin change
   avec l'etat. */
.c-hero-pause {
  position: absolute;
  right: clamp(16px, 5vw, 80px);
  bottom: clamp(10px, 1.6vh, 18px);
  z-index: 2;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  background: rgba(5, 16, 17, .55);
  cursor: pointer;
}

.c-hero-pause:hover { background: rgba(5, 16, 17, .8); border-color: rgba(255, 255, 255, .6); }

/* Deux barres pendant la lecture, un triangle quand c'est en pause. */
.c-hero-pause span {
  display: block;
  width: 10px;
  height: 12px;
  border-left: 3px solid #fff;
  border-right: 3px solid #fff;
}

.c-hero-film[data-motion-etat="pause"] .c-hero-pause span {
  width: 0;
  height: 0;
  border: 7px solid transparent;
  border-left: 12px solid #fff;
  margin-left: 4px;
}

/* ---------- l'en-tete passe par-dessus le film ---------- */
.accueil-film .site-header {
  position: fixed;
  left: 0;
  right: 0;
  background: transparent;
  border-bottom-color: transparent;
  transition: background .25s, border-color .25s;
}

/* Des qu'on quitte le haut de page, l'en-tete reprend son fond : sans cela
   il deviendrait illisible sur les sections claires. */
.accueil-film[data-defile] .site-header {
  background: var(--dark);
  border-bottom-color: rgba(255, 255, 255, .08);
}

/* Le film affiche son propre « directo. » en haut a gauche, exactement la ou
   se trouve celui du site : les deux se superposaient. Celui du site
   s'efface tant qu'on est sur le film, et revient des qu'on descend. */
.accueil-film:not([data-defile]) .site-header .c-logo {
  opacity: 0;
  pointer-events: none;
}

.accueil-film .site-header .c-logo { transition: opacity .25s; }

@media (max-width: 600px) {
  .c-hero-actions { left: 20px; right: 20px; bottom: 20px; }
  .c-hero-actions a { flex: 1 1 auto; text-align: center; font-size: 14px; padding: 14px 18px; }
  .c-hero-pause { bottom: auto; top: calc(var(--entete, 73px) + 14px); right: 14px; }
}