/* Styles propres à la page Galerie (s'ajoute à about.css) */
.filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 20px; }
.chip {
    font: inherit; font-size: 14px; font-weight: bold; cursor: pointer;
    padding: 8px 18px; border-radius: 20px; background: #fff;
    border: 1px solid var(--primary-blue); color: var(--primary-blue);
    transition: background-color 0.2s, color 0.2s;
}
.chip:hover { background: #e8f1fd; }
.chip.active { background: var(--primary-blue); color: #fff; }

.album-desc { text-align: center; max-width: 650px; margin: 0 auto 35px; min-height: 3em; }

.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
    gap: 16px;
}
.thumb {
    position: relative; display: block; padding: 0; border: none; cursor: zoom-in;
    border-radius: 8px; overflow: hidden; background: #dde5f2; aspect-ratio: 4 / 3;
}
.thumb[hidden] { display: none; }
.thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.thumb:hover img, .thumb:focus-visible img { transform: scale(1.05); }
.thumb-label {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 25px 12px 10px;
    color: #fff; font-size: 14px; font-weight: bold; text-align: left;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
}

/* Visionneuse */
.lightbox {
    width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; padding: 0;
    border: none; background: rgba(0, 0, 0, 0.92);
}
.lightbox[open] { display: flex; align-items: center; justify-content: center; }
.lightbox img { max-width: 88%; max-height: 88%; object-fit: contain; border-radius: 4px; }
.lightbox::backdrop { background: rgba(0, 0, 0, 0.92); }
.lb-btn {
    position: absolute; border: none; cursor: pointer; color: #fff;
    background: rgba(255, 255, 255, 0.15); border-radius: 50%;
    width: 48px; height: 48px; font-size: 26px; line-height: 1;
}
.lb-btn:hover { background: rgba(255, 255, 255, 0.3); }
.lb-btn:focus-visible { outline-color: #fff; }
.lb-close { top: 16px; right: 16px; font-size: 20px; }
.lb-prev { left: 12px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 12px; top: 50%; transform: translateY(-50%); }

@media (max-width: 600px) {
    .lightbox img { max-width: 100%; }
}

/* Photos verticales : recadrage centré vers les visages */
.thumb img.pos-top { object-position: center 25%; }

/* Photo du bandeau de la page */
.page-hero { --hero-img: url('img7.jpeg'); --hero-pos: center 38%; }