diff --git a/src/lib/components/NavBar.svelte b/src/lib/components/NavBar.svelte
index 709d5d254455613a5bf7f8fca87f921dac64b92d..c59dfa82c79b36ba030fb6efdf196041eb7e2712 100644
--- a/src/lib/components/NavBar.svelte
+++ b/src/lib/components/NavBar.svelte
@@ -2,6 +2,26 @@
   import { page } from "$app/stores"
   import { getContext } from "svelte"
   import type { Writable } from "svelte/store"
+  import type { SearchResult } from "minisearch"
+  import WaterfallVariablesSearchWorker from "$lib/search/search_worker_variables_waterfall?worker"
+  import { browser } from "$app/environment"
+  import type { DisplayMode } from "$lib/displays"
+  import { openModal } from "svelte-modals"
+  import NavBarSearch from "$lib/components/search/NavBarSearch.svelte"
+  import ShareLinkModal from "$lib/components/ShareLinkModal.svelte"
+  import type { ParametricReform } from "$lib/reforms"
+  import { type Situation } from "$lib/situations"
+
+  // Search
+  const isSearchActive = getContext("isSearchActive") as Writable<boolean>
+  const searchParameterName = getContext("searchParameterName") as Writable<
+    string | undefined
+  >
+
+  // Save / share
+  const displayMode = getContext("displayMode") as Writable<
+    DisplayMode | undefined
+  >
 
   let openMobileMenu = false
   let openUserMenu = false
@@ -22,33 +42,124 @@
     $showTutorial = true
     localStorage.removeItem("hideTutorial")
   }
+
+  // Search
+
+  let isSearchInProgress = false
+  let pendingQuery: string | null = null
+
+  let searchResults: SearchResult[] = []
+  let searchWorker: Worker | undefined = undefined
+  if (browser) searchWorker = new WaterfallVariablesSearchWorker()
+  if (searchWorker !== undefined) {
+    searchWorker.onmessage = function (event) {
+      searchResults = event.data
+
+      // If there's no pending query, we're done!
+      if (pendingQuery === null) {
+        isSearchInProgress = false
+      } else {
+        // If we were waiting for results before searching again, run search
+        searchWorker?.postMessage(pendingQuery)
+        pendingQuery = null
+      }
+    }
+  }
+
+  function search(query: string) {
+    if (searchWorker === undefined) return
+
+    // If search is already running, save the query inside the
+    // pending query variable, awaiting results before searching again
+    if (isSearchInProgress) {
+      pendingQuery = query
+      return
+    }
+
+    isSearchInProgress = true
+    searchWorker.postMessage(query)
+  }
+
+  let searchQuery = ""
+  $: $isSearchActive = searchQuery != undefined && searchQuery.length > 0
+  $: $isSearchActive ? search(searchQuery) : (searchResults = [])
+
+  const inputInstantsByVariableNameArray = getContext(
+    "inputInstantsByVariableNameArray",
+  ) as Writable<
+    Array<{
+      [name: string]: Set<string>
+    }>
+  >
+  const parametricReform = getContext(
+    "parametricReform",
+  ) as Writable<ParametricReform>
+  const testCases = getContext("testCases") as Writable<Situation[]>
+
+  async function shareLink(): Promise<void> {
+    const displayModee = $displayMode
+    const urlString = "/simulations"
+    const res = await fetch(urlString, {
+      body: JSON.stringify({
+        displayModee,
+        inputInstantsByVariableNameArray: $inputInstantsByVariableNameArray.map(
+          (inputInstantsByVariableName) =>
+            Object.fromEntries(
+              Object.entries(inputInstantsByVariableName).map(
+                ([variableName, inputInstants]) => [
+                  variableName,
+                  [...inputInstants],
+                ],
+              ),
+            ),
+        ),
+        parametricReform: $parametricReform,
+        testCases: $testCases,
+      }),
+      headers: {
+        Accept: "application/json",
+        "Content-Type": "application/json; charset=utf-8",
+      },
+      method: "POST",
+    })
+    if (!res.ok) {
+      console.error(
+        `Error ${
+          res.status
+        } while creating a share link at ${urlString}\n\n${await res.text()}`,
+      )
+      return
+    }
+    const { token } = await res.json()
+    openModal(ShareLinkModal, {
+      token,
+    })
+  }
 </script>
 
 <div class="relative z-50 w-full md:top-0">
   <nav
-    class="mx-auto h-14 w-full bg-le-jaune-very-dark px-2 shadow-md md:px-5 lg:pr-10"
+    class="mx-auto w-full bg-le-jaune-very-dark px-2 shadow-md md:h-14 md:px-5"
   >
-    <!-- Création d'un div sur l'ensemble de la nav bar pour répartir les blocs-->
+    <!-- Répartition des blocs sur la barre de navigation -->
     <div class="hidden justify-between md:flex">
-      <!-- Premier div pour le logo AN et le menu A propos-->
-      <div class="flex items-center">
-        <!-- À propos dropdown -->
+      <!-- Bloc gauche pour le logo AN et le logo "Simulateur LEXIMPACT" -->
+      <div class="flex flex-1 items-center justify-between gap-5">
+        <!-- Bouton accueil -->
         <a
           href={portalUrl}
-          class="rounded-sm p-1 text-sm uppercase text-white hover:bg-gray-400 hover:bg-opacity-20 hover:text-white focus:outline-none"
-          on:click={help}
+          class="flex h-full items-center gap-3 rounded-sm px-3 text-sm uppercase text-white hover:bg-gray-400 hover:bg-opacity-20 hover:text-white focus:outline-none"
         >
-          <iconify-icon
-            class="mr-1 align-[-0.3rem] text-xl"
-            icon="ri-arrow-left-line"
+          <img
+            class="w-16 items-start self-start object-scale-down pb-2 pr-2 pt-0"
+            src="/logo-assemblee-nationale-blanc-blanc.png"
+            alt="Logo de l'Assemblée nationale"
           />
-          Page d'accueil
+          <span>Accueil</span>
         </a>
-      </div>
 
-      <!-- Deuxième div pour le logo Contrib. & prestas sociales-->
-      <div class="hidden items-center md:flex">
-        <a href="/">
+        <!-- Logo -->
+        <a href="/" class="px-3">
           <div
             class="flex h-full flex-col justify-center rounded p-1 text-white"
           >
@@ -56,33 +167,16 @@
             <span class="text-xl uppercase leading-4">LexImpact</span>
           </div>
         </a>
-
-        <div
-          class="my-2 ml-4 flex overflow-hidden rounded-t-md border-b-2 border-b-le-jaune"
-        >
-          <input
-            autocomplete="off"
-            class="min-w-[500px] border-none bg-gray-100 text-base text-gray-900 placeholder-gray-400 !ring-transparent focus:outline-none"
-            id="search"
-            placeholder="impôt sur le revenu, CSG, ..."
-            type="search"
-          />
-          <button class="flex items-center bg-le-jaune px-10"
-            ><iconify-icon
-              icon="ri-search-line"
-              width="22"
-              height="22"
-            /></button
-          >
-        </div>
       </div>
 
-      <!-- Troisième div pour les commandes avancées-->
-      <!-- connexion/déconnexion -->
-      <div class="flex items-center justify-end gap-5">
+      <!-- Bloc centre pour la barre de recherche -->
+      <NavBarSearch {$isSearchActive} bind:searchQuery />
+
+      <!-- Bloc droite pour les commandes avancées-->
+      <div class="flex flex-1 items-center justify-end gap-5">
         <!--Bouton tutoriel-->
         <button
-          class="rounded-sm p-1 text-sm uppercase text-white hover:bg-gray-400 hover:bg-opacity-20 hover:text-white focus:outline-none"
+          class="rounded-sm p-2 text-sm uppercase text-white hover:bg-gray-400 hover:bg-opacity-20 hover:text-white focus:outline-none"
           on:click={help}
         >
           <iconify-icon
@@ -92,13 +186,13 @@
           Tutoriel
         </button>
 
-        <!--Bouton sauvegarder partager-->
+        <!-- Bouton sauvegarder/partager -->
         <button
-          class="rounded-sm p-1 text-sm uppercase text-white hover:bg-gray-400 hover:bg-opacity-20 hover:text-white focus:outline-none"
+          class="rounded-sm p-2 text-sm uppercase text-white hover:bg-gray-400 hover:bg-opacity-20 hover:text-white focus:outline-none"
           id="situation_savebutton"
           title="Sauvegarder/partager votre écran de travail tel qu'il est visible actuellement"
+          on:click={shareLink}
         >
-          <!--          on:click={shareLink}-->
           <iconify-icon
             class="mr-1 align-[-0.2rem] text-base"
             icon="ri-share-fill"
@@ -106,10 +200,11 @@
           Sauvegarder / partager
         </button>
 
