Upload folder using huggingface_hub

index.html

@@ -1831,6 +1831,8 @@
                             <option value="conjugaison">Conjugaison française</option>
                             <option value="grammaire">Grammaire française</option>
                             <option value="vocabulaire">Vocabulaire français</option>
+                            <option value="expression_ecrite">Expression écrite</option>
+                            <option value="comprehension_orale">Compréhension orale</option>
                         </select>
                     </div>
                     <div class="form-col">
@@ -1847,11 +1849,11 @@
                 <div class="form-row">
                     <div class="form-col">
                         <label class="form-label"><i class="fas fa-calendar-start"></i> Date de Début</label>
-                        <input type="date" id="start" class="form-control" value="2026-01-29">
+                        <input type="date" id="start" class="form-control" value="2024-01-15">
                     </div>
                     <div class="form-col">
                         <label class="form-label"><i class="fas fa-calendar-end"></i> Date de Fin</label>
-                        <input type="date" id="end" class="form-control" value="2026-12-31">
+                        <input type="date" id="end" class="form-control" value="2024-12-31">
                     </div>
                 </div>
                 
@@ -1865,6 +1867,54 @@
                     </select>
                 </div>
                 
+                <!-- Habitudes Productivité -->
+                <div class="form-group">
+                    <label class="form-label"><i class="fas fa-chart-line"></i> Méthode Productivité</label>
+                    <div class="productivity-options">
+                        <div class="productivity-option selected" onclick="selectProductivityMethod('pomodoro')">
+                            <span class="productivity-icon">🍅</span>
+                            <div>Pomodoro</div>
+                            <small>25 min travail / 5 min pause</small>
+                        </div>
+                        <div class="productivity-option" onclick="selectProductivityMethod('deepwork')">
+                            <span class="productivity-icon">⏳</span>
+                            <div>Deep Work</div>
+                            <small>90 min focus intense</small>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Type d'Énergie -->
+                <div class="form-group">
+                    <label class="form-label"><i class="fas fa-sun"></i> Type d'Énergie</label>
+                    <div class="energy-patterns">
+                        <div class="energy-pattern selected" onclick="selectEnergyPattern('morning')">
+                            <div>🌅 Matinale</div>
+                            <small>Meilleure concentration le matin</small>
+                        </div>
+                        <div class="energy-pattern" onclick="selectEnergyPattern('evening')">
+                            <div>🌙 Vespérale</div>
+                            <small>Plus productif en soirée</small>
+                        </div>
+                        <div class="energy-pattern" onclick="selectEnergyPattern('flexible')">
+                            <div>🔄 Flexible</div>
+                            <small>Adaptable selon le jour</small>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Créneaux Disponibles -->
+                <div class="form-group">
+                    <label class="form-label"><i class="fas fa-calendar-check"></i> Créneaux Disponibles</label>
+                    <div class="time-slots">
+                        <div class="time-slot selected" onclick="toggleTimeSlot('morning')">08:00-10:00</div>
+                        <div class="time-slot" onclick="toggleTimeSlot('late_morning')">10:00-12:00</div>
+                        <div class="time-slot" onclick="toggleTimeSlot('afternoon')">14:00-16:00</div>
+                        <div class="time-slot" onclick="toggleTimeSlot('late_afternoon')">16:00-18:00</div>
+                        <div class="time-slot" onclick="toggleTimeSlot('evening')">19:00-21:00</div>
+                    </div>
+                </div>
+                
                 <!-- Qualité Estimée -->
                 <div class="form-group">
                     <label class="form-label"><i class="fas fa-chart-line"></i> Qualité Estimée de Rétention</label>
@@ -1963,6 +2013,42 @@
                             <div class="progress-fill" id="progressFill" style="width: 33%"></div>
                         </div>
                     </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>
+                        <button class="btn btn-primary" onclick="addNewFlashcard()">
+                            <i class="fas fa-plus"></i> Ajouter la Flashcard
+                        </button>
+                    </div>
                 </div>
             </div>
         </section>
@@ -1972,21 +2058,51 @@
             <div class="card">
                 <div class="card-header">
                     <h3><i class="fas fa-book"></i> Journal d'Apprentissage Autorégulé</h3>
+                    <button class="btn btn-secondary" onclick="loadJournalEntries()">
+                        <i class="fas fa-history"></i> Historique
+                    </button>
+                </div>
+                
+                <div class="form-row">
+                    <div class="form-col">
+                        <label class="form-label"><i class="fas fa-tasks"></i> Planifié (To-Do)</label>
+                        <textarea id="todo" class="form-control" rows="3" placeholder="Ce que vous prévoyez d'apprendre..."></textarea>
+                    </div>
+                    <div class="form-col">
+                        <label class="form-label"><i class="fas fa-spinner"></i> En Cours (Doing)</label>
+                        <textarea id="doing" class="form-control" rows="3" placeholder="Ce que vous faites actuellement..."></textarea>
+                    </div>
+                </div>
+                
+                <div class="form-group">
+                    <label class="form-label"><i class="fas fa-check-circle"></i> Accompli (Done)</label>
+                    <textarea id="done" class="form-control" rows="3" placeholder="Ce que vous avez accompli..."></textarea>
                 </div>
                 
                 <div class="form-group">
-                    <label class="form-label"><i class="fas fa-tasks"></i> Ce que j'ai accompli aujourd'hui</label>
-                    <textarea id="done" class="form-control" rows="3" placeholder="Décrivez ce que vous avez appris..."></textarea>
+                    <label class="form-label"><i class="fas fa-star"></i> Auto-évaluation (1-5)</label>
+                    <div class="quality-indicator">
+                        <div class="quality-dot" onclick="setEvaluation(1)" style="background: linear-gradient(135deg, #ef4444, #dc2626);">1</div>
+                        <div class="quality-dot" onclick="setEvaluation(2)" style="background: linear-gradient(135deg, #f59e0b, #d97706);">2</div>
+                        <div class="quality-dot active" onclick="setEvaluation(3)" style="background: linear-gradient(135deg, #10b981, #059669);">3</div>
+                        <div class="quality-dot" onclick="setEvaluation(4)" style="background: linear-gradient(135deg, #3b82f6, #1d4ed8);">4</div>
+                        <div class="quality-dot" onclick="setEvaluation(5)" style="background: linear-gradient(135deg, #8b5cf6, #7c3aed);">5</div>
+                    </div>
                 </div>
                 
                 <div class="form-group">
