Upload templates/index.html with huggingface_hub

templates/index.html

@@ -887,6 +887,83 @@ button:disabled {
   border-left: 3px solid #1976D2;
 }
 
+/* ================= AUDIO NARRATION STYLES PROFESSIONNELS RÉDUITS ================= */
+.audio-narration-compact {
+  background: #f8f9fa;
+  border-radius: 8px;
+  margin: 8px 0;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 15px;
+  border: 1px solid #e9ecef;
+}
+
+.audio-narration-compact .audio-icon {
+  font-size: 18px;
+  color: #1976D2;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.audio-narration-compact .audio-icon span {
+  font-size: 12px;
+  font-weight: 500;
+  color: #495057;
+}
+
+.audio-narration-compact .audio-controls {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.audio-narration-compact .audio-btn {
+  background: #e9ecef;
+  color: #495057;
+  padding: 4px 10px;
+  font-size: 11px;
+  border-radius: 6px;
+  box-shadow: none;
+  font-weight: 500;
+}
+
+.audio-narration-compact .audio-btn:hover {
+  background: #1976D2;
+  color: white;
+  transform: none;
+}
+
+.audio-narration-compact .audio-progress {
+  width: 120px;
+  height: 3px;
+  background: #dee2e6;
+  border-radius: 3px;
+  overflow: hidden;
+  cursor: pointer;
+}
+
+.audio-narration-compact .audio-progress-fill {
+  height: 100%;
+  background: #1976D2;
+  width: 0%;
+  transition: width 0.1s linear;
+}
+
+.audio-narration-compact .audio-time {
+  font-size: 10px;
+  font-family: monospace;
+  color: #868e96;
+}
+
+.audio-narration-compact .audio-status {
+  font-size: 10px;
+  color: #6c757d;
+  font-style: italic;
+}
+
 /* ================= ONGLET 3: MESSAGE RÉFLEXIF ET ÉVALUATION ================= */
 #tab-evaluation #reflagent {
   background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
@@ -1657,6 +1734,11 @@ textarea:focus {
     font-size: 7px;
     gap: 2px;
   }
+  
+  .audio-narration-compact {
+    flex-wrap: wrap;
+    justify-content: center;
+  }
 }
 </style>
 </head>
@@ -1706,7 +1788,7 @@ Bienvenue sur notre outil d'évaluation qualitative des messages auto-réflexifs
           Cet outil permet d'<strong>évaluer la qualité des messages auto-réflexifs</strong> générés par <strong>ReflAgent</strong>, 
           un tuteur pédagogique personnalisé basé sur l'IA, conçu pour favoriser l'apprentissage auto-régulé (SRL) 
           en renforçant la conscience métacognitive par un accompagnement réflexif.
-          Les messages réflexifs ciblent des dimensions clés, notamment la sensibilisation aux risques d’inactivité et d'échec, le degré d'activité et d''implication, ainsi que la stimulation de l'engagement et de la motivation. 
+          Les messages réflexifs ciblent des dimensions clés, notamment la sensibilisation aux risques d'inactivité et d'échec, le degré d'activité et d'implication, ainsi que la stimulation de l'engagement et de la motivation. 
         </p>
         
         <h4 style="margin-top: 25px;"><span>🤖</span> Qu'est-ce que ReflAgent ?</h4>
@@ -1739,7 +1821,7 @@ Bienvenue sur notre outil d'évaluation qualitative des messages auto-réflexifs
           <div class="feature-title">Dashboard Étudiant</div>
           <div class="feature-description">
             <strong>Visualisation complète du profil d'apprentissage</strong><br>
-            Explorez le manifeste de l'étudiant, ses compétences et son engagement à l’aide d’un radar, ainsi que sa persistance et la gestion de l'effort via une heatmap temporelle intégrant des indicateurs de persévérance.
+            Explorez le manifeste de l'étudiant, ses compétences et son engagement à l'aide d'un radar, ainsi que sa persistance et la gestion de l'effort via une heatmap temporelle intégrant des indicateurs de persévérance.
           </div>
         </div>
         
@@ -1781,7 +1863,7 @@ Bienvenue sur notre outil d'évaluation qualitative des messages auto-réflexifs
             <p>Évaluez la qualité des messages générés par ReflAgent dans l'onglet "Message Réflexif & Évaluation".</p>
           </div>
           <div class="step-item">
-            <strong>Explorer l'exemple d'analyse </strong>
+            <strong>Explorer l'exemple d'analyse</strong>
             <p>Consultez l'onglet "Exemple d'Analyse" pour comprendre la méthodologie d'évaluation.</p>
           </div>
         </div>
@@ -1983,6 +2065,24 @@ Bienvenue sur notre outil d'évaluation qualitative des messages auto-réflexifs
         </div>
       </div>
 
+      <!-- AUDIO NARRATION COMPACTE POUR LE RADAR -->
+      <div class="audio-narration-compact" id="radarAudioContainer">
+        <div class="audio-icon">
+          <span>🎙️</span>
+          <span>Radar</span>
+        </div>
+        <div class="audio-controls">
+          <button class="audio-btn" id="playRadarAudioBtn" onclick="playRadarNarration()">▶️</button>
+          <button class="audio-btn" id="pauseRadarAudioBtn" onclick="pauseRadarNarration()">⏸️</button>
+          <button class="audio-btn" id="stopRadarAudioBtn" onclick="stopRadarNarration()">⏹️</button>
+          <div class="audio-progress" id="radarAudioProgress">
+            <div class="audio-progress-fill" id="radarAudioProgressFill"></div>
+          </div>
+          <span class="audio-time" id="radarAudioTime">00:00</span>
+        </div>
+        <div class="audio-status" id="radarAudioStatus">Prêt</div>
+      </div>
+
       <!-- HEATMAP COMPACTE AVEC TITRES ALIGNÉS -->
       <div class="compact-heatmap-and-indicators">
         <h3>🔥 Heatmap d'activité - Analyse de la persistance et du management de l'effort (persévérance)</h3>
