@font-face {
  font-family: "Montserrat";
  src: url('../fonts/Montserrat-Regular.ttf');
  font-weight: 400;
  font-style: normal;
}

@font-face {
font-family : "Montserrat";
src : url('../fonts/Montserrat-Bold.ttf');
font-weight: 700;
font-style: normal;
}

@font-face {
  font-family : "Montserrat";
  src : url('../fonts/Montserrat-Light.ttf');
  font-weight: 200;
  font-style: normal;
  }

  @font-face {
    font-family : "MontserratAlternates";
    src : url('../fonts/MontserratAlternates-Bold.ttf');
    font-weight: 700;
    font-style: normal;
    }


input:focus:invalid {
  box-shadow: none;
}

.centrer {
  text-align: center;
}

.MontserratANoir {
  color :black;
  font-family: "MontserratAlternates";
  font-weight: 700;
}

.MontserratABlanc {
  color :white;
  font-family: "MontserratAlternates";
  font-weight: 700;
}

.MontserratBlanc {
  color :white;
  font-family: "Montserrat";
  font-weight: 400;
}

.MontserratNoir {
  color :black;
  font-family: "Montserrat";
  font-weight: 400;
}
body, html { overflow-x:hidden; }

body {
  max-width : 100%;
  overflow-x: hidden ;
  background-color: #fff;
  font-family: "Montserrat";
  font-weight: 400;
  color : rgb(0,0,0);
}

.margin-centrer {
  text-align: center;
}

.aere {
  margin : 5% 0 !important;
}

.aere-min {
  margin : 5% 0;
}


.aere2 {
  margin : 5% 5%;
}

.aere-top {
  margin-top : 8%;
}

.aere-top-min {
  margin-top : 1%;
}