-                    <label class="form-label"><i class="fas fa-lightbulb"></i> Difficultés rencontrées</label>
-                    <textarea id="difficulties" class="form-control" rows="3" placeholder="Quelles difficultés avez-vous rencontrées ?"></textarea>
+                    <label class="form-label"><i class="fas fa-lightbulb"></i> Stratégie Métacognitive</label>
+                    <textarea id="metacognition" class="form-control" rows="3" placeholder="Quelle stratégie avez-vous utilisée ? Que changeriez-vous ?"></textarea>
                 </div>
                 
                 <button class="btn btn-primary btn-large" onclick="saveJournal()">
                     <i class="fas fa-save"></i> Sauvegarder l'Entrée
                 </button>
+                
+                <div id="journalHistory" style="display: none; margin-top: 2rem;">
+                    <h4><i class="fas fa-history"></i> Dernières Entrées</h4>
+                    <div id="journalEntries"></div>
+                </div>
             </div>
         </section>
         
@@ -1994,12 +2110,22 @@
         <section id="notifications" class="tab-content">
             <div class="card">
                 <div class="card-header">
-                    <h3><i class="fas fa-bell"></i> Notifications Intelligentes</h3>
+                    <h3><i class="fas fa-bell"></i> Notifications Intelligentes par Bandits Multi-Bras</h3>
+                    <button class="btn btn-secondary" onclick="getIntelligentReminder()">
+                        <i class="fas fa-sync"></i> Nouveau Rappel
+                    </button>
                 </div>
                 
                 <div id="notificationContainer">
                     <div class="notification-card">
-                        <p><i class="fas fa-info-circle"></i> Vos notifications seront personnalisées selon votre profil d'apprentissage.</p>
+                        <p><i class="fas fa-info-circle"></i> Cliquez sur "Nouveau Rappel" pour recevoir une notification personnalisée basée sur vos habitudes d'apprentissage.</p>
+                    </div>
+                </div>
+                
+                <div class="visualization-container">
+                    <h4><i class="fas fa-chart-bar"></i> Efficacité des Types de Notifications</h4>
+                    <div class="chart-container">
+                        <canvas id="notificationChart"></canvas>
                     </div>
                 </div>
             </div>
@@ -2010,9 +2136,12 @@
             <div class="card">
                 <div class="card-header">
                     <h3><i class="fas fa-chart-line"></i> Tableau de Bord d'Apprentissage</h3>
+                    <button class="btn btn-secondary" onclick="refreshStats()">
+                        <i class="fas fa-redo"></i> Actualiser
+                    </button>
                 </div>
                 
-                <div class="stats-grid">
+                <div id="statsContainer" class="stats-grid">
                     <div class="stat-card">
                         <div class="stat-value">12</div>
                         <div class="stat-label">Sessions Complétées</div>
@@ -2025,6 +2154,121 @@
                         <div class="stat-value">7</div>
                         <div class="stat-label">Jours d'Activité</div>
                     </div>
+                    <div class="stat-card">
+                        <div class="stat-value">4.2/5</div>
+                        <div class="stat-label">Satisfaction</div>
+                    </div>
+                </div>
+                
+                <!-- Heatmap d'activité -->
+                <div class="heatmap-container">
+                    <div class="heatmap-header">
+                        <div class="heatmap-title">
+                            <i class="fas fa-fire"></i> Heatmap d'activité
+                        </div>
+                        <div class="heatmap-controls">
+                            <button class="heatmap-period active" onclick="changeHeatmapPeriod('month')">Mois</button>
+                            <button class="heatmap-period" onclick="changeHeatmapPeriod('quarter')">Trimestre</button>
+                            <button class="heatmap-period" onclick="changeHeatmapPeriod('year')">Année</button>
+                        </div>
+                    </div>
+                    
+                    <div id="heatmapContent">
+                        <!-- La heatmap sera générée ici par JavaScript -->
+                    </div>
+                    
+                    <div class="heatmap-legend">
+                        <div class="legend-item">
+                            <div class="legend-color heatmap-intensity-0"></div>
+                            <span>0 min</span>
+                        </div>
+                        <div class="legend-item">
+                            <div class="legend-color heatmap-intensity-1"></div>
+                            <span>15 min</span>
+                        </div>
+                        <div class="legend-item">
+                            <div class="legend-color heatmap-intensity-2"></div>
+                            <span>30 min</span>
+                        </div>
+                        <div class="legend-item">
+                            <div class="legend-color heatmap-intensity-3"></div>
+                            <span>45 min</span>
+                        </div>
+                        <div class="legend-item">
+                            <div class="legend-color heatmap-intensity-4"></div>
+                            <span>60+ min</span>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- Indicateurs de gestion du temps -->
+                <div class="time-management-stats">
+                    <div class="time-stat-card">
+                        <div class="time-stat-header">
+                            <div class="time-stat-icon" style="background: linear-gradient(135deg, #10b981, #059669);">
+                                <i class="fas fa-calendar-check"></i>
+                            </div>
+                            <div>
+                                <h4>Régularité du travail</h4>
+                                <div class="time-stat-description">Constance de l'activité dans le temps</div>
+                            </div>
+                        </div>
+                        <div class="progress-circle">
+                            <svg viewBox="0 0 100 100">
+                                <circle cx="50" cy="50" r="45" fill="none" stroke="#e2e8f0" stroke-width="8"/>
+                                <circle cx="50" cy="50" r="45" fill="none" stroke="#10b981" stroke-width="8" 
+                                        stroke-linecap="round" stroke-dasharray="283" stroke-dashoffset="28.3"/>
+                            </svg>
+                            <div class="progress-text">90%</div>
+                        </div>
+                    </div>
+                    
+                    <div class="time-stat-card">
+                        <div class="time-stat-header">
+                            <div class="time-stat-icon" style="background: linear-gradient(135deg, #3b82f6, #1d4ed8);">
+                                <i class="fas fa-clock"></i>
+                            </div>
+                            <div>
+                                <h4>Gestion des échéances</h4>
+                                <div class="time-stat-description">Capacité à respecter les délais</div>
+                            </div>
+                        </div>
+                        <div class="progress-circle">
+                            <svg viewBox="0 0 100 100">
+                                <circle cx="50" cy="50" r="45" fill="none" stroke="#e2e8f0" stroke-width="8"/>
+                                <circle cx="50" cy="50" r="45" fill="none" stroke="#3b82f6" stroke-width="8" 
+                                        stroke-linecap="round" stroke-dasharray="283" stroke-dashoffset="53.77"/>
+                            </svg>
+                            <div class="progress-text">81%</div>
+                        </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>
@@ -2037,21 +2281,42 @@
                 </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>
