Responsive section barre de recherche

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-2 border-neutral-200 border-b-4 border-b-[#A6A00C]"
+  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"
 >
   <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-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-sm md: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

@@ -85,9 +85,11 @@
   <section
     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 fond"
   >
-    <div class="h-full relative z-10 flex flex-col justify-evenly items-center">
+    <div
+      class="h-full relative z-10 flex flex-col justify-evenly items-center text-sm md:text-lg 2xl:text-2xl"
+    >
       <h1
-        class="font-serif text-xl md:text-3xl 2xl:text-4xl text-center leading-snug"
+        class="font-serif text-xl 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 />
@@ -96,15 +98,14 @@
         du <span class="highlight highlight-yellow">système socio-fiscal</span>
       </h1>
 
-      <div class="flex flex-col gap-4">
+      <div class="flex flex-col gap-4 mx-5">
         <div>
-          <h2 class="font-bold text-xl 2xl:text-3xl">
-            Commencer avec un impôt, une cotisation ou une prestation :
+          <h2 class="font-bold text-lg xl:text-2xl 2xl:text-3xl">
+            Commencer avec un impôt, une cotisation ou une prestation&nbsp;:
           </h2>
-
-          <span class="2xl:text-2xl">
+          <span>
             En sélectionnant un dispositif, vous pourrez ensuite voir ses
-            impacts et même proposer un changement de la loi :
+            impacts et même proposer un changement de la loi&nbsp;:
           </span>
         </div>
 
@@ -152,10 +153,10 @@
           </WelcomeSearch>
         </div>
 
-        <div class="flex gap-3 items-center">
+        <div class="flex-auto items-center mb-20 text-sm md:text-base">
           {#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"
+              class="mx-1 px-3 py-1 bg-[#E3DFA9] hover:bg-opacity-80 active:bg-opacity-70 rounded-full"
               href={newSimulationUrl({
                 ...displayMode,
                 parametersVariableName: suggestion.name,
@@ -165,7 +166,7 @@
             </a>
           {/each}
           <a
-            class="underline text-neutral-600 hover:text-black"
+            class="underline text-neutral-600 hover:text-black block mt-2 mx-1"
             href="#dispositif-couverts"
           >
             Voir les {withLinkedVariableNames.length} dispositifs couverts