* { margin: 0; padding: 0; }
	html{
		width:100%;
		height:100%;
		font-family: helvetica, sans-serif;
		font-size:16px;
		aspect-ratio: 16 / 9;
	}
	body {
		background-color: black;
		width:100%;
		height:100%;
		aspect-ratio: 16 / 9;
	}
	body {
	  -ms-overflow-style: none; 
	  scrollbar-width: none; 
	  overflow-y: scroll; 
	}

	body::-webkit-scrollbar {
	  display: none; 
	}
	.sectionVideo {
		width: 100%;
		height:100%;
		aspect-ratio: 16 / 9;
	}
	p {
	  color: #777;
	}
	.sectionVideo{
		position:relative;
		background-color: black;
	}
	.conteneurAmiganseau {
		margin: 0;
		position: absolute;
		top: 50%;
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
		width: 100%;
	}
	/*AMIGANSEAU TV*/
		hr{
			margin-top: 1em;
			color: aliceblue;
		}

	.titre {
		z-index: 170;
		left: 1.6vw;
		text-align: left;
		color: #ffa800;
		background-color: transparent;
		font-weight: bold;
		font-size: 1.5vw;
		text-align: center;
		padding-top: .5vw;
	}
	.donneesLecteur {
		color: black;
		font-size: 1vw;
		font-style: italic;
		padding-top: .5vw;
		font-weight: initial;
	}
	/*PLATINE*/
	.platine {
		position: fixed;
		top: 0em;
		left: 50%;
		transform: translateX(-50%);
		z-index: 110;
		opacity: 0.9;
		display: flex;
		flex-direction: column;
		align-items: center; /* centre le contenu à l'intérieur */
		width: max-content;
	}
	/* Boîte blanche contenant la platine (centrée dans .platine) */
	.masquer {
		background-color: antiquewhite;
		border-radius: 1vw;
		width: 51em;
		height: auto;         /* s'adapte au contenu */
		padding: 1vw;
		box-sizing: border-box;
		text-align: center;
	}
	.bouton {
		margin-top: 0em
		cursor: pointer;
		background-color: antiquewhite;
		height: auto;
		width: auto;
		text-align: center;
		opacity: 0.8;
		border-radius:0em 0em 1em 1em;
	}
	.icone{
		width: 3vw;
		height: 3vw;
	}
	.pleinEcran{
		position: absolute;
		top: 1em;
		left: 38em;
		opacity: 1;
		height: 10vw;
		cursor: pointer;
	}
	.pleinEcran img{
		width:3vw;
		height:3vw;
	}
	.fermer{
		position: absolute;
		top: 1em;
		left: 44em;
		opacity: 1;
		height: 10vw;
		cursor: pointer;
	}
	.fermer img{
		width:3vw;
		height:3vw;
	}
	.fa{
		color:#ffa800;
	}
	.fa-2x {
		font-size: 3vw;
	}
	.chaines {
		opacity: 1;
		z-index: 140;
		display: flex;
	}
	.chaines span {
		font-size: 1.5vw;
		font-weight: bolder;
		color: #ffa405;
		padding-left: .5vw;
		padding-right: .5vw;
		padding-top: .4em
	}
	.volume{
		position: absolute;
		top: 0vw;
		left: 12em;
		opacity: 1;
		z-index: 140;
		display: flex;
	}
	/*SLIDER VOLUME*/
	input[type=range] {
		cursor: pointer;
		width: 10vw;
		background-color: transparent;
		-webkit-appearance: none;
	}
	input[type=range]:focus {
		outline: none;
	}
	input[type=range]::-webkit-slider-runnable-track {
		background: #ffa800;
		border: 0.2px solid #010101;
		border-radius: 1.3px;
		width: 100%;
		height: 2.1px;
		cursor: pointer;
	}
	input[type=range]::-webkit-slider-thumb {
		margin-top: -17.15px;
		width: 2vw;
		height: 2vw;
		background: #ffa800;
		border: 1px solid #000000;
		border-radius: 2vw;
		cursor: pointer;
		-webkit-appearance: none;
	}
	input[type=range]:focus::-webkit-slider-runnable-track {
		background: #ffb11a;
	}
	input[type=range]::-moz-range-track {
		background: #ffa800;
		border: 0.2px solid #010101;
		border-radius: 1.3px;
		width: 100%;
		height: 2.1px;
		cursor: pointer;
	}
	input[type=range]::-moz-range-thumb {
		width: 2vw;
		height: 2vw;
		background: #ffa800;
		border: 1px solid #000000;
		border-radius: 50px;
		cursor: pointer;
	}
	input[type=range]::-ms-track {
		background: transparent;
		border-color: transparent;
		border-width: 19.05px 0;
		color: transparent;
		width: 100%;
		height: 2.1px;
		cursor: pointer;
	}
	input[type=range]::-ms-fill-lower {
		background: #e69700;
		border: 0.2px solid #010101;
		border-radius: 2.6px;
	}
	input[type=range]::-ms-fill-upper {
		background: #ffa800;
		border: 0.2px solid #010101;
		border-radius: 2.6px;
	}
	input[type=range]::-ms-thumb {
		width: 2vw;
		height: 2vw;
		background: #ffa800;
		border: 1px solid #000000;
		border-radius: 50px;
		cursor: pointer;
		margin-top: 0px;
		/*pour maintenir le bouton centré*/
	}
	input[type=range]:focus::-ms-fill-lower {
		background: #ffa800;
	}
	input[type=range]:focus::-ms-fill-upper {
		background: #ffb11a;
	}

	.musiqueAmbiante {
		position: absolute;
		top: 2.8vw;
		color: #ffa405;
		font-size: 1.4vw;
		padding-left: 2vw;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}

	.musiqueAmbiante input {
		position: absolute;
		cursor: pointer;
		height: 1.5vw;
		width: 1.5vw;
		left: 0;
		border-color: #ffa405;
	}



	/*VIDEO*/

	.arrierePlanVideo {
		float: none;
		clear: both;
		/* max-width: 90%; */
		position: relative;
		padding-bottom: 46.25%;
		padding-top: 1vw;
		height: 0;
		margin-left: auto;
		margin-right: auto;
		border: solid 1px black;
	}
	.motifSurCouche {
		position: fixed;
		top: 0;
		width: 100%;
		opacity: 0.3;
		bottom: 0;
		background-image: url(https://cdnjs.cloudflare.com/ajax/libs/vegas/2.3.1/overlays/03.png);
		z-index: 2;
	}
	#arrierePlanBuffer {
		position: absolute;
		width: 100%;
		top: 0;
		bottom: 0;
		background: #000;
		z-index: 1;
		/*background-image: url("../img/SignaturePlongeursNaturaliste.png");*/
		background-color: black;
		background-repeat: no-repeat;
		background-position: center;
		background-size: 30%;
	}
	#conteneurIframeYoutube {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			position: absolute;
			height: 100%;
	}
	#iframeYoutube {
		position: absolute;
		pointer-events: none;
		margin: 0 auto;
		height: 100%;
		width: 100%;
	}
	.iconeLecture.paused::after {
		position:absolute;
		z-index:3;
		height:110%;
		content: "AMIGANSEAU TV, mise en route. Patience...";
		white-space: pre-wrap;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		cursor: pointer;
		background-color: black;
		background-repeat: no-repeat;
		background-position: center;
		background-size: 10vh;
		background-image: url(data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iODAwIiB3aWR0aD0iMTIwMCIgdmlld0JveD0iLTM1LjIwMDA1IC00MS4zMzMyNSAzMDUuMDY3MSAyNDcuOTk5NSI+PHBhdGggZD0iTTIyOS43NjMgMjUuODE3Yy0yLjY5OS0xMC4xNjItMTAuNjUtMTguMTY1LTIwLjc0OC0yMC44ODFDMTkwLjcxNiAwIDExNy4zMzMgMCAxMTcuMzMzIDBTNDMuOTUxIDAgMjUuNjUxIDQuOTM2QzE1LjU1MyA3LjY1MiA3LjYgMTUuNjU1IDQuOTAzIDI1LjgxNyAwIDQ0LjIzNiAwIDgyLjY2NyAwIDgyLjY2N3MwIDM4LjQyOSA0LjkwMyA1Ni44NUM3LjYgMTQ5LjY4IDE1LjU1MyAxNTcuNjgxIDI1LjY1IDE2MC40YzE4LjMgNC45MzQgOTEuNjgyIDQuOTM0IDkxLjY4MiA0LjkzNHM3My4zODMgMCA5MS42ODItNC45MzRjMTAuMDk4LTIuNzE4IDE4LjA0OS0xMC43MiAyMC43NDgtMjAuODgyIDQuOTA0LTE4LjQyMSA0LjkwNC01Ni44NSA0LjkwNC01Ni44NXMwLTM4LjQzMS00LjkwNC01Ni44NSIgZmlsbD0icmVkIi8+PHBhdGggZD0iTTkzLjMzMyAxMTcuNTU5bDYxLjMzMy0zNC44OS02MS4zMzMtMzQuODk0eiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==);
	}
	/*ESPECE & QRCODE*/
	/* Conteneur général */
	.identification {
		position: absolute;
		z-index: 2;
		top: -4.2vw;
		right: 3em; /* espace à droite fixe, modifiable selon besoin */
		width: 150px; /* largeur fixe pour le bloc QR, important pour centrer le contenu */
		text-align: center;
		filter: drop-shadow(0.35rem 0.35rem 0.4rem rgba(0, 0, 0, 0.5));
	}
	#qrInfoTop {
	  font-size: 1.5em;
	  color: #6592e6;
	  font-weight: bold;
	  text-align: center;
	  line-height: 1.2em;
	  height: 1.5em;
	  position: relative;
	  overflow: hidden;
	}

	.qr-text {
	  position: absolute;
	  top: 0;
	  left: 0;
	  right: 0;
	  opacity: 0;
	  visibility: hidden;
	  pointer-events: none;
	  transition: opacity 0.6s ease-in-out;
	}

	.qr-text.show {
	  opacity: 1;
	  visibility: visible;
	  pointer-events: auto;
	}

	#qrInfoBottom {
	  font-size: 1.1em;
	  color: #000;
	  font-weight: bold;
	  text-align: center;
	  margin-top: 0.5em;
	}
	/* Conteneur QR code centré */
