@CHARSET "UTF-8";
#reservation-centre {  margin: 20px 0 50px; display: -webkit-box;  display: -ms-flexbox;  display: flex;  -ms-flex-wrap: wrap;  flex-wrap: wrap;  -webkit-box-pack: justify;  -ms-flex-pack: justify;  justify-content: space-between;  -webkit-box-align: start;  -ms-flex-align: start;  align-items: flex-start;  -webkit-box-orient: horizontal;  -webkit-box-direction: reverse;  -ms-flex-direction: row-reverse;  flex-direction: row-reverse;}

#reservation-preview {width:540px; background:#e9f3f6; border-radius:20px; box-sizing: border-box; padding: 25px;}
#reservation-centre.scrollable #reservation-preview { position: fixed;  top: 110px;  z-index: 200;}
#reservation-preview .resume {display:none;}
#reservation-preview .appartement { border-bottom: 1px solid #8cb4bd; padding-bottom: 28px; margin-bottom: 28px; display: -webkit-box;  display: -ms-flexbox;  display: flex;  -ms-flex-wrap: wrap;  flex-wrap: wrap;  -webkit-box-pack: justify;  -ms-flex-pack: justify;  justify-content: space-between;  -webkit-box-align: stretch;  -ms-flex-align: stretch;  align-items: stretch;}
#reservation-preview .photo { }
#reservation-preview .photo img {width:100%; height:auto; border-radius:20px; display:block;}
#reservation-preview .description { margin-left:28px; flex: 1;   padding: 20px 0;  display: -webkit-box;  display: -ms-flexbox;  display: flex;  -ms-flex-wrap: wrap;  flex-wrap: wrap;  -ms-flex-pack: distribute;  justify-content: space-around;  -webkit-box-align: start;  -ms-flex-align: start;  align-items: flex-start;  -webkit-box-orient: vertical;  -webkit-box-direction: normal;  -ms-flex-direction: column;  flex-direction: column; }
#reservation-preview .description .surface {color: #669eaa; font-size: 14px; font-weight: 300;}
#reservation-preview .description .nom {color: #005567; font-size: 16px; font-weight: 400;}
#reservation-preview .description .emplacement {color: #1bb4db; font-size: 17px; font-weight: 300;}
#reservation-preview .description .voir {color: #1bb4db; font-size: 17px; font-weight: 300;}
#reservation-preview .description .voir a,
#reservation-preview .description .voir a:visited {text-decoration:none; border-bottom: 1px solid #1bb4db;}

#reservation-preview .tarif-details {border-bottom: 1px solid #8cb4bd; padding-bottom: 58px; margin-bottom: 28px; }
#reservation-preview .tarif-details .titre {color: #005567; font-size: 20px; font-weight: 400;}
#reservation-preview .tarif-details .details {color: #005567; font-size: 15px; font-weight: 300;}
#reservation-preview .tarif-details .detail {margin: 10px 0; display: -webkit-box;  display: -ms-flexbox;  display: flex;  -ms-flex-wrap: wrap;  flex-wrap: wrap;  -webkit-box-pack: justify;  -ms-flex-pack: justify;  justify-content: space-between;  -webkit-box-align: center;  -ms-flex-align: center;  align-items: center;}

#reservation-preview .total {display: -webkit-box;  display: -ms-flexbox;  display: flex;  -ms-flex-wrap: wrap;  flex-wrap: wrap;  -webkit-box-pack: justify;  -ms-flex-pack: justify;  justify-content: space-between;  -webkit-box-align: center;  -ms-flex-align: center;  align-items: center;}
#reservation-preview .total .label {color: #005567; font-size: 15px; font-weight: 500;}
#reservation-preview .total .prix {color: #005567; font-size: 15px; font-weight: 300;}

#reservation-contenu {margin-right:35px;  margin-bottom: 45px; flex:1;}
#reservation-centre.scrollable #reservation-contenu {  margin-right: 575px;}
#reservation-contenu h1 {margin-bottom: 30px;}
#reservation-contenu .form-step {border-bottom: 1px solid #77a4ae; padding-bottom: 28px; margin-bottom: 28px;}
#reservation-contenu .form-step label {color: #005567; font-size: 15px; font-weight: 400;}
#contenu #reservation-contenu .form-step input {border:none; color: #669eaa; font-size: 15px; font-weight: 300;  font-family:"Poppins", Arial; background: #e9f3f6; border-radius: 5px; height: 37px; box-sizing: border-box;  padding: 6px 8px 6px 15px;}

