@charset "utf-8";
/* CSS Document */
body {
  color: #000;
  font-family: 'Montserrat', sans-serif;
  position: relative;
  margin: 0;
  padding-bottom: 220px; //height of the footer
  box-sizing: border-box;
}
#page {
  overflow: hidden;
  flex-grow: 1;
  position: relative;
  min-height: 700px;
}
.grey {
  color: #5f5f5f
}
.black_p {
  color: #282525;
  font-size: 1.8rem;
}
.text-warning {
  color: #fc7636 !important;
}
.btn-warning {
  background-color: #fc7636;
  color: #fff;
}
.btn-warning:hover {
  color: #fff;
  background-color: #5f5f5f;
  border-color: #5f5f5f;
}
.btn-danger {
  background-color: #d35159;
  color: #fff;
}
.btn-danger:hover {
  color: #fff;
  background-color: #5f5f5f;
  border-color: #5f5f5f;
}
/*----------------------------------------------------------------
	HEADER	NAVBAR
----------------------------------------------------------------*/
#basic-addon1 {
  border-right: 6px solid #e9ecef;
  width: 90px;
}
.bg-accent {
  background: #fff
}
#brandLogo {
  height: 100px;
}
.fa-shopping-cart {
  font-size: 2.5rem
}
#cartTotal {
  display: inline-block;
  vertical-align: top;
  margin-left: -10px;
}
#sideDrawer {
  position: fixed;
  top: 230px;
  width: 60%;
  max-width: 650px;
  background: #000;
  box-shadow: 4px 8px 12px rgba(0, 0, 0, 0.4);
  height: 100%;
  overflow: auto;
}
#closeBtn {
  float: right;
  margin-right: 20px;
  margin-top: 15px;
  cursor: pointer;
  color: red;
  font-size: 25px;
}
.phone a {
  color: #fff;
  font-size: 15px;
}
.user a {
  color: #000;
  font-size: 13px;
  text-decoration: none;
}
.user a:hover, .phone a:hover {
  color: #717171;
}





.text-bg-light, .bg-light {
	border: 1px solid #868686;
}

.search {
  height: 45px;
  font-size: 0.9rem;
  letter-spacing: -1px;
}

.list_rub {
  font-size: 14px;
  background-color: #dddddd;
  color: #000;
  border: 1px solid #868686;
}
/*----------------------------------------------------------------
           PAGES
----------------------------------------------------------------*/
.content_page {
  max-width: 100%;
  margin: auto;
  padding: 0;
  min-height: 80vh;
  position: relative;
  overflow: hidden;
  flex-grow: 1;
  color: #58595b;
}
.breadcrumb {
  padding: 15px 5px 15px 15px;
  border-bottom: 1px solid #dedede;
}
.breadcrumb a {
  color: #d35159;
  text-decoration: none;
  font-size: 0.8rem;
}
.breadcrumb a:hover {
  text-decoration: underline
}
.content_infos {
  max-width: 1500px;
  margin: auto;
  padding: 25px;
  min-height: 80vh;
  position: relative;
  overflow: hidden;
  flex-grow: 1;
  color: #58595b;
}
.content_infos h3 {
  font-size: 1.1rem;
}
.content_infos h4 {
  font-size: 0.9rem;
}
.content_infos ul li {
  list-style-type: circle;
}
.content_infos a {
  color: #d12f39
}

/*----------------------------------------------------------------
	HOME
----------------------------------------------------------------*/



.promos {
    max-width:98%;
    margin:0 auto;


}
.promos h2 {
    background-color: #d35159;
    color:#fff;
    padding:8px;
    border-radius:8px;
    text-align:left;
    font-size:1.5rem;
}

    @media (max-width: 767px) {
  .carousel-inner .carousel-item > div {
      display: none;
  }
  .carousel-inner .carousel-item > div:first-child {
      display: block;
  }
}

.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
  display: flex;
}

