/* --------------------------------------------------------------------------
   Lecture des vidéos en fenêtre superposée.
   Chargé sur les pages qui portent un rail ou un rendu vidéo.
   css/site.css n'est pas modifié : ce fichier ne fait qu'ajouter.
   -------------------------------------------------------------------------- */

.voile-video{
  position:fixed;
  inset:0;
  z-index:900;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(25,22,54,.82);
  opacity:0;
  transition:opacity .22s ease;
}
.voile-video.ouvert{opacity:1}

/* Le cadre : 9:16, aussi haut que la fenêtre le permet */
.voile-cadre{
  position:relative;
  width:min(420px, 92vw);
  height:min(88vh, calc(92vw * 16 / 9));
  aspect-ratio:9 / 16;
  background:#000;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 24px 70px rgba(0,0,0,.5);
  transform:translateY(14px) scale(.98);
  transition:transform .26s cubic-bezier(.2,.9,.3,1);
}
.voile-video.ouvert .voile-cadre{transform:none}

.voile-cadre video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  display:block;
  background:#000;
}

/* Le lecteur TikTok ajoute sous la vidéo une bande avec le compte, la légende
   et la musique. On ne peut pas la retirer : elle est dans leur iframe. On
   rend donc l'iframe plus haute que le cadre et on laisse le cadre couper —
   seule la vidéo reste visible.

   --tk-bandeau : hauteur de cette bande. Si TikTok la modifie un jour et
   qu'un bout réapparaît, c'est la seule valeur à ajuster ici. */
.voile-cadre{--tk-bandeau:200px}

.voile-cadre iframe{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:calc(100% + var(--tk-bandeau));
  border:0;
  display:block;
  background:#000;
}

/* Fermeture — posée hors du cadre sur grand écran, dedans sur mobile.
   La fenêtre ne contient que la vidéo : le lecteur TikTok affiche déjà le
   compte et la légende, tout titre ajouté ferait doublon. */
.voile-fermer{
  position:absolute;
  top:-46px;
  right:-4px;
  width:38px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  background:#fff;
  color:#25225F;
  border:0;
  border-radius:50%;
  cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.3);
  transition:transform .15s ease;
}
.voile-fermer:hover{transform:scale(1.08)}
.voile-fermer:focus-visible{outline:3px solid #F7C716;outline-offset:3px}


/* Le corps ne défile plus derrière la fenêtre */
body.video-ouverte{overflow:hidden}

@media (max-height:720px), (max-width:560px){
  .voile-video{padding:0}
  .voile-cadre{
    width:100vw;
    height:100dvh;
    max-height:none;
    border-radius:0;
    aspect-ratio:auto;
  }
  .voile-fermer{top:14px;right:14px}
  }

@media (prefers-reduced-motion:reduce){
  .voile-video,
  .voile-cadre{transition:none}
}