@charset "utf-8";
/* Visionneuse d'images — partagée par les DEUX univers visuels du site : la page
   « pourquoi » (sketch.css) et les pages de vote (style.css). Sortie dans son propre
   fichier le jour où les pages de vote en ont eu besoin : recopiée dans les deux
   feuilles, elle aurait divergé à la première correction.

   Elle ne suit ni l'un ni l'autre langage : par-dessus une image plein écran, un fond
   sombre neutre est le seul choix qui ne discute pas avec la photo. */
/* ── Visionneuse ─────────────────────────────────────────────────────────────
   Fond sombre translucide, image au format papier comme les vignettes. Pas
   d'ombre portée ici non plus : le fond assombri suffit à détacher l'image. */
.lightbox {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 20px; background: rgba(30, 26, 24, .88);
}
.lightbox[hidden] { display: none; }
.lightbox img {
  max-width: min(1000px, 100%); max-height: 86vh; width: auto; height: auto;
  background: #fffdfa; padding: 10px 10px 24px; border: 1px solid rgba(58,51,48,.4);
}
.lb-close, .lb-nav {
  flex: none; cursor: pointer; color: var(--paper); background: none; border: none;
  font-family: 'Caveat', cursive; line-height: 1; padding: 6px 12px;
}
.lb-close { position: absolute; top: 10px; right: 16px; font-size: 2.6rem; }
.lb-nav { font-size: 3.4rem; opacity: .75; }
.lb-close:hover, .lb-nav:hover { opacity: 1; color: #fff; }
.lb-close:focus-visible, .lb-nav:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 620px) {
  .lightbox { padding: 12px; gap: 2px; }
  .lightbox img { max-height: 74vh; padding: 6px 6px 16px; }
  .lb-nav { font-size: 2.4rem; padding: 4px; }
}