/* Retire les marges et le fond du bloc texte personnalisé sur la page d'accueil */
#custom-text {
    padding: 0 !important;
    margin: 0 !important;
}

#custom-text .card {
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    background: transparent !important;
}


/* --- PERSONNALISATION COULEUR THÈME : #8c6d3f (Bronze Profond) --- */

/* 1. Couleur des liens et textes importants */
a, 
.block-categories .category-sub-menu li a:hover,
.footer-container li a:hover,
#contact-link a:hover {
    color: #8c6d3f !important;
}

/* 2. Boutons principaux (Ajout au panier, etc.) */
.btn-primary,
.block_newsletter form input[type="submit"],
.section-title::after {
    background-color: #8c6d3f !important;
}

.btn-primary:hover,
.block_newsletter form input[type="submit"]:hover {
    background-color: #6b5331 !important; /* Survol plus sombre */
}

/* 3. Éléments de navigation et icônes */
.facet-label .custom-checkbox input[type="checkbox"]:checked + span .checkbox-checked,
#menu-icon,
.search-widget form i:hover {
    color: #8c6d3f !important;
}

/* 4. Barre de progression et éléments actifs */
.cart-grid-body .cart-line-product-actions .remove-from-cart,
.nav-tabs .nav-link.active,
.nav-tabs .nav-link:hover {
    color: #8c6d3f !important;
    border-bottom-color: #8c6d3f !important;
}

/* 5. Points d'accentuation (Pastilles, icônes panier) */
.tabs .nav-tabs .nav-link.active::after {
    background: #8c6d3f !important;
}

/* 6. Bordures focus (champs de saisie) */
input:focus, 
select:focus, 
textarea:focus,
.form-control:focus {
    outline: 2px solid #8c6d3f !important;
}

/* 7. Correction des étiquettes produits (Nouveau, Promo, etc.) */
.product-flags li.product-flag {
    background-color: #8c6d3f !important;
    color: #ffffff !important;
}

/* 8. Correction du panier lorsqu'il est actif */
#header .header-nav .cart-preview.active {
    background-color: #8c6d3f !important;
}

#header .header-nav .cart-preview.active a,
#header .header-nav .cart-preview.active i,
#header .header-nav .cart-preview.active .cart-products-count {
    color: #ffffff !important;
}

/* 9. Bordure du panier au survol */
.blockcart:hover {
    border-color: #8c6d3f !important;
}

/* 10. Prix des produits en noir pour la lisibilité */
.product-price {
    color: #000000 !important;
}
/* Ciblage ultra-précis pour surpasser le !important générique */
.checkout .text-sm-center a.btn.btn-primary {
    color: #ffffff !important;
    background-color: #8c6d3f !important; /* On s'assure qu'il garde votre nouvelle couleur bronze */
    border-color: #8c6d3f !important;
}

/* Optionnel : gestion de l'état au survol pour éviter que le texte ne change de couleur */
.checkout .text-sm-center a.btn.btn-primary:hover {
    color: #ffffff !important;
    background-color: #6b5331 !important;
    text-decoration: none;
}

/* --- STYLE MOBILE POUR LE BLOC À PROPOS --- */

@media (max-width: 767px) {
    /* 1. On force le tableau et ses composants à s'empiler verticalement */
    table, tbody, tr, td {
        display: block !important;
        width: 100% !important;
    }

    /* 2. On centre le texte et on ajuste les marges pour mobile */
    td {
        padding: 15px !important;
        text-align: center !important;
    }

    /* 3. On gère l'image pour qu'elle soit centrée et pas trop grande */
    td[style*="width: 180px"] {
        width: 100% !important;
        text-align: center !important;
        padding-top: 0 !important; /* On colle l'image au texte */
    }

    td[style*="width: 180px"] img {
        width: 150px !important; /* Taille réduite sur mobile */
        margin: 0 auto;
        display: inline-block;
    }

    /* 4. On ajuste le titre pour qu'il ne soit pas trop grand */
    h2, h1 {
        font-size: 14pt !important;
        display: block !important; /* Pour que la bordure prenne toute la largeur ou soit centrée */
        margin-bottom: 15px !important;
    }

    /* 5. Le bandeau de pied de page */
    td[colspan="2"] {
        border-radius: 0 !important;
        font-size: 0.75em !important;
        line-height: 1.4;
    }
    
    td[colspan="2"] span {
        display: none; /* On cache la barre de séparation "|" sur mobile pour gagner de la place */
    }
    
    td[colspan="2"] em {
        display: block;
        margin-top: 5px;
    }
}
.product-thumbnail {
  position: relative;
  overflow: hidden;
  display: block;
}

.secondary-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 2;
}

.product-thumbnail:hover .secondary-image {
  opacity: 1;
}