/* ==================================================================
                             GLOBAL
====================================================================*/

/* input phone international */
.iti__flag {
  background-image: url("../media/flags.png");
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .iti__flag {
    background-image: url("../media/flags@2x.png");
  }
}

* {
  box-sizing: content-box;
}

body {
  background: #f8f7f7;
  margin: 0;
  position: relative;
}

section {
  padding-left: 2rem !important;
  padding-right: 2rem !important;
}

figure {
  margin: 0;
}

dialog {
  background: transparent;
  border: none;
  padding: 0;
}

fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

time,
ins {
  text-decoration: none;
}

/*-------- Police -------*/

@font-face {
  font-family: "Didot";
  src: url("../fonts/didot/Didot-Medium.eot"); /* IE9+ Compat Modes */
  src:
    url("../fonts/didot/Didot-Medium.woff2") format("woff2"),
    /* Super modern browsers */ url("../fonts/didot/Didot-Medium.woff")
      format("woff"),
    /* Modern browsers */ url("../fonts/didot/Didot-Medium.ttf")
      format("truetype"),
    /* Safari, Android, iOS */
      url("../fonts/didot/Didot-Medium.svg#Didot-Medium") format("svg"); /* Legacy iOS */
  font-display: swap;
}

@font-face {
  font-family: "Didot-Italic";
  src: url("../fonts/didot/Didot-Italic.eot"); /* IE9+ Compat Modes */
  src:
    url("../fonts/didot/Didot-Italic.woff2") format("woff2"),
    /* Super modern browsers */ url("../fonts/didot/Didot-Italic.woff")
      format("woff"),
    /* Modern browsers */ url("../fonts/didot/Didot-Italic.ttf")
      format("truetype"),
    /* Safari, Android, iOS */
      url("../fonts/didot/Didot-Italic.svg#Didot-Italic") format("svg"); /* Legacy iOS */
  font-display: swap;
}

@font-face {
  font-family: "Didot-Roman";
  src: url("../fonts/didot/Didot-Roman.eot"); /* IE9+ Compat Modes */
  src:
    url("../fonts/didot/Didot-Roman.woff2") format("woff2"),
    /* Super modern browsers */ url("../fonts/didot/Didot-Roman.woff")
      format("woff"),
    /* Modern browsers */ url("../fonts/didot/Didot-Roman.ttf")
      format("truetype"),
    /* Safari, Android, iOS */
      url("../fonts/didot/Didot-Roman.svg#Didot-Roman") format("svg"); /* Legacy iOS */
  font-display: swap;
}
@font-face {
  font-family: "Muli";
  src: url("../fonts/muli/Muli-Light.eot"); /* IE9+ Compat Modes */
  src:
    url("../fonts/muli/Muli-Light.woff2") format("woff2"),
    /* Super modern browsers */ url("../fonts/muli/Muli-Light.woff")
      format("woff"),
    /* Modern browsers */ url("../fonts/muli/Muli-Light.ttf")
      format("truetype"),
    /* Safari, Android, iOS */
      url("../fonts/muli/Muli-Light.svg#Muli-Light") format("svg"); /* Legacy iOS */
  font-display: swap;
}

a,
p,
span,
h4,
h5,
h6,
input,
textarea {
  font-family: "Muli", Arial, Helvetica, sans-serif;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
}

h1 {
  font-family: "Didot", Garamond, "Times New Roman", serif;
  -webkit-font-smoothing: antialiased;
}

h2,
h3 {
  font-family: "Didot-Roman", Garamond, "Times New Roman", serif;
  -webkit-font-smoothing: antialiased;
}

strong,
.strong {
  font-weight: 600;
}

/*-------- Couleur -------*/

.black {
  color: rgb(16, 28, 54);
}

.blackClair {
  color: rgba(16, 28, 54, 0.73);
}

.grey {
  color: rgb(117, 117, 117);
}

.gris_bordure {
  color: rgb(220, 220, 220);
}
.beige_bordure {
  color: rgb(162, 158, 120);
}
.vert {
  color: rgb(81, 150, 78);
}
.vertClair {
  color: rgb(58, 170, 53);
}
.gris {
  color: rgb(76, 76, 76);
}

.minuscule {
  text-transform: lowercase !important;
  font-size: 0.82rem;
}

/*-------- Icone -------*/

@font-face {
  font-family: "icomoon";
  src: url("../fonts/icomoon/icomoon.eot?vjgt5z");
  src:
    url("../fonts/icomoon/icomoon.eot?vjgt5z#iefix")
      format("embedded-opentype"),
    url("../fonts/icomoon/icomoon.ttf?vjgt5z") format("truetype"),
    url("../fonts/icomoon/icomoon.woff?vjgt5z") format("woff"),
    url("../fonts/icomoon/icomoon.svg?vjgt5z#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"],
[class*=" icon-"] {
  font-family: "icomoon" !important;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-pinterest:before {
  content: "\e900";
}
.icon-bed:before {
  content: "\e901";
}
.icon-bouilloire:before {
  content: "\e902";
}
.icon-bus:before {
  content: "\e903";
}
.icon-cafe:before {
  content: "\e904";
}
.icon-casserole:before {
  content: "\e905";
}
.icon-chaleur:before {
  content: "\e906";
}
.icon-email:before {
  content: "\e907";
}
.icon-event:before {
  content: "\e908";
}
.icon-frigo:before {
  content: "\e909";
}
.icon-microwave:before {
  content: "\e90a";
}
.icon-people:before {
  content: "\e90b";
}
.icon-phone:before {
  content: "\e90c";
}
.icon-position:before {
  content: "\e90d";
}
.icon-shower:before {
  content: "\e90e";
}
.icon-size:before {
  content: "\e90f";
}
.icon-star:before {
  content: "\e910";
}
.icon-subway:before {
  content: "\e911";
}
.icon-taxi:before {
  content: "\e912";
}
.icon-time:before {
  content: "\e913";
}
.icon-time-plein:before {
  content: "\e914";
}
.icon-train:before {
  content: "\e915";
}
.icon-tv:before {
  content: "\e916";
}
.icon-walk:before {
  content: "\e917";
}
.icon-wifi:before {
  content: "\e918";
}
.icon-work:before {
  content: "\e919";
}
.icon-checked:before {
  content: "\e91a";
}
.icon-fireplace:before {
  content: "\e91b";
}
.icon-error_outline:before {
  content: "\e91c";
}
.icon-quill:before {
  content: "\e91d";
}
.icon-credit-card:before {
  content: "\e93f";
}
.icon-eye:before {
  content: "\e9ce";
}
.icon-sun:before {
  content: "\e9d4";
}
.icon-star-full:before {
  content: "\e9d9";
}
.icon-arrow-right2:before {
  content: "\ea3c";
}
.icon-facebook:before {
  content: "\ea90";
}
.icon-instagram:before {
  content: "\ea92";
}
.icon-IE:before {
  content: "\eadb";
}

/*----------------------------
           Loader
----------------------------*/

/* Spinner */

#spinner {
  position: absolute;
  top: 50%;
  right: -2rem;
  transform: translate(50%, -50%);
}

@keyframes ldio-spinnerChild {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.ldio-spinnerChild > div > div {
  transform-origin: 50px 50px;
  animation: ldio-spinnerChild 3.0303030303030303s linear infinite;
  opacity: 0.8;
}
.ldio-spinnerChild > div > div > div {
  position: absolute;
  left: 15px;
  top: 15px;
  width: 35px;
  height: 35px;
  border-radius: 35px 0 0 0;
  transform-origin: 50px 50px;
}
.ldio-spinnerChild > div div:nth-child(1) {
  animation-duration: 0.7575757575757576s;
}
.ldio-spinnerChild > div div:nth-child(1) > div {
  background: #51964e;
  transform: rotate(0deg);
}
.ldio-spinnerChild > div div:nth-child(2) {
  animation-duration: 1.0101010101010102s;
}
.ldio-spinnerChild > div div:nth-child(2) > div {
  background: #c9a96a;
  transform: rotate(0deg);
}
.ldio-spinnerChild > div div:nth-child(3) {
  animation-duration: 1.5151515151515151s;
}
.ldio-spinnerChild > div div:nth-child(3) > div {
  background: #101c36;
  transform: rotate(0deg);
}
.ldio-spinnerChild > div div:nth-child(4) {
  animation-duration: 3.0303030303030303s;
}
.ldio-spinnerChild > div div:nth-child(4) > div {
  background: #549fc8;
  transform: rotate(0deg);
}
.loadingio-spinner-wedges-spinner {
  width: 80px;
  height: 80px;
  display: inline-block;
  overflow: hidden;
  background: none;
}
.ldio-spinnerChild {
  width: 100%;
  height: 100%;
  position: relative;
  transform: translateZ(0) scale(0.8);
  backface-visibility: hidden;
  transform-origin: 0 0; /* see note above */
}
.ldio-spinnerChild div {
  box-sizing: content-box;
}

/* Search */

#finder {
  position: absolute;
  right: 4rem;
  transform: translate(100%, -50%);
  top: 50%;
}

@keyframes ldio-searchChild {
  0% {
    transform: translate(1px, 1px);
  }
  33.33% {
    transform: translate(51px, 1px);
  }
  66.66% {
    transform: translate(21px, 51px);
  }
  100% {
    transform: translate(1px, 1px);
  }
}

.ldio-searchChild > div {
  transform: scale(0.9);
  transform-origin: 50px 50px;
}

.ldio-searchChild > div > div {
  animation: ldio-searchChild 1.075268817204301s linear infinite;
  position: absolute;
}

.ldio-searchChild > div > div div:nth-child(1) {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 6px solid rgb(81, 150, 78);
  background: transparent;
}

.ldio-searchChild > div > div div:nth-child(2) {
  width: 8.5px;
  height: 25.5px;
  transform: rotate(-45deg);
  background: rgb(81, 150, 78);
  border-radius: 0 0 4px 4px;
  position: absolute;
  top: 34px;
  left: 42.5px;
}
.loadingio-spinner-magnify-search {
  width: 80px;
  height: 80px;
  display: inline-block;
  overflow: hidden;
  background: none;
}
.ldio-searchChild {
  width: 100%;
  height: 100%;
  position: relative;
  transform: translateZ(0) scale(0.8);
  backface-visibility: hidden;
  transform-origin: 0 0; /* see note above */
}
.ldio-searchChild div {
  box-sizing: content-box;
}

/* Loader */
#loader {
  position: absolute;
  right: -1rem;
  transform: translate(100%, -50%);
  top: 50%;
}

@keyframes ldio-loader-r {
  0%,
  25%,
  50%,
  75%,
  100% {
    animation-timing-function: cubic-bezier(0, 1, 0, 1);
  }
  0% {
    transform: scale(0.7000000000000001) rotate(180deg);
  }
  25% {
    transform: scale(0.7000000000000001) rotate(270deg);
  }
  50% {
    transform: scale(0.7000000000000001) rotate(360deg);
  }
  75% {
    transform: scale(0.7000000000000001) rotate(450deg);
  }
  100% {
    transform: scale(0.7000000000000001) rotate(540deg);
  }
}
@keyframes ldio-loader-z {
  0%,
  50%,
  100% {
    animation-timing-function: cubic-bezier(1, 0, 0, 1);
  }
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.5);
  }
}
@keyframes ldio-loader-p {
  0%,
  50%,
  100% {
    animation-timing-function: cubic-bezier(1, 0, 0, 1);
  }
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes ldio-loader-c {
  0%,
  25%,
  50%,
  75%,
  100% {
    animation-timing-function: cubic-bezier(0, 1, 0, 1);
  }
  0% {
    background: #51964e;
  }
  25% {
    background: #c9a96a;
  }
  50% {
    background: #101c36;
  }
  75% {
    background: #549fc8;
  }
  100% {
    background: #51964e;
  }
}
.ldio-loaderChild > div {
  animation: ldio-loader-r 4s linear infinite;
  transform-origin: 50px 50px;
}
.ldio-loaderChild > div > div {
  width: 100px !important;
  height: 100px !important;
  position: absolute;
  animation: ldio-loader-z 1s linear infinite;
  transform-origin: 100px 100px;
}
.ldio-loaderChild > div > div div {
  position: absolute;
  width: 50px;
  height: 50px;
  background: #51964e;
  transform-origin: 25px 25px;
}
.ldio-loaderChild > div > div div:nth-child(1) {
  left: 0px;
  top: 0px;
  animation:
    ldio-loader-p 1s linear infinite,
    ldio-loader-c 4s linear infinite;
}
.ldio-loaderChild > div > div div:nth-child(2) {
  left: 50px;
  top: 0px;
  animation:
    ldio-loader-p 1s linear infinite,
    ldio-loader-c 4s linear infinite;
}
.ldio-loaderChild > div > div div:nth-child(3) {
  left: 0px;
  top: 50px;
  animation:
    ldio-loader-p 1s linear infinite,
    ldio-loader-c 4s linear infinite;
}
.ldio-loaderChild > div > div div:nth-child(4) {
  left: 50px;
  top: 50px;
  transform: scale(1);
  animation: ldio-loader-c 4s linear infinite;
}
.loadingio-spinner-chunk-loader {
  width: 74px;
  height: 74px;
  display: inline-block;
  overflow: hidden;
  background: none;
}
.ldio-loaderChild {
  width: 100%;
  height: 100%;
  position: relative;
  transform: translateZ(0) scale(0.74);
  backface-visibility: hidden;
  transform-origin: 0 0; /* see note above */
}
.ldio-loaderChild div {
  box-sizing: content-box;
}

button.attente {
  background-color: rgb(117, 117, 117) !important;
  cursor: default !important;
  transform: none !important;
  transition: background-color ease-in-out 0.2s !important;
  box-shadow: 2px 8px 4px -6px rgba(0, 0, 0, 0.5) !important;
}

.loader {
  position: relative;
  height: min-content;
}

/*----------------------------
           Bouton
----------------------------*/
button {
  outline-style: none;
}

button:active {
  background: initial;
}

.button {
  background-color: #c9a96a;
  color: white;
  border: none;
  font-size: 100%;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: all 0.5s ease-in-out;
  letter-spacing: 2px;
  box-shadow: 20px 19px 34px -13px rgba(0, 0, 0, 0.2);
  outline: none;
  text-align: center;
}

.button:hover {
  box-shadow: 2px 8px 4px -6px rgba(0, 0, 0, 0.5);
  transform: scale(0.97);
}

.button:active {
  background-color: green;
}

.btn-2 {
  display: inline-block;
  position: relative;
  text-decoration: none;
}

.btn-2 > span {
  display: block;
}
.btn-2::before,
.btn-2::after {
  content: "";
  width: 0;
  height: 1px;
  position: absolute;
  transition: all 0.2s linear;
  background: rgb(220, 220, 220);
}
.btn-2 > span::before,
.btn-2 > span::after {
  content: "";
  width: 1px;
  height: 0;
  position: absolute;
  transition: all 0.2s linear;
  background: rgb(220, 220, 220);
}
.btn-2:hover::before,
.btn-2:hover::after {
  width: 100%;
}
.btn-2:hover > span::before,
.btn-2:hover > span::after {
  height: 100%;
}
.btn-2::before,
.btn-2::after {
  transition-delay: 0s;
}
.btn-2 > span::before,
.btn-2 > span::after {
  transition-delay: 0.2s;
}
.btn-2::before {
  right: 0;
  top: 0;
}
.btn-2::after {
  left: 0;
  bottom: 0;
}
.btn-2 > span::before {
  left: 0;
  top: 0;
}
.btn-2 > span::after {
  right: 0;
  bottom: 0;
}
.btn-2:hover::before,
.btn-2:hover::after {
  transition-delay: 0.2s;
}
.btn-2:hover > span::before,
.btn-2:hover > span::after {
  transition-delay: 0s;
}

.btn-2:hover {
  border: none !important;
}

/*----------------------------
           Cookie
----------------------------*/

#cookie {
  display: block;
  z-index: 10;
  background: #f8f7f7;
  position: fixed;
  top: 20rem;
  left: 0;
  z-index: 105;
  transform-origin: right bottom;
  max-width: 30rem;
  min-width: 300px;
  width: 20%;
  text-align: center;
  padding: 1rem;
  margin: 0;
  box-sizing: content-box;
  border: 1px solid rgb(162, 158, 120);
  box-shadow: 3px 6px 20px rgba(0, 0, 0, 0.2);
  transition: transform ease-in 0.5s;
  transform: translateX(-111%);
}

#cookie p {
  margin-top: 0;
}

#cookie div {
  transition: max-height 0.6s ease-in-out;
  max-height: 0rem;
  margin-bottom: 0.8rem;
  overflow: hidden;
  justify-content: center;
  display: flex;
  align-items: center;
}

#cookie div.visible {
  max-height: 2rem;
}

#cookie label {
  font-family: "Muli", Arial, Helvetica, sans-serif;
  font-size: 0.8rem;
}

#cookie.visible {
  transform: translateX(0%);
}

body.modal-active #cookie {
  pointer-events: none;
  transform: translateX(-111%);
}

#cookie a {
  cursor: pointer;
  text-decoration: underline;
  color: rgba(16, 28, 54, 0.73);
}

/*----------------------------
      Bouton Facebook
----------------------------*/

.footer-left {
  margin: 0;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-left: 1.5rem;
}

.wrapper {
  display: -webkit-box;
  display: flex;
  margin: 0 2rem;
}
.container {
  color: white;
  background-color: white;
  border-radius: 2px;
  box-shadow: 0 35px 80px 7px rgba(0, 0, 0, 0.1);
  margin: 0 5px;
  min-width: 70px;
  min-height: 70px;
  -webkit-perspective: 1000px;
  perspective: 1000px;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  z-index: 0;
}
.container--facebook {
  background-color: #37508d;
}
.container--blog {
  background-color: #51964e;
}
.container--pinterest {
  background-color: #fd3738;
}
.container--instagram {
  background: radial-gradient(
    circle at 30% 107%,
    #fdf497 0%,
    #fdf497 5%,
    #fd5949 45%,
    #d6249f 60%,
    #285aeb 90%
  );
}
.ion {
  position: absolute;
  left: 50%;
  top: 40%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.ion.ion-social-facebook {
  color: #37508d;
}
.ion.ion-social-blog {
  color: #51964e;
}
.ion.ion-social-instagram {
  color: #195484;
}
.ion.ion-social-pinterest {
  color: #fd3738;
}
.box {
  -webkit-box-align: end;
  align-items: flex-end;
  background-color: white;
  box-shadow: 0 20px 60px 0px rgba(0, 0, 0, 0.08);
  border-radius: 2px;
  color: white;
  font-size: 2rem;
  -webkit-box-pack: center;
  justify-content: center;
  position: relative;
  text-align: center;
  -webkit-transition: -webkit-transform 0.8s;
  transition: -webkit-transform 0.8s;
  transition: transform 0.8s;
  transition:
    transform 0.8s,
    -webkit-transform 0.8s;
  -webkit-transform-style: transform-3d;
  transform-style: transform-3d;
  -webkit-perspective: 1000px;
  perspective: 1000px;
  height: 70px;
  width: 70px;
  z-index: 3;
}
.box > * {
  -webkit-transition: -webkit-transform 0.8s;
  transition: -webkit-transform 0.8s;
  transition: transform 0.8s;
  transition:
    transform 0.8s,
    -webkit-transform 0.8s;
  -webkit-transform-style: transform-3d;
  transform-style: transform-3d;
}
.box--left {
  -webkit-transition: -webkit-transform 0.8s;
  transition: -webkit-transform 0.8s;
  transition: transform 0.8s;
  transition:
    transform 0.8s,
    -webkit-transform 0.8s;
}
.box--middle {
  -webkit-transition: -webkit-transform 0.4s
    cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: -webkit-transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition:
    transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    -webkit-transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.box--right {
  -webkit-transition: -webkit-transform 0.7s
    cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: -webkit-transform 0.7s
    cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: transform 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition:
    transform 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    -webkit-transform 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.container:hover .box--left,
.active .box--left {
  -webkit-transform: translate(-20px, -20px) rotate(-90deg) rotateY(180deg);
  transform: translate(-20px, -20px) rotate(-90deg) rotateY(180deg);
}
.container:hover .box--left .ion,
.active .box--left .ion {
  -webkit-transform: rotate(270deg) rotateY(180deg) translate(-40%, -55%);
  transform: rotate(270deg) rotateY(180deg) translate(-40%, -55%);
}
.container:hover .box--left .count,
.active .box--left .count {
  -webkit-transform: rotate(270deg) rotateY(180deg) translate(-150%, 80%);
  transform: rotate(270deg) rotateY(180deg) translate(-150%, 80%);
}
.container:hover .box--middle,
.active .box--middle {
  -webkit-transform: translateY(-20px);
  transform: translateY(-20px);
}
.container:hover .box--right,
.active .box--right {
  -webkit-transform: translate(20px, -20px);
  transform: translate(20px, -20px);
}
.count {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.4);
  display: block;
  font-weight: 800;
  text-align: center;
  position: absolute;
  left: 50%;
  top: 80%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.follow {
  bottom: -6px;
  color: white;
  display: block;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  position: absolute;
}
.follow--left {
  right: 0;
  -webkit-transform: translate(-14px, -10px);
  transform: translate(-14px, -10px);
}
.follow--middle {
  left: 50%;
  -webkit-transform: translate(-50%, -10px);
  transform: translate(-50%, -10px);
}
.follow--right {
  left: 0;
  -webkit-transform: translate(6px, -10px);
  transform: translate(6px, -10px);
}

@media screen and (max-width: 360px) {
  .box {
    height: 60px;
    width: 60px;
  }
  .container {
    margin: 0 3px;
    min-width: 50px;
    min-height: 50px;
  }
  .follow--left {
    -webkit-transform: translate(-16px, -10px);
    transform: translate(-16px, -10px);
  }
  .follow--right {
    -webkit-transform: translate(3px, -10px);
    transform: translate(3px, -10px);
  }
}

/*----------------------------
           Divers
----------------------------*/

.relative {
  position: relative;
}

section h2 {
  margin-left: 3%;
  font-size: 4rem;
  margin-bottom: 3.5rem;
  color: rgb(16, 28, 54);
  margin-top: 0;
  font-weight: 100;
  width: 90%;
  text-shadow: 4px 6px 4px rgba(100, 100, 100, 0.2);
}

/* ==================================================================
                              MODAL ERREUR
====================================================================*/

#fond-modal-erreur {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(16, 28, 54, 0.4);
  z-index: 100;
  animation: apparition-fond-modal 0.6s ease-in-out;
}

@keyframes apparition-modal {
  from {
    background-color: rgba(16, 28, 54, 0);
  }
  to {
    background-color: rgba(16, 28, 54, 0.4);
  }
}

#fond-modal-erreur .modal-erreur {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  background-color: white;
  border: rgb(162, 158, 120);
  border-radius: 3px;
  width: auto;
  max-width: 90vw;
  padding: 2rem;
  animation: apparition-modal 0.6s ease-in-out;
  min-width: 25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@keyframes apparition-modal {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-80%) scale(0.1);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(-50%) scale(1);
  }
}

#fond-modal-erreur .modal-erreur p {
  position: relative;
  font-size: 1.8rem;
  font-weight: 500;
  font-family: "Didot-Roman", Garamond, "Times New Roman", serif;
  margin-bottom: 1rem;
  text-align: center;
  margin-top: 0;
}

#fond-modal-erreur .modal-erreur .flex {
  display: flex;
  margin-top: 2rem;
}

#fond-modal-erreur .modal-erreur .button {
  margin-left: auto;
  margin-right: auto;
  font-size: 1.5rem;
  text-transform: uppercase;
}

#fond-modal-erreur .modal-erreur span {
  color: rgba(16, 28, 54, 0.73);
  font-size: 1rem;
  text-align: center;
  display: inline-block;
}

/*InfoMessage*/
.info {
  position: fixed;
  right: 0.6rem;
  bottom: 0;
  width: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: white;
  border: 1px solid rgb(162, 158, 120);
  box-shadow: 3px 6px 20px rgba(0, 0, 0, 0.2);
  padding: 1rem;
  animation: apparition-err 5s;
  max-width: 80vw;
  z-index: 100;
}

@keyframes apparition-err {
  0% {
    transform: translateY(100%);
  }
  12% {
    transform: translateY(0%);
  }
  88% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(100%);
  }
}

.info.erreur {
  background-color: #c56d59;
}

.info p {
  color: rgb(16, 28, 54);
  font-size: 1.1rem;
  text-align: center;
  display: flex;
  align-items: center;
  width: max-content;
  margin-top: 0;
  max-width: 80vw;
}

.info span:not(.icone) {
  color: rgba(16, 28, 54, 0.73);
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  text-align: center;
  display: block;
}

.info p .icone {
  color: rgb(16, 28, 54);
  margin-right: 0.5rem;
  font-size: 1.5rem;
}

.info p .icone:before {
  content: "\e919";
  color: rgb(81, 150, 78);
}

.info.erreur p .icone:before {
  content: "\e901";
  color: rgb(16, 28, 54);
}

/* ==================================================================
                             Message Covid
====================================================================*/

#message-covid {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #4c4c4c;
  z-index: 60;
  display: none;
}

#message-covid.visible {
  display: block;
}

#message-covid h5 {
  font-size: 1.2rem;
  color: white;
  text-align: center;
  font-weight: 600;
  margin: 0.5rem 2rem 0 2rem;
}

#message-covid p {
  text-align: center;
  color: #c9a96a;
  margin: 0.5rem;
}

#closeModalCovid {
  height: 2rem;
  width: 2rem;
  cursor: pointer;
  position: absolute;
  z-index: 10;
  top: 0.2rem;
  right: 0.5rem;
  opacity: 1;
  transition: opacity 0.3s;
}

#closeModalCovid span {
  height: 100%;
  width: 100%;
  position: relative;
  display: block;
}

#closeModalCovid span:before,
#closeModalCovid span:after {
  content: "";
  height: 1px;
  background-color: rgb(162, 158, 120);
  width: 100%;
  display: block;
  position: absolute;
  top: 50%;
  transition: all 0.3s ease-out;
}

#closeModalCovid:hover span:before,
#closeModalCovid:hover span:after {
  transform: rotate(0);
}

#closeModalCovid span:before {
  transform: rotate(45deg);
}
#closeModalCovid span:after {
  transform: rotate(-45deg);
}

/* ==================================================================
                             Header
====================================================================*/

.preload header {
  transform: translateY(-100%);
}

header {
  position: fixed;
  z-index: 50;
  top: 0;
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  grid-template-rows: repeat(2, 3.8rem);
  background: linear-gradient(to bottom, white 50%, transparent 50%);
  background-size: 100% 202%;
  background-position-y: 99%;
  width: 100vw;
  transform: translateY(0);
  transition:
    transform 0.7s cubic-bezier(0.4, 0, 0, 1) 0.4s,
    background-position-Y 0.7s cubic-bezier(0.4, 0, 0, 1) 0.2s;
  box-sizing: border-box;
}

header #logo {
  position: relative;
  grid-column-start: 7;
  grid-column-end: 9;
  grid-row-start: 1;
  grid-row-end: 3;
  margin-bottom: -0.8px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

header #logo img {
  max-width: 70%;
  max-height: 6rem;
}

header #logo img:nth-child(2) {
  position: absolute;
  opacity: 0;
  transition: opacity 0.5s 0.2s;
}

header.fill #logo img:nth-child(2) {
  opacity: 1;
}

header.solid #logo img:nth-child(1) {
  opacity: 0;
}

header.solid #logo img:nth-child(2) {
  opacity: 1;
}

header ul {
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-family: "Muli", Arial, Helvetica, sans-serif;
  font-size: 0.8rem;
  margin: 0;
  padding: 0;
  grid-column-start: 2;
  grid-column-end: 4;
}

@media screen and (max-width: 1024px) {
  header ul {
    grid-column-end: 5;
  }
}

@media screen and (max-width: 900px) {
  header ul {
    position: absolute;
    width: 100%;
    flex-direction: column;
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 3;
    padding-top: 0.5rem;
    visibility: hidden;
  }
}

@media screen and (max-width: 700px) {
  header ul {
    grid-column-start: 1;
    grid-column-end: 2;
    padding-top: 0;
  }
}

header ul li {
  list-style-type: none;
  visibility: hidden;
  cursor: pointer;
  background: white;
  box-shadow: 2px 2px 6px rgba(76, 76, 76, 0.6);
  height: 80%;
  width: 22%;
  transform: rotateY(-90deg) translateX(-80%);
  perspective-origin: center;
  perspective: 4px;
  transform-style: preserve-3d;
  transition-property: visibility, transform;
}

@media screen and (max-width: 900px) {
  header ul li {
    height: 100%;
    width: 100%;
    margin-bottom: 0.5rem;
    min-height: 3rem;
    max-width: 4rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

header ul li:nth-child(1) {
  transform: rotateY(-90deg) translateX(0);
  transition: ease-in-out 0.3s 0.8s;
}

header ul li:nth-child(2) {
  transition: ease-in-out 0.3s 0.6s;
}

header ul li:nth-child(3) {
  transition: ease-in-out 0.3s 0.4s;
}

header ul li:nth-child(4) {
  transition: ease-in-out 0.3s 0.2s;
}

header ul li:nth-child(5) {
  transition: ease-in-out 0.3s;
}

header ul.afficher li:nth-child(1) {
  transition: ease-in-out 0.3s;
}

header ul.afficher li:nth-child(2) {
  transition: ease-in-out 0.3s 0.2s;
}

header ul.afficher li:nth-child(3) {
  transition: ease-in-out 0.3s 0.4s;
}

header ul.afficher li:nth-child(4) {
  transition: ease-in-out 0.3s 0.6s;
}

header ul.afficher li:nth-child(5) {
  transition: ease-in-out 0.3s 0.8s;
}

header ul li a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  color: #c9a96a;
  text-decoration: none;
  transition: 0.2s;
}

header ul li:hover a {
  color: black;
  transform: scale(1.1);
}

header ul.afficher {
  transform: translateX(0);
  z-index: 42;
  visibility: visible;
}

header ul.afficher li {
  visibility: visible;
  transform: rotateY(0deg);
}

header #phone {
  grid-column-start: 12;
  grid-column-end: 14;
  grid-row-start: 1;
}

header #menu {
  grid-column-start: 14;
  grid-column-end: 15;
  grid-row-start: 1;
  border-right: 1px solid hsla(0, 0%, 100%, 0.3);
}

#nav_gauche {
  grid-column-start: 1;
  grid-column-end: 7;
  grid-row-start: 2;
}

#nav_droite {
  grid-column-start: 9;
  grid-column-end: 15;
  grid-row-start: 2;
  border-right: 1px solid hsla(0, 0%, 100%, 0.3);
}

#nav_gauche,
#nav_droite,
#phone {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

#nav_gauche a,
#nav_droite a,
header #phone {
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color: white;
  text-transform: uppercase;
  height: 100%;
  width: 100%;
}

