diff --git a/static/js/main.js b/static/js/main.js
index cab15b574e1050c7ff4b4c4c9dacb2476648c0e1..364b475d849830f31d0f311db7c524ad902f8448 100644
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -1491,56 +1491,42 @@ svg.append("g")
           gradient.append("stop").attr("offset", "0%").attr("stop-color", "lightblue");
           gradient.append("stop").attr("offset", "100%").attr("stop-color", "darkblue");
           
-          const legend = svg.append("g")
-  .attr("transform", `translate(${width / 2 - 100}, ${-height / 2 })`); // Position en haut à droite
-
-// Titre de la légende
-legend.append("text")
-  .attr("y", -10)
-  .attr("x", 0)
-  .text("Durée de sommeil")
-  .attr("font-size", "9px") // Taille réduite
-  .attr("text-anchor", "start")
-  .attr("font-weight", "bold");
-
-// Barre dégradée pour la durée de sommeil
-legend.append("rect")
-  .attr("x", 0)
-  .attr("y", 0)
-  .attr("width", 60) // Réduction de la largeur
-  .attr("height", 6) // Réduction de la hauteur
-  .style("fill", "url(#gradient)");
-
-// Min et Max valeurs pour le sommeil
-legend.append("text")
-  .attr("x", 0)
-  .attr("y", 15) // Position ajustée pour aligner sous la barre
-  .text("Min")
-  .attr("font-size", "7px") // Taille encore réduite
-  .attr("text-anchor", "start");
-
-legend.append("text")
-  .attr("x", 60) // Aligné avec la fin de la barre
-  .attr("y", 15) // Position ajustée pour aligner sous la barre
-  .text("Max")
-  .attr("font-size", "7px") // Taille encore réduite
-  .attr("text-anchor", "end");
-
-// Rectangle gris pour les valeurs manquantes
-legend.append("rect")
-  .attr("x", 0)
-  .attr("y", 25) // Position ajustée sous les min/max
-  .attr("width", 60) // Largeur alignée avec la barre dégradée
-  .attr("height", 6) // Hauteur réduite
-  .style("fill", "#ccc");
+          const legendTooltip = d3.select("body").append("div")
+  .attr("class", "tooltip-legend")
+  .style("position", "absolute")
+  .style("padding", "10px")
+  .style("background", "#fff")
+  .style("border", "1px solid #ccc")
+  .style("border-radius", "5px")
+  .style("box-shadow", "0 4px 8px rgba(0, 0, 0, 0.1)") // Ajout d'un effet d'ombre
+  .style("font-size", "12px") // Police ajustée
+  .style("display", "none");
+
+// Extraction des valeurs dynamiques pour Min et Max
+const sleepMin = d3.min(processedData, (d) => d[sleepKey]);
+const sleepMax = d3.max(processedData, (d) => d[sleepKey]);
+
+// Afficher la légende au survol
+svg.on("mouseover", (event) => {
+  legendTooltip.style("display", "block")
+    .style("left", `${event.pageX + 10}px`)
+    .style("top", `${event.pageY}px`)
+    .html(`
+      <strong>Durée de sommeil</strong><br>
+      <div style="width: 100px; height: 10px; background: linear-gradient(lightblue, darkblue); margin-top: 5px;"></div>
+      <div style="display: flex; justify-content: space-between; margin-top: 5px;">
+        <small>${sleepMin.toFixed(1)}h</small>
+        <small>${sleepMax.toFixed(1)}h</small>
+      </div>
+      <div style="width: 100px; height: 10px; background: #ccc; margin-top: 10px;"></div>
+      <small style="display: block; text-align: center; margin-top: 5px;">Valeurs manquantes</small>
+    `);
+});
 
-// Texte pour les valeurs manquantes
-legend.append("text")
-  .attr("x", 0)
-  .attr("y", 40) // Position ajustée sous le rectangle gris
-  .text("Valeurs manquantes")
-  .attr("font-size", "7px") // Taille réduite
-  .attr("text-anchor", "start");
+// Masquer la légende
+svg.on("mouseout", () => {
+  legendTooltip.style("display", "none");
+});
 
         
       });