Correctifs front-end mobile : viewport-fit=cover, champs 16 px, blur header desktop seulement, socle mobile ka-ui

- index.html : meta viewport avec viewport-fit=cover (safe-area iOS)
- .header : backdrop-filter limite a >=768px, fond quasi opaque rgba(245,243,238,.95) sur mobile (evite les descendants fixed pieges par le blur WebKit + perfs de scroll)
- champs input#q / select#region / select#period a 16 px sous 760px (evite le zoom auto iOS au focus)
- a.brand : extension tactile ::after inset -8px (cible >=44px), nav deja >=44px
- frontend/src/ka/tokens.css : section SOCLE MOBILE OBLIGATOIRE (z-index unifies, --vh100 dvh, verrous de scroll, filet anti-zoom 16 px, extension tactile gk-badge)
- frontend/ka-agent.js : agent corrige (safe-area, textarea 16 px, plein ecran <=640px + verrou scroll)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Simon-Pierre Boucher committed 1 mo ago (Aug 19, 2026) parent e312e16

3 changed files +129 −11

modified frontend/index.html +17 −4

		`@@ -15,7 +15,7 @@`
15	15	<html lang="fr">
16	16	<head>
17	17	<meta charset="utf-8">
18		−<meta name="viewport" content="width=device-width, initial-scale=1">
	18	+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
19	19	<title>Sorti-Ka — Un service Groupe KA</title>
20	20	<meta name="description" content="Agrégateur indépendant de sorties et d'événements — concerts, festivals, spectacles, expositions, famille — dans les 17 régions du Québec, avec dates, lieux et gratuité.">
21	21	<link rel="icon" type="image/svg+xml" href="/favicon.svg">
		`@@ -67,8 +67,14 @@ button{font-family:inherit}`
67	67	.ticker span::after{content:"◆";position:absolute;right:-6px;color:var(--lime);font-size:8px;top:3px}
68	68	@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
69	69	@media(prefers-reduced-motion:reduce){.ticker-track{animation:none}*{transition-duration:.01ms!important}}
70		−.header{position:sticky;top:0;z-index:50;background:rgba(245,243,238,.9);
71		− backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1.5px solid var(--ink)}
	70	+.header{position:sticky;top:0;z-index:50;background:rgba(245,243,238,.95);
	71	+ border-bottom:1.5px solid var(--ink)}
	72	+/* blur réservé au desktop : backdrop-filter piège les descendants en position:fixed (WebKit)
	73	+ et coûte cher au scroll mobile — en dessous de 768px, fond quasi opaque sans blur */
	74	+@media(min-width:768px){
	75	+ .header{background:rgba(245,243,238,.9);
	76	+ backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
	77	+}
72	78	.header-inner{display:flex;align-items:center;flex-wrap:wrap;gap:6px 18px;height:auto;min-height:64px;padding:6px 0}
73	79	.header-inner .gk-badge{flex:none}
74	80	@media(max-width:760px){
		`@@ -77,7 +83,9 @@ button{font-family:inherit}`
77	83	.nav{margin-left:0;flex-wrap:wrap}
78	84	}
79	85	.brand{font-family:var(--font-display);font-weight:700;font-size:24px;letter-spacing:-.03em;
80		− display:flex;align-items:baseline;line-height:1;cursor:pointer}
	86	+ display:flex;align-items:baseline;line-height:1;cursor:pointer;position:relative}
	87	+/* extension tactile : le logo (98×26) atteint >=44px de cible sans changer le rendu */
	88	+.brand::after{content:"";position:absolute;inset:-8px}
81	89	.brand .ka{background:var(--accent);color:var(--on-accent);border-radius:6px;padding:0 6px 2px;margin-left:2px;transform:rotate(-1deg)}
82	90	.brand-tag{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;
83	91	letter-spacing:.08em;color:var(--ink-3);margin-left:8px}
		`@@ -139,6 +147,11 @@ button{font-family:inherit}`
