.carousel-container {
  background: #000;
    position: relative;
    overflow: hidden;
    background: #000;
    width: 100%;
    margin-bottom: 20px;
    max-width: 100%;
    height: max-content;
}




.carousel-slide {
    display:flex;
    max-width: 100%;
    max-height: 300px;
    cursor:grab;
    transition: transform 0.5s ease;
}
.carousel-slide.grabbing { cursor:grabbing; transition:none; }

.slide { flex:0 0 100%; /*height:100%;*/  }
.slide img { width:100%; height:100%; /*object-fit:cover;*/ pointer-events:none; -webkit-user-drag:none; }

.play-pause {
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:52px; height:52px; font-size:24px; border-radius:50%; border:none;
    background:rgba(255,255,255,0.75); cursor:pointer; z-index:10;
}

.arroww { position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 28px;
    color: white;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    cursor: pointer;
    padding: 10px;
    border-radius: 50%;
    z-index: 10; }


.arroww-left{left:10px;} .arroww-right{right:10px;}

.dots { position:absolute; bottom:15px; left:50%; transform:translateX(-50%); display:flex; gap:10px; }
.dot-wrapper { position:relative; }
.dot { width:12px; height:12px; background:rgba(255,255,255,0.5); border-radius:50%; cursor:pointer; }
.dot.active{ background:#fff; }

.dot-preview {
    position:absolute;
    bottom:90%; /* rapproché des dots pour rester cliquable */
    left:50%; transform:translateX(-50%);
    width:60px; height:60px; border-radius:6px; overflow:hidden;
    display:none; background:#000; box-shadow:0 4px 10px rgba(0,0,0,0.4); cursor:pointer; z-index:20;
}
.dot-preview img { width:100%; height:100%; object-fit:cover; pointer-events:none; }

@media (max-width:500px) {
    .play-pause {
        width:40px;
        height:40px;
        font-size:20px;
    }
    .arroww {
        font-size:24px;
        padding:8px;
    }
}

/* @media (max-width:600px){ .carousel-container{ aspect-ratio:4/3; } } */









/*===========SYSTEME BOUTON HOVER PC ET FIXE MOBILE */



/* Desktop : boutons masqués par défaut, visibles au survol */
@media (min-width: 551px) and (hover: hover) and (pointer: fine) {
    .arroww,
    .play-pause {
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .carousel-container:hover .arroww,
    .carousel-container:hover .play-pause {
        opacity: 1;
    }
}

/* Mobile / tactile : boutons toujours visibles */
@media (max-width: 550px), (hover: none) and (pointer: coarse) {
    .arroww,
    .play-pause {
        opacity: 1;
    }
}