/* medium and up screens */
@media (min-width: 768px) {

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

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

.carousel-inner .carousel-item-end,
.carousel-inner .carousel-item-start {
transform: translateX(0);
}

.carousel-item .diapo {
  border: 2px solid #b4b4b4;
    max-width:98%;

}

.carousel-control-next-icon,  .carousel-control-prev-icon {
  filter: invert(1) grayscale(100);

}


.carousel-control-prev {
  position: absolute;
  top: 0;

  bottom: 0;
     left:15px;
  z-index: 1;
  display: flex;
  align-items: left;
  justify-content: left;
  width:40px;
  padding: 0;
  color: #fff;
  text-align: center;
  background: 0 0;
    background-color: rgba(0, 0, 0, 0.);
  border: 0;
  opacity: .5;
  transition: opacity .15s ease;

}

.carousel-control-next {
  position: absolute;
  top: 0;
    right:18px;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: right;
  justify-content: right;
  width: 40px;
  padding: 0;
  color: #fff;
  text-align: center;
  background: 0 0;
    background-color: rgba(0, 0, 0, 0.);
  border: 0;
  opacity: .5;
  transition: opacity .15s ease;
}

.carousel-control-next-icon, .carousel-control-prev-icon {
  display: inline-block;
  width: 2.6rem;
  height: 2.6rem;
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: 100% 100%;
}
.prix_barre {
    text-decoration: line-through;
    color:#087ada;
    font-size:0.9rem;
     font-weight:600;
}
.prix_promo {
    color:#d12f39;
    font-weight:600;
    font-size:1.4rem;

}


.cat_home {
    max-width:98%;
    margin:0 auto;


}


.cat_home h2 {
    background-color: #5b5c5b;
    color:#fff;
    padding:8px;
    border-radius:8px;
    text-align:left;
    font-size:1.5rem;
}

.diapo_home {
  border: 0px solid #ccc;
  padding: 30px 0 20px;
  position: relative;
   border:3px solid #cacaca
}
.diapo_home:hover {
  border: 3px solid #7f7f7f;
}
.diapo_home a {
  text-decoration: none;
  overflow: hidden;
  display: block;
  color: #000;
}
.diapo_home_image {
  width: 100%;
  height: 280px;
  position: relative;
}
.diapo_home_image img {
  position: absolute;
  margin: auto !important;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 80%;
  max-width: 95%;
}
.text_list_home {

  height: 60px;
  text-align: center;
}

.text_list_home  h3 {
  font-weight: 500;
  font-size: 1.1rem;

    text-align:center;
}

.text_list_home  h3:hover {
color: #d35159
}

/*----------------------------------------------------------------
	LISTE PRODUITS
----------------------------------------------------------------*/
.list_nav {
  color: #545454;
}
.list_nav h3, .list_nav .h3 {
  border-bottom: 1px solid #dadada;
  padding-top: 14px;
  padding-bottom: 14px;
  margin: 0;
  font-size: 1.1rem;
}
.list_nav a {
  font-size: 0.8rem;
}
.back_nav a {
  color: #000;
  font-size: .9rem;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
  display: flex;
}
/* Accordion */
.accordion-body {
  color: #000;
  padding-left: 10px;
  padding-top: 0px;
  white-space: normal !important;
}
.accordion-item, .accordion-button {
  background-color: transparent !important;
  text-decoration: none !important;
  border-top: none;
  border-left: none;
  border-right: none;
}
.accordion-button::before {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-left: 10px;
  margin-right: 10px;
  content: "";
  background-image: url(../images/arrow-red.png);
  background-repeat: no-repeat;
  background-size: 1.25rem;
  transition: transform .2s ease-in-out;
}
.accordion-button:not(.collapsed)::before {
  background-image: url(../images/arrow-red.png);
  transform: rotate(-180deg);
}
.accordion-button:not(.collapsed) {
  color: #000;
}
.accordion-button {
  transition: ease .6s;
  font-size: 0.9rem;
  color: #000;
}
.accordion-button:hover {
  color: #878787;
}
.button2::before {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-left: 2px;
  margin-right: 5px;
  content: "";
  background-image: url(../images/arrow-black.png);
  background-repeat: no-repeat;
  background-size: 1.25rem;
  transition: transform .2s ease-in-out;
}
.button2:not(.collapsed)::before {
  background-image: url(../images/arrow-black.png);
  transform: rotate(-180deg);
}
.button2:not(.collapsed) {
  color: #18fb00;
}
.button2 {
  transition: ease .6s;
  font-size: 0.8rem;
  font-weight: 600;
  color: #000;
}
.button2:hover {
  color: #d35159;
}
button > span {
  padding: 0 6px 0 0px;
}
.accordion {
  padding-top: 10px;
}
.accordion-button:not(.collapsed)::after {
  background-color: #fff;
  background-image: none;
  color: #000;
}
.accordion-button.collapsed::after {
  background-image: none;
}
.accordion-button:not(.collapsed) {
  color: #000;
  font-weight: bold;
  box-shadow: 0 5px 11px 0 rgba(104, 104, 104, .18), 0 4px 15px 0 rgba(104, 104, 104, .15);
}
.button2:not(.collapsed) {
  color: #d35159;
  font-weight: bold;
  /*border:1px solid rgba(0, 0, 0,.60);*/
  box-shadow: 0 2px 6px 0 rgba(104, 104, 104, .15), 0 2px 6px 0 rgba(104, 104, 104, .15);
}
/* FIN Accordion */
.toogle_list {
  background-color: #d35159;
  border: #d35159
}
.list-group-item-action:focus, .list-group-item-action:hover {
  background-color: #dd626a;
  color: #fff;
}
.list_page-title {
  margin: 20px auto 10px;
}
.list_page-title h1, .list_page-title .h1 {
  font-size: 35px;
  color: #dd626a;
  margin-left: 5px;
  text-transform: uppercase;
}
.btn-filtres {
  border-color: #dd626a;
  color: #656565;
  font-size: 0.9rem;
}
.btn-filtres:hover {
  border-color: #dd626a;
  background-color: #dd626a;
  color: #fff;
}
.offcanvas {
  z-index: 10005;
}
.offcanvas-header {
  background-color: #dd626a;
  color: #fff;
}
.liste_prod {
  max-width: 1500px;
  margin: 0 auto;
}
.diapo {
  border-top: 1px solid transparent;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
  border-bottom: 1px solid #ccc;
  padding: 30px 0 20px;
  position: relative;
   border:2px solid #000
}
.diapo:hover {
  border: 1px solid #ccc;
}
.diapo a {
  text-decoration: none;
  overflow: hidden;
  display: block;
  color: #000;
}
.diapo_image {
  width: 100%;
  height: 170px;
  position: relative;
}
.diapo_image img {
  position: absolute;
  margin: auto !important;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 80%;
  max-width: 95%;
}
.text_list {
  font-size: 0.9rem;
  height: 100px;
  text-align: center;
}

.text_list h2 {
  font-weight: 500;
  font-size: 1.6rem;
    text-transform: uppercase;
    text-align:center;
}
.text_list h3 {
  font-weight: 500;
  font-size: 1.1rem;
}
.diapo_prix {
  height: 55px;
}
.prix_list {
  font-size: 1.2rem;
  color: #087ada;
}
.prix_list small {
  color: #000;
  font-size: 0.8rem;
}
.diapo_prix small {
  font-size: 0.8rem;
}
.diapo_qte input, textarea {
  border: 1px solid #eeeeee;
  box-sizing: border-box;
  margin: 0;
  outline: none;
  padding: 10px;
}
.diapo_qte input[type="button"] {
  -webkit-appearance: button;
  cursor: pointer;
}
.diapo_qte input::-webkit-outer-spin-button, .diapo_qte input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
.diapo_qte .input-group {
  position: relative;
  display: block;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
  padding-bottom: 15px;

}
}
.diapo_qte .input-group input[type='button'] {
  background-color: #eeeeee;
  min-width: 45px;
  width: auto;
  transition: all 300ms ease;
}
.diapo_qte .input-group .button-minus, .diapo_qte .input-group .button-plus {
  font-weight: bold;
  height: 45px;
  padding: 0;
  width: 38px;
  position: relative;
   border: 1px solid #676767;
}
.diapo_qte .input-group .quantity-field {
  position: relative;
  height: 45px;
  left: -6px;
  text-align: center;
  width: 80px;
  display: inline-block;
  font-size: 13px;
  margin: 0 0 5px;
  resize: vertical;
  border: 1px solid #676767;


}
.diapo_qte .button-plus {
  left: -13px;
}
.diapo_qte input[type="number"] {
  -moz-appearance: textfield;
  -webkit-appearance: none;
}
.diapo_qte .btn {
  padding-left: 20px;
  padding-right: 20px;
  width: 100%
}
.diapo_variante {
  min-height: 110px;
  display: flex;
  align-items: end;
}
.diapo_variante .btn {
  padding-left: 20px;
  padding-right: 20px;
  width: 100%
}
.diapo_variante .btn i {
  padding-left: 5px;
}
.variante_prod a {
  text-decoration: none;
  overflow: hidden;
  display: block;
  color: #000;
}
.variantes_plus {}
.variantes_plus .btn {
  padding-left: 5px;
  padding-right: 5px;
  width: 100%
}
.variantes_plus .btn i {
  padding-right: 5px;
}
.choix_variante {
  max-width: 250px;
}

