/* =========================================================
   BNI GESTION - FOOTER
   ========================================================= */

:root {
    --footer-green: #247d47;
    --footer-green-dark: #1c6d3d;

    --footer-orange: #f5a623;

    --footer-white: #ffffff;

    --footer-text: rgba(255, 255, 255, 0.92);
    --footer-muted: rgba(255, 255, 255, 0.72);

    --footer-border: rgba(255, 255, 255, 0.25);

    --footer-container: 1640px;
}


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

.site-footer {
    width: 100%;

    background:
        linear-gradient(
            135deg,
            var(--footer-green) 0%,
            #247c46 50%,
            var(--footer-green-dark) 100%
        );

    color: var(--footer-white);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    position: relative;

    overflow: hidden;
}


/*
   Petit effet lumineux très discret
*/

.site-footer::before {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    top: -300px;
    right: -180px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.025);

    pointer-events: none;
}


/* =========================================================
   CONTAINER PRINCIPAL
   ========================================================= */

.footer-container {
    width: 100%;

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

    margin: 0 auto;

    padding:
        75px
        45px
        70px;

    display: grid;

    grid-template-columns:
        minmax(300px, 1.25fr)
        minmax(180px, 0.9fr)
        minmax(400px, 1.4fr);

    column-gap: 100px;
}


/* =========================================================
   COLONNE ENTREPRISE
   ========================================================= */

.footer-company {
    display: flex;

    flex-direction: column;

    align-items: flex-start;
}


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

.footer-logo {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    color: var(--footer-white);

    width: max-content;
}


/* Icône */

.footer-logo-icon {
    width: 27px;
    height: 27px;

    display: grid;

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

    gap: 2px;
}

.footer-logo-icon span {
    display: block;

    background: var(--footer-white);
}


/* Texte logo */

.footer-logo-content {
    display: flex;

    flex-direction: column;

    line-height: 1;
}

.footer-logo-content strong {
    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 29px;

    font-weight: 700;

    letter-spacing: -0.8px;
}

