/* Animations */

.active .d1, .d1.active{
  transition-delay: 300ms
}
.active .d2, .d2.active{
  transition-delay: 600ms
}
.active .d3, .d3.active{
  transition-delay: 900ms
}
.anime .d1, .d1.anime{
  transition-delay: 300ms
}
.anime .d2, .d2.anime{
  transition-delay: 600ms
}
.anime .d3, .d3.anime{
  transition-delay: 900ms
}
.anime .d4, .d4.anime{
  transition-delay: 1200ms
}
.anime .d5, .d5.anime{
  transition-delay: 1500ms
}
.aniSup{
  opacity:0;
  transform: translate(0px, 300px);
  transition-property: all;
  transition-duration: 1s;
  transition-timing-function: ease;
}
.anime .aniSup, .aniSup.anime{
  transition-property: all;
  transition-duration: 1s;
  transition-timing-function: ease;
  opacity:1;
  transform: translate(0px, 0);
  
}
.active .aniSup, .aniSup.active{
  transition-property: all;
  transition-duration: 1s;
  transition-timing-function: ease;
  opacity:1;
  transform: translate(0px, 0);
  
}
.aniDown{
  opacity:0;
  transform: translate(0px, -300px);
  transition-property: all;
  transition-duration: 1s;
  transition-timing-function: ease;
}
.anime .aniDown, .aniDown.anime{
  transition-property: all;
  transition-duration: 1s;
  transition-timing-function: ease;
  opacity:1;
  transform: translate(0px, 0);
  
}

.aniLeft{
  opacity:0;
  transform: translate(-300px, 0);
  transition-property: all;
  transition-duration: 1s;
  transition-timing-function: ease;
}
.anime .aniLeft, .aniLeft.anime{
  transition-property: all;
  transition-duration: 1s;
  transition-timing-function: ease;
  opacity:1;
  transform: translate(0, 0);
  
}

.aniRight{
  opacity:0;
  transform: translate(300px, 0);
  transition-property: all;
  transition-duration: 1s;
  transition-timing-function: ease;
}
.anime .aniRight, .aniRight.anime{
  transition-property: all;
  transition-duration: 1s;
  transition-timing-function: ease;
  opacity:1;
  transform: translate(0, 0);
  
}
.active .aniRight, .aniRight.anime{
  transition-property: all;
  transition-duration: 1s;
  transition-timing-function: ease;
  opacity:1;
  transform: translate(0, 0);
  
}

.aniScale{
  transform: scale(0.004);
  transition-property: all;
  transition-duration: 1s;
  transition-timing-function: ease;
}
.anime .aniScale, .aniScale.anime{
  transition-property: all;
  transition-duration: 1s;
  transition-timing-function: ease;
  transform: scale(1);
}
.aniOpa{
  opacity:0;
  transition-property: all;
  transition-duration: 1s;
  transition-timing-function: ease;
}
.anime .aniOpa, .aniOpa.anime{
  transition-property: all;
  transition-duration: 1s;
  transition-timing-function: ease;
  opacity:1;
}
.aniRotate{
  opacity:0;
  transform: rotate(270deg) scale(0.1);
  transition-property: all;
  transition-duration: 2s;
  transition-timing-function: ease;
}
.anime .aniRotate, .aniRotate.anime{
  transform: rotate(0) scale(1);
  transition-property: all;
  transition-duration: 2s;
  transition-timing-function: ease;
  opacity:.3;

}
.aniFlip{
  transform: rotateX(90deg) ;
  transition-property: all;
  transition-duration: 1s;
  transition-timing-function: ease;
}
.anime .aniFlip, .aniFlip.anime{
  transform: rotateY(0) ;
  transition-property: all;
  transition-duration: 1s;
  transition-timing-function: ease;

}
.aniRotate2{
  opacity:0;
  transform: rotate(-270deg) scale(0.1);
  transition-property: all;
  transition-duration: 2s;
  transition-timing-function: ease;
}
.anime .aniRotate2, .aniRotate2.anime{
  transform: rotate(0) scale(1);
  transition-property: all;
  transition-duration: 2s;
  transition-timing-function: ease;
  opacity:1;

}
.aniRotate3{
  opacity:0;
  transform: rotate(180deg) scale(0.01);
  transition-property: all;
  transition-duration: 2s;
  transition-timing-function: ease;
}
.anime .aniRotate3, .aniRotate3.anime{
  transform: rotate(0) scale(1);
  transition-property: all;
  transition-duration: 2s;
  transition-timing-function: ease;
  opacity:1;

}


/* General CSS */
:root{
  --c1:rgb(0, 159, 220);
  --c2:rgb(20, 20, 20);
  --grisCat:rgb(220,220,220);
}

