/* Custom code goes here.
 * A template should always ship with an empty custom.css
 */
/* 22.05.19 - Webbax | TUTO 77 */

/* step 1 */
body.page-index #wrapper .container {
     max-width: 100%;
     width: 100%;
     padding-left: 0;
     padding-right: 0;
}
body.page-index #wrapper .featured-products, body.page-index #wrapper .banner, body.page-index #wrapper #custom-text{
     margin-left: auto;
     margin-right: auto;
     padding-left: 15px;
     padding-right: 15px;
}
@media (min-width: 992px) {
     body.page-index #wrapper .featured-products, body.page-index #wrapper .banner, body.page-index #wrapper #custom-text{
         max-width: 940px;
    }
}
@media (min-width: 1200px) {
     body.page-index #wrapper .featured-products, body.page-index #wrapper .banner, body.page-index #wrapper #custom-text{
         max-width: 1140px;
    }
}
@media (max-width: 991px) {
     body.page-index #wrapper .featured-products, body.page-index #wrapper .banner, body.page-index #wrapper #custom-text{
         max-width: 100%;
    }
}
.carousel-control .icon-prev {
     margin-left: 0;
}
.carousel-control .icon-next {
     margin-right: 0;
}

/* step 2 */
.carousel .carousel-inner{height:100%;}
.carousel{box-shadow:none;}

/* step 3 */
#carousel a img:hover{opacity:0.9;filter: alpha(opacity=90); /* For IE8 and earlier */}

/* 09.12.20 - Webbax | TUTO 114 */
@media (max-width:650px) {
    #blockcart-modal .divide-right{display:none!important;}
    #blockcart-modal .cart-products-count{display:none!important;}
    #blockcart-modal .cart-content p{display:none!important;}
    #blockcart-modal .cart-content-btn button, #blockcart-modal .cart-content-btn a{font-size:12px;}
    #blockcart-modal .cart-content-btn a:after{content:" →";line-height:5px;font-size:50px;}
    #blockcart-modal .cart-content-btn .material-icons{display:none!important;}
}
/* Compteur */
.head_cart_compteur{
    font-size: 14px;
    margin-top: 5px;
    padding-top: 4px;
    padding-bottom: 5px;
    background-color: #dcf4f9;
}

/* Flat style */

#wrapper{background-color:#fff;box-shadow:none;box-shadow:none;}
#header .header-nav{border-bottom:1px solid #222;}
.footer-container{box-shadow:none;border-top:1px solid #222;}
.thumbnail-container{box-shadow:none!important;}
.highlighted-informations{box-shadow:none!important;}
.search-widget form input[type=text]{border:1px solid #222;}
#category .block-category{box-shadow:none!important;border:none;border-bottom:1px dashed #222;}
.left-column{border-left:1px dashed #222;}
.block-categories{box-shadow:none;border:none;}
#search_filters{box-shadow:none;}
.block-categories .category-sub-menu li[data-depth="0"]>a{border-bottom:none;}
.product-variants>.product-variants-item select{box-shadow:none;}
.product-flags li.product-flag{font-size:11px;text-align:center;}
.card {box-shadow:none;}
top-menu .sub-menu{box-shadow:none;}
body#checkout #header .header-nav{box-shadow:none;}
body#checkout section.checkout-step{box-shadow:none;}
body#checkout #footer{box-shadow:none;}
.page-customer-account #content{box-shadow:none;}
.page-authentication #content{box-shadow:none;}
.page-order-detail .box{box-shadow:none;}
.page-my-account #content .links a span.link-item{box-shadow:none;border :1px solid}
.carousel{box-shadow:none;}
.product-miniature .thumbnail-container{box-shadow:none;}
.pagination .page-list{box-shadow:none;}
.block-categories{box-shadow:none;}
#category #left-column #search_filters{box-shadow:none;}
.tabs {box-shadow:none;}
.product-cover img{box-shadow:none;}
.product-images > li.thumb-container > .thumb{box-shadow:none;}
.product-flags li.product-flag{box-shadow:none;}
.social-sharing li{box-shadow:none;}
#product #block-reassurance{box-shadow:none;}
.footer-container {box-shadow:none;}
#products .page-not-found{box-shadow:none;}
.block_newsletter form input {box-shadow:none;}
#left-column .block_newsletter {box-shadow:none;}
#wrapper {box-shadow:none;}
#wrapper .banner img{box-shadow:none;}

/* mobiles */
@media(max-width:767px){    
    /* #header .header-top a[data-depth="0"]{font-size:25px;} */
    .left-column{border:none;}
    #category .block-category{border:none;}
    .card {box-shadow:none;}
    #products .thumbnail-container,
    .featured-products .thumbnail-container,
    .product-accessories .thumbnail-container{box-shadow:none;}
    #products .thumbnail-container .product-description,
    .featured-products .thumbnail-container .product-description,
    .product-accessories .thumbnail-container .product-description{box-shadow:none;}
    .footer-container{box-shadow:none;}
    #wrapper {box-shadow:none;}
}

/* inscription au panier */
.free_shipping {
    padding-bottom: 5px;
    padding-top: 3px;
    margin-top: 10px;
    background-color: #dcf4f9;
    text-align: center;
    font-size: 14px;
}

/* taille logo petit appareils */
@media (max-width:420px){
   #header .header-nav .top-logo a img {
        max-height: 46px;
        max-width: 100%;
        }
   }

/* categorie */
#category .block-category {
    box-shadow: none!important;
    border: none;
    border-bottom: none;
}

#category .card-block {
    padding: 1.25rem 0em 1.5rem;
}