.footer-logo-content small {
    margin-top: 5px;

    font-family: Arial, sans-serif;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.15px;

    text-align: center;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.footer-description {
    max-width: 470px;

    margin:
        30px
        0
        42px;

    color: var(--footer-text);

    font-size: 15px;

    line-height: 1.6;

    font-weight: 400;
}


/* =========================================================
   RESEAUX SOCIAUX
   ========================================================= */

.footer-socials {
    display: flex;

    align-items: center;

    gap: 12px;
}


.social-link {
    width: 39px;
    height: 39px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: rgba(255, 255, 255, 0.10);

    border-radius: 7px;

    color: var(--footer-white);

    transition:
        background-color 0.3s ease,
        transform 0.3s ease;
}


.social-link:hover {
    background: var(--footer-orange);

    transform: translateY(-3px);
}


.social-link svg {
    width: 19px;
    height: 19px;

    fill: currentColor;
}


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

.footer-column {
    display: flex;

    flex-direction: column;
}


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

.footer-title {
    margin:
        0
        0
        23px;

    color: #ff8d00;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 25px;

    line-height: 1.2;

    font-weight: 700;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.footer-navigation {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 13px;
}


.footer-navigation a {
    position: relative;

    color: var(--footer-white);

    font-size: 16px;

    line-height: 1.25;

    font-weight: 400;

    transition:
        color 0.25s ease,
        padding-left 0.25s ease;
}


.footer-navigation a::before {
    content: "";

    position: absolute;

    left: -15px;
    top: 50%;

    width: 0;
    height: 2px;

    transform: translateY(-50%);

    background: var(--footer-orange);

    transition: width 0.25s ease;
}


.footer-navigation a:hover {
    color: #FFB80F;

    padding-left: 5px;
}


.footer-navigation a:hover::before {
    width: 8px;
}


/* =========================================================
   CONTACT
   ========================================================= */

.footer-contact-list {
    display: flex;

    flex-direction: column;

    gap: 19px;
}


.footer-contact-item {
    display: grid;

    grid-template-columns: 27px 1fr;

    align-items: flex-start;

    column-gap: 13px;
}


.contact-icon {
    width: 27px;
    height: 27px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffd27b;
}


.contact-icon svg {
    width: 25px;
    height: 25px;

    fill: currentColor;
}



.footer-contact-item p,
.footer-contact-item a {
    margin: 0;
    color: var(--footer-text);
    font-size: 16px;
    line-height: 1.55;
    font-weight: 400;
    margin-left: 20px !important;
}


.footer-contact-item strong {
    font-weight: 500;
}


.footer-contact-item a {
    text-decoration: none;

    transition:
        color 0.25s ease;
}


.footer-contact-item a:hover {
    color: #ffd27b;
}


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

.footer-bottom {
    width: 100%;
}


.footer-bottom-container {
    width: calc(100% - 90px);

    max-width: 1675px;

    margin: 0 auto;

    padding:
        27px
        25px
        42px;

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

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;
}


/* Copyright */

.copyright,
.designer {
    margin: 0;

    color: var(--footer-white);

    font-size: 14px;

    line-height: 1.5;
}


.designer {
    text-align: right;
}


.designer a {
    color: #ffd27b;

    text-decoration: none;

    transition: color 0.25s ease;
}


.designer a:hover {
    color: var(--footer-white);
}

.foot-space-number{
    height: 45px;
    display: flex;
    align-items: center;
}

/* =========================================================
   RESPONSIVE 1400px
   ========================================================= */

@media (max-width: 1400px) {

    .footer-container {
        column-gap: 60px;

        padding-left: 40px;
        padding-right: 40px;
    }

    .footer-description {
        font-size: 17px;
    }

    .footer-title {
        font-size: 27px;
    }

    .footer-navigation a,
    .footer-contact-item p,
    .footer-contact-item a {
        font-size: 17px;
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991px) {

    .footer-container {

        padding:
            60px
            30px
            50px;

        grid-template-columns:
            1fr
            1fr;

        column-gap: 50px;

        row-gap: 55px;
    }


    .footer-company {
        grid-column: 1 / -1;

        max-width: 600px;
    }


    .footer-description {
        margin:
            25px
            0
            30px;

        font-size: 17px;
    }


    .footer-contact-column {
        grid-column: 2;
    }


    .footer-links-column {
        grid-column: 1;
    }


    .footer-title {
        font-size: 25px;
    }


    .footer-navigation a,
    .footer-contact-item p,
    .footer-contact-item a {
        font-size: 17px;
    }


    .footer-bottom-container {
        width: calc(100% - 60px);

        padding:
            25px
            0
            30px;
    }

}


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

@media (max-width: 767px) {

    .site-footer {
        text-align: left;
    }


    .footer-container {

        padding:
            55px
            24px
            45px;

        display: flex;

        flex-direction: column;

        gap: 45px;
    }


    /* -----------------------------------------------
       COMPANY
    ------------------------------------------------ */

    .footer-company {
        width: 100%;

        max-width: none;
    }


    .footer-logo-content strong {
        font-size: 25px;
    }


    .footer-logo-content small {
        font-size: 8px;
    }


    .footer-description {
        max-width: 100%;

        margin:
            24px
            0
            28px;

        font-size: 16px;

        line-height: 1.65;
    }


    /* -----------------------------------------------
       COLUMNS
    ------------------------------------------------ */

    .footer-links-column,
    .footer-contact-column {
        width: 100%;
    }


    .footer-title {
        position: relative;

        margin-bottom: 20px;

        padding-bottom: 13px;

        font-size: 24px;
    }


    /*
       Petite ligne orange sous les titres
    */

    .footer-title::after {
        content: "";

        position: absolute;

        left: 0;
        bottom: 0;

        width: 38px;
        height: 3px;

        background: var(--footer-orange);
    }


    .footer-navigation {
        gap: 0;
    }


    .footer-navigation a {
        width: 100%;

        padding:
            12px
            0;

        border-bottom:
            1px solid
            rgba(255,255,255,0.10);

        font-size: 16px;
    }


    .footer-navigation a::before {
        display: none;
    }


    .footer-navigation a:hover {
        padding-left: 5px;
    }


    /* -----------------------------------------------
       CONTACT
    ------------------------------------------------ */

    .footer-contact-list {
        gap: 22px;
    }


    .footer-contact-item {
        grid-template-columns: 29px 1fr;

        column-gap: 12px;
    }


    .footer-contact-item p,
    .footer-contact-item a {
        font-size: 15px;

        line-height: 1.6;
    }


    /* -----------------------------------------------
       BOTTOM
    ------------------------------------------------ */

    .footer-bottom-container {

        width: calc(100% - 48px);

        padding:
            23px
            0
            28px;

        display: flex;

        flex-direction: column;

        align-items: flex-start;

        gap: 10px;
    }


    .copyright,
    .designer {
        font-size: 12px;

        text-align: left;
    }

}


/* =========================================================
   PETITS TELEPHONES
   ========================================================= */

@media (max-width: 400px) {

    .footer-container {
        padding-left: 18px;
        padding-right: 18px;
    }


    .footer-bottom-container {
        width: calc(100% - 36px);
    }


    .footer-logo-content strong {
        font-size: 22px;
    }


    .footer-description {
        font-size: 15px;
    }


    .footer-title {
        font-size: 22px;
    }


    .footer-navigation a {
        font-size: 15px;
    }


    .footer-contact-item p,
    .footer-contact-item a {
        font-size: 14px;
    }

}


/* =========================================================
   ACCESSIBILITE
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .site-footer *,
    .site-footer *::before,
    .site-footer *::after {
        transition: none !important;
    }

}