Présentation & fonctionnalités

Les rôles et ce qu'ils peuvent faire

Rôle	Accès	Périmètre
Participant	Lien public sans authentification	Visualisation et interaction avec le plateau en temps réel : déplacement de cartes, post-its, curseurs collaboratifs, réactions emoji. Mains privées invisibles aux autres. Aucun contrôle des étapes ou lots.
Animateur	SSO depuis LeHub (token JWT signé)	Contrôle total du plateau : lancement/masquage des étapes, distribution et réinitialisation des lots, lock/unlock du plateau, forçage du suivi de vue de tous les participants, révélation progressive des cartes en mode pop-corn.

Parcours : un animateur lance et anime un atelier

1. Création d'un atelier dans le Hub (/membres/events/new/) avec format='en_ligne' (En ligne).
2. Sélection d'un modèle de plateau lors de la création (ex: « Fresque Systémique v1 »).
3. Le Hub crée automatiquement une Board (BD) et une BoardLotDistribution par lot du modèle.
4. Accès au plateau via le bouton « Animer » dans la fiche atelier Hub (/membres/events/[id]/) — lien SSO vers board.fresquesystemique.org/b/[token] avec token JWT (valide 24h).
5. Arrivée sur le plateau affichant toutes les étapes masquées (mode introductif).
6. Navigation par étapes (Introduction, Les grands systèmes, etc.) via les boutons du panel de gauche.
7. Pour chaque étape portant un lot de cartes (par ex. « Lot Actions ») :
   • Clic « Distribuer » : mélange aléatoire + répartition round-robin dans les mains privées de chaque participant. Chacun reçoit ~4-5 cartes.
   • Ou clic « Pop-corn » : le lot complet va dans la main de l'animateur. Les cartes s'auto-placent dans les cellules de la matrice de l'étape (si elle existe), puis restent verrouillées. L'animateur les révèle une à une au clic.
8. Les participants posent les cartes sur le plateau en drag-drop, manipulent les post-its, tracent des flèches de causalité, utilisent Ctrl+Z/Ctrl+Y pour leur historique personnel.
9. L'animateur voit tout en temps réel, peut lock le plateau pour une phase d'explication, puis unlock pour reprendre les manipulations.

Parcours : un participant collabore

