/* Variables spécifiques aux cours */
    :root {
        --course-gradient: linear-gradient(135deg, #2E7D32 0%, #43A047 50%, #66BB6A 100%);
        --course-shadow: 0 10px 40px rgba(67, 160, 71, 0.15);
        --course-hover-shadow: 0 20px 60px rgba(67, 160, 71, 0.25);
    }
    
    .dark {
        --course-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
        --course-hover-shadow: 0 20px 60px rgba(67, 160, 71, 0.2);
    }
    
    /* Layout principal des cours */
    .courses-layout {
        @apply min-h-screen bg-gradient-to-b from-gray-50/50 to-white dark:from-gray-900 dark:to-gray-950;
        background-image: radial-gradient(at 20% 30%, rgba(67, 160, 71, 0.05) 0%, transparent 50%),
                         radial-gradient(at 80% 70%, rgba(33, 150, 243, 0.05) 0%, transparent 50%);
    }
    
    /* Container spécifique cours */
    .courses-container {
        @apply max-w-7xl mx-auto px-4 py-8 sm:px-6 lg:px-8;
    }
    
    /* Cartes de cours */
    .course-card {
        @apply relative group bg-white dark:bg-gray-800/80 backdrop-blur-sm rounded-2xl overflow-hidden border border-gray-200 dark:border-gray-700/50 transition-all duration-500 hover:border-[var(--agri-primary)]/30;
        box-shadow: var(--course-shadow);
        transform-style: preserve-3d;
        perspective: 1000px;
    }
    
    .course-card:hover {
        box-shadow: var(--course-hover-shadow);
        transform: translateY(-8px) scale(1.01);
    }
    
    .course-card::before {
        @apply content-[''] absolute inset-0 bg-gradient-to-br from-transparent via-transparent to-[var(--agri-primary)]/5 opacity-0 transition-opacity duration-500;
    }
    
    .course-card:hover::before {
        @apply opacity-100;
    }
    
    .course-image-container {
        @apply relative overflow-hidden h-48 lg:h-56 bg-gradient-to-br from-green-50 to-cyan-50 dark:from-gray-800 dark:to-gray-900;
    }
    
    .course-image {
        @apply w-full h-full object-cover transition-transform duration-700 group-hover:scale-110;
    }
    
    .course-overlay {
        @apply absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500;
    }
    
    /* Badges */
    .course-category-badge {
        @apply absolute top-4 left-4 px-3 py-1.5 rounded-xl text-xs font-bold text-white uppercase tracking-wide z-10;
        background: var(--agri-gradient);
        box-shadow: 0 4px 15px rgba(67, 160, 71, 0.4);
    }
    
    .course-level-badge {
        @apply absolute top-4 right-4 px-3 py-1.5 rounded-xl text-xs font-bold z-10;
    }
    
    .level-beginner { 
        @apply bg-gradient-to-r from-green-400 to-emerald-500 text-white;
        box-shadow: 0 4px 15px rgba(67, 160, 71, 0.3);
    }
    .level-intermediate { 
        @apply bg-gradient-to-r from-blue-400 to-cyan-500 text-white;
        box-shadow: 0 4px 15px rgba(33, 150, 243, 0.3);
    }
    .level-advanced { 
        @apply bg-gradient-to-r from-purple-400 to-purple-600 text-white;
        box-shadow: 0 4px 15px rgba(156, 39, 176, 0.3);
    }
    .level-expert { 
        @apply bg-gradient-to-r from-red-400 to-pink-500 text-white;
        box-shadow: 0 4px 15px rgba(244, 67, 54, 0.3);
    }
    
    /* Informations cours */
    .course-info {
        @apply p-6 lg:p-8;
    }
    
    .course-title {
        @apply text-xl lg:text-2xl font-bold text-gray-900 dark:text-white mb-3 line-clamp-2 leading-tight;
        font-family: 'Poppins', sans-serif;
    }
    
    .course-instructor {
        @apply flex items-center gap-2 text-sm text-gray-600 dark:text-gray-300 mb-4;
    }
    
    .instructor-avatar {
        @apply w-8 h-8 rounded-full border-2 border-white dark:border-gray-800 shadow-md;
    }
    
    .course-description {
        @apply text-gray-600 dark:text-gray-400 text-sm lg:text-base mb-6 line-clamp-3 leading-relaxed;
    }
    
    .course-meta {
        @apply flex items-center justify-between text-sm;
    }
    
    .course-rating {
        @apply flex items-center gap-1.5;
    }
    
    .star-filled {
        @apply text-yellow-500 drop-shadow-sm;
    }
    
    .star-empty {
        @apply text-gray-300 dark:text-gray-600;
    }
    
    .course-duration {
        @apply flex items-center gap-2 text-gray-500 dark:text-gray-400;
    }
    
    /* Boutons cours */
    .course-action-btn {
        @apply mt-6 w-full py-3.5 px-4 rounded-xl font-semibold text-white transition-all duration-300 flex items-center justify-center gap-2;
        background: var(--agri-gradient);
        box-shadow: 0 4px 15px rgba(67, 160, 71, 0.3);
    }
    
    .course-action-btn:hover {
        box-shadow: 0 8px 25px rgba(67, 160, 71, 0.4);
        transform: translateY(-2px);
    }
    
    /* Barre latérale filtres */
    .courses-sidebar {
        @apply lg:sticky lg:top-24 self-start;
    }
    
    .filter-card {
        @apply bg-white/80 dark:bg-gray-800/80 backdrop-blur-md rounded-2xl p-6 mb-6 border border-gray-200 dark:border-gray-700/50;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
    }
    
    .filter-header {
        @apply flex items-center justify-between mb-4;
    }
    
    .filter-title {
        @apply font-bold text-gray-900 dark:text-white text-lg flex items-center gap-2;
    }
    
    .filter-options {
        @apply space-y-3;
    }
    
    .filter-option {
        @apply flex items-center justify-between cursor-pointer hover:text-[var(--agri-primary)] transition-colors py-1.5;
    }
    
    .filter-checkbox {
        @apply w-4 h-4 rounded border-gray-300 dark:border-gray-600 text-[var(--agri-primary)] focus:ring-2 focus:ring-[var(--agri-primary)] focus:ring-offset-2 dark:focus:ring-offset-gray-900;
    }
    
    .filter-count {
        @apply text-xs px-2 py-0.5 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300;
    }
    
    /* Barre de recherche */
    .course-search-container {
        @apply relative mb-8;
    }
    
    .course-search-bar {
        @apply w-full pl-14 pr-6 py-4 rounded-2xl border-2 border-gray-200 dark:border-gray-700 bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm text-lg transition-all duration-300 placeholder-gray-400 dark:placeholder-gray-500;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
    }
    
    .course-search-bar:focus {
        @apply border-[var(--agri-primary)] ring-2 ring-[var(--agri-primary)]/20 shadow-lg;
    }
    
    .search-icon {
        @apply absolute left-5 top-1/2 transform -translate-y-1/2 text-[var(--agri-primary)];
    }
    
    /* Progress bars */
    .course-progress-bar {
        @apply w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden mt-4;
    }
    
    .course-progress-fill {
        @apply h-full rounded-full;
        background: var(--agri-gradient);
    }
    
    /* Badges spéciaux */
    .featured-badge {
        @apply absolute -top-2 -right-2 px-4 py-2 rounded-full text-xs font-bold text-white uppercase tracking-wide rotate-3 z-20;
        background: linear-gradient(135deg, #FF9800, #F57C00);
        box-shadow: 0 4px 15px rgba(255, 152, 0, 0.4);
    }
    
    .certified-badge {
        @apply absolute -top-2 -right-2 px-4 py-2 rounded-full text-xs font-bold text-white uppercase tracking-wide -rotate-3 z-20;
        background: linear-gradient(135deg, #2196F3, #0D47A1);
        box-shadow: 0 4px 15px rgba(33, 150, 243, 0.4);
    }
    
    .new-badge {
        @apply absolute -top-2 -right-2 px-4 py-2 rounded-full text-xs font-bold text-white uppercase tracking-wide z-20;
        background: linear-gradient(135deg, #4CAF50, #2E7D32);
        box-shadow: 0 4px 15px rgba(76, 175, 80, 0.4);
    }
    
    /* Pagination */
    .courses-pagination {
        @apply flex items-center justify-center gap-2 mt-12;
    }
    
    .page-link {
        @apply w-10 h-10 flex items-center justify-center rounded-xl border border-gray-300 dark:border-gray-700 hover:bg-[var(--agri-primary)] hover:text-white hover:border-[var(--agri-primary)] transition-all duration-300;
    }
    
    .page-link.active {
        @apply bg-[var(--agri-primary)] text-white border-[var(--agri-primary)];
        box-shadow: 0 4px 15px rgba(67, 160, 71, 0.3);
    }
    
    /* Stats bar */
    .course-stats-bar {
        @apply grid grid-cols-2 md:grid-cols-4 gap-4 mb-8;
    }
    
    .stat-card {
        @apply bg-white/80 dark:bg-gray-800/80 backdrop-blur-md rounded-2xl p-6 text-center border border-gray-200 dark:border-gray-700/50 transition-all duration-300 hover:border-[var(--agri-primary)]/30;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
    }
    
    .stat-card:hover {
        transform: translateY(-4px);
    }
    
    .stat-value {
        @apply text-3xl font-bold text-gray-900 dark:text-white mb-2;
    }
    
    .stat-label {
        @apply text-sm text-gray-600 dark:text-gray-400;
    }
    
    /* Responsive */
    @media (max-width: 768px) {
        .course-image-container {
            @apply h-40;
        }
        
        .course-info {
            @apply p-5;
        }
        
        .filter-card {
            @apply p-4 mb-4;
        }
        
        .course-search-bar {
            @apply px-12 py-3.5 text-base;
        }
        
        .search-icon {
            @apply left-4;
        }
    }
    
    /* Animations */
    @keyframes cardFloat {
        0%, 100% { transform: translateY(0) rotate(0); }
        50% { transform: translateY(-10px) rotate(1deg); }
    }
    
    .featured-course {
        animation: cardFloat 4s ease-in-out infinite;
    }
    
    @keyframes newPulse {
        0%, 100% { 
            box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7);
        }
        50% { 
            box-shadow: 0 0 0 15px rgba(76, 175, 80, 0);
        }
    }
    
    .new-course {
        animation: newPulse 2s infinite;
    }