/* ======================================= Th.A horloge pour mode ON FullScreen ======================================= */
html.player-fullscreen #gorgyClockFS
{
	display: flex;
}

#gorgyClockFS
{
	display: none;
	position: fixed;
	top: clamp(1px, 2.3vw, 2px);
	right: clamp(1px, 2.3vw, 2px);
	width: clamp(20px, 10vw, 240px);
	aspect-ratio: 1 / 1;
	align-items: center;
	justify-content: center;
	z-index: 3000;
	pointer-events: none;
}

#gorgyTimeFS
{
	position: absolute;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'LCD', monospace;
	font-size: clamp(8px, 1.8vw, 50px);
	color: #ffffff;
	letter-spacing: 0.04em;
	text-shadow:
		0 0 5px rgba(255,255,255,0.75),
		0 0 10px rgba(255,0,0,0.55),
		0 0 18px rgba(255,0,0,0.35);
	user-select: none;
}

#gorgyColonFS
{
	display: inline-block;
	width: 0.5em;
	text-align: center;
}

#gorgyColonFS.is-off
{
	opacity: 0.08;
	text-shadow: none;
}

#gorgyMarkersRingFS,
#gorgySecondsRingFS
{
	position: absolute;
	inset: 0;
	border-radius: 50%;
}

/* repères fixes toutes les 5s */
.gorgy-marker
{
	position: absolute;
	left: 50%;
	top: 50%;
	width: clamp(2px, 0.45vw, 8px);
	height: clamp(2px, 0.45vw, 8px);
	border-radius: 50%;
	background: rgba(255,255,255,1);
	box-shadow:
		0 0 2px rgba(255,255,255,1),
		0 0 5px rgba(255,255,255,0.85),
		0 0 9px rgba(255,0,0,0.28),
		0 0 14px rgba(255,0,0,0.14);
	transform: translate(-50%, -50%);
	z-index: 1;
}

/* LED secondes mobiles */
.gorgy-led
{
	position: absolute;
	left: 50%;
	top: 50%;
	width: clamp(1px, 0.2vw, 6px);
	height: clamp(1px, 0.2vw, 6px);
	border-radius: 50%;
	background: rgba(255,255,255,0.08);
	opacity: 0.18;
	box-shadow: none;
	transform: translate(-50%, -50%);
	transition:
		background 0.14s linear,
		opacity 0.14s linear,
		box-shadow 0.14s linear,
		scale 0.14s linear;
	z-index: 2;
}

/* LED seconde courante */
.gorgy-led.is-on
{
	background: rgba(255,255,255,1);
	opacity: 1;
	box-shadow:
		0 0 8px rgba(255,255,255,0.95),
		0 0 10px rgba(255,0,0,0.78),
		0 0 18px rgba(255,0,0,0.46);
	scale: 1.7;
}

/* vague rouge cumulative */
.gorgy-led.is-trail-1,
.gorgy-led.is-trail-2,
.gorgy-led.is-trail-3
{
	background: rgba(255,0,0,1);
	opacity: 0.95;
	box-shadow:
		0 0 2px rgba(255,0,0,0.95),
		0 0 6px rgba(255,0,0,0.78),
		0 0 8px rgba(255,0,0,0.46);
	scale: 1.35;
}
/* ======================================= Th.A horloge pour mode ON FullScreen ======================================= */


/* ======================================= Début du player ======================================= */
/* IOS vidéo début de l'Overlay */
.ios-overlay
{
	display: none;
	position: fixed;
	inset: 0;
	justify-content: center;
	align-items: center;
	z-index: 1000;
}
.ios-overlay-bg
{
	position: absolute;
	inset: 0;
	background-color: rgba(0,0,0,0.5);
	z-index: 0;
}
.ios-play-button
{
	position: relative;
	z-index: 1;
	cursor: pointer;
	width: auto;
	height: 55%;
}
.ios-overlay.show
{
	display: flex;
}
/* IOS vidéo fin de l'Overlay */

/* ==================================================================================== */
/* =                      Styles ILOS (Th.A) 360° photos & vidéos                     = */
/* ==================================================================================== */
@font-face
{
	font-family: 'tha';
	src:	url("/fonts/scrpt12n.eot");
	src:	url("/fonts/scrpt12n.eot?#iefix") format('embedded-opentype'),
		url("/fonts/scrpt12n.woff") format("woff"),
		url("/fonts/scrpt12n.ttf") format('truetype'),
		url("/fonts/scrpt12n.svg") format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face
{
	font-family: 'LCD';
	src:	url("/fonts/scoreboard-digits.woff") format("woff"),
		url("/fonts/scoreboard-digits.ttf") format("truetype"),
		url("/fonts/scoreboard-digits.otf") format("opentype");
	font-weight: normal;
	font-style: normal;
}

@font-face
{
	font-family: 'Futura';
	src:	url("/fonts/futura-bt-book.otf") format("opentype");
	font-weight: normal;
	font-style: normal;
}

mark
{
	background-color: white;
	color: red;
}

a:visited
{
	text-decoration: none;
	color: #F5F6CE;
	background-color: #700000;
}

a:hover, a:focus, a:active
{
	text-decoration: none;
	color: white;
}

.searchItem img 
{
	display: block;
	width: 90%;				/* centre les miniatures */
	border-radius: 20px; 
}

.searchItem img:hover
{
	width: 94%;
	border: 4px solid red;
	border-radius: 20px;
}

.searchItem span				/* Titre sous la miniature */
{
	margin-bottom: 20px;
	line-height: 1.3;
	text-align: center;
	white-space: normal;			/* autorise le retour à la ligne */
	word-break: break-word;
}

.searchItem .miniPreview
{
	display: block;
	width: 90%;
	border-radius: 20px;
	background: #111;
}

.searchItem .miniPreview:hover
{
	width: 94%;
	border: 4px solid red;
	border-radius: 20px;
}

video
{
	user-select: none;
	-webkit-user-select: none;
}

/* ==================================================================================== */
/* Transition image opacity 								*/
/* ==================================================================================== */
#mainImage
{
	transition: opacity 0.5s ease-in-out;
	opacity: 1; /* état initial */
}

/* Tableau durée en secondes */
button
{
	background:#8b0000;
	color: white;
	border: 4px solid rgba(0,0,0,0.08);
	padding: 10px;
	font-size: 0.9rem;
	border-radius: 4px;
	cursor: pointer;
}

button:hover
{
	background: rgba(0,0,0,0.1);
}

/* Voir plus bas Duration modal (grid 1..60) */
#vr360
{
	position: absolute;
	bottom: 60px;
	left: 57.0%;
	width: 8%;
	height: auto;
	opacity: 0.85;
	cursor:pointer;
}

/* pur btcolor, sélecteur de couleur invisible */
#colorPicker
{
	position: absolute;
	bottom: 10.0%;
	left: 74.0%;
	width: 5.5%;
	height: 2%;
	opacity: 0.01;
	border: none;
	padding: 0;
	margin: 0;
	cursor: pointer;
	z-index: 15;
}

/* ==================================================================================== */
/* Zone miniatures affichage + cases à cocher miniatures				*/
/* ==================================================================================== */
#searchModal
{
	position: fixed;			/* Conteneur des miniatures (vidéos & images) */
	display: none;
	top: calc(14% + 70px);
	left: 5%;
	width: 90%;
	bottom: 160px;
	background: rgba(0,0,0,0.6);
	flex-direction: column;
	align-items: center;
	overflow-y: auto;
	cursor: pointer;
	z-index: 100;
}

#searchModal ul					/* Conteneur des miniatures (STL) */
{
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;		/* centre toutes les miniatures */
	gap: 4px;				/* espace entre miniatures */
	cursor: pointer;
}

#searchModal li					/* Conteneur des miniatures (STL texte) */
{
	text-align: center;			/* centre le canvas et le texte à l’intérieur */
	font-size: clamp(14px, 2.5vw, 24px);
	color: #fff;
	cursor: pointer;
}

#searchModal canvas				/* Conteneur des miniatures (STL) */
{
	width: 170px;				/* largeur miniature */
	height: auto;				/* hauteur miniature */
	max-width: 100%;
	display: block;
	margin: 0 auto 6px auto;		/* centre le canvas dans le li */
	border: 3px solid rgba(255,255,255,0.9);
	border-radius: 20px;
}

#searchModal canvas:hover			/* Miniatures hover */
{
	width: 180px;				/* largeur miniature */
	height: auto;
	border: 4px solid red;
	border-radius: 20px;
}

/* ==================================================================================== */
/*    Recherche – miniatures centrées Style pour 360 photos & vidéos loupe searchButton */
/* ==================================================================================== */
.searchItemsContainer
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;		/* centre les blocs */
}

