/* LA VISIONNEUSE DE PHOTOS (popotam-visionneuse.js, 03/11/2026). Écrite à la main, classes vz-.
   Une carte centrée sur un voile (plein écran au téléphone) ; la photo tient ENTIÈRE dans le cadre,
   on zoome puis on la fait glisser. z-index 470 : au-dessus de la fiche recette et de la recette de famille. */
.vz {
  position: fixed; inset: 0; z-index: 470; display: grid; place-items: center; padding: 24px;
  background: rgba(30, 25, 21, .72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  animation: vz-voile .25s ease both;
}
.vz.vz-out { animation: vz-voile .2s ease reverse both; }
.vz-carte {
  display: flex; flex-direction: column; width: min(980px, 100%); height: min(860px, 100%);
  border-radius: 26px; background: #FFFDF6; overflow: hidden;
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .55);
  animation: vz-entre .45s cubic-bezier(.3, 1.35, .45, 1) both;
  font-family: var(--font-body, "Hanken Grotesk", system-ui, sans-serif); color: #2A211B;
}
.vz.vz-out .vz-carte { animation: vz-entre .2s ease reverse both; }
@keyframes vz-voile { from { opacity: 0; } }
@keyframes vz-entre { from { opacity: 0; transform: scale(.94); } }
.vz-h { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 20px; border-bottom: 1.5px solid #EEDFC2; }
.vz-h b { flex: 1; min-width: 0; font: 800 16px var(--font-display, "Bricolage Grotesque", system-ui, sans-serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vz-z { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: #FCEFD9; }
.vz button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
.vz-z button { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: 0 1.5px 0 rgba(42, 33, 27, .12); transition: transform .25s cubic-bezier(.3, 1.35, .45, 1); }
.vz-z button:active { transform: scale(.88); }
.vz-z button:disabled { opacity: .4; cursor: default; }
.vz-pc { min-width: 54px; text-align: center; font: 800 13px var(--font-display, "Bricolage Grotesque", system-ui, sans-serif); font-variant-numeric: tabular-nums; }
.vz-x { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid #E6D3AE !important; background: #fff !important; transition: transform .35s cubic-bezier(.3, 1.35, .45, 1); }
.vz-x:hover { transform: rotate(90deg); }
/* Le cadre : la photo y tient entière, centrée ; zoomée, elle se saisit. */
.vz-v {
  position: relative; flex: 1; min-height: 0; display: grid; place-items: center; overflow: hidden;
  background: repeating-linear-gradient(45deg, #F6EEDD 0 12px, #F2E8D4 12px 24px);
  touch-action: none; cursor: zoom-in; -webkit-user-select: none; user-select: none;
}
.vz-v.vz-zoom { cursor: grab; }
.vz-v.vz-zoom:active { cursor: grabbing; }
.vz-i { max-width: calc(100% - 32px); max-height: calc(100% - 32px); border-radius: 8px; box-shadow: 0 14px 30px -14px rgba(60, 30, 10, .5); transform-origin: center; opacity: 0; transition: opacity .2s; will-change: transform; pointer-events: none; }
.vz-i.vz-pret { opacity: 1; }
.vz-aide { margin: 0; padding: 8px 16px 0; text-align: center; font-size: 12.5px; color: #6A5C4C; }
.vz-p { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 10px 16px 14px; }
.vz-p button { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 999px; background: #fff; border: 1.5px solid #E6D3AE !important; font: 800 13.5px var(--font-display, "Bricolage Grotesque", system-ui, sans-serif); }
.vz-p button:disabled { opacity: .4; cursor: default; }
.vz-n { font: 800 13px var(--font-display, "Bricolage Grotesque", system-ui, sans-serif); color: #6A5C4C; }
.vz-aide + .vz-p { padding-top: 6px; }
.vz-carte > .vz-aide:last-child { padding-bottom: 14px; }
@media (max-width: 600px) {
  .vz { padding: 0; }
  .vz-carte { width: 100vw; height: 100vh; height: 100dvh; border-radius: 0; }
  .vz-h { padding-top: calc(10px + env(safe-area-inset-top, 0px)); }
  .vz-carte > :last-child { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) { .vz, .vz-carte, .vz-i { animation: none !important; transition: none !important; } }