/*--------FONTES---------*/
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bree+Serif&display=swap');




/*--------VARIABLES--------*/
$blanc : #ffffff;
$noir : #000000;
$texte : #3c3c3b;
$fond1 : #f4f3f0;
$fond2 : #f8f7f6;
$fond3 : red;
$gris : #b8b5ad;
$gris_clair : #e3e0d8;

$turquoise : #379b83;
$grisclair : #e2e2e2;
$marron : #bc9c72;
$bleu_marine : #0e4da2;



$i: !important;
$trans : 0.3s ease;

h1,h2,h3,h4,h5,h6,p,span,div{
  font-family: 'Open Sans';
  color : $texte;
}
.fas,
.far{
  font-family: 'Font Awesome 6 Pro';
}
*,
*:hover,
*:active,
*:focus{
  outline : none $i;
}
/*--------GENERAL-------*/
@media screen and (max-width: 600px){
  #wpadminbar {
    position: fixed;
  }
}
body{
  position: relative;
  max-width: 100%;
  overflow-x: hidden;
  background: $fond2;
}
img{
  vertical-align: bottom;
}
.flex{
  display: flex;
  flex-wrap: wrap;
}
.flex-center{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.container-1200{
  margin: 0 auto;
  @media (max-width: 479px){
    max-width: 100%;
    overflow: hidden;
  }
  @media (min-width: 480px){
    width: 450px;
  }
  @media (min-width: 768px){
    width: 750px;
  }
  @media(min-width: 992px){
    width: 970px;
  }
  @media(min-width: 1200px){
    width: 1170px;
  }
}
.container-1500{
  margin: 0 auto;
  @media (max-width: 479px){
    max-width: 100%;
    overflow: hidden;
  }
  @media (min-width: 480px){
    width: 450px;
  }
  @media (min-width: 768px){
    width: 750px;
  }
  @media(min-width: 992px){
    width: 970px;
  }
  @media(min-width: 1200px){
    width: 1170px;
  }
  @media(min-width: 1549px){
    width : 1500px;
  }
}
.container-1600{
  margin: 0 auto;
  padding-left: 15px;
  padding-right: 15px;
  @media (max-width: 479px){
    max-width: 100%;
    overflow: hidden;
  }
  @media (min-width: 480px){
    width: 450px;
  }
  @media (min-width: 768px){
    width: 750px;
  }
  @media(min-width: 992px){
    width: 970px;
  }
  @media(min-width: 1200px){
    width: 1170px;
  }
  @media(min-width: 1649px){
    width : 1600px;
  }
}
.form-control{
  border-radius : 1px;
}

#tinymce{
  padding: 20px $i;
}
.edito,
#tinymce{
  h1{
    font-size: 48px;
    margin-bottom: 30px;
    font-family: "Open Sans";
    text-transform: uppercase;
    @media(max-width:1200px){
      font-size: 42px;
    }
    @media(max-width: 992px){
      font-size: 36px;
    }
    @media(max-width:768px){
      font-size: 32px;
    }
    @media(max-width:520px){
      font-size: 28px;
    }
  }
  h2{
    font-size: 24px;
    font-weight: bold;
    display: inline-block;
    margin-top: 20px;
    margin-bottom: 15px;
    color : $texte;
    position: relative;
    padding-bottom: 5px;
    line-height: normal;
    @media(max-width: 992px){
      font-size: 22px;
    }
    @media(max-width:768px){
      font-size: 20px;
    }
    &:after{
      content : '';
      background: $marron;
      height: 3px;
      width: 100%;
      display: inline-block;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
    }
    &.marron:after{
      background: $marron;
    }
    &.vert:after{
      background: $turquoise;
    }
  }
  h3{
    font-size: 22px;
    font-family: 'Open Sans';
    margin-top: 20px;
    line-height: normal;
    font-weight: 600;
    margin-bottom: 5px;
    @media(max-width: 992px){
      font-size: 20px;
    }
    @media(max-width:768px){
      font-size: 19px;
    }
  }
  h4{
    font-size: 18px;
    font-weight: bold;
    margin-top: 20px;
    line-height: normal;
    margin-bottom: 5px;
    color : $texte;
  }
  .chapeau{
    padding: 5px 0 5px 20px;
    border-left: 5px solid $marron;
    font-size: 20px;
    font-weight: bold;
    line-height: normal;
    margin-bottom: 20px;
    @media(max-width:992px){
      font-size: 18px;
    }
    @media(max-width:450px){
      font-size: 17px;
    }
  }
  .marron{
    color: $marron;
  }
  .vert{
    color: $turquoise;
  }
  a{
    font-weight: bold;
    transition : $trans;
    text-decoration: none;
    color : darken($marron,10%);
    &:hover{
      color: $marron;
    }
  }
  ul{
    list-style-type: none;
    padding: 0;
    li{
      margin-bottom: 5px;
      padding-left: 20px;
      &:before{
        content : '\f054';
        font-family: 'Font Awesome 6 Pro';
        color : $marron;
        display: inline-block;
        font-size: 14px;
        margin-right: 8px;
        margin-left: -17px;
        font-weight: 600;
      }
    }
  }
  ol{
    padding-left: 20px;
  }
  hr{
    margin: 25px 0;
    border-top : 1px solid $marron;
    border-bottom : 1px solid lighten($marron,30%);
  }
  img{
    max-width: 100%;
    &.aligncenter{
      margin: 0 auto 30px;
    }
    &.alignleft{
      margin: 0 30px 30px 0;
    }
    &.alignright{
      margin: 0 0 30px 30px;
    }
  }
}

@mixin button($couleur,$texte:$blanc){
  display: inline-block;
  padding: 12px 25px 10px;
  background: $couleur;
  color : $texte;
  border-radius : 10px;
  border : 0;
  font-size: 24px;
  transition : $trans;
  font-family: "Open Sans";
  font-weight: 700;
  text-decoration: none;
  &:hover{
    background: darken($couleur,10%);
  }
  @media(max-width:1200px){
    font-size: 22px;
    padding: 10px 20px 8px;
  }
  @media(max-width:768px){
    font-size: 20px;
    padding: 8px 15px 6px;
  }
}

@mixin moteur_recherche(){


  display: flex;
  justify-content: center;
  #moteur{
    display: flex;
    @media(max-width:520px){
      flex-direction: column;
    }
    select{
      border : 0;
      outline : none;
      padding: 0;
      font-size: 16px;
      &:focus{
        outline : none;
        box-shadow : 0 0 3px $gris;
      }
      option{
        &:checked{
          background: $gris;
        }
      }
    }
    input[type="text"]{
      padding: 0 3px;
      border : 0;
      &:focus{
        outline : none;
        box-shadow : 0 0 3px $gris;
      }
    }
    .conteneur-typologie{
      padding-right: 30px;
      border-right : 1px solid $gris;
      display: flex;
      align-items: center;
      min-width: 110px;
      @media(max-width:1200px){
        padding-right: 15px;
      }
      @media(max-width:520px){
        padding-right: 0;
        border-right: 0;
        margin-bottom: 10px;
      }
    }
    .conteneur-logement{
      padding-left: 30px;
      padding-right: 30px;
      border-right : 1px solid $gris;
      display: flex;
      align-items: center;
      @media(max-width:1200px){
        padding-right: 15px;
        padding-left: 15px;
      }
      @media(max-width:520px){
        padding-right: 0;
        padding-left: 0;
        margin-bottom: 10px;
        border-right: 0;
      }
    }
    .conteneur-emplacement{
      padding-left: 30px;
      padding-right: 30px;
      display: flex;
      align-items: center;
      @media(max-width:1200px){
        padding-right: 15px;
        padding-left: 15px;
      }
      @media(max-width:520px){
        padding-right: 0;
        padding-left: 0;
        margin-bottom: 10px;
        #liste-lieux{
          border-bottom: 1px solid $gris;
        }
      }
    }
    .search{
      border-radius : 10px;
      padding: 15px 25px;
      border :0;
      background: $marron;
      display: flex;
      align-items: center;
      justify-content: center;
      transition : $trans;
      @media(max-width:1650px){
        padding: 10px 15px;
      }
      @media(max-width:1200px){
        padding: 7px 10px;
      }
      @media(max-width:520px){
        padding-right: 0;
      }
      &:hover{
        background: darken( $marron,10%);
      }
      i{
        color : $blanc;
        font-size: 26px;
        @media(max-width:1200px){
          font-size: 20px;
        }
      }
    }
  }

}
@mixin produits(){

  .produit{
    text-decoration: none;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    margin-bottom: 50px;

    .visuel{
      position: relative;
      border-bottom-right-radius: 20px;
      border-bottom-left-radius: 20px;
      border-top-right-radius: 20px;
      overflow: hidden;
      flex-shrink: 0;
      img{
        transition: 2s ease;
        transform: scale(1.1);
      }
      .statut{
        position: absolute;
        left: 0;
        top: 0;
        text-transform: uppercase;
        padding: 7px 10px;
        background: $marron;
        font-size: 14px;
        color : $blanc;
        font-weight: 600;
      }
    }

    .texte{
      padding: 15px;
      display: flex;
      justify-content: space-between;
      font-size: 16px;
      height: 100%;
      .gauche{
        margin-right: 15px;
        display: flex;
        flex-direction: column;
        .dispositifs{
          margin-bottom: 20px;
          display: flex;
          img{
            height: 40px;
            margin-right: 5px;
          }
        }

        .bas{
          line-height: normal;
          .type_logement{
            font-size: 15px;
          }
          .lieu{
            font-weight: bold;
            color : $marron;
            .quartier{
              font-weight: bold;
              color : $marron;
              font-style: italic;
            }
          }
          .nom_prog{
            margin-top: 20px;
            color : $marron;
            font-weight: bold;
            font-size: 16px;
          }
        }
      }
      .droite{
        text-align: right;
        display: flex;
        flex-direction: column;
        align-items: end;
        .prix{
          font-size: 15px;
          margin-bottom: 20px;
          line-height: normal;

          span{
            font-weight: bold;
            display: block;
            font-size: 16px;
          }
        }
        .typologie{
          font-size: 15px;
          font-weight: bold;
          line-height: normal;
          margin-bottom: 65px;
          span{
            display: block;
          }
        }
        .bouton{
          display: inline-block;
          width: fit-content;
          border-radius : 15px;
          color : $blanc;
          padding: 8px 15px;
          border : 0;
          background: lighten($texte,10%);
          text-transform: uppercase;
          font-size: 15px;
          font-weight: 600;
          transition : $trans;
          position: absolute;
          bottom: 55px;
          @media(max-width:992px){
            bottom: 25px;
          }
          &:hover{
            background: $marron;
          }
        }
      }
    }


    //Charte Mopane Immobilier
    &.immobilier{
      .visuel .statut{
        background: $turquoise;
      }
      .texte{
        .gauche .bas .lieu{
          color : $turquoise;
          .quartier{
            color : $turquoise;
          }
        }
        .droite .bouton:hover{
          background: $turquoise;
        }
      }
    }
    //Charte Mopane Entreprise
    &.entreprise{
      .visuel .statut{
        background: $bleu_marine;
      }
      .texte{
        .gauche .bas .lieu{
          color : $bleu_marine;
          .quartier{
            color : $bleu_marine;
          }
        }
        .droite .bouton:hover{
          background: $bleu_marine;
        }
      }
    }


    &:hover .visuel img{
      transform : scale(1);
    }
  }

}



/*-----------HEADER-------------*/
#header{
  background: $fond1;
  position: fixed; // A decommenter après avoir terminé
  width: 100%;
  height: 95px;
  z-index: 99;
  transition: $trans;
  display: flex;
  align-items: center;

  .container-1600{
    display: flex;
    @media(max-width:1650px){
      padding: 0;
    }
    @media(max-width:1200px){
      padding: 0 15px;
    }
    @media(max-width:520px){
      width: 100%;
    }
    .contenu-header{
      display: flex;
      width: 100%;
      justify-content: space-between;

      #logo{
        width: auto;
        height: 80px;
        margin: 5px 0;
        transform : scale(1);
        transition : transform 0.3s;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        @media(max-width:1650px){
          height: 70px;
        }
        h2{
          margin: 0;
          a{
            display: inline-block;
            img{
              transition : $trans;
              height: 80px;
              @media(max-width:1650px){
                height: 70px;
              }
              @media(max-width:1200px){
                height: 60px;
              }
              @media(max-width:520px){
                height: 50px;
              }
              &.mopane{
                height: 70px;
                @media(max-width:1650px){
                  height: 60px;
                }
                @media(max-width:1200px){
                  height: 50px;
                }

              }
            }
          }
        }
        &:hover{
          transform : scale(0.9);
        }
      }
    }

    .header-droite{
      display: flex;
      align-items: center;

      .rs-header{
        display: flex;
        @media(max-width:768px){
          display: none;
        }
        .logo{
          a{
            color: $texte;
            text-decoration: none;
            display: flex;
            align-items: center;
            overflow: hidden;
            width: fit-content;
            &:hover i{
              color : $marron;
              border-color: $marron;
            }
            i {
              font-size: 22px;
              color: $texte;
              margin-right: 5px;
              border: 1px solid $texte;
              border-radius: 100%;
              display: flex;
              align-items: center;
              justify-content: center;
              width: 50px;
              height: 50px;
              flex-shrink: 0;
              transition: $trans;
              @media (max-width: 1650px) {
                width: 40px;
                height: 40px;
                font-size: 20px;
              }
              @media (max-width: 1250px) {
                width: 35px;
                height: 35px;
                font-size: 18px;
              }
            }
          }
        }
      }
      #tel-menu {
        position: relative;
        cursor: pointer;
        display: flex;
        align-items: center;
        @media(max-width:768px){
          display: none;
        }
        a {
          color: $texte;
          text-decoration: none;
          display: flex;
          align-items: center;
          overflow: hidden;
          width: fit-content;
          &:hover i{
            color : $marron;
            border-color: $marron;
          }
          i {
            font-size: 22px;
            color: $texte;
            margin-right: 5px;
            border: 1px solid $texte;
            border-radius: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 50px;
            height: 50px;
            flex-shrink: 0;
            transition: $trans;
            @media (max-width: 1650px) {
              width: 40px;
              height: 40px;
              font-size: 20px;
            }
            @media (max-width: 1250px) {
              width: 35px;
              height: 35px;
              font-size: 18px;
            }
          }
          span {
            width: 0;
            min-width: 0; // Empêche le rognage en assurant une réduction complète
            opacity: 0;
            white-space: nowrap;
            overflow: hidden;
            font-size: 20px;
            transition: $trans;
          }
        }

        &.active{ //Au clic, on affiche le numéro
          a {
            padding-left:15px;
            i {
              color : $marron;
              border-color: $marron;
              transform: translateX(-5px);
            }
            span {
              width: auto;
              opacity: 1;
            }
          }
        }
      }

      .bordure-tel-co{
        height: 60%;
        margin: 0 30px;
        width: 2px;
        background: transparentize($texte,0.4);
        @media(max-width:768px){
          display: none;
        }
      }
      .partenaire,
      .deconnexion{
        width: 50px;
        height: 50px;
        border-radius: 100%;
        background: $blanc;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        transition: $trans;
        margin-right: 15px;
        @media(max-width:520px){
          width: 40px;
          height: 40px;
        }
        i{
          font-size: 24px;
          color : $texte;
          transition : $trans;
          @media(max-width:520px){
            font-size: 22px;
          }
        }
        &:hover i{
          color : $marron;
        }
      }

      #bouton-menu-principal.hamburger{
        outline : 0;
        width: 50px;
        height: 50px;
        border-radius: 100%;
        background: $blanc;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        opacity: 1;
        transition: $trans;
        @media(max-width:520px){
          width: 40px;
          height: 40px;
          padding: 10px;
        }
        .hamburger-inner,
        .hamburger-inner:after,
        .hamburger-inner:before{
          background-color : $texte;
          opacity: 1;
          width: 20px;
          height: 2px;
          border-radius : 0px;
        }
        .hamburger-inner:before{
          top: -8px;
        }
        .hamburger-inner:after{
          bottom: -8px;
        }
        &.is-active{
          opacity: 1;
          .hamburger-inner:before{
            top: 0px;
            opacity: 0;
          }
          .hamburger-inner:after{
            bottom: 0px;
          }
        }
      }


    }
  }
  &.sticky{
    height: 60px;
    box-shadow : 0 0 10px transparentize($noir,0.2);
    .contenu-header{
      #logo{
        height: 50px;
        margin : 5px 0;
        h2{
          height: inherit;
          a{
            height: inherit;
            img{
              height: inherit;
              &.mopane{
                height: 50px;

              }
            }
          }
        }

      }
      .header-droite{
        .rs-header a i,
        #tel-menu a i{
          width: 40px;
          height: 40px;
          font-size: 18px;
        }
        .partenaire,
        .deconnexion {
          width: 40px;
          height: 40px;
          font-size: 18px;
        }
        #bouton-menu-principal.hamburger{
          width: 40px;
          height: 40px;
          padding: 10px;
        }
      }
    }
  }
}


