diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 17f2329455f8b7b76c4a05e313c9d710446b407d..7e1a970774906bc9189a2e2413e0fd99bc4e7e98 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -534,18 +534,35 @@
   <title>Calculs | {$session.title}</title>
 </svelte:head>
 
-<main class="fond flex">
-  <!-- Panneau de gauche les zones éditables par l'utilisateur (amendement)-->
-  {#if displayMode.mode !== "single_test_case" || !displayMode.edit}
+<main class="fond">
+  <div class="flex justify-between h-10 z-50 md:hidden">
+    <div class="w-1/2 flex items-center bg-le-jaune-dark justify-center">
+      <button
+        class="tracking-wider uppercase text-base font-bold text-white  border-b-2 border-white"
+      >
+        Loi
+      </button>
+    </div>
     <div
-      class="bg-white flex-none shadow-xl w-full md:w-1/2"
-      id="situation_left_part_law"
+      class="w-1/2 flex items-center bg-le-jaune-light justify-center shadow-inner"
     >
-      <div class="flex min-h-full ">
-        <!--Partie I Paramètres de la loi-->
-        <div class="z-40 w-2/3 bg-white shadow-xl">
-          <div class="bg-white h-12 flex pr-4 pt-2 justify-end items-start">
-            <!-- {#if displayMode.parametersVariableName !== undefined}
+      <button class="tracking-wider uppercase text-le-jaune-dark ">
+        Impacts
+      </button>
+    </div>
+  </div>
+  <div class="flex">
+    <!-- Panneau de gauche les zones éditables par l'utilisateur (amendement)-->
+    {#if displayMode.mode !== "single_test_case" || !displayMode.edit}
+      <div
+        class="bg-white flex-none shadow-xl w-full md:w-1/2"
+        id="situation_left_part_law"
+      >
+        <div class="flex min-h-full">
+          <!--Partie I Paramètres de la loi-->
+          <div class="z-40 w-2/3 bg-white shadow-xl">
+            <div class="bg-white h-12 flex pr-4 pt-2 justify-end items-start">
+              <!-- {#if displayMode.parametersVariableName !== undefined}
              Searchbar 
               <div
                 class="flex-col px-5 z-50 w-1/4 md:w-2/5 focus-within:w-full hover:w-full placeholdershown:w-full"
@@ -599,47 +616,47 @@
             {/if}
             -->
 
-            <!-- Bouton de fermeture du panneau de gauche -->
-            {#if displayMode.parameterName !== undefined || displayMode.parametersVariableName !== undefined}
-              <button class="h-10" on:click={closeParametersEditionPane}>
-                <svg
-                  class="fill-current text-gray-500 hover:text-black"
-                  xmlns="http://www.w3.org/2000/svg"
-                  height="24px"
-                  viewBox="0 0 24 24"
-                  width="24px"
-                  fill="#000000"
-                  ><path d="M0 0h24v24H0z" fill="none" /><path
-                    d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-                  /></svg
-                ></button
-              >
-            {/if}
-          </div>
+              <!-- Bouton de fermeture du panneau de gauche -->
+              {#if displayMode.parameterName !== undefined || displayMode.parametersVariableName !== undefined}
+                <button class="h-10" on:click={closeParametersEditionPane}>
+                  <svg
+                    class="fill-current text-gray-500 hover:text-black"
+                    xmlns="http://www.w3.org/2000/svg"
+                    height="24px"
+                    viewBox="0 0 24 24"
+                    width="24px"
+                    fill="#000000"
+                    ><path d="M0 0h24v24H0z" fill="none" /><path
+                      d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+                    /></svg
+                  ></button
+                >
+              {/if}
+            </div>
 
-          {#if displayMode.parameterName !== undefined}
-            <h1
-              class="pt-1 md:pt-2 lg:pt-1 font-bold mb-5 ml-5 text-3xl md:text-2xl lg:text-3xl text-black border-b border-black pb-3"
-            >
-              Modifier la loi
-            </h1>
+            {#if displayMode.parameterName !== undefined}
+              <h1
+                class="pt-1 md:pt-2 lg:pt-1 font-bold mb-5 ml-5 text-3xl md:text-2xl lg:text-3xl text-black border-b border-black pb-3"
+              >
+                Modifier la loi
+              </h1>
 
-            <div class="h-[calc(100vh-10.1rem)] overflow-y-auto">
-              <div class="bg-white ml-5">
-                <NonVariableReferredParameter
-                  date={$date}
-                  name={displayMode.parameterName}
-                />
+              <div class="h-[calc(100vh-10.1rem)] overflow-y-auto">
+                <div class="bg-white ml-5">
+                  <NonVariableReferredParameter
+                    date={$date}
+                    name={displayMode.parameterName}
+                  />
+                </div>
               </div>
-            </div>
-          {:else if displayMode.parametersVariableName !== undefined}
-            <h1
-              class="pt-1 md:pt-2 lg:pt-1 font-bold mb-5 ml-5 text-3xl md:text-2xl lg:text-3xl text-black border-b border-black pb-3"
-            >
-              Modifier la loi
-            </h1>
+            {:else if displayMode.parametersVariableName !== undefined}
+              <h1
+                class="pt-1 md:pt-2 lg:pt-1 font-bold mb-5 ml-5 text-3xl md:text-2xl lg:text-3xl text-black border-b border-black pb-3"
+              >
+                Modifier la loi
+              </h1>
 
-            <!-- Menu quand on aura la version abrégée
+              <!-- Menu quand on aura la version abrégée
             <div class="flex space-x-8 mb-8">
               <div>
                 <a class="text-le-bleu text-base lg:text-lg " href="">
@@ -656,66 +673,66 @@
               </div>
             </div>
             -->
-            <div class="h-[calc(100vh-12.1rem)] overflow-y-auto">
-              <div class="bg-white ml-5">
-                <VariableReferredParameters
-                  date={$date}
-                  {displayMode}
-                  name={displayMode.parametersVariableName}
-                />
+              <div class="h-[calc(100vh-12.1rem)] overflow-y-auto">
+                <div class="bg-white ml-5">
+                  <VariableReferredParameters
+                    date={$date}
+                    {displayMode}
+                    name={displayMode.parametersVariableName}
+                  />
+                </div>
               </div>
-            </div>
-          {:else}
-            <h1
-              class="pt-1 md:pt-2 lg:pt-1 font-bold mb-5 ml-5 text-3xl md:text-2xl lg:text-3xl text-black border-b border-black pb-3"
-              use:signalStaticTutorial
-            >
-              Modifier la loi
-            </h1>
+            {:else}
+              <h1
+                class="pt-1 md:pt-2 lg:pt-1 font-bold mb-5 ml-5 text-3xl md:text-2xl lg:text-3xl text-black border-b border-black pb-3"
+                use:signalStaticTutorial
+              >
+                Modifier la loi
+              </h1>
 
-            <div class="h-[calc(100vh-13rem)]">
-              <StartTutorial {displayMode} />
-            </div>
-          {/if}
-        </div>
-        <!--Partie II modification de la loi-->
-        <div class="flex-col z-30 w-1/3 bg-gray-200 shadow-lg">
-          <button
-            class="h-12 ml-2 lg:ml-4 justify-center pt-3 flex items-center text-gray-600 hover:text-black uppercase hover:underline"
-            on:click={reset}
-          >
-            <!-- Material Icon Restart Alt -->
-            <svg
-              class="fill-current mr-1 inline-flex"
-              xmlns="http://www.w3.org/2000/svg"
-              height="16px"
-              viewBox="0 0 24 24"
-              width="16px"
-              fill="#000000"
-            >
-              <path
-                d="M12,5V2L8,6l4,4V7c3.31,0,6,2.69,6,6c0,2.97-2.17,5.43-5,5.91v2.02c3.95-0.49,7-3.85,7-7.93C20,8.58,16.42,5,12,5z"
-              />
-              <path
-                d="M6,13c0-1.65,0.67-3.15,1.76-4.24L6.34,7.34C4.9,8.79,4,10.79,4,13c0,4.08,3.05,7.44,7,7.93v-2.02 C8.17,18.43,6,15.97,6,13z"
-              /></svg
+              <div class="h-[calc(100vh-13rem)]">
+                <StartTutorial {displayMode} />
+              </div>
+            {/if}
+          </div>
+          <!--Partie II modification de la loi-->
+          <div class="flex-col z-30 w-1/3 bg-gray-200 shadow-lg">
+            <button
+              class="h-12 ml-2 lg:ml-4 justify-center pt-3 flex items-center text-gray-600 hover:text-black uppercase hover:underline"
+              on:click={reset}
             >
-            <span class="text-xs md:text-sm"> Réinitialiser</span>
-          </button>
-
-          <h3
-            class="font-light mt-3 lg:mt-2 mr-2 text-xl lg:text-2xl text-black border-b border-black pb-3 "
-            use:signalStaticTutorial
-          >
-            <span class="ml-2 lg:ml-4"> Modifications </span>
-          </h3>
+              <!-- Material Icon Restart Alt -->
+              <svg
+                class="fill-current mr-1 inline-flex"
+                xmlns="http://www.w3.org/2000/svg"
+                height="16px"
+                viewBox="0 0 24 24"
+                width="16px"
+                fill="#000000"
+              >
+                <path
+                  d="M12,5V2L8,6l4,4V7c3.31,0,6,2.69,6,6c0,2.97-2.17,5.43-5,5.91v2.02c3.95-0.49,7-3.85,7-7.93C20,8.58,16.42,5,12,5z"
+                />
+                <path
+                  d="M6,13c0-1.65,0.67-3.15,1.76-4.24L6.34,7.34C4.9,8.79,4,10.79,4,13c0,4.08,3.05,7.44,7,7.93v-2.02 C8.17,18.43,6,15.97,6,13z"
+                /></svg
+              >
+              <span class="text-xs md:text-sm"> Réinitialiser</span>
+            </button>
 
-          <div class="h-[calc(100vh-10rem)] overflow-y-auto">
-            <div
-              class="mt-5 flex-col mx-2 rounded text-xs "
-              id="situation_color_code"
+            <h3
+              class="font-light mt-3 lg:mt-2 mr-2 text-xl lg:text-2xl text-black border-b border-black pb-3 "
+              use:signalStaticTutorial
             >
-              <!--
+              <span class="ml-2 lg:ml-4"> Modifications </span>
+            </h3>
+
+            <div class="h-[calc(100vh-10rem)] overflow-y-auto">
+              <div
+                class="mt-5 flex-col mx-2 rounded text-xs "
+                id="situation_color_code"
+              >
+                <!--
             <p class="mr-1 italic">Légende :</p>
             <div class="flex-col">
               <p class="mr-1 font-bold">Loi en vigueur</p>
@@ -728,32 +745,33 @@
               <p class="bg-le-jaune px-1">Votre réforme</p>
             </div>
             -->
-            </div>
+              </div>
 
-            <ReformsChanges {displayMode} />
+              <ReformsChanges {displayMode} />
+            </div>
           </div>
         </div>
       </div>
-    </div>
-  {/if}
+    {/if}
 
-  <!-- Panneau central pour les impacts -->
-  {#if displayMode.mode === "single_test_case"}
-    <div
-      class="{displayMode.parametersVariableName === 'csg_deductible_salaire' ||
-      displayMode.parametersVariableName === 'csg_imposable_salaire' ||
-      displayMode.parametersVariableName === 'irpp_economique'
-        ? 'h-[calc(100vh-3.5rem)]'
-        : 'h-[calc(100vh-3.5rem)]'} overflow-y-auto w-full md:w-1/2"
-      id="situation_right_part_impacts"
-    >
-      <div class="px-6 lg:px-8">
-        <!--
+    <!-- Panneau central pour les impacts -->
+    {#if displayMode.mode === "single_test_case"}
+      <div
+        class="{displayMode.parametersVariableName ===
+          'csg_deductible_salaire' ||
+        displayMode.parametersVariableName === 'csg_imposable_salaire' ||
+        displayMode.parametersVariableName === 'irpp_economique'
+          ? 'h-[calc(100vh-3.5rem)]'
+          : 'h-[calc(100vh-3.5rem)]'} overflow-y-auto w-full md:w-1/2"
+        id="situation_right_part_impacts"
+      >
+        <div class="px-6 lg:px-8">
+          <!--
         Note: When you change the height below (h-...), don't forget to adjust
         the height of the div enclosing the test cases below.
       -->
-        <div class="flex justify-end">
-          <!-- <label
+          <div class="flex justify-end">
+            <!-- <label
           ><input bind:checked={$adaptAmountsScale} type="checkbox" />
           <span class="hidden text-xs lg:inline text-gray-600">
             Échelle identique pour tous les cas types
@@ -762,7 +780,7 @@
             Échelle unique
           </span></label
         > -->
-          <!-- <select
+            <!-- <select
           class=" rounded border-1 text-xs "
           on:blur={changeBillName}
           on:change={changeBillName}
@@ -774,8 +792,8 @@
           {/each}
         </select> -->
 
-          <div class="h-10 flex pt-2">
-            <!-- <button
+            <div class="h-10 flex pt-2">
+              <!-- <button
             class="flex items-center text-gray-600 hover:text-black pr-3 mr-2 uppercase border-r border-gray-500 hover:underline"
           >
             Remix icon - layout-5-line
@@ -793,40 +811,122 @@
             <span class="text-xs">Focus</span>
           </button> -->
 
-            <button
-              class="flex items-center text-gray-600 hover:text-black uppercase hover:underline pr-2 mr-2 "
-              on:click={shareLink}
-              id="situation_savebutton"
-            >
-              <!-- Material Icon Share -->
-              <svg
-                class="fill-current mr-1 inline-flex"
-                xmlns="http://www.w3.org/2000/svg"
-                height="14px"
-                viewBox="0 0 24 24"
-                width="14px"
-                fill="#000000"
-                ><path d="M0 0h24v24H0z" fill="none" /><path
-                  d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"
-                />
-              </svg>
-              <span class="text-xs md:text-sm"> Sauvegarder / partager</span>
-            </button>
+              <button
+                class="flex items-center text-gray-600 hover:text-black uppercase hover:underline pr-2 mr-2 "
+                on:click={shareLink}
+                id="situation_savebutton"
+              >
+                <!-- Material Icon Share -->
+                <svg
+                  class="fill-current mr-1 inline-flex"
+                  xmlns="http://www.w3.org/2000/svg"
+                  height="14px"
+                  viewBox="0 0 24 24"
+                  width="14px"
+                  fill="#000000"
+                  ><path d="M0 0h24v24H0z" fill="none" /><path
+                    d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"
+                  />
+                </svg>
+                <span class="text-xs md:text-sm"> Sauvegarder / partager</span>
+              </button>
+            </div>
           </div>
-        </div>
-        {#if displayMode.parametersVariableName === "csg_deductible_salaire" || displayMode.parametersVariableName === "csg_imposable_salaire"}
-          <h2
-            class="font-bold mb-3 pt-4 lg:pt-3 text-3xl md:text-2xl lg:text-3xl text-black"
-          >
-            Impacts recettes CSG de la Sécurité sociale
-          </h2>
-          <div class="flex-col justify-start">
-            <div class="flex">
+          {#if displayMode.parametersVariableName === "csg_deductible_salaire" || displayMode.parametersVariableName === "csg_imposable_salaire"}
+            <h2
+              class="font-bold mb-3 pt-4 lg:pt-3 text-3xl md:text-2xl lg:text-3xl text-black"
+            >
+              Impacts recettes CSG de la Sécurité sociale
+            </h2>
+            <div class="flex-col justify-start">
+              <div class="flex">
+                <div
+                  class="flex grow-0 bg-gray-300 text-black uppercase text-sm rounded-lg focus:outline-none hover:text-white shadow-md hover:bg-le-bleu items-center"
+                >
+                  <a
+                    href="https://budget.leximpact.an.fr/authentication/signin/leximpact?redirect=/budget"
+                    title="Vers le simulateur CSG Budget de la Sécurité sociale"
+                  >
+                    <div class="m-1 flex items-center">
+                      <svg
+                        class="ml-2"
+                        width="30"
+                        height="30"
+                        viewBox="0 0 40 40"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                        ><path
+                          fill="#2A6797"
+                          d="M2 11c-2 0-2 2-2 2v21s0 2 2 2h32c2 0 2-2 2-2V13s0-2-2-2H2z"
+                        /><path
+                          fill="#5DADEC"
+                          d="M2 6C0 6 0 8 0 8v20s0 2 2 2h32c2 0 2-2 2-2V8s0-2-2-2H2z"
+                        /><circle fill="#4289C1" cx="25" cy="18" r="6.5" /><path
+                          fill="#2A6797"
+                          d="M33 28.5H3c-.827 0-1.5-.673-1.5-1.5V9c0-.827.673-1.5 1.5-1.5h30c.827 0 1.5.673 1.5 1.5v18c0 .827-.673 1.5-1.5 1.5zM3 8.5a.5.5 0 0 0-.5.5v18c0 .275.225.5.5.5h30c.275 0 .5-.225.5-.5V9a.5.5 0 0 0-.5-.5H3z"
+                        /><path fill="#FFE8B6" d="M14 6h8v24.062h-8z" /><path
+                          fill="#FFAC33"
+                          d="M14 30h8v6h-8z"
+                        /><path
+                          fill="#2A6797"
+                          d="M12.764 21.84c0 .658-1.474 1.447-3.301 1.447c-2.42 0-3.877-1.681-4.361-3.742H3.808a.57.57 0 1 1 0-1.139h1.129c-.008-.136-.029-.27-.029-.406c0-.3.026-.597.063-.89H3.808a.57.57 0 1 1 0-1.14h1.416c.593-1.835 2.03-3.257 4.313-3.257c1.84 0 3.008.993 3.008 1.519c0 .336-.205.612-.526.612c-.584 0-.876-1.022-2.482-1.022c-1.51 0-2.428.942-2.891 2.147h3.327a.57.57 0 1 1 0 1.14H6.351a6.246 6.246 0 0 0-.072.891c0 .134.016.27.025.405h3.668a.57.57 0 1 1 0 1.139H6.485c.389 1.43 1.346 2.631 2.978 2.631c1.563 0 2.25-.934 2.79-.934c.307.001.511.235.511.599z"
+                        /></svg
+                      >
+                      <div class="inline-block ml-2 text-center">
+                        Simulateur macro CSG
+                      </div>
+                      <!-- Material icon: key fill-->
+                      <svg
+                        class="fill-current inline-flex rounded mx-2"
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 24 24"
+                        width="18"
+                        height="18"
+                        ><path fill="none" d="M0 0h24v24H0z" /><path
+                          d="M17 14h-4.341a6 6 0 1 1 0-4H23v4h-2v4h-4v-4zM7 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"
+                        /></svg
+                      >
+                    </div>
+                  </a>
+                </div>
+              </div>
+            </div>
+            <div class="mt-5 xl:flex justify-start items-center">
+              <div>
+                <h2
+                  class="font-bold mb-3 pt-4 lg:pt-3 text-3xl md:text-2xl lg:text-3xl text-black"
+                >
+                  Impacts cas type/an
+                </h2>
+              </div>
+              <div class="xl:ml-4 mb-3 xl:mb-0">
+                <select
+                  class="w-80 text-xs md:text-sm text-gray-600 hover:text-black border-b border-gray-600 hover:border-black bg-transparent "
+                  on:blur={changeTestCaseIndex}
+                  on:change={changeTestCaseIndex}
+                  value={$testCaseIndex}
+                >
+                  {#each $testCases as situation, situationIndex}
+                    <option
+                      class="w-80 bg-white py-1 text-sm"
+                      value={situationIndex}>{situation.title}</option
+                    >
+                  {/each}
+                </select>
+              </div>
+            </div>
+          {:else if displayMode.parametersVariableName === "irpp_economique"}
+            <h2
+              class="font-bold mb-3 pt-4 lg:pt-3 text-3xl md:text-2xl lg:text-3xl text-black"
+            >
+              Impacts recettes IR de l'État
+            </h2>
+            <div class="flex justify-start">
               <div
-                class="flex grow-0 bg-gray-300 text-black uppercase text-sm rounded-lg focus:outline-none hover:text-white shadow-md hover:bg-le-bleu items-center"
+                class=" grow-0 bg-gray-300 text-black uppercase text-sm rounded-lg focus:outline-none hover:text-white shadow-md hover:bg-le-bleu items-center"
               >
                 <a
-                  href="https://budget.leximpact.an.fr/authentication/signin/leximpact?redirect=/budget"
+                  href="https://leximpact.an.fr/ir?popin=connection"
                   title="Vers le simulateur CSG Budget de la Sécurité sociale"
                 >
                   <div class="m-1 flex items-center">
@@ -855,7 +955,7 @@
                       /></svg
                     >
                     <div class="inline-block ml-2 text-center">
-                      Simulateur macro CSG
+                      Simulateur macro IR
                     </div>
                     <!-- Material icon: key fill-->
                     <svg
@@ -872,248 +972,109 @@
                 </a>
               </div>
             </div>
-          </div>
-          <div class="mt-5 xl:flex justify-start items-center">
-            <div>
-              <h2
-                class="font-bold mb-3 pt-4 lg:pt-3 text-3xl md:text-2xl lg:text-3xl text-black"
-              >
-                Impacts cas type/an
-              </h2>
-            </div>
-            <div class="xl:ml-4 mb-3 xl:mb-0">
-              <select
-                class="w-80 text-xs md:text-sm text-gray-600 hover:text-black border-b border-gray-600 hover:border-black bg-transparent "
-                on:blur={changeTestCaseIndex}
-                on:change={changeTestCaseIndex}
-                value={$testCaseIndex}
-              >
-                {#each $testCases as situation, situationIndex}
-                  <option
-                    class="w-80 bg-white py-1 text-sm"
-                    value={situationIndex}>{situation.title}</option
-                  >
-                {/each}
-              </select>
-            </div>
-          </div>
-        {:else if displayMode.parametersVariableName === "irpp_economique"}
-          <h2
-            class="font-bold mb-3 pt-4 lg:pt-3 text-3xl md:text-2xl lg:text-3xl text-black"
-          >
-            Impacts recettes IR de l'État
-          </h2>
-          <div class="flex justify-start">
-            <div
-              class=" grow-0 bg-gray-300 text-black uppercase text-sm rounded-lg focus:outline-none hover:text-white shadow-md hover:bg-le-bleu items-center"
-            >
-              <a
-                href="https://leximpact.an.fr/ir?popin=connection"
-                title="Vers le simulateur CSG Budget de la Sécurité sociale"
-              >
-                <div class="m-1 flex items-center">
-                  <svg
-                    class="ml-2"
-                    width="30"
-                    height="30"
-                    viewBox="0 0 40 40"
-                    fill="none"
-                    xmlns="http://www.w3.org/2000/svg"
-                    ><path
-                      fill="#2A6797"
-                      d="M2 11c-2 0-2 2-2 2v21s0 2 2 2h32c2 0 2-2 2-2V13s0-2-2-2H2z"
-                    /><path
-                      fill="#5DADEC"
-                      d="M2 6C0 6 0 8 0 8v20s0 2 2 2h32c2 0 2-2 2-2V8s0-2-2-2H2z"
-                    /><circle fill="#4289C1" cx="25" cy="18" r="6.5" /><path
-                      fill="#2A6797"
-                      d="M33 28.5H3c-.827 0-1.5-.673-1.5-1.5V9c0-.827.673-1.5 1.5-1.5h30c.827 0 1.5.673 1.5 1.5v18c0 .827-.673 1.5-1.5 1.5zM3 8.5a.5.5 0 0 0-.5.5v18c0 .275.225.5.5.5h30c.275 0 .5-.225.5-.5V9a.5.5 0 0 0-.5-.5H3z"
-                    /><path fill="#FFE8B6" d="M14 6h8v24.062h-8z" /><path
-                      fill="#FFAC33"
-                      d="M14 30h8v6h-8z"
-                    /><path
-                      fill="#2A6797"
-                      d="M12.764 21.84c0 .658-1.474 1.447-3.301 1.447c-2.42 0-3.877-1.681-4.361-3.742H3.808a.57.57 0 1 1 0-1.139h1.129c-.008-.136-.029-.27-.029-.406c0-.3.026-.597.063-.89H3.808a.57.57 0 1 1 0-1.14h1.416c.593-1.835 2.03-3.257 4.313-3.257c1.84 0 3.008.993 3.008 1.519c0 .336-.205.612-.526.612c-.584 0-.876-1.022-2.482-1.022c-1.51 0-2.428.942-2.891 2.147h3.327a.57.57 0 1 1 0 1.14H6.351a6.246 6.246 0 0 0-.072.891c0 .134.016.27.025.405h3.668a.57.57 0 1 1 0 1.139H6.485c.389 1.43 1.346 2.631 2.978 2.631c1.563 0 2.25-.934 2.79-.934c.307.001.511.235.511.599z"
-                    /></svg
-                  >
-                  <div class="inline-block ml-2 text-center">
-                    Simulateur macro IR
-                  </div>
-                  <!-- Material icon: key fill-->
-                  <svg
-                    class="fill-current inline-flex rounded mx-2"
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 24 24"
-                    width="18"
-                    height="18"
-                    ><path fill="none" d="M0 0h24v24H0z" /><path
-                      d="M17 14h-4.341a6 6 0 1 1 0-4H23v4h-2v4h-4v-4zM7 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"
-                    /></svg
-                  >
-                </div>
-              </a>
-            </div>
-          </div>
-          <div class="mt-5 xl:flex justify-start items-center">
-            <div>
-              <h2
-                class="font-bold mb-3 pt-4 lg:pt-3 text-3xl md:text-2xl lg:text-3xl text-black"
-              >
-                Impacts cas type/an
-              </h2>
-            </div>
-            <div class="xl:ml-4 mb-3 xl:mb-0">
-              <select
-                class="w-80 text-xs md:text-sm text-gray-600 hover:text-black border-b border-gray-600 hover:border-black bg-transparent "
-                on:blur={changeTestCaseIndex}
-                on:change={changeTestCaseIndex}
-                value={$testCaseIndex}
-              >
-                {#each $testCases as situation, situationIndex}
-                  <option
-                    class="w-80 bg-white py-1 text-sm"
-                    value={situationIndex}>{situation.title}</option
-                  >
-                {/each}
-              </select>
-            </div>
-          </div>
-        {:else}
-          <div class="xl:flex justify-start items-center">
-            <div>
-              <h2
-                class="font-bold mb-3 pt-4 lg:pt-3 text-3xl md:text-2xl lg:text-3xl text-black"
-              >
-                Impacts cas type/an
-              </h2>
+            <div class="mt-5 xl:flex justify-start items-center">
+              <div>
+                <h2
+                  class="font-bold mb-3 pt-4 lg:pt-3 text-3xl md:text-2xl lg:text-3xl text-black"
+                >
+                  Impacts cas type/an
+                </h2>
+              </div>
+              <div class="xl:ml-4 mb-3 xl:mb-0">
+                <select
+                  class="w-80 text-xs md:text-sm text-gray-600 hover:text-black border-b border-gray-600 hover:border-black bg-transparent "
+                  on:blur={changeTestCaseIndex}
+                  on:change={changeTestCaseIndex}
+                  value={$testCaseIndex}
+                >
+                  {#each $testCases as situation, situationIndex}
+                    <option
+                      class="w-80 bg-white py-1 text-sm"
+                      value={situationIndex}>{situation.title}</option
+                    >
+                  {/each}
+                </select>
+              </div>
             </div>
-            <div class="xl:ml-4 mb-3 xl:mb-0">
-              <select
-                class="w-80 text-xs md:text-sm text-gray-600 hover:text-black border-b border-gray-600 hover:border-black bg-transparent "
-                on:blur={changeTestCaseIndex}
-                on:change={changeTestCaseIndex}
-                value={$testCaseIndex}
-              >
-                {#each $testCases as situation, situationIndex}
-                  <option
-                    class="w-80 bg-white py-1 text-sm"
-                    value={situationIndex}>{situation.title}</option
-                  >
-                {/each}
-              </select>
+          {:else}
+            <div class="xl:flex justify-start items-center">
+              <div>
+                <h2
+                  class="font-bold mb-3 pt-4 lg:pt-3 text-3xl md:text-2xl lg:text-3xl text-black"
+                >
+                  Impacts cas type/an
+                </h2>
+              </div>
+              <div class="xl:ml-4 mb-3 xl:mb-0">
+                <select
+                  class="w-80 text-xs md:text-sm text-gray-600 hover:text-black border-b border-gray-600 hover:border-black bg-transparent "
+                  on:blur={changeTestCaseIndex}
+                  on:change={changeTestCaseIndex}
+                  value={$testCaseIndex}
+                >
+                  {#each $testCases as situation, situationIndex}
+                    <option
+                      class="w-80 bg-white py-1 text-sm"
+                      value={situationIndex}>{situation.title}</option
+                    >
+                  {/each}
+                </select>
+              </div>
             </div>
-          </div>
-        {/if}
+          {/if}
 
-        <!-- Cas types avec leur waterfall -->
-        <div class="">
-          <TestCaseView
-            decompositionByName={$decompositionByName}
-            displayMode={asSingleTestCaseDisplayMode(displayMode)}
-            on:changeDecompositionByName={({ detail }) =>
-              changeDecompositionByName($testCaseIndex, detail)}
-            on:changeSituation={({ detail }) =>
-              changeSituation($testCaseIndex, detail)}
-            on:toggleEdit={() => toggleEdit()}
-            situation={$testCases[$testCaseIndex]}
-            situationIndex={$testCaseIndex}
-            year={$year}
-          />
+          <!-- Cas types avec leur waterfall -->
+          <div class="">
+            <TestCaseView
+              decompositionByName={$decompositionByName}
+              displayMode={asSingleTestCaseDisplayMode(displayMode)}
+              on:changeDecompositionByName={({ detail }) =>
+                changeDecompositionByName($testCaseIndex, detail)}
+              on:changeSituation={({ detail }) =>
+                changeSituation($testCaseIndex, detail)}
+              on:toggleEdit={() => toggleEdit()}
+              situation={$testCases[$testCaseIndex]}
+              situationIndex={$testCaseIndex}
+              year={$year}
+            />
+          </div>
         </div>
       </div>
-    </div>
-  {/if}
+    {/if}
 
-  <!-- Panneau de droite pour l'édition de cas types -->
+    <!-- Panneau de droite pour l'édition de cas types -->
 
-  {#if displayMode.mode === "single_test_case" && displayMode.edit}
-    <div class="w-full md:w-1/2 bg-gray-300 shadow-lg z-40">
-      <div class="h-8 flex pt-3 justify-end mx-5">
-        <button
-          class="flex items-center text-gray-600 hover:text-black  uppercase hover:underline"
-          on:click={() => toggleEdit()}
-          title="Fermer l'édition du cas type"
-        >
-          <span class="text-xs">Quitter l'édition</span>
-          <!-- Material-icon : Close -->
-          <svg
-            class="fill-current inline-flex"
-            xmlns="http://www.w3.org/2000/svg"
-            height="18px"
-            viewBox="0 0 24 24"
-            width="18px"
-            fill="#000000"
+    {#if displayMode.mode === "single_test_case" && displayMode.edit}
+      <div class="w-full md:w-1/2 bg-gray-300 shadow-lg z-40">
+        <div class="h-8 flex pt-3 justify-end mx-5">
+          <button
+            class="flex items-center text-gray-600 hover:text-black  uppercase hover:underline"
+            on:click={() => toggleEdit()}
+            title="Fermer l'édition du cas type"
           >
-            <path d="M0 0h24v24H0z" fill="none" />
-            <path
-              d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-            />
-          </svg>
-        </button>
-      </div>
-
-      <div class="h-[calc(100vh-7.8rem)] overflow-y-auto">
-        <TestCaseEdit
-          inputInstantsByVariableName={$inputInstantsByVariableNameArray[
-            displayMode.testCaseIndex
-          ]}
-          on:changeInputInstantsByVariableName={({ detail }) =>
-            changeInputInstantsByVariableName(
-              asDisplayModeWithTestCase(displayMode).testCaseIndex,
-              detail,
-            )}
-          on:changeSituation={({ detail }) =>
-            changeSituation(
-              asDisplayModeWithTestCase(displayMode).testCaseIndex,
-              detail,
-            )}
-          situation={$testCases[displayMode.testCaseIndex]}
-          situationIndex={displayMode.testCaseIndex}
-          valuesByCalculationNameByVariableName={$valuesByCalculationNameByVariableNameArray[
-            displayMode.testCaseIndex
-          ]}
-          year={$year}
-        />
-        <div
-          class="bg-le-bleu-light text-gray-700 text-sm rounded p-2 shadow-md m-4"
-        >
-          <p class="px-2 pb-1">
-            <span class="font-bold"
-              >Vous avez besoin de configurer plus précisemment votre cas type ?</span
+            <span class="text-xs">Quitter l'édition</span>
+            <!-- Material-icon : Close -->
+            <svg
+              class="fill-current inline-flex"
+              xmlns="http://www.w3.org/2000/svg"
+              height="18px"
+              viewBox="0 0 24 24"
+              width="18px"
+              fill="#000000"
             >
-            Contactez-nous sur
-            <a
-              class="underline hover:text-le-bleu"
-              href="mailto:leximpact@an.fr">leximpact@an.fr</a
-            >.
-          </p>
-          <div class="bg-white text-gray-700 text-xs m-1 p-2 rounded">
-            <p>
-              ⚠️ Le mode d'édition avancée est fonctionnel mais encore difficile
-              d'accès. Si vous avez besoin d'utiliser votre cas type dans un
-              amendement, nous vous proposons une relecture.
-            </p>
-            <p class="mt-2">
-              Pour cela, utilisez la fonctionnalité "Sauvegarder/Partager" et
-              transmettez-nous le lien de votre copie de travail ainsi qu'un
-              résumé du cas type que vous cherchez à concevoir.
-            </p>
-          </div>
+              <path d="M0 0h24v24H0z" fill="none" />
+              <path
+                d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+              />
+            </svg>
+          </button>
         </div>
-        {#if displayMode.variableName === undefined}
-          <h2 class="text-xl pt-3 ml-4 mb-2">Ajouter des caractéristiques :</h2>
-          <p class="text-sm mx-4 text-gray-700 mb-10">
-            <span class="font-sm">↖️ Cliquez sur le nom d'un dispositif</span>
-            affiché sur le cas type pour éditer les variables entrant dans le calcul
-            de ce dispositif.
-          </p>
-        {:else}
-          <VariableReferredInputsPane
-            date={$date}
+
+        <div class="h-[calc(100vh-7.8rem)] overflow-y-auto">
+          <TestCaseEdit
             inputInstantsByVariableName={$inputInstantsByVariableNameArray[
               displayMode.testCaseIndex
             ]}
-            name={displayMode.variableName}
             on:changeInputInstantsByVariableName={({ detail }) =>
               changeInputInstantsByVariableName(
                 asDisplayModeWithTestCase(displayMode).testCaseIndex,
@@ -1131,10 +1092,71 @@
             ]}
             year={$year}
           />
-        {/if}
+          <div
+            class="bg-le-bleu-light text-gray-700 text-sm rounded p-2 shadow-md m-4"
+          >
+            <p class="px-2 pb-1">
+              <span class="font-bold"
+                >Vous avez besoin de configurer plus précisemment votre cas type
+                ?</span
+              >
+              Contactez-nous sur
+              <a
+                class="underline hover:text-le-bleu"
+                href="mailto:leximpact@an.fr">leximpact@an.fr</a
+              >.
+            </p>
+            <div class="bg-white text-gray-700 text-xs m-1 p-2 rounded">
+              <p>
+                ⚠️ Le mode d'édition avancée est fonctionnel mais encore
+                difficile d'accès. Si vous avez besoin d'utiliser votre cas type
+                dans un amendement, nous vous proposons une relecture.
+              </p>
+              <p class="mt-2">
+                Pour cela, utilisez la fonctionnalité "Sauvegarder/Partager" et
+                transmettez-nous le lien de votre copie de travail ainsi qu'un
+                résumé du cas type que vous cherchez à concevoir.
+              </p>
+            </div>
+          </div>
+          {#if displayMode.variableName === undefined}
+            <h2 class="text-xl pt-3 ml-4 mb-2">
+              Ajouter des caractéristiques :
+            </h2>
+            <p class="text-sm mx-4 text-gray-700 mb-10">
+              <span class="font-sm">↖️ Cliquez sur le nom d'un dispositif</span>
+              affiché sur le cas type pour éditer les variables entrant dans le calcul
+              de ce dispositif.
+            </p>
+          {:else}
+            <VariableReferredInputsPane
+              date={$date}
+              inputInstantsByVariableName={$inputInstantsByVariableNameArray[
+                displayMode.testCaseIndex
+              ]}
+              name={displayMode.variableName}
+              on:changeInputInstantsByVariableName={({ detail }) =>
+                changeInputInstantsByVariableName(
+                  asDisplayModeWithTestCase(displayMode).testCaseIndex,
+                  detail,
+                )}
+              on:changeSituation={({ detail }) =>
+                changeSituation(
+                  asDisplayModeWithTestCase(displayMode).testCaseIndex,
+                  detail,
+                )}
+              situation={$testCases[displayMode.testCaseIndex]}
+              situationIndex={displayMode.testCaseIndex}
+              valuesByCalculationNameByVariableName={$valuesByCalculationNameByVariableNameArray[
+                displayMode.testCaseIndex
+              ]}
+              year={$year}
+            />
+          {/if}
+        </div>
       </div>
-    </div>
-  {/if}
+    {/if}
+  </div>
 </main>
 
 <style>
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 3ab19f744a3004f2f5a171427701efc01e1f33c1..5bd9b64c43236874ed7234229de4e781e674a4cb 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -43,6 +43,7 @@ const config = {
         gray: colors.neutral,
         "le-bleu": "#343bff",
         "le-bleu-light": "#d2dfff",
+        "le-jaune-light": "#EEEA8A",
         "le-jaune": "#ded500",
         "le-jaune-dark": "#a6a00c",
         "le-rouge-bill": "#ff6b6b",