/* Responsive Packs CSS - Pour une compatibilité complète avec smartphones et tablettes */

/* Styles de base pour les tablettes (768px à 1024px) */
@media (max-width: 1024px) {
    .packs-grid {
        flex-wrap: wrap;
        justify-content: center;
        gap: 30px;
        padding: 20px 10px;
        overflow-x: visible;
        /* Éviter le défilement horizontal */
    }

    .pack-card {
        flex: 0 0 calc(50% - 20px);
        max-width: calc(50% - 20px);
        margin-bottom: 30px;
        height: auto;
        min-height: 600px;
        /* Garantir une hauteur suffisante */
    }

    /* S'assurer que les listes sont complètement visibles */
    .pack-features ul {
        overflow: visible;
        max-height: none;
    }

    .packs-header h1 {
        font-size: 32px;
    }

    .pack-price .current-price {
        font-size: 34px;
    }

    /* Agrandir l'espace cliquable pour les boutons sur les tablettes */
    .pack-action-button {
        padding: 15px 20px;
    }
}

/* Styles pour les téléphones (moins de 768px) */
@media (max-width: 767px) {
    .packs-container {
        padding: 20px 0;
    }

    /* Modifier complètement la structure sur mobile */
    .packs-grid {
        flex-direction: column;
        gap: 30px;
        padding: 10px;
        overflow: visible;
        height: auto;
    }

    /* Réinitialiser complètement les cartes pour mobile */
    .pack-card {
        flex: none;
        width: 100%;
        max-width: 100%;
        margin: 0 0 30px 0;
        overflow: visible;
        height: auto !important;
        min-height: 0 !important;
        display: block;
        border: 1px solid rgba(0,0,0,0.1);
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        position: relative;
    }
    
    /* Styles uniformes pour toutes les cartes */
    .pack-starter, .pack-pro, .pack-master, .pack-vip {
        display: flex !important;
        flex-direction: column;
    }
    
    /* S'assurer que les badges sont visibles */
    .pack-badge {
        font-size: 24px;
        margin-bottom: 10px;
        display: block;
    }

    /* Header avec couleur de fond */
    .pack-header {
        padding: 20px 15px;
        height: auto;
        text-align: center;
    }

    /* Prix bien visible */
    .pack-price {
        padding: 20px 15px;
        background-color: #f9f9f9;
        text-align: center;
        margin: 0;
    }

    /* Afficher toutes les fonctionnalités sans aucune restriction */
    .pack-features {
        padding: 20px 15px;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        opacity: 1 !important;
        display: block !important;
        background-color: white;
    }

    /* Améliorer la visibilité des badges de promotion sur mobile */
    .ribbon {
        transform: rotate(45deg) translate(40px, -15px);
        width: 200px;
        font-size: 12px;
        padding: 5px 0;
    }

    /* Style commun pour les badges */
    .limited-offer-badge {
        font-size: 12px;
        padding: 4px 8px;
        top: 10px;
        left: 10px;
        position: absolute;
        z-index: 5;
        background-color: #ff3547;
        color: white;
        border-radius: 4px;
        font-weight: bold;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        display: block !important;
    }
    
    /* Style spécifique pour le badge PLUS VENDU (ancien BEST-SELLER) */
    .best-seller {
        position: absolute;
        width: 150px;
        top: 25px;
        left: -35px;
        transform: rotate(-45deg);
        background-color: #ffd166;
        color: #343a40;
        text-align: center;
        font-size: 14px;
        font-weight: bold;
        padding: 8px 0;
        z-index: 10;
        box-shadow: 0 2px 5px rgba(0,0,0,0.15);
        display: block !important;
        overflow: hidden;
    }
    
    /* Style spécifique pour que toutes les cartes aient un badge d'offre limitée */
    .pack-starter .limited-offer-badge,
    .pack-vip .limited-offer-badge {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Ajuster les titres et prix pour les mobiles */
    .pack-header {
        padding: 25px 15px 20px;
    }

    .pack-title {
        font-size: 20px;
    }

    .pack-subtitle {
        font-size: 14px;
    }

    .pack-price {
        padding: 15px;
    }

    .original-price {
        font-size: 16px;
    }

    .current-price {
        font-size: 30px;
    }

    .price-save {
        font-size: 14px;
    }

    /* Améliorer la lisibilité des features sur mobile */
    .pack-features {
        padding: 15px;
        margin-bottom: 10px;
        max-height: none !important;
        display: block !important;
    }

    .pack-features ul {
        max-height: none !important;
        overflow: visible !important;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .pack-features ul li {
        font-size: 14px;
        padding: 10px 10px 10px 35px;
        position: relative;
        display: block;
        margin-bottom: 8px;
        background-color: rgba(0, 0, 0, 0.02);
        border-radius: 6px;
    }

    /* Affichage plus clair des icônes de liste */
    .feature-included:before,
    .feature-excluded:before {
        top: 10px !important;
        left: 10px !important;
        width: 20px !important;
        height: 20px !important;
        font-size: 11px !important;
    }

    .feature-included:before,
    .feature-excluded:before {
        left: 0;
    }

    /* Rendre le bouton d'action plus visible et cliquable sur mobile */
    .pack-action-button {
        padding: 18px 15px;
        font-size: 16px;
        margin: 0;
        display: block !important;
        position: relative !important;
        bottom: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
        border-radius: 0;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
        text-align: center;
        font-weight: bold;
        width: 100%;
        box-shadow: none;
        z-index: 10 !important; /* Assurer que le bouton est au-dessus des autres éléments */
        pointer-events: auto !important; /* Garantir que les événements de clic fonctionnent */
        cursor: pointer !important;
        -webkit-tap-highlight-color: rgba(0,0,0,0.3); /* Feedback visuel sur appareils tactiles */
    }
    
    /* Ajouter un effet hover/active pour meilleur feedback */
    .pack-action-button:hover,
    .pack-action-button:active {
        background-color: #0056b3 !important;
        color: white !important;
        transform: translateY(-2px);
        transition: all 0.2s ease;
    }

    /* Améliorer l'indicateur de stock */
    .stock-indicator {
        margin: 10px 15px;
        padding: 10px;
        background-color: #f8f9fa;
        display: block !important;
        position: relative !important;
        text-align: center;
        border-radius: 6px;
        border: 1px solid rgba(0, 0, 0, 0.05);
    }

    /* Faire en sorte que la barre de progression soit visible */
    .stock-progress {
        height: 8px !important;
        border-radius: 4px !important;
        background-color: #dc3545 !important;
        margin-bottom: 8px !important;
    }

    /* Badge et informations importantes */
    .best-seller,
    .limited-offer-badge,
    .ribbon {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        z-index: 2 !important;
    }

    /* Corriger tous les bugs de position */
    .pack-badge {
        margin: 0 auto 10px;
        position: relative;
        top: auto;
        left: auto;
        transform: none;
    }

    .stock-text {
        font-size: 12px;
    }
}

/* Ajustements pour les très petits écrans (iPhone SE, etc.) */
@media (max-width: 375px) {
    .packs-header h1 {
        font-size: 24px;
    }

    .packs-description p {
        font-size: 14px;
    }

    .pack-title {
        font-size: 18px;
    }

    .pack-badge {
        font-size: 28px;
    }

    .current-price {
        font-size: 26px;
    }

    .pack-features ul li {
        font-size: 13px;
    }

    .pack-action-button {
        font-size: 13px;
    }
}

/* Optimisation pour l'orientation paysage sur mobiles */
@media (max-width: 900px) and (orientation: landscape) {
    .packs-grid {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .pack-card {
        flex: 0 0 calc(50% - 20px);
        max-width: calc(50% - 20px);
    }
}

/* Animation optimisée pour les appareils mobiles */
@media (prefers-reduced-motion) {
    .pack-badge {
        animation: none;
    }

    .pack-card:hover {
        transform: none;
    }

    .pack-action-button:hover {
        transform: none;
    }
}

/* Classes pour les interactions tactiles */
.pack-animate {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.pack-animate.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Sur mobile, les animations ne doivent pas cacher des éléments importants */
@media (max-width: 767px) {
    .pack-animate {
        opacity: 1;
        transform: translateY(0);
    }

    /* Désactiver tout comportement qui pourrait cacher des informations */
    .pack-card {
        /* Réinitialiser les propriétés pour éviter les problèmes de masquage */
        overflow: visible !important;
    }

    .pack-card * {
        /* S'assurer que le contenu ne soit pas tronqué */
        overflow: visible !important;
    }

    /* S'assurer que le bouton est toujours visible */
    .pack-action-button {
        bottom: auto !important;
        position: relative !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

.touch-active {
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
    transform: scale(0.98);
    transition: all 0.3s ease;
}

.button-touch-active {
    opacity: 0.8;
    transform: scale(0.97);
    transition: all 0.3s ease;
}

/* Fix pour l'overflow sur mobile qui peut causer des problèmes de défilement horizontal */
.container {
    overflow-x: hidden;
}

/* Améliorations pour la navigation tactile */
@media (max-width: 767px) {

    /* Meilleur espacement entre les éléments pour faciliter le tap */
    .pack-features ul li {
        padding: 12px 0 12px 30px;
        margin-bottom: 5px;
    }

    /* Augmenter la zone de toucher pour les boutons */
    .pack-action-button {
        padding: 16px;
        margin: 15px;
    }

    /* Espacement pour éviter les erreurs de tap */
    .pack-features ul {
        margin-bottom: 20px;
    }

    /* Fix pour le défilement sur iOS */
    .packs-grid {
        -webkit-overflow-scrolling: touch;
    }

    /* Assurer que tous les éléments importants sont visibles */
    .best-seller,
    .limited-offer-badge,
    .stock-indicator,
    .disclaimer {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Garantir que les cartes ont une hauteur minimum sur mobile */
    .pack-card {
        min-height: 500px;
        height: auto !important;
    }

    /* Augmenter l'espacement vertical pour améliorer la lisibilité */
    .pack-header,
    .pack-price,
    .pack-features,
    .stock-indicator {
        margin-bottom: 15px;
    }

    /* Améliorer le contraste des textes sur mobile */
    .pack-subtitle,
    .pack-title,
    .current-price {
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    }
}