/* La table de visionnage. Le monde (.world) est déplacé et mis à l'échelle ; les polaroïds y sont posés (au plus ~200 dans le DOM). */

.table {
  position: fixed; inset: 0; overflow: hidden; overflow: clip; touch-action: none; cursor: grab;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; background-color: var(--g-green);
}
.table.is-panning { cursor: grabbing; }
/* Le fond est un frère du monde : l'animer ne recalcule le style d'aucun polaroïd */
.table__bg {
  --bx: 0px; --by: 0px; --bs: 1;
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.4px), radial-gradient(rgba(0, 0, 0, .12) 1px, transparent 1.4px);
  background-size: calc(7px * var(--bs)) calc(7px * var(--bs)), calc(11px * var(--bs)) calc(11px * var(--bs));
  background-position: var(--bx) var(--by), var(--bx) var(--by);
}
.table::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 45%, rgba(10, 24, 14, .55)); }
.world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.table.is-moving .world { will-change: transform; }
.world.is-easing { transition: transform .55s cubic-bezier(.22, .8, .24, 1); }

/* ---------- Polaroïd ---------- */
.polaroid {
  --r: 0deg;
  position: absolute; left: 0; top: 0; width: 220px; margin: 0; padding: 12px 12px 56px;
  background: var(--g-paper); rotate: var(--r); cursor: grab; user-select: none; -webkit-user-select: none;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .25), 0 12px 22px -10px rgba(0, 0, 0, .6);
  transition: scale .25s cubic-bezier(.3, 1.5, .5, 1), rotate .25s ease, box-shadow .25s ease;
}
.polaroid img { display: block; width: 196px; height: 196px; object-fit: cover; object-position: var(--op, 50% 50%); background: #cbb9a8; pointer-events: none; -webkit-user-drag: none; filter: saturate(.92) contrast(1.02); }
.polaroid.is-broken img { visibility: hidden; }
.polaroid__cap { position: absolute; left: 12px; right: 12px; bottom: 14px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 15px; font-weight: 500; color: var(--g-caption); pointer-events: none; }
.polaroid__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.polaroid__time { flex: none; font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--g-time); }
.polaroid.has-tape::before { /* un bout de ruban adhésif de temps en temps */
  content: ""; position: absolute; top: -12px; left: 50%; width: 76px; height: 24px; translate: -50% 0; rotate: -4deg;
  background: rgba(246, 203, 189, .78); box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
}
.polaroid:focus-visible { outline: 4px solid var(--g-peach); outline-offset: 5px; border-radius: 2px; }
/* Porter ou lancer : la rotation est pilotée image par image (js), donc jamais de transition dessus */
.polaroid.is-drag, .polaroid.is-glide { cursor: grabbing; scale: 1.08; box-shadow: 0 2px 2px rgba(0, 0, 0, .2), 0 34px 40px -14px rgba(0, 0, 0, .65); transition: scale .15s ease, box-shadow .15s ease; }
.polaroid.is-land { animation: g-land .42s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes g-land { 0% { scale: 1.06; } 45% { scale: .985; } 100% { scale: 1; } }
.polaroid.is-focus { rotate: 0deg; scale: 1.02; box-shadow: 0 2px 2px rgba(0, 0, 0, .2), 0 30px 50px -14px rgba(0, 0, 0, .7); }
/* Une photo qui vient d'être validée tombe sur la table */
.polaroid.is-drop { animation: g-drop .95s cubic-bezier(.3, 1.2, .5, 1) backwards; animation-delay: var(--drop-delay, 0s); }
@keyframes g-drop {
  0%   { transform: translateY(-140px); scale: 1.55; opacity: 0; box-shadow: 0 2px 2px rgba(0, 0, 0, .15), 0 60px 50px -20px rgba(0, 0, 0, .55); }
  35%  { opacity: 1; }
  70%  { transform: translateY(0); scale: .97; }
  100% { transform: none; scale: 1; }
}
.table.is-far .polaroid__cap { opacity: 0; }

/* ---------- Interface par-dessus la table ---------- */
.g-hint {
  position: fixed; z-index: 20; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); width: max-content; max-width: min(92vw, 560px);
  margin: 0; padding: 10px 16px; border-radius: 18px; background: var(--g-night); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); translate: -50% 0;
  text-align: center; font-size: 13px; font-weight: 500; line-height: 1.4; transition: opacity .6s; pointer-events: none;
}
.g-hint.is-gone { opacity: 0; }
.g-zoom {
  position: fixed; z-index: 20; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); translate: -50% 0; width: max-content;
  display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 99px; background: var(--g-night); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 10px 24px rgba(0, 0, 0, .4);
}
.g-zoom button { height: var(--g-hit); min-width: var(--g-hit); padding: 0 14px; border-radius: 99px; font: 600 22px/1 var(--font); color: var(--g-cream); cursor: pointer; }
.g-zoom button:hover { background: rgba(255, 255, 255, .12); }
.g-zoom .g-zoom__fit { font-size: 15px; white-space: nowrap; background: var(--g-coral); color: var(--g-ink-on-coral); }
.g-zoom .g-zoom__fit:hover { background: #d98068; }
.g-zoom output { min-width: 56px; text-align: center; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }

[data-mode="list"] .table, [data-mode="list"] .g-zoom, [data-mode="list"] .g-hint { display: none; }

@media (prefers-reduced-motion: reduce) {
  .world.is-easing, .polaroid { transition: none; }
  .polaroid.is-land { animation: none; }
  .polaroid.is-drop { animation: g-fade .4s ease backwards; animation-delay: var(--drop-delay, 0s); }
  .g-hint { transition: none; }
}
@keyframes g-fade { from { opacity: 0; } to { opacity: 1; } }