@charset "UTF-8";

@font-face {
  font-style: normal;
  font-weight: normal;
  font-family: 'Compagnon';
  src:
    url('../fonts/compagnon-roman-webfont.woff2') format('woff2'),
}

body {
  margin: 0;
  overflow: hidden;
}

/* ------------------TEXTES------------------------ */
p {
  font-family: "Compagnon", serif;
  font-size: 25px;
   color: rgb(16, 0, 87);
  user-select: none;
  /* pointer-events: none; */
}

.container-texte-gauche {
  position: relative;
  width: 100vw;
  height: 100vh;
}

.texte1-gauche,
.texte2-gauche,
.texte3-gauche,
.texte4-gauche {
  position: absolute;
  opacity: 0;
  animation: apparition 3s ease forwards;
}

/* TEXTE 1 → haut gauche */
.texte1-gauche {
  top: 10%;
  left: 8%;
  text-align: left;

  animation-delay: 0s;
}

/* TEXTE 2 → centre */
.texte2-gauche {
  top: 45%;
  left: 35%;
  text-align: left;

  animation-delay: 1.5s;
}

/* TEXTE 3 → bas droite */
.texte3-gauche {
  bottom: 20%;
  right: 8%;
  text-align: left;

  animation-delay: 3s;
}

.texte4-gauche {
  bottom: 20%;
  right: 8%;
  text-align: left;

  animation-delay: 1.5s;
}

