/*lié au vidé - 22/09/2025*/


/* * * * VIDÉO EN FOND * * * */
.contenuAvantVideoEnFond /*+ .zoneVideoEnFond*/ {
  position: relative; z-index: 1; margin-bottom: -40px
}

.zoneVideoEnFond + .contenuApresVideoEnFond {
  position: relative; z-index: 1;

  margin-top:-60px; /*par défaut si suivant non reconnu*/
  margin-top:-7vw; /*mieux si selon largeur page (via vw=view width)*/
  margin-top: clamp(-90px, -7vw, -10px); /*et encore mieux sur navigateur moderne avec clamp (= au minimum -90px, idéalement -7vw, mais ne dépassera jamais -10px)*/
  /*FIXME : margin-top à adapter selon taille/ratio vidéo pour rester lisible*/
}

.zoneVideoEnFond {
  z-index: 0; /* en fond */
  position: relative;
  OFF_width: 100%;
  OFF_height: auto;
  OFF_max-width: 1800px;
  OFF_max-height: 1012px; /* !! si en plein écran !!  Hauteur max pour ratio 16:9 (=ratio de 56,25%) (ex: L=1400 => H=788 ; L=1800 => H=1012 ; ) */
  margin: 0 auto;
  overflow: hidden;
}

.zoneVideoEnFond video {
  OFF_width: 100%;
  OFF_height: auto;
  OFF_max-height: 1012px; /* !! si en plein écran !!  Hauteur max pour ratio 16:9 (=ratio de 56,25%) (ex: L=1400 => H=788 ; L=1800 => H=1012 ; ) */
  /*⚠️ (max-)height/(max-)width s'appliquent aussi si en plein écran (raison pour laquelle je j'adapte si en plein écran via .isFullscreen)*/
  object-fit: cover;
  /*pointer-events: none;*/
  position: relative;
  /*z-index: -1; /* en fond */
  display: block;
}

/*
adapte hauteur/largeur selon ratio video souhaité selon largeur page (vw = view width). Pour la zone globale + la vidéo elle-même */
  .zoneVideoEnFond.ratioVideo-1x1
, .zoneVideoEnFond.ratioVideo-1x1 video {
  width: 100vw;  height: 100vw;
}
  .zoneVideoEnFond.ratioVideo-16x9
, .zoneVideoEnFond.ratioVideo-16x9 video {
  width: 100vw;  height: 56.25vw;
}
/*
ratio 1x1 (selon taille) : */
  .zoneVideoEnFond.ratioVideo-1x1.XXL
, .zoneVideoEnFond.ratioVideo-1x1.XXL video {
  max-width: 1800px;  max-height: 1800px;
}
  .zoneVideoEnFond.ratioVideo-1x1.XL
, .zoneVideoEnFond.ratioVideo-1x1.XL video {
  max-width: 1400px;  max-height: 1400px;
}
  .zoneVideoEnFond.ratioVideo-1x1.M
, .zoneVideoEnFond.ratioVideo-1x1.M video {
  max-width: 800px;  max-height: 800px;
}
/*
ratio 16x9 (selon taille) : */
  .zoneVideoEnFond.ratioVideo-16x9.XXL
, .zoneVideoEnFond.ratioVideo-16x9.XXL video {
  max-width: 1800px;  max-height: 1012px;
}
  .zoneVideoEnFond.ratioVideo-16x9.XL
, .zoneVideoEnFond.ratioVideo-16x9.XL video {
  max-width: 1400px;  max-height: 788px;
}
  .zoneVideoEnFond.ratioVideo-16x9.M
, .zoneVideoEnFond.ratioVideo-16x9.M video {
  max-width: 800px;  max-height: 450px;
}


.degradeSurVideoEnFond {
  position: absolute;

  top: 0;  left: 0;  width: 100%;  height: 100%;
  height: 101% !important;  top: -1px;  /*corrige bug iPhone (car micro ligne au-dessus et en-dessous non remplie par le dégradé !)*/

  pointer-events: none;
  z-index: 10;
}
.degradeSurVideoEnFond.blanc {
  background: linear-gradient(to bottom, 
    rgba(255, 255, 255, 1) 0%, 
    rgba(255, 255, 255, 0.5) 12%, 
    rgba(255, 255, 255, 0) 20%, 
    rgba(255, 255, 255, 0) 80%, 
    rgba(255, 255, 255, 0.7) 90%, 
    rgba(255, 255, 255, 1) 100%
  );
}

.zone-boutonVideo {
  position: absolute; 
  display: inline-block;
  /*top: 80%; left: 50%; transform: translate(-50%, -50%);*/
  top: 80%; left: 0; transform: translateY(-50%); width: 100%; /*pleine largeur de la zone (mieux sur petit écran)*/
  z-index: 10;
}

  .zoneVideoEnFond.lectureEnPause .btnPlay
, .zoneVideoEnFond.lectureEnCours .btnFullscreen
{
  display: inline-block !important;
  /*bouton plein-écran affiché que si lecture déjà en cours (permet d'alléger en affichant que 1 bouton à la fois)*/
}

  .contenuAvantVideoEnFond /*+ .zoneVideoEnFond*/
, .zoneVideoEnFond + .contenuApresVideoEnFond
{
  max-width: 1800px;
  margin-left: auto;
  margin-right: auto;
}

.zoneVideoEnFond video.isFullscreen {
  max-width: none !important;
  max-height: none !important;
  pointer-events: auto !important;
    /*Pas pointer-events:none pour permettre contrôle (une fois vidéo en plein écran sous Safari) et afficher controles (Firefox)*/
}

/* * * * FIN VIDÉO EN FOND * * * */