/* ============================================================
   TOP ARTICLES — Styles carousel
   À placer dans : ton-theme/css/top-articles.css
   ============================================================ */

/* ----------------------------------------------------------
   Section globale
   ---------------------------------------------------------- */
.top-articles {
    margin: 20px 0 0;
    padding: 0;
}
/* ----------------------------------------------------------
   Swiper — conteneur
   ---------------------------------------------------------- */
.top-articles__swiper {
    position: relative;
    padding-bottom: 2.5rem; /* espace pour la pagination */
}

/* ----------------------------------------------------------
   Slide
   ---------------------------------------------------------- */
.top-articles__slide {
    height: auto; /* important pour que toutes les slides aient la même hauteur */
    display:flex;
}

.top-articles__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    width:calc(100% - 42px);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    position: relative;
}

/* ----------------------------------------------------------
   Rang — badge numéroté
   ---------------------------------------------------------- */
.top-articles__rank {
    position: relative;
    width: 40px;
    height: 155px;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}
.top-articles__rank span{
    font-size: 40px;
    font-family: "lemon/milk", Sans-serif;
}
/* ----------------------------------------------------------
   Miniature
   ---------------------------------------------------------- */
.top-articles__img {
    width: 100%;
    height: 155px !important;
    object-fit: cover;
    display: block;
}

/* ----------------------------------------------------------
   Contenu textuel
   ---------------------------------------------------------- */
.top-articles__content {
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 5px;
}

.top-articles__heading {
    font-size: 16px;
    line-height: 1.4;
    color: #000;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: 'Libre Baskerville', serif;
    font-weight: bold !important;
    color: #42399b;
}

/* ----------------------------------------------------------
   Boutons de navigation Swiper
   ---------------------------------------------------------- */
.top-articles__btn {
    color: #000;
}

.top-articles__btn::after {
    font-size: 24px !important;
    font-weight: 700;
}
.top-navigation{
    position:relative;
    height:44px;
    display: flex;
    align-items: center;
    gap:5px;
    justify-content: flex-end;
}
.top-navigation .swiper-button-next,
.top-navigation .swiper-button-prev{
    top:calc(50% - 12px);
    left:0;
    position: relative;
}
/* ----------------------------------------------------------
   Pagination Swiper
   ---------------------------------------------------------- */
.top-articles__pagination .swiper-pagination-bullet {
    background: #ccc;
    opacity: 1;
}

.top-articles__pagination .swiper-pagination-bullet-active {
    background: #e44d26; /* ← adapte à ta couleur principale */
}