#menu-principal{
  margin: 0;
  z-index: 100;
  position: fixed;
  right : -120%;
  background: $blanc;
  box-shadow: 0 10px 20px transparentize($noir, 0.2);
  top: 0;
  bottom: 0;
  height: 100%;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding : 50px 30px $i;
  transition : 0.6s ease;
  width: 400px;
  &.is-active{
    right: 0;
  }
  @media(max-width:992px){
    padding: 50px 15px $i;
    width: 360px;
  }
  @media(max-width:768px){
    padding: 50px 0px $i;
    width: 300px;
  }
  #close-menu-principal{
    color : $texte;
    font-size: 28px;
    position: absolute;
    top: 15px;
    right: 15px;
    cursor : pointer;
  }
  #menu-menu-principal{
    flex-direction: column;
    padding-left: 15px;
    li{
      height: auto;
      display: block;
      padding: 0;
      margin-bottom: 20px;
      a{
        color : $marron;
        font-size: 18px;
        text-transform: uppercase;
        font-weight: bold;
        text-decoration: none;
        transition : $trans;
        padding-right: 5px;
        &[href="#"]{
          cursor : default;
          &:hover{
            padding-left: 0;
            padding-right: 5px;
            color: $marron;
          }
        }
        &:hover{
          color : darken($texte,10%);
          padding-left: 5px;
          padding-right: 0;
        }

      }
      .sub-menu{
        position: relative;
        background: none;
        max-height: none;
        box-shadow : none;
        top: auto;
        padding:  0 10px 0 20px;
        margin-bottom: 10px;
        opacity: 1;
        visibility: visible;
        overflow: visible;
        left: auto;
        border : 0;
        min-width: 0;
        transition:  none;
        li{
          margin : 5px 0;
          a{
            font-size: 16px;
            text-transform: none;
            font-weight: normal;
            color : $texte;
            &[href="#"]{
              &:hover{
                color: $texte;
              }
            }
          }
          &.menu-item-has-children>a{
            font-weight: bold;
            &:after{
              font-family: 'Font Awesome 6 Pro';
              content : '\f0da';
              margin-left: 10px;
              color : $marron;
            }

          }

        }
      }
    }
  }

  //Design de la barre de scroll
  overflow-y: auto;
  scrollbar-width: thin; // Pour Firefox
  scrollbar-color: $gris transparent;

  &::-webkit-scrollbar {
    width: 5px; // Largeur de la barre de scroll
  }
  &::-webkit-scrollbar-track {
    background: transparent; // Fond de la barre
  }
  &::-webkit-scrollbar-thumb {
    background: $gris; // Couleur de la barre
  }

}

/*------CARROUSEL PROGRAMME-----*/
@mixin slide_prog(){
  .slide {
    position: relative;
  }
  .bloc-haut{
    position: absolute;
    top: 15px;
    right: 15px;
    background: $blanc;
    padding: 10px 0 20px 10px;
    border-radius : 20px;
    width: 260px;
    @media(max-width:1650px){
      width: 230px;
    }
    @media(max-width:1200px){
      padding-bottom : 10px;
    }
    .vignette-fleche{
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
      @media(max-width:1200px){
        margin-bottom: 10px;
      }
      .vignette-haut{
        width: 180px;
        border-radius : 20px;
        float: left;
        @media(max-width:1650px){
          width: 160px;
        }
        @media(max-width:1200px){
          width: 140px;
        }
      }
      .lien-programme{
        margin: 0 auto;
        text-decoration: none;
        &:hover{
          i{
            background: darken($marron,10%);
          }
        }
        .fa-chevron-right{
          transition : $trans;
          background: $marron;
          border-radius : 100%;
          font-size: 22px;
          color:$blanc;
          width: 35px;
          height: 35px;
          display: flex;
          align-items: center;
          justify-content:center;
        }
      }
    }

    .typologie-haut,
    .prix-haut{
      display: flex;
      padding-right: 15px;
      padding-left: 5px;
      justify-content: space-between;
      font-size: 15px;
      strong{
        font-size: 14px;
      }
    }
    .typologie-haut{
      margin-bottom: 10px;
      @media(max-width:1200px){
        margin-bottom: 5px;
      }
    }

  }
  .bloc-bas{
    position: absolute;
    bottom: 15px;
    left: 20px;
    height: 70px;
    background: $texte;
    padding: 15px 20px;
    display: flex;
    border-radius: 20px;
    @media(max-width:1650px){
      padding: 10px 15px;
      max-width: 400px;
    }
    @media(max-width:1200px){
      max-width: 300px;
    }
    @media(max-width:768px){
      bottom: 10px;
      left: 10px;
      max-width: 280px;
      height: auto;
    }
    @media(max-width:480px){
      max-width: 220px;
    }
    .lieux{
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      .lieu{
        color: $blanc;
        font-size: 20px;
        font-family: "Open Sans";
        line-height: 18px;
        font-weight: 700;
        margin-bottom: 0;
        @media(max-width:1650px){
          font-size: 18px;
        }
        @media(max-width:1200px){
          font-size: 16px;
        }
      }
      .quartier{
        font-style: italic;
        color: $blanc;
        font-size: 14px;
        margin-bottom: 0;
        margin-top: 4px;
        @media(max-width:1200px){
          font-size: 13px;
        }
      }
    }
    .logements{
      border-left: 1px solid $blanc;
      padding-left: 20px;
      margin-left: 20px;
      color: $blanc;
      font-size: 14px;
      line-height: 22px;
      display: flex;
      align-items: center;
      justify-content: center;
      @media(max-width:1200px){
        flex-shrink: 0;
      }
      @media(max-width:1200px){
        font-size: 13px;
      }
      @media(max-width:768px){
        padding-left: 10px;
        margin-left: 10px;
      }
    }


  }
  //Charte
  .programme.pair{
    //.bloc-pin{
    //  color: $marron;
    //}
    .bloc-bas{
      background: $marron;
    }
  }
  .immobilier{
    //.bloc-pin{
    //  color: $turquoise;
    //}
    .bloc-bas{
      background: $turquoise;
    }
  }
  .entreprise{
    //.bloc-pin{
    //  color: $bleu_marine;
    //}
    .bloc-bas{
      background: $bleu_marine;
    }
  }
}



/*-------------GENERAL----------*/
#main{
  margin-top: 95px;
  padding-top: 50px;
  background: $fond2;
}