@media (max-width: 500px){
    #products .itemarticle {
        width: 49%;
        margin-left: 0.67%;
    }
    #products .product-miniature .thumbnail-container{
        width: 100%
    }
    #products .product-miniature .product-description {
	width: 100%
    }
}

@media (min-width: 768px) 
    .blockreassurance_product {
       display : none;
    }

.quickview .modal-content {
    background: #ffffff;
}

.brands-sort .select-title, .products-sort-order .select-title, .suppliers-sort .select-title {box-shadow: none;}

.products-selection .sort-by {font-size : 14px;}

li.product-flag.discount{background-color : #000000}

li.product-flag.on-sale {
  background: black !important;; /* Fond noir */
  color: white; /* Texte en blanc */
  display: inline-block; /* Permet de définir une largeur et une hauteur */
  padding: 5px; /* Espace intérieur pour le contenu */
  position: relative; /* Permet de positionner le pseudo-élément */

}

li.product-flag.on-sale:before {
  content: "\2605"; /* Code de caractère Unicode pour l'étoile (★) */
  position: absolute; /* Position absolue par rapport à l'élément parent */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black; /* Fond noir de l'étoile */
  color: white; /* Couleur du texte de l'étoile (facultatif) */
  z-index: -1; /* Place l'étoile en dessous du texte */
  overflow: hidden; /* Masque le texte qui dépasse */
  text-align: center; /* Centre le texte de l'étoile */
  line-height: 1; /* Hauteur de ligne égale à la hauteur de l'étoile */
}

/* pour faire défiler la photo sur fiche produit */
#product .product-cover img { pointer-events: none }

img[src="/img/facebook.png"] {
  width: 24px;
  height: 24px;
  display: inline-block;
}

img[src="/img/tiktok.png"] {
  width: 24px;
  height: 24px;
  display: inline-block;
}

img[src="/img/instagramlive.png"] {
  width: 24px;
  height: 24px;
  display: inline-block;
}

img[src="/img/youtube.png"] {
  width: 24px;
  height: 24px;
  display: inline-block;
}

/* ============================================================
   DESIGN CATEGORIE : GROSSES IMAGES / COLONNES SERRÉES
   ============================================================ */

@media (min-width: 768px) {
    
    /* 1. RESSERRER LES COLONNES AU MAXIMUM (Gouttières de 4px) */
    body#category #products .products.row {
        display: flex !important;
        flex-wrap: wrap !important;
        margin-left: -2px !important;
        margin-right: -2px !important;
    }

    body#category .itemarticle {
        padding-left: 2px !important;  /* Espace ultra-fin entre les images */
        padding-right: 2px !important;
        margin-bottom: 15px !important; /* Espace réduit entre les lignes */
    }

    /* 2. MAXIMISER L'IMAGE */
    body#category .thumbnail-container {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        box-shadow: none !important;
    }

    body#category .product-thumbnail {
        display: block !important;
        width: 100% !important;
        aspect-ratio: 493 / 675 !important;
    }

    body#category .product-thumbnail img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important; /* Force le remplissage total sans marge blanche */
    }

    /* 3. APERÇU RAPIDE FLOTTANT SUR LA PHOTO */
    body#category .highlighted-informations {
        display: block !important;
        position: absolute !important;
        z-index: 10 !important;
        
        /* LA CORRECTION EST ICI : 85px de texte + 15px de photo = 100px */
        bottom: 100px !important; 
        
        left: 5% !important;
        width: 90% !important; /* Prend presque toute la largeur de l'image */
        background: rgba(255, 255, 255, 0.9) !important;
        padding: 8px 0 !important;
        text-align: center;
        opacity: 0;
        transition: 0.3s;
    }

    body#category .product-miniature:hover .highlighted-informations {
        opacity: 1; /* Apparaît au survol */
    }

    /* 4. DESCRIPTION FIXÉE STRICTEMENT À 85PX */
    body#category .product-description {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        height: 85px !important; /* LA HAUTEUR DEMANDÉE */
        padding: 8px 0 0 0 !important;
        text-align: left !important;
        background: #fff !important;
        overflow: hidden !important; /* Coupe net ce qui dépasse des 85px (pas de débordement) */
    }

    body#category .product-title {
        font-size: 14px !important;
        font-weight: 500 !important;
        text-transform: uppercase;
        margin-bottom: 3px !important;
        white-space: nowrap; /* Empêche le titre de passer sur 2 lignes */
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body#category .price {
        font-size: 15px !important;
        font-weight: bold !important;
        color: #000;
    }

    body#category .variant-links, 
    body#category .st_attr_list_container {
        display: block !important;
        margin-top: 3px !important;
    }
}

/* --- LARGEUR ET COLONNES --- */

/* Tablette : 3 colonnes pour garder de très grosses images */
@media (min-width: 768px) and (max-width: 991px) {
    body#category #wrapper .container { max-width: 100% !important; padding: 0 10px !important; }
    body#category .itemarticle { flex: 0 0 33.3333% !important; max-width: 33.3333% !important; }
}

/* Desktop : 4 colonnes avec limite à 1200px */
@media (min-width: 992px) {
    body#category #wrapper .container { 
        max-width: 1200px !important; 
        width: 100% !important;
        padding: 0 !important; /* Permet d'utiliser les 1200px à fond */
    }
    
    body#category .itemarticle { 
        flex: 0 0 25% !important; 
        max-width: 25% !important; 
    }
}