body {
    background-color: #121212;

    --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/openiera_prestations_bcg.png');
        background-repeat: no-repeat;
        background-size: cover;
        /* background-attachment: fixed; */

        background-position: center;

        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;
    }

    /* span.backgroundImg {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: fixed;

        left: 0;
        top: 0;
        pointer-events: none;
        
        background-image: url('../src/images/backgrounds/openiera_prestations_bcg.png');
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;

        background-position: center 0%;

        z-index: -1;

        transition: background-size 0.3s, background-position 0.3s, 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 {
    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;
    
    background-color: transparent;
}

section .discoverBtn {
        padding-inline: 35px;
        padding-block: 18px;
    }

section.surMesurePrestations .description, section.servicesCMS .description, section.autresServices .description {
            font-size: 1.75rem;
            text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.7), 0px 0px 25px rgba(0, 0, 0, 0.45);
        }

section.surMesurePrestations .description.centered, section.servicesCMS .description.centered, section.autresServices .description.centered {
                text-align: center;
            }

section.surMesurePrestations .subDescription, section.servicesCMS .subDescription, section.autresServices .subDescription {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 100px;
    
            font-size: 1.75rem !important;
            text-align: center;
        }

section.surMesurePrestations .subDescription .email, section.servicesCMS .subDescription .email, section.autresServices .subDescription .email {
                font-size: 2.5rem !important;
                
                transition: transform 0.5s !important;
            }

section.surMesurePrestations .subDescription .email, section.surMesurePrestations .subDescription .description, section.servicesCMS .subDescription .email, section.servicesCMS .subDescription .description, section.autresServices .subDescription .email, section.autresServices .subDescription .description {
                position: relative;
                text-align: center;
            }

section.surMesurePrestations .subDescription .email[clickedFocus], section.surMesurePrestations .subDescription .description[clickedFocus], section.servicesCMS .subDescription .email[clickedFocus], section.servicesCMS .subDescription .description[clickedFocus], section.autresServices .subDescription .email[clickedFocus], section.autresServices .subDescription .description[clickedFocus] {
                    --focus-scale: 1.5;

                    transition: transform 1s;
                }

section.surMesurePrestations .subDescription .email[clickedFocus][clickedFocusShown], section.surMesurePrestations .subDescription .description[clickedFocus][clickedFocusShown], section.servicesCMS .subDescription .email[clickedFocus][clickedFocusShown], section.servicesCMS .subDescription .description[clickedFocus][clickedFocusShown], section.autresServices .subDescription .email[clickedFocus][clickedFocusShown], section.autresServices .subDescription .description[clickedFocus][clickedFocusShown] {
                        transform: scale(var(--focus-scale));
                    }

section.surMesurePrestations .subDescription .description[clickedFocus], section.servicesCMS .subDescription .description[clickedFocus], section.autresServices .subDescription .description[clickedFocus] {
                    max-width: 78%;
                }

section.surMesurePrestations .sectionContainer, section.servicesCMS .sectionContainer, section.autresServices .sectionContainer {
            display: flex;
            flex-direction: row;
            gap: 250px;
            align-items: center;
        }

section.surMesurePrestations .sectionContainer .descriptionContainer, section.servicesCMS .sectionContainer .descriptionContainer, section.autresServices .sectionContainer .descriptionContainer {
                width: 610px;
                font-size: 1.625rem;
                line-height: 200%;
                align-items: center;

                text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.7), 0px 0px 25px rgba(0, 0, 0, 0.45);
            }

section.surMesurePrestations .sectionContainer .cardsContainer, section.servicesCMS .sectionContainer .cardsContainer, section.autresServices .sectionContainer .cardsContainer {
                display: flex;
                flex-direction: column;
                align-items: center;
                padding: 0px;
                gap: 40px;
            }

section.surMesurePrestations .sectionContainer .cardsContainer .card, section.servicesCMS .sectionContainer .cardsContainer .card, section.autresServices .sectionContainer .cardsContainer .card {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    padding: 35px;
                    box-sizing: border-box;
                    gap: 35px;

                    width: 620px;
                    height: -moz-fit-content;
                    height: fit-content;

                    background-color: rgba(16, 16, 16, 0.35);
                    box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.45), inset 7px 7px 100px -25px rgba(0, 0, 0, 0.25), inset -7px -7px 100px -25px rgba(255, 255, 255, 0.2);
                    -webkit-backdrop-filter: blur(17.5px);
                            backdrop-filter: blur(17.5px);
                    border-radius: 25px;
                }

section.surMesurePrestations .sectionContainer .cardsContainer .card .titleCard, section.servicesCMS .sectionContainer .cardsContainer .card .titleCard, section.autresServices .sectionContainer .cardsContainer .card .titleCard {
                        color: #D168DC;
                        font-size: 1.25rem;
                        text-align: center;
                        text-transform: uppercase;
                    }

section.surMesurePrestations .sectionContainer .cardsContainer .card .textCard, section.servicesCMS .sectionContainer .cardsContainer .card .textCard, section.autresServices .sectionContainer .cardsContainer .card .textCard {
                        font-size: 1rem;
                    }

section.surMesurePrestations .sectionContainer .cardsContainer .card .askBtn, section.servicesCMS .sectionContainer .cardsContainer .card .askBtn, section.autresServices .sectionContainer .cardsContainer .card .askBtn {
                        font-size: 1.125rem;
                    }

section.surMesurePrestations mark, section.servicesCMS mark, section.autresServices mark {
            background-color: transparent;
            color: #CD67D8
        }

@media (max-width: 111.25rem) { /* 1780px / 16 == 111.25rem */
            section.surMesurePrestations .sectionContainer, section.servicesCMS .sectionContainer, section.autresServices .sectionContainer {
                gap: 120px;
            }

                section.surMesurePrestations .sectionContainer .descriptionContainer, section.servicesCMS .sectionContainer .descriptionContainer, section.autresServices .sectionContainer .descriptionContainer {
                    width: 450px;
                    font-size: 1.25rem;
                }
                    section.surMesurePrestations .sectionContainer .cardsContainer .card, section.servicesCMS .sectionContainer .cardsContainer .card, section.autresServices .sectionContainer .cardsContainer .card {
                        width: 450px;
                    }

                        section.surMesurePrestations .sectionContainer .cardsContainer .card .titleCard, section.servicesCMS .sectionContainer .cardsContainer .card .titleCard, section.autresServices .sectionContainer .cardsContainer .card .titleCard {
                            font-size: 1.125rem;
                        }

                        section.surMesurePrestations .sectionContainer .cardsContainer .card .textCard, section.servicesCMS .sectionContainer .cardsContainer .card .textCard, section.autresServices .sectionContainer .cardsContainer .card .textCard {
                            font-size: 0.75rem;
                        }

                        section.surMesurePrestations .sectionContainer .cardsContainer .card .askBtn, section.servicesCMS .sectionContainer .cardsContainer .card .askBtn, section.autresServices .sectionContainer .cardsContainer .card .askBtn {
                            font-size: 0.75rem;
                        }
}