.bloc-choix {
  padding : 0.5rem;
  display: inline-block;
  margin-left : 20px;
  position: relative;
  }

  .bloc-ou {
    position:absolute;top:50%;left:50%;
    transform:translate(-30px ,-30px); font-weight:600;height : 50px; width : 50px; 
    background-color:#ddd; border-radius : 80px; padding:10px;
  }

  @media (min-width : 1700px) {
    .bloc-ou {
      position:absolute;top:50%;left:50%;
      transform:translate(-45px ,-45px); font-weight:600;height : 80px; width : 80px; 
      background-color:#ddd; border-radius : 80px; padding:14px;
      text-align: center;
      font-size : 25px;
    }

    .boutons-simulation img {
      margin-left: 4vw;
      width : 2vw; 
      height:auto;
      }
  }

  @media (max-width : 763px) {
    .bloc-ou {
      position:relative;top:50%;left:50%;
      transform:translate(-30px ,-30px); font-weight:600;height : 50px; width : 50px; 
      background-color:#ddd; border-radius : 80px; padding:10px;
      margin : 10px; 
    }
  }

  .bloc-container {
    padding : 2rem;
    display: inline-block;
    margin-right: 20px;
  }

  .bloc-container2 {
    padding : 4rem 2rem;
    display: inline-block;
    margin-right: 20px;
  }

  .title {
    background-color:rgb(243,243,243); color :rgb(104,102,102);height : 120px; position :relative; width : 100%; margin : 0; text-align :center; padding : 0;
  }

  .couleur1 {
 background-color : #eee;
  }

  .couleur2 {
    background-color : #E3F0D9;
  }

  .border-left-green {
    border-left : 3px solid #26A935;
  }

  .border-black {
    border : 1px solid black;
  }

  .bloc-choix:hover {
  background-color: #d0d0d0;
  cursor: pointer;
  }

  .bloc-choix input[type=file] {
    left: 0;
    top: 0;
    opacity: 0;
    position: absolute;
    font-size: 90px;
  }

  .chambre-type, .simulation, .lemur, .BAT {
    display: none;
  }

  .BAT > *  {
      vertical-align: middle;
      line-height: normal;
    
  }


    .chambre-type a img:hover {
      cursor: pointer;
      border : 3px solid #f2c037;
    }

    .chambre-type a:visited img {
      border : 3px solid #f2c037;
    }

    #representationMur {
      background-color : #fff;
      position: relative;
      margin : 0;
      margin-left: -4px ;
      padding : 0;
      overflow: hidden;
      display: inline-block;
      vertical-align: middle;
    }

    #containerMur:before {
      content: "";
      display: inline-block;
      vertical-align: middle;
      height: 100%;
      padding : 0 ;
      margin : 0;
      width : 0;
    }

    .buttonMatoile {
      background : black;
      color : white;
      padding : 12px;
      margin : 5px;
    }


    #myCarousel {
      width: 100%; 
      margin : 0;
      padding : 0;
      height : 100%;
  }

  .carousel-item {
    height : 100%;
    margin : 0;
    padding : 0;
  }

  .padding {
    padding : 10px;
  }

  h5.white {
    color : white !important;
  }

  h4.white {
    color : white !important;
  }

  .fullwidth {
    width : 100%;
    display: block;
  }

  small {
    color:white;
  }
  .separation {
    border-right : 1px solid grey;
  }

  footer {
    margin : 0;
    padding : 10px;
  }

  .moyens img {
    height : 50px;
    width : auto;
  }

  .aere3 {
    margin : 30px 0px;
  }

  .aere4 {
padding-top : 40px;
  }

  .background-white {
    background-color: white;
  }

  .background-grey {
    background-color: rgb(190, 190, 190);
  }

  #mmGal {
    position: relative;
    margin: 0 auto;
    width: 500px;
    height: 220px;
    overflow: hidden;
    background: #eee;
  }
  
  #dogPic {
    display: block;
  }

  .vignette img {
    width : 50px;
    height: 50px;
  }

  #blocPanierAchat {
    z-index : 10000;
    position : fixed;
    width : 300px;
    top: 0px;
    background-color: black;
    color: white;
    right : -300px;
  }

  .table-articles td, th {
padding : 5px;
  }

  .number-style {
    width:2em;
  }

  .hidden {
    display : none;
  }

  .indication-footer {
   font-size : 1.1em;
font-weight : 700;
color :white;
  }

  .indication-footer-vert {
    font-size : 0.8em;
 font-weight : 700;
 color :rgb(116,179,66);
   }

  .precision-footer{
    font-size : 0.7em;
    color :rgb(150,150,150);
   }

   .precision-footer a{
    font-size : 1em;
    color :rgb(150,150,150);
   }

   .precision-footer-grand {
    font-size : 1.1em;
    color :rgb(150,150,150);
   }

   .precision-footer-middle {
    font-size : 0.9em;
    color :rgb(150,150,150);
   }

   .petit-espace {
     margin : 0;
     padding : 0;
    line-height: 19px;
   }

   .vignette-grande {
     width : 280px;
     height : 220px;
     margin-right : 8px;
     opacity : 0.5;
   }

   .vignette-unsplash {
    width : 120px;
    height : 95px;
    margin-right : 8px;
    opacity : 0.7;
  }

   .input-dimensions {
     height : 40px;
     width : 60%;
     border : none
   }

   .vignette-preview {
    position:absolute;z-index : 10000;left : 0;top:0; width : 85px;
   }

   .vignette-preview2 {
   width : 85px;
   height:auto;
   }

   .slideinfos {
     width : 9vw;
     height: auto;
     margin-right : 1vw;
   }

  a .simu-apercu:hover {
   
      cursor : pointer;
     
  }

  a .simu-apercu {
margin : 5px 0;
}

  .bloc-unsplash {
    width: 650px;
    visibility: hidden;
    position : fixed;
    left : 50%;
    top : 20%;
    transform : translateX(-250px);
    z-index : 10000;
    padding : 2%;
    background-color: black;
    color :white;
    overflow-y : auto;
    height : 400px;
  }

@media screen and (max-width: 600px) {
.bloc-unsplash {
    width: 350px;
    visibility: hidden;
    position : fixed;
    left : 50%;
    top : 20%;
    transform : translateX(-173px);
    z-index : 10000;
    padding : 2%;
    background-color: black;
    color :white;
    overflow-y : auto;
    height : 400px;
  }

}


  #liste-images {
    padding : 8px;
  }

  #liste-images a {
    margin : 5px;
    display : inline-block;
  }

  #bloc-pagination {
    margin : 5px;
  }

  #bloc-pagination a {
