footer {
    --footer-bg              : var(--gray-2);
    --footer-logo-max-width  : 240px;
    --footer-link-color      : white;
    --footer-link-hover-color: var(--color-1-dark-bg);
    --footer-link-bg         : transparent;
    --footer-link-hover-bg   : transparent;
    --footer-gap             : 5px;
    --footer-link-padding    : 1rem 12px;
    --footer-social-gap      : 8px;
    color                    : white;
}
footer {
    background: var(--footer-bg);
}
footer .logo-footer {
    display        : flex;
    justify-content: center;
    margin         : 24px 48px 24px 16px;
}
footer .logo-footer img {
    width    : 100%;
    max-width: var(--footer-logo-max-width);
}
footer .social-link {
    display    : flex;
    align-items: center;
    background : var(--footer-link-bg);
    padding    : var(--footer-link-padding);
    gap        : var(--footer-social-gap);
}
footer .social-link a {
    font-size: 20px;
}
footer li > a {
    display    : flex;
    padding    : var(--footer-link-padding);
    background : var(--footer-link-bg);
    white-space: nowrap;
    color      : var(--footer-link-color) !important;
    transition : all ease 0.2s;
}
footer li > a:hover {
    background: var(--footer-link-hover-bg);
    color     : var(--footer-link-hover-color) !important;
}
footer li > a > i {
    display        : flex;
    justify-content: center;
    width          : 20px;
    padding-right  : 12px;
    padding-top    : 4px;
}
footer .footer-link-title {
    padding    : 15px 0;
    font-weight: bold;
    position   : relative;
}
footer .footer-link-title:after {
    content   : "";
    position  : absolute;
    bottom    : 4px;
    left      : 0;
    width     : 100%;
    height    : 1px;
    background: var(--footer-link-color);
}
footer .logo-slogan {
    color      : #fff;
    font-size  : 32.667px;
    font-style : italic;
    font-weight: 300;
}
footer .logo-slogan > span {
    color      : var(--color-1-dark-bg);
    font-size  : 32.667px;
    font-style : normal;
    font-weight: 700;
}
.w-2-3 {
    width: 66.66666666666666%;
}
.w-1-3 {
    width: 33.33333333333333%;
}
footer .bloc_gray {
    background   : var(--gray-1);
    border-radius: 5px;
}
footer .bloc_gray_title {
    font-size  : 33.57px;
    font-style : normal;
    font-weight: 700;
}
footer .bloc_gray_subtitle {
    font-size  : 16px;
    font-style : italic;
    font-weight: 400;
}
footer .img-annuaire {
    position: absolute;
    bottom  : 0;
    left    : 0;
    height  : auto;
    width   : 100%;
}
@media screen and (max-width: 1287px) {
    footer .bloc_gray > div.w-2-3 {
        width: 100%!important;
    }
    footer .img-annuaire {
        position: relative;
    }
}
@media(max-width:991px) {
    footer .logo-footer {
        margin: 16px;
        width : 150px;
    }
    footer .logo-slogan,
    footer .logo-slogan > span {
        font-size: 17px;
    }
    footer li > a {
        padding: 4px 16px;
    }
}