/* ===== Mini-galerie libre — version "tirages posés à la main" ===== */
.panel .thumbs {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none; /* tu remettras auto si tu veux cliquer */
  pointer-events: auto;
}

/* Chaque vignette doit être positionnée absolument */
.panel .thumbs .thumb {
  position: absolute;
  /* pas de transform ici, sinon ça décale la position */
  pointer-events: auto;
}

/* ==== Paramètres individuels (position, taille, ratio) ==== */

/* ——— 1. Format 16:9 horizontal ——— */
.panel .thumbs .thumb[data-i="1"] {
  left: var(--i1-x, 70vw);
  top: var(--i1-y, 70vh);
  width: var(--i1-w, clamp(160px, 28vw, 320px));
  aspect-ratio: var(--i1-ratio, 4/3);
}

/* ——— 2. Format 9:16 vertical ——— */
.panel .thumbs .thumb[data-i="2"] {
  left: var(--i2-x, 82vw);
  top: var(--i2-y, 70vh);
  width: var(--i2-w, clamp(140px, 22vw, 240px));
  aspect-ratio: var(--i2-ratio, 3/4);
}

/* ——— 3. Format carré ——— */
.panel .thumbs .thumb[data-i="3"] {
  left: var(--i3-x, 76vw);
  top: var(--i3-y, 54vh);
  width: var(--i3-w, clamp(120px, 22vw, 200px));
  aspect-ratio: var(--i3-ratio, 1/1);
}

/* ——— Images à l'intérieur des thumbs ——— */
.panel .thumbs .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* garde le ratio sans déformation */
  display: block;
  border-radius: inherit;
  transform: scale(1.08); /* léger zoom statique */
  transition: transform 0.4s ease; /* animation douce */
}

/* ==== Effet "vivant" sans décalage au survol ==== */
@media (hover: hover) and (pointer: fine) {
  .panel .thumbs .thumb:hover img {
    transform: scale(1.15); /* zoom seulement sur l’image */
  }
  .panel .thumbs .thumb:hover {
    /* pas de translate ici pour éviter tout “saut” */
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
  }
}

/* ==== Mobile : grille propre ==== */
@media (max-width: 900px) {
  .panel .thumbs {
    position: static;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 16px;
    pointer-events: auto;
  }
  .panel .thumbs .thumb {
    position: static;
    width: 100%;
    max-width: 160px; /* un poil plus grand qu’avant */
  }
}

/* ——— Optionnel : effet au survol ——— */
.panel .thumbs .thumb:hover img {
  transform: scale(1.15);
}

/* ===== Positions par panneau des vignettes ===== */
#p1 {
  --i1-x: 56vw;
  --i1-y: 57vh;
  /* plsugrand */
  --i1-w: 25vw; /* ou 260px, selon ton ressenti */
}
#p2 {
  /* horiz */
  --i1-x: 47vw;
  --i1-y: 40vh;
  --i1-w: 25vw;
  /* carré */
  --i3-x: 39vw;
  --i3-y: 20vh;
  --i3-w: 14vw;
}
#p3 {
  --i1-x: 65vw;
  --i1-y: 10vh;
  --i1-w: 25vw;
}
#p4 {
  --i1-x: 66vw;
  --i1-y: 42vh;
  --i1-w: 24vw;

  --i3-x: -1vw;
  --i3-y: 2vh;
  --i3-w: 14vw;
}
#p5 {
  --i1-x: 67vw;
  --i1-y: 60vh;
  --i1-w: 22vw;

  --i2-x: 60vw;
  --i2-y: 42vh;
  --i2-w: 12vw;
}
#p6 {
  --i1-x: 47vw;
  --i1-y: 60vh;
  --i1-w: 22vw;
  --i2-x: 78vw;
  --i2-y: 5vh;
  --i2-w: 14vw;
}
#p7 {
  --i2-x: 30vw;
  --i2-y: 5vh;
  --i2-w: 17vw;
}
#p8 {
  --i1-x: 18vw;
  --i1-y: 6vh;
  --i1-w: 24vw;

  --i2-x: 39vw;
  --i2-y: 22vh;
  --i2-w: 13vw;
}