fix(pwa): keep the top of the installed app clear of iOS 26's edge blur

CHANGELOG.md

@@ -15,6 +15,7 @@ Thierry a demandé de vérifier chaque correction à l'écran, sur téléphone e
 - **Les lignes vides réapparaissent.** Une ligne vide ne prenait aucune hauteur à l'écran : `Get-Help` collait ses sections NAME, SYNOPSIS et REMARKS les unes aux autres, et les tableaux de PowerShell perdaient leur respiration. Les sorties ont retrouvé l'espacement du vrai shell.
 - **Le bouton du tuteur IA ne cache plus de touches.** Sur téléphone et tablette, le bouton rond du tuteur couvrait les dernières touches de la barre de raccourcis (`|`, `>`, `$`…). La barre s'arrête maintenant avant le bouton, qui se range à son extrémité comme une touche de plus.
 - **Plus de zoom surprise sur iPad.** Safari agrandit la page quand on touche un champ de texte écrit en moins de 16 px. Sur un écran tactile, la ligne de commande garde donc 16 px.
+- **Le haut de l'app n'est plus flouté sur iPhone.** Signalé par Thierry sur son iPhone 14 : installée sur l'écran d'accueil, l'app voyait son bandeau du haut (menu, GitHub, connexion) glisser dans un flou sous l'heure. Depuis iOS 26, le système dessine ce flou lui-même en haut des apps installées. Il s'efface quand une bande opaque couvre le haut de l'écran : l'app en pose une, de la couleur du fond, sous la barre d'état.
 
 ---
 

STORY.md

@@ -27,6 +27,8 @@ Tous les tests étaient verts quand Thierry m'a demandé de vérifier moi-même,
 
 Le même regard a trouvé deux autres défauts plus anciens. Les lignes vides disparaissaient, parce qu'un bloc vide ne prend aucune hauteur dans une page web. Et sur téléphone, le bouton rond du tuteur IA recouvrait les touches de raccourci que nous avions ajoutées pour ceux qui n'ont pas de clavier physique. J'ai d'abord remonté le bouton au-dessus de la barre ; il cachait alors la fin de la ligne de commande. La bonne réponse était ailleurs : laisser le bouton en place et arrêter la barre avant lui.
 
+Thierry a ensuite testé sur son iPhone 14 : les tableaux et le bouton du tuteur tenaient, mais le haut de l'app glissait dans un flou sous l'heure. Ce flou n'était pas dans notre code. Depuis iOS 26, le système le dessine lui-même au-dessus des apps installées sur l'écran d'accueil. La parade consiste à poser une bande opaque sous la barre d'état ; seul un nouvel essai sur son iPhone dira si elle suffit.
+
 Un point reste ouvert, et je le dis. Quand le clavier de l'iPhone est ouvert, Safari déplace l'écran d'une manière qu'aucune simulation ne reproduit fidèlement. Il faudra une capture sur un vrai iPhone pour confirmer que le bouton et la barre restent alignés.
 
 ---

src/app/App.tsx

@@ -11,6 +11,7 @@ import { ProgressProvider } from './context/ProgressContext';
 import { EnvironmentProvider } from './context/EnvironmentContext';
 import { PageLoader } from './components/PageLoader';
 import { Button } from './components/ui/button';
+import { StatusBarBackdrop } from './components/StatusBarBackdrop';
 
 function FallbackUI() {
   return (
@@ -38,6 +39,7 @@ export default function App() {
       <AuthProvider>
         <EnvironmentProvider>
           <ProgressProvider>
+            <StatusBarBackdrop />
             <Suspense fallback={<PageLoader />}>
               <RouterProvider router={router} />
             </Suspense>

src/app/components/StatusBarBackdrop.tsx

@@ -0,0 +1,23 @@
+/**
+ * Opaque strip behind the iOS status bar.
+ *
+ * Installed on the home screen (`black-translucent` + `viewport-fit=cover`),
+ * iOS 26 lays its Liquid Glass edge blur over the top of the app, about 40pt
+ * past the status bar: the top bar and the landing nav (GitHub, login) sat
+ * inside that blur and looked like they slid under the clock (reported by
+ * @thierry on an iPhone 14, 29 September 2026). iOS leaves the edge alone
+ * when a fixed box with a background covers the top edge, and shows that
+ * box's color instead. This strip is that box, in the app's background color.
+ *
+ * Its height is env(safe-area-inset-top): 0 in a Safari tab and on desktop,
+ * so it only exists where the status bar overlaps the page.
+ */
+export function StatusBarBackdrop() {
+  return (
+    <div
+      aria-hidden="true"
+      data-testid="status-bar-backdrop"
+      className="pointer-events-none fixed inset-x-0 top-0 z-[45] h-[env(safe-area-inset-top)] bg-[var(--github-bg)]"
+    />
+  );
+}

src/test/statusBarBackdrop.test.tsx

@@ -0,0 +1,15 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { StatusBarBackdrop } from '../app/components/StatusBarBackdrop';
+
+describe('StatusBarBackdrop (iOS 26 edge blur)', () => {
+  it('is a fixed, opaque, decorative strip as tall as the status bar', () => {
+    render(<StatusBarBackdrop />);
+    const strip = screen.getByTestId('status-bar-backdrop');
+    expect(strip).toHaveAttribute('aria-hidden', 'true');
+    // iOS keeps its blur off the top edge only under a fixed box with a background.
+    expect(strip).toHaveClass('fixed', 'top-0', 'inset-x-0', 'bg-[var(--github-bg)]');
+    // No height outside an installed app: env() is 0 in a Safari tab and on desktop.
+    expect(strip).toHaveClass('h-[env(safe-area-inset-top)]', 'pointer-events-none');
+  });
+});