/* bzh-slider.css
   CSS minimal et propre utilisant flexbox.
   - .bzh-slider : wrapper position relative pour placer les flèches
   - .bzh-slider-viewport : zone masquée (overflow hidden)
   - .bzh-slider-track : display:flex; les .bzh-slide-item sont inline-flex items
*/

:root {
    --bzh-slider-max-height : 80px;
}

.bzh-slider {
    position: relative;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    box-sizing: border-box; /* optionnel mais recommandé */
    display: flex;
    justify-content: center;
    padding: 10px 0px;
}

/* flèches */

.bzh-slider-arrow {
    z-index: 20;
    cursor: pointer;
}
.bzh-slider-arrow-left, .bzh-slider-arrow-right  {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 70px;
    height: 70px;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    will-change: opacity;
}
.bzh-slider-arrow-left {
    background-image: url("../images/icons/left-arrow.png");
}
.bzh-slider-arrow-right {
    background-image: url("../images/icons/right-arrow.png");
}


.bzh-slider:hover > .bzh-slider-arrow-left,
.bzh-slider:hover > .bzh-slider-arrow-right {
    opacity: 1;
}


/* position *//*
.bzh-slider-arrow-left  { left: -50px; }
.bzh-slider-arrow-right { right: -50px; }
*/


/* viewport masque l'overflow */
.bzh-slider-viewport {
    /* Utiliser les deux */
    overflow: hidden;
    box-sizing: border-box;
}

/* track */
.bzh-slider-track {
    display: flex;
    gap: 50px; /* espace entre les slides */
    align-items: center;
    padding: 0px 10px;
    box-sizing: border-box;
    scroll-behavior: smooth; /* utile si on permet le scroll natif */
}

/* chaque item garde sa taille (ne s'étire pas) */
.bzh-slide-item {
    /* grow | shrink | basis (auto: default) */
    flex: 0 0 auto;        /* IMPORTANT: n'autorise que la largeur nécessaire */
    /*
        flex : comme un bloc (width 100%) dont les éléments du même niveau sont les uns en dessous des autres.
        inline-flex : partage son espace avec les autres éléments du même niveau (siblings)
    */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    /*
    overflow: hidden;
    box-sizing: border-box;
     */
}

/* image : hauteur limitée, largeur auto pour garder ratio */
.bzh-slide-item img {
    display: block;
    max-height: var(--bzh-slider-max-height, 80px); /* css var override via JS ou inline style */
    width: auto;
   /*height: auto;*/
    /*max-width: none;*/
}

/* fallback si pas d'image */
.bzh-slide-placeholder {
    padding: 10px 14px;
    background: #f0f0f0;
    color: #666;
}


@media (max-width: 480px) {
    .bzh-slider-track {
        gap: 10px;
        padding-left: 12px;
        padding-right: 12px;
    }
    .bzh-slider-arrow {
        padding: 6px 8px;
        font-size: 16px;
    }
}