Upload folder using huggingface_hub

index.html

@@ -821,178 +821,6 @@
             font-size: 1.1rem;
         }
         
-        /* Flashcard Application */
-        .flashcard-section {
-            margin-top: 2rem;
-            border-top: 2px solid #f1f5f9;
-            padding-top: 2rem;
-        }
-        
-        .flashcard-container {
-            max-width: 800px;
-            margin: 0 auto;
-        }
-        
-        .flashcard {
-            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
-            border-radius: 15px;
-            padding: 3rem 2rem;
-            margin: 2rem 0;
-            min-height: 300px;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-            position: relative;
-            cursor: pointer;
-            transition: all 0.3s;
-            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
-            border: 2px solid #e2e8f0;
-        }
-        
-        .flashcard:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
-        }
-        
-        .flashcard.flipped {
-            background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
-        }
-        
-        .flashcard-front, .flashcard-back {
-            text-align: center;
-            width: 100%;
-        }
-        
-        .flashcard-category {
-            position: absolute;
-            top: 15px;
-            left: 15px;
-            background: var(--primary-color);
-            color: white;
-            padding: 5px 15px;
-            border-radius: 20px;
-            font-size: 0.8rem;
-        }
-        
-        .flashcard-content {
-            font-size: 1.5rem;
-            font-weight: 600;
-            color: var(--dark-color);
-            margin: 1.5rem 0;
-            line-height: 1.6;
-        }
-        
-        .flashcard-example {
-            font-size: 1rem;
-            color: var(--gray-color);
-            font-style: italic;
-            margin-top: 1rem;
-            border-left: 3px solid var(--secondary-color);
-            padding-left: 15px;
-        }
-        
-        .flashcard-stats {
-            position: absolute;
-            top: 15px;
-            right: 15px;
-            display: flex;
-            gap: 10px;
-            align-items: center;
-        }
-        
-        .flashcard-score {
-            background: #10b981;
-            color: white;
-            padding: 5px 10px;
-            border-radius: 15px;
-            font-size: 0.8rem;
-            font-weight: bold;
-        }
-        
-        .flashcard-difficulty {
-            background: #f59e0b;
-            color: white;
-            padding: 5px 10px;
-            border-radius: 15px;
-            font-size: 0.8rem;
-        }
-        
-        .flashcard-controls {
-            display: flex;
-            justify-content: center;
-            gap: 15px;
-            margin-top: 2rem;
-        }
-        
-        .flashcard-btn {
-            padding: 10px 25px;
-            border: none;
-            border-radius: 10px;
-            font-size: 1rem;
-            font-weight: 600;
-            cursor: pointer;
-            transition: all 0.3s;
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .flashcard-btn.easy {
-            background: #10b981;
-            color: white;
-        }
-        
-        .flashcard-btn.medium {
-            background: #f59e0b;
-            color: white;
-        }
-        
-        .flashcard-btn.hard {
-            background: #ef4444;
-            color: white;
-        }
-        
-        .flashcard-btn:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
-        }
-        
-        .flashcard-progress {
-            margin-top: 2rem;
-            text-align: center;
-        }
-        
-        .progress-bar {
-            height: 8px;
-            background: #e2e8f0;
-            border-radius: 4px;
-            margin: 10px 0;
-            overflow: hidden;
-        }
-        
-        .progress-fill {
-            height: 100%;
-            background: linear-gradient(90deg, #3b82f6, #8b5cf6);
-            border-radius: 4px;
-            transition: width 0.3s ease;
-        }
-        
-        .flashcard-stats-summary {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-            gap: 15px;
-            margin-top: 2rem;
-        }
-        
-        .flashcard-stat-item {
-            background: white;
-            padding: 1.5rem;
-            border-radius: 10px;
-            text-align: center;
-            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
-        }
-        
         /* Productivity Options - STYLE MODIFIÉ */
         .productivity-grid {
             display: grid;
@@ -1269,28 +1097,290 @@
             box-shadow: 0 0 0 3px white, 0 0 0 6px currentColor;
         }
         
-        /* Flashcard Progress in Stats */
-        .flashcard-stats-card {
-            grid-column: span 2;
+        /* ============================================ */
+        /* STYLES POUR LES FLASHCARDS */
+        /* ============================================ */
+        
+        .flashcards-controls {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 20px;
+            margin: 2rem 0;
+            padding: 1rem;
             background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
+            border-radius: 12px;
         }
         
-        .flashcard-stats-header {
+        .flashcard-container {
+            min-height: 400px;
+            perspective: 1000px;
+            margin: 2rem 0;
+        }
+        
+        .flashcard {
+            width: 100%;
+            height: 400px;
+            position: relative;
+            transform-style: preserve-3d;
+            transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+            cursor: pointer;
+        }
+        
+        .flashcard.flipped {
+            transform: rotateY(180deg);
+        }
+        
+        .flashcard-face {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            backface-visibility: hidden;
+            border-radius: 15px;
+            padding: 2rem;
             display: flex;
-            justify-content: space-between;
+            flex-direction: column;
+            justify-content: center;
             align-items: center;
-            margin-bottom: 1rem;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+            overflow: hidden;
         }
         
-        .streak-counter {
-            background: linear-gradient(135deg, #f59e0b, #d97706);
+        .flashcard-front {
+            background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%);
+            border: 2px solid var(--primary-color);
+        }
+        
+        .flashcard-back {
+            background: linear-gradient(135deg, var(--primary-color) 0%, #1d4ed8 100%);
             color: white;
+            transform: rotateY(180deg);
+            text-align: center;
+        }
+        
+        .flashcard-category {
+            position: absolute;
+            top: 15px;
+            left: 15px;
             padding: 5px 15px;
             border-radius: 20px;
+            font-size: 0.8rem;
+            font-weight: 600;
+            background: rgba(255, 255, 255, 0.2);
+            backdrop-filter: blur(10px);
+        }
+        
+        .flashcard-content {
+            max-width: 600px;
+            text-align: center;
+            padding: 2rem;
+        }
+        
+        .flashcard-title {
+            font-size: 1.8rem;
+            font-weight: bold;
+            margin-bottom: 1.5rem;
+            color: var(--dark-color);
+        }
+        
+        .flashcard-question {
+            font-size: 1.3rem;
+            line-height: 1.6;
+            margin-bottom: 2rem;
+            color: var(--dark-color);
+        }
+        
+        .flashcard-back .flashcard-title {
+            color: white;
+        }
+        
+        .flashcard-back .flashcard-question {
+            color: rgba(255, 255, 255, 0.9);
+        }
+        
+        .flashcard-action {
+            background: white;
+            color: var(--primary-color);
+            border: none;
+            padding: 12px 30px;
+            border-radius: 25px;
+            font-weight: 600;
+            cursor: pointer;
+            margin-top: 1.5rem;
+            transition: all 0.3s;
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+        }
+        
+        .flashcard-action:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
+        }
+        
+        .flashcard-instruction {
+            position: absolute;
+            bottom: 15px;
+            left: 0;
+            right: 0;
+            text-align: center;
+            font-size: 0.9rem;
+            color: var(--gray-color);
+            opacity: 0.8;
+        }
+        
+        .flashcard-evaluation {
+            margin-top: 2rem;
+            display: flex;
+            flex-direction: column;
+            gap: 1rem;
+            width: 100%;
+            max-width: 400px;
+        }
+        
+        .evaluation-slider {
+            width: 100%;
+            -webkit-appearance: none;
+            height: 8px;
+            border-radius: 4px;
+            background: rgba(255, 255, 255, 0.3);
+            outline: none;
+        }
+        
+        .evaluation-slider::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            width: 24px;
+            height: 24px;
+            border-radius: 50%;
+            background: white;
+            cursor: pointer;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+        }
+        
+        .evaluation-label {
+            display: flex;
+            justify-content: space-between;
+            font-size: 0.9rem;
+            color: rgba(255, 255, 255, 0.9);
+        }
+        
+        .category-filters {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 10px;
+            margin: 1.5rem 0;
+            justify-content: center;
+        }
+        
+        .category-filter {
+            padding: 8px 20px;
+            border: 2px solid #e2e8f0;
+            border-radius: 20px;
+            background: white;
+            cursor: pointer;
+            transition: all 0.3s;
+            font-weight: 500;
+            color: var(--dark-color);
+        }
+        
+        .category-filter:hover {
+            border-color: var(--primary-color);
+            color: var(--primary-color);
+        }
+        
+        .category-filter.active {
+            background: var(--primary-color);
+            color: white;
+            border-color: var(--primary-color);
+        }
+        
+        .flashcard-progress {
+            width: 100%;
+            height: 6px;
+            background: #e2e8f0;
+            border-radius: 3px;
+            margin: 1rem 0;
+            overflow: hidden;
+        }
+        
+        .flashcard-progress-bar {
+            height: 100%;
+            background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
+            border-radius: 3px;
+            transition: width 0.3s ease;
+        }
+        
+        .dashboardEM-container {
+            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
+            border-radius: 15px;
+            padding: 2rem;
+            margin-top: 2rem;
+        }
+        
+        .dashboardEM-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 20px;
+            margin-top: 1.5rem;
+        }
+        
+        .dashboardEM-card {
+            background: white;
+            border-radius: 12px;
+            padding: 1.5rem;
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
+        }
+        
+        .dashboardEM-header {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            margin-bottom: 1rem;
+            padding-bottom: 1rem;
+            border-bottom: 2px solid #f1f5f9;
+        }
+        
+        .dashboardEM-icon {
+            width: 40px;
+            height: 40px;
+            border-radius: 10px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1.2rem;
+            color: white;
+        }
+        
+        .dashboardEM-metric {
+            display: flex;
+            align-items: baseline;
+            gap: 10px;
+            margin: 1rem 0;
+        }
+        
+        .dashboardEM-value {
+            font-size: 2.5rem;
             font-weight: bold;
+            color: var(--primary-color);
+        }
+        
+        .dashboardEM-change {
+            font-size: 0.9rem;
+            padding: 3px 8px;
+            border-radius: 12px;
+            background: rgba(16, 185, 129, 0.1);
+            color: var(--secondary-color);
+        }
+        
+        .dashboardEM-change.negative {
+            background: rgba(239, 68, 68, 0.1);
+            color: var(--danger-color);
+        }
+        
+        .dashboardEM-trend {
             display: flex;
             align-items: center;
             gap: 5px;
+            font-size: 0.9rem;
+            color: var(--gray-color);
         }
         
         /* Responsive */
@@ -1324,19 +1414,6 @@
                 justify-content: center;
             }
             
-            .flashcard-controls {
-                flex-direction: column;
-            }
-            
-            .flashcard-btn {
-                width: 100%;
-                justify-content: center;
-            }
-            
-            .flashcard-stats-summary {
-                grid-template-columns: 1fr;
-            }
-            
             .heatmap-grid {
                 gap: 4px;
             }
@@ -1356,6 +1433,41 @@
             .profile-summary {
                 grid-template-columns: 1fr;
             }
+            
+            .flashcard {
+                height: 350px;
+            }
+            
+            .flashcard-title {
+                font-size: 1.5rem;
+            }
+            
+            .flashcard-question {
+                font-size: 1.1rem;
+            }
+            
+            .flashcards-controls {
+                flex-direction: column;
+                gap: 15px;
+            }
+        }
+        
+        @media (max-width: 480px) {
+            .flashcard {
+                height: 300px;
+            }
+            
+            .flashcard-content {
+                padding: 1rem;
+            }
+            
+            .flashcard-title {
+                font-size: 1.3rem;
+            }
+            
+            .flashcard-question {
+                font-size: 1rem;
+            }
         }
     </style>
 </head>
