@charset "UTF-8";

/* Changer le mode de calcul des tailles de boîtes */
html {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

*, *:after, *:before {
  box-sizing: inherit;
}

/* border-box (boîte fixe) ≠ content-box (contenu fixe) */

/* contrer les effets standards des navigateurs */
body {
  margin: 0;
  padding: 0;
}

/* corriger le problème d'alignement sur le bas des images */
img {
  max-width: 100%;
  /* Adaptation taille img en responsive */
  vertical-align: bottom;
  /* baseline*/
}

/*=====================*/
/* Classes Utilitaires */
/*=====================*/

/* Système de colonnes avec les "faux tableaux" */
.ligne {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.col {
  vertical-align: top;
  display: table-cell;
}

/* Flottants gauche et droite pour de petits éléments du contenu */
.float-l {
  float: left;
  margin-right: 8px;
}

.float-r {
  float: right;
  margin-left: 8px;
}

/* LISTES : */

/* 1. li alignés / inline-block */
.aligne {
  list-style: none;
  padding: 0;
}

.aligne li {
  display: inline-block;
}

/* Pour l'impression */

.print-only {
  /* pour afficher des éléments uniquement lors de l'impression */
  display: none;
}

/*================================================================*/

body {
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 1);
  overflow: hidden;
  ;
}

.grabb {
  cursor: url(../img/cursors/cursorGrabb.png) 2 2, grab;
}

.selestron {
  cursor: url(../img/cursors/cursorSearch.png) 2 2, help;
}

.porte {
  cursor: url(../img/cursors/cursorPorte.png) 2 2, cell;
}

.socRsx {
  cursor: url(../img/cursors/cursorChat.png) 2 2, text;
}

.observe {
  cursor: url(../img/cursors/cursorObs.png) 2 2, zoom-in;
}

.music {
  cursor: url(../img/cursors/cursorMusic.png) 2 2, pointer;
}

.move {
  cursor: url(../img/cursors/cursorExplo.png) 2 2, move;
}

.hd {
  top: 55vh;
  left: 64vw;
}

.controlsRot {
  background-color: rgba(0, 0, 0, 0.75);
}

.controlsKey {
  margin-left: 25vw;
  position: relative;
  top: -50vh;
  left: 30vw;
  width: 40vw;
  height: 50vh;
}

.controlsKey .front {
  top: 0%;
  left: 30%;
}

.controlsKey .left {
  top: 35%;
  left: 5%;
}

.controlsKey .right {
  top: 35%;
  left: 43%;
}

.controlsKey .back {
  top: 60%;
  left: 30%;
}

.front {
  position: absolute;
  top: 50vh;
  left: 45vw;
  width: 10vw;
  height: 20vh;
  background: transparent url(../img/cursors/cursorHt.png) center no-repeat;
  background-size: contain;
  cursor: url(../img/cursors/cursorStd.png) 2 2, default;
  text-align: center;
}

.front span {
  width: 20%;
  top: 40%;
  margin-left: -15%;
}

.back {
  position: absolute;
  top: 75vh;
  left: 45vw;
  width: 10vw;
  height: 20vh;
  background: transparent url(../img/cursors/cursorBs.png) center no-repeat;
  background-size: contain;
  cursor: url(../img/cursors/cursorStd.png) 2 2, default;
  text-align: center;
}

.back span {
  width: 20%;
  top: 40%;
  margin-left: -15%;
}

.left {
  position: absolute;
  top: 65vh;
  left: 35vw;
  width: 15vw;
  height: 15vh;
  background: transparent url(../img/cursors/cursorGch.png) center no-repeat;
  background-size: contain;
  cursor: url(../img/cursors/cursorStd.png) 0 0, default;
  text-align: center;
}

.left span {
  width: 20%;
  top: 30%;
  margin-left: -15%;
}

.right {
  position: absolute;
  top: 65vh;
  left: 50vw;
  width: 15vw;
  height: 15vh;
  background: transparent url(../img/cursors/cursorDrt.png) center no-repeat;
  background-size: contain;
  cursor: url(../img/cursors/cursorStd.png) 2 2, default;
  margin: 0 auto;
  text-align: center;
}

.right span {
  width: 20%;
  top: 30%;
  margin-left: -15%;
}

#page {
  width: 100vw;
  height: 100vh;
  position: relative;
  top: 0;
  left: 0;
}

