@font-face {
	font-family: "MyRegular";
	src: url('../police/child.ttf');
}

@font-face {
	font-family: "Fight";
	/* src: url('../police/FIGHT.ttf'); */
	src: url('../police/BattleBots.ttf');
	/* src: url('../police/DogfightItalic.ttf'); */
}

@font-face {
	font-family: 'digital';
	font-style: normal;
	font-weight: bold;
	src: local('DS-DIGI'), url('../police/DS-DIGIB.ttf') format("truetype");
}

@font-face {
	font-family: "handwriting";
	font-style: normal;
	font-weight: normal;
	src: local('Handwritingfont.ttf'), url('../police/Handwritingfont.ttf') format("truetype");
}

@font-face {
	font-family: "grandhotel";
	font-style: normal;
	font-weight: normal;
	src: local('GrandHotel-Regular.ttf'), url('../police/GrandHotel-Regular.ttf') format("truetype");
}

body {
	color: #000;
	/*background:url('../images/test-fond-mini.png');*/
	background: url('../images/fond-du-jeu.png');
	background-repeat: repeat;
	background-size: cover;
}

#content {
	background: rgb(251,231,168);
	background: linear-gradient(145deg, #fbe7a8 50%, #f2d37c 100%);
	border: 3px solid #fff9e9;
	border-right: 5px solid #d8a235;
	border-bottom: 5px solid #d8a235;
	border-radius: 10px;
	position: absolute;
	/*background: url('../images/cadre-jaune.png');
	background-size: 100% 100%; /* et pas cover */
	/*width: 100%;
	height: auto;*/
	/*margin: 12% 8%;*/
	margin: 8%;
	padding: 20px 5px;
	width: 84%;
}

a {
    color: #CC9900;
}

b {
	font-size: 3vmax;
}

#warning{
	display: none;
}

#listOfRules{
	display: none;
	padding:2rem;
}

#intro{
	display: none;
}

.largebutton{
	max-width: 50%;
}

.chat-cache-message{
	background-color: #CC9900;
}


/********* MARGES ***********/
.mr-0{
	margin-right: 0 !important;
}
.mr-1{
	margin-right: .25rem !important;
}
.mr-2{
	margin-right: .50rem !important;
}
.mr-3{
	margin-right: 1rem !important;
}
.ml-0{
	margin-left: 0 !important;
}
.ml-1{
	margin-left: .25rem !important;
}
.ml-2{
	margin-left: .50rem !important;
}
.ml-3{
	margin-left: 1rem !important;
}
.mx-0{
	margin-right: 0 !important;
	margin-left: 0 !important;
}
.mx-1{
	margin-right: .25rem !important;
	margin-left: .25rem !important;
}
.mx-2{
	margin-right: .50rem !important;
	margin-left: .50rem !important;
}
.mx-3{
	margin-right: 1rem !important;
	margin-left: 1rem !important;
}
.my-0{
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}
.my-1{
	margin-top: .25rem !important;
	margin-bottom: .25rem !important;
}
.my-2{
	margin-top: .50rem !important;
	margin-bottom: .50rem !important;
}
.my-3{
	margin-top: 1rem !important;
	margin-bottom: 1rem !important;
}
.mt-0{
	margin-top: 0 !important;
}
.mt-1{
	margin-top: .25rem !important;
}
.mt-2{
	margin-top: .50rem !important;
}
.mt-3{
	margin-top: 1rem !important;
}
.mb-0{
	margin-bottom: 0 !important;
}
.mb-1{
	margin-bottom: .25rem !important;
}
.mb-2{
	margin-bottom: .50rem !important;
}
.mb-3{
	margin-bottom: 1rem !important;
}
.m-0{
	margin: 0 !important;
}
.m-1{
	margin: .25rem !important;
}
.m-2{
	margin: .50rem !important;
}
.m-3{
	margin: 1rem !important;
}
.float-right{
	float: right;
}
.float-left{
	float: left;
}


.p-0{
	padding: 0 !important;
}

.w100{
	width: 100%;
}
.w-80{
	width: 80%;
}
.h100{
	height: 100%;
	max-height: 100%;
}
.pos-abs{
	position: absolute;
}
.pos-rel{
	position: relative;
}
.top-0{
	top:0%;
}

.chamrousse-warning{
	background-color: rgba(240, 173, 78, 0.3);
}
.text-center{
	text-align: center !important;
}

.radius-15{
	border-radius: 15px !important;
}

.base-POI{
}
.list-POI{
}
.flip{
	-webkit-transform: scaleX(-1);
	-moz-transform: scaleX(-1);
	-o-transform: scaleX(-1);
	transform: scaleX(-1);
}


/* LOADER AJAX */

#loading{
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	background-color: transparent;
	height: 100%;
	width: 100%;
	z-index: 50000;
}

.loader{
	display: block;
	position: relative;
	max-width: 50%;
	max-height: 50%;
	margin: auto;
	top: 20%;
}


/* FLEXBOX */

.colflex{
	display: flex;
	flex-direction: column;
	justify-content: center;
	justify-content: space-evenly;
	align-items: center;
	width: 100%;
}

.rowflex{
	display: flex;
	flex-direction: row;
	justify-content: center;
	justify-content: space-evenly;
	align-items: center;
	width: 100%;
}

.wrap{
	flex-wrap: wrap;
}

.nowrap{
	flex-wrap: nowrap;
}

/* AFFICHAGE MISSION */
.visuel_mission{
	float: left;
	max-width: 50%;
}

.text-mission{
	text-align: justify;
	margin-top: 10%;
	margin-left: 5%;	
	margin-right: 5%;
	font-size: 3vmax;
}


