diff --git a/backend/SchotzIadKmTracker.Api/Controllers/TrajetsController.cs b/backend/SchotzIadKmTracker.Api/Controllers/TrajetsController.cs
index 5873fdd..00bbf4e 100644
--- a/backend/SchotzIadKmTracker.Api/Controllers/TrajetsController.cs
+++ b/backend/SchotzIadKmTracker.Api/Controllers/TrajetsController.cs
@@ -236,6 +236,7 @@ public class TrajetsController : ControllerBase
                 arrivee?.Latitude,
                 arrivee?.Longitude,
                 geometrie,
+                trajet.Commentaire,
                 trajet.AllerRetour));
         }
 
diff --git a/backend/SchotzIadKmTracker.Api/Models/DTOs/TrajetDtos.cs b/backend/SchotzIadKmTracker.Api/Models/DTOs/TrajetDtos.cs
index 8b8dee2..f2609e6 100644
--- a/backend/SchotzIadKmTracker.Api/Models/DTOs/TrajetDtos.cs
+++ b/backend/SchotzIadKmTracker.Api/Models/DTOs/TrajetDtos.cs
@@ -58,8 +58,9 @@ public record TrajetCarteDto(
     double? DepartLongitude,
     double? ArriveeLatitude,
     double? ArriveeLongitude,
-    string? GeometrieJson,  // GeoJSON LineString ou null
-    bool AllerRetour = false // information aller/retour conservée par trajet
+    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
 );
 
 // Réordonnancement manuel des trajets d'une journée
diff --git a/frontend/src/app/core/models/trajet.model.ts b/frontend/src/app/core/models/trajet.model.ts
index da1513f..1fc9ad4 100644
--- a/frontend/src/app/core/models/trajet.model.ts
+++ b/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
 }
 
diff --git a/frontend/src/app/features/carte-trajets/carte-trajets.component.ts b/frontend/src/app/features/carte-trajets/carte-trajets.component.ts
index a374502..ece3aac 100644
--- a/frontend/src/app/features/carte-trajets/carte-trajets.component.ts
+++ b/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>
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index 3e8900f..330ea0f 100644
--- a/frontend/src/styles.scss
+++ b/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