infos dans bulles hover

web/themes/custom/reha/dist/css/bundle.css

@@ -3293,6 +3293,12 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
   margin-left: 12.5%;
 }
 
+.page-mon-espace-de-travail {
+  /* On cache le texte mais on le garde accessible */
+  /* On crée l’icône "i" */
+  /* Tooltip : on réaffiche le vrai texte stocké */
+  /* Affichage au survol */
+}
 .page-mon-espace-de-travail .layout-content {
   padding-bottom: 3rem;
   width: 80%;
@@ -3350,6 +3356,51 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
 .page-mon-espace-de-travail .paragraph-type--dossier h4 {
   display: none;
 }
+.page-mon-espace-de-travail .description {
+  position: relative;
+  display: inline-block;
+  color: transparent; /* rend le texte invisible */
+  font-size: 0; /* supprime l'espace du texte */
+}
+.page-mon-espace-de-travail .description::before {
+  content: "i";
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  line-height: 20px;
+  border-radius: 50%;
+  background-color: #333;
+  color: #fff;
+  text-align: center;
+  font-weight: bold;
+  font-size: 14px;
+  cursor: pointer;
+  font-family: Arial, sans-serif;
+}
+.page-mon-espace-de-travail .description::after {
+  content: attr(data-text); /* On va injecter le texte via un attribut */
+  visibility: hidden;
+  opacity: 0;
+  width: 250px;
+  background-color: #333;
+  color: #fff;
+  text-align: left;
+  border-radius: 6px;
+  padding: 8px;
+  position: absolute;
+  z-index: 1;
+  top: 120%;
+  left: 50%;
+  transform: translateX(-50%);
+  transition: opacity 0.3s;
+  font-size: 13px;
+  line-height: 1.4;
+  pointer-events: none;
+}
+.page-mon-espace-de-travail .description:hover::after {
+  visibility: visible;
+  opacity: 1;
+}
 
 .field--name-field-dossier-de-pilotage h4 ::after {
   content: "";