/* WebP Image Optimization Styles */

/* Picture elements - Support moderne et fallback */
picture {
    display: contents;
}

picture img {
    display: block;
}

/* Support pour les images responsives */
@supports (content: url('data:image/webp;base64,')) {
    /* Le navigateur supporte WebP */
    picture source[type="image/webp"] {
        display: block;
    }
}

/* Fallback pour les navigateurs ne supportant pas WebP */
@supports not (content: url('data:image/webp;base64,')) {
    picture source[type="image/webp"] {
        display: none;
    }
}

/* Optimisation des images team photos */
picture img[width="140"] {
    object-fit: cover;
    object-position: top center;
}

/* Optimisation des images ribbon */
picture img.ribbon-large-img {
    display: block;
    margin: 0 auto;
}

/* Lazy loading - Optimisation du rendu */
img[loading="lazy"] {
    background-color: #f0f0f0;
    min-height: 100px;
}

/* Image décodage asynchrone pour meilleures perfs */
img[decoding="async"] {
    /* Utiliser la décodage asynchrone pour ne pas bloquer le rendu */
    image-rendering: -webkit-optimize-contrast;
}

/* Print - Afficher les originales de haute qualité en PDF */
@media print {
    picture {
        display: contents;
    }
    
    picture source[type="image/webp"] {
        display: none !important;
    }
}

/* Progressive enhancement - LQIP (Low Quality Image Placeholder) */
img[loading="lazy"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        45deg,
        transparent 25%,
        rgba(255, 255, 255, 0.1) 25%,
        rgba(255, 255, 255, 0.1) 50%,
        transparent 50%,
        transparent 75%,
        rgba(255, 255, 255, 0.1) 75%
    );
    background-size: 50px 50px;
    animation: loading 2s infinite linear;
}

@keyframes loading {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 50px 50px;
    }
}