@@ -2086,6 +2186,24 @@ Bienvenue sur notre outil d'évaluation qualitative des messages auto-réflexifs
           </div>
         </div>
       </div>
+
+      <!-- AUDIO NARRATION COMPACTE POUR LA HEATMAP -->
+      <div class="audio-narration-compact" id="heatmapAudioContainer">
+        <div class="audio-icon">
+          <span>🎙️</span>
+          <span>Heatmap</span>
+        </div>
+        <div class="audio-controls">
+          <button class="audio-btn" id="playHeatmapAudioBtn" onclick="playHeatmapNarration()">▶️</button>
+          <button class="audio-btn" id="pauseHeatmapAudioBtn" onclick="pauseHeatmapNarration()">⏸️</button>
+          <button class="audio-btn" id="stopHeatmapAudioBtn" onclick="stopHeatmapNarration()">⏹️</button>
+          <div class="audio-progress" id="heatmapAudioProgress">
+            <div class="audio-progress-fill" id="heatmapAudioProgressFill"></div>
+          </div>
+          <span class="audio-time" id="heatmapAudioTime">00:00</span>
+        </div>
+        <div class="audio-status" id="heatmapAudioStatus">Prêt</div>
+      </div>
     </div>
 
     <!-- ONGLET 4: MESSAGE RÉFLEXIF ET ÉVALUATION -->
@@ -2129,7 +2247,7 @@ Bienvenue sur notre outil d'évaluation qualitative des messages auto-réflexifs
           <!-- Les étoiles seront ajoutées par JavaScript -->
         </div>
         <small style="color: #666; display: block; margin-top: 5px;">
-          Le message auto-réflexif montre un équilibre harmonieux entre les encouragements et et l'indication du niveau de risque de l'apprenant ?
+          Le message auto-réflexif montre un équilibre harmonieux entre les encouragements et l'indication du niveau de risque de l'apprenant ?
         </small>
       </div>
       
@@ -2139,7 +2257,7 @@ Bienvenue sur notre outil d'évaluation qualitative des messages auto-réflexifs
           <!-- Les étoiles seront ajoutées par JavaScript -->
         </div>
         <small style="color: #666; display: block; margin-top: 5px;">
-          Le message auto-réflexif  stimule l'étudiant et le rendre compétitif ?
+          Le message auto-réflexif stimule l'étudiant et le rend compétitif ?
         </small>
       </div>
       
@@ -2305,13 +2423,18 @@ Bienvenue sur notre outil d'évaluation qualitative des messages auto-réflexifs
   </div>
 </div>
 
-<!-- Script principal -->
 <script>
 // ================= VARIABLES =================
 let scenarios = [];
 let currentScenarioIndex = 0;
 let radarMetrics = [];
 
+// Objets Audio pour la narration
+let radarAudio = null;
+let heatmapAudio = null;
+let currentRadarAudioSrc = "";
+let currentHeatmapAudioSrc = "";
+
 // Métriques de radar par défaut (sans abréviations)
 const DEFAULT_RADAR_METRICS = [
   { label: "Démarrage des activités", value: 85 },
@@ -2643,19 +2766,205 @@ const profileMessages = {
   }
 };
 
