/**
 * ATYPIKIA - Correction affichage mobile pour les cards principales
 * Passe les 3 cards principales en 1 colonne sur mobile comme les autres
 */

/* Correction de l'affichage mobile pour les cards principales */
@media (max-width: 768px) {
    /* Cards principales en 1 colonne sur mobile */
    .tests-grid-modern {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
        padding: 0 1rem !important;
        max-width: 600px !important;
        margin: 0 auto !important;
    }
    
    /* Améliorer l'espacement des cards */
    .test-card-content {
        padding: 2rem !important;
    }
    
    /* Header des cards mieux organisé */
    .test-header-modern {
        display: grid !important;
        grid-template-columns: auto 1fr auto !important;
        gap: 1rem !important;
        align-items: flex-start !important;
    }
    
    /* Repositionner le badge popularité */
    .test-popularity {
        grid-column: auto !important;
        margin-top: 0 !important;
    }
    
    /* Garder le titre lisible */
    .test-title-modern {
        font-size: 1.5rem !important;
    }
    
    /* Garder la description visible (contrairement au style précédent) */
    .test-description-modern {
        display: block !important;
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
        margin: 1rem 0 !important;
    }
    
    /* Améliorer les pills de features */
    .test-features-modern {
        gap: 0.75rem !important;
        flex-wrap: wrap !important;
        margin: 1.5rem 0 !important;
    }
    
    .feature-pill {
        font-size: 0.8rem !important;
        padding: 0.4rem 0.8rem !important;
    }
    
    /* Boutons mieux espacés */
    .test-buttons-modern {
        gap: 1rem !important;
        flex-direction: row !important;
        margin-top: 1.5rem !important;
    }
    
    .btn-modern {
        font-size: 0.9rem !important;
        padding: 0.875rem 1.25rem !important;
        flex: 1 !important;
    }
}

/* Très petits écrans - encore plus compact */
@media (max-width: 480px) {
    .tests-grid-modern {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
        padding: 0 0.75rem !important;
    }
    
    .test-card-content {
        padding: 1.5rem !important;
    }
    
    .test-icon-modern {
        width: 60px !important;
        height: 60px !important;
        font-size: 24px !important;
    }
    
    /* Boutons en colonne sur très petit écran */
    .test-buttons-modern {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }
    
    .btn-modern {
        width: 100% !important;
        font-size: 0.875rem !important;
        padding: 0.75rem 1rem !important;
    }
    
    .test-title-modern {
        font-size: 1.25rem !important;
    }
    
    .test-description-modern {
        font-size: 0.9rem !important;
    }
}

/* S'assurer que les "autres tests" restent parfaites comme elles sont */
@media (max-width: 768px) {
    .autres-tests-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
        gap: 1rem !important;
    }
}

@media (max-width: 480px) {
    .autres-tests-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
}

/* Forcer l'affichage stats en 3 lignes de 2 sur mobile - OVERRIDE COMPLET */
@media (max-width: 768px) {
    .stats-grid-modern {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        grid-template-rows: repeat(3, 1fr) !important;
        gap: 1.5rem !important;
        padding: 0 1rem !important;
        max-width: 600px !important;
        margin: 0 auto !important;
    }
    
    /* Réinitialiser les positions forcées du CSS principal */
    .stats-grid-modern .stat-card-modern:nth-child(1) { 
        grid-column: 1 !important; 
        grid-row: 1 !important; 
    }
    .stats-grid-modern .stat-card-modern:nth-child(2) { 
        grid-column: 2 !important; 
        grid-row: 1 !important; 
    }
    .stats-grid-modern .stat-card-modern:nth-child(3) { 
        grid-column: 1 !important; 
        grid-row: 2 !important; 
    }
    .stats-grid-modern .stat-card-modern:nth-child(4) { 
        grid-column: 2 !important; 
        grid-row: 2 !important; 
    }
    .stats-grid-modern .stat-card-modern:nth-child(5) { 
        grid-column: 1 !important; 
        grid-row: 3 !important; 
    }
    .stats-grid-modern .stat-card-modern:nth-child(6) { 
        grid-column: 2 !important; 
        grid-row: 3 !important; 
    }
    
    .stat-card-modern {
        padding: 1.5rem !important;
    }
    
    .stat-icon {
        width: 56px !important;
        height: 56px !important;
        font-size: 20px !important;
        margin-bottom: 1rem !important;
    }
    
    .stat-number-modern {
        font-size: 2rem !important;
    }
    
    .stat-label-modern {
        font-size: 0.9rem !important;
    }
}

@media (max-width: 480px) {
    .stats-grid-modern {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        grid-template-rows: repeat(3, 1fr) !important;
        gap: 1rem !important;
        padding: 0 0.75rem !important;
    }
    
    /* Réinitialiser les positions forcées pour très petits écrans aussi */
    .stats-grid-modern .stat-card-modern:nth-child(1) { 
        grid-column: 1 !important; 
        grid-row: 1 !important; 
    }
    .stats-grid-modern .stat-card-modern:nth-child(2) { 
        grid-column: 2 !important; 
        grid-row: 1 !important; 
    }
    .stats-grid-modern .stat-card-modern:nth-child(3) { 
        grid-column: 1 !important; 
        grid-row: 2 !important; 
    }
    .stats-grid-modern .stat-card-modern:nth-child(4) { 
        grid-column: 2 !important; 
        grid-row: 2 !important; 
    }
    .stats-grid-modern .stat-card-modern:nth-child(5) { 
        grid-column: 1 !important; 
        grid-row: 3 !important; 
    }
    .stats-grid-modern .stat-card-modern:nth-child(6) { 
        grid-column: 2 !important; 
        grid-row: 3 !important; 
    }
    
    .stat-card-modern {
        padding: 1rem !important;
    }
    
    .stat-number-modern {
        font-size: 1.5rem !important;
    }
    
    .stat-label-modern {
        font-size: 0.8rem !important;
    }
}