display : inline-block;
  }

  .img-ellipse {
      clip-path:ellipse(50% 50%);
   
  }

  .liste-commandes {
    padding : 15px;
  }

  .liste-commandes li > div {
  display: inline-block;
  border : 1px solid #d0d0d0;
  padding : 15px;
  margin : 15px;
  }

  @keyframes slidein {
  
    to {
      right : 0;
    }
  }

  @keyframes slideout {

    to {
      right : "-300px";
    }
  }
  
  #closePanier:hover {
    cursor: pointer;
  }

  .carousel-control-prev
{
      left: -4%;
}
.carousel-control-next {
  right: -4%;
}

#myCarouselSlides .carousel-control-prev
{
      left: -5%;
}
#myCarouselSlides .carousel-control-next {
  right: -5%;
}

.carousel.slide {
padding : 0;
margin : 0;
}

.carousel-inner {
  padding : 0;
}


.carousel-item .img-fluid {
  width:100%;
  height:100%;
}

.eye {
  position: absolute;
  display: inline-block;
  opacity : 0;
  left : 50%;
  top : 50%;
  width : 54px;
  height : 54px;
  transform: translate(-25px ,-25px);
  background-image: url("../images/eye.png");
  z-index: 10000;
}

.multiple:hover > .eye {
  opacity : 1;
}


.slider.presentation {
  width : 100%!important;
  margin : 0 !important;
  padding : 0 !important;
}

.slider.presentation {
  width: 100%!important;
  margin : 0 !important;
  padding : 0 !important;
  height:auto;
}


.boutons-simulation {
  position: absolute;
  top : 95px;
  left : 29vw;
}

.boutons-simulation img {
margin-left: 4vw;
width : 2vw;height:auto;
}

.container-fluid {
  width : 100%;
  padding : 0;
  margin : 0;
}

.liste-infos-toile {
  list-style-type : none;
}

.liste-infos-toile li{
padding : 4px;
}

.check-circle-center {
  position : absolute;
  left : 50%;
  top : 50%;
  transform : translate(-19px, -19px);
  background-image: url("../images/check-circle.png");
  background-size: 39px 39px;
  width: 39px;
  height : 39px;
  visibility: hidden;
}

.creation {
  padding : 12px;
  background : #FFF;
  border : 1px solid black;
  font-size : 0.7em;
  color : black;
  display: inline-block;
  margin-left : 20px;
  font-weight : 700;
  font-family: "Montserrat";
}

.btn.btn-outline-dark:hover{
  background-color: #efffa6 !important;
}

.creation:hover {
text-decoration: none;
background-color: #efffa6;
color: black;
}

.banniere {
  background-color: #26A935; 
  text-align: center;
   padding: 35px 0px;
   font-size : 2em;
}

.carre {
  margin : 5px ;
  position:relative; 
  padding : 3px 15px; 
  border : 1px solid black;
  text-align :center;
  display: inline-block;
  vertical-align: top;
}

.panier-header {
  margin : 5px ;
  position:relative;
  display: inline-block;
}

.form-search {
  background-color: #F3F3F3;
  display: inline-block;
  padding : 5px 15px 5px 5px;
  width : 20vw;
}

.input-search {
background-color: #F3F3F3 !important;
border: none;
height : 35px;
width : 16vw;
}

.navbar-brand img {
  width : 25vw;
  height : auto;
}

.logo-pied {
  width : 35vw;
  height :auto;
}

.cert-reseaux > [class*='col-'] {
  padding-right:0;
  padding-left:0;
  margin-right : 0;
  margin-left : 0;
}

.xsonly {
  display: none;
}

.bouton-suivant {
  width:auto; height: 100%;
}

.simulation-suivant {
  padding : 0 2vw;
}


.mt-6 {
  margin-top: 20px !important;
}



