Début du travail sur la nouvelle page d'accueil/d'atterrissage du simulateur

• Styles des liens unifiés en CSS ?
• Dans suggestions : aides_logement ou aide_logement ?

src/routes/welcome/+page.svelte

@@ -45,11 +45,11 @@
   >
     <div class="h-full relative z-10 flex flex-col justify-evenly items-center">
       <h1 class="font-serif text-4xl text-center leading-snug">
-        Mesurer les <span class="highlight">impacts</span>
+        Mesurer les <span class="highlight highlight-yellow">impacts</span>
         <br />
         du droit en vigueur ou d’une réforme
         <br />
-        du <span class="highlight">système socio-fiscal</span>
+        du <span class="highlight highlight-yellow">système socio-fiscal</span>
       </h1>
 
       <div class="flex flex-col gap-4">
@@ -78,7 +78,10 @@
               {suggestion.label}
             </a>
           {/each}
-          <a class="underline text-neutral-600 hover:text-black" href="#">
+          <a
+            class="underline text-neutral-600 hover:text-black"
+            href="#dispositif-couverts"
+          >
             Voir les {suggestions.length} dispositifs couverts
           </a>
         </div>
@@ -141,7 +144,9 @@
       <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
-        <a class="underline" href="#">tous les dispositifs disponibles</a>.
+        <a class="underline" href="#dispositif-couverts"
+          >tous les dispositifs disponibles</a
+        >.
       </span>
 
       <br />
@@ -222,7 +227,8 @@
     </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"
+    id="dispositif-couverts"
+    class="grid grid-cols-2 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;:
@@ -236,8 +242,9 @@
     >
       <span
         class="border-b-2 border-black pb-3 font-serif italic font-light relative z-10"
-        ><span class="highlight">le budgétaire</span></span
       >
+        <span class="highlight highlight-yellow">le budgétaire</span>
+      </span>
       <br />
       <br />
       Calculer les impacts budgétaires d’une réforme de CSG, impôt sur le revenu
@@ -252,7 +259,7 @@
         src="welcome-capture-ecran-impact-budget.png"
       />
     </div>
-    <div class="font-serif text-lg col-span-4 lg:col-span-2">
+    <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
@@ -296,8 +303,9 @@
     >
       <span
         class="border-b-2 border-black pb-3 font-serif italic font-light relative z-10"
-        ><span class="highlight">la feuille de paie</span></span
       >
+        <span class="highlight highlight-yellow">la feuille de paie</span>
+      </span>
       <br />
       <br />
       Visualiser l’ensemble des impôts, cotisations et prestations sociales qui affectent
@@ -312,7 +320,7 @@
         src="welcome-capture-ecran-feuille-de-paie.png"
       />
     </div>
-    <div class="font-serif text-lg col-span-4 lg:col-span-2">
+    <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
@@ -342,8 +350,9 @@
     >
       <span
         class="border-b-2 border-black pb-3 font-serif italic font-light relative z-10"
-        ><span class="highlight">les graphiques cas types</span></span
       >
+        <span class="highlight highlight-yellow">les graphiques cas types</span>
+      </span>
       <br />
       <br />
       Consulter l’évolution du système socio-fiscal d’un cas type selon son salaire
@@ -357,7 +366,7 @@
         src="welcome-capture-ecran-graphiques-cas-types.png"
       />
     </div>
-    <div class="font-serif text-lg col-span-4 lg:col-span-2">
+    <div class="font-serif text-lg col-span-4 lg:col-span-2 py-3.5">
       <span>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sit amet
         laoreet mauris, ut cursus lorem. Sed vitae dolor risus. Ut molestie
@@ -378,7 +387,9 @@
         class=" font-serif text-lg col-span-3 lg:col-span-1 justify-self-center lg:justify-self-end"
       >
         <h4 class="relative font-light text-xl font-sans mb-4 text-center z-10">
-          <span class="highlight-grey">1. Sélectionner un cas type</span>
+          <span class="highlight highlight-grey">
+            1. Sélectionner un cas type
+          </span>
         </h4>
         <p class="font-serif text-base text-center">
           Rendez-vous sur le <a href="#" class="link text-le-bleu">simulateur</a
@@ -389,7 +400,7 @@
         class=" font-serif text-lg col-span-3 lg:col-span-1 justify-self-center lg:justify-self-end"
       >
         <h4 class="relative font-light text-xl font-sans mb-4 text-center z-10">
-          <span class="highlight-grey"
+          <span class="highlight highlight-grey"
             >2. Cliquer sur l’onglet «&nbsp;fiche de paie&nbsp;»</span
           >
         </h4>
@@ -402,7 +413,7 @@
         class=" font-serif text-lg col-span-3 lg:col-span-1 justify-self-center lg:justify-self-end"
       >
         <h4 class="relative font-light text-xl font-sans mb-4 text-center z-10">
-          <span class="highlight-grey"
+          <span class="highlight highlight-grey"
             >3. Défiler vers le bas et ouvrir l’accordéon</span
           >
         </h4>
@@ -433,8 +444,9 @@
     >
       <span
         class="border-b-2 border-black pb-3 font-serif italic font-light relative z-10"
-        ><span class="highlight">les gagnants / perdants</span></span
       >
+        <span class="highlight highlight-yellow">les gagnants / perdants</span>
+      </span>
       <br />
       <br />
       Calculer les impacts sur la population d’une réforme de CSG, impôt sur le revenu
@@ -449,7 +461,7 @@
         src="welcome-capture-ecran-impact-gagnants-perdants.png"
       />
     </div>
-    <div class="font-serif text-lg col-span-4 lg:col-span-2">
+    <div class="font-serif text-lg col-span-4 lg:col-span-2 py-3.5">
       <span>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sit amet
         laoreet mauris, ut cursus lorem. Sed vitae dolor risus. Ut molestie
@@ -489,11 +501,15 @@
 
 <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;
+    @apply relative inline-flex before:absolute before:-z-10 before:top-1 before:bottom-0 before:-left-1 before:-right-4;
+  }
+
+  .highlight-yellow {
+    @apply before:bg-le-jaune before:bg-opacity-65;
   }
 
   .highlight-grey {
-    @apply relative before:absolute before:-z-10 before:top-1 before:bottom-0 before:-left-1 before:-right-4 before:bg-[#C5C39C] before:bg-opacity-65;
+    @apply before:bg-[#C5C39C] before:bg-opacity-65;
   }
 
   .fond {