#accueil {
  width: 100vw;
  height: 100vh;
  background: transparent url(../img/accueil.png) center no-repeat;
  background-size: cover;
  cursor: url(../img/cursors/cursorGrabb.png) 2 2, grab;
}

#entree {
  width: 100vw;
  height: 100vh;
  background: transparent url(../img/entree.png) center no-repeat;
  background-size: cover;
}

#selesInactif {
  width: 100vw;
  height: 100vh;
  background: transparent url(../img/selestronInactif.png) center no-repeat;
  background-size: cover;
}

#selesActif {
  width: 100vw;
  height: 100vh;
  background: transparent url(../img/selestronActif.png) center no-repeat;
  background-size: cover;
}

#clef {
  width: 100vw;
  height: 100vh;
  background: transparent url(../img/clef.png) center no-repeat;
  background-size: cover;
}

#porte {
  width: 100vw;
  height: 100vh;
  background: transparent url(../img/porte.png) center no-repeat;
  background-size: cover;
}

#resultRoom {
  width: 100vw;
  height: 100vh;
  background: transparent url(../img/resultRoom.png) center no-repeat;
  background-size: cover;
}

#scribe {
  width: 100vw;
  height: 100vh;
  background: transparent url(../img/scrib.png) center no-repeat;
  background-size: cover;
}

#comptoir {
  width: 100vw;
  height: 100vh;
  background: transparent url(../img/comptoir.png) center no-repeat;
  background-size: cover;
}

#picnic {
  width: 100vw;
  height: 100vh;
  background: transparent url(../img/picnic.png) center no-repeat;
  background-size: cover;
}

#opusOrig {
  width: 100vw;
  height: 100vh;
  background: transparent url(../img/opusOriginal.png) center no-repeat;
  background-size: cover;
}

#tableau {
  width: 100vw;
  height: 100vh;
  background: transparent url(../img/tableau.png) center no-repeat;
  background-size: cover;
}

#gramo {
  width: 100vw;
  height: 100vh;
  background: transparent url(../img/gramophone.png) center no-repeat;
  background-size: cover;
}

#piano {
  width: 100vw;
  height: 100vh;
  background: transparent url(../img/piano.png) center no-repeat;
  background-size: cover;
}

#etageExpo {
  width: 100vw;
  height: 100vh;
  background: transparent url(../img/expo.png) center no-repeat;
  background-size: cover;
}

#etageExpoMonet {
  width: 100vw;
  height: 100vh;
  background: transparent url(../img/monetRouen.png) center no-repeat;
  background-size: cover;
}

#etageRotonde {
  width: 100vw;
  height: 100vh;
  background: transparent url(../img/rotonde.png) center no-repeat;
  background-size: cover;
}

#etageDome {
  width: 100vw;
  height: 100vh;
  background: transparent url(../img/dome.png) center no-repeat;
  background-size: cover;
}

h1 {
  display: inline-block;
  margin: 5vh 10vw;
  width: 80vw;
  text-align: center;
  font-size: 7vmin;
  color: orange;
  text-shadow: 0 0 2vmin rgba(20, 20, 20, 1);
}

#accueil h1 {
  margin-top: 85vh;
}

p {
  position: absolute;
  top: 35vmin;
  left: 10vmin;
  height: auto;
  width: 35vw;
  display: inline-block;
  text-align: center;
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.5) 0vmin 0vmin 10vmin inset;
  text-shadow: 0 0 1vmin rgba(0, 0, 0, 0.5);
  font-size: 4vmin;
  color: rgba(255, 255, 200, 0.75);
}

p.second {
  top: 15vh;
  left: 55vw;
}

#accueil p {
  bottom: 15vmin;
  left: 5vmin;
  width: 20vw;
}

a {
  margin: 0 auto;
}

a span {
  position: absolute;
  top: 40%;
  margin-left: -25%;
  text-align: center;
  font-size: 2vmin;
  color: orange;
  text-shadow: 0 0 5px rgba(0, 0, 0, 1);
}