/* Styles communs pour les pages d'accueil */
.hero-bg {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(255, 255, 255, 0.9) 100%),
                url('https://images.unsplash.com/photo-1490645935967-10de6ba17061?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.card-hover {
    transition: all 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.fade-in {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.6s ease forwards;
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.price-highlight {
    background: linear-gradient(45deg, #ef4444, #dc2626);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.promotion-badge {
    background: linear-gradient(45deg, #ef4444, #f97316);
}

.quiz-container {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
}

.progress-bar {
    transition: width 0.3s ease;
}

/* Vous pouvez ajouter d'autres styles spécifiques ici */