#nav_gauche a,
#nav_droite a,
header #logo,
header #phone,
header button,
header #menu {
  border: 1px solid hsla(0, 0%, 100%, 0.3);
  border-right: none;
  background: transparent;
  color: white;
  font-size: 0.8rem;
  border-left: 1px solid hsla(0, 0%, 100%, 0.3);
  cursor: pointer;
}

header #phone,
header button,
header #menu {
  border-bottom: none;
  margin-bottom: 1px;
  border-top: none;
}

header #langue,
header #logo {
  border-right: 1px solid hsla(0, 0%, 100%, 0.3);
  border-top: none;
}

header #langue span {
  text-transform: uppercase;
}

#nav_droite a:nth-child(1) {
  border-left: none;
}

.plein {
  display: none;
  color: white;
  text-transform: lowercase;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  transition: color 0.5s;
}

.fill .plein {
  color: rgb(162, 158, 120);
}

@media screen and (max-width: 1024px) {
  header #phone {
    grid-column-start: 11;
    grid-column-end: 14;
    grid-row-start: 1;
    border: none;
    border-left: 1px solid hsla(0, 0%, 100%, 0.3);
  }
}

@media screen and (max-width: 900px) {
  header {
    border: 1px solid hsla(0, 0%, 100%, 0.3);
    grid-template-rows: repeat(1, 5rem);
  }

  header #logo img {
    max-height: 4rem;
  }

  header #langue {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 3;
    font-size: 1.2rem;
    border: none;
    border-right: 1px solid hsla(0, 0%, 100%, 0.3);
  }

  header #phone {
    grid-row-end: 3;
    grid-column-start: 10;
    grid-column-end: 13;
    border-left: 1px solid hsla(0, 0%, 100%, 0.3);
  }

  header #logo {
    border-bottom: none;
    border-top: none;
    grid-column-start: 6;
    grid-column-end: 10;
  }

  header #menu {
    grid-column-start: 13;
    grid-column-end: 15;
    grid-row-start: 1;
    grid-row-end: 3;
    border: none;
    border-left: 1px solid hsla(0, 0%, 100%, 0.3);
  }

  #nav_gauche,
  #nav_droite {
    display: none;
  }
  header #langue span {
    transition: color ease-in-out 0.2s;
  }
}

@media screen and (max-width: 700px) {
  header {
    padding: 1rem;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(1, 3.8rem);
    border: none;
  }

  header #langue,
  header #menu,
  header #logo,
  header #phone {
    border: none;
  }

  header .icon-phone span {
    display: none;
  }

  header #langue {
    grid-column-start: 1;
    grid-column-end: 2;
  }

  header #phone {
    grid-column-start: 2;
    grid-column-end: 3;
    font-size: 1.6rem;
  }

  header #logo {
    grid-column-start: 4;
    grid-column-end: 6;
    font-size: 1.6rem;
  }

  header #logo img {
    width: auto;
    max-width: 7rem;
  }

  header #menu {
    grid-column-start: 8;
    grid-column-end: 9;
  }
}

@media screen and (max-width: 700px) {
  header #phone {
    display: none;
  }
}

/*---- Blanchissement du header ----*/

header.fill {
  background-color: white;
  background-position: top;
  box-shadow: 0 1px 3px rgba(76, 76, 76, 0.1);
}

header.solid {
  background-color: white;
  background-position: top;
  box-shadow: 0 1px 3px rgba(76, 76, 76, 0.1);
}

@media screen and (min-width: 1000px) {
  header.fill:not(.modal) {
    transform: translateY(-3.8rem);
  }

  header.fill.modal {
    transform: translateY(0);
    transition:
      transform 0.9s cubic-bezier(0.4, 0, 0, 1),
      background-position 0.7s cubic-bezier(0.4, 0, 0, 1) 0.2s;
  }

  header #logo {
    width: 100%;
  }

  header #logo img:nth-child(1) {
    opacity: 1;
    margin-top: 0%;
    transition:
      opacity 0.5s 0.7s,
      max-height 0.5s 0.7s,
      margin-top 0.5s 0.7s,
      width 1.2s;
  }

  header.fill #logo img:nth-child(1) {
    max-height: calc(50% - 0.9rem);
    width: auto;
    max-width: 70%;
    opacity: 0;
    transition:
      opacity 0.3s,
      max-height 0s 0.5s,
      width 0s 0.5s,
      margin-top 0s 0.5s;
    max-height: calc(50% - 0.9rem);
    max-width: 70%;
    margin-top: 30%;
  }

  header #logo img:nth-child(2) {
    width: auto;
    max-width: 70%;
    position: absolute;
    opacity: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: opacity 0s;
  }

  header.fill.modal #logo img:nth-child(2) {
    width: auto;
    max-width: 70%;
    max-height: 6rem;
    transform: translateY(-50%);
    transition:
      opacity 0.6s,
      max-height 0.7s 0.1s ease-in-out,
      transform 0.7s ease-in-out;
  }

  header.fill #logo img:nth-child(2) {
    max-height: calc(50% - 0.9rem);
    transition:
      opacity 0.7s,
      max-height 0.5s 0.4s,
      transform 0.5s 0.4s;
    transform: translateY(0.3rem);
  }
}

header.fill span,
header.fill ins,
header.solid span,
header.solid ins {
  color: rgb(16, 28, 54);
}

header span,
header ins {
  transition: color 0.5s;
  text-align: center;
}

header .icon-phone,
header .icon-phone span {
  transition: none;
}

header.fill * {
  border-color: rgba(76, 76, 76, 0.3) !important;
}

header.solid * {
  border-color: rgba(76, 76, 76, 0.3) !important;
}

header #burger,
header #burger:after,
header #burger:before {
  transition:
    height 0.2s,
    width 0.5s,
    background-color ease-in-out 0.2s,
    transform ease-in-out 0.2s;
}

header.fill #burger,
header.fill #burger:after,
header.fill #burger:before,
header.solid #burger,
header.solid #burger:after,
header.solid #burger:before {
  background: rgb(16, 28, 54);
}

#reserver.solid,
#reserver.solid ins,
#reserver.solid span,
#reserver.solid time {
  color: rgb(16, 28, 54) !important;
}

/*---- Burger ----*/

#menu {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

#burger {
  position: relative;
  width: 2rem;
  display: block;
  height: 0.1rem;
  background: white;
}

.fermer #burger {
  transform: rotate(45deg);
  background: #c9a96a !important;
  height: 2px;
}

#burger:after {
  content: "";
  width: 70%;
  display: block;
  height: 0.1rem;
  background-color: white;
  position: absolute;
  top: 10px;
  left: 0;
}

.fermer #burger:after {
  height: 0;
}

#burger:before {
  content: "";
  width: 100%;
  display: block;
  height: 0.1rem;
  background-color: white;
  position: absolute;
  top: -10px;
  left: 0;
}

.fermer #burger:before {
  transform: rotate(-90deg);
  background: #c9a96a !important;
  top: 0;
  height: 2px;
}

#menu:hover #burger {
  background-color: #c9a96a;
}

#menu:hover #burger:after {
  width: 100%;
  background-color: #c9a96a;
}

#menu:hover #burger:before {
  width: 70%;
  background-color: #c9a96a;
}

#menu.fermer:hover #burger:before {
  width: 100% !important;
}

/*---- Span Menu ----*/

@media screen and (min-width: 1000px) {
  #nav_gauche a > span:nth-child(1),
  #nav_droite a > span:nth-child(1),
  #nav_droite a > ins:nth-child(1) {
    display: inline-block;
    overflow: hidden;
  }

  #nav_gauche a span span,
  #nav_droite a span span,
  header:not(.fill) #nav_droite a ins time,
  #nav_droite a ins span {
    display: inline-block;
    position: relative;
    transition:
      color 0.5s,
      transform 0.2s;
  }

  header #nav_droite a ins time {
    transition: transform 0.2s;
  }

  #nav_droite a ins time {
    display: inline-block;
    position: relative;
  }

  #nav_droite a:hover span span,
  #nav_gauche a:hover span span,
  #nav_droite a:hover ins time,
  #nav_droite a:hover ins span {
    transform: translateY(-100%);
  }

  #nav_gauche a span span:after,
  #nav_droite a span span:after,
  #nav_droite a ins time:after,
  #nav_droite a ins span:after {
    color: #c9a96a;
    display: inline-block;
    position: absolute;
    top: 100%;
    left: 0;
  }

  #nav_gauche > a.bloc_gauche > span > span:after,
  #nav_droite > a > span > span:after,
  #nav_droite a > ins > time:after,
  #nav_droite a > ins > span:after {
    content: attr(data-span);
    width: 100%;
  }
}

/*====== BANNIERE ========*/

#banniere {
  width: 100%;
  height: 100vh;
  z-index: 0;
  position: relative;
}

@media screen and (min-width: 700px) {
  #banniere {
    min-height: 100vh;
  }
}

@media screen and (max-width: 700px) {
  #banniere {
    height: calc(100vh - 5.2rem);
  }
}

.preload #banniere > div {
  -webkit-transform: translateY(-5%) scale(0.8);
  opacity: 0;
  transform: translateY(-5%) scale(0.8);
}

#banniere > div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  visibility: visible;
  -webkit-transform: translateY(0) scale(1);
  opacity: 1;
  transform: translateY(0) scale(1);
  -webkit-transition:
    -webkit-transform 0.65s cubic-bezier(0.6, 0.2, 0.1, 1),
    opacity 0.65s cubic-bezier(0.6, 0.2, 0.1, 1);
  transition:
    transform 0.65s cubic-bezier(0.6, 0.2, 0.1, 1),
    opacity 0.65s cubic-bezier(0.6, 0.2, 0.1, 1);
}

#banniere > div:before {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
}

.preload #banniere > div h1 {
  -webkit-transform: translateX(20%) scale(0.9);
  opacity: 0;
  transform: translateX(20%) scale(0.9);
}

#banniere > div h1 {
  opacity: 1;
  -webkit-transform: translateX(0) scale(1);
  transform: translateX(0) scale(1);
  -webkit-transition:
    -webkit-transform 0.65s cubic-bezier(0.6, 0.2, 0.1, 1) 0.4s,
    opacity 0.65s cubic-bezier(0.6, 0.2, 0.1, 1) 0.4s;
  transition:
    transform 0.8s cubic-bezier(0.6, 0.2, 0.1, 1) 0.4s,
    opacity 0.8s cubic-bezier(0.6, 0.2, 0.1, 1) 0.4s;
}

@media screen and (max-width: 700px) {
  #pageRestauration #banniere > div {
    background-image: url(../media/images/bannieres/compress/restauration-mobile-min.jpg);
  }
  #pageMaison #banniere > div {
    background-image: url(../media/images/bannieres/compress/maison-mobile-min.jpg);
  }
  #pageHome #banniere > div {
    background-image: url(../media/images/bannieres/compress/home-mobile-min.jpg);
  }
  #pageChambres #banniere > div {
    background-image: url(../media/images/bannieres/compress/chambres-mobile-min.jpg);
  }
  #validationChambres #banniere > div {
    background-image: url(../media/images/bannieres/compress/chambres-mobile-min.jpg);
  }
}

@media screen and (min-width: 701px) {
  #pageRestauration #banniere > div {
    background-image: url(../media/images/bannieres/compress/restauration-min.jpg);
  }
  #pageMaison #banniere > div {
    background-image: url(../media/images/bannieres/compress/maison-min.jpg);
  }
  #pageHome #banniere > div {
    background-image: url(../media/images/bannieres/compress/home-min.jpg);
  }
  #pageChambres #banniere > div {
    background-image: url(../media/images/bannieres/compress/chambres-min.jpg);
  }
  #validationChambres #banniere > div {
    background-image: url(../media/images/bannieres/compress/chambres-min.jpg);
  }
}

#pageEnvirons #banniere > div {
  background-image: url(../media/images/bannieres/compress/Environs-min.jpg);
}
#pageMentions #banniere > div {
  background-image: url(../media/images/bannieres/compress/mentions-legales-min.jpg);
}
#page404 #banniere > div {
  background-image: url(../media/images/bannieres/compress/home-min.jpg);
}

/* ==================================================================
                             Modal
====================================================================*/

#modal-menu {
  z-index: -40;
  position: fixed;
  display: block;
  left: 0;
  width: 100vw;
  margin-left: 0;
  margin-right: 0;
  top: 7.55rem;
  min-height: calc(100vh - 7.6rem);
  background: linear-gradient(to top, white 50%, transparent 50%);
  background-size: 100% 200%;
  background-position: top;
  visibility: hidden;
  transition:
    background-position 0.7s cubic-bezier(0.4, 0, 0, 1) 0.2s,
    visibility 0s 0.7s,
    z-index 0s 0.7s;
  display: flex;
  flex-direction: column;
}

#modal-menu.visible {
  z-index: 36;
  background-position: bottom;
  transition: background-position 0.7s cubic-bezier(0.4, 0, 0, 1) 0.2s;
  visibility: visible;
}

#modal-contact {
  z-index: -40;
  position: fixed;
  left: 0;
  min-height: calc(100vh - 7.6rem);
  height: calc(100vh - 7.4rem);
  overflow-y: auto;
  width: 100vw;
  margin-left: 0;
  margin-right: 0;
  top: 7.55rem;
  display: flex;
  visibility: hidden;
  transition:
    z-index 0s 0.7s,
    visibility 0s 0.7s;
  overflow-x: hidden;
}

#modal-contact .modal-relative {
  position: relative;
  width: 100%;
  min-height: calc(100vh - 7.4rem);
  height: max-content;
}

@media screen and (max-width: 900px) {
  #modal-menu {
    height: calc(100vh - 4.8rem) !important;
    top: 4.9rem;
  }
  #modal-contact {
    min-height: calc(100vh - 4.8rem) !important;
    max-height: 100vh !important;
    top: 4.9rem;
    overflow-y: auto;
  }
}

@media screen and (max-width: 700px) {
  #modal-menu {
    height: calc(100vh - 6.6rem) !important;
    top: 6.65rem;
  }
  #modal-contact {
    min-height: calc(100vh - 6.6rem) !important;
    max-height: 100vh !important;
    top: 6.65rem;
  }
}

#modal-contact .modal-relative:after,
#modal-contact .modal-relative:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  width: 50.1%;
  height: 100%;
  background-color: white;
  transition: transform 0.7s cubic-bezier(0.4, 0, 0, 1) 0.2s;
}

#modal-contact .modal-relative:after {
  transform: translateX(-100%);
  left: 0;
}

#modal-contact .modal-relative:before {
  transform: translateX(100%);
  right: 0;
}

#modal-contact.visible {
  z-index: 36;
  transition:
    z-index 0s,
    visibility 0s;
  visibility: visible;
}

#modal-contact.visible .modal-relative:after {
  transform: translateX(0);
  z-index: 0;
}

#modal-contact.visible .modal-relative:before {
  transform: translateX(0);
  z-index: 0;
}

/*------------------ Contenu Modal Menu-----------------*/

#modal-menu nav {
  height: 61.8%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

#modal-menu ul {
  padding: 0;
  height: 100%;
  width: 60%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  max-height: 25rem;
}

@media screen and (min-width: 1000px) {
  #modal-menu nav {
    height: 22rem;
  }
  #modal-menu p {
    font-size: 100%;
  }
  #modal-menu p:last-child {
    border-bottom: 2rem;
  }
}

@media screen and (min-width: 1700px) {
  #modal-menu nav {
    height: 22vw;
  }
}

@media screen and (max-width: 1000px) {
  #modal-menu ul {
    width: 80%;
  }
  #modal-menu address {
    margin-bottom: 54px;
  }
}

@media screen and (max-width: 800px) {
  #modal-menu ul {
    width: 90%;
  }
}

@media screen and (max-width: 700px) {
  #modal-menu ul {
    width: 98%;
  }
}

@media screen and (max-width: 640px) {
  #modal-menu {
    overflow-y: auto;
  }
  #modal-menu ul {
    flex-direction: column;
    justify-content: space-around;
  }
  #modal-menu nav {
    margin-top: 1vh;
    height: auto;
    width: 100%;
  }
  #modal-menu li {
    width: 100% !important;
    justify-content: flex-end !important;
    margin-bottom: 1.05rem;
  }
  #modal-menu li a,
  #modal-menu p span {
    padding-right: 1rem;
  }
  #modal-menu address {
    margin-top: 0;
    justify-content: flex-end !important;
    width: 100%;
    margin-top: 60px !important;
  }
  #modal-menu p {
    justify-content: flex-end !important;
    text-align: right !important;
  }
}

@media screen and (max-height: 570px) {
  #modal-menu li {
    font-size: 180%;
  }

  #modal-menu li {
    margin-bottom: 0.8rem;
  }
}

#modal-menu li {
  list-style-type: none;
  font-size: 200%;
  display: inline-block;
  text-align: center;
  overflow: hidden;
  position: relative;
  line-height: 1;
  height: 2rem;
  display: flex;
  justify-content: center;
}

#modal-menu p span {
  position: absolute;
  bottom: -100%;
  transition: all ease-in-out 0.3s;
  text-decoration: none;
}

#modal-menu li a {
  position: absolute;
  bottom: -100%;
  transition: all ease-in-out 0.5s;
  text-decoration: none;
  cursor: pointer;
}

#modal-menu.visible p span {
  bottom: 0;
  position: relative;
  transition:
    bottom ease-in-out 0.3s 1.1s,
    position 0s 1.4s;
}

#modal-menu.visible li:nth-child(1) a {
  bottom: 0;
  transition: bottom ease-in-out 0.5s 0.4s;
}

#modal-menu.visible li:nth-child(2) a {
  bottom: 0;
  transition: bottom ease-in-out 0.5s 0.5s;
}

#modal-menu.visible li:nth-child(3) a {
  bottom: 0;
  transition: bottom ease-in-out 0.5s 0.6s;
}

#modal-menu.visible li:nth-child(4) a {
  bottom: 0;
  transition: bottom ease-in-out 0.5s 0.7s;
}

#modal-menu.visible li:nth-child(5) a {
  bottom: 0;
  transition: bottom ease-in-out 0.5s 0.8s;
}

#modal-menu.visible li:nth-child(6) a {
  bottom: 0;
  transition: bottom ease-in-out 0.5s 0.9s;
}

#modal-menu.visible li:nth-child(7) a {
  bottom: 0;
  transition: bottom ease-in-out 0.5s 1s;
}

#modal-menu li:nth-child(1),
#modal-menu li:nth-child(2) {
  width: 35%;
}

#modal-menu li:nth-child(3),
#modal-menu li:nth-child(4),
#modal-menu li:nth-child(5) {
  width: 33%;
}

#modal-menu li:nth-child(6),
#modal-menu li:nth-child(7) {
  width: 33%;
}

#modal-menu li span {
  text-decoration: none;
  color: rgb(16, 28, 54);
  display: inline-block;
  width: max-content;
}

#modal-menu li span::first-letter {
  text-transform: uppercase;
}

#modal-menu li span:hover {
  color: #c9a96a;
}

#modal-menu address {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: auto;
}

#modal-menu p {
  color: rgb(16, 28, 54);
  text-align: center;
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: center;
  margin-top: 0;
  font-size: 90%;
  margin-bottom: 0.5rem;
  padding-bottom: 2px;
  margin-left: 0;
  text-overflow: ellipsis;
  height: 1.5rem;
}

#modal-menu p a {
  color: #c9a96a;
  text-decoration: none;
  display: inline-block;
}

.hover-underline:after,
address a:after {
  -webkit-transform-origin: right center;
  transform-origin: right center;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
}

.surlignement:after {
  content: "";
  display: block;
  height: 1px;
  background: currentColor;
  will-change: transform;
  transition: -webkit-transform 0.5s cubic-bezier(0.3, 0, 0, 1);
  transition: transform 0.5s cubic-bezier(0.3, 0, 0, 1);
  transition:
    transform 0.5s cubic-bezier(0.3, 0, 0, 1),
    -webkit-transform 0.5s cubic-bezier(0.3, 0, 0, 1);
  -webkit-transform-origin: right center;
  transform-origin: right center;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
}

.surlignement:hover:after {
  -webkit-transform: none;
  transform: none;
  -webkit-transform-origin: left center;
  transform-origin: left center;
}

/*------------------ Contenu Modal Contact -----------------*/

#modal-contact > div {
  display: flex;
  justify-content: center;
}

#modal-contact address,
#modal-contact form {
  z-index: 10;
  width: 40%;
  max-width: 31rem;
  display: flex;
  flex-direction: column;
  margin-top: 12vh;
  margin-bottom: 4vh;
}

#modal-contact address {
  margin-right: 8%;
  width: auto;
}

#modal-contact form {
  width: 50%;
}

#modal-contact address div,
#modal-contact form fieldset > div {
  padding-left: 5vw;
}

#modal-contact h4,
#modal-contact legend {
  font-size: 250%;
  margin: 0;
  margin-bottom: 3vh;
  font-family: "Didot-Roman", Garamond, "Times New Roman", serif;
  font-style: normal;
  font-weight: 500;
}

#modal-contact h4,
#modal-contact p {
  -webkit-transform: translateY(-5%) scale(0.8);
  opacity: 0;
  transform: translateY(-5%) scale(0.8);
}

#modal-contact address > div > p {
  display: flex;
  align-items: baseline;
}

#modal-contact h4,
#modal-contact p,
#modal-contact form .un,
#modal-contact form legend,
#modal-contact form .deux,
#modal-contact form .trois,
#modal-contact form #captcha-svg,
#modal-contact .loader.contact {
  -webkit-transform: translateY(5%) scale(0.8);
  opacity: 0;
  transform: translateY(5%) scale(0.8);
}

#modal-contact.visible h4,
#modal-contact.visible p,
#modal-contact.visible form .un,
#modal-contact.visible form legend,
#modal-contact.visible form .deux,
#modal-contact.visible form .trois,
#modal-contact.visible form #captcha-svg,
#modal-contact.visible .loader.contact {
  visibility: visible;
  -webkit-transform: translateY(0) scale(1);
  opacity: 1;
  transform: translateY(0) scale(1);
}

#modal-contact p span:not(.surlignement),
#modal-contact fieldset {
  color: rgb(16, 28, 54);
}

#modal-contact address p,
#modal-contact h4,
#modal-contact legend {
  white-space: nowrap;
}

#modal-contact.visible address h4,
#modal-contact.visible form legend {
  transition: all ease-in-out 0s;
}

#modal-contact.visible address p:nth-child(1),
#modal-contact.visible form .un {
  transition: all ease-in-out 0.3s 0.05s;
}

#modal-contact.visible address p:nth-child(2),
#modal-contact.visible form .deux {
  transition: all ease-in-out 0.3s 0.1s;
}

#modal-contact.visible address p:nth-child(3),
#modal-contact.visible form .trois,
#modal-contact.visible form #captcha-svg,
#modal-contact.visible .loader.contact {
  transition: all ease-in-out 0.3s 0.15s;
}

#modal-contact.visible address h4,
#modal-contact.visible form legend {
  -webkit-transition:
    -webkit-transform 0.65s cubic-bezier(0.6, 0.2, 0.1, 1) 0.7s,
    opacity 0.65s cubic-bezier(0.6, 0.2, 0.1, 1) 0.7s;
  transition:
    transform 0.65s cubic-bezier(0.6, 0.2, 0.1, 1) 0.7s,
    opacity 0.65s cubic-bezier(0.6, 0.2, 0.1, 1) 0.7s;
  z-index: 10;
}

#modal-contact.visible address p:nth-child(1),
#modal-contact.visible form .un {
  z-index: 45;
  -webkit-transition:
    -webkit-transform 0.65s cubic-bezier(0.6, 0.2, 0.1, 1) 0.8s,
    opacity 0.65s cubic-bezier(0.6, 0.2, 0.1, 1) 0.8s;
  transition:
    transform 0.65s cubic-bezier(0.6, 0.2, 0.1, 1) 0.8s,
    opacity 0.65s cubic-bezier(0.6, 0.2, 0.1, 1) 0.8s;
}

#modal-contact.visible address p:nth-child(2),
#modal-contact.visible form .deux {
  z-index: 44;
  -webkit-transition:
    -webkit-transform 0.65s cubic-bezier(0.6, 0.2, 0.1, 1) 0.9s,
    opacity 0.65s cubic-bezier(0.6, 0.2, 0.1, 1) 0.9s;
  transition:
    transform 0.65s cubic-bezier(0.6, 0.2, 0.1, 1) 0.9s,
    opacity 0.65s cubic-bezier(0.6, 0.2, 0.1, 1) 0.9s;
}

#modal-contact.visible address p:nth-child(3),
#modal-contact.visible form .trois {
  z-index: 43;
  -webkit-transition:
    -webkit-transform 0.65s cubic-bezier(0.6, 0.2, 0.1, 1) 1s,
    opacity 0.65s cubic-bezier(0.6, 0.2, 0.1, 1) 1s;
  transition:
    transform 0.65s cubic-bezier(0.6, 0.2, 0.1, 1) 1s,
    opacity 0.65s cubic-bezier(0.6, 0.2, 0.1, 1) 1s;
}

#modal-contact.visible form #captcha-svg {
  z-index: 42;
  -webkit-transition:
    -webkit-transform 0.65s cubic-bezier(0.6, 0.2, 0.1, 1) 1.1s,
    opacity 0.65s cubic-bezier(0.6, 0.2, 0.1, 1) 1.1s;
  transition:
    transform 0.65s cubic-bezier(0.6, 0.2, 0.1, 1) 1.1s,
    opacity 0.65s cubic-bezier(0.6, 0.2, 0.1, 1) 1.1s;
}

#modal-contact.visible .loader.contact {
  -webkit-transition:
    -webkit-transform 0.65s cubic-bezier(0.6, 0.2, 0.1, 1) 1.1s,
    opacity 0.65s cubic-bezier(0.6, 0.2, 0.1, 1) 1.1s,
    box-shadow 0.5s ease-in-out;
  transition:
    transform 0.65s cubic-bezier(0.6, 0.2, 0.1, 1) 1.1s,
    opacity 0.65s cubic-bezier(0.6, 0.2, 0.1, 1) 1.1s,
    box-shadow 0.5s ease-in-out;
}

#modal-contact p a,
#modal-contact address p:last-child span:last-child {
  color: #c9a96a;
  text-decoration: none;
}

#modal-contact p a {
  display: inline-block;
}

#modal-contact address p:last-child {
  display: flex;
}

#modal-contact address p span:first-child:not(.surlignement) {
  margin-right: 0.8rem;
  font-size: 1.1rem;
}

#modal-contact address p a {
  margin-left: 0.5rem;
}

#modal-contact address p:last-child span:last-child {
  display: inline-block;
}

#modal-contact fieldset {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

#modal-contact fieldset > div > div:not(.form-group),
#modal-contact fieldset > div {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  box-sizing: border-box;
}

/* ---- Form-Input --- */

.form-group input:-webkit-autofill,
.form-group input:-webkit-autofill:hover,
.form-group input:-webkit-autofill:focus,
.form-group input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px white inset !important;
  box-shadow: 0 0 0 30px white inset !important;
  color: #101c36 !important;
  -webkit-text-fill-color: #101c36 !important;
}

.form-group {
  position: relative;
  padding: 20px 0 0;
  margin-top: 10px;
  margin: 0;
  margin-right: 1rem;
  margin-bottom: 1rem;
  height: min-content;
}

.form-group.petit,
.infobulle.petit {
  width: 12rem;
  max-width: 48%;
}
.infobulle .form-group.petit {
  max-width: 100%;
}
.form-group.fin {
  margin-right: 0;
}
#modal-contact .infobulle.petit {
  margin-right: 2rem;
}

.form-group.moyen {
  width: 15rem;
  max-width: 90%;
}

#modal-contact .form-group.moyen {
  width: 18rem;
}

.form-group.grand,
.infobulle.grand {
  width: 100%;
  margin-right: 0;
  max-width: 100%;
}

.textarea.form-group {
  margin-left: auto;
  margin-right: auto;
}

.form-group input {
  padding-left: 0.5rem;
}

.form-field {
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(16, 28, 54, 0.4);
  outline: 0;
  font-size: 1rem;
  color: rgb(16, 28, 54);
  padding: 7px 0;
  padding-bottom: 2px;
  background: transparent;
  transition: border-color 0.2s;
  font-weight: 500 !important;
}
.form-field::placeholder {
  color: transparent;
}
.form-field::-ms-input-placeholder {
  color: transparent;
}
.form-field::-webkit-input-placeholder {
  color: transparent;
}
.form-field:placeholder-shown ~ .form-label {
  font-size: 1rem;
  cursor: text;
  top: 20px;
}
.form-field::-ms-input-placeholder-shown ~ .form-label {
  font-size: 1rem;
  cursor: text;
  top: 20px;
}
.form-field::-webkit-input-placeholder-shown ~ .form-label {
  font-size: 1rem;
  cursor: text;
  top: 20px;
}

.form-label {
  position: absolute;
  top: 0;
  display: block;
  transition: 0.2s;
  font-size: 1rem;
  color: rgba(16, 28, 54, 0.4);
  font-family: "Muli", Arial, Helvetica, sans-serif;
}

.form-field:focus {
  padding-bottom: 2px;
  font-weight: 700;
  border-width: 1px;
  border-image: linear-gradient(to right, #c9a96a, #f7c96d);
  border-image-slice: 1;
}
.form-field:focus ~ .form-label {
  position: absolute;
  top: 0;
  display: block;
  transition: 0.2s;
  font-size: 1rem;
  color: #c9a96a;
  font-weight: 700;
}

.form-group .red {
  color: red;
}

#modal-contact fieldset #captcha-svg {
  justify-content: flex-start;
  align-items: center;
}

#modal-contact fieldset #captcha-svg svg {
  margin-bottom: 1.5rem;
}

#modal-contact fieldset #captcha-svg .form-group {
  width: 13rem;
}

#modal-contact fieldset #captcha-svg .infobulle {
  margin-right: 2rem;
}

#modal-contact input.erreur,
#modal-contact textarea.erreur {
  color: red;
  font-weight: 700;
  border: none !important;
  border-bottom: 1px solid red !important;
}

#modal-contact .infobulle {
  display: inline-block;
  position: relative;
}

#modal-contact .infobulle .cacher {
  display: none !important;
}

#modal-contact .infobulle .form-group > span {
  position: absolute;
  top: 110%;
  left: 50%;
  width: max-content;
  height: min-content;
  background: #e87878;
  transform: translate(-50%, 50%);
  display: flex;
  z-index: 10;
}

#modal-contact .infobulle .form-group > span > span {
  position: relative;
  width: max-content;
  padding: 0.3rem 0.8rem;
  font-size: 0.8rem;
}

#modal-contact .infobulle .form-group > span > span:after {
  content: " ";
  position: absolute;
  top: 0%;
  right: 50%;
  border-width: 0.5rem;
  border-style: solid;
  border-color: #e87878;
  transform: translateY(-50%) translateX(-100%) rotate(135deg);
  z-index: -1;
}
/* reset input */
.form-field:required,
.form-field:invalid {
  box-shadow: none;
}

#modal-contact .button {
  margin-top: 1rem;
  z-index: 10;
}

#closeModal {
  height: 2rem;
  width: 2rem;
  cursor: pointer;
  position: absolute;
  z-index: 10;
  top: 7%;
  right: 8%;
  opacity: 0;
  transition: opacity 0.3s;
}

