/* ======================================= Th.A horloge pour mode OFF FullScreen ======================================= */
#gorgyClock
{
	display: flex;
	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;
	cursor:default;
}

#gorgyTime
{
	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);
}

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

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

#gorgyMarkersRing,
#gorgySecondsRing
{
	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;
}

/* ===================================================== */
/* Correctif Firefox sous Windows 7 pour police LCD      */
/* ===================================================== */
html.firefox-win7 #gorgyTime
{
    font-family: Futura, Arial, Verdana, sans-serif;
}
/* ======================================= Th.A horloge pour mode ON FullScreen ======================================= */

html
	{
		border: 0;
		background-color: transparent;
		width: 100%;
		height: 100%;
		font-family: Futura, helvetica, Arial, Verdana, sans-serif;
		font-size: 3vh; /* les dimensions des éléments bénéficiant des unités vw (width), vh (height), vmin et vmax */
		color: white;
	}

body
	{
		  margin: 0

	}

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

a
	{
		text-decoration: none;
		color: white;
		background-color: #000000;
		background-color: rgba(5, 5, 5, 0.3);
	}

a:visited
	{
		text-decoration: none;
		color: yellow;
	}

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

#iconshover img:hover
	{
		width:10%;
		height:auto;
		opacity: 1;
	}

@font-face
	{
		font-family: 'tha';
		src:	url("/fonts/scrpt12n.eot");					/* pour IE <= 6 */
		src:	url("/fonts/scrpt12n.eot?#iefix") format('embedded-opentype'), /* ie 7 et 8 */
			url("/fonts/scrpt12n.woff") format("woff"),			/* pour Firefox, Chrome*/
			url("/fonts/scrpt12n.ttf") format('truetype'),			/* pour Safari et Opéra*/
			url("/fonts/scrpt12n.svg") format('svg');			/* pour iPhone, iPad */
		font-stretch : normal;
		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;
}

@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;
}

/* Début du code pour la vidéo en backround */
#bgvideo
	{
		position: fixed;
		z-index: -90;
		bottom: 20%;
		top: 0;
		background-color: transparent;
		/* début de centrage verticalement dans la fenêtre */
		margin-top: 50vh; /* poussé de la moitié de hauteur de viewport */
		transform: scale(0.8,1); /* tiré de la moitié de sa propre hauteur */
		/* fin de centrage verticalement dans la fenêtre */
		/* début de centrage horizontal dans la fenêtre */
		min-width: 100%;
		min-height: 100%;
		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 */
	}
.stopfade
	{
		opacity: 0;
	}

video
	{
		display: block;
	}
/* Fin du code pour la vidéo en backround */


/* Début du code pour les photos en backround */

/* "viewport"     c'est la partie visible de l'écran */
/* a inclure entre les balises head : <meta name="viewport" content="width=device-width" /> */
/* "max-width"    c'est la taille maximum de la fenêtre */
/* "device-width" c'est la largeur de l'écran du terminal, Intéressant pour les smartphones..*/
/*
	android en portrait 480px
	Android 1, 2 et 3 : 800px
	Android 4 : 980px
	Opera mini : 850px
	Opera mobile : 980px
	Safari mobile : 980px
	Internet Explorer mobile : 1024px

	écran 2k 1920px
	écran 4k 3840px
*/

/* type écran 8K */
@media screen and (max-device-width: 7680px)
{
	body
		{
			background: url("./imgs/background-video8k.jpg");
			background-color: #000000;
			background-color: rgba(0, 0, 0, 0.9);
			background-attachment: fixed;
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;
			font-size:100%;
		}
}

/* type écran 4K */
@media screen and (max-device-width: 3840px)
{
	body
		{
			background: url("./imgs/background-video4k.jpg");
			background-color: #000000;
			background-color: rgba(0, 0, 0, 0.9);
			background-attachment: fixed;
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;
			font-size:100%;
		}
}

/* type écran 2K */
@media screen and (max-device-width: 1920px)
{
	body
		{
			background: url("./imgs/background-video2k.jpg");
			background-color: #000000;
			background-color: rgba(0, 0, 0, 0.9);
			background-attachment: fixed;
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;
			font-size:100%;
		}
}

/* 980px type tablette en portrait */
@media screen and (max-device-width: 980px)
{
	body
		{
			background: url("./imgs/background-video-980px.jpg");
			background-color: #000000;
			background-color: rgba(0, 0, 0, 0.9);
			background-attachment: fixed;
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;
			font-size:95%;
		}
}	

