Liste : journées repliables + libellé « Choisir un mois »

- Sélecteur temporel : libellé « 📅 Choisir une date » → « 📅 Choisir un mois ».

- Liste mensuelle : chaque journée est désormais repliable (en-tête cliquable
  avec chevron, date et nombre de trajets). Par défaut toutes les journées sont
  repliées ; au changement de mois, seule la dernière journée comportant des
  trajets est dépliée. Les mises à jour au sein du même mois (ajout, suppression,
  réordonnancement) conservent l'état d'ouverture courant.

- La date, désormais portée par l'en-tête du groupe, est retirée de chaque ligne
  de trajet (suppression du doublon) ; le commentaire occupe seul sa ligne.

Builds dev et prod OK.

frontend/src/app/features/navigation-temporelle/selecteur-temporel.component.html

@@ -6,7 +6,7 @@
     [attr.aria-expanded]="ouvert()"
     (click)="basculerOuverture()">
     <span class="selecteur-entete__chevron" aria-hidden="true">{{ ouvert() ? '▾' : '▸' }}</span>
-    <span class="selecteur-entete__libelle">📅 Choisir une date</span>
+    <span class="selecteur-entete__libelle">📅 Choisir un mois</span>
   </button>
 
   <div class="selecteur-contenu" *ngIf="ouvert()">

frontend/src/app/features/trajet-list/trajet-list.component.html

@@ -5,8 +5,19 @@
        Les listes NE sont PAS connectées entre elles → drag limité à chaque jour. -->
   @for (groupe of groupes(); track groupe.date) {
     <section class="jour" aria-label="Trajets d'une journée">
-      <h3 class="jour__entete">{{ groupe.date | date: 'dd/MM/yyyy' }}</h3>
+      <!-- En-tête repliable : chevron + date + nombre de trajets. -->
+      <button
+        type="button"
+        class="jour__entete"
+        [attr.aria-expanded]="estOuvert(groupe)"
+        (click)="basculerJour(groupe)"
+      >
+        <span class="jour__chevron" aria-hidden="true">{{ estOuvert(groupe) ? '▾' : '▸' }}</span>
+        <span class="jour__date">{{ groupe.date | date: 'dd/MM/yyyy' }}</span>
+        <span class="jour__compteur">{{ groupe.trajets.length }} trajet{{ groupe.trajets.length > 1 ? 's' : '' }}</span>
+      </button>
 
+      @if (estOuvert(groupe)) {
       <ul
         class="trajets"
         cdkDropList
@@ -44,12 +55,11 @@
             </div>
 
             <div class="trajet__infos">
-              <div class="trajet__ligne">
-                <span class="trajet__date">{{ trajet.date | date: 'dd/MM/yyyy' }}</span>
               @if (trajet.commentaire) {
+                <div class="trajet__ligne">
                   <span class="trajet__commentaire">{{ trajet.commentaire }}</span>
-                }
                 </div>
+              }
               <div class="trajet__adresses">
                 <span class="trajet__depart">{{ trajet.adresseDepart }}</span>
                 <span class="trajet__fleche" aria-hidden="true">→</span>
@@ -110,6 +120,7 @@
           </li>
         }
       </ul>
+      }
     </section>
   }
 }

frontend/src/app/features/trajet-list/trajet-list.component.scss

