feat : en-tête « Mois Année » constant + année courante centrée (2e ligne/2e col) + cycle de vues

- l'en-tête affiche toujours « Mois Année » avec chevron bas dans les 3 vues
- le clic sur l'en-tête cycle jours -> mois -> années -> jours (goToHigherView -> cycleView)
- la grille d'années cale l'année courante en index 4 (yearPageStart = courante - 4)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

app/components/malio/date/composables/useCalendarPopover.test.ts

@@ -30,21 +30,21 @@ describe('useCalendarPopover', () => {
     expect(api.viewMode.value).toBe('days')
   })
 
-  it('goToHigherView() climbs days -> months -> years and stops', () => {
+  it('cycleView() cycles days -> months -> years -> days', () => {
     const {api} = mountHost()
     api.open()
-    api.goToHigherView()
+    api.cycleView()
     expect(api.viewMode.value).toBe('months')
-    api.goToHigherView()
+    api.cycleView()
     expect(api.viewMode.value).toBe('years')
-    api.goToHigherView()
-    expect(api.viewMode.value).toBe('years') // no-op au niveau le plus haut
+    api.cycleView()
+    expect(api.viewMode.value).toBe('days') // boucle vers le bas depuis 'years'
   })
 
   it('close() resets isOpen and viewMode', () => {
     const {api} = mountHost()
     api.open()
-    api.goToHigherView()
+    api.cycleView()
     api.close()
     expect(api.isOpen.value).toBe(false)
     expect(api.viewMode.value).toBe('days')

app/components/malio/date/composables/useCalendarPopover.ts

@@ -12,10 +12,11 @@ export function useCalendarPopover(rootRef: Ref<HTMLElement | null>) {
     isOpen.value = false
     viewMode.value = 'days'
   }
-  const goToHigherView = () => {
+  // Le clic sur l'en-tête fait un cycle : jours → mois → années → jours.
+  const cycleView = () => {
     if (viewMode.value === 'days') viewMode.value = 'months'
     else if (viewMode.value === 'months') viewMode.value = 'years'
-    // 'years' : niveau le plus haut, no-op
+    else viewMode.value = 'days'
   }
 
   const onMouseDown = (event: MouseEvent) => {
@@ -26,5 +27,5 @@ export function useCalendarPopover(rootRef: Ref<HTMLElement | null>) {
   onMounted(() => document.addEventListener('mousedown', onMouseDown))
   onBeforeUnmount(() => document.removeEventListener('mousedown', onMouseDown))
 
-  return {isOpen, viewMode, open, close, goToHigherView}
+  return {isOpen, viewMode, open, close, cycleView}
 }

app/components/malio/date/composables/useCalendarView.test.ts

@@ -81,11 +81,11 @@ describe('useCalendarView', () => {
     expect(currentYear.value).toBe(2030)
   })
 
-  it('recenters the year page on entering years view (current - 5)', async () => {
+  it('recenters the year page on entering years view (current - 4)', async () => {
     const mode = ref<'days' | 'months' | 'years'>('days')
     const {yearPageStart} = useCalendarView(mode)
     mode.value = 'years'
     await nextTick()
-    expect(yearPageStart.value).toBe(2021) // 2026 - 5
+    expect(yearPageStart.value).toBe(2022) // 2026 - 4 (année courante en 2e ligne / 2e col)
   })
 })

app/components/malio/date/composables/useCalendarView.ts

@@ -5,10 +5,12 @@ export function useCalendarView(viewMode: Ref<'days' | 'months' | 'years'>) {
   const today = new Date()
   const currentMonth = ref(today.getMonth())
   const currentYear = ref(today.getFullYear())
-  const yearPageStart = ref(today.getFullYear() - 5)
+  // Fenêtre de 12 ans calée pour que l'année courante tombe en 2e ligne / 2e
+  // colonne d'une grille 3 colonnes (index 4) → début = année courante − 4.
+  const yearPageStart = ref(today.getFullYear() - 4)
 
   watch(viewMode, (mode) => {
-    if (mode === 'years') yearPageStart.value = currentYear.value - 5
+    if (mode === 'years') yearPageStart.value = currentYear.value - 4
   })
 
   const goToPrev = () => {