@font-face {
    font-family: 'highvoltage_roughregular';
    src: url('https://preproduction-web.fr/Bricomarche/LP-BR/fonts/highvoltagerough-webfont.woff2') format('woff2'),
         url('https://preproduction-web.fr/Bricomarche/LP-BR/fonts/highvoltagerough-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'din_next_lt_probold_condensed';
    src: url('https://preproduction-web.fr/Bricomarche/LP-BR/fonts/dinnextltpro-boldcondensed-webfont.woff2') format('woff2'),
         url('https://preproduction-web.fr/Bricomarche/LP-BR/fonts/dinnextltpro-boldcondensed-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
.lp-projets {
  max-width: 1160px;
  width: 100%;
  margin: 40px auto;
  font-size: 16px;
  line-height: 18px;
  font-family: "Nunito", Arial, sans-serif;
  color: #000;
}
.lp-projets img {
  max-width: 100%;
}
.lp-projets .intro {
  text-align: center;
  font-size: 16px;
  line-height: 24px;
}
.lp-projets .intro a {
  text-decoration: none;
  background-image: -webkit-gradient(linear,left top, right top,#000,#000);
  background-image: linear-gradient(90deg,#000,#000);
  background-size: 100% .1rem;
  background-repeat: no-repeat;
  background-position: 0 100%;
  -webkit-transition: background-size .7s cubic-bezier(.7,0,.3,1);
  transition: background-size .7s cubic-bezier(.7,0,.3,1);
}
.lp-projets .intro a,
.lp-projets .intro a:visited {
  color: #000;
}
.lp-projets .intro a:hover {
  background-size: 0 .1rem;
}
.lp-projets .mosaique {
  max-width: 970px;
  margin: 40px auto 0;
  display: flex;
  justify-content: space-between;
}
.lp-projets .mosaique .col-gauche {
  width: 305px;
  height: 633px;
  border-radius: 10px;
  -webkit-box-shadow: 5px 5px 5px 2px rgba(0,0,0,0.25); 
  box-shadow: 5px 5px 5px 2px rgba(0,0,0,0.25);
  display: flex;
  align-items: end;
}
.lp-projets .mosaique .col-droite {
  width: 635px;
}
.lp-projets .mosaique .col-droite .img-seule {
  margin-bottom: 20px;
  border-radius: 10px;
  -webkit-box-shadow: 5px 5px 5px 2px rgba(0,0,0,0.25); 
  box-shadow: 5px 5px 5px 2px rgba(0,0,0,0.25);
  display: flex;
  align-items: end;
  width: 100%;
}
.lp-projets .mosaique .col-droite .bloc-2img {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.lp-projets .mosaique .col-gauche.renovation {
  background: url("../images/renovation-energetique.jpg") no-repeat;
}
.lp-projets .mosaique div a,
.lp-projets .blocs-3img div a {
  font-family: 'highvoltage_roughregular';
  font-size: 33px;
  color: #fff;
  line-height: 36px;
  text-align: center;
  background: rgb(51,51,51);
  background: -moz-linear-gradient(180deg, rgba(51,51,51,0) 0%, rgba(51,51,51,1) 100%);
  background: -webkit-linear-gradient(180deg, rgba(51,51,51,0) 0%, rgba(51,51,51,1) 100%);
  background: linear-gradient(180deg, rgba(51,51,51,0) 0%, rgba(51,51,51,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#333333",endColorstr="#333333",GradientType=1);    
  -webkit-transition: all 1s ease-out;
  -moz-transition: all 1s ease-out;
  -o-transition: all 1s ease-out;
  transition: all 1s ease-out;    
  display: flex;
  justify-content: center;
  align-items: end;
  width: 100%;
  height: 50%;
  text-decoration: none;
  border-radius: 10px;
  padding-block: 40px;
}
.lp-projets .mosaique div a:hover,
.lp-projets .blocs-3img div a:hover {
  height:70%; 
}
.lp-projets .mosaique .col-droite .bloc-2img div {
  width: 304px;
  height: 304px;
  border-radius: 10px;
  -webkit-box-shadow: 5px 5px 5px 2px rgba(0,0,0,0.25); 
  box-shadow: 5px 5px 5px 2px rgba(0,0,0,0.25);
  display: flex;
  align-items: end;
}
.lp-projets .mosaique .col-droite .img-seule.cuisine {
  background: url("../images/cuisine.jpg") no-repeat;
  height: 305px;
}
.lp-projets .mosaique .col-droite .bloc-2img .sdb {
  background: url("../images/sdb.jpg") no-repeat;
}
.lp-projets .mosaique .col-droite .bloc-2img .dressings {
  background: url("../images/dressings.jpg") no-repeat;
}

.lp-projets .mosaique.inverse .col-droite .img-seule {
  margin-bottom: 0px;
  margin-top: 20px;
}
.lp-projets .mosaique .col-droite .img-seule.exterieur {
  background: url("../images/amex.jpg") no-repeat;
  height: 305px;
}
.lp-projets .mosaique .col-droite .bloc-2img .terrain {
  background: url("../images/terrain.jpg") no-repeat;
}
.lp-projets .mosaique .col-droite .bloc-2img .jardin {
  background: url("../images/jardin.jpg") no-repeat;
}
.lp-projets .mosaique .col-gauche.terrase {
  background: url("../images/terrase.jpg") no-repeat;
}
.lp-projets .blocs-3img {
  display: flex;
  justify-content: space-between;
  max-width: 970px;
  margin: 20px auto 0;
}
.lp-projets .blocs-3img div {
  width: 304px;
  height: 304px;
  border-radius: 10px;
  -webkit-box-shadow: 5px 5px 5px 2px rgba(0,0,0,0.25); 
  box-shadow: 5px 5px 5px 2px rgba(0,0,0,0.25);
  display: flex;
  align-items: end;
}
.lp-projets .blocs-3img div.combles {
  background: url("../images/combles.jpg") no-repeat;
}
.lp-projets .blocs-3img div.demenagements {
  background: url("../images/demenagements.jpg") no-repeat;
}
.lp-projets .blocs-3img div.sols {
  background: url("../images/sols.jpg") no-repeat;
}

.lp-projets .mosaique-mobile,
.lp-projets .plus-mobile {
  display: none;
}
.lp-projets .categories-desktop {
    background: #F6F6F6;
    padding: 60px 0;
    margin: 60px auto;
}
.lp-projets .categories-desktop div {
  max-width: 970px;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
}
.lp-projets .categories-desktop a {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border-radius: 10px;
  -webkit-box-shadow: 5px 5px 5px 2px rgba(0,0,0,0.25); 
  box-shadow: 5px 5px 5px 2px rgba(0,0,0,0.25);
  width: 300px;
  position: relative;
  overflow: hidden;
}
.lp-projets .categories-desktop a p {
  position: absolute;
  text-transform: uppercase;
  font-family: 'highvoltage_roughregular';
  font-size: 45px;
  color: #000;
  line-height: 50px;
  text-shadow: rgba(0,0,0,0.3) 2px 3px 5px;
  z-index: 4;
}
.lp-projets .categories-desktop a:nth-child(2) p {
  color: #43642A;
}
.lp-projets .categories-desktop a:nth-child(3) p {
  color: #fff;
}
.lp-projets .categories-desktop a img {
  border-radius: 10px;
  transition: transform .5s ease;
}
.lp-projets .categories-desktop a:hover img {
  transform: scale(1.2);
}
.lp-projets .categories-mobile,
.lp-projets .travaux-mobile {
  display: none;
}
.lp-projets .travaux-desktop {
  background: #F6F6F6;
  padding: 40px 0;
  margin: 60px 0;
}
.lp-projets .travaux-desktop .contenu-travaux {
  max-width: 970px;
  margin: 0 auto;
}
.lp-projets .travaux-desktop .contenu-travaux h2 {
  font-size: 30px;
  line-height: 32px;
  margin-bottom: 20px;
  font-weight: bold;
}
.lp-projets .travaux-desktop .contenu-travaux .blocs {
  display: flex;
  justify-content: space-between;
}
.lp-projets .travaux-desktop .contenu-travaux .blocs a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 220px;
  height: 390px;
  border-radius: 10px;
  -webkit-box-shadow: 5px 5px 5px 2px rgba(0,0,0,0.25); 
  box-shadow: 5px 5px 5px 2px rgba(0,0,0,0.25);
  text-decoration: none;
}
.lp-projets .travaux-desktop .contenu-travaux .blocs a p {
  text-transform: uppercase;
  font-family: 'highvoltage_roughregular';
  text-align: center;
  font-size: 25px;
  line-height: 27px;
}
.lp-projets .travaux-desktop .contenu-travaux .blocs a.ete p {
  color: #FCBD1B;
}
.lp-projets .travaux-desktop .contenu-travaux .blocs a.ete {
  background: url("../images/ete.jpg") no-repeat;
}
.lp-projets .travaux-desktop .contenu-travaux .blocs a.automne p {
  color: #FC871B;
}
.lp-projets .travaux-desktop .contenu-travaux .blocs a.automne {
  background: url("../images/automne.jpg") no-repeat;
}
.lp-projets .travaux-desktop .contenu-travaux .blocs a.hiver p {
  color: #0078BF;
}
.lp-projets .travaux-desktop .contenu-travaux .blocs a.hiver {
  background: url("../images/hiver.jpg") no-repeat;
}
.lp-projets .travaux-desktop .contenu-travaux .blocs a.printemps p {
  color: #6CB54B;
}
.lp-projets .travaux-desktop .contenu-travaux .blocs a.printemps {
  background: url("../images/printemps.jpg") no-repeat;
}
.lp-projets .travaux-desktop .contenu-travaux .blocs a p span {
  background: #fff;
  -webkit-transition: all 1s ease-out;
  -moz-transition: all 1s ease-out;
  -o-transition: all 1s ease-out;
  transition: all 1s ease-out;    
}
.lp-projets .travaux-desktop .contenu-travaux .blocs a p span.petit-titre {
  padding: 0 5px;
}
.lp-projets .travaux-desktop .contenu-travaux .blocs a p span.gros-titre {
  font-size: 38px;
  line-height: 42px;
  display: block;
  margin-top: 20px;
  padding: 0 10px;
}
.lp-projets .travaux-desktop .contenu-travaux .blocs a:hover span.petit-titre {
  padding: 0 10px;
}
.lp-projets .travaux-desktop .contenu-travaux .blocs a:hover span.gros-titre {
  padding: 0 15px;
}
.lp-projets .plus-desktop {
  max-width: 1120px;
  margin: 40px auto;
}
.lp-projets .plus-desktop h2 {
  margin: 0 0 20px 0;
  font-size: 30px;
  line-height: 32px;
  font-weight: bold;
}
.lp-projets .plus-desktop .contenu {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.lp-projets .plus-desktop .contenu a {
  width: 348px;
  height: 105px;
  border-radius: 10px;
  -webkit-box-shadow: 5px 5px 5px 2px rgba(0,0,0,0.25); 
  box-shadow: 5px 5px 5px 2px rgba(0,0,0,0.25);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'din_next_lt_probold_condensed';
  font-size: 28px;
  line-height: 30px;
  text-align: center;
  color: #fff;
  margin-bottom: 30px;
}
.lp-projets .plus-desktop .contenu a p {
  display: flex;
  align-items: center;
  flex-direction: column;
}
.lp-projets .plus-desktop .contenu a p span {
  background: #0078BF;
  padding: 2px 5px;
  -webkit-transition: all 1s ease-out;
  -moz-transition: all 1s ease-out;
  -o-transition: all 1s ease-out;
  transition: all 1s ease-out;  
}
.lp-projets .plus-desktop .contenu a p span+span {
  margin-top: 5px;
}
.lp-projets .plus-desktop .contenu a:hover span {
  padding: 2px 10px;
}
.lp-projets .plus-desktop .contenu a.panneau {
  background: url("../images/panneau.jpg") no-repeat;
}
.lp-projets .plus-desktop .contenu a.toiture {
  background: url("../images/toiture.jpg") no-repeat;
}
.lp-projets .plus-desktop .contenu a.peinture {
  background: url("../images/peinture.jpg") no-repeat;
}
.lp-projets .plus-desktop .contenu a.electroportatif {
  background: url("../images/electroportatif.jpg") no-repeat;
}
.lp-projets .plus-desktop .contenu a.materiaux {
  background: url("../images/materiaux.jpg") no-repeat;
}
.lp-projets .plus-desktop .contenu a.outillage {
  background: url("../images/outillage.jpg") no-repeat;
}
@media (max-width: 980px) {
  .lp-projets .mosaique-mobile {
    display: block;
    background: #EBEBE6;
    border-radius: 20px;
    padding: 20px;
    text-align: center;
  }
  .lp-projets .mosaique-mobile div {
    margin: 20px auto;
    display: flex;
    justify-content: space-between;
    max-width: 675px;
  }
  .lp-projets .mosaique-mobile div a:first-child {
    margin-right: 20px;
  }
  .lp-projets .mosaique.desktop,
  .lp-projets .categories-desktop,
  .lp-projets .blocs-3img,
  .lp-projets .travaux-desktop,
  .lp-projets .plus-desktop {
    display: none;
  }
  .lp-projets .categories-mobile {
    display: block;
    overflow: hidden;
    margin: 40px auto;
    max-width: 675px;
  }
  .lp-projets .categories-mobile a {
    margin-right: 20px;
    -webkit-box-shadow: 5px 5px 5px 2px rgba(0,0,0,0.25); 
    box-shadow: 5px 5px 5px 2px rgba(0,0,0,0.25);
    border-radius: 20px;
    margin-bottom: 20px;
  }
  .lp-projets .categories-mobile a img {
    border-radius: 20px;
  }
  .lp-projets .mosaique-mobile a img {
    -webkit-box-shadow: 5px 5px 5px 2px rgba(0,0,0,0.25); 
    box-shadow: 5px 5px 5px 2px rgba(0,0,0,0.25);
    border-radius: 20px;
  }
  .lp-projets .travaux-mobile {
    display: block;
    margin: 40px auto;
  }
  .lp-projets .travaux-mobile h2,
  .lp-projets .plus-mobile h2 {
    margin: 0 0 20px 0;
    font-size: 22px;
    line-height: 24px;
  }
  .lp-projets .travaux-mobile .categories-mobile {
    margin: 0 auto;
  }
  .lp-projets .plus-mobile {
    background: #EBEBE6;
    border-radius: 20px;
    padding: 20px;
    display: block;
  }
  .lp-projets .plus-mobile .contenu div {
    display: flex;
    max-width: 600px;
    margin: 0 auto 20px;
    justify-content: space-between;
  }
  .lp-projets .plus-mobile .contenu div a {
    border-radius: 20px;
  }
  .lp-projets .plus-mobile .contenu div a:nth-child(odd) {
    margin-right: 20px;
  }
  .lp-projets .plus-mobile .contenu a img {
    -webkit-box-shadow: 5px 5px 5px 2px rgba(0,0,0,0.25); 
    box-shadow: 5px 5px 5px 2px rgba(0,0,0,0.25);
    border-radius: 20px;
  }
}
@media (min-width: 981px) and (max-width: 1060px) {
  .lp-projets .plus-desktop {
    max-width: 1060px;
  }
  .lp-projets .plus-desktop .contenu a {
    width: 330px;
  }
}