body{overflow-x: hidden;
font-family:"Poppins";
font-weight:300;
padding-top:126px}

a{color:var(--c1);}
a:hover{
  text-decoration: none;
  color:var(--c1);
}
input{border:none;}
/*Helpers*/
.op0{opacity:0;}
.op1{opacity: 1;}
.h100{ height:100%;}
.w100{ width:100%;}
.rel{ position:relative;}
.bgc{
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.centerCont{
  display:flex;
  justify-content: center;
  align-items:center;
}
.noUnder{
  text-decoration: none;
  color:inherit;
}
.noUnder:hover{
  text-decoration: none;
}
/*Site specific CSS*/

@media (min-width: 1400px){
  .container {
    max-width: 1360px;
  }
}
#navbar{
  transition:all .9s ease;
}
.navSec{
  background-color: #fff;
  padding:  0;
  transition:all .9s ease;
}
.navbar{
  width: 100%;
  transition:all .9s ease;  
  -webkit-justify-content: center;
          justify-content: center;
}
.navbar-nav{
  justify-content: flex-end;
  width:100% ;
  transition:all .9s ease;
  align-items: center;
  
}
#navbarNav{
  flex-grow:unset
}
.logoNav{
  margin-bottom:-50px
}
/*Hamburger menu*/
.navbar-toggler
{margin-top: 5px;}

.barreHamMenu
{
  width: 30px;
  height: 3px;
  margin-top: 3px;
  margin-bottom: 8px;

  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;

  background-color: #000;
}
.navbar-toggler[aria-expanded='true'] .barreHamMenu
{
  width: 35px;

  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.navbar-toggler[aria-expanded='true'] .barreHamMenu:first-child
{
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;

  opacity: 0;
}
.navbar-toggler[aria-expanded='true'] .barreHamMenu:last-child
{
  margin-top: -11px;

  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.nav-link{
  white-space:nowrap;
font-family: "Barlow";
  color: rgb(0, 0, 0);
  font-weight:500;
  text-transform: uppercase;
}

#slider{
  height:calc(100vh - 126px);
  
  width:100%;
  position:relative;
}
#slider .carousel-item, #carousel-inner{
  height:100%;
}

.slideContent{
  display:flex;
  justify-content: center;
  align-items: center;
  height:100%;
  flex-direction: column
}

.titreSlide {
  font-family: "Barlow";
  color:#fff;
  font-weight: 800;
  font-size:68px;
  text-align: center;
text-transform: uppercase;
margin-bottom: 45px}


.dec{
  padding:12px 45px;

  font-weight:600;
  text-align: center;
  background:var(--c1);
  color:#fff;
  font-family: "Poppins";
  -webkit-border-radius: 24px;
          border-radius: 24px;
  margin-top:2rem
}
.dec:hover{
  cursor: pointer;
  background-color: #000;
}
.btn-ctrl{
  width:50px;
  height:50px;
  background-color: var(--c1);
  display:flex;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-align-items: center;
          align-items: center;
  color:#fff;
  font-size: 25px;
  position: absolute;
  top:48%;
  left:0;
  cursor:pointer
}
.btn-ctrl:hover{
  background-color: #000;
}
#myBtn2, #myBtn3{
  left: unset;
  right:0
}
/*Main section*/
#main{
   background: linear-gradient(90deg, #fff 30%, rgb(244, 236, 225) 0);
  padding-top:180px;
  padding-bottom:120px;
  overflow-x:hidden
}
#row2{
  margin-top:5rem
}
.colTexte{
  display:flex;
  flex-grow:2;
  align-items:center;
  margin:5rem 0;
}
.contTexte{
  padding:15% 10%;
  position: relative;
  background: #FFF;
  margin-bottom: 2rem

}
.texte strong{
  color:var(--c1)
}
.ct1{
  margin-left: 10%
}
.ct2{
  margin-right: 10%
}
.titre{
  font-size: 25px;
  font-family: "Barlow";
  font-weight: bold;

}
.ssTitre {
}
.texte {
  margin-top:1rem;
  font-family: "Poppins";
  font-weight: 300;
  text-align:justify
}
.downBtn{
  bottom:-25px;
  left:7%;
  top:unset
}
.titreAlt {
  font-size: 100px;
  font-family: "Barlow";
  color: rgb(255, 255, 255);
  font-weight: bold;
  text-transform: uppercase;
  position:absolute;
  top:10%;
  left:0;
  white-space:nowrap
}
#secServ{
  background:#000;
  padding:100px 0
}
.titreBis{
  font-size: 40px;
  font-family: "Barlow";
  color: rgb(255, 255, 255);
  font-weight: bold;
  text-transform: uppercase;
}
.barB{
  width:40px;
  height:10px;
  margin-top:1rem;
  background:var(--c1)
}
.tSvc{
  margin-top:4rem
}
.contSvc{
  display:flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-justify-content: center;
          justify-content: center;
      -webkit-align-items: center;
              align-items: center;
    flex-grow:2;
    margin:1rem 0
}
.rondB{
  width:200px;
  height:200px;
  border-radius:100%;
  background: var(--c1);
  display: flex;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-align-items: center;
          align-items: center;
  font-size:55px;
  color:#fff
}
.titreSvc {
  font-size: 28px;
  font-family: "Barlow";
  color: rgb(255, 255, 255);
  font-weight: bold;
  text-transform: uppercase;
  text-align:center;
  margin-top:1rem
}
#actuSec{
  padding:120px 0;
  overflow-x:hidden;
  background: linear-gradient(90deg, rgb(244, 236, 225) 55%, #fff 0);
}
.titreBis.bis{
  color:#000
}
.colPlus{
  display: flex;
  -webkit-justify-content: flex-end;
          justify-content: flex-end;
}
.cActu{
  margin-top:3rem;
  background: #FFF;
}