@media (max-width: 83.125rem) { /* 1330px / 16 == 83.125rem */
    section {
        padding-inline: 90px;
        padding-left: 90px;
        padding-right: 90px;
    
        padding-block: 60px;
        padding-top: 60px;
        padding-bottom: 60px;
    }
            section.surMesurePrestations .sectionContainer, section.servicesCMS .sectionContainer, section.autresServices .sectionContainer {
                gap: 90px;
            }

                section.surMesurePrestations .sectionContainer .descriptionContainer, section.servicesCMS .sectionContainer .descriptionContainer, section.autresServices .sectionContainer .descriptionContainer {
                    width: 340px;
                    font-size: 1.25rem;
                }
        
                section.surMesurePrestations .sectionContainer .cardsContainer, section.servicesCMS .sectionContainer .cardsContainer, section.autresServices .sectionContainer .cardsContainer {
                    gap: 20px;
                }

                    section.surMesurePrestations .sectionContainer .cardsContainer .card, section.servicesCMS .sectionContainer .cardsContainer .card, section.autresServices .sectionContainer .cardsContainer .card {
                        padding: 20px;
                        gap: 20px;

                        width: 340px;
                    }

                        section.surMesurePrestations .sectionContainer .cardsContainer .card .titleCard, section.servicesCMS .sectionContainer .cardsContainer .card .titleCard, section.autresServices .sectionContainer .cardsContainer .card .titleCard {
                            font-size: 1.125rem;
                        }

                        section.surMesurePrestations .sectionContainer .cardsContainer .card .textCard, section.servicesCMS .sectionContainer .cardsContainer .card .textCard, section.autresServices .sectionContainer .cardsContainer .card .textCard {
                            font-size: 0.75rem;
                        }

                        section.surMesurePrestations .sectionContainer .cardsContainer .card .askBtn, section.servicesCMS .sectionContainer .cardsContainer .card .askBtn, section.autresServices .sectionContainer .cardsContainer .card .askBtn {
                            font-size: 0.75rem;
                        }
}

