/* Footer
   ========================================================================== */
.footer__main {
    color: var(--mdr--pure-white);
    padding: var(--mdr--padding-horizontal);
    max-width: 1440px;
    margin: 0px auto;
    
    
    display: grid;
    grid-row-gap: 50px;
}
.footer__seo {
    font-size: 22px;
    line-height: 1.4em;
}
.footer__address {
    line-height: 1.17em;
}
.footer__socials {
    line-height: 1.17em;
    font-weight: 500;
}
.footer__copyright {
    align-self: flex-end;
    font-size: 14px;
    line-height: 40px;
    color: var(--mdr--pure-white--70);
}
@media screen and (min-width: 768px) {
    .footer__main {
        grid-template-areas: "logo ."
                             "seo  seo"
                             "addr sitemap"
                             "rs   copy";
        grid-row-gap: 40px;
        grid-column-gap: 40px;
        grid-template-columns: 1fr 1fr;
    }
    .footer__logo { grid-area: logo; }
    .footer__seo { grid-area: seo; }
    .footer__address { grid-area: addr; }
    .footer__sitemap { grid-area: sitemap; }
    .footer__socials { grid-area: rs; }
    .footer__copyright { grid-area: copy; justify-self: flex-end; }
}
@media screen and (min-width: 992px) {
    .footer__main {
        grid-template-areas: "logo .    .    ."
                             "seo  addr addr sitemap"
                             "rs   rs   copy copy";
        grid-template-columns: 40% 1fr 1fr 2fr;
    }
}

.footer__seo__ctas-container {
    display: flex;
    flex-flow: row wrap;
    gap: 16px 18px;
    margin-top: 28px;
}

.footer__logo {
    width: 120px;
    height: auto;
    object-fit: contain;
}
@media screen and (min-width: 768px) {
    .footer__logo {
        width: 200px;
    }
}

/* Section Addresse
   ========================================================================== */
.footer__address {
    display: flex;
    flex-flow: column nowrap;
    row-gap: 40px;
    line-height: 19px;
}
.footer__address strong {
    line-height: 25px;
    font-weight: 500;
    display: block;
}

@media screen and (min-width: 768px) {
    .footer__address {
        font-size: 14px;
    }
    .footer__address strong {
        font-size: 16px;
    }
    .footer__sitemap {
        font-size: 14px;
    }
}

/* Section Sitemap
   ========================================================================== */

.footer__sitemap__link {
    --arrow--width: 0.776em;
    --arrow--margin: 0.5em;
    --arrow--hr-space: calc(var(--arrow--margin) + var(--arrow--width));
    --transition: 0.3s ease 0s;
    
    color: var(--primary-color);
    
    display: inline-flex;
    flex-flow: row nowrap;
    align-items: center;
    position: relative;
    
    transition: transform var(--transition);
}
.footer__sitemap__link__label {
    transition: transform var(--transition);
}
.footer__sitemap__link::before,
.footer__sitemap__link::after {
    content: "";
    display: inline-block;
    pointer-events: none;
}
.footer__sitemap__link::after {
    width: var(--arrow--hr-space);
}
.footer__sitemap__link::before {
    width: var(--arrow--width);
    height: 0.795em;
    
    background-image: url('../images/svg/arrow-right--pure-white.svg');
    background-size: contain;
    background-repeat: no-repeat;
    
    transition: var(--transition);
    transition-property: transform opacity;
    position: absolute;
    padding-right: var(--arrow--margin);
    opacity: 0;
    transform: translateX(calc(-1 * var(--arrow--hr-space)));
}

.footer__sitemap__link:hover .footer__sitemap__link__label {
    transform: translateX(var(--arrow--hr-space));
}
.footer__sitemap__link:hover::before {
    opacity: 1;
    transform: translateX(0px);
}


/* Section Réseaux sociaux
   ========================================================================== */
.footer__socials {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    row-gap: 20px;
    column-gap: 27px;
    
    
}

.social-networks {
    display: flex;
    flex-flow: row wrap;
    gap: 18px;
}

.social-networks--footer {
    --border-color: var(--mdr--pure-white--30);
    --bgcolor: var(--mdr--eggplant-purple);
    --bgcolor--hovered: var(--mdr--pure-white);
}
.social-networks--footer .social-network-link:hover .social-network-icon {
    filter: brightness(0.13) sepia(1) hue-rotate(275deg) saturate(7);
}
.social-networks--contact {
    --border-color: var(--mdr--dark-grey--30);
    --bgcolor: var(--mdr--pure-white);
    --bgcolor--hovered: var(--mdr--dark-grey);
}
.social-networks--contact .social-network-icon {
    filter: brightness(0.11);
}
.social-networks--contact .social-network-link:hover .social-network-icon {
    filter: none;
}

.social-network-link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    box-sizing: border-box;
    border: 1px solid var(--border-color);
    border-radius: 50px;
    position: relative;
}

.social-network-link::before,
.social-network-link::after {
    content: "";
    position: absolute;
    inset: 0px;
    border-radius: 50px;
}
.social-network-link::before {
    background: var(--bgcolor--hovered);
    transform: scale(0);
    transition: transform 0.3s ease 0.3s;
    transform: scale(0);
}
.social-network-link::after {
    background: var(--bgcolor);
    transform: scale(0);
    transition: transform 0.3s ease 0s;
    transform: scale(1);
}
.social-network-link:hover .social-network-icon {
    scale: 1.2;
}
.social-network-link:hover::before {
    transition-delay: 0s;
    transform: scale(1);
}
.social-network-link:hover::after {
    transition: none;
    transform: scale(0);
}
.social-network-icon {
    position: relative;
    z-index: 1;
}

@media screen and (min-width: 768px) {
    .social-network-link {
        width: 45px;
        height: 45px;
        border-radius: 10px;
    }
    .social-network-link::before,
    .social-network-link::after {
        border-radius: 10px;
    }
}

/* Section Qualiopi
   ========================================================================== */
.footer__qualiopi {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: flex-start;
    row-gap: 10px;
    
    padding: 35px var(--mdr--padding-horizontal) 105px; /* = 89px (to match bottom-bar) + 16px */
    
    font-size: 14px;
    line-height: 1.4em;
    
}

.footer__qualiopi__img {
    width: 200px;
    height: auto;
    object-fit: contain;
}

.footer__qualiopi__text-container {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    row-gap: 10px;
}
.footer__qualiopi strong {
    font-weight: 700;
}

@media screen and (min-width: 768px) {
    .footer__qualiopi {
        flex-direction: row;
        justify-content: center;
        padding-top: 14px;
        padding-bottom: 134px; /* = 118px (to match bottom-bar) + 16px */
        column-gap: 37px;
    }
    .footer__qualiopi__text-container {
        align-items: flex-start;
        row-gap: 0px;
    }
}