From 3f01cbd8aa90bffdc8a3fa113e810becc7c18110 Mon Sep 17 00:00:00 2001
From: "fefe.clochette" <ferlan.alexandre@gmail.com>
Date: Fri, 23 Jan 2026 12:23:47 +0100
Subject: [PATCH] christmas

---
 christmas-list.php                          | 370 +++++++++++------
 global.css                                  |  11 +-
 modules/christmas-list/christmas-list.css   | 439 +++++++++++++-------
 modules/family-calendar/family-calendar.css |   4 +-
 4 files changed, 524 insertions(+), 300 deletions(-)

diff --git a/christmas-list.php b/christmas-list.php
index 4296a4b..f79cb70 100644
--- a/christmas-list.php
+++ b/christmas-list.php
@@ -1,163 +1,174 @@
 <?php
+// christmas-list.php
+
 // Protection : nécessite d'être connecté
 require __DIR__ . '/includes/auth.php';
-require_login(); 
-
+require_login('/login.php');
 
 // Connexion DB
 require __DIR__ . '/includes/db.php';
 
 // Config page
-$pageTitle  = "PachaFamily - Christmas list";
+$pageTitle  = "PachaFamily - Llista de regals";
 $activePage = "christmas-list";
 $bodyClass  = "pf-christmas-list";
 $pageCss    = "/modules/christmas-list/christmas-list.css";
 
 require __DIR__ . '/header.php';
 
-// Constantes
+// Constantes “théoriques” pour la grille
 $year      = (int)date('Y');
 $adults    = ['Laia', 'Laura', 'Avi Iaia'];
 $children  = ['Pol', 'Pep', 'Elna', 'Bru', 'Guim'];
 
