/* ===== RESPONSIVE DESIGN ===== */
/* Media queries pour l'adaptation mobile */

@media (max-width: 768px) {
    /* Ajustements généraux */
    .hero-section {
        padding: 120px 0 80px;
    }
    
    .ranking-section,
    .all-sites-section,
    .tips-section {
        padding: 60px 0;
    }
    
    /* Panda illustration */
    .panda-head {
        width: 140px;
        height: 120px;
    }
    
    .panda-eye {
        width: 30px;
        height: 30px;
        top: 40px;
    }
    
    .panda-eye.left {
        left: 30px;
    }
    
    .panda-eye.right {
        right: 30px;
    }
    
    /* Masquer éléments sur mobile */
    .panda-character,
    .panda-counter,
    .panda-easter-egg,
    .fighting-panda {
        display: none;
    }
    
    /* Footer mobile */
    .footer-stats {
        flex-direction: column;
        gap: 10px;
    }
    
    .footer-legals {
        justify-content: center;
        text-align: center;
    }
    
    .footer-credits {
        text-align: center !important;
        margin-top: 10px;
    }
    
    .footer-social .social-icons {
        justify-content: center;
    }
    
    /* Ajustements typographie */
    .hero-section h1 {
        font-size: 2.5rem;
    }
    
    .section-title {
        margin-bottom: 40px;
    }
    
    /* Cards */
    .site-card,
    .ranking-card,
    .tip-card {
        margin-bottom: 20px;
    }
    
    /* Navigation */
    .navbar-collapse {
        background-color: rgba(44, 62, 80, 0.98);
        padding: 20px;
        border-radius: 10px;
        margin-top: 10px;
    }
}

@media (max-width: 576px) {
    /* Ajustements supplémentaires pour petits écrans */
    .container {
        padding: 0 10px;
    }
    
    .hero-section h1 {
        font-size: 2rem;
    }
    
    .btn-lg {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
    
    /* Search and filter */
    .search-filter-section {
        padding: 20px;
    }
    
    .filter-btn {
        margin-bottom: 8px;
        font-size: 0.8rem;
        padding: 6px 15px;
    }
    
    /* Modals */
    .modal-dialog {
        margin: 10px;
    }
}