/* --- BASE MOBILE (Votre code actuel) --- */
.container {
    width: 100%;
    padding: 15px;
    margin: 0 auto;
}

.nav-menu {
    display: flex;
    flex-direction: column; /* Menu vertical sur mobile */
    gap: 10px;
}

.content {
    display: block;
}

.sidebar {
    display: none; /* Cachée sur mobile pour gagner de la place */
}

/* --- TABLETTES ET ORDINATEURS (Breakpoint : 768px) --- */
@media (min-width: 768px) {
    .container {
        max-width: 1100px; /* On limite la largeur pour ne pas être trop étiré */
        display: grid;
        grid-template-columns: 250px 1fr; /* On crée deux colonnes */
        gap: 20px;
    }

    .nav-menu {
        flex-direction: row; /* Le menu devient horizontal */
        justify-content: center;
        grid-column: 1 / span 2; /* Le menu prend toute la largeur en haut */
    }

    .sidebar {
        display: block; /* La sidebar réapparaît sur grand écran */
        background-color: rgba(167, 193, 168, 0.2); /* Rappel de votre couleur Sauge */
        padding: 15px;
        border-radius: 8px;
    }

    .content {
        /* Le contenu principal prend la colonne de droite */
    }
}