@@ -11,17 +11,44 @@
   padding: 0.5rem 0;
 
   &__entete {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    width: 100%;
     margin: 0 0 0.4rem;
-    padding: 0.35rem 0.5rem;
+    padding: 0.4rem 0.5rem;
     font-size: 0.85rem;
     font-weight: 700;
     color: #334155;
     background: #f1f5f9;
+    border: 1px solid #e2e8f0;
     border-radius: 6px;
-    text-transform: none;
+    text-align: left;
+    cursor: pointer;
     position: sticky;
     top: 0;
     z-index: 1;
+
+    &:hover {
+      background: #e9eef4;
+    }
+  }
+
+  &__chevron {
+    flex: 0 0 auto;
+    color: #64748b;
+    font-size: 0.75rem;
+  }
+
+  &__date {
+    flex: 1 1 auto;
+  }
+
+  &__compteur {
+    flex: 0 0 auto;
+    font-weight: 500;
+    font-size: 0.75rem;
+    color: #64748b;
   }
 
   & + .jour {
@@ -81,11 +108,6 @@
     font-style: italic;
     line-height: 1.3;
     word-break: break-word;
-    // Séparateur visuel discret entre la date et le commentaire.
-    &::before {
-      content: '— ';
-      color: #cbd5e1;
-    }
   }
 
   &__adresses {

frontend/src/app/features/trajet-list/trajet-list.component.ts

@@ -96,6 +96,7 @@ export class TrajetListComponent {
   @Input() set trajets(valeur: Trajet[] | null) {
     this._trajets = valeur ?? [];
     this.trajetsSource.set([...this._trajets]);
+    this.reinitialiserRepliageSiMoisChange();
   }
   get trajets(): Trajet[] {
     return this._trajets;
@@ -132,6 +133,16 @@ export class TrajetListComponent {
   /** Source brute des trajets du mois (mise à jour à chaque changement d'entrée). */
   private readonly trajetsSource = signal<Trajet[]>([]);
 
+  /**
+   * Dates (`yyyy-MM-dd`) des journées dépliées. Par défaut toutes les journées
+   * sont repliées ; au changement de mois, seule la dernière journée comportant
+   * des trajets est dépliée.
+   */
+  private readonly joursOuverts = signal<Set<string>>(new Set<string>());
+
+  /** Préfixe `yyyy-MM` du mois actuellement affiché, pour détecter un changement de mois. */
+  private moisAffiche: string | null = null;
+
   /**
    * Trajets regroupés par journée, source d'affichage. Les groupes sont triés par
    * date croissante ; à l'intérieur d'un groupe, les trajets sont triés par position
@@ -171,6 +182,54 @@ export class TrajetListComponent {
   /** True pendant l'appel de suppression / réordonnancement (désactive les actions). */
   readonly operationEnCours = signal(false);
 
+  // --- Repliage par journée ---
+
+  /**
+   * Recalcule l'état de repliage quand le mois affiché change (nouvel ensemble de
+   * trajets appartenant à un autre mois). Toutes les journées sont repliées, sauf la
+   * dernière journée comportant des trajets qui est dépliée. Les mises à jour au sein
+   * du même mois (ajout / suppression / réordonnancement) conservent l'état courant.
+   */
+  private reinitialiserRepliageSiMoisChange(): void {
+    const dates = this.trajetsSource()
+      .map((t) => (t.date ?? '').slice(0, 10))
+      .filter((d) => d.length === 10)
+      .sort();
+    const moisCourant = dates.length > 0 ? dates[0].slice(0, 7) : null;
+
+    if (moisCourant === this.moisAffiche) {
+      // Même mois : purge les dates disparues, conserve le reste de l'état.
+      const presentes = new Set(dates);
+      const conserves = new Set(
+        [...this.joursOuverts()].filter((d) => presentes.has(d))
+      );
+      this.joursOuverts.set(conserves);
+      return;
+    }
+
+    this.moisAffiche = moisCourant;
+    const dernierJour = dates.length > 0 ? dates[dates.length - 1] : null;
+    this.joursOuverts.set(dernierJour ? new Set<string>([dernierJour]) : new Set<string>());
+  }
+
+  /** Vrai si la journée est dépliée (ses trajets sont visibles). */
+  estOuvert(groupe: GroupeJour): boolean {
+    return this.joursOuverts().has(groupe.date);
+  }
+
+  /** Bascule le repliage d'une journée (déplie / replie). */
+  basculerJour(groupe: GroupeJour): void {
+    this.joursOuverts.update((ouverts) => {
+      const suivant = new Set(ouverts);
+      if (suivant.has(groupe.date)) {
+        suivant.delete(groupe.date);
+      } else {
+        suivant.add(groupe.date);
+      }
+      return suivant;
+    });
+  }
+
   // --- Helpers d'affichage ---
 
   /** Vrai si le trajet est le dernier DE SA JOURNÉE (pas d'« insérer avant le suivant »). */