/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* Mobile d'abord : barre haute + navigation en bas, à portée de pouce. Couleurs : brand/brand.css. */
.shell[b-367h9eg6oo] {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

.topbar[b-367h9eg6oo] {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    padding: calc(env(safe-area-inset-top) + 0.375rem) 1rem 0.375rem;
    background: var(--color-brand-surface);
    color: var(--color-on-brand-surface);
    /* Liseré aux couleurs du drapeau belge, comme sur le site de la marque. */
    border-bottom: 4px solid;
    border-image: linear-gradient(to right,
        var(--color-flag-black) 0 33.33%,
        var(--color-flag-yellow) 33.33% 66.66%,
        var(--color-flag-red) 66.66% 100%) 1;
}

.brand[b-367h9eg6oo] {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    min-height: 44px;
    color: inherit;
    text-decoration: none;
}

.brand-emblem[b-367h9eg6oo] {
    height: 2.75rem;
    width: auto;
}

.brand-name[b-367h9eg6oo] {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.content[b-367h9eg6oo] {
    flex: 1;
    width: 100%;
    max-width: 48rem;
    margin: 0 auto;
    padding: 1.25rem 1rem;
}

.bottomnav[b-367h9eg6oo] {
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: space-around;
    gap: 0.5rem;
    padding: 0.5rem 0.5rem calc(env(safe-area-inset-bottom) + 0.5rem);
    background: var(--color-nav);
}

.bottomnav[b-367h9eg6oo]  a {
    flex: 1;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-on-nav);
    font-family: var(--font-heading);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
}

.bottomnav[b-367h9eg6oo]  a.active {
    color: var(--color-on-nav-active);
    box-shadow: inset 0 -3px 0 var(--color-on-nav-active);
}

@media (min-width: 48rem) {
    /* Logo aligné sur la colonne de contenu (48rem centrée). */
    .topbar[b-367h9eg6oo] {
        padding-inline: calc((100% - 48rem) / 2 + 1rem);
    }

    .bottomnav[b-367h9eg6oo] {
        position: static;
        justify-content: center;
    }

    .bottomnav[b-367h9eg6oo]  a {
        flex: 0 0 auto;
        padding: 0 1rem;
    }
}