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

.footer{
    background:#111;
    color:#f1f1f1;
    padding:60px 0 0;
    font-size:15px;
    line-height:1.8;
}

/*=========================================================
= LTR / RTL
=========================================================*/

.footer[dir="ltr"]{
    direction:ltr;
    text-align:left;
}

.footer[dir="rtl"]{
    direction:rtl;
    text-align:right;
}

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

.footer-container{
    width:95%;
    max-width:1450px;
    margin:auto;

    display:grid;
    grid-template-columns:repeat(4,1fr);

    gap:50px;
}

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

.footer-column h3{

    position:relative;

    margin-bottom:25px;

    font-size:21px;
    font-weight:700;

    color:#fff;

}

.footer-column h3::after{

    content:"";

    position:absolute;

    bottom:-10px;

    width:55px;
    height:3px;

    background:#facc15;

    border-radius:30px;

}

.footer[dir="ltr"] .footer-column h3::after{
    left:0;
}

.footer[dir="rtl"] .footer-column h3::after{
    right:0;
}

/*=========================================================
= LISTES
=========================================================*/

.footer-column ul{

    margin:0;
    padding:0;

    list-style:none;

}

.footer-column ul li{

    margin-bottom:12px;

}

.footer-column ul li:last-child{

    margin-bottom:0;

}

.footer-column ul li a{

    color:#d9d9d9;

    text-decoration:none;

    transition:.30s ease;

}

.footer-column ul li a:hover{

    color:#facc15;

}

.footer[dir="ltr"] .footer-column ul li a:hover{

    padding-left:6px;

}

.footer[dir="rtl"] .footer-column ul li a:hover{

    padding-right:6px;

}

/*=========================================================
= NEWSLETTER
=========================================================*/

.footer-newsletter p{

    color:#bdbdbd;

    margin-bottom:20px;

}

.newsletter-form{

    display:flex;

    gap:10px;

}

.footer[dir="rtl"] .newsletter-form{

    flex-direction:row-reverse;

}

.newsletter-form input{

    flex:1;

    height:48px;

    border:none;

    outline:none;

    border-radius:6px;

    padding:0 15px;

    font-size:15px;

}

.footer[dir="rtl"] .newsletter-form input{

    text-align:right;

}

.newsletter-form button{

    height:48px;

    padding:0 22px;

    border:none;

    border-radius:6px;

    background:#facc15;

    color:#111;

    font-weight:600;

    cursor:pointer;

    transition:.30s;

}

.newsletter-form button:hover{

    background:#eab308;

}

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

.footer-social{

    display:flex;

    align-items:center;

    gap:16px;

    margin-top:25px;

}

.footer[dir="rtl"] .footer-social{

    justify-content:flex-start;

}

.footer-social a{

    color:#ffffff;

    font-size:20px;

    transition:.30s;

}

.footer-social a:hover{

    color:#facc15;

    transform:translateY(-3px);

}

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

.footer-bottom{

    margin-top:60px;

    padding:22px;

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

    text-align:center;

    color:#a8a8a8;

    font-size:14px;

}

/*=========================================================
= TABLETTE
=========================================================*/

@media (max-width:1100px){

    .footer-container{

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

        gap:40px;

    }

}

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

@media (max-width:768px){

    .footer{

        padding-top:45px;

    }

    .footer-container{

        grid-template-columns:1fr;

        gap:35px;

    }

    .newsletter-form{

        flex-direction:column;

    }

    .footer[dir="rtl"] .newsletter-form{

        flex-direction:column;

    }

    .newsletter-form button{

        width:100%;

    }

    .footer-social{

        justify-content:center;

    }

    .footer-column{

        text-align:center;

    }

    .footer-column h3::after{

        left:50% !important;
        right:auto !important;

        transform:translateX(-50%);

    }

}