@@ -1364,11 +1476,12 @@
         <!-- Header -->
         <header class="header">
             <h1><i class="fas fa-graduation-cap"></i> Compagnon Pédagogique</h1>
-            <p>PerseverAId  – Analyse intelligente de la persistance et du management de l'effort</p>
+            <p>PerseverAId (AI + Aid + Perseverance) – 
+Apprendre à manager l'effort et maintenir la persistance </p>
             <div class="badge">PerseverAId (AI + Aid + Perseverance)</div>
         </header>
         
-        <!-- Navigation -->
+        <!-- Navigation - 7 onglets avec Flashcards -->
         <nav class="nav-tabs">
             <button class="nav-tab active" onclick="showTab('profile')">
                 <i class="fas fa-user-circle"></i> Profil Apprenant
@@ -1379,21 +1492,19 @@
             <button class="nav-tab" onclick="showTab('planner')">
                 <i class="fas fa-calendar-alt"></i> Planner SM-2
             </button>
-            <button class="nav-tab" onclick="showTab('flashcards')">
-                <i class="fas fa-layer-group"></i> Flashcards
-            </button>
+        
             <button class="nav-tab" onclick="showTab('journal')">
                 <i class="fas fa-book"></i> Journal SRL
             </button>
+                <button class="nav-tab" onclick="showTab('flashcards')">
+                    <i class="fas fa-layer-group"></i> Métacognition
+                </button>
             <button class="nav-tab" onclick="showTab('notifications')">
                 <i class="fas fa-bell"></i> Notifications IA
             </button>
             <button class="nav-tab" onclick="showTab('stats')">
                 <i class="fas fa-chart-line"></i> Statistiques
             </button>
-            <button class="nav-tab" onclick="showTab('learn')">
-                <i class="fas fa-graduation-cap"></i> Apprendre à manager l'effort
-            </button>
         </nav>
         
         <!-- Profil Apprenant Section -->
@@ -2010,94 +2121,75 @@
         <section id="flashcards" class="tab-content">
             <div class="card">
                 <div class="card-header">
-                    <h3><i class="fas fa-layer-group"></i> Application Flashcards avec Répétition Espacée</h3>
+                    <h3><i class="fas fa-layer-group"></i> Flashcards Cognitives - Persévérance & Métacognition</h3>
                     <div>
-                        <span class="streak-counter">
-                            <i class="fas fa-fire"></i> Série: <span id="streakCount">0</span> jours
-                        </span>
+                        <button class="btn btn-secondary" onclick="showCardByCategory('all')">
+                            <i class="fas fa-filter"></i> Toutes
+                        </button>
+                        <button class="btn btn-secondary" onclick="resetFlashcards()">
+                            <i class="fas fa-redo"></i> Réinitialiser
+                        </button>
                     </div>
                 </div>
                 
-                <div class="flashcard-container">
-                    <div class="flashcard" id="flashcard" onclick="flipCard()">
-                        <div class="flashcard-category" id="flashcardCategory">Conjugaison</div>
-                        <div class="flashcard-stats">
-                            <span class="flashcard-score" id="flashcardScore">Score: 85%</span>
-                            <span class="flashcard-difficulty" id="flashcardDifficulty">Moyen</span>
-                        </div>
-                        
-                        <div class="flashcard-front" id="flashcardFront">
-                            <div class="flashcard-content" id="flashcardQuestion">
-                                Je (être) content de te voir.
-                            </div>
-                            <div class="flashcard-example" id="flashcardHint">
-                                Cliquez pour voir la réponse
-                            </div>
-                        </div>
-                        
-                        <div class="flashcard-back" id="flashcardBack" style="display: none;">
-                            <div class="flashcard-content" id="flashcardAnswer">
-                                suis
-                            </div>
-                            <div class="flashcard-example" id="flashcardExplanation">
-                                'Être' au présent: je suis, tu es, il est, nous sommes, vous êtes, ils sont
-                            </div>
-                        </div>
+                <!-- Statistiques des flashcards -->
+                <div id="flashcardsStats" class="stats-grid">
+                    <!-- Généré dynamiquement -->
+                </div>
+                
+                <!-- Filtres par catégorie -->
+                <div class="category-filters">
+                    <div class="category-filter active" onclick="showCardByCategory('all')">
+                        <i class="fas fa-layer-group"></i> Toutes
                     </div>
-                    
-                    <div class="flashcard-controls">
-                        <button class="flashcard-btn hard" onclick="rateCard(0)">
-                            <i class="fas fa-times"></i> Difficile
-                        </button>
-                        <button class="flashcard-btn medium" onclick="rateCard(1)">
-                            <i class="fas fa-minus"></i> Moyen
-                        </button>
-                        <button class="flashcard-btn easy" onclick="rateCard(2)">
-                            <i class="fas fa-check"></i> Facile
-                        </button>
+                    <div class="category-filter" onclick="showCardByCategory('awareness')">
+                        <i class="fas fa-eye"></i> Prise de conscience
                     </div>
-                    
-                    <div class="flashcard-progress">
-                        <div>Progression: <span id="currentCard">1</span>/<span id="totalCards">3</span></div>
-                        <div class="progress-bar">
-                            <div class="progress-fill" id="progressFill" style="width: 33%"></div>
-                        </div>
+                    <div class="category-filter" onclick="showCardByCategory('perseverance')">
+                        <i class="fas fa-mountain"></i> Persévérance
                     </div>
