/****************************************************************************
 * AUTEUR
 *
 * JO, https://jo.m1b.fr
 */

/****************************************************************************
 * CONFIGURATIONS
 */
:root {
	/* couleurs */
	--couleur_arriere_plan: #111;
	--couleur_texte: #fff;
	--couleur_selection: #b3a57f; /* Orléans */
	--couleur_selection: #f69; /* Labomedia */

	/* dimensions */
	--largeur_application: 100vw;
	--hauteur_application: 100vh;
}
/* uniquement si dvh est supporté */
@supports(height: 100dvh) {
	:root {
		--hauteur_application: 100dvh;
	}
}

/****************************************************************************
 * RESET
 *
 * par défaut, voir: https://www.joshwcomeau.com/css/custom-css-reset/
 */
*, *::before, *::after {
	box-sizing: border-box;
}
* {
	margin: 0;
}
body {
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}
img, picture, video, canvas, svg {
	display: block;
	max-width: 100%;
}
input, button, textarea, select {
	font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
	overflow-wrap: break-word;
}
h1, h2, h3, h4, h5, h6 {
	text-wrap: balance;
}

/****************************************************************************
 * APP
 */
* {
	/* désactive la sélection et l'affichage du curseur de texte */
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

	/* désactive le highlight et la bordure quand on focus un élément */
	-webkit-tap-highlight-color: transparent;
	outline: none;
	
	font-family: "Open Sans", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
	font-weight: 300;
}
.selectionnable, .selectionnable *{
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	user-select: text;
}
::selection {
	color: var(--couleur_arriere_plan);
	background-color: var(--couleur_texte);
}
body {
	background-color: var(--couleur_arriere_plan);
	color: var(--couleur_texte);
	overscroll-behavior: none;
}
a {
	color: var(--couleur_texte);
	text-decoration: none;
}
a, button, input, select {
	pointer-events: auto;
}
.taille_ecran {
	position: absolute;
	top: 0;
	left: 0;
	width: var(--largeur_application);
	height: var(--hauteur_application);
	overflow: hidden;
}

/****************************************************************************
 * Accueil
 */
#accueil {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	z-index: 50;
	background-image: url('fond-accueil.png');
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
}
#accueil > div {
	display: none;
}
#accueil > div[class^="erreur"]:after {
	position: absolute;
	z-index: -1;
	content: "";
	top: 0;
	left: 0;
	width: var(--largeur_application);
	height: var(--hauteur_application);
	overflow: hidden;
	background-color: rgba(0,0,0,.75);
}
#accueil > div[class^="erreur"] {
	background-color: rgba(255,0,0,.75);
	color: #fff;
}
#accueil > div[class^="erreur"] > * {
	padding: 10px;
	display: block;
}
#accueil > div[class^="erreur"] strong {
	display: block;
	font-weight: bold;
	font-size: 1.5em;
}
#accueil > div.erreur_javascript_desactive {
	display: block;
}
#demarrer {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	height: 100px;
	width: 100px;
	border: none;
	border-radius: 50px;
	background-color: rgba(0,0,0,.75);
	color: var(--couleur_texte);
	outline: none;
	transition: transform .25s, background .25s;
}
#demarrer:focus, #demarrer:hover {
    background-color: var(--couleur_selection);
	box-shadow: 0 0 10px rgba(0,0,0,.75);
	transform: scale(1.1);
}
#demarrer > i {
	display: block;
	background-color: var(--couleur_texte);
	mask-image: url('img/icone_demarrer.svg');
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
	width: 50px;
	height: 100px;
	margin-left: 7.5px; /* taille icone 384x512px, décalage pour conserver le centrage */
}
#demarrer > strong {
	position: absolute;
	opacity: 0;
	color: var(--couleur_selection);
	font-weight: normal;
	text-transform: uppercase;
	transition: opacity .25s, transform .25s;
	transform: rotateY(180deg)
}
#demarrer:focus > strong, #demarrer:hover > strong {
	opacity: 1;
	transform: rotateY(0);
}
[data-ai-etat] #accueil > div.erreur_javascript_desactive {
	display: none;
}
[data-ai-erreur="webgl_non_supporte"] #accueil > div.erreur_webgl_non_supporte {
	display: block;
}
/* prêt ! */
[data-ai-etat="pret_a_demarrer"] #accueil {
	cursor: pointer;
}
[data-ai-etat="pret_a_demarrer"] #accueil > div.pret_a_demarrer {
	display: block;
}
/* actif */
[data-ai-etat="actif"] #accueil {
	display: none;
}

