feat(frontend): design système - tokens, composants ui et restylage des pages

Centralise les couleurs/rayons/espacements dispersés en dur dans chaque page
(login, change-password, dashboard) en tokens CSS partagés, ajoute un petit
set de composants standalone réutilisables (ev-button, ev-card, ev-alert,
ev-badge) et intègre le logo EnerVision en en-tête des pages ainsi que dans
Swagger/ReDoc côté backend.

Refs #91

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

@@ -1,19 +1,22 @@
 <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">
+      <img src="logo.png" alt="EnerVision" class="dashboard__logo" />
+      <div>
+        <h1>Vue d'ensemble</h1>
+        <p class="dashboard__subtitle">Consommation instantanée du parc</p>
+      </div>
     </div>
     <button type="button" class="logout-button" (click)="onLogout()">Déconnexion</button>
   </header>
 
   @if (error(); as message) {
-    <p class="banner-error" role="alert">{{ message }}</p>
+    <ev-alert severity="danger" class="banner-error">{{ message }}</ev-alert>
   }
 
   @if (stats(); as s) {
     <section class="overview">
-      <div class="card card--gauge">
+      <ev-card class="card card--gauge">
         <span class="card__label">Consommation vs capacité</span>
         <app-consumption-gauge
           [consumption]="s.total_consumption_kw"
@@ -23,20 +26,20 @@
           >{{ s.total_consumption_kw | number: '1.0-1' }} /
           {{ s.total_capacity_kw | number }} kW</span
         >
-      </div>
+      </ev-card>
 
-      <div class="card">
+      <ev-card class="card">
         <span class="card__label">Charge moyenne du parc</span>
         <span class="card__value">{{ s.average_load_percent }} %</span>
         <div class="progress-bar">
           <div class="progress-bar__fill" [style.width.%]="s.average_load_percent"></div>
         </div>
-      </div>
+      </ev-card>
 
-      <div class="card">
+      <ev-card class="card">
         <span class="card__label">Sites suivis</span>
         <span class="card__value">{{ s.total_sites }}</span>
-      </div>
+      </ev-card>
     </section>
 
     <section class="chart-section">
@@ -50,8 +53,8 @@
       <h2>Alertes actives</h2>
       <ul class="alerts-list">
         @for (alert of alerts(); track alert.alert_id) {
-          <li class="alert-item" [class]="'alert-item--' + alert.severity">
-            <span class="alert-item__badge">{{ alert.severity }}</span>
+          <li class="alert-item">
+            <ev-badge [tone]="badgeToneForSeverity(alert.severity)">{{ alert.severity }}</ev-badge>
             <span class="alert-item__message">{{ alert.message }}</span>
           </li>
         }

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;
+  color: var(--color-text);
   padding: 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,6 +25,11 @@
   }
 }
 
+.dashboard__logo {
+  height: 40px;
+  width: auto;
+}
+
 .dashboard__subtitle {
   margin: 0.25rem 0 0;
   color: var(--color-text-muted);
@@ -38,13 +42,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 +54,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 +77,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 +108,26 @@ h2 {
   align-items: center;
   gap: 0.75rem;
   padding: 0.7rem 1rem;
-  border-radius: var(--radius);
-  background: #fef2f2;
-  border: 1px solid #fecaca;
-}
-
-.alert-item__badge {
-  font-size: 0.7rem;
-  font-weight: 700;
-  text-transform: uppercase;
-  padding: 0.2rem 0.55rem;
-  border-radius: 999px;
-  color: #fff;
-  background: var(--color-critical);
-  flex-shrink: 0;
-}
-
-.alert-item--high .alert-item__badge {
-  background: var(--color-degraded);
-}
-.alert-item--medium .alert-item__badge {
-  background: var(--color-partial);
-}
-.alert-item--low .alert-item__badge {
-  background: var(--color-good);
+  border-radius: var(--radius-md);
+  background: var(--color-danger-bg);
+  border: 1px solid var(--color-danger-border);
 }
 
 .alert-item__message {
   font-size: 0.9rem;
 }
-.dashboard__header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  margin-bottom: 2rem;
-
-  h1 {
-    margin: 0;
-    font-size: 1.75rem;
-    font-weight: 700;
-  }
-}
 
 .logout-button {
   padding: 0.5rem 1rem;
-  background: #ffffff;
-  border: 1px solid #d1d5db;
-  border-radius: 8px;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
   font-size: 0.85rem;
   font-weight: 600;
-  color: #374151;
+  color: var(--color-label);
   cursor: pointer;
 
   &:hover {
-    background: #f3f4f6;
+    background: var(--color-bg);
   }
 }

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

@@ -9,16 +9,26 @@ import { SiteLoadChart } from '../../shared/components/site-load-chart/site-load
 import { AlertsService } from '../../core/services/alerts.service';
 import { AuthService } from '../../core/services/auth.service';
 import { StatsSummary } from '../../shared/models/stats.model';
-import { Alert } from '../../shared/models/alert.model';
+import { Alert, AlertSeverity } from '../../shared/models/alert.model';
+import { Card } from '../../shared/components/ui/card/card';
+import { Alert as EvAlert } from '../../shared/components/ui/alert/alert';
+import { Badge, BadgeTone } from '../../shared/components/ui/badge/badge';
 
 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: 'danger',
+};
+
 @Component({
   selector: 'app-dashboard',
   standalone: true,
-  imports: [DecimalPipe, ConsumptionGauge, SiteLoadChart],
+  imports: [DecimalPipe, ConsumptionGauge, SiteLoadChart, Card, EvAlert, Badge],
   templateUrl: './dashboard.html',
   styleUrl: './dashboard.scss',
 })
@@ -54,6 +64,10 @@ export class Dashboard implements OnInit {
       });
   }
 
+  badgeToneForSeverity(severity: AlertSeverity): BadgeTone {
+    return TON_PAR_SEVERITE[severity];
+  }
+
   onLogout(): void {
     this.auth.logout().subscribe({
       next: () => this.router.navigate(['/login']),