Surfaces client — US-096

Les surfaces client — ce que voit l'utilisateur

Quatre surfaces : backoffice web, PWA terrain, iOS, Android. Trois nouveautés visibles et une disparition. La contrainte de langue est la plus stricte de tout le chantier : l'utilisateur ne voit jamais le mot « établissement » — il voit le nom de son association. Le terme n'existe que dans la console ingénieur (LM1).

Le produit ne s'appelle plus « K'Fet ». Sur ces écrans : Collectes-Backoffice pour le web d'administration, Collectes-Terrain pour iOS, Android et la PWA. « K'Fet » ne subsiste que comme nom d'un client — dans le sélecteur ci-dessous, c'est une carte parmi d'autres. Toute occurrence restante de « K'Fet » hors nom de client est un bug de la maquette comme du code.

Un mot manque au vocabulaire client, et il faut le choisir maintenant. La release note du ticket propose « point de collecte » — mais ce terme est déjà pris : dans CLAUDE.md, « une tournée visite N points de collecte », ce sont les boulangeries et les fermes. L'employer pour désigner l'établissement ferait dire à un collecteur qu'il choisit son point de collecte avant d'aller collecter dans ses points de collecte. Ces maquettes retiennent « structure » — neutre, non ambigu, et employé le moins souvent possible : partout où c'est faisable, l'écran nomme l'association au lieu de la catégoriser. À confirmer par le PO ; le changement coûte quatre chaînes.

1 · L'écran de connexion — le bloc de statistiques est déposé

Arbitrage PO du 11/08/2026 (Q4) : la mire de connexion est commune à tous les clients — elle n'a, par construction, aucun établissement dont afficher les chiffres. GET /statistiques/public disparaît, le bloc « Impact K'Fet » livré par US-053 est retiré. C'est un retrait assumé, pas une régression : mieux vaut pas de chiffre qu'un chiffre qui ne veut rien dire.

A1 Avant — le bloc US-053 en place déposé

K'Fet

Backoffice · Association Martinique

Lutter contre le
gaspillage alimentaire,
ensemble.

Plateforme de gestion des collectes, du stock et du dispatching solidaire en Martinique. Chaque gramme compte.

✕ Impact K'Fet — retiré

9,2 t

Denrées collectées

8,4 t

CO₂e évité

11 842

Repas équivalents

4,5 M

Litres d'eau économisés

Cumul réel depuis le 12/03/2025 · méthode ADEME

Connexion

Accédez à votre espace de gestion K'Fet

prenom.nom@kfet.mq

Mot de passe

••••••••

Se connecter →

🌐 Hors ligne ? L'application terrain fonctionne sans réseau.

📄 Consulter les CGUConsultables sans être connecté.

Quatre chiffres, une mention de méthode, une marque de client — et un appel réseau public avant authentification. Tout cela sort.

A2 Après — la marque plateforme, sans recomposition retenu

Collectes-Backoffice

Gestion des collectes solidaires

Lutter contre le
gaspillage alimentaire,
ensemble.

Plateforme de gestion des collectes, du stock et du dispatching solidaire. Chaque gramme compte.

Connexion

Accédez à votre espace de gestion

prenom.nom@exemple.fr

Mot de passe

••••••••

Se connecter →

🌐 Hors ligne ? L'application terrain fonctionne sans réseau.

📄 Consulter les CGUConsultables sans être connecté.

Réponse à la question posée : non, l'espace libéré ne demande pas de recomposition. La colonne de gauche est un space-between à trois blocs — marque en haut, accroche au milieu, mention légale en bas. Retirer le bloc raccourcit le bloc du milieu ; les trois ancrages tiennent, la page ne s'effondre pas. Y remettre quelque chose serait recréer exactement ce que le PO vient d'enlever : du décor qui prétend informer.

Trois changements de chaîne, et un constat pour la recette. « K'Fet » → « Collectes-Backoffice » ; « Backoffice · Association Martinique » → « Gestion des collectes solidaires » (la mire est commune, elle ne peut plus nommer un territoire) ; le placeholder d'e-mail perd le domaine @kfet.mq.

