/* Variables de couleurs encapsulées */
#vapotank-home-v2 {
    --vp-yellow: #F1CD5A;
    --vp-black: #111111;
    --vp-white: #FFFFFF;
    --vp-gray: #f5f5f5;
    --vp-text: #333333;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    background-color: var(--vp-white);
}

/* --- BANNIÈRE --- */
#vapotank-home-v2 .vp-banner-section { width: 100%; margin-bottom: 20px; }
#vapotank-home-v2 .vp-banner-img { width: 100%; height: auto; display: block; object-fit: cover; max-height: 400px; }

/* --- RÉASSURANCE --- */
#vapotank-home-v2 .vp-reassurance-section { padding: 20px 10px; background-color: var(--vp-gray); margin-bottom: 40px; }
#vapotank-home-v2 .vp-reassurance-grid { display: flex; overflow-x: auto; gap: 15px; padding-bottom: 10px; scrollbar-width: none; }
#vapotank-home-v2 .vp-reassurance-grid::-webkit-scrollbar { display: none; }
#vapotank-home-v2 .vp-reassurance-item { flex: 0 0 65%; text-align: center; background: var(--vp-white); padding: 15px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
#vapotank-home-v2 .vp-reassurance-icon img { height: 45px; width: auto; margin-bottom: 10px; }
#vapotank-home-v2 .vp-reassurance-item h3 { font-size: 13px; color: var(--vp-black); font-weight: bold; margin: 0 0 8px 0; line-height: 1.3; }
#vapotank-home-v2 .vp-reassurance-item p { font-size: 12px; color: var(--vp-text); margin: 0; line-height: 1.4; }

/* --- SECTIONS GLOBALES --- */
#vapotank-home-v2 .vp-section { padding: 0 15px 50px 15px; max-width: 1200px; margin: 0 auto; box-sizing: border-box; }
#vapotank-home-v2 .vp-section-title { color: var(--vp-black); text-align: center; font-size: 24px; font-weight: bold; margin-bottom: 25px; text-transform: uppercase; position: relative; line-height: 1.2; }
#vapotank-home-v2 .vp-section-title::after { content: ''; display: block; width: 60px; height: 4px; background-color: var(--vp-yellow); margin: 10px auto 0; }

/* --- ONGLETS --- */
#vapotank-home-v2 .vp-tabs { display: flex; overflow-x: auto; gap: 10px; padding-bottom: 15px; margin-bottom: 20px; scrollbar-width: none; }
#vapotank-home-v2 .vp-tabs::-webkit-scrollbar { display: none; }
#vapotank-home-v2 .vp-tab { background-color: var(--vp-gray); color: var(--vp-text); border: 2px solid transparent; border-radius: 25px; padding: 8px 20px; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: all 0.3s ease; }
#vapotank-home-v2 .vp-tab:hover, #vapotank-home-v2 .vp-tab.active { background-color: var(--vp-black); color: var(--vp-yellow); border-color: var(--vp-black); }

/* --- GRILLES SOLIDES (Mobile First) --- */
#vapotank-home-v2 .vp-product-grid, 
#vapotank-home-v2 .vp-blog-grid { 
    display: grid;
    /* Sur mobile : 2 colonnes parfaitement égales */
    grid-template-columns: repeat(2, 1fr);
    gap: 15px; 
    min-height: 250px;
    width: 100%;
}

/* On s'assure que les éléments prennent toute la largeur de leur case */
#vapotank-home-v2 .vp-product-grid > *, 
#vapotank-home-v2 .vp-blog-grid > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important; /* Force le navigateur à respecter la grille */
    box-sizing: border-box;
}

#vapotank-home-v2 .vp-loader { 
    grid-column: 1 / -1; 
    text-align: center; 
    padding: 40px; 
    color: var(--vp-black); 
    font-weight: bold; 
}