.imgActu{
  width:100%;
  padding-top: 87%;
  
  position:relative;
}
.contIntA{
  padding:15%
}
.date{
  text-transform: capitalize;
  font-family: "Barlow";
  color:var(--c1);
  font-weight:bold;
  font-size:28px;
  line-height:1.2
}
.titreActu {
    font-family: "Barlow";
  color:#000;
  font-weight:bold;
  font-size:28px;
  line-height:1;
  margin-bottom:2rem;
}

.lire {
  font-family: "Barlow";
  font-weight:500;

}
.resume{
  font-family: "Barlow";
  font-weight:300;
  text-align: justify;
  line-height:1;
  margin-bottom:1rem;
  min-height:96px
}
.contTexte.bis{
  margin-top:2rem;
  
}
.contTexte.bis h2{
  font-size:22px;
  text-align:center
}
#main.bis{
  padding-top:120px
}
.contTexte.ter{
  padding:5rem;
  margin-bottom:
  3rem
}
.input-form{
  border-radius:0;
  border:none;
  padding:25px 5px
}
/*Footer}*/
footer{
  background:#000;
  padding-top:80px;
  padding-bottom:20px
}
.rAdr{
  color:#fff;
  margin-top:2rem
}
.rAdr a{
  color:#fff
}
.rAdr ul {
  list-style-type: none;
  padding:0
}
.rAdr li{
    margin-top:.8rem;

}
.footLink{
  font-family: "Barlow";
  font-weight:500;
  color:#fff;
  font-size:20px;
  text-transform: uppercase;
  width:100%
}
.footLink.active{
  color:var(--c1)
}
.social svg{
  font-size: 26px;
  color: rgb(138, 138, 138);
  margin-left:15px;
}
.fbFoot{
  color:var(--c1)!important
}
.credits {
  color:#fff;
  margin-top:2rem;
}
.credits a{
  color:inherit;
  margin-left:8px;
  margin-right:6px
}
#rep{
  border:1px solid grey;
  width:40px;
  height:40px
}
/*Mpas*/
#map{
  height:400px;
  width:100%;
}
/*Youtube*/
.video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px; 
  height: 0; 
  overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.video-container2 {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px; 
  height: 0; 
  overflow: hidden;
  width: 100%;
}
.video-container2 iframe,
.video-container2 object,
.video-container2 embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.decHide{
  display:none
}
@media (max-width: 1110px) {

  .navA{
    display:none
  }
  .titreAlt{
    font-size:70px
  }

}
@media (max-width: 991px) {

  .navbar-nav{
    padding-left:5%;
  }
  body{
    padding-top:61px
  }
  #slider{
  height:calc(100vh - 61px);
  
}

}

@media (max-width: 767px) {
  .ct1, .ct2{
    margin-left:0;
    margin-right: 0;
  }
  #row2{
    margin-top:0 
  }
  .colTexte{
    margin: 2.5rem 0  }
  .titreAlt{
    white-space:wrap;
    font-size:70px;
    left:10%
  }
  #secServ{
    padding-top:0
  }
  .contSvc{
    margin-top:2rem
  }
  .colSvc{
    display:flex;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    align-items:center;
    -webkit-justify-content: center;
            justify-content: center;
    text-align:center;
    margin-bottom:2rem
  }
  .colSvc .dec{
    display:none
  }
  .decHide{
    display:flex
  }
  .contTexte.ter{
    padding:3rem
  }
  footer{
    padding-top:0
  }
  #main.bis{
    padding-bottom:80px;
    padding-top:80px
  }
  #actuSec{
    padding:80px 0
  }
}
@media (max-width: 575px) {
}


