/* Widget Carousel - suggested front-end CSS
   Adapt to your theme's design system. */

.widgetCarousel{
    position:relative;
    width:100%;
    margin:30px 0;
    overflow:hidden;
}

.widgetCarousel-track{
    display:flex;
    align-items:center;
    width:max-content;
    will-change:transform;
}

/* Pause on hover (opt-in via data-pause="1") */
.widgetCarousel[data-pause="1"]:hover .widgetCarousel-track{
    animation-play-state:paused !important; /* must beat the inline "animation" shorthand set by JS */
}

.widgetCarousel-item{
    flex:0 0 auto;
    padding:0 calc(var(--cr-gap, 30px) / 2);
    display:flex;
    align-items:center;
    justify-content:center;
    height:var(--cr-h, 90px);
}
.widgetCarousel-item img{
    display:block;
    /* hauteur adaptée au ratio du logo */
    max-height:calc(var(--cr-h, 90px) * var(--h-scale, 1));
    max-width:var(--cr-max-w, 200px);
    width:auto;
    height:auto;
    object-fit:contain;
}

/* Presets */
.widgetCarousel-item--square{ --h-scale: 1;    --cr-max-w: 100px; }
.widgetCarousel-item--wide  { --h-scale: 0.75; --cr-max-w: 180px; }
.widgetCarousel-item--xwide { --h-scale: 0.6;  --cr-max-w: 220px; }


/* Clickable slide */
.widgetCarousel-item a{
    display:inline-block;
    line-height:0;
    transition:opacity .15s;
}
.widgetCarousel-item a:hover{
    opacity:.75;
}

/* Empty state */
.widgetCarousel-empty{
    padding:20px;
    text-align:center;
    color:#999;
    font-style:italic;
    border:1px dashed #ccc;
    border-radius:6px;
}

/* Reduced motion: freeze the animation */
@media (prefers-reduced-motion:reduce){
    .widgetCarousel-track{
        animation:none !important;
        transform:none !important;
    }
}