@font-face {
	font-family: "medieval";
	src: url('../police/OLDENGL.TTF');
}

body {
	color: #FFFFFF;
	background-color: #663300;
	background-repeat: no-repeat;
	background-position: center;
	background:url('../images/background.jpg');
}

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


.titrejeu{
	text-align: center;
	font-family: medieval;
}


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



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

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

.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{
}


/* 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{
	background: #000;
}

.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: 100px;
}
.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;
}


/* BANDE D'INFORMATION POUR LES VALIDATIONS DE MISSION */
.resultat {
	/* position: absolute; */
	/* bottom: 20%; */
	display: none;
	text-align: center;
	width:100%;
	color: white;
	font-size: 3vmax;
	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: #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 20px arial;
    color: #ffffff;
    text-decoration: none;
	width:100%;
}
.button:hover,
.button:focus {
    
    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);
    color: #ffffff;
    text-decoration: none;
}
.button:active {
    background: #4e5699;
    background: -webkit-gradient(linear, left top, left bottom, from(#4e5699), to(#663300));
    background: -moz-linear-gradient(top, #4e5699, #663300);
    background: linear-gradient(to bottom, #4e5699, #663300);
}

.fontbutton{
	font-size: 4vmin;
}

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

/* BOUTON CORPS */
.bouton-corps {
    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; */
	font-size: 3vmax;
    color: #ffffff;
    text-decoration: none;
	/* width:100%; */
}
.bouton-corps:hover,
.bouton-corps:focus {
    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);
    color: #ffffff;
    text-decoration: none;
}
.bouton-corps:active {
    background: #4e5699;
    background: -webkit-gradient(linear, left top, left bottom, from(#4e5699), to(#663300));
    background: -moz-linear-gradient(top, #4e5699, #663300);
    background: linear-gradient(to bottom, #4e5699, #663300);
}
.font-inherit{
	font-size: inherit;
}


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

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

.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-medaillon-final{
	width: 22%;
	height: 8%;
	opacity: 0;
}

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

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

.phylactere-chatrabia{
	top: 11%;
	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;
}

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

/******** POI next boite de dialogue ********/
.next-image{	
	width: 8%;
	height: 4.5%;		
	position: absolute;
	opacity: 1;
}

.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-left: 5%;
	top: 88%;
}


/******************** Textes dialogue **********************/
.dialogue{
	position:absolute;
	width: 90%;
	margin-left: 5%;
	top:74.5%;
	font-size:1.1em;
	color: black;
}



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

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

.base_image{
	width: 98%;
	left: 1%;
	bottom: 0%;
}

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

.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: 20%;
}
#cadre-jeu-chafumi img{
	margin-top: 20px;
}
#cadre-jeu-chafumi .left{
	width:50%;
	transform: rotate(270deg);
}
#cadre-jeu-chafumi .right{
	width:50%;
	transform: rotate(90deg);
}


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

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

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

.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 button{
	z-index:1200;
}

.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-rotation{
	position: absolute;
	top: 0;
	width: 98%;
	max-width: 100%;
	left: 1%;
	height: 100%;
	overflow: hidden;
	transition: transform 0.3s;
}

.rotation-bouton img{
	transition: transform 0.3s;
}
.rotation-visuel img{
	transition: transform 0.3s;
}

.fond-rotation{
	position: absolute;
	width: 100%;
	bottom: 0%;
	z-index: 10;
}

.roue-coffre{
	width: 35%;
	z-index: 9;
	top: 73%;
}

.epee-bouton{
	width:7%;
	top: 62%;
	z-index: 11;
}

.poi-coffre{	
	width: 98%;
	position: absolute;
	opacity: 1;
}



.select-page {
  display: block;
  margin: 25px auto;
}

.liste-boutons{
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
}
.button-indice {
  display: inline-block;
  margin: 5px;
  padding: 10px;
  background-color: #8B4513;
  color: #C90;
  border-radius: 5px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}
.button-indice-selected{
	background-color: #C90;
	color: #FFF;
	box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
	transform: translateY(1px);
}

.indice-page {
  display: none;
}
.indice{
	opacity: 0;
	display:none;
	padding:15px;
	text-align: justify;
	transition: opacity 600ms ease;
}
.indice-visible{
	opacity: 1;
	display: block !important;
}
.indice img{
	margin: 10px 5%;
	width: 90%;
}
.poi-tiroir-ouvert {
  width: 33%;
  height: 17%;
  opacity: 0;
}