.footer {
    background-color: rgb(30, 16, 34) !important;
    color: white;
    padding: 20px 0;
    width: 100%;
    margin-top: 10vh;
}

#socialMedia a i{
    color: white;
}



.footer-links-container {
    display: flex;
    justify-content: center;
    width: 100%;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}

.footer-links li a {
    color: white;
    text-decoration: none;;
}

/*CSS Tablette mode portrait*/

@media (min-width: 576px) and (max-width:767px){

    .footer-content{
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        width: 100%;
        margin: auto;
    }

    #socialMedia {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-bottom: 10px;
        order: 1;
    }

    #socialMedia a{
        padding: 5px;
    }

    .footer-logo{
        max-width: 150px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 20px;
        display: block;
        order: 2;
    }

    .footer-links-container{
        display: flex;
        order: 3;
    }

     .footer-links {
        padding: 0;
        list-style: none; 
        margin: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
    }

    .footer-links li {
        margin-bottom: 10px;
    }

    .footer-links li a {
        font-size: 14px; 
        text-decoration: none; 
    }     

}



/*CSS Tablette mode paysage*/

@media (min-width: 768px) and (max-width: 1199px) {

    .footer-content{
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        width: 100%;
        margin: auto;
    }

    #socialMedia {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-bottom: 10px;
        order: 1;
    }

    #socialMedia a{
        padding: 5px;
    }

    .footer-logo{
        max-width: 150px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 20px;
        display: block;
        order: 2;
    }

    .footer-links-container{
        display: flex;
        order: 3;
    }

     .footer-links {
        padding: 0;
        list-style: none; 
        margin: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
    }

    .footer-links li {
        margin-bottom: 10px;
    }

    .footer-links li a {
        font-size: 14px; 
        text-decoration: none; 
    }       

      

}



/*CSS Ordinateur 1200 à 1400*/

@media (min-width: 1200px) and (max-width:1400px){

    .footer-links li a {
        font-size: 14px;
    }

    .footer-links {
        gap: 20px;
    }

    .footer-content {
        display: flex;
        align-items: center; 
        justify-content: space-between; 
        width: 90%;
        max-width: 1200px;
        margin: 0 auto; 
    }

    .footer-logo {
        max-width: 250px;
        position: absolute;
        left: 20px;
        transform: translateY(-30%);
    }
    

}



/*CSS Ordinateur*/

@media (min-width: 1400px) and (max-width:1850px){

    .footer-links li a {
        font-size: 14px;
    }

    .footer-links {
        gap: 20px;
    }

    .footer-content {
        display: flex;
        align-items: center; 
        justify-content: space-between; 
        width: 90%;
        max-width: 1200px;
        margin: 0 auto; 
    }

    .footer-logo {
        max-width: 250px;
        position: absolute;
        left: 20px;
        transform: translateY(-30%);
    }

}



/*CSS grand Ordinateur*/

@media (min-width: 1850px){



    .footer-links li a {
        font-size: 14px;
    }

    .footer-links {
        gap: 20px;
    }

    .footer-content {
        display: flex;
        align-items: center; 
        justify-content: space-between; 
        width: 90%;
        max-width: 1200px;
        margin: 0 auto; 
    }

    .footer-logo {
        max-width: 250px;
        position: absolute;
        left: 20px;
        transform: translateY(-30%);
    }

    

    

}

/*CSS mode téléphone*/
@media (max-width: 575.98px){

    .footer-content{
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        width: 100%;
        margin: auto;
    }

    #socialMedia {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-bottom: 10px;
        order: 1;
    }

    #socialMedia a{
        padding: 5px;
    }

    .footer-logo{
        max-width: 150px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 20px;
        display: block;
        order: 2;
    }

    .footer-links-container{
        display: flex;
        order: 3;
    }

     .footer-links {
        padding: 0;
        list-style: none; 
        margin: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
    }

    .footer-links li {
        margin-bottom: 10px;
    }

    .footer-links li a {
        font-size: 14px; 
        text-decoration: none; 
    }
}