/* ANIMATION DIAGONALE*/
@keyframes apparition {

  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* BOUTON */
.bouton-suite {
  position: absolute;

  bottom: 10%;
  right: 8%;

  width: 45px;
  height: 45px;

  display: flex;
  justify-content: center;
  align-items: center;

  border: 1.5px solid rgb(16, 0, 87);
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
}

.texte-bouton {
  font-size: 20px;
  padding-top: 10px;
}

.bouton-suite p {
  margin: 0;

  transform: translateY(-4.5px);
}

/* ------------------INDEX------------------------ */

/* TEXTE AU-DESSUS DE LA MAISON */
.maison6 .texte-maison {
  position: absolute;
  bottom: 10px; /* au-dessus de la maison */
  left: 50px;
  transform: translateX(-50%) translateY(10px);

  font-size: 16px;
  text-align: center;
  white-space: nowrap;

  opacity: 0;
  transition: all 0.4s ease;

  pointer-events: none;
}

/* APPARITION AU HOVER */
.maison6:hover .texte-maison {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ------------------------------------------ */

/* FLOCONS */
.flocon {
  position: fixed;

  top: -80px;

  animation: tomber linear infinite;

  user-select: none;
  pointer-events: none;

  z-index: 9999;
}

/* arrière */
.flocon.back {
  z-index: 9998;
}

/* devant */
.flocon.front {
  z-index: 10000;
}

/* IMAGES */
.flocon img {
  width: 35px;

  opacity: 0.8;

  animation: rotation 10s linear infinite;
}

/* POSITIONS + TIMINGS TEMPÊTE */

.flocon:nth-child(1)  { left: 2%;  animation-duration: 2.5s; animation-delay: -1s; }
.flocon:nth-child(2)  { left: 6%;  animation-duration: 3s;   animation-delay: -3s; }
.flocon:nth-child(3)  { left: 10%; animation-duration: 2.2s; animation-delay: -5s; }
.flocon:nth-child(4)  { left: 14%; animation-duration: 2.8s; animation-delay: -2s; }
.flocon:nth-child(5)  { left: 18%; animation-duration: 2.4s; animation-delay: -4s; }

.flocon:nth-child(6)  { left: 22%; animation-duration: 3.2s; animation-delay: -6s; }
.flocon:nth-child(7)  { left: 26%; animation-duration: 2.6s; animation-delay: -1.5s; }
.flocon:nth-child(8)  { left: 30%; animation-duration: 2.9s; animation-delay: -3.5s; }
.flocon:nth-child(9)  { left: 34%; animation-duration: 2.3s; animation-delay: -5.5s; }
.flocon:nth-child(10) { left: 38%; animation-duration: 3.1s; animation-delay: -2.5s; }

.flocon:nth-child(11) { left: 42%; animation-duration: 2.5s; animation-delay: -4.5s; }
.flocon:nth-child(12) { left: 46%; animation-duration: 2.8s; animation-delay: -6.5s; }
.flocon:nth-child(13) { left: 50%; animation-duration: 2.4s; animation-delay: -1.2s; }
.flocon:nth-child(14) { left: 54%; animation-duration: 3s;   animation-delay: -3.2s; }
.flocon:nth-child(15) { left: 58%; animation-duration: 2.6s; animation-delay: -5.2s; }

.flocon:nth-child(16) { left: 62%; animation-duration: 2.9s; animation-delay: -2.2s; }
.flocon:nth-child(17) { left: 66%; animation-duration: 2.3s; animation-delay: -4.2s; }
.flocon:nth-child(18) { left: 70%; animation-duration: 3.1s; animation-delay: -6.2s; }
.flocon:nth-child(19) { left: 74%; animation-duration: 2.5s; animation-delay: -1.8s; }
.flocon:nth-child(20) { left: 78%; animation-duration: 2.7s; animation-delay: -3.8s; }

/* CHUTE PLUS NATURELLE */

@keyframes tomber {

  0% {

    transform:
      translateY(-80px)
      translateX(0px);

  }

  25% {

    transform:
      translateY(25vh)
      translateX(12px);

  }

  50% {

    transform:
      translateY(50vh)
      translateX(-10px);

  }

  75% {

    transform:
      translateY(75vh)
      translateX(8px);

  }

  100% {

    transform:
      translateY(110vh)
      translateX(-12px);

  }

}
/* ------------------------------------------ */

/* MAISONS */
.maison {
  position: absolute;
  z-index: 5;
}

.maison img {
  width: 120px;
}

.maison4 img {
  width: 160px;
}

.maison9 img {
  width: 160px;
}

.maison1 img {
  width: 150px;
}

.maison7 img {
  width: 150px;
}

/* positions fiables */
.maison1 { top: 20%; left: 5%; }
.maison2 { top: 39%; left: 20%; }
.maison3 { top: 24%; left: 50%; }
.maison4 { top: 60%; left: 42%; }
.maison5 { top: 39%; left: 70%; }
.maison6 { top: 75%; left: 70%; }
.maison7 { top: 55%; left: 87%; }
.maison8 { top: 75%; left: 10%; }
.maison9 { top: 10%; left: 80%; }
.maison10 { top: 48%; left: 65%; }
.maison11 { top: 82%; left: 40%; }
.maison12 { top: 15%; left: 75%; }

/* MAISON INTERACTIVE */
.maison6 {
  position: absolute;
  z-index: 5;
}

/* IMAGES */
.maison6 img {
  position: absolute;
  width: 120px;
  top: 0;
  left: 0;
  transition: opacity 0.4s ease;
}

/* image normale */
.maison6 .img1 {
  opacity: 1;
}

/* image lumière */
.maison6 .img2 {
  opacity: 0;
}

/* CLIGNOTEMENT LUMI`RE */

.maison6:not(:hover) .img2 {
  animation: lumiereFeu 7s ease-in-out infinite;
}

/* hover */
.maison6:hover .img1 {
  opacity: 0;
}

.maison6:hover .img2 {
  opacity: 1;
}

@keyframes lumiereFeu {

  0% {
    opacity: 0.25;
  }

  12% {
    opacity: 0.55;
  }

  22% {
    opacity: 0.4;
  }

  35% {
    opacity: 0.8;
  }

  48% {
    opacity: 0.6;
  }

  60% {
    opacity: 1;
  }

  72% {
    opacity: 0.7;
  }

  84% {
    opacity: 0.5;
  }

  100% {
    opacity: 0.3;
  }
}
/* ------------------PAGE 2------------------------ */

.container-coeur {
  position: absolute;

  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);

  display: flex;
  justify-content: center;
  align-items: center;
}

.coeur {
  position: relative;

  width: 360px;

  z-index: 1;
  pointer-events: none;
  user-select: none;
}

#glaconCanvas {
  position: absolute;

  width: 360px;
  height: 360px;
  right: 6px;

  z-index: 2;
}