/* --- ADAPTATION POUR PC --- */
@media (min-width: 768px) {
    #vapotank-home-v2 .vp-reassurance-grid { justify-content: center; flex-wrap: nowrap; max-width: 1200px; margin: 0 auto; }
    #vapotank-home-v2 .vp-reassurance-item { flex: 1; max-width: 20%; }
    #vapotank-home-v2 .vp-tabs { justify-content: center; flex-wrap: wrap; }
    
    #vapotank-home-v2 .vp-product-grid, 
    #vapotank-home-v2 .vp-blog-grid { 
        /* Aligne la boîte entière au milieu de la page */
        margin: 0 auto;
        /* Centre le contenu (les colonnes) à l'intérieur */
        justify-content: center; 
        grid-template-columns: repeat(auto-fit, minmax(220px, 280px)); 
        gap: 20px; 
    }
    
    #vapotank-home-v2 .vp-section-title { font-size: 32px; }
}

/* --- CORRECTION POUR LE BLOG --- */
#vapotank-home-v2 .vp-blog-item h3, 
#vapotank-home-v2 .vp-blog-item h3 a {
    color: #111111 !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
    text-transform: none !important;
    font-weight: bold !important;
    letter-spacing: normal !important;
}

/* --- CORRECTION GLOBALE DES TITRES (Blog + Tous les Produits WooCommerce) --- */

/* 1. Force la couleur, la taille et la police des titres */
#vapotank-home-v2 .vp-product-grid h2, 
#vapotank-home-v2 .vp-product-grid h3,
#vapotank-home-v2 .vp-product-grid .woocommerce-loop-product__title,
#vapotank-home-v2 .vp-product-grid .product-title {
    color: #111111 !important; /* Force le noir */
    font-size: 15px !important; /* Taille raisonnable */
    line-height: 1.4 !important;
    text-transform: none !important; /* Annule les majuscules forcées */
    font-weight: bold !important;
    letter-spacing: normal !important;
    text-align: center !important;
    margin: 10px 0 !important;
}

/* 2. Annule la couleur jaune sur les liens au survol à l'intérieur des cartes */
#vapotank-home-v2 .vp-product-grid a {
    color: inherit !important;
    text-decoration: none !important;
}

/* 3. Ajuste les prix (pour ne pas qu'ils soient énormes non plus) */
#vapotank-home-v2 .vp-product-grid .price {
    color: #333333 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-align: center !important;
    display: block !important;
}
#vapotank-home-v2 .vp-product-grid .price ins {
    text-decoration: none !important;
}

/* 4. Force l'alignement centré dans les cartes produits */
#vapotank-home-v2 .vp-product-grid .product {
    text-align: center !important;
    background: #ffffff !important;
    border: 1px solid #eeeeee !important;
    border-radius: 8px !important;
    padding: 15px !important;
    /* Transition douce pour l'effet au survol */
    transition: box-shadow 0.3s ease !important;
}

/* 5. Petit effet ombre au survol de la carte produit */
#vapotank-home-v2 .vp-product-grid .product:hover {
    box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
}

/* 6. Rend les images des produits carrées ou homogènes */
#vapotank-home-v2 .vp-product-grid img {
    margin: 0 auto 15px auto !important;
    display: block !important;
    max-height: 180px !important;
    width: auto !important;
    object-fit: contain !important;
}

/* --- CORRECTION DES ONGLETS SUR MOBILE --- */
#vapotank-home-v2 .vp-tabs {
    flex-wrap: wrap; /* Autorise le retour à la ligne */
    justify-content: center; /* Centre les boutons */
    overflow-x: visible; /* Désactive le défilement horizontal */
    padding-bottom: 5px; /* Réduit l'espace en bas car il n'y a plus de scroll */
}

/* On ajuste légèrement la marge des boutons pour qu'ils s'empilent joliment */
#vapotank-home-v2 .vp-tab {
    margin-bottom: 10px;
    /* Optionnel : réduire un peu la taille de police sur mobile pour en caser plus par ligne */
    font-size: 13px !important;
    padding: 6px 15px !important;
}

/* --- AGRANDIR LA BANNIÈRE SUR MOBILE --- */
@media (max-width: 767px) {
    #vapotank-home-v2 .vp-banner-img {
        min-height: 250px; /* Ajustez cette valeur (ex: 200px) selon le rendu souhaité */
        object-fit: cover; /* Permet à l'image de remplir l'espace sans se déformer */
        object-position: center; /* Centre l'image pour éviter de couper le logo */
    }
}

/* --- MASQUER LA RÉASSURANCE SUR MOBILE --- */
@media (max-width: 767px) {
    #vapotank-home-v2 .vp-reassurance-section {
        display: none !important; /* Cache complètement la section */
    }
}