a{
font-family: Arial, Helvetica, sans-serif;
color: rgb(0, 0, 0);
text-decoration: none;
}

html, body {
  margin: 0%;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.vp{
  width: 100%;
  height: 100%;
  position: absolute;

}

/*éléments textes*/
.haut {
    display: flex;
    justify-content: space-between;
    color: rgb(0, 0, 0);
    position: relative;
    top: 1%;
}
.credit{
    position: relative;
    font-family: Arial, Helvetica, sans-serif;
    color: rgb(0, 0, 0);;
    font-size: 14px;
    text-align: left;
    margin:0;
    padding:0;
    left:1%;

}
.info{
    position: relative;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    text-align: right;
    margin:0;
    padding:0;
    right:1%;
}
.coucou {
    position: absolute;
    font-family: Arial, Helvetica, sans-serif;
    font-size: x-small;
    text-align: center;
    top: 400%;             
    left: 50%;            
    transform: translate(-50%, -50%);
    margin: 0%;
    padding: 0%;
    display: none;
    line-height: 14px;
    z-index: 1;
}

/*illu*/
.toit{
 position: relative;
 width: 100%;    
 height: 50%;
 left: 56.5%;
 top: 0%;
 transform: translate(-50%, -100%) skew(-20deg);
 background: red ;
 margin: 0;
 padding: 0;
}


.mur{
 position:absolute;
 width: 40%;
 height: 50%;
 left: 50%;
 top: 60%;
 transform: translate(-50%, -50%);
 background: green;
 margin: 0;
 padding: 0;
}

.f1{
position:absolute;
 width: 12%;
 height: 22%;
 background: black;
 left:15%;
 top: 13%;
 margin: 0;
 padding: 0;
}

.f2{
 position:absolute;
 width: 12%;
 height: 22%;
 background: black;
 right:23%;
 top: 13%;
 margin: 0;
 padding: 0;
}

.door{
 position:absolute;
 width: 13%;
 height: 28%;
 background: black;
 right:50%;
 bottom: 0%;
 margin: 0;
 padding: 0;
}

.secret {
    position: absolute;
    top: 120%;     
    right: 170%;
    width: 3%;    
    height: 3.6%;
    background: rgb(248, 251, 251); 
    z-index: 100;
}

/*survol souris sur (?)*/
.coucou {
    position: absolute;
    color: rgb(23, 23, 23);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    text-align: center;
    top: 2900%;             
    left: 50%;            
    transform: translate(-50%, -50%);
    margin: 0%;
    padding: 0%;
    display: none;
    line-height: 25px;
}

/*.info:hover + .coucou {
    display: block;
}*/