Les règles de comportement, valables en M3 comme dans les propositions rétro. Chacune vient d'un écran réel des repos.

Hiérarchie et actions

• Une action principale par écran, à l'endroit où le pouce ou le regard l'attend : FAB en bas à droite sur mobile (« Repas » dans Stabilité), bouton btn-filled à droite du titre de page sur le web.
• L'urgence a sa propre couleur, pas sa propre taille. Le FAB « SOS crash » est en ec / on-ec à côté du FAB « Repas » en pc : même gabarit, couleur différente. Ne jamais grossir un bouton pour attirer l'attention.
• Ordre des boutons de dialogue : action secondaire (texte) à gauche, action principale à droite. L'action destructive est btn-danger, jamais btn-filled.
• Pas de vide inutile dans une carte. Un élément court (chip, statut, action, valeur) ne reste jamais seul sur sa ligne s'il tient à côté du titre ou d'un autre élément : statut et action dans l'en-tête, métadonnées regroupées sur une ligne (« Port 443 · 3 j »). Une carte prend la hauteur de son contenu, sans zone vide étirée.
• Un bouton désactivé dit pourquoi : « Choisis au moins un symptôme » remplace le libellé tant que la condition n'est pas remplie, au lieu d'un bouton grisé muet.

Retour d'information

