Add connexion button. Link CSG button to CSG authentication.

src/lib/components/NavBar.svelte

@@ -150,20 +150,16 @@
       <div class="flex justify-end items-center">
         {#if authenticationEnabled}
           {#if user === undefined}
-            <div class="flex">
+            <div class="flex justify-between gap-2 items-center">
               <a
-                title="Vers le simulateur CSG Budget de la Sécurité sociale"
                 href="/authentication/signin/leximpact?redirect={$page.path}"
-                class="bg-le-jaune-dark text-white uppercase text-sm rounded-sm focus:outline-none  hover:bg-black hover:bg-opacity-20 hover:text-white  shadow-md"
+                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 m-1">
-                  <div>
-                    <p class="hidden md:inline-block pl-1">Budget CSG</p>
-                  </div>
+                <div class="flex items-center">
                   <!-- Material icon: VPN key-->
                   <svg
-                    class="fill-current text-white inline rounded mx-2"
+                    class="fill-current text-white inline rounded m-3 md:m-0"
                     xmlns="http://www.w3.org/2000/svg"
                     height="18px"
                     viewBox="0 0 22 22"
@@ -172,9 +168,37 @@
                       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>
+              </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"
+                >
+                  <div class="flex items-center m-1">
+                    <div class="hidden md:inline-block p-1">Budget CSG</div>
+                    <!-- Material icon: arrow forward-->
+                    <svg
+                      class="fill-current text-white inline rounded mx-2 lg:ml-0"
+                      xmlns="http://www.w3.org/2000/svg"
+                      height="18px"
+                      viewBox="0 0 22 22"
+                      width="18px"
+                      fill="#000000"
+                      ><path d="M0 0h24v24H0z" fill="none" /><path
+                        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">
@@ -213,21 +237,12 @@
               >
                 <a
                   title="Accès au simulateur CSG sur le budget de la Sécurité sociale"
-                  href="https://budget.leximpact.an.fr/budget"
+                  href="https://budget.leximpact.an.fr/authentication/signin/leximpact?redirect=/budget"
                   class=""
                   type="button"
                 >
                   <div class="flex items-center m-1">
-                    <div>
-                      <p class="hidden lg:inline-block xl:hidden p-1">
-                        Budget CSG
-                      </p>
-                      <p
-                        class="hidden md:inline-block lg:hidden xl:inline-block p-1"
-                      >
-                        Budget CSG
-                      </p>
-                    </div>
+                    <div class="hidden md:inline-block p-1">Budget CSG</div>
                     <!-- Material icon: arrow forward-->
                     <svg
                       class="fill-current text-white inline rounded mx-2 lg:ml-0"
@@ -362,45 +377,45 @@
           aria-orientation="vertical"
           aria-labelledby="user-menu"
         >
-          {#if authenticationEnabled}
-            {#if user === undefined}
           <a
-                href="/authentication/signin/leximpact?redirect={$page.path}"
+            href="https://budget.leximpact.an.fr/authentication/signin/leximpact?redirect=/budget"
             class="border-b block px-4 py-3 text-base bg-le-jaune-dark text-white hover:text-black"
             role="menuitem"
           >
-                <!-- Material icon: VPN key-->
+            <!-- Material icon: arrow forward-->
             <svg
-                  class="fill-current inline rounded mr-2"
+              class="fill-current text-white inline rounded mx-2 lg:ml-0"
               xmlns="http://www.w3.org/2000/svg"
               height="18px"
               viewBox="0 0 22 22"
               width="18px"
+              fill="#000000"
               ><path d="M0 0h24v24H0z" fill="none" /><path
-                    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"
+                d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"
               /></svg
-                >Estimer la CSG - budget de la Sécurité sociale</a
             >
-            {:else}
+            Estimer la CSG - budget de la Sécurité sociale</a
+          >
+          {#if authenticationEnabled}
+            {#if user === undefined}
               <a
-                href="https://socio-fiscal.leximpact.an.fr/"
-                class="border-b block px-4 py-3 text-base bg-le-jaune-dark text-white hover:text-black"
+                href="/authentication/signin/leximpact?redirect={$page.path}"
+                class="border-b block px-4 py-3 text-sm text-gray-700 font-bold hover:bg-gray-100"
                 role="menuitem"
               >
-                <!-- Material icon: arrow forward-->
+                <!-- Material icon: VPN key-->
                 <svg
-                  class="fill-current inline rounded mr-2"
+                  class="fill-current text-gray-700 inline rounded mr-2"
                   xmlns="http://www.w3.org/2000/svg"
                   height="18px"
                   viewBox="0 0 22 22"
                   width="18px"
-                  fill="#000000"
                   ><path d="M0 0h24v24H0z" fill="none" /><path
-                    d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"
+                    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
+                >Se connecter</a
               >
-                Estimer cotisations & prestations sur particulier type
-              </a>
+            {:else}
               <a
                 href="/authentication/signout"
                 class="border-b-4 block px-4 py-3 text-base text-gray-700 hover:bg-gray-100"