+// ================= FONCTIONS AUDIO NARRATION =================
+
+// Version CORRECTE pour dossier static/audio/
+function getRadarAudioPath(scenarioId) {
+  return `static/audio/radar_${scenarioId}.mp3`;
+}
+
+// Également pour la heatmap
+function getHeatmapAudioPath(scenarioId) {
+  return `static/audio/heatmap_${scenarioId}.mp3`;
+}
+function initAudioElements() {
+  radarAudio = new Audio();
+  heatmapAudio = new Audio();
+  
+  radarAudio.addEventListener('timeupdate', function() {
+    if (radarAudio.duration) {
+      const percent = (radarAudio.currentTime / radarAudio.duration) * 100;
+      const fill = document.getElementById('radarAudioProgressFill');
+      if (fill) fill.style.width = percent + '%';
+      const timeEl = document.getElementById('radarAudioTime');
+      if (timeEl) {
+        timeEl.textContent = formatTime(radarAudio.currentTime);
+      }
+    }
+  });
+  
+  radarAudio.addEventListener('ended', function() {
+    const statusEl = document.getElementById('radarAudioStatus');
+    if (statusEl) statusEl.textContent = 'Terminé';
+    const fill = document.getElementById('radarAudioProgressFill');
+    if (fill) fill.style.width = '0%';
+  });
+  
+  radarAudio.addEventListener('play', function() {
+    const statusEl = document.getElementById('radarAudioStatus');
+    if (statusEl) statusEl.textContent = 'Lecture...';
+  });
+  
+  radarAudio.addEventListener('pause', function() {
+    const statusEl = document.getElementById('radarAudioStatus');
+    if (statusEl) statusEl.textContent = 'Pause';
+  });
+  
+  heatmapAudio.addEventListener('timeupdate', function() {
+    if (heatmapAudio.duration) {
+      const percent = (heatmapAudio.currentTime / heatmapAudio.duration) * 100;
+      const fill = document.getElementById('heatmapAudioProgressFill');
+      if (fill) fill.style.width = percent + '%';
+      const timeEl = document.getElementById('heatmapAudioTime');
+      if (timeEl) {
+        timeEl.textContent = formatTime(heatmapAudio.currentTime);
+      }
+    }
+  });
+  
+  heatmapAudio.addEventListener('ended', function() {
+    const statusEl = document.getElementById('heatmapAudioStatus');
+    if (statusEl) statusEl.textContent = 'Terminé';
+    const fill = document.getElementById('heatmapAudioProgressFill');
+    if (fill) fill.style.width = '0%';
+  });
+  
+  heatmapAudio.addEventListener('play', function() {
+    const statusEl = document.getElementById('heatmapAudioStatus');
+    if (statusEl) statusEl.textContent = 'Lecture...';
+  });
+  
+  heatmapAudio.addEventListener('pause', function() {
+    const statusEl = document.getElementById('heatmapAudioStatus');
+    if (statusEl) statusEl.textContent = 'Pause';
+  });
+  
+  const radarProgress = document.getElementById('radarAudioProgress');
+  if (radarProgress) {
+    radarProgress.addEventListener('click', function(e) {
+      if (radarAudio.duration) {
+        const rect = this.getBoundingClientRect();
+        const percent = (e.clientX - rect.left) / rect.width;
+        radarAudio.currentTime = percent * radarAudio.duration;
+      }
+    });
+  }
+  
+  const heatmapProgress = document.getElementById('heatmapAudioProgress');
+  if (heatmapProgress) {
+    heatmapProgress.addEventListener('click', function(e) {
+      if (heatmapAudio.duration) {
+        const rect = this.getBoundingClientRect();
+        const percent = (e.clientX - rect.left) / rect.width;
+        heatmapAudio.currentTime = percent * heatmapAudio.duration;
+      }
+    });
+  }
+}
+
+function formatTime(seconds) {
+  if (isNaN(seconds)) return '00:00';
+  const mins = Math.floor(seconds / 60);
+  const secs = Math.floor(seconds % 60);
+  return mins.toString().padStart(2, '0') + ':' + secs.toString().padStart(2, '0');
+}
+
+function loadRadarAudioForScenario(scenarioId) {
+  if (!radarAudio) initAudioElements();
+  const audioPath = getRadarAudioPath(scenarioId);
+  currentRadarAudioSrc = audioPath;
+  radarAudio.src = audioPath;
+  radarAudio.load();
+  const statusEl = document.getElementById('radarAudioStatus');
+  if (statusEl) statusEl.textContent = 'Prêt';
+  const timeEl = document.getElementById('radarAudioTime');
+  if (timeEl) timeEl.textContent = '00:00';
+  const fill = document.getElementById('radarAudioProgressFill');
+  if (fill) fill.style.width = '0%';
+}
+
+function loadHeatmapAudioForScenario(scenarioId) {
+  if (!heatmapAudio) initAudioElements();
+  const audioPath = getHeatmapAudioPath(scenarioId);
+  currentHeatmapAudioSrc = audioPath;
+  heatmapAudio.src = audioPath;
+  heatmapAudio.load();
+  const statusEl = document.getElementById('heatmapAudioStatus');
+  if (statusEl) statusEl.textContent = 'Prêt';
+  const timeEl = document.getElementById('heatmapAudioTime');
+  if (timeEl) timeEl.textContent = '00:00';
+  const fill = document.getElementById('heatmapAudioProgressFill');
+  if (fill) fill.style.width = '0%';
+}
+
+function playRadarNarration() {
+  if (radarAudio && radarAudio.src) {
+    radarAudio.play().catch(e => {
+      console.warn('Impossible de lire le fichier audio radar:', e);
+      const statusEl = document.getElementById('radarAudioStatus');
+      if (statusEl) statusEl.textContent = 'Fichier non trouvé';
+    });
+  } else {
+    const statusEl = document.getElementById('radarAudioStatus');
+    if (statusEl) statusEl.textContent = 'Aucun fichier';
+  }
+}
+
+function pauseRadarNarration() {
+  if (radarAudio) radarAudio.pause();
+}
+
+function stopRadarNarration() {
+  if (radarAudio) {
+    radarAudio.pause();
+    radarAudio.currentTime = 0;
+    const fill = document.getElementById('radarAudioProgressFill');
+    if (fill) fill.style.width = '0%';
+    const statusEl = document.getElementById('radarAudioStatus');
+    if (statusEl) statusEl.textContent = 'Arrêté';
+  }
+}
+
+function playHeatmapNarration() {
+  if (heatmapAudio && heatmapAudio.src) {
+    heatmapAudio.play().catch(e => {
+      console.warn('Impossible de lire le fichier audio heatmap:', e);
+      const statusEl = document.getElementById('heatmapAudioStatus');
+      if (statusEl) statusEl.textContent = 'Fichier non trouvé';
+    });
+  } else {
+    const statusEl = document.getElementById('heatmapAudioStatus');
+    if (statusEl) statusEl.textContent = 'Aucun fichier';
+  }
+}
+
+function pauseHeatmapNarration() {
+  if (heatmapAudio) heatmapAudio.pause();
+}
+
+function stopHeatmapNarration() {
+  if (heatmapAudio) {
+    heatmapAudio.pause();
+    heatmapAudio.currentTime = 0;
+    const fill = document.getElementById('heatmapAudioProgressFill');
+    if (fill) fill.style.width = '0%';
+    const statusEl = document.getElementById('heatmapAudioStatus');
+    if (statusEl) statusEl.textContent = 'Arrêté';
+  }
+}
+
 // ================= INIT =================
 document.addEventListener("DOMContentLoaded", () => {
   console.log("✅ DOM chargé, initialisation...");
+  initAudioElements();
   loadScenarios();
   initTrustStars();
   initTrustSave();
   initTabs();
   initGDPR();
   
-  // Initialiser la barre de confiance à 0%
   updateTrustBar();
   
-  // Ajouter les écouteurs d'événements pour la navigation
   document.getElementById("prevScenario").onclick = () => loadScenario(currentScenarioIndex - 1);
   document.getElementById("nextScenario").onclick = () => loadScenario(currentScenarioIndex + 1);
   document.getElementById("crossReadersBtn").onclick = navigateToCrossReading;
@@ -2666,16 +2975,13 @@ function initTabs() {
   const tabBtns = document.querySelectorAll('.tab-btn');
   const tabContents = document.querySelectorAll('.tab-content');
   
-  // Par défaut, le premier onglet (Accueil) est actif
   tabBtns.forEach(btn => {
     btn.addEventListener('click', () => {
       const tabId = btn.getAttribute('data-tab');
       
-      // Retirer la classe active de tous les boutons et contenus
       tabBtns.forEach(b => b.classList.remove('active'));
       tabContents.forEach(c => c.classList.remove('active'));
       
-      // Ajouter la classe active au bouton et au contenu correspondant
       btn.classList.add('active');
       document.getElementById(tabId).classList.add('active');
     });
@@ -2689,25 +2995,20 @@ function initGDPR() {
   const evaluatorFields = document.getElementById('evaluatorFields');
   const anonymousMessage = document.getElementById('anonymousMessage');
   
-  // Activer/désactiver les champs selon le choix GDPR
   function updateGDPRFields() {
     if (gdprAccept.checked) {
-      // Afficher les champs et les activer
       evaluatorFields.style.display = 'block';
       anonymousMessage.style.display = 'none';
       
-      // Activer les champs
       document.getElementById('evaluatorName').disabled = false;
       document.getElementById('evaluatorEmail').disabled = false;
       document.getElementById('evaluatorRole').disabled = false;
       document.getElementById('expertiseLevel').disabled = false;
       document.getElementById('messageMastery').disabled = false;
     } else if (gdprDecline.checked) {
-      // Cacher les champs et afficher le message anonyme
       evaluatorFields.style.display = 'none';
       anonymousMessage.style.display = 'block';
       
-      // Désactiver et vider les champs
       document.getElementById('evaluatorName').disabled = true;
       document.getElementById('evaluatorName').value = '';
       document.getElementById('evaluatorEmail').disabled = true;
@@ -2721,12 +3022,10 @@ function initGDPR() {
     }
   }
   
-  // Écouter les changements
   if (gdprAccept && gdprDecline) {
     gdprAccept.addEventListener('change', updateGDPRFields);
     gdprDecline.addEventListener('change', updateGDPRFields);
     
-    // Initialiser
     updateGDPRFields();
   }
 }
@@ -2734,7 +3033,6 @@ function initGDPR() {
 // ================= CHARGEMENT JSON =================
 function loadScenarios() {
   console.log("Chargement des scénarios...");
-  // Tentative de chargement depuis différents chemins
   const possiblePaths = [
     "/static/scenarios.json",
     "scenarios.json",
@@ -2788,31 +3086,21 @@ function loadScenarios() {
   tryLoad(0);
 }
 
-// Générer les scénarios par défaut
 function generateDefaultScenarios() {
   console.log("Génération des 16 scénarios par défaut");
   
   const defaultScenarios = [...DEFAULT_SCENARIOS];
   
-  // Ajouter des données complètes à chaque scénario
   defaultScenarios.forEach((scenario, index) => {
-    // Compétences aléatoires
     scenario.competences = generateRandomCompetences(14);
-    
-    // Données radar spécifiques au profil
     scenario.radar = generateProfileRadarData(scenario.title);
-    
-    // Message ReflAgent spécifique
     scenario.reflAgent = generateReflAgentMessage(scenario.title);
-    
-    // Niveau de risque selon le profil
     scenario.risk = calculateRiskLevel(scenario.title);
   });
   
   return defaultScenarios;
 }
 
-// Générer des compétences aléatoires
 function generateRandomCompetences(count) {
   const competenceLabels = [
     "Analyse de texte", "Rédaction académique", "Recherche documentaire", 
@@ -2825,7 +3113,6 @@ function generateRandomCompetences(count) {
   const competences = [];
   for (let i = 0; i < count; i++) {
     const labelIndex = i % competenceLabels.length;
-    // Valeur aléatoire entre 30 et 95 selon l'index
     const value = 30 + Math.floor(Math.random() * 65);
     competences.push({
       label: competenceLabels[labelIndex],
@@ -2836,7 +3123,6 @@ function generateRandomCompetences(count) {
   return competences;
 }
 
-// Générer des données radar selon le profil
 function generateProfileRadarData(profileTitle) {
   let baseValues;
   
@@ -2893,14 +3179,12 @@ function generateProfileRadarData(profileTitle) {
       baseValues = [70, 65, 62, 50, 65, 70, 68];
   }
   
-  // Ajouter une légère variation
   return DEFAULT_RADAR_METRICS.map((metric, index) => ({
     label: metric.label,
     value: Math.max(10, Math.min(100, baseValues[index] + (Math.random() * 10 - 5)))
   }));
 }
 
-// Générer un message ReflAgent selon le profil
 function generateReflAgentMessage(profileTitle) {
   const messages = {
     "Étudiant engagé": "Félicitations ! Ton engagement est remarquable. Continue sur cette lancée en maintenant ta régularité de travail.",
@@ -2924,7 +3208,6 @@ function generateReflAgentMessage(profileTitle) {
   return messages[profileTitle] || "Analyse de votre profil d'apprentissage en cours...";
 }
 
-// Calculer le niveau de risque selon le profil
 function calculateRiskLevel(profileTitle) {
   const riskLevels = {
     "Étudiant engagé": 20,
@@ -2958,10 +3241,8 @@ function showError(message) {
       </div>`;
   }
   
-  // Afficher un message dans la console et éventuellement une alerte
   console.error(message);
   
-  // Désactiver la navigation
   document.getElementById("prevScenario").disabled = true;
   document.getElementById("nextScenario").disabled = true;
 }
@@ -2982,13 +3263,11 @@ function loadScenario(index) {
   currentScenarioIndex = index;
   const s = scenarios[index];
 
-  // Mettre à jour le titre
   const titleElement = document.getElementById("scenarioTitle");
   if (titleElement) {
     titleElement.textContent = `Scénario ${s.id} – ${s.title}`;
   }
 
-  // Mettre à jour le manifeste
   const manifestList = document.getElementById("manifest-list");
   if (manifestList) {
     manifestList.innerHTML = `
@@ -2999,20 +3278,15 @@ function loadScenario(index) {
       </div>`;
   }
 
-  // Mettre à jour les compétences compactes
   if (s.competences) {
     updateCompactCompetences(s.competences);
   }
 
-  // Mettre à jour le radar avec les nouvelles métriques
   if (s.radar && s.radar.length > 0) {
-    // Filtrer pour enlever "Engagement global" si présent (au cas où)
     radarMetrics = s.radar.filter(metric => metric.label !== "Engagement global");
   } else {
-    // Utiliser les métriques par défaut avec variation pour chaque scénario
     radarMetrics = DEFAULT_RADAR_METRICS.map(metric => {
-      // Variation de ±15% selon l'index du scénario pour rendre les données plus réalistes
-      const variation = (index % 7) * 5 - 15; // -15 à +15
+      const variation = (index % 7) * 5 - 15;
       const newValue = Math.max(10, Math.min(95, metric.value + variation));
       return {
         label: metric.label,
@@ -3021,47 +3295,34 @@ function loadScenario(index) {
     });
   }
   
-  // Mettre à jour la grille des métriques radar compacte
   updateCompactRadarMetricsGrid();
-  
-  // Mettre à jour le graphique radar
   drawRadar();
-  
-  // Mettre à jour le message bot radar compact
   updateCompactRadarBotMessage(s);
-
-  // Mettre à jour la heatmap enrichie compacte avec les axes
   drawCompactEnrichedHeatmapWithAxes(s);
   
-  // FORCER LE MODE "VUE COMBINÉE" PAR DÉFAUT
   const modeSelect = document.getElementById("persistenceMode");
   if (modeSelect) {
     modeSelect.value = "combined";
     updatePersistenceIndicators("combined");
   }
   
-  // Mettre à jour la persévérance spécifique au profil
   updatePerseveranceProfile(s.title);
 
-  // Mettre à jour le message ReflAgent
   const reflagentElement = document.getElementById("reflagent");
   if (reflagentElement) {
     reflagentElement.textContent = s.reflAgent || "Message d'analyse non disponible pour ce scénario.";
   }
 
-  // Mettre à jour les boutons de navigation
   updateNavButtons();
-  
-  // Mettre à jour les statistiques
   updateStats(s);
-  
-  // Réinitialiser l'évaluation de confiance
   resetTrustEvaluation();
+  
+  loadRadarAudioForScenario(s.id);
+  loadHeatmapAudioForScenario(s.id);
 }
 
 // ================= FONCTIONS POUR LA VERSION COMPACTE =================
 
-// Mettre à jour les compétences compactes
 function updateCompactCompetences(competences) {
   const container = document.getElementById("compact-competences");
   if (!container) return;
@@ -3073,16 +3334,13 @@ function updateCompactCompetences(competences) {
     return;
   }
   
-  // Créer un conteneur de grille
   const gridContainer = document.createElement('div');
   gridContainer.className = 'compact-competences-grid';
   
-  // Limiter à 14 compétences pour la matrice 3x4 (avec 2 cases vides)
   const maxCompetences = 14;
   const displayedCompetences = competences.slice(0, maxCompetences);
   
   displayedCompetences.forEach(comp => {
-    // Déterminer la couleur selon la valeur
     let color, colorClass;
     if (comp.value < 50) {
       color = '#E53935';
@@ -3095,7 +3353,6 @@ function updateCompactCompetences(competences) {
       colorClass = 'high';
     }
     
-    // Créer l'élément de compétence matricielle
     const compItem = document.createElement('div');
     compItem.className = 'compact-competence-matrix-item';
     compItem.innerHTML = `
@@ -3118,7 +3375,6 @@ function updateCompactCompetences(competences) {
     gridContainer.appendChild(compItem);
   });
   
-  // Si nous avons moins de 14 compétences, ajouter des cases vides pour compléter la matrice
   const emptySlots = maxCompetences - displayedCompetences.length;
   for (let i = 0; i < emptySlots; i++) {
     const emptyItem = document.createElement('div');
@@ -3146,7 +3402,6 @@ function updateCompactCompetences(competences) {
   container.appendChild(gridContainer);
 }
 
-// Mettre à jour la grille des métriques radar compacte
 function updateCompactRadarMetricsGrid() {
   const grid = document.getElementById("compact-radar-metrics-grid");
   if (!grid) return;
@@ -3159,14 +3414,11 @@ function updateCompactRadarMetricsGrid() {
   }
   
   radarMetrics.forEach(metric => {
-    // Déterminer la classe de couleur selon la valeur
     let colorClass = "";
-
     if (metric.value >= 70) colorClass = "high";
     else if (metric.value >= 40) colorClass = "medium";
     else colorClass = "low";
     
-    // Déterminer l'icône selon le type de métrique
     let icon = "📊";
     if (metric.label.includes("Démarrage")) icon = "🚀";
     else if (metric.label.includes("Éléments des connaissances validées")) icon = "🎓";
@@ -3176,7 +3428,6 @@ function updateCompactRadarMetricsGrid() {
     else if (metric.label.includes("Interactions")) icon = "📚";
     else if (metric.label.includes("Score")) icon = "🔧";
     
-    // Déterminer la description
     let description = "";
     if (metric.label.includes("Démarrage")) description = "Rapidité d'initiation de l'activité d'apprentissage";
     else if (metric.label.includes("Éléments des connaissances validées")) description = "Taux de validation des skills";
@@ -3199,14 +3450,12 @@ function updateCompactRadarMetricsGrid() {
   });
 }
 
-// Mettre à jour le message bot radar compact
 function updateCompactRadarBotMessage(scenario) {
   const radarBotContent = document.getElementById("compact-radar-bot-content");
   const radarBotInsights = document.getElementById("compact-radar-bot-insights");
   
   if (!radarBotContent || !radarBotInsights) return;
   
-  // Récupérer le message pour le profil ou utiliser un message par défaut
   const profileMessage = profileMessages[scenario.title] || {
     title: "Profil d'Apprentissage",
     message: "Analyse de votre profil d'apprentissage en cours...",
@@ -3217,10 +3466,8 @@ function updateCompactRadarBotMessage(scenario) {
     ]
   };
   
-  // Mettre à jour l'interface
   radarBotContent.innerHTML = `<strong>${profileMessage.title}</strong><br>${profileMessage.message}`;
   
-  // Mettre à jour les insights
   radarBotInsights.innerHTML = '';
   profileMessage.insights.forEach(insight => {
     const insightElement = document.createElement('div');
@@ -3233,7 +3480,6 @@ function updateCompactRadarBotMessage(scenario) {
   });
 }
 
-// Dessiner la heatmap enrichie compacte avec axes
 function drawCompactEnrichedHeatmapWithAxes(scenario) {
   const canvas = document.getElementById("heatmap");
   if (!canvas) return;
@@ -3245,98 +3491,28 @@ function drawCompactEnrichedHeatmapWithAxes(scenario) {
   const weeks = 4;
   const totalDays = weeks * 7;
   
-  // Effacer le canvas
   ctx.clearRect(0, 0, canvas.width, canvas.height);
   
-  // Titre enrichi
   const scenarioTitles = {
-    1: { 
-      title: "Engagé mais désorganisé", 
-      emoji: "😅",
-      pattern: "Effort concentré avant échéances"
-    },
-    2: { 
-      title: "Actif mais peu efficace", 
-      emoji: "😰",
-      pattern: "Démarrage lent, accélération tardive"
-    },
-    3: { 
-      title: "Autonome et stratégique", 
-      emoji: "😊",
-      pattern: "Travail régulier et équilibré"
-    },
-    4: { 
-      title: "Motivé et constant", 
-      emoji: "👍",
-      pattern: "Rythme régulier toute la semaine"
-    },
-    5: { 
-      title: "Surinvestissement", 
-      emoji: "🔥",
-      pattern: "Activité intense, risque de surcharge"
-    },
-    6: { 
-      title: "Stratégique et ciblé", 
-      emoji: "🎯",
-      pattern: "Efforts concentrés sur les priorités"
-    },
-    7: { 
-      title: "Amélioration continue", 
-      emoji: "📈",
-      pattern: "Progression visible semaine après semaine"
-    },
-    8: { 
-      title: "Difficultés persistantes", 
-      emoji: "😔",
-      pattern: "Efforts dispersés, peu de régularité"
-    },
-    9: { 
-      title: "Évitement", 
-      emoji: "😨",
-      pattern: "Activité minimale, pics sporadiques"
-    },
-    10: { 
-      title: "Risque d'abandon", 
-      emoji: "⚠️",
-      pattern: "Très faible activité, irrégularité totale"
-    },
-    11: { 
-      title: "Progression technique", 
-      emoji: "🔧",
-      pattern: "Amélioration régulière des compétences"
-    },
-    12: { 
-      title: "Résilience", 
-      emoji: "💪",
-      pattern: "Persévérance malgré les difficultés"
-    },
-    13: { 
-      title: "Inactivité", 
-      emoji: "😴",
-      pattern: "Très peu d'activité détectée"
-    },
-    14: { 
-      title: "Désengagement", 
-      emoji: "😑",
-      pattern: "Activité sporadique et décroissante"
-    },
-    15: { 
-      title: "Persévérant malgré le doute", 
-      emoji: "🌱",
-      pattern: "Accélération progressive en fin de semaine"
-    },
-    16: { 
-      title: "Actif mais à risque d'épuisement", 
-      emoji: "⚡",
-      pattern: "Forte activité en début de semaine"
-    }
+    1: { title: "Engagé mais désorganisé", emoji: "😅", pattern: "Effort concentré avant échéances" },
+    2: { title: "Actif mais peu efficace", emoji: "😰", pattern: "Démarrage lent, accélération tardive" },
+    3: { title: "Autonome et stratégique", emoji: "😊", pattern: "Travail régulier et équilibré" },
+    4: { title: "Motivé et constant", emoji: "👍", pattern: "Rythme régulier toute la semaine" },
+    5: { title: "Surinvestissement", emoji: "🔥", pattern: "Activité intense, risque de surcharge" },
+    6: { title: "Stratégique et ciblé", emoji: "🎯", pattern: "Efforts concentrés sur les priorités" },
+    7: { title: "Amélioration continue", emoji: "📈", pattern: "Progression visible semaine après semaine" },
+    8: { title: "Difficultés persistantes", emoji: "😔", pattern: "Efforts dispersés, peu de régularité" },
+    9: { title: "Évitement", emoji: "😨", pattern: "Activité minimale, pics sporadiques" },
+    10: { title: "Risque d'abandon", emoji: "⚠️", pattern: "Très faible activité, irrégularité totale" },
+    11: { title: "Progression technique", emoji: "🔧", pattern: "Amélioration régulière des compétences" },
+    12: { title: "Résilience", emoji: "💪", pattern: "Persévérance malgré les difficultés" },
+    13: { title: "Inactivité", emoji: "😴", pattern: "Très peu d'activité détectée" },
+    14: { title: "Désengagement", emoji: "😑", pattern: "Activité sporadique et décroissante" },
+    15: { title: "Persévérant malgré le doute", emoji: "🌱", pattern: "Accélération progressive en fin de semaine" },
+    16: { title: "Actif mais à risque d'épuisement", emoji: "⚡", pattern: "Forte activité en début de semaine" }
   };
   
-  const scenarioInfo = scenarioTitles[scenario.id] || { 
-    title: "Votre activité", 
-    emoji: "📊",
-    pattern: "Schéma à analyser"
-  };
+  const scenarioInfo = scenarioTitles[scenario.id] || { title: "Votre activité", emoji: "📊", pattern: "Schéma à analyser" };
   
   ctx.font = "bold 14px Arial";
   ctx.fillStyle = "#1976D2";
@@ -3347,17 +3523,13 @@ function drawCompactEnrichedHeatmapWithAxes(scenario) {
   ctx.fillStyle = "#666";
   ctx.fillText(`${scenarioInfo.pattern}`, canvas.width / 2, 45);
   
-  // Générer les données d'activité selon le scénario
   const activityData = generateCompactPersistenceData(scenario.id, totalDays);
   
-  // Dessiner la heatmap avec axes
   const colors = ["#EBEDF0", "#C6E48B", "#7BC96F", "#239A3B", "#196127"];
   
-  // Position de départ de la grille
   const startX = 60;
   const startY = 80;
   
-  // Ajouter les labels des jours (à gauche)
   ctx.font = "11px Arial";
   ctx.fillStyle = "#555";
   ctx.textAlign = "right";
@@ -3368,7 +3540,6 @@ function drawCompactEnrichedHeatmapWithAxes(scenario) {
     ctx.fillText(days[weekday], startX - 10, y);
   }
   
-  // Ajouter les numéros des semaines (en haut)
   ctx.font = "11px Arial";
   ctx.fillStyle = "#555";
   ctx.textAlign = "center";
@@ -3379,22 +3550,17 @@ function drawCompactEnrichedHeatmapWithAxes(scenario) {
     ctx.fillText(`S${week + 1}`, x, startY - 5);
   }
   
-  // Ajouter un titre pour les axes
   ctx.font = "10px Arial";
   ctx.fillStyle = "#777";
   ctx.textAlign = "center";
-  
-  // Titre pour les semaines
   ctx.fillText("Semaines", canvas.width / 2, startY - 15);
   
-  // Titre pour les jours
   ctx.save();
   ctx.translate(startX - 25, startY + (cellSize * 7) / 2);
   ctx.rotate(-Math.PI / 2);
   ctx.fillText("Jours", 0, 0);
   ctx.restore();
   
-  // Dessiner les cellules
   for (let day = 0; day < totalDays; day++) {
     const week = Math.floor(day / 7);
     const weekday = day % 7;
@@ -3404,12 +3570,10 @@ function drawCompactEnrichedHeatmapWithAxes(scenario) {
     
     const intensity = activityData[day];
     
-    // Dessiner la cellule
     ctx.fillStyle = colors[intensity];
     ctx.fillRect(x, y, cellSize, cellSize);
     
-    // Bordure avec indication des échéances (vendredi = jour important)
-    if (weekday === 4) { // Vendredi
+    if (weekday === 4) {
       ctx.strokeStyle = "#FF6B6B";
       ctx.lineWidth = 1.5;
     } else {
@@ -3419,17 +3583,13 @@ function drawCompactEnrichedHeatmapWithAxes(scenario) {
     ctx.strokeRect(x, y, cellSize, cellSize);
   }
   
-  // Analyser et afficher les métriques de persévérance compactes
   analyzeCompactPersistenceMetrics(activityData, scenario.id);
   
-  // Mettre à jour les indicateurs selon le mode sélectionné
   const currentMode = document.getElementById("persistenceMode").value;
   updatePersistenceIndicators(currentMode);
 }
 
-// Mettre à jour les indicateurs selon le mode d'analyse
 function updatePersistenceIndicators(mode) {
-  // Récupérer les éléments
   const regularityIndicator = document.getElementById("regularity-indicator");
   const regularityDesc = document.getElementById("regularity-description");
   const deadlineIndicator = document.getElementById("deadline-indicator");
@@ -3437,14 +3597,10 @@ function updatePersistenceIndicators(mode) {
   const effortIndicator = document.getElementById("effort-indicator");
   const effortDesc = document.getElementById("effort-description");
   
-  const regularityScore = document.getElementById("compact-regularityScore");
-  const deadlineScore = document.getElementById("compact-deadlineScore");
-  const effortPattern = document.getElementById("compact-effortPattern");
   const regularityText = document.getElementById("compact-regularityText");
   
   if (!regularityIndicator || !deadlineIndicator || !effortIndicator) return;
   
-  // Réinitialiser l'affichage (tout masquer par défaut)
   regularityIndicator.style.display = "none";
   regularityDesc.style.display = "none";
   deadlineIndicator.style.display = "none";
@@ -3459,10 +3615,8 @@ function updatePersistenceIndicators(mode) {
   
   switch(mode) {
     case "regularity":
-      // Afficher seulement la régularité
       regularityIndicator.style.display = "flex";
       regularityDesc.style.display = "block";
-      
       if (regularityText) {
         regularityText.innerHTML = `
           <div style="font-size: 12px; color: #555; line-height: 1.4;">
@@ -3472,12 +3626,9 @@ function updatePersistenceIndicators(mode) {
         `;
       }
       break;
-      
     case "deadline":
-      // Afficher seulement la gestion des échéances
       deadlineIndicator.style.display = "flex";
       deadlineDesc.style.display = "block";
-      
       if (regularityText) {
         regularityText.innerHTML = `
           <div style="font-size: 12px; color: #555; line-height: 1.4;">
@@ -3487,12 +3638,9 @@ function updatePersistenceIndicators(mode) {
         `;
       }
       break;
-      
     case "effortPattern":
-      // Afficher seulement le schéma d'effort
       effortIndicator.style.display = "flex";
       effortDesc.style.display = "block";
-      
       if (regularityText) {
         regularityText.innerHTML = `
           <div style="font-size: 12px; color: #555; line-height: 1.4;">
@@ -3502,16 +3650,13 @@ function updatePersistenceIndicators(mode) {
         `;
       }
       break;
-      
     case "combined":
-      // Afficher tous les indicateurs
       regularityIndicator.style.display = "flex";
       regularityDesc.style.display = "block";
       deadlineIndicator.style.display = "flex";
       deadlineDesc.style.display = "block";
       effortIndicator.style.display = "flex";
       effortDesc.style.display = "block";
-      
       if (regularityText) {
         regularityText.innerHTML = `
           <div style="font-size: 12px; color: #555; line-height: 1.4;">
@@ -3521,9 +3666,7 @@ function updatePersistenceIndicators(mode) {
         `;
       }
       break;
-      
     default:
-      // Par défaut, tout afficher
       regularityIndicator.style.display = "flex";
       regularityDesc.style.display = "block";
       deadlineIndicator.style.display = "flex";
@@ -3533,15 +3676,15 @@ function updatePersistenceIndicators(mode) {
   }
 }
 
-// Mettre à jour la persévérance spécifique au profil
 function updatePerseveranceProfile(scenarioTitle) {
   const profile = perseveranceProfiles[scenarioTitle];
   
+  const regularityScore = document.getElementById("compact-regularityScore");
+  const deadlineScore = document.getElementById("compact-deadlineScore");
+  const effortPattern = document.getElementById("compact-effortPattern");
+  const regularityText = document.getElementById("compact-regularityText");
+  
   if (!profile) {
-    console.warn(`Aucun profil de persévérance trouvé pour: ${scenarioTitle}`);
-    
-    // Valeurs par défaut
-    const regularityText = document.getElementById("compact-regularityText");
     if (regularityText) {
       regularityText.innerHTML = `
         <div style="font-size: 12px; color: #555; line-height: 1.4;">
@@ -3552,12 +3695,6 @@ function updatePerseveranceProfile(scenarioTitle) {
     return;
   }
   
-  // Mettre à jour l'interface avec les valeurs spécifiques
-  const regularityScore = document.getElementById("compact-regularityScore");
-  const deadlineScore = document.getElementById("compact-deadlineScore");
-  const effortPattern = document.getElementById("compact-effortPattern");
-  const regularityText = document.getElementById("compact-regularityText");
-  
   if (regularityScore) {
     regularityScore.textContent = profile.regularity + "%";
     regularityScore.style.color = profile.color;
@@ -3586,11 +3723,9 @@ function updatePerseveranceProfile(scenarioTitle) {
   }
 }
 
-// Générer des données de persévérance compactes
 function generateCompactPersistenceData(scenarioId, totalDays) {
   const data = new Array(totalDays).fill(0);
   
-  // Utiliser les valeurs du profil pour générer des données cohérentes
   const profile = Object.values(perseveranceProfiles)[scenarioId - 1] || perseveranceProfiles["Étudiant engagé"];
   
   for (let i = 0; i < totalDays; i++) {
@@ -3598,7 +3733,6 @@ function generateCompactPersistenceData(scenarioId, totalDays) {
     const week = Math.floor(i / 7);
     const progress = i / totalDays;
     
-    // Adapter les données selon le schéma d'effort du profil
     if (profile.effortPattern.includes("Pic d'activité jeudi/vendredi")) {
       if (weekday === 3 || weekday === 4) {
         data[i] = 4;
@@ -3622,7 +3756,6 @@ function generateCompactPersistenceData(scenarioId, totalDays) {
         data[i] = Math.random() > 0.8 ? 1 : 0;
       }
     } else {
-      // Régulier
       if (weekday === 5 || weekday === 6) {
         data[i] = 2;
       } else {
@@ -3634,10 +3767,8 @@ function generateCompactPersistenceData(scenarioId, totalDays) {
   return data;
 }
 
-// Analyser les métriques de persévérance compactes
 function analyzeCompactPersistenceMetrics(activityData, scenarioId) {
-  // Cette fonction est maintenant remplacée par les valeurs prédéfinies dans updatePerseveranceProfile
-  // On ne fait rien ici pour éviter d'écraser les valeurs
+  // Fonction conservée pour compatibilité
 }
 
 // ================= RADAR =================
@@ -3656,7 +3787,6 @@ function drawRadar() {
 
   ctx.clearRect(0, 0, canvas.width, canvas.height);
 
-  // Dessiner les cercles concentriques avec pourcentages
   for (let i = 1; i <= 5; i++) {
     ctx.beginPath();
     ctx.arc(cx, cy, (radius / 5) * i, 0, 2 * Math.PI);
@@ -3675,7 +3805,6 @@ function drawRadar() {
     }
   }
 
-  // Dessiner les axes
   radarMetrics.forEach((m, i) => {
     const angle = (2 * Math.PI * i) / n - Math.PI / 2;
 
@@ -3700,7 +3829,6 @@ function drawRadar() {
     ctx.fillText(label, tx, ty);
   });
 
-  // Dessiner le polygone
   ctx.beginPath();
   radarMetrics.forEach((m, i) => {
     const angle = (2 * Math.PI * i) / n - Math.PI / 2;
@@ -3717,7 +3845,6 @@ function drawRadar() {
   ctx.lineWidth = 2;
   ctx.stroke();
 
-  // Dessiner les points avec les pourcentages
   radarMetrics.forEach((m, i) => {
     const angle = (2 * Math.PI * i) / n - Math.PI / 2;
     const r = radius * (m.value / 100);
@@ -4262,18 +4389,22 @@ function changePersistenceAnalysis() {
   updatePersistenceIndicators(mode);
 }
 
-// Exposer les fonctions globales
 window.changePersistenceAnalysis = changePersistenceAnalysis;
 window.updateStats = updateStats;
 window.showNotification = showNotification;
 window.fillSampleEvaluator = fillSampleEvaluator;
 window.clearEvaluatorFields = clearEvaluatorFields;
 window.loadScenario = loadScenario;
+window.playRadarNarration = playRadarNarration;
+window.pauseRadarNarration = pauseRadarNarration;
+window.stopRadarNarration = stopRadarNarration;
+window.playHeatmapNarration = playHeatmapNarration;
+window.pauseHeatmapNarration = pauseHeatmapNarration;
+window.stopHeatmapNarration = stopHeatmapNarration;
 </script>
 
-</div> <!-- Fin de la div principale #reflection -->
+</div>
 
-<!-- PIED DE PAGE -->
 <div style="
     margin-top: 40px;
     padding: 20px;