/* 480px type pt smartphones en portrait */
@media screen and (max-device-width: 480px)
{
	body
		{
			background: url("./imgs/background-video-480px.jpg");
			background-color: #000000;
			background-color: rgba(0, 0, 0, 0.9);
			background-attachment: fixed;
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;
			font-size:95%;
		}

}
/* Fin du code pour les photos en backround */

.texte
	{
		position: relative;
		text-decoration: none;
		text-align: center;
		top: -5.0%;
		color: white;
		border-radius: 20%;
		background-color: #050505;
		background-color: rgba(5, 5, 5, 0.5);
	}

#contenu
	{
		position: absolute;
		min-width: 100%;		 /* largeur obligatoire pour être centré */
		min-height: 100%;
		border: 0 solid red;
	}

#cv
	{
		position: fixed;
		top: 0.5%;
		left: 2.604%;
		width: 19.0%;
		height: auto;
		z-index: 100;
		opacity: 1.0;
	}

#bandeau_pub
	{
		position: fixed;
		top: 0.5%;
		right: 10.6041%;
		width: 41.6666%;
		height: auto;
		opacity: 0 !important;
		pointer-events: none !important;
		z-index: 49;
	}

.bandeau-pub-fadeout
	{
		opacity: 1 !important;
		pointer-events: auto !important;
		transition: opacity 2s ease !important;
	}

.bandeau-pub-fadeout.is-fading
	{
		opacity: 0 !important;
	}

#bandeau_events
	{
		position: fixed;
		top: 0.5%;
		left: 20.0416%;
		width: 27.0833%;
		height: auto;
		opacity: 0 !important;
		pointer-events: none !important;
		z-index: 49;
	}

.iconMeteo
	{
		position: fixed;
		top: 0.5%;
		left: 0;
		width: 5%;
		height: auto; 
		z-index: 100;
	}

.iconAstrologie
	{
		position: fixed;
		top: 0.5%;
		right: 0;
		width: 5%;
		height: auto;
		border: 0;
		z-index: 100;
	}

.iconAudio
	{
		position: fixed;
		top: 0.0%;
		right: 0;
		width: 2%;
		height: auto;
		border: 0;
		z-index: 100;
		cursor:pointer;
	}

.icon-00
	{
		position: fixed;
		top: 2%;
		left: 20.0%;
		width: 7%;
		height: auto;
		border: 0;
		z-index: 100;
	}

.icon-01
	{
		position: fixed;
		top: 2%;
		left: 27.0%;
		width: 7%;
		height: auto;
		border: 0;
		z-index: 100;
	}

.icon-02
	{
		position: fixed;
		top: 2%;
		left: 34.0%;
		width: 7%;
		height: auto;
		border: 0;
		z-index: 100;
	}


.icon-03
	{
		position: fixed;
		top: 2%;
		left: 41.0%;
		width: 7%;
		height: auto;
		border: 0;
		z-index: 100;
	}

.icon-04
	{
		position: fixed;
		top: 2%;
		left: 48.0%;
		width: 7%;
		height: auto;
		border: 0;
		z-index: 100;
	}

.icon-05
	{
		position: fixed;
		top: 2%;
		left: 55.0%;
		width: 7%;
		height: auto;
		border: 0;
		z-index: 100;
	}

.icon-06
	{
		position: fixed;
		top: 2%;
		left: 62.0%;
		width: 7%;
		height: auto;
		border: 0;
		z-index: 100;
	}

.icon-07
	{
		position: fixed;
		top: 2%;
		left: 69.0%;
		width: 7%;
		height: auto;
		border: 0;
		z-index: 100;
	}

.icon-08
	{
		position: fixed;
		top: 2%;
		left: 76.0%;
		width: 7%;
		height: auto;
		border: 0;
		z-index: 100;
	}

.icon-09
	{
		position: fixed;
		top: 2%;
		left: 83.0%;
		width: 7%;
		height: auto;
		border: 0;
		z-index: 100;
	}

/* Début du code CSS commun menu de navigation 360° & Visioconférence */
/* Halo pulsé container uniquement */
@keyframes haloPulseContainer
{
	0%
	{
		box-shadow:
			0 0 1vh rgba(255, 50, 50, 0.4),
			0 0 2vh rgba(255, 50, 50, 0.6);
	}
	50%
	{
		box-shadow:
			0 0 2vh rgba(255, 50, 50, 0.7),
			0 0 4vh rgba(255, 50, 50, 0.8);
	}
	100%
	{
		box-shadow:
			0 0 1vh rgba(255, 50, 50, 0.4),
			0 0 2vh rgba(255, 50, 50, 0.6);
	}
}

