Derniere revision : 24/08/2026.
Le parti pris
L'interface telephone est une application A PART, servie sous /m — pas une adaptation responsive du bureau. Decision de Francois le 19/08/2026 : « je pense qu'il faut faire une interface a part, vu comme on est tres loin d'avoir une interface responsive ».
Meme base de donnees, meme compte, memes services metier. AUCUN service n'est duplique : le module ne fait que presenter autrement ce que les services existants renvoient deja.
Regles de conception
- La navigation vit EN BAS. Le tiers inferieur de l'ecran est la seule zone confortablement atteignable d'une main sur un grand telephone.
- 44 px minimum pour toute cible tapable — minimum iOS et recommandation WCAG.
- Champs a 16 px minimum. En dessous, iOS zoome a chaque prise de focus.
- Une page = une tache. Des listes et des cartes, jamais un tableau a faire defiler horizontalement.
- Zones sures respectees (encoche, barre gestuelle), sinon la barre du bas devient intouchable sur iPhone.
Structure de la navigation
Deux barres empilees : une principale a six icones, et une sous-barre contextuelle. Les entrees sont construites depuis app.NAV_ITEMS — source unique partagee avec le menu du bureau, memes noms et meme ordre, a la demande explicite de Francois. Une liste dupliquee dans le module mobile derivait a la premiere modification.
Bascule automatique
Un telephone est redirige vers /m par son User-Agent. Le cookie aura-bureau permet de forcer le bureau depuis un telephone : la detection ne doit jamais devenir une prison.
Composer et modifier depuis le téléphone
Le brouillon de devis s'édite entièrement sur /m depuis le 26/08/2026, et le modèle est celui des applis de facturation mobiles : la page montre l'état, chaque zone tapée ouvre une feuille glissante, chaque modification est enregistrée immédiatement — aucun bouton « Sauvegarder ». Patterns réutilisables posés dans mobile-app.css : .m-item--bouton (un .m-item qui est un vrai bouton), .m-form (formulaire de feuille, champs à 16 px), .m-stepper (quantité − / + au pouce, champ central saisissable pour les décimales), .m-action--ajout (bouton d'ajout en pointillés : la seule action pleine et colorée d'un écran de composition reste l'action principale).
Règles à ne pas défaire (mobile-devis-edit.js) : enregistrement pessimiste (on ne repeint que depuis la réponse du serveur), verrou de version dans chaque PATCH (409 → recharger, jamais écraser le travail fait au bureau), et les feuilles partagent une seule entrée d'historique pour que le bouton retour d'Android referme la feuille au lieu de quitter l'écran.
Depuis le 27/08/2026 le téléphone gère aussi les sections (en-tête = bouton avec sous-total, feuille de gestion : renommer, ligne ciblée, supprimer) et les compositions (insérées copiées ; l'appartenance à un groupe est gravée dans la description de la ligne — « Composition : X », exactement la convention de l'atelier bureau, dans les deux sens). Un devis commencé au bureau se poursuit au téléphone et inversement : la page se rafraîchit seule quand elle redevient visible, et recharge si le devis a été finalisé ailleurs.
La ToDo de l'écran Laura (30/08/2026) suit le modèle Google Tasks : rond à gauche pour cocher (la ligne reste barrée en place, re-taper annule), poignée à droite pour glisser, rangée « + » en bas pour ajouter. Deux règles à garder : le glisser ne démarre QUE depuis la poignée (touch-action: none sur elle seule, le reste de la ligne défile normalement), et l'ordre envoyé à /laura/api/ordre est la liste complète des ids dans l'ordre affiché — l'état vu fait foi, même convention que le bureau.
Pieges connus
- La hauteur de la barre du bas vit dans UNE variable,
--m-nav-hauteur, dont se servent les reserves debodyet de.m-contenu. La coder en dur ailleurs fait passer le dernier element de chaque liste sous la barre translucide. padding-bottom: var(--m-safe-bas)sur la barre n'est pas decoratif : sans lui, elle passe sous la barre gestuelle de l'iPhone.- Ne jamais reintroduire les gabarits du bureau dans
/m: ils ne sont pas dimensionnes pour. - Le chantier bouge vite : lire
mobile_blueprint.pya jour plutot que la documentation. - Le cookie
aura-bureau(bouton « Bureau » du sous-menu Laura) coupait la bascule automatique pendant 30 jours pour une seule pression, parfois accidentelle — François s'est retrouvé plusieurs fois coincé sur le bureau sans s'en souvenir (constaté le 26/08/2026). Ramené à 24h. Le bandeau de retour (.mobile-retour-tel) existait déjà mais n'était pas collant : il défilait hors écran dès le premier scroll, invisible en pratique bien que présent dans le HTML servi. Passé enposition: stickyau-dessus de.mobile-topbar. Un bouton piège d'un tap mérite une confirmation : ajoutée sur ce lien.
Mails : bandeau des boîtes et des dossiers (29/09/2026)
Le bandeau du haut des Mails porte d'abord les boîtes (une couleur chacune), puis, derrière un filet, les dossiers Spams, Frais, Compta, PAO, Corbeille (icône de la feuille de tri). La pastille active est toujours ramenée à l'écran, y compris au retour d'un message. Règle : toute ligne de liste porte le dossier d'où elle vient, et chaque action l'envoie au serveur.
Mails : répondre (01/10/2026)
La carte de réponse montre le mail tel qu'il partira : texte, signature, message précédent (sur blanc, repliable). Règle : un bouton d'action d'une carte longue reste collé au-dessus de la barre du bas (position: sticky, bottom: calc(var(--m-nav-hauteur) + var(--m-safe-bas)), fond de carte).