/* Typographies */
@import url(https://db.onlinewebfonts.com/c/9e991273bb4997c0b4be46bce5427daf?family=Mantinia+W00+Regular);
@font-face {
  font-family: "Mantinia W00 Regular";
  src: url("https://db.onlinewebfonts.com/t/9e991273bb4997c0b4be46bce5427daf.eot");
  src: url("https://db.onlinewebfonts.com/t/9e991273bb4997c0b4be46bce5427daf.eot?#iefix")format("embedded-opentype"),
  url("https://db.onlinewebfonts.com/t/9e991273bb4997c0b4be46bce5427daf.woff2")format("woff2"),
  url("https://db.onlinewebfonts.com/t/9e991273bb4997c0b4be46bce5427daf.woff")format("woff"),
  url("https://db.onlinewebfonts.com/t/9e991273bb4997c0b4be46bce5427daf.ttf")format("truetype"),
  url("https://db.onlinewebfonts.com/t/9e991273bb4997c0b4be46bce5427daf.svg#Mantinia W00 Regular")format("svg");
}

/* Zone de jeu */
body{
    margin: 0px;
    padding: 0px;
    display: flex ;
    justify-content : center ;
    align-items : center;
    background-color:black;
    cursor:url(../images/curseur.png), auto;
}

.videoIntro {
    width: 1400px;
    height: 800px;
    display: block;
}

.zone-jeu {
    width: 1400px; 
    height: 800px; 
    position: relative;
    cursor:default;
    top:70px;
    cursor:url(../images/curseur.png), auto;
}

/* Menu du jeu */
h1{
    color:#dbcaad;
    position: absolute;
    bottom:95px;
    left:647px; 
    display: block;
    font-weight: 500;
    font-size: 225%;
    font-family: Ancient Runes;
}

.menu{
    width: 1400px;
    height: 800px;
    display: none;
}

#Start{
    display: none;
    cursor: default;
    transition:1s;
    cursor:url(../images/pointer.png), auto;
    font-family: "Mantinia W00 Regular";
}

#Start:hover {
  text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
  text-shadow: 0 0 0.4em DarkOrange, 0 0 0.4em black, 0 0 0.4em DarkOrange;
  transition:0.5s;
}

/* Fondu haut noir */
.fade-in {
	-webkit-animation-name: fadeInOpacity;
	        animation-name: fadeInOpacity;
	-webkit-animation-iteration-count: 1;
	        animation-iteration-count: 1;
	-webkit-animation-timing-function: ease-in;
	        animation-timing-function: ease-in;
	-webkit-animation-duration: 4s;
	        animation-duration: 4s;
}

