Modifie la structure des boutons pour qu'ils s'affichent correctement sur Safari

src/lib/components/NavBar.svelte

@@ -152,14 +152,12 @@
           {#if user === undefined}
             <div class="flex justify-between gap-2 items-center">
               <a
+                class="text-white uppercase text-sm rounded-sm focus:outline-none  hover:bg-gray-400 hover:bg-opacity-20 hover:text-white p-1 flex"
                 href="/authentication/signin/leximpact?redirect={$page.path}"
-                class="text-white uppercase text-sm rounded-sm focus:outline-none  hover:bg-gray-400 hover:bg-opacity-20 hover:text-white p-1"
-                type="button"
               >
-                <div class="flex items-center">
-                  <!-- Material icon: VPN key-->
+                <!-- Material Icon Restart Alt -->
                 <svg
-                    class="fill-current text-white inline rounded m-3 md:m-0"
+                  class="fill-current lg:mr-2"
                   xmlns="http://www.w3.org/2000/svg"
                   height="18px"
                   viewBox="0 0 22 22"
@@ -168,24 +166,17 @@
                     d="M12.65 10C11.83 7.67 9.61 6 7 6c-3.31 0-6 2.69-6 6s2.69 6 6 6c2.61 0 4.83-1.67 5.65-4H17v4h4v-4h2v-4H12.65zM7 14c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"
                   /></svg
                 >
-                  <p class="hidden lg:inline-block pl-1">Se connecter</p>
-                </div>
+                <span class="hidden lg:flex"> Se connecter</span>
               </a>
 
-              <div
-                class="bg-le-jaune-dark text-white uppercase text-sm rounded-sm focus:outline-none  hover:bg-gray-400 hover:bg-opacity-20 hover:text-white shadow-md"
-              >
               <a
-                  title="Vers le simulateur CSG Budget de la Sécurité sociale"
-                  href="https://budget.leximpact.an.fr/authentication/signin/leximpact?redirect=/budget"
-                  class=""
-                  type="button"
+                class="bg-le-jaune-dark text-white  flex justify-center shadow-md hover:bg-gray-400 px-5 mr-2 rounded p-2 uppercase text-sm"
+                href="/authentication/signin/leximpact?redirect={$page.path}"
               >
-                  <div class="flex items-center m-1">
-                    <div class="hidden md:inline-block p-1">Budget CSG</div>
+                <span class="flex"> Budget CSG</span>
                 <!-- Material icon: arrow forward-->
                 <svg
-                      class="fill-current text-white inline rounded mx-2 lg:ml-0"
+                  class="fill-current lg:ml-2"
                   xmlns="http://www.w3.org/2000/svg"
                   height="18px"
                   viewBox="0 0 22 22"
@@ -195,10 +186,8 @@
                     d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"
                   /></svg
                 >
-                  </div>
               </a>
             </div>
-            </div>
           {:else}
             <!-- User profile + se déconnecter -->
             <div class="flex justify-between gap-2 items-center">