:root {
    /* Footer */
    --couleur-footer: #333333;
    --hauteur-footer: 2;

    /* H4 */
    --taille-h4: 17px;
    --couleur-h4: #ffffff;
    --couleur-ligne-h4: #6d6b6c;

    /* Informations */
    --taille-infos: 16px;
    --couleur-infos: #bbb;
    ;
    --couleur-infos-hover: #ffffff
}

.container {
    max-width: 1170px;
    margin: auto;
}

.array {
    display: flex;

    /* Ne pas toucher, rend le pied de page responsive */
    flex-wrap: wrap;
}

/* Désactive le style des listes */
.array ul {
    list-style: none;
}

footer {
    background-color: var(--couleur-footer);
    padding: 60px 0;
    line-height: var(--hauteur-footer);
    position: static;
    bottom: 0;
    width: 100%;
}

/* Titre h4 */
.footer-col h4 {
    font-size: var(--taille-h4);
    color: var(--couleur-h4);
    margin-bottom: 25px;
    font-weight: 500;
}

/* Ligne en dessous de titre h4 */
.footer-col h4::after {
    content: "";
    display: block;
    padding-top: 10px;
    left: 0;
    border-bottom: 2px solid var(--couleur-ligne-h4);
    width: 50px;
}

.footer-col {
    width: 22%;
    padding: 0 15px;
}

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

/* Informations */
.footer-col ul li,
.footer-col a {
    display: block;
    font-size: var(--taille-infos);
    text-transform: capitalize;
    color: var(--couleur-infos);
    text-decoration: none;
    transition: 0.3s;
}

/* Informations hover */
.footer-col ul li a:hover {
    color: var(--couleur-infos-hover);
    padding-left: 8px;
}

.social-links a {
    display: bloc;
    color: #fff;
    height: 40px;
    width: 40px;
    background-color: rgba(255, 255, 255, 0.2);
    margin: 10px 10px;
    text-align: center;
    line-height: 40px;
    border-radius: 50%;
    transition: 0.3s;
}

.social-links a:hover {
    color: #24262b;
    background-color: #ffffff;
}

/* Responsive */
@media(min-width:768px) {
    #box-1 {
        box-sizing: content-box;
        width: 30%;
    }
}

@media(max-width: 767px) {
    .footer-col {
        width: 50%;
        margin-bottom: 30px;
    }
}

@media(max-width: 574px) {
    .footer-col {
        width: 100%;
    }
}

.phone::before {
    content: "02 51 3";
}

.phone::after {
    content: "0 82 82";
}