/* ==========================================
   IMAGES OPTIMISÉES
   ========================================== */

/* Conteneur d'image responsive */
.img-responsive {
  width: 100%;
  height: auto;
  display: block;
}

/* Image avec ratio fixe */
.img-container {
  position: relative;
  overflow: hidden;
  background: rgba(138, 43, 226, 0.1);
}

/* Ratios communs */
.img-container--16-9 {
  aspect-ratio: 16 / 9;
}

.img-container--4-3 {
  aspect-ratio: 4 / 3;
}

.img-container--1-1 {
  aspect-ratio: 1 / 1;
}

.img-container--3-2 {
  aspect-ratio: 3 / 2;
}

/* Image dans le container */
.img-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Loading placeholder */
.img-loading {
  background: linear-gradient(
    90deg,
    rgba(138, 43, 226, 0.1) 0%,
    rgba(186, 85, 211, 0.2) 50%,
    rgba(138, 43, 226, 0.1) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Image chargée */
.img-loaded {
  animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Picture avec fallback */
.picture-wrapper {
  display: block;
  width: 100%;
}

.picture-wrapper img {
  width: 100%;
  height: auto;
  display: block;
}

/* Images avec effets */
.img-hover-zoom {
  transition: transform 0.3s ease;
}

.img-hover-zoom:hover {
  transform: scale(1.05);
}

.img-rounded {
  border-radius: 20px;
}

.img-circle {
  border-radius: 50%;
}

/* Optimisation performances */
img[loading="lazy"] {
  min-height: 100px; /* Évite le CLS */
}