/* =============== RESPONSIVE DESIGN =============== */

/* Mobiles et Tablettes (< 768px) */
@media (max-width: 768px) {
    .main-layout {
        /* On enlève la colonne de gauche */
        grid-template-columns: 1fr;
    }

    .sidebar {
        /* On cache la sidebar ou on la transforme en menu escamotable */
        display: none; 
    }

    .navbar {
        height: auto;
        padding: 10px;
    }

    .nav-links {
        flex-direction: column;
        gap: 10px;
    }

    .search-wrapper {
        width: 100%;
        margin: 5px 0;
        order: 3; /* Recherche en dernier sur mobile */
    }

    .auth-buttons {
        width: 100%;
        justify-content: center;
        order: 2;
    }
}

/* Très petits mobiles */
@media (max-width: 480px) {
    .auth-buttons button {
        flex: 1;
        font-size: 11px;
    }
}