From 4ef7ee7f5abba500c798a25ae2d1788197e50b6e Mon Sep 17 00:00:00 2001
From: Nikolaz <webmadjax@yahoo.fr>
Date: Wed, 16 Sep 2026 06:43:12 +0200
Subject: [PATCH] =?UTF-8?q?S=C3=A9lecteur=20:=20affiche=20=C2=AB=20Mois=20?=
 =?UTF-8?q?Ann=C3=A9e=20=C2=BB=20=C3=A0=20droite=20du=20bouton=20d'en-t?=
 =?UTF-8?q?=C3=AAte?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Le mois et l'année sélectionnés (ex. « Septembre 2026 ») sont affichés à droite
du libellé « 📅 Choisir un mois », séparés par un léger trait. Vide tant qu'aucun
mois n'est choisi. Permet de connaître la période courante sans déplier le
sélecteur.

Build prod OK.
---
 .../selecteur-temporel.component.html               |  3 +++
 .../selecteur-temporel.component.scss               |  9 +++++++++
 .../selecteur-temporel.component.ts                 | 13 +++++++++++++
 3 files changed, 25 insertions(+)

diff --git a/frontend/src/app/features/navigation-temporelle/selecteur-temporel.component.html b/frontend/src/app/features/navigation-temporelle/selecteur-temporel.component.html
index 2c1946b..771b639 100644
--- a/frontend/src/app/features/navigation-temporelle/selecteur-temporel.component.html
+++ b/frontend/src/app/features/navigation-temporelle/selecteur-temporel.component.html
@@ -7,6 +7,9 @@
     (click)="basculerOuverture()">
     <span class="selecteur-entete__chevron" aria-hidden="true">{{ ouvert() ? '▾' : '▸' }}</span>
     <span class="selecteur-entete__libelle">📅 Choisir un mois</span>
+    @if (libelleMoisAnnee) {
+      <span class="selecteur-entete__selection">{{ libelleMoisAnnee }}</span>
+    }
   </button>
 
   <div class="selecteur-contenu" *ngIf="ouvert()">
diff --git a/frontend/src/app/features/navigation-temporelle/selecteur-temporel.component.scss b/frontend/src/app/features/navigation-temporelle/selecteur-temporel.component.scss
index 7533ad0..a5b455e 100644
--- a/frontend/src/app/features/navigation-temporelle/selecteur-temporel.component.scss
+++ b/frontend/src/app/features/navigation-temporelle/selecteur-temporel.component.scss
@@ -29,6 +29,15 @@
     font-size: 0.85rem;
     color: #64748b;
   }
+
+  // « Mois Année » sélectionné, affiché à droite du libellé.
+  &__selection {
+    margin-left: 0.35rem;
+    padding-left: 0.6rem;
+    border-left: 1px solid #e2e8f0;
+    color: #2563eb;
+    font-weight: 700;
+  }
 }
 
 // Contenu déplié : les trois groupes de pastilles.
diff --git a/frontend/src/app/features/navigation-temporelle/selecteur-temporel.component.ts b/frontend/src/app/features/navigation-temporelle/selecteur-temporel.component.ts
index bf85ffe..48c937a 100644
--- a/frontend/src/app/features/navigation-temporelle/selecteur-temporel.component.ts
+++ b/frontend/src/app/features/navigation-temporelle/selecteur-temporel.component.ts
@@ -81,6 +81,19 @@ export class SelecteurTemporelComponent implements OnInit, OnChanges {
   /** État d'ouverture du conteneur repliable (fermé par défaut). */
   readonly ouvert = signal(false);
 
+  /**
+   * Libellé « Mois Année » de la sélection courante (ex. « Septembre 2026 »),
+   * affiché à droite du bouton d'en-tête. Vide tant qu'aucun mois n'est choisi.
+   */
+  get libelleMoisAnnee(): string {
+    const annee = this.anneeSelectionnee();
+    const mois = this.moisSelectionneSignal();
+    if (annee == null || mois == null) {
+      return '';
+    }
+    return `${this.nomsMois[mois - 1]} ${annee}`;
+  }
+
   /** Bascule l'ouverture / fermeture du sélecteur repliable. */
   basculerOuverture(): void {
     this.ouvert.update((v) => !v);