/*!
 * video.css -> CSS3 Feuille de Style pour Responsiv Design
 * Copyright 2017 (Association DicoLSF de Nantes)
 */
/* ===== primary styles =====================================================
   Author: Cyrille RUAU (Directeur, Webmestre)
   Creation : 13/10/2017      Modification : 25/8/2025
========================================================================== */

/**
* --------------------------------------------------------------------------- 
* Voir un exemple en Pleine Écran : https://la-cascade.io/video-en-background/
* Voir aussi : https://www.alsacreations.com/tuto/lire/1620-une-video-arriere-plan-sur-toute-la-page.html
* http://inserthtml.developpez.com/tutoriels/javascript/lecteur-video-personnalise/
* https://la-cascade.io/effets-video-html5-avec-css-blend-modes/
*/

video { display: block; text-align:center; alignment-adjust:central; alignment-baseline:central; }

video#video_droite {
  position: relative;
  right: 0; bottom: 0;
  text-align:center;

  
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  
  
  /* Gestion d'une vidéo en arrière plan */
  /* position: fixed; right: 0; bottom: 0; */
  /* min-width: 100%; min-height: 100%; */
  /* width: auto; height: auto; */
  /* z-index: -100; background: url(../video/Video_INOV.png) no-repeat; */
  background: url(../video_cyrb/DicoLSF_AWA.webp) no-repeat;
  background: no-repeat;
  background-size: cover;
  
  	/* gérer des bords arrondis */
	-moz-border-top-right-radius: 6px; 
    -webkit-border-top-right-radius: 6px; 
    border-top-right-radius: 6px;
	-moz-border-top-left-radius: 6px; 
    -webkit-border-top-left-radius: 6px; 
    border-top-left-radius: 6px;
	-moz-border-bottom-right-radius: 6px; 
    -webkit-border-bottom-right-radius: 6px; 
    border-bottom-right-radius: 6px;
	-moz-border-bottom-left-radius: 6px; 
    -webkit-border-bottom-left-radius: 6px; 
    border-bottom-left-radius: 6px;
	
	transition: 1s opacity;
}


video#video_gauche {
  position: relative;
  right: 0; bottom: 0;
  text-align:center;

  
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  
  
  /* Gestion d'une vidéo en arrière plan */
  /* position: fixed; right: 0; bottom: 0; */
  /* min-width: 100%; min-height: 100%; */
  /* width: auto; height: auto; */
  /* z-index: -100; background: url(../video/Video_INOV.png) no-repeat; */
  background: url(../video_cyrb/DicoLSF_AWA.webp) no-repeat;
  background: no-repeat;
  background-size: cover;
  
  	/* gérer des bords arrondis */
	-moz-border-top-right-radius: 6px; 
    -webkit-border-top-right-radius: 6px; 
    border-top-right-radius: 6px;
	-moz-border-top-left-radius: 6px; 
    -webkit-border-top-left-radius: 6px; 
    border-top-left-radius: 6px;
	-moz-border-bottom-right-radius: 6px; 
    -webkit-border-bottom-right-radius: 6px; 
    border-bottom-right-radius: 6px;
	-moz-border-bottom-left-radius: 6px; 
    -webkit-border-bottom-left-radius: 6px; 
    border-bottom-left-radius: 6px;
	
	transition: 1s opacity;
}



video#video_drone {
  position: relative;
  right: 0; bottom: 0;
  text-align:center;

  
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  
  
  /* Gestion d'une vidéo en arrière plan */
  /* position: fixed; right: 0; bottom: 0; */
  /* min-width: 100%; min-height: 100%; */
  /* width: auto; height: auto; */
  /* z-index: -100; background: url(../video/Video_INOV.png) no-repeat; */
  background: url(../video_cyrb/DicoLSF_AWA.webp) no-repeat;
  background: no-repeat;
  background-size: cover;
  
  	/* gérer des bords arrondis */
	-moz-border-top-right-radius: 6px; 
    -webkit-border-top-right-radius: 6px; 
    border-top-right-radius: 6px;
	-moz-border-top-left-radius: 6px; 
    -webkit-border-top-left-radius: 6px; 
    border-top-left-radius: 6px;
	-moz-border-bottom-right-radius: 6px; 
    -webkit-border-bottom-right-radius: 6px; 
    border-bottom-right-radius: 6px;
	-moz-border-bottom-left-radius: 6px; 
    -webkit-border-bottom-left-radius: 6px; 
    border-bottom-left-radius: 6px;
	
	transition: 1s opacity;
}