#modal-contact.visible #closeModal {
  opacity: 1;
  transition: opacity 0.3s 0.5s;
}

#closeModal span {
  height: 100%;
  width: 100%;
  position: relative;
  display: block;
}

#closeModal span:before,
#closeModal span:after {
  content: "";
  height: 1px;
  background-color: rgb(162, 158, 120);
  width: 100%;
  display: block;
  position: absolute;
  top: 50%;
  transition: all 0.3s ease-out;
}

#closeModal:hover span:before,
#closeModal:hover span:after {
  background-color: rgb(16, 28, 54);
  transform: rotate(0);
}

#closeModal span:before {
  transform: rotate(45deg);
}
#closeModal span:after {
  transform: rotate(-45deg);
}

@media screen and (max-width: 800px) {
  #modal-contact address,
  #modal-contact form {
    width: auto;
    max-width: initial;
  }
}

/* ==================================================================
                        Modal Check-In / Check-Out
====================================================================*/

/*------------------------ Modal ------------------*/

.wait,
.wait * {
  cursor: wait !important;
}

.modal-svg.hd {
  display: none;
}

#modal-date {
  position: fixed;
  display: table;
  height: 100vh;
  min-height: 100vh;
  width: 100vw;
  margin-left: 0;
  margin-right: 0;
  top: 0;
  left: 0;
  transform: scale(0);
  z-index: 35;
  display: none;
}
#modal-date.six {
  transform: scale(1);
}
#modal-date.six .modal-background {
  animation: fadeIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-date.six .modal-background .modal {
  background-color: transparent;
  animation: modalFadeIn 0.5s 0.8s cubic-bezier(0.165, 0.84, 0.44, 1)
    forwards;
}
#modal-date.six .modal-background .modal h5 {
  opacity: 0;
  position: relative;
  font-size: 190%;
  font-weight: 500;
  font-family: "Didot-Roman", Garamond, "Times New Roman", serif;
  margin-bottom: 1rem;
  font-weight: 500;
  animation: modalContentFadeIn 0.5s 1s cubic-bezier(0.165, 0.84, 0.44, 1)
    forwards;
}
#modal-date.six .modal-background .modal h5 + form {
  position: relative;
  opacity: 0;
  z-index: 39;
  animation: modalContentFadeIn 0.5s 1s cubic-bezier(0.165, 0.84, 0.44, 1)
    forwards;
}
#modal-date.six .modal-background .modal .modal-svg rect {
  animation: sketchIn 0.5s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-date.six.out {
  animation: quickScaleDown 0s 0.5s linear forwards;
}
#modal-date.six.out .modal-background {
  animation: fadeOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-date.six.out .modal-background .modal {
  animation: modalFadeOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-date.six.out .modal-background .modal h5,
#modal-date.six.out .modal-background .modal h5 + form {
  animation: modalContentFadeOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1)
    forwards;
}
#modal-date.six.out .modal-background .modal .modal-svg rect {
  animation: sketchOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-date .modal-background {
  display: table-cell;
  background: rgba(16, 28, 54, 0.4);
  text-align: center;
  vertical-align: middle;
}
#modal-date .modal-background .modal {
  background: white;
  width: 500px;
  height: 300px;
  display: inline-block;
  border-radius: 3px;
  font-weight: 300;
  position: relative;
}
#modal-date .modal-background .modal .modal-svg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: 3px;
  z-index: 36;
}
#modal-date .modal-background .modal .modal-svg rect {
  stroke: #fff;
  stroke-width: 2px;
  stroke-dasharray: 1602;
  stroke-dashoffset: 1602;
}
.content {
  min-height: 100%;
  height: 100%;
  background: white;
  position: relative;
  z-index: 0;
}

@keyframes fadeIn {
  0% {
    background: rgba(16, 28, 54, 0);
  }
  100% {
    background: rgba(16, 28, 54, 0.4);
  }
}
@keyframes fadeOut {
  0% {
    background: rgba(16, 28, 54, 0.4);
  }
  100% {
    background: rgba(16, 28, 54, 0);
  }
}

@keyframes quickScaleDown {
  0% {
    transform: scale(1);
  }
  99.9% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}

@keyframes sketchIn {
  0% {
    stroke-dashoffset: 1602;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes sketchOut {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 1602;
  }
}
@keyframes modalFadeIn {
  0% {
    background-color: transparent;
  }
  100% {
    background-color: white;
  }
}
@keyframes modalFadeOut {
  0% {
    background-color: white;
  }
  100% {
    background-color: transparent;
  }
}
@keyframes modalContentFadeIn {
  0% {
    opacity: 0;
    top: -20px;
  }
  100% {
    opacity: 1;
    top: 0;
  }
}
@keyframes modalContentFadeOut {
  0% {
    opacity: 1;
    top: 0px;
  }
  100% {
    opacity: 0;
    top: -20px;
  }
}

.six h5 + form {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
  height: 50%;
}

.data_range {
  border: 1px solid rgb(162, 158, 120);
  width: 45%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding-left: 2%;
  padding-right: 4%;
  padding-bottom: 1px;
  padding-top: 1px;
  cursor: pointer;
}

.data_range span {
  color: rgb(116, 116, 116);
  font-size: 120%;
}

.data_range input {
  border: none;
  width: 40%;
  text-align: center;
  line-height: 2.5;
  font-size: 90%;
  color: black;
}

.data_range:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.data_range input::-webkit-input-placeholder {
  font-weight: bold;
  color: rgb(117, 117, 117);
}
.data_range input::-moz-placeholder {
  font-weight: bold;
  color: rgb(117, 117, 117);
}
.data_range input::-ms-input-placeholder {
  font-weight: bold;
  color: rgb(117, 117, 117);
}

#alertValideCheck {
  color: red;
  position: absolute;
  top: -0.3rem;
  left: 50%;
  white-space: nowrap;
  transform: translate(-50%, -100%);
}

.qs-datepicker-container {
  transform: translateY(1%) translateX(-35.5%);
}

.qs-datepicker .qs-controls {
  background-color: #c9a96a !important;
}

.qs-datepicker .qs-square.qs-current span {
  color: #c9a96a !important;
}

.qs-datepicker .qs-controls span,
.qs-datepicker .qs-square.qs-day {
  font-weight: 400;
}

.six .button {
  padding: 0.6rem 0.2rem;
  background-color: rgb(58, 170, 53);
}

.six .button {
  padding: 0.6rem 0.8rem;
  background-color: rgb(81, 150, 78);
  min-width: 40%;
}

.six .button span:first-child {
  font-family: "Didot-Roman", Garamond, "Times New Roman", serif;
  font-weight: 500;
  font-size: 115%;
}

.six .button .icon-checked {
  display: flex;
  align-items: center;
  font-size: 55%;
  color: rgb(16, 28, 54);
  justify-content: center;
}

.six .button .icon-checked:before {
  font-size: 120%;
  margin-right: 3%;
}

.six .button .icon-checked span {
  font-family: "Muli", Arial, Helvetica, sans-serif;
  white-space: nowrap;
}

/* ==================================================================
                        		Titre
====================================================================*/

#banniere h1 {
  text-transform: uppercase;
  font-size: 400%;
  color: white;
  position: absolute;
  bottom: 0;
  right: 9vw;
  width: auto;
  text-align: center;
  font-weight: 100;
  margin-bottom: 0.5rem;
}

@media screen and (max-width: 700px) {
  #banniere h1 {
    width: 100%;
    right: initial;
    color: rgb(16, 28, 54);
    font-size: 2.9rem;
    bottom: -5.2rem;
    height: 5.2rem;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #pageChambres #banniere h1 {
    bottom: -6rem;
  }
}

/* ==================================================================
                    DATEPICKER
====================================================================*/

.qs-datepicker-container {
  font-size: 1rem;
  font-family: sans-serif;
  color: #000;
  position: absolute;
  width: 15.625em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  z-index: 9001;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: 1px solid grey;
  border-radius: 0.26392em;
  overflow: hidden;
  background: #fff;
  -webkit-box-shadow: 0 1.25em 1.25em -0.9375em rgba(0, 0, 0, 0.3);
  box-shadow: 0 1.25em 1.25em -0.9375em rgba(0, 0, 0, 0.3);
}
.qs-datepicker-container * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.qs-datepicker-container.qs-centered {
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.qs-datepicker-container.qs-hidden {
  display: none;
}
.qs-datepicker .qs-overlay {
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  width: 100%;
  height: 100%;
  padding: 0.5em;
  z-index: 1;
  opacity: 1;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
.qs-datepicker .qs-overlay.qs-hidden {
  opacity: 0;
  z-index: -1;
}
.qs-datepicker .qs-overlay .qs-overlay-year {
  background: rgba(0, 0, 0, 0);
  border: none;
  border-bottom: 1px solid #fff;
  border-radius: 0;
  color: #fff;
  font-size: 0.875em;
  padding: 0.25em 0;
  width: 80%;
  text-align: center;
  margin: 0 auto;
  display: block;
}
.qs-datepicker .qs-overlay .qs-overlay-year::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
.qs-datepicker .qs-overlay .qs-close {
  padding: 0.5em;
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
}
.qs-datepicker .qs-overlay .qs-submit {
  border: 1px solid #fff;
  border-radius: 0.26392em;
  padding: 0.5em;
  margin: 0 auto auto;
  cursor: pointer;
  background: hsla(0, 0%, 50.2%, 0.4);
}
.qs-datepicker .qs-overlay .qs-submit.qs-disabled {
  color: grey;
  border-color: grey;
  cursor: not-allowed;
}
.qs-datepicker .qs-overlay .qs-overlay-month-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}
.qs-datepicker .qs-overlay .qs-overlay-month {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 33.33333%;
  cursor: pointer;
  opacity: 0.5;
  -webkit-transition: opacity 0.15s;
  transition: opacity 0.15s;
}
.qs-datepicker .qs-overlay .qs-overlay-month.active,
.qs-datepicker .qs-overlay .qs-overlay-month:hover {
  opacity: 1;
}
.qs-datepicker .qs-controls {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  background: #d3d3d3;
  -webkit-filter: blur(0);
  filter: blur(0);
  -webkit-transition: -webkit-filter 0.3s;
  transition: -webkit-filter 0.3s;
  transition: filter 0.3s;
  transition:
    filter 0.3s,
    -webkit-filter 0.3s;
}
.qs-datepicker .qs-controls.qs-blur {
  -webkit-filter: blur(5px);
  filter: blur(5px);
}
.qs-datepicker .qs-arrow {
  height: 1.5625em;
  width: 1.5625em;
  position: relative;
  cursor: pointer;
  border-radius: 0.26392em;
  -webkit-transition: background 0.15s;
  transition: background 0.15s;
}
.qs-datepicker .qs-arrow:hover {
  background: rgba(0, 0, 0, 0.1);
}
.qs-datepicker .qs-arrow:hover.qs-left:after {
  border-right-color: #000;
}
.qs-datepicker .qs-arrow:hover.qs-right:after {
  border-left-color: #000;
}
.qs-datepicker .qs-arrow:after {
  content: "";
  border: 0.39062em solid rgba(0, 0, 0, 0);
  position: absolute;
  top: 50%;
  -webkit-transition: border 0.2s;
  transition: border 0.2s;
}
.qs-datepicker .qs-arrow.qs-left:after {
  border-right-color: grey;
  right: 50%;
  -webkit-transform: translate(25%, -50%);
  -ms-transform: translate(25%, -50%);
  transform: translate(25%, -50%);
}
.qs-datepicker .qs-arrow.qs-right:after {
  border-left-color: grey;
  left: 50%;
  -webkit-transform: translate(-25%, -50%);
  -ms-transform: translate(-25%, -50%);
  transform: translate(-25%, -50%);
}
.qs-datepicker .qs-month-year {
  font-weight: 700;
  -webkit-transition: border 0.2s;
  transition: border 0.2s;
  border-bottom: 1px solid rgba(0, 0, 0, 0);
  cursor: pointer;
}
.qs-datepicker .qs-month-year:hover {
  border-bottom: 1px solid grey;
}
.qs-datepicker .qs-month-year:active:focus,
.qs-datepicker .qs-month-year:focus {
  outline: none;
}
.qs-datepicker .qs-month {
  padding-right: 0.5ex;
}
.qs-datepicker .qs-year {
  padding-left: 0.5ex;
}
.qs-datepicker .qs-squares {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding: 0.3125em;
  -webkit-filter: blur(0);
  filter: blur(0);
  -webkit-transition: -webkit-filter 0.3s;
  transition: -webkit-filter 0.3s;
  transition: filter 0.3s;
  transition:
    filter 0.3s,
    -webkit-filter 0.3s;
}
.qs-datepicker .qs-squares.qs-blur {
  -webkit-filter: blur(5px);
  filter: blur(5px);
}
.qs-datepicker .qs-square {
  width: 14.28571%;
  height: 1.5625em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  cursor: pointer;
  -webkit-transition: background 0.1s;
  transition: background 0.1s;
  border-radius: 0.26392em;
}
.qs-datepicker .qs-square.qs-current {
  font-weight: 700;
}
.qs-datepicker .qs-square.qs-current span {
  text-decoration: underline;
}
.qs-datepicker .qs-square.qs-active {
  background: #add8e6;
}
.qs-datepicker .qs-square.qs-range-date-start:not(.qs-range-date-6) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.qs-datepicker .qs-square.qs-range-date-middle {
  background: #d4ebf2;
}
.qs-datepicker
  .qs-square.qs-range-date-middle:not(.qs-range-date-0):not(
    .qs-range-date-6
  ) {
  border-radius: 0;
}
.qs-datepicker .qs-square.qs-range-date-middle.qs-range-date-0 {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.qs-datepicker .qs-square.qs-range-date-end:not(.qs-range-date-0),
.qs-datepicker .qs-square.qs-range-date-middle.qs-range-date-6 {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.qs-datepicker .qs-square.qs-disabled span {
  opacity: 0.2;
}
.qs-datepicker .qs-square.qs-empty {
  cursor: default;
}
.qs-datepicker .qs-square.qs-disabled {
  cursor: not-allowed;
}
.qs-datepicker .qs-square.qs-day {
  cursor: default;
  font-weight: 700;
  color: grey;
}
.qs-datepicker
  .qs-square:not(.qs-empty):not(.qs-disabled):not(.qs-day):not(
    .qs-active
  ):hover {
  background: orange;
}
.qs-datepicker .qs-event {
  position: relative;
}
.qs-datepicker .qs-event:after {
  content: "";
  position: absolute;
  width: 0.46875em;
  height: 0.46875em;
  border-radius: 50%;
  background: #07f;
  bottom: 0;
  right: 0;
}
.qs-datepicker .qs-event.qs-disabled:after,
.qs-datepicker .qs-event.qs-empty:after {
  background: #cce4ff;
}

/* ==================================================================
									Homepage
====================================================================*/

.parallaxe {
  transition: transform 0.3s;
}

/*=================================================
				Présentation
==================================================*/

#presentation {
  padding-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

#presentation .relative {
  min-height: 38vw;
  width: 30%;
  height: min-content;
  z-index: 2;
  float: left;
  margin-right: 7rem;
}

/*----------------------------
    	Carroussel Img
----------------------------*/

#bloc_presentation .relative > * {
  -webkit-transform: translateY(0) scale(1);
  opacity: 1;
  transform: translateY(0) scale(1);
  -webkit-transition:
    -webkit-transform 0.85s cubic-bezier(0.6, 0.2, 0.1, 1) 0.4s,
    opacity 0.85s cubic-bezier(0.6, 0.2, 0.1, 1) 0.4s;
  transition:
    transform 0.85s cubic-bezier(0.6, 0.2, 0.1, 1) 0.4s,
    opacity 0.85s cubic-bezier(0.6, 0.2, 0.1, 1) 0.4s;
}

#bloc_presentation .relative > .arrow.prev {
  -webkit-transform: translateY(0) scale(1);
  transform: translateY(0) scale(1);
  transition-delay: 0.55s;
}

#bloc_presentation .relative > .arrow.prev .arrow-top {
  transform: rotate(234deg) translateY(3px);
  left: 10%;
}
#bloc_presentation .relative > .arrow.prev .arrow-bottom {
  transform: rotate(126deg) translateY(-3px);
  left: 10%;
}

#bloc_presentation .relative > .arrow.next {
  transition-delay: 0.7s;
}

#bloc_presentation .relative.masquer > * {
  opacity: 0;
  -webkit-transform: translateY(-10%) scale(0.8);
  transform: translateY(-10%) scale(0.8);
}

#bloc_presentation .relative.masquer > .arrow.prev {
  -webkit-transform: translateY(-20%) scale(0.6) rotateY(180deg);
  transform: translateY(-20%) scale(0.6) rotateY(180deg);
}

#bloc_presentation .relative.masquer > .arrow.next {
  -webkit-transform: translateY(-20%) scale(0.6);
  transform: translateY(-20%) scale(0.6);
}

#carrousselImg {
  overflow: hidden;
  display: flex;
  margin-top: 0;
}

#carrousselImg .img_carrous {
  width: 100%;
  display: flex;
}

#carrousselImg .img_carrous img {
  width: 100%;
  margin-left: 0;
  height: 100%;
}

/*----------------------------
           Arrow
----------------------------*/

.arrow {
  cursor: pointer;
  height: 4rem;
  width: 4rem;
  position: absolute;
  top: calc(100% - 9rem);
  background: rgba(68, 68, 68, 0.95);
  transition: transform 0.1s ease-out;
  box-shadow: 20px 19px 17px -13px rgba(0, 0, 0, 0.2);
  z-index: 5;
}
.arrow::after {
  position: absolute;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: transparent;
}
.arrow.prev {
  right: 0;
  transform: rotateY(180deg);
}
.arrow.next {
  right: -4.2rem;
}
.arrow-top,
.arrow-bottom {
  background-color: rgb(198, 198, 198);
  height: 2px;
  left: 30%;
  position: absolute;
  top: 50%;
  width: 30%;
}
.arrow-top:after,
.arrow-bottom:after {
  background-color: #fff;
  content: "";
  height: 100%;
  position: absolute;
  top: 0;
  transition: all 0.1s;
}
.arrow-top {
  transform: rotate(54deg);
  transform-origin: bottom right;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
}
.arrow-top:after {
  left: 100%;
  right: 0;
  transition-delay: 0s;
}
.arrow-bottom {
  z-index: 0;
  transform: rotate(-54deg);
  transform-origin: top right;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
}
.arrow-bottom:after {
  left: 0;
  right: 100%;
  transition-delay: 0.1s;
}
.arrow:hover .arrow-top:after {
  left: 0;
  transition-delay: 0.1s;
}
.arrow:hover .arrow-bottom:after {
  right: 0;
  transition-delay: 0s;
}
.arrow:active {
  transform: scale(0.95);
  box-shadow: 2px 8px 4px -6px rgba(0, 0, 0, 0.5);
}
.arrow.prev:active {
  transform: rotateY(180deg) scale(0.95);
  box-shadow: 2px 8px 4px -6px rgba(0, 0, 0, 0.5);
}

/*----------------------------
        Texte h3 parallaxe
----------------------------*/

#bloc_presentation {
  width: 100%;
  box-sizing: border-box;
  padding: 0 2rem;
  position: relative;
  z-index: 1;
}

#parallaxe_text {
  transform: translate(1rem, -1.5rem);
}

#parallaxe_text > p:first-child {
  font-family: "Didot-Italic", Garamond, "Times New Roman", serif;
  color: rgb(117, 117, 117);
  font-size: 220%;
  margin: 0;
  font-weight: 100;
}

#parallaxe_text > h3 {
  color: rgb(16, 28, 54);
  font-size: 280%;
  margin: 0;
  font-weight: 100;
}

/*----------------------------
    	Bloc info quadrillé
----------------------------*/

#bloc_info {
  margin-bottom: 2rem;
  border-spacing: 0.5px;
  table-layout: fixed;
  width: 60%;
  background: linear-gradient(135deg, rgb(203, 203, 203) 50%, #f8f7f7 50%);
  background-size: 200% 200%;
  transition: background-position 3.2s;
  background-position: top left;
  max-width: 45rem;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2rem;
}

#bloc_info.masquer {
  background-position: bottom right;
}

#bloc_info.masquer td {
  color: #f8f7f7;
}

#bloc_info td .apparition {
  display: block;
  height: min-content;
  overflow: hidden;
}

#bloc_info td .apparition2 {
  transform: translateY(0%);
  transition: transform 1s 0.8s ease-in-out;
  display: flex;
  align-items: center;
  width: 100%;
  white-space: nowrap;
}

#bloc_info tr:nth-of-type(2) td:nth-of-type(1) .apparition2 {
  transition-delay: 0.95s;
}
#bloc_info tr:nth-of-type(3) td:nth-of-type(1) .apparition2 {
  transition-delay: 1.1s;
}
#bloc_info tr:nth-of-type(1) td:nth-of-type(2) .apparition2 {
  transition-delay: 1.25s;
}
#bloc_info tr:nth-of-type(2) td:nth-of-type(2) .apparition2 {
  transition-delay: 1.4s;
}
#bloc_info tr:nth-of-type(3) td:nth-of-type(2) .apparition2 {
  transition-delay: 1.55s;
}

#bloc_info.masquer td .apparition2 {
  transform: translateY(100%);
}

#bloc_info td span:not(.apparition):not(.apparition2) {
  font-size: 0.9rem;
}

#bloc_info * {
  box-sizing: border-box;
}

#bloc_info tbody {
  width: 100%;
  margin: 0.5px;
}

#bloc_info tr {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
}

#bloc_info td {
  background: #f8f7f7;
  color: rgb(16, 28, 54);
  padding: 0.75rem 1rem;
  width: calc(50% - 1px);
  display: inline-block;
  white-space: nowrap;
  margin: 0.5px;
  transition:
    opacity ease-out 1s 1s,
    visibility ease-out 1s 1s;
  overflow: hidden;
}

#bloc_info td span,
#bloc_info td a,
#bloc_info td {
  text-transform: uppercase;
  line-height: 1.5rem;
  font-weight: 800;
  display: flex;
  align-items: center;
}

#bloc_info td a,
#bloc_info td {
  font-size: 0.73rem;
  font-family: "Muli", Arial, Helvetica, sans-serif;
  display: flex;
  align-items: center;
}

#bloc_info td a,
#bloc_info td ins {
  margin-left: 1rem;
  color: rgb(117, 117, 117);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  display: block;
}

#bloc_info td .icon-checked + a {
  margin-left: 0;
  color: rgb(16, 28, 54);
}

#bloc_info td ins img {
  max-height: 1.6rem;
  vertical-align: top;
}

#bloc_info td a[href] {
  color: rgb(58, 170, 53);
  text-decoration: none;
  transition-property: opacity, visibility;
}

#bloc_info td a[href]:hover {
  color: rgb(117, 117, 117);
  transition: none;
}

#bloc_info td span:before {
  margin-right: 0.5rem;
  font-size: 130%;
  transition: none;
  transition-duration: 0s;
}

/*=================================================
					Carroussel
==================================================*/

.carroussel:not(#carrousselImg) {
  cursor: grab;
}

.carroussel:not(#carrousselImg):active {
  cursor: grabbing;
}

.carroussel {
  position: relative;
  padding-left: 0;
  display: flex;
  width: 100%;
  align-items: flex-start;
}

.carroussel > *:not(:first-child) {
  transform: translateX(100%);
  visibility: hidden;
}

.carroussel > *:last-child {
  transform: translateX(-100%);
  visibility: hidden;
}

.carroussel > * {
  position: absolute;
  transition:
    visibility ease-out 0s 0.4s,
    transform ease-out 0.4s 0.4s,
    opacity ease-out 0.4s;
  z-index: 0;
  opacity: 0.5;
  visibility: hidden;
  top: 0;
  background-color: #f8f7f7;
}

.carroussel > *.mouv {
  visibility: visible !important;
  opacity: 1 !important;
  position: initial !important;
}

.douce_disparition {
  transition:
    visibility ease-out 0.4s,
    transform ease-out 0.4s;
  z-index: 1;
}

.carroussel * {
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
  user-select: none;
}

.mouseon {
  visibility: visible !important;
  opacity: 0.3 !important;
  transition:
    transform ease-out 0.8s,
    opacity ease-out 0.4s !important;
}

.principal {
  opacity: 1 !important;
  transition:
    transform ease-out 0.8s,
    opacity ease-out 0.4s !important;
}

.carroussel > *.mouv.mouseon {
  opacity: 0.3 !important;
}

.carroussel > *.mouv.mouseon.principal {
  opacity: 1 !important;
  transition:
    transform ease-out 0.8s,
    opacity ease-out 0.4s !important;
}

/*------------------------------
				Titre carroussel
-------------------------------*/

.titre-carroussel {
  display: flex;
  justify-content: space-around;
  padding-bottom: 1rem;
  align-items: center;
}

@media screen and (max-width: 1000px) {
  .titre-carroussel {
    padding-bottom: 0;
  }
}

.titre-carroussel p {
  font-size: 1rem;
  font-weight: 600;
  color: rgb(117, 117, 117);
  text-transform: uppercase;
  cursor: pointer;
  margin: 0;
}

.titre-carroussel p:hover {
  color: rgb(81, 150, 78);
}

.titre-carroussel p:after,
.titre-carroussel p.pre-non-actif.actif:after {
  content: "";
  display: block;
  height: 2px;
  background: currentColor;
  will-change: transform;
  transition: -webkit-transform 0.5s cubic-bezier(0.3, 0, 0, 1);
  transition: transform 0.5s cubic-bezier(0.3, 0, 0, 1);
  transition:
    transform 0.5s cubic-bezier(0.3, 0, 0, 1),
    -webkit-transform 0.5s cubic-bezier(0.3, 0, 0, 1);
  -webkit-transform-origin: right center;
  transform-origin: right center;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
}

.titre-carroussel p.actif:after,
.titre-carroussel p.pre-actif:after {
  -webkit-transform: none;
  transform: none;
  -webkit-transform-origin: left center;
  transform-origin: left center;
  background: rgb(81, 150, 78);
}

.titre-carroussel p.actif {
  color: rgb(81, 150, 78);
}

/*=================================================
				Carroussel chambres
==================================================*/

#chambres .carroussel {
  position: relative;
  width: 100%;
  margin: 0;
}

#chambres .carroussel > * {
  opacity: 0;
  transition:
    visibility ease-out 0s 0.8s,
    transform ease-out 0.8s,
    opacity ease-out 0.7s;
}

#chambres .mouv .prix > div > div {
  transform: translateX(0);
}

#chambres .douce_disparition {
  transition: ease-out 0.8s;
  transition-property: visibility, transform;
}

#chambres {
  padding: 4rem 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  overflow: hidden;
}

#chambres h2,
#pageMaison h2,
#pageRestauration h2,
#pageEnvirons h2 {
  margin-left: 10%;
  margin-bottom: 0;
}

#chambres .relative {
  width: 100%;
  padding-top: 2rem;
}

#chambres li {
  list-style-type: none;
}

#chambres .carroussel li {
  padding-left: 2rem;
  padding-right: 2rem;
}

#chambres .relative li > div {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}

/*----------------------------
    	Défilement img
----------------------------*/

.defilement_img {
  display: flex;
  width: 64%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  height: 100%;
  height: min-content;
  z-index: 0;
  position: relative;
}

.defilement_img .img_carrous {
  height: 100%;
  width: 100%;
  display: flex;
  transition: all ease-out 0.4s;
}

.defilement_img img {
  width: 100%;
  height: 100%;
  margin-left: 0;
}

.defilement_img img:not(:nth-child(1)) {
  position: absolute;
  top: 0;
  left: 0;
}

.carroussel-auto > * {
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.carroussel-auto .visible {
  opacity: 1;
}

/*----------------------------
    	Description chambres
----------------------------*/

.description_chambre {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 1px solid rgb(162, 158, 120);
  padding: 3rem;
  padding-left: 5rem;
  width: calc(36% + 4rem);
  right: 0;
  box-shadow: 3px 6px 20px rgba(0, 0, 0, 0.2);
  margin-left: -4rem;
  box-sizing: border-box;
  z-index: 10;
}

.description_chambre h3 {
  color: rgb(16, 28, 54);
  font-size: 1.65rem;
  margin: 0;
  font-weight: 100;
  text-transform: uppercase;
  text-align: center;
}

.description_chambre p {
  font-size: 0.9rem;
  text-align: center;
  color: rgba(16, 28, 54, 0.73);
}

.description_chambre > h3 + p {
  margin-top: 1.85rem;
  font-size: 1rem;
  color: rgb(16, 28, 54);
}

.description_chambre > p:nth-child(3) {
  color: rgba(16, 28, 54, 0.73);
  margin-top: 0;
  text-align: center;
  margin-bottom: 0;
}

#chambres .button {
  background: rgb(81, 150, 78);
  border-radius: 0;
  font-family: "Didot-Roman", Garamond, "Times New Roman", serif;
  font-weight: 500;
  font-size: 1.3rem;
  margin-top: 1.85rem;
}

#chambres .btn-2 {
  color: rgb(81, 150, 78);
  text-transform: uppercase;
  background: transparent;
  border: none;
  padding: 0.5rem 1.5rem;
  margin-top: 1.14rem;
  cursor: pointer;
  font-size: 95%;
}

/*----------------------------
    	Bloc du prix
----------------------------*/

.prix {
  position: absolute;
  width: 7.5rem;
  overflow: hidden;
  bottom: 30%;
  left: calc(64% - 7.5rem);
  height: 4.7rem;
  z-index: 15;
}

.prix > div {
  position: relative;
  height: 100%;
}

.prix > div > div {
  position: absolute;
  background: rgb(81, 150, 78);
  text-transform: uppercase;
  display: flex;
  flex-wrap: wrap;
  padding: 0.5rem;
  padding-left: 0;
  justify-content: flex-end;
  transform: translateX(100%);
  transition: transform ease-in-out 0.5s 0.2s;
  height: 100%;
  box-sizing: border-box;
}

.prix p {
  margin: 0;
  color: white;
  font-family: "Didot-Roman", "Times New Roman", serif;
}

.prix p:first-child {
  padding-left: 0.5rem;
  margin-right: auto;
  width: 6.5rem;
  font-weight: 100;
  font-style: italic;
  text-transform: lowercase;
  font-size: 0.8rem;
}

.prix p:nth-child(2) {
  display: inline-flex;
  font-size: 2.2rem;
  align-items: flex-start;
  line-height: 1;
}

.prix p:last-child {
  display: inline;
  font-family: "Muli", Arial, Helvetica, sans-serif;
  text-transform: uppercase;
  font-size: 0.55rem;
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  justify-content: flex-end;
}

/*----------------------------
    		Divers 
----------------------------*/

.btn-2::before,
.btn-2::after {
  background: rgb(117, 117, 117);
}
.btn-2 > span::before,
.btn-2 > span::after {
  background: rgb(117, 117, 117);
}

#chambres .arrow.next {
  right: 0;
  top: 50%;
}

