/* static/css/app-nav.css
   Persistent site-wide header, included from base.html for every logged-in
   page. Additive: does not modify style.css or any --ev-* token from the
   Événements pages — self-contained variables scoped to .bp-app-nav. */

.bp-app-nav {
    --nav-bg: #12131c;
    --nav-line-a: #96771c;
    --nav-line-b: #e9c46a;
    --nav-name: #ffffff;
    --nav-sub: #7d818f;
    --nav-user: #e7e8ee;
    --nav-gold: #e9c46a;
    position: sticky;
    top: 0;
    z-index: 200;
    background: var(--nav-bg);
    padding: 13px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
}
.bp-app-nav::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0; height: 2px;
    background: linear-gradient(90deg, var(--nav-line-a), var(--nav-line-b), var(--nav-line-a));
}
.bp-app-nav-brand {
    display: flex; align-items: center; gap: 11px; text-decoration: none;
}
.bp-app-nav-mark {
    width: 32px; height: 32px; border-radius: 9px; flex: 0 0 auto;
    background: linear-gradient(155deg, #1c1d29, #0d0e14);
    border: 1px solid #34364a;
    display: flex; align-items: center; justify-content: center;
}
.bp-app-nav-mark svg { width: 17px; height: 17px; color: var(--nav-gold); }
.bp-app-nav-name {
    font-weight: 800; font-size: 14.5px; letter-spacing: .01em; color: var(--nav-name);
    line-height: 1.2; display: block;
}
.bp-app-nav-sub {
    font-size: 9.5px; letter-spacing: .12em; color: var(--nav-sub); text-transform: uppercase; display: block;
}
.bp-app-nav-spacer { flex: 1; }
.bp-app-nav-user { display: flex; align-items: center; gap: 9px; }
.bp-app-nav-username { font-size: 13px; color: var(--nav-user); font-weight: 600; }
.bp-app-nav-avatar {
    width: 29px; height: 29px; border-radius: 9px; background: var(--nav-gold); color: #14151c;
    display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; flex: 0 0 auto;
}
.bp-app-nav-brand:focus-visible, .bp-app-nav-avatar:focus-visible {
    outline: 2px solid var(--nav-gold); outline-offset: 2px;
}
@media (max-width: 560px) {
    .bp-app-nav-sub, .bp-app-nav-username { display: none; }
}