@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@media screen and (max-width:1024px) and (orientation:landscape){
	body{
		overflow-x: scroll;
	}
}
body{
    font-family: "montserrat", sans serif;
}
/* iframe css*/
#angioplastie3D{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    border:0;
}
/* -------------------------- custom preloader css -------------------*/
#preloader_div{
    background-color:#F1F1F1;
    width:100%;
    height:100vh;
    position: absolute;
    top:0;
    left:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    font-size:1.4em;
    font-weight:700;
    color:#224B5D;
	z-index:99;
}
#preloader_container{
    background-image: url("media/android-chrome-192x192.png");
    -webkit-background-size:contain;
    background-size: contain;
    width: 192px;
    height: 192px;
}
#charg{
    text-transform: uppercase;
}
#pourcentage{
    width:100px;
    height:100px;
    text-align:center;
}
/* ------------------------ Rubrique titre & Playmodal --------------------- */
#playmodal{
	width:100%;
	min-height:100%;
	overflow-y: auto;
	position:absolute;
	top:0;
	left:0;
	display:flex;
	flex-direction: column;
	background-image:radial-gradient(circle,#9AB9CB,#385172);
	background-blend-mode:soft-light;
	z-index:98;
}
#titre{
	background-color:#294459;
	color:whitesmoke;
	border-radius:5px;
	width:360px;
	margin:20vh auto 0;
	font-size:1.8em;
	text-align:center;
	padding:10px 0;
	box-shadow: 0 8px 20px rgba(34, 75, 93, 0.5);
}
#anim-mode, #back{
	margin: 0 auto;
	width:360px;
	text-align: center;
}
#jeu{
	font-size: 1.2em;
	background:linear-gradient(135deg, #ff5f6d, #ffc371);
	box-shadow:0 8px 20px rgba(0, 0, 0, 0.2);
	border-radius:5px 5px 0 0;
	text-align: center;
	padding: 10px 0;
}
#levels-container{
	background-color: rgb(241,241,241);
	box-shadow:0 8px 20px rgba(0, 0, 0, 0.2);
	border-radius:0 0 5px 5px;
}
#levels-tab{
	margin:0 auto;
	font-size: 1.2em;
	padding:10px 0;
	color:#224B5D;
}
#niveau1{
	background-color: #00BEB0;
}
#niveau2{
	background-color: #FA9952;
}
#niveau3{
	background-color: #F55165;
}
.categorie{
	margin:20px auto;
	background:linear-gradient(135deg, #ff5f6d, #ffc371);
	box-shadow:0 8px 20px rgba(0, 0, 0, 0.2);
	padding:10px 0;
	font-size:1.2em;
	border-radius:5px;
	text-align: center;
	cursor: pointer;
	transition:background 0.2s ease;
	transition:transform 0.2s ease
}
.categorie:hover{
	background:#BFD050;
	transform:scale(1.03);
}
.choice-label{
	padding:10px;
	border-radius:3px;
	color:white;
}
.choice-link{
	padding:10px;
	text-align: left;
	transition:background 0.2s ease;
}
.choice-link:hover{
	cursor: pointer;
	color:white;
	background-color:#BFD050;
}
/* ------------------- Rubrique choice ----------------------*/
#post-anim-choice-container{
	position:absolute;
	margin:auto;
	top:88vh;
	left:49%;
}
.icon-choice-container{
	display:flex;
	justify-content: center;
	transition: transform 0.2s ease;
}
.icon-choice-container:hover{
	transform:scale(1.05);
}
.choice-btn{
	width:64px;
	height:64px;
	background-repeat: no-repeat;
	background-size:auto;
	cursor:pointer;
}
#replay{
	background-image: url("media/replay.png");
}
.hide{
	display:none;
	visibility: hidden;
	opacity:0;
}
.hidden{
	visibility: hidden;
}
.flex{
	display:flex;
	opacity:1;
}
.block{
	display:block;
	opacity:1; 
}
.grid{
	display:grid;
	opacity:1; 
}
.transparent{
	opacity:0;
}
.marqueur0{
	display:inline-block;
	background:linear-gradient(135deg, #ff5f6d, #ffc371);
	border-radius:2px;
	color:white;
	padding:0 3px;
}
.marqueur1{
	display:inline-block;
	background-color:#00BEB0;
	border-radius:2px;
	color:white;
	padding:0 3px;
}
.marqueur2{
	display:inline-block;
	background-color:#FA9952;
	border-radius:2px;
	color:white;
	padding:0 3px;
}
.marqueur3{
	display:inline-block;
	background-color:#F55165;
	border-radius:2px;
	color:white;
	padding:0 3px;
}
.comment-title{
	display:inline-block;
	background-color:#BFD050;
	color: #224B5D;
	border:solid 1px #224B5D;
	border-radius:2px;
	padding:0 5px;
	font-weight: bold;
	text-align:center;
	margin:10px 0;
	font-size:1.1em;
}
.green{
	color:green;
}
.red{
	color:red;
}
/* -------------------------- Rubrique indicateur de niveaux & mode d'emploi -----------------------*/
#indic-niveau{
	position:absolute;
	top:2%;
	left:50%;
	margin-left:-210px;
	width:420px; 
	height:50px;
	background: linear-gradient(135deg, #ff5f6d, #ffc371);
	color:white;
	border-radius:3px;
	box-shadow:0 8px 20px rgba(0, 0, 0, 0.2);
	text-align:center;
	line-height:50px;
	font-size:1.4em;
}
#mode-emploi{
	position:absolute;
	top:2%;
	left:50%;
	width:960px;
	margin-left:-480px;
	height:92vh;
	overflow-y: scroll;
	background-color: white;
	line-height:24px;
	padding:20px;
	border-radius: 3px;
	box-shadow:0 8px 20px rgba(0, 0, 0, 0.2);
	color:#224B5D;
	border: solid 1px #224B5D;
}
#gu-back{
	text-decoration:none;
	color:#224B5D;
}
#gu-back:hover{
	color:#F55165;
}
.niveau-btn{
	width:240px;
	padding:5px;
	background: linear-gradient(135deg, #ff5f6d, #ffc371);
	border-radius:3px;
	color:white;
	font-weight:normal;
	text-align:center;
}

/* --------------------- comments et resultats-----------------------*/
#full-comment{
	position:absolute;
	top:25vh;
	left:50%;
	margin-left:-300px;
	width:600px;
	padding:10px;
	text-align:center;
	line-height:36px;
	font-size:1.1em;
	background-color: rgba(241, 241, 241);
	border-radius:5px;
	border: solid 1px #224B5D;
	color:#224B5D;
	box-shadow:0 8px 20px rgba(0, 0, 0, 0.2);
	z-index:7;
}
#steps-comment{
	position:absolute;
	top:18vh;
	left:50%;
	margin-left:-300px;
	max-height:72vh;
	overflow-y:auto;
	width:600px;
	padding:10px;
	text-align:center;
	font-size:1.1em;
	background-color: white;
	border-radius:5px;
	border: solid 1px #224B5D;
	color:#224B5D;
	box-shadow:0 8px 20px rgba(0, 0, 0, 0.2);
	z-index:7;
}
#resultat-inter{
	position:absolute;
	top:22vh;
	left:50%;
	margin-left:-300px;
	max-height:72vh;
	overflow-y:auto;
	width:600px;
	padding:10px;
	text-align:center;
	font-size:1.1em;
	background-color:white;
	border-radius:5px;
	border: solid 1px #224B5D;
	color:#224B5D;
	box-shadow:0 8px 20px rgba(0, 0, 0, 0.2);
	z-index:7;
}
#resultat-free{
	position:absolute;
	top:12vh;
	left:50%;
	margin-left:-390px;
	width:780px;
	max-height:72vh;
	overflow-y:auto;
	padding:10px;
	text-align:center;
	font-size:1.1em;
	background-color:white;
	border: solid 1px #224B5D;
	border-radius:5px;
	color:#224B5D;
	box-shadow:0 8px 20px rgba(0, 0, 0, 0.2);
	z-index:7;
}
#score-free{
	font-size:1.3em;
	font-weight: bold;
}
#erreur-liste{
	font-size:1em;
	text-align:left;
}
#playerName{
	width:180px;
	height:24px;
	font-size:0.8em;
	border:solid 1px #B2B2B2;
	border-radius: 2px;
}
#send-btn{
	margin-top:10px;
	width:80px;
	height:28px;
	border: none;
	border-radius:2px;
	background-color:#F55165;
	color:white;
	font-size:0.8em;
	cursor:pointer;
	transition:background 0.2s ease;
}
#send-btn:hover{
	background: #DB424E;
}
#send-btn:active{
	transform:scale(0.95);
}
/* --------------------- Rubrique N1 - Steps Anim -----------------------*/
#step-info{
	position:absolute;
	top:17vh;
	left:50%;
	width:560px;
	margin-left:-280px;
	font-size:1.4em;
}
#step-number{
	display:inline-block;
	padding:3px 5px;
	border-radius:3px 3px 0 0;
	box-shadow:8px 0 20px rgba(0, 0, 0, 0.2);
}
.step-number-active{
	background:#BFD050;
	color:white;
	transition:background 0.2s ease;
}
.step-number-cache{
	background:#9AB9CB;
	color:whitesmoke;
	transition:background 0.2s ease;
}
#step-explain{
	height:46px;
	width:560px;
	background:white;
	border-radius: 0 3px 3px;
	line-height:40px;
	text-align:center;
	color:#224B5D;
	box-shadow:0 8px 20px rgba(0, 0, 0, 0.2);
}
#bar-container{
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:6px;
	background-color:#DCDCDC;
	border-radius:0 0 3px 3px;
	overflow: hidden;
}
.bar0{
	width:0%;
	height:100%;
	background-color: #BFD050;
}
.bar100{
	width:100%;
	height:100%;
	background-color: #BFD050;
}
.info-hide{
	opacity:0;
	transition: opacity 0.3s ease;
}
.info-visible{
	opacity:1;
	transition: opacity 0.3s ease;
}
#descrip-container{
	position:absolute;
	top:65vh;
	left:50%;
	margin-left:-480px;
	width:960px;
	display:flex;
	gap:20px;
	justify-content:space-between;
	background-color:white;
	border-radius:3px;
	padding:15px;
	font-size:1.1em;
	color:#224B5D;
	box-shadow:0 8px 20px rgba(0, 0, 0, 0.2);
}
#step-descrip{
	line-height:32px;
	padding:5px;
	width:820px;
}
.maitre{
	background-image: url("media/maitre-gif.gif");
	background-size:cover;
	background-position: center;
	background-repeat: no-repeat;
	width:128px;
	height: 128px;
}
.subtitle{
	display:inline-block;
	background:linear-gradient(135deg, #00BEB0, #ffc371);
	padding:0 5px;
	color:white;
	border-radius: 3px;
	font-size:1.1em;
}
#steps-container{
	position:absolute;
	top:10vh;
	left:50%;
	margin-left:-280px;
	height:46px;
	width:560px;
	align-items: center;
	justify-content:space-between;
}
.steps-btn{
	width:46px;
	height:46px;
	border-radius:5px;
	background:white;
	box-shadow:0 8px 20px rgba(0, 0, 0, 0.2);
	color: #294459;
	text-align: center;
	line-height:46px;
	font-size: 1.4em;
	font-weight:bold;
	cursor: pointer;
	transition:background 0.2s ease;
}
.steps-btn-active{
	width:46px;
	height:46px;
	border-radius:5px;
	background-color:#BFD050;
	box-shadow:0 8px 20px rgba(0, 0, 0, 0.2);
	color: white;
	text-align: center;
	line-height: 46px;
	font-size: 1.4em;
	font-weight: bold;
	cursor: default;
}
.steps-btn:hover{
	background-color:#FA9952;
	color:white;
}
.steps-btn-done{
	width:46px;
	height:46px;
	border-radius:5px;
	background:#9AB9CB;
	color:whitesmoke;
	text-align: center;
	line-height:46px;
	font-size: 1.4em;
	font-weight:bold;
	cursor: not-allowed;
	pointer-events: none;
	transition:background 0.2s ease;
}
/* ------------------------ Rubrique QUIZZ N1 ------------------------*/
#button-container{
	display:flex;
	justify-content:space-around;
	margin:20px 0;
}
.button-resp:hover{
	transform:scale(1.05);
}
.button-resp{
	background-color:#E2ECF3;
	color: #294459;
	width:80%;
	margin:0 auto;
	height:40px;
	border:solid 1px #224B5D;
	border-radius:20px;
	cursor:pointer;
	font-family: "montserrat";
	font-size:1em;
	transition: transform 0.2s ease;
}
.bonneR{
	background-color:#BFD050;
	color: #294459;
	height:40px;
	width:80%;
	margin:0 auto;
	border:none;
	border-radius:20px;
	cursor:default;
	font-family: "montserrat";
	font-size:1em;
	transition: transform 0.2s ease;
}
.mauvaiseR{
	background-color:red;
	color:white;
	height:40px;
	width:80%;
	margin:0 auto;
	border:none;
	border-radius:20px;
	cursor:default;
	font-family: "montserrat";
	font-size:1em;
	transition: transform 0.2s ease;
}
/* ------------------------ Rubrique N2 -  Interactive Anim ------------------------*/
#score{
	font-size: 1.4em;
	font-weight: bold;
}
#step-guide{
font-size:1.1em;
}
.interro{
	position:absolute;
	top:65vh;
	left:50%;
	margin-left:-140px;
	width:280px;
	height:40px;
	border-radius:3px;
	border: solid 1px white;
	background-color:#FA9952;
	color:white;
	line-height:40px;
	text-align:center;
	margin-right:20px;
	box-shadow:0 8px 20px rgba(0, 0, 0, 0.2);
}
#suggestion{
	position:absolute;
	top:65vh;
	left:50%;
	margin-left:200px;
	width:280px;
	height:40px;
	border-radius:3px;
	border: dashed 1px white;
	color:whitesmoke;
	line-height:40px;
	text-align:center;
	cursor:pointer;
}
.bonne-resp{
	position:absolute;
	top:65vh;
	left:50%;
	margin-left:-90px;
	width:180px;
	height:40px;
	border-radius:3px;
	border:solid 1px white;
	background-color:#BFD050;
	color:#224B5D;
	line-height:40px;
	text-align:center;
	margin-right:20px;
	box-shadow:0 8px 20px rgba(0, 0, 0, 0.2);
}
.mauvaise-resp{
	position:absolute;
	top:65vh;
	left:50%;
	margin-left:-180px;
	width:360px;
	height:40px;
	border-radius:3px;
	border:solid 1px white;
	background-color:#DB424E;
	color:white;
	line-height:40px;
	text-align:center;
	margin-right:20px;
	box-shadow:0 8px 20px rgba(0, 0, 0, 0.2);
}
#propositions-container{
	position:absolute;
	top:75vh;
	left:50%;
	margin-left:-650px;
	grid-template-columns:20% 20% 20% 20% 20%;
}
.prop-btn, .prop-btn-false{
	width:240px;
	height:40px;
	border-radius:3px;
	background:white;
	margin:10px;
	line-height:40px;
	text-align:center;
	color:#224B5D;
	cursor:pointer;
	box-shadow:0 8px 20px rgba(0, 0, 0, 0.2);
	transition:background 0.2s ease;
}
.prop-btn-ok{
	width:240px;
	height:40px;
	border-radius:3px;
	background-color:#BFD050;
	margin:10px;
	line-height:40px;
	text-align:center;
	color:#224B5D;
}
.prop-btn-done{
	width:240px;
	height:40px;
	border-radius:3px;
	background-color:#9AB9CB;
	color:whitesmoke;
	margin:10px;
	line-height:40px;
	text-align:center;
	cursor:not-allowed;
	pointer-events: none;
}
.prop-btn:hover, .prop-btn-false:hover{
	background:#FA9952;
	color:white;
}
/* ------------------- Rubrique N3 - Free anim -------------------*/
#steps-help{
	width:220px;
	height:50px;
	line-height:50px;
	border:dashed 1px white;
	border-radius:3px;
	text-align:center;
	cursor:pointer;
	visibility:hidden;
}
#steps-help:hover{
	border: solid 1px #FA9952;
	border-radius:3px;
}
.nohelp{
	background: transparent;
	color:white;
	transition: background 0.2s ease;
}
.shelp{
	color:white;
	background: #FA9952;
	border-radius:3px;
	border:solid 1px white;
	transition: background 0.2s ease;
}
.valid{
	position:absolute;
	top:80vh;
	left:50%;
	margin-left:-170px;
	width:340px;
	height:40px;
	background:#FA9952;
	border-radius:3px;
	text-align:center;
	line-height:40px;
	font-size:1.1em;
	box-shadow:0 8px 20px rgba(0, 0, 0, 0.2);
	cursor:pointer;
	transition:background, transform, 0.2s ease;
}
.valid:hover{
	transform: scale(1.1);
}
.parfait{
	position:absolute;
	top:80vh;
	left:50%;
	margin-left:-63px;
	width:126px;
	height:40px;
	background:#BFD050;
	border-radius:3px;
	line-height:40px;
	text-align:center;
	font-size:1.1em;
	box-shadow:0 8px 20px rgba(0, 0, 0, 0.2);
	transition: background 0.2s ease;
}
#reco-container{
	position:absolute;
	top:78vh;
	left:50%;
	width:720px;
	margin-left:-360px;
	//grid-template-columns: 79% 14%;
	//grid-gap: 3%;
	justify-content: space-between;
	background-color:white;
	border-radius:3px;
	color:#224B5D;
	padding:10px;
	line-height:30px;
	font-size: 1.2em;
	box-shadow:0 8px 20px rgba(0, 0, 0, 0.2);
}
#materiel-container, #materiel-cache{
	position:absolute;
	top:60vh;
	left:50%;
	margin-left:-210px;
	width: 420px;
	grid-template-columns: 22% 22% 22% 22%;
	grid-gap: 4%;
}