#chambres .arrow.prev {
  left: 0;
  top: 50%;
  display: block;
}

/* ==================================================================
						Avis et localisation
====================================================================*/

#avis h2 {
  margin-left: 10%;
}

#avis .article {
  display: flex;
  justify-content: center;
}

/*----------------------------
    	Avis des clients
----------------------------*/

#commentaire {
  width: 35%;
  height: auto;
  display: flex;
  overflow: hidden;
  border: 1.5px solid rgb(162, 158, 120);
  margin-right: -1rem;
  position: relative;
  padding: 3rem;
}

#commentaire div {
  width: 100%;
  position: relative;
  height: auto;
  list-style-type: none;
  flex: 0 0 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#commentaire div:not(:nth-child(1)) {
  position: absolute;
  width: calc(100% - 6rem);
  height: calc(100% - 6rem);
  top: 3rem;
  left: 3rem;
}

#commentaire div p {
  width: 100%;
  margin-bottom: 0;
}

#commentaire div p:first-child {
  margin-left: 4rem;
  font-size: 180%;
  font-family: "Didot-Roman", Garamond, "Times New Roman", serif;
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

#commentaire div p:first-child span {
  color: rgb(117, 117, 117);
  vertical-align: text-bottom;
  font-size: 45%;
}

#commentaire div p:last-child {
  color: rgba(16, 28, 54, 0.73);
}

/*----------------------------
    		logo Avis 
----------------------------*/

.logo_avis {
  border: 1.5px solid rgb(162, 158, 120);
  width: 12rem;
  height: 12rem;
  padding: 1.5rem 1.5rem;
  background: transparent;
  margin-right: -1.5rem;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
  background: #f8f7f7;
}

.logo_avis img {
  max-width: 100%;
  max-height: 100%;
}

.logo_avis a {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  object-fit: cover;
}

.logo_avis:nth-child(2) {
  transform: translateY(8vw);
  height: 10rem;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}

.logo_avis:nth-child(2) {
  transform: translateY(3vw);
}

.logo_avis:nth-child(4) {
  transform: translateY(10vw);
  height: 10rem;
  box-shadow: 0 9px 20px rgba(0, 0, 0, 0.3);
}

#localisation {
  display: flex;
  justify-content: center;
}

/*-----------------------
		Localisation
------------------------*/

#localisation {
  margin-top: 7rem;
  margin-bottom: 6rem;
}

#localisation div:first-child {
  width: 35%;
}

#localisation div:first-child img {
  width: 100%;
}

#localisation > div:first-child a {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  object-fit: cover;
}

#bloc-localisation {
  width: 45%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-left: -4rem;
  padding-left: 4rem;
  height: min-content;
  position: relative;
}

#bloc-localisation:before {
  border: 1px solid rgb(162, 158, 120);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition:
    height 0.4s 0.7s,
    width 0.7s;
}

#bloc-localisation.masquer:before {
  width: 0%;
  height: 0%;
}

#bloc-localisation.masquer > * {
  visibility: hidden;
  opacity: 0;
  -webkit-transform: translateY(-15%) scale(0.8);
  transform: translateY(-15%) scale(0.8);
}

#bloc-localisation > * {
  visibility: visible;
  -webkit-transform: translateY(0) scale(1);
  opacity: 1;
  transform: translateY(0) scale(1);
  -webkit-transition:
    -webkit-transform 0.65s cubic-bezier(0.6, 0.2, 0.1, 1) 1.1s,
    opacity 0.65s cubic-bezier(0.6, 0.2, 0.1, 1) 1.1s;
  transition:
    transform 0.65s cubic-bezier(0.6, 0.2, 0.1, 1) 1.1s,
    opacity 0.65s cubic-bezier(0.6, 0.2, 0.1, 1) 1.1s;
}

#bloc-localisation h3 {
  font-size: 180%;
  margin-top: 0;
  margin-bottom: 1rem;
  font-weight: 100;
}

#bloc-localisation p {
  width: 100%;
}

#bloc-localisation .btn-2 {
  color: rgb(81, 150, 78);
  text-transform: uppercase;
  background: transparent;
  border: none;
  padding: 0.5rem 1.5rem;
  margin: 0;
  cursor: pointer;
  font-size: 95%;
  margin-top: 0.85rem;
}

/* ==================================================================
								PAGE RESERVATIONS
====================================================================*/

#pageChambres main {
  min-height: 200vh;
}

#chambres.reservation {
  padding: 0 2rem;
  padding-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

/*----------------------------
    		Indicateur
----------------------------*/

#indicateur_avancement {
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
  margin-bottom: 2rem;
}

#chambres.reservation #etape1 {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

#indicateur_avancement p {
  font-size: 1.3rem;
  font-weight: bold;
  color: rgb(195, 195, 195);
  text-align: center;
  margin: 2.5vw 2.2vw 0.5vw 2.2vw;
}

#indicateur_avancement p::first-letter {
  font-size: 180%;
}

/*=================================================
					Etape 1
==================================================*/

#chambres.reservation .relative {
  padding: 0 0;
  overflow: initial;
  display: flex;
  margin-bottom: 5rem;
}

#chambres.reservation .relative:first-child {
  margin-top: 2.62vw;
}

#chambres.reservation .relative .article {
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}

#chambres.reservation .relative .article > div {
  display: flex;
  flex-wrap: wrap;
}

#chambres.reservation .defilement_img {
  width: calc(54% + 2.47rem);
  margin-bottom: calc(8.41vw + 5.2vw);
}

#chambres.reservation .description_chambre {
  z-index: 3;
  width: 46%;
  margin-left: -2.47rem;
  transform: translateY(-1.618vw);
  height: min-content;
  border: none;
  box-shadow: none;
  position: relative;
}

#chambres.reservation .description_chambre:before,
#pageMaison .zero .description_chambre:before,
#pageRestauration .zero .description_chambre:before {
  border: 1px solid rgb(162, 158, 120);
  box-shadow: 3px 6px 20px rgba(0, 0, 0, 0.2);
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
}

#chambres.reservation #room_1 .description_chambre:before {
  transition:
    width 0.7s,
    height 0.9s 0.7s;
}

#chambres.reservation #room_2 .description_chambre:before,
#pageRestauration .zero .description_chambre:before,
#pageMaison .zero .description_chambre:before {
  transition:
    height 0.7s,
    width 0.7s 0.7s;
}

#chambres.reservation #room_3 .description_chambre:before {
  transition:
    width 0.9s,
    height 0.7s 0.9s;
}

#chambres.reservation #room_apartment .description_chambre:before {
  transition:
    height 0.7s,
    width 0.7s 0.7s;
}

#chambres.reservation .masquer .description_chambre:before,
#pageMaison .masquer .zero .description_chambre:before,
#pageRestauration .masquer .zero .description_chambre:before {
  width: 0%;
  height: 0%;
}

#chambres.reservation .masquer .description_chambre > *,
#pageMaison .masquer .zero .description_chambre > *,
#pageRestauration .masquer .zero .description_chambre > * {
  visibility: hidden;
  opacity: 0;
}

#chambres.reservation .description_chambre > *,
#pageMaison .zero .description_chambre > * {
  transition: opacity ease-in-out 0.5s 1.4s;
}

#chambres.reservation #room_2 .description_chambre > *,
#pageRestauration .zero .description_chambre > * {
  transition: opacity ease-in-out 0.5s 1.1s;
}

#chambres.reservation .prix {
  z-index: 5;
  left: calc(54% + 2.47rem - 8vw);
  top: calc((100vw - 1rem) * 0.54 * 0.5625 - 4.2vw - 2.6vw);
  bottom: initial;
}

#chambres.reservation .masquer .prix > div > div {
  transform: translateX(100%);
}

#chambres.reservation .prix > div > div {
  transform: translateX(0);
}

#chambres.reservation .rupture {
  display: none;
  background: rgb(117, 117, 117);
  cursor: default;
}

#chambres.reservation .selected {
  color: rgb(58, 170, 53);
  background: white;
  border: 1px solid rgb(58, 170, 53);
  transform: scale(1);
  cursor: default;
  box-shadow: 2px 8px 4px -6px rgba(0, 0, 0, 0.5);
}

#chambres.reservation .selected:hover {
  transform: scale(1);
  cursor: default;
  box-shadow: 2px 8px 4px -6px rgba(0, 0, 0, 0.5);
}

#chambres.reservation .occupe .rupture {
  display: block;
}

#chambres.reservation .occupe .ajouter-panier {
  display: none;
}

#chambres.reservation .rupture:hover {
  transform: scale(1);
}

#chambres.reservation .button {
  margin-top: 0;
}

#chambres.reservation .controle {
  margin-top: 1.85rem;
  display: flex;
  align-items: center;
  position: relative;
}

#chambres.reservation .controle .button {
  transition:
    box-shadow 0.5s ease-in-out,
    transform 0.5s ease-in-out,
    background-color 0.9s ease-in-out,
    color 0.9s ease-in-out,
    border 0.9s ease-in-out;
}

.annuler-selection {
  position: absolute;
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1.7rem;
  width: 1.7rem;
  cursor: pointer;
  visibility: hidden;
  right: -3rem;
}

.annuler-selection.visible {
  visibility: visible;
}

.annuler-selection span {
  height: 100%;
  width: 100%;
  position: relative;
  display: block;
}

.annuler-selection span::before,
.annuler-selection span::after {
  content: "";
  height: 2px;
  background-color: rgb(200, 84, 84);
  width: 100%;
  display: block;
  position: absolute;
  top: 50%;
  transition: all 0.5s ease-out;
}

.annuler-selection span::before,
.annuler-selection span::after {
  transform: rotate(0);
  transition: transform ease-out 0.5s;
}

.annuler-selection.visible span::before {
  transform: rotate(45deg);
}

.annuler-selection.visible span::after {
  transform: rotate(-45deg);
}

.annuler-selection:hover span::before,
.annuler-selection:hover span::after {
  transform: rotate(0);
  transition: all ease-out 0.5s;
}

/*----------------------------
    		Info chambres 
----------------------------*/

.info_chambre {
  display: flex;
  border: 1px solid rgb(162, 158, 120);
  position: absolute;
  top: calc((100vw - 2rem) * 0.54 * 0.5625 - 1.5rem);
  left: 2rem;
  width: 54%;
  padding-top: 2rem;
  z-index: 4;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  justify-content: space-around;
}

.info_chambre div {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.info_chambre p {
  padding-left: 1rem;
  color: rgba(16, 28, 54, 0.73);
  margin: 0;
  margin-bottom: 0.7rem;
  display: flex;
  align-items: center;
  font-size: 0.9rem;
}

.info_chambre p span {
  color: rgb(81, 150, 78);
  margin-right: 1rem;
  font-size: 1.4vw;
}

/*=================================================
			    Validation des réservations
==================================================*/

[include*="form-input-select()"] {
  display: block;
  padding: 0;
  position: relative;
  color: #747474;
  display: block;
  border-radius: 0;
  box-shadow: none;
  font-size: 0.9rem;
  margin-top: 9px;
  margin-bottom: 15px;
  width: 100%;
  max-width: 7.5rem;
}
.options-room div[include*="form-input-select()"]:first-of-type {
  margin-right: 1rem;
}
.options-room div[include*="form-input-select()"]:last-of-type {
  max-width: 10.5rem;
}
[include*="form-input-select()"]::before,
[include*="form-input-select()"]::after {
  content: "";
  display: block;
  position: absolute;
  pointer-events: none;
  z-index: 2;
}
[include*="form-input-select()"] select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: none;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  border: 1px solid transparent;
  outline: none;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 1.5rem !important;
}
[include*="form-input-select()"] select:focus {
  background-color: transparent;
  outline: none;
}
[include*="form-input-select()"] option {
  font-weight: normal;
}
[include*="form-input-select()"] x:-o-prefocus,
[include*="form-input-select()"]::after {
  display: none;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  [include*="form-input-select()"] select::-ms-expand {
    display: none;
  }
  [include*="form-input-select()"] select:focus::-ms-value {
    background: transparent;
    color: #000;
  }
}
@-moz-document url-prefix() {
  [include*="form-input-select()"] {
    overflow: hidden;
  }
  [include*="form-input-select()"] select {
    width: 120%;
    width: calc(100% + 3em);
  }
  @supports (-moz-appearance: none) {
    [include*="form-input-select()"] select {
      width: 100%;
    }
  }
  [include*="form-input-select()"] select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
  }
}
@supports (-moz-appearance: none) {
  [include*="form-input-select()"] {
    width: 100%;
  }
}
[include*="form-input-select()"]::before,
[include*="form-input-select()"]::after {
  content: "";
  display: block;
  position: absolute;
  pointer-events: none;
  border: 1px solid transparent;
  width: 0;
  height: 0;
  right: 8px;
}
[include*="form-input-select()"]::before {
  bottom: 55%;
  border-width: 0 6.5px 8px 6.5px;
  border-bottom-color: #d6d6d6;
}
[include*="form-input-select()"]::after {
  border-width: 8px 6.5px 0 6.5px;
  border-top-color: #d6d6d6;
  top: 55%;
}
@-moz-document url-prefix() {
  [include*="form-input-select()"] {
    border-right: 2px solid #e6e6e6;
  }
  [include*="form-input-select()"]:hover {
    border-right: 2px solid rgb(162, 158, 120);
  }
}
[include*="form-input-select()"]:hover select {
  box-shadow: 0 2px 2px rgba(0, 91, 166, 0.1) inset;
  border-color: rgb(162, 158, 120);
}
[include*="form-input-select()"]:hover select:focus {
  outline-color: transparent;
}
[include*="form-input-select()"]:hover::before {
  border-bottom-color: rgb(162, 158, 120);
}
[include*="form-input-select()"]:hover::after {
  border-top-color: rgb(162, 158, 120);
}
[include*="form-input-select()"] select {
  border: 2px solid #e6e6e6;
  border-radius: 0;
  font-weight: 400;
  color: inherit;
  padding: 0.15rem 0.4rem;
  line-height: normal;
  -webkit-transition:
    border-color 0.2s ease,
    outline 0.2s ease;
  transition:
    border-color 0.2s ease,
    outline 0.2s ease;
}
[include*="form-input-select()"] select:focus {
  box-shadow: 0 2px 4px rgba(0, 91, 166, 0.3) inset;
  outline: 2px solid rgb(162, 158, 120);
  outline-offset: -2px;
}
[include*="form-input-select()"] select[disabled],
[include*="form-input-select()"] select:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
[include*="form-input-select()"] select:not(:focus):invalid {
  color: #c7c7c7;
}

#validation-commande {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 52;
  background: white;
  display: block;
  box-shadow: 0 -3px 6px rgba(16, 28, 54, 0.16);
  transition: transform ease-out 0.5s 0.2s;
  transform: translateY(100%);
}

#validation-commande.visible {
  transform: translateY(0%);
}

#validation-commande.reduire {
  transform: translateY(73%);
}

#validation-commande > form {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 2.5rem 3rem;
  padding-bottom: 1.5rem;
  box-sizing: border-box;
}

#validation-commande .show {
  display: block;
  background: transparent;
  right: 0.3rem;
  top: 0.3rem;
  animation: none;
}

/*------------------------------
				      Show
-------------------------------*/

.description_chambre .show {
  position: relative;
  margin-left: auto;
  margin-right: 1.5rem;
  top: initial;
  right: initial;
  margin-top: 0.3rem;
}

.show {
  height: 2.5rem;
  width: min-content;
  cursor: pointer;
  position: absolute;
  top: 7rem;
  right: 4%;
  border-radius: 25%;
  display: none;
  font-size: 0.75rem;
  white-space: nowrap;
  flex-direction: column;
  align-items: center;
  color: rgb(117, 117, 117);
  text-decoration: underline;
}

.show span {
  width: 2.5rem;
  height: calc(100% - 2px);
  display: flex;
  justify-content: center;
  align-items: center;
  animation: hautBas ease-in-out 0.8s infinite;
}
@keyframes hautBas {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(1px);
  }
  100% {
    transform: translateY(0);
  }
}

.description_chambre .show span {
  width: 2rem;
}

.show span:before,
.show span:after {
  content: "";
  display: block;
  width: 50%;
  height: 2px;
  background: rgba(40, 53, 78, 0.73);
  border-radius: 2px;
  transition: all ease-in-out 1s 0.2s;
}
.description_chambre .show span::before,
.description_chambre .show span::after {
  height: 1px;
}
.show span:before {
  transform: translateX(19%) rotate(45deg);
}
.show.visible span:before,
#validation-commande.reduire .show span:before {
  transform: translateX(19%) rotate(-45deg);
}
.show.visible span:after,
#validation-commande.reduire .show span:after {
  transform: translateX(-19%) rotate(45deg);
}
.show span:after {
  transform: translateX(-19%) rotate(-45deg);
}

#options {
  display: flex;
  flex-direction: column;
}

.options-room label {
  position: relative;
}

.options-room .annuler-selection {
  top: -0.2rem;
  right: -1.5rem;
  width: 1.1rem;
  height: 1.1rem;
}

#options > div:not(:last-child) {
  margin-bottom: 1.5rem;
}

#options > div {
  display: none;
}

#options label {
  font-family: "Muli", Arial, Helvetica, sans-serif;
  font-size: 1.25rem;
  color: rgb(16, 28, 54);
}

#options label + div {
  display: flex;
  padding-left: 1.4rem;
}

#recapitulatif {
  display: flex;
}

#recapitulatif > div:first-child {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin-right: 1.5rem;
}

#recapitulatif > div:first-child p:first-child {
  margin-bottom: 0;
  margin-top: 0;
  font-size: 1.45rem;
}

#recapitulatif > div:first-child p:nth-child(2) {
  margin-top: 0;
  font-size: 1.08rem;
  color: rgb(117, 117, 117);
  margin-bottom: 0;
}

.separateur {
  color: rgb(117, 117, 117);
  font-weight: 100;
  font-size: 2.5rem;
  margin: 0 0.5rem;
  line-height: 0;
}

#recapitulatif #prix {
  font-weight: bold;
  color: rgb(117, 117, 117);
}

#recapitulatif > div:last-child {
  display: flex;
  flex-direction: column;
  justify-content: end;
}

#recapitulatif > div:last-child button {
  background: rgb(81, 150, 78);
  font-family: "Didot-Roman", Garamond, "Times New Roman", serif;
  font-size: 1.55rem;
  text-transform: uppercase;
  height: 2.6rem;
  padding-left: 1.3rem;
  padding-right: 1.3rem;
  font-weight: 500;
}

#recapitulatif > div:last-child a {
  cursor: pointer;
  color: rgb(117, 117, 117);
  font-size: 0.95rem;
  margin-top: 1rem;
  text-align: right;
  text-decoration: underline rgb(117, 117, 117);
}

#validation-commande .reserver {
  position: relative !important;
  font-size: 0.8rem;
  background-color: transparent;
  color: rgb(162, 158, 120);
  border: none;
  font-family: "Muli", Arial, Helvetica, sans-serif;
  text-transform: uppercase;
  cursor: pointer;
  position: fixed;
  padding: 0;
  width: max-content;
  text-transform: lowercase;
}

#validation-commande .dateSaisie::after {
  content: attr(data-span);
  margin-left: 0.4rem;
  text-decoration: underline;
  font-size: 0.65rem;
}

/* ==================================================================
						          TRANSITION DES ETAPES
====================================================================*/

.absolute {
  /* position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  height: 0; */
}

#indicateur_avancement p.visible {
  color: rgb(16, 28, 54);
}

#indicateur_avancement p {
  color: rgb(195, 195, 195);
  overflow: hidden;
  position: relative;
  transition: color 0s 1.6s;
}

#indicateur_avancement p:after {
  background: #f8f7f7;
  content: "";
  display: block;
  position: absolute;
  width: 200%;
  height: 100%;
  left: 0;
  top: 0;
  transform: translateX(-100%);
}

#indicateur_avancement p[class="visible"]:after {
  transform: translateX(50%);
  transition: transform 3s 0.2s ease-in-out;
}

.etape.cacher {
  display: none;
  max-height: 0 !important;
}

#etape1,
#etape2,
#etape3,
.etape {
  max-height: 300rem;
}

#etape1.cacher {
  display: flex;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  -webkit-transform: translateY(-10%) scale(0.8);
  transform: translateY(-10%) scale(0.8);
  -webkit-transition:
    -webkit-transform 0.65s cubic-bezier(0.6, 0.2, 0.1, 1),
    opacity 0.65s cubic-bezier(0.6, 0.2, 0.1, 1),
    max-height 0s 0.65s,
    visibility 0s 0.65s;
  transition:
    transform 0.65s cubic-bezier(0.6, 0.2, 0.1, 1),
    opacity 0.65s cubic-bezier(0.6, 0.2, 0.1, 1),
    max-height 0s 0.65s,
    visibility 0s 0.65s;
}

#etape1 {
  visibility: visible;
  -webkit-transform: translateY(0) scale(1);
  opacity: 1;
  transform: translateY(0) scale(1);
  -webkit-transition:
    -webkit-transform 0.65s cubic-bezier(0.6, 0.2, 0.1, 1),
    opacity 0.65s cubic-bezier(0.6, 0.2, 0.1, 1),
    max-height 0s;
  transition:
    transform 0.65s cubic-bezier(0.6, 0.2, 0.1, 1),
    opacity 0.65s cubic-bezier(0.6, 0.2, 0.1, 1),
    max-height 0s;
  transition-delay: 2.15s;
}

#etape2.cacher {
  margin-bottom: 0;
  display: block;
  overflow: hidden;
  transition: all 0s 2.15s;
}

#etape2.cacher #bloc-choix {
  -webkit-transition:
    -webkit-transform 0.65s 0.3s cubic-bezier(0.6, 0.2, 0.1, 1),
    opacity 0.65s 0.3s cubic-bezier(0.6, 0.2, 0.1, 1),
    max-height 0s 2.15s,
    visibility 0s 2.15s,
    overflow 0s 2.15s;
  transition:
    transform 0.65s 0.3s cubic-bezier(0.6, 0.2, 0.1, 1),
    opacity 0.65s 0.3s cubic-bezier(0.6, 0.2, 0.1, 1),
    max-height 0s 2.15s,
    visibility 0s 2.15s,
    overflow 0s 2.15s;
}

#etape2.cacher .info-date,
#etape2.cacher .precedent {
  -webkit-transition:
    -webkit-transform 0.65s 0.4s cubic-bezier(0.6, 0.2, 0.1, 1),
    opacity 0.65s 0.4s cubic-bezier(0.6, 0.2, 0.1, 1),
    max-height 0s 2.15s,
    visibility 0s 2.15s,
    overflow 0s 2.15s;
  transition:
    transform 0.65s 0.4s cubic-bezier(0.6, 0.2, 0.1, 1),
    opacity 0.65s 0.4s cubic-bezier(0.6, 0.2, 0.1, 1),
    max-height 0s 2.15s,
    visibility 0s 2.15s,
    overflow 0s 2.15s;
}
#etape2.cacher #recap-reservation {
  -webkit-transition:
    -webkit-transform 0.65s 0.3s cubic-bezier(0.6, 0.2, 0.1, 1),
    opacity 0.65s 0.3s cubic-bezier(0.6, 0.2, 0.1, 1),
    max-height 0s 2.15s,
    visibility 0s 2.15s,
    overflow 0s 2.15s;
  transition:
    transform 0.65s 0.3s cubic-bezier(0.6, 0.2, 0.1, 1),
    opacity 0.65s 0.3s cubic-bezier(0.6, 0.2, 0.1, 1),
    max-height 0s 2.15s,
    visibility 0s 2.15s,
    overflow 0s 2.15s;
}
#etape2.cacher #optionsSejour {
  -webkit-transition:
    -webkit-transform 0.65s 0.2s cubic-bezier(0.6, 0.2, 0.1, 1),
    opacity 0.65s 0.2s cubic-bezier(0.6, 0.2, 0.1, 1),
    max-height 0s 2.15s,
    visibility 0s 2.15s,
    overflow 0s 2.15s;
  transition:
    transform 0.65s 0.2s cubic-bezier(0.6, 0.2, 0.1, 1),
    opacity 0.65s 0.2s cubic-bezier(0.6, 0.2, 0.1, 1),
    max-height 0s 2.15s,
    visibility 0s 2.15s,
    overflow 0s 2.15s;
}
#etape2.cacher .colonne.droite {
  -webkit-transition:
    -webkit-transform 0.65s 0.1s cubic-bezier(0.6, 0.2, 0.1, 1),
    opacity 0.65s 0.1s cubic-bezier(0.6, 0.2, 0.1, 1),
    max-height 0s 2.15s,
    visibility 0s 2.15s,
    overflow 0s 2.15s;
  transition:
    transform 0.65s 0.1s cubic-bezier(0.6, 0.2, 0.1, 1),
    opacity 0.65s 0.1s cubic-bezier(0.6, 0.2, 0.1, 1),
    max-height 0s 2.15s,
    visibility 0s 2.15s,
    overflow 0s 2.15s;
}
#etape2.cacher #finaliser {
  -webkit-transition:
    -webkit-transform 0.65s cubic-bezier(0.6, 0.2, 0.1, 1),
    opacity 0.65s cubic-bezier(0.6, 0.2, 0.1, 1),
    max-height 0s 2.15s,
    visibility 0s 2.15s,
    overflow 0s 2.15s;
  transition:
    transform 0.65s cubic-bezier(0.6, 0.2, 0.1, 1),
    opacity 0.65s cubic-bezier(0.6, 0.2, 0.1, 1),
    max-height 0s 2.15s,
    visibility 0s 2.15s,
    overflow 0s 2.15s;
}

#etape2.cacher:before {
  transition:
    width 0.7s 1.25s ease-in,
    height 0.7s 0.55s ease-out;
}

#etape2.cacher .precedent {
  display: block;
  visibility: hidden;
  opacity: 0;
  -webkit-transform: translateY(-10%) scale(0.8) rotate(70deg);
  transform: translateY(-10%) scale(0.8) rotate(70deg);
}

#etape2.cacher #bloc-choix,
#etape2.cacher .info-date,
#etape2.cacher #recap-reservation,
#etape2.cacher #optionsSejour,
#etape2.cacher .colonne.droite,
#etape2.cacher #finaliser {
  visibility: hidden;
  opacity: 0;
  -webkit-transform: translateY(-10%) scale(0.8);
  transform: translateY(-10%) scale(0.8);
}

#etape2 .precedent {
  visibility: visible;
  -webkit-transform: translateY(0) scale(1) rotate(90deg);
  opacity: 1;
  transform: translateY(0) scale(1) rotate(90deg);
  -webkit-transition:
    -webkit-transform 0.65s cubic-bezier(0.6, 0.2, 0.1, 1) 1.9s,
    opacity 0.65s cubic-bezier(0.6, 0.2, 0.1, 1) 1.9s,
    max-height 0s;
  transition:
    transform 0.65s cubic-bezier(0.6, 0.2, 0.1, 1) 1.9s,
    opacity 0.65s cubic-bezier(0.6, 0.2, 0.1, 1) 1.9s,
    max-height 0s;
}

#etape2 #bloc-choix,
#etape2 .info-date,
#etape2 #recap-reservation,
#etape2 #optionsSejour,
#etape2 .colonne.droite,
#etape2 #finaliser {
  visibility: visible;
  -webkit-transform: translateY(0) scale(1);
  opacity: 1;
  transform: translateY(0) scale(1);
  -webkit-transition:
    -webkit-transform 0.65s cubic-bezier(0.6, 0.2, 0.1, 1) 2.1s,
    opacity 0.65s cubic-bezier(0.6, 0.2, 0.1, 1) 2.1s,
    max-height 0s;
  transition:
    transform 0.65s cubic-bezier(0.6, 0.2, 0.1, 1) 2.1s,
    opacity 0.65s cubic-bezier(0.6, 0.2, 0.1, 1) 2.1s,
    max-height 0s;
}

#etape2 .info-date {
  -webkit-transition-delay: 2.2s;
  transition-delay: 2.2s;
}
#etape2 #recap-reservation {
  -webkit-transition-delay: 2.3s;
  transition-delay: 2.3s;
}
#etape2 #optionsSejour {
  -webkit-transition-delay: 2.4s;
  transition-delay: 2.4s;
}
#etape2 .colonne.droite {
  -webkit-transition-delay: 2.5s;
  transition-delay: 2.5s;
}
#etape2 #finaliser {
  -webkit-transition-delay: 2.6s;
  transition-delay: 2.6s;
}
#etape2 #finaliser.back {
  -webkit-transition-delay: 1.8s;
  transition-delay: 1.8s;
}

#etape2::before {
  border: 1px solid rgb(162, 158, 120);
  box-shadow: 3px 6px 20px rgba(0, 0, 0, 0.2);
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition:
    width 0.7s 0.7s ease-in,
    height 0.7s 1.4s ease-out;
  box-sizing: border-box;
}

#etape2.cacher::before {
  width: 0%;
  height: 0%;
}

.absolute.etape.etape2.cacher {
  display: block;
}

.absolute.etape.etape2 {
  display: block;
  transition: max-height 0s 1.8s;
}

#coordonnees.etape2.cacher > *,
#finaliser.etape2.cacher #cgv > *,
#finaliser.etape2.cacher #validation-formulaire > * {
  -webkit-transform: translateY(-5%) scale(0.8);
  opacity: 0;
  transform: translateY(-5%) scale(0.8);
  -webkit-transition:
    -webkit-transform 0.4s cubic-bezier(0.6, 0.2, 0.1, 1),
    opacity 0.4s cubic-bezier(0.6, 0.2, 0.1, 1);
  transition:
    transform 0.4s cubic-bezier(0.6, 0.2, 0.1, 1),
    opacity 0.4s cubic-bezier(0.6, 0.2, 0.1, 1);
}

#coordonnees.etape2 > *,
#finaliser.etape2 #cgv > *,
#finaliser.etape2 #validation-formulaire > * {
  -webkit-transform: translateY(0) scale(1);
  opacity: 1;
  transform: translateY(0) scale(1);
  -webkit-transition:
    -webkit-transform 0.4s cubic-bezier(0.6, 0.2, 0.1, 1) 1.8s,
    opacity 0.4s cubic-bezier(0.6, 0.2, 0.1, 1) 1.8s;
  transition:
    transform 0.4s cubic-bezier(0.6, 0.2, 0.1, 1) 1.8s,
    opacity 0.4s cubic-bezier(0.6, 0.2, 0.1, 1) 1.8s;
}

#coordonnees.etape2::before,
#finaliser.etape2 #cgv:before {
  border: 1px solid rgba(162, 158, 120, 0.7);
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  box-sizing: border-box;
}

#coordonnees.etape2.back > *,
#finaliser.etape2.back #cgv > *,
#finaliser.etape2.back #validation-formulaire > * {
  -webkit-transition:
    -webkit-transform 0.4s cubic-bezier(0.6, 0.2, 0.1, 1) 3.2s,
    opacity 0.4s cubic-bezier(0.6, 0.2, 0.1, 1) 3.2s;
  transition:
    transform 0.4s cubic-bezier(0.6, 0.2, 0.1, 1) 3.2s,
    opacity 0.4s cubic-bezier(0.6, 0.2, 0.1, 1) 3.2s;
}

