#filter{
  background: #0002;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 10px;
  width: 100%;
}
#filter>div{
  display: flex;
  align-content: center;
  flex-wrap: wrap;
}
#filter>div>div{
  margin: 5px;
}
#apparence{
  display: flex;
  align-items: center;
}
#apparence>div{
  cursor:pointer;
  display: flex;
  margin: 0 5px;
  width: 30px;
}
#apparence>div:hover span{background: #585858;}
#apparence>div.active span{
  background: #585858;
}
#ligne{
  flex-direction: column;
}
#ligne span{
  transition: all 0.3s;
  background: #fff;
  display: block;
  margin: 2px 0;
  width: 100%;
  height: 3px;
}
#carre{     
  flex-wrap: wrap;
}
#carre span{
  transition: all 0.3s;
  background: #fff;
  display: block;
  margin: 2px;
  width: 11px;
  height: 11px;
}
#categproduit #list_categ, #order #list_order{
  padding: 7px 5px;
  border: 0px; outline: none;
  font-size: 14px;
}
#search{

}
#searchbar{
  background: url(moduls/catalogue/img/loupe.png) no-repeat 5px center/20px #fff;
  padding: 7px 0px 7px 35px;
  transition: all 0.3s;
  border: 0px;
  font-size: 14px;
  outline: none !important;
}
#searchbar:hover, #searchbar:focus{
  background: url(moduls/catalogue/img/loupeh.png) no-repeat 5px center/20px #fff;
}

#catalogue{
  max-width: 1440px;
  margin: 15px auto;
}
.produit{
  box-shadow: 0 0 10px 3px rgba(0,0,0,0.1);
  padding: 0px;
  display: flex;
  justify-content: space-between;
  width: 100%;
  min-height: 250px;
  margin: 20px 0;
  transition: all 0.5s;
  animation: apparition 1s;
}

@keyframes apparition{
  0%, 20%{opacity: 0}
  40%, 100%{opacity: 1}
}

.produit .p-image{
  display: flex;
  width: 100%;
  max-width: 300px;
  height: 250px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.produit .p-image img{
  width: 100%;
  height: 100%; object-fit: cover;
}
.produit .p-txt{
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  margin: 0 30px;
}
.produit .p-txt .p-titre{
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px;
}
.produit .p-txt .p-resume p{
  color: #888;
  text-align: left !important;
  margin: 0;
}
.produit .p-info{
  display: flex;
  width: 100%;
  max-width: 200px;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
.produit .p-info .p-prix{
  display: flex;
  align-items: flex-start;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}
.produit .p-info .p-prix>div:last-child{
  font-size: 0.7em;
  font-weight: normal;
  margin-left: 5px;
}
.produit .p-info .p-savoir-plus a{
  display: block;
  background: var(--primary);
  color: #fff;
  text-decoration: none !important;
  padding: 10px 15px;
  font-size: 15px;
  text-transform: uppercase;
  transition: all 0.4s;
}
.produit .p-info .p-savoir-plus a:hover{
  background: #ccc;
}
.carre .produit .p-info{margin-bottom: 15px;}
.noarticle{
  box-shadow: 0 0 20px #ccc;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 250px;
  margin: 30px 0;
  transition: all 0.5s;
}

.noarticle p{
  font-size: 20px;
  font-weight: bold;
  margin: 0;
  text-align: center !important;
}

@media(min-width: 992px){
  #catalogue.carre {
    display: flex;
    flex-wrap: wrap;
  }
  .carre .produit{
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0px 0px 0px;
    max-width: calc((100% / 4) - 30px);
    margin: 15px;
  }
  .carre .produit .p-txt{
    margin: 15px 0 0;
    padding-left: 15px; padding-right: 15px;
  }
  .carre .produit .p-resume{
    display: none;
  }
  .carre .produit .p-info .p-prix{
    margin-bottom: 15px;
  }
  .carre .produit .p-txt .p-titre{text-align: center !important;}

}
@media (max-width: 991px){
  .produit .p-image{width: 100%;max-width: 100%;}
  .produit .p-txt .p-titre,.produit .p-txt .p-resume p{text-align: center !important;}
  #apparence{
    display: none;
  }
  .produit{
    flex-direction: column;
    align-items: center;
    padding: 20px 20px 30px;
  }
  .produit .p-txt{
    margin: 30px 0;
  }
  .produit .p-info .p-prix{
    margin-bottom: 30px;
  }
}

/*Page catalogue détails*/

body a.product-btn{
  display: inline-block;
  background: var(--primary);
  color: #fff;
  text-decoration: none !important;
  padding: 10px 15px;
  font-size: 15px;
  text-transform: uppercase;
  transition: all 0.4s;
}
body a.product-btn:hover{
  background: #ccc;
}
#p-description img{width: auto !important;display: block !important; max-width: 100% !important; height: auto !important; margin-bottom: 20px;}
#produit{
  display: flex;
  justify-content: space-between;
}
.sp-wrap {
  width: 100%;
}
.sp-large a img{
  width: 100%;
}
#produit #p-info{
  width: 100%;
}
#produit #p-info #p-titre{
  width: 100%;
}
#produit #p-info #p-titre h1{
  text-align: left !important;
  margin-bottom: 15px;
}
#produit #p-info #p-titre h1:after{
  display: none !important;
}
#produit #p-info #p-top-carac{
  width: 100%;
  margin-bottom: 15px;
}
#produit #p-info #p-top-carac p{
  margin: 2px 0;
}
#produit #p-info #p-bot-produit{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
#produit #p-info #p-bot-produit #p-prix{
  background: #eee;
  display: flex;
  align-items: flex-start;
  font-size: 25px;
  font-weight: bold;
  text-align: center;
  margin:auto 0;
  padding: 15px 20px;
}
#produit #p-info #p-prix>div:last-child{
  font-size: 0.7em;
  font-weight: normal;
  margin-left: 5px;
}
#btn-back{
  background: #ccc;
  border-radius: 30px;
  display: block;
  font-size: 18px;
  margin: 50px auto 0;
  text-decoration: none !important;
  padding: 10px 0;
  max-width: 200px;
  transition: all 0.5s;
}
#btn-back:hover{
  background: #eee;
}
.tab-info{
  margin: 10px 0;
  display: flex;
  justify-content: space-between;
}
table.info{
  width: 48%;
  margin: 0;
}
table.info td{
  text-align: right;
}
@media (max-width: 991px){
  .tab-info{
    flex-direction: column;
  }
  table.info{
    width: 100%;
  }
  #produit{
    flex-direction: column;
    align-items: center;
  }
  #produit #p-info{
    padding:0;
    margin-top: 20px;
  }
}