smart selector

modules/family-calendar/family-calendar.css

@@ -795,6 +795,45 @@ td.col-laia-sub {
   color: #ef4444; /* Devient rouge au survol */
 }
 
+/* =========================================================
+   SMART DATE SELECTOR (Comportement natif calqué sur .pf-input)
+   ========================================================= */
+.fc-smart-select {
+  background: #ffffff;
+  border: 1px solid #cbd5e1;
+  border-radius: 8px;
+
+  font-family: inherit;
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: var(--text-main);
+
+  /* Padding standard */
+  padding: 8px 12px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  text-transform: capitalize;
+  box-shadow: var(--pf-shadow-sm);
+}
+
+.fc-smart-select:hover {
+  border-color: #94a3b8;
+}
+
+.fc-smart-select:focus {
+  background: #ffffff;
+  border-color: var(--primary);
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
+}
+
+@media (max-width: 768px) {
+  .fc-smart-select {
+    font-size: 1rem;
+    padding: 6px 8px;
+  }
+}
+
 /* Mobile */
 @media (max-width: 768px) {
   .pf-family-calendar .pf-container {

modules/family-calendar/family-calendar.js

@@ -96,7 +96,8 @@ document.addEventListener("DOMContentLoaded", () => {
         now.getMonth() >= 8 ? now.getFullYear() : now.getFullYear() - 1;
       this.modalSelectedYear = this.currentSchoolYearStart;
 
-      this.setupModalUI(); // Prépare le selecteur d'année dans la modale
+      this.setupModalUI();
+      this.initSmartSelectors();
       await this.refreshAllData();
       this.updateSchoolYearLabel();
 
@@ -132,6 +133,40 @@ document.addEventListener("DOMContentLoaded", () => {
       }
     }
 
+    initSmartSelectors() {
+      const selectMonth = document.getElementById("fc-select-month");
+      const selectYear = document.getElementById("fc-select-year");
+      if (!selectMonth || !selectYear) return;
+
+      const lang = window.appLang || "fr-FR";
+
+      // 1. Remplir les mois en tenant compte de la langue locale
+      for (let i = 0; i < 12; i++) {
+        const d = new Date(2000, i, 1);
+        const monthName = new Intl.DateTimeFormat(lang, {
+          month: "long",
+        }).format(d);
+        selectMonth.add(new Option(monthName, i));
+      }
+
+      // 2. Remplir les années (de l'année actuelle -2 à +5)
+      const currentY = new Date().getFullYear();
+      for (let y = currentY - 2; y <= currentY + 5; y++) {
+        selectYear.add(new Option(y, y));
+      }
+
+      // 3. Écouteurs d'événements pour le rechargement en direct
+      const handleChange = () => {
+        const m = parseInt(selectMonth.value);
+        const y = parseInt(selectYear.value);
+        this.currentMonth = new Date(y, m, 1);
+        this.renderMonthCalendar();
+      };
+
+      selectMonth.addEventListener("change", handleChange);
+      selectYear.addEventListener("change", handleChange);
+    }
+
     async refreshAllData() {
       try {
         const weeksData = await this.fetchApi(
@@ -714,37 +749,22 @@ document.addEventListener("DOMContentLoaded", () => {
 
       const y = this.currentMonth.getFullYear();
       const m = this.currentMonth.getMonth();
-      const lang = window.I18N_LANG || "fr-FR";
-      const titleEl = document.querySelector("#fc-current-month-year");
 
-      if (titleEl) {
+      const selectMonth = document.getElementById("fc-select-month");
+      const selectYear = document.getElementById("fc-select-year");
+      // On masque définitivement le suffixe encombrant
+      const suffixEl = document.getElementById("fc-multi-month-suffix");
+
+      if (selectMonth && selectYear) {
+        selectMonth.value = m;
+        selectYear.value = y;
+        if (suffixEl) suffixEl.style.display = "none";
+
         if (this.viewMode === "3months") {
-          const nextM2 = new Date(y, m + 2, 1);
-          const m1 = new Intl.DateTimeFormat(lang, { month: "short" }).format(
-            this.currentMonth,
-          );
-          const m2 = new Intl.DateTimeFormat(lang, {
-            month: "short",
-            year: "numeric",
-          }).format(nextM2);
-          titleEl.textContent = `${m1} - ${m2}`;
           this.renderThreeMonthsView();
         } else if (this.viewMode === "2months") {
-          const nextM = new Date(y, m + 1, 1);
-          const m1 = new Intl.DateTimeFormat(lang, { month: "short" }).format(
-            this.currentMonth,
-          );
-          const m2 = new Intl.DateTimeFormat(lang, {
-            month: "short",
-            year: "numeric",
-          }).format(nextM);
-          titleEl.textContent = `${m1} - ${m2}`;
           this.renderTwoMonthsView();
         } else {
-          titleEl.textContent = new Intl.DateTimeFormat(lang, {
-            month: "long",
-            year: "numeric",
-          }).format(this.currentMonth);
           this.monthCalendar.innerHTML = this.generateMonthHTML(y, m);
         }
       }