/* =========================================================
   LAZY LOADING - Images
========================================================= */

/**
 * Style pour les images lazy-loaded
 * Les images apparaissent progressivement
 */

img[loading="lazy"],
.lazy-image img {
    opacity: 0;
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity;
}

img[loading="lazy"].loaded,
.lazy-image img.loaded {
    opacity: 1;
}

/* Placeholder pour les images encore en cours de chargement */
img.placeholder {
    background-color: #f0f0f0;
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

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

/* Support du blur-up progressive */
img[data-blur] {
    filter: blur(10px);
}

img[data-blur].loaded {
    filter: blur(0);
}

/* Optimisation des images responsives */
picture {
    display: block;
}

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

/* Pour le lazy-loading avec observateur d'intersection */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}