/* PAGE START */
.start-body{
	
}

.titre-jeu{
	font-family: grandhotel;
}

.start-header {
	display: flex;
	justify-content: space-between;
	position: relative;
	overflow: hidden;
	padding: 6px 0 30px 0;
}

.start-title{
	width: 100%;
	margin-right: 1rem;
	font-size: 1.5rem;
}
.start-city{
	margin: 0;
}
.logo-invert{
	filter: invert(1);
}
.start-logo{
	width: 80%;
	max-width: 400px;
}
.rond-logo{
	position: absolute;
	top: -120px;
	right: -120px;
	width: 240px;
	border: #C90 solid; /* dans le logo c'est plutôt #B37A22 */
	border-radius: 100%;
	height: 240px;
	background-color: #C90;
	z-index: -20;
}
.start-bonjour{
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: 1.1rem;
}


/* BANDE D'INFORMATION POUR LES VALIDATIONS DE MISSION */
#resultat {
	/* position: absolute; */
	/* bottom: 20%; */
	display: none;
	text-align: center;
	margin-top: 10px;
	margin-bottom: 10px;
}

.bouton_head {	
	background-image: url("./images/button.png");
	width:100%;	
}

/* MENU */
.button {
	display: inline-block;
	text-align: center;
	vertical-align: middle;
	padding: 15px 10px 15px 10px;
	border-radius: 8px;
	background: rgb(249,175,175);
	background: linear-gradient(90deg, rgba(249,175,175,1) 0%, rgba(238,120,140,1) 100%);
	text-shadow: #171d5a 1px 1px 1px;
	font: normal normal bold 20px arial;
	color: #ffffff;
	text-decoration: none;
	width: 100%;
	font-size: 1.1rem;
}
.button:active {
	background: rgb(6,80,80);
	background: linear-gradient(90deg, rgba(6,80,80,1) 0%, rgba(17,135,115,1) 100%);
}
.button:hover{
	text-decoration: none;
}
.font-bold{
	font-weight: bold;
}

.fontbutton{
	font-size: 1.1rem;
}

.menu{
	padding: 10px 5px 15px 5px;
	margin: 0;
}