/* ------------------PAGE 3------------------------ */
/* COEUR QUI BAT  */
.coeur-bat {
  animation: battement 2s ease-in-out infinite;
  transform-origin: center;
}

/* animation douce */
@keyframes battement {

  0% {
    transform: scale(1);
  }

  10% {
    transform: scale(1.02);
  }

  20% {
    transform: scale(1);
  }

  30% {
    transform: scale(1.03);
  }

  40% {
    transform: scale(1);
  }

  100% {
    transform: scale(1);
  }
}

/* ------------------ */
/* ENGRENAGES */

.engrenage {

  position: absolute;

  width: 300px;
  height: 300px;

  cursor: grab;

  overflow: hidden;

  user-select: none;
  -webkit-user-select: none;
}


/* IMAGE */

.engrenage img {

  position: absolute;

  top: 0;
  left: 0;

  width: 300px;
  height: 300px;

  display: block;

  pointer-events: none;

  user-select: none;
  -webkit-user-drag: none;
}


/* POSITIONS */

.engrenage1 {
  top: 65%;
  left: 28%;
}

.engrenage2 {
  top: 68%;
  left: 43%;
}

.engrenage3 {
  top: 62%;
  left: 50%;
}

.engrenage4 {
  top: 69%;
  left: 60%;
}

.engrenage9 {
  top: 65%;
  left: 15%;
}


/* CENTRES ROTATION */

.engrenage1 img {

  transform-origin:
  149px 141px;
}

.engrenage2 img {

  transform-origin:
  100px 122px;
}

.engrenage3 img {

  transform-origin:
  165px 178px;
}

.engrenage4 img {

  transform-origin:
  197px 112px;
}

.engrenage9 img {

  transform-origin:
  150px 145px;
}


/* ROTATION */

@keyframes rotation {

  from {

    transform:
    rotate(0deg);

  }

  to {

    transform:
    rotate(360deg);

  }

}


/* TEXTE */

.texte-engrenage {

  opacity: 0;

  animation: none !important;

  transition:
  opacity 1.5s ease;
}


/* BOUTON */

.bouton-suite-engrenage {

  opacity: 0;

  pointer-events: none;

  transition:
  opacity 1.5s ease;
}
/* ------------------ PAGE 5 ------------------ */


/* CONTAINER */

.container-regles {

  width: 100vw;
  height: 100vh;

  position: relative;
}


/* ZONE REGLES */

.affichage-regle {

  width: 100%;
  height: 100%;

  position: relative;

  display: flex;
  justify-content: center;
  align-items: center;
}


/* ---------------------------------- */
/* REGLES */

.regle {

  position: fixed;

  width: 700px;

  padding: 30px 10px;

  background: white;

  box-shadow:
  0 10px 30px rgba(2,0,67,0.15);

  font-size: 48px;

  line-height: 1;

  text-align: center;

  opacity: 0;

  transition:
  opacity 0.8s ease,
  transform 0.8s ease;

  z-index: 1;
}


/* ---------------------------------- */
/* POSITIONS */


/* REGLE 1 */

.regle1 {

  top: 12%;

  transform:
  rotate(-2deg)
  translateY(30px);
}


/* REGLE 2 */

.regle2 {

  top: 40%;

  transform:
  rotate(1deg)
  translateY(30px);
}


/* REGLE 3 */

.regle3 {

  top: 62%;

  transform:
  rotate(-1deg)
  translateY(30px);
}


/* ---------------------------------- */
/* ACTIVE */

.regle.active {

  opacity: 1;

  transform:
  rotate(0deg)
  translateY(0px);

  z-index: 10;
}


