/* ===== CSS Voyageurs - Responsive Pricing Cards ===== */

/* Mobile - 1 colonne centrée */
@media (max-width: 767px) {
    #pricing-grid {
        grid-template-columns: 1fr !important;
        max-width: 450px !important;
        gap: 12px !important;
    }
}

/* Tablet - 2 colonnes centrées */
@media (min-width: 768px) and (max-width: 1023px) {
    #pricing-grid {
        grid-template-columns: 1fr 1fr !important;
        max-width: 700px !important;
        gap: 16px !important;
    }
    
    .pricing-card-resident,
    .pricing-card-tenant {
        font-size: 12px;
    }
    
    .card-title {
        font-size: var(--font-size-2xl) !important;
    }
    
    .card-price {
        font-size: var(--font-size-3xl) !important;
    }
    
    .card-emoji {
        font-size: var(--font-size-3xl) !important;
    }
    
    .card-feature {
        font-size: var(--font-size-base) !important;
    }
    
    .card-button {
        font-size: var(--font-size-md) !important;
        padding: 10px 16px !important;
    }
    
    .card-padding {
        padding: 16px !important;
    }
}

/* Desktop standard - 3 colonnes centrées */
@media (min-width: 1024px) and (max-width: 1439px) {
    #pricing-grid {
        grid-template-columns: 1fr 1fr 1fr !important;
        max-width: 1000px !important;
        gap: 20px !important;
    }
    
    .pricing-card-resident,
    .pricing-card-tenant {
        font-size: 13px;
    }
    
    .card-title {
        font-size: var(--font-size-2xl) !important;
    }
    
    .card-price {
        font-size: var(--font-size-4xl) !important;
    }
    
    .card-emoji {
        font-size: var(--font-size-4xl) !important;
    }
    
    .card-feature {
        font-size: var(--font-size-lg) !important;
    }
    
    .card-button {
        font-size: var(--font-size-lg) !important;
        padding: 12px 20px !important;
    }
    
    .card-padding {
        padding: 20px !important;
    }
}

/* Large Desktop (1440px-1919px) - 3 colonnes plus larges */
@media (min-width: 1440px) and (max-width: 1919px) {
    #pricing-grid {
        grid-template-columns: 1fr 1fr 1fr !important;
        max-width: 1200px !important;
        gap: 24px !important;
    }
    
    .pricing-card-resident,
    .pricing-card-tenant {
        font-size: 14px;
    }
    
    .card-title {
        font-size: var(--font-size-3xl) !important;
    }
    
    .card-price {
        font-size: var(--font-size-5xl) !important;
    }
    
    .card-emoji {
        font-size: var(--font-size-5xl) !important;
    }
    
    .card-feature {
        font-size: var(--font-size-lg) !important;
    }
    
    .card-button {
        font-size: var(--font-size-xl) !important;
        padding: 14px 24px !important;
    }
    
    .card-padding {
        padding: 24px !important;
    }
}

/* Ultra Wide (1920px+) - 3 colonnes optimisées */
@media (min-width: 1920px) {
    #pricing-grid {
        grid-template-columns: 1fr 1fr 1fr !important;
        max-width: 1400px !important;
        gap: 32px !important;
    }
    
    .pricing-card-resident,
    .pricing-card-tenant {
        font-size: 15px;
    }
    
    .card-title {
        font-size: var(--font-size-4xl) !important;
    }
    
    .card-price {
        font-size: var(--font-size-6xl) !important;
    }
    
    .card-emoji {
        font-size: var(--font-size-6xl) !important;
    }
    
    .card-feature {
        font-size: var(--font-size-xl) !important;
    }
    
    .card-button {
        font-size: var(--font-size-2xl) !important;
        padding: 16px 28px !important;
    }
    
    .card-padding {
        padding: 28px !important;
    }
    
    .pricing-section-container {
        padding: 24px 3% !important;
        margin: 0 auto;
    }
}

/* Optimisation globale pour tenir sur un écran */
@media (min-width: 768px) {
    #pricing-section {
        padding: 12px 2% !important;
    }
    
    .pricing-card-resident,
    .pricing-card-tenant {
        min-height: auto !important;
    }
}

@media (min-width: 1024px) {
    #pricing-section {
        padding: 16px 2% !important;
    }
    
    #pricing-grid {
        margin-bottom: 16px !important;
    }
}

/* Forcer la compacité sur grand écran */
@media (min-height: 900px) {
    #pricing-section {
        padding: 20px 2% !important;
    }
    
    #pricing-grid {
        gap: 16px !important;
    }
    
    .card-padding {
        padding: 16px !important;
    }
}