/*-----------------ACCUEIL-----------------*/
.home{
  background: $fond2;
  #main{
    padding: 0;
    overflow-x: hidden;
    margin-top: 95px;

    //BANDEAU PRINCIPAL
    #bandeau-principal{
      margin-bottom: 70px;
      @media(max-width:992px){
        margin-bottom: 0;
      }
      .conteneur{
        display: flex;
        align-items: flex-start;
        @media(max-width:992px){
          flex-wrap: wrap;
        }
        .gauche{
          padding: 0px 65px 0px 0;
          width: 51%;
          @media(max-width:1650px){
            padding-right: 50px;
          }
          @media(max-width:992px){
            padding-right: 0px;
            width: 100%;
          }
          h1{
            font-size: 32px;
            line-height: normal;
            margin-bottom: 40px;
            margin-top: 70px;
            font-weight: 700;
            visibility: hidden;
            @media(max-width:1650px){
              margin-top: 40px;
              font-size: 28px;
              margin-bottom: 25px;
            }
            @media(max-width:1200px){
              margin-top: 40px;
              font-size: 26px;
            }
            @media(max-width:768px){
              font-size: 24px;
            }
            @media(max-width:520px){
              font-size: 22px;
            }
          }
          hr{
            margin-bottom: 40px;
            border-top: 2px solid $gris_clair;
            width: 70%;
            margin-left: 0;
            visibility: hidden;
            @media(max-width:1650px){
              margin-bottom: 25px;
            }
          }
          .intro{
            visibility: hidden;
            text-align: justify;
          }
          p{
            color : $texte;
            font-size: 18px;
            @media(max-width:1650px){
              line-height: 1.4;
              font-size: 17px;
            }
          }

          .logos-bandeau{
            width: 100%;
            display: flex;
            margin-top: 40px;
            justify-content: center;
            @media(max-width:1650px){
              margin-top: 35px;
            }
            @media(max-width:480px){
              flex-wrap: wrap;
              gap: 20px;
            }
            a.logos{
              text-decoration: none;
              margin: 0 15px;
              visibility: hidden;
              @media(max-width:480px) and (min-width:380px){
                width: calc(50% - 40px);
                margin: 0;
                text-align: center;
              }
              img{
                transition : $trans;
                height: 80px;
                @media(max-width:1650px){
                  height: 65px;
                }
              }
              &:hover img{
                transform : scale(1.1);
              }
            }
          }

          //Moteur de recherche accueil
          #moteur-recherche {
            @include moteur_recherche();
            background: $blanc;
            border-radius : 20px;
            padding: 20px 50px;
            margin-top: 40px;
            margin-bottom: 60px;
            visibility: hidden;
            @media(max-width:1650px){
              padding: 20px;
              margin-top: 30px;
            }
            @media(max-width:1200px){
              padding: 15px;
            }
          }
        }
        .lien-chiffres{
          display: flex;
          align-items: center;
          visibility: hidden;
          @media(max-width:992px){
            display: none;
          }
          a{
            border : 1px solid $gris_clair;
            height: 70px;
            width: 70px;
            color : $gris;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 30px;
            border-radius : 100%;
            font-size: 30px;
            transition : $trans;
            text-decoration: none;
            &:hover{
              border-color: $gris;
              color:$texte;
            }
          }
          p{
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 0;
          }
          &.show-mobile{
            display: flex;
            margin-top: 70px;
            @media(min-width:993px){
              display: none;
            }
          }
        }
        .droite{
          width: 49%;
          @media(max-width:992px){
            width: 100%;
          }
          .carrousel-bandeau-accueil{
            border-radius: 20px;
            overflow: hidden;
            &.slick-initialized .slide{
              opacity: 1;
            }
            @include slide_prog();
            .slide{
              opacity: 0;
            }
            .slick-prev,
            .slick-next{
              position: absolute;
              bottom: 15px;
              right: 90px;
              background: $blanc;
              color : $texte;
              border-radius : 100%;
              width: 50px;
              height: 50px;
              z-index: 1;
              border : 0;
              font-size: 25px;
              transition : $trans;
              @media(max-width:1650px){
                width: 40px;
                height: 40px;
                font-size: 22px;
                right: 70px;
              }
              @media(max-width:768px){
                width: 30px;
                height: 30px;
                font-size: 18px;
                right: 50px;
              }
              &:hover{
                background: $gris_clair;
              }
            }
            .slick-next{
              right: 20px;
              @media(max-width:768px){
                right: 15px;
              }
            }
          }
        }
      }
    }







    //CHIFFRES
    #chiffres{
      padding: 70px 0 70px;
      //background: $blanc;
      @media(max-width:992px){
        padding-top: 40px;
      }
      @media(max-width:768px){
        padding: 40px 0 30px;
      }

      .conteneur-chiffre{
        display: flex;
        @media(max-width:1200px){
          padding: 0 1rem $i;
        }
        .chiffre{
          display: flex;
          flex-direction: column;
          align-items: center;
          border : 1px solid $gris;
          border-radius : 20px;
          padding: 30px 30px 60px 30px;
          width: 100%;
          //background: $blanc;
          @media(max-width:1650px){
            padding: 20px 20px 40px 20px;
          }
          @media(max-width:992px){
            margin-bottom: 30px;
          }
          .valeur{
            font-family: 'Open Sans';
            font-size: 56px;
            font-weight: 700;
            @media(max-width:1650px){
              font-size: 50px;
            }
            @media(max-width:1200px){
              font-size: 46px;
            }
            @media(max-width:992px){
              font-size: 42px;
            }
            @media(max-width:768px){
              font-size: 36px;
            }
          }
          hr{
            width: 70%;
            border-top: 2px solid $texte;
            margin-top: 35px;
            margin-bottom: 40px;
            @media(max-width:1650px){
              margin-top: 20px;
              margin-bottom: 25px;
            }
            @media(max-width:992px){
              margin-top: 15px;
              margin-bottom: 20px;
            }
            @media(max-width:768px){
              margin-top: 10px;
              margin-bottom: 15px;
            }
          }
          .titre{
            font-size: 24px;
            font-weight: 600;
            text-align: center;
            margin-bottom: 20px;
            @media(max-width:992px){
              font-size: 20px;
              margin-bottom: 15px;
            }
            @media(max-width:768px){
              margin-bottom: 5px;
            }
          }
          .texte{
            font-size: 16px;
            line-height: 28px;
            text-align: center;
            width: 90%;
            @media(max-width:1650px){
              br{
                display: none;
              }
            }
            @media(max-width:1200px){
              font-size: 15px;
            }
          }
        }
        &:first-of-type .chiffre{
          background: $texte;
          *{
            color:$blanc;
          }
          hr{
            border-top-color: $blanc;
          }
        }
      }
    }


    //LE GROUPE
    #groupe{
      padding: 50px 0px;
      background-position : center center;
      background-size: cover;

      .conteneur-groupe{
        background: $blanc;
        border-radius : 20px;
        padding: 40px 50px;
        width: 550px;
        @media(max-width:1650px){
          padding: 30px 40px;
          width: 500px;
        }
        @media(max-width:1200px){
          padding: 20px 30px;
          width: 450px;
        }
        @media(max-width:992px){
          padding: 15px 20px;
          width: 400px;
        }
        @media(max-width:768px){
          width: 300px;
          max-width: 100%;
        }
        .titre-bloc{
          display: flex;
          justify-content: space-between;
          margin-bottom: 40px;
          @media(max-width:1650px){
            margin-bottom: 30px;
            margin-top: 10px;
          }
          @media(max-width:992px){
            margin-bottom: 20px;
          }
          h2{
            font-family: 'Open Sans';
            font-size: 42px;
            font-weight: 700;
            @media(max-width:1650px){
              font-size: 38px;
            }
            @media(max-width:1200px){
              font-size: 36px;
            }
            @media(max-width:992px){
              font-size: 32px;
            }
            @media(max-width:768px){
              font-size: 28px;
            }
          }
          a{
            text-decoration: none;
            margin-right: 50px;
            @media(max-width:992px){
              margin-right: 40px;
            }
            @media(max-width:768px){
              margin-right: 20px;
            }
            i{
              background: $noir;
              font-size: 24px;
              height: 50px;
              width: 50px;
              border-radius : 100%;
              color : $blanc;
              display: flex;
              align-items: center;
              justify-content: center;
              transition : $trans;
              @media(max-width:1650px){
                height: 45px;
                width: 45px;
                font-size: 22px;
              }
              @media(max-width:1200px){
                height: 40px;
                width: 40px;
                font-size: 20px;
              }
              @media(max-width:992px){
                height: 35px;
                width: 35px;
                font-size: 18px;
              }
              @media(max-width:768px){
                height: 30px;
                width: 30px;
                font-size: 16px;
              }
            }
            &:hover i{
              background: $marron;
            }
          }
        }
        .liens{
          .lien{
            border-top: 2px solid $gris_clair;
            padding: 20px 0;
            display: flex;
            justify-content: space-between;
            @media(max-width:1200px){
              padding: 15px 0;
            }
            @media(max-width:992px){
              padding: 10px 0;
            }
            a.lien-texte {
              font-size: 24px;
              font-weight: 600;
              color: $texte;
              padding-right: 10px;
              text-decoration: none;
              transition:$trans;
              @media(max-width:1650px){
                font-size: 22px;
              }
              @media(max-width:1200px){
                font-size: 20px;
              }
              @media(max-width:992px){
                font-size: 18px;
              }
              @media(max-width:768px){
                font-size: 16px;
                padding-right: 20px;
              }
              &:hover{
                padding-right: 0;
                padding-left: 10px;
              }
            }
            a{
              i{
                transition : $trans;
                color: $texte;
                transform:rotate(50deg) translate(-5px, 10px);
                font-size: 25px;
                @media(max-width:992px){
                  font-size: 22px;
                }
              }
              &:hover i{
                transform:rotate(90deg) translate(5px, 10px);
              }
            }
          }
        }
      }
    }


    //NOS NOUVEAUTES
    #nouveautes{
      position: relative;
      padding: 70px 0;
      background: $blanc;
      @media(max-width:768px){
        padding: 50px 0;
      }
      .haut{
        display: flex;
        justify-content: space-between;
        margin-bottom: 30px;
        @media(max-width:768px){
          flex-direction: column;
          align-items: flex-start;
        }
        h2.titre_bandeau{
          font-family: 'Open Sans';
          font-size: 42px;
          font-weight: 700;
          margin-bottom: 0;
          @media(max-width:1650px){
            font-size: 38px;
          }
          @media(max-width:1200px){
            font-size: 36px;
          }
          @media(max-width:992px){
            font-size: 32px;
          }
          @media(max-width:768px){
            font-size: 28px;
            margin-bottom: 20px;
          }
          @media(max-width:520px){
            font-size: 24px;
            padding-top: 10px;
          }
        }
        .lien-plus{
          background: $texte;
          border-radius : 20px;
          color : $blanc;
          font-size: 20px;
          padding: 10px 20px 10px 30px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: 700;
          text-decoration: none;
          transition : $trans;
          @media(max-width:992px){
            padding: 7px 15px 7px 25px;
          }
          @media(max-width:768px){
            font-size: 18px;
          }
          @media(max-width:520px){
            font-size: 16px;
          }
          &:hover{
            background: $marron;
          }
          i{
            transform:rotate(50deg) translate(-5px, 10px);
            font-size: 25px;
            margin-right: 5px;
            @media(max-width:992px){
              font-size: 22px;
              margin-right: 0px;
            }
          }
        }
      }
      .supprmarge{
        margin-left: -15px;
        margin-right: -15px;
        .carrousel-nouveautes{
          @include slide_prog();
          .slide{
            margin-left: 15px;
            margin-right: 15px;
            .visuel{
              border-radius : 20px;
            }
            .bloc-haut{
              right: auto;
              left: 15px;
            }
          }
          .slick-prev,
          .slick-next{
            position: absolute;
            top: -80px;
            left: 400px;
            background: $texte;
            color : $blanc;
            border-radius : 100%;
            width: 50px;
            height: 50px;
            z-index: 1;
            border : 0;
            font-size: 25px;
            transition : $trans;
            &:hover{
              background: $marron;
            }
            @media(max-width:1650px){
              height: 45px;
              width: 45px;
              font-size: 22px;
            }
            @media(max-width:1200px){
              height: 40px;
              width: 40px;
              font-size: 20px;
            }
            @media(max-width:992px){
              height: 35px;
              width: 35px;
              font-size: 18px;
              left: 320px;
              top: -70px;
            }
            @media(max-width:768px){
              height: 30px;
              width: 30px;
              top: -65px;
              left: 300px;
            }
            @media(max-width:520px){
              left: 250px;

            }
          }
          .slick-next{
            left: 470px;
            @media(max-width:1200px){
              left: 460px;
            }
            @media(max-width:992px){
              left: 360px;
            }
            @media(max-width:768px){
              left: 340px;
            }
            @media(max-width:520px){
              left: 285px;
            }
          }
        }
      }
    }


    //AVIS CLIENTS
    #avis-clients{
      padding: 70px 0;
      background: $fond2;
      @media(max-width:768px){
        padding: 50px 0;
      }
      .haut{
        display: flex;
        justify-content: space-between;
        margin-bottom: 30px;
        @media(max-width:768px){
          flex-direction: column;
          align-items: flex-start;
        }
        h2.titre_bandeau{
          font-family: 'Open Sans';
          font-size: 42px;
          font-weight: 700;
          @media(max-width:1650px){
            font-size: 38px;
          }
          @media(max-width:1200px){
            font-size: 36px;
          }
          @media(max-width:992px){
            font-size: 32px;
          }
          @media(max-width:768px){
            font-size: 28px;
            margin-bottom: 20px;
          }
          @media(max-width:520px){
            font-size: 24px;
          }
        }
        .bouton{
          background: $texte;
          border-radius : 20px;
          color : $blanc;
          font-size: 20px;
          padding: 10px 20px 10px 30px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: 700;
          text-decoration: none;
          transition : $trans;
          @media(max-width:992px){
            padding: 7px 15px 7px 25px;
          }
          @media(max-width:768px){
            font-size: 18px;
          }
          @media(max-width:520px){
            font-size: 16px;
          }
          &:hover{
            background: $marron;
          }
          i{
            transform:rotate(50deg) translate(-5px, 10px);
            font-size: 25px;
            margin-right: 5px;
            @media(max-width:992px){
              font-size: 22px;
              margin-right: 0px;
            }
          }

        }
      }
      .liste-avis{
        display: flex;
        flex-wrap : wrap;

        .bloc_avis{
          border-radius : 20px;
          border : 1px solid $marron;
          width: calc(25% - 30px);
          margin: 0 15px 30px;
          background: $fond2;
          visibility: visible $i;

          &:nth-of-type(odd){
            background: $blanc;
          }
          .header{
            border-bottom : 1px solid $marron;
            padding: 10px 20px;
            display: flex;
            .lettre{
              border-radius : 100%;
              background: $marron;
              color : $blanc;
              font-size: 22px;
              font-weight: 600;
              width: 50px;
              height: 50px;
              display: flex;
              align-items: center;
              justify-content: center;
              margin-right: 10px;
              flex-shrink: 0;
            }
            .droite{
              width: 100%;
              .nom{
                font-size: 20px;
                line-height: 32px;
                margin-bottom: 0;
                font-weight: 600;
              }
              .bas-header{
                display: flex;
                align-items: center;
                width: 100%;
                justify-content: space-between;
                flex-wrap: wrap;
                @media(max-width:1200px){
                  flex-wrap: nowrap;
                }
                .date{
                  margin-bottom: 0;
                  color : darken($gris,10%);
                  font-style: italic;
                  font-size: 14px;
                }
                .note{
                  margin-top: -8px;
                  display: flex;
                  @media(max-width:1650px){
                    flex-shrink: 0;
                    margin-top: 5px;
                  }
                  @media(max-width:1200px){
                    margin-top: -8px;
                  }
                  @media(max-width:992px){
                    margin-top: 0px;
                  }
                  img{
                    width: 18px;
                  }
                }
              }
            }
          }
          .commentaire{
            padding: 10px 20px 15px;
            font-size: 15px;
            text-align: justify;
          }
        }
      }
      .slick-prev,
      .slick-next{
        position: absolute;
        top: -80px;
        left: 450px;
        background: $texte;
        color : $blanc;
        border-radius : 100%;
        width: 50px;
        height: 50px;
        z-index: 1;
        border : 0;
        font-size: 25px;
        transition : $trans;
        &:hover{
          background: $marron;
        }
        @media(max-width:992px){
          height: 35px;
          width: 35px;
          font-size: 18px;
          left: 385px;
          top: -72px;
        }
        @media(max-width:768px){
          height: 30px;
          width: 30px;
          top: -65px;
          left: 300px;
        }
        @media(max-width:520px){
          left: 250px;

        }
      }
      .slick-next{
        left: 520px;
        @media(max-width:992px){
          left: 425px;
        }
        @media(max-width:768px){
          left: 340px;
        }
        @media(max-width:520px){
          left: 285px;
        }
      }
    }



  }
}

//COULEUR POUR LES BANDEAUX DU FOOTER
@mixin couleur_footer($couleur){
  #blocs-propositions #fond-edito-1 .rangee .bloc:nth-of-type(2){
    background: $couleur;
  }
  #contact .container-1600{
    .conteneur-formulaire{
      .titre-bloc h3 span{
        color : $couleur;
      }
      .contenu .formulaire{
        .rgpd label a{
          color : $couleur;
        }
        .wpforms-submit-container .wpforms-submit{
          background: $couleur;
          &:hover{
            background: darken($couleur,10%);
          }
        }
      }
    }
    .coordonnees{
      .tel,
      .email{
        background: $couleur;
        &:hover{
          background: darken($couleur,10%);
        }
      }
    }
  }
}


//BANDEAU Nos propositions
#blocs-propositions{
  padding: 70px 0;
  background: $blanc;
  @media(max-width:768px){
    padding: 50px 0;
    .container-1600{
      width: 100%;
      padding: 0 15px;
    }
  }

  h2{
    font-family: 'Open Sans';
    font-size: 42px;
    margin-bottom: 30px;
    font-weight: 700;
    @media(max-width:1650px){
      font-size: 38px;
    }
    @media(max-width:1200px){
      font-size: 36px;
    }
    @media(max-width:992px){
      font-size: 32px;
    }
    @media(max-width:768px){
      font-size: 28px;
      margin-bottom: 20px;
    }
    @media(max-width:520px){
      font-size: 24px;
    }
  }
  #fond-edito-1{
    border-radius : 20px;
    display: flex;
    justify-content: flex-end;
    padding: 80px 30px;
    overflow: hidden;
    @media(max-width:1200px){
      padding: 50px 20px;
    }
    @media(max-width:992px){
      padding: 30px 0px;
    }
    @media(max-width:768px){
      padding: 15px 15px 0;
      background-size: cover;
    }
    .rangee{
      width: 70%;
      display: flex;
      @media(max-width:1650px){
        width: 80%;
      }
      @media(max-width:1200px){
        width: 100%;
      }
      @media(max-width:768px){
        flex-direction: column;
        width: 350px;
        margin: 0 auto;
        max-width: 100%;
      }
      .bloc{
        background: $texte;
        border-radius : 20px;
        padding: 30px;
        width: calc(33.33% - 30px);
        margin: 0 15px ;
        display: flex;
        flex-direction: column;
        align-items: end;
        @media(max-width:992px){
          margin: 0 10px;
          padding: 20px;
          width: calc(33.33% - 20px);
        }
        @media(max-width:768px){
          width: 100%;
          margin: 0 0 20px;
          padding: 20px 30px;
        }
        .bouton{
          background: $blanc;
          border-radius : 100%;
          width: 50px;
          height: 50px;
          display: flex;
          align-items: center;
          justify-content: center;
          text-decoration: none;
          margin-bottom: 40px;
          @media(max-width:1650px){
            margin-bottom: 30px;
          }
          @media(max-width:1200px){
            width: 40px;
            height: 40px;
            margin-bottom: 20px;
          }
          @media(max-width:992px){
            width: 30px;
            height: 30px;
          }
          @media(max-width:768px){
            width: 40px;
            height: 40px;
          }
          i{
            transition : $trans;
            color: $texte;
            transform:rotate(50deg) translate(1px, 2px);
            font-size: 25px;
            @media(max-width:1200px){
              font-size: 22px;
            }
            @media(max-width:992px){
              font-size: 20px;
            }
            @media(max-width:768px){
              font-size: 22px;
            }
          }
          &:hover i{
            transform:rotate(90deg) translate(2px, 0px);
          }
        }
        h3{
          text-align: right;
          font-weight: 700;
          color : $blanc;
          font-family: 'Open Sans';
          font-size: 25px;
          padding-bottom: 20px;
          border-bottom : 1px solid $blanc;
          margin-bottom: 20px;
          width: 100%;
          @media(max-width:1650px){
            font-size: 24px;
            br{
              display: none;
            }
          }
          @media(max-width:1200px){
            font-size: 22px;
          }
          @media(max-width:992px){
            font-size: 20px;
          }
        }
        p{
          color: $blanc;
          font-size: 16px;
          text-align: right;
        }
      }
    }
  }
}


//Bandeau Retrouvez-nous partout
#footer-lieux{
  padding: 50px 0;
  background: $fond2;
  @media(max-width:1650px){
    padding: 40px 0;
  }
  .container-1600{
    display: flex;
    align-items: center;
    justify-content: space-between;
    @media(max-width:768px){
      flex-direction: column;
      justify-content: center;
    }
    .gauche{
      margin-right: 50px;
      @media(max-width:1650px){
        margin-right: 30px;
      }
      @media(max-width:992px){
        flex-shrink: 0;
      }
      @media(max-width:768px){
        margin-right: 0;
      }
      h4{
        font-family: 'Open Sans';
        font-size: 32px;
        line-height: normal;
        font-weight: 700;
        margin-bottom: 0;
        @media(max-width:1650px){
          font-size: 26px;
        }
        @media(max-width:1200px){
          font-size: 20px;
        }
        @media(max-width:768px){
          margin-bottom: 30px;
          text-align: center;
        }
      }
    }
    .droite{
      display: flex;
      align-items: center;
      justify-content: flex-end;
      @media(max-width:992px){
        flex-wrap: wrap;
        gap : 20px;
        text-align: center;
        justify-content: center;
      }
      @media(max-width:768px){
        width: 180px;
        text-align: left;
      }

      .lieu{
        margin: 0 40px;
        @media(max-width:1650px){
          margin: 0 20px;
        }
        @media(max-width:768px){
          width: 100%;
        }

        i{
          font-size: 32px;
          margin-right: 25px;
          @media(max-width:1650px){
            font-size: 28px;
            margin-right: 15px;
          }
          @media(max-width:1200px){
            font-size: 24px;
            margin-right: 10px;
          }
        }
        span{
          font-size: 26px;
          font-family: "Open Sans";
          font-weight: 500;
          @media(max-width:1650px){
            font-size: 24px;
          }
          @media(max-width:1200px){
            font-size: 20px;
          }
        }
      }
    }
  }
}

