Upload templates/index.html with huggingface_hub

templates/index.html

@@ -13,6 +13,7 @@ body {
   margin: 0;
   padding: 20px;
   color: #333;
+  min-height: 100vh;
 }
 
 h2, h3, h4 { 
@@ -70,6 +71,7 @@ h3::before {
   padding: 5px;
   margin-bottom: 20px;
   border: 1px solid #e0e0e0;
+  flex-wrap: wrap;
 }
 
 .tab-btn {
@@ -87,6 +89,7 @@ h3::before {
   align-items: center;
   justify-content: center;
   gap: 10px;
+  min-width: 200px;
 }
 
 .tab-btn:hover {
@@ -119,6 +122,7 @@ h3::before {
   padding: 15px 25px;
   border-radius: 12px;
   border: 1px solid #bbdefb;
+  flex-wrap: wrap;
 }
 
 #scenarioTitle {
@@ -127,6 +131,7 @@ h3::before {
   text-align: center;
   flex-grow: 1;
   margin: 0 20px;
+  word-break: break-word;
 }
 
 button {
@@ -143,6 +148,7 @@ button {
   display: flex;
   align-items: center;
   gap: 8px;
+  white-space: nowrap;
 }
 
 button:hover:not(:disabled) {
@@ -160,41 +166,6 @@ button:disabled {
   background: #b0bec5;
 }
 
-/* ================= BOUTON LECTURE CROISÉE ================= */
-#crossReadersBtn {
-  background: linear-gradient(135deg, #43A047, #4CAF50) !important;
-  color: white;
-  border: none;
-  padding: 12px 25px;
-  border-radius: 10px;
-  cursor: pointer;
-  font-weight: 600;
-  font-size: 15px;
-  transition: all 0.3s ease;
-  box-shadow: 0 3px 8px rgba(67, 160, 71, 0.2);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  width: 100%;
-}
-
-#crossReadersBtn:hover:not(:disabled) {
-  transform: translateY(-2px);
-  box-shadow: 0 5px 15px rgba(67, 160, 71, 0.3);
-  background: linear-gradient(135deg, #388E3C, #43A047) !important;
-}
-
-#crossReadersBtn:active:not(:disabled) {
-  transform: translateY(0);
-}
-
-#crossReadersBtn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-  background: #b0bec5 !important;
-}
-
 /* ================= ONGLET 1: ÉVALUATEUR GDPR ================= */
 #tab-evaluator .evaluator-info {
   background: linear-gradient(135deg, #fff3e0, #ffe0b2);
@@ -792,6 +763,16 @@ textarea:focus {
 }
 
 /* ================= BARRE DE CONFIANCE ================= */
+.progress-container {
+  width: 100%;
+  background: #f5f5f5;
+  border-radius: 12px;
+  height: 24px;
+  margin: 8px 0 20px;
+  overflow: hidden;
+  box-shadow: inset 0 2px 5px rgba(0,0,0,0.1);
+}
+
 #trustBar {
   height: 100%;
   border-radius: 10px;
@@ -805,6 +786,11 @@ textarea:focus {
   overflow: hidden;
   width: 0%;
   background: #e0e0e0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 10px;
+  box-sizing: border-box;
 }
 
 #trustBar::after {
@@ -822,9 +808,39 @@ textarea:focus {
   animation: shimmer 2s infinite;
 }
 
-@keyframes shimmer {
-  0% { transform: translateX(-100%); }
-  100% { transform: translateX(100%); }
+/* ================= BOUTON LECTURE CROISÉE ================= */
+#crossReadersBtn {
+  background: linear-gradient(135deg, #43A047, #4CAF50) !important;
+  color: white;
+  border: none;
+  padding: 12px 25px;
+  border-radius: 10px;
+  cursor: pointer;
+  font-weight: 600;
+  font-size: 15px;
+  transition: all 0.3s ease;
+  box-shadow: 0 3px 8px rgba(67, 160, 71, 0.2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+}
+
+#crossReadersBtn:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: 0 5px 15px rgba(67, 160, 71, 0.3);
+  background: linear-gradient(135deg, #388E3C, #43A047) !important;
+}
+
+#crossReadersBtn:active:not(:disabled) {
+  transform: translateY(0);
+}
+
+#crossReadersBtn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  background: #b0bec5 !important;
 }
 
 /* ================= MESSAGES ================= */
@@ -875,6 +891,151 @@ textarea:focus {
   font-weight: 500;
 }
 
+/* ================= ONGLET 4: EXEMPLE D'ANALYSE ================= */
+#tab-example {
+  padding: 20px;
+}
+
+.example-container {
+  background: linear-gradient(135deg, #f3e5f5, #e1bee7);
+  padding: 25px;
+  border-radius: 15px;
+  border-left: 6px solid #7b1fa2;
+  margin-bottom: 30px;
+}
+
+.example-container h4 {
+  color: #7b1fa2;
+  margin-top: 0;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.example-analysis-box {
+  background: white;
+  padding: 20px;
+  border-radius: 10px;
+  border-left: 4px solid #7b1fa2;
+  margin: 15px 0;
+  box-shadow: 0 3px 10px rgba(0,0,0,0.05);
+}
+
+.example-message {
+  background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
+  padding: 20px;
+  border-radius: 10px;
+  border-left: 6px solid #43a047;
+  margin: 20px 0;
+  line-height: 1.6;
+  font-size: 15px;
+}
+
+.example-message::before {
+  content: '🤖';
+  float: left;
+  margin-right: 10px;
+  font-size: 24px;
+}
+
+.example-competences {
+  background: #f9fbe7;
+  padding: 15px;
+  border-radius: 10px;
+  margin: 15px 0;
+}
+
+.example-competences ul {
+  margin: 10px 0;
+  padding-left: 20px;
+}
+
+.example-competences li {
+  margin-bottom: 8px;
+  line-height: 1.4;
+}
+
+.example-metrics-table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 20px 0;
+  background: white;
+  border-radius: 10px;
+  overflow: hidden;
+  box-shadow: 0 3px 10px rgba(0,0,0,0.05);
+}
+
+.example-metrics-table th {
+  background: linear-gradient(135deg, #7b1fa2, #9c27b0);
+  color: white;
+  padding: 15px;
+  text-align: left;
+  font-weight: 600;
+}
+
+.example-metrics-table td {
+  padding: 15px;
+  border-bottom: 1px solid #eee;
+}
+
+.example-metrics-table tr:last-child td {
+  border-bottom: none;
+}
+
+.example-metrics-table tr:hover {
+  background: #f5f5f5;
+}
+
+.metric-stars {
+  color: #ffd54f;
+  font-size: 18px;
+}
+
+.metric-observation {
+  font-size: 13px;
+  line-height: 1.4;
+}
+
+.metric-observation .success {
+  color: #43a047;
+  font-weight: 600;
+}
+
+.metric-observation .warning {
+  color: #fb8c00;
+  font-weight: 600;
+}
+
+.metric-observation .error {
+  color: #e53935;
+  font-weight: 600;
+}
+
+.example-summary {
+  background: #e3f2fd;
+  padding: 20px;
+  border-radius: 10px;
+  margin: 20px 0;
+}
+
+.example-summary ul {
+  margin: 10px 0;
+  padding-left: 20px;
+}
+
+.example-summary li {
+  margin-bottom: 8px;
+  line-height: 1.4;
+  padding-left: 5px;
+}
+
+.example-separator {
+  height: 1px;
+  background: linear-gradient(90deg, #7b1fa2, transparent);
+  margin: 25px 0;
+  border: none;
+}
+
 /* ================= ANIMATIONS ================= */
 @keyframes fadeIn {
   from { opacity: 0; transform: translateY(20px); }
@@ -897,88 +1058,14 @@ textarea:focus {
   100% { transform: scale(1); }
 }
 
-/* ================= RESPONSIVE ================= */
-@media (max-width: 1200px) {
-  #reflection {
-    padding: 20px;
-  }
-  
-  .tabs {
-    flex-direction: column;
-  }
-  
-  .tab-btn {
-    width: 100%;
-  }
-}
-
-@media (max-width: 768px) {
-  body {
-    padding: 10px;
-  }
-  
-  .nav {
-    flex-direction: column;
-    gap: 15px;
-    text-align: center;
-  }
-  
-  #scenarioTitle {
-    margin: 10px 0;
-    font-size: 1.2em;
-  }
-  
-  button {
-    width: 100%;
-    justify-content: center;
-  }
-  
-  .gdpr-options {
-    flex-direction: column;
-    gap: 10px;
-  }
-  
-  .gdpr-option {
-    min-width: 100%;
-  }
-  
-  .compact-competences-grid {
-    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-  }
-  
-  .compact-radar-metrics-grid {
-    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-  }
-  
-  .compact-radar-legend {
-    flex-direction: column;
-    align-items: center;
-    gap: 8px;
-  }
-  
-  .compact-legend-grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
-  
-  .compact-analysis-controls {
-    flex-direction: column;
-    align-items: stretch;
-  }
-  
-  .compact-persistence-indicators {
-    flex-direction: column;
-  }
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
 }
 
-/* ================= PROGRESS BAR CONTAINER ================= */
-.progress-container {
-  width: 100%;
-  background: #f5f5f5;
-  border-radius: 12px;
-  height: 24px;
-  margin: 8px 0 20px;
-  overflow: hidden;
-  box-shadow: inset 0 2px 5px rgba(0,0,0,0.1);
+@keyframes shimmer {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(100%); }
 }
 
 /* ================= TOOLTIPS ================= */
@@ -1040,11 +1127,6 @@ textarea:focus {
   animation: spin 1s linear infinite;
 }
 
-@keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}
-
 /* ================= NOTIFICATIONS ================= */
 .notification {
   position: fixed;
@@ -1094,6 +1176,112 @@ textarea:focus {
   font-size: 20px;
   line-height: 1;
 }
+
+/* ================= RESPONSIVE ================= */
+@media (max-width: 1200px) {
+  #reflection {
+    padding: 20px;
+  }
+  
+  .tabs {
+    flex-direction: column;
+  }
+  
+  .tab-btn {
+    width: 100%;
+  }
+}
+
+@media (max-width: 768px) {
+  body {
+    padding: 10px;
+  }
+  
+  .nav {
+    flex-direction: column;
+    gap: 15px;
+    text-align: center;
+  }
+  
+  #scenarioTitle {
+    margin: 10px 0;
+    font-size: 1.2em;
+  }
+  
+  button {
+    width: 100%;
+    justify-content: center;
+  }
+  
+  .gdpr-options {
+    flex-direction: column;
+    gap: 10px;
+  }
+  
+  .gdpr-option {
+    min-width: 100%;
+  }
+  
+  .compact-competences-grid {
+    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+  }
+  
+  .compact-radar-metrics-grid {
+    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+  }
+  
+  .compact-radar-legend {
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+  }
+  
+  .compact-legend-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  
+  .compact-analysis-controls {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  
+  .compact-persistence-indicators {
+    flex-direction: column;
+  }
+  
+  .stats-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  
+  .tab-btn {
+    min-width: 100%;
+  }
+  
+  .example-metrics-table {
+    display: block;
+    overflow-x: auto;
+  }
+}
+
+@media (max-width: 480px) {
+  .stats-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .compact-radar-metrics-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .compact-competences-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .example-metrics-table th,
+  .example-metrics-table td {
+    padding: 10px 8px;
+    font-size: 13px;
+  }
+}
 </style>
 </head>
 
@@ -1120,6 +1308,9 @@ textarea:focus {
       <button class="tab-btn" data-tab="tab-evaluation">
         <span>🤖</span> Message Réflexif & Évaluation
       </button>
+      <button class="tab-btn" data-tab="tab-example">
+        <span>📋</span> Exemple d'Analyse
+      </button>
     </div>
 
     <!-- ONGLET 1: INFORMATIONS ÉVALUATEUR GDPR -->
@@ -1213,7 +1404,7 @@ textarea:focus {
         </div>
         
         <!-- Boutons d'action -->
-        <div style="display: flex; gap: 10px; margin-top: 20px;">
+        <div style="display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap;">
           <button onclick="fillSampleEvaluator()" type="button" style="background: #666; flex: 1;" id="fillExampleBtn">
             <span style="margin-right: 5px;">📋</span> Remplir exemple
           </button>
@@ -1439,11 +1630,11 @@ textarea:focus {
       <h4>💬 Commentaire expert</h4>
       <textarea id="trustComment" placeholder="Ajoutez vos observations, suggestions ou critiques concernant l'analyse de ReflAgent..."></textarea>
 
-      <div style="display: flex; justify-content: space-between; align-items: center; margin: 25px 0;">
-        <div style="flex-grow: 1; margin-right: 20px;">
+      <div style="display: flex; justify-content: space-between; align-items: center; margin: 25px 0; flex-wrap: wrap; gap: 20px;">
+        <div style="flex-grow: 1; min-width: 300px;">
           <h4 style="margin-bottom: 10px;">🔒 Indice global de confiance</h4>
           <div class="progress-container">
-            <div class="fill" id="trustBar">0%</div>
+            <div id="trustBar">0%</div>
           </div>
           <div style="display: flex; justify-content: space-between; margin-top: 5px; font-size: 12px; color: #666;">
             <span>Faible confiance</span>
@@ -1451,9 +1642,9 @@ textarea:focus {
             <span>Forte confiance</span>
           </div>
         </div>
-        <div style="display: flex; flex-direction: column; gap: 10px; align-items: flex-end;">
+        <div style="display: flex; flex-direction: column; gap: 10px; align-items: flex-end; min-width: 200px;">
           <button id="saveTrustBtn" style="height: fit-content; width: 100%;">💾 Sauvegarder l'évaluation</button>
-          <button id="crossReadersBtn" style="height: fit-content; width: 100%; background: linear-gradient(135deg, #43A047, #4CAF50);">
+          <button id="crossReadersBtn" style="height: fit-content; width: 100%;">
             📊 Lecture croisée
           </button>
         </div>
@@ -1481,6 +1672,87 @@ textarea:focus {
         </div>
       </div>
     </div>
+
+    <!-- ONGLET 4: EXEMPLE D'ANALYSE -->
+    <div id="tab-example" class="tab-content">
+      <h3>📋 Exemple d'Analyse – Étudiant en difficulté / évitement de l’échec : peur de l’échec supérieure à la motivation de réussite.</h3>
+      
+        <div class="example-analysis-box">
+          <h4>Message auto-réflexif</h4>
+            Ton niveau d'engagement est actuellement très faible : seulement 35 % des activités ont été démarrées et 30 % achevées. 😔 Tes compétences restent fragiles (40 %), ce qui indique un risque élevé de décrochage.
+            Tu sembles parfois éviter les situations qui pourraient mener à l'échec, mais il est important de te rappeler que l'échec fait partie de l'apprentissage et peut devenir une véritable source de progression. 🛡️
+            Commence par fixer des objectifs minuscules et accessibles, et entreprends de petites actions régulières dès le début de la semaine. Cela te permettra de reconstruire progressivement un rythme stable et de retrouver confiance et motivation.
+            Tu dois travailler les compétences mises en avant : la compétence Favoriser la progression du domaine Paragraphe et la compétence Valoriser les petites victoires du domaine Texte.
+        </div>
+        
+     
+        
+        <div class="example-separator"></div>
+        
+        <div class="example-analysis-box">
+          <h4> Évaluation métrique avec observations</h4>
+          <table class="example-metrics-table">
+            <thead>
+              <tr>
+                <th width="25%">Métrique</th>
+                <th width="15%">Niveau ★</th>
+                <th width="60%">Observations (avec passage du message)</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td><strong>Authenticité Réflexive (AR)</strong></td>
+                <td><span class="metric-stars">★★★★☆</span></td>
+                <td class="metric-observation">
+                  <span class="success">L'analyse reflète fidèlement la situation :</span> « Ton niveau d'engagement est actuellement très faible … Tes compétences restent fragiles » ✅
+                </td>
+              </tr>
+              <tr>
+                <td><strong>Alignement Empathique (AE)</strong></td>
+                <td><span class="metric-stars">★★★☆☆</span></td>
+                <td class="metric-observation">
+                  <span class="warning">L'agent montre une compréhension partielle des émotions :</span> « Tu sembles parfois éviter les situations qui pourraient mener à l'échec » ⚠️ Peut être renforcé avec plus de soutien émotionnel direct
+                </td>
+              </tr>
+              <tr>
+                <td><strong>Encouragement Sensible au Risque (ESR)</strong></td>
+                <td><span class="metric-stars">★☆☆☆☆</span></td>
+                <td class="metric-observation">
+                  <span class="error">L'agent indique le risque mais le soutien reste limité :</span> « …ce qui indique un risque élevé de décrochage » ❌ Faible guidance concrète pour sécuriser la progression
+                </td>
+              </tr>
+              <tr>
+                <td><strong>Support aux Défis Mentaux (SDM)</strong></td>
+                <td><span class="metric-stars">★☆☆☆☆</span></td>
+                <td class="metric-observation">
+                  <span class="error">Suggestions très limitées pour développer la réflexion ou les compétences :</span> « Commence par fixer des objectifs minuscules et accessibles » ❌ Pas de stratégie cognitive détaillée
+                </td>
+              </tr>
+              <tr>
+                <td><strong>Support Métacognitif (SM)</strong></td>
+                <td><span class="metric-stars">★★☆☆☆</span></td>
+                <td class="metric-observation">
+                  <span class="warning">Encouragement minimal à réfléchir sur sa méthode :</span> « entreprends de petites actions régulières » ⚠️ Peu d'indication sur planification ou révision de stratégie
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        
+        <div class="example-separator"></div>
+        
+        <div class="example-analysis-box">
+          <h4> Résumé compact pour experts</h4>
+            <ul>
+              <li><strong>Profil global :</strong> Étudiant à risque, faible engagement et compétences fragiles.</li>
+              <li><strong>Points forts :</strong> Volonté minimale de progresser (essayer malgré l'échec), possibilité de reconstruire motivation par petites actions.</li>
+              <li><strong>Points à améliorer :</strong> Engagement, organisation, stratégies cognitives et métacognitives.</li>
+              <li><strong>Objectif pédagogique :</strong> Réintroduire l'étudiant dans un rythme régulier avec des objectifs accessibles, renforcer la confiance et la motivation, fournir un soutien plus concret.</li>
+            </ul>
+      </div>
+      
+      
+    </div>
   </div>
 </div>
 
@@ -1614,6 +1886,11 @@ document.addEventListener("DOMContentLoaded", () => {
   
   // 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;
 });
 
 // ================= SYSTEME D'ONGLETS =================
@@ -1683,46 +1960,108 @@ function initGDPR() {
 // ================= CHARGEMENT JSON =================
 function loadScenarios() {
   console.log("Chargement des scénarios...");
-  fetch("/static/scenarios.json")
-    .then(r => {
-      if (!r.ok) throw new Error("Erreur de chargement du fichier JSON");
-      return r.json();
-    })
-    .then(data => {
-      console.log("Scénarios chargés:", data.scenarios.length);
-      scenarios = data.scenarios;
-      loadScenario(0);
-    })
-    .catch(error => {
-      console.error("Erreur:", error);
-      document.getElementById("manifest-list").innerHTML = 
-        `<div class="manifest-item" style="background:#FFEBEE;color:#C62828;">
-          Erreur de chargement des scénarios. Vérifiez que le fichier scenarios.json existe.
-        </div>`;
-    });
+  // Tentative de chargement depuis différents chemins
+  const possiblePaths = [
+    "/static/scenarios.json",
+    "scenarios.json",
+    "./scenarios.json",
+    "../scenarios.json"
+  ];
+  
+  let loadAttempts = 0;
+  
+  function tryLoad(pathIndex) {
+    if (pathIndex >= possiblePaths.length) {
+      console.error("❌ Impossible de charger les scénarios depuis aucun chemin");
+      showError("Impossible de charger les scénarios. Vérifiez que le fichier scenarios.json existe.");
+      return;
+    }
+    
+    const path = possiblePaths[pathIndex];
+    console.log(`Tentative de chargement depuis: ${path}`);
+    
+    fetch(path)
+      .then(r => {
+        if (!r.ok) throw new Error(`Erreur HTTP ${r.status}`);
+        return r.json();
+      })
+      .then(data => {
+        console.log("✅ Scénarios chargés:", data.scenarios?.length || 0);
+        scenarios = data.scenarios || [];
+        
+        if (scenarios.length === 0) {
+          console.warn("Aucun scénario trouvé dans le fichier");
+          showError("Aucun scénario trouvé dans le fichier JSON");
+          return;
+        }
+        
+        loadScenario(0);
+      })
+      .catch(error => {
+        console.warn(`Échec pour ${path}:`, error.message);
+        loadAttempts++;
+        tryLoad(pathIndex + 1);
+      });
+  }
+  
+  tryLoad(0);
+}
+
+function showError(message) {
+  const manifestList = document.getElementById("manifest-list");
+  if (manifestList) {
+    manifestList.innerHTML = 
+      `<div class="manifest-item" style="background:#FFEBEE;color:#C62828;">
+        ${message}<br>
+        <small>Veuillez vérifier que le fichier scenarios.json est présent.</small>
+      </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;
 }
 
 // ================= CHARGER SCÉNARIO =================
 function loadScenario(index) {
   console.log("Chargement scénario", index);
-  if (index < 0 || index >= scenarios.length) return;
+  if (!scenarios || scenarios.length === 0) {
+    console.error("Aucun scénario disponible");
+    return;
+  }
+  
+  if (index < 0 || index >= scenarios.length) {
+    console.warn(`Index ${index} hors limites (0-${scenarios.length-1})`);
+    return;
+  }
+  
   currentScenarioIndex = index;
   const s = scenarios[index];
 
   // Mettre à jour le titre
   const titleElement = document.getElementById("scenarioTitle");
-  titleElement.textContent = `Scénario ${s.id} – ${s.title}`;
+  if (titleElement) {
+    titleElement.textContent = `Scénario ${s.id} – ${s.title}`;
+  }
 
   // Mettre à jour le manifeste
-  document.getElementById("manifest-list").innerHTML = `
-    <div class="manifest-item">
-      <b>Type de Manifest :</b> ${s.manifest.type}<br>
-      <b>Manifeste (écrit par l'étudiant) :</b> ${s.manifest.manifeste}<br>
-      <b>Description du Profil :</b> ${s.manifest.description}
-    </div>`;
+  const manifestList = document.getElementById("manifest-list");
+  if (manifestList) {
+    manifestList.innerHTML = `
+      <div class="manifest-item">
+        <b>Type de Manifest :</b> ${s.manifest?.type || "Non spécifié"}<br>
+        <b>Manifeste (écrit par l'étudiant) :</b> ${s.manifest?.manifeste || "Non disponible"}<br>
+        <b>Description du Profil :</b> ${s.manifest?.description || "Non disponible"}
+      </div>`;
+  }
 
   // Mettre à jour les compétences compactes
-  updateCompactCompetences(s.competences);
+  if (s.competences) {
+    updateCompactCompetences(s.competences);
+  }
 
   // Mettre à jour le radar avec les nouvelles métriques
   if (s.radar && s.radar.length > 0) {
@@ -1756,13 +2095,19 @@ function loadScenario(index) {
   updatePerseveranceProfile(s.title);
 
   // Mettre à jour le message ReflAgent
-  document.getElementById("reflagent").textContent = s.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();
+  updateStats(s);
+  
+  // Réinitialiser l'évaluation de confiance
+  resetTrustEvaluation();
 }
 
 // ================= FONCTIONS POUR LA VERSION COMPACTE =================
@@ -1774,6 +2119,11 @@ function updateCompactCompetences(competences) {
   
   container.innerHTML = '';
   
+  if (!competences || competences.length === 0) {
+    container.innerHTML = '<em>Aucune donnée de compétence disponible</em>';
+    return;
+  }
+  
   competences.forEach(comp => {
     // Déterminer la couleur selon la valeur
     let color;
@@ -1807,6 +2157,11 @@ function updateCompactRadarMetricsGrid() {
   
   grid.innerHTML = '';
   
+  if (!radarMetrics || radarMetrics.length === 0) {
+    grid.innerHTML = '<em>Aucune métrique radar disponible</em>';
+    return;
+  }
+  
   radarMetrics.forEach(metric => {
     // Déterminer la classe de couleur selon la valeur
     let colorClass = "";
@@ -1951,6 +2306,7 @@ function drawCompactEnrichedHeatmap(scenario) {
   const weeks = 4;
   const totalDays = weeks * 7;
   
+  // Effacer le canvas
   ctx.clearRect(0, 0, canvas.width, canvas.height);
   
   // Titre enrichi
@@ -2027,6 +2383,16 @@ function updatePerseveranceProfile(scenarioTitle) {
   
   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;">
+          Analyse de persévérance non disponible pour ce profil.
+        </div>
+      `;
+    }
     return;
   }
   
@@ -2155,12 +2521,15 @@ function analyzeCompactPersistenceMetrics(activityData, scenarioId) {
   }
   
   // Mettre à jour l'interface compacte
-  document.getElementById("compact-regularityScore").textContent = Math.round(regularity) + "%";
-  document.getElementById("compact-effortPattern").textContent = pattern;
-  document.getElementById("compact-deadlineScore").textContent = Math.round(deadlineScore) + "%";
+  const regularityScoreElem = document.getElementById("compact-regularityScore");
+  const effortPatternElem = document.getElementById("compact-effortPattern");
+  const deadlineScoreElem = document.getElementById("compact-deadlineScore");
+  const patternTextElem = document.getElementById("compact-patternText");
   
-  // Mettre à jour l'analyse textuelle compacte
-  document.getElementById("compact-patternText").textContent = patternDescription;
+  if (regularityScoreElem) regularityScoreElem.textContent = Math.round(regularity) + "%";
+  if (effortPatternElem) effortPatternElem.textContent = pattern;
+  if (deadlineScoreElem) deadlineScoreElem.textContent = Math.round(deadlineScore) + "%";
+  if (patternTextElem) patternTextElem.textContent = patternDescription;
 }
 
 // ================= RADAR =================
@@ -2174,7 +2543,7 @@ function drawRadar() {
   const ctx = canvas.getContext("2d");
   const cx = canvas.width / 2;
   const cy = canvas.height / 2;
-  const radius = 200;
+  const radius = Math.min(cx, cy) - 40; // Ajuster selon la taille
   const n = radarMetrics.length;
 
   ctx.clearRect(0, 0, canvas.width, canvas.height);
@@ -2205,7 +2574,13 @@ function drawRadar() {
     ctx.fillStyle = "#000";
     ctx.textAlign = angle > Math.PI / 2 || angle < -Math.PI / 2 ? "right" : "left";
     ctx.textBaseline = "middle";
-    ctx.fillText(`${m.label.split(' ')[0]}`, tx, ty);
+    
+    // Raccourcir les labels longs
+    let label = m.label;
+    if (label.length > 15) {
+      label = label.substring(0, 12) + "...";
+    }
+    ctx.fillText(label, tx, ty);
   });
 
   // Dessiner le polygone
@@ -2240,21 +2615,19 @@ function drawRadar() {
 }
 
 // ================= NAVIGATION =================
-document.getElementById("prevScenario").onclick = () =>
-  loadScenario(currentScenarioIndex - 1);
-
-document.getElementById("nextScenario").onclick = () =>
-  loadScenario(currentScenarioIndex + 1);
-
 function updateNavButtons() {
-  document.getElementById("prevScenario").disabled =
-    currentScenarioIndex === 0;
-  document.getElementById("nextScenario").disabled =
-    currentScenarioIndex === scenarios.length - 1;
+  if (!scenarios || scenarios.length === 0) {
+    document.getElementById("prevScenario").disabled = true;
+    document.getElementById("nextScenario").disabled = true;
+    return;
+  }
+  
+  document.getElementById("prevScenario").disabled = currentScenarioIndex === 0;
+  document.getElementById("nextScenario").disabled = currentScenarioIndex === scenarios.length - 1;
 }
 
 // ================= BOUTON LECTURE CROISÉE =================
-document.getElementById('crossReadersBtn').onclick = () => {
+function navigateToCrossReading() {
   console.log('Navigation vers la page de lecture croisée...');
   
   // Animation de transition
@@ -2266,9 +2639,47 @@ document.getElementById('crossReadersBtn').onclick = () => {
   
   // Redirection
   setTimeout(() => {
-    window.location.href = 'cross_reading/cross_readers.html';
+    // Essayer différents chemins pour la page de lecture croisée
+    const possiblePaths = [
+      'cross_reading/cross_readers.html',
+      './cross_reading/cross_readers.html',
+      '../cross_reading/cross_readers.html',
+      'cross_readers.html',
+      './cross_readers.html'
+    ];
+    
+    // Vérifier si le fichier existe avant la redirection
+    function tryRedirect(index) {
+      if (index >= possiblePaths.length) {
+        console.error('Page de lecture croisée introuvable');
+        showNotification('Erreur', 'Page de lecture croisée introuvable', 'error');
+        
+        // Restaurer l'opacité
+        if (reflectionDiv) {
+          reflectionDiv.style.opacity = '1';
+        }
+        return;
+      }
+      
+      const path = possiblePaths[index];
+      
+      // Vérifier si le fichier existe (approximation)
+      fetch(path, { method: 'HEAD' })
+        .then(response => {
+          if (response.ok) {
+            window.location.href = path;
+          } else {
+            tryRedirect(index + 1);
+          }
+        })
+        .catch(() => {
+          tryRedirect(index + 1);
+        });
+    }
+    
+    tryRedirect(0);
   }, 300);
-};
+}
 
 // ================= MÉTRIQUES DE CONFIANCE =================
 function initTrustStars(){
@@ -2304,9 +2715,11 @@ function initTrustStars(){
       
       // Stocker la valeur dans un attribut data
       star.dataset.value = i;
+      star.dataset.metric = metric;
       
       star.onclick = function() {
         const value = parseInt(this.dataset.value);
+        const metric = this.dataset.metric;
         console.log(`Clic sur ${metric}: ${value} étoiles`);
         
         // Mettre à jour la valeur de la métrique
@@ -2569,54 +2982,48 @@ function initTrustSave(){
     
     console.log("Données à envoyer:", JSON.stringify(data, null, 2));
 
-    // Envoyer au serveur
-    fetch("/save_trust", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify(data)
-    })
-    .then(res => {
-      if (!res.ok) throw new Error(`Erreur HTTP ${res.status}: ${res.statusText}`);
-      return res.json();
-    })
-    .then(responseData => {
-      console.log("✅ Réponse du serveur:", responseData);
-      
-      if (msgDiv) {
-        const nameDisplay = gdprAccept ? evaluatorName : "Évaluateur anonyme";
-        msgDiv.innerHTML = `
-          <div style="display: flex; align-items: center; gap: 10px;">
-            <div style="font-size: 24px;">✅</div>
-            <div>
-              <strong>Évaluation sauvegardée avec succès !</strong><br>
-              <small>Merci ${nameDisplay} pour votre contribution.</small><br>
-              <small><em>Indice global: ${trustScore}%</em></small>
-            </div>
-          </div>
-        `;
-        msgDiv.style.background = "#E8F5E9";
-        msgDiv.style.color = "#2E7D32";
-        msgDiv.style.padding = "15px";
-      }
-      
-      // Réinitialiser après succès (optionnel)
-      setTimeout(() => {
-        resetTrustEvaluation();
-      }, 3000);
-    })
-    .catch(error => {
-      console.error("❌ Erreur de sauvegarde:", error);
-      if (msgDiv) {
-        msgDiv.textContent = `❌ Erreur: ${error.message}`;
-        msgDiv.style.background = "#FFEBEE";
-        msgDiv.style.color = "#C62828";
-      }
-    });
+    // Envoyer au serveur (simulation)
+    simulateServerSave(data, msgDiv, trustScore, evaluatorName, gdprAccept);
   };
   
   console.log("✅ Bouton de sauvegarde initialisé");
 }
 
+// Simulation de sauvegarde serveur
+function simulateServerSave(data, msgDiv, trustScore, evaluatorName, gdprAccept) {
+  // Simuler un délai réseau
+  setTimeout(() => {
+    console.log("✅ Simulation de sauvegarde réussie:", data);
+    
+    if (msgDiv) {
+      const nameDisplay = gdprAccept ? evaluatorName : "Évaluateur anonyme";
+      msgDiv.innerHTML = `
+        <div style="display: flex; align-items: center; gap: 10px;">
+          <div style="font-size: 24px;">✅</div>
+          <div>
+            <strong>Évaluation sauvegardée avec succès !</strong><br>
+            <small>Merci ${nameDisplay} pour votre contribution.</small><br>
+            <small><em>Indice global: ${trustScore}%</em></small>
+          </div>
+        </div>
+      `;
+      msgDiv.style.background = "#E8F5E9";
+      msgDiv.style.color = "#2E7D32";
+      msgDiv.style.padding = "15px";
+    }
+    
+    // Réinitialiser après succès (optionnel)
+    setTimeout(() => {
+      if (msgDiv) {
+        msgDiv.innerHTML = "";
+        msgDiv.style.background = "";
+        msgDiv.style.color = "";
+        msgDiv.style.padding = "";
+      }
+    }, 5000);
+  }, 1000);
+}
+
 // Fonction pour réinitialiser l'évaluation
 function resetTrustEvaluation() {
   console.log("Réinitialisation de l'évaluation...");
@@ -2638,7 +3045,10 @@ function resetTrustEvaluation() {
   updateTrustBar();
   
   // Vider le commentaire
-  document.getElementById("trustComment").value = "";
+  const commentField = document.getElementById("trustComment");
+  if (commentField) {
+    commentField.value = "";
+  }
   
   console.log("Évaluation réinitialisée");
 }
@@ -2646,33 +3056,39 @@ function resetTrustEvaluation() {
 // ================= FONCTIONS UTILITAIRES =================
 
 // Mettre à jour les statistiques
-function updateStats() {
-  if (!scenarios || scenarios.length === 0) return;
+function updateStats(scenario) {
+  if (!scenario) return;
   
-  const currentScenario = scenarios[currentScenarioIndex];
+  const currentScenarioNum = document.getElementById("currentScenarioNum");
+  const riskLevelElem = document.getElementById("riskLevel");
+  const avgActivityElem = document.getElementById("avgActivity");
   
-  document.getElementById("currentScenarioNum").textContent = currentScenario.id;
+  if (currentScenarioNum) {
+    currentScenarioNum.textContent = scenario.id || "-";
+  }
   
   // Niveau de risque
-  const risk = currentScenario.risk || 50;
-  let riskLevel = "Moyen";
-  let riskColor = "#FB8C00";
-  
-  if (risk < 40) {
-    riskLevel = "Faible";
-    riskColor = "#43A047";
-  } else if (risk > 70) {
-    riskLevel = "Élevé";
-    riskColor = "#E53935";
+  if (riskLevelElem) {
+    const risk = scenario.risk || 50;
+    let riskLevel = "Moyen";
+    let riskColor = "#FB8C00";
+    
+    if (risk < 40) {
+      riskLevel = "Faible";
+      riskColor = "#43A047";
+    } else if (risk > 70) {
+      riskLevel = "Élevé";
+      riskColor = "#E53935";
+    }
+    
+    riskLevelElem.textContent = riskLevel;
+    riskLevelElem.style.color = riskColor;
   }
   
-  document.getElementById("riskLevel").textContent = riskLevel;
-  document.getElementById("riskLevel").style.color = riskColor;
-  
   // Activité moyenne à partir des données radar
-  if (currentScenario.radar && currentScenario.radar.length > 0) {
-    const avgRadar = currentScenario.radar.reduce((sum, item) => sum + item.value, 0) / currentScenario.radar.length;
-    document.getElementById("avgActivity").textContent = Math.round(avgRadar) + "%";
+  if (avgActivityElem && scenario.radar && scenario.radar.length > 0) {
+    const avgRadar = scenario.radar.reduce((sum, item) => sum + item.value, 0) / scenario.radar.length;
+    avgActivityElem.textContent = Math.round(avgRadar) + "%";
   }
 }
 
@@ -2717,21 +3133,38 @@ function showNotification(title, message, type = "info") {
                              type === "error" ? "#FFEBEE" : "#E3F2FD";
     msgDiv.style.color = type === "success" ? "#2E7D32" : 
                         type === "error" ? "#C62828" : "#1565C0";
+    
+    // Effacer après 5 secondes
+    setTimeout(() => {
+      msgDiv.textContent = "";
+      msgDiv.style.background = "";
+      msgDiv.style.color = "";
+    }, 5000);
   }
 }
 
 // Changer le mode d'analyse de persévérance
 function changePersistenceAnalysis() {
-  const mode = document.getElementById("persistenceMode").value;
+  const modeSelect = document.getElementById("persistenceMode");
+  if (!modeSelect) return;
+  
+  const mode = modeSelect.value;
   const currentScenario = scenarios[currentScenarioIndex];
   
+  if (!currentScenario) return;
+  
   // Redessiner la heatmap avec le mode sélectionné
   drawCompactEnrichedHeatmap(currentScenario);
   
   // Ajouter une annotation selon le mode
   const canvas = document.getElementById("heatmap");
+  if (!canvas) return;
+  
   const ctx = canvas.getContext("2d");
   
+  // Effacer l'annotation précédente
+  ctx.clearRect(0, canvas.height - 30, canvas.width, 30);
+  
   ctx.font = "12px Arial";
   ctx.fillStyle = "#1976D2";
   ctx.textAlign = "center";
@@ -2758,6 +3191,7 @@ window.updateStats = updateStats;
 window.showNotification = showNotification;
 window.fillSampleEvaluator = fillSampleEvaluator;
 window.clearEvaluatorFields = clearEvaluatorFields;
+window.loadScenario = loadScenario;
 </script>
 
 </body>