/* 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 */


/* ==================================================================================== */
/* Transition Player opacity 								*/
/* ==================================================================================== */
#iconsCMDhover,
#progressContainer,
#timeCounter,
#videoCounter,
#texteILOS,
#TitleILOS
	{
		opacity: 1;
		visibility: visible;
		transition: opacity 1.0s ease;
	}

.player-hidden
	{
		pointer-events: 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);
			}

#mini-planete
			{
				position: absolute;
				bottom: 12.0%;
				right: 1%;
				width: 11.5%;
				height: auto;
				cursor: pointer;
				z-index: 12;
			}

#QRCode
			{
				position: absolute;
				bottom: 12.0%;
				right: 1%;
				width: 8.0%;
				height: auto;
				background: rgba(255,255,255,0.4);
				z-index: 900;
			}

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

#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; 
			}
/* Voir plus bas Duration modal (grid 1..60) */

/* --- 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;
        }

/* ==================================================================================== */
/* =                          Début de style pour 3D-STL                             = */
/* ==================================================================================== */
/* ====================== Texte STL filter ====================== */
#stlFilter
{
    position: fixed;
    display: none;
    top: 12%;
    left: 50%;
    transform: translateX(-50%);
    width: 40%;
    max-width: 600px;
    min-width: 200px;
    padding: 5px 10px;
    border: 1px solid #ccc;
    font-size: clamp(14px, 2.5vw, 24px);
    text-align: center;
    border-radius: 8px;
    z-index: 500;
}

/* ==================== Barre catégories STL ==================== */
#stlCategories 
{
    position: fixed;
    display: none;
    top: calc(12% + 48px);  /* Collé sous l’input texteSTL filter */
    left: 50%;
    transform: translateX(-50%);
    width: 95%;
    min-width: 200px;
    flex-wrap: wrap;
    gap: 2px;
    background: rgba(11, 42, 69, 0.9);
    padding: 1px 5px;
    border-radius: 8px;
    z-index: 500;
    font-size: clamp(14px, 2.5vw, 24px);
    justify-content: center; /* centre toutes les catégories */
}

#stlCategories label
{
    color: white;
    cursor: pointer;
    white-space: nowrap;
    padding: 1px 4px;
}

#stlCategories input[type="checkbox"] {
    transform: scale(1.70);   /* +80 % */
    margin-right: 1px;        /* espace avec le texte */
    cursor: pointer;
}

/* ==================== Fenêtre loupe avec miniatures ==================== */
#stlListModal
{
    position: absolute;
    top: 18%;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    background: rgba(0,0,0,0.6);
    color: #F5F6CE;
    padding: 0.5vw;
    border-radius: 5px;
    border: 3px solid rgba(255,255,255,0.3);
    max-height: 60%;
    z-index: 100;
    cursor: pointer;
    overflow-y: auto; /* scroll si beaucoup de miniatures */
}

#stlListModal ul
{
    list-style: none;
    padding: 6px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* centre toutes les miniatures */
    gap: 10px; /* espace entre miniatures */
}

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

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

#stlListModal canvas
{
    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: 2px solid rgba(255,255,255,0.9);
    border-radius: 10px;
}
/* ==================== Fin de style pour 3D-STL.php ==================== */

/* ==================================================================================== */
/* =                      Styles ILOS (Th.A) 360° photos & vidéos                     = */
/* ==================================================================================== */
@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;
	}

/* ==================================================================================== */
/* Zone  de cases à cocher au-dessus des miniatures et sous l'input de recherche */
/* ==================================================================================== */

/* Checkbox */
/* Barre de filtres cachée par défaut */
#filterContainer {
    display: none; /* cacher au départ */
    position: fixed;
    top: 0;
    width: 95%;
    background: #0b2a45;
    padding: 12px 16px;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
    z-index: 9999;
}

/* Label = case + texte */
#filterContainer label {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;             /* espace entre case et texte */
    cursor: pointer !important;
    font-size: 0.85em !important;     /* police légèrement plus petite */
    color: #ffffff !important;        /* texte blanc */
    user-select: none !important;
}

/* ==================================================================================== */
/*    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;
    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 */
}

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

.searchItem video
{
    display: block;
    margin: 0 auto;            /* centre la miniature */
}

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

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

#searchInput
{
    position: fixed;
    top: calc(6% + 22px);		/* Collé sous l’input texteSTL filter */
    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(10px, 2.5vw, 20px);/* responsive avec min et max */
    text-align: center;
    border-radius: 5px;			/* coins arrondis */
    z-index: 100;			/* Affichage au 1er plan */
}
/* ============================== */
/*    Recherche – miniatures FIN  */
/* ============================== */



.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);
	 z-index: 999;
}

.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 */
	transform: scale(0.8,1); /* tiré de la moitié de sa propre hauteur */
	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 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 */
    pointer-events: none;    /* pour que les clics passent aux boutons si nécessaire */
}

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

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

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

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

		#texteILOS
			{
				position: absolute;
				text-decoration: none;
				text-align: center;
				right: 6%;
				left: 6%;
				bottom: 18.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-size: clamp(16px, 3.5vw, 34px);	/* 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;
			}

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

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

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

		#fullscreenButton
			{
				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:87.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;
			}

		/* Duration modal (grid 1..60) */
		#durationGrid
			{
				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;
			}

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

		#texteILOS
			{
				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: 18.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(16px, 3.5vw, 34px);	/* 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;
			}

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

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

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

		#fullscreenButton
			{
				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:45.5%;
				width:50.5%;
				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:46.0%;
				font-size:22px;
				color:white;
				z-index:11;
			}

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