.device-container, .device-cache-container{
	display:flex;
	flex-direction:column;
	align-items:center;
	text-align:center;
}
.device-label{
	margin-top:12px;
	background-color: #224B5D;
	color:white;
	font-size:1.1em;
	padding:3px 5px;
	border-radius:3px;
	box-shadow:0 8px 20px rgba(0, 0, 0, 0.2);
	transition: background 0.2s ease;
}
.device-label-cache{
	margin-top:12px;
	background-color: #9AB9CB;
	color:white;
	font-weight:400;
	font-size:1.1em;
	padding:3px 5px;
	border-radius:3px;
	transition: background 0.2s ease;
	z-index:1;
}
#guide, #guide-cache{
	background-image:url("media/device-icon/guide-icon.png");
}
#ballon, #ballon-cache{
	background-image:url("media/device-icon/ballon-icon.png");
}
#stent, #stent-cache{
	background-image:url("media/device-icon/stent-icon.png");
}
#inflateur, #inflateur-cache{
	background-image:url("media/device-icon/inflateur-icon.png");
}
.materiel-btn{
	background-size:cover;
	background-position: center;
	background-repeat: no-repeat;
	height:80px;
	width:80px;
	background-color:#224B5D;
	border-radius:50px;
	border:solid 3px white;
	box-shadow:0 8px 20px rgba(0, 0, 0, 0.2);
	cursor: pointer;
	transition: transform 0.3s ease;
}
.materiel-btn-cache{
	background-size:cover;
	background-position: center;
	background-repeat: no-repeat;
	height:80px;
	width:80px;
	border-radius:50px;
	background-color:#496278;
	border:solid 3px #9AB9CB;
	z-index:1;
}
.materiel-btn:hover{
	transform:scale(1.1);
}
.com-subtitle{
	display:inline-block;
	background:linear-gradient(135deg, #ff5f6d, #ffc371);
	border-radius:3px;
	color:white;
	padding:0 5px;
	margin-bottom: 10px;
}
/* ---------- Rubrique Decouverte materiel ----------------------*/
.materiel-btn-discover{
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
	height:80px;
	width:80px;
	background-color:#224B5D;
	border-radius:50px;
	border:solid 3px #BFD050;
	box-shadow:0 8px 20px rgba(0, 0, 0, 0.2);
	cursor: pointer;
	transition: transform 0.3s ease;
}
.materiel-btn-discover:hover{
	transform:scale(1.1);
}
.device-label-discover{
	margin-top:12px;
	background-color:#BFD050;
	color:#224B5D;
	font-weight:bold;
	font-size:1.1em;
	padding:3px 5px;
	border-radius:3px;
	box-shadow:0 8px 20px rgba(0, 0, 0, 0.2);
	transition:background 0.2s ease;
}
#device-compo-container{
	position:absolute;
	top:30vh;
	left:50%;
	margin-left:-230px;
	width:460px; 
	height:40px;
	display:grid;
	grid-template-columns: 32% 32% 32%;
	grid-gap:2%;
}
.device-compo-btn, .atherome-compo-btn{
	background-color:#224B5D;
	color:white;
	border-radius:5px;
	line-height:40px;
	text-align: center;
	border:solid 2px white;
	box-shadow:0 8px 20px rgba(0, 0, 0, 0.2);
	cursor:pointer;
	transition: transform 0.3s ease;
}
.device-compo-btn:hover, .atherome-compo-btn:hover{
	transform:scale(1.05);
}
.device-compo-btn-actif, .atherome-compo-btn-actif{
	background-color:#224B5D;
	color:#BFD050;
	border-radius:5px;
	line-height:40px;
	border:solid 2px #BFD050;
	text-align: center;
	box-shadow:0 8px 20px rgba(0, 0, 0, 0.2);
	cursor:pointer;
	transition: transform 0.3s ease;
}
#device-descrip-container, #atherome-descrip-container, #paroi-descrip-container{
	position:absolute;
	top:72vh;
	left:50%;
	width:820px;
	margin-left:-410px;
	background-color:white;
	border-radius:3px;
	color:#224B5D;
	padding:10px;
	line-height:30px;
	font-size: 1.2em;
	box-shadow:0 8px 20px rgba(0, 0, 0, 0.2);
}
/* ---------- Rubrique plaque d'atherome ----------------------*/
#atherome-compo-container{
	position:absolute;
	top:15vh;
	left:50%;
	margin-left:-200px;
	width:400px; 
	height:40px;
	display:flex;
	justify-content: space-between;
}
#atherome-compo, #artere-compo{
	width:180px;
}
#paroi-compo-container{
	position:absolute;
	top:21vh;
	left:50%;
	margin-left:-160px;
	flex-direction:column;
}
.paroi-compo-btn{
	background-color:#224B5D;
	color:white;
	border-radius:25px;
	line-height:30px;
	padding:0 10px;
	margin:5px 0;
	text-align: center;
	border:solid 1px white;
	box-shadow:0 8px 20px rgba(0, 0, 0, 0.2);
	cursor:pointer;
	transition: transform 0.3s ease;
	z-index:1;
}
.paroi-compo-btn:hover{
	transform: scale(1.05);
}
.paroi-compo-btn-actif{
	background-color:#224B5D;
	color:#BFD050;
	border-radius:25px;
	line-height:30px;
	padding:0 10px;
	margin:5px 0;
	text-align: center;
	border:solid 1px #BFD050;
	box-shadow:0 8px 20px rgba(0, 0, 0, 0.2);
	cursor:pointer;
	transition: transform 0.3s ease;
	z-index:1
}
.paroi-compo-btn-descrip{
	background-color:#224B5D;
	color:white;
	border-radius:25px;
	line-height:30px;
	padding:0 10px;
	margin:5px 0;
	text-align: center;
}
/* ------------------- grid css -----------------*/
.btn-grid{
    position:absolute;
    top:2%;
    right:1%;
    display:grid;
    grid-template-columns: auto auto auto auto;
    grid-gap: 20px;
}
/* ------------------ menu, Help et fullscreen levels css ------------------*/
.container{
    background:rgb(241,241,241,1);
    padding:15px;
    border-radius:5px;
}
#check-levels-container{
	position:absolute;
    top:2%;
    left:8%;
	font-size:1.1em;
}
#levels{
	display:flex;
}
#warning{
	position:absolute;
	top:0;
	left:0;
	width:320px;
	margin: 10vh 0 0 30px;
	color:#224B5D;
	z-index:101;
}
#modal{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color: rgb(0,0,0,0.7);
	display:none;
	z-index:98;
}
#aide{
    position:absolute;
    top:20%;
    left:30%;
    width:40%;
    display:flex;
    flex-direction: column;
    align-items:center;
	z-index:99;
}
#reglages{
	display:flex;
	flex-direction:column;
	justify-content: space-between;
	border: solid 1px white;
	border-radius : 15px;
	position:absolute;
    top:20%;
    left:35%;
    width:30%;
	color:#224B5D;
	z-index:99;
}
#hlp-btn-container{
	width:100%;
	height:120px;
	display:flex;
	justify-content: space-around;
}
#mouse-container{
	width:100%;
	display:flex;
	justify-content: space-around;
}

