/* Fond sombre pour la section de la galerie */
.section.gallery {
    background-color: #1a1a1a; /* Couleur de fond sombre */
    padding: 20px;
}

/* Styles pour les images dans la galerie */
.masonry .column {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    padding: 5px;
    box-sizing: border-box;
}

.masonry .column.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Styles pour les images dans la galerie */
/* Styles pour les images dans la galerie */
.masonry .column img {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.3); /* Ombre plus claire pour le relief */
    display: block;
    margin-bottom: 15px; /* Espace entre les images */
    width: 100%; /* Assure que les images prennent toute la largeur disponible */
    height: auto;
}


.masonry .column img:hover {
    transform: scale(1.05); /* Agrandit légèrement l'image */
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.4); /* Augmente l'ombre lors du survol */
    z-index: 1; /* Assure que l'image zoomée est au-dessus des autres */
}

/* Ajustements pour les écrans plus petits */
@media (max-width: 768px) {

    .masonry .column {
        flex: 1 1 100%; /* Une seule colonne sur mobile */
        padding: 5px;
    }

    .masonry .column img {
        margin-bottom: 10px; /* Réduire l'espace entre les images */
    }
}

@media (max-width: 480px) {
    .section.gallery {
        padding: 10px; /* Réduire le padding pour les très petits écrans */
    }
}

/* Disposition par défaut avec Masonry */
.masonry {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.masonry .column {
    flex: 1 1 calc(25% - 10px); /* Quatre colonnes par défaut */
    box-sizing: border-box;
}

/* Disposition pour les écrans plus petits */
@media (max-width: 768px) {
    .masonry {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .masonry .column {
        flex: none;
        width: 100%; /* Une seule colonne sur mobile */
        margin-bottom: 10px;
    }
}