/* BOUTON CORPS */
.bouton-corps, .chooseLieux {
	text-align: center;
	vertical-align: middle;
	/* padding: 15px 10px 15px 10px;     */
	border-radius: 8px;
	background: rgb(249,175,175);
	/*background: linear-gradient(90deg, rgba(249,175,175,1) 0%, rgba(238,120,140,1) 100%);*/
	background: linear-gradient(90deg, #ff9090 0%, #f96e6e 75%);
	text-shadow: #171d5a 1px 1px 1px;
	/* font: normal normal bold 4vmax arial; */
	/* font-size: 3vmax; */
	font-size: 1em;
	color: #ffffff;
	text-decoration: none;
	/* width:100%; */
}

.bouton-corps:active, .chooseLieux:active {
	background: rgb(6,80,80);
	background: linear-gradient(90deg, rgba(6,80,80,1) 0%, rgba(17,135,115,1) 100%);
}

.font-inherit{
	font-size: inherit;
}


/* CARTE DU JEU */
.map{
	width: 98%;
	margin-left: 1%;
	border:5px solid #737F9C;
}
.map-e1{
	position: absolute;
	top: 0%;
}

.carte-active{
	color: white;
	text-align: center;
    vertical-align: middle;
    /* padding: 15px 10px 15px 10px;     */
    border-radius: 8px;
    background: #82ffd5;
    background: -webkit-gradient(linear, left top, left bottom, from(#82ffd5), to(#379375));
    background: -moz-linear-gradient(top, #82ffd5, #379375);
    background: linear-gradient(to bottom, #82ffd5, #379375);
    -webkit-box-shadow: #006c37 0px 0px 40px 0px;
    -moz-box-shadow: #006c37 0px 0px 40px 0px;
    box-shadow: #006c37 0px 0px 40px 0px;
    text-shadow: #171d5a 1px 1px 1px;
    /* font: normal normal bold 4vmax arial; */
    color: #ffffff;
    text-decoration: none;
	padding-bottom: 5px;
}

.changemap{
	color: white;
	text-align: center;
    vertical-align: middle;
    /* padding: 15px 10px 15px 10px;     */
    border-radius: 8px;
    background: #CC9900;
    background: -webkit-gradient(linear, left top, left bottom, from(#CC9900), to(#663300));
    background: -moz-linear-gradient(top, #CC9900, #663300);
    background: linear-gradient(to bottom, #CC9900, #663300);
    -webkit-box-shadow: #CC9900 0px 0px 40px 0px;
    -moz-box-shadow: #CC9900 0px 0px 40px 0px;
    box-shadow: #CC9900 0px 0px 40px 0px;
    text-shadow: #171d5a 1px 1px 1px;
    /* font: normal normal bold 4vmax arial; */
    color: #ffffff;
    text-decoration: none;
	padding-bottom: 5px;
}

.cercleSurPlan{
	border-radius:100%;
	width: 6%;
	height: 3.5%;
	color : black;
	text-align:center;
	position: absolute;
	opacity: 0.7;
}


/******** GESTION DES ETAGES *********/
.etage{
	/* position: absolute;
	bottom: 0%; */
}

.etage-0{
	position: relative;
}
.etage-3 .fond-dialogue {
	z-index: 2;
}
.etage-3 .perso-dialogue{
	z-index: 2;
}
.etage-3 .dialogue{
	z-index: 2;
}

.list-POI img{
	z-index:1000;
}

/******** POI tête de chat ********/
.poi-image{	
	width: 10%;
	height: 5%;		
	position: absolute;
	opacity: 1;
	z-index: 100;
}
.poi-barbeuk{
	width: 100%;
	position: absolute;
	opacity: 1;
	z-index: 100;
}

.poi-medaillon-final{
	width: 22%;
	height: 8%;
	opacity: 0;
}

/******** POI spécifiques ********/
.poi-lieu-sono{
	width: 38%;
	height: 17%;
	opacity: 0.4;
	background-color: #FFFFFF;
}

.poi-bouton{
	z-index:2;
	transform: translate(-50%);
}

.text-black{
	color: black;
}

.link {
	background: rgb(249,175,175);
	background: linear-gradient(90deg, rgba(249,175,175,1) 0%, rgba(238,120,140,1) 100%);
}
.link-site{
	display: block;
	text-align: right;
	padding: 6px;
	border-radius: 25px 0px 0px 25px;
}
.link-avis{
	display: block;
	padding: 6px;
	border-radius: 0px 25px 25px 0px;
}

/******** Phylactere ********/
.phylactere-chatkira{
	top: 8%;
	width: 56%;
	left: 30%;
	overflow: hidden;
	text-align : center;
}

.phylactere-chatrabia{
	top: 8%;
	width: 56%;
	left: 30%;
	overflow: hidden;
	text-align : center;
}

.phylactere-chatrade{
	top: 8.5%;
	width: 56%;
	left: 20%;
	overflow: hidden;
	text-align : center;
	font-size: 85%;
}

.phylactere-chatraon{
	top: 8%;
	width: 56%;
	left: 30%;
	overflow: hidden;
	text-align : center;
}

.pseudo-phy{
	top: 6%;
	width: 96%;
	margin-left: 2%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 2000;
}

/******** Chemin pattes de chat *********/
.pattes4{
	width: 8%;
	height: 7%;
}

/******** POI next boite de dialogue ********/
.next-image {
	width: 40px;
	/*height: 4.5%; */
	/* position: absolute; */
	opacity: 1;
	filter: drop-shadow(2px 2px 1px #3A312A);
}

.bouton-miaoui{
	width: 37%;
	height: auto;
}

.geant{
	width: 15%;
	height: 22.5%;
}

/* Rond des missions sur la carte */
/* Mission active - bleu clair */
.point_actif{ 
	background:#7DFCFC;
}
/* Mission terminée - gris clair */
.point_fini{
	/* background: #00FF00; */
	background-color: #737F9C;
}
/* Mission active focus - bleu clair */
.point_focus{
	background-color: #7DFCFC;
}

/********* Eléments placés dans le bloc dialogue ***********/

/* CORPS - SAISI DES REPONSES */
.answer{
	width: 50%;
	margin-left: 25%;
	margin-top: 6%;
}

.langue-au-chat2{	
	/* margin-left: 11%; */
	top: 81%;
}

.langue-au-chat{
	/* margin-left: 11%; */
	top: 107%;
}

.manque-medaillon{
	margin-top: 20px;
	top: 88%;
}


/******************** Textes dialogue **********************/
.dialogue {
	/* position: absolute;
	width: 90%;
	margin-left: 5%;
	top: 74.5%;
	font-size: 1.1em;
	z-index: 1; */
	/*position: relative;
	width: 90%;
	margin-left: 10%;
	font-size: 1.1em;
	z-index: 1;
	top: -200px; */
	position: relative;
	font-size: 1.1rem;
	z-index: 1;
	padding: 0px 5px;
}
.dialogue p{
	text-align: center;
}



.fond-dialogue{
	position: absolute;
	width: 98%;
	margin-left:1%;
	bottom: 0%;
	left:0%;
	z-index: 1;
}

.perso-dialogue{
	position: absolute;
	bottom: 26%;
	width: 60%;
	z-index: 1;
}

.megaphone {
	width: 40%;
	transform: scaleX(-1);
}

.telenoel {
	
}

.lutingenieur{
	width:50%;
}

.base_image{
		
}

.perso-gif-chatkira{
	bottom: 24.5%;
	left:20%;
}

.image_right{
	right: 3%;
}

.image_chafoumi{
	width: 20%;
	height: auto;
}

.perso-chatman{	
	width: 90%;
}

.perso-chatgeperche{
	width: 50%;
	height: auto;
}

.perso-chatfoumi{
	width: 30%;
	height: auto;
}

.perso-chatkira{
	width: 50%;
	height: auto;
}

.dialog_narrateur{
	font-style : italic;
}

.dialog_cri{
	font-weight: bold;
}

.dialog_chat{
	
}

.dialog_nom_chat{
	font-weight: bold;
}

.image-variation{
	position: absolute;
	/* z-index: 10; */
}

.div-variation-17, .div-variation-25{
	width: 100%;
	overflow: hidden;
}
.div-variation-17 img, .div-variation-25 img{ /* logo super chat man */
	position: absolute;
	/* width: 100%;
	top: 20%;
	left: 0%; */
	width: 40%;
	left: 45%;
	top: 2%;
	transform: rotate(25deg);
}
.div-variation-24 img{
	position: absolute;
}

.logo-scm{
	left: 44% !important;
	top: 4% !important;
}

.button-variator {
  padding: 3px 9px;
  background-color: #CC9900; /* Couleur de fond du bouton */
  color: #fff; /* Couleur du texte */
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.button-variator:hover {
  background-color: #630; /* Couleur de fond du bouton au survol */
}

.button-variator:focus {
  outline: none; /* Supprimer la bordure de focus */
}

.button-variator:active {
  transform: scale(0.95); /* Effet de réduction du bouton lorsqu'il est cliqué */
}

.poi-fin-lge{
	width: 22%;
	height: 22%;
}

#cadre-jeu-chafumi{
	background: rgb(1,147,249);
	background: linear-gradient(110deg, rgba(1,147,249,1) 0%, rgba(77,77,77,0.20770314961922265) 50%, rgba(198,0,43,1) 100%);
	position: fixed;
	z-index: 99999999999;
	top: 25%;
	width: 80%;
	margin-left: 10%;
	border: 1px solid;
	overflow: hidden;
	height: auto;
}
#cadre-jeu-chafumi img{
	margin-top: 20px;
}
#cadre-jeu-chafumi .fond-vs{
	position: relative;
	width: 100%;
	display: block;
	margin: 0;
}
#cadre-jeu-chafumi .left{
	width: 50%;
	transform: rotate(315deg);
	position: absolute;
	top: 0%;
	left: -5%;
}
#cadre-jeu-chafumi .right{
	width: 50%;
	position: absolute;
	top: 0%;
	right: -5%;
	transform: scaleY(-1) rotate(180deg);
}


/* L'effet Néon vient de là :    https://yaroslavweb.github.io/Neon-Generator/     */
/* voir aussi  
		https://medium.com/@reneecruz/css-animations-let-your-text-glow-1b00408e9414
		https://www.w3schools.com/howto/howto_css_glowing_text.asp
		https://codepen.io/reneecruz/pen/xxwjMye
 */

.perdu {
	animation: perduAnim 1s alternate-reverse infinite;
	color: #FFF;
	font-family: Fight, 'Warnes', Cursive;
	font-size: 3.5em;
}
@keyframes perduAnim {
	/* from {
		text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
	}
	to {
		text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
	} */
	from {
		text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60000, 0 0 40px #e60000, 0 0 50px #e60000, 0 0 60px #e60000, 0 0 70px #e60000;
	}
	to {
		text-shadow: 0 0 20px #fff, 0 0 30px #ff4d4d, 0 0 40px #ff4d4d, 0 0 50px #ff4d4d, 0 0 60px #ff4d4d, 0 0 70px #ff4d4d, 0 0 80px #ff4d4d;
	}
}

.egalite {
    animation: egaliteAnim 1s alternate-reverse infinite;
	color: #FFF;
	font-family: Fight, 'Warnes', Cursive;
	font-size: 3.5em;
}
@keyframes egaliteAnim {
	/* from {
		text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #ADB502, 0 0 40px #ADB502, 0 0 50px #ADB502, 0 0 60px #ADB502, 0 0 70px #ADB502;
	}
	to {
        text-shadow: 0 0 20px #fff, 0 0 30px #F7FF13, 0 0 40px #F7FF13, 0 0 50px #F7FF13, 0 0 60px #F7FF13, 0 0 70px #F7FF13, 0 0 80px #F7FF13;
	} */
	from {
		text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #ADB502, 0 0 40px #ADB502, 0 0 50px #ADB502, 0 0 60px #ADB502, 0 0 70px #ADB502;
	}
	to {
        text-shadow: 0 0 20px #fff, 0 0 30px #ffd813, 0 0 40px #ffd813, 0 0 50px #ffd813, 0 0 60px #ffd813, 0 0 70px #ffd813, 0 0 80px #ffd813;
	}
}

.gagne {
	animation: gagneAnim 1s alternate-reverse infinite;
	color: #FFF;
	font-family: Fight, 'Warnes', Cursive;
	font-size: 3.5em;
}
@keyframes gagneAnim {
	/* from {
		text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #0296CC, 0 0 40px #0296CC, 0 0 50px #0296CC, 0 0 60px #0296CC, 0 0 70px #0296CC;
	}
	to {
		text-shadow: 0 0 20px #fff, 0 0 30px #7BD9FF, 0 0 40px #7BD9FF, 0 0 50px #7BD9FF, 0 0 60px #7BD9FF, 0 0 70px #7BD9FF, 0 0 80px #7BD9FF;
	} */
	from {
		text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #0296CC, 0 0 40px #0296CC, 0 0 50px #0296CC, 0 0 60px #0296CC, 0 0 70px #0296CC;
	}
	to {
		text-shadow: 0 0 20px #fff, 0 0 30px #56c4ff, 0 0 40px #56c4ff, 0 0 50px #56c4ff, 0 0 60px #56c4ff, 0 0 70px #56c4ff, 0 0 80px #56c4ff;
	}
}

.boucleChafumi{	
	width: 8%;
	height: 4.5%;		
	position: absolute;
	z-index: 2000;
}

.solve-div{
	display: flex;
	justify-content: center;
}

.displayclue{
	display: none;
	background-color: rgba(255, 255, 255, 0.25);
	font-size: 3vmax;
}

.link{
	/* display: inline-block;
	vertical-align: middle;
	border-radius: 50%;
	background-color: green; */
	color: cyan;
	width: max-content;
	text-align: center;
	text-decoration: underline;
	font-style: italic;
	font-size: 3vmax;
}

.direction{
	height: 60px;
	width: 100%;
}

.poche_chien{
	float: right;
	max-width: 49%;
}

.bouton{
	text-align: center;
}
.bouton button{
	z-index:1200;
}
.bouton-variation{
	z-index: 1;
	position: absolute;
	top: 81%;
}
.bouton-variation-15{
	z-index: 2;
	top: 87%;
	width:100%;
}

.div-imageButton{
	position: absolute;
	top: 2%;
	display: flex;
	justify-content: space-around;
	flex-flow: row wrap;
	width: 90%;
	margin-left: 5%;
	z-index:5000;
}

.div-chafumiEnigme{
	position: absolute;
	bottom: 10%;
	display: flex;
	justify-content: space-around;
	flex-flow: row wrap;
	width: 90%;
	margin-left: 5%;
}
.div-chafumiEnigme input{
	width: 26%;
	z-index: 1000;
}


.presentationPrompt{
	padding: 0% 1% 0% 1%;
	font-size: 1.1em;
	background: rgba(0, 0, 0, 0.7);
}

.illustrationPrompt{
	width: 50%;
	float: left;
}

.fond-prompt{
	position: initial;
}

/* Les chats cachés */
#fondcompteur{
	position:absolute;
	width:17%;
	left:80%;
	top:2%;
	z-index:100;
}
#conteneur-compteur{
	display: flex;
	position: absolute;
	z-index: 100;
	width: 95%;
	margin: 5px 0px 0px 0px;
	flex-direction: row-reverse;
}
#cptChat{
	background: url("../images/compteur-chat.png");
	background-size: contain;
	z-index:101;
	width: 42px;
	text-align: center;
}
.chatcache{
	position: absolute;
	z-index: 1000;
}

.chat_cache_vieuxchatge{
	width: 15.7%;	
	position: absolute;
}

/* Chien et distrib : choix du dentier */
.choixdentier{
	/* width: 10%; */
	/* height: 10%; */
	max-height: 100%;
	max-width: 100%;
}
.choixdentier:hover{
	background-color: #24b6ff;
}
.choixdentier:active{
	background-color: #0043f5;
}



/* sonnette paresseux */
.sonnette{
	/*border-radius:100%;*/
	top: 54%;
	left: 35%;
	width:16%;
	height:8%;
	text-align:center;
	position: absolute;
	background-color:rgba(0, 0, 255, 0);
	/* background-color: green; */
	/* opacity: 0.4; */
}

.discussion{
	display: block;
	/* opacity: 0.4; */
	/* background-color: red; */
	position: absolute;
	top: 65%;
	left: 5%;
	width: 86%;
	height: 35%;
	margin: 0px 2.5% 0px 2.5%;
}



/* DRAPEAUx DIRECTION POUR LE St BERNARD */
.text_direction{
	font-size: 4vmax;
	min-height: 30px;
}

/* COULEUR POUR STIC */
.couleur{
	border-radius: 50%;
	height: 40px;
	width: 40px;
}

.couleur-0{ /* RED */
	background-color:#ea3333;
}
.couleur-1{ /* GREEN */
	background-color: #085108;
}
.couleur-2{ /* BLUE */
	background-color: blue;
}
.couleur-3{ /* YELLOW */
	background-color: #dddd42;
}
.couleur-4{ /* VIOLET */
	background-color: #8E3D99;
}
.couleur-5{ /* WHITE */
	background-color: white;
}
.spancouleur{
	border-radius: 50%;
	height: 40px;
	width: 40px;
	display: inline-block;
}
.text_couleur{
	min-height: 45px;
}

.txt_centre {
	text-align:center;
}

/* MORSE */
.morse{
	background-color: white;
}

.point{
	border-radius: 50%;
	width: 50px;
	height: 50px;
}

.tiret{
	border-radius: 30%;
	height: 30px;
	width: 70px;
}

#traduction{
	font-size: 3vmax;
}
#code_visuel{
	font-size: 3vmax;
}


/** DIGICODE */

.digicode {
	border: solid 1px  #566573;
	background-color: grey;
	/* background: linear-gradient(to top right, #757575 16%, #c6c4c4 83%); */
	background: linear-gradient(to bottom right, #747474 0%, #313131 70%);
	margin: auto;
	margin-top: 15px;
	width: 250px;
}

.bouton_digicode{
	/* background: linear-gradient(to top right, #757575 27%, #c6c4c4 56%); */
	background: linear-gradient(to bottom left, #747474 0%, #313131 70%);
	width:50px;
	height: 50px;
	color:#FFF;
	display:block;
	text-decoration:none;
	margin: 10px 0px 3px 10px;
	border-radius:50%;
	border:solid 1px #bdcce3;
	text-align:center;
	/* padding:20px 30px; */
	-webkit-transition: all 0.1s;
	-moz-transition: all 0.1s;
	transition: all 0.1s;
	-webkit-box-shadow: 0px 5px 0px #663300; /* #404040*/
	-moz-box-shadow: 0px 5px 0px #663300;
	box-shadow: 0px 5px 0px #663300;
	font-size: 30px;
	text-shadow:0 0 3px #53efed, 0 0 7px #53efed, 0 0 20px #53efed;
	color:#53efed; /* bleu plus flashy 53efed //// Bleu d'origine : 408bff */
}

.bouton_digicode:active{
	border:solid 1px #FFD100;
    -webkit-box-shadow: 0px 2px 0px #663300;
    -moz-box-shadow: 0px 2px 0px #663300;
    box-shadow: 0px 2px 0px #663300;
    position:relative;
    top:7px;
	text-shadow:0 0 2px #FFD100,0 0 30px #FFD100,0px 0px 5px #FFFFFF, 0 0 150px #FFFFFF;
	color:#FFFFFF;
}

.ecran{
	display: block;
	width: 100%;
	height: 40px;
	text-align: center;
	font-family: digital;
	font-size: 18pt;
	border: none;
	background: #222;
	color: #fff;
	text-shadow: 2px 0 rgba(255, 0, 0, 0.9), -2px 0 rgba(0, 0, 255, 0.9);
}

.effet_ecran {
	position: relative;
	top: -80px;
	left: 16px;
	height: 75px;
	width: 215px;
	/* position: absolute; */
	/* top: 95px; */
	/* left: 23px; */
	/* right: 23px; */
	/* height: 75px; */
	background-image: linear-gradient(to top, rgba(255, 255, 255, 0.2) 33.33333%, rgba(255, 255, 255, 0.4) 33.33333%, rgba(255, 255, 255, 0.4) 66.66666%, rgba(255, 255, 255, 0.6) 66.66666%), linear-gradient(to right, rgba(255, 0, 0, 0.7) 33.33333%, rgba(0, 255, 0, 0.7) 33.33333%, rgba(0, 255, 0, 0.7) 66.66666%, rgba(0, 0, 255, 0.7) 66.66666%);
	background-size: 3px 3px;
	mix-blend-mode: multiply;
	/* display: block; */
}

.marge_digit{
	margin: 0% 15% 0% 15%;
}

.pave_bouton{
	position: relative;
	left: -5px;
	top: -70px;
	margin-bottom: -55px;
}


/* HORLOGE PO ISSON */
.saisie_horaire{
	z-index: 1000;
	position: relative;
	width: 50px;
}

.aiguille{
	z-index: 100;
	position: absolute;
	top: 0px;
	left: 0px;
}

.horloge{
	border-radius: 50%;
	background-color: white;
	/* display: block; */
	/* width: 102px; */
	/* margin: auto; */
	position: absolute;
	top: 0px;
	left: 0px;
}

.conteneur_horloge{
	position: relative;
	width: 102px;
	height: 102px;
	margin: 0 auto;
}

.img_poisson{
	max-width: 100%;
	height: 30%;
}

.readonly{
	background-color: grey;
	border: none;
}


/* LETTRE DES KIDNAPPEURS */

.lettre{
	position: relative;
	background-image: url("../images/paper-test.jpg");
	background-repeat: repeat;
	margin: 5px 5% 10px 5%;
	color: black;
	padding: 10px 2% 60px 2%;
	font-family: handwriting;
	font-size: 5vmax;
	line-height: 0.9;
}

.lettre-titre{
	font-weight: bold;
	position: relative;
	z-index: 20;
}

.lettre-corps{
	margin-left: 15px;
	position: relative;
	z-index: 20;
}

.lettre-image{
	width: 80px;
	/* position: absolute; */
	/* bottom: 15px; */
	/* z-index: 15; */
}

.lettre-ours{
	/* left: 15%; */
	margin-right: 4%;
}
.lettre-poisson{
	right: 30%;
}
.lettre-empreinte{
	position: absolute;
	bottom: 15px;
	z-index: 15;
	left: 15%;
	width: 85%;
}


/* PAGE HISTOIRE / RESUME */
.resume-content{
	margin-top:10px;
	margin-bottom: 10px;
}

.resume-img{
	max-width: 27%;
	margin: 0 3% 0 3%;
}

.resume-img-xl{
	max-width: 95%;
}

/* VIBROPHONE */
.vibro-potar{
	position: absolute;
	width:16%;
	top: 82.1%;
	transition: transform 0.4s;
}
.vibro-potar-1{
	left: 19%;
}
.vibro-potar-2{
	left: 62.5%;
}

.vibro-on{
	position: absolute;
	width:16%;
	top: 80.5%;
	left: 65%;
}

.vibro-bouton-jauge{
	display: block;
	position: absolute;
	background-color: rgba(0,0,0,0);
	width: 9%;
	height: 6.5%;
	top: 49%;
}
.vibro-moins{
	left: 12%;
}
.vibro-plus{
	left: 78%;
}

.vibro-aiguille{
	display: block;
	position: absolute;
	background-color: rgba(0, 0, 0, 0);
	top: 44.5%;
	left: 25%;
	width: 50%;
	transform: rotate(-59deg);
	transition: transform 0.3s;
}

.vibro-bouton{
	position: absolute;
	width: 10%;
	top: 61.5%;
}
.vibro-bouton-1{
	left: 19%;
}
.vibro-bouton-2{
	left: 32.5%;
}
.vibro-bouton-3{
	left: 46%;
}
.vibro-bouton-4{
	left: 59.4%;
}
.vibro-bouton-5{
	left: 72.6%;
}
.div-sprite{
	position: absolute;
	overflow: hidden;
}
.apparition-chatman{
	top: 36%;
	left: 0%;
	z-index: 900;
}
.sprite{
	position: relative;
}
.wouf{
	text-align: center;
	font-size: 2em;
	font-style: italic;
	font-family: initial;
	display: block;
	margin-top: 15px;
}
.vol-scm{
	top: 0%;
	left: 0%;
	z-index: 900;
}
.atterrissage-scm{
	top: 42%;
	left: 0%;
	z-index: 900;
}

/***** CHATKIRA *****/
/* party cones */
.party-cones {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* z-index: 9999; */
}

.cone {
  position: absolute;
  width: 80%;
  height: 80%;
  opacity: 0.8;
  transform-origin: top center;
}

.cone-top-left {
  top: 0;
  left: 0;
  clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
  background: radial-gradient(circle, rgba(255, 0, 0, 0.6) 0%, rgba(255, 255, 0, 0) 100%);
  animation: rotate-colors-left 10s infinite linear;
  z-index: 9999;
}

.cone-top-right {
  top: 0;
  right: 0;
  clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
  background: radial-gradient(circle, rgba(0, 0, 255, 0.6) 0%, rgba(0, 255, 255, 0) 100%);
  animation: rotate-colors-right 10s infinite linear;
  z-index: 9999;
}

@keyframes rotate-colors-left {
  0% { background: radial-gradient(circle, rgba(255, 0, 0, 0.6) 0%, rgba(255, 255, 0, 0) 100%); }
  25% { background: radial-gradient(circle, rgba(255, 255, 0, 0.6) 0%, rgba(0, 255, 0, 0) 100%); }
  50% { background: radial-gradient(circle, rgba(0, 255, 0, 0.6) 0%, rgba(0, 0, 255, 0) 100%); }
  75% { background: radial-gradient(circle, rgba(0, 0, 255, 0.6) 0%, rgba(255, 0, 255, 0) 100%); }
  100% { background: radial-gradient(circle, rgba(255, 0, 255, 0.6) 0%, rgba(255, 0, 0, 0) 100%); }
}

@keyframes rotate-colors-right {
  0% { background: radial-gradient(circle, rgba(0, 0, 255, 0.6) 0%, rgba(0, 255, 255, 0) 100%); }
  25% { background: radial-gradient(circle, rgba(0, 255, 255, 0.6) 0%, rgba(255, 0, 255, 0) 100%); }
  50% { background: radial-gradient(circle, rgba(255, 0, 255, 0.6) 0%, rgba(255, 0, 0, 0) 100%); }
  75% { background: radial-gradient(circle, rgba(255, 0, 0, 0.6) 0%, rgba(255, 255, 0, 0) 100%); }
  100% { background: radial-gradient(circle, rgba(255, 255, 0, 0.6) 0%, rgba(0, 255, 0, 0) 100%); }
}


.cone-bottom {
	/* bottom: 0;
	left: 0;
	width: 100%;
	height: 80%;
	clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
	background: linear-gradient(to top, rgba(255, 0, 0, 0.6) 0%, rgba(255, 0, 0, 0.2) 50%, rgba(255, 0, 0, 0) 100%);
	animation: flickering-red 2s infinite linear; */
	top: 11%;
	left: 39%;
	width: 60%;
	height: 80%;
	clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
	background: linear-gradient(to top, rgba(255, 0, 0, 0.6) 0%, rgba(255, 0, 0, 0.4) 50%, rgba(255, 0, 0, 0) 100%);
	/* animation: flickering-red 2s infinite linear; */
	position: absolute;
	/* z-index: 9; */
	transform: rotate(29deg);
}

/* @keyframes flickering-red {
  0% { background: linear-gradient(to top, rgba(255, 0, 0, 0.6) 0%, rgba(255, 0, 0, 0.2) 50%, rgba(255, 0, 0, 0) 100%); }
  25% { background: linear-gradient(to top, rgba(255, 0, 0, 0.7) 0%, rgba(255, 0, 0, 0.3) 50%, rgba(255, 0, 0, 0) 100%); }
  50% { background: linear-gradient(to top, rgba(255, 0, 0, 0.6) 0%, rgba(255, 0, 0, 0.2) 50%, rgba(255, 0, 0, 0) 100%); }
  75% { background: linear-gradient(to top, rgba(255, 0, 0, 0.8) 0%, rgba(255, 0, 0, 0.4) 50%, rgba(255, 0, 0, 0) 100%); }
  100% { background: linear-gradient(to top, rgba(255, 0, 0, 0.6) 0%, rgba(255, 0, 0, 0.2) 50%, rgba(255, 0, 0, 0) 100%); }
} */
/* @keyframes flickering-red {
  0%, 100% { background: linear-gradient(to top, rgba(255, 0, 0, 0.6) 0%, rgba(255, 0, 0, 0.2) 50%, rgba(255, 0, 0, 0) 100%); }
  25% { background: linear-gradient(to top, rgba(255, 0, 0, 0.7) 0%, rgba(255, 0, 0, 0.3) 50%, rgba(255, 0, 0, 0) 100%); }
  50% { background: linear-gradient(to top, rgba(255, 0, 0, 0.6) 0%, rgba(255, 0, 0, 0.2) 50%, rgba(255, 0, 0, 0) 100%); }
  75% { background: linear-gradient(to top, rgba(255, 0, 0, 0.8) 0%, rgba(255, 0, 0, 0.4) 50%, rgba(255, 0, 0, 0) 100%); }
} */
@keyframes flickering-red {
  0% { background: linear-gradient(to top, rgba(255, 0, 0, 0.6) 0%, rgba(255, 0, 0, 0.2) 50%, rgba(255, 0, 0, 0) 100%); }
  10% { background: linear-gradient(to top, rgba(255, 0, 0, 0.5) 0%, rgba(255, 0, 0, 0.3) 50%, rgba(255, 0, 0, 0) 100%); }
  20% { background: linear-gradient(to top, rgba(255, 0, 0, 0.7) 0%, rgba(255, 0, 0, 0.1) 50%, rgba(255, 0, 0, 0) 100%); }
  30% { background: linear-gradient(to top, rgba(255, 0, 0, 0.4) 0%, rgba(255, 0, 0, 0.2) 50%, rgba(255, 0, 0, 0) 100%); }
  40% { background: linear-gradient(to top, rgba(255, 0, 0, 0.6) 0%, rgba(255, 0, 0, 0.4) 50%, rgba(255, 0, 0, 0) 100%); }
  50% { background: linear-gradient(to top, rgba(255, 0, 0, 0.3) 0%, rgba(255, 0, 0, 0.5) 50%, rgba(255, 0, 0, 0) 100%); }
  60% { background: linear-gradient(to top, rgba(255, 0, 0, 0.6) 0%, rgba(255, 0, 0, 0.3) 50%, rgba(255, 0, 0, 0) 100%); }
  70% { background: linear-gradient(to top, rgba(255, 0, 0, 0.2) 0%, rgba(255, 0, 0, 0.6) 50%, rgba(255, 0, 0, 0) 100%); }
  80% { background: linear-gradient(to top, rgba(255, 0, 0, 0.5) 0%, rgba(255, 0, 0, 0.4) 50%, rgba(255, 0, 0, 0) 100%); }
  90% { background: linear-gradient(to top, rgba(255, 0, 0, 0.3) 0%, rgba(255, 0, 0, 0.7) 50%, rgba(255, 0, 0, 0) 100%); }
  100% { background: linear-gradient(to top, rgba(255, 0, 0, 0.6) 0%, rgba(255, 0, 0, 0.2) 50%, rgba(255, 0, 0, 0) 100%); }
}



/*

.party-cones {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 9999;
	opacity: 0.3;
}

.cone {
	position: absolute;
	width: 80%;
	height: 80%;
	transform-origin: top center;
}

.cone-top-left {
	top: 0;
	left: 0;
	clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
	background-color: rgba(0, 0, 255, 0.6);
	animation: rotate-colors-left 10s infinite ease-in-out;
}

.cone-top-right {
	top: 0;
	right: 0;
	clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
	background-color: rgba(0, 0, 255, 0.6);
	animation: rotate-colors-right 10s infinite ease-in-out;
}



@keyframes rotate-colors-left {
	0% { background-color: rgba(255, 0, 0, 0.6); }
	20% { background-color: rgba(255, 255, 0, 0.6); }
	40% { background-color: rgba(0, 255, 0, 0.6); }
	60% { background-color: rgba(0, 0, 255, 0.6); }
	80% { background-color: rgba(255, 0, 255, 0.6); }
	100% { background-color: rgba(255, 0, 0, 0.6); }
}

@keyframes rotate-colors-right {
	0% { background-color: rgba(0, 0, 255, 0.6); }
	20% { background-color: rgba(0, 255, 255, 0.6); }
	40% { background-color: rgba(255, 0, 255, 0.6); }
	60% { background-color: rgba(255, 0, 0, 0.6); }
	80% { background-color: rgba(255, 255, 0, 0.6); }
	100% { background-color: rgba(0, 0, 255, 0.6); }
}

*/
.lutin-interroge{
	display: none;
}
.dial-lutin{
	display: none;
}

.liste_lieux {
	margin-top: 10px;
	justify-content: space-between;
	display: flex;
	flex-flow: column wrap;
	align-content: center;
	gap: 10px;
}
.lutinsus{
	width:100%;
}
.lutin-interroge{
	position: relative;
}
a.chooseLutin{
	display: block;
	position: absolute;
	top: 0%;
	height: 100%;
	z-index: 10000;
	/*background-color: rgba(67, 149, 237, 0.6);*/
}
a.chooseLutin-a {
	width: 20%;
}
a.chooseLutin-b {
	width: 25%;
	left: 21%;
}
a.chooseLutin-c {
	width: 27%;
	left: 48%;
}
a.chooseLutin-d {
	width: 21%;
	left: 78%;
}
.change-lieux{
	display:none;
}
.selectedLutin {
	border: #e482a7 ridge 2px;
}
.accuser-lutin{
	display: none;
}

.poi-bombe {
	width: 40%;
	height: 15%;
	background-color: rgba(0, 255, 255, 0.3);
}

.numbersToLettersNumbers {
	font-family: digital;
	width: 45px;
	font-size: 1.3em;
	text-align: center;
	appearance: textfield;
}
form.numbersToLetters .answer{
	text-align: center;
	font-family: digital;
	font-size: 2em;
	background-color: lightgray;
	color: white;
}

.wordLettersColor{
	font-size: 2em;
}
.letterscolor-a {
	color: #d149f8; /* violet */
}
.letterscolor-b {
	color: #4fd4fc; /* bleu clair */
}
.letterscolor-c{
	color: #248003; /* vert */
}
.letterscolor-d{
	color: black;
}
.letterscolor-e{
	color: #d29d09; /* jaune */
}
.letterscolor-f {
	color: #de2525; /* rouge */
}
.letterscolor-g{
	color: #1737e4; /* bleu foncé */
}

.input-gta {
	z-index: 10;
	top: 12%;
	left: 9%;
	width: 81%;
	height: 30%;
	border: none;
	background: none;
	padding: 3%;
	color: white;
	font-family: digital;
	font-size: 1.7em;
}
.input-gta::placeholder{
	color:white;
	animation: blinker 3s linear infinite;
	transition: none;
	opacity: 1;
}
.input-gta::after{
	position:relative;
	top:0%;
	left: 0%;
	content: attr(placeholder);
}
@-moz-keyframes blinker {
	0% { opacity: 1.0; }
	50% { opacity: 0.0; }
	100% { opacity: 1.0; }
}
@-webkit-keyframes blinker {
	0% { opacity: 1.0;}
	50% { opacity: 0.0;}
	100% { opacity: 1.0;}
}
@keyframes blinker {
	0% { opacity: 1.0;}
	50% { opacity: 0.0;}
	100% { opacity: 1.0;}
}
.solve-gta {
	border-radius: 50%;
	width: 18%;
	height: 28%;
	top: 45%;
	right: 10.5%;
	background: none;
	border: none;
	box-shadow: none;
}