/* Cabinet Pro — Couche mobile DÉDIÉE et ISOLÉE.
 *
 * Règle d'or : TOUTE règle ici est préfixée par `body.is-mobile`.
 * - `is-mobile` n'est posée que par cabinet-shim.js, qui ne s'exécute QU'EN WEB
 *   (return immédiat sous Electron file://) et seulement si viewport ≤ 768px.
 * - Donc sous Electron / desktop, AUCUNE règle de ce fichier ne s'applique :
 *   l'app desktop est strictement inchangée, ce fichier est inerte.
 *
 * Incrément 1 : shell + navigation (bottom tab bar, sidebar masquée,
 * débordement horizontal supprimé). Le rendu fin écran-par-écran viendra
 * par incréments suivants, testés sur l'appareil.
 */

/* La tab bar n'existe que lorsque le shim l'injecte (web). Base masquée :
   ainsi en web-desktop (>768px, pas de is-mobile) elle reste invisible. */
.mobile-tabbar,
.mobile-sheet-backdrop,
.mobile-sheet { display: none; }

body.is-mobile {
  /* 1. On casse la grille desktop : plus de sidebar, contenu pleine largeur.
     SCROLL FIX : body { overflow: hidden } reste inchangé (nécessaire Electron/desktop).
     C'est #app qui devient le conteneur scrollable sur mobile, pas le body. */
  overflow-x: hidden;
}
body.is-mobile #app {
  /* #app = conteneur scrollable vertical. Résout le blocage
     « body { overflow: hidden } » sans toucher aux règles desktop. */
  display: flex !important;
  flex-direction: column;
  height: 100dvh;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  max-width: 100vw;
}
body.is-mobile .sidebar,
body.is-mobile .sidebar-backdrop,
body.is-mobile .mobile-menu-btn {
  display: none !important;
}
body.is-mobile .main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: visible;
  width: 100%;
  max-width: 100vw;
  min-width: 0;
}

/* 2. Top bar compacte et collante (titre de page + actions).
   position:sticky fonctionne dans le scroll de #app. */
body.is-mobile .topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  padding-top: env(safe-area-inset-top);
  height: auto;
  min-height: var(--topbar-h);
}

/* 3. Zone de vue : pleine largeur, dégage la place pour la tab bar.
   overflow: visible → le scroll se fait dans #app, pas dans .view.
   Le padding-bottom réserve la place pour la bottom tab bar fixe. */
body.is-mobile .view,
body.is-mobile #view {
  flex: none;
  height: auto;
  overflow: visible;
  overflow-x: hidden;
  max-width: 100vw;
  padding: 14px 12px calc(72px + env(safe-area-inset-bottom));
}

/* 4. Anti-débordement : les tableaux/larges blocs scrollent DANS leur
   conteneur, jamais la page entière. */
body.is-mobile .table-wrap,
body.is-mobile .scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
body.is-mobile img,
body.is-mobile video,
body.is-mobile iframe,
body.is-mobile pre { max-width: 100%; }
body.is-mobile pre { white-space: pre-wrap; word-break: break-word; }

/* 5. Modales : plein écran utile au lieu des largeurs desktop figées. */
body.is-mobile .modal:not([hidden]) { padding: 0; }
body.is-mobile .form-modal,
body.is-mobile .search-modal,
body.is-mobile .quick-modal,
body.is-mobile .wide-modal,
body.is-mobile .modal > .card,
body.is-mobile .modal-card {
  max-width: 100vw !important;
  width: 100vw !important;
  max-height: 100dvh !important;
  height: auto;
  border-radius: 0 !important;
  margin: 0 !important;
}

/* 6. Cibles tactiles : boutons/inputs confortables au pouce. */
body.is-mobile button,
body.is-mobile .btn-primary,
body.is-mobile .btn-secondary,
body.is-mobile .btn-ghost,
body.is-mobile input:not([type=checkbox]):not([type=radio]),
body.is-mobile select,
body.is-mobile textarea {
  min-height: 42px;
  font-size: 16px; /* < 16px → iOS/Android zoome au focus */
}

