
#notif-list {
    position: absolute;
    top: 70px;
    right: 20px;
    margin: 0;
    width: 25vw;
    max-width: unset;
    background: white;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    max-height: 80vh;
    overflow-y: auto;
    z-index: 1060;

    ul {
        li.active {
            a {
                font-weight: bold;
            }
            font-weight: bold;
        }
    }
}

@media screen and (max-width: 992px) {
    #notif-list {
        position: absolute;
        top: 20vh;
        left: 5vw;
        margin: 0;             /* ✅ centré avec marge verticale */
        width: 90vw;
        max-width: 600px;
        background: white;
        padding: 1.5rem;
        border-radius: 8px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        max-height: 80vh;             /* ✅ limite de hauteur */
        overflow-y: auto;             /* ✅ scroll interne si besoin */
        z-index: 1060;

        ul {
            li.active {
                a {
                    font-weight: bold;
                }
                font-weight: bold;
            }
        }
    }
}



.notifications {
    #dropdown_notifications {
        li.active {
            a {
                font-weight: bold;
            }
            font-weight: bold;
        }
    }

    @media screen and (max-width: 992px) {
        .notification-actions {
            flex-direction: column;
        }
    }
}

.notifications-page {
    li.active {
        a {
            font-weight: bold;
        }
        p {
            font-weight: bold;
        }
        font-weight: bold;
        border-color: var(--bs-card-border-color);
    }
}


