.maison {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    z-index: 9;
    position: relative;
    --largeurEtage: 640px;
    margin-bottom: 29px;
}

.fenetre {
    /* position: absolute; */
    /* top: 0; */
    /* left: 0; */
    /* width: 100vw; */
    min-height: 100vh;
    background: #95f3ffdb;
}

.etage {
    width: var(--largeurEtage);
    height: 0px;
    transition: height cubic-bezier(0.25, 0.1, 0, 2.15) 1s;
    border: 1px solid;
    background-image: url(images/gabarit.gif);
    background-size: 100% auto;
    background-repeat: no-repeat;
}

.etage.active {
    height: calc(var(--largeurEtage) * 1080 / 1920);
}

.toit {
    width: 800px;
    height: 100px;
    background-image: url(images/toit.png);
    margin-left: auto;
    margin-right: auto;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center bottom;
    margin-bottom: -7px;
    z-index: 10;
    position: relative;
    max-width: 100%;
}

@keyframes bounce {
  from,
  20%,
  53%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}
@keyframes wobble {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }

  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }

  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }

  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }

  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.toit2, .toit, .maison {
    animation-duration: 1s;
    animation-timing-function: ease;
}
h1 {
    margin: 0;
    font-family: "asterix";
    font-size: 24px;
    color: #F44336;
    text-align: center;
    padding-top: 20px;
}
@keyframes rubberBand {
  from {
    transform: translate3d(0px, 0px, 0);
  }

  30% {
    transform: translate3D(0px, 25px, 0);
  }

  40% {

    transform: translate3d(0px, 50px, 0);
  }

  50% {

    transform: translate3d(0px, 25px, 0);
  }

  65% {

    transform: translate3d(0px, 15px, 0);
  }

  75% {

    transform: translate3d(0px, 5px, 0);
  }

  to {
    transform: translate3d(0px, 0px, 0);
  }
}

.maison:after {content: "";display: block;position: absolute;width: 100%;height: 50px;background: #8ba07f;z-index: -1;margin-top: 29px;}

.cr {
    font-family: sans-serif;
    font-size: 12px;
    text-align: center;
    background: #8ba07f;
    color: #FFF;
    padding: 10px;
}

.cr a {
    color: inherit;
}