/* ---------------------------------- */
/* PREMIERE REGLE VISIBLE */

.regle1.active {

  opacity: 1;

  transform:
  rotate(0deg)
  translateY(0px);

  z-index: 10;
}


/* ---------------------------------- */
/* BOUTON SUITE */

.bouton-suite-regle {

  opacity: 0;

  pointer-events: none;

  transition:
  opacity 0.8s ease;

  z-index: 9999;
}

/* ------------------ PAGE 6 ------------------ */
.page6 .bouton-suite {
  display: none;
}

body.page6 {

  cursor:
  url("../images/CoeurCurseur.png")
  40 40,
  auto;

  overflow: hidden;

  margin: 0;
}

/* ---------------- */
/* MAISONS */

.page6 .maison {

  position: absolute;

  z-index: 5;
}


.page6 .maison img {

  display: block;

  user-select: none;
  -webkit-user-drag: none;
}

.maison img {
  width: 120px;
}

.maison16 img {
  width: 160px;
}

.maison21 img {
  width: 160px;
}

.maison13 img {
  width: 150px;
}

.maison19 img {
  width: 150px;
}

/* positions fiables */
.maison13 { top: 20%; left: 5%; }
.maison14 { top: 39%; left: 20%; }
.maison15 { top: 24%; left: 50%; }
.maison16 { top: 60%; left: 42%; }
.maison17 { top: 39%; left: 70%; }
.maison18 { top: 80%; left: 70%; }
.maison19 { top: 55%; left: 87%; }
.maison20 { top: 75%; left: 10%; }
.maison21 { top: 10%; left: 80%; }
/* ---------------- */
/* NOTES MUSIQUE */

.page6 .notes-musique {

  position: absolute;

  top: 35%;
  right: -1100px;

  width: 1000px;
  height: 320px;

  z-index: 20;

  animation:
  entreeMusique 16s linear forwards;

  animation-delay: 2s;
}


/* NOTES */

.page6 .note {

  position: absolute;

  width: 80px;

  opacity: 0;
}


/* NOTES INDIVIDUELLES */

.page6 .note1 {

  top: 170px;
  left: 0px;

  animation:
  apparitionNote 4s ease forwards,
  flottement1 6s ease-in-out infinite alternate;

  animation-delay: 2s;
}

.page6 .note2 {

  top: 135px;
  left: 140px;

  animation:
  apparitionNote 4s ease forwards,
  flottement2 5s ease-in-out infinite alternate;

  animation-delay: 4s;
}

.page6 .note3 {

  top: 105px;
  left: 300px;

  animation:
  apparitionNote 4s ease forwards,
  flottement3 7s ease-in-out infinite alternate;

  animation-delay: 6s;
}

.page6 .note4 {

  top: 75px;
  left: 470px;

  animation:
  apparitionNote 4s ease forwards,
  flottement4 4s ease-in-out infinite alternate;

  animation-delay: 8s;
}

.page6 .note5 {

  top: 55px;
  left: 650px;

  animation:
  apparitionNote 4s ease forwards,
  flottement5 8s ease-in-out infinite alternate;

  animation-delay: 10s;
}

.page6 .note6 {

  top: 40px;
  left: 790px;

  animation:
  apparitionNote 4s ease forwards,
  flottement6 5s ease-in-out infinite alternate;

  animation-delay: 12s;
}

.page6 .note7 {

  top: 60px;
  left: 900px;

  animation:
  apparitionNote 4s ease forwards,
  flottement7 6s ease-in-out infinite alternate;

  animation-delay: 14s;
}

.page6 .note8 {

  top: 100px;
  left: 980px;

  animation:
  apparitionNote 4s ease forwards,
  flottement8 7s ease-in-out infinite alternate;

  animation-delay: 16s;
}


/* ---------------- */
/* ENTRÉE MUSIQUE */

@keyframes entreeMusique {

  from {

    right: -1100px;
  }

  to {

    right: 0px;
  }
}


/* ---------------- */
/* APPARITION */