1. Reçoit un lien public (sans authentification) : board.fresquesystemique.org/b/[token].
2. Navigation vers le lien, affichage du plateau avec son pseudo initial (généré aléatoirement, peut être changé via modal PseudoModal).
3. Voir le canvas infini du plateau avec les cartes déjà posées par d'autres et les étapes masquées.
4. Recevoir une visite guidée contextuelle (driver.js) au premier accès (rejouable via menu).
5. Attendre la distribution d'un lot par l'animateur → les cartes arrivent en bas dans sa « main privée » (pioche visible que par lui).
6. Drag-drop une carte du bas vers le plateau → elle apparaît à la position posée, visible de tous.
7. Clic sur une carte pour voir le recto/verso en plein écran (CardViewer) avec zoom molette/pinch.
8. Tracer des flèches entre les cartes (outil Flèche activé par l'animateur ou via toolbar) en cliquant sur un anchor point, puis sur un autre.
9. Créer des post-its libres (outil Post-it, redimensionnables, 5 couleurs, taille police variable).
10. Voir les curseurs des autres participants en temps réel (position souris) et les réactions emoji animées.
11. Suivre automatiquement la vue de l'animateur (forçage : au début et après un unlock) ou suivre un participant spécifique au clic sur son pseudo.
12. Undo/Redo personnel (Ctrl+Z/Ctrl+Y) sans impacter les autres.

LeBoard ne s'ouvre pas sous 1024 px

En dessous de 1024 pixels de large, le plateau affiche un message d'indisponibilité au lieu de se charger (MobileUnsupported, seuil dans src/lib/viewport-support.ts). Ce n'est pas un oubli : l'interface est calée sur une largeur de référence de 1660 px, et les panneaux latéraux, la main et le canvas Konva ne tiennent pas côte à côte en dessous. Le seuil laisse passer un iPad en paysage et écarte les téléphones comme les tablettes en portrait. Le support mobile est hors périmètre tant que l'interface n'est pas repensée pour ces largeurs.

À l'inverse, l'interface est normalisée d'une machine à l'autre (src/lib/ui-scale.ts) : deux écrans de même taille physique n'étalent pas le même nombre de pixels CSS (1440 sur un MacBook 13", 1920 sur un PC 13"), ce qui rendait l'interface un tiers plus grande sur l'un que sur l'autre. Le facteur, borné entre 0,85 et 1,2, s'applique à la fois à la taille de police racine et à l'échelle du canvas.

Fonctionnalités du plateau

Canvas & cartes

• Canvas infini — zoom molette/pinch de 25 % à 400 % du zoom de référence de la machine (et non d'une échelle absolue, pour que les bornes veuillent dire la même chose sur tous les écrans), pan au drag souris ou espace+molette.
• 283 cartes recto/verso — chacune est une image PNG/WebP, les métadonnées (titre, texte) sont en JSON (data/cards.json).
• Visualiseur plein écran — clic sur une carte → CardViewer avec zoom indépendant, boutons recto/verso, réinitialiser zoom.
• Flèches — tracer des liens entre cartes et post-its avec plusieurs couleurs (gris, rouge, bleu, vert, orange, noir) et direction (unidirectionnelle ou bidirectionnelle).
• Post-its — notes libres, redimensionnables (min 180 × 150), 5 couleurs (jaune, rose, bleu, vert, blanc), taille de police 12-16 px.

Étapes, matrices & lots

Un atelier est composé d'étapes (Introduction, Les grands systèmes, Le système A, etc.). Chaque étape peut porter une matrice — une grille de cellules (ex: 4 colonnes × 3 lignes) dans laquelle les cartes d'un lot s'aimantent au slot libre le plus proche.

• Deux modes de lancement lots :
  • Distribuer — mélange aléatoire + répartition round-robin dans la main privée de chaque participant.
  • Pop-corn — le lot complet va dans la main de l'animateur. Si l'étape a une matrice, chaque carte s'auto-place dans sa cellule dédiée (mapping configuré au Hub) et y reste verrouillée. L'animateur révèle progressivement.
• Lots de diapositives — un lot peut aussi être un diaporama (images + notes), présenté en plein écran avec navigation et pointeur partagé (SlideOverlay).
• Mains privées — chaque participant a sa pioche en bas d'écran, invisible des autres. Sa taille est réglable par un curseur à cinq crans (facteur 1 à 1,8, défaut 1,4), mémorisé par navigateur (src/lib/handCardSize.ts), dans la roue « Affichage » de la barre basse.
• Mode pop-corn en colonnes — le nombre de colonnes de la main s'adapte au facteur choisi (5 colonnes à 1,4 ; 4 à 1,6 ; 3 à 1,8).
• Émergences indésirables — un lot peut être marqué kind='emergence' : ses cartes s'ancrent à une carte de base déjà posée et la suivent en cas de déplacement.

Le feuillet « Régénération »

Depuis août 2026, le plateau porte une étape finale « Régénération » et un feuillet dédié (RegenerationSheet), ouvert par un bouton au centre bas, disponible seulement sur cette étape.

• Navigation en trois écrans : familles de pratiques → pratiques (une par carte, avec son titre réel) → exemples.
• Lecture en direct depuis la base, par GET /api/regeneration?workshopModelId=… : le contenu édité dans le Hub est visible sans redéploiement.
• Le contenu est scopé à la version de cartes du plateau, et le feuillet rouvre sur la dernière carte consultée.
• La carte s'affiche en grand via le même visualiseur que le plateau (CardViewer), avec ses exemples à côté.
• Le feuillet refuse de s'afficher sans ses titres plutôt que d'afficher des pratiques anonymes.

Les zones du système B

Le plateau porte quatre zones de travail pour le « système B », ajoutées entre juillet et août 2026 : les croyances, les questions clés, les règles du système B et son en-tête miroir. Techniquement, ce sont des lots ciblant une matrice, avec la particularité de pouvoir cibler une étape différente de la leur (resolveRowMatrixStageForLot) : c'est ce qui permet à une zone d'être remplie depuis l'étape où l'animateur se trouve, et non seulement depuis celle qui porte la matrice.

Présentation & collaboration

• Collaboration temps réel — tous les participants voient les modifications en direct via Socket.io (latence < 100ms typique).
• Curseurs collaboratifs — position de chaque participant visible sur le canvas, pseudo au survol.
• Réactions emoji — picker animé (emoji picker), réactions diffusées immédiatement à tous.
• Visite guidée — tour d'accueil contextuel (driver.js), différent pour l'animateur et les participants. Auto-démarré à la première visite, rejouable via menu.
• Multi-langue — FR / EN / ES (sélectionnable via menu, persisté en localStorage).

Mode animateur exclusif

• Lock/unlock du plateau — verrouille les interactions des participants (lecture seule), utile pour les phases d'explication.
• Forcer le suivi de vue — tous les participants suivent automatiquement la vue de l'animateur (zoom, pan).
• Pastille d'atelier — le header affiche le nom de l'atelier et la version du modèle de cartes ; les plateaux de formation portent la mention « Atelier test » (créés via /api/board-training du Hub).
• Undo/redo global (animateur) — historique séparé du reste ; les participants n'ont que leur undo personnel.

Minimap & navigation

• Minimap en bas-droite affichant la vue d'ensemble du plateau.
• Zones de matrices visualisées en pointillés.
• Clic sur la minimap pour pan rapide.