body {
	background-color: #000000;
	width: 100%;
	height: 100vh;
	padding: 0px;
	margin: 0px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.flex {
	display:flex;
}
/*lieux*/
.zonejeu{
	width: 900px;
	height: 900px;
	position: relative;
}
.lieujardin{
	width: 100%;
	height: 100%;
	background-image: url(../images/jardincarre.png);
	background-size: cover;
	background-position: center;
	display: none;
}
.lieuouverture{
	width: 100%;
	height: 100%;
	background-image: url(../images/ouverture.png);
	background-size: cover;
	background-position: center;
	display: block;
}
.lieuchambre{
	width: 100%;
	height: 100%;
	background-image: url(../images/chambrecarree.png);
	background-size: cover;
	background-position: center;
	display:none;
	z-index: -1;
}
/*Objets interagissables*/
.depart{
	display: none;
	position:absolute;
	top: 400px;
}
.mention{
	border-radius: 10%;
	color: white;
	background-color: black;
	width: 400px;
	height: 100px;
	display: none;
	position:absolute;
	top: 300px;
	font-family: 'Dancing Script', cursive;
	font-weight: 200;
	font-size: 1.5em;
	text-align: center;
}
#texte-suivant {
	border-radius: 10%;
	background-color: black;
	background-position: right 50px;
	color: white;	
	width: 120px;
	height: 50px;
	line-height: 1.5em;
	text-align: center;
	cursor: pointer;
	transition:0.5s;
	position: relative;
	left: 500px ;
	top: 700px;
	font-family: 'Dancing Script', cursive;
	font-weight: 500;
	font-size: 2em;
	
}
.cuir{
	width: 132px;
	height: 900px;
	position: relative;
	background-image: url(../images/iconecuir.png);
}
.inventaire{
	width: 97px;
	height: 625px;
	position: relative;
	background-image: url(../images/inventaire.png);
	margin-top: 100px;
}
.espacemelange{
	position: absolute;
	display: none;
}
.zoneinventaire{
	display:none;
}
.zonecuir{
	display:none;
}
.map {
	position:absolute;
	top: -300px;
	right: -345px;
	cursor:pointer;
	transform: scale(12%);
	transition:0.3s;
}

.pouch	{
	position:absolute;
	top: -20px;
	right: -87px;
	cursor:pointer;
	transition:0.3s;
	transform: scale(25%);
}

.note{
	position:absolute;
	top: 175px;
	right: -78px;
	cursor:pointer;;
	transform: scale(25%);
	transition:0.3s;
}

.abeille{
	position:absolute;
	top: -130px;
	right: -140px;
	cursor:pointer;
	transition:0.3s;
	transform: scale(15%);
	display: none;
}

.sceau{
	position:absolute;
	top: 95px;
	right: -25px;
	cursor:pointer;
	transition:0.3s;
	transform: scale(45%);
	display: none;
}
.feuilles{
	position:absolute;
	top: 200px;
	right: -9px;
	cursor:pointer;
	transition:0.3s;
	transform: scale(55%);
	display: none;;
}
.ver{
	position:absolute;
	top: 260px;
	right: -35px;
	cursor:pointer;
	transition:0.3s;
	transform: scale(30%);
	display: none;
}
.mortier{
	position:absolute;
	top: 438px;
	right: 35px;
	cursor:pointer;
	transition:0.3s;
	transform: scale(150%);
	display:none;
}
.recette{
	position:absolute;
	right: 15px;
	top: 515px;
	cursor:pointer;
	transition:0.3s;
	transform: scale(115%);
	display:none;
}
.abeille-a-collecter{
	position:absolute;
	right: 510px;
	top: 15px;
	cursor:pointer;
	transition:0.3s;
}
.feuilles-a-collecter{
	position:absolute;
	right: 715px;
	top: 150px;
	cursor:pointer;
	transition:0.3s;
	transform: scale(40%);
}
.eau-a-collecter{
	position:absolute;
	right: 546px;
	top: 727px;
	cursor:pointer;
	transition:0.3s;
	transform: scale(44%);
}
.ver-a-collecter{
	position:absolute;
	right: 98px;
	top: 540px;
	cursor:pointer;
	transition:0.3s;
	transform: scale(70%);
}
.recette-a-collecter {
	position:absolute;
	right: 207px;
	top: 423px;
	cursor:pointer;
	transition:0.3s;
	transform: scale(90%);
}
.mortier-a-collecter {
	position:absolute;
	right: 407px;
	top: 410px;
	cursor:pointer;
	transition:0.3s;
	transform: scale(90%);
	z-index: 999;
}
.abeille:hover{
	transform:scale(18%);
	transition:0.3s;
}
.sceau:hover{
	transform:scale(53%);
	transition:0.3s;
}
.feuilles:hover{
	transform:scale(60%);
	transition:0.3s;
}
.ver:hover{
	transform:scale(38%);
	transition:0.3s;
}
.mortier:hover{
	transform:scale(185%);
	transition:0.3s;
}
.recette:hover{
	transform:scale(130%);
	transition:0.3s;
}
.note:hover{
	transform:scale(27%);
	transition:0.3s;
}
.pouch:hover{
	transform:scale(27%);
	transition:0.3s;
}
.map:hover{
	transform:scale(13%);
	transition:0.3s;
}
.recettepleinecran{
	position:absolute;
	right: 500px;
	display: none;
	transform:scale(75%);
}
.abeille-a-melanger{
	display: none;
}
.sceau-a-melanger{
	display: none;
}
.feuilles-a-melanger{
	display: none;
}
.ver-a-melanger{
	display: none;
}
.goo{
	display: none;
}
.potion{
	display: none;
}
/*animations*/
.face-dans-le-noir{
	margin-top: 750px;
	margin-left: 750px;
	width: 68px;
	height: 55px;
	background: url(../images/blablabla.png) left center;
	animation: play-face 15s steps(10) infinite;
}
@keyframes play-face {
	100% { background-position: -680px; }
  }
