Nav v2 correctif : le ✕ de fermeture vit DANS le panneau (fixe, toujours visible)

Le ✕ était le burger du header ; si le header n'est pas épinglé (bas de page),
il défilait hors écran alors que le panneau fixed restait affiché — impossible
de fermer sans Escape. Ajout d'un .mm-close position:fixed en haut à droite du
panneau et burger masqué à l'ouverture (une seule commande de fermeture).

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

Simon-Pierre Boucher committed 1 mo ago (Aug 25, 2026) parent a0bbd57

2 changed files +13 −2

modified frontend/src/App.tsx +3 −0

		`@@ -190,6 +190,9 @@ function Header() {`
190	190	</div>
191	191
192	192	<div className={`mobile-menu ${open ? "open" : ""}`} role="navigation" aria-label="Menu mobile">
	193	+ {/* ✕ fixe du panneau : visible peu importe le scroll, le burger du header est masqué à l'ouverture */}
	194	+ <button type="button" className="mm-close" aria-label="Fermer le menu"
	195	+ onClick={() => setOpen(false)}>✕</button>
193	196	{NAV_LINKS.map((l, i) => (
194	197	<NavLink
195	198	key={l.to}

modified frontend/src/styles.css +10 −2

		`@@ -504,8 +504,16 @@ table.rooms tr:nth-child(even) td { background: var(--surface-2); }`
504	504	}
505	505	.mobile-menu.open { display: block; animation: mm-in 0.16s ease; }
506	506	@keyframes mm-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
507		−/* le rang du header (marque + burger devenu X) reste au-dessus du panneau */
508		−.header:has(.mobile-menu.open) .header-inner { position: relative; z-index: 60; }
	507	+/* burger masque a l'ouverture : la fermeture passe par le X fixe du panneau */
	508	+.header:has(.mobile-menu.open) .menu-btn { visibility: hidden; }
	509	+/* bouton de fermeture du panneau : fixe en haut a droite du viewport */
	510	+.mm-close {
	511	+ position: fixed; top: 10px; right: 14px; z-index: 2;
	512	+ width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
	513	+ border: 1.5px solid var(--ink); border-radius: 999px;
	514	+ background: var(--ink); color: var(--paper);
	515	+ font-size: 17px; font-weight: 700; line-height: 1; cursor: pointer; padding: 0;
	516	+}
509	517	/* verrou du scroll d'arriere-plan quand le menu est ouvert (CSS pur) */
510	518	html:has(.mobile-menu.open) { overflow: hidden; }
511	519	.mm-link { display: flex; align-items: center; gap: 12px; padding: 15px 10px; min-height: 52px; font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -0.02em; border-bottom: 1.5px dashed var(--line); opacity: 0; transform: translateY(-8px); transition: opacity 0.25s ease, transform 0.25s ease; }
512	520