@keyframes apparitionNote {

  from {

    opacity: 0;

    transform:
    scale(0.3);

  }

  to {

    opacity: 1;

    transform:
    scale(1);

  }

}


/* ---------------- */
/* FLOTTEMENTS */

@keyframes flottement1 {

  from {
    transform:
    translateY(0px);
  }

  to {
    transform:
    translateY(-25px);
  }
}

@keyframes flottement2 {

  from {
    transform:
    translateY(-5px);
  }

  to {
    transform:
    translateY(18px);
  }
}

@keyframes flottement3 {

  from {
    transform:
    translateY(0px);
  }

  to {
    transform:
    translateY(-30px);
  }
}

@keyframes flottement4 {

  from {
    transform:
    translateY(10px);
  }

  to {
    transform:
    translateY(-12px);
  }
}

@keyframes flottement5 {

  from {
    transform:
    translateY(0px);
  }

  to {
    transform:
    translateY(-35px);
  }
}

@keyframes flottement6 {

  from {
    transform:
    translateY(-8px);
  }

  to {
    transform:
    translateY(15px);
  }
}

@keyframes flottement7 {

  from {
    transform:
    translateY(0px);
  }

  to {
    transform:
    translateY(-20px);
  }
}

@keyframes flottement8 {

  from {
    transform:
    translateY(5px);
  }

  to {
    transform:
    translateY(-28px);
  }
}

/* ------------------ PAGE 7 ------------------ */
/* ACACIAS */

.acacia {

  position: absolute;

  z-index: 0;

  pointer-events: none;

  opacity: 0;

  transition:
  opacity 2s ease;
}


/* APPARITION */

.acacia.visible {

  opacity: 0.8;
}


/* IMAGES */

.acacia img {

  width: 180px;

  user-select: none;
  -webkit-user-drag: none;
}


/* ---------------- */
/* POSITIONS + ANIMATIONS */

.acacia1 {

  top: 30%;
  left: 42%;

  transform:
  translate(-50%, -50%);
  animation:
  acacia1move 5s ease-in-out infinite alternate;
}

/* ---------------- */
/* FLOTTEMENT + ROTATION */

@keyframes acacia1move {

  from {
    transform:
    translateY(0px)
    rotate(-6deg);
  }

  to {
    transform:
    translateY(-12px)
    rotate(6deg);
  }
}
/* -------------------------PAGE 8------------------------ */
.container-engrenage {

  position: absolute;

  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);

  width: 300px;
  height: 300px;
}

/* ENGRENAGES */
.engrenage-page8 img {
  width: 300px;

  pointer-events: none;

  user-select: none;
  -webkit-user-drag: none;
}

.engrenage5,
.engrenage6,
.engrenage7,
.engrenage8,
.engrenage10 {

  position: absolute;

  top: 0;
  left: 0;
}

.engrenage5 img {

  animation:
  rotation2 8s linear infinite;
}

.engrenage6 img {

  animation:
  rotation2 8s linear infinite;

  transform-origin:
  101px 122px;
}

.engrenage7 img {

  animation:
  rotation2 8s linear infinite;

  transform-origin:
  166px 178px;
}

.engrenage8 img {

  animation:
  rotation2 8s linear infinite;

  transform-origin:
  197px 112px;
}

.engrenage10 img {

  animation:
  rotation2 8s linear infinite;

  transform-origin:
  149px 141px;
}

/* rotation normale */
@keyframes rotation2 {

  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(4220deg);
  }
}

.texte-jack {
  position: absolute;
  bottom: 270px;
  left: 50%;
  transform: translateX(-50%);

  font-size: 14px;
  text-align: center;
  white-space: nowrap;

  pointer-events: none;
}

/* ------------------ PAGE 10 ------------------ */

/* BOUTON */

.bouton-amour {

  position: absolute;

  bottom: 25%;
  right: 44%;

  padding: 0px 15px 7px 15px;

  display: flex;
  justify-content: center;
  align-items: center;

  border: 1.5px solid rgb(16,0,87);
  border-radius: 30px;

  text-decoration: none;

  
}


