/*==================================================
                    FOOTER
==================================================*/

body{
    font-family:"Satoshi", sans-serif;
}


/*==================================================
                CONTENEUR FOOTER
==================================================*/

.footer-clean{

    width:100%;

    padding:0px 0 25px;

    background:#FFFFFF;

    color:#114051;

    box-sizing:border-box;

}


/*==================================================
                    COLONNES
==================================================*/

.footer-container{

    width:90%;
    max-width:1300px;

    margin:0 auto;

    display:grid;

    grid-template-columns:repeat(4, 1fr);

    gap:50px;

    align-items:start;

}


/* Chaque colonne */

.footer-clean .item{

    width:100%;

    min-width:0;

}


/*==================================================
                    TITRES
==================================================*/

.footer-clean h3{

    margin:0 0 18px;

    font-size:18px;

    font-weight:400;

    color:#114051;

}


/*==================================================
                    LOGO
==================================================*/

.footer-logo{

    display:inline-block;

    color:#114051;

    text-decoration:none;

    font-size:22px;

    font-weight:600;

    transition:.3s;

}


.footer-logo:hover{

    color:#5BBC82;

}


/*==================================================
                    LISTES
==================================================*/

.footer-clean ul{

    list-style:none;

    padding:0;

    margin:0;

}


.footer-clean ul li{

    margin-bottom:10px;

    font-size:15px;

    line-height:1.6;

    color:#5E6E74;

}


/*==================================================
                    LIENS
==================================================*/

.footer-clean ul li a{

    display:inline-block;

    text-decoration:none;

    color:#5E6E74;

    transition:color .3s, transform .3s;

}


.footer-clean ul li a:hover{

    color:#5BBC82;

    transform:translateX(5px);

}


/*==================================================
                SÉPARATEUR
==================================================*/

.footer-divider{
    width:100%;
    max-width:1800px;

    height:1px;

    margin:0px auto;

    background:#000000;
}


/*==================================================
                RÉSEAUX SOCIAUX
==================================================*/

.footer-social{

    width:90%;
    max-width:1300px;

    margin:35px auto 0;

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    align-items:center;

    gap:15px;

}


.footer-social a{

    width:45px;
    height:45px;

    flex:0 0 45px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:#FFFFFF;

    color:#114051;

    border:2px solid #114051;

    font-size:18px;

    text-decoration:none;

    transition:.3s;

}


.footer-social a:hover{

    background:#114051;

    color:#FFFFFF;

    transform:translateY(-4px);

    box-shadow:0 10px 20px rgba(17,64,81,.15);

}


/* Copyright */

.footer-social .copyright{

    flex-basis:100%;

    width:100%;

    margin-top:15px;

    text-align:center;

    color:#5E6E74;

    font-size:14px;

    line-height:1.6;

}


/*==================================================
            TABLETTE LARGE
            769px - 1100px
==================================================*/

@media(max-width:1100px){

    .footer-clean{

        padding:0px 0 25px;

    }


    .footer-container{

        width:88%;

        grid-template-columns:repeat(2, 1fr);

        column-gap:60px;

        row-gap:40px;

    }


    .footer-clean .item{

        min-width:0;

    }


    .footer-divider{

        width:100%;

        margin:0 auto;

    }


    .footer-social{

        width:88%;

        margin-top:30px;

    }

}


/*==================================================
                    TABLETTE
==================================================*/

@media(max-width:768px){

    .footer-clean{

        padding:0px 0 20px;

    }


    .footer-container{

        width:90%;

        grid-template-columns:repeat(2, minmax(0, 1fr));

        gap:35px 25px;

    }


    .footer-clean h3{

        font-size:17px;

        margin-bottom:14px;

    }


    .footer-clean ul li{

        font-size:14px;

        margin-bottom:9px;

    }


    .footer-logo{

        font-size:20px;

    }


    .footer-divider{

        width:100%;

        margin:0 auto;

    }


    .footer-social{

        width:90%;

        margin-top:30px;

        gap:12px;

    }


    .footer-social a{

        width:42px;

        height:42px;

        flex-basis:42px;

        font-size:17px;

    }


    .footer-social .copyright{

        font-size:13px;

    }

}


/*==================================================
                    MOBILE
==================================================*/

@media(max-width:576px){

    .footer-clean{

        padding:0px 0 20px;

    }


    .footer-container{

        width:88%;

        grid-template-columns:1fr;

        gap:30px;

        text-align:center;

    }


    .footer-clean .item{

        width:100%;

    }


    .footer-clean h3{

        font-size:17px;

        margin-bottom:12px;

    }


    .footer-clean ul li{

        font-size:14px;

    }


    /* Pas de déplacement horizontal au hover mobile */

    .footer-clean ul li a:hover{

        transform:none;

    }


    .footer-divider{

        width:100%;

        margin:0 auto;

    }


    .footer-social{

        width:88%;

        margin-top:25px;

        gap:12px;

    }


    .footer-social a{

        width:40px;

        height:40px;

        flex:0 0 40px;

        font-size:16px;

    }


    .footer-social .copyright{

        margin-top:12px;

        padding:0 10px;

        font-size:13px;

    }

}


/*==================================================
                PETIT MOBILE
==================================================*/

@media(max-width:380px){

    .footer-container{

        width:92%;

    }


    .footer-clean h3{

        font-size:16px;

    }


    .footer-clean ul li{

        font-size:13px;

    }


    .footer-social{

        width:92%;

        gap:10px;

    }


    .footer-social a{

        width:38px;

        height:38px;

        flex-basis:38px;

        font-size:15px;

    }


    .footer-social .copyright{

        font-size:12px;

    }

        .footer-divider{

        width:100%;

        margin:0 auto;

    }

}