layout.sass

*,
*::before,
*::after
    box-sizing: border-box

\:root
    --spacing-1: #{$spacing-1}
    --spacing-2: #{$spacing-2}
    --spacing-3: #{$spacing-3}
    --spacing-4: #{$spacing-4}
    --spacing-5: #{$spacing-5}
    --spacing-6: #{$spacing-6}
    --spacing-7: #{$spacing-7}
    --grid-max-width: #{$grid-max-width}
    --header-height: #{$header-height}
    --header-menu-max-height: calc(100vh - var(--header-height) - #{$spacing-6})
    @include media-breakpoint-up(desktop)
        --header-height: #{$header-height-desktop}

// TODO: choisir entre margin top / bottom --> https://matthewjamestaylor.com/css-margin-top-vs-bottom

body
    color: $body-color
    background: $body-background-color
    @media (prefers-reduced-motion: reduce)
        *
            transition-duration: 0s !important
    // &:not(.is-loaded)
    //     *
    //         transition-duration: 0s !important

main
    &:not(.page-with-blocks)
        padding-bottom: $spacing-5

iframe
    border: none

[id]
    scroll-margin-top: var(--header-height)

.container
    @include container
    .hero + &
        margin-top: $spacing-5

.hidden
    display: none

ul,
ol
    // https://since1979.dev/aligning-your-lists-with-your-text/
    padding-left: 0
    list-style-position: inside
    > li
        > p
            display: inline

.document-content
    .container > .lead
        margin-bottom: $spacing-5

.document-content
    position: relative
    @include in-page-with-sidebar
        .heading h2, .block .block-content
            padding-left: offset(4)

details
    &:not([open]):hover
       summary::after
            transform: translateY(5px)
    summary
        @include meta
        padding-bottom: $spacing-2
        padding-top: $spacing-2
        position: relative
        cursor: pointer
        @include icon(caret, after)
            margin-left: pxToRem(10)
            line-height: pxToRem(22)
            transition: transform 0.25s
        &::marker
            content: none
        &::-webkit-details-marker 
            display: none
    &[open]
        summary
            @include icon(caret-top, after)
        &:hover
            summary::after
                transform: translateY(-5px)
.modal
    align-items: center
    justify-content: center
    height: 100vh
    left: 0
    overflow: hidden
    position: fixed
    top: 0
    width: 100%
    margin: 0
    z-index: $zindex-modal
    opacity: 0
    transition: opacity $header-transition
    html.is-animating &
        opacity: 0
        display: flex
    &.is-opened
        opacity: 1
        display: flex
    &[aria-hidden="true"]
        display: none
    .modal-content
        position: relative
        background-color: var(--color-background-alt)
        padding: $spacing-4
        width: auto
        max-height: 100vh
        overflow-y: auto
        @include media-breakpoint-up(desktop)
            padding: $spacing-5
            max-height: 90vh
            width: columns(8)
        .modal-header
            margin-bottom: $spacing-2
            button
                @include button-reset
                @include icon-block(close, before)
                position: absolute
                padding: 0
                right: 0
                top: 0