/* Wrapper et cloche */
.notif-bell-btn {
    position: relative; width: 42px; height: 42px; background: #ffffff;
    border: 1px solid #555555; border-radius: 50%; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: #555555; transition: background .3s, border-color .3s, color .3s, transform .3s;
}
.notif-bell-btn:hover { background: #e95895; border-color: #e95895; color: #ffffff; transform: scale(1.3); }
.notif-bell-btn.has-unread { background: #e95895; border-color: #e95895; color: #ffffff; }

.notif-badge {
    position: absolute; top: -4px; right: -4px; background: #e53935;
    color: #fff; font-size: 10px; font-weight: 700; border-radius: 10px;
    min-width: 18px; height: 18px; padding: 0 4px;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid #fff; pointer-events: none; transition: opacity .2s;
}
.notif-badge--hidden { opacity: 0; }

/* Panel */
.notif-panel__header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; background: #e8e8e8; border-top: 2px solid #e9e9e9; border-bottom: 2px solid #e9e9e9;
    border-radius: 0; transition: background .3s, border-color .3s;
}
.notif-panel__title { font-weight: 700; font-size: 14px; color: #333; }
.notif-panel__mark-all {
    font-size: 12px; color: #E95895; background: none;
    border: none; cursor: pointer; padding: 4px 8px; border-radius: 4px;
}
.notif-panel__mark-all:hover { background: #e9e9e9; }

.notif-list { max-height: 360px; overflow-y: auto; }

/* Items */
.notif-item {
    display: flex; flex-direction: column; gap: 8px;
    padding: 12px 16px; margin: 12px 8px; border-radius: 0px;
    border: 1px solid #f0f0f0; cursor: pointer;
    transition: background .15s; text-decoration: none; color: inherit;
}
.notif-item:hover { background: #f5f8ff; }
.notif-item__top { display: flex; gap: 10px; align-items: center; width: 100%; }
.notif-item__icon { font-size: 18px; flex-shrink: 0; margin-top: 2px; }
.notif-item__title { font-size: 13px; font-weight: 700; color: #222; line-height: 1.3; }
.notif-item__msg { font-size: 12px; color: #555; line-height: 1.4; width: 100%; box-sizing: border-box; word-wrap: break-word; overflow-wrap: break-word; padding-top: 6px; border-top: 1px solid rgba(0,0,0,.08); }
.notif-item__msg p { margin: 0 0 4px; font-size: 12px; color: #555; line-height: 1.4; }
.notif-item__msg p:last-child { margin-bottom: 0; }
.notif-item__msg strong { color: #333; }
.notif-item__msg a { color: #4a7cf5; }
.notif-item__time { font-size: 11px; color: #999; margin-top: 3px; }
.notif-item__expire { font-size: 11px; color: #e53935; margin-top: 2px; }

.notif-empty   { padding: 28px 16px; text-align: center; color: #aaa; font-size: 13px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.notif-loading { padding: 20px; text-align: center; color: #aaa; font-size: 13px; }

.notif-panel__footer {
    padding: 8px 16px; background: #e8e8e8;
    border-top: 2px solid #e9e9e9; border-bottom: 2px solid #e9e9e9; text-align: center;
    color: #1e1e1e; font-size: 12px; transition: background .3s, border-color .3s;
}

/* Couleurs vertes quand notifications */
.notif-has-unread .notif-panel__header { background: #f5fad0; border-bottom-color: #d4e800; }
.notif-has-unread .notif-panel__footer { background: #f5fad0; border-top-color: #d4e800; }

/* Animation */
@keyframes notifSlideIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes notifShake {
    0%  { transform: translateX(0); }
    10% { transform: translateX(-4px) rotate(-3deg); }
    20% { transform: translateX(4px) rotate(3deg); }
    30% { transform: translateX(-4px) rotate(-3deg); }
    40% { transform: translateX(4px) rotate(3deg); }
    50% { transform: translateX(-3px) rotate(-2deg); }
    60% { transform: translateX(3px) rotate(2deg); }
    70% { transform: translateX(-2px) rotate(-1deg); }
    80% { transform: translateX(2px) rotate(1deg); }
    90% { transform: translateX(-1px); }
    100% { transform: translateX(0); }
}
.notif-bell-btn.shake {
    animation: notifShake 0.6s ease;
}

/* Z-index pour intégration inline */
#notif-bell-btn { position: relative; z-index: 4; }
#notif-panel { z-index: 4 !important; margin-top: 20px !important; }