/* ---------------- Mobile / iPhone ---------------- */
@media (max-width: 768px)
{
	#menu-icon-03
	{
		position: fixed;		  /* nécessaire pour un vrai centrage */
		left: 50%;
		right: auto;			  /* annule le right desktop */
		transform: translateX(-50%);
	}

	#menu-icon-03 a {
		flex: 0 0 45%;		/* 2 colonnes */
		max-width: 45%;
		display: flex;
		justify-content: center;
	}

	#menu-icon-03 img {
		width: 100%;
		height: auto;		 /* ratio respecté */
		max-height: 18vh;	 /* 🔥 empêche les images géantes */
		object-fit: contain;
	}

	#menu-icon-07
	{
		position: fixed;		  /* nécessaire pour un vrai centrage */
		left: 50%;
		right: auto;			  /* annule le right desktop */
		transform: translateX(-50%);
	}

	#menu-icon-07 a
	{
		flex: 0 0 45%;		/* 2 colonnes */
		max-width: 45%;
		display: flex;
		justify-content: center;
	}

	#menu-icon-07 img {
		width: 100%;
		height: auto;		 /* ratio respecté */
		max-height: 18vh;	 /* 🔥 empêche les images géantes */
		object-fit: contain;
	}
}

@media (max-width: 480px)
{
	#menu-icon-03 img {
		flex: 1 1 100%;	   /* 2 colonnes minimum */
		max-width: 100%;
		height: auto;		/* ratio naturel */
		width: 100%;
		object-fit: contain;
	}

	#menu-icon-07 img
	{
		flex: 1 1 100%;	   /* 2 colonnes minimum */
		max-width: 100%;
		height: auto;		/* ratio naturel */
		width: 100%;
		object-fit: contain;
	}
}
/* Fin du code CSS commun menu de navigation 360° & Visioconférence */

/* Début du code CSS commun menu de navigation 360° */
/* =====================================================
   Menu déroulant icon-03
   Responsive hauteur écran
   Halo rouge pulsé sur le container uniquement
   Photos sur plusieurs lignes sur mobile
   Menu centré sur mobile
===================================================== */
/* ---------------- Desktop ---------------- */
#menu-icon-03
{
	position: absolute;
	top: 14vh;
	left: 40%;
	display: none;
	flex-direction: row;
	flex-wrap: wrap; /* permet aux images de passer à la ligne */
	justify-content: center;
	/* Espacement */
	padding: clamp(8px, 1.2vh, 20px);
	gap: clamp(8px, 1.2vh, 20px);
	/* Apparence */
	background: rgba(0, 0, 0, 0.45);
	border-radius: 1.5vh;
	/* Halo pulsé container */
	animation: haloPulseContainer 3s ease-in-out infinite;
	z-index: 9999;
}

/* Liens */
#menu-icon-03 a
{
	display: block;
	text-align: center;
}

/* Images du menu */
#menu-icon-03 img
{
	height: clamp(70px, 12vh, 160px);
	width: auto;
	border-radius: 1vh;
	/* Halo statique léger */
	box-shadow: 0 0 0.6vh rgba(255, 50, 50, 0.4);
	/* Transitions interaction */
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	will-change: transform, box-shadow;
}

/* Hover images → effet renforcé */
#menu-icon-03 img:hover
{
	transform: scale(1.15);
	box-shadow:
		0 0 1.2vh rgba(255, 50, 50, 0.8),
		0 0 2.5vh rgba(255, 50, 50, 0.9),
		0 0 4vh rgba(255, 50, 50, 0.6);
}

/* Focus clavier */
#menu-icon-03 a:focus-visible img
{
	outline: none;
	box-shadow:
		0 0 1.2vh rgba(255, 50, 50, 0.9),
		0 0 3vh rgba(255, 50, 50, 1);
}
/* fin du code pour le menu de navigation 360° */


/* Début du code CSS pour le menu de navigation Visioconférence */
/* =====================================================
   Menu déroulant icon-07
   Responsive hauteur écran
   Halo rouge pulsé sur le container uniquement
   Photos sur plusieurs lignes sur mobile
   Menu centré sur mobile
===================================================== */

