/* ==========================================================================
   1. SECTION SOUS-CATÉGORIES (VOTRE CODE D'ORIGINE - NON MODIFIÉ)
   ========================================================================== */

/* Masquer les images des sous-catégories */
#subcategories .subcategory-image {
    display: none !important;
}

/* Transformer les liens en boutons propres */
#subcategories ul li {
    background-color: #f8f9fa; /* Gris clair */
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px 10px;
    margin-bottom: 15px;
    text-align: center;
    list-style: none;
    transition: all 0.2s ease-in-out;
}

/* Style du texte */
#subcategories .subcategory-name {
    font-weight: bold;
    color: #333;
    text-transform: uppercase;
    font-size: 0.9rem;
    display: block;
}

/* Effet au survol (couleur de votre logo) */
#subcategories ul li:hover {
    background-color: #2fb5d2; /* Votre bleu */
    border-color: #2fb5d2;
    cursor: pointer;
}

#subcategories ul li:hover .subcategory-name {
    color: #ffffff !important;
}


/* ==========================================================================
   2. DESIGN DU SLIDER (Version Finale Corrigée)
   ========================================================================== */

/* Conteneur principal */
#carousel {
    width: 100% !important;
    max-width: 1158px;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 20px;
    border-radius: 15px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    display: block;
    padding: 0 !important; /* Sécurité anti-décalage */
}

/* --- CORRECTIFS CRITIQUES (Bug Mobile) --- */

/* 1. Supprime le décalage de la liste (souvent 40px à gauche) */
#carousel ul.carousel-inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

/* 2. Supprime les marges de la balise <figure> (Le vrai coupable identifié sur vos captures) */
#carousel .carousel-item figure {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    display: block !important;
}

/* 3. Force l'élément item à prendre toute la largeur */
#carousel li.carousel-item {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: left; /* Aide à la compatibilité */
}

/* 4. L'image elle-même : forcée à 100% */
#carousel .carousel-item img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    min-width: 100%;
}

/* --- ESTHÉTIQUE (Ombres et flèches) --- */

/* L'ombre 'Overlay' homogène par-dessus le slider */
#carousel::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.1);
    pointer-events: none;
    z-index: 2;
}

/* S'assure que les flèches de navigation restent AU-DESSUS de l'ombre */
#carousel .direction .carousel-control {
    z-index: 10;
}
/* ==========================================================================
   3. PATCH MOBILE (Correction du décalage à gauche)
   ========================================================================== */

@media only screen and (max-width: 767px) {
    /* Force le conteneur et la liste à 0 padding/marge latérale */
    #carousel,
    #carousel ul.carousel-inner {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        left: 0 !important; /* Sécurité si un positionnement relative est actif */
        width: 100% !important;
        max-width: 100vw !important; /* Empêche de dépasser la largeur écran */
    }

    /* S'assure que les puces (li) collent bien au bord gauche */
    #carousel li.carousel-item {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
    }
    
    /* Si ton thème ajoute un padding au 'row' parent, ceci peut aider */
    #carousel .carousel-item figure {
        margin: 0 !important;
        width: 100% !important;
    }
}
/* ==========================================================================
   4. COULEURS DYNAMIQUES DES MARQUES (Nécessite le custom.js)
   ========================================================================== */

