/* Responsive optimizations for pricing page */

/* Tablettes (768px et moins) */
@media (max-width: 768px) {
    .pricing-container h1 {
        font-size: 2rem;
    }
    
    .pricing-subtitle {
        font-size: 1rem;
    }
    
    .pricing-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    
    .pricing-card {
        margin: 0 auto;
        max-width: 400px;
    }
    
    /* Badges responsive */
    .pricing-card div[style*="position: absolute"] {
        font-size: 0.7rem !important;
        padding: 4px 10px !important;
    }
    
    /* Section preuves sociales */
    .pricing-container div[style*="display: flex"][style*="gap: 40px"] {
        flex-direction: column !important;
        gap: 20px !important;
    }
    
    /* Témoignages */
    .pricing-container div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
    
    /* Toggle billing */
    .billing-toggle {
        flex-direction: row;
        gap: 15px;
    }
    
    .billing-option {
        font-size: 0.9rem;
    }
    
    /* Tableau comparaison */
    .comparison-table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .comparison-table table {
        min-width: 600px;
    }
}

/* Mobiles (480px et moins) */
@media (max-width: 480px) {
    .pricing-container h1 {
        font-size: 1.6rem;
        line-height: 1.3;
    }
    
    .pricing-card {
        padding: 20px;
    }
    
    .price .amount {
        font-size: 2.5rem;
    }
    
    .features-list {
        font-size: 0.9rem;
    }
    
    .pricing-btn {
        padding: 12px 20px;
        font-size: 0.95rem;
    }
    
    /* Section preuves sociales */
    .pricing-container div[style*="padding: 30px"] {
        padding: 20px !important;
    }
    
    /* Témoignages avatars */
    .pricing-container div[style*="width: 50px; height: 50px"] {
        width: 40px !important;
        height: 40px !important;
        font-size: 1rem !important;
    }
}

/* Micro-interactions tactiles */
@media (hover: none) and (pointer: coarse) {
    .pricing-btn {
        -webkit-tap-highlight-color: rgba(102, 126, 234, 0.3);
        touch-action: manipulation;
    }
    
    .pricing-card {
        transition: transform 0.2s ease;
    }
    
    .pricing-card:active {
        transform: scale(0.98);
    }
    
    /* Zones tactiles minimales (44x44px) */
    .billing-toggle input,
    .billing-toggle label {
        min-width: 44px;
        min-height: 44px;
    }
}

/* Optimisations performance mobile */
@media (max-width: 768px) {
    /* Lazy load des animations */
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    /* Désactiver les effets de hover sur mobile */
    .pricing-card:hover {
        transform: none;
        box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    }
}

/* Accessibilité touch */
a, button, input, select, textarea {
    -webkit-tap-highlight-color: rgba(102, 126, 234, 0.2);
}

/* Fix iOS zoom sur input */
input, select, textarea {
    font-size: 16px !important;
}