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;
-    gap: 10px; /* rapproche un peu les éléments */
+    padding: 0 14px;
+    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 */
-    overflow-x: auto; /* scroll horizontal si trop d’items */
+    gap: 10px;
+    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 */
-    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 */
+    font-size: 18px;
+    padding: 12px 14px;
+    min-height: 48px;
     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;
-    font-size: 16px; /* >=16px évite le zoom iOS */
-    padding: 8px 10px;
+    max-width: 240px;
+    font-size: 17px; /* >=16px évite le zoom iOS */
+    padding: 12px 12px;
+    border-radius: 10px;
   }
 }