#coordonnees.etape2.back::before,
#finaliser.etape2.back #cgv:before {
  transition:
    height 0.7s 1.8s ease-out,
    width 0.7s 2.5s ease-in;
}

#coordonnees.etape2.cacher::before,
#finaliser.etape2.cacher #cgv::before {
  width: 0%;
  height: 0%;
  transition:
    height 0.7s 0.4s ease-in,
    width 0.7s 1.1s ease-out;
}

#coordonnees.etape2,
#finaliser.etape2 {
  position: relative;
  overflow: initial;
  transform: scale(1);
  visibility: visible;
  transition: all 0s 1.8s;
}

#coordonnees.etape2 {
  display: block;
}
#finaliser.etape2 {
  display: flex;
}

#coordonnees.etape2.cacher,
#finaliser.etape2.cacher {
  overflow: hidden;
  visibility: hidden;
  transform: scale(0);
  transition: all 0s 1.8s;
}

.absolute.flex.etape.etape3.etape4 {
  transition: max-height 0s 1.8s;
}

#etape3,
#paiement {
  position: relative;
  display: block;
  transform: scale(1);
  overflow: initial;
  visibility: visible;
  transition: all 0s 1.8s;
  box-sizing: border-box;
}

#etape3.cacher,
#paiement.cacher {
  display: block;
  overflow: hidden;
  transform: scale(0);
  visibility: hidden;
  transition: all 0s 1.8s;
}

#etape3.cacher::before,
#paiement.cacher::before {
  width: 0%;
  height: 0%;
  transition:
    height 0.7s 0.4s ease-out,
    width 0.7s 1.1s ease-in;
}

#etape3::before,
#paiement::before {
  border: 1px solid rgba(162, 158, 120, 0.7);
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition:
    height 0.7s 1.8s ease-out,
    width 0.7s 2.5s ease-in;
  box-sizing: border-box;
}

#etape3 > *,
#paiement > * {
  -webkit-transform: translateY(0) scale(1);
  opacity: 1;
  transform: translateY(0) scale(1);
  -webkit-transition:
    -webkit-transform 0.4s cubic-bezier(0.6, 0.2, 0.1, 1) 3.2s,
    opacity 0.4s cubic-bezier(0.6, 0.2, 0.1, 1) 3.2s;
  transition:
    transform 0.4s cubic-bezier(0.6, 0.2, 0.1, 1) 3.2s,
    opacity 0.4s cubic-bezier(0.6, 0.2, 0.1, 1) 3.2s;
}

#etape3.cacher > *,
#paiement.cacher > * {
  -webkit-transform: translateY(-5%) scale(0.8);
  opacity: 0;
  transform: translateY(-5%) scale(0.8);
  -webkit-transition:
    -webkit-transform 0.4s cubic-bezier(0.6, 0.2, 0.1, 1),
    opacity 0.4s cubic-bezier(0.6, 0.2, 0.1, 1);
  transition:
    transform 0.4s cubic-bezier(0.6, 0.2, 0.1, 1),
    opacity 0.4s cubic-bezier(0.6, 0.2, 0.1, 1);
}

#confirmation {
  -webkit-transform: translateY(0) scale(1);
  opacity: 1;
  transform: translateY(0) scale(1);
  -webkit-transition:
    -webkit-transform 0.4s cubic-bezier(0.6, 0.2, 0.1, 1),
    opacity 0.4s cubic-bezier(0.6, 0.2, 0.1, 1),
    padding,
    margin;
  transition:
    transform 0.4s cubic-bezier(0.6, 0.2, 0.1, 1),
    opacity 0.4s cubic-bezier(0.6, 0.2, 0.1, 1),
    padding,
    margin;
  transition-delay: 2.5s;
  max-height: 300rem;
}

#confirmation.cacher {
  display: block;
  overflow: hidden;
  visibility: hidden;
  -webkit-transform: translateY(-5%) scale(0.8);
  opacity: 0;
  transform: translateY(-5%) scale(0.8);
  padding: 0;
  margin: 0;
}

/* ==================================================================
									          Etape 2
====================================================================*/

#etape2 {
  padding: 1rem;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 5rem;
}

.precedent {
  display: block;
  background: transparent;
  transform: rotate(90deg);
  animation: none;
  top: 1.4rem;
  left: 0.2rem;
}

.precedent span {
  animation: none;
}

#bloc-choix {
  margin-bottom: 1rem;
  width: 100%;
  margin-left: 2rem;
  margin-right: 2rem;
}

#bloc-choix p {
  color: rgb(117, 117, 117);
  text-align: center;
}

#bloc-choix span {
  color: rgb(16, 28, 54);
}

.vert {
  background: rgba(58, 170, 53, 0.03);
  border: 1px solid rgb(58, 170, 53);
}

.colonne {
  display: flex;
  flex-direction: column;
}

#etape2 .div-responsive {
  display: flex;
  width: 100%;
}

.colonne.gauche {
  width: 30%;
  min-width: min-content;
  margin-right: 1rem;
}

.colonne.gauche * {
  box-sizing: border-box;
}

.info-date {
  color: rgb(117, 117, 117);
  font-size: 0.9rem;
  padding: 0.5rem 1rem;
  border: 1px solid rgba(162, 158, 120, 0.7);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-bottom: 1rem;
}

.info-date p {
  margin: 0;
  width: 100%;
  font-weight: 400;
  line-height: 1.4;
}

.info-date p:first-child {
  margin-bottom: 1.3rem;
}

.info-date .checkIn,
.info-date .checkOut {
  color: rgb(16, 28, 54);
  font-size: 1rem;
  font-weight: 600;
}

.info-date a {
  font-size: 0.8rem;
  text-decoration: underline;
  color: rgba(116, 116, 116, 0.7);
  cursor: pointer;
}

#recap-reservation {
  margin-bottom: 1rem;
}

#bloc-chambres {
  width: 100%;
  padding: 0.5rem 1rem;
  padding-bottom: 1.9rem;
  position: relative;
  border: 1px solid rgba(162, 158, 120, 0.7);
  border-spacing: 0px;
}

#bloc-chambres th,
#bloc-chambres td {
  color: rgb(117, 117, 117);
  font-family: "Muli", Arial, Helvetica, sans-serif;
  width: max-content;
  text-align: left;
  font-weight: 400;
}

#bloc-chambres .recap-room {
  font-weight: 700;
  font-size: 1rem;
}

#bloc-chambres .recap-room + td {
  font-size: 1rem;
}

#bloc-chambres .taxe {
  font-size: 0.8rem;
  white-space: nowrap;
}

.cacher {
  display: none;
}

#bloc-chambres a {
  font-size: 0.8rem;
  text-decoration: underline;
  color: rgba(116, 116, 116, 0.7);
  cursor: pointer;
  position: absolute;
  right: 1rem;
  bottom: 0.5rem;
}

#bloc-total {
  width: 100%;
  padding: 0.5rem 1rem;
  border: 1px solid rgba(162, 158, 120, 0.7);
}

#bloc-total div,
#optionsSejour div,
#coordonnees fieldset,
#cgv small {
  padding-left: 1rem;
}

#bloc-total > p:first-child {
  display: flex;
  justify-content: space-between;
  color: rgb(16, 28, 54);
  font-weight: 600;
  font-size: 1.2rem;
  margin: 0;
  align-items: flex-end;
}

#bloc-total p:first-child #montantTotalTaxe {
  color: rgb(58, 170, 53);
  font-size: 1.1rem;
}

#bloc-total div > p:first-child {
  color: rgb(117, 117, 117);
  font-weight: 400;
  margin: 0;
  margin-bottom: 1.3rem;
  font-size: 0.85rem;
}

#bloc-total small {
  font-size: 66%;
  text-align: center;
  display: block;
  color: rgba(116, 116, 116, 0.7);
}

#optionsSejour {
  padding: 0.5rem 1rem;
}

#optionsSejour > p:first-child {
  color: rgb(16, 28, 54);
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: 0.2rem;
  text-transform: initial;
}

#optionsSejour p {
  color: rgb(117, 117, 117);
  margin: 0;
  line-height: 1.5;
  font-size: 0.9rem;
  text-transform: lowercase;
}

#optionsSejour p:not(:first-child) {
  text-transform: lowercase;
}

#optionsSejour p span {
  margin-right: 0.8rem;
  font-size: 1.2rem;
}

#etape2 .colonne.droite {
  width: calc(70% - 1rem);
  position: relative;
}

#coordonnees {
  padding: 0.5rem 1rem;
  background: #f7f7f7;
  margin-bottom: 1rem;
}

#coordonnees h4 {
  color: rgb(16, 28, 54);
  font-size: 1.6rem;
  font-weight: 600;
  margin: 0;
  margin-bottom: 1rem;
}

#coordonnees legend {
  font-family: "Muli", Arial, Helvetica, sans-serif;
  color: rgb(16, 28, 54);
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

#coordonnees .flex {
  display: flex;
  flex-wrap: wrap;
  padding-left: 1rem;
}

#coordonnees legend span {
  font-size: 0.8rem;
  color: rgba(16, 28, 54, 0.8);
  font-style: italic;
}

#coordonnees fieldset:nth-child(4) legend {
  margin-bottom: 0;
}

#coordonnees #bloc-mail .infobulle,
#coordonnees .flex .infobulle:not(:last-of-type),
#coordonnees .facturation .form-group:not(:last-of-type) {
  margin-right: 3rem;
}

#coordonnees .infobulle {
  display: inline-flex;
  position: relative;
  align-items: flex-end;
}

#coordonnees .infobulle .cacher {
  display: none !important;
}

#coordonnees .infobulle div > span:not(#error-msg):not(#valid-msg),
#phoneIns-next {
  position: absolute;
  top: calc(100% - 0.9rem);
  left: 50%;
  width: max-content;
  height: min-content;
  background: #ee1818;
  transform: translate(-50%, 50%);
  display: flex;
  z-index: 10;
}

#phoneIns-next {
  top: calc(100% - 2.5rem);
}

#coordonnees .infobulle div > span:not(#error-msg):not(#valid-msg) > span,
#phoneIns-next > span {
  position: relative;
  width: max-content;
  padding: 0.3rem 0.8rem;
  font-size: 0.85rem;
}

#coordonnees
  .infobulle
  div
  > span:not(#error-msg):not(#valid-msg)
  > span:after,
#phoneIns-next > span:after {
  content: " ";
  position: absolute;
  top: 0%;
  right: 50%;
  border-width: 0.5rem;
  border-style: solid;
  border-color: #ee1818;
  transform: translateY(-50%) translateX(-100%) rotate(135deg);
  z-index: -1;
}

#coordonnees fieldset:nth-child(4) small {
  margin-bottom: 0.5rem;
}

#coordonnees fieldset:not(:first-child) {
  margin-top: 0.7rem;
}

#coordonnees fieldset:nth-of-type(1) {
  z-index: 25;
}

#coordonnees fieldset:nth-of-type(3) {
  position: relative;
  z-index: 20;
}

#coordonnees fieldset:nth-of-type(4) {
  position: relative;
  z-index: 15;
}

#coordonnees h4 + fieldset {
  position: relative;
  z-index: 20;
}

#coordonnees #bloc-mail div {
  width: 100%;
}

#coordonnees .iti {
  min-height: 1.8rem;
  margin-bottom: 1.5rem;
  min-width: 13rem;
}

#coordonnees .iti__selected-flag {
  height: calc(100% - 20px);
  margin-top: 20px;
}

#phoneInput {
  height: 100%;
  width: 100%;
  padding-top: 3px;
  padding-bottom: 3px;
  margin-left: 0 !important;
  min-height: 2.25rem !important;
  margin-right: 0rem !important;
  font-size: 1rem;
}

#phoneInput::placeholder {
  color: rgba(16, 28, 54, 0.35);
}
#phoneInput::-webkit-input-placeholder {
  color: rgba(16, 28, 54, 0.35);
}
#phoneInput::-ms-input-placeholder {
  color: rgba(16, 28, 54, 0.35);
}

.champPhone label {
  position: absolute;
  width: max-content;
  top: 0;
  left: 0.5rem;
  color: rgba(16, 28, 54, 0.4);
}
.champPhone > div {
  padding-top: 20px;
  margin-bottom: 1rem;
}

.champPhone .red {
  color: red;
}

#coordonnees .iti__country-list--dropup {
  top: 100%;
  margin-bottom: -1px;
  max-width: 18rem;
  overflow-x: hidden;
}

.champPhone .hide {
  display: none;
}

#error-msg {
  color: red;
  font-size: 0.8rem;
  position: absolute;
  bottom: 1rem;
  right: 1rem;
}

#valid-msg {
  color: green;
  font-size: 0.8rem;
  position: absolute;
  bottom: 1rem;
  right: 1rem;
}

#coordonnees .form-group {
  padding: 20px 0 0;
  margin-right: 0;
}

#coordonnees .form-field:placeholder-shown ~ .form-label {
  top: 27px;
  white-space: nowrap;
}
#coordonnees .form-field::-webkit-input-placeholder-shown ~ .form-label {
  top: 27px;
  white-space: nowrap;
}
#coordonnees .form-field::-ms-input-placeholder-shown ~ .form-label {
  top: 27px;
  white-space: nowrap;
}

#coordonnees input:not(#phoneInput),
#coordonnees .form-label {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

#coordonnees .form-label {
  top: 0;
}

#coordonnees .form-field {
  padding: 3px 0;
}

#coordonnees .form-field:focus {
  padding-bottom: 2px;
  font-weight: 700;
  border-width: 1px;
  border-image: linear-gradient(to right, #c9a96a, #f7c96d);
  border-image-slice: 1;
}
#coordonnees .form-field:focus ~ .form-label {
  top: 0;
}

#coordonnees input {
  background: white;
  border: 0;
  border-bottom: 1px solid rgba(16, 28, 54, 0.4);
  min-height: 1.8rem;
  background: white;
  margin-bottom: 0.5rem;
  margin-right: 2rem;
  box-shadow: none;
}

#coordonnees .textarea.form-group {
  margin-left: 1rem;
  margin-right: initial;
}

#coordonnees .form-group.big {
  width: 25rem;
}

#coordonnees #bloc-mail .form-group {
  min-width: 18rem;
}

input.erreur {
  color: red;
  font-weight: 700;
  border-bottom: 1px solid red !important;
}

#coordonnees small {
  display: block;
  font-size: 80%;
  color: rgb(117, 117, 117);
  margin-left: 0.5rem;
}

#coordonnees textarea {
  background: white;
  padding: 0.5rem 1rem !important;
  min-height: 2rem;
  width: calc(80% - 3rem);
  font-size: 90%;
  border-bottom: 1px solid rgba(76, 76, 76, 0.3);
}

#finaliser {
  display: flex;
  align-items: flex-end;
}

#finaliser #cgv {
  width: calc(70% - 3rem);
  margin-right: 1rem;
  padding: 0.5rem 1rem;
  position: relative;
  margin-bottom: auto;
}

#finaliser #validation-formulaire {
  width: 30%;
  box-sizing: border-box;
}

#finaliser h5 {
  font-family: "Muli", Arial, Helvetica, sans-serif;
  font-size: 1rem;
  margin: 0;
  margin-bottom: 0.5rem;
}

#finaliser #cgv small {
  display: block;
  max-height: 16.7rem;
  padding-right: 0.5rem;
  overflow-y: auto;
  color: rgba(16, 28, 54, 0.73);
  scrollbar-color: rgba(16, 28, 54, 0.85);
  scrollbar-width: thin;
}

#finaliser ::-webkit-scrollbar {
  width: 8px;
}

#finaliser ::-webkit-scrollbar-track {
  background: rgba(117, 117, 117, 0.5);
}

#finaliser ::-webkit-scrollbar-thumb {
  background: rgba(16, 28, 54, 0.85);
}

#finaliser ::-webkit-scrollbar-thumb:hover {
  background: rgb(16, 28, 54);
}

#finaliser #validation-formulaire {
  display: flex;
  justify-content: center;
  padding-bottom: 0.5rem;
  z-index: 20;
}

#finaliser #validation-formulaire > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 0.5rem;
  align-items: center;
  width: min-content;
  max-width: 100%;
}

#finaliser #validation-formulaire > div div {
  margin-bottom: 0.8rem;
}

#finaliser #validation-formulaire small {
  color: rgba(16, 28, 54, 0.73);
  text-align: center;
  display: block;
  font-size: 0.75rem;
}

#finaliser .button {
  background: rgb(81, 150, 78);
  font-family: "Didot-Roman", Garamond, "Times New Roman", serif;
  font-size: 1.55rem;
  text-transform: uppercase;
  padding-left: 1rem;
  padding-right: 1rem;
  width: min-content;
  box-sizing: border-box;
  max-width: 100%;
  font-weight: 500;
}

/* ==================================================================
							          	ETAPE 3
====================================================================*/

#etape3 {
  padding: 0.5rem 1rem;
  background: #f7f7f7;
  margin-bottom: 1rem;
}

#etape3 > div {
  padding-left: 1rem;
}

#etape3 p {
  color: rgb(16, 28, 54);
  margin: 0;
  line-height: 1.5;
  font-size: 0.85rem;
}

#etape3 p ins {
  color: rgb(117, 117, 117);
}

#etape3 h5 {
  font-family: "Muli", Arial, Helvetica, sans-serif;
  font-size: 1rem;
  margin: 0;
  margin-bottom: 0.5rem;
}

#infoComplementaire {
  font-style: italic;
}

#paiement {
  padding: 0.5rem 1rem;
  background: #f7f7f7;
  margin-bottom: 1rem;
}

#paiement h4 {
  color: rgb(16, 28, 54);
  font-size: 1.6rem;
  font-weight: 600;
  margin: 0;
  margin-bottom: 0px;
  margin-bottom: 1rem;
}

/* #paiement fieldset:not(:first-child) {
  margin-top: 0.7rem;
}

#paiement fieldset {
  padding-left: 1rem;
} */

#paiement legend {
  font-family: "Muli", Arial, Helvetica, sans-serif;
  color: rgb(16, 28, 54);
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

/* #paiement legend span {
  color: rgb(117, 117, 117);
  font-size: 0.8rem;
  font-weight: 400;
}

#paiement input {
  min-height: 1.8rem;
  font-size: 90%;
  background: white;
  border: 1px solid rgba(76, 76, 76, 0.3);
  min-height: 1.8rem;
  background: white;
  margin-bottom: 0.5rem;
  margin-right: 2rem;
  padding-left: 1rem;
}

#carte-bleue input {
  min-width: 14rem;
}

#carte-bleue input:last-child {
  min-width: initial;
}

#paiement fieldset:last-child {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

#paiement fieldset:last-child div:last-child {
  width: min-content;
} */

#facturation {
  display: flex;
  flex-direction: column;
  min-width: 65%;
}

#facturation input:first-child {
  max-width: 15rem;
}

/* #paiement .button {
  background: rgb(81, 150, 78);
  font-family: "Didot-Roman", Garamond, "Times New Roman", serif;
  font-size: 1.55rem;
  text-transform: uppercase;
  padding-left: 1.3rem;
  padding-right: 1.3rem;
  width: min-content;
  box-sizing: border-box;
  max-width: 100%;
  margin-bottom: 1rem;
  margin-right: 1rem;
  font-weight: 500;
} */

#confirmation {
  padding: 0.5rem 3rem;
  margin-bottom: 1rem;
}

#confirmation p {
  font-size: 2.5rem;
  text-align: center;
  color: rgb(16, 28, 54);
  font-weight: 600;
}

.colonne.droite .absolute.flex {
  display: flex;
  flex-direction: column;
}

/* #paiement fieldset:first-of-type {
  width: max-content;
  box-sizing: border-box;
  max-width: 100%;
} */

/* #paiement .flex {
  display: flex;
  align-items: baseline;
  padding-left: 1rem;
}

#paiement .flex input {
  margin-right: 0;
}

#paiement .flex > div:first-of-type {
  margin-right: 2rem;
}

#paiement .flex > div img {
  max-width: 130px;
} */

#moyen-paiement,
#carte-bleue {
  padding: 0.5rem 1rem;
  border: 1px solid rgba(162, 158, 120, 0.7);
}

#carte-bleue {
  margin-top: 1rem;
}

/* #carte-bleue div:first-of-type {
  padding-left: 1rem;
} */

#div-bouton-paiement {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-left: auto;
  width: 100%;
  flex-wrap: wrap;
  margin-right: 2rem;
}

#div-bouton-paiement .loader {
  position: relative;
}

#div-bouton-paiement > .flex {
  margin-bottom: 2rem;
}

#div-bouton-paiement img {
  max-width: 8.5rem;
}

#div-bouton-paiement img:first-of-type {
  margin-right: 1rem;
}

#div-bouton-paiement .loader {
  margin-left: 2rem;
  margin-right: 5rem;
}

/* ==================================================================
							    	PAGE MAISON
====================================================================*/

#pageMaison #presentation .flex-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  max-width: 100%;
}

#pageMaison section {
  padding-left: 4rem !important;
  padding-right: 4rem !important;
  padding-bottom: 6vw;
  overflow: hidden;
}

#pageMaison h2 {
  margin-bottom: 2.5rem;
}

#pageMaison #presentation figure {
  max-width: 45%;
  float: left;
  margin-right: 3rem;
  margin-bottom: 2.5rem;
  min-width: 400px;
}

#bloc-texte {
  width: 100%;
}

#bloc-texte p:first-child {
  margin-top: 0;
}

#bloc-texte > div {
  margin-top: 2.5rem;
}

#bloc-texte > div:first-of-type {
  display: flex;
  justify-content: center;
}

@media screen and (max-width: 1372px) {
  #bloc-texte > div {
    max-width: min-content;
  }
}

@media screen and (max-width: 1120px) {
  #bloc-texte > div {
    float: right;
    margin-left: 2rem;
    margin-bottom: 2rem;
    margin-top: 2rem;
  }

  #pageMaison section {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
}

@media screen and (max-width: 700px) {
  #pageMaison #presentation figure {
    margin-right: 1.5rem;
    margin-bottom: 1.5rem;
  }

  #bloc-texte > div {
    margin-left: 1.5rem;
    margin-bottom: 1.5rem;
    margin-top: 1.5rem;
  }
}

@media screen and (max-width: 630px) {
  #bloc-texte {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #pageMaison #presentation figure {
    min-width: initial;
    max-width: 80%;
  }

  #bloc-texte > div {
    margin-left: 0;
  }

  #pageMaison #bloc-texte > p:last-child {
    margin-top: 0 !important;
  }
}

@media screen and (max-width: 500px) {
  #pageMaison #presentation figure {
    min-width: initial;
    max-width: 100%;
    margin: auto;
    margin-bottom: 1.5rem;
  }
  #bloc-texte > div {
    max-width: initial;
  }

  #bloc-texte address {
    max-width: calc(100vw - 2rem);
  }

  #bloc-texte > div p {
    padding: 0 !important;
    font-size: 0.7rem !important;
    white-space: normal !important;
  }

  #bloc-texte address span span {
    margin-right: 0.2rem;
    font-size: 0.8rem;
  }

  #bloc-texte address span a {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 57vw;
  }
}

#bloc-texte address p {
  font-size: 0.83rem;
  font-weight: bold;
  font-family: "Muli", Arial, Helvetica, sans-serif;
  display: flex;
  align-items: center;
  text-transform: uppercase;
  line-height: 1.5rem;
  border-bottom: 1px solid rgb(216, 216, 216);
  white-space: nowrap;
  padding: 0 1.5rem;
  font-weight: 700;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
}

#bloc-texte address p:last-of-type {
  margin-bottom: 0;
}

#bloc-texte address p > span {
  transform: translateY(0);
  transition: transform ease-out 0.65s;
  display: flex;
  align-items: center;
}

#bloc-texte address.masquer p > span {
  transform: translateY(100%);
}

#bloc-texte address p:first-of-type > span {
  transition-delay: 0.2s;
}

#bloc-texte address p:nth-of-type(2) > span {
  transition-delay: 0.4s;
}

#bloc-texte address p:nth-of-type(3) > span {
  transition-delay: 0.6s;
}

#bloc-texte address span span {
  color: rgb(16, 28, 54);
  margin-right: 0.4rem;
  font-size: 1rem;
}

#bloc-texte address a {
  color: rgb(58, 170, 53);
  text-decoration: none;
  margin-left: 1.3rem;
}

#bloc-texte address a:hover {
  color: rgb(117, 117, 117);
}

#pageMaison #bloc-texte > p:last-child {
  margin-top: 2.5rem;
}

#pageMaison .carroussel > * {
  opacity: 0;
  transition:
    visibility ease-out 0s 0.8s,
    transform ease-out 0.8s,
    opacity ease-out 0.7s;
}

@media screen and (min-width: 1000px) {
  #pageMaison .carroussel li:nth-child(2n) figure,
  #pageRestauration .carroussel li:nth-child(2n) figure {
    order: 2 !important;
  }

  #pageMaison .carroussel li:nth-child(2n) .description_chambre,
  #pageRestauration .carroussel li:nth-child(2n) .description_chambre {
    order: 1 !important;
    margin-right: -4rem !important;
    margin-left: 0 !important;
    padding-right: 5rem !important;
    padding-left: 3rem !important;
  }
}

#pageMaison .douce_disparition {
  transition: ease-out 0.8s;
  transition-property: visibility, transform;
}

#pageMaison .relative li > div {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}

#pageMaison .carroussel li {
  padding-left: 2rem;
  padding-right: 2rem;
  list-style-type: none;
}

#pageMaison .description_chambre {
  height: min-content;
  width: calc(40% + 4rem);
  position: relative;
}

#pageMaison .zero .description_chambre {
  border: none;
  box-shadow: none;
}

#pageMaison figure {
  width: 60%;
}

#pageMaison .btn-2 {
  padding: 0.5vw 1.5vw;
  margin-top: 1.14vw;
}
#pageMaison .btn-2 {
  color: rgb(81, 150, 78);
  text-transform: uppercase;
  background: transparent;
  border: none;
  padding: 0.5rem 1.5rem;
  margin-top: 1.14rem;
  cursor: pointer;
  font-size: 95%;
}

#pageMaison .arrow.prev {
  left: 0;
  top: 50%;
  display: block;
}

#pageMaison .arrow.next {
  right: 0;
  top: 50%;
}

#pageMaison .none {
  display: none;
}

#pageMaison .titre-carroussel p,
#pageMaison #bloc-texte figure,
#pageMaison .zero img {
  visibility: visible;
  -webkit-transform: translateY(0) scale(1);
  opacity: 1;
  transform: translateY(0) scale(1);
  -webkit-transition:
    -webkit-transform 0.65s cubic-bezier(0.6, 0.2, 0.1, 1),
    opacity 0.65s cubic-bezier(0.6, 0.2, 0.1, 1);
  transition:
    transform 0.65s cubic-bezier(0.6, 0.2, 0.1, 1),
    opacity 0.65s cubic-bezier(0.6, 0.2, 0.1, 1);
}

#pageMaison .zero figure {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  -webkit-transition: box-shadow 0.2s 1.05s;
  transition: box-shadow 0.2s 1.05s;
}

#pageMaison .titre-carroussel p:first-of-type {
  transition-delay: 0.1s;
}

#pageMaison .titre-carroussel p:nth-of-type(2) {
  transition-delay: 0.25s;
}

#pageMaison .titre-carroussel p:nth-of-type(3) {
  transition-delay: 0.4s;
}

#pageMaison .titre-carroussel p:nth-of-type(4) {
  transition-delay: 0.55s;
}

#pageMaison #bloc-texte figure,
#pageMaison .zero img {
  transition-delay: 0.4s;
}

#pageMaison .masquer .titre-carroussel p {
  visibility: hidden;
  -webkit-transform: translateY(-5%) scale(0.8);
  opacity: 0;
  transform: translateY(-5%) scale(0.8);
}

#pageMaison #bloc-texte.masquer figure {
  visibility: hidden;
  -webkit-transform: translateY(15%) scale(0.8);
  opacity: 0;
  transform: translateY(15%) scale(0.8);
}

#pageMaison .masquer .zero figure {
  box-shadow: none;
}

/* ==================================================================
                        PAGE LES ENVIRONS
====================================================================*/

.titre-carroussel p {
  font-size: 1rem;
  font-weight: 500;
  color: rgb(117, 117, 117);
  text-transform: uppercase;
  cursor: pointer;
  margin: 0;
  text-align: center;
  padding: 0;
  margin: 0 1rem;
  height: min-content;
}

#pageEnvirons .carroussel li {
  padding-left: 1rem;
  padding-right: 1rem;
  list-style-type: none;
}

#pageEnvirons .relative ul {
  padding-left: 0;
}

#pageEnvirons .relative li {
  list-style-type: none;
}

#pageEnvirons section {
  padding-left: 4rem !important;
  padding-right: 4rem !important;
  padding-bottom: 6vw;
  overflow: hidden;
  padding-top: 0;
}

#environs-carroussel .article {
  padding-top: 5rem;
}

#environs-carroussel h2 {
  margin-bottom: 2.5rem;
}

#pageEnvirons .carroussel > * {
  opacity: 0;
  transition:
    visibility ease-out 0s 0.8s,
    transform ease-out 0.8s,
    opacity ease-out 0.7s;
}

#pageEnvirons .douce_disparition {
  transition: ease-out 0.8s;
  transition-property: visibility, transform;
}

#pageEnvirons .relative li > div {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}

#pageEnvirons .carroussel > :first-child {
  transform: translateX(0);
  visibility: visible;
}

#pageEnvirons .defilement_img {
  width: 60%;
}

#pageEnvirons .article:nth-child(even) .defilement_img {
  order: 2;
  z-index: 5;
}

#pageEnvirons .article:nth-child(even) .description_chambre {
  order: 1;
  z-index: 10;
  padding-left: 3rem;
  padding-right: 6rem;
  margin-left: 0;
  margin-right: -4rem;
}

#pageEnvirons .article:nth-child(even) .info_chambre {
  right: -3rem;
  left: initial;
}

#pageEnvirons .description_chambre {
  padding: 2rem 3rem;
  padding-bottom: 1rem;
  padding-left: 6rem;
  width: calc(40% + 4rem);
  position: relative;
}

#pageEnvirons .description_chambre h3 {
  text-align: center;
  white-space: nowrap;
}

#pageEnvirons .description_chambre h3 span {
  color: #fec600;
  font-size: 1rem;
  vertical-align: top;
}

#pageEnvirons .description_chambre h3 span:first-of-type {
  white-space: nowrap;
}

#pageEnvirons .description_chambre h3 span span:first-child {
  margin-left: 0.5rem;
}

.info-spot {
  margin-top: 1rem;
}

.info-spot p {
  font-size: 0.73rem;
  font-weight: bold;
  font-family: "Muli", Arial, Helvetica, sans-serif;
  display: flex;
  align-items: center;
  text-transform: uppercase;
  line-height: 1.5rem;
  border-bottom: 1px solid rgb(216, 216, 216);
  white-space: nowrap;
  padding: 0 0.5rem;
  font-weight: 600;
}

