/* CANVAS.CSS - OPTIMISÉ 2026 */
* { box-sizing: border-box; }

html, body {
    margin: 0; padding: 0; background-color: #000;
    width: 100%; height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

/* Cache totalement les barres de scroll */
::-webkit-scrollbar { display: none; }
body { -ms-overflow-style: none; scrollbar-width: none; }

img { 
    display: block; width: 100%; height: auto; 
    user-select: none;
}

/* --- CARROUSEL --- */
.carousel-wrapper {
    position: relative; width: 100%; background: #000;
}

.carousel-container {
    display: flex;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    /* On garde le snap pour que le scrollTo se cale parfaitement */
    scroll-snap-type: x mandatory; 
    scrollbar-width: none;
    /* Supprime toute interaction souris de drag par défaut */
    cursor: default;
}
.carousel-container::-webkit-scrollbar { display: none; }

.carousel-container img {
    width: 100%;
    flex: 0 0 100%;
    scroll-snap-align: center;
    scroll-snap-stop: always;
}

/* DOTS OVERLAY */
.dots-overlay {
    position: absolute; bottom: 20px; left: 50%;
    transform: translateX(-50%);
    display: flex; gap: 10px;
    background-color: rgba(0, 0, 0, 0.8); 
    padding: 8px 14px; border-radius: 30px;
    z-index: 10;
}

.dot {
    width: 8px; height: 8px; border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.3);
    cursor: pointer; /* Le seul élément qui montre l'interactivité sur Desktop */
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.dot:hover {
    background-color: rgba(255, 255, 255, 0.6);
    transform: scale(1.2);
}

.dot.active {
    background-color: #fff; 
    transform: scale(1.4);
}