#BoutonLectPause, #BoutonStop, #BoutonVol, #BoutonPleinEcran{
	position:absolute;display:block;
	border:1px dotted #593B42;border-radius:10%;
	background-color:#E0D2BD;
}
#BoutonLectPause, #BoutonStop{
	top:15%;height:35%;width:42%;
	text-align:center;line-height:50%;
}
#BoutonLectPause{left:4%;}
#BoutonStop{left:52%;}
#BoutonVol{top:54%;left:2%;width:96%;height:20%;}

#BoutonLectPause-H, #BoutonStop-H, #BoutonVol-H{
	position:relative;display:block;
	padding-bottom:0.5vw;margin-bottom:1vw;
	border:1px dotted #593B42;border-radius:10%;
	background-color:#E0D2BD;
}
#BoutonLectPause-H, #BoutonStop-H{height:8vw;}
#BoutonPleinEcran{border:1px solid red;
	display:block;
	top:76%;left:2%;width:96%;height:22%;
	color:#BAA274;font-size:.9vw;font-weight:800;text-align:center;line-height:1.2vw;
	}
#BoutonPleinEcran:hover{cursor:pointer;}
#BoutonPleinEcran.Actif{background-color:#FFCC99;color:#D20000;}
#BoutonPleinEcran.Actif2{display:none;}
#BoutonVol-H{height:9vw}


#BtnLectPause {position:relative;width:55%;top:8%;}
#BtnLectPause:hover,  #BtnStop:hover, #BtnLectPauseH:hover,  #BtnStopH:hover{cursor:pointer;}
#BtnLectPauseH {position:relative;width:66%;top:.2vw;margin-left:17%;}
#BtnStopH {position:relative;width:85%;top:0;margin-left:7.5%;}
#BtnStop{position:relative;width:80%;top:-3%;}

.BtnTxt, .BtnTxtVol{color:#372326;font-size:.9vw;font-weight:bold;height:0;}
.BtnTxtH, .BtnTxtVolH{color:#372326;font-size:1.2vw;font-weight:bold;height:0;text-align:center;}
.BtnTxtVol{position:relative;top:-1.3vw;}
.BtnVolBarre::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 15%; height: 2.5vh;
  background: black;border-radius: 50%;
  cursor: pointer;
  transition: background 0.3s;
}
.BtnVolBarre{
	-webkit-appearance: none; /* Supprimer le style par défaut */
	position:relative;
	top:-.5vw;height:0.5vh;width:90%;margin-left:5%;
	border-radius: 5px;
	background: #B5988A;
	outline: 1px solid #593B42;
	transition: background 0.3s ease;
}
.BtnVolBarre::-webkit-slider-thumb:hover{background:red;}
@media(max-width: 980px){
						#BoutonLectPause{left:10%;width:80%;height:20%;top:10%;}
						#BoutonStop{left:10%;width:80%;height:20%;top:34%;}
						#BoutonVol{left:5%;width:90%;height:15%;top:58%;}
						#BoutonPleinEcran{left:5%;width:90%;height:20%;top:77%;line-height:1.8vw;font-size:1.2vw;}
						.BtnTxt{font-size:1.7vw;}
						.BtnTxtVol{font-size:1.5vw;position:relative;top:-1.5vw;}
						.BtnVolBarre{margin-top:25%;}
						.BtnVolBarre::-webkit-slider-thumb {width: 2vw;height: 3vw;margin-top: -.1vw;}
						#volumeValue{display:none;}
}
.BtnVolBarreH {
  writing-mode: bt-lr; /* Bottom to top, left to right */
  -webkit-appearance: slider-vertical; /* Pour Chrome/Safari */
  width: 10%;margin-left:40%;
  height: 7vw;
}
#ContainerVideoTele{
	position:relative;display:inline-block;
	width:70%;margin-left:15%;height:auto;
}
#PanneauCmde{
	position:absolute;
	width:15%;height:36.2%;left:85%;top:50%;
	border:.7vw solid #522D2C;background-color:#B5988A;
	border-radius:5%;border-bottom-right-radius:1vw;
}
#PanneauCmde.ActifCmde{
	position:fixed;z-index:9999;
	width:5vw;height:60%;top:20%;left:95%;
	border:.2vw solid #522D2C;background-color:#B5988A;
	border-radius:5%;border-bottom-right-radius:1vw;
}
@media(max-width: 980px){
						#PanneauCmde{
							width:14%;height:80%;top:12%;left:86%;
							border-bottom-right-radius:2vw;
						}
}
#PanneauCmde-H{
	position:absolute;display:none;z-index:250;
	width:6.5vw;top:10%;left:112%;
	border-left:.5vw solid #382223;border-right:.5vw solid #382223;
	border-top:2vw solid #382223;border-bottom:3vw solid #382223;
	background-color:#B5988A;
	border-bottom-right-radius:1vw;	border-top-right-radius:1vw;	
}
#QuitterPleinEcran{
	position: relative;display: none;z-index:9999;
    width:5.6vw;padding-top:1.2vw;padding-bottom:.5vw;
	font-size: 1vw;color:white;font-weight:bold;line-height:1.5vw;
    background:rgba(255,0,0,0.8);border:none;border-radius:0.2vw;
	cursor:pointer;
}
#TeleImg{
	width:100%;height:auto;
	display:block;
	}
#TeleImg.PleinEcran{display:none;}
					
.Txt-Cmde{color:yellow;font-size:1.5vw;text-shadow:1.5px 1px black}
@media(max-width: 980px){
						.Txt-Cmde{font-size:1.6vw;letter-spacing:-1px;}	
}
#VideoPerso{ 	/* = Format de la vidéo affichée, quand elle joue. */		
	position:absolute;
	left:7%;top:28%;width:73%;height:60%;

}
#VideoPerso video{display:block;}
#VideoPerso.playing .video-poster {
  opacity: 0; /* Cache l'image quand la vidéo joue (class mise à 'playing' par le JS) */
}
#videoPoster.Retour{display:none;}
#VideoTuto{
	position: absolute;
	top: -35%; left: 0;
	/*border-radius:5vw / 3 vw;*/
	transform:scaleY(1.08);
	transform-origin:top;
}
#VideoTuto.PleinEcran{border-radius:.5vw;}
@media(max-width: 980px){
						#VideoPerso{left:10%;top:30%;width:67%;height:50%;}
						#VideoPersoEven{left:8%;top:38.5%;width:67%;height:50%;}
						.video-poster,#ytPlayer{
							top: -54%; left:-2%;
							width:114%;
							border:2vw solid #161211;border-top:2.5vw solid #161211;border-bottom:2.5vw solid #161211;
						}						
						#VideoTuto{
							border-radius:120% / 15%;
							transform:scaleY(1.08);
							transform-origin:top;
						}						
}
.video-poster,		/*	Ecran gris d'attente (neige)*/
#ytPlayer{			/* = Image vidéo dans écran poste de télé */
	border:2vw solid #382223;border-top:2.5vw solid #382223;border-bottom:2.5vw solid #382223;
	position: absolute;
	top: -33%; left: -5%;	
	width:110%;
	border-bottom-left-radius:1vw;border-top-left-radius:1vw;
	aspect-ratio: 16 / 10;
	/*border-radius:40% / 7%;*/
	transition: opacity 0.5s;	
}
#ytPlayer.PleinEcran{
	position:fixed;z-index: 250;
	top:0;left:0;
	aspect-ratio: 16 /9;
	border-bottom-left-radius:2vw;border-top-left-radius:2vw;
	max-width:95%;max-height:var(--vh);
	overflow:auto;
}