/* --- 1. DÉFINITION DES COULEURS (Selon les IDs de ton Back-Office) --- */
:root { --brand-color: #2fb5d2; /* Couleur par défaut (Tractoshop) */ }

body.shop-2  { --brand-color: #d81e05; } /* Case IH (Rouge) */
body.shop-3  { --brand-color: #7a9e34; } /* Claas | Renault (Vert Clair) */
body.shop-4  { --brand-color: #b22222; } /* David Brown (Rouge sombre) */
body.shop-5  { --brand-color: #6fa237; } /* Deutz Fahr (Vert Pomme) */
body.shop-6  { --brand-color: #335e40; } /* Fendt (Vert Forêt) */
body.shop-7  { --brand-color: #880808; } /* Fiat (Terracotta/Brique) */
body.shop-8  { --brand-color: #003087; } /* Ford | New Holland (Bleu Roi) */
body.shop-9  { --brand-color: #367c2b; } /* John Deere (Vert) */
body.shop-10 { --brand-color: #c1121c; } /* Massey Ferguson (Rouge Vif) */
body.shop-11 { --brand-color: #e5002b; } /* Valtra | Valmet (Rouge) */


/* --- 2. APPLICATION AU MENU DE GAUCHE --- */

/* Style de base des liens (gris clair, propre) */
#left-column .links a, 
#left-column .custom-links a {
    display: block;
    background-color: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 12px 15px;
    margin-bottom: 8px;
    color: #414141;
    text-decoration: none;
    font-weight: 600;
    position: relative;
    border-left: 4px solid transparent; /* Petite barre latérale inactive */
    transition: all 0.3s ease;
}

/* Au survol : Le fond prend la couleur de la marque + texte blanc */
#left-column .links a:hover,
#left-column .custom-links a:hover {
    background-color: var(--brand-color) !important;
    border-color: var(--brand-color) !important;
    color: #ffffff !important;
    padding-left: 20px; /* Petit effet de glissement */
}

/* La petite barre latérale prend la couleur de la marque (même sans survol) */
#left-column .links a,
#left-column .custom-links a {
    border-left-color: var(--brand-color);
}


/* --- 3. APPLICATION AUX BOUTONS ET PRIX --- */

/* Bouton "Rechercher" et boutons principaux */
button.search-button, 
.btn-primary,
.btn-primary:hover {
    background-color: var(--brand-color) !important;
    border-color: var(--brand-color) !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Le prix des produits prend la couleur de la marque */
.product-price-and-shipping .price {
    color: var(--brand-color) !important;
}
/* ==========================================================================
   5. CORRECTIF SOUS-CATÉGORIES (Pour utiliser la couleur dynamique)
   ========================================================================== */

#subcategories ul li:hover {
    background-color: var(--brand-color) !important;
    border-color: var(--brand-color) !important;
}
/* ==========================================================================
   6. FINITIONS PAGE PRODUIT (Version Renforcée)
   ========================================================================== */

/* 1. Le Prix Principal */
.product-prices .current-price span,
.current-price span {
    color: var(--brand-color) !important;
}

/* 2. Le Bouton "Ajouter au panier" (Ciblage multiple pour être sûr) */
.product-add-to-cart .add-to-cart,
button.add-to-cart, 
body#product .btn-primary.add-to-cart {
    background-color: var(--brand-color) !important;
    border-color: var(--brand-color) !important;
    opacity: 1;
}

/* Effet survol du bouton panier */
.product-add-to-cart .add-to-cart:hover,
button.add-to-cart:hover {
    background-color: var(--brand-color) !important;
    filter: brightness(85%); /* Assombrit légèrement */
}

/* 3. Les Onglets (Description / Détails) */
.tabs .nav-tabs .nav-link.active,
.product-tabs .nav-tabs .nav-link.active {
    color: var(--brand-color) !important;
    border-bottom: 3px solid var(--brand-color) !important;
}

/* 4. Fil d'Ariane et Liens divers au survol */
.breadcrumb ol li a:hover,
#wrapper .breadcrumb li a:hover,
a:hover {
    color: var(--brand-color) !important;
}

/* 5. Titres H1 et H2 sur la fiche produit (Optionnel, pour harmoniser) */
.page-product h1, .page-product h2 {
    color: var(--brand-color) !important; */ /* Décommente cette ligne si tu veux les titres en couleur */
}
/* ==========================================================================
   7. NOUVEAU BLOC "HUB MARQUES" (VERSION ÉTANCHE & SÉCURISÉE)
   ========================================================================== */

/* 1. CONTENEUR GLOBAL (Isolation) */
.hub-container {
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    color: #333;
    padding: 20px 10px;
    /* On remet à zéro les styles hérités potentiels */
    line-height: normal;
    box-sizing: border-box;
}

/* 2. TYPOGRAPHIE (Ciblée uniquement dans le hub) */
.hub-container .hub-title {
    font-size: 24px;
    text-transform: uppercase;
    font-weight: 800;
    color: #E74C3C;
    margin-bottom: 10px;
    border-bottom: 3px solid #E74C3C;
    display: inline-block;
    padding-bottom: 5px;
    line-height: 1.2;
}

.hub-container .hub-subtitle {
    font-size: 16px;
    font-weight: 700;
    margin: 15px 0;
    color: #2c3e50;
}

.hub-container .hub-intro {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 30px;
    color: #555;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

/* 3. ARGUMENTS (Stock, Qualité...) */
.hub-container .hub-features {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-bottom: 40px;
    background: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
}

.hub-container .hub-feature-item {
    flex: 1 1 300px;
    text-align: left;
    padding: 10px;
}

.hub-container .hub-feature-strong {
    color: #E74C3C;
    display: block;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 5px;
}

/* 4. BOUTONS MARQUES (Blindage des liens) */
.hub-container .hub-brands-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}

/* Style de base du bouton (et lien visité/actif) */
.hub-container a.hub-brand-btn,
.hub-container a.hub-brand-btn:visited,
.hub-container a.hub-brand-btn:active,
.hub-container a.hub-brand-btn:focus {
    width: 280px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    font-weight: 700;
    font-size: 18px;
    border-radius: 6px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    margin: 5px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
    /* Force la couleur du texte à ne pas changer */
    color: white !important; 
}

/* Exception pour CLAAS (texte foncé) */
.hub-container a.hub-brand-btn.btn-claas,
.hub-container a.hub-brand-btn.btn-claas:visited {
    color: #222 !important;
}

/* Animation au survol (Rollover) */
.hub-container a.hub-brand-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 25px rgba(0,0,0,0.25);
    filter: brightness(1.1);
    /* On force à nouveau la couleur pour contrer votre règle globale "a:hover" */
    color: white !important; 
    cursor: pointer;
}
.hub-container a.hub-brand-btn.btn-claas:hover {
    color: #222 !important;
}

/* 5. COULEURS (Appliquées uniquement dans le conteneur) */
.hub-container .btn-case   { background: linear-gradient(135deg, #D70014 0%, #b3000f 100%); }
.hub-container .btn-claas  { background: linear-gradient(135deg, #84B917 0%, #6e9b12 100%); }
.hub-container .btn-brown  { background: linear-gradient(135deg, #581717 0%, #3a0f0f 100%); }
.hub-container .btn-deutz  { background: linear-gradient(135deg, #7AB41D 0%, #629117 100%); }
.hub-container .btn-fendt  { background: linear-gradient(135deg, #2B5837 0%, #1e3d26 100%); }
.hub-container .btn-fiat   { background: linear-gradient(135deg, #8E3821 0%, #6b2a18 100%); }
.hub-container .btn-ford   { background: linear-gradient(135deg, #004085 0%, #002a58 100%); }
.hub-container .btn-jd     { background: linear-gradient(135deg, #367C2B 0%, #26571e 100%); border-bottom: 4px solid #F8E218; }
.hub-container .btn-massey { background: linear-gradient(135deg, #C20016 0%, #9e0012 100%); }
.hub-container .btn-valtra { background: linear-gradient(135deg, #333333 0%, #1a1a1a 100%); border-left: 5px solid #C20016; }

/* 6. MOBILE */
@media (max-width: 768px) {
    .hub-container a.hub-brand-btn { width: 100%; max-width: 350px; }
}