diff --git a/apps/frontend/public/favicon.ico b/apps/frontend/public/favicon.ico
index 57614f9..2b78d24 100644
Binary files a/apps/frontend/public/favicon.ico and b/apps/frontend/public/favicon.ico differ
diff --git a/apps/frontend/src/app/features/auth/change-password/change-password.html b/apps/frontend/src/app/features/auth/change-password/change-password.html
index 7bee6a3..1b30b1a 100644
--- a/apps/frontend/src/app/features/auth/change-password/change-password.html
+++ b/apps/frontend/src/app/features/auth/change-password/change-password.html
@@ -1,7 +1,7 @@
 <div class="auth-page">
   <form class="auth-card-wrapper" [formGroup]="form" (ngSubmit)="onSubmit()">
     <ev-card>
-      <img src="logo.png" alt="EnerVision" class="auth-logo" />
+      <img src="/logo.png" alt="EnerVision" class="auth-logo" />
       <h1>Nouveau mot de passe</h1>
       <p class="auth-subtitle">Votre mot de passe est provisoire, vous devez le modifier avant de continuer</p>
 
diff --git a/apps/frontend/src/app/features/auth/change-password/change-password.scss b/apps/frontend/src/app/features/auth/change-password/change-password.scss
index 48051a5..04e59dd 100644
--- a/apps/frontend/src/app/features/auth/change-password/change-password.scss
+++ b/apps/frontend/src/app/features/auth/change-password/change-password.scss
@@ -1,34 +1,28 @@
-:host {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 100vh;
-  background: var(--color-bg);
-}
-
-.auth-card-wrapper {
-  width: 100%;
-  max-width: 360px;
+ev-card {
+  padding: 3rem 2.5rem;
+  box-shadow:
+    0 20px 25px -5px rgba(0, 0, 0, 0.06),
+    0 8px 10px -6px rgba(0, 0, 0, 0.04);
 }
 
 .auth-logo {
   display: block;
-  height: 48px;
-  margin: 0 auto 1rem;
+  height: 64px;
+  margin: 0 auto 1.5rem;
 }
 
 h1 {
   margin: 0;
-  font-size: 1.5rem;
+  font-size: 1.85rem;
   font-weight: 700;
   color: var(--color-text);
   text-align: center;
 }
 
 .auth-subtitle {
-  margin: 0.25rem 0 1.5rem;
+  margin: 0.4rem 0 2rem;
   color: var(--color-text-muted);
-  font-size: 0.9rem;
+  font-size: 0.95rem;
   line-height: 1.4;
   text-align: center;
 }
@@ -40,5 +34,5 @@ ev-alert {
 
 ev-button {
   display: block;
-  margin-top: 1.5rem;
+  margin-top: 1.75rem;
 }
diff --git a/apps/frontend/src/app/features/auth/login/login.html b/apps/frontend/src/app/features/auth/login/login.html
index 89e67fe..c18a054 100644
--- a/apps/frontend/src/app/features/auth/login/login.html
+++ b/apps/frontend/src/app/features/auth/login/login.html
@@ -1,7 +1,7 @@
 <div class="auth-page">
   <form class="auth-card-wrapper" [formGroup]="form" (ngSubmit)="onSubmit()">
     <ev-card>
-      <img src="logo.png" alt="EnerVision" class="auth-logo" />
+      <img src="/logo.png" alt="EnerVision" class="auth-logo" />
       <h1>Connexion</h1>
       <p class="auth-subtitle">Accédez à votre espace EnerVision</p>
 
diff --git a/apps/frontend/src/app/features/auth/login/login.scss b/apps/frontend/src/app/features/auth/login/login.scss
index 46cc393..1d41d42 100644
--- a/apps/frontend/src/app/features/auth/login/login.scss
+++ b/apps/frontend/src/app/features/auth/login/login.scss
@@ -1,34 +1,28 @@
-:host {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 100vh;
-  background: var(--color-bg);
-}
-
-.auth-card-wrapper {
-  width: 100%;
-  max-width: 360px;
+ev-card {
+  padding: 3rem 2.5rem;
+  box-shadow:
+    0 20px 25px -5px rgba(0, 0, 0, 0.06),
+    0 8px 10px -6px rgba(0, 0, 0, 0.04);
 }
 
 .auth-logo {
   display: block;
-  height: 48px;
-  margin: 0 auto 1rem;
+  height: 64px;
+  margin: 0 auto 1.5rem;
 }
 
 h1 {
   margin: 0;
-  font-size: 1.5rem;
+  font-size: 1.85rem;
   font-weight: 700;
   color: var(--color-text);
   text-align: center;
 }
 
 .auth-subtitle {
-  margin: 0.25rem 0 1.5rem;
+  margin: 0.4rem 0 2rem;
   color: var(--color-text-muted);
-  font-size: 0.9rem;
+  font-size: 0.95rem;
   text-align: center;
 }
 
@@ -39,5 +33,5 @@ ev-alert {
 
 ev-button {
   display: block;
-  margin-top: 1.5rem;
+  margin-top: 1.75rem;
 }
diff --git a/apps/frontend/src/app/features/dashboard/dashboard.html b/apps/frontend/src/app/features/dashboard/dashboard.html
index 533f0e3..fe51bae 100644
--- a/apps/frontend/src/app/features/dashboard/dashboard.html
+++ b/apps/frontend/src/app/features/dashboard/dashboard.html
@@ -1,7 +1,7 @@
 <div class="dashboard">
   <header class="dashboard__header">
     <div class="dashboard__brand">
-      <img src="logo.png" alt="EnerVision" class="dashboard__logo" />
+      <img src="/logo.png" alt="EnerVision" class="dashboard__logo" />
       <div>
         <h1>Vue d'ensemble</h1>
         <p class="dashboard__subtitle">Consommation instantanée du parc</p>
diff --git a/apps/frontend/src/index.html b/apps/frontend/src/index.html
index 71cdfcc..2c75ae4 100644
--- a/apps/frontend/src/index.html
+++ b/apps/frontend/src/index.html
@@ -2,10 +2,10 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <title>Frontend</title>
+    <title>EnerVision</title>
     <base href="/" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
   </head>
   <body>
     <app-root></app-root>
diff --git a/apps/frontend/src/styles.scss b/apps/frontend/src/styles.scss
index 0d45801..eca57a0 100644
--- a/apps/frontend/src/styles.scss
+++ b/apps/frontend/src/styles.scss
@@ -1,5 +1,6 @@
 @use 'styles/tokens';
 @use 'styles/forms';
+@use 'styles/auth-page';
 
 body {
   margin: 0;
diff --git a/apps/frontend/src/styles/_auth-page.scss b/apps/frontend/src/styles/_auth-page.scss
new file mode 100644
index 0000000..1c9c0a3
--- /dev/null
+++ b/apps/frontend/src/styles/_auth-page.scss
@@ -0,0 +1,16 @@
+.auth-page {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  padding: var(--space-4);
+  box-sizing: border-box;
+  background: radial-gradient(circle at 15% 10%, var(--color-primary-light) 0%, transparent 45%),
+    radial-gradient(circle at 85% 90%, var(--color-primary-light) 0%, transparent 40%),
+    var(--color-bg);
+}
+
+.auth-card-wrapper {
+  width: 100%;
+  max-width: 420px;
+}
diff --git a/docs/architecture/32-design-systeme-frontend.md b/docs/architecture/32-design-systeme-frontend.md
index d2324e9..a196181 100644
--- a/docs/architecture/32-design-systeme-frontend.md
+++ b/docs/architecture/32-design-systeme-frontend.md
@@ -29,6 +29,11 @@ s'appliquent directement à des `<label>`/`<input>` natifs liés par `formContro
 composant `ControlValueAccessor` dédié, le gain n'en vaut pas la complexité pour des formulaires
 aussi simples que ceux de ce projet.
 
+La classe `.auth-page` (`apps/frontend/src/styles/_auth-page.scss`, importée globalement) porte
+le fond dégradé et le centrage commun aux pages d'authentification (`login`, `change-password`,
+et à terme `forgot-password`/`reset-password`) : elle enveloppe la carte, pas de duplication du
+fond par page.
+
 ## Composants partagés
 
 Dans `apps/frontend/src/app/shared/components/ui/`, chacun standalone, à importer directement