.info-spot p span {
  color: rgb(16, 28, 54);
  margin-right: 0.4rem;
  font-size: 1rem;
}

.info-spot p .text {
  color: rgb(117, 117, 117);
  font-size: 0.73rem;
}

.info-spot p a[href] {
  color: rgb(58, 170, 53);
  text-transform: uppercase;
  text-decoration: none;
}

.info-spot p a[href]:hover {
  color: rgb(117, 117, 117);
}

.info-spot .align {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.info-spot .align span {
  display: flex;
  align-items: center;
}

#pageEnvirons .arrow.prev {
  left: -1rem;
  top: 50%;
  display: block;
}

#pageEnvirons .arrow.next {
  right: -1rem;
  top: 50%;
}

#pageEnvirons .info_chambre {
  height: initial;
  width: initial;
  height: min-content;
  width: max-content;
  padding: 0.5rem;
  background: white;
  top: initial;
  left: -2rem;
  bottom: 1.5rem;
  z-index: 20;
  padding: 0.5rem 1.3rem;
}

#pageEnvirons .info_chambre div {
  height: initial;
  width: initial;
}

#environs-carroussel .article:first-of-type .info_chambre {
  left: -6rem;
}

#pageEnvirons .info_chambre p:last-child {
  margin-bottom: 0;
}

#pageEnvirons .info_chambre p {
  margin-right: 0;
  padding: 0;
}

.info_chambre .text {
  color: rgba(16, 28, 54, 0.73);
  font-size: 0.9rem;
  margin-right: 0;
}

.info_chambre .text span {
  color: rgb(117, 117, 117);
  font-size: 0.8rem;
  margin: 0;
}

#paris .titre-carroussel {
  display: none;
}

#transport .cadre {
  border: 1px solid rgb(162, 158, 120);
  padding: 1rem 1.5rem;
  box-shadow: 3px 6px 20px rgba(0, 0, 0, 0.2);
  background: white;
}

#transport > div {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#transport > div div {
  box-sizing: border-box;
}

#transport h2 + div {
  width: 100%;
  display: flex;
  justify-content: center;
}

#transport h2 + div > div {
  transform: translateX(10rem);
  z-index: 10;
}

#transport div:nth-child(3) > div:first-child {
  transform: translateY(-2rem);
  width: 56%;
}

#transport div:nth-child(3) > div:last-child {
  transform: translateY(1.5rem) translateX(-1rem);
  width: 38%;
}

#transport div:nth-child(4) > div:first-child {
  transform: translateY(-1rem);
  width: 68%;
}

#transport div:nth-child(4) > div:last-child {
  transform: translateY(1rem) translateX(-1rem);
  width: 32%;
}

#transport h3 {
  color: rgb(16, 28, 54);
  font-size: 1.65rem;
  margin: 0;
  font-weight: 100;
  text-transform: uppercase;
  text-align: center;
}

#transport img {
  width: 100%;
}

#transport p {
  color: rgba(16, 28, 54, 0.73);
}

#transport p span {
  color: rgb(16, 28, 54);
  font-size: 1.2rem;
  margin-right: 0.8rem;
  vertical-align: bottom;
}

#transport a {
  color: #4c84ff;
  text-decoration: underline;
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

#transport a:hover {
  color: rgba(16, 28, 54, 0.73);
}

#transport img {
  display: block;
}

#transport .ligne {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#transport > div:last-child > div:first-child a:first-child {
  margin-right: 1rem;
}

#transport > div:last-child > div:last-child a {
  margin-left: 0.6rem;
}

/* ==================================================================
							    	PAGE RESTAURATION
====================================================================*/

#pageRestauration {
  background: white;
}

#pageRestauration .carroussel > * {
  background: white;
}

#pageRestauration section {
  padding-top: 2.5rem;
}

#pageRestauration .section-carroussel {
  padding-left: 4rem !important;
  padding-right: 4rem !important;
  padding-bottom: 6vw;
  overflow: hidden;
}

@media screen and (max-width: 1120px) {
  #pageRestauration section {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
}

#pageRestauration h2 {
  margin-bottom: 2.5rem;
}

#pageRestauration #carte p {
  color: rgb(117, 117, 117);
  margin: 0;
  margin-bottom: 0.5rem;
}

#pageRestauration #carte .tableau {
  width: 100%;
  display: grid;
  column-gap: 2rem;
  grid-template-columns: auto fit-content(20%) fit-content(20%);
  grid-template-rows: repeat(6, auto);
  align-items: flex-start;
}

#pageRestauration #carte img {
  width: 90%;
  grid-column: 1/2;
  grid-row: 1 /5;
  margin: auto;
}

#pageRestauration .tableau p:first-of-type {
  grid-column: 2/4;
  grid-row: 1/2;
}

#pageRestauration .tableau table:first-of-type {
  grid-column: 2/3;
  grid-row: 2/3;
}

#pageRestauration .tableau table:nth-last-of-type(2) {
  grid-column: 3/4;
  grid-row: 2/3;
}

#pageRestauration .tableau p:last-of-type {
  grid-column: 2/4;
  grid-row: 3/4;
}

#pageRestauration .tableau table:last-of-type {
  grid-column: 2/3;
  grid-row: 4/5;
}

@media screen and (max-width: 1290px) {
  #pageRestauration #carte .tableau {
    column-gap: 1.5rem;
    grid-template-columns: fit-content(20%) auto fit-content(20%) fit-content(
        20%
      );
    grid-template-rows: repeat(5, auto);
  }

  #pageRestauration #carte img {
    grid-column: 1/3;
    grid-row: 1/4;
  }

  #pageRestauration .tableau p:first-of-type {
    grid-column: 3/5;
  }

  #pageRestauration .tableau table:first-of-type {
    grid-column: 3/4;
  }

  #pageRestauration .tableau table:nth-last-of-type(2) {
    grid-column: 4/5;
  }

  #pageRestauration .tableau p:last-of-type {
    grid-column: 1/3;
    grid-row: 4/5;
  }

  #pageRestauration .tableau table:last-of-type {
    grid-column: 1/2;
    grid-row: 5/6;
    margin-left: 1rem;
  }
}

@media screen and (max-width: 1100px) {
  #pageRestauration #carte .tableau {
    column-gap: 1rem;
  }

  #pageRestauration #carte img {
    grid-column: 1/3;
    width: 90%;
    margin-bottom: 2rem;
  }

  #pageRestauration .tableau p:first-of-type {
    grid-column: 1/4;
    grid-row: 4/5;
  }

  #pageRestauration .tableau table:first-of-type {
    grid-column: 1/2;
    grid-row: 5/6;
  }

  #pageRestauration .tableau table:nth-last-of-type(2) {
    grid-column: 2/4;
    grid-row: 5/6;
    margin-left: auto;
  }

  #pageRestauration .tableau p:last-of-type {
    grid-column: 3/5;
    grid-row: 1/2;
  }

  #pageRestauration .tableau table:last-of-type {
    grid-column: 3/5;
    grid-row: 2/3;
    margin-right: auto;
    margin-left: 0;
  }

  #pageRestauration #carte table {
    margin-bottom: 0rem !important;
  }
}

@media screen and (max-width: 860px) {
  #pageRestauration #carte .tableau {
    column-gap: 1rem;
    grid-template-columns: repeat(3, auto);
  }

  #pageRestauration #carte img {
    grid-column: 1/3;
    grid-row: 1/2;
    width: 90%;
    margin-bottom: 2rem;
  }

  #pageRestauration .tableau p:first-of-type {
    grid-column: 1/4;
    grid-row: 2/3;
  }

  #pageRestauration .tableau table:first-of-type {
    grid-column: 1/2;
    grid-row: 3/4;
    margin-right: auto;
  }

  #pageRestauration .tableau table:nth-last-of-type(2) {
    grid-column: 3/4;
    grid-row: 3/4;
  }

  #pageRestauration .tableau p:last-of-type {
    grid-column: 1/4;
    grid-row: 4/5;
  }

  #pageRestauration .tableau table:last-of-type {
    grid-column: 1/2;
    grid-row: 5/6;
    margin: 0;
    margin-right: auto;
  }

  #pageRestauration #carte table:not(:last-of-type) {
    margin-bottom: 2.5rem !important;
  }
}

@media screen and (max-width: 740px) {
  #pageRestauration #carte img {
    grid-column: 1/4;
  }
}

@media screen and (max-width: 700px) {
  #pageRestauration section {
    padding-top: 6rem;
  }
}

@media screen and (max-width: 670px) {
  #pageRestauration #carte .tableau {
    column-gap: 0;
    display: flex;
    flex-direction: column;
  }

  #pageRestauration #carte table {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0 !important;
  }

  #pageRestauration #carte img {
    order: 3;
  }

  #pageRestauration .tableau p:last-of-type {
    order: 4;
  }

  #pageRestauration #carte table:last-child {
    order: 5;
  }

  #pageRestauration #carte table:first-of-type {
    margin-bottom: 3rem !important;
  }

  #pageRestauration #carte table:nth-of-type(2) {
    margin-bottom: 4rem !important;
  }

  #pageRestauration #carte th {
    max-width: 65vw;
  }

  #pageRestauration #carte p {
    margin-bottom: 2.5rem;
  }
}

#pageRestauration #carte caption {
  color: rgb(16, 28, 54);
  font-weight: 500;
  font-size: 1.5rem;
  font-family: "Didot-Roman", Garamond, "Times New Roman", serif;
}

#pageRestauration #carte table {
  margin-top: 0.5rem;
  margin-bottom: 2.5rem;
  border-collapse: collapse;
  max-width: 100%;
}

#pageRestauration #carte table:last-child {
  margin-bottom: 0;
}

#pageRestauration #carte td,
#pageRestauration #carte th {
  color: rgba(16, 28, 54, 0.73);
  padding: 1rem 1rem;
  padding-bottom: 0.3rem;
  white-space: nowrap;
  font-weight: 400;
  text-align: left;
  border-bottom: 1px solid rgb(216, 216, 216);
  font-size: 0.75rem;
  max-width: 70vw;
  overflow: hidden;
  text-overflow: ellipsis;
}

#pageRestauration #carte th {
  padding-left: 0;
}

.section-carroussel {
  margin-top: 4rem;
}

@media screen and (max-width: 1200px) {
  .section-carroussel {
    margin-top: 2rem;
  }
}

#pageRestauration .carroussel > * {
  opacity: 0;
  transition:
    visibility ease-out 0s 0.8s,
    transform ease-out 0.8s,
    opacity ease-out 0.7s;
}

#pageRestauration .douce_disparition {
  transition: ease-out 0.8s;
  transition-property: visibility, transform;
}

#pageRestauration .relative li > div {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}

#pageRestauration .carroussel li {
  padding-left: 2rem;
  padding-right: 2rem;
  list-style-type: none;
}

#pageRestauration .description_chambre {
  height: min-content;
  width: calc(40% + 4rem);
}

#pageRestauration figure {
  width: 60%;
}

#pageRestauration .btn-2 {
  padding: 0.5vw 1.5vw;
  margin-top: 1.14vw;
}
#pageRestauration .btn-2 {
  color: rgb(81, 150, 78);
  text-transform: uppercase;
  background: transparent;
  border: none;
  padding: 0.5rem 1.5rem;
  margin-top: 1.14rem;
  cursor: pointer;
  font-size: 95%;
}

#pageRestauration .arrow.prev {
  left: 0;
  top: 50%;
  display: block;
}

#pageRestauration .arrow.next {
  right: 0;
  top: 50%;
}

#pageRestauration .zero .description_chambre {
  border: none;
  box-shadow: none;
  position: relative;
}

#pageRestauration .titre-carroussel p,
#pageRestauration .tableau img,
#pageRestauration .zero img {
  visibility: visible;
  -webkit-transform: translateY(0) scale(1);
  opacity: 1;
  transform: translateY(0) scale(1);
  -webkit-transition:
    -webkit-transform 0.65s cubic-bezier(0.6, 0.2, 0.1, 1),
    opacity 0.65s cubic-bezier(0.6, 0.2, 0.1, 1);
  transition:
    transform 0.65s cubic-bezier(0.6, 0.2, 0.1, 1),
    opacity 0.65s cubic-bezier(0.6, 0.2, 0.1, 1);
}

#pageRestauration .zero figure {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  -webkit-transition: box-shadow 0.2s 1.05s;
  transition: box-shadow 0.2s 1.05s;
}

#pageRestauration .titre-carroussel p:first-of-type {
  transition-delay: 0.1s;
}

#pageRestauration .titre-carroussel p:nth-of-type(2) {
  transition-delay: 0.25s;
}

#pageRestauration .titre-carroussel p:nth-of-type(3) {
  transition-delay: 0.4s;
}

#pageRestauration .titre-carroussel p:nth-of-type(4) {
  transition-delay: 0.55s;
}

#pageRestauration .tableau img,
#pageRestauration .zero img {
  transition-delay: 0.4s;
}

#pageRestauration .masquer .titre-carroussel p {
  visibility: hidden;
  -webkit-transform: translateY(-5%) scale(0.8);
  opacity: 0;
  transform: translateY(-5%) scale(0.8);
}

#pageRestauration .tableau.masquer img {
  visibility: hidden;
  -webkit-transform: translateY(15%) scale(0.8);
  opacity: 0;
  transform: translateY(15%) scale(0.8);
}

#pageRestauration .masquer .zero figure {
  box-shadow: none;
}

/* ==================================================================
							          	PAGE MENTIONS
====================================================================*/

#pageMentions section {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 5rem;
  justify-content: space-around;
}

@media screen and (min-width: 1120px) {
  #pageMentions .article:nth-of-type(2) {
    max-width: 48%;
  }
}

#pageMentions .article {
  margin-top: 5rem;
  width: max-content;
  height: min-content;
  max-width: 100%;
  padding: 2rem;
  box-sizing: border-box;
  border: 1px solid rgb(162, 158, 120);
  box-shadow: 3px 6px 20px rgba(0, 0, 0, 0.2);
}

@media screen and (max-width: 500px) {
  #pageMentions .article {
    padding: 2rem 1rem;
  }
  #pageMentions .article h2 {
    font-size: 2.3rem;
  }
}

#pageMentions .article h2 {
  text-align: center;
  font-size: 3rem;
}

#pageMentions .article h3 {
  font-size: 1.5rem;
  font-weight: 500;
  font-family: "Didot-Roman", Garamond, "Times New Roman", serif;
  margin-bottom: 0;
}

#pageMentions .article p,
#pageMentions .article li {
  font-size: 0.9rem;
  font-family: "Muli", Arial, Helvetica, sans-serif;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
}

#pageMentions .article a {
  cursor: pointer;
  text-decoration: underline;
}

/* ==================================================================
									Footer
====================================================================*/

footer {
  background: rgb(76, 76, 76);
  color: white;
  position: relative;
  padding: 2rem;
  display: grid;
  align-items: center;
  justify-content: center;
  grid-template-columns: 1fr auto;
}

.footer-mobile {
  display: none;
}

footer #checkdate {
  top: 1px;
  bottom: initial;
  z-index: 3;
}

footer p {
  width: 100%;
  margin: 0;
  font-size: 0.9rem;
}

footer nav {
  margin-left: auto;
  margin-top: auto;
}

footer ul {
  margin-bottom: 0;
}

footer nav a {
  color: rgb(81, 150, 78);
  text-decoration: none;
  display: inline-block;
}

footer nav li {
  cursor: pointer;
  text-align: right;
  list-style-type: none;
  line-height: 1.3;
  font-size: 120%;
}

/* ====================================================================================================
												Modale Paiement
=====================================================================================================*/

.kr-label label {
  white-space: nowrap !important;
  line-height: 1.8 !important;
}

.kr-pan,
.kr-expiry,
.kr-security-code,
.kr-payment-button {
  min-width: 20rem !important;
}

.systempay {
  max-width: 10rem !important;
  margin-left: 5rem !important;
}

@media screen and (max-width: 401px) {
  .kr-label label {
    white-space: normal !important;
    line-height: 1 !important;
    font-size: 0.8rem !important;
  }

  .kr-pan,
  .kr-expiry,
  .kr-security-code,
  .kr-payment-button {
    min-width: 17rem !important;
    height: 2.5rem !important;
  }
  .systempay {
    margin-left: 3.5rem !important;
  }
}

@media screen and (max-width: 331px) {
  #paiement {
    padding-left: 0.5rem !important;
  }
}

#validation-formulaire {
  position: relative;
}

#validation-formulaire #spinner {
  position: absolute;
  right: 0;
  width: 5rem;
  transform: translateY(-25%);
}

#validation-formulaire #spinner * {
  margin: 0;
}

@media screen and (max-width: 1351px) {
  #validation-formulaire #spinner {
    right: 4rem;
    transform: translateY(-45%);
  }
}

@media screen and (max-width: 901px) and (min-width: 600px) {
  #validation-formulaire #spinner {
    right: 4vw;
  }
}

@media screen and (max-width: 601px) {
  #validation-formulaire #spinner {
    transform: translateY(-22%);
  }
}

/* ====================================================================================================
                                          Validation reservation
=====================================================================================================*/

#validationChambres section {
  padding-top: 2.5rem;
}

@media screen and (max-width: 701px) {
  #validationChambres section {
    padding-top: 7rem;
  }
}

/* ====================================================================================================
												Responsive
=====================================================================================================*/

@media screen and (min-width: 2200px) {
  .info_chambre {
    top: calc((2000px) * 0.54 * 0.5625 - 1.6vw);
  }

  #chambres.reservation .prix {
    top: calc((2000px) * 0.54 * 0.5625 - 4.2vw - 2.6vw);
  }
}

/* ==================================================================
							Full HD et 4k
====================================================================*/

@media screen and (min-width: 1700px) {
  .minuscule {
    font-size: 1.05vw;
  }

  /*----------------------------
    		Header 
----------------------------*/

  #banniere h1 {
    font-size: 4vw;
  }

  header {
    grid-template-rows: repeat(2, 3.8vw);
  }

  header.fill:not(.modal) {
    transform: translateY(-3.8vw);
  }

  header li,
  header a,
  header p,
  header span,
  header time {
    font-size: 0.95vw;
  }

  #burger,
  #burger:after,
  #burger:before {
    width: 2vw;
    height: 0.15vw;
  }

  #modal-menu {
    height: calc(100% - 7.6vw);
    top: 7.55vw;
  }

  #modal-menu li {
    font-size: 2vw;
    height: 3vw;
  }

  #modal-menu p {
    font-size: 1.3vw;
    height: 3vw;
    line-height: 2;
  }

  #closeModal {
    height: 2.5vw;
    width: 2.5vw;
    right: 5%;
  }

  #closeModal span:before,
  #closeModal span:after {
    height: 2px;
  }

  #modal-contact {
    height: calc(100% - 7.6vw);
    top: 7.55vw;
  }

  #modal-contact:after,
  #modal-contact:before {
    width: 51%;
  }

  #modal-contact address,
  #modal-contact form {
    max-width: initial;
  }

  #modal-contact form {
    width: 40%;
  }

  #modal-contact address p span:first-child:not(.surlignement) {
    margin-right: 0.8vw;
    font-size: 1.5vw;
  }

  #modal-contact h4,
  #modal-contact legend {
    font-size: 2.6vw;
  }

  #modal-contact p {
    font-size: 1.3vw;
  }

  #modal-contact address p a {
    margin-left: 0.5vw;
  }

  #modal-contact .button {
    font-size: 1.2vw;
  }

  /* ---- Form-Input --- */

  .form-group {
    padding: 0.95vw 0 0;
    margin-top: 0.3vw;
    margin-right: 1.5vw;
    margin-bottom: 0.5vw;
  }

  #modal-contact fieldset #captcha-svg svg {
    margin-bottom: 1.5vw;
  }

  .form-group.petit,
  .infobulle.petit {
    width: 13vw;
  }

  .form-group.moyen {
    width: 15vw;
  }

  .form-group input {
    padding-left: 0.5vw;
  }

  .form-field {
    font-size: 1vw;
    padding: 0.45vw 0;
    padding-bottom: 0.12vw;
  }

  .form-field:placeholder-shown ~ .form-label {
    font-size: 1vw;
  }
  .form-field::-webkit-input-placeholder-shown ~ .form-label {
    font-size: 1vw;
  }
  .form-field::-ms-input-placeholder-shown ~ .form-label {
    font-size: 1vw;
  }

  .form-label {
    font-size: 1vw;
  }

  .form-field:focus ~ .form-label {
    font-size: 1vw;
  }

  #modal-contact fieldset #captcha-svg .form-group {
    width: 13vw;
  }

  #modal-contact fieldset #captcha-svg .infobulle {
    margin-right: 2vw;
  }

  #modal-contact .infobulle .form-group > span > span {
    padding: 0.3vw 0.8vw;
    font-size: 0.8vw;
  }

  .button {
    font-size: 1.1vw;
    padding: 0.8vw 1.3vw;
  }

  .six .button span:first-child {
    font-size: 90%;
  }

  .data_range input {
    font-size: 0.9vw;
  }

  /*----------------------------
    		Header
----------------------------*/
  #modal-date .modal-background .modal {
    width: 700px;
    height: 400px;
  }

  .modal-svg.pc {
    display: none !important;
  }
  .modal-svg.hd {
    display: block;
  }

  .data_range span:before {
    color: rgb(116, 116, 116);
    font-size: 180%;
  }

  .six .button span:first-child {
    font-size: 1.8rem;
    font-weight: 800;
  }

  .six .button {
    padding: 0.6rem 1.8rem;
    background-color: rgb(81, 150, 78);
    min-width: 40%;
  }

  .six .button .icon-checked,
  .six .button .icon-checked > span {
    font-size: 1rem;
    white-space: nowrap;
  }

  #modal-date.six .modal-background .modal h5 {
    font-size: 290%;
    margin-top: 3.5rem;
  }

  .data_range input {
    font-size: 1.4rem;
    color: rgb(117, 117, 117);
  }

  #modal-date.six .modal-background .modal h5 + form {
    margin-top: 2rem;
  }

  #modal-date .modal-background .modal .modal-svg rect {
    stroke-dasharray: 2202;
    stroke-dashoffset: 2202;
  }

  @keyframes sketchIn {
    0% {
      stroke-dashoffset: 2202;
    }
    100% {
      stroke-dashoffset: 0;
    }
  }
  @keyframes sketchOut {
    0% {
      stroke-dashoffset: 0;
    }
    100% {
      stroke-dashoffset: 2202;
    }
  }

  /* ==================================================================
                              MODAL ERREUR
====================================================================*/

  header #logo img {
    max-height: 6vw;
  }

  header.fill.modal #logo img:nth-child(2) {
    max-height: 6vw;
  }

  #fond-modal-erreur .modal-erreur {
    max-width: 90vw;
    padding: 2vw;
    min-width: 25vw;
  }

  #fond-modal-erreur .modal-erreur p {
    font-size: 1.8vw;
    margin-bottom: 1vw;
  }

  #fond-modal-erreur .modal-erreur .flex {
    margin-top: 2vw;
  }

  #fond-modal-erreur .modal-erreur .button {
    font-size: 1.5vw;
  }

  #fond-modal-erreur .modal-erreur span {
    font-size: 1vw;
  }

  /*InfoMessage*/
  .info {
    right: 0.6vw;
    padding: 1vw;
  }

  .info p {
    font-size: 1.1vw;
  }

  .info span:not(.icone) {
    font-size: 0.9vw;
    margin-bottom: 0.5vw;
  }

  .info p .icone {
    margin-right: 0.5vw;
    font-size: 1.5vw;
  }
  /*----------------------------
    		Présentation
----------------------------*/

  #bloc_info td {
    padding: 0.72vw;
    padding-left: 1.05vw;
  }

  #bloc_info td a,
  #bloc_info td {
    font-size: 0.85vw;
  }

  #bloc_info td span,
  #bloc_info td a,
  #bloc_info td {
    line-height: 1.55vw;
  }

  #bloc_info td ins img {
    max-height: 1.6vw;
  }

  #bloc_info td span:before {
    margin-right: 0.5vw;
    font-size: 1.3vw;
  }

  /*----------------------------
    		Info chambres 
----------------------------*/
  #pageHome .description_chambre p,
  #bloc_presentation p,
  #commentaire div p,
  #localisation div p,
  #pageMaison p,
  #pageRestauration p,
  #pageEnvirons p {
    font-size: 1.2vw;
  }

  #pageHome .description_chambre > h3 + p {
    font-size: 1.25vw;
  }

  #pageChambres h2,
  #pageHome main h2,
  #pageMaison h2,
  #pageRestauration h2,
  #pageEnvirons h2 {
    font-size: 4.2vw;
    margin-bottom: 2.5vw !important;
  }

  #parallaxe_text > h3 {
    font-size: 3.2vw;
  }

  #indicateur_avancement p {
    font-size: 1.5vw;
  }

  #presentation .relative {
    width: 32%;
    margin-right: 7vw;
  }

  #bloc_info {
    margin-bottom: 2vw;
    max-width: 45vw;
    margin-bottom: 2vw;
  }

  #parallaxe_text {
    transform: translate(1vw, -2vw);
  }

  /*----------------------------
    		Chambres
----------------------------*/

  #chambres {
    padding: 6vw 0;
  }

  #chambres .relative {
    padding-top: 0;
  }

  #bloc_info {
    margin-bottom: 2vw;
  }

  #chambres .button {
    font-size: 1.3vw;
  }

  .reservation .description_chambre p {
    font-size: 1.05vw;
  }

  .arrow {
    height: 4.5vw;
    width: 4.5vw;
    top: calc(100% - 9vw);
  }

  .arrow.next {
    right: -4.2vw;
  }

  .prix p:first-child {
    font-size: 0.93vw;
  }

  .prix p:nth-child(2) {
    font-size: 2.6vw;
  }

  .prix p:last-child {
    font-size: 0.75vw;
  }

  .info_chambre p {
    font-size: 0.95vw;
  }

  .info_chambre p span {
    font-size: 1.4vw;
  }

  #chambres .btn-2,
  #localisation .btn-2,
  #pageMaison .btn-2,
  #pageRestauration .btn-2,
  #pageEnvirons .btn-2 {
    font-size: 1vw;
  }

  /*----------------------------
    	Commentaire et avis
----------------------------*/

  .show span {
    width: 2.5vw;
  }

  #commentaire div p:first-child,
  #bloc-localisation h3 {
    font-size: 1.9vw;
  }

  #commentaire div p:first-child span {
    font-size: 0.75vw;
  }

  /*----------------------------
    	Bloc réserver
----------------------------*/

  #validation-commande > div {
    padding: 3vw 3vw;
  }

  #options label {
    font-size: 1.3vw;
  }

  #options label + div {
    padding-left: 2vw;
  }

  .options-room div[include*="form-input-select()"]:first-of-type {
    margin-right: 1vw;
    max-width: 7.5vw;
  }
  .options-room div[include*="form-input-select()"]:last-of-type {
    max-width: 10.5vw;
  }
  [include*="form-input-select()"] select {
    font-size: 0.9vw;
  }

  .options-room .annuler-selection {
    top: -0.2vw;
    right: -1.9vw;
    width: 1.4vw;
    height: 1.4vw;
  }

  #recapitulatif > div:first-child {
    margin-right: 1.5vw;
  }

  #recapitulatif > div:first-child p:first-child {
    font-size: 1.73vw;
  }

  #recapitulatif > div:first-child p:last-child {
    font-size: 1.08vw;
    margin-bottom: 1.4vw;
  }

  .separateur {
    font-size: 2.5vw;
    margin: 0 0.5vw;
  }

  #recapitulatif > div:first-child p:nth-child(2) {
    font-size: 1.08vw;
  }

  #validation-commande .reserver {
    font-size: 0.85vw;
  }

  #validation-commande .dateSaisie::after {
    font-size: 0.8vw;
  }

  #recapitulatif > div:last-child button {
    font-size: 1.55vw;
    height: 2.2vw;
    padding-left: 1.6vw;
    padding-right: 1.6vw;
  }

  #recapitulatif > div:last-child a {
    font-size: 0.95vw;
    margin-top: 1vw;
  }

  /*----------------------------
    	Bloc Etape 2
----------------------------*/

  #etape2 {
    padding: 1vw;
  }

  #etape2 p,
  #etape3 p {
    font-size: 1vw;
  }

  .precedent {
    top: 1.6vw;
    left: 1vw;
  }
  #bloc-choix {
    margin-bottom: 1vw;
    margin-right: 3vw;
    margin-left: 3vw;
  }

  .colonne.gauche {
    margin-right: 1vw;
  }
  .info-date {
    font-size: 0.8vw;
    padding: 0.5vw 1vw;
    margin-bottom: 1vw;
  }

  .info-date p:first-child {
    margin-bottom: 1vw;
  }

  .info-date .checkIn,
  .info-date .checkOut {
    font-size: 1.1vw;
  }

  .info-date a {
    font-size: 0.9vw;
  }

  #recap-reservation {
    margin-bottom: 1vw;
  }

  #bloc-chambres {
    padding: 0.5vw 1vw;
    padding-bottom: 1.9vw;
  }

  #bloc-chambres .recap-room {
    font-size: 1.2vw;
  }

  #bloc-chambres .recap-room + td {
    font-size: 1.1vw;
  }

  #bloc-chambres .taxe {
    font-size: 1vw !important;
  }

  #bloc-chambres a {
    font-size: 0.9vw;
    right: 1vw;
    bottom: 0.5vw;
  }

  #bloc-total {
    padding: 0.5vw 1vw;
  }

  #bloc-total div,
  #optionsSejour div,
  #coordonnees fieldset,
  #cgv small {
    padding-left: 1vw;
  }

  #bloc-total > p:first-child {
    font-size: 1.3vw;
  }

  #bloc-total p:first-child #montantTotalTaxe {
    font-size: 1.2vw;
  }

  #bloc-total div > p:first-child {
    margin-bottom: 1vw;
    font-size: 0.8vw;
  }

  #bloc-total small {
    font-size: 0.6vw;
    text-align: center;
    display: block;
    color: rgba(116, 116, 116, 0.7);
  }

  #optionsSejour {
    padding: 0.5vw 1vw;
  }

  #optionsSejour p {
    font-size: 1vw;
  }

  #optionsSejour > p:first-child {
    font-size: 1.1vw;
    margin-bottom: 0.2vw;
  }

  #optionsSejour p span {
    margin-right: 0.8vw;
    font-size: 1.15vw;
  }

  #etape2 .colonne.droite {
    width: calc(70% - 1vw);
  }

  #coordonnees {
    padding: 0.5vw 1vw;
    margin-bottom: 1vw;
  }

  #coordonnees h4 {
    font-size: 1.6vw;
    margin-bottom: 1vw;
  }

  #coordonnees legend {
    font-size: 1.2vw;
    margin-bottom: 0.5vw;
  }

  #coordonnees legend span {
    font-size: 0.8vw;
  }

  #coordonnees .infobulle > span > span {
    font-size: 1vw;
    padding: 0.3vw 0.8vw;
    font-size: 0.85vw;
  }

  #etape2 small {
    font-size: 0.8vw;
    margin-left: 0.5vw;
  }

  #coordonnees fieldset:nth-child(4) legend {
    margin-bottom: 0;
  }

  #coordonnees fieldset:nth-child(4) small {
    margin-bottom: 0.5vw;
  }

  #coordonnees fieldset:not(:first-child) {
    margin-top: 0.7vw;
  }

  #coordonnees fieldset:not(:last-child) {
    margin-bottom: 1vw;
  }

  #coordonnees #bloc-mail .infobulle,
  #coordonnees .flex .infobulle:not(:last-of-type),
  #coordonnees .facturation .form-group:not(:last-of-type) {
    margin-right: 3vw;
  }

  #coordonnees .infobulle div > span:not(#error-msg):not(#valid-msg),
  #phoneIns-next {
    top: calc(100% - 0.9vw);
  }

  #phoneIns-next {
    top: calc(100% - 1.5vw);
  }

  #coordonnees
    .infobulle
    div
    > span:not(#error-msg):not(#valid-msg)
    > span,
  #phoneIns-next > span {
    padding: 0.3vw 0.8vw;
    font-size: 0.85vw;
  }

  #coordonnees
    .infobulle
    div
    > span:not(#error-msg):not(#valid-msg)
    > span:after,
  #phoneIns-next > span:after {
    border-width: 0.5vw;
  }

  #coordonnees fieldset:nth-child(4) small {
    margin-bottom: 0.5vw;
  }

  #coordonnees fieldset:not(:first-child) {
    margin-top: 0.7vw;
  }

  #coordonnees .iti {
    min-height: 1.8vw;
    min-width: 13vw;
    margin-bottom: 0.75vw;
  }

  #coordonnees .iti__selected-flag {
    height: calc(100% - 1.25vw);
    margin-top: 1.25vw;
  }

  #phoneInput {
    padding-top: 6px;
    padding-bottom: 4px;
    min-height: 2.4vw !important;
    font-size: 1vw;
  }

  .champPhone label {
    left: 0.5vw;
    font-size: 1vw;
  }
  .champPhone > div {
    padding-top: 20px;
    margin-bottom: 1vw;
  }

  #coordonnees .iti__country-list--dropup {
    margin-bottom: -2px;
    max-width: 18vw;
  }

  #error-msg {
    font-size: 0.8vw;
    bottom: 1vw;
    right: 1vw;
    transform: translateX(80%);
  }

  #valid-msg {
    font-size: 0.8vw;
    bottom: 1vw;
    right: 1vw;
    transform: translateX(80%);
  }

  #coordonnees .form-group {
    padding: 1.4vw 0 0;
  }

  #coordonnees input:not(#phoneInput),
  #coordonnees .form-label {
    padding-left: 0.5vw;
  }

  #coordonnees .form-field {
    padding: 6px 0;
  }

  #coordonnees .form-field:focus {
    padding-bottom: 4px;
  }

  #coordonnees input {
    font-size: 1vw;
    min-height: 1.8vw;
    margin-bottom: 0.5vw;
    margin-right: 2vw !important;
  }

  #coordonnees .form-field:placeholder-shown ~ .form-label {
    top: 1.69vw;
  }
  #coordonnees .form-field::-webkit-input-placeholder-shown ~ .form-label {
    top: 1.69vw;
  }
  #coordonnees .form-field::-ms-input-placeholder-shown ~ .form-label {
    top: 1.69vw;
  }

  #coordonnees .form-group .form-label {
    top: 0;
  }

  .form-label {
    top: 0;
  }

  #coordonnees .form-field:focus ~ .form-label {
    top: 0;
  }

  #coordonnees .textarea.form-group {
    margin-left: 1vw;
  }

  #coordonnees .form-group.big {
    width: 25vw;
  }

  #coordonnees #bloc-mail .form-group {
    min-width: 18vw;
  }

  #coordonnees small {
    font-size: 0.8vw;
    margin-left: 0.5vw;
  }

  #coordonnees textarea {
    padding: 0.5vw 1vw !important;
    min-height: 2vw;
    width: calc(80% - 3vw);
    font-size: 0.9vw;
  }

  #finaliser #cgv {
    width: calc(70% - 3vw);
    margin-right: auto;
    padding: 0.5vw 1vw;
    margin-bottom: auto;
    margin-left: 0;
  }

  #finaliser h5 {
    font-size: 1vw;
    margin-bottom: 0.5vw;
  }

  #finaliser small {
    max-height: 16.7vw;
    padding-right: 0.5vw;
  }

  #finaliser ::-webkit-scrollbar {
    width: 0.08vw;
  }

  #finaliser #validation-formulaire {
    padding: 0vw 1.5vw;
    margin-bottom: 0;
  }

  #finaliser div {
    margin-bottom: 0.8vw;
  }

  #finaliser .button {
    font-size: 1.55vw;
    padding-left: 1.3vw;
    padding-right: 1.3vw;
  }

  #finaliser #validation-formulaire small {
    font-size: 0.75vw;
  }

  #etape3 h5 {
    font-size: 1.3vw;
    margin-bottom: 0.5vw;
  }

  #paiement {
    padding: 0.5vw 1vw;
    margin-bottom: 1vw;
  }

  #paiement h4 {
    font-size: 1.6vw;
    margin-bottom: 1vw;
  }

  .kr-pan,
  .kr-expiry,
  .kr-security-code,
  .kr-payment-button {
    min-width: 20vw !important;
  }

  .systempay {
    max-width: 10vw;
    margin-left: 5vw;
  }

  #paiement legend {
    font-size: 1vw;
    margin-bottom: 0.5vw;
  }

  #facturation {
    width: 50%;
  }

  #confirmation {
    padding: 0.5vw 3vw;
    margin-bottom: 1vw;
  }

  #confirmation p {
    font-size: 2.5vw;
  }

  /*------------------------------
				page Maison
-------------------------------*/

  #pageMaison section {
    padding-left: 4vw !important;
    padding-right: 4vw !important;
    padding-bottom: 6vw;
  }

  #pageMaison #presentation figure {
    margin-right: 3vw;
    margin-bottom: 2.5vw;
  }

  #bloc-texte > div {
    margin-top: 2.5vw;
  }

  #bloc-texte address span span {
    margin-right: 0.4vw;
    font-size: 1.5vw;
  }

  #bloc-texte address p {
    font-size: 0.93vw;
    line-height: 1.5vw;
    padding: 0 1.5vw;
  }

  #bloc-texte address p > * {
    font-size: 1vw;
    line-height: 1.5vw;
    font-weight: 700;
  }

  #bloc-texte address span[class^="icon-"] {
    color: rgb(16, 28, 54);
    margin-right: 0.4vw;
    font-size: 1.1vw;
  }

  #bloc-texte address a {
    color: rgb(58, 170, 53);
    text-decoration: none;
    margin-left: 1.3vw;
  }

  #pageMaison #bloc-texte > p:last-child {
    margin-top: 2.5vw;
  }

  #pageMaison .carroussel li {
    padding-left: 2vw;
    padding-right: 2vw;
  }
  #pageMaison .btn-2 {
    padding: 0.5vw 1.5vw;
    margin-top: 1.14vw;
  }
  #pageMaison .btn-2 {
    padding: 0.5vw 1.5vw;
    margin-top: 1.14vw;
    font-size: 1.25vw;
  }

  #pageMaison .arrow.prev {
    left: -1vw;
  }

  #pageMaison .arrow.next {
    right: -1vw;
  }

  /*------------------------------
				Page Environs
-------------------------------*/

  .titre-carroussel p {
    font-size: 1vw;
    margin: 0 1vw;
  }

  #pageEnvirons .carroussel li {
    padding-left: 1vw;
    padding-right: 1vw;
  }

  #pageEnvirons section {
    padding-left: 4vw !important;
    padding-right: 4vw !important;
    padding-bottom: 6vw;
  }

  #environs-carroussel .article {
    padding-top: 5vw;
  }

  #environs-carroussel h2 {
    margin-bottom: 2.5vw;
  }

  #pageEnvirons .article:nth-child(even) .description_chambre {
    padding-left: 3vw;
    padding-right: 6vw;
    margin-right: -4vw;
  }

  #pageEnvirons .article:nth-child(even) .info_chambre {
    right: -1vw;
    left: initial;
  }

  #pageEnvirons .article:nth-child(3) .info_chambre {
    bottom: -0.5vw;
  }

  #pageEnvirons .article:nth-child(4) .info_chambre {
    bottom: 0;
  }

  #pageEnvirons .description_chambre {
    padding: 2vw 3vw;
    padding-bottom: 1vw;
    padding-left: 6vw;
    width: calc(40% + 4vw);
  }

  #pageEnvirons .description_chambre h3 span {
    font-size: 1vw;
  }

  #pageEnvirons .description_chambre h3 span:first-child {
    margin-left: 0.5vw;
  }

  .info-spot {
    margin-top: 1vw;
  }

  .info-spot p {
    font-size: 0.93vw !important;
    line-height: 1.5vw;
    padding: 0 0.5vw;
  }

  .info-spot p span {
    margin-right: 0.4vw;
    font-size: 1.1vw;
  }

  .info-spot p .text {
    font-size: 0.93vw;
  }

  #pageEnvirons .arrow.prev {
    left: -1vw;
    top: calc(0.5612 * (100vw - 20vw) / 2);
    display: block;
  }

  #pageEnvirons .arrow.next {
    right: -1vw;
    top: calc(0.5612 * (100vw - 20vw) / 2);
  }

  #pageEnvirons .info_chambre {
    padding: 0.5vw;
    left: -2vw;
    bottom: -2.5vw;
    z-index: 20;
    padding: 0.5vw 1.3vw;
  }

  .info_chambre .text {
    font-size: 0.9vw;
  }

  .info_chambre .text span {
    font-size: 0.8vw;
  }

  #transport .cadre {
    padding: 1vw 1.5vw;
  }

  #transport h2 + div > div {
    transform: translateX(10vw);
  }

  #transport div:nth-child(3) > div:first-child {
    transform: translateY(-2vw);
  }

  #transport div:nth-child(3) > div:last-child {
    transform: translateY(1.5vw) translateX(-1vw);
  }

  #transport div:nth-child(4) > div:first-child {
    transform: translateY(-1vw);
  }

  #transport div:nth-child(4) > div:last-child {
    transform: translateY(1vw) translateX(-1vw);
  }

  #transport h3 {
    font-size: 1.65vw;
  }

  #transport p span {
    font-size: 1.2vw;
    margin-right: 1vw;
  }

  #transport strong {
    margin-left: 0.4vw;
    margin-right: 0.4vw;
  }

  #transport > div:last-child > div:first-child a:first-child {
    margin-right: 1vw;
  }

  #transport > div:last-child > div:last-child a {
    margin-left: 0.6vw;
  }

  /*------------------------------
				Page Restauration
-------------------------------*/

  #pageRestauration section {
    padding-top: 2.5vw;
  }

  #pageRestauration .section-carroussel {
    padding-left: 4vw !important;
    padding-right: 4vw !important;
    padding-bottom: 6vw;
  }

  #pageRestauration h2 {
    margin-bottom: 2.5vw;
  }

  #pageRestauration #carte caption {
    font-size: 1.5vw;
  }

  #pageRestauration #carte table {
    margin-top: 0.5vw;
    margin-bottom: 2.5vw;
  }

  #pageRestauration #carte p {
    margin-bottom: 0.5vw;
  }

  #pageRestauration #carte td,
  #pageRestauration #carte th {
    padding: 1vw 1vw;
    padding-bottom: 0.3vw;
    font-size: 0.9vw;
  }

  .section-carroussel {
    margin-top: 5vw;
  }

  #pageRestauration .carroussel li {
    padding-left: 2vw;
    padding-right: 2vw;
  }

  #pageRestauration .description_chambre {
    width: calc(40% + 4vw);
  }

  #pageRestauration .btn-2 {
    padding: 0.5vw 1.5vw;
    margin-top: 1.14vw;
  }

  #pageRestauration .btn-2 {
    padding: 0.5vw 1.5vw;
    margin-top: 1.14vw;
    font-size: 1.3vw;
  }

  #pageRestauration .arrow.prev {
    left: -1vw;
  }

  #pageRestauration .arrow.next {
    right: -1vw;
  }

  /*------------------------------
				Page Mentions
-------------------------------*/
  #pageMentions .article h3 {
    font-size: 2vw;
  }

  #pageMentions .article p,
  #pageMentions .article li {
    font-size: 1vw;
  }

  /*------------------------------
				Footer
-------------------------------*/
  footer nav li {
    font-size: 1.2vw;
  }

  footer p {
    font-size: 0.9vw !important;
  }

  /*------------------------------
				cookie
-------------------------------*/

  #cookie {
    top: 20vw;
    padding: 1.5vw;
  }

  #cookie small {
    font-size: 1vw;
  }

  #cookie div {
    margin-bottom: 0.8vw;
  }

  #cookie input {
    width: 1vw;
    height: 1vw;
  }

  #cookie div.visible {
    max-height: 2vw;
  }

  #cookie label {
    font-size: 1vw;
    margin-left: 0.5vw;
  }
}

