Implement production vertical slice foundation

docs/UI_DESIGN_SYSTEM.md

@@ -0,0 +1,262 @@
+# Design system UI — verticale jouable
+
+## Statut
+
+- Version : 0.1.
+- Date : 7 août 2026.
+- État : baseline acceptée pour les menus et réglages de la verticale.
+- Référence visuelle principale : menu principal V4 sous `Design-Proposal/`.
+- Portée : menus, réglages, confirmations et états système de la verticale.
+
+Ce document est la source autoritaire. Les PNG sous `Design-Proposal/` sont des
+références d'ambiance et de composition. Leurs contradictions, textes fictifs et
+données simulées ne deviennent pas des exigences. Les HTML associés sont des
+prototypes de présentation ; aucun code de production ne les importe ou ne les
+copie.
+
+## 1. Intention
+
+L'interface évoque un équipement maritime industriel moderne, robuste, entretenu
+et réparable. Elle combine la sobriété d'un poste de travail embarqué avec
+quelques détails d'instrumentation plus ancienne.
+
+Le joueur doit percevoir :
+
+- l'isolement et la pression du milieu sous-marin ;
+- une technologie spécialisée mais compréhensible ;
+- une tension lente, annoncée et jamais décorativement alarmiste ;
+- la matérialité du cockpit sans confusion avec un système militaire futuriste.
+
+Sont exclus du langage de production : faux systèmes d'exploitation, gestion de
+flotte, réacteur, jargon de protocole, diagnostics sans fonction, interface de
+combat et données de télémétrie inventées.
+
+## 2. Références retenues
+
+| Référence | Usage retenu | Ne pas reprendre |
+|---|---|---|
+| Menu principal V4 | ancrage visuel, panneau, calme et hiérarchie | format exporté et arrière-plan comme contrat exact |
+| Menu pause V4 | contraste avec la scène en arrière-plan | navigation anglaise et protocole d'évacuation comme écran par défaut |
+| Réglages Audio V4 | densité, curseurs et groupement des canaux | statut système décoratif |
+| Réglages Commandes V4 | ligne d'action, conflit et remappage | action de tir, touches fictives et coque `DIVE_OS` |
+| Réglages Accessibilité V4 | regroupement et aperçu immédiat | radar circulaire et choix d'une couleur isolée comme palette |
+| Réglages Affichage V4 | modes d'écran, résolution, VSync et limite FPS | navigation Fleet/Logs/Nav-Com/Engineering |
+| Confirmation d'abandon V4 | texte des conséquences et hiérarchie du danger | ordre inversé des actions et télémétrie décorative |
+| Planche de composants V4 | états, bordures et redondance des signaux | réacteur, unités et libellés fictifs |
+
+Le catalogue complet et le statut de chaque proposition se trouvent dans
+`Design-Proposal/README.md`.
+
+## 3. Couleurs
+
+Les valeurs ci-dessous sont des points de départ. Elles seront vérifiées sur le
+renderer de production et corrigées si le contraste mesuré l'exige.
+
+| Rôle | Valeur de départ | Usage |
+|---|---|---|
+| Fond principal | `#09141e` | écran et voile de pause |
+| Fond profond | `#040f19` | champs et zones en retrait |
+| Panneau | `#15212b` | conteneur principal |
+| Panneau actif | `#202b36` | survol et sélection secondaire |
+| Texte principal | `#d8e4f2` | titres et actions |
+| Texte secondaire | `#bacac6` | descriptions et métadonnées utiles |
+| Focus | `#40e0d0` | bordure, crochet et repère de sélection |
+| Avertissement | `#ffbf00` | risque réversible ou attention requise |
+| Danger | `#ffb4ab` | perte, abandon et action irréversible |
+| Bordure | `#3c4a47` | structure et séparation |
+
+La couleur ne suffit jamais à transmettre un état. Focus, avertissement et
+danger combinent au moins une forme ou bordure, une icône et un texte.
+
+## 4. Typographie et densité
+
+- Corps : sans-serif lisible, 16 px minimum à 1080p.
+- Libellé fonctionnel : 14 px minimum.
+- Donnée chiffrée : monospace réservée aux valeurs réellement utiles.
+- Titre d'écran : 24 à 32 px selon la hiérarchie.
+- Zone interactive : 44 × 44 px minimum.
+- Marge sûre : 32 px à 1080p.
+- Expansion de localisation : réserver au moins 30 % de largeur supplémentaire.
+
+Inter et JetBrains Mono sont les candidats visuels actuels. Leur ajout au jeu
+nécessitera des fichiers locaux et l'enregistrement de leurs licences. Le rendu
+d'une police distante dans les HTML n'est pas une dépendance autorisée.
+
+Les capitales espacées sont réservées aux titres courts et aux actions. Les
+paragraphes et conséquences restent en casse normale. Les microtextes
+décoratifs sont supprimés.
+
+## 5. Formes, mouvement et profondeur
+
+- Panneaux rectangulaires, angles droits ou rayon maximal de 2 px.
+- Bordures franches plutôt qu'une lueur seule.
+- Focus clavier visible par une bordure double ou des crochets persistants.
+- Appui représenté par un léger déplacement ou changement tonal.
+- Flou, bloom et condensation restent décoratifs et désactivables.
+- Aucun scintillement ou clignotement rapide.
+- Les scanlines globales sont interdites.
+- La réduction des mouvements désactive parallaxe, pulsation décorative et
+  transition non essentielle.
+
+## 6. Coque de navigation commune
+
+Tous les réglages partagent la même coque : titre, onglets, contenu, retour et
+barre d'actions. Ils ne simulent ni un logiciel distinct ni un autre poste du
+véhicule.
+
+Onglets de la verticale :
+
+1. Commandes ;
+2. Accessibilité ;
+3. Audio ;
+4. Affichage.
+
+Actions persistantes : `Retour`, `Rétablir par défaut`, `Annuler` et
+`Appliquer`. Un changement non appliqué porte un repère de forme en plus de sa
+couleur. Les réglages pouvant être prévisualisés sans risque s'appliquent à
+l'aperçu immédiatement ; leur persistance suit toujours la commande explicite.
+
+L'ordre de focus suit l'ordre de lecture : titre ou retour, onglets, contenu de
+haut en bas, puis actions. Le retour arrière restaure le focus sur le contrôle
+qui a ouvert l'écran.
+
+## 7. Écrans autoritaires
+
+### Menu principal
+
+Ordre des actions :
+
+1. `Continuer` ;
+2. `Nouvelle partie` ;
+3. `Réglages` ;
+4. `Quitter`.
+
+Avec une sauvegarde valide, `Continuer` reçoit le focus. Sans sauvegarde, il
+reste lisible, affiche `Aucune sauvegarde` sans état d'erreur et `Nouvelle
+partie` reçoit le focus.
+
+### Pause
+
+Le vrai menu pause suspend les ticks de plongée, donc les consommations et les
+dégâts temporels. L'écran sonar agrandi ne met pas le jeu en pause.
+
+Ordre des actions :
+
+1. `Reprendre` ;
+2. `Réglages` ;
+3. `Abandonner la plongée` ;
+4. `Retour au menu principal` ;
+5. `Quitter le jeu`.
+
+`Reprendre` reçoit toujours le focus initial. L'abandon ouvre une confirmation ;
+il n'affiche pas un faux état critique et n'est jamais déclenché directement.
+
+### Confirmation d'abandon
+
+Titre : `Abandonner la plongée ?`
+
+Message : `Vous serez éjecté puis évacué. Le sous-marin et sa cargaison non
+sécurisée resteront au fond. Une franchise sera appliquée.`
+
+Actions, dans cet ordre : `Rester en plongée`, puis `S'éjecter et abandonner`.
+L'action sûre reçoit le focus. Une confirmation n'invente aucune profondeur,
+intégrité ou autre télémétrie.
+
+### Commandes
+
+L'écran présente les actions abstraites du jeu et détecte les conflits. Il ne
+contient aucune action de tir. La première baseline utilise :
+
+| Entrée | Action |
+|---|---|
+| W / S | avancer / reculer |
+| A / D | gouverner à gauche / droite |
+| Souris | regard horizontal et vertical limité, sans modifier le cap |
+| Espace / Ctrl | monter / descendre |
+| Maj | forte poussée |
+| F | impulsion sonar |
+| E | interaction contextuelle |
+| 1 à 4 | sélectionner un module |
+| Tab | agrandir ou fermer le sonar |
+| action d'éjection maintenue | abandon volontaire |
+
+Les valeurs affichées proviennent du service de réglages. Le joueur peut
+remapper, résoudre un conflit, restaurer les valeurs par défaut et choisir
+`Maintenir` ou `Basculer` pour les actions prolongées compatibles.
+
+### Accessibilité et sonar
+
+L'aperçu sonar emploie un échantillon de calibration explicitement fixe. Il
+représente une surface bathymétrique continue en perspective, jamais un radar
+circulaire. Une palette est un ensemble cohérent de valeurs de profondeur et
+d'anomalie, pas le choix d'une couleur unique.
+
+La palette normale conserve la grammaire validée : bleu profond, cyan et vert
+intermédiaires, jaune et rouge hauts, orange pour une anomalie. Les variantes
+accessibles ajoutent luminosité, contours ou formes ; elles ne suppriment pas la
+lecture de l'élévation.
+
+Réglages minimaux : taille du texte, mouvement caméra, roulis, flashs et
+distorsions, sous-titrage des alarmes, contraste et palette sonar, modes de
+daltonisme, maintien ou bascule.
+
+### Audio et affichage
+
+Canaux audio : principal, musique, ambiance, véhicule, interface et alarmes.
+Les alarmes restent audibles et testables indépendamment.
+
+Affichage : fenêtré, sans bordure, plein écran, résolution, VSync, limite de
+framerate et qualité graphique. Forward+ reste l'unique renderer : aucun choix
+de renderer n'est exposé. Les préréglages de qualité agissent notamment sur les
+particules, les ombres, la distance d'affichage et le post-traitement ; les
+effets atmosphériques coûteux suivent la même politique après mesure. Les
+valeurs proposées viennent de la plateforme et de configurations validées ;
+l'interface n'invente pas des modes indisponibles. Une qualité réduite ne
+supprime jamais une information nécessaire à la navigation ou au sonar.
+
+## 8. États système
+
+Libellés autoritaires :
+
+- `Sauvegarde en cours…` ;
+- `Sauvegarde terminée` ;
+- `Chargement…` ;
+- `Aucune sauvegarde` ;
+- `Sauvegarde invalide` ;
+- `Version de sauvegarde incompatible`.
+
+L'absence de sauvegarde est neutre, une sauvegarde invalide est un avertissement
+et une incompatibilité irrécupérable est une erreur. Les détails techniques
+restent dans les logs et ne remplacent pas le message joueur.
+
+`Continuer` reprend au dernier état stable pris en charge. La position physique,
+les collisions, les particules et le maillage sonar d'une plongée ne sont pas
+sérialisés dans la verticale.
+
+## 9. Contrat d'implémentation
+
+- La présentation consomme des snapshots ou réglages typés ; elle n'invente
+  aucune valeur de gameplay.
+- Une interaction UI émet une commande d'application ; elle ne mute ni la
+  plongée ni la campagne directement.
+- Le menu pause contrôle la progression par un cas d'usage explicite, pas en
+  cachant simplement la scène.
+- Les réglages sont possédés par un service unique et sauvegardés séparément de
+  la campagne.
+- Les illustrations et icônes deviennent des assets locaux avec licence connue.
+- Aucun HTML, CDN, script distant ou image distante de `Design-Proposal/` ne
+  devient une dépendance du jeu.
+- La présentation est vérifiée à 1920 × 1080, 1280 × 720 et à sa plus petite
+  taille réelle dans le cockpit.
+
+## 10. Décisions encore ouvertes
+
+Avant l'implémentation complète du flux de sortie, préciser dans le cadrage de
+sauvegarde si `Retour au menu principal` et `Quitter le jeu` pendant une plongée
+appliquent immédiatement les conséquences d'un abandon ou enregistrent un état
+de plongée active à résoudre au prochain chargement. Dans les deux cas, ces
+actions ne permettent pas d'annuler gratuitement une perte déjà engagée.
+
+Le choix final des polices et le niveau de texture décorative seront validés sur
+le renderer de production. Ils ne modifient pas les règles de lisibilité et de
+navigation de cette baseline.