/*Valeurs root*/

/*Déterminer tous les grid*/

.container__topfooter, .footer__nav ul li ul li, .container__bottomfooter h3{
    display: inline-grid;
    
}

/*Classe de container & wrapper */

.wrapper__footer{
   max-width: 100%;
}

.container__footer{
    margin-top: 5em;
    justify-content: center;
	padding: 5rem 0;
    background-color: rgba(var(--blue-color), 0.05);
    font-family: var(--font-trueno);
}

/*Définir les éléments du haut de footer*/


.container__topfooter{
    width: 85vw;
    gap: 3rem;
    /*width: 71.25em;*/
    grid-template-columns: 1fr 1fr 1fr 1fr;
}
/*Définir toutes les informations de la nav*/

.footer__navdescription, .footer__nav a, .copyright__title{
    font-weight: 200;
} 

.footer__navdescription{
    width: 100%;
    max-width: 70vw;
    overflow: hidden;
    font-size: .875rem;
    color: rgba(var(--grey-color), .5);
}

.footer__navtitle{
    font-weight: 600;
    text-transform: uppercase;
}

.footer__nav a{
    text-decoration: none;
    color: rgba(var(--grey-color), .5);
}


/*Réseaux sociaux*/
.footer__nav ul li ul{
    gap: .5rem;
}


/*Définir les éléments du haut de footer*/



/*Définir les éléments du bas de footer donc copyright*/

.container__bottomfooter{
    border-top: 1px solid rgba(var(--grey-color), .2);
}

.container__bottomfooter h3{
    justify-content: space-between;
}

.copyright__title{
    font-size: var(--small-font-size);
    color: rgba(var(--grey-color), .5);
}


/*Définir les breakpoints*/

/* Medium devices such as tablets (860 and down) */
@media only screen and (max-width: 71.25rem) {

    .container__topfooter{
        /*width: 71.25em;*/
        grid-template-columns: 100%;
        
    }

}

/* Large devices such as laptops (1140px and down) */
@media only screen and (min-width: 71.25rem) {

    .container__topfooter{
        /*width: 71.25em;*/
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }


}