.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

:root {
  --bleu_profond: #1e2a38;
  --bleu_primaire: #2563eb;
  --orange-accent: #f97316;
  --orange_accent2: #f5f1e8;
  --gris_clair: #f3f4f6;
  --texte_fonce: #111827;
}

.splide__slider,
.splide__track,
.splide__list {
  position: relative;
}

.splide__track {
  height: 447px;
}

button.splide__arrow {
  background: var(--bleu_profond);
  height: 58px;
  width: 59px;
  border-radius: 0;
}

.splide__arrow svg {
  display: none;
}

button.splide__arrow--prev {
  background-image: url(assets/img/arrow_left.svg);
  background-repeat: no-repeat;
  background-position: center;
  border-top-right-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
  left: 0;
}

button.splide__arrow--next {
  background-image: url(assets/img/arrow_right.svg);
  background-repeat: no-repeat;
  background-position: center;
  border-top-left-radius: var(--radius-md);
  border-bottom-left-radius: var(--radius-md);
  right: 0;
}

button.splide__pagination__page {
    background: var(--color-gris);
    border: 0;
    border-radius: 50%;
    display: inline-block;
    height: 10px;
    margin: 8px;
    opacity: .7;
    padding: 0;
    position: relative;
    transition: transform .2s linear;
    width: 10px;
}

button.splide__pagination__page.is-active {
    background: black;
    transform: scale(1.4);
    z-index: 1;
}

button.splide__pagination__page.is-active::after {
  content: "";
  position: absolute;
  top: -5px;
  left: -5px;
  width: calc(100% + 10px);
  height: calc(100% + 10px);
  border: 2px solid black;
  border-radius: 50%;
}

#accueil {
  width: 100%;
  margin-bottom: 30px;
  justify-content: center;
}

#meilleur-vente > .wrap > h1,
#meilleur-selection > .wrap > h1 {
  font-family: "Playfair Display", sans-serif;
  display: flex;
  margin-bottom: 40px;
  align-items: center;
  color: var(--texte_fonce);
  font-size: 36px;
}

#meilleur-vente > .wrap > h1::after,
#meilleur-selection > .wrap > h1::after {
  content: "";
  height: 1px;
  flex: 1;
  background-color: var(--bleu_profond);
  margin-left: 30px;
}
#meilleur-vente .wrap .woocommerce,
#meilleur-selection .wrap .woocommerce  {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

#meilleur-vente .wrap .woocommerce .produit,
#meilleur-selection .wrap .woocommerce .produit {
  border: solid 1px;
  width: 17rem;
  height: 41rem;
  display: flex;
  flex-direction: column;
  padding: 10px 25px;
  box-sizing: border-box;
}
#meilleur-vente .wrap .woocommerce .produit .carte,
#meilleur-selection .wrap .woocommerce .produit .carte{
  width: 16rem;
  transform: translateX(-18px);
  position: relative;
}

#meilleur-vente .wrap .woocommerce .produit .carte .nouveau,
#meilleur-selection .wrap .woocommerce .produit .carte .nouveau {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 5;

  background-color: var(--orange-accent);
  color: white;

  padding: 6px 10px;
  border-radius: 4px;

  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

#meilleur-vente .wrap .woocommerce .produit img,
#meilleur-selection .wrap .woocommerce .produit img {
  width: 100% !important;
  height: 300px !important;
  margin: 0 auto;
  border: solid;
  display: block;
  padding: 0;
}

#meilleur-vente .wrap .woocommerce .info,
#meilleur-selection .wrap .woocommerce .info {
  margin: 5px 0 0 0;
}

#meilleur-vente .wrap .woocommerce .info h2,
#meilleur-vente .wrap .woocommerce .info h3,
#meilleur-selection .wrap .woocommerce .info h2,
#meilleur-selection .wrap .woocommerce .info h3
 {
  margin: 0;
}

#meilleur-vente .wrap .woocommerce .info h2,
#meilleur-selection .wrap .woocommerce .info h2  {
  font-family: "plairfair display semibold";
  font-size: 18px;
  line-height: 16px;
  margin-bottom: 10px;
  transform: translateX(-15px);
  /* display: -webkit-box; Sert la imposer un nombre limite de ligne
  -webkit-line-clamp: 2; 
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden; */
  
}

#meilleur-vente .wrap .woocommerce .info h3,
#meilleur-selection .wrap .woocommerce .info h3 {
  font-family: "plairfair display medium";
  font-size: 15px;
  line-height: 16px;
  margin-bottom: 1px;
  transform: translateY(-5px) translateX(-15px);
  
}

#meilleur-vente .wrap .woocommerce  .avis,
#meilleur-selection .wrap .woocommerce .avis {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  font-size: 13px;
  transform: translateY(-5px);
  
}

#meilleur-vente .wrap .woocommerce  .avis .etoile,
#meilleur-selection .wrap .woocommerce .avis .etoile {
  font-size: 13px;
  transform: translateX(-15px);
}

