/* ============================================================
   css/galerie.css — page Galerie (gallery.php uniquement)
   Mosaïque de photos + lecteur plein écran
   ============================================================ */

/* ---------- Filtres ---------- */
.galerie-filtres { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-bottom:34px; }
.galerie-filtre { display:inline-flex; align-items:center; gap:8px; background:var(--blanc); border:1.5px solid #e4e4da; color:var(--texte-doux); font-family:'Poppins',sans-serif; font-size:13px; font-weight:600; padding:8px 10px 8px 18px; border-radius:30px; cursor:pointer; transition:var(--transition); }
.galerie-filtre:hover { border-color:var(--vert); color:var(--vert-dark); }
.galerie-filtre.active { background:var(--vert); border-color:var(--vert); color:#fff; box-shadow:0 6px 18px rgba(176,180,53,0.35); }
.galerie-filtre:focus-visible { outline:3px solid rgba(176,180,53,0.45); outline-offset:2px; }
.galerie-filtre-nb { min-width:24px; padding:2px 7px; border-radius:20px; background:var(--vert-light); color:var(--vert-dark); font-size:11px; line-height:16px; text-align:center; transition:var(--transition); }
.galerie-filtre.active .galerie-filtre-nb { background:rgba(255,255,255,0.25); color:#fff; }

/* ---------- Mosaïque ---------- */
.galerie-mosaique { column-count:4; column-gap:16px; }
@media (max-width:1199px) { .galerie-mosaique { column-count:3; } }
@media (max-width:767px)  { .galerie-mosaique { column-count:2; column-gap:10px; } }

.galerie-tuile { display:block; position:relative; margin:0 0 16px; border-radius:12px; overflow:hidden; background:var(--vert-light); box-shadow:var(--shadow); break-inside:avoid; -webkit-column-break-inside:avoid; page-break-inside:avoid; transform:translateZ(0); }
@media (max-width:767px) { .galerie-tuile { margin-bottom:10px; border-radius:10px; } }
.galerie-tuile.cache { display:none; }
.galerie-tuile.apparait { animation:galerieApparait 0.45s ease both; }
@keyframes galerieApparait { from { opacity:0; transform:translateY(14px) scale(0.98); } to { opacity:1; transform:none; } }

.galerie-tuile img { display:block; width:100%; height:auto; transition:transform 0.5s ease, filter 0.5s ease; }
.galerie-tuile:focus-visible { outline:3px solid var(--vert); outline-offset:3px; }

.galerie-tuile-info { position:absolute; left:0; right:0; bottom:0; display:flex; align-items:flex-end; justify-content:space-between; gap:10px; padding:40px 14px 12px; background:linear-gradient(to top, rgba(20,22,14,0.78), rgba(20,22,14,0)); color:#fff; font-family:'Poppins',sans-serif; opacity:0; transform:translateY(8px); transition:opacity 0.3s ease, transform 0.3s ease; pointer-events:none; }
.galerie-tuile-texte { min-width:0; }
.galerie-tuile-cat { display:block; font-size:10px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:#e4e79a; }
.galerie-tuile-desc { display:block; font-size:14px; font-weight:500; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.galerie-tuile-loupe { flex:none; width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,0.2); display:flex; align-items:center; justify-content:center; font-size:13px; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }

.galerie-tuile:hover img, .galerie-tuile:focus-visible img { transform:scale(1.06); filter:brightness(0.9); }
.galerie-tuile:hover .galerie-tuile-info, .galerie-tuile:focus-visible .galerie-tuile-info { opacity:1; transform:none; }

/* Écrans tactiles (pas de survol) : légende toujours visible, plus discrète */
@media (hover:none) {
    .galerie-tuile-info { opacity:1; transform:none; padding:28px 10px 8px; }
    .galerie-tuile-loupe, .galerie-tuile-cat { display:none; }
    .galerie-tuile-desc { font-size:12px; }
    .galerie-tuile-info.vide { display:none; }
}

.galerie-vide { text-align:center; color:var(--texte-doux); padding:40px 0; }

/* ---------- Lecteur plein écran ---------- */
html.lecteur-ouvert, html.lecteur-ouvert body { overflow:hidden !important; }

.lecteur { position:fixed; inset:0; z-index:10050; display:flex; flex-direction:column; height:100vh; height:100dvh; color:#fff; font-family:'Poppins',sans-serif; -webkit-user-select:none; user-select:none; opacity:0; visibility:hidden; transition:opacity 0.25s ease, visibility 0s linear 0.25s; }
.lecteur.ouvert { opacity:1; visibility:visible; transition:opacity 0.25s ease; }
.lecteur-fond { position:absolute; inset:0; background:rgba(12,13,9,0.96); z-index:-1; transition:opacity 0.25s ease; }
.lecteur.glisse .lecteur-fond { transition:none; }

.lecteur-haut { display:flex; align-items:center; justify-content:space-between; padding:12px 14px 6px 22px; flex:none; }
.lecteur-compteur { font-size:13px; font-weight:500; letter-spacing:0.06em; color:rgba(255,255,255,0.75); }
.lecteur-compteur b { color:#fff; font-weight:600; }
.lecteur-actions { display:flex; gap:6px; }
.lecteur-bouton { width:44px; height:44px; border:0; border-radius:50%; background:transparent; color:#fff; font-size:17px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background 0.2s ease, transform 0.2s ease; }
.lecteur-bouton[hidden] { display:none; }
.lecteur-bouton:hover { background:rgba(255,255,255,0.12); }
.lecteur-bouton:focus-visible { outline:2px solid var(--vert); outline-offset:1px; }
.lecteur-bouton[data-action="fermer"] { font-size:22px; }
.lecteur-bouton.actif { background:var(--vert); }

.lecteur-scene { position:relative; flex:1 1 auto; min-height:0; display:flex; align-items:center; justify-content:center; overflow:hidden; touch-action:none; padding:0 72px; }
.lecteur-image { display:block; max-width:100%; max-height:100%; object-fit:contain; border-radius:6px; box-shadow:0 20px 70px rgba(0,0,0,0.55); transform-origin:center center; will-change:transform; cursor:zoom-in; -webkit-user-drag:none; }
.lecteur.zoome .lecteur-image { cursor:grab; border-radius:0; }
.lecteur.glisse .lecteur-image { cursor:grabbing; }
.lecteur-image.anime { transition:transform 0.3s cubic-bezier(.2,.8,.2,1), opacity 0.3s ease; }

.lecteur-nav { position:absolute; top:50%; transform:translateY(-50%); width:54px; height:54px; border:0; border-radius:50%; background:rgba(255,255,255,0.1); color:#fff; font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:2; transition:background 0.2s ease, opacity 0.2s ease; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.lecteur-nav:hover { background:var(--vert); }
.lecteur-nav:focus-visible { outline:2px solid var(--vert); outline-offset:2px; }
.lecteur-prec { left:12px; }
.lecteur-suiv { right:12px; }
.lecteur.zoome .lecteur-nav { opacity:0; pointer-events:none; }

.lecteur-chargement { position:absolute; top:50%; left:50%; width:42px; height:42px; margin:-21px 0 0 -21px; border-radius:50%; border:3px solid rgba(255,255,255,0.18); border-top-color:var(--vert); animation:lecteurTourne 0.8s linear infinite; opacity:0; pointer-events:none; transition:opacity 0.2s ease 0.15s; }
.lecteur.charge .lecteur-chargement { opacity:1; }
@keyframes lecteurTourne { to { transform:rotate(360deg); } }

.lecteur-legende { flex:none; min-height:48px; padding:12px 20px 6px; text-align:center; transition:opacity 0.2s ease; }
.lecteur-legende-cat { display:inline-block; font-size:10px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:#1e2018; background:var(--vert); padding:2px 9px; border-radius:20px; vertical-align:middle; margin-right:8px; }
.lecteur-legende-texte { font-size:15px; font-weight:500; vertical-align:middle; }
.lecteur-aide { display:block; font-size:11px; color:rgba(255,255,255,0.45); margin-top:4px; }

.lecteur-vignettes { position:relative; flex:none; display:flex; gap:8px; overflow-x:auto; padding:8px 16px 14px; scroll-behavior:smooth; scrollbar-width:none; }
.lecteur-vignettes::-webkit-scrollbar { display:none; }
.lecteur-vignette { flex:none; width:64px; height:64px; padding:0; border:2px solid transparent; border-radius:8px; overflow:hidden; background:#2a2c22; cursor:pointer; opacity:0.45; transition:opacity 0.2s ease, border-color 0.2s ease, transform 0.2s ease; }
.lecteur-vignettes::before, .lecteur-vignettes::after { content:''; flex:1 0 0; }
.lecteur-vignette img { width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }
.lecteur-vignette:hover { opacity:0.8; }
.lecteur-vignette.active { opacity:1; border-color:var(--vert); transform:translateY(-2px); }

.lecteur-progression { position:absolute; left:0; top:0; height:3px; width:0; background:var(--vert); z-index:3; }
.lecteur.diaporama .lecteur-progression { animation:lecteurProgression var(--duree-diapo, 4s) linear forwards; }
@keyframes lecteurProgression { from { width:0; } to { width:100%; } }

.lecteur.zoome .lecteur-legende, .lecteur.zoome .lecteur-vignettes { opacity:0.25; }

@media (max-width:767px) {
    .lecteur-haut { padding:8px 6px 4px 16px; }
    .lecteur-scene { padding:0; }
    .lecteur-image { border-radius:0; box-shadow:none; }
    .lecteur-nav { display:none; }
    .lecteur-legende { padding:10px 16px 4px; min-height:40px; }
    .lecteur-legende-texte { font-size:14px; }
    .lecteur-vignette { width:52px; height:52px; }
}
@media (max-height:500px) {
    .lecteur-vignettes, .lecteur-aide { display:none; }
}

@media (prefers-reduced-motion:reduce) {
    .galerie-tuile.apparait, .lecteur-image.anime { animation:none; transition:none; }
    .galerie-tuile img { transition:none; }
}