/* ==================================================================
						Ecrans entre 1400 et 1000
====================================================================*/
@media screen and (min-width: 1350px) {
  #chambres.reservation .relative .article > div {
    align-items: center;
  }
}

@media screen and (min-width: 1000px) and (max-width: 1350px) {
  header .reserver {
    padding-left: 0.3rem;
    padding-right: 0.3rem;
  }

  .dateSaisie:after {
    padding-top: 0.4rem;
  }
}

@media screen and (max-width: 1250px) {
  #pageEnvirons .description_chambre {
    width: calc(50% + 4rem);
  }
}

@media screen and (min-width: 1000px) and (max-width: 1380px) {
  /*----------------------------
    	Présentation
----------------------------*/
  #presentation .relative {
    width: 34%;
    margin-right: 4rem;
  }

  #bloc_info {
    margin-bottom: 2rem;
    border-collapse: collapse;
    border-spacing: 0px;
    table-layout: fixed;
    width: 58%;
  }

  #presentation .arrow.next {
    right: 0;
  }

  #presentation .arrow.prev {
    right: 4.2rem;
  }
}

@media screen and (max-width: 1350px) {
  #finaliser {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  #finaliser #cgv {
    width: 100%;
    order: 1;
    margin-right: 0;
  }

  #finaliser #validation-formulaire {
    order: 1;
    padding-right: 2rem;
    padding-bottom: 0.5rem;
    padding-top: 1rem;
  }

  #finaliser #validation-formulaire > div {
    flex-direction: row;
    padding-bottom: 0;
    width: auto;
    max-width: 25rem;
  }

  #finaliser #validation-formulaire {
    width: auto;
  }

  #finaliser #validation-formulaire > div div {
    margin-bottom: 0;
    margin-right: 1rem;
  }
}

@media screen and (min-width: 1000px) {
  /*----------------------------
    		Global
----------------------------*/
  .mobile {
    display: none;
  }

  /*----------------------------
    	Présentation
----------------------------*/

  #parallaxe_text > p:first-child {
    font-size: 1.8vw;
  }

  /*----------------------------
    		Chambres
----------------------------*/

  #chambre .carroussel {
    height: calc((100vw - 8rem) * 0.5625);
  }

  .description_chambre h3 {
    font-size: 1.9vw;
  }

  #pageEnvirons .description_chambre h3 {
    font-size: 1.65vw;
  }

  .info_chambre {
    padding-top: 2.59vw;
    left: 1.618vw;
    width: calc(54% + 2.47rem - 5.618vw - 0.944vw);
    top: calc((100vw - 2rem) * 0.54 * 0.5625 - 1.6vw);
    height: 8.41vw;
  }

  .info_chambre p {
    padding-left: 1vw;
    margin-bottom: 0.6vw;
  }

  .prix {
    left: calc(64% - 8vw);
    height: 4.8vw;
    width: 8vw;
    top: calc((54vw - 4rem) * 0.5625 - 2.6vw);
  }

  .prix p:first-child {
    width: 6.5vw;
    display: flex;
    align-items: center;
  }

  .prix > div > div {
    padding: 0.5vw;
  }

  #chambres .btn-2 {
    padding: 0.5vw 1.5vw;
    margin-top: 1.14vw;
  }

  #chambres .button {
    margin-top: 1.85rem;
  }

  /*----------------------------
    Commentaires et avis
----------------------------*/

  #commentaire {
    margin-right: -1vw;
  }

  .logo_avis {
    height: 10.5vw;
    width: 12vw;
    padding: 1.5vw;
    margin-right: -1.3vw;
  }

  .logo_avis:nth-child(2),
  .logo_avis:nth-child(4) {
    height: 10vw;
  }

  #localisation {
    margin-top: 4vw;
    margin-bottom: 6vw;
  }

  #localisation div:last-child {
    margin-left: -3rem;
    margin-bottom: -2rem;
    margin-top: 5vw;
    padding: 3rem;
    padding-left: 6rem;
  }
}

/* ==================================================================
						Petits Ecrans PC
====================================================================*/

@media screen and (min-width: 980px) and (max-width: 1100px) {
  #validation-commande > div {
    padding-top: 2.5rem !important;
  }

  #validation-commande .show {
    top: 0;
  }
}

@media screen and (min-width: 1000px) and (max-width: 1200px) {
  section h2 {
    font-size: 3rem;
  }

  #modal-contact address {
    margin-right: 4%;
  }

  .logo_avis {
    height: 12.5vw;
    width: 14vw;
  }

  .logo_avis:nth-child(2),
  .logo_avis:nth-child(4) {
    height: 12vw;
  }

  /*----------------------------
    	Présentation
----------------------------*/

  #parallaxe_text > h3 {
    font-size: 2rem;
  }

  .defilement_img {
    width: 54%;
  }

  /*----------------------------
    		Chambres
----------------------------*/

  #pageHome .description_chambre {
    padding: 2rem;
    padding-left: 2rem;
    padding-left: 4.47rem;
    width: calc(46% + 4rem);
  }

  #pageHome .prix {
    top: calc((44vw - 8rem) * 0.5625 - 2.6vw);
  }

  .description_chambre h3,
  #localisation div:last-child h3 {
    font-size: 1.65rem;
  }

  #bloc_info td a,
  #bloc_info td {
    font-size: 0.61rem;
  }

  #chambres .arrow.droite,
  #chambres .arrow.prev,
  #pageMaison .arrow.droite,
  #pageMaison .arrow.prev {
    right: -1rem;
  }

  .prix > div > div {
    padding: 0.5rem;
  }

  .prix {
    width: 7.5rem;
    left: calc(54% - 7.5rem);
    height: 4.3rem;
  }

  /*----------------------------
    	Commentaire et avis
----------------------------*/
  #commentaire {
    width: 35%;
    padding: 2rem;
  }

  #commentaire div:not(:nth-child(1)) {
    width: calc(100% - 4rem);
    height: calc(100% - 4rem);
    top: 2rem;
    left: 2rem;
  }

  #localisation div:last-child {
    padding: 2rem;
    margin-left: -4rem;
    padding-left: 4rem;
    width: 55%;
  }

  /*----------------------------
    Réservations chambres
----------------------------*/

  .info_chambre {
    padding-top: 2.59rem;
    left: 1.618rem;
    width: calc(54% + 2.47rem - 5.618rem - 4.944rem);
    top: calc((100vw - 2rem) * 0.54 * 0.5625 - 1.6rem);
    padding-right: 4rem;
    height: 8.41rem;
  }

  #chambres.reservation .prix {
    z-index: 5;
    left: calc(54% + 2.47rem - 8rem);
    top: calc((100vw - 1rem) * 0.54 * 0.5625 - 4.2rem - 2.6rem);
    bottom: initial;
    width: 8rem;
  }

  /*----------------------------
    	Page la maison
----------------------------*/

  #pageMaison .description_chambre {
    padding: 2rem;
    padding-left: 2rem;
    padding-left: 2rem;
    padding-left: 4.47rem;
    width: calc(46% + 4rem);
  }

  #pageMaison section {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
}

@media screen and (max-width: 1100px) {
  /*----------------------------
    Confirmation réservation
----------------------------*/
  #recapitulatif {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  #validation-commande > form {
    padding: 1.5rem;
    padding-bottom: 1rem;
    padding-top: 2.5rem;
  }

  #recapitulatif > form:first-child p:last-child {
    margin-bottom: 0.4rem;
  }
}

@media screen and (max-width: 1056px) {
  #div-bouton-paiement .loader {
    order: 1;
  }
  #div-bouton-paiement > .flex {
    order: 2;
  }
}

/* ==================================================================
								Tablette
====================================================================*/

@media screen and (max-width: 1000px) {
  /*----------------------------
    		Global
----------------------------*/
  .pc {
    display: none;
  }

  section h2 {
    font-size: 3rem;
    margin-bottom: 1rem;
  }

  /*----------------------------
    		Réserver
----------------------------*/

  .dateSaisie:after {
    content: "(modifier)";
    margin-left: 0.4rem;
    text-decoration: underline;
    font-size: 0.5rem;
  }

  /*----------------------------
    	Modal Contact
----------------------------*/

  header ul li a {
    font-size: 1rem;
  }

  #modal-contact > div {
    flex-direction: column;
    justify-content: flex-start;
    padding-bottom: 5rem;
  }

  #modal-contact #closeModal {
    z-index: 50;
    top: 5%;
    right: 4rem;
  }

  #modal-contact address,
  #modal-contact form {
    width: auto;
    max-width: initial;
  }

  #modal-contact address {
    margin-right: 0;
    padding-left: 2rem;
    padding-right: 2rem;
    box-sizing: border-box;
    margin-top: 4rem;
    margin-bottom: 2rem;
  }

  #modal-contact address > div {
    display: flex;
    flex-wrap: wrap;
    padding-left: 3vw;
  }

  #modal-contact address > div > p {
    width: max-content;
    margin-right: 2rem;
    margin-bottom: 0;
  }

  #modal-contact form {
    margin-right: 0;
    width: 100%;
    max-width: inherit;
    padding-left: 2rem;
    padding-right: 2rem;
    box-sizing: border-box;
    margin-top: 2rem;
    margin-bottom: 0.5rem;
  }

  #modal-contact > fieldset div:not(.form-group) {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
    padding-left: 3vw;
  }

  #modal-contact fieldset div.un {
    width: max-content;
    margin-right: 2rem;
    flex-wrap: wrap;
    max-width: 83vw;
  }

  .form-group.petit,
  .infobulle.petit {
    max-width: initial;
  }

  #modal-contact fieldset .infobulle.grand {
    width: max-content;
    margin-right: 2rem;
    min-width: 90%;
  }

  #modal-contact form #captcha-svg {
    width: max-content;
    align-items: end;
    margin-right: 2rem;
  }

  #modal-contact.visible .loader.contact {
    height: min-content;
    margin-right: 120px;
    margin-top: 1rem;
    z-index: 10;
  }

  #loader {
    position: absolute;
    right: -1rem;
    transform: translate(100%, -50%);
    top: 50%;
  }

  /*----------------------------
    	Présentation
----------------------------*/
  #bloc_presentation {
    padding: 0;
  }

  #parallaxe_text {
    width: 100%;
    padding-bottom: 1rem;
    transform: translate(1rem);
  }

  #parallaxe_text > p:first-child {
    font-size: 1.3rem;
  }

  #parallaxe_text > h3 {
    font-size: 2rem;
  }

  #presentation .relative {
    width: 40%;
    margin-right: 2rem;
  }

  #presentation .arrow.prev {
    right: 4.2rem;
  }

  #presentation .arrow.next {
    right: 0;
  }

  #bloc_info td a,
  #bloc_info td {
    font-size: 0.61rem;
  }

  #bloc_info td ins img {
    max-height: 1.5rem;
  }

  /*----------------------------
    		Chambres
----------------------------*/
  #chambres {
    padding: 3rem 0;
  }
  #chambres .article {
    width: 100%;
  }

  #chambres .relative li > div,
  #pageMaison .relative li > div,
  #pageEnvirons .relative li > div,
  #pageRestauration .relative li > div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .defilement_img {
    width: 100%;
  }

  .description_chambre {
    position: relative;
    margin-top: -2rem;
    padding: 3rem;
    padding-left: 3rem;
    width: 100% !important;
    right: auto;
    box-shadow: 3px 6px 20px rgba(0, 0, 0, 0.2);
    margin-left: 0;
  }

  #pageHome .description_chambre {
    margin-left: -2rem;
  }

  .prix {
    top: calc((100vw - 8rem) * 0.4);
    right: 0;
    left: auto;
    bottom: auto;
  }

  #pageChambres .masquer .prix > div > div {
    transform: translateY(-100%) !important;
  }

  #pageChambres .prix > div > div {
    transform: translateY(0) !important;
  }

  /*----------------------------
    	Commentaires et avis
----------------------------*/

  #avis > h2 + .article {
    flex-wrap: wrap;
  }

  #commentaire {
    width: 65%;
  }

  .logo_avis:nth-child(3) {
    transform: translateY(-11px);
  }

  .logo_avis:nth-child(4) {
    transform: translateY(-28px);
  }

  .logo_avis:nth-child(2) {
    transform: translate(-0.5rem, 4rem);
  }

  #localisation div:first-child {
    width: 60%;
  }

  #avis #localisation {
    justify-content: flex-start;
    margin-top: 3rem;
    margin-bottom: 8rem;
    position: relative;
  }

  #bloc-localisation:before {
    background: #f8f7f7;
    transition:
      height 0.4s,
      width 0.7s 0.4s !important;
  }

  #localisation div:last-child {
    width: 70%;
    margin-left: initial;
    padding-left: initial;
    max-height: initial;
    position: absolute;
    right: 0;
    top: 8rem;
    padding: 2rem;
  }

  #localisation div:last-child h3 {
    margin-bottom: 1rem;
  }

  #localisation div:last-child p {
    margin: 0;
  }

  /*----------------------------
    Chambres et réservations
----------------------------*/
  #chambres.reservation ul.relative li > div {
    align-items: flex-start;
  }

  #chambres.reservation .defilement_img {
    width: 70%;
    margin-bottom: 0;
  }

  #chambres.reservation .prix {
    left: 0;
    top: 0;
  }

  .info_chambre {
    padding-top: 2.49vw;
    left: 65%;
    width: 30%;
    top: -3%;
    padding-right: 0;
    height: min-content;
    padding-left: 5%;
    display: flex;
    flex-direction: column;
  }

  .info_chambre p span {
    color: rgb(81, 150, 78);
    margin-right: 1rem;
    font-size: 1.1rem;
  }

  #chambres.reservation .description_chambre {
    z-index: 3;
    width: 100%;
    margin-left: 0;
    transform: translateY(0);
    padding: 2rem;
    padding-top: 3.5rem;
    justify-content: flex-start;
  }

  #chambres.reservation .description_chambre > h3 + p {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
  }

  /*----------------------------
			Etape 2
----------------------------*/
  #etape2 .colonne.droite {
    width: calc(60% - 1rem);
  }

  .colonne.gauche {
    width: 40%;
  }

  #coordonnees .form-group.big,
  #coordonnees .form-group.textarea {
    width: 90%;
  }

  #coordonnees textarea {
    width: calc(100% - 2rem);
  }

  /*----------------------------
    		Page les environs
----------------------------*/

  #pageEnvirons section:last-child,
  #pageRestauration section:last-child {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }

  #pageEnvirons .description_chambre,
  #pageRestauration .description_chambre {
    width: calc(100% + 2rem);
    margin-top: -1rem;
    padding: 1rem !important;
    padding-top: 2rem !important;
  }

  #pageEnvirons h2,
  #pageRestauration h2 {
    margin-bottom: 1.5rem;
  }

  #pageEnvirons .defilement_img,
  #pageRestauration .defilement_img {
    width: 100%;
  }

  #pageEnvirons .info_chambre {
    bottom: initial;
    left: initial;
    top: calc(100% - 1rem);
  }

  #environs-carroussel .article:first-of-type .info_chambre {
    left: 6vw;
  }

  #pageEnvirons .article:nth-child(3) .info_chambre {
    left: 5vw;
    right: initial;
  }

  #pageEnvirons .article:nth-child(2n) .info_chambre {
    right: 5vw;
    left: initial;
    order: 1;
    z-index: initial;
  }

  #pageEnvirons .article:nth-child(2n) .description_chambre {
    order: 2;
    z-index: initial;
    padding-left: initial;
    padding-right: initial;
    margin-left: 0;
    margin-right: 0;
  }

  #pageEnvirons .arrow.prev,
  #pageEnvirons .arrow.next {
    top: calc(0.5612 * (100vw + 3.5rem) - 2rem) !important;
  }

  .info-spot {
    max-width: 100%;
  }

  .info-spot p a {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #pageEnvirons .info_chambre div {
    flex-direction: row;
  }

  #pageEnvirons .info_chambre p {
    margin-bottom: 0;
  }

  #pageEnvirons .info_chambre p:not(:last-of-type) {
    margin-right: 1rem;
  }

  #transport p:not(.ex) {
    display: block;
  }

  #transport h2 + div > div p:last-child {
    margin-bottom: 0;
  }

  #transport h2 + div > div {
    transform: translateX(5rem) translateY(-1rem);
    z-index: 10;
  }

  #transport div:nth-child(3) > div:first-child {
    transform: translateY(-1.5rem);
  }

  #transport div:nth-child(3) > div:last-child {
    transform: translateY(1.5rem) translateX(-1rem);
    width: 44%;
  }

  #transport div:nth-child(4) > div:first-child {
    transform: translateY(-2rem);
    width: 60%;
  }

  #transport div:nth-child(4) > div:last-child {
    transform: translateY(1rem) translateX(1rem);
    width: 40%;
  }

  /*----------------------------
    		Page maison
----------------------------*/
  #pageMaison figure {
    width: 100%;
    height: 90%;
  }
}

@media screen and (min-width: 900px) {
  #reserver {
    display: none;
  }
}

@media screen and (max-width: 900px) {
  /*----------------------------
    		Header
----------------------------*/
  .preload header {
    transform: translateY(-10rem);
  }

  header {
    transition:
      transform 0.7s 0.7s,
      background-position-Y 0.5s ease-out 0.19s;
    top: -2px;
  }

  header.fill {
    transition: background-position-Y 0.5s ease-in 0.2s;
  }

  .preload #reserver {
    transform: translateY(-10rem);
  }

  #reserver {
    display: block;
    position: absolute;
    top: calc(5rem - 1px);
    width: 10rem;
    height: 3rem;
    font-size: 0.8rem;
    right: 0;
    background-color: transparent;
    color: white;
    border: 1px solid hsla(0, 0%, 100%, 0.3);
    border-top: none;
    z-index: 10;
    font-family: "Muli", Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    cursor: pointer;
    position: fixed;
    background: linear-gradient(to bottom, white 50%, transparent 50%);
    background-size: 100% 208%;
    background-position-y: 98%;
    transition:
      transform 0.7s 0.7s,
      background-position-Y 0.19s ease-in,
      color 0.1s,
      visibility 0s 0.7s;
    transform: translateY(0);
    z-index: 51;
    padding: 0;
    visibility: visible;
  }

  #modal-contact.visible + #modal-menu + #modal-date + main #reserver,
  #modal-menu.visible + #modal-date + main #reserver,
  #modal-date.visible + main #reserver {
    visibility: hidden;
    transition: visibility 0s;
  }

  .fill#reserver,
  .solid#reserver {
    background-color: white;
    background-position-y: 0;
    box-shadow: 0 1px 3px rgba(76, 76, 76, 0.1);
    color: rgb(16, 28, 54);
    border: 1px solid rgba(76, 76, 76, 0.3) !important;
    transition:
      background-position-Y 0.19s ease-out 0.7s,
      color 0.2s 0.3s,
      visibility 0s 0.7s;
  }

  header #phone {
    border-left: none;
  }

  #parallaxe_text > h3 {
    font-size: 1.6rem;
  }

  /*----------------------------
    Etape2
----------------------------*/
  #finaliser #validation-formulaire {
    padding-right: 0;
  }
  #finaliser.etape2 {
    justify-content: center;
  }
}

