Merge branch 'dev' into feat/sonar-dashboard

2026-09-18 09:52:27 +02:00
parent 19cfac1cff 3cf9194d4c
commit c8383014a8
133 changed files with 7172 additions and 379 deletions
@@ -76,6 +76,13 @@ Points à vérifier après toute regénération :
   côté backend. Le `docker-compose.yml` n'a aucun service frontend.
 4. Ajouter le `Dockerfile` multi-stage (build Angular puis service statique nginx).

+## Design système
+
+Tokens (couleurs, typo, espacements) et composants partagés (`ev-button`, `ev-card`,
+`ev-alert`, `ev-badge`) sont documentés dans
+[`docs/architecture/32-design-systeme-frontend.md`](../../docs/architecture/32-design-systeme-frontend.md).
+Toute nouvelle page doit les réutiliser plutôt que définir ses propres valeurs.
+
 ## Additional Resources

 For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
@@ -5,9 +5,24 @@ export const routes: Routes = [
  { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
  { path: 'login', loadComponent: () => import('./features/auth/login/login').then(m => m.Login) },
  { path: 'change-password', loadComponent: () => import('./features/auth/change-password/change-password').then(m => m.ChangePassword) },
+  { path: 'forgot-password', loadComponent: () => import('./features/auth/forgot-password/forgot-password').then(m => m.ForgotPassword) },
+  { path: 'reset-password', loadComponent: () => import('./features/auth/reset-password/reset-password').then(m => m.ResetPassword) },
  {
    path: 'dashboard',
    canActivate: [authGuard],
    loadComponent: () => import('./features/dashboard/dashboard').then(m => m.Dashboard),
  },
+  {
+    path: 'sites',
+    canActivate: [authGuard],
+    loadComponent: () => import('./features/sites/site-list/site-list').then(m => m.SiteList),
+  },
+  {
+    path: 'sites/:siteId',
+    canActivate: [authGuard],
+    loadComponent: () =>
+      import('./features/sites/site-detail-placeholder/site-detail-placeholder').then(
+        (m) => m.SiteDetailPlaceholder,
+      ),
+  },
 ];
@@ -41,7 +41,10 @@ describe('authInterceptor', () => {
    httpMock = TestBed.inject(HttpTestingController);
  });

-  afterEach(() => httpMock.verify());
+  afterEach(() => {
+    httpMock.verify();
+    vi.restoreAllMocks();
+  });

  it('ajoute le header Authorization quand un token est disponible', () => {
    http.get('/api/v1/stats/summary').subscribe();
@@ -97,6 +100,19 @@ describe('authInterceptor', () => {
    expect(routerMock.navigate).toHaveBeenCalledWith(['/login']);
  });

+  it("ne redirige pas vers /login sur un 401 de /auth/refresh si on est déjà sur /reset-password", () => {
+    vi.spyOn(window, 'location', 'get').mockReturnValue({
+      pathname: '/reset-password',
+    } as Location);
+
+    http.post('/api/v1/auth/refresh', {}).subscribe({ error: () => {} });
+    const req = httpMock.expectOne('/api/v1/auth/refresh');
+    req.flush({}, { status: 401, statusText: 'Unauthorized' });
+
+    expect(authMock.clearSession).toHaveBeenCalled();
+    expect(routerMock.navigate).not.toHaveBeenCalled();
+  });
+
  it('rafraîchit puis rejoue la requête sur un 401 avec error="expired"', () => {
    authMock.refreshShared.mockReturnValue(of({ access_token: 'new-token' }));
    authMock.getAccessToken.mockReturnValueOnce('old-token').mockReturnValue('new-token');
@@ -11,6 +11,16 @@ function parseAuthError(response: HttpErrorResponse): string | null {
  return match ? match[1] : null;
 }

+const ROUTES_INVITEES = ['/login', '/forgot-password', '/reset-password'];
+
+// Piège : le rafraîchissement de session lancé au démarrage de l'app (provideAppInitializer)
+// échoue silencieusement sans cookie valide. `window.location.pathname` (pas `router.url`,
+// pas encore fiable à ce stade) évite qu'un 401 de fond écrase la navigation vers le lien de
+// reset reçu par email.
+function surRouteInvitee(): boolean {
+  return ROUTES_INVITEES.some((chemin) => window.location.pathname.startsWith(chemin));
+}
+
 export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const auth = inject(AuthService);
  const router = inject(Router);
@@ -43,7 +53,9 @@ export const authInterceptor: HttpInterceptorFn = (req, next) => {

      if (req.url.endsWith('/auth/refresh')) {
        auth.clearSession();
-        router.navigate(['/login']);
+        if (!surRouteInvitee()) {
+          router.navigate(['/login']);
+        }
        return throwError(() => error);
      }

@@ -51,7 +63,9 @@ export const authInterceptor: HttpInterceptorFn = (req, next) => {

      if (kind === 'invalid_token') {
        auth.clearSession();
-        router.navigate(['/login']);
+        if (!surRouteInvitee()) {
+          router.navigate(['/login']);
+        }
        return throwError(() => error);
      }

@@ -65,7 +79,9 @@ export const authInterceptor: HttpInterceptorFn = (req, next) => {
          }),
          catchError((refreshError) => {
            auth.clearSession();
-            router.navigate(['/login']);
+            if (!surRouteInvitee()) {
+              router.navigate(['/login']);
+            }
            return throwError(() => refreshError);
          })
        );
@@ -83,4 +83,17 @@ describe('AuthService', () => {

  expect(result).toEqual(tokenResponse.principal);
 });
+
+  it('vérifie la validité du jeton de reset via GET /auth/reset-password/validate', () => {
+    let result: { valid: boolean } | undefined;
+    service.validateResetToken('un-secret-opaque').subscribe((r) => (result = r));
+
+    const req = httpMock.expectOne(
+      `${environment.apiUrl}/auth/reset-password/validate?token=un-secret-opaque`
+    );
+    expect(req.request.method).toBe('GET');
+    req.flush({ valid: true });
+
+    expect(result).toEqual({ valid: true });
+  });
 });
@@ -1,7 +1,14 @@
 import { Service, signal, computed, inject } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { Observable, tap, finalize, shareReplay } from 'rxjs';
-import { LoginRequest, PasswordChangeRequest, Principal, TokenResponse } from '../../shared/models/auth.model';
+import {
+  ForgotPasswordRequest,
+  LoginRequest,
+  PasswordChangeRequest,
+  Principal,
+  ResetPasswordRequest,
+  TokenResponse,
+} from '../../shared/models/auth.model';
 import { environment } from '../../../environments/environment';

@Service()
@@ -66,4 +73,20 @@ export class AuthService {
  me(): Observable<Principal> {
    return this.http.get<Principal>(`${environment.apiUrl}/auth/me`);
  }
+
+  forgotPassword(payload: ForgotPasswordRequest): Observable<void> {
+    return this.http.post<void>(`${environment.apiUrl}/auth/forgot-password`, payload);
+  }
+
+  resetPassword(payload: ResetPasswordRequest): Observable<TokenResponse> {
+    return this.http
+      .post<TokenResponse>(`${environment.apiUrl}/auth/reset-password`, payload, { withCredentials: true })
+      .pipe(tap((response) => this.setSession(response)));
+  }
+
+  validateResetToken(token: string): Observable<{ valid: boolean }> {
+    return this.http.get<{ valid: boolean }>(`${environment.apiUrl}/auth/reset-password/validate`, {
+      params: { token },
+    });
+  }
 }
@@ -0,0 +1,41 @@
+import { TestBed } from '@angular/core/testing';
+import { provideHttpClient } from '@angular/common/http';
+import { provideHttpClientTesting, HttpTestingController } from '@angular/common/http/testing';
+import { SitesService } from './sites.service';
+import { environment } from '../../../environments/environment';
+
+describe('SitesService', () => {
+  let service: SitesService;
+  let httpMock: HttpTestingController;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [provideHttpClient(), provideHttpClientTesting()],
+    });
+    service = TestBed.inject(SitesService);
+    httpMock = TestBed.inject(HttpTestingController);
+  });
+
+  afterEach(() => httpMock.verify());
+
+  it('appelle le bon endpoint et retourne la liste des sites', () => {
+    let result: unknown;
+    service.getSites().subscribe((r) => (result = r));
+
+    const req = httpMock.expectOne(`${environment.apiUrl}/sites`);
+    expect(req.request.method).toBe('GET');
+
+    req.flush([
+      {
+        site_id: 'SITE001',
+        site_name: 'Site 1',
+        site_type: 'industriel',
+        location: 'Nantes',
+        capacity_kw: 500,
+        status: 'actif',
+      },
+    ]);
+
+    expect((result as { site_id: string }[])[0].site_id).toBe('SITE001');
+  });
+});
@@ -0,0 +1,13 @@
+import { Service, inject } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { environment } from '../../../environments/environment';
+import { Site } from '../../shared/models/site.model';
+
+@Service()
+export class SitesService {
+  private http = inject(HttpClient);
+
+  getSites() {
+    return this.http.get<Site[]>(`${environment.apiUrl}/sites`);
+  }
+}
@@ -1,31 +1,38 @@
 <div class="auth-page">
-  <form class="auth-card" [formGroup]="form" (ngSubmit)="onSubmit()">
-    <h1>Nouveau mot de passe</h1>
-    <p class="auth-subtitle">Votre mot de passe est provisoire, vous devez le modifier avant de continuer</p>
+  <form class="auth-card-wrapper" [formGroup]="form" (ngSubmit)="onSubmit()">
+    <ev-card>
+      <ev-brand class="auth-brand" />
+      <h1>Nouveau mot de passe</h1>
+      <p class="auth-subtitle">
+        Votre mot de passe est provisoire, vous devez le modifier avant de continuer
+      </p>

-    <label for="current_password">Mot de passe actuel</label>
-    <input
-      id="current_password"
-      type="password"
-      formControlName="current_password"
-      autocomplete="current-password"
-    />
+      <label class="form-label" for="current_password">Mot de passe actuel</label>
+      <input
+        id="current_password"
+        class="form-input"
+        type="password"
+        formControlName="current_password"
+        autocomplete="current-password"
+      />

-    <label for="new_password">Nouveau mot de passe</label>
-    <input
-      id="new_password"
-      type="password"
-      formControlName="new_password"
-      autocomplete="new-password"
-    />
-    <span class="auth-hint">12 à 128 caractères</span>
+      <label class="form-label" for="new_password">Nouveau mot de passe</label>
+      <input
+        id="new_password"
+        class="form-input"
+        type="password"
+        formControlName="new_password"
+        autocomplete="new-password"
+      />
+      <span class="form-hint">{{ passwordHint }}</span>

-    @if (errorMessage()) {
-      <p class="auth-error">{{ errorMessage() }}</p>
-    }
+      @if (errorMessage()) {
+        <ev-alert severity="danger">{{ errorMessage() }}</ev-alert>
+      }

-    <button type="submit" [disabled]="form.invalid || isLoading()">
-      {{ isLoading() ? 'Modification...' : 'Valider' }}
-    </button>
+      <ev-button type="submit" [disabled]="form.invalid || isLoading()">
+        {{ isLoading() ? 'Modification...' : 'Valider' }}
+      </ev-button>
+    </ev-card>
  </form>
 </div>
