SchotzIAD KM Tracker : suivi des trajets kilométriques (Angular + .NET 8)

Application complète de saisie et de suivi des trajets kilométriques avec
calcul de distance routière (OpenRouteService), barème kilométrique, résumés
et régularisation annuelle.

Backend (ASP.NET Core .NET 8, EF Core, SQLite) :
- Trajets (CRUD, réordonnancement, insertion), calcul de distance ORS avec
  fallback Haversine, géométrie d'itinéraire stockée par trajet, recalcul en masse.
- Profil, véhicules (avec dénomination), carnet d'adresses nommées, cache d'adresses.
- Barème kilométrique : tranches multiples par puissance fiscale, borne max
  exclusive avec 'illimité' (KmMax nullable), coefficient à 3 décimales,
  recopie du dernier barème connu.
- Résumés mensuel/annuel, montants réglés, régularisation, export PDF.

Frontend (Angular 22, zoneless + signals) :
- Consultation par jour, navigation temporelle synchronisée, carte Leaflet,
  formulaire de trajet (adresses nommées, domicile, autocomplétion BAN).
- Détection de changement zoneless (indépendante de zone.js).

Hébergement : Docker Compose (nginx + backend), scripts run-dev.sh / run-docker.sh.

frontend/src/app/features/consultation-jour/consultation-jour.component.scss

@@ -0,0 +1,183 @@
+:host {
+  display: block;
+}
+
+.consultation {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1.5rem;
+  max-width: 1400px;
+  margin: 0 auto;
+
+  &__barre {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    gap: 1rem 1.5rem;
+    padding: 1rem;
+    background: #f7f8fa;
+    border: 1px solid #e3e6ea;
+    border-radius: 8px;
+  }
+
+  &__navigation {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+  }
+
+  &__nav-bouton {
+    padding: 0.4rem 0.9rem;
+    border: 1px solid #c7ccd3;
+    border-radius: 6px;
+    background: #fff;
+    cursor: pointer;
+    font-size: 0.9rem;
+
+    &:hover:not(:disabled) {
+      background: #eef1f5;
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  }
+
+  &__date {
+    min-width: 6.5rem;
+    text-align: center;
+    font-variant-numeric: tabular-nums;
+    font-weight: 600;
+  }
+
+  &__vehicule {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    margin-left: auto;
+  }
+
+  &__vehicule-libelle {
+    font-size: 0.8rem;
+    color: #5a616b;
+  }
+
+  &__vehicule-select {
+    padding: 0.4rem 0.6rem;
+    border: 1px solid #c7ccd3;
+    border-radius: 6px;
+    background: #fff;
+    min-width: 12rem;
+  }
+
+  // --- Corps deux colonnes ---
+  &__corps {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(380px, 520px);
+    gap: 1.5rem;
+    align-items: start;
+  }
+
+  &__principal {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    min-width: 0;
+  }
+
+  &__formulaire {
+    padding: 1rem;
+    border: 1px solid #e3e6ea;
+    border-radius: 8px;
+    background: #fff;
+  }
+
+  &__actions {
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  &__ajouter {
+    padding: 0.5rem 1rem;
+    border: none;
+    border-radius: 6px;
+    background: #1976d2;
+    color: #fff;
+    cursor: pointer;
+    font-size: 0.9rem;
+
+    &:hover {
+      background: #135ba1;
+    }
+  }
+
+  &__erreur {
+    color: #b3261e;
+    margin: 0;
+  }
+
+  &__chargement {
+    color: #5a616b;
+    margin: 0;
+  }
+
+  // Zone des trajets : scroll vertical quand la liste est haute (Exigence 12.6).
+  &__liste {
+    max-height: 55vh;
+    overflow-y: auto;
+    border: 1px solid #e3e6ea;
+    border-radius: 8px;
+    background: #fff;
+  }
+
+  &__vide {
+    padding: 1rem;
+    margin: 0;
+    color: #5a616b;
+  }
+
+  // Panneau latéral toujours visible (sticky) : totaux + carte (Exigence 12.9).
+  &__panneau {
+    position: sticky;
+    top: 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+}
+
+// --- Modale du formulaire de trajet (réutilise le motif d'overlay du ConfirmDialog) ---
+.modale-overlay {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  background: rgba(15, 23, 42, 0.45);
+  z-index: 1000;
+  padding: 2rem 1rem;
+  overflow-y: auto;
+}
+
+.modale-panneau {
+  background: #fff;
+  border-radius: 10px;
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
+  max-width: 640px;
+  width: 100%;
+  padding: 1.5rem;
+  margin: auto;
+}
+
+// Repli en une colonne sur petits écrans : le panneau redevient statique.
+@media (max-width: 900px) {
+  .consultation__corps {
+    grid-template-columns: 1fr;
+  }
+
+  .consultation__panneau {
+    position: static;
+  }
+}