/* Améliorations pour la gestion homogène des images de membres */
/* Styles avec spécificité élevée pour override les styles de base */

/* Configuration avancée de .member-image pour une meilleure gestion des résolutions */
.member-card .member-image {
    height: 250px !important;
    overflow: hidden !important;
    background: linear-gradient(135deg, var(--accent-color) 0%, #e0e0e0 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    border-radius: 12px 12px 0 0 !important;
}

/* Effet de brillance subtil sur le conteneur d'image */
.member-card .member-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}

/* Configuration optimisée des images */
.member-card .member-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    transition: transform 0.3s ease, filter 0.3s ease, opacity 0.3s ease !important;
    /* Amélioration de la qualité visuelle */
    filter: contrast(1.05) brightness(1.02) saturate(1.1) !important;
    /* Anti-aliasing pour des contours plus nets */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    /* Assurer que l'image est visible par défaut */
    opacity: 1 !important;
    /* Reset des marges et paddings qui pourraient affecter le centrage */
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

/* Effet hover sur les images */
.member-card:hover .member-image img {
    transform: scale(1.05) !important;
    filter: contrast(1.1) brightness(1.05) saturate(1.15) !important;
}

/* Gestion des images qui ne se chargent pas ou placeholder */
.member-card .member-image img[src=""], 
.member-card .member-image img:not([src]),
.member-card .member-image img[src*="placeholder"] {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
    font-size: 2rem !important;
    font-weight: bold !important;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3) !important;
}

/* Support moderne pour les ratios d'aspect */
@supports (aspect-ratio: 1) {
    .member-card .member-image {
        aspect-ratio: 4/3;
        height: auto !important;
        min-height: 220px !important;
        max-height: 280px !important;
    }
}

/* Gestion spécifique pour les images portrait vs paysage */
.member-card .member-image img[style*="aspect-ratio"] {
    object-fit: cover !important;
    object-position: center top !important;
}

/* Amélioration pour les images WebP et formats modernes */
.member-card .member-image img[src$=".webp"],
.member-card .member-image img[src$=".avif"] {
    image-rendering: auto;
    filter: contrast(1.02) brightness(1.01) saturate(1.05) !important;
}

/* Responsive design amélioré */
@media (max-width: 768px) {
    .member-card .member-image {
        height: 220px !important;
        max-height: 220px !important;
    }
}

@media (max-width: 480px) {
    .member-card .member-image {
        height: 200px !important;
        max-height: 200px !important;
    }
}

/* Animation de chargement pour les images - appliquée seulement au chargement */
.member-card .member-image img.loading {
    opacity: 0 !important;
    animation: fadeInImage 0.5s ease-in-out forwards;
}

@keyframes fadeInImage {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Styles pour images haute résolution (Retina) */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
    .member-card .member-image img {
        image-rendering: -webkit-optimize-contrast;
        filter: contrast(1.03) brightness(1.01) saturate(1.08) !important;
    }
}

/* Gestion des erreurs de chargement d'images */
.member-card .member-image img[alt]:after {
    content: attr(alt);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.7);
    color: white;
    padding: 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
    text-align: center;
    display: none;
}

/* Affichage du texte alternatif en cas d'erreur */
.member-card .member-image img[src=""], 
.member-card .member-image img:not([src]) {
    position: relative;
}

.member-card .member-image img[src=""]:after,
.member-card .member-image img:not([src]):after {
    display: block;
}