Ajoute section impact budgétaire

src/routes/welcome/+page.svelte

@@ -89,7 +89,9 @@
   <section
     class="grid grid-cols-4 gap-x-12 px-10 md:px-20 lg:px-40 pb-20 pt-10 gap-y-12 bg-[#E3E4D6]"
   >
-    <h2 class="text-2xl font-light col-span-4 text-center">
+    <h2
+      class="justify-self-center max-w-prose text-2xl font-light col-span-4 text-center"
+    >
       Les caractéristiques du simulateur ⬇️
     </h2>
     <div class="font-serif text-lg col-span-4 md:col-span-2 2xl:col-span-1">
@@ -219,10 +221,82 @@
       </a>
     </div>
   </section>
+  <section
+    class="grid grid-cols-4 gap-x-12 px-10 md:px-20 lg:px-40 pb-20 pt-10 gap-y-12 bg-white"
+  >
+    <h2 class="text-2xl font-bold col-span-4 text-center">
+      Les {suggestions.length} dispositifs couverts par le simulateur LexImpact socio-fiscal&nbsp;:
+    </h2>
+  </section>
+  <section
+    class="fond grid grid-cols-4 gap-x-12 px-10 md:px-20 lg:px-40 pb-20 pt-10 gap-y-12 bg-white"
+  >
+    <h2
+      class="justify-self-center text-2xl font-bold col-span-4 text-center relative z-10 max-w-prose"
+    >
+      <span
+        class="border-b-2 border-black pb-3 font-serif italic font-light highlight"
+        >le budgétaire</span
+      >
+      <br />
+      <br />
+      Calculer les impacts budgétaires d’une réforme de CSG, impôt sur le revenu
+      ou allocations familiales
+    </h2>
+
+    <div
+      class="font-serif text-lg col-span-4 lg:col-span-2 justify-self-center lg:justify-self-end"
+    >
+      <img
+        class="max-h-[500px]"
+        src="welcome-capture-ecran-impact-budget.png"
+      />
+    </div>
+    <div class="font-serif text-lg col-span-4 lg:col-span-2">
+      <span>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sit amet
+        laoreet mauris, ut cursus lorem. Sed vitae dolor risus. Ut molestie
+        imperdiet dapibus. Nulla facilisi. Vivamus laoreet nibh at magna auctor,
+        eget accumsan er at volutpat. Pellentesque id est pellentesque, aliquam
+        purus id, ullamcorper lorem. Integer sit amet metus nulla. Vivamus
+        ullamcorper rutrum erat. Fusce tincidunt augue et effici iaculis.</span
+      >
+      <div class="flex gap-3 font-sans text-base items-center mt-6">
+        <!--ICI mettre uniquement les dispositifs "budget"-->
+        {#each suggestions.slice(0, 3) as suggestion}
+          <a
+            class="px-3 py-1 bg-[#E3DFA9] hover:bg-opacity-80 active:bg-opacity-70 rounded-full"
+            href={newSimulationUrl({
+              ...displayMode,
+              parametersVariableName: suggestion.name,
+            })}
+          >
+            {suggestion.label}
+          </a>
+        {/each}
+      </div>
+
+      <button
+        class="mt-5 font-sans flex items-center gap-2 py-2 px-5 shadow-lg bg-le-bleu hover:bg-blue-800 active:bg-blue-900 rounded-md text-white text-sm font-bold tracking-[0.085em] uppercase"
+        title="Vers le simulateur budgétaire de l'impôt sur le revenu"
+      >
+        Simulateur budgétaire<iconify-icon
+          class="ml-2 align-[-0.4rem] text-2xl"
+          icon="ri-arrow-right-line"
+        />
+      </button>
+    </div>
+  </section>
 </main>
 
 <style lang="postcss">
   .highlight {
     @apply relative before:absolute before:-z-10 before:top-1 before:bottom-0 before:-left-1 before:-right-4 before:bg-le-jaune before:bg-opacity-65;
   }
+
+  .fond {
+    background-color: #ffffff;
+    /* Polka dots - Heropatterns.com échelle réduite */
+    background-image: url("data:image/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ded500' fill-opacity='0.4' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E");
+  }
 </style>