/****************************************************************************
 * Chargement
 */
#chargement {
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	z-index: 75;
}
[data-ai-etat="chargement"] #accueil {
	filter: blur(10px);
	-webkit-filter: blur(10px);
}
[data-ai-etat="chargement"] #accueil > div {
	display: none;
}
[data-ai-etat="chargement"] #chargement {
	display: flex;
	background-color: rgba(0,0,0,.5);
}
#chargement > p {
	font-size: 1.1em;
	text-shadow: 0px 0px 3px rgba(0,0,0,1);
	text-align: center;
}
#chargement .barres_de_chargement {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: 10px;
	width: 100%;
}
#chargement .barres_de_chargement .chargement {
	--taille_icones: 25px;

	display: flex;
	flex-direction: row;
	align-items: center;
	margin: 5px 0;
	width: 33%;
	min-width: 300px;
}
#chargement .barres_de_chargement .chargement > i {
	display: inline-block;
	height: var(--taille_icones);
	width: var(--taille_icones);
	margin-right: 10px;
	overflow: hidden;
	background-color: var(--couleur_texte);
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
}
#chargement .barre {
	position: relative;
	flex: 1;
	height: 75%;
	border: 1px solid #fff;
	overflow: hidden;
}
#chargement .progression {
	position: absolute;
	height: 100%;
	width: 0;
	background-color: var(--couleur_texte);
	overflow: hidden;
	transition: width .1s linear;
}
#chargement .progression:after {
	position: absolute;
	display: flex;
	align-items: center;
	height: 100%;
	right: 3px;
	content: attr(data-ai-progression);
	font-size: calc(var(--taille_icones) / 2);
	color: var(--couleur_arriere_plan);
	line-height: 0;
}
#barre_de_chargement_auditorium > i  {
	mask-image: url('img/icone_chargement_auditorium.svg');
}

/****************************************************************************
 * IHM
 */
