diff --git a/src/app.postcss b/src/app.postcss
index 55101502655c6aa89045177d262a4613aea6ae3e..ab642b313082586039f23e8f4b2bc0937b2b25c6 100644
--- a/src/app.postcss
+++ b/src/app.postcss
@@ -21,4 +21,7 @@
   .link2 {
     @apply underline hover:text-gray-800;
   }
+  .opacity-0-unclickable {
+    @apply opacity-0 pointer-events-none;
+  }
 }
diff --git a/src/lib/components/test_cases/TestCaseEdit.svelte b/src/lib/components/test_cases/TestCaseEdit.svelte
index bcaf458a39bedc6b0ad7deef4644712116bb726b..3d99ddc6c7fd80968188d1dd63f34e2d7ac99ded 100644
--- a/src/lib/components/test_cases/TestCaseEdit.svelte
+++ b/src/lib/components/test_cases/TestCaseEdit.svelte
@@ -51,6 +51,9 @@
       .map(([name]) => name),
   )
 
+  $: inputInstantsByVariableName ??= {}
+  $: situation ??= {}
+
   $: persons = Object.entries(
     (situation[personEntity.key_plural] ?? {}) as {
       [id: string]: PopulationWithoutId
diff --git a/src/lib/components/test_cases/TestCaseSummary.svelte b/src/lib/components/test_cases/TestCaseSummary.svelte
index 9b5b467cdf027c9884d2337d5fec3c33c58847f2..715330d673bdeb93bb7ab88070eb5f62aee191d0 100644
--- a/src/lib/components/test_cases/TestCaseSummary.svelte
+++ b/src/lib/components/test_cases/TestCaseSummary.svelte
@@ -389,39 +389,39 @@
 
   {#if mode === "view"}
     <div class="flex items-end gap-8">
-      {#if displayMode.edit === undefined}
-        {#if mode === "view"}
-          <button
-            class="flex text-sm uppercase text-gray-600 hover:text-black"
-            on:click={() => (isTestCaseCompareModalOpen = true)}
-            title="Comparer ce cas type avec un autre"
-            id="situation_{situationIndex}_compare"
-            ><span>
+      {#if mode === "view"}
+        <button
+                class="flex text-sm uppercase text-gray-600 hover:text-black transition-opacity ease duration-500"
+                class:opacity-0-unclickable={displayMode.edit !== undefined}
+                on:click={() => (isTestCaseCompareModalOpen = true)}
+                title="Comparer ce cas type avec un autre"
+                id="situation_{situationIndex}_compare"
+        ><span>
               <iconify-icon
-                icon="ri-user-shared-2-fill"
-                class="align-[-0.2rem] text-lg"
+                      icon="ri-user-shared-2-fill"
+                      class="align-[-0.2rem] text-lg"
               />
               <iconify-icon
-                icon="ri-user-line"
-                class="-ml-1 mr-1 align-[-0.2rem] text-lg"
+                      icon="ri-user-line"
+                      class="-ml-1 mr-1 align-[-0.2rem] text-lg"
               />
             </span>
-            comparer
-          </button>
-        {/if}
-        <button
-          class="flex text-sm uppercase text-gray-600 hover:text-black"
-          on:click={() => dispatch("changeTestCaseToEditIndex", situationIndex)}
-          title="Éditer ce cas type"
-          id="situation_{situationIndex}_edit"
-        >
-          <iconify-icon
-            icon="ri-pencil-fill"
-            class="mr-1 align-[-0.2rem] text-lg"
-          />
-          <span class="hidden sm:flex">éditer</span>
+          comparer
         </button>
       {/if}
+      <button
+              class="flex text-sm uppercase text-gray-600 hover:text-black transition-opacity ease duration-500"
+              class:opacity-0-unclickable={displayMode.edit !== undefined}
+              on:click={() => dispatch("changeTestCaseToEditIndex", situationIndex)}
+              title="Éditer ce cas type"
+              id="situation_{situationIndex}_edit"
+      >
+        <iconify-icon
+                icon="ri-pencil-fill"
+                class="mr-1 align-[-0.2rem] text-lg"
+        />
+        <span class="hidden sm:flex">éditer</span>
+      </button>
     </div>
   {/if}
 </div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index a3bbee2ba63c82a63b74965f040df1086c2855bb..bb6e1029198a25652d18721bbf6ed23e5f216601 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -666,84 +666,91 @@
   }
 
   let validateBtnHeight = 0;
+
+  function onKeyDown(e) {
+    switch (e.keyCode) {
+      case 13: // 'Enter' key
+        if (displayMode.edit !== undefined) changeTestCaseToEditIndex(undefined)
+    }
+  }
 </script>
 
-<svelte:window bind:innerWidth={windowInnerWidth} />
+<svelte:window bind:innerWidth={windowInnerWidth} on:keydown={onKeyDown} />
 <svelte:head>
   <title>Calculs | {data.title}</title>
 </svelte:head>
 
-{#if displayMode.edit === undefined}
-  <div
-          class="sticky top-0 z-50 flex h-10 min-h-10 w-full justify-between shadow-md md:hidden"
-  >
-    <!--Onglets - MOBILE-->
-    <a
-            class="flex w-1/2 items-center justify-center text-base uppercase tracking-wider"
-            class:font-bold={displayMode.mobileLaw}
-            class:text-white={displayMode.mobileLaw}
-            class:bg-le-jaune-dark={displayMode.mobileLaw}
-            class:shadow-inner={displayMode.mobileLaw}
-            class:bg-le-jaune-light={!displayMode.mobileLaw}
-            class:text-le-jaune-dark={!displayMode.mobileLaw}
-            href={newSimulationUrl({
-        ...displayMode,
-        mobileLaw: true,
-      })}
-            data-sveltekit-noscroll
+<main class="fond flex-1 flex h-full overflow-x-clip md:overflow-hidden">
+  <div class="flex-[1_0_100%] flex flex-col overflow-x-clip md:overflow-hidden transition-transform ease-in-out-quart duration-500"
+       class:!translate-x-[-50%]={displayMode.edit !== undefined}>
+    <div
+            class="sticky top-0 z-50 flex h-10 min-h-10 w-full justify-between shadow-md md:hidden"
     >
-      <div
-              class:border-b-2={displayMode.mobileLaw}
-              class:border-white={displayMode.mobileLaw}
+      <!--Onglets - MOBILE-->
+      <a
+              class="flex w-1/2 items-center justify-center text-base uppercase tracking-wider"
+              class:font-bold={displayMode.mobileLaw}
+              class:text-white={displayMode.mobileLaw}
+              class:bg-le-jaune-dark={displayMode.mobileLaw}
+              class:shadow-inner={displayMode.mobileLaw}
+              class:bg-le-jaune-light={!displayMode.mobileLaw}
+              class:text-le-jaune-dark={!displayMode.mobileLaw}
+              href={newSimulationUrl({
+      ...displayMode,
+      mobileLaw: true,
+    })}
+              data-sveltekit-noscroll
       >
-        Loi
-      </div>
-    </a>
-    <a
-            class="flex w-1/2 items-center justify-center text-base uppercase tracking-wider"
-            class:font-bold={!displayMode.mobileLaw}
-            class:text-white={!displayMode.mobileLaw}
-            class:bg-le-jaune-dark={!displayMode.mobileLaw}
-            class:shadow-inner-={!displayMode.mobileLaw}
-            class:bg-le-jaune-light={displayMode.mobileLaw}
-            class:text-le-jaune-very-dark={displayMode.mobileLaw}
-            href={newSimulationUrl({
-        ...displayMode,
-        mobileLaw: undefined,
-      })}
-            data-sveltekit-noscroll
-    >
-      <div
-              class:border-b-2={!displayMode.mobileLaw}
-              class:border-white={!displayMode.mobileLaw}
+        <div
+                class:border-b-2={displayMode.mobileLaw}
+                class:border-white={displayMode.mobileLaw}
+        >
+          Loi
+        </div>
+      </a>
+      <a
+              class="flex w-1/2 items-center justify-center text-base uppercase tracking-wider"
+              class:font-bold={!displayMode.mobileLaw}
+              class:text-white={!displayMode.mobileLaw}
+              class:bg-le-jaune-dark={!displayMode.mobileLaw}
+              class:shadow-inner-={!displayMode.mobileLaw}
+              class:bg-le-jaune-light={displayMode.mobileLaw}
+              class:text-le-jaune-very-dark={displayMode.mobileLaw}
+              href={newSimulationUrl({
+      ...displayMode,
+      mobileLaw: undefined,
+    })}
+              data-sveltekit-noscroll
       >
-        Impacts
-      </div>
+        <div
+                class:border-b-2={!displayMode.mobileLaw}
+                class:border-white={!displayMode.mobileLaw}
+        >
+          Impacts
+        </div>
 
-      {#if Object.keys($parametricReform).length !== 0 && displayMode.mobileLaw}
-        <span class="flex h-3 w-3">
-          <span
-                  class="absolute inline-flex h-3 w-3 animate-ping rounded-full bg-le-jaune-dark bg-opacity-90"
-          />
-          <span class="relative inline-flex h-3 w-3 rounded-full bg-le-jaune" />
-        </span>
-      {/if}
-    </a>
-  </div>
-{/if}
+        {#if Object.keys($parametricReform).length !== 0 && displayMode.mobileLaw}
+      <span class="flex h-3 w-3">
+        <span
+                class="absolute inline-flex h-3 w-3 animate-ping rounded-full bg-le-jaune-dark bg-opacity-90"
+        />
+        <span class="relative inline-flex h-3 w-3 rounded-full bg-le-jaune" />
+      </span>
+        {/if}
+      </a>
+    </div>
 
-<main class="fond flex-1 md:overflow-hidden">
-  <div class="flex md:h-full">
-    <!-- Panneau de gauche les zones éditables par l'utilisateur (amendement)-->
-    {#if displayMode.edit === undefined}
+    <div class="flex flex-1 overflow-x-hidden">
+      <!-- Panneau de gauche les zones éditables par l'utilisateur (amendement)-->
       <div
-              class="w-full flex-none bg-white md:block md:w-1/2"
-              class:hidden={!displayMode.mobileLaw}
+              class="flex h-fit md:!h-full bg-white overflow-y-scroll md:overflow-visible md:z-10 flex-[1_0_100%] md:flex-[1_0_50%] md:translate-x-0 transition-transform ease-in-out-quart duration-500"
+              class:translate-x-[-100%]={!displayMode.mobileLaw}
+              class:!h-screen={!displayMode.mobileLaw}
               id="situation_left_part_law"
       >
         <div class="flex min-h-full">
           <!--Partie I Paramètres de la loi-->
-          <div class="w-full bg-white md:w-2/3">
+          <div class="w-full bg-white md:w-2/3 overflow-y-scroll">
             <h1
                     class="mb-5 ml-5 hidden border-b border-black pb-3 text-3xl font-bold text-black md:flex md:pt-12 md:text-2xl lg:pt-11 lg:text-3xl"
             >
@@ -803,9 +810,9 @@
                   <a
                           class="text-sm uppercase text-gray-600 hover:text-black"
                           href={newSimulationUrl({
-                      ...displayMode,
-                      parametersVariableName: "csg_imposable_salaire",
-                    })}
+                    ...displayMode,
+                    parametersVariableName: "csg_imposable_salaire",
+                  })}
                   >
                     CSG - part imposable<iconify-icon
                           class="ml-1 align-[-0.23rem] text-lg"
@@ -818,9 +825,9 @@
                   <a
                           class="flex items-center text-sm uppercase text-gray-600 hover:text-black"
                           href={newSimulationUrl({
-                      ...displayMode,
-                      parametersVariableName: "csg_deductible_salaire",
-                    })}
+                    ...displayMode,
+                    parametersVariableName: "csg_deductible_salaire",
+                  })}
                   >
                     CSG - part déductible<iconify-icon
                           class="ml-1 align-[-0.2rem] text-lg"
@@ -830,7 +837,7 @@
                 </div>
               {/if}
 
-              <div class="overflow-y-auto md:h-[calc(100vh-12.8rem)]">
+              <div class="overflow-y-auto">
                 <h1
                         class="ml-3 flex border-b border-black pt-3 pb-3 text-2xl font-bold text-black md:hidden"
                 >
@@ -845,8 +852,8 @@
                       <button
                               class="place-self-start text-lg font-light"
                               on:click={() => {
-                          modificationsOpen = !modificationsOpen
-                        }}
+                        modificationsOpen = !modificationsOpen
+                      }}
                       >
                         {#if !modificationsOpen}
                           <iconify-icon
@@ -907,9 +914,9 @@
                     <a
                             class="text-sm uppercase text-gray-600 hover:text-black"
                             href={newSimulationUrl({
-                        ...displayMode,
-                        parametersVariableName: "csg_imposable_salaire",
-                      })}
+                      ...displayMode,
+                      parametersVariableName: "csg_imposable_salaire",
+                    })}
                     >
                       CSG - part imposable<iconify-icon
                             class="ml-1 align-[-0.23rem] text-lg"
