fix(mobile): barre de thèmes masquée, modale @ hors écran, pastille d'avatar

Cinq correctifs signalés sur le mode mobile et le mode desktop.

1. La modale « @ » était confinée dans le header (desktop + mobile)
   <header> portait `backdrop-blur-sm`, et `backdrop-filter` fait de l'élément
   le containing block de ses descendants en position:fixed. Les overlays du
   provider-picker (et du menu Ctrl+K) se résolvaient donc contre le header :
   mesuré 1440x64 au lieu de 1440x900, dialogue réduit à 32px de haut pour 466px
   de contenu, haut de la fenêtre inatteignable.
   Le flou passe sur une couche enfant (`-z-10`) qui n'est pas un ancêtre des
   overlays : `fixed` redevient relatif au viewport.
   Desktop : dialogue 512x468 centré. Mobile : 358x686, entièrement visible.

2. La barre de thèmes disparaissait sous le header (desktop + mobile)
   `--header-offset` vaut 56/64px, mais le header mesure 57/65px (bordure) et
   118px quand la feuille de recherche mobile est ouverte. La barre était donc
   déjà glissée dessous, et totalement invisible dans ce dernier cas
   (hauteur visible mesurée : 0px).
   HeaderComponent publie maintenant sa hauteur réelle dans `--header-measured`
   via ResizeObserver ; `--header-offset` l'utilise quand elle existe et garde
   la valeur statique en repli. Barre visible dans tous les cas, y compris
   feuille de recherche ouverte.

3. Barre de thèmes : icônes seules sur mobile
   Les libellés sont masqués sous md (`aria-label` conservé pour
   l'accessibilité). 7 pastilles visibles au lieu de 3, sans scroll.

4. Avatar en pastille
   `.avatar-circle` est renforcé : `rounded-full` dans le markup plus
   `border-radius: 9999px !important`, `aspect-ratio: 1/1`, min-width/min-height
   et `line-height: 1`, pour qu'aucun style de thème ne puisse le dégrader en
   rectangle.

Vérifié : audit navigateur sur 17 routes x 320/390/768/1440 px — aucun
débordement horizontal, barre de thèmes visible partout ; tests du dépôt verts ;
build production OK.

index.css

@@ -11,8 +11,12 @@
   --safe-bottom: 0px;
   --safe-left: 0px;
   --safe-right: 0px;
-  /* Height actually consumed by the fixed header, safe-area included. */
-  --header-offset: calc(var(--header-h) + var(--safe-top));
+  /* Height actually consumed by the fixed header, safe-area included.
+     `--header-measured` is published at runtime by HeaderComponent via a
+     ResizeObserver: the header grows when the mobile search sheet opens, when
+     an iOS safe area applies, or at high zoom, and a hardcoded value would let
+     the sticky themes bar slide under it (it was fully hidden in that case). */
+  --header-offset: var(--header-measured, calc(var(--header-h) + var(--safe-top)));
   /* Usable viewport height that follows the mobile browser chrome. */
   --app-vh: 100vh;
 }
@@ -181,18 +185,27 @@ body {
 }
 .app-avatar-btn:hover { background-color: var(--panel-2); }
 
+/* Circular user badge ("pastille"). Belt and braces: `rounded-full` from the
+   markup plus these rules, so the badge can never degrade into a rectangle if
+   a theme stylesheet overrides the radius. */
 .avatar-circle {
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  flex-shrink: 0;
   width: 2rem;
   height: 2rem;
-  border-radius: 9999px;
-  border-width: 1px;
+  min-width: 2rem;
+  min-height: 2rem;
+  aspect-ratio: 1 / 1;
+  border-radius: 9999px !important;
+  border-width: 2px;
   border-style: solid;
   font-size: 0.875rem;
   font-weight: 600;
-  flex-shrink: 0;
+  line-height: 1;
+  overflow: hidden;
+  text-transform: uppercase;
 }
 
 /* The fixed app header: honours the safe area and never overflows. */