Upload templates/index.html with huggingface_hub

templates/index.html

@@ -319,545 +319,373 @@ button:disabled {
   line-height: 1.5;
 }
 
-/* ================= ONGLET 2: DASHBOARD ÉTUDIANT ================= */
+/* ================= ONGLET 2: DASHBOARD ÉTUDIANT COMPACT ================= */
 #tab-dashboard .manifest-item {
   background: linear-gradient(135deg, #f9fbe7, #f0f4c3);
-  padding: 20px;
+  padding: 15px;
   border-radius: 12px;
   border-left: 6px solid #cddc39;
   margin: 15px 0;
   box-shadow: 0 3px 10px rgba(0,0,0,0.05);
+  font-size: 14px;
 }
 
 .manifest-item b {
   color: #689f38;
 }
 
-/* ================= COMPÉTENCES ================= */
-.bar {
-  background: #f5f5f5;
-  border-radius: 12px;
-  height: 22px;
-  margin: 8px 0 20px;
-  overflow: hidden;
-  box-shadow: inset 0 2px 5px rgba(0,0,0,0.1);
-}
-
-.fill {
-  height: 100%;
-  border-radius: 12px;
-  color: white;
-  font-size: 13px;
-  text-align: right;
-  padding-right: 12px;
-  line-height: 22px;
-  font-weight: 600;
-  transition: width 0.5s ease;
-  position: relative;
-  overflow: hidden;
-}
-
-.fill::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3));
-}
-
-/* ================= RADAR ================= */
-#radar-container {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 30px;
-  margin: 20px auto;
-  align-items: flex-start;
-}
-
-#radar {
-  flex: 1;
-  min-width: 500px;
-  max-width: 500px;
+/* ================= COMPÉTENCES COMPACTES ================= */
+#competence-bars {
   background: white;
-  border-radius: 15px;
-  padding: 20px;
-  box-shadow: 0 5px 20px rgba(0,0,0,0.08);
+  padding: 15px;
+  border-radius: 12px;
   border: 1px solid #e0e0e0;
+  margin: 15px 0;
 }
 
-/* ================= GRILLE DES MÉTRIQUES RADAR ================= */
-.radar-metrics-grid {
+.compact-competences-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  gap: 20px;
-  margin: 25px 0;
-}
-
-.metric-card {
-  background: white;
-  border-radius: 12px;
-  padding: 20px;
-  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
-  border-left: 5px solid #1976D2;
-  transition: transform 0.3s, box-shadow 0.3s;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 12px;
+  margin: 10px 0;
 }
 
