/**
 * Styles pour le lazy loading des images
 * Améliore l'expérience utilisateur avec des animations fluides
 */

/* Image en cours de chargement */
.lazy-image {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    background-color: #f0f0f0;
    background-image: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

/* Image chargée */
.lazy-image.lazy-loaded {
    opacity: 1;
    animation: none;
    background: none;
}

/* Animation de shimmer pour le placeholder */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Placeholder pour les images en cours de chargement */
.lazy-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: shimmer 1.5s infinite;
}

/* Styles pour les images dans les cards */
.actus-card .card-img,
.related-article-card .card-img,
.popular-post-item .post-img {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.actus-card .card-img.lazy-loaded,
.related-article-card .card-img.lazy-loaded,
.popular-post-item .post-img.lazy-loaded {
    transform: scale(1);
}

/* Hover effects pour les images chargées */
.actus-card:hover .card-img.lazy-loaded,
.related-article-card:hover .card-img.lazy-loaded {
    transform: scale(1.05);
}

/* Styles pour les images d'articles */
.article-featured-image .featured-img {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.article-featured-image .featured-img.lazy-loaded {
    opacity: 1;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .lazy-image {
        transition-duration: 0.2s; /* Animation plus rapide sur mobile */
    }
}

/* Styles pour les images avec aspect-ratio */
.lazy-image[style*="aspect-ratio"] {
    position: relative;
    overflow: hidden;
}

/* Placeholder pour les images avec dimensions fixes */
.lazy-image[width][height] {
    position: relative;
}

/* Amélioration de l'accessibilité */
.lazy-image:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

/* Styles pour les images dans les grilles */
.image-grid .lazy-image {
    width: 100%;
    height: auto;
    display: block;
}

/* Animation de fade-in pour les images chargées */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.lazy-image.lazy-loaded {
    animation: fadeIn 0.5s ease-out;
}

/* Styles pour les images de héros (pas de lazy loading) */
.hero-image {
    loading: eager;
    fetchpriority: high;
}

/* Styles pour les images critiques (above the fold) */
.critical-image {
    loading: eager;
    fetchpriority: high;
}

/* Styles pour les images non critiques */
.non-critical-image {
    loading: lazy;
    fetchpriority: low;
}