Feat/slide variants

.claude/skills/slide-variants/SKILL.md

@@ -0,0 +1,69 @@
+---
+name: slide-variants
+description: Use when building an Établi de l'IA séance deck from a storyboarded brief (D122) and Aurélien must compare 2–3 rendered treatments of a screen before choosing — « construis le deck », « montre-moi les variantes », « je prends B pour s1-e07 », « garde la A ». Authoring rules for the slides themselves stay in the `slides` skill.
+---
+
+# Variantes de slides (D122)
+
+The brief comes from app-formation-ai: `conception/generes/mandats/<m>/seances/seance-<n>/brief.md`,
+generated by `build_deck.py` from the storyboard (`/deck-storyboard`). Each screen carries a
+Rôle and a Traitement; a screen marked **« À explorer »** carries 2–3 pistes. Deck-app builds
+every piste as a live variant; Aurélien picks by looking at them on screen.
+
+## Layout
+
+- One deck per folder: `src/decks/<mandat-court>-s<n>/index.tsx`, served at `/<id>/`
+  (`npm run dev`, then `http://localhost:5173/fb-s1/`). The path, not a query: the presenter tab
+  keeps only `?presenter=1`.
+- One file per capsule, `cNN-<slug>.tsx`, `export default [ <Slide key="s1-eNN"> … ]` in brief
+  order; `index.tsx` spreads them into `<Deck>`. Capsule files can be built in parallel.
+- `theme.css` in the deck folder sets `:root` tokens from the mandat's `profil.md` (colors,
+  fonts); `ui.tsx` holds the deck's shared pieces (Kicker with the day's path, card styles, `n()`
+  for notes). Logos copied into `assets/`.
+
+## Variants
+
+```tsx
+<Slide key="s1-e07" notes={n('…')}>
+  <Variants id="s1-e07">
+    <Variant label="A typographique">…</Variant>
+    <Variant label="B animée">…</Variant>
+    <Variant label="C 3D">…</Variant>
+  </Variants>
+</Slide>
+```
+
+`V` on the live slide cycles; a badge shows `s1-e07 · B animée (2/3)`. The choice is kept per id
+in localStorage, shared with the presenter tab. Every variant renders the same content: D115
+holds — no fact, number or example the screen text lacks.
+
+## Choosing
+
+Aurélien says « s1-e07 : B ». Then, for that screen: delete the other `<Variant>`s, inline the
+winner's JSX directly in the `<Slide>`, drop the `<Variants>` wrapper. A deck is final when
+`grep -r "<Variants" src/decks/<id>` is empty. Report the choices back to the storyboard doc
+(one line per screen) so the next cohort's deck starts from them.
+
+## Slide-by-slide review (R)
+
+In dev, **R** or the dock button (speech bubble) opens a panel on the current slide: Décision
+`OK` / `Modifier` / `Retirer` + a note, saved by the Vite dev server (`/__review`, `vite.config.ts`)
+to `src/decks/<id>/revue.json`, keyed by screen id. On « applique la revue »:
+1. Read `revue.json`; handle every entry with `fait: false` and a decision other than `ok`
+   (`retirer` → delete the slide; `modifier` → do what the note says, D115 still holds).
+2. Set `fait: true` on each handled entry (keep the note), report one line per screen.
+3. Check the touched slides at 1280×720. A new note on a screen sets `fait` back to false.
+
+## Checks before handing over
+
+1. `npx tsc --noEmit -p .` clean.
+2. Every slide at 1280×720 (a Zoom share) in the browser: screenshot each, variants included
+   (press V). Fix clipped text, overflow, contrast, a lone left-anchored block (`slides` rule 3).
+3. Motion: nothing continuous, nothing faster than the engine's builds; 3D settles and stops.
+4. `grep -c "{/\* s1-e" ` equals the brief's screen count; no duration on screen.
+
+## Common mistakes
+
+- Variants that differ in content (one adds an example): they must differ in form only.
+- Inventing missing media or survey data instead of an empty, labelled frame.
+- Leaving `<Variants>` in a deck that ships.

.gitignore

@@ -1,5 +1,6 @@
-node_modules/
+node_modules
 dist/
 .vite/
 .DS_Store
 .env
+public/media/

index.html

@@ -1,15 +1,15 @@
 <!doctype html>
-<html lang="en">
+<html lang="fr">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <!-- Always replace the title + favicon emoji to match the deck topic -->
-    <title>Replace — your deck title</title>
+    <title>Séance 2 — Utiliser efficacement les modèles de langage</title>
     <link
       rel="icon"
-      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎞️</text></svg>"
+      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>💬</text></svg>"
     />
-    <meta name="theme-color" content="#05070a" />
+    <meta name="theme-color" content="#0f141b" />
   </head>
   <body>
     <div id="root"></div>