#footer{
    background-color: var(--color-primary);
    margin-top: 100px;
}

/* -------------------------- FOOTER TOP -------------------------- */

#footer .footerTop{
    display: grid;
    grid-template-columns: 220px 1fr auto;
    gap: 50px 70px;
    padding-block: 32px 25px;
}

#footer .footerTop .column1 .logo,
#footer .footerTop .column1 .logo img{
    width: 100%;
    height: auto;
    aspect-ratio: 213/47;
    display: block;
    object-fit: contain;
}

#footer .footerTop .column2 #menu-footer{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px 70px;
}

#footer .footerTop .column2 #menu-footer > li > a{
    color: var(--color-white);
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 16px;
    display: block;
}

#footer .footerTop .column2 #menu-footer .sub-menu a{
    color: var(--color-tertiary);
    font-size: 16px;
    padding-block: 8px;
    display: block;
}

#footer .footerTop .column3 p,
#footer .footerTop .column3 a{
    color: var(--color-tertiary);
    font-size: 16px;
}

#footer .footerTop .column3 a{
    padding-block: 8px;
    display: block;
}

#footer .footerTop .column3 .titre{
    color: var(--color-white);
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 16px;
    display: block;
}

#footer .footerTop .column3 .reseaux{
    margin-top: 25px;
}

#footer .footerTop .column3 .reseaux li a{
    display: flex;
    align-items: center;
    gap: 16px;
    padding-block: 8px;
}

#footer .footerTop .column3 .reseaux li a .svgContainer{
    width: 42px;
    min-width: 42px;
    max-width: 42px;
    height: 42px;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: solid 2px var(--color-tertiary);
    padding: 9px;
}

#footer .footerTop .column3 .reseaux li a .svgContainer svg{
    max-height: 20px;
}

@media (max-width: 992px){
    #footer .footerTop{
        grid-template-columns: 1fr;
    }
    #footer .footerTop .column2 #menu-footer{
        justify-content: flex-start;
        flex-direction: column;
    }
    #footer .footerTop .column2 .menu-footer-container .menu > .menu-item-has-children {
        border-bottom: 1px solid var(--color-tertiary);
    }
    #footer .footerTop .column2 .menu-footer-container .menu > .menu-item-has-children > a {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        padding: 10px 0;
        margin-bottom: 0 !important;
    }
    #footer .footerTop .column2 .menu-footer-container .menu > .menu-item-has-children > a::after {
        content: "";
        width: 12px;
        height: 7px;
        display: block;
        transform: rotate(0deg);
        transition: transform 300ms ease;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.00025 0.000238419C5.74425 0.000238419 5.48825 0.098238 5.29325 0.293238L0.29325 5.29324C-0.09775 5.68424 -0.09775 6.31624 0.29325 6.70724C0.68425 7.09824 1.31625 7.09824 1.70725 6.70724L6.00025 2.41424L10.2933 6.70724C10.6842 7.09824 11.3162 7.09824 11.7072 6.70724C12.0982 6.31624 12.0982 5.68424 11.7072 5.29324L6.70725 0.293238C6.51225 0.098238 6.25625 0.000238419 6.00025 0.000238419Z' fill='white'/%3E%3C/svg%3E");
    }
    #footer .footerTop .column2 .menu-footer-container .menu > .menu-item-has-children:not(.is-open) > a::after {
        transform: rotate(180deg);
        transition: transform 300ms ease;
    }
    #footer .footerTop .column2 .menu-footer-container .sub-menu {
        display: block;
        height: 0;
        overflow: hidden;
        padding: 0;
        transition: height 300ms ease;
    }
    #footer .footerTop p,
    #footer .footerTop a{
        font-size: 15px !important;
    }
    #footer .footerTop .column1 .logo{
        max-width: 220px;
    }
    #footer .footerTop .column2 #menu-footer .sub-menu li:last-child a{
        margin-bottom: 10px;
    }
}

/* -------------------------- FOOTER BOTTOM -------------------------- */

#footer .footerBottom{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 30px;
    padding-block: 24px 32px;
    border-top: solid 1px var(--color-tertiary);
}

#footer .footerBottom p,
#footer .footerBottom a{
    font-size: 12px;
    color: var(--color-white) !important;
}