//Bandeau contact
#contact{
  padding: 50px 0px;
  background-position : center center;
  background-size: cover;
  max-width: 100%;
  overflow: hidden;
  .container-1600{
    position: relative;
    .conteneur-formulaire{
      background: transparentize($blanc,0.2);
      border-radius : 20px;
      padding: 40px 50px;
      width: 630px;
      @media(max-width:1200px){
        width: 570px;
        padding: 30px 40px;
      }
      @media(max-width:992px){
        width: 550px;
        margin: 0 auto;
      }
      @media(max-width:768px){
        width: 100%;
        padding: 30px 20px;
      }
      h3{
        font-family: "Open Sans";
        font-size: 32px;
        text-align: right;
        color : $texte;
        font-weight: 700;
        span{
          color : $marron;
        }
        @media(max-width:1650px){
          font-size: 30px;
        }
        @media(max-width:1200px){
          font-size: 28px;
        }
        @media(max-width:992px){
          font-size: 24px;
        }
      }
      .accroche{
        font-size: 22px;
        font-weight: 100;
        text-align: right;
        font-style: italic;
        color : $texte;
        @media(max-width:1200px){
          font-size: 20px;
        }
        @media(max-width:992px){
          font-size: 18px;
        }
      }
      .contenu{
        .formulaire{
          @media(max-width:768px){
            .wpforms-field-name{
              padding: 0;
            }
            .wpforms-one-half{
              width: 100% $i;
              padding: 10px 0;
              margin-left: 0;
            }
            .wpforms-field-layout-preset-50-50{
              flex-wrap: wrap $i;
              .wpforms-layout-column-50{
                width: 100% $i;
              }
            }
          }
          .wpforms-error{
            color : lighten($marron,10%);
            margin-top: 2px;
            font-size: 16px;
          }
          .wpforms-field{
            @media(max-width:768px){
              width: 100%;
              margin-left: 0;
            }
          }
          input,
          select,
          option{
            color : $texte;
            &[type=text],
            &[type=tel],
            &[type=email]{
              height: 45px;
              border-radius:10px;
              padding: 10px 15px;
              @media(max-width:1200px){
                height: 40px;
              }
              @media(max-width:768px){
                font-size: 16px;
              }
            }
          }
          textarea{
            color : $texte;
            height: 100px;
            border-radius:10px;
            padding: 10px 15px;
            @media(max-width:1200px){
              height: 80px;
            }
            @media(max-width:768px){
              font-size: 16px;
            }
          }
          .mailcheck-error .mailcheck-suggestion{
            color : $texte;
          }
          .rgpd{
            color:$texte;
            li{
              display: flex;
            }
            input{
              flex-shrink: 0;

            }
            label {
              font-size: 14px;
              @media(max-width:768px){
                font-size: 13px;
              }
              a{
                text-decoration: underline;
                transition: $trans;
                color:$marron;
                &:hover{
                  color: darken($marron,10%);
                }
              }
              &.wpforms-error{
                font-size: 16px;
                margin-top: 5px;
              }
            }
          }

          .wpforms-submit-container{
            display: flex;
            justify-content: flex-end;
            .wpforms-submit{
              @include button($marron);
              display: table;
              padding-left: 35px;
              margin-top: 10px;
              @media(max-width:1650px){
                padding: 10px 20px 8px 30px;
                font-size: 22px;
              }
              @media(max-width:992px){
                font-size: 20px;
              }
              @media(max-width:768px){

              }
              &:before{
                content : "\f062";
                transform:rotate(50deg) translate(-6px, 10px);
                font-family: "Font Awesome 6 Pro";
                font-weight: normal;
                display: inline-block;
                margin-right: 5px;
              }
            }
          }
        }
      }
    }
    .coordonnees{
      position: absolute;
      bottom: 0;
      right: 0;
      @media(max-width:1650px){
        display: flex;
        flex-direction: column;
        align-items: end;
      }
      @media(max-width:992px){
        position: relative;
        margin-top: 30px;
        flex-direction: row;
        justify-content: center;
      }
      @media(max-width:768px){
        flex-direction: column;
      }
      .tel{
        @include button($texte);
        margin-right: 15px;
        span{
          margin-left: 10px;
          color : $blanc;
          font-size: 22px;
        }
        @media(max-width:1650px){
          margin-bottom: 20px;
          font-size: 20px;
          margin-right: 0;
          span{
            font-size: 20px;
          }
        }
        @media(max-width:1200px){
          font-size: 18px;
          padding: 10px 15px 8px;
          span{
            font-size: 18px;
          }
        }
        @media(max-width:992px){
          margin-bottom: 0;
          margin-right: 20px;
        }
        @media(max-width:768px){
          margin-bottom: 20px;
          margin-right: 0;
        }
        @media(max-width:520px){
          font-size: 16px;
          span{
            font-size: 16px;
            margin-left: 0;
          }
          i{
            display: none;
          }
        }
      }
      .email{
        @include button($texte);
        span{
          margin-left: 10px;
          color : $blanc;
          font-size: 22px;
        }
        @media(max-width:1650px){
          font-size: 20px;
          span{
            font-size: 20px;
          }
        }
        @media(max-width:1200px){
          font-size: 18px;
          padding: 10px 15px 8px;
          span{
            font-size: 18px;
          }
        }
        @media(max-width:520px){
          font-size: 16px;
          span{
            font-size: 16px;
            margin-left: 0;
          }
          i{
            display: none;
          }
        }
      }
    }
  }
}
.footer-programme{
  @include couleur_footer($marron);
}
.footer-immobilier{
  @include couleur_footer($turquoise);
}
.footer-entreprise{
  @include couleur_footer($bleu_marine);
}





#footer{
  background: #3d3d3c;
  padding: 50px 0 40px;
  *{
    color : $blanc;
    text-decoration: none;
  }
  .colonnes{
    display: flex;
    justify-content: space-between;
    gap: 20px;
    @media(max-width:768px){
      flex-direction: column;
      width: 300px;
      margin: 0 auto;
      text-align: center;
      max-width: 100%;
    }
    .logo{
      h2 img{
        width: 250px;
        @media(max-width:1650px){
          width: 220px;
        }
        @media(max-width:1200px){
          width: 190px;
        }
        @media(max-width:992px){
          width: 150px;
        }
        @media(max-width:768px){
          width: 150px;
        }
      }
    }
    h3{
      font-weight: 700;
      margin-bottom: 15px;
      font-size: 24px;
      @media(max-width:1650px){
        font-size: 22px;
      }
      @media(max-width:1200px){
        font-size: 20px;
      }
      @media(max-width:992px){
        font-size: 18px;
      }
    }
    ul{
      list-style-type: none;
      padding-left: 0;
      li{
        margin-bottom: 5px;
        a{
          font-size: 18px;
          transition : $trans;
          @media(max-width:1200px){
            font-size: 16px;
          }
          @media(max-width:992px){
            font-size: 15px;
          }
          @media(max-width:768px){
            font-size: 16px;
          }
          &:hover{
            color : $marron;
          }
        }
      }
    }
    .rs{
      display: flex;
      align-items: center;
      flex-direction: column;
      .logos-rs{
        display: flex;
        margin-bottom: 30px;
        .logo{
          margin-right: 5px;
          i{
            font-size: 52px;
            transition : $trans;
            @media(max-width:1650px){
              font-size: 48px;
            }
            @media(max-width:1200px){
              font-size: 42px;
            }
            @media(max-width:992px){
              font-size: 36px;
            }
            @media(max-width:768px){
              font-size: 32px;
            }
          }
          &:hover i{
            color : $marron;
          }
        }
      }
      #note-google{
        .etoile{
          @media(max-width:1200px){
            width: 20px;
          }
          @media(max-width:992px){
            width: 16px;
          }
        }
        .texte{
          margin-top: 15px;
          .logo-google{
            margin: 0 auto;
            width: 150px;
            @media(max-width:1650px){
              width: 130px;
            }
            @media(max-width:1200px){
              width: 120px;
            }
            @media(max-width:992px){
              width: 100px;
            }
            @media(max-width:768px){
              width: 80px;
            }
          }
        }
      }
    }
  }
}
#menu-footer-3{
  background: #3d3d3c;
  text-align: center;
  padding-top: 30px;
  padding-bottom: 20px;
  .copyright{
    color : $blanc;
    font-size: 16px;
    margin-bottom: 5px;
    @media(max-width:768px){
      font-size: 15px;
    }
  }
  ul{
    list-style-type: none;
    padding-left: 0;
    display: flex;
    justify-content: center;
    @media(max-width:768px){
      flex-direction: column;
    }
    li{
      a{
        color : $blanc;
        text-decoration: none;
        transition : $trans;
        font-size: 16px;
        @media(max-width:768px){
          font-size: 15px;
        }
        &:after{
          content : ' - ';
          padding-left: 3px;
          padding-right: 3px;
          @media(max-width:768px){
            display: none;
          }
        }
        &:hover{
          color : $marron;
        }
      }
      &:last-of-type a:after{
        display: none;
      }
    }
  }
}


.ui-widget-content.ui-autocomplete{
  max-height : 400px;
  overflow-y: auto;   /* prevent horizontal scrollbar */
  overflow-x: hidden; /* add padding to account for vertical scrollbar */
  z-index:1000 !important;
  width: 300px $i;
}

/*--------- RECHERCHE-----------*/
.page-template-recherche-programmes,
.page-template-template-mobile-biens,
.page-template-template-selection-tpl{

  #main{
    padding-top: 0;

    //Carte des programmes
    #carte-programmes{
      height: 600px;
      position: relative;
      z-index: 1;
      @media(max-width:1200px){
        height: 500px;
      }
      @media(max-width:992px){
        height: 400px;
      }
      @media(max-width:768px){
        height: 500px;
      }
      .mycluster{
        height: 40px;
        width: 40px;
        border-radius: 50%;
        background-color: transparentize($marron,0.1);
        color: $blanc;
        text-align: center;
        font-size: 18px;
        line-height: 40px;
        margin-top: -20px;
        margin-left: -20px;
        box-shadow : 0 0 0px 10px transparentize($marron,0.8);
      }

      @include produits();

      .leaflet-popup{
        bottom: -20px $i;
        left: -147px $i;
        //margin-bottom: 0;
        .leaflet-popup-content-wrapper{
          background: transparent;
          box-shadow: none;
          padding: 0;
          border-radius: 0;
          .leaflet-popup-content{
            padding: 0;
            margin: 0 0 -4px 0;
            a.produit{
              margin: 0;
              width: 300px;
              background: $blanc;
              border-top-right-radius: 20px;
            }
          }
        }
        .leaflet-popup-tip-container{
          margin-top: 4px;
        }
      }
    }

    //Moteur de recherche Page Recherche
    #moteur-recherche{
      visibility: hidden;
      @include moteur_recherche();
      background: $blanc;
      padding: 20px 0;

      #moteur{
        justify-content: center;
        @media(max-width:1200px){
          flex-wrap: wrap;
          &>div{
            margin-bottom: 15px;
          }
        }
        @media(max-width:768px){
          width: 300px;
          max-width: 100%;
          margin: 0 auto;
        }
        .conteneur-emplacement{
          border-right: 1px solid $gris;
          @media(max-width:768px){
            border-right: 0;
            width: 100%;
            padding: 0;
          }
        }
        .conteneur-typologie{
          padding-left: 30px;
          width: 145px;
          @media(max-width:768px){
            border-right: 0;
            width: 100%;
            padding: 0;
          }
        }
        .conteneur-logement{
          width: 140px;
          @media(max-width:768px){
            border-right: 0;
            width: 100%;
            padding: 0;
          }
        }
        .conteneur-dispositif{
          padding-right: 30px;
          padding-left: 30px;
          border-right: 1px solid $gris;
          display: flex;
          align-items: center;
          width: 175px;
          @media(max-width:768px){
            border-right: 0;
            width: 100%;
            padding: 0;
          }
        }
        .conteneur-budget{
          padding-right: 30px;
          padding-left: 30px;
          border-right: 1px solid $gris;
          display: flex;
          width: 175px;
          align-items: center;
          @media(max-width:768px){
            border-right: 0;
            width: 100%;
            padding: 0;
          }
          .box-prix{
            display: flex;
            align-items: center;
            @media(max-width:768px){
              width: 100%;
            }
          }
        }
        .conteneur-date{
          padding-right: 30px;
          padding-left: 30px;
          display: flex;
          align-items: center;
          width: 200px;
          @media(max-width:768px){
            width: 100%;
            padding: 0;
          }
        }

        .search{
          background: $texte;
          @media(max-width:768px){
            width: 100%;
          }
          &:hover{
            background: $marron;
          }
        }
      }
    }

    //Liste des résultats
    #resultats-recherche{
      visibility: hidden;
      padding: 50px 15px;
      h1{
        font-size: 24px;
        margin-bottom: 15px;
        @media(max-width:768px){
          text-align: center;
          margin-bottom: 20px;
          font-size: 22px;
        }
      }
      .produits{
        display: flex;
        flex-wrap: wrap;

        @include produits();
        .produit{
          margin : 15px 15px 30px;
          max-width: calc(25% - 30px);
          @media(max-width:1200px){
            max-width: calc(33.33% - 30px);
          }
          @media(max-width:992px){
            max-width: calc(50% - 30px);
          }
          @media(max-width:768px){
            max-width: 100%;
            margin: 0 0 30px;
          }
        }
      }
    }
  }
}
.page-template-template-selection-tpl #main #moteur{
  border-top: 0;
}
.page-template-recherche-programmes,
.page-template-template-mobile-biens{
  #main #resultats-recherche .no-results{
    margin: 100px 0;
  }
  #nb-resultats{
    display: none;
  }
}