.hlp-title{
	margin-top:10px;
	color:#224B5D;
	font-size:0.8em;
}
.hlp-btn-icone{
	width:38px;
	height:38px;
	display:flex;
	flex-direction:column;
	align-items: center;
}
.hlp-mouse, .hlp-tactile{
	flex-direction:column;
	text-align:center;
	width:50%;
}
.invalid-level-btn{
	width:47px;
    height:47px;
    border-radius:28px;
    background-color: #B2B2B2;
	color:#D7D7D7;
	text-align: center;
	line-height: 47px;
	margin:0 5px 0 0;
	border: solid 3px #D7D7D7;
	z-index:3;
}
.valid-level-btn-aide{
	width:36px;
    height:36px;
    border-radius:28px;
    background-color: #00BEB0;
	color:white;
	text-align: center;
	line-height: 36px;
	margin:0 5px 0 0;
	border: solid 1px white;
	z-index:3;
}
.valid-level1-btn{
	width:47px;
    height:47px;
    border-radius:28px;
    background-color: #00BEB0;
	color:white;
	text-align: center;
	line-height: 47px;
	margin:0 5px 0 0;
	border: solid 3px white;
	z-index:3;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}
.valid-level2-btn{
	width:47px;
    height:47px;
    border-radius:28px;
    background-color: #FA9952;
	color:white;
	text-align: center;
	line-height: 47px;
	margin:0 5px 0 0;
	border: solid 3px white;
	z-index:3;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}
