Merge branch 'dev' into feat/deploy

apps/frontend/README.md

@@ -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.

apps/frontend/angular.json

@@ -86,15 +86,6 @@
               "text-summary",
               "lcov",
               "html"
-            ],
-            "reporters": [
-              "default",
-              [
-                "junit",
-                {
-                  "outputFile": "test-results/junit.xml"
-                }
-              ]
             ]
           }
         }

apps/frontend/sonar-project.properties

@@ -0,0 +1,18 @@
+sonar.projectKey=ProjetPiscine_EnerVision
+sonar.organization=groupe3-ener-vision
+sonar.sourceEncoding=UTF-8
+
+#  Dossier contenant le code source
+sonar.sources=apps/frontend/src,apps/backend/app
+sonar.tests=apps/backend/tests
+
+#  Liste des fichiers et dossiers à exclure de l'analyse
+#  Liste des fichiers et dossiers à exclure de l'analyse
+sonar.exclusions=**/node_modules/**,**/dist/**,**/*.spec.js,**/*.test.js,github,db,ml,docker-compose.yml,**/**/Dockerfile,**/**/proxy.conf.json,**/**/package.json,**/**/angular.json
+
+#  Chemin vers le rapport de couverture de code
+#  Fichier généré par Vitest
+#  Chemin vers le rapport de couverture de code
+#  Fichier généré par Vitest
+sonar.javascript.lcov.reportPaths=apps/frontend/coverage/frontend/lcov.info
+sonar.python.coverage.reportPaths=apps/backend/cov.info

apps/frontend/src/app/app.routes.ts

@@ -5,9 +5,22 @@ 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/site-detail').then((m) => m.SiteDetail),
+  },
 ];

apps/frontend/src/app/core/interceptors/auth-interceptor.spec.ts

@@ -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');

apps/frontend/src/app/core/interceptors/auth-interceptor.ts

@@ -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);
           })
         );

apps/frontend/src/app/core/interceptors/mock-api-interceptor.spec.ts

@@ -64,4 +64,13 @@ describe('mockApiInterceptor', () => {
     httpMock.expectNone(`${environment.apiUrl}/alerts`);
     expect((result as unknown[]).length).toBeGreaterThan(0);
   });
+
+  it('laisse toujours passer /predictions vers le réseau, même avec useMockFixtures activé', () => {
+    environment.useMockFixtures = true;
+
+    http.get(`${environment.apiUrl}/predictions`).subscribe();
+
+    const req = httpMock.expectOne(`${environment.apiUrl}/predictions`);
+    req.flush({ timestamp: '2026-09-18T09:00:00Z', sites: [] });
+  });
 });

apps/frontend/src/app/core/interceptors/mock-api-interceptor.ts

@@ -26,5 +26,7 @@ export const mockApiInterceptor: HttpInterceptorFn = (req, next) => {
   if (req.url.endsWith(`${environment.apiUrl}/alerts`)) {
     return of(new HttpResponse({ status: 200, body: ALERTS_FIXTURE }));
   }
+  // Volontairement jamais mocké, contrairement à `stats`/`alerts` : les prévisions sont servies
+  // par l'API réelle dès maintenant (au même titre que `/auth/*`, déjà toujours réel).
   return next(req);
 };

apps/frontend/src/app/core/services/auth.service.spec.ts

@@ -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 });
+  });
 });

apps/frontend/src/app/core/services/auth.service.ts

@@ -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 },
+    });
+  }
 }

apps/frontend/src/app/core/services/predictions.service.spec.ts

@@ -0,0 +1,35 @@
+import { TestBed } from '@angular/core/testing';
+import { provideHttpClient } from '@angular/common/http';
+import { provideHttpClientTesting, HttpTestingController } from '@angular/common/http/testing';
+import { PredictionsService } from './predictions.service';
+import { environment } from '../../../environments/environment';
+
+describe('PredictionsService', () => {
+  let service: PredictionsService;
+  let httpMock: HttpTestingController;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [provideHttpClient(), provideHttpClientTesting()],
+    });
+    service = TestBed.inject(PredictionsService);
+    httpMock = TestBed.inject(HttpTestingController);
+  });
+
+  afterEach(() => httpMock.verify());
+
+  it('appelle le bon endpoint et retourne un résumé de prévisions', () => {
+    let result: unknown;
+    service.getPredictions().subscribe((r) => (result = r));
+
+    const req = httpMock.expectOne(`${environment.apiUrl}/predictions`);
+    expect(req.request.method).toBe('GET');
+
+    req.flush({
+      timestamp: '2026-09-18T09:00:00Z',
+      sites: [{ site_id: 'SITE001', site_name: 'Test', prediction: null }],
+    });
+
+    expect((result as { sites: unknown[] }).sites.length).toBe(1);
+  });
+});

apps/frontend/src/app/core/services/predictions.service.ts

@@ -0,0 +1,13 @@
+import { Service, inject } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { environment } from '../../../environments/environment';
+import { PredictionSummary } from '../../shared/models/prediction.model';
+
+@Service()
+export class PredictionsService {
+  private http = inject(HttpClient);
+
+  getPredictions() {
+    return this.http.get<PredictionSummary>(`${environment.apiUrl}/predictions`);
+  }
+}

apps/frontend/src/app/core/services/readings.service.spec.ts

@@ -0,0 +1,50 @@
+import { TestBed } from '@angular/core/testing';
+import { provideHttpClient } from '@angular/common/http';
+import { provideHttpClientTesting, HttpTestingController } from '@angular/common/http/testing';
+import { ReadingsService } from './readings.service';
+import { environment } from '../../../environments/environment';
+
+describe('ReadingsService', () => {
+  let service: ReadingsService;
+  let httpMock: HttpTestingController;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [provideHttpClient(), provideHttpClientTesting()],
+    });
+    service = TestBed.inject(ReadingsService);
+    httpMock = TestBed.inject(HttpTestingController);
+  });
+
+  afterEach(() => httpMock.verify());
+
+  it("demande l'historique du site avec la fenêtre temporelle donnée", () => {
+    let result: unknown;
+    service
+      .getHistory('SITE001', '2026-09-16T00:00:00Z', '2026-09-17T00:00:00Z')
+      .subscribe((r) => (result = r));
+
+    const req = httpMock.expectOne(
+      (r) => r.url === `${environment.apiUrl}/readings` && r.method === 'GET',
+    );
+    expect(req.request.params.get('site_id')).toBe('SITE001');
+    expect(req.request.params.get('start')).toBe('2026-09-16T00:00:00Z');
+    expect(req.request.params.get('end')).toBe('2026-09-17T00:00:00Z');
+
+    req.flush([{ reading_id: 1, site_id: 'SITE001', consumption_kw: 12.5 }]);
+
+    expect((result as unknown[]).length).toBe(1);
+  });
+
+  it('ne pose pas de paramètres start/end quand ils sont omis', () => {
+    service.getHistory('SITE001').subscribe();
+
+    const req = httpMock.expectOne(
+      (r) => r.url === `${environment.apiUrl}/readings` && r.method === 'GET',
+    );
+    expect(req.request.params.has('start')).toBe(false);
+    expect(req.request.params.has('end')).toBe(false);
+
+    req.flush([]);
+  });
+});

apps/frontend/src/app/core/services/readings.service.ts

@@ -0,0 +1,20 @@
+import { Service, inject } from '@angular/core';
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { environment } from '../../../environments/environment';
+import { Reading } from '../../shared/models/reading.model';
+
+@Service()
+export class ReadingsService {
+  private http = inject(HttpClient);
+
+  getHistory(siteId: string, start?: string, end?: string) {
+    let params = new HttpParams().set('site_id', siteId);
+    if (start) {
+      params = params.set('start', start);
+    }
+    if (end) {
+      params = params.set('end', end);
+    }
+    return this.http.get<Reading[]>(`${environment.apiUrl}/readings`, { params });
+  }
+}

apps/frontend/src/app/core/services/sites.service.spec.ts

