Ajoute contenu section budgeté

src/lib/components/search/WelcomeSearch.svelte

@@ -48,7 +48,7 @@
 </script>
 
 <div
-  class="w-full flex items-center gap-1.5 overflow-hidden rounded-t-md bg-white border md:border-2 border-neutral-200 border-b-2 md:border-b-4 border-b-[#A6A00C] min-h-10"
+  class="w-full flex items-center gap-1.5 overflow-hidden rounded-t-md bg-white border md:border-2 border-neutral-200 border-b-2 md:border-b-4 border-b-[#A6A00C] min-h-12"
 >
   <iconify-icon
     class="ml-4 self-center p-1 text-xl text-black"
@@ -56,7 +56,7 @@
   />
   <input
     autocomplete="off"
-    class="w-full px-1 py-1.5 md:px-3 md:py-3 border-none bg-transparent text-sm md:text-base lg:text-lg text-gray-900 placeholder-gray-400 !ring-transparent focus:outline-none 2xl:text-xl"
+    class="w-full px-1 py-1.5 md:px-3 md:py-3 border-none bg-transparent text-base lg:text-lg text-gray-900 placeholder-gray-400 !ring-transparent focus:outline-none 2xl:text-xl"
     id="navbar_search"
     placeholder="impôt sur le revenu, CSG, ..."
     type="search"

src/routes/welcome/+page.svelte

@@ -38,17 +38,35 @@
   const welcomePage = getContext("welcomePage") as Writable<boolean | undefined>
 
   const suggestions = [
+    {
+      name: "irpp_economique",
+      label: "Impôt sur le revenu",
+      budget: true,
+    },
     {
       name: "csg_salaire",
-      label: "CSG",
+      label: "CSG salaires",
+      budget: true,
     },
     {
-      name: "irpp_economique",
-      label: "Impôt sur le revenu",
+      name: "csg_retraites",
+      label: "CSG retraites",
+      budget: true,
     },
     {
-      name: "aide_logement",
+      name: "af",
+      label: "Allocations familiales",
+      budget: true,
+    },
+    {
+      name: "rsa",
+      label: "RSA",
+      budget: false,
+    },
+    {
+      name: "aides_logement",
       label: "Aides au logement",
+      budget: false,
     },
   ]
 
@@ -197,10 +215,10 @@
     class="relative h-[78vh] before:absolute before:top-0 before:inset-x-0 before:h-[50vh] before:bg-gradient-to-b before:from-[#9AAAB4] before:to-transparent fond"
   >
     <div
-      class="h-full relative z-10 flex flex-col justify-evenly items-center text-sm md:text-lg 2xl:text-2xl"
+      class="h-full relative z-10 flex flex-col justify-evenly items-center text-base md:text-lg 2xl:text-2xl"
     >
       <h1
-        class="font-serif text-xl md:text-3xl 2xl:text-4xl text-center leading-snug my-10 md:my-0"
+        class="font-serif text-2xl md:text-3xl 2xl:text-4xl text-center leading-snug my-10 md:my-0"
       >
         Mesurer les <span class="highlight highlight-yellow">impacts</span>
         <br />
@@ -211,7 +229,7 @@
 
       <div class="flex flex-col gap-4 mx-5">
         <div>
-          <h2 class="font-bold text-lg xl:text-2xl 2xl:text-3xl">
+          <h2 class="font-bold text-xl xl:text-2xl 2xl:text-3xl">
             Commencer avec un impôt, une cotisation ou une prestation&nbsp;:
           </h2>
           <span>
@@ -316,9 +334,15 @@
       </div>
 
       <ul class="list-disc pl-8">
-        <li>consulter le droit en vigueur&nbsp;;</li>
-        <li>consulter les projets de loi du Gouvernement&nbsp;;</li>
-        <li>modifier les paramètres pour voir les impacts d’une réforme.</li>
+        <li>
+          consulter le droit en vigueur et les projets de loi du
+          Gouvernement&nbsp;;
+        </li>
+
+        <li>
+          modifier les paramètres du droit pour estimer les impacts d’une
+          réforme.
+        </li>
       </ul>
     </div>
     <div class="col-span-4 md:col-span-2 xl:col-span-1">
@@ -385,6 +409,8 @@
           <span>Fiche de paie & prestations&nbsp;sociales</span>
         </h3>
       </div>
+      <div class="flex md:flex-col">
+        <div>
           <span>Les dispositifs évaluables sont :</span>
 
           <ul class="list-disc pl-8">
@@ -392,8 +418,10 @@
             <li>les impôts&nbsp;;</li>
             <li>les prestations sociales.</li>
           </ul>
+        </div>
 
-      <img class="mt-6 ml-20 w-28" src="/picto-affaires-sociales.svg" />
+        <img class="md:mt-6 ml-20 w-28" src="/picto-affaires-sociales.svg" />
+      </div>
     </div>
     <div class="col-span-4 md:col-span-2 xl:col-span-1">
       <div class="text-center">
@@ -601,27 +629,32 @@
     </h2>
 
     <div
