/* ===== Mode Slide (Défilement Horizontal) ===== */

/* Conteneur principal */
.timeline .timeline-gallery {
    margin-top: 24px;
    width: 100%;
    position: relative;
}

/* Transformation de la grille en ruban défilant (Flexbox) */
.timeline .timeline-gallery-grid {
    display: flex;
    flex-wrap: nowrap; /* Force les éléments sur une seule ligne stricte */
    overflow-x: auto;  /* Active le défilement horizontal */
    overflow-y: hidden;
    scroll-snap-type: x mandatory; /* Activation de l'effet d'aimantation au défilement */
    gap: 16px;
    padding-bottom: 15px; /* Espace pour ne pas coller la barre de défilement à l'image */
    scroll-behavior: smooth;
    
    /* Personnalisation fine de la barre de défilement (Chrome, Safari, Edge) */
    scrollbar-width: thin; 
    scrollbar-color: #f1b709 #f1f1f1; /* Couleurs or et gris clair */
    -webkit-overflow-scrolling: touch; /* Défilement tactile ultra-fluide sur iOS */
}

/* Design de la barre de défilement stylisée */
.timeline .timeline-gallery-grid::-webkit-scrollbar {
    height: 6px; 
}
.timeline .timeline-gallery-grid::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.05); /* Piste de la barre très discrète */
    border-radius: 10px;
}
.timeline .timeline-gallery-grid::-webkit-scrollbar-thumb {
    background: #f1b709; /* Couleur de la barre mobile */
    border-radius: 10px;
}

/* Dimensionnement : On affiche 3 colonnes. Le reste est automatiquement caché sur la droite. */
.timeline .timeline-gallery-grid.cols-3 .timeline-gallery-item {
    flex: 0 0 calc((100% - 32px) / 3); 
    scroll-snap-align: start; /* Aimante l'image au bord gauche au scroll */
}

/* Style de chaque miniature */
.timeline .timeline-gallery-item {
    position: relative;
    aspect-ratio: 1 / 1; 
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    background-color: #111;
}

.timeline .timeline-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.timeline .timeline-gallery-item:hover img {
    transform: scale(1.1); /* Zoom doux au survol */
}

/* ===== Responsive : Adaptation Mobile et Tablette ===== */

/* Tablettes : On affiche 2 éléments visibles + 1 bout du 3ème */
@media (max-width: 768px) {
    .timeline .timeline-gallery-grid.cols-3 .timeline-gallery-item {
        flex: 0 0 calc((100% - 16px) / 2.2); 
    }
}

/* Mobiles : On affiche 1 élément complet + 1 bout du 2ème pour montrer le défilement */
@media (max-width: 480px) {
    .timeline .timeline-gallery-grid.cols-3 .timeline-gallery-item {
        flex: 0 0 85%; /* 85% de la largeur du mobile */
        scroll-snap-align: center; /* Centrer l'image active sur mobile */
    }
}