/* Explain: Styles for the member notification center, including the bell icon, panel, and dedicated page. */
/* ============================================================
   CENTRE DE NOTIFICATIONS DES MEMBRES
   ============================================================ */

.sa-notif { position: relative; display: flex; align-items: center; }

.sa-notif-bell {
    position: relative;
    display: none;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: rgba(10, 5, 22, 0.7);
    color: var(--text-color);
    cursor: pointer;
    transition: border-color .25s, color .25s, transform .25s, box-shadow .25s;
}
.sa-notif-bell.is-on { display: grid; }
.sa-notif-bell:hover {
    border-color: var(--gold-color);
    color: var(--gold-color);
    transform: translateY(-1px);
    box-shadow: var(--glow-gold);
}

.sa-notif-count {
    position: absolute;
    top: -6px;
    right: -6px;
    display: none;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: linear-gradient(135deg, #f3d99a, var(--gold-color) 45%, #b98a3a);
    color: #1a0e05;
    font-family: var(--font-body);
    font-size: .68rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 0 14px rgba(232, 196, 122, .55);
}
.sa-notif-count.is-on { display: grid; }

.sa-notif-panel {
    position: absolute;
    top: calc(100% + .75rem);
    right: 0;
    z-index: 70;
    display: none;
    width: min(92vw, 24rem);
    max-height: 70vh;
    overflow: hidden;
    flex-direction: column;
    border-radius: 18px;
    background: rgba(12, 6, 26, 0.97);
    border: 1px solid var(--border-color);
    box-shadow: 0 24px 60px rgba(6, 2, 15, 0.72);
    backdrop-filter: blur(14px);
}
.sa-notif-panel.is-open { display: flex; }

.sa-notif-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .9rem 1.1rem;
    border-bottom: 1px solid var(--border-color);
    font-family: var(--font-heading);
}
.sa-notif-panel-head a { color: var(--gold-color); font-size: .82rem; font-family: var(--font-body); }

.sa-notif-panel-list {
    overflow-y: auto;
    padding: .5rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.sa-notif-panel-foot { padding: .6rem .7rem; border-top: 1px solid var(--border-color); }
.sa-notif-panel-foot .sa-btn { width: 100%; }

.sa-notif-item {
    display: flex;
    gap: .8rem;
    align-items: flex-start;
    padding: .75rem .85rem;
    border-radius: 14px;
    border: 1px solid transparent;
    color: var(--text-color);
    transition: background .22s, border-color .22s, transform .22s;
}
.sa-notif-item:hover {
    background: rgba(139, 92, 246, 0.12);
    border-color: var(--border-color);
    transform: translateY(-1px);
}
.sa-notif-item.is-unread {
    background: rgba(232, 196, 122, 0.07);
    border-color: var(--border-gold);
}

.sa-notif-item-icon {
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    flex: 0 0 auto;
    border-radius: 12px;
    background: radial-gradient(circle at 35% 30%, rgba(139, 92, 246, .9), rgba(43, 11, 82, .9));
    color: var(--gold-color);
    font-size: .95rem;
}

.sa-notif-item-main { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.sa-notif-item-title { font-size: .92rem; font-weight: 600; }
.sa-notif-item-body { font-size: .82rem; color: var(--text-muted); line-height: 1.55; }
.sa-notif-item-date { font-size: .72rem; color: var(--gold-color); }

.sa-notif-empty { padding: 1.2rem .9rem; font-size: .88rem; color: var(--text-muted); text-align: center; }

/* --- Page du centre --- */
.sa-notif-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.2rem;
}
.sa-notif-filters { display: flex; flex-wrap: wrap; gap: .5rem; }

.sa-notif-filter {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 40px;
    padding: .45rem 1rem;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: .85rem;
    cursor: pointer;
    transition: border-color .25s, color .25s, background .25s, transform .25s;
}
.sa-notif-filter:hover { border-color: var(--gold-color); color: var(--gold-color); transform: translateY(-1px); }
.sa-notif-filter.is-active {
    background: linear-gradient(135deg, var(--primary-color), #4c1d95);
    border-color: transparent;
    color: #fff;
}

.sa-notif-tabcount {
    display: inline-grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--gold-color);
    color: #1a0e05;
    font-size: .68rem;
    font-weight: 700;
}
.sa-notif-filter.is-active .sa-notif-tabcount { background: #fff; color: #2b0b52; }

.sa-notif-countline { font-size: .85rem; color: var(--text-muted); margin-bottom: 1rem; }
.sa-notif-countline i { color: var(--gold-color); }

.sa-notif-list { display: flex; flex-direction: column; gap: .6rem; }

.sa-notif-empty-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .8rem;
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--text-muted);
}
.sa-notif-empty-card i { font-size: 2rem; color: var(--gold-color); }
.sa-notif-empty-card p { max-width: 46ch; }

@media (max-width: 560px) {
    .sa-notif-panel {
        position: fixed;
        top: auto;
        left: .75rem;
        right: .75rem;
        bottom: .75rem;
        width: auto;
        max-height: 60vh;
    }
    .sa-notif-toolbar { flex-direction: column; align-items: stretch; }
    .sa-notif-toolbar .sa-btn { width: 100%; }
}