/* JACK */

.container-jack-page10 {

  position: absolute;

  top: 52%;
  left: 20%;

  transition:
    left 1s ease;
}


/* ACACIA */

.acacia-page10 {

  position: absolute;

  top: 29%;
  left: 73%;

  transition:
    left 1s ease;
}

.acacia-page10 img {

  width: 200px;
}


/* COEUR */

.coeur-page10 {

  transition:
    filter 1s ease;
}

/* TEXTE FINAL */

.texte-page10{
  position: absolute;

  bottom: 20%;
  right: 8%;
  text-align: left;

  opacity:0;

  transform:
  translateY(20px);

  transition:
  opacity 1.5s ease,
  transform 1.5s ease;
}

.bouton-suite-page10 {

  opacity: 0;

  pointer-events: none;

  transition:
    opacity 1.5s ease;
}

/* ================================================== */
/* RESPONSIVE TELEPHONE */
/* ================================================== */

@media screen and (max-width: 768px) {


/* ---------------- */
/* GLOBAL */

body {

  overflow-x: hidden;
}


br {

  display: none;
}

body.page6 {

  overflow: hidden;

  width: 100vw;
  height: 100vh;
}

.page6 .bouton-suite {

  display: flex;
}
/* ---------------- */
/* TEXTES */

.maison6 .texte-maison {

  font-size: 20px;

  line-height: 1;

  opacity: 1 !important;

  transform:
  translateX(-50%)
  translateY(0px) !important;

  animation: none !important;

  transition: none !important;
  
  width: 140px;

  white-space: normal;
}

p {

  font-size: 20px;

  line-height: 1;
}

.container-texte-gauche {

  width: 100vw;
  height: 100vh;
}


.texte1-gauche,
.texte2-gauche,
.texte3-gauche,
.texte4-gauche,
.texte-page10 {

  left: 50% !important;
  right: auto !important;

  transform:
  translateX(-50%) !important;

  text-align: center;

  width: 85%;
}


/* POSITIONS */

.texte1-gauche {

  top: 10%;
}

.texte2-gauche {

  top: 46%;
}

.texte3-gauche,
.texte4-gauche,
.texte-page10 {

  bottom: 15%;
}
/* ---------------- */
/* BOUTONS */

.bouton-suite {

  width: 38px;
  height: 38px;

  bottom: 2%;
  right: 5%;
}

.bouton-suite-page6 {

  bottom: 8%;
  right: 5%;
}


.texte-bouton {

  font-size: 20px;
  padding-top: 8px;
}


.bouton-amour {

  position: fixed;

  bottom: 16%;

  left: 50%;

  right: auto;

  transform:
  translateX(-50%)
  scale(0.8)
  translateZ(0);

  transform-origin: center;

  white-space: nowrap;

  min-width: 220px;

  display: flex;

  justify-content: center;

  align-items: center;
}


/* ---------------- */
/* FLOCONS */

.flocon img {

  width: 22px;
}


/* ---------------- */
/* COEUR */

.coeur {

  width: 250px;
}


#glaconCanvas {

  width: 250px;
  height: 250px;

  right: 0;
}

.container-coeur {

  top: 55%;
}

/* ---------------- */
/* ENGRENAGES PAGE 3 */

.engrenage {

  width: 170px;
  height: 170px;
}


.engrenage img {

  width: 170px;
  height: 170px;
}


.engrenage1 {

  top: 70%;
  left: 12%;
}

.engrenage2 {

  top: 72%;
  left: 35%;
}

.engrenage3 {

  top: 67%;
  left: 45%;
}

.engrenage4 {

  top: 73%;
  left: 60%;
}

.engrenage9 {

  top: 73%;
  left: -10%;
}

/* ENGRENAGES TELEPHONE */

.engrenage img {

  width: 170px !important;
  height: 170px !important;
}


/* nouveaux centres */

.engrenage1 img {

  transform-origin:
  85px 85px;
}

