From 2893013093d416e5019b1d0d3d95c303c685c506 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?POL=20Micka=C3=ABl?= <polmickael3@gmail.com>
Date: Mon, 6 Apr 2026 05:43:38 +0200
Subject: [PATCH] docs: README, CLAUDE.md, changelog, plans de conception
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- README : fonctionnalités, installation, build, tests (302 + 20 E2E),
  couverture 94%, workflow mise à jour latest.yml, changelog v1.1.6
- CLAUDE.md : règles de collaboration, architecture, conventions
- Plans de conception : DDD, electron-updater, accouplement, toast

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .gitignore                                    |   12 +
 CHANGELOG.md                                  |   90 +
 CLAUDE.md                                     |  101 +-
 README.md                                     |  173 +-
 algorithmes.md                                |  316 ++-
 docs/fonctionnalites-par-ecran.md             |  335 +++
 .../plans/2026-03-27-ddd-architecture-plan.md | 2113 +++++++++++++++++
 .../plans/2026-04-04-accouplement-redesign.md |  920 +++++++
 .../2026-04-04-electron-updater-design.md     |   62 +
 ...6-04-04-electron-updater-implementation.md |  390 +++
 .../2026-04-05-toast-notifications-design.md  |   55 +
 .../2026-04-05-toast-notifications-plan.md    |  440 ++++
 12 files changed, 4911 insertions(+), 96 deletions(-)
 mode change 100644 => 100755 .gitignore
 create mode 100644 CHANGELOG.md
 mode change 100644 => 100755 README.md
 create mode 100644 docs/fonctionnalites-par-ecran.md
 create mode 100644 docs/plans/2026-03-27-ddd-architecture-plan.md
 create mode 100644 docs/plans/2026-04-04-accouplement-redesign.md
 create mode 100644 docs/plans/2026-04-04-electron-updater-design.md
 create mode 100644 docs/plans/2026-04-04-electron-updater-implementation.md
 create mode 100644 docs/plans/2026-04-05-toast-notifications-design.md
 create mode 100644 docs/plans/2026-04-05-toast-notifications-plan.md

diff --git a/.gitignore b/.gitignore
old mode 100644
new mode 100755
index ec523d1..3a6ab0c
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,17 @@
 node_modules/
 dist/
+dist-vite/
+dist-electron/
+dist-ts/
 *.log
+*.bak
+plans-dragodinde-*.json
 .DS_Store
 Thumbs.db
+# Playwright E2E
+.e2e-userdata/
+.e2e-userdata-persistence/
+test-results/
+playwright-report/
+# Coverage
+coverage/
diff --git a/CHANGELOG.md b/CHANGELOG.md
new file mode 100644
index 0000000..a252473
--- /dev/null
+++ b/CHANGELOG.md
@@ -0,0 +1,90 @@
+# Changelog
+
+## v1.1.6
+
+### Mise à jour automatique
+
+- **Migration electron-updater** : remplacement du système custom (download HTTP + script batch) par `electron-updater` (generic provider)
+  - Vérification sha512 automatique des mises à jour
+  - Installation NSIS native (plus de script batch hack)
+  - Restart automatique après installation
+  - Code simplifié (~60 lignes vs ~200)
+  - Compatible Gitea : découverte via API + `latest.yml` uploadé en asset de release
+  - Nouveau workflow de release : uploader le `.exe` ET `latest.yml` sur Gitea
+
+### Architecture
+
+- Migration complète vers une architecture DDD hexagonale (Vite + TypeScript)
+  - Couche **domain** : entités, value objects, services purs, ports
+  - Couche **application** : CQRS (CommandBus / QueryBus), handlers
+  - Couche **infrastructure** : LocalStorage, Electron notifications, WebAudio alarm
+  - Couche **presentation** : composants, helpers, UIState
+- Suppression du monolithe legacy, Vite est désormais le seul build
+- Setup Vitest avec alias de chemins (`@domain`, `@application`, etc.)
+
+### Nouvelles fonctionnalités
+
+- **Timer** : session robuste (pause/reprise fiable), alarme unique, ETA niveau 200
+- **Accouplement** : images des dragodindes (66 races en base64), barre de recherche par nom, filtres par génération (AND logique)
+- **Réapprovisionnement** : barre de recherche, sauvegarde de workflow depuis les résultats de calcul
+- **Inventaire** : barre de recherche, simulation proportionnelle multi-générations, bouton sauvegarder le workflow
+- **Workflows** : filtre par génération, barre de recherche sur les noms
+- **Mises à jour en temps réel** : barres de progression du workflow, compteur DD en stock de l'inventaire — se mettent à jour pendant la frappe
+
+### Corrections de bugs
+
+- **Recette Ebène** : les parents étaient inversés (Amande et Rousse → corrigé en Amande et Dorée + Dorée et Rousse)
+- **Simulation inventaire** : l'algorithme glouton épuisait tout le stock pour le premier croisement. Remplacé par une allocation proportionnelle dynamique (chaque parent est divisé équitablement entre les croisements qui l'utilisent)
+- **Dirty flag** sur tous les écrans (accouplement, réappro, inventaire, workflows) : le rAF loop à 60fps reconstruisait le DOM à chaque frame, détruisant les event listeners et empêchant les clics/inputs de fonctionner
+- **Persistance inventaire** : `update-settings` ne gérait pas le champ `inventaire` — le stock était perdu à chaque changement d'écran
+- **Chargement inventaire** : `get-inventaire` retournait un résultat de simulation au lieu du stock brut — l'écran se chargeait avec des données corrompues
+- **Comportement focus/blur des inputs** : uniformisé sur tous les écrans — focus vide le champ, blur sans valeur restaure l'ancienne, blur avec valeur applique la nouvelle
+- **ReapproView** : constructeur corrigé (commandBus manquant), bouton save-workflow branché sur la commande
+- **CSP** : ajout de `img-src 'self' data:` pour les images base64 des dragodindes
+- **Inventaire** : import `RACES_DATA` manquant + type `CalcCrossing` → `SimulationCrossing` — l'écran ne s'affichait plus
+- **Baffeur/Caresseur** : exclusion mutuelle (activer l'un désactive l'autre), bouton opposé grisé dans l'UI, contrainte de signe sur la cible sérénité (négatif pour baffeur, positif pour caresseur) — corrige le timer qui affichait "terminé" avec des cibles positives + baffeur
+- **Paramètres** : écran refait à l'identique du monolithe (boutons compacts avec emojis, modal ntfy avec QR codes et génération automatique du topic)
+- **Sons d'alarme** : fréquences et types d'oscillateurs corrigés pour correspondre au monolithe (arpège 440/554/659/880, fanfare triangle 6 notes, cloche 440/880/1320/1760, pulsation 5 pulses)
+- **Bouton Test son** : ne fonctionnait pas (passait par IPC sans écouteur) — joue maintenant directement via WebAudio
+- **CSP** : ajout de `img-src https://api.qrserver.com` pour les QR codes ntfy
+
+### Tests
+
+- Tests unitaires pour `StockSimulator` (simulation proportionnelle : 13 cas)
+- Tests unitaires pour `SaveWorkflow` et `UpdateSettings` avec inventaire
+- Tests de régression pour la simulation inventaire (scénario du monolithe)
+- Test de la recette Ebène corrigée
+- Mise à jour des tests `GetInventaire` (stock brut au lieu de résultat calculé)
+
+### Refonte graphique "Obsidienne" (MD3)
+
+- **Design system Obsidienne** : glassmorphism, tokens Material Design 3 (primary, secondary, surface, outline…), polices Manrope/Inter/Plus Jakarta Sans
+- **Nouveau fichier `obsidienne.css`** (~2100 lignes) : design MD3 pour tous les composants
+- **Migration emojis → Material Symbols Outlined** : toutes les icônes (stats, navigation, actions)
+- **Variables CSS MD3** : 37 tokens ajoutés dans `variables.css` (`--md-primary`, `--md-surface-container`, etc.)
+- **Sidebar** : refonte complète avec logo Obsidienne, sections organisées (Principal, Enclos, Outils, Paramètres), icônes Material Symbols, pastille de statut timer, version dans le footer — ouvert par défaut
+- **App Shell** : nouveau layout `app-shell` (sidebar + main-area), header avec hamburger, suppression de l'overlay sidebar
+- **Dashboard** : grille KPI (bébés, DD actives, couples, taux de réussite, races), bouton reset stats intégré, aperçu enclos
+- **EnclosView** : barres de jauge visuelles avec gradient par tier, bouton timer Material (DÉMARRER/PAUSE/REPRENDRE), zone "Alarme dans" réorganisée, bouton reset timer ajouté
+- **DragodindeCard** : stats avec icônes Material, jauge XP restructurée avec niveau + % + ETA
+- **Accouplement** : refonte de wizard 3 étapes → layout single-page (Parent 1 | Coeur+inputs | Parent 2 + grille de races en dessous), glassmorphism, chips génération pill, preview du bébé au centre
+- **UpdateBanner** : aligné sur le nouveau design MD3
+- **Drag & drop accouplement** : les cartes de race sont glissables vers les zones Parent 1 / Parent 2, avec feedback visuel (halo violet), vérification de compatibilité partenaire au drop
+- **Numérotation smart des enclos** : la création comble les trous (supprimer Enclos 2 puis créer → "Enclos 2" au lieu de "Enclos N+1")
+- **Icône Windows native** : migration `icon.png` → `icon.ico` pour la fenêtre et la tray
+- **10 tests de régression `level-target-timer`** : vérifient que `levelTarget` affecte correctement le countdown mangeoire, `enclosGlobalState`, `calcLevelEtaLive`, et le flag `done`
+- **Auto-scroll drag & drop** : le conteneur remonte automatiquement quand on drag une race vers le haut de l'écran
+- **Correction scroll petit écran** : compensation du zoom CSS pour que le scroll atteigne le bas de la grille
+- Retrait des labels "MÂLE REQUIS" / "FEMELLE REQUISE" des panneaux parent
+
+## v1.1.5
+
+- Ajout de nouvelles features.
+
+## v1.1.4
+
+- Ajout de nouvelles features et correction de bugs.
+
+## v1.1.3
+
+- Correctif de bug mineur + features.
diff --git a/CLAUDE.md b/CLAUDE.md
index 341f479..50ba9ec 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -2,37 +2,81 @@
 
 This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
 
+## Règles de collaboration
+
+- **Toujours répondre et écrire en français**
+- **Ne jamais modifier les fichiers de tests sans le signaler explicitement** à l'utilisateur avant de le faire
+- **Toujours écrire des tests** (unitaires + fonctionnels/régression) lors de toute correction de bug ou ajout de feature — les tests font partie de la livraison, pas une étape optionnelle
+- **Toujours mettre à jour `algorithmes.md`** quand un algorithme ou une formule de calcul change
+- **Ne jamais utiliser de taux fixe pour les jauges** — toujours utiliser `gainedIn` / `timeToGain` avec traversée des tiers (erreur historique du monolithe)
+- **Signaler explicitement** tout changement qui touche aux snapshots du timer (`snapGauges`, `snapStats`, `gaugeRecharges`) car cela peut affecter tous les calculs en cours de session
+- **Les tests ne tournent pas en WSL** — toujours rappeler à l'utilisateur de lancer `npm test` depuis un terminal Windows
+
 ## Project Overview
 
-Minuteur Dragodinde is a Windows desktop app (Electron) for managing Dragodinde breeding timers in Dofus 3. French-language UI.
+Minuteur Dragodinde is a Windows desktop app (Electron + Vite + TypeScript) for managing Dragodinde breeding timers in Dofus 3. French-language UI.
 
 ## Commands
 
-- **Dev**: `npm start` (runs `electron .`)
-- **Build**: `npm run build` (produces NSIS installer in `dist/`)
+- **Dev**: `npm start` (runs Vite dev server + Electron via `vite-plugin-electron`)
+- **Build**: `npm run build` (Vite build + electron-builder → NSIS installer in `dist/`)
+- **Test**: `npm test` (Vitest, run from Windows — native bindings incompatible with WSL)
+- **Test watch**: `npm run test:watch`
 - **Build scripts**: `build.bat` (auto-elevates to admin) or `build.ps1` for Windows
 
-No test framework or linter is configured.
-
 ## Architecture
 
-**Single-page Electron app with no bundler.** All source code lives in 4 files:
+**DDD hexagonal architecture** with Vite + TypeScript. Four layers:
 
-- `main.js` — Electron main process: window management, system tray, native notifications, ntfy push notifications (mobile), auto-update via Gitea Releases API, IPC handlers
-- `preload.js` — Context bridge exposing `window.electronAPI` (alarm, notifications, ntfy, version, update channels)
-- `src/index.html` — **Monolithic ~2200-line file** containing all HTML, CSS, and JS in one file. This is the entire renderer process.
-- `icon.png` — App icon (256x256)
+```
+src/
+  domain/          — Entities, value objects, domain services (pure TS, no deps)
+  application/     — Command handlers, query handlers, CommandBus/QueryBus
+  infrastructure/  — LocalStorageRepository, ElectronNotification, WebAudioAlarm
+  presentation/    — Components, helpers, UIState, entry point (index.ts)
+```
 
-### Renderer architecture (src/index.html)
+### Domain layer
 
-All application logic is in `<script>` tags inside index.html. Key concepts:
+- **`entities/Enclos.ts`** — Enclos entity with `TimerData` (includes `gaugeRecharges: Record<string, GaugeRecharge[]>`)
+- **`entities/Dragodinde.ts`** — DD entity with stats, targets, `levelTarget`, `sereniteTarget`
+- **`services/GaugeCalculator.ts`** — Core pure functions: `gainedIn`, `timeToGain`, `gaugeAfter`, `elapsed`, `computeGaugeState`
+- **`value-objects/GaugeType.ts`** — `GAUGE_DEFS`, `STAT_DEFS`, `DEFAULT_TARGETS` (mangeoire default = 100, but UI uses 200 when `levelTarget` is null)
+- **`value-objects/XpTable.ts`** — `xpForLevel`, `levelFromXp`
+- **`value-objects/Tier.ts`** — `tierNum`, `tierRate`
 
-- **State object `S`**: Central state with `enclos` array, `activeId`, settings. Persisted to `localStorage`.
-- **Enclos**: Up to 6 independent pens, each holding up to 10 Dragodindes (DDs). Enclos and DDs are drag-and-drop reorderable.
-- **Gauges**: 6 gauge types (baffeur, caresseur, foudroyeur, abreuvoir, dragofesse, mangeoire/XP) with tier-based progression rates (tiers 1-4 based on gauge level thresholds at 40k/70k/90k).
-- **Timer system**: Per-enclos timers with snapshot-based calculation. `elapsed()` computes time since start, `gaugeAfter()`/`gainedIn()`/`timeToGain()` compute gauge progression.
-- **Rendering**: Imperative DOM manipulation via `render()` function — no framework.
-- **Dashboard/Stats views**: Special `activeId` values (`'dashboard'`, `'stats'`) for overview and statistics pages.
+### Application layer
+
+Commands: `StartTimer`, `StopTimer`, `CompleteTimer`, `ResetTimer`, `CreateEnclos`, `DeleteEnclos`, `AddDragodinde`, `RemoveDragodinde`, `UpdateGauge` (toggle + level), `RechargeGauge`, `RegisterAccouplement`, `UpdateSettings`, `ResetStats`, `ReorderEnclos`, `UpdateWorkflow`, `DeleteWorkflow`, `EnclosActions` (clear, rename, reset-timer), `DragodindeActions` (rename, update-stat, seren-target, level-target, reorder)
+
+Queries: `GetDashboard`, `GetEnclosDetail`, `GetTimerState`, `GetBreedingOptions`, `GetReapproTree`, `GetInventaire`, `GetSettings`, `GetWorkflows`
+
+### Presentation layer
+
+- **`components/App.ts`** — Root component, animation loop (`requestAnimationFrame`), CommandBus/QueryBus wiring
+- **`components/EnclosView.ts`** — Main timer view: gauge inputs (with `input` listener for real-time updates), DD grid, "Alarme dans" display
+- **`components/DragodindeCard.ts`** — Per-DD card: stat pills, targets (all with `input` listeners for real-time preview)
+- **`helpers/gauge-live.ts`** — All live calculation helpers: `computeGaugeLive`, `enclosGaugeCurGl`, `enclosGlobalState`, `calcSerenEtaLive`, `calcLevelEtaLive`
+
+### Key data flows
+
+**Timer start** (fresh): snapshots `gaugeLevels` → `snapGauges`, DD stats → `snapStats`, clears `gaugeRecharges`
+**Timer resume** (from pause): accumulates `pausedMs += now - pausedAt`, preserves snapshots
+**Gauge recharge** (during timer): pushes `{ atSec, level }` to `gaugeRecharges[gid]`, updates `gaugeLevels[gid]`
+**Live display**: `requestAnimationFrame` loop → `enclosGlobalState(enc)` → per-DD `computeGaugeLive` → DOM updates
+
+### Timer calculation core — `computeGaugeState`
+
+The central calculation function. Handles:
+- Multiple gauge recharges during a session (segments between each recharge)
+- Freeze at absolute stat cap (sérénité ±5000, end/mat/amour 20000, niveau 200)
+- Returns `{ gained, curGl, effectiveEl }`
+
+**Pre-start preview**: `enclosGlobalState` computes even when timer not started (`started = false`), using current `gaugeLevels` as `startGl` and `el = 0`. "Alarme dans" updates in real-time as the user types gauge values and DD targets.
+
+**XP gauge (mangeoire)**: when the target is unreachable in a single gauge drain, countdown shows drain time instead of `∞`. Formula: `timeToGain(curGl, Math.min(xpRestante, curGl))` — consistent with "Vide en" display.
+
+**Default level target**: when `dd.levelTarget === null`, the XP gauge defaults to targeting level 200.
 
 ### IPC channels
 
@@ -47,9 +91,24 @@ Checks Gitea Releases API on startup (after 3s) and hourly. Downloads NSIS Setup
 
 When `!app.isPackaged`, userData is stored in `MinuteurDragodinde-DEV` (isolated from installed app) and a DEV badge is injected into the UI.
 
+## Tests
+
+```
+tests/
+  unit/domain/        — GaugeCalculator, Enclos, Dragodinde, XpTable, etc.
+  unit/application/   — commands.test.ts, queries.test.ts, CommandBus.test.ts
+  unit/infrastructure/
+  functional/         — breeding-workflow, enclos-management, timer-workflow
+  regression/         — gauge-tier-calculation, gauge-recharge, xp-timer-display, etc.
+```
+
+Vitest with path aliases (`@domain`, `@application`, `@infrastructure`, `@presentation`). Run with `npm test` from Windows.
+
 ## Key conventions
 
 - All UI text is in French
-- No external JS dependencies in renderer — everything is vanilla JS
-- CSS uses custom properties defined in `:root` (color theme: dark purple/gaming aesthetic)
-- Electron config: `contextIsolation: true`, `nodeIntegration: false`, `backgroundThrottling: false`
+- TypeScript strict mode — no `any` unless unavoidable
+- Immutable domain entities (functions return new objects)
+- Commands mutate shared `state` object directly (no Redux-style reducers)
+- `repo.save(state)` called after every state mutation
+- CSS uses custom properties in `:root` (dark purple/gaming aesthetic), component styles in `src/presentation/styles/`
diff --git a/README.md b/README.md
old mode 100644
new mode 100755
index cb836a8..e3b16a8
--- a/README.md
+++ b/README.md
@@ -1,23 +1,42 @@
-# ⚔ Minuteur Dragodinde — Dofus 3
+# ⚔ Obsidienne — Minuteur Dragodinde (Dofus 3)
 
-Outil de gestion d'élevage de Dragodindes pour Dofus 3.  
-Application desktop Windows construite avec Electron.
+Application desktop Windows de gestion d'élevage de Dragodindes pour Dofus 3.
+Construite avec **Electron + Vite + TypeScript** en architecture **DDD hexagonale**.
 
 🔗 **Repo** : https://gitea.mickael-pol.fr/mickael/dd-timer
 
 ## Fonctionnalités
 
+### Élevage & Timers
 - 🐦 Gestion de **6 enclos indépendants** avec jusqu'à 10 Dragodindes chacun
 - ⏱ **Timer en temps réel** avec calcul automatique par tier de jauge (1→4)
-- 📊 **Dashboard** vue d'ensemble multi-enclos
-- 🔔 **Notifications natives Windows** même application en arrière-plan
-- 🔊 **4 sons d'alarme** au choix (Arpège, Pulsation, Fanfare, Cloche)
-- 🐉 **Jauges** : Baffeur, Caresseur, Foudroyeur, Abreuvoir, Dragofesse, Mangeoire (XP)
+- 🐉 **6 jauges** : Baffeur, Caresseur, Foudroyeur, Abreuvoir, Dragofesse, Mangeoire (XP)
+- 🔄 **Recharge de jauge** en cours de session avec recalcul multi-segments
+- 🎯 **Cibles sérénité et niveau** par Dragodinde avec ETA en temps réel
 - 🖱 **Drag & drop** des enclos et des Dragodindes pour les réordonner
+
+### Reproduction
+- 💕 **Accouplement** — sélection des parents avec déduction automatique du bébé (63 races créables)
+- 🔬 **Réapprovisionnement** — arbre de reproduction avec genres ♂/♀ et inversions
+- 📦 **Inventaire** — stock ♂/♀ par race avec simulation proportionnelle multi-générations
+- 🔀 **Workflows** — plans de reproduction sauvegardables avec export/import sélectif
+
+### Statistiques & Dashboard
+- 📊 **Dashboard** — vue d'ensemble multi-enclos avec KPIs globaux
+- 📈 **Statistiques** — naissances par jour, répartition par race/génération, taux de réussite, meilleurs couples, races manquantes, activité par jour de la semaine
+- 🔍 **Filtres de période** — 7j, 14j, 30j, 3 mois, tout l'historique avec comparaison delta
+
+### Notifications & Paramètres
+- 🔔 **Notifications natives Windows** même application en arrière-plan
+- 📱 **Notifications mobiles** via ntfy (serveur self-hosted) avec QR codes de configuration
+- 🔊 **4 sons d'alarme** au choix (Arpège, Pulsation, Fanfare, Cloche)
 - ⬆ **Mise à jour automatique** via Gitea Releases
-- 📱 **Notifications mobiles** via ntfy (serveur self-hosted)
 - 💾 Sauvegarde automatique locale
 