.caracs_variantes {
	color:#d35159;
	font-weight:600;
	font-size:14px;
}
/*----------------------------------------------------------------
	FICHE PRODUIT
----------------------------------------------------------------*/
.top_fiche {
  max-width: 98%
}
.top_fiche h1 {
  font-size: 1.6rem;
}
.top_fiche img {
  max-width: 180px;
}
.img_prod img {
  max-width: 450px;
}
.details_prod {
  padding: 5px 5px 5px 20px;
}
.prix_fiche {
  font-size: 1.6rem;
  color: #087ada;
  font-weight: 600;
}
.prix_fiche small {
  color: #000;
  font-size: 0.8rem;
}
.prix_vat {
  font-size: 0.9rem;
  color: #000;
}
.prix_ht {
  font-size: 0.8rem;
  color: #000;
}
.details_prod table {
  font-size: 0.9rem;
  max-width: 70%;
}
.details_prod tbody, td, tfoot, th, thead, tr {

}
.ad_fiche {
  max-width: 250px;
  font-weight: 600;
  line-height: 1.4rem;
}
.detail_prod {
  padding: 5px 5px 5px 25px;
}
.detail_prod h3 {
  font-size: larger;
  font-weight: 600;
  border-bottom: 2px solid #dadada;
  margin-bottom: 0.5rem;
  max-width: 70ch;
}
.detail_prod table {
  width: 100%;
  max-width: 70ch;
}
.list_variantes {
  padding: 25px 0px 25px 25px;
}
.list_variantes h3 {
  font-size: larger;
  font-weight: 600;
  border-bottom: 2px solid #dadada;
  margin-bottom: 35px;
  margin-right: 10px;
}
.img_variante img {
  width: auto;
  height: auto;
  max-height: 150px;
  max-width: 150px;
}
.list_variantes h4 {
  font-size: 0.9rem;
}
.list_variantes table {
  font-size: 0.8rem;
}
.variante_tarif {
  text-align: end;
}
.prix_variante {
  font-size: 1.3rem;
  color: #087ada;
  font-weight: 600;
}
.prix_variante small {
  color: #000;
  font-size: 0.7rem;
}

