/* ============================================================
   PAGE GALERIE (galerie.php)
   Remplace galerie.css + galerie-auto.css (~14 Ko → ~2 Ko).
   ============================================================ */

.sous-section-galerie { margin-bottom: 50px; }

/* Grille qui s'adapte seule : 4-5 colonnes sur ordinateur, 2 sur téléphone */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 18px;
}

.gallery-item {
    margin: 0;
    overflow: hidden;
    border-radius: var(--rayon);
    background: rgba(255, 255, 255, .8);
    box-shadow: var(--ombre);
    transition: transform var(--transition), box-shadow var(--transition);
}
.gallery-item:hover {
    transform: translateY(-6px);
    box-shadow: var(--ombre-forte);
}

.gallery-link {
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 3;
}
.gallery-link img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    box-shadow: none;
    transition: transform .5s ease;
}
/* Zoom doux de la photo au survol (sans déplacer la mise en page) */
.gallery-link:hover img,
.gallery-link:focus-visible img {
    transform: scale(1.08);
    box-shadow: none;
}

.gallery-item figcaption {
    padding: 10px 12px;
    font-size: .95rem;
    text-align: center;
    color: var(--texte);
}

.section-vide {
    padding: 30px;
    border: 2px dashed rgba(143, 12, 99, .3);
    border-radius: var(--rayon);
    background: rgba(255, 255, 255, .5);
}

@media (max-width: 600px) {
    .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .gallery-item figcaption { padding: 6px 8px; font-size: .82rem; }
}