#reservation-contenu .form-step input::-webkit-input-placeholder {opacity:1; color: #669eaa; font-size: 14px; font-weight: 300;  font-family:"Poppins", Arial; }
#reservation-contenu .form-step input::-moz-placeholder {opacity:1; color: #669eaa; font-size: 14px; font-weight: 300;  font-family:"Poppins", Arial; }
#reservation-contenu .form-step input:-ms-input-placeholder {opacity:1; color: #669eaa; font-size: 14px; font-weight: 300;  font-family:"Poppins", Arial; }
#reservation-contenu .form-step input:-moz-placeholder {opacity:1; color: #669eaa; font-size: 14px; font-weight: 300;  font-family:"Poppins", Arial; }

#reservation-contenu .reservation-ligne {  margin: 15px 0; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start;}
#reservation-contenu .reservation-ligne > div {  margin: 10px 0 0;}

#reservation-contenu #form-step-1,
#reservation-contenu #form-step-2  {padding-bottom: 8px;}
#reservation-contenu #reservation-dates > div {  margin: 10px 40px 10px 0;}
#reservation-contenu #reservation-dates label { display:block;  margin-bottom: 3px;}
#contenu #reservation-contenu #reservation-dates input {padding:0 10px;  height: auto;   width: 150px; font-size: 15px;  background: none;   box-shadow: 0 0 5px #e9f3f6;}
#contenu #reservation-contenu #reservation-dates img {  margin-left: 5px !important; content:url('../images/calendar.svg');  width: 15px; height: 15px;  filter: invert(87%) sepia(10%) saturate(1990%) hue-rotate(163deg) brightness(103%) contrast(101%);}

#reservation-contenu .reservation-ligne .number {  margin-left: 20px; display: -webkit-inline-box;  display: -ms-inline-flexbox;  display: inline-flex;  -ms-flex-wrap: wrap;  flex-wrap: wrap;  -webkit-box-pack: center;  -ms-flex-pack: center;  justify-content: center;  -webkit-box-align: center;  -ms-flex-align: center;  align-items: center;  }
#reservation-contenu .reservation-ligne .number .adder_control,
#reservation-contenu .reservation-ligne .number .adder_control:visited { color: #fff;  text-decoration: none;   line-height: 19px; width: 19px; height: 19px; background:#1bb4db; border-radius: 60px; display: -webkit-box;  display: -ms-flexbox;  display: flex;  -ms-flex-wrap: wrap;  flex-wrap: wrap;  -webkit-box-pack: center;  -ms-flex-pack: center;  justify-content: center;  -webkit-box-align: center;  -ms-flex-align: center;  align-items: center;}  
#contenu #reservation-contenu .reservation-ligne .number input {width: 35px;   padding: 0;  background: #fff;  text-align: center;}

#reservation-contenu .reservation-colonne1 { width: 335px; margin-right: 50px;}
#reservation-contenu .reservation-colonne2 {flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start;}

#reservation-contenu #container-enfants {  margin-left: 40px; flex: 1;  display: -webkit-inline-box;  display: -ms-inline-flexbox;  display: inline-flex;  -ms-flex-wrap: wrap;  flex-wrap: wrap;  -webkit-box-pack: start;  -ms-flex-pack: start;  justify-content: flex-start;  -webkit-box-align: start;  -ms-flex-align: start;  align-items: flex-start; }
#reservation-contenu #container-enfants input {width: 117px; margin: 0 25px 15px 0; padding: 6px 8px 6px 10px;}
#reservation-contenu #container-enfants input:nth-child(2n+2) {margin-right: 0;}

#reservation-contenu #reservation-chiens > div {margin:0;}
#reservation-contenu #reservation-chiens .reservation-colonne1 { min-height: 37px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center;}
#reservation-contenu #reservation-chiens .reservation-colonne1 .radio-spe-conteneur {   margin: 0 0 0 15px;}

