System Requirements Document for sant-s-curit

1. Introduction

sant-s-curit est un jeu de formation destiné aux apprenants en santé, sécurité et manutention au travail. Le produit a pour intention de faire apprendre les bonnes pratiques de santé, de sécurité et de manutention au travail par le jeu : l'apprenant démarre une session, traite des situations et des questions de prévention, reçoit un retour pédagogique immédiat, et sa progression est conservée au fil de ses sessions. Un responsable de formation / prévention suit la progression des apprenants et vérifie la couverture des contenus de prévention.

Le public visé est celui des travailleurs concernés par les gestes et les risques du terrain — manutention de charges, chutes, produits chimiques, circulation d'engins — ainsi que la personne chargée de la formation et de la prévention qui doit faire monter son équipe en compétence et en rendre compte.

Le produit est un jeu pédagogique à contenu normatif : il doit être crédible devant un CHSCT et assez vivant pour qu'on y rejoue. La lisibilité et le sérieux priment sur le divertissement.

2. System Overview

sant-s-curit est une application web à interface personnalisée, avec identité applicative propre et backend partagé. Les acteurs humains sont l'Apprenant en santé, sécurité et manutention au travail et le Responsable de formation / prévention. L'application possède son propre mécanisme d'identité : première inscription, puis vérification de l'identité lors des sessions ultérieures, avec attribution d'un rôle (apprenant ou responsable de formation / prévention) qui différencie l'accès au jeu, à la progression et au suivi.