/*-----------PAGE PROGRAMME DETAIL--------------*/
.single-programme,
.single-bien-immobilier{
  #main{
    padding-top: 0;
    overflow-x: hidden;
    .conteneur-presentation{
      display: flex;
      @media(max-width:992px){
        flex-wrap: wrap;
      }
      .gauche{
        padding-top: 30px;
        width: 51%;
        padding-right: 65px;
        @media(max-width:1650px){
          padding-right: 50px;
        }
        @media(max-width:992px){
          padding-right: 0;
          width: 100%;
        }
        .conteneur-haut{
          display: flex;
          justify-content: space-between;
          @media(max-width:520px){
            flex-direction: column;
            align-items: flex-start;
          }
          .titres{
            margin-right: 30px;
            @media(max-width:520px){
              order : 2;
            }
            h2{
              color : lighten($noir,50%);
              visibility: hidden;
              @media(max-width:1650px){
                font-size: 28px;
              }
              @media(max-width:1200px){
                font-size: 24px;
              }
              @media(max-width:992px){
                font-size: 22px;
              }
              @media(max-width:768px){
                font-size: 20px;
              }
            }
            h1{
              visibility: hidden;
              font-weight: bold;
              margin-bottom: 30px;
              text-transform: uppercase;
              @media(max-width:1650px){
                font-size: 36px;
              }
              @media(max-width:1200px){
                font-size: 32px;
              }
              @media(max-width:992px){
                font-size: 28px;
              }
              @media(max-width:768px){
                font-size: 24px;
              }
            }
          }
          .rappel-brochure{
            display: flex;
            justify-content: flex-end;
            flex-shrink: 1;
            @media(max-width:520px){
              order : 1;
              margin-bottom: 20px;
            }
            button{
              border : 0;
              display: flex;
              align-items: center;
              flex-direction: column;
              background: none;
              margin: 0 5px;
              margin-top: 5px;
              transition : $trans;
              visibility: hidden;
              img{
                margin-bottom: 10px;
                width: 40px;
                @media(max-width:1200px){
                  width: 35px;
                }
                @media(max-width:992px){
                  width: 30px;
                }
                @media(max-width:768px){
                  width: 25px;
                }
              }
              span{
                color: $marron;
                font-weight: bold;
                font-size: 14px;
                @media(max-width:992px){
                  font-size: 13px;
                }
              }
              &:hover{
                margin-bottom: 5px;
                margin-top: 0;
              }
            }
          }
        }

        #certif{
          list-style-type: none;
          display: flex;
          flex-wrap: wrap;
          justify-content: flex-start;
          align-items: baseline;
          visibility: hidden;
          padding-left: 0;
          li{
            margin-right: 5px;
            margin-bottom: 5px;
            img{
              height: 45px;
              @media(max-width:1200px){
                height: 40px;
              }
              @media(max-width:768px){
                height: 35px;
              }
            }
          }
        }
        .intro{
          margin-top: 30px;
          padding-top: 30px;
          position: relative;
          font-size: 18px;
          margin-bottom: 30px;
          visibility: hidden;
          text-align: justify;
          @media(max-width:1650px){
            font-size: 17px;
          }
          &:before{
            content : "";
            width: 70%;
            display: block;
            position: absolute;
            top: 0;
            height: 2px;
            background: $gris_clair;
          }
        }
        #grille_prix{
          padding: 20px 30px;
          background: $blanc;
          border-radius : 20px;
          overflow: hidden;
          border : 0;
          @media(max-width:992px){
            margin-bottom: 30px;
          }
          tr{
            background: none;
            border-bottom : 1px solid $gris_clair;
            td{
              border :0;
              &.titre-soustab{
                text-align: left;
                background: $blanc;
                padding: 10px 15px 10px 0;
                font-size: 18px;
                font-weight: bold;
                width: 100%;
                @media(max-width:1650px){
                  font-size: 17px;
                }
                span{
                  font-size: 24px;
                  margin-right: 5px;
                  @media(max-width:1650px){
                    font-size: 22px;
                  }
                }
              }
              &.bouton-form{
                background: $blanc;
                white-space: nowrap;
                width: auto;
                a{
                  color : $marron;
                  transition : $trans;
                  cursor : pointer;
                  text-decoration: none;
                  &:hover{
                    color : $texte;
                  }
                }
              }
            }
            &:last-of-type{
              border :0;
            }
          }
        }
      }
      .droite{
        visibility: hidden;
        width: 49%;
        @media(max-width:992px){
          width: 100%;
        }
        .conteneur-carrousel{
          position: relative;
          border-radius: 20px;
          overflow: hidden;
          @include slide_prog();
          .bloc-haut{
            padding-right: 10px;
            @media(max-width:520px){
              display: none;
            }
            .vignette-fleche .vignette-haut{
              width: 240px;
              @media(max-width:1650px){
                width: 220px;
              }
              @media(max-width:1200px){
                width: 200px;
              }
            }
          }
          .slick-prev,
          .slick-next{
            position: absolute;
            bottom: 15px;
            right: 90px;
            background: $blanc;
            color : $texte;
            border-radius : 100%;
            width: 50px;
            height: 50px;
            z-index: 1;
            border : 0;
            font-size: 25px;
            transition : $trans;
            @media(max-width:1650px){
              width: 40px;
              height: 40px;
              font-size: 22px;
              right: 70px;
            }
            @media(max-width:768px){
              width: 30px;
              height: 30px;
              font-size: 18px;
              right: 50px;
            }
            &:hover{
              background: $gris_clair;
            }
          }
          .slick-next{
            right: 20px;
            @media(max-width:768px){
              right: 15px;
            }
          }

        }
      }
    }

    //Bandeau avancée des travaux
    #frise-chronologique {
      margin-top: 70px;
      visibility: hidden;
      @media(max-width:992px){
        margin-top: 50px;
      }
      .timeline {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        @media(max-width:992px){
          flex-direction: column;
          width: 250px;
          margin: 0 auto;
          align-items: flex-start;
        }
        @media(max-width:768px){
          width: 220px;
        }
        .segment {
          position: absolute;
          top: 30px;
          left: 10%;
          width: 80%;
          height: 3px;
          background: #efe3d3;
          z-index: 1;
          @media(max-width:992px){
            top: 25px;
            width: 3px;
            height: calc(100% - 50px);
            left:20px;
          }
          @media(max-width:768px){
            top: 20px;
            width: 3px;
            height: calc(100% - 40px);
            left:15px;
          }
        }

        .step {
          position: relative;
          text-align: center;
          z-index: 2;
          flex: 1;
          @media(max-width:992px){
            display: flex;
            justify-content: flex-start;
            align-items: baseline;
          }

          .circle {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: #efe3d3;
            color: $blanc;
            font-weight: bold;
            line-height: 60px;
            margin: 0 auto 15px;
            transition: all 0.3s ease;
            font-size: 22px;
            @media(max-width:1200px){
              width: 50px;
              height: 50px;
              line-height: 50px;
              font-size: 20px;
            }
            @media(max-width:992px){
              margin-right: 20px;
              width: 40px;
              height: 40px;
              line-height: 40px;
              font-size: 18px;
            }
            @media(max-width:768px){
              margin-right: 15px;
              width: 30px;
              height: 30px;
              line-height: 30px;
              font-size: 16px;
            }
          }

          .label {
            font-weight: bold;
            color: #d9d8d8;
            font-size: 18px;
            @media(max-width:1200px){
              font-size: 16px;
            }
          }

          &.active {
            .circle {
              background: $marron;
              color: $blanc;
            }

            .label {
              color: $texte;
            }
          }
        }
      }

    }

    //Descriptif edito
    #descriptif{
      margin: 80px auto 30px;
      background: $blanc;
      padding: 50px 70px;
      border-radius : 20px;
      visibility: hidden;
      @media(max-width:1200px){
        padding: 40px 50px;
      }
      @media(max-width:992px){
        margin-top: 50px;
        padding: 30px 40px;
      }
      @media(max-width:768px){
        margin-top: 30px;
        padding: 20px 30px;
      }
      h2{
        font-size: 28px;
        font-weight: bold;
        color : $marron;
        @media(max-width:1200px){
          font-size: 26px;
        }
        @media(max-width:768px){
          font-size: 24px;
          text-align: center;
          display: flex;
          flex-direction: column;
          margin-bottom: 15px;
        }
        @media(max-width:520px){
          font-size: 22px;
        }
        img{
          width: 50px;
          margin-right: 18px;
          @media(max-width:1200px){
            width: 40px;
          }
          @media(max-width:768px){
            width: 35px;
            margin: 10px auto;
          }
        }
      }
      .desc{
        padding-left: 70px;
        text-align: justify;
        @media(max-width:1200px){
          padding-left: 60px;
        }
        @media(max-width:768px){
          padding: 0px;
        }
      }
    }

    //Bandeau carte et à proximité
    #localisation{
      margin-top: 50px;
      display: flex;
      visibility: hidden;
      @media(max-width:768px){
        flex-wrap: wrap;
      }
      .gauche{
        padding-right: 50px;
        width: 66%;
        @media(max-width:1200px){
          width: 60%;
        }
        @media(max-width:768px){
          width: 100%;
          padding: 0;
          margin-bottom: 50px;
        }
        #carte-simple{
          width: 100%;
          min-height: 400px;
          height:100%;
          border-radius : 20px;
          z-index: 1;
        }
      }
      .droite{
        background: $blanc;
        border-radius : 20px;
        padding: 50px;
        width: 34%;
        @media(max-width:1200px){
          width: 40%;
          padding: 30px;
        }
        @media(max-width:992px){
          padding: 20px;
        }
        @media(max-width:768px){
          width: 100%;
        }
        #proximite{
          h3{
            margin-bottom: 25px;
            padding-bottom: 15px;
            position: relative;
            font-weight: bold;
            @media(max-width:1200px){
              font-size: 24px;
            }
            @media(max-width:992px){
              font-size: 22px;
              margin-bottom: 15px;
              padding-bottom: 10px;
            }
            @media(max-width:768px){
              font-size: 20px;
            }
            &:after{
              content: "";
              width: 70%;
              display: block;
              position: absolute;
              bottom: 0;
              height: 2px;
              background: $gris_clair;
            }
          }
          ul{
            list-style-type: none;
            padding-left: 0;
            margin: 0;
            li{
              margin-bottom: 15px;
              font-size: 18px;
              font-weight: bold;
              display: flex;
              align-items: center;
              @media(max-width:992px){
                font-size: 16px;
                margin-bottom: 10px;
              }
              img{
                margin-right: 15px;
                @media(max-width:992px){
                  width: 25px;
                }
              }
              span{
                font-weight: normal;
              }
              &:last-of-type{
                margin-bottom: 0;
              }
            }
          }
        }
      }
    }

    //Bandeau documents et rappel+brochure
    #documents{
      display: flex;
      margin-top: 50px;
      visibility: hidden;
      @media(max-width:768px){
        flex-wrap: wrap;
      }
      .gauche{
        width: calc(66% - 50px);
        background: $blanc;
        border-radius : 20px;
        padding: 50px 50px 30px 50px;
        margin-right: 50px;
        @media(max-width:1200px){
          padding: 30px 30px 20px 30px;
        }
        @media(max-width:992px){
          padding: 20px 20px 15px 20px;
        }
        @media(max-width:768px){
          width: 100%;
          margin-right: 0;
          margin-bottom: 50px;
        }
        h3{
          margin-bottom: 25px;
          padding-bottom: 15px;
          position: relative;
          font-weight: bold;
          @media(max-width:1200px){
            font-size: 24px;
          }
          @media(max-width:992px){
            font-size: 22px;
            margin-bottom: 15px;
            padding-bottom: 10px;
          }
          @media(max-width:768px){
            font-size: 20px;
          }
          &:after{
            content: "";
            width: 70%;
            display: block;
            position: absolute;
            bottom: 0;
            height: 2px;
            background: $gris_clair;
          }
        }
        ul{
          list-style-type: none;
          padding-left: 0;
          margin: 0;
          display: flex;
          flex-wrap: wrap;
          li{
            margin-bottom: 20px;
            width: 50%;
            @media(max-width:520px){
              width: 100%;
            }
            a{
              color : $texte;
              font-size: 22px;
              text-decoration: none;
              display: flex;
              padding-right: 5px;
              transition : $trans;
              font-weight: bold;
              align-items: baseline;
              @media(max-width:1200px){
                font-size: 20px;
              }
              @media(max-width:992px) {
                font-size: 18px;
              }
              &:hover{
                padding-right: 0;
                padding-left: 5px;
              }
              i{
                font-size: 26px;
                margin-right: 10px;
                @media(max-width:1200px){
                  font-size: 24px;
                }
                @media(max-width:992px) {
                  font-size: 22px;
                }
              }
            }
            &:last-of-type{
              margin-bottom: 0;
            }
          }
        }
      }
      .droite{
        width: 34%;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        border-radius: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        @media(max-width:768px){
          width: 100%;
          height: 200px;
        }
        .rappel-brochure{
          background: transparentize($marron, 0.2);
          display: flex;
          border-radius : 20px;
          padding: 25px;
          justify-content: center;
          align-items: center;
          visibility: hidden;
          @media(max-width:1200px){
            padding: 20px;
          }
          @media(max-width:992px){
            padding: 10px;
          }
          button{
            border: 0;
            display: flex;
            align-items: center;
            flex-direction: column;
            background: none;
            margin: 5px 15px 0;
            visibility: hidden;
            transition : $trans;
            @media(max-width:992px){
              margin: 5px 10px 0;
            }
            &:hover{
              margin-top: 0;
              margin-bottom: 5px;
            }
            img{
              margin-bottom: 10px;
              width: 45px;
              @media(max-width:1200px){
                width: 35px;
              }
              @media(max-width:992px){
                width: 30px;
              }
            }
            span{
              color: $blanc;
              font-weight: bold;
              font-size: 15px;
              @media(max-width:992px){
                font-size: 14px;
              }
            }
          }
        }
      }
    }

    //Bandeau les plus et visuel
    #les-plus{
      display: flex;
      margin-top: 50px;
      visibility: hidden;
      @media(max-width:768px){
        flex-wrap: wrap;
      }
      .gauche{
        width: 34%;
        background: $blanc;
        border-radius : 20px;
        padding: 50px;
        @media(max-width:1200px){
          width: 40%;
          padding: 30px;
        }
        @media(max-width:992px){
          padding: 20px;
        }
        @media(max-width:768px){
          width: 100%;
          margin-bottom: 50px;
        }
        h3{
          margin-bottom: 25px;
          padding-bottom: 15px;
          position: relative;
          font-weight: bold;
          @media(max-width:1200px){
            font-size: 24px;
          }
          @media(max-width:992px){
            font-size: 22px;
            margin-bottom: 15px;
            padding-bottom: 10px;
          }
          @media(max-width:768px){
            font-size: 20px;
          }
          &:after{
            content: "";
            width: 70%;
            display: block;
            position: absolute;
            bottom: 0;
            height: 2px;
            background: $gris_clair;
          }
        }
        ul{
          list-style-type: none;
          padding-left: 0;
          margin: 0;
          li{
            margin-bottom: 15px;
            font-size: 18px;
            font-weight: bold;
            display: flex;
            align-items: center;
            @media(max-width:992px){
              font-size: 16px;
              margin-bottom: 10px;
            }
            img{
              margin-right: 15px;
              @media(max-width:992px){
                width: 25px;
              }
            }
            img{
              margin-right: 15px;
            }
            &:last-of-type{
              margin-bottom: 0;
            }
          }
        }
      }
      .droite{
        width: calc(66% - 50px);
        margin-left: 50px;
        border-radius : 20px;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        @media(max-width:1200px){
          width: 60%;
        }
        @media(max-width:768px){
          width: 100%;
          margin-left: 0;
          height: 250px;
        }
      }
    }

    //Bandeau calculatrice
    #simulateur{
      width: 600px;
      max-width: 100%;
      text-align: center;
      margin: 100px auto 30px;
      visibility: hidden;
      @media(max-width:992px){
        margin-top: 70px;
      }
      @media(max-width:768px){
        margin-top: 50px;
      }
      h3{
        font-weight: bold;
        @media(max-width:1200px){
          font-size: 24px;
        }
        @media(max-width:992px){
          font-size: 22px;
        }
        @media(max-width:768px){
          font-size: 20px;
        }
      }
      iframe{
        margin-bottom: 50px;
      }
      .boutons{
        display: flex;
        justify-content: center;
        .bouton-appel{
          display: inline-block;
          margin: 0 30px;
          cursor: pointer;
          padding-top: 5px;
          transition: $trans;
          @media(max-width:768px){
            margin: 0 15px;
          }
          img{
            @media(max-width:1200px){
              height: 40px;
            }
            @media(max-width:992px){
              height: 35px;
            }
          }
          span{
            display: block;
            font-weight: bold;
            line-height: normal;
            text-align: center;
            margin-top: 15px;
            @media(max-width:1200px){
              font-size: 15px;
            }
            @media(max-width:992px){
              font-size: 14px;
            }
          }
          &.rappel span{
            color : $marron;
          }
          &:hover{
            padding-bottom: 5px;
            padding-top: 0;
          }
        }
      }
    }

    //Remontées de programmes/biens
    #remontees-produits{
      display: flex;
      flex-wrap: wrap;
      visibility: hidden;
      @include produits();
      background: $blanc;
      padding: 30px 100px 50px;
      border-radius : 10px;
      margin: 100px auto;
      @media(max-width:1650px){
        padding: 30px 50px 50px;
      }
      @media(max-width:992px){
        width: 450px;
        margin: 70px auto;
        padding: 30px 30px 15px;
      }
      @media(max-width:768px){
        margin: 50px auto;
      }
      @media(max-width:520px){
        width: auto;
        padding: 15px;
      }
      .produit{
        margin: 15px 15px 30px;
        @media(max-width:992px){
          margin-bottom: 0;
        }
      }
      .slick-prev,
      .slick-next{
        border: 0;
        font-size: 0;
        line-height: 0;
        color: transparent;
        position: absolute;
        background: none;
        top: calc(50% - 20px);
        z-index: 5;
        left: 30px;
        @media(max-width:1650px){
          left: 10px;
        }
        @media(max-width:992px){
          left: 0;
        }
        @media(max-width:520px){
          left: -10px;
        }
        &:before{
          font-family: 'Font Awesome 6 Pro';
          content : '\f053';
          border: 0;
          color : $texte;
          font-size: 26px;
          display: inline-block;
          width: 40px;
          height: 40px;
          font-weight: 600;
          line-height: 40px;
          border-radius : 100%;
          margin-left: auto;
          padding-right: 5px;
        }
      }
      .slick-next{
        left: auto;
        right: 30px;
        @media(max-width:1650px){
          right: 10px;
        }
        @media(max-width:992px){
          right: 0;
        }
        @media(max-width:520px){
          right: -10px;
        }

        &:before{
          content : '\f054';
          padding-right: 0;
          padding-left: 5px;

        }
      }
    }
  }
}
.btn-primary {
  background: $marron $i;
  &:hover{
    background: darken($marron,10%) $i;
  }
}