-$occasions = [
-    'TIO'   => 'Tió',
-    'NADAL' => 'Nadal',
-    'REIS'  => 'Reis',
+// IMPORTANT : aligner les codes avec ta BDD (enum('TIO','NOEL','ROIS'))
+$allOccasionLabels = [
+    'TIO'  => 'Tió',
+    'NOEL' => 'Nadal',
+    'ROIS' => 'Reis',
 ];
 
-// Récup données
+// Récup toutes les données pour l’année
 $stmt = $pdo->prepare("
   SELECT * 
   FROM pf_christmas_gifts
   WHERE year = :year
+  ORDER BY adult_name, child_name, occasion, created_at
 ");
 $stmt->execute(['year' => $year]);
 $gifts = $stmt->fetchAll(PDO::FETCH_ASSOC);
 
-// Indexer par [adult][child][occasion]
-$byAdult = [];
+// Si aucune donnée, on évite les notices plus bas
+if (!$gifts) {
+    $gifts = [];
+}
+
+// 1) Indexer par [occasion][child][adult] pour l'affichage par fête
+$byOccasion = []; // [occasion][child][adult][] = gifts
 foreach ($gifts as $gift) {
-    $a = $gift['adult_name'];
-    $c = $gift['child_name'];
     $o = $gift['occasion'];
-    $byAdult[$a][$c][$o][] = $gift;
+    $c = $gift['child_name'];
+    $a = $gift['adult_name'];
+    $byOccasion[$o][$c][$a][] = $gift;
 }
 ?>
 
 <div class="pf-container">
-  <h1>Christmas list <?= htmlspecialchars($year) ?></h1>
-  <p>Visió sintètica dels regals per adult, infant i festa. Afegeix nous regals amb el botó “+”.</p>
+  <h1>Llista de regals <?= htmlspecialchars($year) ?></h1>
 
+  <!-- =============================================================== -->
+  <!--  VUE TABLEAU PAR FÊTE : mini-tableaux par enfant (totaux en tête) -->
+  <!-- =============================================================== -->
   <section class="pf-section pf-section--panel">
-    <div class="cl-grid-wrapper">
-      <table class="pf-table cl-grid-table">
-        <thead>
-          <!-- Ligne 1 : cellule vide + noms des enfants (colspan=3) -->
-          <tr>
-            <th></th>
-            <?php foreach ($children as $child): ?>
-              <th colspan="<?= count($occasions) ?>" class="cl-child-header">
-                <?= htmlspecialchars($child) ?>
-              </th>
-            <?php endforeach; ?>
-          </tr>
+    <h2>Vista per festa</h2>
 
-          <!-- Ligne 2 : Adult + Tió / Nadal / Reis pour chaque enfant -->
-          <tr>
-            <th class="cl-header-adult">Adult</th>
-            <?php foreach ($children as $child): ?>
-              <?php foreach ($occasions as $occCode => $occLabel): ?>
-                <th class="cl-header-occ"><?= htmlspecialchars($occLabel) ?></th>
-              <?php endforeach; ?>
-            <?php endforeach; ?>
-          </tr>
-        </thead>
-
-        <tbody>
-          <?php foreach ($adults as $adult): ?>
-            <tr>
-              <!-- Colonne adulte -->
-              <td class="cl-adult-cell"><?= htmlspecialchars($adult) ?></td>
-
-              <!-- Colonnes (enfant x fête) -->
-              <?php foreach ($children as $child): ?>
-                <?php foreach ($occasions as $occCode => $occLabel): ?>
-                  <?php
-                    $cellGifts = $byAdult[$adult][$child][$occCode] ?? [];
-                    $total     = array_sum(array_column($cellGifts, 'amount'));
-
-                    // Id unique pour cette cellule (pour cibler le menu en JS)
-                    $cellId = 'cell_' . md5($adult . '_' . $child . '_' . $occCode);
-                  ?>
-                  <td class="cl-gift-cell" data-cell-id="<?= $cellId ?>">
-  <div class="cl-gift-cell-content">
-    <?php if (!empty($cellGifts)): ?>
-      <ul class="cl-gift-list">
-        <?php foreach ($cellGifts as $gift): ?>
-          <li>
-            <?= htmlspecialchars($gift['gift_description']) ?>
-            <?php if ($gift['amount'] > 0): ?>
-              <span class="cl-gift-amount">
-                (<?= number_format($gift['amount'], 0, ',', ' ') ?> €)
-              </span>
-            <?php endif; ?>
-          </li>
-        <?php endforeach; ?>
-      </ul>
-    <?php else: ?>
-      <span class="cl-empty">– Cap regal</span>
+    <?php if (empty($gifts)): ?>
+      <p>No hi ha cap regal registrat per a <?= htmlspecialchars($year) ?>.</p>
     <?php endif; ?>
 
-    <div class="cl-total-and-add">
-      <div class="cl-gift-total">
-        <?php if ($total > 0): ?>
-          Total: <?= number_format($total, 0, ',', ' ') ?> €
-        <?php else: ?>
-          &nbsp;
-        <?php endif; ?>
-      </div>
+    <?php foreach ($allOccasionLabels as $occCode => $occLabel): ?>
+      <div class="cl-occasion-block">
+        <h3 class="cl-occasion-title"><?= htmlspecialchars($occLabel) ?></h3>
 
-      <button type="button"
-              class="cl-add-btn"
-              data-target="<?= $cellId ?>">
-        +
-      </button>
-    </div>
-  </div>
+        <div class="cl-occasion-children-tables">
+          <?php
+            // Afficher tous les enfants (même vides) pour garder l'ordre fixe
+            $childrenForOccasion = $children;
 
-  <!-- Menu d'ajout caché au départ -->
-  <div class="cl-add-menu" id="<?= $cellId ?>">
-    <form method="post" action="/modules/christmas-list/save-gift.php" class="cl-gift-form">
-      <input type="hidden" name="year" value="<?= $year ?>">
-      <input type="hidden" name="adult_name" value="<?= htmlspecialchars($adult) ?>">
-      <input type="hidden" name="child_name" value="<?= htmlspecialchars($child) ?>">
-      <input type="hidden" name="occasion" value="<?= htmlspecialchars($occCode) ?>">
+            foreach ($childrenForOccasion as $childName):
+              // Prépare les listes par adulte pour cet enfant et cette fête
+              $lists = [];
+              $totals = [];
+              foreach ($adults as $adultName) {
+                $lists[$adultName] = $byOccasion[$occCode][$childName][$adultName] ?? [];
+                $totals[$adultName] = array_sum(array_map(
+                  fn($g) => (float)$g['amount'],
+                  $lists[$adultName]
+                ));
+              }
+              // Nombre de lignes: max des tailles de listes Laia/Laura/Avi Iaia
+              $maxRowsChild = max(array_map('count', $lists));
+          ?>
+          <table class="cl-child-table child-<?= strtolower($childName) ?>">
+            <colgroup>
+              <col class="cl-col" />
+              <col class="cl-col" />
+              <col class="cl-col" />
+            </colgroup>
 
-      <input type="text" name="gift_description" placeholder="Regal..." required>
-
-      <div class="cl-gift-form-row">
-        <input type="url" name="product_link" placeholder="Enllaç">
-        <input type="number" name="amount" placeholder="€" step="0.01" min="0">
-      </div>
-
-      <div class="cl-gift-form-actions">
-        <button type="button" class="cl-cancel-btn" data-target="<?= $cellId ?>">Cancel·lar</button>
-        <button type="submit" class="cl-ok-btn">OK</button>
-      </div>
-    </form>
-  </div>
-</td>
+            <caption>
+              <?= htmlspecialchars($childName) ?>
+              <button
+                type="button"
+                class="cl-child-add-btn"
+                title="Afegeix un regal"
+                data-year="<?= $year ?>"
+                data-child="<?= htmlspecialchars($childName) ?>"
+                data-occasion="<?= htmlspecialchars($occCode) ?>"
+              >+</button>
+            </caption>
 
+            <thead>
+              <tr>
+                <?php foreach ($adults as $adultName): ?>
+                  <th>
+                    <div class="cl-th-inner">
+                      <span class="cl-th-label"><?= htmlspecialchars($adultName) ?></span>
+                      <span class="cl-summary-adult-total">
+                        <?= number_format($totals[$adultName], 0, ',', ' ') ?> €
+                      </span>
+                    </div>
+                  </th>
                 <?php endforeach; ?>
-              <?php endforeach; ?>
-            </tr>
+              </tr>
+            </thead>
+
+            <tbody>
+              <?php if ($maxRowsChild === 0): ?>
+                <tr>
+                  <td><span class="cl-empty">—</span></td>
+                  <td><span class="cl-empty">—</span></td>
+                  <td><span class="cl-empty">—</span></td>
+                </tr>
+              <?php else: ?>
+                <?php for ($i = 0; $i < $maxRowsChild; $i++): ?>
+                  <tr>
+                    <?php foreach ($adults as $adultName): ?>
+                      <?php $gift = $lists[$adultName][$i] ?? null; ?>
+                      <td>
+                        <?php if ($gift): ?>
+                          <?php
+                            $desc  = htmlspecialchars($gift['gift_description']);
+                            $amt   = (float)$gift['amount'];
+                            $plink = trim($gift['product_link'] ?? '');
+                          ?>
+                          <?php if ($plink !== ''): ?>
+                            <a href="<?= htmlspecialchars($plink) ?>" target="_blank" rel="noopener noreferrer" class="cl-gift-link"><?= $desc ?></a>
+                          <?php else: ?>
+                            <span class="cl-gift-desc"><?= $desc ?></span>
+                          <?php endif; ?>
+                          <?php if ($amt > 0): ?>
+                            <span class="cl-gift-amount">(<?= number_format($amt, 0, ',', ' ') ?> €)</span>
+                          <?php endif; ?>
+                        <?php else: ?>
+                          <span class="cl-empty">—</span>
+                        <?php endif; ?>
+                      </td>
+                    <?php endforeach; ?>
+                  </tr>
+                <?php endfor; ?>
+              <?php endif; ?>
+            </tbody>
+          </table>
           <?php endforeach; ?>
-        </tbody>
-      </table>
-    </div>
+        </div>
+      </div>
+    <?php endforeach; ?>
   </section>
 
+  <!-- =============================================================== -->
+  <!--  RÉSUMÉ DU BUDGET (AGGRÉGÉ)                                     -->
+  <!-- =============================================================== -->
   <section class="pf-section pf-section--panel">
     <h2>Resum del pressupost</h2>
     <?php
@@ -187,7 +198,7 @@ foreach ($gifts as $gift) {
             <tr>
               <td><?= htmlspecialchars($row['adult_name']) ?></td>
               <td><?= htmlspecialchars($row['child_name']) ?></td>
-              <td><?= htmlspecialchars($occasions[$row['occasion']] ?? $row['occasion']) ?></td>
+              <td><?= htmlspecialchars($allOccasionLabels[$row['occasion']] ?? $row['occasion']) ?></td>
               <td><?= number_format($row['total'], 0, ',', ' ') ?> €</td>
             </tr>
           <?php endforeach; ?>
@@ -195,38 +206,129 @@ foreach ($gifts as $gift) {
       </table>
     </div>
   </section>
+
+  <!-- =============================================================== -->
+  <!--  LISTE DÉTAILLÉE DES CADEAUX (vue "debug"/admin")               -->
+  <!-- =============================================================== -->
+  <section class="pf-section pf-section--panel">
+    <h2>Llista detallada de regals</h2>
+    <div class="cl-detail-wrapper">
+      <table class="pf-table pf-table--compact">
+        <thead>
+          <tr>
+            <th>Adult</th>
+            <th>Infant</th>
+            <th>Festa</th>
+            <th>Regal</th>
+            <th>€</th>
+            <th>Enllaç</th>
+          </tr>
+        </thead>
+        <tbody>
+          <?php foreach ($gifts as $g): ?>
+            <tr>
+              <td><?= htmlspecialchars($g['adult_name']) ?></td>
+              <td><?= htmlspecialchars($g['child_name']) ?></td>
+              <td><?= htmlspecialchars($allOccasionLabels[$g['occasion']] ?? $g['occasion']) ?></td>
+              <td><?= htmlspecialchars($g['gift_description']) ?></td>
+              <td><?= number_format($g['amount'], 0, ',', ' ') ?></td>
+              <td>
+                <?php if (!empty($g['product_link'])): ?>
+                  <a href="<?= htmlspecialchars($g['product_link']) ?>" target="_blank">🔗</a>
+                <?php endif; ?>
+              </td>
+            </tr>
+          <?php endforeach; ?>
+        </tbody>
+      </table>
+    </div>
+  </section>
 </div>
 
-<!-- JS inline simple pour ouvrir/fermer les menus d'ajout -->
+<!-- JS inline : modale d'ajout de cadeau -->
 <script>
 document.addEventListener('DOMContentLoaded', function () {
-  // Ouvrir le menu associé au bouton +
-  document.querySelectorAll('.cl-add-btn').forEach(function (btn) {
+  // Modale d'ajout de cadeau (bouton + à côté du nom de l'enfant)
+  const modal = document.getElementById('cl-gift-modal');
+  const backdrop = modal.querySelector('.cl-modal-backdrop');
+  const cancelBtn = modal.querySelector('.clm-cancel');
+
+  document.querySelectorAll('.cl-child-add-btn').forEach(function (btn) {
     btn.addEventListener('click', function () {
-      const targetId = btn.getAttribute('data-target');
-      const menu = document.getElementById(targetId);
+      const year     = btn.getAttribute('data-year');
+      const child    = btn.getAttribute('data-child');
+      const occasion = btn.getAttribute('data-occasion');
 
-      // Fermer les autres menus avant d'ouvrir celui-ci
-      document.querySelectorAll('.cl-add-menu').forEach(function (m) {
-        if (m.id !== targetId) {
-          m.classList.remove('cl-add-menu--open');
-        }
-      });
+      modal.classList.add('cl-open');
 
-      menu.classList.toggle('cl-add-menu--open');
+      // Remplir les champs cachés
+      document.getElementById('clm-year').value     = year;
+      document.getElementById('clm-child').value    = child;
+      document.getElementById('clm-occasion').value = occasion;
+
+      // Reset des champs visibles
+      document.getElementById('clm-adult').selectedIndex = 0;
+      document.getElementById('clm-gift').value   = '';
+      document.getElementById('clm-amount').value = '';
+      document.getElementById('clm-link').value   = '';
     });
   });
 
-  // Boutons Cancel·lar pour fermer le menu
-  document.querySelectorAll('.cl-cancel-btn').forEach(function (btn) {
-    btn.addEventListener('click', function () {
-      const targetId = btn.getAttribute('data-target');
-      const menu = document.getElementById(targetId);
-      menu.classList.remove('cl-add-menu--open');
-    });
-  });
+  function closeModal() {
+    modal.classList.remove('cl-open');
+  }
+  cancelBtn.addEventListener('click', closeModal);
+  backdrop.addEventListener('click', closeModal);
 });
 </script>
 
+<!-- Modal d'ajout de cadeau -->
+<div id="cl-gift-modal" class="cl-modal" aria-hidden="true">
+  <div class="cl-modal-backdrop"></div>
+  <div class="cl-modal-dialog" role="dialog" aria-modal="true" aria-labelledby="cl-modal-title">
+    <form method="post" action="/modules/christmas-list/save-gift.php" class="cl-modal-form">
+      <h3 id="cl-modal-title">Afegeix un regal</h3>
+
+      <!-- Champs cachés (contexte) -->
+      <input type="hidden" name="year" id="clm-year" value="<?= $year ?>">
+      <input type="hidden" name="child_name" id="clm-child" value="">
+      <input type="hidden" name="occasion" id="clm-occasion" value="">
+
+      <!-- Adulte -->
+      <label class="clm-label">
+        Adult
+        <select name="adult_name" id="clm-adult" required>
+          <?php foreach ($adults as $adultName): ?>
+            <option value="<?= htmlspecialchars($adultName) ?>"><?= htmlspecialchars($adultName) ?></option>
+          <?php endforeach; ?>
+        </select>
+      </label>
+
+      <!-- Cadeau -->
+      <label class="clm-label">
+        Nom del regal
+        <input type="text" name="gift_description" id="clm-gift" placeholder="p. ex., Lego Star Wars" required>
+      </label>
+
+      <!-- Montant -->
+      <label class="clm-label">
+        Preu (€)
+        <input type="number" name="amount" id="clm-amount" placeholder="p. ex., 49,99" step="0.01" min="0">
+      </label>
+
+      <!-- Lien produit (optionnel) -->
+      <label class="clm-label">
+        Enllaç (opcional)
+        <input type="url" name="product_link" id="clm-link" placeholder="https://exemple.com/producte">
+      </label>
+
+      <div class="cl-modal-actions">
+        <button type="button" class="clm-cancel">Cancel·la</button>
+        <button type="submit" class="clm-ok">Desa</button>
+      </div>
+    </form>
+  </div>
+</div>
+
 <?php
 require __DIR__ . '/footer.php';
diff --git a/global.css b/global.css
index ca0254b..beb7905 100644
--- a/global.css
+++ b/global.css
@@ -13,7 +13,11 @@ body {
 
 body {
   margin: 0;
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+  font-family:
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
     sans-serif;
   background: #f5f5f5;
   color: #222;
@@ -39,8 +43,7 @@ body {
 
 .pf-container {
   max-width: 1440px;
-  margin: 0 auto;
-  padding: 0 16px;
+  margin-left: 6px;
 }
 
 .pf-header {
@@ -93,7 +96,7 @@ body {
 .pf-section--panel {
   background: #fff;
   border-radius: 8px;
-  padding: 16px 16px 20px;
+  padding: 10px 10px 10px 10px;
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
 }
 
diff --git a/modules/christmas-list/christmas-list.css b/modules/christmas-list/christmas-list.css
index cf50576..ca3ff2c 100644
--- a/modules/christmas-list/christmas-list.css
+++ b/modules/christmas-list/christmas-list.css
@@ -1,4 +1,6 @@
-/* Christmas list : vue synthétique avec bouton + et menu flottant */
+/* ========================================================= */
+/*  Styles généraux page Christmas list                      */
+/* ========================================================= */
 
 .pf-christmas-list h1 {
   margin-bottom: 4px;
@@ -11,211 +13,326 @@
   color: #4b5563;
 }
 
-/* Grille principale */
-.cl-grid-wrapper {
-  overflow-x: auto; /* sécurité pour petits écrans */
+/* Petit texte explicatif sous les titres */
+.cl-legend {
+  font-size: 12px;
+  color: #6b7280;
+  margin-bottom: 8px;
 }
 
-.cl-grid-table {
-  font-size: 11px;
+/* ========================================================= */
+/*  Vue par fête: mini-tableaux par enfant                   */
+/* ========================================================= */
+
+.cl-occasion-block {
+  margin-top: 2rem;
+  border-top: 2px solid #e5e5e5;
 }
 
-/* En-têtes */
-.cl-grid-table thead th {
-  padding: 6px 4px;
+.cl-occasion-title {
+  font-size: 1.2rem;
+  margin-bottom: 0.5rem;
 }
 
-.cl-child-header {
+.cl-occasion-children-tables {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(280px, 1fr));
+  gap: 12px; /* espacement léger entre mini-tableaux */
+  align-items: start;
+  margin-top: 8px;
+}
+
+@media (max-width: 1200px) {
+  .cl-occasion-children-tables {
+    grid-template-columns: repeat(2, minmax(280px, 1fr));
+  }
+}
+@media (max-width: 780px) {
+  .cl-occasion-children-tables {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* ========================================================= */
+/*  Mini-tableau par enfant                                  */
+/* ========================================================= */
+
+.cl-child-table {
+  display: table !important; /* robustesse même avec resets */
+  table-layout: fixed;
+  width: 100%;
+  border-collapse: collapse;
+  background: #fff;
+  border: 1px solid #d9e2ec;
+  overflow: hidden;
+}
+.cl-child-table thead {
+  display: table-header-group !important;
+}
+.cl-child-table tbody {
+  display: table-row-group !important;
+}
+.cl-child-table tr {
+  display: table-row !important;
+}
+.cl-child-table th,
+.cl-child-table td {
+  display: table-cell !important;
+  box-sizing: border-box;
+}
+
+/* Nom de l'enfant (caption) + bouton + */
+.cl-child-table caption {
+  caption-side: top;
+  position: relative; /* pour positionner le + */
   text-align: center;
-  font-weight: 600;
-  white-space: nowrap;
+  font-weight: 700;
+  padding: 8px 10px;
+  background: #f8fafc;
+  border-bottom: 1px solid #e5e7eb;
+  font-size: 13px;
 }
 
-.cl-header-adult {
-  text-align: left;
-  white-space: nowrap;
-}
-
-.cl-header-occ {
-  text-align: center;
-  font-weight: 500;
-  color: #627d98;
-}
-
-/* Colonne adulte */
-.cl-adult-cell {
-  font-weight: 600;
-  white-space: nowrap;
-  padding: 8px 6px;
-}
-
-/* Cellules cadeau */
-.cl-gift-cell {
-  min-width: 120px;
-  vertical-align: top;
-  padding: 6px 4px;
-}
-
-/* Contenu de la cellule : colonne verticale */
-.cl-gift-cell-content {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-/* Liste des cadeaux : alignée à gauche */
-.cl-gift-list {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  text-align: left;
-}
-
-.cl-gift-list li {
-  margin-bottom: 2px;
-}
-
-/* Montant par cadeau */
-.cl-gift-amount {
-  font-size: 10px;
-  color: #627d98;
-  margin-left: 2px;
-}
-
-/* Cellule vide */
-.cl-empty {
-  display: inline-block;
-  margin-bottom: 2px;
-  font-size: 11px;
-  color: #9fb3c8;
-}
-
-/* Ligne Total + bouton + */
-.cl-total-and-add {
-  display: flex;
-  align-items: center;
-  justify-content: space-between; /* Total à gauche, + à droite */
-  gap: 4px;
-  margin-top: 2px;
-}
-
-/* Texte Total */
-.cl-gift-total {
-  font-size: 10px;
-  font-weight: 600;
-  color: #243b53;
-}
-
-/* Bouton + */
-.cl-add-btn {
-  width: 20px;
-  height: 20px;
+/* Bouton + dans le caption */
+.cl-child-add-btn {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 22px;
+  height: 22px;
   border-radius: 50%;
   border: 1px solid #d9e2ec;
   background: #f0f4f8;
   color: #243b53;
-  font-size: 12px;
-  line-height: 18px;
+  font-size: 13px;
+  line-height: 20px;
   text-align: center;
   padding: 0;
   cursor: pointer;
 }
-
-.cl-add-btn:hover {
+.cl-child-add-btn:hover {
   background: #d9e2ec;
 }
 
-/* Menu d'ajout (caché par défaut) */
-.cl-add-menu {
-  display: none;
-  margin-top: 4px;
-  padding: 6px;
-  border-radius: 6px;
-  border: 1px solid #d9e2ec;
-  background: #f8fafc;
-  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
+/* Colonnes égales (3 adultes) via colgroup */
+.cl-child-table col.cl-col {
+  width: 33.3333%;
 }
 
-/* Classe pour afficher le menu */
-.cl-add-menu--open {
+/* En-têtes adultes: séparateurs + total à droite */
+.cl-child-table thead th {
+  background: #f3f4f6;
+  font-weight: 600;
+  padding: 6px 8px;
+  border-bottom: 1px solid #e5e7eb;
+  font-size: 12px;
+  text-align: left;
+  vertical-align: middle;
+  white-space: nowrap;
+  border-right: 1px solid #e5e7eb;
+}
+.cl-child-table thead th:last-child {
+  border-right: none;
+}
+
+.cl-th-inner {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.cl-th-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Total adulte (réutilise le style global) */
+.cl-summary-adult-total {
+  font-size: 12px;
+  font-weight: 600;
+  color: #1d4ed8;
+}
+
+/* Corps: séparateurs + gestion des noms longs */
+.cl-child-table tbody td {
+  vertical-align: top;
+  padding: 6px 8px;
+  border-top: 1px solid #edf2f7;
+  border-right: 1px solid #e5e7eb;
+  font-size: 12px;
+  line-height: 1.35;
+  word-break: break-word;
+  overflow-wrap: anywhere;
+}
+.cl-child-table tbody td:last-child {
+  border-right: none;
+}
+
+/* Cellules vides: un “—” par adulte, centré, pleine largeur */
+.cl-child-table .cl-empty {
+  display: inline-block;
+  width: 100%;
+  text-align: center;
+  color: #9ca3af;
+}
+
+/* Prix du cadeau (dans la cellule) */
+.cl-gift-amount {
+  color: #627d98;
+  white-space: nowrap;
+}
+
+/* Code couleur par enfant (bordure + header/caption) */
+.cl-child-table.child-pol {
+  border-color: #bcd3ff;
+}
+.cl-child-table.child-pol caption,
+.cl-child-table.child-pol thead th {
+  background: #eaf2ff;
+  border-bottom-color: #bcd3ff;
+}
+
+.cl-child-table.child-pep {
+  border-color: #b9e3b9;
+}
+.cl-child-table.child-pep caption,
+.cl-child-table.child-pep thead th {
+  background: #eaf7ea;
+  border-bottom-color: #b9e3b9;
+}
+
+.cl-child-table.child-elna {
+  border-color: #f3bfd7;
+}
+.cl-child-table.child-elna caption,
+.cl-child-table.child-elna thead th {
+  background: #fdeaf3;
+  border-bottom-color: #f3bfd7;
+}
+
+.cl-child-table.child-bru {
+  border-color: #ffd0a8;
+}
+.cl-child-table.child-bru caption,
+.cl-child-table.child-bru thead th {
+  background: #fff3e6;
+  border-bottom-color: #ffd0a8;
+}
+
+.cl-child-table.child-guim {
+  border-color: #d3c6ff;
+}
+.cl-child-table.child-guim caption,
+.cl-child-table.child-guim thead th {
+  background: #f0eaff;
+  border-bottom-color: #d3c6ff;
+}
+
+/* ========================================================= */
+/*  Modale d’ajout de cadeau                                 */
+/* ========================================================= */
+
+.cl-modal {
+  display: none;
+}
+.cl-modal.cl-open {
   display: block;
 }
 
-/* Formulaire dans le menu */
-.cl-gift-form {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
+.cl-modal-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(17, 24, 39, 0.35);
+  z-index: 999;
 }
 
-/* Ligne du formulaire (lien + montant) */
-.cl-gift-form-row {
-  display: flex;
-  gap: 4px;
-}
-
-/* Champs du formulaire */
-.cl-gift-form input[type="text"],
-.cl-gift-form input[type="url"],
-.cl-gift-form input[type="number"] {
-  font-size: 10px;
-  padding: 2px 4px;
-  border-radius: 4px;
+.cl-modal-dialog {
+  position: fixed;
+  z-index: 1000;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: min(520px, calc(100% - 24px));
+  background: #fff;
   border: 1px solid #d9e2ec;
+  border-radius: 8px;
+  box-shadow: 0 10px 30px rgba(17, 24, 39, 0.25);
 }
 
-.cl-gift-form input[type="text"] {
-  width: 100%;
+.cl-modal-form {
+  display: grid;
+  gap: 10px;
+  padding: 14px;
 }
 
-.cl-gift-form input[type="url"] {
-  flex: 1 1 auto;
+.cl-modal-form h3 {
+  margin: 0 0 4px;
+  font-size: 16px;
+  color: #243b53;
 }
 
-.cl-gift-form input[type="number"] {
-  width: 60px;
+.clm-label {
+  display: grid;
+  gap: 6px;
+  font-size: 12px;
+  color: #374151;
 }
 
-/* Boutons OK / Cancel */
-.cl-gift-form-actions {
+.clm-label input,
+.clm-label select {
+  font-size: 12px;
+  padding: 6px 8px;
+  border: 1px solid #d9e2ec;
+  border-radius: 6px;
+}
+
+.cl-modal-actions {
   display: flex;
   justify-content: flex-end;
-  gap: 4px;
-  margin-top: 2px;
-}
-
-.cl-gift-form-actions button {
-  font-size: 10px;
-  padding: 2px 6px;
-  border-radius: 4px;
-  border: 1px solid #d9e2ec;
-  background: #f0f4f8;
-  cursor: pointer;
-}
-
-.cl-gift-form-actions button:hover {
-  background: #d9e2ec;
-}
-
-.cl-ok-btn {
-  font-weight: 600;
-  color: #1f2933;
-}
-
-.cl-cancel-btn {
-  color: #9fb3c8;
-}
-
-/* Récap global en bas */
-.cl-budget-wrapper {
+  gap: 8px;
   margin-top: 4px;
 }
 
+.clm-cancel,
+.clm-ok {
+  font-size: 12px;
+  padding: 6px 12px;
+  border: 1px solid #d9e2ec;
+  border-radius: 6px;
+  background: #f0f4f8;
+  cursor: pointer;
+}
+.clm-ok {
+  font-weight: 600;
+  color: #1f2933;
+}
+.clm-cancel {
+  color: #9fb3c8;
+}
+.clm-cancel:hover,
+.clm-ok:hover {
+  background: #d9e2ec;
+}
+
+/* ========================================================= */
+/*  Résumé du budget et Liste détaillée                      */
+/* ========================================================= */
+
+.cl-budget-wrapper {
+  margin-top: 4px;
+}
 .cl-budget-wrapper .pf-table {
   font-size: 11px;
 }
-
 .cl-budget-wrapper .pf-table th,
 .cl-budget-wrapper .pf-table td {
   padding: 4px 4px;
 }
+
+.cl-detail-wrapper .pf-table {
+  font-size: 11px;
+}
+.cl-detail-wrapper .pf-table th,
+.cl-detail-wrapper .pf-table td {
+  padding: 4px 4px;
+}
diff --git a/modules/family-calendar/family-calendar.css b/modules/family-calendar/family-calendar.css
index c3f7cd0..7d373fb 100644
--- a/modules/family-calendar/family-calendar.css
+++ b/modules/family-calendar/family-calendar.css
@@ -265,7 +265,9 @@
   background: #f9fafb;
   color: #111827;
   cursor: pointer;
-  transition: background-color 0.15s ease, border-color 0.15s ease,
+  transition:
+    background-color 0.15s ease,
+    border-color 0.15s ease,
     box-shadow 0.15s ease;
 }