Spaces:

OUAREDAEK
/

VCC

Sleeping

App Files Files Community

OUAREDAEK commited on Apr 24

Commit

ff69b3c

verified ·

1 Parent(s): 50fa467

Upload templates/index-old33.html with huggingface_hub

Browse files

Files changed (1) hide show

templates/index-old33.html +1465 -0

templates/index-old33.html ADDED Viewed

	@@ -0,0 +1,1465 @@

+<!DOCTYPE html>
+<html lang="fr">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
+<title>ReflAgent | Tableau de Recherche – Auto‑détermination & Analyse Réflexive (InclusionAI)</title>
+<style>
+/* ----- STYLES PROFESSIONNELS / RECHERCHE (épurés, académiques) ----- */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+body {
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
+  background: #f0f2f5;
+  color: #1e2a3a;
+  padding: 2rem 1.5rem;
+  line-height: 1.45;
+}
+.dashboard {
+  max-width: 1400px;
+  margin: 0 auto;
+}
+/* Cartes sobres */
+.card {
+  background: #ffffff;
+  border-radius: 1rem;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 2px 6px rgba(0,0,0,0.02);
+  padding: 1.5rem 1.75rem;
+  margin-bottom: 1.75rem;
+  border: 1px solid #e2e8f0;
+}
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  flex-wrap: wrap;
+  gap: 1rem;
+  margin-bottom: 1.25rem;
+  border-bottom: 1px solid #e9edf2;
+  padding-bottom: 0.75rem;
+}
+.card-header h2 {
+  font-size: 1.35rem;
+  font-weight: 600;
+  color: #0f172a;
+  letter-spacing: -0.2px;
+}
+.card-header h3 {
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: #1e293b;
+}
+.badge {
+  background: #eef2ff;
+  padding: 0.2rem 0.7rem;
+  border-radius: 2rem;
+  font-size: 0.7rem;
+  font-weight: 500;
+  color: #1e40af;
+  font-family: monospace;
+}
+/* Onglets */
+.tabs {
+  display: flex;
+  gap: 0.25rem;
+  margin-bottom: 1.75rem;
+  border-bottom: 1px solid #e2e8f0;
+}
+.tab-btn {
+  background: transparent;
+  border: none;
+  padding: 0.6rem 1.4rem;
+  font-size: 0.85rem;
+  font-weight: 500;
+  color: #4b5563;
+  cursor: pointer;
+  border-radius: 0;
+  transition: all 0.1s linear;
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+}
+.tab-btn:hover {
+  color: #1e3a8a;
+  background: #f8fafc;
+}
+.tab-btn.active {
+  color: #1e40af;
+  border-bottom: 2px solid #1e40af;
+  font-weight: 600;
+}
+.tab-content {
+  display: none;
+}
+.tab-content.active {
+  display: block;
+}
+/* Grilles */
+.grid-2col {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 1.5rem;
+}
+/* Disposition côte à côte pour heatmap + analyse persistance */
+.persistance-heatmap-container {
+  display: flex;
+  gap: 1.75rem;
+  flex-wrap: wrap;
+  margin: 1rem 0 1.5rem 0;
+}
+.persistance-card {
+  flex: 1.2;
+  min-width: 260px;
+  background: #fefefe;
+  border-radius: 1rem;
+  padding: 1rem 1.25rem;
+  border: 1px solid #e9edf2;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.02);
+}
+.heatmap-card {
+  flex: 2.2;
+  min-width: 320px;
+  background: #fefefe;
+  border-radius: 1rem;
+  padding: 1rem 1.25rem;
+  border: 1px solid #e9edf2;
+}
+.section-title-sm {
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: #4b5563;
+  margin-bottom: 0.75rem;
+  border-left: 3px solid #3b82f6;
+  padding-left: 0.6rem;
+}
+.metrique-persistance-compact {
+  margin-bottom: 1.25rem;
+}
+.metrique-persistance-compact label {
+  display: block;
+  font-size: 0.7rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  color: #4b5563;
+  margin-bottom: 0.2rem;
+}
+.valeur-persistance-compact {
+  font-size: 1.3rem;
+  font-weight: 700;
+  color: #0f172a;
+}
+.note-persistance-compact {
+  font-size: 0.65rem;
+  color: #5b6e8c;
+  margin-top: 0.2rem;
+}
+.slider-compact {
+  width: 100%;
+  margin-top: 0.4rem;
+  accent-color: #2563eb;
+}
+.select-compact {
+  width: 100%;
+  padding: 0.4rem 0.6rem;
+  border-radius: 2rem;
+  border: 1px solid #cbd5e1;
+  background: white;
+  font-size: 0.75rem;
+  margin-top: 0.4rem;
+}
+.control {
+  flex: 1;
+  min-width: 160px;
+}
+.control label {
+  display: block;
+  font-size: 0.7rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+  color: #4b5563;
+  margin-bottom: 0.3rem;
+}
+.control input, .control select, .control textarea {
+  width: 100%;
+  padding: 0.55rem 0.85rem;
+  border: 1px solid #cbd5e1;
+  border-radius: 0.5rem;
+  font-size: 0.85rem;
+  background: white;
+  font-family: inherit;
+}
+.control input:focus, .control select:focus, .control textarea:focus {
+  outline: none;
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 2px rgba(59,130,246,0.15);
+}
+button {
+  background: #1e3a8a;
+  border: none;
+  padding: 0.55rem 1.25rem;
+  border-radius: 2rem;
+  font-weight: 500;
+  font-size: 0.75rem;
+  color: white;
+  cursor: pointer;
+  transition: background 0.15s;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+button:hover {
+  background: #1e40af;
+}
+.btn-secondaire {
+  background: #475569;
+}
+.btn-secondaire:hover {
+  background: #334155;
+}
+/* Compétences */
+.grille-competences {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 1rem;
+  margin-top: 0.5rem;
+  margin-bottom: 1.5rem;
+}
+.item-competence {
+  background: #fefefe;
+  border-radius: 0.75rem;
+  padding: 0.85rem 1rem;
+  border-left: 3px solid #3b82f6;
+  border-bottom: 1px solid #ecf3fa;
+  transition: all 0.1s;
+}
+.en-tete-competence {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  font-size: 0.8rem;
+  font-weight: 500;
+  margin-bottom: 0.5rem;
+}
+.valeur-competence {
+  font-weight: 600;
+  font-size: 0.85rem;
+}
+.legende-niveau {
+  display: inline-block;
+  font-size: 0.65rem;
+  font-weight: 500;
+  padding: 0.15rem 0.5rem;
+  border-radius: 2rem;
+  margin-left: 0.5rem;
+}
+.niveau-faible { background: #fee2e2; color: #991b1b; }
+.niveau-moyen { background: #fef9c3; color: #854d0e; }
+.niveau-eleve { background: #dcfce7; color: #166534; }
+.curseur-competence {
+  width: 100%;
+  margin-top: 0.5rem;
+  accent-color: #2563eb;
+}
+.legende-competences {
+  display: flex;
+  gap: 1rem;
+  margin-bottom: 1rem;
+  padding: 0.5rem 0;
+  border-bottom: 1px dashed #e2e8f0;
+  font-size: 0.7rem;
+}
+.legende-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+.legende-couleur {
+  width: 14px;
+  height: 14px;
+  border-radius: 4px;
+}
+.legende-couleur.faible { background: #fee2e2; border: 1px solid #fecaca; }
+.legende-couleur.moyen { background: #fef9c3; border: 1px solid #fde047; }
+.legende-couleur.eleve { background: #dcfce7; border: 1px solid #bbf7d0; }
+/* Radar */
+.radar-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: linear-gradient(145deg, #fafcff 0%, #ffffff 100%);
+  border-radius: 1.5rem;
+  padding: 1.25rem;
+  box-shadow: 0 8px 20px rgba(0,0,0,0.04), 0 2px 4px rgba(0,0,0,0.02);
+}
+#canvasRadar {
+  display: block;
+  width: 100%;
+  max-width: 420px;
+  height: auto;
+  background: transparent;
+  border-radius: 1rem;
+  transition: all 0.2s ease;
+}
+canvas {
+  background: transparent !important;
+  border-radius: 1rem;
+  width: 100%;
+  max-width: 420px;
+  margin: 0 auto;
+  display: block;
+  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.05));
+}
+.ligne-metrique {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin-bottom: 0.7rem;
+  background: #fafcff;
+  padding: 0.5rem 0.75rem;
+  border-radius: 2rem;
+  border: 1px solid #eef2f8;
+}
+.nom-metrique {
+  flex: 2;
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+.ligne-metrique input {
+  width: 65px;
+  padding: 0.25rem 0.5rem;
+  border-radius: 2rem;
+  border: 1px solid #cbd5e1;
+  text-align: center;
+  font-size: 0.8rem;
+}
+/* Heatmap 3 mois vert clair */
+.heatmap-github {
+  display: flex;
+  gap: 3px;
+  overflow-x: auto;
+}
+.colonne-semaine {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.cellule-jour {
+  width: 14px;
+  height: 14px;
+  border-radius: 2px;
+}
+.etiquettes-jours {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  font-size: 0.55rem;
+  color: #4b5563;
+  margin-right: 6px;
+  width: 24px;
+}
+.etiquettes-jours span {
+  height: 14px;
+  line-height: 14px;
+  text-align: right;
+}
+.stats-heatmap {
+  display: flex;
+  gap: 1rem;
+  margin-top: 1rem;
+  flex-wrap: wrap;
+}
+.pastille-stat {
+  background: #f1f5f9;
+  padding: 0.25rem 1rem;
+  border-radius: 2rem;
+  font-size: 0.7rem;
+  font-weight: 500;
+  color: #1f3a6b;
+}
+/* Boîte réflexive */
+.boite-reflexive {
+  background: #f8fafc;
+  border-radius: 1rem;
+  padding: 1.25rem;
+  border-left: 4px solid #2c6e9e;
+  margin: 1rem 0;
+  line-height: 1.5;
+  font-size: 0.9rem;
+  color: #1e2a3a;
+}
+/* Métriques expert */
+.metrique-expert {
+  background: #ffffff;
+  border: 1px solid #e9edf2;
+  border-radius: 1rem;
+  padding: 1rem 1.2rem;
+  margin-bottom: 1rem;
+}
+.titre-metrique {
+  font-weight: 600;
+  font-size: 0.9rem;
+  color: #1e293b;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+  margin-bottom: 0.25rem;
+}
+.titre-metrique code {
+  background: #f1f5f9;
+  padding: 0.1rem 0.6rem;
+  border-radius: 2rem;
+  font-size: 0.7rem;
+  font-weight: 500;
+  color: #1e40af;
+}
+.description-metrique {
+  font-size: 0.7rem;
+  color: #5b6e8c;
+  margin-bottom: 0.7rem;
+}
+.etoiles {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+.etoile {
+  font-size: 1.5rem;
+  cursor: pointer;
+  color: #cfdde6;
+  transition: 0.05s;
+}
+.etoile.active {
+  color: #f5b042;
+}
+.etoile:hover {
+  transform: scale(1.05);
+}
+.synthese-confiance {
+  background: #f1f5f9;
+  border-radius: 1rem;
+  padding: 1rem 1.25rem;
+  margin-top: 1rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+.barre-confiance {
+  flex: 2;
+  background: #e2e8f0;
+  border-radius: 2rem;
+  height: 1.6rem;
+  overflow: hidden;
+}
+#remplissageConfiance {
+  height: 100%;
+  width: 0%;
+  background: #2c6e9e;
+  text-align: center;
+  line-height: 1.6rem;
+  color: white;
+  font-size: 0.7rem;
+  font-weight: 600;
+  transition: width 0.2s;
+}
+textarea {
+  width: 100%;
+  border-radius: 0.75rem;
+  border: 1px solid #cbd5e1;
+  padding: 0.6rem;
+  font-family: inherit;
+  margin-top: 0.75rem;
+  resize: vertical;
+  font-size: 0.8rem;
+}
+.groupe-likert {
+  display: flex;
+  gap: 0.75rem;
+  align-items: center;
+  flex-wrap: wrap;
+  margin-top: 0.5rem;
+}
+.btn-likert {
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  background: #f1f5f9;
+  border: 1px solid #cbd5e1;
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: #1e293b;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.02);
+}
+.btn-likert:hover {
+  background: #e2e8f0;
+  border-color: #94a3b8;
+  transform: scale(1.02);
+}
+.btn-likert.actif {
+  background: #0f172a;
+  border-color: #0f172a;
+  color: #ffffff;
+  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
+}
+.manifeste-panel {
+  background: #fefce8;
+  border: 1px solid #e7e5c3;
+  border-radius: 1rem;
+  padding: 1rem;
+  margin-bottom: 1.25rem;
+}
+.manifeste-panel label {
+  font-weight: 600;
+  font-size: 0.8rem;
+  color: #3b2e1e;
+}
+.profile-selector {
+  background: #f1f5f9;
+  border-radius: 1rem;
+  padding: 0.75rem 1rem;
+  margin: 1rem 0 0.5rem 0;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 1rem;
+}
+.profile-selector label {
+  font-weight: 600;
+  font-size: 0.75rem;
+  color: #0f172a;
+}
+.profile-selector select {
+  flex: 2;
+  min-width: 200px;
+  background: white;
+}
+.question-item {
+  margin-bottom: 1.2rem;
+  border-bottom: 1px solid #eef2f8;
+  padding-bottom: 0.8rem;
+}
+.question-label {
+  font-weight: 500;
+  font-size: 0.85rem;
+  margin-bottom: 0.4rem;
+  color: #1e293b;
+}
+.dimension-header {
+  background: #eef2ff;
+  padding: 0.4rem 1rem;
+  border-radius: 2rem;
+  font-weight: 700;
+  font-size: 0.8rem;
+  margin: 1rem 0 0.5rem 0;
+  color: #1e3a8a;
+  display: inline-block;
+}
+.questions-container {
+  max-height: 600px;
+  overflow-y: auto;
+  padding-right: 0.5rem;
+}
+@media (max-width: 700px) {
+  body { padding: 1rem; }
+  .card { padding: 1rem; }
+  .etoile { font-size: 1.25rem; }
+  .tab-btn { padding: 0.5rem 1rem; }
+  .btn-likert { width: 38px; height: 38px; font-size: 1rem; }
+  .cellule-jour { width: 10px; height: 10px; }
+  .etiquettes-jours span { height: 10px; line-height: 10px; font-size: 0.5rem; }
+}
+.profile-completion {
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 1.25rem;
+  padding: 1rem 1.2rem;
+  margin: 1.25rem 0 1rem 0;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.02);
+}
+.completion-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  margin-bottom: 0.6rem;
+}
+.completion-title {
+  font-weight: 700;
+  font-size: 0.85rem;
+  color: #0f172a;
+  letter-spacing: -0.2px;
+}
+.completion-percent {
+  font-size: 1.2rem;
+  font-weight: 800;
+  color: #1e3a8a;
+}
+.progress-bar-bg {
+  background: #e2e8f0;
+  border-radius: 2rem;
+  height: 0.7rem;
+  width: 100%;
+  overflow: hidden;
+  margin: 0.5rem 0 0.6rem 0;
+}
+.progress-fill {
+  background: #2c6e9e;
+  width: 0%;
+  height: 100%;
+  border-radius: 2rem;
+  transition: width 0.25s ease;
+}
+.completion-stats {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.8rem;
+  margin-top: 0.5rem;
+  font-size: 0.7rem;
+  color: #334155;
+  font-weight: 500;
+}
+.badge-profil {
+  background: #eef2ff;
+  padding: 0.2rem 0.8rem;
+  border-radius: 2rem;
+  color: #1e3a8a;
+}
+.titre-personnalisation {
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: #1e293b;
+  margin: 0.75rem 0 0.5rem 0;
+  padding-left: 0.25rem;
+  border-left: 3px solid #3b82f6;
+  letter-spacing: -0.2px;
+}
+/* Légende heatmap vert clair */
+.heatmap-legend {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  margin-top: 0.75rem;
+  font-size: 0.65rem;
+  color: #4b5563;
+}
+.legend-color {
+  width: 14px;
+  height: 14px;
+  border-radius: 2px;
+}
+.loading-spinner {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  border: 2px solid #e2e8f0;
+  border-top-color: #1e3a8a;
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+  vertical-align: middle;
+  margin-right: 6px;
+}
+@keyframes spin { to { transform: rotate(360deg); } }
+</style>
+</head>
+<body>
+<div class="dashboard">
+  <div class="card">
+    <div class="card-header">
+      <h2>ReflAgent – Profile-Aware Feedback for Metacognitive Support</h2>
+      <span class="badge">Prototype Recherche (SDT + Analytics) | InclusionAI</span>
+    </div>
+  </div>
+  <div class="card" style="padding-bottom: 1rem;">
+    <div class="tabs">
+      <button class="tab-btn active" data-tab="sdt">Profil d'auto-détermination (SDT)</button>
+      <button class="tab-btn" data-tab="analytics">Analytique de l'apprenant</button>
+      <button class="tab-btn" data-tab="reflexion">Message Réflexif & Évaluation experte</button>
+    </div>
+    <!-- VOLET SDT -->
+    <div id="tab-sdt" class="tab-content active">
+      <div class="card-header" style="margin-top:0; padding-top:0;"><h3>Échelle d'auto‑évaluation (1 → 5)</h3><button id="appliquerQuestionnaireBtn" style="background:#2c5282;"> Sauvegarder & Mettre à jour</button></div>
+      <div class="profile-completion" id="profileCompletionWidget">
+        <div class="completion-header">
+          <span class="completion-title">Complétion du Profil</span>
+          <span class="completion-percent" id="completionPourcentage">0%</span>
+        </div>
+        <div class="progress-bar-bg">
+          <div class="progress-fill" id="completionProgressFill" style="width:0%"></div>
+        </div>
+        <div class="completion-stats">
+          <span id="completionTexte">Questionnaires complétés: 0/28</span>
+          <span class="badge-profil" id="profilPersonnaliseBadge">Profil personnalisé: Non renseigné</span>
+        </div>
+      </div>
+      <div class="titre-personnalisation"> Personnaliser le profil des apprenants</div>
+      <div class="profile-selector">
+        <label> Profil apprenant prédéfini :</label>
+        <select id="selectProfilEtudiant">
+          <option value="">-- Sélectionner --</option>
+          <option value="engage">Étudiant engagé</option><option value="actifInefficace">Étudiant actif mais inefficace</option>
+          <option value="succes">Étudiant orienté vers le succès</option><option value="motivé">Étudiant motivé</option>
+          <option value="surmotivé">Étudiant surmotivé</option><option value="strategique">Étudiant stratégique</option>
+          <option value="amelioration">Étudiant en amélioration</option><option value="difficulte">Étudiant en difficulté</option>
+          <option value="evitement">Étudiant évitant l'échec</option><option value="risque">Étudiant à risque</option>
+          <option value="progression">Étudiant en progression</option><option value="acceptechec">Étudiant acceptant l'échec</option>
+          <option value="inactif">Étudiant inactif</option><option value="nonengage">Étudiant non engagé</option>
+          <option value="perseverant">Étudiant persévérant</option><option value="actif">Étudiant actif</option>
+        </select>
+        <button id="chargerProfilBtn" style="background:#2c5282;">Charger ce profil</button>
+      </div>
+      <div id="zoneQuestionnaire" class="questions-container"></div>
+      <p class="note-persistance" style="margin-top: 12px;">Les réponses modulent les indicateurs d'engagement, de régularité et les compétences.</p>
+    </div>
+    <!-- VOLET LEARNING ANALYTICS -->
+    <div id="tab-analytics" class="tab-content">
+      <div class="card-header" style="margin-top:0; padding-top:0;"><h3>Progression par compétence</h3></div>
+      <div class="legende-competences">
+        <span class="legende-item"><span class="legende-couleur faible"></span> Faible (0-50%)</span>
+        <span class="legende-item"><span class="legende-couleur moyen"></span> Moyen (50-70%)</span>
+        <span class="legende-item"><span class="legende-couleur eleve"></span> Élevé (70-100%)</span>
+      </div>
+      <div id="conteneurCompetences" class="grille-competences"></div>
+      <div class="card-header" style="margin-top: 0.5rem;"><h3>Analyse de la persistance et du management de l'effort (persévérance) - 3 mois</h3></div>
+      <div class="persistance-heatmap-container">
+        <div class="persistance-card">
+          <div class="section-title-sm"> Régularité & Organisation</div>
+          <div class="metrique-persistance-compact">
+            <label>Régularité (%)</label>
+            <div class="valeur-persistance-compact" id="affichageRegularite">90</div>
+            <input type="range" id="curseurRegularite" min="0" max="100" step="1" value="90" class="slider-compact">
+            <div class="note-persistance-compact">Constance dans l'engagement hebdomadaire</div>
+          </div>
+          <div class="metrique-persistance-compact">
+            <label>Gestion échéances (%)</label>
+            <div class="valeur-persistance-compact" id="affichageEcheances">84</div>
+            <input type="range" id="curseurEcheances" min="0" max="100" step="1" value="84" class="slider-compact">
+            <div class="note-persistance-compact">Respect des délais et planification</div>
+          </div>
+          <div class="metrique-persistance-compact">
+            <label>Schéma d'effort</label>
+            <select id="selectPatternEffort" class="select-compact">
+              <option value="Régulier (Effort équilibré toute la semaine)" selected>Régulier (Effort équilibré toute la semaine)</option>
+              <option value="Effort concentré (Pic d'activité jeudi/vendredi)">Effort concentré (Pic d'activité jeudi/vendredi)</option>
+              <option value="Travail weekend (Activité principalement le weekend)">Travail weekend (Activité principalement le weekend)</option>
+              <option value="Accélération progressive (Démarrage lent, fin forte)">Accélération progressive (Démarrage lent, fin forte)</option>
+              <option value="Très faible (Activité minimale toute la semaine)">Très faible (Activité minimale toute la semaine)</option>
+            </select>
+            <div class="note-persistance-compact">Distribution temporelle du travail</div>
+          </div>
+        </div>
+        <div class="heatmap-card">
+          <div class="section-title-sm"> Heatmap d'activité sur 3 mois</div>
+          <div id="zoneHeatmap"></div>
+          <div class="heatmap-legend">
+            <span class="legend-color" style="background:#e8f5e9;"></span><span>Faible</span>
+            <span class="legend-color" style="background:#c8e6c9;"></span><span>Peu actif</span>
+            <span class="legend-color" style="background:#a5d6a7;"></span><span>Actif</span>
+            <span class="legend-color" style="background:#81c784;"></span><span>Très actif</span>
+            <span class="legend-color" style="background:#4caf50;"></span><span>Intense</span>
+          </div>
+          <div id="statsHeatmap" class="stats-heatmap" style="margin-top: 0.75rem;"></div>
+        </div>
+      </div>
+      <div class="grid-2col" style="margin-top: 1.5rem;">
+        <div class="card" style="padding: 1rem; margin-bottom: 0;">
+          <h3 style="margin-bottom: 0.75rem;">Analyse de l'engagement: Indicateurs de comportement d'apprentissage</h3>
+          <div class="radar-wrapper"><canvas id="canvasRadar" width="420" height="420" style="width:100%; max-width:420px; height:auto;"></canvas></div>
+          <div id="analyseRadar" style="background:#f8fafc; border-radius:0.75rem; padding:0.6rem; margin-top:1rem; text-align:center; font-size:0.75rem;"></div>
+        </div>
+        <div class="card" style="padding: 1rem; margin-bottom: 0;"><h3 style="margin-bottom: 0.75rem;">Personnaliser les metriques (radar)</h3><div id="listeMetriquesModifiables"></div></div>
+      </div>
+    </div>
+    <!-- VOLET REFLAGENT & EXPERT (avec INCLUSIONAI) -->
+    <div id="tab-reflexion" class="tab-content">
+      <div class="card-header" style="margin-top:0; padding-top:0;"><h3>ReflAgent – Feedback réflexif adaptatif </h3><button id="genererMessageBtn"> Générer l'analyse réflexive </button></div>
+      <div class="manifeste-panel">
+        <div style="display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-end;">
+          <div class="control" style="flex: 1.5;">
+            <label>Intention de l'apprenant</label>
+            <select id="selectIntention">
+              <option value="engagement">Engagement / régularité</option><option value="risk">Niveau de risque</option>
+              <option value="challenges">Difficultés / défis</option><option value="emotions">Émotions (stress, confiance)</option>
+              <option value="advice">Conseil méthodologique</option><option value="progress">Progression et axes d'amélioration</option>
+              <option value="improvement">Axes de développement prioritaires</option>
+            </select>
+          </div>
+          <div class="control" style="flex: 3;">
+            <label>Manifeste (question / préoccupation)</label>
+            <input type="text" id="manifesteNaturel" placeholder="Ex: Comment mieux organiser mes révisions ?">
+          </div>
+        </div>
+      </div>
+      <div id="messageReflexif" class="boite-reflexive"><i> Cliquez sur "Générer l'analyse réflexive" pour recevoir un feedback personnalisé par IA basé sur votre profil d'apprentissage.</i></div>
+      <div class="card-header" style="margin-top: 1rem;"><h3>Calibration experte – Métriques de confiance</h3></div>
+      <p style="font-size:0.75rem; margin-bottom: 0.75rem;">Chaque dimension évalue la qualité du message réflexif produit par ReflAgent.</p>
+      <div class="metrique-expert" data-metric="AR"><div class="titre-metrique">Authenticité réflexive (AR) <code>AR</code></div><div class="description-metrique">Le message reflète-t-il fidèlement les indicateurs réels de l'apprenant ?</div><div class="etoiles" id="etoiles-AR"></div></div>
+      <div class="metrique-expert" data-metric="AE"><div class="titre-metrique">Alignement empathique (AE) <code>AE</code></div><div class="description-metrique">Le message comporte-t-il des marqueurs linguistiques empathiques ?</div><div class="etoiles" id="etoiles-AE"></div></div>
+      <div class="metrique-expert" data-metric="ESR"><div class="titre-metrique">Encouragement sensible au risque (ESR) <code>ESR</code></div><div class="description-metrique">Équilibre entre encouragement et indication du niveau de risque.</div><div class="etoiles" id="etoiles-ESR"></div></div>
+      <div class="metrique-expert" data-metric="SDM"><div class="titre-metrique">Soutien aux défis cognitifs (SDM) <code>SDM</code></div><div class="description-metrique">Stimule l'apprenant et renforce son sentiment de compétence.</div><div class="etoiles" id="etoiles-SDM"></div></div>
+      <div class="metrique-expert" data-metric="SM"><div class="titre-metrique">Soutien métacognitif (SM) <code>SM</code></div><div class="description-metrique">Aide l'étudiant à réfléchir sur ses stratégies d'apprentissage.</div><div class="etoiles" id="etoiles-SM"></div></div>
+      <div class="synthese-confiance"><div style="font-weight: 600;">Confiance globale</div><div class="barre-confiance"><div id="remplissageConfiance">0%</div></div><button id="sauvegarderEvalBtn" class="btn-secondaire">Enregistrer évaluation</button></div>
+      <div id="retourSauvegarde" style="margin-top:0.5rem; font-size:0.7rem; color:#2c6e9e;"></div>
+      <textarea id="commentaireExpert" rows="2" placeholder="Observations complémentaires de l'expert (optionnel)..."></textarea>
+      <div style="display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1rem;">
+        <div class="pastille-stat">Niveau de risque : <strong id="niveauRisque">-</strong></div>
+        <div class="pastille-stat">Engagement moyen : <strong id="moyenneEngagement">-</strong></div>
+        <div class="pastille-stat">Confiance experte : <strong id="confianceGlobaleValeur">0%</strong></div>
+      </div>
+    </div>
+  </div>
+</div>
+<script>
+  // ============================================================
+  // ✅ CONFIGURATION INCLUSIONAI VIA OPENROUTER (CORRIGÉE)
+  // ============================================================
+  const OPENROUTER_API_KEY = "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";
+  const OPENROUTER_URL = "https://openrouter.ai/api/v1/chat/completions";
+  const INCLUSIONAI_MODEL = "inclusionai/ling-2.6-1t:free";
+  // ---------- DONNÉES DE BASE ----------
+  const metriquesRadarDefaut = [
+    { label: "Initiation des tâches", value: 85, desc: "Rapidité d'engagement" },
+    { label: "Connaissances validées", value: 72, desc: "Taux de validation" },
+    { label: "Niveau de compétence", value: 68, desc: "Maîtrise moyenne" },
+    { label: "Taux d'erreur (inversé)", value: 65, desc: "Précision" },
+    { label: "Achèvement des tâches", value: 74, desc: "Terminaison" },
+    { label: "Interaction ressources", value: 80, desc: "Utilisation contenus" },
+    { label: "Score global", value: 70, desc: "Activité globale" },
+    { label: "Tentatives de réponse", value: 78, desc: "Engagement réponse" }
+  ];
+  const competencesDefaut = [
+    { label: "Choix lexical", value: 72 }, { label: "Compréhension des mots", value: 60 },
+    { label: "Développement du vocabulaire", value: 65 }, { label: "Maîtrise orthographique", value: 70 },
+    { label: "Articulation des termes", value: 68 }, { label: "Construction phrastique", value: 48 },
+    { label: "Orthographe grammaticale", value: 55 }, { label: "Modalités des phrases", value: 62 },
+    { label: "Enchaînement des phrases", value: 66 }, { label: "Organisation textuelle", value: 78 },
+    { label: "Reprises anaphoriques", value: 74 }, { label: "Conjugaison", value: 80 }
+  ];
+  let profil = {
+    titre: "Apprenant en progression",
+    manifeste: "Développement des compétences langagières",
+    competences: JSON.parse(JSON.stringify(competencesDefaut)),
+    metriquesRadar: JSON.parse(JSON.stringify(metriquesRadarDefaut)),
+    regularite: 90,
+    echeances: 84,
+    patternEffort: "Régulier (Effort équilibré toute la semaine)",
+    risque: 25
+  };
+  let scoresConfiance = { AR: 0, AE: 0, ESR: 0, SDM: 0, SM: 0 };
+  const poidsConfiance = { AR: 0.30, AE: 0.20, ESR: 0.20, SDM: 0.10, SM: 0.20 };
+  let questionnaireReponses = {};
+  const questionsSDT = [
+    { dim:"AUTONOMIE", text:"Dans mes études, j'ai l'impression de pouvoir choisir ce que j'apprends." }, { dim:"AUTONOMIE", text:"Quand je travaille, c'est avant tout parce que c'est mon choix personnel." },
+    { dim:"AUTONOMIE", text:"Je devrais apprendre ce qu'on me dit, sans discuter." }, { dim:"COMPÉTENCE PERÇUE", text:"En général, je réussis ce que j'entreprends dans mes études." },
+    { dim:"COMPÉTENCE PERÇUE", text:"Face à une difficulté, je me sens capable de trouver une solution." }, { dim:"COMPÉTENCE PERÇUE", text:"J'ai besoin d'être rassuré(e) sur mes capacités." },
+    { dim:"AFFILIATION / RELATION", text:"Je préfère travailler en groupe plutôt que seul(e)." }, { dim:"AFFILIATION / RELATION", text:"Il est important pour moi d'être reconnu(e) par mes professeurs." },
+    { dim:"AFFILIATION / RELATION", text:"En cas de doute, je demande de l'aide facilement." }, { dim:"MOTIVATION", text:"Ce qui me motive le plus, c'est le plaisir d'apprendre (et non les notes)." },
+    { dim:"MOTIVATION", text:"Si on supprimait les notes, j'étudierais autant ou plus." }, { dim:"MOTIVATION", text:"J'ai parfois l'impression que cela ne sert à rien d'étudier." },
+    { dim:"PROFIL MOTIVATIONNEL (DEMBO)", text:"Je recherche activement les défis." }, { dim:"PROFIL MOTIVATIONNEL (DEMBO)", text:"La peur d'échouer me limite." },
+    { dim:"TRAITS STABLES", text:"Je suis une personne organisée." }, { dim:"TRAITS STABLES", text:"Je ressens facilement du stress ou de l'anxiété." },
+    { dim:"TRAITS STABLES", text:"J'ai plus d'énergie le soir que le matin." }, { dim:"GESTION DU STRESS & DÉLAIS", text:"Face à une échéance importante, la pression me bloque plus qu'elle ne me motive." },
+    { dim:"GESTION DU STRESS & DÉLAIS", text:"Je suis capable de travailler efficacement même dans les derniers jours." }, { dim:"GESTION DU STRESS & DÉLAIS", text:"Quand je suis en retard, j'abandonne mentalement cette matière." },
+    { dim:"GESTION DU STRESS & DÉLAIS", text:"Le stress me pousse à éviter de commencer une tâche difficile." }, { dim:"TOLÉRANCE À L'ÉCHEC", text:"Une mauvaise note me fait douter de ma capacité à réussir les autres." },
+    { dim:"TOLÉRANCE À L'ÉCHEC", text:"Je peux recevoir un feedback négatif sans affecter ma motivation." }, { dim:"TOLÉRANCE À L'ÉCHEC", text:"Je préfère éviter de savoir où j'en suis par peur d'être déçu." },
+    { dim:"COMPORTEMENT FACE AU RETARD", text:"Je rattrape facilement mon retard." }, { dim:"COMPORTEMENT FACE AU RETARD", text:"Plus je suis en retard, plus j'ai besoin qu'on me guide." },
+    { dim:"COMPORTEMENT FACE AU RETARD", text:"Je produis un meilleur travail sous pression de dernière minute." }, { dim:"COMPORTEMENT FACE AU RETARD", text:"Travailler derrière les délais me stresse au point d'arrêter." }
+  ];
+  const TOTAL_QUESTIONS = questionsSDT.length;
+  // ============================================================
+  // PROMPT ENRICHI POUR INCLUSIONAI
+  // ============================================================
+  function construirePromptEnrichi() {
+    const intention = document.getElementById("selectIntention").value;
+    const manifeste = document.getElementById("manifesteNaturel").value || "Fournir un feedback réflexif personnalisé.";
+    const engagementMoy = profil.metriquesRadar.reduce((s,m)=>s+m.value,0)/profil.metriquesRadar.length;
+    const competencesFaibles = profil.competences.filter(c => c.value < 55).map(c => c.label);
+    const competencesFortes = profil.competences.filter(c => c.value > 75).map(c => c.label);
+    let competenceCible = "Non définie";
+    let valeurCompetenceCible = 0;
+    if (profil.competences.length > 0) {
+      const plusFaible = profil.competences.reduce((min, c) => c.value < min.value ? c : min, profil.competences[0]);
+      competenceCible = plusFaible.label;
+      valeurCompetenceCible = plusFaible.value;
+    }
+    const niveauRisqueTexte = profil.risque < 40 ? "faible" : (profil.risque < 70 ? "modéré" : "élevé");
+    const moyenneGroupeCompetence = 68;
+    const ecartCompetence = valeurCompetenceCible - moyenneGroupeCompetence;
+    const interpretationCompetence = ecartCompetence >= 10 ? "en avance" : (ecartCompetence <= -10 ? "en retard" : "dans la moyenne");
+    const moyenneGroupeRegularite = 72;
+    const ecartRegularite = profil.regularite - moyenneGroupeRegularite;
+    const interpretationEffort = ecartRegularite >= 15 ? "effort soutenu" : (ecartRegularite <= -15 ? "effort insuffisant" : "effort normal");
+    const moyenneGroupeTentatives = 2.5;
+    const tentativeEtudiant = Math.max(1, Math.min(5, Math.round(5 - (valeurCompetenceCible / 100) * 3)));
+    const ecartTentatives = tentativeEtudiant - moyenneGroupeTentatives;
+    const interpretationTentatives = ecartTentatives <= -0.5 ? "plus efficace" : (ecartTentatives >= 0.8 ? "plus lent" : "comparable");
+    const moyenneGroupeRessources = 65;
+    const tauxRessourcesEtudiant = Math.min(95, Math.max(20, Math.round(engagementMoy * 0.85)));
+    const ecartRessources = tauxRessourcesEtudiant - moyenneGroupeRessources;
+    const interpretationRessources = ecartRessources >= 15 ? "bonne utilisation" : (ecartRessources <= -15 ? "sous-utilisation" : "usage moyen");
+    const moyenneGroupeProgression = 5;
+    const progressionEtudiant = Math.min(25, Math.max(-10, Math.round((profil.regularite / 100) * 15 + (engagementMoy / 100) * 10 - 5)));
+    const ecartProgression = progressionEtudiant - moyenneGroupeProgression;
+    const interpretationProgression = ecartProgression >= 8 ? "progression rapide" : (ecartProgression <= -5 ? "progression stagnante" : "progression normale");
+    let positionnementGlobal = "dans la moyenne";
+    const scoreGlobalEtudiant = (engagementMoy + profil.regularite + valeurCompetenceCible) / 3;
+    if (scoreGlobalEtudiant >= 75) positionnementGlobal = "dans le top 25%";
+    else if (scoreGlobalEtudiant <= 45) positionnementGlobal = "dans le dernier quartile";
+    const listeCompetences = profil.competences.map(c => `- ${c.label}: ${c.value}%`).join("\n");
+    return `# 🧠 PROMPT GLOBAL ENRICHI – Feedback réflexif avec template de performance et normalisation collective
+## Rôle du système
+Tu es un tuteur intelligent spécialisé en écriture académique, Learning Analytics et auto-régulation de l'apprentissage (SRL). Ton objectif est de produire un feedback réflexif personnalisé qui aide l'étudiant à comprendre sa situation d'apprentissage, régule ses émotions, identifie ses défis cognitifs, ajuste ses stratégies, renforce son engagement et sa motivation, et lui fournit une vision claire de sa performance relative au groupe.
+## Contexte pédagogique – 14 compétences
+${listeCompetences}
+## Compétences ciblées & seuils
+- Compétence cible : ${competenceCible}
+- Domaine prioritaire : ${competenceCible.includes("lexical") || competenceCible.includes("orthographique") ? "mot/phrase" : (competenceCible.includes("phrastique") || competenceCible.includes("modalités") ? "texte" : "discours")}
+- Niveau attendu : intermédiaire
+- Seuil attendu (%) : 70%
+- Seuil de vigilance (%) : 50%
+## Intention & difficulté exprimée
+- Intention déclarée : ${intention}
+- Difficulté exprimée : ${manifeste}
+## Profil étudiant & traces d'apprentissage
+- Score compétence cible (%) : ${valeurCompetenceCible}
+- Engagement moyen (radar) : ${Math.round(engagementMoy)}%
+- Régularité : ${profil.regularite}%
+- Gestion des échéances : ${profil.echeances}%
+- Compétences faibles (sous 55%) : ${competencesFaibles.length > 0 ? competencesFaibles.join(", ") : "aucune"}
+- Points forts (au-dessus 75%) : ${competencesFortes.length > 0 ? competencesFortes.join(", ") : "aucun"}
+- Niveau de risque : ${niveauRisqueTexte}
+## 🆕 Données de normalisation collective (comparaison au groupe)
+| Indicateur | Valeur étudiant | Moyenne du groupe | Écart | Interprétation |
+|------------|----------------|-------------------|-------|----------------|
+| Score compétence cible (%) | ${valeurCompetenceCible} | ${moyenneGroupeCompetence} | ${ecartCompetence >= 0 ? "+" : ""}${ecartCompetence} | ${interpretationCompetence} |
+| Taux d'effort (régularité) | ${profil.regularite}% | ${moyenneGroupeRegularite}% | ${ecartRegularite >= 0 ? "+" : ""}${ecartRegularite} | ${interpretationEffort} |
+| Nombre de tentatives avant réussite | ${tentativeEtudiant} | ${moyenneGroupeTentatives} | ${ecartTentatives >= 0 ? "+" : ""}${ecartTentatives.toFixed(1)} | ${interpretationTentatives} |
+| Taux d'utilisation des ressources | ${tauxRessourcesEtudiant}% | ${moyenneGroupeRessources}% | ${ecartRessources >= 0 ? "+" : ""}${ecartRessources} | ${interpretationRessources} |
+| Progression récente (7 derniers jours, en pts) | ${progressionEtudiant >= 0 ? "+" : ""}${progressionEtudiant} pts | +${moyenneGroupeProgression} pts | ${ecartProgression >= 0 ? "+" : ""}${ecartProgression} | ${interpretationProgression} |
+Positionnement global de l'étudiant : ${positionnementGlobal}
+## 🧭 Instructions pour générer le feedback réflexif
+Produis un message unique, structuré selon le plan ci-dessous. Le message doit rester en langage naturel, empathique et réflexif.
+### 📊 A. Informing learners on their performance
+1. 🎯 Compétence & maîtrise (ciblée + globale) : score actuel vs seuil attendu, positionnement par rapport au groupe.
+2. ⚙️ How you worked (process) : régularité, gestion du temps, tentatives, comparaison au groupe.
+3. 📄 Quality of output (product) : qualité des productions, écart au niveau attendu.
+### 📉 B. Collective normalization of performance
+Présente un tableau synthétique des indicateurs clés et une phrase de positionnement : "Globalement, tu te situes dans le {${positionnementGlobal}}."
+### ⚠️ C. Conscience du risque & régulation émotionnelle
+Identifie le niveau de risque (${niveauRisqueTexte}), valide les émotions, propose une réassurance.
+### 🧠 D. Défis cognitifs liés à l'écriture
+Identifie 1 ou 2 défis spécifiques liés aux compétences faibles (${competencesFaibles.slice(0,2).join(", ") || "à identifier"}) et à l'intention exprimée (${intention}).
+### 💪 E. Engagement et motivation
+Valorise les points forts (${competencesFortes.slice(0,3).join(", ") || "les aspects positifs de ton travail"}) et les efforts visibles.
+### 📊 F. Visual Analytics recommandées
+Suggère radar, courbe de progression, heatmap, histogramme cohorte.
+### ✅ G. Actions d'auto-régulation (priorisées)
+Propose 3 à 5 actions concrètes, alignées avec l'intention "${intention}", avec "pourquoi" et "comment mesurer le progrès".
+## Contraintes de qualité
+Personnalisé, empathique, réflexif, ancré dans les traces, structuré (sections A à G visibles), longueur 300-400 mots, français, émoticônes légères.`;
+  }
+  // ============================================================
+  // ✅ FONCTION PRINCIPALE AVEC INCLUSIONAI/OPENROUTER
+  // ============================================================
+  async function genererAvecInclusionAI() {
+    const messageDiv = document.getElementById("messageReflexif");
+    const bouton = document.getElementById("genererMessageBtn");
+    const originalText = bouton.innerHTML;
+    bouton.innerHTML = '<span class="loading-spinner"></span> Génération en cours...';
+    bouton.disabled = true;
+    messageDiv.innerHTML = '<em>🤖 Analyse de votre profil et génération d\'un feedback personnalisé avec InclusionAI...</em>';
+    try {
+      const prompt = construirePromptEnrichi();
+      console.log("Prompt envoyé à InclusionAI:", prompt);
+      const response = await fetch(OPENROUTER_URL, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "Authorization": `Bearer ${OPENROUTER_API_KEY}`,
+          "HTTP-Referer": window.location.href,
+          "X-Title": "ReflAgent - Analyse Reflexive"
+        },
+        body: JSON.stringify({
+          model: INCLUSIONAI_MODEL,
+          messages: [
+            {
+              role: "system",
+              content: "Vous êtes un expert en sciences de l'éducation, spécialisé en Learning Analytics et en auto-régulation de l'apprentissage. Vous produisez des feedbacks réflexifs structurés, empathiques et personnalisés, en français."
+            },
+            {
+              role: "user",
+              content: prompt
+            }
+          ],
+          temperature: 0.7,
+          max_tokens: 2000,
+          top_p: 0.95
+        })
+      });
+      if (!response.ok) {
+        const err = await response.text();
+        console.error("Erreur API InclusionAI:", err);
+        let errorMessage = `Erreur API (${response.status})`;
+        if (response.status === 401) errorMessage = "❌ Clé API invalide. Vérifiez votre clé OpenRouter.";
+        else if (response.status === 429) errorMessage = "⏰ Trop de requêtes. Attendez quelques instants.";
+        else if (response.status === 403) errorMessage = "🔒 Accès refusé. Vérifiez vos permissions.";
+        throw new Error(`${errorMessage}: ${err.substring(0, 200)}`);
+      }
+      const data = await response.json();
+      console.log("Réponse InclusionAI:", data);
+      let inclusionText = data?.choices?.[0]?.message?.content;
+      if (!inclusionText) {
+        if (data?.error) {
+          inclusionText = `⚠️ Erreur API: ${data.error.message || "Erreur inconnue"}`;
+        } else {
+          inclusionText = "⚠️ Le service a retourné une réponse inattendue. Veuillez réessayer.";
+        }
+      }
+      inclusionText = inclusionText.replace(/\n/g, '<br>');
+      messageDiv.innerHTML = inclusionText;
+    } catch (error) {
+      console.error("Erreur détaillée InclusionAI:", error);
+      messageDiv.innerHTML = `<span style="color:#b91c1c;">⚠️ Erreur lors de la génération: ${error.message}<br><br>💡 Vérifiez votre connexion et que la clé API OpenRouter est valide.</span>`;
+    } finally {
+      bouton.innerHTML = originalText;
+      bouton.disabled = false;
+    }
+  }
+  // --- Fonctions UI (inchangées) ---
+  function miseAJourBarreProgressionSDT() {
+    const repondues = Object.keys(questionnaireReponses).length;
+    const pourcentage = Math.round((repondues / TOTAL_QUESTIONS) * 100);
+    document.getElementById("completionPourcentage").innerText = `${pourcentage}%`;
+    document.getElementById("completionProgressFill").style.width = `${pourcentage}%`;
+    document.getElementById("completionTexte").innerHTML = `Questionnaires complétés: ${repondues}/${TOTAL_QUESTIONS}`;
+    let niveauProfil = "Non renseigné";
+    if (pourcentage >= 90) niveauProfil = "Très avancé";
+    else if (pourcentage >= 70) niveauProfil = "Avancé";
+    else if (pourcentage >= 40) niveauProfil = "Intermédiaire";
+    else if (pourcentage >= 20) niveauProfil = "Débutant";
+    else niveauProfil = "À compléter";
+    document.getElementById("profilPersonnaliseBadge").innerHTML = `Profil personnalisé: ${niveauProfil}`;
+  }
+  function toutActualiser() {
+    afficherCompetences(); afficherMetriquesModifiables(); dessinerRadar(); analyserRadar(); afficherHeatmap3Mois(); actualiserRisqueEtEngagement();
+    document.getElementById("curseurRegularite").value = profil.regularite;
+    document.getElementById("curseurEcheances").value = profil.echeances;
+    document.getElementById("affichageRegularite").innerText = profil.regularite;
+    document.getElementById("affichageEcheances").innerText = profil.echeances;
+    document.getElementById("selectPatternEffort").value = profil.patternEffort;
+  }
+  function synchroniserControles() {
+    profil.regularite = parseInt(document.getElementById("curseurRegularite").value);
+    profil.echeances = parseInt(document.getElementById("curseurEcheances").value);
+    profil.patternEffort = document.getElementById("selectPatternEffort").value;
+    toutActualiser();
+  }
+  function afficherCompetences() {
+    const conteneur = document.getElementById("conteneurCompetences");
+    if(!conteneur) return;
+    conteneur.innerHTML = "";
+    profil.competences.forEach((c, idx) => {
+      const valeur = c.value;
+      const getNiveau = (v) => v < 50 ? { texte:"Faible", classe:"niveau-faible" } : (v < 70 ? { texte:"Moyen", classe:"niveau-moyen" } : { texte:"Élevé", classe:"niveau-eleve" });
+      const niveau = getNiveau(valeur);
+      const div = document.createElement("div");
+      div.className = "item-competence";
+      div.innerHTML = `<div class="en-tete-competence"><span>${c.label}</span><span class="valeur-competence">${valeur}% <span class="legende-niveau ${niveau.classe}">${niveau.texte}</span></span></div><input type="range" min="0" max="100" value="${valeur}" data-idx="${idx}" class="curseur-competence">`;
+      conteneur.appendChild(div);
+      div.querySelector(".curseur-competence").addEventListener("input", (e) => { profil.competences[idx].value = parseInt(e.target.value); toutActualiser(); });
+    });
+  }
+  function afficherMetriquesModifiables() {
+    const conteneur = document.getElementById("listeMetriquesModifiables");
+    if(!conteneur) return;
+    conteneur.innerHTML = "";
+    profil.metriquesRadar.forEach((m, idx) => {
+      const ligne = document.createElement("div");
+      ligne.className = "ligne-metrique";
+      ligne.innerHTML = `<span class="nom-metrique">${m.label}<br><small>${m.desc}</small></span><input type="number" min="0" max="100" value="${m.value}" data-idx="${idx}" class="input-metrique"><span>${m.value}%</span>`;
+      conteneur.appendChild(ligne);
+      const input = ligne.querySelector(".input-metrique");
+      input.addEventListener("input", (e) => { let v = Math.min(100,Math.max(0, parseInt(e.target.value)||0)); profil.metriquesRadar[idx].value=v; toutActualiser(); });
+    });
+  }
+  function dessinerRadar() {
+    const canvas = document.getElementById("canvasRadar");
+    if(!canvas) return;
+    const ctx = canvas.getContext("2d");
+    const w = canvas.width = 420, h = canvas.height = 420, cx = w/2, cy = h/2, rayon = Math.min(cx,cy) - 50;
+    const metriques = profil.metriquesRadar, n = metriques.length;
+    ctx.clearRect(0,0,w,h);
+    for(let i=1;i<=5;i++){
+      ctx.beginPath();
+      ctx.arc(cx,cy,(rayon/5)*i,0,2*Math.PI);
+      ctx.strokeStyle = "#cbd5e1";
+      ctx.stroke();
+      ctx.fillStyle = "#94a3b8";
+      ctx.font = "bold 9px 'Inter'";
+      ctx.fillText((i*20)+"%", cx+3, cy-(rayon/5)*i - 2);
+    }
+    for(let i=0;i<n;i++){
+      let angle = (2*Math.PI*i)/n - Math.PI/2;
+      let x = cx + rayon * Math.cos(angle), y = cy + rayon * Math.sin(angle);
+      ctx.beginPath();
+      ctx.moveTo(cx,cy);
+      ctx.lineTo(x,y);
+      ctx.strokeStyle = "#e2e8f0";
+      ctx.stroke();
+      let label = metriques[i].label.length > 12 ? metriques[i].label.slice(0,10)+".." : metriques[i].label;
+      let tx = cx + (rayon + 22) * Math.cos(angle), ty = cy + (rayon + 22) * Math.sin(angle);
+      ctx.fillStyle = "#1e293b";
+      ctx.font = "bold 10px 'Inter'";
+      ctx.textAlign = (angle > Math.PI/2 || angle < -Math.PI/2) ? "right" : "left";
+      ctx.fillText(label, tx, ty);
+    }
+    ctx.beginPath();
+    for(let i=0;i<n;i++){
+      let angle = (2*Math.PI*i)/n - Math.PI/2;
+      let r = rayon * (metriques[i].value/100);
+      let x = cx + r * Math.cos(angle), y = cy + r * Math.sin(angle);
+      if(i===0) ctx.moveTo(x,y);
+      else ctx.lineTo(x,y);
+    }
+    ctx.closePath();
+    ctx.fillStyle = "rgba(44, 110, 158, 0.12)";
+    ctx.fill();
+    ctx.strokeStyle = "#2c6e9e";
+    ctx.lineWidth = 2.5;
+    ctx.stroke();
+    for(let i=0;i<n;i++){
+      let angle = (2*Math.PI*i)/n - Math.PI/2;
+      let r = rayon * (metriques[i].value/100);
+      let x = cx + r * Math.cos(angle), y = cy + r * Math.sin(angle);
+      ctx.beginPath();
+      ctx.arc(x, y, 4, 0, 2*Math.PI);
+      ctx.fillStyle = "#2c6e9e";
+      ctx.fill();
+      ctx.beginPath();
+      ctx.arc(x, y, 1.8, 0, 2*Math.PI);
+      ctx.fillStyle = "#ffffff";
+      ctx.fill();
+      let offsetX = 8 * Math.cos(angle), offsetY = 8 * Math.sin(angle);
+      ctx.fillStyle = "#0f172a";
+      ctx.font = "bold 9px 'Inter'";
+      ctx.fillText(metriques[i].value + "%", x + offsetX, y + offsetY - 2);
+    }
+  }
+  function analyserRadar() {
+    const moyenne = profil.metriquesRadar.reduce((s,m)=>s+m.value,0)/profil.metriquesRadar.length;
+    const div = document.getElementById("analyseRadar");
+    if(div) div.innerHTML = `Engagement moyen : ${Math.round(moyenne)}% — ${moyenne>=70?"Activité soutenue 🚀":(moyenne>=50?"Développement modéré 📈":"Renforcement nécessaire 💪")}`;
+  }
+  function afficherHeatmap3Mois() {
+    const wrapper = document.getElementById("zoneHeatmap");
+    if(!wrapper) return;
+    wrapper.innerHTML = "";
+    const semaines = 12;
+    const jours = ["Lun","Mar","Mer","Jeu","Ven","Sam","Dim"];
+    let intensites = [];
+    for(let w=0; w<semaines; w++){
+      let ligne = [];
+      for(let d=0; d<7; d++){
+        let base = 3;
+        if(profil.patternEffort.includes("Effort concentré")) base = (d===3||d===4)? 4 : 2;
+        else if(profil.patternEffort.includes("Travail weekend")) base = (d===5||d===6)? 4 : 1;
+        else if(profil.patternEffort.includes("Accélération progressive")) base = Math.min(4, Math.floor(w/3) + 2);
+        else if(profil.patternEffort.includes("Très faible")) base = 0;
+        else base = 3;
+        if(profil.regularite < 35) base = Math.max(0, base - 2);
+        else if(profil.regularite < 60) base = Math.max(0, base - 1);
+        else if(profil.regularite > 85) base = Math.min(4, base + 1);
+        if(w < 3) base = Math.max(0, base - 1);
+        if(w > 8 && profil.regularite > 70) base = Math.min(4, base + 1);
+        ligne.push(Math.min(4, Math.max(0, Math.round(base))));
+      }
+      intensites.push(ligne);
+    }
+    const couleurs = ["#e8f5e9", "#c8e6c9", "#a5d6a7", "#81c784", "#4caf50"];
+    const leftDiv = document.createElement("div");
+    leftDiv.className = "etiquettes-jours";
+    jours.forEach(j=>{ let s=document.createElement("span"); s.innerText=j; leftDiv.appendChild(s); });
+    const heat = document.createElement("div");
+    heat.className = "heatmap-github";
+    heat.style.maxHeight = "180px";
+    for(let w=0; w<semaines; w++){
+      const col=document.createElement("div");
+      col.className="colonne-semaine";
+      for(let d=0; d<7; d++){
+        const cell=document.createElement("div");
+        cell.className="cellule-jour";
+        cell.style.backgroundColor = couleurs[intensites[w][d]];
+        cell.title = `Semaine ${w+1}, ${jours[d]} - Activité: ${["Inactif","Faible","Moyen","Bon","Intense"][intensites[w][d]]}`;
+        col.appendChild(cell);
+      }
+      heat.appendChild(col);
+    }
+    const main = document.createElement("div");
+    main.style.display="flex";
+    main.style.gap="8px";
+    main.appendChild(leftDiv);
+    main.appendChild(heat);
+    wrapper.appendChild(main);
+    const totalActivite = intensites.flat().reduce((a,b)=>a+b,0);
+    const activiteMoyenne = (totalActivite / (semaines*7)).toFixed(1);
+    const statsDiv = document.getElementById("statsHeatmap");
+    if(statsDiv) statsDiv.innerHTML = `<div class="pastille-stat">📊 Activité moyenne: ${activiteMoyenne}/4</div><div class="pastille-stat">✅ Régularité: ${profil.regularite}%</div><div class="pastille-stat">⏱️ Persistance: ${Math.round(profil.regularite * 0.7 + profil.echeances * 0.3)}%</div><div class="pastille-stat">📅 Pattern: ${profil.patternEffort.substring(0,25)}</div>`;
+  }
+  function actualiserRisqueEtEngagement() {
+    const moyenne = profil.metriquesRadar.reduce((s,m)=>s+m.value,0)/profil.metriquesRadar.length;
+    document.getElementById("moyenneEngagement").innerText=Math.round(moyenne)+"%";
+    let risque = Math.min(90,Math.max(5,Math.round(100-moyenne*0.6+(100-profil.regularite)*0.4)));
+    profil.risque=risque;
+    document.getElementById("niveauRisque").innerHTML=risque<40?"🟢 Faible":(risque<70?"🟡 Modéré":"🔴 Élevé");
+  }
+  function initialiserEtoilesExpert() {
+    ["AR","AE","ESR","SDM","SM"].forEach(m => {
+      const cont = document.getElementById(`etoiles-${m}`);
+      if(!cont) return;
+      cont.innerHTML = "";
+      for(let i=1;i<=5;i++) {
+        const etoile = document.createElement("span");
+        etoile.textContent = "★";
+        etoile.classList.add("etoile");
+        if(scoresConfiance[m] >= i) etoile.classList.add("active");
+        etoile.dataset.valeur = i;
+        etoile.addEventListener("click", () => { scoresConfiance[m] = i; miseAJourEtoiles(m, i); mettreAJourBarreConfiance(); });
+        cont.appendChild(etoile);
+      }
+    });
+  }
+  function miseAJourEtoiles(metrique, valeur) {
+    const container = document.getElementById(`etoiles-${metrique}`);
+    if(!container) return;
+    for(let i=0;i<container.children.length;i++) {
+      if(parseInt(container.children[i].dataset.valeur) <= valeur) container.children[i].classList.add("active");
+      else container.children[i].classList.remove("active");
+    }
+  }
+  function mettreAJourBarreConfiance() {
+    let total=0, maxTotal=0;
+    for(let [k,v] of Object.entries(scoresConfiance)) {
+      total += v * poidsConfiance[k];
+      maxTotal += 5 * poidsConfiance[k];
+    }
+    let pct = maxTotal>0 ? Math.round((total/maxTotal)*100) : 0;
+    const fill = document.getElementById("remplissageConfiance");
+    if(fill) {
+      fill.style.width = pct+"%";
+      fill.innerText = pct+"%";
+      fill.style.background = pct<40?"#b45309":(pct<70?"#b68b40":"#2c6e9e");
+    }
+    document.getElementById("confianceGlobaleValeur").innerText = pct+"%";
+  }
+  function sauvegarderEvaluation() {
+    document.getElementById("retourSauvegarde").innerHTML = "✅ Évaluation experte enregistrée.";
+    setTimeout(()=>document.getElementById("retourSauvegarde").innerHTML="",2000);
+  }
+  function chargerProfilEtudiant(cle) {
+    const profils = {
+      engage:{ regularite:92, echeances:90 }, actifInefficace:{ regularite:82, echeances:52 },
+      succes:{ regularite:94, echeances:96 }, motivé:{ regularite:88, echeances:84 },
+      surmotivé:{ regularite:96, echeances:88 }, strategique:{ regularite:89, echeances:92 },
+      amelioration:{ regularite:70, echeances:68 }, difficulte:{ regularite:44, echeances:38 },
+      evitement:{ regularite:55, echeances:40 }, risque:{ regularite:32, echeances:28 },
+      progression:{ regularite:74, echeances:72 }, acceptechec:{ regularite:65, echeances:60 },
+      inactif:{ regularite:22, echeances:18 }, nonengage:{ regularite:38, echeances:32 },
+      perseverant:{ regularite:90, echeances:88 }, actif:{ regularite:82, echeances:78 }
+    };
+    const p = profils[cle];
+    if(p){
+      profil.regularite = p.regularite;
+      profil.echeances = p.echeances;
+      profil.patternEffort = "Régulier (Effort équilibré toute la semaine)";
+      toutActualiser();
+    }
+  }
+  function initOnglets() {
+    document.querySelectorAll('.tab-btn').forEach(btn => {
+      btn.addEventListener('click', () => {
+        const id = btn.dataset.tab;
+        document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
+        btn.classList.add('active');
+        document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
+        document.getElementById(`tab-${id}`).classList.add('active');
+      });
+    });
+  }
+  function initialiserQuestionnaire() {
+    const container = document.getElementById("zoneQuestionnaire");
+    if(!container) return;
+    container.innerHTML = "";
+    let lastDim = "";
+    questionsSDT.forEach((q, idx) => {
+      if (q.dim !== lastDim) {
+        const header = document.createElement("div");
+        header.className = "dimension-header";
+        header.innerText = q.dim;
+        container.appendChild(header);
+        lastDim = q.dim;
+      }
+      const qDiv = document.createElement("div");
+      qDiv.className = "question-item";
+      qDiv.innerHTML = `<div class="question-label">${q.text}</div><div class="groupe-likert" data-qidx="${idx}"></div>`;
+      container.appendChild(qDiv);
+      const group = qDiv.querySelector(".groupe-likert");
+      for (let v = 1; v <= 5; v++) {
+        const btn = document.createElement("button");
+        btn.innerText = v;
+        btn.classList.add("btn-likert");
+        btn.dataset.valeur = v;
+        btn.addEventListener("click", (e) => {
+          e.stopPropagation();
+          group.querySelectorAll(".btn-likert").forEach(b => b.classList.remove("actif"));
+          btn.classList.add("actif");
+          questionnaireReponses[idx] = v;
+          const moyenneResponses = Object.values(questionnaireReponses).reduce((a,b)=>a+b,0) / (Object.keys(questionnaireReponses).length || 1);
+          const facteur = Math.min(1.1, Math.max(0.9, moyenneResponses / 3));
+          if(document.getElementById("curseurRegularite")) profil.regularite = Math.min(100, Math.max(0, Math.round((parseInt(document.getElementById("curseurRegularite")?.value || 90) * facteur))));
+          toutActualiser();
+          miseAJourBarreProgressionSDT();
+        });
+        group.appendChild(btn);
+      }
+      if (questionnaireReponses[idx]) {
+        const btnActif = group.querySelector(`button[data-valeur="${questionnaireReponses[idx]}"]`);
+        if(btnActif) btnActif.classList.add("actif");
+      }
+    });
+    miseAJourBarreProgressionSDT();
+  }
+  // Événements
+  document.getElementById("genererMessageBtn")?.addEventListener("click", genererAvecInclusionAI);
+  document.getElementById("sauvegarderEvalBtn")?.addEventListener("click", sauvegarderEvaluation);
+  document.getElementById("chargerProfilBtn")?.addEventListener("click", () => { const sel = document.getElementById("selectProfilEtudiant").value; if(sel) chargerProfilEtudiant(sel); });
+  document.getElementById("curseurRegularite")?.addEventListener("input", synchroniserControles);
+  document.getElementById("curseurEcheances")?.addEventListener("input", synchroniserControles);
+  document.getElementById("selectPatternEffort")?.addEventListener("change", synchroniserControles);
+  document.getElementById("appliquerQuestionnaireBtn")?.addEventListener("click", () => { toutActualiser(); });
+  // Initialisation
+  initOnglets();
+  initialiserQuestionnaire();
+  initialiserEtoilesExpert();
+  toutActualiser();
+  mettreAJourBarreConfiance();
+</script>
+</body>
+</html>