.oiseau{
	position: absolute;
	top: 565px;
	left: 40px;
	width: 185px;
	height: 170px;
	background: url(../images/oiseau.png) left center;
	animation: play-oiseau 1s steps(5) infinite;
	transform: scale(45%);
}
@keyframes play-oiseau {
	100% { background-position: -923px; }
  }
.chat{
	position: absolute;
	top: 537px;
	left: 460px;
	width: 99px;
	height: 96px;
	background: url(../images/chat.png) left center;
	animation: play-chat 2s steps(2) infinite;
	transform: scale(45%);
}
@keyframes play-chat {
	100% { background-position: -198px; }
  }

.bulles{
	position: absolute;
	top: 250px;
	left: 340px;
	width: 250px;
	height: 500px;
	background: url(../images/bulles.png) left center;
	animation: play-bulles 2s steps(6) infinite;
	transform: scale(35%);
}
@keyframes play-bulles {
	100% { background-position: -1500px; }
  }

  #chiffre {
	color: rgb(255, 255, 255);
	font-style: italic;
	font-family: 'Dancing Script', cursive;
	font-weight: 500;
	position: absolute;
	font-size: 4em;
	display: block;
	left: 1035px;
	top: 65px;
}
.ecran-victoire {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	background-image: url(../images/victoire.png);
	display: none;
}
.ecran-perdu {
	width: 100%;
	height: 100%;
	background-image: url(../images/perdu.png);
	background-size: cover;
	background-position: center;
	display: none;
}

.abeille-a-melanger{
	position: absolute;
	transform: scale(25%);
	top: -100px;
	left: 50px;
}
.sceau-a-melanger{
	position: absolute;
	transform: scale(50%);
	bottom: 100px;
	left: 75px;
}
.feuilles-a-melanger{
	position: absolute;
	transform: scale(50%);
	bottom: 175px;

}
.ver-a-melanger{
	position: absolute;
	transform: scale(50%);
	left: -10px;
	top: 50px;
}

.goo{
	position: absolute;
	transform: scale(30%);
	top: -150px;
}
.potion{
	position: absolute;
	transform: scale(25%);
	top: -250px;
	right: 25px;
}

.potion:hover{
	transform:scale(29%);
	transition:0.3s;
}
.espacemelange{
	transform: scale(100%);
	position: absolute;
	cursor:pointer;
	transition:0.3s;
}
.espacemelange:hover{
	transform: scale(105%);
}

#texteperdu{
	color: rgb(255, 255, 255);
	font-style: italic;
	font-family: 'Dancing Script', cursive;
	font-weight: 500;
	position: absolute;
	font-size: 2em;
	display: block;
	top: 125px;
	left: 100px;
}
#texteperdu2{
	color: rgb(255, 255, 255);
	font-style: italic;
	font-family: 'Dancing Script', cursive;
	font-weight: 500;
	position: absolute;
	font-size: 2em;
	display: block;
	top: 700px;
	left: 440px;
}
#texteperdu3{
	color: rgb(255, 255, 255);
	font-style: italic;
	font-family: 'Dancing Script', cursive;
	font-weight: 500;
	position: absolute;
	font-size: 2em;
	display: block;
	top: 180px;
	left: 25px;
}
#textevictoire{
	color: rgb(255, 255, 255);
	font-style: italic;
	font-family: 'Dancing Script', cursive;
	font-weight: 500;
	position: absolute;
	font-size: 2em;
	display: block;
	top: 125px;
	left: 125px;
}
#textevictoire2{
	color: rgb(255, 255, 255);
	font-style: italic;
	font-family: 'Dancing Script', cursive;
	font-weight: 500;
	position: absolute;
	font-size: 2em;
	display: block;
	top: 700px;
	left: 490px;
}
#textevictoire3{
	color: rgb(255, 255, 255);
	font-style: italic;
	font-family: 'Dancing Script', cursive;
	font-weight: 500;
	position: absolute;
	font-size: 2em;
	display: block;
	top: 200px;
	left: 35px;
}