+        <!-- Bouton se connecter -->
         {#if authenticationEnabled}
           {#if user === undefined}
             <a
-              class="rounded-sm p-1 uppercase text-white hover:bg-gray-400 hover:bg-opacity-20 hover:text-white focus:outline-none"
+              class="rounded-sm p-2 uppercase text-white hover:bg-gray-400 hover:bg-opacity-20 hover:text-white focus:outline-none"
               data-sveltekit-reload
               href={loginUrl}
             >
@@ -117,7 +212,6 @@
                 class="mr-1 align-[-0.3rem] text-2xl"
                 icon="ri-key-fill"
               />
-              <span class="hidden pl-1 lg:inline-block">Se connecter</span>
             </a>
           {:else}
             <!-- User profile + se déconnecter -->
@@ -179,145 +273,171 @@
     </div>
 
     <!--Menu écran téléphone-->
+    <div class="flex flex-col md:hidden">
+      <div class="flex items-center justify-between">
+        <!-- Premier div pour le logo AN-->
+        <div class="flex flex-1">
+          <!-- logo assemblee nationale -->
+          <a class="w-16" href={portalUrl}>
+            <img
+              class=" items-start object-scale-down px-2 pb-2 pt-0"
+              src="/logo-assemblee-nationale-blanc-blanc.png"
+              alt="Logo de l'Assemblée nationale"
+            />
+          </a>
+        </div>
 
-    <div class="flex items-center justify-between md:hidden">
-      <!-- Premier div pour le logo AN-->
-      <!-- logo assemblee nationale -->
-      <a class="w-16" href={portalUrl}>
-        <img
-          class=" items-start object-scale-down pb-4 pl-2 pr-2 pt-0"
-          src="/logo-assemblee-nationale-blanc-blanc.png"
-          alt="Logo de l'Assemblée nationale"
-        />
-      </a>
-
-      <!-- Deuxième div pour le logo Contrib. & prestas sociales-->
-      <h1>
-        <span
-          class="flex h-7 items-center rounded object-center text-center text-2xl font-light uppercase text-white"
-        >
-          LexImpact
-          <span
-            class="rotate-6 rounded bg-le-gris-dispositif p-0.5 px-1 text-xs"
-          >
-            Beta
-          </span>
-        </span>
-        <span
-          class="block rounded object-center text-center text-xs font-bold uppercase text-white"
-        >
-          Cotis. & presta. sociales
-        </span>
-      </h1>
-
-      <!-- Troisième div pour le bouton menu-->
-
-      <section>
-        <button
-          aria-haspopup="true"
-          class="w-16 rounded-sm p-1 text-sm uppercase text-white hover:bg-gray-400 hover:bg-opacity-20 hover:text-white focus:outline-none"
-          id="share"
-          type="button"
-        >
-          <!--          aria-expanded={shareLink}-->
-          <!--          on:click={shareLink}-->
-          <span class="sr-only">Share link</span>
-          <iconify-icon
-            class="ml-1 align-[-0.2rem] text-2xl"
-            icon="ri-share-fill"
-          />
-        </button>
-        <button
-          aria-expanded={openMobileMenu}
-          aria-haspopup="true"
-          class="w-16 rounded-sm p-1 text-sm uppercase text-white hover:bg-gray-400 hover:bg-opacity-20 hover:text-white focus:outline-none"
-          id="user-menu"
-          on:click={() => (openMobileMenu = !openMobileMenu)}
-          type="button"
-        >
-          <span class="sr-only">Open user menu</span>
-          <iconify-icon
-            class="ml-1 align-[-0.2rem] text-2xl"
-            icon="ri-menu-line"
-          />
-        </button>
-      </section>
-
-      {#if openMobileMenu}
-        <!--
-            Dropdown menu
-
-            Entering: "transition ease-out duration-100"
-              From: "opacity-0 scale-95"
-              To: "opacity-100 scale-100"
-            Leaving: "transition ease-in duration-75"
-              From: "opacity-100 scale-100"
-              To: "opacity-0 scale-95"
-          -->
+        <!-- Deuxième div pour le logo-->
         <div
-          class="absolute right-0 top-0 z-50 mt-24 flex w-full flex-col rounded bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
-          role="menu"
-          aria-orientation="vertical"
-          aria-labelledby="user-menu"
+          class="flex h-full flex-1 flex-col items-center justify-center rounded p-1 text-white"
         >
-          {#if authenticationEnabled}
-            {#if user === undefined}
-              <a
-                class="flex border-b px-4 py-3 text-base font-bold text-gray-700 hover:bg-gray-100"
-                data-sveltekit-reload
-                href={loginUrl}
-                role="menuitem"
-              >
-                <span>
-                  <iconify-icon
-                    class="mr-1 align-[-0.2rem] text-lg"
-                    icon="ri-key-fill"
-                  />Se connecter</span
-                ></a
-              >
-            {:else}
-              <a
-                class="flex border-b-4 px-4 py-3 text-base text-gray-700 hover:bg-gray-100"
-                data-sveltekit-reload
-                href={logoutUrl}
-                role="menuitem"
-                ><span>
-                  <iconify-icon
-                    class="mr-1 align-[-0.2rem] text-lg"
-                    icon="ri-logout-box-r-line"
-                  />Se déconnecter ({user.preferred_username.split(
-                    "@",
-                  )[0]})</span
-                ></a
-              >
-            {/if}
-          {/if}
+          <span class="text-lg font-light leading-4">Simulateur</span>
+          <span class="text-xl uppercase leading-4">LexImpact</span>
+        </div>
 
-          <a
-            href={new URL("a-propos", portalUrl).toString()}
-            class="block border-b px-4 py-3 text-base text-gray-700 hover:bg-gray-100"
-            role="menuitem">À propos de LexImpact</a
-          >
-          <a
-            href={new URL(
-              "comment-fonctionnent-les-simulateurs",
-              portalUrl,
-            ).toString()}
-            class="block border-b px-4 py-3 text-base text-gray-700 hover:bg-gray-100"
-            role="menuitem">Comment fonctionnent les simulateurs LexImpact ?</a
+        <!-- Troisième div pour le bouton menu-->
+
+        <section class="flex flex-1 justify-end gap-3">
+          <button
+            aria-haspopup="true"
+            class="rounded-sm p-2 text-sm uppercase text-white hover:bg-gray-400 hover:bg-opacity-20 hover:text-white focus:outline-none"
+            id="share"
+            type="button"
+            aria-expanded={shareLink}
+            on:click={shareLink}
           >
-          <a
-            href={portalUrl}
-            class="flex items-center border-b bg-gray-200 px-4 py-3 text-base text-gray-900 hover:bg-gray-400"
-            role="menuitem"
+            <span class="sr-only">Share link</span>
+            <iconify-icon
+              class="align-[-0.2rem] text-2xl"
+              icon="material-symbols:share"
+            />
+          </button>
+          <button
+            aria-expanded={openMobileMenu}
+            aria-haspopup="true"
+            class="rounded-sm p-2 text-sm uppercase text-white hover:bg-gray-400 hover:bg-opacity-20 hover:text-white focus:outline-none"
+            id="user-menu"
+            on:click={() => (openMobileMenu = !openMobileMenu)}
+            type="button"
           >
+            <span class="sr-only">Open user menu</span>
             <iconify-icon
-              class="mr-1 align-[-0.2rem] text-lg"
-              icon="ri-home-2-line"
-            />Page d'accueil</a
+              class="align-[-0.2rem] text-2xl"
+              icon="ri-menu-line"
+            />
+          </button>
+        </section>
+
+        {#if openMobileMenu}
+          <!--
+              Dropdown menu
+
+              Entering: "transition ease-out duration-100"
+                From: "opacity-0 scale-95"
+                To: "opacity-100 scale-100"
+              Leaving: "transition ease-in duration-75"
+                From: "opacity-100 scale-100"
+                To: "opacity-0 scale-95"
+            -->
+          <div
+            class="absolute right-0 top-0 z-50 mt-24 flex w-full flex-col rounded bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
+            role="menu"
+            aria-orientation="vertical"
+            aria-labelledby="user-menu"
           >
-        </div>
-      {/if}
+            {#if authenticationEnabled}
+              {#if user === undefined}
+                <a
+                  class="flex border-b px-4 py-3 text-base font-bold text-gray-700 hover:bg-gray-100"
+                  data-sveltekit-reload
+                  href={loginUrl}
+                  role="menuitem"
+                >
+                  <span>
+                    <iconify-icon
+                      class="mr-1 align-[-0.2rem] text-lg"
+                      icon="ri-key-fill"
+                    />Se connecter</span
+                  ></a
+                >
+              {:else}
+                <a
+                  class="flex border-b-4 px-4 py-3 text-base text-gray-700 hover:bg-gray-100"
+                  data-sveltekit-reload
+                  href={logoutUrl}
+                  role="menuitem"
+                  ><span>
+                    <iconify-icon
+                      class="mr-1 align-[-0.2rem] text-lg"
+                      icon="ri-logout-box-r-line"
+                    />Se déconnecter ({user.preferred_username.split(
+                      "@",
+                    )[0]})</span
+                  ></a
+                >
+              {/if}
+            {/if}
+
+            <a
+              href={new URL("a-propos", portalUrl).toString()}
+              class="block border-b px-4 py-3 text-base text-gray-700 hover:bg-gray-100"
+              role="menuitem">À propos de LexImpact</a
+            >
+            <a
+              href={new URL(
+                "comment-fonctionnent-les-simulateurs",
+                portalUrl,
+              ).toString()}
+              class="block border-b px-4 py-3 text-base text-gray-700 hover:bg-gray-100"
+              role="menuitem"
+              >Comment fonctionnent les simulateurs LexImpact ?</a
+            >
+            <a
+              href={portalUrl}
+              class="flex items-center border-b bg-gray-200 px-4 py-3 text-base text-gray-900 hover:bg-gray-400"
+              role="menuitem"
+            >
+              <iconify-icon
+                class="mr-1 align-[-0.2rem] text-lg"
+                icon="ri-home-2-line"
+              />Page d'accueil</a
+            >
+          </div>
+        {/if}
+      </div>
+
+      <NavBarSearch {$isSearchActive} bind:searchQuery />
     </div>
   </nav>
+
+  {#if searchQuery.length > 0}
+    <div
+      class="absolute top-28 w-full overflow-hidden rounded-b-lg border bg-white shadow-lg md:left-[calc((100%-600px)/2)] md:top-14 md:w-[600px]"
+    >
+      <ul class="max-h-72 list-none overflow-y-auto py-2 md:max-h-[600px]">
+        {#if searchResults.length > 0}
+          {#each searchResults as variable, index (`found_variable_$${index}`)}
+            <li>
+              <button
+                class="flex w-full flex-col px-8 py-4 hover:bg-gray-200"
+                on:click={() => {
+                  searchQuery = ""
+                  $searchParameterName = variable.name
+                }}
+              >
+                <h2 class="flex-shrink-0 text-start text-xl font-bold">
+                  {variable.short_label ?? variable.label ?? variable.name}
+                </h2>
+                {#if variable.short_label !== undefined && variable.short_label !== variable.label}
+                  <span class="text-start">{variable.label}</span>
+                {/if}
+              </button>
+            </li>
+          {/each}
+        {:else}
+          <li class="px-8 py-4">Aucun résultat trouvé</li>
+        {/if}
+      </ul>
+    </div>
+  {/if}
 </div>
diff --git a/src/lib/components/ReformsChanges.svelte b/src/lib/components/ReformsChanges.svelte
index b16806db4393c8cd4ccebc59f603998177b9f5bb..7305156e20fc7f11e9f31b4c17866e6265d2bd03 100644
--- a/src/lib/components/ReformsChanges.svelte
+++ b/src/lib/components/ReformsChanges.svelte
@@ -225,6 +225,7 @@
                 parameterName,
                 parametersVariableName: undefined,
               })}
+              on:click
             >
               <iconify-icon
                 class="mr-1 align-[-0.1rem] text-sm text-gray-500"
@@ -273,6 +274,7 @@
                 parameterName,
                 parametersVariableName: undefined,
               })}
+              on:click
               >{parameter?.title}&nbsp;:
 
               {#if parameterReform.type === ParameterReformChangeType.Scale}
diff --git a/src/lib/components/WaterfallCompareView.svelte b/src/lib/components/WaterfallCompareView.svelte
index cebbe912f3969c67bb91688e8a303fb2deeeb6d8..f8a24e1cafea9bccf6b55458b4f9be7cdcc032a8 100644
--- a/src/lib/components/WaterfallCompareView.svelte
+++ b/src/lib/components/WaterfallCompareView.svelte
@@ -476,7 +476,9 @@
           class="checked rounded bg-gray-100 accent-gray-500"
           type="checkbox"
         />
-        Montrer tous les dispositifs, y compris si le montant est nul.
+        <span class="ml-2"
+          >Montrer tous les dispositifs, y compris si le montant est nul.</span
+        >
       </label>
     </div>
   </div>
diff --git a/src/lib/components/WaterfallView.svelte b/src/lib/components/WaterfallView.svelte
index 305be2e43cdb647daa2f8f8219e4b4178c83297b..2967d5f6fa124769baef3de8bf07f6540dd0c4d1 100644
--- a/src/lib/components/WaterfallView.svelte
+++ b/src/lib/components/WaterfallView.svelte
@@ -106,6 +106,22 @@
       return
     }
   }
+
+  function getCorrectSimulationUrl(variableOrParameterName: string) {
+    const newDisplayMode =
+      displayMode.edit !== undefined
+        ? {
+            ...displayMode,
+            variableName: variableOrParameterName,
+          }
+        : {
+            ...displayMode,
+            mobileLaw: true,
+            parameterName: undefined,
+            parametersVariableName: variableOrParameterName,
+          }
+    return newSimulationUrl(newDisplayMode)
+  }
 </script>
 
 {#if visibleDecompositions.length > 0}
@@ -119,7 +135,7 @@
           {#each rows as { calculationName }}
             {#if calculationName === "law"}
               <div
-                class="flex h-8 items-center whitespace-nowrap"
+                class="flex h-8 items-center whitespace-nowrap px-4"
                 class:font-bold={decomposition.name ===
                   displayMode.parametersVariableName}
                 class:bg-gray-200={decomposition.name ===
@@ -130,31 +146,12 @@
                     class="ml-2 overflow-x-hidden text-ellipsis border-gray-400 text-base text-gray-500 hover:z-20 hover:overflow-x-visible hover:bg-white"
                     class:border-t={index !== 0}
                   >
-                    {#if displayMode.edit !== undefined}
-                      <!-- Trunk decomposition node, in variable inputs mode => link -->
-                      <a
-                        class="cursor-pointer text-base hover:underline"
-                        href={newSimulationUrl({
-                          ...displayMode,
-                          variableName: decomposition.name,
-                        })}
-                        data-sveltekit-noscroll
-                        >{decomposition.short_label ?? decomposition.label}</a
-                      >
-                    {:else}
-                      <!-- Trunk decomposition node with parameters, in parameters mode => link -->
-                      <a
-                        class="cursor-pointer text-base hover:underline"
-                        href={newSimulationUrl({
-                          ...displayMode,
-                          mobileLaw: true,
-                          parameterName: undefined,
-                          parametersVariableName: decomposition.name,
-                        })}
-                        data-sveltekit-noscroll
-                        >{decomposition.short_label ?? decomposition.label}</a
-                      >
-                    {/if}
+                    <a
+                      class="cursor-pointer text-base hover:underline"
+                      href={getCorrectSimulationUrl(decomposition.name)}
+                      data-sveltekit-noscroll
+                      >{decomposition.short_label ?? decomposition.label}</a
+                    >
                   </div>
                 {:else}
                   {#each [...iterToDepth(depth)] as _level}
@@ -196,102 +193,55 @@
                       </Popover>
                     {/if}
 
-                    {#if displayMode.edit !== undefined}
-                      <!-- Leaf decomposition node in variable inputs mode => link -->
-                      <a
-                        class="cursor-pointer overflow-x-hidden text-ellipsis font-serif text-base hover:z-20 hover:overflow-x-visible hover:bg-white hover:text-le-gris-dispositif hover:underline"
-                        href={newSimulationUrl({
-                          ...displayMode,
-                          variableName: decomposition.name,
-                        })}
-                        data-sveltekit-noscroll
-                        >{decomposition.short_label ?? decomposition.label}</a
-                      >
-                    {:else}
-                      <!-- Leaf decomposition node with parameters in parameters mode => link -->
-                      <a
-                        class="cursor-pointer overflow-x-hidden text-ellipsis font-serif text-base hover:z-20 hover:overflow-x-visible hover:bg-white hover:text-le-gris-dispositif hover:underline"
-                        href={newSimulationUrl({
-                          ...displayMode,
-                          mobileLaw: true,
-                          parameterName: undefined,
-                          parametersVariableName: decomposition.name,
-                        })}
-                        data-sveltekit-noscroll
-                        >{decomposition.short_label ?? decomposition.label}</a
-                      >
-                    {/if}
+                    <a
+                      class="cursor-pointer overflow-x-hidden text-ellipsis font-serif text-base hover:z-20 hover:overflow-x-visible hover:bg-white hover:text-le-gris-dispositif hover:underline"
+                      href={getCorrectSimulationUrl(decomposition.name)}
+                      data-sveltekit-noscroll
+                      >{decomposition.short_label ?? decomposition.label}</a
+                    >
                   {:else}
                     <!-- Non-trunk, non-leaf variable -->
-                    {#if decomposition.open}
-                      <button
-                        class="-ml-1 text-black"
-                        on:click={() => zoomOut(index)}
-                      >
-                        <iconify-icon
-                          class="align-[-0.2rem] text-lg"
-                          icon="ri-arrow-down-s-line"
-                        />
-                      </button>
-                    {:else}
-                      <button
-                        class="-ml-1 text-black"
-                        on:click={() => zoomIn(index)}
-                      >
-                        <iconify-icon
-                          class="align-[-0.2rem] text-lg"
-                          icon="ri-arrow-right-s-line"
-                        />
-                      </button>
-                    {/if}
+                    <button
+                      class="-ml-1 text-black"
+                      on:click={() =>
+                        decomposition.open ? zoomOut(index) : zoomIn(index)}
+                    >
+                      <iconify-icon
+                        class="align-[-0.2rem] text-lg"
+                        icon={decomposition.open
+                          ? "ri-arrow-down-s-line"
+                          : "ri-arrow-right-s-line"}
+                      />
+                    </button>
 
-                    {#if displayMode.edit !== undefined}
-                      <!-- Non-lead decomposition node in variable inputs mode => no-link -->
-                      <button
-                        class="cursor-pointer overflow-x-hidden text-ellipsis font-serif text-base text-black hover:z-20 hover:overflow-x-visible hover:bg-white hover:text-black hover:underline"
-                        on:click={() => {
-                          if (decomposition.open) {
-                            zoomOut(index)
-                          } else {
-                            zoomIn(index)
-                          }
-                        }}
-                      >
-                        {decomposition.short_label ?? decomposition.label}
-                      </button>
-                    {:else}
-                      <!-- Leaf decomposition node with parameters in parameters mode => link -->
-                      <a
-                        class="cursor-pointer overflow-x-hidden text-ellipsis font-serif text-base hover:z-20 hover:overflow-x-visible hover:bg-white hover:text-le-gris-dispositif hover:underline"
-                        href={newSimulationUrl({
-                          ...displayMode,
-                          parameterName: undefined,
-                          parametersVariableName: decomposition.name,
-                        })}
-                        on:click|preventDefault={() => {
-                          if (decomposition.open) {
-                            zoomOut(index)
-                          } else {
-                            zoomIn(index)
-                          }
-                          goto(
-                            newSimulationUrl({
-                              ...displayMode,
-                              parameterName: undefined,
-                              parametersVariableName: decomposition.name,
-                            }),
-                            { noScroll: true },
-                          )
-                        }}
-                        data-sveltekit-noscroll
-                        >{decomposition.short_label ?? decomposition.label}</a
-                      >
-                    {/if}
+                    <button
+                      class="cursor-pointer overflow-x-hidden text-ellipsis font-serif text-base hover:z-20 hover:overflow-x-visible hover:bg-white hover:text-le-gris-dispositif hover:underline"
+                      on:click={() => {
+                        // Non-leaf decomposition node in variable inputs mode => no-link
+                        decomposition.open ? zoomOut(index) : zoomIn(index)
+
+                        // Leaf decomposition node with parameters in parameters mode => link
+                        if (displayMode.edit === undefined) {
+                          goto(getCorrectSimulationUrl(decomposition.name), {
+                            noScroll: true,
+                          })
+                        }
+                      }}
+                      data-sveltekit-noscroll
+                      >{decomposition.short_label ??
+                        decomposition.label}</button
+                    >
                   {/if}
                 {/if}
               </div>
             {:else if !decomposition.open || trunk}
-              <div class="flex h-7 items-center whitespace-nowrap">
+              <div
+                class="flex h-7 items-center whitespace-nowrap px-4"
+                class:font-bold={decomposition.name ===
+                  displayMode.parametersVariableName}
+                class:bg-gray-200={decomposition.name ===
+                  displayMode.parametersVariableName}
+              >
                 {#if !trunk}
                   {#each [...iterToDepth(depth)] as _level}
                     <div class="ml-2 h-full border-l border-le-gris-dispositif">
@@ -306,7 +256,7 @@
       </div>
 
       <!-- ticket de caisse-->
-      <div class="relative mr-1 flex flex-none px-2 md:mr-4">
+      <div class="relative flex flex-none">
         {#if Object.values($calculationByName).filter((calculation) => calculation.running && (calculation.situationIndex === undefined || calculation.situationIndex === situationIndex)).length > 0}
           <div class="absolute inset-0 z-10 bg-le-jaune bg-opacity-20">
             <Spinner />
@@ -317,14 +267,18 @@
             {#each rows as { calculationName, deltaAtVectorIndex }}
               {#if !decomposition.open || trunk || calculationName === "law"}
                 <div
-                  class="h-7 border-t {calculationName === 'law'
-                    ? 'my-1'
+                  class="h-8 border-t {calculationName === 'law'
+                    ? 'py-1'
                     : '-mt-1 mb-1'} px-1 text-sm {decomposition.open &&
                   trunk &&
                   visibleChildren.length > 1 &&
                   calculationName === 'law'
                     ? 'border-gray-400'
                     : 'border-transparent'}"
+                  class:font-bold={decomposition.name ===
+                    displayMode.parametersVariableName}
+                  class:bg-gray-200={decomposition.name ===
+                    displayMode.parametersVariableName}
                 >
                   {#if decomposition.open}{#if trunk}<span
                         class="align-middle text-gray-500">=</span
@@ -348,10 +302,14 @@
                   visibleChildren.length > 1 &&
                   calculationName === 'law'
                     ? 'border-gray-400'
-                    : 'border-transparent'} h-7 border-t {calculationName ===
+                    : 'border-transparent'} h-8 border-t {calculationName ===
                   'law'
-                    ? 'my-1'
-                    : '-mt-1 mb-1'} text-right text-sm"
+                    ? 'py-1'
+                    : '-mt-1 mb-1'} pr-1 text-right text-sm md:pr-4"
+                  class:font-bold={decomposition.name ===
+                    displayMode.parametersVariableName}
+                  class:bg-gray-200={decomposition.name ===
+                    displayMode.parametersVariableName}
                 >
                   {#if decomposition.open || index === 0}
                     {#if trunk || index === 0}
@@ -406,16 +364,18 @@
 
     <!-- Choix d'affichage des montant nuls -->
     <div
-      class="mt-5 flex p-2"
+      class="mx-6 mt-3 flex"
       id="situation_{situationIndex}_waterfall_showall"
     >
-      <label class="inline text-xs leading-none text-gray-600">
+      <label class="inline py-2 text-xs leading-none text-gray-600">
         <input
           bind:checked={$showNulls}
           class="checked rounded bg-gray-100 accent-gray-500"
           type="checkbox"
         />
-        Montrer tous les dispositifs, y compris si le montant est nul.
+        <span class="ml-2"
+          >Montrer tous les dispositifs, y compris si le montant est nul.</span
+        >
       </label>
     </div>
   </div>
diff --git a/src/lib/components/pictos/PictoFicheDePaie.svelte b/src/lib/components/pictos/PictoFicheDePaie.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..29ebf8ad6742a7242cb3ca554168bb6288a45b69
--- /dev/null
+++ b/src/lib/components/pictos/PictoFicheDePaie.svelte
@@ -0,0 +1,14 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M16.4789 20.9V4.1H3.21128V19.85C3.21128 20.1285 3.32776 20.3955 3.53511 20.5925C3.74246 20.7894 4.02368 20.9 4.31692 20.9H16.4789ZM19.7959 23H4.31692C3.43721 23 2.59354 22.6681 1.9715 22.0774C1.34946 21.4866 1 20.6854 1 19.85V3.05C1 2.77152 1.11649 2.50445 1.32383 2.30754C1.53118 2.11062 1.81241 2 2.10564 2H17.5846C17.8778 2 18.159 2.11062 18.3664 2.30754C18.5737 2.50445 18.6902 2.77152 18.6902 3.05V10.4H23.1128V19.85C23.1128 20.6854 22.7633 21.4866 22.1413 22.0774C21.5192 22.6681 20.6756 23 19.7959 23ZM18.6902 12.5V19.85C18.6902 20.1285 18.8067 20.3955 19.014 20.5925C19.2214 20.7894 19.5026 20.9 19.7959 20.9C20.0891 20.9 20.3703 20.7894 20.5777 20.5925C20.785 20.3955 20.9015 20.1285 20.9015 19.85V12.5H18.6902ZM4.54156 5.65476H9.84862V7.48085H4.54156V5.65476ZM8.96411 9.30952H4.54156V11.1356H8.96411V9.30952ZM9.84581 17.5246H15.1529V19.3507H9.84581V17.5246ZM15.1557 13.8699H4.54156V15.696H15.1557V13.8699ZM13.3793 9.30952H15.1529V11.1356H13.3793V12.9604H11.6103V11.1356H9.84581V9.30952H11.6103V7.48214H13.3793V9.30952Z"
+    fill="currentColor"
+  />
+</svg>
diff --git a/src/lib/components/search/NavBarSearch.svelte b/src/lib/components/search/NavBarSearch.svelte
new file mode 100644
index 0000000000000000000000000000000000000000..f24d7c425acaf1759a6f74d24589e8f3324fb717
--- /dev/null
+++ b/src/lib/components/search/NavBarSearch.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+  export let isSearchActive: boolean
+  export let searchQuery: string
+</script>
+
+<div class="flex-1 items-center">
+  <div
+    class="my-2 flex w-full overflow-hidden rounded-t-md border-b-2 border-b-le-jaune bg-gray-100 md:w-[600px]"
+  >
+    <input
+      autocomplete="off"
+      class="w-full border-none bg-transparent text-base text-gray-900 placeholder-gray-400 !ring-transparent focus:outline-none"
+      id="search"
+      placeholder="impôt sur le revenu, CSG, ..."
+      type="search"
+      bind:value={searchQuery}
+    />
+    {#if isSearchActive}
+      <iconify-icon
+        class="mx-1 cursor-pointer self-center p-1 text-black"
+        icon="ic-baseline-clear"
+        flip="horizontal"
+        width="22"
+        height="22"
+        on:click={() => (searchQuery = "")}
+        on:keyup
+      />
+    {/if}
+    <button class="flex items-center bg-le-jaune px-10"
+      ><iconify-icon icon="ri-search-line" width="22" height="22" /></button
+    >
+  </div>
+</div>
diff --git a/src/lib/components/test_cases/TestCaseCompareView.svelte b/src/lib/components/test_cases/TestCaseCompareView.svelte
index c3ee37254e47cf02bd9acfae888e79a03092501a..30220a3b099c18686406a26327cffee0c8aae23a 100644
--- a/src/lib/components/test_cases/TestCaseCompareView.svelte
+++ b/src/lib/components/test_cases/TestCaseCompareView.svelte
@@ -98,7 +98,7 @@
       </button>
     {/if}
   </div>
-  <div class="sticky top-0 z-20 flex border-b-2 border-l border-gray-200">
+  <div class="flex border-b-2 border-l border-gray-200">
     <div
       class="flex w-10/12 justify-self-end bg-[url('/background_image/background_compareview_header.svg')] bg-cover bg-center bg-no-repeat px-4 md:w-11/12"
       id="situation_{situationsToCompareIndex.join('_')}_cases_summary"
@@ -304,7 +304,7 @@
         </div>
         <!--Onglets-->
         <div
-          class="sticky top-72 flex h-[30em] w-2/12 flex-col justify-between bg-gray-100 md:w-1/12"
+          class="flex h-[30em] w-2/12 flex-col justify-between bg-gray-100 md:w-1/12"
         >
           {#each waterfalls as { icon, label, name }}
             <a
diff --git a/src/lib/components/test_cases/TestCaseRelatedCarousel.svelte b/src/lib/components/test_cases/TestCaseRelatedCarousel.svelte
index 1422097e0346ff68803e1af58d3542cf91e83147..0290871bbb57e85bd78f5aa437194889f53c69af 100644
--- a/src/lib/components/test_cases/TestCaseRelatedCarousel.svelte
+++ b/src/lib/components/test_cases/TestCaseRelatedCarousel.svelte
@@ -108,7 +108,7 @@
     class="mb-12 w-[600px] shrink-0 snap-center border-2 bg-white hover:border-le-bleu hover:bg-gray-200 md:rounded-md"
   >
     <button
-      class="flex h-full w-full flex-col items-center justify-center gap-5"
+      class="flex h-full min-h-[320px] w-full flex-col items-center justify-center gap-5"
       on:click={() => dispatch("openTestCaseSelectModal")}
       type="button"
     >
diff --git a/src/lib/components/test_cases/TestCaseSelectModal.svelte b/src/lib/components/test_cases/TestCaseSelectModal.svelte
index 6a40805b5003f71350a0123cd0c1f9660f13608c..08fefb1301a5962f7c91272654959605d6a7fcb3 100644
--- a/src/lib/components/test_cases/TestCaseSelectModal.svelte
+++ b/src/lib/components/test_cases/TestCaseSelectModal.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import VariableValueChange from "$lib/components/variables/VariableValueChange.svelte"
   import TestCaseSummary from "$lib/components/test_cases/TestCaseSummary.svelte"
   import {
     Dialog,
@@ -15,18 +16,34 @@
   import type { DisplayMode } from "$lib/displays"
   import type { Situation } from "$lib/situations"
   import { newSimulationUrl } from "$lib/urls"
-  import type { ValuesByCalculationNameByVariableName } from "$lib/variables"
+  import {
+    variableSummaryByName,
+    type ValuesByCalculationNameByVariableName,
+    variableSummaryByNameByReformName,
+  } from "$lib/variables"
+  import type { EvaluationByName } from "$lib/decompositions"
 
   export let displayMode: DisplayMode
   export let isOpen = false
   export let year: number
 
   const dispatch = createEventDispatcher()
+  const billName = getContext("billName") as Writable<string | undefined>
   const testCases = getContext("testCases") as Writable<Situation[]>
   const testCasesIndex = getContext("testCasesIndex") as Writable<number[]>
   const valuesByCalculationNameByVariableNameArray = getContext(
     "valuesByCalculationNameByVariableNameArray",
   ) as Writable<ValuesByCalculationNameByVariableName[]>
+  const evaluationByNameArray = getContext("evaluationByNameArray") as Writable<
+    EvaluationByName[]
+  >
+
+  $: variableSummary =
+    $billName === undefined
+      ? variableSummaryByName[displayMode.parametersVariableName]
+      : variableSummaryByNameByReformName[$billName][
+          displayMode.parametersVariableName
+        ]
 
   function changeTestCaseIndex(value: number) {
     isOpen = false
@@ -90,7 +107,7 @@
               type="button"
             >
               <iconify-icon
-                class="ml-2 h-10 w-10"
+                class="w-10 p-2 text-2xl"
                 icon="ri-close-line"
               /></button
             >
@@ -103,35 +120,50 @@
 
             <div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
               {#each $testCases as situation, situationIndex}
-                <div
-                  class="w-full bg-white py-1 text-sm"
-                  value={situationIndex}
-                >
+                <div class="w-full bg-white text-sm" value={situationIndex}>
                   <button
                     class="group w-full"
                     on:click={() => changeTestCaseIndex(situationIndex)}
                     type="button"
                   >
-                    <div
-                      class=" border-b-2 bg-gray-100 p-4 pb-2 text-left hover:border-le-bleu hover:bg-gray-200 md:rounded-t-md"
-                      id="situation_{situationIndex}_case_summary"
-                    >
-                      <TestCaseSummary
-                        {displayMode}
-                        mode="select"
-                        {situation}
-                        {situationIndex}
-                        valuesByCalculationNameByVariableName={$valuesByCalculationNameByVariableNameArray[
-                          situationIndex
-                        ]}
-                        {year}
-                      />
-                    </div>
-                    <div>
-                      <span class="group-hover:text-le-bleu"
-                        >{situation.title}
-                      </span>
+                    <div class="overflow-hidden border-2 md:rounded-md">
+                      <div
+                        class="bg-gray-100 p-4 pb-2 text-left hover:border-le-bleu hover:bg-gray-200"
+                        id="situation_{situationIndex}_case_summary"
+                      >
+                        <TestCaseSummary
+                          {displayMode}
+                          mode="select"
+                          {situation}
+                          {situationIndex}
+                          valuesByCalculationNameByVariableName={$valuesByCalculationNameByVariableNameArray[
+                            situationIndex
+                          ]}
+                          {year}
+                        />
+                      </div>
+                      {#if variableSummary !== undefined}
+                        <div class="flex flex-col gap-2 bg-white p-3">
+                          <span class="text-start"
+                            >{variableSummary.short_label ??
+                              variableSummary.label ??
+                              displayMode.parametersVariableName}&nbsp;:</span
+                          >
+                          <div class="flex gap-5 text-3xl font-semibold">
+                            <VariableValueChange
+                              evaluationByName={$evaluationByNameArray[
+                                situationIndex
+                              ]}
+                              legend
+                              name={displayMode.parametersVariableName}
+                            />
+                          </div>
+                        </div>
+                      {/if}
                     </div>
+                    <span class="group-hover:text-le-bleu">
+                      {situation.title}
+                    </span>
                   </button>
                 </div>
               {/each}
diff --git a/src/lib/components/test_cases/TestCaseTab.svelte b/src/lib/components/test_cases/TestCaseTab.svelte
index 7708791bc077254081c07284d89b7c3303555cc5..bf542a65a25afc6780ec620cf5a7c43f209c3f71 100644
--- a/src/lib/components/test_cases/TestCaseTab.svelte
+++ b/src/lib/components/test_cases/TestCaseTab.svelte
@@ -1,19 +1,33 @@
 <script lang="ts">
+  import { onMount } from "svelte"
+
   export let href
   export let icon
+  export let picto
   export let text
   export let isActive
   export let isDisabled
+
+  let pictoComponent
+  onMount(async () => {
+    if (picto !== undefined)
+      pictoComponent = (await import(`$lib/components/pictos/${picto}.svelte`))
+        .default
+  })
 </script>
 
 <a
-  class="flex gap-2 border-r-2 px-8 py-4 uppercase text-gray-600"
+  class="flex gap-2 border-r-2 px-4 py-4 uppercase text-gray-600 md:px-8"
   class:bg-white={isActive && !isDisabled}
   class:shadow-md={isActive && !isDisabled}
   class:!text-gray-400={isDisabled}
   class:cursor-not-allowed={isDisabled}
   href={!isDisabled ? href : undefined}
 >
-  <iconify-icon {icon} class="text-2xl" />
+  {#if pictoComponent !== undefined}
+    <svelte:component this={pictoComponent} />
+  {:else}
+    <iconify-icon {icon} class="text-2xl" />
+  {/if}
   {text}
 </a>
diff --git a/src/lib/components/test_cases/TestCaseView.svelte b/src/lib/components/test_cases/TestCaseView.svelte
index cec54649e69297642857e6f1168fc28ec1f0b1a1..0d4194a1b7c697cc44ad333bb7a016dce3f46f36 100644
--- a/src/lib/components/test_cases/TestCaseView.svelte
+++ b/src/lib/components/test_cases/TestCaseView.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { DecompositionReference, Waterfall } from "@openfisca/json-model"
+  import type { Waterfall } from "@openfisca/json-model"
   import { Popover } from "flowbite-svelte"
   import { getContext } from "svelte"
   import type { Writable } from "svelte/store"
@@ -7,7 +7,6 @@
   import {
     variableValueByCalculationNameFromEvaluation,
     type CalculationByName,
-    type CalculationName,
     isNullVariableValueByCalculationName,
   } from "$lib/calculations"
   import Spinner from "$lib/components/Spinner.svelte"
@@ -38,6 +37,8 @@
   export let situationIndex: number
   export let valuesByCalculationNameByVariableName: ValuesByCalculationNameByVariableName
   export let year: number
+  export let defaultTab: string
+  export let tabs
 
   const oilSpendings = oilTypes.map((name) => ({
     depenseTtcVariableName: `depense_${name}_ttc`,
@@ -62,26 +63,6 @@
   const waterfall = getContext("waterfall") as Writable<Waterfall>
 
   $: evaluationByName = $evaluationByNameArray[situationIndex]
-
-  const defaultTab = "impacts_globaux"
-  const tabs = [
-    {
-      title: "Impact dispositif",
-      icon: "material-symbols:location-on",
-      tab: "impact_dispositif",
-    },
-    {
-      title: "Impacts directs",
-      icon: "ri:mastercard-line",
-      tab: "impacts_directs",
-      disabled: true,
-    },
-    {
-      title: "Impacts globaux",
-      icon: "ph:globe-simple-bold",
-      tab: "impacts_globaux",
-    },
-  ]
 </script>
 
 <div
@@ -89,7 +70,7 @@
   id="situation_{situationIndex}"
 >
   <div
-    class="sticky top-14 z-20 bg-gray-100 md:rounded-t-md"
+    class="bg-gray-100 md:rounded-t-md"
     id="situation_{situationIndex}_case_summary"
   >
     <div class="p-4 pb-2">
@@ -113,6 +94,7 @@
             tab: tabData.tab,
           })}
           icon={tabData.icon}
+          picto={tabData.picto}
           text={tabData.title}
           isActive={displayMode.tab === tabData.tab ||
             (tabData.tab === defaultTab && displayMode.tab === undefined)}
@@ -122,10 +104,10 @@
     </div>
   </div>
 
-  {#if displayMode.tab === "impact_dispositif" || (displayMode.tab === undefined && defaultTab === "impact_dispositif")}
+  {#if displayMode.tab === "dispositif" || (displayMode.tab === undefined && defaultTab === "dispositif")}
     <div class="w-full bg-white px-8 py-5">
       {#if displayMode.parametersVariableName !== undefined && decompositionByName[displayMode.parametersVariableName] !== undefined}
-        <div>
+        <div class="flex flex-col gap-5">
           <div class="grid grid-cols-3 gap-5">
             <div class="flex flex-col">
               <div
@@ -372,121 +354,84 @@
               class="checked rounded bg-gray-100 accent-gray-500"
               type="checkbox"
             />
-            Montrer tous les dispositifs, y compris si le montant est nul.
+            <span class="ml-2"
+              >Montrer tous les dispositifs directs, y compris si le montant est nul.</span
+            >
           </label>
         </div>
       {:else}
-        <span>Aucun paramètre séléctionné.</span>
+        <p>Aucun dispositif sélectionné.</p>
+        <!--        <br/>-->
+        <!--        <p>Choissez-en un</p>-->
+        <!--        <ul>-->
+        <!--          <li>- parmi ceux proposés à gauche, ou</li>-->
+        <!--          <li>- dans la fiche de paie, ou</li>-->
+        <!--          <li>- en lançant une recherche.</li>-->
+        <!--        </ul>-->
       {/if}
     </div>
   {/if}
 
-  {#if displayMode.tab === "impacts_globaux" || (displayMode.tab === undefined && defaultTab === "impacts_globaux")}
+  {#if displayMode.tab === "fiche_de_paie" || (displayMode.tab === undefined && defaultTab === "fiche_de_paie")}
     <div class="bg-white">
       {#if variableSummaryByName !== undefined}
         <div class="flex justify-between bg-gray-100">
           <!--Impacts et waterfall-->
-
-          <div
-            class="{displayMode.compact
-              ? 'w-full'
-              : 'w-10/12 md:w-11/12'} rounded-b-lg bg-white px-4"
-          >
+          <div class="w-10/12 bg-white py-4 md:w-11/12">
             {#if Object.values($calculationByName).filter((calculation) => calculation.running && (calculation.situationIndex === undefined || calculation.situationIndex === situationIndex)).length > 0}
               <Spinner />
             {/if}
 
-            <!--Bouton pour passer du mode compact au mode waterfall-->
-            <div class="flex w-full justify-between">
-              {#if displayMode.compact}
-                <a
-                  class="mb-2 flex w-full cursor-pointer items-center border-gray-300 py-1 pr-4 text-gray-600"
-                  href={newSimulationUrl({
-                    ...displayMode,
-                    compact: undefined,
-                  })}
-                  data-sveltekit-noscroll
-                >
-                  <iconify-icon
-                    class="mr-1 align-[-0.2rem] text-xl"
-                    icon="ri-arrow-right-s-line"
-                  /><span class="tracking-wider">Voir tous les dispositifs</span
-                  >
-                </a>
-              {:else}
-                <a
-                  class="flex w-full cursor-pointer items-center border-b border-gray-300 py-1 pr-4 text-gray-600"
-                  href={newSimulationUrl({
-                    ...displayMode,
-                    compact: true,
-                  })}
-                  data-sveltekit-noscroll
-                >
-                  <iconify-icon
-                    class="mr-1 align-[-0.2rem] text-xl"
-                    icon="ri-arrow-down-s-line"
-                  />
-                  <span class="tracking-wider">Tous les dispositifs</span>
-                </a>
-              {/if}
-            </div>
-
-            {#if !displayMode.compact}
-              <div class="h-5 bg-gradient-to-b from-gray-100 to-transparent" />
-
-              <WaterfallView
-                {decompositionByName}
-                {displayMode}
-                {evaluationByName}
-                on:changeDecompositionByName
-                {situation}
-                {situationIndex}
-                {variableSummaryByName}
-                {year}
-              />
-            {/if}
+            <WaterfallView
+              {decompositionByName}
+              {displayMode}
+              {evaluationByName}
+              on:changeDecompositionByName
+              {situation}
+              {situationIndex}
+              {variableSummaryByName}
+              {year}
+            />
           </div>
-          {#if !displayMode.compact}
-            <!--Onglets-->
-            <div
-              class="sticky top-72 flex h-[30em] w-2/12 flex-col justify-between bg-gray-100 md:w-1/12"
-              id="situation_{situationIndex}_Employeur"
-            >
-              {#each waterfalls as { icon, label, name }}
-                <a
-                  class="flex grow items-center justify-around shadow-inner"
-                  class:bg-white={name === $waterfall.name}
-                  class:border-le-bleu={name === $waterfall.name}
-                  class:border-r-4={name === $waterfall.name}
-                  class:shadow-none={name === $waterfall.name}
-                  href={newSimulationUrl({
-                    ...displayMode,
-                    waterfallName: name,
-                  })}
-                  data-sveltekit-noscroll
-                >
-                  <div class="origin-center rotate-90">
-                    <div class="mr-5 flex">
-                      {#if icon !== undefined}
-                        <img
-                          class="block origin-center -rotate-90"
-                          alt="Icone pour {label}"
-                          src={icon}
-                        />
-                      {/if}
-                      <span
-                        class="ml-2 text-xs uppercase tracking-wide text-gray-600 xl:text-sm"
-                        class:text-le-bleu={name === $waterfall.name}
-                        class:font-bold={name === $waterfall.name}
-                      >
-                        {label}
-                      </span>
-                    </div>
+          <!--Onglets-->
+          <div
+            class="flex h-[30em] w-2/12 flex-col justify-between bg-gray-100 md:w-1/12"
+            id="situation_{situationIndex}_Employeur"
+          >
+            {#each waterfalls as { icon, label, name }}
+              <a
+                class="flex grow items-center justify-around shadow-inner"
+                class:bg-white={name === $waterfall.name}
+                class:border-le-bleu={name === $waterfall.name}
+                class:border-r-4={name === $waterfall.name}
+                class:shadow-none={name === $waterfall.name}
+                href={newSimulationUrl({
+                  ...displayMode,
+                  waterfallName: name,
+                })}
+                data-sveltekit-noscroll
+              >
+                <div class="origin-center rotate-90">
+                  <div class="mr-5 flex">
+                    {#if icon !== undefined}
+                      <img
+                        class="block origin-center -rotate-90"
+                        alt="Icone pour {label}"
+                        src={icon}
+                      />
+                    {/if}
+                    <span
+                      class="ml-2 text-xs uppercase tracking-wide text-gray-600 xl:text-sm"
+                      class:text-le-bleu={name === $waterfall.name}
+                      class:font-bold={name === $waterfall.name}
+                    >
+                      {label}
+                    </span>
                   </div>
-                </a>
-              {/each}
-            </div>
-          {/if}
+                </div>
+              </a>
+            {/each}
+          </div>
         </div>
         <div class="px-4 py-2">
           <p class="text-right text-xs font-bold text-gray-600">
diff --git a/src/lib/components/variables/VariableReferredParameterHeader.svelte b/src/lib/components/variables/VariableReferredParameterHeader.svelte
index 9e7edcc550ace68b171792f5aea9b767a960a02b..8973c737b11bde66900d128cea2a70d1d5bd4978 100644
--- a/src/lib/components/variables/VariableReferredParameterHeader.svelte
+++ b/src/lib/components/variables/VariableReferredParameterHeader.svelte
@@ -35,7 +35,7 @@
         >
           {ancestor.title}
         </a>
-        &gt;
+        <span>&nbsp;&gt;&nbsp;</span>
       {/each}
     {/if}
     {#if parameter.title !== parameter.parent?.title}
diff --git a/src/lib/displays.ts b/src/lib/displays.ts
index ee08c3952468e2934592602388031b168281289e..027a49046b5d9b69823ce422708779789243f00d 100644
--- a/src/lib/displays.ts
+++ b/src/lib/displays.ts
@@ -1,7 +1,6 @@
 export interface DisplayMode {
   action?: string // TODO: Remove attribute "action".
   budget?: boolean
-  compact?: boolean
   mobileLaw?: boolean // For mobile, when not in edit mode: When true, show law, otherwise show impacts.
   parameterName?: string
   parametersVariableName?: string
diff --git a/src/lib/urls.ts b/src/lib/urls.ts
index a6104c217848087569684a56d766a510c4fb72ec..695c78b0db94f5938fc32facf29e1e36762d847d 100644
--- a/src/lib/urls.ts
+++ b/src/lib/urls.ts
@@ -17,9 +17,6 @@ export function newSimulationUrl(displayMode: DisplayMode): string {
   if (displayMode.budget) {
     query.append("budget", "true")
   }
-  if (displayMode.compact) {
-    query.append("compact", "true")
-  }
   if (displayMode.edit !== undefined) {
     query.append("edit", displayMode.edit.toString())
   }
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 525b5348ae851c0d640c8ad14fa4eb20008042e5..8d013f77b896dfbc3d331d5027d312555ecd60b6 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -59,6 +59,7 @@
   import type { WebSocketByName, WebSocketOpenByName } from "$lib/websockets"
 
   import type { LayoutData } from "./$types"
+  import type { DisplayMode } from "$lib/displays"
 
   export let data: LayoutData
 
@@ -1039,6 +1040,15 @@
       $evaluationByNameArray = updatedEvaluationByNameArray
     }
   }
+
+  const isSearchActive: Writable<boolean> = writable(false)
+  setContext("isSearchActive", isSearchActive)
+
+  const searchParameterName: Writable<string | undefined> = writable(undefined)
+  setContext("searchParameterName", searchParameterName)
+
+  const displayMode: Writable<DisplayMode | undefined> = writable(undefined)
+  setContext("displayMode", displayMode)
 </script>
 
 <svelte:head>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 3833eb948961fc1863c821f76cae4d23560f6f0f..6e08bef2162594e61dac0b4d2a7f316b67dc6670 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -15,7 +15,6 @@
   import { Popover } from "flowbite-svelte"
   import introJs from "intro.js"
   import { getContext, setContext } from "svelte"
-  import { openModal } from "svelte-modals"
   import type { Writable } from "svelte/store"
 
   import { browser } from "$app/environment"
@@ -33,7 +32,6 @@
   import IrGagnantsPerdantsView from "$lib/components/IrGagnantsPerdantsView.svelte"
   import CsgGagnantsPerdantsView from "$lib/components/CsgGagnantsPerdantsView.svelte"
   import ReformsChanges from "$lib/components/ReformsChanges.svelte"
-  import ShareLinkModal from "$lib/components/ShareLinkModal.svelte"
   import Spinner from "$lib/components/Spinner.svelte"
   import TestCaseSelectModal from "$lib/components/test_cases/TestCaseSelectModal.svelte"
   import TestCaseExamplesSelectBar from "$lib/components/test_cases/TestCaseExamplesSelectBar.svelte"
@@ -41,7 +39,6 @@
   import TestCaseEdit from "$lib/components/test_cases/TestCaseEdit.svelte"
   import TestCaseRelatedCarousel from "$lib/components/test_cases/TestCaseRelatedCarousel.svelte"
   import TestCaseView from "$lib/components/test_cases/TestCaseView.svelte"
-  import Search from "$lib/components/search/Search.svelte"
   import NonVariableReferredParameter from "$lib/components/variables/NonVariableReferredParameter.svelte"
   import VariableReferredInputsPane from "$lib/components/variables/VariableReferredInputsPane.svelte"
   import VariableReferredParameters from "$lib/components/variables/VariableReferredParameters.svelte"
@@ -71,7 +68,8 @@
   } from "$lib/variables"
 
   import type { PageData } from "./$types"
-  import { SearchMode } from "$lib/search/search_mode"
+  import PictoFemme from "$lib/components/pictos/PictoFemme.svelte"
+  import PictoEtat from "$lib/components/pictos/PictoEtat.svelte"
 
   export let data: PageData
 
@@ -116,6 +114,13 @@
   ) as Writable<ValuesByCalculationNameByVariableName[]>
   let windowInnerWidth: number | undefined = undefined
   const year = getContext("year") as Writable<number>
+  const isSearchActive = getContext("isSearchActive") as Writable<boolean>
+  const searchParameterName = getContext("searchParameterName") as Writable<
+    string | undefined
+  >
+  const displayModeWritable = getContext("displayMode") as Writable<
+    DisplayMode | undefined
+  >
 
   $: ({ user } = data)
 
@@ -637,44 +642,7 @@
     // goto(newSimulationUrl(displayMode))
   }
 
-  async function shareLink(): Promise<void> {
-    const urlString = "/simulations"
-    const res = await fetch(urlString, {
-      body: JSON.stringify({
-        displayMode,
-        inputInstantsByVariableNameArray: $inputInstantsByVariableNameArray.map(
-          (inputInstantsByVariableName) =>
-            Object.fromEntries(
-              Object.entries(inputInstantsByVariableName).map(
-                ([variableName, inputInstants]) => [
-                  variableName,
-                  [...inputInstants],
-                ],
-              ),
-            ),
-        ),
-        parametricReform: $parametricReform,
-        testCases: $testCases,
-      }),
-      headers: {
-        Accept: "application/json",
-        "Content-Type": "application/json; charset=utf-8",
-      },
-      method: "POST",
-    })
-    if (!res.ok) {
-      console.error(
-        `Error ${
-          res.status
-        } while creating a share link at ${urlString}\n\n${await res.text()}`,
-      )
-      return
-    }
-    const { token } = await res.json()
-    openModal(ShareLinkModal, {
-      token,
-    })
-  }
+  $: $displayModeWritable = displayMode
 
   let validateBtnHeight = 0
 
@@ -684,6 +652,105 @@
         if (displayMode.edit !== undefined) setTimeout(() => changeTestCaseToEditIndex(undefined), 1)
     }
   }
+
+  const dispositifsTypes = [
+    {
+      title: "Impôt sur le revenu",
+      icon: "picto-impot-sur-le-revenu.png",
+      foyer: {
+        budget: undefined,
+        parametersVariableName: "irpp_economique",
+      },
+      budget: {
+        budget: true,
+        parametersVariableName: "irpp_economique",
+      },
+    },
+    {
+      title: "Contribution sociale généralisée - CSG",
+      icon: "picto-csg.png",
+      foyer: {
+        budget: undefined,
+        parametersVariableName: "csg_imposable_salaire",
+      },
+      budget: {
+        budget: true,
+        parametersVariableName: "csg_imposable_salaire",
+      },
+    },
+    {
+      title: "Prime de partage de la valeur",
+      icon: "illustration-pepa.png",
+      foyer: {
+        mobileLaw: true,
+        budget: undefined,
+        parametersVariableName: "prime_partage_valeur_exoneree",
+        testCasesIndex: [3, 4],
+        waterfallName: "brut_to_super_brut",
+      },
+    },
+    {
+      title: "Taxes sur les carburants",
+      icon: "illustration-ticpe.png",
+      foyer: {
+        mobileLaw: true,
+        budget: undefined,
+        parametersVariableName: "essence_sp95_e10_ticpe",
+        testCasesIndex: [15],
+      },
+    },
+    {
+      title: "Exonération TO-DE",
+      icon: "illustration-exoneration-tode.png",
+      foyer: {
+        mobileLaw: true,
+        budget: undefined,
+        parametersVariableName: "exoneration_cotisations_employeur_tode",
+        testCasesIndex: [13, 14],
+        waterfallName: "brut_to_super_brut",
+      },
+    },
+  ]
+
+  const defaultTab = "fiche_de_paie"
+  const tabs = [
+    {
+      title: "Dispositif",
+      icon: "ri:zoom-in-line",
+      tab: "dispositif",
+    },
+    // {
+    //   title: "Impacts directs",
+    //   icon: "ri:mastercard-line",
+    //   tab: "impacts_directs",
+    //   disabled: true,
+    // },
+    {
+      title: "Fiche de paie",
+      picto: "PictoFicheDePaie",
+      tab: "fiche_de_paie",
+    },
+  ]
+
+  // $: tabs[0].disabled = !(displayMode.parametersVariableName !== undefined && $decompositionByName[displayMode.parametersVariableName] !== undefined)
+
+  function loadParameter(parameterName: string | undefined) {
+    if (parameterName === undefined) return
+
+    goto(
+      newSimulationUrl({
+        ...displayMode,
+        parameterName: undefined,
+        parametersVariableName: parameterName,
+        tab: "dispositif",
+      }),
+      { noScroll: true },
+    )
+  }
+
+  $: loadParameter($searchParameterName)
+
+  let testCasesBtnHeight = 0
 </script>
 
 <svelte:window bind:innerWidth={windowInnerWidth} on:keydown={onKeyDown} />
@@ -691,7 +758,10 @@
   <title>Calculs | {data.title}</title>
 </svelte:head>
 
-<main class="fond flex h-full flex-1 overflow-x-clip md:overflow-hidden">
+<main
+  class="fond flex h-full flex-1 overflow-x-clip after:absolute after:inset-0 after:z-10 after:bg-[rgba(0,0,0,.3)] after:transition-all md:overflow-hidden"
+  class:after:content-none={!$isSearchActive}
+>
   <div
     class="flex flex-[1_0_100%] flex-col overflow-x-clip transition-transform duration-500 ease-in-out-quart md:overflow-hidden"
     class:!translate-x-[-33.3%]={displayMode.edit !== undefined}
@@ -758,66 +828,137 @@
     <div class="flex flex-1 overflow-x-hidden">
       <!-- Panneau de gauche les zones éditables par l'utilisateur (amendement)-->
       <div
-        class="flex flex-[1_0_100%] overflow-y-scroll bg-white shadow-lg transition-transform duration-500 ease-in-out-quart md:z-10 md:!h-full md:flex-[1_0_33.3%] md:translate-x-0 md:overflow-visible"
+        class="flex flex-[1_0_100%] overflow-y-scroll bg-white shadow-lg transition-transform duration-500 ease-in-out-quart md:z-10 md:!h-full md:flex-[1_0_33.3%] md:translate-x-0 md:overflow-visible md:!p-0"
         class:translate-x-[-100%]={!displayMode.mobileLaw}
         class:!h-[calc(100vh-96px)]={!displayMode.mobileLaw}
+        style:padding-bottom="{$testCasesIndex.length === 1 &&
+        displayMode.parametersVariableName === undefined
+          ? testCasesBtnHeight + 40
+          : 0}px"
         id="situation_left_part_law"
       >
         <div class="flex min-h-full w-full flex-col">
+          <!-- Header (fixed) -->
           <div
-            class="hidden items-center justify-between border-b border-black px-5 pb-3 pt-5 md:flex"
+            class="mx-5 flex items-center justify-between border-b border-black pb-3 pt-5 md:m-0 md:px-5"
           >
+            <!-- Titre -->
             <h1 class="flex text-2xl font-bold text-black">
-              Modifier le droit en vigueur
+              {#if (displayMode.parametersVariableName !== undefined && $decompositionByName[displayMode.parametersVariableName] !== undefined) || displayMode.parameterName}
+                Modifier le droit en vigueur
+              {:else}
+                Sélectionner un dispositif
+              {/if}
             </h1>
 
-            <button
-              class="mx-4 flex h-8 grow-0 items-center rounded-md bg-le-jaune px-2 py-1 text-sm uppercase text-black shadow-md hover:bg-le-jaune-dark hover:text-white focus:outline-none md:mx-0"
-              class:!bg-gray-200={Object.keys($parametricReform).length === 0}
-              class:!text-gray-500={Object.keys($parametricReform).length === 0}
-              class:!shadow-none={Object.keys($parametricReform).length === 0}
-              class:!cursor-default={Object.keys($parametricReform).length ===
-                0}
-              class:bg-le-jaune-dark={modificationsOpen}
-              class:text-white={modificationsOpen}
-              on:click={Object.keys($parametricReform).length > 0
-                ? () => {
-                    modificationsOpen = !modificationsOpen
-                  }
-                : undefined}
+            <!-- DESKTOP - Modifications en cours -->
+            <div class="hidden md:block">
+              <button
+                class="mx-4 flex h-8 grow-0 items-center rounded-md bg-le-jaune px-2 py-1 text-sm uppercase text-black shadow-md hover:bg-le-jaune-dark hover:text-white focus:outline-none md:mx-0"
+                class:!bg-gray-200={Object.keys($parametricReform).length === 0}
+                class:!text-gray-500={Object.keys($parametricReform).length ===
+                  0}
+                class:!shadow-none={Object.keys($parametricReform).length === 0}
+                class:!cursor-default={Object.keys($parametricReform).length ===
+                  0}
+                class:bg-le-jaune-dark={modificationsOpen}
+                class:text-white={modificationsOpen}
+                on:click={Object.keys($parametricReform).length > 0
+                  ? () => {
+                      modificationsOpen = !modificationsOpen
+                    }
+                  : undefined}
+              >
+                {Object.keys($parametricReform).length === 0
+                  ? "Aucune modification"
+                  : Object.keys($parametricReform).length === 1
+                  ? "1 modification"
+                  : `${Object.keys($parametricReform).length} modifications`}
+              </button>
+
+              {#if modificationsOpen}
+                <!--
+                    Dropdown menu
+
+                    Entering: "transition ease-out duration-100"
+                      From: "opacity-0 scale-95"
+                      To: "opacity-100 scale-100"
+                    Leaving: "transition ease-in duration-75"
+                      From: "opacity-100 scale-100"
+                      To: "opacity-0 scale-95"
+                  -->
+                <div
+                  class="absolute left-80 top-0 z-50 mr-6 mt-14 w-64 rounded bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
+                  role="menu"
+                  aria-orientation="vertical"
+                  aria-labelledby="user-menu"
+                >
+                  <button
+                    class="ml-4 h-10 place-self-start text-sm uppercase text-gray-600 hover:text-black"
+                    on:click={() => {
+                      reset()
+                      modificationsOpen = false
+                    }}
+                    title="Retirer les modifications de votre réforme"
+                  >
+                    <iconify-icon
+                      class="mr-1 align-[-0.2rem] text-lg"
+                      icon="ri:refresh-line"
+                    />
+                    Réinitialiser
+                  </button>
+                  <ReformsChanges
+                    {displayMode}
+                    on:click={() => (modificationsOpen = false)}
+                  />
+                </div>
+              {/if}
+            </div>
+          </div>
+
+          <!-- MOBILE - Modifications en cours -->
+          {#if billName !== undefined}
+            <div
+              class="mx-5 flex flex-col rounded-b border bg-gray-200 px-2 py-1 shadow-md md:hidden"
             >
-              {Object.keys($parametricReform).length === 0
-                ? "Aucune modification"
-                : Object.keys($parametricReform).length === 1
-                ? "1 paramètre modifié"
-                : `${
-                    Object.keys($parametricReform).length
-                  } paramètres modifiés`}
-            </button>
-
-            {#if modificationsOpen}
-              <!--
-                  Dropdown menu
-
-                  Entering: "transition ease-out duration-100"
-                    From: "opacity-0 scale-95"
-                    To: "opacity-100 scale-100"
-                  Leaving: "transition ease-in duration-75"
-                    From: "opacity-100 scale-100"
-                    To: "opacity-0 scale-95"
-                -->
-              <div
-                class="absolute left-80 top-0 z-50 mr-6 mt-14 w-64 rounded bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
-                role="menu"
-                aria-orientation="vertical"
-                aria-labelledby="user-menu"
+              <button
+                class="place-self-start text-lg font-light"
+                on:click={() => {
+                  modificationsOpen = !modificationsOpen
+                }}
               >
+                {#if !modificationsOpen}
+                  <iconify-icon
+                    class="mr-1 align-[-0.2rem] text-lg"
+                    icon="ri:arrow-down-s-line"
+                  />
+                {:else}
+                  <iconify-icon
+                    class="mr-1 align-[-0.2rem] text-lg"
+                    icon="ri:arrow-up-s-line"
+                  />
+                {/if}
+
+                Modifications en cours
+                {#if Object.keys($parametricReform).length !== 0 && displayMode.mobileLaw}
+                  <iconify-icon
+                    class="align-[0.1rem] text-sm text-le-jaune"
+                    icon="ri-checkbox-blank-circle-fill"
+                  />
+                {/if}
+                {#if $billName !== undefined && Object.keys($billName).length !== 0 && displayMode.mobileLaw}
+                  <iconify-icon
+                    class="align-[0.1rem] text-sm text-le-rouge-bill"
+                    icon="ri-checkbox-blank-circle-fill"
+                  />
+                {/if}
+              </button>
+
+              {#if modificationsOpen}
+                <ReformsChanges {displayMode} />
                 <button
-                  class="ml-4 h-10 place-self-start text-sm uppercase text-gray-600 hover:text-black"
-                  on:click={() => {
-                    reset()
-                    modificationsOpen = false
-                  }}
+                  class="place-self-end text-sm uppercase text-gray-600 hover:text-black"
+                  on:click={reset}
                   title="Retirer les modifications de votre réforme"
                 >
                   <iconify-icon
@@ -826,13 +967,110 @@
                   />
                   Réinitialiser
                 </button>
-                <ReformsChanges {displayMode} />
+              {/if}
+            </div>
+          {/if}
+
+          <!-- Content -->
+          <div class="w-full overflow-y-scroll bg-white p-4">
+            <!-- Vue par défaut - choix de dispositifs -->
+            {#if displayMode.parametersVariableName === undefined && displayMode.parameterName === undefined}
+              <div class="grid grid-cols-1 gap-8 text-center sm:grid-cols-2">
+                {#each dispositifsTypes as dispositifType}
+                  <div
+                    class="flex flex-col items-center justify-between gap-4 rounded-lg border bg-white p-5 shadow-md"
+                  >
+                    <h3
+                      class="mb-2 text-xl font-bold sm:text-base lg:text-xl 2xl:text-xl"
+                    >
+                      {dispositifType.title}
+                    </h3>
+                    <img
+                      class="max-h-24"
+                      src={dispositifType.icon}
+                      alt="Pictogramme représentant une feuille d'impôt"
+                    />
+                    <div class="flex gap-2 md:flex-col">
+                      {#if dispositifType.foyer !== undefined}
+                        <a
+                          class="inline-flex justify-between gap-2 rounded-lg border-2 border-le-bleu p-2 px-5 text-center text-base uppercase tracking-wide text-le-bleu shadow-md hover:border-blue-900 hover:bg-blue-900 hover:text-white"
+                          href={newSimulationUrl({
+                            ...displayMode,
+                            ...dispositifType.foyer,
+                            tab: "dispositif"
+                          })}
+                        >
+                          <span>Foyer</span>
+                          <PictoFemme />
+                        </a>
+                      {/if}
+                      {#if dispositifType.budget !== undefined}
+                        <a
+                          class="inline-flex justify-between gap-2 rounded-lg border-2 border-le-bleu p-2 px-5 text-center text-base uppercase tracking-wide text-le-bleu shadow-md hover:border-blue-900 hover:bg-blue-900 hover:text-white"
+                          href={newSimulationUrl({
+                            ...displayMode,
+                            ...dispositifType.budget,
+                          })}
+                        >
+                          <span>Budget</span>
+                          <PictoEtat />
+                        </a>
+                      {/if}
+                    </div>
+                  </div>
+                {/each}
               </div>
-            {/if}
-          </div>
-          <!--Partie I Paramètres de la loi-->
-          <div class="w-full overflow-y-scroll bg-white p-5">
-            {#if displayMode.parameterName !== undefined}
+              <!-- Vue modification de la loi -->
+            {:else if displayMode.parametersVariableName !== undefined && displayMode.parameterName === undefined}
+              <div class="mb-5 flex flex-col gap-2">
+                <div class="flex justify-end">
+                  <button
+                    class="text-sm uppercase text-gray-600 hover:text-black"
+                    on:click={closeParametersEditionPane}
+                    >Changer de dispositif<iconify-icon
+                      class="ml-1 align-[-0.23rem] text-lg"
+                      icon="ri-arrow-up-line"
+                    />
+                  </button>
+                </div>
+                {#if displayMode.parametersVariableName === "csg_deductible_salaire" || displayMode.parametersVariableName === "csg_imposable_salaire"}
+                  <div class="flex justify-end">
+                    <a
+                      class="flex items-center text-sm uppercase text-gray-600 hover:text-black"
+                      href={newSimulationUrl({
+                        ...displayMode,
+                        parametersVariableName:
+                          displayMode.parametersVariableName ===
+                          "csg_deductible_salaire"
+                            ? "csg_imposable_salaire"
+                            : "csg_deductible_salaire",
+                      })}
+                    >
+                      <span>
+                        {#if displayMode.parametersVariableName === "csg_deductible_salaire"}
+                          CSG - part imposable
+                        {:else}
+                          CSG - part déductible
+                        {/if}
+                      </span>
+                      <iconify-icon
+                        class="ml-1 align-[-0.2rem] text-lg"
+                        icon="ri-arrow-right-line"
+                      />
+                    </a>
+                  </div>
+                {/if}
+              </div>
+
+              <div class="flex-1 overflow-y-auto bg-white">
+                <VariableReferredParameters
+                  date={$date}
+                  {displayMode}
+                  name={displayMode.parametersVariableName}
+                />
+              </div>
+              <!-- Vue modification d'un paramètre -->
+            {:else}
               <!-- Bouton de fermeture du dispositif en cours - DESKTOP -->
               <div class="mx-5 mb-2 hidden justify-end md:flex">
                 <button
@@ -869,230 +1107,6 @@
                   />
                 </div>
               </div>
-            {:else if displayMode.parametersVariableName !== undefined}
-              <div class="hidden justify-end md:flex">
-                <button
-                  class="text-sm uppercase text-gray-600 hover:text-black"
-                  on:click={closeParametersEditionPane}
-                  >Changer de dispositif<iconify-icon
-                    class="ml-1 align-[-0.23rem] text-lg"
-                    icon="ri-arrow-up-line"
-                  />
-                </button>
-              </div>
-              {#if displayMode.parametersVariableName === "csg_deductible_salaire"}
-                <div class="mx-5 mb-2 hidden justify-end md:flex">
-                  <a
-                    class="text-sm uppercase text-gray-600 hover:text-black"
-                    href={newSimulationUrl({
-                      ...displayMode,
-                      parametersVariableName: "csg_imposable_salaire",
-                    })}
-                  >
-                    CSG - part imposable<iconify-icon
-                      class="ml-1 align-[-0.23rem] text-lg"
-                      icon="ri-arrow-right-line"
-                    />
-                  </a>
-                </div>
-              {:else if displayMode.parametersVariableName === "csg_imposable_salaire"}
-                <div class="mx-5 mb-2 hidden justify-end md:flex">
-                  <a
-                    class="flex items-center text-sm uppercase text-gray-600 hover:text-black"
-                    href={newSimulationUrl({
-                      ...displayMode,
-                      parametersVariableName: "csg_deductible_salaire",
-                    })}
-                  >
-                    CSG - part déductible<iconify-icon
-                      class="ml-1 align-[-0.2rem] text-lg"
-                      icon="ri-arrow-right-line"
-                    />
-                  </a>
-                </div>
-              {/if}
-
-              <div class="flex-1 overflow-y-auto">
-                <h1
-                  class="flex border-b border-black pb-3 text-2xl font-bold text-black md:hidden"
-                >
-                  Modifier le droit en vigueur
-                </h1>
-                <!--Partie II modification de la loi - MOBILE-->
-                <div class="flex flex-col md:hidden">
-                  {#if billName !== undefined}
-                    <div
-                      class="flex flex-col rounded-b border bg-gray-200 px-2 py-1 shadow-md"
-                    >
-                      <button
-                        class="place-self-start text-lg font-light"
-                        on:click={() => {
-                          modificationsOpen = !modificationsOpen
-                        }}
-                      >
-                        {#if !modificationsOpen}
-                          <iconify-icon
-                            class="mr-1 align-[-0.2rem] text-lg"
-                            icon="ri:arrow-down-s-line"
-                          />
-                        {:else}
-                          <iconify-icon
-                            class="mr-1 align-[-0.2rem] text-lg"
-                            icon="ri:arrow-up-s-line"
-                          />
-                        {/if}
-
-                        Modifications en cours
-                        {#if Object.keys($parametricReform).length !== 0 && displayMode.mobileLaw}
-                          <iconify-icon
-                            class="align-[0.1rem] text-sm text-le-jaune"
-                            icon="ri-checkbox-blank-circle-fill"
-                          />
-                        {/if}
-                        {#if $billName !== undefined && Object.keys($billName).length !== 0 && displayMode.mobileLaw}
-                          <iconify-icon
-                            class="align-[0.1rem] text-sm text-le-rouge-bill"
-                            icon="ri-checkbox-blank-circle-fill"
-                          />
-                        {/if}
-                      </button>
-
-                      {#if modificationsOpen}
-                        <ReformsChanges {displayMode} />
-                        <button
-                          class="place-self-end text-sm uppercase text-gray-600 hover:text-black"
-                          on:click={reset}
-                          title="Retirer les modifications de votre réforme"
-                        >
-                          <iconify-icon
-                            class="mr-1 align-[-0.2rem] text-lg"
-                            icon="ri:refresh-line"
-                          />
-                          Réinitialiser
-                        </button>
-                      {/if}
-                    </div>
-                  {/if}
-
-                  <button
-                    class="mx-3 place-self-end py-3 text-sm uppercase text-gray-600 hover:text-black"
-                    on:click={closeParametersEditionPane}
-                    >Changer de dispositif<iconify-icon
-                      class="ml-1 align-[-0.2rem] text-lg"
-                      icon="ri-arrow-up-line"
-                    /></button
-                  >
-                </div>
-
-                {#if displayMode.parametersVariableName === "csg_deductible_salaire"}
-                  <div class="mx-3 mb-2 flex justify-end md:hidden">
-                    <a
-                      class="text-sm uppercase text-gray-600 hover:text-black"
-                      href={newSimulationUrl({
-                        ...displayMode,
-                        parametersVariableName: "csg_imposable_salaire",
-                      })}
-                    >
-                      CSG - part imposable<iconify-icon
-                        class="ml-1 align-[-0.23rem] text-lg"
-                        icon="ri-arrow-right-line"
-                      />
-                    </a>
-                  </div>
-                {:else if displayMode.parametersVariableName === "csg_imposable_salaire"}
-                  <div class="mx-3 mb-2 flex justify-end md:hidden">
-                    <a
-                      class="text-sm uppercase text-gray-600 hover:text-black"
-                      href={newSimulationUrl({
-                        ...displayMode,
-                        parametersVariableName: "csg_deductible_salaire",
-                      })}
-                    >
-                      CSG - part déductible<iconify-icon
-                        class="ml-1 align-[-0.23rem] text-lg"
-                        icon="ri-arrow-right-line"
-                      />
-                    </a>
-                  </div>
-                {/if}
-
-                <div class="bg-white">
-                  <VariableReferredParameters
-                    date={$date}
-                    {displayMode}
-                    name={displayMode.parametersVariableName}
-                  />
-                </div>
-              </div>
-            {:else}
-              <div class="flex-1">
-                <h1
-                  class="flex border-b border-black pb-3 text-2xl font-bold text-black md:hidden"
-                >
-                  Modifier le droit en vigueur
-                </h1>
-                <!--Partie II modification de la loi - MOBILE - vue choisir un dispositif -->
-                {#if billName !== undefined}
-                  <div
-                    class="mb-3 flex flex-col rounded-b border bg-gray-200 px-2 py-1 shadow-md md:hidden"
-                  >
-                    <button
-                      class="place-self-start text-lg font-light"
-                      on:click={() => {
-                        modificationsOpen = !modificationsOpen
-                      }}
-                    >
-                      {#if !modificationsOpen}
-                        <iconify-icon
-                          class="mr-1 align-[-0.2rem] text-lg"
-                          icon="ri:arrow-down-s-line"
-                        />
-                      {:else}
-                        <iconify-icon
-                          class="mr-1 align-[-0.2rem] text-lg"
-                          icon="ri:arrow-up-s-line"
-                        />
-                      {/if}
-
-                      Modifications en cours
-                      {#if Object.keys($parametricReform).length !== 0 && displayMode.mobileLaw}
-                        <iconify-icon
-                          class="align-[0.1rem] text-sm text-le-jaune"
-                          icon="ri-checkbox-blank-circle-fill"
-                        />
-                      {/if}
-                      {#if $billName !== undefined && Object.keys($billName).length !== 0 && displayMode.mobileLaw}
-                        <iconify-icon
-                          class="align-[0.1rem] text-sm text-le-rouge-bill"
-                          icon="ri-checkbox-blank-circle-fill"
-                        />
-                      {/if}
-                    </button>
-
-                    {#if modificationsOpen}
-                      <div>
-                        <ReformsChanges {displayMode} />
-                      </div>
-                      <button
-                        class="place-self-end text-sm uppercase text-gray-600 hover:text-black"
-                        on:click={reset}
-                        title="Retirer les modifications de votre réforme"
-                      >
-                        <iconify-icon
-                          class="mr-1 align-[-0.2rem] text-lg"
-                          icon="ri:refresh-line"
-                        />
-                        Réinitialiser
-                      </button>
-                    {/if}
-                  </div>
-                {/if}
-                <Search
-                  {displayMode}
-                  searchMode={SearchMode.variables}
-                  showOnlyWaterfallVariables={true}
-                />
-              </div>
             {/if}
           </div>
         </div>
@@ -1130,68 +1144,7 @@
 
           <!--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 border-b-4 border-transparent px-3 pb-1 text-2xl text-black"
-                  class:!border-black={!displayMode.budget}
-                >
-                  <span
-                    class="hidden tracking-wide sm:flex"
-                    class:text-black={!displayMode.budget}
-                    class:font-bold={!displayMode.budget}
-                    class:hover:text-le-bleu={displayMode.budget}
-                  >
-                    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}
-                  >
-                    Cas type
-                  </span>
-                </div>
-              </a>
-              <a
-                data-sveltekit-noscroll
-                href={newSimulationUrl({
-                  ...displayMode,
-                  budget: true,
-                })}
-              >
-                <div
-                  class="flex h-14 items-center border-b-4 border-transparent px-3 pb-1 text-2xl text-black"
-                  class:!border-black={displayMode.budget}
-                >
-                  <span
-                    class="hidden tracking-wide sm:flex"
-                    class:text-black={displayMode.budget}
-                    class:font-bold={displayMode.budget}
-                    class:hover:text-le-bleu={!displayMode.budget}
-                  >
-                    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}
-                  >
-                    Budget
-                  </span>
-                </div>
-              </a>
-            </div>
-          {:else if displayMode.parametersVariableName === undefined}
+          {#if displayMode.parametersVariableName === undefined || (displayMode.parametersVariableName !== undefined && budgetVariablesName.has(displayMode.parametersVariableName))}
             <div class="flex items-center justify-center md:justify-start">
               <a
                 data-sveltekit-noscroll
@@ -1235,7 +1188,6 @@
                 >
                   <span
                     class="hidden tracking-wide sm:flex"
-                    class:text-black={displayMode.budget}
                     class:font-bold={displayMode.budget}
                     class:hover:text-le-bleu={!displayMode.budget}
                   >
@@ -1243,7 +1195,6 @@
                   </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}
                   >
@@ -1256,18 +1207,16 @@
             <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"
+                  class="flex h-14 items-center border-b-4 border-black px-3 pb-1 text-2xl text-black"
                 >
-                  <span class="pb-2 font-bold tracking-wide text-black">
-                    Impact cas type
-                  </span>
+                  <span class="font-bold tracking-wide"> Impact cas type </span>
                 </div>
 
                 <div
                   id="onglet-impact-budgetaire"
-                  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="flex h-14 items-center border-b-4 border-transparent px-3 pb-1 text-2xl text-black"
                 >
-                  <span class="pb-2 tracking-wide text-gray-300">
+                  <span class="tracking-wide text-gray-300">
                     Impact budgétaire
                   </span>
                 </div>
@@ -1300,7 +1249,13 @@
           {/if}
         </div>
         <!--Impacts-->
-        <div class="px-0 md:mb-4 md:px-6 lg:px-8">
+        <div
+          class="px-0 md:mb-4 md:px-6 lg:px-8"
+          style:padding-bottom="{$testCasesIndex.length === 1 &&
+          displayMode.parametersVariableName === undefined
+            ? testCasesBtnHeight + 40
+            : 0}px"
+        >
           {#if displayMode.budget && displayMode.parametersVariableName !== undefined && budgetVariablesName.has(displayMode.parametersVariableName)}
             {#if user === undefined}
               <div class="mx-5 my-10 flex flex-col justify-center md:mx-10">
@@ -1473,6 +1428,8 @@
                   $testCasesIndex[0]
                 ]}
                 year={$year}
+                {defaultTab}
+                {tabs}
               />
             {:else}
               <TestCaseCompareView
@@ -1491,17 +1448,7 @@
             {/if}
 
             {#if $testCasesIndex.length === 1}
-              {#if displayMode.parametersVariableName === undefined}
-                <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
-                >
-              {:else}
+              {#if displayMode.parametersVariableName !== undefined}
                 {@const variableSummary =
                   $billName === undefined
                     ? variableSummaryByName[displayMode.parametersVariableName]
@@ -1510,7 +1457,7 @@
                       ]}
 
                 <h2 class="text-2xl">
-                  Situations types pour analyser le paramètre "{variableSummary.short_label ??
+                  Situations types pour analyser le dispositif "{variableSummary.short_label ??
                     variableSummary.label ??
                     displayMode.parametersVariableName}" :
                 </h2>
@@ -1614,6 +1561,7 @@
       {/if}
     </div>
   </div>
+
   <!--Bouton flottant mobile pour fermer volet édition du cas type-->
   <button
     bind:clientHeight={validateBtnHeight}
@@ -1628,6 +1576,102 @@
       icon="ri-check-fill"
     />
   </button>
+
+  <!-- Bouton flottant "Situations types" -->
+  <!--{#if displayMode.tab === "fiche_de_paie" || (displayMode.tab === undefined && defaultTab === "fiche_de_paie")}-->
+  {#if $testCasesIndex.length === 1 && displayMode.parametersVariableName === undefined}
+    <button
+      class="fixed bottom-5 right-5 flex items-center gap-3 rounded-lg border bg-white px-4 py-3 shadow-lg hover:bg-gray-50 active:bg-gray-100 md:bottom-10 md:right-10"
+      on:click={() => (isTestCaseSelectModalOpen = true)}
+      bind:clientHeight={testCasesBtnHeight}
+    >
+      <div>
+        <p class="text-start text-xl">Cas types</p>
+        <p class="text-start text-sm">Cliquer pour choisir</p>
+      </div>
+      <div class="flex flex-col items-center">
+        <div class="flex h-[7px] w-[80%] rounded-t border bg-gray-100" />
+        <div
+          class="mt-[-1px] flex h-[8px] w-[90%] rounded-t border bg-gray-100"
+        />
+        <div
+          class="mt-[-1px] flex rounded border"
+          style="background: linear-gradient(to bottom, #f5f5f5 50%, white 50%);"
+        >
+          <svg
+            width="50"
+            height="50"
+            viewBox="0 0 268 268"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M239.691 136.889C241.643 135.453 243.23 133.578 244.326 131.417C245.422 129.256 245.995 126.867 246 124.444C245.993 121.261 245.008 118.158 243.178 115.553C241.349 112.949 238.763 110.97 235.771 109.884C238.339 107.056 239.767 103.376 239.778 99.5553C239.778 95.4297 238.139 91.4731 235.222 88.5558C232.304 85.6386 228.348 83.9997 224.222 83.9997L224.148 84.0059C226.12 81.3988 227.333 78.1882 227.333 74.6664C226.5 71 225.917 69.4172 223 66.5C220.083 63.5828 212.626 64.5 208.5 64.5C204.81 64.5137 204.525 60.4601 201.735 62.8753C184.437 41.7695 160.108 63.6678 134 63.6678C107.282 63.6678 82.424 40.637 65.064 61.8859C62.7308 60.274 60.8306 66.7969 58 66.624C55.1694 66.4511 55.5 63.6678 55.5 63.6678C55.5 63.6678 51.5 61.8859 46 65.5C42.6144 67.7247 40.6699 71.8305 40.6667 74.6664C40.6667 78.1882 41.88 81.3988 43.8524 84.0059L43.7778 83.9997C39.6522 83.9997 35.6956 85.6386 32.7783 88.5558C29.8611 91.4731 28.2222 95.4297 28.2222 99.5553C28.2222 103.538 29.7653 107.134 32.2293 109.884C29.2373 110.97 26.6513 112.949 24.8216 115.553C22.9919 118.158 22.0069 121.261 22 124.444C22 129.559 24.5013 134.051 28.3093 136.889C26.3574 138.325 24.7697 140.199 23.6739 142.36C22.5781 144.521 22.0047 146.91 22 149.333C22 156.041 26.2747 161.709 32.2293 163.893C29.6611 166.721 28.2333 170.402 28.2222 174.222C28.2222 181.882 33.7724 188.216 41.0587 189.504C40.8047 190.614 40.6733 191.749 40.6667 192.889C40.6667 197.014 42.3056 200.971 45.2228 203.888C48.14 206.805 52.0966 208.444 56.2222 208.444C60.0425 208.433 63.7229 207.005 66.5511 204.437C67.6367 207.429 69.6157 210.015 72.2201 211.845C74.8244 213.674 77.9283 214.659 81.1111 214.666C84.9314 214.655 88.6118 213.227 91.44 210.659C92.5256 213.651 94.5046 216.237 97.109 218.067C99.7133 219.897 102.817 220.882 106 220.889C109.642 220.886 113.167 219.603 115.96 217.265C118.752 214.926 120.634 211.681 121.276 208.096C125.463 208.307 129.694 208.444 134 208.444C138.3 208.444 142.524 208.251 146.712 207.959C147.324 211.572 149.195 214.851 151.993 217.218C154.791 219.584 158.336 220.884 162 220.889C165.183 220.882 168.287 219.897 170.891 218.067C173.495 216.237 175.474 213.651 176.56 210.659C179.388 213.227 183.069 214.655 186.889 214.666C190.072 214.659 193.176 213.674 195.78 211.845C198.384 210.015 200.363 207.429 201.449 204.437C204.277 207.005 207.958 208.433 211.778 208.444C215.903 208.444 219.86 206.805 222.777 203.888C225.694 200.971 227.333 197.014 227.333 192.889C227.333 191.725 227.184 190.599 226.941 189.504C230.535 188.871 233.792 186.992 236.139 184.198C238.486 181.403 239.775 177.871 239.778 174.222C239.767 170.402 238.339 166.721 235.771 163.893C238.763 162.807 241.349 160.828 243.178 158.224C245.008 155.62 245.993 152.516 246 149.333C246 144.218 243.499 139.726 239.691 136.889Z"
+              fill="#FFAC33"
+              class="s-y_bCXRrkrYfP"
+            />
+            <path
+              d="M59.333 137.496C59.333 84.4455 92.765 41.4375 134 41.4375C175.234 41.4375 208.666 84.4455 208.666 137.496C208.666 190.547 175.234 233.555 134 233.555C92.765 233.555 59.333 190.547 59.333 137.496Z"
+              fill="#FFDC5D"
+              class="s-y_bCXRrkrYfP"
+            />
+            <path
+              d="M134 208.666C119.397 208.666 111.756 201.448 110.934 200.62C110.353 200.047 109.89 199.364 109.572 198.612C109.254 197.859 109.087 197.051 109.081 196.234C109.075 195.417 109.231 194.607 109.538 193.85C109.845 193.093 110.299 192.404 110.872 191.822C111.446 191.24 112.128 190.777 112.881 190.459C113.634 190.141 114.442 189.975 115.259 189.969C116.075 189.963 116.886 190.118 117.643 190.426C118.4 190.733 119.089 191.186 119.67 191.76C119.988 192.052 124.686 196.221 134 196.221C143.452 196.221 148.143 191.928 148.342 191.748C149.537 190.628 151.123 190.02 152.76 190.054C154.397 190.088 155.956 190.76 157.103 191.928C158.242 193.09 158.876 194.655 158.869 196.282C158.862 197.909 158.214 199.468 157.066 200.62C156.245 201.448 148.604 208.666 134 208.666Z"
+              fill="#C1694F"
+              class="s-y_bCXRrkrYfP"
+            />
+            <path
+              d="M140.222 177.556H127.778C126.128 177.556 124.545 176.9 123.378 175.733C122.211 174.566 121.556 172.984 121.556 171.334C121.556 169.683 122.211 168.101 123.378 166.934C124.545 165.767 126.128 165.111 127.778 165.111H140.222C141.873 165.111 143.455 165.767 144.622 166.934C145.789 168.101 146.445 169.683 146.445 171.334C146.445 172.984 145.789 174.566 144.622 175.733C143.455 176.9 141.873 177.556 140.222 177.556Z"
+              fill="#C1694F"
+              class="s-y_bCXRrkrYfP"
+            />
+            <path
+              d="M102.889 158.889C101.239 158.889 99.6563 158.233 98.4894 157.066C97.3225 155.9 96.667 154.317 96.667 152.667V140.222C96.667 138.572 97.3225 136.989 98.4894 135.822C99.6563 134.656 101.239 134 102.889 134C104.539 134 106.122 134.656 107.289 135.822C108.456 136.989 109.111 138.572 109.111 140.222V152.667C109.111 154.317 108.456 155.9 107.289 157.066C106.122 158.233 104.539 158.889 102.889 158.889ZM165.111 158.889C163.461 158.889 161.879 158.233 160.712 157.066C159.545 155.9 158.889 154.317 158.889 152.667V140.222C158.889 138.572 159.545 136.989 160.712 135.822C161.879 134.656 163.461 134 165.111 134C166.762 134 168.344 134.656 169.511 135.822C170.678 136.989 171.334 138.572 171.334 140.222V152.667C171.334 154.317 170.678 155.9 169.511 157.066C168.344 158.233 166.762 158.889 165.111 158.889Z"
+              fill="#662113"
+              class="s-y_bCXRrkrYfP"
+            />
+            <path
+              d="M207.491 80.3462C209.783 78.6202 211.644 76.3864 212.927 73.8203C214.211 71.2541 214.883 68.4253 214.889 65.556C214.889 60.6053 212.922 55.8573 209.422 52.3567C205.921 48.856 201.173 46.8893 196.222 46.8893C193.765 46.8893 191.431 47.3933 189.278 48.2582C188.222 44.3031 185.892 40.8064 182.648 38.3093C179.404 35.8123 175.427 34.454 171.333 34.4449C168.12 34.4651 164.967 35.323 162.187 36.9338C160.513 34.2698 158.191 32.0736 155.438 30.5503C152.685 29.0269 149.591 28.2261 146.445 28.2227C141.641 28.2227 137.31 30.0893 134 33.0698C130.599 29.9634 126.162 28.2354 121.556 28.2227C118.409 28.2261 115.315 29.0269 112.562 30.5503C109.809 32.0736 107.488 34.2698 105.813 36.9338C103.033 35.323 99.8802 34.4651 96.6668 34.4449C92.5731 34.454 88.5965 35.8123 85.3526 38.3093C82.1086 40.8064 79.7782 44.3031 78.7219 48.2582C76.5164 47.3609 74.1589 46.8961 71.7779 46.8893C67.7755 46.8917 63.88 48.1805 60.6658 50.5655C57.4517 52.9505 55.0892 56.3053 53.927 60.1352C52.7647 63.9651 52.8641 68.0671 54.2107 71.8361C55.5572 75.6052 58.0795 78.8416 61.4054 81.068C53.5654 92.4795 48.6437 103.848 46.1112 111.445C39.1112 132.445 63.7014 182.49 61.2748 157.72C58.3628 127.928 68.9654 102.248 90.5441 94.4644C91.1103 106.063 101.943 115.334 115.333 115.334C123.061 115.334 129.887 112.185 134.448 107.344C135.485 113.073 138.5 118.256 142.966 121.99C147.432 125.724 153.067 127.772 158.889 127.778C166.822 127.778 173.804 123.995 178.365 118.215C180.605 127.312 187.71 134 196.222 134C206.533 134 214.889 124.25 214.889 112.223C214.867 110.306 214.625 108.397 214.167 106.536C214.597 105.434 214.889 104.246 214.889 102.889C214.889 97.0902 212.481 88.8955 207.491 80.3462Z"
+              fill="#FFAC33"
+              class="s-y_bCXRrkrYfP"
+            />
+            <path
+              d="M219.763 146C219.763 157.046 212.152 166 202.763 166C193.374 166 200.763 159.046 200.763 148C200.763 136.954 200.763 133.5 208.5 128C216 130.5 219.763 134.954 219.763 146Z"
+              fill="#FFDC5D"
+              class="s-y_bCXRrkrYfP"
+            />
+          </svg>
+          <svg
+            width="40"
+            height="40"
+            class="-ml-1"
+            viewBox="0 0 268 268"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            ><path
+              d="M219 163.362C219 155.622 214.419 149.176 208.266 147.377C201.844 112.164 171.069 85.4453 134 85.4453C96.9306 85.4453 66.1558 112.164 59.7336 147.377C53.5806 149.176 49 155.622 49 163.362C49 171.56 54.1331 178.322 60.8528 179.616C69.1592 212.322 98.7108 236.556 134 236.556C169.289 236.556 198.841 212.322 207.147 179.616C213.862 178.322 219 171.56 219 163.362Z"
+              fill="#FFDC5D"
+            /><path
+              d="M134 194.056C119.834 194.056 115.111 189.333 115.111 198.778C115.111 208.222 124.556 217.667 134 217.667C143.445 217.667 152.889 208.222 152.889 198.778C152.889 189.333 148.167 194.056 134 194.056Z"
+              fill="#662214"
+            /><path
+              d="M155.25 175.166C161.77 175.166 167.055 169.88 167.055 163.36C167.055 156.84 161.77 151.555 155.25 151.555C148.73 151.555 143.444 156.84 143.444 163.36C143.444 169.88 148.73 175.166 155.25 175.166Z"
+              fill="#662214"
+            /><path
+              d="M112.75 175.166C119.27 175.166 124.555 169.88 124.555 163.36C124.555 156.84 119.27 151.555 112.75 151.555C106.23 151.555 100.944 156.84 100.944 163.36C100.944 169.88 106.23 175.166 112.75 175.166Z"
+              fill="#662214"
+            /><path
+              d="M134 198.777H143.444V203.5C143.444 203.5 143.444 208.222 138.722 208.222C134 208.222 134 203.5 134 203.5V198.777Z"
+              fill="white"
+            /><path
+              d="M133.915 127.945H133.769C131.015 127.96 128.286 127.423 125.743 126.365C123.2 125.308 120.895 123.751 118.965 121.787C117.222 120.027 115.87 117.921 114.994 115.605C114.119 113.289 113.741 110.815 113.884 108.343C113.918 107.724 114.075 107.118 114.345 106.56C114.615 106.002 114.993 105.503 115.457 105.093C115.921 104.682 116.463 104.367 117.049 104.167C117.636 103.967 118.257 103.886 118.875 103.927C121.477 104.083 123.465 106.326 123.309 108.933C123.172 111.27 124.041 113.575 125.684 115.242C126.746 116.327 128.013 117.19 129.412 117.781C130.81 118.372 132.312 118.679 133.83 118.684C136.914 118.514 139.827 117.518 142.023 115.355C144.967 112.443 146.635 108.484 146.664 104.343C146.692 100.203 145.078 96.221 142.174 93.2693C138.314 89.3655 133.062 87.1523 127.572 87.1151C122.081 87.0779 116.801 89.2198 112.887 93.071C112.446 93.5063 111.923 93.8504 111.348 94.0836C110.774 94.3168 110.159 94.4346 109.539 94.4302C108.287 94.4214 107.089 93.9154 106.21 93.0237C105.331 92.132 104.842 90.9276 104.851 89.6753C104.86 88.4231 105.365 87.2257 106.257 86.3465C111.956 80.7407 119.645 77.6236 127.639 77.6784C135.632 77.7333 143.278 80.9558 148.899 86.6393C151.206 88.9755 153.03 91.7435 154.266 94.7851C155.503 97.8267 156.127 101.082 156.104 104.365C156.082 107.649 155.412 110.895 154.133 113.919C152.855 116.943 150.993 119.686 148.653 121.99C144.706 125.89 139.469 127.945 133.915 127.945V127.945Z"
+              fill="#FFAC33"
+            /></svg
+          >
+        </div>
+      </div>
+    </button>
+  {/if}
 </main>
 
 <style>
diff --git a/static/illustration-exoneration-tode.png b/static/illustration-exoneration-tode.png
new file mode 100644
index 0000000000000000000000000000000000000000..c2c9e73db95770c115b64dddcbb59789a77001cd
Binary files /dev/null and b/static/illustration-exoneration-tode.png differ
diff --git a/static/illustration-pepa.png b/static/illustration-pepa.png
new file mode 100644
index 0000000000000000000000000000000000000000..e32c769d296facc8e92d53ab4a7dc25056235222
Binary files /dev/null and b/static/illustration-pepa.png differ
diff --git a/static/illustration-ticpe.png b/static/illustration-ticpe.png
new file mode 100644
index 0000000000000000000000000000000000000000..6e8412889fcfa2d5608b6ebcb7b0dbe372608386
Binary files /dev/null and b/static/illustration-ticpe.png differ
diff --git a/static/picto-csg.png b/static/picto-csg.png
new file mode 100644
index 0000000000000000000000000000000000000000..274ea5f289e48b7521760a50d8dd7f156222ed77
Binary files /dev/null and b/static/picto-csg.png differ
diff --git a/static/picto-impot-sur-le-revenu.png b/static/picto-impot-sur-le-revenu.png
index 75f07056b0462a7c31601a110df03f207c1451dd..9cecb717dc34b90aef36abeb744648d8377fc542 100644
Binary files a/static/picto-impot-sur-le-revenu.png and b/static/picto-impot-sur-le-revenu.png differ