-                    
-                    <div class="flashcard-section">
-                        <h4><i class="fas fa-plus-circle"></i> Ajouter une Nouvelle Flashcard</h4>
-                        <div class="form-row">
-                            <div class="form-col">
-                                <label class="form-label"><i class="fas fa-question"></i> Question</label>
-                                <textarea id="newQuestion" class="form-control" rows="2" placeholder="Entrez la question..."></textarea>
-                            </div>
-                            <div class="form-col">
-                                <label class="form-label"><i class="fas fa-lightbulb"></i> Réponse</label>
-                                <textarea id="newAnswer" class="form-control" rows="2" placeholder="Entrez la réponse..."></textarea>
-                            </div>
-                        </div>
-                        <div class="form-row">
-                            <div class="form-col">
-                                <label class="form-label"><i class="fas fa-tag"></i> Catégorie</label>
-                                <select id="newCategory" class="form-control">
-                                    <option value="conjugaison">Conjugaison</option>
-                                    <option value="grammaire">Grammaire</option>
-                                    <option value="vocabulaire">Vocabulaire</option>
-                                    <option value="expression_ecrite">Expression écrite</option>
-                                </select>
-                            </div>
-                            <div class="form-col">
-                                <label class="form-label"><i class="fas fa-star"></i> Difficulté</label>
-                                <select id="newDifficulty" class="form-control">
-                                    <option value="facile">Facile</option>
-                                    <option value="moyen" selected>Moyen</option>
-                                    <option value="difficile">Difficile</option>
-                                </select>
-                            </div>
+                    <div class="category-filter" onclick="showCardByCategory('effort')">
+                        <i class="fas fa-bolt"></i> Gestion de l'effort
+                    </div>
+                    <div class="category-filter" onclick="showCardByCategory('strategies')">
+                        <i class="fas fa-tools"></i> Stratégies d'adaptation
+                    </div>
+                    <div class="category-filter" onclick="showCardByCategory('motivation')">
+                        <i class="fas fa-fire"></i> Motivation & Sens
+                    </div>
+                    <div class="category-filter" onclick="showCardByCategory('evaluation')">
+                        <i class="fas fa-star"></i> Auto-évaluation
+                    </div>
+                </div>
+                
+                <!-- Contrôles de navigation -->
+                <div class="flashcards-controls">
+                    <button class="btn" onclick="prevCard()" id="prevBtn">
+                        <i class="fas fa-chevron-left"></i> Précédente
+                    </button>
+                    <div style="display: flex; flex-direction: column; align-items: center;">
+                        <span id="cardCounter" style="font-weight: 600; color: var(--dark-color);">
+                            Carte 1/20
+                        </span>
+                        <div class="flashcard-progress">
+                            <div class="flashcard-progress-bar" id="flashcardProgressBar" style="width: 5%"></div>
                         </div>
-                        <button class="btn btn-primary" onclick="addNewFlashcard()">
-                            <i class="fas fa-plus"></i> Ajouter la Flashcard
-                        </button>
+                    </div>
+                    <button class="btn" onclick="nextCard()" id="nextBtn">
+                        Suivante <i class="fas fa-chevron-right"></i>
+                    </button>
+                </div>
+                
+                <!-- Carte actuelle -->
+                <div id="currentCard" class="flashcard-container">
+                    <!-- Contenu généré dynamiquement -->
+                </div>
+                
+                <!-- DashboardEM -->
+                <div class="dashboardEM-container">
+                    <h4><i class="fas fa-chart-bar"></i> DashboardEM - Métriques Métacognitives</h4>
+                    <div id="dashboardEM" class="dashboardEM-grid">
+                        <!-- Généré dynamiquement -->
                     </div>
                 </div>
             </div>
@@ -2293,71 +2385,6 @@
                         </div>
                     </div>
                 </div>
-                
-                <!-- Flashcard Statistics -->
-                <div class="flashcard-section">
-                    <h4><i class="fas fa-layer-group"></i> Statistiques des Flashcards</h4>
-                    <div class="flashcard-stats-summary">
-                        <div class="flashcard-stat-item">
-                            <div style="font-size: 2rem; color: #3b82f6; font-weight: bold;" id="statsTotalCards">3</div>
-                            <div>Total Flashcards</div>
-                        </div>
-                        <div class="flashcard-stat-item">
-                            <div style="font-size: 2rem; color: #10b981; font-weight: bold;" id="statsMastered">1</div>
-                            <div>Maîtrisées</div>
-                        </div>
-                        <div class="flashcard-stat-item">
-                            <div style="font-size: 2rem; color: #f59e0b; font-weight: bold;" id="statsLearning">2</div>
-                            <div>En Apprentissage</div>
-                        </div>
-                        <div class="flashcard-stat-item">
-                            <div style="font-size: 2rem; color: #ef4444; font-weight: bold;" id="statsDue">1</div>
-                            <div>À Réviser</div>
-                        </div>
-                    </div>
-                    
-                    <div class="chart-container" style="height: 300px; margin-top: 2rem;">
-                        <canvas id="flashcardProgressChart"></canvas>
-                    </div>
-                </div>
-            </div>
-        </section>
-        
-        <!-- Learn SM-2 Section -->
-        <section id="learn" class="tab-content">
-            <div class="card">
-                <div class="card-header">
-                    <h3><i class="fas fa-graduation-cap"></i> Apprendre l'Algorithme SM-2</h3>
-                </div>
-                
-                <div class="questionnaire-section">
-                    <div class="questionnaire-header">
-                        <div class="questionnaire-icon" style="background: linear-gradient(135deg, #3b82f6, #1d4ed8);">
-                            <i class="fas fa-brain"></i>
-                        </div>
-                        <div>
-                            <div class="questionnaire-title">Algorithme SM-2 - Répétition Espacée</div>
-                            <div class="questionnaire-description">Optimisez votre mémorisation à long terme</div>
-                        </div>
-                    </div>
-                    
-                    <h4><i class="fas fa-info-circle"></i> Qu'est-ce que l'algorithme SM-2 ?</h4>
-                    <p>L'algorithme SM-2 est un système de répétition espacée développé pour optimiser la mémorisation à long terme.</p>
-                    
-                    <h4 style="margin-top: 20px;"><i class="fas fa-chart-line"></i> Comment ça marche ?</h4>
-                    <ul style="padding-left: 20px; margin-bottom: 20px;">
-                        <li>Plus vous connaissez bien une information, plus l'intervalle de révision augmente</li>
-                        <li>Les intervalles typiques sont: 1 jour, 3 jours, 7 jours, 14 jours, etc.</li>
-                        <li>Le système s'adapte à vos performances</li>
-                    </ul>
-                    
-                    <div class="visualization-container">
-                        <h4><i class="fas fa-chart-network"></i> Comparaison des Niveaux de Qualité SM-2</h4>
-                        <div class="chart-container">
-                            <canvas id="comparisonChart"></canvas>
-                        </div>
-                    </div>
-                </div>
             </div>
         </section>
     </div>
@@ -2394,51 +2421,6 @@
             }
         };
         
-        // Variables pour les flashcards
-        let flashcards = [
-            {
-                id: 1,
-                question: "Je (être) content de te voir.",
-                answer: "suis",
-                explanation: "'Être' au présent: je suis, tu es, il est, nous sommes, vous êtes, ils sont",
-                category: "conjugaison",
-                difficulty: "moyen",
-                score: 85,
-                mastered: false,
-                nextReview: new Date()
-            },
-            {
-                id: 2,
-                question: "Nous (aller) au marché demain.",
-                answer: "allons",
-                explanation: "'Aller' au présent: je vais, tu vas, il va, nous allons, vous allez, ils vont",
-                category: "conjugaison",
-                difficulty: "facile",
-                score: 92,
-                mastered: true,
-                nextReview: new Date(Date.now() + 3 * 24 * 60 * 60 * 1000)
-            },
-            {
-                id: 3,
-                question: "Elle (faire) ses devoirs chaque soir.",
-                answer: "fait",
-                explanation: "'Faire' au présent: je fais, tu fais, il fait, nous faisons, vous faites, ils font",
-                category: "conjugaison",
-                difficulty: "moyen",
-                score: 78,
-                mastered: false,
-                nextReview: new Date()
-            }
-        ];
-        
-        let currentFlashcardIndex = 0;
-        let flashcardStats = {
-            streak: 0,
-            totalReviewed: 0,
-            masteryRate: 33,
-            avgScore: 85
-        };
-        
         // Variables pour le planner
         let selectedTimeSlots = ['morning'];
         let currentQuality = 2;
@@ -2451,6 +2433,18 @@
         // Variables pour le journal
         let journalEntries = [];
         
+        // Variables pour les flashcards
+        let flashcards = [];
+        let currentCardIndex = 0;
+        let currentCategory = 'all';
+        let flashcardsData = [];
+        let flashcardsStats = {
+            totalCards: 0,
+            reviewedCards: 0,
+            averageScore: 0,
+            favoriteCategory: ''
+        };
+        
         // ============================================
         // INITIALISATION
         // ============================================
@@ -2461,20 +2455,15 @@
             updateProfileSummary();
             createMotivationChart();
             
-            // Initialiser les flashcards
-            displayFlashcard(currentFlashcardIndex);
-            updateFlashcardStats();
-            updateFlashcardProgressChart();
-            
             // Initialiser la heatmap
             generateHeatmap();
             
-            // Initialiser le graphique de comparaison SM-2
-            updateComparisonChart();
-            
             // Initialiser le graphique des notifications
             createNotificationChart();
             
