/* =========================================================
   xdirecttchat
   Footer
   ========================================================= */


/* =========================================================
   Footer principal
   ========================================================= */

.site-footer {

    width:
        100%;

    margin-top:
        auto;

    background:
        var(--color-surface);

    border-top:
        1px solid var(--color-border);

    color:
        var(--color-text-secondary);
}


/* =========================================================
   Conteneur
   ========================================================= */

.footer-container {

    width:
        100%;

    max-width:
        var(--container-width);

    margin:
        0 auto;

    padding:
        42px 20px 20px;
}


/* =========================================================
   Partie principale
   ========================================================= */

.footer-main {

    display:
        grid;

    grid-template-columns:
        1.5fr
        1fr
        1fr
        1fr;

    gap:
        40px;

    padding-bottom:
        35px;
}


/* =========================================================
   Colonnes
   ========================================================= */

.footer-column {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    gap:
        7px;
}


.footer-column h3 {

    margin:
        0 0 8px;

    color:
        var(--color-text);

    font-size:
        14px;

    font-weight:
        700;

    line-height:
        1.3;
}


.footer-column a {

    color:
        var(--color-text-secondary);

    font-size:
        14px;

    line-height:
        1.5;
}


.footer-column a:hover {

    color:
        var(--color-primary);
}


/* =========================================================
   Identité
   ========================================================= */

.footer-brand {

    padding-right:
        20px;
}


.footer-logo {

    display:
        inline-flex;

    align-items:
        center;

    color:
        var(--color-primary);

    font-size:
        22px;

    font-weight:
        800;

    letter-spacing:
        -0.4px;

    line-height:
        1.2;
}


.footer-logo:hover {

    color:
        var(--color-primary-dark);
}


.footer-brand p {

    max-width:
        340px;

    margin:
        10px 0 0;

    color:
        var(--color-text-secondary);

    font-size:
        14px;

    line-height:
        1.7;
}


/* =========================================================
   Séparateur
   ========================================================= */

.footer-bottom {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    padding:
        18px 0 0;

    border-top:
        1px solid var(--color-border-light);

    color:
        var(--color-text-muted);

    font-size:
        12px;
}


/* =========================================================
   Responsive tablette
   ========================================================= */

@media (max-width: 900px) {

    .footer-main {

        grid-template-columns:
            1.5fr 1fr 1fr;

        gap:
            30px;
    }


    .footer-brand {

        grid-column:
            1 / -1;

        padding-right:
            0;
    }


    .footer-brand p {

        max-width:
            600px;
    }

}


/* =========================================================
   Responsive mobile
   ========================================================= */

@media (max-width: 600px) {

    .footer-container {

        padding:
            32px 16px 18px;
    }


    .footer-main {

        grid-template-columns:
            1fr 1fr;

        gap:
            28px 20px;

        padding-bottom:
            28px;
    }


    .footer-brand {

        grid-column:
            1 / -1;
    }


    .footer-column h3 {

        margin-bottom:
            6px;
    }


    .footer-bottom {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            3px;
    }

}


/* =========================================================
   Très petits écrans
   ========================================================= */

@media (max-width: 400px) {

    .footer-main {

        grid-template-columns:
            1fr;
    }


    .footer-column {

        width:
            100%;
    }

}