Ajout d'un back-ground white à côté des bordures de gauches des enfants d'un dispositif sélectionné

src/lib/components/WaterfallView.svelte

@@ -370,10 +370,9 @@
         <!-- Ligne de la feuille de paie-->
         <div
           class="flex min-h-8 justify-between border-t border-gray-200 px-4"
-          class:bg-gray-200={trunk && index !== 0}
+          class:bg-gray-100={trunk && index !== 0}
           class:border-gray-400={trunk && index !== 0}
-          class:bg-gray-100={decomposition.name ===
-            displayMode.parametersVariableName}
+          class:fond={decomposition.name === displayMode.parametersVariableName}
           class:text-lg={decomposition.name ===
             displayMode.parametersVariableName}
           class:bg-gray-50={displayMode.parametersVariableName &&
@@ -401,7 +400,7 @@
                       >
                         <!-- Nom de la variable tronc, cliquable -->
                         <a
-                          class="cursor-pointer overflow-x-hidden text-ellipsis text-gray-600 hover:z-20 hover:overflow-x-visible hover:bg-white hover:bg-opacity-90 hover:pr-1 hover:text-le-gris-dispositif-dark hover:underline"
+                          class="cursor-pointer overflow-x-hidden text-ellipsis text-gray-500 hover:z-20 hover:overflow-x-visible hover:bg-white hover:bg-opacity-90 hover:pr-1 hover:text-le-gris-dispositif-dark hover:underline"
                           class:font-bold={decomposition.name ===
                             displayMode.parametersVariableName}
                           class:hover:absolute={decomposition.name !==
@@ -432,7 +431,7 @@
                         <!--Indentation pour chaque niveau de l'arbre, illustré par une bordure-->
                         {#each iterToDepth(depth)}
                           <div
-                            class="ml-1 mr-2 min-h-full border-l-2 border-gray-400"
+                            class="min-h-full border-l-2 border-gray-400 bg-white pl-1 pr-2"
                           >
                             &nbsp;
                           </div>
@@ -502,7 +501,7 @@
 
                           {#each iterToDepth(depth)}
                             <div
-                              class="ml-1 mr-2 min-h-full border-l-2 border-gray-400"
+                              class="min-h-full border-l-2 border-gray-400 bg-white pl-1 pr-2"
                             >
                               &nbsp;
                             </div>
@@ -528,7 +527,7 @@
                         <!--Indentation pour chaque niveau de l'arbre, illustré par une bordure-->
                         {#each iterToDepth(depth)}
                           <div
-                            class="ml-1 mr-2 min-h-full border-l-2 border-gray-400"
+                            class="min-h-full border-l-2 border-gray-400 bg-white pl-1 pr-2"
                           >
                             &nbsp;
                           </div>
@@ -561,7 +560,7 @@
                             decomposition.label}</button
                         >
                         <button
-                          class="text-black"
+                          class="gtext-black"
                           aria-label={decomposition.open
                             ? "Ouvrir variables enfants"
                             : "Fermer"}
@@ -584,13 +583,13 @@
 
                           {#each iterToDepth(depth)}
                             <div
-                              class="ml-1 mr-2 min-h-full border-l-2 border-gray-400"
+                              class="min-h-full border-l-2 border-gray-400 bg-white pl-1 pr-2"
                             >
                               &nbsp;
                             </div>
                           {/each}
                           <div
-                            class="ml-1 mr-2 flex grow border-dashed border-gray-400"
+                            class="flex grow border-dashed border-gray-400 pr-2"
                             class:border-l-0={!decomposition.open}
                             class:border-l-2={decomposition.open}
                             class:pl-0.5={!decomposition.open}
@@ -818,3 +817,11 @@
     />
   {/if}
 {/if}
+
+<style lang="postcss">
+  .fond {
+    background-color: #ffffff;
+    /* Polka dots - Heropatterns.com échelle réduite */
+    background-image: url("data:image/svg+xml,%3Csvg width='7' height='7' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23C0C0C0' fill-opacity='0.4' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E");
+  }
+</style>

src/lib/components/WaterfallViewFocusDispositif.svelte

@@ -28,7 +28,7 @@
   class="mb-2 flex w-full grow flex-col border-gray-400"
   id="situation_{situationIndex}_totalimpact"
 >
-  <div class="w-full py-3 pl-2">
+  <div class="w-full py-3 pl-5">
     <!--MONTANT DISPOSITIF SELECTIONNE-->
     {#if displayMode.parametersVariableName !== undefined}
       <!-- Note: A reform variable is always more complete than a variable before reform. -->