Constat : le bloc de statistiques n'existe que dans le backoffice (login.component.html + statistiques.service.ts). La mire du terrain ne l'a jamais porté — vérifié sur terrain/src, aucune occurrence. La note d'arbitrage annonce une dépose « backoffice et terrain » ; côté terrain il n'y a rien à déposer, seulement la marque à reprendre. À signaler au plan de recette pour qu'aucun testeur ne cherche un bloc absent.

2 · Le sélecteur post-connexion — après le mot de passe, jamais avant

L'écran s'intercale entre le login et l'application, une fois le mot de passe validé (RG-02 : un écran « chez quelle association ? » placé avant le mot de passe permettrait d'énumérer les clients de la plateforme). Il ne s'affiche que si l'utilisateur est rattaché à plusieurs structures : avec une seule, le serveur résout tout seul et personne ne voit jamais cet écran.

B1 Backoffice — deux structures, aucun mot de jargon

Clarisse Delor

c.delor@panier-solidaire.fr

Ce n'est pas moi

Où souhaites-tu travailler ?

Ton compte est rattaché à plusieurs structures. Tu ne verras que les tournées, le stock et les partenaires de celle que tu choisis.

Le Panier Solidaire — Nîmes

Administratrice

Dernière session : hier à 17:42

✓

Le Panier Solidaire — Montpellier

Collectrice

Dernière session : le 12/07/2026

Continuer →

Pour changer, il faudra te reconnecter.

Trois décisions de langue. Le titre pose une question de lieu de travail, pas de catégorie d'objet. Le sous-titre dit « structures » une seule fois, puis nomme ce que ça change concrètement — tes tournées, ton stock, tes partenaires. Et le pied de carte annonce le coût du changement avant le choix, pas après : c'est là que ça sert.

B2 Terrain / mobile — même écran, un doigt

9:41􀙇 􀛨 􀋨

Collectes-Terrain

Bonjour Clarisse

Où travailles-tu aujourd'hui ?

Tu es rattachée à deux structures. Tu ne verras que ce qui appartient à celle que tu choisis.

Le Panier Solidaire — Nîmes

Administratrice

✓

Le Panier Solidaire — Montpellier

Collectrice

Continuer →

Pour changer, il faudra te reconnecter.

Une carte pleine largeur par structure, cible tactile ≥ 60 px de haut. Pas de liste déroulante : sur trois entrées, une liste déroulante ajoute un geste et cache le rôle.

B3 Cas limite — plus aucune structure accessible

9:41􀙇 􀛨 􀋨

Collectes-Terrain

Bonjour Jean-Marc

🚪

Aucun accès disponible

Ton compte est bien reconnu, mais il n'est rattaché à aucune structure active pour le moment.

Contacte l'administrateur de ton association.

Se déconnecter

Le cas se produit quand la seule structure de l'utilisateur vient d'être désactivée. L'écran ne dit ni « désactivée », ni « suspendue », ni « licence » : la raison est contractuelle, elle regarde l'association, pas le collecteur. Il ne reste aucune ligne fantôme dans la liste — un établissement désactivé disparaît, il ne s'affiche pas en grisé.

Le cas majoritaire est celui qu'on ne dessine pas. Tant qu'aucun humain n'est rattaché à deux structures — c'est-à-dire le jour de la bascule, et probablement longtemps après — le serveur résout l'unique établissement et l'écran ne s'affiche jamais. Le parcours de connexion des quatre surfaces reste strictement l'actuel. Cette maquette décrit donc une minorité de sessions : elle ne doit pas devenir un péage pour tout le monde.

3 · La bascule depuis l'en-tête — surtout ne pas promettre l'instantané

Le cloisonnement est strict : pas de vue consolidée, pas de session partagée. Changer de structure impose de se déconnecter et se reconnecter (RG-14). Le risque de maquette est précis et coûteux : dessiner un menu déroulant à côté du nom de la structure. Un chevron promet une bascule en un clic ; l'implémentation ne pourra pas tenir cette promesse, et c'est la maquette qu'on accusera.

C1 À ne pas faire écarté

Collectes-Backoffice

Structure

Le Panier Solidaire — Nîmes

▾

✓ Le Panier Solidaire — Nîmes

Le Panier Solidaire — Montpellier