.searchItem
{
	display: flex;
	position: relative;
	flex-direction: column;
	align-items: center;			/* centre la miniature */
	text-align: center;
	max-width: 240px;			/* permet au titre de dépasser la largeur vidéo */
	flex: 0 0 auto;
}

.searchItem .miniPreviewWrap
{
	width: 230px;				/* largeur miniature */
	height: auto;				/* hauteur miniature */
	max-width: 100%;
	display: block;
	margin: 0 auto 6px auto;		/* centre le canvas dans le li */
	border: 3px solid rgba(255,255,255,0.9);
	border-radius: 20px;
	overflow: hidden;
}

.searchItem:hover .miniPreviewWrap
{
	border: 4px solid red;
	border-radius: 20px;
}

.searchItem .miniPreview,
.searchItem .miniPreviewVideo
{
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

.mini-index-badge
{
	position: absolute;
	top: 10px;
	left: 14px;
	background: rgba(0, 0, 0, 0.5);
	color: white;
	font-size: 22px;
	font-weight: bold;
	padding: 3px 6px;
	border-radius: 4px;
	z-index: 5;
	pointer-events: none; 			/* pour ne pas bloquer le clic miniature */
}

/* ==================================== */
/* Zone miniatures cases à cocher	*/
/* ==================================== */
.searchItem .miniCheck
{
	position: absolute;
	top: 55px;
	left: 20px;
	transform: scale(2.5);
	cursor: pointer;
	z-index: 6;				/* au-dessus de la miniature */
}

/* ==================================================================================== */
/* Zone recherche texte input + cases à cocher 						*/
/* ==================================================================================== */

#searchInput					/* Zone de recherche texte (input) */
{
	position: fixed;
	top: calc(12% - 22px);			/* Collé sous Conteneur des miniatures -22px */
	max-width: 900px;			/* limite sur grand écran */
	min-width: 300px;			/* limite sur petit écran */
	padding: 5px 5px;
	border: 5px solid #F00;
	font-size: clamp(8px, 2.5vw, 18px);	/* responsive avec min et max */
	text-align: center;
	border-radius: 10px;			/* coins arrondis */
	z-index: 500;				/* Affichage au 1er plan */
	
}

/* Checkbox */
#filterContainer				/* Barre de cases à cocher */
{
	position: fixed;
	display: none;				/* cacher au départ */
	top: calc(12% + 20px); 			/* Collé sous l’input texte filter */
	left: 50%;
	transform: translateX(-50%);
	width: 95%;
	min-width: 200px;
	flex-wrap: wrap;
	gap: 4px;
	background: rgba(150, 50, 50, 1);
	padding: 5px 5px;
	border-radius: 8px;
	font-size: clamp(14px, 2.5vw, 24px);
	justify-content: center; 		/* centre toutes les catégories */
	cursor: pointer;
	z-index: 500;
}

#filterContainer label				/* Case à cocher label texte */
{
	color: white;
	white-space: wrap;
	padding: 4px;
	gap: 4px;
	margin-Right: 3px; 			/* pas d’espace inutile */
	cursor: pointer;
}
/* ============================== */
/*    Recherche & miniatures FIN  */
/* ============================== */

/* ============================================== */
/* Playlist cylindrique ULTRA PREMIUM V2 corrigée */
/* ============================================== */
.playlist-cylinder-wrap
{
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	color: white;
	font-family: 'LCD', monospace;
	display: flex;
	align-items: center;
	justify-content: center;
	/* réglages fins */
	--pl-depth: 3000px;			/* diamètre/courbure plus grand */
	--pl-center-shift: 0.15cqh;		/* redescend un peu la ligne centrale */
	--pl-row-gap: 0.05cqh;
	--pl-side-inset: 0.5cqw;		/* plus d’air à gauche/droite */
}

/* Ombres haut / bas */
.playlist-cylinder-wrap::before,
.playlist-cylinder-wrap::after
{
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	pointer-events: none;
	z-index: 4;
}

.playlist-cylinder-wrap::before
{
	top: 0;
	height: 18%;
	background:
		linear-gradient(to bottom,
			rgba(0,0,0,0.42) 0%,
			rgba(0,0,0,0.14) 45%,
			rgba(0,0,0,0.00) 100%);
}

.playlist-cylinder-wrap::after
{
	bottom: 0;
	height: 18%;
	background:
		linear-gradient(to top,
			rgba(0,0,0,0.42) 0%,
			rgba(0,0,0,0.14) 45%,
			rgba(0,0,0,0.00) 100%);
}

.playlist-cylinder
{
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	transform: translateY(calc(-50% + var(--pl-center-shift)));
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
	box-sizing: border-box;
	transform-style: preserve-3d;
	will-change: transform, filter, opacity;
	gap: var(--pl-row-gap);
	padding: 0 var(--pl-side-inset);
}

/* Animation premium */
.playlist-cylinder.is-moving-up
{
	animation: playlistCylinderMoveUpPremium 0.42s cubic-bezier(.18,.82,.22,1);
}

.playlist-cylinder.is-moving-down
{
	animation: playlistCylinderMoveDownPremium 0.42s cubic-bezier(.18,.82,.22,1);
}

@keyframes playlistCylinderMoveUpPremium
{
	0%
	{
		transform: translateY(calc(-50% + var(--pl-center-shift) + 14px)) scaleY(0.99);
		filter: brightness(0.96);
	}
	100%
	{
		transform: translateY(calc(-50% + var(--pl-center-shift))) scaleY(1);
		filter: brightness(1);
	}
}

@keyframes playlistCylinderMoveDownPremium
{
	0%
	{
		transform: translateY(calc(-50% + var(--pl-center-shift) - 14px)) scaleY(0.99);
		filter: brightness(0.96);
	}
	100%
	{
		transform: translateY(calc(-50% + var(--pl-center-shift))) scaleY(1);
		filter: brightness(1);
	}
}

.playlist-cylinder-row
{
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	white-space: nowrap;
	overflow: hidden;
	padding-left: 1.1cqw;			/* marge gauche */
	padding-right: 1.1cqw;			/* marge droite */
	margin: 0;
	line-height: 1.00;
	text-align: center;
	transform-origin: center center;
	transition:
		opacity .42s ease,
		transform .42s cubic-bezier(.22,.78,.22,1),
		filter .42s ease,
		text-shadow .42s ease;
}

.playlist-cylinder-row > span
{
	display: inline-block;
	min-width: 0;
	max-width: 100%;
	will-change: transform;
	padding-left: 0.2em;			/* évite que le début soit visuellement coupé */
	padding-right: 0.2em;
}

/* ligne -2 / +2 */
.playlist-cylinder-row.is-buffer-top,
.playlist-cylinder-row.is-buffer-bottom
{
	flex: 0 0 16%;
	opacity: 0.72;
	transform:
		perspective(var(--pl-depth))
		rotateX(52deg)
		scaleY(0.84)
		scaleX(0.98);
	filter: blur(0.22px) brightness(0.92);
	font-size: clamp(10px, 1.6cqw, 18px);
	letter-spacing: 0;
}

/* rapproche la ligne haute */
.playlist-cylinder-row.is-buffer-top
{
	margin-bottom: -0.35cqh;
}

.playlist-cylinder-row.is-buffer-bottom
{
	margin-top: -0.20cqh;
}

/* ligne -1 / +1 */
.playlist-cylinder-row.is-prev,
.playlist-cylinder-row.is-next
{
	flex: 0 0 23%;
	opacity: 0.96;
	transform:
		perspective(var(--pl-depth))
		rotateX(30deg)
		scaleY(0.94)
		scaleX(1);
	filter: blur(0.02px) brightness(1.04);
	font-size: clamp(14px, 2.25cqw, 25px);
	letter-spacing: 0;
}

.playlist-cylinder-row.is-prev
{
	margin-bottom: -0.08cqh;
}

.playlist-cylinder-row.is-next
{
	margin-top: -0.08cqh;
}

/* ligne centrale */
.playlist-cylinder-row.is-current
{
	position: relative;
	flex: 0 0 26%;
	opacity: 1;
	transform:
		perspective(var(--pl-depth))
		rotateX(0deg)
		scaleY(1.08)
		scaleX(1.01);
	filter: none;
	color: #ffffff;
	font-size: clamp(16px, 2.9cqw, 30px);
	z-index: 3;
}

.playlist-cylinder-row.is-current::before
{
	content: "";
	position: absolute;
	inset: 10% 0;
	border-radius: 6px;
	background:
		linear-gradient(to bottom,
			rgba(255,255,255,0.07) 0%,
			rgba(255,255,255,0.02) 28%,
			rgba(255,255,255,0.00) 55%,
			rgba(0,0,0,0.08) 100%);
	pointer-events: none;
	z-index: -1;
}

.playlist-cylinder-row.is-current > span
{
	text-shadow:
		0 0 4px rgba(255,255,255,0.42),
		0 0 10px rgba(255,40,40,0.22),
		0 0 16px rgba(255,0,0,0.10);
}

/* clignotement centre sélection */
.playlist-cylinder-blink
{
	animation: playlistCylinderBlinkSmooth var(--playlist-blink-duration) ease-in-out infinite;
}

@keyframes playlistCylinderBlinkPremium
{
	0%   { opacity: 1; }
	50%  { opacity: 0.42; }
	100% { opacity: 1; }
}

/* marquee */
.playlist-marquee
{
	display: inline-block;
	min-width: max-content;
	max-width: none;
	transform: translateX(0);
	will-change: transform;
	padding-left: 0.35em;	  /* évite texte coupé au départ */
	padding-right: 0.6em;
}

.playlist-marquee.is-overflowing
{
	animation-name: playlistMarqueeLuxuryPremium;
	animation-timing-function: cubic-bezier(.35,0,.25,1);
	animation-iteration-count: infinite;
	animation-duration: var(--playlist-marquee-duration, 11s);
}

@keyframes playlistMarqueeLuxuryPremium
{
	0%
	{
		transform: translateX(0);
	}
	12%
	{
		transform: translateX(0);
	}
	48%
	{
		transform: translateX(calc(-1 * var(--playlist-marquee-shift, 0px)));
	}
	64%
	{
		transform: translateX(calc(-1 * var(--playlist-marquee-shift, 0px)));
	}
	100%
	{
		transform: translateX(0);
	}
}

@keyframes playlistCylinderBlinkSmooth
{
	0%
	{
		opacity: 1;
		filter: brightness(1);
	}
	50%
	{
		opacity: 0.35;
		filter: brightness(1.25);
	}
	100%
	{
		opacity: 1;
		filter: brightness(1);
	}
}

/* ================================== */
/* clignotement bouton Play sélection */
/* ================================== */
.playlist-select-blink
{
	animation: playlistSelectBlinkSmooth var(--playlist-blink-duration) ease-in-out infinite;
}

@keyframes playlistSelectBlink
{
	0%   { opacity: 1; }
	50%  { opacity: 0.32; }
	100% { opacity: 1; }
}

/* ========================================= */
/* Clignotement compteur playlist sélection  */
/* ========================================= */
#videoCounter.playlist-counter-blink
{
	animation: playlistCounterTextBlinkSmooth var(--playlist-blink-duration) ease-in-out infinite;
}

@keyframes playlistCounterTextBlink
{
	0%
	{
		color: #ffffff;
		text-shadow:
			0 0 5px rgba(255,255,255,0.75),
			0 0 10px rgba(255,0,0,0.55),
			0 0 18px rgba(255,0,0,0.35);
	}
	50%
	{
		color: rgba(255,255,255,0.22);
		text-shadow:
			0 0 2px rgba(255,255,255,0.15),
			0 0 4px rgba(255,0,0,0.10);
	}
	100%
	{
		color: #ffffff;
		text-shadow:
			0 0 5px rgba(255,255,255,0.75),
			0 0 10px rgba(255,0,0,0.55),
			0 0 18px rgba(255,0,0,0.35);
	}
}

@keyframes playlistCounterTextBlinkSmooth
{
	0%
	{
		color: #ffffff;
		text-shadow:
			0 0 5px rgba(255,255,255,0.75),
			0 0 10px rgba(255,0,0,0.55),
			0 0 18px rgba(255,0,0,0.35);
		filter: brightness(1);
	}
	50%
	{
		color: rgba(255,255,255,0.38);
		text-shadow:
			0 0 2px rgba(255,255,255,0.18),
			0 0 5px rgba(255,0,0,0.18);
		filter: brightness(1.12);
	}
	100%
	{
		color: #ffffff;
		text-shadow:
			0 0 5px rgba(255,255,255,0.75),
			0 0 10px rgba(255,0,0,0.55),
			0 0 18px rgba(255,0,0,0.35);
		filter: brightness(1);
	}
}

@keyframes playlistSelectBlinkSmooth
{
	0%
	{
		opacity: 1;
		filter:
			brightness(1)
			drop-shadow(0 0 2px rgba(255,255,255,0.30))
			drop-shadow(0 0 6px rgba(255,0,0,0.20));
	}
	50%
	{
		opacity: 0.45;
		filter:
			brightness(1.18)
			drop-shadow(0 0 4px rgba(255,255,255,0.42))
			drop-shadow(0 0 10px rgba(255,0,0,0.34));
	}
	100%
	{
		opacity: 1;
		filter:
			brightness(1)
			drop-shadow(0 0 2px rgba(255,255,255,0.30))
			drop-shadow(0 0 6px rgba(255,0,0,0.20));
	}
}
/* ======================================== Fin du player ======================================== */

/* ================================================== */
/* --- QR Code : position par défaut = bas gauche --- */
/* ================================================== */
#QRCode
{
	position: fixed;
	top: clamp(50px, 11vw, 300px);
	left: 7%;
	width: 8.0%;
	min-width: clamp(30px, 10vw, 800px);
	height: auto;
	background: rgba(50,10,10,0.7);
	/* préparation animation FLIP */
	will-change: transform;
	user-select: none;
	z-index: 100;
}

/* --- QR Code : état "player visible" = haut gauche --- */
#QRCode.qr-top-left
{
	bottom: auto;
	top: 2%;
	left: 2%;
	right: auto;
	background: rgba(50,10,10,0.7);
}

.TexteInfos
{
	position: absolute;
	text-decoration: none;
	text-align: center;
	right:2%;
	left:2%;
	bottom: 7%;
	color: white;
	border-radius: 20%;
	background-color: #050505;
	background-color: rgba(5, 5, 5, 0.7);
}

.photos
{
	position: absolute;
	border: solid 0.5vh white;
	/* début de centrage verticalement dans la fenêtre */
	margin-top: 50vh; /* poussé de la moitié de hauteur de viewport */
	top: -1.0%;
	/* fin de centrage verticalement dans la fenêtre */
			
	/* début de centrage horizontal dans la fenêtre */
	max-height: 85%;
	max-width: 85%;
	left: 50%; /* à 50%/50% du parent référent */
	transform: translate(-50%, -50%);	/* décalage de 50% de sa propre taille */
	/* fin du centrage horizontal dans la fenêtre */
}

/* --- CONTENEUR VIDEO 360° --- */
#viewer
{
	position: absolute;
	top: 0;
	bottom: 6.5%;
	left: 0;
	right: 0;
	border: 0.5vh solid rgba(255,50,50,0.5);
	user-select: none;
	overflow: hidden;
}
	/* Conteneur vidéo centré */
#viewerVideo
{
	position: fixed;			/* reste au centre de l’écran */
	inset: 0;				/* top/right/bottom/left = 0 */
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 0;				/* dessous les contrôles */
}

#videoFrame
{
	position: relative;
	border: 0.3vh solid white;		/* bordure blanche */
	background: white;			/* fond blanc autour du player */
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	user-select: none;
	overflow: hidden;
}

#videoFrame video
{
	width: 100%;
	height: 100%;
	object-fit: contain;			/* garder les proportions */
	display: block;
}

#imagePlayer
{
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    display: none;
}

/* Couche transparente au-dessus de la vidéo */
#tapLayer
{
	position: absolute;
	inset: 0;
	background: transparent;
	touch-action: manipulation; 		/* important iOS/Android (évite zoom/délai) */
	pointer-events: auto; 			/* actif par défaut pour vidéos normales */
	z-index: 55;				/* au-dessus de la vidéo */
}

#videoPlayer,
#viewer360
{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

#videoPlayer
{
	object-fit: contain;
	z-index: 51;
}

/* ============================== */
/* Priorité interactions mode 360 */
/* ============================== */
#viewer360
{
	display: none;
	background: #000;
	pointer-events: none; /* désactivé par défaut */
	touch-action: none;   /* IMPORTANT : bloque les gestes natifs du navigateur */
	z-index: 52;
}

#viewer360 canvas
{
	display: block;
	width: 100% !important;
	height: 100% !important;
	touch-action: none;   /* IMPORTANT aussi sur le canvas Three.js */
}

/* En mode 360 : le viewer prend les interactions, tapLayer les relâche */
html.viewer360-interactive #viewer360
{
	pointer-events: auto;
	z-index: 56; /* au-dessus du tapLayer */
}

html.viewer360-interactive #tapLayer
{
	pointer-events: none;
}

/* Overlays visuels -10 / +10 */
.seekOverlay
{
	position: absolute;
	top: 0;
	bottom: 0;
	width: 40%;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;		 	/* ne bloque pas les taps */
	opacity: 0;				/* caché par défaut */
	z-index: 60;				/* au-dessus du tapLayer */
}

#seekOverlayLeft{ left: 0; }
#seekOverlayRight{ right: 0; }

.seekBubble
{
	font-family: 'LCD', monospace;
	font-size: clamp(26px, 4vw, 64px);
	padding: 10px 18px;
	border-radius: 999px;
	color: #fff;
	background: rgba(0,0,0,0.35);
	border: 1px solid rgba(255,255,255,0.25);
	backdrop-filter: blur(3px);
	transform: scale(0.9);
}

/* Animation flash */
.seekOverlay.is-anim
{
	animation: seekFlash 760ms ease-out;
}

.seekOverlay.is-anim .seekBubble
{
	animation: seekPop 760ms ease-out;
}

@keyframes seekFlash
{
	0%	{ opacity: 0; }
	30%	{ opacity: 1; }
	100%	{ opacity: 0; }
}

@keyframes seekPop
{
	0%	{ transform: scale(0.85); }
	40%	{ transform: scale(1.05); }
	100%	{ transform: scale(0.95); }
}

/* Overlay central Play/Pause */
.ppOverlay
{
	position: absolute;
	inset: 0;
	z-index: 65;				/* au-dessus seek overlays si besoin */
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	opacity: 0;				/* caché par défaut */
}

/* bulle centrale */
.ppBubble
{
	font-family: 'Futura', monospace;	/* ou sans-serif */
	font-size: clamp(36px, 6vw, 110px);
	width: clamp(60px, 11vw, 190px);
	height: clamp(60px, 11vw, 190px);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	color: #fff;
	background: rgba(0,0,0,0.35);
	border: 1px solid rgba(255,255,255,0.25);
	backdrop-filter: blur(4px);
	transform: scale(0.95);
	padding-left: 1vw; 
}

/* flash au tap */
.ppOverlay.is-anim
{
	animation: ppFlash 760ms ease-out;
}
.ppOverlay.is-anim .ppBubble
{
	animation: ppPop 760ms ease-out;
}

@keyframes ppFlash
{
	0%	{ opacity: 0; }
	35%	{ opacity: 1; }
	100%	{ opacity: 0; }
}
@keyframes ppPop
{
	0%	{ transform: scale(0.88); }
	45%	{ transform: scale(1.06); }
	100% 	{ transform: scale(0.96); }
}

/* Quand la vidéo est en pause : overlay reste visible */
.ppOverlay.is-paused
{
	opacity: 1;
}

/* ================================= */
/* Scrub au centre (drag horizontal) */
/* ================================= */
#scrubUI
{
	position: absolute;
	left: 50%;
	top: 20%;
	transform: translate(-50%, -50%);
	width: min(900px, 92%);
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.15s ease;
	z-index: 2000;				/* au-dessus vidéo, sous ppOverlay */
}

#scrubUI.is-active
{
	opacity: 1;
}

/* Tooltip temps (au-dessus) */
#scrubTimeMid
{
	margin: 0 auto 10px auto;
	width: max-content;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(50,50,50,0.65);
	color: #fff;
	font-family: 'LCD', monospace;
	font-size: clamp(14px, 2.2vw, 26px);
	text-align: center;
}

/* Track */
#scrubTrackMid
{
	position: relative;
	height: 6px;
	border-radius: 999px;
	background: rgba(250,50,50,0.18);
	overflow: hidden;
}

#scrubFillMid
{
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 0%;
	border-radius: 999px;
	background: rgba(250,50,50,0.55);
}

/* ===================================== */
/*        Animation transition CSS       */
/*    title2 + link (source des vidéos)  */
/* ===================================== */
#videoLinkOverlay
{
	position: fixed;
	min-width: 20%;
	right: 0.5%;
	color: #ffffff;
	font-family: Futura;
	font-size: clamp(10.5px, 3.0vw, 28px);	/* responsive avec min et max */
	background: rgba(50,20,20,0.6);
	padding: 5px 5px;
	border-radius: 8px;
	text-align: center;
	align-items: center;
	justify-content: center;
	gap: 12px;				/* espace entre texte et QR */
	user-select: none;
	transition: bottom 0.3s ease;
}

#videoLinkOverlay a
{
	color: #ffffff;
	text-decoration: none;
}

#videoLinkOverlay a:hover
{
	text-decoration: underline;
}

#videoLinkOverlay .vlo-text
{
	display: inline-block;
}

#videoLinkQR
{
	display: inline-block;
	width: auto;				 /* taille du QR */
	height: auto;
	user-select: none;
	min-width: clamp(40px, 10vw, 150px);
}

#videoLinkQR canvas,
#videoLinkQR img
{
	width: 86px !important;
	height: auto !important;
	min-width: clamp(70px, 10vw, 120px);
	display: block;
}

/* ==========================================================================================================================
   ILOS-informatique — "Th.A SCHÉMA” + RATIO FIXE + SIZES LIÉS AU PLAYER

   Objectifs :
   - Player = 30% largeur fenêtre (max) + ratio façade conservé + taille maxi en pixels = 900px 
   - Tailles boutons / polices = basées sur la TAILLE DU PLAYER (pas sur 100vw)
   - Placement des zones selon Th.A schéma (topBar / timeCounter / PlayListe / progress / boutons)
   ========================================================================================================================== */

/* ==========================================+====== Début façade du player ====+============================================ */
/* 1) Le player devient la “façade” : ratio fixe + tailles en unités de container */
#playerContainer
{
	position: fixed			!important;
	bottom: clamp(20px,6.5vh, 60px)	!important;
	left: 4px			!important;
	max-width: 700px		!important;
	width: 60vw			!important;	/* 50% demandé */
	aspect-ratio: 2900 / 880	!important;	/* ratio de ton schéma (image 1200x400) */
	height: auto			!important;
	padding: 0			!important;	/* on place tout en absolu */
	margin: 0			!important;
	box-sizing: border-box		!important;
	background: url("/ILOS-Player/icons/ILOS-player.png") no-repeat center !important;
	background-size: 100% 100%	!important;
	display: block			!important;
	container-type: inline-size	!important;	/* permet cqw = taille du player */
	overflow: visible		!important;
	user-select: none;
	--playlist-blink-duration: 0.65s;
	z-index: 100			!important;
}

#playerContainer.is-pinned
{
    background: url("/ILOS-Player/icons/ILOS-player-FullScreen.png") no-repeat center !important;
    background-size: 100% 100% !important;
}

/* 1a) Si mode fullscreen on déplace le player en bas à 4px */
html.player-fullscreen #playerContainer
{
    bottom: 4px !important;
}

html.player-fullscreen #TitleILOS
{
    top: 4px !important;
}

/* 2) On repasse les blocs à l'emplacement du Th.A schéma */
#topBar,
#middleZone,
#progressContainer,
#controlsBar
{
	position:	absolute	!important;
	left:		auto		!important;
	right:		auto		!important;
	top:		auto		!important;
	bottom:		auto		!important;
	transform:	none		!important;
}

/* ================Bouton punaise & info help-guide player ================ */
#btPunaise
{
	position: absolute		!important;
	left: 0				!important;
	Top: clamp(-44.5px, -2.5vh, -54px) !important;
	height: clamp(34.5px, 2.5vw, 44px) !important;
	width: auto;
	cursor:pointer;
	z-index:100;
}

#btPunaise:hover
{
	content: url("/ILOS-Player/icons/bt-punaise-ON_hover.png");
}

#infoWindow
{
	display:none;
	position: fixed;
	top: 10vw;
	bottom:22%;
	left:1%;
	width:85%;
	max-width:840px;
	max-height:auto;
	overflow-y:auto;
	background:rgba(40,0,0,0.94);
	color: #ffffff;
	padding:22px;
	border-radius: 10px ;
	text-align:left;
	font-size:clamp(15px,2.5vw,18px);
	z-index:1010;
}
/* =============== Fin Bouton punaise & info help-guide player =============== */

/* Bandeau haut */
#topBar
{
	top: 5.0%			!important;
	left: 3.0%			!important;
	width: 94.0%			!important;
	height: auto			!important;
	display: flex			!important;
	align-items: center		!important;
	justify-content: space-between	!important;
	gap: 1.0cqw			!important;	/* lié au player */
	min-width: 0			!important;
}

/* Zone centrale : timeCounter à gauche / playlist à droite */
#middleZone
{
	top: 24.0%			!important;
	left: 3.0%			!important;
	width: 94.0%			!important;
	height: auto			!important;
	display: grid			!important;
	grid-template-columns: 1fr 1fr	!important;
	gap: 1.0cqw			!important;
	align-items: stretch		!important;
	min-width: 0			!important;
}

/* Zone du millieu : Progress bar */
#progressContainer
{
	top: 59.2%			!important;
	left: 3.0%			!important;
	width: 94.0%			!important;
	height: 4.0%			!important;
	border-radius: 8px		!important;
}

/* Zone du bas : barre boutons */
#controlsBar
{
	bottom: 8.0%			!important;
	left: 3.0%			!important;
	width: 94.0%			!important;
	height: auto			!important;
	display: flex			!important;
	align-items: center		!important;
}

/* 3) Polices liées AU PLAYER (plus de vw écran) */
#playerContainer
{
	--tc-current-size:	clamp(28px, 6.8cqw, 60px)	!important;
	--tc-total-size:	clamp(15px, 4.0cqw, 50px)	!important;
}

/* 4) Tailles des boutons liées AU PLAYER (plus de vw) */
#playerContainer
{
	--btn-tc: clamp(22px, 7.7cqw, 78px)	!important;	/* 6 boutons gauche */
	--btn-pl: clamp(22px, 7.7cqw, 78px)	!important;	/* 3 boutons centre */
	--btn-p2: clamp(22px, 7.7cqw, 78px)	!important;	/* 2 boutons droite & à gauche empilés 2 par 2 */
	--btn-p3: clamp(22px, 7.7cqw, 78px)	!important;	/* 2 boutons droite & à gauche empilés 2 par 2 */
	--btn-p4: clamp(22px, 7.7cqw, 78px)	!important;	/* 2 boutons droite empilés 2 par 2 */
}

/* 5) 840px maxi ou 420px mini sur fenêtres étroites (type portait IOS) : */
@media (max-width: 700px)					/* taille maxi sur grand écran */
{
	#playerContainer{ width: min(420px, 98vw) !important; }	/* reste visible sur IOS en portrait */
}
/* ==========================================+======= Fin façade du player ====+============================================= */

/* ====== Début du design commun aux éléments (écrans LED) ====== */
/* Apparence “écran” (style métal : liseré + relief) */
#playerContainer,
#TitleILOSplayer,
#videoCounter,
#timeCounter,
#PlayListe
{
	border-radius: 8px;
	box-shadow:
		inset 0 0 0 1px rgba(255,255,255,0.30),
		inset 0 0 0 2px rgba(0,0,0,0.55),
		inset 0 10px 18px rgba(255,255,255,0.16),
		inset 0 -14px 22px rgba(0,0,0,0.55),
		0 0 0 1px rgba(0,0,0,0.6);
}

/* LED avec scintillement + glow */
#TitleILOSplayer,
#videoCounter,
#timeCounter .currentTime,
#timeCounter .elapsedTime,
#timeCounter .totalTime,
#PlayListe
{
	animation: ledHalo 3.5s ease-in-out infinite;
}

@keyframes ledHalo
{
	0%, 100%
	{
		text-shadow:
			0 0 5px rgba(255,255,255,0.75),
			0 0 10px rgba(255,0,0,0.55),
			0 0 18px rgba(255,0,0,0.35);
		filter: brightness(1.04);
	}
	50%
	{
		text-shadow:
			0 0 8px rgba(255,255,255,0.9),
			0 0 16px rgba(255,0,0,0.75),
			0 0 26px rgba(255,0,0,0.55);
		filter: brightness(1.12);
	}
}
/* ======= fin du design commun aux éléments (écrans LED) ======= */

/* ================ Début Bandeau TopBar ================ */
/* Compteur à droite : largeur fixe => ne sera jamais écrasé */
#videoCounter
{
	flex: 0 0 auto;
	min-width: 0;
	text-align: center;
	padding-top: 0.05cqw		!important;
	padding-right: 1.0cqw		!important;
	padding-bottom: 0.5cqw		!important;
	padding-left: 1.0cqw		!important;
	cursor: pointer;
}

/* Zone titre à gauche : prend toute la place restante */
#TitleILOSplayer
{
	flex: 1 1 auto;
	min-width: 0;				/* IMPORTANT : permet l’ellips/overflow dans un flex */
	text-align: left;
	padding-top: 0.05cqw		!important;
	padding-right: 0.5cqw		!important;
	padding-bottom: 0.5cqw		!important;
	padding-left: 0.5cqw		!important;
	cursor: pointer;
}

/* Apparence “Font écran” (TitleILOSplayer PlayListe CPT-vidéeos) */
#TitleILOSplayer,
#videoCounter,
#timeCounter,
#PlayListe
{
	background: rgba(50,0,0,0.7);
	border-radius: 5px;
	font-family: 'LCD', monospace;
	font-size: clamp(13px, 3.0cqw, 26px)	!important;
	color: #ffffff;
	letter-spacing: 0;
}

/* -------- Marquee (défilement) -------- */
/* Fenêtre de masque */
#topBar #TitleILOSplayer .marquee
{
	display: block;
	overflow: hidden;
	white-space: nowrap;
}

/* Texte qui défile */
#topBar #TitleILOSplayer .marquee__inner
{
	display: inline-block;
	padding-left: 100%;			/* démarrage hors champ */
	animation: ilosMarquee 10s linear infinite;
}

/* Animation */
@keyframes ilosMarquee
{
	0%	{ transform: translateX(0); }
	100%	{ transform: translateX(-100%); }
}

/* Option : si le user préfère moins d’animation */
@media (prefers-reduced-motion: reduce)
{
	#topBar #TitleILOSplayer .marquee__inner
	{
		animation: none		!important;
		padding-left: 0;
	}
}
/* ================= Fin Bandeau TopBar ================= */


/* ================ Début Bandeau MidBar ================ */
/* ==================== Début du timeCounter ==================== */
#timeCounter
{
	aspect-ratio: 1026 / 222	!important;	/* ratio de ton schéma (image 1536x400) */
	height: auto			!important;
	padding: 2px			!important;
	margin: 0			!important;
	box-sizing: border-box		!important;
	font-family: 'LCD', monospace;
	color: #ffffff;
	letter-spacing: 0;
	/* Mise en page : gros à gauche, 2 petits empilés à droite */
	display: grid			!important;
	grid-template-columns: 1fr auto !important;
	align-items: center		!important;
	column-gap: 0.1cqw		!important;
	white-space: nowrap		!important;
	line-height: 1			!important;
	min-width: 0			!important;
	overflow: hidden		!important;
	z-index: 100;
}

#timeCounter .currentTime
{
	font-size: var(--tc-current-size) !important;
	padding-top: 0.1cqw		!important;
	padding-right: 0.1cqw		!important;
	padding-bottom: 0.1cqw		!important;
	padding-left: 0.1cqw		!important;
	align-items: right		!important;
	line-height: 1			!important;
	min-width: 0			!important;
	overflow: hidden		!important;
	text-overflow: clip		!important;
	white-space: nowrap;
}

/* Colonne droite : elapsed au-dessus du total */
#timeCounter .tcRight
{
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.2cqw 0.1cqw		!important;	/* petit écart horizontal inter-compteurs */
	padding-top: 0.1cqw		!important;
	padding-right: 0.1cqw		!important;
	padding-bottom: 0.1cqw		!important;
	padding-left: 0			!important;
	justify-content: center		!important;
	line-height: 1			!important;
	min-width: 0			!important;
	overflow: hidden		!important;
	text-overflow: clip		!important;
	white-space: nowrap;
}

#timeCounter .elapsedTime,
#timeCounter .totalTime
{
	font-size: var(--tc-total-size)	!important;
	justify-content: center		!important;
	line-height: 1			!important;
	min-width: 0			!important;
	overflow: hidden		!important;
	text-overflow: clip		!important;
	white-space: nowrap;
}
/* ====================  Fin du timeCounter  ==================== */

/* Playlist : même logique de police que timeCounter */
#PlayListe
{
	display: flex;
	aspect-ratio: 1026 / 222	!important;	/* ratio du schéma */
	height: auto			!important;
	gap: 0				!important;
	padding-top: 0			!important;
	padding-right: 0.1cqw 		!important;
	padding-bottom: 0		!important;
	padding-left: 0.1cqw		!important;
	box-sizing: border-box		!important;
	min-width: 0			!important;
	overflow: hidden		!important;
	white-space: nowrap		!important;
}
/* ================= Fin Bandeau MidBar ================= */

/* ====================  Barre de progression  ==================== */
#progressContainer
{

	background: rgba(139,0,0,0.3);
	border-radius:5px;
	overflow:hidden;
	cursor:pointer;
	z-index:100;
}

#progressBar
{
	width:0%;
	height:100%;
	background: #FF4141;
	border-radius:10px;
	transition: width 0.4s linear;
	z-index:101;
}

/* ====================  Tooltip LED  ==================== */
#timeTooltip
{
	position: absolute;
	padding: 1px 10px;
	border-radius: 8px;
	font-family: 'LCD', monospace;
	font-size: clamp(12px, 2.0vw, 24px);
	letter-spacing: 0;
	color: #fff;
	white-space: nowrap;
	pointer-events: none;
	z-index: 2000;
	background:
		radial-gradient(circle at 20% 30%, rgba(255,255,255,0.18), rgba(255,255,255,0.0) 45%),
		linear-gradient(to bottom, rgba(255,40,40,0.55), rgba(110,0,0,0.70));
	box-shadow:
		inset 0 0 0 1px rgba(255,255,255,0.10),
		inset 0 -10px 18px rgba(0,0,0,0.55),
		0 10px 20px rgba(0,0,0,0.45);
	text-shadow:
		0 0 6px rgba(255,255,255,0.85),
		0 0 14px rgba(255,0,0,0.65);
	opacity: 0;
	transform: translateY(-3px);
	transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out;
}

#timeTooltip.is-visible
{
	opacity: 1;
	transform: translateY(0);
}

#timeTooltip::before
{
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	background: linear-gradient(135deg,
		rgba(255,255,255,0.22) 0%,
		rgba(255,255,255,0.08) 22%,
		rgba(255,255,255,0.00) 45%,
		rgba(255,255,255,0.00) 100%);
	mix-blend-mode: screen;
	opacity: 0.75;
}
/* ======================================================= */

/* ================= Début barre boutons ================ */
#controlsBar
{
	display: flex;
	align-items: center;
	width: 100%;
}

/* Base commune */
#controlsBar img
{
	object-fit: contain;
	cursor: pointer;
	opacity: 0.70;
	transition: opacity .18s ease;
	display: block;
	flex: 0 0 auto;
}

#controlsBar img:hover
{
	opacity: 1;
}

#controlsBar img.is-active
{
    opacity: 1;
}

/* Groupe 1 : 6 boutons gauche */
.leftControls
{
	display: flex;
	gap: 0.1cqw			!important;	/* pas d'écart horizontal-vertical */
	padding: 0.1cqw 0.1cqw		!important;	/* pas d'écart horizontal-vertical */
	align-items: center;
	flex-wrap: nowrap;
	margin-right: 0.5cqw; /* pousse les autres groupes à droite */
}

.leftControls img
{
	width: var(--btn-tc);
	height: var(--btn-tc);
}

#prevVideo:hover
{
	content: url("/ILOS-Player/icons/bt-Gx1_hover.png");
	opacity: 1;
}

#rewind:hover
{
	content: url("/ILOS-Player/icons/bt-Gx10_hover.png");
	opacity: 1;
}

/* Le hover de Play/Pause est géré par le JS */
#forward:hover
{
	content: url("/ILOS-Player/icons/bt-Dx10_hover.png");
	opacity: 1;
}

#nextVideo:hover
{
	content: url("/ILOS-Player/icons/bt-Dx1_hover.png");
	opacity: 1;
}

#downloadButton:hover
{
	content: url("/ILOS-Player/icons/bt-download_hover.png");
	opacity: 1;
}

/* Groupe 2 : 3 boutons centre */
.centerControls
{
	display: flex;
	gap: 0.1cqw			!important;	/* pas d'écart horizontal-vertical */
	padding: 0.1cqw 0.1cqw		!important;	/* pas d'écart horizontal-vertical */
	align-items: center;
	flex-wrap: nowrap;
}

.centerControls img
{
	width: var(--btn-pl);
	height: var(--btn-pl);
}

/* Le hover de audio ON/OFF est géré par le JS */
#btcolor:hover
{
	content: url("/ILOS-Player/icons/bt-color_hover.png");
	opacity: 1;
}

/* Le hover de FullScreen ON/OFF est géré par le JS */

/* Groupe 3 : 2 boutons droite de gauche empilés 2 par 2 */
.rightControlsLeft
{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: var(--btn-pl);				/* hauteur d’UN bouton standard */
	margin-left: 0%;				/* petit écart avec le groupe centre */
	flex: 0 0 auto;
}

.rightControlsLeft img
{
	width:	calc(var(--btn-p2) / 1);
	height: calc(var(--btn-p2) / 2);
}

#boucleOnOff
{
    opacity: 0.70;
    transition: opacity .18s ease;
}

#boucleOnOff:hover
{
	content: url("/ILOS-Player/icons/bt-boucle-ON.png");
	opacity: 1;
}

#boucleOnOff img.is-active
{
    opacity: 1;
}

#infoButton:hover
{
	content: url("/ILOS-Player/icons/icon-info-push_hover.png");
	opacity: 1;
}

/* Groupe 4 : 2 boutons droite empilés 2 par 2 */
.rightControls
{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: var(--btn-pl);				/* hauteur d’UN bouton standard */
	margin-left: 0%;				/* petit écart avec le groupe centre */
	flex: 0 0 auto;
}

.rightControls img
{
	width:	calc(var(--btn-p3) / 1);
	height: calc(var(--btn-p3) / 2);
}

#PlaySelectPLbt:hover
{
	content: url("/ILOS-Player/icons/PlaySelectPLbt_hover.png");
	opacity: 1;
}

#searchButton:hover
{
	content: url("/ILOS-Player/icons/bt-search-select.png");
	opacity: 1;
}

/* Groupe 5 : + 2 boutons complètement à droite empilés */
.rightControlsRight
{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: var(--btn-pl);				/* hauteur d’UN bouton standard */
	margin-left: 0%;				/* petit écart avec le groupe centre */
	flex: 0 0 auto;
}

.rightControlsRight img
{
	width:	calc(var(--btn-p4) / 1);
	height: calc(var(--btn-p4) / 2);
}

#PL-Button-UP:hover
{
	content: url("/ILOS-Player/icons/PL-Button-UP_hover.png");
	opacity: 1;
}

#PL-Button-down:hover
{
	content: url("/ILOS-Player/icons/PL-Button-down_hover.png");
	opacity: 1;
}
/* ================================================================ */
/* =================== Fin barre boutons ================ */

/* ==================================================================================== */
/* Transition Player opacity 								*/
/* ==================================================================================== */
#playerContainer,
#topBar,
#middleZone,
#progressContainer,
#controlsBar,
#infoButton,
#infoWindow,
#timeCounter,
#PlayListe,
#videoCounter,
#texteILOS,
#TitleILOSplayer
{
    opacity: 1;
    visibility: visible;
    transition: opacity 1.0s ease;
}

.player-hidden
{
	pointer-events: none;
}


@media screen and (orientation: portrait)	/* écran en mode portrait */
{
	html, body
	{
		-webkit-text-size-adjust: 100%;
		border: 0;
		background-color: transparent;
		background-attachment: fixed;
		background-repeat: no-repeat;
		background-position: center;
		width: 100%;
		height: 100%;
		font-family: -apple-sytem, BlinkMacSystemFont, "SF Pro Text", tha, helvetica, Arial, Verdana, sans-serif;
		font-size: clamp(16.5px, 3.0vw, 30px);	/* responsive avec min et max */
		line-height: 1.4;
		text-align:center;
		color: white;
		overflow:hidden;
	}

	#icons360-Tiny
	{
		display: none;
		position: absolute;
		bottom: 33.0%;
		right: 1%;
		width: 22.5%;
		height: auto;
		cursor: pointer;
		pointer-events: auto;
		z-index: 120;
	}
	
	#icons360-Tiny:hover
	{
		width: 16.5%;
		height: auto;
		opacity: 0.8;
		z-index: 120;
	}
	
	#texteFormations
	{
		position: absolute;
		text-decoration: none;
		text-align: center;
		right: 6%;
		left: 6%;
		bottom: 8.0%;
		color: white;
		border-radius: 20%;
		background-color: #050505;
		background-color: rgba(5, 5, 5, .3);
	}

	#TitleILOS
	{
		position:fixed;
		top:6%;
		left:50%;
		transform:translateX(-50%);
		font-family: Futura;
		font-size: clamp(16px, 3.5vw, 34px);	/* responsive avec min et max */
		text-align: center;
		color:white;
		background:rgba(0,0,0,0.5);
		padding:5px 15px;
		border-radius:5px;
		opacity: 0;
		transition: opacity 0.35s ease;
		pointer-events: none; /* évite de gêner les clics */
		z-index: 2000;
	}

	#TitleILOS.is-visible
	{
		opacity: 1;
	}

	#texteILOS
	{
		position: absolute;
		text-decoration: none;
		text-align: center;
		right: 3%;
		left: 3%;
		bottom: clamp(20px,6.5vh, 60px)	!important;
		color: white;
		border-radius: 20%;
		background-color: #050505;
		background-color: rgba(5, 5, 5, 0.4);
		font-size: clamp(14px, 2.5vH, 24px);
	}

	/* Duration modal (grid 1..60) */
	#imageDurationPanel
	{
		display: grid;
		grid-template-columns: repeat(7, 1fr);
		gap: 6px;
	}
}

@media screen and (orientation: landscape)		/* écran en mode paysage */
{
	html, body
	{
		-webkit-text-size-adjust: 100%;
		border: 0;
		background-color: transparent;
		background-attachment: fixed;
		background-repeat: no-repeat;
		background-position: center;
		width: 100%;
		height: 100%;
		font-family: -apple-sytem, BlinkMacSystemFont, "SF Pro Text", tha, helvetica, Arial, Verdana, sans-serif;
		font-size: clamp(.20px, 1.65vw, 22px);	/* responsive avec min et max */
		line-height: 1.4;
		text-align:center;
		color: white;
		overflow:hidden;
	}

	#icons360-Tiny
	{
		display: none;
		position: absolute;
		bottom: 12.0%;
		right: 1%;
		width: 11.5%;
		height: auto;
		cursor: pointer;
		pointer-events: auto;
		z-index: 120;
	}

	#icons360-Tiny:hover
	{
		width: 16.5%;
		height: auto;
		opacity: 0.8;
		z-index: 120;
	}

	#texteFormations
	{
		font-size: 2.5vw; /* les dimensions des éléments bénéficiant des unités vw (width), vh (height), vmin et vmax */
		position: absolute;
		text-decoration: none;
		text-align: center;
		right: 6%;
		left: 6%;
		bottom: 6.0%;
		color: white;
		border-radius: 20%;
		background-color: #050505;
		background-color: rgba(5, 5, 5, .3);
	}

	#TitleILOS
	{
		position:fixed;
		top:14%;
		left:50%;
		transform:translateX(-50%);
		font-size: clamp(10px, 3.5vw, 35px);	/* responsive avec min et max */
		text-align: center;
		font-weight: bold;
		color: white;
		background:rgba(0,0,0,0.2);
		padding:5px 15px;
		border-radius:5px;
		opacity: 0;
		transition: opacity 0.35s ease;
		pointer-events: none; /* évite de gêner les clics */
		z-index: 100;
	}

	#TitleILOS.is-visible
	{
		opacity: 1;
	}

	#texteILOS
	{
		position: absolute;
		text-decoration: none;
		text-align: center;
		right: 3%;
		left: 3%;
		bottom: 18.0%;
		color: white;
		border-radius: 20%;
		background-color: #050505;
		background-color: rgba(5, 5, 5, .3);
		font-size: clamp(14px, 2.5vw, 24px);
	}

	/* Duration modal (grid 1..60) */
	#imageDurationPanel
	{
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		gap: 6px;
	}

}
#durationTable
{
	position:absolute;
	background: rgba(0,0,0,0.5);
	bottom:20%;
	left:50%;
	transform:translateX(-50%);
	max-width:100%; 
	text-align:center;
	border: 3px solid rgba(0,0,0,0.08);
	padding:0.8em;
	border-radius:10px; 
	display:none;
	z-index:13; 
}

#imageDurationPanel button
{
    border: 0;
    border-radius: 6px;
    padding: 8px 10px;
    cursor: pointer;
    font-family: inherit;
    font-size: 18px;
}