/* ================================================================
   galerie-produit.css v2.2 — 2026-08-05 11:07
   Composant galerie produit GranuloShop / Topas — conforme
   SPEC_galerie_produit_granuloshop vINT-1.0.
   Encodage : UTF-8 sans BOM · fins de ligne LF.
   Aucune dépendance. Réglages via variables CSS + data-* (voir .js).
   ================================================================ */

.prod-gallery{
  --gal-fade:600ms;
  --gal-ken-start:1.00;
  --gal-ken-end:1.06;
  --gal-ken-dur:7s;
  --gal-ratio:4/3;
  --gal-thumb-min:72px;
  --gal-thumb-max:120px;
  --gal-accent:#1d6fb8;
  --gal-border:#e2e2dc;
  --gal-surface:#f2f2ef;
  max-width:560px;margin:0 auto;font-family:inherit;
}

/* --- Scène --- */
.gal-stage{position:relative;width:100%;aspect-ratio:var(--gal-ratio);
  border-radius:12px;overflow:hidden;background:var(--gal-surface);
  border:1px solid var(--gal-border)}
.gal-slide{position:absolute;inset:0;opacity:0;transition:opacity var(--gal-fade) ease}
.gal-slide.is-active{opacity:1}
.gal-main-img{width:100%;height:100%;object-fit:contain;display:block;background:var(--gal-surface)}
.prod-gallery[data-fit="cover"] .gal-main-img{object-fit:cover}

/* --- Ken Burns (discret), origine variée par slide --- */
.gal-slide.is-active .gal-main-img{animation:gal-ken var(--gal-ken-dur) ease-out both}
.gal-slide:nth-of-type(1) .gal-main-img{transform-origin:top left}
.gal-slide:nth-of-type(2) .gal-main-img{transform-origin:bottom right}
.gal-slide:nth-of-type(3) .gal-main-img{transform-origin:top right}
.gal-slide:nth-of-type(4) .gal-main-img{transform-origin:bottom left}
@keyframes gal-ken{from{transform:scale(var(--gal-ken-start))}to{transform:scale(var(--gal-ken-end))}}

/* --- Légende (sous-titre) --- */
.gal-cap{position:absolute;left:0;right:0;bottom:0;padding:22px 16px 12px;
  background:linear-gradient(to top,rgba(0,0,0,.55),transparent);
  color:#fff;font-size:14px;line-height:1.3;
  opacity:0;transition:opacity var(--gal-fade) ease;pointer-events:none}
.gal-slide.is-active .gal-cap{opacity:1}
.gal-cap:empty{display:none}

/* --- Compteur n / total --- */
.gal-counter{position:absolute;top:10px;right:12px;z-index:2;
  font-size:12px;color:#fff;background:rgba(0,0,0,.4);
  border-radius:4px;padding:2px 8px;letter-spacing:.02em}

/* --- Flèches --- */
.gal-prev,.gal-next{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:38px;height:38px;border:none;border-radius:50%;
  background:rgba(0,0,0,.35);color:#fff;font-size:22px;line-height:1;
  cursor:pointer;opacity:0;transition:opacity .25s ease,background .25s ease}
.gal-prev{left:8px}.gal-next{right:8px}
.gal-stage:hover .gal-prev,.gal-stage:hover .gal-next{opacity:1}
.gal-prev:hover,.gal-next:hover{background:rgba(0,0,0,.55)}
.gal-prev:focus-visible,.gal-next:focus-visible{opacity:1;outline:2px solid #fff;outline-offset:2px}
@media (hover:none){.gal-prev,.gal-next{opacity:.6}}

/* --- Vignettes --- */
.gal-thumbs{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(var(--gal-thumb-min),var(--gal-thumb-max)));
  gap:10px;margin-top:12px;justify-content:center;
  opacity:1;transition:opacity var(--gal-fade) ease}
.gal-thumb{padding:0;border:2px solid var(--gal-border);border-radius:6px;
  background:var(--gal-surface);aspect-ratio:var(--gal-ratio);overflow:hidden;
  cursor:pointer;opacity:.6;
  transition:opacity .25s ease,border-color .25s ease,transform .25s ease}
.gal-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.gal-thumb:hover{opacity:.9}
.gal-thumb.is-active{opacity:1;border-color:var(--gal-accent);transform:translateY(-2px)}
.gal-thumb:focus-visible{outline:2px solid var(--gal-accent);outline-offset:2px}

/* --- Mode image unique : masquer tout l'habillage --- */
.prod-gallery.is-single .gal-counter,
.prod-gallery.is-single .gal-prev,
.prod-gallery.is-single .gal-next,
.prod-gallery.is-single .gal-thumbs{display:none}
/* image unique : rendu statique (pas de Ken Burns) */
.prod-gallery.is-single .gal-slide.is-active .gal-main-img{animation:none;transform:none}

/* --- Pied de version --- */
.gal-version{max-width:560px;margin:8px auto 0;font-size:11px;color:#8b8b88;text-align:right}

/* --- Réduction des animations --- */
@media (prefers-reduced-motion:reduce){
  .gal-slide{transition:none}
  .gal-slide.is-active .gal-main-img{animation:none;transform:none}
  .gal-cap{transition:none}
  .gal-thumbs{transition:none}
}

/* --- Responsive --- */
@media (max-width:640px){
  .prod-gallery{max-width:100%}
  .gal-thumbs{grid-template-columns:repeat(auto-fit,minmax(64px,1fr))}
}