/* Variables pour un ajustement facile */
:root {
    --navbar-height: 70px; /* Votre hauteur de navbar */
    --sidebar-width: 250px;
}

/* 1. Styles de base pour le body (décalage sous la navbar) */
body {
    padding-top: var(--navbar-height) !important;
}

/* 2. Styles pour la sidebar sur desktop (positionnement fixe) */
@media (min-width: 768px) {
    .offcanvas-md {
        position: fixed !important;
        top: var(--navbar-height); /* Commence sous la navbar principale */
        left: 0;
        height: calc(100vh - var(--navbar-height)); /* Prend la hauteur restante */
        width: var(--sidebar-width) !important;
        transform: none !important;
        visibility: visible !important;
        z-index: 1020; 
        border-right: 1px solid rgba(0, 0, 0, .05);
        /* RETIRER toute transparence ici sur desktop si le fond doit être uni */
        background-color: var(--bs-light) !important; 
    }
}

/* 🔑 CORRECTION CLÉ POUR LA TRANSPARENCE MOBILE (< 768px) */
@media (max-width: 767.98px) {
    /* * Rendre la sidebar semi-transparente sur mobile (Offcanvas)
     * Utiliser une couleur claire avec une opacité de 85% à 95% pour garder le texte lisible.
     */
    #sidebarOffcanvas {
        background-color: rgba(248, 249, 250, 0.95) !important; /* bg-light (gris clair) avec 95% d'opacité */
    }
}

/* Décalage du contenu principal pour laisser la place à la sidebar sur desktop */
.main-content-wrapper {
    margin-left: 0;
}
@media (min-width: 768px) {
    .main-content-wrapper {
        margin-left: var(--sidebar-width);
    }
}