//SPECIFICITES BIENS IMMOBILIERS / ENTREPRISE
@mixin couleur_bien($couleur:$turquoise){
  .conteneur-presentation .bouton-appel span,
  .conteneur-presentation .bouton-brochure span,
  #descriptif h2{
    color : $couleur $i;
  }
  #documents .droite .rappel-brochure{
    background: transparentize($couleur,0.2);
  }

}
.single-bien-immobilier #main.immobilier{
  @include couleur_bien($turquoise);
}
.single-bien-immobilier #main.entreprise{
  @include couleur_bien($bleu_marine);
}
.single-bien-immobilier  #popup-bien .wpforms-submit{
  background: $texte $i;
}

.single-bien-immobilier #main{
  .conteneur-presentation{
    .infos-pictos{
      h3{
        margin-bottom: 20px;
        font-weight: bold;
        font-size: 28px;
        @media(max-width:1200px){
          font-size: 26px;
        }
        @media(max-width:992px){
          font-size: 24px;
        }
        @media(max-width:768px){
          font-size: 22px;
        }
      }
      ul{
        display: flex;
        flex-wrap: wrap;
        list-style-type: none;
        padding-left: 0;
        li{
          width: 48%;
          margin-bottom: 15px;
          font-weight: bold;
          display: flex;
          align-items: center;
          @media(max-width:768px){
            font-size: 15px;
          }
          @media(max-width:520px){
            font-size: 14px;
            margin-bottom: 10px;
          }
          img{
            margin-right: 15px;
            flex-shrink: 0;
            @media(max-width:992px){
              height: 25px;
            }
            @media(max-width:768px){
              height: 20px;
              margin-right: 10px;
            }
          }
          &:nth-child(odd){
            margin-right: 4%;
          }
        }
      }
    }
    .droite .conteneur-carrousel .bloc-haut{
      @media(max-width:520px){
        display: inline-block;
        width: auto;
        .vignette-fleche,
        .typologie-haut{
          display: none;
        }
        .prix-haut{
          padding-right: 0;
          span:first-of-type{
            display: none;
          }
          strong{
            font-size: 16px;
          }
        }
      }
    }
  }
  #descriptif{
    margin-top: 30px;
    h2.quartier img{
      width: 43px;
      padding-left: 8px;
      margin-right: 25px;
    }
    h2.quartier,
    h2.residence{
      @media(max-width:1200px){
        font-size: 26px;
      }
      @media(max-width:768px){
        font-size: 24px;
        text-align: center;
        display: flex;
        flex-direction: column;
        margin-bottom: 15px;
      }
      @media(max-width:520px){
        font-size: 22px;
      }
      img{
        @media(max-width:1200px){
          width: 40px;
        }
        @media(max-width:768px){
          width: 35px;
          margin: 10px auto;
        }
      }
    }

    #bilan{
      margin-top: 30px;
      h2.bilan{
        @media(max-width:1200px){
          font-size: 26px;
        }
        @media(max-width:768px){
          font-size: 24px;
          text-align: center;
          display: flex;
          flex-direction: column;
          margin-bottom: 15px;
        }
        @media(max-width:520px){
          font-size: 22px;
        }
        img{
          @media(max-width:1200px){
            width: 40px;
          }
          @media(max-width:768px){
            width: 35px;
            margin: 10px auto;
          }
        }
      }
      .conteneur-dpe{
        display: flex;
        padding-left: 68px;
        margin-top: 20px;
        @media(max-width:992px){
          flex-wrap: wrap;
        }
        @media(max-width:768px){
          padding-left: 0;
        }
        h3{
          font-size: 20px;
          color : lighten($noir,50%);
          margin-bottom: 20px;
          @media(max-width:768px){
            text-align: center;
          }
        }
        .gauche{
          width: 50%;
          @media(max-width:992px){
            width: 100%;
            margin-bottom: 30px;
          }
        }
        .droite{
          width: 50%;
          @media(max-width:992px){
            width: 100%;
          }
        }

        .grille-dpe{
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          width: max-content;
          @media(max-width:768px){
            margin: 0 auto;
          }
          .dpe,
          .dpe-indicateur {
            display: flex;
            gap: 2px;
          }
          .carre {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: $blanc;
            font-size: 16px;
            text-transform: uppercase;
            border-radius: 10px;
            font-weight: bold;
            transition: all 0.2s ease;
            @media(max-width:768px){
              width: 30px;
              height: 30px;
              font-size: 14px;
              line-height: 14px;
            }
            &.active{
              height: 60px;
              width: 50px;
              font-size: 18px;
              margin-top: -10px;
              @media(max-width:768px){
                width: 40px;
                height: 45px;
                font-size: 16px;
                margin-top: -5px;
                line-height: 16px;
              }
            }
          }
          .indicateur {
            width: 40px;
            text-align: center;
            font-size: 12px;
            visibility: hidden;
            margin-top: 10px;
            @media(max-width:768px){
              width: 30px;
              font-size: 11px;
            }
            .fleche {
              font-size: 14px;
              line-height: 1.2;
              @media(max-width:768px){
                font-size: 12px;
              }
            }
            .valeur{
              font-size: 16px;
              line-height: 1.2;
              @media(max-width:768px){
                font-size: 14px;
              }
              span{
                font-weight: bold;
                font-size: 20px;
                @media(max-width:768px){
                  font-size: 16px;
                }
              }
            }
            &.visible {
              visibility: visible;

            }
            &:nth-of-type(1).visible{  margin-left: 7px;}
            &:nth-of-type(2).visible{  margin-left: 9px;}
            &:nth-of-type(3).visible{  margin-left: 10px;}
            &:nth-of-type(4).visible{  margin-left: 12px;}
            &:nth-of-type(5).visible{  margin-left: 14px;}
            &:nth-of-type(6).visible{  margin-left: 16px;}
            &:nth-of-type(7).visible{  margin-left: 20px;}
          }
        }
      }
    }
  }
  #documents{
    .gauche{
      background: none;
      padding: 20px;
      #simulateur{
        margin: 0 auto;
        h3{
          margin-bottom: 0;
          &:after{
            display: none;
          }
        }
      }
    }
  }
}






//Blocs DPE
.conteneur-dpe{
  margin-bottom: 20px;
  h4{
    font-size: 18px;
  }
  .dpe{
    display: flex;
    position: relative;
    .carre{
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      color : $blanc;
      font-size: 16px;
      text-transform: uppercase;
      border-radius : 10px;
      font-weight: bold;
      margin-right: 2px;
      &:last-of-type{
        margin-right: 0;
      }
      &.energie{
        &.A{background:#00915f;}
        &.B{background:#46a546;}
        &.C{background:#69b469;}
        &.D{background:#f0e114;}
        &.E{background:#ebaa0a;}
        &.F{background:#e6782d;}
        &.G{background:#cd1e1e;}
        &.nc{background:#ddd;}
      }
      &.gaz{
        &.A{background:#96d2f5;}
        &.B{background:#7daacd;}
        &.C{background:#6987a5;}
        &.D{background:#505f82;}
        &.E{background:#414664;}
        &.F{background:#322d46;}
        &.G{background:#1e192d;}
        &.nc{background:#ccc;}
      }
    }
  }
}



//Accès partenaire nécessaire
.connexion-recherche{
  background: $grisclair;
  #acces-necessaire{
    background: $blanc;
    width: 500px;
    max-width: 95%;
    margin: 50px auto 70px;
    text-align: center;
    padding-top: 50px;
    padding-bottom: 30px;
    p{
      font-size: 20px;
      line-height: normal;
      @media(max-width:992px){
        font-size: 18px;
      }
    }
    #login{
      width: 250px;
      margin: 30px auto 0;
      max-width: 100%;
      label{
        font-size: 16px;
      }
      .login-submit{
        #wp-submit{
          @include button($turquoise);
          font-size: 20px;
          padding: 10px 15px;
          @media(max-width:992px){
            font-size: 18px;
            padding: 8px 15px 6px;
          }
        }
      }
    }

  }
}


//Page de login
.login {
  background: $grisclair;
}
#login{
  h1 a{
    background: url(../images/logo-mopane.png) no-repeat center;
    background-size: contain;
    width: 220px;
    pointer-events: none;
    height: 75px;
  }
  .message.register{
    display: none;
  }
  .forgetmenot{
    float: none;
  }
  #login_error{
    display: none;
  }
  .submit{
    text-align: center;
    #wp-submit{
      margin-top: 15px;
      background: $texte;
      border-color : $texte;
      font-weight: bold;
      font-size: 20px;
      float: none;
      transition : $trans;
      &:hover{
        background: darken($texte, 10%);
      }
    }
  }
  #nav,
  #backtoblog{
    display: none;
  }
}
.liens-login{
  text-align: center;
  margin-top: 25px;
  a{
    display: block;
    font-size: 18px;
    margin: 10px 0;
    font-weight: normal;
    transition: $trans;
    color : $texte;
    text-decoration: none;
    &:hover{
      color : $marron;
    }
  }
  a.retoursite{
    @include button($marron);
    padding: 7px 10px 5px;
    font-size: 18px;
    @media(max-width:992px){
      font-size: 18px;
      padding: 8px 15px 6px;
    }
  }
}
#wp-admin-bar-my-account .display-name{
  color : $blanc;
}

//Formulaire d'inscription
.page-id-197{
  #contenu-edito{
    width: 500px;
    max-width: 100%;
    h1{
      text-align: center;
    }
    #wpforms-194{
      width: 500px;
      max-width: 100%;
      .wpforms-submit{
        @include button($turquoise);
        display: table;
        margin: auto;
        font-size: 20px;
        padding: 10px 15px;
      }
    }
  }
}




/*---Cookie bar---*/
#cookie-notice{
  .cookie-notice-container{
    padding: 5px 15px;
    a{
      padding: 5px;
    }
  }
  *{
    color : $blanc;
  }
}


/*------------------GRILLE DE PRIX---------------*/
.single-grille-prix,
.single-mobile,
.single-programme{
  .entete{
    margin-bottom: 50px;
    display: inline-block;
    width: 100%;
    @media(max-width:768px){
      margin-bottom: 30px;
    }
    .gauche{
      float: left;
      margin-right: 30px;
      max-width: calc(30% - 30px);

      @media(max-width:1650px){
        width: 300px;
        max-width: calc(50% - 30px);
      }
      @media(max-width:768px){
        width: 100%;
        margin-right: 0;
        max-width: 100%;
      }
    }
    .centre{
      float: left;
      display: inline-block;
      max-width: calc(35% - 30px);
      margin-right: 30px;
      @media(max-width:1650px){
        max-width: 50%;
        margin-right: 0;
      }
      @media(max-width:768px){
        margin-top: 30px;
        width: 100%;
        margin-right: 0;
        max-width: 100%;
      }
      h1{
        font-size: 32px;
        margin-bottom: 10px;
        @media(max-width:1650px){
          font-size: 28px;
        }
      }
      .lieu{
        font-size: 20px;
        margin-bottom: 10px;
      }
      .livraison{
        background: $marron;
        padding: 5px 15px;
        color :$blanc;
        text-transform: uppercase;
        margin-bottom: 20px;
        display: inline-flex;
        align-items: center;
        img{
          width: 25px;
          margin-right: 10px;
        }
      }
      .voir-pgm{
        @include button($turquoise);
        padding: 11px 15px 12px;
        @media(max-width:1600px){
          font-size: 20px;
          padding: 8px 15px 8px;
        }
      }
    }
    .droite{
      float: right;
      padding: 0px 20px;
      max-width: 35%;
      background: $fond3;
      @media(max-width:1650px){
        max-width: 100%;
        margin-top: 30px;
        float: none;
        display: inline-block;
      }
      @media(max-width:768px){
        width: 100%;
      }
      #documents{
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        h3{
          font-size: 24px;
          font-family: 'Open Sans';
          display: inline-block;
          border-bottom: 3px solid $marron;
          margin-bottom: 15px;
          text-transform: uppercase;
          @media(max-width:1200px){
            font-size: 22px;
          }
          &:before{
            display: none;
          }
        }
        ul{
          margin-bottom: 15px;
          display: inline-block;
          li{
            padding-left: 0;
            width: 48%;
            float: left;
            @media(max-width:768px){
              width: 100%;
            }
            &:nth-of-type(odd){
              margin-right: 4%;
              @media(max-width:768px){
                margin-right: 0;
              }
            }
            &:before{
              display: none;
            }
            a{
              color: $texte;
              font-weight: normal;
              font-size: 18px;
              &:hover{
                color : $marron;
              }
              i{
                color : $marron;
                margin-right: 5px;
              }
            }
          }
        }
      }
    }
  }
  .conteneur-tableau{
    width: 100%;
    overflow-x: auto;
  }
  #grille_prix{
    visibility: hidden;
    width: 100%;
    @media(max-width:1650px){
      font-size: 15px;
    }
    tr{
      background: $fond3;
      &.legende-tab{
        font-weight: bold;
        background: $blanc;;
      }
      th{
        background: $blanc;
        color : $texte;
        text-align: center;
        padding: 10px 15px;
        font-size: 18px;
        font-weight: bold;
        &.titre-soustab{
          text-align: left;
          @media(max-width:1200px){
            font-size: 16px;
          }
        }


        &.fleche{
          text-align: right;
          .repliage{
            font-weight: normal;
            font-size: 16px;
            color : $texte;
            width: 150px;
            font-weight: bold;
            text-align: left;
            float: right;
            display: flex;
            align-items: center;
            @media(max-width:1200px){
              font-size: 14px;
            }
            &:before{
              content : '\f078';
              margin-right: 10px;
              font-size: 20px;
              font-weight: bold;
              margin-top: 2px;
              font-family: 'Font Awesome 6 Pro';
              //display: inline-block;
              background: $turquoise;
              border-radius: 100%;
              width: 30px;
              height: 30px;
              display: inline-flex;
              justify-content: center;
              color : $blanc;
              /* align-items: flex-end; */
              padding-top: 2px;
              @media(max-width:1200px){
                font-size: 18px;
              }
            }
          }
        }

      }
      td{
        border-bottom : 1px solid $grisclair;
        text-align: center;

        //font-weight: normal;
        padding: 0;
        white-space: nowrap;


        &.prix{
          min-width: 120px;
        }
        .icone-plan{
          border : 0;
          i{
            color : $turquoise;
          }
          &:hover i{
            color : $marron;
          }
        }
        &.libre span{
          color: green;
        }
        &.optionne span{
          color : red;
        }
        i{
          font-size: 24px;
        }
        .btn-option{
          background: $marron;
          text-transform: uppercase;border : 0;
          font-size: 13px;
          &:hover{
            background: darken($marron,10%);
          }
          @media(max-width:1200px){
            padding: 3px 5px;
            font-size: 12px;
          }
        }
        table.sous-tableau{

          .bandeau-typo{
            cursor : pointer;
            &.open{
              .titre-soustab,
              .fleche,
              .repliage{
                color : $blanc;
                background: $turquoise;
              }
              .fleche .repliage:before{
                content : '\f077';
                padding-top: 0;
              }
            }

          }
          .legende-tab,
          .contenu-tab{
            display: none;
            &.open{
              display : table-row;
            }
          }
          th{

          }
          td{
            padding: 10px 12px;
            font-size: 15px;
            &:first-of-type{
              text-align: left;
              padding-left: 12px;
            }
            @media(max-width:1200px){
              padding: 8px;
            }
          }
        }

      }

    }

    //Grille de prix provisoire en attente de flux fonctionnels 06/09/24

  }
  #popup-formulaire-demande,
  #popup-formulaire-demande-biens {
    display: none;
    &.open{
      display: inline-block;
      position: fixed;
      z-index: 99999;
      background: $blanc;
      top: 50%;
      left: 50%;
      text-align: center;
      padding: 30px;
      width: 600px;
      max-width: 90vw;
      overflow-y: auto;
      max-height: 90vh;
      transform: translate(-50%, -50%);
      box-shadow : 0 0 10px transparentize($noir,0.5);
      .close-popup-telechargement,
      .close-popup-telechargement-biens{
        border : 0;
        position: absolute;
        top: 0px;
        right: 0px;
      }
      h2{
        margin: -30px -30px 20px -30px;
        background: $marron;
        padding: 10px;
        color : $blanc;
        font-family: 'Open Sans';
        text-transform: uppercase;
        font-size: 24px;
      }
      h3{
        font-weight: bold;
        font-size: 20px;
      }
      #loginform,
      #form-demande-acces{
        width: 280px;
        margin: 20px auto 30px;
        label{
          font-size: 15px;
          margin-bottom: 5px;
        }
        .input,
        .form-control{
          border-radius : 5px $i;
          height: 35px $i;
        }
        .login-remember{
          display: none;
        }
        #wp-submit,
        .wpforms-submit {
          @include button($marron);
          border-radius : 5px;
          font-size: 18px;
          font-family: 'Open Sans';
          text-transform: none;
          padding: 5px 10px;
          @media(max-width:520px){
            font-size: 16px;
            padding: 3px 8px;
          }
        }
        .wpforms-container{
          margin-bottom: 0;
        }
      }
      #form-demande-acces{
        width: 100%;
        margin-bottom: 0;
        @media(max-width:520px){
          .wpforms-field-container{
            display: flex;
            flex-wrap: wrap;
          }
          .wpforms-one-half{
            width: 280px;
            max-width: 100%;
            margin: 0 auto $i;
          }
        }
        .wpforms-is-recaptcha{
          padding: 0;
        }
      }
      .ou{
        position: relative;
        height: 40px;
        margin-bottom: 25px;
        p{
          background: $blanc;
          display: inline-block;
          padding: 5px 15px;
          z-index: 2;
          font-size: 20px;
          position: relative;
        }
        &:before{
          content : '';
          display: inline-block;
          width: 100%;
          height: 1px;
          background: $marron;
          position: absolute;
          left: 0;
          top: 50%;
          z-index: 1;
        }
      }
    }
  }
  .fond-popup,
  .fond-popup-biens{
    display: none;
    &.open{
      display: inline-block;
      position: fixed;
      z-index: 99998;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      height: 100vh;
      width: 100vw;
      background: transparentize($noir,0.7);
    }
  }
}
.page-demande-option{
  .progoption{
    font-size: 20px;
    @media(max-width:1200px){
      font-size: 18px;
    }
  }
  .formulaire-option .wpforms-form{
    background: $fond3;
    border : 1px solid $grisclair;
    padding: 0px 30px 30px;
    .wpforms-field-divider{
      margin-top: 20px;
      width: 100%;
      display: inline-block;
      @media(max-width:768px){
        h3{
          font-size: 20px;
        }
      }
    }
    .wpforms-error{
      color : lighten($marron,10%);
      margin-top: 2px;
      font-size: 16px;
    }
    .wpforms-field{
      @media(max-width:768px){
        width: 100%;
        margin-left: 0;
      }
    }
    li:before{
      display: none;
    }
    input{
      color : $texte;
      &[type=text],
      &[type=tel],
      &[type=email]{
        height: 35px;
      }
    }
    .rgpd{
      margin-top: 10px;
      li{
        display: flex;
      }
      input{
        flex-shrink: 0;

      }
      label {
        font-size: 14px;
        @media(max-width:1200px){
          font-size: 12px;
        }
        a{
          text-decoration: underline;
          transition: $trans;
          &:hover{
            color: $turquoise;
          }
        }
      }
    }
    .wpforms-submit{
      @include button($marron);
      display: table;
      margin: 10px auto 0;
      &:hover{
        border : 0;
      }
      @media(max-width:1200px){
        font-size: 18px;
        padding: 8px 15px 6px;
      }
    }
  }
  .wpforms-confirmation-container-full{
    background: $marron;
    border: 0;
    display: inline-block;
    p{
      font-size: 16px;
      color : $blanc;
    }
    &+p{
      display: none;
    }
  }
  .retour-grille{
    margin-top: 30px;
    @include button($turquoise);
    font-size: 20px;
    text-align: center;
    padding: 5px 15px;
    i{
      margin-right: 10px;
    }
    @media(max-width:1200px){
      font-size: 18px;
      padding: 5px 15px;
    }
    &:hover{
      color : $blanc;
    }
  }
}


