Surlignage multicolore si plusieurs lexiques

src/sidebar/sidebar.html

@@ -296,14 +296,30 @@
     }
 
     .lexicon-highlight {
-      background-color: var(--highlight-color, rgba(255, 255, 0, 0.3));
-      border-bottom: 1px dashed #666;
+      position: relative;           /* Pour positionner le conteneur de bandes en absolu */
+      display: inline-block;        /* Pour que le span prenne en compte les dimensions */
+      padding-bottom: 4px;          /* Laisser de l'espace pour les bandes */
+      border-bottom: 1px dashed #666; /* Vous pouvez conserver votre bordure si besoin */
       transition: background-color 0.3s;
+      background-color: rgba(255, 255, 0, 0.15);
+
+    }
+
+    .color-bands {
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      height: 3px;      /* Ajustez la hauteur des bandes */
+      display: flex;    /* Pour répartir équitablement les bandes */
     }
-    .lexicon-highlight:hover {
-      background-color: var(--highlight-color-hover, rgba(255, 255, 0, 0.5));
+
+    .color-bands div {
+      flex: 1;          /* Chaque bande occupe une part égale */
+      height: 100%;
     }
 
+
     .lexicon-section {
       margin-bottom: 10px;
     }