/* IOS vidéo début de l'Overlay */
.ios-overlay
{
    display: none;            /* affiché uniquement sur iOS */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.ios-overlay-bg
{
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    color:white;
    background-color: rgba(0,0,0,0.5); /* fond semi-transparent au lieu de noir opaque */
    z-index: 0;
}

.ios-play-button
{
    position: relative;
    z-index: 1;
    cursor: pointer;
    width: auto;
    height: 55%;
}
/* IOS vidéo fin de l'Overlay */





/*	Début de style pour 3D-STL	*/ 
#stlFilter
	{
		position: fixed;
		top: 10%;
		margin-left: 50%;			/* début de centrage horizontal dans la fenêtre */
		transform: translateX(-50%);		/* tiré de la moitié de sa propre largeur */
		width: 50%;				/* largeur proportionnelle à la fenêtre */
		max-width: 600px;			/* limite sur grand écran */
		min-width: 200px;			/* limite sur petit écran */
		padding:5px 10px;
		border:1px solid #ccc;
		font-size: clamp(14px, 2.5vw, 24px);	/* responsive avec min et max */
		text-align:center;
		border:1px solid #ccc;
		border-radius: 12px;			/* coins arrondis */
		z-index: 100;				/* Affichage au 1er plan */
	}

/* Fenêtre loupe avec miniatures */
#stlListModal
	{
		position:absolute;
		top:20%;
		left:10%;
		transform:translateX(-5%);
		background: #000000;
		background: rgba(0,0,0,0.6);
		color: #F5F6CE;
		padding:0.4vw;
		border-radius:5px;
		display:none;
		max-height:70%;
		overflow-y:auto;
		z-index: 5;
		cursor: pointer;
	}

#stlListModal ul
	{
		list-style:none;
		padding:0.6vh;
		display:flex;
		flex-wrap:wrap;
	}

#stlListModal li
	{
		padding:0.6vh;
		cursor:pointer;
		text-align:center;
		font-size: clamp(14px, 2.5vw, 24px);
		color:#fff;
	}

#stlListModal li:hover
	{
		background: #FFFFFF;
		background: rgba(255,255,255,0.1);
	}

#stlListModal canvas
	{
		display:block;
		margin-bottom:5%;
		border:1px solid #FFFFFF;
		border:1px solid rgba(255,255,255,0.2);
		border-radius: 20Px;
	}
/* 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);
			}

#durationTable
	{
		position:absolute;
		background: rgba(0,0,0,0.5);
		bottom:20%;
		left:10%;
		transform:translateX(-5%);
		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; 
	}


/*	Fin de style pour 3D-STL.php	*/ 







/* === Styles ILOS (Th.A) 360° photos & vidéos */
html, body
	{
		border: 0;
		background-color: transparent;
		background-attachment: fixed;
		background-repeat: no-repeat;
		background-position: center;
		width: 100%;
		height: 100%;
		font-family: tha, helvetica, Arial, Verdana, sans-serif;
		font-size: clamp(14px, 2.5vw, 24px);	/* responsive avec min et max */
		text-align:center;
		color: white;
		overflow:hidden;
	}

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

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

a
	{
		text-decoration: none;
		color: white;
	}

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

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

.texte-360-3D
	{
		position: absolute;
		text-decoration: none;
		text-align: center;
		font-size: clamp(14px, 2.5vw, 24px);	/* responsive avec min et max */
		right:10%;
		left:10%;
		bottom: 14.0%;
		color: white;
		border-radius: 10%;
		background-color: #000000;
		background-color: rgba(5, 5, 5, .3);
	}




@media screen and (orientation: portrait)		/* écran en mode portrait */
	{
		/* --- 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);
				overflow: hidden;
		        }

		#Title360
			{
				position:absolute;
				top:4%;
				left:50%;
				transform:translateX(-50%);
				font-size: clamp(14px, 2.5vw, 24px);	/* responsive avec min et max */
				text-align:center;
				color:white;
				background:rgba(0,0,0,0.2);
				padding:5px 15px;
				border-radius:5px;
				cursor: pointer;
				z-index:50;
			}

		#Title3D
			{
				position:absolute;
				top:8%;
				left:50%;
				transform:translateX(-50%);
				font-size: clamp(14px, 2.5vw, 24px);	/* responsive avec min et max */
				text-align:center;
				color:white;
				background:rgba(0,0,0,0.2);
				padding:5px 15px;
				border-radius:5px;
				cursor: pointer;
				z-index:50;
			}

		#icon360
		{
			position: absolute;
			bottom: 14.5%;
			right: 0.5%;
			width: 10%;
			height: auto;
			z-index: 12;
		}

		#videoCounter
			{
				position: absolute;
				bottom: 9.0%;
				right: 4.0%;
				font-size: clamp(14px, 2.5vw, 24px);	/* responsive avec min et max */
				text-align: left;
				font-weight: bold;
				color: white;
				background-color: rgba(5, 5, 5, 0.1);
				padding:5px 15px;
				border-radius:5px;
				cursor: pointer;
			}

		#iconsCMDhover img:hover
			{
				width: 7.5%;
				height: auto;
				opacity: 1;
			}

		#rewind
			{
				position: absolute;
				bottom: 9.0%;
				left: 1.0%;
				width: 8%;
				height: auto;
				opacity: 0.85;
				cursor:pointer;
			}

		#prevVideo
			{
				position: absolute;
				bottom: 9.0%;
				left: 9%;
				width: 8%;
				height: auto;
				opacity: 0.85;
				cursor:pointer;
			}

		#playPause
			{
				position: absolute;
				bottom: 9.0%;
				left: 17%;
				width: 8%;
				height: auto;
				opacity: 0.85;
				cursor:pointer;
			}

		#nextVideo
			{
				position: absolute;
				bottom: 9.0%;
				left: 25.0%;
				width: 8%;
				height: auto;
				opacity: 0.85;
				cursor:pointer;
			}

		#forward
			{
				position: absolute;
				bottom: 9.0%;
				left: 33.0%;
				width: 8%;
				height: auto;
				opacity: 0.85;
				cursor:pointer;
			}

		#downloadButton
			{
				position: absolute;
				bottom: 9.0%;
				left: 41.0%;
				width: 8%;
				height: auto;
				opacity: 0.85;
				cursor:pointer;
			}

		#searchButton
			{
				position: absolute;
				bottom: 9.0%;
				left: 49.0%;
				width: 8%;
				height: auto;
				opacity: 0.85;
				cursor:pointer;
			}

		#vr360
			{
				position: absolute;
				bottom: 9.0%;
				left: 57.0%;
				width: 8%;
				height: auto;
				opacity: 0.85;
				cursor:pointer;
			}

		#fullscreenButton
			{
				position: absolute;
				bottom: 9.0%;
				left: 65.0%;
				width: 8%;
				height: auto;
				opacity: 0.85;
				cursor:pointer;
			}

		#audioToggle
			{
				position: absolute;
				bottom: 9.0%;
				left: 73.0%;
				width: 8%;
				height: auto;
				opacity: 0.85;
				cursor:pointer;
			}

		#btcolor
			{
				position: absolute;
				bottom: 9.0%;
				left: 73.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;
		}

		#progressContainer
			{
				position:absolute;
				bottom:7.2%;
				left:1.2%;
				width:94.8%;
				height: 16px;
				background: rgba(139,0,0,0.3); /* bordeaux foncé clair */
				border-radius:5px;
				overflow:hidden;
				cursor:pointer;
				z-index:10;
			}

		#progressBar
			{
				width:0%;
				height:100%;
				background: #8B0000;
				border-radius:10px;
				transition: width 0.4s linear;
			}

		#timeCounter
			{
				position:absolute;
				bottom:6.9%;
				left:2.0%;
				font-size:16px;
				color:white;
				z-index:11;
			}

		#searchModal
			{
				position:absolute;
				top:8%;
				left:5%;
				width:90%;
				height:68%;
				background:rgba(0,0,0,0.6);
				display:none;
				flex-direction:column;
				align-items:center;
				overflow-y:auto;
				z-index:100;
				padding-top:20px;
			}

		#searchInput
			{
				top: 10%;
				width: 50%;				/* largeur proportionnelle à la fenêtre */
				max-width: 600px;			/* limite sur grand écran */
				min-width: 200px;			/* limite sur petit écran */
				padding:5px 10px;
				border:1px solid #ccc;
				font-size: clamp(14px, 2.5vw, 24px);	/* responsive avec min et max */
				text-align:center;
				border:1px solid #ccc;
				border-radius: 12px;			/* coins arrondis */
				z-index: 100;				/* Affichage au 1er plan */
			}

		.searchItemsContainer
			{
				display:flex;
				flex-wrap:wrap;
				justify-content:center; gap:10px;
			}

		.searchItem
			{
				margin:10px;
				cursor:pointer;
				color:white;
				text-align:center;
			}

		.searchItem img
			{
				width:160px;
				height:90px;
				object-fit:cover;
				display:block;
				margin-bottom:5px;
				border-radius:4px;
			}

		/* Duration modal (grid 1..60) */
		#durationModal
			{
				position: absolute;
				bottom: 22%;
				left: 50%;
				transform: translateX(-50%);
				height: 60%;
				max-height: 900px;
				background: rgba(0,0,0,0.85);
				border-radius: 8px;
				padding: 12px;
				display: none;
				z-index: 300;
			}

		#durationGrid
			{
				display: grid;
				grid-template-columns: repeat(6, 1fr);
				gap: 6px;
			}

		.durationBtn
			{
				background:#8b0000;
				color: white;
				border: 1px solid rgba(255,255,255,0.08);
				padding: 8px;
				font-size: 0.8rem;
				border-radius: 4px;
				cursor: pointer;
			}

		.durationBtn:hover
			{
				background: rgba(255,255,255,0.12);
			}
	}