video#video_gauche71 {
  position: relative;
  right: 0; bottom: 0;
  text-align:center;

  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  
  background: url(../video_cyrb/DicoLSF_AWA.webp) no-repeat;
  background: no-repeat;
  background-size: cover;
  
  	/* gérer des bords arrondis */
	-moz-border-top-right-radius: 6px; 
    -webkit-border-top-right-radius: 6px; 
    border-top-right-radius: 6px;
	-moz-border-top-left-radius: 6px; 
    -webkit-border-top-left-radius: 6px; 
    border-top-left-radius: 6px;
	-moz-border-bottom-right-radius: 6px; 
    -webkit-border-bottom-right-radius: 6px; 
    border-bottom-right-radius: 6px;
	-moz-border-bottom-left-radius: 6px; 
    -webkit-border-bottom-left-radius: 6px; 
    border-bottom-left-radius: 6px;
	
	transition: 1s opacity;
}

video#video_gauche74 {
  position: relative;
  right: 0; bottom: 0;
  text-align:center;

  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  
  background: url(../video_cyrb/DicoLSF_AWA.webp) no-repeat;
  background: no-repeat;
  background-size: cover;
  
  	/* gérer des bords arrondis */
	-moz-border-top-right-radius: 6px; 
    -webkit-border-top-right-radius: 6px; 
    border-top-right-radius: 6px;
	-moz-border-top-left-radius: 6px; 
    -webkit-border-top-left-radius: 6px; 
    border-top-left-radius: 6px;
	-moz-border-bottom-right-radius: 6px; 
    -webkit-border-bottom-right-radius: 6px; 
    border-bottom-right-radius: 6px;
	-moz-border-bottom-left-radius: 6px; 
    -webkit-border-bottom-left-radius: 6px; 
    border-bottom-left-radius: 6px;
	
	transition: 1s opacity;
}

video#video_gauche91 {
  position: relative;
  right: 0; bottom: 0;
  text-align:center;

  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  
  background: url(../video_cyrb/DicoLSF_AWA.webp) no-repeat;
  background: no-repeat;
  background-size: cover;
  
  	/* gérer des bords arrondis */
	-moz-border-top-right-radius: 6px; 
    -webkit-border-top-right-radius: 6px; 
    border-top-right-radius: 6px;
	-moz-border-top-left-radius: 6px; 
    -webkit-border-top-left-radius: 6px; 
    border-top-left-radius: 6px;
	-moz-border-bottom-right-radius: 6px; 
    -webkit-border-bottom-right-radius: 6px; 
    border-bottom-right-radius: 6px;
	-moz-border-bottom-left-radius: 6px; 
    -webkit-border-bottom-left-radius: 6px; 
    border-bottom-left-radius: 6px;
	
	transition: 1s opacity;
}

video#video_gauche120 {
  position: relative;
  right: 0; bottom: 0;
  text-align:center;

  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  
  background: url(../video_cyrb/DicoLSF_AWA.webp) no-repeat;
  background: no-repeat;
  background-size: cover;
  
  	/* gérer des bords arrondis */
	-moz-border-top-right-radius: 6px; 
    -webkit-border-top-right-radius: 6px; 
    border-top-right-radius: 6px;
	-moz-border-top-left-radius: 6px; 
    -webkit-border-top-left-radius: 6px; 
    border-top-left-radius: 6px;
	-moz-border-bottom-right-radius: 6px; 
    -webkit-border-bottom-right-radius: 6px; 
    border-bottom-right-radius: 6px;
	-moz-border-bottom-left-radius: 6px; 
    -webkit-border-bottom-left-radius: 6px; 
    border-bottom-left-radius: 6px;
	
	transition: 1s opacity;
}



/* Btn changer de vidéo : aleatoire_video.js */
.visible_awa { visibility: visible!important; }
.invisible_awa { visibility: hidden!important; }