#banniere .fond {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0px;
  top: 0px;
  background-image: url(../img/banniere/min/fond.jpg);
  background-size: auto 100%;
  background-position: center;
  background-repeat: no-repeat;

  --top: 0vh;
  --depth: -230;
}

#banniere .element_decor {}

#banniere .element_decor .calque_3d {
  position: absolute;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

/* TITLE */
#banniere .titre {
  --depth: -140;
}
#banniere .titre .calque_3d {
  height: 163px;
  width: 326px;
  left: 50%;
  top: 30px;
  transform: translateX(-50%);
}
#banniere .titre .calque_3d img {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0px;
  top: 0px;
}

/* LEFT */
#banniere .bol_plante_1 {
  --depth: -180;
}
#banniere .bol_plante_1 .calque_3d {
  height: 240px;
  width: 320px;
  left: 21px;
  top: 50px;
  background-image: url(../img/banniere/min/bol_plante_1.png);
}
#banniere .bol_plante_3 {
  --depth: -120;
}
#banniere .bol_plante_3 .calque_3d {
  height: 280px;
  width: 220px;
  left: -14px;
  top: 190px;
  background-image: url(../img/banniere/min/bol_plante_2.png);
}
#banniere .bol_plante_2b {
  --depth: -100;
}
#banniere .bol_plante_2b .calque_3d {
  display: none;
  height: 260px;
  width: 382px;
  right: calc(50% + 500px);
  top: 430px;
  background-image: url(../img/banniere/min/pot_plantes_3b.png);
}
#banniere .escalier {
  --depth: -80;
}
#banniere .escalier .calque_3d {
  height: 400px;
  width: 250px;
  left: 0px;
  top: 260px;
  background-image: url(../img/banniere/min/escalier.png);
}
#banniere .cuillier_fee {
  --depth: -150;
}
#banniere .cuillier_fee .calque_3d {
  height: 260px;
  width: 164px;
  left: -14px;
  top: -26px;
  background-image: url(../img/banniere/min/cuillier_fee.png);
}

/* RIGHT */
#banniere .bol_plante_2 {
  --depth: -130;
}
#banniere .bol_plante_2 .calque_3d {
  height: 260px;
  width: 440px;
  right: -30px;
  top: 170px;
  background-image: url(../img/banniere/min/pot_plantes_3b.png);
}
#banniere .bol_plante_5 {
  --depth: -150;
}
#banniere .bol_plante_5 .calque_3d {
  height: 270px;
  width: 270px;
  right: 0px;
  top: 20px;
  background-image: url(../img/banniere/min/bol_centre.png);
}
#banniere .bol_plante_4 {
  --depth: -180;
}
#banniere .bol_plante_4 .calque_3d {
  height: 200px;
  width: 500px;
  right: 50px;
  top: 100px;
  background-image: url(../img/banniere/min/bol_plante_3.png);
}
#banniere .bol_plante_3b {
  --depth: -120;
}
#banniere .bol_plante_3b .calque_3d {
  display: none;
  height: 280px;
  width: 220px;
  left: calc(50% + 500px);
  top: 417px;
  background-image: url(../img/banniere/min/bol_plante_2.png);
}
#banniere .fleurs {
  --depth: -100;
}
#banniere .fleurs .calque_3d {
  height: 400px;
  width: 300px;
  right: 0px;
  top: 270px;
  background-image: url(../img/banniere/min/fleurs.png);
}


/* DECOR FOND */
#banniere .decor_fond {
  --depth: -300;
}
#banniere .decor_fond .calque_3d {
  height: 100vh;
  width: 100vw;
  left: 0px;
  top: 100px;
  background-position: bottom;
  background-size: 100% auto;
  background-image: url(../img/banniere/min/fond2.png);
}


#banniere .title,
#banniere .subtitle {
  color: #fff;
}
.button_reserver {
  /*background-color: #fff;*/
  /*background-color: rgba(27,166,198,.7);*/
}


/*

  FOOTER

*/
#footer_decor {
  transform-style: preserve-3d;
}
#footer_decor .parallax {
  width: 100%;
  --top: 0px;
  --left: 0px;
  --depth: -1;
  will-change: transform;
  transform-origin: bottom left;

  top: auto !important;
  bottom: 0px;
  height: 10px;
}
#footer_decor .element_decor .calque_3d {
  position: fixed;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  top: auto;
  bottom: 0px;
}

#footer_decor .parallax {
  transform: translate3d(50vw, 50vh, var(--z)) scale(var(--scale)) translateX(var(--x)) translateY(var(--y));
}

