/**
 * Styles frontend pour JVG Optimizer
 */

/* Images lazy load - CORRECTION: ne plus masquer les images */
img.jvg-lazy {
    /* Retirer l'opacité 0 qui faisait disparaître les images */
    transition: opacity 0.3s ease-in-out;
}

/* Images optimisées - affichage amélioré */
img.jvg-lazy,
img[loading="lazy"] {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Support WebP avec fallback */
picture {
    display: inline-block;
    line-height: 0;
}

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

/* Amélioration de l'affichage des images */
img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* Images dans les modules membres - toujours visibles */
.member img,
.membre img,
.avatar img,
.profile img {
    opacity: 1 !important;
    display: inline-block !important;
}

/* Retirer l'animation de pulsation qui peut être gênante */

/* Placeholder pour images en cours de chargement */
.jvg-image-wrapper {
    position: relative;
    display: inline-block;
}

.jvg-image-wrapper::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: jvg-loading 1.5s ease-in-out infinite;
    z-index: -1;
}

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

/* Responsive images */
img[loading="lazy"] {
    max-width: 100%;
    height: auto;
}