/**
 * Styles de correction mobile spécifique pour les packs
 * Cette feuille annule et remplace les styles problématiques
 */

/* RESET COMPLET POUR MOBILE */
@media (max-width: 767px) {
    /* Structure de la grille */
    .packs-container {
        padding: 15px 10px !important;
        overflow: visible !important;
    }
    
    .packs-grid {
        display: block !important;
        overflow: visible !important;
        flex-direction: initial !important;
        flex-wrap: initial !important;
        gap: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        height: auto !important;
    }
    
    /* Structure des cartes */
    .pack-card {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        margin: 0 0 30px 0 !important;
        flex: none !important;
        position: relative !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1) !important;
        border: 1px solid rgba(0,0,0,0.05) !important;
        border-radius: 10px !important;
    }
    
    /* Sections des cartes */
    .pack-header {
        padding: 20px 15px !important;
        position: relative !important;
        height: auto !important;
        display: block !important;
    }
    
    .pack-badge {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        margin: 0 auto 15px !important;
        display: block !important;
    }
    
    .pack-title, 
    .pack-subtitle {
        text-align: center !important;
        display: block !important;
        margin: 5px auto !important;
    }
    
    /* Prix */
    .pack-price {
        padding: 20px 15px !important;
        background-color: #f8f8f8 !important;
        text-align: center !important;
        margin: 0 !important;
        position: relative !important;
        display: block !important;
    }
    
    .original-price,
    .current-price,
    .price-save {
        display: block !important;
        margin: 5px auto !important;
        text-align: center !important;
    }
    
    /* Liste des fonctionnalités */
    .pack-features {
        padding: 20px 15px !important;
        margin: 0 !important;
        height: auto !important;
        max-height: none !important;
        display: block !important;
        overflow: visible !important;
        opacity: 1 !important;
        visibility: visible !important;
        background-color: white !important;
    }
    
    .pack-features ul {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 0 5px 0 !important;
        height: auto !important;
        max-height: none !important;
        display: block !important;
        overflow: visible !important;
    }
    
    .pack-features ul li {
        position: relative !important;
        padding: 12px 12px 12px 35px !important;
        margin-bottom: 8px !important;
        background-color: #f9f9f9 !important;
        border-radius: 6px !important;
        font-size: 14px !important;
        line-height: 1.4 !important;
        display: block !important;
        border: 1px solid rgba(0,0,0,0.05) !important;
    }
    
    .feature-included:before,
    .feature-excluded:before {
        position: absolute !important;
        top: 12px !important;
        left: 10px !important;
        width: 18px !important;
        height: 18px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 10px !important;
    }
    
    .feature-included:before {
        color: #1E3A8A !important;
        background: rgba(30, 58, 138, 0.1) !important;
    }
    
    .feature-excluded:before {
        color: #dc3545 !important;
        background: rgba(220, 53, 69, 0.1) !important;
    }
    
    /* Solution radicale pour les indicateurs de stock et le texte */
    /* 1. D'abord masquer TOUS les indicateurs de stock */
    .pack-card .stock-indicator {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
    }
    
    /* 2. Ne montrer QUE le dernier indicateur dans chaque carte */
    .pack-card .stock-indicator:last-of-type {
        display: block !important;
        visibility: visible !important;
        height: auto !important;
        overflow: visible !important;
        margin: 15px !important;
        padding: 12px 15px !important;
        text-align: center !important;
        border-radius: 6px !important;
        background-color: #f8f8f8 !important;
        border: 1px solid rgba(0,0,0,0.05) !important;
    }
    
    /* Indicateur de stock (n'afficher que le dernier) */
    .stock-indicator {
        margin: 0 15px 15px !important;
        padding: 12px !important;
        display: block !important;
        position: relative !important;
        background-color: #f9f9f9 !important;
        border-radius: 6px !important;
        text-align: center !important;
        visibility: visible !important;
        opacity: 1 !important;
        border: 1px solid rgba(0,0,0,0.05) !important;
    }
    
    .stock-progress {
        height: 8px !important;
        margin-bottom: 8px !important;
        border-radius: 4px !important;
        display: block !important;
    }
    
    .stock-text {
        margin: 0 !important;
        font-size: 13px !important;
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        color: #333 !important;
        line-height: 1.4 !important;
        font-weight: normal !important;
        padding: 0 !important;
        overflow: visible !important;
        white-space: normal !important;
        word-wrap: break-word !important;
    }
    
    /* Bouton d'action */
    .pack-action-button {
        display: block !important;
        width: auto !important;
        margin: 5px 15px 15px !important;
        padding: 15px !important;
        text-align: center !important;
        font-weight: bold !important;
        font-size: 15px !important;
        border-radius: 8px !important;
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        text-decoration: none !important;
        color: white !important;
        background: #1E3A8A !important;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
    }
    
    /* Badges et rubans */
    .ribbon {
        width: 150px !important;
        z-index: 10 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-weight: bold !important;
    }
    
    .best-seller {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 5 !important;
        background-color: #d4af37 !important;
        color: #000 !important;
    }
    
    .limited-offer-badge {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 5 !important;
        position: absolute !important;
        top: 15px !important;
        left: 15px !important;
        background-color: #dc3545 !important;
        color: white !important;
        font-size: 11px !important;
        padding: 5px 10px !important;
        border-radius: 4px !important;
        text-transform: uppercase !important;
        font-weight: bold !important;
    }
}