#reservation-contenu #container-chiens { margin-left: 36px; flex: 1;}
#reservation-contenu #container-chiens input {width: 100%;}

#reservation-contenu #reservation-coordonnees > div {margin:0; width: 100%;}
#reservation-contenu #reservation-coordonnees input {margin:10px 15px 10px 0;}

#reservation-contenu .checkbox-spe-conteneur { margin: 10px 0;}
#reservation-contenu .checkbox-spe-conteneur label {display: -webkit-inline-box;  display: -ms-inline-flexbox;  display: inline-flex; color: #005567; font-weight: 300; font-size: 17px;   -webkit-box-align: start; -ms-flex-align: start;  align-items: flex-start;}
#reservation-contenu .checkbox-spe-conteneur label .coche {  margin: 7px 7px 0 0;}
#reservation-contenu .checkbox-spe-conteneur label .nom { width:auto; flex:1; }
#reservation-contenu .checkbox-spe-conteneur a,
#reservation-contenu .checkbox-spe-conteneur a:visited {color: #005567;}

#reservation-contenu .bouton {width:100%; background:#1bb4db; color: #ffffff; font-weight: 300; font-size: 17px; min-height: 66px; margin: 25px 0 15px;}

#reservation-texte-final {color: #1bb4db; font-weight: 300; font-size: 17px;}

#reservation-paiement {display:none;}

@media all and (max-width:1490px) {
    #reservation-preview {   width: 480px;}
    #reservation-preview .photo {width: 190px;}
    #reservation-preview .description {  padding: 10px 0;}
    #reservation-centre.scrollable #reservation-contenu {  margin-right: 515px;}
}

@media all and (max-width:1430px) {
    #reservation-preview {   width: 400px;}
    #reservation-preview .photo {  margin: 0 auto; width: 100%; max-width: 222px;}
    #reservation-preview .description { width:100%;  display: block; margin-left: 0; flex: unset;  text-align: center;}
    #reservation-preview .description .surface {  margin-bottom: 10px;}
    #reservation-preview .description .voir {margin-top:10px;}
    #reservation-centre.scrollable #reservation-contenu {  margin-right: 435px;}
}

@media all and (max-width:1350px) {
    #reservation-preview {   width: 350px;   padding: 25px 20px;}
    #reservation-centre #reservation-contenu {  margin-right: 25px;}
    #reservation-centre.scrollable #reservation-contenu {  margin-right: 375px;}
}

@media all and (max-width:1290px) {
    #reservation-contenu #container-enfants,
    #reservation-contenu #container-chiens {margin-left:0; margin-top: 5px; width: 100%; flex: unset; }
    #reservation-contenu #container-enfants input:nth-child(2n+2) {margin-right: 25px;}
}

@media all and (max-width:1045px) {
    #reservation-contenu #container-enfants input {  margin: 0 15px 11px 0;}
    #reservation-contenu #container-enfants input:nth-child(2n+2) {margin-right: 15px;}

    #reservation-contenu #reservation-coordonnees > div { width: 100%; display: -webkit-box;  display: -ms-flexbox;  display: flex;  -ms-flex-wrap: wrap;  flex-wrap: wrap;  -webkit-box-pack: justify;  -ms-flex-pack: justify;  justify-content: space-between;  -webkit-box-align: center;  -ms-flex-align: center;  align-items: center; }
    #reservation-contenu #reservation-coordonnees input {  width: calc(50% - 9px);}
    #reservation-contenu #reservation-coordonnees input:nth-child(2n+2) {margin-right: 0;}
}

@media all and (max-width:1010px) {
    #reservation-contenu #reservation-dates > div {  margin: 10px 20px 10px 0;}
    #reservation-contenu .reservation-colonne2 {flex: unset;  margin-top: 10px !important;}
    #reservation-contenu #container-enfants, 
    #reservation-contenu #container-chiens {flex: 1; margin-left: 20px; margin-top: 0; }
    #reservation-contenu #container-enfants input:nth-child(2n+2) {margin-right: 0;}

    #reservation-contenu #reservation-personnes label,
    #reservation-contenu #reservation-chiens .reservation-colonne1 > label,
    #reservation-contenu #reservation-chiens .reservation-colonne2 label {  width: 180px;  display: inline-block;   vertical-align: middle;}
    #reservation-contenu #reservation-chiens .reservation-colonne1 > label {  margin-right: 12px;}
}