• Toute action réseau a trois états visibles : en cours (bouton en attente, libellé conservé), réussi (snackbar au participe), échoué (snackbar error avec le message de l'API). C'est ce que fait run() dans lib/ui.ts.
• Snackbar pour ce qui est fait, dialogue pour ce qui va se faire. Une confirmation n'arrive qu'avant une action irréversible ou coûteuse (supprimer, redémarrer, arrêter un conteneur).
• Annuler plutôt que confirmer quand l'action est réversible : snackbar avec action « Annuler » ou « Détailler la collation ».
• Une snackbar à la fois, en bas au centre, 4 à 6 secondes, au-dessus de la barre de navigation sur mobile.

États vides, chargement, erreurs

• Un état vide dit quoi faire et combien ça coûte : « Rien de noté pour l'instant. Le bouton Repas prend moins de 5 secondes. »
• Jamais de texte « Chargement… » seul : toujours un loader. Squelette aux dimensions finales pour du contenu, indicateur de 18 px dans le bouton qui travaille, indicateur M3E pour une attente isolée, barre déterminée avec pourcentage pour une tâche longue. Un texte peut accompagner un loader au-delà de 3 s pour dire ce qui se passe, jamais le remplacer.
• Le chargement garde la mise en page : la valeur précédente reste affichée pendant la mise à jour, pas de spinner plein écran.
• Une erreur reste près de sa cause : sous le champ (field-help error), dans la carte concernée, ou en snackbar error si elle est globale.

Formulaires

• Libellé toujours visible au-dessus du champ, jamais seulement en placeholder.
• Champs numériques en inputmode="numeric", sans flèches, chiffres tabulaires.
• Validation à la sortie du champ, pas à chaque frappe. Le bouton d'envoi reste actif et explique ce qui manque.
• Les choix courts (symptômes, lieu, type de repas) en chips filtre, pas en liste déroulante.

Navigation

• 3 à 5 destinations en barre du bas ou en rail. Au-delà, une entrée « More » ouvre une feuille.
• L'élément actif combine trois signaux : pilule secc, icône remplie, libellé en graisse 600. Jamais la couleur seule.
• aria-current="page" sur la destination active. Échap ferme feuilles et dialogues, le focus revient au déclencheur.

Accessibilité

• Contraste 4.5:1 pour le texte, 3:1 pour les contours de contrôles, icônes porteuses de sens et anneau de focus, dans les deux thèmes.
• Statut jamais par la couleur seule : StatusDot accompagné du mot (« Running », « Stopped »), ou icône dans la chip.
• Cible tactile de 40px minimum, 48px pour les actions principales mobiles.
• Composants de graphique et jauges avec role="meter" et valeurs ARIA (comme MetricCard).
• Mouvement réduit respecté partout.

Données et lisibilité

• Le résumé avant le détail : MetricCards en haut d'un tableau de bord, liste détaillée ensuite.
• Valeur principale grande (metric), contexte en dessous en small (« 3.1 / 8 GB »).
• Durées et dates relatives quand c'est récent (« il y a 3 h 05 »), absolues au-delà d'une semaine.

Web mobile et PWA

• Pas de reflet bleu au tap. Sur mobile, le navigateur colore l'élément touché : on le retire partout avec -webkit-tap-highlight-color: transparent (sur * ou sur le html). Le retour visuel vient du calque d'état .st (12 % à l'appui) et du ripple, et le focus clavier reste visible avec :focus-visible.
• Toujours une PWA. Chaque site ou app web qui utilise Pelote est installable :
  • manifest.webmanifest avec name, short_name, description, lang, start_url, scope, display: standalone, background_color et theme_color (le surface du thème), et les icônes de la fiche AppIcon : favicon en any 192 et 512, maskable 192 et 512 ;
  • <link rel="manifest">, <meta name="theme-color"> (une valeur par thème avec media), apple-touch-icon 180 et le favicon SVG ;
  • un service worker qui met en cache l'enveloppe de l'app et affiche un écran hors ligne utile (comme le SOS de Stabilité, qui marche sans réseau) ;
  • des shortcuts vers les écrans les plus utilisés quand il y en a (PoGo Search : 100 IV, Shiny).

Langues et localisation

• Français et anglais au minimum dans chaque app, d'autres langues ensuite. La langue suit celle de l'appareil, avec un choix dans les réglages ; lang correct sur la page ou Locale en Flutter.
• Aucun texte en dur : tout passe par les fichiers de traduction (ARB en Flutter, fichiers de messages côté web). Pas de phrase construite par concaténation : une chaîne complète avec des variables, et les pluriels gérés par la langue (ICU : « 1 jour », « 3 jours »).
• Prévoir +35 % de longueur (français et allemand sont plus longs que l'anglais) et tester chaque écran avec une pseudo-traduction allongée avant de livrer.
• Boutons (illustrés sur la fiche Localisation) :
  • largeur au contenu, jamais fixe ; jamais de texte tronqué ni de libellé sur deux lignes dans un bouton ;
  • si deux boutons ne tiennent plus côte à côte, ils passent en pile, pleine largeur, l'action principale en haut sur mobile ;
  • si un libellé reste trop long, on le raccourcit dans cette langue (un verbe et un complément), on ne réduit pas la police.
• Chips, onglets, navigation : libellés courts dans toutes les langues ; une chip trop longue passe à la ligne dans le groupe, un onglet ne se tronque pas (le groupe défile). Les libellés de la barre de navigation tiennent en un mot.
• Textes : pas de hauteur fixe sur un bloc de texte, retour à la ligne autorisé partout ; les titres utilisent text-wrap: balance.
• Formats : dates, heures, nombres, unités et devises via Intl (web) ou intl (Flutter), jamais formatés à la main (« 3 h 05 » en français, « 3:05 h » ou « 3 h 5 min » selon la langue).
• Accessibilité : les aria-label, tooltips et textes alternatifs sont traduits aussi. Mise en page avec des propriétés logiques (margin-inline, padding-inline-start) pour rester prêt pour les langues de droite à gauche.

Personnalisation du thème

• Toujours laisser choisir, dans toute app, site ou outil :
  • le mode : Clair, Sombre ou Système (par défaut : Système) ;
  • la couleur du thème : 4 à 6 couleurs source proposées en pastilles, plus un choix libre ; tous les rôles sont régénérés depuis cette couleur (material-color-utilities, ColorScheme.fromSeed).
• Android : Material You toujours disponible. Un interrupteur « Couleurs du fond d'écran » (dynamic color), activé par défaut sur Android 12+ ; quand il est actif, le choix de couleur est grisé avec une phrase qui explique pourquoi.
• Le choix s'applique tout de suite (sans bouton Enregistrer), est mémorisé, et suit la personne entre ses appareils quand l'app a un compte.
• Les statuts ok, warn, bad ne changent pas avec le thème.
• Le réglage se trouve dans les Réglages, section « Apparence », avec un aperçu en direct ; les variantes Plaza et Chrome s'y ajoutent comme un choix de « Style ».