body {
    --scroll-y-value: 0%;
    --scroll-y-value-in-percent: 0;
}

    body::after {
        content: '';
        position: fixed;
        inset: 0;
        margin: auto;
        width: 150%;
        height: 150%;
        background-color: rgba(0, 0, 0, 0.7);
        z-index: -1;
    }

    body::before {
        --background-zoom-in-percent: 20;
        --background-zoom: calc(var(--background-zoom-in-percent) * 1%);

        content: '';
        width: 100%;
        height: calc(100% + var(--background-zoom));
        -o-object-fit: cover;
           object-fit: cover;
        position: fixed;

        /* inset: 0; */
        left: 0;
        right: 0;
        top: calc(var(--scroll-y-value, 0%) * (var(--background-zoom-in-percent) * -1) / 100);
        pointer-events: none;
        
        background-image: url('../src/images/backgrounds/background_footer.png');
        background-repeat: no-repeat;
        background-size: cover;
        /* background-attachment: fixed; */

        background-position: center; /*valeur à animer avec le Javascript*/

        z-index: -1;

        transition: background-size 0.3s, background-position 0.05s, padding 0.3s, padding-inline 0.3s, padding-block 0.3s, gap 0.3s;
    }

    body span.backgroundLogo {
        --vertical-pos: -580px;
        --offset-parallax: 250px;
        --offset-parallax-min: calc(var(--vertical-pos) - var(--offset-parallax));
        --offset-parallax-max: calc(var(--vertical-pos) + var(--offset-parallax));

        --vertical-parallax: calc((var(--scroll-y-value-in-percent, 0) * (var(--offset-parallax-max) - var(--offset-parallax-min)) / 100) + var(--offset-parallax-min));
        
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
           object-fit: cover;
        position: fixed;

        left: 0;
        top: 0;
        pointer-events: none;
        
        background-image: url('../src/images/brand/OpenieraLogoBlack.png');
        background-repeat: no-repeat;
        background-size: auto 1250px;
        background-position: right -195px bottom var(--vertical-parallax);
        background-attachment: fixed;

        /* opacity: 0.4; */

        mix-blend-mode: overlay;

        z-index: -1;

        transition: background-size 0.3s, background-position 0.035s;
    }

    body {

    transition: background-size 0.3s, background-position 0.3s, padding 0.3s, padding-inline 0.3s, padding-block 0.3s, gap 0.3s;
}

section.legal {
    background-color: transparent;

    padding-inline: 150px;
    padding-left: 150px;
    padding-right: 150px;

    padding-block: 90px;
    padding-top: 90px;
    padding-bottom: 90px;

    gap: 30px;
    justify-content: center;
    align-items: center;
}

section.legal ol.legalList {
        list-style-type: decimal;
    }

section.legal ul:is(.legalList, .legalSubList, .legalSubList.sub) {
        list-style-type: disc;
    }

section.legal ul:is(.legalList, .legalSubList, .legalSubList.sub) li:is(.legalItem, .legalSubItem, .legalSubItem.sub) {
            list-style-type: disc;
        }

@media (max-width: 62.5rem) {
        body span.backgroundLogo {
            --vertical-pos: -290px;
            --offset-parallax: 225px;
            
            background-size: auto 700px;
            background-position: right -240px bottom var(--vertical-parallax);
        }

    section.legal {
        padding-inline: 25px;
        padding-left: 25px;
        padding-right: 25px;

        padding-block: 25px;
        padding-top: 90px;
        padding-bottom: 25px;

        gap: 30px;
    }

        section.legal .openieraText:not(.title) {
            font-size: 1rem;
        }
}