Harmonise les marges et restructure les sections pour proposer les boutons...

Harmonise les marges et restructure les sections pour proposer les boutons ouvrir / fermer, y compris pour les autres paramètres (mécanisme commun sur ce commit - à changer)

src/lib/components/legislation_view/parameters/VariableReferredParameters.svelte

@@ -221,9 +221,12 @@
     class:mt-5={billDecomposition?.children !== undefined}
   ></div>
 
-  <div class="relative bg-white pl-8 pr-2 sm:pr-4">
-    <!-- Pictos absolus + sticky -->
-    <div class="absolute left-0 top-2 h-full pl-4 pr-2">
+  <div class="bg-white pl-8 pr-2 sm:pr-4">
+    <!--PARAMÈTRES PRINCIPAUX-->
+    {#if Object.keys(bothRootDirectParameterById).length > 0}
+      <section class="relative mb-2 pb-4">
+        <!-- Ouvrir tout et fermer tout -->
+        <div class="absolute -left-8 top-2 h-full pl-4 pr-2">
           <div class="sticky top-2 flex flex-col items-start gap-1">
             {#if loadingAllParameters}
               <!-- Loader unique à la place des deux pictos -->
@@ -264,14 +267,14 @@
                   loadingAllParameters = false
                 }}
               >
-            <iconify-icon icon="ri-folder-reduce-line" class="mr-1 text-base"
+                <iconify-icon
+                  icon="ri-folder-reduce-line"
+                  class="mr-1 text-base"
                 ></iconify-icon>
               </button>
             {/if}
           </div>
         </div>
-    {#if Object.keys(bothRootDirectParameterById).length > 0}
-      <section class="mb-2 border-b pb-4">
         <ul>
           {#each [...iterVariableRootParameters(bothRootDirectParameterById, rootParameter, revaluationRootParameter, billRootParameter)] as [bothFilteredParameter, lawParameter, revaluationParameter, billParameter]}
             <li>
@@ -327,23 +330,77 @@
     {/if}
 
     {#if Object.keys(bothRootParameterById).length > 0}
+      <section class="relative mb-10 border-t pb-4 pt-6">
+        <!-- Ouvrir tout et fermer tout -->
+        <div class="absolute -left-8 top-8 h-full pl-4 pr-2">
+          <div class="sticky top-2 flex flex-col items-start gap-1">
+            {#if loadingAllParameters}
+              <!-- Loader unique à la place des deux pictos -->
+              <div
+                class="flex items-center text-xs uppercase tracking-wide text-neutral-400"
+              >
+                <iconify-icon
+                  icon="ri-loader-4-line"
+                  class="mr-1 animate-spin text-base"
+                ></iconify-icon>
+              </div>
+            {:else}
+              <!-- Bouton "Ouvrir tout" -->
+              <button
+                aria-label="Ouvrir tout"
+                title="Ouvrir tout"
+                class="flex cursor-pointer items-center bg-white text-xs uppercase tracking-wide text-neutral-400 hover:text-le-gris-dispositif-dark"
+                onclick={async () => {
+                  loadingAllParameters = true
+                  await new Promise((resolve) => setTimeout(resolve, 500))
+                  openAllParameters = true
+                  loadingAllParameters = false
+                }}
+              >
+                <iconify-icon icon="ri-folder-open-line" class="mr-1 text-base"
+                ></iconify-icon>
+              </button>
+
+              <!-- Bouton "Fermer tout" -->
+              <button
+                aria-label="Fermer tout"
+                title="Fermer tout"
+                class="flex cursor-pointer items-center bg-white text-xs uppercase tracking-wide text-neutral-400 hover:text-le-gris-dispositif-dark"
+                onclick={async () => {
+                  loadingAllParameters = true
+                  await new Promise((resolve) => setTimeout(resolve, 500))
+                  openAllParameters = false
+                  loadingAllParameters = false
+                }}
+              >
+                <iconify-icon
+                  icon="ri-folder-reduce-line"
+                  class="mr-1 text-base"
+                ></iconify-icon>
+              </button>
+            {/if}
+          </div>
+        </div>
+        <div class="pl-2">
           <button
             class="w-full pr-4 pt-1 text-gray-600"
             onclick={() => (openOtherParameters = !openOtherParameters)}
           >
             <div class="flex items-center font-serif">
               <iconify-icon
-            class="mr-1 align-[-0.2rem] text-xl"
+                class="mr-1 align-[-0.2rem] text-xl hover:text-black"
                 icon={openOtherParameters
                   ? "ri-arrow-down-s-line"
                   : "ri-arrow-right-s-line"}
               ></iconify-icon>
-          <span class="">Autres paramètres affectant le dispositif</span>
+              <span class=""
+                >Autres paramètres affectant le dispositif&nbsp;:</span
+              >
             </div>
           </button>
 
           {#if openOtherParameters}
-        <section class="mb-3 ml-2 border-l-2 pb-3 pl-0.5">
+            <div class="ml-2 border-l-2 pl-2">
               <ul>
                 {#each [...iterVariableRootParameters(bothRootParameterById, rootParameter, revaluationRootParameter, billRootParameter)] as [bothFilteredParameter, lawParameter, revaluationParameter, billParameter]}
                   <li>
@@ -362,7 +419,7 @@
                         revaluationParameter={revaluationParameter as
                           | NodeParameter
                           | undefined}
-                    isOtherParametersSection={true}
+                        isOtherParametersdiv={true}
                       />
                     {:else if billParameter.class === ParameterClass.Value}
                       <VariableReferredValueParameter
@@ -372,7 +429,9 @@
                         depth={0}
                         {displayMode}
                         hideNull
-                    lawParameter={lawParameter as ValueParameter | undefined}
+                        lawParameter={lawParameter as
+                          | ValueParameter
+                          | undefined}
                         {name}
                         revaluationParameter={revaluationParameter as
                           | ValueParameter
@@ -385,7 +444,9 @@
                         {date}
                         depth={0}
                         {displayMode}
-                    lawParameter={lawParameter as ScaleParameter | undefined}
+                        lawParameter={lawParameter as
+                          | ScaleParameter
+                          | undefined}
                         {name}
                         revaluationParameter={revaluationParameter as
                           | ScaleParameter
@@ -395,8 +456,10 @@
                   </li>
                 {/each}
               </ul>
-        </section>
+            </div>
           {/if}
+        </div>
+      </section>
     {/if}
   </div>
 {/if}