Visu mobile

global.css

@@ -210,3 +210,78 @@ input[type="number"] {
   font-weight: 600;
   color: #243b53;
 }
+/* === Mobile Comfort: header et éléments plus lisibles/rapprochés === */
+@media (pointer: coarse), (max-width: 780px) {
+  /* Container: remplace le léger décalage par un padding homogène */
+  .pf-container {
+    max-width: none; /* laisse respirer sur mobile */
+    margin-left: 0;
+    padding: 0 12px;
+  }
+
+  /* Header global */
+  .pf-header {
+    padding: 12px 0; /* plus de hauteur */
+  }
+  .pf-header-content {
+    padding: 0 12px;
+    gap: 10px; /* rapproche un peu les éléments */
+  }
+  .pf-logo {
+    font-size: 20px; /* plus lisible */
+  }
+
+  /* Navigation */
+  .pf-nav {
+    gap: 8px; /* éléments un peu plus rapprochés */
+    overflow-x: auto; /* scroll horizontal si trop d’items */
+    -webkit-overflow-scrolling: touch;
+    padding-bottom: 6px; /* espace pour le pouce quand ça scroll */
+  }
+  .pf-nav::-webkit-scrollbar {
+    display: none;
+  }
+
+  .pf-nav-link {
+    font-size: 16px; /* >=16px évite le zoom iOS */
+    padding: 10px 12px;
+    min-height: 44px; /* cible tactile recommandée */
+    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 */
+  .pf-table {
+    font-size: 13.5px;
+  }
+  .pf-table th,
+  .pf-table td {
+    padding: 6px 6px;
+  }
+  .pf-table--compact th,
+  .pf-table--compact td {
+    padding: 6px 6px;
+  }
+
+  /* Formulaires: éviter le zoom iOS et lisibilité */
+  label {
+    font-size: 14px;
+  }
+  input[type="number"] {
+    width: 100%;
+    max-width: 220px;
+    font-size: 16px; /* >=16px évite le zoom iOS */
+    padding: 8px 10px;
+  }
+}

header.php

@@ -40,7 +40,7 @@ if (!isset($activePage)) {
              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>
 
           <?php if (isset($_SESSION['user'])): ?>
             <span class="pf-nav-user">

modules/gift-list/gift-list.css

@@ -579,3 +579,23 @@
   color: #fff;
   border-color: #333;
 }
+
+/* Centrage fiable du + dans le cercle (micro-nudge du cercle) */
+.cl-child-add-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+}
+
+/* On décale très légèrement le cercle vers le bas pour compenser l’optique du glyphe + */
+.cl-child-add-btn::before {
+  transform: translate(-50%, -50%) translateY(0.5px);
+}
+
+/* Si nécessaire sur certains mobiles, augmente le nudge */
+@media (pointer: coarse) {
+  .cl-child-add-btn::before {
+    transform: translate(-50%, -50%) translateY(1px);
+  }
+}