mobile lecture

global.css

@@ -56,6 +56,12 @@ body {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  gap: 12px;
+}
+.pf-header-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
 }
 
 .pf-logo {
@@ -210,78 +216,113 @@ input[type="number"] {
   font-weight: 600;
   color: #243b53;
 }
-/* === Mobile Comfort: header et éléments plus lisibles/rapprochés === */
+
+.pf-greeting {
+  color: #f0f4f8;
+  font-weight: 500;
+  display: inline-flex;
+  align-items: center;
+  line-height: 1.2;
+}
+/* === Mobile Comfort v2: header + textes plus grands et mieux alignés === */
 @media (pointer: coarse), (max-width: 780px) {
-  /* Container: remplace le léger décalage par un padding homogène */
+  /* Container */
   .pf-container {
-    max-width: none; /* laisse respirer sur mobile */
+    max-width: none;
     margin-left: 0;
-    padding: 0 12px;
+    padding: 0 14px;
   }
 
-  /* Header global */
+  /* Header */
   .pf-header {
-    padding: 12px 0; /* plus de hauteur */
+    padding: 16px 0;
   }
   .pf-header-content {
-    padding: 0 12px;
+    padding: 0 14px;
-    gap: 10px; /* rapproche un peu les éléments */
+    gap: 12px;
+    align-items: center;
   }
   .pf-logo {
-    font-size: 20px; /* plus lisible */
+    font-size: 22px;
+  }
+  .pf-header-actions {
+    gap: 10px;
+  }
+
+  .pf-greeting {
+    color: #f0f4f8;
+    font-weight: 500;
+    display: inline-flex;
+    align-items: center;
+    line-height: 1.2;
+    font-size: 18px;
+  }
+  .pf-nav-link--secondary {
+    font-size: 18px;
+    padding: 12px 14px;
+    min-height: 48px;
+    border-radius: 10px;
+  }
+  /* Si tu utilises un avatar/icône dedans */
+  .pf-greeting img,
+  .pf-greeting .avatar {
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
   }
 
   /* Navigation */
   .pf-nav {
-    gap: 8px; /* éléments un peu plus rapprochés */
+    gap: 10px;
-    overflow-x: auto; /* scroll horizontal si trop d’items */
+    overflow-x: auto;
     -webkit-overflow-scrolling: touch;
-    padding-bottom: 6px; /* espace pour le pouce quand ça scroll */
+    padding-bottom: 8px;
   }
   .pf-nav::-webkit-scrollbar {
     display: none;
   }
 
   .pf-nav-link {
-    font-size: 16px; /* >=16px évite le zoom iOS */
+    font-size: 18px;
-    padding: 10px 12px;
+    padding: 12px 14px;
-    min-height: 44px; /* cible tactile recommandée */
+    min-height: 48px;
-    border-radius: 8px;
-  }
-
-  /* Contenu principal et sections */
-  .pf-main {
-    padding: 16px 12px 28px; /* un peu plus dense */
-  }
-  .pf-section {
-    margin-top: 16px; /* sections rapprochées */
-  }
-  .pf-section--panel {
-    padding: 12px; /* contenu plus confortable au doigt */
     border-radius: 10px;
   }
 
-  /* Tables: taille + padding légèrement augmentés */
+  /* Main + sections */
+  .pf-main {
+    padding: 20px 14px 34px;
+  }
+  .pf-section {
+    margin-top: 18px;
+  }
+  .pf-section--panel {
+    padding: 14px;
+    border-radius: 12px;
+  }
+
+  /* Tables */
   .pf-table {
-    font-size: 13.5px;
+    font-size: 14px;
   }
   .pf-table th,
   .pf-table td {
-    padding: 6px 6px;
+    padding: 8px 8px;
   }
   .pf-table--compact th,
   .pf-table--compact td {
-    padding: 6px 6px;
+    padding: 7px 7px;
   }
 
-  /* Formulaires: éviter le zoom iOS et lisibilité */
+  /* Formulaires */
   label {
-    font-size: 14px;
+    font-size: 15px;
   }
   input[type="number"] {
     width: 100%;
-    max-width: 220px;
+    max-width: 240px;
-    font-size: 16px; /* >=16px évite le zoom iOS */
+    font-size: 17px; /* >=16px évite le zoom iOS */
-    padding: 8px 10px;
+    padding: 12px 12px;
+    border-radius: 10px;
   }
 }

header.php

@@ -31,26 +31,25 @@ if (!isset($activePage)) {
     <header class="pf-header">
       <div class="pf-container pf-header-content">
         <div class="pf-logo">PachaFamily</div>
-
         <nav class="pf-nav">
           <a href="/index.php"
-             class="pf-nav-link <?= $activePage === 'home' ? 'pf-nav-link--active' : ''; ?>">Accueil</a>
+            class="pf-nav-link <?= $activePage === 'home' ? 'pf-nav-link--active' : ''; ?>">Accueil</a>
-
           <a href="/family-calendar.php"
-             class="pf-nav-link <?= $activePage === 'family-calendar' ? 'pf-nav-link--active' : ''; ?>">Family calendar</a>
+            class="pf-nav-link <?= $activePage === 'family-calendar' ? 'pf-nav-link--active' : ''; ?>">Family calendar</a>
-             
+            
           <a href="/gift-list.php"
-             class="pf-nav-link <?= $activePage === 'gift-list' ? 'pf-nav-link--active' : ''; ?>">Gift list</a>
+            class="pf-nav-link <?= $activePage === 'gift-list' ? 'pf-nav-link--active' : ''; ?>">Gift list</a>
-
+        </nav>
+        <div class="pf-header-actions">
           <?php if (isset($_SESSION['user'])): ?>
-            <span class="pf-nav-user">
+            <span class="pf-greeting">
               Bonjour <?= htmlspecialchars($_SESSION['user']['display_name'] ?? $_SESSION['user']['username'], ENT_QUOTES, 'UTF-8'); ?>
             </span>
             <a href="/logout.php" class="pf-nav-link pf-nav-link--secondary">Se déconnecter</a>
           <?php else: ?>
             <a href="/login.php" class="pf-nav-link pf-nav-link--secondary">Se connecter</a>
           <?php endif; ?>
-        </nav>
+        </div>
       </div>
     </header>
 

modules/gift-list/gift-list.css

@@ -599,3 +599,64 @@
     transform: translate(-50%, -50%) translateY(1px);
   }
 }
