spb/ka-ui

1# Rapport de validation — Correction front-end mobile des 13 plateformes Groupe KA23**Date : 2026-08-19.** Campagne complète : diagnostic → correction à la racine4dans le design system **ka-ui** → propagation aux 13 sites → re-validation.5Inventaire initial : `INVENTAIRE.md`. Journal des passes : `audit-run.log`6(avant), `audit-run2.log` / `audit-run3.log` (intermédiaires),7`audit-final.log` (final). Captures : `audit/*.png` (Playwright Pixel 7 +8iPhone 13), `audit/simulator/*.png` (Safari réel, simulateur iPhone 17 Pro,9iOS 26.5), `regression/*.png` (matrice de largeurs).1011## Résultat final1213**26 / 26 passes d'audit PROPRES** (13 sites × Android chromium + iOS WebKit,14accueil + 2 pages internes chacun) : zéro débordement horizontal réel, zéro15champ < 16 px, zéro barre basse instable ou masquante, zéro menu sans verrou16de scroll, zéro `position:fixed` cassé par un ancêtre, meta viewport conforme17partout, cibles tactiles ≥ 44 px effectifs (extensions `::after` comprises).18Les 13 sites répondent 200 (www) après rebuild + restart.1920## Corrections à la racine (ka-ui, commits `f825ea3` → `e6df8e5`)2122| Correctif | Fichier | Propagation |23|---|---|---|24| Socle mobile obligatoire : échelle z-index `--z-*`, `--vh100`/dvh, `.ka-bottombar`+`has-bottombar`, `html.ka-scroll-lock`, `.ka-menu`, `.ka-overlay` | tokens.css | resync + rebuild 13 apps |25| Filet anti-zoom iOS : champs `≥16px !important` sous `(hover:none) and (pointer:coarse)` | tokens.css | 13 apps |26| Zone tactile `.gk-badge` étendue (`::after inset:-8px`) | tokens.css | 13 apps |27| `overflow-x: clip` sur `html` ET `body` (quirk WebKit : clip sur body seul laisse défiler le viewport — bug réel constaté sur groupe-ka iOS, +223 px) | tokens.css | 13 apps |28| Widget KA Agent : safe-area bulle/panneau, textarea 16 px, plein écran mobile + verrou de scroll (fusionné dans la **v2** de la session parallèle, sur-ensemble vérifié — canonique aligné) | agent/ka-agent.js | 13 sites |29| Règles mobiles obligatoires documentées (11 règles) | README.md | — |3031## Avant → après, site par site (chaque commit poussé sur le nœud de l'app)3233| Site | Bugs initiaux (priorité) | Correctifs | Commit | Final |34|---|---|---|---|---|35| groupe-ka | **P0** overlay menu piégé dans le header `backdrop-blur` (inutilisable 768-1280 px) ; menu sans verrou ; débordement iOS +141→223 px (ticker) ; tokens.css jamais importé ; pas de viewport-fit ; stat-chips 33 px | overlay sorti du header (`body:has(#gk-menu:checked)`), verrou `html:has(…){overflow:hidden}`, import tokens `layer(base)` + grain dédupliqué, `viewportFit:"cover"`, chips étendues, clip html+body | `ea1292c` + tokens | ✅ 0 |36| trouve-ka | **P0** aucune navigation mobile (liens `hidden md:` sans hamburger) ; viewport-fit absent ; `min-h-screen` (100vh) ; ka/ hors Tailwind content | `components/mobile-nav.tsx` (hamburger 44 px, verrou, Escape, safe-area), `viewportFit:"cover"`, `min-h-dvh`, content Tailwind | `37a4bf7` + tokens | ✅ 0 |37| lou-ka | backdrop du menu compte confiné au header blurré ; sheet filtres sans verrou ; 6 champs < 16 px ; brand 30 px | backdrop portalisé vers body, verrou sheet, champs 16 px, `::after` brand | `2f7a2cd` + tokens | ✅ 0 |38| immo-ka | sheet filtres sans verrou ; `ka-signup` 17 px de haut ; brand 27 px ; styles.css orphelin (46 Ko) | verrou + Escape, extensions `::after` (ka-signup portée à 45 px eff.), orphelin supprimé, z-index `--z-*` (le « menu sans verrou » de l'audit v1 = faux positif, bouton ka-login) | `b543611` + suite | ✅ 0 |39| vrai-prix | bandeau cookies sans safe-area (et inerte : pas de viewport-fit) ; modale prefs sans verrou ; vp-display 28 px | `viewportFit:"cover"`, `pb-[calc(…+env(safe-area-inset-bottom))]`, verrou modale + Escape, `::after` | `52e6cbc` + tokens | ✅ 0 |40| auto-ka | aucun scroll-lock dans l'app ; pas de nav mobile (bande scroll-x compressée) ; selects < 16 px ; brand 32 px | hamburger standard KA (backdrop hors header blurré), verrou menu compte + Escape + `aria-haspopup`, anti-zoom, `::after` | `841eef4` + tokens | ✅ 0 |41| fabri-ka | `100vh` sur colonne filtres ; search < 16 px ; logo 29 px ; grain divergent (z-0 local vs 9999 tokens) | doublet dvh, anti-zoom coarse, `::after`, grain réconcilié (compensation tab bar déjà conforme via padding du footer — l'audit a été affiné pour la reconnaître) | `c6f995a` + tokens | ✅ 0 |42| food-ka | collision z-index 80/80 fab↔bandeau cookies ; lightbox + sheet sans verrou ; champs < 16 px ; brand 27 px | `--consent-h` (ResizeObserver → fab décalé au-dessus du bandeau), bandeau `--z-toast`/fab `--z-bottombar`, 2 verrous + Escape, anti-zoom, `::after` | `201d196` + tokens | ✅ 0 |43| api-ka | selects/inputs du playground et dates stats < 16 px | 16 px ≤767 px (index/stats ; contact sans champ) | `25c5f75` + tokens | ✅ 0 |44| crea-ka | champs < 16 px au-delà de 760 px ; brand 26-30 px ; joignabilité mobile à vérifier | 16 px jusqu'au breakpoint tabbar (940 px), joignabilité confirmée (tabbar+footer), `::after` brand (repêché en fin de campagne : la 1re passe n'avait pas atteint le template) | `9ae8959` + fix brand | ✅ 0 |45| resto-ka | backdrop compte confiné au header blurré ET menu compte (z 55/60) SOUS la tabbar (85)/fab (80) ; sheet sans verrou ; brand 30 px | menu + backdrop portalisés (`--z-modal`/`--z-overlay`, ancrage `--header-h`), verrou sheet, `::after` | `65e369c` + tokens | ✅ 0 |46| sorti-ka | champs < 16 px ; viewport-fit absent ; header sticky `backdrop-filter` sans garde ; brand 26 px | 16 px mobile, `viewport-fit=cover`, blur réservé ≥768 px (fond opaque mobile), `::after` | `a88b4a0` + tokens | ✅ 0 |47| job-ka | carte `calc(100vh - 58px)` (bouge au repli de la barre navigateur, faux si header 2 lignes) ; pas de menu mobile (6 liens en wrap) ; 8 champs < 16 px ; viewport-fit absent ; logo 31 px | `--header-h` mesuré (ResizeObserver) + dvh, hamburger standard KA, 16 px, `viewport-fit=cover`, `::after` | `da4b6be` + tokens | ✅ 0 |4849## Scénarios des deux bugs signalés — validés5051- **Menus déroulants** : ouverture/fermeture AU TAP vérifiée sur chaque site52  (le vrai bouton menu est tapé par l'audit, l'ouverture est confirmée par53  aria-expanded/classe/dialog, le verrou d'arrière-plan est exigé) ; aucun54  menu ne dépend de `:hover` (vérifié par scan CSS sur les 13 sites) ;55  sélecteurs de filtres = `<select>` natifs partout ; menus au-dessus des56  barres et cartes (échelle `--z-*`).57- **Éléments du bas** : stabilité mesurée PENDANT le défilement (4 scrolls,58  dérive ≤ 2 px exigée, disparition interdite) sur chaque page auditée ;59  `100vh` éradiqué des éléments calés viewport (dvh + repli) ; safe-areas60  actives partout (`viewport-fit=cover` posé sur les 5 sites où il manquait) ;61  compensation d'espace vérifiée (body/wrapper/footer).62- **Rotation / paysage** : matrice de régression 360/390/414/768 px en63  portrait ET paysage (799×390, 1574×768) — voir `regression/last-run.json`.64- **Clavier** : champs ≥ 16 px partout (plus de zoom parasite iOS) ; le widget65  KA Agent v2 se cale sur `visualViewport` (clavier iOS géré).6667## Outillage de régression pérenne (anti-retour)6869- `node mobile-audit.mjs [site…]` — audit profond (2 moteurs, 3 pages/site).70- `node regression-mobile.mjs [site…]` — matrice rapide, exit ≠ 0 si échec71  (branchable en cron/CI) : captures à chaque largeur + débordement réel +72  champs < 16 px + stabilité barre basse.73- Les 11 règles mobiles obligatoires sont documentées dans `README.md` pour74  tout futur composant.7576## Limites et recommandation7778La validation « appareils » a été faite sur Playwright WebKit (iPhone 13) +79chromium (Pixel 7) et sur le **simulateur iPhone 17 Pro (Safari, iOS 26.5)**80— captures dans `audit/simulator/`. Un passage manuel rapide sur un iPhone et81un Android **physiques** (2 min chacun : ouvrir un menu, défiler une fiche,82ouvrir le clavier dans la recherche) reste recommandé pour la certification83finale, les comportements de barre d'adresse en mouvement n'étant pleinement84observables que sur matériel réel.85