# Rapport de validation — Correction front-end mobile des 13 plateformes Groupe KA

Date : 2026-08-19. Campagne complète : diagnostic → correction à la racine dans le design system ka-ui → propagation aux 13 sites → re-validation. Inventaire initial : INVENTAIRE.md. Journal des passes : audit-run.log (avant), audit-run2.log / audit-run3.log (intermédiaires), audit-final.log (final). Captures : audit/*.png (Playwright Pixel 7 + iPhone 13), audit/simulator/*.png (Safari réel, simulateur iPhone 17 Pro, iOS 26.5), regression/*.png (matrice de largeurs).

# Résultat final

26 / 26 passes d'audit PROPRES (13 sites × Android chromium + iOS WebKit, accueil + 2 pages internes chacun) : zéro débordement horizontal réel, zéro champ < 16 px, zéro barre basse instable ou masquante, zéro menu sans verrou de scroll, zéro position:fixed cassé par un ancêtre, meta viewport conforme partout, cibles tactiles ≥ 44 px effectifs (extensions ::after comprises). Les 13 sites répondent 200 (www) après rebuild + restart.

# Corrections à la racine (ka-ui, commits `f825ea3` → `e6df8e5`)

Correctif	Fichier	Propagation
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
Filet anti-zoom iOS : champs `≥16px !important` sous `(hover:none) and (pointer:coarse)`	tokens.css	13 apps
Zone tactile `.gk-badge` étendue (`::after inset:-8px`)	tokens.css	13 apps
`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
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
Règles mobiles obligatoires documentées (11 règles)	README.md	—

# Avant → après, site par site (chaque commit poussé sur le nœud de l'app)

Site	Bugs initiaux (priorité)	Correctifs	Commit	Final
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
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
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
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
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
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
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
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
api-ka	selects/inputs du playground et dates stats < 16 px	16 px ≤767 px (index/stats ; contact sans champ)	`25c5f75` + tokens	✅ 0
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
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
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
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

# Scénarios des deux bugs signalés — validés

Menus déroulants : ouverture/fermeture AU TAP vérifiée sur chaque site (le vrai bouton menu est tapé par l'audit, l'ouverture est confirmée par aria-expanded/classe/dialog, le verrou d'arrière-plan est exigé) ; aucun menu ne dépend de :hover (vérifié par scan CSS sur les 13 sites) ; sélecteurs de filtres = <select> natifs partout ; menus au-dessus des barres et cartes (échelle --z-*).
Éléments du bas : stabilité mesurée PENDANT le défilement (4 scrolls, dérive ≤ 2 px exigée, disparition interdite) sur chaque page auditée ; 100vh éradiqué des éléments calés viewport (dvh + repli) ; safe-areas actives partout (viewport-fit=cover posé sur les 5 sites où il manquait) ; compensation d'espace vérifiée (body/wrapper/footer).
Rotation / paysage : matrice de régression 360/390/414/768 px en portrait ET paysage (799×390, 1574×768) — voir regression/last-run.json.
Clavier : champs ≥ 16 px partout (plus de zoom parasite iOS) ; le widget KA Agent v2 se cale sur visualViewport (clavier iOS géré).

# Outillage de régression pérenne (anti-retour)

node mobile-audit.mjs [site…] — audit profond (2 moteurs, 3 pages/site).
node regression-mobile.mjs [site…] — matrice rapide, exit ≠ 0 si échec (branchable en cron/CI) : captures à chaque largeur + débordement réel + champs < 16 px + stabilité barre basse.
Les 11 règles mobiles obligatoires sont documentées dans README.md pour tout futur composant.

# Limites et recommandation

La validation « appareils » a été faite sur Playwright WebKit (iPhone 13) + chromium (Pixel 7) et sur le simulateur iPhone 17 Pro (Safari, iOS 26.5) — captures dans audit/simulator/. Un passage manuel rapide sur un iPhone et un Android physiques (2 min chacun : ouvrir un menu, défiler une fiche, ouvrir le clavier dans la recherche) reste recommandé pour la certification finale, les comportements de barre d'adresse en mouvement n'étant pleinement observables que sur matériel réel.