Le comportement accepté couvre : la présentation publique du jeu et de son objectif de formation ; la création de compte et la connexion ; le jeu lui-même (démarrage d'une partie, traitement de situations et de questions, retour pédagogique) ; la progression durable de l'apprenant ; et le suivi de la progression des apprenants par le responsable, avec vérification de la couverture des contenus de prévention.

Exclusions et périmètres : le produit ne couvre pas la gestion administrative de la formation (planification de sessions, gestion documentaire réglementaire, édition de contenu normatif par l'utilisateur), ni la diffusion vers des systèmes externes de l'employeur. Aucune intégration à un fournisseur d'identité externe n'est retenue : l'identité est applicative.

2a. Product Interpretation and Delivery Boundary

Le produit est livré comme une application web de première partie : l'application possède à la fois l'interface et l'état durable (comptes, progression, suivi). L'accès public se limite à la présentation du jeu et aux parcours d'identité (inscription, connexion). Le jeu, la progression de l'apprenant et le suivi du responsable sont des espaces protégés, accessibles après établissement de l'identité, et différenciés par le rôle attribué.

Le périmètre courant est celui décrit ci-dessus. Aucune fonctionnalité future n'est engagée dans cette version : tout élément non listé ici est hors périmètre courant.

2c. Page Content and Component Coverage

Landing

• Information / état : présentation anonyme du jeu, de son public apprenant et de son objectif de formation en santé, sécurité et manutention au travail. Affiche le titre-affiche « SANTÉ SÉCURITÉ MANUTENTION », une ligne de corps expliquant l'objectif, les trois familles de risque illustrées (charge lourde, chute de hauteur, circulation d'engin) et le score de conformité de l'équipe en chiffres tabulaires.
• Actions principales : « Commencer une session » (rectangle noir plein, texte blanc capitales, à cheval sur la jointure texte / bloc rouge) menant à l'inscription ; lien secondaire vers la connexion pour un utilisateur déjà inscrit.
• Actions de support : navigation vers Login et Sign Up.
• Entités du domaine : aucune donnée personnelle ; contenus de présentation du jeu et familles de risque.
• Responsabilités des composants : héros-affiche (titre grotesque 900 flush-left sur 6 colonnes, bloc rouge signal plein de 5 colonnes avec pictogrammes en réserve blanche), bande jaune pleine largeur portant le score de conformité, bandeau noir de navigation en haut.
• États : chargement — squelette de la grille (filets et blocs) sans texte factice ; vide — sans objet (contenu statique) ; succès — affichage complet du héros et des pictogrammes ; erreur — si le score de conformité n'est pas disponible, la bande jaune affiche un tiret tabulaire au lieu d'une valeur ; récupération — rechargement de la page.

Login

• Information / état : formulaire de vérification d'identité pour revenir à la progression ou au suivi protégés. Champs : identifiant (courriel) et mot de passe. Rappel du rôle associé au compte après vérification.
• Actions principales : se connecter ; accéder à l'inscription si l'on n'a pas encore de compte.
• Actions de support : afficher/masquer le mot de passe ; revenir à la Landing.
• Entités du domaine : compte utilisateur, rôle (apprenant ou responsable de formation / prévention), session.
• Responsabilités des composants : formulaire en liste label/valeur alignée sur la grille, filets de 1px entre les rangées, bouton noir plein capitales ; messages d'erreur en aplat rouge signal.
• États : chargement — bouton désactivé avec libellé de traitement ; vide — champs vides au premier affichage ; succès — redirection vers Jeu (apprenant) ou Suivi formation (responsable) ; erreur — identifiants invalides : aplat rouge signal avec message explicite, le formulaire reste rempli sauf le mot de passe ; récupération — nouvelle tentative immédiate, ou passage à Sign Up.

Sign Up

• Information / état : parcours de première utilisation pour les acteurs dont l'accès n'est pas établi par un fournisseur ou une administration externe. Champs : nom affiché, courriel, mot de passe, choix du rôle (apprenant ou responsable de formation / prévention).
• Actions principales : créer le compte et le rôle ; basculer vers Login si un compte existe déjà.
• Actions de support : revenir à la Landing.
• Entités du domaine : compte utilisateur, rôle, session.
• Responsabilités des composants : formulaire en liste label/valeur, sélection de rôle en rangées pleine largeur avec carré noir A/B, validation en aplat vert signal.
• États : chargement — bouton désactivé avec libellé de traitement ; vide — formulaire vierge ; succès — compte créé, rôle attribué, redirection vers Jeu (apprenant) ou Suivi formation (responsable) ; erreur — courriel déjà utilisé ou champ invalide : aplat rouge signal, champ fautif signalé, saisie conservée ; récupération — correction et nouvelle soumission, ou passage à Login.

Jeu

• Information / état : session de jeu de l'apprenant. Affiche le bandeau noir de navigation (nom du module, numéro de section en capitales, position d'avancement en chiffres tabulaires), la famille de risque de la question courante (liseré de 8px en tête : bleu #1B4FA0 manutention/gestes, jaune #F2C200 chute, rouge #E2231A chimique, vert #1F7A3D circulation), l'énoncé en pleine largeur sur 8 colonnes, les options en liste label/valeur (carré noir A/B/C/D à gauche, texte à droite, filet de 1px entre les rangées), et la barre de progression noire segmentée en 8 crans sur une règle de 2px.
• Actions principales : démarrer une partie ; sélectionner une réponse ; valider ; passer à la question suivante ; terminer la session.
• Actions de support : quitter la session en cours (la progression déjà validée est conservée).
• Entités du domaine : session de jeu, question, famille de risque, option de réponse, réponse donnée, retour pédagogique, score.
• Responsabilités des composants : bloc question pleine largeur, rangées d'options devenant un aplat rouge (mauvaise réponse) ou vert (bonne réponse) à la validation, compteur de score en chiffres tabulaires sans easing, barre de progression segmentée.
• États : chargement — grille et filets affichés, énoncé en attente ; vide — aucune session en cours : proposition de démarrer une partie ; succès — bonne réponse : rangée en aplat vert signal, retour pédagogique affiché, passage à la question suivante ; erreur — mauvaise réponse : rangée en aplat rouge signal, carré rouge clignotant une seule fois, retour pédagogique expliquant le geste correct ; récupération — la session reprend à la question suivante sans perdre le score acquis ; en cas d'interruption, la session peut être reprise depuis Progression.

Progression

• Information / état : progression durable de l'apprenant au fil de ses sessions. Affiche le score cumulé en chiffres tabulaires, la barre de progression noire segmentée en 8 crans, la répartition par famille de risque (manutention, chute, chimique, circulation) et l'historique des sessions terminées.
• Actions principales : reprendre une session interrompue ; démarrer une nouvelle session.
• Actions de support : consulter le détail d'une session passée.
• Entités du domaine : progression, session de jeu, score, famille de risque, date de session.
• Responsabilités des composants : tableau à filets réels (pas de cartes), pastilles de couleur par famille de risque, compteurs tabulaires.
• États : chargement — filets du tableau affichés, valeurs en attente ; vide — aucune session terminée : invitation à démarrer une première partie ; succès — tableau rempli, scores et répartition affichés ; erreur — progression indisponible : message explicite et possibilité de recharger ; récupération — rechargement, ou démarrage d'une nouvelle session dont le résultat sera enregistré.

Suivi formation

• Information / état : suivi par le responsable de formation / prévention de la progression des apprenants et de la couverture des contenus de prévention. Affiche un tableau à filets réels des apprenants (nom, progression, score, dernière session) et la couverture des familles de risque avec pastilles de couleur.
• Actions principales : consulter la progression d'un apprenant ; vérifier la couverture des contenus de prévention par famille de risque.
• Actions de support : filtrer ou trier le tableau par apprenant ou par famille de risque.
• Entités du domaine : apprenant, progression, score, famille de risque, couverture de contenu, date de dernière session.
• Responsabilités des composants : tableau à filets, pastilles de couleur par famille de risque, compteurs tabulaires, bandeau noir de navigation.
• États : chargement — filets du tableau affichés, valeurs en attente ; vide — aucun apprenant rattaché : message explicite ; succès — tableau rempli, couverture affichée ; erreur — suivi indisponible : message explicite et possibilité de recharger ; récupération — rechargement de la vue.

3. Functional Requirements

FR-1 — Présentation publique du jeu (explicit) As a visiteur (Apprenant ou Responsable de formation / prévention), I should voir sur la Landing une présentation anonyme du jeu, de son public apprenant et de son objectif de formation en santé, sécurité et manutention au travail, afin de comprendre ce que le jeu permet d'apprendre avant de m'inscrire.

• Déclencheur : ouverture de la Landing sans identité établie.
• Résultat observable : titre-affiche, ligne d'objectif, trois familles de risque illustrées et appel à l'action « Commencer une session ».
• Échec / récupération : si le score de conformité de l'équipe n'est pas disponible, la bande jaune affiche un tiret tabulaire ; le reste de la page reste lisible.
• Continuation : l'utilisateur passe à Sign Up ou à Login.

FR-2 — Première inscription (required_inference) As a Apprenant ou Responsable de formation / prévention, I should créer mon compte sur Sign Up avant d'accéder aux fonctions protégées, afin d'établir mon identité et mon rôle dans le jeu.

• Déclencheur : première utilisation, depuis la Landing ou depuis Login.
• Entrées : nom affiché, courriel, mot de passe, choix du rôle.
• Résultat observable : compte créé, rôle attribué, redirection vers Jeu (apprenant) ou Suivi formation (responsable).
• Échec / récupération : courriel déjà utilisé ou champ invalide → aplat rouge signal, champ fautif signalé, saisie conservée, nouvelle soumission possible.
• Continuation : l'utilisateur entre dans son espace protégé.

FR-3 — Vérification de l'identité aux sessions ultérieures (required_inference) As a Apprenant ou Responsable de formation / prévention, I should me connecter sur Login lors des sessions ultérieures, afin de retrouver ma progression ou mon suivi.

• Déclencheur : retour sur le produit avec un compte existant.
• Entrées : identifiant (courriel) et mot de passe.
• Résultat observable : session ouverte, redirection vers Jeu (apprenant) ou Suivi formation (responsable).
• Échec / récupération : identifiants invalides → aplat rouge signal avec message explicite, formulaire conservé sauf le mot de passe, nouvelle tentative immédiate ou passage à Sign Up.
• Continuation : l'utilisateur reprend son travail protégé.

FR-4 — Attribution et différenciation des rôles (required_inference) As a système, I should attribuer à chaque compte un rôle d'apprenant ou de responsable de formation / prévention, afin de différencier les accès au jeu, à la progression et au suivi.

• Déclencheur : création de compte (FR-2) ou vérification d'identité (FR-3).
• Résultat observable : l'apprenant accède à Jeu et Progression ; le responsable accède à Suivi formation.
• Échec / récupération : rôle non déterminé → l'accès aux espaces protégés reste bloqué jusqu'à résolution.
• Continuation : l'utilisateur est dirigé vers l'espace correspondant à son rôle.

FR-5 — Démarrer une partie (explicit) As a Apprenant en santé, sécurité et manutention au travail, I should démarrer une partie depuis Jeu, afin de m'entraîner sur les situations et questions de prévention.

• Déclencheur : action de démarrage d'une session.
• Résultat observable : première question affichée avec sa famille de risque, sa barre de progression segmentée en 8 crans et son compteur de score à zéro.
• Échec / récupération : si la session ne peut pas démarrer, un message explicite s'affiche et le démarrage peut être retenté.
• Continuation : l'apprenant traite la question courante.

FR-6 — Traiter les situations et questions (explicit) As a Apprenant en santé, sécurité et manutention au travail, I should lire chaque situation ou question et sélectionner une réponse parmi les options proposées, afin d'apprendre les bonnes pratiques de santé, de sécurité et de manutention au travail.

• Déclencheur : affichage de la question courante.
• Entrées : sélection d'une option en liste label/valeur (A/B/C/D).
• Résultat observable : la rangée sélectionnée devient un aplat rouge (mauvaise réponse) ou vert (bonne réponse) à la validation ; le score s'incrémente en chiffres tabulaires sans easing.
• Échec / récupération : mauvaise réponse → carré rouge clignotant une seule fois, retour pédagogique expliquant le geste correct, passage à la question suivante sans perte du score acquis.
• Continuation : l'apprenant passe à la question suivante.

FR-7 — Recevoir un retour pédagogique (explicit) As a Apprenant en santé, sécurité et manutention au travail, I should recevoir un retour pédagogique après chaque réponse, afin de comprendre le geste correct et de mémoriser la bonne pratique.

• Déclencheur : validation d'une réponse.
• Résultat observable : retour affiché, rattaché à la famille de risque de la question.
• Échec / récupération : si le retour n'est pas disponible, la réponse reste enregistrée et l'apprenant peut poursuivre.
• Continuation : l'apprenant poursuit la session.

FR-8 — Terminer une session de jeu (explicit) As a Apprenant en santé, sécurité et manutention au travail, I should terminer une session de jeu, afin de clôturer ma partie et d'enregistrer mon résultat.

• Déclencheur : dernière question traitée ou action de fin de session.
• Résultat observable : score final en chiffres tabulaires, session enregistrée dans la progression.
• Échec / récupération : si l'enregistrement échoue, le score final reste affiché et la session peut être reprise depuis Progression.
• Continuation : l'apprenant consulte sa progression ou démarre une nouvelle partie.

FR-9 — Consulter sa progression durable (explicit) As a Apprenant en santé, sécurité et manutention au travail, I should consulter sur Progression ma progression dans le jeu au fil de mes sessions, afin de voir mes acquis et ce qu'il me reste à travailler.

• Déclencheur : ouverture de Progression.
• Résultat observable : score cumulé, barre de progression segmentée en 8 crans, répartition par famille de risque et historique des sessions terminées.
• Échec / récupération : progression indisponible → message explicite et rechargement possible ; une nouvelle session reste jouable et son résultat sera enregistré.
• Continuation : l'apprenant reprend une session interrompue ou en démarre une nouvelle.

FR-10 — Reprendre une session interrompue (required_inference) As a Apprenant en santé, sécurité et manutention au travail, I should reprendre une session interrompue depuis Progression, afin de ne pas perdre le travail déjà accompli.

• Déclencheur : session laissée en cours.
• Résultat observable : la session reprend à la question suivante, score acquis conservé.
• Échec / récupération : si la reprise échoue, une nouvelle session peut être démarrée.
• Continuation : l'apprenant poursuit et termine sa session.

FR-11 — Suivre la progression des apprenants (explicit) As a Responsable de formation / prévention, I should suivre sur Suivi formation la progression des apprenants, afin de savoir où en est mon équipe dans sa formation.

• Déclencheur : ouverture de Suivi formation.
• Résultat observable : tableau à filets réels des apprenants avec progression, score et date de dernière session, en chiffres tabulaires.
• Échec / récupération : suivi indisponible → message explicite et rechargement possible.
• Continuation : le responsable consulte le détail d'un apprenant ou vérifie la couverture des contenus.

FR-12 — Vérifier la couverture des contenus de prévention (explicit) As a Responsable de formation / prévention, I should vérifier sur Suivi formation la couverture des contenus de prévention par famille de risque, afin de m'assurer que les situations à risque sont bien traitées.

• Déclencheur : consultation de la vue de couverture.
• Résultat observable : couverture affichée par famille de risque (manutention, chute, chimique, circulation) avec pastilles de couleur.
• Échec / récupération : couverture indisponible → message explicite et rechargement possible.
• Continuation : le responsable identifie les familles à renforcer et agit sur la formation.

4. User Personas

Apprenant en santé, sécurité et manutention au travail

Contexte produit : personne qui doit se former aux règles de santé, de sécurité et de manutention au travail. Elle arrive sur le jeu sans identité établie, s'inscrit, puis revient au fil de ses sessions.

Objectif principal : apprendre et progresser, avec pour résultat attendu l'acquisition des bonnes pratiques de prévention et de manutention.

Responsabilités acceptées : démarrer une partie ; lire chaque situation ou question et sélectionner une réponse ; recevoir et comprendre le retour pédagogique ; terminer une session ; consulter sa progression durable ; reprendre une session interrompue.

Entrées et décisions : choix d'une option de réponse parmi les propositions (A/B/C/D) ; décision de poursuivre, de reprendre ou de démarrer une nouvelle session.

Interactions avec les autres participants : l'apprenant produit la progression que le Responsable de formation / prévention consulte dans Suivi formation. Il ne voit pas le suivi du responsable ; son espace est Jeu et Progression.

Succès observable : score cumulé et répartition par famille de risque visibles dans Progression ; sessions terminées enregistrées ; bonnes pratiques retenues.

Ce qui distingue ce rôle : son travail est l'acte d'apprentissage lui-même — répondre, se tromper, comprendre le geste correct et recommencer. Il ne suit personne et ne rend compte à personne dans le produit.

Responsable de formation / prévention

Contexte produit : personne qui doit faire monter en compétence les travailleurs sur la santé, la sécurité et la manutention. Elle s'inscrit avec le rôle de responsable et accède à Suivi formation.

Objectif principal : obtenir une équipe formée et conforme aux exigences de prévention.

Responsabilités acceptées : suivre la progression des apprenants ; vérifier que les contenus du jeu couvrent les situations à risque ; consulter le détail d'un apprenant ; identifier les familles de risque à renforcer.

Entrées et décisions : lecture des progressions, des scores et des dates de dernière session ; lecture de la couverture par famille de risque ; décision sur les contenus à renforcer.

Interactions avec les autres participants : le responsable observe le résultat du travail des apprenants. Il ne joue pas les sessions à leur place et n'agit pas sur leur progression ; son espace est Suivi formation.

Succès observable : tableau de suivi rempli, couverture des familles de risque lisible d'un coup d'œil grâce aux pastilles de couleur.

Ce qui distingue ce rôle : son travail est la lecture d'ensemble et la décision de formation, pas l'acte de jouer. Il a besoin d'une lecture immédiate de la couverture des contenus, là où l'apprenant a besoin d'un retour immédiat sur sa propre réponse.

5. Core User Flows

Parcours A — Première utilisation et première partie (Apprenant)

1. L'apprenant ouvre la Landing sans identité établie. Il voit le titre-affiche « SANTÉ SÉCURITÉ MANUTENTION », la ligne d'objectif de formation, les trois familles de risque illustrées (charge lourde, chute de hauteur, circulation d'engin) et la bande jaune du score de conformité de l'équipe.
2. Il actionne « Commencer une session » (rectangle noir plein, texte blanc capitales) et arrive sur Sign Up.
3. Sur Sign Up, il saisit son nom affiché, son courriel et un mot de passe, puis choisit le rôle apprenant dans la liste label/valeur.
4. Il valide. Le compte est créé, le rôle est attribué, et il est redirigé vers Jeu.
5. Sur Jeu, il démarre une partie. La première question s'affiche avec son liseré de famille de risque, ses options en liste label/valeur (carré noir A/B/C/D) et sa barre de progression segmentée en 8 crans ; le compteur de score est à zéro.
6. Il sélectionne une réponse et valide. La rangée devient un aplat vert (bonne réponse) ou rouge (mauvaise réponse) ; en cas de mauvaise réponse, un carré rouge clignote une seule fois et le retour pédagogique explique le geste correct. Le score s'incrémente en chiffres tabulaires sans easing.
7. Il poursuit question après question. La barre de progression avance d'un cran par question.
8. Échec / récupération : s'il quitte avant la fin, la session reste en cours et le score acquis est conservé ; il pourra la reprendre depuis Progression.
9. Il termine la session. Le score final s'affiche en chiffres tabulaires et la session est enregistrée.
10. Continuation : il ouvre Progression pour voir son score cumulé, sa répartition par famille de risque et l'historique de ses sessions, puis démarre une nouvelle partie.

Parcours B — Retour sur le produit et reprise (Apprenant)

1. L'apprenant revient sur le produit et ouvre Login.
2. Il saisit son courriel et son mot de passe, puis valide.
3. Échec / récupération : si les identifiants sont invalides, un aplat rouge signal affiche un message explicite, le formulaire est conservé sauf le mot de passe ; il retente ou passe à Sign Up.
4. En cas de succès, il est redirigé vers Jeu (son rôle est apprenant).
5. Il ouvre Progression et constate son score cumulé, sa barre segmentée en 8 crans et sa répartition par famille de risque.
6. Échec / récupération : si la progression est indisponible, un message explicite s'affiche et il peut recharger ; une nouvelle session reste jouable et son résultat sera enregistré.
7. Continuation : il reprend une session interrompue — la session repart à la question suivante, score acquis conservé — ou démarre une nouvelle partie.

Parcours C — Suivi de la formation (Responsable de formation / prévention)

1. Le responsable ouvre Sign Up (première utilisation) ou Login (sessions ultérieures) et établit son identité avec le rôle responsable de formation / prévention.
2. Il est redirigé vers Suivi formation.
3. Il consulte le tableau à filets réels des apprenants : nom, progression, score, date de dernière session, en chiffres tabulaires.
4. Échec / récupération : si le suivi est indisponible, un message explicite s'affiche et il peut recharger la vue. Si aucun apprenant n'est rattaché, un message explicite le signale.
5. Il vérifie la couverture des contenus de prévention par famille de risque (manutention, chute, chimique, circulation), lisible grâce aux pastilles de couleur.
6. Il consulte le détail de la progression d'un apprenant pour situer son niveau.
7. Continuation : il identifie les familles de risque à renforcer et agit sur la formation de son équipe.

6. Visuals Colors and Theme

Direction créative : Josef Müller-Brockmann — rigueur géométrique suisse pour un jeu de sécurité qui doit être lu avant d'être joué. La langue du muse est la signalétique de sécurité : grille verrouillée, grotesque flush-left ragged-right, formes géométriques pures comme contenu, couleurs codées comme un plan de circulation.

Palette (mode clair) :

Proportions : ~70 % sol clair, 20 % noir / règles, 6 % rouge, 4 % jaune.

Typographie : titres Archivo, grotesque suisse à chasse large, poids 700–900, casse basse pour les titres éditoriaux et CAPITALES pour les étiquettes et micro-labels ; tracking serré (-0.02em) sur les gros titres, tracking +0.14em sur les labels en capitales. Titres toujours flush-left ragged-right, jamais centrés, jamais justifiés. Chiffres tabulaires obligatoires pour scores et pourcentages. Corps : Archivo.

Échelle : modulaire 1.25, 8 crans — 12 / 16 / 20 / 25 / 31 / 39 / 49 / 61 px. Titre héros clamp(34px, 7.2vw, 76px) (34 px sur mobile) ; titre de section clamp(22px, 3.4vw, 39px) ; label capitales 12 px tracking +0.14em ; corps 16–18 px, interligne 1.55, mesure max 68 caractères.

Langage de forme : géométrie pure et angles vifs — rectangles exacts, cercles parfaits, aucune ombre portée, aucun rayon supérieur à 2 px. Les formes informent : un carré rouge = risque, un cercle jaune cerclé de noir = consigne obligatoire, une barre noire = séparation de section. Filets de 1 px et 2 px comme ossature. Blocs de couleur posés à bords francs, alignés au module de 8 px.

Mise en page : grille modulaire 12 colonnes / base 8 px, visible par ses filets. Chaque page est une planche : bandeau noir fin en haut avec le nom du module et le numéro de section en capitales, contenu en colonnes asymétriques (5/7 ou 4/8), règle horizontale pleine largeur entre chaque bloc. Les questions de jeu s'affichent en pleine largeur sur 8 colonnes avec les options en liste alignée label/valeur (A/B/C/D en carré noir, texte à droite), jamais en cartes flottantes. Les tableaux de suivi sont de vrais tableaux à filets, pas des cards. Marges : 24 px mobile, 48 px tablette, 96 px desktop.

Imagerie : pas de photographie de stock souriante. Imagerie diagrammatique : pictogrammes géométriques au trait noir 2 px sur fond clair (silhouette portant une charge, flèche de circulation de chariot, pictogramme EPI, angle de levage), aplats codant la famille de risque, et une seule grande illustration géométrique par question — un plan vu de dessus d'une zone d'atelier en formes pleines. Silhouettes humaines schématiques, sans visage, jamais cartoon.

À éviter : Inter, Roboto, Arial, Helvetica, Poppins ou system-ui pour les titres comme pour le corps ; bleu primaire SaaS (#0057FF, #2563EB, #4F46E5) sur fond blanc ; cartes identiques à coins arrondis avec ombre portée et hover-lift ; dégradés, blobs, glassmorphism, néons ; illustrations cartoon souriantes ou photos de stock d'ouvriers en casque ; boutons pilule et rayons supérieurs à 2 px ; titres centrés avec sous-texte centré et bouton centré ; emojis et micro-animations rebondissantes.

Lisibilité : textes lisibles et contrôles restent entiers à 375 px, 768 px et 1280 px — titres, libellés, chiffres et contrôles restent entièrement dans le viewport et dans leur conteneur, en s'enroulant ou en s'adaptant (clamp(...) avec sa taille mobile), sans qu'aucun autre élément ne les recouvre. L'imagerie et la décoration peuvent être rognées ou déborder selon la direction, tant qu'elles ne couvrent aucun texte lisible ni contrôle.

7. Signature Design Concept

Héros-affiche suisse pour la Landing. Le premier écran est construit comme une affiche, pas comme un héros SaaS.

• Colonne gauche (6 colonnes) : titre en grotesque Archivo 900, clamp(34px, 7.2vw, 76px), flush-left, sur trois lignes serrées — « SANTÉ SÉCURITÉ MANUTENTION ». Sous le titre, une règle noire de 2 px, puis une ligne de corps de 18 px sur 4 colonnes expliquant l'objectif de formation.
• Colonne droite (5 colonnes) : bloc de couleur plein rouge signal #E2231A occupant toute la hauteur du héros, dans lequel sont découpés en réserve blanche trois pictogrammes de risque empilés — charge lourde, chute de hauteur, circulation d'engin — chacun étiqueté en capitales 12 px tracking +0.14em.
• CTA : « Commencer une session » — rectangle noir plein, texte blanc capitales, posé à cheval sur la jointure entre le texte et le bloc rouge, aligné sur la grille, jamais centré, jamais arrondi.
• Bande basse : bande jaune #F2C200 pleine largeur portant le score de conformité de l'équipe en chiffres tabulaires noirs.
• Contraintes : aucun dégradé, aucune forme floue, aucun bouton bleu. Le geste de découpe en réserve porte l'imagerie ; les textes lisibles et le CTA restent entiers à toutes les largeurs.

8. Interaction Model & Motion Direction

Interaction Model: Static (direction) Motion Tempo: restrained Hero Dimensionality: flat

Landing Hero Motion Brief

• Sujet focal : le bloc rouge signal #E2231A et ses trois pictogrammes de risque découpés en réserve blanche (charge lourde, chute de hauteur, circulation d'engin), contre le titre grotesque 900 flush-left.
• Thèse entrée → transformation → résultat : au chargement, les bandes de la grille se posent (filets puis blocs) ; le bloc rouge se pose à bords francs et les pictogrammes apparaissent en réserve ; le CTA noir se pose à cheval sur la jointure. Résultat : une affiche complète, lisible, prête à être lue avant d'être jouée. Aucune autre transformation n'est jouée.
• Vocabulaire de mouvement : balayages de bandes de couleur, remplissages linéaires de 240 ms, compteurs secs sans rebond, clignotement unique du carré rouge sur mauvaise réponse. Aucune particule, aucun easing élastique.
• Première image composée : grille 12 colonnes visible par ses filets, titre sur 6 colonnes à gauche, bloc rouge plein sur 5 colonnes à droite, CTA noir à cheval sur la jointure, bande jaune pleine largeur en bas avec le score de conformité en chiffres tabulaires.
• État réduit (prefers-reduced-motion) : remplissage instantané, aucun balayage, contenu identique — l'affiche est affichée d'emblée dans sa composition finale.

9. Non-Functional Requirements

• NFR-1 — Lisibilité en atelier et en salle de formation (explicit, direction créative) : contraste élevé, texte #111111 sur fonds clairs, aucune information portée par la seule couleur sans libellé ; les familles de risque sont toujours accompagnées de leur étiquette en capitales.
• NFR-2 — Chiffres tabulaires (explicit, direction créative) : scores, pourcentages et positions d'avancement sont rendus en chiffres tabulaires pour rester alignés et comparables.
• NFR-3 — Mouvement sobre (explicit, direction créative) : transitions géométriques et instantanées, remplissages de 240 ms linéaires, aucun rebond, aucune particule ; sous prefers-reduced-motion, remplissage instantané, aucun balayage, contenu identique.
• NFR-4 — Persistance de la progression (required_inference) : la progression de l'apprenant et les sessions terminées sont conservées durablement et rattachées au bon compte, afin que la reprise et le suivi restent exacts.
• NFR-5 — Cloisonnement des rôles (required_inference) : l'apprenant n'accède qu'à Jeu et Progression ; le responsable n'accède qu'à Suivi formation. Les espaces protégés ne sont pas accessibles sans identité établie.
• NFR-6 — Intégrité du suivi (required_inference) : le suivi affiché reflète les sessions réellement enregistrées ; aucune progression n'est attribuée à un apprenant autre que celui qui l'a produite.
• NFR-7 — Tenue des textes et contrôles (explicit, direction créative) : à 375 px, 768 px et 1280 px, les textes lisibles et les contrôles restent entièrement dans le viewport et leur conteneur ; l'imagerie et la décoration peuvent être rognées ou déborder.

10. Tech Stack

• Frontend : React (application web à interface personnalisée).
• Backend : Python / FastAPI, en un seul service partagé exposant les routes du jeu, de la progression et du suivi.
• Stockage : base de données relationnelle pour les comptes, les rôles, les sessions de jeu, les réponses et la progression.
• Conteneurisation : Docker / docker-compose pour l'exécution locale et le déploiement.
• Typographie : Archivo (titres et corps), chargée comme police du produit.

11. Assumptions and Constraints

• A-1 (assumption) : l'identité est applicative — inscription et connexion gérées par le produit, sans fournisseur d'identité externe.
• A-2 (assumption) : le contenu pédagogique (situations, questions, options, retours) est fourni avec le produit ; sa création ou son édition par l'utilisateur n'est pas une fonctionnalité courante.
• A-3 (assumption) : le rattachement d'un apprenant au périmètre de suivi d'un responsable est établi par le produit ; aucun mécanisme d'invitation ou de provisioning externe n'est retenu.
• C-1 (constraint) : les espaces Jeu, Progression et Suivi formation sont protégés ; la Landing, Login et Sign Up sont accessibles sans identité établie.
• C-2 (constraint) : le rôle attribué à l'inscription différencie l'accès aux espaces protégés.
• C-3 (constraint) : la direction créative est contraignante — palette, typographie Archivo, angles vifs (rayon ≤ 2 px), absence d'ombres portées, interdiction du bleu SaaS et des cartes arrondies flottantes.
• C-4 (constraint) : aucune fonctionnalité future n'est engagée dans cette version.

12. Glossary

• Apprenant — personne qui se forme aux règles de santé, de sécurité et de manutention au travail et joue au jeu pour apprendre et progresser.
• Responsable de formation / prévention — personne qui fait monter en compétence les travailleurs et suit la progression des apprenants ainsi que la couverture des contenus de prévention.
• Session de jeu — partie jouée par un apprenant, composée d'une suite de questions et terminée par un score enregistré.
• Famille de risque — catégorie de situation à risque : manutention / gestes (bleu #1B4FA0), chute (jaune #F2C200), chimique (rouge #E2231A), circulation (vert #1F7A3D).
• Retour pédagogique — explication affichée après validation d'une réponse, indiquant le geste correct.
• Progression — état durable de l'apprenant : score cumulé, répartition par famille de risque, historique des sessions.
• Couverture des contenus — lecture, par famille de risque, des contenus de prévention effectivement traités, telle qu'affichée au responsable.
• Rôle — attribut du compte (apprenant ou responsable de formation / prévention) qui différencie l'accès aux espaces protégés.