↑ Cette liste ne peut pas exister.

Chevron + liste + coche : le vocabulaire universel du sélecteur instantané. Un clic sur la deuxième ligne devrait recharger l'application dans l'autre contexte — ce que l'architecture interdit. Ce motif est proscrit sur les quatre surfaces.

C2 Retenu — le contexte est du texte, la bascule vit dans le menu de compte

Collectes-Backoffice

Structure

Le Panier Solidaire — Nîmes

Dashboard

Tournées

Stocks

Le nom de la structure reste visible en permanence dans la barre — c'est le seul repère anti-erreur d'un utilisateur multi-structures — mais il n'est pas un contrôle : pas de chevron, pas de survol cliquable, pas de curseur main. L'entrée « Changer de structure » vit dans le menu de compte, à côté de « Se déconnecter », et porte son coût dans son sous-titre. Elle n'apparaît que si l'utilisateur a plus d'une structure.

C3 La confirmation — le mot « déconnecter » figure sur le bouton

Le bouton d'action ne dit pas « Continuer » ni « Changer » : il dit ce qui va se passer. Un utilisateur qui perd sa session sans l'avoir lu noir sur blanc a été trompé par la maquette, pas par l'architecture.

C4 Terrain / mobile — le cas des actions non synchronisées

C'est le seul endroit de LM2 où une action est désactivée. Le cache hors ligne est cloisonné par structure : changer de contexte avec une file d'attente non vidée détruit du travail réel. Sur les surfaces terrain, iOS et Android, la bascule est donc conditionnée à une file vide.

C5 PWA terrain — feuille de compte

Mes tournées

Le Panier Solidaire — Nîmes

CD Clarisse
Administratrice

Structure en cours

Le Panier Solidaire — Nîmes

👤Mon profil

🎨Thème et affichage

🔄Changer de structure

Te déconnecte et te ramène au choix

🚪Se déconnecter

Le nom de la structure prend la place du sous-titre du topbar (US-092) quand l'utilisateur est multi-structures. Il n'y a pas de composant en plus à trouver de la place pour.

C6 iOS — Réglages, feuille d'action

9:41􀙇 􀛨 􀋨

‹ AccueilRéglages

Structure

Structure en cours Le Panier Solidaire
— Nîmes

Changer de structure Te déconnecte et te ramène au choix

Chaque structure a ses propres tournées et son propre stock. Il n'y a pas de vue commune.

Une ligne de valeur (non cliquable) + une ligne d'action en bleu de lien, avec son sous-titre : les deux conventions natives iOS suffisent, aucun composant maison. Le texte de bas de section porte l'explication du cloisonnement, là où iOS met traditionnellement les notes de réglage.

C7 Android — Material 3

☰

Profil

Structure

🏛 Le Panier Solidaire — Nîmes Structure en cours

🔄 Changer de structure Te déconnecte et te ramène au choix

🚪 Se déconnecter

Deux ListItem à deux lignes, la structure en cours en premier et sans action. « Changer » et « Se déconnecter » sont voisins : c'est la vérité de ce qui se passe.

4 · Le bandeau de licence expirée — informer sans bloquer

Expiration = bandeau d'avertissement seul (D-06). Pas de lecture seule, pas de 403 sur les écritures, pas de période de grâce, aucune donnée touchée. Le bandeau est permanent tant que la licence n'est pas renouvelée — donc il doit être discret au point qu'on puisse travailler des semaines avec, et lisible au point qu'un ADMIN finisse par appeler son éditeur.

Pas de croix de fermeture, pas de compte à rebours, pas de rouge. Une croix ferait disparaître la seule information disponible ; un compte à rebours dramatiserait un état qui ne coupe rien ; le rouge est réservé à ce qui casse. La teinte d'avertissement, avec l'encre warning de la fiche 0-A, est exactement le bon registre : visible, supportable, jamais alarmant.

D1 Backoffice — sous la barre supérieure, pleine largeur

Collectes-Backoffice

Structure

Bel Manjé — Pointe-à-Pitre

Dashboard

Tournées

Dispatching

Stocks

Statistiques

J.-M. Robert

