.footer{
    background-color:var(--black);
}

#footer {
	position: relative;
	z-index:1;
}

/* footer avec contacts et encarts spotify */
.upper-footer{
    border-top:1px solid var(--argent);
    border-bottom:1px solid var(--argent);
    padding: 30px 50px;
    display:flex;
    justify-content: space-between;
    & .logo{
        display:flex;
        justify-content: start;
        align-items: end;
        width: 50%;
        gap:20px;
        & img{
            max-width:none;
        }
    }
    & .modal-socials{
        margin-top:30px;
        justify-content: start;
    }
    
}

.footer-contact{
    & h2{
        font-family:'AmaranthBold';
        font-size:2.5rem;
        margin:0 0 20px 0;
    }
    & h3{
        font-family:'AmaranthRegular';
        font-size:0.8rem;
        text-transform:uppercase;
        line-height: 1.4;
        margin:0;
    }
    & p{
        font-size:0.8rem;
        text-transform:uppercase; 
        padding:0;
        margin:0;
        line-height:1.2;
    }
    & hr{
        width:70%;
        border: 0.5px solid var(--argent);
        margin: 20px 0;
    }
}


/* logos et copyright */
.bottom-footer{
    display:flex;
    justify-content: space-between;
    padding:15px 50px 7px 50px;
    & .footer-logos{
        display: flex;
        justify-content: start;
        align-items: start;
        gap:10px;
        width:30%;
        & img{
            width:100px;
        }
        & #tph{
            filter: invert(1);
            height: 40px;
            object-fit: cover;
            width: 60px;
        }
        & #sortilege-logo{
            width: 120px;
        }
    }
    & .footer-copyright{
        width:70%;
        display:flex;
        justify-content: flex-end;
        align-items: center;
        gap:30px;
        & p{
            font-size:0.7rem;
            text-transform:uppercase; 
            padding:0;
            margin:0;
            line-height:1.4;
            text-align:right;
        }
    }
}


/* -------------------------------------
-------------- responsive --------------
------------------------------------- */

@media screen and (max-width:1024px){
    #spotify-album{
        display:none;
    }
    .upper-footer{
        gap: 30px;
    }

    .bottom-footer{
    gap: 10px;
        flex-direction: column;
          & .footer-logos {
            justify-content: space-around;
            width: 100%;
        }
         & .footer-copyright {
            width: 100%;
            justify-content: center;
            gap: 20px;
            }
        }
}


@media screen and (max-width:992px){
    .upper-footer {
    & .logo {
        width: 50%;
        & img{
            max-width:180px;
        }
    }
    }

    .bottom-footer{
    & .footer-copyright{
        & p{
            font-size:0.6rem;
        }
    }
    }
}

@media screen and (max-width:768px){
    .upper-footer{
    padding: 20px 30px;
    flex-direction: column-reverse;
    justify-content: start;
    gap:0;
    & .modal-socials {
        margin-top: 30px;
        justify-content: start;
        margin-bottom: 0;
    }
    & .logo{
        justify-content: end;
        align-items:end;
        width: 100%;
        margin-top: 5px;
        margin-bottom: 20px;
        & img{
            max-width:none;
        }
    }   
    }

    .bottom-footer{
    padding:10px 30px;
    & .footer-logos{
        justify-content: start;
        align-items: center;
        gap:20px;
        & img{
            width:80px;
        }
        & #tph{
            width: 40px;
            height: 50px;
        }
    }
    & .footer-copyright{
        justify-content: start;
        & p{
            text-align:left;
        }
    }
}
}


@media screen and (max-width:576px){
    .footer-contact{
    & h2{
        font-size:2rem;
    }
    & h3{
        font-size:0.7rem;
    }
    & p{
        font-size:0.7rem;
    }
    & hr{
        width:100%;
        border: 0.5px solid var(--argent);
        margin: 20px 0;
    }
}
}




#back-to-top-mobile, #back-to-top{
    display:none;
}