/*
 * Centre de notifications (cloche) - Inkwell
 */

.notif-cloche {
    position:relative;
}

.notif-cloche__bouton {
    position:relative;
    width:40px;
    height:40px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--couleur-anthracite);
    font-size:1.05rem;
    transition:background-color 0.15s ease;
}

.notif-cloche__bouton:hover {
    background-color:rgba(38, 53, 60, 0.06);
}

.notif-cloche__badge {
    position:absolute;
    top:2px;
    right:2px;
    min-width:16px;
    height:16px;
    padding:0 4px;
    border-radius:999px;
    background-color:var(--couleur-corail);
    color:#FFFFFF;
    font-size:0.62rem;
    font-weight:800;
    display:none;
    align-items:center;
    justify-content:center;
    border:2px solid var(--couleur-beige);
}

.notif-cloche__badge--visible {
    display:flex;
}

.notif-cloche__panneau {
    display:none;
    position:absolute;
    top:calc(100% + 12px);
    right:-8px;
    width:360px;
    max-width:90vw;
    background-color:#FFFFFF;
    border-radius:var(--rayon-carte);
    box-shadow:var(--ombre-carte);
    z-index:70;
    overflow:hidden;
}

.notif-cloche--ouvert .notif-cloche__panneau {
    display:block;
    animation:notif-panneau-apparition 0.15s ease;
}

@keyframes notif-panneau-apparition {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.notif-panneau__entete {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:16px 18px;
    border-bottom:1px solid rgba(38, 53, 60, 0.08);
}

.notif-panneau__titre {
    font-size:0.95rem;
    font-weight:700;
    color:var(--couleur-anthracite);
}

.notif-panneau__tout-lu {
    font-size:0.76rem;
    font-weight:600;
    color:var(--couleur-corail);
}

.notif-panneau__tout-lu:hover {
    text-decoration:underline;
}

.notif-panneau__liste {
    max-height:380px;
    overflow-y:auto;
}

.notif-item {
    display:flex;
    gap:12px;
    padding:14px 18px;
    border-bottom:1px solid rgba(38, 53, 60, 0.06);
    transition:background-color 0.15s ease;
}

.notif-item:last-child {
    border-bottom:none;
}

.notif-item--non-lue {
    background-color:rgba(255, 103, 106, 0.04);
}

.notif-item__icone {
    width:34px;
    height:34px;
    border-radius:50%;
    background-color:var(--couleur-beige);
    color:var(--couleur-corail);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:0.85rem;
    flex-shrink:0;
}

.notif-item__contenu {
    flex:1;
    min-width:0;
}

.notif-item__titre {
    font-size:0.85rem;
    font-weight:700;
    color:var(--couleur-anthracite);
    margin-bottom:2px;
}

.notif-item__message {
    font-size:0.8rem;
    color:rgba(38, 53, 60, 0.6);
    line-height:1.4;
}

.notif-item__date {
    font-size:0.7rem;
    color:rgba(38, 53, 60, 0.4);
    margin-top:4px;
}

.notif-panneau__vide {
    padding:40px 20px;
    text-align:center;
    color:rgba(38, 53, 60, 0.45);
    font-size:0.85rem;
}

.notif-cloche--mobile {
    display: none;
}

.notif-cloche--mobile .notif-cloche__panneau {
    right: -60px;
    width: min(340px, calc(100vw - 32px));
}

@media (max-width: 768px) {
    .notif-cloche--mobile {
        display: flex;
        align-items: center;
        margin-left: 8px;
    }
}