@media screen and (max-width: 850px) {
  /*----------------------------
    Confirmations des réservations
----------------------------*/
  #validation-commande > form {
    flex-wrap: wrap;
    padding-top: 1.5rem;
  }

  #recapitulatif {
    justify-content: flex-end;
    margin-top: 2rem;
    width: 100%;
  }

  #options {
    flex-direction: row;
    flex-wrap: wrap;
  }

  #options label {
    font-size: 1rem;
  }

  #options > div:not(:last-child) {
    margin-bottom: 0;
  }

  #options label + div {
    flex-direction: column;
  }

  .options-room div[include*="form-input-select()"]:first-of-type {
    margin-bottom: 0;
  }

  #options label + div {
    display: flex;
    padding-left: 1rem;
  }

  #options > div:not(:last-child) {
    margin-right: 1rem;
  }

  #coordonnees .form-group {
    margin: 0 1.5rem 0.5rem 0;
  }
  #coordonnees .iti {
    margin-bottom: 0.75rem;
  }
}

@media screen and (min-width: 700px) and (max-width: 850px) {
  #options {
    width: 100%;
  }
}

@media screen and (min-width: 700px) and (max-width: 1000px) {
  #chambres .arrow.prev,
  #chambres .arrow.next {
    top: 70%;
  }
  #chambres.reservation ul.relative {
    padding: 0 0;
    overflow: initial;
    display: flex;
    margin-bottom: 8rem;
  }
  #pageHome #chambres .carroussel {
    transform: translateX(2rem);
  }
}

@media screen and (max-width: 780px) {
  #avis #localisation {
    margin-bottom: 12rem;
  }
}

@media screen and (max-width: 750px) and (min-width: 700px) {
  #bloc_info {
    width: inherit !important;
  }
}
@media screen and (max-width: 750px) and (min-width: 635px) {
  #div-bouton-paiement > .flex {
    width: 80%;
    justify-content: center;
  }
}

@media screen and (max-width: 750px) {
  /*----------------------------
			Etape 2
----------------------------*/

  #etape2 .div-responsive {
    flex-wrap: wrap;
    height: min-content;
    width: 100%;
  }

  .colonne.gauche {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 0.5rem;
    margin-right: 0;
    margin-bottom: 1rem;
  }

  .colonne.gauche > div {
    width: 100%;
    height: min-content;
  }

  #recap-reservation {
    grid-column: 2 / 3;
    margin-bottom: 0;
  }

  .info-date,
  #optionsSejour {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
  }

  #optionsSejour {
    align-self: end;
  }

  .info-date {
    margin-right: 1rem;
  }

  #bloc-chambres,
  #bloc-total,
  #info-date,
  #optionsSejour {
    padding: 0.5rem 0.85rem;
  }

  #bloc-chambres {
    padding-bottom: 1.5rem;
  }

  #etape2 .colonne.droite {
    width: 100%;
  }
}

@media screen and (max-width: 719px) {
  .logo_avis:nth-child(3) {
    transform: translate(5rem, -2rem);
  }

  .logo_avis:nth-child(4) {
    transform: translateY(-10rem);
  }

  .logo_avis:nth-child(2) {
    transform: translate(-7rem, -1rem);
  }
  #avis #localisation {
    margin-top: -7rem;
  }
}

/* ==================================================================
						Début Mobile
====================================================================*/

@media screen and (min-width: 700px) and (max-width: 1000px),
  screen and (max-width: 600px) {
  /*----------------------------
    	Présentation
----------------------------*/
  #bloc_info {
    margin-top: 0;
    width: auto;
    max-width: 20rem;
  }

  #bloc_info td {
    width: 100%;
  }

  #bloc_info td a,
  #bloc_info td {
    font-size: 0.67rem;
  }

  #presentation .arrow {
    height: 3.3rem;
    width: 3.3rem;
    top: calc(100% - 7rem);
  }

  #presentation .arrow.prev {
    right: 3.6rem;
  }

  #bloc_info tr:nth-of-type(1) td:nth-of-type(2) .apparition2 {
    transition-delay: 0.95s;
  }
  #bloc_info tr:nth-of-type(2) td:nth-of-type(1) .apparition2 {
    transition-delay: 1.1s;
  }
  #bloc_info tr:nth-of-type(2) td:nth-of-type(2) .apparition2 {
    transition-delay: 1.25s;
  }
  #bloc_info tr:nth-of-type(3) td:nth-of-type(1) .apparition2 {
    transition-delay: 1.4s;
  }
  #bloc_info tr:nth-of-type(3) td:nth-of-type(2) .apparition2 {
    transition-delay: 1.55s;
  }
}

@media screen and (min-width: 700px) {
  .info_chambre.mobile {
    display: none;
  }
}

@media screen and (max-width: 700px) {
  /*----------------------------
    		Header
----------------------------*/

  header span {
    transition: none !important;
  }

  header #burger,
  header #burger::after,
  header #burger::before {
    transition:
      height 0.2s,
      width 0.5s,
      background-color ease-in-out 0.5s 0.2s,
      transform ease-in-out 0.2s !important;
  }

  header #langue span > span {
    transition: color ease-in-out 0.5s 0.2s !important;
  }

  .preload header {
    transform: translateY(-100%);
  }

  header {
    grid-template-rows: repeat(1, 4.8rem);
    transform: translateY(0);
    transition:
      transform 0.5s 0.7s,
      background-position-Y 0.5s ease-in-out 0.2s;
  }

  header ul li {
    width: 4rem;
    height: 4rem;
  }

  .preload #reserver {
    transform: scale(0.8);
    opacity: 0;
  }

  #reserver {
    position: sticky;
    margin-top: calc(-3.1rem);
    top: 6.65rem;
    margin-left: calc(100% - 10rem - 2px);
    border: 1px solid rgb(203, 203, 203);
    background: linear-gradient(
      to bottom,
      white 50%,
      rgba(16, 28, 54, 0.73) 50%
    );
    background-size: 100% 208%;
    background-position-y: 98%;
    transition:
      transform 0.5s 0.7s,
      visibility 0s 0.7s,
      opacity 0.5s 0.7s;
    transform: scale(1);
    opacity: 1;
  }

  .fill#reserver,
  .solid#reserver {
    background-position-y: 2%;
  }

  .preload #banniere > div h1 {
    -webkit-transform: translateX(-30%) scale(0.9);
    transform: translateX(-30%) scale(0.9);
  }

  #modal-contact.visible form #captcha-svg {
  }

  #modal-contact.visible .loader.contact {
  }

  span.loader.contact {
  }
  /*----------------------------
    	Global
----------------------------*/

  section,
  #pageEnvirons section,
  #pageMaison section,
  #pageRestauration section:last-of-type {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  section h2 {
    margin-left: 0 !important;
    font-size: 2.5rem;
    width: 100%;
  }

  /*----------------------------
    	Message erreur
----------------------------*/

  #fond-modal-erreur .modal-erreur p {
    font-size: 1.5rem;
  }

  #fond-modal-erreur .modal-erreur {
    min-width: 22rem;
  }

  /*----------------------------
    	Présentation
----------------------------*/

  #presentation,
  #chambres.reservation {
    padding-top: 7rem;
  }

  #presentation h2 {
    display: none;
  }

  #presentation .relative {
    display: none;
  }

  #bloc_presentation {
    width: auto;
    max-width: initial;
  }

  #parallaxe_text > h3 {
    font-size: 1.6rem;
  }

  #parallaxe_text {
    transform: translate(0);
  }

  #bloc_info {
    margin-top: 0;
    width: 100%;
    max-width: 38rem;
  }

  #parallaxe_text {
    text-align: center;
  }

  /*----------------------------
    		Chambres
----------------------------*/

  #pageHome #chambres .relative,
  #pageEnvirons .relative,
  #pageMaison .relative,
  #pageRestauration .relative {
    padding-top: 1rem;
  }

  #chambres .relative li,
  #pageEnvirons .relative li,
  #pageMaison .relative li,
  #pageRestauration .relative li {
    width: calc(100% - 2rem);
    padding-left: 1rem;
    padding-right: 1rem;
    margin-bottom: 1rem;
  }

  #chambres .mouv .prix > div > div {
    transform: translateY(0) !important;
  }

  #pageHome #chambres .prix > div > div {
    transform: translateY(-100%) !important;
  }

  .prix {
    top: 0;
    height: 4.2rem;
    width: 6.4rem;
  }

  .prix p:first-child {
    padding-left: 0.5rem;
    width: 5rem;
    font-size: 0.8rem;
  }

  .prix p:nth-child(2) {
    font-size: 2rem;
    line-height: 0.75;
  }

  .prix p:last-child {
    font-size: 0.65rem;
  }

  .description_chambre {
    margin-top: -1rem;
    padding: 1rem !important;
    padding-top: 2rem !important;
    padding-bottom: 1.4rem !important;
    width: 100%;
    margin-left: 0rem !important;
  }

  .description_chambre > h3 + p {
    margin-top: 1.14rem;
  }

  #chambres .btn-2,
  #pageEnvirons .btn-2,
  #pageMaison .btn-2,
  #pageRestauration .btn-2 {
    font-size: 95%;
    margin-top: 0.7rem;
    text-align: center;
    width: max-content;
  }

  #chambres .arrow.prev,
  #chambres .arrow.next,
  #pageEnvirons .arrow.prev,
  #pageEnvirons .arrow.next,
  #pageMaison .arrow.prev,
  #pageMaison .arrow.next,
  #pageRestauration .arrow.prev,
  #pageRestauration .arrow.next {
    top: calc(0.5612 * (100vw - 2rem) - 2rem);
  }

  #chambres .arrow.next,
  #pageEnvirons .arrow.next,
  #pageMaison .arrow.next,
  #pageRestauration .arrow.next {
    right: 0;
  }

  #chambres .arrow.prev,
  #pageEnvirons .arrow.prev,
  #pageMaison .arrow.prev,
  #pageRestauration .arrow.prev {
    left: 0;
  }

  /*----------------------------
    Commentaires et avis
----------------------------*/

  #avis > .article {
    justify-content: initial;
  }

  #commentaire {
    width: 92%;
    margin-left: 4%;
    padding: 1rem;
    padding-top: 1rem;
    box-sizing: border-box;
    min-height: 15rem;
    padding-top: 0.5rem;
  }

  #commentaire div:not(:nth-child(1)) {
    width: calc(100% - 2rem);
    height: calc(100% - 2rem);
    top: 1rem;
    left: 1rem;
  }

  #commentaire div p:first-child {
    margin-left: 0;
  }

  .logo_avis:nth-child(2) {
    transform: translateY(-10px);
  }

  .logo_avis:nth-child(4) {
    transform: translate(-0.8rem, 8rem);
    z-index: 10;
  }

  .logo_avis:nth-child(3) {
    transform: translate(1.8rem, -2rem);
    height: 10rem;
  }

  .logo_avis {
    transform: translateY(25px) translateX(0.5rem);
    width: 11rem;
    height: 9rem;
    padding: 1rem 1rem;
  }

  #avis #localisation {
    flex-wrap: wrap;
  }

  #localisation div:first-child {
    width: 70%;
  }

  #avis #localisation {
    margin-top: 7rem;
    margin-bottom: 5rem;
  }

  #localisation div:last-child {
    position: relative;
    width: 100%;
    margin-top: -6rem;
    top: 0;
  }
  /*----------------------------
    	Réservations
----------------------------*/

  #indicateur_avancement p {
    font-size: 3.4vw;
  }

  #indicateur_avancement {
    width: 100%;
  }
  #chambres.reservation .defilement_img {
    width: 100%;
    margin-bottom: 0;
  }

  #chambres.reservation .description_chambre .masquer-mobile {
    opacity: 0;
    overflow: hidden;
    max-height: 0px;
    margin: 0.3rem;
    transform: translateY(-5%) scale(0.8);
    -webkit-transform: translateY(-5%) scale(0.8);
    -webkit-transition:
      -webkit-transform 0.65s cubic-bezier(0.6, 0.2, 0.1, 1),
      opacity 0.65s cubic-bezier(0.6, 0.2, 0.1, 1) 0.1s,
      max-height 0.6s 0.25s,
      padding-bottom 0.6s 0.25s,
      margin 0.6s 0.25s !important;
    transition:
      transform 0.65s cubic-bezier(0.6, 0.2, 0.1, 1),
      opacity 0.65s cubic-bezier(0.6, 0.2, 0.1, 1) 0.1s,
      max-height 0.6s 0.25s,
      padding-bottom 0.6s 0.25s,
      margin 0.6s 0.25s !important;
  }

  #chambres.reservation .description_chambre .masquer-mobile.visible {
    -webkit-transform: translateY(0) scale(1);
    opacity: 1;
    height: auto;
    max-height: 450px;
    padding-bottom: 1.5rem;
    margin: 1rem 0;
    transform: translateY(0) scale(1);
    -webkit-transition:
      -webkit-transform 0.65s cubic-bezier(0.6, 0.2, 0.1, 1) 0.25s,
      opacity 0.65s cubic-bezier(0.6, 0.2, 0.1, 1) 0.25s,
      max-height 0.5s,
      padding-bottom 0.5s,
      margin 0.5s !important;
    transition:
      transform 0.65s cubic-bezier(0.6, 0.2, 0.1, 1) 0.25s,
      opacity 0.65s cubic-bezier(0.6, 0.2, 0.1, 1) 0.25s,
      max-height 0.5s,
      padding-bottom 0.5s,
      margin 0.5s !important;
  }

  .show {
    display: flex;
  }

  .info_chambre.pc {
    display: none;
  }

  .info_chambre.mobile {
    position: initial;
    width: auto;
    border: none;
    box-shadow: none;
    flex-direction: row;
    left: 0;
    padding: 0;
    flex-direction: column;
  }

  .info_chambre.mobile > div:last-child p:last-child {
    margin-bottom: 0;
  }

  /*----------------------------
    Confirmations réservations
----------------------------*/
  #options > div:not(:last-child) {
    margin-bottom: 1.5rem;
  }
  /*----------------------------
    Pages environs
----------------------------*/

  #pageRestauration section:first-of-type,
  #pageEnvirons section:first-of-type {
    padding-top: 7rem;
  }

  #environs-carroussel .article:first-of-type {
    padding-top: 0;
  }

  #pageEnvirons .description_chambre h3 {
    white-space: normal;
  }

  .titre-carroussel p {
    font-size: 2.2vw;
    margin: 0 0.5rem;
    text-align: center;
  }

  #transport p:not(.ex) {
    display: block;
  }

  #environs-carroussel h2,
  #pageRestauration .section-carroussel h2 {
    margin-bottom: 0;
  }

  #transport h2 + div > div {
    transform: translateX(0);
    z-index: 20;
  }

  #transport > div {
    flex-wrap: wrap;
  }

  #transport p span {
    vertical-align: bottom;
  }

  #transport div:nth-child(3) > div:first-child {
    transform: translateY(-0.3rem) translateX(-0.5rem);
    width: 100%;
    z-index: 10;
  }

  #transport div:nth-child(3) > div:last-child {
    transform: translateY(-1.5rem) translateX(6%);
    width: 95%;
    z-index: 10;
  }

  #transport div:nth-child(4) > div:first-child {
    transform: translateY(1rem);
    max-width: 100%;
    width: auto;
  }

  #transport div:nth-child(4) > div:last-child {
    transform: translateY(0.5rem) translateX(-0.5rem);
    max-width: 102%;
    width: auto;
  }

  /*----------------------------
    Pages Restauration
----------------------------*/

  #pageRestauration .description_chambre h3 {
    text-align: center;
  }

  #pageRestauration section:last-of-type {
    padding-top: 3rem;
  }

  /*----------------------------
    Pages Mentions
----------------------------*/

  #pageMentions h1 {
    display: none;
  }

  #pageMentions .article:first-of-type {
    margin-top: 1rem;
  }

  #pageMaison h2 {
    margin-bottom: 0;
  }

  /*----------------------------
    		Footer
----------------------------*/
  footer {
    padding: 2rem 5%;
    padding-bottom: 0.5rem;
    min-height: min-content;
    display: flex;
    align-items: flex-end;
  }

  .footer-left {
    margin-left: 0;
  }

  .wrapper {
    justify-content: center;
  }

  footer p {
    width: 100%;
    font-size: 0.7rem;
    margin: 1rem 0 1rem 0;
    text-align: justify;
  }

  .footer-mobile {
    display: block;
  }
  .footer-pc {
    display: none;
  }

  footer nav {
    position: initial;
  }

  footer nav ul {
    margin: 0;
  }

  footer nav li {
    text-align: right;
  }

  footer nav li:hover {
    transform: translateX(0);
  }

  footer nav {
    margin-top: 1.5rem;
  }
  .container .box--left,
  .active .box--left {
    -webkit-transform: translate(-20px, -20px) rotate(-90deg)
      rotateY(180deg);
    transform: translate(-20px, -20px) rotate(-90deg) rotateY(180deg);
  }
  .container .box--left .ion,
  .active .box--left .ion {
    -webkit-transform: rotate(270deg) rotateY(180deg) translate(-40%, -55%);
    transform: rotate(270deg) rotateY(180deg) translate(-40%, -55%);
  }
  .container .box--left .count,
  .active .box--left .count {
    -webkit-transform: rotate(270deg) rotateY(180deg) translate(-150%, 80%);
    transform: rotate(270deg) rotateY(180deg) translate(-150%, 80%);
  }
  .container .box--middle,
  .active .box--middle {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  .container .box--right,
  .active .box--right {
    -webkit-transform: translate(20px, -20px);
    transform: translate(20px, -20px);
  }
}

@media screen and (min-width: 600px) {
  .modal-svg.mobile {
    display: none;
  }
  .modal-svg.pc {
    display: block;
  }
}

@media screen and (max-width: 635px) {
  /*----------------------------
    		Etape 3
----------------------------*/
  #div-bouton-paiement .loader {
    order: 1;
  }
  #div-bouton-paiement > .flex {
    order: 2;
    flex-wrap: wrap;
  }
}

@media screen and (min-width: 620px) {
  #modal-menu address {
    margin-bottom: 2rem;
  }
}

@media screen and (max-width: 600px) {
  /*----------------------------
    		Header
----------------------------*/
  #modal-date .modal-background .modal {
    width: 300px;
    height: 300px;
    margin-top: 7vh;
  }

  .modal-svg.pc {
    display: none;
  }

  #modal-date .modal-background .modal .modal-svg rect {
    stroke-dasharray: 1202;
    stroke-dashoffset: 1202;
  }

  @keyframes sketchIn {
    0% {
      stroke-dashoffset: 1202;
    }
    100% {
      stroke-dashoffset: 0;
    }
  }
  @keyframes sketchOut {
    0% {
      stroke-dashoffset: 0;
    }
    100% {
      stroke-dashoffset: 1202;
    }
  }

  .data_range {
    width: 75%;
  }

  #modal-date.six .modal-background .modal h5 {
    font-size: 160%;
    padding: 0 2rem;
    margin-top: 1.8rem;
  }

  .six .button span span:first-child {
    font-size: 115%;
    font-weight: 800;
  }

  .six .button .icon-checked:before {
    font-size: 140%;
    margin-right: 2%;
  }

  .six .button .icon-checked {
    margin-top: 0.1rem;
    white-space: nowrap;
  }

  /*----------------------------
    		Bloc présentation
----------------------------*/

  #bloc_info {
    max-width: 24rem;
  }

  #bloc_info td a,
  #bloc_info td ins {
    margin-left: 0.5rem;
  }

  /*----------------------------
    		Avis
----------------------------*/

  #avis > h2 + .article {
    flex-wrap: wrap;
    position: relative;
  }

  .logo_avis:nth-child(2) {
    transform: translateY(-10px);
  }

  .logo_avis:nth-child(3) {
    transform: translate(1rem, -2rem);
    height: 7rem;
  }

  .logo_avis:nth-child(4) {
    transform: none;
    position: absolute;
    top: 22rem;
    left: 2rem;
  }

  .logo_avis {
    width: 9rem;
    height: 7rem !important;
  }
  #localisation div:first-child {
    margin-left: auto;
    transform: translateY(-3rem);
  }
}

@media screen and (max-width: 580px) {
  /*----------------------------
			Etape 2
----------------------------*/

  #etape2 {
    padding: 0.5rem;
  }

  .colonne.gauche {
    width: 100%;
    display: flex;
    margin-right: 0;
    margin-bottom: 1rem;
  }

  #bloc-choix {
    margin-bottom: 1rem;
    width: 100%;
    margin-left: 2.5rem;
    margin-right: 2.5rem;
  }

  #bloc-choix p {
    padding: 1rem 0.5rem;
    margin: 0;
    font-size: 0.9rem;
  }

  .colonne.gauche > div {
    width: 100%;
    height: min-content;
  }

  #recap-reservation {
    margin-bottom: 1rem;
  }

  #etape2 .colonne.droite {
    width: 100%;
  }

  .info-date {
    margin-right: 0;
  }

  #coordonnees {
    padding: 0.5rem 0.5rem;
  }

  #coordonnees #bloc-mail input {
    min-width: calc(95% - 2rem);
    margin-right: 0;
  }

  #coordonnees #bloc-mail .infobulle {
    width: 100%;
  }

  #coordonnees fieldset:first-of-type .infobulle:first-of-type {
    z-index: 10;
  }

  #coordonnees fieldset:first-of-type .infobulle:nth-of-type(2) {
    z-index: 5;
  }

  #coordonnees textarea {
    width: calc(100% - 3rem);
  }

  #finaliser #validation-formulaire {
    padding-right: 0;
  }

  #finaliser #validation-formulaire > div {
    flex-wrap: wrap;
  }

  #finaliser #validation-formulaire > div div {
    margin-bottom: 1rem;
    margin-right: 0;
  }
}

@media screen and (max-width: 500px) {
  /*----------------------------
    	Message erreur
----------------------------*/

  #fond-modal-erreur .modal-erreur {
    min-width: 70vw;
  }

  #reserver {
    width: 8rem;
    height: 2.5rem;
    font-size: 0.7rem;
    margin-top: calc(-2.6rem);
    top: 6.65rem;
    margin-left: auto !important;
    background: linear-gradient(
      to bottom,
      #fff 50%,
      rgba(16, 28, 54, 0.73) 50%
    );
    background-size: 100% 228%;
    background-position-y: 95%;
  }
  #reserver time {
    text-transform: lowercase;
  }

  /*----------------------------
           Modal
----------------------------*/

  #modal-contact #closeModal {
    z-index: 50;
    top: 1rem;
    right: 7%;
  }

  #modal-contact address {
    padding-left: 1rem;
    padding-right: 1rem;
    margin-top: 3rem;
  }

  #modal-contact fieldset .infobulle.grand {
    width: 84vw;
    min-width: initial;
    max-width: 75vw;
  }

  #modal-contact fieldset #captcha-svg {
  }

  #modal-contact .loader.contact {
    transform: scale(0.8) translateY(-130px);
  }

  #modal-contact.visible .loader.contact {
    transform: scale(1) translateY(0);
  }

  #modal-contact.visible form #captcha-svg {
    flex-wrap: wrap;
    max-width: 84vw;
  }

  #modal-contact.visible form #captcha-svg .infobulle.petit {
    order: 2;
  }
  #modal-contact.visible form #captcha-svg svg {
    order: 1;
  }

  #chambres .relative li,
  #pageEnvirons .relative li,
  #pageMaison .relative li,
  #pageRestauration .relative li {
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    margin-left: -1rem;
    margin-right: -1rem;
  }

  /*----------------------------
    Confirmation des réservations
----------------------------*/
  #recapitulatif > div:first-child p:first-child {
    font-size: 4.5vw;
  }

  #recapitulatif > div:first-child p:not(:first-child),
  #recapitulatif > div:first-child button {
    font-size: 3.8vw;
  }

  #recapitulatif > div:last-child button {
    margin-top: 0.5rem;
    height: 2rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .separateur {
    font-size: 7vw;
  }

  #recapitulatif > div:first-child {
    margin-bottom: 1rem;
  }

  #options > div:not(:last-child) {
    margin-bottom: 0.5rem;
  }
  #recapitulatif {
    margin-top: 1rem;
  }

  #commentaire div p:last-child {
    font-size: 0.9rem;
  }

  #commentaire {
    min-height: 17rem;
  }

  #localisation div:first-child {
    width: 100%;
  }

  .logo_avis:nth-child(4) {
    top: 24rem;
  }

  .logo_avis:nth-child(3) {
    transform: translate(1rem, -1.5rem);
    height: 7rem;
  }

  .logo_avis:nth-child(2) {
    transform: translateY(-10px);
    z-index: 8;
  }

  #localisation div:first-child {
    margin-left: auto;
    transform: translateY(4rem) translateX(10px);
  }

  #localisation div:last-child {
    margin-top: 0;
    top: 0;
    padding: 2rem 1rem;
  }

  #chambres.reservation .description_chambre .masquer-mobile.visible {
    max-height: 550px;
  }

  /*----------------------------
    Pages La maison
----------------------------*/

  #bloc-texte address p:first-of-type {
    padding-right: 0.3rem !important;
  }
  #bloc-texte address p:first-of-type > span {
    text-align: left;
    line-height: 1.4;
    padding-bottom: 0.5rem;
    align-items: baseline;
  }

  #bloc-texte address a {
    margin-left: 0.7rem;
  }
  /*----------------------------
    Pages les environs
----------------------------*/
  #pageEnvirons .info-spot p {
    text-align: left;
    line-height: 1.4;
    padding-bottom: 0.5rem;
  }
  .info-spot p span {
    margin-bottom: auto;
  }
  .info_chambre p span {
    margin-right: 0.5rem;
  }
  #transport img {
    width: calc(100% + 2.5rem);
  }
  #transport .ligne img {
    width: calc(100% + 1.5rem);
  }
  #transport > div:last-child > div:first-child a:first-child {
    margin-right: 2rem;
  }
}

@media screen and (max-width: 450px) {
  #modal-menu p {
    max-width: 100vw;
    box-sizing: border-box;
  }
  #modal-menu li a,
  #modal-menu p span {
    padding-right: 0.8rem;
  }
  #modal-menu p span {
    display: flex;
    align-items: baseline;
    padding-left: 0.8rem;
    white-space: nowrap;
  }
  #modal-menu p a {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: 78vw;
    box-sizing: border-box;
    padding-right: 1rem;
    padding-left: 0.3rem;
  }
  #modal-contact address > div > p {
    font-size: 3.7vw;
  }

  #modal-contact address p span:first-child:not(.surlignement) {
    margin-right: 3vw;
    font-size: 4vw;
  }

  #chambres .arrow.next,
  #pageEnvirons .arrow.next,
  #pageMaison .arrow.next,
  #pageRestauration .arrow.next {
    right: -0.5rem;
  }

  #chambres .arrow.prev,
  #pageEnvirons .arrow.prev,
  #pageMaison .arrow.prev,
  #pageRestauration .arrow.prev {
    left: -0.5rem;
  }

  #banniere h1 {
    font-size: 2.3rem;
  }

  section h2 {
    font-size: 2.3rem;
  }

  #chambres .arrow.prev,
  #chambres .arrow.next {
    top: calc(0.5612 * (100vw - 4rem) - 2rem);
    height: 3.5rem;
    width: 3.3rem;
  }

  #pageMaison .arrow.prev,
  #pageMaison .arrow.next,
  #pageRestauration .arrow.prev,
  #pageRestauration .arrow.next,
  #pageEnvirons .arrow.prev,
  #pageEnvirons .arrow.next {
    top: calc(0.5612 * (100vw + 1rem) - 2rem);
    height: 3.5rem;
    width: 3.5rem;
  }

  .titre-carroussel {
    flex-wrap: wrap;
  }

  .titre-carroussel p {
    font-size: 3.3vw;
    margin-bottom: 2.5vw;
    text-transform: initial;
    font-weight: 100;
  }

  #pageMaison .titre-carroussel p,
  #pageRestauration .titre-carroussel p {
    font-size: 4vw;
  }

  .titre-carroussel + .carroussel {
    margin-top: 0.3rem;
  }

  [include*="form-input-select()"] select {
    font-size: 0.75rem;
  }

  /*----------------------------
    		Etape 2
----------------------------*/

  #coordonnees textarea {
    min-height: 4rem;
  }

  #coordonnees .textarea .form-label {
    font-size: 0.9rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 85%;
  }

  #coordonnees .flex {
    padding-left: 0.5rem;
  }

  #coordonnees .textarea.form-group {
    margin-left: 0.5rem;
  }

  #coordonnees #bloc-mail .form-group {
    min-width: 80%;
  }

  /*----------------------------
    		Etape 3
----------------------------*/
  #facturation {
    min-width: 100%;
  }

  #confirmation p {
    font-size: 2rem;
  }
}

@media screen and (max-width: 445px) {
  #modal-contact fieldset #captcha-svg svg {
    margin-bottom: 0.5rem;
  }
}

/* @media screen and (max-width: 415px) {
  #paiement .flex > div {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
} */

@media screen and (max-width: 400px) {
  #cookie {
    min-width: 250px;
  }
  .qs-datepicker-container {
    left: 50% !important;
    transform: translateY(1%) translateX(-50%) !important;
  }
  header #logo img {
    height: 4rem;
  }
  #div-bouton-paiement > .flex img {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  #modal-menu p {
    font-size: 4.5vw;
    margin-bottom: 0.2rem;
  }
  #modal-menu li {
    font-size: 185%;
  }
  #modal-menu li {
    margin-bottom: 0.8rem;
  }
  #modal-menu address {
    margin-bottom: 54px;
  }
  #validation-commande > form {
    padding: 1rem;
  }
}

@media screen and (max-width: 377px) {
  #div-bouton-paiement > .flex {
    padding-left: 0;
  }
}

@media screen and (max-width: 370px) {
  #banniere h1 {
    font-size: 9.5vw;
  }

  section h2 {
    font-size: 2rem;
  }

  .logo_avis {
    width: 37vw;
  }

  #pageChambres section {
    padding-left: 0.6rem !important;
    padding-right: 0.6rem !important;
  }

  #pageRestauration section {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  #coordonnees .form-label {
    width: max-content;
  }
  #coordonnees input:not(#phoneInput) {
    max-width: 65vw;
  }
}