/* ---------------- Desktop ---------------- */
#menu-icon-07
{
	position: absolute;
	top: 14vh;
	right: 5vw;
	display: none;
	flex-direction: row;
	flex-wrap: wrap; /* permet aux images de passer à la ligne */
	justify-content: center;
	/* Espacement */
	padding: clamp(8px, 1.2vh, 20px);
	gap: clamp(8px, 1.2vh, 20px);
	/* Apparence */
	background: rgba(0, 0, 0, 0.45);
	border-radius: 1.5vh;
	/* Halo pulsé container */
	animation: haloPulseContainer 3s ease-in-out infinite;
	z-index: 9999;
}
/* Liens */
#menu-icon-07 a
{
	display: block;
	text-align: center;
}
/* Images du menu */
#menu-icon-07 img
{
	height: clamp(70px, 12vh, 160px);
	width: auto;
	border-radius: 1vh;
	/* Halo statique léger */
	box-shadow: 0 0 0.6vh rgba(255, 50, 50, 0.4);
	/* Transitions interaction */
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	will-change: transform, box-shadow;
}
/* Hover images → effet renforcé */
#menu-icon-07 img:hover
{
	transform: scale(1.15);
	box-shadow:
		0 0 1.2vh rgba(255, 50, 50, 0.8),
		0 0 2.5vh rgba(255, 50, 50, 0.9),
		0 0 4vh rgba(255, 50, 50, 0.6);
}
/* Focus clavier */
#menu-icon-07 a:focus-visible img
{
	outline: none;
	box-shadow:
		0 0 1.2vh rgba(255, 50, 50, 0.9),
		0 0 3vh rgba(255, 50, 50, 1);
}
/* fin du code pour le menu de navigation visioconférence */

.flux
	{
		position: absolute;
		bottom: 0;
		right: 0;
		left: 0;
		font-size: clamp(14.5px, 4.5vh, 44px);	/* responsive avec min et max */
		font-family: Futura, Arial, Verdana, sans-serif;
		background-color: #050505;
		background-color: rgba(5, 5, 5,0.7);
		z-index: 1;
	}

.ILOS-info
	{
		position: absolute;
		bottom: 1px;
		left: 0;
		width: auto;
		height: clamp(14.5px, 4.5vh, 44px);
		cursor:pointer;
		z-index: 10;
	} 

.reseauYT
	{
		position: fixed;
		bottom: 0;
		left: 4.3%;
		width: auto;
		height: clamp(14.5px, 4.5vh, 44px);
	}

.reseauFB
	{
		position: fixed;
		bottom: 0;
		left: 3%;
		width: auto;
		height: clamp(14.5px, 4.5vh, 44px);
	} 

.videoBkgroun
	{
		position: absolute;
		bottom: 0px;
		left: -1px;
		width: auto;
		height: clamp(18.0px, 7.0vh, 65px);	/* responsive avec min et max */
		cursor:pointer;
		z-index: 10;
	}

/* Bouton audio PISTACHE LA RADIO */
.pistache
	{
		position: fixed;
		bottom: 0;
		right: -8px;
		width: auto;
		height: clamp(20.0px, 6.5vh, 65px);	/* responsive avec min et max */
		cursor:pointer;
		z-index: 1000;
	}

#btpistache-hover
	{
		position: fixed;
		bottom: 10%;
		right: 2%;
		width: auto;
		height: 12%;
		/* PAS de display: none ! */
		opacity: 0;
		pointer-events: none;
		transform: scale(0.05);
		transform-origin: bottom right;
		transition: opacity 0.6s ease-in-out, transform 0.3s ease-in-out;
		z-index: 1001;
		cursor: pointer;
	}

@keyframes glowPulse
	{
		0%   { box-shadow: 0 0 5px  1px rgba(255, 50, 50, 0.4); }
		30%  { box-shadow: 0 0 10px 3px rgba(255, 50, 50, 0.7); }
		100% { box-shadow: 0 0 8px  0px rgba(255, 50, 50, 0.6); }
	}

#iconshoverpistache img:hover
	{
		position: fixed;
		width: auto;
		height: 13%;
	}

#iconshoverPD img:hover
	{
		position: fixed;
		width: auto;
		height: 6%;
	}

