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

\:root
    --spacing0: #{$spacing0}
    --spacing1: #{$spacing1}
    --spacing2: #{$spacing2}
    --spacing3: #{$spacing3}
    --spacing4: #{$spacing4}
    --spacing5: #{$spacing5}
    --grid-gutter: #{$grid-gutter}
    --grid-gutter-sm: #{$grid-gutter-sm}
    --grid-max-width: #{$grid-max-width}
    --header-height: #{$header-height}
    --header-menu-max-height: calc(100vh - var(--header-height) - #{$spacing4})
    @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: $spacing3

iframe
    border: none

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

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

.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: $spacing3

// .document-content
//     margin-top: $spacing-section-y

.document-content
    position: relative
    @include in-page-with-sidebar
        .block
            .block-content
                @include media-breakpoint-up(desktop)
                    padding-left: offset(4)
    // > .container:last-of-type
    //     margin-bottom: $spacing4

details
    &:not([open]):hover
       summary::after
            transform: translateY(5px)
    summary
        @include meta
        padding-bottom: $spacing0
        padding-top: $spacing0
        position: relative
        cursor: pointer
        @include icon(caret, after)
            margin-left: px2rem(10)
            line-height: px2rem(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
    display: flex
    justify-content: center
    height: 100vh
    left: 0
    overflow: hidden
    position: fixed
    top: 0
    width: 100%
    margin: 0
    z-index: $zindex-modal
    &[aria-hidden="true"]
        display: none
    .modal-content
        position: relative
        background-color: $color-background-alt
        padding: $spacing2
        width: auto
        max-height: 100vh
        overflow-y: auto
        @include media-breakpoint-up(desktop)
            padding: $spacing3
            width: col(8)
        .modal-header
            margin-bottom: $spacing0
            button
                @include button-reset
                @include icon-block(close, before)
                position: absolute
                padding: 0
                right: 0
                top: 0