.page-conf-ref-prosp{
  .retour-prog{
    @include button($turquoise);
    display: table;
    margin: 30px auto 0;
    font-size: 20px;
    text-align: center;
    padding: 5px 15px;
    i{
      margin-right: 10px;
    }
    @media(max-width:1200px){
      font-size: 18px;
      padding: 5px 15px;
    }
    &:hover{
      color : $blanc;
    }
  }
}

//Cache l'icone recaptcha en bas à droite
.grecaptcha-badge{
  display: none $i;
}


//Popup de captation de leads
.sgpb-popup-dialog-main-div-wrapper{
  .sgpb-popup-dialog-main-div-theme-wrapper-3,
  .sgpb-popup-dialog-main-div-theme-wrapper-6{
    #sgpb-popup-dialog-main-div{
      width: 600px $i;
      border :0 $i;
    }
    #captation-leads{
      .texte-captation{
        padding: 30px 20px 15px;
        background: $gris;
        h2{
          font-family: "Open Sans";
          font-size: 28px;
          color : $turquoise;
          text-align: center;
        }
        h3{
          font-size: 16px;
          font-family: "Open Sans";
          color : $blanc;
          text-align: center;
        }
      }
      .wpforms-container-full{
        margin-bottom: 0;
        form{
          color : $blanc;

          #wpforms-166-field_6-container,
          #wpforms-166-field_14-container{
            display: none;
          }

          .wpforms-error{
            color : lighten($marron,10%);
            margin-top: 2px;
            font-size: 14px;
          }
          .wpforms-field{
            padding: 7px 0;
            @media(max-width:768px){
              width: 100%;
              margin-left: 0;
            }
          }
          input{
            color : $texte;
            &[type=text],
            &[type=tel],
            &[type=email]{
              height: 30px;
              font-size: 15px;
            }
          }
          textarea{
            color : $texte;
            height: 60px;
            font-size: 15px;
          }
          .rgpd{
            li{
              display: flex;
            }
            input{
              flex-shrink: 0;

            }
            label {
              font-size: 12px;
              color : $blanc;
              @media(max-width:1200px){
                font-size: 12px;
              }
              a{
                color : $blanc;
                text-decoration: underline;
                transition: $trans;
                &:hover{
                  color: $turquoise;
                }
              }
            }
          }
          .wpforms-submit{
            @include button($marron);
            display: table;
            margin: 0px auto 0;
            font-size: 18px;
            padding: 10px 20px 8px;
            @media(max-width:1200px){
              font-size: 16px;
              padding: 8px 15px 6px;
            }
          }
          .wpforms-is-recaptcha{
            display: none;
          }
        }
      }
    }
  }
}
[class^="sgpb-main-popup-data-container-"]{ //Mis en commentaire car fait apparaître du blanc en bas de page
  //position: relative $i;
  z-index: -10;
}

//Pages Mobiles
.single-mobile #main{
  padding : 50px 0;
  margin: 0;
  @media(max-width:768px){
    padding: 20px 0;
  }
  .lien-retour{
    @include button($turquoise);
    margin-bottom: 20px;
    padding: 2px 10px 2px;
    font-size: 20px;
    @media(max-width:1200px){
      padding: 2px 10px 2px;
      font-size: 18px;
      margin-bottom: 20px;
    }
    @media(max-width:768px){
      font-size: 16px;
      padding: 0 5px;
    }
    i{
      margin-right: 15px;
    }

  }
  #contenu-principal,
  #contenu-principal-suite{

    .titre-livraison{
      margin-bottom: 30px;
      display: flex;
      justify-content: space-between;
      align-items: end;
      @media(max-width:992px){
        align-items: start;
        flex-direction: column;
      }
      .gauche{
        #lieu{
          margin-bottom: 0;
        }
        @media(max-width:992px){
          margin-bottom: 30px;
        }
      }
      .droite{
        display: flex;
        flex-shrink : 0;
        @media(max-width:580px){
          flex-direction: column;
        }

        .livraison{
          font-size:24px;
          color: $blanc;
          background: $marron;
          line-height: normal;
          flex-shrink: 0;
          font-family: 'Open Sans';
          text-transform: uppercase;
          display: flex;
          margin-right: 30px;
          align-items: center;
          background: $marron;
          padding: 15px 30px;
          font-weight: 600;
          img{
            width: 40px;
            margin-right: 15px;
            margin-top: -2px;
            @media(max-width:1200px){
              width: 30px;
            }
          }
          @media(max-width:1200px){
            font-size: 22px;
            padding: 10px 20px;
          }
          @media(max-width: 992px){
            font-size: 24px;
          }
          @media(max-width:768px){
            font-size: 22px;
          }
          @media(max-width:580px){
            margin-bottom: 20px;
          }
        }
        .types{
          background: $grisclair;
          padding: 20px 30px;
          span{
            font-weight: bold;
            font-size: 18px;
          }
          p{
            margin-bottom: 0;
          }
        }
      }
    }
    #carrousel-detail{
      margin-bottom: 30px;
    }

    .grille-prix{
      margin-bottom: 30px;

      .bouton-plan-mobile{
        border : 0;
        background: $marron;
        color : $blanc;
        border-radius : 20px;
        padding: 5px 10px;
        transition : $trans;
        &:hover{
          background: darken($marron, 10%);
        }
      }
    }
    .descriptif.edito{
      margin-bottom: 50px;
    }
  }
  #colonne{
    #nous-contacter{
      margin-bottom: 30px;
      margin-top: 20px;

      .nums .contenu-nums{
        border-bottom: 0;
        p:last-of-type{
          margin-bottom: 0;
        }
      }
    }
    #formulaire-demande{

      h3{
        display: flex;
        .image-gauche{
          flex-shrink: 0;

          @media(max-width:1200px){
            width: 30px;
            margin-right: 15px;
          }
        }
        .texte-droite{
          color : $blanc;
          font-size: 23px;
          font-family: 'Open Sans';
          @media(max-width:1200px){
            font-size: 22px;
          }
        }
      }
    }
  }

  #vous-aimerez{
    margin-top: 50px;
    h3{
      margin-left: 45px;
      font-size: 24px;
      font-family: 'Open Sans';
      display: inline-block;
      border-bottom: 3px solid #bc9c72;
      margin-bottom: 30px;
      text-transform: uppercase;
    }
    .produits{
      visibility: hidden;
      @include produits();
      @media(max-width:768px){
        padding: 0px;
      }
      h4{
        margin-top: 0px;
      }
      .slick-track{
        margin-left: 0;
      }
    }
  }
}


//Popup page mobile et programme brochure / demande de rappel
#popup-mobile,
#popup-brochure-programme,
#popup-appel-programme,
#popup-bien{

  h2{
    background: #f2f2f2;
    padding: 15px 40px 15px 20px;
    font-size: 24px;
    font-weight: bold;
    color: $texte;
    line-height: normal;
    margin: 0 0 20px;
    @media(max-width:768px){
      font-size: 22px;
    }
  }
  .texte-captation{
    padding: 0 20px;
  }
  .rgpd{
    li{
      display: flex;
    }
    input{
      flex-shrink: 0;

    }
    label {
      font-size: 12px;
      color : $texte;
      @media(max-width:1200px){
        font-size: 12px;
      }
      a{
        color : $texte;
        text-decoration: underline;
        transition: $trans;
        &:hover{
          color: $turquoise;
        }
      }
    }
  }
  .wpforms-submit{
    @include button($marron);
    display: table;
    margin: 0px auto 0;
    font-size: 18px;
    padding: 10px 20px 8px;
    @media(max-width:1200px){
      font-size: 16px;
      padding: 8px 15px 6px;
    }
  }
}
#popup-brochure-programme{
  .wpforms-submit{
    background: $marron;
    &:hover{
      background: darken($marron,10%);
    }
  }
}