-.metric-card:hover {
-  transform: translateY(-5px);
-  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
+.compact-competence-item {
+  padding: 10px;
+  background: #f8f9fa;
+  border-radius: 8px;
+  border-left: 4px solid #1976D2;
+  transition: transform 0.2s;
 }
 
-.metric-icon {
-  font-size: 32px;
-  margin-bottom: 10px;
+.compact-competence-item:hover {
+  transform: translateY(-2px);
+  background: #e3f2fd;
 }
 
-.metric-name {
+.compact-competence-label {
+  font-size: 12px;
   font-weight: 600;
   color: #333;
   margin-bottom: 8px;
-  font-size: 16px;
+  display: flex;
+  justify-content: space-between;
 }
 
-.metric-value {
-  font-size: 28px;
-  font-weight: bold;
-  color: #1976D2;
+.compact-competence-bar {
+  height: 10px;
+  background: #e0e0e0;
+  border-radius: 5px;
+  overflow: hidden;
   margin: 5px 0;
 }
 
-.metric-value.high {
-  color: #43A047;
-}
-
-.metric-value.medium {
-  color: #FB8C00;
-}
-
-.metric-value.low {
-  color: #E53935;
-}
-
-.metric-description {
-  font-size: 13px;
-  color: #666;
-  margin-top: 8px;
-  line-height: 1.4;
-}
-
-/* ================= PANEL MÉTACOGNITION ================= */
-.metacognition-panel {
-  flex: 1;
-  min-width: 400px;
-  max-width: 600px;
-  background: linear-gradient(135deg, #FFF3E0, #FFE0B2);
-  padding: 25px;
-  border-radius: 15px;
-  border-left: 6px solid #FF9800;
-  box-shadow: 0 5px 20px rgba(0,0,0,0.08);
+.compact-competence-fill {
+  height: 100%;
+  border-radius: 5px;
+  color: white;
+  font-size: 9px;
+  text-align: right;
+  padding-right: 5px;
+  line-height: 10px;
+  font-weight: bold;
+  transition: width 0.5s ease;
 }
 
-.metacognition-header {
+/* ================= LÉGENDE RADAR COMPACTE ================= */
+.compact-radar-legend {
   display: flex;
-  align-items: center;
+  justify-content: center;
   gap: 15px;
-  margin-bottom: 20px;
-  padding-bottom: 15px;
-  border-bottom: 2px solid rgba(255, 152, 0, 0.2);
+  margin: 15px 0;
+  flex-wrap: wrap;
+  padding: 10px;
+  background: white;
+  border-radius: 8px;
+  border: 1px solid #e0e0e0;
 }
 
-.metacognition-icon {
-  font-size: 32px;
-  background: #FF9800;
-  color: white;
-  width: 60px;
-  height: 60px;
-  border-radius: 50%;
+.compact-legend-item {
   display: flex;
   align-items: center;
-  justify-content: center;
-  box-shadow: 0 4px 12px rgba(255, 152, 0, 0.3);
-}
-
-.metacognition-header h4 {
-  color: #FF9800;
-  margin: 0;
-  font-size: 20px;
-}
-
-.metacognition-content {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
+  gap: 8px;
+  padding: 6px 10px;
+  background: #f8f9fa;
+  border-radius: 6px;
+  font-size: 12px;
 }
 
-.metacognition-message {
-  background: white;
-  padding: 18px;
-  border-radius: 12px;
-  font-size: 15px;
-  line-height: 1.6;
-  border: 2px solid #FFE0B2;
+.compact-legend-color {
+  width: 16px;
+  height: 16px;
+  border-radius: 4px;
+  border: 2px solid white;
 }
 
-.metacognition-message strong {
-  color: #FF9800;
-  display: block;
-  margin-bottom: 8px;
-  font-size: 16px;
-}
+.compact-legend-low { background: linear-gradient(135deg, #e53935, #f44336); }
+.compact-legend-medium { background: linear-gradient(135deg, #fb8c00, #ff9800); }
+.compact-legend-high { background: linear-gradient(135deg, #43a047, #4caf50); }
 
-.metacognition-questions {
+/* ================= RADAR COMPACT ================= */
+#radar-container {
   background: white;
-  padding: 20px;
+  padding: 15px;
   border-radius: 12px;
-  border: 2px solid #FFE0B2;
-}
-
-.metacognition-questions h5 {
-  color: #FF9800;
-  margin-top: 0;
-  margin-bottom: 15px;
-  font-size: 16px;
-}
-
-.metacognition-questions ul {
-  margin: 0;
-  padding-left: 20px;
-}
-
-.metacognition-questions li {
-  margin-bottom: 10px;
-  color: #555;
-  line-height: 1.5;
-  font-size: 14px;
+  border: 1px solid #e0e0e0;
+  margin: 15px 0;
 }
 
-.metacognition-questions li:last-child {
-  margin-bottom: 0;
+#radar {
+  max-width: 100%;
+  height: auto;
 }
 
-/* Message bot radar */
-.radar-bot-message {
+/* ================= MESSAGE BOT RADAR COMPACT ================= */
+.compact-radar-bot-message {
   background: linear-gradient(135deg, #E3F2FD, #BBDEFB);
-  padding: 20px;
-  border-radius: 15px;
-  margin: 20px 0;
-  border-left: 6px solid #1976D2;
-  box-shadow: 0 4px 12px rgba(25, 118, 210, 0.1);
-  animation: fadeIn 0.5s ease-in;
+  padding: 15px;
+  border-radius: 10px;
+  border-left: 4px solid #1976D2;
+  margin: 15px 0;
 }
 
-.radar-bot-header {
+.compact-radar-bot-header {
   display: flex;
   align-items: center;
-  gap: 12px;
-  margin-bottom: 15px;
+  gap: 10px;
+  margin-bottom: 10px;
 }
 
-.radar-bot-icon {
-  font-size: 28px;
+.compact-radar-bot-icon {
+  font-size: 20px;
   background: #1976D2;
   color: white;
-  width: 50px;
-  height: 50px;
+  width: 40px;
+  height: 40px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
-.radar-bot-title {
-  font-size: 18px;
+.compact-radar-bot-title {
+  font-size: 16px;
   font-weight: 600;
   color: #1976D2;
   margin: 0;
 }
 
-.radar-bot-content {
-  font-size: 16px;
-  line-height: 1.6;
+.compact-radar-bot-content {
+  font-size: 14px;
+  line-height: 1.5;
   color: #333;
   margin: 0;
 }
 
-.radar-bot-insights {
+.compact-radar-bot-insights {
   background: white;
-  padding: 15px;
-  border-radius: 10px;
-  margin-top: 15px;
+  padding: 10px;
+  border-radius: 8px;
+  margin-top: 10px;
   border: 1px solid #E3F2FD;
 }
 
-.radar-insight-item {
+.compact-radar-insight-item {
   display: flex;
   align-items: center;
-  gap: 10px;
-  margin-bottom: 8px;
-  padding: 8px 12px;
+  gap: 8px;
+  margin-bottom: 6px;
+  padding: 6px 10px;
   border-radius: 6px;
   background: #F5F5F5;
-  transition: all 0.3s;
+  font-size: 12px;
 }
 
-.radar-insight-item:hover {
-  background: #E3F2FD;
-  transform: translateX(5px);
-}
-
-.radar-insight-icon {
-  font-size: 20px;
-  width: 30px;
-  text-align: center;
-}
-
-.radar-insight-text {
-  flex-grow: 1;
-  font-size: 14px;
+/* ================= GRILLE DES MÉTRIQUES RADAR COMPACTE ================= */
+.compact-radar-metrics-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  gap: 12px;
+  margin: 15px 0;
 }
 
-/* Légende radar */
-.radar-legend {
-  display: flex;
-  justify-content: center;
-  gap: 25px;
-  margin: 15px 0 25px 0;
-  flex-wrap: wrap;
-  padding: 15px;
+.compact-metric-card {
   background: white;
   border-radius: 10px;
-  border: 1px solid #e0e0e0;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+  padding: 15px;
+  box-shadow: 0 3px 8px rgba(0,0,0,0.08);
+  border-left: 4px solid #1976D2;
+  transition: transform 0.3s;
+  text-align: center;
 }
 
-.legend-item {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 8px 15px;
-  background: #f8f9fa;
-  border-radius: 8px;
-  font-size: 14px;
-  font-weight: 500;
-  transition: transform 0.2s;
+.compact-metric-card:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 5px 15px rgba(0,0,0,0.12);
 }
 
-.legend-item:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 3px 10px rgba(0,0,0,0.1);
+.compact-metric-icon {
+  font-size: 24px;
+  margin-bottom: 8px;
 }
 
-.legend-color {
-  width: 20px;
-  height: 20px;
-  border-radius: 4px;
-  border: 2px solid white;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+.compact-metric-name {
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 5px;
+  font-size: 14px;
 }
 
-.legend-low { 
-  background: linear-gradient(135deg, #e53935, #f44336);
+.compact-metric-value {
+  font-size: 20px;
+  font-weight: bold;
+  color: #1976D2;
+  margin: 5px 0;
 }
 
-.legend-medium { 
-  background: linear-gradient(135deg, #fb8c00, #ff9800);
-}
+.compact-metric-value.high { color: #43A047; }
+.compact-metric-value.medium { color: #FB8C00; }
+.compact-metric-value.low { color: #E53935; }
 
-.legend-high { 
-  background: linear-gradient(135deg, #43a047, #4caf50);
+.compact-metric-description {
+  font-size: 11px;
+  color: #666;
+  margin-top: 5px;
+  line-height: 1.3;
 }
 
-#radar-list {
-  list-style: none;
-  padding: 0;
+/* ================= HEATMAP COMPACT ================= */
+.compact-heatmap-and-indicators {
+  background: white;
+  padding: 15px;
+  border-radius: 12px;
+  border: 1px solid #e0e0e0;
   margin: 15px 0;
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 10px;
-}
-
-#radar-list li {
-  background: #f8f9fa;
-  padding: 10px 15px;
-  border-radius: 8px;
-  font-size: 13px;
-  border-left: 4px solid #1976D2;
-  transition: all 0.3s;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
 }
 
-#radar-list li:hover {
-  background: #e3f2fd;
-  transform: translateX(5px);
-}
-
-#radar-list li .value {
-  font-weight: bold;
-  color: #1976D2;
-  font-size: 14px;
-}
-
-/* ================= HEATMAP ENRICHIE ================= */
-.heatmap-analysis {
-  background: white;
-  padding: 20px;
-  border-radius: 15px;
-  box-shadow: 0 5px 20px rgba(0,0,0,0.08);
-  border: 1px solid #e0e0e0;
-  margin: 10px auto;
+.compact-heatmap-analysis {
+  margin-bottom: 15px;
 }
 
-.analysis-controls {
+.compact-analysis-controls {
   display: flex;
   align-items: center;
-  gap: 15px;
-  margin-bottom: 20px;
-  padding: 15px;
+  gap: 10px;
+  margin-bottom: 15px;
+  padding: 10px;
   background: #f8f9fa;
-  border-radius: 12px;
+  border-radius: 8px;
 }
 
-.analysis-controls label {
+.compact-analysis-controls label {
   font-weight: 600;
   color: #1976D2;
+  font-size: 14px;
 }
 
-.analysis-controls select {
-  padding: 10px 20px;
-  border-radius: 8px;
+.compact-analysis-controls select {
+  padding: 8px 12px;
+  border-radius: 6px;
   border: 2px solid #1976D2;
   background: white;
   color: #333;
   font-weight: 500;
   cursor: pointer;
-  transition: all 0.3s;
   flex-grow: 1;
-  max-width: 300px;
+  font-size: 14px;
 }
 
-.analysis-controls select:hover {
-  border-color: #2196F3;
-  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
+#heatmap {
+  max-width: 100%;
+  height: auto;
+  border-radius: 8px;
 }
 
-#heatmap {
+/* ================= LÉGENDE HEATMAP COMPACTE ================= */
+.compact-enriched-legend {
   background: white;
-  border-radius: 15px;
   padding: 15px;
-  box-shadow: 0 5px 20px rgba(0,0,0,0.08);
+  border-radius: 10px;
   border: 1px solid #e0e0e0;
-  margin: 10px auto;
-  cursor: crosshair;
-}
-
-.enriched-legend {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-  gap: 20px;
-  margin: 20px 0;
-  padding: 20px;
-  background: #f8f9fa;
-  border-radius: 12px;
+  margin: 15px 0;
 }
 
-.legend-section h5 {
+.compact-legend-section h5 {
   color: #1976D2;
-  margin-bottom: 15px;
-  font-size: 16px;
+  margin-bottom: 10px;
+  font-size: 14px;
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 6px;
 }
 
-.legend-grid {
+.compact-legend-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  gap: 10px;
+  gap: 8px;
 }
 
-.legend-item-small {
+.compact-legend-item-small {
   display: flex;
   align-items: center;
-  gap: 8px;
-  font-size: 13px;
+  gap: 6px;
+  font-size: 11px;
 }
 
-.legend-color-small {
-  width: 20px;
-  height: 20px;
+.compact-legend-color-small {
+  width: 16px;
+  height: 16px;
   border-radius: 4px;
   border: 2px solid white;
   box-shadow: 0 2px 4px rgba(0,0,0,0.1);
 }
 
-.persistence-indicators {
+/* ================= INDICATEURS DE PERSÉVÉRANCE COMPACTS ================= */
+.compact-persistence-analysis {
+  background: linear-gradient(135deg, #e3f2fd, #f3e5f5);
+  padding: 15px;
+  border-radius: 10px;
+  border-left: 4px solid #1976D2;
+  margin: 15px 0;
+}
+
+.compact-persistence-indicators {
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 8px;
+  margin-bottom: 10px;
 }
 
-.indicator {
+.compact-indicator {
   display: flex;
   align-items: center;
-  gap: 10px;
-  padding: 10px 15px;
+  gap: 8px;
+  padding: 8px 10px;
   background: white;
-  border-radius: 8px;
-  font-size: 14px;
-  border-left: 4px solid #1976D2;
+  border-radius: 6px;
+  font-size: 12px;
+  border-left: 3px solid #1976D2;
 }
 
-.indicator-dot {
-  width: 12px;
-  height: 12px;
+.compact-indicator-dot {
+  width: 10px;
+  height: 10px;
   border-radius: 50%;
 }
 
-.persistence-analysis {
-  background: linear-gradient(135deg, #e3f2fd, #f3e5f5);
-  padding: 20px;
-  border-radius: 12px;
-  margin-top: 20px;
-  border-left: 6px solid #1976D2;
-}
-
-.persistence-analysis h5 {
-  color: #1976D2;
-  margin-top: 0;
-  margin-bottom: 15px;
-  font-size: 16px;
-  display: flex;
-  align-items: center;
-  gap: 8px;
+.compact-persistence-text {
+  font-size: 12px;
+  line-height: 1.4;
 }
 
-.persistence-analysis > div {
-  margin-bottom: 10px;
-  padding: 10px;
+.compact-persistence-text > div {
+  margin-bottom: 6px;
+  padding: 8px;
   background: white;
-  border-radius: 8px;
+  border-radius: 6px;
   border-left: 3px solid #1976D2;
 }
 
-.persistence-analysis strong {
-  color: #333;
-  margin-right: 10px;
-}
-
-.recommendation-box {
-  background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
-  border-left-color: #43A047 !important;
-  padding: 15px;
-}
-
 /* ================= ONGLET 3: MESSAGE RÉFLEXIF ET ÉVALUATION ================= */
 #tab-evaluation #reflagent {
   background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
@@ -1075,19 +903,6 @@ textarea:focus {
     padding: 20px;
   }
   
-  #radar-container {
-    flex-direction: column;
-  }
-  
-  #radar, .metacognition-panel {
-    min-width: 100%;
-    max-width: 100%;
-  }
-  
-  .enriched-legend {
-    grid-template-columns: 1fr;
-  }
-  
   .tabs {
     flex-direction: column;
   }
@@ -1118,50 +933,40 @@ textarea:focus {
     justify-content: center;
   }
   
-  .analysis-controls {
-    flex-direction: column;
-    align-items: stretch;
-  }
-  
-  .radar-legend {
+  .gdpr-options {
     flex-direction: column;
-    align-items: center;
     gap: 10px;
   }
   
-  #radar-list {
-    grid-template-columns: 1fr;
-  }
-  
-  .legend-grid {
-    grid-template-columns: repeat(2, 1fr);
+  .gdpr-option {
+    min-width: 100%;
   }
   
-  .metacognition-icon {
-    width: 50px;
-    height: 50px;
-    font-size: 26px;
+  .compact-competences-grid {
+    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
   }
   
-  .metacognition-header h4 {
-    font-size: 18px;
+  .compact-radar-metrics-grid {
+    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
   }
   
-  .persistence-indicators {
+  .compact-radar-legend {
     flex-direction: column;
+    align-items: center;
+    gap: 8px;
   }
   
-  .gdpr-options {
-    flex-direction: column;
-    gap: 10px;
+  .compact-legend-grid {
+    grid-template-columns: repeat(2, 1fr);
   }
   
-  .gdpr-option {
-    min-width: 100%;
+  .compact-analysis-controls {
+    flex-direction: column;
+    align-items: stretch;
   }
   
-  .radar-metrics-grid {
-    grid-template-columns: 1fr;
+  .compact-persistence-indicators {
+    flex-direction: column;
   }
 }
 
@@ -1419,7 +1224,7 @@ textarea:focus {
       </div>
     </div>
 
-    <!-- ONGLET 2: DASHBOARD ÉTUDIANT -->
+    <!-- ONGLET 2: DASHBOARD ÉTUDIANT COMPACT -->
     <div id="tab-dashboard" class="tab-content">
       <h3>📝 Manifeste étudiant</h3>
       <div id="manifest-list">
@@ -1430,200 +1235,137 @@ textarea:focus {
 
       <h3>📊 Progression par compétence</h3>
       <div id="competence-bars">
-        <em>Chargement des compétences...</em>
+        <div id="compact-competences">
+          <em>Chargement des compétences...</em>
+        </div>
       </div>
 
-      <!-- LÉGENDE RADAR -->
-      <div class="radar-legend">
-        <div class="legend-item">
-          <div class="legend-color legend-low"></div>
+      <!-- LÉGENDE RADAR COMPACTE -->
+      <div class="compact-radar-legend">
+        <div class="compact-legend-item">
+          <div class="compact-legend-color compact-legend-low"></div>
           <span>Faible (0-50%)</span>
         </div>
-        <div class="legend-item">
-          <div class="legend-color legend-medium"></div>
+        <div class="compact-legend-item">
+          <div class="compact-legend-color compact-legend-medium"></div>
           <span>Moyen (50-70%)</span>
         </div>
-        <div class="legend-item">
-          <div class="legend-color legend-high"></div>
+        <div class="compact-legend-item">
+          <div class="compact-legend-color compact-legend-high"></div>
           <span>Élevé (70-100%)</span>
         </div>
       </div>
       
       <h3>🕸️ Radar – Learning Analytics</h3>
 
-      <!-- Grille des métriques radar -->
-      <div class="radar-metrics-grid" id="radar-metrics-grid">
-        <div class="metric-card">
-          <div class="metric-icon">🚀</div>
-          <div class="metric-name">Démarrage des activités</div>
-          <div class="metric-value high">85%</div>
-          <div class="metric-description">Rapidité d'initiation des tâches</div>
-        </div>
-        
-        <div class="metric-card">
-          <div class="metric-icon">🎓</div>
-          <div class="metric-name">Connaissances validées</div>
-          <div class="metric-value high">72%</div>
-          <div class="metric-description">Acquis démontrés et évalués</div>
-        </div>
-        
-        <div class="metric-card">
-          <div class="metric-icon">📈</div>
-          <div class="metric-name">Niveau moyen de compétence</div>
-          <div class="metric-value medium">68%</div>
-          <div class="metric-description">Moyenne des compétences maîtrisées</div>
-        </div>
-        
-        <div class="metric-card">
-          <div class="metric-icon">🎯</div>
-          <div class="metric-name">Taux d'erreur (inversé)</div>
-          <div class="metric-value low">35%</div>
-          <div class="metric-description">Précision et attention aux détails</div>
-        </div>
-        
-        <div class="metric-card">
-          <div class="metric-icon">🏁</div>
-          <div class="metric-name">Achèvement des activités</div>
-          <div class="metric-value high">74%</div>
-          <div class="metric-description">Terminaison des tâches initiées</div>
-        </div>
-        
-        <div class="metric-card">
-          <div class="metric-icon">📚</div>
-          <div class="metric-name">Interactions avec les ressources</div>
-          <div class="metric-value high">80%</div>
-          <div class="metric-description">Utilisation des supports d'apprentissage</div>
-        </div>
-        
-        <div class="metric-card">
-          <div class="metric-icon">🔧</div>
-          <div class="metric-name">Domaines de compétence</div>
-          <div class="metric-value high">78%</div>
-          <div class="metric-description">Étendue des compétences couvertes</div>
-        </div>
+      <!-- Grille des métriques radar compacte -->
+      <div class="compact-radar-metrics-grid" id="compact-radar-metrics-grid">
+        <!-- Les métriques seront ajoutées dynamiquement -->
       </div>
       
-      <!-- Message Bot Radar Contextuel -->
-      <div id="radar-bot-message" class="radar-bot-message" style="display: none;">
-        <div class="radar-bot-header">
-          <div class="radar-bot-icon">🎯</div>
-          <h4 class="radar-bot-title">Analyse de Profil</h4>
-        </div>
-        <p class="radar-bot-content" id="radar-bot-content">Analyse en cours...</p>
-        <div class="radar-bot-insights">
-          <div id="radar-bot-insights">
-            <!-- Les insights seront ajoutés dynamiquement -->
-          </div>
-        </div>
-      </div>
-      
-      <!-- Container Radar + Métacognition -->
+      <!-- Container Radar et Bot Message -->
       <div id="radar-container">
-        <!-- Canvas pour le radar -->
-        <canvas id="radar" width="700" height="700"></canvas>
-        
-        <!-- Panel de Métacognition -->
-        <div class="metacognition-panel">
-          <div class="metacognition-header">
-            <div class="metacognition-icon">🧠</div>
-            <h4>Métacognition & Engagement</h4>
-          </div>
-          
-          <div class="metacognition-content">
-            <div class="metacognition-message" id="metacognitionMessage">
-              <strong>Analyse de votre engagement :</strong><br>
-              Votre profil d'apprentissage est en cours d'analyse...
+        <div style="display: flex; gap: 20px; flex-wrap: wrap;">
+          <!-- Message Bot Radar Compact -->
+          <div class="compact-radar-bot-message" style="flex: 1; min-width: 300px;">
+            <div class="compact-radar-bot-header">
+              <div class="compact-radar-bot-icon">🎯</div>
+              <h4 class="compact-radar-bot-title">Analyse de Profil</h4>
             </div>
-            
-            <div class="metacognition-questions">
-              <h5>Questions pour votre réflexion :</h5>
-              <ul id="metacognitionQuestions">
-                <li>Quelle est votre stratégie pour commencer une nouvelle activité ?</li>
-                <li>Comment gérez-vous les difficultés rencontrées ?</li>
-                <li>Qu'avez-vous appris sur votre manière d'apprendre ?</li>
-              </ul>
+            <p class="compact-radar-bot-content" id="compact-radar-bot-content">Analyse en cours...</p>
+            <div class="compact-radar-bot-insights">
+              <div id="compact-radar-bot-insights">
+                <!-- Les insights seront ajoutés dynamiquement -->
+              </div>
             </div>
           </div>
+          
+          <!-- Canvas Radar Compact -->
+          <div style="flex: 1; min-width: 300px; text-align: center;">
+            <canvas id="radar" width="500" height="500" style="max-width: 100%; height: auto;"></canvas>
+          </div>
         </div>
       </div>
 
-      <div id="radar-tooltip" class="tooltip"></div>
-
-      <!-- ================= HEATMAP ENRICHIE ================= -->
-      <div class="heatmap-analysis">
+      <!-- HEATMAP COMPACTE -->
+      <div class="compact-heatmap-and-indicators">
         <h3>🔥 Heatmap d'activité - Analyse de Persévérance</h3>
         
-        <div class="analysis-controls">
-          <label for="persistenceMode">Mode d'analyse :</label>
-          <select id="persistenceMode" onchange="changePersistenceAnalysis()">
-            <option value="regularity">📊 Régularité du travail</option>
-            <option value="effortPattern">🔄 Schéma d'effort</option>
-            <option value="deadline">⏰ Gestion des échéances</option>
-            <option value="combined">🎯 Vue combinée</option>
-          </select>
+        <div class="compact-heatmap-analysis">
+          <div class="compact-analysis-controls">
+            <label for="persistenceMode">Mode d'analyse :</label>
+            <select id="persistenceMode" onchange="changePersistenceAnalysis()">
+              <option value="regularity">📊 Régularité du travail</option>
+              <option value="effortPattern">🔄 Schéma d'effort</option>
+              <option value="deadline">⏰ Gestion des échéances</option>
+              <option value="combined">🎯 Vue combinée</option>
+            </select>
+          </div>
+          
+          <!-- Canvas pour le heatmap -->
+          <canvas id="heatmap" width="800" height="250" style="max-width: 100%; height: auto;"></canvas>
         </div>
         
-        <!-- Canvas pour le heatmap -->
-        <canvas id="heatmap" width="800" height="300"></canvas>
-        
-        <!-- Légende enrichie -->
-        <div class="enriched-legend">
-          <div class="legend-section">
+        <!-- Légende des niveaux d'activité compacte -->
+        <div class="compact-enriched-legend">
+          <div class="compact-legend-section">
             <h5>📈 Niveaux d'activité</h5>
-            <div class="legend-grid">
-              <div class="legend-item-small">
-                <div class="legend-color-small" style="background:#EBEDF0;"></div>
+            <div class="compact-legend-grid">
+              <div class="compact-legend-item-small">
+                <div class="compact-legend-color-small" style="background:#EBEDF0;"></div>
                 <span>Aucune activité</span>
               </div>
-              <div class="legend-item-small">
-                <div class="legend-color-small" style="background:#C6E48B;"></div>
+              <div class="compact-legend-item-small">
+                <div class="compact-legend-color-small" style="background:#C6E48B;"></div>
                 <span>Faible activité</span>
               </div>
-              <div class="legend-item-small">
-                <div class="legend-color-small" style="background:#7BC96F;"></div>
-                <span>Activité modérée</span>
-              </div>
-              <div class="legend-item-small">
-                <div class="legend-color-small" style="background:#239A3B;"></div>
-                <span>Activité élevée</span>
-              </div>
-              <div class="legend-item-small">
-                <div class="legend-color-small" style="background:#196127;"></div>
-                <span>Activité intense</span>
-              </div>
-            </div>
-          </div>
-          
-          <div class="legend-section">
-            <h5>🎯 Indicateurs de Persévérance</h5>
-            <div class="persistence-indicators">
-              <div class="indicator">
-                <span class="indicator-dot" style="background:#FF6B6B;"></span>
-                <span>Régularité : <strong id="regularityScore">-</strong></span>
+              <div class="compact-legend-item-small">
+                <div class="compact-legend-color-small" style="background:#7BC96F;"></div>
+                <span>Activité modérée</span>
               </div>
-              <div class="indicator">
-                <span class="indicator-dot" style="background:#4ECDC4;"></span>
-                <span>Schéma d'effort : <strong id="effortPattern">-</strong></span>
+              <div class="compact-legend-item-small">
+                <div class="compact-legend-color-small" style="background:#239A3B;"></div>
+                <span>Activité élevée</span>
               </div>
-              <div class="indicator">
-                <span class="indicator-dot" style="background:#FFD166;"></span>
-                <span>Gestion échéances : <strong id="deadlineScore">-</strong></span>
+              <div class="compact-legend-item-small">
+                <div class="compact-legend-color-small" style="background:#196127;"></div>
+                <span>Activité intense</span>
               </div>
             </div>
           </div>
         </div>
         
-        <!-- Analyse de persévérance -->
-        <div class="persistence-analysis" id="persistenceAnalysis">
-          <h5>📋 Analyse de la Persévérance</h5>
-          <div id="regularityAnalysis">
-            <strong>Régularité du travail :</strong> <span id="regularityText">Analyse en cours...</span>
-          </div>
-          <div id="patternAnalysis">
-            <strong>Schéma d'effort identifié :</strong> <span id="patternText">Analyse en cours...</span>
+        <!-- Analyse de persévérance compacte -->
+        <div class="compact-persistence-analysis" id="compact-persistenceAnalysis">
+          <h5>🎯 Indicateurs de Persévérance</h5>
+          <div class="compact-persistence-indicators">
+            <div class="compact-indicator">
+              <span class="compact-indicator-dot" style="background:#FF6B6B;"></span>
+              <span>Régularité calculée : <strong id="compact-regularityScore">-</strong></span>
+            </div>
+            <div class="compact-indicator">
+              <span class="compact-indicator-dot" style="background:#4ECDC4;"></span>
+              <span>Schéma d'effort : <strong id="compact-effortPattern">-</strong></span>
+            </div>
+            <div class="compact-indicator">
+              <span class="compact-indicator-dot" style="background:#FFD166;"></span>
+              <span>Gestion échéances : <strong id="compact-deadlineScore">-</strong></span>
+            </div>
           </div>
-          <div id="recommendation" class="recommendation-box">
-            <strong>🔄 Recommandations :</strong> <span id="recommendationText">Analyse en cours...</span>
+          
+          <div class="compact-persistence-text" style="margin-top: 10px;">
+            <div style="margin-bottom: 10px;">
+              <strong>Schéma d'effort :</strong> 
+              <div style="margin-top: 5px; padding: 8px; background: #F5F5F5; border-radius: 6px; font-size: 13px;">
+                <span id="compact-patternText">Analyse en cours...</span>
+              </div>
+            </div>
+            <div>
+              <strong>Persévérance et gestion des efforts :</strong> 
+              <div style="margin-top: 5px; padding: 10px; background: #F8F9FA; border-radius: 6px; border-left: 3px solid #1976D2;">
+                <span id="compact-regularityText">Analyse en cours...</span>
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -1777,6 +1519,90 @@ const trustWeights = {
   "SM": 0.20 
 };
 
+// MAPPING PERSÉVÉRANCE PAR PROFIL
+const perseveranceProfiles = {
+  "Étudiant engagé": {
+    level: "Très élevée",
+    interpretation: "Efforts constants et durables, persévère même face aux difficultés",
+    color: "#43A047"
+  },
+  "Étudiant actif mais inefficace": {
+    level: "Moyenne",
+    interpretation: "Efforts importants mais mal régulés, persévérance peu productive",
+    color: "#FB8C00"
+  },
+  "Étudiant orienté vers le succès": {
+    level: "Élevée",
+    interpretation: "Persévérance principalement guidée par l'atteinte des objectifs",
+    color: "#4CAF50"
+  },
+  "Étudiant motivé": {
+    level: "Élevée",
+    interpretation: "Engagement soutenu et continuité stable de l'effort",
+    color: "#4CAF50"
+  },
+  "Étudiant surmotivé": {
+    level: "Très élevée",
+    interpretation: "Effort intense, parfois excessif, avec risque de surcharge",
+    color: "#43A047"
+  },
+  "Étudiant stratégique": {
+    level: "Élevée",
+    interpretation: "Effort bien dosé, persévérance optimisée selon le rendement attendu",
+    color: "#4CAF50"
+  },
+  "Étudiant en amélioration": {
+    level: "Moyenne à élevée",
+    interpretation: "Efforts croissants, persévérance en cours de structuration",
+    color: "#FF9800"
+  },
+  "Étudiant en difficulté": {
+    level: "Faible",
+    interpretation: "Découragement fréquent et difficulté à maintenir l'effort",
+    color: "#E53935"
+  },
+  "Étudiant évitant l'échec": {
+    level: "Moyenne",
+    interpretation: "Persévérance motivée par la peur de l'échec plutôt que par l'apprentissage",
+    color: "#FB8C00"
+  },
+  "Étudiant à risque": {
+    level: "Très faible",
+    interpretation: "Abandon rapide et très faible tolérance à l'effort",
+    color: "#C62828"
+  },
+  "Étudiant en progression": {
+    level: "Élevée",
+    interpretation: "Efforts réguliers et de mieux en mieux maîtrisés",
+    color: "#4CAF50"
+  },
+  "Étudiant acceptant l'échec": {
+    level: "Élevée",
+    interpretation: "Bonne résilience, persévère malgré les erreurs et les échecs",
+    color: "#4CAF50"
+  },
+  "Étudiant inactif": {
+    level: "Très faible",
+    interpretation: "Manque d'engagement, difficulté à initier et maintenir l'effort",
+    color: "#C62828"
+  },
+  "Étudiant non engagé": {
+    level: "Faible",
+    interpretation: "Manque de motivation, efforts sporadiques et peu soutenus",
+    color: "#E53935"
+  },
+  "Étudiant persévérant": {
+    level: "Élevée",
+    interpretation: "Constance dans l'effort malgré les doutes et difficultés",
+    color: "#4CAF50"
+  },
+  "Étudiant actif": {
+    level: "Moyenne",
+    interpretation: "Efforts soutenus mais parfois désorganisés ou mal canalisés",
+    color: "#FB8C00"
+  }
+};
+
 // ================= INIT =================
 document.addEventListener("DOMContentLoaded", () => {
   console.log("✅ DOM chargé, initialisation...");
@@ -1876,7 +1702,6 @@ function loadScenarios() {
     });
 }
 
-// ================= CHARGER SCÉNARIO =================
 // ================= CHARGER SCÉNARIO =================
 function loadScenario(index) {
   console.log("Chargement scénario", index);
@@ -1891,59 +1716,13 @@ function loadScenario(index) {
   // Mettre à jour le manifeste
   document.getElementById("manifest-list").innerHTML = `
     <div class="manifest-item">
-         <b>Type de Manifest :</b> ${s.manifest.type}<br>
+      <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>`;
 
-  // Version minimaliste des compétences
-  const c = document.getElementById("competence-bars");
-  c.innerHTML = "";
-
-  const columnsContainer = document.createElement("div");
-  columnsContainer.style.display = "flex";
-  columnsContainer.style.flexWrap = "wrap";
-  columnsContainer.style.gap = "20px";
-
-  const columnGroups = [4, 4, 3, 3];
-  let currentIndex = 0;
-
-  columnGroups.forEach((groupSize) => {
-    const column = document.createElement("div");
-    column.style.flex = "1";
-    column.style.minWidth = "200px";
-    
-    for (let i = 0; i < groupSize && currentIndex < s.competences.length; i++) {
-      const cp = s.competences[currentIndex];
-      
-      const compItem = document.createElement("div");
-      compItem.style.marginBottom = "15px";
-      
-      let color;
-      if (cp.value < 50) color = '#E53935';
-      else if (cp.value < 70) color = '#FB8C00';
-      else color = '#43A047';
-      
-      compItem.innerHTML = `
-        <div style="margin-bottom: 5px; font-weight: bold; font-size: 14px;">
-          ${cp.label}
-        </div>
-        <div style="height: 20px; background: #e0e0e0; border-radius: 10px; overflow: hidden;">
-          <div style="height: 100%; width: ${cp.value}%; background: ${color}; 
-               display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px;">
-            ${cp.value}%
-          </div>
-        </div>
-      `;
-      
-      column.appendChild(compItem);
-      currentIndex++;
-    }
-    
-    columnsContainer.appendChild(column);
-  });
-
-  c.appendChild(columnsContainer);
+  // Mettre à jour les compétences compactes
+  updateCompactCompetences(s.competences);
 
   // Mettre à jour le radar avec les nouvelles métriques
   if (s.radar && s.radar.length > 0) {
@@ -1961,20 +1740,20 @@ function loadScenario(index) {
     });
   }
   
-  // Mettre à jour la grille des métriques radar
-  updateRadarMetricsGrid();
+  // Mettre à jour la grille des métriques radar compacte
+  updateCompactRadarMetricsGrid();
   
   // Mettre à jour le graphique radar
   drawRadar();
   
-  // Mettre à jour le message bot radar (CONTEXTUEL)
-  updateRadarBotMessage(s);
-  
-  // Mettre à jour le panel de métacognition
-  updateMetacognitionPanel(s);
+  // Mettre à jour le message bot radar compact
+  updateCompactRadarBotMessage(s);
 
-  // Mettre à jour la heatmap enrichie
-  drawEnrichedHeatmap(s);
+  // Mettre à jour la heatmap enrichie compacte
+  drawCompactEnrichedHeatmap(s);
+  
+  // Mettre à jour la persévérance spécifique au profil
+  updatePerseveranceProfile(s.title);
 
   // Mettre à jour le message ReflAgent
   document.getElementById("reflagent").textContent = s.reflAgent;
@@ -1986,12 +1765,47 @@ function loadScenario(index) {
   updateStats();
 }
 
-// ================= MISE À JOUR DE LA GRILLE DES MÉTRIQUES RADAR =================
-function updateRadarMetricsGrid() {
-  const grid = document.getElementById("radar-metrics-grid");
+// ================= FONCTIONS POUR LA VERSION COMPACTE =================
+
+// Mettre à jour les compétences compactes
+function updateCompactCompetences(competences) {
+  const container = document.getElementById("compact-competences");
+  if (!container) return;
+  
+  container.innerHTML = '';
+  
+  competences.forEach(comp => {
+    // Déterminer la couleur selon la valeur
+    let color;
+    if (comp.value < 50) color = '#E53935';
+    else if (comp.value < 70) color = '#FB8C00';
+    else color = '#43A047';
+    
+    // Créer l'élément de compétence
+    const compItem = document.createElement('div');
+    compItem.className = 'compact-competence-item';
+    compItem.innerHTML = `
+      <div class="compact-competence-label">
+        <span>${comp.label}</span>
+        <span>${comp.value}%</span>
+      </div>
+      <div class="compact-competence-bar">
+        <div class="compact-competence-fill" style="width: ${comp.value}%; background: ${color};">
+          ${comp.value >= 10 ? comp.value + '%' : ''}
+        </div>
+      </div>
+    `;
+    
+    container.appendChild(compItem);
+  });
+}
+
+// Mettre à jour la grille des métriques radar compacte
+function updateCompactRadarMetricsGrid() {
+  const grid = document.getElementById("compact-radar-metrics-grid");
   if (!grid) return;
   
-  grid.innerHTML = "";
+  grid.innerHTML = '';
   
   radarMetrics.forEach(metric => {
     // Déterminer la classe de couleur selon la valeur
@@ -2006,413 +1820,133 @@ function updateRadarMetricsGrid() {
     else if (metric.label.includes("Connaissances")) icon = "🎓";
     else if (metric.label.includes("Niveau moyen")) icon = "📈";
     else if (metric.label.includes("Taux d'erreur")) icon = "🎯";
-    else if (metric.label.includes("Achèvement")) icon = "🏁";
-    else if (metric.label.includes("Interactions")) icon = "📚";
-    else if (metric.label.includes("Domaines")) icon = "🔧";
-    
-    // Déterminer la description
-    let description = "";
-    if (metric.label.includes("Démarrage")) description = "Rapidité d'initiation des tâches";
-    else if (metric.label.includes("Connaissances")) description = "Acquis démontrés et évalués";
-    else if (metric.label.includes("Niveau moyen")) description = "Moyenne des compétences maîtrisées";
-    else if (metric.label.includes("Taux d'erreur")) description = "Précision et attention aux détails";
-    else if (metric.label.includes("Achèvement")) description = "Terminaison des tâches initiées";
-    else if (metric.label.includes("Interactions")) description = "Utilisation des supports d'apprentissage";
-    else if (metric.label.includes("Domaines")) description = "Étendue des compétences couvertes";
-    
-    const metricCard = document.createElement("div");
-    metricCard.className = "metric-card";
-    metricCard.innerHTML = `
-      <div class="metric-icon">${icon}</div>
-      <div class="metric-name">${metric.label}</div>
-      <div class="metric-value ${colorClass}">${metric.value}%</div>
-      <div class="metric-description">${description}</div>
-    `;
-    
-    grid.appendChild(metricCard);
-  });
-}
-
-// ================= 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;
-}
-
-// ================= BOUTON LECTURE CROISÉE =================
-document.getElementById('crossReadersBtn').onclick = () => {
-  console.log('Navigation vers la page de lecture croisée...');
-  
-  // Animation de transition
-  const reflectionDiv = document.getElementById('reflection');
-  if (reflectionDiv) {
-    reflectionDiv.style.opacity = '0.7';
-    reflectionDiv.style.transition = 'opacity 0.3s ease';
-  }
-  
-  // Redirection
-  setTimeout(() => {
-    window.location.href = 'cross_reading/cross_readers.html';
-  }, 300);
-};
-
-// ================= MÉTACOGNITION =================
-function updateMetacognitionPanel(scenario) {
-  console.log("Mise à jour du panel métacognition...");
-  
-  // Récupérer les métriques clés
-  const metrics = {};
-  radarMetrics.forEach(item => {
-    metrics[item.label] = item.value;
-  });
-  
-  // Calculer l'engagement global (moyenne des métriques d'activité)
-  const engagementMetrics = [
-    metrics["Démarrage des activités"],
-    metrics["Achèvement des activités"],
-    metrics["Interactions avec les ressources"],
-    metrics["Connaissances validées"]
-  ].filter(v => v !== undefined);
-  
-  const avgEngagement = engagementMetrics.length > 0 
-    ? Math.round(engagementMetrics.reduce((a, b) => a + b) / engagementMetrics.length)
-    : 0;
-  
-  // Générer le message de métacognition
-  generateMetacognitionMessage(metrics, avgEngagement, scenario);
-}
-
-function generateMetacognitionMessage(metrics, avgEngagement, scenario) {
-  const messageElement = document.getElementById("metacognitionMessage");
-  const questionsElement = document.getElementById("metacognitionQuestions");
-  
-  if (!messageElement || !questionsElement) return;
-  
-  // Générer le message personnalisé
-  let message = `<strong>Analyse de votre engagement :</strong><br>`;
-  
-  // Ajouter une conclusion basée sur le niveau d'engagement
-  if (avgEngagement >= 70) {
-    message += `Excellent niveau d'engagement global (${avgEngagement}%) ! Vous maintenez une participation active et régulière.`;
-  } else if (avgEngagement >= 40) {
-    message += `Niveau d'engagement modéré (${avgEngagement}%). Des ajustements pourraient optimiser votre apprentissage.`;
-  } else {
-    message += `Engagement faible (${avgEngagement}%). Pensez à identifier ce qui pourrait relancer votre motivation.`;
-  }
-  
-  // Mettre à jour le message
-  messageElement.innerHTML = message;
-  
-  // Questions fixes
-  const questions = [
-    "Quelle est votre stratégie pour commencer une nouvelle activité ?",
-    "Comment gérez-vous les difficultés rencontrées ?",
-    "Qu'avez-vous appris sur votre manière d'apprendre ?"
-  ];
-  
-  // Mettre à jour les questions
-  questionsElement.innerHTML = "";
-  questions.forEach(question => {
-    const li = document.createElement("li");
-    li.textContent = question;
-    questionsElement.appendChild(li);
-  });
-  
-  console.log("Panel métacognition mis à jour pour le scénario", scenario.id);
-}
-
-// ================= MESSAGE BOT RADAR CONTEXTUEL =================
-function updateRadarBotMessage(scenario) {
-  const radarBotMessage = document.getElementById("radar-bot-message");
-  const radarBotContent = document.getElementById("radar-bot-content");
-  const radarBotInsights = document.getElementById("radar-bot-insights");
-  
-  if (!radarBotMessage || !radarBotContent || !radarBotInsights) return;
-  
-  // Messages pour chaque profil basé sur le titre du scénario
-  const profileMessages = {
-    "Étudiant engagé": {
-      title: "Étudiant Engagé et Motivé",
-      message: "🎯 Ton engagement est impressionnant ! Tu démontres une forte volonté d'apprendre. Continue à canaliser cette énergie vers des objectifs clairs.",
-      insights: [
-        { icon: "🔥", text: "Motivation élevée et constante" },
-        { icon: "🎯", text: "Objectifs d'apprentissage bien définis" },
-        { icon: "📚", text: "Implication active dans les activités" },
-        { icon: "💪", text: "Persévérance face aux difficultés" }
-      ]
-    },
-    "Étudiant actif mais inefficace": {
-      title: "Étudiant Actif mais Peu Efficace",
-      message: "⚡ Tu es très actif, mais l'efficacité pourrait être améliorée. Concentre-toi sur la qualité plutôt que la quantité de travail.",
-      insights: [
-        { icon: "🏃", text: "Activité élevée mais peu ciblée" },
-        { icon: "🎯", text: "Besoin de stratégies d'apprentissage plus efficaces" },
-        { icon: "📊", text: "Résultats en deçà des efforts fournis" },
-        { icon: "🔄", text: "Optimisation des méthodes de travail nécessaire" }
-      ]
-    },
-    "Étudiant orienté vers le succès": {
-      title: "Étudiant Orienté Réussite",
-      message: "🏆 Tu vises l'excellence avec détermination. Ta motivation par le succès est un atout, mais attention à ne pas négliger le processus d'apprentissage.",
-      insights: [
-        { icon: "⭐", text: "Fort désir de réussite et de reconnaissance" },
-        { icon: "🎯", text: "Objectifs ambitieux et clairs" },
-        { icon: "📈", text: "Performance supérieure aux attentes" },
-        { icon: "⚖️", text: "Équilibre entre résultats et apprentissage à trouver" }
-      ]
-    },
-    "Étudiant motivé": {
-      title: "Étudiant Nouvellement Motivé",
-      message: "🚀 Ta motivation est un excellent point de départ ! Tu découvres les joies de l'apprentissage. Capitalise sur cet élan pour construire des bases solides.",
-      insights: [
-        { icon: "🌟", text: "Motivation récente et prometteuse" },
-        { icon: "🧱", text: "Construction des bases en cours" },
-        { icon: "📖", text: "Curiosité et ouverture d'esprit" },
-        { icon: "🌱", text: "Potentiel de croissance important" }
-      ]
-    },
-    "Étudiant surmotivé": {
-      title: "Étudiant Surmotivé",
-      message: "💥 Ton niveau d'investissement est exceptionnel, mais attention au risque de surmenage. L'excellence durable nécessite un rythme soutenable.",
-      insights: [
-        { icon: "⚡", text: "Investissement maximal dans toutes les activités" },
-        { icon: "⚠️", text: "Risque de burnout à surveiller" },
-        { icon: "🎯", text: "Perfectionnisme parfois excessif" },
-        { icon: "⚖️", text: "Équilibre vie étudiante/privée à préserver" }
-      ]
-    },
-    "Étudiant stratégique": {
-      title: "Étudiant Stratégique",
-      message: "♟️ Tu abordes l'apprentissage avec intelligence et planification. Tes méthodes efficaces montrent une bonne compréhension des enjeux académiques.",
-      insights: [
-        { icon: "🧠", text: "Approche réfléchie et planifiée" },
-        { icon: "🎯", text: "Optimisation des efforts pour des résultats maximaux" },
-        { icon: "📊", text: "Analyse des retours pour amélioration" },
-        { icon: "⚡", text: "Efficacité démontrée dans l'apprentissage" }
-      ]
-    },
-    "Étudiant en amélioration": {
-      title: "Étudiant en Phase d'Amélioration",
-      message: "📈 Tu progresses régulièrement et montre une belle capacité d'adaptation. Continue à identifier tes points faibles pour les transformer en forces.",
-      insights: [
-        { icon: "📈", text: "Progression constante et mesurable" },
-        { icon: "🔄", text: "Capacité d'adaptation et de remise en question" },
-        { icon: "🎯", text: "Objectifs d'amélioration clairement identifiés" },
-        { icon: "💪", text: "Persévérance dans l'effort d'apprentissage" }
-      ]
-    },
-    "Étudiant en difficulté": {
-      title: "Étudiant Rencontrant des Difficultés",
-      message: "🆘 Tu fais face à des obstacles dans ton apprentissage. C'est normal d'avoir des difficultés - l'important est d'identifier les causes et de chercher du soutien.",
-      insights: [
-        { icon: "⚠️", text: "Difficultés persistantes dans certains domaines" },
-        { icon: "🆘", text: "Besoin d'un soutien adapté identifié" },
-        { icon: "💭", text: "Réflexion sur les causes des difficultés" },
-        { icon: "🤝", text: "Ouverture à l'aide et au soutien" }
-      ]
-    },
-    "Étudiant évitant l'échec": {
-      title: "Étudiant Évitant l'Échec",
-      message: "🛡️ Tu sembles éviter les situations qui pourraient mener à l'échec. Rappelle-toi que l'échec fait partie de l'apprentissage et peut être une source de croissance.",
-      insights: [
-        { icon: "🛡️", text: "Stratégie de protection face aux risques d'échec" },
-        { icon: "🎯", text: "Choix de tâches sécurisantes et maîtrisées" },
-        { icon: "⚠️", text: "Évitement des défis perçus comme risqués" },
-        { icon: "🌱", text: "Potentiel de dépassement de ses limites" }
-      ]
-    },
-    "Étudiant à risque": {
-      title: "Étudiant à Risque de Décrochage",
-      message: "🚨 Certains indicateurs suggèrent un risque de décrochage. Il est important d'agir maintenant pour retrouver un parcours d'apprentissage stable et épanouissant.",
-      insights: [
-        { icon: "🚨", text: "Indicateurs de risque identifiés" },
-        { icon: "⚠️", text: "Engagement fluctuant ou en baisse" },
-        { icon: "🆘", text: "Besoin urgent de soutien et d'accompagnement" },
-        { icon: "🔍", text: "Identification des causes du désengagement" }
-      ]
-    },
-    "Étudiant en progression": {
-      title: "Étudiant en Progression Continue",
-      message: "📊 Tu montres une belle progression dans tes apprentissages. Continue à capitaliser sur tes réussites pour maintenir cette dynamique positive.",
-      insights: [
-        { icon: "📊", text: "Amélioration mesurable des compétences" },
-        { icon: "🎯", text: "Objectifs de progression atteints" },
-        { icon: "🚀", text: "Dynamique d'apprentissage positive" },
-        { icon: "💡", text: "Acquisition de nouvelles stratégies efficaces" }
-      ]
-    },
-    "Étudiant acceptant l'échec": {
-      title: "Étudiant Acceptant l'Échec",
-      message: "😔 Tu sembles avoir accepté certaines difficultés comme inévitables. Pourtant, chaque obstacle peut être surmonté avec la bonne approche et du soutien.",
-      insights: [
-        { icon: "😔", text: "Acceptation passive des difficultés" },
-        { icon: "⚠️", text: "Faible confiance dans sa capacité à progresser" },
-        { icon: "🔄", text: "Besoin de redynamiser la motivation" },
-        { icon: "🌟", text: "Potentiel non exploité identifié" }
-      ]
-    },
-    "Étudiant inactif": {
-      title: "Étudiant Inactif",
-      message: "⏸️ Ton activité d'apprentissage est très limitée. Le premier pas est souvent le plus difficile - commence par de petites actions pour relancer ta motivation.",
-      insights: [
-        { icon: "⏸️", text: "Activité d'apprentissage très réduite" },
-        { icon: "🚪", text: "Éloignement du parcours éducatif" },
-        { icon: "🆘", text: "Besoin d'un accompagnement renforcé" },
-        { icon: "🔓", text: "Potentiel de réengagement à débloquer" }
-      ]
-    },
-    "Étudiant non engagé": {
-      title: "Étudiant Non Engagé",
-      message: "😐 Tu sembles peu engagé dans ton parcours d'apprentissage. Identifier ce qui pourrait te motiver à nouveau serait un premier pas important.",
-      insights: [
-        { icon: "😐", text: "Faible implication dans les activités" },
-        { icon: "🎯", text: "Objectifs personnels à redéfinir" },
-        { icon: "🔄", text: "Besoin de retrouver du sens à l'apprentissage" },
-        { icon: "🌟", text: "Redécouverte des motivations intrinsèques" }
-      ]
-    },
-    "Étudiant persévérant": {
-      title: "Étudiant Persévérant",
-      message: "🏅 Ta persévérance face aux difficultés est remarquable. Continue à avancer pas à pas - chaque effort contribue à ton apprentissage à long terme.",
-      insights: [
-        { icon: "🏅", text: "Persévérance exceptionnelle face aux défis" },
-        { icon: "🐢", text: "Approche patiente et régulière" },
-        { icon: "📈", text: "Progrès constants malgré les obstacles" },
-        { icon: "💪", text: "Résilience et ténacité démontrées" }
-      ]
-    },
-    "Étudiant actif": {
-      title: "Étudiant Actif et Impliqué",
-      message: "🎉 Tu es activement engagé dans ton apprentissage avec une bonne participation. Continue à maintenir ce niveau d'implication pour maximiser tes progrès.",
-      insights: [
-        { icon: "🎉", text: "Participation active et régulière" },
-        { icon: "🤝", text: "Implication dans les activités collaboratives" },
-        { icon: "💡", text: "Contributions pertinentes et réfléchies" },
-        { icon: "🚀", text: "Dynamisme dans les apprentissages" }
-      ]
-    }
-  };
-  
-  // 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...",
-    insights: [
-      { icon: "📊", text: "Évaluation des indicateurs d'apprentissage" },
-      { icon: "🎯", text: "Identification des forces et axes d'amélioration" },
-      { icon: "🚀", text: "Recommandations personnalisées" }
-    ]
-  };
-  
-  // Mettre à jour l'interface
-  radarBotMessage.style.display = 'block';
-  radarBotContent.innerHTML = `<strong>${profileMessage.title}</strong><br>${profileMessage.message}`;
-  
-  // Mettre à jour les insights
-  radarBotInsights.innerHTML = '';
-  profileMessage.insights.forEach(insight => {
-    const insightElement = document.createElement('div');
-    insightElement.className = 'radar-insight-item';
-    insightElement.innerHTML = `
-      <div class="radar-insight-icon">${insight.icon}</div>
-      <div class="radar-insight-text">${insight.text}</div>
-    `;
-    radarBotInsights.appendChild(insightElement);
-  });
-}
-
-// ================= RADAR =================
-function drawRadar() {
-  const canvas = document.getElementById("radar");
-  if (!canvas) {
-    console.error("Canvas radar non trouvé!");
-    return;
-  }
-  
-  const ctx = canvas.getContext("2d");
-  const cx = canvas.width / 2;
-  const cy = canvas.height / 2;
-  const radius = 220;
-  const n = radarMetrics.length;
-
-  ctx.clearRect(0, 0, canvas.width, canvas.height);
-
-  // Dessiner le radar
-  for (let i = 1; i <= 5; i++) {
-    ctx.beginPath();
-    ctx.arc(cx, cy, (radius / 5) * i, 0, 2 * Math.PI);
-    ctx.strokeStyle = "#e0e0e0";
-    ctx.stroke();
-  }
-
-  // Dessiner les axes
-  radarMetrics.forEach((m, i) => {
-    const angle = (2 * Math.PI * i) / n - Math.PI / 2;
-
-    ctx.beginPath();
-    ctx.moveTo(cx, cy);
-    ctx.lineTo(cx + radius * Math.cos(angle), cy + radius * Math.sin(angle));
-    ctx.strokeStyle = "#b0bec5";
-    ctx.stroke();
-
-    // Labels
-    const tx = cx + (radius + 35) * Math.cos(angle);
-    const ty = cy + (radius + 35) * Math.sin(angle);
-
-    ctx.font = "12px Arial";
-    ctx.fillStyle = "#000";
-    ctx.textAlign = angle > Math.PI / 2 || angle < -Math.PI / 2 ? "right" : "left";
-    ctx.textBaseline = "middle";
-    ctx.fillText(`${m.label} : ${m.value}%`, tx, ty);
-  });
-
-  // Dessiner le polygone
-  ctx.beginPath();
-  radarMetrics.forEach((m, i) => {
-    const angle = (2 * Math.PI * i) / n - Math.PI / 2;
-    const r = radius * (m.value / 100);
-    const x = cx + r * Math.cos(angle);
-    const y = cy + r * Math.sin(angle);
-    i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
-  });
-  ctx.closePath();
-
-  ctx.fillStyle = "rgba(25,118,210,0.25)";
-  ctx.fill();
-  ctx.strokeStyle = "#1976D2";
-  ctx.lineWidth = 2;
-  ctx.stroke();
-
-  // Dessiner les points
-  radarMetrics.forEach((m, i) => {
-    const angle = (2 * Math.PI * i) / n - Math.PI / 2;
-    const r = radius * (m.value / 100);
-    const x = cx + r * Math.cos(angle);
-    const y = cy + r * Math.sin(angle);
+    else if (metric.label.includes("Achèvement")) icon = "🏁";
+    else if (metric.label.includes("Interactions")) icon = "📚";
+    else if (metric.label.includes("Domaines")) icon = "🔧";
+    
+    // Déterminer la description
+    let description = "";
+    if (metric.label.includes("Démarrage")) description = "Rapidité d'initiation";
+    else if (metric.label.includes("Connaissances")) description = "Acquis démontrés";
+    else if (metric.label.includes("Niveau moyen")) description = "Moyenne des compétences";
+    else if (metric.label.includes("Taux d'erreur")) description = "Précision et attention";
+    else if (metric.label.includes("Achèvement")) description = "Terminaison des tâches";
+    else if (metric.label.includes("Interactions")) description = "Utilisation supports";
+    else if (metric.label.includes("Domaines")) description = "Étendue couverte";
+    
+    const metricCard = document.createElement("div");
+    metricCard.className = "compact-metric-card";
+    metricCard.innerHTML = `
+      <div class="compact-metric-icon">${icon}</div>
+      <div class="compact-metric-name">${metric.label}</div>
+      <div class="compact-metric-value ${colorClass}">${metric.value}%</div>
+      <div class="compact-metric-description">${description}</div>
+    `;
+    
+    grid.appendChild(metricCard);
+  });
+}
 
-    ctx.beginPath();
-    ctx.arc(x, y, 4, 0, 2 * Math.PI);
-    ctx.fillStyle = "#1976D2";
-    ctx.fill();
+// 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;
+  
+  // Messages pour chaque profil basé sur le titre du scénario
+  const profileMessages = {
+    "Étudiant engagé": {
+      title: "Étudiant Engagé et Motivé",
+      message: "🎯 Ton engagement est impressionnant ! Tu démontres une forte volonté d'apprendre.",
+      insights: [
+        { icon: "🔥", text: "Motivation élevée" },
+        { icon: "🎯", text: "Objectifs bien définis" },
+        { icon: "📚", text: "Implication active" }
+      ]
+    },
+    "Étudiant actif mais inefficace": {
+      title: "Actif mais Peu Efficace",
+      message: "📊 Tu es très actif mais ton taux d'erreur est élevé. Concentre-toi sur une compétence à la fois.",
+      insights: [
+        { icon: "⚡", text: "Activité élevée" },
+        { icon: "⚠️", text: "Erreurs fréquentes" },
+        { icon: "🎯", text: "Focus nécessaire" }
+      ]
+    },
+    "Étudiant orienté vers le succès": {
+      title: "Orientation Réussite",
+      message: "🏆 Tu vises l'excellence avec détermination. Ta rigueur est exemplaire.",
+      insights: [
+        { icon: "⭐", text: "Excellence visée" },
+        { icon: "🎯", text: "Objectifs ambitieux" },
+        { icon: "📈", text: "Performance supérieure" }
+      ]
+    },
+    "Étudiant motivé": {
+      title: "Nouvellement Motivé",
+      message: "🚀 Ta motivation est un excellent point de départ ! Progresse étape par étape.",
+      insights: [
+        { icon: "🌟", text: "Motivation récente" },
+        { icon: "🧱", text: "Construction des bases" },
+        { icon: "📖", text: "Curiosité ouverte" }
+      ]
+    },
+    "Étudiant surmotivé": {
+      title: "Surmotivé - Attention",
+      message: "💥 Ton niveau d'investissement est exceptionnel, attention au risque de surmenage.",
+      insights: [
+        { icon: "⚡", text: "Investissement maximal" },
+        { icon: "⚠️", text: "Risque de burnout" },
+        { icon: "⚖️", text: "Équilibre nécessaire" }
+      ]
+    },
+    "Étudiant stratégique": {
+      title: "Stratégique et Efficient",
+      message: "♟️ Tu abordes l'apprentissage avec intelligence et planification.",
+      insights: [
+        { icon: "🧠", text: "Approche réfléchie" },
+        { icon: "🎯", text: "Optimisation efforts" },
+        { icon: "📊", text: "Analyse des retours" }
+      ]
+    }
+  };
+  
+  // 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...",
+    insights: [
+      { icon: "📊", text: "Évaluation indicateurs" },
+      { icon: "🎯", text: "Forces et améliorations" },
+      { icon: "🚀", text: "Recommandations" }
+    ]
+  };
+  
+  // 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');
+    insightElement.className = 'compact-radar-insight-item';
+    insightElement.innerHTML = `
+      <div class="radar-insight-icon">${insight.icon}</div>
+      <div class="radar-insight-text">${insight.text}</div>
+    `;
+    radarBotInsights.appendChild(insightElement);
   });
 }
 
-// ================= HEATMAP ENRICHIE =================
-function drawEnrichedHeatmap(scenario) {
+// Dessiner la heatmap enrichie compacte
+function drawCompactEnrichedHeatmap(scenario) {
   const canvas = document.getElementById("heatmap");
   if (!canvas) return;
   
   const ctx = canvas.getContext("2d");
-  const cellSize = 25;
-  const padding = 2;
+  const cellSize = 15;
+  const padding = 1;
   const days = ["L", "M", "M", "J", "V", "S", "D"];
   const weeks = 4;
   const totalDays = weeks * 7;
@@ -2422,17 +1956,17 @@ function drawEnrichedHeatmap(scenario) {
   // Titre enrichi
   const scenarioTitles = {
     1: { 
-      title: "Vous êtes engagé mais désorganisé", 
+      title: "Engagé mais désorganisé", 
       emoji: "😅",
       pattern: "Effort concentré avant échéances"
     },
     2: { 
-      title: "Vous êtes actif mais peu efficace", 
+      title: "Actif mais peu efficace", 
       emoji: "😰",
-      pattern: "Démarrage lent avec accélération tardive"
+      pattern: "Démarrage lent, accélération tardive"
     },
     3: { 
-      title: "Vous êtes autonome et stratégique", 
+      title: "Autonome et stratégique", 
       emoji: "😊",
       pattern: "Travail régulier et équilibré"
     }
@@ -2444,17 +1978,17 @@ function drawEnrichedHeatmap(scenario) {
     pattern: "Schéma à analyser"
   };
   
-  ctx.font = "bold 18px Arial";
+  ctx.font = "bold 14px Arial";
   ctx.fillStyle = "#1976D2";
   ctx.textAlign = "center";
-  ctx.fillText(`${scenarioInfo.emoji} ${scenarioInfo.title}`, canvas.width / 2, 30);
+  ctx.fillText(`${scenarioInfo.emoji} ${scenarioInfo.title}`, canvas.width / 2, 20);
   
-  ctx.font = "14px Arial";
+  ctx.font = "12px Arial";
   ctx.fillStyle = "#666";
-  ctx.fillText(`Schéma détecté : ${scenarioInfo.pattern}`, canvas.width / 2, 55);
+  ctx.fillText(`${scenarioInfo.pattern}`, canvas.width / 2, 40);
   
   // Générer les données d'activité selon le scénario
-  const activityData = generatePersistenceData(scenario.id, totalDays);
+  const activityData = generateCompactPersistenceData(scenario.id, totalDays);
   
   // Dessiner la heatmap
   const colors = ["#EBEDF0", "#C6E48B", "#7BC96F", "#239A3B", "#196127"];
@@ -2463,8 +1997,8 @@ function drawEnrichedHeatmap(scenario) {
     const week = Math.floor(day / 7);
     const weekday = day % 7;
     
-    const x = 45 + week * (cellSize * 7 + padding * 7) + weekday * (cellSize + padding);
-    const y = 80 + weekday * (cellSize + padding);
+    const x = 30 + week * (cellSize * 7 + padding * 7) + weekday * (cellSize + padding);
+    const y = 60 + weekday * (cellSize + padding);
     
     const intensity = activityData[day];
     
@@ -2475,42 +2009,72 @@ function drawEnrichedHeatmap(scenario) {
     // Bordure avec indication des échéances (vendredi = jour important)
     if (weekday === 4) { // Vendredi
       ctx.strokeStyle = "#FF6B6B";
-      ctx.lineWidth = 2;
+      ctx.lineWidth = 1.5;
     } else {
       ctx.strokeStyle = intensity > 0 ? "#239A3B" : "#eee";
-      ctx.lineWidth = 1;
+      ctx.lineWidth = 0.5;
     }
     ctx.strokeRect(x, y, cellSize, cellSize);
-    
-    // Indicateur de persévérance (points colorés)
-    if (intensity >= 3) {
-      // Point rouge pour forte activité (indice possible cram)
-      ctx.fillStyle = intensity === 4 ? "#FF6B6B" : "#FFD166";
-      ctx.beginPath();
-      ctx.arc(x + cellSize - 5, y + 5, 3, 0, Math.PI * 2);
-      ctx.fill();
-    }
   }
   
-  // Analyser et afficher les métriques de persévérance
-  analyzePersistenceMetrics(activityData, scenario.id);
+  // Analyser et afficher les métriques de persévérance compactes
+  analyzeCompactPersistenceMetrics(activityData, scenario.id);
+}
+
+// Mettre à jour la persévérance spécifique au profil
+function updatePerseveranceProfile(scenarioTitle) {
+  const profile = perseveranceProfiles[scenarioTitle];
+  
+  if (!profile) {
+    console.warn(`Aucun profil de persévérance trouvé pour: ${scenarioTitle}`);
+    return;
+  }
+  
+  // Mettre à jour l'interface
+  const regularityText = document.getElementById("compact-regularityText");
+  if (regularityText) {
+    regularityText.innerHTML = `
+      <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 5px;">
+        <div style="width: 12px; height: 12px; border-radius: 50%; background: ${profile.color};"></div>
+        <strong style="color: ${profile.color};">${profile.level}</strong>
+      </div>
+      <div style="font-size: 12px; color: #555; line-height: 1.4;">
+        ${profile.interpretation}
+      </div>
+    `;
+  }
+  
+  // Mettre à jour le score de régularité dans les indicateurs
+  const regularityScore = document.getElementById("compact-regularityScore");
+  if (regularityScore) {
+    // Convertir le niveau textuel en pourcentage approximatif
+    let scorePercent;
+    if (profile.level.includes("Très élevée")) scorePercent = "90%";
+    else if (profile.level.includes("Élevée")) scorePercent = "75%";
+    else if (profile.level.includes("Moyenne")) scorePercent = "55%";
+    else if (profile.level.includes("Faible")) scorePercent = "35%";
+    else if (profile.level.includes("Très faible")) scorePercent = "20%";
+    else scorePercent = "50%";
+    
+    regularityScore.textContent = scorePercent;
+    regularityScore.style.color = profile.color;
+  }
 }
 
-// Générer des données de persévérance selon le scénario
-function generatePersistenceData(scenarioId, totalDays) {
+// Générer des données de persévérance compactes
+function generateCompactPersistenceData(scenarioId, totalDays) {
   const data = new Array(totalDays).fill(0);
   
   switch(scenarioId) {
     case 1: // Scénario désorganisé - Effort concentré avant échéances
       for (let i = 0; i < totalDays; i++) {
         const weekday = i % 7;
-        // Effort concentré les jeudis et vendredis (jours 3 et 4)
         if (weekday === 3 || weekday === 4) { // Jeudi et vendredi
-          data[i] = Math.floor(Math.random() * 2) + 3; // 3-4 (forte activité)
+          data[i] = Math.floor(Math.random() * 2) + 3; // 3-4
         } else if (weekday === 5 || weekday === 6) { // Weekend
-          data[i] = Math.floor(Math.random() * 2); // 0-1 (très faible)
+          data[i] = Math.floor(Math.random() * 2); // 0-1
         } else {
-          data[i] = Math.floor(Math.random() * 2) + 1; // 1-2 (faible)
+          data[i] = Math.floor(Math.random() * 2) + 1; // 1-2
         }
       }
       break;
@@ -2519,11 +2083,11 @@ function generatePersistenceData(scenarioId, totalDays) {
       for (let i = 0; i < totalDays; i++) {
         const progress = i / totalDays;
         if (progress < 0.3) {
-          data[i] = Math.floor(Math.random() * 2); // 0-1 (début très faible)
+          data[i] = Math.floor(Math.random() * 2); // 0-1
         } else if (progress > 0.7) {
-          data[i] = Math.floor(Math.random() * 2) + 3; // 3-4 (fin forte)
+          data[i] = Math.floor(Math.random() * 2) + 3; // 3-4
         } else {
-          data[i] = Math.floor(Math.random() * 2) + 1; // 1-2 (milieu faible)
+          data[i] = Math.floor(Math.random() * 2) + 1; // 1-2
         }
       }
       break;
@@ -2531,17 +2095,15 @@ function generatePersistenceData(scenarioId, totalDays) {
     case 3: // Scénario stratégique - Travail régulier
       for (let i = 0; i < totalDays; i++) {
         const weekday = i % 7;
-        // Travail régulier et équilibré toute la semaine
         if (weekday === 5 || weekday === 6) { // Weekend léger
           data[i] = Math.floor(Math.random() * 2); // 0-1
         } else {
-          data[i] = Math.floor(Math.random() * 2) + 2; // 2-3 (régulier)
+          data[i] = Math.floor(Math.random() * 2) + 2; // 2-3
         }
       }
       break;
       
     default:
-      // Pattern par défaut
       for (let i = 0; i < totalDays; i++) {
         data[i] = Math.floor(Math.random() * 5); // 0-4 aléatoire
       }
@@ -2550,185 +2112,163 @@ function generatePersistenceData(scenarioId, totalDays) {
   return data;
 }
 
-// Analyser les métriques de persévérance
-function analyzePersistenceMetrics(activityData, scenarioId) {
+// Analyser les métriques de persévérance compactes
+function analyzeCompactPersistenceMetrics(activityData, scenarioId) {
   const totalDays = activityData.length;
-  const weeks = Math.ceil(totalDays / 7);
   
   // 1. Calculer la régularité (écart-type)
   const avgActivity = activityData.reduce((a, b) => a + b, 0) / totalDays;
   const variance = activityData.reduce((a, b) => a + Math.pow(b - avgActivity, 2), 0) / totalDays;
   const stdDev = Math.sqrt(variance);
-  const regularity = Math.max(0, 100 - stdDev * 25); // Score de 0-100
+  const regularity = Math.max(0, 100 - stdDev * 25);
   
   // 2. Identifier le schéma d'effort
-  let pattern = "Indéterminé";
-  let patternDescription = "";
-  let patternColor = "#666";
+  let pattern = "Régulier";
+  let patternDescription = "Effort équilibré toute la semaine";
   
-  // Analyser la distribution par semaine
+  // Analyser la distribution
   const weeklyPatterns = [];
-  for (let w = 0; w < weeks; w++) {
+  for (let w = 0; w < 4; w++) {
     const weekData = activityData.slice(w * 7, Math.min((w + 1) * 7, totalDays));
     if (weekData.length < 5) continue;
     
     const weekAvg = weekData.reduce((a, b) => a + b, 0) / weekData.length;
     
-    // Vérifier les patterns
     if (weekData[4] > weekAvg * 1.5 && weekData[3] > weekAvg * 1.3) {
-      weeklyPatterns.push("deadline"); // Pic jeudi/vendredi
+      pattern = "Effort concentré";
+      patternDescription = "Pic d'activité jeudi/vendredi";
     } else if (weekData[0] < weekAvg * 0.7 && weekData[4] > weekAvg * 1.2) {
-      weeklyPatterns.push("acceleration"); // Démarrage lent, fin forte
-    } else if (Math.max(...weekData) - Math.min(...weekData) < 1.5) {
-      weeklyPatterns.push("regular"); // Régulier
-    } else if (weekData[5] < weekAvg * 0.5 && weekData[6] < weekAvg * 0.5) {
-      weeklyPatterns.push("weekend_break"); // Pause weekend
-    }
-  }
-  
-  // Déterminer le pattern dominant
-  let dominantPattern = "regular"; // Par défaut
-  if (weeklyPatterns.length > 0) {
-    const patternCounts = weeklyPatterns.reduce((acc, val) => {
-      acc[val] = (acc[val] || 0) + 1;
-      return acc;
-    }, {});
-    
-    dominantPattern = Object.keys(patternCounts).reduce((a, b) => 
-      patternCounts[a] > patternCounts[b] ? a : b, "regular"
-    );
-  }
-  
-  // Associer les descriptions
-  const patternMap = {
-    "regular": {
-      name: "Travail régulier",
-      desc: "Effort équilibré tout au long de la semaine avec une bonne constance",
-      color: "#43A047"
-    },
-    "deadline": {
-      name: "Effort concentré avant échéances",
-      desc: "Pic d'activité marqué les jeudis et vendredis, typique du 'cramming'",
-      color: "#E53935"
-    },
-    "acceleration": {
-      name: "Accélération progressive",
-      desc: "Démarrage lent en début de semaine avec accélération avant les deadlines",
-      color: "#FB8C00"
-    },
-    "weekend_break": {
-      name: "Pause weekend marquée",
-      desc: "Activité réduite le weekend avec reprise en début de semaine",
-      color: "#2196F3"
+      pattern = "Accélération progressive";
+      patternDescription = "Démarrage lent, fin forte";
     }
-  };
-  
-  if (patternMap[dominantPattern]) {
-    pattern = patternMap[dominantPattern].name;
-    patternDescription = patternMap[dominantPattern].desc;
-    patternColor = patternMap[dominantPattern].color;
   }
   
   // 3. Calculer la gestion des échéances
   const deadlineDays = activityData.filter((_, index) => index % 7 === 3 || index % 7 === 4);
   const nonDeadlineDays = activityData.filter((_, index) => index % 7 !== 3 && index % 7 !== 4);
   
-  const deadlineAvg = deadlineDays.length > 0 ? 
-    deadlineDays.reduce((a, b) => a + b, 0) / deadlineDays.length : 0;
-  const nonDeadlineAvg = nonDeadlineDays.length > 0 ? 
-    nonDeadlineDays.reduce((a, b) => a + b, 0) / nonDeadlineDays.length : 0;
-  
   let deadlineScore = 50;
-  if (deadlineAvg > 0 && nonDeadlineAvg > 0) {
-    const ratio = deadlineAvg / nonDeadlineAvg;
-    if (ratio > 1.5) {
-      deadlineScore = Math.min(100, 30 + (ratio - 1.5) * 40);
-    } else if (ratio < 0.8) {
-      deadlineScore = Math.max(0, 70 - (0.8 - ratio) * 50);
-    } else {
-      deadlineScore = 65 + Math.random() * 20;
-    }
-  }
-  
-  // Mettre à jour l'interface
-  document.getElementById("regularityScore").textContent = Math.round(regularity) + "%";
-  document.getElementById("regularityScore").style.color = regularity > 70 ? "#43A047" : regularity > 40 ? "#FB8C00" : "#E53935";
-  
-  document.getElementById("effortPattern").textContent = pattern;
-  document.getElementById("effortPattern").style.color = patternColor;
-  
-  document.getElementById("deadlineScore").textContent = Math.round(deadlineScore) + "%";
-  document.getElementById("deadlineScore").style.color = deadlineScore > 70 ? "#43A047" : deadlineScore > 40 ? "#FB8C00" : "#E53935";
-  
-  // Mettre à jour l'analyse textuelle
-  document.getElementById("regularityText").textContent = 
-    regularity > 75 ? "Excellente régularité ! Travail stable et constant dans le temps" :
-    regularity > 60 ? "Bonne régularité avec quelques variations acceptables" :
-    regularity > 40 ? "Régularité moyenne, rythme de travail avec des hauts et des bas" :
-    "Faible régularité, rythme de travail très irrégulier avec des pics et des creux";
-    
-  document.getElementById("patternText").textContent = patternDescription;
-  
-  // Générer des recommandations personnalisées
-  let recommendations = [];
-  
-  if (regularity < 60) {
-    recommendations.push("Essayez d'établir un planning hebdomadaire fixe avec des créaux réguliers");
-  }
-  
-  if (dominantPattern === "deadline") {
-    recommendations.push("Anticipez les tâches importantes dès le début de semaine plutôt qu'en fin");
-    recommendations.push("Répartissez le travail sur plusieurs jours pour éviter le 'cramming'");
+  if (deadlineDays.length > 0 && nonDeadlineDays.length > 0) {
+    const deadlineAvg = deadlineDays.reduce((a, b) => a + b, 0) / deadlineDays.length;
+    const nonDeadlineAvg = nonDeadlineDays.reduce((a, b) => a + b, 0) / nonDeadlineDays.length;
+    deadlineScore = Math.min(100, Math.max(0, (deadlineAvg / 4) * 100));
   }
   
-  if (dominantPattern === "acceleration") {
-    recommendations.push("Commencez plus tôt dans la semaine pour éviter l'accélération de dernière minute");
-  }
+  // 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) + "%";
   
-  if (deadlineScore < 50) {
-    recommendations.push("Équilibrez mieux votre effort entre les jours avec et sans échéance");
+  // Mettre à jour l'analyse textuelle compacte
+  document.getElementById("compact-patternText").textContent = patternDescription;
+}
+
+// ================= RADAR =================
+function drawRadar() {
+  const canvas = document.getElementById("radar");
+  if (!canvas) {
+    console.error("Canvas radar non trouvé!");
+    return;
   }
   
-  if (recommendations.length === 0) {
-    recommendations.push("Continuez ainsi ! Votre gestion du temps est efficace et équilibrée");
+  const ctx = canvas.getContext("2d");
+  const cx = canvas.width / 2;
+  const cy = canvas.height / 2;
+  const radius = 200;
+  const n = radarMetrics.length;
+
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+  // Dessiner le radar
+  for (let i = 1; i <= 5; i++) {
+    ctx.beginPath();
+    ctx.arc(cx, cy, (radius / 5) * i, 0, 2 * Math.PI);
+    ctx.strokeStyle = "#e0e0e0";
+    ctx.stroke();
   }
-  
-  document.getElementById("recommendationText").textContent = recommendations.join(". ") + ".";
+
+  // Dessiner les axes
+  radarMetrics.forEach((m, i) => {
+    const angle = (2 * Math.PI * i) / n - Math.PI / 2;
+
+    ctx.beginPath();
+    ctx.moveTo(cx, cy);
+    ctx.lineTo(cx + radius * Math.cos(angle), cy + radius * Math.sin(angle));
+    ctx.strokeStyle = "#b0bec5";
+    ctx.stroke();
+
+    // Labels
+    const tx = cx + (radius + 25) * Math.cos(angle);
+    const ty = cy + (radius + 25) * Math.sin(angle);
+
+    ctx.font = "10px Arial";
+    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);
+  });
+
+  // Dessiner le polygone
+  ctx.beginPath();
+  radarMetrics.forEach((m, i) => {
+    const angle = (2 * Math.PI * i) / n - Math.PI / 2;
+    const r = radius * (m.value / 100);
+    const x = cx + r * Math.cos(angle);
+    const y = cy + r * Math.sin(angle);
+    i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
+  });
+  ctx.closePath();
+
+  ctx.fillStyle = "rgba(25,118,210,0.25)";
+  ctx.fill();
+  ctx.strokeStyle = "#1976D2";
+  ctx.lineWidth = 2;
+  ctx.stroke();
+
+  // Dessiner les points
+  radarMetrics.forEach((m, i) => {
+    const angle = (2 * Math.PI * i) / n - Math.PI / 2;
+    const r = radius * (m.value / 100);
+    const x = cx + r * Math.cos(angle);
+    const y = cy + r * Math.sin(angle);
+
+    ctx.beginPath();
+    ctx.arc(x, y, 4, 0, 2 * Math.PI);
+    ctx.fillStyle = "#1976D2";
+    ctx.fill();
+  });
 }
 
-// Changer le mode d'analyse
-function changePersistenceAnalysis() {
-  const mode = document.getElementById("persistenceMode").value;
-  const currentScenario = scenarios[currentScenarioIndex];
-  
-  // Mettre à jour l'affichage selon le mode
-  const analysisDiv = document.getElementById("persistenceAnalysis");
-  const heatmapCanvas = document.getElementById("heatmap");
-  const ctx = heatmapCanvas.getContext("2d");
-  
-  // Effacer et redessiner avec des annotations spécifiques
-  drawEnrichedHeatmap(currentScenario);
-  
-  // Ajouter des annotations spécifiques au mode
-  ctx.font = "14px Arial";
-  ctx.fillStyle = "#1976D2";
-  ctx.textAlign = "center";
+// ================= 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;
+}
+
+// ================= BOUTON LECTURE CROISÉE =================
+document.getElementById('crossReadersBtn').onclick = () => {
+  console.log('Navigation vers la page de lecture croisée...');
   
-  switch(mode) {
-    case "regularity":
-      ctx.fillText("📊 Analyse de la régularité - Écart-type des activités", heatmapCanvas.width / 2, 280);
-      break;
-    case "effortPattern":
-      ctx.fillText("🔄 Identification du schéma d'effort dominant", heatmapCanvas.width / 2, 280);
-      break;
-    case "deadline":
-      ctx.fillText("⏰ Focus sur la gestion des échéances (jeudis/vendredis)", heatmapCanvas.width / 2, 280);
-      break;
-    case "combined":
-      ctx.fillText("🎯 Vue combinée : Régularité + Schéma + Échéances", heatmapCanvas.width / 2, 280);
-      break;
+  // Animation de transition
+  const reflectionDiv = document.getElementById('reflection');
+  if (reflectionDiv) {
+    reflectionDiv.style.opacity = '0.7';
+    reflectionDiv.style.transition = 'opacity 0.3s ease';
   }
-}
+  
+  // Redirection
+  setTimeout(() => {
+    window.location.href = 'cross_reading/cross_readers.html';
+  }, 300);
+};
 
 // ================= MÉTRIQUES DE CONFIANCE =================
 function initTrustStars(){
@@ -2897,7 +2437,6 @@ function initTrustSave(){
     // Récupérer les informations conditionnelles
     let evaluatorName = "";
     let evaluatorRole = "";
-    let evaluatorInstitution = "";
     let expertiseLevel = "";
     let messageMastery = "";
     
@@ -3181,50 +2720,44 @@ function showNotification(title, message, type = "info") {
   }
 }
 
-// Fonction de test
-window.testTrustMetrics = function() {
-  console.log("=== TEST MÉTRIQUES DE CONFIANCE ===");
+// Changer le mode d'analyse de persévérance
+function changePersistenceAnalysis() {
+  const mode = document.getElementById("persistenceMode").value;
+  const currentScenario = scenarios[currentScenarioIndex];
   
-  // Tester quelques combinaisons
-  const tests = [
-    { nom: "Parfait", valeurs: { AR: 5, AE: 5, ESR: 5, SDM: 5, SM: 5 } },
-    { nom: "Moyen", valeurs: { AR: 3, AE: 3, ESR: 3, SDM: 3, SM: 3 } },
-    { nom: "Faible", valeurs: { AR: 1, AE: 2, ESR: 1, SDM: 2, SM: 1 } },
-    { nom: "Mixte", valeurs: { AR: 5, AE: 4, ESR: 3, SDM: 2, SM: 1 } }
-  ];
+  // Redessiner la heatmap avec le mode sélectionné
+  drawCompactEnrichedHeatmap(currentScenario);
   
-  tests.forEach(test => {
-    console.log(`\nTest: ${test.nom}`);
-    
-    // Appliquer les valeurs
-    for (const metric in test.valeurs) {
-      if (trustMetrics.hasOwnProperty(metric)) {
-        trustMetrics[metric] = test.valeurs[metric];
-      }
-    }
-    
-    // Calculer
-    const score = updateTrustBar();
-    console.log(`Résultat: ${score}%`);
-    
-    // Réinitialiser pour le prochain test
-    for (const metric in trustMetrics) {
-      trustMetrics[metric] = 0;
-    }
-  });
+  // Ajouter une annotation selon le mode
+  const canvas = document.getElementById("heatmap");
+  const ctx = canvas.getContext("2d");
   
-  console.log("=== FIN TESTS ===");
-};
+  ctx.font = "12px Arial";
+  ctx.fillStyle = "#1976D2";
+  ctx.textAlign = "center";
+  
+  switch(mode) {
+    case "regularity":
+      ctx.fillText("📊 Analyse de la régularité", canvas.width / 2, canvas.height - 10);
+      break;
+    case "effortPattern":
+      ctx.fillText("🔄 Schéma d'effort", canvas.width / 2, canvas.height - 10);
+      break;
+    case "deadline":
+      ctx.fillText("⏰ Gestion des échéances", canvas.width / 2, canvas.height - 10);
+      break;
+    case "combined":
+      ctx.fillText("🎯 Vue combinée", canvas.width / 2, canvas.height - 10);
+      break;
+  }
+}
 
 // Exposer les fonctions globales
 window.changePersistenceAnalysis = changePersistenceAnalysis;
-window.drawEnrichedHeatmap = drawEnrichedHeatmap;
 window.updateStats = updateStats;
 window.showNotification = showNotification;
 window.fillSampleEvaluator = fillSampleEvaluator;
 window.clearEvaluatorFields = clearEvaluatorFields;
-window.updateMetacognitionPanel = updateMetacognitionPanel;
-window.updateRadarMetricsGrid = updateRadarMetricsGrid;
 </script>
 
 </body>