@@ -922,9 +929,9 @@
                     <a
                             class="text-sm uppercase text-gray-600 hover:text-black"
                             href={newSimulationUrl({
-                        ...displayMode,
-                        parametersVariableName: "csg_deductible_salaire",
-                      })}
+                      ...displayMode,
+                      parametersVariableName: "csg_deductible_salaire",
+                    })}
                     >
                       CSG - part déductible<iconify-icon
                             class="ml-1 align-[-0.23rem] text-lg"
@@ -957,8 +964,8 @@
                     <button
                             class="place-self-start text-lg font-light"
                             on:click={() => {
-                        modificationsOpen = !modificationsOpen
-                      }}
+                      modificationsOpen = !modificationsOpen
+                    }}
                     >
                       {#if !modificationsOpen}
                         <iconify-icon
@@ -1039,67 +1046,67 @@
           </div>
         </div>
       </div>
-    {/if}
 
-    <!-- Panneau central pour les impacts -->
+      <!-- Panneau central pour les impacts -->
 
-    <!--
-            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="md:block w-full overflow-y-scroll md:w-1/2"
-            class:hidden={displayMode.mobileLaw || displayMode.edit !== undefined}
-            id="situation_right_part_impacts"
-    >
-      <!--en-tête-->
+      <!--
+              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="sticky top-0 z-25 mb-4 flex flex-col border-b bg-yellow-50 md:pl-3 md:pr-6 lg:pl-5 lg:pr-8"
+              class="h-fit md:!h-full md:block overflow-y-scroll flex-[1_0_100%] md:flex-[1_0_50%] md:translate-x-0 transition-transform ease-in-out-quart duration-500"
+              class:translate-x-[-100%]={!displayMode.mobileLaw}
+              class:!h-screen={displayMode.mobileLaw}
+              id="situation_right_part_impacts"
       >
-        <!--
-          <select
-            class="rounded border-1 text-xs"
-            on:blur={changeBillName}
-            on:change={changeBillName}
-            value={$billName}
-          >
-            <option value={undefined}>Pas de projet/proposition de loi</option>
-            {#each metadata.reforms as { label, name }}
-              <option value={name}>{label}</option>
-            {/each}
-          </select>
-        -->
-        <!--Bouton sauvegarder partager-->
-
-        <button
-                class="h-9 place-self-end px-4 pt-1 text-sm uppercase text-gray-500 hover:text-black md:px-0"
-                on:click={shareLink}
-                id="situation_savebutton"
-                title="Sauvegarder/partager votre écran de travail tel qu'il est visible actuellement"
+        <!--en-tête-->
+        <div
+                class="sticky top-0 z-25 mb-4 flex flex-col border-b bg-yellow-50 md:pl-3 md:pr-6 lg:pl-5 lg:pr-8"
         >
-          <iconify-icon
-                  class="mr-1 align-[-0.2rem] text-base"
-                  icon="ri-share-fill"
-          />
-          Sauvegarder / partager
-        </button>
-
-        <!--Affichage du titre "impacts" et onglets de choix cas types ou budget-->
-
-        {#if displayMode.parametersVariableName !== undefined && budgetVariablesName.has(displayMode.parametersVariableName)}
-          <div class="flex items-center justify-center md:justify-start">
-            <a
-                    data-sveltekit-noscroll
-                    href={newSimulationUrl({
+          <!--
+            <select
+              class="rounded border-1 text-xs"
+              on:blur={changeBillName}
+              on:change={changeBillName}
+              value={$billName}
+            >
+              <option value={undefined}>Pas de projet/proposition de loi</option>
+              {#each metadata.reforms as { label, name }}
+                <option value={name}>{label}</option>
+              {/each}
+            </select>
+          -->
+          <!--Bouton sauvegarder partager-->
+
+          <button
+                  class="h-9 place-self-end px-4 pt-1 text-sm uppercase text-gray-500 hover:text-black md:px-0"
+                  on:click={shareLink}
+                  id="situation_savebutton"
+                  title="Sauvegarder/partager votre écran de travail tel qu'il est visible actuellement"
+          >
+            <iconify-icon
+                    class="mr-1 align-[-0.2rem] text-base"
+                    icon="ri-share-fill"
+            />
+            Sauvegarder / partager
+          </button>
+
+          <!--Affichage du titre "impacts" et onglets de choix cas types ou budget-->
+
+          {#if displayMode.parametersVariableName !== undefined && budgetVariablesName.has(displayMode.parametersVariableName)}
+            <div class="flex items-center justify-center md:justify-start">
+              <a
+                      data-sveltekit-noscroll
+                      href={newSimulationUrl({
                 ...displayMode,
                 budget: undefined,
               })}
-            >
-              <div
-                      class="flex h-14 items-center px-3 pb-1 text-2xl text-black  sm:text-3xl md:px-1 md:text-xl lg:px-2 lg:text-2xl xl:px-3 xl:text-3xl"
-                      class:border-b-4={!displayMode.budget}
-                      class:border-black={!displayMode.budget}
               >
+                <div
+                        class="flex h-14 items-center px-3 pb-1 text-2xl text-black  sm:text-3xl md:px-1 md:text-xl lg:px-2 lg:text-2xl xl:px-3 xl:text-3xl"
+                        class:border-b-4={!displayMode.budget}
+                        class:border-black={!displayMode.budget}
+                >
                 <span
                         class="hidden tracking-wide sm:flex"
                         class:text-black={!displayMode.budget}
@@ -1108,28 +1115,28 @@
                 >
                   Impact cas type
                 </span>
-                <span
-                        class="flex tracking-wide sm:hidden"
-                        class:text-black={!displayMode.budget}
-                        class:font-bold={!displayMode.budget}
-                        class:hover:text-le-bleu={displayMode.budget}
-                >
+                  <span
+                          class="flex tracking-wide sm:hidden"
+                          class:text-black={!displayMode.budget}
+                          class:font-bold={!displayMode.budget}
+                          class:hover:text-le-bleu={displayMode.budget}
+                  >
                   Cas type
                 </span>
-              </div>
-            </a>
-            <a
-                    data-sveltekit-noscroll
-                    href={newSimulationUrl({
+                </div>
+              </a>
+              <a
+                      data-sveltekit-noscroll
+                      href={newSimulationUrl({
                 ...displayMode,
                 budget: true,
               })}
-            >
-              <div
-                      class="flex h-14 items-center px-3  text-2xl text-black sm:text-3xl md:px-1 md:text-xl lg:px-2 lg:text-2xl xl:px-3 xl:text-3xl"
-                      class:border-b-4={displayMode.budget}
-                      class:border-black={displayMode.budget}
               >
+                <div
+                        class="flex h-14 items-center px-3  text-2xl text-black sm:text-3xl md:px-1 md:text-xl lg:px-2 lg:text-2xl xl:px-3 xl:text-3xl"
+                        class:border-b-4={displayMode.budget}
+                        class:border-black={displayMode.budget}
+                >
                 <span
                         class="hidden tracking-wide sm:flex"
                         class:text-black={displayMode.budget}
@@ -1139,32 +1146,32 @@
                 >
                   Impact budgétaire
                 </span>
-                <span
-                        class="flex tracking-wide sm:hidden"
-                        class:text-black={displayMode.budget}
-                        class:font-bold={displayMode.budget}
-                        class:hover:text-le-bleu={!displayMode.budget}
-                        class:pb-2={!displayMode.budget}
-                >
+                  <span
+                          class="flex tracking-wide sm:hidden"
+                          class:text-black={displayMode.budget}
+                          class:font-bold={displayMode.budget}
+                          class:hover:text-le-bleu={!displayMode.budget}
+                          class:pb-2={!displayMode.budget}
+                  >
                   Budget
                 </span>
-              </div>
-            </a>
-          </div>
-        {:else if displayMode.parametersVariableName === undefined}
-          <div class="flex items-center justify-center md:justify-start">
-            <a
-                    data-sveltekit-noscroll
-                    href={newSimulationUrl({
+                </div>
+              </a>
+            </div>
+          {:else if displayMode.parametersVariableName === undefined}
+            <div class="flex items-center justify-center md:justify-start">
+              <a
+                      data-sveltekit-noscroll
+                      href={newSimulationUrl({
                 ...displayMode,
                 budget: undefined,
               })}
-            >
-              <div
-                      class="flex h-14 items-center px-3 pb-1 text-2xl text-black  sm:text-3xl md:px-1 md:text-xl lg:px-2 lg:text-2xl xl:px-3 xl:text-3xl"
-                      class:border-b-4={!displayMode.budget}
-                      class:border-black={!displayMode.budget}
               >
+                <div
+                        class="flex h-14 items-center px-3 pb-1 text-2xl text-black  sm:text-3xl md:px-1 md:text-xl lg:px-2 lg:text-2xl xl:px-3 xl:text-3xl"
+                        class:border-b-4={!displayMode.budget}
+                        class:border-black={!displayMode.budget}
+                >
                 <span
                         class="hidden tracking-wide sm:flex"
                         class:text-black={!displayMode.budget}
@@ -1173,28 +1180,28 @@
                 >
                   Impact cas type
                 </span>
-                <span
-                        class="flex tracking-wide sm:hidden"
-                        class:text-black={!displayMode.budget}
-                        class:font-bold={!displayMode.budget}
-                        class:hover:text-le-bleu={displayMode.budget}
-                >
+                  <span
+                          class="flex tracking-wide sm:hidden"
+                          class:text-black={!displayMode.budget}
+                          class:font-bold={!displayMode.budget}
+                          class:hover:text-le-bleu={displayMode.budget}
+                  >
                   Cas type
                 </span>
-              </div>
-            </a>
-            <a
-                    data-sveltekit-noscroll
-                    href={newSimulationUrl({
+                </div>
+              </a>
+              <a
+                      data-sveltekit-noscroll
+                      href={newSimulationUrl({
                 ...displayMode,
                 budget: true,
               })}
-            >
-              <div
-                      class="flex h-14 items-center px-3  text-2xl text-black sm:text-3xl md:px-1 md:text-xl lg:px-2 lg:text-2xl xl:px-3 xl:text-3xl"
-                      class:border-b-4={displayMode.budget}
-                      class:border-black={displayMode.budget}
               >
+                <div
+                        class="flex h-14 items-center px-3  text-2xl text-black sm:text-3xl md:px-1 md:text-xl lg:px-2 lg:text-2xl xl:px-3 xl:text-3xl"
+                        class:border-b-4={displayMode.budget}
+                        class:border-black={displayMode.budget}
+                >
                 <span
                         class="hidden tracking-wide sm:flex"
                         class:text-black={displayMode.budget}
@@ -1204,46 +1211,46 @@
                 >
                   Impact budgétaire
                 </span>
-                <span
-                        class="flex tracking-wide sm:hidden"
-                        class:text-black={displayMode.budget}
-                        class:font-bold={displayMode.budget}
-                        class:hover:text-le-bleu={!displayMode.budget}
-                        class:pb-2={!displayMode.budget}
-                >
+                  <span
+                          class="flex tracking-wide sm:hidden"
+                          class:text-black={displayMode.budget}
+                          class:font-bold={displayMode.budget}
+                          class:hover:text-le-bleu={!displayMode.budget}
+                          class:pb-2={!displayMode.budget}
+                  >
                   Budget
                 </span>
-              </div>
-            </a>
-          </div>
-        {:else}
-          <div>
-            <h2 class="flex">
-              <div
-                      class="flex h-14 items-center border-b-4  border-black px-3 text-2xl text-black sm:text-3xl md:px-1 md:text-xl lg:px-2 lg:text-2xl xl:px-3 xl:text-3xl"
-              >
+                </div>
+              </a>
+            </div>
+          {:else}
+            <div>
+              <h2 class="flex">
+                <div
+                        class="flex h-14 items-center border-b-4  border-black px-3 text-2xl text-black sm:text-3xl md:px-1 md:text-xl lg:px-2 lg:text-2xl xl:px-3 xl:text-3xl"
+                >
                 <span class="pb-2 font-bold tracking-wide text-black">
                   Impact cas type
                 </span>
-              </div>
+                </div>
 
-              <div
-                      id="onglet-impact-budgetaire"
-                      class="flex h-14 items-center px-3 text-2xl text-black sm:text-3xl md:px-1 md:text-xl lg:px-2 lg:text-2xl xl:px-3 xl:text-3xl"
-              >
+                <div
+                        id="onglet-impact-budgetaire"
+                        class="flex h-14 items-center px-3 text-2xl text-black sm:text-3xl md:px-1 md:text-xl lg:px-2 lg:text-2xl xl:px-3 xl:text-3xl"
+                >
                 <span class="pb-2 tracking-wide text-gray-300">
                   Impact budgétaire
                 </span>
-              </div>
-              {#if displayMode.parametersVariableName !== undefined}
-                {@const variable =
-                        variableSummaryByName[displayMode.parametersVariableName]}
-                <Popover
-                        class="m-10 w-80 text-sm font-light shadow-2xl"
-                        placement="bottom"
-                        title="Impact budgétaire indisponible"
-                        triggeredBy="#onglet-impact-budgetaire"
-                >
+                </div>
+                {#if displayMode.parametersVariableName !== undefined}
+                  {@const variable =
+                          variableSummaryByName[displayMode.parametersVariableName]}
+                  <Popover
+                          class="m-10 w-80 text-sm font-light shadow-2xl"
+                          placement="bottom"
+                          title="Impact budgétaire indisponible"
+                          triggeredBy="#onglet-impact-budgetaire"
+                  >
                   <span class="text-black">
                     Le calcul des impacts budgétaires du dispositif «&nbsp;{variable.short_label ??
                   variable.label ??
@@ -1257,316 +1264,316 @@
                       ></span
                     >
                   </span>
-                </Popover>
-              {/if}
-            </h2>
-          </div>
-        {/if}
-      </div>
-      <!--Impacts-->
-      <div class="px-0 md:px-6 lg:px-8 ">
-        {#if displayMode.budget && displayMode.parametersVariableName !== undefined && budgetVariablesName.has(displayMode.parametersVariableName)}
-          {#if user === undefined}
-            <div class="my-10 mx-5 flex flex-col justify-center md:mx-10">
-              <h3 class="text-center text-xl text-black ">
-                Vous êtes parlementaire* ? <br /><span class="font-bold"
-              >Identifiez-vous pour accéder aux impacts budgétaires&nbsp;:</span
-              >
-              </h3>
-              <div class="mt-5 mb-10 grow-0 place-self-center">
-                <a
-                        class="rounded-lg bg-le-bleu py-2 px-4 text-center text-lg uppercase text-white  drop-shadow-md hover:bg-blue-900"
-                        data-sveltekit-reload
-                        href={`/auth/login?redirect=${encodeURIComponent(
+                  </Popover>
+                {/if}
+              </h2>
+            </div>
+          {/if}
+        </div>
+        <!--Impacts-->
+        <div class="px-0 md:px-6 lg:px-8 md:mb-4">
+          {#if displayMode.budget && displayMode.parametersVariableName !== undefined && budgetVariablesName.has(displayMode.parametersVariableName)}
+            {#if user === undefined}
+              <div class="my-10 mx-5 flex flex-col justify-center md:mx-10">
+                <h3 class="text-center text-xl text-black ">
+                  Vous êtes parlementaire* ? <br /><span class="font-bold"
+                >Identifiez-vous pour accéder aux impacts budgétaires&nbsp;:</span
+                >
+                </h3>
+                <div class="mt-5 mb-10 grow-0 place-self-center">
+                  <a
+                          class="rounded-lg bg-le-bleu py-2 px-4 text-center text-lg uppercase text-white  drop-shadow-md hover:bg-blue-900"
+                          data-sveltekit-reload
+                          href={`/auth/login?redirect=${encodeURIComponent(
                     $page.url.toString(),
                   )}`}
-                        title="Vers le simulateur budgétaire de l'impôt sur le revenu"
-                >
-                  <iconify-icon
-                          class="mr-1 align-[-0.4rem] text-2xl"
-                          icon="ri-key-fill"
-                  />
-                  Se&nbsp;connecter
-                </a>
-              </div>
+                          title="Vers le simulateur budgétaire de l'impôt sur le revenu"
+                  >
+                    <iconify-icon
+                            class="mr-1 align-[-0.4rem] text-2xl"
+                            icon="ri-key-fill"
+                    />
+                    Se&nbsp;connecter
+                  </a>
+                </div>
 
-              <p class="text-sm text-black">
-                *Les simulations budgétaires LexImpact s’appuient sur des
-                données représentatives de la population française et protégées.
-                Seules les personnes habilitées peuvent avoir accès à cette
-                partie du simulateur. Pour plus d’informations, veuillez
-                consulter <a
-                      class="link"
-                      href="https://leximpact.an.fr/cgu"
-                      title="Conditions générales d'utilisation de la partie en accès restreint du simulateur"
-              >nos conditions générales d’utilisation</a
-              >.
-              </p>
-            </div>
+                <p class="text-sm text-black">
+                  *Les simulations budgétaires LexImpact s’appuient sur des
+                  données représentatives de la population française et protégées.
+                  Seules les personnes habilitées peuvent avoir accès à cette
+                  partie du simulateur. Pour plus d’informations, veuillez
+                  consulter <a
+                        class="link"
+                        href="https://leximpact.an.fr/cgu"
+                        title="Conditions générales d'utilisation de la partie en accès restreint du simulateur"
+                >nos conditions générales d’utilisation</a
+                >.
+                </p>
+              </div>
+            {/if}
           {/if}
-        {/if}
 
-        {#if displayMode.budget}
-          <div class="mb-6 flex flex-col">
-            {#if $budgetSimulation === undefined}
-              {#if user !== undefined && displayMode.parametersVariableName !== undefined}
-                <div class="z-10 bg-le-jaune bg-opacity-20">
-                  <Spinner />
-                </div>
-              {/if}
-            {:else if displayMode.parametersVariableName === "irpp_economique"}
-              <a
-                      class="mr-4 place-self-end text-sm uppercase text-gray-600 hover:text-black md:mr-0"
-                      data-sveltekit-noscroll
-                      href={newSimulationUrl({
+          {#if displayMode.budget}
+            <div class="mb-6 flex flex-col">
+              {#if $budgetSimulation === undefined}
+                {#if user !== undefined && displayMode.parametersVariableName !== undefined}
+                  <div class="z-10 bg-le-jaune bg-opacity-20">
+                    <Spinner />
+                  </div>
+                {/if}
+              {:else if displayMode.parametersVariableName === "irpp_economique"}
+                <a
+                        class="mr-4 place-self-end text-sm uppercase text-gray-600 hover:text-black md:mr-0"
+                        data-sveltekit-noscroll
+                        href={newSimulationUrl({
                   ...displayMode,
                   budget: true,
                   parametersVariableName: undefined,
                 })}
-              >Changer de dispositif<iconify-icon
-                      class="ml-1 align-[-0.2rem] text-lg"
-                      icon="ri-arrow-up-line"
-              /></a
-              >
-              <h3 class="mx-4 mb-2 text-2xl font-bold md:mx-0">
-                Impôt sur le revenu
-              </h3>
-              <IrBudgetView budgetSimulation={$budgetSimulation} />
-              <IrGagnantsPerdantsView budgetSimulation={$budgetSimulation} />
-            {:else if displayMode.parametersVariableName === "csg_deductible_salaire" || displayMode.parametersVariableName === "csg_imposable_salaire"}
-              <a
-                      class="mr-4 place-self-end  text-sm uppercase text-gray-600 hover:text-black md:mr-0"
-                      data-sveltekit-noscroll
-                      href={newSimulationUrl({
+                >Changer de dispositif<iconify-icon
+                        class="ml-1 align-[-0.2rem] text-lg"
+                        icon="ri-arrow-up-line"
+                /></a
+                >
+                <h3 class="mx-4 mb-2 text-2xl font-bold md:mx-0">
+                  Impôt sur le revenu
+                </h3>
+                <IrBudgetView budgetSimulation={$budgetSimulation} />
+                <IrGagnantsPerdantsView budgetSimulation={$budgetSimulation} />
+              {:else if displayMode.parametersVariableName === "csg_deductible_salaire" || displayMode.parametersVariableName === "csg_imposable_salaire"}
+                <a
+                        class="mr-4 place-self-end  text-sm uppercase text-gray-600 hover:text-black md:mr-0"
+                        data-sveltekit-noscroll
+                        href={newSimulationUrl({
                   ...displayMode,
                   budget: true,
                   parametersVariableName: undefined,
                 })}
-              >Changer de dispositif<iconify-icon
-                      class="ml-1 align-[-0.2rem] text-lg"
-                      icon="ri-arrow-up-line"
-              /></a
-              >
-              <h3 class="mx-4 mb-2 text-2xl font-bold md:mx-0">
-                CSG des revenus d'activité
-                <br /><span class="text-xl font-normal"
-              >Imposable et déductible</span
-              >
-              </h3>
-              <CsgBudgetView budgetSimulation={$budgetSimulation} />
-              <CsgGagnantsPerdantsView budgetSimulation={$budgetSimulation} />
-            {/if}
-          </div>
-          {#if displayMode.parametersVariableName === undefined}
-            <div class="mx-4 text-center md:mx-0 md:text-left">
-              <h3 class="mb-2 text-2xl font-bold">
-                Estimer l'impact budgétaire
-              </h3>
-              <p class="text-base text-black md:mx-0">
-                Le simulateur LexImpact permet l'évaluation d'impacts
-                budgétaires pour les dispositifs suivants :
-              </p>
-              <div class="my-3 flex flex-col justify-center gap-4">
-                <div>
-                  <a
-                          class="rounded-full bg-le-gris-dispositif-light px-3 py-1.5 hover:bg-le-gris-dispositif hover:bg-opacity-60"
-                          href={newSimulationUrl({
+                >Changer de dispositif<iconify-icon
+                        class="ml-1 align-[-0.2rem] text-lg"
+                        icon="ri-arrow-up-line"
+                /></a
+                >
+                <h3 class="mx-4 mb-2 text-2xl font-bold md:mx-0">
+                  CSG des revenus d'activité
+                  <br /><span class="text-xl font-normal"
+                >Imposable et déductible</span
+                >
+                </h3>
+                <CsgBudgetView budgetSimulation={$budgetSimulation} />
+                <CsgGagnantsPerdantsView budgetSimulation={$budgetSimulation} />
+              {/if}
+            </div>
+            {#if displayMode.parametersVariableName === undefined}
+              <div class="mx-4 text-center md:mx-0 md:text-left">
+                <h3 class="mb-2 text-2xl font-bold">
+                  Estimer l'impact budgétaire
+                </h3>
+                <p class="text-base text-black md:mx-0">
+                  Le simulateur LexImpact permet l'évaluation d'impacts
+                  budgétaires pour les dispositifs suivants :
+                </p>
+                <div class="my-3 flex flex-col justify-center gap-4">
+                  <div>
+                    <a
+                            class="rounded-full bg-le-gris-dispositif-light px-3 py-1.5 hover:bg-le-gris-dispositif hover:bg-opacity-60"
+                            href={newSimulationUrl({
                       ...displayMode,
                       parametersVariableName: "irpp_economique",
                     })}
-                  >
-                    Impôt sur le revenu
-                  </a>
-                </div>
-                <div>
-                  <a
-                          class="rounded-full bg-le-gris-dispositif-light px-3 py-1.5 hover:bg-le-gris-dispositif hover:bg-opacity-60"
-                          href={newSimulationUrl({
+                    >
+                      Impôt sur le revenu
+                    </a>
+                  </div>
+                  <div>
+                    <a
+                            class="rounded-full bg-le-gris-dispositif-light px-3 py-1.5 hover:bg-le-gris-dispositif hover:bg-opacity-60"
+                            href={newSimulationUrl({
                       ...displayMode,
                       parametersVariableName: "csg_deductible_salaire",
                     })}
-                  >
-                    CSG des revenus d'activité (déductible)
-                  </a>
-                </div>
-                <div>
-                  <a
-                          class="rounded-full bg-le-gris-dispositif-light px-3 py-1.5  hover:bg-le-gris-dispositif hover:bg-opacity-60"
-                          href={newSimulationUrl({
+                    >
+                      CSG des revenus d'activité (déductible)
+                    </a>
+                  </div>
+                  <div>
+                    <a
+                            class="rounded-full bg-le-gris-dispositif-light px-3 py-1.5  hover:bg-le-gris-dispositif hover:bg-opacity-60"
+                            href={newSimulationUrl({
                       ...displayMode,
                       parametersVariableName: "csg_imposable_salaire",
                     })}
-                  >
-                    CSG des revenus d'activité (imposable)
-                  </a>
+                    >
+                      CSG des revenus d'activité (imposable)
+                    </a>
+                  </div>
                 </div>
               </div>
-            </div>
-          {/if}
-        {:else}
-          {#if $testCasesIndex.length === 1}
-            <button
-                    class="mx-4 mb-3 flex h-8 grow-0 items-center rounded-md bg-gray-300 px-2 py-1 text-sm uppercase text-black shadow-md hover:bg-le-bleu hover:text-white focus:outline-none md:mx-0"
-                    on:click={() => (isTestCaseSelectModalOpen = true)}
-                    title="Choisir un cas type"
-            ><iconify-icon
-                    class="mr-1 align-[-0.2rem] text-lg"
-                    icon="ri-user-search-fill"
-            />Autres cas types</button
-            >
-          {/if}
+            {/if}
+          {:else}
+            {#if $testCasesIndex.length === 1}
+              <button
+                      class="mx-4 mb-3 flex h-8 grow-0 items-center rounded-md bg-gray-300 px-2 py-1 text-sm uppercase text-black shadow-md hover:bg-le-bleu hover:text-white focus:outline-none md:mx-0"
+                      on:click={() => (isTestCaseSelectModalOpen = true)}
+                      title="Choisir un cas type"
+              ><iconify-icon
+                      class="mr-1 align-[-0.2rem] text-lg"
+                      icon="ri-user-search-fill"
+              />Autres cas types</button
+              >
+            {/if}
 
-          {#if displayMode.parametersVariableName === "prime_partage_valeur_exoneree_exceptionnelle" || displayMode.parametersVariableName === "prime_partage_valeur_exoneree" || displayMode.parametersVariableName === "aah" || displayMode.parametersVariableName === "exoneration_cotisations_employeur_tode" || displayMode.parametersVariableName === "taxes_tous_carburants" || displayMode.parametersVariableName === "paje_cmg"}
-            <div class="mb-4 ml-4 flex flex-col md:ml-0">
-              <p class="text-sm">
-                Cas types et situations illustrant le dispositif :
-              </p>
-              <TestCaseExamplesSelectBar {displayMode} />
-            </div>
-          {/if}
-          <TestCaseSelectModal
-                  {displayMode}
-                  bind:isOpen={isTestCaseSelectModalOpen}
-                  on:changeTestCasesIndex
-                  year={$year}
-          />
-          <!-- Cas types avec leur waterfall -->
-          {#if $testCasesIndex.length === 1}
-            <TestCaseView
-                    decompositionByName={$decompositionByName}
+            {#if displayMode.parametersVariableName === "prime_partage_valeur_exoneree_exceptionnelle" || displayMode.parametersVariableName === "prime_partage_valeur_exoneree" || displayMode.parametersVariableName === "aah" || displayMode.parametersVariableName === "exoneration_cotisations_employeur_tode" || displayMode.parametersVariableName === "taxes_tous_carburants" || displayMode.parametersVariableName === "paje_cmg"}
+              <div class="mb-4 ml-4 flex flex-col md:ml-0">
+                <p class="text-sm">
+                  Cas types et situations illustrant le dispositif :
+                </p>
+                <TestCaseExamplesSelectBar {displayMode} />
+              </div>
+            {/if}
+            <TestCaseSelectModal
                     {displayMode}
-                    on:changeDecompositionByName={({ detail }) =>
+                    bind:isOpen={isTestCaseSelectModalOpen}
+                    on:changeTestCasesIndex
+                    year={$year}
+            />
+            <!-- Cas types avec leur waterfall -->
+            {#if $testCasesIndex.length === 1}
+              <TestCaseView
+                      decompositionByName={$decompositionByName}
+                      {displayMode}
+                      on:changeDecompositionByName={({ detail }) =>
                 changeDecompositionByName($testCasesIndex[0], detail)}
-                    on:changeSituation={({ detail }) =>
+                      on:changeSituation={({ detail }) =>
                 changeSituation($testCasesIndex[0], detail)}
-                    on:changeTestCasesIndex={({ detail }) =>
+                      on:changeTestCasesIndex={({ detail }) =>
                 changeTestCasesIndex(detail)}
-                    on:changeTestCaseToEditIndex={({ detail }) =>
+                      on:changeTestCaseToEditIndex={({ detail }) =>
                 changeTestCaseToEditIndex(detail)}
-                    situation={$testCases[$testCasesIndex[0]]}
-                    situationIndex={$testCasesIndex[0]}
-                    valuesByCalculationNameByVariableName={$valuesByCalculationNameByVariableNameArray[
+                      situation={$testCases[$testCasesIndex[0]]}
+                      situationIndex={$testCasesIndex[0]}
+                      valuesByCalculationNameByVariableName={$valuesByCalculationNameByVariableNameArray[
                 $testCasesIndex[0]
               ]}
-                    year={$year}
-            />
-          {:else}
-            <TestCaseCompareView
-                    decompositionByName={$decompositionByName}
-                    {displayMode}
-                    on:changeDecompositionByName={({ detail }) =>
+                      year={$year}
+              />
+            {:else}
+              <TestCaseCompareView
+                      decompositionByName={$decompositionByName}
+                      {displayMode}
+                      on:changeDecompositionByName={({ detail }) =>
                 changeDecompositionByName($testCasesIndex[0], detail)}
-                    on:changeSituation={changeCompareSituation}
-                    on:changeTestCasesIndex={({ detail }) =>
+                      on:changeSituation={changeCompareSituation}
+                      on:changeTestCasesIndex={({ detail }) =>
                 changeTestCasesIndex(detail)}
-                    on:changeTestCaseToEditIndex={({ detail }) =>
+                      on:changeTestCaseToEditIndex={({ detail }) =>
                 changeTestCaseToEditIndex(detail)}
-                    situationsToCompareIndex={$testCasesIndex}
-                    year={$year}
-            />
+                      situationsToCompareIndex={$testCasesIndex}
+                      year={$year}
+              />
+            {/if}
           {/if}
-        {/if}
+        </div>
       </div>
     </div>
+  </div>
 
-    <!-- Panneau de droite pour l'édition de cas types -->
-
-    {#if displayMode.edit !== undefined}
-      <div class="flex flex-col relative z-40 w-full bg-gray-300 shadow-lg md:w-1/2 md:overflow-y-scroll">
-        <h2 class="mx-5 mt-6 mr-2 text-2xl font-bold text-black lg:text-3xl">
-          Éditer le cas type
-        </h2>
-        <div class="overflow-y-scroll" style:padding-bottom="{validateBtnHeight}px">
-          <TestCaseEdit
-                  date={$date}
-                  inputInstantsByVariableName={$inputInstantsByVariableNameArray[
-              displayMode.edit
-            ]}
-                  on:changeInputInstantsByVariableName={({ detail }) =>
-              changeInputInstantsByVariableName(displayMode.edit, detail)}
-                  on:changeSituation={({ detail }) =>
-              changeSituation(displayMode.edit, detail)}
-                  situation={$testCases[displayMode.edit]}
-                  situationIndex={displayMode.edit}
-                  valuesByCalculationNameByVariableName={$valuesByCalculationNameByVariableNameArray[
-              displayMode.edit
-            ]}
-                  year={$year}
-          />
-          <div class="m-4 rounded bg-le-bleu-light p-2 text-gray-700 shadow-md">
-            <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="link" href="mailto:leximpact@an.fr">leximpact@an.fr</a>.
-            </p>
-            <div class="m-1 rounded bg-white p-2 text-gray-700">
-              <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="ml-4 mb-2 pt-3 text-xl font-bold">
-              Ajouter des caractéristiques :
-            </h2>
-            <p class="font-sm mx-4 mb-10 hidden text-gray-700 md:block">
-              ↖️ Cliquez sur le nom d'un dispositif affiché sur le cas type pour
-              éditer les variables entrant dans le calcul de ce dispositif.
-            </p>
-            <p class="font-sm mx-4 mb-10 block text-gray-700 md:hidden">
-              Utilisez votre ordinateur ou élargissez l'écran pour obtenir plus
-              de fonctionnalités.
-            </p>
-          {:else}
-            <VariableReferredInputsPane
-                    date={$date}
-                    inputInstantsByVariableName={$inputInstantsByVariableNameArray[
-                displayMode.testCasesIndex[0]
-              ]}
-                    name={displayMode.variableName}
-                    on:changeInputInstantsByVariableName={({ detail }) =>
-                changeInputInstantsByVariableName(
-                  displayMode.testCasesIndex[0],
-                  detail,
-                )}
-                    on:changeSituation={({ detail }) =>
-                changeSituation(displayMode.testCasesIndex[0], detail)}
-                    situation={$testCases[displayMode.testCasesIndex[0]]}
-                    situationIndex={displayMode.testCasesIndex[0]}
-                    valuesByCalculationNameByVariableName={$valuesByCalculationNameByVariableNameArray[
-                displayMode.testCasesIndex[0]
-              ]}
-                    year={$year}
-            />
-          {/if}
+  <!-- Panneau de droite pour l'édition de cas types -->
+  <div class="flex flex-col relative z-40 w-full bg-gray-300 shadow-lg md:w-1/2 md:overflow-y-scroll flex-[1_0_100%] md:flex-[1_0_50%] transition-transform ease-in-out-quart duration-500"
+       class:translate-x-[-100%]={displayMode.edit !== undefined}>
+    <h2 class="mx-5 mt-6 mr-2 text-2xl font-bold text-black lg:text-3xl">
+      Éditer le cas type
+    </h2>
+    <div class="overflow-y-scroll" style:padding-bottom="{validateBtnHeight}px">
+      <TestCaseEdit
+              date={$date}
+              inputInstantsByVariableName={$inputInstantsByVariableNameArray[
+          displayMode.edit
+        ]}
+              on:changeInputInstantsByVariableName={({ detail }) =>
+          changeInputInstantsByVariableName(displayMode.edit, detail)}
+              on:changeSituation={({ detail }) =>
+          changeSituation(displayMode.edit, detail)}
+              situation={$testCases[displayMode.edit]}
+              situationIndex={displayMode.edit}
+              valuesByCalculationNameByVariableName={$valuesByCalculationNameByVariableNameArray[
+          displayMode.edit
+        ]}
+              year={$year}
+      />
+      <div class="m-4 rounded bg-le-bleu-light p-2 text-gray-700 shadow-md">
+        <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="link" href="mailto:leximpact@an.fr">leximpact@an.fr</a>.
+        </p>
+        <div class="m-1 rounded bg-white p-2 text-gray-700">
+          <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>
-      <!--Bouton flottant mobile pour fermer volet édition du cas type-->
-      <button
-              bind:clientHeight={validateBtnHeight}
-              on:click={() => changeTestCaseToEditIndex(undefined)}
-              class="fixed bottom-8 right-8 z-40 flex rounded-full bg-le-bleu px-4 py-3 text-xl uppercase text-white shadow-lg hover:bg-blue-900"
-              title="Valider le cas type et fermer l'édition"
-      >
-        <span class="hidden md:flex">Valider</span>
-        <iconify-icon
-                class="ml-2 align-[-0.2rem] text-2xl"
-                icon="ri-check-fill"
+
+      {#if displayMode.variableName === undefined}
+        <h2 class="ml-4 mb-2 pt-3 text-xl font-bold">
+          Ajouter des caractéristiques :
+        </h2>
+        <p class="font-sm mx-4 mb-10 hidden text-gray-700 md:block">
+          ↖️ Cliquez sur le nom d'un dispositif affiché sur le cas type pour
+          éditer les variables entrant dans le calcul de ce dispositif.
+        </p>
+        <p class="font-sm mx-4 mb-10 block text-gray-700 md:hidden">
+          Utilisez votre ordinateur ou élargissez l'écran pour obtenir plus
+          de fonctionnalités.
+        </p>
+      {:else}
+        <VariableReferredInputsPane
+                date={$date}
+                inputInstantsByVariableName={$inputInstantsByVariableNameArray[
+            displayMode.testCasesIndex[0]
+          ]}
+                name={displayMode.variableName}
+                on:changeInputInstantsByVariableName={({ detail }) =>
+            changeInputInstantsByVariableName(
+              displayMode.testCasesIndex[0],
+              detail,
+            )}
+                on:changeSituation={({ detail }) =>
+            changeSituation(displayMode.testCasesIndex[0], detail)}
+                situation={$testCases[displayMode.testCasesIndex[0]]}
+                situationIndex={displayMode.testCasesIndex[0]}
+                valuesByCalculationNameByVariableName={$valuesByCalculationNameByVariableNameArray[
+            displayMode.testCasesIndex[0]
+          ]}
+                year={$year}
         />
-      </button>
-    {/if}
+      {/if}
+    </div>
   </div>
+  <!--Bouton flottant mobile pour fermer volet édition du cas type-->
+  <button
+            bind:clientHeight={validateBtnHeight}
+            on:click={() => changeTestCaseToEditIndex(undefined)}
+            class="fixed bottom-8 right-8 z-40 flex rounded-full bg-le-bleu px-4 py-3 text-xl uppercase text-white shadow-lg hover:bg-blue-900 transition-transform ease-in-out-quart duration-500 translate-y-[calc(100%+4rem)]"
+            class:!translate-y-0={displayMode.edit !== undefined}
+            title="Valider le cas type et fermer l'édition"
+    >
+      <span class="hidden md:flex">Valider</span>
+      <iconify-icon
+              class="md:ml-2 align-[-0.2rem] text-2xl"
+              icon="ri-check-fill"
+      />
+    </button>
 </main>
 
 <style>
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 5b3bcec0edd689b60d1eb3610e20ec351acad0d0..0c7986075e9b5bc29f983151fe9bc1dc9c723f76 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -50,6 +50,28 @@ const config = {
       },
       zIndex: {
         '25': '25',
+      },
+      transitionTimingFunction: {
+        'in-quad': 'cubic-bezier(.55, .085, .68, .53)',
+        'in-cubic': 'cubic-bezier(.550, .055, .675, .19)',
+        'in-quart': 'cubic-bezier(.895, .03, .685, .22)',
+        'in-quint': 'cubic-bezier(.755, .05, .855, .06)',
+        'in-expo': 'cubic-bezier(.95, .05, .795, .035)',
+        'in-circ': 'cubic-bezier(.6, .04, .98, .335)',
+
+        'out-quad': 'cubic-bezier(.25, .46, .45, .94)',
+        'out-cubic': 'cubic-bezier(.215, .61, .355, 1)',
+        'out-quart': 'cubic-bezier(.165, .84, .44, 1)',
+        'out-quint': 'cubic-bezier(.23, 1, .32, 1)',
+        'out-expo': 'cubic-bezier(.19, 1, .22, 1)',
+        'out-circ': 'cubic-bezier(.075, .82, .165, 1)',
+
+        'in-out-quad': 'cubic-bezier(.455, .03, .515, .955)',
+        'in-out-cubic': 'cubic-bezier(.645, .045, .355, 1)',
+        'in-out-quart': 'cubic-bezier(.77, 0, .175, 1)',
+        'in-out-quint': 'cubic-bezier(.86, 0, .07, 1)',
+        'in-out-expo': 'cubic-bezier(1, 0, 0, 1)',
+        'in-out-circ': 'cubic-bezier(.785, .135, .15, .86)'
       }
     },
     fontFamily: {