+/* === Gift List: Mobile Comfort v2 === */
+@media (pointer: coarse), (max-width: 780px) {
+  .pf-gift-list h1 {
+    font-size: clamp(24px, 7vw, 30px);
+    margin: 10px 0 6px;
+    line-height: 1.2;
+  }
+  .pf-gift-list h2 {
+    font-size: clamp(20px, 5.6vw, 24px);
+    line-height: 1.25;
+    margin: 10px 0 6px;
+  }
+  .pf-gift-list h3 {
+    font-size: clamp(17px, 4.8vw, 20px);
+    line-height: 1.3;
+    margin: 8px 0 4px;
+  }
+
+  /* Switch de vue plus gros et confortable */
+  .cl-view-btn {
+    font-size: 18px;
+    padding: 12px 14px;
+    min-height: 48px;
+    border-radius: 10px;
+  }
+
+  /* Grille/listes: un peu plus d’air */
+  .cl-occasion-children-tables {
+    gap: 12px;
+  }
+
+  /* Tableaux enfant: en-têtes et cellules plus lisibles */
+  .cl-child-table thead th {
+    padding: 10px 10px;
+    font-size: 13.5px;
+  }
+  .cl-child-table tbody td {
+    padding: 10px 8px;
+    font-size: 13.5px;
+  }
+  .cl-summary-adult-total {
+    font-size: 13px;
+  }
+
+  /* Bouton + : nous avons déjà agrandi le hit-area; on garde les réglages précédents */
+  .cl-child-table caption {
+    padding-right: 72px;
+  }
+
+  /* Tables Budget/Tricount/Detail: un cran au‑dessus aussi */
+  .cl-budget-wrapper .pf-table,
+  .cl-detail-wrapper .pf-table {
+    font-size: 13.5px;
+  }
+  .cl-budget-wrapper .pf-table th,
+  .cl-budget-wrapper .pf-table td,
+  .cl-detail-wrapper .pf-table th,
+  .cl-detail-wrapper .pf-table td {
+    padding: 8px 8px;
+  }
+}