Améliore section 1 concernant les caractéristiques du simulateur

src/routes/welcome/+page.svelte

@@ -44,19 +44,19 @@
     class="relative h-[78%] before:absolute before:top-0 before:inset-x-0 before:h-[50vh] before:bg-gradient-to-b before:from-[#9AAAB4] before:to-transparent"
   >
     <div class="h-full relative z-10 flex flex-col justify-evenly items-center">
-      <h3 class="font-serif text-3xl text-center">
+      <h1 class="font-serif text-4xl text-center leading-snug">
         Mesurer les <span class="highlight">impacts</span>
         <br />
         du droit en vigueur ou d’une réforme
         <br />
         du <span class="highlight">système socio-fiscal</span>
-      </h3>
+      </h1>
 
       <div class="flex flex-col gap-4">
         <div>
-          <h5 class="font-bold text-3xl">
+          <h2 class="font-bold text-3xl">
             Commencer avec un impôt, une cotisation ou une prestation :
-          </h5>
+          </h2>
 
           <span>
             En sélectionnant un dispositif, vous pourrez ensuite voir ses
@@ -86,20 +86,56 @@
     </div>
   </section>
 
-  <section class="h-[90%] grid grid-cols-3 gap-x-12 px-40 py-20 bg-[#E3E4D6]">
+  <section
+    class="h-[90%] grid grid-cols-4 gap-x-12 px-40 pb-20 pt-10 bg-[#E3E4D6]"
+  >
+    <h2 class="text-2xl font-light col-span-4 text-center">
+      Les caractéristiques du simulateur ⬇️
+    </h2>
     <div class="font-serif text-lg">
-      <h6 class="mb-6 font-sans text-2xl">
+      <div class="text-center">
+        <span
+          class="font-light text-lg bg-gray-100 px-2 py-1 rounded-md text-center font-sans tracking-wider"
+        >
+          Actions possibles
+        </span>
+        <h3 class="mb-6 mt-2 font-sans text-2xl text-center font-bold">
+          <span> Consulter et modifier</span>
           <span class="inline-flex gap-2">
-          Impacts budgétaires
+            la loi <img alt="Picto stylo" class="w-7" src="/picto_pen.svg" />
+          </span>
+        </h3>
+      </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>
+      </ul>
+    </div>
+    <div class="font-serif text-lg">
+      <div class="text-center">
+        <span
+          class="font-light text-lg bg-gray-100 px-2 py-1 rounded-md text-center font-sans tracking-wider"
+        >
+          Entités impactées
+        </span>
+        <h3 class="mb-6 mt-2 font-sans text-2xl text-center font-bold">
+          <span class="inline-flex gap-2">
+            Budget de l'État
             <PictoBudgetEtat />
           </span>
           <br />
           <span class="inline-flex items-center gap-2">
-          et sur cas types
-          <img alt="Picto cas type" class="w-7" src="/pictos/picto_femme.svg" />
+            et ménages types
+            <img
+              alt="Picto cas type"
+              class="w-7"
+              src="/pictos/picto_femme.svg"
+            />
           </span>
-      </h6>
-
+        </h3>
+      </div>
       <span>
         Le simulateur socio-fiscal LexImpact de l’Assemblée nationale permet de
         voir les impacts de la loi sur des <b>ménages types</b> pour
@@ -121,41 +157,51 @@
     </div>
 
     <div class="font-serif text-lg">
-      <h6 class="mb-6 font-sans text-2xl">
-        <span class="inline-flex gap-2">
-          Consulter et modifier
-          <img alt="Picto stylo" class="w-7" src="/picto_pen.svg" />
+      <div class="text-center">
+        <span
+          class="font-light text-lg bg-gray-100 px-2 py-1 rounded-md text-center font-sans tracking-wider"
+        >
+          Périmètre concerné
         </span>
-        <br />
-        <span>la loi</span>
-      </h6>
-
-      <span>Ce simulateur permet :</span>
-
-      <ul class="list-disc pl-8">
-        <li>de consulter le droit en vigueur ;</li>
-        <li>de consulter les projets de loi du Gouvernement ;</li>
-        <li>de modifier les paramètres pour voir les impacts d’une réforme.</li>
-      </ul>
+        <h3 class="mb-6 mt-2 font-sans text-2xl text-center font-bold">
+          <span>Fiche de paie & prestations&nbsp;sociales</span>
+        </h3>
       </div>
-
-    <div class="font-serif text-lg">
-      <h6 class="mb-6 font-sans text-2xl">
-        <span>La fiche de paie & les&nbsp;prestations&nbsp;sociales</span>
-      </h6>
-
-      <span>Le périmètre du simulateur couvre :</span>
+      <span>Les dispositifs évaluables sont :</span>
 
       <ul class="list-disc pl-8">
-        <li>les cotisations salariales et patronales</li>
-        <li>les impôts</li>
+        <li>les cotisations salariales et patronales&nbsp;;</li>
+        <li>les impôts&nbsp;;</li>
         <li>les prestations sociales.</li>
       </ul>
 
       <img class="mt-6 ml-20 w-28" src="/picto-affaires-sociales.svg" />
     </div>
+    <div class="font-serif text-lg">
+      <div class="text-center">
+        <span
+          class="font-light text-lg bg-gray-100 px-2 py-1 rounded-md text-center font-sans tracking-wider"
+        >
+          Période concernée
+        </span>
+        <h3 class="mb-6 mt-2 font-sans text-2xl text-center font-bold">
+          <span>Année en cours ou à venir</span>
+        </h3>
+      </div>
+      <span
+        >La majorité de l'année, le simulateur concerne l'année en cours - <span
+          class="italic">actuellement {new Date().getFullYear()}</span
+        >.
+        <br />À partir de septembre, le simulateur se transpose pour l'année
+        suivante afin d'évaluer les projets de lois financiers de fin d'année -
+        <span class="italic"
+          >PLF {new Date().getFullYear() + 1} et PLFSS {new Date().getFullYear() +
+            1} à venir
+        </span>.
+      </span>
+    </div>
 
-    <div class="col-span-3 flex flex-col items-center gap-1">
+    <div class="col-span-4 flex flex-col items-center gap-1">
       <a
         class="inline-flex items-center gap-2 text-[#343bff] uppercase font-semibold tracking-widest hover:underline"
         href="#"
@@ -177,6 +223,6 @@
 
 <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-yellow-400 before:bg-opacity-65;
+    @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;
   }
 </style>