footer {

    clear: both; position: relative; color: #fff; background-color: $color-gris-bleu; overflow: hidden;
    .container {
        position: relative; z-index: 2;
    }
    a, a:visited {
        color: #fff; text-decoration: none;
        &:hover { color: #fff; text-decoration: underline; }
    }
    
    nav {
        border-top: 1px solid $color-medium-grey; text-align: center;
    }
    ul {
        list-style-type: none; margin: 0; padding: 10px 0; width: 100%;
        @include media(">=sm") { display: flex; justify-content: center; padding: 0; }
    }
    li {
        display: inline-block;
        a {
            display: block; padding: 7px; transition: all 500ms ease-out; font-size: .85em; text-decoration: none;
            &:hover { background-color: rgba(255,255,255,0.35); text-decoration: none; }
        }
    }
    li:last-child, li.last {
        border-bottom: none;
    }

}

.logo-footer {
    margin: 0 auto; display: block; transition: all 1500ms ease-out; opacity: 0; transform: scale(.85) translateX(20px);
    @include media(">=lg") { padding-right: 20px; }
    &.inview {
        opacity: .1; transform: scale(1) translateX(0);
    }
}

#webmaster {
    display: none;
}
body[data-section-id="accueil"] #webmaster {
    display: block; color: rgba(255,255,255,0.7); text-align: right; padding: 5px 15px; border-top: 1px solid $color-medium-grey;
    @include media("<=sm") { text-align: center; }
    a, a:visited {
        color: rgba(255,255,255,0.7);
    }
}



.footer-diagonale-background {
    &::after {
        content: ""; width: 100% !important; height: 150%; background: url(/images/assets/triangle-blanc.svg) no-repeat right top; background-size: cover;
        position: absolute; left: 0; bottom: 0; z-index: 0; transform: translate(0, 130%); transition: all 2000ms cubic-bezier(.17, .67, .2, 1); opacity: 0;
    }
    &.inview::after {
        transform: translate(0, 30%); opacity: .05;
    }
}