/* 7. Bottom tab bar — la navigation principale en mobilité. */
body.is-mobile .mobile-tabbar {
  display: flex;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  background: var(--bg-sidebar);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
}
body.is-mobile .mobile-tab {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 2px 6px;
  background: none;
  border: 0;
  color: var(--text-mute);
  font-size: 10.5px;
  font-weight: 600;
  min-height: 56px;
  cursor: pointer;
  position: relative;
}
body.is-mobile .mobile-tab svg { width: 22px; height: 22px; stroke-width: 2; }
body.is-mobile .mobile-tab.active { color: var(--accent, #2563EB); }
body.is-mobile .mobile-tab .tab-badge {
  position: absolute;
  top: 4px;
  right: calc(50% - 20px);
  min-width: 16px; height: 16px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--danger, #dc2626);
  color: #fff;
  font-size: 10px;
  line-height: 16px;
  text-align: center;
}

/* 8. Feuille « Plus » (accès au reste des écrans). */
body.is-mobile .mobile-sheet-backdrop {
  display: block;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 60;
}
body.is-mobile .mobile-sheet {
  display: flex;
  flex-direction: column;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 61;
  max-height: 80dvh;
  overflow-y: auto;
  background: var(--bg);
  border-radius: 16px 16px 0 0;
  padding: 8px 0 calc(12px + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 30px rgba(0,0,0,.25);
}
body.is-mobile .mobile-sheet-grip {
  width: 40px; height: 4px;
  border-radius: 2px;
  background: var(--border);
  margin: 8px auto 6px;
  flex: none;
}
body.is-mobile .mobile-sheet a,
body.is-mobile .mobile-sheet button {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  background: none;
  border: 0;
  width: 100%;
  text-align: left;
  color: var(--text);
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
}
body.is-mobile .mobile-sheet a:active,
body.is-mobile .mobile-sheet button:active { background: var(--bg-soft, rgba(0,0,0,.05)); }
body.is-mobile .mobile-sheet svg { width: 20px; height: 20px; stroke-width: 2; color: var(--text-mute); flex: none; }

/* =====================================================================
   Incrément 2 — Lisibilité écran par écran (100 % CSS, scopé is-mobile).
   On effondre TOUTES les grilles multi-colonnes desktop en une colonne
   et on contient les éléments larges. Aucun JS de vue touché.
   Spécificité body.is-mobile (0,0,2,0) > .classe (0,0,1,0) : pas de
   !important nécessaire, gagne même contre les @media desktop.
   ===================================================================== */

/* 9. Toutes les dispositions 2 colonnes → 1 colonne. */
body.is-mobile .patient-detail,
body.is-mobile .activity-split,
body.is-mobile .soap-grid,
body.is-mobile .chat-layout,
body.is-mobile .bio-split,
body.is-mobile .form-grid,
body.is-mobile .grid-cards,
body.is-mobile .scores-grid,
body.is-mobile .score-form-grid {
  grid-template-columns: 1fr;
  gap: 14px;
  height: auto;
}

/* 10. Dossier patient : la colonne latérale passe AU-DESSUS, non collante. */
body.is-mobile .patient-side {
  position: static;
  top: auto;
}
body.is-mobile .patient-header-card { padding: 16px; }

/* 11. Onglets (dossier patient) : bande scrollable au doigt. */
body.is-mobile .tabs-grouped-scroll {
  overflow-x: auto;
  flex-wrap: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 12px;
}
body.is-mobile .tabs-grouped-scroll::-webkit-scrollbar { display: none; }
body.is-mobile .tabs .tab { flex: 0 0 auto; white-space: nowrap; min-height: 40px; }
body.is-mobile .patient-main-header {
  position: static;
  flex-direction: column;
}
body.is-mobile .patient-main-header .action-bar-primary {
  width: 100%;
}
body.is-mobile .patient-main-header .action-bar-primary .btn-primary {
  flex: 1;
}
body.is-mobile .consult-footer-bar {
  position: static;
}
body.is-mobile .consult-footer-bar .footer-actions {
  width: 100%;
  margin-left: 0;
}
body.is-mobile .consult-footer-bar .footer-actions .btn-primary {
  flex: 1;
}
body.is-mobile .consult-command-bar {
  flex-direction: column;
  align-items: stretch;
}
body.is-mobile #btn-consult-toggle {
  width: 100%;
}

/* 12. Chat IA : pile la liste de fils au-dessus, hauteurs fluides. */
body.is-mobile .chat-messages { height: auto; min-height: 52vh; }
body.is-mobile .chat-window { min-height: 60vh; }

/* 13. Agenda semaine : grille 7 jours scrollable horizontalement
   (le #view la laisse défiler uniquement quand il la contient). */
body.is-mobile .view:has(.calendar-week),
body.is-mobile #view:has(.calendar-week) { overflow-x: auto; }
body.is-mobile .calendar-week { min-width: 660px; }

/* 14. Labos / rapports : tableaux contenus, jamais de débordement page. */
body.is-mobile .lab-report,
body.is-mobile .lab-raw { overflow-x: auto; -webkit-overflow-scrolling: touch; }
body.is-mobile .lab-table { min-width: 0; }

/* 15. Barres d'outils (recherche + filtres + boutons) : repli propre. */
body.is-mobile .toolbar {
  flex-wrap: wrap;
  gap: 8px;
}
body.is-mobile .toolbar > * { flex: 1 1 auto; min-width: 0; }
body.is-mobile .toolbar .search-bar { flex: 1 1 100%; }

/* 16. Rangées d'actions IA (consultation) : repli au lieu de déborder. */
body.is-mobile .ai-actions,
body.is-mobile .score-form-header,
body.is-mobile .dmd-action-group-row { flex-wrap: wrap; }

/* 17. Cartes / panneaux : marges et rayons adaptés au petit écran. */
body.is-mobile .card { padding: 14px; border-radius: 12px; }
body.is-mobile .card + .card { margin-top: 12px; }

/* 18. Titres : on évite les très gros titres desktop qui débordent. */
body.is-mobile h1 { font-size: 22px; }
body.is-mobile h2 { font-size: 18px; }
body.is-mobile .page-title { font-size: 17px; }

/* =====================================================================
   Incrément 3 — Vues hub (Communication, Organisation, Paramètres, Réception)
   Les sous-onglets assistant-tabs scrollent horizontalement au lieu de
   se replier sur plusieurs lignes (5 onglets = 3 rangées sinon).
   ===================================================================== */

/* 19. Barre de sous-onglets : scroll horizontal, jamais multi-lignes. */
body.is-mobile .assistant-tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 6px;
  /* Marge négative pour aller bord à bord, padding visuel à la place. */
  margin: 0 -12px 12px;
  padding: 6px 12px;
  border-radius: 0;
  border-left: none;
  border-right: none;
}
body.is-mobile .assistant-tabs::-webkit-scrollbar { display: none; }
body.is-mobile .assistant-tab {
  flex: 0 0 auto;
  min-width: 0;
  white-space: nowrap;
  padding: 8px 14px;
  font-size: 13px;
}

/* 20. Sous-vue : hauteur auto (pas de min-height figée desktop). */
body.is-mobile .assistant-subview { min-height: 0; }

/* 21. Boîte mail — empilée (mail-inbox.js gère la bascule liste/détail en JS).
   Ces règles polissent seulement les éléments internes. */
body.is-mobile .mail-list-pane { width: 100% !important; border-right: none !important; }
body.is-mobile .mail-detail-pane { flex-direction: column; }
body.is-mobile .mail-compose-wrapper { height: auto !important; }

/* 22. Topbar sur mobile : cacher le back-btn desktop (navigation par geste/hash). */
body.is-mobile .desktop-back-btn { display: none !important; }

/* =====================================================================
   Incrément 4 — Agenda / calendar sur mobile
   ===================================================================== */

/* 23. En agenda-mode, les onglets de navigation desktop (Tableau de bord,
   Patients, Consultations, Agenda…) disparaissent → la bottom tab bar suffit. */
body.is-mobile .agenda-tabs { display: none !important; }

/* 24. Légende des types de RDV : occupe 2-3 lignes sur mobile → cachée.
   Les filtres restent accessibles via le dropdown « ⋯ Plus ». */
body.is-mobile .agp-legend { display: none; }

/* 25. Substats (« sem. 22 · 0 RDV ») : pas utile sur mobile. */
body.is-mobile .agp-substats { display: none; }

/* 26. Toolbar compacte : moins de padding, période réduite. */
body.is-mobile .agp-toolbar { gap: 6px; padding: 8px 10px; }
body.is-mobile .agp-period { font-size: 13px; min-width: 0; flex: 1 1 auto; }
body.is-mobile .agp-toolbar-right { margin-left: 0; }
body.is-mobile .agp-viewseg button { padding: 6px 8px; font-size: 11px; }
body.is-mobile .agp-weekend span { display: none; } /* cache le label "Week-end", garde la checkbox */

/* 27. Corps agenda : hauteur limitée à la fenêtre moins la tab bar mobile (72 px).
   agpFitHeight() calcule window.innerHeight - top - 10 sans connaître la tab bar ;
   le résultat déborderait sous elle. Le max-height sert de filet de sécurité CSS. */
body.is-mobile .agp-body { max-height: calc(100dvh - 130px); }

/* =====================================================================
   Incrément 5 — Vue DEMANDES : carte de triage compacte et scannable.
   Problème observé sur Pixel 9 : chaque carte ≈ 1000 px de haut (on voit
   moins d'une demande par écran) car l'éditeur de note interne (textarea +
   micro + barre IA Réponse/Triage/Résumé) est déplié en permanence.
   Principe (cf. no-oversimplify-dmi) : RIEN n'est supprimé. L'éditeur se
   replie au repos et se déplie au focus (:focus-within) ; le message garde
   son « Voir tout » ; les actions restent visibles et proéminentes.
   ===================================================================== */

/* 28. Onglets (En attente / Traitées / Tâche perso) : tiennent sur une ligne
   sans être coupés. flex 1/1/0 = partage égal + autorise le rétrécissement. */
body.is-mobile .dmd-tabs {
  overflow-x: visible;
  gap: 6px;
}
body.is-mobile .dmd-tab {
  flex: 1 1 0;
  min-width: 0;
  padding: 10px 6px;
  font-size: 12.5px;
  gap: 5px;
  white-space: nowrap;
}
body.is-mobile .dmd-tab-count {
  font-size: 11px;
  min-width: 0;
  padding: 0 6px;
}

/* 29. Éditeur de note interne : replié au repos (champ slim), déplié au focus.
   La barre IA a `display:grid !important` côté desktop → on doit aussi forcer. */
body.is-mobile .dmd-table tbody td:nth-child(8) .dmd-note-toolbar,
body.is-mobile .dmd-table tbody td:nth-child(8) .dmd-note-ia-bar {
  display: none !important;
}
body.is-mobile .dmd-table tbody td:nth-child(8):focus-within .dmd-note-toolbar {
  display: flex !important;
}
body.is-mobile .dmd-table tbody td:nth-child(8):focus-within .dmd-note-ia-bar {
  display: grid !important;
}
/* Textarea : 1 ligne au repos, confortable en édition. */
body.is-mobile .dmd-table tbody td:nth-child(8) .dmd-note {
  min-height: 0;
  height: 42px;
  transition: height .15s ease;
}
body.is-mobile .dmd-table tbody td:nth-child(8):focus-within .dmd-note {
  height: auto;
  min-height: 84px;
}

/* 30. Espacements resserrés : moins de hauteur perdue entre les lignes. */
body.is-mobile .dmd-table tbody tr {
  padding: 40px 12px 12px;
  margin-bottom: 10px;
}
body.is-mobile .dmd-table tbody td { padding: 3px 0; }
/* Le séparateur avant la note interne devient inutile une fois repliée. */
body.is-mobile .dmd-table tbody td:nth-child(8) {
  padding-top: 6px;
  margin-top: 2px;
  border-top: none !important;
}

/* =====================================================================
   Incrément 6 — Audit affichage mobile (2026-06-03, viewport 412 px Pixel 9).
   Quatre correctifs ciblés relevés écran par écran. 100 % scopé is-mobile :
   le desktop/Electron reste strictement inchangé.
   ===================================================================== */

/* 31. AGENDA — tooltip de survol (.agp-tooltip).
   En desktop il apparaît à droite/gauche d'une carte au survol souris.
   Sur mobile c'est triplement problématique : (a) pas de vrai survol tactile,
   (b) la logique de « flip » (agpShowTip, calendar.js) le pousse HORS écran à
   gauche (left négatif) quand la carte est dans une colonne étroite, (c) il
   est appendu au <body> et n'est masqué qu'au mouseleave → il reste collé
   après une navigation. Le tap sur une carte ouvre déjà la fiche complète du
   RDV → le tooltip est redondant. On le neutralise entièrement sur mobile. */
body.is-mobile .agp-tooltip { display: none !important; }

/* 32. GRILLES « label | champ » à colonnes FIXES posées en style inline.
   Paramètres (240px 1fr, ×9), Réception (180px 180px 180px 1fr pour les
   filtres ; minmax(380px,40%) 1fr pour le master-détail). Sur ≤412 px la
   1re colonne + le champ dépassent la carte ; comme #app/.view ont
   overflow-x:hidden, le champ n'est pas scrollable mais simplement ROGNÉ au
   bord droit (inputs « Dr. Nanni », « administratif@… », dropdowns coupés).
   Ces conteneurs n'ont aucune classe : on les cible par sélecteur d'attribut
   (el() sérialise style.gridTemplateColumns dans l'attribut style — match
   exact vérifié en live). !important pour battre le style inline.
   On ne touche QUE ces colonnes fixes — surtout PAS les grilles responsives
   repeat(auto-fit/fill, minmax(...)) qui se replient déjà correctement. */
body.is-mobile [style*="grid-template-columns: 240px"],
body.is-mobile [style*="grid-template-columns: 180px"],
body.is-mobile [style*="grid-template-columns: minmax(380px"] {
  grid-template-columns: 1fr !important;
  gap: 6px !important;
  align-items: stretch !important;
}
/* Les champs de ces lignes prennent toute la largeur disponible (sinon
   certains gardent une largeur intrinsèque et laissent un vide à droite). */
body.is-mobile [style*="grid-template-columns: 240px"] input,
body.is-mobile [style*="grid-template-columns: 240px"] select,
body.is-mobile [style*="grid-template-columns: 240px"] textarea,
body.is-mobile [style*="grid-template-columns: 180px"] input,
body.is-mobile [style*="grid-template-columns: 180px"] select {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* 32b. RÉCEPTION — panneau d'aperçu (2e enfant du master-détail) : il est
   position:sticky + height:calc(100vh-…) en desktop. Une fois la grille
   effondrée en 1 colonne, il s'empilerait sous la liste en bloc géant et
   collant. On le rend statique et de hauteur naturelle sur mobile. */
body.is-mobile [style*="grid-template-columns: minmax(380px"] > div:last-child {
  position: static !important;
  height: auto !important;
  max-height: none !important;
  border-right: none !important;
}

/* 32c. RÉCEPTION — liste des notifications. La grille à 6 colonnes
   (icône · Type · Émetteur · Patient · Reçu · point) reste trop serrée même
   en pleine largeur : « Émetteur » (≈59 px) chevauche « Patient ». Le code
   prévoit déjà de masquer l'émetteur « quand pas la place ». Sur mobile on
   masque donc la 3e colonne (Émetteur, visible dans le détail du message) et
   on repasse à 5 pistes — Patient récupère l'espace. En-tête et lignes
   partagent le MÊME gabarit inline → l'alignement reste cohérent. */
body.is-mobile [style*="grid-template-columns: 8px 80px"] {
  grid-template-columns: 8px 80px minmax(0, 1fr) 56px 22px !important;
}
body.is-mobile [style*="grid-template-columns: 8px 80px"] > *:nth-child(3) {
  display: none !important;
}

/* 33. RECHERCHE GLOBALE — fermeture tactile.
   En plein écran mobile, le contenu de la modale couvre le backdrop (qui porte
   data-action=close-modal) → injoignable. L'indice <kbd>esc</kbd> n'est pas
   cliquable et il n'y a pas de touche Échap fiable sur smartphone : l'écran de
   recherche devient un piège sans sortie. On masque l'indice esc et on révèle
   un bouton ✕ (ajouté dans index.html, mobile-only) réutilisant close-modal. */
body.is-mobile .search-input-wrap kbd { display: none; }
.search-close-btn { display: none; }
body.is-mobile .search-close-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  margin-left: 4px;
}

/* =====================================================================
   Incrément 7 — Agenda mobile : navigation & densité (2026-06-04).
   La toolbar agenda mangeait ~163 px (18 % de l'écran) à cause d'une rangée
   de 8 icônes cryptiques. On la retire (actions rapatriées dans « ⋯ Plus » +
   menu d'un créneau), on rend la période tappable (sélecteur de date natif),
   on ajoute un FAB de création et une navigation par swipe (gérée en JS).
   100 % scopé is-mobile ; desktop/Electron strictement inchangé.
   ⚠️ AUCUNE couleur de carte/fond touchée (cf. agenda parité myconsultation :
   consultation #01579b · visite #b71c1c · télésecrétariat #00897b · texte blanc).
   ===================================================================== */

/* 37. On retire la rangée des 8 icônes (📅🚫🔄🖨🕐📥🔍❓). ~50 px gagnés.
   Tout reste accessible : création/blocage au tap d'un créneau libre + FAB,
   recherche/impression/export dans « ⋯ Plus », « Aujourd'hui » déjà en clair. */
body.is-mobile .agp-icongroup { display: none !important; }

/* 38. Toolbar resserrée : ‹ › · période(date) · Aujourd'hui · ⋯ Plus sur une
   ligne ; le segment de vues passe pleine largeur sur la ligne suivante. */
body.is-mobile .agp-toolbar { padding: 6px 10px; gap: 6px 8px; }
body.is-mobile .agp-period-wrap {
  position: relative;
  /* basis 0 (et non auto) : la période ne « grandit » pas avant que ‹ › ·
     Aujourd'hui · ⋯ Plus soient placés → tout tient sur la 1re rangée, le
     segment de vues passe seul sur la 2e. Sinon « ⋯ Plus » déborde (3 rangées). */
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  cursor: pointer;
}
body.is-mobile .agp-period-wrap .agp-period {
  margin: 0;
  font-size: 14px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Petit chevron : indique que la période est cliquable (saut de date). */
body.is-mobile .agp-period-wrap::after {
  content: '▾';
  color: #94a3b8;
  font-size: 12px;
  margin-left: 3px;
  flex: none;
}
/* <input type=date> invisible superposé : le tap ouvre le sélecteur natif. */
body.is-mobile .agp-period-date {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  opacity: 0;
  font-size: 16px; /* < 16px → zoom iOS/Android au focus */
}
body.is-mobile .agp-toolbar-right {
  order: 9;
  flex: 1 1 100%;
  margin-left: 0;
  justify-content: flex-start;
  gap: 8px;
}
body.is-mobile .agp-toolbar-right .agp-viewseg { flex: 1 1 auto; }
body.is-mobile .agp-viewseg button { flex: 1 1 0; padding: 9px 4px; font-size: 12.5px; }

/* 39. FAB « + » : création de RDV au pouce, juste au-dessus de la tab bar
   (72 px). Injecté dans .agp-root en JS ; caché partout sauf mobile. */
.agp-fab { display: none; }
body.is-mobile .agp-fab {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  right: 16px;
  bottom: calc(72px + env(safe-area-inset-bottom) + 14px);
  z-index: 45;
  width: 56px;
  height: 56px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--agp-blue, #0288d1);
  color: #fff;
  font-size: 30px;
  font-weight: 300;
  line-height: 1;
  box-shadow: 0 6px 18px rgba(2,136,209,.45);
  cursor: pointer;
}
body.is-mobile .agp-fab:active { transform: scale(.93); }

/* 40. Vues 3 JOURS et SEMAINE (sans week-end) : faire TENIR toutes les colonnes
   dans la largeur de l'écran au lieu d'un scroll horizontal qui cache des jours.
   .agp-col est `flex:1` mais `min-width:128px` → 3-5 colonnes débordaient (432 /
   688 px dans 412). En retirant le min-width sur mobile, les colonnes se serrent
   pour tenir (3 j ≈ 120 px, semaine 5 j ≈ 72 px) → période entière visible d'un
   coup d'œil ET le swipe inter-période s'active (scrollWidth ≤ clientWidth, cf.
   agpInstallTouchNav). Vue Jour inchangée (1 colonne qui remplit déjà). */
body.is-mobile .agp-scroll .agp-col:not(.agp-gutter) { min-width: 0; }
/* Gouttière des heures un peu resserrée (rend ~8 px aux colonnes). */
body.is-mobile .agp-col.agp-gutter { flex: 0 0 40px; min-width: 40px; }
body.is-mobile .agp-hourlbl { right: 5px; font-size: 11px; }
body.is-mobile .agp-allday-lbl { font-size: 8px; }
/* Colonnes étroites : cartes resserrées pour gagner en lisibilité du texte. */
body.is-mobile .agp-card { left: 2px; right: 2px; padding: 3px 5px; }
body.is-mobile .agp-card-time { font-size: 10.5px; white-space: nowrap; }
body.is-mobile .agp-card-name { font-size: 12px; }
/* En-tête de jour tappable en 3 j / semaine → bascule en vue Jour de ce jour
   (drill-down ; le curseur l'indique, le geste est posé en JS). */
body.is-mobile .agp-dayhead { cursor: pointer; }
body.is-mobile .agp-dayhead-count { font-size: 9px; }