/* ---------- Chargement des images ----------
   Les classes sont posées par public/js/app.js tant que l'image n'est pas chargée. */

.img-host { position: relative; }

.img-host.is-img-loading {
  background-color: var(--bg-alt);
  background-image: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.55) 50%, transparent 80%);
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: img-shimmer 1.3s linear infinite;
}

img.img-pending {
  opacity: 0;
  min-height: 180px;
}

img.img-ready {
  opacity: 1;
  transition: opacity 0.45s ease, transform 0.4s ease, filter 0.2s ease;
}

.img-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  border: 3px solid rgba(11, 61, 102, 0.15);
  border-top-color: var(--accent);
  animation: img-spin 0.8s linear infinite;
  z-index: 3;
  pointer-events: none;
}

/* Petites images (logos partenaires) : squelette sur l'image elle-même */
img.img-pending-inline {
  min-width: 90px;
  min-height: 34px;
  border-radius: 6px;
  background-color: var(--bg-alt);
  background-image: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.55) 50%, transparent 80%);
  background-size: 200% 100%;
  animation: img-shimmer 1.3s linear infinite;
}

/* Image introuvable */
.img-host.is-img-error::before {
  content: "Image indisponible";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  color: var(--text-muted);
  background: var(--bg-alt);
  z-index: 2;
}

img.img-error { opacity: 0; min-height: 140px; }

/* Lightbox (agrandissement) */
.lightbox-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top-color: var(--accent);
  animation: img-spin 0.8s linear infinite;
  display: none;
  pointer-events: none;
}

.lightbox.is-loading .lightbox-spinner { display: block; }
.lightbox.is-loading .lightbox-image { opacity: 0; }
.lightbox-image { transition: opacity 0.3s ease; }

@keyframes img-shimmer {
  from { background-position: 150% 0; }
  to { background-position: -50% 0; }
}

@keyframes img-spin { to { transform: rotate(360deg); } }

@media (prefers-color-scheme: dark) {
  .img-host.is-img-loading,
  img.img-pending-inline {
    background-image: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.07) 50%, transparent 80%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .img-host.is-img-loading, img.img-pending-inline { animation: none; }
  .img-spinner, .lightbox-spinner { animation-duration: 2s; }
}