@media (max-width: 62.5rem) { /* 1000px / 16 == 62.5rem */
        body span.backgroundLogo {
            --vertical-pos: -290px;
            --offset-parallax: 225px;
            /* --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)); */
            
            background-size: auto 700px;
            /* background-position: right 0px bottom 0px; */
            background-position: right -240px bottom var(--vertical-parallax);
        }
    section {
        padding-inline: 25px;
        padding-left: 25px;
        padding-right: 25px;

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

        gap: 30px;
    }
                    section.surMesurePrestations .subDescription .email[clickedFocus], section.surMesurePrestations .subDescription .description[clickedFocus], section.servicesCMS .subDescription .email[clickedFocus], section.servicesCMS .subDescription .description[clickedFocus], section.autresServices .subDescription .email[clickedFocus], section.autresServices .subDescription .description[clickedFocus] {
                        --focus-scale: 1.3;
                    }
                    section.surMesurePrestations .subDescription .description[clickedFocus], section.servicesCMS .subDescription .description[clickedFocus], section.autresServices .subDescription .description[clickedFocus] {
                        max-width: 80%;
                    }
}




/*

format mobile

*/

@media (max-width: 51.875rem) { /* 830px / 16 == 51.875rem */
            section.surMesurePrestations .sectionContainer, section.servicesCMS .sectionContainer, section.autresServices .sectionContainer {
                flex-direction: column;
                width: 100%;
            }

                section.surMesurePrestations .sectionContainer .descriptionContainer, section.servicesCMS .sectionContainer .descriptionContainer, section.autresServices .sectionContainer .descriptionContainer {
                    width: 100%;
                    font-size: 1.75rem;
                }
        
                section.surMesurePrestations .sectionContainer .cardsContainer, section.servicesCMS .sectionContainer .cardsContainer, section.autresServices .sectionContainer .cardsContainer {
                    width: 100%;
                }

                    section.surMesurePrestations .sectionContainer .cardsContainer .card, section.servicesCMS .sectionContainer .cardsContainer .card, section.autresServices .sectionContainer .cardsContainer .card {
                        width: 80%;
                    }
}

@media (max-width: 40rem) { /* 640px / 16 == 40rem */
                    section.surMesurePrestations .subDescription .email[clickedFocus], section.servicesCMS .subDescription .email[clickedFocus], section.autresServices .subDescription .email[clickedFocus] {
                        --focus-scale: 1.1;
                    }
}

@media (max-width: 33.125rem) { /* 530px / 16 == 33.125rem */
                    section.surMesurePrestations .subDescription .email[clickedFocus], section.servicesCMS .subDescription .email[clickedFocus], section.autresServices .subDescription .email[clickedFocus] {
                        --focus-scale: 1.065;
                    }
}

@media (max-width: 31.25rem) { /* 500px / 16 == 31.25rem */
                section.surMesurePrestations .sectionContainer .descriptionContainer, section.servicesCMS .sectionContainer .descriptionContainer, section.autresServices .sectionContainer .descriptionContainer {
                    font-size: 1.25rem;
                }
                    section.surMesurePrestations .sectionContainer .cardsContainer .card, section.servicesCMS .sectionContainer .cardsContainer .card, section.autresServices .sectionContainer .cardsContainer .card {
                        width: 100%;
                    }

            section.surMesurePrestations .description, section.servicesCMS .description, section.autresServices .description {
                font-size: 1.25rem !important;
            }
    
            section.surMesurePrestations .subDescription, section.servicesCMS .subDescription, section.autresServices .subDescription {
                font-size: 1.25rem !important;
            }
    
                section.surMesurePrestations .subDescription .email, section.servicesCMS .subDescription .email, section.autresServices .subDescription .email {
                    font-size: 1.5625rem !important;
                }

                    section.surMesurePrestations .subDescription .email[clickedFocus], section.servicesCMS .subDescription .email[clickedFocus], section.autresServices .subDescription .email[clickedFocus] {
                        --focus-scale: 1.3;
                    }
}

@media (max-width: 24.375rem) { /* 390px / 16 == 24.375rem */
                    section.surMesurePrestations .subDescription .email[clickedFocus], section.servicesCMS .subDescription .email[clickedFocus], section.autresServices .subDescription .email[clickedFocus] {
                        --focus-scale: 1.085;
                    }
}