#conteneurqrCode {
	position: fixed;
	top: .5em;
	right: 1em;
	margin: 1rem;
	width: max-content;
	text-align: center;
	z-index: 1000;
}


	/* Wrapper QR code */
	#qrWrapper {
		display: inline-block;
		background: white;
		border-radius: 10px;
		padding: 1em;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
		text-align: center;
		width: 100%;
		padding-top: .5em;
		padding-bottom: .5em;
	}

	/* QR code */
	#qrcode {
		width: 150px;
		height: 150px;
		margin: 0 auto;
	}


	/* Adaptation sur petits écrans */
	@media (max-width: 600px) {
		.identification {
			top: 1rem;
			right: 0.5rem;
			width: 120px;
		}
		#qrcode {
			width: 30vw;
			height: 30vw;
		}
		#qrWrapper {
			padding: 10px;
		}
		#qrInfoTop,
		#qrInfoBottom {
			font-size: 1.2em;
		}
	}


	#espece {
		text-align: center;
		font-size: 3.5vw;
		color: #4479d9;
		font-weight: bolder;
		opacity: 1;
		display: block;
		padding-top: .5vw;
		background-color: #000;
		margin-bottom:2vw;
	}

	.clignotementTexte {
		animation: clignotement 1s linear infinite;
	}

	@keyframes clignotement {
		50% {
			opacity: 0;
		}
	}

	/* DEFILEMENT TEXTE BAS */
	.conteneur-defilementTexte {
		position: absolute;
		left:1vw;
		font-size: 3vw;
		font-weight: bolder;
		color: #ffa405;
	}
	.texte-affiche {  
	  opacity: 1;
	  transition: 3s all ease;
	}

	.texte-masque {
	  opacity: 0;
	  transition: 3s all ease;
	}
	#log{
		color:white;
	}
	/*GESTION MOBILE*/
	 @media (any-pointer: coarse) and (orientation:portrait){

	}
	 @media (any-pointer: coarse) and (orientation:landscape){
		.pleinEcran,
		.volume{
		opacity: 0;
		}
	}
	/*télé hd 720 verticale*/
	@media only screen and (max-width: 720px) and (orientation:portrait){

	}
	/*télé hd 720 horizontale*/
	 @media only screen and (max-width: 1280px) and (orientation:landscape){

	}
	/* Extra small devices (phones, 360 and down) */
	@media only screen and (max-width: 768px) and (orientation:portrait){

	}

	/* ipad pro 12.9 inch */
	 @media only screen and (max-width: 1366px) and (orientation:portrait){

	}
	 @media only screen and (max-width: 1366px) and (orientation:landscape){

	}