Changement couleur colonne de gauche et ajout de padding

src/lib/components/scholar_waterfalls/ScholarWaterfall.svelte

@@ -231,11 +231,12 @@
 </script>
 
 {#if nodes.length > 0}
-  <div class="flex mx-1">
-    <div class="flex flex-col w-5/12">
+  <div class="flex border-b border-gray-300">
+    <!-- Navigation dispositifs-->
+    <div class="bg-le-bleu-light flex flex-col w-5/12 px-2 py-5">
       {#each nodes as node, index}
         <div
-          class="border-t border-transparent flex font-extralight font-serif h-6 my-1 text-blue-900 text-sm whitespace-nowrap hover:whitespace-normal"
+          class="border-t border-transparent flex font-extralight font-serif h-6 my-1 text-le-bleu hover:font-bold text-sm whitespace-nowrap hover:whitespace-normal"
         >
           <span
             class="cursor-pointer hover:font-bold overflow-ellipsis overflow-x-hidden hover:overflow-x-visible hover:underline"
@@ -244,19 +245,21 @@
           >
           {#if togglableParentNode($decompositionByName, node)}
             <button
-              class="hover:bg-le-bleu-light border border-gray-300 font-bold ml-1 px-1 rounded-full text-gray-300 text-sm"
+              class="hover:border-2 hover:font-bold border border-le-bleu font-bold ml-1 px-1 rounded-full text-le-bleu text-sm"
               on:click={() => zoomOut(node.parentName)}>-</button
             >
           {/if}
           {#if (!node.open && node.childrenName !== undefined) || node.previousChildStack !== undefined}
             <button
-              class="hover:bg-le-bleu-light border border-gray-300 font-bold ml-1 px-1 rounded-full text-gray-300 text-sm"
+              class="hover:border-2 border border-le-bleu font-bold ml-1 px-1 rounded-full text-le-bleu text-sm"
               on:click={() => zoomIn(node.name)}>+</button
             >
           {/if}
         </div>
       {/each}
     </div>
+    <!-- ticket de caisse-->
+    <div class="flex pt-5">
       <div class="flex flex-col ">
         {#each nodes as node, index}
           <div
@@ -278,18 +281,21 @@
           >
             {#if node.open || index === 0}{firstDeltaFormatter.format(
                 node.delta[vectorIndex],
-            )}{:else}{deltaFormatter.format(node.delta[vectorIndex])}{/if}
+              )}{:else}{deltaFormatter.format(node.delta[vectorIndex])}
+            {/if}
           </div>
         {/each}
       </div>
+    </div>
+    <!-- Waterfall-->
     <div
-      class="flex flex-1 flex-col ml-1 min-w-min"
+      class="flex flex-1 flex-col ml-1 min-w-min pt-5"
       bind:offsetWidth={waterfallWidth}
     >
       {#each nodes as node, index}
         <div
           class="{node.open || index === 0
-            ? 'bg-le-bleu-light'
+            ? 'bg-gray-200'
             : node.values[vectorIndex][0] <= node.values[vectorIndex][1]
             ? 'bg-green-500'
             : 'bg-red-500'} border-t border-transparent h-6 my-1"