/* ============================================================
   ZOOM DES PHOTOS (site public + espace bureau)
   Feuille commune aux deux interfaces : le geste de zoom est le meme
   partout, il n'a pas a etre redecrit deux fois.
   ============================================================ */

/* La scene est le cadre dans lequel la photo se deplace. Elle capte les
   gestes (touch-action: none) : sans ca le navigateur prend le pincement
   pour lui et fait bouger toute la page au lieu de la photo. */
.zoom-scene {
  position: relative;
  overflow: hidden;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  overscroll-behavior: contain;
}
.zoom-img {
  transform-origin: 50% 50%;
  will-change: transform;
  cursor: zoom-in;
  -webkit-user-drag: none;
  max-width: 100%;
  max-height: 100%;
}
.zoom-scene.zoome .zoom-img { cursor: grab; }
.zoom-scene.zoome:active .zoom-img { cursor: grabbing; }

/* Trois boutons, toujours visibles : un geste qu'on ne voit pas n'existe
   pas pour la moitie des gens. Taille pouce (44 px) sur telephone. */
.zoom-outils {
  position: absolute;
  left: 50%;
  bottom: max(12px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(18, 19, 22, .82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .35);
  touch-action: manipulation;
}
.zoom-outils button {
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s ease, opacity .15s ease;
}
.zoom-outils button:hover:not(:disabled) { background: rgba(255, 255, 255, .16); }
.zoom-outils button:disabled { opacity: .35; cursor: default; }
.zoom-outils button svg { width: 20px; height: 20px; }
.zoom-outils .zoom-niveau {
  min-width: 66px;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 420px) {
  .zoom-outils button { min-width: 42px; height: 42px; padding: 0 9px; }
  .zoom-outils .zoom-niveau { min-width: 58px; font-size: 12.5px; }
}

/* Quelqu'un qui a demande moins d'animation ne veut pas d'un zoom qui
   glisse : on garde le resultat, pas le mouvement. */
@media (prefers-reduced-motion: reduce) {
  .zoom-img { transition: none !important; }
}