/* ===== IMAGE PLACEHOLDERS ===== */
/* Ces styles créent des placeholders visuels pour les images manquantes */

/* Testimonial Avatars */
.testimonial-avatar {
    background: linear-gradient(135deg, #4A90E2 0%, #7FB3E8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    font-weight: 700;
}

.testimonial-avatar::before {
    content: attr(alt);
    font-size: 1.5rem;
}

/* Blog Images */
.blog-image {
    background: linear-gradient(135deg, #2E5C8A 0%, #4A90E2 50%, #7FB3E8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.blog-image::before {
    content: '📰';
    font-size: 4rem;
    opacity: 0.3;
}

.blog-image img {
    display: none;
}

/* Logo Items */
.logo-item {
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-item::before {
    content: '🏫';
    font-size: 3rem;
    opacity: 0.3;
}

.logo-item img {
    display: none;
}

/* Alternative: Show broken image with styled placeholder */
img[src*="testimonial"],
img[src*="blog"],
img[src*="logo-client"] {
    position: relative;
}

img[src*="testimonial"]:not([src=""]),
img[src*="blog"]:not([src=""]),
img[src*="logo-client"]:not([src=""]) {
    display: block;
}

/* Fallback for missing images */
@supports (content: url()) {
    img[src*="testimonial"]::before,
    img[src*="blog"]::before,
    img[src*="logo-client"]::before {
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, #4A90E2 0%, #7FB3E8 100%);
    }
}