Rendre l'application utilisable sur mobile pour les cadres

- Calendrier : sous 640px, la grille 7 colonnes devient une liste
  verticale (une ligne pleine largeur par jour), boutons AM/PM en
  cibles tactiles de 44px minimum.
- Popover de statut : positionnement recalculé pour rester dans
  l'écran (bascule au-dessus de la cellule et se recale à gauche si
  besoin) au lieu de pouvoir déborder hors viewport.
- Tableaux admin (sociétés, utilisateurs, validation) : scroll
  horizontal indépendant pour ne pas casser la mise en page sur petit
  écran.
- Nav admin et en-tête compactés sur mobile.

Testé avec Playwright en viewport mobile (375x812) : calendrier liste,
popover, connexion et vues admin.

frontend/public/css/style.css

@@ -330,9 +330,60 @@ h2 { font-size: 17px; margin: 0 0 4px; }
 
 .view[hidden] { display: none; }
 
+.day-weekday-mobile { display: none; }
+
+.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
+
 @media (max-width: 720px) {
-  .main { padding: 20px 14px 50px; }
-  .day-cell { min-height: 70px; }
-  .half-day { font-size: 9px; min-height: 28px; }
+  .main { padding: 16px 12px 50px; }
   .selector-card { flex-direction: column; align-items: stretch; }
+  .topbar { padding: 10px 14px; }
+  .topbar-user { gap: 8px; }
+}
+
+/* Below this width the 7-column grid becomes unusable by touch, so the
+   calendar switches to a single-column list: one full-width row per day. */
+@media (max-width: 640px) {
+  .calendar-header { flex-direction: column; }
+  .calendar-weekdays { display: none; }
+
+  .calendar-grid {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+  .day-cell {
+    flex-direction: row;
+    align-items: center;
+    min-height: unset;
+    padding: 10px;
+    gap: 10px;
+  }
+  .day-cell.empty { display: none; }
+  .day-number {
+    flex: 0 0 auto;
+    width: 46px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    line-height: 1.2;
+  }
+  .day-weekday-mobile {
+    display: block;
+    font-size: 10px;
+    font-weight: 700;
+    color: var(--color-muted);
+    text-transform: uppercase;
+  }
+  .half-day-row { gap: 8px; }
+  .half-day { min-height: 44px; font-size: 11px; }
+
+  .calendar-actions { justify-content: stretch; }
+  .calendar-actions .btn { width: 100%; }
+
+  .legend { gap: 10px 14px; font-size: 12px; }
+
+  .popover { max-width: calc(100vw - 16px); }
+
+  .modal { padding: 20px; }
 }