/* ================================================================
   Sourdosphère — notifications.css
   ================================================================ */

/* ── Page notifications ───────────────────────────────────────── */
.notif-page { display: flex; flex-direction: column; gap: 1rem; max-width: 600px; }

.notif-page__header {
    display: flex; align-items: center; justify-content: space-between;
}
.notif-page__title { font-size: 1.2rem; font-weight: 700; margin: 0; }

/* ── Liste ────────────────────────────────────────────────────── */
.notif-list { display: flex; flex-direction: column; }

.notif-list__date-sep {
    font-size: 0.75rem; font-weight: 600; color: var(--gray-mid);
    text-transform: uppercase; letter-spacing: 0.5px;
    padding: 1rem 0 0.4rem;
}

.notif-item {
    display: flex; align-items: flex-start; gap: 0.85rem;
    padding: 0.9rem 1rem;
    background: var(--white); border: 1px solid var(--gray-border);
    border-radius: var(--radius-lg); margin-bottom: 0.5rem;
    text-decoration: none; color: var(--black);
    transition: box-shadow 0.12s, border-color 0.12s;
    position: relative;
}
.notif-item:hover { box-shadow: var(--shadow-sm); border-color: var(--green-border); text-decoration: none; }
.notif-item--unread { background: #f0fdf6; border-color: var(--green-border); }

/* Icône / Avatar */
.notif-item__icon-wrap { position: relative; flex-shrink: 0; }
.notif-item__avatar    { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; display: block; }
.notif-item__type-icon {
    position: absolute; bottom: -2px; right: -4px;
    font-size: 14px; line-height: 1;
    background: var(--white); border-radius: 50%; padding: 1px;
}
.notif-item__system-icon {
    width: 42px; height: 42px; border-radius: 50%;
    background: var(--green-light);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
}

/* Contenu */
.notif-item__content { flex: 1; min-width: 0; }
.notif-item__text    { font-size: 0.9rem; line-height: 1.5; color: var(--black); margin: 0 0 0.2rem; }
.notif-item__text strong { font-weight: 600; }
.notif-item__time    { font-size: 0.75rem; color: var(--gray-mid); }

/* Point non-lu */
.notif-item__dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--green-mid); flex-shrink: 0; margin-top: 6px;
}

/* ── Bannière push ────────────────────────────────────────────── */
#push-banner {
    position: fixed; bottom: calc(var(--mobile-nav-h) + 0.75rem); left: 0.75rem; right: 0.75rem;
    background: #1a3a2e; color: #fff; border-radius: var(--radius-lg);
    padding: 1rem; z-index: 300; box-shadow: 0 4px 20px rgba(0,0,0,0.25);
    transform: translateY(20px); opacity: 0; transition: transform 0.3s, opacity 0.3s;
    max-width: 480px;
}
#push-banner.push-banner--visible { transform: translateY(0); opacity: 1; }

.push-banner__content {
    display: flex; align-items: flex-start; gap: 0.65rem; margin-bottom: 0.85rem;
}
.push-banner__icon { font-size: 1.4rem; flex-shrink: 0; }
.push-banner__text { font-size: 0.875rem; color: rgba(255,255,255,0.9); line-height: 1.5; margin: 0; }

.push-banner__actions { display: flex; gap: 0.65rem; }
.push-banner__accept {
    flex: 1; padding: 0.55rem 1rem; border-radius: var(--radius-sm);
    background: #1D9E75; border: none; color: #fff;
    font-size: 0.875rem; font-weight: 600; cursor: pointer; font-family: var(--font);
    transition: background 0.15s;
}
.push-banner__accept:hover { background: #0F6E56; }
.push-banner__dismiss {
    padding: 0.55rem 0.85rem; border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.7); font-size: 0.875rem; cursor: pointer; font-family: var(--font);
}
.push-banner__dismiss:hover { background: rgba(255,255,255,0.15); color: #fff; }

@media (min-width: 769px) {
    #push-banner {
        bottom: 1.5rem; left: auto; right: 1.5rem;
        width: 360px;
    }
}