@-webkit-keyframes fadeInOpacity {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes fadeInOpacity {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.fade-out {
    animation: fadeOut ease 5s;
    -webkit-animation: fadeOut ease 5s;
    -moz-animation: fadeOut ease 5s;
    -o-animation: fadeOut ease 5s;
    -ms-animation: fadeOut ease 5s;
  }
  @keyframes fadeOut {
    0% {
      opacity:1;
    }
    100% {
      opacity:0;
    }
  }
  
  @-moz-keyframes fadeOut {
    0% {
      opacity:1;
    }
    100% {
      opacity:0;
    }
  }
  
  @-webkit-keyframes fadeOut {
    0% {
      opacity:1;
    }
    100% {
      opacity:0;
    }
  }
  
  @-o-keyframes fadeOut {
    0% {
      opacity:1;
    }
    100% {
      opacity:0;
    }
  }
  
  @-ms-keyframes fadeOut
    0% {
      opacity:1;
    }
    100% {
      opacity:0;
}

/* Dialogue avant jeu */
.citation{
    display:none;
    color:white;
    text-align: justify;
    font-size: 275%;
    margin-top: 240px;
    margin-left: 210px;
    margin-right: 210px;
    font-family: 'EB Garamond', serif;
    transition:0.3s;
}

blockquote{
  display: block;
}

/* Première zone */
.zone-une{
  display: none;
}
.env1{
    width: 1400px;
    height: 800px;
    z-index:1;
    position: relative;
}

.fleche1{
    width: 75px;
    height: 75px;
    position: absolute;
    cursor:pointer;
    transition:1s;
    z-index:2;
    top: 400px;
    left:1100px;
    display: none;
    cursor:url(../images/pointer.png), auto;
}

.fleche1:hover{
  transform:scale(1.2);
	transition:0.3s;
}

.fleche2{
  width: 75px;
  height: 75px;
  position: absolute;
  cursor:pointer;
  transition:1s;
  z-index:2;
  top: 400px;
  left:80px;
  cursor:url(../images/pointer.png), auto;
}

.fleche2:hover{
transform:scale(1.2);
transition:0.3s;
}

.fleche3{
  width: 45px;
  height: 60px;
  position: absolute;
  cursor:pointer;
  transition:1s;
  z-index:2;
  top: 450px;
  left: 700px;
  cursor:url(../images/pointer.png), auto;
}

.fleche3:hover{
transform:scale(1.2);
transition:0.3s;
}

.gramophone{
  width: 100px;
  position: absolute;
  cursor:pointer;
  transition:1s;
  z-index:2;
  top: 495px;
  left:475px;
  opacity: 80%;
  display: none;
  cursor:url(../images/pointer.png), auto;
}

.gramophone:hover{
  transform:scale(1.2);
  transition:0.3s;
  filter: drop-shadow(0px 0px 10px DarkOrange);
}

/* Deuxième zone */
.zone-deux{
  display:none;
}

.env2{
  width: 1400px;
  height: 800px;
  z-index:1;
  position: relative;
}

.fleche4{
  width: 40px;
  height: 40px;
  position: absolute;
  cursor:pointer;
  transition:1s;
  z-index:2;
  top: 430px;
  left:715px;
  cursor:url(../images/pointer.png), auto;
}

.fleche4:hover{
transform:scale(1.2);
transition:0.3s;
}

.fleche5{
width: 100px;
height: 100px;
position: absolute;
cursor:pointer;
transition:1s;
z-index:2;
top: 650px;
left:680px;
cursor:url(../images/pointer.png), auto;
}

.fleche5:hover{
transform:scale(1.2);
transition:0.3s;
}

.petitanneauOr{
  width: 15px;
  height: 15px;
  position: absolute;
  z-index:2;
  top: 375px;
  left:731px;
  display: block;
}

.lanterne{
  width: 30px;
  position: absolute;
  cursor:pointer;
  transition:1s;
  z-index:2;
  top: 578px;
  left:330px;
  opacity: 80%;
  display: none;
  cursor:url(../images/pointer.png), auto;
}

.lanterne:hover{
  transform:scale(1.2);
  transition:0.3s;
  filter: drop-shadow(0px 0px 10px DarkOrange);
}

/* Troisième zone */
.zone-trois{
  display:none;
}

.env3{
  width: 1400px;
  height: 800px;
  z-index:1;
  position: relative;
}

.fleche6{
  width: 100px;
  height: 100px;
  position: absolute;
  cursor:pointer;
  transition:1s;
  z-index:2;
  top: 650px;
  left:650px;
  cursor:url(../images/pointer.png), auto;
}

.fleche6:hover{
transform:scale(1.2);
transition:0.3s;
}

.anneauOr{
  width: 100px;
  height: 100px;
  position: absolute;
  cursor:pointer;
  transition:0.8s;
  z-index:2;
  top: 370px;
  left:600px;
  display: block;
  cursor:url(../images/pointer.png), auto;
}

.anneauOr:hover{
  transform:scale(1.2);
  transition:0.3s;
  filter: drop-shadow(0px 0px 10px DarkOrange);
}

/* Quatrième zone */
.zone-quatre{
  display:none;
}

.env4{
  width: 1400px;
  height: 800px;
  z-index:1;
  position: relative;
}

.fleche7{
  width: 40px;
  height: 40px;
  position: absolute;
  cursor:pointer;
  transition:1s;
  z-index:2;
  top: 490px;
  left:840px;
  cursor:url(../images/pointer.png), auto;
}

.fleche7:hover{
transform:scale(1.2);
transition:0.3s;
}

.fleche8{
width: 100px;
height: 100px;
position: absolute;
cursor:pointer;
transition:1s;
z-index:2;
top: 680px;
left:150px;
rotate:50deg;
cursor:url(../images/pointer.png), auto;
}

.fleche8:hover{
transform:scale(1.2);
transition:0.3s;
}

.boussole{
  width: 30px;
  height: 30px;
  position: absolute;
  cursor:pointer;
  transition:1s;
  z-index:2;
  top: 700px;
  left:720px;
  cursor:url(../images/pointer.png), auto;
}

.boussole:hover{
  transform:scale(1.3);
  transition:0.3s;
  filter: drop-shadow(0px 0px 15px DarkBlue);
}

/* Cinquième zone */
.zone-cinq{
  display:none;
}

.env5{
  width: 1400px;
  height: 800px;
  z-index:1;
  position: relative;
}

.fleche9{
  width: 100px;
  height: 100px;
  position: absolute;
  cursor:pointer;
  transition:1s;
  z-index:2;
  top: 650px;
  left:840px;
  rotate:-5deg;
  cursor:url(../images/pointer.png), auto;
}

.fleche9:hover{
transform:scale(1.2);
transition:0.3s;
}

.finFermee{
  width: 165px;
  height: 165px;
  position: absolute;
  cursor:pointer;
  transition:1s;
  z-index:2;
  top: 390px;
  left:749px;
  display: block;
  cursor:url(../images/pointer.png), auto;
}

.finOuverte{
  width: 165px;
  height: 165px;
  position: absolute;
  cursor:pointer;
  transition:1s;
  z-index:2;
  top: 390px;
  left:749px;
  display:none;
  cursor:url(../images/pointer.png), auto;
}

/* Sixième zone */
.zone-six{
  display:none;
}

.env6{
  width: 1400px;
  height: 800px;
  z-index:1;
  position: relative;
}

.fleche10{
  width: 100px;
  height: 100px;
  position: absolute;
  cursor:pointer;
  transition:1s;
  z-index:2;
  top: 650px;
  left:840px;
  rotate:-5deg;
  cursor:url(../images/pointer.png), auto;
}

.fleche10:hover{
transform:scale(1.2);
transition:0.3s;
}

.fleche11{
  width: 70px;
  height: 70px;
  position: absolute;
  cursor:pointer;
  transition:1s;
  z-index:2;
  top: 360px;
  left:750px;
  rotate:-5deg;
  display: none;
  cursor:url(../images/pointer.png), auto;
}

.fleche11:hover{
transform:scale(1.2);
transition:0.3s;
}

/* Septième zone */
.zone-sept{
  display:none;
}

.env7{
  width: 1400px;
  height: 800px;
  z-index:1;
  position: relative;
}

.fleche12{
  width: 100px;
  height: 100px;
  position: absolute;
  cursor:pointer;
  transition:1s;
  z-index:2;
  top: 620px;
  left:100px;
  rotate:65deg;
  cursor:url(../images/pointer.png), auto;
}

.fleche12:hover{
transform:scale(1.2);
transition:0.3s;
}

.keycard{
  height: 13px;
  position: absolute;
  cursor:pointer;
  transition:1s;
  z-index:2;
  top: 344px;
  left:305px;
  rotate:5deg;
  opacity:70%;
  display: block;
  cursor:url(../images/pointer.png), auto;
}

.keycard:hover{
  transform:scale(1.3);
  transition:0.3s;
  filter: drop-shadow(0px 0px 10px DarkOrange);
}

/* Huitième zone */
.zone-huit{
  display:none;
}

.env8{
  width: 1400px;
  height: 800px;
  z-index:1;
  position: relative;
}

.zoneHaut{
  width: 205px;
  height: 105px;
  position: absolute;
  cursor:pointer;
  transition:1s;
  z-index:2;
  top: 20px;
  left:470px;
  display: block;
  cursor:url(../images/pointer.png), auto;
}

.fleche13{
  width: 100px;
  height: 100px;
  position: absolute;
  cursor:pointer;
  transition:1s;
  z-index:2;
  top: 610px;
  left: 500px;
  rotate: -15deg;
  cursor:url(../images/pointer.png), auto;
}

.fleche13:hover{
  transform:scale(1.2);
  transition:0.3s;
}

.man{
  height: 175px;
  position: absolute;
  cursor:pointer;
  transition:1s;
  z-index:2;
  top: 237px;
  left: 380px;
  cursor:url(../images/pointer.png), auto;
}

.man:hover{
  transition:0.3s;
  filter: drop-shadow(0px 0px 10px DarkBlue);
}

.inventaire{
  width: 100px;
  height: 550px;
  position: absolute;
  transition: 1s;
  z-index: 2;
  top: 108px;
  left: 1419px;
  display: none;
}

.backpack{
  width: 90px;
  height: 90px;
  position: absolute;
  cursor:pointer;
  transition:1s;
  z-index:2;
  top: 440px;
  left: 550px;
  display:block;
  cursor:url(../images/pointer.png), auto;
}

.backpack:hover{
  transform:scale(1.2);
  transition:0.3s;
  filter: drop-shadow(0px 0px 10px DarkBlue);
}

/* Inventaire du jeu */
.gramophoneinvon{
  width: 110px;
  position: absolute;
  cursor: pointer;
  transition: 1s;
  z-index: 3;
  top: 115px;
  left: 1391px;
  display: none;
}

.gramophoneinvoff{
  width: 66px;
  position: absolute;
  cursor: pointer;
  transition: 1s;
  z-index: 3;
  top: 119px;
  left: 1435px;
  display: none;
}

.lanterninv{
  width: 33px;
  position: absolute;
  transition: 1s;
  z-index: 3;
  top: 335px;
  left: 1452px;
  display: none;
}

.anneauinv{
  width: 75px;
  height: 75px;
  position: absolute;
  transition: 1s;
  z-index: 3;
  top: 234px;
  left: 1433px;
  display: none;
}

.keycardinv{
  width: 75px;
  position: absolute;
  transition: 1s;
  z-index: 3;
  top: 480px;
  left: 1430px;
  display: none;
}

.boussoleinv{
  width: 80px;
  height: 80px;
  position: absolute;
  transition: 1s;
  z-index: 3;
  top: 558px;
  left: 1428px;
  display: none;
}

/* Différentes fin */
.videoFin{
  width: 1400px;
  height: 800px;
  display: none;
}

.videoEchec{
  width: 1400px;
  height: 800px;
  display: none;
}

/* Timer */
.timer{
  display: none;
}

.barreTimer{
  width: 100px;
  height: 600px;
  position: absolute;
  transition: 1s;
  z-index: 2;
  top: 100px;
  left: -130px;
}

.rock{
  width: 100px;
  height: 100px;
  position: absolute;
  transition: 1s;
  z-index: 3;
  top: 85px;
  left: -130px;
}

.grotte{
  width: 125px;
  height: 125px;
  position: absolute;
  transition: 1s;
  z-index: 2;
  top: 608px;
  left: -145px;
}


/* Dark mode (Flashlight)*/
body.light {
	background-color: black;
	margin: 0;
}

:root {
	--pointerX: 50vw;
	--pointerY: 50vh;
}

body.light:before {
	content: '';
	position: fixed;
	width: 100%;
	height: 100%;
	background: radial-gradient(circle 10vmax at var(--pointerX) var(--pointerY), rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 80%, rgba(0,0,0,0.95) 100%);
	pointer-events: none;
  z-index: 9;
}

.content {
	padding: 5em;
	color: rgb(255, 255, 0);
	font-size: 20px;
	pointer-events: none;
}

body.lieu-2::before {
	display:none;
}