header.sass

header#document-header
    background: $header-background
    border-bottom: $header-border-bottom-width solid $color-border
    color: $header-color
    position: fixed
    left: 0
    transition: transform $header-sticky-transition, background $header-sticky-transition
    top: 0
    width: 100%
    z-index: $zindex-header
    @include media-breakpoint-down(desktop)
        border-bottom: 0
        width: 100%
    .dropdown-menu
        transition: background $header-sticky-transition
    &.is-sticky, html.has-menu-opened &
        background: $header-sticky-background
        color: $header-sticky-color
        .dropdown-menu
            background: $header-sticky-dropdown-background
        .menu
            a,
            a:hover,
            a:focus,
            a:active
                color: inherit
            a:not(:hover)
                text-decoration-color: transparent
            span
                color: $header-sticky-color
        @if $header-sticky-invert-logo
            .logo img
                filter: invert(1)
    html.is-scrolling-down:not(.has-menu-opened) &
        @include media-breakpoint-down(desktop)
            transform: translateY(-100%)
        @include media-breakpoint-up(desktop)
            &:not(:hover)
                transform: translateY(-100%)
    .logo
        img
            display: block
            height: $header-logo-height
            width: auto
            @if $header-sticky-invert-logo
                transition: filter $header-sticky-transition
            @include media-breakpoint-up(desktop)
                height: $header-logo-height-desktop
    @include media-breakpoint-down(desktop)
        html.has-menu-opened &
            nav
                padding-bottom: 0
// TODO : Est-ce au bon endroit ?
body
    &::after
        @include inset(0)
        background-color: $body-overlay-color
        content: ""
        pointer-events: none
        position: fixed
        opacity: 0
        transition: opacity $header-transition
        z-index: $zindex-body-overlay

    html.has-menu-opened &,
    html.has-offcanvas-opened &
        &::after
            display: block
            opacity: 1
            pointer-events: inherit
    html.has-offcanvas-opened &
        &::after
            z-index: $zindex-header + 1
    html.is-animating:not(.has-menu-opened) &
        &::after
            display: block
            opacity: 0

header#document-header
    nav
        padding-top: $header-nav-padding-y
        padding-bottom: $header-nav-padding-y
        @include media-breakpoint-up(desktop)
            padding-top: $header-nav-padding-y-desktop
            padding-bottom: $header-nav-padding-y-desktop
        .container
            align-items: center
            display: flex
            flex-wrap: wrap
            justify-content: space-between
        button[type="button"]
            @include button-reset
            display: none
            border: 0
            color: inherit
            padding: 0
            position: relative
            text-transform: uppercase
            line-height: 1
            @include media-breakpoint-down(desktop)
                display: flex
                align-items: center
            &:focus
                box-shadow: none
            &:focus-visible
                outline-color: gray
                outline-offset: 5px
                outline-style: dashed
                outline-width: 1px
            span:first-of-type
                @include meta
                font-size: 14px
            span:last-of-type
                background: none
                display: block
                padding: half($spacing0) 0 half($spacing0) half($spacing0)
                line-height: 1
                @include icon("burger", before, 11px)
                    vertical-align: baseline
            &[aria-expanded="true"]
                span:last-of-type
                    &::before
                        content: map-get($icons, "close")
                        font-size: 12px