139	147	.f-ctl:focus-within{box-shadow:3px 3px 0 var(--lime)}
140	148	.f-ctl select{border:none;background:none;outline:none;font-family:var(--font-display);
141	149	font-size:13.5px;font-weight:700;color:var(--ink);padding:0;margin-left:-2px;max-width:220px}
	150	+/* champs >=16px sur mobile : évite le zoom automatique d'iOS au focus */
	151	+@media(max-width:760px){
	152	+ .f-search input{font-size:16px}
	153	+ .f-ctl select{font-size:16px}
	154	+}
142	155	.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
143	156	.chip{border:1.5px solid var(--ink);background:var(--surface);border-radius:var(--r-ctl);
144	157	padding:6px 12px;font-family:var(--font-display);font-size:12.5px;font-weight:700;

modified frontend/ka-agent.js +25 −7

		`@@ -17,18 +17,19 @@`
17	17
18	18	/* ---------- styles ---------- */
19	19	var css = `
20		− .kaa-btn{position:fixed;right:18px;bottom:18px;z-index:2147483000;width:58px;height:58px;
	20	+ .kaa-btn{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:2147483000;width:58px;height:58px;
21	21	border-radius:50%;border:2px solid var(--ink,#141814);background:var(--accent,#d9f26b);
22	22	color:var(--on-accent,#141814);font:700 17px/1 "Space Grotesk",system-ui,sans-serif;
23	23	cursor:pointer;box-shadow:4px 4px 0 rgba(20,24,20,.85);display:flex;align-items:center;
24		− justify-content:center;transition:transform .15s;padding-bottom:env(safe-area-inset-bottom,0)}
	24	+ justify-content:center;transition:transform .15s}
25	25	.kaa-btn:hover{transform:translate(-2px,-2px)}
26		− .kaa-panel{position:fixed;right:16px;bottom:86px;z-index:2147483001;width:min(392px,calc(100vw - 24px));
27		− height:min(580px,calc(100dvh - 110px));display:none;flex-direction:column;background:var(--paper,#f5f3ee);
	26	+ .kaa-panel{position:fixed;right:16px;bottom:calc(86px + env(safe-area-inset-bottom,0px));z-index:2147483001;width:min(392px,calc(100vw - 24px));
	27	+ height:min(580px,calc(100vh - 110px));height:min(580px,calc(100dvh - 110px));display:none;flex-direction:column;background:var(--paper,#f5f3ee);
28	28	border:2px solid var(--ink,#141814);border-radius:14px;box-shadow:8px 8px 0 rgba(20,24,20,.85);
29	29	overflow:hidden;font-family:Inter,system-ui,sans-serif}
30	30	.kaa-panel.kaa-open{display:flex}
31		− .kaa-panel.kaa-full{right:0;bottom:0;width:100vw;height:100dvh;border-radius:0;border:0;box-shadow:none}
	31	+ .kaa-panel.kaa-full{right:0;bottom:0;width:100vw;height:100vh;height:100dvh;border-radius:0;border:0;box-shadow:none}
	32	+ html.kaa-lock,html.kaa-lock body{overflow:hidden!important;overscroll-behavior:none}
32	33	.kaa-head{display:flex;align-items:center;gap:9px;padding:11px 14px;background:var(--ink,#141814);
33	34	color:var(--paper,#f5f3ee);flex:none}
34	35	.kaa-head b{font:700 15px "Space Grotesk",system-ui,sans-serif;letter-spacing:-.02em}
		`@@ -53,7 +54,7 @@`
53	54	border-radius:999px;background:var(--surface-2,#faf9f5)}
54	55	.kaa-in{display:flex;gap:8px;padding:11px;border-top:2px solid var(--ink,#141814);background:#fff;flex:none;
55	56	padding-bottom:calc(11px + env(safe-area-inset-bottom,0))}
56		− .kaa-in textarea{flex:1;resize:none;min-height:44px;max-height:110px;padding:11px 12px;font:13.5px/1.4 Inter,system-ui,sans-serif;
	57	+ .kaa-in textarea{flex:1;resize:none;min-height:44px;max-height:110px;padding:10px 12px;font:16px/1.4 Inter,system-ui,sans-serif;
57	58	border:1.5px solid var(--ink,#141814);border-radius:9px;background:var(--paper,#f5f3ee);outline:none}
58	59	.kaa-in button{min-width:52px;min-height:44px;border:1.5px solid var(--ink,#141814);border-radius:9px;
59	60	background:var(--ink,#141814);color:var(--accent,#d9f26b);font:700 16px "Space Grotesk",system-ui;cursor:pointer}
		`@@ -142,15 +143,32 @@`
142	143	}
143	144
144	145	/* ---------- ouverture / plein écran ---------- */
	146	+ /* Sur téléphone : panneau plein écran d'office + scroll d'arrière-plan
	147	+ verrouillé tant qu'il est ouvert (html.kaa-lock). Pas de focus clavier
	148	+ forcé au tap (le clavier ne s'ouvre que si l'utilisateur touche le champ). */
	149	+ var mobileMq = window.matchMedia("(max-width: 640px)");
	150	+ var fineInput = window.matchMedia("(hover: hover) and (pointer: fine)");
	151	+ function syncLock() {
	152	+ var open = panel.classList.contains("kaa-open");
	153	+ if (open && mobileMq.matches) panel.classList.add("kaa-full");
	154	+ document.documentElement.classList.toggle(
	155	+ "kaa-lock", open && panel.classList.contains("kaa-full"));
	156	+ }
145	157	btn.addEventListener("click", function () {
146	158	panel.classList.toggle("kaa-open");
147		− if (panel.classList.contains("kaa-open")) { render(); ta.focus(); }
	159	+ if (panel.classList.contains("kaa-open")) {
	160	+ render();
	161	+ if (fineInput.matches) ta.focus();
	162	+ }
	163	+ syncLock();
148	164	});
149	165	panel.querySelector(".kaa-x2").addEventListener("click", function () {
150	166	panel.classList.remove("kaa-open", "kaa-full");
	167	+ syncLock();
151	168	});
152	169	panel.querySelector(".kaa-x1").addEventListener("click", function () {
153	170	panel.classList.toggle("kaa-full");
	171	+ syncLock();
154	172	scroll();
155	173	});
156	174

modified frontend/src/ka/tokens.css +87 −0

		`@@ -69,7 +69,24 @@`
69	69
70	70	/* Cible tactile minimale */
71	71	--touch: 44px;
	72	+
	73	+ /* ---- Échelle z-index COMMUNE (obligatoire — aucune valeur arbitraire) ----
	74	+ grain de film body::before = 9999 (pointer-events:none, toujours au-dessus,
	75	+ purement visuel). Tout composant interactif se place sous 9999 : */
	76	+ --z-content: 1; /* contenu positionné ordinaire */
	77	+ --z-sticky: 300; /* éléments sticky de contenu (sous-nav…) */
	78	+ --z-header: 500; /* header du site */
	79	+ --z-bottombar: 600; /* tab bar / barre d'action basse */
	80	+ --z-dropdown: 700; /* menus déroulants (au-dessus des barres) */
	81	+ --z-overlay: 800; /* voile sous modale/panneau */
	82	+ --z-modal: 900; /* modales, panneaux de filtres, galeries */
	83	+ --z-toast: 950; /* notifications */
	84	+
	85	+ /* ---- Hauteur de viewport DYNAMIQUE (barre du navigateur mobile qui se
	86	+ replie au scroll) : toujours var(--vh100), JAMAIS 100vh en dur. ---- */
	87	+ --vh100: 100vh;
72	88	}
	89	+@supports (height: 100dvh) { :root { --vh100: 100dvh; } }
73	90
74	91	/* ---- Socle ---- */
75	92	* { box-sizing: border-box; }
		`@@ -227,3 +244,73 @@ body > * { position: relative; }`
227	244	/* ---- Utilitaires responsive ---- */
228	245	.only-mobile { display: initial; } .only-desktop { display: none; }
229	246	@media (min-width: 768px) { .only-mobile { display: none; } .only-desktop { display: initial; } }
	247	+
	248	+/* =============================================================================
	249	+ SOCLE MOBILE OBLIGATOIRE (2026-08-19) — règles communes aux 13 sites.
	250	+ RÈGLES pour tout composant futur :
	251	+ · TAP, jamais :hover, pour ouvrir un menu (le survol n'existe pas au doigt) ;
	252	+ le :hover ne sert qu'aux effets décoratifs, sous @media (hover: hover).
	253	+ · var(--vh100) (dvh) et JAMAIS 100vh pour tout élément calé sur le viewport.
	254	+ · position:fixed exige qu'AUCUN ancêtre n'ait transform/filter/perspective/
	255	+ will-change/backdrop-filter — sinon monter l'élément à la racine (body).
	256	+ · Barre basse fixe = .ka-bottombar + classe has-bottombar sur <body>.
	257	+ · Menu/panneau ouvert = .ka-scroll-lock sur <html> (scroll arrière-plan gelé).
	258	+ · z-index : uniquement l'échelle --z-* ci-dessus.
	259	+ · Zones tactiles ≥ var(--touch) (44 px), champs ≥ 16 px (zoom iOS).
	260	+ ========================================================================== */
	261	+
	262	+/* Anti-zoom iOS : au doigt, aucun champ sous 16 px (le focus d'un champ <16 px
	263	+ déclenche un zoom automatique de page sur Safari iOS). !important assumé :
	264	+ c'est un filet d'accessibilité, un champ plus petit casse le zoom quoi
	265	+ qu'il arrive — ne s'applique qu'aux écrans tactiles. */
	266	+@media (hover: none) and (pointer: coarse) {
	267	+ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
	268	+ select, textarea { font-size: max(16px, 1em) !important; }
	269	+}
	270	+
	271	+/* Zone tactile du badge Groupe KA étendue à ≥44 px au doigt, sans changer
	272	+ son rendu (débord de la zone cliquable via pseudo-élément). */
	273	+@media (pointer: coarse) {
	274	+ .gk-badge { position: relative; }
	275	+ .gk-badge::after { content: ""; position: absolute; inset: -8px; }
	276	+}
	277	+
	278	+/* Hauteurs viewport dynamiques */
	279	+.h-viewport { height: 100vh; height: 100dvh; }
	280	+.min-h-viewport { min-height: 100vh; min-height: 100dvh; }
	281	+
	282	+/* Barre fixe basse fiable : safe-area iPhone incluse, immunisée contre les
	283	+ transforms accidentels, et compensation d'espace via body.has-bottombar. */
	284	+.ka-bottombar {
	285	+ position: fixed; left: 0; right: 0; bottom: 0;
	286	+ z-index: var(--z-bottombar);
	287	+ padding-bottom: env(safe-area-inset-bottom, 0px);
	288	+ background: var(--surface);
	289	+ border-top: 1.5px solid var(--ink);
	290	+ transform: none !important; filter: none !important;
	291	+}
	292	+body.has-bottombar { padding-bottom: calc(var(--bottombar-h, 64px) + env(safe-area-inset-bottom, 0px)); }
	293	+
	294	+/* Verrou de scroll d'arrière-plan (menu mobile, modale, panneau de filtres
	295	+ ouverts) : ajouter/retirer .ka-scroll-lock sur <html>. */
	296	+html.ka-scroll-lock, html.ka-scroll-lock body { overflow: hidden !important; overscroll-behavior: none; }
	297	+
	298	+/* Menu déroulant de référence : au-dessus de tout contenu (cartes Mapbox
	299	+ incluses), défilement interne avec élan, jamais plus haut que l'écran. */
	300	+.ka-menu {
	301	+ position: absolute; z-index: var(--z-dropdown);
	302	+ min-width: 180px;
	303	+ max-height: min(60vh, 420px); max-height: min(60dvh, 420px);
	304	+ overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
	305	+ background: var(--surface); border: 1.5px solid var(--ink);
	306	+ border-radius: var(--r-card); box-shadow: var(--shadow-off-mid);
	307	+}
	308	+.ka-menu a, .ka-menu button, .ka-menu label, .ka-menu [role="menuitem"], .ka-menu [role="option"] {
	309	+ display: flex; align-items: center; min-height: var(--touch);
	310	+ padding: 10px 14px; width: 100%; text-decoration: none;
	311	+}
	312	+/* Voile plein écran sous une modale / un panneau */
	313	+.ka-overlay {
	314	+ position: fixed; inset: 0; z-index: var(--z-overlay);
	315	+ background: rgba(20, 24, 20, 0.45);
	316	+}
230	317