+### Design
+- 🎨 **Design system Obsidienne** — glassmorphism, Material Design 3, Material Symbols Outlined
+- 🌙 Interface sombre avec thème violet/gaming
+
 ## Installation (utilisateurs)
 
 1. Télécharger `Minuteur Dragodinde Setup x.x.x.exe` depuis la section [Releases](https://gitea.mickael-pol.fr/mickael/dd-timer/releases)
@@ -32,44 +51,150 @@ Application desktop Windows construite avec Electron.
 ### Prérequis
 - [Node.js LTS](https://nodejs.org)
 
-### Compiler
+### Commandes
 
 ```bash
-# Double-cliquer sur build.bat (admin auto)
-# ou manuellement :
-npm install
-npm run build
+npm install       # Installer les dépendances
+npm start         # Dev (Vite + Electron)
+npm test          # Tests unitaires (Vitest, depuis Windows)
+npm run test:e2e  # Tests E2E (Playwright + Electron)
+npm run build     # Build (Vite + electron-builder → NSIS installer)
 ```
 
-L'installeur est généré dans `dist/`.
+Ou double-cliquer sur `build.bat` (admin auto). L'installeur est généré dans `dist/`.
+
+### Tests
+
+**302 tests unitaires/fonctionnels/régression** (Vitest) — couverture de code **94%** (v8).
+
+| Couche | Statements | Branches | Functions | Lines |
+|--------|-----------|----------|-----------|-------|
+| Domain | 94–100% | 80–100% | 92–100% | 85–100% |
+| Application | 92–100% | 76–100% | 100% | 96–100% |
+| Infrastructure | 100% | 100% | 100% | 100% |
+
+**20 tests E2E** (Playwright + Electron) couvrant :
+- **Navigation sidebar** (8 tests) — tableau de bord, statistiques, enclos, accouplement, réappro, inventaire, workflows, paramètres
+- **Cycle de vie du timer** (5 tests) — activation jauge, démarrage, pause/reprise, reset
+- **Recharge de jauge** (2 tests) — mise à jour "Alarme dans" et barre de jauge en temps réel
+- **Workflow d'accouplement** (5 tests) — sélection parents, résultat bébé, enregistrement, filtres génération, recherche
+- **Persistance des données** (1 test) — survie des données après fermeture/réouverture
+
+> ⚠ Les tests doivent être lancés depuis un **terminal Windows** (pas WSL) — les bindings natifs Electron ne fonctionnent pas en WSL. Les tests E2E nécessitent un `npm run build` préalable.
 
 ## Publier une nouvelle version
 
+L'application utilise **electron-updater** avec un fichier `latest.yml` pour la mise à jour automatique. Ce fichier est généré automatiquement par `electron-builder` lors du build et contient la version, le nom du fichier et le hash sha512.
+
 ```bash
 # 1. Modifier la version dans package.json ("version": "1.x.x")
-# 2. Committer et tagger
+# 2. Build l'application
+npm run build
+# → Génère dans dist/ :
+#   - Minuteur Dragodinde Setup 1.x.x.exe
+#   - latest.yml  (version + sha512, requis par electron-updater)
+
+# 3. Committer et tagger
 git add .
 git commit -m "v1.x.x - description"
 git tag v1.x.x
 git push && git push --tags
 
-# 3. Sur Gitea : Releases → Nouvelle release → tag v1.x.x → attacher Setup.exe
+# 4. Sur Gitea : Releases → Nouvelle release → tag v1.x.x
+#    Attacher les 2 fichiers :
+#    - Minuteur Dragodinde Setup 1.x.x.exe
+#    - latest.yml
 ```
 
-## Structure
+> **Important** : le fichier `latest.yml` est **obligatoire** dans la release Gitea. Sans lui, electron-updater ne peut pas vérifier ni télécharger la mise à jour. L'app vérifie les mises à jour au démarrage (après 3s) via l'API Gitea Releases, puis pointe electron-updater vers le tag de la release pour lire `latest.yml`.
+
+## Architecture
 
 ```
-dd-timer/
-├── src/index.html      # Interface (HTML/CSS/JS)
-├── main.js             # Processus principal Electron + auto-update
-├── preload.js          # Bridge Electron ↔ renderer
-├── icon.png            # Icône (256x256)
-├── package.json        # Config et dépendances
-└── build.bat           # Script de build Windows (admin auto)
+src/
+├── domain/          — Entités, value objects, services purs (aucune dépendance)
+├── application/     — CommandBus/QueryBus, commandes et requêtes (CQRS)
+├── infrastructure/  — LocalStorage, Electron IPC, notifications, audio
+└── presentation/    — Composants UI, helpers live, styles CSS, état UI
 ```
 
 ## Changelog
 
+### v1.1.6
+
+#### Architecture
+- 🏗 **Refonte architecture DDD hexagonale** — migration complète du monolithe `index.html` vers une architecture en couches (domain / application / infrastructure / presentation) avec Vite + TypeScript + Vitest
+  - **Domain** : entités (`Enclos`, `Dragodinde`), value objects (`GaugeType`, `Tier`, `XpTable`, `Race`), services purs (`GaugeCalculator`, `BreedingService`)
+  - **Application** : CQRS — `CommandBus`, `QueryBus`, 15+ commandes, 8+ requêtes
+  - **Infrastructure** : `LocalStorageRepository`, `ElectronNotification`, `WebAudioAlarm`
+  - **Presentation** : composants TypeScript, helpers live, CSS modulaire
+  - **Tests** : suites unitaires, fonctionnelles et de régression (Vitest)
+
+#### Design Obsidienne
+- 🎨 **Refonte graphique complète "Obsidienne"** — nouveau design system glassmorphism avec tokens Material Design 3, polices Manrope/Inter/Plus Jakarta Sans
+  - **`obsidienne.css`** (~4500 lignes) : feuille de styles MD3 complète, 37+ variables CSS tokens
+  - **Material Symbols Outlined** : migration de tous les emojis vers des icônes vectorielles
+  - **Sidebar** : logo, sections organisées (Principal, Enclos, Outils), pastille de statut timer, Paramètres dans le footer
+  - **App Shell** : layout `app-shell` (sidebar + main-area), header hamburger
+  - **Dashboard** : grille KPI (bébés, DD actives, couples, taux de réussite, races)
+  - **EnclosView** : barres de jauge visuelles avec gradient par tier, bouton timer Material
+  - **DragodindeCard** : stats avec icônes Material, jauge XP (niveau + % + ETA)
+  - **Accouplement** : layout single-page (Parent 1 | Coeur+inputs | Parent 2 + grille de races), glassmorphism, chips génération, drag & drop
+  - **Réapprovisionnement** : arbre de reproduction redesigné avec cartes glassmorphism
+  - **Inventaire** : grille de stock ♂/♀ redesignée, simulateur avec résultats visuels
+  - **Workflows** : cartes workflow avec barres de progression, export/import sélectif
+  - **Statistiques** : écran complet avec graphiques, donut, heatmap, avatars de races
+  - **Paramètres** : cartes son avec sélection visuelle, toggle notifications, modal ntfy redesignée
+  - **UpdateBanner** : aligné sur le design MD3
+
+#### Nouvelles fonctionnalités
+- ✨ **Écran Statistiques** — naissances par jour (barres), répartition des races (donut), naissances par génération, activité par jour de la semaine (heatmap), taux de réussite par race, meilleurs couples (top 10), races manquantes groupées par génération, détail par race
+- ✨ **Filtres de période** sur les statistiques — 7j, 14j, 30j, 3 mois, tout l'historique avec comparaison delta (+/−) par rapport à la période précédente
+- ✨ **Export/Import de workflows** — sélection individuelle ou globale, dialogue natif Windows, import avec déduplication des IDs
+- ✨ **Drag & drop accouplement** — cartes de race glissables vers Parent 1 / Parent 2, feedback visuel et vérification de compatibilité
+- ✨ **Images des dragodindes** (66 races en base64) sur tous les écrans
+- ✨ **Barres de recherche** sur accouplement, réapprovisionnement, inventaire et workflows
+- ✨ **Sauvegarde de workflow** depuis les résultats de réappro et d'inventaire
+- ✨ **Simulation proportionnelle inventaire** — allocation dynamique multi-générations
+- ✨ **Filtres par génération** sur les workflows + mises à jour en temps réel
+- ✨ **Numérotation smart des enclos** — comble les trous lors de la création
+
+#### Timer & Jauges
+- ✨ **Calcul de jauge multi-segments** — gère les recharges intermédiaires et le gel au cap absolu
+- ✨ **Recharge de jauge en cours de session** — bouton rechargement avec snapshot `{ atSec, level }`
+- ✨ **Session timer robuste** — continue en temps réel après complétion automatique
+- ✨ **Alarme unique** — se déclenche une seule fois quand toutes les cibles sont atteintes
+- ✨ **Détection de complétion via `setInterval`** — fonctionne même en arrière-plan
+- ✨ **Jauges débloquées après session** — sélection de nouvelles jauges avant la session suivante
+- ✨ **Commande `nouvelle-fournee`** — réinitialise timer + jauges + DD
+- ✨ **ETA niveau 200** — barre de progression et pourcentage en temps réel
+- ✨ **Boutons reset cibles** — réinitialise sérénité ou niveau depuis la card DD
+
+#### Corrections
+- 🐛 **Recette Ebène** — parents inversés corrigés
+- 🐛 **Simulation inventaire** — algorithme glouton → allocation proportionnelle
+- 🐛 **Dirty flag** — le rAF loop ne reconstruit plus le DOM inutilement
+- 🐛 **Persistance inventaire** — `update-settings` gère le champ `inventaire`
+- 🐛 **Baffeur/Caresseur** — exclusion mutuelle, contrainte de signe sur cible sérénité
+- 🐛 **Sons d'alarme** — fréquences corrigées, bouton Test fonctionnel via WebAudio
+- 🐛 **CSP** — ajout `img-src data:` et `https://api.qrserver.com`
+- 🐛 **Statistiques** — les races Gen 1 (Rousse, Dorée, Amande) ne sont plus comptées car non créables (63 races au lieu de 66)
+- 🐛 **Export workflows** — dialogue de sauvegarde pointe vers Documents par défaut
+- 🐛 **Sidebar footer** — corrigé le footer masqué par la barre des tâches Windows (`calc(100vh / 1.15)` pour compenser le zoom global)
+- 🐛 **Notifications ntfy** — migration de l'API headers vers l'API JSON pour le support UTF-8 (corrige les caractères accentués "pr?tes" → "prêtes")
+- 🐛 **Redémarrage timer** — empêche le redémarrage d'un timer quand toutes les cibles sont déjà atteintes (évite l'alarme en boucle après complétion)
+- 🐛 **Nouvelle fournée** — le bouton n'apparaît que si toutes les DD ont 20000 en maturité, endurance et amour
+- 🐛 **Timer jauges vides** — interdit le démarrage du timer quand toutes les jauges actives sont à 0
+- 🐛 **Jauge vide en cours de session** — affichage ∞ dans le countdown, alerte visuelle "⚠ Rechargez la jauge" avec animation pulsante, badge jauge vide sur le dashboard
+- 🐛 **Recharge jauge temps réel** — le countdown "Alarme dans" et les stats se mettent à jour en temps réel pendant la saisie (event `input` en plus du `blur`), avec consolidation des recharges proches (< 2s) pour éviter la pollution du tableau
+- 🐛 **Recharge en pause** — les recharges de jauge sont maintenant acceptées quand le timer est en pause (pas uniquement pendant l'exécution)
+
+#### Technique
+- ⬆ **Migration electron-updater** — vérification sha512 via `latest.yml`, installation NSIS native, restart auto
+- 🎨 **Icône Windows native** — migration `icon.png` → `icon.ico`
+- 🧪 **302 tests** (unitaires, fonctionnels, régression) — couverture **94%** via Vitest + v8
+- 🧪 **20 tests E2E** Playwright + Electron — navigation, timer, recharge jauge, accouplement, persistance
+
 ### v1.1.5
 - ✨ **Onglet Accouplement** — selection des 2 parents, deduction automatique du bebe, saisie du nombre de couples et bebes obtenus pour alimenter les statistiques globales
 - ✨ **Sidebar navigation** — menu hamburger avec panneau lateral overlay (Dashboard, Enclos, Accouplement, Reappro, Inventaire, Workflows, Parametres)
diff --git a/algorithmes.md b/algorithmes.md
index 1ecb532..313298f 100644
--- a/algorithmes.md
+++ b/algorithmes.md
@@ -50,6 +50,8 @@ C'est l'inverse de `gainedIn`. On parcourt les paliers du haut vers le bas :
 
 Si la jauge se vide complètement avant d'atteindre l'objectif → retourne `Infinity` (impossible).
 
+**Cas "vidange complète"** : `timeToGain(lvl, lvl)` donne le temps pour vider entièrement la jauge. C'est cette formule qu'utilisent à la fois l'affichage "Vide en" et le timer XP quand la cible est hors de portée d'une seule charge.
+
 ---
 
 ## 4. Niveau de jauge après X secondes — `gaugeAfter(lvl, sec)`
@@ -60,9 +62,11 @@ Même logique que `gainedIn`, mais au lieu de compter les points donnés, on sou
 
 ---
 
-## 5. Temps écoulé — `elapsed(enc)`
+## 5. Temps écoulé — `elapsed` et `elapsedLive`
 
-Calcule les secondes écoulées depuis le démarrage du timer d'un enclos, en excluant les pauses :
+### `elapsed(timer)` — temps figé pour l'affichage
+
+Calcule les secondes écoulées depuis le démarrage du timer d'un enclos, en excluant les pauses. **Se fige** quand le timer est en pause ou terminé :
 
 ```
 Si en cours     : (maintenant - démarrage - temps_en_pause) / 1000
@@ -70,9 +74,64 @@ Si en pause     : (moment_pause - démarrage - temps_en_pause) / 1000
 Si non démarré  : 0
 ```
 
+Utilisé pour : l'affichage "Temps écoulé", le dashboard.
+
+### `elapsedLive(enc)` — temps réel après complétion automatique
+
+Retourne un temps qui **continue de progresser en temps réel** même après que la session s'est terminée automatiquement. Cela permet aux jauges de continuer à se vider en arrière-plan après l'alarme.
+
+```
+Si enc.alerted['__done__'] est positionné :
+    → (Date.now() - startTime - pausedMs) / 1000  (jamais figé)
+Sinon :
+    → elapsed(enc.timer)  (comportement normal, fige sur pause)
+```
+
+**`enc.alerted['__done__']`** est posé par la commande `complete-timer` quand toutes les cibles sont atteintes. Ce flag distingue une "fin naturelle de session" (jauges continuent) d'une "pause manuelle" (jauges figées).
+
+Utilisé pour : tous les calculs de jauges dans `computeGaugeLive`, `enclosGaugeCurGl`, `calcSerenEtaLive`, `calcLevelEtaLive`.
+
 ---
 
-## 6. Calcul unifié d'une jauge — `computeGaugeLive(enc, dd, gid, el, started)`
+## 6. Gel de jauge au cap absolu des stats et calcul par segments — `computeGaugeState`
+
+### 6.1 Gel au cap absolu
+
+Quand une **stat** atteint sa **limite absolue** (sérénité ±5000, endurance/maturité/amour 20 000), la jauge correspondante **s'arrête de se vider** — il n'y a plus rien à donner à la DD.
+
+**Points jusqu'au cap** (`ptsToAbsCap`) :
+- Stat normale : `dir>0 ? (statMax - startSt) : (startSt - statMin)` — la jauge continue **même après la cible**, jusqu'au cap absolu de la stat
+- XP / mangeoire : `xpForLevel(200) - xpForLevel(niveauDépart)` — la jauge gèle uniquement au niveau 200, **jamais à la cible XP**
+
+**Comportement après la cible** : les jauges ne s'arrêtent PAS quand la cible d'une DD est atteinte. Elles continuent de se vider jusqu'à ce que la stat atteigne son cap absolu (ex: sérénité à -5000, même si la cible était -60). Cela garantit que l'affichage reste cohérent et que les DDs continuent de progresser en fond.
+
+**Affichage global de la jauge de stat (enclos)** : la jauge de stat se fige quand la **dernière** DD atteint son cap absolu. La mangeoire continue de se vider jusqu'au niveau 200.
+
+### 6.2 Calcul par segments avec recharges — `computeGaugeState(startGl, recharges, ptsAllowed, el)`
+
+Quand le joueur recharge une jauge en cours de session, le calcul se découpe en **segments** :
+
+```
+Segment 1 : startGl → recharge[0].atSec  (ou fin du timer si pas de recharge)
+Segment 2 : recharge[0].level → recharge[1].atSec
+...
+Segment N : recharge[N-1].level → el
+```
+
+Pour chaque segment :
+1. Calculer la durée du segment
+2. Calculer les points gagnés dans ce segment avec `gainedIn`
+3. Vérifier si le cap (`ptsAllowed`) est atteint → si oui, calculer le moment exact du gel et stopper
+4. Si non, passer au segment suivant avec le nouveau niveau de jauge après recharge
+
+**Retourne** : `{ gained, curGl, effectiveEl }`
+- `gained` : points totaux accumulés sur tous les segments
+- `curGl` : niveau de jauge au moment du gel (ou à `el` si pas de gel)
+- `effectiveEl` : temps réel de fonctionnement (≤ el, limité par le gel)
+
+---
+
+## 7. Calcul unifié d'une jauge — `computeGaugeLive(enc, dd, gid, el, started)`
 
 C'est le **cœur du système**. Pour chaque DD et chaque jauge active, il calcule en temps réel :
 - La stat estimée actuelle
@@ -80,30 +139,37 @@ C'est le **cœur du système**. Pour chaque DD et chaque jauge active, il calcul
 - Le % de progression
 - Le countdown restant
 
+> **Note sur le paramètre `el`** : bien que la signature accepte un paramètre `el` (elapsed), il est **ignoré en interne**. La fonction appelle systématiquement `elapsedLive(enc)` pour ses calculs, ce qui garantit que les jauges continuent de progresser après la fin de session. Le paramètre `el` est conservé dans la signature pour la compatibilité des appels depuis `enclosGlobalState`.
+
 ### Pour les jauges normales (sérénité, endurance, maturité, amour) :
 
 1. On récupère le **snapshot** de la jauge et de la stat au moment du démarrage du timer
-2. On calcule les points gagnés depuis le snapshot : `gainedIn(snapshotJauge, tempsÉcoulé)`
+2. On appelle `computeGaugeState(startGl, recharges, ptsToAbsCap, elLive)` pour obtenir les points gagnés en tenant compte des recharges et du gel
 3. On applique la direction (`dir`) :
    - `dir = +1` (caresseur, foudroyeur, abreuvoir, dragofesse) : stat monte
    - `dir = -1` (baffeur) : stat descend
 4. On clamp la stat dans ses bornes (ex: sérénité entre -5000 et +5000)
 5. On calcule le temps total et le countdown via `timeToGain`
 
-### Pour la mangeoire (XP) — modèle spécial :
+### Pour la mangeoire (XP) — même modèle que les autres jauges :
 
-L'XP utilise un **modèle linéaire constant** car le joueur est supposé **recharger** la jauge manuellement :
+La mangeoire se vide exactement comme les autres jauges (même tiers, même dégression). L'XP suit le même algorithme :
 
-1. On détermine le taux fixe = `tierRate(snapshotJauge)` au démarrage
-2. XP gagnée = `nombre_de_ticks × taux` (pas de dégression)
-3. XP nécessaire = `xpForLevel(cible) - xpForLevel(départ)`
-4. Countdown = `ceil(xp_restante / taux) × 10 sec`
+1. XP gagnée = via `computeGaugeState` (tient compte des recharges et du gel à niveau 200)
+2. XP nécessaire = `xpForLevel(cible) - xpForLevel(départ)`
+3. Niveau estimé = `levelFromXp(xpDépart + xpGagnée)`
+4. Countdown = `timeToGain(curGl, Math.min(xpRestante, curGl))` — si la cible dépasse la capacité de la jauge, on affiche le temps de vidange complète
 
-**Pourquoi un modèle différent ?** Parce que pour les stats, la jauge se vide naturellement. Pour l'XP, le joueur remet des croquettes (recharge la mangeoire), donc le taux reste constant.
+**Cible XP par défaut** : si `dd.levelTarget === null`, on cible le niveau 200.
+
+**Exemple** : mangeoire à 85 000 (tier 3) pendant 7 000 sec (700 ticks) :
+- 500 ticks à 30 XP/tick (tier 3, 70k→85k) = 15 000 XP, jauge → 70 000
+- 200 ticks à 20 XP/tick (tier 2) = 4 000 XP, jauge → 66 000
+- Total = **19 000 XP** (contre 21 000 XP avec un taux fixe erroné)
 
 ---
 
-## 7. Table d'XP et niveaux
+## 8. Table d'XP et niveaux
 
 ### Table XP_RAW
 
@@ -124,7 +190,7 @@ Les valeurs sont **cumulatives** (pas incrémentales).
 
 ---
 
-## 8. ETA Sérénité — `calcSerenEta` / `calcSerenEtaLive`
+## 9. ETA Sérénité — `calcSerenEta` / `calcSerenEtaLive`
 
 ### Version statique (`calcSerenEta`)
 1. Calcule `diff = cible - sérénité actuelle`
@@ -133,39 +199,98 @@ Les valeurs sont **cumulatives** (pas incrémentales).
 4. Temps = `timeToGain(niveauJauge, |diff|)`
 
 ### Version live (`calcSerenEtaLive`)
-1. Utilise `computeGaugeLive` pour obtenir la sérénité estimée en temps réel
+1. Utilise `computeGaugeState` pour obtenir la sérénité estimée en temps réel (avec recharges et gel)
 2. Recalcule le diff depuis cette estimation
 3. Calcule le temps restant avec les points encore à parcourir
 
 ---
 
-## 9. ETA Niveau — `calcLevelEta` / `calcLevelEtaLive`
+## 10. ETA Niveau — `calcLevelEta` / `calcLevelEtaLive`
 
 ### Version statique (`calcLevelEta`)
 1. XP nécessaire = `xpForLevel(cible) - xpForLevel(niveauActuel)`
-2. Taux fixe = `tierRate(niveauMangeoire)`
-3. Temps = `ceil(xpNécessaire / taux) × 10 sec`
+2. Cible = `dd.levelTarget ?? 200`
+3. Temps = `timeToGain(niveauMangeoire, Math.min(xpNécessaire, niveauMangeoire))`
 
 ### Version live (`calcLevelEtaLive`)
-1. Utilise `computeGaugeLive` pour obtenir le niveau estimé actuel
-2. XP restante = `xpForLevel(cible) - xpForLevel(niveauEstimé)`
-3. Taux fixe = `tierRate(snapshotMangeoire)`
-4. Countdown = `ceil(xpRestante / taux) × 10 sec`
+1. Cible = `dd.levelTarget ?? 200`
+2. XP gagnée via `computeGaugeState` (avec recharges et gel)
+3. Niveau estimé = `levelFromXp(xpDépart + xpGagnée)`
+4. XP restante = `xpForLevel(cible) - xpForLevel(départ) - xpGagnée`
+5. Countdown = `timeToGain(curGl, Math.min(xpRestante, curGl))`
+   - Si XP restante ≤ capacité de la jauge : temps pour atteindre la cible
+   - Sinon : temps de vidange complète (cohérent avec "Vide en")
 
 ---
 
-## 10. Countdown global d'un enclos — `enclosGlobalState(enc)`
+## 11. Countdown global d'un enclos — `enclosGlobalState(enc)`
 
 **Question** : "Dans combien de temps TOUTES les DD de cet enclos auront atteint TOUTES leurs cibles ?"
 
 1. Pour chaque DD × chaque jauge active → appeler `computeGaugeLive`
 2. Prendre le **maximum** de tous les countdowns = le plus long à terminer
 3. Compter combien de DD ont TOUTES leurs cibles atteintes (`ddDone`)
-4. `allDone = true` si toutes les DD sont terminées
+4. `allDone = true` si **toutes les jauges actives** de **toutes les DDs** ont atteint leur cible
+
+**Règle d'alarme unique** : la session se termine (`complete-timer`) une seule fois, au timer le plus long. Si un enclos a baffeur + mangeoire, l'alarme ne sonne que quand les DEUX cibles (sérenité ET niveau XP) sont atteintes pour toutes les DDs. Il n'y a pas d'alarme intermédiaire quand une seule cible est atteinte.
+
+**Prévisualisation avant démarrage** : la fonction calcule même quand le timer n'est pas démarré (`started = false`, `el = 0`). L'"Alarme dans" et les timers DD se mettent à jour en temps réel dès que le joueur saisit une valeur de jauge ou une cible — sans avoir à démarrer le timer.
+
+## 11 bis. Vérification globale de complétion — `checkAllEnclosCompletion()` dans `App`
+
+La vérification de complétion ne dépend pas de la vue active ni du focus de la fenêtre.
+
+**Pourquoi pas dans la boucle rAF ?** `requestAnimationFrame` se **suspend** quand l'application Electron perd le focus OS (ex : l'utilisateur alt-tab vers une autre application). Si la détection était dans la boucle rAF, la notification ne sonnerait jamais quand l'utilisateur est hors de l'app.
+
+**Solution** : `checkAllEnclosCompletion()` tourne dans un `window.setInterval(..., 1000)` indépendant, démarré dans `App.render()` et nettoyé dans `App.destroy()`. `setInterval` continue de s'exécuter même quand la fenêtre est en arrière-plan.
+
+**Algorithme** :
+1. Parcourt **tous** les enclos en cours (`summary.running = true`)
+2. Pour chacun, récupère l'état complet et appelle `enclosGlobalState`
+3. Si `allDone = true`, exécute `complete-timer` → alarme + notification immédiate
+
+**Double protection** : `EnclosView.update()` appelle aussi `complete-timer` quand `allDone && running` (quand l'utilisateur est sur l'enclos). Le handler `complete-timer` possède un guard `if (!enc.timer.running || enc.alerted['__done__']) return` pour éviter un double déclenchement.
 
 ---
 
-## 11. Arbre de réapprovisionnement — `calcAppro()`
+## 12. Recharge de jauge en cours de session
+
+Le joueur peut **recharger une jauge pendant que le timer tourne** (ex : remplir la mangeoire à mi-session).
+
+### Enregistrement (`recharge-gauge`)
+
+- Stocke `{ atSec: elapsed(), level: newLevel }` dans `timer.gaugeRecharges[gid]`
+- Plusieurs recharges s'accumulent dans un tableau
+- Le `reset-timer` vide tous les tableaux de recharge
+
+### Impact sur le calcul
+
+`computeGaugeState` segmente automatiquement le calcul entre chaque recharge :
+- Segment 1 depuis `startGl` jusqu'à la première recharge
+- Segment 2 depuis le nouveau niveau jusqu'à la recharge suivante (ou la fin)
+- etc.
+
+Le gel au cap absolu est vérifié dans chaque segment : si la stat atteint son cap avant la prochaine recharge, le gel est précis à la seconde près.
+
+### Affichage
+
+Les inputs de jauge affichent une bordure verte (classe `.gauge-inp-recharge`) pendant que le timer tourne, indiquant que toute nouvelle saisie sera interprétée comme une recharge.
+
+---
+
+## 13. Mises à jour en temps réel des inputs
+
+Tous les champs de saisie (niveaux de jauges, stats des DD, cibles) déclenchent une mise à jour de l'état à **chaque frappe** via un listener `input`, en plus du `blur` final. Cela permet :
+
+- L'"Alarme dans" de se recalculer instantanément pendant la saisie
+- Les timers DD (XP, sérénité, etc.) de se mettre à jour à la volée
+- Une expérience cohérente avant ET pendant le timer
+
+Exception : les recharges de jauge ne sont déclenchées que sur `blur`/`Enter` (pas sur chaque frappe) pour éviter d'enregistrer des recharges partielles.
+
+---
+
+## 14. Arbre de réapprovisionnement — `calcAppro()`
 
 **Question** : "Pour produire Q exemplaires de la race X, de quelles races et en quelles quantités ai-je besoin ?"
 
@@ -177,11 +302,11 @@ Chaque race de génération ≥ 2 est produite par le croisement de 2 races pare
 1. On part de la race cible et de la quantité voulue
 2. Pour chaque génération (de la plus haute à gen 2) :
    - Pour chaque race nécessaire à cette génération :
-     - Calculer le nombre de couples nécessaires (voir §11.1)
+     - Calculer le nombre de couples nécessaires (voir §14.1)
      - Ajouter les parents nécessaires (chacun × nombre de couples) dans le pool
 3. Les races gen 1 restantes = matières premières
 
-### 11.1 Mécanisme du reproducteur
+### 14.1 Mécanisme du reproducteur
 
 Un reproducteur est une DD réutilisable : elle peut faire plusieurs bébés.
 
@@ -192,49 +317,33 @@ Sinon       →  couples = Q - R
 
 Où `R` = nombre de reproducteurs, `Q` = quantité nécessaire.
 
-**Explication** :
-- Si on a assez de reproducteurs (≥ moitié de Q), chaque reproducteur fait 2 bébés → on divise par 2
-- Sinon, chaque reproducteur fait sa part et les autres sont des "one-shot"
-
 ---
 
-## 12. Calcul d'inventaire avec contraintes ♂/♀ — `calcInventaire()`
+## 15. Calcul d'inventaire avec contraintes ♂/♀ — `calcInventaire()`
 
 **Question** : "Avec mon stock actuel de DD (mâles et femelles), quels croisements puis-je réaliser ?"
 
 ### Modèle de données
 Chaque race dans l'inventaire : `{ m: mâles, f: femelles, n: neutres }`
-- `m` et `f` = stock réel renseigné par le joueur
-- `n` = bébés produits par le calcul (sexe inconnu)
-
-### Contrainte fondamentale
-Un croisement nécessite **1 mâle + 1 femelle**. On ne peut pas croiser ♂+♂ ou ♀+♀.
 
 ### Algorithme : round-robin par génération
 
 Pour chaque génération (2 → 10) :
 1. Lister tous les croisements possibles à cette génération
 2. **Boucle round-robin** : tant qu'au moins un croisement est possible :
-   - Pour chaque croisement [Parent A + Parent B → Bébé] :
-     - Vérifier qu'on a 1 mâle-capable chez A ET 1 femelle-capable chez B (ou l'inverse)
-     - Si même race (A = B) : vérifier qu'on a ≥ 2 individus dont au moins 1 ♂ et 1 ♀
-     - Consommer les parents (priorité au stock réel m/f, puis les neutres n)
-     - Ajouter 1 neutre (`n++`) à la race du bébé produit
-3. Les bébés produits (neutres) sont disponibles pour les générations suivantes
+   - Vérifier qu'on a 1 mâle-capable chez A ET 1 femelle-capable chez B (ou l'inverse)
+   - Consommer les parents (priorité au stock réel m/f, puis les neutres n)
+   - Ajouter 1 neutre (`n++`) à la race du bébé produit
 
 ### Priorité de consommation
 ```
 takeMale   : si m > 0 → m--, sinon n--
 takeFemale : si f > 0 → f--, sinon n--
 ```