/*----------------------------------------------------------------
          MARQUES
----------------------------------------------------------------*/

.marques_nav ul {
    list-style: none;
    padding-left: 0;
    display: flex;
    flex-wrap: wrap;
}
.marques_nav  ul li {
    margin-right: 15px;
    font-size: 1.3rem;
    font-weight: 600;
}

.marques_nav  ul li a {
    color:#424241;
    text-decoration: none;
    padding:5px;
}

.marques_nav  ul li a:hover {
     background-color:#d35159;
    color:#fff;
}

.alphabetical_list p {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 5px;
}

.marque_alphabetical_list {
    margin-bottom: 20px;
    -moz-column-count: 4;
    column-count: 4;
}

.marque_alphabetical_list a {
      color:#424241;
    text-decoration: none;
    padding:2px;
}

.marque_alphabetical_list a:hover {
      background-color:#d35159;
    color:#fff;
    text-decoration: none;
}
/*----------------------------------------------------------------
           USER
----------------------------------------------------------------*/
.content_user {
  max-width: 1250px;
  margin: auto;
  padding: 0px 0px 35px 0px;

 position: relative;
  overflow: hidden;
  flex-grow: 1;
  color: #58595b;
min-height:60vh
}

.title_user {
    font-weight:500;
    font-size:1.6rem;
    color:#000;


}