@@ -1,88 +0,0 @@
-:host {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 100vh;
-  background: #f3f4f6;
-  font-family: 'Segoe UI', system-ui, sans-serif;
-}
-
-.auth-card {
-  background: #ffffff;
-  border: 1px solid #e5e7eb;
-  border-radius: 12px;
-  padding: 2.5rem;
-  width: 100%;
-  max-width: 360px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
-  display: flex;
-  flex-direction: column;
-
-  h1 {
-    margin: 0;
-    font-size: 1.5rem;
-    font-weight: 700;
-    color: #1f2937;
-  }
-
-  .auth-subtitle {
-    margin: 0.25rem 0 1.5rem;
-    color: #6b7280;
-    font-size: 0.9rem;
-    line-height: 1.4;
-  }
-
-  label {
-    font-size: 0.85rem;
-    font-weight: 600;
-    color: #374151;
-    margin-bottom: 0.35rem;
-    margin-top: 1rem;
-  }
-
-  input {
-    padding: 0.6rem 0.75rem;
-    border: 1px solid #d1d5db;
-    border-radius: 8px;
-    font-size: 0.95rem;
-
-    &:focus {
-      outline: none;
-      border-color: #3b82f6;
-      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
-    }
-  }
-
-  button {
-    margin-top: 1.5rem;
-    padding: 0.7rem;
-    background: #3b82f6;
-    color: #fff;
-    border: none;
-    border-radius: 8px;
-    font-size: 0.95rem;
-    font-weight: 600;
-    cursor: pointer;
-
-    &:disabled {
-      background: #9ca3af;
-      cursor: not-allowed;
-    }
-
-    &:not(:disabled):hover {
-      background: #2563eb;
-    }
-  }
-}
-
-.auth-hint {
-  font-size: 0.75rem;
-  color: #9ca3af;
-  margin-top: 0.25rem;
-}
-
-.auth-error {
-  margin: 0.75rem 0 0;
-  color: #dc2626;
-  font-size: 0.85rem;
-}
@@ -32,10 +32,19 @@ describe('ChangePassword', () => {
    expect(authMock.changePassword).not.toHaveBeenCalled();
  });

