.footer-section{
    display: flex;
    flex-direction: column;
    gap: var(--gap-top-header-menu);
    margin-block: var(--gap-top-header-menu);
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: auto;
}              

.footer{
    border-radius: var(--radius);
    backdrop-filter: blur(8px);
    box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    inset 0 -1px 0 rgba(255,255,255,0.15),
    0 5px 15px rgba(0,0,0,0.08);

    justify-content: space-between;
    justify-self: center;
    align-items: flex-start;
    width: 95%;
    height: fit-content;
    padding: var(--gap-filtre);
    gap: 30px;

    transition: 0.2s;
}

.footer.usds{
    background-color: var(--sable-opacity);
    display: var(--display-footer);
    flex-direction: var(--footer-flex-direction);
}

.footer-NL, .footer-menu.usds{
    flex: 0.5;
    font-size: calc(var(--font-size)/2);
    color: var(--mer);
    font-family: var(--secondaryFont);
}

.footer-NL b{
    font-size: calc(var(--font-size)/1);
    font-family: var(--principalFont);
}

.footer-menu nav{
    margin-top: 10px;
    margin-bottom: 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 15px;
    -webkit-box-align: baseline;
        -ms-flex-align: baseline;
            align-items: baseline;
}

.footer-menu nav a:hover{
    color: var(--mer);
    translate: 0 -2px;
}

.footer-menu nav a{
    color: var(--mer-opacity);
    transition: 0.2s;
    text-decoration: none;
}

.footer-menu nav a.active {
  color: var(--mer);
  font-family: var(--secondaryFontBold);
}

.social-icons {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 15px;
    transition: 0.2s;
    margin-block: 20px;
}

.social-icons img {width: 36px; height: auto;}
.social-icons a{transition: 0.2s; opacity: 60%;}
.social-icons a:hover{translate: 0 -2px; opacity: 100%;}

.footer-button{
    background-color: transparent;
    border-radius: var(--radius);

    box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    inset 0 -1px 0 rgba(255,255,255,0.15),
    0 5px 15px rgba(0,0,0,0.08);

    cursor: pointer;

    text-align: center;
    font-family: var(--principalFont);
    color: var(--mer);
    padding: 10px 20px 10px 20px;
    width: auto; 
    max-width: 65%;

    /*transform: translateX(-50%);
    margin-left: 50%;*/

    transition: 0.2s;
}
    .footer-button:hover{
        background-color: var(--mer);
        color: var(--sable);
        translate: 0 -2px;
        }



/*----------------------
    BOUTON SCROLL UP
-----------------------*/    


.container-scroll-up{
    padding: 0 2.5vw 0 2.5vw;
    height: fit-content;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: row;
            justify-content: end;
    font-size: var(--font-size);
    align-items: center;
}

    #scroll-up{
        font-family: var(--principalFont);
        font-size: calc(var(--font-size)/2);
        text-align: center;
        color: var(--mer);

        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        align-items: center;
        overflow: hidden;
        height: 45px;
        aspect-ratio: 1/1;

            background-color: var(--sable-opacity);
            border-radius: 50%;
            border-radius: var(--radius);
            backdrop-filter: blur(8px);
            box-shadow:
            inset 0 1px 0 rgba(255,255,255,0.6),
            inset 0 -1px 0 rgba(255,255,255,0.15),
            0 5px 15px rgba(0,0,0,0.08);


        -webkit-transition: 0.2s;
        -o-transition: 0.2s;
        transition: 0.2s;

        cursor: pointer;
    }

        #scroll-up:hover {
            background: var(--mer);
            color: var(--sable);
            translate: 0 -2px;
        }