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

.site-footer{

    background:
    linear-gradient(
        135deg,
        #003E7E,
        #002d5c
    );

    color:white;

    margin-top:0;
}

.footer-grid{

    display:grid;

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

    gap:50px;

    padding:80px 0 50px;
}

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

.footer-col h3{

    font-size:20px;

    margin-bottom:20px;

    position:relative;
}

.footer-col h3::after{

    content:'';

    display:block;

    width:50px;
    height:3px;

    background:#E30613;

    margin-top:10px;
}

.footer-col p{

    color:rgba(255,255,255,.8);

    line-height:1.8;
}

.footer-col ul{

    list-style:none;
}

.footer-col li{

    margin-bottom:12px;
}

.footer-col a{

    color:rgba(255,255,255,.85);

    transition:.3s;
}

.footer-col a:hover{

    color:#E30613;
    padding-left:5px;
}

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

.footer-logo{

    max-width:220px;

    margin-bottom:20px;
}

/* =========================
   RÉSEAUX SOCIAUX
========================= */

.footer-social{

    display:flex;

    gap:15px;

    margin-top:20px;
}

.footer-social a{

    width:45px;
    height:45px;

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

    background:rgba(255,255,255,.1);

    border-radius:50%;

    transition:.3s;
}

.footer-social a:hover{

    background:#E30613;

    transform:translateY(-3px);
}

/* =========================
   COPYRIGHT
========================= */

.footer-bottom{

    border-top:
    1px solid rgba(255,255,255,.1);

    padding:25px 0;

    text-align:center;

    color:rgba(255,255,255,.7);

    font-size:14px;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:992px){

    .footer-grid{

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

@media(max-width:768px){

    .footer-grid{

        grid-template-columns:1fr;

        gap:40px;

        text-align:center;
    }

    .footer-col h3::after{

        margin-left:auto;
        margin-right:auto;
    }

    .footer-social{

        justify-content:center;
    }

    .footer-logo{

        margin-left:auto;
        margin-right:auto;
    }
}