.portail-navigation {
    border-bottom: 1px solid #41443b;
    background: #171914;
    color: #f7f4ed;
}

.portail-navigation-interieur,
.portail-navigation-liens {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem;
}

.portail-navigation-interieur {
    width: min(calc(100% - 2 * clamp(.75rem, 3vw, 2rem)), 69rem);
    margin-inline: auto;
    padding-block: .35rem;
}

.portail-navigation-liens {
    margin: 0;
    padding: 0;
    list-style: none;
}

.portail-navigation a,
.portail-navigation-bouton {
    display: inline-flex;
    box-sizing: border-box;
    align-items: center;
    gap: .45rem;
    min-height: 44px;
    padding: .4rem .65rem;
    border-radius: .35rem;
    color: inherit;
    font: inherit;
    font-weight: 600;
    text-decoration: none;
}

.portail-navigation a:hover,
.portail-navigation a[aria-current="page"],
.portail-navigation-bouton:hover,
.portail-navigation-bouton[aria-expanded="true"] {
    background: #292c25;
    color: #ffc373;
    text-decoration: none;
}

.portail-navigation a:focus-visible,
.portail-navigation-bouton:focus-visible {
    outline: 2px solid #ffc373;
    outline-offset: -2px;
}

.portail-navigation-bouton {
    display: none;
    margin-inline-start: auto;
    border: 1px solid #41443b;
    background: transparent;
    cursor: pointer;
}

@media (max-width: 767px) {
    .portail-navigation-bouton:not([hidden]) {
        display: inline-flex;
    }

    .portail-navigation-bouton:not([hidden])[aria-expanded="false"] + .portail-navigation-secondaire {
        display: none;
    }

    .portail-navigation-secondaire {
        display: grid;
        flex-basis: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding-top: .25rem;
        border-top: 1px solid #41443b;
    }

    .portail-navigation-secondaire a {
        display: flex;
    }
}