Merge branch 'maj-intro-simulateur' into 'master'

Maj intro simulateur

See merge request leximpact/leximpact-socio-fiscal-ui!88

src/lib/components/WaterfallView.svelte

@@ -113,7 +113,7 @@
 </script>
 
 {#if visibleDecompositions.length > 0}
-  <div use:signalFirstWaterfall>
+  <div use:signalFirstWaterfall id="situation_{situationIndex}_waterfall">
     <!-- partie gauche dispositifs et ticket de caisse-->
 
     <div class="flex justify-between ">
@@ -323,10 +323,7 @@
       </div>
 
       <!-- ticket de caisse-->
-      <div
-        class="relative flex flex-none px-2"
-        id="situation_{situationIndex}_color_code_impactsside"
-      >
+      <div class="relative flex flex-none px-2">
         {#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 />

src/lib/components/pictos/PictoBudgetEtat.svelte

+<svg
+  class="max-w-10 mr-1 max-h-10"
+  viewBox="0 0 216 216"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M28.8889 54C19 54 19 63.84 19 63.84V167.16C19 167.16 19 177 28.8889 177H187.111C197 177 197 167.16 197 167.16V63.84C197 63.84 197 54 187.111 54H28.8889Z"
+    fill="#2A6797"
+  />
+  <path
+    d="M28.8889 29C19 29 19 38.8333 19 38.8333V137.167C19 137.167 19 147 28.8889 147H187.111C197 147 197 137.167 197 137.167V38.8333C197 38.8333 197 29 187.111 29H28.8889Z"
+    fill="#5DADEC"
+  />
+  <path
+    d="M142.5 121C159.897 121 174 106.449 174 88.5C174 70.5507 159.897 56 142.5 56C125.103 56 111 70.5507 111 88.5C111 106.449 125.103 121 142.5 121Z"
+    fill="#4289C1"
+  />
+  <path
+    d="M182.545 140H33.4545C29.3446 140 26 136.667 26 132.571V43.4286C26 39.333 29.3446 36 33.4545 36H182.545C186.655 36 190 39.333 190 43.4286V132.571C190 136.667 186.655 140 182.545 140ZM33.4545 40.9524C32.7955 40.9524 32.1635 41.2133 31.6975 41.6776C31.2315 42.142 30.9697 42.7718 30.9697 43.4286V132.571C30.9697 133.933 32.0879 135.048 33.4545 135.048H182.545C183.912 135.048 185.03 133.933 185.03 132.571V43.4286C185.03 42.7718 184.769 42.142 184.303 41.6776C183.837 41.2133 183.204 40.9524 182.545 40.9524H33.4545Z"
+    fill="#2A6797"
+  />
+  <path d="M88 29H128V148H88V29Z" fill="#EAC26D" />
+  <path d="M88 29H120V148H88V29Z" fill="#FFE8B6" />
+  <path d="M89 95H128V123H89V95Z" fill="#FFAC33" />
+  <path
+    d="M82 106.884C82 110.12 74.5913 114 65.4084 114C53.2448 114 45.9216 105.733 43.4889 95.5979H36.9849C36.5989 95.6137 36.2137 95.553 35.8523 95.4194C35.4909 95.2858 35.1608 95.082 34.882 94.8204C34.6032 94.5588 34.3813 94.2447 34.2297 93.897C34.0781 93.5493 34 93.1752 34 92.7972C34 92.4192 34.0781 92.0452 34.2297 91.6975C34.3813 91.3498 34.6032 91.0357 34.882 90.7741C35.1608 90.5124 35.4909 90.3087 35.8523 90.1751C36.2137 90.0415 36.5989 89.9808 36.9849 89.9966H42.6596C42.6194 89.3278 42.5138 88.6688 42.5138 88C42.5138 86.5247 42.6445 85.0641 42.8305 83.6232H36.9849C36.2251 83.6232 35.4964 83.3279 34.9591 82.8022C34.4218 82.2765 34.12 81.5636 34.12 80.8201C34.12 80.0767 34.4218 79.3637 34.9591 78.838C35.4964 78.3123 36.2251 78.017 36.9849 78.017H44.1021C47.0827 68.993 54.3054 62 65.7803 62C75.0286 62 80.8993 66.8833 80.8993 69.47C80.8993 71.1224 79.8689 72.4797 78.2554 72.4797C75.3201 72.4797 73.8525 67.4538 65.7803 67.4538C58.1907 67.4538 53.5766 72.0862 51.2494 78.0121H67.9717C68.348 78.0121 68.7205 78.0846 69.0681 78.2255C69.4157 78.3663 69.7315 78.5728 69.9976 78.8331C70.2636 79.0934 70.4746 79.4024 70.6186 79.7425C70.7626 80.0826 70.8367 80.4471 70.8367 80.8152C70.8367 81.1833 70.7626 81.5478 70.6186 81.8879C70.4746 82.228 70.2636 82.537 69.9976 82.7973C69.7315 83.0576 69.4157 83.2641 69.0681 83.4049C68.7205 83.5458 68.348 83.6183 67.9717 83.6183H49.7667C49.5392 85.0685 49.4183 86.5329 49.4048 88C49.4048 88.659 49.4852 89.3278 49.5304 89.9917H67.9667C68.3527 89.9759 68.738 90.0366 69.0994 90.1702C69.4608 90.3038 69.7908 90.5075 70.0697 90.7692C70.3485 91.0308 70.5704 91.3449 70.7219 91.6926C70.8735 92.0402 70.9517 92.4143 70.9517 92.7923C70.9517 93.1703 70.8735 93.5444 70.7219 93.8921C70.5704 94.2398 70.3485 94.5539 70.0697 94.8155C69.7908 95.0771 69.4608 95.2809 69.0994 95.4145C68.738 95.5481 68.3527 95.6088 67.9667 95.593H50.4402C52.3954 102.625 57.2055 108.531 65.4084 108.531C73.2644 108.531 76.7174 103.938 79.4316 103.938C80.9746 103.943 82 105.094 82 106.884Z"
+    fill="#2A6797"
+  />
+  <path d="M76 115H141V167H76V115Z" fill="#292F33" />
+  <path
+    d="M80.2857 167.182C80.2857 170.393 78.6013 173 76.5247 173H72.761C70.6844 173 69 170.393 69 167.182V114.818C69 111.607 70.6844 109 72.761 109H76.5219C78.6013 109 80.2857 111.607 80.2857 114.818V167.182ZM148 167.182C148 170.393 146.316 173 144.239 173H140.475C138.399 173 136.714 170.393 136.714 167.182V114.818C136.714 111.607 138.399 109 140.475 109H144.239C146.316 109 148 111.607 148 114.818V167.182ZM102.857 167.182C102.857 170.393 101.173 173 99.0962 173H95.3352C93.2558 173 91.5714 170.393 91.5714 167.182V114.818C91.5714 111.607 93.2558 109 95.3324 109H99.0934C101.173 109 102.857 111.607 102.857 114.818V167.182ZM125.429 167.182C125.429 170.393 123.741 173 121.665 173H117.907C115.83 173 114.143 170.393 114.143 167.182V114.818C114.143 111.607 115.83 109 117.907 109H121.665C123.741 109 125.429 111.607 125.429 114.818V167.182Z"
+    fill="#CCD6DD"
+  />
+  <path
+    d="M151 169C151 170.326 150.389 171.598 149.301 172.536C148.214 173.473 146.738 174 145.2 174H69.8C68.2617 174 66.7865 173.473 65.6988 172.536C64.6111 171.598 64 170.326 64 169C64 167.674 64.6111 166.402 65.6988 165.464C66.7865 164.527 68.2617 164 69.8 164H145.2C146.738 164 148.214 164.527 149.301 165.464C150.389 166.402 151 167.674 151 169Z"
+    fill="#9AAAB4"
+  />
+  <path
+    d="M158 175.5C158 176.959 157.386 178.358 156.294 179.389C155.202 180.421 153.721 181 152.176 181H64.8235C63.279 181 61.7978 180.421 60.7057 179.389C59.6135 178.358 59 176.959 59 175.5C59 174.041 59.6135 172.642 60.7057 171.611C61.7978 170.579 63.279 170 64.8235 170H152.176C153.721 170 155.202 170.579 156.294 171.611C157.386 172.642 158 174.041 158 175.5Z"
+    fill="#CCD6DD"
+  />
+  <path
+    d="M161 179C161 180.326 160.539 181.598 159.719 182.536C158.898 183.473 157.785 184 156.625 184H60.375C59.2147 184 58.1019 183.473 57.2814 182.536C56.4609 181.598 56 180.326 56 179C56 177.674 56.4609 176.402 57.2814 175.464C58.1019 174.527 59.2147 174 60.375 174H156.625C157.785 174 158.898 174.527 159.719 175.464C160.539 176.402 161 177.674 161 179Z"
+    fill="#788995"
+  />
+  <path
+    d="M151 111C151 107.688 148.228 105 144.814 105H69.8C66.3809 105 64 107.688 64 111C64 113.253 65.1194 115.194 66.9 116.22V120H78.5V117H90.1V120H101.7V117H113.3V120H124.9V117H136.5V120H148.1V116.064C149.837 115.002 151 113.139 151 111Z"
+    fill="#9AAAB4"
+  />
+  <path
+    d="M62 107.332C62 104.239 64.9411 103 64.9411 103L108.256 82L151.986 103C151.986 103 155 103.693 155 107.35V109H62V107.332V107.332Z"
+    fill="#CCD6DD"
+  />
+  <path
+    d="M108.501 90C108.501 90 77.9734 103.56 74.9234 104.778C71.8733 105.996 72.894 108 74.9263 108H141.921C145.063 108 144.323 105.737 141.829 104.516C139.333 103.295 108.501 90 108.501 90Z"
+    fill="#9AAAB4"
+  />
+  <path
+    d="M155 108.5C155 109.428 154.694 110.318 154.149 110.975C153.604 111.631 152.865 112 152.094 112H64.9062C64.1355 112 63.3962 111.631 62.8512 110.975C62.3062 110.318 62 109.428 62 108.5C62 107.572 62.3062 106.682 62.8512 106.025C63.3962 105.369 64.1355 105 64.9062 105L152.094 105.021C153.701 105.021 155 106.568 155 108.5Z"
+    fill="#CCD6DD"
+  />
+</svg>

src/lib/components/test_cases/TestCaseSummary.svelte

@@ -368,6 +368,7 @@
             class="inline-flex items-center text-gray-500 hover:text-black"
             on:click={() => (isTestCaseCompareModalOpen = true)}
             title="Comparer ce cas type avec un autre"
+            id="situation_{situationIndex}_compare"
           >
             <Icon icon="ri-user-shared-2-fill" class="-m-0.5 h-4 w-4" />
             <Icon icon="ri-user-line" class="h-4 w-4" />

src/lib/components/test_cases/TestCaseView.svelte

@@ -98,13 +98,14 @@
     />
   </div>
 
-  <div id="situation_{situationIndex}_waterfall" class="bg-white">
+  <div class="bg-white">
     {#if variableSummaryByName !== undefined}
       <div class="flex justify-between bg-gray-100">
         {#if !displayMode.compact}
           <!--Onglets-->
           <div
             class="flex max-h-[38em] min-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 }}
               <button
@@ -144,7 +145,10 @@
             ? 'w-full'
             : 'w-10/12 md:w-11/12'} rounded-b-lg bg-white px-1 md:px-3"
         >
-          <div class="relative flex-col border-gray-400 p-3 pb-5">
+          <div
+            class="relative flex-col border-gray-400 p-3 pb-5"
+            id="situation_{situationIndex}_totalimpact"
+          >
             {#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 />
@@ -155,7 +159,10 @@
                 class="flex justify-between gap-4"
                 title="⚠️ Les dispositifs n'étant pas tous à jour, cette somme est à considérer avec prudence."
               >
-                <div class="mb-4 w-full flex-col text-gray-700">
+                <div
+                  class="mb-4 w-full flex-col text-gray-700"
+                  id="situation_{situationIndex}_color_code_impactsside"
+                >
                   <p class="mb-1 text-lg font-medium">
                     {$waterfall.totalLabel}<svg
                       aria-hidden="true"
@@ -282,6 +289,7 @@
 
           {#if !displayMode.compact}
             <div class="h-5 bg-gradient-to-b from-gray-100 to-transparent" />
+
             <WaterfallView
               {decompositionByName}
               {displayMode}

src/lib/components/tutorial/BudgetButtonModal.svelte

+<script lang="ts">
+  import Icon from "@iconify/svelte"
+  import {
+    Dialog,
+    DialogDescription,
+    DialogOverlay,
+    DialogTitle,
+    Transition,
+    TransitionChild,
+  } from "@rgossiaux/svelte-headlessui"
+  import PictoBudgetEtat from "../pictos/PictoBudgetEtat.svelte"
+
+  export let isOpen = false
+
+  function closeModal() {
+    isOpen = false
+  }
+</script>
+
+<Transition appear show={isOpen}>
+  <Dialog
+    as="div"
+    class="fixed inset-0 z-20 overflow-y-auto"
+    on:close={closeModal}
+  >
+    <div class="min-h-screen px-4 text-center">
+      <TransitionChild
+        enter="ease-out duration-300"
+        enterFrom="opacity-0"
+        enterTo="opacity-100"
+        leave="ease-in duration-200"
+        leaveFrom="opacity-100"
+        leaveTo="opacity-0"
+      >
+        <DialogOverlay
+          class="fixed inset-0 bg-gray-500 opacity-50 transition-opacity"
+        />
+      </TransitionChild>
+
+      <!-- This element is to trick the browser into centering the modal contents. -->
+      <span class="inline-block h-[33vh]" aria-hidden="true"> &#8203; </span>
+
+      <TransitionChild
+        enter="ease-out duration-300"
+        enterFrom="opacity-0 scale-95"
+        enterTo="opacity-100 scale-100"
+        leave="ease-in duration-200"
+        leaveFrom="opacity-100 scale-100"
+        leaveTo="opacity-0 scale-95"
+      >
+        <div
+          class="my-8 inline-block w-full max-w-md transform overflow-hidden rounded-md bg-white p-6 text-left align-middle shadow-xl transition-all"
+        >
+          <div class="flex items-center justify-between text-black">
+            <DialogTitle as="h3" class="text-2xl font-bold text-black">
+              Estimer les impacts budgétaires
+            </DialogTitle>
+
+            <button
+              class="text-gray-400 hover:text-black"
+              on:click={closeModal}
+              type="button"
+            >
+              <Icon class="ml-2 h-9 w-9" icon="ri-close-line" /></button
+            >
+          </div>
+          <DialogDescription as="div" class=" mt-2">
+            <Icon class="ml-2 h-5 w-5" icon="ri-ri-close-line" />
+            <p class="text-lg">
+              LexImpact permet l'évaluation budgétaire de deux dispositifs :
+            </p>
+
+            <div class="mt-4 flex flex-wrap gap-2">
+              <div
+                class="mx-4 grow-0 items-center rounded-lg bg-gray-300 text-base uppercase text-black shadow-md hover:bg-le-bleu hover:text-white focus:outline-none md:mx-0"
+              >
+                <a
+                  href="https://leximpact.an.fr/ir?popin=connection"
+                  title="Vers le simulateur CSG Budget de la Sécurité sociale"
+                >
+                  <div class="flex items-center p-1">
+                    <PictoBudgetEtat />
+                    <div class="ml-2 inline-block text-center">
+                      Impôt sur le revenu
+                    </div>
+                    <!-- Material icon: key fill-->
+                    <svg
+                      class="mx-2 inline-flex rounded fill-current"
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 24 24"
+                      width="18"
+                      height="18"
+                      ><path fill="none" d="M0 0h24v24H0z" /><path
+                        d="M17 14h-4.341a6 6 0 1 1 0-4H23v4h-2v4h-4v-4zM7 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"
+                      /></svg
+                    >
+                  </div>
+                </a>
+              </div>
+              <div
+                class="mx-4 grow-0 items-center rounded-lg bg-gray-300 text-base uppercase text-black shadow-md hover:bg-le-bleu hover:text-white focus:outline-none md:mx-0"
+              >
+                <a
+                  href="https://budget.leximpact.an.fr/authentication/signin/leximpact?redirect=/budget"
+                  title="Vers le simulateur CSG Budget de la Sécurité sociale"
+                >
+                  <div class="flex items-center p-1">
+                    <PictoBudgetEtat />
+                    <div class="ml-2 inline-block text-center">
+                      CSG salaires
+                    </div>
+                    <!-- Material icon: key fill-->
+                    <svg
+                      class="mx-2 inline-flex rounded fill-current"
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 24 24"
+                      width="18"
+                      height="18"
+                      ><path fill="none" d="M0 0h24v24H0z" /><path
+                        d="M17 14h-4.341a6 6 0 1 1 0-4H23v4h-2v4h-4v-4zM7 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"
+                      /></svg
+                    >
+                  </div>
+                </a>
+              </div>
+              <p class="mt-5 text-sm text-gray-700">
+                * Les simulateurs budgétaires sont accessibles sous <a
+                  class="link"
+                  href="https://leximpact.an.fr/cgu-simulateur-acces-restreint"
+                  >certaines conditions</a
+                >, après authentification.
+              </p>
+            </div>
+          </DialogDescription>
+        </div>
+      </TransitionChild>
+    </div>
+  </Dialog>
+</Transition>

src/lib/components/tutorial/StartTutorial.svelte

@@ -3,9 +3,11 @@
   import type Fuse from "fuse.js"
 
   import { browser } from "$app/env"
+  import BudgetButtonModal from "../tutorial/BudgetButtonModal.svelte"
   import type { DisplayMode } from "$lib/displays"
   import { newSimulationUrl } from "$lib/urls"
   import VariablesSearchWorker from "$lib/variables_search_worker?worker"
+  import PictoBudgetEtat from "../pictos/PictoBudgetEtat.svelte"
 
   export let displayMode: DisplayMode
 
@@ -27,6 +29,7 @@
   let pendingTerm: string | null = null
   let searchInProgress = false
   let term = ""
+  let isBudgetButtonModalOpen = false
 
   $: if (browser) {
     if (searchInProgress) {
@@ -108,36 +111,45 @@
     <div class="mt-6 flex flex-wrap text-black ">
       <a
         class="rounded-full border-4 border-white bg-le-gris-dispositif-light px-3 py-1 hover:bg-le-gris-dispositif hover:bg-opacity-60"
-        href="/?law=true&parameters=csg_deductible_salaire"
+        href="/?law=true&parameters=irpp_economique"
       >
-        <span>CSG déductible</span>
+        <span>Impôt sur le revenu</span>
       </a>
+
       <a
         class="rounded-full border-4 border-white bg-le-gris-dispositif-light px-3 py-1 hover:bg-le-gris-dispositif hover:bg-opacity-60"
-        href="/?law=true&parameters=csg_imposable_salaire"
+        href="/?law=true&parameters=allegement_fillon"
       >
-        <span>CSG imposable</span>
+        <span>Réduc. cotis. patronales "bas salaires"</span>
       </a>
-
       <a
         class="rounded-full border-4 border-white bg-le-gris-dispositif-light px-3 py-1 hover:bg-le-gris-dispositif hover:bg-opacity-60"
-        href="/?law=true&parameters=irpp_economique"
+        href="/?law=true&parameters=aah"
       >
-        <span>Impôt sur le revenu</span>
+        <span>AAH</span>
       </a>
-
       <a
         class="rounded-full border-4 border-white bg-le-gris-dispositif-light px-3 py-1 hover:bg-le-gris-dispositif hover:bg-opacity-60"
-        href="/?law=true&parameters=allegement_fillon"
+        href="/?law=true&parameters=csg_deductible_salaire"
       >
-        <span>Réduction des cotisations patronales sur les bas salaires</span>
+        <span>CSG salaires déductible</span>
       </a>
       <a
         class="rounded-full border-4 border-white bg-le-gris-dispositif-light px-3 py-1 hover:bg-le-gris-dispositif hover:bg-opacity-60"
-        href="/?law=true&parameters=aah"
+        href="/?law=true&parameters=csg_imposable_salaire"
       >
-        <span>AAH</span>
+        <span>CSG salaires imposable</span>
       </a>
     </div>
+
+    <button on:click={() => (isBudgetButtonModalOpen = true)}>
+      <div
+        class="border-1 absolute bottom-8 left-8 flex items-center rounded-full bg-gray-300 p-3 px-4 uppercase shadow-lg hover:bg-le-bleu hover:text-white"
+      >
+        <PictoBudgetEtat />
+        Impacts budgétaires
+      </div>
+    </button>
+    <BudgetButtonModal bind:isOpen={isBudgetButtonModalOpen} />
   {/if}
 </div>

src/routes/index.svelte

@@ -99,23 +99,19 @@
           {
             title: "Bienvenue 👋",
             intro:
-              "Bienvenue sur le simulateur LexImpact des cotisations et prestations sociales !",
+              "Ceci est un court tutoriel 🪄 présentant les différentes fonctionnalités de l'interface.",
           },
           {
-            title: "L'élément clef 🌟 de ce simulateur : ",
-            element: document.querySelector("#situation_0"),
+            title: "Un simulateur transverse 🔮",
             intro:
-              "<b>La décomposition des dispositifs affectant un cas type</b>. Elle vous permet de voir les prélèvements obligatoires et compléments de ressources. Toute l'interface s'articule autour de cet <b>élément qui évoluera avec votre réforme et les projets de loi</b>.",
-          },
-          {
-            title: "Présentation rapide des éléments de l'interface",
-            intro: "C'est parti ! ➡️",
+              "Ce simulateur vous permet d'<b>estimer les effets d'une modification</b> : <ul><li>• des cotisations sociales&nbsp;;</li><li>• des impôts&nbsp;;</li><li>• des prestations sociales ;</li></ul> sur un <b>cas type</b>.",
           },
+
           {
             title: "À gauche, la loi 📜",
             element: document.querySelector("#situation_left_part_law"),
             intro:
-              "Cet espace vous permet de voir les paramètres de la loi et de les amender.",
+              "Cet espace vous permet de: <ul><li>• <b>🔎 vous renseigner</b> sur un dispositif&nbsp;;</li><li>• <b>📖 consulter les paramètres</b> de la loi&nbsp;;</li><li>• 🚀<b>modifier</b> les paramètres et <b>lancer une estimation</b>.</li></ul>",
           },
           {
             title: "À droite, les impacts 📊",
@@ -125,7 +121,6 @@
           },
           {
             title: "Un code couleur 🎨 :",
-            element: document.querySelector("#situation_color_code"),
             intro:
               "<ul><li>• noir ⚫️ pour la <b>loi en vigueur</b> ;</li><br><li>• rouge 🔴 pour les projets de loi de finances (<b>PLF</b>) et financement de la Sécurité sociale (<b>PLFSS</b>) ;</li><br><li>• sur fond jaune 🟡 lorsque vous effectuez un <b>amendement</b>.</li></ul>",
           },
@@ -138,8 +133,7 @@
           },
           {
             element: document.querySelector("#situation_left_part_law"),
-            intro:
-              "…que du côté de la loi 📜 quand vous aurez cliqué sur un dispositif…",
+            intro: "…que du côté de la loi 📜 quand un dispositif est modifié…",
           },
           {
             title: "Le cas type 👩‍👦‍👦",
@@ -158,41 +152,36 @@
             intro:
               "Toutes les caractéristiques sont visibles et éditables en cliquant sur le stylo en haut à droite.",
           },
+          {
+            title: "Montants totaux 🧮",
+            element: document.querySelector("#situation_0_totalimpact"),
+            intro:
+              "Le montant total du <b>revenu disponible</b> ou du <b>coût salarial</b> côté employeur, ainsi que le montant du dispositif une fois choisi, est affiché ici.",
+          },
           {
             title: "Décomposition d'une situation 🧾",
             element: document.querySelector("#situation_0_waterfall"),
             intro:
-              "Pour chaque situation, nous partons des revenus bruts (salaire brut pour un cas type de salarié) et détaillons l'ensemble des prélèvements obligatoires et compléments de ressources affectant le cas type, jusqu'au revenu finalement disponible.",
+              "Pour chaque situation, nous partons des <b>revenus bruts</b> (salaire brut pour un cas type de salarié) et détaillons l'ensemble des prélèvements obligatoires et compléments de ressources affectant le cas type, jusqu'au <b>revenu finalement disponible</b>.",
           },
           {
-            title: "Décomposition d'une situation 🧾",
+            title: "La décomposition du côté de l'employeur 🧾",
             element: document.querySelector("#situation_0_Employeur"),
             intro:
-              "Le principe est identique du côté de l'employeur, la décomposition part du salaire brut, pour aller, cette fois-ci jusqu'au super-brut. Vous permettant ainsi de visualiser l'ensemble des cotisations, exonérations et aides qui concernent l'employeur.",
+              "Utilisez les onglets à gauche du cas type pour vous rendre sur la décomposition du côté de l'employeur.<br><br><b>Le principe est identique</b>, les dispositifs affectant le cas type sont détaillés du <b>salaire brut jusqu'au coût salarial</b>.",
           },
-          // {
-          //   title: "Afficher tous les dispositifs influents 🧾 👀",
-          //   element: document.querySelector("#situation_0_waterfall_showall"),
-          //   intro:
-          //     "Par défaut, nous n'affichons que les dispositifs dont le montant de l'impact n'est pas nul. Cette case à cocher vous permet de voir l'ensemble des dispositifs influents.",
-          // },
-          // {
-          //   title: "Ouvrir la décomposition 👀",
-          //   element: document.querySelector("#situation_1_toggle"),
-          //   intro:
-          //     "Quand la décomposition des dispositifs est repliée, ouvrez-la en cliquant sur «&nbsp;Voir la décomposition&nbsp;».",
-          // },
+
           {
-            title: "Synthèse des impacts",
-            element: document.querySelector("#situation_0_totalimpact"),
+            title: "Comparaison de deux cas types 👭",
+            element: document.querySelector("#situation_0_compare"),
             intro:
-              "La vignette en bas du cas type additionne l'ensemble des impacts des dispositifs et restitue des résultats pour le cas type, l'employeur et les administrations publiques.<br>⚠️ À ce jour, ces résultats sont à prendre avec beaucoup de précautions, l'ordre de grandeur et la tendance restent bons.",
+              "Vous pouvez ici comparer un cas type par rapport à un autre, ainsi que les impacts des modifications de la loi.",
           },
           {
             title: "Enregistrer sa copie de travail",
             element: document.querySelector("#situation_savebutton"),
             intro:
-              'Pour terminer, sauvegardez et partagez votre copie de travail (cas types et réforme).<br><br>💡 Si vous avez une question sur votre estimation, écrivez-nous à <a class="link" href="mailto:leximpact@an.fr">leximpact@an.fr</a> en utilisant cette fonctionnalité pour nous transmettre votre réforme et vos cas types.',
+              'Pour terminer, <b>sauvegardez et partagez votre copie de travail</b> (cas types et réforme).<br><br>💡 Si vous avez une question sur votre estimation, écrivez-nous à <a class="link" href="mailto:leximpact@an.fr">leximpact@an.fr</a> en utilisant cette fonctionnalité pour nous transmettre votre réforme et vos cas types.',
           },
         ],
       })
@@ -891,11 +880,11 @@
               <span class="ml-2 lg:ml-4"> Modifications </span>
             </h3>
 
-            <div class="h-[calc(100vh-10rem)] overflow-y-auto">
             <div
-                class="mx-2 mt-5 flex-col rounded text-xs"
+              class="h-[calc(100vh-10rem)] overflow-y-auto"
               id="situation_color_code"
             >
+              <div class="mx-2 mt-5 flex-col rounded text-xs">
                 <!--
             <p class="mr-1 italic">Légende :</p>
             <div class="flex-col">