footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    background: var(--background1);
    height: var(--footer-height);
    padding: var(--padding);
    box-sizing: border-box;
    margin-top: 40px;

    #footer-link-container {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 100%;

        #footer-social-network-box {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin-bottom: 30px;
        }

        h3 {
            text-transform: uppercase;
            background-image: linear-gradient(var(--silver3) 0%, var(--silver1) 15%, var(--silver2) 40%, var(--silver3) 50%, var(--silver1)65%);
            font-size: 1.3rem;
            color: transparent;
            background-clip: text;
        }


        #footer-social-network-box {

            ul {
                display: flex;
                justify-content: space-between;
                align-items: center;
                height: 100px;
                width: 210px;

                li {
                    a {
                        display: block;
                        position: relative;
                        width: 84px;
                    }

                    img {
                        position: absolute;
                        top: -40px;
                        transition: 0.5s;
                        width: 84px;
                    }

                    img:hover {
                        opacity: 0;
                        transition: 0.5s;
                    }
                }
            }
        }

        #footer-other-link-box {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            margin-bottom: 30px;

            li {
                padding: 3px;

                a {
                    background-image: linear-gradient(var(--silver3) 0%, var(--silver1) 15%, var(--silver2) 40%, var(--silver3) 50%, var(--silver1)65%);
                    color: transparent;
                    background-clip: text;
                }

                a:hover {
                    background-image: linear-gradient(var(--gold3) 0%, var(--gold1) 15%, var(--gold2) 40%, var(--gold3) 50%, var(--gold1)65%);
                    color: transparent;
                    background-clip: text;
                }
            }
        }
    }

    #copyright {
        background-image: linear-gradient(var(--silver3) 0%, var(--silver1) 15%, var(--silver2) 40%, var(--silver3) 50%, var(--silver1)65%);
        color: transparent;
        background-clip: text;
        margin-bottom: 40px;
    }
}


/* 📱 Mobile large (481px et plus) */
@media (min-width: 481px) {}

/* 📲 Tablettes (768px et plus) */
@media (min-width: 768px) {}

/* 💻 Ordinateurs portables (1025px et plus) */
@media (min-width: 1025px) {

    footer {
        #footer-link-container {
            flex-direction: row;
            width: 80%;

            #footer-social-network-box {
                ul {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    height: 100px;
                    width: 174px;
                }
            }

            #footer-other-link-box {
                justify-content: start;
                align-items: start;
                text-align: start;

                li {
                    margin-left: 24px;
                }
            }
        }

    }

}

/* 🖥 Grands écrans (1367px et plus) */
@media (min-width: 1367px) {}

/* 🖥📺 Ultra-large (1920px et plus) — optionnel */
@media (min-width: 1920px) {}