Mise à jour du tutoriel d'introduction

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/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/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">