/* ========================================================================== RESPONSIVE MOBILE — SMG Pilot (sprint feat/responsive-mobile) ========================================================================== Règle absolue (cf. docs/specs/SPRINT_RESPONSIVE_MOBILE.md) : le visuel PC (> 1024px) reste STRICTEMENT identique. Ce fichier n'ajoute que des règles CONDITIONNELLES (media queries) — aucune règle hors @media n'a sa place ici. Ne jamais modifier une règle de `app.css` : on ajoute, on ne remplace jamais. Breakpoints (cf. docs/sprints/responsive-mobile/RESPONSIVE_PLAN_TECHNIQUE.md §1) : - > 1024px : desktop, aucune media query ne s'applique - 768-1024px : tablette - < 768px : mobile Chargé APRÈS app.css (cf. index.html) — gagne la cascade à spécificité égale. ========================================================================== */ /* ── Filet de sécurité — jamais de scroll horizontal de LA PAGE ─────────── Retour QA : tant que tous les écrans (SS7-SS10) n'ont pas été traités un par un, un composant non encore adapté peut forcer une largeur > viewport et obliger à glisser horizontalement pour voir le reste de l'écran (pas juste un tableau/topbar isolé, la PAGE entière). En attendant que chaque écran soit traité individuellement, on empêche le débordement horizontal global : le contenu trop large est coupé sur les bords plutôt que de pousser toute la page à s'élargir. Les zones voulues en scroll horizontal (tableaux `.tc`, ci-dessous) restent scrollables EN INTERNE normalement. */ @media (max-width: 768px) { html, body { overflow-x: hidden; max-width: 100vw; } } /* ── SS2 — Navigation / sidebar → hamburger mobile ──────────────────────── Réutilise le mécanisme de repli déjà existant (`body.sidebar-collapsed`, cf. app.css:149) : sous 768px, la sidebar passe juste en position fixe (overlay par-dessus le contenu au lieu de pousser #main) et devient scrollable verticalement (la nav a plus d'entrées que la hauteur d'un écran de téléphone). Aucun autre repositionnement à écrire : #sidebar-toggle et #spy-banner/#groupe-banner suivent déjà `sidebar-collapsed` (app.css:169,179-180). ⚠️ Tentative abandonnée (14/08/2026) : remplacer le repli desktop (`width:0`) par un `transform:translateX(-100%)` pour corriger un fragment coloré figé à l'écran après repli (cf. historique git) a cassé l'accès au bouton #sidebar-toggle en repli — la sidebar garde alors sa largeur réelle (220px) même hors-écran, et son bord droit (position:fixed, z-index:300) finit exactement sur la zone cliquable du toggle (position:fixed, z-index:150, centré sur left:0), qui perd la main dessus. Revenu au mécanisme d'origine (`width:0`). Retour QA #2 (captures d'écran téléphone, 14/08/2026) : même repliée (width:0), des bordures colorées d'items de menu restaient visibles en fines lamelles sur le bord gauche, sur plusieurs écrans différents — donc bien issues de la sidebar elle-même (position:fixed), pas du contenu de page. `overflow:hidden` (app.css:143) ne suffit visiblement pas à clipper `#nav`/`.brand`/`footer` à 0 sur ce navigateur. Fix robuste : `visibility:hidden` explicite sur ces 3 enfants quand replié (PAS sur `#sidebar` lui-même, qui contient aussi #sidebar-toggle — position:fixed, doit rester cliquable ; `visibility:hidden` ne se propage pas automatiquement, chaque enfant doit être visé). */ @media (max-width: 768px) { #sidebar { position: fixed; z-index: 300; /* au-dessus des bannières espion/groupe (200) et du toggle (150) */ height: 100vh; height: 100dvh; /* hauteur réellement visible (barre d'adresse mobile) — repli silencieux en 100vh si non supporté */ overflow-y: auto; /* la nav dépasse la hauteur d'un écran mobile */ } body.sidebar-collapsed #sidebar > .brand, body.sidebar-collapsed #sidebar > #nav, body.sidebar-collapsed #sidebar > footer { visibility: hidden; } } /* ── SS3 — Tableaux → scroll horizontal (option A de la spec) ───────────── `.tc` est le conteneur carte direct autour de (pas de wrapper intermédiaire, cf. usage dans app.js). `min-width` force un vrai débordement horizontal plutôt qu'un écrasement illisible des colonnes. */ @media (max-width: 768px) { .tc { overflow-x: auto; -webkit-overflow-scrolling: touch; } .tc table { min-width: 640px; } } /* ── SS4 — Boutons tactiles (44px min, recommandation Apple/Google) ─────── Padding réduit à 10px (vs 12px de l'exemple spec) pour limiter le risque de débordement des barres à plusieurs boutons (ex. footer de modale). */ @media (max-width: 768px) { .btn, button, a.button { min-height: 44px; padding: 10px 16px; } } /* ── SS5 — Modales plein écran mobile ────────────────────────────────────── Les 3 variantes de taille (.lg/.xl/.full, cf. app.css:679-681) sont neutralisées ensemble — sinon elles garderaient leur propre max-width. `.modal.sm` (confirmations courtes, max-width 380px) est volontairement EXCLUE : un dialogue de confirmation à 2 boutons n'a pas besoin de plein écran, la taille compacte existante reste plus lisible sur mobile. */ @media (max-width: 768px) { .modal, .modal.lg, .modal.xl, .modal.full { width: 100%; height: 100%; max-width: none; max-height: none; border-radius: 0; } } /* ── SS6 — Login + Accueil + Dashboard ───────────────────────────────────── Retour QA : après SS1-SS5, l'Accueil restait "très zoomé" sur iPhone 12 Pro (390px). Cause identifiée : #view a un padding de 18px 24px (app.css:361) qui mange déjà ~48px sur ~390px, et .esp-grid (grille de cartes espace de l'Accueil, app.css:3252-3257) a un minimum de colonne à 330px (auto-fill/minmax pensé pour desktop/tablette) — sur les ~340px restants après le padding #view, ça ne laisse quasiment aucune marge : une seule carte occupe la quasi-totalité de l'écran avec ses paddings internes généreux (14-16px) et ses tailles de police desktop (titre 26px, chiffres KPI 24px) → sensation de zoom/écran surchargé. Le Dashboard n'a pas ce problème : sa grille principale `.grid.c4` (app.css:454) a déjà une media query de collapse à 640px (app.css:456). Login déjà fluide (.login-card, confirmé Phase 1) — aucun changement nécessaire. NOTE pour les sous-sprints suivants : plusieurs autres grilles de l'app suivent le même schéma auto-fill/minmax SANS media query de repli propre (ex. .dep-grid 150px, .cg-counters 180px, .tbc-duo 340px, ligne 401/2185/ 3564 de app.css) — probablement à traiter au cas par cas dans les sous-sprints qui touchent ces écrans (hors périmètre SS6). */ @media (max-width: 768px) { /* #view : resserré pour maximiser la largeur utile sur petit écran — s'applique à tout l'app (bénéfice transverse), pas seulement Accueil. */ #view { padding: 12px 14px; } /* Accueil : 1 colonne pleine largeur plutôt que de s'appuyer sur le seuil 330px de la cascade desktop (app.css .esp-grid, ROADMAP « ACCUEIL » 11/08/2026), qui laisse trop peu de marge sur ~340px disponibles. */ .esp-grid { columns: 1; column-gap: 12px; } .esp-card { margin-bottom: 12px; } /* Raccourcis perso (ROADMAP « ACCUEIL » 11/08/2026, app.css .acc-shortcuts) : 4 colonnes desktop → 2x2 sur ~340px disponibles. */ .acc-shortcuts { grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 12px; } .acc-sc-tile, .acc-sc-add { padding: 10px 10px; } /* Pas de survol tactile : actions (↺✎✕) toujours visibles sur mobile. */ .acc-sc-actions { opacity: 1; } .acc-hero { padding: 16px; margin-bottom: 12px; } .acc-hero h1 { font-size: 21px; } .esp-head { padding: 12px 14px 8px; } .esp-kpis { padding: 2px 14px 8px; } .esp-list { padding: 0 14px 8px; } .esp-kpi b { font-size: 20px; } } /* ── Correctif transverse — Topbar déborde à droite ──────────────────────── Retour QA (après SS6) : sur iPhone 12 Pro, il fallait glisser vers la droite pour voir les boutons du bandeau du haut en entier. Cause : `#topbar` (app.css:349-357) est un flex row `justify-content:space-between` SANS `flex-wrap` — `.topbar-left` (retour + titre) et `.topbar-right` (notif + thème + actions de page, ce dernier gonflé par SS4 à 44px min) ne peuvent jamais passer à la ligne l'un sous l'autre, donc leur largeur cumulée déborde du viewport dès qu'il y a plus de 2-3 boutons d'action. Ce correctif est TRANSVERSE (impacte tous les écrans, pas seulement Accueil) — il aurait dû faire partie de SS2 (socle nav), rattrapé ici. */ @media (max-width: 768px) { #topbar { flex-wrap: wrap; row-gap: 8px; padding: 10px 14px; } .topbar-right { flex-wrap: wrap; justify-content: flex-end; } } /* ── SS7 — Devis (liste + détail) ────────────────────────────────────────── Écran le plus riche de l'app (priorité 🔴). Structure vérifiée : - Liste (`devisListView`, app.js:2353) : table dans `.tc` → scroll horizontal déjà couvert par SS3 (`.tc table { min-width:640px }`), rien à ajouter. - Détail (`showDevisDetail`) : wizard 3 étapes (`.wiz-steps`, app.css:804-831) + 5 mini-stats (`.dv-mini`, app.css:993-997) + étape Lignes (`.dv-lignes`, app.css:853-866, DÉJÀ `overflow-x:auto` en base — scroll horizontal natif, rien à ajouter non plus). Deux vrais problèmes trouvés : 1. `.wiz-steps button` est un `