@@ -0,0 +1,87 @@
+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');
+  });
+
+  it('appelle le bon endpoint et retourne un site', () => {
+    let result: unknown;
+    service.getSite('SITE001').subscribe((r) => (result = r));
+
+    const req = httpMock.expectOne(`${environment.apiUrl}/sites/SITE001`);
+    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 }).site_id).toBe('SITE001');
+  });
+
+  it('appelle le bon endpoint et retourne la mesure courante du site', () => {
+    let result: unknown;
+    service.getCurrent('SITE001').subscribe((r) => (result = r));
+
+    const req = httpMock.expectOne(`${environment.apiUrl}/sites/SITE001/current`);
+    expect(req.request.method).toBe('GET');
+
+    req.flush({
+      timestamp: '2026-09-17T10:00:00Z',
+      site_id: 'SITE001',
+      site_type: 'industriel',
+      consumption_kw: 120,
+      consumption_kwh: null,
+      voltage_v: null,
+      current_a: null,
+      power_factor: null,
+      temperature_celsius: 22,
+      humidity_percent: 55,
+      null_reasons: ['electrical_sensor_failure'],
+      data_quality: 'partial',
+    });
+
+    expect((result as { null_reasons: string[] }).null_reasons).toEqual([
+      'electrical_sensor_failure',
+    ]);
+  });
+});

apps/frontend/src/app/core/services/sites.service.ts

@@ -0,0 +1,22 @@
+import { Service, inject } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { environment } from '../../../environments/environment';
+import { Site } from '../../shared/models/site.model';
+import { SiteCurrent } from '../../shared/models/site-current.model';
+
+@Service()
+export class SitesService {
+  private http = inject(HttpClient);
+
+  getSites() {
+    return this.http.get<Site[]>(`${environment.apiUrl}/sites`);
+  }
+
+  getSite(siteId: string) {
+    return this.http.get<Site>(`${environment.apiUrl}/sites/${siteId}`);
+  }
+
+  getCurrent(siteId: string) {
+    return this.http.get<SiteCurrent>(`${environment.apiUrl}/sites/${siteId}/current`);
+  }
+}

apps/frontend/src/app/features/auth/change-password/change-password.html

@@ -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>

apps/frontend/src/app/features/auth/change-password/change-password.scss

@@ -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;
-}

apps/frontend/src/app/features/auth/change-password/change-password.spec.ts

@@ -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!',
   });
 });
 

apps/frontend/src/app/features/auth/change-password/change-password.ts

