refacto parent Calendrier budget et couleur profil.

modules/budget/budget.css

@@ -1,7 +1,6 @@
 /* modules/budget/budget.css */
 
 /* --- 1. VARIABLES & BASE --- */
-/* Le root garde les couleurs sémantiques dont le JS/PHP a besoin localement */
 .budget-view {
   font-family:
     "Segoe UI",
@@ -128,7 +127,7 @@
 
 /* --- 3. BOUTONS SPÉCIFIQUES & ACTIONS --- */
 .pf-btn {
-  border-radius: 50px; /* Surcharge le global pour le budget */
+  border-radius: 50px;
 }
 .btn-icon {
   background: transparent;
@@ -263,7 +262,6 @@ td:hover .btn-cell-delete {
   border-top: 1px solid #e2e8f0;
 }
 
-/* Inputs modifiés */
 .form-row {
   display: grid;
   grid-template-columns: 1fr 1fr;
@@ -346,20 +344,94 @@ input[type="number"] {
   gap: 30px;
 }
 .prev-section-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 15px;
-  padding-bottom: 10px;
-  border-bottom: 1px solid #e2e8f0;
+  display: flex !important;
+  flex-direction: row !important;
+  justify-content: space-between !important;
+  align-items: center !important;
+  margin-bottom: 20px;
+  padding: 15px;
+  background: #f8fafc;
+  border-radius: 12px;
+  border: 1px solid #e2e8f0;
+  width: 100% !important;
+  box-sizing: border-box;
 }
 .prev-section-header h2 {
   margin: 0;
-  font-size: 1.5rem;
+  font-size: 1.3rem;
   font-weight: 800;
   color: #0f172a;
   letter-spacing: -0.025em;
 }
+.prev-header-left {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+.prev-header-actions {
+  display: flex;
+  gap: 10px;
+}
+
+/* Configuration Chromatique Parent 1 */
+.txt-p1,
+.txt-alex {
+  color: color-mix(in srgb, var(--p1-main, #0891b2) 85%, #000000) !important;
+  font-weight: bold;
+  text-align: center;
+}
+.col-p1,
+.col-alex {
+  color: color-mix(in srgb, var(--p1-main, #0891b2) 85%, #000000) !important;
+  text-align: center;
+}
+th.col-p1,
+td.col-p1 {
+  background-color: color-mix(
+    in srgb,
+    var(--p1-main, #0891b2) 8%,
+    #ffffff
+  ) !important;
+  text-align: center;
+}
+input.txt-p1 {
+  color: color-mix(in srgb, var(--p1-main, #0891b2) 85%, #000000) !important;
+  text-align: center;
+  font-weight: 600;
+}
+input.txt-p1:focus {
+  border-color: var(--p1-main, #0891b2) !important;
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--p1-main, #0891b2) 10%, #ffffff) !important;
+}
+
+/* Configuration Chromatique Parent 2 */
+.txt-p2 {
+  color: color-mix(in srgb, var(--p2-main, #f59e0b) 85%, #000000) !important;
+  font-weight: bold;
+  text-align: center;
+}
+.col-p2 {
+  color: color-mix(in srgb, var(--p2-main, #f59e0b) 85%, #000000) !important;
+  text-align: center;
+}
+th.col-p2,
+td.col-p2 {
+  background-color: color-mix(
+    in srgb,
+    var(--p2-main, #f59e0b) 8%,
+    #ffffff
+  ) !important;
+  text-align: center;
+}
+input.txt-p2 {
+  color: color-mix(in srgb, var(--p2-main, #f59e0b) 85%, #000000) !important;
+  text-align: center;
+  font-weight: 600;
+}
+input.txt-p2:focus {
+  border-color: var(--p2-main, #f59e0b) !important;
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--p2-main, #f59e0b) 10%, #ffffff) !important;
+}
 
 .prev-input {
   width: 100%;
@@ -385,19 +457,6 @@ input[type="number"] {
   font-weight: 700;
 }
 
-.prev-section-header,
-.view-header,
-.budget-view > div[style*="justify-content: space-between"] {
-  display: flex !important;
-  flex-direction: row !important;
-  justify-content: space-between !important;
-  align-items: center !important;
-  float: none !important;
-  position: relative !important;
-  width: 100% !important;
-  gap: 15px !important;
-}
-
 .prev-salary-table {
   width: 100%;
   max-width: 900px;
@@ -419,6 +478,15 @@ input[type="number"] {
   text-align: center;
   border-bottom: 1px solid #e2e8f0;
 }
+.prev-salary-table th small {
+  font-weight: normal;
+  text-transform: none;
+}
+.prev-salary-table th.th-family-savings,
+.prev-salary-table td.td-family-savings {
+  background: #f0f9ff !important;
+  color: #0284c7 !important;
+}
 .prev-salary-table th:first-child {
   text-align: left;
 }
@@ -426,6 +494,22 @@ input[type="number"] {
   padding: 8px 12px;
   border-bottom: 1px solid var(--border-light);
   text-align: center;
+  vertical-align: middle;
+}
+
+.prev-salary-table tbody tr:nth-child(1) td:first-child {
+  text-align: left !important;
+  font-weight: bold !important;
+  color: var(--text-main) !important;
+  border-left: 4px solid var(--p1-main, #0891b2) !important;
+}
+
+/* Parent 2 (Ligne 2, ex: Laia) */
+.prev-salary-table tbody tr:nth-child(2) td:first-child {
+  text-align: left !important;
+  font-weight: bold !important;
+  color: var(--text-main) !important;
+  border-left: 4px solid var(--p2-main, #f59e0b) !important;
 }
 
 .prev-timeline-wrapper {
@@ -455,7 +539,7 @@ input[type="number"] {
   border-right: 1px solid var(--border-light);
   white-space: nowrap;
   text-align: center;
-  font-size: 0.9rem;
+  vertical-align: middle;
 }
 
 .col-sticky {
@@ -490,6 +574,15 @@ input[type="number"] {
   border-left: 2px solid white;
   padding: 8px !important;
 }
+.th-month span {
+  text-transform: capitalize;
+}
+.th-month .cycle-start-label {
+  font-size: 0.75rem;
+  font-weight: normal;
+  color: #64748b;
+  margin-top: 2px;
+}
 .th-month.current {
   background: var(--primary) !important;
 }
@@ -511,16 +604,42 @@ input[type="number"] {
   font-weight: 700;
   border-bottom: 2px solid #bfdbfe;
 }
-.txt-alex {
-  color: #0891b2;
+.row-restant td.td-separator {
+  border-left: 2px solid #cbd5e1;
+  background: #e2e8f0;
 }
-.txt-laia {
-  color: #f59e0b;
+.row-indicative {
+  background: #f8fafc;
+  color: #94a3b8;
+}
+.row-indicative .col-sticky {
+  opacity: 0.8;
+}
+.cat-name-label {
+  font-weight: 600;
+  color: var(--text-main);
+}
+.row-indicative .cat-name-label {
+  color: #64748b;
+}
+.row-indicative .cat-name-label span {
+  font-size: 0.7rem;
+  border: 1px solid #cbd5e1;
+  border-radius: 4px;
+  padding: 0 4px;
+  margin-left: 5px;
+}
+.cat-target-label {
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  font-style: italic;
+  text-align: right;
 }
 .txt-global {
   color: var(--text-muted);
   font-weight: 700;
   background: #f8fafc;
+  border-left: 2px solid #e2e8f0;
 }
 .val-ok {
   color: var(--success);
@@ -594,6 +713,9 @@ tr:hover .row-actions {
   letter-spacing: 0.05em;
   text-align: center;
 }
+.recap-header span {
+  text-transform: capitalize;
+}
 .recap-table {
   width: 100%;
   border-collapse: collapse;
@@ -603,6 +725,7 @@ tr:hover .row-actions {
   padding: 10px 15px;
   border-bottom: 1px solid var(--border-light);
   text-align: center;
+  vertical-align: middle;
   font-size: 0.95rem;
 }
 .recap-table th {
@@ -618,30 +741,68 @@ tr:hover .row-actions {
   font-weight: 600;
   color: #1e293b;
 }
-.col-alex {
-  background-color: #ecfeff;
-  color: #0891b2;
-  border-left: 1px solid #cffafe;
+
+.recap-th-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 5px;
 }
-th.col-alex {
-  background-color: #cffafe;
-  border-bottom-color: #a5f3fc;
+.recap-th-content span {
+  text-transform: uppercase;
 }
-.col-laia {
-  background-color: #fffbeb;
-  color: #d97706;
-  border-left: 1px solid #fef3c7;
+.validation-badge {
+  background: #10b981;
+  color: white;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 0.7rem;
+  display: flex;
+  align-items: center;
+  gap: 4px;
 }
-th.col-laia {
-  background-color: #fef3c7;
-  border-bottom-color: #fde68a;
+
+/* --- Style de base du bouton de validation (Générique) --- */
+.recap-table .pf-btn.btn-small {
+  background: #ffffff !important;
+  font-size: 0.7rem !important;
+  padding: 2px 8px !important;
+  height: auto !important;
+  width: auto !important;
+  font-weight: 600;
+  border-radius: 9px !important;
+  box-shadow: none !important;
+  transform: none !important;
+  transition: all 0.2s ease;
 }
-.col-global {
-  background-color: #f8fafc;
-  color: #475569;
-  font-weight: 700;
-  border-left: 2px solid #e2e8f0;
+
+/* Couleurs dynamiques adaptées au Parent 1 (ex: Féfé) */
+.col-p1 .pf-btn.btn-small {
+  color: var(--p1-main, #0891b2) !important;
+  border: 1px solid var(--p1-main, #0891b2) !important;
 }
+.col-p1 .pf-btn.btn-small:hover {
+  background: color-mix(
+    in srgb,
+    var(--p1-main, #0891b2) 12%,
+    #ffffff
+  ) !important;
+}
+
+/* Couleurs dynamiques adaptées au Parent 2 (ex: Laia) */
+.col-p2 .pf-btn.btn-small {
+  color: var(--p2-main, #f59e0b) !important;
+  border: 1px solid var(--p2-main, #f59e0b) !important;
+}
+.col-p2 .pf-btn.btn-small:hover {
+  background: color-mix(
+    in srgb,
+    var(--p2-main, #f59e0b) 12%,
+    #ffffff
+  ) !important;
+}
+
+/* Grand Totaux Structuraux */
 .row-grand-total td {
   background-color: #1e293b;
   color: white;
@@ -649,14 +810,22 @@ th.col-laia {
   border: none;
   padding: 12px 15px;
 }
-.row-grand-total .col-alex {
-  background: #164e63;
-  color: #67e8f9;
+.row-grand-total .col-p1 {
+  background: color-mix(
+    in srgb,
+    var(--p1-main, #0891b2) 65%,
+    #000000
+  ) !important;
+  color: color-mix(in srgb, var(--p1-main, #0891b2) 20%, #ffffff) !important;
   border: none;
 }
-.row-grand-total .col-laia {
-  background: #78350f;
-  color: #fcd34d;
+.row-grand-total .col-p2 {
+  background: color-mix(
+    in srgb,
+    var(--p2-main, #f59e0b) 65%,
+    #000000
+  ) !important;
+  color: color-mix(in srgb, var(--p2-main, #f59e0b) 20%, #ffffff) !important;
   border: none;
 }
 .row-grand-total .col-global {
@@ -665,7 +834,7 @@ th.col-laia {
   border: none;
 }
 
-/* --- 9. STYLES SPÉCIFIQUES AU SUIVI MENSUEL --- */
+/* --- 9. STYLES DU SUIVI MENSUEL --- */
 .cat-card {
   background: var(--bg-panel);
   border-radius: var(--radius);
@@ -675,20 +844,17 @@ th.col-laia {
   overflow: hidden;
   position: relative;
 }
-
 .cat-card-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 15px; /* Padding interne à l'encart coloré */
+  padding: 15px;
   width: 100%;
 }
-
 .cat-card-title-group {
   display: flex;
   flex-direction: column;
 }
-
 .cat-card-subtitle {
   font-size: 0.85rem;
   color: var(--text-muted);
@@ -768,7 +934,52 @@ input[type="month"].pf-input {
   border-radius: 6px;
 }
 
-/* --- 10. EPARGNE --- */
+/* --- 10. SECTION NOTES BUDGETAIRES --- */
+.budget-notes-section {
+  margin: 20px 0;
+  background: white;
+  padding: 20px;
+  border-radius: 12px;
+  box-shadow: var(--shadow-sm);
+  border: 1px solid #e2e8f0;
+}
+.notes-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+}
+.notes-header h3 {
+  margin: 0;
+  font-size: 1.1rem;
+  color: #1e293b;
+}
+.notes-header h3 span {
+  text-transform: capitalize;
+}
+.note-save-indicator {
+  font-size: 0.85rem;
+  color: #10b981;
+  font-weight: bold;
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+#monthNoteArea {
+  width: 100%;
+  resize: vertical;
+  border-color: #cbd5e1;
+  background: #f8fafc;
+  margin-bottom: 10px;
+}
+.notes-footer {
+  text-align: right;
+}
+.notes-footer .pf-btn {
+  width: auto;
+  display: inline-flex;
+}
+
+/* --- 11. EPARGNE --- */
 .epargne-inline-input {
   width: 100%;
   min-width: 60px;
@@ -793,7 +1004,7 @@ input[type="month"].pf-input {
   box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
 }
 
-/* --- 11. CALCULATRICE FLOTTANTE --- */
+/* --- 12. CALCULATRICE FLOTTANTE --- */
 .pf-fab-sum {
   position: fixed;
   right: 30px;
@@ -883,7 +1094,7 @@ body.sum-mode-active .sum-target {
   transition: background-color 0.2s;
 }
 
-/* --- 12. RESPONSIVE MOBILE BUDGET --- */
+/* --- 13. RESPONSIVE MOBILE BUDGET --- */
 @media (max-width: 768px) {
   .budget-view {
     padding: 10px !important;
@@ -917,11 +1128,6 @@ body.sum-mode-active .sum-target {
   .budget-view .categories-grid > .cat-card {
     padding: 0 !important;
   }
-  .budget-view
-    > div[style*="justify-content: space-between"]:not(.view-header) {
-    flex-direction: column !important;
-    align-items: stretch !important;
-  }
   .budget-view
     > div[style*="justify-content: space-between"]:not(.view-header) {
     flex-direction: column !important;
@@ -1021,7 +1227,6 @@ body.sum-mode-active .sum-target {
     justify-content: flex-start;
     width: auto !important;
   }
-
   .col-sticky,
   .sticky-col {
     min-width: 120px !important;
@@ -1059,8 +1264,7 @@ body.sum-mode-active .sum-target {
     right: auto;
     top: auto;
   }
-
   .cat-card-header {
-    padding: 12px 10px; /* Plus serré sur mobile */
+    padding: 12px 10px;
   }
 }

modules/family-calendar/family-calendar.js

@@ -5,32 +5,42 @@ document.addEventListener("DOMContentLoaded", () => {
   const CONGE_TYPES = ["OFF_CAROLE", "EXTRA_OFF_CAROLE"];
   const GUARDE_TYPES = ["CENTRE", "AVIS"];
   const PEP_TYPES = ["PEP_SICK"];
-  const FAMILY = {
-    ALEX: { id: 2, prefix: "alex" },
-    LAIA: { id: 3, prefix: "laia" },
-  };
+
+  // 🟢 Liste globale dynamique des personnes (fini les IDs en dur !)
+  const peopleList = window.CONFIG.PEOPLE || [];
+
+  // On filtre pour ne garder que les parents pour la logique principale des congés
+  const parents = peopleList.filter(
+    (p) => p.role && p.role.toLowerCase() === "parent",
+  );
+
   const LEAVES_CONFIG = {
     CP: {
-      startMonth: 8, // Le cycle commence en août (après la tolérance de juillet)
+      startMonth: 8,
       defaultBalance: 25,
     },
     JRA: {
-      // Tu pourras ajouter les années suivantes ici
       yearlyTotals: {
-        2024: 10, // ex: 0.83 * 12 arrondi
+        2024: 10,
         2025: 10,
-        2026: 11, // ex: 0.9 * 12 arrondi
+        2026: 11,
       },
       defaultBalance: 10,
-      toleranceMonths: 2, // Janvier et Février
+      toleranceMonths: 2,
       maxReport: 2,
     },
-    JA: {
-      [FAMILY.ALEX.id]: { startMonth: 4, startDay: 29, defaultBalance: 4 },
-      [FAMILY.LAIA.id]: { startMonth: 10, startDay: 1, defaultBalance: 4 }, // Date de Laia à adapter
-    },
+    JA: {}, // Ce tableau est maintenant vide par défaut, on le remplit dynamiquement juste en dessous
   };
 
+  // 🟢 INITIALISATION DYNAMIQUE DES JOURS D'ANNIVERSAIRE (JA)
+  parents.forEach((parent) => {
+    LEAVES_CONFIG.JA[parent.id] = {
+      startMonth: 4, // Mois par défaut (à faire évoluer en BDD au Niveau 3)
+      startDay: 29, // Jour par défaut
+      defaultBalance: 4,
+    };
+  });
+
   class FamilyCalendar {
     constructor() {
       this.planningBody = document.getElementById("planningBody");
@@ -455,12 +465,17 @@ document.addEventListener("DOMContentLoaded", () => {
           const d = new Date(l.leave_date + "T00:00:00");
           if (d >= w.dayDates.mon && d <= w.dayDates.fri) {
             const dur = parseFloat(l.duration) || 1;
-            const prefix =
-              l.person_id === FAMILY.ALEX.id
-                ? FAMILY.ALEX.prefix
-                : l.person_id === FAMILY.LAIA.id
-                  ? FAMILY.LAIA.prefix
-                  : null;
+
+            // 🟢 Correspondance dynamique pour le stockage des totaux de la semaine
+            let prefix = null;
+            if (parents[0] && parseInt(l.person_id) === parseInt(parents[0].id))
+              prefix = "alex";
+            else if (
+              parents[1] &&
+              parseInt(l.person_id) === parseInt(parents[1].id)
+            )
+              prefix = "laia";
+
             if (prefix) w.totals[`${prefix}${l.leave_type}`] += dur;
           }
         });
@@ -479,17 +494,16 @@ document.addEventListener("DOMContentLoaded", () => {
     }
 
     calculateMonthlyBalances() {
-      const balances = {
-        [FAMILY.ALEX.id]: { CP: {}, JRA: {}, JA: {} },
-        [FAMILY.LAIA.id]: { CP: {}, JRA: {}, JA: {} },
-      };
+      const balances = {};
+      // 🟢 On initialise le tableau des soldes pour chaque parent trouvé
+      parents.forEach((p) => {
+        balances[p.id] = { CP: {}, JRA: {}, JA: {} };
+      });
 
-      // Liste des mois actuellement affichés dans le planning
       const ymSet = new Set();
       this.weeks.forEach((w) => ymSet.add(w.monthKey));
       const ymList = Array.from(ymSet).sort();
 
-      // Pré-calcul de l'utilisation par mois
       const usageByMonth = {};
       this.leaves.forEach((l) => {
         const pid = l.person_id;
@@ -502,7 +516,8 @@ document.addEventListener("DOMContentLoaded", () => {
           (usageByMonth[pid][type][ym] || 0) + parseFloat(l.duration);
       });
 
-      [FAMILY.ALEX.id, FAMILY.LAIA.id].forEach((pid) => {
+      parents.forEach((parent) => {
+        const pid = parent.id;
         ["CP", "JRA", "JA"].forEach((type) => {
           ymList.forEach((ym) => {
             const [currYear, currMonth] = ym.split("-").map(Number);
@@ -510,8 +525,6 @@ document.addEventListener("DOMContentLoaded", () => {
             let cycleStartStr = "";
             let initialBalance = 0;
 
-            // --- 1. RECHERCHE D'UN CORRECTIF MANUEL (SNAPSHOT) ---
-            // On cherche le snapshot le plus récent qui est inférieur ou égal au mois en cours de calcul
             const latestSnapshot = (this.leaveSnapshots || [])
               .filter(
                 (s) =>
@@ -519,18 +532,14 @@ document.addEventListener("DOMContentLoaded", () => {
                   s.leave_type == type &&
                   s.snapshot_date.substring(0, 7) <= ym,
               )
-              // On trie du plus récent au plus ancien pour prendre le premier
               .sort((a, b) =>
                 b.snapshot_date.localeCompare(a.snapshot_date),
               )[0];
 
             if (latestSnapshot) {
-              // Si on trouve un correctif, il devient notre nouveau "point zéro"
               cycleStartStr = latestSnapshot.snapshot_date.substring(0, 7);
-              initialBalance = parseFloat(latestSnapshot.remaining_balance); // Utilisation de VOTRE nom de colonne
-            }
-            // --- 2. SINON, CALCUL CLASSIQUE PAR DÉFAUT ---
-            else {
+              initialBalance = parseFloat(latestSnapshot.remaining_balance);
+            } else {
               if (type === "CP") {
                 const refYear =
                   currMonth >= LEAVES_CONFIG.CP.startMonth
@@ -552,7 +561,6 @@ document.addEventListener("DOMContentLoaded", () => {
                   LEAVES_CONFIG.JRA.yearlyTotals[currYear] ||
                   LEAVES_CONFIG.JRA.defaultBalance;
 
-                // Logique de report du reliquat de l'année N-1
                 if (currMonth <= LEAVES_CONFIG.JRA.toleranceMonths) {
                   const prevYear = currYear - 1;
                   const prevInitial =
@@ -569,14 +577,10 @@ document.addEventListener("DOMContentLoaded", () => {
                     0,
                     prevInitial - usedPrevYear,
                   );
-                  // Ajout du report plafonné à 2 jours
                   initialBalance += Math.min(
                     remainingPrevYear,
                     LEAVES_CONFIG.JRA.maxReport,
                   );
-                  console.log(
-                    `[JRA] Personne ${pid}, Année ${currYear}: Report de ${Math.min(remainingPrevYear, LEAVES_CONFIG.JRA.maxReport)}j inclus.`,
-                  );
                 }
               } else if (type === "JA") {
                 const configJA = LEAVES_CONFIG.JA[pid];
@@ -598,11 +602,8 @@ document.addEventListener("DOMContentLoaded", () => {
               }
             }
 
-            // --- 3. DÉDUCTION DES CONGÉS PRIS DEPUIS LE POINT ZÉRO ---
             let usedBeforeCurrentMonth = 0;
-
             Object.keys(usageByMonth[pid]?.[type] || {}).forEach((usedYm) => {
-              // On ne déduit que ce qui a été posé entre le début du cycle (ou la date du snapshot) et le mois en cours
               if (usedYm >= cycleStartStr && usedYm < ym) {
                 usedBeforeCurrentMonth += usageByMonth[pid][type][usedYm];
               }
@@ -688,10 +689,28 @@ document.addEventListener("DOMContentLoaded", () => {
           const dayLeaves = this.leaves.filter((l) => l.leave_date === iso);
           if (dayLeaves.length) {
             let html = `<div style="position:absolute; bottom:0; left:0; width:100%; font-size:9px; line-height:1; display:flex; justify-content:center; gap:2px; pointer-events:none;">`;
-            if (dayLeaves.some((l) => l.person_id === window.CONFIG.ID_ALEX))
-              html += `<span style="color:#0f766e; font-weight:800;">A</span>`;
-            if (dayLeaves.some((l) => l.person_id === window.CONFIG.ID_LAIA))
-              html += `<span style="color:#b45309; font-weight:800;">L</span>`;
+
+            const colors = [
+              "#0f766e",
+              "#b45309",
+              "#047857",
+              "#4338ca",
+              "#b91c1c",
+            ];
+            if (window.CONFIG.PEOPLE && window.CONFIG.PEOPLE.length > 0) {
+              window.CONFIG.PEOPLE.forEach((person, index) => {
+                if (
+                  dayLeaves.some(
+                    (l) => parseInt(l.person_id) === parseInt(person.id),
+                  )
+                ) {
+                  const color = colors[index % colors.length];
+                  const initial = person.name.charAt(0).toUpperCase();
+                  html += `<span style="color:${color}; font-weight:800; margin: 0 1px;">${initial}</span>`;
+                }
+              });
+            }
+
             html += `</div>`;
             td.innerHTML += html;
           }
@@ -731,8 +750,10 @@ document.addEventListener("DOMContentLoaded", () => {
               tr.appendChild(tdUse);
             });
           };
-          renderPersonCols(FAMILY.ALEX.id, `col-${FAMILY.ALEX.prefix}`);
-          renderPersonCols(FAMILY.LAIA.id, `col-${FAMILY.LAIA.prefix}`);
+          parents.forEach((parent, index) => {
+            const cssPrefix = index % 2 === 0 ? "col-alex" : "col-laia";
+            renderPersonCols(parent.id, cssPrefix);
+          });
         }
         this.planningBody.appendChild(tr);
       });
@@ -845,9 +866,9 @@ document.addEventListener("DOMContentLoaded", () => {
       container.style.display = "flex";
       let html = "";
 
-      [FAMILY.ALEX, FAMILY.LAIA].forEach((person) => {
+      parents.forEach((person) => {
         html += `<div class="fc-minimal-balance-card">
-                  <strong class="${person.prefix}">${person.prefix.toUpperCase()}</strong>
+                  <strong class="col-alex">${person.name.toUpperCase()}</strong>
                   <div class="fc-minimal-chips">`;
 
         ["CP", "JRA", "JA"].forEach((type) => {
@@ -989,10 +1010,19 @@ document.addEventListener("DOMContentLoaded", () => {
         const dayLeaves = this.leaves.filter((l) => l.leave_date === iso);
         if (dayLeaves.length) {
           content += `<div style="position:absolute; bottom:2px; left:2px; font-size:10px; font-weight:bold;">`;
-          if (dayLeaves.some((l) => l.person_id === 2))
-            content += `<span style="color:#0f766e">A</span> `;
-          if (dayLeaves.some((l) => l.person_id === 3))
-            content += `<span style="color:#b45309">L</span>`;
+
+          parents.forEach((parent, index) => {
+            if (
+              dayLeaves.some(
+                (l) => parseInt(l.person_id) === parseInt(parent.id),
+              )
+            ) {
+              const color = index % 2 === 0 ? "#0f766e" : "#b45309";
+              const initial = parent.name.charAt(0).toUpperCase();
+              content += `<span style="color:${color}">${initial}</span> `;
+            }
+          });
+
           content += `</div>`;
         }
         content += `</div>`;
@@ -1557,7 +1587,9 @@ document.addEventListener("DOMContentLoaded", () => {
         if (dates.includes(e.date)) activeEvents.add(e.type);
       });
 
-      const activeLeaves = { 2: new Set(), 3: new Set() };
+      const activeLeaves = {};
+      parents.forEach((p) => (activeLeaves[p.id] = new Set()));
+
       this.leaves.forEach((l) => {
         if (dates.includes(l.leave_date)) {
           if (activeLeaves[l.person_id])
@@ -1623,32 +1655,33 @@ document.addEventListener("DOMContentLoaded", () => {
                  <button class="fc-menu-btn ${getBtnClass("PEP_SICK")}" data-action="add" data-type="PEP_SICK" style="width:100%">${getBtnIcon("PEP_SICK")}${tr("leg_pep_sick")} 🤒</button>
                </div>`;
 
-      // 5. Section Enfants
+      // 5. Section Parents (Congés)
       html += `<div class="fc-menu-section">
                  ${buildHeader(tr("fc_menu_kids_leaves"), null, null)}
                  <div class="fc-menu-leaves-table">
                    <table>
                      <thead>
-                       <tr>
-                         <th>
-                            <div class="fc-th-inline">
-                              Alex <button class="fc-menu-clear-icon fc-menu-btn-th" data-action="clear-leaves-person" data-pid="2" title="${tr("fc_clear")} Alex">${trashSvg}</button>
-                            </div>
-                         </th>
-                         <th>
-                            <div class="fc-th-inline">
-                              Laia <button class="fc-menu-clear-icon fc-menu-btn-th" data-action="clear-leaves-person" data-pid="3" title="${tr("fc_clear")} Laia">${trashSvg}</button>
-                            </div>
-                         </th>
-                       </tr>
+                       <tr>`;
+
+      // En-têtes dynamiques (Noms + Bouton Poubelle)
+      parents.forEach((parent) => {
+        html += `<th>
+                   <div class="fc-th-inline">
+                     ${parent.name} <button class="fc-menu-clear-icon fc-menu-btn-th" data-action="clear-leaves-person" data-pid="${parent.id}" title="${tr("fc_clear")} ${parent.name}">${trashSvg}</button>
+                   </div>
+                 </th>`;
+      });
+      html += `        </tr>
                      </thead>
                      <tbody>`;
 
+      // Lignes de congés (CP, JRA, JA)
       ["CP", "JRA", "JA"].forEach((t) => {
-        html += `<tr>
-                   <td><button class="fc-menu-btn ${getBtnClass(t, 2)}" data-action="add-leave" data-pid="2" data-type="${t}">${getBtnIcon(t, 2)}${t}</button></td>
-                   <td><button class="fc-menu-btn ${getBtnClass(t, 3)}" data-action="add-leave" data-pid="3" data-type="${t}">${getBtnIcon(t, 3)}${t}</button></td>
-                 </tr>`;
+        html += `<tr>`;
+        parents.forEach((parent) => {
+          html += `<td><button class="fc-menu-btn ${getBtnClass(t, parent.id)}" data-action="add-leave" data-pid="${parent.id}" data-type="${t}">${getBtnIcon(t, parent.id)}${t}</button></td>`;
+        });
+        html += `</tr>`;
       });
 
       html += `      </tbody>
@@ -1743,22 +1776,18 @@ document.addEventListener("DOMContentLoaded", () => {
             },
           );
         } else if (action === "clear-leaves") {
-          await this.postApi(
-            "/modules/family-calendar/includes/api/manage-leaf.php",
-            {
-              action: "bulk_delete_day_person",
-              dates,
-              person_id: window.CONFIG.ID_ALEX,
-            },
-          );
-          await this.postApi(
-            "/modules/family-calendar/includes/api/manage-leaf.php",
-            {
-              action: "bulk_delete_day_person",
-              dates,
-              person_id: window.CONFIG.ID_LAIA,
-            },
-          );
+          if (window.CONFIG.PEOPLE && window.CONFIG.PEOPLE.length > 0) {
+            for (const person of window.CONFIG.PEOPLE) {
+              await this.postApi(
+                "/modules/family-calendar/includes/api/manage-leaf.php",
+                {
+                  action: "bulk_delete_day_person",
+                  dates,
+                  person_id: person.id,
+                },
+              );
+            }
+          }
         }
 
         await this.refreshAllData();

modules/family-calendar/includes/api/events-debug.log

@@ -51,3 +51,4 @@
 [2026-05-06T20:38:24+02:00] RAW INPUT: [{"date":"2026-05-08","type":"AVIS","duration":1,"person":"Carole"}]
 [2026-05-06T20:43:43+02:00] RAW INPUT: [{"date":"2026-05-06","type":"AVIS","duration":1,"person":"Carole"}]
 [2026-05-06T20:44:36+02:00] RAW INPUT: [{"date":"2026-05-06","type":"PEP_SICK","duration":1,"person":"Carole"}]
+[2026-05-20T16:40:17+02:00] RAW INPUT: [{"date":"2026-05-19","type":"OFF_CAROLE","duration":1,"person":"Carole"}]