@media all and (max-width:925px) {
    #reservation-preview { width: 320px;  padding: 20px 15px;  }
    #reservation-preview .tarif-details {  padding-bottom: 28px;}
    #reservation-preview .tarif-details .titre {font-size:18px;}

    #reservation-centre.scrollable #reservation-contenu {  margin-right: 345px;}
}

@media all and (max-width:895px) {
    
    #reservation-contenu #reservation-dates > div { margin: 10px 20px 10px 0;}
    
    #reservation-contenu #container-enfants, 
    #reservation-contenu #container-chiens {margin-left:0; margin-top: 5px; width: 100%; flex: unset; }
    #reservation-contenu #container-enfants input:nth-child(2n+2) {margin-right: 15px;}

}

@media all and (max-width:805px) {
    #reservation-contenu #reservation-coordonnees input { margin: 10px 0;  width: 100%;}
}

@media all and (max-width:780px) {
    #reservation-centre { -webkit-box-orient: vertical;   -webkit-box-direction: normal;   -ms-flex-direction: column;   flex-direction: column;}
    #reservation-centre #reservation-preview {width: 100%;  box-sizing: border-box;} 
    #reservation-centre.scrollable #reservation-preview {  width: calc(100% - 40px);}

    #reservation-preview {padding: 15px;}
    #reservation-preview .resume { padding: 0 0 10px; margin-bottom: 10px; cursor:pointer; display: -webkit-box;  display: -ms-flexbox;  display: flex;  -ms-flex-wrap: wrap;  flex-wrap: wrap;  -webkit-box-pack: justify;  -ms-flex-pack: justify;  justify-content: space-between;  -webkit-box-align: start;  -ms-flex-align: start;  align-items: flex-start; }
    #reservation-preview .resume span {color: #005567; flex:1; font-size: 16px; margin-right: 15px;}
    #reservation-preview .resume i { color: #1bb4db; font-size: 25px;}
    #reservation-preview .resume.visible i::before  {content:"\f107";}
    #reservation-preview .appartement {}
    #reservation-preview .photo {width: auto; margin: 0;}
    #reservation-preview .description {width: auto; flex: 1; text-align: left;  margin-left: 28px;   padding: 20px 0; display: -webkit-box;  display: -ms-flexbox; display: flex;}
 
    #reservation-preview .container{display:grid; grid-template-rows:0fr;  overflow:hidden; transition : grid-template-rows 400ms; }
    #reservation-preview .container.visible { grid-template-rows:1fr;}
    #reservation-preview .centre {min-height:0;}
    

    #reservation-centre #reservation-contenu,
    #reservation-centre.scrollable #reservation-contenu {flex: unset; margin:0; width:100%;} 
}

@media all and (max-width:580px) {
    #reservation-preview .photo {width: 190px;}
    #reservation-preview .description {  padding: 10px 0;}

    #reservation-contenu .checkbox-spe-conteneur label {  font-size: 16px; }
    #reservation-contenu .bouton {  font-size: 16px;  min-height: 50px;}
}

@media all and (max-width:500px) {    
    #reservation-preview .photo {  margin: 0 auto; width: 100%; max-width: 222px;}
    #reservation-preview .description { width:100%;  display: block; margin-left: 0; flex: unset;  text-align: center;}
    #reservation-preview .description .surface {  margin-bottom: 10px;}
    #reservation-preview .description .voir {margin-top:10px;}
}

@media all and (max-width:500px) { 
}

@media all and (max-width:480px) {   
    #reservation-preview .appartement,
    #reservation-preview .tarif-details {  padding-bottom: 20px;  margin-bottom: 20px;}
}

@media all and (max-width:350px) {   
    #reservation-contenu #reservation-chiens .reservation-colonne1 > label {width: 100%;  margin: 0 0 10px;}

    #reservation-contenu .checkbox-spe-conteneur label {  font-size: 15px; }
    #reservation-contenu .bouton {  font-size: 15px; }
}