.valid-level3-btn{
	width:47px;
    height:47px;
    border-radius:28px;
    background-color:#F55165;
	color:white;
	text-align: center;
	line-height: 47px;
	margin:0 5px 0 0;
	border: solid 3px white;
	z-index:3;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}
.invalid-diplome-btn{
    height:47px;
    border-radius:28px;
    background-color: #B2B2B2;
	color:#D7D7D7;
	text-align: center;
	line-height: 47px;
	padding: 0 10px;
	border: solid 3px #D7D7D7;
	z-index:3;
}
.valid-diplome-btn{	
    height:47px;
    border-radius:28px;
    background-color: #BFD050;
	text-align: center;
	color:#224B5D;
	line-height: 47px;
	padding: 0 10px;
	border: solid 3px white;
	cursor:pointer;
	z-index:3;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
	transition: transform 0.2s ease;
}
.valid-diplome-btn:hover{
	transform:scale(1.05);
}
#downloadlink{
	text-decoration:none;
}
a.disabled{
	pointer-events: none;
	color:#D7D7D7;
}
.btn{
    width:50px;
    height:50px;
    border-radius:5px;
    background-color: rgb(241,241,241,0.3);
    cursor: pointer;
	z-index:3;
} 
.btn:hover{
    background-color: rgb(237,225,213, 0.5);
}
.setting-btn{
    width:50px;
    height:50px;
    border-radius:5px;
	border:solid 1px #224B5D;
    background-color: white;
    cursor: pointer;
	z-index:3;
}
.setting-btn:hover{
    background-color: rgba(255,223,170,1.00);
}
.setting-container{
	display:flex;
	align-items:center;
	gap:20px;
}
.slider{
	width:100%;
	cursor:pointer;
	accent-color:#224B5D;
}
#menu-container{
	position:absolute;
    top:2%;
    left:1%;
	text-align: center;
	z-index: 8;
}
.icon-wh{
    width:38px;
    height:38px;
	margin:6px;
}
.m-icon-wh{
	width:36px;
    height:36px;
	margin:3px;
}
#fs-img{
    width:34px;
    height:34px;
    margin:8px;
}
/* --------------- credits css --------------------------*/
#fili{
	width:180px;
	margin:20px auto;
    display:grid;
    grid-template-columns:auto auto;
    grid-gap:5px;
    background:rgb(241,241,241,0.3);
    padding:7px;
    border-radius:5px;
}
#fili a{
    text-decoration: none;
    color: white;
}
#fili:hover{
    background-color:#BFD050;
}