/* ═══════════════════════════ Le poster photo ═══════════════════════════
 *
 * Servie **seulement** sur la fiche du poster photo (`views/product-affiche.liquid`). Il n'y a
 * rien à dessiner : la photo, et selon deux attributs, un liseré blanc autour (`data-marge`) et un
 * filtre (`data-tirage`). Le sens (`data-orientation`) ne change que le rapport de l'affiche, que
 * pose l'éditeur — et la fabrication, qui rouvre cette page — sur `#affiche`.
 *
 * ── La palette ──
 *
 * Des couleurs de **produit**, pas de charte (point 6 quater) : le blanc du papier, et le beige
 * du cadre vide avec son encre. Elles sont toutes ici, en tête, et nulle part ailleurs dans le
 * fichier : un test y tient.
 *
 * Tout est mesuré en `cqw` — la largeur de l'affiche —, pour qu'un A4 et un 70 × 100 soient la
 * même affiche à deux échelles. **La marge est donc un pourcentage de la largeur**, la même
 * des quatre côtés, quel que soit le sens : en paysage, la largeur est le grand côté.
 */
.photoposter {
  --pp-papier: #fff; --pp-vide: #e9e3d8; --pp-vide-encre: #5d564c; --pp-vide-trait: #a79f93;
  --pp-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  position: relative; overflow: hidden; background: var(--pp-papier);
}
.photoposter [hidden] { display: none !important; }

/* Un cadre vide est un rapport, pas un carré : sans script, le portrait et le paysage ont un
   rapport par défaut, que l'éditeur remplace par celui du format dès qu'il tourne. */
.photoposter[data-orientation="Paysage"] { aspect-ratio: 7 / 5; }

.photoposter__photo { position: absolute; inset: 0; margin: 0; overflow: hidden; background: var(--pp-vide); }
.photoposter[data-marge="Marge blanche"] .photoposter__photo { inset: 5cqw; }
.photoposter__photo img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  object-position: var(--photo-x, 50%) var(--photo-y, 40%);
  transform: scale(var(--photo-zoom, 1)); transform-origin: var(--photo-x, 50%) var(--photo-y, 40%);
}
.photoposter__photo[data-photo] { touch-action: none; cursor: grab; }
/* **Sur un écran tactile, la page défile encore sur la photo** : elle remplit toute l'affiche, et
   bloquer le défilement vertical, c'était une page qui ne bouge plus sous le doigt. Le glissement
   horizontal recadre, et les curseurs du formulaire règlent le reste. */
@media (pointer: coarse) { .photoposter__photo[data-photo] { touch-action: pan-y; } }

.photoposter__grain { display: none; position: absolute; inset: 0; background-image: var(--pp-texture); background-size: 24cqw; opacity: .22; mix-blend-mode: multiply; pointer-events: none; }
.photoposter__vide {
  position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; justify-items: center; gap: 1.6cqw;
  cursor: pointer; margin: 0; padding: 10%; color: var(--pp-vide-encre); border: 1px dashed var(--pp-vide-trait);
  font-family: "Inter", system-ui, sans-serif; font-size: 3cqw; line-height: 1.3; text-align: center;
}
.photoposter__vide svg { width: 9cqw; height: auto; }

/* Le tirage : un filtre sur la photo, et le grain par-dessus pour l'argentique. */
.photoposter[data-tirage="Couleur douce"] .photoposter__photo img { filter: contrast(.9) saturate(.82) brightness(1.03); }
.photoposter[data-tirage="Noir et blanc"] .photoposter__photo img { filter: grayscale(1) contrast(1.06); }
.photoposter[data-tirage="Argentique"] .photoposter__photo img { filter: grayscale(1) contrast(.88) brightness(1.05); }
.photoposter[data-tirage="Argentique"] .photoposter__grain { display: block; }