diff --git a/global.css b/global.css
index 426207a..1d98d7b 100644
--- a/global.css
+++ b/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;
+ }
+}
diff --git a/header.php b/header.php
index 7dc4e79..c49fedf 100644
--- a/header.php
+++ b/header.php
@@ -40,7 +40,7 @@ if (!isset($activePage)) {
class="pf-nav-link = $activePage === 'family-calendar' ? 'pf-nav-link--active' : ''; ?>">Family calendar
gift list
+ class="pf-nav-link = $activePage === 'gift-list' ? 'pf-nav-link--active' : ''; ?>">Gift list
diff --git a/modules/gift-list/gift-list.css b/modules/gift-list/gift-list.css
index 2e3edee..a1a2625 100644
--- a/modules/gift-list/gift-list.css
+++ b/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);
+ }
+}