.AudioBtnLectPause{width:96%;margin-left:3%;}
.AudioBtnStop{width:95%;margin-left:4%;}
.Audio-Cmdes { /*Positionnement par rapport à ImageLegende" */
	border-collapse: collapse;z-index:20;
	position:absolute;
	bottom:9.7vw;right:0;height:19vw;
	float:right;width:3%;margin-right:1%;
	Background-color:rgba(0,0,0,0.2);
}
.Audio-Cmdes td {
	border:none;z-index:100;
	display:block;text-align:center
	color:white;font-size:1vw;
	}
.Audio-Cmdes tr:nth-child(1) {height:25%;}
.Audio-Cmdes tr:nth-child(2) {height:25%;}
.Audio-Cmdes tr:nth-child(3) {
	display:flex;
	align-items:center;
	justify-content:center;
	}
@media (max-width: 980px){
						.Audio-Cmdes {
							display:none;
						}
						.Audio-Cmdes td {
							font-size:2vw;
							}
						.Audio-Cmdes tr:nth-child(1) {height:25%;}
						.Audio-Cmdes tr:nth-child(2) {height:25%;}							
}
.AudioNomBtn{
	display:block;
	text-align:center;line-height:.8vw;
	font-size:.8vw;letter-spacing:-.5px;
	color:black;
}
	
.audio-player {
	position:relative;top:-.3vw;
	display: flex;
	align-items: center;
	width: 100%;
	background: #222;
	padding:0.2vw; 
}
.AudioVolBarre {
	-webkit-appearance: none;
	width: 100%;
	height: 6vw;
	-webkit-appearance: slider-vertical; /* Pour Chrome/Safari */
	margin-top:2%;
}
.AudioVolBarre::-webkit-slider-runnable-track {z-index:20;
    width: auto;
}
.AudioVolBarre::-webkit-slider-thumb {
    background: #FFFFFF; /* Couleur du curseur */
    border-radius: 20%;
    cursor: pointer;
}
.AudioVolBarre:focus {outline: none;}
.AudioVolBarre::-moz-range-track {
    width: 20px;
    height: 100%;
    background: #ccc;
    border-radius: 10px;
}
.AudioVolBarre::-ms-track {
    width: 20px;
    height: 100%;
    background: #ccc;
    border-radius: 10px;
    border-color: transparent;
    color: transparent;
}
.AudioVolBarre::-ms-thumb {
    width: 20px;
    height: 20px;
    background: red;
    border-radius: 50%;
}
@media (max-width: 980px){
						.AudioVolBarre{
							height: 20vw;
						}
						.AudioVolBarre::-webkit-slider-runnable-track {
							width: 4vw;
						}						
}
.cache{display:none;}
.ContainerImage{
	display:inline-block;position:relative;
	width:45%;margin:2%;height:auto;
	vertical-align: top;
}
@media (max-width: 980px){
						.ContainerImage{
							width:98%;margin:1%;
						}						
}
.ImageDate{
	position:absolute;/* par rapport à "ImageLegende" */
	bottom:5vw;left:32.3%;
	width:100%;margin:0 4%;
	font-weight:bold;color:black;font-size:1.6vw;
}
@media (max-width: 980px){
						.ImageDate{
							top:-4vw;font-size:3vw;
							width:100%;height:0;left:-1vw;
						}	
}
.ImageLegende{
	position:relative;
	width:100%;height:5vw;top:-.3vw;
	color:white;	
}
.ImagePleinEcran{
	position:absolute;
	width:20%;
	bottom:2.3vw;left:0;
}
.ImagePlEcr-souris1{position:relative;width:28%;left:8%;top:-5.5vw;}
.ImagePlEcr-souris2{position:relative;width:25%;left:23%;top:-2.8vw;}
@media (max-width: 980px){
						.ImageLegende{
							position:relative;
							top:1vw;
							width:100%;height:10vw;
							line-height:2.5vw;	
						}	
}
.LectureBoutons{
	position:absolute;
	bottom:15vw;left:9vw;
	background-color:rgba(0,0,0,0.6);color:white;
	opacity:1;visibility:visible;
	transition: opacity 1s ease, visibility 1s ease;
}
.LectureBoutons.cache{opacity:0;visibility:hidden;}

.video-container {
  position: relative;
  width: 100%;
  height: auto;
}

video {width:100%;display:block;}

