# #189 — Tableur : mise en page mobile (barres repliées, grille prioritaire)

> **Statut :** ✅ livré (2026-10-08) | **Effort :** 0,5-1 jour | **Impact :** 🟡
> **Références :** [Roadmap](../ROADMAP.md) · [Changelog](../../CHANGELOG.md) ·
> [#180](./xlsx-sheetbar-180.md) · [#185](./xlsx-menus-185.md)

## 1. Constat

Sur mobile, l'empilement `.xlsx-menubar` (10 menus) + `.xlsx-cmdbar`
(~40 boutons qui s'enroulent sur 4-5 rangées) + `.xlsx-sheetbar` +
`.xlsx-formula-bar` occupait **plus de 50 % de la hauteur d'écran** : la
grille, objet premier de l'éditeur, passait après la chrome.

## 2. Livré

### A1 — Repli par défaut (CSS, ≤ 768 px)

Bloc `#189` dans `frontend/style.css` (après les règles `pointer: coarse`) :

- `.xlsx-menubar`, `.xlsx-cmdbar`, `.xlsx-find-group` → `display: none` par
  défaut sous 768 px ;
- `.xlsx-toolbar.xlsx-tools-open …` les réaffiche (état de la classe portée
  par la **barre entière**, donc menubar + ruban + Recherche restent cohérents) ;
- `.xlsx-formula-bar` reste **toujours visible** (zone Nom + `fx` + champ) et
  passe en `flex-wrap` quand les outils sont ouverts (le groupe Recherche
  réapparaît sur une 2ᵉ ligne) ;
- `.xlsx-tools-toggle { display: none }` sur desktop : **zéro changement
  visuel hors mobile**.

### A2 — Bascule unique (JS)

`frontend/js/viewer.js` (`renderXlsxViewer`) :

- bouton `#xlsx-tools-toggle` (icône Lucide `menu`, `aria-expanded`,
  `aria-label` i18n `xlsx.tools_toggle`) inséré **en tête de
  `.xlsx-sheetbar`** — donc toujours visible, entre les onglets et Enregistrer ;
- listener : bascule `.xlsx-tools-open` sur `.xlsx-toolbar`, met à jour
  `aria-expanded` + classe `active`, `safeCreateIcons()` pour l'icône.

### A3 — Ergonomie tactile (CSS)

- cibles ≥ **44 px** : `.xlsx-toolbar .btn-action`, `.xlsx-menubtn`,
  `.xlsx-tab` / `.xlsx-tab-add` ; à cette taille un groupe du ruban
  (police, nombre…) déborde d'un téléphone : `.xlsx-cmd-group` passe en
  `flex: 0 1 auto; min-width: 0; flex-wrap: wrap` pour s'enrouler au lieu
  de sortir de l'écran (contre-preuve E2E : `scrollWidth - clientWidth ≤ 1`) ;
- onglets de feuilles : une seule ligne, **défilement horizontal**
  (`overflow-x: auto`, scrollbars masquées) au lieu d'enrouler ;
- champs de la barre de formule en **16 px** : en dessous, iOS zoome
  automatiquement la page au focus (la « classique » debout de l'UI) ;
- groupe Recherche masqué avec le ruban pour ne pas écraser le champ de saisie.

### A4 — i18n

Clé `xlsx.tools_toggle` : FR « Afficher / masquer les barres d'outils » /
EN « Show / hide toolbars » (parité vérifiée par `tests/test_i18n_parity.py`).

## 3. Tests

- `tests/frontend/xlsx-viewer.test.mjs` (+2, **165/165**) :
  1. la bascule vit dans la barre des feuilles et flippe correctement
     classe / `aria-expanded` / `active` (aller-retour) ;
  2. `style.css` masque menubar/ruban/Recherche par défaut sous 768 px et les
     réaffiche via `.xlsx-tools-open` (44 px, onglets scrollables, inputs
     16 px présents dans le bloc).
- `tests/e2e/xlsx-viewer.spec.js` — test mobile réécrit : repli par défaut
  (menubar/ruban cachés, formule + onglets visibles) → dépliage → ruban sans
  débordement horizontal → cibles ≥ 44 px → repli ; `openXlsx()` déplie
  automatiquement sous 768 px pour que les tests « desktop » restent valables
  sur les deux viewports.

## 4. Limites assumées

- Le repli est piloté par la **largeur** (`max-width: 768px`), pas par
  `pointer: coarse` : une tablette large en mode tactile garde la chrome
  complète (elle a la hauteur pour).
- Le groupe Recherche n'est accessible sur mobile qu'avec les outils ouverts
  ; le reset de tri reste atteignable par la mini-barre de sélection et le
  menu Données (vérifié).
- Pas de drawer latéral ni de FAB : un seul bouton rétractable suffit à
  l'usage — ajouter un panneau glissant si le retour utilisateur le réclame.