.engrenage2 img {

  transform-origin:
  57px 69px;
}

.engrenage3 img {

  transform-origin:
  94px 101px;
}

.engrenage4 img {

  transform-origin:
  112px 63px;
}

.engrenage9 img {

  transform-origin:
  84px 84px;
}

/* ---------------- */
/* REGLES */

.regle {

  width: 75%;

  font-size: 24px;

  padding: 18px;
}


.regle1 {

  top: 16%;
}


.regle2 {

  top: 41%;
}


.regle3 {

  top: 66%;
}


/* ---------------- */
/* MAISONS */

.maison img,
.page6 .maison img {

  width: 100px;
}


.maison1 img,
.maison7 img,
.maison13 img,
.maison19 img {

  width: 110px;
}

.maison5 img {
  width: 60px;
}

.maison2 img {
  width: 80px;
}

.maison4 img,
.maison9 img {
  width: 100px;
}

.maison16 img,
.maison21 img {

  width: 90px;
}


/* POSITIONS INDEX */

.maison1 { top: 18%; left: 2%; }

.maison2 { top: 56%; left: 12%; }

.maison3 { top: 25%; left: 37%; }

.maison4 { display: none; }

.maison5 { top: 54%; left: 66%; }

.maison6 { top: 78%; left: 65%; }

.maison7 { display: none; }

.maison8 { top: 78%; left: 5%; }

.maison9 { top: 17%; left: 68%; }

.maison10 { top: 48%; left: 58%; }

.maison11 { top: 84%; left: 32%; }

.maison12 { top: 12%; left: 64%; }

.maison13 { top: 18%; left: 2%; }

.maison14 { top: 53%; left: 12%; }

.maison15 { top: 28%; left: 37%; }

.maison16 { top: 72%; left: 39%; }

.maison17 { top: 54%; left: 66%; }

.maison18 { display: none; }

.maison19 { display: none; }

.maison20 { display: none; }

.maison21 { top: 17%; left: 68%; }

.maison22 { top: 48%; left: 58%; }

.maison23 { top: 84%; left: 32%; }

.maison24 { top: 12%; left: 64%; }



/* ---------------- */
/* NOTES MUSIQUE */

.notes-musique {

  overflow: hidden;
}

.page6 .note {

  width: 30px;
}

/* ---------------- */
/* ACACIAS */

.acacia img {

  width: 130px;
}

.acacia1 { 

  top: 33%;
  left: 32%;

  transform:
  translate(-50%, -50%);
}

/* ---------------- */
/* PAGE 8 */

.container-engrenage {

  width: 220px;
  height: 220px;
  top: 55%;
}


.engrenage-page8 img {

  width: 220px;
}

/* nouveaux centres */

.engrenage5 img {

  transform-origin:
  110px 110px;
}

.engrenage6 img {

  transform-origin:
  74px 89px;
}

.engrenage7 img {

  transform-origin:
  121px 130px;
}

.engrenage8 img {

  transform-origin:
  144px 82px;
}

.engrenage10 img {

  transform-origin:
  110px 110px;
}

/* ---------------- */
/* PAGE 10 */

.container-jack-page10 {

  top: 55%;
  left: 21%;

  transform: scale(0.72);
}


.acacia-page10 {

  top: 40%;
  left: 72%;

  transform: scale(0.72);
}


.acacia-page10 img {

  width: 120px;
}


.texte-page10 {

  bottom: 12%;
  right: 6%;

  width: 70%;
}

.bouton-suite-page10 {

  bottom: 5%;
  right: 5%;
}

/* --------------- */
  html,
  body {

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    overflow: hidden !important;

    position: fixed;
  }


  body.page6 {

    overflow: hidden !important;

    touch-action: none;
  }


  /* empêcher tous les éléments
  de dépasser */

  * {

    max-width: 100vw;
  }


  /* NOTES */

  .notes-musique {

    width: 100vw;

    overflow: hidden;
  }


  /* FLOCONS */

  .flocon {

    overflow: hidden;
  }
}