@media screen and (orientation: landscape)		/* écran en mode paysage */
	{

		/* --- 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);
				overflow: hidden;
		        }

		#Title360
			{
				position:absolute;
				top:8%;
				left:50%;
				transform:translateX(-50%);
				font-size: clamp(14px, 2.5vw, 24px);	/* responsive avec min et max */
				text-align: right;
				font-weight: bold;
				color: white;
				background:rgba(0,0,0,0.2);
				padding:5px 15px;
				border-radius:5px;
				cursor: pointer;
				z-index:1500;
			}

		#Title3D
			{
				position:absolute;
				top:22%;
				left:50%;
				transform:translateX(-50%);
				font-size: clamp(14px, 2.5vw, 24px);	/* responsive avec min et max */
				text-align: right;
				font-weight: bold;
				color: white;
				background:rgba(0,0,0,0.2);
				padding:5px 15px;
				border-radius:5px;
				cursor: pointer;
				z-index:1500;
			}

		#icon360
		{
			position: absolute;
			bottom: 13.0%;
			right: 0.5%;
			width: 10%;
			height: auto;
			z-index: 12;
		}

		#videoCounter
			{
				position: absolute;
				bottom:6.4%;
				right: 4.5%;
				font-size: clamp(14px, 2.5vw, 24px);	/* responsive avec min et max */
				text-align: right;
				font-weight: bold;
				color: white;
				padding:5px 15px;
				border-radius:5px;
				cursor: pointer;
				z-index:50;
			}

		#iconsCMDhover img:hover
			{
				width: 3.5%;
				height: auto;
				opacity: 1;
			}

		#rewind
			{
				position: absolute;
				bottom:7.2%;
				left: 1.0%;
				width: 4%;
				max-height: 60px;
				height: auto;
				opacity: 0.85;
				cursor:pointer;
				z-index:30;
			}

		#prevVideo
			{
				position: absolute;
				bottom:7.2%;
				left: 5%;
				width: 4%;
				max-height: 60px;
				height: auto;
				opacity: 0.85;
				cursor:pointer;
				z-index:30;
			}

		#playPause
			{
				position: absolute;
				bottom:7.2%;
				left: 9%;
				width: 4%;
				max-height: 60px;
				height: auto;
				opacity: 0.85;
				cursor:pointer;
				z-index:30;
			}

		#nextVideo
			{
				position: absolute;
				bottom:7.2%;
				left: 13.0%;
				width: 4%;
				max-height: 60px;
				height: auto;
				opacity: 0.85;
				cursor:pointer;
				z-index:30;
			}

		#forward
			{
				position: absolute;
				bottom:7.2%;
				left: 17.0%;
				width: 4%;
				max-height: 60px;
				height: auto;
				opacity: 0.85;
				cursor:pointer;
				z-index:30;
			}

		#downloadButton
			{
				position: absolute;
				bottom:7.2%;
				left: 21.0%;
				width: 4%;
				max-height: 60px;
				height: auto;
				opacity: 0.85;
				cursor:pointer;
				z-index:30;
			}

		#searchButton
			{
				position: absolute;
				bottom:7.2%;
				left: 25.0%;
				width: 4%;
				max-height: 60px;
				height: auto;
				opacity: 0.85;
				cursor:pointer;
				z-index:30;
			}

		#vr360
			{
				position: absolute;
				bottom:7.2%;
				left: 29.0%;
				width: 4%;
				max-height: 60px;
				height: auto;
				opacity: 0.85;
				cursor:pointer;
				z-index:30;
			}

		#fullscreenButton
			{
				position: absolute;
				bottom:7.2%;
				left: 33.0%;
				width: 4%;
				max-height: 60px;
				height: auto;
				opacity: 0.85;
				cursor:pointer;
				z-index:30;
			}

		#audioToggle
			{
				position: absolute;
				bottom:7.2%;
				left: 37.0%;
				width: 4%;
				max-height: 60px;
				height: auto;
				opacity: 0.85;
				cursor:pointer;
				z-index:30;
			}

		#btcolor
			{
				position: absolute;
				bottom:7.2%;
				left: 37.0%;
				width: 4%;
				max-height: 60px;
				height: auto;
				opacity: 0.85;
				cursor:pointer;
				z-index:30;
			}
        /* pur btcolor, sélecteur de couleur invisible */
	#colorPicker
        	{
			position: absolute;
			bottom: 8.0%;
			left: 37.5%;
			width: 3.0%;
			height: 5%;
			opacity: 0.01;
			border: none;
			padding: 0;
			margin: 0;
			cursor: pointer;
			z-index: 31;
		}


		#progressContainer
			{
				position:absolute;
				bottom:7.2%;
				left:41.5%;
				width:58.0%;
				height: 24px;
				background: rgba(139,0,0,0.3); /* bordeaux foncé clair */
				border-radius:5px;
				overflow:hidden;
				z-index:10;
				cursor:pointer;
			}

		#progressBar
			{
				width:0%;
				height:100%;
				background: #8B0000;
				border-radius:10px;
				transition: width 0.4s linear;
			}

		#timeCounter
			{
				position:absolute;
				bottom:6.9%;
				left:42.0%;
				font-size:22px;
				color:white;
				z-index:11;
			}

		#searchModal
			{
				position:absolute;
				top:8%;
				left:5%;
				width:90%;
				height:68%;
				background:rgba(0,0,0,0.6);
				display:none;
				flex-direction:column;
				align-items:center;
				overflow-y:auto;
				z-index:100;
				padding-top:20px;
			}





		#searchInput
			{
				top: 10%;
				width: 50%;				/* largeur proportionnelle à la fenêtre */
				max-width: 600px;			/* limite sur grand écran */
				min-width: 200px;			/* limite sur petit écran */
				padding:5px 10px;
				border:1px solid #ccc;
				font-size: clamp(14px, 2.5vw, 24px);	/* responsive avec min et max */
				text-align:center;
				border:1px solid #ccc;
				border-radius: 12px;			/* coins arrondis */
				z-index: 100;
			}

		.searchItemsContainer
			{
				display:flex;
				flex-wrap:wrap;
				justify-content:center; gap:10px;
			}

		.searchItem
			{
				margin:10px;
				cursor:pointer;
				color:white;
				text-align:center;
			}

		.searchItem img
			{
				width:160px;
				height:90px;
				object-fit:cover;
				display:block;
				margin-bottom:5px;
				border-radius:4px;
			}

		/* Duration modal (grid 1..60) */
		#durationModal
			{
				position: absolute;
				bottom: 28%;
				left: 50%;
				transform: translateX(-50%);
				width: 80%;
				max-width: 900px;
				background: rgba(0,0,0,0.85);
				border-radius: 8px;
				padding: 12px;
				display: none;
				z-index: 300;
			}

		#durationGrid
			{
				display: grid;
				grid-template-columns: repeat(10, 1fr);
				gap: 6px;
			}

		.durationBtn
			{
				background:#8b0000;
				color: white;
				border: 1px solid rgba(255,255,255,0.08);
				padding: 8px;
				font-size: 0.9rem;
				border-radius: 4px;
				cursor: pointer;
			}

		.durationBtn:hover
			{
				background: rgba(255,255,255,0.12);
			}
	}