/* Carousel général */
#carousel-articles .owl-stage {
    display: flex; /* Pour hauteur uniforme */
}

#carousel-articles .item {
    padding: 0 5px; /* Espacement léger entre les slides */
}

/* Cartes */
#carousel-articles .card {
    display: flex;
    flex-direction: column;
    height: 100%; /* Toujours remplir le conteneur */
    transition: transform 0.2s ease-in-out;
    border-radius: 0; /* Coins carrés */
}

.card-img-top, .card{
    border-radius: 0;
}
/* Image + ratio */
.ratio {
    position: relative;
    width: 100%;
}

.ratio > .position-relative {
    position: relative;
    width: 100%;
    height: 100%;
}

.card-text {
    margin: 0;
}
/* Lien sur toute l'image */
.ratio a {
    display: block;
    width: 100%;
    height: 100%;
}

/* Bouton play en overlay */
.play-btn-overlay {
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 60px;
    height: 60px;
    border-radius: 50%; /* rond */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 10;
}

/* Contenu texte */
.owl-carousel .item .card-body {
    flex: 1 1 auto; /* prend l’espace restant pour uniformiser la hauteur */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* titre en haut du body */
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center; /* <-- centre verticalement */
    text-align: center;
    height: 190px; /* ou la hauteur que tu veux */
    overflow: hidden;
}

.card-title-zone {
    display: flex;
    align-items: center;      /* centre verticalement le contenu du bloc */
    justify-content: center;   /* centre horizontalement si besoin */
    height: 75px;              /* conserve la hauteur définie pour le titre */
}

.card-title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
    width: 100%;
}

/* Footer reste en bas */
.owl-carousel .item .card-footer {
    flex-shrink: 0;
}

/* Texte secondaire responsive */
.card-text small {
    font-size: 0.8rem;
}




#carousel-articles .owl-nav {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    pointer-events: none; /* pour que seules les flèches captent le clic */
}

#carousel-articles .owl-nav button.owl-prev,
#carousel-articles .owl-nav button.owl-next {
    color: #4A4A4A !important;
    border: none;
    padding: 180px 17px !important;
    font-size: 3rem;
   border-radius: 0;
    pointer-events: all; /* réactive le clic */
    width: 52px;
    margin: 0;
    background-color: #00000000 !important;
}


#carousel-articles .owl-nav {
    z-index: -1;
}


#carousel-articles .owl-nav button.owl-prev:hover,
#carousel-articles .owl-nav button.owl-next:hover {
   color: #363636;
   background-color:#00000000 !important;
}

#carousel-articles .owl-nav button.owl-prev {
    transform: translateX(-52px); /* décale vers la gauche */
width: 57px;
}

#carousel-articles .owl-nav button.owl-next {
    transform: translateX(55px); /* décale vers la droite */
    width: 57px;
}



/*margin du carouel en ecran large */
.owl-carousel{
    
    width: auto !important; 
    z-index:1;
}

@media (max-width: 995px) {
    .card-text small {
        font-size: 0.9rem;
    }
     #carousel-articles .owl-nav{
        display:none;
    }
    
    .owl-carousel{
    margin-left: 0;
    margin-right: 0;
    width: 100% ; 
}

}

@media (max-width: 768px) {
    .card-text small {
        font-size: 1rem;
    }
    .play-btn-overlay {
    width: 50px;
    height: 50px;
    }

 
}

@media (max-width: 576px) {
    .card-text small {
        font-size: 0.9rem;
    }
    

}