header.sass

header#document-header
    background: $header-background
    border-bottom: $header-border-bottom-width solid var(--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
        .menu
            a,
            a:hover,
            a:focus,
            a:active,
            span
                color: inherit
        @if $header-sticky-invert-logo
            .logo
                img, .logo-text
                    filter: invert(1)
        @include media-breakpoint-up(desktop)
            .dropdown-menu
                background: $header-sticky-dropdown-background
                color: $header-sticky-dropdown-color
    &.is-sticky
        .pagefind-ui__toggle
            color: $header-sticky-color
    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
        @extend %logo
        color: $header-color
        img
            height: $header-logo-height
            @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-modal-opened &,
    html.has-offcanvas-opened &
        overflow: hidden
        height: 100%
        min-height: -webkit-fill-available
        &::after
            display: block
            opacity: 1
            pointer-events: inherit
    html.has-offcanvas-opened &
        &::after
            background-color: $toc-overlay-color
            z-index: $zindex-header + 1
    html.has-modal-opened &
        &::after
            z-index: $zindex-modal - 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
        .header-button
            @include button-reset
            display: none
            border: 0
            color: inherit
            padding: 0
            position: relative
            text-transform: uppercase
            line-height: 1
            &:focus
                box-shadow: none
            &:focus-visible
                outline-color: gray
                outline-offset: 5px
                outline-style: dashed
                outline-width: 1px
            @include media-breakpoint-down(desktop)
                display: flex
                align-items: center
            span:first-of-type
                @include meta
                font-size: pxToRem(14)
            span:last-of-type
                background: none
                @include icon-block(menu-line, before)
                    vertical-align: baseline
                    margin-right: $icon-burger-margin-right
            &[aria-expanded="true"]
                span:last-of-type
                    &::before
                        content: map-get($icons, "close-line")
                        margin-right: $icon-close-margin-right