/* =========================
   CAROUSEL WRAPPER
========================= */

.carousel-wrapper{
    position:relative;
    width:100%;
    margin:25px 0 50px;
    display:flex;
    align-items:center;
    overflow:hidden;
}

/* =========================
   VIEWPORT (masque le scroll)
========================= */

.carousel-viewport{
    overflow:hidden;
    width:100%;
    position:relative;
}

/* =========================
   TRACK (ligne d'images)
========================= */

.carousel-track{
    display:flex;
    gap:20px;
    align-items:center;
    will-change:transform;
    width:max-content;

}

/* lorsque le carousel est désactivé */

.carousel-wrapper.no-carousel{

    overflow:visible;

}

.carousel-wrapper.no-carousel{

    overflow:visible;

}

.carousel-wrapper.no-carousel .carousel-viewport{

    overflow:visible;

}

.carousel-wrapper.no-carousel .carousel-track{

    width:100%;

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

    transform:none !important;

}
/* =========================
   IMAGES / ITEMS
========================= */

.carousel-track a{
    flex:0 0 clamp(220px, 80vw, 320px);
    width:clamp(220px, 80vw, 320px);
    aspect-ratio:1/1;
    height:auto;
    display:block;
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 4px 12px rgba(0,0,0,.25);
    cursor:zoom-in;
    transition:transform .25s ease;
}

.carousel-track a:hover{
    transform:scale(1.03);
}

.carousel-track img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/* =========================
   BUTTONS
========================= */

.carousel-btn{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:44px;
    height:44px;
    border:none;
    border-radius:50%;
    background:rgba(0,0,0,.6);
    color:#fff;
    font-size:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    z-index:10;
    transition:background .2s ease, transform .2s ease;
}

.carousel-btn:hover{
    background:rgba(0,0,0,.85);
    transform:translateY(-50%) scale(1.05);
}

.carousel-btn.prev{
    left:10px;
}

.carousel-btn.next{
    right:10px;
}

.carousel-speed-control{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:10px;
    color:white;
}

.carousel-speed-control input{
    width:120px;
}


/* =========================
   RESPONSIVE
========================= */

@media (max-width: 768px){

    .carousel-track{
        gap:12px;
    }

    .carousel-track a{
        flex:0 0 calc(100vw - 80px);
        width:calc(100vw - 80px);
        max-width:300px;
    }

    .carousel-btn{
        width:34px;
        height:34px;
        font-size:16px;
    }
}