/* ================================================================================ */
/*  [ON/OFF] Masquage des éléments CSS d'index si Player-ILOS playlist/menu-info... */
/* ================================================================================ */
.player-overlay-open .gorgy-marker,
.player-overlay-open .gorgy-led,
.player-overlay-open #gorgyTime,
.player-overlay-open #gorgyClock,
.player-overlay-open #gorgyColon,
.player-overlay-open #cv,
.player-overlay-open #bandeau_pub,
.player-overlay-open #bandeau_events,
.player-overlay-open .iconMeteo,
.player-overlay-open .icon-00,
.player-overlay-open .icon-01,
.player-overlay-open .icon-02,
.player-overlay-open .icon-03,
.player-overlay-open .icon-04,
.player-overlay-open .icon-05,
.player-overlay-open .icon-06,
.player-overlay-open .icon-07,
.player-overlay-open .icon-08,
.player-overlay-open .icon-09
{
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ================================================================================= */
/*  [ON/OFF] Masquage des éléments CSS d'index si pas de mouvement souris/clavier...  */
/* ================================================================================= */

/* État inactif : les icônes disparaissent, les bandeaux apparaissent */
.player-inactive .iconMeteo,
.player-inactive .icon-00,
.player-inactive .icon-01,
.player-inactive .icon-02,
.player-inactive .icon-03,
.player-inactive .icon-04,
.player-inactive .icon-05,
.player-inactive .icon-06,
.player-inactive .icon-07,
.player-inactive .icon-08,
.player-inactive .icon-09
{
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.2s ease;
    will-change: opacity;
}

.player-inactive #bandeau_pub,
.player-inactive #bandeau_events
{
    opacity: 1 !important;
    pointer-events: auto !important;
    transition: opacity 0.2s ease;
    will-change: opacity;
}

/* Fenêtre de clic du bandeau pub pendant son fade-out */
html.bandeau-pub-click-window #bandeau_pub
{
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 10000 !important;
    transition: opacity var(--bandeau-pub-fade-duration, 4.5s) ease !important;
}

html.bandeau-pub-click-window.bandeau-pub-click-fade #bandeau_pub
{
    opacity: 0 !important;
}

/* Icônes 04 à 09 : masquées au début du fade-out */
html.bandeau-pub-click-window .icon-04,
html.bandeau-pub-click-window .icon-05,
html.bandeau-pub-click-window .icon-06,
html.bandeau-pub-click-window .icon-07,
html.bandeau-pub-click-window .icon-08,
html.bandeau-pub-click-window .icon-09
{
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 1.5s ease !important;
}

/* Icônes 04 à 09 : réapparition croisée avant la fin du fade-out */
html.bandeau-pub-click-window.bandeau-pub-icons-crossfade .icon-04,
html.bandeau-pub-click-window.bandeau-pub-icons-crossfade .icon-05,
html.bandeau-pub-click-window.bandeau-pub-icons-crossfade .icon-06,
html.bandeau-pub-click-window.bandeau-pub-icons-crossfade .icon-07,
html.bandeau-pub-click-window.bandeau-pub-icons-crossfade .icon-08,
html.bandeau-pub-click-window.bandeau-pub-icons-crossfade .icon-09
{
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Icônes 04 à 09 : transition normale hors état inactif/fade-out */
html:not(.player-inactive):not(.bandeau-pub-click-window) .icon-04,
html:not(.player-inactive):not(.bandeau-pub-click-window) .icon-05,
html:not(.player-inactive):not(.bandeau-pub-click-window) .icon-06,
html:not(.player-inactive):not(.bandeau-pub-click-window) .icon-07,
html:not(.player-inactive):not(.bandeau-pub-click-window) .icon-08,
html:not(.player-inactive):not(.bandeau-pub-click-window) .icon-09
{
    transition: opacity 0.5s ease !important;
}

/* Affichage iframe en cadre pour les pubs target="pagecadre" */
.bandeau-pub-cadre
{
    position: fixed !important;
    margin-top: 6vh !important;
    margin-bottom: 6vh !important;
    top: 50% !important;
    left: 50% !important;
    width: 90vw !important;
    height: 85vh !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 90vw !important;
    max-height: 75vh !important;
    transform: translate(-50%, -50%) !important;
    border: solid 0.5vh white !important;
    background: none !important;
    z-index: 9998 !important;
}


/*  Bandeau-pub fin de configuration CSS                                             */
/* ================================================================================= */

/* ======================= */
/*  iOS / web application  */
/* ======================= */
html.ios-webapp body
{
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    background: #000;
}

html.ios-webapp,
html.ios-webapp body
{
    overscroll-behavior: none;
    touch-action: manipulation;
}

/* ================================================================================== */
/*  IOS blockage des déplacements des fenêtres sytème lors des interactions tactiles  */
/* ================================================================================== */
html,
body
{
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: none;
    height: 100%;
}

/* autorise quand même les éléments qui doivent défiler ou recevoir du texte */
input,
textarea,
[contenteditable="true"]
{
    touch-action: auto;
}
/* ================================================================================== */