/* Images dynamiques des archives */
.ksm-ai { position: relative; display: block; overflow: hidden; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.ksm-ai > img:not(.ksm-ai-alt) { display: block; }
.ksm-ai .ksm-ai-alt { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; opacity: 0; transition: opacity var(--ksm-ai-fade, 160ms) ease; pointer-events: none; margin: 0 !important; }
.ksm-ai .ksm-ai-alt.on { opacity: 1; }
.ksm-ai-dots { position: absolute; left: 0; right: 0; bottom: 6px; display: flex; justify-content: center; gap: 5px; pointer-events: none; opacity: 0; transition: opacity .15s; }
.ksm-ai-dots i { display: block; width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .6); box-shadow: 0 0 2px rgba(0, 0, 0, .55); }
.ksm-ai-dots i.on { background: #fff; transform: scale(1.25); }
.ksm-ai:hover .ksm-ai-dots, .ksm-ai.is-touched .ksm-ai-dots { opacity: 1; }
.ksm-ai-ar { position: absolute; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; background: rgba(0, 0, 0, .28); color: #fff; font: 700 15px/21px Arial, sans-serif; text-align: center; opacity: .85; display: none; user-select: none; -webkit-user-select: none; }
.ksm-ai-prev { left: 5px; }
.ksm-ai-next { right: 5px; }
@media (hover: none), (pointer: coarse) {
  .ksm-ai-ar { display: block; }
  .ksm-ai-dots { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .ksm-ai .ksm-ai-alt { transition: none; } }

/* Fond derrière la photo (png détourés) : posé en ligne par le module ; la photo secondaire remplace la principale au lieu de se superposer */
.ksm-ai-swap .ksm-ai-alt { transition: none; }
.ksm-ai-swap .ksm-ai-alt.on { transition: opacity var(--ksm-ai-fade, 160ms) ease; }
.ksm-ai-swap.is-alt > img:not(.ksm-ai-alt) { visibility: hidden; }
.ksm-ai-contain .ksm-ai-alt { object-fit: contain; }
.ksm-ai-contain > img:not(.ksm-ai-alt) { object-fit: contain; }

/* Réglages de hauteur : on rogne le bas du fond (--ksm-ai-cut) et on ajoute un espace avant le nom du produit (--ksm-ai-gap) */
.ksm-ai { margin-bottom: calc(var(--ksm-ai-gap, 0px) - var(--ksm-ai-cut, 0px)); clip-path: inset(0 0 var(--ksm-ai-cut, 0px) 0); }
.ksm-ai-dots { bottom: calc(6px + var(--ksm-ai-cut, 0px)); }
.ksm-ai-ar { top: calc(50% - var(--ksm-ai-cut, 0px) / 2); }