/**/
#viewport #footer {
  background-color: transparent;
}
#footer_decor {
  top: 0px;
  height: 0px;
}
#footer_decor .bol_plante_1 {
  --depth: -180;
  --y: calc(14vh - 10px);
}
#footer_decor .bol_plante_1 .calque_3d {
  height: 240px;
  width: 320px;
  left: 0px;
  bottom: 0px;
  background-image: url(assets/img/banniere/bol_plante_1.png);
}
#footer_decor .bol_plante_3 {
  --depth: -180;
  --y: calc(18.5vh - 10px);
  --depth: -220;
}
#footer_decor .bol_plante_3 .calque_3d {
  height: 200px;
  width: 220px;
  left: auto;
  right: -15px;
  bottom: 0px;
  background-image: url(assets/img/banniere/bol_plante_3.png);
}


.test {
  position: relative;
  height: 10px;
  width: 100%;
  bottom: 0px;
  left: 0px;
  z-index: 50;
  margin-top: -10px;
  background-color: #21451f;
  background-color: #565739;
  box-shadow: 0 -5px 10px #565739;
}
#footer_decor .bol_plante_1 {
  --depth: -180;
  --y: calc(14vh - 10px);
  /*display: none;*/
}
#footer_decor .bol_plante_1 .calque_3d {
  height: 240px;
  width: 320px;
  left: 0px;
  bottom: 0px;
  background-image: url(assets/img/banniere/bol_plante_1.png);
}
#footer_decor .bol_plante_3 {
  --depth: -180;
  --y: calc(18.5vh - 10px);
  --depth: -220;
  /*display: none;*/
}
#footer_decor .bol_plante_3 .calque_3d {
  height: 200px;
  width: 220px;
  left: auto;
  right: -15px;
  bottom: 0px;
  background-image: url(assets/img/banniere/bol_plante_3.png);
}



/*
  
  RESPONSIVE

*/
@media screen and (min-width: 1400px) {
  #viewport {
    --height-banniere: 380px;
  }

  /* LEFT */
  #banniere .bol_plante_1 .calque_3d {
    transform: scale(1.4) translate(25px, 38px);
  }
  #banniere .bol_plante_3 .calque_3d {
    transform: scale(1.6) translate(42px, 95px);
  }
  #banniere .escalier .calque_3d {
    transform: scale(1.4) translate(25px, 150px);
  }
  #banniere .cuillier_fee .calque_3d {
    transform: scale(1.2) translate(16px, 14px);
  }
  #viewport #container::before {
    height: calc(100% - 550px);
    top: 400px;
  }

  /* RIGHT */
  #banniere .bol_plante_2 .calque_3d {
    transform: scale(1.4) translate(-10px, 79px);
  }
  #banniere .bol_plante_5 .calque_3d {
    transform: scale(1.25) translate(-10px, 29px);
  }
  #banniere .bol_plante_4 .calque_3d {
    transform: scale(1.4) translate(-12px, 34px);
  }
  #banniere .fleurs .calque_3d {
    transform: scale(1.9) translate(-68px, 94px);
  }
  #viewport #container::after {
    height: calc(100% - 420px);
    top: 350px;
  }

  /* FOOTER */
  #footer_decor .bol_plante_1 .calque_3d {
    transform: scale(1.4) translate(27px, -33px);
  }
  #footer_decor .bol_plante_3 .calque_3d {
    transform: scale(1.5) translate(-31px, -44px);
  }
}

@media screen and (min-width: 1680px) {
  #viewport {
    --height-banniere: 380px;
    --max-width: 1100px;
  }

  /* LEFT */
  #banniere .bol_plante_1 .calque_3d {
    transform: scale(1.6) translate(42px, 66px);
  }
  #banniere .bol_plante_3 .calque_3d {
    transform: scale(2) translate(46px, 128px);
  }
  #banniere .bol_plante_2b .calque_3d {
    display: block;
  }
  #banniere .escalier .calque_3d {
    transform: scale(1.7) translate(50px, 185px);
  }
  #banniere .cuillier_fee .calque_3d {
    transform: scale(1.5) translate(22px, 31px);
  }
  #viewport #container::before {
    height: calc(100% - 510px);
    top: 440px;
  }

  /* RIGHT */
  #banniere .bol_plante_2 .calque_3d {
    transform: scale(1.4) translate(-59px, 60px);
  }
  #banniere .bol_plante_5 .calque_3d {
    transform: scale(1.25) translate(-10px, 13px);
  }
  #banniere .bol_plante_4 .calque_3d {
    transform: scale(1.4) translate(-96px, 33px);
  }
  #banniere .bol_plante_3b .calque_3d {
    display: block;
  }
  #banniere .fleurs .calque_3d {
    transform: scale(1.9) translate(-68px, 94px);
  }
  #viewport #container::after {
    height: calc(100% - 420px);
    top: 390px;
  }

  /* FOOTER */
  #footer_decor .bol_plante_1 .calque_3d {
    transform: scale(1.4) translate(27px, -33px);
  }
  #footer_decor .bol_plante_3 .calque_3d {
    transform: scale(1.5) translate(-31px, -44px);
  }
}