#ihm {
	display: flex;
	z-index: 100;
	pointer-events: none;
}
#ihm a {
	pointer-events: all;
	display: inline-block;
}
#ihm .titre, #ihm .sous_titre, #ihm .copyright {
	font-size: 1em;
}
#ihm .titre a:hover, #ihm .sous_titre a:hover {
	color: var(--couleur_arriere_plan);
	background-color: var(--couleur_texte);
}
#ihm .titre {
	font-weight: 800;
}
#ihm .avatar {
	display: flex;
	width: 2.5em;
	height: 2.5em;
	overflow: hidden;
	margin-right: 10px;
	align-items: center;
}
#ihm_colonne_gauche, #ihm_colonne_droite {
	display: none;
	position: relative;
}
#ihm_colonne_principale {
	display: flex;
	flex-direction: column;
	flex: 1;
}
#ihm_haut, #ihm_ecran, #ihm_bas {
	display: flex;
	margin: 10px;
	align-items: center;
}
#ihm_ecran {
	position: relative;
	flex: 1;
	margin: 0 10px;
	overflow: hidden;
}
#ihm_statistiques > div {
	position: absolute !important;
	left: 0 !important;
	pointer-events: all;
}
#ihm_bas {
	justify-content: space-between;
	align-items: end;
}
#ihm_bas .a_gauche, #ihm_bas .a_droite {
	display: flex;
	flex-direction: column;
}
#ihm .controles {
	display: flex;
	flex-direction: column;
}
#ihm #logo {
	opacity: .9;
	max-width: 300px;
	pointer-events: all;
}
@media only screen and (max-width: 1000px) {
	#ihm #logo {
		max-width: 200px;
	}
}
@media only screen and (max-width: 400px) {
	#ihm #logo {
		max-width: 50vw;
	}
}
#ihm .controles {
	--taille_boutons: 25px;
	--taille_espacement_boutons: 10px;

	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	gap: 0 var(--taille_espacement_boutons);
	pointer-events: all;
}
#ihm .controles button {
	display: none;
	width: var(--taille_boutons);
	height: var(--taille_boutons);
	opacity: .9;
	cursor: pointer;
	border: none;
	overflow: hidden;
	outline: 0;
	background-color: var(--couleur_texte);
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
	transition: transform .25s, background .25s;
}
#ihm .controles button:focus, #ihm .controles button:hover {
	background-color: var(--couleur_selection);
	transform: scale(1.25);
}
#ihm .controles [popover]:popover-open {
	position: absolute;
	left: auto;
	top: auto;
	margin: 0;
	margin-right: var(--taille_espacement_boutons);
	border: none;
	right: 0;
	bottom: calc(var(--taille_boutons) + var(--taille_espacement_boutons) + var(--taille_espacement_boutons));
	background-color: var(--couleur_texte);
	color: var(--couleur_arriere_plan);
	font-size: 1em;
	line-height: 1em;
}
#ihm .controles #activer_mode_fps {
	mask-image: url('img/icone_activer_mode_fps.svg');
}
#ihm .controles #activer_vr {
	mask-image: url('img/icone_vr.svg');
}
#ihm .controles #quitter_vr {
	mask-image: url('img/icone_vr.svg');
	background-color: var(--couleur_selection);
}
#ihm .controles #activer_plein_ecran {
	display: inline-block;
	mask-image: url('img/icone_activer_plein_ecran.svg');
}
#ihm .controles #quitter_plein_ecran {
	mask-image: url('img/icone_quitter_plein_ecran.svg');
}
[data-ai-etat="actif"] #ihm .controles #activer_mode_fps {
	display: inline-block;
}
[data-ai-plein_ecran="oui"] #ihm .controles #activer_plein_ecran {
	display: none;
}
[data-ai-plein_ecran="oui"] #ihm .controles #quitter_plein_ecran {
	display: inline-block;
}
#ihm .controles #activer_lumiere_immersive {
	mask-image: url('img/icone_lumiere_immersive.svg');
}
#ihm .controles #activer_lumiere_environnement {
	mask-image: url('img/icone_lumiere_environnement.svg');
}
[data-ai-etat="actif"][data-ai-lumiere="immersive"] #ihm .controles #activer_lumiere_environnement,
[data-ai-etat="actif"][data-ai-lumiere="environnement"] #ihm .controles #activer_lumiere_immersive {
	display: inline-block;
}

/****************************************************************************
 * Auditorium
 */
#auditorium {
	z-index: 1;
	cursor: grab;
}

/****************************************************************************
 * Mode : fps
 */
[data-ai-mode="fps"] #auditorium {
	cursor: pointer;
}
[data-ai-mode="fps"] #ihm #activer_mode_fps {
	background-color: var(--couleur_selection);
}

/****************************************************************************
 * Mode : vr
 */
[data-ai-vr] #ihm .controles #activer_mode_fps,
[data-ai-vr] #ihm .controles #quitter_mode_fps {
	display: none !important;
}
[data-ai-etat="actif"][data-ai-vr] #ihm .controles #activer_vr {
	display: inline-block;
}
[data-ai-etat="actif"][data-ai-vr][data-ai-vr_session="oui"] #ihm .controles #activer_vr {
	display: none;
}
[data-ai-etat="actif"][data-ai-vr][data-ai-vr_session="oui"] #ihm .controles #quitter_vr {
	display: inline-block;
}