itinéraire vers point dans maps

src/features/auth/pages/Login/LoginPage.module.css

@@ -20,10 +20,10 @@
   width: 100%;
   max-width: 600px;
   margin: 0 auto;
+  padding-top: 4.5rem;
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
   gap: 3rem;
   text-align: center;
 }
@@ -36,43 +36,50 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 0.7rem;
   width: 100%;
   max-width: 17rem;
 }
 
 .title {
-  margin: 0;
+  color: var(--Content-Neutral-Primary, var(--gray-12, #2A2826));
+  text-align: center;
+
+  /* Headings/Hero */
+  font-family: "Fira Sans";
   font-size: 1.5rem;
+  font-style: normal;
   font-weight: 600;
-  line-height: 1.2;
-  color: #2a2826;
-  font-family:"Fira Sans";
+  line-height: normal;
 }
 
 .subtitle {
   margin: 0;
   font-size: 1.0625rem;
   font-weight: 400;
-  line-height: 1.35;
+  line-height: normal;
   color: #2a2826;
 }
 
 .form {
   display: flex;
   flex-direction: column;
   align-items: stretch;
+  padding: 1.6875rem 0.625rem 0.6875rem 0.625rem;
   gap: 1.5rem;
   width: 100%;
-  max-width: 18.625rem;
+  max-width: 18.625rem; 
 }
 
 .actionButton {
-  width: 100% !important;
-  margin: 0 !important;
-  min-height: 44px;
-  font-size: 0.875rem;
-  font-weight: 600;
+  display: flex;
+  height: 2.75rem;
+
+  justify-content: center;
+  align-items: center;
+  gap: var(--Spacing-2xs, 0.25rem);
+  align-self: stretch;
+  border-radius: 6.25rem;
+  background: var(--Dark-green, #26A581);
 }
 
 .outlineButton {
@@ -87,12 +94,35 @@
   border: 1px solid rgba(42, 40, 38, 0.2);
   border-radius: 100px;
   background: transparent;
-  color: var(--color-primary);
+  color: var(--green-5, #229574);
   font-size: 0.875rem;
   font-weight: 600;
   text-decoration: none;
   cursor: pointer;
   transition: background-color 0.2s, border-color 0.2s;
+
+
+  /* display: flex;
+  height: 2.75rem;
+  padding: 0.6875rem 0.625rem;
+  justify-content: center;
+  align-items: center;
+  gap: var(--Spacing-2xs, 0.25rem);
+  align-self: stretch;
+  border-radius: 6.25rem;
+  border: 1px solid var(--gray-1, rgba(42, 40, 38, 0.20));
+
+  color: var(--green-5, #229574);
+
+
+  /* Appli - Btn label */
+ /* font-family: "Open Sans";
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal; */
+
+
 }
 
 .outlineButton:hover {
@@ -110,7 +140,7 @@
 }
 
 .forgotPasswordLink {
-  display: inline-flex;
+  /* display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 0.35rem;
@@ -120,7 +150,24 @@
   font-weight: 400;
   text-decoration: underline;
   text-underline-offset: 0.2rem;
-  text-decoration-thickness: from-font;
+  text-decoration-thickness: from-font; */
+
+  color: var(--Content-Neutral-Primary, var(--gray-12, #2A2826));
+text-align: center;
+
+
+/* Body/Small */
+font-family: "Open Sans";
+font-size: 0.8125rem;
+font-style: normal;
+font-weight: 400;
+line-height: normal;
+text-decoration-line: underline;
+text-decoration-style: solid;
+text-decoration-skip-ink: auto;
+text-decoration-thickness: 4.5%; /* 0.585px */
+text-underline-offset: 21%; /* 2.73px */
+text-underline-position: from-font;
 }
 
 .forgotPasswordIcon {

src/features/auth/pages/Login/LoginPage.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-
+import { AppLogo } from '@/shared/ui/AppLogo';
 import { useAuth } from '@/features/auth/hooks/useAuth';
 import { EXTERNAL_LINKS } from '@/shared/constants/externalLinks';
 import IconExternalLink from '@/shared/assets/icons/icon-external-link.svg?react';
@@ -63,7 +63,9 @@ export function LoginPage() {
   return (
     <div className={styles.container}>
       <div className={styles.content}>
+
         <header className={styles.header}>
+          <AppLogo size="sm" />
           <h1 className={styles.title}>Bienvenue</h1>
           <p className={styles.subtitle}>
             Connectez vous pour accéder à votre espace personnel

src/shared/ui/AppLogo/AppLogo.module.css

@@ -3,11 +3,17 @@
   object-fit: contain;
   margin-left: auto;
   margin-right: auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 }
 
 .sm {
-  width: 80px;
-  height: 80px;
+  width: 5.25rem;
+  height: 5.625rem;
+  padding: 0.75rem;
+  aspect-ratio: 14/15;
 }
 
 .md {

src/shared/ui/AppLogo/AppLogo.tsx

@@ -1,4 +1,4 @@
-import logo from '@/assets/img/logo.png';
+import logo from '@/assets/img/IGN.svg';
 
 import styles from './AppLogo.module.css';