//Page Nos biens en vente, cabinet et accueil borne
.page-template-template-mobile-biens,
.page-template-template-mobile-cabinet,
.page-template-template-mobile-accueil{
  #main{
    background-size: 100%;
    margin-top: 0;
    padding-top: 50px;
    min-height: 100vh;

    &.motif{
      background-repeat: repeat-y;
      background-position: top center;
    }
    &.image{
      background-position: center center;
      background-attachment: fixed;
      background-repeat: no-repeat;
    }

    @media(max-width:768px){
      padding: 20px 0;
    }
    .lien-retour{
      @include button($texte);
      margin-bottom: 0px;
      padding: 2px 10px 2px;
      font-size: 20px;
      @media(max-width:1200px){
        padding: 2px 10px 2px;
        font-size: 18px;
        margin-bottom: 20px;
      }
      @media(max-width:768px){
        font-size: 16px;
        padding: 0 5px;
      }
      i{
        margin-right: 15px;
      }

    }
    h1{
      display: table;
      position: relative;
      text-align: center;
      color : $blanc;
      margin: 0 auto 50px;
      font-weight: 600;
      text-transform: uppercase;
      font-family: "Open Sans";
      font-size: 56px;
      padding-bottom: 20px;
      @media(max-width:768px){
        font-size: 36px;
      }
      &:after{
        content :'';
        position: absolute;
        bottom: 0;
        left:50% ;
        transform : translateX(-50%);
        width: 60%;
        height: 3px;
        display: inline-block;
        background: $blanc;
      }
    }

    #moteur-page-mobile{
      text-align: center;

      #moteur{
        display: inline-flex;
        //visibility: hidden;
        justify-content: center;
        background: transparentize($blanc,0.5);
        padding: 20px 15px;
        width: auto;
        transition-delay : 0.5s;
        margin-top: 0;
        margin-bottom: 50px;
        border: 0;
        @media(max-width:992px){
          flex-direction: column;
        }

        input,
        select,
        .search{
          margin: 0;
          @media(max-width:992px){
            width: 100% $i;
            margin-bottom: 20px $i;
            margin-left: 0 $i;
          }
        }
        .type_logement{
          width: 178px;
        }
        .typologie{
          width: 120px;
        }
        .search{
          background: $texte;
        }
        @media(max-width:1200px){
          margin-top: 30px;
        }
        @media(max-width:768px){
          border: 0;
          width: 300px;
          max-width: 100%;
          margin: 0 auto 50px;
          display: table;
        }
        input, select{
          margin: 0 10px;
          width: auto;

          @media(max-width:1200px){
            font-size: 16px;
          }
          @media(max-width:768px){
            border: 0;
            width: 100%;
            margin: 0 auto 15px;
          }
        }
        #liste-lieux{
          min-width : 180px;

        }
        .search{
          background: $texte;
          border : 0;
          font-size: 18px;
          border-radius : 1px;
          padding: 0 20px;
          margin: 0 10px;
          display: flex;
          align-items: center;
          transition : $trans;
          @media(max-width:1200px){
            font-size: 18px;
            padding: 0 10px;
            justify-content: center;
          }
          @media(max-width:992px){
            margin-bottom: 0 $i;
          }
          @media(max-width:768px){
            padding: 5px 15px;;
            background: $texte;
            display: table;
            font-weight: normal;
            margin: 0 auto;
          }

          span{
            color : $blanc;
            display: inline-block;
          }
          i{
            color : $blanc;
            font-size: 22px;
            margin-left: 10px;
            @media(max-width:1200px){
              font-size: 18px;
            }
          }
          &:hover{
            background: darken($texte, 5%);
          }
        }
      }
    }

    #resultats-recherche{
      background: transparentize($blanc,0.5);
      padding: 30px 30px 0;
      @media(max-width:768px){
        padding-top: 0;
        padding-right: 0;
        padding-left: 0;
      }
      .sous-titre-recherche{
        font-family: 'Open Sans';
        font-size: 24px;
        padding: 20px 0 10px;
      }
      .produits{
        margin-bottom: 50px;
        @media(max-width:768px){
          margin: 0 0 50px 0;
        }
        .produit{
          .livraison{
            font-weight: normal;
          }
          h4{
            margin-top: 0;
            font-size: 22px;
            font-weight: bold;
            color : $texte;
          }
          .lieu{
            margin-bottom: 5px;
            font-size: 18px;
            font-weight: normal;
          }
          @media(max-width:768px){
            &:last-of-type{
              margin-bottom: 0;
            }
          }
        }
      }
    }
  }
}
.page-template-template-mobile-cabinet{

  #vignettes{
    margin-bottom: 50px;
    padding: 30px 30px 20px;
    background: transparentize($blanc,0.5);
    @media(max-width:768px){
      padding-bottom: 0;
    }
    .mb30{
      margin-bottom: 25px;
      @media(max-width:768px){
        margin-bottom: 0;
      }
    }
    @media(max-width:768px){
      [class^='col-md']{
        margin-bottom: 20px;
      }
    }
    img{
      vertical-align: bottom;
    }
    a.vignette{
      position: relative;
      display: inline-block;
      width: 100%;
      height: 504px;
      background-size: cover;
      background-position: center center;
      &:after{
        content: '';
        border-radius: 1px;
        display: inline-block;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: transparentize($noir,0.6);
        z-index: 2;
        transition: 0.3s ease;
      }
      &:hover:after{
        background: transparentize($noir, 0.3);
      }

      &.v1{
        height: 1038px;
        @media(max-width:1650px){
          height: 750px;
        }
        @media(max-width:1200px){
          height: 616px;
        }
        @media(max-width:992px){
          height: 470px;
        }
      }
      @media(max-width:1650px){
        height: 360px;
      }
      @media(max-width:1200px){
        height: 293px;
      }
      @media(max-width:992px){
        height: 220px;
      }
    }
    .texte{
      position: absolute;
      top: 30px;
      bottom: 30px;
      left: 30px;
      right: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      h2{
        color: $blanc;
        font-size: 32px;
        text-align: center;
        position: relative;
        text-transform: uppercase;
        font-family: 'Open Sans';
        z-index: 3;
        font-weight: 600;
        margin: 0;
        line-height: normal;
        text-shadow : 0 0 5px transparentize($noir,0.5);
        @media(max-width:1200px){
          font-size: 26px;
        }
        @media(max-width:992px){
          font-size: 22px;
        }
      }
      h3{
        color: $blanc;
        font-size: 24px;
        text-align: center;
        position: relative;
        z-index: 3;
        line-height: normal;
        margin: 0;
        font-weight: normal;
        text-shadow : 0 0 5px transparentize($noir,0.5);
        @media(max-width:1200px){
          font-size: 20px;
        }
        @media(max-width:992px){
          font-size: 18px;
          br{
            display: none;
          }
        }
        &:before{
          content: "";
          width: 20px;
          height: 1px;
          background: $blanc;
          display: block;
          margin: 10px auto;
        }
      }
    }
  }
  #blocs-edito{
    padding: 70px 0 70px;
    @media(max-width:768px){
      padding: 40px 0 40px;
    }

    .rangee{
      justify-content: center;
      .bloc{
        background: $blanc;
        border : 1px solid $grisclair;
        margin: 0 15px 0px;
        display: flex;
        flex-direction: column;
        height: 100%;
        @media(max-width:1200px){
          margin: 0;
        }
        @media(max-width:991px){
          height: auto;
          max-width: 350px;
          margin: 0 auto 30px;
        }
        .visuel{
          background: $grisclair;
        }
        .texte{
          padding: 20px 20px 30px;
          text-align: center;
          align-items: center;
          display: flex;
          flex-direction: column;
          height: 100%;
          justify-content: space-between;
          h3{
            margin-top: 0;
            margin-bottom: 10px;
            font-weight: bold;
            color : $marron;
            font-size: 24px;
            @media(max-width:991px){
              font-size: 20px;
            }
            &:before{
              display: none;
            }
          }
          p:last-of-type{
            margin-bottom: 0;
          }
          .bouton{
            @include button($marron);
            font-weight: normal;
            padding: 10px 20px 8px;
            font-size: 18px;
            margin-top: 15px;
            @media(max-width:1200px){
              font-size: 18px;
              padding: 8px 18px 7px;
            }
            @media(max-width:768px){
              font-size: 16px;
              padding: 6px 15px 4px;
            }
          }
        }
      }
    }
  }
}

.page-template-template-mobile-accueil{
  #main{
    //min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    #contenu{
      width: 600px;
      margin: 0 auto;
      text-align: center;
    }
    h1{
      margin-bottom: 0px;
      padding-bottom: 0;
      &:after{
        display: none;
      }
    }
    .boutons{
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      margin: 0 -10px;
      .btn{
        @include button($turquoise);
        font-family: 'Open Sans';
        padding: 20px 0;
        font-size: 24px;
        font-weight: normal;
        margin: 15px auto 0;
        width: calc(50% - 20px);
      }
    }
  }
}



/*--------PAGE NOTRE SELECTION----------*/
.page-template-template-selection-tpl #main #resultats-recherche{
  h1{
    text-align: center;
    font-size: 48px;
    margin-bottom: 50px;
    font-family: "Open Sans";
    font-weight: 600;
    text-transform: uppercase;
    display: inline-block;
    width: 100%;
  }
}


/*------ACCUEIL ACTUALITES------*/
.page-template-template-actualites-tpl #main{
  padding: 70px 0;
  h1{
    font-size: 28px;
    text-transform: uppercase;
    font-weight: bold;
    margin-bottom: 50px;
    position: relative;
    display: inline-block;
    padding: 0 15px 10px;
    @media(max-width:992px){
      font-size: 26px;
    }
    @media(max-width:768px){
      font-size: 24px;
      text-align: center;
    }
    &:after{
      content : "";
      background: $marron;
      height: 3px;
      width: calc(100% - 30px);
      position: absolute;
      bottom: 0;
      left: 15px;
    }
  }
  .conteneur-actus{
    display: flex;
    flex-wrap: wrap;
    gap : 30px;
    padding: 0 15px;
    @media(max-width:768px){
      width: 400px;
      max-width: 100%;
    }
    .actualite{
      width: calc(33.33% - 20px);
      border-radius : 10px;
      border : 1px solid lighten($texte,50%);
      background: $blanc;
      overflow: hidden;
      position: relative;
      transition : $trans;
      visibility: hidden;
      @media(max-width:992px){
        width: calc(50% - 20px);
      }
      @media(max-width:768px){
        width: 100%;
      }
      &:hover{
        margin-top: -5px;
        margin-bottom: 5px;
        box-shadow : 0 4px 4px transparentize($noir,0.9);
      }
      .conteneur{
        height: 100%;
        display: flex;
        flex-direction: column;
        text-decoration: none;
        .visuel{
          border-radius : 10px;
          overflow: hidden;
          flex-shrink: 0;
        }
        .texte{
          padding: 20px 20px 40px 20px;
          position: relative;
          text-align: justify;
          height: 100%;
          h2{
            font-size: 20px;
            text-align: center;
            font-weight: bold;
            line-height: 1.1;
          }
          p{
            font-size: 17px;
            line-height: 1.3;
          }
          .date{
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 0;
            position: absolute;
            bottom: 20px;
            left: 20px;
            right: 20px;
          }
        }
      }
      &.sans-visuel{
        background: $texte;
        .conteneur{
          .texte{
            display: flex;
            flex-direction: column;
            justify-content: center;
            *{
              color : $blanc;
            }
            h2{
              margin-bottom: 30px;
            }
            p:not(.date){
              margin-bottom: 30px;

            }
          }
        }
      }
    }
  }
  .pagination{
    margin: 50px auto 0;
    display: flex;
    justify-content: center;
    font-size: 20px;
    span{
      color : $marron;
      margin: 0 7px;
      font-weight: bold;
    }
    a{
      color : $texte;
      font-weight: bold;
      text-decoration: none;
      margin: 0 7px;
      &:hover{
        color : $noir;
      }
    }
  }
}


/*------GUIDE----*/
.page-template-template-guide-tpl #main{
  padding: 70px 0;
  h1{
    font-size: 28px;
    text-transform: uppercase;
    font-weight: bold;
    margin-bottom: 50px;
    position: relative;
    padding: 0 15px 10px;
    display: inline-block;
    @media(max-width:992px){
      font-size: 26px;
    }
    @media(max-width:768px){
      font-size: 24px;
    }
    &:after{
      content : "";
      background: $marron;
      height: 3px;
      width: calc(100% - 30px);
      position: absolute;
      bottom: 0;
      left: 15px;
    }
  }
  .conteneur-guides{
    display: flex;
    gap: 30px;
    padding: 0 15px;
    flex-wrap: wrap;
    .guide{
      margin-bottom: 50px;
      width:calc(25% - 23px);
      display: flex;
      flex-direction: column;
      text-decoration: none;
      justify-content: space-between;
      visibility: hidden;
      @media(max-width:992px){
        width:calc(33.33% - 23px);
        margin-bottom: 30px;
      }
      @media(max-width:768px){
        width:calc(50% - 23px);
      }
      h2{
        color : $marron;
        margin-bottom: 15px;
        text-transform: uppercase;
        text-align: center;
        font-weight: bold;
        font-size: 24px;
        transition : $trans;
        @media(max-width:1200px){
          font-size: 22px;
        }
        @media(max-width:992px){
          font-size: 20px;
        }
        @media(max-width:768px){
          font-size: 18px;
        }
      }
      img{
        transition : $trans;
      }
      &:hover{
        h2{
          margin-top: -5px;
        }
        img{
          box-shadow : 0 4px 4px transparentize($noir,0.9);
        }
      }
    }
  }
}


/*--------PAGES EDITO LANDING PAGE----------*/
.landing-page#main{
  padding-top: 0;
  #bandeau-visuel-texte{
    display: flex;
    margin-bottom: 70px;
    @media(max-width:1200px){
      margin-bottom: 50px;
    }
    @media(max-width:992px){
      flex-wrap: wrap;
    }
    .gauche{
      padding-top: 50px;
      padding-right: 70px;
      visibility: hidden;
      width: 49%;
      @media(max-width:992px){
        width: 100%;
        margin-bottom: 30px;
        padding: 30px 15px 0;
      }
      h1{
        font-size: 32px;
        line-height: normal;
        margin-bottom: 5px;
        margin-top: 50px;
        font-weight: 700;
        @media(max-width:1650px){
          margin-top: 20px;
        }
        @media(max-width:1200px){
          font-size: 30px;
          margin-top: 0;
        }
        @media(max-width:992px){
          font-size: 28px;
        }
        @media(max-width:768px){
          font-size: 26px;
        }
        @media(max-width:520px){
          font-size: 24px;
        }
      }
      hr{
        margin-bottom: 40px;
        border-top: 2px solid $gris_clair;
        width: 70%;
        margin-left: 0;
        margin-top: 0px;
      }
      p{
        text-align: justify;

      }
    }
    .droite{
      visibility: hidden;
      width: 51%;
      @media(max-width:992px){
        width: 100%;
        padding: 0 15px;
      }
      .visuel-bandeau{
        border-radius : 20px;
      }
    }
  }
  .lp{
    margin-bottom: 70px;
    text-align: justify;
    display: flex;
    visibility: hidden;
    align-items: center;
    @media(max-width:1200px){
      margin-bottom: 50px;
    }
    @media(max-width:992px){
      flex-wrap: wrap;
      padding: 0 15px;
    }
    .gauche{
      @media(max-width:992px){
        margin-bottom: 30px;
      }
      &.petit{
        padding-right: 50px;
        @media(max-width:992px){
          padding-right: 0;
        }
      }
    }
    .droite{
      &.petit{
        padding-left: 50px;
        @media(max-width:992px){
          padding-left: 0;
        }
      }
    }
    .petit{
      width: 45%;
      @media(max-width:992px){
        width: 100%;
      }
    }
    .grand{
      width: 55%;
      @media(max-width:992px){
        width: 100%;
      }
    }
    .moitie{
      width: 50%;
      @media(max-width:992px){
        width: 100%;
      }
      &.gauche{
        padding-right: 25px;
        @media(max-width:992px){
          padding-right: 0;
        }
      }
      &.droite{
        padding-left: 25px;
        @media(max-width:992px){
          padding-left: 0;
        }
      }
    }
  }
}


//Rangée de blocs
#rangee-blocs{
  margin-top: 80px;
  @media(max-width:1200px){
    margin-top: 60px;
  }
  @media(max-width:992px){
    margin-top: 40px;
  }
  @media(max-width:768px){
    margin-top: 10px;
  }
  .colonne{
    display: flex;
  }
  .bloc{
    background: $blanc;
    width : 400px;
    margin: 0 auto 30px;
    display: flex;
    flex-direction: column;
    border-radius : 10px;
    overflow: hidden;
    .visuel{
      background: $blanc;
      text-align: center;
    }
    .texte{
      padding: 20px 20px 30px;
      text-align: center;
      align-items: center;
      display: flex;
      flex-direction: column;
      height: 100%;
      justify-content: space-between;
      h3{
        margin-top: 0;
        margin-bottom: 10px;
        font-weight: bold;
        color : $marron;
        &:before{
          display: none;
        }
      }
      p:last-of-type{
        margin-bottom: 0;
      }
      .bouton{
        @include button($marron);
        font-weight: normal;
        padding: 10px 20px 8px;
        font-size: 18px;
        text-transform: uppercase;
        font-weight: bold;
        margin-top: 15px;
        @media(max-width:1200px){
          font-size: 18px;
          padding: 8px 18px 7px;
        }
        @media(max-width:768px){
          font-size: 16px;
          padding: 6px 15px 4px;
        }
      }
    }
  }
}


//Remontées Vous aimerez aussi
#remontees{
  background: $blanc;
  padding: 30px 100px 50px;
  border-radius : 10px;
  margin: 50px auto;
  @media(max-width:768px){
    padding: 40px 30px 30px;

  }
  @media(max-width:576px){
    margin-left: 15px;
    margin-right: 15px;
    width: auto;

  }
  h3{
    font-size: 24px;
    display: inline-block;
    margin-bottom: 30px;
    font-weight: bold;
    text-transform: uppercase;
  }
  .liste-remontees{
    margin: 0 -15px;
    visibility: hidden;
    @media(max-width:768px){
      max-width: 300px;
      margin: 0 auto;
    }
    &.slick-initialized{
      visibility: visible;
    }
    .slick-track{
      display: flex $i;
    }
    .remontee{
      margin: 0 15px;
      background: $blanc;
      border : 1px solid $grisclair;
      height: inherit $i;
      border-radius: 20px;  
      overflow: hidden;
      &:hover .visuel img{
        transform : scale(1);
      }
      .contenu{
        padding: 15px;
        h4{
          font-size: 18px;
          margin: 0;
        }
      }
      .visuel{
        position: relative;
        overflow: hidden;
        img{
          transition : 2s ease;
          transform : scale(1.1);
        }

      }
    }
    .slick-prev,
    .slick-next{
      border: 0;
      font-size: 0;
      line-height: 0;
      color: transparent;
      position: absolute;
      background: none;
      top: calc(50% - 20px);
      z-index: 5;
      left: -45px;
      @media(max-width:768px){
        left: -25px;
      }
      &:before{
        font-family: 'Font Awesome 6 Pro';
        content : '\f053';
        border: 0;
        color : $texte;
        font-size: 26px;
        display: inline-block;
        width: 40px;
        height: 40px;
        font-weight: 600;
        line-height: 40px;
        border-radius : 100%;
        margin-left: auto;
        padding-right: 5px;
      }
    }
    .slick-next{
      left: auto;
      right: -45px;
      @media(max-width:768px){
        right: -25px;
      }
      &:before{
        content : '\f054';
        padding-right: 0;
        padding-left: 5px;

      }
    }
  }
}