.section-title-hr {
  max-width: 450px;
  height: 1px;
  border: 1px solid rgba(0, 0, 0, 0.8);
  background-color: rgba(0, 0, 0, 0.8);
  display: block;
    margin:0 auto;

}

.connexion_client {
  max-width: 550px;
  margin: 0 auto;
}
.content_user .form-control {
    color:#000;
    font-size:0.9rem;
    font-weight:500;
}
.content_user label {
    color:#000;
    font-size:0.9rem;
    font-weight:500;
}

.content_user .form-check-input {
    border:2px solid #000;
}
 .btn_connect {
    font-weight:600;

           background-image: linear-gradient(to right, #000000 0%, #434343  51%, #000000  100%);
            margin: 0px;
            padding: 10px;
            text-align: center;
            text-transform: uppercase;
            transition: 0.5s;
            background-size: 200% auto;
            color: white;
            box-shadow: 0 0 20px #eee;
            border-radius: 10px;
            display: block;
     width:100%;
          }

.btn_connect:hover {
         background-position: right center; /* change the direction of the change here */
            color: #fff;
            text-decoration: none;


}


.btn-block {
  width: 100% !important;
}
.btn-secondary {
  background-color: #ffffff;
  border: 2px solid #000 !important;
  color: #000;
font-weight:600;
  box-shadow: none !important;
  padding: 10px;
  border-radius: 8px !important;
  -moz-border-radius: 8px !important;
  -webkit-border-radius: 8px !important;
}

.compte {

}

.compte  a {
    text-align: center;
      display:block;

    color: #000;
    padding: 0 0.9375rem;
    margin-bottom: 1.875rem;
	text-decoration: none;
}

.compte a i {
    display: block;
    font-size:40px;
    width: 100%;
    color: #000;
    padding-bottom: 55px;
}

 .compte .card-body {
    background-color: #f8f9fa;
}
 .compte .card-body:hover {
    background-color: #fff;
}


.compte .accordion-button:not(.collapsed) {
  color: #373535;
  font-weight: bold;
  box-shadow: 0 5px 11px 0 rgba(104, 104, 104, .0), 0 4px 15px 0 rgba(104, 104, 104, .0);
}
.compte .accordion-body {
  color: #000;
  padding-left: 50px;
  padding-top: 10px;
  white-space: normal !important;
}

    table_commande * {
        white-space: nowrap;

    }
.table_commande {
    font-size:0.8rem;
}

.th_mob {
    display:none;
}
.modal-header {
    z-index:999999;
}


.ar_commande {
    font-size:18px;
    margin:30px 10px 30px 10px;
}
.ar_commande a {
    color:#d35159;

}

/*----------------------------------------------------------------
           PANIER - COMMANDE
----------------------------------------------------------------*/

.panier_img {

    max-width:80px;


}

.sup_article {
    font-size:0.9rem;
    color:#d35159;
    text-decoration: none;
}

.form_commande label {
    font-size:0.9rem;
}

.form_commande input, .form_commande select {
    border:1px solid #797979;
    background-color: #f8f9fa;
    font-size:0.9rem;
}

.form_commande .form-check-input {
    border:3px solid #d35159;
}

.radiobtn {

    height: 25px;
    width: 25px;
    background-color: #eee;
    border-radius: 50%;
}

.block_adresse {
    max-width:450px;

}

.block_adresse .form-check-input {
    border:3px solid #d35159;
}


.block_choix {
    max-width:750px;

}

.logo_trans {
    max-width:50px;
}

.logo_paiement {
    max-width:180px;
}


.display-7 {
    font-size:1.3rem;
}
/*----------------------------------------------------------------
		FOOTER
----------------------------------------------------------------*/
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  min-height: 150px;
  background-color: rgba(77, 77, 77, 1.0);
}
.footer_content {
  max-width: 1250px;
  margin: 0 auto;
  min-height: 130px;
  color: #fff;
}
.footer_content a {
  color: #fff;
  text-decoration: none;
  font-size: 0.95rem;
}
.footer_content a:hover {
  color: #fdcd12;
}
a.tel {
  color: #fdcd12
}
.copy {
  background-color: #000;
  color: #fff;
  font-size: 0.8rem;
  text-align: center;
  padding: 10px;
}
.phone {
  font-size: 1.1rem;
  font-weight: 600;
}
img.logo_footer {
  display: inline-block;
  margin: 8px;
  text-align: center;
  max-height: 150px;
}
.picto_footer {
  display: inline-block;
  margin: 10px;
  text-align: center;
}
.footer_content ul {
  list-style-type: none;
}
.footer_content ul li {
  line-height: 30px;
}
hr.style1 {
  border-top: 2px solid #25abbe;
}
#toTopBtn {
  position: fixed;
  bottom: 26px;
  right: 39px;
  z-index: 98;
  padding: 21px;
  background-color: rgba(0, 0, 0, 0.8);
}
.js .cd-top--fade-out {
  opacity: .5
}
.js .cd-top--is-visible {
  visibility: visible;
  opacity: 1
}
.js .cd-top {
  visibility: hidden;
  opacity: 0;
  transition: opacity .3s, visibility .3s, background-color .3s
}
.cd-top {
  position: fixed;
  bottom: 20px;
  bottom: var(--cd-back-to-top-margin);
  right: 20px;
  right: var(--cd-back-to-top-margin);
  display: inline-block;
  height: 40px;
  height: var(--cd-back-to-top-size);
  width: 40px;
  width: var(--cd-back-to-top-size);
  box-shadow: 0 0 10px rgba(0, 0, 0, .05) !important;
  background: url(https://res.cloudinary.com/dxfq3iotg/image/upload/v1571057658/cd-top-arrow.svg) no-repeat center 50%;
  background-color: hsla(5, 76%, 62%, .8);
  background-color: hsla(var(--cd-color-3-h), var(--cd-color-3-s), var(--cd-color-3-l), 0.8)
}




#suggestions {
    position: absolute;
    z-index: 1000;
    background: white;
    border: 1px solid #ccc;
    border-top: none;
    width: 100%;
    max-height: 250px;
    overflow-y: auto;
    list-style: none;
    padding: 0;
    margin: 0;
}

.suggestion-item {
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
}

.suggestion-item:hover {
    background-color: #f8f9fa;
}

.suggestion-item.active {
    background-color: #007bff;
    color: white;
}