Tutoriel de démarrage : Regroupe des blocs pour réduire le tutoriel

src/routes/index.svelte

@@ -129,16 +129,14 @@
               "Bienvenue sur le simulateur LexImpact des cotisations et prestations sociales !",
           },
           {
-            title: "L'élément clé 🌟 de ce simulateur : ",
+            title: "L'élément clef 🌟 de ce simulateur : ",
             element: document.querySelector("#situation_0"),
             intro:
-              "Avant tout, voici le coeur de ce simulateur : <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>.",
+              "Avant tout, voici le coeur de ce simulateur : <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.<br><br>Toute l'interface s'articule autour de cet <b>élément qui évoluera avec votre réforme et les projets de loi</b>.",
           },
           {
-            title:
-              "C'est parti pour une rapide présentation des fonctionnalités :",
-            intro:
-              "Ce simulateur présente les mêmes codes visuels que les autres simulateurs LexImpact ➡️",
+            title: "Présentation rapide des éléments de l'interface",
+            intro: "C'est parti ! ➡️",
           },
           {
             title: "À gauche, la loi 📜",
@@ -150,39 +148,13 @@
             title: "À droite, les impacts 📊",
             element: document.querySelector("#situation_right_part_impacts"),
             intro:
-              "Cet espace vous permet de visualiser les impacts de la loi ou de votre amendement sur des cas types 👩‍👦‍👦...",
-          },
-          {
-            element: document.querySelector("#situation_1"),
-            intro: "...de salariés du privé, non agricole...",
-          },
-          {
-            element: document.querySelector("#situation_4"),
-            intro:
-              "... d'autres situations de revenus comme la retraite, le chômage, le RSA ou les rentes...",
+              "Cet espace vous permet de visualiser les impacts de la loi ou de votre amendement sur des cas types 👩‍👦‍👦 :<br><br><ul><li>• de salariés du <b>secteur privé</b> non agricole;</li><br><li>• d'autres situations de revenus comme la <b>retraite</b>, le <b>chômage</b>, le <b>RSA</b> ou les <b>rentes</b> ;</li><br><li>• d'autres caractéristiques comme le <b>handicap</b>.</li></ul>",
           },
           {
-            element: document.querySelector("#situation_8"),
-            intro:
-              "... ou encore d'autres caractéristiques, comme le handicap.",
-          },
-          {
-            title: "Un code couleur 🎨",
+            title: "Un code couleur 🎨 :",
             element: document.querySelector("#situation_color_code"),
-            intro: "L'interface respecte également un code couleur...",
-          },
-          {
-            element: document.querySelector("#situation_color_code_black"),
-            intro: "...noir ⚫️ pour la loi en vigueur ...",
-          },
-          {
-            element: document.querySelector("#situation_color_code_red"),
             intro:
-              "...rouge 🔴 pour les projets de loi de finances (PLF) et financement de la Sécurité sociale (PLFSS)...",
-          },
-          {
-            element: document.querySelector("#situation_color_code_yellow"),
-            intro: "...sur fond jaune 🟡 lorsque vous effectuez un amendement.",
+              "<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>",
           },
           {
             element: document.querySelector(
@@ -198,7 +170,7 @@
           {
             title: "Le cas type 👩‍👦‍👦",
             element: document.querySelector("#situation_0"),
-            intro: "Focalisons-nous désormais sur le cas type...",
+            intro: "Retournons plus en détails sur le cas type...",
           },
           {
             title: "Synthèse des caractéristiques du cas type 👩‍👦‍👦",