+                    <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>
     
     <script>
+        // ============================================
+        // VARIABLES GLOBALES
+        // ============================================
+        
         // Variables pour le profil
         let learnerProfile = {
             bigFive: {
@@ -2079,16 +2344,140 @@
             }
         };
         
-        // Variables pour la progression
-        let profileCompletionPercentage = 40;
+        // 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;
+        let productivityMethod = 'pomodoro';
+        let energyPattern = 'morning';
+        
+        // Variables pour la heatmap
+        let currentHeatmapPeriod = 'month';
+        
+        // Variables pour le journal
+        let journalEntries = [];
+        
+        // ============================================
+        // INITIALISATION
+        // ============================================
         
-        // Initialisation
         document.addEventListener('DOMContentLoaded', function() {
+            // Initialiser le profil
             updateProfileProgress();
             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();
+            
+            // Charger les données sauvegardées
+            loadSavedData();
         });
         
+        // ============================================
+        // FONCTIONS DE NAVIGATION
+        // ============================================
+        
+        function showTab(tabId) {
+            // Masquer toutes les sections
+            document.querySelectorAll('.tab-content').forEach(section => {
+                section.classList.remove('active');
+            });
+            
+            // Désactiver tous les onglets
+            document.querySelectorAll('.nav-tab').forEach(tab => {
+                tab.classList.remove('active');
+            });
+            
+            // Activer la section sélectionnée
+            document.getElementById(tabId).classList.add('active');
+            
+            // Activer l'onglet correspondant
+            const tabNames = {
+                'profile': 'Profil Apprenant',
+                'objectif': 'Objectif',
+                'planner': 'Planner',
+                'flashcards': 'Flashcards',
+                'journal': 'Journal',
+                'notifications': 'Notifications',
+                'stats': 'Statistiques',
+                'learn': 'Apprendre'
+            };
+            
+            document.querySelectorAll('.nav-tab').forEach(tab => {
+                if (tab.textContent.includes(tabNames[tabId])) {
+                    tab.classList.add('active');
+                }
+            });
+            
+            // Actions spécifiques par onglet
+            if (tabId === 'stats') {
+                refreshStats();
+                generateHeatmap();
+            } else if (tabId === 'learn') {
+                updateComparisonChart();
+            }
+        }
+        
+        // ============================================
+        // PROFIL APPRENANT
+        // ============================================
+        
         // Vérifier si toutes les questions d'une section sont répondues
         function checkSectionCompletion(sectionId) {
             const section = document.getElementById(sectionId);
@@ -2206,7 +2595,6 @@
             const totalSections = sections.length;
             
             const percentage = Math.round((completedCount / totalSections) * 100);
-            profileCompletionPercentage = percentage;
             
             // Mettre à jour la barre de progression
             document.getElementById('profileCompletion').textContent = `${percentage}%`;
@@ -2300,33 +2688,49 @@
         
         // Compléter automatiquement toutes les sections
         function completeAllSections() {
-            // Liste des sections à compléter
-            const sections = [
-                { id: 'big5-section', questions: 5 },
-                { id: 'motivation-section', questions: 4 },
-                { id: 'habits-section', questions: 4 },
-                { id: 'wellbeing-section', questions: 4 },
-                { id: 'support-section', questions: 4 }
-            ];
+            // Remplir les sections manquantes avec des valeurs par défaut
+            const defaultValues = {
+                study_hours: 3,
+                late_submissions: 2,
+                completion_rate: 4,
+                forum_participation: 2,
+                sleep_hours: 4,
+                study_stress: 3,
+                relaxation: 3,
+                burnout_risk: 2,
+                family_support: 4,
+                parental_expectations: 4,
+                study_environment: 4,
+                peer_collaboration: 3
+            };
             
-            sections.forEach(section => {
-                const sectionElement = document.getElementById(section.id);
-                const scaleOptions = sectionElement.querySelectorAll('.scale-option');
-                
-                // Sélectionner la troisième option pour chaque question (valeur 3)
-                for (let i = 0; i < section.questions; i++) {
-                    const startIndex = i * 5;
-                    if (scaleOptions[startIndex + 2]) {
-                        scaleOptions[startIndex + 2].click();
-                    }
+            // Appliquer les valeurs par défaut
+            Object.keys(defaultValues).forEach(key => {
+                if (key in learnerProfile.habits) {
+                    learnerProfile.habits[key] = defaultValues[key];
+                }
+                if (key in learnerProfile.wellbeing) {
+                    learnerProfile.wellbeing[key] = defaultValues[key];
+                }
+                if (key in learnerProfile.support) {
+                    learnerProfile.support[key] = defaultValues[key];
                 }
             });
             
-            // Mettre à jour toutes les sections
-            sections.forEach(section => {
-                updateSectionCompletion(section.id);
+            // Marquer toutes les sections comme complètes
+            Object.keys(learnerProfile.completionStatus).forEach(key => {
+                learnerProfile.completionStatus[key] = true;
             });
             
+            // Mettre à jour l'interface
+            updateProfileProgress();
+            updateProfileSummary();
+            
+            // Mettre à jour les indicateurs de section
+            updateSectionCompletion('habits-section');
+            updateSectionCompletion('wellbeing-section');
+            updateSectionCompletion('support-section');
+            
             showNotification('Toutes les sections ont été complétées automatiquement !', 'success');
         }
         
@@ -2388,14 +2792,6 @@
                 });
             }
             
-            // Recommandations basées sur les habitudes
-            if (learnerProfile.habits.study_hours >= 4) {
-                recommendations.push({
-                    icon: '⚠️',
-                    text: 'Trop d\'heures d\'étude peuvent mener au burnout. Équilibrez avec des pauses régulières.'
-                });
-            }
-            
             // Mettre à jour l'affichage des recommandations
             updateRecommendationsDisplay(recommendations);
         }
@@ -2405,127 +2801,319 @@
             const container = document.querySelector('.recommendations-section');
             let html = '<h4><i class="fas fa-lightbulb"></i> Recommandations Personnalisées Basées sur Votre Profil</h4>';
             
-            if (recommendations.length === 0) {
+            recommendations.forEach(rec => {
                 html += `
                     <div class="recommendation-item">
-                        <div class="recommendation-icon">📊</div>
-                        <div>Complétez votre profil pour obtenir des recommandations personnalisées.</div>
+                        <div class="recommendation-icon">${rec.icon}</div>
+                        <div>${rec.text}</div>
                     </div>
                 `;
-            } else {
-                recommendations.forEach(rec => {
-                    html += `
-                        <div class="recommendation-item">
-                            <div class="recommendation-icon">${rec.icon}</div>
-                            <div>${rec.text}</div>
-                        </div>
-                    `;
-                });
-            }
+            });
             
             container.innerHTML = html;
         }
         
-        // Afficher une notification
-        function showNotification(message, type = 'info') {
-            const colors = {
-                success: '#10b981',
-                error: '#ef4444',
-                warning: '#f59e0b',
-                info: '#3b82f6'
-            };
-            
-            // Créer une notification temporaire
-            const notification = document.createElement('div');
-            notification.style.cssText = `
-                position: fixed;
-                top: 20px;
-                right: 20px;
-                background: white;
-                color: ${colors[type]};
-                padding: 1rem 1.5rem;
-                border-radius: 10px;
-                box-shadow: 0 5px 20px rgba(0,0,0,0.1);
-                border-left: 4px solid ${colors[type]};
-                z-index: 1000;
-                animation: slideIn 0.3s ease;
-            `;
-            
-            notification.innerHTML = `
-                <div style="display: flex; align-items: center; gap: 10px;">
-                    <i class="fas fa-${type === 'success' ? 'check-circle' : type === 'error' ? 'exclamation-circle' : type === 'warning' ? 'exclamation-triangle' : 'info-circle'}"></i>
-                    <div>${message}</div>
-                </div>
-            `;
-            
-            document.body.appendChild(notification);
-            
-            // Supprimer après 3 secondes
-            setTimeout(() => {
-                notification.style.animation = 'slideIn 0.3s ease reverse';
-                setTimeout(() => notification.remove(), 300);
-            }, 3000);
+        // ============================================
+        // OBJECTIF ET PLANNER
+        // ============================================
+        
+        // Sélectionner la méthode de productivité
+        function selectProductivityMethod(method) {
+            productivityMethod = method;
+            document.querySelectorAll('.productivity-option').forEach(option => {
+                option.classList.remove('selected');
+            });
+            event.target.closest('.productivity-option').classList.add('selected');
         }
         
-        // Navigation entre les onglets
-        function showTab(tabId) {
-            document.querySelectorAll('.tab-content').forEach(section => {
-                section.classList.remove('active');
+        // Sélectionner le type d'énergie
+        function selectEnergyPattern(pattern) {
+            energyPattern = pattern;
+            document.querySelectorAll('.energy-pattern').forEach(pattern => {
+                pattern.classList.remove('selected');
             });
+            event.target.closest('.energy-pattern').classList.add('selected');
+        }
+        
+        // Basculer créneau horaire
+        function toggleTimeSlot(slot) {
+            const index = selectedTimeSlots.indexOf(slot);
+            if (index === -1) {
+                selectedTimeSlots.push(slot);
+            } else {
+                selectedTimeSlots.splice(index, 1);
+            }
             
-            document.querySelectorAll('.nav-tab').forEach(tab => {
-                tab.classList.remove('active');
+            // Mettre à jour l'interface
+            document.querySelectorAll('.time-slot').forEach(element => {
+                element.classList.remove('selected');
             });
-            
-            document.getElementById(tabId).classList.add('active');
-            
-            document.querySelectorAll('.nav-tab').forEach(tab => {
-                if (tab.textContent.includes(getTabName(tabId))) {
-                    tab.classList.add('active');
-                }
+            selectedTimeSlots.forEach(slot => {
+                document.querySelector(`.time-slot:nth-child(${getTimeSlotIndex(slot) + 1})`).classList.add('selected');
             });
         }
         
-        function getTabName(tabId) {
-            const names = {
-                'profile': 'Profil Apprenant',
-                'objectif': 'Objectif',
-                'planner': 'Planner',
-                'flashcards': 'Flashcards',
-                'journal': 'Journal',
-                'notifications': 'Notifications',
-                'stats': 'Statistiques',
-                'learn': 'Apprendre'
-            };
-            return names[tabId] || '';
+        function getTimeSlotIndex(slot) {
+            const slots = ['morning', 'late_morning', 'afternoon', 'late_afternoon', 'evening'];
+            return slots.indexOf(slot);
         }
         
-        // Fonctions pour les flashcards
-        let currentFlashcardIndex = 0;
-        const flashcards = [
-            {
-                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"
-            },
-            {
-                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"
-            },
-            {
-                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"
+        // Sélectionner la qualité
+        function selectQuality(level) {
+            currentQuality = level;
+            document.querySelectorAll('.quality-dot').forEach(dot => {
+                dot.classList.remove('active');
+            });
+            event.target.classList.add('active');
+            
+            const descriptions = [
+                "Difficulté - Révision fréquente nécessaire",
+                "Moyen - Intervalles standard recommandés",
+                "Bon - Consolidation progressive",
+                "Excellent - Rétention à long terme optimale"
+            ];
+            document.getElementById('quality-description').textContent = descriptions[level];
+        }
+        
+        // Générer le planner
+        function generatePlanner() {
+            const competence = document.getElementById('competence').value;
+            const startDate = document.getElementById('start').value;
+            const duration = document.getElementById('duration').value;
+            
+            if (!competence) {
+                showNotification('Veuillez sélectionner une compétence', 'warning');
+                return;
             }
-        ];
+            
+            // Générer les intervalles SM-2 basés sur la qualité
+            const intervals = getSM2Intervals(currentQuality);
+            
+            // Créer le planning
+            const plan = createStudyPlan(competence, startDate, duration, intervals);
+            
+            // Afficher le planning
+            displayPlanner(plan, intervals);
+            
+            // Passer à l'onglet planner
+            showTab('planner');
+            
+            showNotification('Planner généré avec succès !', 'success');
+        }
+        
+        // Obtenir les intervalles SM-2
+        function getSM2Intervals(quality) {
+            const intervals = {
+                0: [1, 2, 4, 8, 16, 32],    // Difficulté
+                1: [1, 3, 7, 14, 30, 60],   // Moyen
+                2: [2, 7, 16, 35, 70, 140], // Bon
+                3: [3, 10, 25, 60, 120, 240] // Excellent
+            };
+            return intervals[quality] || intervals[2];
+        }
+        
+        // Créer le plan d'étude
+        function createStudyPlan(competence, startDate, duration, intervals) {
+            const plan = [];
+            const start = new Date(startDate);
+            
+            for (let i = 0; i < intervals.length; i++) {
+                const sessionDate = new Date(start);
+                sessionDate.setDate(sessionDate.getDate() + intervals[i]);
+                
+                plan.push({
+                    date: sessionDate.toLocaleDateString('fr-FR'),
+                    jour: sessionDate.toLocaleDateString('fr-FR', { weekday: 'long' }),
+                    competence: competence,
+                    duree: `${duration} minutes`,
+                    intervalle: `${intervals[i]} jours`,
+                    repetition: i + 1,
+                    type: i === 0 ? 'Apprentissage' : i < 3 ? 'Consolidation' : 'Maintien',
+                    strategie: i === 0 ? 'Focus intense' : 'Révision active',
+                    productivity_method: productivityMethod === 'pomodoro' ? '🍅 Pomodoro' : '⏳ Deep Work',
+                    optimal_time: energyPattern === 'morning' ? '08:00-10:00' : 
+                                 energyPattern === 'evening' ? '19:00-21:00' : 'Adaptable'
+                });
+            }
+            
+            return plan;
+        }
+        
+        // Afficher le planner
+        function displayPlanner(plan, intervals) {
+            const container = document.getElementById('plannerContent');
+            const statsContainer = document.getElementById('plannerStats');
+            
+            // Calculer le total des jours
+            const totalDays = intervals.reduce((a, b) => a + b, 0);
+            
+            // Statistiques
+            statsContainer.innerHTML = `
+                <div class="stat-card">
+                    <div class="stat-value">${plan.length}</div>
+                    <div class="stat-label">Sessions Planifiées</div>
+                </div>
+                <div class="stat-card">
+                    <div class="stat-value">${totalDays}</div>
+                    <div class="stat-label">Jours Totaux</div>
+                </div>
+                <div class="stat-card">
+                    <div class="stat-value">${currentQuality + 1}/4</div>
+                    <div class="stat-label">Niveau de Qualité</div>
+                </div>
+                <div class="stat-card">
+                    <div class="stat-value">${document.getElementById('duration').value}min</div>
+                    <div class="stat-label">Durée/Session</div>
+                </div>
+            `;
+            
+            // Sessions
+            container.innerHTML = '';
+            plan.forEach(session => {
+                const card = document.createElement('div');
+                card.className = 'session-card';
+                card.innerHTML = `
+                    <div class="session-header">
+                        <div class="session-date">
+                            <i class="fas fa-calendar-day"></i> ${session.date}
+                            <div style="font-size: 0.9rem; color: #64748b;">${session.jour}</div>
+                        </div>
+                        <div class="session-repetition">
+                            R${session.repetition}
+                        </div>
+                    </div>
+                    <h4 style="margin: 10px 0; color: #1e293b;">${session.competence}</h4>
+                    <div class="session-details">
+                        <div class="detail-item">
+                            <span><i class="fas fa-clock"></i> Durée</span>
+                            <span>${session.duree}</span>
+                        </div>
+                        <div class="detail-item">
+                            <span><i class="fas fa-sync-alt"></i> Intervalle</span>
+                            <span>${session.intervalle}</span>
+                        </div>
+                        <div class="detail-item">
+                            <span><i class="fas fa-bullseye"></i> Type</span>
+                            <span>${session.type}</span>
+                        </div>
+                        <div class="detail-item">
+                            <span><i class="fas fa-lightbulb"></i> Stratégie</span>
+                            <span>${session.strategie}</span>
+                        </div>
+                        <div class="detail-item">
+                            <span><i class="fas fa-chart-line"></i> Productivité</span>
+                            <span>${session.productivity_method}</span>
+                        </div>
+                        <div class="detail-item">
+                            <span><i class="fas fa-sun"></i> Heure Optimale</span>
+                            <span>${session.optimal_time}</span>
+                        </div>
+                    </div>
+                `;
+                container.appendChild(card);
+            });
+            
+            // 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
+        // ============================================
         
+        // Afficher une flashcard
+        function displayFlashcard(index) {
+            if (flashcards.length === 0) return;
+            
+            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);
+            
+            // 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}%`;
+            
+            // Réinitialiser l'affichage
+            document.getElementById('flashcardFront').style.display = 'block';
+            document.getElementById('flashcardBack').style.display = 'none';
+            document.getElementById('flashcard').classList.remove('flipped');
+        }
+        
+        // Retourner la carte
         function flipCard() {
             const front = document.getElementById('flashcardFront');
             const back = document.getElementById('flashcardBack');
@@ -2541,60 +3129,601 @@
             }
         }
         
+        // Évaluer la carte
         function rateCard(rating) {
-            // 0 = difficile, 1 = moyen, 2 = facile
+            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;
+            }
+            
+            // Mettre à jour le score (limité entre 0 et 100)
+            card.score = Math.max(0, Math.min(100, card.score + scoreChange));
+            
+            // 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);
+            
+            // Mettre à jour les statistiques
+            flashcardStats.totalReviewed++;
+            flashcardStats.streak++;
+            
+            // Calculer le taux de maîtrise
+            const mastered = flashcards.filter(c => c.mastered).length;
+            flashcardStats.masteryRate = Math.round((mastered / flashcards.length) * 100);
+            
+            // Calculer le score moyen
+            const totalScore = flashcards.reduce((sum, c) => sum + c.score, 0);
+            flashcardStats.avgScore = Math.round(totalScore / flashcards.length);
+            
+            // Mettre à jour l'affichage
+            updateFlashcardStatsDisplay();
+            
+            // Passer à la carte suivante
+            nextCard();
+        }
+        
+        // Carte suivante
+        function nextCard() {
+            if (flashcards.length === 0) return;
+            
             currentFlashcardIndex = (currentFlashcardIndex + 1) % flashcards.length;
             displayFlashcard(currentFlashcardIndex);
         }
         
-        function displayFlashcard(index) {
-            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('flashcardDifficulty').textContent = card.difficulty.charAt(0).toUpperCase() + card.difficulty.slice(1);
+        // 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);
             
-            document.getElementById('currentCard').textContent = index + 1;
-            document.getElementById('totalCards').textContent = flashcards.length;
-            document.getElementById('progressFill').style.width = `${((index + 1) / flashcards.length) * 100}%`;
+            flashcardStats = {
+                totalReviewed: flashcardStats.totalReviewed,
+                masteryRate: Math.round((mastered / flashcards.length) * 100),
+                avgScore: Math.round(totalScore / flashcards.length),
+                streak: flashcardStats.streak
+            };
             
-            document.getElementById('flashcardFront').style.display = 'block';
-            document.getElementById('flashcardBack').style.display = 'none';
-            document.getElementById('flashcard').classList.remove('flipped');
+            updateFlashcardStatsDisplay();
+            updateFlashcardProgressChart();
         }
         
-        // Fonctions pour les autres onglets
-        function selectQuality(level) {
-            document.querySelectorAll('.quality-dot').forEach(dot => {
-                dot.classList.remove('active');
-            });
-            document.querySelector(`.quality-dot[onclick="selectQuality(${level})"]`).classList.add('active');
+        // 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;
+        }
+        
+        // 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;
             
-            const descriptions = [
-                "Difficulté - Révision fréquente nécessaire",
-                "Moyen - Intervalles standard recommandés",
-                "Bon - Consolidation progressive",
-                "Excellent - Rétention à long terme optimale"
-            ];
-            document.getElementById('quality-description').textContent = descriptions[level];
+            if (!question || !answer) {
+                showNotification('Veuillez entrer une question et une réponse', 'warning');
+                return;
+            }
+            
+            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 = '';
+            
+            // Mettre à jour l'affichage
+            updateFlashcardStats();
+            
+            // Afficher la nouvelle carte
+            currentFlashcardIndex = flashcards.length - 1;
+            displayFlashcard(currentFlashcardIndex);
+            
+            showNotification('Flashcard ajoutée avec succès !', 'success');
         }
         
-        function generatePlanner() {
-            showNotification('Planner généré avec succès !', 'success');
-            showTab('planner');
+        // Créer le graphique de progression des flashcards
+        function updateFlashcardProgressChart() {
+            const ctx = document.getElementById('flashcardProgressChart').getContext('2d');
+            
+            if (window.flashcardProgressChart) {
+                window.flashcardProgressChart.destroy();
+            }
+            
+            const mastered = flashcards.filter(c => c.mastered).length;
+            const learning = flashcards.filter(c => !c.mastered).length;
+            
+            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%'
+                }
+            });
         }
         
-        function exportPlanner() {
-            showNotification('Planner exporté avec succès !', 'success');
+        // ============================================
+        // JOURNAL
+        // ============================================
+        
+        // Définir l'auto-évaluation
+        function setEvaluation(score) {
+            document.querySelectorAll('.quality-indicator .quality-dot').forEach((dot, index) => {
+                dot.classList.toggle('active', index === score - 1);
+            });
         }
         
+        // Sauvegarder une entrée de journal
         function saveJournal() {
+            const entry = {
+                todo: document.getElementById('todo').value,
+                doing: document.getElementById('doing').value,
+                done: document.getElementById('done').value,
+                metacognition: document.getElementById('metacognition').value,
+                timestamp: new Date().toISOString()
+            };
+            
+            journalEntries.push(entry);
+            
+            // Réinitialiser le formulaire
+            document.getElementById('todo').value = '';
+            document.getElementById('doing').value = '';
+            document.getElementById('done').value = '';
+            document.getElementById('metacognition').value = '';
+            setEvaluation(3);
+            
+            // Sauvegarder
+            localStorage.setItem('journalEntries', JSON.stringify(journalEntries));
+            
             showNotification('Journal sauvegardé avec succès !', 'success');
         }
         
-        // Initialiser les flashcards
-        displayFlashcard(currentFlashcardIndex);
+        // Charger les entrées de journal
+        function loadJournalEntries() {
+            const container = document.getElementById('journalEntries');
+            const history = document.getElementById('journalHistory');
+            
+            if (journalEntries.length === 0) {
+                container.innerHTML = '<p>Aucune entrée de journal trouvée.</p>';
+            } else {
+                container.innerHTML = '';
+                journalEntries.slice(-5).reverse().forEach(entry => {
+                    const div = document.createElement('div');
+                    div.className = 'session-card';
+                    div.innerHTML = `
+                        <div class="session-header">
+                            <div class="session-date">
+                                ${new Date(entry.timestamp).toLocaleDateString('fr-FR')}
+                            </div>
+                        </div>
+                        ${entry.done ? `<div style="margin-top: 10px;"><strong>Accompli:</strong> ${entry.done.substring(0, 100)}...</div>` : ''}
+                    `;
+                    container.appendChild(div);
+                });
+            }
+            
+            history.style.display = 'block';
+        }
+        
+        // ============================================
+        // NOTIFICATIONS
+        // ============================================
+        
+        // Obtenir un rappel intelligent
+        function getIntelligentReminder() {
+            const notifications = [
+                {
+                    type: 'motivation',
+                    icon: '🌱',
+                    message: "Rappel: Prenez 5 minutes pour planifier votre session d'étude d'aujourd'hui !"
+                },
+                {
+                    type: 'rappel_court',
+                    icon: '⏰',
+                    message: "Il est temps de réviser vos flashcards ! Une courte session maintenant renforcera votre mémoire."
+                },
+                {
+                    type: 'encouragement',
+                    icon: '💪',
+                    message: "Super travail jusqu'à présent ! Continuez à progresser, chaque petite session compte."
+                },
+                {
+                    type: 'metacognition',
+                    icon: '🤔',
+                    message: "Posez-vous cette question: quelle stratégie d'apprentissage fonctionne le mieux pour vous aujourd'hui ?"
+                }
+            ];
+            
+            const notification = notifications[Math.floor(Math.random() * notifications.length)];
+            const container = document.getElementById('notificationContainer');
+            
+            const card = document.createElement('div');
+            card.className = 'notification-card';
+            card.innerHTML = `
+                <div style="display: flex; align-items: center; gap: 15px; margin-bottom: 10px;">
+                    <div style="font-size: 2rem;">${notification.icon}</div>
+                    <div>
+                        <div style="font-weight: bold; color: #1e293b;">${notification.type.charAt(0).toUpperCase() + notification.type.slice(1).replace('_', ' ')}</div>
+                        <div style="font-size: 0.9rem; color: #64748b;">
+                            Efficacité: ${(Math.random() * 20 + 75).toFixed(1)}%
+                        </div>
+                    </div>
+                </div>
+                <p style="font-size: 1.1rem; line-height: 1.5;">${notification.message}</p>
+                <div style="margin-top: 10px; font-size: 0.8rem; color: #64748b; text-align: right;">
+                    ${new Date().toLocaleTimeString('fr-FR')}
+                </div>
+            `;
+            
+            container.insertBefore(card, container.firstChild);
+            
+            // Limiter à 5 notifications
+            while (container.children.length > 5) {
+                container.removeChild(container.lastChild);
+            }
+        }
+        
+        // Créer le graphique des notifications
+        function createNotificationChart() {
+            const ctx = document.getElementById('notificationChart').getContext('2d');
+            
+            window.notificationChart = new Chart(ctx, {
+                type: 'bar',
+                data: {
+                    labels: ['Motivation', 'Rappels', 'Encouragement', 'Métacognition'],
+                    datasets: [{
+                        label: 'Efficacité (%)',
+                        data: [85, 72, 91, 68],
+                        backgroundColor: [
+                            'rgba(59, 130, 246, 0.7)',
+                            'rgba(16, 185, 129, 0.7)',
+                            'rgba(245, 158, 11, 0.7)',
+                            'rgba(139, 92, 246, 0.7)'
+                        ],
+                        borderColor: [
+                            'rgb(59, 130, 246)',
+                            'rgb(16, 185, 129)',
+                            'rgb(245, 158, 11)',
+                            'rgb(139, 92, 246)'
+                        ],
+                        borderWidth: 2
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    scales: {
+                        y: {
+                            beginAtZero: true,
+                            max: 100,
+                            title: {
+                                display: true,
+                                text: 'Efficacité (%)'
+                            }
+                        }
+                    },
+                    plugins: {
+                        title: {
+                            display: true,
+                            text: 'Performance des Types de Notifications',
+                            font: { size: 16 }
+                        }
+                    }
+                }
+            });
+        }
+        
+        // ============================================
+        // STATISTIQUES
+        // ============================================
+        
+        // Actualiser les statistiques
+        function refreshStats() {
+            // Cette fonction mettrait à jour les statistiques depuis le serveur
+            // Pour l'instant, on utilise des données simulées
+            showNotification('Statistiques actualisées', 'success');
+        }
+        
+        // Générer la heatmap
+        function generateHeatmap() {
+            const container = document.getElementById('heatmapContent');
+            
+            // Générer des données de démonstration
+            const heatmapData = generateDemoHeatmapData(currentHeatmapPeriod);
+            
+            // Créer la structure de la heatmap
+            let html = '<div class="heatmap-grid">';
+            
+            // Ajouter les étiquettes des jours
+            const days = ['Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam', 'Dim'];
+            html += '<div class="heatmap-day-label"></div>';
+            days.forEach(day => {
+                html += `<div class="heatmap-day-label">${day}</div>`;
+            });
+            
+            // Ajouter les cellules de la heatmap
+            heatmapData.forEach((week, weekIndex) => {
+                html += `<div class="heatmap-week-label">S${weekIndex + 1}</div>`;
+                
+                days.forEach((day, dayIndex) => {
+                    const activity = week[dayIndex];
+                    if (activity !== null) {
+                        const intensity = getIntensityLevel(activity);
+                        const tooltip = `Jour: ${day}, Semaine ${weekIndex + 1}\nActivité: ${activity} minutes`;
+                        html += `
+                            <div class="heatmap-cell heatmap-intensity-${intensity}" 
+                                 title="${tooltip}">
+                                ${activity}
+                            </div>
+                        `;
+                    } else {
+                        html += '<div class="heatmap-cell" style="visibility: hidden;"></div>';
+                    }
+                });
+            });
+            
+            html += '</div>';
+            container.innerHTML = html;
+        }
+        
+        // Générer des données de démonstration pour la heatmap
+        function generateDemoHeatmapData(period) {
+            const data = [];
+            let weeks = 4; // Par défaut pour le mois
+            
+            if (period === 'quarter') weeks = 13;
+            if (period === 'year') weeks = 52;
+            
+            // Pattern d'activité typique
+            for (let week = 0; week < weeks; week++) {
+                const weekData = [];
+                for (let day = 0; day < 7; day++) {
+                    // Générer une activité aléatoire avec un pattern spécifique
+                    let activity = 0;
+                    
+                    // Plus d'activit�� jeudi (jour 3) et vendredi (jour 4)
+                    if (day === 3 || day === 4) {
+                        activity = Math.floor(Math.random() * 45) + 30;
+                    } else if (day === 0 || day === 6) {
+                        activity = Math.floor(Math.random() * 30) + 15;
+                    } else {
+                        activity = Math.floor(Math.random() * 30);
+                    }
+                    
+                    // Ajouter une variabilité hebdomadaire
+                    if (week % 4 === 0) {
+                        activity = Math.min(activity * 1.3, 90);
+                    } else if (week % 4 === 2) {
+                        activity = Math.max(activity * 0.7, 10);
+                    }
+                    
+                    activity = Math.round(activity);
+                    weekData.push(activity);
+                }
+                data.push(weekData);
+            }
+            
+            return data;
+        }
+        
+        // Obtenir le niveau d'intensité
+        function getIntensityLevel(activity) {
+            if (activity === 0) return 0;
+            if (activity <= 15) return 1;
+            if (activity <= 30) return 2;
+            if (activity <= 45) return 3;
+            return 4;
+        }
+        
+        // Changer la période de la heatmap
+        function changeHeatmapPeriod(period) {
+            currentHeatmapPeriod = period;
+            
+            // Mettre à jour les boutons
+            document.querySelectorAll('.heatmap-period').forEach(btn => {
+                btn.classList.remove('active');
+                if (btn.textContent.toLowerCase().includes(period)) {
+                    btn.classList.add('active');
+                }
+            });
+            
+            // Regénérer la heatmap
+            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
+        // ============================================
+        
+        // Afficher une notification
+        function showNotification(message, type = 'info') {
+            const colors = {
+                success: '#10b981',
+                error: '#ef4444',
+                warning: '#f59e0b',
+                info: '#3b82f6'
+            };
+            
+            // Créer une notification temporaire
+            const notification = document.createElement('div');
+            notification.style.cssText = `
+                position: fixed;
+                top: 20px;
+                right: 20px;
+                background: white;
+                color: ${colors[type]};
+                padding: 1rem 1.5rem;
+                border-radius: 10px;
+                box-shadow: 0 5px 20px rgba(0,0,0,0.1);
+                border-left: 4px solid ${colors[type]};
+                z-index: 1000;
+                animation: slideIn 0.3s ease;
+            `;
+            
+            notification.innerHTML = `
+                <div style="display: flex; align-items: center; gap: 10px;">
+                    <i class="fas fa-${type === 'success' ? 'check-circle' : type === 'error' ? 'exclamation-circle' : type === 'warning' ? 'exclamation-triangle' : 'info-circle'}"></i>
+                    <div>${message}</div>
+                </div>
+            `;
+            
+            document.body.appendChild(notification);
+            
+            // Supprimer après 3 secondes
+            setTimeout(() => {
+                notification.style.animation = 'slideIn 0.3s ease reverse';
+                setTimeout(() => notification.remove(), 300);
+            }, 3000);
+        }
+        
+        // Charger les données sauvegardées
+        function loadSavedData() {
+            try {
+                // Charger le profil
+                const savedProfile = localStorage.getItem('learnerProfile');
+                if (savedProfile) {
+                    learnerProfile = JSON.parse(savedProfile);
+                    updateProfileProgress();
+                    updateProfileSummary();
+                }
+                
+                // Charger les entrées de journal
+                const savedJournal = localStorage.getItem('journalEntries');
+                if (savedJournal) {
+                    journalEntries = JSON.parse(savedJournal);
+                }
+                
+                // Charger les flashcards
+                const savedFlashcards = localStorage.getItem('flashcards');
+                if (savedFlashcards) {
+                    flashcards = JSON.parse(savedFlashcards);
+                    displayFlashcard(currentFlashcardIndex);
+                    updateFlashcardStats();
+                }
+            } catch (error) {
+                console.error('Erreur lors du chargement des données:', error);
+            }
+        }
+        
+        // Sauvegarder toutes les données
+        function saveAllData() {
+            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');
+            } catch (error) {
+                showNotification('Erreur lors de la sauvegarde', 'error');
+            }
+        }
+        
+        // Sauvegarder automatiquement toutes les 30 secondes
+        setInterval(saveAllData, 30000);
     </script>
 </body>
 </html>