/* Styles personnalisés pour Francuz */

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in {
    animation: fadeIn 0.6s ease-out;
}

/* Boutons personnalisés */
.btn-primary {
    @apply bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-md transition duration-300;
}

.btn-secondary {
    @apply bg-gray-600 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded-md transition duration-300;
}

.btn-success {
    @apply bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-md transition duration-300;
}

.btn-danger {
    @apply bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-md transition duration-300;
}

/* Cartes */
.card {
    @apply bg-white rounded-lg shadow-lg p-6;
}

.card-header {
    @apply bg-blue-600 text-white p-6 -m-6 mb-6 rounded-t-lg;
}

/* Navigation */
.nav-link {
    @apply text-gray-700 hover:text-blue-600 transition duration-300;
}

/* Progression */
.progress-bar {
    @apply w-full bg-gray-200 rounded-full h-2.5;
}

.progress-fill {
    @apply bg-blue-600 h-2.5 rounded-full transition-all duration-300;
}

/* Alerts */
.alert {
    @apply px-4 py-3 rounded mb-4;
}

.alert-error {
    @apply bg-red-100 border border-red-400 text-red-700;
}

.alert-success {
    @apply bg-green-100 border border-green-400 text-green-700;
}

.alert-info {
    @apply bg-blue-100 border border-blue-400 text-blue-700;
}

/* Responsive */
@media (max-width: 768px) {
    .container {
        @apply px-4;
    }
    
    .grid-responsive {
        @apply grid-cols-1;
    }
}

/* Leçons */
.lesson-item {
    @apply border border-gray-200 rounded-lg p-4 hover:shadow-md transition duration-300;
}

.lesson-completed {
    @apply bg-green-50 border-green-200;
}

/* Icônes de statut */
.status-icon {
    @apply w-8 h-8 rounded-full flex items-center justify-center;
}

.status-completed {
    @apply bg-green-500 text-white;
}

.status-pending {
    @apply bg-gray-300 text-gray-600;
}