/* ==================== */
/* Styles globaux       */
/* ==================== */
html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  background: black;
  overflow: hidden;
  font-family: sans-serif;
}

/*.bouton{
position:fixed;
top:0;
right:0;
height:10vh;
background-color:green;
z-index:999999999;
}*/

.texte{
color:white;
}
.bouton {
position:fixed;
top:15;
right:0;
height:10vh;
  display: inline-block;
  padding: 12px 24px;
  background-color: #000;
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(255, 255, 255, 0.6);
  text-align: center;
  z-index:999999999;
  
}

.jeu {
  width: 100%;
  height: 100%;
  position: relative;
}

/* ==================== */
/* Salle */
.salle {
  width: 100%;
  height: 100%;
  display: none;
}

.salle:target {
  display: block;
}

/* Première salle visible au chargement */
.salle:first-of-type {
  display: block;
}

/* ==================== */
/* Scene et image */
.scene {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.scene img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

/* ==================== */
/* Messages */
.message1, .message5, .message7 {
  position: absolute;
  top: 650px;
  left: 50%;
  transform: translateX(-50%);
  background-color: black;
  color: white;
  padding: 12px 20px;
  border-radius: 6px;
  white-space: nowrap;
  animation: apparition 6s ease-in-out forwards;
}
.message4 {
  position: absolute;
  top: 650px;
  left: 50%;
  transform: translateX(-50%);
  background-color: black;
  color: white;
  padding: 12px 20px;
  border-radius: 6px;
  white-space: nowrap;
  animation: apparition 8s ease-in-out forwards;
  }

@keyframes apparition {
  0% { opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { opacity: 0; }
}

/* ==================== */
/* Zones cliquables exactes */

/* Salle 1 */
.porte1 { position:absolute; left:calc(68vw - 25%); top:65vh; width:10vw; max-width:60px; height:17vh; max-height:130px; }

/* Salle 2 */
.porte2 { position:absolute; left:calc(62vw - 20%); top:15vh; width:20vw; max-width:200px; height:80vh; max-height:1000px; opacity:50%; }

/* Salle 3 */
.porte3 { position:absolute; left:calc(70vw - 20%); top:15vh; width:20vw; max-width:200px; height:80vh; max-height:1000px; opacity:50%; /*background-color: blue;*/}

/* Salle 4 */
.meuble4 { position:absolute; left:calc(50vw - 20%); top:60vh; width:25vw; max-width:600px; height:20vh; max-height:100px; opacity:50%; }
.fenetre4 { position:absolute; left:calc(78vw - 20%); top:32vh; width:15vw; max-width:120px; height:30vh; max-height:200px; opacity:50%; }
.affiche4 { position:absolute; left:calc(38vw - 20%); top:28vh; width:5vw; max-width:100px; height:35vh; max-height:300px; opacity:50%; }

/* Salle 5 */
.fenetre5 { position:absolute; left:calc(60vw - 20%); top:10vh; width:30vw; max-width:1000px; height:90vh; max-height:1000px; opacity:50%; }

/* Salle 6 */
.fenetre6 { position:absolute; left:calc(60vw - 20%); top:10vh; width:30vw; max-width:1000px; height:90vh; max-height:1000px; opacity:50%; }

/* Salle 7 */
.livre7 { position:absolute; left:calc(37vw - 20%); top:45vh; width:20vw; max-width:500px; height:40vh; max-height:500px; opacity:50%; }
.bocal7 { position:absolute; left:calc(98vw - 20%); top:35vh; width:10vw; max-width:500px; height:40vh; max-height:500px; opacity:50%; }

/* Salle 8 */
.livre8 { position:absolute; left:calc(50vw - 20%); top:10vh; width:35vw; max-width:500px; height:80vh; max-height:800px; opacity:50%; }

/* Salle 9 */
.livre9 { position:absolute; left:calc(45vw - 20%); top:10vh; width:48vw; max-width:800px; height:70vh; max-height:800px; opacity:50%; }

/* Salle 10 */
.bocal10 { position:absolute; left:calc(55vw - 20%); top:20vh; width:40vw; max-width:500px; height:50vh; max-height:800px; opacity:50%; }

/* Salle 11 */
.poisson11 { position:absolute; left:calc(48vw - 20%); top:20vh; width:16vw; max-width:200px; height:40vh; max-height:800px; opacity:50%; }

/* Salle 12 */
.poisson12 { position:absolute; left:calc(48vw - 20%); top:15vh; width:35vw; max-width:500px; height:70vh; max-height:500px; opacity:50%; }

/* Salle 13 */
.affiche13 { position:absolute; left:calc(52vw - 20%); top:2vh; width:35vw; max-width:480px; height:100vh; max-height:700px; opacity:50%; }

/* Salle 14 */
.affiche14 { position:absolute; left:calc(52vw - 20%); top:2vh; width:35vw; max-width:480px; height:100vh; max-height:700px; opacity:50%; }

/* asobi */

.asobi {  position:absolute; left:calc(0vw - 20%); top:0vh; width:10000vw; max-width:10000x; height:10000vh; max-height:10000px; opacity:50%; }


/* velkanis */

.velkanis {  position:absolute; left:calc(0vw - 20%); top:0vh; width:10000vw; max-width:10000x; height:10000vh; max-height:10000px; opacity:50%; }

/* cv */

.cv {  position:absolute; left:calc(0vw - 20%); top:0vh; width:10000vw; max-width:10000x; height:10000vh; max-height:10000px; opacity:50%; }