/*
 * Footer de l'app : reprise a l'identique du footer du site vitrine
 * (gabarit Elementor 33 de collab-coworking.fr), qui fait reference.
 * Points de rupture Elementor : tablette <= 1024px, mobile <= 767px.
 */

/* Vague : meme forme, meme sens et memes hauteurs que le separateur
   du WP (80 / 40 / 20 px), forme pivotee de 180 degres comme Elementor. */
.footer-wave {
    position: relative;
    height: 80px;
    overflow: hidden;
    line-height: 0;
}

.footer-wave svg {
    position: absolute;
    bottom: 0;
    left: 50%;
    display: block;
    width: calc(100% + 1.3px);
    height: 100%;
    transform: translateX(-50%) rotate(180deg);
}

.footer-wave-fill {
    fill: var(--primary);
}

.footer-container {
    background-color: var(--primary);
    color: var(--white-color);
    padding: 100px 40px;
}

.footer-inner {
    display: flex;
    flex-direction: column;
    gap: 40px;
    max-width: 1300px;
    margin: 0 auto;
    font-family: "neulis-sans", sans-serif;
    font-size: 17px;
    font-weight: 400;
    line-height: 19px;
}

.footer a {
    color: var(--white-color);
    text-decoration: none;
}

.footer a:hover,
.footer a:focus-visible {
    text-decoration: underline;
}

.footer p {
    margin: 0;
}

/* Yeux, accroche et reseaux sociaux */
.footer-social {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
}

.footer .yeux-footer {
    display: block;
    width: 100px;
    height: 41px;
}

.footer-social-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 40px;
}

.footer-social-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 19px;
    font-weight: 600;
    line-height: 19px;
}

.footer-social-link span {
    padding-left: 5px;
}

.footer-social-link i {
    width: 38px;
    font-size: 30px;
    line-height: 30px;
    text-align: center;
}

/* Colonnes */
.footer-columns {
    display: flex;
    justify-content: space-between;
    gap: 80px;
}

.footer-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.footer-title {
    margin: 0;
    font-family: "neulis-cursive", sans-serif;
    font-size: 28px;
    font-weight: 500;
    line-height: 34px;
    color: var(--white-color);
}

/* Hauteur de ligne 20,5px = pas de 30,5px entre les lignes, comme la liste d'icones Elementor du WP. */
.footer-contact {
    display: inline-flex;
    align-items: center;
    line-height: 20.5px;
}

.footer-contact i {
    flex: 0 0 30px;
    font-size: 20px;
    line-height: 20.5px;
}

/* Moyens de paiement acceptes : logos monochromes (currentColor = blanc). */
.footer-payment {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.footer-payment-title {
    font-size: 14px;
    line-height: 19px;
}

.payment-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px 24px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--white-color);
}

.payment-logos-item svg {
    display: block;
}

/* Mentions */
.footer-legal {
    font-size: 14px;
    line-height: 19px;
    text-align: center;
}

/* Tablette */
@media (max-width: 1024px) {
    .footer-wave {
        height: 40px;
    }

    .footer-container {
        padding: 80px 40px;
    }

    .footer .yeux-footer {
        width: 90px;
        height: 37px;
    }

    .footer-columns {
        flex-direction: column;
        align-items: center;
        gap: 20px;
        text-align: center;
    }

    .footer-column {
        align-items: center;
    }

    .footer-column-contact {
        margin-top: 10px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .footer-wave {
        height: 20px;
    }

    .footer-container {
        padding: 60px 20px;
    }

    .footer-columns {
        margin-top: -20px;
        gap: 30px;
    }

    .footer-title {
        font-size: 26px;
        line-height: 30px;
    }

    /* 6 logos : 2 lignes de 3 plutot que 5 + 1 orphelin */
    .payment-logos {
        display: grid;
        grid-template-columns: repeat(3, auto);
        justify-content: center;
        justify-items: center;
    }
}