Responsive première section

src/routes/welcome/+page.svelte

@@ -176,21 +176,23 @@
   </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]"
+    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] font-serif text-base 2xl:text-lg"
   >
     <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">
+    <div class="col-span-4 md:col-span-2 xl:col-span-1">
       <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">
+        <h3
+          class="mb-6 mt-2 font-sans text-xl 2xl:text-2xl text-center font-bold"
+        >
           <span> Consulter et modifier</span>
           <span class="inline-flex gap-2">
             la loi <img alt="Picto stylo" class="w-7" src="/picto_pen.svg" />
@@ -204,17 +206,23 @@
         <li>modifier les paramètres pour voir les impacts d’une réforme.</li>
       </ul>
     </div>
-    <div class="font-serif text-lg col-span-4 md:col-span-2 2xl:col-span-1">
+    <div class="col-span-4 md:col-span-2 xl:col-span-1">
       <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">
+        <h3
+          class="mb-6 mt-2 font-sans text-xl 2xl:text-2xl text-center font-bold"
+        >
           <span class="inline-flex gap-2">
             Budget de l'État
-            <PictoBudgetEtat />
+            <img
+              alt="Picto cas type"
+              class="w-7"
+              src="/pictos/picto_etat.svg"
+            />
           </span>
           <br />
           <span class="inline-flex items-center gap-2">
@@ -249,14 +257,16 @@
       </ul>
     </div>
 
-    <div class="font-serif text-lg col-span-4 md:col-span-2 2xl:col-span-1">
+    <div class="col-span-4 md:col-span-2 xl:col-span-1">
       <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>
-        <h3 class="mb-6 mt-2 font-sans text-2xl text-center font-bold">
+        <h3
+          class="mb-6 mt-2 font-sans text-xl 2xl:text-2xl text-center font-bold"
+        >
           <span>Fiche de paie & prestations&nbsp;sociales</span>
         </h3>
       </div>
@@ -270,14 +280,16 @@
 
       <img class="mt-6 ml-20 w-28" src="/picto-affaires-sociales.svg" />
     </div>
-    <div class="font-serif text-lg col-span-4 md:col-span-2 2xl:col-span-1">
+    <div class="col-span-4 md:col-span-2 xl:col-span-1">
       <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">
+        <h3
+          class="mb-6 mt-2 font-sans text-xl 2xl:text-2xl text-center font-bold"
+        >
           <span>Année en cours ou à venir</span>
         </h3>
       </div>
@@ -294,7 +306,7 @@
       </span>
     </div>
 
-    <div class="col-span-4 flex flex-col items-center gap-1">
+    <div class="col-span-4 flex flex-col items-center gap-1 font-sans">
       <a
         class="inline-flex items-center gap-2 text-[#343bff] uppercase font-semibold tracking-widest hover:underline"
         href="#"
@@ -314,7 +326,7 @@
   </section>
   <section
     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"
+    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 text-base 2xl:text-lg"
   >
     <h2 class="text-2xl font-light col-span-2 text-center">
       Les {withLinkedVariableNames.length} dispositifs couverts<br />par le
@@ -323,16 +335,17 @@
 
     {#each waterfallsDecompositions as { waterfall, visibleDecompositions }}
       {#if visibleDecompositions.length > 0}
-        <div>
-          <h3 class="font-bold text-lg mt-1.5">
+        <div class="col-span-2 md:col-span-1">
+          <h3 class="font-bold mt-1.5 text-lg 2xl:text-xl">
             Dispositifs affectant les {waterfall.label.toLowerCase()}s :
           </h3>
           <p class="font-serif mb-4">
             {#if waterfall.label.toLowerCase() === "particulier"}
               Tous les dispositifs des particuliers : du salaire de base
-              <span class="text-sm">- salaire brut + primes -</span> jusqu'aux prestations
-              sociales, en passant par les cotisations, contributions et les impôts
-              :
+              <span class="text-sm 2xl:text-base"
+                >- salaire brut + primes -</span
+              > jusqu'aux prestations sociales, en passant par les cotisations, contributions
+              et les impôts :
             {:else if waterfall.label.toLowerCase() === "employeur"}
               Tous les dispositifs concernant les employeurs, de la rémunération
               brute aux cotisations patronales et allègements employeurs,