/* components/topbar-auth.css — entête compacte + contextbar (Auth) */
@layer components {

    /* Topbar (identique visuellement au header global) */
    .topbar {
        position: relative;
        height: var(--header-h);
        background: var(--header-bg);
        color: var(--header-fg);
        z-index: 20;
    }

    .topbar--sticky {
        position: sticky;
        top: 0;
    }

    /* 3 zones: left | logo | right — centre garanti */
    .topbar__inner {
        max-width: var(--container-max);
        width: 100%;
        margin: 0 auto;
        padding: 0 var(--space-3);
        height: 100%;
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
    }

    .topbar__side--left {
        grid-column: 1;
        justify-self: start;
    }

    .topbar__logo-link {
        grid-column: 2;
        justify-self: center;
        display: inline-flex;
        align-items: center;
    }

    .topbar__side--right {
        grid-column: 3;
        justify-self: end;
    }

    .topbar__logo {
        height: 36px;
        display: block;
    }

    .icon-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border: 0;
        border-radius: 999px;
        background: transparent;
        color: currentColor;
        cursor: pointer;
        transition: transform .06s var(--ease), background .18s var(--ease);
        font-size: 24px;
    }

    .icon-btn:active {
        transform: scale(.98);
    }

    .icon-btn[aria-disabled="true"] {
        cursor: default;
    }

    .topbar__avatar {
        width: 36px;
        height: 36px;
        aspect-ratio: 1/1;
        display: block;
        border-radius: 50%;
        object-fit: cover;
        box-shadow: 0 0 0 2px #fff;
    }

    .topbar__user:focus-visible .topbar__avatar {
        box-shadow: 0 0 0 3px #fff;
    }

    /* Contextbar (brand • tagline) */
    .contextbar {
        background: var(--surface);
        color: var(--text);
        border-bottom: 1px solid var(--border);
    }

    .contextbar__inner {
        max-width: var(--container-max);
        width: 100%;
        margin: 0 auto;
        min-height: 36px;
        /* hauteur compacte inchangée */
        padding: 8px var(--space-3);
        display: flex;
        justify-content: center;
        /* centrage global */
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
        font-size: 15px;
        /* texte un peu plus grand */
        line-height: 1.2;
        color: var(--muted);
        text-align: center;
    }

    .contextbar__brand {
        font-weight: 700;
        color: var(--text);
    }

    .contextbar__sep {
        opacity: .6;
        line-height: 1;
        /* le • séparateur */
    }

    .contextbar__tagline {
        white-space: nowrap;
    }

    .contextbar__tagline strong {
        font-weight: 700;
        color: var(--text);
    }

    @media (max-width:360px) {
        .contextbar__inner {
            gap: 6px;
        }

        .contextbar__tagline {
            white-space: normal;
        }
    }
}