/* Responsive Image Support - TÂCHE 2.3 */

/* Lazy loading placeholder (LQIP - Low Quality Image Placeholder) */
img[loading="lazy"] {
  background-color: rgba(255, 255, 255, 0.05);
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Optimiser les images dans les conteneurs */
.responsive-img-container img {
  width: 100%;
  height: auto;
  display: block;
  max-width: 100%;
}

/* Mobile first - images responsives */
@media (max-width: 480px) {
  img[loading="lazy"] {
    width: 100%;
    height: auto;
  }
}

@media (max-width: 768px) {
  img[loading="lazy"] {
    max-width: 100%;
    height: auto;
  }
}

@media (min-width: 1200px) {
  img[loading="lazy"] {
    will-change: transform;
  }
}

/* Fallback pour navigateurs sans lazy loading natif */
@supports not (content: "") {
  img[loading="lazy"] {
    background-image: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.05),
      rgba(255, 255, 255, 0.1),
      rgba(255, 255, 255, 0.05)
    );
    background-size: 200% 100%;
  }
}