#meilleur-vente .wrap .woocommerce  .avis .etoile i.remplie,
#meilleur-selection .wrap .woocommerce .avis .etoile i.remplie {
  color: #f5c518;
}

#meilleur-vente .wrap .woocommerce  .avis .coeur,
#meilleur-selection .wrap .woocommerce  .avis .coeur {
  font-size: 13px;
  transform: translateX(110px);
}

#meilleur-vente .coeur .tinvwl-product-in-list,
#meilleur-selection .coeur .tinvwl-product-in-list {
  color: #e63946 ;
}
#meilleur-vente .wrap .woocommerce .produit .description,
#meilleur-selection .wrap .woocommerce .produit .description {
    transform: translateX(-15px);
  font-size: 15px;
  line-height: 17px;
  margin: 8px 0 0;
  flex: 1;

}

#meilleur-vente .wrap .woocommerce .produit .prix-stock,
#meilleur-selection .wrap .woocommerce .produit .prix-stock {
  display: grid;
  grid-template-columns: 1fr 1fr ;
  align-items: center;
  margin-bottom: 20px;
  transform: translateX(-15px);
}
#meilleur-vente .wrap .woocommerce .produit .prix-stock.avec-promo,
#meilleur-selection .wrap .woocommerce .produit .prix-stock.avec-promo {
  grid-template-columns: auto auto 1fr;
  gap: 8px;
}
#meilleur-vente .badge-promo,
#meilleur-selection .badge-promo {
  background-color: var(--orange-accent);
  color: white;
  padding: 4px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
#meilleur-vente .wrap .woocommerce .produit .prix-stock .stockage, 
#meilleur-selection .wrap .woocommerce .produit .prix-stock .stockage{
  color: var(--gris_clair);
  margin-right: 20px;
  font-size: 10px;
  transform: translateX(50px);
  text-align: center;
  
}
#meilleur-vente .wrap .woocommerce .produit .prix-stock .stockage .stock, 
#meilleur-selection .wrap .woocommerce .produit .prix-stock .stockage .stock{
  background-color: var(--bleu_primaire);
  font-size: 11px;
}
#meilleur-vente .wrap .woocommerce .produit .prix-stock .stockage .pas-stock,
#meilleur-selection .wrap .woocommerce .produit .prix-stock .stockage .pas-stock{
  background-color: var(--orange-accent);
  font-size: 11px;
}
#meilleur-vente .wrap .woocommerce .produit .prix-stock .stockage .re-stock,
#meilleur-selection .wrap .woocommerce .produit .prix-stock .stockage .re-stock{
  background-color: var(--bleu_profond);
  font-size: 11px;
}



#meilleur-vente .wrap .woocommerce .btn--primary,
#meilleur-selection .wrap .woocommerce .btn--primary {
  margin-left: 40px; 
}

/* Tablette */
/* @media (max-width: 1100px) {
  #meilleur-vente .wrap .woocommerce,
  #meilleur-selection .wrap .woocommerce {
    grid-template-columns: repeat(3, 1fr);
  }

  #meilleur-vente .wrap .woocommerce .produit,
  #meilleur-selection .wrap .woocommerce .produit {
    width: 100%;
  }
} */

/* Petite tablette */
/* @media (max-width: 850px) {
  #meilleur-vente .wrap .woocommerce,
  #meilleur-selection .wrap .woocommerce {
    grid-template-columns: repeat(2, 1fr);
  }
} */

/* Mobile */
/* @media (max-width: 600px) {
  .wrap {
    padding: 15px;
  }

  #meilleur-vente > .wrap > h1,
  #meilleur-selection > .wrap > h1 {
    font-size: 28px;
    margin-bottom: 25px;
  }

  #meilleur-vente > .wrap > h1::after,
  #meilleur-selection > .wrap > h1::after {
    margin-left: 15px;
  }

  #meilleur-vente .wrap .woocommerce,
  #meilleur-selection .wrap .woocommerce {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  #meilleur-vente .wrap .woocommerce .produit,
  #meilleur-selection .wrap .woocommerce .produit {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    height: auto;
    min-height: 41rem;
  }
} */
/* Petite tablette */
@media (max-width: 850px) {
  #meilleur-vente .wrap .woocommerce,
  #meilleur-selection .wrap .woocommerce {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  #meilleur-vente .wrap .woocommerce,
  #meilleur-selection .wrap .woocommerce {
    display: flex !important;
    flex-wrap: nowrap;
    gap: 1rem;

    overflow-x: scroll;
    overflow-y: hidden;

    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;

    padding-bottom: 1rem;
  }

  #meilleur-vente .wrap .woocommerce .produit,
  #meilleur-selection .wrap .woocommerce .produit {
    flex: 0 0 80%;
    min-width: 80%;
    max-width: 80%;

    scroll-snap-align: start;

    margin: 0;
    height: auto;
    min-height: 41rem;
  }
}


@media (max-width: 1100px) {
  .splide__arrow,
  .splide__pagination,
  .splide__pagination__page,
  .splide__pagination__page.is-active,
  .splide__pagination__page.is-active::after {
    display: none !important;
  }
}