/* Catalogue*/
.linkLightbox, .imgProd, .linkLightbox:hover, .imgProd:hover{
  cursor: -moz-zoom-in; 
  cursor: -webkit-zoom-in; 
  cursor: zoom-in;

}
.contProduit{
  display: flex;
  flex-wrap: wrap;
  margin-top:20px;
  margin-left:-15px;
  margin-right:-15px
}
.jplist-panel{
  display: flex
}


.colProd{
  margin-bottom:30px;

}
.list-item{
  margin-top:2rem
}
.produit{
    height:100%;
transition: all .3s ease;
  background:#fff;
  

}
.produit:hover{
}
.contImgProd{
    width:100%;
  padding-top:87%;
  position:relative;

}
 .imgProduit{
  overflow: hidden;
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color:white;
 }
 .imgProduit img{
  width:100%;
  height:100%;
   object-fit: cover;
 }
 .resume.bis{
   min-height: unset;
 }
.hoverImgProd{
  transition: all 0.3s ease;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;}
.hoverImgProd:hover{
  background-color: rgba(255,255,255,0.6);
  transition: all 0.3s ease;

}
.trait{
  width:8px;
  height:60px;
  background-color: black;
  position:absolute;
  bottom:0;
  left:calc(50% - 4px);
  opacity:0;
  
}
.traitH{
  width:60px;
  height:8px;
  background-color: black;
  position:absolute;
  left:0;
  bottom:calc(50% - 4px);
  opacity:0;
  transition: all 0.5s ease;

}
.hoverImgProd:hover .trait{
  opacity:1;
  bottom:calc(50% - 30px);
  transition: all 0.5s ease;
}
.hoverImgProd:hover .traitH{
  opacity:1;
  left:calc(50% - 30px);
  transition: all 0.5s ease;
}
.corpProduit{
  padding:8px;
  padding-top:12px;
  padding-bottom: 25px
}
.titreProduit{
  margin-top
}

.mini-pic{
  padding-top:100%;
  margin-top:15px;
  background-size: cover;
  opacity:0.7;
  border : 1px solid #1c1c1c;
  background-repeat:no-repeat;
  background-position: center; 
  cursor: pointer;
  transition: all 0.3s ease;
}
.mini-pic:hover{
  opacity:1;
  transition: all 0.3s ease;
}
.cont-mini{
  padding:4px!important;
}
.prix{
  font-size: 20px;
  font-family: "Barlow";
  color:var(--c1);
  font-weight:800
}
.solde{
  font-size:20px;
  color:black;
  text-decoration: line-through;
  margin-left: 7px;
}


.jplist-pagesbox button,.jplist-pagingnext button, .jplist-pagingprev button, .jplist-label{
  border:none!important;
  background:var(--c1)!important;
  color:white!important;
  text-shadow:none!important;
}


.controls{
    display: flex;
    justify-content: center;
    margin: 20px 0 10px 0;
}

.buttonJp{
  color: #fff;
  background-color: var(--c1);
  border-color:var(--c1);
  display: inline-block;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  user-select: none;
  border: 1px solid transparent;
  padding: .2rem .6rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: .25rem;
  margin: 0 3px;
}

.jplist-selected{
  background-color: #007bff;
  border-color: #007bff;
}

[data-jplist-control="pagination"]{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.colCtrl{
  display:flex;
  flex-wrap: wrap;
  margin-top:50px;
}
.jpDd{
  background: var(--c1);
  margin-right: 30px;
  border-top-left-radius:5px;
  border-top-right-radius:5px;
  transition:all 0.3s ease;
}
.jplist-dd-content{
  transition:all 0.3s ease;
  display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
    top: 100%;
    left: 0;
}
 .jplist-dd-content.jplist-dd-opened{
  background:var(--c1);
  -webkit-box-shadow: 0 0 7px 1px rgba(0,0,0,0.1);
box-shadow: 0px 3px 7px 1px rgba(0,0,0,0.1);
transition:all 0.3s ease;
border-bottom-left-radius:5px;
  border-bottom-right-radius:5px;
  opacity: 1;
  
}
.jplist-dd-opened{
  -webkit-box-shadow: 0 0 7px 1px rgba(0,0,0,0.1);
box-shadow: 0px 3px 7px 1px rgba(0,0,0,0.1);
transition:all 0.3s ease;
}
.jplist-dd-content{
  opacity:0;
  position:absolute;
}