/* Conteneur du slider */
.bd-slider-wrapper {
    position: relative;
    display: block;
    overflow: hidden;          /* masque les débordements pendant le slide */
    height: 0;                 /* hauteur sera définie en JS */
    margin-bottom: 2em;
}

/* Piste */
.bd-slider {
    position: relative;
}

/* Slides superposés, animés par translation horizontale */
.bd-slide {
    position: absolute;
    inset: 0;                  /* top/right/bottom/left: 0 */
    width: 100%;
    transform: translateX(100%);          /* par défaut: à droite, hors cadre */
    transition: transform 1000ms ease-in-out; /* durée de l’animation */
    z-index: 0;
    /* pas d’opacity pour éviter tout « blanc » entre les images */
}

/* Slide actif : au centre */
.bd-slide.active {
    transform: translateX(0);
    z-index: 2;
}

/* Slide sortant : glisse vers la gauche (prend le dessus pendant l’anim) */
.bd-slide.leaving {
    transform: translateX(-100%);
    z-index: 3; /* au-dessus pour l’effet “pousse” */
}

/* Image responsive, ratio respecté */
.bd-slide img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

/* Texte superposé sur l'image */
.bd-text {
    position: absolute;
    left: 20px;
    bottom: 20px;
    padding: 10px;
    font-family: inherit;
}

/* Flèches de navigation (centrées verticalement) */
.bd-prev,
.bd-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    z-index: 4;                /* au-dessus des slides */
    font-size: 1.5em;
    border-radius: 50%;
    line-height: 1;
}

.bd-prev { left: 10px; }
.bd-next { right: 10px; }

.bd-prev:focus,
.bd-next:focus,
.bd-prev:active,
.bd-next:active {
    background: rgba(0, 0, 0, 0.5);
    outline: none;
    box-shadow: none;
    border: none;
}