/*
 * ---------------------------------------
 * 1. STYLE DE LA GRILLE DE MINIATURES
 * ---------------------------------------
 */

/* Style pour la galerie en grille de miniatures */
.private-gallery-container {
    display: flex;
    flex-wrap: wrap; 
    gap: 15px; /* Espace entre les miniatures */
    /* Pour centrer la galerie sur la page (optionnel) */
    justify-content: center;
    /* Marge latérale pour éviter que la grille ne touche les bords de l'écran */
    margin: 0 auto;
    max-width: 1200px; /* Limiter la largeur maximale de la galerie pour qu'elle ne soit pas trop étirée */
}

/* 💥 CORRECTION POUR 4 COLONNES FLEXIBLES 💥 */
.private-gallery-item {
    margin: 0; 
    /* Calcule la largeur pour que 4 éléments tiennent sur une ligne, en tenant compte du "gap" de 15px */
    width: calc(25% - 12px); 
    
    /* On garde la hauteur fixe pour un look uniforme */
    height: 180px; 
    
    overflow: hidden;
    border: 1px solid #ccc; /* Ajoute une bordure légère */
    cursor: pointer; /* Indique qu'on peut cliquer */
    box-sizing: border-box; /* S'assurer que le padding/bordure est inclus dans la largeur de 25% */
}

/* Ajustement pour les très petits écrans (ex: mobiles) */
@media (max-width: 768px) {
    .private-gallery-item {
        /* Affiche 2 photos par ligne sur mobile */
        width: calc(50% - 10px); 
        height: 150px;
    }
}

.private-gallery-item a {
    display: block; /* S'assurer que le lien occupe toute la zone */
    width: 100%;
    height: 100%;
}

.private-gallery-item img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover; /* Assure que l'image remplit la zone sans déformation, recadre si nécessaire */
    transition: transform 0.3s ease; /* Ajoute une petite animation */
}

.private-gallery-item img:hover {
    transform: scale(1.05); /* Effet zoom léger au survol */
}

/*
 * ---------------------------------------
 * 2. CORRECTIF ULTIME POUR LES FLÈCHES FEATHERLIGHT
 * ---------------------------------------
 */
