From f6445d66af10bae16b4e6accc775ef9931116de8 Mon Sep 17 00:00:00 2001
From: Nikolaz <webmadjax@yahoo.fr>
Date: Sun, 11 Oct 2026 20:51:15 +0200
Subject: [PATCH] =?UTF-8?q?S=C3=A9lecteur=20de=20mois=20:=20libell=C3=A9s?=
 =?UTF-8?q?=20courts=20et=20grille=20de=206=20par=20ligne?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Les libellés longs de largeur variable débordaient sur 3 lignes. Les
mois s'affichent désormais en abrégé (Janv., Févr., …), centrés, dans
une grille de 6 colonnes égales (2 rangées de 6, boutons de largeur
constante). Le nom complet du mois reste disponible en infobulle. Le
groupe des années et le mode « année seule » sont inchangés.
---
 .../selecteur-temporel.component.html               |  7 ++++---
 .../selecteur-temporel.component.scss               | 13 +++++++++++++
 .../selecteur-temporel.component.ts                 |  8 +++++++-
 3 files changed, 24 insertions(+), 4 deletions(-)

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 f73dd27..278c692 100644
--- a/frontend/src/app/features/navigation-temporelle/selecteur-temporel.component.html
+++ b/frontend/src/app/features/navigation-temporelle/selecteur-temporel.component.html
@@ -37,17 +37,18 @@
       aria-label="Sélection du mois"
       *ngIf="!modeAnneeSeule && anneeSelectionnee() !== null">
       <span class="selecteur-titre">Mois</span>
-      <div class="selecteur-boutons">
+      <div class="selecteur-boutons selecteur-boutons--mois">
         <button
           type="button"
           *ngFor="let m of mois"
-          class="pastille"
+          class="pastille pastille--mois"
           [class.selectionne]="m === moisSelectionneSignal()"
           [class.avec-donnees]="moisADonnees(m)"
           [disabled]="estMoisFutur(anneeSelectionnee()!, m)"
           [attr.aria-pressed]="m === moisSelectionneSignal()"
+          [title]="nomsMois[m - 1]"
           (click)="selectionnerMois(m)">
-          {{ nomsMois[m - 1] }}
+          {{ nomsMoisCourts[m - 1] }}
         </button>
       </div>
     </div>
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 53c9d51..5d043c0 100644
--- a/frontend/src/app/features/navigation-temporelle/selecteur-temporel.component.scss
+++ b/frontend/src/app/features/navigation-temporelle/selecteur-temporel.component.scss
@@ -67,6 +67,19 @@
   gap: 0.4rem;
 }
 
+// Grille des mois : 6 colonnes de largeur égale → 2 rangées de 6, boutons de
+// largeur constante (libellés courts centrés).
+.selecteur-boutons--mois {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+}
+
+.pastille--mois {
+  text-align: center;
+  padding-left: 0.3rem;
+  padding-right: 0.3rem;
+}
+
 .selecteur-jours {
   display: grid;
   grid-template-columns: repeat(7, minmax(2.2rem, 1fr));
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 d3a32b2..daf1439 100644
--- a/frontend/src/app/features/navigation-temporelle/selecteur-temporel.component.ts
+++ b/frontend/src/app/features/navigation-temporelle/selecteur-temporel.component.ts
@@ -68,12 +68,18 @@ export class SelecteurTemporelComponent implements OnInit, OnChanges {
   /** Émis à chaque sélection d'année — mode « année seule ». */
   @Output() readonly anneeChoisie = new EventEmitter<number>();
 
-  /** Libellés des douze mois (index 0 = janvier). */
+  /** Libellés des douze mois (index 0 = janvier), utilisés pour l'en-tête « Mois Année ». */
   readonly nomsMois = [
     'Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin',
     'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'
   ];
 
+  /** Libellés courts des douze mois (index 0 = janvier), pour les pastilles de la grille. */
+  readonly nomsMoisCourts = [
+    'Janv.', 'Févr.', 'Mars', 'Avr.', 'Mai', 'Juin',
+    'Juil.', 'Août', 'Sept.', 'Oct.', 'Nov.', 'Déc.'
+  ];
+
   /** Date du jour, tronquée à minuit, pour borner les sélections futures. */
   private readonly aujourdHui = this.debutDeJournee(new Date());