/* Style global */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    width: 100%;
    background-color: #000;
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Pas de scroll global */
}

/* Conteneur principal centré */
.gallery-container {
    width: 60vw;
    height: 70vh;
    overflow-y: scroll; /* Scroller vertical pour voir les images */
    position: relative;
    z-index: 1;
}
.gallery-container-image {
    overflow: hidden;
}

#image-gallery {
    overflow: hidden;
}

/* Style pour la galerie d'images */
.image-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 colonnes */
    grid-gap: 3px;
    
}
/* Conteneur image */
.image-container {
    position: relative;
    overflow: hidden;
    margin-bottom: 1px;
}


.image-container img {
    width: 100%;
    height: auto;
   
    transition: transform 0.3s ease;
    display: block;
}

.image-container:hover img {
    transform: scale(1.1);
}

/*.scroll-indicator {
    position: fixed;
    bottom:120px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 4rem;
    animation: bounce 1.5s infinite;
    color: #d0d0df;
   
    transition: opacity 0.1s ease;
     z-index: 2;
}
.scroll-indicator.hidden {
    opacity: 0;
    pointer-events: none;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translate(-50%, 0);
    }
    40% {
        transform: translate(-50%, -10px);
    }
    60% {
        transform: translate(-50%, -5px);
    }
}*/

/* Zones de navigation gauche et droite */
.nav-zone {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    z-index: 0;
    cursor: pointer;
}

.left-zone {
    left: 0;
}

.right-zone {
    right: 0;
}

.nav-zone:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Responsive Design */
@media (max-width: 768px) {
    .image-gallery {
        grid-template-columns: repeat(2, 1fr); /* 2 colonnes */
    }
}

@media (max-width: 480px) {
    .image-gallery {
        grid-template-columns: 1fr; /* 1 colonne */
    }
}