footer{
    z-index: 100;
    span.totop {
        display: inline-flex;
        width: 100vw;
        #toTop{
            margin: auto;
            background-color: #fff;
            border-top-left-radius: 10%;
            border-top-right-radius: 10%;
            padding-bottom: 0.5rem;
            .arrow-up{
                font-size: 1.7rem;
                line-height: 2.5rem;
                text-align: center;
                width: 4rem;
                height: 2rem;
                display: inline-block;
                text-align: top;

                &::before{
                    content:url("/themes/custom/quartiers_de_demain/src/assets/img/up-arrow.svg") ;
                    
                    // width: 20%;
                }
            }

        }
    }
}
.footer{
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(1, 1fr);
    background-color: $white-header;
    padding-top: 1rem;
    padding-bottom: 1rem;
    section{width: fit-content;}
    h2, ul{margin: 0;}
    border-top: 1px solid #808080;
     @media(max-width: 700px){
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    @media(max-width: 600px){
        flex-wrap: nowrap;
    }     

    #footer-left{
        grid-column: 1 /span 5;
        grid-row: 1;
        @media (max-width: 500px){
            max-width: 25%;
        }
        .footer_left_container{
            padding-left: 5%;
            @media(max-width: 700px){
                max-width: 50vw;
            }
            @media (max-width: 500px){
                padding-left: 15%;
            }
            display: flex;
            flex-direction: row;

            #block-quartiers-de-demain-logoepau{
                height: $header-height;
                @media(max-width: 700px){
                    height: $header-height-pad;
                }
                // > div {
                //     width: 100%;
                //     height: 100%;
                //     > a {
                //         display: flex;
                //         align-items: center;
                //         justify-content: center;
                //         width: 100%;
                //         height: 100%;
                //         > img {
                //             padding: 0 2rem;
                //             width: 100%;
                //             height: auto;
                //             @media(max-width: 700px){
                //                 padding: 0;
                //             }
                //         }
                //     }
                // }
            }
            img{
                width: auto;
                height: $header-height;
                @media(max-width: 700px){
                    height: $header-height-pad;
                }
                @media(max-width: 660px){
                    height: $header-height-small;
                }
                @media(max-width: 450px){
                    height: $header-height-ultrasmall;
                }
            }
        }
 
    }
    #footer-middle{
        grid-column: 6 /span 7;
        grid-row: 1;
        #block-quartiers-de-demain-pieddepage{
            ul li{
                padding-bottom: 0.2rem;
            }
            @media(max-width: 700px){
             ul{
                 padding-left: 00.5rem;
             }
            }
        }
        font-size: 0.6rem;
    }
    #footer-right{
        grid-column: 10 / 12;
        grid-row: 1;
         @media (max-width: 700px){
            display: flex;
            justify-content: flex-end;
            max-width: 35%;
         }
        #block-quartiers-de-demain-socialmedialinks{
            flex-direction: column;
            h2{
                display: flex;
                flex-direction: column;
                font-size: $font-medium;
                font-weight: 400;
                &::before{
                    content: "Nous contacter";
                    padding-bottom: 0.6rem;
                    font-weight: 600;
                }
                padding-bottom: 0.6rem;
                font-size: 0.6rem;

            }
            .fa-3x{
                font-size: 1.5em;
            }
        }
    }

    div{
        @media(max-width: 700px){
            flex-wrap: wrap;
        }
        @media(max-width: 520px){
            flex-direction: column;
        }
    }

}