@@ -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}).`,
+        );
       },
     });
   }

apps/frontend/src/app/features/auth/forgot-password/forgot-password.html

@@ -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>

apps/frontend/src/app/features/auth/forgot-password/forgot-password.scss

@@ -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;
+  }
+}

apps/frontend/src/app/features/auth/forgot-password/forgot-password.spec.ts

@@ -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);
+  });
+});

apps/frontend/src/app/features/auth/forgot-password/forgot-password.ts

@@ -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);
+      },
+    });
+  }
+}

apps/frontend/src/app/features/auth/login/login.html

@@ -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>

apps/frontend/src/app/features/auth/login/login.scss

@@ -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;
+  }
 }

apps/frontend/src/app/features/auth/login/login.spec.ts

@@ -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)', () => {

apps/frontend/src/app/features/auth/login/login.ts

@@ -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);
 

apps/frontend/src/app/features/auth/reset-password/reset-password.html

@@ -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>

apps/frontend/src/app/features/auth/reset-password/reset-password.scss

@@ -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;
+  }
+}

apps/frontend/src/app/features/auth/reset-password/reset-password.spec.ts

@@ -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');
+  });
+});

apps/frontend/src/app/features/auth/reset-password/reset-password.ts

@@ -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 } });
+  }
+}

apps/frontend/src/app/features/dashboard/dashboard.html

@@ -1,19 +1,39 @@
 <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>
+  @if (statsError(); as message) {
+    <ev-alert severity="danger" class="banner-error">{{ message }}</ev-alert>
+  }
+  @if (alertsError(); as message) {
+    <ev-alert severity="danger" class="banner-error">{{ message }}</ev-alert>
+  }
+  @if (predictionsError(); as message) {
+    <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 +43,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,12 +70,41 @@
       <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>
         }
       </ul>
     </section>
   }
+
+  @if (predictions().length > 0) {
+    <section class="predictions-section">
+      <h2>Prévisions de consommation</h2>
+      <ul class="predictions-list">
+        @for (site of predictions(); track site.site_id) {
+          <li class="prediction-item">
+            <span class="prediction-item__site">{{ site.site_name }}</span>
+            @if (site.prediction; as prediction) {
+              @if (prediction.status === 'available') {
+                <span class="prediction-item__value">
+                  {{ prediction.predicted_value | number: '1.0-1' }} kWh
+                  <span class="prediction-item__target"
+                    >{{ prediction.target_at | date: "dd/MM 'à' HH:mm" }}</span
+                  >
+                </span>
+              } @else {
+                <ev-badge [tone]="badgeToneForPredictionStatus(prediction.status)">{{
+                  prediction.status === 'insufficient_data' ? 'Historique insuffisant' : 'Erreur'
+                }}</ev-badge>
+              }
+            } @else {
+              <ev-badge tone="neutral">Pas encore de prévision</ev-badge>
+            }
+          </li>
+        }
+      </ul>
+    </section>
+  }
 </div>

apps/frontend/src/app/features/dashboard/dashboard.scss

@@ -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,48 @@ 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 {
+
+.predictions-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
   display: flex;
-  align-items: flex-start;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.prediction-item {
+  display: flex;
+  align-items: center;
   justify-content: space-between;
-  margin-bottom: 2rem;
-
-  h1 {
-    margin: 0;
-    font-size: 1.75rem;
-    font-weight: 700;
-  }
+  gap: 0.75rem;
+  padding: 0.7rem 1rem;
+  border-radius: var(--radius-md);
+  background: var(--color-surface);
+  border: 1px solid var(--color-border-light);
 }
 
-.logout-button {
-  padding: 0.5rem 1rem;
-  background: #ffffff;
-  border: 1px solid #d1d5db;
-  border-radius: 8px;
-  font-size: 0.85rem;
+.prediction-item__site {
+  font-size: 0.9rem;
   font-weight: 600;
-  color: #374151;
-  cursor: pointer;
-
-  &:hover {
-    background: #f3f4f6;
-  }
+}
+
+.prediction-item__value {
+  font-size: 0.9rem;
+  font-weight: 600;
+}
+
+.prediction-item__target {
+  margin-left: 0.35rem;
+  font-size: 0.8rem;
+  font-weight: 400;
+  color: var(--color-text-muted);
 }

apps/frontend/src/app/features/dashboard/dashboard.spec.ts

@@ -4,8 +4,9 @@ import { of, throwError } from 'rxjs';
 import { Dashboard } from './dashboard';
 import { StatsService } from '../../core/services/stats.service';
 import { AlertsService } from '../../core/services/alerts.service';
+import { PredictionsService } from '../../core/services/predictions.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 {
@@ -17,18 +18,25 @@ vi.mock('chart.js', () => {
   return { Chart: ChartMock, registerables: [] };
 });
 
+function predictionsMock(sites: unknown[] = []) {
+  return { getPredictions: vi.fn().mockReturnValue(of({ timestamp: '2026-09-18T09:00:00Z', sites })) };
+}
+
 describe('Dashboard', () => {
   afterEach(() => vi.useRealTimers());
 
-  it('charge les stats et les alertes au démarrage', async () => {
+  it('charge les stats, les alertes et les prévisions au démarrage', async () => {
     const statsMock = { getSummary: vi.fn().mockReturnValue(of({ total_sites: 7, sites: [] })) };
     const alertsMock = { getAlerts: vi.fn().mockReturnValue(of([{ alert_id: 'A1' }])) };
+    const predictions = predictionsMock([{ site_id: 'SITE001', site_name: 'Test', prediction: null }]);
 
     TestBed.configureTestingModule({
       imports: [Dashboard],
       providers: [
         { provide: StatsService, useValue: statsMock },
         { provide: AlertsService, useValue: alertsMock },
+        { provide: PredictionsService, useValue: predictions },
+        provideRouter([]),
       ],
     });
 
@@ -41,8 +49,12 @@ describe('Dashboard', () => {
 
     expect(statsMock.getSummary).toHaveBeenCalled();
     expect(alertsMock.getAlerts).toHaveBeenCalled();
+    expect(predictions.getPredictions).toHaveBeenCalled();
     expect(fixture.componentInstance.alerts().length).toBe(1);
-    expect(fixture.componentInstance.error()).toBeNull();
+    expect(fixture.componentInstance.predictions().length).toBe(1);
+    expect(fixture.componentInstance.statsError()).toBeNull();
+    expect(fixture.componentInstance.alertsError()).toBeNull();
+    expect(fixture.componentInstance.predictionsError()).toBeNull();
   });
 
   it("signale l'indisponibilité puis repart au rafraîchissement suivant", () => {
@@ -60,6 +72,8 @@ describe('Dashboard', () => {
       providers: [
         { provide: StatsService, useValue: statsMock },
         { provide: AlertsService, useValue: alertsMock },
+        { provide: PredictionsService, useValue: predictionsMock() },
+        provideRouter([]),
       ],
     });
 
@@ -68,13 +82,13 @@ describe('Dashboard', () => {
 
     vi.advanceTimersByTime(1);
     expect(statsMock.getSummary).toHaveBeenCalledTimes(1);
-    expect(fixture.componentInstance.error()).not.toBeNull();
+    expect(fixture.componentInstance.statsError()).not.toBeNull();
     expect(fixture.componentInstance.stats()).toBeNull();
 
     vi.advanceTimersByTime(10000);
     expect(statsMock.getSummary).toHaveBeenCalledTimes(2);
     expect(fixture.componentInstance.stats()).not.toBeNull();
-    expect(fixture.componentInstance.error()).toBeNull();
+    expect(fixture.componentInstance.statsError()).toBeNull();
   });
 
   it("n'interrompt pas la page quand le chargement des alertes échoue", () => {
@@ -86,6 +100,8 @@ describe('Dashboard', () => {
       providers: [
         { provide: StatsService, useValue: statsMock },
         { provide: AlertsService, useValue: alertsMock },
+        { provide: PredictionsService, useValue: predictionsMock() },
+        provideRouter([]),
       ],
     });
 
@@ -93,32 +109,91 @@ describe('Dashboard', () => {
     fixture.detectChanges();
 
     expect(fixture.componentInstance.alerts().length).toBe(0);
+    expect(fixture.componentInstance.alertsError()).not.toBeNull();
+  });
+
+  it("n'interrompt pas la page quand le chargement des prévisions échoue", () => {
+    const statsMock = { getSummary: vi.fn().mockReturnValue(of({ total_sites: 7, sites: [] })) };
+    const alertsMock = { getAlerts: vi.fn().mockReturnValue(of([])) };
+    const predictions = {
+      getPredictions: vi.fn().mockReturnValue(throwError(() => new Error('nope'))),
+    };
+
+    TestBed.configureTestingModule({
+      imports: [Dashboard],
+      providers: [
+        { provide: StatsService, useValue: statsMock },
+        { provide: AlertsService, useValue: alertsMock },
+        { provide: PredictionsService, useValue: predictions },
+        provideRouter([]),
+      ],
+    });
+
+    const fixture = TestBed.createComponent(Dashboard);
+    fixture.detectChanges();
+
+    expect(fixture.componentInstance.predictions().length).toBe(0);
+    expect(fixture.componentInstance.predictionsError()).not.toBeNull();
+  });
+
+  it("un rafraîchissement de stats n'efface pas une erreur de prévisions en attente", () => {
+    vi.useFakeTimers();
+    const statsMock = { getSummary: vi.fn().mockReturnValue(of({ total_sites: 7, sites: [] })) };
+    const alertsMock = { getAlerts: vi.fn().mockReturnValue(of([])) };
+    const predictions = {
+      getPredictions: vi.fn().mockReturnValue(throwError(() => new Error('nope'))),
+    };
+
+    TestBed.configureTestingModule({
+      imports: [Dashboard],
+      providers: [
+        { provide: StatsService, useValue: statsMock },
+        { provide: AlertsService, useValue: alertsMock },
+        { provide: PredictionsService, useValue: predictions },
+        provideRouter([]),
+      ],
+    });
+
+    const fixture = TestBed.createComponent(Dashboard);
+    fixture.detectChanges();
+
+    expect(fixture.componentInstance.predictionsError()).not.toBeNull();
+
+    // Plusieurs cycles de `timer(0, 10_000)` (stats) plus tard, l'erreur des prévisions doit
+    // toujours être visible : rien ne vient la rafraîchir tant que la section n'est pas rechargée.
+    vi.advanceTimersByTime(30000);
+
+    expect(fixture.componentInstance.predictionsError()).not.toBeNull();
+    expect(fixture.componentInstance.statsError()).toBeNull();
   });
 
   it('appelle logout et redirige vers /login au clic sur le bouton de déconnexion', () => {
   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],
     providers: [
       { provide: StatsService, useValue: statsMock },
       { provide: AlertsService, useValue: alertsMock },
+      { provide: PredictionsService, useValue: predictionsMock() },
       { 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 +202,75 @@ 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: PredictionsService, useValue: predictionsMock() },
       { 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 },
+        { provide: PredictionsService, useValue: predictionsMock() },
+        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'),
+    );
+  });
+
+  it('distingue le ton des statuts de prévision', () => {
+    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 },
+        { provide: PredictionsService, useValue: predictionsMock() },
+        provideRouter([]),
+      ],
+    });
+
+    const fixture = TestBed.createComponent(Dashboard);
+    const dashboard = fixture.componentInstance;
+
+    expect(dashboard.badgeToneForPredictionStatus('available')).toBe('success');
+    expect(dashboard.badgeToneForPredictionStatus('insufficient_data')).toBe('warning');
+    expect(dashboard.badgeToneForPredictionStatus('error')).toBe('danger');
+  });
 });

apps/frontend/src/app/features/dashboard/dashboard.ts

@@ -1,59 +1,122 @@
-import { Component, OnInit, inject, signal, DestroyRef } from '@angular/core';
+import { Component, OnInit, inject, signal, DestroyRef, WritableSignal } 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 { DecimalPipe, DatePipe } from '@angular/common';
+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 { PredictionsService } from '../../core/services/predictions.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 { PredictionStatus, SitePredictionSummary } from '../../shared/models/prediction.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',
+};
+
+// `error` n'a pas de précédent dans les fixtures ou l'API à ce jour, mais figure dans le
+// domaine du schéma backend (`ck_prediction_status`) : mieux vaut une couleur définie que
+// tomber sur `undefined` si ce statut apparaît un jour.
+const TON_PAR_STATUT_PREDICTION: Record<PredictionStatus, BadgeTone> = {
+  available: 'success',
+  insufficient_data: 'warning',
+  error: 'danger',
+};
+
 @Component({
   selector: 'app-dashboard',
   standalone: true,
-  imports: [DecimalPipe, ConsumptionGauge, SiteLoadChart],
+  imports: [
+    DecimalPipe,
+    DatePipe,
+    RouterLink,
+    ConsumptionGauge,
+    SiteLoadChart,
+    Card,
+    EvAlert,
+    Badge,
+    Brand,
+    Button,
+  ],
   templateUrl: './dashboard.html',
   styleUrl: './dashboard.scss',
 })
 export class Dashboard implements OnInit {
   private statsService = inject(StatsService);
   private alertsService = inject(AlertsService);
+  private predictionsService = inject(PredictionsService);
   private auth = inject(AuthService);
   private router = inject(Router);
   private destroyRef = inject(DestroyRef);
 
   stats = signal<StatsSummary | null>(null);
   alerts = signal<Alert[]>([]);
-  error = signal<string | null>(null);
+  predictions = signal<SitePredictionSummary[]>([]);
+
+  // Un signal par flux, pas un seul `error` partagé : sinon le tick suivant de `timer` (stats)
+  // efface silencieusement un message d'échec des prévisions ou des alertes après 10s au plus,
+  // sans retry ni indication pour l'utilisateur que la section correspondante est restée vide.
+  statsError = signal<string | null>(null);
+  alertsError = signal<string | null>(null);
+  predictionsError = signal<string | null>(null);
 
   ngOnInit(): void {
     this.alertsService
       .getAlerts()
-      .pipe(catchError(() => this.reportUnavailable()))
-      .subscribe((alerts) => this.alerts.set(alerts));
+      .pipe(catchError(() => this.reportUnavailable(this.alertsError)))
+      .subscribe((alerts) => {
+        this.alertsError.set(null);
+        this.alerts.set(alerts);
+      });
+
+    // Les prévisions viennent d'un scoring hors ligne, pas d'un calcul à la demande : un seul
+    // chargement au démarrage suffit, pas besoin du rafraîchissement périodique de `stats`.
+    this.predictionsService
+      .getPredictions()
+      .pipe(catchError(() => this.reportUnavailable(this.predictionsError)))
+      .subscribe((summary) => {
+        this.predictionsError.set(null);
+        this.predictions.set(summary.sites);
+      });
 
     // Piège : le catchError porte sur l'observable interne. Sur le flux externe il
     // terminerait le timer, et le rafraîchissement ne repartirait jamais.
     timer(0, REFRESH_INTERVAL_MS)
       .pipe(
         switchMap(() =>
-          this.statsService.getSummary().pipe(catchError(() => this.reportUnavailable())),
+          this.statsService.getSummary().pipe(catchError(() => this.reportUnavailable(this.statsError))),
         ),
         takeUntilDestroyed(this.destroyRef),
       )
       .subscribe((stats) => {
-        this.error.set(null);
+        this.statsError.set(null);
         this.stats.set(stats);
       });
   }
 
+  badgeToneForSeverity(severity: AlertSeverity): BadgeTone {
+    return TON_PAR_SEVERITE[severity];
+  }
+
+  badgeToneForPredictionStatus(status: PredictionStatus): BadgeTone {
+    return TON_PAR_STATUT_PREDICTION[status];
+  }
+
   onLogout(): void {
     this.auth.logout().subscribe({
       next: () => this.router.navigate(['/login']),
@@ -65,8 +128,8 @@ export class Dashboard implements OnInit {
     });
   }
 
-  private reportUnavailable(): Observable<never> {
-    this.error.set(UNAVAILABLE_MESSAGE);
+  private reportUnavailable(target: WritableSignal<string | null>): Observable<never> {
+    target.set(UNAVAILABLE_MESSAGE);
     return EMPTY;
   }
 }

apps/frontend/src/app/features/sites/site-detail/site-detail.html

@@ -0,0 +1,85 @@
+<div class="site-detail">
+  <nav class="ev-breadcrumb">
+    <a routerLink="/dashboard">Tableau de bord</a>
+    <span>/</span>
+    <a routerLink="/sites">Sites</a>
+  </nav>
+
+  <header class="site-detail__header">
+    <a routerLink="/dashboard" class="ev-brand-link">
+      <ev-brand class="site-detail__logo" />
+    </a>
+    <div>
+      <h1>{{ site()?.site_name ?? siteId() }}</h1>
+      @if (site(); as s) {
+        <p class="site-detail__subtitle">
+          {{ s.site_type }} · {{ s.location || 'Localisation inconnue' }}
+        </p>
+      }
+    </div>
+    <div class="site-detail__badges">
+      @if (site(); as s) {
+        <ev-badge [tone]="badgeToneForStatus(s.status)">{{ s.status ?? '-' }}</ev-badge>
+      }
+      @if (hasMeasurement() && qualityLabel(); as label) {
+        <ev-badge [tone]="qualityTone()">{{ label }}</ev-badge>
+      }
+    </div>
+  </header>
+
+  @if (error(); as message) {
+    <ev-alert severity="danger" class="banner-error">{{ message }}</ev-alert>
+  }
+
+  @if (site(); as s) {
+    @if (hasMeasurement()) {
+      <section class="overview">
+        <ev-card class="card card--gauge">
+          <span class="card__label">Consommation vs capacité</span>
+          @let consumption = consumptionKw();
+          @if (consumption !== null) {
+            <app-consumption-gauge [consumption]="consumption" [capacity]="s.capacity_kw ?? 0" />
+            <span class="card__value">
+              {{ consumptionLabel() }} / {{ s.capacity_kw ?? '-' }} kW
+            </span>
+          } @else {
+            <p class="card__unavailable">
+              Consommation indisponible
+              <span class="metric__reason">({{ consumptionReason() }})</span>
+            </p>
+          }
+        </ev-card>
+
+        <ev-card class="metrics-card">
+          <span class="card__label">Mesure instantanée</span>
+          <dl class="metrics-grid">
+            @for (metric of metrics(); track metric.key) {
+              <div class="metric">
+                <dt>{{ metric.label }}</dt>
+                @if (metric.value !== null) {
+                  <dd>{{ metric.value }}</dd>
+                } @else {
+                  <dd class="metric__unavailable">
+                    Indisponible
+                    <span class="metric__reason">({{ metric.reason }})</span>
+                  </dd>
+                }
+              </div>
+            }
+          </dl>
+        </ev-card>
+      </section>
+
+      @if (history().length > 0) {
+        <section class="chart-section">
+          <h2>Historique de consommation</h2>
+          <app-reading-history-chart [readings]="history()" />
+        </section>
+      }
+    } @else {
+      <ev-alert severity="warning" class="banner-empty">{{ noMeasurementMessage }}</ev-alert>
+    }
+  }
+
+  <a routerLink="/sites" class="ev-link">Retour aux sites</a>
+</div>

apps/frontend/src/app/features/sites/site-detail/site-detail.scss

@@ -0,0 +1,119 @@
+:host {
+  display: block;
+  color: var(--color-text);
+  padding: 2.5rem 2rem;
+  max-width: 1100px;
+  margin: 0 auto;
+}
+
+.site-detail__header {
+  display: flex;
+  align-items: center;
+  gap: 0.85rem;
+  margin-bottom: 2rem;
+
+  h1 {
+    margin: 0;
+    font-size: 1.75rem;
+    font-weight: 700;
+  }
+}
+
+.site-detail__logo {
+  font-size: 1.3rem;
+}
+
+.site-detail__subtitle {
+  margin: 0.25rem 0 0;
+  color: var(--color-text-muted);
+}
+
+.site-detail__badges {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-left: auto;
+}
+
+.banner-error {
+  display: block;
+  margin: 0 0 1.5rem;
+}
+
+.banner-empty {
+  display: block;
+  margin: 0 0 1.5rem;
+}
+
+.overview {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  gap: 1rem;
+  margin-bottom: 2.5rem;
+}
+
+.card {
+  padding: 1.25rem;
+  gap: 0.35rem;
+}
+
+.card--gauge {
+  align-items: center;
+  text-align: center;
+}
+
+.card__label {
+  font-size: 0.8rem;
+  color: var(--color-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+}
+
+.card__value {
+  font-size: 1.6rem;
+  font-weight: 700;
+}
+
+.card__unavailable {
+  color: var(--color-text-muted);
+  margin: 0;
+}
+
+.metrics-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0.75rem 1.5rem;
+  margin: 0.5rem 0 0;
+}
+
+.metric {
+  dt {
+    font-size: 0.75rem;
+    color: var(--color-text-muted);
+  }
+
+  dd {
+    margin: 0;
+    font-size: 1.05rem;
+    font-weight: 600;
+  }
+}
+
+.metric__unavailable {
+  color: var(--color-text-muted);
+  font-weight: 400;
+}
+
+.metric__reason {
+  font-size: 0.8rem;
+}
+
+h2 {
+  font-size: 1.1rem;
+  font-weight: 600;
+  margin: 0 0 1rem;
+}
+
+.chart-section {
+  margin-bottom: 2rem;
+}

apps/frontend/src/app/features/sites/site-detail/site-detail.spec.ts

@@ -0,0 +1,281 @@
+import { TestBed } from '@angular/core/testing';
+import { ActivatedRoute, convertToParamMap, provideRouter } from '@angular/router';
+import { vi } from 'vitest';
+import { BehaviorSubject, of, throwError } from 'rxjs';
+import { SiteDetail } from './site-detail';
+import { SitesService } from '../../../core/services/sites.service';
+import { ReadingsService } from '../../../core/services/readings.service';
+
+const SITE = {
+  site_id: 'SITE001',
+  site_name: 'Site 1',
+  site_type: 'industriel',
+  location: 'Nantes',
+  capacity_kw: 500,
+  status: 'actif',
+};
+
+const CURRENT_COMPLET = {
+  timestamp: '2026-09-17T10:00:00Z',
+  site_id: 'SITE001',
+  site_type: 'industriel',
+  consumption_kw: 120,
+  consumption_kwh: null,
+  voltage_v: 230,
+  current_a: 12,
+  power_factor: 0.95,
+  temperature_celsius: 22,
+  humidity_percent: 55,
+  null_reasons: [] as string[],
+  data_quality: 'good' as const,
+};
+
+const SANS_MESURE = {
+  ...CURRENT_COMPLET,
+  timestamp: null,
+  consumption_kw: null,
+  voltage_v: null,
+  current_a: null,
+  power_factor: null,
+  temperature_celsius: null,
+  humidity_percent: null,
+  data_quality: 'critical' as const,
+};
+
+const LECTURE = {
+  reading_id: 1,
+  site_id: 'SITE001',
+  timestamp: '2026-09-17T09:00:00Z',
+  source: 'api_history' as const,
+  consumption_kw: 118,
+  consumption_kwh: null,
+  consumption_euros: null,
+  voltage_v: 230,
+  current_a: 12,
+  power_factor: 0.95,
+  temperature_celsius: 22,
+  humidity_percent: 55,
+  solar_irradiance_wm2: null,
+  is_working_hours: true,
+  data_quality: 'good' as const,
+  null_reasons: null,
+  imputed_values: null,
+  imputation_method: null,
+};
+
+function setup(
+  siteId: string,
+  sitesMock: Partial<SitesService>,
+  readingsMock: Partial<ReadingsService>,
+) {
+  const paramMap = new BehaviorSubject(convertToParamMap({ siteId }));
+  TestBed.configureTestingModule({
+    imports: [SiteDetail],
+    providers: [
+      provideRouter([]),
+      { provide: ActivatedRoute, useValue: { paramMap } },
+      { provide: SitesService, useValue: sitesMock },
+      { provide: ReadingsService, useValue: readingsMock },
+    ],
+  });
+  return { fixture: TestBed.createComponent(SiteDetail), paramMap };
+}
+
+describe('SiteDetail', () => {
+  it('charge le site, la mesure courante et son historique au démarrage', () => {
+    const { fixture } = setup(
+      'SITE001',
+      {
+        getSite: vi.fn().mockReturnValue(of(SITE)),
+        getCurrent: vi.fn().mockReturnValue(of(CURRENT_COMPLET)),
+      },
+      { getHistory: vi.fn().mockReturnValue(of([LECTURE])) },
+    );
+
+    fixture.detectChanges();
+
+    expect(fixture.componentInstance.site()?.site_id).toBe('SITE001');
+    expect(fixture.componentInstance.current()?.consumption_kw).toBe(120);
+    expect(fixture.componentInstance.history().length).toBe(1);
+    expect(fixture.componentInstance.error()).toBeNull();
+  });
+
+  it("signale l'indisponibilité quand un des appels échoue", () => {
+    const { fixture } = setup(
+      'SITE001',
+      {
+        getSite: vi.fn().mockReturnValue(throwError(() => new Error('nope'))),
+        getCurrent: vi.fn().mockReturnValue(of(CURRENT_COMPLET)),
+      },
+      { getHistory: vi.fn().mockReturnValue(of([])) },
+    );
+
+    fixture.detectChanges();
+
+    expect(fixture.componentInstance.error()).not.toBeNull();
+    expect(fixture.componentInstance.site()).toBeNull();
+  });
+
+  it('efface les données du site précédent quand le chargement du suivant échoue', () => {
+    const getSite = vi
+      .fn()
+      .mockReturnValueOnce(of(SITE))
+      .mockReturnValueOnce(throwError(() => new Error('404')));
+    const { fixture, paramMap } = setup(
+      'SITE001',
+      { getSite, getCurrent: vi.fn().mockReturnValue(of(CURRENT_COMPLET)) },
+      { getHistory: vi.fn().mockReturnValue(of([LECTURE])) },
+    );
+
+    fixture.detectChanges();
+    expect(fixture.componentInstance.site()?.site_id).toBe('SITE001');
+
+    paramMap.next(convertToParamMap({ siteId: 'SITE002' }));
+    fixture.detectChanges();
+
+    expect(fixture.componentInstance.error()).not.toBeNull();
+    expect(fixture.componentInstance.site()).toBeNull();
+    expect(fixture.componentInstance.current()).toBeNull();
+    expect(fixture.componentInstance.history()).toEqual([]);
+    expect(fixture.nativeElement.textContent).not.toContain('Site 1');
+  });
+
+  it('interroge le site et sa mesure courante en parallèle', () => {
+    const getSite = vi.fn().mockReturnValue(of(SITE));
+    const getCurrent = vi.fn().mockReturnValue(of(CURRENT_COMPLET));
+    const { fixture } = setup(
+      'SITE001',
+      { getSite, getCurrent },
+      { getHistory: vi.fn().mockReturnValue(of([])) },
+    );
+
+    fixture.detectChanges();
+
+    expect(getSite).toHaveBeenCalledWith('SITE001');
+    expect(getCurrent).toHaveBeenCalledWith('SITE001');
+  });
+
+  it('signale la panne du capteur de consommation au lieu de tracer une jauge à zéro', () => {
+    const sansConsommation = {
+      ...CURRENT_COMPLET,
+      consumption_kw: null,
+      null_reasons: ['consumption_sensor_failure'],
+      data_quality: 'partial' as const,
+    };
+    const { fixture } = setup(
+      'SITE001',
+      {
+        getSite: vi.fn().mockReturnValue(of(SITE)),
+        getCurrent: vi.fn().mockReturnValue(of(sansConsommation)),
+      },
+      { getHistory: vi.fn().mockReturnValue(of([LECTURE])) },
+    );
+
+    fixture.detectChanges();
+
+    expect(fixture.componentInstance.consumptionKw()).toBeNull();
+    expect(fixture.componentInstance.consumptionReason()).toBe('capteur de consommation en panne');
+    expect(fixture.nativeElement.querySelector('app-consumption-gauge')).toBeNull();
+    expect(fixture.nativeElement.textContent).toContain('Consommation indisponible');
+  });
+
+  it('trace la jauge pour une consommation nulle réellement mesurée', () => {
+    const { fixture } = setup(
+      'SITE001',
+      {
+        getSite: vi.fn().mockReturnValue(of(SITE)),
+        getCurrent: vi.fn().mockReturnValue(of({ ...CURRENT_COMPLET, consumption_kw: 0 })),
+      },
+      { getHistory: vi.fn().mockReturnValue(of([LECTURE])) },
+    );
+
+    fixture.detectChanges();
+
+    expect(fixture.componentInstance.consumptionLabel()).toBe('0.0 kW');
+    expect(fixture.nativeElement.querySelector('app-consumption-gauge')).not.toBeNull();
+    expect(fixture.nativeElement.textContent).not.toContain('Consommation indisponible');
+  });
+
+  it('affiche explicitement les champs null avec leur raison plutôt que de les masquer', () => {
+    const partielle = {
+      ...CURRENT_COMPLET,
+      voltage_v: null,
+      current_a: null,
+      power_factor: null,
+      null_reasons: ['electrical_sensor_failure'],
+      data_quality: 'partial' as const,
+    };
+    const { fixture } = setup(
+      'SITE001',
+      {
+        getSite: vi.fn().mockReturnValue(of(SITE)),
+        getCurrent: vi.fn().mockReturnValue(of(partielle)),
+      },
+      { getHistory: vi.fn().mockReturnValue(of([LECTURE])) },
+    );
+
+    fixture.detectChanges();
+
+    const tension = fixture.componentInstance.metrics().find((m) => m.key === 'voltage_v');
+    expect(tension?.value).toBeNull();
+    expect(tension?.reason).toBe('capteur électrique en panne');
+
+    const texte = fixture.nativeElement.textContent;
+    expect(texte).toContain('Indisponible');
+    expect(texte).toContain('capteur électrique en panne');
+    expect(texte).toContain('Données partielles');
+  });
+
+  it('recharge les données quand le paramètre de route siteId change', () => {
+    const getSite = vi.fn().mockReturnValue(of(SITE));
+    const { fixture, paramMap } = setup(
+      'SITE001',
+      { getSite, getCurrent: vi.fn().mockReturnValue(of(CURRENT_COMPLET)) },
+      { getHistory: vi.fn().mockReturnValue(of([])) },
+    );
+
+    fixture.detectChanges();
+    paramMap.next(convertToParamMap({ siteId: 'SITE002' }));
+    fixture.detectChanges();
+
+    expect(getSite).toHaveBeenCalledWith('SITE002');
+  });
+
+  it("ancre la fenêtre d'historique sur la dernière mesure connue plutôt que sur l'horloge", () => {
+    const getHistory = vi.fn().mockReturnValue(of([]));
+    const { fixture } = setup(
+      'SITE001',
+      {
+        getSite: vi.fn().mockReturnValue(of(SITE)),
+        getCurrent: vi.fn().mockReturnValue(of(CURRENT_COMPLET)),
+      },
+      { getHistory },
+    );
+
+    fixture.detectChanges();
+
+    expect(getHistory).toHaveBeenCalledWith(
+      'SITE001',
+      '2026-09-16T10:00:00.000Z',
+      '2026-09-17T10:00:00Z',
+    );
+  });
+
+  it("annonce l'absence de mesure sans interroger l'historique quand timestamp est null", () => {
+    const getHistory = vi.fn().mockReturnValue(of([]));
+    const { fixture } = setup(
+      'SITE001',
+      {
+        getSite: vi.fn().mockReturnValue(of(SITE)),
+        getCurrent: vi.fn().mockReturnValue(of(SANS_MESURE)),
+      },
+      { getHistory },
+    );
+
+    fixture.detectChanges();
+
+    expect(getHistory).not.toHaveBeenCalled();
+    expect(fixture.componentInstance.hasMeasurement()).toBe(false);
+    expect(fixture.nativeElement.textContent).toContain('Aucune mesure remontée pour ce site.');
+  });
+});

apps/frontend/src/app/features/sites/site-detail/site-detail.ts

@@ -0,0 +1,213 @@
+import { Component, DestroyRef, computed, inject, signal } from '@angular/core';
+import { takeUntilDestroyed, toObservable, toSignal } from '@angular/core/rxjs-interop';
+import { ActivatedRoute, RouterLink } from '@angular/router';
+import { catchError, EMPTY, filter, forkJoin, map, Observable, of, switchMap } from 'rxjs';
+import { SitesService } from '../../../core/services/sites.service';
+import { ReadingsService } from '../../../core/services/readings.service';
+import { Site } from '../../../shared/models/site.model';
+import { Reading, ReadingDataQuality } from '../../../shared/models/reading.model';
+import { SiteCurrent } from '../../../shared/models/site-current.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';
+import { ConsumptionGauge } from '../../../shared/components/consumption-gauge/consumption-gauge';
+import { ReadingHistoryChart } from '../../../shared/components/reading-history-chart/reading-history-chart';
+
+const UNAVAILABLE_MESSAGE = 'Détail du site indisponible, réessayez plus tard.';
+const NO_MEASUREMENT_MESSAGE = 'Aucune mesure remontée pour ce site.';
+const HISTORY_WINDOW_MS = 24 * 60 * 60 * 1000;
+
+const TON_PAR_STATUT: Record<string, BadgeTone> = {
+  actif: 'success',
+  maintenance: 'warning',
+  hors_service: 'danger',
+};
+
+const TON_PAR_QUALITE: Record<ReadingDataQuality, BadgeTone> = {
+  good: 'success',
+  partial: 'warning',
+  degraded: 'danger',
+  critical: 'critical',
+};
+
+const LIBELLE_PAR_QUALITE: Record<ReadingDataQuality, string> = {
+  good: 'Données complètes',
+  partial: 'Données partielles',
+  degraded: 'Données dégradées',
+  critical: 'Données critiques',
+};
+
+type MetricKey =
+  | 'consumption_kw'
+  | 'voltage_v'
+  | 'current_a'
+  | 'power_factor'
+  | 'temperature_celsius'
+  | 'humidity_percent';
+
+interface MetricDef {
+  key: MetricKey;
+  label: string;
+  format: (value: number) => string;
+}
+
+const CONSUMPTION_DEF: MetricDef = {
+  key: 'consumption_kw',
+  label: 'Consommation',
+  format: (v) => `${v.toFixed(1)} kW`,
+};
+
+const METRIC_DEFS: MetricDef[] = [
+  CONSUMPTION_DEF,
+  { key: 'voltage_v', label: 'Tension', format: (v) => `${v.toFixed(1)} V` },
+  { key: 'current_a', label: 'Courant', format: (v) => `${v.toFixed(1)} A` },
+  { key: 'power_factor', label: 'Cos φ', format: (v) => v.toFixed(2) },
+  { key: 'temperature_celsius', label: 'Température', format: (v) => `${v.toFixed(1)} °C` },
+  { key: 'humidity_percent', label: 'Humidité', format: (v) => `${v.toFixed(0)} %` },
+];
+
+// Contrainte : miroir de RAISON_VERS_CAPTEUR et CHAMPS_PAR_CAPTEUR (backend, services/sensor.py) ;
+// `null_reasons` porte le code de panne du capteur, jamais le nom du champ resté vide.
+const RAISONS_PAR_CHAMP: Record<MetricKey, string[]> = {
+  consumption_kw: ['consumption_sensor_failure', 'network_loss'],
+  voltage_v: ['electrical_sensor_failure', 'network_loss'],
+  current_a: ['electrical_sensor_failure', 'network_loss'],
+  power_factor: ['electrical_sensor_failure', 'network_loss'],
+  temperature_celsius: ['temperature_sensor_failure', 'network_loss'],
+  humidity_percent: ['humidity_sensor_failure', 'network_loss'],
+};
+
+const LIBELLE_PAR_RAISON: Record<string, string> = {
+  consumption_sensor_failure: 'capteur de consommation en panne',
+  electrical_sensor_failure: 'capteur électrique en panne',
+  temperature_sensor_failure: 'capteur de température en panne',
+  humidity_sensor_failure: "capteur d'humidité en panne",
+  network_loss: 'perte réseau',
+};
+
+export interface MetricView {
+  key: MetricKey;
+  label: string;
+  value: string | null;
+  reason: string;
+}
+
+@Component({
+  selector: 'app-site-detail',
+  standalone: true,
+  imports: [RouterLink, Card, Alert, Badge, Brand, ConsumptionGauge, ReadingHistoryChart],
+  templateUrl: './site-detail.html',
+  styleUrl: './site-detail.scss',
+})
+export class SiteDetail {
+  private route = inject(ActivatedRoute);
+  private sitesService = inject(SitesService);
+  private readingsService = inject(ReadingsService);
+  private destroyRef = inject(DestroyRef);
+
+  readonly noMeasurementMessage = NO_MEASUREMENT_MESSAGE;
+
+  siteId = toSignal(this.route.paramMap.pipe(map((params) => params.get('siteId') ?? '')));
+
+  site = signal<Site | null>(null);
+  current = signal<SiteCurrent | null>(null);
+  history = signal<Reading[]>([]);
+  error = signal<string | null>(null);
+
+  hasMeasurement = computed(() => this.current()?.timestamp != null);
+
+  consumptionKw = computed(() => this.current()?.consumption_kw ?? null);
+
+  consumptionLabel = computed(() => {
+    const kw = this.consumptionKw();
+    return kw != null ? CONSUMPTION_DEF.format(kw) : null;
+  });
+
+  consumptionReason = computed(() => this.reasonFor('consumption_kw', this.current()));
+
+  qualityLabel = computed(() => {
+    const quality = this.current()?.data_quality;
+    return quality ? LIBELLE_PAR_QUALITE[quality] : null;
+  });
+
+  qualityTone = computed<BadgeTone>(() => {
+    const quality = this.current()?.data_quality;
+    return quality ? TON_PAR_QUALITE[quality] : 'neutral';
+  });
+
+  metrics = computed<MetricView[]>(() => {
+    const current = this.current();
+    return METRIC_DEFS.map((def) => {
+      const valeur = current ? current[def.key] : null;
+      return {
+        key: def.key,
+        label: def.label,
+        value: valeur != null ? def.format(valeur) : null,
+        reason: valeur == null ? this.reasonFor(def.key, current) : '',
+      };
+    });
+  });
+
+  constructor() {
+    toObservable(this.siteId)
+      .pipe(
+        filter((siteId): siteId is string => !!siteId),
+        // Piège : switchMap sur le flux externe annule le chargement en cours dès qu'un
+        // nouveau siteId arrive, sinon une réponse en retard peut écraser le site affiché.
+        switchMap((siteId) => this.load(siteId)),
+        takeUntilDestroyed(this.destroyRef),
+      )
+      .subscribe((result) => {
+        this.error.set(null);
+        this.site.set(result.site);
+        this.current.set(result.current);
+        this.history.set(result.history);
+      });
+  }
+
+  badgeToneForStatus(status: string | null): BadgeTone {
+    return status ? (TON_PAR_STATUT[status] ?? 'neutral') : 'neutral';
+  }
+
+  private load(siteId: string) {
+    return forkJoin({
+      site: this.sitesService.getSite(siteId),
+      current: this.sitesService.getCurrent(siteId),
+    }).pipe(
+      switchMap(({ site, current }) =>
+        this.loadHistory(siteId, current).pipe(map((history) => ({ site, current, history }))),
+      ),
+      catchError(() => this.reportUnavailable()),
+    );
+  }
+
+  private loadHistory(siteId: string, current: SiteCurrent): Observable<Reading[]> {
+    // Piège : le jeu de données s'arrête bien avant « maintenant » ; ancrer la fenêtre sur la
+    // dernière mesure connue plutôt que sur l'horloge évite un historique systématiquement vide.
+    const end = current.timestamp;
+    if (end === null) {
+      return of([]);
+    }
+    const start = new Date(new Date(end).getTime() - HISTORY_WINDOW_MS).toISOString();
+    return this.readingsService.getHistory(siteId, start, end);
+  }
+
+  private reasonFor(field: MetricKey, current: SiteCurrent | null): string {
+    const raisons = RAISONS_PAR_CHAMP[field];
+    const trouvees = (current?.null_reasons ?? [])
+      .filter((raison) => raisons.includes(raison))
+      .map((raison) => LIBELLE_PAR_RAISON[raison] ?? raison);
+    return trouvees.length > 0 ? trouvees.join(', ') : 'cause inconnue';
+  }
+
+  // Piège : vider les signaux avec l'erreur, sinon la page garde le site précédemment chargé
+  // sous le bandeau et laisse lire les chiffres de A en croyant regarder B.
+  private reportUnavailable(): Observable<never> {
+    this.error.set(UNAVAILABLE_MESSAGE);
+    this.site.set(null);
+    this.current.set(null);
+    this.history.set([]);
+    return EMPTY;
+  }
+}

apps/frontend/src/app/features/sites/site-list/site-list.html

@@ -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>

apps/frontend/src/app/features/sites/site-list/site-list.scss

@@ -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;
+  }
+}

apps/frontend/src/app/features/sites/site-list/site-list.spec.ts

@@ -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('-');
+  });
+});

apps/frontend/src/app/features/sites/site-list/site-list.ts

@@ -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;
+  }
+}

apps/frontend/src/app/shared/components/password-requirements/password-requirements.html

@@ -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>

apps/frontend/src/app/shared/components/password-requirements/password-requirements.scss

@@ -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;
+  }
+}

apps/frontend/src/app/shared/components/password-requirements/password-requirements.spec.ts

@@ -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);
+  });
+});

apps/frontend/src/app/shared/components/password-requirements/password-requirements.ts

@@ -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()),
+    })),
+  );
+}

apps/frontend/src/app/shared/components/reading-history-chart/reading-history-chart.html

@@ -0,0 +1 @@
+<canvas #canvas></canvas>

apps/frontend/src/app/shared/components/reading-history-chart/reading-history-chart.scss

@@ -0,0 +1,4 @@
+:host {
+  display: block;
+  height: 260px;
+}

apps/frontend/src/app/shared/components/reading-history-chart/reading-history-chart.spec.ts

@@ -0,0 +1,101 @@
+import { TestBed } from '@angular/core/testing';
+import { vi } from 'vitest';
+import { Chart } from 'chart.js';
+import { ReadingHistoryChart } from './reading-history-chart';
+
+vi.mock('chart.js', () => {
+  class ChartMock {
+    static instances: ChartMock[] = [];
+    static register = vi.fn();
+    update = vi.fn();
+    destroy = vi.fn();
+    data: { labels?: unknown[]; datasets: Record<string, unknown>[] } = { datasets: [{}] };
+    constructor(_canvas: unknown, config?: { data?: ChartMock['data'] }) {
+      if (config?.data) {
+        this.data = config.data;
+      }
+      ChartMock.instances.push(this);
+    }
+  }
+  return { Chart: ChartMock, registerables: [] };
+});
+
+type ChartDouble = {
+  destroy: ReturnType<typeof vi.fn>;
+  data: { labels?: unknown[]; datasets: Record<string, unknown>[] };
+};
+
+function lastChart(): ChartDouble | undefined {
+  return (Chart as unknown as { instances: ChartDouble[] }).instances.at(-1);
+}
+
+const READING = {
+  reading_id: 1,
+  site_id: 'S1',
+  timestamp: '2026-09-17T10:00:00Z',
+  source: 'api_history' as const,
+  consumption_kw: 42,
+  consumption_kwh: null,
+  consumption_euros: null,
+  voltage_v: null,
+  current_a: null,
+  power_factor: null,
+  temperature_celsius: null,
+  humidity_percent: null,
+  solar_irradiance_wm2: null,
+  is_working_hours: null,
+  data_quality: 'good' as const,
+  null_reasons: null,
+  imputed_values: null,
+  imputation_method: null,
+};
+
+describe('ReadingHistoryChart', () => {
+  it('se crée sans erreur avec une liste de lectures valide', () => {
+    TestBed.configureTestingModule({ imports: [ReadingHistoryChart] });
+    const fixture = TestBed.createComponent(ReadingHistoryChart);
+    fixture.componentRef.setInput('readings', [READING]);
+    expect(() => fixture.detectChanges()).not.toThrow();
+  });
+
+  it('met à jour le graphique quand les lectures changent après initialisation', () => {
+    TestBed.configureTestingModule({ imports: [ReadingHistoryChart] });
+    const fixture = TestBed.createComponent(ReadingHistoryChart);
+    fixture.componentRef.setInput('readings', [READING]);
+    fixture.detectChanges();
+
+    fixture.componentRef.setInput('readings', [
+      { ...READING, reading_id: 2, consumption_kw: 60, data_quality: 'critical' as const },
+    ]);
+    fixture.detectChanges();
+
+    expect(() => fixture.detectChanges()).not.toThrow();
+  });
+
+  it("trace du plus ancien au plus récent, quel que soit l'ordre reçu de l'API", () => {
+    TestBed.configureTestingModule({ imports: [ReadingHistoryChart] });
+    const fixture = TestBed.createComponent(ReadingHistoryChart);
+    // L'API trie en timestamp décroissant : le composant doit rétablir la chronologie.
+    fixture.componentRef.setInput('readings', [
+      { ...READING, reading_id: 2, timestamp: '2026-09-17T11:00:00Z', consumption_kw: 60 },
+      { ...READING, reading_id: 1, timestamp: '2026-09-17T10:00:00Z', consumption_kw: 42 },
+    ]);
+    fixture.detectChanges();
+
+    const chart = lastChart();
+    expect(chart?.data.labels).toEqual(['2026-09-17T10:00:00Z', '2026-09-17T11:00:00Z']);
+    expect(chart?.data.datasets[0]['data']).toEqual([42, 60]);
+  });
+
+  it('détruit le graphique quand le composant est détruit', () => {
+    TestBed.configureTestingModule({ imports: [ReadingHistoryChart] });
+    const fixture = TestBed.createComponent(ReadingHistoryChart);
+    fixture.componentRef.setInput('readings', [READING]);
+    fixture.detectChanges();
+
+    const chart = lastChart();
+    fixture.destroy();
+
+    expect(chart?.destroy).toHaveBeenCalledTimes(1);
+  });
+});

apps/frontend/src/app/shared/components/reading-history-chart/reading-history-chart.ts

@@ -0,0 +1,95 @@
+import {
+  Component,
+  ElementRef,
+  ViewChild,
+  input,
+  effect,
+  AfterViewInit,
+  OnDestroy,
+} from '@angular/core';
+import { Chart, registerables } from 'chart.js';
+import { Reading, ReadingDataQuality } from '../../models/reading.model';
+
+Chart.register(...registerables);
+
+const QUALITY_COLORS: Record<ReadingDataQuality, string> = {
+  good: '#3b82f6',
+  partial: '#f9a825',
+  degraded: '#ef6c00',
+  critical: '#c62828',
+};
+const UNKNOWN_QUALITY_COLOR = '#9ca3af';
+
+interface ChartSeries {
+  labels: string[];
+  values: number[];
+  colors: string[];
+}
+
+// Piège : l'API renvoie les lectures du plus récent au plus ancien (ReadingRepository.list_history
+// trie en timestamp desc) ; sans ce tri l'axe des abscisses se lirait à rebours.
+function toSeries(readings: Reading[]): ChartSeries {
+  const ordered = [...readings].sort((a, b) => Date.parse(a.timestamp) - Date.parse(b.timestamp));
+  return {
+    labels: ordered.map((r) => r.timestamp),
+    values: ordered.map((r) => r.consumption_kw ?? 0),
+    colors: ordered.map((r) =>
+      r.data_quality ? QUALITY_COLORS[r.data_quality] : UNKNOWN_QUALITY_COLOR,
+    ),
+  };
+}
+
+@Component({
+  selector: 'app-reading-history-chart',
+  standalone: true,
+  templateUrl: './reading-history-chart.html',
+  styleUrl: './reading-history-chart.scss',
+})
+export class ReadingHistoryChart implements AfterViewInit, OnDestroy {
+  readings = input.required<Reading[]>();
+
+  @ViewChild('canvas') private canvasRef!: ElementRef<HTMLCanvasElement>;
+  private chart?: Chart<'line'>;
+
+  constructor() {
+    effect(() => {
+      const series = toSeries(this.readings());
+      if (this.chart) {
+        this.chart.data.labels = series.labels;
+        this.chart.data.datasets[0].data = series.values;
+        this.chart.data.datasets[0].pointBackgroundColor = series.colors;
+        this.chart.update('none');
+      }
+    });
+  }
+
+  ngAfterViewInit(): void {
+    const series = toSeries(this.readings());
+    this.chart = new Chart(this.canvasRef.nativeElement, {
+      type: 'line',
+      data: {
+        labels: series.labels,
+        datasets: [
+          {
+            data: series.values,
+            borderColor: '#3b82f6',
+            pointBackgroundColor: series.colors,
+            tension: 0.25,
+          },
+        ],
+      },
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: { legend: { display: false } },
+        scales: {
+          y: { beginAtZero: true, title: { display: true, text: 'Consommation (kW)' } },
+        },
+      },
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.chart?.destroy();
+  }
+}

apps/frontend/src/app/shared/components/ui/alert/alert.html

@@ -0,0 +1 @@
+<ng-content></ng-content>

apps/frontend/src/app/shared/components/ui/alert/alert.scss

@@ -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);
+}

apps/frontend/src/app/shared/components/ui/alert/alert.spec.ts

@@ -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");
+  });
+});

apps/frontend/src/app/shared/components/ui/alert/alert.ts

@@ -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';
+}

apps/frontend/src/app/shared/components/ui/badge/badge.html

@@ -0,0 +1,3 @@
+<span class="ev-badge" [class]="'ev-badge--' + tone()">
+  <ng-content></ng-content>
+</span>

apps/frontend/src/app/shared/components/ui/badge/badge.scss

@@ -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);
+}

apps/frontend/src/app/shared/components/ui/badge/badge.spec.ts

@@ -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');
+  });
+});

apps/frontend/src/app/shared/components/ui/badge/badge.ts

@@ -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');
+}

apps/frontend/src/app/shared/components/ui/brand/brand.html

@@ -0,0 +1,2 @@
+<img src="/logo-icon.png" alt="" class="ev-brand__icon" />
+<span class="ev-brand__name">EnerVision</span>

apps/frontend/src/app/shared/components/ui/brand/brand.scss

@@ -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;
+}

apps/frontend/src/app/shared/components/ui/brand/brand.spec.ts

@@ -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');
+  });
+});

apps/frontend/src/app/shared/components/ui/brand/brand.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ev-brand',
+  standalone: true,
+  templateUrl: './brand.html',
+  styleUrl: './brand.scss',
+})
+export class Brand {}

apps/frontend/src/app/shared/components/ui/button/button.html

@@ -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>

apps/frontend/src/app/shared/components/ui/button/button.scss

@@ -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);
+  }
+}

apps/frontend/src/app/shared/components/ui/button/button.spec.ts

@@ -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');
+  });
+});

apps/frontend/src/app/shared/components/ui/button/button.ts

@@ -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);
+}

apps/frontend/src/app/shared/components/ui/card/card.html

@@ -0,0 +1 @@
+<ng-content></ng-content>

apps/frontend/src/app/shared/components/ui/card/card.scss

@@ -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;
+}

apps/frontend/src/app/shared/components/ui/card/card.spec.ts

@@ -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');
+  });
+});

apps/frontend/src/app/shared/components/ui/card/card.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ev-card',
+  standalone: true,
+  templateUrl: './card.html',
+  styleUrl: './card.scss',
+})
+export class Card {}

apps/frontend/src/app/shared/models/auth-redirect-reason.ts

@@ -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.';

apps/frontend/src/app/shared/models/auth.model.ts

@@ -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;

apps/frontend/src/app/shared/models/prediction.model.ts

@@ -0,0 +1,24 @@
+export type PredictionStatus = 'available' | 'insufficient_data' | 'error';
+export type PredictionTargetMetric = 'consumption_kwh' | 'consumption_kw';
+
+export interface SitePrediction {
+  target_at: string;
+  target_metric: PredictionTargetMetric;
+  period_minutes: number | null;
+  predicted_value: number | null;
+  status: PredictionStatus;
+  failure_reason: string | null;
+  model_reference: string;
+  created_at: string;
+}
+
+export interface SitePredictionSummary {
+  site_id: string;
+  site_name: string;
+  prediction: SitePrediction | null;
+}
+
+export interface PredictionSummary {
+  timestamp: string;
+  sites: SitePredictionSummary[];
+}

apps/frontend/src/app/shared/models/reading.model.ts

@@ -0,0 +1,23 @@
+export type ReadingSource = 'csv' | 'api_current' | 'api_history';
+export type ReadingDataQuality = 'good' | 'partial' | 'degraded' | 'critical';
+
+export interface Reading {
+  reading_id: number;
+  site_id: string;
+  timestamp: string;
+  source: ReadingSource;
+  consumption_kw: number | null;
+  consumption_kwh: number | null;
+  consumption_euros: string | null;
+  voltage_v: number | null;
+  current_a: number | null;
+  power_factor: number | null;
+  temperature_celsius: number | null;
+  humidity_percent: number | null;
+  solar_irradiance_wm2: number | null;
+  is_working_hours: boolean | null;
+  data_quality: ReadingDataQuality | null;
+  null_reasons: string[] | null;
+  imputed_values: Record<string, unknown> | null;
+  imputation_method: string | null;
+}

apps/frontend/src/app/shared/models/site-current.model.ts

@@ -0,0 +1,16 @@
+import { ReadingDataQuality } from './reading.model';
+
+export interface SiteCurrent {
+  timestamp: string | null;
+  site_id: string;
+  site_type: string;
+  consumption_kw: number | null;
+  consumption_kwh: number | null;
+  voltage_v: number | null;
+  current_a: number | null;
+  power_factor: number | null;
+  temperature_celsius: number | null;
+  humidity_percent: number | null;
+  null_reasons: string[];
+  data_quality: ReadingDataQuality;
+}

apps/frontend/src/app/shared/models/site.model.ts

@@ -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;
+}

apps/frontend/src/app/shared/validators/password.validator.spec.ts

@@ -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);
+  });
+});

apps/frontend/src/app/shared/validators/password.validator.ts

@@ -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) },
+];

apps/frontend/src/environments/environment.development.ts

@@ -1,5 +1,5 @@
 export const environment = {
   production: false,
   apiUrl: '/api/v1',
-  useMockFixtures: true, // a passer a false une fois le backend prêt
+  useMockFixtures: false,
 };

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>

apps/frontend/src/styles.scss

@@ -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);
+}

apps/frontend/src/styles/_auth-page.scss

@@ -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;
+  }
+}

apps/frontend/src/styles/_forms.scss

@@ -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;
+}

apps/frontend/src/styles/_links.scss

@@ -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;
+}

apps/frontend/src/styles/_tokens.scss

@@ -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;
+}

apps/frontend/vitest.config.ts

@@ -0,0 +1,18 @@
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+  test: {
+    coverage: {
+      provider: 'v8',
+      reporter: ['text', 'lcov'],
+      reportsDirectory: './coverage',
+      include: ['src/**/*.{ts,tsx,js,jsx}'],
+      exclude: [
+        '**/*.spec.*',
+        '**/*.test.*',
+        '**/node_modules/**',
+        '**/dist/**',
+      ],
+    },
+  },
+})