.VideoLoader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
.VideoVolBarre {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 0.8vw;
  border: 1px solid black;
  border-radius: 5px;
  outline: none;
  background: #ccc; 
  cursor: pointer;
  transform: scale(.8);
}
/* Chrome, Edge, Safari */
.VideoVolBarre::-webkit-slider-runnable-track {
  height: 0.8vw;
  border-radius: 5px;
  background: transparent;
}
.VideoVolBarre::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 1vw;
  height: 1.5vw;
  background: black;
  border-radius: 50%;
  cursor: pointer;
  margin-top: -0.35vw;
  position: relative;
  z-index: 2;
}
.VideoVolBarre::-webkit-slider-thumb:hover {
  background-color: red;
}
/* Firefox */
.VideoVolBarre::-moz-range-track {
  background: transparent;
  height: 0.8vw;
  border-radius: 5px;
}
.VideoVolBarre::-moz-range-thumb {
  width: 1vw;
  height: 1.5vw;
  background: black;
  border-radius: 50%;
  cursor: pointer;
  border: none;
}
.VideoVolBarre::-moz-range-thumb:hover {
  background-color: red;
}
.VideoVolBarre::-moz-range-progress {
  background-color: #542FC1; /* Couleur gauche - ajustée par JS */
  height: 0.8vw;
  border-radius: 5px;
}
@media (max-width: 980px) {
					  .VideoVolBarre {
						height: 2vw;
					  }
					  .VideoVolBarre::-webkit-slider-runnable-track {
						height: 2vw;
					  }
					  .VideoVolBarre::-webkit-slider-thumb {
						width: 9vw;
						height: 9vw;
						margin-top: -3vw;
					  }
					  .VideoVolBarre::-moz-range-thumb {
						width: 8vw;
						height: 8vw;
					  }
					  .VideoVolBarre::-moz-range-progress {
						height: 8vw;
					  }
}
.VideoCmdes{
	display:flex;gap:1vw;
	position:absolute; /* Parent : "ImageLegende" */
	align-items:center;
	width:43%;height:4.5vw;bottom:4.8vw;right:0;
	border:1px solid orange;
	background-color:rgba(255,153,204,0.4);
}
.VideoCmdesPlay{
	border:none;
	Background-color:transparent;
}
.VideoCmdes img:nth-child(1) {width:90%;}
.VideoCmdes img:nth-child(2) {width:100%;}

.VideoVolBarre {width:100%;margin-top:.8vw;}

.VideoBloc1, .VideoBloc2, .VideoBloc3 {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  /*flex:1; /* chaque bloc prend sa part */
}
.VideoBloc1, .VideoBloc2 {margin-left:.8vw;width : 15%;}
.VideoBloc3 {width : 50%;}

.VideoBloc1, .VideoBloc2, .VideoBlocTxt3 {
	display:block;
	font-size:1vw;font-weight:bold;
	color:black;text-align:center;line-height:.5vw;
	margin-top:0.1vw;
}
.VideoBloc1, .VideoBloc2{margin-top:0.1vw;}
.VideoBlocTxt3{margin-top:1vw;}

@media (max-width: 980px){
						.VideoBloc1, .VideoBloc2 {
							margin-left:2vw;width : 15%;
							font-size:2vw;
						}
						.VideoBloc3 {width : 50%;font-size:2vw;}	
						.VideoCmdes {
							gap:5vw; /* Espacement entre images */
							width:75%;height:12vw;bottom:11.5vw;right:0;
						}
						.videoCmdes img{
							width: 100%; /* Pour éviter que les éléments ne soient trop larges */
						}
						.VideoCmdes img:nth-child(1) {width:85%;} 
						.VideoCmdes img:nth-child(2) {width:100%;}
												
						.VideoBloc1, .VideoBloc2, .VideoBlocTxt3 {
							font-size:2.5vw;font-weight:bold;
							color:black;text-align:center;line-height:1.5vw;
							margin-top:0.5vw;margin-left:.8vw;
						}
						.VideoBlocTxt3{margin-top:3vw;}	
}

.VideoPerso{
	position:relative;display:block;
	width:100%;
}

.VideoTitreCoin{
	position:absolute;
	bottom:9.5vw;left:57%;
	padding:.3vw;
	color:white;font-size:1vw;
	border:2px solid green;border-radius:.3vw;
	Background-color:rgba(0,0,0,0.4);
}

.VideoPersoPlay, .VideoTitreCoinPlay{display:none;}
@media (max-width: 980px){
						.VideoTitreCoin{
							bottom:10vw;left:90%;
							font-size:3vw;
						}	
}
.videoYT-player iframe {
    width: 100%;
    height: 100%;
    max-width: 100%;
    aspect-ratio: 16/9; /* Maintient le ratio 16:9 de la vidéo */
    border-radius: 8px; /* Optionnel : pour donner un effet arrondi aux coins */
}