.tuyaux {
  display: grid;
  position: absolute;
  margin-left: 12%;
  margin-top: 3.4%;
  grid-template-columns: repeat(7, 150px);
  grid-template-rows: repeat(4, 150px);
  top: 1;
}

.tuyau {
  width: 100%;
  height: 100%;
  overflow: hidden;
  opacity: 0;
  transform-origin: center;
  transition: all 1s ease-out;
  position: relative;
}


.dirigeable {
  top: 0;
  width:15%;
  height:15%;
  position: absolute;
  margin-top: 8%;
  margin-left: 73.5%;
}

#zeppelin {
  -webkit-animation-name: pouloulou;
  -webkit-animation-duration: 6s;
  -webkit-animation-delay: 1s;
  -webkit-transition-timing-function: linear;
  -webkit-animation-play-state: paused;
  animation-fill-mode: forwards;
}



@-webkit-keyframes pouloulou {
  0% {
    margin-top: 8%;
    margin-left: 73.5%;
  }

  30% {
    margin-top:25%;
    margin-left: 58%;
  }

  70% {
    margin-top:0%;
    margin-left: 25%;
  }

  100% {
    margin-top: 36%;
    margin-left: 0%;
  }
}



.carte {
  position: relative
  width: 100vw;
  height: 100vh;
}




.tuyau[data-rotationactuelle="90"] {
  transform: rotate(90deg);
}
.tuyau[data-rotationactuelle="180"] {
  transform: rotate(180deg);
}
.tuyau[data-rotationactuelle="270"] {
  transform: rotate(270deg);
}



img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.pageSuivante{
  display: none;
}

#reussite{
  opacity: 0;
  animation-name: opacity;
  animation-delay: 6s;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}