/* ==========================================================
   CREDIT EXPRESS 24H BLOG
   Feuille de style principale
========================================================== */

/* ===========================
   VARIABLES
=========================== */

:root{

    --primary:#0056b3;
    --secondary:#0d6efd;
    --warning:#ffc107;
    --success:#198754;
    --dark:#212529;
    --light:#f8f9fa;
    --border:#e5e5e5;
    --text:#555;
    --white:#ffffff;

}


/* ===========================
   GENERAL
=========================== */

body{

    background:#f5f7fa;
    font-family:Arial, Helvetica, sans-serif;
    color:var(--text);

}

a{

    text-decoration:none;

}

img{

    max-width:100%;

}


/* ===========================
   TOP BAR
=========================== */

.top-bar{

    background:var(--primary);

    color:#fff;

    padding:8px 0;

    font-size:14px;

}

.top-bar a{

    color:#fff;

}


/* ===========================
   NAVBAR
=========================== */

.navbar{

    padding:15px 0;

}

.navbar-brand{

    font-size:28px;

    font-weight:bold;

    color:var(--primary)!important;

}

.nav-link{

    color:#333!important;

    margin-left:10px;

    font-weight:600;

}

.nav-link:hover{

    color:var(--primary)!important;

}


/* ===========================
   BOUTONS
=========================== */

.btn-primary{

    background:var(--primary);

    border:none;

}

.btn-primary:hover{

    background:#004899;

}

.btn-warning{

    color:#000;

    font-weight:bold;

}


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

.section-title{

    font-size:30px;

    color:var(--dark);

    margin-bottom:25px;

    font-weight:bold;

}


/* ===========================
   CARTES ARTICLES
=========================== */

.article-card{

    background:#fff;

    border-radius:10px;

    overflow:hidden;

    box-shadow:0 5px 15px rgba(0,0,0,.08);

    transition:.3s;

    margin-bottom:30px;

}

.article-card:hover{

    transform:translateY(-6px);

}

.article-image{

    height:220px;

    overflow:hidden;

}

.article-image img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.article-body{

    padding:20px;

}

.article-category{

    display:inline-block;

    background:var(--warning);

    color:#000;

    padding:4px 10px;

    border-radius:20px;

    font-size:13px;

    margin-bottom:10px;

}

.article-title{

    font-size:22px;

    font-weight:bold;

    color:#222;

}

.article-title:hover{

    color:var(--primary);

}

.article-meta{

    font-size:14px;

    color:#888;

    margin:12px 0;

}

.article-excerpt{

    line-height:1.8;

}

.read-more{

    margin-top:20px;

}


/* ===========================
   SIDEBAR
=========================== */

.sidebar-box{

    background:#fff;

    border-radius:10px;

    padding:20px;

    margin-bottom:30px;

    box-shadow:0 3px 10px rgba(0,0,0,.08);

}

.sidebar-title{

    font-size:22px;

    margin-bottom:20px;

    font-weight:bold;

}


/* ===========================
   CTA
=========================== */

.cta-box{

    background:linear-gradient(135deg,#0056b3,#0d6efd);

    color:#fff;

    border-radius:12px;

    padding:30px;

    text-align:center;

}

.cta-box h2{

    margin-bottom:20px;

}

.cta-box .btn{

    font-size:18px;

}


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

.footer{

    background:#0b1b34;

    color:#fff;

    padding:60px 0;

}

.footer h5{

    margin-bottom:20px;

}

.footer a{

    color:#fff;

}

.footer-links li{

    margin-bottom:10px;

}

.footer a:hover{

    color:var(--warning);

}

.social-icons a{

    font-size:22px;

    margin-right:12px;

}


/* ===========================
   PAGINATION
=========================== */

.pagination .page-link{

    color:var(--primary);

}

.pagination .active .page-link{

    background:var(--primary);

    border-color:var(--primary);

}


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

@media(max-width:991px){

    .navbar-brand{

        font-size:22px;

    }

    .article-title{

        font-size:20px;

    }

}


@media(max-width:768px){

    .section-title{

        font-size:26px;

    }

    .article-image{

        height:200px;

    }

}


@media(max-width:576px){

    .article-image{

        height:180px;

    }

    .article-title{

        font-size:18px;

    }

    .cta-box{

        padding:20px;

    }

}



/* Bouton Retour en haut */

#backToTop{

    position:fixed;

    right:25px;

    bottom:25px;

    width:50px;

    height:50px;

    border:none;

    border-radius:50%;

    background:#0056b3;

    color:#fff;

    font-size:22px;

    cursor:pointer;

    z-index:9999;

    transition:.3s;

}

#backToTop:hover{

    background:#003d82;

}




/* ======================================
   Articles similaires
====================================== */

.article-related-card{

    transition:.3s;

    border-radius:12px;

    overflow:hidden;

}

.article-related-card:hover{

    transform:translateY(-6px);

    box-shadow:0 15px 35px rgba(0,0,0,.12);

}

.article-related-card img{

    height:210px;

    object-fit:cover;

}

.article-related-card h5{

    font-size:18px;

    font-weight:700;

    line-height:1.4;

}

.article-related-card h5 a{

    text-decoration:none;

    color:#222;

}

.article-related-card h5 a:hover{

    color:#0d6efd;

}

.article-related-card p{

    color:#666;

    font-size:14px;

}



/* ======================================
FAQ
====================================== */
/* ==========================
   FAQ
========================== */

.accordion-item{

    margin-bottom:10px;

    border-radius:10px;

    overflow:hidden;

    border:1px solid #ddd;

}

.accordion-button{

    font-weight:600;

    font-size:16px;

}

.accordion-body{

    line-height:1.8;

    font-size:15px;

    color:#555;

}