@media (max-width: 962px) { 

  .boutonOrdi {
    display: none;
    }

  .pchidden {
    display: block;
    margin-bottom : 20px;
  }


  .simulation-suivant {
    font-size: 0.8em;
  }

  .boutons-simulation {
    left : 22vw;
    top : 65px;
  }

  
  .boutons-simulation > img {
    width : 6vw;
    height : auto;
  }

h2 {
  font-size : 1.5em;
}



.creation {
  display: block;
  background : transparent;
  border :none;
  margin : 0;
  padding : 0px;
  margin-top : 5px;
}

.navbar {
  padding : 5px 5px 10px 5px;
}

.MontserratBlanc.bandeau {
  display:block;
}

.creation span {
  display :inline-block;
  background-color: #FFF;
  padding : 5px 10px;
}

.banniere {
  padding : 5px 10px;
  font-size: 1.3em;
}

.navbar-brand img {
  width : 36vw;
  height : auto;
}


.carre.tel {
  display: none;
}

.carre {
  padding : 11px 11px;
  margin : 0px;
}

.cert {
  display: none;
}

.contenu-responsive {
  display: none;
}

.lien-panier {
width : 42px;
overflow: hidden;
display: block;
height : 45px;
}

.panier-header {
  border : 2px solid #26A935;
}
.panier-header img {
margin-left : -14px;
margin-top : -14px;
 
}

.navbar  div {
  margin : 0;
  
}

.bandeau-gauche {
  display: inline-block;
  padding-top : 10px;
}

.form-search {
  background-color: #FFF;
width : 1vw;
text-align: right;
padding : 0;
padding-top: 3vh;
margin : 0;
display:flex;
flex-direction: row;
}

.xsonly {
  display: inline-block;
  vertical-align: middle;
  height : 50px;
  margin-right : 5px;
}

.form-search {
display: none;
}

.navbar-toggler {
  margin:0;
  vertical-align: top;
  height : 50px;
}

.choix-image-unsplash {
  text-align: center !important;
}

}


 @media (min-width: 963px) and ( max-width : 1400px) { 

  .pchidden {
    display : none;
  }

  
  .lien-panier {
    width : 42px;
    overflow: hidden;
    display: block;
    height : 50px;
    margin-left : -5px;
    margin-top : -5px;
    border :2px solid #26A935;
    }

    .lien-panier  img {
      margin-left : -14px;
      margin-top : -14px;
    }
    .carre {
      padding : 11px 11px;
      margin : 0px;
    }

    .contenu-responsive {
      display: none;
    }

    .boutons-simulation img {
      margin-left: 4vw;
      width : 3vw;height:auto;
      }
 }

 .vignette-simulation {
position : relative; 
width : 85px;
display: inline-block;
vertical-align :top;
 }






 /* media screen footer */

 @media (max-width : 767px) {

  .boutonOrdi {
  display: none;
  }

  h1 {
    font-size : 1.5em;
  }

  .title {
    height : 80px;
  }
  h2 {
    font-size : 1.3em;
  }

  h3 {
    font-size : 1.2em;
  }

  select {
    border : 1px solid #ddd !important;
    padding : 10px !important;
    width : 100% !important;
  }

  .vignette-preview {
    position:absolute;z-index : 10000;left : 0;top:0; width : 325px;
   }

 
  .vignette-simulation {
    position : relative; 
    display: inline-block;
    width : 327px;
    padding : 0;
    margin: 0 auto;
     }

  .style-reseau {
  width: 70%;
  height: auto;
  }

  .footerbloc1 {
  text-align: center !important;
  padding : 10px;
  }

  .widthBloc1 {
    width : 300px;
  }

  .widthBloc2 {
    width : 300px;
  }

  .widthBloc3 {
    width : 340px;
   
  }
  .bloc2-pied {
    text-align: center !important;
  }

  .bloc2-container-pied {
    margin-top : 35px;
    font-size : 0.9em;
  }

  .bloc3-pied {
    padding : 20px;
  }

  .precision-footer-grand {
margin-right : 25px;
  }

  .bloc-mentions {
    text-align: center !important;
    font-size : 0.8em;
  }
 }

 /****************** CAROUSEL ******************/
/* medium - display 2  */
@media (min-width: 768px) {

  .carousel-inner .carousel-item-right.active,
  .carousel-inner .carousel-item-next {
      transform: translateX(50%);
  }

  .carousel-inner .carousel-item-left.active,
  .carousel-inner .carousel-item-prev {
      transform: translateX(-50%);
  }
}

/* large - display 3 */
@media (min-width: 993px) {
  .pchidden {
    display : none;
  }

  .carousel-inner .carousel-item-right.active,
  .carousel-inner .carousel-item-next {
      transform: translateX(33%);
  }

  .carousel-inner .carousel-item-left.active,
  .carousel-inner .carousel-item-prev {
      transform: translateX(-33%);
  }
}


.slick-prev:before, .slick-next:before { 
    color:rgb(182, 181, 181) !important;
}

.multiple img {
  margin : 0 auto;
}