Sélecteur de mois : libellés courts et grille de 6 par ligne

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.

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>

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));

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());