/* ==========================================================================
   visionneuse.css — La Boîte de Photos
   Photo en grand sur toute la fenetre, legende en filigrane en bas.
   C'est le geste attendu quand on montre une vieille photo : on la regarde.
   ========================================================================== */

.agrandissable { cursor: zoom-in; }

.visionneuse {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(20, 15, 11, 0.96);
  /* 100dvh suit la barre d'adresse mobile ; 100vh sert de repli. */
  height: 100vh;
  height: 100dvh;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.visionneuse.ouverte { display: flex; }

body.visionneuse-active { overflow: hidden; }

.visionneuse-image {
  max-width: 100%;
  max-height: 100%;
  /* La photo entiere reste visible, jamais rognee. */
  object-fit: contain;
  cursor: zoom-out;
}

/* Legende en filigrane : lisible sur une photo claire comme sur une sombre,
   grace au degrade, sans jamais masquer le bas de l'image. */
.visionneuse-legende {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 42px 20px calc(20px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent);
  color: var(--c-fond);
  font-family: var(--f-titre);
  font-size: 1.05rem;
  line-height: 1.4;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  pointer-events: none;
}

.visionneuse-legende[hidden] { display: none; }

.visionneuse-fermer {
  position: absolute;
  top: calc(12px + env(safe-area-inset-top));
  right: 12px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 2px solid var(--c-fond);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
  color: var(--c-fond);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.visionneuse-fermer:hover {
  background: var(--c-primaire);
  border-color: var(--c-primaire);
}

@media (min-width: 700px) {
  .visionneuse-legende { font-size: 1.2rem; }
}