/* ============================================================
   Elementor Logo Carousel – Partenaires
   logo-carousel.css
   ============================================================ */

/* --- Wrapper & masque --------------------------------------- */
.elc-carousel__wrapper {
    overflow: hidden;
    width: 100%;
    position: relative;
}

/* Masque de débordement (nécessaire pour le fondu) */
.elc-carousel__mask {
    overflow: hidden;
    width: 100%;
}

/* --- Fondu sur les bords (masque CSS) ---------------------- */
.elc-carousel__wrapper.has-fade .elc-carousel__mask {
    --elc-fade-width: 80px; /* Valeur par défaut, surchargée par Elementor */
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0,
        #000 var(--elc-fade-width),
        #000 calc(100% - var(--elc-fade-width)),
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0,
        #000 var(--elc-fade-width),
        #000 calc(100% - var(--elc-fade-width)),
        transparent 100%
    );
}

/* --- Piste (bande défilante) -------------------------------- */
.elc-carousel__track {
    display: flex;
    align-items: center;
    white-space: nowrap;
    will-change: transform;
    /* L'animation est appliquée dynamiquement en JS */
}

/* --- Bandes (originale + clone) ----------------------------- */
.elc-carousel__band {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    /* La hauteur de la bande correspond à celle de la piste,
       transmise via --elc-track-height définie en JS */
    height: var(--elc-track-height, 80px);
}

/* --- Items individuels -------------------------------------- */
.elc-carousel__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    height: 100%;
    /* Le padding (gap) est injecté via les sélecteurs Elementor */
    padding: 0 60px; /* valeur par défaut */
}

.elc-carousel__item a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

/* --- Logo --------------------------------------------------- */
.elc-carousel__item img {
    display: block;
    /* Les images occupent toute la hauteur de la piste */
    height: 100%;
    width: auto;
    max-width: 160px; /* valeur par défaut surchargée par Elementor */
    object-fit: contain;
    opacity: 0.7;
    filter: none;
    transition: opacity 300ms ease, filter 300ms ease;
}

.elc-carousel__item img.is-grayscale {
    filter: grayscale(100%);
}

.elc-carousel__item:hover img {
    opacity: 1;
}

.elc-carousel__item:hover img.is-grayscale {
    filter: grayscale(0%);
}

/* --- Keyframes --------------------------------------------- */
/*
 * Les @keyframes sont générées dynamiquement en JavaScript
 * avec la largeur EXACTE de la bande en pixels, et injectées
 * dans une balise <style> dédiée.
 * Cela garantit un retour seamless même avec 45+ logos.
 */

/* --- Accessibilité : respect de prefers-reduced-motion ----- */
@media (prefers-reduced-motion: reduce) {
    .elc-carousel__track {
        animation-play-state: paused !important;
    }
}