Infobulle carte : commentaire en tête + « (A/R) » après la distance

- Backend : TrajetCarteDto expose désormais le commentaire du trajet ; la
  projection de GET /api/trajets/journee/{date} le renseigne.
- Frontend : l'interface TrajetCarte porte le commentaire. L'infobulle affiche
  le commentaire en première ligne (s'il existe, séparé par un léger trait) et
  ajoute « (A/R) » après la distance pour un aller/retour.
- Style .carte-infobulle__commentaire (italique, discret) dans les styles
  globaux.

Builds backend, frontend dev et prod OK.

backend/SchotzIadKmTracker.Api/Controllers/TrajetsController.cs

@@ -236,6 +236,7 @@ public class TrajetsController : ControllerBase
                 arrivee?.Latitude,
                 arrivee?.Longitude,
                 geometrie,
+                trajet.Commentaire,
                 trajet.AllerRetour));
         }
 

backend/SchotzIadKmTracker.Api/Models/DTOs/TrajetDtos.cs

@@ -59,6 +59,7 @@ public record TrajetCarteDto(
     double? ArriveeLatitude,
     double? ArriveeLongitude,
     string? GeometrieJson,      // GeoJSON LineString ou null
+    string? Commentaire = null, // commentaire du trajet (affiché dans l'infobulle carte)
     bool AllerRetour = false    // information aller/retour conservée par trajet
 );
 

frontend/src/app/core/models/trajet.model.ts

@@ -48,8 +48,7 @@ export interface Trajet {
 
 /**
  * Trajet enrichi pour l'affichage carte (géométries GeoJSON).
- * Note : ce DTO ne porte PAS de `commentaire` (le commentaire n'est affiché que
- * dans la liste des trajets, via l'interface `Trajet`, jamais dans l'infobulle carte).
+ * Le `commentaire` est exposé pour être affiché en tête de l'infobulle carte.
  */
 export interface TrajetCarte {
   id: number;
@@ -62,6 +61,7 @@ export interface TrajetCarte {
   arriveeLatitude?: number | null;
   arriveeLongitude?: number | null;
   geometrieJson: string | null; // GeoJSON LineString ou null
+  commentaire?: string | null;  // commentaire du trajet (affiché en tête de l'infobulle)
   allerRetour?: boolean;        // information aller/retour conservée par trajet
 }
 

frontend/src/app/features/carte-trajets/carte-trajets.component.ts

@@ -413,12 +413,25 @@ export class CarteTrajetsComponent implements AfterViewInit, OnChanges, OnDestro
       : null;
   }
 
-  /** Contenu HTML de l'infobulle : départ, arrivée, distance (Exigence 8.3). */
+  /**
+   * Contenu HTML de l'infobulle : commentaire (en tête, s'il existe), départ,
+   * arrivée, puis distance suivie de « (A/R) » pour un aller/retour (Exigence 8.3).
+   */
   private contenuInfobulle(trajet: TrajetCarte): string {
-    const distance =
+    const distanceBase =
       trajet.distance != null ? `${trajet.distance.toFixed(2)} km` : 'distance non calculée';
+    // Précise l'aller/retour après la distance (la distance affichée est déjà la
+    // distance effective doublée côté API).
+    const distance = trajet.allerRetour ? `${distanceBase} (A/R)` : distanceBase;
+
+    const commentaire = trajet.commentaire?.trim();
+    const ligneCommentaire = commentaire
+      ? `<div class="carte-infobulle__commentaire">${this.echapper(commentaire)}</div>`
+      : '';
+
     return `
       <div class="carte-infobulle">
+        ${ligneCommentaire}
         <div><strong>Départ :</strong> ${this.echapper(trajet.adresseDepart)}</div>
         <div><strong>Arrivée :</strong> ${this.echapper(trajet.adresseArrivee)}</div>
         <div><strong>Distance :</strong> ${distance}</div>

frontend/src/styles.scss

@@ -38,6 +38,15 @@ html, body {
   div {
     margin: 2px 0;
   }
+
+  /* Commentaire en tête de l'infobulle : mis en avant, discret et italique. */
+  &__commentaire {
+    margin: 0 0 4px;
+    padding-bottom: 4px;
+    border-bottom: 1px solid #e2e8f0;
+    font-style: italic;
+    color: #475569;
+  }
 }
 
 /* Contrainte de taille des popups Leaflet pour éviter tout débordement de la zone