/* PAMOS — Mosaïque catalogue 4×4 — v8 */
/* =====================================================================
   COMPOSANT « MOSAÏQUE PAMOS » — tout est préfixé .pmr
   ===================================================================== */
.pmr {
  /* ---------- RÉGLAGES ---------- */
  --pmr-bg: #ffffff;      /* couleur des lignes entre les carrés (= fond du site) */
  --pmr-cols: 4;          /* 4 x 4 */
  --pmr-gap: 0.5%;        /* espace entre les carrés */
  --pmr-pad: 0;           /* marge intérieure du grand carré */
  --pmr-radius: 2px;      /* arrondi des carrés (0 = net) */
  --pmr-rot: 6deg;        /* angle au survol (5 à 8deg) */
  --pmr-scale: 1.05;      /* agrandissement au survol */
  --pmr-dur: 320ms;       /* durée (250 à 400ms) */
  --pmr-ease: cubic-bezier(.33, .1, .25, 1); /* sans rebond */
  --pmr-font: inherit;
  font-family: var(--pmr-font);
}
.pmr *, .pmr *::before, .pmr *::after { box-sizing: border-box; }

.pmr__grid {
  list-style: none; margin: 0; padding: var(--pmr-pad);
  width: 100%; aspect-ratio: 1 / 1;
  display: grid; gap: var(--pmr-gap);
  grid-template-columns: repeat(var(--pmr-cols), 1fr);
  grid-template-rows: repeat(var(--pmr-cols), 1fr);
  background: var(--pmr-bg);
}
/* La cellule reste fixe (zone de survol) ; seule l'image se transforme */
.pmr__cell { position: relative; z-index: 1; margin: 0; min-width: 0; min-height: 0; }
.pmr__cell img {
  display: block; width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: var(--pmr-radius);
  transition: transform var(--pmr-dur) var(--pmr-ease), box-shadow var(--pmr-dur) var(--pmr-ease);
  -webkit-user-drag: none; user-select: none;
}

/* Survol : seulement avec souris, et hors réduction des mouvements */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .pmr__cell:hover { z-index: 10; }
  .pmr__cell:hover img {
    transform: rotate(calc(var(--pmr-rot) * var(--dir, 1))) scale(var(--pmr-scale));
    box-shadow: 0 6px 18px rgba(0, 0, 0, .5);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pmr__cell img { transition: none; }
}