+  it('ne soumet pas si le mot de passe ne couvre pas les 4 classes de caractères', () => {
+    const fixture = TestBed.createComponent(ChangePassword);
+    const component = fixture.componentInstance;
+    component.form.setValue({ current_password: 'old', new_password: 'longueur-suffisante-sans-majuscule-ni-chiffre' });
+
+    component.onSubmit();
+    expect(authMock.changePassword).not.toHaveBeenCalled();
+  });
+
  it('redirige vers /dashboard après un changement réussi', () => {
    const fixture = TestBed.createComponent(ChangePassword);
    const component = fixture.componentInstance;
-    component.form.setValue({ current_password: 'ancien-mot-de-passe', new_password: 'un-nouveau-mot-de-passe-valide' });
+    component.form.setValue({ current_password: 'ancien-mot-de-passe', new_password: 'Un-nouveau-mot-de-passe1!' });

    authMock.changePassword.mockReturnValue(of({ principal: { role: 'admin' } }));

@@ -46,7 +55,7 @@ describe('ChangePassword', () => {
  it("affiche un message d'erreur si le mot de passe actuel est incorrect", () => {
  const fixture = TestBed.createComponent(ChangePassword);
  const component = fixture.componentInstance;
-  component.form.setValue({ current_password: 'mauvais-mot-de-passe', new_password: 'un-nouveau-mot-de-passe-valide' });
+  component.form.setValue({ current_password: 'mauvais-mot-de-passe', new_password: 'Un-nouveau-mot-de-passe1!' });

  authMock.changePassword.mockReturnValue(throwError(() => new Error('401')));

@@ -54,7 +63,7 @@ describe('ChangePassword', () => {
  fixture.detectChanges(); // rend le bloc @if (errorMessage())

  expect(component.errorMessage()).toContain('incorrect');
-  const errorEl = fixture.nativeElement.querySelector('.auth-error');
+  const errorEl = fixture.nativeElement.querySelector('.ev-alert');
  expect(errorEl?.textContent).toContain('incorrect');
  });

@@ -64,13 +73,13 @@ describe('ChangePassword', () => {

  const button = fixture.nativeElement.querySelector('button[type="submit"]');
  expect(button.disabled).toBe(true);
-  expect(fixture.nativeElement.querySelector('.auth-error')).toBeNull();
+  expect(fixture.nativeElement.querySelector('.ev-alert')).toBeNull();
  });

  it('déclenche onSubmit via la soumission réelle du formulaire (ngSubmit)', () => {
  const fixture = TestBed.createComponent(ChangePassword);
  const component = fixture.componentInstance;
-  component.form.setValue({ current_password: 'ancien-mot-de-passe', new_password: 'un-nouveau-mot-de-passe-valide' });
+  component.form.setValue({ current_password: 'ancien-mot-de-passe', new_password: 'Un-nouveau-mot-de-passe1!' });
  fixture.detectChanges();

  authMock.changePassword.mockReturnValue(of({ principal: { role: 'admin' } }));
@@ -81,7 +90,7 @@ describe('ChangePassword', () => {

  expect(authMock.changePassword).toHaveBeenCalledWith({
    current_password: 'ancien-mot-de-passe',
-    new_password: 'un-nouveau-mot-de-passe-valide',
+    new_password: 'Un-nouveau-mot-de-passe1!',
  });
 });

@@ -2,11 +2,16 @@ import { Component, inject, signal } from '@angular/core';
 import { ReactiveFormsModule, FormBuilder, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
 import { AuthService } from '../../../core/services/auth.service';
+import { Button } from '../../../shared/components/ui/button/button';
+import { Card } from '../../../shared/components/ui/card/card';
+import { Alert } from '../../../shared/components/ui/alert/alert';
+import { Brand } from '../../../shared/components/ui/brand/brand';
+import { passwordValidators, PASSWORD_HINT } from '../../../shared/validators/password.validator';

@Component({
  selector: 'app-change-password',
  standalone: true,
-  imports: [ReactiveFormsModule],
+  imports: [ReactiveFormsModule, Button, Card, Alert, Brand],
  templateUrl: './change-password.html',
  styleUrl: './change-password.scss',
 })
@@ -17,10 +22,11 @@ export class ChangePassword {

  errorMessage = signal<string | null>(null);
  isLoading = signal(false);
+  passwordHint = PASSWORD_HINT;

  form = this.fb.nonNullable.group({
    current_password: ['', Validators.required],
-    new_password: ['', [Validators.required, Validators.minLength(12), Validators.maxLength(128)]],
+    new_password: ['', passwordValidators],
  });

  onSubmit(): void {
@@ -34,7 +40,9 @@ export class ChangePassword {
      },
      error: () => {
        this.isLoading.set(false);
-        this.errorMessage.set('Mot de passe actuel incorrect, ou nouveau mot de passe invalide (12 à 128 caractères).');
+        this.errorMessage.set(
+          `Mot de passe actuel incorrect, ou nouveau mot de passe invalide (${this.passwordHint}).`,
+        );
      },
    });
  }
@@ -0,0 +1,37 @@
+<div class="auth-page">
+  <form class="auth-card" [formGroup]="form" (ngSubmit)="onSubmit()">
+    <h1>Mot de passe oublié</h1>
+    <p class="auth-subtitle">Recevez un lien de réinitialisation par email</p>
+
+    @if (submitted()) {
+      <p class="auth-success">
+        Si un compte existe pour cet email, un lien de réinitialisation vient d'être envoyé.
+        Il expire dans 15 minutes.
+      </p>
+    } @else {
+      <label for="email">Email</label>
+      <input
+        id="email"
+        type="email"
+        formControlName="email"
+        autocomplete="username"
+        placeholder="vous@enervision.fr"
+      />
+
+      @if (errorMessage()) {
+        <p class="auth-error">
+          {{ errorMessage() }}
+          @if (retryAfterSeconds(); as seconds) {
+            (réessayez dans {{ seconds }}s)
+          }
+        </p>
+      }
+
+      <button type="submit" [disabled]="form.invalid || isLoading()">
+        {{ isLoading() ? 'Envoi...' : 'Envoyer le lien' }}
+      </button>
+    }
+
+    <p class="auth-link"><a routerLink="/login">Retour à la connexion</a></p>
+  </form>
+</div>
@@ -0,0 +1,104 @@
+:host {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  background: #f3f4f6;
+  font-family: 'Segoe UI', system-ui, sans-serif;
+}
+
+.auth-card {
+  background: #ffffff;
+  border: 1px solid #e5e7eb;
+  border-radius: 12px;
+  padding: 2.5rem;
+  width: 100%;
+  max-width: 360px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+  display: flex;
+  flex-direction: column;
+
+  h1 {
+    margin: 0;
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: #1f2937;
+  }
+
+  .auth-subtitle {
+    margin: 0.25rem 0 1.5rem;
+    color: #6b7280;
+    font-size: 0.9rem;
+    line-height: 1.4;
+  }
+
+  label {
+    font-size: 0.85rem;
+    font-weight: 600;
+    color: #374151;
+    margin-bottom: 0.35rem;
+    margin-top: 1rem;
+  }
+
+  input {
+    padding: 0.6rem 0.75rem;
+    border: 1px solid #d1d5db;
+    border-radius: 8px;
+    font-size: 0.95rem;
+
+    &:focus {
+      outline: none;
+      border-color: #3b82f6;
+      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
+    }
+  }
+
+  button {
+    margin-top: 1.5rem;
+    padding: 0.7rem;
+    background: #3b82f6;
+    color: #fff;
+    border: none;
+    border-radius: 8px;
+    font-size: 0.95rem;
+    font-weight: 600;
+    cursor: pointer;
+
+    &:disabled {
+      background: #9ca3af;
+      cursor: not-allowed;
+    }
+
+    &:not(:disabled):hover {
+      background: #2563eb;
+    }
+  }
+}
+
+.auth-hint {
+  font-size: 0.75rem;
+  color: #9ca3af;
+  margin-top: 0.25rem;
+}
+
+.auth-error {
+  margin: 0.75rem 0 0;
+  color: #dc2626;
+  font-size: 0.85rem;
+}
+
+.auth-success {
+  margin: 0.75rem 0 0;
+  color: #16a34a;
+  font-size: 0.85rem;
+}
+
+.auth-link {
+  margin-top: 1rem;
+  font-size: 0.85rem;
+  text-align: center;
+
+  a {
+    color: #3b82f6;
+  }
+}
@@ -0,0 +1,75 @@
+import { TestBed } from '@angular/core/testing';
+import { ReactiveFormsModule } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+import { HttpErrorResponse, HttpHeaders } from '@angular/common/http';
+import { of, throwError } from 'rxjs';
+import { vi } from 'vitest';
+import { ForgotPassword } from './forgot-password';
+import { AuthService } from '../../../core/services/auth.service';
+
+describe('ForgotPassword', () => {
+  let authMock: { forgotPassword: ReturnType<typeof vi.fn> };
+  let routerMock: { navigate: ReturnType<typeof vi.fn> };
+
+  beforeEach(async () => {
+    authMock = { forgotPassword: vi.fn() };
+    routerMock = { navigate: vi.fn() };
+
+    await TestBed.configureTestingModule({
+      imports: [ForgotPassword, ReactiveFormsModule],
+      providers: [
+        { provide: AuthService, useValue: authMock },
+        { provide: Router, useValue: routerMock },
+        { provide: ActivatedRoute, useValue: {} },
+      ],
+    }).compileComponents();
+  });
+
+  it('ne soumet pas si le formulaire est invalide', () => {
+    const fixture = TestBed.createComponent(ForgotPassword);
+    fixture.componentInstance.onSubmit();
+    expect(authMock.forgotPassword).not.toHaveBeenCalled();
+  });
+
+  it('affiche le message générique après une soumission réussie', () => {
+    const fixture = TestBed.createComponent(ForgotPassword);
+    const component = fixture.componentInstance;
+    component.form.setValue({ email: 'operateur@enervision.fr' });
+    authMock.forgotPassword.mockReturnValue(of(undefined));
+
+    component.onSubmit();
+
+    expect(component.submitted()).toBe(true);
+  });
+
+  it('affiche le même message générique même quand le serveur répond une erreur autre que 429', () => {
+    const fixture = TestBed.createComponent(ForgotPassword);
+    const component = fixture.componentInstance;
+    component.form.setValue({ email: 'inconnu@enervision.fr' });
+    authMock.forgotPassword.mockReturnValue(throwError(() => new HttpErrorResponse({ status: 500 })));
+
+    component.onSubmit();
+
+    expect(component.submitted()).toBe(true);
+  });
+
+  it('affiche le délai à respecter quand le taux limite est atteint', () => {
+    const fixture = TestBed.createComponent(ForgotPassword);
+    const component = fixture.componentInstance;
+    component.form.setValue({ email: 'operateur@enervision.fr' });
+    authMock.forgotPassword.mockReturnValue(
+      throwError(
+        () =>
+          new HttpErrorResponse({
+            status: 429,
+            headers: new HttpHeaders({ 'Retry-After': '900' }),
+          })
+      )
+    );
+
+    component.onSubmit();
+
+    expect(component.submitted()).toBe(false);
+    expect(component.retryAfterSeconds()).toBe(900);
+  });
+});
@@ -0,0 +1,53 @@
+import { Component, inject, signal } from '@angular/core';
+import { ReactiveFormsModule, FormBuilder, Validators } from '@angular/forms';
+import { RouterLink } from '@angular/router';
+import { HttpErrorResponse } from '@angular/common/http';
+import { AuthService } from '../../../core/services/auth.service';
+
+@Component({
+  selector: 'app-forgot-password',
+  standalone: true,
+  imports: [ReactiveFormsModule, RouterLink],
+  templateUrl: './forgot-password.html',
+  styleUrl: './forgot-password.scss',
+})
+export class ForgotPassword {
+  private fb = inject(FormBuilder);
+  private auth = inject(AuthService);
+
+  errorMessage = signal<string | null>(null);
+  retryAfterSeconds = signal<number | null>(null);
+  submitted = signal(false);
+  isLoading = signal(false);
+
+  form = this.fb.nonNullable.group({
+    email: ['', [Validators.required, Validators.email]],
+  });
+
+  onSubmit(): void {
+    if (this.form.invalid) return;
+
+    this.isLoading.set(true);
+    this.errorMessage.set(null);
+    this.retryAfterSeconds.set(null);
+
+    this.auth.forgotPassword(this.form.getRawValue()).subscribe({
+      // Le message affiché ne dépend jamais du fait que le compte existe ou non : la réponse
+      // du serveur est déjà générique, l'écran doit l'être aussi.
+      next: () => {
+        this.isLoading.set(false);
+        this.submitted.set(true);
+      },
+      error: (error: HttpErrorResponse) => {
+        this.isLoading.set(false);
+        if (error.status === 429) {
+          const retryAfter = error.headers.get('Retry-After');
+          this.retryAfterSeconds.set(retryAfter ? Number(retryAfter) : null);
+          this.errorMessage.set('Trop de demandes, réessayez plus tard.');
+          return;
+        }
+        this.submitted.set(true);
+      },
+    });
+  }
+}
@@ -1,36 +1,43 @@
 <div class="auth-page">
-  <form class="auth-card" [formGroup]="form" (ngSubmit)="onSubmit()">
-    <h1>Connexion</h1>
-    <p class="auth-subtitle">Accédez à votre espace EnerVision</p>
+  <form class="auth-card-wrapper" [formGroup]="form" (ngSubmit)="onSubmit()">
+    <ev-card>
+      <ev-brand class="auth-brand" />
+      <h1>Connexion</h1>
+      <p class="auth-subtitle">Accédez à votre espace EnerVision</p>

-    <label for="email">Email</label>
-    <input
-      id="email"
-      type="email"
-      formControlName="email"
-      autocomplete="username"
-      placeholder="vous@enervision.fr"
-    />
+      <label class="form-label" for="email">Email</label>
+      <input
+        id="email"
+        class="form-input"
+        type="email"
+        formControlName="email"
+        autocomplete="username"
+        placeholder="vous@enervision.fr"
+      />

-    <label for="password">Mot de passe</label>
-    <input
-      id="password"
-      type="password"
-      formControlName="password"
-      autocomplete="current-password"
-    />
+      <label class="form-label" for="password">Mot de passe</label>
+      <input
+        id="password"
+        class="form-input"
+        type="password"
+        formControlName="password"
+        autocomplete="current-password"
+      />

-    @if (errorMessage()) {
-      <p class="auth-error">
-        {{ errorMessage() }}
-        @if (retryAfterSeconds(); as seconds) {
-          (réessayez dans {{ seconds }}s)
-        }
-      </p>
-    }
+      @if (errorMessage()) {
+        <ev-alert severity="danger">
+          {{ errorMessage() }}
+          @if (retryAfterSeconds(); as seconds) {
+            (réessayez dans {{ seconds }}s)
+          }
+        </ev-alert>
+      }

-    <button type="submit" [disabled]="form.invalid || isLoading()">
-      {{ isLoading() ? 'Connexion...' : 'Se connecter' }}
-    </button>
+      <ev-button type="submit" [disabled]="form.invalid || isLoading()">
+        {{ isLoading() ? 'Connexion...' : 'Se connecter' }}
+      </ev-button>
+
+      <p class="auth-link"><a routerLink="/forgot-password">Mot de passe oublié ?</a></p>
+    </ev-card>
  </form>
 </div>
@@ -1,81 +1,9 @@
-:host {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 100vh;
-  background: #f3f4f6;
-  font-family: 'Segoe UI', system-ui, sans-serif;
-}
-
-.auth-card {
-  background: #ffffff;
-  border: 1px solid #e5e7eb;
-  border-radius: 12px;
-  padding: 2.5rem;
-  width: 100%;
-  max-width: 360px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
-  display: flex;
-  flex-direction: column;
-
-  h1 {
-    margin: 0;
-    font-size: 1.5rem;
-    font-weight: 700;
-    color: #1f2937;
-  }
-
-  .auth-subtitle {
-    margin: 0.25rem 0 1.5rem;
-    color: #6b7280;
-    font-size: 0.9rem;
-  }
-
-  label {
-    font-size: 0.85rem;
-    font-weight: 600;
-    color: #374151;
-    margin-bottom: 0.35rem;
-    margin-top: 1rem;
-  }
-
-  input {
-    padding: 0.6rem 0.75rem;
-    border: 1px solid #d1d5db;
-    border-radius: 8px;
-    font-size: 0.95rem;
-
-    &:focus {
-      outline: none;
-      border-color: #3b82f6;
-      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
-    }
-  }
-
-  button {
-    margin-top: 1.5rem;
-    padding: 0.7rem;
-    background: #3b82f6;
-    color: #fff;
-    border: none;
-    border-radius: 8px;
-    font-size: 0.95rem;
-    font-weight: 600;
-    cursor: pointer;
-
-    &:disabled {
-      background: #9ca3af;
-      cursor: not-allowed;
-    }
-
-    &:not(:disabled):hover {
-      background: #2563eb;
-    }
-  }
-}
-
-.auth-error {
-  margin: 0.75rem 0 0;
-  color: #dc2626;
+.auth-link {
+  margin-top: 1rem;
  font-size: 0.85rem;
+  text-align: center;
+
+  a {
+    color: #3b82f6;
+  }
 }
@@ -1,27 +1,43 @@
 import { TestBed } from '@angular/core/testing';
 import { ReactiveFormsModule } from '@angular/forms';
-import { Router } from '@angular/router';
+import { ActivatedRoute, convertToParamMap, Router } from '@angular/router';
 import { HttpErrorResponse, HttpHeaders } from '@angular/common/http';
 import { of, throwError } from 'rxjs';
 import { vi } from 'vitest';
 import { Login } from './login';
 import { AuthService } from '../../../core/services/auth.service';
+import { MOTIF_LIEN_RESET_INVALIDE } from '../../../shared/models/auth-redirect-reason';
+
+function configure(queryParams: Record<string, string> = {}) {
+  const authMock = { login: vi.fn() };
+  const routerMock = { navigate: vi.fn() };
+
+  return {
+    authMock,
+    routerMock,
+    testBed: TestBed.configureTestingModule({
+      imports: [Login, ReactiveFormsModule],
+      providers: [
+        { provide: AuthService, useValue: authMock },
+        { provide: Router, useValue: routerMock },
+        {
+          provide: ActivatedRoute,
+          useValue: { snapshot: { queryParamMap: convertToParamMap(queryParams) } },
+        },
+      ],
+    }),
+  };
+}

 describe('Login', () => {
  let authMock: { login: ReturnType<typeof vi.fn> };
  let routerMock: { navigate: ReturnType<typeof vi.fn> };

  beforeEach(async () => {
-    authMock = { login: vi.fn() };
-    routerMock = { navigate: vi.fn() };
-
-    await TestBed.configureTestingModule({
-      imports: [Login, ReactiveFormsModule],
-      providers: [
-        { provide: AuthService, useValue: authMock },
-        { provide: Router, useValue: routerMock },
-      ],
-    }).compileComponents();
+    const attirail = configure();
+    authMock = attirail.authMock;
+    routerMock = attirail.routerMock;
+    await attirail.testBed.compileComponents();
  });

  it('ne soumet pas si le formulaire est invalide', () => {
@@ -63,7 +79,7 @@ describe('Login', () => {
  fixture.detectChanges(); // rend le bloc @if (errorMessage()) du template

  expect(component.errorMessage()).toBe('Email ou mot de passe incorrect.');
-  const errorEl = fixture.nativeElement.querySelector('.auth-error');
+  const errorEl = fixture.nativeElement.querySelector('.ev-alert');
  expect(errorEl?.textContent).toContain('Email ou mot de passe incorrect.');
  });

@@ -80,17 +96,25 @@ describe('Login', () => {
    fixture.detectChanges(); // rend aussi le sous-bloc @if (retryAfterSeconds(); as seconds)

    expect(component.retryAfterSeconds()).toBe(30);
-    const errorEl = fixture.nativeElement.querySelector('.auth-error');
+    const errorEl = fixture.nativeElement.querySelector('.ev-alert');
    expect(errorEl?.textContent).toContain('30s');
  });

+  it('affiche le message standard quand on arrive avec ?motif=lien-expire', async () => {
+    const attirail = configure({ motif: MOTIF_LIEN_RESET_INVALIDE });
+    await attirail.testBed.compileComponents();
+    const fixture = TestBed.createComponent(Login);
+
+    expect(fixture.componentInstance.errorMessage()).toContain('expiré');
+  });
+
  it('désactive le bouton tant que le formulaire est invalide', () => {
    const fixture = TestBed.createComponent(Login);
    fixture.detectChanges();

    const button = fixture.nativeElement.querySelector('button[type="submit"]');
    expect(button.disabled).toBe(true);
-    expect(fixture.nativeElement.querySelector('.auth-error')).toBeNull();
+    expect(fixture.nativeElement.querySelector('.ev-alert')).toBeNull();
  });

 it('déclenche onSubmit via la soumission réelle du formulaire (ngSubmit)', () => {
@@ -1,13 +1,21 @@
 import { Component, inject, signal } from '@angular/core';
 import { ReactiveFormsModule, FormBuilder, Validators } from '@angular/forms';
-import { Router } from '@angular/router';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { HttpErrorResponse } from '@angular/common/http';
 import { AuthService } from '../../../core/services/auth.service';
+import { Button } from '../../../shared/components/ui/button/button';
+import { Card } from '../../../shared/components/ui/card/card';
+import { Alert } from '../../../shared/components/ui/alert/alert';
+import { Brand } from '../../../shared/components/ui/brand/brand';
+import {
+  MESSAGE_LIEN_RESET_INVALIDE,
+  MOTIF_LIEN_RESET_INVALIDE,
+} from '../../../shared/models/auth-redirect-reason';

@Component({
  selector: 'app-login',
  standalone: true,
-  imports: [ReactiveFormsModule],
+  imports: [ReactiveFormsModule, RouterLink, Button, Card, Alert, Brand],
  templateUrl: './login.html',
  styleUrl: './login.scss',
 })
@@ -15,8 +23,13 @@ export class Login {
  private fb = inject(FormBuilder);
  private auth = inject(AuthService);
  private router = inject(Router);
+  private route = inject(ActivatedRoute);

-  errorMessage = signal<string | null>(null);
+  errorMessage = signal<string | null>(
+    this.route.snapshot.queryParamMap.get('motif') === MOTIF_LIEN_RESET_INVALIDE
+      ? MESSAGE_LIEN_RESET_INVALIDE
+      : null,
+  );
  retryAfterSeconds = signal<number | null>(null);
  isLoading = signal(false);

@@ -0,0 +1,32 @@
+<div class="auth-page">
+  <form class="auth-card" [formGroup]="form" (ngSubmit)="onSubmit()">
+    <h1>Nouveau mot de passe</h1>
+
+    @if (hasToken && !isCheckingToken()) {
+      <p class="auth-subtitle">Choisissez votre nouveau mot de passe</p>
+
+      <label for="new_password">Nouveau mot de passe</label>
+      <input
+        id="new_password"
+        type="password"
+        formControlName="new_password"
+        autocomplete="new-password"
+      />
+      <app-password-requirements [password]="password()" />
+
+      @if (errorMessage()) {
+        <p class="auth-error">{{ errorMessage() }}</p>
+      }
+
+      <button type="submit" [disabled]="form.invalid || isLoading()">
+        {{ isLoading() ? 'Modification...' : 'Valider' }}
+      </button>
+    }
+
+    @if (hasToken && isCheckingToken()) {
+      <p class="auth-subtitle">Vérification du lien...</p>
+    }
+
+    <p class="auth-link"><a routerLink="/forgot-password">Redemander un lien</a></p>
+  </form>
+</div>
@@ -0,0 +1,104 @@
+:host {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  background: #f3f4f6;
+  font-family: 'Segoe UI', system-ui, sans-serif;
+}
+
+.auth-card {
+  background: #ffffff;
+  border: 1px solid #e5e7eb;
+  border-radius: 12px;
+  padding: 2.5rem;
+  width: 100%;
+  max-width: 360px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+  display: flex;
+  flex-direction: column;
+
+  h1 {
+    margin: 0;
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: #1f2937;
+  }
+
+  .auth-subtitle {
+    margin: 0.25rem 0 1.5rem;
+    color: #6b7280;
+    font-size: 0.9rem;
+    line-height: 1.4;
+  }
+
+  label {
+    font-size: 0.85rem;
+    font-weight: 600;
+    color: #374151;
+    margin-bottom: 0.35rem;
+    margin-top: 1rem;
+  }
+
+  input {
+    padding: 0.6rem 0.75rem;
+    border: 1px solid #d1d5db;
+    border-radius: 8px;
+    font-size: 0.95rem;
+
+    &:focus {
+      outline: none;
+      border-color: #3b82f6;
+      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
+    }
+  }
+
+  button {
+    margin-top: 1.5rem;
+    padding: 0.7rem;
+    background: #3b82f6;
+    color: #fff;
+    border: none;
+    border-radius: 8px;
+    font-size: 0.95rem;
+    font-weight: 600;
+    cursor: pointer;
+
+    &:disabled {
+      background: #9ca3af;
+      cursor: not-allowed;
+    }
+
+    &:not(:disabled):hover {
+      background: #2563eb;
+    }
+  }
+}
+
+.auth-hint {
+  font-size: 0.75rem;
+  color: #9ca3af;
+  margin-top: 0.25rem;
+}
+
+.auth-error {
+  margin: 0.75rem 0 0;
+  color: #dc2626;
+  font-size: 0.85rem;
+}
+
+.auth-success {
+  margin: 0.75rem 0 0;
+  color: #16a34a;
+  font-size: 0.85rem;
+}
+
+.auth-link {
+  margin-top: 1rem;
+  font-size: 0.85rem;
+  text-align: center;
+
+  a {
+    color: #3b82f6;
+  }
+}
@@ -0,0 +1,129 @@
+import { TestBed } from '@angular/core/testing';
+import { ReactiveFormsModule } from '@angular/forms';
+import { ActivatedRoute, convertToParamMap, Router } from '@angular/router';
+import { HttpErrorResponse } from '@angular/common/http';
+import { of, throwError } from 'rxjs';
+import { vi } from 'vitest';
+import { ResetPassword } from './reset-password';
+import { AuthService } from '../../../core/services/auth.service';
+import { MOTIF_LIEN_RESET_INVALIDE } from '../../../shared/models/auth-redirect-reason';
+
+function configure(token: string | null) {
+  return TestBed.configureTestingModule({
+    imports: [ResetPassword, ReactiveFormsModule],
+    providers: [
+      {
+        provide: AuthService,
+        useValue: {
+          resetPassword: vi.fn(),
+          validateResetToken: vi.fn().mockReturnValue(of({ valid: true })),
+        },
+      },
+      { provide: Router, useValue: { navigate: vi.fn() } },
+      {
+        provide: ActivatedRoute,
+        useValue: { snapshot: { queryParamMap: convertToParamMap(token ? { token } : {}) } },
+      },
+    ],
+  }).compileComponents();
+}
+
+describe('ResetPassword', () => {
+  it("redirige vers /login avec le motif standard quand le jeton est absent de l'URL", async () => {
+    await configure(null);
+    const fixture = TestBed.createComponent(ResetPassword);
+    const router = TestBed.inject(Router) as unknown as { navigate: ReturnType<typeof vi.fn> };
+
+    fixture.detectChanges();
+
+    expect(fixture.componentInstance.hasToken).toBe(false);
+    expect(router.navigate).toHaveBeenCalledWith(['/login'], {
+      queryParams: { motif: MOTIF_LIEN_RESET_INVALIDE },
+    });
+  });
+
+  it('vérifie le jeton sans le consommer dès le chargement de la page', async () => {
+    await configure('un-secret-opaque');
+    const fixture = TestBed.createComponent(ResetPassword);
+    const auth = TestBed.inject(AuthService) as unknown as { validateResetToken: ReturnType<typeof vi.fn> };
+
+    fixture.detectChanges();
+
+    expect(auth.validateResetToken).toHaveBeenCalledWith('un-secret-opaque');
+    expect(fixture.componentInstance.isCheckingToken()).toBe(false);
+  });
+
+  it('redirige immédiatement vers /login si la vérification signale un jeton invalide', async () => {
+    await configure('un-secret-perime');
+    TestBed.overrideProvider(AuthService, {
+      useValue: { resetPassword: vi.fn(), validateResetToken: vi.fn().mockReturnValue(of({ valid: false })) },
+    });
+    const fixture = TestBed.createComponent(ResetPassword);
+    const router = TestBed.inject(Router) as unknown as { navigate: ReturnType<typeof vi.fn> };
+
+    fixture.detectChanges();
+
+    expect(router.navigate).toHaveBeenCalledWith(['/login'], {
+      queryParams: { motif: MOTIF_LIEN_RESET_INVALIDE },
+    });
+  });
+
+  it('ne soumet pas si le mot de passe ne respecte pas la politique de complexité', async () => {
+    await configure('un-secret-opaque');
+    const fixture = TestBed.createComponent(ResetPassword);
+    const component = fixture.componentInstance;
+    const auth = TestBed.inject(AuthService) as unknown as { resetPassword: ReturnType<typeof vi.fn> };
+    component.form.setValue({ new_password: 'trop-simple' });
+
+    component.onSubmit();
+
+    expect(auth.resetPassword).not.toHaveBeenCalled();
+  });
+
+  it('redirige vers /dashboard après une réinitialisation réussie', async () => {
+    await configure('un-secret-opaque');
+    const fixture = TestBed.createComponent(ResetPassword);
+    const component = fixture.componentInstance;
+    const auth = TestBed.inject(AuthService) as unknown as { resetPassword: ReturnType<typeof vi.fn> };
+    const router = TestBed.inject(Router) as unknown as { navigate: ReturnType<typeof vi.fn> };
+    component.form.setValue({ new_password: 'Un-nouveau-mot-de-passe1!' });
+    auth.resetPassword.mockReturnValue(of({ principal: { role: 'operateur' } }));
+
+    component.onSubmit();
+
+    expect(auth.resetPassword).toHaveBeenCalledWith({
+      token: 'un-secret-opaque',
+      new_password: 'Un-nouveau-mot-de-passe1!',
+    });
+    expect(router.navigate).toHaveBeenCalledWith(['/dashboard']);
+  });
+
+  it('redirige vers /login avec le motif standard quand le lien est invalide ou expiré', async () => {
+    await configure('un-secret-perime');
+    const fixture = TestBed.createComponent(ResetPassword);
+    const component = fixture.componentInstance;
+    const auth = TestBed.inject(AuthService) as unknown as { resetPassword: ReturnType<typeof vi.fn> };
+    const router = TestBed.inject(Router) as unknown as { navigate: ReturnType<typeof vi.fn> };
+    component.form.setValue({ new_password: 'Un-nouveau-mot-de-passe1!' });
+    auth.resetPassword.mockReturnValue(throwError(() => new HttpErrorResponse({ status: 400 })));
+
+    component.onSubmit();
+
+    expect(router.navigate).toHaveBeenCalledWith(['/login'], {
+      queryParams: { motif: MOTIF_LIEN_RESET_INVALIDE },
+    });
+  });
+
+  it('affiche un message générique sur une erreur inattendue (pas 400)', async () => {
+    await configure('un-secret-opaque');
+    const fixture = TestBed.createComponent(ResetPassword);
+    const component = fixture.componentInstance;
+    const auth = TestBed.inject(AuthService) as unknown as { resetPassword: ReturnType<typeof vi.fn> };
+    component.form.setValue({ new_password: 'Un-nouveau-mot-de-passe1!' });
+    auth.resetPassword.mockReturnValue(throwError(() => new HttpErrorResponse({ status: 500 })));
+
+    component.onSubmit();
+
+    expect(component.errorMessage()).toContain('invalide');
+  });
+});
@@ -0,0 +1,79 @@
+import { Component, OnInit, inject, signal } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { ReactiveFormsModule, FormBuilder } from '@angular/forms';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
+import { HttpErrorResponse } from '@angular/common/http';
+import { AuthService } from '../../../core/services/auth.service';
+import { passwordValidators, PASSWORD_HINT } from '../../../shared/validators/password.validator';
+import { PasswordRequirementsChecklist } from '../../../shared/components/password-requirements/password-requirements';
+import { MOTIF_LIEN_RESET_INVALIDE } from '../../../shared/models/auth-redirect-reason';
+
+@Component({
+  selector: 'app-reset-password',
+  standalone: true,
+  imports: [ReactiveFormsModule, RouterLink, PasswordRequirementsChecklist],
+  templateUrl: './reset-password.html',
+  styleUrl: './reset-password.scss',
+})
+export class ResetPassword implements OnInit {
+  private fb = inject(FormBuilder);
+  private auth = inject(AuthService);
+  private router = inject(Router);
+  private route = inject(ActivatedRoute);
+
+  private token = this.route.snapshot.queryParamMap.get('token') ?? '';
+
+  errorMessage = signal<string | null>(null);
+  isLoading = signal(false);
+  passwordHint = PASSWORD_HINT;
+  hasToken = this.token.length > 0;
+
+  form = this.fb.nonNullable.group({
+    new_password: ['', passwordValidators],
+  });
+
+  password = toSignal(this.form.controls.new_password.valueChanges, { initialValue: '' });
+  isCheckingToken = signal(this.hasToken);
+
+  ngOnInit(): void {
+    if (!this.hasToken) {
+      this.redirigeVersLoginLienInvalide();
+      return;
+    }
+
+    this.auth.validateResetToken(this.token).subscribe({
+      next: ({ valid }) => {
+        this.isCheckingToken.set(false);
+        if (!valid) {
+          this.redirigeVersLoginLienInvalide();
+        }
+      },
+      error: () => this.isCheckingToken.set(false),
+    });
+  }
+
+  onSubmit(): void {
+    if (this.form.invalid || !this.hasToken) return;
+
+    this.isLoading.set(true);
+    this.errorMessage.set(null);
+
+    this.auth.resetPassword({ token: this.token, new_password: this.form.getRawValue().new_password }).subscribe({
+      next: () => {
+        this.router.navigate(['/dashboard']);
+      },
+      error: (error: HttpErrorResponse) => {
+        this.isLoading.set(false);
+        if (error.status === 400) {
+          this.redirigeVersLoginLienInvalide();
+          return;
+        }
+        this.errorMessage.set(`Nouveau mot de passe invalide (${this.passwordHint}).`);
+      },
+    });
+  }
+
+  private redirigeVersLoginLienInvalide(): void {
+    this.router.navigate(['/login'], { queryParams: { motif: MOTIF_LIEN_RESET_INVALIDE } });
+  }
+}
@@ -1,19 +1,33 @@
 <div class="dashboard">
  <header class="dashboard__header">
-    <div>
-      <h1>Vue d'ensemble</h1>
-      <p class="dashboard__subtitle">Consommation instantanée du parc</p>
+    <div class="dashboard__brand">
+      <a routerLink="/dashboard" class="ev-brand-link">
+        <ev-brand class="dashboard__logo" />
+      </a>
+      <div>
+        <h1>Vue d'ensemble</h1>
+        <p class="dashboard__subtitle">Consommation instantanée du parc</p>
+      </div>
+    </div>
+    <div class="dashboard__actions">
+      <a routerLink="/sites" class="ev-link">Voir les sites</a>
+      <ev-button
+        class="logout-button"
+        variant="secondary"
+        [fullWidth]="false"
+        (click)="onLogout()"
+        >Déconnexion</ev-button
+      >
    </div>
-    <button type="button" class="logout-button" (click)="onLogout()">Déconnexion</button>
  </header>

  @if (error(); as message) {
-    <p class="banner-error" role="alert">{{ message }}</p>
+    <ev-alert severity="danger" class="banner-error">{{ message }}</ev-alert>
  }

  @if (stats(); as s) {
    <section class="overview">
-      <div class="card card--gauge">
+      <ev-card class="card card--gauge">
        <span class="card__label">Consommation vs capacité</span>
        <app-consumption-gauge
          [consumption]="s.total_consumption_kw"
@@ -23,20 +37,20 @@
          >{{ s.total_consumption_kw | number: '1.0-1' }} /
          {{ s.total_capacity_kw | number }} kW</span
        >
-      </div>
+      </ev-card>

-      <div class="card">
+      <ev-card class="card">
        <span class="card__label">Charge moyenne du parc</span>
        <span class="card__value">{{ s.average_load_percent }} %</span>
        <div class="progress-bar">
          <div class="progress-bar__fill" [style.width.%]="s.average_load_percent"></div>
        </div>
-      </div>
+      </ev-card>

-      <div class="card">
+      <ev-card class="card">
        <span class="card__label">Sites suivis</span>
        <span class="card__value">{{ s.total_sites }}</span>
-      </div>
+      </ev-card>
    </section>

    <section class="chart-section">
@@ -50,8 +64,8 @@
      <h2>Alertes actives</h2>
      <ul class="alerts-list">
        @for (alert of alerts(); track alert.alert_id) {
-          <li class="alert-item" [class]="'alert-item--' + alert.severity">
-            <span class="alert-item__badge">{{ alert.severity }}</span>
+          <li class="alert-item">
+            <ev-badge [tone]="badgeToneForSeverity(alert.severity)">{{ alert.severity }}</ev-badge>
            <span class="alert-item__message">{{ alert.message }}</span>
          </li>
        }
@@ -1,23 +1,22 @@
 :host {
-  --color-good: #2e7d32;
-  --color-partial: #f9a825;
-  --color-degraded: #ef6c00;
-  --color-critical: #c62828;
-  --color-bg-card: #ffffff;
-  --color-border: #e5e7eb;
-  --color-text-muted: #6b7280;
-  --radius: 10px;
-
  display: block;
-  font-family: 'Segoe UI', system-ui, sans-serif;
-  color: #1f2937;
-  padding: 2rem;
+  color: var(--color-text);
+  padding: 2.5rem 2rem;
  max-width: 1100px;
  margin: 0 auto;
 }

 .dashboard__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
  margin-bottom: 2rem;
+}
+
+.dashboard__brand {
+  display: flex;
+  align-items: center;
+  gap: 0.85rem;

  h1 {
    margin: 0;
@@ -26,11 +25,21 @@
  }
 }

+.dashboard__logo {
+  font-size: 1.3rem;
+}
+
 .dashboard__subtitle {
  margin: 0.25rem 0 0;
  color: var(--color-text-muted);
 }

+.dashboard__actions {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
 h2 {
  font-size: 1.1rem;
  font-weight: 600;
@@ -38,13 +47,8 @@ h2 {
 }

 .banner-error {
+  display: block;
  margin: 0 0 1.5rem;
-  padding: 0.75rem 1rem;
-  border: 1px solid var(--color-critical);
-  border-left-width: 4px;
-  border-radius: var(--radius);
-  background: #fdecea;
-  color: var(--color-critical);
 }

 .overview {
@@ -55,14 +59,8 @@ h2 {
 }

 .card {
-  background: var(--color-bg-card);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius);
  padding: 1.25rem;
-  display: flex;
-  flex-direction: column;
  gap: 0.35rem;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
 }

 .card--gauge {
@@ -84,16 +82,16 @@ h2 {

 .progress-bar {
  height: 6px;
-  background: #e5e7eb;
-  border-radius: 999px;
+  background: var(--color-border-light);
+  border-radius: var(--radius-pill);
  overflow: hidden;
  margin-top: 0.25rem;
 }

 .progress-bar__fill {
  height: 100%;
-  background: #3b82f6;
-  border-radius: 999px;
+  background: var(--color-primary);
+  border-radius: var(--radius-pill);
  transition: width 0.3s ease;
 }

@@ -115,59 +113,11 @@ h2 {
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 1rem;
-  border-radius: var(--radius);
-  background: #fef2f2;
-  border: 1px solid #fecaca;
-}
-
-.alert-item__badge {
-  font-size: 0.7rem;
-  font-weight: 700;
-  text-transform: uppercase;
-  padding: 0.2rem 0.55rem;
-  border-radius: 999px;
-  color: #fff;
-  background: var(--color-critical);
-  flex-shrink: 0;
-}
-
-.alert-item--high .alert-item__badge {
-  background: var(--color-degraded);
-}
-.alert-item--medium .alert-item__badge {
-  background: var(--color-partial);
-}
-.alert-item--low .alert-item__badge {
-  background: var(--color-good);
+  border-radius: var(--radius-md);
+  background: var(--color-danger-bg);
+  border: 1px solid var(--color-danger-border);
 }

 .alert-item__message {
  font-size: 0.9rem;
 }
-.dashboard__header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  margin-bottom: 2rem;
-
-  h1 {
-    margin: 0;
-    font-size: 1.75rem;
-    font-weight: 700;
-  }
-}
-
-.logout-button {
-  padding: 0.5rem 1rem;
-  background: #ffffff;
-  border: 1px solid #d1d5db;
-  border-radius: 8px;
-  font-size: 0.85rem;
-  font-weight: 600;
-  color: #374151;
-  cursor: pointer;
-
-  &:hover {
-    background: #f3f4f6;
-  }
-}
@@ -5,7 +5,7 @@ import { Dashboard } from './dashboard';
 import { StatsService } from '../../core/services/stats.service';
 import { AlertsService } from '../../core/services/alerts.service';
 import {AuthService} from '../../core/services/auth.service';
-import {Router} from '@angular/router';
+import {Router, provideRouter} from '@angular/router';

 vi.mock('chart.js', () => {
  class ChartMock {
@@ -29,6 +29,7 @@ describe('Dashboard', () => {
      providers: [
        { provide: StatsService, useValue: statsMock },
        { provide: AlertsService, useValue: alertsMock },
+        provideRouter([]),
      ],
    });

@@ -60,6 +61,7 @@ describe('Dashboard', () => {
      providers: [
        { provide: StatsService, useValue: statsMock },
        { provide: AlertsService, useValue: alertsMock },
+        provideRouter([]),
      ],
    });

@@ -86,6 +88,7 @@ describe('Dashboard', () => {
      providers: [
        { provide: StatsService, useValue: statsMock },
        { provide: AlertsService, useValue: alertsMock },
+        provideRouter([]),
      ],
    });

@@ -99,7 +102,6 @@ describe('Dashboard', () => {
  const statsMock = { getSummary: vi.fn().mockReturnValue(of({ total_sites: 7, sites: [] })) };
  const alertsMock = { getAlerts: vi.fn().mockReturnValue(of([])) };
  const authMock = { logout: vi.fn().mockReturnValue(of(undefined)), clearSession: vi.fn() };
-  const routerMock = { navigate: vi.fn() };

  TestBed.configureTestingModule({
    imports: [Dashboard],
@@ -107,18 +109,21 @@ describe('Dashboard', () => {
      { provide: StatsService, useValue: statsMock },
      { provide: AlertsService, useValue: alertsMock },
      { provide: AuthService, useValue: authMock },
-      { provide: Router, useValue: routerMock },
+      provideRouter([]),
    ],
  });

  const fixture = TestBed.createComponent(Dashboard);
  fixture.detectChanges();

+  const router = TestBed.inject(Router);
+  const navigateSpy = vi.spyOn(router, 'navigate').mockResolvedValue(true);
+
  const button = fixture.nativeElement.querySelector('.logout-button');
  button.click();

  expect(authMock.logout).toHaveBeenCalled();
-  expect(routerMock.navigate).toHaveBeenCalledWith(['/login']);
+  expect(navigateSpy).toHaveBeenCalledWith(['/login']);
  });
  it('déconnecte localement et redirige vers /login même si logout échoue côté réseau', () => {
  const statsMock = { getSummary: vi.fn().mockReturnValue(of({ total_sites: 7, sites: [] })) };
@@ -127,25 +132,51 @@ describe('Dashboard', () => {
    logout: vi.fn().mockReturnValue(throwError(() => new Error('réseau indisponible'))),
    clearSession: vi.fn(),
  };
-  const routerMock = { navigate: vi.fn() };
-
  TestBed.configureTestingModule({
    imports: [Dashboard],
    providers: [
      { provide: StatsService, useValue: statsMock },
      { provide: AlertsService, useValue: alertsMock },
      { provide: AuthService, useValue: authMock },
-      { provide: Router, useValue: routerMock },
+      provideRouter([]),
    ],
  });

  const fixture = TestBed.createComponent(Dashboard);
  fixture.detectChanges();

+  const router = TestBed.inject(Router);
+  const navigateSpy = vi.spyOn(router, 'navigate').mockResolvedValue(true);
+
  const button = fixture.nativeElement.querySelector('.logout-button');
  button.click();

  expect(authMock.clearSession).toHaveBeenCalled();
-  expect(routerMock.navigate).toHaveBeenCalledWith(['/login']);
+  expect(navigateSpy).toHaveBeenCalledWith(['/login']);
 });
+
+  it('distingue le ton des sévérités high et critical', () => {
+    const statsMock = { getSummary: vi.fn().mockReturnValue(of({ total_sites: 7, sites: [] })) };
+    const alertsMock = { getAlerts: vi.fn().mockReturnValue(of([])) };
+
+    TestBed.configureTestingModule({
+      imports: [Dashboard],
+      providers: [
+        { provide: StatsService, useValue: statsMock },
+        { provide: AlertsService, useValue: alertsMock },
+        provideRouter([]),
+      ],
+    });
+
+    const fixture = TestBed.createComponent(Dashboard);
+    const dashboard = fixture.componentInstance;
+
+    expect(dashboard.badgeToneForSeverity('low')).toBe('success');
+    expect(dashboard.badgeToneForSeverity('medium')).toBe('warning');
+    expect(dashboard.badgeToneForSeverity('high')).toBe('danger');
+    expect(dashboard.badgeToneForSeverity('critical')).toBe('critical');
+    expect(dashboard.badgeToneForSeverity('high')).not.toBe(
+      dashboard.badgeToneForSeverity('critical'),
+    );
+  });
 });
@@ -2,23 +2,45 @@ import { Component, OnInit, inject, signal, DestroyRef } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { timer, switchMap, catchError, EMPTY, Observable } from 'rxjs';
 import { DecimalPipe } from '@angular/common';
-import { Router } from '@angular/router';
+import { Router, RouterLink } from '@angular/router';
 import { StatsService } from '../../core/services/stats.service';
 import { ConsumptionGauge } from '../../shared/components/consumption-gauge/consumption-gauge';
 import { SiteLoadChart } from '../../shared/components/site-load-chart/site-load-chart';
 import { AlertsService } from '../../core/services/alerts.service';
 import { AuthService } from '../../core/services/auth.service';
 import { StatsSummary } from '../../shared/models/stats.model';
-import { Alert } from '../../shared/models/alert.model';
+import { Alert, AlertSeverity } from '../../shared/models/alert.model';
+import { Card } from '../../shared/components/ui/card/card';
+import { Alert as EvAlert } from '../../shared/components/ui/alert/alert';
+import { Badge, BadgeTone } from '../../shared/components/ui/badge/badge';
+import { Brand } from '../../shared/components/ui/brand/brand';
+import { Button } from '../../shared/components/ui/button/button';

 const REFRESH_INTERVAL_MS = 10000;
 const UNAVAILABLE_MESSAGE =
  'Données indisponibles, les valeurs affichées datent du dernier relevé.';

+const TON_PAR_SEVERITE: Record<AlertSeverity, BadgeTone> = {
+  low: 'success',
+  medium: 'warning',
+  high: 'danger',
+  critical: 'critical',
+};
+
@Component({
  selector: 'app-dashboard',
  standalone: true,
-  imports: [DecimalPipe, ConsumptionGauge, SiteLoadChart],
+  imports: [
+    DecimalPipe,
+    RouterLink,
+    ConsumptionGauge,
+    SiteLoadChart,
+    Card,
+    EvAlert,
+    Badge,
+    Brand,
+    Button,
+  ],
  templateUrl: './dashboard.html',
  styleUrl: './dashboard.scss',
 })
@@ -54,6 +76,10 @@ export class Dashboard implements OnInit {
      });
  }

+  badgeToneForSeverity(severity: AlertSeverity): BadgeTone {
+    return TON_PAR_SEVERITE[severity];
+  }
+
  onLogout(): void {
    this.auth.logout().subscribe({
      next: () => this.router.navigate(['/login']),
@@ -0,0 +1,19 @@
+<div class="site-detail-placeholder">
+  <nav class="ev-breadcrumb">
+    <a routerLink="/dashboard">Tableau de bord</a>
+    <span>/</span>
+    <a routerLink="/sites">Sites</a>
+  </nav>
+
+  <header class="site-detail-placeholder__header">
+    <a routerLink="/dashboard" class="ev-brand-link">
+      <ev-brand class="site-detail-placeholder__logo" />
+    </a>
+    <h1>Site {{ siteId() }}</h1>
+  </header>
+
+  <ev-card>
+    <p>Le détail de ce site est à venir (voir issue #51).</p>
+    <a routerLink="/sites" class="ev-link">Retour aux sites</a>
+  </ev-card>
+</div>
@@ -0,0 +1,28 @@
+:host {
+  display: block;
+  color: var(--color-text);
+  padding: 2.5rem 2rem;
+  max-width: 640px;
+  margin: 0 auto;
+}
+
+.site-detail-placeholder__header {
+  display: flex;
+  align-items: center;
+  gap: 0.85rem;
+  margin-bottom: 1.5rem;
+
+  h1 {
+    margin: 0;
+    font-size: 1.5rem;
+    font-weight: 700;
+  }
+}
+
+.site-detail-placeholder__logo {
+  font-size: 1.3rem;
+}
+
+ev-card p {
+  margin: 0 0 0.75rem;
+}
@@ -0,0 +1,42 @@
+import { TestBed } from '@angular/core/testing';
+import { ActivatedRoute, convertToParamMap, provideRouter } from '@angular/router';
+import { BehaviorSubject } from 'rxjs';
+import { SiteDetailPlaceholder } from './site-detail-placeholder';
+
+describe('SiteDetailPlaceholder', () => {
+  it("affiche l'identifiant du site depuis la route", () => {
+    const paramMap = new BehaviorSubject(convertToParamMap({ siteId: 'SITE001' }));
+    TestBed.configureTestingModule({
+      imports: [SiteDetailPlaceholder],
+      providers: [
+        provideRouter([]),
+        { provide: ActivatedRoute, useValue: { paramMap } },
+      ],
+    });
+
+    const fixture = TestBed.createComponent(SiteDetailPlaceholder);
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.textContent).toContain('SITE001');
+  });
+
+  it('met à jour l\'affichage quand le paramètre change sans recréer le composant', () => {
+    const paramMap = new BehaviorSubject(convertToParamMap({ siteId: 'SITE001' }));
+    TestBed.configureTestingModule({
+      imports: [SiteDetailPlaceholder],
+      providers: [
+        provideRouter([]),
+        { provide: ActivatedRoute, useValue: { paramMap } },
+      ],
+    });
+
+    const fixture = TestBed.createComponent(SiteDetailPlaceholder);
+    fixture.detectChanges();
+
+    paramMap.next(convertToParamMap({ siteId: 'SITE002' }));
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.textContent).toContain('SITE002');
+    expect(fixture.nativeElement.textContent).not.toContain('SITE001');
+  });
+});
@@ -0,0 +1,19 @@
+import { Component, inject } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { ActivatedRoute, RouterLink } from '@angular/router';
+import { map } from 'rxjs';
+import { Card } from '../../../shared/components/ui/card/card';
+import { Brand } from '../../../shared/components/ui/brand/brand';
+
+@Component({
+  selector: 'app-site-detail-placeholder',
+  standalone: true,
+  imports: [RouterLink, Card, Brand],
+  templateUrl: './site-detail-placeholder.html',
+  styleUrl: './site-detail-placeholder.scss',
+})
+export class SiteDetailPlaceholder {
+  private route = inject(ActivatedRoute);
+
+  siteId = toSignal(this.route.paramMap.pipe(map((params) => params.get('siteId'))));
+}
@@ -0,0 +1,46 @@
+<div class="site-list">
+  <nav class="ev-breadcrumb">
+    <a routerLink="/dashboard">Tableau de bord</a>
+  </nav>
+
+  <header class="site-list__header">
+    <a routerLink="/dashboard" class="ev-brand-link">
+      <ev-brand class="site-list__logo" />
+    </a>
+    <div>
+      <h1>Sites</h1>
+      <p class="site-list__subtitle">Vue d'ensemble du parc suivi</p>
+    </div>
+  </header>
+
+  @if (error(); as message) {
+    <ev-alert severity="danger" class="banner-error">{{ message }}</ev-alert>
+  }
+
+  <ev-card class="table-card">
+    <table class="sites-table">
+      <thead>
+        <tr>
+          <th>Nom</th>
+          <th>Type</th>
+          <th>Localisation</th>
+          <th>Capacité (kW)</th>
+          <th>Statut</th>
+          <th></th>
+        </tr>
+      </thead>
+      <tbody>
+        @for (site of sites(); track site.site_id) {
+          <tr>
+            <td>{{ site.site_name }}</td>
+            <td>{{ site.site_type }}</td>
+            <td>{{ site.location || '-' }}</td>
+            <td>{{ site.capacity_kw ?? '-' }}</td>
+            <td><ev-badge [tone]="badgeToneForStatus(site.status)">{{ site.status ?? '-' }}</ev-badge></td>
+            <td><a [routerLink]="['/sites', site.site_id]" class="ev-link">Détail</a></td>
+          </tr>
+        }
+      </tbody>
+    </table>
+  </ev-card>
+</div>
@@ -0,0 +1,63 @@
+:host {
+  display: block;
+  color: var(--color-text);
+  padding: 2.5rem 2rem;
+  max-width: 1100px;
+  margin: 0 auto;
+}
+
+.site-list__header {
+  display: flex;
+  align-items: center;
+  gap: 0.85rem;
+  margin-bottom: 2rem;
+
+  h1 {
+    margin: 0;
+    font-size: 1.75rem;
+    font-weight: 700;
+  }
+}
+
+.site-list__logo {
+  font-size: 1.3rem;
+}
+
+.site-list__subtitle {
+  margin: 0.25rem 0 0;
+  color: var(--color-text-muted);
+}
+
+.banner-error {
+  display: block;
+  margin: 0 0 1.5rem;
+}
+
+.table-card {
+  padding: 0;
+  overflow: hidden;
+}
+
+.sites-table {
+  width: 100%;
+  border-collapse: collapse;
+
+  th,
+  td {
+    padding: 0.85rem 1.25rem;
+    text-align: left;
+    border-bottom: 1px solid var(--color-border-light);
+  }
+
+  th {
+    font-size: 0.8rem;
+    color: var(--color-text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.02em;
+    font-weight: 600;
+  }
+
+  tr:last-child td {
+    border-bottom: none;
+  }
+}
@@ -0,0 +1,81 @@
+import { TestBed } from '@angular/core/testing';
+import { provideRouter } from '@angular/router';
+import { vi } from 'vitest';
+import { of, throwError } from 'rxjs';
+import { SiteList } from './site-list';
+import { SitesService } from '../../../core/services/sites.service';
+
+describe('SiteList', () => {
+  it('charge et affiche les sites au démarrage', () => {
+    const sitesMock = {
+      getSites: vi.fn().mockReturnValue(
+        of([
+          {
+            site_id: 'SITE001',
+            site_name: 'Site 1',
+            site_type: 'industriel',
+            location: 'Nantes',
+            capacity_kw: 500,
+            status: 'actif',
+          },
+        ]),
+      ),
+    };
+
+    TestBed.configureTestingModule({
+      imports: [SiteList],
+      providers: [{ provide: SitesService, useValue: sitesMock }, provideRouter([])],
+    });
+
+    const fixture = TestBed.createComponent(SiteList);
+    fixture.detectChanges();
+
+    expect(sitesMock.getSites).toHaveBeenCalled();
+    expect(fixture.componentInstance.sites().length).toBe(1);
+    expect(fixture.componentInstance.error()).toBeNull();
+  });
+
+  it("signale l'indisponibilité quand le chargement échoue", () => {
+    const sitesMock = { getSites: vi.fn().mockReturnValue(throwError(() => new Error('nope'))) };
+
+    TestBed.configureTestingModule({
+      imports: [SiteList],
+      providers: [{ provide: SitesService, useValue: sitesMock }, provideRouter([])],
+    });
+
+    const fixture = TestBed.createComponent(SiteList);
+    fixture.detectChanges();
+
+    expect(fixture.componentInstance.error()).not.toBeNull();
+    expect(fixture.componentInstance.sites().length).toBe(0);
+  });
+
+  it('affiche un tiret pour les champs nullables', () => {
+    const sitesMock = {
+      getSites: vi.fn().mockReturnValue(
+        of([
+          {
+            site_id: 'SITE002',
+            site_name: 'Site 2',
+            site_type: 'bureau',
+            location: null,
+            capacity_kw: null,
+            status: null,
+          },
+        ]),
+      ),
+    };
+
+    TestBed.configureTestingModule({
+      imports: [SiteList],
+      providers: [{ provide: SitesService, useValue: sitesMock }, provideRouter([])],
+    });
+
+    const fixture = TestBed.createComponent(SiteList);
+    fixture.detectChanges();
+
+    const cells = fixture.nativeElement.querySelectorAll('td');
+    expect(cells[2].textContent.trim()).toBe('-');
+    expect(cells[3].textContent.trim()).toBe('-');
+  });
+});
@@ -0,0 +1,47 @@
+import { Component, OnInit, inject, signal } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { catchError, EMPTY, Observable } from 'rxjs';
+import { SitesService } from '../../../core/services/sites.service';
+import { Site } from '../../../shared/models/site.model';
+import { Card } from '../../../shared/components/ui/card/card';
+import { Alert } from '../../../shared/components/ui/alert/alert';
+import { Badge, BadgeTone } from '../../../shared/components/ui/badge/badge';
+import { Brand } from '../../../shared/components/ui/brand/brand';
+
+const UNAVAILABLE_MESSAGE = 'Liste des sites indisponible, réessayez plus tard.';
+
+const TON_PAR_STATUT: Record<string, BadgeTone> = {
+  actif: 'success',
+  maintenance: 'warning',
+  hors_service: 'danger',
+};
+
+@Component({
+  selector: 'app-site-list',
+  standalone: true,
+  imports: [RouterLink, Card, Alert, Badge, Brand],
+  templateUrl: './site-list.html',
+  styleUrl: './site-list.scss',
+})
+export class SiteList implements OnInit {
+  private sitesService = inject(SitesService);
+
+  sites = signal<Site[]>([]);
+  error = signal<string | null>(null);
+
+  ngOnInit(): void {
+    this.sitesService
+      .getSites()
+      .pipe(catchError(() => this.reportUnavailable()))
+      .subscribe((sites) => this.sites.set(sites));
+  }
+
+  badgeToneForStatus(status: string | null): BadgeTone {
+    return status ? (TON_PAR_STATUT[status] ?? 'neutral') : 'neutral';
+  }
+
+  private reportUnavailable(): Observable<never> {
+    this.error.set(UNAVAILABLE_MESSAGE);
+    return EMPTY;
+  }
+}
@@ -0,0 +1,8 @@
+<ul class="password-requirements">
+  @for (requirement of requirements(); track requirement.label) {
+    <li [class.met]="requirement.met" [class.unmet]="!requirement.met">
+      <span class="password-requirements-icon">{{ requirement.met ? '✓' : '○' }}</span>
+      {{ requirement.label }}
+    </li>
+  }
+</ul>
@@ -0,0 +1,29 @@
+:host {
+  display: block;
+}
+
+.password-requirements {
+  list-style: none;
+  margin: 0.25rem 0 0;
+  padding: 0;
+  font-size: 0.8rem;
+  line-height: 1.5;
+
+  li {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+  }
+
+  .password-requirements-icon {
+    font-weight: 700;
+  }
+
+  .unmet {
+    color: #9ca3af;
+  }
+
+  .met {
+    color: #16a34a;
+  }
+}
@@ -0,0 +1,39 @@
+import { TestBed } from '@angular/core/testing';
+import { PasswordRequirementsChecklist } from './password-requirements';
+
+describe('PasswordRequirementsChecklist', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [PasswordRequirementsChecklist],
+    }).compileComponents();
+  });
+
+  it('ne coche aucune règle pour un mot de passe vide', () => {
+    const fixture = TestBed.createComponent(PasswordRequirementsChecklist);
+    fixture.componentRef.setInput('password', '');
+    fixture.detectChanges();
+
+    expect(fixture.componentInstance.requirements().every((r) => !r.met)).toBe(true);
+  });
+
+  it('ne coche que les règles satisfaites pour un mot de passe partiel', () => {
+    const fixture = TestBed.createComponent(PasswordRequirementsChecklist);
+    fixture.componentRef.setInput('password', 'abcdefgh');
+    fixture.detectChanges();
+
+    const parLabel = new Map(fixture.componentInstance.requirements().map((r) => [r.label, r.met]));
+    expect(parLabel.get('8 caractères minimum')).toBe(true);
+    expect(parLabel.get('1 minuscule')).toBe(true);
+    expect(parLabel.get('1 majuscule')).toBe(false);
+    expect(parLabel.get('1 chiffre')).toBe(false);
+    expect(parLabel.get('1 caractère spécial')).toBe(false);
+  });
+
+  it('coche toutes les règles pour un mot de passe conforme', () => {
+    const fixture = TestBed.createComponent(PasswordRequirementsChecklist);
+    fixture.componentRef.setInput('password', 'Un-nouveau-mot-de-passe1!');
+    fixture.detectChanges();
+
+    expect(fixture.componentInstance.requirements().every((r) => r.met)).toBe(true);
+  });
+});
@@ -0,0 +1,19 @@
+import { Component, computed, input } from '@angular/core';
+import { PASSWORD_REQUIREMENTS } from '../../validators/password.validator';
+
+@Component({
+  selector: 'app-password-requirements',
+  standalone: true,
+  templateUrl: './password-requirements.html',
+  styleUrl: './password-requirements.scss',
+})
+export class PasswordRequirementsChecklist {
+  password = input('');
+
+  requirements = computed(() =>
+    PASSWORD_REQUIREMENTS.map((requirement) => ({
+      label: requirement.label,
+      met: requirement.test(this.password()),
+    })),
+  );
+}
@@ -0,0 +1 @@
+<ng-content></ng-content>
@@ -0,0 +1,27 @@
+:host {
+  display: block;
+  margin: 0;
+  padding: 0.75rem 1rem;
+  border-radius: var(--radius-sm);
+  border: 1px solid transparent;
+  font-size: 0.85rem;
+  line-height: 1.4;
+}
+
+:host.ev-alert--success {
+  background: var(--color-success-bg);
+  border-color: var(--color-success);
+  color: var(--color-success);
+}
+
+:host.ev-alert--warning {
+  background: var(--color-warning-bg);
+  border-color: var(--color-warning);
+  color: var(--color-warning-text);
+}
+
+:host.ev-alert--danger {
+  background: var(--color-danger-bg);
+  border-color: var(--color-danger-border);
+  color: var(--color-danger);
+}
@@ -0,0 +1,30 @@
+import { Component } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { Alert } from './alert';
+
+@Component({
+  standalone: true,
+  imports: [Alert],
+  template: `<ev-alert severity="success">C'est fait</ev-alert>`,
+})
+class AlertHost {}
+
+describe('Alert', () => {
+  it('applique la classe danger par défaut', async () => {
+    await TestBed.configureTestingModule({ imports: [Alert] }).compileComponents();
+    const fixture = TestBed.createComponent(Alert);
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.classList).toContain('ev-alert--danger');
+  });
+
+  it('applique la sévérité demandée et projette le contenu', async () => {
+    await TestBed.configureTestingModule({ imports: [AlertHost] }).compileComponents();
+    const fixture = TestBed.createComponent(AlertHost);
+    fixture.detectChanges();
+
+    const el = fixture.nativeElement.querySelector('.ev-alert');
+    expect(el.classList).toContain('ev-alert--success');
+    expect(el.textContent).toContain("C'est fait");
+  });
+});
@@ -0,0 +1,21 @@
+import { Component, HostBinding, input } from '@angular/core';
+
+export type AlertSeverity = 'success' | 'warning' | 'danger';
+
+@Component({
+  selector: 'ev-alert',
+  standalone: true,
+  templateUrl: './alert.html',
+  styleUrl: './alert.scss',
+})
+export class Alert {
+  severity = input<AlertSeverity>('danger');
+
+  @HostBinding('class')
+  get hostClass(): string {
+    return `ev-alert ev-alert--${this.severity()}`;
+  }
+
+  @HostBinding('attr.role')
+  readonly role = 'alert';
+}
@@ -0,0 +1,3 @@
+<span class="ev-badge" [class]="'ev-badge--' + tone()">
+  <ng-content></ng-content>
+</span>
@@ -0,0 +1,35 @@
+:host {
+  display: inline-flex;
+  flex-shrink: 0;
+}
+
+.ev-badge {
+  display: inline-block;
+  font-size: 0.7rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+  padding: 0.2rem 0.55rem;
+  border-radius: var(--radius-pill);
+  color: var(--color-text-inverse);
+}
+
+.ev-badge--success {
+  background: var(--color-success);
+}
+
+.ev-badge--warning {
+  background: var(--color-warning);
+}
+
+.ev-badge--danger {
+  background: var(--color-danger);
+}
+
+.ev-badge--critical {
+  background: var(--color-critical);
+}
+
+.ev-badge--neutral {
+  background: var(--color-text-muted);
+}
@@ -0,0 +1,30 @@
+import { Component } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { Badge } from './badge';
+
+@Component({
+  standalone: true,
+  imports: [Badge],
+  template: `<ev-badge tone="danger">critique</ev-badge>`,
+})
+class BadgeHost {}
+
+describe('Badge', () => {
+  it('applique le ton neutral par défaut', async () => {
+    await TestBed.configureTestingModule({ imports: [Badge] }).compileComponents();
+    const fixture = TestBed.createComponent(Badge);
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.querySelector('.ev-badge').classList).toContain('ev-badge--neutral');
+  });
+
+  it('applique le ton demandé et projette le contenu', async () => {
+    await TestBed.configureTestingModule({ imports: [BadgeHost] }).compileComponents();
+    const fixture = TestBed.createComponent(BadgeHost);
+    fixture.detectChanges();
+
+    const el = fixture.nativeElement.querySelector('.ev-badge');
+    expect(el.classList).toContain('ev-badge--danger');
+    expect(el.textContent).toContain('critique');
+  });
+});
@@ -0,0 +1,13 @@
+import { Component, input } from '@angular/core';
+
+export type BadgeTone = 'success' | 'warning' | 'danger' | 'critical' | 'neutral';
+
+@Component({
+  selector: 'ev-badge',
+  standalone: true,
+  templateUrl: './badge.html',
+  styleUrl: './badge.scss',
+})
+export class Badge {
+  tone = input<BadgeTone>('neutral');
+}
@@ -0,0 +1,2 @@
+<img src="/logo-icon.png" alt="" class="ev-brand__icon" />
+<span class="ev-brand__name">EnerVision</span>
@@ -0,0 +1,19 @@
+:host {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45em;
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: var(--color-text);
+  line-height: 1;
+}
+
+.ev-brand__icon {
+  height: 1.3em;
+  width: auto;
+  flex-shrink: 0;
+}
+
+.ev-brand__name {
+  white-space: nowrap;
+}
@@ -0,0 +1,14 @@
+import { TestBed } from '@angular/core/testing';
+import { Brand } from './brand';
+
+describe('Brand', () => {
+  it("affiche l'icône et le nom EnerVision", async () => {
+    await TestBed.configureTestingModule({ imports: [Brand] }).compileComponents();
+    const fixture = TestBed.createComponent(Brand);
+    fixture.detectChanges();
+
+    const icon = fixture.nativeElement.querySelector('img.ev-brand__icon');
+    expect(icon).toBeTruthy();
+    expect(fixture.nativeElement.textContent).toContain('EnerVision');
+  });
+});
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ev-brand',
+  standalone: true,
+  templateUrl: './brand.html',
+  styleUrl: './brand.scss',
+})
+export class Brand {}
@@ -0,0 +1,9 @@
+<button
+  [type]="type()"
+  class="ev-button"
+  [class]="'ev-button--' + variant()"
+  [class.ev-button--inline]="!fullWidth()"
+  [disabled]="disabled()"
+>
+  <ng-content></ng-content>
+</button>
@@ -0,0 +1,55 @@
+.ev-button {
+  width: 100%;
+  padding: 0.7rem;
+  border: none;
+  border-radius: var(--radius-sm);
+  font-size: 0.95rem;
+  font-weight: 600;
+  font-family: var(--font-family);
+  cursor: pointer;
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.7;
+  }
+
+  &.ev-button--inline {
+    width: auto;
+  }
+}
+
+.ev-button--primary {
+  background: var(--color-primary);
+  color: var(--color-text-inverse);
+
+  &:disabled {
+    background: var(--color-disabled);
+  }
+
+  &:not(:disabled):hover {
+    background: var(--color-primary-hover);
+  }
+}
+
+.ev-button--secondary {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  color: var(--color-label);
+
+  &:not(:disabled):hover {
+    background: var(--color-bg);
+  }
+}
+
+.ev-button--danger {
+  background: var(--color-danger);
+  color: var(--color-text-inverse);
+
+  &:disabled {
+    background: var(--color-disabled);
+  }
+
+  &:not(:disabled):hover {
+    background: var(--color-danger-hover);
+  }
+}
@@ -0,0 +1,50 @@
+import { Component } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { Button } from './button';
+
+@Component({
+  standalone: true,
+  imports: [Button],
+  template: `<ev-button>Valider</ev-button>`,
+})
+class ButtonHost {}
+
+describe('Button', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({ imports: [Button] }).compileComponents();
+  });
+
+  it('applique la classe de la variante primary par défaut', () => {
+    const fixture = TestBed.createComponent(Button);
+    fixture.detectChanges();
+
+    const button = fixture.nativeElement.querySelector('button');
+    expect(button.classList).toContain('ev-button--primary');
+  });
+
+  it('applique la classe de la variante demandée', () => {
+    const fixture = TestBed.createComponent(Button);
+    fixture.componentRef.setInput('variant', 'danger');
+    fixture.detectChanges();
+
+    const button = fixture.nativeElement.querySelector('button');
+    expect(button.classList).toContain('ev-button--danger');
+  });
+
+  it('désactive le bouton natif quand disabled est vrai', () => {
+    const fixture = TestBed.createComponent(Button);
+    fixture.componentRef.setInput('disabled', true);
+    fixture.detectChanges();
+
+    const button = fixture.nativeElement.querySelector('button');
+    expect(button.disabled).toBe(true);
+  });
+
+  it('projette le contenu', async () => {
+    await TestBed.configureTestingModule({ imports: [ButtonHost] }).compileComponents();
+    const fixture = TestBed.createComponent(ButtonHost);
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.querySelector('button').textContent).toContain('Valider');
+  });
+});
@@ -0,0 +1,16 @@
+import { Component, input } from '@angular/core';
+
+export type ButtonVariant = 'primary' | 'secondary' | 'danger';
+
+@Component({
+  selector: 'ev-button',
+  standalone: true,
+  templateUrl: './button.html',
+  styleUrl: './button.scss',
+})
+export class Button {
+  variant = input<ButtonVariant>('primary');
+  type = input<'button' | 'submit'>('button');
+  disabled = input(false);
+  fullWidth = input(true);
+}
@@ -0,0 +1 @@
+<ng-content></ng-content>
@@ -0,0 +1,10 @@
+:host {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border-light);
+  border-radius: var(--radius-md);
+  padding: var(--space-5);
+  box-shadow: var(--shadow-card);
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+}
@@ -0,0 +1,22 @@
+import { Component } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { Card } from './card';
+
+@Component({
+  standalone: true,
+  imports: [Card],
+  template: `<ev-card><p>Contenu</p></ev-card>`,
+})
+class CardHost {}
+
+describe('Card', () => {
+  it('projette son contenu', async () => {
+    await TestBed.configureTestingModule({ imports: [CardHost] }).compileComponents();
+    const fixture = TestBed.createComponent(CardHost);
+    fixture.detectChanges();
+
+    const card = fixture.nativeElement.querySelector('ev-card');
+    expect(card).toBeTruthy();
+    expect(card.textContent).toContain('Contenu');
+  });
+});
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ev-card',
+  standalone: true,
+  templateUrl: './card.html',
+  styleUrl: './card.scss',
+})
+export class Card {}
@@ -0,0 +1,3 @@
+export const MOTIF_LIEN_RESET_INVALIDE = 'lien-expire';
+export const MESSAGE_LIEN_RESET_INVALIDE =
+  'Ce lien de réinitialisation est invalide ou a expiré. Connectez-vous ou redemandez-en un.';
@@ -10,6 +10,15 @@ export interface PasswordChangeRequest {
  new_password: string;
 }

+export interface ForgotPasswordRequest {
+  email: string;
+}
+
+export interface ResetPasswordRequest {
+  token: string;
+  new_password: string;
+}
+
 export interface Principal {
  id: string;
  email: string;
@@ -0,0 +1,8 @@
+export interface Site {
+  site_id: string;
+  site_name: string;
+  site_type: string;
+  location: string | null;
+  capacity_kw: number | null;
+  status: string | null;
+}
@@ -0,0 +1,26 @@
+import { FormControl } from '@angular/forms';
+import { passwordValidators } from './password.validator';
+
+function estValide(motDePasse: string): boolean {
+  return new FormControl(motDePasse, passwordValidators).valid;
+}
+
+describe('passwordValidators', () => {
+  it('accepte un mot de passe couvrant les quatre classes', () => {
+    expect(estValide('Un-mot-de-passe1!')).toBe(true);
+  });
+
+  it('accepte un mot de passe accentué (alignement avec le backend, ex: "Sécurité1")', () => {
+    expect(estValide('Sécurité1!')).toBe(true);
+  });
+
+  it('refuse un mot de passe sans majuscule même avec un "×" ou un "÷"', () => {
+    expect(estValide('abcdefg1×')).toBe(false);
+    expect(estValide('abcdefg1÷')).toBe(false);
+  });
+
+  it('refuse un mot de passe sans minuscule même avec un "×" ou un "÷"', () => {
+    expect(estValide('ABCDEFG1×')).toBe(false);
+    expect(estValide('ABCDEFG1÷')).toBe(false);
+  });
+});
@@ -0,0 +1,40 @@
+// Contrainte : `PASSWORD_PATTERN` doit rester identique au validateur Pydantic de
+// `app/schemas/auth.py` côté backend (mêmes plages de majuscules/minuscules, excluant
+// × et ÷, mêmes chiffres 0-9, même jeu de caractères spéciaux). `\w`/`\d` divergent entre
+// JavaScript (ASCII) et Python (Unicode) : une négation aurait accepté ou rejeté un même
+// mot de passe différemment d'un côté à l'autre (ex. "Sécurité1").
+
+import { Validators } from '@angular/forms';
+
+export const PASSWORD_MIN_LENGTH = 8;
+export const PASSWORD_MAX_LENGTH = 128;
+export const PASSWORD_HINT =
+  '8 à 128 caractères, avec au moins 1 majuscule, 1 minuscule, 1 chiffre et 1 caractère spécial';
+
+const SPECIAL_CHARACTERS = '!@#$%^&*()\\-_=+[\\]{};:,.?';
+const PASSWORD_PATTERN = new RegExp(
+  `^(?=.*[A-ZÀ-ÖØ-Þ])(?=.*[a-zà-öø-þ])` +
+    `(?=.*[0-9])(?=.*[${SPECIAL_CHARACTERS}]).*$`,
+);
+
+export const passwordValidators = [
+  Validators.required,
+  Validators.minLength(PASSWORD_MIN_LENGTH),
+  Validators.maxLength(PASSWORD_MAX_LENGTH),
+  Validators.pattern(PASSWORD_PATTERN),
+];
+
+export interface PasswordRequirement {
+  label: string;
+  test: (value: string) => boolean;
+}
+
+const SPECIAL_REGEX = new RegExp(`[${SPECIAL_CHARACTERS}]`);
+
+export const PASSWORD_REQUIREMENTS: PasswordRequirement[] = [
+  { label: `${PASSWORD_MIN_LENGTH} caractères minimum`, test: (v) => v.length >= PASSWORD_MIN_LENGTH },
+  { label: '1 majuscule', test: (v) => /[A-ZÀ-ÖØ-Þ]/.test(v) },
+  { label: '1 minuscule', test: (v) => /[a-zà-öø-þ]/.test(v) },
+  { label: '1 chiffre', test: (v) => /[0-9]/.test(v) },
+  { label: '1 caractère spécial', test: (v) => SPECIAL_REGEX.test(v) },
+];
@@ -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>
@@ -1 +1,11 @@
-/* You can add global styles to this file, and also import other style files */
+@use 'styles/tokens';
+@use 'styles/forms';
+@use 'styles/auth-page';
+@use 'styles/links';
+
+body {
+  margin: 0;
+  font-family: var(--font-family);
+  color: var(--color-text);
+  background: var(--color-bg);
+}
@@ -0,0 +1,57 @@
+.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;
+
+  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-brand {
+    justify-content: center;
+    width: 100%;
+    font-size: 2.1rem;
+    margin-bottom: 1.75rem;
+  }
+
+  h1 {
+    margin: 0;
+    font-size: 1.85rem;
+    font-weight: 700;
+    color: var(--color-text);
+    text-align: center;
+  }
+
+  .auth-subtitle {
+    margin: 0.4rem 0 2rem;
+    color: var(--color-text-muted);
+    font-size: 0.95rem;
+    line-height: 1.4;
+    text-align: center;
+  }
+
+  ev-alert {
+    display: block;
+    margin-top: 0.75rem;
+  }
+
+  ev-button {
+    display: block;
+    margin-top: 1.75rem;
+  }
+}
@@ -0,0 +1,31 @@
+.form-label {
+  display: block;
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: var(--color-label);
+  margin-bottom: var(--space-1);
+  margin-top: var(--space-3);
+}
+
+.form-input {
+  width: 100%;
+  padding: var(--space-2) 0.75rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  font-size: 0.95rem;
+  font-family: var(--font-family);
+  box-sizing: border-box;
+
+  &:focus {
+    outline: none;
+    border-color: var(--color-primary);
+    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15);
+  }
+}
+
+.form-hint {
+  display: block;
+  font-size: 0.75rem;
+  color: var(--color-disabled);
+  margin-top: 0.25rem;
+}
@@ -0,0 +1,34 @@
+.ev-link {
+  color: var(--color-primary);
+  font-weight: 600;
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.ev-breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  font-size: 0.85rem;
+  color: var(--color-text-muted);
+  margin-bottom: 1.25rem;
+
+  a {
+    color: var(--color-text-muted);
+    text-decoration: none;
+
+    &:hover {
+      color: var(--color-primary);
+      text-decoration: underline;
+    }
+  }
+}
+
+.ev-brand-link {
+  display: inline-flex;
+  color: inherit;
+  text-decoration: none;
+}
@@ -0,0 +1,43 @@
+:root {
+  // Marque (dérivé du logo : vert feuille/éclair, halo)
+  --color-primary: #16a34a;
+  --color-primary-hover: #15803d;
+  --color-primary-light: #dcfce7;
+
+  // Neutres (texte, bordures, fonds)
+  --color-text: #1f2937;
+  --color-text-muted: #6b7280;
+  --color-label: #374151;
+  --color-border: #d1d5db;
+  --color-border-light: #e5e7eb;
+  --color-bg: #f3f4f6;
+  --color-surface: #ffffff;
+  --color-disabled: #9ca3af;
+
+  // Sémantique (statuts, alertes)
+  --color-success: #16a34a;
+  --color-success-bg: #dcfce7;
+  --color-warning: #f9a825;
+  --color-warning-bg: #fef9e7;
+  --color-danger: #dc2626;
+  --color-danger-hover: #b91c1c;
+  --color-danger-bg: #fef2f2;
+  --color-danger-border: #fecaca;
+  --color-critical: #b91c1c;
+  --color-warning-text: #92400e;
+  --color-text-inverse: #ffffff;
+
+  // Typo, rayons, ombre
+  --font-family: 'Segoe UI', system-ui, sans-serif;
+  --radius-sm: 8px;
+  --radius-md: 12px;
+  --radius-pill: 999px;
+  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06);
+
+  // Espacements
+  --space-1: 0.35rem;
+  --space-2: 0.6rem;
+  --space-3: 1rem;
+  --space-4: 1.5rem;
+  --space-5: 2.5rem;
+}