-      class="font-serif text-lg col-span-4 lg:col-span-2 justify-self-center lg:justify-self-end"
+      class="font-serif text-lg col-span-4 xl:col-span-2 justify-self-center lg:justify-self-end"
     >
       <img
-        class="max-h-[500px]"
+        class="max-h-[500px] shadow-2xl m-5 rounded-lg border bg-white p-4"
         src="welcome-capture-ecran-impact-budget.png"
       />
     </div>
-    <div class="font-serif text-lg col-span-4 lg:col-span-2 py-5">
-      <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}
+    <div class="font-serif text-lg col-span-4 xl:col-span-2 py-5">
+      <h3 class="font-bold">Quels impacts budgétaires ?</h3>
+
+      <ul class="list-disc list-inside">
+        <li>Total des recettes ou dépenses&nbsp;;</li>
+        <li>Recettes ou dépenses par dixièmes</li>
+        <li>Montant moyen du dispositif par foyer du dixième</li>
+        <li>
+          Proportion de ce montant par rapport aux revenus moyens des foyers du
+          dixième.
+        </li>
+      </ul>
+      <div class="flex flex-wrap gap-3 font-sans text-base items-center mt-4">
+        <h3 class="font-bold text-nowrap">Les dispositifs concernés&nbsp;:</h3>
+        {#each suggestions
+          .filter((suggestion) => suggestion.budget === true)
+          .slice(0, 6) as suggestion}
           <a
-            class="px-3 py-1 bg-[#E3DFA9] hover:bg-opacity-80 active:bg-opacity-70 rounded-full"
+            class="px-3 py-1 bg-[#E3DFA9] hover:bg-opacity-80 active:bg-opacity-70 rounded-full text-nowrap"
             data-sveltekit-noscroll
             href={getSimulationUrl({
               ...displayMode,
@@ -644,6 +677,32 @@
         </button>
       </div>
     </div>
+    <div class="col-span-4 max-w-screen-lg">
+      <h3 class="font-bold">Comment les impacts sont-ils obtenus ?</h3>
+      <p class="text-base">
+        Les calculs budgétaires sont effectués à partir d'une base de données
+        représentative de la population française, élaborée avec l'Enquête
+        Revenus Fiscaux et Sociaux de l'Insee (<a
+          class="link"
+          href="https://www.insee.fr/fr/metadonnees/source/serie/s1231/documentation-methodologique"
+          target="_blank">ERFS-FPR millésime 2019</a
+        >) et la base anonymisée des déclarations d'impôt sur le revenu des
+        foyers fiscaux de la DGFIP - Ministère des finances (<a
+          class="link"
+          href="Déclarations d'impôt sur le revenu des foyers fiscaux (POTE) du Ministère des Finances (DGFIP) (millésime 2021)"
+          target="_blank"
+        >
+          POTE - millésime 2021</a
+        >).
+        <a class="link font-sans" href="/comment-fonctionnent-les-simulateurs">
+          En savoir plus sur le fonctionnement du simulateur
+          <iconify-icon
+            class="text-base align-[-0.1rem]"
+            icon="ri-arrow-right-line"
+          />
+        </a>
+      </p>
+    </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-[#E3E4D6]"
@@ -666,7 +725,7 @@
       class="font-serif text-lg col-span-4 lg:col-span-2 justify-self-center lg:justify-self-end"
     >
       <img
-        class="max-h-[500px]"
+        class="max-h-[500px] shadow-2xl m-5 rounded-lg border"
         src="welcome-capture-ecran-feuille-de-paie.png"
       />
     </div>
@@ -712,7 +771,7 @@
       class="font-serif text-lg col-span-4 lg:col-span-2 justify-self-center lg:justify-self-end"
     >
       <img
-        class="max-h-[500px]"
+        class="max-h-[500px] shadow-2xl m-5 rounded-lg border"
         src="welcome-capture-ecran-graphiques-cas-types.png"
       />
     </div>
@@ -807,7 +866,7 @@
       class="font-serif text-lg col-span-4 lg:col-span-2 justify-self-center lg:justify-self-end"
     >
       <img
-        class="max-h-[500px]"
+        class="max-h-[500px] shadow-2xl m-5 rounded-lg border"
         src="welcome-capture-ecran-impact-gagnants-perdants.png"
       />
     </div>
@@ -850,18 +909,6 @@
   </section>
 </main>
 
-<!--<aside-->
-<!--  class="z-10 absolute inset-x-36 inset-y-0 pt-24 overflow-y-scroll bg-white shadow-2xl transition-all delay-75 duration-500"-->
-<!--  class:hidden={displayMode.parametersVariableName === undefined}-->
-<!--  class:translate-y-full={displayMode.parametersVariableName === undefined}-->
-<!--  class:block={displayMode.parametersVariableName !== undefined}-->
-<!--  class:translate-y-0={displayMode.parametersVariableName !== undefined}-->
-<!--&gt;-->
-<!--  <div class="w-full text-center font-serif font-bold text-2xl">-->
-<!--    {variableSummaryByName[displayMode.parametersVariableName]?.short_label}-->
-<!--  </div>-->
-<!--</aside>-->
-
 {#if displayMode.parametersVariableName !== undefined}
   <VariableDetail
     name={displayMode.parametersVariableName}