📜 La licence de ton association a expiré le 30 juin 2026. Rien n'est bloqué : tu continues à travailler normalement. Contacte l'éditeur pour la renouveler.

Une seule phrase, trois informations, dans cet ordre : le fait (expiré, avec la date), le rassurement (rien n'est bloqué), l'action (contacter l'éditeur). Inverser l'ordre — commencer par « contacte l'éditeur » — produirait un bandeau qui se lit comme une menace.
Variante par rôle : la troisième phrase (« Contacte l'éditeur pour la renouveler ») n'apparaît que pour les ADMIN. Un collecteur n'a rien à faire de cette information et ne peut rien y faire ; il lit les deux premières.

D2 PWA terrain — sous le bandeau hors ligne, jamais au-dessus

📴Mode hors ligne — 3 actions en attente · dernière synchro 08:12

📜 Licence expirée le 30/06/2026. Rien n'est bloqué.

Mes tournées

Bel Manjé — Pointe-à-Pitre

JRJean-Marc
Collecteur

🚚Tournées

📦Stock

🫶Dispatch

👤Profil

Ordre d'empilement imposé. Le bandeau hors ligne d'US-075 est opérationnel et actionnable : il concerne le geste en cours. Le bandeau de licence est administratif : il concerne le mois en cours. Le premier passe au-dessus, toujours. En version mobile, la troisième phrase saute — la place manque et un collecteur n'appellera pas l'éditeur.

D3 iOS — sous la barre de navigation

9:41􀙇 􀛨 􀋨

Mes tournées

📜 Licence expirée le 30/06/2026. Rien n'est bloqué.

Bandeau non scrollable, ancré sous la NavigationBar : s'il défilait avec le contenu, il disparaîtrait au premier geste et l'information serait perdue pour la session.

D4 Android — sous l'app bar

☰

Mes tournées

⋮

📜 Licence expirée le 30/06/2026. Rien n'est bloqué.

🚚Tournées

📦Stock

🫶Dispatch

👤Profil

Même bandeau, même hauteur, même texte que iOS. Ce n'est pas une Snackbar : une Snackbar disparaît, ce bandeau reste.

5 · Le bandeau sur les 7 palettes — y compris Vétiver

US-078 a mis 7 palettes botaniques en place, dont 4 chartes d'origine. La question posée est légitime — le bandeau tient-il partout, y compris sous Vétiver qui ne porte aucun texte AA ? — et la réponse tient en une phrase : le bandeau ne consomme aucun jeton thémable.

Fond, contour et texte du bandeau sont des constantes de la fiche 0-A — --kf-warning-soft (#f6e5c9), --kf-warning-soft-border (#e7bd78), --kf-warning-ink (#7d5006). Aucune n'est écrite par applyTheme() : ce sont les trois encres constantes retenues précisément parce que les sémantiques ne sont pas des couleurs de texte. Le bandeau est donc identique au pixel sur les 7 palettes, et son contraste texte est mesuré une fois pour toutes : 5,62:1 — AA confortable sur les 7, AAA non atteint (ce n'est pas visé : ce n'est pas du texte long).

Le cas Vétiver ne se pose pas ici. Vétiver échoue sur primaryContrast, c'est-à-dire sur du texte posé sur le primaire. Le bandeau ne pose rien sur le primaire. Si demain quelqu'un « harmonise » le bandeau en le teintant au primaire de la palette, il casse quatre palettes d'un coup — d'où la règle LM2-07.

Une mesure a changé le dessin. Le fond du bandeau (#f6e5c9) ne contraste qu'à 1,13:1 contre les fonds de palette, et son contour à 1,60:1 — sur les sept, à 0,03 point près. Autrement dit, posé sur une zone claire sans bord franc au-dessus, le bandeau ne se détacherait pas : ce serait un léger jaunissement, pas une bande. Correctif retenu : un filet gauche de 3 px en encre pleine, exactement le dispositif de la mention d'irréversibilité d'US-034. Le bord passe à 5,62:1 et la bande se lit comme une bande partout — y compris sur Mangue, dont le fond crème est le plus proche du sien.

E1 Le même bandeau, sept fois, sur les fonds de chaque palette

HIBISCUS · Collecteur#b5384e