+            // Initialiser les flashcards
+            initializeFlashcards();
+            
             // Charger les données sauvegardées
             loadSavedData();
         });
@@ -2505,8 +2494,7 @@
                 'flashcards': 'Flashcards',
                 'journal': 'Journal',
                 'notifications': 'Notifications',
-                'stats': 'Statistiques',
-                'learn': 'Apprendre'
+                'stats': 'Statistiques'
             };
             
             document.querySelectorAll('.nav-tab').forEach(tab => {
@@ -2519,8 +2507,9 @@
             if (tabId === 'stats') {
                 refreshStats();
                 generateHeatmap();
-            } else if (tabId === 'learn') {
-                updateComparisonChart();
+            } else if (tabId === 'flashcards') {
+                updateFlashcardsStats();
+                updateDashboardEM();
             }
         }
         
@@ -3064,276 +3053,802 @@
                 container.appendChild(card);
             });
             
-            // Visualisation
-            createSM2Visualization(intervals, plan[0]?.competence || 'Compétence');
+            // Visualisation
+            createSM2Visualization(intervals, plan[0]?.competence || 'Compétence');
+        }
+        
+        // Créer la visualisation SM-2
+        function createSM2Visualization(intervals, competence) {
+            const ctx = document.getElementById('sm2Visualization').getContext('2d');
+            
+            if (window.sm2VisualizationChart) {
+                window.sm2VisualizationChart.destroy();
+            }
+            
+            const labels = intervals.map((_, i) => `Répétition ${i + 1}`);
+            
+            window.sm2VisualizationChart = new Chart(ctx, {
+                type: 'line',
+                data: {
+                    labels: labels,
+                    datasets: [{
+                        label: 'Intervalle (jours)',
+                        data: intervals,
+                        borderColor: '#3b82f6',
+                        backgroundColor: 'rgba(59, 130, 246, 0.1)',
+                        borderWidth: 3,
+                        fill: true,
+                        tension: 0.4
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    plugins: {
+                        title: {
+                            display: true,
+                            text: `Courbe de Répétition Espacée - ${competence}`,
+                            font: { size: 16 }
+                        }
+                    },
+                    scales: {
+                        y: {
+                            beginAtZero: true,
+                            title: {
+                                display: true,
+                                text: 'Jours'
+                            }
+                        },
+                        x: {
+                            title: {
+                                display: true,
+                                text: 'Numéro de Répétition'
+                            }
+                        }
+                    }
+                }
+            });
+        }
+        
+        // Exporter le planner
+        function exportPlanner() {
+            const plannerData = document.getElementById('plannerContent').innerText;
+            const blob = new Blob([plannerData], { type: 'text/plain' });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = 'planner-sm2.txt';
+            document.body.appendChild(a);
+            a.click();
+            document.body.removeChild(a);
+            URL.revokeObjectURL(url);
+            
+            showNotification('Planner exporté avec succès !', 'success');
+        }
+        
+        // ============================================
+        // FLASHCARDS COGNITIVES
+        // ============================================
+        
+        // Initialiser les flashcards
+        function initializeFlashcards() {
+            // Données des flashcards basées sur les catégories proposées
+            flashcardsData = [
+                {
+                    id: 1,
+                    category: 'awareness',
+                    categoryName: 'Prise de conscience',
+                    icon: '👁️',
+                    color: '#3b82f6',
+                    front: {
+                        title: 'Diagnostic de Blocage',
+                        question: 'Qu\'est-ce qui me bloque exactement dans cette tâche ?'
+                    },
+                    back: {
+                        reflection: 'Est-ce un problème de compréhension, d\'énergie, ou de motivation ?',
+                        action: 'Identifier précisément le type d\'obstacle rencontré',
+                        evaluationLabel: 'Clarté du diagnostic'
+                    }
+                },
+                {
+                    id: 2,
+                    category: 'awareness',
+                    categoryName: 'Prise de conscience',
+                    icon: '💭',
+                    color: '#3b82f6',
+                    front: {
+                        title: 'État Émotionnel',
+                        question: 'Comment je me sens en ce moment face à cette tâche ?'
+                    },
+                    back: {
+                        reflection: 'Mon état émotionnel influence-t-il ma capacité à apprendre ?',
+                        action: 'Nommer l\'émotion et accepter sa présence',
+                        evaluationLabel: 'Conscience émotionnelle'
+                    }
+                },
+                {
+                    id: 3,
+                    category: 'perseverance',
+                    categoryName: 'Persévérance',
+                    icon: '🏔️',
+                    color: '#10b981',
+                    front: {
+                        title: 'Face à la Difficulté',
+                        question: 'Cette difficulté signifie-t-elle que je suis incapable ?'
+                    },
+                    back: {
+                        reflection: 'Ai-je déjà surmonté une difficulté similaire par le passé ?',
+                        action: 'Se rappeler un succès passé pour renforcer la confiance',
+                        evaluationLabel: 'Résilience perçue'
+                    }
+                },
+                {
+                    id: 4,
+                    category: 'perseverance',
+                    categoryName: 'Persévérance',
+                    icon: '⏳',
+                    color: '#10b981',
+                    front: {
+                        title: 'Test de Persistance',
+                        question: 'Que se passerait-il si je continuais encore 10 minutes ?'
+                    },
+                    back: {
+                        reflection: 'Le pire scénario est-il vraiment si grave ?',
+                        action: 'Se donner un objectif minimal de 10 minutes supplémentaires',
+                        evaluationLabel: 'Volonté de persister'
+                    }
+                },
+                {
+                    id: 5,
+                    category: 'effort',
+                    categoryName: 'Gestion de l\'effort',
+                    icon: '⚡',
+                    color: '#f59e0b',
+                    front: {
+                        title: 'Niveau d\'Énergie',
+                        question: 'Mon niveau d\'énergie est-il adapté à cette tâche ?'
+                    },
+                    back: {
+                        reflection: 'Ai-je besoin d\'une pause ou d\'un changement d\'activité ?',
+                        action: 'Adapter la tâche à son niveau d\'énergie actuel',
+                        evaluationLabel: 'Gestion énergétique'
+                    }
+                },
+                {
+                    id: 6,
+                    category: 'effort',
+                    categoryName: 'Gestion de l\'effort',
+                    icon: '🎯',
+                    color: '#f59e0b',
+                    front: {
+                        title: 'Effort Productif',
+                        question: 'Mon effort actuel est-il concentré et efficace ?'
+                    },
+                    back: {
+                        reflection: 'Est-ce que je travaille "dur" ou "intelligemment" ?',
+                        action: 'Identifier et éliminer une source de distraction',
+                        evaluationLabel: 'Efficacité de l\'effort'
+                    }
+                },
+                {
+                    id: 7,
+                    category: 'strategies',
+                    categoryName: 'Stratégies d\'adaptation',
+                    icon: '🔧',
+                    color: '#8b5cf6',
+                    front: {
+                        title: 'Découpage de Tâche',
+                        question: 'Cette tâche peut-elle être divisée en sous-tâches plus petites ?'
+                    },
+                    back: {
+                        reflection: 'Quelle est la plus petite action réalisable maintenant ?',
+                        action: 'Définir une micro-tâche de 5 minutes maximum',
+                        evaluationLabel: 'Capacité à découper'
+                    }
+                },
+                {
+                    id: 8,
+                    category: 'strategies',
+                    categoryName: 'Stratégies d\'adaptation',
+                    icon: '🔄',
+                    color: '#8b5cf6',
+                    front: {
+                        title: 'Changement de Modalité',
+                        question: 'Et si j\'essayais une approche différente ?'
+                    },
+                    back: {
+                        reflection: 'Quelle autre méthode d\'apprentissage pourrais-je tester ?',
+                        action: 'Changer de support (écrit/oral/visuel)',
+                        evaluationLabel: 'Flexibilité stratégique'
+                    }
+                },
+                {
+                    id: 9,
+                    category: 'motivation',
+                    categoryName: 'Motivation & Sens',
+                    icon: '🌟',
+                    color: '#ec4899',
+                    front: {
+                        title: 'Sens de l\'Apprentissage',
+                        question: 'Pourquoi cette tâche est-elle importante pour moi ?'
+                    },
+                    back: {
+                        reflection: 'Quel bénéfice à long terme vais-je en retirer ?',
+                        action: 'Écrire une raison personnelle de persévérer',
+                        evaluationLabel: 'Clarté du sens'
+                    }
+                },
+                {
+                    id: 10,
+                    category: 'motivation',
+                    categoryName: 'Motivation & Sens',
+                    icon: '🎁',
+                    color: '#ec4899',
+                    front: {
+                        title: 'Récompense Future',
+                        question: 'Que vais-je ressentir une fois cette tâche terminée ?'
+                    },
+                    back: {
+                        reflection: 'La satisfaction d\'avoir persévéré vaut-elle l\'effort ?',
+                        action: 'Visualiser le sentiment de réussite',
+                        evaluationLabel: 'Motivation anticipée'
+                    }
+                },
+                {
+                    id: 11,
+                    category: 'evaluation',
+                    categoryName: 'Auto-évaluation',
+                    icon: '📊',
+                    color: '#6366f1',
+                    front: {
+                        title: 'Bilan Partiel',
+                        question: 'Qu\'ai-je réussi à accomplir, même partiellement ?'
+                    },
+                    back: {
+                        reflection: 'Quels progrès, aussi minimes soient-ils, puis-je identifier ?',
+                        action: 'Lister 3 petites victoires',
+                        evaluationLabel: 'Reconnaissance des progrès'
+                    }
+                },
+                {
+                    id: 12,
+                    category: 'evaluation',
+                    categoryName: 'Auto-évaluation',
+                    icon: '🔍',
+                    color: '#6366f1',
+                    front: {
+                        title: 'Apprentissage de l\'Expérience',
+                        question: 'Qu\'est-ce que cette difficulté m\'apprend sur ma façon d\'apprendre ?'
+                    },
+                    back: {
+                        reflection: 'Que pourrai-je faire différemment la prochaine fois ?',
+                        action: 'Noter un insight métacognitif',
+                        evaluationLabel: 'Apprentissage réflexif'
+                    }
+                },
+                {
+                    id: 13,
+                    category: 'awareness',
+                    categoryName: 'Prise de conscience',
+                    icon: '🧠',
+                    color: '#3b82f6',
+                    front: {
+                        title: 'Focus Attentionnel',
+                        question: 'Où se porte actuellement mon attention ?'
+                    },
+                    back: {
+                        reflection: 'Suis-je pleinement présent à la tâche ou mon esprit vagabonde-t-il ?',
+                        action: 'Pratiquer 1 minute de pleine conscience',
+                        evaluationLabel: 'Présence attentionnelle'
+                    }
+                },
+                {
+                    id: 14,
+                    category: 'perseverance',
+                    categoryName: 'Persévérance',
+                    icon: '🛡️',
+                    color: '#10b981',
+                    front: {
+                        title: 'Protection contre l\'Abandon',
+                        question: 'Quelle est ma première pensée quand je veux abandonner ?'
+                    },
+                    back: {
+                        reflection: 'Cette pensée est-elle un fait ou une interprétation ?',
+                        action: 'Reformuler la pensée de manière constructive',
+                        evaluationLabel: 'Contrôle des pensées'
+                    }
+                },
+                {
+                    id: 15,
+                    category: 'effort',
+                    categoryName: 'Gestion de l\'effort',
+                    icon: '⏰',
+                    color: '#f59e0b',
+                    front: {
+                        title: 'Rythme de Travail',
+                        question: 'Mon rythme actuel est-il soutenable sur la durée ?'
+                    },
+                    back: {
+                        reflection: 'Ai-je besoin d\'accélérer, de ralentir ou de maintenir ?',
+                        action: 'Ajuster le tempo pour éviter l\'épuisement',
+                        evaluationLabel: 'Régulation du rythme'
+                    }
+                },
+                {
+                    id: 16,
+                    category: 'strategies',
+                    categoryName: 'Stratégies d\'adaptation',
+                    icon: '🤝',
+                    color: '#8b5cf6',
+                    front: {
+                        title: 'Demande d\'Aide',
+                        question: 'Ai-je besoin d\'aide pour surmonter cet obstacle ?'
+                    },
+                    back: {
+                        reflection: 'Qui ou quoi pourrait m\'aider à avancer ?',
+                        action: 'Identifier une ressource ou une personne aidante',
+                        evaluationLabel: 'Ouverture à l\'aide'
+                    }
+                },
+                {
+                    id: 17,
+                    category: 'motivation',
+                    categoryName: 'Motivation & Sens',
+                    icon: '🎯',
+                    color: '#ec4899',
+                    front: {
+                        title: 'Alignement avec les Valeurs',
+                        question: 'En quoi cette tâche est-elle alignée avec mes valeurs ?'
+                    },
+                    back: {
+                        reflection: 'Quelle valeur personnelle cette tâche sert-elle ?',
+                        action: 'Relier la tâche à une valeur fondamentale',
+                        evaluationLabel: 'Alignement valeurs-tâche'
+                    }
+                },
+                {
+                    id: 18,
+                    category: 'evaluation',
+                    categoryName: 'Auto-évaluation',
+                    icon: '📈',
+                    color: '#6366f1',
+                    front: {
+                        title: 'Progression Relative',
+                        question: 'Où en étais-je il y a une semaine par rapport à maintenant ?'
+                    },
+                    back: {
+                        reflection: 'Quels progrès, même invisibles, ai-je réalisés ?',
+                        action: 'Identifier un aspect où l\'on s\'est amélioré',
+                        evaluationLabel: 'Conscience des progrès'
+                    }
+                },
+                {
+                    id: 19,
+                    category: 'perseverance',
+                    categoryName: 'Persévérance',
+                    icon: '🌱',
+                    color: '#10b981',
+                    front: {
+                        title: 'Mentalité de Croissance',
+                        question: 'Cette difficulté est-elle une menace ou une opportunité d\'apprentissage ?'
+                    },
+                    back: {
+                        reflection: 'Quelle compétence cette difficulté m\'aide-t-elle à développer ?',
+                        action: 'Reconceptualiser l\'obstacle comme défi formateur',
+                        evaluationLabel: 'Growth mindset'
+                    }
+                },
+                {
+                    id: 20,
+                    category: 'strategies',
+                    categoryName: 'Stratégies d\'adaptation',
+                    icon: '🎭',
+                    color: '#8b5cf6',
+                    front: {
+                        title: 'Changement de Perspective',
+                        question: 'Comment quelqu\'un que j\'admire aborderait-il cette situation ?'
+                    },
+                    back: {
+                        reflection: 'Quelle stratégie différente puis-je emprunter ?',
+                        action: 'Adopter temporairement une autre perspective',
+                        evaluationLabel: 'Créativité stratégique'
+                    }
+                }
+            ];
+            
+            // Initialiser les stats
+            flashcardsStats.totalCards = flashcardsData.length;
+            flashcardsStats.reviewedCards = 0;
+            flashcardsStats.averageScore = 0;
+            
+            // Afficher la première carte
+            showCardByCategory('all');
         }
         
-        // Créer la visualisation SM-2
-        function createSM2Visualization(intervals, competence) {
-            const ctx = document.getElementById('sm2Visualization').getContext('2d');
+        // Afficher une carte par catégorie
+        function showCardByCategory(category) {
+            currentCategory = category;
+            currentCardIndex = 0;
             
-            if (window.sm2VisualizationChart) {
-                window.sm2VisualizationChart.destroy();
+            // Mettre à jour les filtres
+            document.querySelectorAll('.category-filter').forEach(filter => {
+                filter.classList.remove('active');
+            });
+            document.querySelector(`.category-filter[onclick*="${category}"]`).classList.add('active');
+            
+            // Filtrer les cartes par catégorie
+            if (category === 'all') {
+                flashcards = [...flashcardsData];
+            } else {
+                flashcards = flashcardsData.filter(card => card.category === category);
             }
             
-            const labels = intervals.map((_, i) => `Répétition ${i + 1}`);
+            // Mélanger les cartes
+            shuffleArray(flashcards);
             
-            window.sm2VisualizationChart = new Chart(ctx, {
-                type: 'line',
-                data: {
-                    labels: labels,
-                    datasets: [{
-                        label: 'Intervalle (jours)',
-                        data: intervals,
-                        borderColor: '#3b82f6',
-                        backgroundColor: 'rgba(59, 130, 246, 0.1)',
-                        borderWidth: 3,
-                        fill: true,
-                        tension: 0.4
-                    }]
-                },
-                options: {
-                    responsive: true,
-                    maintainAspectRatio: false,
-                    plugins: {
-                        title: {
-                            display: true,
-                            text: `Courbe de Répétition Espacée - ${competence}`,
-                            font: { size: 16 }
-                        }
-                    },
-                    scales: {
-                        y: {
-                            beginAtZero: true,
-                            title: {
-                                display: true,
-                                text: 'Jours'
-                            }
-                        },
-                        x: {
-                            title: {
-                                display: true,
-                                text: 'Numéro de Répétition'
-                            }
-                        }
-                    }
-                }
-            });
-        }
-        
-        // Exporter le planner
-        function exportPlanner() {
-            const plannerData = document.getElementById('plannerContent').innerText;
-            const blob = new Blob([plannerData], { type: 'text/plain' });
-            const url = URL.createObjectURL(blob);
-            const a = document.createElement('a');
-            a.href = url;
-            a.download = 'planner-sm2.txt';
-            document.body.appendChild(a);
-            a.click();
-            document.body.removeChild(a);
-            URL.revokeObjectURL(url);
+            // Afficher la première carte
+            displayCurrentCard();
             
-            showNotification('Planner exporté avec succès !', 'success');
+            // Mettre à jour les stats
+            updateFlashcardsStats();
         }
         
-        // ============================================
-        // FLASHCARDS
-        // ============================================
+        // Mélanger un tableau
+        function shuffleArray(array) {
+            for (let i = array.length - 1; i > 0; i--) {
+                const j = Math.floor(Math.random() * (i + 1));
+                [array[i], array[j]] = [array[j], array[i]];
+            }
+            return array;
+        }
         
-        // Afficher une flashcard
-        function displayFlashcard(index) {
-            if (flashcards.length === 0) return;
+        // Afficher la carte actuelle
+        function displayCurrentCard() {
+            if (flashcards.length === 0) {
+                document.getElementById('currentCard').innerHTML = `
+                    <div style="text-align: center; padding: 4rem; color: var(--gray-color);">
+                        <i class="fas fa-inbox" style="font-size: 3rem; margin-bottom: 1rem;"></i>
+                        <h3>Aucune carte disponible dans cette catégorie</h3>
+                        <p>Essayez une autre catégorie ou réinitialisez les cartes</p>
+                    </div>
+                `;
+                return;
+            }
+            
+            const card = flashcards[currentCardIndex];
+            const progress = ((currentCardIndex + 1) / flashcards.length * 100).toFixed(1);
             
-            const card = flashcards[index];
-            document.getElementById('flashcardQuestion').textContent = card.question;
-            document.getElementById('flashcardAnswer').textContent = card.answer;
-            document.getElementById('flashcardExplanation').textContent = card.explanation;
-            document.getElementById('flashcardCategory').textContent = card.category.charAt(0).toUpperCase() + card.category.slice(1);
-            document.getElementById('flashcardScore').textContent = `Score: ${card.score}%`;
-            document.getElementById('flashcardDifficulty').textContent = card.difficulty.charAt(0).toUpperCase() + card.difficulty.slice(1);
+            document.getElementById('currentCard').innerHTML = `
+                <div class="flashcard" id="flashcard" onclick="flipCard()">
+                    <div class="flashcard-face flashcard-front">
+                        <div class="flashcard-category" style="background: ${card.color}22; color: ${card.color};">
+                            ${card.icon} ${card.categoryName}
+                        </div>
+                        <div class="flashcard-content">
+                            <div class="flashcard-title">${card.front.title}</div>
+                            <div class="flashcard-question">${card.front.question}</div>
+                            <div class="flashcard-instruction">
+                                <i class="fas fa-hand-point-up"></i> Cliquez pour retourner la carte
+                            </div>
+                        </div>
+                    </div>
+                    <div class="flashcard-face flashcard-back" style="background: linear-gradient(135deg, ${card.color}, ${darkenColor(card.color, 20)});">
+                        <div class="flashcard-content">
+                            <div class="flashcard-title">${card.front.title}</div>
+                            <div class="flashcard-question">${card.back.reflection}</div>
+                            
+                            <div style="margin: 2rem 0; padding: 1.5rem; background: rgba(255, 255, 255, 0.1); border-radius: 10px;">
+                                <div style="font-weight: bold; margin-bottom: 0.5rem;">Action proposée :</div>
+                                <div>${card.back.action}</div>
+                            </div>
+                            
+                            <div class="flashcard-evaluation">
+                                <div style="font-weight: bold; margin-bottom: 0.5rem;">${card.back.evaluationLabel} (1-5) :</div>
+                                <input type="range" min="1" max="5" value="3" class="evaluation-slider" id="evaluationSlider">
+                                <div class="evaluation-label">
+                                    <span>Faible</span>
+                                    <span>Élevé</span>
+                                </div>
+                                <button class="flashcard-action" onclick="saveEvaluation(event)">
+                                    <i class="fas fa-save"></i> Enregistrer et continuer
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            `;
             
-            // Mettre à jour la progression
-            document.getElementById('currentCard').textContent = index + 1;
-            document.getElementById('totalCards').textContent = flashcards.length;
-            document.getElementById('progressFill').style.width = `${((index + 1) / flashcards.length) * 100}%`;
+            // Mettre à jour le compteur et la barre de progression
+            document.getElementById('cardCounter').textContent = `Carte ${currentCardIndex + 1}/${flashcards.length}`;
+            document.getElementById('flashcardProgressBar').style.width = `${progress}%`;
             
-            // Réinitialiser l'affichage
-            document.getElementById('flashcardFront').style.display = 'block';
-            document.getElementById('flashcardBack').style.display = 'none';
-            document.getElementById('flashcard').classList.remove('flipped');
+            // Gérer les boutons de navigation
+            document.getElementById('prevBtn').disabled = currentCardIndex === 0;
+            document.getElementById('nextBtn').disabled = currentCardIndex === flashcards.length - 1;
+        }
+        
+        // Fonction pour assombrir une couleur
+        function darkenColor(color, percent) {
+            const num = parseInt(color.replace("#", ""), 16);
+            const amt = Math.round(2.55 * percent);
+            const R = (num >> 16) - amt;
+            const G = (num >> 8 & 0x00FF) - amt;
+            const B = (num & 0x0000FF) - amt;
+            return "#" + (0x1000000 + (R < 255 ? R < 1 ? 0 : R : 255) * 0x10000 +
+                (G < 255 ? G < 1 ? 0 : G : 255) * 0x100 +
+                (B < 255 ? B < 1 ? 0 : B : 255)).toString(16).slice(1);
         }
         
         // Retourner la carte
         function flipCard() {
-            const front = document.getElementById('flashcardFront');
-            const back = document.getElementById('flashcardBack');
-            
-            if (front.style.display !== 'none') {
-                front.style.display = 'none';
-                back.style.display = 'block';
-                document.getElementById('flashcard').classList.add('flipped');
-            } else {
-                front.style.display = 'block';
-                back.style.display = 'none';
-                document.getElementById('flashcard').classList.remove('flipped');
+            const flashcard = document.getElementById('flashcard');
+            if (flashcard) {
+                flashcard.classList.toggle('flipped');
             }
         }
         
-        // Évaluer la carte
-        function rateCard(rating) {
-            if (flashcards.length === 0) return;
-            
-            const card = flashcards[currentFlashcardIndex];
-            
-            // Mettre à jour le score basé sur l'évaluation (0=difficile, 1=moyen, 2=facile)
-            let scoreChange = 0;
-            switch(rating) {
-                case 0: // Difficile
-                    scoreChange = -10;
-                    break;
-                case 1: // Moyen
-                    scoreChange = 5;
-                    break;
-                case 2: // Facile
-                    scoreChange = 15;
-                    card.mastered = true;
-                    break;
-            }
+        // Sauvegarder l'évaluation
+        function saveEvaluation(event) {
+            event.stopPropagation();
             
-            // Mettre à jour le score (limité entre 0 et 100)
-            card.score = Math.max(0, Math.min(100, card.score + scoreChange));
+            const slider = document.getElementById('evaluationSlider');
+            const score = parseInt(slider.value);
+            const card = flashcards[currentCardIndex];
             
-            // Mettre à jour la date de révision
-            const interval = rating === 2 ? 7 : rating === 1 ? 3 : 1;
-            card.nextReview = new Date(Date.now() + interval * 24 * 60 * 60 * 1000);
+            // Sauvegarder l'évaluation
+            if (!card.evaluations) {
+                card.evaluations = [];
+            }
+            card.evaluations.push({
+                score: score,
+                date: new Date().toISOString(),
+                category: card.category
+            });
             
-            // Mettre à jour les statistiques
-            flashcardStats.totalReviewed++;
-            flashcardStats.streak++;
+            // Mettre à jour les stats
+            flashcardsStats.reviewedCards++;
             
-            // Calculer le taux de maîtrise
-            const mastered = flashcards.filter(c => c.mastered).length;
-            flashcardStats.masteryRate = Math.round((mastered / flashcards.length) * 100);
+            // Calculer la moyenne
+            const totalScores = flashcardsData.reduce((sum, card) => {
+                if (card.evaluations && card.evaluations.length > 0) {
+                    return sum + card.evaluations[card.evaluations.length - 1].score;
+                }
+                return sum;
+            }, 0);
             
-            // Calculer le score moyen
-            const totalScore = flashcards.reduce((sum, c) => sum + c.score, 0);
-            flashcardStats.avgScore = Math.round(totalScore / flashcards.length);
+            const reviewedWithScores = flashcardsData.filter(card => 
+                card.evaluations && card.evaluations.length > 0
+            ).length;
             
-            // Mettre à jour l'affichage
-            updateFlashcardStatsDisplay();
+            flashcardsStats.averageScore = reviewedWithScores > 0 
+                ? (totalScores / reviewedWithScores).toFixed(1) 
+                : 0;
             
             // Passer à la carte suivante
             nextCard();
-        }
-        
-        // Carte suivante
-        function nextCard() {
-            if (flashcards.length === 0) return;
             
-            currentFlashcardIndex = (currentFlashcardIndex + 1) % flashcards.length;
-            displayFlashcard(currentFlashcardIndex);
-        }
-        
-        // Mettre à jour les statistiques des flashcards
-        function updateFlashcardStats() {
-            const mastered = flashcards.filter(c => c.mastered).length;
-            const due = flashcards.filter(c => new Date(c.nextReview) <= new Date()).length;
-            const totalScore = flashcards.reduce((sum, c) => sum + c.score, 0);
-            
-            flashcardStats = {
-                totalReviewed: flashcardStats.totalReviewed,
-                masteryRate: Math.round((mastered / flashcards.length) * 100),
-                avgScore: Math.round(totalScore / flashcards.length),
-                streak: flashcardStats.streak
-            };
+            // Mettre à jour le dashboard
+            updateDashboardEM();
             
-            updateFlashcardStatsDisplay();
-            updateFlashcardProgressChart();
+            showNotification('Évaluation enregistrée !', 'success');
         }
         
-        // Mettre à jour l'affichage des statistiques
-        function updateFlashcardStatsDisplay() {
-            document.getElementById('streakCount').textContent = flashcardStats.streak;
-            document.getElementById('statsTotalCards').textContent = flashcards.length;
-            document.getElementById('statsMastered').textContent = flashcards.filter(c => c.mastered).length;
-            document.getElementById('statsLearning').textContent = flashcards.filter(c => !c.mastered).length;
-            document.getElementById('statsDue').textContent = flashcards.filter(c => new Date(c.nextReview) <= new Date()).length;
+        // Carte précédente
+        function prevCard() {
+            if (currentCardIndex > 0) {
+                currentCardIndex--;
+                displayCurrentCard();
+            }
         }
         
-        // Ajouter une nouvelle flashcard
-        function addNewFlashcard() {
-            const question = document.getElementById('newQuestion').value;
-            const answer = document.getElementById('newAnswer').value;
-            const category = document.getElementById('newCategory').value;
-            const difficulty = document.getElementById('newDifficulty').value;
-            
-            if (!question || !answer) {
-                showNotification('Veuillez entrer une question et une réponse', 'warning');
-                return;
+        // Carte suivante
+        function nextCard() {
+            if (currentCardIndex < flashcards.length - 1) {
+                currentCardIndex++;
+                displayCurrentCard();
+            } else {
+                // Revenir au début ou afficher un message
+                if (confirm('Vous avez terminé toutes les cartes de cette catégorie. Voulez-vous recommencer ?')) {
+                    currentCardIndex = 0;
+                    shuffleArray(flashcards);
+                    displayCurrentCard();
+                }
             }
+        }
+        
+        // Mettre à jour les statistiques des flashcards
+        function updateFlashcardsStats() {
+            const statsContainer = document.getElementById('flashcardsStats');
             
-            const newCard = {
-                id: flashcards.length + 1,
-                question: question,
-                answer: answer,
-                explanation: 'Nouvelle carte à apprendre',
-                category: category,
-                difficulty: difficulty,
-                score: 50,
-                mastered: false,
-                nextReview: new Date()
-            };
-            
-            flashcards.push(newCard);
-            
-            // Réinitialiser le formulaire
-            document.getElementById('newQuestion').value = '';
-            document.getElementById('newAnswer').value = '';
+            // Calculer les stats par catégorie
+            const categoryStats = {};
+            flashcardsData.forEach(card => {
+                if (!categoryStats[card.category]) {
+                    categoryStats[card.category] = {
+                        name: card.categoryName,
+                        count: 0,
+                        reviewed: 0,
+                        avgScore: 0
+                    };
+                }
+                categoryStats[card.category].count++;
+                
+                if (card.evaluations && card.evaluations.length > 0) {
+                    categoryStats[card.category].reviewed++;
+                    const lastScore = card.evaluations[card.evaluations.length - 1].score;
+                    categoryStats[card.category].avgScore = 
+                        ((categoryStats[card.category].avgScore * (categoryStats[card.category].reviewed - 1) + lastScore) / 
+                         categoryStats[card.category].reviewed).toFixed(1);
+                }
+            });
             
-            // Mettre à jour l'affichage
-            updateFlashcardStats();
+            // Trouver la catégorie préférée (avec le plus d'évaluations)
+            let favoriteCategory = '';
+            let maxReviewed = 0;
+            Object.keys(categoryStats).forEach(cat => {
+                if (categoryStats[cat].reviewed > maxReviewed) {
+                    maxReviewed = categoryStats[cat].reviewed;
+                    favoriteCategory = categoryStats[cat].name;
+                }
+            });
             
-            // Afficher la nouvelle carte
-            currentFlashcardIndex = flashcards.length - 1;
-            displayFlashcard(currentFlashcardIndex);
+            flashcardsStats.favoriteCategory = favoriteCategory || 'Aucune';
             
-            showNotification('Flashcard ajoutée avec succès !', 'success');
+            statsContainer.innerHTML = `
+                <div class="stat-card">
+                    <div class="stat-value">${flashcardsStats.totalCards}</div>
+                    <div class="stat-label">Cartes disponibles</div>
+                </div>
+                <div class="stat-card">
+                    <div class="stat-value">${flashcardsStats.reviewedCards}</div>
+                    <div class="stat-label">Cartes consultées</div>
+                </div>
+                <div class="stat-card">
+                    <div class="stat-value">${flashcardsStats.averageScore}/5</div>
+                    <div class="stat-label">Score moyen</div>
+                </div>
+                <div class="stat-card">
+                    <div class="stat-value">${flashcardsStats.favoriteCategory}</div>
+                    <div class="stat-label">Catégorie préférée</div>
+                </div>
+            `;
         }
         
-        // Créer le graphique de progression des flashcards
-        function updateFlashcardProgressChart() {
-            const ctx = document.getElementById('flashcardProgressChart').getContext('2d');
+        // Mettre à jour le DashboardEM
+        function updateDashboardEM() {
+            const dashboardContainer = document.getElementById('dashboardEM');
             
-            if (window.flashcardProgressChart) {
-                window.flashcardProgressChart.destroy();
-            }
+            // Calculer les métriques
+            const totalEvaluations = flashcardsData.reduce((sum, card) => 
+                sum + (card.evaluations ? card.evaluations.length : 0), 0);
+            
+            const today = new Date().toISOString().split('T')[0];
+            const evaluationsToday = flashcardsData.reduce((sum, card) => {
+                if (card.evaluations) {
+                    return sum + card.evaluations.filter(eval => 
+                        eval.date.split('T')[0] === today
+                    ).length;
+                }
+                return sum;
+            }, 0);
             
-            const mastered = flashcards.filter(c => c.mastered).length;
-            const learning = flashcards.filter(c => !c.mastered).length;
+            // Calculer la persévérance (moyenne des scores des cartes persévérance)
+            const perseveranceCards = flashcardsData.filter(card => card.category === 'perseverance');
+            const perseveranceScore = perseveranceCards.length > 0 ? 
+                perseveranceCards.reduce((sum, card) => {
+                    if (card.evaluations && card.evaluations.length > 0) {
+                        return sum + card.evaluations[card.evaluations.length - 1].score;
+                    }
+                    return sum;
+                }, 0) / perseveranceCards.filter(c => c.evaluations && c.evaluations.length > 0).length : 0;
             
-            window.flashcardProgressChart = new Chart(ctx, {
-                type: 'doughnut',
-                data: {
-                    labels: ['Maîtrisées', 'En Apprentissage'],
-                    datasets: [{
-                        data: [mastered, learning],
-                        backgroundColor: ['#10b981', '#f59e0b'],
-                        borderWidth: 2,
-                        borderColor: 'white'
-                    }]
-                },
-                options: {
-                    responsive: true,
-                    maintainAspectRatio: false,
-                    plugins: {
-                        legend: {
-                            position: 'bottom'
-                        }
-                    },
-                    cutout: '60%'
+            // Calculer la diversité stratégique (nombre de catégories utilisées)
+            const usedCategories = new Set();
+            flashcardsData.forEach(card => {
+                if (card.evaluations && card.evaluations.length > 0) {
+                    usedCategories.add(card.category);
                 }
             });
+            const strategyDiversity = (usedCategories.size / 6 * 100).toFixed(0); // 6 catégories au total
+            
+            dashboardContainer.innerHTML = `
+                <div class="dashboardEM-card">
+                    <div class="dashboardEM-header">
+                        <div class="dashboardEM-icon" style="background: linear-gradient(135deg, #3b82f6, #1d4ed8);">
+                            <i class="fas fa-brain"></i>
+                        </div>
+                        <div>
+                            <h4>Persévérance</h4>
+                            <div style="font-size: 0.9rem; color: var(--gray-color);">Capacité à maintenir l'effort</div>
+                        </div>
+                    </div>
+                    <div class="dashboardEM-metric">
+                        <div class="dashboardEM-value">${perseveranceScore.toFixed(1)}/5</div>
+                        <div class="dashboardEM-change">+${(perseveranceScore * 20).toFixed(0)}%</div>
+                    </div>
+                    <div class="dashboardEM-trend">
+                        <i class="fas fa-chart-line" style="color: #10b981;"></i>
+                        <span>Stable cette semaine</span>
+                    </div>
+                </div>
+                
+                <div class="dashboardEM-card">
+                    <div class="dashboardEM-header">
+                        <div class="dashboardEM-icon" style="background: linear-gradient(135deg, #10b981, #059669);">
+                            <i class="fas fa-bolt"></i>
+                        </div>
+                        <div>
+                            <h4>Gestion de l'Effort</h4>
+                            <div style="font-size: 0.9rem; color: var(--gray-color);">Efficacité énergétique</div>
+                        </div>
+                    </div>
+                    <div class="dashboardEM-metric">
+                        <div class="dashboardEM-value">${flashcardsStats.averageScore}/5</div>
+                        <div class="dashboardEM-change">${flashcardsStats.averageScore > 3 ? '+' : ''}${(flashcardsStats.averageScore * 20 - 60).toFixed(0)}%</div>
+                    </div>
+                    <div class="dashboardEM-trend">
+                        <i class="fas fa-chart-line" style="color: ${flashcardsStats.averageScore > 3 ? '#10b981' : '#ef4444'}"></i>
+                        <span>${flashcardsStats.averageScore > 3 ? 'En progression' : 'À améliorer'}</span>
+                    </div>
+                </div>
+                
+                <div class="dashboardEM-card">
+                    <div class="dashboardEM-header">
+                        <div class="dashboardEM-icon" style="background: linear-gradient(135deg, #8b5cf6, #7c3aed);">
+                            <i class="fas fa-lightbulb"></i>
+                        </div>
+                        <div>
+                            <h4>Métacognition</h4>
+                            <div style="font-size: 0.9rem; color: var(--gray-color);">Diversité des stratégies</div>
+                        </div>
+                    </div>
+                    <div class="dashboardEM-metric">
+                        <div class="dashboardEM-value">${strategyDiversity}%</div>
+                        <div class="dashboardEM-change">+${(strategyDiversity / 2).toFixed(0)}%</div>
+                    </div>
+                    <div class="dashboardEM-trend">
+                        <i class="fas fa-chart-line" style="color: #10b981;"></i>
+                        <span>${strategyDiversity > 50 ? 'Diversifié' : 'À élargir'}</span>
+                    </div>
+                </div>
+                
+                <div class="dashboardEM-card">
+                    <div class="dashboardEM-header">
+                        <div class="dashboardEM-icon" style="background: linear-gradient(135deg, #ec4899, #db2777);">
+                            <i class="fas fa-fire"></i>
+                        </div>
+                        <div>
+                            <h4>Activité</h4>
+                            <div style="font-size: 0.9rem; color: var(--gray-color);">Engagement quotidien</div>
+                        </div>
+                    </div>
+                    <div class="dashboardEM-metric">
+                        <div class="dashboardEM-value">${evaluationsToday}</div>
+                        <div class="dashboardEM-change">${evaluationsToday > 0 ? '+100%' : '0%'}</div>
+                    </div>
+                    <div class="dashboardEM-trend">
+                        <i class="fas fa-calendar-day" style="color: ${evaluationsToday > 0 ? '#10b981' : '#ef4444'}"></i>
+                        <span>${evaluationsToday > 0 ? 'Actif aujourd\'hui' : 'Pas d\'activité'}</span>
+                    </div>
+                </div>
+            `;
+        }
+        
+        // Réinitialiser les flashcards
+        function resetFlashcards() {
+            if (confirm('Voulez-vous vraiment réinitialiser toutes les flashcards ? Cela effacera toutes vos évaluations.')) {
+                flashcardsData.forEach(card => {
+                    delete card.evaluations;
+                });
+                flashcardsStats.reviewedCards = 0;
+                flashcardsStats.averageScore = 0;
+                flashcardsStats.favoriteCategory = 'Aucune';
+                
+                currentCardIndex = 0;
+                showCardByCategory(currentCategory);
+                
+                showNotification('Flashcards réinitialisées avec succès !', 'success');
+            }
         }
         
         // ============================================
@@ -3625,68 +4140,6 @@
             generateHeatmap();
         }
         
-        // ============================================
-        // APPRENDRE SM-2
-        // ============================================
-        
-        // Mettre à jour le graphique de comparaison
-        function updateComparisonChart() {
-            const ctx = document.getElementById('comparisonChart').getContext('2d');
-            
-            if (window.comparisonChart) {
-                window.comparisonChart.destroy();
-            }
-            
-            // Données des différents niveaux de qualité
-            const intervals = {
-                'Difficulté (N0)': [1, 2, 4, 8, 16, 32],
-                'Moyen (N1)': [1, 3, 7, 14, 30, 60],
-                'Bon (N2)': [2, 7, 16, 35, 70, 140],
-                'Excellent (N3)': [3, 10, 25, 60, 120, 240]
-            };
-            
-            const labels = ['R1', 'R2', 'R3', 'R4', 'R5', 'R6'];
-            const colors = ['#ef4444', '#f59e0b', '#10b981', '#3b82f6'];
-            
-            const datasets = Object.entries(intervals).map(([label, data], index) => ({
-                label: label,
-                data: data,
-                borderColor: colors[index],
-                backgroundColor: colors[index] + '20',
-                borderWidth: 2,
-                tension: 0.4,
-                fill: false
-            }));
-            
-            window.comparisonChart = new Chart(ctx, {
-                type: 'line',
-                data: {
-                    labels: labels,
-                    datasets: datasets
-                },
-                options: {
-                    responsive: true,
-                    maintainAspectRatio: false,
-                    scales: {
-                        y: {
-                            beginAtZero: true,
-                            title: {
-                                display: true,
-                                text: 'Intervalle (jours)'
-                            }
-                        }
-                    },
-                    plugins: {
-                        title: {
-                            display: true,
-                            text: 'Comparaison des Courbes SM-2 par Niveau de Qualité',
-                            font: { size: 16 }
-                        }
-                    }
-                }
-            });
-        }
-        
         // ============================================
         // FONCTIONS UTILITAIRES
         // ============================================
@@ -3750,11 +4203,31 @@
                 }
                 
                 // Charger les flashcards
-                const savedFlashcards = localStorage.getItem('flashcards');
+                const savedFlashcards = localStorage.getItem('flashcardsData');
                 if (savedFlashcards) {
-                    flashcards = JSON.parse(savedFlashcards);
-                    displayFlashcard(currentFlashcardIndex);
-                    updateFlashcardStats();
+                    const parsed = JSON.parse(savedFlashcards);
+                    if (parsed && parsed.length > 0) {
+                        flashcardsData = parsed;
+                        
+                        // Calculer les stats des flashcards
+                        flashcardsStats.reviewedCards = flashcardsData.reduce((sum, card) => 
+                            sum + (card.evaluations ? card.evaluations.length : 0), 0);
+                        
+                        const totalScores = flashcardsData.reduce((sum, card) => {
+                            if (card.evaluations && card.evaluations.length > 0) {
+                                return sum + card.evaluations[card.evaluations.length - 1].score;
+                            }
+                            return sum;
+                        }, 0);
+                        
+                        const reviewedWithScores = flashcardsData.filter(card => 
+                            card.evaluations && card.evaluations.length > 0
+                        ).length;
+                        
+                        flashcardsStats.averageScore = reviewedWithScores > 0 
+                            ? (totalScores / reviewedWithScores).toFixed(1) 
+                            : 0;
+                    }
                 }
             } catch (error) {
                 console.error('Erreur lors du chargement des données:', error);
@@ -3766,15 +4239,18 @@
             try {
                 localStorage.setItem('learnerProfile', JSON.stringify(learnerProfile));
                 localStorage.setItem('journalEntries', JSON.stringify(journalEntries));
-                localStorage.setItem('flashcards', JSON.stringify(flashcards));
-                showNotification('Toutes les données ont été sauvegardées', 'success');
+                localStorage.setItem('flashcardsData', JSON.stringify(flashcardsData));
+                // Note: Pas de notification pour éviter de déranger l'utilisateur
             } catch (error) {
-                showNotification('Erreur lors de la sauvegarde', 'error');
+                console.error('Erreur lors de la sauvegarde:', error);
             }
         }
         
         // Sauvegarder automatiquement toutes les 30 secondes
         setInterval(saveAllData, 30000);
+        
+        // Sauvegarder aussi quand l'utilisateur quitte la page
+        window.addEventListener('beforeunload', saveAllData);
     </script>
 </body>
 </html>