layout.sass

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

\:root
    --spacing0: #{$spacing0}
    --spacing1: #{$spacing1}
    --spacing2: #{$spacing2}
    --spacing3: #{$spacing3}
    --spacing4: #{$spacing4}
    --spacing5: #{$spacing5}
    --grid-gutter: #{$grid-gutter}
    --grid-max-width: #{$grid-max-width}
    --header-height: #{$header-height}
     @include media-breakpoint-up(md)
        --header-height: #{$header-height-md}

// 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
    // Create padding-top for fixed header under md
    @include media-breakpoint-down(md)
        padding-top: var(--header-height)


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

ul
    padding-left: px2rem(15)

.document-content, .blocks
    margin-top: $spacing3
    > * + *
        margin-top: $spacing3
    // > *
    //     margin-top: $spacing3
    //     padding-bottom: $spacing3
    //     &:last-child
    //         padding-bottom: $spacing4
    // > *:not(:last-child)
    //     padding-bottom: $spacing3
    // > *:last-child
    //     padding-bottom: $spacing4
    // section
    //     * + p
    //         margin-bottom: 0 // TODO : vérifier les cas particuliers
    //         margin-top: $spacing1


details
    &:not([open]):hover
       summary::after
            transform: translateY(5px)
    summary
        padding-bottom: $spacing0
        padding-top: $spacing0
        position: relative
        @include icon(caret, after, px2rem(5))
            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, px2rem(5))
        &:hover
            summary::after
                transform: translateY(-5px)

section
    scroll-margin-top: var(--header-height)