-Les neutres (`n`) peuvent jouer le rôle de ♂ ou ♀ selon le besoin.
-
-### Pourquoi round-robin ?
-Pour **répartir équitablement** les ressources entre les croisements possibles, plutôt que de tout donner au premier croisement trouvé.
 
 ---
 
-## 13. Constantes des stats
+## 16. Constantes des stats
 
 | Stat      | Min    | Max    | Jauge(s) associée(s) |
 |-----------|--------|--------|----------------------|
@@ -246,10 +355,115 @@ Pour **répartir équitablement** les ressources entre les croisements possibles
 
 ---
 
-## 14. Système de snapshots
+## 17. Système de snapshots
 
-Quand le timer démarre, on prend un **snapshot** de l'état :
-- `snapGauges` : niveaux de toutes les jauges au moment du démarrage
+Quand le timer démarre (démarrage initial uniquement, pas lors d'une reprise de pause) :
+- `snapGauges` : niveaux de toutes les jauges actives au moment du démarrage
 - `snapStats[dd.id]` : stats de chaque DD au moment du démarrage
+- `gaugeRecharges` : réinitialisé à `{}`
 
-Tous les calculs utilisent ces snapshots comme point de départ, pas l'état en temps réel. Cela évite les dérives de calcul si les valeurs sont modifiées pendant que le timer tourne.
+Tous les calculs utilisent ces snapshots comme point de départ. Une **reprise de pause** accumule uniquement `pausedMs` sans toucher aux snapshots.
+
+---
+
+## 18. Flux de session — enchaînement des sessions
+
+### Session unique (sans jauges supplémentaires)
+1. Timer démarré → `start-timer` prend les snapshots
+2. Toutes les cibles atteintes → `complete-timer` déclenché
+3. Session terminée : timer figé, bannière "Session terminée" visible, jauges continuent en fond
+4. Clic "🔄 Nouvelle fournée" → `nouvelle-fournee` : reset complet + 1 DD neuve
+
+### Session enchaînée (nouvelles stats à monter)
+1. Session terminée (`alerted['__done__'] = true`)
+2. Les **boutons de jauges sont déverrouillés** → l'utilisateur sélectionne de nouvelles jauges
+3. L'utilisateur configure les niveaux de jauges pour la nouvelle session
+4. Clic "▶ Démarrer" → `start-timer` détecte `alerted['__done__']` → **démarrage initial** (pas reprise de pause) → nouveaux snapshots pris avec les stats actuelles des DD
+5. Nouvelle session démarre : les stats des DD reflètent les gains de la session précédente
+
+**Règle de déverrouillage des jauges** : `locked = started && !enc.alerted['__done__']`
+Les jauges sont verrouillées uniquement pendant une session active (running ou en pause manuelle). Elles sont déverrouillées une fois la session terminée automatiquement.
+
+**Bouton timer** : affiche "▶ Reprendre" uniquement en cas de pause manuelle (`pausedAt` et `!alerted['__done__']`). Après complétion automatique, affiche "▶ Démarrer" (nouvelle session).
+
+---
+
+## 19 bis. Commande `nouvelle-fournee`
+
+Remet l'enclos dans un état "vierge" pour une nouvelle fournée complète :
+- Reset timer (efface startTime, snapshots, alerted, recharges)
+- Remet tous les niveaux de jauges à 0
+- Supprime toutes les DDs
+- Ajoute 1 nouvelle DD avec les stats de base (`serenite: 0, endurance: 0, maturite: 0, amour: 0, xp: 1`)
+
+Distinct de `reset-timer` (qui remet seulement le timer à zéro, conserve les DDs et les jauges) et de `clear-enclos` (qui remet tout à zéro incluant les jauges actives et le nom).
+
+---
+
+## 18. Cycle de vie de `complete-timer`
+
+La commande `complete-timer` représente la **fin naturelle d'une session** (toutes les cibles atteintes). Elle est distincte d'un simple `stop-timer` (pause manuelle).
+
+### Ce que fait `complete-timer`
+1. **Guard** : si `enc.timer.running = false` ou si `enc.alerted['__done__']` est déjà posé → retourne immédiatement (idempotent, pas de double alarme)
+2. Pose `enc.timer.running = false`
+3. Pose `enc.timer.pausedAt = Date.now()` — gèle `elapsed()` à l'instant de complétion
+4. Pose `enc.alerted['__done__'] = true` — active le mode "continuation en fond" dans `elapsedLive`
+5. Persiste l'état via `repo.save()`
+6. Émet l'événement `timer-completed` → déclenche alarme audio + notification Windows/mobile
+
+### Différence avec `stop-timer` (pause manuelle)
+- `stop-timer` : pose `running = false` et `pausedAt` mais **ne pose pas** `alerted['__done__']`
+- Conséquence : `elapsedLive` retourne `elapsed()` figé → toutes les jauges se figent sur la pause
+- `complete-timer` : `alerted['__done__'] = true` → `elapsedLive` continue en temps réel → jauges continuent de se vider en fond
+
+### Après `complete-timer`
+| Élément | Comportement |
+|---------|-------------|
+| Affichage "Temps écoulé" (enclos + dashboard) | **Figé** — utilise `elapsed(timer)` = `(pausedAt - startTime - pausedMs) / 1000` |
+| Jauges (niveau, barre) | **Continuent** — `enclosGaugeCurGl` utilise `elapsedLive` |
+| Stats estimées des DD | **Continuent** — `computeGaugeLive` utilise `elapsedLive` |
+| Countdown "Alarme dans" | Affiche `✅` |
+| Bannière "Session terminée" | Visible dans la vue enclos |
+
+---
+
+## 19. Animations et détection de tick — `DragodindeCard`
+
+### Détection de tick
+
+Un "tick" survient toutes les 10 secondes. La carte DD détecte un nouveau tick en comparant `Math.floor(elapsedLive(enc) / 10)` avec la valeur précédente.
+
+Utiliser `elapsedLive(enc)` (et non `elapsed`) garantit que les animations de tick **continuent** après la fin de session, le temps que toutes les jauges se vident en arrière-plan.
+
+### `deltaActive` — quand afficher l'animation de delta
+
+L'animation de delta ("+20 xp", "-10 sérenité"…) s'affiche à chaque tick **uniquement si la jauge est encore active**. Une jauge est considérée inactive quand la stat atteint son **cap absolu** (pas sa cible) :
+
+```
+Pour les jauges de stats : atAbsCap = (estStat >= statMax)  ou  (estStat <= statMin)
+Pour la mangeoire (XP)  : atAbsCap = (estLevel >= 200)
+```
+
+Cela signifie que l'animation continue après la cible de l'utilisateur (ex: sérénité cible -60 → animation continue jusqu'à -5000).
+
+### Badge "✓ TERMINÉ"
+
+Affiché sur la carte DD quand **toutes les jauges actives** ont `done = true` pour cette DD. Les jauges de stats et la mangeoire comptent toutes de la même façon — pas de distinction.
+
+---
+
+## 20. Événements domaine actifs
+
+| Événement | Déclencheur | Effet |
+|-----------|-------------|-------|
+| `timer-completed` | `complete-timer` (toutes cibles atteintes) | Alarme audio + notification Windows + notification mobile ntfy |
+| `gauge-threshold-reached` | Franchissement d'un palier de jauge | (usage interne) |
+| `accouplement-registered` | Enregistrement d'un accouplement | Mise à jour des stats globales |
+| `enclos-deleted` | Suppression d'un enclos | Nettoyage de l'état |
+
+**Événements supprimés** (ancienne implémentation, ne plus utiliser) :
+- `target-reached` — ancienne alarme intermédiaire quand une cible de stat était atteinte avant les autres
+- `xp-target-reached` — ancienne alarme séparée pour la cible XP
+
+Ces événements ont été remplacés par la règle d'alarme unique : **une seule alarme au timer le plus long**, déclenchée par `timer-completed` uniquement.
diff --git a/docs/fonctionnalites-par-ecran.md b/docs/fonctionnalites-par-ecran.md
new file mode 100644
index 0000000..de22b4b
--- /dev/null
+++ b/docs/fonctionnalites-par-ecran.md
@@ -0,0 +1,335 @@
+# Fonctionnalités par écran — Minuteur Dragodinde
+
+---
+
+## 1. Shell principal (App)
+
+### Header
+- Bouton hamburger (☰) pour ouvrir/fermer la sidebar
+- Logo "⚔ MINUTEUR DRAGODINDE"
+- Sous-titre "Dofus 3 · Gestion multi-enclos en temps réel · vX.X.X"
+- Version injectée dynamiquement via Electron API
+- Badge "DEV" en mode développement
+
+### Barre d'onglets
+- Onglet Dashboard (📊)
+- Un onglet par enclos :
+  - Icône 🐉 + nom de l'enclos
+  - Dot animé : vert pulsant si timer en cours, gris si inactif
+  - Bouton supprimer (✕), visible si plus d'1 enclos
+  - Drag-and-drop pour réordonner les onglets
+- Bouton "+ Enclos" (désactivé si max atteint)
+
+### Bannière de mise à jour
+- États : disponible → téléchargement (barre de progression %) → prête → erreur
+- Bouton "Installer et redémarrer"
+- Bouton fermer (✕) sur erreur
+
+### Zoom clavier
+- Ctrl + (+) : zoom avant
+- Ctrl + (-) : zoom arrière
+- Ctrl + 0 : reset 100%
+
+---
+
+## 2. Sidebar — Navigation latérale
+
+- **Dashboard** (📊)
+- **Section "Enclos"** : liste dynamique de chaque enclos
+  - Icône 🐉 + nom + dot coloré (vert=running, gris=idle)
+- **Section "Outils"** :
+  - Accouplement (💑)
+  - Réappro (🧬)
+  - Inventaire (📦)
+  - Workflows (📋)
+- **Paramètres** (⚙)
+- Indicateur visuel de la vue active
+- Fermeture auto au clic sur l'overlay
+
+---
+
+## 3. Dashboard — Vue d'ensemble
+
+### Cartes des enclos
+Pour chaque enclos :
+- Nom de l'enclos
+- Dot animé + statut textuel ("En cours" / "Pause" / "Inactif")
+- Liste des jauges actives (badges colorés avec icônes)
+- Nombre de dragodindes + terminées (ex: "5 DD · 3/5 ✅")
+- Temps restant (countdown live) ou "✅ Terminé !"
+- Temps écoulé (live)
+- Bouton "→ Gérer cet enclos" (navigation)
+
+### Statistiques globales
+- **KPI** :
+  - Bébés au total
+  - Dragodindes actives
+  - Couples accouplés
+  - Taux de réussite (%)
+  - Races obtenues
+- **Histogramme des races** : barres horizontales triées par quantité, colorées par race
+- **Bouton "Réinitialiser"** : efface stats et accouplements
+
+### Temps réel
+- Countdowns et temps écoulés mis à jour en continu
+- Dots animés sur les enclos en cours
+
+---
+
+## 4. Enclos — Vue timer principale
+
+### En-tête
+- **Nom de l'enclos** : input éditable (focus vide, blur sauvegarde, Escape annule, Enter valide)
+- **Bouton "🗑 Vider l'enclos"** : supprime toutes les DD et reset
+
+### Carte Jauges (max 2 actives)
+- **6 boutons toggle** : Baffeur (➖), Caresseur (➕), Foudroyeur (⚡), Abreuvoir (💧), Dragofesse (❤), Mangeoire (🍖)
+  - État actif : bordure colorée
+  - Verrouillé si timer en cours
+  - **Exclusion mutuelle** baffeur ↔ caresseur (l'un bloque l'autre)
+- **Par jauge active** :
+  - Icône + nom + badge Tier ("Tier X · ±Y/tick")
+  - Input niveau (0–100 000, step 1000)
+    - Avant timer : modifie le niveau
+    - Pendant timer : recharge la jauge (style visuel distinct)
+  - Barre de progression (% de remplissage)
+  - Info : "Jauge : {niveau} · Vide en {durée}"
+
+### Barre timer
+- **Bouton** : "▶ Démarrer" / "⏸ Pause" / "▶ Reprendre"
+- **Temps écoulé** (gauche) : HH:MM:SS live
+- **Alarme dans** (droite) : countdown global ou "✅" ou "--:--:--"
+
+### Bannière de fin
+- "✅ Session terminée !" (visible quand toutes les cibles atteintes)
+- Bouton "🔄 Nouvelle fournée" (reset timer, conserve les niveaux de jauges)
+
+### Section Dragodindes
+- Compteur "X/10"
+- Bouton "＋ Ajouter une Dragodinde" (désactivé si 10 atteint)
+- Grille de cartes DD (drag-and-drop pour réordonner)
+
+---
+
+## 5. Carte Dragodinde (sous-composant d'Enclos)
+
+### En-tête
+- Poignée de drag (⠿)
+- Nom éditable (même comportement focus/blur)
+- Bouton supprimer (✕)
+
+### Pilules de stats (5)
+| Stat | Icône | Plage | Couleur |
+|------|-------|-------|---------|
+| Sérénité | 😊 | -5000 à +5000 | Violet |
+| Endurance | ⚡ | 0 à 20 000 | Jaune |
+| Maturité | 💧 | 0 à 20 000 | Cyan |
+| Amour | ❤️ | 0 à 20 000 | Rouge |
+| XP (niveau) | ⭐ | 1 à 200 | Orange |
+
+- Input éditable par pilule (focus/blur)
+- Mise à jour live pendant le timer
+- Effet lumineux (glow) quand la stat atteint un cap
+- Animation delta (+X / -X) qui pop à chaque tick de 10s
+
+### Cible sérénité (😊)
+- Input numérique (bornes selon jauge active : négatif si baffeur, positif si caresseur)
+- Bouton effacer (✕)
+- ETA affiché : "~Xm XXs" ou "✅" ou "➕/➖" (si jauge nécessaire non active)
+- Placeholder dynamique ("-5000 à 0" ou "0 à 5000")
+
+### Cible niveau (⭐)
+- Input numérique (1–200)
+- Bouton effacer (✕)
+- ETA affiché
+
+### Blocs jauges actives
+**Pour chaque jauge active :**
+
+**Mangeoire (XP) — bloc spécial :**
+- En-tête : icône + "XP / NIVEAU"
+- ETA niveau 200 : "→ NIV. 200 : ~Xj Xh"
+- Barre de progression vers 200 + pourcentage
+- Valeur live (NIV. X), delta (+X xp), countdown
+
+**Autres jauges :**
+- En-tête : icône + nom (coloré)
+- Valeur live, delta (pop animé), countdown
+- Barre de progression vers la cible
+
+### Badge "✓ TERMINÉ"
+- Affiché quand toutes les jauges actives de cette DD ont atteint leur cible
+
+---
+
+## 6. Accouplement — Enregistrement de croisements
+
+### Étape 1 : Sélection du parent 1
+- Barre de recherche (🔍) avec bouton effacer
+- Filtres par génération (onglets colorés : Toutes, Gen 1–10)
+- Grille de cartes race (image, nom, badge gen)
+- Message vide si aucun résultat
+
+### Étape 2 : Sélection du parent 2
+- Bouton "← Retour"
+- Carte du parent 1 affichée (non cliquable)
+- Label "Choisir le partenaire :"
+- Grille des partenaires compatibles uniquement
+  - Chaque carte montre "→ {bébé}" en dessous
+
+### Étape 3 : Résultat
+- Bouton "← Retour"
+- Affichage en ligne : Parent 1 + Parent 2 = Bébé (cartes avec images et badges gen)
+- Input "Couples" (nombre)
+- Input "Bébés obtenus" (nombre)
+- Bouton "Enregistrer" → commande `register-accouplement`
+
+---
+
+## 7. Réapprovisionnement — Calcul de plan d'élevage
+
+### Étape 1 : Sélection de la race cible
+- Barre de recherche (🔍) avec bouton effacer
+- Filtres par génération (Gen 2–10 uniquement)
+- Grille de cartes race (gen 2+ seulement)
+
+### Étape 2 : Plan d'élevage
+- Bouton "← Retour"
+- Carte cible + input quantité (mise à jour live du plan)
+
+**Matériaux (Gen 1) :**
+- Mini-cartes par race de base : image, nom, badge gen, ♂X ♀Y
+
+**Étapes (Gen 2+) :**
+Par génération, pour chaque croisement :
+- En-tête "Étape X — Gen Y" (coloré)
+- Affichage : Parent A + Parent B → Bébé (mini-cartes)
+- Input "Reproducteurs" (nombre, par croisement)
+- Bouton inversion ♂/♀ (swap la direction de reproduction)
+
+**Actions :**
+- Bouton "Sauvegarder le workflow"
+
+---
+
+## 8. Inventaire — Gestion du stock & simulation
+
+### Saisie du stock
+- Résumé : "X DD en stock (Y races)"
+- Bouton "Réinitialiser" (remet tout à 0)
+- Bouton "Calculer les bébés" (lance la simulation)
+- Barre de recherche (🔍)
+- Filtres par génération (Gen 1–10)
+- Grille de cartes race :
+  - Image, nom, badge gen
+  - Input ♂ (mâles) + input ♀ (femelles)
+  - Mise à jour du résumé en temps réel pendant la saisie
+- Persistance automatique du stock entre les changements d'écran
+
+### Résultats de simulation
+- En-tête global : "{N} bébés possibles sur {G} génération(s)"
+- Bouton "Sauvegarder le workflow"
+- Par génération :
+  - Badge gen + total bébés
+  - Par croisement : Parent A (♂X ♀Y) + Parent B (♂X ♀Y) → Bébé (×Z)
+- Section "DD restantes (non utilisées)" : mini-cartes du stock inutilisé
+
+### Algorithme
+- Allocation proportionnelle (pas glouton) : chaque parent est réparti équitablement entre les croisements qui l'utilisent
+- Cascade multi-générations (Gen 2 → Gen 10)
+
+---
+
+## 9. Workflows — Suivi des plans d'élevage
+
+### Vue liste
+- Titre "Plans d'élevage"
+- Barre de recherche (🔍)
+- Filtres par génération (uniquement les gens qui ont des workflows)
+- Message vide si aucun workflow
+
+**Par carte workflow :**
+- Image de la race cible + badge gen
+- Nom du workflow (tronqué)
+- "Cible × Quantité — Date de création"
+- Barre de progression globale (colorée) + "X/Y — Z%"
+- Bouton supprimer (✕)
+- Clic → vue détail
+
+### Vue détail
+- Bouton "← Retour"
+- **Carte d'en-tête** :
+  - Image + badge gen
+  - Nom, cible × quantité, date
+  - Barre de progression globale + pourcentage
+
+**Section Matériaux de base (si présents) :**
+- Par matériau :
+  - Nom de la race (coloré)
+  - Mini barre de progression
+  - Input de progression (nombre)
+  - Label "X / Y"
+
+**Sections par génération :**
+- En-tête "Génération X" (coloré)
+- Par croisement :
+  - Nom race (coloré)
+  - "ParentA × ParentB — X couples, repro ×Y"
+  - Input de progression (nombre)
+  - Label "X / Y"
+  - Mini barre de progression
+
+### Temps réel
+- La barre de progression globale se met à jour pendant la saisie
+- Les barres individuelles se mettent à jour en direct
+
+---
+
+## 10. Paramètres
+
+### Carte 🔊 Son d'alarme
+- Select : Arpège, Pulsation, Fanfare, Cloche
+- Bouton ▶ (test du son sélectionné, joue directement via WebAudio)
+
+### Carte 🔔 Notifications
+- **Bouton Notifs PC** : "🔔 Notifs PC activées" / "🔕 Notifs PC désactivées" (toggle)
+- **Bouton Mobile** : "📱 Mobile activé" / "📱 Activer mobile" (ouvre la modal)
+
+### Modal ntfy (notifications mobiles)
+**Si non activé :**
+- Texte explicatif
+- Bouton "🔔 Activer les notifications mobiles" (génère un topic automatique)
+
+**Si activé :**
+- ① QR code pour télécharger l'app ntfy (Play Store / App Store)
+- ② QR code pour s'abonner automatiquement aux notifications
+- Bouton "🔔 Tester" (envoie une notification de test)
+- Bouton "✕ Désactiver" (supprime le topic)
+- Bouton "Fermer"
+
+---
+
+## Comportements transversaux
+
+### Focus/blur des inputs (tous les écrans)
+- Focus : vide le champ, sauvegarde la valeur précédente
+- Blur sans valeur : restaure la valeur précédente
+- Blur avec valeur : applique et sauvegarde
+- Escape : annule et restaure
+- Enter : valide (blur)
+
+### Système de timer
+- Snapshot des jauges et stats au démarrage
+- Calcul par segments (recharges en cours de session)
+- Gel au cap absolu de chaque stat
+- Alarme unique quand toutes les cibles sont atteintes (son + notification PC + ntfy mobile)
+- Temps réel : requestAnimationFrame continu
+
+### Persistance
+- Sauvegarde automatique après chaque mutation d'état
+- LocalStorage (web) ou fichier JSON (Electron userData)
+- Isolation des données DEV / production
+
+### Drag-and-drop
+- Onglets enclos : réordonnancement par glisser-déposer
+- Cartes dragodindes : réordonnancement dans le même enclos
diff --git a/docs/plans/2026-03-27-ddd-architecture-plan.md b/docs/plans/2026-03-27-ddd-architecture-plan.md
new file mode 100644
index 0000000..93c3d1b
--- /dev/null
+++ b/docs/plans/2026-03-27-ddd-architecture-plan.md
@@ -0,0 +1,2113 @@
+# DDD Hexagonal Architecture — Implementation Plan
+
+> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
+
+**Goal:** Refactorer le monolithe `src/index.html` (3130 lignes) en architecture DDD hexagonale avec CQRS, TypeScript strict, Vite, et tests complets (unit, functional, regression).
+
+**Architecture:** Domain-Driven Design avec couches strictes (Domain → Application → Infrastructure → Presentation). Le domaine est pur TypeScript sans dépendance. Les ports (interfaces) sont définis dans le domaine, implémentés dans l'infrastructure. CQRS sépare les commands (écriture) des queries (lecture). Injection de dépendances par constructeur.
+
+**Tech Stack:** Vite + vite-plugin-electron, TypeScript strict, Vitest, Electron 32
+
+---
+
+## Phase 1 — Setup tooling
+
+### Task 1: Initialiser Vite + TypeScript + Vitest
+
+**Files:**
+- Create: `vite.config.ts`
+- Create: `vitest.config.ts`
+- Create: `tsconfig.json`
+- Modify: `package.json`
+- Create: `src/renderer/index.ts` (point d'entrée renderer vide)
+- Create: `src/index.html` (shell HTML minimal — remplace l'ancien après migration complète)
+
+**Step 1: Installer les dépendances**
+
+```bash
+npm install --save-dev vite vite-plugin-electron vite-plugin-electron-renderer typescript vitest @types/node
+```
+
+**Step 2: Créer tsconfig.json**
+
+```json
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "exactOptionalPropertyTypes": false,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "outDir": "dist-ts",
+    "rootDir": "src",
+    "baseUrl": ".",
+    "paths": {
+      "@domain/*": ["src/domain/*"],
+      "@application/*": ["src/application/*"],
+      "@infrastructure/*": ["src/infrastructure/*"],
+      "@presentation/*": ["src/presentation/*"]
+    }
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["node_modules", "dist", "dist-ts", "tests"]
+}
+```
+
+**Step 3: Créer vite.config.ts**
+
+```typescript
+import { defineConfig } from 'vite';
+import electron from 'vite-plugin-electron';
+import renderer from 'vite-plugin-electron-renderer';
+import { resolve } from 'path';
+
+export default defineConfig({
+  plugins: [
+    electron([
+      {
+        entry: 'src/infrastructure/electron/main.ts',
+        vite: {
+          build: {
+            outDir: 'dist-electron',
+            rollupOptions: { external: ['electron'] },
+          },
+        },
+      },
+      {
+        entry: 'src/infrastructure/electron/preload.ts',
+        onstart(args) { args.reload(); },
+        vite: {
+          build: {
+            outDir: 'dist-electron',
+            rollupOptions: { external: ['electron'] },
+          },
+        },
+      },
+    ]),
+    renderer(),
+  ],
+  resolve: {
+    alias: {
+      '@domain': resolve(__dirname, 'src/domain'),
+      '@application': resolve(__dirname, 'src/application'),
+      '@infrastructure': resolve(__dirname, 'src/infrastructure'),
+      '@presentation': resolve(__dirname, 'src/presentation'),
+    },
+  },
+  root: '.',
+  build: {
+    outDir: 'dist-vite',
+  },
+});
+```
+
+**Step 4: Créer vitest.config.ts**
+
+```typescript
+import { defineConfig } from 'vitest/config';
+import { resolve } from 'path';
+
+export default defineConfig({
+  resolve: {
+    alias: {
+      '@domain': resolve(__dirname, 'src/domain'),
+      '@application': resolve(__dirname, 'src/application'),
+      '@infrastructure': resolve(__dirname, 'src/infrastructure'),
+      '@presentation': resolve(__dirname, 'src/presentation'),
+    },
+  },
+  test: {
+    globals: true,
+    environment: 'node',
+    include: ['tests/**/*.test.ts'],
+    coverage: {
+      provider: 'v8',
+      include: ['src/domain/**', 'src/application/**'],
+      thresholds: { branches: 80, functions: 80, lines: 80 },
+    },
+  },
+});
+```
+
+**Step 5: Mettre à jour package.json scripts**
+
+Ajouter dans `"scripts"`:
+```json
+{
+  "dev": "vite",
+  "build:vite": "vite build",
+  "test": "vitest run",
+  "test:watch": "vitest",
+  "test:coverage": "vitest run --coverage"
+}
+```
+
+**Step 6: Créer les dossiers de structure**
+
+```bash
+mkdir -p src/domain/{entities,value-objects,services,ports,events}
+mkdir -p src/application/{commands,queries,handlers,event-handlers}
+mkdir -p src/infrastructure/{persistence,notifications,alarm,electron}
+mkdir -p src/presentation/{components,styles,state}
+mkdir -p tests/{unit/domain,unit/application,functional,regression}
+```
+
+**Step 7: Vérifier que vitest fonctionne**
+
+Créer `tests/unit/domain/smoke.test.ts`:
+```typescript
+import { describe, it, expect } from 'vitest';
+
+describe('smoke test', () => {
+  it('should run', () => {
+    expect(1 + 1).toBe(2);
+  });
+});
+```
+
+Run: `npx vitest run`
+Expected: 1 test PASS
+
+**Step 8: Commit**
+
+```
+feat: setup Vite + TypeScript + Vitest tooling
+```
+
+---
+
+## Phase 2 — Domain Value Objects
+
+### Task 2: Value Object — GaugeType
+
+**Files:**
+- Create: `src/domain/value-objects/GaugeType.ts`
+- Test: `tests/unit/domain/GaugeType.test.ts`
+
+**Step 1: Write failing test**
+
+```typescript
+import { describe, it, expect } from 'vitest';
+import { GaugeType, GAUGE_DEFS, StatType } from '@domain/value-objects/GaugeType';
+
+describe('GaugeType', () => {
+  it('should have 6 gauge types', () => {
+    const types: GaugeType[] = ['baffeur', 'caresseur', 'foudroyeur', 'abreuvoir', 'dragofesse', 'mangeoire'];
+    expect(types).toHaveLength(6);
+    types.forEach(t => expect(GAUGE_DEFS[t]).toBeDefined());
+  });
+
+  it('baffeur decreases serenite', () => {
+    expect(GAUGE_DEFS.baffeur.stat).toBe('serenite');
+    expect(GAUGE_DEFS.baffeur.dir).toBe(-1);
+  });
+
+  it('caresseur increases serenite', () => {
+    expect(GAUGE_DEFS.caresseur.stat).toBe('serenite');
+    expect(GAUGE_DEFS.caresseur.dir).toBe(1);
+  });
+
+  it('mangeoire is XP type', () => {
+    expect(GAUGE_DEFS.mangeoire.isXp).toBe(true);
+    expect(GAUGE_DEFS.mangeoire.stat).toBe('xp');
+  });
+});
+```
+
+**Step 2: Run test — expected FAIL**
+
+Run: `npx vitest run tests/unit/domain/GaugeType.test.ts`
+
+**Step 3: Implement**
+
+```typescript
+export type GaugeType = 'baffeur' | 'caresseur' | 'foudroyeur' | 'abreuvoir' | 'dragofesse' | 'mangeoire';
+export type StatType = 'serenite' | 'endurance' | 'maturite' | 'amour' | 'xp';
+
+export interface GaugeDef {
+  readonly label: string;
+  readonly icon: string;
+  readonly cssVar: string;
+  readonly stat: StatType;
+  readonly dir: -1 | 1;
+  readonly isXp?: true;
+}
+
+export const GAUGE_DEFS: Readonly<Record<GaugeType, GaugeDef>> = {
+  baffeur:    { label: 'Baffeur',    icon: '➖', cssVar: '--ser',   stat: 'serenite',  dir: -1 },
+  caresseur:  { label: 'Caresseur',  icon: '➕', cssVar: '--ser',   stat: 'serenite',  dir:  1 },
+  foudroyeur: { label: 'Foudroyeur', icon: '⚡', cssVar: '--end',   stat: 'endurance', dir:  1 },
+  abreuvoir:  { label: 'Abreuvoir',  icon: '💧', cssVar: '--mat',   stat: 'maturite',  dir:  1 },
+  dragofesse: { label: 'Dragofesse', icon: '❤',  cssVar: '--amour', stat: 'amour',     dir:  1 },
+  mangeoire:  { label: 'Mangeoire',  icon: '🍖', cssVar: '--xp',    stat: 'xp',        dir:  1, isXp: true },
+};
+
+export interface StatDef {
+  readonly label: string;
+  readonly min: number;
+  readonly max: number;
+  readonly cssVar: string;
+  readonly isLevel?: true;
+}
+
+export const STAT_DEFS: Readonly<Record<StatType, StatDef>> = {
+  serenite:  { label: 'Sérénité',  min: -5000, max: 5000,  cssVar: '--ser' },
+  endurance: { label: 'Endurance', min: 0,     max: 20000, cssVar: '--end' },
+  maturite:  { label: 'Maturité',  min: 0,     max: 20000, cssVar: '--mat' },
+  amour:     { label: 'Amour',     min: 0,     max: 20000, cssVar: '--amour' },
+  xp:        { label: 'Niveau',    min: 1,     max: 200,   cssVar: '--xp', isLevel: true },
+};
+
+export const DEFAULT_TARGETS: Readonly<Record<GaugeType, number>> = {
+  baffeur: -5000, caresseur: 40, foudroyeur: 20000, abreuvoir: 20000, dragofesse: 20000, mangeoire: 100,
+};
+
+export function targetRange(gid: GaugeType): { min: number; max: number } {
+  const def = GAUGE_DEFS[gid];
+  if (def.isXp) return { min: 1, max: 200 };
+  const sd = STAT_DEFS[def.stat];
+  if (def.dir < 0) return { min: sd.min, max: 0 };
+  if (def.dir > 0 && sd.min < 0) return { min: 0, max: sd.max };
+  return { min: sd.min, max: sd.max };
+}
+```
+
+**Step 4: Run test — expected PASS**
+
+**Step 5: Commit** `feat(domain): add GaugeType value object`
+
+---
+
+### Task 3: Value Object — Tier
+
+**Files:**
+- Create: `src/domain/value-objects/Tier.ts`
+- Test: `tests/unit/domain/Tier.test.ts`
+
+**Step 1: Write failing test**
+
+```typescript
+import { describe, it, expect } from 'vitest';
+import { tierRate, tierNum, TIER_THRESHOLDS } from '@domain/value-objects/Tier';
+
+describe('Tier', () => {
+  it('tier 1: level 0-40000, rate 10', () => {
+    expect(tierRate(0)).toBe(10);
+    expect(tierRate(39999)).toBe(10);
+    expect(tierRate(40000)).toBe(10);
+    expect(tierNum(0)).toBe(1);
+  });
+
+  it('tier 2: level 40001-70000, rate 20', () => {
+    expect(tierRate(40001)).toBe(20);
+    expect(tierRate(70000)).toBe(20);
+    expect(tierNum(50000)).toBe(2);
+  });
+
+  it('tier 3: level 70001-90000, rate 30', () => {
+    expect(tierRate(70001)).toBe(30);
+    expect(tierRate(90000)).toBe(30);
+    expect(tierNum(80000)).toBe(3);
+  });
+
+  it('tier 4: level 90001+, rate 40', () => {
+    expect(tierRate(90001)).toBe(40);
+    expect(tierRate(100000)).toBe(40);
+    expect(tierNum(95000)).toBe(4);
+  });
+});
+```
+
+**Step 2: Run test — expected FAIL**
+
+**Step 3: Implement**
+
+```typescript
+export const TIER_THRESHOLDS = [
+  { lo: 90000, rate: 40, num: 4 },
+  { lo: 70000, rate: 30, num: 3 },
+  { lo: 40000, rate: 20, num: 2 },
+  { lo: 0,     rate: 10, num: 1 },
+] as const;
+
+export function tierRate(level: number): number {
+  return level > 90000 ? 40 : level > 70000 ? 30 : level > 40000 ? 20 : 10;
+}
+
+export function tierNum(level: number): number {
+  return level > 90000 ? 4 : level > 70000 ? 3 : level > 40000 ? 2 : 1;
+}
+```
+
+**Step 4: Run test — expected PASS**
+
+**Step 5: Commit** `feat(domain): add Tier value object`
+
+---
+
+### Task 4: Value Object — Race + Gender
+
+**Files:**
+- Create: `src/domain/value-objects/Race.ts`
+- Create: `src/domain/value-objects/Gender.ts`
+- Test: `tests/unit/domain/Race.test.ts`
+
+**Step 1: Write failing test**
+
+```typescript
+import { describe, it, expect } from 'vitest';
+import { RACE_GEN, GEN_COLORS, isBaseRace, generationOf } from '@domain/value-objects/Race';
+import { Gender } from '@domain/value-objects/Gender';
+
+describe('Race', () => {
+  it('base races are gen 1', () => {
+    expect(generationOf('Rousse')).toBe(1);
+    expect(generationOf('Amande')).toBe(1);
+    expect(generationOf('Dorée')).toBe(1);
+    expect(isBaseRace('Rousse')).toBe(true);
+  });
+
+  it('gen 2 races are correctly mapped', () => {
+    expect(generationOf('Dorée et Rousse')).toBe(2);
+    expect(isBaseRace('Dorée et Rousse')).toBe(false);
+  });
+
+  it('GEN_COLORS has 10 entries', () => {
+    expect(Object.keys(GEN_COLORS)).toHaveLength(10);
+  });
+});
+
+describe('Gender', () => {
+  it('has male, female, neutral', () => {
+    const values: Gender[] = ['m', 'f', 'n'];
+    expect(values).toHaveLength(3);
+  });
+});
+```
+
+**Step 2: Run test — expected FAIL**
+
+**Step 3: Implement Gender.ts**
+
+```typescript
+export type Gender = 'm' | 'f' | 'n';
+```
+
+**Step 3b: Implement Race.ts**
+
+```typescript
+// Copier RACES_DATA, BREEDING_RECIPES, RACE_GEN, GEN_COLORS, RACE_BASE_COLORS depuis index.html
+// Transformer en exports TypeScript typés
+
+export const GEN_COLORS: Readonly<Record<number, string>> = {
+  1:'#c8622a',2:'#e8b820',3:'#6040b0',4:'#2a8acc',5:'#c03050',
+  6:'#d040a0',7:'#c8c0a0',8:'#20a8b0',9:'#28a058',10:'#8050a0',
+};
+
+export const RACE_BASE_COLORS: Readonly<Record<string, string>> = {
+  'Rousse':'#c8622a','Amande':'#d4b48a','Dorée':'#e8b820',
+  'Ebène':'#2a2a2a','Indigo':'#6040b0','Pourpre':'#c03050',
+  'Orchidée':'#d040a0','Ivoire':'#c8c0a0','Turquoise':'#20a8b0',
+  'Emeraude':'#28a058','Prune':'#8050a0',
+};
+
+export interface RaceData {
+  readonly name: string;
+  readonly stats: readonly string[];
+  readonly parents: readonly [string, string] | null;
+  readonly icon: string;
+}
+
+// RACES_DATA: copié intégralement depuis index.html lignes 510-592
+export const RACES_DATA: Readonly<Record<number, readonly RaceData[]>> = {
+  // ... (copier l'intégralité depuis le monolithe)
+};
+
+// Lookup table: baby → [parentA, parentB]
+export const BREEDING_RECIPES: Readonly<Record<string, readonly [string, string]>> = {
+  // ... (copier l'intégralité depuis index.html lignes 597-661)
+};
+
+// Derived lookups — computed at module load
+export const RACE_GEN: Record<string, number> = {};
+
+// Initialiser RACE_GEN
+['Rousse','Amande','Dorée'].forEach(n => { RACE_GEN[n] = 1; });
+for (const [genStr, races] of Object.entries(RACES_DATA)) {
+  const gen = Number(genStr);
+  for (const r of races) { RACE_GEN[r.name] = gen; }
+}
+
+export function generationOf(raceName: string): number {
+  return RACE_GEN[raceName] ?? 0;
+}
+
+export function isBaseRace(raceName: string): boolean {
+  return generationOf(raceName) === 1;
+}
+
+export function raceColor(name: string): string {
+  const order = ['Emeraude','Prune','Ivoire','Turquoise','Orchidée','Pourpre','Indigo','Ebène','Dorée','Amande','Rousse'];
+  for (const k of order) { if (name.includes(k)) return RACE_BASE_COLORS[k] ?? '#888'; }
+  return '#888';
+}
+```
+
+**Step 4: Run test — expected PASS**
+
+**Step 5: Commit** `feat(domain): add Race and Gender value objects`
+
+---
+
+### Task 5: Value Object — XpTable
+
+**Files:**
+- Create: `src/domain/value-objects/XpTable.ts`
+- Test: `tests/unit/domain/XpTable.test.ts`
+
+**Step 1: Write failing test**
+
+```typescript
+import { describe, it, expect } from 'vitest';
+import { xpForLevel, levelFromXp } from '@domain/value-objects/XpTable';
+
+describe('XpTable', () => {
+  it('level 1 requires 0 XP', () => {
+    expect(xpForLevel(1)).toBe(0);
+  });
+
+  it('level 200 requires 867582 XP', () => {
+    expect(xpForLevel(200)).toBe(867582);
+  });
+
+  it('clamps below 1', () => {
+    expect(xpForLevel(0)).toBe(0);
+    expect(xpForLevel(-5)).toBe(0);
+  });
+
+  it('clamps above 200', () => {
+    expect(xpForLevel(250)).toBe(867582);
+  });
+
+  it('levelFromXp returns correct level', () => {
+    expect(levelFromXp(0)).toBe(1);
+    expect(levelFromXp(18)).toBe(1);
+    expect(levelFromXp(19)).toBe(2);
+    expect(levelFromXp(867582)).toBe(200);
+    expect(levelFromXp(999999)).toBe(200);
+  });
+
+  it('roundtrip: xpForLevel → levelFromXp', () => {
+    for (let lvl = 1; lvl <= 200; lvl++) {
+      expect(levelFromXp(xpForLevel(lvl))).toBe(lvl);
+    }
+  });
+});
+```
+
+**Step 2: Run test — expected FAIL**
+
+**Step 3: Implement** — copier XP_RAW + xpForLevel + levelFromXp depuis index.html lignes 357-365
+
+```typescript
+export const XP_RAW: Readonly<Record<number, number>> = {
+  1:0,2:19,3:49,4:96,5:161,6:246,7:353,8:481,9:633,10:809,
+  // ... (copier intégralement les 200 entrées)
+  200:867582
+};
+
+export function xpForLevel(lvl: number): number {
+  return XP_RAW[Math.min(200, Math.max(1, Math.round(lvl)))] ?? 0;
+}
+
+export function levelFromXp(xp: number): number {
+  if (xp >= XP_RAW[200]!) return 200;
+  for (let i = 199; i >= 1; i--) {
+    if (XP_RAW[i]! <= xp) return i;
+  }
+  return 1;
+}
+```
+
+**Step 4: Run test — expected PASS**
+
+**Step 5: Commit** `feat(domain): add XpTable value object`
+
+---
+
+## Phase 3 — Domain Services (pure math)
+
+### Task 6: GaugeCalculator
+
+**Files:**
+- Create: `src/domain/services/GaugeCalculator.ts`
+- Test: `tests/unit/domain/GaugeCalculator.test.ts`
+
+**Step 1: Write failing tests**
+
+```typescript
+import { describe, it, expect } from 'vitest';
+import { gainedIn, timeToGain, gaugeAfter, elapsed } from '@domain/services/GaugeCalculator';
+
+describe('GaugeCalculator', () => {
+
+  describe('gainedIn', () => {
+    it('tier 1 only: 100 pts in 100 sec (10 ticks × 10pts)', () => {
+      expect(gainedIn(100, 100)).toBe(100);
+    });
+
+    it('zero seconds = zero gain', () => {
+      expect(gainedIn(50000, 0)).toBe(0);
+    });
+
+    it('crosses tier boundary 2→1', () => {
+      // Start at 40010, 10 sec = 1 tick. Tier 2 rate = 20. Gain = 20 but only 10 in tier 2
+      expect(gainedIn(40010, 10)).toBe(10);
+    });
+
+    it('large gauge drains through multiple tiers', () => {
+      // Start at 100000 (tier 4), 5000 sec = 500 ticks
+      // Tier 4: 100000→90000 = 10000/40 = 250 ticks → gain 10000
+      // Tier 3: 90000→70000 = 20000/30 = 666.67 → 250 remaining ticks → 250*30 = 7500
+      // Total = 17500
+      expect(gainedIn(100000, 5000)).toBe(17500);
+    });
+  });
+
+  describe('timeToGain', () => {
+    it('zero points = zero time', () => {
+      expect(timeToGain(50000, 0)).toBe(0);
+    });
+
+    it('negative points = zero time', () => {
+      expect(timeToGain(50000, -10)).toBe(0);
+    });
+
+    it('tier 1: 100 pts = 100 sec', () => {
+      expect(timeToGain(100, 100)).toBe(100);
+    });
+
+    it('returns Infinity if level too low', () => {
+      expect(timeToGain(0, 100)).toBe(Infinity);
+    });
+  });
+
+  describe('gaugeAfter', () => {
+    it('tier 1: level 100 after 100 sec = 0', () => {
+      expect(gaugeAfter(100, 100)).toBe(0);
+    });
+
+    it('does not go below 0', () => {
+      expect(gaugeAfter(50, 1000)).toBe(0);
+    });
+
+    it('no time = same level', () => {
+      expect(gaugeAfter(50000, 0)).toBe(50000);
+    });
+  });
+
+  describe('elapsed', () => {
+    it('no start time = 0', () => {
+      expect(elapsed({ startTime: null, running: false, pausedAt: null, pausedMs: 0 })).toBe(0);
+    });
+
+    it('running timer', () => {
+      const now = Date.now();
+      const timer = { startTime: now - 10000, running: true, pausedAt: null, pausedMs: 0 };
+      const el = elapsed(timer);
+      expect(el).toBeGreaterThanOrEqual(9.9);
+      expect(el).toBeLessThanOrEqual(10.5);
+    });
+
+    it('paused timer', () => {
+      const now = Date.now();
+      const timer = { startTime: now - 10000, running: false, pausedAt: now - 5000, pausedMs: 0 };
+      expect(elapsed(timer)).toBeCloseTo(5, 0);
+    });
+  });
+});
+```
+
+**Step 2: Run test — expected FAIL**
+
+**Step 3: Implement**
+
+```typescript
+export interface TimerState {
+  readonly startTime: number | null;
+  readonly running: boolean;
+  readonly pausedAt: number | null;
+  readonly pausedMs: number;
+}
+
+export function gainedIn(lvl: number, sec: number): number {
+  const T = [
+    { lo: 90000, r: 40 },
+    { lo: 70000, r: 30 },
+    { lo: 40000, r: 20 },
+    { lo: 0,     r: 10 },
+  ];
+  let g = Math.min(Math.max(lvl, 0), 100000);
+  let tl = Math.floor(sec / 10);
+  let out = 0;
+  for (const { lo, r } of T) {
+    if (g <= lo || tl <= 0) continue;
+    const a = g - lo;
+    const m = Math.floor(a / r);
+    const u = Math.min(m, tl);
+    out += u * r;
+    tl -= u;
+    g = lo;
+  }
+  return out;
+}
+
+export function timeToGain(lvl: number, pts: number): number {
+  if (pts <= 0) return 0;
+  const T = [
+    { lo: 90000, r: 40 },
+    { lo: 70000, r: 30 },
+    { lo: 40000, r: 20 },
+    { lo: 0,     r: 10 },
+  ];
+  let s = 0, rem = pts;
+  let g = Math.min(Math.max(lvl, 0), 100000);
+  for (const { lo, r } of T) {
+    if (g <= lo || rem <= 0) continue;
+    const a = g - lo;
+    const d = Math.min(rem, a);
+    s += Math.ceil(d / r) * 10;
+    rem -= d;
+    g = lo;
+  }
+  return rem > 0 ? Infinity : s;
+}
+
+export function gaugeAfter(lvl: number, sec: number): number {
+  const T = [
+    { lo: 90000, r: 40 },
+    { lo: 70000, r: 30 },
+    { lo: 40000, r: 20 },
+    { lo: 0,     r: 10 },
+  ];
+  let g = Math.min(Math.max(lvl, 0), 100000);
+  let tl = Math.floor(sec / 10);
+  for (const { lo, r } of T) {
+    if (g <= lo || tl <= 0) continue;
+    const a = g - lo;
+    const m = Math.floor(a / r);
+    const u = Math.min(m, tl);
+    g -= u * r;
+    tl -= u;
+  }
+  return g;
+}
+
+export function elapsed(timer: TimerState): number {
+  if (!timer.startTime) return 0;
+  if (timer.running) return (Date.now() - timer.startTime - timer.pausedMs) / 1000;
+  if (timer.pausedAt) return (timer.pausedAt - timer.startTime - timer.pausedMs) / 1000;
+  return 0;
+}
+```
+
+**Step 4: Run test — expected PASS**
+
+**Step 5: Commit** `feat(domain): add GaugeCalculator service`
+
+---
+
+### Task 7: BreedingService
+
+**Files:**
+- Create: `src/domain/services/BreedingService.ts`
+- Test: `tests/unit/domain/BreedingService.test.ts`
+
+**Step 1: Write failing test**
+
+```typescript
+import { describe, it, expect } from 'vitest';
+import { BreedingService } from '@domain/services/BreedingService';
+
+describe('BreedingService', () => {
+  const svc = new BreedingService();
+
+  it('deduces baby from two parents', () => {
+    expect(svc.deduceBaby('Rousse', 'Dorée')).toBe('Dorée et Rousse');
+    expect(svc.deduceBaby('Dorée', 'Rousse')).toBe('Dorée et Rousse');
+  });
+
+  it('returns null for incompatible parents', () => {
+    expect(svc.deduceBaby('Rousse', 'Rousse')).toBeNull();
+  });
+
+  it('lists compatible partners for a race', () => {
+    const partners = svc.getCompatiblePartners('Rousse');
+    expect(partners.length).toBeGreaterThan(0);
+    expect(partners.some(p => p.partner === 'Dorée')).toBe(true);
+  });
+
+  it('gets parents for a baby race', () => {
+    const parents = svc.getParents('Dorée et Rousse');
+    expect(parents).toEqual(['Rousse', 'Dorée']);
+  });
+
+  it('returns null parents for base race', () => {
+    expect(svc.getParents('Rousse')).toBeNull();
+  });
+});
+```
+
+**Step 2: Run test — expected FAIL**
+
+**Step 3: Implement**
+
+```typescript
+import { BREEDING_RECIPES } from '@domain/value-objects/Race';
+
+interface PartnerInfo {
+  readonly partner: string;
+  readonly baby: string;
+  readonly gen: number;
+}
+
+export class BreedingService {
+  private readonly byParents: Map<string, string>;
+  private readonly partners: Map<string, PartnerInfo[]>;
+
+  constructor() {
+    this.byParents = new Map();
+    this.partners = new Map();
+
+    for (const [baby, [a, b]] of Object.entries(BREEDING_RECIPES)) {
+      const gen = (RACE_GEN[baby] ?? 0);
+      // Bidirectional key
+      this.byParents.set(`${a}|${b}`, baby);
+      this.byParents.set(`${b}|${a}`, baby);
+
+      // Partners lookup
+      if (!this.partners.has(a)) this.partners.set(a, []);
+      this.partners.get(a)!.push({ partner: b, baby, gen });
+      if (a !== b) {
+        if (!this.partners.has(b)) this.partners.set(b, []);
+        this.partners.get(b)!.push({ partner: a, baby, gen });
+      }
+    }
+  }
+
+  deduceBaby(parent1: string, parent2: string): string | null {
+    return this.byParents.get(`${parent1}|${parent2}`) ?? null;
+  }
+
+  getCompatiblePartners(race: string): readonly PartnerInfo[] {
+    return this.partners.get(race) ?? [];
+  }
+
+  getParents(babyRace: string): readonly [string, string] | null {
+    const recipe = BREEDING_RECIPES[babyRace];
+    return recipe ? [recipe[0], recipe[1]] : null;
+  }
+}
+```
+
+Note: importer `RACE_GEN` depuis `@domain/value-objects/Race`.
+
+**Step 4: Run test — expected PASS**
+
+**Step 5: Commit** `feat(domain): add BreedingService`
+
+---
+
+### Task 8: SerenityCalculator + XpCalculator
+
+**Files:**
+- Create: `src/domain/services/SerenityCalculator.ts`
+- Create: `src/domain/services/XpCalculator.ts`
+- Test: `tests/unit/domain/SerenityCalculator.test.ts`
+- Test: `tests/unit/domain/XpCalculator.test.ts`
+
+**Step 1: Write failing tests**
+
+SerenityCalculator.test.ts:
+```typescript
+import { describe, it, expect } from 'vitest';
+import { SerenityCalculator } from '@domain/services/SerenityCalculator';
+
+describe('SerenityCalculator', () => {
+  const calc = new SerenityCalculator();
+
+  it('returns done when target reached', () => {
+    const eta = calc.computeEta({
+      currentSerenite: -5000,
+      target: -5000,
+      activeGauges: ['baffeur'],
+      gaugeLevels: { baffeur: 50000 },
+    });
+    expect(eta.done).toBe(true);
+  });
+
+  it('needs baffeur to decrease serenite', () => {
+    const eta = calc.computeEta({
+      currentSerenite: 0,
+      target: -5000,
+      activeGauges: [],
+      gaugeLevels: {},
+    });
+    expect(eta.needsGauge).toBe('baffeur');
+  });
+
+  it('computes time to target', () => {
+    const eta = calc.computeEta({
+      currentSerenite: 0,
+      target: -5000,
+      activeGauges: ['baffeur'],
+      gaugeLevels: { baffeur: 50000 },
+    });
+    expect(eta.done).toBe(false);
+    expect(eta.seconds).toBeGreaterThan(0);
+    expect(eta.seconds).toBeLessThan(Infinity);
+  });
+});
+```
+
+XpCalculator.test.ts:
+```typescript
+import { describe, it, expect } from 'vitest';
+import { XpCalculator } from '@domain/services/XpCalculator';
+
+describe('XpCalculator', () => {
+  const calc = new XpCalculator();
+
+  it('returns done when level reached', () => {
+    const eta = calc.computeEta({ currentLevel: 100, target: 100, gaugeLevels: { mangeoire: 50000 }, activeGauges: ['mangeoire'] });
+    expect(eta.done).toBe(true);
+  });
+
+  it('needs mangeoire gauge', () => {
+    const eta = calc.computeEta({ currentLevel: 1, target: 100, gaugeLevels: {}, activeGauges: [] });
+    expect(eta.needsGauge).toBe('mangeoire');
+  });
+
+  it('computes seconds to level up', () => {
+    const eta = calc.computeEta({ currentLevel: 1, target: 10, gaugeLevels: { mangeoire: 50000 }, activeGauges: ['mangeoire'] });
+    expect(eta.done).toBe(false);
+    expect(eta.seconds).toBeGreaterThan(0);
+  });
+});
+```
+
+**Step 2: Run tests — expected FAIL**
+
+**Step 3: Implement both**
+
+SerenityCalculator.ts:
+```typescript
+import { timeToGain } from './GaugeCalculator';
+import type { GaugeType } from '@domain/value-objects/GaugeType';
+
+export interface SerenityEtaInput {
+  currentSerenite: number;
+  target: number | null;
+  activeGauges: readonly string[];
+  gaugeLevels: Readonly<Record<string, number>>;
+}
+
+export interface EtaResult {
+  done: boolean;
+  seconds: number;
+  needsGauge?: GaugeType;
+}
+
+export class SerenityCalculator {
+  computeEta(input: SerenityEtaInput): EtaResult {
+    const { currentSerenite, target, activeGauges, gaugeLevels } = input;
+    if (target === null || target === undefined) return { done: false, seconds: 0 };
+    const diff = target - currentSerenite;
+    if (diff === 0) return { done: true, seconds: 0 };
+
+    const needUp = diff > 0;
+    const gid: GaugeType = needUp ? 'caresseur' : 'baffeur';
+
+    if (!activeGauges.includes(gid)) return { done: false, seconds: Infinity, needsGauge: gid };
+
+    const gl = gaugeLevels[gid] ?? 0;
+    const pts = Math.abs(diff);
+    const sec = timeToGain(gl, pts);
+    return { done: false, seconds: sec };
+  }
+}
+```
+
+XpCalculator.ts:
+```typescript
+import { tierRate } from '@domain/value-objects/Tier';
+import { xpForLevel } from '@domain/value-objects/XpTable';
+import type { GaugeType } from '@domain/value-objects/GaugeType';
+
+export interface XpEtaInput {
+  currentLevel: number;
+  target: number | null;
+  gaugeLevels: Readonly<Record<string, number>>;
+  activeGauges: readonly string[];
+}
+
+export interface EtaResult {
+  done: boolean;
+  seconds: number;
+  needsGauge?: GaugeType;
+}
+
+export class XpCalculator {
+  computeEta(input: XpEtaInput): EtaResult {
+    const { currentLevel, target, gaugeLevels, activeGauges } = input;
+    if (target === null || target === undefined) return { done: false, seconds: 0 };
+    if (currentLevel >= target) return { done: true, seconds: 0 };
+    if (!activeGauges.includes('mangeoire')) return { done: false, seconds: Infinity, needsGauge: 'mangeoire' };
+
+    const gl = gaugeLevels.mangeoire ?? 0;
+    const xpNeeded = Math.max(0, xpForLevel(target) - xpForLevel(currentLevel));
+    if (xpNeeded <= 0) return { done: true, seconds: 0 };
+
+    const rate = Math.max(10, tierRate(gl));
+    const sec = Math.ceil(xpNeeded / rate) * 10;
+    return { done: false, seconds: sec };
+  }
+}
+```
+
+**Step 4: Run tests — expected PASS**
+
+**Step 5: Commit** `feat(domain): add SerenityCalculator and XpCalculator`
+
+---
+
+### Task 9: ReapproCalculator
+
+**Files:**
+- Create: `src/domain/services/ReapproCalculator.ts`
+- Test: `tests/unit/domain/ReapproCalculator.test.ts`
+
+**Step 1: Write failing test**
+
+```typescript
+import { describe, it, expect } from 'vitest';
+import { ReapproCalculator } from '@domain/services/ReapproCalculator';
+
+describe('ReapproCalculator', () => {
+  const calc = new ReapproCalculator();
+
+  it('computes gen1 needs for a gen2 race', () => {
+    const result = calc.compute({
+      target: 'Dorée et Rousse',
+      qty: 4,
+      repro: {},
+      inverted: {},
+    });
+    expect(result.steps.length).toBe(1);
+    expect(result.steps[0]!.parentA).toBe('Rousse');
+    expect(result.steps[0]!.parentB).toBe('Dorée');
+    expect(result.gen1Needs.length).toBe(2);
+    const totalGen1 = result.gen1Needs.reduce((s, n) => s + n.total, 0);
+    expect(totalGen1).toBe(8); // 4 couples = 4 Rousse + 4 Dorée
+  });
+
+  it('handles gender inversion', () => {
+    const result = calc.compute({
+      target: 'Dorée et Rousse',
+      qty: 4,
+      repro: {},
+      inverted: { 'Dorée et Rousse': true },
+    });
+    // Inverted: parentA=Dorée, parentB=Rousse
+    expect(result.steps[0]!.parentA).toBe('Dorée');
+    expect(result.steps[0]!.parentB).toBe('Rousse');
+  });
+
+  it('subtracts breeders from couple count', () => {
+    const result = calc.compute({
+      target: 'Dorée et Rousse',
+      qty: 4,
+      repro: { 'Dorée et Rousse': 2 },
+      inverted: {},
+    });
+    expect(result.steps[0]!.couples).toBe(2);
+  });
+});
+```
+
+**Step 2: Run test — expected FAIL**
+
+**Step 3: Implement**
+
+```typescript
+import { BREEDING_RECIPES, RACE_GEN } from '@domain/value-objects/Race';
+
+export interface ReapproInput {
+  target: string;
+  qty: number;
+  repro: Readonly<Record<string, number>>;
+  inverted: Readonly<Record<string, boolean>>;
+}
+
+export interface ReapproStep {
+  race: string;
+  gen: number;
+  qty: number;
+  couples: number;
+  parentA: string;
+  parentB: string;
+  repro: number;
+}
+
+export interface Gen1Need {
+  name: string;
+  total: number;
+  m: number;
+  f: number;
+}
+
+export interface ReapproResult {
+  steps: readonly ReapproStep[];
+  gen1Needs: readonly Gen1Need[];
+  totalGen1: number;
+}
+
+export class ReapproCalculator {
+  compute(input: ReapproInput): ReapproResult {
+    const { target, qty, repro, inverted } = input;
+    if (!target || !BREEDING_RECIPES[target]) return { steps: [], gen1Needs: [], totalGen1: 0 };
+
+    const needs: Record<string, { total: number; m: number; f: number }> = {};
+    needs[target] = { total: qty, m: 0, f: 0 };
+    const steps: ReapproStep[] = [];
+    const processed = new Set<string>();
+    const targetGen = RACE_GEN[target] ?? 2;
+
+    for (let gen = targetGen; gen >= 2; gen--) {
+      const racesAtGen = Object.keys(needs).filter(
+        r => !processed.has(r) && (RACE_GEN[r] ?? 0) === gen && BREEDING_RECIPES[r]
+      );
+      for (const race of racesAtGen) {
+        const Q = needs[race]!.total;
+        if (Q <= 0) { processed.add(race); continue; }
+        const R = repro[race] ?? 0;
+        const couplesReal = (2 * R >= Q) ? Math.ceil(Q / 2) : (R > 0 ? Q - R : Q);
+
+        const isInv = inverted[race] ?? false;
+        const [rawA, rawB] = BREEDING_RECIPES[race]!;
+        const a = isInv ? rawB : rawA;
+        const b = isInv ? rawA : rawB;
+
+        if (!needs[a]) needs[a] = { total: 0, m: 0, f: 0 };
+        if (!needs[b]) needs[b] = { total: 0, m: 0, f: 0 };
+        needs[a]!.total += couplesReal;
+        needs[a]!.m += couplesReal;
+        needs[b]!.total += couplesReal;
+        needs[b]!.f += couplesReal;
+
+        steps.push({ race, gen, qty: Q, couples: couplesReal, parentA: a, parentB: b, repro: R });
+        processed.add(race);
+      }
+    }
+
+    const gen1Needs: Gen1Need[] = Object.entries(needs)
+      .filter(([n]) => !BREEDING_RECIPES[n] && needs[n]!.total > 0)
+      .sort((a, b) => b[1].total - a[1].total)
+      .map(([name, d]) => ({ name, total: d.total, m: d.m, f: d.f }));
+
+    const totalGen1 = gen1Needs.reduce((s, n) => s + n.total, 0);
+
+    return { steps, gen1Needs, totalGen1 };
+  }
+}
+```
+
+**Step 4: Run test — expected PASS**
+
+**Step 5: Commit** `feat(domain): add ReapproCalculator`
+
+---
+
+### Task 10: InventaireCalculator
+
+**Files:**
+- Create: `src/domain/services/InventaireCalculator.ts`
+- Test: `tests/unit/domain/InventaireCalculator.test.ts`
+
+**Step 1: Write failing test**
+
+```typescript
+import { describe, it, expect } from 'vitest';
+import { InventaireCalculator } from '@domain/services/InventaireCalculator';
+
+describe('InventaireCalculator', () => {
+  const calc = new InventaireCalculator();
+
+  it('empty inventory produces nothing', () => {
+    const result = calc.compute({});
+    expect(result.generations).toHaveLength(0);
+  });
+
+  it('2 base races with ♂+♀ produce a gen2 baby', () => {
+    const result = calc.compute({
+      'Rousse': { m: 1, f: 0 },
+      'Dorée': { m: 0, f: 1 },
+    });
+    expect(result.generations.length).toBeGreaterThanOrEqual(1);
+    const gen2 = result.generations.find(g => g.gen === 2);
+    expect(gen2).toBeDefined();
+    expect(gen2!.crossings.some(c => c.name === 'Dorée et Rousse')).toBe(true);
+  });
+
+  it('requires ♂+♀ constraint (no same-gender breeding)', () => {
+    const result = calc.compute({
+      'Rousse': { m: 2, f: 0 },
+      'Dorée': { m: 2, f: 0 },
+    });
+    // Both male — no breeding possible
+    expect(result.generations).toHaveLength(0);
+  });
+
+  it('cascades babies into next generation', () => {
+    const result = calc.compute({
+      'Rousse': { m: 2, f: 2 },
+      'Amande': { m: 2, f: 2 },
+      'Dorée': { m: 2, f: 2 },
+    });
+    // Should produce gen 2 babies, which cascade to gen 3
+    const gen2 = result.generations.find(g => g.gen === 2);
+    expect(gen2).toBeDefined();
+  });
+});
+```
+
+**Step 2: Run test — expected FAIL**
+
+**Step 3: Implement**
+
+```typescript
+import { BREEDING_RECIPES, RACE_GEN } from '@domain/value-objects/Race';
+
+export interface Stock { m: number; f: number; n: number; }
+export interface CrossingDetail { aSex: string; bSex: string; }
+export interface CrossingResult { name: string; qty: number; parents: readonly [string, string]; gen: number; details: CrossingDetail[]; }
+export interface GenerationResult { gen: number; crossings: CrossingResult[]; }
+export interface InventaireResult { generations: GenerationResult[]; remaining: Record<string, Stock>; }
+
+export class InventaireCalculator {
+  compute(inventaire: Readonly<Record<string, { m: number; f: number }>>): InventaireResult {
+    const avail: Record<string, Stock> = {};
+    for (const [k, v] of Object.entries(inventaire)) {
+      if ((v.m + v.f) > 0) avail[k] = { m: v.m, f: v.f, n: 0 };
+    }
+
+    if (Object.keys(avail).length === 0) return { generations: [], remaining: {} };
+
+    const hasMale = (s: Stock) => s.m > 0 || s.n > 0;
+    const hasFemale = (s: Stock) => s.f > 0 || s.n > 0;
+    const takeMale = (s: Stock) => { if (s.m > 0) s.m--; else s.n--; };
+    const takeFemale = (s: Stock) => { if (s.f > 0) s.f--; else s.n--; };
+    const totalOf = (s: Stock) => s.m + s.f + s.n;
+
+    const generations: GenerationResult[] = [];
+
+    for (let gen = 2; gen <= 10; gen++) {
+      const crossingsAtGen = Object.entries(BREEDING_RECIPES)
+        .filter(([name]) => (RACE_GEN[name] ?? 0) === gen)
+        .map(([name, parents]) => ({ name, parents }));
+
+      const genResults: CrossingResult[] = [];
+      let more = true;
+      while (more) {
+        more = false;
+        for (const cr of crossingsAtGen) {
+          const [a, b] = cr.parents;
+          const sa = avail[a] ?? { m: 0, f: 0, n: 0 };
+          const sb = avail[b] ?? { m: 0, f: 0, n: 0 };
+          let ok = false, aSex = '', bSex = '';
+
+          if (a === b) {
+            if (totalOf(sa) >= 2 && hasMale(sa) && hasFemale(sa)) {
+              takeMale(sa); takeFemale(sa); aSex = '♂'; bSex = '♀'; ok = true;
+            }
+          } else if (hasMale(sa) && hasFemale(sb)) {
+            takeMale(sa); takeFemale(sb); aSex = '♂'; bSex = '♀'; ok = true;
+          } else if (hasFemale(sa) && hasMale(sb)) {
+            takeFemale(sa); takeMale(sb); aSex = '♀'; bSex = '♂'; ok = true;
+          }
+
+          if (ok) {
+            if (!avail[a]) avail[a] = sa;
+            if (!avail[b]) avail[b] = sb;
+            if (!avail[cr.name]) avail[cr.name] = { m: 0, f: 0, n: 0 };
+            avail[cr.name]!.n++;
+            let entry = genResults.find(r => r.name === cr.name);
+            if (!entry) { entry = { name: cr.name, qty: 0, parents: cr.parents as [string, string], gen, details: [] }; genResults.push(entry); }
+            entry.qty++;
+            entry.details.push({ aSex, bSex });
+            more = true;
+          }
+        }
+      }
+      if (genResults.length > 0) generations.push({ gen, crossings: genResults });
+    }
+
+    return { generations, remaining: avail };
+  }
+}
+```
+
+**Step 4: Run test — expected PASS**
+
+**Step 5: Commit** `feat(domain): add InventaireCalculator`
+
+---
+
+## Phase 4 — Domain Entities + Ports
+
+### Task 11: Entités Dragodinde + Enclos
+
+**Files:**
+- Create: `src/domain/entities/Dragodinde.ts`
+- Create: `src/domain/entities/Enclos.ts`
+- Create: `src/domain/entities/Accouplement.ts`
+- Test: `tests/unit/domain/Enclos.test.ts`
+
+**Step 1: Write failing test**
+
+```typescript
+import { describe, it, expect } from 'vitest';
+import { createEnclos, addDragodinde, removeDragodinde, MAX_DD } from '@domain/entities/Enclos';
+import { createDragodinde } from '@domain/entities/Dragodinde';
+
+describe('Enclos', () => {
+  it('creates with defaults', () => {
+    const enc = createEnclos(1);
+    expect(enc.id).toBe(1);
+    expect(enc.name).toBe('Enclos 1');
+    expect(enc.dragodindes).toHaveLength(0);
+    expect(enc.activeGauges).toHaveLength(0);
+    expect(enc.timer.running).toBe(false);
+  });
+
+  it('adds a dragodinde', () => {
+    let enc = createEnclos(1);
+    enc = addDragodinde(enc);
+    expect(enc.dragodindes).toHaveLength(1);
+    expect(enc.dragodindes[0]!.name).toBe('DD 1');
+  });
+
+  it('limits to MAX_DD', () => {
+    let enc = createEnclos(1);
+    for (let i = 0; i < MAX_DD + 2; i++) enc = addDragodinde(enc);
+    expect(enc.dragodindes).toHaveLength(MAX_DD);
+  });
+
+  it('removes a dragodinde', () => {
+    let enc = createEnclos(1);
+    enc = addDragodinde(enc);
+    const ddId = enc.dragodindes[0]!.id;
+    enc = removeDragodinde(enc, ddId);
+    expect(enc.dragodindes).toHaveLength(0);
+  });
+});
+```
+
+**Step 2: Run test — expected FAIL**
+
+**Step 3: Implement**
+
+Dragodinde.ts:
+```typescript
+import type { GaugeType } from '@domain/value-objects/GaugeType';
+import { DEFAULT_TARGETS } from '@domain/value-objects/GaugeType';
+import type { Gender } from '@domain/value-objects/Gender';
+
+export interface DragodindeStats {
+  serenite: number;
+  endurance: number;
+  maturite: number;
+  amour: number;
+  xp: number;
+}
+
+export interface Dragodinde {
+  readonly id: number;
+  name: string;
+  race: string;
+  gender: Gender;
+  stats: DragodindeStats;
+  targets: Record<GaugeType, number>;
+  sereniteTarget: number | null;
+  levelTarget: number | null;
+  reproducteur: number;
+}
+
+export function createDragodinde(id: number): Dragodinde {
+  return {
+    id,
+    name: `DD ${id}`,
+    race: '',
+    gender: 'n',
+    stats: { serenite: 0, endurance: 0, maturite: 0, amour: 0, xp: 1 },
+    targets: { ...DEFAULT_TARGETS },
+    sereniteTarget: null,
+    levelTarget: null,
+    reproducteur: 0,
+  };
+}
+```
+
+Enclos.ts:
+```typescript
+import type { Dragodinde } from './Dragodinde';
+import { createDragodinde } from './Dragodinde';
+import type { GaugeType } from '@domain/value-objects/GaugeType';
+
+export const MAX_DD = 10;
+export const MAX_ENCLOS = 6;
+export const MAX_GAUGES = 2;
+
+export interface TimerData {
+  running: boolean;
+  startTime: number | null;
+  pausedAt: number | null;
+  pausedMs: number;
+  snapGauges: Record<string, number>;
+  snapStats: Record<string, Record<string, number>>;
+}
+
+export interface Enclos {
+  readonly id: number;
+  name: string;
+  activeGauges: GaugeType[];
+  gaugeLevels: Record<GaugeType, number>;
+  dragodindes: Dragodinde[];
+  nextDdId: number;
+  timer: TimerData;
+  alerted: Record<string, boolean>;
+}
+
+export function createEnclos(id: number): Enclos {
+  return {
+    id,
+    name: `Enclos ${id}`,
+    activeGauges: [],
+    gaugeLevels: { baffeur: 0, caresseur: 0, foudroyeur: 0, abreuvoir: 0, dragofesse: 0, mangeoire: 0 },
+    dragodindes: [],
+    nextDdId: 1,
+    timer: { running: false, startTime: null, pausedAt: null, pausedMs: 0, snapGauges: {}, snapStats: {} },
+    alerted: {},
+  };
+}
+
+export function addDragodinde(enc: Enclos): Enclos {
+  if (enc.dragodindes.length >= MAX_DD) return enc;
+  const dd = createDragodinde(enc.nextDdId);
+  return { ...enc, dragodindes: [...enc.dragodindes, dd], nextDdId: enc.nextDdId + 1 };
+}
+
+export function removeDragodinde(enc: Enclos, ddId: number): Enclos {
+  return { ...enc, dragodindes: enc.dragodindes.filter(d => d.id !== ddId) };
+}
+```
+
+Accouplement.ts:
+```typescript
+export interface Accouplement {
+  readonly parentA: string;
+  readonly parentB: string;
+  readonly baby: string;
+  readonly gen: number;
+  readonly couples: number;
+  readonly babiesObtained: number;
+  readonly date: string;
+}
+
+export function createAccouplement(
+  parentA: string, parentB: string, baby: string, gen: number,
+  couples: number, babiesObtained: number
+): Accouplement {
+  return { parentA, parentB, baby, gen, couples, babiesObtained, date: new Date().toISOString() };
+}
+```
+
+**Step 4: Run test — expected PASS**
+
+**Step 5: Commit** `feat(domain): add Enclos, Dragodinde, Accouplement entities`
+
+---
+
+### Task 12: Ports (interfaces)
+
+**Files:**
+- Create: `src/domain/ports/StateRepository.ts`
+- Create: `src/domain/ports/NotificationPort.ts`
+- Create: `src/domain/ports/AlarmPort.ts`
+- Create: `src/domain/ports/UpdatePort.ts`
+
+**Step 1: Implement** (no tests needed — interfaces only)
+
+StateRepository.ts:
+```typescript
+import type { Enclos } from '@domain/entities/Enclos';
+import type { Accouplement } from '@domain/entities/Accouplement';
+
+export interface AppState {
+  enclos: Enclos[];
+  activeId: number | string | null;
+  nextEnclosId: number;
+  alarmSound: string;
+  notifsEnabled: boolean;
+  ntfyTopic: string;
+  archivedStats: unknown[];
+  inventaire: Record<string, { m: number; f: number }>;
+  workflows: unknown[];
+  accouplements: Accouplement[];
+}
+
+export interface StateRepository {
+  load(): Promise<AppState | null>;
+  save(state: AppState): void;
+}
+```
+
+NotificationPort.ts:
+```typescript
+export interface NotificationPort {
+  showNotification(title: string, body: string): void;
+  sendMobileNotification(url: string, title: string, message: string): void;
+}
+```
+
+AlarmPort.ts:
+```typescript
+export interface AlarmPort {
+  play(soundName: string): void;
+  stop(): void;
+}
+```
+
+UpdatePort.ts:
+```typescript
+export interface UpdateInfo {
+  version: string;
+  downloadUrl: string;
+  assetName: string;
+  releaseNotes: string;
+}
+
+export interface UpdatePort {
+  checkForUpdates(): Promise<UpdateInfo | null>;
+  downloadAndInstall(info: UpdateInfo): void;
+}
+```
+
+**Step 2: Commit** `feat(domain): add port interfaces`
+
+---
+
+### Task 13: Domain Events
+
+**Files:**
+- Create: `src/domain/events/DomainEvent.ts`
+- Create: `src/domain/events/EventBus.ts`
+- Test: `tests/unit/domain/EventBus.test.ts`
+
+**Step 1: Write failing test**
+
+```typescript
+import { describe, it, expect, vi } from 'vitest';
+import { EventBus } from '@domain/events/EventBus';
+
+describe('EventBus', () => {
+  it('dispatches events to subscribers', () => {
+    const bus = new EventBus();
+    const handler = vi.fn();
+    bus.on('timer-completed', handler);
+    bus.emit({ type: 'timer-completed', enclosId: 1 });
+    expect(handler).toHaveBeenCalledWith({ type: 'timer-completed', enclosId: 1 });
+  });
+
+  it('ignores unsubscribed events', () => {
+    const bus = new EventBus();
+    const handler = vi.fn();
+    bus.on('timer-completed', handler);
+    bus.emit({ type: 'accouplement-registered', data: {} });
+    expect(handler).not.toHaveBeenCalled();
+  });
+});
+```
+
+**Step 2: Run test — expected FAIL**
+
+**Step 3: Implement**
+
+DomainEvent.ts:
+```typescript
+export type DomainEventType = 'timer-completed' | 'gauge-threshold-reached' | 'accouplement-registered' | 'enclos-deleted';
+
+export interface DomainEvent {
+  readonly type: DomainEventType;
+  readonly [key: string]: unknown;
+}
+```
+
+EventBus.ts:
+```typescript
+import type { DomainEvent, DomainEventType } from './DomainEvent';
+
+type Handler = (event: DomainEvent) => void;
+
+export class EventBus {
+  private handlers = new Map<DomainEventType, Handler[]>();
+
+  on(type: DomainEventType, handler: Handler): void {
+    if (!this.handlers.has(type)) this.handlers.set(type, []);
+    this.handlers.get(type)!.push(handler);
+  }
+
+  emit(event: DomainEvent): void {
+    const handlers = this.handlers.get(event.type) ?? [];
+    for (const h of handlers) h(event);
+  }
+}
+```
+
+**Step 4: Run test — expected PASS**
+
+**Step 5: Commit** `feat(domain): add EventBus`
+
+---
+
+## Phase 5 — Application Layer (CQRS)
+
+### Task 14: CommandBus + QueryBus
+
+**Files:**
+- Create: `src/application/handlers/CommandBus.ts`
+- Create: `src/application/handlers/QueryBus.ts`
+- Test: `tests/unit/application/CommandBus.test.ts`
+
+**Step 1: Write failing test**
+
+```typescript
+import { describe, it, expect, vi } from 'vitest';
+import { CommandBus } from '@application/handlers/CommandBus';
+
+describe('CommandBus', () => {
+  it('dispatches to registered handler', () => {
+    const bus = new CommandBus();
+    const handler = vi.fn();
+    bus.register('start-timer', handler);
+    bus.execute({ type: 'start-timer', enclosId: 1 });
+    expect(handler).toHaveBeenCalledWith({ type: 'start-timer', enclosId: 1 });
+  });
+
+  it('throws on unknown command', () => {
+    const bus = new CommandBus();
+    expect(() => bus.execute({ type: 'unknown' as any })).toThrow();
+  });
+});
+```
+
+**Step 2: Run test — expected FAIL**
+
+**Step 3: Implement**
+
+CommandBus.ts:
+```typescript
+export interface Command {
+  readonly type: string;
+  readonly [key: string]: unknown;
+}
+
+type CommandHandler<T extends Command = Command> = (cmd: T) => void;
+
+export class CommandBus {
+  private handlers = new Map<string, CommandHandler>();
+
+  register<T extends Command>(type: string, handler: CommandHandler<T>): void {
+    this.handlers.set(type, handler as CommandHandler);
+  }
+
+  execute(cmd: Command): void {
+    const handler = this.handlers.get(cmd.type);
+    if (!handler) throw new Error(`No handler for command: ${cmd.type}`);
+    handler(cmd);
+  }
+}
+```
+
+QueryBus.ts:
+```typescript
+export interface Query {
+  readonly type: string;
+  readonly [key: string]: unknown;
+}
+
+type QueryHandler<T extends Query = Query, R = unknown> = (query: T) => R;
+
+export class QueryBus {
+  private handlers = new Map<string, QueryHandler>();
+
+  register<T extends Query, R>(type: string, handler: QueryHandler<T, R>): void {
+    this.handlers.set(type, handler as QueryHandler);
+  }
+
+  execute<R>(query: Query): R {
+    const handler = this.handlers.get(query.type);
+    if (!handler) throw new Error(`No handler for query: ${query.type}`);
+    return handler(query) as R;
+  }
+}
+```
+
+**Step 4: Run test — expected PASS**
+
+**Step 5: Commit** `feat(application): add CommandBus and QueryBus`
+
+---
+
+### Task 15: Commands — Timer, Enclos, Accouplement
+
+**Files:**
+- Create: `src/application/commands/StartTimer.ts`
+- Create: `src/application/commands/StopTimer.ts`
+- Create: `src/application/commands/CreateEnclos.ts`
+- Create: `src/application/commands/DeleteEnclos.ts`
+- Create: `src/application/commands/AddDragodinde.ts`
+- Create: `src/application/commands/RemoveDragodinde.ts`
+- Create: `src/application/commands/UpdateGauge.ts`
+- Create: `src/application/commands/RegisterAccouplement.ts`
+- Create: `src/application/commands/UpdateSettings.ts`
+- Create: `src/application/commands/ResetStats.ts`
+- Test: `tests/unit/application/commands.test.ts`
+- Test: `tests/functional/timer-workflow.test.ts`
+
+Ce sont les command handlers qui orchestrent domaine + ports. Chaque handler :
+1. Lit l'état depuis `StateRepository`
+2. Applique la logique domaine
+3. Sauvegarde via `StateRepository`
+4. Émet des événements domaine si nécessaire
+
+**Step 1: Write failing test (exemple StartTimer)**
+
+```typescript
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { createStartTimerHandler } from '@application/commands/StartTimer';
+import { createEnclos, addDragodinde } from '@domain/entities/Enclos';
+import type { AppState, StateRepository } from '@domain/ports/StateRepository';
+import { EventBus } from '@domain/events/EventBus';
+
+function makeRepo(state: AppState): StateRepository {
+  return {
+    load: vi.fn(async () => state),
+    save: vi.fn(),
+  };
+}
+
+describe('StartTimer', () => {
+  it('starts timer on enclos', () => {
+    let enc = createEnclos(1);
+    enc = addDragodinde(enc);
+    enc.activeGauges = ['baffeur'];
+    enc.gaugeLevels.baffeur = 50000;
+
+    const state: AppState = {
+      enclos: [enc], activeId: 1, nextEnclosId: 2,
+      alarmSound: 'arpege', notifsEnabled: true, ntfyTopic: '',
+      archivedStats: [], inventaire: {}, workflows: [], accouplements: [],
+    };
+
+    const repo = makeRepo(state);
+    const events = new EventBus();
+    const handler = createStartTimerHandler(state, repo, events);
+
+    handler({ type: 'start-timer', enclosId: 1 });
+
+    expect(state.enclos[0]!.timer.running).toBe(true);
+    expect(state.enclos[0]!.timer.startTime).not.toBeNull();
+    expect(repo.save).toHaveBeenCalled();
+  });
+});
+```
+
+**Step 2: Run test — expected FAIL**
+
+**Step 3: Implement StartTimer.ts (pattern pour tous les handlers)**
+
+```typescript
+import type { AppState, StateRepository } from '@domain/ports/StateRepository';
+import type { EventBus } from '@domain/events/EventBus';
+
+export interface StartTimerCommand {
+  type: 'start-timer';
+  enclosId: number;
+}
+
+export function createStartTimerHandler(state: AppState, repo: StateRepository, events: EventBus) {
+  return (cmd: StartTimerCommand): void => {
+    const enc = state.enclos.find(e => e.id === cmd.enclosId);
+    if (!enc || enc.timer.running) return;
+    if (!enc.activeGauges.length || !enc.dragodindes.length) return;
+
+    const now = Date.now();
+    enc.timer.running = true;
+    enc.timer.startTime = now;
+    enc.timer.pausedAt = null;
+    enc.timer.pausedMs = 0;
+
+    // Snapshot gauges
+    enc.timer.snapGauges = { ...enc.gaugeLevels };
+    // Snapshot stats
+    const snapStats: Record<string, Record<string, number>> = {};
+    for (const dd of enc.dragodindes) {
+      snapStats[dd.id] = { ...dd.stats };
+    }
+    enc.timer.snapStats = snapStats;
+    enc.alerted = {};
+
+    repo.save(state);
+  };
+}
+```
+
+Les autres command handlers suivent le même pattern. Implémenter chacun selon la logique existante dans index.html.
+
+**Step 4: Run test — expected PASS**
+
+**Step 5: Commit** `feat(application): add command handlers`
+
+---
+
+### Task 16: Queries — Dashboard, EnclosDetail, TimerState
+
+**Files:**
+- Create: `src/application/queries/GetDashboard.ts`
+- Create: `src/application/queries/GetEnclosDetail.ts`
+- Create: `src/application/queries/GetTimerState.ts`
+- Create: `src/application/queries/GetBreedingOptions.ts`
+- Create: `src/application/queries/GetReapproTree.ts`
+- Create: `src/application/queries/GetInventaire.ts`
+- Test: `tests/unit/application/queries.test.ts`
+
+Pattern similaire aux commands mais retourne des données sans modifier l'état.
+
+**Step 1: Write failing test (exemple GetDashboard)**
+
+```typescript
+import { describe, it, expect } from 'vitest';
+import { createGetDashboardHandler } from '@application/queries/GetDashboard';
+import { createEnclos, addDragodinde } from '@domain/entities/Enclos';
+import type { AppState } from '@domain/ports/StateRepository';
+
+describe('GetDashboard', () => {
+  it('aggregates stats from enclos + accouplements', () => {
+    let enc = createEnclos(1);
+    enc = addDragodinde(enc);
+
+    const state: AppState = {
+      enclos: [enc], activeId: 'dashboard', nextEnclosId: 2,
+      alarmSound: 'arpege', notifsEnabled: true, ntfyTopic: '',
+      archivedStats: [], inventaire: {}, workflows: [],
+      accouplements: [
+        { parentA: 'Rousse', parentB: 'Dorée', baby: 'Dorée et Rousse', gen: 2, couples: 5, babiesObtained: 3, date: '2026-01-01' },
+      ],
+    };
+
+    const handler = createGetDashboardHandler(state);
+    const result = handler({ type: 'get-dashboard' });
+
+    expect(result.totalCouples).toBe(5);
+    expect(result.totalBabies).toBe(3);
+    expect(result.enclosSummaries).toHaveLength(1);
+  });
+});
+```
+
+**Step 2: Run test — expected FAIL**
+
+**Step 3: Implement** (extraire la logique depuis `renderDashboardStats` dans index.html)
+
+**Step 4: Run test — expected PASS**
+
+**Step 5: Commit** `feat(application): add query handlers`
+
+---
+
+## Phase 6 — Infrastructure
+
+### Task 17: LocalStorageRepository
+
+**Files:**
+- Create: `src/infrastructure/persistence/LocalStorageRepository.ts`
+- Test: `tests/unit/infrastructure/LocalStorageRepository.test.ts` (avec mock localStorage)
+
+Implémenter `StateRepository` en utilisant `window.electronAPI.saveData`/`loadData` avec fallback sur `localStorage`. Inclure la logique de migration depuis index.html (`load()` lignes 1321-1356).
+
+**Commit** `feat(infrastructure): add LocalStorageRepository`
+
+---
+
+### Task 18: Electron adapters (Notification, Alarm, Update)
+
+**Files:**
+- Create: `src/infrastructure/notifications/ElectronNotification.ts`
+- Create: `src/infrastructure/notifications/NtfyNotification.ts`
+- Create: `src/infrastructure/alarm/WebAudioAlarm.ts`
+- Create: `src/infrastructure/update/GiteaUpdateAdapter.ts`
+
+Chaque fichier implémente un port. Extraire la logique depuis index.html et main.js.
+
+**Commit** `feat(infrastructure): add notification, alarm, update adapters`
+
+---
+
+### Task 19: Migrer main.ts + preload.ts
+
+**Files:**
+- Create: `src/infrastructure/electron/main.ts` (copier + convertir main.js en TypeScript)
+- Create: `src/infrastructure/electron/preload.ts` (copier + convertir preload.js en TypeScript)
+
+Le `main.ts` reste quasiment identique à `main.js` actuel — c'est déjà de l'infrastructure. Conversion TypeScript + cleanup.
+
+**Commit** `feat(infrastructure): migrate Electron main and preload to TypeScript`
+
+---
+
+## Phase 7 — Presentation
+
+### Task 20: UIState + App shell
+
+**Files:**
+- Create: `src/presentation/state/UIState.ts`
+- Create: `src/presentation/components/App.ts`
+- Create: `src/presentation/index.ts` (bootstrap / DI wiring)
+- Modify: `src/index.html` (shell HTML minimal)
+
+UIState gère l'état UI pur (onglet actif, sidebar ouverte, etc.) avec un pattern observable simple.
+
+Le bootstrap (`index.ts`) connecte tout : crée les services domain, instancie les adapters infrastructure, configure les command/query bus, monte les composants.
+
+**Commit** `feat(presentation): add UIState and App shell with DI wiring`
+
+---
+
+### Task 21: Composants UI — extraction progressive
+
+**Files:**
+- Create: `src/presentation/components/Sidebar.ts`
+- Create: `src/presentation/components/Dashboard.ts`
+- Create: `src/presentation/components/EnclosView.ts`
+- Create: `src/presentation/components/DragodindeCard.ts`
+- Create: `src/presentation/components/GaugePill.ts`
+- Create: `src/presentation/components/AccouplementView.ts`
+- Create: `src/presentation/components/ReapproView.ts`
+- Create: `src/presentation/components/InventaireView.ts`
+- Create: `src/presentation/components/ParametresView.ts`
+- Create: `src/presentation/components/UpdateBanner.ts`
+
+Chaque composant est une classe :
+```typescript
+export class DashboardComponent {
+  private el: HTMLElement;
+  constructor(private queryBus: QueryBus, private commandBus: CommandBus, private uiState: UIState) {}
+  render(): HTMLElement { /* ... */ }
+  update(): void { /* ... */ }
+  destroy(): void { /* ... */ }
+}
+```
+
+Extraire le HTML/CSS/JS de rendu depuis index.html pour chaque composant. Le CSS est extrait dans `src/presentation/styles/`.
+
+**Commit** `feat(presentation): extract UI components`
+
+---
+
+### Task 22: Styles — extraction CSS
+
+**Files:**
+- Create: `src/presentation/styles/variables.css` (lignes 9-14 du monolithe)
+- Create: `src/presentation/styles/base.css` (reset, body, wrap)
+- Create: `src/presentation/styles/components.css` (tous les styles composants)
+- Create: `src/presentation/styles/index.css` (imports)
+
+**Commit** `feat(presentation): extract CSS into modular files`
+
+---
+
+## Phase 8 — Tests de régression
+
+### Task 23: Tests de régression
+
+**Files:**
+- Create: `tests/regression/gauge-tier-calculation.test.ts`
+- Create: `tests/regression/xp-timer-display.test.ts`
+- Create: `tests/regression/stats-persistence.test.ts`
+- Create: `tests/regression/breeding-deduction.test.ts`
+
+**Tests de régression basés sur les bugs corrigés dans les versions précédentes :**
+
+```typescript
+// xp-timer-display.test.ts — Bug v1.1.4: affichait ~23h au lieu du temps réel
+import { describe, it, expect } from 'vitest';
+import { XpCalculator } from '@domain/services/XpCalculator';
+
+describe('Regression: XP timer display', () => {
+  it('should NOT show ~23h for a short XP gain', () => {
+    const calc = new XpCalculator();
+    const eta = calc.computeEta({
+      currentLevel: 1,
+      target: 5,
+      gaugeLevels: { mangeoire: 50000 },
+      activeGauges: ['mangeoire'],
+    });
+    // 161 XP needed (level 5), rate 20 at tier 2 = ~81 ticks = 810 sec ≈ 13.5 min
+    expect(eta.seconds).toBeLessThan(3600); // Must be under 1h, NOT 23h
+  });
+});
+
+// breeding-deduction.test.ts
+import { describe, it, expect } from 'vitest';
+import { BreedingService } from '@domain/services/BreedingService';
+
+describe('Regression: Breeding deduction', () => {
+  it('bidirectional parent order produces same baby', () => {
+    const svc = new BreedingService();
+    expect(svc.deduceBaby('Rousse', 'Dorée')).toBe(svc.deduceBaby('Dorée', 'Rousse'));
+  });
+
+  it('all gen 2-10 recipes are deducible', () => {
+    const svc = new BreedingService();
+    // Every BREEDING_RECIPES entry should be deducible from its parents
+    // (tested implicitly via BreedingService constructor)
+    expect(svc.deduceBaby('Rousse', 'Dorée')).toBe('Dorée et Rousse');
+    expect(svc.deduceBaby('Amande', 'Dorée')).toBe('Amande et Dorée');
+  });
+});
+
+// stats-persistence.test.ts
+import { describe, it, expect } from 'vitest';
+
+describe('Regression: Stats persistence', () => {
+  it('deleting enclos should archive stats', () => {
+    // Verify via DeleteEnclos command that archivedStats grows
+    // when an enclos with history is deleted
+  });
+});
+```
+
+**Commit** `test: add regression tests for known bugs`
+
+---
+
+### Task 24: Tests fonctionnels
+
+**Files:**
+- Create: `tests/functional/timer-workflow.test.ts`
+- Create: `tests/functional/breeding-workflow.test.ts`
+- Create: `tests/functional/enclos-management.test.ts`
+
+**timer-workflow.test.ts:**
+```typescript
+import { describe, it, expect } from 'vitest';
+// Test le scénario complet: créer enclos → ajouter DD → configurer jauges → démarrer timer → vérifier progression → arrêter
+
+describe('Timer Workflow', () => {
+  it('full lifecycle: create → configure → start → progress → stop', () => {
+    // 1. Create enclos via command
+    // 2. Add dragodinde via command
+    // 3. Toggle gauge via command
+    // 4. Start timer via command
+    // 5. Query timer state — verify running
+    // 6. Stop timer via command
+    // 7. Query timer state — verify stopped
+  });
+});
+```
+
+**breeding-workflow.test.ts:**
+```typescript
+describe('Breeding Workflow', () => {
+  it('register accouplement → updates global stats', () => {
+    // 1. Register accouplement via command
+    // 2. Query dashboard — verify stats include new accouplement
+  });
+});
+```
+
+**Commit** `test: add functional workflow tests`
+
+---
+
+## Phase 9 — Nettoyage + intégration finale
+
+### Task 25: Supprimer le monolithe
+
+Une fois que tous les composants sont migrés et que tous les tests passent :
+
+1. Renommer `src/index.html` (ancien) → `src/index.html.bak`
+2. Renommer `main.js` → `main.js.bak`
+3. Renommer `preload.js` → `preload.js.bak`
+4. Mettre à jour `package.json` : adapter les scripts `build` pour utiliser Vite
+5. Vérifier que `npm run dev` fonctionne
+6. Vérifier que `npm run build` produit un installeur fonctionnel
+7. Supprimer les `.bak`
+
+**Commit** `chore: remove legacy monolith, Vite is now the sole build`
+
+---
+
+### Task 26: Mettre à jour package.json et electron-builder config
+
+Adapter `package.json`:
+```json
+{
+  "main": "dist-electron/main.js",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build && electron-builder --win --x64",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage"
+  },
+  "build": {
+    "files": [
+      "dist-vite/**/*",
+      "dist-electron/**/*",
+      "icon.png"
+    ]
+  }
+}
+```
+
+**Commit** `chore: update build config for Vite output`
+
+---
+
+## Résumé des phases
+
+| Phase | Tasks | Description |
+|-------|-------|-------------|
+| 1 | 1 | Setup Vite + TS + Vitest |
+| 2 | 2-5 | Domain Value Objects |
+| 3 | 6-10 | Domain Services (logique pure) |
+| 4 | 11-13 | Domain Entities + Ports + Events |
+| 5 | 14-16 | Application Layer (CQRS) |
+| 6 | 17-19 | Infrastructure (adapters) |
+| 7 | 20-22 | Presentation (composants UI) |
+| 8 | 23-24 | Tests régression + fonctionnels |
+| 9 | 25-26 | Nettoyage + intégration finale |
+
+**Total: 26 tasks, ~9 phases**
+
+Tests attendus : ~50+ tests unitaires, ~10 fonctionnels, ~5 régression.
diff --git a/docs/plans/2026-04-04-accouplement-redesign.md b/docs/plans/2026-04-04-accouplement-redesign.md
new file mode 100644
index 0000000..e19f610
--- /dev/null
+++ b/docs/plans/2026-04-04-accouplement-redesign.md
@@ -0,0 +1,920 @@
+# Refonte Graphique — Écran Accouplement
+
+> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
+
+**Goal:** Refondre l'écran d'accouplement pour passer d'un wizard séquentiel à un layout single-page avec panneaux Parent 1 / Centre / Parent 2 + grille de races, style Obsidienne glassmorphism.
+
+**Architecture:** Réécriture complète du HTML généré par `AccouplementView.ts` + remplacement des styles `.accoup-*` dans `components.css` par de nouveaux styles dans `obsidienne.css`. La logique métier (imports Race, CommandBus) reste identique.
+
+**Tech Stack:** TypeScript, CSS (tokens Obsidienne/MD3), Material Symbols Outlined, `getDDImage()` helper existant.
+
+---
+
+### Task 1 : Nouveaux styles CSS Obsidienne pour l'accouplement
+
+**Files:**
+- Modify: `src/presentation/styles/obsidienne.css` (ajouter en fin de fichier)
+- Modify: `src/presentation/styles/components.css:314-401` (supprimer les anciens styles `.accoup-*`)
+
+**Contexte:** La maquette utilise du glassmorphism (fond semi-transparent + backdrop-blur + bordure purple subtile), des `rounded-2xl` (16px), des chips pill pour les générations, et un layout grid 12 colonnes. On traduit tout ça en CSS vanilla avec les tokens `--md-*` déjà définis dans `variables.css`.
+
+**Step 1 : Supprimer les anciens styles accouplement de components.css**
+
+Supprimer les lignes 314-331 et 401 de `components.css` (tout ce qui commence par `.accoup-` et `.accouplement-view`).
+
+**Step 2 : Ajouter les nouveaux styles dans obsidienne.css**
+
+Ajouter en fin de fichier :
+
+```css
+/* ── Accouplement View ── */
+.accoup-view {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  padding: 8px;
+}
+
+/* Parent Selection Grid (3 columns: parent1 | center | parent2) */
+.accoup-parents {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  gap: 24px;
+  align-items: start;
+}
+
+.accoup-parent-section {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.accoup-parent-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  padding: 0 8px;
+}
+
+.accoup-parent-title {
+  font-family: 'Manrope', sans-serif;
+  font-size: 0.95rem;
+  font-weight: 700;
+  color: var(--md-on-surface);
+  text-transform: uppercase;
+  letter-spacing: -0.03em;
+}
+
+.accoup-gender-badge {
+  font-size: 10px;
+  font-weight: 700;
+  padding: 2px 8px;
+  border-radius: 4px;
+}
+.accoup-gender-badge.male {
+  color: var(--md-secondary);
+  background: rgba(134, 20, 90, 0.2);
+}
+.accoup-gender-badge.female {
+  color: var(--md-primary);
+  background: rgba(193, 133, 253, 0.2);
+}
+
+/* Placeholder card (empty parent slot) */
+.accoup-placeholder {
+  height: 180px;
+  border-radius: 16px;
+  background: rgba(23, 23, 33, 0.6);
+  backdrop-filter: blur(12px);
+  border: 1px solid rgba(168, 85, 247, 0.15);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+.accoup-placeholder:hover {
+  background: rgba(255, 255, 255, 0.07);
+}
+
+.accoup-placeholder-inner {
+  text-align: center;
+}
+
+.accoup-placeholder-icon {
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.05);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto 10px;
+  transition: transform 0.2s;
+}
+.accoup-placeholder:hover .accoup-placeholder-icon {
+  transform: scale(1.1);
+}
+.accoup-placeholder-icon .material-symbols-outlined {
+  font-size: 28px;
+  opacity: 0.4;
+}
+
+.accoup-placeholder-text {
+  font-size: 11px;
+  color: var(--md-on-surface-variant);
+}
+
+/* Selected parent card (replacing placeholder) */
+.accoup-selected-parent {
+  height: 180px;
+  border-radius: 16px;
+  background: rgba(23, 23, 33, 0.6);
+  backdrop-filter: blur(12px);
+  border: 1px solid rgba(168, 85, 247, 0.3);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  position: relative;
+  cursor: pointer;
+}
+.accoup-selected-parent:hover {
+  border-color: rgba(168, 85, 247, 0.5);
+}
+.accoup-selected-parent .race-card-avatar {
+  width: 64px;
+  height: 64px;
+}
+.accoup-selected-parent .race-card-avatar img {
+  width: 64px;
+  height: 64px;
+}
+.accoup-selected-parent-name {
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--md-on-surface);
+}
+.accoup-selected-parent-badge {
+  font-size: 9px;
+  font-weight: 700;
+  padding: 2px 8px;
+  border-radius: 6px;
+  color: #fff;
+}
+.accoup-selected-parent-clear {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.08);
+  border: none;
+  color: var(--md-on-surface-variant);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  transition: background 0.2s;
+}
+.accoup-selected-parent-clear:hover {
+  background: rgba(255, 110, 132, 0.2);
+  color: var(--md-error);
+}
+
+/* Center pairing column */
+.accoup-center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  padding: 16px 0;
+  min-width: 160px;
+}
+
+.accoup-heart {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, var(--md-primary), var(--md-secondary));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 16px rgba(203, 151, 255, 0.2);
+}
+.accoup-heart .material-symbols-outlined {
+  color: #000;
+  font-size: 22px;
+}
+
+.accoup-center-inputs {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  width: 100%;
+}
+
+.accoup-center-field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.accoup-center-label {
+  display: block;
+  font-size: 10px;
+  font-family: 'Manrope', sans-serif;
+  font-weight: 700;
+  color: var(--md-on-surface-variant);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  text-align: center;
+}
+
+.accoup-center-input {
+  width: 100%;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 12px;
+  padding: 8px 12px;
+  text-align: center;
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--md-primary);
+  outline: none;
+  transition: border-color 0.2s, box-shadow 0.2s;
+}
+.accoup-center-input:focus {
+  border-color: var(--md-primary);
+  box-shadow: 0 0 0 1px var(--md-primary);
+}
+.accoup-center-input.secondary {
+  color: var(--md-secondary);
+}
+.accoup-center-input.secondary:focus {
+  border-color: var(--md-secondary);
+  box-shadow: 0 0 0 1px var(--md-secondary);
+}
+
+.accoup-register-btn {
+  padding: 10px 24px;
+  background: linear-gradient(135deg, var(--md-primary), var(--md-primary-container));
+  color: var(--md-on-primary);
+  font-family: 'Manrope', sans-serif;
+  font-weight: 800;
+  font-size: 11px;
+  border: none;
+  border-radius: 9999px;
+  cursor: pointer;
+  box-shadow: 0 4px 16px rgba(203, 151, 255, 0.3);
+  transition: transform 0.1s, box-shadow 0.2s;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+.accoup-register-btn:hover {
+  box-shadow: 0 6px 20px rgba(203, 151, 255, 0.4);
+}
+.accoup-register-btn:active {
+  transform: scale(0.98);
+}
+.accoup-register-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* Grid panel (glass) */
+.accoup-grid-panel {
+  background: rgba(23, 23, 33, 0.6);
+  backdrop-filter: blur(12px);
+  border: 1px solid rgba(168, 85, 247, 0.15);
+  border-radius: 24px;
+  padding: 24px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+}
+
+/* Gen chips */
+.accoup-gen-chips {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  padding-bottom: 20px;
+  margin-bottom: 24px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.accoup-gen-chips-label {
+  font-size: 10px;
+  font-weight: 700;
+  color: var(--md-on-surface-variant);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  margin-right: 12px;
+}
+
+.accoup-gen-chip {
+  padding: 6px 16px;
+  border-radius: 9999px;
+  font-size: 11px;
+  font-weight: 700;
+  cursor: pointer;
+  border: none;
+  background: rgba(255, 255, 255, 0.05);
+  color: var(--md-on-surface-variant);
+  transition: background 0.2s, color 0.2s;
+}
+.accoup-gen-chip:hover {
+  color: var(--md-on-surface);
+  background: rgba(255, 255, 255, 0.1);
+}
+.accoup-gen-chip.active {
+  background: var(--md-primary);
+  color: var(--md-on-primary);
+}
+
+/* Search (kept from existing, restyled) */
+.accoup-search-wrap {
+  position: relative;
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+}
+.accoup-search {
+  flex: 1;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 12px;
+  color: var(--md-on-surface);
+  padding: 10px 40px 10px 14px;
+  font-size: 13px;
+  font-weight: 600;
+  outline: none;
+  transition: border-color 0.2s;
+}
+.accoup-search:focus {
+  border-color: var(--md-primary);
+}
+.accoup-search-clear {
+  position: absolute;
+  right: 10px;
+  background: none;
+  border: none;
+  color: var(--md-on-surface-variant);
+  cursor: pointer;
+  font-size: 16px;
+  padding: 4px;
+  transition: color 0.15s;
+}
+.accoup-search-clear:hover {
+  color: var(--md-on-surface);
+}
+
+/* Dragon cards grid */
+.accoup-race-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+  gap: 12px;
+}
+
+.accoup-race-card {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 16px;
+  padding: 10px;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  cursor: pointer;
+  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
+  text-align: center;
+}
+.accoup-race-card:hover {
+  border-color: rgba(203, 151, 255, 0.4);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+  transform: translateY(-2px);
+}
+.accoup-race-card.selecting {
+  border-color: rgba(203, 151, 255, 0.15);
+}
+.accoup-race-card.selecting:hover {
+  border-color: rgba(203, 151, 255, 0.5);
+}
+
+.accoup-race-card-img {
+  position: relative;
+  aspect-ratio: 1;
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.05);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  margin-bottom: 8px;
+}
+.accoup-race-card-img .race-card-avatar {
+  width: 56px;
+  height: 56px;
+  transition: transform 0.2s;
+}
+.accoup-race-card:hover .race-card-avatar {
+  transform: scale(1.1);
+}
+.accoup-race-card-img .race-card-avatar img {
+  width: 56px;
+  height: 56px;
+}
+
+.accoup-race-card-gen {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  padding: 2px 6px;
+  border-radius: 6px;
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(4px);
+  font-size: 8px;
+  font-weight: 700;
+  color: var(--md-tertiary, #ffe083);
+}
+
+.accoup-race-card-name {
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--md-on-surface);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.accoup-race-card-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 4px;
+}
+
+.accoup-race-card-sub {
+  font-size: 9px;
+  color: var(--md-on-surface-variant);
+}
+
+/* Empty state */
+.accoup-empty {
+  text-align: center;
+  color: var(--md-on-surface-variant);
+  padding: 40px;
+  font-style: italic;
+  font-size: 13px;
+}
+```
+
+**Step 3 : Vérifier le build**
+
+Run: `npm run build` (depuis Windows)
+Expected: Build réussi sans erreur CSS.
+
+**Step 4 : Commit**
+
+```bash
+git add src/presentation/styles/obsidienne.css src/presentation/styles/components.css
+git commit -m "refactor(accouplement): remplace anciens styles par design Obsidienne glassmorphism"
+```
+
+---
+
+### Task 2 : Réécriture du HTML — layout single-page avec panneaux parents + grille
+
+**Files:**
+- Modify: `src/presentation/components/AccouplementView.ts` (réécriture complète du rendering)
+
+**Contexte:** On remplace le wizard 3 étapes par un layout unique :
+- **Haut** : grille 3 colonnes (Parent 1 | Centre cœur+inputs+register | Parent 2)
+- **Bas** : panneau glass avec chips génération + recherche + grille de races
+- Quand on clique une race, elle remplit le slot parent approprié (P1 si vide, sinon P2)
+- Quand les 2 parents sont sélectionnés, le bouton Enregistrer devient actif
+
+**Step 1 : Réécrire le state et la structure**
+
+Remplacer l'interface `AccoupState` et toute la classe :
+
+```typescript
+import type { CommandBus } from '@application/handlers/CommandBus';
+import type { QueryBus } from '@application/handlers/QueryBus';
+import { RACES_DATA, GEN_COLORS, RACE_GEN, BREEDING_BY_PARENTS, COMPATIBLE_PARTNERS, raceColor } from '@domain/value-objects/Race';
+import { getDDImage } from '@presentation/helpers/dd-image';
+import { esc } from '@presentation/helpers/format';
+
+interface AccoupState {
+  parent1: string | null;
+  parent2: string | null;
+  filterGen: number | null;
+  search: string;
+  couples: string;
+  babies: string;
+  selectingSlot: 1 | 2;
+}
+
+export class AccouplementView {
+  private el: HTMLElement | null = null;
+  private accoupState: AccoupState = {
+    parent1: null, parent2: null,
+    filterGen: null, search: '',
+    couples: '', babies: '',
+    selectingSlot: 1,
+  };
+  private dirty = true;
+
+  constructor(
+    private commandBus: CommandBus,
+    private queryBus: QueryBus,
+  ) {}
+
+  render(container: HTMLElement): void {
+    this.el = document.createElement('div');
+    this.el.className = 'accoup-view';
+    container.appendChild(this.el);
+    this.dirty = true;
+    this.update();
+  }
+
+  update(): void {
+    if (!this.el || !this.dirty) return;
+    this.dirty = false;
+    this.renderSinglePage();
+  }
+
+  destroy(): void {
+    this.el?.remove();
+    this.el = null;
+  }
+
+  /* ── All races list (cached) ── */
+  private getAllRaces(): { name: string; gen: number }[] {
+    const all: { name: string; gen: number }[] = [];
+    for (const base of ['Rousse', 'Amande', 'Dorée'])
+      all.push({ name: base, gen: 1 });
+    for (const [g, rs] of Object.entries(RACES_DATA))
+      for (const r of rs)
+        all.push({ name: r.name, gen: parseInt(g) });
+    return all;
+  }
+
+  /* ── Filtered races based on gen filter, search, and partner compatibility ── */
+  private getFilteredRaces(): { name: string; gen: number }[] {
+    const { filterGen, search, parent1, selectingSlot } = this.accoupState;
+    let races = this.getAllRaces();
+
+    // If selecting parent 2, only show compatible partners
+    if (selectingSlot === 2 && parent1) {
+      const partners = COMPATIBLE_PARTNERS[parent1] ?? [];
+      const partnerNames = new Set(partners.map(p => p.partner));
+      races = races.filter(r => partnerNames.has(r.name));
+    }
+
+    const q = search.trim().toLowerCase();
+    return races.filter(r =>
+      (filterGen ? r.gen === filterGen : true) &&
+      (q ? r.name.toLowerCase().includes(q) : true)
+    );
+  }
+
+  /* ── Baby name from parents ── */
+  private getBabyName(): string | null {
+    const { parent1, parent2 } = this.accoupState;
+    if (!parent1 || !parent2) return null;
+    return BREEDING_BY_PARENTS[parent1 + '|' + parent2] ?? null;
+  }
+
+  /* ── Single page render ── */
+  private renderSinglePage(): void {
+    if (!this.el) return;
+    const { parent1, parent2, filterGen, search, couples, babies, selectingSlot } = this.accoupState;
+    const baby = this.getBabyName();
+    const hasBoth = !!(parent1 && parent2 && baby);
+
+    let html = '';
+
+    /* ── Parent panels row ── */
+    html += `<div class="accoup-parents">`;
+
+    // Parent 1 section
+    html += `<section class="accoup-parent-section">`;
+    html += `<div class="accoup-parent-header">
+      <span class="accoup-parent-title">Parent 1</span>
+      <span class="accoup-gender-badge male">MÂLE REQUIS</span>
+    </div>`;
+    if (parent1) {
+      const gen1 = RACE_GEN[parent1] ?? 1;
+      html += `<div class="accoup-selected-parent" data-clear="1">
+        ${getDDImage(parent1)}
+        <span class="accoup-selected-parent-name">${esc(parent1)}</span>
+        <span class="accoup-selected-parent-badge" style="background:${GEN_COLORS[gen1] ?? '#888'}">Gen ${gen1}</span>
+        <button class="accoup-selected-parent-clear" data-clear="1" title="Retirer">
+          <span class="material-symbols-outlined" style="font-size:14px">close</span>
+        </button>
+      </div>`;
+    } else {
+      html += `<div class="accoup-placeholder" data-select-slot="1">
+        <div class="accoup-placeholder-inner">
+          <div class="accoup-placeholder-icon">
+            <span class="material-symbols-outlined" style="color:var(--md-primary)">add</span>
+          </div>
+          <p class="accoup-placeholder-text">Cliquer pour choisir un mâle</p>
+        </div>
+      </div>`;
+    }
+    html += `</section>`;
+
+    // Center column
+    html += `<div class="accoup-center">`;
+    html += `<div class="accoup-heart">
+      <span class="material-symbols-outlined mso-fill">favorite</span>
+    </div>`;
+    html += `<div class="accoup-center-inputs">
+      <div class="accoup-center-field">
+        <label class="accoup-center-label">Nombre de couples</label>
+        <input class="accoup-center-input" id="accoup-couples" type="number" min="1" value="${esc(couples)}" placeholder="1">
+      </div>
+      <div class="accoup-center-field">
+        <label class="accoup-center-label">Bébés obtenus</label>
+        <input class="accoup-center-input secondary" id="accoup-babies" type="number" min="0" value="${esc(babies)}" placeholder="0">
+      </div>
+    </div>`;
+
+    // Baby preview (if both parents selected)
+    if (hasBoth && baby) {
+      const babyGen = RACE_GEN[baby] ?? 0;
+      html += `<div style="text-align:center;margin-top:4px">
+        <div style="font-size:10px;color:var(--md-on-surface-variant);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:6px">Résultat</div>
+        ${getDDImage(baby)}
+        <div style="font-size:12px;font-weight:700;color:var(--md-on-surface);margin-top:4px">${esc(baby)}</div>
+        <span class="accoup-selected-parent-badge" style="background:${GEN_COLORS[babyGen] ?? '#888'};font-size:8px">Gen ${babyGen}</span>
+      </div>`;
+    }
+
+    html += `<button class="accoup-register-btn" id="accoup-register" ${hasBoth ? '' : 'disabled'}>ENREGISTRER</button>`;
+    html += `</div>`;
+
+    // Parent 2 section
+    html += `<section class="accoup-parent-section">`;
+    html += `<div class="accoup-parent-header">
+      <span class="accoup-parent-title">Parent 2</span>
+      <span class="accoup-gender-badge female">FEMELLE REQUISE</span>
+    </div>`;
+    if (parent2) {
+      const gen2 = RACE_GEN[parent2] ?? 1;
+      html += `<div class="accoup-selected-parent" data-clear="2">
+        ${getDDImage(parent2)}
+        <span class="accoup-selected-parent-name">${esc(parent2)}</span>
+        <span class="accoup-selected-parent-badge" style="background:${GEN_COLORS[gen2] ?? '#888'}">Gen ${gen2}</span>
+        <button class="accoup-selected-parent-clear" data-clear="2" title="Retirer">
+          <span class="material-symbols-outlined" style="font-size:14px">close</span>
+        </button>
+      </div>`;
+    } else {
+      html += `<div class="accoup-placeholder" data-select-slot="2">
+        <div class="accoup-placeholder-inner">
+          <div class="accoup-placeholder-icon">
+            <span class="material-symbols-outlined" style="color:var(--md-secondary)">add</span>
+          </div>
+          <p class="accoup-placeholder-text">Cliquer pour choisir une femelle</p>
+        </div>
+      </div>`;
+    }
+    html += `</section>`;
+    html += `</div>`; // .accoup-parents
+
+    /* ── Grid panel ── */
+    html += `<div class="accoup-grid-panel">`;
+
+    // Gen chips
+    html += `<div class="accoup-gen-chips">`;
+    html += `<span class="accoup-gen-chips-label">Générations</span>`;
+    html += `<button class="accoup-gen-chip${filterGen === null ? ' active' : ''}" data-gen="all">Toutes</button>`;
+    for (let g = 1; g <= 10; g++) {
+      html += `<button class="accoup-gen-chip${filterGen === g ? ' active' : ''}" data-gen="${g}">Gen ${g}</button>`;
+    }
+    html += `</div>`;
+
+    // Search
+    html += `<div class="accoup-search-wrap">
+      <input class="accoup-search" id="accoup-search-input" type="text"
+        placeholder="Rechercher une race…" value="${esc(search)}" autocomplete="off">
+      ${search ? `<button class="accoup-search-clear" title="Effacer"><span class="material-symbols-outlined" style="font-size:16px">close</span></button>` : ''}
+    </div>`;
+
+    // Race grid
+    const filtered = this.getFilteredRaces();
+    if (filtered.length === 0) {
+      html += `<div class="accoup-empty">Aucune race trouvée</div>`;
+    } else {
+      const selecting = (!parent1 || !parent2);
+      html += `<div class="accoup-race-grid">`;
+      for (const race of filtered) {
+        const genCol = GEN_COLORS[race.gen] ?? '#888';
+        html += `<div class="accoup-race-card${selecting ? ' selecting' : ''}" data-race="${esc(race.name)}">
+          <div class="accoup-race-card-img">
+            ${getDDImage(race.name)}
+            <div class="accoup-race-card-gen" style="color:${genCol}">GEN ${race.gen}</div>
+          </div>
+          <div class="accoup-race-card-name">${esc(race.name)}</div>
+        </div>`;
+      }
+      html += `</div>`;
+    }
+
+    html += `</div>`; // .accoup-grid-panel
+
+    this.el.innerHTML = html;
+    this.bindEvents();
+
+    // Restore search focus if active
+    if (search) {
+      const inp = this.el.querySelector<HTMLInputElement>('#accoup-search-input');
+      if (inp) { inp.focus(); inp.setSelectionRange(inp.value.length, inp.value.length); }
+    }
+  }
+
+  /* ── Event binding ── */
+  private bindEvents(): void {
+    if (!this.el) return;
+
+    // Gen chips
+    this.el.querySelectorAll('.accoup-gen-chip').forEach(btn => {
+      btn.addEventListener('click', () => {
+        const val = (btn as HTMLElement).dataset.gen;
+        this.accoupState.filterGen = val === 'all' ? null : parseInt(val!);
+        this.dirty = true; this.update();
+      });
+    });
+
+    // Search
+    const searchInput = this.el.querySelector<HTMLInputElement>('#accoup-search-input');
+    if (searchInput) {
+      searchInput.addEventListener('input', () => {
+        this.accoupState.search = searchInput.value;
+        this.dirty = true; this.update();
+      });
+    }
+    const clearBtn = this.el.querySelector('.accoup-search-clear');
+    if (clearBtn) {
+      clearBtn.addEventListener('click', () => {
+        this.accoupState.search = '';
+        this.dirty = true; this.update();
+      });
+    }
+
+    // Placeholder clicks (select slot)
+    this.el.querySelectorAll<HTMLElement>('[data-select-slot]').forEach(ph => {
+      ph.addEventListener('click', () => {
+        this.accoupState.selectingSlot = parseInt(ph.dataset.selectSlot!) as 1 | 2;
+        // No re-render needed, just changes which slot gets filled
+      });
+    });
+
+    // Clear parent buttons
+    this.el.querySelectorAll<HTMLElement>('[data-clear]').forEach(btn => {
+      if (btn.tagName === 'BUTTON') {
+        btn.addEventListener('click', (e) => {
+          e.stopPropagation();
+          const slot = parseInt(btn.dataset.clear!);
+          if (slot === 1) {
+            this.accoupState.parent1 = null;
+            this.accoupState.parent2 = null; // Reset P2 too since partners depend on P1
+            this.accoupState.selectingSlot = 1;
+          } else {
+            this.accoupState.parent2 = null;
+            this.accoupState.selectingSlot = 2;
+          }
+          this.dirty = true; this.update();
+        });
+      }
+    });
+
+    // Race card clicks
+    this.el.querySelectorAll<HTMLElement>('.accoup-race-card').forEach(card => {
+      card.addEventListener('click', () => {
+        const race = card.dataset.race!;
+        if (!this.accoupState.parent1) {
+          this.accoupState.parent1 = race;
+          this.accoupState.selectingSlot = 2;
+          this.accoupState.filterGen = null;
+          this.accoupState.search = '';
+        } else if (!this.accoupState.parent2) {
+          this.accoupState.parent2 = race;
+        }
+        this.dirty = true; this.update();
+      });
+    });
+
+    // Couples / babies inputs
+    const couplesInput = this.el.querySelector<HTMLInputElement>('#accoup-couples');
+    const babiesInput = this.el.querySelector<HTMLInputElement>('#accoup-babies');
+    if (couplesInput) {
+      let prev = couplesInput.value;
+      couplesInput.addEventListener('focus', () => { prev = couplesInput.value; couplesInput.value = ''; });
+      couplesInput.addEventListener('blur', () => {
+        if (couplesInput.value === '') couplesInput.value = prev;
+        this.accoupState.couples = couplesInput.value;
+      });
+    }
+    if (babiesInput) {
+      let prev = babiesInput.value;
+      babiesInput.addEventListener('focus', () => { prev = babiesInput.value; babiesInput.value = ''; });
+      babiesInput.addEventListener('blur', () => {
+        if (babiesInput.value === '') babiesInput.value = prev;
+        this.accoupState.babies = babiesInput.value;
+      });
+    }
+
+    // Register button
+    const registerBtn = this.el.querySelector('#accoup-register');
+    if (registerBtn) {
+      registerBtn.addEventListener('click', () => {
+        const { parent1, parent2 } = this.accoupState;
+        if (!parent1 || !parent2) return;
+        const baby = BREEDING_BY_PARENTS[parent1 + '|' + parent2] ?? '';
+        if (!baby) return;
+        const c = parseInt(this.accoupState.couples) || 0;
+        const b = parseInt(this.accoupState.babies) || 0;
+        if (c <= 0) return;
+
+        this.commandBus.execute({
+          type: 'register-accouplement',
+          parent1,
+          parent2,
+          baby,
+          gen: RACE_GEN[baby] ?? 0,
+          couples: c,
+          babiesObtained: b,
+        });
+
+        // Reset
+        this.accoupState = {
+          parent1: null, parent2: null,
+          filterGen: null, search: '',
+          couples: '', babies: '',
+          selectingSlot: 1,
+        };
+        this.dirty = true; this.update();
+      });
+    }
+  }
+}
+```
+
+**Step 2 : Vérifier la compilation**
+
+Run: `npm run build` (depuis Windows)
+Expected: Build réussi, pas d'erreurs TypeScript.
+
+**Step 3 : Tester visuellement**
+
+Run: `npm start`
+- Naviguer vers l'écran Accouplement
+- Vérifier le layout 3 colonnes (Parent 1 | Cœur+inputs | Parent 2)
+- Cliquer une race → remplit Parent 1
+- La grille se filtre pour montrer les partenaires compatibles
+- Cliquer un partenaire → remplit Parent 2
+- Le bébé apparaît au centre + bouton Enregistrer actif
+- Le bouton × vide un parent
+- Les chips génération et la recherche fonctionnent
+
+**Step 4 : Commit**
+
+```bash
+git add src/presentation/components/AccouplementView.ts
+git commit -m "feat(accouplement): refonte layout single-page Obsidienne avec panneaux parents"
+```
+
+---
+
+### Task 3 : Nettoyage et polish
+
+**Files:**
+- Modify: `src/presentation/styles/components.css` (vérifier qu'il ne reste rien d'accoup)
+- Verify: `src/presentation/components/AccouplementView.ts`
+
+**Step 1 : Vérifier qu'aucun ancien style `.accoup-*` ne reste dans components.css**
+
+Chercher `accoup` dans `components.css`. Si des restes existent, les supprimer.
+
+**Step 2 : Vérifier que le flow complet fonctionne**
+
+Test manuel :
+1. Sélectionner "Rousse" → P1 se remplit, grille montre partenaires compatibles
+2. Sélectionner un partenaire → P2 se remplit, bébé apparaît au centre
+3. Entrer couples=2, bébés=1
+4. Cliquer "Enregistrer" → reset complet
+5. Bouton × sur P1 → reset P1 et P2
+6. Bouton × sur P2 → reset P2 seulement
+7. Filtrer par Gen 2 → seules les races Gen 2 apparaissent
+8. Rechercher "Rou" → filtre textuel fonctionne
+
+**Step 3 : Commit final**
+
+```bash
+git add -A
+git commit -m "chore(accouplement): nettoyage styles et polish refonte"
+```
diff --git a/docs/plans/2026-04-04-electron-updater-design.md b/docs/plans/2026-04-04-electron-updater-design.md
new file mode 100644
index 0000000..ecb2236
--- /dev/null
+++ b/docs/plans/2026-04-04-electron-updater-design.md
@@ -0,0 +1,62 @@
+# Migration electron-updater + Gitea — Design
+
+## Objectif
+
+Remplacer le système de mise à jour custom (download HTTP manuel + script batch NSIS) par `electron-updater`, tout en conservant Gitea comme hébergeur de releases.
+
+## Contrainte Gitea
+
+Gitea ne supporte pas l'URL `/releases/latest/download/{filename}` (issue #31408 ouverte). On utilise donc une approche hybride :
+1. Appel API Gitea pour découvrir la dernière version
+2. `electron-updater` (generic provider) pour le cycle download → vérification sha512 → installation NSIS → restart
+
+## Workflow de release
+
+1. `npm run build` → génère `.exe` + `latest.yml` dans `dist/`
+2. Créer le tag git, push
+3. Sur Gitea : créer la release, uploader le `.exe` ET `latest.yml`
+
+## Architecture
+
+### Flux côté app
+
+```
+Démarrage (3s) → GET /api/v1/repos/mickael/dd-timer/releases/latest
+  → Compare versions (tag_name vs app.getVersion())
+  → Si update dispo :
+      autoUpdater.setFeedURL({
+        provider: "generic",
+        url: "https://gitea.mickael-pol.fr/mickael/dd-timer/releases/download/{tag}/"
+      })
+      autoUpdater.checkForUpdates()
+      → electron-updater lit latest.yml
+      → Télécharge le .exe (download-progress events)
+      → update-downloaded → prêt à installer
+      → quitAndInstall() au clic utilisateur
+```
+
+### Changements par fichier
+
+| Fichier | Action |
+|---------|--------|
+| `package.json` | Ajouter `electron-updater` dep + config `publish` generic |
+| `main.ts` | Supprimer download HTTP, redirections, script batch. Garder appel API Gitea. Ajouter autoUpdater events. |
+| `preload.ts` | Inchangé (mêmes IPC channels) |
+| `UpdateBanner.ts` | Inchangé |
+
+### IPC channels (conservés)
+
+- `update-available` → bannière disponible
+- `update-downloading` → bannière téléchargement
+- `update-progress` → { percent }
+- `update-ready` → bouton "Installer et redémarrer"
+- `update-error` → message erreur
+- `install-update` → déclenche quitAndInstall()
+
+## Avantages
+
+- Suppression du script batch hack (~80 lignes)
+- Vérification d'intégrité sha512 automatique
+- Gestion NSIS install + restart native
+- Code main.ts simplifié (~40 lignes vs ~200)
+- Zéro infra supplémentaire
diff --git a/docs/plans/2026-04-04-electron-updater-implementation.md b/docs/plans/2026-04-04-electron-updater-implementation.md
new file mode 100644
index 0000000..ab3fa1e
--- /dev/null
+++ b/docs/plans/2026-04-04-electron-updater-implementation.md
@@ -0,0 +1,390 @@
+# Migration electron-updater + Gitea — Implementation Plan
+
+> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
+
+**Goal:** Remplacer le système de mise à jour custom (download HTTP + script batch) par `electron-updater`, en gardant Gitea comme source de releases.
+
+**Architecture:** Approche hybride — appel API Gitea pour découvrir la dernière version (car Gitea n'a pas d'URL fixe "latest"), puis `electron-updater` (generic provider) pour le cycle download → vérification sha512 → installation NSIS → restart. Les IPC channels restent identiques pour que `UpdateBanner.ts` et `preload.ts` n'aient aucun changement.
+
+**Tech Stack:** electron-updater 6.x, Electron 32.x, TypeScript
+
+---
+
+### Task 1: Installer electron-updater et configurer package.json
+
+**Files:**
+- Modify: `package.json`
+
+**Step 1: Installer la dépendance**
+
+```bash
+npm install electron-updater
+```
+
+> `electron-updater` doit être dans `dependencies` (pas `devDependencies`) car il tourne dans l'app packagée.
+
+**Step 2: Ajouter la config `publish` dans la section `build`**
+
+Dans `package.json`, ajouter dans `"build"` :
+
+```json
+"publish": {
+  "provider": "generic",
+  "url": "https://gitea.mickael-pol.fr/mickael/dd-timer/releases/download/latest"
+}
+```
+
+> Cette URL est un placeholder — au runtime, on la remplace dynamiquement via `setFeedURL()`.
+> Son seul rôle est de déclencher la génération de `latest.yml` par electron-builder.
+
+**Step 3: Commit**
+
+```bash
+git add package.json package-lock.json
+git commit -m "chore: add electron-updater dependency + publish config"
+```
+
+---
+
+### Task 2: Réécrire la section mise à jour dans main.ts
+
+**Files:**
+- Modify: `src/infrastructure/electron/main.ts:1-16` (imports)
+- Modify: `src/infrastructure/electron/main.ts:37-48` (UpdateInfo + state vars)
+- Delete: `src/infrastructure/electron/main.ts:254-450` (tout le bloc update custom)
+- Add: nouveau bloc update avec electron-updater (~60 lignes)
+
+**Step 1: Ajouter l'import electron-updater, supprimer les imports inutiles**
+
+Remplacer les imports en haut du fichier :
+
+```typescript
+import {
+  app,
+  BrowserWindow,
+  Tray,
+  Menu,
+  nativeImage,
+  ipcMain,
+  Notification,
+  dialog,
+} from 'electron';
+import path from 'path';
+import fs from 'fs';
+import { autoUpdater } from 'electron-updater';
+```
+
+> Supprimer : `import https from 'https'`, `import http from 'http'`, `import os from 'os'`, `import { spawn } from 'child_process'` — ils ne sont plus nécessaires pour les mises à jour.
+>
+> **Attention** : `https` et `http` sont encore utilisés par le bloc ntfy (lignes 214-243). Vérifier si d'autres usages existent avant de supprimer. Si ntfy les utilise → garder `https` et `http`. Supprimer seulement `os` et `spawn` si plus aucun usage.
+
+**Step 2: Simplifier les variables d'état**
+
+Remplacer l'interface `UpdateInfo` et les variables `updateInfo` / `downloading` :
+
+```typescript
+interface UpdateInfo {
+  version: string;
+}
+
+let updateInfo: UpdateInfo | null = null;
+```
+
+> On supprime `downloadUrl`, `assetName`, `releaseNotes` — electron-updater gère tout ça.
+> On supprime `downloading` — electron-updater gère l'état.
+
+**Step 3: Supprimer tout le bloc update custom**
+
+Supprimer entièrement (lignes 254-450) :
+- `compareVersions()`
+- Interfaces `GiteaAsset`, `GiteaRelease`
+- `checkForUpdates()`
+- `startDownload()`
+- `sendUpdateError()`
+- `launchUpdater()`
+
+**Step 4: Écrire le nouveau système de mise à jour**
+
+Ajouter à la place du code supprimé :
+
+```typescript
+// ─── COMPARAISON DE VERSIONS ────────────────────────────────────────────────
+function compareVersions(a: string, b: string): number {
+  const pa = a.replace(/^v/, '').split('.').map(Number);
+  const pb = b.replace(/^v/, '').split('.').map(Number);
+  for (let i = 0; i < 3; i++) {
+    if ((pb[i] || 0) > (pa[i] || 0)) return 1;
+    if ((pb[i] || 0) < (pa[i] || 0)) return -1;
+  }
+  return 0;
+}
+
+// ─── ELECTRON-UPDATER : CONFIGURATION ───────────────────────────────────────
+autoUpdater.autoDownload = true;
+autoUpdater.autoInstallOnAppQuit = false;
+
+// ─── ELECTRON-UPDATER : EVENTS ──────────────────────────────────────────────
+autoUpdater.on('update-available', (info) => {
+  updateInfo = { version: info.version };
+  if (mainWindow && !mainWindow.isDestroyed()) {
+    mainWindow.webContents.send('update-available', updateInfo);
+  }
+  fireNotification(
+    `Mise a jour v${info.version} disponible !`,
+    'Téléchargement en cours...'
+  );
+  rebuildTrayMenu();
+});
+
+autoUpdater.on('download-progress', (progress) => {
+  if (mainWindow && !mainWindow.isDestroyed()) {
+    mainWindow.webContents.send('update-progress', { percent: Math.round(progress.percent) });
+  }
+});
+
+autoUpdater.on('update-downloaded', () => {
+  if (mainWindow && !mainWindow.isDestroyed()) {
+    mainWindow.webContents.send('update-ready', updateInfo ?? {});
+  }
+});
+
+autoUpdater.on('error', (err) => {
+  console.error('Update error:', err.message);
+  if (mainWindow && !mainWindow.isDestroyed()) {
+    mainWindow.webContents.send('update-error', { message: err.message });
+  }
+});
+
+// ─── VÉRIFICATION VIA API GITEA ─────────────────────────────────────────────
+function checkForUpdates(silent = false): void {
+  const https = require('https') as typeof import('https');
+  const options: import('https').RequestOptions = {
+    hostname: GITEA_HOST,
+    port: 443,
+    path: `/api/v1/repos/${GITEA_USER}/${GITEA_REPO}/releases?limit=1`,
+    method: 'GET',
+    headers: {
+      'User-Agent': `MinuteurDragodinde/${CURRENT_VERSION}`,
+      'Accept': 'application/json',
+    },
+  };
+
+  const req = https.request(options, (res) => {
+    let data = '';
+    res.on('data', (chunk: string) => { data += chunk; });
+    res.on('end', () => {
+      try {
+        const releases = JSON.parse(data);
+        if (!Array.isArray(releases) || releases.length === 0) return;
+        const release = releases[0];
+        const latestVersion = release.tag_name;
+        if (!latestVersion || compareVersions(CURRENT_VERSION, latestVersion) <= 0) {
+          if (!silent && mainWindow && !mainWindow.isDestroyed()) {
+            mainWindow.webContents.send('update-not-available');
+          }
+          return;
+        }
+
+        // Pointer electron-updater vers le tag de la release
+        const tag = latestVersion.startsWith('v') ? latestVersion : `v${latestVersion}`;
+        autoUpdater.setFeedURL({
+          provider: 'generic',
+          url: `https://${GITEA_HOST}/${GITEA_USER}/${GITEA_REPO}/releases/download/${tag}`,
+        });
+
+        // electron-updater prend le relais : lit latest.yml, télécharge, vérifie
+        autoUpdater.checkForUpdates();
+      } catch (e: unknown) {
+        console.error('Update check parse error:', (e as Error).message);
+      }
+    });
+  });
+
+  req.on('error', (e: Error) => console.error('Update check error:', e.message));
+  req.end();
+}
+```
+
+**Step 5: Mettre à jour le handler `install-update`**
+
+Remplacer :
+```typescript
+ipcMain.on('install-update', () => startDownload());
+```
+
+Par :
+```typescript
+ipcMain.on('install-update', () => {
+  autoUpdater.quitAndInstall(true, true);
+});
+```
+
+> `quitAndInstall(isSilent, isForceRunAfter)` : installe en silencieux et relance l'app.
+
+**Step 6: Mettre à jour le tray menu**
+
+Dans `rebuildTrayMenu()`, remplacer le click du menu update :
+
+```typescript
+if (updateInfo) {
+  items.push({ type: 'separator' });
+  items.push({
+    label: `⬆ Mise a jour v${updateInfo.version} disponible !`,
+    click: () => autoUpdater.quitAndInstall(true, true),
+  });
+}
+```
+
+**Step 7: Simplifier le bloc did-finish-load**
+
+Le bloc `did-finish-load` (ligne 115-133) reste identique — il envoie déjà `update-available` si `updateInfo` existe.
+
+**Step 8: Commit**
+
+```bash
+git add src/infrastructure/electron/main.ts
+git commit -m "feat: migrate update system to electron-updater"
+```
+
+---
+
+### Task 3: Vérifier que preload.ts et UpdateBanner.ts n'ont pas besoin de changement
+
+**Files:**
+- Read: `src/infrastructure/electron/preload.ts`
+- Read: `src/presentation/components/UpdateBanner.ts`
+
+**Step 1: Vérifier les IPC channels**
+
+Les channels IPC n'ont pas changé :
+- `update-available` → `{ version }` ✓
+- `update-downloading` → **ATTENTION** : l'ancien code envoyait `update-downloading`, mais electron-updater n'a pas cet event. Il passe directement de `update-available` à `download-progress`. Le banner state `downloading` est activé par `onUpdateDownloading` OU `onUpdateProgress`. Vérifier que `UpdateBanner` gère bien la transition.
+
+**Step 2: Envoyer `update-downloading` explicitement**
+
+Dans les events autoUpdater, ajouter après `update-available` :
+
+```typescript
+autoUpdater.on('update-available', (info) => {
+  updateInfo = { version: info.version };
+  if (mainWindow && !mainWindow.isDestroyed()) {
+    mainWindow.webContents.send('update-available', updateInfo);
+    // Envoyer aussi downloading car autoDownload = true
+    mainWindow.webContents.send('update-downloading', { version: info.version });
+  }
+  fireNotification(
+    `Mise a jour v${info.version} disponible !`,
+    'Téléchargement en cours...'
+  );
+  rebuildTrayMenu();
+});
+```
+
+> Cela garantit que `UpdateBanner` passe bien en état `downloading` comme avant.
+
+**Step 3: Commit (si changement)**
+
+```bash
+git add src/infrastructure/electron/main.ts
+git commit -m "fix: send update-downloading event for banner compatibility"
+```
+
+---
+
+### Task 4: Vérifier la génération de latest.yml
+
+**Step 1: Lancer un build**
+
+```bash
+npm run build
+```
+
+**Step 2: Vérifier que `dist/latest.yml` existe**
+
+```bash
+ls dist/latest.yml
+cat dist/latest.yml
+```
+
+Contenu attendu (exemple) :
+```yaml
+version: 1.1.5
+files:
+  - url: Minuteur-Dragodinde-Setup-1.1.5.exe
+    sha512: <hash>
+    size: <size>
+path: Minuteur-Dragodinde-Setup-1.1.5.exe
+sha512: <hash>
+releaseDate: '2026-04-04T...'
+```
+
+**Step 3: Vérifier que le .exe est aussi généré**
+
+```bash
+ls dist/Minuteur-Dragodinde-Setup-*.exe
+```
+
+---
+
+### Task 5: Mettre à jour le CHANGELOG
+
+**Files:**
+- Modify: `CHANGELOG.md`
+
+**Step 1: Ajouter l'entrée**
+
+Ajouter sous `## v1.1.6` (ou créer `## v1.1.7` si nouvelle version) :
+
+```markdown
+### Mise à jour automatique
+
+- **Migration electron-updater** : remplacement du système custom (download HTTP + script batch) par `electron-updater` (generic provider)
+  - Vérification sha512 automatique des mises à jour
+  - Installation NSIS native (plus de script batch hack)
+  - Restart automatique après installation
+  - Code simplifié (~40 lignes vs ~200)
+  - Compatible Gitea : découverte via API + `latest.yml` uploadé en asset de release
+```
+
+**Step 2: Commit**
+
+```bash
+git add CHANGELOG.md
+git commit -m "docs: add electron-updater migration to CHANGELOG"
+```
+
+---
+
+### Task 6: Mettre à jour le workflow de release
+
+**Step 1: Documenter le nouveau process**
+
+Le nouveau workflow de release est :
+
+1. Mettre à jour `version` dans `package.json`
+2. `npm run build`
+3. Deux fichiers sont générés dans `dist/` :
+   - `Minuteur-Dragodinde-Setup-X.Y.Z.exe`
+   - `latest.yml`
+4. Commit + tag + push :
+   ```bash
+   git add -A && git commit -m "vX.Y.Z"
+   git tag vX.Y.Z && git push && git push --tags
+   ```
+5. Sur Gitea → Releases → Créer release avec le tag
+6. **Uploader les 2 fichiers** : le `.exe` ET `latest.yml`
+
+> **IMPORTANT** : `latest.yml` DOIT être uploadé à chaque release, sinon electron-updater ne pourra pas vérifier l'intégrité du fichier.
+
+---
+
+## Récapitulatif des fichiers modifiés
+
+| Fichier | Action |
+|---------|--------|
+| `package.json` | Ajout dep `electron-updater` + config `publish` |
+| `package-lock.json` | Mis à jour automatiquement |
+| `src/infrastructure/electron/main.ts` | Réécriture section update (~200 lignes → ~60 lignes) |
+| `src/infrastructure/electron/preload.ts` | **Aucun changement** |
+| `src/presentation/components/UpdateBanner.ts` | **Aucun changement** |
+| `CHANGELOG.md` | Entrée migration |
diff --git a/docs/plans/2026-04-05-toast-notifications-design.md b/docs/plans/2026-04-05-toast-notifications-design.md
new file mode 100644
index 0000000..c22780a
--- /dev/null
+++ b/docs/plans/2026-04-05-toast-notifications-design.md
@@ -0,0 +1,55 @@
+# Toast Notifications — Design
+
+**Goal:** Ajouter un systeme de toast notifications (bas droite) pour confirmer les actions et afficher les erreurs, en remplacement des `alert()` natifs.
+
+## Types
+
+| Type | Icone | Couleur | Duree |
+|------|-------|---------|-------|
+| `success` | `check_circle` | Vert | 3s |
+| `error` | `error` | Rouge | 5s |
+
+## Composant Toast.ts
+
+Singleton avec file de toasts. API : `Toast.show(type, message)`.
+
+- Max 3 toasts visibles (les plus anciens sont evincés)
+- Empilage vertical vers le haut
+- Animation : slide-in droite + fade-out a l'expiration
+
+## Style
+
+- Position : `bottom: 24px; right: 24px`, z-index eleve
+- Glassmorphism Obsidienne (fond semi-transparent, blur, border subtle)
+- Icone + texte sur une ligne, lisere gauche colore selon le type
+- Pas de bouton d'action (undo/redo sera separe)
+
+## Integration
+
+- `App.ts` monte le conteneur `#toast-container` dans le DOM
+- Chaque composant appelle `Toast.show()` apres `commandBus.execute()`
+- Remplacer les `alert()` de `WorkflowsView.ts` par des toasts error
+
+## Actions couvertes
+
+### Success
+- Suppression enclos
+- Suppression DD
+- Import workflows
+- Enregistrement accouplement
+- Reset statistiques
+- Clear enclos
+- Nouvelle fournee
+- Export workflows
+
+### Error
+- Import workflows : fichier invalide, JSON invalide
+- Toute erreur de validation future
+
+## Fichiers
+
+- **Creer** : `src/presentation/components/Toast.ts`
+- **Modifier** : `src/presentation/styles/obsidienne.css`
+- **Modifier** : `src/presentation/components/App.ts`
+- **Modifier** : `src/presentation/components/WorkflowsView.ts`
+- **Modifier** : composants avec actions destructives/importantes
diff --git a/docs/plans/2026-04-05-toast-notifications-plan.md b/docs/plans/2026-04-05-toast-notifications-plan.md
new file mode 100644
index 0000000..f534ae7
--- /dev/null
+++ b/docs/plans/2026-04-05-toast-notifications-plan.md
@@ -0,0 +1,440 @@
+# Toast Notifications Implementation Plan
+
+> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
+
+**Goal:** Ajouter un systeme de toast notifications (success/error) en bas a droite pour donner du feedback apres les actions utilisateur.
+
+**Architecture:** Composant singleton `Toast` avec file d'attente, monte dans le DOM par `App.ts`. Chaque composant appelle `Toast.show()` apres ses actions. Les `alert()` natifs sont remplaces par des toasts error.
+
+**Tech Stack:** TypeScript, CSS animations, Material Symbols Outlined
+
+---
+
+### Task 1: Creer le composant Toast.ts
+
+**Files:**
+- Create: `src/presentation/components/Toast.ts`
+
+**Step 1: Creer le fichier Toast.ts**
+
+```typescript
+export type ToastType = 'success' | 'error';
+
+interface ToastItem {
+  id: number;
+  type: ToastType;
+  message: string;
+}
+
+const ICON: Record<ToastType, string> = {
+  success: 'check_circle',
+  error: 'error',
+};
+
+const DURATION: Record<ToastType, number> = {
+  success: 3000,
+  error: 5000,
+};
+
+const MAX_VISIBLE = 3;
+
+let nextId = 0;
+let container: HTMLElement | null = null;
+const items: ToastItem[] = [];
+
+export const Toast = {
+  mount(parent: HTMLElement): void {
+    container = document.createElement('div');
+    container.id = 'toast-container';
+    parent.appendChild(container);
+  },
+
+  show(type: ToastType, message: string): void {
+    if (!container) return;
+
+    const id = nextId++;
+    items.push({ id, type, message });
+
+    // Evincer les plus anciens si > MAX_VISIBLE
+    while (items.length > MAX_VISIBLE) {
+      const old = items.shift()!;
+      const oldEl = container.querySelector(`[data-toast-id="${old.id}"]`);
+      if (oldEl) oldEl.remove();
+    }
+
+    const el = document.createElement('div');
+    el.className = `toast toast-${type}`;
+    el.dataset['toastId'] = String(id);
+    el.innerHTML = `<span class="toast-icon material-symbols-outlined">${ICON[type]}</span><span class="toast-msg">${message}</span>`;
+    container.appendChild(el);
+
+    // Trigger animation
+    requestAnimationFrame(() => el.classList.add('toast-visible'));
+
+    setTimeout(() => {
+      el.classList.remove('toast-visible');
+      el.classList.add('toast-exit');
+      el.addEventListener('animationend', () => {
+        el.remove();
+        const idx = items.findIndex(i => i.id === id);
+        if (idx !== -1) items.splice(idx, 1);
+      }, { once: true });
+    }, DURATION[type]);
+  },
+};
+```
+
+**Step 2: Run tests**
+
+Run: `npm test` (depuis Windows)
+Expected: PASS (aucun test casse, nouveau fichier sans test pour l'instant)
+
+**Step 3: Commit**
+
+```bash
+git add src/presentation/components/Toast.ts
+git commit -m "feat(toast): creer le composant Toast singleton"
+```
+
+---
+
+### Task 2: Ajouter les styles CSS
+
+**Files:**
+- Modify: `src/presentation/styles/obsidienne.css`
+
+**Step 1: Ajouter les styles toast a la fin de obsidienne.css**
+
+Ajouter avant le dernier `}` ou a la fin du fichier :
+
+```css
+/* ────────────────────���────────────────────────────
+   TOAST NOTIFICATIONS
+   ───────────────────────���───────────────────────── */
+#toast-container {
+  position: fixed;
+  bottom: 24px;
+  right: 24px;
+  z-index: 9999;
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 8px;
+  pointer-events: none;
+}
+
+.toast {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 20px;
+  border-radius: 12px;
+  background: rgba(30, 20, 50, 0.85);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  color: #e0e0e0;
+  font-size: 0.92rem;
+  font-family: var(--font-body);
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
+  pointer-events: auto;
+  opacity: 0;
+  transform: translateX(100%);
+  transition: none;
+  min-width: 260px;
+  max-width: 400px;
+}
+
+.toast-visible {
+  animation: toast-in 0.3s ease forwards;
+}
+
+.toast-exit {
+  animation: toast-out 0.3s ease forwards;
+}
+
+.toast-icon {
+  font-size: 1.3rem;
+  flex-shrink: 0;
+}
+
+.toast-msg {
+  flex: 1;
+  line-height: 1.3;
+}
+
+.toast-success {
+  border-left: 3px solid #4caf50;
+}
+.toast-success .toast-icon {
+  color: #4caf50;
+}
+
+.toast-error {
+  border-left: 3px solid #f44336;
+}
+.toast-error .toast-icon {
+  color: #f44336;
+}
+
+@keyframes toast-in {
+  from { opacity: 0; transform: translateX(100%); }
+  to   { opacity: 1; transform: translateX(0); }
+}
+
+@keyframes toast-out {
+  from { opacity: 1; transform: translateX(0); }
+  to   { opacity: 0; transform: translateX(100%); }
+}
+```
+
+**Step 2: Verifier visuellement**
+
+Run: `npm start` (depuis Windows)
+Verifier que l'app demarre sans erreur CSS.
+
+**Step 3: Commit**
+
+```bash
+git add src/presentation/styles/obsidienne.css
+git commit -m "style(toast): ajouter les styles glassmorphism pour les toasts"
+```
+
+---
+
+### Task 3: Monter le conteneur Toast dans App.ts
+
+**Files:**
+- Modify: `src/presentation/components/App.ts:1-74`
+
+**Step 1: Ajouter l'import Toast**
+
+Apres la ligne `import { UpdateBanner } from './UpdateBanner';` (ligne 14), ajouter :
+
+```typescript
+import { Toast } from './Toast';
+```
+
+**Step 2: Monter le conteneur dans render()**
+
+Apres le montage du update banner (apres la ligne `this.updateBanner.render(bannerRoot);`, environ ligne 73), ajouter :
+
+```typescript
+    // Mount toast container
+    const appShell = this.root.querySelector('.app-shell') as HTMLElement;
+    Toast.mount(appShell);
+```
+
+**Step 3: Run tests**
+
+Run: `npm test` (depuis Windows)
+Expected: PASS
+
+**Step 4: Commit**
+
+```bash
+git add src/presentation/components/App.ts
+git commit -m "feat(toast): monter le conteneur Toast dans App.ts"
+```
+
+---
+
+### Task 4: Remplacer les alert() dans WorkflowsView.ts
+
+**Files:**
+- Modify: `src/presentation/components/WorkflowsView.ts:349,653,665`
+
+**Step 1: Ajouter l'import**
+
+En haut de `WorkflowsView.ts`, ajouter :
+
+```typescript
+import { Toast } from './Toast';
+```
+
+**Step 2: Remplacer les alert() par des toasts error**
+
+Ligne ~653 — remplacer :
+```typescript
+alert('Aucun plan valide trouvé dans le fichier.');
+```
+par :
+```typescript
+Toast.show('error', 'Aucun plan valide trouvé dans le fichier.');
+```
+
+Ligne ~665 — remplacer :
+```typescript
+alert('Le fichier sélectionné n\'est pas un JSON valide.');
+```
+par :
+```typescript
+Toast.show('error', 'Le fichier sélectionné n\'est pas un JSON valide.');
+```
+
+**Step 3: Ajouter un toast success apres import reussi**
+
+Apres la ligne `this.commandBus.execute({ type: 'import-workflows', ... })` (ligne ~660), avant `this.dirty = true;`, ajouter :
+
+```typescript
+Toast.show('success', `${valid.length} plan(s) importé(s) avec succès.`);
+```
+
+**Step 4: Ajouter un toast success apres suppression workflow**
+
+Ligne ~350, apres `this.commandBus.execute({ type: 'delete-workflow', ... })`, ajouter :
+
+```typescript
+Toast.show('success', `Plan "${name}" supprimé.`);
+```
+
+**Step 5: Run tests**
+
+Run: `npm test` (depuis Windows)
+Expected: PASS
+
+**Step 6: Commit**
+
+```bash
+git add src/presentation/components/WorkflowsView.ts
+git commit -m "feat(toast): remplacer alert() par toasts dans WorkflowsView"
+```
+
+---
+
+### Task 5: Ajouter les toasts dans les autres composants
+
+**Files:**
+- Modify: `src/presentation/components/App.ts:176` (delete-enclos)
+- Modify: `src/presentation/components/EnclosView.ts:206,274` (clear-enclos, nouvelle-fournee)
+- Modify: `src/presentation/components/Dashboard.ts:229` (reset-stats)
+- Modify: `src/presentation/components/AccouplementView.ts:434` (register-accouplement)
+- Modify: `src/presentation/components/DragodindeCard.ts:216` (remove-dragodinde)
+
+**Step 1: App.ts — toast apres suppression enclos**
+
+Ajouter l'import `Toast` (deja fait en Task 3). Apres `this.commandBus.execute({ type: 'delete-enclos', enclosId: id });` (ligne ~176), ajouter :
+
+```typescript
+Toast.show('success', 'Enclos supprimé.');
+```
+
+**Step 2: EnclosView.ts — toasts clear et nouvelle fournee**
+
+Ajouter l'import en haut :
+```typescript
+import { Toast } from './Toast';
+```
+
+Apres `this.commandBus.execute({ type: 'clear-enclos', enclosId: eId });` (ligne ~206), ajouter :
+```typescript
+Toast.show('success', 'Enclos vidé.');
+```
+
+Apres `this.commandBus.execute({ type: 'nouvelle-fournee', enclosId: eId });` (ligne ~274), ajouter :
+```typescript
+Toast.show('success', 'Nouvelle fournée lancée.');
+```
+
+**Step 3: Dashboard.ts — toast reset stats**
+
+Ajouter l'import :
+```typescript
+import { Toast } from './Toast';
+```
+
+Apres `this.commandBus.execute({ type: 'reset-stats' });` (ligne ~229), ajouter :
+```typescript
+Toast.show('success', 'Statistiques réinitialisées.');
+```
+
+**Step 4: AccouplementView.ts — toast enregistrement**
+
+Ajouter l'import :
+```typescript
+import { Toast } from './Toast';
+```
+
+Apres le `this.commandBus.execute({ type: 'register-accouplement', ... })` (ligne ~434), ajouter :
+```typescript
+Toast.show('success', 'Accouplement enregistré.');
+```
+
+**Step 5: DragodindeCard.ts — toast suppression DD**
+
+Ajouter l'import :
+```typescript
+import { Toast } from './Toast';
+```
+
+Apres `this.commandBus.execute({ type: 'remove-dragodinde', ... })` (ligne ~216), ajouter :
+```typescript
+Toast.show('success', 'Dragodinde retirée.');
+```
+
+**Step 6: Run tests**
+
+Run: `npm test` (depuis Windows)
+Expected: PASS
+
+**Step 7: Commit**
+
+```bash
+git add src/presentation/components/App.ts src/presentation/components/EnclosView.ts src/presentation/components/Dashboard.ts src/presentation/components/AccouplementView.ts src/presentation/components/DragodindeCard.ts
+git commit -m "feat(toast): ajouter toasts success sur toutes les actions importantes"
+```
+
+---
+
+### Task 6: Ajouter un toast pour l'export workflows
+
+**Files:**
+- Modify: `src/presentation/components/WorkflowsView.ts`
+
+**Step 1: Trouver la methode d'export**
+
+Chercher la methode qui gere le clic sur le bouton d'export (probablement `exportWorkflows` ou similaire avec `showSaveDialog`). Apres l'ecriture reussie du fichier, ajouter :
+
+```typescript
+Toast.show('success', 'Plans exportés avec succès.');
+```
+
+**Step 2: Run tests**
+
+Run: `npm test` (depuis Windows)
+Expected: PASS
+
+**Step 3: Commit**
+
+```bash
+git add src/presentation/components/WorkflowsView.ts
+git commit -m "feat(toast): toast success apres export workflows"
+```
+
+---
+
+### Task 7: Tests E2E pour les toasts
+
+**Files:**
+- Modify: `tests/e2e/breeding.spec.ts`
+
+**Step 1: Ajouter un test E2E pour le toast d'enregistrement**
+
+Dans le test "Definir nombre de couples et bebes puis enregistrer", apres le clic sur Enregistrer, ajouter une verification :
+
+```typescript
+// Verifier que le toast success apparait
+await expect(page.locator('.toast-success')).toBeVisible({ timeout: 3000 });
+await expect(page.locator('.toast-msg')).toContainText('Accouplement enregistré');
+```
+
+**Step 2: Rebuild et run E2E**
+
+Run: `npm run build && npx playwright test tests/e2e/breeding.spec.ts` (depuis Windows)
+Expected: PASS
+
+**Step 3: Commit**
+
+```bash
+git add tests/e2e/breeding.spec.ts
+git commit -m "test(toast): test E2E toast apres enregistrement accouplement"
+```