/* CSS pour créer des images placeholder avec du contenu */

.image-placeholder {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    position: relative;
    min-height: 200px;
}

.image-placeholder::before {
    content: '????? Cabine Pirate';
    font-size: 1.5rem;
    text-align: center;
}

.image-placeholder.small {
    min-height: 80px;
}

.image-placeholder.small::before {
    content: '??';
    font-size: 2rem;
}

/* Styles pour les images de test par défaut */
.test-image {
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 1.2rem;
}

.test-image-1 {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.test-image-2 {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.test-image-3 {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.test-image-4 {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

/* Animation pour indiquer le chargement */
.loading-image {
    background: linear-gradient(90deg, #f0f0f0 25%, transparent 37%, #f0f0f0 63%);
    background-size: 400% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
}

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