From 23878f1c63cf91cb0d6a2584ea1018b5f42a2e40 Mon Sep 17 00:00:00 2001
From: "IETM_FIXE\\ietm6" <ietm64@igmlcreation.fr>
Date: Wed, 10 Jun 2026 14:55:36 +0200
Subject: [PATCH] Migration Angular 20 -> 21 : fin de la migration securite (0
 vulnerabilite npm)

- ng update @angular/core@21 @angular/cli@21 (corrige GHSA-jrmj-c5cx-3cw6, XSS SVG)
- Migration automatique des templates vers le control flow natif (@if/@for, 138 fichiers)
- Correction des 5 `track` invalides generes par la migration (trackBy a 1 argument
  -> track $index) + suppression des fonctions trackBy mortes
- TypeScript 5.9, zone.js 0.15 ; npm audit : 0 vulnerabilite

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 web/package-lock.json                         | 3389 +++++++++--------
 web/package.json                              |   22 +-
 web/src/app/app.component.html                |    4 +-
 web/src/app/app.component.ts                  |   19 +-
 .../arc/arc-create/arc-create.component.ts    |    4 +-
 .../arc/arc-edit/arc-edit.component.html      |   48 +-
 .../arc/arc-edit/arc-edit.component.ts        |    4 +-
 .../arc/arc-view/arc-view.component.html      |  263 +-
 .../arc/arc-view/arc-view.component.ts        |    4 +-
 .../campaign-create.component.html            |  198 +-
 .../campaign-create.component.ts              |    4 +-
 .../campaign-detail.component.html            |  425 ++-
 .../campaign-detail.component.ts              |    4 +-
 .../campaign-import.component.html            |  320 +-
 .../campaign-import.component.ts              |    4 +-
 .../app/campaigns/campaigns.component.html    |   35 +-
 web/src/app/campaigns/campaigns.component.ts  |    4 +-
 .../chapter-create.component.html             |    6 +-
 .../chapter-create.component.ts               |    4 +-
 .../chapter-edit/chapter-edit.component.html  |   50 +-
 .../chapter-edit/chapter-edit.component.ts    |   19 +-
 .../chapter-graph.component.html              |  102 +-
 .../chapter-graph/chapter-graph.component.ts  |    4 +-
 .../chapter-view/chapter-view.component.html  |  231 +-
 .../chapter-view/chapter-view.component.ts    |    4 +-
 .../character-edit.component.html             |  141 +-
 .../character-edit.component.ts               |    4 +-
 .../character-view.component.html             |   27 +-
 .../character-view.component.ts               |    4 +-
 .../item-catalog-edit.component.html          |   34 +-
 .../item-catalog-edit.component.ts            |    4 +-
 .../item-catalog-list.component.html          |   22 +-
 .../item-catalog-list.component.ts            |    4 +-
 .../item-catalog-view.component.html          |   73 +-
 .../item-catalog-view.component.ts            |    4 +-
 .../notebook-action-card.component.html       |   72 +-
 .../notebook-action-card.component.ts         |    4 +-
 .../notebook-detail.component.html            |  207 +-
 .../notebook-detail.component.ts              |    5 +-
 .../notebook-list.component.html              |   22 +-
 .../notebook-list/notebook-list.component.ts  |    4 +-
 .../npc/npc-edit/npc-edit.component.html      |  181 +-
 .../npc/npc-edit/npc-edit.component.ts        |    4 +-
 .../npc/npc-view/npc-view.component.html      |   27 +-
 .../npc/npc-view/npc-view.component.ts        |    4 +-
 .../playthrough-detail.component.html         |  151 +-
 .../playthrough-detail.component.ts           |    4 +-
 .../playthrough-flags-page.component.html     |   41 +-
 .../playthrough-flags-page.component.ts       |    4 +-
 .../random-table-edit.component.html          |   36 +-
 .../random-table-edit.component.ts            |    4 +-
 .../random-table-view.component.html          |  130 +-
 .../random-table-view.component.ts            |    4 +-
 .../scene-create/scene-create.component.html  |    6 +-
 .../scene-create/scene-create.component.ts    |    4 +-
 .../scene-edit/scene-edit.component.html      |  151 +-
 .../scene/scene-edit/scene-edit.component.ts  |    5 +-
 .../scene-view/scene-view.component.html      |  331 +-
 .../scene/scene-view/scene-view.component.ts  |    4 +-
 .../game-system-edit.component.html           |  199 +-
 .../game-system-edit.component.ts             |    4 +-
 .../game-systems/game-systems.component.html  |   32 +-
 .../game-systems/game-systems.component.ts    |    4 +-
 .../folder-view/folder-view.component.html    |  171 +-
 .../lore/folder-view/folder-view.component.ts |    4 +-
 .../lore/lore-create/lore-create.component.ts |    4 +-
 .../lore-detail/lore-detail.component.html    |  146 +-
 .../lore/lore-detail/lore-detail.component.ts |    4 +-
 .../lore-node-create.component.html           |   23 +-
 .../lore-node-create.component.ts             |    4 +-
 .../lore-node-edit.component.html             |  100 +-
 .../lore-node-edit.component.ts               |    4 +-
 web/src/app/lore/lore.component.html          |   35 +-
 web/src/app/lore/lore.component.ts            |    4 +-
 .../page-create/page-create.component.html    |   88 +-
 .../lore/page-create/page-create.component.ts |    4 +-
 .../lore/page-edit/page-edit.component.html   |  222 +-
 .../app/lore/page-edit/page-edit.component.ts |    4 +-
 .../lore/page-view/page-view.component.html   |  149 +-
 .../app/lore/page-view/page-view.component.ts |    4 +-
 .../template-create.component.html            |   99 +-
 .../template-create.component.ts              |    4 +-
 .../template-edit.component.html              |  199 +-
 .../template-edit/template-edit.component.ts  |    4 +-
 .../session-ai-chat-panel.component.html      |  100 +-
 .../session-ai-chat-panel.component.ts        |    4 +-
 .../session-detail.component.html             |  351 +-
 .../session-dice-panel.component.html         |   77 +-
 .../session-dice-panel.component.ts           |    4 +-
 ...session-item-catalogs-panel.component.html |   79 +-
 .../session-item-catalogs-panel.component.ts  |    4 +-
 ...session-random-tables-panel.component.html |  104 +-
 .../session-random-tables-panel.component.ts  |    4 +-
 .../session-reference-panel.component.html    |  236 +-
 .../session-reference-panel.component.ts      |    4 +-
 .../ollama-model-manager.component.html       |  178 +-
 .../ollama-model-manager.component.ts         |    4 +-
 web/src/app/settings/settings.component.html  |  752 ++--
 .../updates-section.component.html            |  516 +--
 .../ai-chat-drawer.component.html             |  302 +-
 .../ai-chat-drawer.component.ts               |    4 +-
 .../breadcrumb/breadcrumb.component.html      |   32 +-
 .../shared/breadcrumb/breadcrumb.component.ts |    5 +-
 .../chips-input/chips-input.component.html    |   14 +-
 .../chips-input/chips-input.component.ts      |    4 +-
 .../confirm-dialog-host.component.ts          |   27 +-
 .../confirm-dialog.component.html             |   64 +-
 .../confirm-dialog.component.ts               |    4 +-
 .../dynamic-fields-form.component.html        |  110 +-
 .../dynamic-fields-form.component.ts          |    4 +-
 .../expandable-section.component.html         |   12 +-
 .../expandable-section.component.ts           |    4 +-
 .../global-search.component.html              |  104 +-
 .../global-search/global-search.component.ts  |    4 +-
 .../icon-picker/icon-picker.component.ts      |   27 +-
 .../image-gallery.component.html              |  430 ++-
 .../image-gallery/image-gallery.component.ts  |    4 +-
 .../image-uploader.component.html             |   76 +-
 .../image-uploader.component.ts               |    4 +-
 .../lore-link-picker.component.html           |   58 +-
 .../lore-link-picker.component.ts             |    4 +-
 .../persona-view/persona-view.component.html  |  229 +-
 .../persona-view/persona-view.component.ts    |    4 +-
 .../playthrough-flags-manager.component.html  |   38 +-
 .../playthrough-flags-manager.component.ts    |    4 +-
 .../prerequisite-editor.component.html        |  138 +-
 .../prerequisite-editor.component.ts          |    5 +-
 .../quest-status-badge.component.html         |    4 +-
 .../quest-status-badge.component.ts           |    4 +-
 .../rooms-editor/rooms-editor.component.html  |  236 +-
 .../rooms-editor/rooms-editor.component.ts    |    4 +-
 .../secondary-sidebar.component.html          |  238 +-
 .../single-image-picker.component.html        |   11 +-
 .../single-image-picker.component.ts          |    4 +-
 .../template-fields-editor.component.html     |  179 +-
 .../template-fields-editor.component.ts       |    5 +-
 .../update-banner.component.html              |   55 +-
 .../update-banner/update-banner.component.ts  |    4 +-
 web/src/app/sidebar/sidebar.component.html    |   49 +-
 web/src/app/sidebar/sidebar.component.ts      |    4 +-
 web/src/main.ts                               |    4 +-
 web/tsconfig.json                             |    6 +-
 142 files changed, 7055 insertions(+), 6292 deletions(-)

diff --git a/web/package-lock.json b/web/package-lock.json
index 001c0d0..70e3720 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -8,14 +8,14 @@
       "name": "loremind-web",
       "version": "0.11.3-beta",
       "dependencies": {
-        "@angular/animations": "^20.3.24",
-        "@angular/common": "^20.3.24",
-        "@angular/compiler": "^20.3.24",
-        "@angular/core": "^20.3.24",
-        "@angular/forms": "^20.3.24",
-        "@angular/platform-browser": "^20.3.24",
-        "@angular/platform-browser-dynamic": "^20.3.24",
-        "@angular/router": "^20.3.24",
+        "@angular/animations": "^21.2.16",
+        "@angular/common": "^21.2.16",
+        "@angular/compiler": "^21.2.16",
+        "@angular/core": "^21.2.16",
+        "@angular/forms": "^21.2.16",
+        "@angular/platform-browser": "^21.2.16",
+        "@angular/platform-browser-dynamic": "^21.2.16",
+        "@angular/router": "^21.2.16",
         "dompurify": "^3.4.1",
         "lucide-angular": "^1.0.0",
         "marked": "^18.0.2",
@@ -24,65 +24,65 @@
         "zone.js": "~0.15.1"
       },
       "devDependencies": {
-        "@angular-devkit/build-angular": "^20.3.27",
-        "@angular/cli": "^20.3.27",
-        "@angular/compiler-cli": "^20.3.24",
+        "@angular-devkit/build-angular": "^21.2.14",
+        "@angular/cli": "^21.2.14",
+        "@angular/compiler-cli": "^21.2.16",
         "@playwright/test": "^1.59.1",
         "typescript": "~5.9.3"
       }
     },
     "node_modules/@algolia/abtesting": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@algolia/abtesting/-/abtesting-1.1.0.tgz",
-      "integrity": "sha512-sEyWjw28a/9iluA37KLGu8vjxEIlb60uxznfTUmXImy7H5NvbpSO6yYgmgH5KiD7j+zTUUihiST0jEP12IoXow==",
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/@algolia/abtesting/-/abtesting-1.14.1.tgz",
+      "integrity": "sha512-Dkj0BgPiLAaim9sbQ97UKDFHJE/880wgStAM18U++NaJ/2Cws34J5731ovJifr6E3Pv4T2CqvMXf8qLCC417Ew==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@algolia/client-common": "5.35.0",
-        "@algolia/requester-browser-xhr": "5.35.0",
-        "@algolia/requester-fetch": "5.35.0",
-        "@algolia/requester-node-http": "5.35.0"
+        "@algolia/client-common": "5.48.1",
+        "@algolia/requester-browser-xhr": "5.48.1",
+        "@algolia/requester-fetch": "5.48.1",
+        "@algolia/requester-node-http": "5.48.1"
       },
       "engines": {
         "node": ">= 14.0.0"
       }
     },
     "node_modules/@algolia/client-abtesting": {
-      "version": "5.35.0",
-      "resolved": "https://registry.npmjs.org/@algolia/client-abtesting/-/client-abtesting-5.35.0.tgz",
-      "integrity": "sha512-uUdHxbfHdoppDVflCHMxRlj49/IllPwwQ2cQ8DLC4LXr3kY96AHBpW0dMyi6ygkn2MtFCc6BxXCzr668ZRhLBQ==",
+      "version": "5.48.1",
+      "resolved": "https://registry.npmjs.org/@algolia/client-abtesting/-/client-abtesting-5.48.1.tgz",
+      "integrity": "sha512-LV5qCJdj+/m9I+Aj91o+glYszrzd7CX6NgKaYdTOj4+tUYfbS62pwYgUfZprYNayhkQpVFcrW8x8ZlIHpS23Vw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@algolia/client-common": "5.35.0",
-        "@algolia/requester-browser-xhr": "5.35.0",
-        "@algolia/requester-fetch": "5.35.0",
-        "@algolia/requester-node-http": "5.35.0"
+        "@algolia/client-common": "5.48.1",
+        "@algolia/requester-browser-xhr": "5.48.1",
+        "@algolia/requester-fetch": "5.48.1",
+        "@algolia/requester-node-http": "5.48.1"
       },
       "engines": {
         "node": ">= 14.0.0"
       }
     },
     "node_modules/@algolia/client-analytics": {
-      "version": "5.35.0",
-      "resolved": "https://registry.npmjs.org/@algolia/client-analytics/-/client-analytics-5.35.0.tgz",
-      "integrity": "sha512-SunAgwa9CamLcRCPnPHx1V2uxdQwJGqb1crYrRWktWUdld0+B2KyakNEeVn5lln4VyeNtW17Ia7V7qBWyM/Skw==",
+      "version": "5.48.1",
+      "resolved": "https://registry.npmjs.org/@algolia/client-analytics/-/client-analytics-5.48.1.tgz",
+      "integrity": "sha512-/AVoMqHhPm14CcHq7mwB+bUJbfCv+jrxlNvRjXAuO+TQa+V37N8k1b0ijaRBPdmSjULMd8KtJbQyUyabXOu6Kg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@algolia/client-common": "5.35.0",
-        "@algolia/requester-browser-xhr": "5.35.0",
-        "@algolia/requester-fetch": "5.35.0",
-        "@algolia/requester-node-http": "5.35.0"
+        "@algolia/client-common": "5.48.1",
+        "@algolia/requester-browser-xhr": "5.48.1",
+        "@algolia/requester-fetch": "5.48.1",
+        "@algolia/requester-node-http": "5.48.1"
       },
       "engines": {
         "node": ">= 14.0.0"
       }
     },
     "node_modules/@algolia/client-common": {
-      "version": "5.35.0",
-      "resolved": "https://registry.npmjs.org/@algolia/client-common/-/client-common-5.35.0.tgz",
-      "integrity": "sha512-ipE0IuvHu/bg7TjT2s+187kz/E3h5ssfTtjpg1LbWMgxlgiaZIgTTbyynM7NfpSJSKsgQvCQxWjGUO51WSCu7w==",
+      "version": "5.48.1",
+      "resolved": "https://registry.npmjs.org/@algolia/client-common/-/client-common-5.48.1.tgz",
+      "integrity": "sha512-VXO+qu2Ep6ota28ktvBm3sG53wUHS2n7bgLWmce5jTskdlCD0/JrV4tnBm1l7qpla1CeoQb8D7ShFhad+UoSOw==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -90,151 +90,151 @@
       }
     },
     "node_modules/@algolia/client-insights": {
-      "version": "5.35.0",
-      "resolved": "https://registry.npmjs.org/@algolia/client-insights/-/client-insights-5.35.0.tgz",
-      "integrity": "sha512-UNbCXcBpqtzUucxExwTSfAe8gknAJ485NfPN6o1ziHm6nnxx97piIbcBQ3edw823Tej2Wxu1C0xBY06KgeZ7gA==",
+      "version": "5.48.1",
+      "resolved": "https://registry.npmjs.org/@algolia/client-insights/-/client-insights-5.48.1.tgz",
+      "integrity": "sha512-zl+Qyb0nLg+Y5YvKp1Ij+u9OaPaKg2/EPzTwKNiVyOHnQJlFxmXyUZL1EInczAZsEY8hVpPCLtNfhMhfxluXKQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@algolia/client-common": "5.35.0",
-        "@algolia/requester-browser-xhr": "5.35.0",
-        "@algolia/requester-fetch": "5.35.0",
-        "@algolia/requester-node-http": "5.35.0"
+        "@algolia/client-common": "5.48.1",
+        "@algolia/requester-browser-xhr": "5.48.1",
+        "@algolia/requester-fetch": "5.48.1",
+        "@algolia/requester-node-http": "5.48.1"
       },
       "engines": {
         "node": ">= 14.0.0"
       }
     },
     "node_modules/@algolia/client-personalization": {
-      "version": "5.35.0",
-      "resolved": "https://registry.npmjs.org/@algolia/client-personalization/-/client-personalization-5.35.0.tgz",
-      "integrity": "sha512-/KWjttZ6UCStt4QnWoDAJ12cKlQ+fkpMtyPmBgSS2WThJQdSV/4UWcqCUqGH7YLbwlj3JjNirCu3Y7uRTClxvA==",
+      "version": "5.48.1",
+      "resolved": "https://registry.npmjs.org/@algolia/client-personalization/-/client-personalization-5.48.1.tgz",
+      "integrity": "sha512-r89Qf9Oo9mKWQXumRu/1LtvVJAmEDpn8mHZMc485pRfQUMAwSSrsnaw1tQ3sszqzEgAr1c7rw6fjBI+zrAXTOw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@algolia/client-common": "5.35.0",
-        "@algolia/requester-browser-xhr": "5.35.0",
-        "@algolia/requester-fetch": "5.35.0",
-        "@algolia/requester-node-http": "5.35.0"
+        "@algolia/client-common": "5.48.1",
+        "@algolia/requester-browser-xhr": "5.48.1",
+        "@algolia/requester-fetch": "5.48.1",
+        "@algolia/requester-node-http": "5.48.1"
       },
       "engines": {
         "node": ">= 14.0.0"
       }
     },
     "node_modules/@algolia/client-query-suggestions": {
-      "version": "5.35.0",
-      "resolved": "https://registry.npmjs.org/@algolia/client-query-suggestions/-/client-query-suggestions-5.35.0.tgz",
-      "integrity": "sha512-8oCuJCFf/71IYyvQQC+iu4kgViTODbXDk3m7yMctEncRSRV+u2RtDVlpGGfPlJQOrAY7OONwJlSHkmbbm2Kp/w==",
+      "version": "5.48.1",
+      "resolved": "https://registry.npmjs.org/@algolia/client-query-suggestions/-/client-query-suggestions-5.48.1.tgz",
+      "integrity": "sha512-TPKNPKfghKG/bMSc7mQYD9HxHRUkBZA4q1PEmHgICaSeHQscGqL4wBrKkhfPlDV1uYBKW02pbFMUhsOt7p4ZpA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@algolia/client-common": "5.35.0",
-        "@algolia/requester-browser-xhr": "5.35.0",
-        "@algolia/requester-fetch": "5.35.0",
-        "@algolia/requester-node-http": "5.35.0"
+        "@algolia/client-common": "5.48.1",
+        "@algolia/requester-browser-xhr": "5.48.1",
+        "@algolia/requester-fetch": "5.48.1",
+        "@algolia/requester-node-http": "5.48.1"
       },
       "engines": {
         "node": ">= 14.0.0"
       }
     },
     "node_modules/@algolia/client-search": {
-      "version": "5.35.0",
-      "resolved": "https://registry.npmjs.org/@algolia/client-search/-/client-search-5.35.0.tgz",
-      "integrity": "sha512-FfmdHTrXhIduWyyuko1YTcGLuicVbhUyRjO3HbXE4aP655yKZgdTIfMhZ/V5VY9bHuxv/fGEh3Od1Lvv2ODNTg==",
+      "version": "5.48.1",
+      "resolved": "https://registry.npmjs.org/@algolia/client-search/-/client-search-5.48.1.tgz",
+      "integrity": "sha512-4Fu7dnzQyQmMFknYwTiN/HxPbH4DyxvQ1m+IxpPp5oslOgz8m6PG5qhiGbqJzH4HiT1I58ecDiCAC716UyVA8Q==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@algolia/client-common": "5.35.0",
-        "@algolia/requester-browser-xhr": "5.35.0",
-        "@algolia/requester-fetch": "5.35.0",
-        "@algolia/requester-node-http": "5.35.0"
+        "@algolia/client-common": "5.48.1",
+        "@algolia/requester-browser-xhr": "5.48.1",
+        "@algolia/requester-fetch": "5.48.1",
+        "@algolia/requester-node-http": "5.48.1"
       },
       "engines": {
         "node": ">= 14.0.0"
       }
     },
     "node_modules/@algolia/ingestion": {
-      "version": "1.35.0",
-      "resolved": "https://registry.npmjs.org/@algolia/ingestion/-/ingestion-1.35.0.tgz",
-      "integrity": "sha512-gPzACem9IL1Co8mM1LKMhzn1aSJmp+Vp434An4C0OBY4uEJRcqsLN3uLBlY+bYvFg8C8ImwM9YRiKczJXRk0XA==",
+      "version": "1.48.1",
+      "resolved": "https://registry.npmjs.org/@algolia/ingestion/-/ingestion-1.48.1.tgz",
+      "integrity": "sha512-/RFq3TqtXDUUawwic/A9xylA2P3LDMO8dNhphHAUOU51b1ZLHrmZ6YYJm3df1APz7xLY1aht6okCQf+/vmrV9w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@algolia/client-common": "5.35.0",
-        "@algolia/requester-browser-xhr": "5.35.0",
-        "@algolia/requester-fetch": "5.35.0",
-        "@algolia/requester-node-http": "5.35.0"
+        "@algolia/client-common": "5.48.1",
+        "@algolia/requester-browser-xhr": "5.48.1",
+        "@algolia/requester-fetch": "5.48.1",
+        "@algolia/requester-node-http": "5.48.1"
       },
       "engines": {
         "node": ">= 14.0.0"
       }
     },
     "node_modules/@algolia/monitoring": {
-      "version": "1.35.0",
-      "resolved": "https://registry.npmjs.org/@algolia/monitoring/-/monitoring-1.35.0.tgz",
-      "integrity": "sha512-w9MGFLB6ashI8BGcQoVt7iLgDIJNCn4OIu0Q0giE3M2ItNrssvb8C0xuwJQyTy1OFZnemG0EB1OvXhIHOvQwWw==",
+      "version": "1.48.1",
+      "resolved": "https://registry.npmjs.org/@algolia/monitoring/-/monitoring-1.48.1.tgz",
+      "integrity": "sha512-Of0jTeAZRyRhC7XzDSjJef0aBkgRcvRAaw0ooYRlOw57APii7lZdq+layuNdeL72BRq1snaJhoMMwkmLIpJScw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@algolia/client-common": "5.35.0",
-        "@algolia/requester-browser-xhr": "5.35.0",
-        "@algolia/requester-fetch": "5.35.0",
-        "@algolia/requester-node-http": "5.35.0"
+        "@algolia/client-common": "5.48.1",
+        "@algolia/requester-browser-xhr": "5.48.1",
+        "@algolia/requester-fetch": "5.48.1",
+        "@algolia/requester-node-http": "5.48.1"
       },
       "engines": {
         "node": ">= 14.0.0"
       }
     },
     "node_modules/@algolia/recommend": {
-      "version": "5.35.0",
-      "resolved": "https://registry.npmjs.org/@algolia/recommend/-/recommend-5.35.0.tgz",
-      "integrity": "sha512-AhrVgaaXAb8Ue0u2nuRWwugt0dL5UmRgS9LXe0Hhz493a8KFeZVUE56RGIV3hAa6tHzmAV7eIoqcWTQvxzlJeQ==",
+      "version": "5.48.1",
+      "resolved": "https://registry.npmjs.org/@algolia/recommend/-/recommend-5.48.1.tgz",
+      "integrity": "sha512-bE7JcpFXzxF5zHwj/vkl2eiCBvyR1zQ7aoUdO+GDXxGp0DGw7nI0p8Xj6u8VmRQ+RDuPcICFQcCwRIJT5tDJFw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@algolia/client-common": "5.35.0",
-        "@algolia/requester-browser-xhr": "5.35.0",
-        "@algolia/requester-fetch": "5.35.0",
-        "@algolia/requester-node-http": "5.35.0"
+        "@algolia/client-common": "5.48.1",
+        "@algolia/requester-browser-xhr": "5.48.1",
+        "@algolia/requester-fetch": "5.48.1",
+        "@algolia/requester-node-http": "5.48.1"
       },
       "engines": {
         "node": ">= 14.0.0"
       }
     },
     "node_modules/@algolia/requester-browser-xhr": {
-      "version": "5.35.0",
-      "resolved": "https://registry.npmjs.org/@algolia/requester-browser-xhr/-/requester-browser-xhr-5.35.0.tgz",
-      "integrity": "sha512-diY415KLJZ6x1Kbwl9u96Jsz0OstE3asjXtJ9pmk1d+5gPuQ5jQyEsgC+WmEXzlec3iuVszm8AzNYYaqw6B+Zw==",
+      "version": "5.48.1",
+      "resolved": "https://registry.npmjs.org/@algolia/requester-browser-xhr/-/requester-browser-xhr-5.48.1.tgz",
+      "integrity": "sha512-MK3wZ2koLDnvH/AmqIF1EKbJlhRS5j74OZGkLpxI4rYvNi9Jn/C7vb5DytBnQ4KUWts7QsmbdwHkxY5txQHXVw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@algolia/client-common": "5.35.0"
+        "@algolia/client-common": "5.48.1"
       },
       "engines": {
         "node": ">= 14.0.0"
       }
     },
     "node_modules/@algolia/requester-fetch": {
-      "version": "5.35.0",
-      "resolved": "https://registry.npmjs.org/@algolia/requester-fetch/-/requester-fetch-5.35.0.tgz",
-      "integrity": "sha512-uydqnSmpAjrgo8bqhE9N1wgcB98psTRRQXcjc4izwMB7yRl9C8uuAQ/5YqRj04U0mMQ+fdu2fcNF6m9+Z1BzDQ==",
+      "version": "5.48.1",
+      "resolved": "https://registry.npmjs.org/@algolia/requester-fetch/-/requester-fetch-5.48.1.tgz",
+      "integrity": "sha512-2oDT43Y5HWRSIQMPQI4tA/W+TN/N2tjggZCUsqQV440kxzzoPGsvv9QP1GhQ4CoDa+yn6ygUsGp6Dr+a9sPPSg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@algolia/client-common": "5.35.0"
+        "@algolia/client-common": "5.48.1"
       },
       "engines": {
         "node": ">= 14.0.0"
       }
     },
     "node_modules/@algolia/requester-node-http": {
-      "version": "5.35.0",
-      "resolved": "https://registry.npmjs.org/@algolia/requester-node-http/-/requester-node-http-5.35.0.tgz",
-      "integrity": "sha512-RgLX78ojYOrThJHrIiPzT4HW3yfQa0D7K+MQ81rhxqaNyNBu4F1r+72LNHYH/Z+y9I1Mrjrd/c/Ue5zfDgAEjQ==",
+      "version": "5.48.1",
+      "resolved": "https://registry.npmjs.org/@algolia/requester-node-http/-/requester-node-http-5.48.1.tgz",
+      "integrity": "sha512-xcaCqbhupVWhuBP1nwbk1XNvwrGljozutEiLx06mvqDf3o8cHyEgQSHS4fKJM+UAggaWVnnFW+Nne5aQ8SUJXg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@algolia/client-common": "5.35.0"
+        "@algolia/client-common": "5.48.1"
       },
       "engines": {
         "node": ">= 14.0.0"
@@ -255,15 +255,18 @@
       }
     },
     "node_modules/@angular-devkit/architect": {
-      "version": "0.2003.27",
-      "resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.2003.27.tgz",
-      "integrity": "sha512-rRTj/VdeLRC0tdwym/SUYTMoB7v1HWTOcKBGHjqFQ7ZMyapJT4QtaedSEMJo8QFlX9E0GFAi6wR+t6wbsOELIg==",
+      "version": "0.2102.14",
+      "resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.2102.14.tgz",
+      "integrity": "sha512-0+vjVsCkMyJdVjz5XkPW+Bdf/9TI8V2voomx/+o0o+oOaqqiEhptQWFnaIlLr7HasjB0LxXK5P9L0oQ61vxj8Q==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@angular-devkit/core": "20.3.27",
+        "@angular-devkit/core": "21.2.14",
         "rxjs": "7.8.2"
       },
+      "bin": {
+        "architect": "bin/cli.js"
+      },
       "engines": {
         "node": "^20.19.0 || ^22.12.0 || >=24.0.0",
         "npm": "^6.11.0 || ^7.5.6 || >=8.0.0",
@@ -271,64 +274,64 @@
       }
     },
     "node_modules/@angular-devkit/build-angular": {
-      "version": "20.3.27",
-      "resolved": "https://registry.npmjs.org/@angular-devkit/build-angular/-/build-angular-20.3.27.tgz",
-      "integrity": "sha512-Tog1mAUyNPOJtuDIf1VYVjoaSy3gQHPZ3Q9gYKEi/7kpVoTdNtE3scws6Fb5z5uBsrjqc3lupoej3HO9kY+www==",
+      "version": "21.2.14",
+      "resolved": "https://registry.npmjs.org/@angular-devkit/build-angular/-/build-angular-21.2.14.tgz",
+      "integrity": "sha512-EgKDd5pYctnsj3yYAZt3vivodH+r61X0ivWbZljcwT7OO4CEDyTR7Vtu4TUSr+tlplz5x2PYsWNr1nqyF0hufw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@ampproject/remapping": "2.3.0",
-        "@angular-devkit/architect": "0.2003.27",
-        "@angular-devkit/build-webpack": "0.2003.27",
-        "@angular-devkit/core": "20.3.27",
-        "@angular/build": "20.3.27",
-        "@babel/core": "7.28.3",
-        "@babel/generator": "7.28.3",
+        "@angular-devkit/architect": "0.2102.14",
+        "@angular-devkit/build-webpack": "0.2102.14",
+        "@angular-devkit/core": "21.2.14",
+        "@angular/build": "21.2.14",
+        "@babel/core": "7.29.0",
+        "@babel/generator": "7.29.1",
         "@babel/helper-annotate-as-pure": "7.27.3",
         "@babel/helper-split-export-declaration": "7.24.7",
-        "@babel/plugin-transform-async-generator-functions": "7.28.0",
-        "@babel/plugin-transform-async-to-generator": "7.27.1",
-        "@babel/plugin-transform-runtime": "7.28.3",
-        "@babel/preset-env": "7.28.3",
-        "@babel/runtime": "7.28.3",
+        "@babel/plugin-transform-async-generator-functions": "7.29.0",
+        "@babel/plugin-transform-async-to-generator": "7.28.6",
+        "@babel/plugin-transform-runtime": "7.29.0",
+        "@babel/preset-env": "7.29.2",
+        "@babel/runtime": "7.29.2",
         "@discoveryjs/json-ext": "0.6.3",
-        "@ngtools/webpack": "20.3.27",
+        "@ngtools/webpack": "21.2.14",
         "ansi-colors": "4.1.3",
-        "autoprefixer": "10.4.21",
+        "autoprefixer": "10.4.27",
         "babel-loader": "10.0.0",
-        "browserslist": "^4.21.5",
+        "browserslist": "^4.26.0",
         "copy-webpack-plugin": "14.0.0",
-        "css-loader": "7.1.2",
-        "esbuild-wasm": "0.28.0",
-        "fast-glob": "3.3.3",
+        "css-loader": "7.1.3",
+        "esbuild-wasm": "0.27.3",
         "http-proxy-middleware": "3.0.5",
         "istanbul-lib-instrument": "6.0.3",
         "jsonc-parser": "3.3.1",
         "karma-source-map-support": "1.4.0",
-        "less": "4.4.0",
-        "less-loader": "12.3.0",
+        "less": "4.4.2",
+        "less-loader": "12.3.1",
         "license-webpack-plugin": "4.0.2",
         "loader-utils": "3.3.1",
-        "mini-css-extract-plugin": "2.9.4",
-        "open": "10.2.0",
-        "ora": "8.2.0",
+        "mini-css-extract-plugin": "2.10.0",
+        "open": "11.0.0",
+        "ora": "9.3.0",
         "picomatch": "4.0.4",
-        "piscina": "5.1.3",
+        "piscina": "5.1.4",
         "postcss": "8.5.12",
-        "postcss-loader": "8.1.1",
+        "postcss-loader": "8.2.0",
         "resolve-url-loader": "5.0.0",
         "rxjs": "7.8.2",
-        "sass": "1.90.0",
-        "sass-loader": "16.0.5",
-        "semver": "7.7.2",
+        "sass": "1.97.3",
+        "sass-loader": "16.0.7",
+        "semver": "7.7.4",
         "source-map-loader": "5.0.0",
         "source-map-support": "0.5.21",
-        "terser": "5.43.1",
+        "terser": "5.46.0",
+        "tinyglobby": "0.2.15",
         "tree-kill": "1.2.2",
         "tslib": "2.8.1",
-        "webpack": "5.105.0",
-        "webpack-dev-middleware": "7.4.2",
-        "webpack-dev-server": "5.2.2",
+        "webpack": "5.105.2",
+        "webpack-dev-middleware": "7.4.5",
+        "webpack-dev-server": "5.2.3",
         "webpack-merge": "6.0.1",
         "webpack-subresource-integrity": "5.1.0"
       },
@@ -338,25 +341,25 @@
         "yarn": ">= 1.13.0"
       },
       "optionalDependencies": {
-        "esbuild": "0.28.0"
+        "esbuild": "0.27.3"
       },
       "peerDependencies": {
-        "@angular/compiler-cli": "^20.0.0",
-        "@angular/core": "^20.0.0",
-        "@angular/localize": "^20.0.0",
-        "@angular/platform-browser": "^20.0.0",
-        "@angular/platform-server": "^20.0.0",
-        "@angular/service-worker": "^20.0.0",
-        "@angular/ssr": "^20.3.27",
+        "@angular/compiler-cli": "^21.0.0",
+        "@angular/core": "^21.0.0",
+        "@angular/localize": "^21.0.0",
+        "@angular/platform-browser": "^21.0.0",
+        "@angular/platform-server": "^21.0.0",
+        "@angular/service-worker": "^21.0.0",
+        "@angular/ssr": "^21.2.14",
         "@web/test-runner": "^0.20.0",
         "browser-sync": "^3.0.2",
-        "jest": "^29.5.0 || ^30.2.0",
-        "jest-environment-jsdom": "^29.5.0 || ^30.2.0",
+        "jest": "^30.2.0",
+        "jest-environment-jsdom": "^30.2.0",
         "karma": "^6.3.0",
-        "ng-packagr": "^20.0.0",
+        "ng-packagr": "^21.0.0",
         "protractor": "^7.0.0",
         "tailwindcss": "^2.0.0 || ^3.0.0 || ^4.0.0",
-        "typescript": ">=5.8 <6.0"
+        "typescript": ">=5.9 <6.0"
       },
       "peerDependenciesMeta": {
         "@angular/core": {
@@ -404,9 +407,9 @@
       }
     },
     "node_modules/@angular-devkit/build-angular/node_modules/semver": {
-      "version": "7.7.2",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
-      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
+      "version": "7.7.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
+      "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
       "dev": true,
       "license": "ISC",
       "bin": {
@@ -417,13 +420,13 @@
       }
     },
     "node_modules/@angular-devkit/build-webpack": {
-      "version": "0.2003.27",
-      "resolved": "https://registry.npmjs.org/@angular-devkit/build-webpack/-/build-webpack-0.2003.27.tgz",
-      "integrity": "sha512-vrvLMWMcMcgbciHKQAlJVTQCQAdM36Ql4wf5+Obk20RedNvMyhRzg+5f0+MbBdyEjJRvIT4oC6I68orHYX1hGQ==",
+      "version": "0.2102.14",
+      "resolved": "https://registry.npmjs.org/@angular-devkit/build-webpack/-/build-webpack-0.2102.14.tgz",
+      "integrity": "sha512-UjZzypzYLYaWMVplu9CYpx0gxKYu9+V3GiOrtlshInuGMZe9uQy7wRgiFUUKClRSMf8CCT1jfCof9gFwqYCRuQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@angular-devkit/architect": "0.2003.27",
+        "@angular-devkit/architect": "0.2102.14",
         "rxjs": "7.8.2"
       },
       "engines": {
@@ -437,9 +440,9 @@
       }
     },
     "node_modules/@angular-devkit/core": {
-      "version": "20.3.27",
-      "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-20.3.27.tgz",
-      "integrity": "sha512-jBaBTT9FemIEVpjN6omSzUYv9VOSnyPilLPC83E6JxNNMO4CMVKLfGK9SaVPJHtqU6YAWNFQqcD1dP7f/m49Cw==",
+      "version": "21.2.14",
+      "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-21.2.14.tgz",
+      "integrity": "sha512-RSOWXB9bFc2nwRWMxbIT0RbSNFUrwfBo4N5MNxbyQ69Ndc0gVm3h+3ArHv0qotH4d+pJYbm5ttXu8YqR2kc0CA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -456,7 +459,7 @@
         "yarn": ">= 1.13.0"
       },
       "peerDependencies": {
-        "chokidar": "^4.0.0"
+        "chokidar": "^5.0.0"
       },
       "peerDependenciesMeta": {
         "chokidar": {
@@ -483,16 +486,16 @@
       }
     },
     "node_modules/@angular-devkit/schematics": {
-      "version": "20.3.27",
-      "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-20.3.27.tgz",
-      "integrity": "sha512-S/y04S8eQIfyAa9nYhY10lQbqP1VYkMoKxHUdQ+PWjzHXL4NRb/5+yKV3BJI0kEngEX1ooQMoGYi+AqSIPT7wA==",
+      "version": "21.2.14",
+      "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-21.2.14.tgz",
+      "integrity": "sha512-KMJlQSBEzI4+Cy1Zh72gmGQNN2I1vY+nj9CoRcZPBIi1si+0ZAc49XT85eYl+eQumNTVQviUG7LQqgLDAHml+g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@angular-devkit/core": "20.3.27",
+        "@angular-devkit/core": "21.2.14",
         "jsonc-parser": "3.3.1",
-        "magic-string": "0.30.17",
-        "ora": "8.2.0",
+        "magic-string": "0.30.21",
+        "ora": "9.3.0",
         "rxjs": "7.8.2"
       },
       "engines": {
@@ -502,9 +505,9 @@
       }
     },
     "node_modules/@angular/animations": {
-      "version": "20.3.24",
-      "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-20.3.24.tgz",
-      "integrity": "sha512-lc6OjwBTEITVqFYTwqEuq/UyCutwJ6NQid4U5gOmwSl1GYbnUUV2X/DRN1sz/JRHnXkC4QCGTWqebnm2SLVRiA==",
+      "version": "21.2.16",
+      "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-21.2.16.tgz",
+      "integrity": "sha512-YPhph/OC1A0vkT95XZW6lXMNmi5ly91JeXi+5yeG8CCxfqscVfRNPsYbRWjSueO0cQT2HJ8U1CLteQ5a1OaoHA==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -514,42 +517,43 @@
         "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
       },
       "peerDependencies": {
-        "@angular/core": "20.3.24"
+        "@angular/core": "21.2.16"
       }
     },
     "node_modules/@angular/build": {
-      "version": "20.3.27",
-      "resolved": "https://registry.npmjs.org/@angular/build/-/build-20.3.27.tgz",
-      "integrity": "sha512-RzCMCCkGd6jEGW/iz68VylS7rl3PM1TgbNKBGXe+ImiccPYEDJCO073X6qCle1pYqi6HiPx+plu2YWYQOyH29Q==",
+      "version": "21.2.14",
+      "resolved": "https://registry.npmjs.org/@angular/build/-/build-21.2.14.tgz",
+      "integrity": "sha512-l8JB326iIwum2WmbopUUFdiuYsbHchix6MH8o6F6FA7LJr8QLTvipwwbw+Jx31/RE50WkGmzsZ1fBDw/cMbmUw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@ampproject/remapping": "2.3.0",
-        "@angular-devkit/architect": "0.2003.27",
-        "@babel/core": "7.28.3",
+        "@angular-devkit/architect": "0.2102.14",
+        "@babel/core": "7.29.0",
         "@babel/helper-annotate-as-pure": "7.27.3",
         "@babel/helper-split-export-declaration": "7.24.7",
-        "@inquirer/confirm": "5.1.14",
-        "@vitejs/plugin-basic-ssl": "2.1.0",
-        "beasties": "0.3.5",
-        "browserslist": "^4.23.0",
-        "esbuild": "0.28.0",
+        "@inquirer/confirm": "5.1.21",
+        "@vitejs/plugin-basic-ssl": "2.1.4",
+        "beasties": "0.4.1",
+        "browserslist": "^4.26.0",
+        "esbuild": "0.27.3",
         "https-proxy-agent": "7.0.6",
         "istanbul-lib-instrument": "6.0.3",
         "jsonc-parser": "3.3.1",
-        "listr2": "9.0.1",
-        "magic-string": "0.30.17",
+        "listr2": "9.0.5",
+        "magic-string": "0.30.21",
         "mrmime": "2.0.1",
         "parse5-html-rewriting-stream": "8.0.0",
         "picomatch": "4.0.4",
-        "piscina": "5.1.3",
-        "rollup": "4.59.0",
-        "sass": "1.90.0",
-        "semver": "7.7.2",
+        "piscina": "5.1.4",
+        "rolldown": "1.0.0-rc.4",
+        "sass": "1.97.3",
+        "semver": "7.7.4",
         "source-map-support": "0.5.21",
-        "tinyglobby": "0.2.14",
+        "tinyglobby": "0.2.15",
+        "undici": "7.24.4",
         "vite": "7.3.2",
-        "watchpack": "2.4.4"
+        "watchpack": "2.5.1"
       },
       "engines": {
         "node": "^20.19.0 || ^22.12.0 || >=24.0.0",
@@ -557,25 +561,25 @@
         "yarn": ">= 1.13.0"
       },
       "optionalDependencies": {
-        "lmdb": "3.4.2"
+        "lmdb": "3.5.1"
       },
       "peerDependencies": {
-        "@angular/compiler": "^20.0.0",
-        "@angular/compiler-cli": "^20.0.0",
-        "@angular/core": "^20.0.0",
-        "@angular/localize": "^20.0.0",
-        "@angular/platform-browser": "^20.0.0",
-        "@angular/platform-server": "^20.0.0",
-        "@angular/service-worker": "^20.0.0",
-        "@angular/ssr": "^20.3.27",
+        "@angular/compiler": "^21.0.0",
+        "@angular/compiler-cli": "^21.0.0",
+        "@angular/core": "^21.0.0",
+        "@angular/localize": "^21.0.0",
+        "@angular/platform-browser": "^21.0.0",
+        "@angular/platform-server": "^21.0.0",
+        "@angular/service-worker": "^21.0.0",
+        "@angular/ssr": "^21.2.14",
         "karma": "^6.4.0",
         "less": "^4.2.0",
-        "ng-packagr": "^20.0.0",
+        "ng-packagr": "^21.0.0",
         "postcss": "^8.4.0",
         "tailwindcss": "^2.0.0 || ^3.0.0 || ^4.0.0",
         "tslib": "^2.3.0",
-        "typescript": ">=5.8 <6.0",
-        "vitest": "^3.1.1"
+        "typescript": ">=5.9 <6.0",
+        "vitest": "^4.0.8"
       },
       "peerDependenciesMeta": {
         "@angular/core": {
@@ -617,9 +621,9 @@
       }
     },
     "node_modules/@angular/build/node_modules/semver": {
-      "version": "7.7.2",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
-      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
+      "version": "7.7.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
+      "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
       "dev": true,
       "license": "ISC",
       "bin": {
@@ -630,30 +634,30 @@
       }
     },
     "node_modules/@angular/cli": {
-      "version": "20.3.27",
-      "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-20.3.27.tgz",
-      "integrity": "sha512-FSZNnSCXm3bpUkVdOGZ//p9vjETtW7fLeg8dNIIFr/KObFZJ1bTv6ILiF6I/TujjfThUiKYEr7hb2C4zACXasg==",
+      "version": "21.2.14",
+      "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-21.2.14.tgz",
+      "integrity": "sha512-S8jExTjxPJILwpg2lu3DohSASVZ8DLhSNCmOe7z0qF9VskRSjC7SIQv1rq36tsJkenxuA72gjVOHZv+uSRT8HA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@angular-devkit/architect": "0.2003.27",
-        "@angular-devkit/core": "20.3.27",
-        "@angular-devkit/schematics": "20.3.27",
-        "@inquirer/prompts": "7.8.2",
-        "@listr2/prompt-adapter-inquirer": "3.0.1",
+        "@angular-devkit/architect": "0.2102.14",
+        "@angular-devkit/core": "21.2.14",
+        "@angular-devkit/schematics": "21.2.14",
+        "@inquirer/prompts": "7.10.1",
+        "@listr2/prompt-adapter-inquirer": "3.0.5",
         "@modelcontextprotocol/sdk": "1.26.0",
-        "@schematics/angular": "20.3.27",
+        "@schematics/angular": "21.2.14",
         "@yarnpkg/lockfile": "1.1.0",
-        "algoliasearch": "5.35.0",
-        "ini": "5.0.0",
+        "algoliasearch": "5.48.1",
+        "ini": "6.0.0",
         "jsonc-parser": "3.3.1",
-        "listr2": "9.0.1",
-        "npm-package-arg": "13.0.0",
-        "pacote": "21.0.4",
-        "resolve": "1.22.10",
-        "semver": "7.7.2",
+        "listr2": "9.0.5",
+        "npm-package-arg": "13.0.2",
+        "pacote": "21.3.1",
+        "parse5-html-rewriting-stream": "8.0.0",
+        "semver": "7.7.4",
         "yargs": "18.0.0",
-        "zod": "4.1.13"
+        "zod": "4.3.6"
       },
       "bin": {
         "ng": "bin/ng.js"
@@ -665,9 +669,9 @@
       }
     },
     "node_modules/@angular/cli/node_modules/semver": {
-      "version": "7.7.2",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
-      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
+      "version": "7.7.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
+      "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
       "dev": true,
       "license": "ISC",
       "bin": {
@@ -678,9 +682,9 @@
       }
     },
     "node_modules/@angular/common": {
-      "version": "20.3.24",
-      "resolved": "https://registry.npmjs.org/@angular/common/-/common-20.3.24.tgz",
-      "integrity": "sha512-jeCNfQMGoKvte+rNCsYWhHgaT5IiFt1aTOoAtrbfjZsRGEFaOR2fVZbri2IPgsnIVIuUVGZsDlEHYNuc52AeyA==",
+      "version": "21.2.16",
+      "resolved": "https://registry.npmjs.org/@angular/common/-/common-21.2.16.tgz",
+      "integrity": "sha512-htHNepKzjIjkc5BQ7MKDN0bVDOfQpFr/fGUxa6irC0kFLfWt7idUTdNcxypRvjCCTuBYHkjr74fH4QKu+qvPXg==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -690,14 +694,14 @@
         "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
       },
       "peerDependencies": {
-        "@angular/core": "20.3.24",
+        "@angular/core": "21.2.16",
         "rxjs": "^6.5.3 || ^7.4.0"
       }
     },
     "node_modules/@angular/compiler": {
-      "version": "20.3.24",
-      "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-20.3.24.tgz",
-      "integrity": "sha512-iXJWBZnXm0r2l6u1PYmQCxLKM9GgPBgl8U6t4SxZVOBr7W+OM3bVFtK2g1d2o7i7j+Obbgv6XKPSzWrX4nrM1w==",
+      "version": "21.2.16",
+      "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-21.2.16.tgz",
+      "integrity": "sha512-hVjp93gYgNj5aRbCQUK7L+pOfdqk96lCtmSL2hOL725Pmib9NyNIrA3ISfAQHN+Qo70763WUZahOiqBBOzfAcg==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -708,16 +712,16 @@
       }
     },
     "node_modules/@angular/compiler-cli": {
-      "version": "20.3.24",
-      "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-20.3.24.tgz",
-      "integrity": "sha512-+dQYpe7kJE+pxleyHgQBKQ9Cz+j4Cl3QYdMs+w4Hotc3rS00z4df2154KqJUmAD6kmkM2ws9kZ024rDxXtoSJQ==",
+      "version": "21.2.16",
+      "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-21.2.16.tgz",
+      "integrity": "sha512-w2ck3o+uw29AZEGK3HvOsF/ZRiPcfoq2TaDtiNjdH+svhwawt9PfMXrDbbIKF30prWzKLpT3UsCqTz1awv7Ubw==",
       "dev": true,
       "license": "MIT",
       "peer": true,
       "dependencies": {
-        "@babel/core": "7.28.3",
+        "@babel/core": "7.29.0",
         "@jridgewell/sourcemap-codec": "^1.4.14",
-        "chokidar": "^4.0.0",
+        "chokidar": "^5.0.0",
         "convert-source-map": "^1.5.1",
         "reflect-metadata": "^0.2.0",
         "semver": "^7.0.0",
@@ -732,8 +736,8 @@
         "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
       },
       "peerDependencies": {
-        "@angular/compiler": "20.3.24",
-        "typescript": ">=5.8 <6.0"
+        "@angular/compiler": "21.2.16",
+        "typescript": ">=5.9 <6.1"
       },
       "peerDependenciesMeta": {
         "typescript": {
@@ -742,9 +746,9 @@
       }
     },
     "node_modules/@angular/core": {
-      "version": "20.3.24",
-      "resolved": "https://registry.npmjs.org/@angular/core/-/core-20.3.24.tgz",
-      "integrity": "sha512-YPwYRzXFsdjdweJ4ndJADCNCErzBSNpWJYW7vOHzZqX0X4Sgc0/Do7cc7mnsUOcTsDLA1PL0/jZrSqAl/Os06A==",
+      "version": "21.2.16",
+      "resolved": "https://registry.npmjs.org/@angular/core/-/core-21.2.16.tgz",
+      "integrity": "sha512-uufKORlB0jeYdqOvjAfMYgqIqmJentOj8XvTUxsFP5k85xxzXsDarSpP199YQz6jhJJQYNOWIloDkUTQJi5rNA==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -754,9 +758,9 @@
         "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
       },
       "peerDependencies": {
-        "@angular/compiler": "20.3.24",
+        "@angular/compiler": "21.2.16",
         "rxjs": "^6.5.3 || ^7.4.0",
-        "zone.js": "~0.15.0"
+        "zone.js": "~0.15.0 || ~0.16.0"
       },
       "peerDependenciesMeta": {
         "@angular/compiler": {
@@ -768,27 +772,28 @@
       }
     },
     "node_modules/@angular/forms": {
-      "version": "20.3.24",
-      "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-20.3.24.tgz",
-      "integrity": "sha512-mvbyZQtewF1Kc0vbsZl0FFhdX/NMPisgtL512Z/F8Ar9kJOyPE78+AgmuvlpK8pQHF/aEuo4c0+wHQs7ndaYow==",
+      "version": "21.2.16",
+      "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-21.2.16.tgz",
+      "integrity": "sha512-2djTJmTpg/MkQ2kdCI9k0LT4RL9/Hg03fDUNN2eN5c04FIk99D3yHXUJYLwiaErLuLQNkU8HaijluKHdH93cWQ==",
       "license": "MIT",
       "dependencies": {
+        "@standard-schema/spec": "^1.0.0",
         "tslib": "^2.3.0"
       },
       "engines": {
         "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
       },
       "peerDependencies": {
-        "@angular/common": "20.3.24",
-        "@angular/core": "20.3.24",
-        "@angular/platform-browser": "20.3.24",
+        "@angular/common": "21.2.16",
+        "@angular/core": "21.2.16",
+        "@angular/platform-browser": "21.2.16",
         "rxjs": "^6.5.3 || ^7.4.0"
       }
     },
     "node_modules/@angular/platform-browser": {
-      "version": "20.3.24",
-      "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-20.3.24.tgz",
-      "integrity": "sha512-L//dXZm1KvAohwquwMc+dqsfeOS+79nOZuhdDK2Z8Syy4X/gzd8lTKYpnyyR4MWjR2JEQc+M81qQx3vy/Ev44A==",
+      "version": "21.2.16",
+      "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-21.2.16.tgz",
+      "integrity": "sha512-59ToWYDb+O3fS0+Y4ubQqV0zY6sf2esLZ19AT7JKXN7Akqbz7aQ2/3k3PKmfhwKWek5o3lkuNz8YhxKQruNh8Q==",
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -798,9 +803,9 @@
         "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
       },
       "peerDependencies": {
-        "@angular/animations": "20.3.24",
-        "@angular/common": "20.3.24",
-        "@angular/core": "20.3.24"
+        "@angular/animations": "21.2.16",
+        "@angular/common": "21.2.16",
+        "@angular/core": "21.2.16"
       },
       "peerDependenciesMeta": {
         "@angular/animations": {
@@ -809,9 +814,9 @@
       }
     },
     "node_modules/@angular/platform-browser-dynamic": {
-      "version": "20.3.24",
-      "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-20.3.24.tgz",
-      "integrity": "sha512-Vl4j7G0aKyRTcZ5KvKQU6B5NBmqs+0uaGkWukpk5ooLCJ7z1vCBCb6fDTF9hoxY3RUk+YA4vGrmkTGGoABnnZA==",
+      "version": "21.2.16",
+      "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-21.2.16.tgz",
+      "integrity": "sha512-WtTnkJOmKiGccHRQfBdkwODAkpTB4zbPN3IKhcqCjlezKaPqZB5tjrIu72Z5pmi5VIgJz1LmfO1LSVCMC5h7dA==",
       "license": "MIT",
       "dependencies": {
         "tslib": "^2.3.0"
@@ -820,16 +825,16 @@
         "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
       },
       "peerDependencies": {
-        "@angular/common": "20.3.24",
-        "@angular/compiler": "20.3.24",
-        "@angular/core": "20.3.24",
-        "@angular/platform-browser": "20.3.24"
+        "@angular/common": "21.2.16",
+        "@angular/compiler": "21.2.16",
+        "@angular/core": "21.2.16",
+        "@angular/platform-browser": "21.2.16"
       }
     },
     "node_modules/@angular/router": {
-      "version": "20.3.24",
-      "resolved": "https://registry.npmjs.org/@angular/router/-/router-20.3.24.tgz",
-      "integrity": "sha512-KZAZMyEazCH4DNMfkZdIs1rRVF0YJzBRWp3YVmmSDJJW9GCd8G+bIhu/L9RBlrR4UglnmZQsNCl6NfJM3HlaDg==",
+      "version": "21.2.16",
+      "resolved": "https://registry.npmjs.org/@angular/router/-/router-21.2.16.tgz",
+      "integrity": "sha512-0+Pyh0uT4vCLabKoGCARYWlwpz4DgZI9AE01n8s9u/nKAZuEMnJtLLnaUtHEMI8nJSqpgnS/5AthuJZdDEfkYw==",
       "license": "MIT",
       "dependencies": {
         "tslib": "^2.3.0"
@@ -838,9 +843,9 @@
         "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
       },
       "peerDependencies": {
-        "@angular/common": "20.3.24",
-        "@angular/core": "20.3.24",
-        "@angular/platform-browser": "20.3.24",
+        "@angular/common": "21.2.16",
+        "@angular/core": "21.2.16",
+        "@angular/platform-browser": "21.2.16",
         "rxjs": "^6.5.3 || ^7.4.0"
       }
     },
@@ -870,23 +875,23 @@
       }
     },
     "node_modules/@babel/core": {
-      "version": "7.28.3",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.3.tgz",
-      "integrity": "sha512-yDBHV9kQNcr2/sUr9jghVyz9C3Y5G2zUM2H2lo+9mKv4sFgbA8s8Z9t8D1jiTkGoO/NoIfKMyKWr4s6CN23ZwQ==",
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.0.tgz",
+      "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==",
       "dev": true,
       "license": "MIT",
       "peer": true,
       "dependencies": {
-        "@ampproject/remapping": "^2.2.0",
-        "@babel/code-frame": "^7.27.1",
-        "@babel/generator": "^7.28.3",
-        "@babel/helper-compilation-targets": "^7.27.2",
-        "@babel/helper-module-transforms": "^7.28.3",
-        "@babel/helpers": "^7.28.3",
-        "@babel/parser": "^7.28.3",
-        "@babel/template": "^7.27.2",
-        "@babel/traverse": "^7.28.3",
-        "@babel/types": "^7.28.2",
+        "@babel/code-frame": "^7.29.0",
+        "@babel/generator": "^7.29.0",
+        "@babel/helper-compilation-targets": "^7.28.6",
+        "@babel/helper-module-transforms": "^7.28.6",
+        "@babel/helpers": "^7.28.6",
+        "@babel/parser": "^7.29.0",
+        "@babel/template": "^7.28.6",
+        "@babel/traverse": "^7.29.0",
+        "@babel/types": "^7.29.0",
+        "@jridgewell/remapping": "^2.3.5",
         "convert-source-map": "^2.0.0",
         "debug": "^4.1.0",
         "gensync": "^1.0.0-beta.2",
@@ -919,14 +924,14 @@
       }
     },
     "node_modules/@babel/generator": {
-      "version": "7.28.3",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.28.3.tgz",
-      "integrity": "sha512-3lSpxGgvnmZznmBkCRnVREPUFJv2wrv9iAoFDvADJc0ypmdOxdUtcLeBgBJ6zE0PMeTKnxeQzyk0xTBq4Ep7zw==",
+      "version": "7.29.1",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.29.1.tgz",
+      "integrity": "sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/parser": "^7.28.3",
-        "@babel/types": "^7.28.2",
+        "@babel/parser": "^7.29.0",
+        "@babel/types": "^7.29.0",
         "@jridgewell/gen-mapping": "^0.3.12",
         "@jridgewell/trace-mapping": "^0.3.28",
         "jsesc": "^3.0.2"
@@ -1078,28 +1083,6 @@
         "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
       }
     },
-    "node_modules/@babel/helper-define-polyfill-provider/node_modules/resolve": {
-      "version": "1.22.12",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.12.tgz",
-      "integrity": "sha512-TyeJ1zif53BPfHootBGwPRYT1RUt6oGWsaQr8UyZW/eAm9bKoijtvruSDEmZHm92CwS9nj7/fWttqPCgzep8CA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "es-errors": "^1.3.0",
-        "is-core-module": "^2.16.1",
-        "path-parse": "^1.0.7",
-        "supports-preserve-symlinks-flag": "^1.0.0"
-      },
-      "bin": {
-        "resolve": "bin/resolve"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/@babel/helper-globals": {
       "version": "7.29.7",
       "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.29.7.tgz",
@@ -1493,15 +1476,15 @@
       }
     },
     "node_modules/@babel/plugin-transform-async-generator-functions": {
-      "version": "7.28.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.28.0.tgz",
-      "integrity": "sha512-BEOdvX4+M765icNPZeidyADIvQ1m1gmunXufXxvRESy/jNNyfovIqUyE7MVgGBjWktCoJlzvFA1To2O4ymIO3Q==",
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.29.0.tgz",
+      "integrity": "sha512-va0VdWro4zlBr2JsXC+ofCPB2iG12wPtVGTWFx2WLDOM3nYQZZIGP82qku2eW/JR83sD+k2k+CsNtyEbUqhU6w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.27.1",
+        "@babel/helper-plugin-utils": "^7.28.6",
         "@babel/helper-remap-async-to-generator": "^7.27.1",
-        "@babel/traverse": "^7.28.0"
+        "@babel/traverse": "^7.29.0"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1511,14 +1494,14 @@
       }
     },
     "node_modules/@babel/plugin-transform-async-to-generator": {
-      "version": "7.27.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.27.1.tgz",
-      "integrity": "sha512-NREkZsZVJS4xmTr8qzE5y8AfIPqsdQfRuUiLRTEzb7Qii8iFWCyDKaUV2c0rCuh4ljDZ98ALHP/PetiBV2nddA==",
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.28.6.tgz",
+      "integrity": "sha512-ilTRcmbuXjsMmcZ3HASTe4caH5Tpo93PkTxF9oG2VZsSWsahydmcEHhix9Ik122RcTnZnUzPbmux4wh1swfv7g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-module-imports": "^7.27.1",
-        "@babel/helper-plugin-utils": "^7.27.1",
+        "@babel/helper-module-imports": "^7.28.6",
+        "@babel/helper-plugin-utils": "^7.28.6",
         "@babel/helper-remap-async-to-generator": "^7.27.1"
       },
       "engines": {
@@ -2211,14 +2194,14 @@
       }
     },
     "node_modules/@babel/plugin-transform-runtime": {
-      "version": "7.28.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.28.3.tgz",
-      "integrity": "sha512-Y6ab1kGqZ0u42Zv/4a7l0l72n9DKP/MKoKWaUSBylrhNZO2prYuqFOLbn5aW5SIFXwSH93yfjbgllL8lxuGKLg==",
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.29.0.tgz",
+      "integrity": "sha512-jlaRT5dJtMaMCV6fAuLbsQMSwz/QkvaHOHOSXRitGGwSpR1blCY4KUKoyP2tYO8vJcqYe8cEj96cqSztv3uF9w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-module-imports": "^7.27.1",
-        "@babel/helper-plugin-utils": "^7.27.1",
+        "@babel/helper-module-imports": "^7.28.6",
+        "@babel/helper-plugin-utils": "^7.28.6",
         "babel-plugin-polyfill-corejs2": "^0.4.14",
         "babel-plugin-polyfill-corejs3": "^0.13.0",
         "babel-plugin-polyfill-regenerator": "^0.6.5",
@@ -2390,81 +2373,81 @@
       }
     },
     "node_modules/@babel/preset-env": {
-      "version": "7.28.3",
-      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.28.3.tgz",
-      "integrity": "sha512-ROiDcM+GbYVPYBOeCR6uBXKkQpBExLl8k9HO1ygXEyds39j+vCCsjmj7S8GOniZQlEs81QlkdJZe76IpLSiqpg==",
+      "version": "7.29.2",
+      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.29.2.tgz",
+      "integrity": "sha512-DYD23veRYGvBFhcTY1iUvJnDNpuqNd/BzBwCvzOTKUnJjKg5kpUBh3/u9585Agdkgj+QuygG7jLfOPWMa2KVNw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/compat-data": "^7.28.0",
-        "@babel/helper-compilation-targets": "^7.27.2",
-        "@babel/helper-plugin-utils": "^7.27.1",
+        "@babel/compat-data": "^7.29.0",
+        "@babel/helper-compilation-targets": "^7.28.6",
+        "@babel/helper-plugin-utils": "^7.28.6",
         "@babel/helper-validator-option": "^7.27.1",
-        "@babel/plugin-bugfix-firefox-class-in-computed-class-key": "^7.27.1",
+        "@babel/plugin-bugfix-firefox-class-in-computed-class-key": "^7.28.5",
         "@babel/plugin-bugfix-safari-class-field-initializer-scope": "^7.27.1",
         "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "^7.27.1",
         "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "^7.27.1",
-        "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": "^7.28.3",
+        "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": "^7.28.6",
         "@babel/plugin-proposal-private-property-in-object": "7.21.0-placeholder-for-preset-env.2",
-        "@babel/plugin-syntax-import-assertions": "^7.27.1",
-        "@babel/plugin-syntax-import-attributes": "^7.27.1",
+        "@babel/plugin-syntax-import-assertions": "^7.28.6",
+        "@babel/plugin-syntax-import-attributes": "^7.28.6",
         "@babel/plugin-syntax-unicode-sets-regex": "^7.18.6",
         "@babel/plugin-transform-arrow-functions": "^7.27.1",
-        "@babel/plugin-transform-async-generator-functions": "^7.28.0",
-        "@babel/plugin-transform-async-to-generator": "^7.27.1",
+        "@babel/plugin-transform-async-generator-functions": "^7.29.0",
+        "@babel/plugin-transform-async-to-generator": "^7.28.6",
         "@babel/plugin-transform-block-scoped-functions": "^7.27.1",
-        "@babel/plugin-transform-block-scoping": "^7.28.0",
-        "@babel/plugin-transform-class-properties": "^7.27.1",
-        "@babel/plugin-transform-class-static-block": "^7.28.3",
-        "@babel/plugin-transform-classes": "^7.28.3",
-        "@babel/plugin-transform-computed-properties": "^7.27.1",
-        "@babel/plugin-transform-destructuring": "^7.28.0",
-        "@babel/plugin-transform-dotall-regex": "^7.27.1",
+        "@babel/plugin-transform-block-scoping": "^7.28.6",
+        "@babel/plugin-transform-class-properties": "^7.28.6",
+        "@babel/plugin-transform-class-static-block": "^7.28.6",
+        "@babel/plugin-transform-classes": "^7.28.6",
+        "@babel/plugin-transform-computed-properties": "^7.28.6",
+        "@babel/plugin-transform-destructuring": "^7.28.5",
+        "@babel/plugin-transform-dotall-regex": "^7.28.6",
         "@babel/plugin-transform-duplicate-keys": "^7.27.1",
-        "@babel/plugin-transform-duplicate-named-capturing-groups-regex": "^7.27.1",
+        "@babel/plugin-transform-duplicate-named-capturing-groups-regex": "^7.29.0",
         "@babel/plugin-transform-dynamic-import": "^7.27.1",
-        "@babel/plugin-transform-explicit-resource-management": "^7.28.0",
-        "@babel/plugin-transform-exponentiation-operator": "^7.27.1",
+        "@babel/plugin-transform-explicit-resource-management": "^7.28.6",
+        "@babel/plugin-transform-exponentiation-operator": "^7.28.6",
         "@babel/plugin-transform-export-namespace-from": "^7.27.1",
         "@babel/plugin-transform-for-of": "^7.27.1",
         "@babel/plugin-transform-function-name": "^7.27.1",
-        "@babel/plugin-transform-json-strings": "^7.27.1",
+        "@babel/plugin-transform-json-strings": "^7.28.6",
         "@babel/plugin-transform-literals": "^7.27.1",
-        "@babel/plugin-transform-logical-assignment-operators": "^7.27.1",
+        "@babel/plugin-transform-logical-assignment-operators": "^7.28.6",
         "@babel/plugin-transform-member-expression-literals": "^7.27.1",
         "@babel/plugin-transform-modules-amd": "^7.27.1",
-        "@babel/plugin-transform-modules-commonjs": "^7.27.1",
-        "@babel/plugin-transform-modules-systemjs": "^7.27.1",
+        "@babel/plugin-transform-modules-commonjs": "^7.28.6",
+        "@babel/plugin-transform-modules-systemjs": "^7.29.0",
         "@babel/plugin-transform-modules-umd": "^7.27.1",
-        "@babel/plugin-transform-named-capturing-groups-regex": "^7.27.1",
+        "@babel/plugin-transform-named-capturing-groups-regex": "^7.29.0",
         "@babel/plugin-transform-new-target": "^7.27.1",
-        "@babel/plugin-transform-nullish-coalescing-operator": "^7.27.1",
-        "@babel/plugin-transform-numeric-separator": "^7.27.1",
-        "@babel/plugin-transform-object-rest-spread": "^7.28.0",
+        "@babel/plugin-transform-nullish-coalescing-operator": "^7.28.6",
+        "@babel/plugin-transform-numeric-separator": "^7.28.6",
+        "@babel/plugin-transform-object-rest-spread": "^7.28.6",
         "@babel/plugin-transform-object-super": "^7.27.1",
-        "@babel/plugin-transform-optional-catch-binding": "^7.27.1",
-        "@babel/plugin-transform-optional-chaining": "^7.27.1",
+        "@babel/plugin-transform-optional-catch-binding": "^7.28.6",
+        "@babel/plugin-transform-optional-chaining": "^7.28.6",
         "@babel/plugin-transform-parameters": "^7.27.7",
-        "@babel/plugin-transform-private-methods": "^7.27.1",
-        "@babel/plugin-transform-private-property-in-object": "^7.27.1",
+        "@babel/plugin-transform-private-methods": "^7.28.6",
+        "@babel/plugin-transform-private-property-in-object": "^7.28.6",
         "@babel/plugin-transform-property-literals": "^7.27.1",
-        "@babel/plugin-transform-regenerator": "^7.28.3",
-        "@babel/plugin-transform-regexp-modifiers": "^7.27.1",
+        "@babel/plugin-transform-regenerator": "^7.29.0",
+        "@babel/plugin-transform-regexp-modifiers": "^7.28.6",
         "@babel/plugin-transform-reserved-words": "^7.27.1",
         "@babel/plugin-transform-shorthand-properties": "^7.27.1",
-        "@babel/plugin-transform-spread": "^7.27.1",
+        "@babel/plugin-transform-spread": "^7.28.6",
         "@babel/plugin-transform-sticky-regex": "^7.27.1",
         "@babel/plugin-transform-template-literals": "^7.27.1",
         "@babel/plugin-transform-typeof-symbol": "^7.27.1",
         "@babel/plugin-transform-unicode-escapes": "^7.27.1",
-        "@babel/plugin-transform-unicode-property-regex": "^7.27.1",
+        "@babel/plugin-transform-unicode-property-regex": "^7.28.6",
         "@babel/plugin-transform-unicode-regex": "^7.27.1",
-        "@babel/plugin-transform-unicode-sets-regex": "^7.27.1",
+        "@babel/plugin-transform-unicode-sets-regex": "^7.28.6",
         "@babel/preset-modules": "0.1.6-no-external-plugins",
-        "babel-plugin-polyfill-corejs2": "^0.4.14",
-        "babel-plugin-polyfill-corejs3": "^0.13.0",
-        "babel-plugin-polyfill-regenerator": "^0.6.5",
-        "core-js-compat": "^3.43.0",
+        "babel-plugin-polyfill-corejs2": "^0.4.15",
+        "babel-plugin-polyfill-corejs3": "^0.14.0",
+        "babel-plugin-polyfill-regenerator": "^0.6.6",
+        "core-js-compat": "^3.48.0",
         "semver": "^6.3.1"
       },
       "engines": {
@@ -2474,6 +2457,20 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/preset-env/node_modules/babel-plugin-polyfill-corejs3": {
+      "version": "0.14.2",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.14.2.tgz",
+      "integrity": "sha512-coWpDLJ410R781Npmn/SIBZEsAetR4xVi0SxLMXPaMO4lSf1MwnkGYMtkFxew0Dn8B3/CpbpYxN0JCgg8mn67g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-define-polyfill-provider": "^0.6.8",
+        "core-js-compat": "^3.48.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
+      }
+    },
     "node_modules/@babel/preset-env/node_modules/semver": {
       "version": "6.3.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
@@ -2500,9 +2497,9 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.28.3",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.3.tgz",
-      "integrity": "sha512-9uIQ10o0WGdpP6GDhXcdOJPJuDgFtIDtN/9+ArJQ2NAfAmiuhTQdzkaTGR33v43GYS2UrSA0eX2pPPHoFVvpxA==",
+      "version": "7.29.2",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.2.tgz",
+      "integrity": "sha512-JiDShH45zKHWyGe4ZNVRrCjBz8Nh9TMmZG1kh4QTK8hCBTWBi8Da+i7s1fJw7/lYpM4ccepSNfqzZ/QvABBi5g==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -2584,10 +2581,21 @@
         "node": ">=14.17.0"
       }
     },
+    "node_modules/@emnapi/wasi-threads": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.2.tgz",
+      "integrity": "sha512-c95qOXkHdydNKhscBTebqEC1CVAZpyqOfVfBzQ1qgzyl3gfeldUjIggDbIZgDKsHLgnsM+igH7TJ/eAasaVuMA==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/@esbuild/aix-ppc64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.28.0.tgz",
-      "integrity": "sha512-lhRUCeuOyJQURhTxl4WkpFTjIsbDayJHih5kZC1giwE+MhIzAb7mEsQMqMf18rHLsrb5qI1tafG20mLxEWcWlA==",
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.27.3.tgz",
+      "integrity": "sha512-9fJMTNFTWZMh5qwrBItuziu834eOCUcEqymSH7pY+zoMVEZg3gcPuBNxH1EvfVYe9h0x/Ptw8KBzv7qxb7l8dg==",
       "cpu": [
         "ppc64"
       ],
@@ -2602,9 +2610,9 @@
       }
     },
     "node_modules/@esbuild/android-arm": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.28.0.tgz",
-      "integrity": "sha512-wqh0ByljabXLKHeWXYLqoJ5jKC4XBaw6Hk08OfMrCRd2nP2ZQ5eleDZC41XHyCNgktBGYMbqnrJKq/K/lzPMSQ==",
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.27.3.tgz",
+      "integrity": "sha512-i5D1hPY7GIQmXlXhs2w8AWHhenb00+GxjxRncS2ZM7YNVGNfaMxgzSGuO8o8SJzRc/oZwU2bcScvVERk03QhzA==",
       "cpu": [
         "arm"
       ],
@@ -2619,9 +2627,9 @@
       }
     },
     "node_modules/@esbuild/android-arm64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.28.0.tgz",
-      "integrity": "sha512-+WzIXQOSaGs33tLEgYPYe/yQHf0WTU0X42Jca3y8NWMbUVhp7rUnw+vAsRC/QiDrdD31IszMrZy+qwPOPjd+rw==",
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.27.3.tgz",
+      "integrity": "sha512-YdghPYUmj/FX2SYKJ0OZxf+iaKgMsKHVPF1MAq/P8WirnSpCStzKJFjOjzsW0QQ7oIAiccHdcqjbHmJxRb/dmg==",
       "cpu": [
         "arm64"
       ],
@@ -2636,9 +2644,9 @@
       }
     },
     "node_modules/@esbuild/android-x64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.28.0.tgz",
-      "integrity": "sha512-+VJggoaKhk2VNNqVL7f6S189UzShHC/mR9EE8rDdSkdpN0KflSwWY/gWjDrNxxisg8Fp1ZCD9jLMo4m0OUfeUA==",
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.27.3.tgz",
+      "integrity": "sha512-IN/0BNTkHtk8lkOM8JWAYFg4ORxBkZQf9zXiEOfERX/CzxW3Vg1ewAhU7QSWQpVIzTW+b8Xy+lGzdYXV6UZObQ==",
       "cpu": [
         "x64"
       ],
@@ -2653,9 +2661,9 @@
       }
     },
     "node_modules/@esbuild/darwin-arm64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.28.0.tgz",
-      "integrity": "sha512-0T+A9WZm+bZ84nZBtk1ckYsOvyA3x7e2Acj1KdVfV4/2tdG4fzUp91YHx+GArWLtwqp77pBXVCPn2We7Letr0Q==",
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.27.3.tgz",
+      "integrity": "sha512-Re491k7ByTVRy0t3EKWajdLIr0gz2kKKfzafkth4Q8A5n1xTHrkqZgLLjFEHVD+AXdUGgQMq+Godfq45mGpCKg==",
       "cpu": [
         "arm64"
       ],
@@ -2670,9 +2678,9 @@
       }
     },
     "node_modules/@esbuild/darwin-x64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.28.0.tgz",
-      "integrity": "sha512-fyzLm/DLDl/84OCfp2f/XQ4flmORsjU7VKt8HLjvIXChJoFFOIL6pLJPH4Yhd1n1gGFF9mPwtlN5Wf82DZs+LQ==",
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.27.3.tgz",
+      "integrity": "sha512-vHk/hA7/1AckjGzRqi6wbo+jaShzRowYip6rt6q7VYEDX4LEy1pZfDpdxCBnGtl+A5zq8iXDcyuxwtv3hNtHFg==",
       "cpu": [
         "x64"
       ],
@@ -2687,9 +2695,9 @@
       }
     },
     "node_modules/@esbuild/freebsd-arm64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.28.0.tgz",
-      "integrity": "sha512-l9GeW5UZBT9k9brBYI+0WDffcRxgHQD8ShN2Ur4xWq/NFzUKm3k5lsH4PdaRgb2w7mI9u61nr2gI2mLI27Nh3Q==",
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.27.3.tgz",
+      "integrity": "sha512-ipTYM2fjt3kQAYOvo6vcxJx3nBYAzPjgTCk7QEgZG8AUO3ydUhvelmhrbOheMnGOlaSFUoHXB6un+A7q4ygY9w==",
       "cpu": [
         "arm64"
       ],
@@ -2704,9 +2712,9 @@
       }
     },
     "node_modules/@esbuild/freebsd-x64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.28.0.tgz",
-      "integrity": "sha512-BXoQai/A0wPO6Es3yFJ7APCiKGc1tdAEOgeTNy3SsB491S3aHn4S4r3e976eUnPdU+NbdtmBuLncYir2tMU9Nw==",
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.27.3.tgz",
+      "integrity": "sha512-dDk0X87T7mI6U3K9VjWtHOXqwAMJBNN2r7bejDsc+j03SEjtD9HrOl8gVFByeM0aJksoUuUVU9TBaZa2rgj0oA==",
       "cpu": [
         "x64"
       ],
@@ -2721,9 +2729,9 @@
       }
     },
     "node_modules/@esbuild/linux-arm": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.28.0.tgz",
-      "integrity": "sha512-CjaaREJagqJp7iTaNQjjidaNbCKYcd4IDkzbwwxtSvjI7NZm79qiHc8HqciMddQ6CKvJT6aBd8lO9kN/ZudLlw==",
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.27.3.tgz",
+      "integrity": "sha512-s6nPv2QkSupJwLYyfS+gwdirm0ukyTFNl3KTgZEAiJDd+iHZcbTPPcWCcRYH+WlNbwChgH2QkE9NSlNrMT8Gfw==",
       "cpu": [
         "arm"
       ],
@@ -2738,9 +2746,9 @@
       }
     },
     "node_modules/@esbuild/linux-arm64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.28.0.tgz",
-      "integrity": "sha512-RVyzfb3FWsGA55n6WY0MEIEPURL1FcbhFE6BffZEMEekfCzCIMtB5yyDcFnVbTnwk+CLAgTujmV/Lgvih56W+A==",
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.27.3.tgz",
+      "integrity": "sha512-sZOuFz/xWnZ4KH3YfFrKCf1WyPZHakVzTiqji3WDc0BCl2kBwiJLCXpzLzUBLgmp4veFZdvN5ChW4Eq/8Fc2Fg==",
       "cpu": [
         "arm64"
       ],
@@ -2755,9 +2763,9 @@
       }
     },
     "node_modules/@esbuild/linux-ia32": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.28.0.tgz",
-      "integrity": "sha512-KBnSTt1kxl9x70q+ydterVdl+Cn0H18ngRMRCEQfrbqdUuntQQ0LoMZv47uB97NljZFzY6HcfqEZ2SAyIUTQBQ==",
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.27.3.tgz",
+      "integrity": "sha512-yGlQYjdxtLdh0a3jHjuwOrxQjOZYD/C9PfdbgJJF3TIZWnm/tMd/RcNiLngiu4iwcBAOezdnSLAwQDPqTmtTYg==",
       "cpu": [
         "ia32"
       ],
@@ -2772,9 +2780,9 @@
       }
     },
     "node_modules/@esbuild/linux-loong64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.28.0.tgz",
-      "integrity": "sha512-zpSlUce1mnxzgBADvxKXX5sl8aYQHo2ezvMNI8I0lbblJtp8V4odlm3Yzlj7gPyt3T8ReksE6bK+pT3WD+aJRg==",
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.27.3.tgz",
+      "integrity": "sha512-WO60Sn8ly3gtzhyjATDgieJNet/KqsDlX5nRC5Y3oTFcS1l0KWba+SEa9Ja1GfDqSF1z6hif/SkpQJbL63cgOA==",
       "cpu": [
         "loong64"
       ],
@@ -2789,9 +2797,9 @@
       }
     },
     "node_modules/@esbuild/linux-mips64el": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.28.0.tgz",
-      "integrity": "sha512-2jIfP6mmjkdmeTlsX/9vmdmhBmKADrWqN7zcdtHIeNSCH1SqIoNI63cYsjQR8J+wGa4Y5izRcSHSm8K3QWmk3w==",
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.27.3.tgz",
+      "integrity": "sha512-APsymYA6sGcZ4pD6k+UxbDjOFSvPWyZhjaiPyl/f79xKxwTnrn5QUnXR5prvetuaSMsb4jgeHewIDCIWljrSxw==",
       "cpu": [
         "mips64el"
       ],
@@ -2806,9 +2814,9 @@
       }
     },
     "node_modules/@esbuild/linux-ppc64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.28.0.tgz",
-      "integrity": "sha512-bc0FE9wWeC0WBm49IQMPSPILRocGTQt3j5KPCA8os6VprfuJ7KD+5PzESSrJ6GmPIPJK965ZJHTUlSA6GNYEhg==",
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.27.3.tgz",
+      "integrity": "sha512-eizBnTeBefojtDb9nSh4vvVQ3V9Qf9Df01PfawPcRzJH4gFSgrObw+LveUyDoKU3kxi5+9RJTCWlj4FjYXVPEA==",
       "cpu": [
         "ppc64"
       ],
@@ -2823,9 +2831,9 @@
       }
     },
     "node_modules/@esbuild/linux-riscv64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.28.0.tgz",
-      "integrity": "sha512-SQPZOwoTTT/HXFXQJG/vBX8sOFagGqvZyXcgLA3NhIqcBv1BJU1d46c0rGcrij2B56Z2rNiSLaZOYW5cUk7yLQ==",
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.27.3.tgz",
+      "integrity": "sha512-3Emwh0r5wmfm3ssTWRQSyVhbOHvqegUDRd0WhmXKX2mkHJe1SFCMJhagUleMq+Uci34wLSipf8Lagt4LlpRFWQ==",
       "cpu": [
         "riscv64"
       ],
@@ -2840,9 +2848,9 @@
       }
     },
     "node_modules/@esbuild/linux-s390x": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.28.0.tgz",
-      "integrity": "sha512-SCfR0HN8CEEjnYnySJTd2cw0k9OHB/YFzt5zgJEwa+wL/T/raGWYMBqwDNAC6dqFKmJYZoQBRfHjgwLHGSrn3Q==",
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.27.3.tgz",
+      "integrity": "sha512-pBHUx9LzXWBc7MFIEEL0yD/ZVtNgLytvx60gES28GcWMqil8ElCYR4kvbV2BDqsHOvVDRrOxGySBM9Fcv744hw==",
       "cpu": [
         "s390x"
       ],
@@ -2857,9 +2865,9 @@
       }
     },
     "node_modules/@esbuild/linux-x64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.28.0.tgz",
-      "integrity": "sha512-us0dSb9iFxIi8srnpl931Nvs65it/Jd2a2K3qs7fz2WfGPHqzfzZTfec7oxZJRNPXPnNYZtanmRc4AL/JwVzHQ==",
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.27.3.tgz",
+      "integrity": "sha512-Czi8yzXUWIQYAtL/2y6vogER8pvcsOsk5cpwL4Gk5nJqH5UZiVByIY8Eorm5R13gq+DQKYg0+JyQoytLQas4dA==",
       "cpu": [
         "x64"
       ],
@@ -2874,9 +2882,9 @@
       }
     },
     "node_modules/@esbuild/netbsd-arm64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.28.0.tgz",
-      "integrity": "sha512-CR/RYotgtCKwtftMwJlUU7xCVNg3lMYZ0RzTmAHSfLCXw3NtZtNpswLEj/Kkf6kEL3Gw+BpOekRX0BYCtklhUw==",
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.27.3.tgz",
+      "integrity": "sha512-sDpk0RgmTCR/5HguIZa9n9u+HVKf40fbEUt+iTzSnCaGvY9kFP0YKBWZtJaraonFnqef5SlJ8/TiPAxzyS+UoA==",
       "cpu": [
         "arm64"
       ],
@@ -2891,9 +2899,9 @@
       }
     },
     "node_modules/@esbuild/netbsd-x64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.28.0.tgz",
-      "integrity": "sha512-nU1yhmYutL+fQ71Kxnhg8uEOdC0pwEW9entHykTgEbna2pw2dkbFSMeqjjyHZoCmt8SBkOSvV+yNmm94aUrrqw==",
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.27.3.tgz",
+      "integrity": "sha512-P14lFKJl/DdaE00LItAukUdZO5iqNH7+PjoBm+fLQjtxfcfFE20Xf5CrLsmZdq5LFFZzb5JMZ9grUwvtVYzjiA==",
       "cpu": [
         "x64"
       ],
@@ -2908,9 +2916,9 @@
       }
     },
     "node_modules/@esbuild/openbsd-arm64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.28.0.tgz",
-      "integrity": "sha512-cXb5vApOsRsxsEl4mcZ1XY3D4DzcoMxR/nnc4IyqYs0rTI8ZKmW6kyyg+11Z8yvgMfAEldKzP7AdP64HnSC/6g==",
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.27.3.tgz",
+      "integrity": "sha512-AIcMP77AvirGbRl/UZFTq5hjXK+2wC7qFRGoHSDrZ5v5b8DK/GYpXW3CPRL53NkvDqb9D+alBiC/dV0Fb7eJcw==",
       "cpu": [
         "arm64"
       ],
@@ -2925,9 +2933,9 @@
       }
     },
     "node_modules/@esbuild/openbsd-x64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.28.0.tgz",
-      "integrity": "sha512-8wZM2qqtv9UP3mzy7HiGYNH/zjTA355mpeuA+859TyR+e+Tc08IHYpLJuMsfpDJwoLo1ikIJI8jC3GFjnRClzA==",
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.27.3.tgz",
+      "integrity": "sha512-DnW2sRrBzA+YnE70LKqnM3P+z8vehfJWHXECbwBmH/CU51z6FiqTQTHFenPlHmo3a8UgpLyH3PT+87OViOh1AQ==",
       "cpu": [
         "x64"
       ],
@@ -2942,9 +2950,9 @@
       }
     },
     "node_modules/@esbuild/openharmony-arm64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.28.0.tgz",
-      "integrity": "sha512-FLGfyizszcef5C3YtoyQDACyg95+dndv79i2EekILBofh5wpCa1KuBqOWKrEHZg3zrL3t5ouE5jgr94vA+Wb2w==",
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.27.3.tgz",
+      "integrity": "sha512-NinAEgr/etERPTsZJ7aEZQvvg/A6IsZG/LgZy+81wON2huV7SrK3e63dU0XhyZP4RKGyTm7aOgmQk0bGp0fy2g==",
       "cpu": [
         "arm64"
       ],
@@ -2959,9 +2967,9 @@
       }
     },
     "node_modules/@esbuild/sunos-x64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.28.0.tgz",
-      "integrity": "sha512-1ZgjUoEdHZZl/YlV76TSCz9Hqj9h9YmMGAgAPYd+q4SicWNX3G5GCyx9uhQWSLcbvPW8Ni7lj4gDa1T40akdlw==",
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.27.3.tgz",
+      "integrity": "sha512-PanZ+nEz+eWoBJ8/f8HKxTTD172SKwdXebZ0ndd953gt1HRBbhMsaNqjTyYLGLPdoWHy4zLU7bDVJztF5f3BHA==",
       "cpu": [
         "x64"
       ],
@@ -2976,9 +2984,9 @@
       }
     },
     "node_modules/@esbuild/win32-arm64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.28.0.tgz",
-      "integrity": "sha512-Q9StnDmQ/enxnpxCCLSg0oo4+34B9TdXpuyPeTedN/6+iXBJ4J+zwfQI28u/Jl40nOYAxGoNi7mFP40RUtkmUA==",
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.27.3.tgz",
+      "integrity": "sha512-B2t59lWWYrbRDw/tjiWOuzSsFh1Y/E95ofKz7rIVYSQkUYBjfSgf6oeYPNWHToFRr2zx52JKApIcAS/D5TUBnA==",
       "cpu": [
         "arm64"
       ],
@@ -2993,9 +3001,9 @@
       }
     },
     "node_modules/@esbuild/win32-ia32": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.28.0.tgz",
-      "integrity": "sha512-zF3ag/gfiCe6U2iczcRzSYJKH1DCI+ByzSENHlM2FcDbEeo5Zd2C86Aq0tKUYAJJ1obRP84ymxIAksZUcdztHA==",
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.27.3.tgz",
+      "integrity": "sha512-QLKSFeXNS8+tHW7tZpMtjlNb7HKau0QDpwm49u0vUp9y1WOF+PEzkU84y9GqYaAVW8aH8f3GcBck26jh54cX4Q==",
       "cpu": [
         "ia32"
       ],
@@ -3010,9 +3018,9 @@
       }
     },
     "node_modules/@esbuild/win32-x64": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.28.0.tgz",
-      "integrity": "sha512-pEl1bO9mfAmIC+tW5btTmrKaujg3zGtUmWNdCw/xs70FBjwAL3o9OEKNHvNmnyylD6ubxUERiEhdsL0xBQ9efw==",
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.27.3.tgz",
+      "integrity": "sha512-4uJGhsxuptu3OcpVAzli+/gWusVGwZZHTlS63hh++ehExkVT8SgiEf7/uC/PclrPPkLhZqGgCTjd0VWLo6xMqA==",
       "cpu": [
         "x64"
       ],
@@ -3036,6 +3044,14 @@
         "node": "^20.17.0 || >=22.9.0"
       }
     },
+    "node_modules/@harperfast/extended-iterable": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@harperfast/extended-iterable/-/extended-iterable-1.0.3.tgz",
+      "integrity": "sha512-sSAYhQca3rDWtQUHSAPeO7axFIUJOI6hn1gjRC5APVE1a90tuyT8f5WIgRsFhhWA7htNkju2veB9eWL6YHi/Lw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true
+    },
     "node_modules/@hono/node-server": {
       "version": "1.19.14",
       "resolved": "https://registry.npmjs.org/@hono/node-server/-/node-server-1.19.14.tgz",
@@ -3085,14 +3101,14 @@
       }
     },
     "node_modules/@inquirer/confirm": {
-      "version": "5.1.14",
-      "resolved": "https://registry.npmjs.org/@inquirer/confirm/-/confirm-5.1.14.tgz",
-      "integrity": "sha512-5yR4IBfe0kXe59r1YCTG8WXkUbl7Z35HK87Sw+WUyGD8wNUx7JvY7laahzeytyE1oLn74bQnL7hstctQxisQ8Q==",
+      "version": "5.1.21",
+      "resolved": "https://registry.npmjs.org/@inquirer/confirm/-/confirm-5.1.21.tgz",
+      "integrity": "sha512-KR8edRkIsUayMXV+o3Gv+q4jlhENF9nMYUZs9PA2HzrXeHI8M5uDag70U7RJn9yyiMZSbtF5/UexBtAVtZGSbQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@inquirer/core": "^10.1.15",
-        "@inquirer/type": "^3.0.8"
+        "@inquirer/core": "^10.3.2",
+        "@inquirer/type": "^3.0.10"
       },
       "engines": {
         "node": ">=18"
@@ -3280,23 +3296,23 @@
       }
     },
     "node_modules/@inquirer/prompts": {
-      "version": "7.8.2",
-      "resolved": "https://registry.npmjs.org/@inquirer/prompts/-/prompts-7.8.2.tgz",
-      "integrity": "sha512-nqhDw2ZcAUrKNPwhjinJny903bRhI0rQhiDz1LksjeRxqa36i3l75+4iXbOy0rlDpLJGxqtgoPavQjmmyS5UJw==",
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/@inquirer/prompts/-/prompts-7.10.1.tgz",
+      "integrity": "sha512-Dx/y9bCQcXLI5ooQ5KyvA4FTgeo2jYj/7plWfV5Ak5wDPKQZgudKez2ixyfz7tKXzcJciTxqLeK7R9HItwiByg==",
       "dev": true,
       "license": "MIT",
       "peer": true,
       "dependencies": {
-        "@inquirer/checkbox": "^4.2.1",
-        "@inquirer/confirm": "^5.1.14",
-        "@inquirer/editor": "^4.2.17",
-        "@inquirer/expand": "^4.0.17",
-        "@inquirer/input": "^4.2.1",
-        "@inquirer/number": "^3.0.17",
-        "@inquirer/password": "^4.0.17",
-        "@inquirer/rawlist": "^4.1.5",
-        "@inquirer/search": "^3.1.0",
-        "@inquirer/select": "^4.3.1"
+        "@inquirer/checkbox": "^4.3.2",
+        "@inquirer/confirm": "^5.1.21",
+        "@inquirer/editor": "^4.2.23",
+        "@inquirer/expand": "^4.0.23",
+        "@inquirer/input": "^4.3.1",
+        "@inquirer/number": "^3.0.23",
+        "@inquirer/password": "^4.0.23",
+        "@inquirer/rawlist": "^4.1.11",
+        "@inquirer/search": "^3.2.2",
+        "@inquirer/select": "^4.4.2"
       },
       "engines": {
         "node": ">=18"
@@ -3434,6 +3450,17 @@
         "@jridgewell/trace-mapping": "^0.3.24"
       }
     },
+    "node_modules/@jridgewell/remapping": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
+      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
     "node_modules/@jridgewell/resolve-uri": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
@@ -3911,26 +3938,26 @@
       "license": "MIT"
     },
     "node_modules/@listr2/prompt-adapter-inquirer": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@listr2/prompt-adapter-inquirer/-/prompt-adapter-inquirer-3.0.1.tgz",
-      "integrity": "sha512-3XFmGwm3u6ioREG+ynAQB7FoxfajgQnMhIu8wC5eo/Lsih4aKDg0VuIMGaOsYn7hJSJagSeaD4K8yfpkEoDEmA==",
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@listr2/prompt-adapter-inquirer/-/prompt-adapter-inquirer-3.0.5.tgz",
+      "integrity": "sha512-WELs+hj6xcilkloBXYf9XXK8tYEnKsgLj01Xl5ONUJpKjmT5hGVUzNUS5tooUxs7pGMrw+jFD/41WpqW4V3LDA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@inquirer/type": "^3.0.7"
+        "@inquirer/type": "^3.0.8"
       },
       "engines": {
         "node": ">=20.0.0"
       },
       "peerDependencies": {
         "@inquirer/prompts": ">= 3 < 8",
-        "listr2": "9.0.1"
+        "listr2": "9.0.5"
       }
     },
     "node_modules/@lmdb/lmdb-darwin-arm64": {
-      "version": "3.4.2",
-      "resolved": "https://registry.npmjs.org/@lmdb/lmdb-darwin-arm64/-/lmdb-darwin-arm64-3.4.2.tgz",
-      "integrity": "sha512-NK80WwDoODyPaSazKbzd3NEJ3ygePrkERilZshxBViBARNz21rmediktGHExoj9n5t9+ChlgLlxecdFKLCuCKg==",
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/@lmdb/lmdb-darwin-arm64/-/lmdb-darwin-arm64-3.5.1.tgz",
+      "integrity": "sha512-tpfN4kKrrMpQ+If1l8bhmoNkECJi0iOu6AEdrTJvWVC+32sLxTARX5Rsu579mPImRP9YFWfWgeRQ5oav7zApQQ==",
       "cpu": [
         "arm64"
       ],
@@ -3942,9 +3969,9 @@
       ]
     },
     "node_modules/@lmdb/lmdb-darwin-x64": {
-      "version": "3.4.2",
-      "resolved": "https://registry.npmjs.org/@lmdb/lmdb-darwin-x64/-/lmdb-darwin-x64-3.4.2.tgz",
-      "integrity": "sha512-zevaowQNmrp3U7Fz1s9pls5aIgpKRsKb3dZWDINtLiozh3jZI9fBrI19lYYBxqdyiIyNdlyiidPnwPShj4aK+w==",
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/@lmdb/lmdb-darwin-x64/-/lmdb-darwin-x64-3.5.1.tgz",
+      "integrity": "sha512-+a2tTfc3rmWhLAolFUWRgJtpSuu+Fw/yjn4rF406NMxhfjbMuiOUTDRvRlMFV+DzyjkwnokisskHbCWkS3Ly5w==",
       "cpu": [
         "x64"
       ],
@@ -3956,9 +3983,9 @@
       ]
     },
     "node_modules/@lmdb/lmdb-linux-arm": {
-      "version": "3.4.2",
-      "resolved": "https://registry.npmjs.org/@lmdb/lmdb-linux-arm/-/lmdb-linux-arm-3.4.2.tgz",
-      "integrity": "sha512-OmHCULY17rkx/RoCoXlzU7LyR8xqrksgdYWwtYa14l/sseezZ8seKWXcogHcjulBddER5NnEFV4L/Jtr2nyxeg==",
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/@lmdb/lmdb-linux-arm/-/lmdb-linux-arm-3.5.1.tgz",
+      "integrity": "sha512-0EgcE6reYr8InjD7V37EgXcYrloqpxVPINy3ig1MwDSbl6LF/vXTYRH9OE1Ti1D8YZnB35ZH9aTcdfSb5lql2A==",
       "cpu": [
         "arm"
       ],
@@ -3970,9 +3997,9 @@
       ]
     },
     "node_modules/@lmdb/lmdb-linux-arm64": {
-      "version": "3.4.2",
-      "resolved": "https://registry.npmjs.org/@lmdb/lmdb-linux-arm64/-/lmdb-linux-arm64-3.4.2.tgz",
-      "integrity": "sha512-ZBEfbNZdkneebvZs98Lq30jMY8V9IJzckVeigGivV7nTHJc+89Ctomp1kAIWKlwIG0ovCDrFI448GzFPORANYg==",
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/@lmdb/lmdb-linux-arm64/-/lmdb-linux-arm64-3.5.1.tgz",
+      "integrity": "sha512-aoERa5B6ywXdyFeYGQ1gbQpkMkDbEo45qVoXE5QpIRavqjnyPwjOulMkmkypkmsbJ5z4Wi0TBztON8agCTG0Vg==",
       "cpu": [
         "arm64"
       ],
@@ -3984,9 +4011,9 @@
       ]
     },
     "node_modules/@lmdb/lmdb-linux-x64": {
-      "version": "3.4.2",
-      "resolved": "https://registry.npmjs.org/@lmdb/lmdb-linux-x64/-/lmdb-linux-x64-3.4.2.tgz",
-      "integrity": "sha512-vL9nM17C77lohPYE4YaAQvfZCSVJSryE4fXdi8M7uWPBnU+9DJabgKVAeyDb84ZM2vcFseoBE4/AagVtJeRE7g==",
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/@lmdb/lmdb-linux-x64/-/lmdb-linux-x64-3.5.1.tgz",
+      "integrity": "sha512-SqNDY1+vpji7bh0sFH5wlWyFTOzjbDOl0/kB5RLLYDAFyd/uw3n7wyrmas3rYPpAW7z18lMOi1yKlTPv967E3g==",
       "cpu": [
         "x64"
       ],
@@ -3998,9 +4025,9 @@
       ]
     },
     "node_modules/@lmdb/lmdb-win32-arm64": {
-      "version": "3.4.2",
-      "resolved": "https://registry.npmjs.org/@lmdb/lmdb-win32-arm64/-/lmdb-win32-arm64-3.4.2.tgz",
-      "integrity": "sha512-SXWjdBfNDze4ZPeLtYIzsIeDJDJ/SdsA0pEXcUBayUIMO0FQBHfVZZyHXQjjHr4cvOAzANBgIiqaXRwfMhzmLw==",
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/@lmdb/lmdb-win32-arm64/-/lmdb-win32-arm64-3.5.1.tgz",
+      "integrity": "sha512-50v0O1Lt37cwrmR9vWZK5hRW0Aw+KEmxJJ75fge/zIYdvNKB/0bSMSVR5Uc2OV9JhosIUyklOmrEvavwNJ8D6w==",
       "cpu": [
         "arm64"
       ],
@@ -4012,9 +4039,9 @@
       ]
     },
     "node_modules/@lmdb/lmdb-win32-x64": {
-      "version": "3.4.2",
-      "resolved": "https://registry.npmjs.org/@lmdb/lmdb-win32-x64/-/lmdb-win32-x64-3.4.2.tgz",
-      "integrity": "sha512-IY+r3bxKW6Q6sIPiMC0L533DEfRJSXibjSI3Ft/w9Q8KQBNqEIvUFXt+09wV8S5BRk0a8uSF19YWxuRwEfI90g==",
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/@lmdb/lmdb-win32-x64/-/lmdb-win32-x64-3.5.1.tgz",
+      "integrity": "sha512-qwosvPyl+zpUlp3gRb7UcJ3H8S28XHCzkv0Y0EgQToXjQP91ZD67EHSCDmaLjtKhe+GVIW5om1KUpzVLA0l6pg==",
       "cpu": [
         "x64"
       ],
@@ -4491,10 +4518,29 @@
         "node": ">= 10"
       }
     },
+    "node_modules/@napi-rs/wasm-runtime": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.5.tgz",
+      "integrity": "sha512-AWPoBRJ9tsnVhor4sjO7rkni+7p+2IAEFj6cx06UgP10jkQHqay/36uRV/bFkgrh18D9vb4cr8Q0Pthskgzy+Q==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@tybys/wasm-util": "^0.10.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      },
+      "peerDependencies": {
+        "@emnapi/core": "^1.7.1",
+        "@emnapi/runtime": "^1.7.1"
+      }
+    },
     "node_modules/@ngtools/webpack": {
-      "version": "20.3.27",
-      "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-20.3.27.tgz",
-      "integrity": "sha512-+H6u6RKGIHjkGhvtz1CexGtjLR2WqUB37TnO/RdGxq6xWyH0oEzV5oT73OGSrwrNjQS9TzhVj0xcnVsAhv5HdQ==",
+      "version": "21.2.14",
+      "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-21.2.14.tgz",
+      "integrity": "sha512-HXt4pYLlWCJphO6TZoTsi2Z9Lyq/PqYpiKlqUmNoo/oIiSuXtoT/8+84Z/SfBdzeZpiVrAFz+/QGTVFoD8RSGg==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -4503,47 +4549,22 @@
         "yarn": ">= 1.13.0"
       },
       "peerDependencies": {
-        "@angular/compiler-cli": "^20.0.0",
-        "typescript": ">=5.8 <6.0",
+        "@angular/compiler-cli": "^21.0.0",
+        "typescript": ">=5.9 <6.0",
         "webpack": "^5.54.0"
       }
     },
-    "node_modules/@nodelib/fs.scandir": {
-      "version": "2.1.5",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
-      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+    "node_modules/@noble/hashes": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-1.4.0.tgz",
+      "integrity": "sha512-V1JJ1WTRUqHHrOSh597hURcMqVKVGL/ea3kv0gSnEdsEZ0/+VyPghM1lMNGc00z7CIQorSvbKpuJkxvuHbvdbg==",
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "@nodelib/fs.stat": "2.0.5",
-        "run-parallel": "^1.1.9"
+      "engines": {
+        "node": ">= 16"
       },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/@nodelib/fs.stat": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
-      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/@nodelib/fs.walk": {
-      "version": "1.2.8",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
-      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@nodelib/fs.scandir": "2.1.5",
-        "fastq": "^1.6.0"
-      },
-      "engines": {
-        "node": ">= 8"
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
       }
     },
     "node_modules/@npmcli/agent": {
@@ -4606,16 +4627,6 @@
         "node": "^20.17.0 || >=22.9.0"
       }
     },
-    "node_modules/@npmcli/git/node_modules/ini": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/ini/-/ini-6.0.0.tgz",
-      "integrity": "sha512-IBTdIkzZNOpqm7q3dRqJvMaldXjDHWkEDfrwGEQTs5eaQMWV+djAhR+wahyNNMAa+qpbDUhBMVt4ZKNwpPm7xQ==",
-      "dev": true,
-      "license": "ISC",
-      "engines": {
-        "node": "^20.17.0 || >=22.9.0"
-      }
-    },
     "node_modules/@npmcli/git/node_modules/isexe": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-4.0.0.tgz",
@@ -4636,16 +4647,6 @@
         "node": "20 || >=22"
       }
     },
-    "node_modules/@npmcli/git/node_modules/proc-log": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/proc-log/-/proc-log-6.1.0.tgz",
-      "integrity": "sha512-iG+GYldRf2BQ0UDUAd6JQ/RwzaQy6mXmsk/IzlYyal4A4SNFw54MeH4/tLkF4I5WoWG9SQwuqWzS99jaFQHBuQ==",
-      "dev": true,
-      "license": "ISC",
-      "engines": {
-        "node": "^20.17.0 || >=22.9.0"
-      }
-    },
     "node_modules/@npmcli/git/node_modules/which": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/which/-/which-6.0.1.tgz",
@@ -4708,16 +4709,6 @@
         "node": "^20.17.0 || >=22.9.0"
       }
     },
-    "node_modules/@npmcli/package-json/node_modules/proc-log": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/proc-log/-/proc-log-6.1.0.tgz",
-      "integrity": "sha512-iG+GYldRf2BQ0UDUAd6JQ/RwzaQy6mXmsk/IzlYyal4A4SNFw54MeH4/tLkF4I5WoWG9SQwuqWzS99jaFQHBuQ==",
-      "dev": true,
-      "license": "ISC",
-      "engines": {
-        "node": "^20.17.0 || >=22.9.0"
-      }
-    },
     "node_modules/@npmcli/promise-spawn": {
       "version": "9.0.1",
       "resolved": "https://registry.npmjs.org/@npmcli/promise-spawn/-/promise-spawn-9.0.1.tgz",
@@ -4784,14 +4775,14 @@
         "node": "^20.17.0 || >=22.9.0"
       }
     },
-    "node_modules/@npmcli/run-script/node_modules/proc-log": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/proc-log/-/proc-log-6.1.0.tgz",
-      "integrity": "sha512-iG+GYldRf2BQ0UDUAd6JQ/RwzaQy6mXmsk/IzlYyal4A4SNFw54MeH4/tLkF4I5WoWG9SQwuqWzS99jaFQHBuQ==",
+    "node_modules/@oxc-project/types": {
+      "version": "0.113.0",
+      "resolved": "https://registry.npmjs.org/@oxc-project/types/-/types-0.113.0.tgz",
+      "integrity": "sha512-Tp3XmgxwNQ9pEN9vxgJBAqdRamHibi76iowQ38O2I4PMpcvNRQNVsU2n1x1nv9yh0XoTrGFzf7cZSGxmixxrhA==",
       "dev": true,
-      "license": "ISC",
-      "engines": {
-        "node": "^20.17.0 || >=22.9.0"
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/Boshen"
       }
     },
     "node_modules/@parcel/watcher": {
@@ -5112,6 +5103,175 @@
       "license": "MIT",
       "optional": true
     },
+    "node_modules/@peculiar/asn1-cms": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/@peculiar/asn1-cms/-/asn1-cms-2.7.0.tgz",
+      "integrity": "sha512-hew63shtzzvBcSHbhm+cyAmKe6AIfinT9hzEqSPjDC6opTTMKmTkQ0gHuN2KsWlvqiKw1S/fS94fhag/FJkioQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@peculiar/asn1-schema": "^2.7.0",
+        "@peculiar/asn1-x509": "^2.7.0",
+        "@peculiar/asn1-x509-attr": "^2.7.0",
+        "asn1js": "^3.0.6",
+        "tslib": "^2.8.1"
+      }
+    },
+    "node_modules/@peculiar/asn1-csr": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/@peculiar/asn1-csr/-/asn1-csr-2.7.0.tgz",
+      "integrity": "sha512-VVsAyGqErT9D1SY4aEqozThXMVI+ssVRiv2DDeYuvpBKLIgZ3hYs3Ay3u/VSoKq6ESFi9cf6rf3IOOzfwh7oMA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@peculiar/asn1-schema": "^2.7.0",
+        "@peculiar/asn1-x509": "^2.7.0",
+        "asn1js": "^3.0.6",
+        "tslib": "^2.8.1"
+      }
+    },
+    "node_modules/@peculiar/asn1-ecc": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/@peculiar/asn1-ecc/-/asn1-ecc-2.7.0.tgz",
+      "integrity": "sha512-n7KEs/Q/wrB415cxy4fHOBhegp4NdJ15fkJPwcB/3/8iNBQC2L/N7SChJPKDJPZGYH0jD4Tg4/0vnHmwghnbKw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@peculiar/asn1-schema": "^2.7.0",
+        "@peculiar/asn1-x509": "^2.7.0",
+        "asn1js": "^3.0.6",
+        "tslib": "^2.8.1"
+      }
+    },
+    "node_modules/@peculiar/asn1-pfx": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/@peculiar/asn1-pfx/-/asn1-pfx-2.7.0.tgz",
+      "integrity": "sha512-V/nrlQVmhg7lYAsM7E13UDL5erAwFv6kCIVFqNaMIHSVi7dngcT839JkRTkQBqznMG98l2XjxYk74ZztAohZzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@peculiar/asn1-cms": "^2.7.0",
+        "@peculiar/asn1-pkcs8": "^2.7.0",
+        "@peculiar/asn1-rsa": "^2.7.0",
+        "@peculiar/asn1-schema": "^2.7.0",
+        "asn1js": "^3.0.6",
+        "tslib": "^2.8.1"
+      }
+    },
+    "node_modules/@peculiar/asn1-pkcs8": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/@peculiar/asn1-pkcs8/-/asn1-pkcs8-2.7.0.tgz",
+      "integrity": "sha512-9GTl1nE8Mx1kTZ+7QyYatDyKsm34QcWRBFkY1iPvWC3X4Dona5s/tlLiQsx5WzVdZqiMBZNYT0buyw4/vbhnjw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@peculiar/asn1-schema": "^2.7.0",
+        "@peculiar/asn1-x509": "^2.7.0",
+        "asn1js": "^3.0.6",
+        "tslib": "^2.8.1"
+      }
+    },
+    "node_modules/@peculiar/asn1-pkcs9": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/@peculiar/asn1-pkcs9/-/asn1-pkcs9-2.7.0.tgz",
+      "integrity": "sha512-Bh7m+OuIaSEllPQcSd9OSp93F4ROWH7sbITWV8MI+8dwsjE5111/87VxiWVvYFKyww3vp39geLv9ENqhwWHcew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@peculiar/asn1-cms": "^2.7.0",
+        "@peculiar/asn1-pfx": "^2.7.0",
+        "@peculiar/asn1-pkcs8": "^2.7.0",
+        "@peculiar/asn1-schema": "^2.7.0",
+        "@peculiar/asn1-x509": "^2.7.0",
+        "@peculiar/asn1-x509-attr": "^2.7.0",
+        "asn1js": "^3.0.6",
+        "tslib": "^2.8.1"
+      }
+    },
+    "node_modules/@peculiar/asn1-rsa": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/@peculiar/asn1-rsa/-/asn1-rsa-2.7.0.tgz",
+      "integrity": "sha512-/qvENQrXyTZURjMqSeofHul0JJt2sNSzSwk36pl2olkHbaioMQgrASDZAlHXl0xUlnVbHj0uGgOrBMTb5x2aJQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@peculiar/asn1-schema": "^2.7.0",
+        "@peculiar/asn1-x509": "^2.7.0",
+        "asn1js": "^3.0.6",
+        "tslib": "^2.8.1"
+      }
+    },
+    "node_modules/@peculiar/asn1-schema": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/@peculiar/asn1-schema/-/asn1-schema-2.7.0.tgz",
+      "integrity": "sha512-W8ZfWzLmQnrcky+eh3tni4IozMdqBDiHWU0N+vve/UGjMaUs8c0L7A2oEdkBXS8rTpWDpK/aoI3DG/L/hxmxPg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@peculiar/utils": "^2.0.2",
+        "asn1js": "^3.0.6",
+        "tslib": "^2.8.1"
+      }
+    },
+    "node_modules/@peculiar/asn1-x509": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/@peculiar/asn1-x509/-/asn1-x509-2.7.0.tgz",
+      "integrity": "sha512-mUn9RRrkGDnG4ALfunDmzyRW5dg+sWCj/pfnCCqEHYbkGxEpvUt6iVJv8Yw1cyp6SWZ26ZE5oSmI5SqEaen15g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@peculiar/asn1-schema": "^2.7.0",
+        "@peculiar/utils": "^2.0.2",
+        "asn1js": "^3.0.6",
+        "tslib": "^2.8.1"
+      }
+    },
+    "node_modules/@peculiar/asn1-x509-attr": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/@peculiar/asn1-x509-attr/-/asn1-x509-attr-2.7.0.tgz",
+      "integrity": "sha512-NS8e7SOgXipkzUPLF/sce7ukpMpWjhxYsH0n6Y+bHYo4TTxOb95Zv7hqwSuL212mj5YxovjdOKQOgH1As3E94w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@peculiar/asn1-schema": "^2.7.0",
+        "@peculiar/asn1-x509": "^2.7.0",
+        "asn1js": "^3.0.6",
+        "tslib": "^2.8.1"
+      }
+    },
+    "node_modules/@peculiar/utils": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@peculiar/utils/-/utils-2.0.3.tgz",
+      "integrity": "sha512-+oL3HPFRIZ1St2K50lWCXiioIgSoxzz7R1J3uF6neO2yl1sgmpgY6XXJH4BdpoDkMWznQTeYF6oWNDZLCdQ4eQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.8.1"
+      }
+    },
+    "node_modules/@peculiar/x509": {
+      "version": "1.14.3",
+      "resolved": "https://registry.npmjs.org/@peculiar/x509/-/x509-1.14.3.tgz",
+      "integrity": "sha512-C2Xj8FZ0uHWeCXXqX5B4/gVFQmtSkiuOolzAgutjTfseNOHT3pUjljDZsTSxXFGgio54bCzVFqmEOUrIVk8RDA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@peculiar/asn1-cms": "^2.6.0",
+        "@peculiar/asn1-csr": "^2.6.0",
+        "@peculiar/asn1-ecc": "^2.6.0",
+        "@peculiar/asn1-pkcs9": "^2.6.0",
+        "@peculiar/asn1-rsa": "^2.6.0",
+        "@peculiar/asn1-schema": "^2.6.0",
+        "@peculiar/asn1-x509": "^2.6.0",
+        "pvtsutils": "^1.3.6",
+        "reflect-metadata": "^0.2.2",
+        "tslib": "^2.8.1",
+        "tsyringe": "^4.10.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
     "node_modules/@playwright/test": {
       "version": "1.59.1",
       "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.59.1.tgz",
@@ -5128,10 +5288,238 @@
         "node": ">=18"
       }
     },
+    "node_modules/@rolldown/binding-android-arm64": {
+      "version": "1.0.0-rc.4",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.0.0-rc.4.tgz",
+      "integrity": "sha512-vRq9f4NzvbdZavhQbjkJBx7rRebDKYR9zHfO/Wg486+I7bSecdUapzCm5cyXoK+LHokTxgSq7A5baAXUZkIz0w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-darwin-arm64": {
+      "version": "1.0.0-rc.4",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-arm64/-/binding-darwin-arm64-1.0.0-rc.4.tgz",
+      "integrity": "sha512-kFgEvkWLqt3YCgKB5re9RlIrx9bRsvyVUnaTakEpOPuLGzLpLapYxE9BufJNvPg8GjT6mB1alN4yN1NjzoeM8Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-darwin-x64": {
+      "version": "1.0.0-rc.4",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-x64/-/binding-darwin-x64-1.0.0-rc.4.tgz",
+      "integrity": "sha512-JXmaOJGsL/+rsmMfutcDjxWM2fTaVgCHGoXS7nE8Z3c9NAYjGqHvXrAhMUZvMpHS/k7Mg+X7n/MVKb7NYWKKww==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-freebsd-x64": {
+      "version": "1.0.0-rc.4",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-freebsd-x64/-/binding-freebsd-x64-1.0.0-rc.4.tgz",
+      "integrity": "sha512-ep3Catd6sPnHTM0P4hNEvIv5arnDvk01PfyJIJ+J3wVCG1eEaPo09tvFqdtcaTrkwQy0VWR24uz+cb4IsK53Qw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm-gnueabihf": {
+      "version": "1.0.0-rc.4",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-1.0.0-rc.4.tgz",
+      "integrity": "sha512-LwA5ayKIpnsgXJEwWc3h8wPiS33NMIHd9BhsV92T8VetVAbGe2qXlJwNVDGHN5cOQ22R9uYvbrQir2AB+ntT2w==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm64-gnu": {
+      "version": "1.0.0-rc.4",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.0.0-rc.4.tgz",
+      "integrity": "sha512-AC1WsGdlV1MtGay/OQ4J9T7GRadVnpYRzTcygV1hKnypbYN20Yh4t6O1Sa2qRBMqv1etulUknqXjc3CTIsBu6A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm64-musl": {
+      "version": "1.0.0-rc.4",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-musl/-/binding-linux-arm64-musl-1.0.0-rc.4.tgz",
+      "integrity": "sha512-lU+6rgXXViO61B4EudxtVMXSOfiZONR29Sys5VGSetUY7X8mg9FCKIIjcPPj8xNDeYzKl+H8F/qSKOBVFJChCQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-x64-gnu": {
+      "version": "1.0.0-rc.4",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.0.0-rc.4.tgz",
+      "integrity": "sha512-DZaN1f0PGp/bSvKhtw50pPsnln4T13ycDq1FrDWRiHmWt1JeW+UtYg9touPFf8yt993p8tS2QjybpzKNTxYEwg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-x64-musl": {
+      "version": "1.0.0-rc.4",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-musl/-/binding-linux-x64-musl-1.0.0-rc.4.tgz",
+      "integrity": "sha512-RnGxwZLN7fhMMAItnD6dZ7lvy+TI7ba+2V54UF4dhaWa/p8I/ys1E73KO6HmPmgz92ZkfD8TXS1IMV8+uhbR9g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-openharmony-arm64": {
+      "version": "1.0.0-rc.4",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-openharmony-arm64/-/binding-openharmony-arm64-1.0.0-rc.4.tgz",
+      "integrity": "sha512-6lcI79+X8klGiGd8yHuTgQRjuuJYNggmEml+RsyN596P23l/zf9FVmJ7K0KVKkFAeYEdg0iMUKyIxiV5vebDNQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-wasm32-wasi": {
+      "version": "1.0.0-rc.4",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-wasm32-wasi/-/binding-wasm32-wasi-1.0.0-rc.4.tgz",
+      "integrity": "sha512-wz7ohsKCAIWy91blZ/1FlpPdqrsm1xpcEOQVveWoL6+aSPKL4VUcoYmmzuLTssyZxRpEwzuIxL/GDsvpjaBtOw==",
+      "cpu": [
+        "wasm32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@napi-rs/wasm-runtime": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@rolldown/binding-win32-arm64-msvc": {
+      "version": "1.0.0-rc.4",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.0.0-rc.4.tgz",
+      "integrity": "sha512-cfiMrfuWCIgsFmcVG0IPuO6qTRHvF7NuG3wngX1RZzc6dU8FuBFb+J3MIR5WrdTNozlumfgL4cvz+R4ozBCvsQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-win32-x64-msvc": {
+      "version": "1.0.0-rc.4",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-x64-msvc/-/binding-win32-x64-msvc-1.0.0-rc.4.tgz",
+      "integrity": "sha512-p6UeR9y7ht82AH57qwGuFYn69S6CZ7LLKdCKy/8T3zS9VTrJei2/CGsTUV45Da4Z9Rbhc7G4gyWQ/Ioamqn09g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/pluginutils": {
+      "version": "1.0.0-rc.4",
+      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-rc.4.tgz",
+      "integrity": "sha512-1BrrmTu0TWfOP1riA8uakjFc9bpIUGzVKETsOtzY39pPga8zELGDl8eu1Dx7/gjM5CAz14UknsUMpBO8L+YntQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.59.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.59.0.tgz",
-      "integrity": "sha512-upnNBkA6ZH2VKGcBj9Fyl9IGNPULcjXRlg0LLeaioQWueH30p6IXtJEbKAgvyv+mJaMxSm1l6xwDXYjpEMiLMg==",
+      "version": "4.61.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.61.1.tgz",
+      "integrity": "sha512-JnBB8MdXj45cajvTuO5FmPlvFVJRQgvrz1uSEl3NwqFnReAPGwb8EanbGi4z2nRaqLzjJSv5/JmycoTKlRZxHA==",
       "cpu": [
         "arm"
       ],
@@ -5143,9 +5531,9 @@
       ]
     },
     "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.59.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.59.0.tgz",
-      "integrity": "sha512-hZ+Zxj3SySm4A/DylsDKZAeVg0mvi++0PYVceVyX7hemkw7OreKdCvW2oQ3T1FMZvCaQXqOTHb8qmBShoqk69Q==",
+      "version": "4.61.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.61.1.tgz",
+      "integrity": "sha512-Jx2g7iSjw4AOT0HDPHM9RV3GNjRXwybWtSFZiZAYUTjUwjVrYIwq3kBf+LnhqJlzXFAqTAh2F7IGI+O568exPw==",
       "cpu": [
         "arm64"
       ],
@@ -5157,9 +5545,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.59.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.59.0.tgz",
-      "integrity": "sha512-W2Psnbh1J8ZJw0xKAd8zdNgF9HRLkdWwwdWqubSVk0pUuQkoHnv7rx4GiF9rT4t5DIZGAsConRE3AxCdJ4m8rg==",
+      "version": "4.61.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.61.1.tgz",
+      "integrity": "sha512-0F1L/Z3Eqv8mT2n3dCpeO8GcTvHvVqkP5/t6DMsn0KzhYVcg+s7Ncl5DS8qjKYEeio6Az0Gt6nyBORay5qIlCA==",
       "cpu": [
         "arm64"
       ],
@@ -5171,9 +5559,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.59.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.59.0.tgz",
-      "integrity": "sha512-ZW2KkwlS4lwTv7ZVsYDiARfFCnSGhzYPdiOU4IM2fDbL+QGlyAbjgSFuqNRbSthybLbIJ915UtZBtmuLrQAT/w==",
+      "version": "4.61.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.61.1.tgz",
+      "integrity": "sha512-qLttcH871ujY4YcVfUSShhOw+CsoTatYz8gRbHO7Bb92QH059/P0y5do1KMs41fY0BpD2x4AJH/gID0zFiqVKQ==",
       "cpu": [
         "x64"
       ],
@@ -5185,9 +5573,9 @@
       ]
     },
     "node_modules/@rollup/rollup-freebsd-arm64": {
-      "version": "4.59.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.59.0.tgz",
-      "integrity": "sha512-EsKaJ5ytAu9jI3lonzn3BgG8iRBjV4LxZexygcQbpiU0wU0ATxhNVEpXKfUa0pS05gTcSDMKpn3Sx+QB9RlTTA==",
+      "version": "4.61.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.61.1.tgz",
+      "integrity": "sha512-fUI4RapGE0Oh3mb8mgfvC1O2nU1RpDZUKnDQm3xB1Ipg7C2wTs5Kstz7G2uWK99a8S2yTMq8/P4uycwNa0nJyw==",
       "cpu": [
         "arm64"
       ],
@@ -5199,9 +5587,9 @@
       ]
     },
     "node_modules/@rollup/rollup-freebsd-x64": {
-      "version": "4.59.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.59.0.tgz",
-      "integrity": "sha512-d3DuZi2KzTMjImrxoHIAODUZYoUUMsuUiY4SRRcJy6NJoZ6iIqWnJu9IScV9jXysyGMVuW+KNzZvBLOcpdl3Vg==",
+      "version": "4.61.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.61.1.tgz",
+      "integrity": "sha512-H5YrdvJaDtI/U9/emrD4b++xkvp3y/JvOe4rizHbxvkyMfRS/CiRYdji+Pl8D0brEaNFWUh1drQxgAGIl6Xudw==",
       "cpu": [
         "x64"
       ],
@@ -5213,9 +5601,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.59.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.59.0.tgz",
-      "integrity": "sha512-t4ONHboXi/3E0rT6OZl1pKbl2Vgxf9vJfWgmUoCEVQVxhW6Cw/c8I6hbbu7DAvgp82RKiH7TpLwxnJeKv2pbsw==",
+      "version": "4.61.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.61.1.tgz",
+      "integrity": "sha512-Q8CBCCQtDFrYtXoeUXSrnFXKOnyUhx6bz+SkL6A0E7V8kAiCJ5pamq1WtbfpVGhR5TSpXY6ak3avmDc5fHTyJA==",
       "cpu": [
         "arm"
       ],
@@ -5227,9 +5615,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-musleabihf": {
-      "version": "4.59.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.59.0.tgz",
-      "integrity": "sha512-CikFT7aYPA2ufMD086cVORBYGHffBo4K8MQ4uPS/ZnY54GKj36i196u8U+aDVT2LX4eSMbyHtyOh7D7Zvk2VvA==",
+      "version": "4.61.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.61.1.tgz",
+      "integrity": "sha512-nwnhk1581l0FBVellGcVCAT0Oi06onEA3WB53sf01VO3I0UPBkMH9sXONYME2K0ovXcNayJfNtHfm6mpJElatQ==",
       "cpu": [
         "arm"
       ],
@@ -5241,9 +5629,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.59.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.59.0.tgz",
-      "integrity": "sha512-jYgUGk5aLd1nUb1CtQ8E+t5JhLc9x5WdBKew9ZgAXg7DBk0ZHErLHdXM24rfX+bKrFe+Xp5YuJo54I5HFjGDAA==",
+      "version": "4.61.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.61.1.tgz",
+      "integrity": "sha512-x5Xr49hwt3hdW75UOZm3395YwwzPyauktslv29KpWL/T+vVAzoT3azLcTWv0eMciBNrx+DYjH4paehHoLpPvpg==",
       "cpu": [
         "arm64"
       ],
@@ -5255,9 +5643,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.59.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.59.0.tgz",
-      "integrity": "sha512-peZRVEdnFWZ5Bh2KeumKG9ty7aCXzzEsHShOZEFiCQlDEepP1dpUl/SrUNXNg13UmZl+gzVDPsiCwnV1uI0RUA==",
+      "version": "4.61.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.61.1.tgz",
+      "integrity": "sha512-unMS3H73DpaoPyyEVPjGKleM/s0mkmsauTENpw4INQY8y4+IuLNjkueQ5QCtC0D3N38Y38yhAU8OoZ20S2Tm6w==",
       "cpu": [
         "arm64"
       ],
@@ -5269,9 +5657,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-loong64-gnu": {
-      "version": "4.59.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.59.0.tgz",
-      "integrity": "sha512-gbUSW/97f7+r4gHy3Jlup8zDG190AuodsWnNiXErp9mT90iCy9NKKU0Xwx5k8VlRAIV2uU9CsMnEFg/xXaOfXg==",
+      "version": "4.61.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.61.1.tgz",
+      "integrity": "sha512-zNZzGRnAhwjFEYmvphJRV5XaQGjs62cCmeYYHUT//NbvEnHauw+I85nGG+SiVg5ld4GX8D1IbKIX+ozITQnhMQ==",
       "cpu": [
         "loong64"
       ],
@@ -5283,9 +5671,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-loong64-musl": {
-      "version": "4.59.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.59.0.tgz",
-      "integrity": "sha512-yTRONe79E+o0FWFijasoTjtzG9EBedFXJMl888NBEDCDV9I2wGbFFfJQQe63OijbFCUZqxpHz1GzpbtSFikJ4Q==",
+      "version": "4.61.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.61.1.tgz",
+      "integrity": "sha512-LdpWGL8X209B2SIvWjqlc8VZgM6PKfontSerGepuldQmHYrAOtnMCXeJkxXGbC+PPZVOuu5czJo7fNV6aeW8rQ==",
       "cpu": [
         "loong64"
       ],
@@ -5297,9 +5685,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-ppc64-gnu": {
-      "version": "4.59.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.59.0.tgz",
-      "integrity": "sha512-sw1o3tfyk12k3OEpRddF68a1unZ5VCN7zoTNtSn2KndUE+ea3m3ROOKRCZxEpmT9nsGnogpFP9x6mnLTCaoLkA==",
+      "version": "4.61.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.61.1.tgz",
+      "integrity": "sha512-EC5kTtNaNGOmbMGqar8dvJy6y/hg99GAwjfBz++pxZhQATXGcRjd6c5en5wcbru0vkRmiMGsQKdMJOOf6sza4g==",
       "cpu": [
         "ppc64"
       ],
@@ -5311,9 +5699,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-ppc64-musl": {
-      "version": "4.59.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.59.0.tgz",
-      "integrity": "sha512-+2kLtQ4xT3AiIxkzFVFXfsmlZiG5FXYW7ZyIIvGA7Bdeuh9Z0aN4hVyXS/G1E9bTP/vqszNIN/pUKCk/BTHsKA==",
+      "version": "4.61.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.61.1.tgz",
+      "integrity": "sha512-8hiwp6D4acEcNK78I4rP0/XtS1sknWIAMJBPdR4l6zUtyTm5KiTDr5bXmWt4foY7nAN7AThDHgkLIEZOWKbzWw==",
       "cpu": [
         "ppc64"
       ],
@@ -5325,9 +5713,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.59.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.59.0.tgz",
-      "integrity": "sha512-NDYMpsXYJJaj+I7UdwIuHHNxXZ/b/N2hR15NyH3m2qAtb/hHPA4g4SuuvrdxetTdndfj9b1WOmy73kcPRoERUg==",
+      "version": "4.61.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.61.1.tgz",
+      "integrity": "sha512-10dh/h/BqA7DuMPWSxkR8uks18FRwnwOEqr5zOTEl+NOwP/OMzKX8OFR/Of9xxDA7D5qef1Nzar5WDD2kCCr1g==",
       "cpu": [
         "riscv64"
       ],
@@ -5339,9 +5727,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-musl": {
-      "version": "4.59.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.59.0.tgz",
-      "integrity": "sha512-nLckB8WOqHIf1bhymk+oHxvM9D3tyPndZH8i8+35p/1YiVoVswPid2yLzgX7ZJP0KQvnkhM4H6QZ5m0LzbyIAg==",
+      "version": "4.61.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.61.1.tgz",
+      "integrity": "sha512-YKJ5lg35DP17gcAOggnihe+APw9HLyj1Xn7gsmGumBJAUDa6NGXNixJzmkWLhcK9TOuuyQjdamzvJefkO7qHZQ==",
       "cpu": [
         "riscv64"
       ],
@@ -5353,9 +5741,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-s390x-gnu": {
-      "version": "4.59.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.59.0.tgz",
-      "integrity": "sha512-oF87Ie3uAIvORFBpwnCvUzdeYUqi2wY6jRFWJAy1qus/udHFYIkplYRW+wo+GRUP4sKzYdmE1Y3+rY5Gc4ZO+w==",
+      "version": "4.61.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.61.1.tgz",
+      "integrity": "sha512-Mlil5G2Jj6a7B3LWGctg+XPL9vdXYuzCtNXfxOQ0nPjc2m6ueUktocPGH9bnAM0bNRKb/bAWTujUU7IJQdQA+g==",
       "cpu": [
         "s390x"
       ],
@@ -5367,9 +5755,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.59.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.59.0.tgz",
-      "integrity": "sha512-3AHmtQq/ppNuUspKAlvA8HtLybkDflkMuLK4DPo77DfthRb71V84/c4MlWJXixZz4uruIH4uaa07IqoAkG64fg==",
+      "version": "4.61.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.61.1.tgz",
+      "integrity": "sha512-bVWIOIk6pV01p4CdUbPP7CJ/434z+OooYjDuFcR+44N35YvKUC66G8MGnvcWx5mWKW3g61J+t74l3Kj15Kwn2Q==",
       "cpu": [
         "x64"
       ],
@@ -5381,9 +5769,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.59.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.59.0.tgz",
-      "integrity": "sha512-2UdiwS/9cTAx7qIUZB/fWtToJwvt0Vbo0zmnYt7ED35KPg13Q0ym1g442THLC7VyI6JfYTP4PiSOWyoMdV2/xg==",
+      "version": "4.61.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.61.1.tgz",
+      "integrity": "sha512-qy5pBvZbqNFheBz61R1rzsezjm0J7O2oNGoWtGoY89SZYLUfxAJTBAqDChqAIdB4rCiIbi9nF7yZ83GnNiLwSw==",
       "cpu": [
         "x64"
       ],
@@ -5395,9 +5783,9 @@
       ]
     },
     "node_modules/@rollup/rollup-openbsd-x64": {
-      "version": "4.59.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.59.0.tgz",
-      "integrity": "sha512-M3bLRAVk6GOwFlPTIxVBSYKUaqfLrn8l0psKinkCFxl4lQvOSz8ZrKDz2gxcBwHFpci0B6rttydI4IpS4IS/jQ==",
+      "version": "4.61.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.61.1.tgz",
+      "integrity": "sha512-E83TXjI4zm0+5f2qO+UOudaCYIhYwpJ5jq6YCZNIZ+6CbfhKrkAGezeiASBL9ElxAxFsRS9ZhESv8mfnj6TKeg==",
       "cpu": [
         "x64"
       ],
@@ -5409,9 +5797,9 @@
       ]
     },
     "node_modules/@rollup/rollup-openharmony-arm64": {
-      "version": "4.59.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.59.0.tgz",
-      "integrity": "sha512-tt9KBJqaqp5i5HUZzoafHZX8b5Q2Fe7UjYERADll83O4fGqJ49O1FsL6LpdzVFQcpwvnyd0i+K/VSwu/o/nWlA==",
+      "version": "4.61.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.61.1.tgz",
+      "integrity": "sha512-fbWnKqVkjrJN38vNe3ahkbk6iejS/3b0Nt7EEtPpE6RBacZcGXNKbzfHN3GUUlXOPghUg0j6XUGrtjX9z1sIvA==",
       "cpu": [
         "arm64"
       ],
@@ -5423,9 +5811,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.59.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.59.0.tgz",
-      "integrity": "sha512-V5B6mG7OrGTwnxaNUzZTDTjDS7F75PO1ae6MJYdiMu60sq0CqN5CVeVsbhPxalupvTX8gXVSU9gq+Rx1/hvu6A==",
+      "version": "4.61.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.61.1.tgz",
+      "integrity": "sha512-ArMl38iVAbk0New1ogihQNY6iphLi4ZaRsa037gUzv5yeKPY8TD3Dmy4x2RNC1VztU/uqm+G+/RwFrSka3Oy2g==",
       "cpu": [
         "arm64"
       ],
@@ -5437,9 +5825,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.59.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.59.0.tgz",
-      "integrity": "sha512-UKFMHPuM9R0iBegwzKF4y0C4J9u8C6MEJgFuXTBerMk7EJ92GFVFYBfOZaSGLu6COf7FxpQNqhNS4c4icUPqxA==",
+      "version": "4.61.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.61.1.tgz",
+      "integrity": "sha512-0mYtjHS9ucAbcATycCNK9IGBk/cCe/ma7EmSLGZdsxnOA8cjRIyU04wDpVAD9NiOfLUR9KTxdiO53uOkherqjQ==",
       "cpu": [
         "ia32"
       ],
@@ -5451,9 +5839,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-gnu": {
-      "version": "4.59.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.59.0.tgz",
-      "integrity": "sha512-laBkYlSS1n2L8fSo1thDNGrCTQMmxjYY5G0WFWjFFYZkKPjsMBsgJfGf4TLxXrF6RyhI60L8TMOjBMvXiTcxeA==",
+      "version": "4.61.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.61.1.tgz",
+      "integrity": "sha512-gK1iCEPfpoSG9wfBihXxvBMi8ZfcWffYkEsC/Eih+iFENTaewvNcrEQ69lIOWYO5pePHKLHHO7nq5AILGO/HQQ==",
       "cpu": [
         "x64"
       ],
@@ -5465,9 +5853,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.59.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.59.0.tgz",
-      "integrity": "sha512-2HRCml6OztYXyJXAvdDXPKcawukWY2GpR5/nxKp4iBgiO3wcoEGkAaqctIbZcNB6KlUQBIqt8VYkNSj2397EfA==",
+      "version": "4.61.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.61.1.tgz",
+      "integrity": "sha512-X+zaP2x+j4RXGfbp/seSoRHWnPxzApilDszisZxbYH5C/jTxFhCtDNdPGZb9lJyYPs24wGxruPF7Y+sIXt9Gzw==",
       "cpu": [
         "x64"
       ],
@@ -5479,14 +5867,14 @@
       ]
     },
     "node_modules/@schematics/angular": {
-      "version": "20.3.27",
-      "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-20.3.27.tgz",
-      "integrity": "sha512-HGwM7Rr2Yburrp89Rez96KLylwz+fhqRFOrh2BoGF6ztyYxNr45t7ro8HJvaSEELMC1mefXsW5n5xzl3jsastw==",
+      "version": "21.2.14",
+      "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-21.2.14.tgz",
+      "integrity": "sha512-rIEdtNTdCCTwuo7B4tMoq5qmbLXdBgmW6Ays1hyno//4OE+HFtvlWZd+hl6KceEyN00IcZ2HRaPnfd71E1JnoA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@angular-devkit/core": "20.3.27",
-        "@angular-devkit/schematics": "20.3.27",
+        "@angular-devkit/core": "21.2.14",
+        "@angular-devkit/schematics": "21.2.14",
         "jsonc-parser": "3.3.1"
       },
       "engines": {
@@ -5546,16 +5934,6 @@
         "node": "^20.17.0 || >=22.9.0"
       }
     },
-    "node_modules/@sigstore/sign/node_modules/proc-log": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/proc-log/-/proc-log-6.1.0.tgz",
-      "integrity": "sha512-iG+GYldRf2BQ0UDUAd6JQ/RwzaQy6mXmsk/IzlYyal4A4SNFw54MeH4/tLkF4I5WoWG9SQwuqWzS99jaFQHBuQ==",
-      "dev": true,
-      "license": "ISC",
-      "engines": {
-        "node": "^20.17.0 || >=22.9.0"
-      }
-    },
     "node_modules/@sigstore/tuf": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/@sigstore/tuf/-/tuf-4.0.2.tgz",
@@ -5585,6 +5963,12 @@
         "node": "^20.17.0 || >=22.9.0"
       }
     },
+    "node_modules/@standard-schema/spec": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
+      "integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==",
+      "license": "MIT"
+    },
     "node_modules/@tufjs/canonical-json": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@tufjs/canonical-json/-/canonical-json-2.0.0.tgz",
@@ -5609,6 +5993,17 @@
         "node": "^20.17.0 || >=22.9.0"
       }
     },
+    "node_modules/@tybys/wasm-util": {
+      "version": "0.10.2",
+      "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.2.tgz",
+      "integrity": "sha512-RoBvJ2X0wuKlWFIjrwffGw1IqZHKQqzIchKaadZZfnNpsAYp2mM0h36JtPCjNDAHGgYez/15uMBpfGwchhiMgg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/@types/body-parser": {
       "version": "1.19.6",
       "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.6.tgz",
@@ -5674,9 +6069,9 @@
       }
     },
     "node_modules/@types/estree": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
-      "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.9.tgz",
+      "integrity": "sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==",
       "dev": true,
       "license": "MIT"
     },
@@ -5748,16 +6143,6 @@
         "undici-types": "~7.19.0"
       }
     },
-    "node_modules/@types/node-forge": {
-      "version": "1.3.14",
-      "resolved": "https://registry.npmjs.org/@types/node-forge/-/node-forge-1.3.14.tgz",
-      "integrity": "sha512-mhVF2BnD4BO+jtOp7z1CdzaK4mbuK0LLQYAvdOLqHTavxFNq4zA1EmYkpnFjP8HOUzedfQkRnp0E2ulSAYSzAw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@types/node": "*"
-      }
-    },
     "node_modules/@types/qs": {
       "version": "6.15.1",
       "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.15.1.tgz",
@@ -5850,9 +6235,9 @@
       }
     },
     "node_modules/@vitejs/plugin-basic-ssl": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/@vitejs/plugin-basic-ssl/-/plugin-basic-ssl-2.1.0.tgz",
-      "integrity": "sha512-dOxxrhgyDIEUADhb/8OlV9JIqYLgos03YorAueTIeOUskLJSEsfwCByjbu98ctXitUN3znXKp0bYD/WHSudCeA==",
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-basic-ssl/-/plugin-basic-ssl-2.1.4.tgz",
+      "integrity": "sha512-HXciTXN/sDBYWgeAD4V4s0DN0g72x5mlxQhHxtYu3Tt8BLa6MzcJZUyDVFCdtjNs3bfENVHVzOsmooTVuNgAAw==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -6211,26 +6596,26 @@
       }
     },
     "node_modules/algoliasearch": {
-      "version": "5.35.0",
-      "resolved": "https://registry.npmjs.org/algoliasearch/-/algoliasearch-5.35.0.tgz",
-      "integrity": "sha512-Y+moNhsqgLmvJdgTsO4GZNgsaDWv8AOGAaPeIeHKlDn/XunoAqYbA+XNpBd1dW8GOXAUDyxC9Rxc7AV4kpFcIg==",
+      "version": "5.48.1",
+      "resolved": "https://registry.npmjs.org/algoliasearch/-/algoliasearch-5.48.1.tgz",
+      "integrity": "sha512-Rf7xmeuIo7nb6S4mp4abW2faW8DauZyE2faBIKFaUfP3wnpOvNSbiI5AwVhqBNj0jPgBWEvhyCu0sLjN2q77Rg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@algolia/abtesting": "1.1.0",
-        "@algolia/client-abtesting": "5.35.0",
-        "@algolia/client-analytics": "5.35.0",
-        "@algolia/client-common": "5.35.0",
-        "@algolia/client-insights": "5.35.0",
-        "@algolia/client-personalization": "5.35.0",
-        "@algolia/client-query-suggestions": "5.35.0",
-        "@algolia/client-search": "5.35.0",
-        "@algolia/ingestion": "1.35.0",
-        "@algolia/monitoring": "1.35.0",
-        "@algolia/recommend": "5.35.0",
-        "@algolia/requester-browser-xhr": "5.35.0",
-        "@algolia/requester-fetch": "5.35.0",
-        "@algolia/requester-node-http": "5.35.0"
+        "@algolia/abtesting": "1.14.1",
+        "@algolia/client-abtesting": "5.48.1",
+        "@algolia/client-analytics": "5.48.1",
+        "@algolia/client-common": "5.48.1",
+        "@algolia/client-insights": "5.48.1",
+        "@algolia/client-personalization": "5.48.1",
+        "@algolia/client-query-suggestions": "5.48.1",
+        "@algolia/client-search": "5.48.1",
+        "@algolia/ingestion": "1.48.1",
+        "@algolia/monitoring": "1.48.1",
+        "@algolia/recommend": "5.48.1",
+        "@algolia/requester-browser-xhr": "5.48.1",
+        "@algolia/requester-fetch": "5.48.1",
+        "@algolia/requester-node-http": "5.48.1"
       },
       "engines": {
         "node": ">= 14.0.0"
@@ -6328,6 +6713,13 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "dev": true,
+      "license": "Python-2.0"
+    },
     "node_modules/array-flatten": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
@@ -6335,10 +6727,25 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/asn1js": {
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/asn1js/-/asn1js-3.0.10.tgz",
+      "integrity": "sha512-S2s3aOytiKdFRdulw2qPE51MzjzVOisppcVv7jVFR+Kw0kxwvFrDcYA0h7Ndqbmj0HkMIXYWaoj7fli8kgx1eg==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "pvtsutils": "^1.3.6",
+        "pvutils": "^1.1.5",
+        "tslib": "^2.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/autoprefixer": {
-      "version": "10.4.21",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.21.tgz",
-      "integrity": "sha512-O+A6LWV5LDHSJD3LjHYoNi4VLsj/Whi7k6zG12xTYaU4cQ8oxQGckXNX8cRHK5yOZ/ppVHe0ZBXGzSV9jXdVbQ==",
+      "version": "10.4.27",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.27.tgz",
+      "integrity": "sha512-NP9APE+tO+LuJGn7/9+cohklunJsXWiaWEfV3si4Gi/XHDwVNgkwr1J3RQYFIvPy76GmJ9/bW8vyoU1LcxwKHA==",
       "dev": true,
       "funding": [
         {
@@ -6356,10 +6763,9 @@
       ],
       "license": "MIT",
       "dependencies": {
-        "browserslist": "^4.24.4",
-        "caniuse-lite": "^1.0.30001702",
-        "fraction.js": "^4.3.7",
-        "normalize-range": "^0.1.2",
+        "browserslist": "^4.28.1",
+        "caniuse-lite": "^1.0.30001774",
+        "fraction.js": "^5.3.4",
         "picocolors": "^1.1.1",
         "postcss-value-parser": "^4.2.0"
       },
@@ -6473,9 +6879,9 @@
       "license": "MIT"
     },
     "node_modules/beasties": {
-      "version": "0.3.5",
-      "resolved": "https://registry.npmjs.org/beasties/-/beasties-0.3.5.tgz",
-      "integrity": "sha512-NaWu+f4YrJxEttJSm16AzMIFtVldCvaJ68b1L098KpqXmxt9xOLtKoLkKxb8ekhOrLqEJAbvT6n6SEvB/sac7A==",
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/beasties/-/beasties-0.4.1.tgz",
+      "integrity": "sha512-2Imdcw3LznDuxAbJM26RHniOLAzE6WgrK8OuvVXCQtNBS8rsnD9zsSEa3fHl4hHpUY7BYTlrpvtPVbvu9G6neg==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
@@ -6486,10 +6892,11 @@
         "htmlparser2": "^10.0.0",
         "picocolors": "^1.1.1",
         "postcss": "^8.4.49",
-        "postcss-media-query-parser": "^0.2.3"
+        "postcss-media-query-parser": "^0.2.3",
+        "postcss-safe-parser": "^7.0.1"
       },
       "engines": {
-        "node": ">=14.0.0"
+        "node": ">=18.0.0"
       }
     },
     "node_modules/big.js": {
@@ -6652,6 +7059,16 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/bytestreamjs": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/bytestreamjs/-/bytestreamjs-2.0.1.tgz",
+      "integrity": "sha512-U1Z/ob71V/bXfVABvNr/Kumf5VyeQRBEm6Txb0PQ6S7V5GpBM3w4Cbqz/xPDicR5tN0uvDifng8C+5qECeGwyQ==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/cacache": {
       "version": "20.0.4",
       "resolved": "https://registry.npmjs.org/cacache/-/cacache-20.0.4.tgz",
@@ -6767,16 +7184,17 @@
       "license": "MIT"
     },
     "node_modules/chokidar": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
-      "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-5.0.0.tgz",
+      "integrity": "sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
-        "readdirp": "^4.0.1"
+        "readdirp": "^5.0.0"
       },
       "engines": {
-        "node": ">= 14.16.0"
+        "node": ">= 20.19.0"
       },
       "funding": {
         "url": "https://paulmillr.com/funding/"
@@ -6819,30 +7237,47 @@
       }
     },
     "node_modules/cli-spinners": {
-      "version": "2.9.2",
-      "resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.9.2.tgz",
-      "integrity": "sha512-ywqV+5MmyL4E7ybXgKys4DugZbX0FC6LnwrhjuykIjnK9k8OQacQ7axGKnjDXWNhns0xot3bZI5h55H8yo9cJg==",
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-3.4.0.tgz",
+      "integrity": "sha512-bXfOC4QcT1tKXGorxL3wbJm6XJPDqEnij2gQ2m7ESQuE+/z9YFIWnl/5RpTiKWbMq3EVKR4fRLJGn6DVfu0mpw==",
       "dev": true,
       "license": "MIT",
       "engines": {
-        "node": ">=6"
+        "node": ">=18.20"
       },
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/cli-truncate": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/cli-truncate/-/cli-truncate-4.0.0.tgz",
-      "integrity": "sha512-nPdaFdQ0h/GEigbPClz11D0v/ZJEwxmeVZGeMo3Z5StPtUTkA9o1lD6QwoirYiSDzbcwn2XcjwmCp68W1IS4TA==",
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/cli-truncate/-/cli-truncate-5.2.0.tgz",
+      "integrity": "sha512-xRwvIOMGrfOAnM1JYtqQImuaNtDEv9v6oIYAs4LIHwTiKee8uwvIi363igssOC0O5U04i4AlENs79LQLu9tEMw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "slice-ansi": "^5.0.0",
-        "string-width": "^7.0.0"
+        "slice-ansi": "^8.0.0",
+        "string-width": "^8.2.0"
       },
       "engines": {
-        "node": ">=18"
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/cli-truncate/node_modules/string-width": {
+      "version": "8.2.1",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-8.2.1.tgz",
+      "integrity": "sha512-IIaP0g3iy9Cyy18w3M9YcaDudujEAVHKt3a3QJg1+sr/oX96TbaGUubG0hJyCjCBThFH+tFpcIyoUHUn1ogaLA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "get-east-asian-width": "^1.5.0",
+        "strip-ansi": "^7.1.2"
+      },
+      "engines": {
+        "node": ">=20"
       },
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
@@ -7150,9 +7585,9 @@
       }
     },
     "node_modules/cosmiconfig": {
-      "version": "9.0.1",
-      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-9.0.1.tgz",
-      "integrity": "sha512-hr4ihw+DBqcvrsEDioRO31Z17x71pUYoNe/4h6Z0wB72p7MU7/9gH8Q3s12NFhHPfYBBOV3qyfUxmr/Yn3shnQ==",
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-9.0.2.tgz",
+      "integrity": "sha512-gtTZxTDau1wL7Y7zifc2dd8jHSK/k6BTx/2Xp/BpdlAdnlYWFVt7qhJqgwi7637yRwRQ3qL4ZidbB4I8tA5VOg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -7176,26 +7611,6 @@
         }
       }
     },
-    "node_modules/cosmiconfig/node_modules/argparse": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
-      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-      "dev": true,
-      "license": "Python-2.0"
-    },
-    "node_modules/cosmiconfig/node_modules/js-yaml": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz",
-      "integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "argparse": "^2.0.1"
-      },
-      "bin": {
-        "js-yaml": "bin/js-yaml.js"
-      }
-    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -7212,20 +7627,20 @@
       }
     },
     "node_modules/css-loader": {
-      "version": "7.1.2",
-      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-7.1.2.tgz",
-      "integrity": "sha512-6WvYYn7l/XEGN8Xu2vWFt9nVzrCn39vKyTEFf/ExEyoksJjjSZV/0/35XPlMbpnr6VGhZIUg5yJrL8tGfes/FA==",
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-7.1.3.tgz",
+      "integrity": "sha512-frbERmjT0UC5lMheWpJmMilnt9GEhbZJN/heUb7/zaJYeIzj5St9HvDcfshzzOqbsS+rYpMk++2SD3vGETDSyA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "icss-utils": "^5.1.0",
-        "postcss": "^8.4.33",
+        "postcss": "^8.4.40",
         "postcss-modules-extract-imports": "^3.1.0",
         "postcss-modules-local-by-default": "^4.0.5",
         "postcss-modules-scope": "^3.2.0",
         "postcss-modules-values": "^4.0.0",
         "postcss-value-parser": "^4.2.0",
-        "semver": "^7.5.4"
+        "semver": "^7.6.3"
       },
       "engines": {
         "node": ">= 18.12.0"
@@ -7649,9 +8064,9 @@
       }
     },
     "node_modules/esbuild": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.28.0.tgz",
-      "integrity": "sha512-sNR9MHpXSUV/XB4zmsFKN+QgVG82Cc7+/aaxJ8Adi8hyOac+EXptIp45QBPaVyX3N70664wRbTcLTOemCAnyqw==",
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.27.3.tgz",
+      "integrity": "sha512-8VwMnyGCONIs6cWue2IdpHxHnAjzxnw2Zr7MkVxB2vjmQ2ivqGFb4LEG3SMnv0Gb2F/G/2yA8zUaiL1gywDCCg==",
       "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
@@ -7662,38 +8077,38 @@
         "node": ">=18"
       },
       "optionalDependencies": {
-        "@esbuild/aix-ppc64": "0.28.0",
-        "@esbuild/android-arm": "0.28.0",
-        "@esbuild/android-arm64": "0.28.0",
-        "@esbuild/android-x64": "0.28.0",
-        "@esbuild/darwin-arm64": "0.28.0",
-        "@esbuild/darwin-x64": "0.28.0",
-        "@esbuild/freebsd-arm64": "0.28.0",
-        "@esbuild/freebsd-x64": "0.28.0",
-        "@esbuild/linux-arm": "0.28.0",
-        "@esbuild/linux-arm64": "0.28.0",
-        "@esbuild/linux-ia32": "0.28.0",
-        "@esbuild/linux-loong64": "0.28.0",
-        "@esbuild/linux-mips64el": "0.28.0",
-        "@esbuild/linux-ppc64": "0.28.0",
-        "@esbuild/linux-riscv64": "0.28.0",
-        "@esbuild/linux-s390x": "0.28.0",
-        "@esbuild/linux-x64": "0.28.0",
-        "@esbuild/netbsd-arm64": "0.28.0",
-        "@esbuild/netbsd-x64": "0.28.0",
-        "@esbuild/openbsd-arm64": "0.28.0",
-        "@esbuild/openbsd-x64": "0.28.0",
-        "@esbuild/openharmony-arm64": "0.28.0",
-        "@esbuild/sunos-x64": "0.28.0",
-        "@esbuild/win32-arm64": "0.28.0",
-        "@esbuild/win32-ia32": "0.28.0",
-        "@esbuild/win32-x64": "0.28.0"
+        "@esbuild/aix-ppc64": "0.27.3",
+        "@esbuild/android-arm": "0.27.3",
+        "@esbuild/android-arm64": "0.27.3",
+        "@esbuild/android-x64": "0.27.3",
+        "@esbuild/darwin-arm64": "0.27.3",
+        "@esbuild/darwin-x64": "0.27.3",
+        "@esbuild/freebsd-arm64": "0.27.3",
+        "@esbuild/freebsd-x64": "0.27.3",
+        "@esbuild/linux-arm": "0.27.3",
+        "@esbuild/linux-arm64": "0.27.3",
+        "@esbuild/linux-ia32": "0.27.3",
+        "@esbuild/linux-loong64": "0.27.3",
+        "@esbuild/linux-mips64el": "0.27.3",
+        "@esbuild/linux-ppc64": "0.27.3",
+        "@esbuild/linux-riscv64": "0.27.3",
+        "@esbuild/linux-s390x": "0.27.3",
+        "@esbuild/linux-x64": "0.27.3",
+        "@esbuild/netbsd-arm64": "0.27.3",
+        "@esbuild/netbsd-x64": "0.27.3",
+        "@esbuild/openbsd-arm64": "0.27.3",
+        "@esbuild/openbsd-x64": "0.27.3",
+        "@esbuild/openharmony-arm64": "0.27.3",
+        "@esbuild/sunos-x64": "0.27.3",
+        "@esbuild/win32-arm64": "0.27.3",
+        "@esbuild/win32-ia32": "0.27.3",
+        "@esbuild/win32-x64": "0.27.3"
       }
     },
     "node_modules/esbuild-wasm": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/esbuild-wasm/-/esbuild-wasm-0.28.0.tgz",
-      "integrity": "sha512-5TRVKExcEmeMkccIZMzUq+Az6X2RoMAJyfl6SMMO1dMVhmvt0I2mx7gAb6zYi42n4d1ETcatFXazGKzA+aW7fg==",
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/esbuild-wasm/-/esbuild-wasm-0.27.3.tgz",
+      "integrity": "sha512-AUXuOxZ145/5Az+lIqk6TdJbxKTyDGkXMJpTExmBdbnHR6n6qAFx+F4oG9ORpVYJ9dQYeQAqzv51TO4DFKsbXw==",
       "dev": true,
       "license": "MIT",
       "bin": {
@@ -7931,36 +8346,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/fast-glob": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
-      "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@nodelib/fs.stat": "^2.0.2",
-        "@nodelib/fs.walk": "^1.2.3",
-        "glob-parent": "^5.1.2",
-        "merge2": "^1.3.0",
-        "micromatch": "^4.0.8"
-      },
-      "engines": {
-        "node": ">=8.6.0"
-      }
-    },
-    "node_modules/fast-glob/node_modules/glob-parent": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "is-glob": "^4.0.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/fast-uri": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.1.2.tgz",
@@ -7978,16 +8363,6 @@
       ],
       "license": "BSD-3-Clause"
     },
-    "node_modules/fastq": {
-      "version": "1.20.1",
-      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.20.1.tgz",
-      "integrity": "sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "reusify": "^1.0.4"
-      }
-    },
     "node_modules/faye-websocket": {
       "version": "0.11.4",
       "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.4.tgz",
@@ -8113,16 +8488,16 @@
       }
     },
     "node_modules/fraction.js": {
-      "version": "4.3.7",
-      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
-      "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
+      "version": "5.3.4",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-5.3.4.tgz",
+      "integrity": "sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==",
       "dev": true,
       "license": "MIT",
       "engines": {
         "node": "*"
       },
       "funding": {
-        "type": "patreon",
+        "type": "github",
         "url": "https://github.com/sponsors/rawify"
       }
     },
@@ -8352,9 +8727,9 @@
       }
     },
     "node_modules/hasown": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
-      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.4.tgz",
+      "integrity": "sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -8671,16 +9046,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/import-fresh/node_modules/resolve-from": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
-      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
@@ -8689,13 +9054,13 @@
       "license": "ISC"
     },
     "node_modules/ini": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/ini/-/ini-5.0.0.tgz",
-      "integrity": "sha512-+N0ngpO3e7cRUWOJAS7qw0IZIVc6XPrW4MlFBdD066F2L4k1L6ker3hLqSq7iXxU5tgS4WGkIUElWn5vogAEnw==",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-6.0.0.tgz",
+      "integrity": "sha512-IBTdIkzZNOpqm7q3dRqJvMaldXjDHWkEDfrwGEQTs5eaQMWV+djAhR+wahyNNMAa+qpbDUhBMVt4ZKNwpPm7xQ==",
       "dev": true,
       "license": "ISC",
       "engines": {
-        "node": "^18.17.0 || >=20.5.0"
+        "node": "^20.17.0 || >=22.9.0"
       }
     },
     "node_modules/ip-address": {
@@ -8739,13 +9104,13 @@
       }
     },
     "node_modules/is-core-module": {
-      "version": "2.16.1",
-      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
-      "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
+      "version": "2.16.2",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.2.tgz",
+      "integrity": "sha512-evOr8xfXKxE6qSR0hSXL2r3sd7ALj8+7jQEUvPYcm5sgZFdJ+AYzT6yNmJenvIYQBgIGwfwz08sL8zoL7yq2BA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "hasown": "^2.0.2"
+        "hasown": "^2.0.3"
       },
       "engines": {
         "node": ">= 0.4"
@@ -8781,13 +9146,16 @@
       }
     },
     "node_modules/is-fullwidth-code-point": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-4.0.0.tgz",
-      "integrity": "sha512-O4L094N2/dZ7xqVdrXhh9r1KODPJpFms8B5sGdJLPy664AgvXsreZUyCQQNItZRDlYug4xStLjNp/sz3HvBowQ==",
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-5.1.0.tgz",
+      "integrity": "sha512-5XHYaSyiqADb4RnZ1Bdad6cPp8Toise4TzEjcOYDHZkTCbKgiUl7WTUCpNWHuxmDt91wnsZBc9xinNzopv3JMQ==",
       "dev": true,
       "license": "MIT",
+      "dependencies": {
+        "get-east-asian-width": "^1.3.1"
+      },
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       },
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
@@ -8806,6 +9174,19 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-in-ssh": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-in-ssh/-/is-in-ssh-1.0.0.tgz",
+      "integrity": "sha512-jYa6Q9rH90kR1vKB6NM7qqd1mge3Fx4Dhw5TVlK1MUBqhEOuCagrEHMevNuCcbECmXZ0ThXkRm+Ymr51HwEPAw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/is-inside-container": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-inside-container/-/is-inside-container-1.0.0.tgz",
@@ -9010,14 +9391,14 @@
       }
     },
     "node_modules/jiti": {
-      "version": "1.21.7",
-      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
-      "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.7.0.tgz",
+      "integrity": "sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ==",
       "dev": true,
       "license": "MIT",
       "peer": true,
       "bin": {
-        "jiti": "bin/jiti.js"
+        "jiti": "lib/jiti-cli.mjs"
       }
     },
     "node_modules/jose": {
@@ -9037,6 +9418,29 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/js-yaml": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.2.0.tgz",
+      "integrity": "sha512-ePWsvanv0DWuDRsW8dnt+R4jQ31SCRCQ7hhNcPXZPsoBZiemuZNYGf7adZdqX2D86j6rvKp3RpCxVTSb8WQlOw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/puzrin"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/nodeca"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
     "node_modules/jsesc": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
@@ -9136,9 +9540,9 @@
       }
     },
     "node_modules/less": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/less/-/less-4.4.0.tgz",
-      "integrity": "sha512-kdTwsyRuncDfjEs0DlRILWNvxhDG/Zij4YLO4TMJgDLW+8OzpfkdPnRgrsRuY1o+oaxJGWsps5f/RVBgGmmN0w==",
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/less/-/less-4.4.2.tgz",
+      "integrity": "sha512-j1n1IuTX1VQjIy3tT7cyGbX7nvQOsFLoIqobZv4ttI5axP923gA44zUj6miiA6R5Aoms4sEGVIIcucXUbRI14g==",
       "dev": true,
       "license": "Apache-2.0",
       "peer": true,
@@ -9164,9 +9568,9 @@
       }
     },
     "node_modules/less-loader": {
-      "version": "12.3.0",
-      "resolved": "https://registry.npmjs.org/less-loader/-/less-loader-12.3.0.tgz",
-      "integrity": "sha512-0M6+uYulvYIWs52y0LqN4+QM9TqWAohYSNTo4htE8Z7Cn3G/qQMEmktfHmyJT23k+20kU9zHH2wrfFXkxNLtVw==",
+      "version": "12.3.1",
+      "resolved": "https://registry.npmjs.org/less-loader/-/less-loader-12.3.1.tgz",
+      "integrity": "sha512-JZZmG7gMzoDP3VGeEG8Sh6FW5wygB5jYL7Wp29FFihuRTsIBacqO3LbRPr2yStYD11riVf13selLm/CPFRDBRQ==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -9177,7 +9581,7 @@
         "url": "https://opencollective.com/webpack"
       },
       "peerDependencies": {
-        "@rspack/core": "0.x || 1.x",
+        "@rspack/core": "0.x || ^1.0.0 || ^2.0.0-0",
         "less": "^3.5.0 || ^4.0.0",
         "webpack": "^5.0.0"
       },
@@ -9227,13 +9631,13 @@
       "license": "MIT"
     },
     "node_modules/listr2": {
-      "version": "9.0.1",
-      "resolved": "https://registry.npmjs.org/listr2/-/listr2-9.0.1.tgz",
-      "integrity": "sha512-SL0JY3DaxylDuo/MecFeiC+7pedM0zia33zl0vcjgwcq1q1FWWF1To9EIauPbl8GbMCU0R2e0uJ8bZunhYKD2g==",
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/listr2/-/listr2-9.0.5.tgz",
+      "integrity": "sha512-ME4Fb83LgEgwNw96RKNvKV4VTLuXfoKudAmm2lP8Kk87KaMK0/Xrx/aAkMWmT8mDb+3MlFDspfbCs7adjRxA2g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "cli-truncate": "^4.0.0",
+        "cli-truncate": "^5.0.0",
         "colorette": "^2.0.20",
         "eventemitter3": "^5.0.1",
         "log-update": "^6.1.0",
@@ -9270,14 +9674,15 @@
       }
     },
     "node_modules/lmdb": {
-      "version": "3.4.2",
-      "resolved": "https://registry.npmjs.org/lmdb/-/lmdb-3.4.2.tgz",
-      "integrity": "sha512-nwVGUfTBUwJKXd6lRV8pFNfnrCC1+l49ESJRM19t/tFb/97QfJEixe5DYRvug5JO7DSFKoKaVy7oGMt5rVqZvg==",
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/lmdb/-/lmdb-3.5.1.tgz",
+      "integrity": "sha512-NYHA0MRPjvNX+vSw8Xxg6FLKxzAG+e7Pt8RqAQA/EehzHVXq9SxDqJIN3JL1hK0dweb884y8kIh6rkWvPyg9Wg==",
       "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
       "optional": true,
       "dependencies": {
+        "@harperfast/extended-iterable": "^1.0.3",
         "msgpackr": "^1.11.2",
         "node-addon-api": "^6.1.0",
         "node-gyp-build-optional-packages": "5.2.2",
@@ -9288,13 +9693,13 @@
         "download-lmdb-prebuilds": "bin/download-prebuilds.js"
       },
       "optionalDependencies": {
-        "@lmdb/lmdb-darwin-arm64": "3.4.2",
-        "@lmdb/lmdb-darwin-x64": "3.4.2",
-        "@lmdb/lmdb-linux-arm": "3.4.2",
-        "@lmdb/lmdb-linux-arm64": "3.4.2",
-        "@lmdb/lmdb-linux-x64": "3.4.2",
-        "@lmdb/lmdb-win32-arm64": "3.4.2",
-        "@lmdb/lmdb-win32-x64": "3.4.2"
+        "@lmdb/lmdb-darwin-arm64": "3.5.1",
+        "@lmdb/lmdb-darwin-x64": "3.5.1",
+        "@lmdb/lmdb-linux-arm": "3.5.1",
+        "@lmdb/lmdb-linux-arm64": "3.5.1",
+        "@lmdb/lmdb-linux-x64": "3.5.1",
+        "@lmdb/lmdb-win32-arm64": "3.5.1",
+        "@lmdb/lmdb-win32-x64": "3.5.1"
       }
     },
     "node_modules/loader-runner": {
@@ -9345,14 +9750,14 @@
       "license": "MIT"
     },
     "node_modules/log-symbols": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-6.0.0.tgz",
-      "integrity": "sha512-i24m8rpwhmPIS4zscNzK6MSEhk0DUWa/8iYQWxhffV8jkI4Phvs3F+quL5xvS0gdQR0FyTCMMH33Y78dDTzzIw==",
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-7.0.1.tgz",
+      "integrity": "sha512-ja1E3yCr9i/0hmBVaM0bfwDjnGy8I/s6PP4DFp+yP+a+mrHO4Rm7DtmnqROTUkHIkqffC84YY7AeqX6oFk0WFg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "chalk": "^5.3.0",
-        "is-unicode-supported": "^1.3.0"
+        "is-unicode-supported": "^2.0.0",
+        "yoctocolors": "^2.1.1"
       },
       "engines": {
         "node": ">=18"
@@ -9361,19 +9766,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/log-symbols/node_modules/is-unicode-supported": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-1.3.0.tgz",
-      "integrity": "sha512-43r2mRvz+8JRIKnWJ+3j8JtjRKZ6GmjzfaE/qiBJnikNnYv/6bagRJ1kUhNk8R5EX/GkobD+r+sfxCPJsiKBLQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/log-update": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/log-update/-/log-update-6.1.0.tgz",
@@ -9394,22 +9786,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/log-update/node_modules/is-fullwidth-code-point": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-5.1.0.tgz",
-      "integrity": "sha512-5XHYaSyiqADb4RnZ1Bdad6cPp8Toise4TzEjcOYDHZkTCbKgiUl7WTUCpNWHuxmDt91wnsZBc9xinNzopv3JMQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "get-east-asian-width": "^1.3.1"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/log-update/node_modules/slice-ansi": {
       "version": "7.1.2",
       "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-7.1.2.tgz",
@@ -9469,13 +9845,13 @@
       }
     },
     "node_modules/magic-string": {
-      "version": "0.30.17",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz",
-      "integrity": "sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==",
+      "version": "0.30.21",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
+      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@jridgewell/sourcemap-codec": "^1.5.0"
+        "@jridgewell/sourcemap-codec": "^1.5.5"
       }
     },
     "node_modules/make-dir": {
@@ -9528,16 +9904,6 @@
         "node": "^20.17.0 || >=22.9.0"
       }
     },
-    "node_modules/make-fetch-happen/node_modules/proc-log": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/proc-log/-/proc-log-6.1.0.tgz",
-      "integrity": "sha512-iG+GYldRf2BQ0UDUAd6JQ/RwzaQy6mXmsk/IzlYyal4A4SNFw54MeH4/tLkF4I5WoWG9SQwuqWzS99jaFQHBuQ==",
-      "dev": true,
-      "license": "ISC",
-      "engines": {
-        "node": "^20.17.0 || >=22.9.0"
-      }
-    },
     "node_modules/marked": {
       "version": "18.0.2",
       "resolved": "https://registry.npmjs.org/marked/-/marked-18.0.2.tgz",
@@ -9620,16 +9986,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/merge2": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
-      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 8"
-      }
-    },
     "node_modules/methods": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
@@ -9717,9 +10073,9 @@
       }
     },
     "node_modules/mini-css-extract-plugin": {
-      "version": "2.9.4",
-      "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.9.4.tgz",
-      "integrity": "sha512-ZWYT7ln73Hptxqxk2DxPU9MmapXRhxkJD6tkSR04dnQxm8BGu2hzgKLugK5yySD97u/8yy7Ma7E76k9ZdvtjkQ==",
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.10.0.tgz",
+      "integrity": "sha512-540P2c5dYnJlyJxTaSloliZexv8rji6rY8FhQN+WF/82iHQfA23j/xtJx97L+mXOML27EqksSek/g4eK7jaL3g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -10044,16 +10400,6 @@
       "license": "MIT",
       "optional": true
     },
-    "node_modules/node-forge": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.4.0.tgz",
-      "integrity": "sha512-LarFH0+6VfriEhqMMcLX2F7SwSXeWwnEAJEsYm5QKWchiVYVvJyV9v7UDvUv+w5HO23ZpQTXDv/GxdDdMyOuoQ==",
-      "dev": true,
-      "license": "(BSD-3-Clause OR GPL-2.0)",
-      "engines": {
-        "node": ">= 6.13.0"
-      }
-    },
     "node_modules/node-gyp": {
       "version": "12.4.0",
       "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-12.4.0.tgz",
@@ -10105,14 +10451,14 @@
         "node": ">=20"
       }
     },
-    "node_modules/node-gyp/node_modules/proc-log": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/proc-log/-/proc-log-6.1.0.tgz",
-      "integrity": "sha512-iG+GYldRf2BQ0UDUAd6JQ/RwzaQy6mXmsk/IzlYyal4A4SNFw54MeH4/tLkF4I5WoWG9SQwuqWzS99jaFQHBuQ==",
+    "node_modules/node-gyp/node_modules/undici": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-6.26.0.tgz",
+      "integrity": "sha512-4yqz8a3n5HmGTlsbADNtr/dJlhkh/55Rq798G6ibiULcXbDtaLpTl1pvdqcbFfeoj3iSi52lePFM7h9H21cw/A==",
       "dev": true,
-      "license": "ISC",
+      "license": "MIT",
       "engines": {
-        "node": "^20.17.0 || >=22.9.0"
+        "node": ">=18.17"
       }
     },
     "node_modules/node-gyp/node_modules/which": {
@@ -10164,16 +10510,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/normalize-range": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
-      "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/npm-bundled": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/npm-bundled/-/npm-bundled-5.0.0.tgz",
@@ -10211,16 +10547,16 @@
       }
     },
     "node_modules/npm-package-arg": {
-      "version": "13.0.0",
-      "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-13.0.0.tgz",
-      "integrity": "sha512-+t2etZAGcB7TbbLHfDwooV9ppB2LhhcT6A+L9cahsf9mEUAoQ6CktLEVvEnpD0N5CkX7zJqnPGaFtoQDy9EkHQ==",
+      "version": "13.0.2",
+      "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-13.0.2.tgz",
+      "integrity": "sha512-IciCE3SY3uE84Ld8WZU23gAPPV9rIYod4F+rc+vJ7h7cwAJt9Vk6TVsK60ry7Uj3SRS3bqRRIGuTp9YVlk6WNA==",
       "dev": true,
       "license": "ISC",
       "dependencies": {
         "hosted-git-info": "^9.0.0",
-        "proc-log": "^5.0.0",
+        "proc-log": "^6.0.0",
         "semver": "^7.3.5",
-        "validate-npm-package-name": "^6.0.0"
+        "validate-npm-package-name": "^7.0.0"
       },
       "engines": {
         "node": "^20.17.0 || >=22.9.0"
@@ -10240,16 +10576,6 @@
         "node": "^20.17.0 || >=22.9.0"
       }
     },
-    "node_modules/npm-packlist/node_modules/proc-log": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/proc-log/-/proc-log-6.1.0.tgz",
-      "integrity": "sha512-iG+GYldRf2BQ0UDUAd6JQ/RwzaQy6mXmsk/IzlYyal4A4SNFw54MeH4/tLkF4I5WoWG9SQwuqWzS99jaFQHBuQ==",
-      "dev": true,
-      "license": "ISC",
-      "engines": {
-        "node": "^20.17.0 || >=22.9.0"
-      }
-    },
     "node_modules/npm-pick-manifest": {
       "version": "11.0.3",
       "resolved": "https://registry.npmjs.org/npm-pick-manifest/-/npm-pick-manifest-11.0.3.tgz",
@@ -10286,16 +10612,6 @@
         "node": "^20.17.0 || >=22.9.0"
       }
     },
-    "node_modules/npm-registry-fetch/node_modules/proc-log": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/proc-log/-/proc-log-6.1.0.tgz",
-      "integrity": "sha512-iG+GYldRf2BQ0UDUAd6JQ/RwzaQy6mXmsk/IzlYyal4A4SNFw54MeH4/tLkF4I5WoWG9SQwuqWzS99jaFQHBuQ==",
-      "dev": true,
-      "license": "ISC",
-      "engines": {
-        "node": "^20.17.0 || >=22.9.0"
-      }
-    },
     "node_modules/nth-check": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
@@ -10389,43 +10705,61 @@
       }
     },
     "node_modules/open": {
-      "version": "10.2.0",
-      "resolved": "https://registry.npmjs.org/open/-/open-10.2.0.tgz",
-      "integrity": "sha512-YgBpdJHPyQ2UE5x+hlSXcnejzAvD0b22U2OuAP+8OnlJT+PjWPxtgmGqKKc+RgTM63U9gN0YzrYc71R2WT/hTA==",
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/open/-/open-11.0.0.tgz",
+      "integrity": "sha512-smsWv2LzFjP03xmvFoJ331ss6h+jixfA4UUV/Bsiyuu4YJPfN+FIQGOIiv4w9/+MoHkfkJ22UIaQWRVFRfH6Vw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "default-browser": "^5.2.1",
+        "default-browser": "^5.4.0",
         "define-lazy-prop": "^3.0.0",
+        "is-in-ssh": "^1.0.0",
         "is-inside-container": "^1.0.0",
-        "wsl-utils": "^0.1.0"
+        "powershell-utils": "^0.1.0",
+        "wsl-utils": "^0.3.0"
       },
       "engines": {
-        "node": ">=18"
+        "node": ">=20"
       },
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/ora": {
-      "version": "8.2.0",
-      "resolved": "https://registry.npmjs.org/ora/-/ora-8.2.0.tgz",
-      "integrity": "sha512-weP+BZ8MVNnlCm8c0Qdc1WSWq4Qn7I+9CJGm7Qali6g44e/PUzbjNqJX5NJ9ljlNMosfJvg1fKEGILklK9cwnw==",
+      "version": "9.3.0",
+      "resolved": "https://registry.npmjs.org/ora/-/ora-9.3.0.tgz",
+      "integrity": "sha512-lBX72MWFduWEf7v7uWf5DHp9Jn5BI8bNPGuFgtXMmr2uDz2Gz2749y3am3agSDdkhHPHYmmxEGSKH85ZLGzgXw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "chalk": "^5.3.0",
+        "chalk": "^5.6.2",
         "cli-cursor": "^5.0.0",
-        "cli-spinners": "^2.9.2",
+        "cli-spinners": "^3.2.0",
         "is-interactive": "^2.0.0",
-        "is-unicode-supported": "^2.0.0",
-        "log-symbols": "^6.0.0",
-        "stdin-discarder": "^0.2.2",
-        "string-width": "^7.2.0",
-        "strip-ansi": "^7.1.0"
+        "is-unicode-supported": "^2.1.0",
+        "log-symbols": "^7.0.1",
+        "stdin-discarder": "^0.3.1",
+        "string-width": "^8.1.0"
       },
       "engines": {
-        "node": ">=18"
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/ora/node_modules/string-width": {
+      "version": "8.2.1",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-8.2.1.tgz",
+      "integrity": "sha512-IIaP0g3iy9Cyy18w3M9YcaDudujEAVHKt3a3QJg1+sr/oX96TbaGUubG0hJyCjCBThFH+tFpcIyoUHUn1ogaLA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "get-east-asian-width": "^1.5.0",
+        "strip-ansi": "^7.1.2"
+      },
+      "engines": {
+        "node": ">=20"
       },
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
@@ -10513,9 +10847,9 @@
       }
     },
     "node_modules/pacote": {
-      "version": "21.0.4",
-      "resolved": "https://registry.npmjs.org/pacote/-/pacote-21.0.4.tgz",
-      "integrity": "sha512-RplP/pDW0NNNDh3pnaoIWYPvNenS7UqMbXyvMqJczosiFWTeGGwJC2NQBLqKf4rGLFfwCOnntw1aEp9Jiqm1MA==",
+      "version": "21.3.1",
+      "resolved": "https://registry.npmjs.org/pacote/-/pacote-21.3.1.tgz",
+      "integrity": "sha512-O0EDXi85LF4AzdjG74GUwEArhdvawi/YOHcsW6IijKNj7wm8IvEWNF5GnfuxNpQ/ZpO3L37+v8hqdVh8GgWYhg==",
       "dev": true,
       "license": "ISC",
       "dependencies": {
@@ -10544,16 +10878,6 @@
         "node": "^20.17.0 || >=22.9.0"
       }
     },
-    "node_modules/pacote/node_modules/proc-log": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/proc-log/-/proc-log-6.1.0.tgz",
-      "integrity": "sha512-iG+GYldRf2BQ0UDUAd6JQ/RwzaQy6mXmsk/IzlYyal4A4SNFw54MeH4/tLkF4I5WoWG9SQwuqWzS99jaFQHBuQ==",
-      "dev": true,
-      "license": "ISC",
-      "engines": {
-        "node": "^20.17.0 || >=22.9.0"
-      }
-    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -10777,9 +11101,9 @@
       }
     },
     "node_modules/piscina": {
-      "version": "5.1.3",
-      "resolved": "https://registry.npmjs.org/piscina/-/piscina-5.1.3.tgz",
-      "integrity": "sha512-0u3N7H4+hbr40KjuVn2uNhOcthu/9usKhnw5vT3J7ply79v3D3M8naI00el9Klcy16x557VsEkkUQaHCWFXC/g==",
+      "version": "5.1.4",
+      "resolved": "https://registry.npmjs.org/piscina/-/piscina-5.1.4.tgz",
+      "integrity": "sha512-7uU4ZnKeQq22t9AsmHGD2w4OYQGonwFnTypDypaWi7Qr2EvQIFVtG8J5D/3bE7W123Wdc9+v4CZDu5hJXVCtBg==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -10799,6 +11123,24 @@
         "node": ">=16.20.0"
       }
     },
+    "node_modules/pkijs": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/pkijs/-/pkijs-3.4.0.tgz",
+      "integrity": "sha512-emEcLuomt2j03vxD54giVB4SxTjnsqkU692xZOZXHDVoYyypEm+b3jpiTcc+Cf+myooc+/Ly0z01jqeNHVgJGw==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@noble/hashes": "1.4.0",
+        "asn1js": "^3.0.6",
+        "bytestreamjs": "^2.0.1",
+        "pvtsutils": "^1.3.6",
+        "pvutils": "^1.1.3",
+        "tslib": "^2.8.1"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      }
+    },
     "node_modules/playwright": {
       "version": "1.59.1",
       "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.59.1.tgz",
@@ -10877,15 +11219,15 @@
       }
     },
     "node_modules/postcss-loader": {
-      "version": "8.1.1",
-      "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-8.1.1.tgz",
-      "integrity": "sha512-0IeqyAsG6tYiDRCYKQJLAmgQr47DX6N7sFSWvQxt6AcupX8DIdmykuk/o/tx0Lze3ErGHJEp5OSRxrelC6+NdQ==",
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-8.2.0.tgz",
+      "integrity": "sha512-tHX+RkpsXVcc7st4dSdDGliI+r4aAQDuv+v3vFYHixb6YgjreG5AG4SEB0kDK8u2s6htqEEpKlkhSBUTvWKYnA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "cosmiconfig": "^9.0.0",
-        "jiti": "^1.20.0",
-        "semver": "^7.5.4"
+        "jiti": "^2.5.1",
+        "semver": "^7.6.2"
       },
       "engines": {
         "node": ">= 18.12.0"
@@ -10978,6 +11320,33 @@
         "postcss": "^8.1.0"
       }
     },
+    "node_modules/postcss-safe-parser": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-safe-parser/-/postcss-safe-parser-7.0.1.tgz",
+      "integrity": "sha512-0AioNCJZ2DPYz5ABT6bddIqlhgwhpHZ/l65YAYo0BCIn0xiDpsnTHz0gnoTGk0OXZW0JRs+cDwL8u/teRdz+8A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss-safe-parser"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.31"
+      }
+    },
     "node_modules/postcss-selector-parser": {
       "version": "7.1.2",
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.2.tgz",
@@ -10999,14 +11368,27 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/powershell-utils": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/powershell-utils/-/powershell-utils-0.1.0.tgz",
+      "integrity": "sha512-dM0jVuXJPsDN6DvRpea484tCUaMiXWjuCn++HGTqUWzGDjv5tZkEZldAJ/UMlqRYGFrD/etByo4/xOuC/snX2A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/proc-log": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/proc-log/-/proc-log-5.0.0.tgz",
-      "integrity": "sha512-Azwzvl90HaF0aCz1JrDdXQykFakSSNPaPoiZ9fm5qJIMHioDZEi7OAdRwSm6rSoPtY3Qutnm3L7ogmg3dc+wbQ==",
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/proc-log/-/proc-log-6.1.0.tgz",
+      "integrity": "sha512-iG+GYldRf2BQ0UDUAd6JQ/RwzaQy6mXmsk/IzlYyal4A4SNFw54MeH4/tLkF4I5WoWG9SQwuqWzS99jaFQHBuQ==",
       "dev": true,
       "license": "ISC",
       "engines": {
-        "node": "^18.17.0 || >=20.5.0"
+        "node": "^20.17.0 || >=22.9.0"
       }
     },
     "node_modules/process-nextick-args": {
@@ -11052,6 +11434,26 @@
       "license": "MIT",
       "optional": true
     },
+    "node_modules/pvtsutils": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/pvtsutils/-/pvtsutils-1.3.6.tgz",
+      "integrity": "sha512-PLgQXQ6H2FWCaeRak8vvk1GW462lMxB5s3Jm673N82zI4vqtVUPuZdffdZbPDFRoU8kAhItWFtPCWiPpp4/EDg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.8.1"
+      }
+    },
+    "node_modules/pvutils": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/pvutils/-/pvutils-1.1.5.tgz",
+      "integrity": "sha512-KTqnxsgGiQ6ZAzZCVlJH5eOjSnvlyEgx1m8bkRJfOhmGRqfo5KLvmAlACQkrjEtOQ4B7wF9TdSLIs9O90MX9xA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=16.0.0"
+      }
+    },
     "node_modules/qs": {
       "version": "6.15.2",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.15.2.tgz",
@@ -11068,27 +11470,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/queue-microtask": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
-      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ],
-      "license": "MIT"
-    },
     "node_modules/range-parser": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
@@ -11131,13 +11512,13 @@
       }
     },
     "node_modules/readdirp": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
-      "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-5.0.0.tgz",
+      "integrity": "sha512-9u/XQ1pvrQtYyMpZe7DXKv2p5CNvyVwzUB6uhLAnQwHMSgKMBR62lc7AHljaeteeHXn11XTAaLLUVZYVZyuRBQ==",
       "dev": true,
       "license": "MIT",
       "engines": {
-        "node": ">= 14.18.0"
+        "node": ">= 20.19.0"
       },
       "funding": {
         "type": "individual",
@@ -11234,13 +11615,14 @@
       "license": "MIT"
     },
     "node_modules/resolve": {
-      "version": "1.22.10",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
-      "integrity": "sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==",
+      "version": "1.22.12",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.12.tgz",
+      "integrity": "sha512-TyeJ1zif53BPfHootBGwPRYT1RUt6oGWsaQr8UyZW/eAm9bKoijtvruSDEmZHm92CwS9nj7/fWttqPCgzep8CA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "is-core-module": "^2.16.0",
+        "es-errors": "^1.3.0",
+        "is-core-module": "^2.16.1",
         "path-parse": "^1.0.7",
         "supports-preserve-symlinks-flag": "^1.0.0"
       },
@@ -11254,6 +11636,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/resolve-url-loader": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/resolve-url-loader/-/resolve-url-loader-5.0.0.tgz",
@@ -11323,17 +11715,6 @@
         "node": ">= 4"
       }
     },
-    "node_modules/reusify": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
-      "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "iojs": ">=1.0.0",
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/rfdc": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.4.1.tgz",
@@ -11341,14 +11722,46 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/rollup": {
-      "version": "4.59.0",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.59.0.tgz",
-      "integrity": "sha512-2oMpl67a3zCH9H79LeMcbDhXW/UmWG/y2zuqnF2jQq5uq9TbM9TVyXvA4+t+ne2IIkBdrLpAaRQAvo7YI/Yyeg==",
+    "node_modules/rolldown": {
+      "version": "1.0.0-rc.4",
+      "resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.0.0-rc.4.tgz",
+      "integrity": "sha512-V2tPDUrY3WSevrvU2E41ijZlpF+5PbZu4giH+VpNraaadsJGHa4fR6IFwsocVwEXDoAdIv5qgPPxgrvKAOIPtA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@types/estree": "1.0.8"
+        "@oxc-project/types": "=0.113.0",
+        "@rolldown/pluginutils": "1.0.0-rc.4"
+      },
+      "bin": {
+        "rolldown": "bin/cli.mjs"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "optionalDependencies": {
+        "@rolldown/binding-android-arm64": "1.0.0-rc.4",
+        "@rolldown/binding-darwin-arm64": "1.0.0-rc.4",
+        "@rolldown/binding-darwin-x64": "1.0.0-rc.4",
+        "@rolldown/binding-freebsd-x64": "1.0.0-rc.4",
+        "@rolldown/binding-linux-arm-gnueabihf": "1.0.0-rc.4",
+        "@rolldown/binding-linux-arm64-gnu": "1.0.0-rc.4",
+        "@rolldown/binding-linux-arm64-musl": "1.0.0-rc.4",
+        "@rolldown/binding-linux-x64-gnu": "1.0.0-rc.4",
+        "@rolldown/binding-linux-x64-musl": "1.0.0-rc.4",
+        "@rolldown/binding-openharmony-arm64": "1.0.0-rc.4",
+        "@rolldown/binding-wasm32-wasi": "1.0.0-rc.4",
+        "@rolldown/binding-win32-arm64-msvc": "1.0.0-rc.4",
+        "@rolldown/binding-win32-x64-msvc": "1.0.0-rc.4"
+      }
+    },
+    "node_modules/rollup": {
+      "version": "4.61.1",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.61.1.tgz",
+      "integrity": "sha512-I4KW6iuRpuu2uHBLraZ1wNZe0DP7lnRha+VJ9tNaYVaVgKhW0aI3h4RYnoRPeql0flHm/Co55b7snEDcOfOJrA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "1.0.9"
       },
       "bin": {
         "rollup": "dist/bin/rollup"
@@ -11358,31 +11771,31 @@
         "npm": ">=8.0.0"
       },
       "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.59.0",
-        "@rollup/rollup-android-arm64": "4.59.0",
-        "@rollup/rollup-darwin-arm64": "4.59.0",
-        "@rollup/rollup-darwin-x64": "4.59.0",
-        "@rollup/rollup-freebsd-arm64": "4.59.0",
-        "@rollup/rollup-freebsd-x64": "4.59.0",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.59.0",
-        "@rollup/rollup-linux-arm-musleabihf": "4.59.0",
-        "@rollup/rollup-linux-arm64-gnu": "4.59.0",
-        "@rollup/rollup-linux-arm64-musl": "4.59.0",
-        "@rollup/rollup-linux-loong64-gnu": "4.59.0",
-        "@rollup/rollup-linux-loong64-musl": "4.59.0",
-        "@rollup/rollup-linux-ppc64-gnu": "4.59.0",
-        "@rollup/rollup-linux-ppc64-musl": "4.59.0",
-        "@rollup/rollup-linux-riscv64-gnu": "4.59.0",
-        "@rollup/rollup-linux-riscv64-musl": "4.59.0",
-        "@rollup/rollup-linux-s390x-gnu": "4.59.0",
-        "@rollup/rollup-linux-x64-gnu": "4.59.0",
-        "@rollup/rollup-linux-x64-musl": "4.59.0",
-        "@rollup/rollup-openbsd-x64": "4.59.0",
-        "@rollup/rollup-openharmony-arm64": "4.59.0",
-        "@rollup/rollup-win32-arm64-msvc": "4.59.0",
-        "@rollup/rollup-win32-ia32-msvc": "4.59.0",
-        "@rollup/rollup-win32-x64-gnu": "4.59.0",
-        "@rollup/rollup-win32-x64-msvc": "4.59.0",
+        "@rollup/rollup-android-arm-eabi": "4.61.1",
+        "@rollup/rollup-android-arm64": "4.61.1",
+        "@rollup/rollup-darwin-arm64": "4.61.1",
+        "@rollup/rollup-darwin-x64": "4.61.1",
+        "@rollup/rollup-freebsd-arm64": "4.61.1",
+        "@rollup/rollup-freebsd-x64": "4.61.1",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.61.1",
+        "@rollup/rollup-linux-arm-musleabihf": "4.61.1",
+        "@rollup/rollup-linux-arm64-gnu": "4.61.1",
+        "@rollup/rollup-linux-arm64-musl": "4.61.1",
+        "@rollup/rollup-linux-loong64-gnu": "4.61.1",
+        "@rollup/rollup-linux-loong64-musl": "4.61.1",
+        "@rollup/rollup-linux-ppc64-gnu": "4.61.1",
+        "@rollup/rollup-linux-ppc64-musl": "4.61.1",
+        "@rollup/rollup-linux-riscv64-gnu": "4.61.1",
+        "@rollup/rollup-linux-riscv64-musl": "4.61.1",
+        "@rollup/rollup-linux-s390x-gnu": "4.61.1",
+        "@rollup/rollup-linux-x64-gnu": "4.61.1",
+        "@rollup/rollup-linux-x64-musl": "4.61.1",
+        "@rollup/rollup-openbsd-x64": "4.61.1",
+        "@rollup/rollup-openharmony-arm64": "4.61.1",
+        "@rollup/rollup-win32-arm64-msvc": "4.61.1",
+        "@rollup/rollup-win32-ia32-msvc": "4.61.1",
+        "@rollup/rollup-win32-x64-gnu": "4.61.1",
+        "@rollup/rollup-win32-x64-msvc": "4.61.1",
         "fsevents": "~2.3.2"
       }
     },
@@ -11416,30 +11829,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/run-parallel": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
-      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "queue-microtask": "^1.2.2"
-      }
-    },
     "node_modules/rxjs": {
       "version": "7.8.2",
       "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
@@ -11479,9 +11868,9 @@
       "license": "MIT"
     },
     "node_modules/sass": {
-      "version": "1.90.0",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.90.0.tgz",
-      "integrity": "sha512-9GUyuksjw70uNpb1MTYWsH9MQHOHY6kwfnkafC24+7aOMZn9+rVMBxRbLvw756mrBFbIsFg6Xw9IkR2Fnn3k+Q==",
+      "version": "1.97.3",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.97.3.tgz",
+      "integrity": "sha512-fDz1zJpd5GycprAbu4Q2PV/RprsRtKC/0z82z0JLgdytmcq0+ujJbJ/09bPGDxCLkKY3Np5cRAOcWiVkLXJURg==",
       "dev": true,
       "license": "MIT",
       "peer": true,
@@ -11501,9 +11890,9 @@
       }
     },
     "node_modules/sass-loader": {
-      "version": "16.0.5",
-      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-16.0.5.tgz",
-      "integrity": "sha512-oL+CMBXrj6BZ/zOq4os+UECPL+bWqt6OAC6DWS8Ln8GZRcMDjlJ4JC3FBDuHJdYaFWIdKNIBYmtZtK2MaMkNIw==",
+      "version": "16.0.7",
+      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-16.0.7.tgz",
+      "integrity": "sha512-w6q+fRHourZ+e+xA1kcsF27iGM6jdB8teexYCfdUw0sYgcDNeZESnDNT9sUmmPm3ooziwUJXGwZJSTF3kOdBfA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -11517,7 +11906,7 @@
         "url": "https://opencollective.com/webpack"
       },
       "peerDependencies": {
-        "@rspack/core": "0.x || 1.x",
+        "@rspack/core": "0.x || ^1.0.0 || ^2.0.0-0",
         "node-sass": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0",
         "sass": "^1.3.0",
         "sass-embedded": "*",
@@ -11541,6 +11930,36 @@
         }
       }
     },
+    "node_modules/sass/node_modules/chokidar": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
+      "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "readdirp": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 14.16.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/sass/node_modules/readdirp": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
+      "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14.18.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
     "node_modules/sax": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.6.0.tgz",
@@ -11580,17 +11999,17 @@
       "license": "MIT"
     },
     "node_modules/selfsigned": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-2.4.1.tgz",
-      "integrity": "sha512-th5B4L2U+eGLq1TVh7zNRGBapioSORUeymIydxgFpwww9d2qyKvtuPU2jJuHvYAwwqi2Y596QBL3eEqcPEYL8Q==",
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-5.5.0.tgz",
+      "integrity": "sha512-ftnu3TW4+3eBfLRFnDEkzGxSF/10BJBkaLJuBHZX0kiPS7bRdlpZGu6YGt4KngMkdTwJE6MbjavFpqHvqVt+Ew==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@types/node-forge": "^1.3.0",
-        "node-forge": "^1"
+        "@peculiar/x509": "^1.14.2",
+        "pkijs": "^3.3.3"
       },
       "engines": {
-        "node": ">=10"
+        "node": ">=18"
       }
     },
     "node_modules/semver": {
@@ -11955,17 +12374,17 @@
       }
     },
     "node_modules/slice-ansi": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-5.0.0.tgz",
-      "integrity": "sha512-FC+lgizVPfie0kkhqUScwRu1O/lF6NOgJmlCgK+/LYxDCTk8sGelYaHDhFcDN+Sn3Cv+3VSa4Byeo+IMCzpMgQ==",
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-8.0.0.tgz",
+      "integrity": "sha512-stxByr12oeeOyY2BlviTNQlYV5xOj47GirPr4yA1hE9JCtxfQN0+tVbkxwCtYDQWhEKWFHsEK48ORg5jrouCAg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "ansi-styles": "^6.0.0",
-        "is-fullwidth-code-point": "^4.0.0"
+        "ansi-styles": "^6.2.3",
+        "is-fullwidth-code-point": "^5.1.0"
       },
       "engines": {
-        "node": ">=12"
+        "node": ">=20"
       },
       "funding": {
         "url": "https://github.com/chalk/slice-ansi?sponsor=1"
@@ -12180,9 +12599,9 @@
       }
     },
     "node_modules/stdin-discarder": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/stdin-discarder/-/stdin-discarder-0.2.2.tgz",
-      "integrity": "sha512-UhDfHmA92YAlNnCfhmq0VeNL5bDbiZGg7sZ2IvPsXubGkiNa9EC+tUTsjBRsYUAz87btI6/1wf4XoVvQ3uRnmQ==",
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/stdin-discarder/-/stdin-discarder-0.3.2.tgz",
+      "integrity": "sha512-eCPu1qRxPVkl5605OTWF8Wz40b4Mf45NY5LQmVPQ599knfs5QhASUm9GbJ5BDMDOXgrnh0wyEdvzmL//YMlw0A==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -12291,15 +12710,15 @@
       }
     },
     "node_modules/terser": {
-      "version": "5.43.1",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-5.43.1.tgz",
-      "integrity": "sha512-+6erLbBm0+LROX2sPXlUYx/ux5PyE9K/a92Wrt6oA+WDAoFTdpHE5tCYCI5PNzq2y8df4rA+QgHLJuR4jNymsg==",
+      "version": "5.46.0",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.46.0.tgz",
+      "integrity": "sha512-jTwoImyr/QbOWFFso3YoU3ik0jBBDJ6JTOQiy/J2YxVJdZCc+5u7skhNwiOR3FQIygFqVUPHl7qbbxtjW2K3Qg==",
       "dev": true,
       "license": "BSD-2-Clause",
       "peer": true,
       "dependencies": {
         "@jridgewell/source-map": "^0.3.3",
-        "acorn": "^8.14.0",
+        "acorn": "^8.15.0",
         "commander": "^2.20.0",
         "source-map-support": "~0.5.20"
       },
@@ -12388,14 +12807,14 @@
       "license": "MIT"
     },
     "node_modules/tinyglobby": {
-      "version": "0.2.14",
-      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.14.tgz",
-      "integrity": "sha512-tX5e7OM1HnYr2+a2C/4V0htOcSQcoSTH9KgJnVvNm5zm/cyEWKJ7j7YutsH9CxMdtOkkLFy2AHrMci9IM8IPZQ==",
+      "version": "0.2.15",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
+      "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "fdir": "^6.4.4",
-        "picomatch": "^4.0.2"
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.3"
       },
       "engines": {
         "node": ">=12.0.0"
@@ -12461,6 +12880,26 @@
       "license": "0BSD",
       "peer": true
     },
+    "node_modules/tsyringe": {
+      "version": "4.10.0",
+      "resolved": "https://registry.npmjs.org/tsyringe/-/tsyringe-4.10.0.tgz",
+      "integrity": "sha512-axr3IdNuVIxnaK5XGEUFTu3YmAQ6lllgrvqfEoR16g/HGnYY/6We4oWENtAnzK6/LpJ2ur9PAb80RBt7/U4ugw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^1.9.3"
+      },
+      "engines": {
+        "node": ">= 6.0.0"
+      }
+    },
+    "node_modules/tsyringe/node_modules/tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
+      "dev": true,
+      "license": "0BSD"
+    },
     "node_modules/tuf-js": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/tuf-js/-/tuf-js-4.1.0.tgz",
@@ -12559,13 +12998,13 @@
       }
     },
     "node_modules/undici": {
-      "version": "6.26.0",
-      "resolved": "https://registry.npmjs.org/undici/-/undici-6.26.0.tgz",
-      "integrity": "sha512-4yqz8a3n5HmGTlsbADNtr/dJlhkh/55Rq798G6ibiULcXbDtaLpTl1pvdqcbFfeoj3iSi52lePFM7h9H21cw/A==",
+      "version": "7.24.4",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-7.24.4.tgz",
+      "integrity": "sha512-BM/JzwwaRXxrLdElV2Uo6cTLEjhSb3WXboncJamZ15NgUURmvlXvxa6xkwIOILIjPNo9i8ku136ZvWV0Uly8+w==",
       "dev": true,
       "license": "MIT",
       "engines": {
-        "node": ">=18.17"
+        "node": ">=20.18.1"
       }
     },
     "node_modules/undici-types": {
@@ -12689,13 +13128,13 @@
       }
     },
     "node_modules/validate-npm-package-name": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/validate-npm-package-name/-/validate-npm-package-name-6.0.2.tgz",
-      "integrity": "sha512-IUoow1YUtvoBBC06dXs8bR8B9vuA3aJfmQNKMoaPG/OFsPmoQvw8xh+6Ye25Gx9DQhoEom3Pcu9MKHerm/NpUQ==",
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/validate-npm-package-name/-/validate-npm-package-name-7.0.2.tgz",
+      "integrity": "sha512-hVDIBwsRruT73PbK7uP5ebUt+ezEtCmzZz3F59BSr2F6OVFnJ/6h8liuvdLrQ88Xmnk6/+xGGuq+pG9WwTuy3A==",
       "dev": true,
       "license": "ISC",
       "engines": {
-        "node": "^18.17.0 || >=20.5.0"
+        "node": "^20.17.0 || >=22.9.0"
       }
     },
     "node_modules/vary": {
@@ -12714,6 +13153,7 @@
       "integrity": "sha512-Bby3NOsna2jsjfLVOHKes8sGwgl4TT0E6vvpYgnAYDIF/tie7MRaFthmKuHx1NSXjiTueXH3do80FMQgvEktRg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.27.0",
         "fdir": "^6.5.0",
@@ -12783,511 +13223,10 @@
         }
       }
     },
-    "node_modules/vite/node_modules/@esbuild/aix-ppc64": {
-      "version": "0.27.7",
-      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.27.7.tgz",
-      "integrity": "sha512-EKX3Qwmhz1eMdEJokhALr0YiD0lhQNwDqkPYyPhiSwKrh7/4KRjQc04sZ8db+5DVVnZ1LmbNDI1uAMPEUBnQPg==",
-      "cpu": [
-        "ppc64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "aix"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/vite/node_modules/@esbuild/android-arm": {
-      "version": "0.27.7",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.27.7.tgz",
-      "integrity": "sha512-jbPXvB4Yj2yBV7HUfE2KHe4GJX51QplCN1pGbYjvsyCZbQmies29EoJbkEc+vYuU5o45AfQn37vZlyXy4YJ8RQ==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/vite/node_modules/@esbuild/android-arm64": {
-      "version": "0.27.7",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.27.7.tgz",
-      "integrity": "sha512-62dPZHpIXzvChfvfLJow3q5dDtiNMkwiRzPylSCfriLvZeq0a1bWChrGx/BbUbPwOrsWKMn8idSllklzBy+dgQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/vite/node_modules/@esbuild/android-x64": {
-      "version": "0.27.7",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.27.7.tgz",
-      "integrity": "sha512-x5VpMODneVDb70PYV2VQOmIUUiBtY3D3mPBG8NxVk5CogneYhkR7MmM3yR/uMdITLrC1ml/NV1rj4bMJuy9MCg==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/vite/node_modules/@esbuild/darwin-arm64": {
-      "version": "0.27.7",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.27.7.tgz",
-      "integrity": "sha512-5lckdqeuBPlKUwvoCXIgI2D9/ABmPq3Rdp7IfL70393YgaASt7tbju3Ac+ePVi3KDH6N2RqePfHnXkaDtY9fkw==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/vite/node_modules/@esbuild/darwin-x64": {
-      "version": "0.27.7",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.27.7.tgz",
-      "integrity": "sha512-rYnXrKcXuT7Z+WL5K980jVFdvVKhCHhUwid+dDYQpH+qu+TefcomiMAJpIiC2EM3Rjtq0sO3StMV/+3w3MyyqQ==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/vite/node_modules/@esbuild/freebsd-arm64": {
-      "version": "0.27.7",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.27.7.tgz",
-      "integrity": "sha512-B48PqeCsEgOtzME2GbNM2roU29AMTuOIN91dsMO30t+Ydis3z/3Ngoj5hhnsOSSwNzS+6JppqWsuhTp6E82l2w==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/vite/node_modules/@esbuild/freebsd-x64": {
-      "version": "0.27.7",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.27.7.tgz",
-      "integrity": "sha512-jOBDK5XEjA4m5IJK3bpAQF9/Lelu/Z9ZcdhTRLf4cajlB+8VEhFFRjWgfy3M1O4rO2GQ/b2dLwCUGpiF/eATNQ==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/vite/node_modules/@esbuild/linux-arm": {
-      "version": "0.27.7",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.27.7.tgz",
-      "integrity": "sha512-RkT/YXYBTSULo3+af8Ib0ykH8u2MBh57o7q/DAs3lTJlyVQkgQvlrPTnjIzzRPQyavxtPtfg0EopvDyIt0j1rA==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/vite/node_modules/@esbuild/linux-arm64": {
-      "version": "0.27.7",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.27.7.tgz",
-      "integrity": "sha512-RZPHBoxXuNnPQO9rvjh5jdkRmVizktkT7TCDkDmQ0W2SwHInKCAV95GRuvdSvA7w4VMwfCjUiPwDi0ZO6Nfe9A==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/vite/node_modules/@esbuild/linux-ia32": {
-      "version": "0.27.7",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.27.7.tgz",
-      "integrity": "sha512-GA48aKNkyQDbd3KtkplYWT102C5sn/EZTY4XROkxONgruHPU72l+gW+FfF8tf2cFjeHaRbWpOYa/uRBz/Xq1Pg==",
-      "cpu": [
-        "ia32"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/vite/node_modules/@esbuild/linux-loong64": {
-      "version": "0.27.7",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.27.7.tgz",
-      "integrity": "sha512-a4POruNM2oWsD4WKvBSEKGIiWQF8fZOAsycHOt6JBpZ+JN2n2JH9WAv56SOyu9X5IqAjqSIPTaJkqN8F7XOQ5Q==",
-      "cpu": [
-        "loong64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/vite/node_modules/@esbuild/linux-mips64el": {
-      "version": "0.27.7",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.27.7.tgz",
-      "integrity": "sha512-KabT5I6StirGfIz0FMgl1I+R1H73Gp0ofL9A3nG3i/cYFJzKHhouBV5VWK1CSgKvVaG4q1RNpCTR2LuTVB3fIw==",
-      "cpu": [
-        "mips64el"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/vite/node_modules/@esbuild/linux-ppc64": {
-      "version": "0.27.7",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.27.7.tgz",
-      "integrity": "sha512-gRsL4x6wsGHGRqhtI+ifpN/vpOFTQtnbsupUF5R5YTAg+y/lKelYR1hXbnBdzDjGbMYjVJLJTd2OFmMewAgwlQ==",
-      "cpu": [
-        "ppc64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/vite/node_modules/@esbuild/linux-riscv64": {
-      "version": "0.27.7",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.27.7.tgz",
-      "integrity": "sha512-hL25LbxO1QOngGzu2U5xeXtxXcW+/GvMN3ejANqXkxZ/opySAZMrc+9LY/WyjAan41unrR3YrmtTsUpwT66InQ==",
-      "cpu": [
-        "riscv64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/vite/node_modules/@esbuild/linux-s390x": {
-      "version": "0.27.7",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.27.7.tgz",
-      "integrity": "sha512-2k8go8Ycu1Kb46vEelhu1vqEP+UeRVj2zY1pSuPdgvbd5ykAw82Lrro28vXUrRmzEsUV0NzCf54yARIK8r0fdw==",
-      "cpu": [
-        "s390x"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/vite/node_modules/@esbuild/linux-x64": {
-      "version": "0.27.7",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.27.7.tgz",
-      "integrity": "sha512-hzznmADPt+OmsYzw1EE33ccA+HPdIqiCRq7cQeL1Jlq2gb1+OyWBkMCrYGBJ+sxVzve2ZJEVeePbLM2iEIZSxA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/vite/node_modules/@esbuild/netbsd-arm64": {
-      "version": "0.27.7",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.27.7.tgz",
-      "integrity": "sha512-b6pqtrQdigZBwZxAn1UpazEisvwaIDvdbMbmrly7cDTMFnw/+3lVxxCTGOrkPVnsYIosJJXAsILG9XcQS+Yu6w==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "netbsd"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/vite/node_modules/@esbuild/netbsd-x64": {
-      "version": "0.27.7",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.27.7.tgz",
-      "integrity": "sha512-OfatkLojr6U+WN5EDYuoQhtM+1xco+/6FSzJJnuWiUw5eVcicbyK3dq5EeV/QHT1uy6GoDhGbFpprUiHUYggrw==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "netbsd"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/vite/node_modules/@esbuild/openbsd-arm64": {
-      "version": "0.27.7",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.27.7.tgz",
-      "integrity": "sha512-AFuojMQTxAz75Fo8idVcqoQWEHIXFRbOc1TrVcFSgCZtQfSdc1RXgB3tjOn/krRHENUB4j00bfGjyl2mJrU37A==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "openbsd"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/vite/node_modules/@esbuild/openbsd-x64": {
-      "version": "0.27.7",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.27.7.tgz",
-      "integrity": "sha512-+A1NJmfM8WNDv5CLVQYJ5PshuRm/4cI6WMZRg1by1GwPIQPCTs1GLEUHwiiQGT5zDdyLiRM/l1G0Pv54gvtKIg==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "openbsd"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/vite/node_modules/@esbuild/openharmony-arm64": {
-      "version": "0.27.7",
-      "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.27.7.tgz",
-      "integrity": "sha512-+KrvYb/C8zA9CU/g0sR6w2RBw7IGc5J2BPnc3dYc5VJxHCSF1yNMxTV5LQ7GuKteQXZtspjFbiuW5/dOj7H4Yw==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "openharmony"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/vite/node_modules/@esbuild/sunos-x64": {
-      "version": "0.27.7",
-      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.27.7.tgz",
-      "integrity": "sha512-ikktIhFBzQNt/QDyOL580ti9+5mL/YZeUPKU2ivGtGjdTYoqz6jObj6nOMfhASpS4GU4Q/Clh1QtxWAvcYKamA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "sunos"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/vite/node_modules/@esbuild/win32-arm64": {
-      "version": "0.27.7",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.27.7.tgz",
-      "integrity": "sha512-7yRhbHvPqSpRUV7Q20VuDwbjW5kIMwTHpptuUzV+AA46kiPze5Z7qgt6CLCK3pWFrHeNfDd1VKgyP4O+ng17CA==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/vite/node_modules/@esbuild/win32-ia32": {
-      "version": "0.27.7",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.27.7.tgz",
-      "integrity": "sha512-SmwKXe6VHIyZYbBLJrhOoCJRB/Z1tckzmgTLfFYOfpMAx63BJEaL9ExI8x7v0oAO3Zh6D/Oi1gVxEYr5oUCFhw==",
-      "cpu": [
-        "ia32"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/vite/node_modules/@esbuild/win32-x64": {
-      "version": "0.27.7",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.27.7.tgz",
-      "integrity": "sha512-56hiAJPhwQ1R4i+21FVF7V8kSD5zZTdHcVuRFMW0hn753vVfQN8xlx4uOPT4xoGH0Z/oVATuR82AiqSTDIpaHg==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/vite/node_modules/esbuild": {
-      "version": "0.27.7",
-      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.27.7.tgz",
-      "integrity": "sha512-IxpibTjyVnmrIQo5aqNpCgoACA/dTKLTlhMHihVHhdkxKyPO1uBBthumT0rdHmcsk9uMonIWS0m4FljWzILh3w==",
-      "dev": true,
-      "hasInstallScript": true,
-      "license": "MIT",
-      "bin": {
-        "esbuild": "bin/esbuild"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "optionalDependencies": {
-        "@esbuild/aix-ppc64": "0.27.7",
-        "@esbuild/android-arm": "0.27.7",
-        "@esbuild/android-arm64": "0.27.7",
-        "@esbuild/android-x64": "0.27.7",
-        "@esbuild/darwin-arm64": "0.27.7",
-        "@esbuild/darwin-x64": "0.27.7",
-        "@esbuild/freebsd-arm64": "0.27.7",
-        "@esbuild/freebsd-x64": "0.27.7",
-        "@esbuild/linux-arm": "0.27.7",
-        "@esbuild/linux-arm64": "0.27.7",
-        "@esbuild/linux-ia32": "0.27.7",
-        "@esbuild/linux-loong64": "0.27.7",
-        "@esbuild/linux-mips64el": "0.27.7",
-        "@esbuild/linux-ppc64": "0.27.7",
-        "@esbuild/linux-riscv64": "0.27.7",
-        "@esbuild/linux-s390x": "0.27.7",
-        "@esbuild/linux-x64": "0.27.7",
-        "@esbuild/netbsd-arm64": "0.27.7",
-        "@esbuild/netbsd-x64": "0.27.7",
-        "@esbuild/openbsd-arm64": "0.27.7",
-        "@esbuild/openbsd-x64": "0.27.7",
-        "@esbuild/openharmony-arm64": "0.27.7",
-        "@esbuild/sunos-x64": "0.27.7",
-        "@esbuild/win32-arm64": "0.27.7",
-        "@esbuild/win32-ia32": "0.27.7",
-        "@esbuild/win32-x64": "0.27.7"
-      }
-    },
-    "node_modules/vite/node_modules/tinyglobby": {
-      "version": "0.2.17",
-      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz",
-      "integrity": "sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "fdir": "^6.5.0",
-        "picomatch": "^4.0.4"
-      },
-      "engines": {
-        "node": ">=12.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/SuperchupuDev"
-      }
-    },
     "node_modules/watchpack": {
-      "version": "2.4.4",
-      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.4.tgz",
-      "integrity": "sha512-c5EGNOiyxxV5qmTtAB7rbiXxi1ooX1pQKMLX/MIabJjRA0SJBQOjKF+KSVfHkr9U1cADPon0mRiVe/riyaiDUA==",
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.5.1.tgz",
+      "integrity": "sha512-Zn5uXdcFNIA1+1Ei5McRd+iRzfhENPCe7LeABkJtNulSxjma+l7ltNx55BWZkRlwRnpOgHqxnjyaDgJnNXnqzg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -13317,9 +13256,9 @@
       "optional": true
     },
     "node_modules/webpack": {
-      "version": "5.105.0",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.105.0.tgz",
-      "integrity": "sha512-gX/dMkRQc7QOMzgTe6KsYFM7DxeIONQSui1s0n/0xht36HvrgbxtM1xBlgx596NbpHuQU8P7QpKwrZYwUX48nw==",
+      "version": "5.105.2",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.105.2.tgz",
+      "integrity": "sha512-dRXm0a2qcHPUBEzVk8uph0xWSjV/xZxenQQbLwnwP7caQCYpqG1qddwlyEkIDkYn0K8tvmcrZ+bOrzoQ3HxCDw==",
       "dev": true,
       "license": "MIT",
       "peer": true,
@@ -13367,15 +13306,15 @@
       }
     },
     "node_modules/webpack-dev-middleware": {
-      "version": "7.4.2",
-      "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-7.4.2.tgz",
-      "integrity": "sha512-xOO8n6eggxnwYpy1NlzUKpvrjfJTvae5/D6WOK0S2LSo7vjmo5gCM1DbLUmFqrMTJP+W/0YZNctm7jasWvLuBA==",
+      "version": "7.4.5",
+      "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-7.4.5.tgz",
+      "integrity": "sha512-uxQ6YqGdE4hgDKNf7hUiPXOdtkXvBJXrfEGYSx7P7LC8hnUYGK70X6xQXUvXeNyBDDcsiQXpG2m3G9vxowaEuA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "colorette": "^2.0.10",
-        "memfs": "^4.6.0",
-        "mime-types": "^2.1.31",
+        "memfs": "^4.43.1",
+        "mime-types": "^3.0.1",
         "on-finished": "^2.4.1",
         "range-parser": "^1.2.1",
         "schema-utils": "^4.0.0"
@@ -13396,16 +13335,43 @@
         }
       }
     },
+    "node_modules/webpack-dev-middleware/node_modules/mime-db": {
+      "version": "1.54.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.54.0.tgz",
+      "integrity": "sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/webpack-dev-middleware/node_modules/mime-types": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-3.0.2.tgz",
+      "integrity": "sha512-Lbgzdk0h4juoQ9fCKXW4by0UJqj+nOOrI9MJ1sSj4nI8aI2eo1qmvQEie4VD1glsS250n15LsWsYtCugiStS5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "^1.54.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
     "node_modules/webpack-dev-server": {
-      "version": "5.2.2",
-      "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-5.2.2.tgz",
-      "integrity": "sha512-QcQ72gh8a+7JO63TAx/6XZf/CWhgMzu5m0QirvPfGvptOusAxG12w2+aua1Jkjr7hzaWDnJ2n6JFeexMHI+Zjg==",
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-5.2.3.tgz",
+      "integrity": "sha512-9Gyu2F7+bg4Vv+pjbovuYDhHX+mqdqITykfzdM9UyKqKHlsE5aAjRhR+oOEfXW5vBeu8tarzlJFIZva4ZjAdrQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/bonjour": "^3.5.13",
         "@types/connect-history-api-fallback": "^1.5.4",
-        "@types/express": "^4.17.21",
+        "@types/express": "^4.17.25",
         "@types/express-serve-static-core": "^4.17.21",
         "@types/serve-index": "^1.9.4",
         "@types/serve-static": "^1.15.5",
@@ -13415,9 +13381,9 @@
         "bonjour-service": "^1.2.1",
         "chokidar": "^3.6.0",
         "colorette": "^2.0.10",
-        "compression": "^1.7.4",
+        "compression": "^1.8.1",
         "connect-history-api-fallback": "^2.0.0",
-        "express": "^4.21.2",
+        "express": "^4.22.1",
         "graceful-fs": "^4.2.6",
         "http-proxy-middleware": "^2.0.9",
         "ipaddr.js": "^2.1.0",
@@ -13425,7 +13391,7 @@
         "open": "^10.0.3",
         "p-retry": "^6.2.0",
         "schema-utils": "^4.2.0",
-        "selfsigned": "^2.4.1",
+        "selfsigned": "^5.5.0",
         "serve-index": "^1.9.1",
         "sockjs": "^0.3.24",
         "spdy": "^4.0.2",
@@ -13722,6 +13688,25 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/webpack-dev-server/node_modules/open": {
+      "version": "10.2.0",
+      "resolved": "https://registry.npmjs.org/open/-/open-10.2.0.tgz",
+      "integrity": "sha512-YgBpdJHPyQ2UE5x+hlSXcnejzAvD0b22U2OuAP+8OnlJT+PjWPxtgmGqKKc+RgTM63U9gN0YzrYc71R2WT/hTA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "default-browser": "^5.2.1",
+        "define-lazy-prop": "^3.0.0",
+        "is-inside-container": "^1.0.0",
+        "wsl-utils": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/webpack-dev-server/node_modules/path-to-regexp": {
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.13.tgz",
@@ -13826,6 +13811,22 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/webpack-dev-server/node_modules/wsl-utils": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/wsl-utils/-/wsl-utils-0.1.0.tgz",
+      "integrity": "sha512-h3Fbisa2nKGPxCpm89Hk33lBLsnaGBvctQopaBSOW/uIs6FTe1ATyAnKFJrzVs9vpGdsTe73WF3V4lIsk4Gacw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-wsl": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/webpack-merge": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-6.0.1.tgz",
@@ -13880,20 +13881,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/webpack/node_modules/watchpack": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.5.1.tgz",
-      "integrity": "sha512-Zn5uXdcFNIA1+1Ei5McRd+iRzfhENPCe7LeABkJtNulSxjma+l7ltNx55BWZkRlwRnpOgHqxnjyaDgJnNXnqzg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "glob-to-regexp": "^0.4.1",
-        "graceful-fs": "^4.1.2"
-      },
-      "engines": {
-        "node": ">=10.13.0"
-      }
-    },
     "node_modules/websocket-driver": {
       "version": "0.7.5",
       "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.5.tgz",
@@ -14058,16 +14045,17 @@
       }
     },
     "node_modules/wsl-utils": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/wsl-utils/-/wsl-utils-0.1.0.tgz",
-      "integrity": "sha512-h3Fbisa2nKGPxCpm89Hk33lBLsnaGBvctQopaBSOW/uIs6FTe1ATyAnKFJrzVs9vpGdsTe73WF3V4lIsk4Gacw==",
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/wsl-utils/-/wsl-utils-0.3.1.tgz",
+      "integrity": "sha512-g/eziiSUNBSsdDJtCLB8bdYEUMj4jR7AGeUo96p/3dTafgjHhpF4RiCFPiRILwjQoDXx5MqkBr4fwWtR3Ky4Wg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "is-wsl": "^3.1.0"
+        "is-wsl": "^3.1.0",
+        "powershell-utils": "^0.1.0"
       },
       "engines": {
-        "node": ">=18"
+        "node": ">=20"
       },
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
@@ -14131,6 +14119,19 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/yoctocolors": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/yoctocolors/-/yoctocolors-2.1.2.tgz",
+      "integrity": "sha512-CzhO+pFNo8ajLM2d2IW/R93ipy99LWjtwblvC1RsoSUMZgyLbYFr221TnSNT7GjGdYui6P459mw9JH/g/zW2ug==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/yoctocolors-cjs": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/yoctocolors-cjs/-/yoctocolors-cjs-2.1.3.tgz",
@@ -14145,9 +14146,9 @@
       }
     },
     "node_modules/zod": {
-      "version": "4.1.13",
-      "resolved": "https://registry.npmjs.org/zod/-/zod-4.1.13.tgz",
-      "integrity": "sha512-AvvthqfqrAhNH9dnfmrfKzX5upOdjUVJYFqNSlkmGf64gRaTzlPwz99IHYnVs28qYAybvAlBV+H7pn0saFY4Ig==",
+      "version": "4.3.6",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-4.3.6.tgz",
+      "integrity": "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==",
       "dev": true,
       "license": "MIT",
       "peer": true,
diff --git a/web/package.json b/web/package.json
index bd6a7d4..3053e04 100644
--- a/web/package.json
+++ b/web/package.json
@@ -15,14 +15,14 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^20.3.24",
-    "@angular/common": "^20.3.24",
-    "@angular/compiler": "^20.3.24",
-    "@angular/core": "^20.3.24",
-    "@angular/forms": "^20.3.24",
-    "@angular/platform-browser": "^20.3.24",
-    "@angular/platform-browser-dynamic": "^20.3.24",
-    "@angular/router": "^20.3.24",
+    "@angular/animations": "^21.2.16",
+    "@angular/common": "^21.2.16",
+    "@angular/compiler": "^21.2.16",
+    "@angular/core": "^21.2.16",
+    "@angular/forms": "^21.2.16",
+    "@angular/platform-browser": "^21.2.16",
+    "@angular/platform-browser-dynamic": "^21.2.16",
+    "@angular/router": "^21.2.16",
     "dompurify": "^3.4.1",
     "lucide-angular": "^1.0.0",
     "marked": "^18.0.2",
@@ -31,9 +31,9 @@
     "zone.js": "~0.15.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^20.3.27",
-    "@angular/cli": "^20.3.27",
-    "@angular/compiler-cli": "^20.3.24",
+    "@angular-devkit/build-angular": "^21.2.14",
+    "@angular/cli": "^21.2.14",
+    "@angular/compiler-cli": "^21.2.16",
     "@playwright/test": "^1.59.1",
     "typescript": "~5.9.3"
   }
diff --git a/web/src/app/app.component.html b/web/src/app/app.component.html
index dc33ef7..2e0305d 100644
--- a/web/src/app/app.component.html
+++ b/web/src/app/app.component.html
@@ -3,7 +3,7 @@
 <div class="app-container">
   <app-sidebar></app-sidebar>
 
-  <ng-container *ngIf="sidebarConfig$ | async as config">
+  @if (sidebarConfig$ | async; as config) {
     <app-secondary-sidebar
       [title]="config.title"
       [titleRoute]="config.titleRoute || null"
@@ -11,7 +11,7 @@
       [createActions]="config.createActions"
       [bottomPanel]="config.bottomPanel || null">
     </app-secondary-sidebar>
-  </ng-container>
+  }
 
   <main class="main-content">
     <router-outlet></router-outlet>
diff --git a/web/src/app/app.component.ts b/web/src/app/app.component.ts
index ac8a386..d49295f 100644
--- a/web/src/app/app.component.ts
+++ b/web/src/app/app.component.ts
@@ -1,5 +1,5 @@
 import { Component, HostListener } from '@angular/core';
-import { AsyncPipe, NgIf } from '@angular/common';
+import { AsyncPipe } from '@angular/common';
 import { RouterOutlet } from '@angular/router';
 import { SidebarComponent } from './sidebar/sidebar.component';
 import { SecondarySidebarComponent } from './shared/secondary-sidebar/secondary-sidebar.component';
@@ -13,15 +13,14 @@ import { VersionCheckerService } from './services/version-checker.service';
 @Component({
     selector: 'app-root',
     imports: [
-        RouterOutlet,
-        SidebarComponent,
-        SecondarySidebarComponent,
-        GlobalSearchComponent,
-        UpdateBannerComponent,
-        ConfirmDialogHostComponent,
-        AsyncPipe,
-        NgIf,
-    ],
+    RouterOutlet,
+    SidebarComponent,
+    SecondarySidebarComponent,
+    GlobalSearchComponent,
+    UpdateBannerComponent,
+    ConfirmDialogHostComponent,
+    AsyncPipe
+],
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.scss']
 })
diff --git a/web/src/app/campaigns/arc/arc-create/arc-create.component.ts b/web/src/app/campaigns/arc/arc-create/arc-create.component.ts
index d293653..41484fb 100644
--- a/web/src/app/campaigns/arc/arc-create/arc-create.component.ts
+++ b/web/src/app/campaigns/arc/arc-create/arc-create.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
-import { CommonModule } from '@angular/common';
+
 import { ReactiveFormsModule, FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { forkJoin } from 'rxjs';
@@ -20,7 +20,7 @@ import { CAMPAIGN_ICON_OPTIONS } from '../../campaign-icons';
  */
 @Component({
     selector: 'app-arc-create',
-    imports: [CommonModule, ReactiveFormsModule, LucideAngularModule, IconPickerComponent],
+    imports: [ReactiveFormsModule, LucideAngularModule, IconPickerComponent],
     templateUrl: './arc-create.component.html',
     styleUrls: ['./arc-create.component.scss']
 })
diff --git a/web/src/app/campaigns/arc/arc-edit/arc-edit.component.html b/web/src/app/campaigns/arc/arc-edit/arc-edit.component.html
index 6daf9dd..4b2976c 100644
--- a/web/src/app/campaigns/arc/arc-edit/arc-edit.component.html
+++ b/web/src/app/campaigns/arc/arc-edit/arc-edit.component.html
@@ -7,9 +7,9 @@
     </div>
     <div class="header-actions">
       <button type="button" class="btn-ai"
-              (click)="toggleChat()"
-              [class.active]="chatOpen"
-              title="Ouvrir l'Assistant IA pour dialoguer autour de cet arc">
+        (click)="toggleChat()"
+        [class.active]="chatOpen"
+        title="Ouvrir l'Assistant IA pour dialoguer autour de cet arc">
         <lucide-icon [img]="Sparkles" [size]="14"></lucide-icon>
         Assistant IA
       </button>
@@ -58,7 +58,7 @@
         formControlName="name"
         placeholder="Ex: L'Ombre du Nord"
         [class.invalid]="form.get('name')?.invalid && form.get('name')?.touched"
-      />
+        />
     </div>
 
     <div class="field">
@@ -145,25 +145,29 @@
     </div>
 
     <!-- ===== Pages Lore associées (phase B2 cross-context) ===== -->
-    <div class="field" *ngIf="loreId">
-      <label>Pages Lore associées</label>
-      <app-lore-link-picker
-        [value]="relatedPageIds"
-        [availablePages]="availablePages"
-        [loreId]="loreId"
-        (valueChange)="relatedPageIds = $event">
-      </app-lore-link-picker>
-      <small class="field-hint">
-        Liez cet arc à des PNJ, lieux ou éléments du Lore. Cliquez sur un chip pour ouvrir la page associée.
-      </small>
-    </div>
+    @if (loreId) {
+      <div class="field">
+        <label>Pages Lore associées</label>
+        <app-lore-link-picker
+          [value]="relatedPageIds"
+          [availablePages]="availablePages"
+          [loreId]="loreId"
+          (valueChange)="relatedPageIds = $event">
+        </app-lore-link-picker>
+        <small class="field-hint">
+          Liez cet arc à des PNJ, lieux ou éléments du Lore. Cliquez sur un chip pour ouvrir la page associée.
+        </small>
+      </div>
+    }
 
-    <div class="field lore-hint" *ngIf="!loreId">
-      <small class="field-hint">
-        💡 Cette campagne n'est associée à aucun univers. Associez-la à un Lore dans l'écran de la campagne
-        pour pouvoir lier cet arc à des pages du Lore (PNJ, lieux, etc.).
-      </small>
-    </div>
+    @if (!loreId) {
+      <div class="field lore-hint">
+        <small class="field-hint">
+          💡 Cette campagne n'est associée à aucun univers. Associez-la à un Lore dans l'écran de la campagne
+          pour pouvoir lier cet arc à des pages du Lore (PNJ, lieux, etc.).
+        </small>
+      </div>
+    }
 
   </form>
 
diff --git a/web/src/app/campaigns/arc/arc-edit/arc-edit.component.ts b/web/src/app/campaigns/arc/arc-edit/arc-edit.component.ts
index 8320849..d1457dc 100644
--- a/web/src/app/campaigns/arc/arc-edit/arc-edit.component.ts
+++ b/web/src/app/campaigns/arc/arc-edit/arc-edit.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
-import { CommonModule } from '@angular/common';
+
 import { ReactiveFormsModule, FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { forkJoin, of } from 'rxjs';
@@ -33,7 +33,7 @@ import { ConfirmDialogService } from '../../../shared/confirm-dialog/confirm-dia
  */
 @Component({
     selector: 'app-arc-edit',
-    imports: [CommonModule, ReactiveFormsModule, LucideAngularModule, LoreLinkPickerComponent, AiChatDrawerComponent, ImageGalleryComponent, IconPickerComponent],
+    imports: [ReactiveFormsModule, LucideAngularModule, LoreLinkPickerComponent, AiChatDrawerComponent, ImageGalleryComponent, IconPickerComponent],
     templateUrl: './arc-edit.component.html',
     styleUrls: ['./arc-edit.component.scss']
 })
diff --git a/web/src/app/campaigns/arc/arc-view/arc-view.component.html b/web/src/app/campaigns/arc/arc-view/arc-view.component.html
index c688245..ebca109 100644
--- a/web/src/app/campaigns/arc/arc-view/arc-view.component.html
+++ b/web/src/app/campaigns/arc/arc-view/arc-view.component.html
@@ -1,123 +1,150 @@
-<div class="view-page" *ngIf="arc">
-
-  <header class="view-header">
-    <div>
-      <h1>
-        <lucide-icon *ngIf="arc.icon" [img]="resolveCampaignIcon(arc.icon)" [size]="22" class="title-icon"></lucide-icon>
-        {{ arc.name }}
-      </h1>
-      <p class="view-subtitle">
-        {{ arc.type === 'HUB' ? 'Arc en hub (quêtes non linéaires)' : 'Arc narratif' }}
-      </p>
-    </div>
-    <div class="view-actions">
-      <button type="button" class="btn-primary" (click)="editMode()">
-        <lucide-icon [img]="Pencil" [size]="14"></lucide-icon>
-        Modifier
-      </button>
-      <button type="button" class="btn-danger" (click)="deleteArc()" title="Supprimer l'arc et tout son contenu">
-        <lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
-        Supprimer
-      </button>
-    </div>
-  </header>
-
-  <!-- Illustrations (rendu editorial magazine) -->
-  <section class="view-section" *ngIf="(arc.illustrationImageIds?.length ?? 0) > 0">
-    <app-image-gallery [imageIds]="arc.illustrationImageIds ?? []" [layout]="'EDITORIAL'"></app-image-gallery>
-  </section>
-
-  <!-- Cartes & plans -->
-  <section class="view-section" *ngIf="(arc.mapImageIds?.length ?? 0) > 0">
-    <h2 class="view-section-title"><span class="view-section-icon">🗺️</span> Cartes & plans</h2>
-    <app-image-gallery [imageIds]="arc.mapImageIds ?? []" [layout]="'MAPS'"></app-image-gallery>
-  </section>
-
-  <!-- Vue Hub (scénario) : liste les quêtes et leurs conditions, sans statut.
-       Le statut effectif et les actions de jeu vivent dans l'écran d'une Partie. -->
-  <section class="view-section" *ngIf="arc.type === 'HUB'">
-    <h2 class="view-section-title"><span class="view-section-icon">🗺️</span> Quêtes du hub (scénario)</h2>
-
-    <p class="view-section-empty" *ngIf="hubQuests.length === 0">
-      Aucune quête pour ce hub. Créez-en une pour démarrer.
-    </p>
-
-    <div class="hub-quest-grid" *ngIf="hubQuests.length > 0">
-      <button type="button"
-              class="hub-quest-card"
-              *ngFor="let q of hubQuests"
-              (click)="openQuest(q)">
-        <div class="hub-quest-card-head">
-          <span class="hub-quest-card-icon" *ngIf="q.icon">
-            <lucide-icon [img]="resolveCampaignIcon(q.icon)" [size]="18"></lucide-icon>
-          </span>
-          <span class="hub-quest-card-name">{{ q.name }}</span>
-        </div>
-
-        <p class="hub-quest-card-desc" *ngIf="q.description?.trim()">{{ q.description }}</p>
-
-        <div class="hub-quest-card-locked-hint" *ngIf="(q.prerequisites?.length ?? 0) > 0">
-          <lucide-icon [img]="AlertCircle" [size]="13"></lucide-icon>
-          <span>{{ q.prerequisites!.length }} condition(s) de déblocage</span>
-          <ul class="hub-quest-card-prereq-list">
-            <li *ngFor="let p of q.prerequisites">{{ describePrerequisite(p) }}</li>
-          </ul>
-        </div>
-      </button>
-    </div>
-  </section>
-
-  <section class="view-section">
-    <h2 class="view-section-title"><span class="view-section-icon">📜</span> Synopsis</h2>
-    <p class="view-section-body" *ngIf="arc.description?.trim(); else emptyDesc">{{ arc.description }}</p>
-    <ng-template #emptyDesc><p class="view-section-empty">Non renseigné</p></ng-template>
-  </section>
-
-  <div class="view-row">
+@if (arc) {
+  <div class="view-page">
+    <header class="view-header">
+      <div>
+        <h1>
+          @if (arc.icon) {
+            <lucide-icon [img]="resolveCampaignIcon(arc.icon)" [size]="22" class="title-icon"></lucide-icon>
+          }
+          {{ arc.name }}
+        </h1>
+        <p class="view-subtitle">
+          {{ arc.type === 'HUB' ? 'Arc en hub (quêtes non linéaires)' : 'Arc narratif' }}
+        </p>
+      </div>
+      <div class="view-actions">
+        <button type="button" class="btn-primary" (click)="editMode()">
+          <lucide-icon [img]="Pencil" [size]="14"></lucide-icon>
+          Modifier
+        </button>
+        <button type="button" class="btn-danger" (click)="deleteArc()" title="Supprimer l'arc et tout son contenu">
+          <lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
+          Supprimer
+        </button>
+      </div>
+    </header>
+    <!-- Illustrations (rendu editorial magazine) -->
+    @if ((arc.illustrationImageIds?.length ?? 0) > 0) {
+      <section class="view-section">
+        <app-image-gallery [imageIds]="arc.illustrationImageIds ?? []" [layout]="'EDITORIAL'"></app-image-gallery>
+      </section>
+    }
+    <!-- Cartes & plans -->
+    @if ((arc.mapImageIds?.length ?? 0) > 0) {
+      <section class="view-section">
+        <h2 class="view-section-title"><span class="view-section-icon">🗺️</span> Cartes & plans</h2>
+        <app-image-gallery [imageIds]="arc.mapImageIds ?? []" [layout]="'MAPS'"></app-image-gallery>
+      </section>
+    }
+    <!-- Vue Hub (scénario) : liste les quêtes et leurs conditions, sans statut.
+    Le statut effectif et les actions de jeu vivent dans l'écran d'une Partie. -->
+    @if (arc.type === 'HUB') {
+      <section class="view-section">
+        <h2 class="view-section-title"><span class="view-section-icon">🗺️</span> Quêtes du hub (scénario)</h2>
+        @if (hubQuests.length === 0) {
+          <p class="view-section-empty">
+            Aucune quête pour ce hub. Créez-en une pour démarrer.
+          </p>
+        }
+        @if (hubQuests.length > 0) {
+          <div class="hub-quest-grid">
+            @for (q of hubQuests; track q) {
+              <button type="button"
+                class="hub-quest-card"
+                (click)="openQuest(q)">
+                <div class="hub-quest-card-head">
+                  @if (q.icon) {
+                    <span class="hub-quest-card-icon">
+                      <lucide-icon [img]="resolveCampaignIcon(q.icon)" [size]="18"></lucide-icon>
+                    </span>
+                  }
+                  <span class="hub-quest-card-name">{{ q.name }}</span>
+                </div>
+                @if (q.description?.trim()) {
+                  <p class="hub-quest-card-desc">{{ q.description }}</p>
+                }
+                @if ((q.prerequisites?.length ?? 0) > 0) {
+                  <div class="hub-quest-card-locked-hint">
+                    <lucide-icon [img]="AlertCircle" [size]="13"></lucide-icon>
+                    <span>{{ q.prerequisites!.length }} condition(s) de déblocage</span>
+                    <ul class="hub-quest-card-prereq-list">
+                      @for (p of q.prerequisites; track p) {
+                        <li>{{ describePrerequisite(p) }}</li>
+                      }
+                    </ul>
+                  </div>
+                }
+              </button>
+            }
+          </div>
+        }
+      </section>
+    }
     <section class="view-section">
-      <h2 class="view-section-title"><span class="view-section-icon">✨</span> Thèmes principaux</h2>
-      <p class="view-section-body" *ngIf="arc.themes?.trim(); else emptyThemes">{{ arc.themes }}</p>
-      <ng-template #emptyThemes><p class="view-section-empty">Non renseigné</p></ng-template>
+      <h2 class="view-section-title"><span class="view-section-icon">📜</span> Synopsis</h2>
+      @if (arc.description?.trim()) {
+        <p class="view-section-body">{{ arc.description }}</p>
+      } @else {
+        <p class="view-section-empty">Non renseigné</p>
+      }
     </section>
-
+    <div class="view-row">
+      <section class="view-section">
+        <h2 class="view-section-title"><span class="view-section-icon">✨</span> Thèmes principaux</h2>
+        @if (arc.themes?.trim()) {
+          <p class="view-section-body">{{ arc.themes }}</p>
+        } @else {
+          <p class="view-section-empty">Non renseigné</p>
+        }
+      </section>
+      <section class="view-section">
+        <h2 class="view-section-title"><span class="view-section-icon">⚖️</span> Enjeux globaux</h2>
+        @if (arc.stakes?.trim()) {
+          <p class="view-section-body">{{ arc.stakes }}</p>
+        } @else {
+          <p class="view-section-empty">Non renseigné</p>
+        }
+      </section>
+    </div>
     <section class="view-section">
-      <h2 class="view-section-title"><span class="view-section-icon">⚖️</span> Enjeux globaux</h2>
-      <p class="view-section-body" *ngIf="arc.stakes?.trim(); else emptyStakes">{{ arc.stakes }}</p>
-      <ng-template #emptyStakes><p class="view-section-empty">Non renseigné</p></ng-template>
+      <h2 class="view-section-title"><span class="view-section-icon">🎁</span> Récompenses et progression</h2>
+      @if (arc.rewards?.trim()) {
+        <p class="view-section-body">{{ arc.rewards }}</p>
+      } @else {
+        <p class="view-section-empty">Non renseigné</p>
+      }
     </section>
+    <section class="view-section">
+      <h2 class="view-section-title"><span class="view-section-icon">🎬</span> Dénouement prévu</h2>
+      @if (arc.resolution?.trim()) {
+        <p class="view-section-body">{{ arc.resolution }}</p>
+      } @else {
+        <p class="view-section-empty">Non renseigné</p>
+      }
+    </section>
+    <!-- Notes MJ (bloc privé rouge discret) -->
+    @if (arc.gmNotes?.trim()) {
+      <section class="view-section view-section--private">
+        <h2 class="view-section-title">
+          <span class="view-section-icon">🔒</span>
+          Notes et planification du MJ
+        </h2>
+        <p class="view-section-body">{{ arc.gmNotes }}</p>
+      </section>
+    }
+    <!-- Pages Lore liées (chips cliquables) -->
+    @if (loreId && (arc.relatedPageIds?.length ?? 0) > 0) {
+      <section class="view-section">
+        <h2 class="view-section-title"><span class="view-section-icon">🔗</span> Pages Lore associées</h2>
+        <div class="view-chips">
+          @for (relId of arc.relatedPageIds; track relId) {
+            <a class="view-chip"
+              [routerLink]="['/lore', loreId, 'pages', relId]">
+              {{ titleOfRelated(relId) }}
+            </a>
+          }
+        </div>
+      </section>
+    }
   </div>
-
-  <section class="view-section">
-    <h2 class="view-section-title"><span class="view-section-icon">🎁</span> Récompenses et progression</h2>
-    <p class="view-section-body" *ngIf="arc.rewards?.trim(); else emptyRewards">{{ arc.rewards }}</p>
-    <ng-template #emptyRewards><p class="view-section-empty">Non renseigné</p></ng-template>
-  </section>
-
-  <section class="view-section">
-    <h2 class="view-section-title"><span class="view-section-icon">🎬</span> Dénouement prévu</h2>
-    <p class="view-section-body" *ngIf="arc.resolution?.trim(); else emptyResolution">{{ arc.resolution }}</p>
-    <ng-template #emptyResolution><p class="view-section-empty">Non renseigné</p></ng-template>
-  </section>
-
-  <!-- Notes MJ (bloc privé rouge discret) -->
-  <section class="view-section view-section--private" *ngIf="arc.gmNotes?.trim()">
-    <h2 class="view-section-title">
-      <span class="view-section-icon">🔒</span>
-      Notes et planification du MJ
-    </h2>
-    <p class="view-section-body">{{ arc.gmNotes }}</p>
-  </section>
-
-  <!-- Pages Lore liées (chips cliquables) -->
-  <section class="view-section" *ngIf="loreId && (arc.relatedPageIds?.length ?? 0) > 0">
-    <h2 class="view-section-title"><span class="view-section-icon">🔗</span> Pages Lore associées</h2>
-    <div class="view-chips">
-      <a class="view-chip"
-         *ngFor="let relId of arc.relatedPageIds"
-         [routerLink]="['/lore', loreId, 'pages', relId]">
-        {{ titleOfRelated(relId) }}
-      </a>
-    </div>
-  </section>
-
-</div>
+}
diff --git a/web/src/app/campaigns/arc/arc-view/arc-view.component.ts b/web/src/app/campaigns/arc/arc-view/arc-view.component.ts
index 0267ab4..fe50d8f 100644
--- a/web/src/app/campaigns/arc/arc-view/arc-view.component.ts
+++ b/web/src/app/campaigns/arc/arc-view/arc-view.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
-import { CommonModule } from '@angular/common';
+
 import { ActivatedRoute, Router, RouterModule } from '@angular/router';
 import { forkJoin, of } from 'rxjs';
 import { switchMap } from 'rxjs/operators';
@@ -25,7 +25,7 @@ import { ConfirmDialogService } from '../../../shared/confirm-dialog/confirm-dia
  */
 @Component({
     selector: 'app-arc-view',
-    imports: [CommonModule, RouterModule, LucideAngularModule, ImageGalleryComponent],
+    imports: [RouterModule, LucideAngularModule, ImageGalleryComponent],
     templateUrl: './arc-view.component.html',
     styleUrls: ['./arc-view.component.scss']
 })
diff --git a/web/src/app/campaigns/campaign/campaign-create/campaign-create.component.html b/web/src/app/campaigns/campaign/campaign-create/campaign-create.component.html
index 02156ce..dde4cff 100644
--- a/web/src/app/campaigns/campaign/campaign-create/campaign-create.component.html
+++ b/web/src/app/campaigns/campaign/campaign-create/campaign-create.component.html
@@ -18,102 +18,114 @@
           formControlName="name"
           placeholder="Ex: L'Ombre du Nord, Les Héritiers Oubliés..."
           [class.invalid]="form.get('name')?.invalid && form.get('name')?.touched"
-        />
-      </div>
-
-      <div class="field">
-        <label for="campaign-description">Description / Pitch</label>
-        <textarea
-          id="campaign-description"
-          formControlName="description"
-          placeholder="Résumez l'intrigue principale de votre campagne..."
-          rows="5"
-        ></textarea>
-      </div>
-
-      <div class="field">
-        <label for="campaign-player-count">Nombre de joueurs</label>
-        <input id="campaign-player-count" type="number" formControlName="playerCount" min="1" />
-      </div>
-
-      <div class="field">
-        <label for="campaign-lore">Univers associé</label>
-        <select id="campaign-lore" formControlName="loreId">
-          <option value="">— Aucun univers (campagne libre) —</option>
-          <option *ngFor="let lore of availableLores" [value]="lore.id">{{ lore.name }}</option>
-        </select>
-        <p class="hint">
-          Optionnel. Si associée, vous pourrez lier arcs, chapitres et scènes aux pages du Lore.
-          Laissez vide pour un one-shot ou si vous créerez le Lore plus tard.
-        </p>
-      </div>
-
-      <div class="field">
-        <label for="campaign-game-system">Système de JDR</label>
-        <select *ngIf="!creatingGameSystem" id="campaign-game-system" formControlName="gameSystemId">
-          <option value="">— Aucun (campagne générique) —</option>
-          <option *ngFor="let gs of availableGameSystems" [value]="gs.id">{{ gs.name }}</option>
-          <option [value]="CREATE_GAMESYSTEM_SENTINEL">+ Créer un nouveau système…</option>
-        </select>
-
-        <!-- Mode creation inline : remplace temporairement le select. -->
-        <div *ngIf="creatingGameSystem" class="inline-create">
-          <input
-            type="text"
-            [(ngModel)]="newGameSystemName"
-            [ngModelOptions]="{ standalone: true }"
-            placeholder="Nom du nouveau système (ex: D&D 5e, Nimble, Maison)"
-            (keydown.enter)="$event.preventDefault(); submitCreateGameSystem()"
-            (keydown.escape)="cancelCreateGameSystem()"
-            autofocus
           />
-          <div class="inline-create-actions">
-            <button type="button" class="btn-inline-primary"
-                    [disabled]="!newGameSystemName.trim() || creatingGameSystemInFlight"
-                    (click)="submitCreateGameSystem()">
-              <lucide-icon [img]="Check" [size]="14"></lucide-icon>
-              Créer
-            </button>
-            <button type="button" class="btn-inline-secondary" (click)="cancelCreateGameSystem()">
-              Annuler
-            </button>
-          </div>
+        </div>
+
+        <div class="field">
+          <label for="campaign-description">Description / Pitch</label>
+          <textarea
+            id="campaign-description"
+            formControlName="description"
+            placeholder="Résumez l'intrigue principale de votre campagne..."
+            rows="5"
+          ></textarea>
+        </div>
+
+        <div class="field">
+          <label for="campaign-player-count">Nombre de joueurs</label>
+          <input id="campaign-player-count" type="number" formControlName="playerCount" min="1" />
+        </div>
+
+        <div class="field">
+          <label for="campaign-lore">Univers associé</label>
+          <select id="campaign-lore" formControlName="loreId">
+            <option value="">— Aucun univers (campagne libre) —</option>
+            @for (lore of availableLores; track lore) {
+              <option [value]="lore.id">{{ lore.name }}</option>
+            }
+          </select>
           <p class="hint">
-            Création rapide — vous pourrez ajouter les règles, les templates de fiches PJ/PNJ
-            et le reste depuis la section "Systèmes" plus tard.
+            Optionnel. Si associée, vous pourrez lier arcs, chapitres et scènes aux pages du Lore.
+            Laissez vide pour un one-shot ou si vous créerez le Lore plus tard.
           </p>
         </div>
 
-        <p *ngIf="!creatingGameSystem" class="hint">
-          Optionnel. Si défini, l'IA injectera les règles du système (classes, combat, lore...)
-          dans ses suggestions pour respecter les mécaniques du JDR.
-        </p>
-        <p *ngIf="!creatingGameSystem" class="hint hint-warning">
-          ⚠️ Le système de jeu choisi détermine aussi le <strong>template des fiches de PJ et PNJ</strong>.
-          Le changer plus tard rendra les champs des fiches existantes invisibles
-          (les données restent stockées mais ne s'afficheront qu'en revenant à l'ancien système).
-          Choisissez bien dès le départ si possible.
-        </p>
+        <div class="field">
+          <label for="campaign-game-system">Système de JDR</label>
+          @if (!creatingGameSystem) {
+            <select id="campaign-game-system" formControlName="gameSystemId">
+              <option value="">— Aucun (campagne générique) —</option>
+              @for (gs of availableGameSystems; track gs) {
+                <option [value]="gs.id">{{ gs.name }}</option>
+              }
+              <option [value]="CREATE_GAMESYSTEM_SENTINEL">+ Créer un nouveau système…</option>
+            </select>
+          }
+
+          <!-- Mode creation inline : remplace temporairement le select. -->
+          @if (creatingGameSystem) {
+            <div class="inline-create">
+              <input
+                type="text"
+                [(ngModel)]="newGameSystemName"
+                [ngModelOptions]="{ standalone: true }"
+                placeholder="Nom du nouveau système (ex: D&D 5e, Nimble, Maison)"
+                (keydown.enter)="$event.preventDefault(); submitCreateGameSystem()"
+                (keydown.escape)="cancelCreateGameSystem()"
+                autofocus
+                />
+                <div class="inline-create-actions">
+                  <button type="button" class="btn-inline-primary"
+                    [disabled]="!newGameSystemName.trim() || creatingGameSystemInFlight"
+                    (click)="submitCreateGameSystem()">
+                    <lucide-icon [img]="Check" [size]="14"></lucide-icon>
+                    Créer
+                  </button>
+                  <button type="button" class="btn-inline-secondary" (click)="cancelCreateGameSystem()">
+                    Annuler
+                  </button>
+                </div>
+                <p class="hint">
+                  Création rapide — vous pourrez ajouter les règles, les templates de fiches PJ/PNJ
+                  et le reste depuis la section "Systèmes" plus tard.
+                </p>
+              </div>
+            }
+
+            @if (!creatingGameSystem) {
+              <p class="hint">
+                Optionnel. Si défini, l'IA injectera les règles du système (classes, combat, lore...)
+                dans ses suggestions pour respecter les mécaniques du JDR.
+              </p>
+            }
+            @if (!creatingGameSystem) {
+              <p class="hint hint-warning">
+                ⚠️ Le système de jeu choisi détermine aussi le <strong>template des fiches de PJ et PNJ</strong>.
+                Le changer plus tard rendra les champs des fiches existantes invisibles
+                (les données restent stockées mais ne s'afficheront qu'en revenant à l'ancien système).
+                Choisissez bien dès le départ si possible.
+              </p>
+            }
+          </div>
+
+          <div class="info-box">
+            <p><strong>💡 Organisation :</strong> Votre campagne sera structurée en :</p>
+            <ul>
+              <li><strong>Arcs</strong> - Les grandes phases narratives</li>
+              <li><strong>Chapitres</strong> - Les segments d'un arc</li>
+              <li><strong>Scènes</strong> - Les moments de jeu individuels</li>
+            </ul>
+          </div>
+
+          <div class="modal-actions">
+            <button type="submit" class="btn-primary" [disabled]="form.invalid">
+              <lucide-icon [img]="BookCopy" [size]="16"></lucide-icon>
+              Créer la campagne
+            </button>
+            <button type="button" class="btn-secondary" (click)="onCancel()">Annuler</button>
+          </div>
+
+        </form>
+
       </div>
-
-      <div class="info-box">
-        <p><strong>💡 Organisation :</strong> Votre campagne sera structurée en :</p>
-        <ul>
-          <li><strong>Arcs</strong> - Les grandes phases narratives</li>
-          <li><strong>Chapitres</strong> - Les segments d'un arc</li>
-          <li><strong>Scènes</strong> - Les moments de jeu individuels</li>
-        </ul>
-      </div>
-
-      <div class="modal-actions">
-        <button type="submit" class="btn-primary" [disabled]="form.invalid">
-          <lucide-icon [img]="BookCopy" [size]="16"></lucide-icon>
-          Créer la campagne
-        </button>
-        <button type="button" class="btn-secondary" (click)="onCancel()">Annuler</button>
-      </div>
-
-    </form>
-
-  </div>
-</div>
+    </div>
diff --git a/web/src/app/campaigns/campaign/campaign-create/campaign-create.component.ts b/web/src/app/campaigns/campaign/campaign-create/campaign-create.component.ts
index c511305..801acd0 100644
--- a/web/src/app/campaigns/campaign/campaign-create/campaign-create.component.ts
+++ b/web/src/app/campaigns/campaign/campaign-create/campaign-create.component.ts
@@ -1,5 +1,5 @@
 import { Component, EventEmitter, OnInit, Output } from '@angular/core';
-import { CommonModule } from '@angular/common';
+
 import { ReactiveFormsModule, FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { LucideAngularModule, BookCopy, X, Plus, Check } from 'lucide-angular';
@@ -22,7 +22,7 @@ export interface CampaignCreatePayload {
 
 @Component({
     selector: 'app-campaign-create',
-    imports: [CommonModule, ReactiveFormsModule, FormsModule, LucideAngularModule],
+    imports: [ReactiveFormsModule, FormsModule, LucideAngularModule],
     templateUrl: './campaign-create.component.html',
     styleUrls: ['./campaign-create.component.scss']
 })
diff --git a/web/src/app/campaigns/campaign/campaign-detail/campaign-detail.component.html b/web/src/app/campaigns/campaign/campaign-detail/campaign-detail.component.html
index 299d17a..ae505b5 100644
--- a/web/src/app/campaigns/campaign/campaign-detail/campaign-detail.component.html
+++ b/web/src/app/campaigns/campaign/campaign-detail/campaign-detail.component.html
@@ -1,206 +1,233 @@
-<div class="campaign-detail" *ngIf="campaign">
-
-  <!-- ============ Header : mode lecture ============ -->
-  <div class="detail-header" *ngIf="!editing">
-    <div class="header-texts">
-      <h1>{{ campaign.name }}</h1>
-      <p class="description">{{ campaign.description }}</p>
-      <div class="meta">
-        <span class="badge">{{ campaign.playerCount || 0 }} joueurs</span>
-
-        <!-- Badge "Univers" : lien vers le Lore associé si présent -->
-        <a *ngIf="linkedLore"
-           class="badge badge-lore"
-           [routerLink]="['/lore', linkedLore.id]"
-           title="Ouvrir l'univers associé">
-          <lucide-icon [img]="Globe" [size]="12"></lucide-icon>
-          {{ linkedLore.name }}
-        </a>
-
-        <!-- Campagne liée à un Lore qui n'existe plus (supprimé ailleurs) -->
-        <span *ngIf="campaign.loreId && !linkedLore" class="badge badge-lore-missing" title="L'univers associé est introuvable">
-          <lucide-icon [img]="Globe" [size]="12"></lucide-icon>
-          Univers introuvable
-        </span>
+@if (campaign) {
+  <div class="campaign-detail">
+    <!-- ============ Header : mode lecture ============ -->
+    @if (!editing) {
+      <div class="detail-header">
+        <div class="header-texts">
+          <h1>{{ campaign.name }}</h1>
+          <p class="description">{{ campaign.description }}</p>
+          <div class="meta">
+            <span class="badge">{{ campaign.playerCount || 0 }} joueurs</span>
+            <!-- Badge "Univers" : lien vers le Lore associé si présent -->
+            @if (linkedLore) {
+              <a
+                class="badge badge-lore"
+                [routerLink]="['/lore', linkedLore.id]"
+                title="Ouvrir l'univers associé">
+                <lucide-icon [img]="Globe" [size]="12"></lucide-icon>
+                {{ linkedLore.name }}
+              </a>
+            }
+            <!-- Campagne liée à un Lore qui n'existe plus (supprimé ailleurs) -->
+            @if (campaign.loreId && !linkedLore) {
+              <span class="badge badge-lore-missing" title="L'univers associé est introuvable">
+                <lucide-icon [img]="Globe" [size]="12"></lucide-icon>
+                Univers introuvable
+              </span>
+            }
+          </div>
+        </div>
+        <div class="header-actions">
+          <button type="button" class="btn-secondary" (click)="startEdit()">
+            <lucide-icon [img]="Pencil" [size]="14"></lucide-icon>
+            Modifier
+          </button>
+          <button type="button" class="btn-danger" (click)="deleteCampaign()">
+            <lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
+            Supprimer
+          </button>
+        </div>
       </div>
-    </div>
-    <div class="header-actions">
-      <button type="button" class="btn-secondary" (click)="startEdit()">
-        <lucide-icon [img]="Pencil" [size]="14"></lucide-icon>
-        Modifier
-      </button>
-      <button type="button" class="btn-danger" (click)="deleteCampaign()">
-        <lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
-        Supprimer
-      </button>
-    </div>
-  </div>
-
-  <!-- ============ Header : mode édition inline ============ -->
-  <div class="detail-header edit-mode" *ngIf="editing">
-    <div class="field">
-      <label>Nom</label>
-      <input type="text" [(ngModel)]="editName" name="editName" required />
-    </div>
-    <div class="field">
-      <label>Description</label>
-      <textarea [(ngModel)]="editDescription" name="editDescription" rows="3"></textarea>
-    </div>
-    <div class="field">
-      <label>Univers associé</label>
-      <select [(ngModel)]="editLoreId" name="editLoreId">
-        <option value="">— Aucun univers (campagne libre) —</option>
-        <option *ngFor="let lore of availableLores" [value]="lore.id">{{ lore.name }}</option>
-      </select>
-    </div>
-    <div class="field">
-      <label>Système de JDR</label>
-      <select *ngIf="!creatingGameSystem"
+    }
+    <!-- ============ Header : mode édition inline ============ -->
+    @if (editing) {
+      <div class="detail-header edit-mode">
+        <div class="field">
+          <label>Nom</label>
+          <input type="text" [(ngModel)]="editName" name="editName" required />
+        </div>
+        <div class="field">
+          <label>Description</label>
+          <textarea [(ngModel)]="editDescription" name="editDescription" rows="3"></textarea>
+        </div>
+        <div class="field">
+          <label>Univers associé</label>
+          <select [(ngModel)]="editLoreId" name="editLoreId">
+            <option value="">— Aucun univers (campagne libre) —</option>
+            @for (lore of availableLores; track lore) {
+              <option [value]="lore.id">{{ lore.name }}</option>
+            }
+          </select>
+        </div>
+        <div class="field">
+          <label>Système de JDR</label>
+          @if (!creatingGameSystem) {
+            <select
               [(ngModel)]="editGameSystemId"
               name="editGameSystemId"
               (ngModelChange)="onEditGameSystemChange($event)">
-        <option value="">— Aucun (générique) —</option>
-        <option *ngFor="let gs of availableGameSystems" [value]="gs.id">{{ gs.name }}</option>
-        <option [value]="CREATE_GAMESYSTEM_SENTINEL">+ Créer un nouveau système…</option>
-      </select>
-
-      <div *ngIf="creatingGameSystem" class="inline-create">
-        <input
-          type="text"
-          [(ngModel)]="newGameSystemName"
-          name="newGameSystemName"
-          placeholder="Nom du nouveau système (ex: D&D 5e, Nimble, Maison)"
-          (keydown.enter)="$event.preventDefault(); submitCreateGameSystem()"
-          (keydown.escape)="cancelCreateGameSystem()"
-          autofocus
-        />
-        <div class="inline-create-actions">
-          <button type="button" class="btn-inline-primary"
-                  [disabled]="!newGameSystemName.trim() || creatingGameSystemInFlight"
-                  (click)="submitCreateGameSystem()">
-            <lucide-icon [img]="Check" [size]="14"></lucide-icon>
-            Créer
-          </button>
-          <button type="button" class="btn-inline-secondary" (click)="cancelCreateGameSystem()">
-            Annuler
-          </button>
-        </div>
-      </div>
-    </div>
-    <div class="header-actions">
-      <button type="button" class="btn-primary" (click)="saveEdit()" [disabled]="!editName.trim()">
-        Sauvegarder
-      </button>
-      <button type="button" class="btn-secondary" (click)="cancelEdit()">
-        Annuler
-      </button>
-    </div>
-  </div>
-
-  <section class="detail-section personas-section" *ngIf="!editing">
-    <div class="section-header">
-      <h2>Personnages</h2>
-    </div>
-
-    <!-- Les PJ ne sont plus rattachés à la campagne mais à une Partie (Playthrough) :
-         ils se gèrent depuis la page d'une Partie. Ici on ne liste que les PNJ
-         (donnée de scénario, partagée par toutes les Parties). -->
-
-    <!-- Sous-section : Personnages non-joueurs (PNJ) -->
-    <div class="persona-subsection">
-      <div class="subsection-header">
-        <h3>
-          <lucide-icon [img]="Drama" [size]="16"></lucide-icon>
-          Personnages non-joueurs
-          <span class="count-badge" *ngIf="npcs.length > 0">{{ npcs.length }}</span>
-        </h3>
-        <button class="btn-add" (click)="createNpc()">
-          <lucide-icon [img]="Plus" [size]="14"></lucide-icon>
-          Nouveau PNJ
-        </button>
-      </div>
-
-      <div class="characters-grid" *ngIf="npcs.length > 0">
-        <div class="character-card" *ngFor="let npc of npcs" (click)="viewNpc(npc)">
-          <lucide-icon [img]="Drama" [size]="20" class="character-icon character-icon--npc"></lucide-icon>
-          <div class="character-info">
-            <span class="character-name">{{ npc.name }}</span>
-            <span class="character-snippet">{{ personaSnippet(npc) }}</span>
+              <option value="">— Aucun (générique) —</option>
+              @for (gs of availableGameSystems; track gs) {
+                <option [value]="gs.id">{{ gs.name }}</option>
+              }
+              <option [value]="CREATE_GAMESYSTEM_SENTINEL">+ Créer un nouveau système…</option>
+            </select>
+          }
+          @if (creatingGameSystem) {
+            <div class="inline-create">
+              <input
+                type="text"
+                [(ngModel)]="newGameSystemName"
+                name="newGameSystemName"
+                placeholder="Nom du nouveau système (ex: D&D 5e, Nimble, Maison)"
+                (keydown.enter)="$event.preventDefault(); submitCreateGameSystem()"
+                (keydown.escape)="cancelCreateGameSystem()"
+                autofocus
+                />
+                <div class="inline-create-actions">
+                  <button type="button" class="btn-inline-primary"
+                    [disabled]="!newGameSystemName.trim() || creatingGameSystemInFlight"
+                    (click)="submitCreateGameSystem()">
+                    <lucide-icon [img]="Check" [size]="14"></lucide-icon>
+                    Créer
+                  </button>
+                  <button type="button" class="btn-inline-secondary" (click)="cancelCreateGameSystem()">
+                    Annuler
+                  </button>
+                </div>
+              </div>
+            }
+          </div>
+          <div class="header-actions">
+            <button type="button" class="btn-primary" (click)="saveEdit()" [disabled]="!editName.trim()">
+              Sauvegarder
+            </button>
+            <button type="button" class="btn-secondary" (click)="cancelEdit()">
+              Annuler
+            </button>
           </div>
         </div>
-      </div>
-
-      <div class="empty-state empty-state--compact" *ngIf="npcs.length === 0">
-        <p>Aucun PNJ pour le moment.</p>
-        <button class="btn-add-first" (click)="createNpc()">
-          <lucide-icon [img]="Plus" [size]="14"></lucide-icon>
-          Créer votre premier PNJ
-        </button>
-      </div>
+      }
+      @if (!editing) {
+        <section class="detail-section personas-section">
+          <div class="section-header">
+            <h2>Personnages</h2>
+          </div>
+          <!-- Les PJ ne sont plus rattachés à la campagne mais à une Partie (Playthrough) :
+          ils se gèrent depuis la page d'une Partie. Ici on ne liste que les PNJ
+          (donnée de scénario, partagée par toutes les Parties). -->
+          <!-- Sous-section : Personnages non-joueurs (PNJ) -->
+          <div class="persona-subsection">
+            <div class="subsection-header">
+              <h3>
+                <lucide-icon [img]="Drama" [size]="16"></lucide-icon>
+                Personnages non-joueurs
+                @if (npcs.length > 0) {
+                  <span class="count-badge">{{ npcs.length }}</span>
+                }
+              </h3>
+              <button class="btn-add" (click)="createNpc()">
+                <lucide-icon [img]="Plus" [size]="14"></lucide-icon>
+                Nouveau PNJ
+              </button>
+            </div>
+            @if (npcs.length > 0) {
+              <div class="characters-grid">
+                @for (npc of npcs; track npc) {
+                  <div class="character-card" (click)="viewNpc(npc)">
+                    <lucide-icon [img]="Drama" [size]="20" class="character-icon character-icon--npc"></lucide-icon>
+                    <div class="character-info">
+                      <span class="character-name">{{ npc.name }}</span>
+                      <span class="character-snippet">{{ personaSnippet(npc) }}</span>
+                    </div>
+                  </div>
+                }
+              </div>
+            }
+            @if (npcs.length === 0) {
+              <div class="empty-state empty-state--compact">
+                <p>Aucun PNJ pour le moment.</p>
+                <button class="btn-add-first" (click)="createNpc()">
+                  <lucide-icon [img]="Plus" [size]="14"></lucide-icon>
+                  Créer votre premier PNJ
+                </button>
+              </div>
+            }
+          </div>
+        </section>
+      }
+      @if (!editing) {
+        <section class="detail-section arcs-section">
+          <div class="section-header">
+            <h2>Arcs narratifs</h2>
+            <div class="section-header-actions">
+              <button class="btn-add" (click)="createArc()">
+                <lucide-icon [img]="Plus" [size]="14"></lucide-icon>
+                Nouvel arc
+              </button>
+            </div>
+          </div>
+          @if (arcs.length > 0) {
+            <div class="arcs-grid">
+              @for (arc of arcs; track arc) {
+                <div class="arc-card" (click)="openArc(arc)">
+                  <lucide-icon [img]="Swords" [size]="24" class="arc-icon"></lucide-icon>
+                  <span class="arc-name">{{ arc.name }}</span>
+                  <span class="arc-meta">{{ chapterCountByArc[arc.id!] || 0 }} chapitres</span>
+                </div>
+              }
+            </div>
+          }
+          @if (arcs.length === 0) {
+            <div class="empty-state">
+              <lucide-icon [img]="Swords" [size]="40" class="empty-icon"></lucide-icon>
+              <p>Aucun arc narratif pour le moment.</p>
+              <button class="btn-add-first" (click)="createArc()">
+                <lucide-icon [img]="Plus" [size]="14"></lucide-icon>
+                Créer votre premier arc
+              </button>
+            </div>
+          }
+        </section>
+      }
+      <!-- ============ Parties (Playthroughs) ============ -->
+      @if (!editing) {
+        <section class="detail-section playthroughs-section">
+          <div class="section-header">
+            <h2>
+              <lucide-icon [img]="Dices" [size]="18"></lucide-icon>
+              Mes parties
+            </h2>
+            <button class="btn-add" [disabled]="newPlaythroughInFlight" (click)="createPlaythrough()">
+              <lucide-icon [img]="Plus" [size]="14"></lucide-icon>
+              Nouvelle partie
+            </button>
+          </div>
+          @if (playthroughs.length > 0) {
+            <div class="playthroughs-grid">
+              @for (p of playthroughs; track p) {
+                <div class="playthrough-card"
+                  (click)="openPlaythrough(p)">
+                  <lucide-icon [img]="Dices" [size]="22" class="playthrough-icon"></lucide-icon>
+                  <div class="playthrough-info">
+                    <span class="playthrough-name">{{ p.name }}</span>
+                    @if (p.description) {
+                      <span class="playthrough-meta">{{ p.description }}</span>
+                    }
+                  </div>
+                </div>
+              }
+            </div>
+          }
+          @if (playthroughs.length === 0) {
+            <div class="empty-state empty-state--compact">
+              <p>Aucune partie. Créez-en une pour démarrer une session avec une table.</p>
+            </div>
+          }
+        </section>
+      }
+      <!-- Sessions retirées : elles vivent désormais dans une Partie.
+      Les faits narratifs sont définis dans les conditions de chaque quête
+      (chapter-edit > « Conditions de déblocage »). -->
     </div>
-  </section>
-
-  <section class="detail-section arcs-section" *ngIf="!editing">
-    <div class="section-header">
-      <h2>Arcs narratifs</h2>
-      <div class="section-header-actions">
-        <button class="btn-add" (click)="createArc()">
-          <lucide-icon [img]="Plus" [size]="14"></lucide-icon>
-          Nouvel arc
-        </button>
-      </div>
-    </div>
-
-    <div class="arcs-grid" *ngIf="arcs.length > 0">
-      <div class="arc-card" *ngFor="let arc of arcs" (click)="openArc(arc)">
-        <lucide-icon [img]="Swords" [size]="24" class="arc-icon"></lucide-icon>
-        <span class="arc-name">{{ arc.name }}</span>
-        <span class="arc-meta">{{ chapterCountByArc[arc.id!] || 0 }} chapitres</span>
-      </div>
-    </div>
-
-    <div class="empty-state" *ngIf="arcs.length === 0">
-      <lucide-icon [img]="Swords" [size]="40" class="empty-icon"></lucide-icon>
-      <p>Aucun arc narratif pour le moment.</p>
-      <button class="btn-add-first" (click)="createArc()">
-        <lucide-icon [img]="Plus" [size]="14"></lucide-icon>
-        Créer votre premier arc
-      </button>
-    </div>
-  </section>
-
-  <!-- ============ Parties (Playthroughs) ============ -->
-  <section class="detail-section playthroughs-section" *ngIf="!editing">
-    <div class="section-header">
-      <h2>
-        <lucide-icon [img]="Dices" [size]="18"></lucide-icon>
-        Mes parties
-      </h2>
-      <button class="btn-add" [disabled]="newPlaythroughInFlight" (click)="createPlaythrough()">
-        <lucide-icon [img]="Plus" [size]="14"></lucide-icon>
-        Nouvelle partie
-      </button>
-    </div>
-
-    <div class="playthroughs-grid" *ngIf="playthroughs.length > 0">
-      <div class="playthrough-card"
-           *ngFor="let p of playthroughs"
-           (click)="openPlaythrough(p)">
-        <lucide-icon [img]="Dices" [size]="22" class="playthrough-icon"></lucide-icon>
-        <div class="playthrough-info">
-          <span class="playthrough-name">{{ p.name }}</span>
-          <span class="playthrough-meta" *ngIf="p.description">{{ p.description }}</span>
-        </div>
-      </div>
-    </div>
-
-    <div class="empty-state empty-state--compact" *ngIf="playthroughs.length === 0">
-      <p>Aucune partie. Créez-en une pour démarrer une session avec une table.</p>
-    </div>
-  </section>
-
-  <!-- Sessions retirées : elles vivent désormais dans une Partie.
-       Les faits narratifs sont définis dans les conditions de chaque quête
-       (chapter-edit > « Conditions de déblocage »). -->
-
-</div>
+  }
diff --git a/web/src/app/campaigns/campaign/campaign-detail/campaign-detail.component.ts b/web/src/app/campaigns/campaign/campaign-detail/campaign-detail.component.ts
index 35d03b9..9b5b8b5 100644
--- a/web/src/app/campaigns/campaign/campaign-detail/campaign-detail.component.ts
+++ b/web/src/app/campaigns/campaign/campaign-detail/campaign-detail.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
-import { CommonModule } from '@angular/common';
+
 import { ActivatedRoute } from '@angular/router';
 import { FormsModule } from '@angular/forms';
 import { LucideAngularModule, Swords, Plus, Globe, Pencil, Trash2, Dices, Drama, Check, Play, Upload, Sparkles } from 'lucide-angular';
@@ -27,7 +27,7 @@ import { ConfirmDialogService } from '../../../shared/confirm-dialog/confirm-dia
 
 @Component({
     selector: 'app-campaign-detail',
-    imports: [CommonModule, FormsModule, LucideAngularModule, RouterLink],
+    imports: [FormsModule, LucideAngularModule, RouterLink],
     templateUrl: './campaign-detail.component.html',
     styleUrls: ['./campaign-detail.component.scss']
 })
diff --git a/web/src/app/campaigns/campaign/campaign-import/campaign-import.component.html b/web/src/app/campaigns/campaign/campaign-import/campaign-import.component.html
index e33c4d1..3ac9928 100644
--- a/web/src/app/campaigns/campaign/campaign-import/campaign-import.component.html
+++ b/web/src/app/campaigns/campaign/campaign-import/campaign-import.component.html
@@ -13,164 +13,199 @@
   </div>
 
   <!-- Étape 1 : upload (masqué une fois en revue) -->
-  <section class="upload-area" *ngIf="!reviewing">
-    <input #pdfInput type="file" accept="application/pdf,.pdf" hidden (change)="onPdfSelected($event)" />
-    <button type="button" class="btn-primary big" [disabled]="importing" (click)="pdfInput.click()">
-      <lucide-icon [img]="Upload" [size]="16"></lucide-icon>
-      {{ importing ? 'Import en cours…' : 'Choisir un PDF de campagne' }}
-    </button>
-
-    <!-- Progression live -->
-    <div class="import-progress" *ngIf="importing">
-      <p class="import-phase">{{ importPhase }}</p>
-      <div class="progress-bar" *ngIf="importProgress">
-        <div class="progress-fill"
-             [style.width.%]="importProgress.total ? (importProgress.current / importProgress.total) * 100 : 0">
+  @if (!reviewing) {
+    <section class="upload-area">
+      <input #pdfInput type="file" accept="application/pdf,.pdf" hidden (change)="onPdfSelected($event)" />
+      <button type="button" class="btn-primary big" [disabled]="importing" (click)="pdfInput.click()">
+        <lucide-icon [img]="Upload" [size]="16"></lucide-icon>
+        {{ importing ? 'Import en cours…' : 'Choisir un PDF de campagne' }}
+      </button>
+      <!-- Progression live -->
+      @if (importing) {
+        <div class="import-progress">
+          <p class="import-phase">{{ importPhase }}</p>
+          @if (importProgress) {
+            <div class="progress-bar">
+              <div class="progress-fill"
+                [style.width.%]="importProgress.total ? (importProgress.current / importProgress.total) * 100 : 0">
+              </div>
+            </div>
+          }
+          @if (importCounts) {
+            <p class="import-counts">
+              Trouvé jusqu'ici : {{ importCounts.arcs }} arc(s) · {{ importCounts.chapters }} chapitre(s) · {{ importCounts.scenes }} scène(s)
+            </p>
+          }
         </div>
-      </div>
-      <p class="import-counts" *ngIf="importCounts">
-        Trouvé jusqu'ici : {{ importCounts.arcs }} arc(s) · {{ importCounts.chapters }} chapitre(s) · {{ importCounts.scenes }} scène(s)
-      </p>
-    </div>
-
-    <p class="import-error" *ngIf="importError">{{ importError }}</p>
-  </section>
+      }
+      @if (importError) {
+        <p class="import-error">{{ importError }}</p>
+      }
+    </section>
+  }
 
   <!-- Étape 2 : revue de l'arbre éditable -->
-  <section class="review-area" *ngIf="reviewing">
-    <div class="review-header">
-      <p class="review-summary">
-        À créer : <strong>{{ arcCount }}</strong> nouvel(s) arc(s),
-        <strong>{{ chapterCount }}</strong> chapitre(s),
-        <strong>{{ sceneCount }}</strong> scène(s).
-        Les éléments <em>« déjà présent »</em> (grisés) sont affichés pour situer les ajouts ;
-        ils ne seront pas recréés. Modifiez les nouveaux, puis créez.
-      </p>
-    </div>
-
-    <div class="tree">
-      <!-- Arc -->
-      <div class="arc-card" *ngFor="let arc of tree; let ai = index">
-        <div class="node-head arc-head" [class.existing-node]="arc.existing">
-          <button type="button" class="btn-collapse" (click)="toggleArc(arc)">
-            <lucide-icon [img]="arc.collapsed ? ChevronRight : ChevronDown" [size]="16"></lucide-icon>
-          </button>
-          <lucide-icon [img]="Swords" [size]="16" class="node-icon"></lucide-icon>
-          <input type="text" class="node-name" [(ngModel)]="arc.name" [name]="'arc-' + ai"
-                 [readonly]="arc.existing" placeholder="Nom de l'arc" />
-          <span class="badge-existing" *ngIf="arc.existing">déjà présent</span>
-          <button type="button" class="btn-remove" *ngIf="!arc.existing" (click)="removeArc(ai)" title="Supprimer l'arc">
-            <lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
-          </button>
-        </div>
-
-        <div class="node-body" *ngIf="!arc.collapsed">
-          <div class="arc-type-toggle" *ngIf="!arc.existing">
-            <span class="toggle-label">Type :</span>
-            <button type="button" class="type-btn" [class.active]="arc.type === 'LINEAR'"
-                    (click)="setArcType(arc, 'LINEAR')">Linéaire</button>
-            <button type="button" class="type-btn" [class.active]="arc.type === 'HUB'"
-                    (click)="setArcType(arc, 'HUB')">Hub (quêtes)</button>
-          </div>
-
-          <textarea class="node-desc" *ngIf="!arc.existing" [(ngModel)]="arc.description" [name]="'arc-desc-' + ai"
-                    rows="2" placeholder="Synopsis de l'arc (optionnel)"></textarea>
-
-          <!-- Chapitres -->
-          <div class="chapter-card" *ngFor="let chapter of arc.chapters; let ci = index">
-            <div class="node-head chapter-head" [class.existing-node]="chapter.existing">
-              <button type="button" class="btn-collapse" (click)="toggleChapter(chapter)">
-                <lucide-icon [img]="chapter.collapsed ? ChevronRight : ChevronDown" [size]="14"></lucide-icon>
-              </button>
-              <lucide-icon [img]="BookOpen" [size]="14" class="node-icon"></lucide-icon>
-              <input type="text" class="node-name" [(ngModel)]="chapter.name" [name]="'chap-' + ai + '-' + ci"
-                     [readonly]="chapter.existing" placeholder="Nom du chapitre" />
-              <span class="badge-existing" *ngIf="chapter.existing">déjà présent</span>
-              <button type="button" class="btn-remove" *ngIf="!chapter.existing" (click)="removeChapter(arc, ci)" title="Supprimer le chapitre">
-                <lucide-icon [img]="Trash2" [size]="13"></lucide-icon>
+  @if (reviewing) {
+    <section class="review-area">
+      <div class="review-header">
+        <p class="review-summary">
+          À créer : <strong>{{ arcCount }}</strong> nouvel(s) arc(s),
+          <strong>{{ chapterCount }}</strong> chapitre(s),
+          <strong>{{ sceneCount }}</strong> scène(s).
+          Les éléments <em>« déjà présent »</em> (grisés) sont affichés pour situer les ajouts ;
+          ils ne seront pas recréés. Modifiez les nouveaux, puis créez.
+        </p>
+      </div>
+      <div class="tree">
+        <!-- Arc -->
+        @for (arc of tree; track arc; let ai = $index) {
+          <div class="arc-card">
+            <div class="node-head arc-head" [class.existing-node]="arc.existing">
+              <button type="button" class="btn-collapse" (click)="toggleArc(arc)">
+                <lucide-icon [img]="arc.collapsed ? ChevronRight : ChevronDown" [size]="16"></lucide-icon>
               </button>
+              <lucide-icon [img]="Swords" [size]="16" class="node-icon"></lucide-icon>
+              <input type="text" class="node-name" [(ngModel)]="arc.name" [name]="'arc-' + ai"
+                [readonly]="arc.existing" placeholder="Nom de l'arc" />
+              @if (arc.existing) {
+                <span class="badge-existing">déjà présent</span>
+              }
+              @if (!arc.existing) {
+                <button type="button" class="btn-remove" (click)="removeArc(ai)" title="Supprimer l'arc">
+                  <lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
+                </button>
+              }
             </div>
-
-            <div class="node-body" *ngIf="!chapter.collapsed">
-              <textarea class="node-desc" *ngIf="!chapter.existing" [(ngModel)]="chapter.description" [name]="'chap-desc-' + ai + '-' + ci"
-                        rows="2" placeholder="Synopsis du chapitre (optionnel)"></textarea>
-
-              <!-- Scènes -->
-              <div class="scene-card" *ngFor="let scene of chapter.scenes; let si = index"
-                   [class.existing-node]="scene.existing">
-                <div class="scene-row">
-                  <lucide-icon [img]="MapPin" [size]="13" class="node-icon scene-icon"></lucide-icon>
-                  <div class="scene-fields">
-                    <input type="text" class="node-name" [(ngModel)]="scene.name"
-                           [name]="'scene-' + ai + '-' + ci + '-' + si" [readonly]="scene.existing"
-                           placeholder="Nom de la scène" />
-                    <input type="text" class="node-desc-inline" *ngIf="!scene.existing" [(ngModel)]="scene.description"
-                           [name]="'scene-desc-' + ai + '-' + ci + '-' + si" placeholder="Synopsis (optionnel)" />
+            @if (!arc.collapsed) {
+              <div class="node-body">
+                @if (!arc.existing) {
+                  <div class="arc-type-toggle">
+                    <span class="toggle-label">Type :</span>
+                    <button type="button" class="type-btn" [class.active]="arc.type === 'LINEAR'"
+                    (click)="setArcType(arc, 'LINEAR')">Linéaire</button>
+                    <button type="button" class="type-btn" [class.active]="arc.type === 'HUB'"
+                    (click)="setArcType(arc, 'HUB')">Hub (quêtes)</button>
                   </div>
-                  <span class="badge-existing" *ngIf="scene.existing">déjà présent</span>
-                  <button type="button" class="btn-details" *ngIf="!scene.existing" (click)="toggleDetails(scene)"
-                          title="Narration joueurs, notes MJ, pièces">
-                    <lucide-icon [img]="scene.detailsOpen ? ChevronDown : ChevronRight" [size]="12"></lucide-icon>
-                    Détails<span *ngIf="scene.rooms.length"> · {{ scene.rooms.length }} pièce(s)</span>
-                  </button>
-                  <button type="button" class="btn-remove" *ngIf="!scene.existing" (click)="removeScene(chapter, si)" title="Supprimer la scène">
-                    <lucide-icon [img]="Trash2" [size]="13"></lucide-icon>
-                  </button>
-                </div>
-
-                <div class="scene-details" *ngIf="scene.detailsOpen && !scene.existing">
-                  <label class="field-label">À lire aux joueurs</label>
-                  <textarea class="node-desc" [(ngModel)]="scene.playerNarration"
-                            [name]="'scene-pn-' + ai + '-' + ci + '-' + si" rows="3"
-                            placeholder="Texte d'encadré lu aux joueurs (optionnel)"></textarea>
-
-                  <label class="field-label">Notes MJ</label>
-                  <textarea class="node-desc" [(ngModel)]="scene.gmNotes"
-                            [name]="'scene-gm-' + ai + '-' + ci + '-' + si" rows="3"
-                            placeholder="Secrets, développement, conséquences (optionnel)"></textarea>
-
-                  <!-- Pièces (donjon) : vide = scène narrative classique -->
-                  <span class="field-label">Pièces (lieu explorable)</span>
-                  <div class="rooms">
-                    <div class="room-row" *ngFor="let room of scene.rooms; let ri = index">
-                      <input type="text" class="room-name" [(ngModel)]="room.name"
-                             [name]="'room-' + ai + '-' + ci + '-' + si + '-' + ri" placeholder="Pièce" />
-                      <input type="text" class="room-field" [(ngModel)]="room.description"
-                             [name]="'room-desc-' + ai + '-' + ci + '-' + si + '-' + ri" placeholder="Description" />
-                      <input type="text" class="room-field" [(ngModel)]="room.enemies"
-                             [name]="'room-en-' + ai + '-' + ci + '-' + si + '-' + ri" placeholder="Ennemis" />
-                      <input type="text" class="room-field" [(ngModel)]="room.loot"
-                             [name]="'room-loot-' + ai + '-' + ci + '-' + si + '-' + ri" placeholder="Trésor" />
-                      <button type="button" class="btn-remove" (click)="removeRoom(scene, ri)" title="Supprimer la pièce">
-                        <lucide-icon [img]="Trash2" [size]="12"></lucide-icon>
+                }
+                @if (!arc.existing) {
+                  <textarea class="node-desc" [(ngModel)]="arc.description" [name]="'arc-desc-' + ai"
+                  rows="2" placeholder="Synopsis de l'arc (optionnel)"></textarea>
+                }
+                <!-- Chapitres -->
+                @for (chapter of arc.chapters; track chapter; let ci = $index) {
+                  <div class="chapter-card">
+                    <div class="node-head chapter-head" [class.existing-node]="chapter.existing">
+                      <button type="button" class="btn-collapse" (click)="toggleChapter(chapter)">
+                        <lucide-icon [img]="chapter.collapsed ? ChevronRight : ChevronDown" [size]="14"></lucide-icon>
+                      </button>
+                      <lucide-icon [img]="BookOpen" [size]="14" class="node-icon"></lucide-icon>
+                      <input type="text" class="node-name" [(ngModel)]="chapter.name" [name]="'chap-' + ai + '-' + ci"
+                        [readonly]="chapter.existing" placeholder="Nom du chapitre" />
+                      @if (chapter.existing) {
+                        <span class="badge-existing">déjà présent</span>
+                      }
+                      @if (!chapter.existing) {
+                        <button type="button" class="btn-remove" (click)="removeChapter(arc, ci)" title="Supprimer le chapitre">
+                          <lucide-icon [img]="Trash2" [size]="13"></lucide-icon>
+                        </button>
+                      }
+                    </div>
+                    @if (!chapter.collapsed) {
+                      <div class="node-body">
+                        @if (!chapter.existing) {
+                          <textarea class="node-desc" [(ngModel)]="chapter.description" [name]="'chap-desc-' + ai + '-' + ci"
+                          rows="2" placeholder="Synopsis du chapitre (optionnel)"></textarea>
+                        }
+                        <!-- Scènes -->
+                        @for (scene of chapter.scenes; track scene; let si = $index) {
+                          <div class="scene-card"
+                            [class.existing-node]="scene.existing">
+                            <div class="scene-row">
+                              <lucide-icon [img]="MapPin" [size]="13" class="node-icon scene-icon"></lucide-icon>
+                              <div class="scene-fields">
+                                <input type="text" class="node-name" [(ngModel)]="scene.name"
+                                  [name]="'scene-' + ai + '-' + ci + '-' + si" [readonly]="scene.existing"
+                                  placeholder="Nom de la scène" />
+                                @if (!scene.existing) {
+                                  <input type="text" class="node-desc-inline" [(ngModel)]="scene.description"
+                                    [name]="'scene-desc-' + ai + '-' + ci + '-' + si" placeholder="Synopsis (optionnel)" />
+                                }
+                              </div>
+                              @if (scene.existing) {
+                                <span class="badge-existing">déjà présent</span>
+                              }
+                              @if (!scene.existing) {
+                                <button type="button" class="btn-details" (click)="toggleDetails(scene)"
+                                  title="Narration joueurs, notes MJ, pièces">
+                                  <lucide-icon [img]="scene.detailsOpen ? ChevronDown : ChevronRight" [size]="12"></lucide-icon>
+                                  Détails@if (scene.rooms.length) {
+                                  <span> · {{ scene.rooms.length }} pièce(s)</span>
+                                }
+                              </button>
+                            }
+                            @if (!scene.existing) {
+                              <button type="button" class="btn-remove" (click)="removeScene(chapter, si)" title="Supprimer la scène">
+                                <lucide-icon [img]="Trash2" [size]="13"></lucide-icon>
+                              </button>
+                            }
+                          </div>
+                          @if (scene.detailsOpen && !scene.existing) {
+                            <div class="scene-details">
+                              <label class="field-label">À lire aux joueurs</label>
+                              <textarea class="node-desc" [(ngModel)]="scene.playerNarration"
+                                [name]="'scene-pn-' + ai + '-' + ci + '-' + si" rows="3"
+                              placeholder="Texte d'encadré lu aux joueurs (optionnel)"></textarea>
+                              <label class="field-label">Notes MJ</label>
+                              <textarea class="node-desc" [(ngModel)]="scene.gmNotes"
+                                [name]="'scene-gm-' + ai + '-' + ci + '-' + si" rows="3"
+                              placeholder="Secrets, développement, conséquences (optionnel)"></textarea>
+                              <!-- Pièces (donjon) : vide = scène narrative classique -->
+                              <span class="field-label">Pièces (lieu explorable)</span>
+                              <div class="rooms">
+                                @for (room of scene.rooms; track room; let ri = $index) {
+                                  <div class="room-row">
+                                    <input type="text" class="room-name" [(ngModel)]="room.name"
+                                      [name]="'room-' + ai + '-' + ci + '-' + si + '-' + ri" placeholder="Pièce" />
+                                    <input type="text" class="room-field" [(ngModel)]="room.description"
+                                      [name]="'room-desc-' + ai + '-' + ci + '-' + si + '-' + ri" placeholder="Description" />
+                                    <input type="text" class="room-field" [(ngModel)]="room.enemies"
+                                      [name]="'room-en-' + ai + '-' + ci + '-' + si + '-' + ri" placeholder="Ennemis" />
+                                    <input type="text" class="room-field" [(ngModel)]="room.loot"
+                                      [name]="'room-loot-' + ai + '-' + ci + '-' + si + '-' + ri" placeholder="Trésor" />
+                                    <button type="button" class="btn-remove" (click)="removeRoom(scene, ri)" title="Supprimer la pièce">
+                                      <lucide-icon [img]="Trash2" [size]="12"></lucide-icon>
+                                    </button>
+                                  </div>
+                                }
+                                <button type="button" class="btn-add-inline" (click)="addRoom(scene)">
+                                  <lucide-icon [img]="Plus" [size]="12"></lucide-icon> Pièce
+                                </button>
+                              </div>
+                            </div>
+                          }
+                        </div>
+                      }
+                      <button type="button" class="btn-add-inline" (click)="addScene(chapter)">
+                        <lucide-icon [img]="Plus" [size]="12"></lucide-icon> Scène
                       </button>
                     </div>
-                    <button type="button" class="btn-add-inline" (click)="addRoom(scene)">
-                      <lucide-icon [img]="Plus" [size]="12"></lucide-icon> Pièce
-                    </button>
-                  </div>
+                  }
                 </div>
-              </div>
-
-              <button type="button" class="btn-add-inline" (click)="addScene(chapter)">
-                <lucide-icon [img]="Plus" [size]="12"></lucide-icon> Scène
+              }
+              <button type="button" class="btn-add-inline" (click)="addChapter(arc)">
+                <lucide-icon [img]="Plus" [size]="12"></lucide-icon> Chapitre
               </button>
             </div>
-          </div>
-
-          <button type="button" class="btn-add-inline" (click)="addChapter(arc)">
-            <lucide-icon [img]="Plus" [size]="12"></lucide-icon> Chapitre
-          </button>
+          }
         </div>
-      </div>
-
+      }
       <button type="button" class="btn-add" (click)="addArc()">
         <lucide-icon [img]="Plus" [size]="14"></lucide-icon> Ajouter un arc
       </button>
     </div>
-
-    <p class="apply-error" *ngIf="applyError">{{ applyError }}</p>
-
+    @if (applyError) {
+      <p class="apply-error">{{ applyError }}</p>
+    }
     <div class="review-actions">
       <button type="button" class="btn-primary" [disabled]="applying || !hasNewContent" (click)="apply()">
         <lucide-icon [img]="Check" [size]="16"></lucide-icon>
@@ -179,5 +214,6 @@
       <button type="button" class="btn-secondary" (click)="cancel()">Annuler</button>
     </div>
   </section>
+}
 
 </div>
diff --git a/web/src/app/campaigns/campaign/campaign-import/campaign-import.component.ts b/web/src/app/campaigns/campaign/campaign-import/campaign-import.component.ts
index 7e3d74c..7409025 100644
--- a/web/src/app/campaigns/campaign/campaign-import/campaign-import.component.ts
+++ b/web/src/app/campaigns/campaign/campaign-import/campaign-import.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { CommonModule } from '@angular/common';
+
 import { ActivatedRoute, Router } from '@angular/router';
 import { FormsModule } from '@angular/forms';
 import {
@@ -47,7 +47,7 @@ interface ArcNode {
  */
 @Component({
     selector: 'app-campaign-import',
-    imports: [CommonModule, FormsModule, LucideAngularModule],
+    imports: [FormsModule, LucideAngularModule],
     templateUrl: './campaign-import.component.html',
     styleUrls: ['./campaign-import.component.scss']
 })
diff --git a/web/src/app/campaigns/campaigns.component.html b/web/src/app/campaigns/campaigns.component.html
index 32c6534..9cd722e 100644
--- a/web/src/app/campaigns/campaigns.component.html
+++ b/web/src/app/campaigns/campaigns.component.html
@@ -8,18 +8,20 @@
 
   <div class="campaigns-grid">
 
-    <div class="campaign-card" *ngFor="let campaign of campaigns" (click)="navigateToDetail(campaign.id!)">
-      <div class="card-header">
-        <span class="status-badge en-cours">En cours</span>
-        <span class="card-date">{{ campaign.playerCount }} joueurs</span>
+    @for (campaign of campaigns; track campaign) {
+      <div class="campaign-card" (click)="navigateToDetail(campaign.id!)">
+        <div class="card-header">
+          <span class="status-badge en-cours">En cours</span>
+          <span class="card-date">{{ campaign.playerCount }} joueurs</span>
+        </div>
+        <h2>{{ campaign.name }}</h2>
+        <p class="card-description">{{ campaign.description }}</p>
+        <div class="card-stats">
+          <span>⚔️ {{ campaign.arcCount || 0 }} arcs</span>
+          <span>📖 {{ campaign.chapterCount || 0 }} chapitres</span>
+        </div>
       </div>
-      <h2>{{ campaign.name }}</h2>
-      <p class="card-description">{{ campaign.description }}</p>
-      <div class="card-stats">
-        <span>⚔️ {{ campaign.arcCount || 0 }} arcs</span>
-        <span>📖 {{ campaign.chapterCount || 0 }} chapitres</span>
-      </div>
-    </div>
+    }
 
     <div class="campaign-card card-new" (click)="openCreateModal()">
       <div class="new-icon">
@@ -35,8 +37,9 @@
 
 </div>
 
-<app-campaign-create
-  *ngIf="showCreateModal"
-  (close)="onModalClose()"
-  (created)="onCampaignCreated($event)">
-</app-campaign-create>
+@if (showCreateModal) {
+  <app-campaign-create
+    (close)="onModalClose()"
+    (created)="onCampaignCreated($event)">
+  </app-campaign-create>
+}
diff --git a/web/src/app/campaigns/campaigns.component.ts b/web/src/app/campaigns/campaigns.component.ts
index 315c991..bafe5b1 100644
--- a/web/src/app/campaigns/campaigns.component.ts
+++ b/web/src/app/campaigns/campaigns.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { CommonModule } from '@angular/common';
+
 import { Router } from '@angular/router';
 import { LucideAngularModule, Map, Plus } from 'lucide-angular';
 import { CampaignService } from '../services/campaign.service';
@@ -9,7 +9,7 @@ import { CampaignCreateComponent, CampaignCreatePayload } from './campaign/campa
 
 @Component({
     selector: 'app-campaigns',
-    imports: [CommonModule, LucideAngularModule, CampaignCreateComponent],
+    imports: [LucideAngularModule, CampaignCreateComponent],
     templateUrl: './campaigns.component.html',
     styleUrls: ['./campaigns.component.scss']
 })
diff --git a/web/src/app/campaigns/chapter/chapter-create/chapter-create.component.html b/web/src/app/campaigns/chapter/chapter-create/chapter-create.component.html
index dda032b..c445129 100644
--- a/web/src/app/campaigns/chapter/chapter-create/chapter-create.component.html
+++ b/web/src/app/campaigns/chapter/chapter-create/chapter-create.component.html
@@ -2,7 +2,9 @@
 
   <div class="page-header">
     <h1>{{ isHub ? 'Créer une nouvelle quête' : 'Créer un nouveau chapitre' }}</h1>
-    <p class="arc-ref" *ngIf="arcName">{{ isHub ? 'Hub' : 'Arc' }} : {{ arcName }}</p>
+    @if (arcName) {
+      <p class="arc-ref">{{ isHub ? 'Hub' : 'Arc' }} : {{ arcName }}</p>
+    }
   </div>
 
   <form [formGroup]="form" (ngSubmit)="submit()" class="chapter-form">
@@ -15,7 +17,7 @@
         formControlName="name"
         [placeholder]="isHub ? 'Ex: Sauver le marchand disparu' : 'Ex: Chapitre 1: Les Disparitions'"
         [class.invalid]="form.get('name')?.invalid && form.get('name')?.touched"
-      />
+        />
     </div>
 
     <div class="field">
diff --git a/web/src/app/campaigns/chapter/chapter-create/chapter-create.component.ts b/web/src/app/campaigns/chapter/chapter-create/chapter-create.component.ts
index 2457429..3ec60ee 100644
--- a/web/src/app/campaigns/chapter/chapter-create/chapter-create.component.ts
+++ b/web/src/app/campaigns/chapter/chapter-create/chapter-create.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
-import { CommonModule } from '@angular/common';
+
 import { ReactiveFormsModule, FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { forkJoin } from 'rxjs';
@@ -19,7 +19,7 @@ import { CAMPAIGN_ICON_OPTIONS } from '../../campaign-icons';
  */
 @Component({
     selector: 'app-chapter-create',
-    imports: [CommonModule, ReactiveFormsModule, LucideAngularModule, IconPickerComponent],
+    imports: [ReactiveFormsModule, LucideAngularModule, IconPickerComponent],
     templateUrl: './chapter-create.component.html',
     styleUrls: ['./chapter-create.component.scss']
 })
diff --git a/web/src/app/campaigns/chapter/chapter-edit/chapter-edit.component.html b/web/src/app/campaigns/chapter/chapter-edit/chapter-edit.component.html
index 62f9fed..cab487d 100644
--- a/web/src/app/campaigns/chapter/chapter-edit/chapter-edit.component.html
+++ b/web/src/app/campaigns/chapter/chapter-edit/chapter-edit.component.html
@@ -7,9 +7,9 @@
     </div>
     <div class="header-actions">
       <button type="button" class="btn-ai"
-              (click)="toggleChat()"
-              [class.active]="chatOpen"
-              title="Ouvrir l'Assistant IA pour dialoguer autour de ce chapitre">
+        (click)="toggleChat()"
+        [class.active]="chatOpen"
+        title="Ouvrir l'Assistant IA pour dialoguer autour de ce chapitre">
         <lucide-icon [img]="Sparkles" [size]="14"></lucide-icon>
         Assistant IA
       </button>
@@ -27,7 +27,7 @@
   <form [formGroup]="form" (ngSubmit)="submit()" class="edit-form">
 
     <!-- Conditions de déblocage (scénario) — pour TOUT chapitre : arc HUB (= quête)
-         comme arc linéaire (= chapitre conditionnel). Vide = disponible d'emblée. -->
+    comme arc linéaire (= chapitre conditionnel). Vide = disponible d'emblée. -->
     <div class="hub-section">
       <h2 class="hub-section-title">
         {{ parentArc?.type === 'HUB' ? '🗺️ Conditions de déblocage de la quête' : '🔒 Conditions de déblocage du chapitre' }}
@@ -78,7 +78,7 @@
         formControlName="name"
         placeholder="Ex: Chapitre 1: Les Disparitions"
         [class.invalid]="form.get('name')?.invalid && form.get('name')?.touched"
-      />
+        />
     </div>
 
     <div class="field">
@@ -129,25 +129,29 @@
     </div>
 
     <!-- ===== Pages Lore associées (B2 cross-context) ===== -->
-    <div class="field" *ngIf="loreId">
-      <label>Pages Lore associées</label>
-      <app-lore-link-picker
-        [value]="relatedPageIds"
-        [availablePages]="availablePages"
-        [loreId]="loreId"
-        (valueChange)="relatedPageIds = $event">
-      </app-lore-link-picker>
-      <small class="field-hint">
-        Liez ce chapitre à des PNJ, lieux ou éléments du Lore qui y apparaissent.
-      </small>
-    </div>
+    @if (loreId) {
+      <div class="field">
+        <label>Pages Lore associées</label>
+        <app-lore-link-picker
+          [value]="relatedPageIds"
+          [availablePages]="availablePages"
+          [loreId]="loreId"
+          (valueChange)="relatedPageIds = $event">
+        </app-lore-link-picker>
+        <small class="field-hint">
+          Liez ce chapitre à des PNJ, lieux ou éléments du Lore qui y apparaissent.
+        </small>
+      </div>
+    }
 
-    <div class="field" *ngIf="!loreId">
-      <small class="field-hint">
-        💡 Cette campagne n'est associée à aucun univers. Associez-la à un Lore dans l'écran de la campagne
-        pour pouvoir lier ce chapitre à des pages du Lore.
-      </small>
-    </div>
+    @if (!loreId) {
+      <div class="field">
+        <small class="field-hint">
+          💡 Cette campagne n'est associée à aucun univers. Associez-la à un Lore dans l'écran de la campagne
+          pour pouvoir lier ce chapitre à des pages du Lore.
+        </small>
+      </div>
+    }
 
   </form>
 
diff --git a/web/src/app/campaigns/chapter/chapter-edit/chapter-edit.component.ts b/web/src/app/campaigns/chapter/chapter-edit/chapter-edit.component.ts
index 748ee78..07ced4a 100644
--- a/web/src/app/campaigns/chapter/chapter-edit/chapter-edit.component.ts
+++ b/web/src/app/campaigns/chapter/chapter-edit/chapter-edit.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
-import { CommonModule } from '@angular/common';
+
 import { ReactiveFormsModule, FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { forkJoin, of } from 'rxjs';
@@ -34,15 +34,14 @@ import { ConfirmDialogService } from '../../../shared/confirm-dialog/confirm-dia
 @Component({
     selector: 'app-chapter-edit',
     imports: [
-        CommonModule,
-        ReactiveFormsModule,
-        LucideAngularModule,
-        LoreLinkPickerComponent,
-        AiChatDrawerComponent,
-        ImageGalleryComponent,
-        IconPickerComponent,
-        PrerequisiteEditorComponent
-    ],
+    ReactiveFormsModule,
+    LucideAngularModule,
+    LoreLinkPickerComponent,
+    AiChatDrawerComponent,
+    ImageGalleryComponent,
+    IconPickerComponent,
+    PrerequisiteEditorComponent
+],
     templateUrl: './chapter-edit.component.html',
     styleUrls: ['./chapter-edit.component.scss']
 })
diff --git a/web/src/app/campaigns/chapter/chapter-graph/chapter-graph.component.html b/web/src/app/campaigns/chapter/chapter-graph/chapter-graph.component.html
index dfc0d5f..6476406 100644
--- a/web/src/app/campaigns/chapter/chapter-graph/chapter-graph.component.html
+++ b/web/src/app/campaigns/chapter/chapter-graph/chapter-graph.component.html
@@ -11,64 +11,70 @@
     </button>
   </div>
 
-  <div class="graph-empty" *ngIf="scenes.length === 0">
-    <p>Ce chapitre n'a aucune scène. Créez-en pour voir apparaître la carte.</p>
-  </div>
+  @if (scenes.length === 0) {
+    <div class="graph-empty">
+      <p>Ce chapitre n'a aucune scène. Créez-en pour voir apparaître la carte.</p>
+    </div>
+  }
 
-  <div class="graph-container" *ngIf="scenes.length > 0">
-    <svg #svgEl
-         [attr.width]="svgWidth" [attr.height]="svgHeight"
-         class="graph-svg"
-         (pointermove)="onPointerMove($event)"
-         (pointerup)="onPointerUp($event)"
-         (pointercancel)="onPointerUp($event)">
-      <defs>
-        <marker id="arrowhead" viewBox="0 0 10 10" refX="9" refY="5"
-                markerWidth="7" markerHeight="7" orient="auto-start-reverse">
-          <path d="M 0 0 L 10 5 L 0 10 z" fill="#b8c0cc" />
-        </marker>
-      </defs>
-
-      <g class="edges">
-        <g class="edge" *ngFor="let edge of edges">
-          <line [attr.x1]="edge.x1" [attr.y1]="edge.y1"
+  @if (scenes.length > 0) {
+    <div class="graph-container">
+      <svg #svgEl
+        [attr.width]="svgWidth" [attr.height]="svgHeight"
+        class="graph-svg"
+        (pointermove)="onPointerMove($event)"
+        (pointerup)="onPointerUp($event)"
+        (pointercancel)="onPointerUp($event)">
+        <defs>
+          <marker id="arrowhead" viewBox="0 0 10 10" refX="9" refY="5"
+            markerWidth="7" markerHeight="7" orient="auto-start-reverse">
+            <path d="M 0 0 L 10 5 L 0 10 z" fill="#b8c0cc" />
+          </marker>
+        </defs>
+        <g class="edges">
+          @for (edge of edges; track edge) {
+            <g class="edge">
+              <line [attr.x1]="edge.x1" [attr.y1]="edge.y1"
                 [attr.x2]="edge.x2" [attr.y2]="edge.y2"
                 stroke="#b8c0cc" stroke-width="2"
                 marker-end="url(#arrowhead)" />
-          <text *ngIf="edge.label"
-                [attr.x]="edge.labelX"
-                [attr.y]="edge.labelY"
-                text-anchor="middle"
-                class="edge-label"
-                [class.dragging]="draggingLabelKey === edge.key"
-                (pointerdown)="onLabelPointerDown($event, edge)">
-            {{ edge.label }}
-          </text>
+              @if (edge.label) {
+                <text
+                  [attr.x]="edge.labelX"
+                  [attr.y]="edge.labelY"
+                  text-anchor="middle"
+                  class="edge-label"
+                  [class.dragging]="draggingLabelKey === edge.key"
+                  (pointerdown)="onLabelPointerDown($event, edge)">
+                  {{ edge.label }}
+                </text>
+              }
+            </g>
+          }
         </g>
-      </g>
-
-      <g class="nodes">
-        <g class="node"
-           [class.dragging]="draggingId === node.id"
-           *ngFor="let node of nodes"
-           (pointerdown)="onPointerDown($event, node)">
-          <title>{{ node.name }}</title>
-          <rect [attr.x]="node.x" [attr.y]="node.y"
+        <g class="nodes">
+          @for (node of nodes; track node) {
+            <g class="node"
+              [class.dragging]="draggingId === node.id"
+              (pointerdown)="onPointerDown($event, node)">
+              <title>{{ node.name }}</title>
+              <rect [attr.x]="node.x" [attr.y]="node.y"
                 [attr.width]="NODE_WIDTH" [attr.height]="NODE_HEIGHT"
                 rx="8" ry="8" class="node-box" />
-          <text [attr.x]="node.x + NODE_WIDTH / 2"
+              <text [attr.x]="node.x + NODE_WIDTH / 2"
                 [attr.y]="node.y + NODE_HEIGHT / 2 + 5"
                 text-anchor="middle"
                 class="node-label">
-            {{ node.displayName }}
-          </text>
+                {{ node.displayName }}
+              </text>
+            </g>
+          }
         </g>
-      </g>
-    </svg>
-
-    <small class="graph-hint">
-      💡 Cliquez sur une scène pour l'ouvrir, ou glissez-la pour réorganiser la carte. Les scènes non reliées au point d'entrée (scène d'ordre 1) apparaissent en bas.
-    </small>
-  </div>
+      </svg>
+      <small class="graph-hint">
+        💡 Cliquez sur une scène pour l'ouvrir, ou glissez-la pour réorganiser la carte. Les scènes non reliées au point d'entrée (scène d'ordre 1) apparaissent en bas.
+      </small>
+    </div>
+  }
 
 </div>
diff --git a/web/src/app/campaigns/chapter/chapter-graph/chapter-graph.component.ts b/web/src/app/campaigns/chapter/chapter-graph/chapter-graph.component.ts
index d7ebebb..18600ce 100644
--- a/web/src/app/campaigns/chapter/chapter-graph/chapter-graph.component.ts
+++ b/web/src/app/campaigns/chapter/chapter-graph/chapter-graph.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit, OnDestroy, ElementRef, ViewChild } from '@angular/core';
-import { CommonModule } from '@angular/common';
+
 import { ActivatedRoute, Router, RouterModule } from '@angular/router';
 import { forkJoin } from 'rxjs';
 import { LucideAngularModule, ArrowLeft } from 'lucide-angular';
@@ -21,7 +21,7 @@ interface GraphEdge { key: string; label: string; x1: number; y1: number; x2: nu
  */
 @Component({
     selector: 'app-chapter-graph',
-    imports: [CommonModule, RouterModule, LucideAngularModule],
+    imports: [RouterModule, LucideAngularModule],
     templateUrl: './chapter-graph.component.html',
     styleUrls: ['./chapter-graph.component.scss']
 })
diff --git a/web/src/app/campaigns/chapter/chapter-view/chapter-view.component.html b/web/src/app/campaigns/chapter/chapter-view/chapter-view.component.html
index 269bfb0..704eb8b 100644
--- a/web/src/app/campaigns/chapter/chapter-view/chapter-view.component.html
+++ b/web/src/app/campaigns/chapter/chapter-view/chapter-view.component.html
@@ -1,112 +1,127 @@
-<div class="view-page" *ngIf="chapter">
-
-  <header class="view-header">
-    <div>
-      <h1>
-        <lucide-icon *ngIf="chapter.icon" [img]="resolveCampaignIcon(chapter.icon)" [size]="22" class="title-icon"></lucide-icon>
-        {{ chapter.name }}
-      </h1>
-      <p class="view-subtitle">
-        {{ parentArc?.type === 'HUB' ? 'Quête (Hub)' : 'Chapitre' }}
-        <span class="cond-badge" *ngIf="(chapter.prerequisites?.length ?? 0) > 0"
+@if (chapter) {
+  <div class="view-page">
+    <header class="view-header">
+      <div>
+        <h1>
+          @if (chapter.icon) {
+            <lucide-icon [img]="resolveCampaignIcon(chapter.icon)" [size]="22" class="title-icon"></lucide-icon>
+          }
+          {{ chapter.name }}
+        </h1>
+        <p class="view-subtitle">
+          {{ parentArc?.type === 'HUB' ? 'Quête (Hub)' : 'Chapitre' }}
+          @if ((chapter.prerequisites?.length ?? 0) > 0) {
+            <span class="cond-badge"
               title="Ce chapitre a des conditions de déblocage : il se débloque en Partie quand elles sont remplies.">
-          <lucide-icon [img]="Lock" [size]="12"></lucide-icon>
-          Conditionnel
-        </span>
-      </p>
-    </div>
-    <div class="view-actions">
-      <button type="button" class="btn-secondary" (click)="openGraph()"
-              title="Voir l'organigramme des scènes et de leurs branches">
-        <lucide-icon [img]="Network" [size]="14"></lucide-icon>
-        Carte du chapitre
-      </button>
-      <button type="button" class="btn-primary" (click)="editMode()">
-        <lucide-icon [img]="Pencil" [size]="14"></lucide-icon>
-        Modifier
-      </button>
-      <button type="button" class="btn-danger" (click)="deleteChapter()" title="Supprimer le chapitre et ses scènes">
-        <lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
-        Supprimer
-      </button>
-    </div>
-  </header>
-
-  <!-- Conditions de déblocage (scénario, read-only). Visible pour un arc HUB (quête)
-       OU dès qu'un chapitre linéaire porte des conditions. -->
-  <section class="view-section" *ngIf="parentArc?.type === 'HUB' || (chapter.prerequisites?.length ?? 0) > 0">
-    <h2 class="view-section-title"><span class="view-section-icon">🔒</span> Conditions de déblocage</h2>
-
-    <ng-container *ngIf="(chapter.prerequisites?.length ?? 0) > 0; else noPrereqs">
-      <ul class="view-section-body">
-        <li *ngFor="let p of chapter.prerequisites">{{ describePrerequisite(p) }}</li>
-      </ul>
-      <small class="view-section-empty">
-        Pendant une partie, {{ parentArc?.type === 'HUB' ? 'la quête' : 'ce chapitre' }} se débloque
-        dès que toutes ces conditions sont remplies. Le toggle des faits se fait dans l'écran
-        « Faits » de la Partie.
-      </small>
-    </ng-container>
-
-    <ng-template #noPrereqs>
-      <p class="view-section-empty">
-        Aucune condition — cette quête est disponible dès le début dans chaque Partie.
-      </p>
-      <p class="view-section-empty">
-        Cliquez sur <strong>Modifier</strong> pour ajouter des conditions
-        (« quête précédente terminée », « à partir de la session N », « quand un fait est vrai »).
-      </p>
-    </ng-template>
-  </section>
-
-  <!-- Illustrations (rendu editorial magazine) -->
-  <section class="view-section" *ngIf="(chapter.illustrationImageIds?.length ?? 0) > 0">
-    <app-image-gallery [imageIds]="chapter.illustrationImageIds ?? []" [layout]="'EDITORIAL'"></app-image-gallery>
-  </section>
-
-  <!-- Cartes & plans -->
-  <section class="view-section" *ngIf="(chapter.mapImageIds?.length ?? 0) > 0">
-    <h2 class="view-section-title"><span class="view-section-icon">🗺️</span> Cartes & plans</h2>
-    <app-image-gallery [imageIds]="chapter.mapImageIds ?? []" [layout]="'MAPS'"></app-image-gallery>
-  </section>
-
-  <section class="view-section">
-    <h2 class="view-section-title"><span class="view-section-icon">📖</span> Synopsis</h2>
-    <p class="view-section-body" *ngIf="chapter.description?.trim(); else emptyDesc">{{ chapter.description }}</p>
-    <ng-template #emptyDesc><p class="view-section-empty">Non renseigné</p></ng-template>
-  </section>
-
-  <div class="view-row">
+              <lucide-icon [img]="Lock" [size]="12"></lucide-icon>
+              Conditionnel
+            </span>
+          }
+        </p>
+      </div>
+      <div class="view-actions">
+        <button type="button" class="btn-secondary" (click)="openGraph()"
+          title="Voir l'organigramme des scènes et de leurs branches">
+          <lucide-icon [img]="Network" [size]="14"></lucide-icon>
+          Carte du chapitre
+        </button>
+        <button type="button" class="btn-primary" (click)="editMode()">
+          <lucide-icon [img]="Pencil" [size]="14"></lucide-icon>
+          Modifier
+        </button>
+        <button type="button" class="btn-danger" (click)="deleteChapter()" title="Supprimer le chapitre et ses scènes">
+          <lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
+          Supprimer
+        </button>
+      </div>
+    </header>
+    <!-- Conditions de déblocage (scénario, read-only). Visible pour un arc HUB (quête)
+    OU dès qu'un chapitre linéaire porte des conditions. -->
+    @if (parentArc?.type === 'HUB' || (chapter.prerequisites?.length ?? 0) > 0) {
+      <section class="view-section">
+        <h2 class="view-section-title"><span class="view-section-icon">🔒</span> Conditions de déblocage</h2>
+        @if ((chapter.prerequisites?.length ?? 0) > 0) {
+          <ul class="view-section-body">
+            @for (p of chapter.prerequisites; track p) {
+              <li>{{ describePrerequisite(p) }}</li>
+            }
+          </ul>
+          <small class="view-section-empty">
+            Pendant une partie, {{ parentArc?.type === 'HUB' ? 'la quête' : 'ce chapitre' }} se débloque
+            dès que toutes ces conditions sont remplies. Le toggle des faits se fait dans l'écran
+            « Faits » de la Partie.
+          </small>
+        } @else {
+          <p class="view-section-empty">
+            Aucune condition — cette quête est disponible dès le début dans chaque Partie.
+          </p>
+          <p class="view-section-empty">
+            Cliquez sur <strong>Modifier</strong> pour ajouter des conditions
+            (« quête précédente terminée », « à partir de la session N », « quand un fait est vrai »).
+          </p>
+        }
+      </section>
+    }
+    <!-- Illustrations (rendu editorial magazine) -->
+    @if ((chapter.illustrationImageIds?.length ?? 0) > 0) {
+      <section class="view-section">
+        <app-image-gallery [imageIds]="chapter.illustrationImageIds ?? []" [layout]="'EDITORIAL'"></app-image-gallery>
+      </section>
+    }
+    <!-- Cartes & plans -->
+    @if ((chapter.mapImageIds?.length ?? 0) > 0) {
+      <section class="view-section">
+        <h2 class="view-section-title"><span class="view-section-icon">🗺️</span> Cartes & plans</h2>
+        <app-image-gallery [imageIds]="chapter.mapImageIds ?? []" [layout]="'MAPS'"></app-image-gallery>
+      </section>
+    }
     <section class="view-section">
-      <h2 class="view-section-title"><span class="view-section-icon">🎯</span> Objectifs des joueurs</h2>
-      <p class="view-section-body" *ngIf="chapter.playerObjectives?.trim(); else emptyObj">{{ chapter.playerObjectives }}</p>
-      <ng-template #emptyObj><p class="view-section-empty">Non renseigné</p></ng-template>
-    </section>
-
-    <section class="view-section">
-      <h2 class="view-section-title"><span class="view-section-icon">⚡</span> Enjeux narratifs</h2>
-      <p class="view-section-body" *ngIf="chapter.narrativeStakes?.trim(); else emptyNs">{{ chapter.narrativeStakes }}</p>
-      <ng-template #emptyNs><p class="view-section-empty">Non renseigné</p></ng-template>
+      <h2 class="view-section-title"><span class="view-section-icon">📖</span> Synopsis</h2>
+      @if (chapter.description?.trim()) {
+        <p class="view-section-body">{{ chapter.description }}</p>
+      } @else {
+        <p class="view-section-empty">Non renseigné</p>
+      }
     </section>
+    <div class="view-row">
+      <section class="view-section">
+        <h2 class="view-section-title"><span class="view-section-icon">🎯</span> Objectifs des joueurs</h2>
+        @if (chapter.playerObjectives?.trim()) {
+          <p class="view-section-body">{{ chapter.playerObjectives }}</p>
+        } @else {
+          <p class="view-section-empty">Non renseigné</p>
+        }
+      </section>
+      <section class="view-section">
+        <h2 class="view-section-title"><span class="view-section-icon">⚡</span> Enjeux narratifs</h2>
+        @if (chapter.narrativeStakes?.trim()) {
+          <p class="view-section-body">{{ chapter.narrativeStakes }}</p>
+        } @else {
+          <p class="view-section-empty">Non renseigné</p>
+        }
+      </section>
+    </div>
+    @if (chapter.gmNotes?.trim()) {
+      <section class="view-section view-section--private">
+        <h2 class="view-section-title">
+          <span class="view-section-icon">🔒</span>
+          Notes du Maître de Jeu
+        </h2>
+        <p class="view-section-body">{{ chapter.gmNotes }}</p>
+      </section>
+    }
+    @if (loreId && (chapter.relatedPageIds?.length ?? 0) > 0) {
+      <section class="view-section">
+        <h2 class="view-section-title"><span class="view-section-icon">🔗</span> Pages Lore associées</h2>
+        <div class="view-chips">
+          @for (relId of chapter.relatedPageIds; track relId) {
+            <a class="view-chip"
+              [routerLink]="['/lore', loreId, 'pages', relId]">
+              {{ titleOfRelated(relId) }}
+            </a>
+          }
+        </div>
+      </section>
+    }
   </div>
-
-  <section class="view-section view-section--private" *ngIf="chapter.gmNotes?.trim()">
-    <h2 class="view-section-title">
-      <span class="view-section-icon">🔒</span>
-      Notes du Maître de Jeu
-    </h2>
-    <p class="view-section-body">{{ chapter.gmNotes }}</p>
-  </section>
-
-  <section class="view-section" *ngIf="loreId && (chapter.relatedPageIds?.length ?? 0) > 0">
-    <h2 class="view-section-title"><span class="view-section-icon">🔗</span> Pages Lore associées</h2>
-    <div class="view-chips">
-      <a class="view-chip"
-         *ngFor="let relId of chapter.relatedPageIds"
-         [routerLink]="['/lore', loreId, 'pages', relId]">
-        {{ titleOfRelated(relId) }}
-      </a>
-    </div>
-  </section>
-
-</div>
+}
diff --git a/web/src/app/campaigns/chapter/chapter-view/chapter-view.component.ts b/web/src/app/campaigns/chapter/chapter-view/chapter-view.component.ts
index cf20bdf..f564e26 100644
--- a/web/src/app/campaigns/chapter/chapter-view/chapter-view.component.ts
+++ b/web/src/app/campaigns/chapter/chapter-view/chapter-view.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
-import { CommonModule } from '@angular/common';
+
 import { ActivatedRoute, Router, RouterModule } from '@angular/router';
 import { forkJoin, of } from 'rxjs';
 import { switchMap } from 'rxjs/operators';
@@ -24,7 +24,7 @@ import { ConfirmDialogService } from '../../../shared/confirm-dialog/confirm-dia
  */
 @Component({
     selector: 'app-chapter-view',
-    imports: [CommonModule, RouterModule, LucideAngularModule, ImageGalleryComponent],
+    imports: [RouterModule, LucideAngularModule, ImageGalleryComponent],
     templateUrl: './chapter-view.component.html',
     styleUrls: ['./chapter-view.component.scss']
 })
diff --git a/web/src/app/campaigns/character/character-edit/character-edit.component.html b/web/src/app/campaigns/character/character-edit/character-edit.component.html
index 35cb166..63022ba 100644
--- a/web/src/app/campaigns/character/character-edit/character-edit.component.html
+++ b/web/src/app/campaigns/character/character-edit/character-edit.component.html
@@ -10,16 +10,17 @@
         <lucide-icon [img]="User" [size]="22"></lucide-icon>
         {{ characterId ? 'Éditer la fiche' : 'Nouveau personnage' }}
       </h1>
-      <button
-        *ngIf="characterId"
-        type="button"
-        class="btn-ai"
-        (click)="toggleChat()"
-        [class.active]="chatOpen"
-        title="Ouvrir l'Assistant IA pour dialoguer autour de ce PJ">
-        <lucide-icon [img]="Sparkles" [size]="14"></lucide-icon>
-        Assistant IA
-      </button>
+      @if (characterId) {
+        <button
+          type="button"
+          class="btn-ai"
+          (click)="toggleChat()"
+          [class.active]="chatOpen"
+          title="Ouvrir l'Assistant IA pour dialoguer autour de ce PJ">
+          <lucide-icon [img]="Sparkles" [size]="14"></lucide-icon>
+          Assistant IA
+        </button>
+      }
     </div>
   </div>
 
@@ -33,70 +34,72 @@
         [(ngModel)]="name"
         name="name"
         placeholder="Ex: Thorin le Grand-Hache, Lyra l'Errante..."
-      />
-    </div>
-
-    <div class="field-row image-row">
-      <div class="field portrait-field">
-        <label>Portrait</label>
-        <app-single-image-picker
-          [imageId]="portraitImageId"
-          aspectRatio="1 / 1"
-          hint="Carre conseille (400×400)."
-          (imageIdChange)="portraitImageId = $event">
-        </app-single-image-picker>
+        />
       </div>
-      <div class="field header-field">
-        <label>Bandeau / Header</label>
-        <app-single-image-picker
-          [imageId]="headerImageId"
-          aspectRatio="3 / 1"
-          hint="Format paysage conseille (1200×400)."
-          (imageIdChange)="headerImageId = $event">
-        </app-single-image-picker>
+
+      <div class="field-row image-row">
+        <div class="field portrait-field">
+          <label>Portrait</label>
+          <app-single-image-picker
+            [imageId]="portraitImageId"
+            aspectRatio="1 / 1"
+            hint="Carre conseille (400×400)."
+            (imageIdChange)="portraitImageId = $event">
+          </app-single-image-picker>
+        </div>
+        <div class="field header-field">
+          <label>Bandeau / Header</label>
+          <app-single-image-picker
+            [imageId]="headerImageId"
+            aspectRatio="3 / 1"
+            hint="Format paysage conseille (1200×400)."
+            (imageIdChange)="headerImageId = $event">
+          </app-single-image-picker>
+        </div>
       </div>
-    </div>
 
-    <div class="template-fields">
-      <app-dynamic-fields-form
-        [fields]="templateFields"
-        [values]="values"
-        [imageValues]="imageValues"
-        [keyValueValues]="keyValueValues"
-        (valuesChange)="values = $event"
-        (imageValuesChange)="imageValues = $event"
-        (keyValueValuesChange)="keyValueValues = $event">
-      </app-dynamic-fields-form>
-    </div>
+      <div class="template-fields">
+        <app-dynamic-fields-form
+          [fields]="templateFields"
+          [values]="values"
+          [imageValues]="imageValues"
+          [keyValueValues]="keyValueValues"
+          (valuesChange)="values = $event"
+          (imageValuesChange)="imageValues = $event"
+          (keyValueValuesChange)="keyValueValues = $event">
+        </app-dynamic-fields-form>
+      </div>
+
+      <div class="actions">
+        <button type="button" class="btn-primary" [disabled]="!name.trim()" (click)="submit()">
+          <lucide-icon [img]="Save" [size]="16"></lucide-icon>
+          {{ characterId ? 'Enregistrer' : 'Créer' }}
+        </button>
+        <button type="button" class="btn-secondary" (click)="back()">Annuler</button>
+        <span class="spacer"></span>
+        @if (characterId) {
+          <button
+            type="button"
+            class="btn-danger"
+            (click)="deleteCharacter()">
+            <lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
+            Supprimer
+          </button>
+        }
+      </div>
 
-    <div class="actions">
-      <button type="button" class="btn-primary" [disabled]="!name.trim()" (click)="submit()">
-        <lucide-icon [img]="Save" [size]="16"></lucide-icon>
-        {{ characterId ? 'Enregistrer' : 'Créer' }}
-      </button>
-      <button type="button" class="btn-secondary" (click)="back()">Annuler</button>
-      <span class="spacer"></span>
-      <button
-        *ngIf="characterId"
-        type="button"
-        class="btn-danger"
-        (click)="deleteCharacter()">
-        <lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
-        Supprimer
-      </button>
     </div>
 
   </div>
 
-</div>
-
-<app-ai-chat-drawer
-  *ngIf="characterId && campaignId"
-  [campaignId]="campaignId"
-  entityType="character"
-  [entityId]="characterId"
-  [isOpen]="chatOpen"
-  welcomeMessage="Je vois cette fiche de personnage. Demande-moi de proposer stats, backstory, équipement ou objectifs personnels."
-  [quickSuggestions]="chatQuickSuggestions"
-  (close)="chatOpen = false">
-</app-ai-chat-drawer>
+  @if (characterId && campaignId) {
+    <app-ai-chat-drawer
+      [campaignId]="campaignId"
+      entityType="character"
+      [entityId]="characterId"
+      [isOpen]="chatOpen"
+      welcomeMessage="Je vois cette fiche de personnage. Demande-moi de proposer stats, backstory, équipement ou objectifs personnels."
+      [quickSuggestions]="chatQuickSuggestions"
+      (close)="chatOpen = false">
+    </app-ai-chat-drawer>
+  }
diff --git a/web/src/app/campaigns/character/character-edit/character-edit.component.ts b/web/src/app/campaigns/character/character-edit/character-edit.component.ts
index 8238e3a..ee974e1 100644
--- a/web/src/app/campaigns/character/character-edit/character-edit.component.ts
+++ b/web/src/app/campaigns/character/character-edit/character-edit.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { CommonModule } from '@angular/common';
+
 import { ActivatedRoute, Router } from '@angular/router';
 import { FormsModule } from '@angular/forms';
 import { LucideAngularModule, Save, ArrowLeft, User, Trash2, Sparkles } from 'lucide-angular';
@@ -26,7 +26,7 @@ import { ConfirmDialogService } from '../../../shared/confirm-dialog/confirm-dia
  */
 @Component({
     selector: 'app-character-edit',
-    imports: [CommonModule, FormsModule, LucideAngularModule, AiChatDrawerComponent, DynamicFieldsFormComponent, SingleImagePickerComponent],
+    imports: [FormsModule, LucideAngularModule, AiChatDrawerComponent, DynamicFieldsFormComponent, SingleImagePickerComponent],
     templateUrl: './character-edit.component.html',
     styleUrls: ['./character-edit.component.scss']
 })
diff --git a/web/src/app/campaigns/character/character-view/character-view.component.html b/web/src/app/campaigns/character/character-view/character-view.component.html
index 1c72258..26dedfb 100644
--- a/web/src/app/campaigns/character/character-view/character-view.component.html
+++ b/web/src/app/campaigns/character/character-view/character-view.component.html
@@ -5,10 +5,12 @@
       Retour
     </button>
     <span class="spacer"></span>
-    <button class="btn-ai" (click)="toggleChat()" [class.active]="chatOpen" *ngIf="characterId">
-      <lucide-icon [img]="Sparkles" [size]="14"></lucide-icon>
-      Assistant IA
-    </button>
+    @if (characterId) {
+      <button class="btn-ai" (click)="toggleChat()" [class.active]="chatOpen">
+        <lucide-icon [img]="Sparkles" [size]="14"></lucide-icon>
+        Assistant IA
+      </button>
+    }
     <button class="btn-edit" (click)="edit()">
       <lucide-icon [img]="Edit3" [size]="14"></lucide-icon>
       Editer
@@ -18,11 +20,12 @@
   <app-persona-view [persona]="character" [templateFields]="templateFields"></app-persona-view>
 </div>
 
-<app-ai-chat-drawer
-  *ngIf="characterId && campaignId"
-  [campaignId]="campaignId"
-  entityType="character"
-  [entityId]="characterId"
-  [isOpen]="chatOpen"
-  (close)="chatOpen = false">
-</app-ai-chat-drawer>
+@if (characterId && campaignId) {
+  <app-ai-chat-drawer
+    [campaignId]="campaignId"
+    entityType="character"
+    [entityId]="characterId"
+    [isOpen]="chatOpen"
+    (close)="chatOpen = false">
+  </app-ai-chat-drawer>
+}
diff --git a/web/src/app/campaigns/character/character-view/character-view.component.ts b/web/src/app/campaigns/character/character-view/character-view.component.ts
index d080cb4..723edd3 100644
--- a/web/src/app/campaigns/character/character-view/character-view.component.ts
+++ b/web/src/app/campaigns/character/character-view/character-view.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { CommonModule } from '@angular/common';
+
 import { ActivatedRoute, Router } from '@angular/router';
 import { LucideAngularModule, ArrowLeft, Edit3, Sparkles } from 'lucide-angular';
 import { CharacterService } from '../../../services/character.service';
@@ -17,7 +17,7 @@ import { AiChatDrawerComponent } from '../../../shared/ai-chat-drawer/ai-chat-dr
  */
 @Component({
     selector: 'app-character-view',
-    imports: [CommonModule, LucideAngularModule, PersonaViewComponent, AiChatDrawerComponent],
+    imports: [LucideAngularModule, PersonaViewComponent, AiChatDrawerComponent],
     templateUrl: './character-view.component.html',
     styleUrls: ['./character-view.component.scss']
 })
diff --git a/web/src/app/campaigns/item-catalog/item-catalog-edit/item-catalog-edit.component.html b/web/src/app/campaigns/item-catalog/item-catalog-edit/item-catalog-edit.component.html
index 117965f..a93c082 100644
--- a/web/src/app/campaigns/item-catalog/item-catalog-edit/item-catalog-edit.component.html
+++ b/web/src/app/campaigns/item-catalog/item-catalog-edit/item-catalog-edit.component.html
@@ -12,7 +12,9 @@
 
   <h1>{{ catalogId ? 'Éditer le catalogue' : 'Nouveau catalogue d\'objets' }}</h1>
 
-  <div class="error" *ngIf="errorMessage">{{ errorMessage }}</div>
+  @if (errorMessage) {
+    <div class="error">{{ errorMessage }}</div>
+  }
 
   <div class="form-row">
     <label for="ic-name">Nom *</label>
@@ -29,13 +31,15 @@
     <div class="ai-title"><lucide-icon [img]="Sparkles" [size]="15"></lucide-icon> Générer avec l'IA</div>
     <p class="ai-hint">Décris la boutique/le butin ; l'IA propose les objets (revois-les avant d'enregistrer). Contextualisé avec ta campagne.</p>
     <textarea rows="2" [(ngModel)]="aiPrompt"
-              placeholder="Ex: boutique d'alchimiste dans une cité portuaire, objets exotiques"></textarea>
+    placeholder="Ex: boutique d'alchimiste dans une cité portuaire, objets exotiques"></textarea>
     <div class="ai-actions">
       <button class="btn-ai" (click)="generateWithAI()" [disabled]="generating">
         <lucide-icon [img]="Sparkles" [size]="14"></lucide-icon>
         {{ generating ? 'Génération…' : 'Générer' }}
       </button>
-      <span class="ai-error" *ngIf="aiError">{{ aiError }}</span>
+      @if (aiError) {
+        <span class="ai-error">{{ aiError }}</span>
+      }
     </div>
   </div>
 
@@ -54,15 +58,19 @@
     <span class="c-del"></span>
   </div>
 
-  <div class="item-row" *ngFor="let it of items; let i = index">
-    <input class="c-name" type="text" [(ngModel)]="it.name" placeholder="Objet">
-    <input class="c-price" type="text" [(ngModel)]="it.price" placeholder="50 po">
-    <input class="c-cat" type="text" [(ngModel)]="it.category" placeholder="Armes">
-    <input class="c-desc" type="text" [(ngModel)]="it.description" placeholder="Effet / détails">
-    <button class="c-del btn-del" (click)="removeItem(i)" title="Supprimer">
-      <lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
-    </button>
-  </div>
+  @for (it of items; track it; let i = $index) {
+    <div class="item-row">
+      <input class="c-name" type="text" [(ngModel)]="it.name" placeholder="Objet">
+      <input class="c-price" type="text" [(ngModel)]="it.price" placeholder="50 po">
+      <input class="c-cat" type="text" [(ngModel)]="it.category" placeholder="Armes">
+      <input class="c-desc" type="text" [(ngModel)]="it.description" placeholder="Effet / détails">
+      <button class="c-del btn-del" (click)="removeItem(i)" title="Supprimer">
+        <lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
+      </button>
+    </div>
+  }
 
-  <p class="empty-hint" *ngIf="items.length === 0">Aucun objet — clique « Ajouter ».</p>
+  @if (items.length === 0) {
+    <p class="empty-hint">Aucun objet — clique « Ajouter ».</p>
+  }
 </div>
diff --git a/web/src/app/campaigns/item-catalog/item-catalog-edit/item-catalog-edit.component.ts b/web/src/app/campaigns/item-catalog/item-catalog-edit/item-catalog-edit.component.ts
index 0e6aca3..554be62 100644
--- a/web/src/app/campaigns/item-catalog/item-catalog-edit/item-catalog-edit.component.ts
+++ b/web/src/app/campaigns/item-catalog/item-catalog-edit/item-catalog-edit.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { CommonModule } from '@angular/common';
+
 import { FormsModule } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { LucideAngularModule, ArrowLeft, Save, Plus, Trash2, Sparkles } from 'lucide-angular';
@@ -14,7 +14,7 @@ import { ItemCatalog, CatalogItem, ItemCatalogCreate } from '../../../services/i
  */
 @Component({
     selector: 'app-item-catalog-edit',
-    imports: [CommonModule, FormsModule, LucideAngularModule],
+    imports: [FormsModule, LucideAngularModule],
     templateUrl: './item-catalog-edit.component.html',
     styleUrls: ['./item-catalog-edit.component.scss']
 })
diff --git a/web/src/app/campaigns/item-catalog/item-catalog-list/item-catalog-list.component.html b/web/src/app/campaigns/item-catalog/item-catalog-list/item-catalog-list.component.html
index 2efcb73..5ece329 100644
--- a/web/src/app/campaigns/item-catalog/item-catalog-list/item-catalog-list.component.html
+++ b/web/src/app/campaigns/item-catalog/item-catalog-list/item-catalog-list.component.html
@@ -18,14 +18,18 @@
   </header>
 
   <div class="icl-list">
-    <p class="empty" *ngIf="catalogs.length === 0">Aucun catalogue pour l'instant.</p>
-    <button class="icl-item" *ngFor="let c of catalogs" (click)="open(c)">
-      <lucide-icon [img]="Package" [size]="16"></lucide-icon>
-      <span class="icl-item-name">{{ c.name }}</span>
-      <span class="icl-item-count">{{ c.items.length }} objet(s)</span>
-      <span class="icl-del" (click)="remove(c, $event)" title="Supprimer">
-        <lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
-      </span>
-    </button>
+    @if (catalogs.length === 0) {
+      <p class="empty">Aucun catalogue pour l'instant.</p>
+    }
+    @for (c of catalogs; track c) {
+      <button class="icl-item" (click)="open(c)">
+        <lucide-icon [img]="Package" [size]="16"></lucide-icon>
+        <span class="icl-item-name">{{ c.name }}</span>
+        <span class="icl-item-count">{{ c.items.length }} objet(s)</span>
+        <span class="icl-del" (click)="remove(c, $event)" title="Supprimer">
+          <lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
+        </span>
+      </button>
+    }
   </div>
 </div>
diff --git a/web/src/app/campaigns/item-catalog/item-catalog-list/item-catalog-list.component.ts b/web/src/app/campaigns/item-catalog/item-catalog-list/item-catalog-list.component.ts
index 7c2a265..d8fe10d 100644
--- a/web/src/app/campaigns/item-catalog/item-catalog-list/item-catalog-list.component.ts
+++ b/web/src/app/campaigns/item-catalog/item-catalog-list/item-catalog-list.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { CommonModule } from '@angular/common';
+
 import { ActivatedRoute, Router } from '@angular/router';
 import { LucideAngularModule, ArrowLeft, Plus, Trash2, Package } from 'lucide-angular';
 import { ItemCatalogService } from '../../../services/item-catalog.service';
@@ -13,7 +13,7 @@ import { ConfirmDialogService } from '../../../shared/confirm-dialog/confirm-dia
  */
 @Component({
     selector: 'app-item-catalog-list',
-    imports: [CommonModule, LucideAngularModule],
+    imports: [LucideAngularModule],
     templateUrl: './item-catalog-list.component.html',
     styleUrls: ['./item-catalog-list.component.scss']
 })
diff --git a/web/src/app/campaigns/item-catalog/item-catalog-view/item-catalog-view.component.html b/web/src/app/campaigns/item-catalog/item-catalog-view/item-catalog-view.component.html
index fc0cfab..497da7b 100644
--- a/web/src/app/campaigns/item-catalog/item-catalog-view/item-catalog-view.component.html
+++ b/web/src/app/campaigns/item-catalog/item-catalog-view/item-catalog-view.component.html
@@ -1,33 +1,42 @@
-<div class="ic-page" *ngIf="catalog">
-  <div class="ic-toolbar">
-    <button class="btn-back" (click)="back()">
-      <lucide-icon [img]="ArrowLeft" [size]="14"></lucide-icon> Retour
-    </button>
-    <span class="spacer"></span>
-    <button class="btn-edit" (click)="edit()">
-      <lucide-icon [img]="Edit3" [size]="14"></lucide-icon> Éditer
-    </button>
+@if (catalog) {
+  <div class="ic-page">
+    <div class="ic-toolbar">
+      <button class="btn-back" (click)="back()">
+        <lucide-icon [img]="ArrowLeft" [size]="14"></lucide-icon> Retour
+      </button>
+      <span class="spacer"></span>
+      <button class="btn-edit" (click)="edit()">
+        <lucide-icon [img]="Edit3" [size]="14"></lucide-icon> Éditer
+      </button>
+    </div>
+    <header class="ic-header">
+      <h1><lucide-icon [img]="Package" [size]="22"></lucide-icon> {{ catalog.name }}</h1>
+      @if (catalog.description) {
+        <p class="ic-desc">{{ catalog.description }}</p>
+      }
+    </header>
+    @if (catalog.items.length === 0) {
+      <p class="ic-empty">
+        Aucun objet — édite le catalogue pour en ajouter.
+      </p>
+    }
+    @for (g of groups; track g) {
+      <section class="ic-group">
+        @if (g.category !== '—') {
+          <h2>{{ g.category }}</h2>
+        }
+        <table>
+          <tbody>
+            @for (it of g.items; track it) {
+              <tr>
+                <td class="col-name">{{ it.name }}</td>
+                <td class="col-price">{{ it.price }}</td>
+                <td class="col-desc">{{ it.description }}</td>
+              </tr>
+            }
+          </tbody>
+        </table>
+      </section>
+    }
   </div>
-
-  <header class="ic-header">
-    <h1><lucide-icon [img]="Package" [size]="22"></lucide-icon> {{ catalog.name }}</h1>
-    <p class="ic-desc" *ngIf="catalog.description">{{ catalog.description }}</p>
-  </header>
-
-  <p class="ic-empty" *ngIf="catalog.items.length === 0">
-    Aucun objet — édite le catalogue pour en ajouter.
-  </p>
-
-  <section class="ic-group" *ngFor="let g of groups">
-    <h2 *ngIf="g.category !== '—'">{{ g.category }}</h2>
-    <table>
-      <tbody>
-        <tr *ngFor="let it of g.items">
-          <td class="col-name">{{ it.name }}</td>
-          <td class="col-price">{{ it.price }}</td>
-          <td class="col-desc">{{ it.description }}</td>
-        </tr>
-      </tbody>
-    </table>
-  </section>
-</div>
+}
diff --git a/web/src/app/campaigns/item-catalog/item-catalog-view/item-catalog-view.component.ts b/web/src/app/campaigns/item-catalog/item-catalog-view/item-catalog-view.component.ts
index fd380b6..e467df6 100644
--- a/web/src/app/campaigns/item-catalog/item-catalog-view/item-catalog-view.component.ts
+++ b/web/src/app/campaigns/item-catalog/item-catalog-view/item-catalog-view.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { CommonModule } from '@angular/common';
+
 import { ActivatedRoute, Router } from '@angular/router';
 import { LucideAngularModule, ArrowLeft, Edit3, Package } from 'lucide-angular';
 import { ItemCatalogService } from '../../../services/item-catalog.service';
@@ -14,7 +14,7 @@ interface ItemGroup { category: string; items: CatalogItem[]; }
  */
 @Component({
     selector: 'app-item-catalog-view',
-    imports: [CommonModule, LucideAngularModule],
+    imports: [LucideAngularModule],
     templateUrl: './item-catalog-view.component.html',
     styleUrls: ['./item-catalog-view.component.scss']
 })
diff --git a/web/src/app/campaigns/notebook/notebook-action-card/notebook-action-card.component.html b/web/src/app/campaigns/notebook/notebook-action-card/notebook-action-card.component.html
index fbb75a9..415c4f1 100644
--- a/web/src/app/campaigns/notebook/notebook-action-card/notebook-action-card.component.html
+++ b/web/src/app/campaigns/notebook/notebook-action-card/notebook-action-card.component.html
@@ -5,37 +5,55 @@
     <span class="nac-name">{{ action.name }}</span>
   </div>
 
-  <p class="nac-desc" *ngIf="action.description">{{ action.description }}</p>
+  @if (action.description) {
+    <p class="nac-desc">{{ action.description }}</p>
+  }
 
   <!-- Cibles -->
-  <div class="nac-targets" *ngIf="status !== 'created' && needsArc">
-    <label>
-      Arc
-      <select [(ngModel)]="selectedArcId" (ngModelChange)="syncChapter()">
-        <option *ngFor="let a of arcs" [value]="a.id">{{ a.name }}</option>
-      </select>
-    </label>
-    <label *ngIf="needsChapter">
-      Chapitre
-      <select [(ngModel)]="selectedChapterId">
-        <option *ngFor="let c of targetChapters" [value]="c.id">{{ c.name }}</option>
-      </select>
-    </label>
-  </div>
+  @if (status !== 'created' && needsArc) {
+    <div class="nac-targets">
+      <label>
+        Arc
+        <select [(ngModel)]="selectedArcId" (ngModelChange)="syncChapter()">
+          @for (a of arcs; track a) {
+            <option [value]="a.id">{{ a.name }}</option>
+          }
+        </select>
+      </label>
+      @if (needsChapter) {
+        <label>
+          Chapitre
+          <select [(ngModel)]="selectedChapterId">
+            @for (c of targetChapters; track c) {
+              <option [value]="c.id">{{ c.name }}</option>
+            }
+          </select>
+        </label>
+      }
+    </div>
+  }
 
-  <p class="nac-warn" *ngIf="needsArc && arcs.length === 0">
-    Crée d'abord un arc {{ needsChapter ? 'et un chapitre ' : '' }}dans la campagne pour pouvoir y rattacher cet élément.
-  </p>
+  @if (needsArc && arcs.length === 0) {
+    <p class="nac-warn">
+      Crée d'abord un arc {{ needsChapter ? 'et un chapitre ' : '' }}dans la campagne pour pouvoir y rattacher cet élément.
+    </p>
+  }
 
   <div class="nac-foot">
-    <button class="nac-create" *ngIf="status !== 'created'" (click)="create()" [disabled]="!canCreate">
-      <lucide-icon [img]="Plus" [size]="13"></lucide-icon>
-      {{ status === 'creating' ? 'Création…' : 'Créer dans la campagne' }}
-    </button>
-    <button class="nac-open" *ngIf="status === 'created'" (click)="openCreated()">
-      <lucide-icon [img]="Check" [size]="13"></lucide-icon> Créé — ouvrir
-      <lucide-icon [img]="ExternalLink" [size]="12"></lucide-icon>
-    </button>
-    <span class="nac-error" *ngIf="status === 'error'">{{ errorMsg }}</span>
+    @if (status !== 'created') {
+      <button class="nac-create" (click)="create()" [disabled]="!canCreate">
+        <lucide-icon [img]="Plus" [size]="13"></lucide-icon>
+        {{ status === 'creating' ? 'Création…' : 'Créer dans la campagne' }}
+      </button>
+    }
+    @if (status === 'created') {
+      <button class="nac-open" (click)="openCreated()">
+        <lucide-icon [img]="Check" [size]="13"></lucide-icon> Créé — ouvrir
+        <lucide-icon [img]="ExternalLink" [size]="12"></lucide-icon>
+      </button>
+    }
+    @if (status === 'error') {
+      <span class="nac-error">{{ errorMsg }}</span>
+    }
   </div>
 </div>
diff --git a/web/src/app/campaigns/notebook/notebook-action-card/notebook-action-card.component.ts b/web/src/app/campaigns/notebook/notebook-action-card/notebook-action-card.component.ts
index 1bda4a1..37e63a1 100644
--- a/web/src/app/campaigns/notebook/notebook-action-card/notebook-action-card.component.ts
+++ b/web/src/app/campaigns/notebook/notebook-action-card/notebook-action-card.component.ts
@@ -1,5 +1,5 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { CommonModule } from '@angular/common';
+
 import { FormsModule } from '@angular/forms';
 import { Router } from '@angular/router';
 import { LucideAngularModule, Plus, Check, Drama, Clapperboard, BookText, GitBranch, Dices, ExternalLink } from 'lucide-angular';
@@ -15,7 +15,7 @@ import { NotebookAction } from '../../../services/notebook-action.model';
  */
 @Component({
     selector: 'app-notebook-action-card',
-    imports: [CommonModule, FormsModule, LucideAngularModule],
+    imports: [FormsModule, LucideAngularModule],
     templateUrl: './notebook-action-card.component.html',
     styleUrls: ['./notebook-action-card.component.scss']
 })
diff --git a/web/src/app/campaigns/notebook/notebook-detail/notebook-detail.component.html b/web/src/app/campaigns/notebook/notebook-detail/notebook-detail.component.html
index 8fdf44b..768484e 100644
--- a/web/src/app/campaigns/notebook/notebook-detail/notebook-detail.component.html
+++ b/web/src/app/campaigns/notebook/notebook-detail/notebook-detail.component.html
@@ -1,98 +1,117 @@
-<div class="nbd-page" *ngIf="detail">
-  <div class="nbd-toolbar">
-    <button class="btn-back" (click)="back()">
-      <lucide-icon [img]="ArrowLeft" [size]="14"></lucide-icon> Ateliers
-    </button>
-    <input class="nbd-title" [(ngModel)]="detail.name" (blur)="rename()" (keyup.enter)="rename()">
-  </div>
-
-  <div class="nbd-grid">
-    <!-- Sources -->
-    <aside class="nbd-sources">
-      <div class="nbd-sources-head">
-        <h3><lucide-icon [img]="FileText" [size]="15"></lucide-icon> Sources</h3>
-        <label class="btn-upload" [class.disabled]="uploading">
-          <lucide-icon [img]="Upload" [size]="13"></lucide-icon>
-          {{ uploading ? 'Indexation…' : 'Ajouter un PDF' }}
-          <input type="file" accept="application/pdf" hidden (change)="onFile($event)" [disabled]="uploading">
-        </label>
-      </div>
-
-      <p class="nbd-upload-error" *ngIf="uploadError">{{ uploadError }}</p>
-
-      <div class="nbd-source" *ngFor="let s of sources">
-        <lucide-icon
-          [img]="s.status === 'READY' ? CheckCircle2 : (s.status === 'FAILED' ? AlertCircle : Loader)"
-          [size]="14"
-          [class.ok]="s.status === 'READY'" [class.fail]="s.status === 'FAILED'" [class.busy]="s.status === 'INDEXING'">
-        </lucide-icon>
-        <div class="nbd-source-info">
-          <div class="nbd-source-name">{{ s.filename }}</div>
-          <div class="nbd-source-meta">
-            <span *ngIf="s.status === 'READY'">{{ s.pageCount }} p. · {{ s.chunkCount }} extraits</span>
-            <span *ngIf="s.status === 'INDEXING'">indexation en cours…</span>
-            <span *ngIf="s.status === 'FAILED'">échec de l'indexation</span>
-          </div>
+@if (detail) {
+  <div class="nbd-page">
+    <div class="nbd-toolbar">
+      <button class="btn-back" (click)="back()">
+        <lucide-icon [img]="ArrowLeft" [size]="14"></lucide-icon> Ateliers
+      </button>
+      <input class="nbd-title" [(ngModel)]="detail.name" (blur)="rename()" (keyup.enter)="rename()">
+    </div>
+    <div class="nbd-grid">
+      <!-- Sources -->
+      <aside class="nbd-sources">
+        <div class="nbd-sources-head">
+          <h3><lucide-icon [img]="FileText" [size]="15"></lucide-icon> Sources</h3>
+          <label class="btn-upload" [class.disabled]="uploading">
+            <lucide-icon [img]="Upload" [size]="13"></lucide-icon>
+            {{ uploading ? 'Indexation…' : 'Ajouter un PDF' }}
+            <input type="file" accept="application/pdf" hidden (change)="onFile($event)" [disabled]="uploading">
+          </label>
         </div>
-        <button class="nbd-source-del" (click)="removeSource(s)" title="Supprimer">
-          <lucide-icon [img]="Trash2" [size]="13"></lucide-icon>
-        </button>
-      </div>
-
-      <p class="nbd-empty" *ngIf="sources.length === 0 && !uploading">
-        Ajoute un PDF source pour commencer à discuter avec.
-      </p>
-    </aside>
-
-    <!-- Chat -->
-    <section class="nbd-chat">
-      <div class="nbd-messages">
-        <p class="nbd-empty" *ngIf="messages.length === 0">
-          Pose une question sur ta source, ou demande une adaptation pour ta campagne.
-          <span *ngIf="!hasReadySource()"><br>(Ajoute d'abord une source indexée pour des réponses ancrées.)</span>
-        </p>
-        <div class="nbd-msg" *ngFor="let m of messages" [class.user]="m.role === 'user'" [class.assistant]="m.role === 'assistant'">
-          <div class="nbd-msg-role">
-            <lucide-icon *ngIf="m.role === 'assistant'" [img]="Sparkles" [size]="12"></lucide-icon>
-            {{ m.role === 'user' ? 'Vous' : 'IA' }}
-          </div>
-
-          <ng-container *ngIf="m.role === 'assistant'; else userContent">
-            <ng-container *ngIf="parsedOf(m) as p">
-              <div class="nbd-deep-progress" *ngIf="sending && deepProgress && !p.text">
-                <lucide-icon [img]="Layers" [size]="13"></lucide-icon>
-                Analyse approfondie du document… {{ deepProgress.current }}/{{ deepProgress.total }}
+        @if (uploadError) {
+          <p class="nbd-upload-error">{{ uploadError }}</p>
+        }
+        @for (s of sources; track s) {
+          <div class="nbd-source">
+            <lucide-icon
+              [img]="s.status === 'READY' ? CheckCircle2 : (s.status === 'FAILED' ? AlertCircle : Loader)"
+              [size]="14"
+              [class.ok]="s.status === 'READY'" [class.fail]="s.status === 'FAILED'" [class.busy]="s.status === 'INDEXING'">
+            </lucide-icon>
+            <div class="nbd-source-info">
+              <div class="nbd-source-name">{{ s.filename }}</div>
+              <div class="nbd-source-meta">
+                @if (s.status === 'READY') {
+                  <span>{{ s.pageCount }} p. · {{ s.chunkCount }} extraits</span>
+                }
+                @if (s.status === 'INDEXING') {
+                  <span>indexation en cours…</span>
+                }
+                @if (s.status === 'FAILED') {
+                  <span>échec de l'indexation</span>
+                }
               </div>
-              <div class="nbd-msg-content">{{ p.text }}<span class="cursor" *ngIf="sending && !p.text && !p.actions.length && !deepProgress">▌</span></div>
-              <app-notebook-action-card
-                *ngFor="let a of p.actions; trackBy: trackAction"
-                [action]="a"
-                [campaignId]="campaignId"
-                [arcs]="arcs"
-                [chaptersByArc]="chaptersByArc"
-                (created)="onActionCreated()">
-              </app-notebook-action-card>
-            </ng-container>
-          </ng-container>
-          <ng-template #userContent>
-            <div class="nbd-msg-content">{{ m.content }}</div>
-          </ng-template>
+            </div>
+            <button class="nbd-source-del" (click)="removeSource(s)" title="Supprimer">
+              <lucide-icon [img]="Trash2" [size]="13"></lucide-icon>
+            </button>
+          </div>
+        }
+        @if (sources.length === 0 && !uploading) {
+          <p class="nbd-empty">
+            Ajoute un PDF source pour commencer à discuter avec.
+          </p>
+        }
+      </aside>
+      <!-- Chat -->
+      <section class="nbd-chat">
+        <div class="nbd-messages">
+          @if (messages.length === 0) {
+            <p class="nbd-empty">
+              Pose une question sur ta source, ou demande une adaptation pour ta campagne.
+              @if (!hasReadySource()) {
+                <span><br>(Ajoute d'abord une source indexée pour des réponses ancrées.)</span>
+              }
+            </p>
+          }
+          @for (m of messages; track m) {
+            <div class="nbd-msg" [class.user]="m.role === 'user'" [class.assistant]="m.role === 'assistant'">
+              <div class="nbd-msg-role">
+                @if (m.role === 'assistant') {
+                  <lucide-icon [img]="Sparkles" [size]="12"></lucide-icon>
+                }
+                {{ m.role === 'user' ? 'Vous' : 'IA' }}
+              </div>
+              @if (m.role === 'assistant') {
+                @if (parsedOf(m); as p) {
+                  @if (sending && deepProgress && !p.text) {
+                    <div class="nbd-deep-progress">
+                      <lucide-icon [img]="Layers" [size]="13"></lucide-icon>
+                      Analyse approfondie du document… {{ deepProgress.current }}/{{ deepProgress.total }}
+                    </div>
+                  }
+                  <div class="nbd-msg-content">{{ p.text }}@if (sending && !p.text && !p.actions.length && !deepProgress) {
+                    <span class="cursor">▌</span>
+                  }</div>
+                  @for (a of p.actions; track $index) {
+                    <app-notebook-action-card
+                      [action]="a"
+                      [campaignId]="campaignId"
+                      [arcs]="arcs"
+                      [chaptersByArc]="chaptersByArc"
+                      (created)="onActionCreated()">
+                    </app-notebook-action-card>
+                  }
+                }
+              } @else {
+                <div class="nbd-msg-content">{{ m.content }}</div>
+              }
+            </div>
+          }
         </div>
-      </div>
-
-      <div class="nbd-input">
-        <textarea [(ngModel)]="draft" rows="2"
-                  placeholder="Demande une adaptation, un résumé, un PNJ inspiré de la source…"
-                  (keydown.enter)="$event.preventDefault(); send()"></textarea>
-        <button class="btn-deep" (click)="send(true)" [disabled]="sending || !draft.trim()"
-                title="Analyse approfondie : lit TOUT le document (plus lent, exhaustif). Idéal pour « liste tous les… »">
-          <lucide-icon [img]="Layers" [size]="15"></lucide-icon>
-        </button>
-        <button class="btn-send" (click)="send()" [disabled]="sending || !draft.trim()"
-                title="Réponse rapide (recherche ciblée dans le document)">
-          <lucide-icon [img]="Send" [size]="15"></lucide-icon>
-        </button>
-      </div>
-    </section>
+        <div class="nbd-input">
+          <textarea [(ngModel)]="draft" rows="2"
+            placeholder="Demande une adaptation, un résumé, un PNJ inspiré de la source…"
+          (keydown.enter)="$event.preventDefault(); send()"></textarea>
+          <button class="btn-deep" (click)="send(true)" [disabled]="sending || !draft.trim()"
+            title="Analyse approfondie : lit TOUT le document (plus lent, exhaustif). Idéal pour « liste tous les… »">
+            <lucide-icon [img]="Layers" [size]="15"></lucide-icon>
+          </button>
+          <button class="btn-send" (click)="send()" [disabled]="sending || !draft.trim()"
+            title="Réponse rapide (recherche ciblée dans le document)">
+            <lucide-icon [img]="Send" [size]="15"></lucide-icon>
+          </button>
+        </div>
+      </section>
+    </div>
   </div>
-</div>
+}
diff --git a/web/src/app/campaigns/notebook/notebook-detail/notebook-detail.component.ts b/web/src/app/campaigns/notebook/notebook-detail/notebook-detail.component.ts
index 2885188..40c79f9 100644
--- a/web/src/app/campaigns/notebook/notebook-detail/notebook-detail.component.ts
+++ b/web/src/app/campaigns/notebook/notebook-detail/notebook-detail.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { CommonModule } from '@angular/common';
+
 import { FormsModule } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { LucideAngularModule, ArrowLeft, Upload, Trash2, Send, FileText, Loader, CheckCircle2, AlertCircle, Sparkles, Layers } from 'lucide-angular';
@@ -20,7 +20,7 @@ import { NotebookActionCardComponent } from '../notebook-action-card/notebook-ac
  */
 @Component({
     selector: 'app-notebook-detail',
-    imports: [CommonModule, FormsModule, LucideAngularModule, NotebookActionCardComponent],
+    imports: [FormsModule, LucideAngularModule, NotebookActionCardComponent],
     templateUrl: './notebook-detail.component.html',
     styleUrls: ['./notebook-detail.component.scss']
 })
@@ -108,7 +108,6 @@ export class NotebookDetailComponent implements OnInit {
   }
 
   /** trackBy stable pour les cartes d'action (évite toute recréation parasite). */
-  trackAction(index: number): number { return index; }
 
   load(): void {
     this.service.get(this.notebookId).subscribe({
diff --git a/web/src/app/campaigns/notebook/notebook-list/notebook-list.component.html b/web/src/app/campaigns/notebook/notebook-list/notebook-list.component.html
index 9a50193..b97d104 100644
--- a/web/src/app/campaigns/notebook/notebook-list/notebook-list.component.html
+++ b/web/src/app/campaigns/notebook/notebook-list/notebook-list.component.html
@@ -15,7 +15,7 @@
 
   <div class="nbl-create">
     <input type="text" [(ngModel)]="newName" placeholder="Nom de l'atelier (ex: Adaptation du module X)"
-           (keyup.enter)="create()">
+      (keyup.enter)="create()">
     <button class="btn-create" (click)="create()" [disabled]="creating">
       <lucide-icon [img]="Plus" [size]="14"></lucide-icon>
       {{ creating ? 'Création…' : 'Nouvel atelier' }}
@@ -23,13 +23,17 @@
   </div>
 
   <div class="nbl-list">
-    <p class="empty" *ngIf="notebooks.length === 0">Aucun atelier pour l'instant.</p>
-    <button class="nbl-item" *ngFor="let nb of notebooks" (click)="open(nb)">
-      <lucide-icon [img]="BookOpen" [size]="16"></lucide-icon>
-      <span class="nbl-item-name">{{ nb.name }}</span>
-      <span class="nbl-del" (click)="remove(nb, $event)" title="Supprimer">
-        <lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
-      </span>
-    </button>
+    @if (notebooks.length === 0) {
+      <p class="empty">Aucun atelier pour l'instant.</p>
+    }
+    @for (nb of notebooks; track nb) {
+      <button class="nbl-item" (click)="open(nb)">
+        <lucide-icon [img]="BookOpen" [size]="16"></lucide-icon>
+        <span class="nbl-item-name">{{ nb.name }}</span>
+        <span class="nbl-del" (click)="remove(nb, $event)" title="Supprimer">
+          <lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
+        </span>
+      </button>
+    }
   </div>
 </div>
diff --git a/web/src/app/campaigns/notebook/notebook-list/notebook-list.component.ts b/web/src/app/campaigns/notebook/notebook-list/notebook-list.component.ts
index 074bfd5..52b523e 100644
--- a/web/src/app/campaigns/notebook/notebook-list/notebook-list.component.ts
+++ b/web/src/app/campaigns/notebook/notebook-list/notebook-list.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { CommonModule } from '@angular/common';
+
 import { FormsModule } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { LucideAngularModule, ArrowLeft, Plus, Trash2, BookOpen } from 'lucide-angular';
@@ -14,7 +14,7 @@ import { ConfirmDialogService } from '../../../shared/confirm-dialog/confirm-dia
  */
 @Component({
     selector: 'app-notebook-list',
-    imports: [CommonModule, FormsModule, LucideAngularModule],
+    imports: [FormsModule, LucideAngularModule],
     templateUrl: './notebook-list.component.html',
     styleUrls: ['./notebook-list.component.scss']
 })
diff --git a/web/src/app/campaigns/npc/npc-edit/npc-edit.component.html b/web/src/app/campaigns/npc/npc-edit/npc-edit.component.html
index b891f12..3da29cf 100644
--- a/web/src/app/campaigns/npc/npc-edit/npc-edit.component.html
+++ b/web/src/app/campaigns/npc/npc-edit/npc-edit.component.html
@@ -10,16 +10,17 @@
         <lucide-icon [img]="Drama" [size]="22"></lucide-icon>
         {{ npcId ? 'Éditer le PNJ' : 'Nouveau PNJ' }}
       </h1>
-      <button
-        *ngIf="npcId"
-        type="button"
-        class="btn-ai"
-        (click)="toggleChat()"
-        [class.active]="chatOpen"
-        title="Ouvrir l'Assistant IA pour dialoguer autour de ce PNJ">
-        <lucide-icon [img]="Sparkles" [size]="14"></lucide-icon>
-        Assistant IA
-      </button>
+      @if (npcId) {
+        <button
+          type="button"
+          class="btn-ai"
+          (click)="toggleChat()"
+          [class.active]="chatOpen"
+          title="Ouvrir l'Assistant IA pour dialoguer autour de ce PNJ">
+          <lucide-icon [img]="Sparkles" [size]="14"></lucide-icon>
+          Assistant IA
+        </button>
+      }
     </div>
   </div>
 
@@ -33,85 +34,89 @@
         [(ngModel)]="name"
         name="name"
         placeholder="Ex: Borin le forgeron, Dame Elara, Kael l'aubergiste..."
-      />
-    </div>
-
-    <div class="field">
-      <label for="npc-folder">Dossier</label>
-      <input
-        id="npc-folder"
-        type="text"
-        [(ngModel)]="folder"
-        name="folder"
-        list="npc-folders"
-        placeholder="Ex: Bard's Gate, Faction des Pipers… (laisser vide = non classé)"
-      />
-      <datalist id="npc-folders">
-        <option *ngFor="let f of existingFolders" [value]="f"></option>
-      </datalist>
-    </div>
-
-    <div class="field-row image-row">
-      <div class="field portrait-field">
-        <label>Portrait</label>
-        <app-single-image-picker
-          [imageId]="portraitImageId"
-          aspectRatio="1 / 1"
-          hint="Carre conseille (400×400)."
-          (imageIdChange)="portraitImageId = $event">
-        </app-single-image-picker>
+        />
       </div>
-      <div class="field header-field">
-        <label>Bandeau / Header</label>
-        <app-single-image-picker
-          [imageId]="headerImageId"
-          aspectRatio="3 / 1"
-          hint="Format paysage conseille (1200×400)."
-          (imageIdChange)="headerImageId = $event">
-        </app-single-image-picker>
+
+      <div class="field">
+        <label for="npc-folder">Dossier</label>
+        <input
+          id="npc-folder"
+          type="text"
+          [(ngModel)]="folder"
+          name="folder"
+          list="npc-folders"
+          placeholder="Ex: Bard's Gate, Faction des Pipers… (laisser vide = non classé)"
+          />
+          <datalist id="npc-folders">
+            @for (f of existingFolders; track f) {
+              <option [value]="f"></option>
+            }
+          </datalist>
+        </div>
+
+        <div class="field-row image-row">
+          <div class="field portrait-field">
+            <label>Portrait</label>
+            <app-single-image-picker
+              [imageId]="portraitImageId"
+              aspectRatio="1 / 1"
+              hint="Carre conseille (400×400)."
+              (imageIdChange)="portraitImageId = $event">
+            </app-single-image-picker>
+          </div>
+          <div class="field header-field">
+            <label>Bandeau / Header</label>
+            <app-single-image-picker
+              [imageId]="headerImageId"
+              aspectRatio="3 / 1"
+              hint="Format paysage conseille (1200×400)."
+              (imageIdChange)="headerImageId = $event">
+            </app-single-image-picker>
+          </div>
+        </div>
+
+        <div class="template-fields">
+          <app-dynamic-fields-form
+            [fields]="templateFields"
+            [values]="values"
+            [imageValues]="imageValues"
+            [keyValueValues]="keyValueValues"
+            (valuesChange)="values = $event"
+            (imageValuesChange)="imageValues = $event"
+            (keyValueValuesChange)="keyValueValues = $event">
+          </app-dynamic-fields-form>
+        </div>
+
+        <div class="actions">
+          <button type="button" class="btn-primary" [disabled]="!name.trim()" (click)="submit()">
+            <lucide-icon [img]="Save" [size]="16"></lucide-icon>
+            {{ npcId ? 'Enregistrer' : 'Créer' }}
+          </button>
+          <button type="button" class="btn-secondary" (click)="back()">Annuler</button>
+          <span class="spacer"></span>
+          @if (npcId) {
+            <button
+              type="button"
+              class="btn-danger"
+              (click)="deleteNpc()">
+              <lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
+              Supprimer
+            </button>
+          }
+        </div>
+
       </div>
+
     </div>
 
-    <div class="template-fields">
-      <app-dynamic-fields-form
-        [fields]="templateFields"
-        [values]="values"
-        [imageValues]="imageValues"
-        [keyValueValues]="keyValueValues"
-        (valuesChange)="values = $event"
-        (imageValuesChange)="imageValues = $event"
-        (keyValueValuesChange)="keyValueValues = $event">
-      </app-dynamic-fields-form>
-    </div>
-
-    <div class="actions">
-      <button type="button" class="btn-primary" [disabled]="!name.trim()" (click)="submit()">
-        <lucide-icon [img]="Save" [size]="16"></lucide-icon>
-        {{ npcId ? 'Enregistrer' : 'Créer' }}
-      </button>
-      <button type="button" class="btn-secondary" (click)="back()">Annuler</button>
-      <span class="spacer"></span>
-      <button
-        *ngIf="npcId"
-        type="button"
-        class="btn-danger"
-        (click)="deleteNpc()">
-        <lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
-        Supprimer
-      </button>
-    </div>
-
-  </div>
-
-</div>
-
-<app-ai-chat-drawer
-  *ngIf="npcId && campaignId"
-  [campaignId]="campaignId"
-  entityType="npc"
-  [entityId]="npcId"
-  [isOpen]="chatOpen"
-  welcomeMessage="Je vois cette fiche de PNJ. Demande-moi de proposer apparence, motivations, secrets, ou répliques signatures."
-  [quickSuggestions]="chatQuickSuggestions"
-  (close)="chatOpen = false">
-</app-ai-chat-drawer>
+    @if (npcId && campaignId) {
+      <app-ai-chat-drawer
+        [campaignId]="campaignId"
+        entityType="npc"
+        [entityId]="npcId"
+        [isOpen]="chatOpen"
+        welcomeMessage="Je vois cette fiche de PNJ. Demande-moi de proposer apparence, motivations, secrets, ou répliques signatures."
+        [quickSuggestions]="chatQuickSuggestions"
+        (close)="chatOpen = false">
+      </app-ai-chat-drawer>
+    }
diff --git a/web/src/app/campaigns/npc/npc-edit/npc-edit.component.ts b/web/src/app/campaigns/npc/npc-edit/npc-edit.component.ts
index 29ede73..ebfc46a 100644
--- a/web/src/app/campaigns/npc/npc-edit/npc-edit.component.ts
+++ b/web/src/app/campaigns/npc/npc-edit/npc-edit.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { CommonModule } from '@angular/common';
+
 import { ActivatedRoute, Router } from '@angular/router';
 import { FormsModule } from '@angular/forms';
 import { LucideAngularModule, Save, ArrowLeft, Drama, Trash2, Sparkles } from 'lucide-angular';
@@ -21,7 +21,7 @@ import { ConfirmDialogService } from '../../../shared/confirm-dialog/confirm-dia
  */
 @Component({
     selector: 'app-npc-edit',
-    imports: [CommonModule, FormsModule, LucideAngularModule, AiChatDrawerComponent, DynamicFieldsFormComponent, SingleImagePickerComponent],
+    imports: [FormsModule, LucideAngularModule, AiChatDrawerComponent, DynamicFieldsFormComponent, SingleImagePickerComponent],
     templateUrl: './npc-edit.component.html',
     styleUrls: ['./npc-edit.component.scss']
 })
diff --git a/web/src/app/campaigns/npc/npc-view/npc-view.component.html b/web/src/app/campaigns/npc/npc-view/npc-view.component.html
index b94f5a0..efe6682 100644
--- a/web/src/app/campaigns/npc/npc-view/npc-view.component.html
+++ b/web/src/app/campaigns/npc/npc-view/npc-view.component.html
@@ -5,10 +5,12 @@
       Retour
     </button>
     <span class="spacer"></span>
-    <button class="btn-ai" (click)="toggleChat()" [class.active]="chatOpen" *ngIf="npcId">
-      <lucide-icon [img]="Sparkles" [size]="14"></lucide-icon>
-      Assistant IA
-    </button>
+    @if (npcId) {
+      <button class="btn-ai" (click)="toggleChat()" [class.active]="chatOpen">
+        <lucide-icon [img]="Sparkles" [size]="14"></lucide-icon>
+        Assistant IA
+      </button>
+    }
     <button class="btn-edit" (click)="edit()">
       <lucide-icon [img]="Edit3" [size]="14"></lucide-icon>
       Editer
@@ -18,11 +20,12 @@
   <app-persona-view [persona]="npc" [templateFields]="templateFields"></app-persona-view>
 </div>
 
-<app-ai-chat-drawer
-  *ngIf="npcId && campaignId"
-  [campaignId]="campaignId"
-  entityType="npc"
-  [entityId]="npcId"
-  [isOpen]="chatOpen"
-  (close)="chatOpen = false">
-</app-ai-chat-drawer>
+@if (npcId && campaignId) {
+  <app-ai-chat-drawer
+    [campaignId]="campaignId"
+    entityType="npc"
+    [entityId]="npcId"
+    [isOpen]="chatOpen"
+    (close)="chatOpen = false">
+  </app-ai-chat-drawer>
+}
diff --git a/web/src/app/campaigns/npc/npc-view/npc-view.component.ts b/web/src/app/campaigns/npc/npc-view/npc-view.component.ts
index 93236c8..59b9dff 100644
--- a/web/src/app/campaigns/npc/npc-view/npc-view.component.ts
+++ b/web/src/app/campaigns/npc/npc-view/npc-view.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { CommonModule } from '@angular/common';
+
 import { ActivatedRoute, Router } from '@angular/router';
 import { Subscription } from 'rxjs';
 import { LucideAngularModule, ArrowLeft, Edit3, Sparkles } from 'lucide-angular';
@@ -18,7 +18,7 @@ import { AiChatDrawerComponent } from '../../../shared/ai-chat-drawer/ai-chat-dr
  */
 @Component({
     selector: 'app-npc-view',
-    imports: [CommonModule, LucideAngularModule, PersonaViewComponent, AiChatDrawerComponent],
+    imports: [LucideAngularModule, PersonaViewComponent, AiChatDrawerComponent],
     templateUrl: './npc-view.component.html',
     styleUrls: ['./npc-view.component.scss']
 })
diff --git a/web/src/app/campaigns/playthrough/playthrough-detail/playthrough-detail.component.html b/web/src/app/campaigns/playthrough/playthrough-detail/playthrough-detail.component.html
index ea6fa4d..55e4b3b 100644
--- a/web/src/app/campaigns/playthrough/playthrough-detail/playthrough-detail.component.html
+++ b/web/src/app/campaigns/playthrough/playthrough-detail/playthrough-detail.component.html
@@ -1,72 +1,83 @@
-<div class="playthrough-page" *ngIf="playthrough">
-
-  <header class="page-header">
-    <button type="button" class="btn-secondary" (click)="back()">
-      <lucide-icon [img]="ArrowLeft" [size]="14"></lucide-icon>
-      Retour
-    </button>
-    <div class="header-info">
-      <h1>{{ playthrough.name }}</h1>
-      <p class="subtitle" *ngIf="playthrough.description">{{ playthrough.description }}</p>
-    </div>
-    <div class="header-actions">
-      <button type="button" class="btn-danger" (click)="delete()">
-        <lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
-        Supprimer
+@if (playthrough) {
+  <div class="playthrough-page">
+    <header class="page-header">
+      <button type="button" class="btn-secondary" (click)="back()">
+        <lucide-icon [img]="ArrowLeft" [size]="14"></lucide-icon>
+        Retour
       </button>
-    </div>
-  </header>
-
-  <!-- Bloc action principal : démarrer ou reprendre la session -->
-  <section class="play-action">
-    <button type="button" class="btn-primary big"
-            *ngIf="!activeOnThis"
-            [disabled]="startingSession"
-            (click)="startSession()">
-      <lucide-icon [img]="Play" [size]="16"></lucide-icon>
-      Lancer une session
-    </button>
-
-    <button type="button" class="btn-primary big"
-            *ngIf="activeOnThis"
-            (click)="openSession(activeOnThis)">
-      <lucide-icon [img]="Play" [size]="16"></lucide-icon>
-      Reprendre la session en cours
-    </button>
-
-    <button type="button" class="btn-secondary" (click)="openFlags()">
-      <lucide-icon [img]="Flag" [size]="14"></lucide-icon>
-      Faits de la partie
-    </button>
-  </section>
-
-  <!-- PJ -->
-  <section class="block">
-    <div class="block-header">
-      <h2><lucide-icon [img]="Users" [size]="18"></lucide-icon> Personnages joueurs</h2>
-      <button type="button" class="btn-add" (click)="createCharacter()">
-        <lucide-icon [img]="Plus" [size]="14"></lucide-icon>
-        Nouveau PJ
+      <div class="header-info">
+        <h1>{{ playthrough.name }}</h1>
+        @if (playthrough.description) {
+          <p class="subtitle">{{ playthrough.description }}</p>
+        }
+      </div>
+      <div class="header-actions">
+        <button type="button" class="btn-danger" (click)="delete()">
+          <lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
+          Supprimer
+        </button>
+      </div>
+    </header>
+    <!-- Bloc action principal : démarrer ou reprendre la session -->
+    <section class="play-action">
+      @if (!activeOnThis) {
+        <button type="button" class="btn-primary big"
+          [disabled]="startingSession"
+          (click)="startSession()">
+          <lucide-icon [img]="Play" [size]="16"></lucide-icon>
+          Lancer une session
+        </button>
+      }
+      @if (activeOnThis) {
+        <button type="button" class="btn-primary big"
+          (click)="openSession(activeOnThis)">
+          <lucide-icon [img]="Play" [size]="16"></lucide-icon>
+          Reprendre la session en cours
+        </button>
+      }
+      <button type="button" class="btn-secondary" (click)="openFlags()">
+        <lucide-icon [img]="Flag" [size]="14"></lucide-icon>
+        Faits de la partie
       </button>
-    </div>
-    <p class="empty" *ngIf="characters.length === 0">Aucun PJ pour cette partie.</p>
-    <ul class="character-list" *ngIf="characters.length > 0">
-      <li *ngFor="let c of characters">
-        <a [routerLink]="['/campaigns', campaignId, 'playthroughs', playthroughId, 'characters', c.id]">{{ c.name }}</a>
-      </li>
-    </ul>
-  </section>
-
-  <!-- Sessions -->
-  <section class="block">
-    <h2>Sessions</h2>
-    <p class="empty" *ngIf="sessions.length === 0">Aucune session encore. Lancez la première !</p>
-    <ul class="session-list" *ngIf="sessions.length > 0">
-      <li *ngFor="let s of sessions" (click)="openSession(s)">
-        <span class="session-name">{{ s.name }}</span>
-        <span class="session-status" [class.active]="s.active">{{ s.active ? 'En cours' : 'Terminée' }}</span>
-      </li>
-    </ul>
-  </section>
-
-</div>
+    </section>
+    <!-- PJ -->
+    <section class="block">
+      <div class="block-header">
+        <h2><lucide-icon [img]="Users" [size]="18"></lucide-icon> Personnages joueurs</h2>
+        <button type="button" class="btn-add" (click)="createCharacter()">
+          <lucide-icon [img]="Plus" [size]="14"></lucide-icon>
+          Nouveau PJ
+        </button>
+      </div>
+      @if (characters.length === 0) {
+        <p class="empty">Aucun PJ pour cette partie.</p>
+      }
+      @if (characters.length > 0) {
+        <ul class="character-list">
+          @for (c of characters; track c) {
+            <li>
+              <a [routerLink]="['/campaigns', campaignId, 'playthroughs', playthroughId, 'characters', c.id]">{{ c.name }}</a>
+            </li>
+          }
+        </ul>
+      }
+    </section>
+    <!-- Sessions -->
+    <section class="block">
+      <h2>Sessions</h2>
+      @if (sessions.length === 0) {
+        <p class="empty">Aucune session encore. Lancez la première !</p>
+      }
+      @if (sessions.length > 0) {
+        <ul class="session-list">
+          @for (s of sessions; track s) {
+            <li (click)="openSession(s)">
+              <span class="session-name">{{ s.name }}</span>
+              <span class="session-status" [class.active]="s.active">{{ s.active ? 'En cours' : 'Terminée' }}</span>
+            </li>
+          }
+        </ul>
+      }
+    </section>
+  </div>
+}
diff --git a/web/src/app/campaigns/playthrough/playthrough-detail/playthrough-detail.component.ts b/web/src/app/campaigns/playthrough/playthrough-detail/playthrough-detail.component.ts
index 2497c69..576b848 100644
--- a/web/src/app/campaigns/playthrough/playthrough-detail/playthrough-detail.component.ts
+++ b/web/src/app/campaigns/playthrough/playthrough-detail/playthrough-detail.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
-import { CommonModule } from '@angular/common';
+
 import { ActivatedRoute, Router, RouterModule } from '@angular/router';
 import { forkJoin, of } from 'rxjs';
 import { catchError } from 'rxjs/operators';
@@ -25,7 +25,7 @@ import { ConfirmDialogService } from '../../../shared/confirm-dialog/confirm-dia
  */
 @Component({
     selector: 'app-playthrough-detail',
-    imports: [CommonModule, RouterModule, LucideAngularModule],
+    imports: [RouterModule, LucideAngularModule],
     templateUrl: './playthrough-detail.component.html',
     styleUrls: ['./playthrough-detail.component.scss']
 })
diff --git a/web/src/app/campaigns/playthrough/playthrough-flags-page/playthrough-flags-page.component.html b/web/src/app/campaigns/playthrough/playthrough-flags-page/playthrough-flags-page.component.html
index ca379ef..874f28c 100644
--- a/web/src/app/campaigns/playthrough/playthrough-flags-page/playthrough-flags-page.component.html
+++ b/web/src/app/campaigns/playthrough/playthrough-flags-page/playthrough-flags-page.component.html
@@ -1,20 +1,21 @@
-<div class="flags-page" *ngIf="playthrough">
-  <header class="page-header">
-    <button type="button" class="btn-secondary" (click)="back()">
-      <lucide-icon [img]="ArrowLeft" [size]="14"></lucide-icon>
-      Retour
-    </button>
-    <div>
-      <h1>Faits — {{ playthrough.name }}</h1>
-      <p class="subtitle">
-        Faits booléens propres à cette partie. Toggle-les en jeu pour débloquer
-        les quêtes qui en dépendent.
-      </p>
-    </div>
-  </header>
-
-  <app-playthrough-flags-manager
-    [campaignId]="campaignId"
-    [playthroughId]="playthroughId">
-  </app-playthrough-flags-manager>
-</div>
+@if (playthrough) {
+  <div class="flags-page">
+    <header class="page-header">
+      <button type="button" class="btn-secondary" (click)="back()">
+        <lucide-icon [img]="ArrowLeft" [size]="14"></lucide-icon>
+        Retour
+      </button>
+      <div>
+        <h1>Faits — {{ playthrough.name }}</h1>
+        <p class="subtitle">
+          Faits booléens propres à cette partie. Toggle-les en jeu pour débloquer
+          les quêtes qui en dépendent.
+        </p>
+      </div>
+    </header>
+    <app-playthrough-flags-manager
+      [campaignId]="campaignId"
+      [playthroughId]="playthroughId">
+    </app-playthrough-flags-manager>
+  </div>
+}
diff --git a/web/src/app/campaigns/playthrough/playthrough-flags-page/playthrough-flags-page.component.ts b/web/src/app/campaigns/playthrough/playthrough-flags-page/playthrough-flags-page.component.ts
index e670493..f171d00 100644
--- a/web/src/app/campaigns/playthrough/playthrough-flags-page/playthrough-flags-page.component.ts
+++ b/web/src/app/campaigns/playthrough/playthrough-flags-page/playthrough-flags-page.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
-import { CommonModule } from '@angular/common';
+
 import { ActivatedRoute, Router, RouterModule } from '@angular/router';
 import { forkJoin } from 'rxjs';
 import { LucideAngularModule, ArrowLeft } from 'lucide-angular';
@@ -20,7 +20,7 @@ import { PlaythroughFlagsManagerComponent } from '../../../shared/playthrough-fl
  */
 @Component({
     selector: 'app-playthrough-flags-page',
-    imports: [CommonModule, RouterModule, LucideAngularModule, PlaythroughFlagsManagerComponent],
+    imports: [RouterModule, LucideAngularModule, PlaythroughFlagsManagerComponent],
     templateUrl: './playthrough-flags-page.component.html',
     styleUrls: ['./playthrough-flags-page.component.scss']
 })
diff --git a/web/src/app/campaigns/random-table/random-table-edit/random-table-edit.component.html b/web/src/app/campaigns/random-table/random-table-edit/random-table-edit.component.html
index 95adbce..9e10079 100644
--- a/web/src/app/campaigns/random-table/random-table-edit/random-table-edit.component.html
+++ b/web/src/app/campaigns/random-table/random-table-edit/random-table-edit.component.html
@@ -13,7 +13,9 @@
 
   <h1>{{ tableId ? 'Éditer la table' : 'Nouvelle table aléatoire' }}</h1>
 
-  <div class="error" *ngIf="errorMessage">{{ errorMessage }}</div>
+  @if (errorMessage) {
+    <div class="error">{{ errorMessage }}</div>
+  }
 
   <div class="form-row">
     <label for="rt-name">Nom *</label>
@@ -28,7 +30,7 @@
   <div class="form-row">
     <label for="rt-formula">Formule du dé *</label>
     <input id="rt-formula" type="text" [(ngModel)]="diceFormula" placeholder="1d20, 2d6, d100…"
-           [class.invalid]="diceFormula && !formulaValid">
+      [class.invalid]="diceFormula && !formulaValid">
     <small class="hint" [class.bad]="diceFormula && !formulaValid">
       {{ formulaValid ? 'Formule valide' : 'Format attendu : NdM (ex. 1d20, 2d6, d100)' }}
     </small>
@@ -41,13 +43,15 @@
     </div>
     <p class="ai-hint">Décris la table ; l'IA propose les entrées (revois-les avant d'enregistrer). Contextualisé avec ta campagne.</p>
     <textarea rows="2" [(ngModel)]="aiPrompt"
-              placeholder="Ex: rencontres aléatoires dans une forêt hantée, ton sombre"></textarea>
+    placeholder="Ex: rencontres aléatoires dans une forêt hantée, ton sombre"></textarea>
     <div class="ai-actions">
       <button class="btn-ai" (click)="generateWithAI()" [disabled]="generating">
         <lucide-icon [img]="Sparkles" [size]="14"></lucide-icon>
         {{ generating ? 'Génération…' : 'Générer (' + diceFormula + ')' }}
       </button>
-      <span class="ai-error" *ngIf="aiError">{{ aiError }}</span>
+      @if (aiError) {
+        <span class="ai-error">{{ aiError }}</span>
+      }
     </div>
   </div>
 
@@ -71,15 +75,19 @@
     <span class="c-del"></span>
   </div>
 
-  <div class="entry-row" *ngFor="let e of entries; let i = index">
-    <input class="c-range" type="number" [(ngModel)]="e.minRoll">
-    <input class="c-range" type="number" [(ngModel)]="e.maxRoll">
-    <input class="c-label" type="text" [(ngModel)]="e.label" placeholder="Résultat">
-    <input class="c-detail" type="text" [(ngModel)]="e.detail" placeholder="Détail (optionnel)">
-    <button class="c-del btn-del" (click)="removeEntry(i)" title="Supprimer">
-      <lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
-    </button>
-  </div>
+  @for (e of entries; track e; let i = $index) {
+    <div class="entry-row">
+      <input class="c-range" type="number" [(ngModel)]="e.minRoll">
+      <input class="c-range" type="number" [(ngModel)]="e.maxRoll">
+      <input class="c-label" type="text" [(ngModel)]="e.label" placeholder="Résultat">
+      <input class="c-detail" type="text" [(ngModel)]="e.detail" placeholder="Détail (optionnel)">
+      <button class="c-del btn-del" (click)="removeEntry(i)" title="Supprimer">
+        <lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
+      </button>
+    </div>
+  }
 
-  <p class="empty-hint" *ngIf="entries.length === 0">Aucune entrée — clique « Ajouter ».</p>
+  @if (entries.length === 0) {
+    <p class="empty-hint">Aucune entrée — clique « Ajouter ».</p>
+  }
 </div>
diff --git a/web/src/app/campaigns/random-table/random-table-edit/random-table-edit.component.ts b/web/src/app/campaigns/random-table/random-table-edit/random-table-edit.component.ts
index 1e42d2a..5177fd1 100644
--- a/web/src/app/campaigns/random-table/random-table-edit/random-table-edit.component.ts
+++ b/web/src/app/campaigns/random-table/random-table-edit/random-table-edit.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { CommonModule } from '@angular/common';
+
 import { FormsModule } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { LucideAngularModule, ArrowLeft, Save, Plus, Trash2, Wand2, Sparkles } from 'lucide-angular';
@@ -15,7 +15,7 @@ import { DiceUtils } from '../../../shared/dice.utils';
  */
 @Component({
     selector: 'app-random-table-edit',
-    imports: [CommonModule, FormsModule, LucideAngularModule],
+    imports: [FormsModule, LucideAngularModule],
     templateUrl: './random-table-edit.component.html',
     styleUrls: ['./random-table-edit.component.scss']
 })
diff --git a/web/src/app/campaigns/random-table/random-table-view/random-table-view.component.html b/web/src/app/campaigns/random-table/random-table-view/random-table-view.component.html
index 4a5ea63..c64b861 100644
--- a/web/src/app/campaigns/random-table/random-table-view/random-table-view.component.html
+++ b/web/src/app/campaigns/random-table/random-table-view/random-table-view.component.html
@@ -1,57 +1,75 @@
-<div class="rt-page" *ngIf="table">
-  <div class="rt-toolbar">
-    <button class="btn-back" (click)="back()">
-      <lucide-icon [img]="ArrowLeft" [size]="14"></lucide-icon>
-      Retour
-    </button>
-    <span class="spacer"></span>
-    <button class="btn-edit" (click)="edit()">
-      <lucide-icon [img]="Edit3" [size]="14"></lucide-icon>
-      Éditer
-    </button>
+@if (table) {
+  <div class="rt-page">
+    <div class="rt-toolbar">
+      <button class="btn-back" (click)="back()">
+        <lucide-icon [img]="ArrowLeft" [size]="14"></lucide-icon>
+        Retour
+      </button>
+      <span class="spacer"></span>
+      <button class="btn-edit" (click)="edit()">
+        <lucide-icon [img]="Edit3" [size]="14"></lucide-icon>
+        Éditer
+      </button>
+    </div>
+    <header class="rt-header">
+      <h1><lucide-icon [img]="Dices" [size]="22"></lucide-icon> {{ table.name }}</h1>
+      @if (table.description) {
+        <p class="rt-desc">{{ table.description }}</p>
+      }
+      <span class="rt-formula">Dé : <code>{{ table.diceFormula }}</code></span>
+    </header>
+    <!-- Zone de jet -->
+    <section class="rt-roll">
+      <button class="btn-roll" (click)="roll()">
+        <lucide-icon [img]="Dices" [size]="18"></lucide-icon>
+        Lancer {{ table.diceFormula }}
+      </button>
+      @if (lastRoll) {
+        <div class="rt-result">
+          <span class="rt-total">{{ lastRoll.total }}</span>
+          @if (lastRoll.rolls.length > 1) {
+            <span class="rt-rolls">({{ lastRoll.rolls.join(' + ') }})</span>
+          }
+          <span class="rt-arrow">→</span>
+          @if (matched) {
+            <span class="rt-matched">{{ matched.label }}</span>
+          }
+          @if (!matched) {
+            <span class="rt-nomatch">Aucune entrée pour ce résultat</span>
+          }
+        </div>
+      }
+    </section>
+    @if (matched?.detail) {
+      <div class="rt-detail">{{ matched?.detail }}</div>
+    }
+    <!-- Liste des entrées -->
+    <section class="rt-entries">
+      @if (table.entries.length === 0) {
+        <div class="rt-empty">
+          Aucune entrée — édite la table pour en ajouter.
+        </div>
+      }
+      @if (table.entries.length > 0) {
+        <table>
+          <thead>
+            <tr><th class="col-range">Jet</th><th>Résultat</th></tr>
+          </thead>
+          <tbody>
+            @for (e of table.entries; track e) {
+              <tr [class.matched]="isMatched(e)">
+                <td class="col-range">{{ rangeLabel(e) }}</td>
+                <td>
+                  <div class="entry-label">{{ e.label }}</div>
+                  @if (e.detail) {
+                    <div class="entry-detail">{{ e.detail }}</div>
+                  }
+                </td>
+              </tr>
+            }
+          </tbody>
+        </table>
+      }
+    </section>
   </div>
-
-  <header class="rt-header">
-    <h1><lucide-icon [img]="Dices" [size]="22"></lucide-icon> {{ table.name }}</h1>
-    <p class="rt-desc" *ngIf="table.description">{{ table.description }}</p>
-    <span class="rt-formula">Dé : <code>{{ table.diceFormula }}</code></span>
-  </header>
-
-  <!-- Zone de jet -->
-  <section class="rt-roll">
-    <button class="btn-roll" (click)="roll()">
-      <lucide-icon [img]="Dices" [size]="18"></lucide-icon>
-      Lancer {{ table.diceFormula }}
-    </button>
-    <div class="rt-result" *ngIf="lastRoll">
-      <span class="rt-total">{{ lastRoll.total }}</span>
-      <span class="rt-rolls" *ngIf="lastRoll.rolls.length > 1">({{ lastRoll.rolls.join(' + ') }})</span>
-      <span class="rt-arrow">→</span>
-      <span class="rt-matched" *ngIf="matched">{{ matched.label }}</span>
-      <span class="rt-nomatch" *ngIf="!matched">Aucune entrée pour ce résultat</span>
-    </div>
-  </section>
-
-  <div class="rt-detail" *ngIf="matched?.detail">{{ matched?.detail }}</div>
-
-  <!-- Liste des entrées -->
-  <section class="rt-entries">
-    <div class="rt-empty" *ngIf="table.entries.length === 0">
-      Aucune entrée — édite la table pour en ajouter.
-    </div>
-    <table *ngIf="table.entries.length > 0">
-      <thead>
-        <tr><th class="col-range">Jet</th><th>Résultat</th></tr>
-      </thead>
-      <tbody>
-        <tr *ngFor="let e of table.entries" [class.matched]="isMatched(e)">
-          <td class="col-range">{{ rangeLabel(e) }}</td>
-          <td>
-            <div class="entry-label">{{ e.label }}</div>
-            <div class="entry-detail" *ngIf="e.detail">{{ e.detail }}</div>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </section>
-</div>
+}
diff --git a/web/src/app/campaigns/random-table/random-table-view/random-table-view.component.ts b/web/src/app/campaigns/random-table/random-table-view/random-table-view.component.ts
index ff13736..23e4641 100644
--- a/web/src/app/campaigns/random-table/random-table-view/random-table-view.component.ts
+++ b/web/src/app/campaigns/random-table/random-table-view/random-table-view.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { CommonModule } from '@angular/common';
+
 import { ActivatedRoute, Router } from '@angular/router';
 import { LucideAngularModule, ArrowLeft, Edit3, Dices } from 'lucide-angular';
 import { RandomTableService } from '../../../services/random-table.service';
@@ -14,7 +14,7 @@ import { DiceUtils, DiceRoll } from '../../../shared/dice.utils';
  */
 @Component({
     selector: 'app-random-table-view',
-    imports: [CommonModule, LucideAngularModule],
+    imports: [LucideAngularModule],
     templateUrl: './random-table-view.component.html',
     styleUrls: ['./random-table-view.component.scss']
 })
diff --git a/web/src/app/campaigns/scene/scene-create/scene-create.component.html b/web/src/app/campaigns/scene/scene-create/scene-create.component.html
index 6d7c360..0ca0150 100644
--- a/web/src/app/campaigns/scene/scene-create/scene-create.component.html
+++ b/web/src/app/campaigns/scene/scene-create/scene-create.component.html
@@ -2,7 +2,9 @@
 
   <div class="page-header">
     <h1>Créer une nouvelle scène</h1>
-    <p class="chapter-ref" *ngIf="chapterName">Chapitre : {{ chapterName }}</p>
+    @if (chapterName) {
+      <p class="chapter-ref">Chapitre : {{ chapterName }}</p>
+    }
   </div>
 
   <form [formGroup]="form" (ngSubmit)="submit()" class="scene-form">
@@ -15,7 +17,7 @@
         formControlName="name"
         placeholder="Ex: Arrivée au village"
         [class.invalid]="form.get('name')?.invalid && form.get('name')?.touched"
-      />
+        />
     </div>
 
     <div class="field">
diff --git a/web/src/app/campaigns/scene/scene-create/scene-create.component.ts b/web/src/app/campaigns/scene/scene-create/scene-create.component.ts
index cf4fba6..5cfe13b 100644
--- a/web/src/app/campaigns/scene/scene-create/scene-create.component.ts
+++ b/web/src/app/campaigns/scene/scene-create/scene-create.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
-import { CommonModule } from '@angular/common';
+
 import { ReactiveFormsModule, FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { forkJoin } from 'rxjs';
@@ -19,7 +19,7 @@ import { CAMPAIGN_ICON_OPTIONS } from '../../campaign-icons';
  */
 @Component({
     selector: 'app-scene-create',
-    imports: [CommonModule, ReactiveFormsModule, LucideAngularModule, IconPickerComponent],
+    imports: [ReactiveFormsModule, LucideAngularModule, IconPickerComponent],
     templateUrl: './scene-create.component.html',
     styleUrls: ['./scene-create.component.scss']
 })
diff --git a/web/src/app/campaigns/scene/scene-edit/scene-edit.component.html b/web/src/app/campaigns/scene/scene-edit/scene-edit.component.html
index baa0c28..18d3f8c 100644
--- a/web/src/app/campaigns/scene/scene-edit/scene-edit.component.html
+++ b/web/src/app/campaigns/scene/scene-edit/scene-edit.component.html
@@ -7,9 +7,9 @@
     </div>
     <div class="header-actions">
       <button type="button" class="btn-ai"
-              (click)="toggleChat()"
-              [class.active]="chatOpen"
-              title="Ouvrir l'Assistant IA pour dialoguer autour de cette scène">
+        (click)="toggleChat()"
+        [class.active]="chatOpen"
+        title="Ouvrir l'Assistant IA pour dialoguer autour de cette scène">
         <lucide-icon [img]="Sparkles" [size]="14"></lucide-icon>
         Assistant IA
       </button>
@@ -58,7 +58,7 @@
         formControlName="name"
         placeholder="Ex: Arrivée au village"
         [class.invalid]="form.get('name')?.invalid && form.get('name')?.touched"
-      />
+        />
     </div>
 
     <div class="field">
@@ -136,60 +136,63 @@
 
     <!-- Section : Branches narratives (graphe intra-chapitre) -->
     <app-expandable-section title="Branches narratives" icon="🌿">
-      <div class="branches-hint" *ngIf="siblingScenes.length === 0">
-        <small class="field-hint">
-          💡 Il faut au moins une autre scène dans ce chapitre pour créer des branches.
-          Créez d'abord d'autres scènes, puis revenez ici pour les connecter.
-        </small>
-      </div>
-
-      <div class="branches-list" *ngIf="siblingScenes.length > 0">
-        <div class="branch-item" *ngFor="let branch of branches; let i = index; trackBy: trackByIndex">
-          <div class="field">
-            <label>Libellé du choix</label>
-            <input
-              type="text"
-              [value]="branch.label"
-              (input)="updateBranchLabel(i, $any($event.target).value)"
-              placeholder="Ex: Si les joueurs attaquent le garde" />
-          </div>
-
-          <div class="field">
-            <label>Scène de destination *</label>
-            <select
-              (change)="updateBranchTarget(i, $any($event.target).value)">
-              <option value="" [selected]="!branch.targetSceneId">— Choisir une scène —</option>
-              <option *ngFor="let s of siblingScenes"
-                      [value]="s.id"
-                      [selected]="s.id === branch.targetSceneId">{{ s.name }}</option>
-            </select>
-          </div>
-
-          <div class="field">
-            <label>Condition MJ (optionnel)</label>
-            <input
-              type="text"
-              [value]="branch.condition || ''"
-              (input)="updateBranchCondition(i, $any($event.target).value)"
-              placeholder="Ex: Jet de Persuasion DD 15 réussi" />
-          </div>
-
-          <button type="button" class="btn-remove-branch" (click)="removeBranch(i)"
-                  title="Supprimer cette branche">
-            <lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
-            Retirer
-          </button>
+      @if (siblingScenes.length === 0) {
+        <div class="branches-hint">
+          <small class="field-hint">
+            💡 Il faut au moins une autre scène dans ce chapitre pour créer des branches.
+            Créez d'abord d'autres scènes, puis revenez ici pour les connecter.
+          </small>
         </div>
+      }
 
-        <button type="button" class="btn-add-branch" (click)="addBranch()">
-          + Ajouter une branche
-        </button>
-
-        <small class="field-hint">
-          Chaque branche représente une "sortie" possible depuis cette scène selon l'action des joueurs.
-          Les cibles sont limitées aux scènes du même chapitre.
-        </small>
-      </div>
+      @if (siblingScenes.length > 0) {
+        <div class="branches-list">
+          @for (branch of branches; track $index; let i = $index) {
+            <div class="branch-item">
+              <div class="field">
+                <label>Libellé du choix</label>
+                <input
+                  type="text"
+                  [value]="branch.label"
+                  (input)="updateBranchLabel(i, $any($event.target).value)"
+                  placeholder="Ex: Si les joueurs attaquent le garde" />
+              </div>
+              <div class="field">
+                <label>Scène de destination *</label>
+                <select
+                  (change)="updateBranchTarget(i, $any($event.target).value)">
+                  <option value="" [selected]="!branch.targetSceneId">— Choisir une scène —</option>
+                  @for (s of siblingScenes; track s) {
+                    <option
+                      [value]="s.id"
+                    [selected]="s.id === branch.targetSceneId">{{ s.name }}</option>
+                  }
+                </select>
+              </div>
+              <div class="field">
+                <label>Condition MJ (optionnel)</label>
+                <input
+                  type="text"
+                  [value]="branch.condition || ''"
+                  (input)="updateBranchCondition(i, $any($event.target).value)"
+                  placeholder="Ex: Jet de Persuasion DD 15 réussi" />
+              </div>
+              <button type="button" class="btn-remove-branch" (click)="removeBranch(i)"
+                title="Supprimer cette branche">
+                <lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
+                Retirer
+              </button>
+            </div>
+          }
+          <button type="button" class="btn-add-branch" (click)="addBranch()">
+            + Ajouter une branche
+          </button>
+          <small class="field-hint">
+            Chaque branche représente une "sortie" possible depuis cette scène selon l'action des joueurs.
+            Les cibles sont limitées aux scènes du même chapitre.
+          </small>
+        </div>
+      }
     </app-expandable-section>
 
     <!-- Section : Combat ou rencontre -->
@@ -210,26 +213,30 @@
     </app-expandable-section>
 
     <!-- Section : Pages Lore associées (B2 cross-context) -->
-    <app-expandable-section title="Pages Lore associées" icon="🔗" *ngIf="loreId">
+    @if (loreId) {
+      <app-expandable-section title="Pages Lore associées" icon="🔗">
+        <div class="field">
+          <app-lore-link-picker
+            [value]="relatedPageIds"
+            [availablePages]="availablePages"
+            [loreId]="loreId"
+            (valueChange)="relatedPageIds = $event">
+          </app-lore-link-picker>
+          <small class="field-hint">
+            Épinglez ici le lieu, les PNJ ou créatures de cette scène. Cliquez sur un chip pour ouvrir la page.
+          </small>
+        </div>
+      </app-expandable-section>
+    }
+
+    @if (!loreId) {
       <div class="field">
-        <app-lore-link-picker
-          [value]="relatedPageIds"
-          [availablePages]="availablePages"
-          [loreId]="loreId"
-          (valueChange)="relatedPageIds = $event">
-        </app-lore-link-picker>
         <small class="field-hint">
-          Épinglez ici le lieu, les PNJ ou créatures de cette scène. Cliquez sur un chip pour ouvrir la page.
+          💡 Cette campagne n'est associée à aucun univers. Associez-la à un Lore dans l'écran de la campagne
+          pour pouvoir épingler des pages du Lore à cette scène.
         </small>
       </div>
-    </app-expandable-section>
-
-    <div class="field" *ngIf="!loreId">
-      <small class="field-hint">
-        💡 Cette campagne n'est associée à aucun univers. Associez-la à un Lore dans l'écran de la campagne
-        pour pouvoir épingler des pages du Lore à cette scène.
-      </small>
-    </div>
+    }
 
     <!-- Lieu explorable : pièces / donjon -->
     <app-expandable-section title="Lieu explorable (donjon, crypte…)" icon="🏰" [initiallyOpen]="rooms.length > 0">
diff --git a/web/src/app/campaigns/scene/scene-edit/scene-edit.component.ts b/web/src/app/campaigns/scene/scene-edit/scene-edit.component.ts
index a61f9e4..ea12dc1 100644
--- a/web/src/app/campaigns/scene/scene-edit/scene-edit.component.ts
+++ b/web/src/app/campaigns/scene/scene-edit/scene-edit.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
-import { CommonModule } from '@angular/common';
+
 import { ReactiveFormsModule, FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { forkJoin, of } from 'rxjs';
@@ -30,7 +30,7 @@ import { ConfirmDialogService } from '../../../shared/confirm-dialog/confirm-dia
  */
 @Component({
     selector: 'app-scene-edit',
-    imports: [CommonModule, ReactiveFormsModule, LucideAngularModule, ExpandableSectionComponent, LoreLinkPickerComponent, AiChatDrawerComponent, ImageGalleryComponent, IconPickerComponent, RoomsEditorComponent],
+    imports: [ReactiveFormsModule, LucideAngularModule, ExpandableSectionComponent, LoreLinkPickerComponent, AiChatDrawerComponent, ImageGalleryComponent, IconPickerComponent, RoomsEditorComponent],
     templateUrl: './scene-edit.component.html',
     styleUrls: ['./scene-edit.component.scss']
 })
@@ -218,7 +218,6 @@ export class SceneEditComponent implements OnInit, OnDestroy {
 
   // ─────────────── Gestion des branches narratives ───────────────
 
-  trackByIndex = (i: number) => i;
 
   addBranch(): void {
     this.branches.push({ label: '', targetSceneId: '', condition: '' });
diff --git a/web/src/app/campaigns/scene/scene-view/scene-view.component.html b/web/src/app/campaigns/scene/scene-view/scene-view.component.html
index 587dbbf..3ac495e 100644
--- a/web/src/app/campaigns/scene/scene-view/scene-view.component.html
+++ b/web/src/app/campaigns/scene/scene-view/scene-view.component.html
@@ -1,147 +1,188 @@
-<div class="view-page" *ngIf="scene">
-
-  <header class="view-header">
-    <div>
-      <h1>
-        <lucide-icon *ngIf="scene.icon" [img]="resolveCampaignIcon(scene.icon)" [size]="22" class="title-icon"></lucide-icon>
-        {{ scene.name }}
-      </h1>
-      <p class="view-subtitle">Scène</p>
-    </div>
-    <div class="view-actions">
-      <button type="button" class="btn-primary" (click)="editMode()">
-        <lucide-icon [img]="Pencil" [size]="14"></lucide-icon>
-        Modifier
-      </button>
-      <button type="button" class="btn-danger" (click)="deleteScene()" title="Supprimer la scène">
-        <lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
-        Supprimer
-      </button>
-    </div>
-  </header>
-
-  <!-- Illustrations (rendu editorial magazine) -->
-  <section class="view-section" *ngIf="(scene.illustrationImageIds?.length ?? 0) > 0">
-    <app-image-gallery [imageIds]="scene.illustrationImageIds ?? []" [layout]="'EDITORIAL'"></app-image-gallery>
-  </section>
-
-  <!-- Cartes & plans -->
-  <section class="view-section" *ngIf="(scene.mapImageIds?.length ?? 0) > 0">
-    <h2 class="view-section-title"><span class="view-section-icon">🗺️</span> Cartes & plans</h2>
-    <app-image-gallery [imageIds]="scene.mapImageIds ?? []" [layout]="'MAPS'"></app-image-gallery>
-  </section>
-
-  <!-- Description courte -->
-  <section class="view-section">
-    <h2 class="view-section-title"><span class="view-section-icon">📝</span> Description</h2>
-    <p class="view-section-body" *ngIf="scene.description?.trim(); else emptyDesc">{{ scene.description }}</p>
-    <ng-template #emptyDesc><p class="view-section-empty">Non renseigné</p></ng-template>
-  </section>
-
-  <!-- Contexte et ambiance -->
-  <div class="view-row" *ngIf="scene.location?.trim() || scene.timing?.trim()">
-    <section class="view-section" *ngIf="scene.location?.trim()">
-      <h2 class="view-section-title"><span class="view-section-icon">📍</span> Lieu</h2>
-      <p class="view-section-body">{{ scene.location }}</p>
-    </section>
-    <section class="view-section" *ngIf="scene.timing?.trim()">
-      <h2 class="view-section-title"><span class="view-section-icon">⏰</span> Moment</h2>
-      <p class="view-section-body">{{ scene.timing }}</p>
+@if (scene) {
+  <div class="view-page">
+    <header class="view-header">
+      <div>
+        <h1>
+          @if (scene.icon) {
+            <lucide-icon [img]="resolveCampaignIcon(scene.icon)" [size]="22" class="title-icon"></lucide-icon>
+          }
+          {{ scene.name }}
+        </h1>
+        <p class="view-subtitle">Scène</p>
+      </div>
+      <div class="view-actions">
+        <button type="button" class="btn-primary" (click)="editMode()">
+          <lucide-icon [img]="Pencil" [size]="14"></lucide-icon>
+          Modifier
+        </button>
+        <button type="button" class="btn-danger" (click)="deleteScene()" title="Supprimer la scène">
+          <lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
+          Supprimer
+        </button>
+      </div>
+    </header>
+    <!-- Illustrations (rendu editorial magazine) -->
+    @if ((scene.illustrationImageIds?.length ?? 0) > 0) {
+      <section class="view-section">
+        <app-image-gallery [imageIds]="scene.illustrationImageIds ?? []" [layout]="'EDITORIAL'"></app-image-gallery>
+      </section>
+    }
+    <!-- Cartes & plans -->
+    @if ((scene.mapImageIds?.length ?? 0) > 0) {
+      <section class="view-section">
+        <h2 class="view-section-title"><span class="view-section-icon">🗺️</span> Cartes & plans</h2>
+        <app-image-gallery [imageIds]="scene.mapImageIds ?? []" [layout]="'MAPS'"></app-image-gallery>
+      </section>
+    }
+    <!-- Description courte -->
+    <section class="view-section">
+      <h2 class="view-section-title"><span class="view-section-icon">📝</span> Description</h2>
+      @if (scene.description?.trim()) {
+        <p class="view-section-body">{{ scene.description }}</p>
+      } @else {
+        <p class="view-section-empty">Non renseigné</p>
+      }
     </section>
+    <!-- Contexte et ambiance -->
+    @if (scene.location?.trim() || scene.timing?.trim()) {
+      <div class="view-row">
+        @if (scene.location?.trim()) {
+          <section class="view-section">
+            <h2 class="view-section-title"><span class="view-section-icon">📍</span> Lieu</h2>
+            <p class="view-section-body">{{ scene.location }}</p>
+          </section>
+        }
+        @if (scene.timing?.trim()) {
+          <section class="view-section">
+            <h2 class="view-section-title"><span class="view-section-icon">⏰</span> Moment</h2>
+            <p class="view-section-body">{{ scene.timing }}</p>
+          </section>
+        }
+      </div>
+    }
+    @if (scene.atmosphere?.trim()) {
+      <section class="view-section">
+        <h2 class="view-section-title"><span class="view-section-icon">🌫️</span> Ambiance et atmosphère</h2>
+        <p class="view-section-body">{{ scene.atmosphere }}</p>
+      </section>
+    }
+    <!-- Narration pour les joueurs -->
+    @if (scene.playerNarration?.trim()) {
+      <section class="view-section">
+        <h2 class="view-section-title"><span class="view-section-icon">📖</span> Narration pour les joueurs</h2>
+        <p class="view-section-body">{{ scene.playerNarration }}</p>
+      </section>
+    }
+    <!-- Choix et conséquences -->
+    @if (scene.choicesConsequences?.trim()) {
+      <section class="view-section">
+        <h2 class="view-section-title"><span class="view-section-icon">🔀</span> Choix et conséquences</h2>
+        <p class="view-section-body">{{ scene.choicesConsequences }}</p>
+      </section>
+    }
+    <!-- Combat ou rencontre -->
+    @if (scene.combatDifficulty?.trim() || scene.enemies?.trim()) {
+      @if (scene.combatDifficulty?.trim()) {
+        <section class="view-section">
+          <h2 class="view-section-title"><span class="view-section-icon">⚔️</span> Difficulté estimée</h2>
+          <p class="view-section-body">{{ scene.combatDifficulty }}</p>
+        </section>
+      }
+      @if (scene.enemies?.trim()) {
+        <section class="view-section">
+          <h2 class="view-section-title"><span class="view-section-icon">🐲</span> Ennemis et créatures</h2>
+          <p class="view-section-body">{{ scene.enemies }}</p>
+        </section>
+      }
+    }
+    <!-- Notes et secrets du MJ (privé) -->
+    @if (scene.gmSecretNotes?.trim()) {
+      <section class="view-section view-section--private">
+        <h2 class="view-section-title">
+          <span class="view-section-icon">🔒</span>
+          Notes et secrets du MJ
+        </h2>
+        <p class="view-section-body">{{ scene.gmSecretNotes }}</p>
+      </section>
+    }
+    <!-- Pages Lore liées -->
+    @if (loreId && (scene.relatedPageIds?.length ?? 0) > 0) {
+      <section class="view-section">
+        <h2 class="view-section-title"><span class="view-section-icon">🔗</span> Pages Lore associées</h2>
+        <div class="view-chips">
+          @for (relId of scene.relatedPageIds; track relId) {
+            <a class="view-chip"
+              [routerLink]="['/lore', loreId, 'pages', relId]">
+              {{ titleOfRelated(relId) }}
+            </a>
+          }
+        </div>
+      </section>
+    }
+    <!-- Lieu explorable : pièces (mode donjon) -->
+    @if ((scene.rooms?.length ?? 0) > 0) {
+      <section class="view-section">
+        <h2 class="view-section-title"><span class="view-section-icon">🏰</span> Pièces du lieu</h2>
+        <div class="rooms-readonly">
+          @for (r of scene.rooms; track r; let i = $index) {
+            <article class="room-readonly">
+              <header class="room-readonly-head">
+                <span class="room-readonly-index">#{{ i + 1 }}</span>
+                <span class="room-readonly-name">{{ r.name }}</span>
+                @if (r.floor !== null && r.floor !== undefined) {
+                  <span class="room-readonly-floor">
+                    Étage {{ r.floor }}
+                  </span>
+                }
+              </header>
+              @if (r.description?.trim()) {
+                <p class="room-readonly-desc">{{ r.description }}</p>
+              }
+              <div class="room-readonly-grid">
+                @if (r.enemies?.trim()) {
+                  <div>
+                    <strong>⚔️ Ennemis</strong>
+                    <p>{{ r.enemies }}</p>
+                  </div>
+                }
+                @if (r.loot?.trim()) {
+                  <div>
+                    <strong>💰 Loot</strong>
+                    <p>{{ r.loot }}</p>
+                  </div>
+                }
+                @if (r.traps?.trim()) {
+                  <div>
+                    <strong>⚠️ Pièges</strong>
+                    <p>{{ r.traps }}</p>
+                  </div>
+                }
+                @if (r.gmNotes?.trim()) {
+                  <div class="room-readonly-private">
+                    <strong>🔒 Notes MJ</strong>
+                    <p>{{ r.gmNotes }}</p>
+                  </div>
+                }
+              </div>
+              @if ((r.branches?.length ?? 0) > 0) {
+                <div class="room-readonly-branches">
+                  <strong>→ Sorties</strong>
+                  <ul>
+                    @for (b of r.branches; track b) {
+                      <li>
+                        <em>{{ b.label }}</em> → {{ roomNameById(scene, b.targetRoomId) }}
+                        @if (b.condition?.trim()) {
+                          <span class="branch-cond">(si : {{ b.condition }})</span>
+                        }
+                      </li>
+                    }
+                  </ul>
+                </div>
+              }
+            </article>
+          }
+        </div>
+      </section>
+    }
   </div>
-
-  <section class="view-section" *ngIf="scene.atmosphere?.trim()">
-    <h2 class="view-section-title"><span class="view-section-icon">🌫️</span> Ambiance et atmosphère</h2>
-    <p class="view-section-body">{{ scene.atmosphere }}</p>
-  </section>
-
-  <!-- Narration pour les joueurs -->
-  <section class="view-section" *ngIf="scene.playerNarration?.trim()">
-    <h2 class="view-section-title"><span class="view-section-icon">📖</span> Narration pour les joueurs</h2>
-    <p class="view-section-body">{{ scene.playerNarration }}</p>
-  </section>
-
-  <!-- Choix et conséquences -->
-  <section class="view-section" *ngIf="scene.choicesConsequences?.trim()">
-    <h2 class="view-section-title"><span class="view-section-icon">🔀</span> Choix et conséquences</h2>
-    <p class="view-section-body">{{ scene.choicesConsequences }}</p>
-  </section>
-
-  <!-- Combat ou rencontre -->
-  <ng-container *ngIf="scene.combatDifficulty?.trim() || scene.enemies?.trim()">
-    <section class="view-section" *ngIf="scene.combatDifficulty?.trim()">
-      <h2 class="view-section-title"><span class="view-section-icon">⚔️</span> Difficulté estimée</h2>
-      <p class="view-section-body">{{ scene.combatDifficulty }}</p>
-    </section>
-    <section class="view-section" *ngIf="scene.enemies?.trim()">
-      <h2 class="view-section-title"><span class="view-section-icon">🐲</span> Ennemis et créatures</h2>
-      <p class="view-section-body">{{ scene.enemies }}</p>
-    </section>
-  </ng-container>
-
-  <!-- Notes et secrets du MJ (privé) -->
-  <section class="view-section view-section--private" *ngIf="scene.gmSecretNotes?.trim()">
-    <h2 class="view-section-title">
-      <span class="view-section-icon">🔒</span>
-      Notes et secrets du MJ
-    </h2>
-    <p class="view-section-body">{{ scene.gmSecretNotes }}</p>
-  </section>
-
-  <!-- Pages Lore liées -->
-  <section class="view-section" *ngIf="loreId && (scene.relatedPageIds?.length ?? 0) > 0">
-    <h2 class="view-section-title"><span class="view-section-icon">🔗</span> Pages Lore associées</h2>
-    <div class="view-chips">
-      <a class="view-chip"
-         *ngFor="let relId of scene.relatedPageIds"
-         [routerLink]="['/lore', loreId, 'pages', relId]">
-        {{ titleOfRelated(relId) }}
-      </a>
-    </div>
-  </section>
-
-  <!-- Lieu explorable : pièces (mode donjon) -->
-  <section class="view-section" *ngIf="(scene.rooms?.length ?? 0) > 0">
-    <h2 class="view-section-title"><span class="view-section-icon">🏰</span> Pièces du lieu</h2>
-    <div class="rooms-readonly">
-      <article class="room-readonly" *ngFor="let r of scene.rooms; let i = index">
-        <header class="room-readonly-head">
-          <span class="room-readonly-index">#{{ i + 1 }}</span>
-          <span class="room-readonly-name">{{ r.name }}</span>
-          <span class="room-readonly-floor" *ngIf="r.floor !== null && r.floor !== undefined">
-            Étage {{ r.floor }}
-          </span>
-        </header>
-        <p class="room-readonly-desc" *ngIf="r.description?.trim()">{{ r.description }}</p>
-        <div class="room-readonly-grid">
-          <div *ngIf="r.enemies?.trim()">
-            <strong>⚔️ Ennemis</strong>
-            <p>{{ r.enemies }}</p>
-          </div>
-          <div *ngIf="r.loot?.trim()">
-            <strong>💰 Loot</strong>
-            <p>{{ r.loot }}</p>
-          </div>
-          <div *ngIf="r.traps?.trim()">
-            <strong>⚠️ Pièges</strong>
-            <p>{{ r.traps }}</p>
-          </div>
-          <div *ngIf="r.gmNotes?.trim()" class="room-readonly-private">
-            <strong>🔒 Notes MJ</strong>
-            <p>{{ r.gmNotes }}</p>
-          </div>
-        </div>
-        <div class="room-readonly-branches" *ngIf="(r.branches?.length ?? 0) > 0">
-          <strong>→ Sorties</strong>
-          <ul>
-            <li *ngFor="let b of r.branches">
-              <em>{{ b.label }}</em> → {{ roomNameById(scene, b.targetRoomId) }}
-              <span class="branch-cond" *ngIf="b.condition?.trim()">(si : {{ b.condition }})</span>
-            </li>
-          </ul>
-        </div>
-      </article>
-    </div>
-  </section>
-
-</div>
+}
diff --git a/web/src/app/campaigns/scene/scene-view/scene-view.component.ts b/web/src/app/campaigns/scene/scene-view/scene-view.component.ts
index 17aab4c..cc925d8 100644
--- a/web/src/app/campaigns/scene/scene-view/scene-view.component.ts
+++ b/web/src/app/campaigns/scene/scene-view/scene-view.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
-import { CommonModule } from '@angular/common';
+
 import { ActivatedRoute, Router, RouterModule } from '@angular/router';
 import { forkJoin, of } from 'rxjs';
 import { switchMap } from 'rxjs/operators';
@@ -24,7 +24,7 @@ import { ConfirmDialogService } from '../../../shared/confirm-dialog/confirm-dia
  */
 @Component({
     selector: 'app-scene-view',
-    imports: [CommonModule, RouterModule, LucideAngularModule, ImageGalleryComponent],
+    imports: [RouterModule, LucideAngularModule, ImageGalleryComponent],
     templateUrl: './scene-view.component.html',
     styleUrls: ['./scene-view.component.scss']
 })
diff --git a/web/src/app/game-systems/game-system-edit/game-system-edit.component.html b/web/src/app/game-systems/game-system-edit/game-system-edit.component.html
index 95a88c5..442e943 100644
--- a/web/src/app/game-systems/game-system-edit/game-system-edit.component.html
+++ b/web/src/app/game-systems/game-system-edit/game-system-edit.component.html
@@ -37,120 +37,135 @@
       </p>
 
       <!-- Import d'un PDF de règles : l'IA propose un découpage en sections,
-           que l'utilisateur révise ci-dessous avant d'enregistrer. -->
+      que l'utilisateur révise ci-dessous avant d'enregistrer. -->
       <div class="import-row">
         <input #pdfInput type="file" accept="application/pdf,.pdf" hidden (change)="onPdfSelected($event)" />
         <button type="button" class="btn-import" [disabled]="importing" (click)="pdfInput.click()">
           <lucide-icon [img]="Upload" [size]="14"></lucide-icon>
           {{ importing ? 'Import en cours…' : 'Importer un PDF de règles' }}
         </button>
-        <span class="import-hint" *ngIf="!importing">L'IA propose un découpage en sections — vous révisez avant d'enregistrer.</span>
+        @if (!importing) {
+          <span class="import-hint">L'IA propose un découpage en sections — vous révisez avant d'enregistrer.</span>
+        }
       </div>
 
       <!-- Progression live de l'import (étape + barre + sections trouvées). -->
-      <div class="import-progress" *ngIf="importing">
-        <p class="import-phase">{{ importPhase }}</p>
-        <div class="progress-bar" *ngIf="importProgress">
-          <div class="progress-fill"
-               [style.width.%]="importProgress.total ? (importProgress.current / importProgress.total) * 100 : 0">
-          </div>
+      @if (importing) {
+        <div class="import-progress">
+          <p class="import-phase">{{ importPhase }}</p>
+          @if (importProgress) {
+            <div class="progress-bar">
+              <div class="progress-fill"
+                [style.width.%]="importProgress.total ? (importProgress.current / importProgress.total) * 100 : 0">
+              </div>
+            </div>
+          }
+          @if (importFound.length) {
+            <p class="import-found">
+              Sections trouvées : {{ importFound.join(' · ') }}
+            </p>
+          }
         </div>
-        <p class="import-found" *ngIf="importFound.length">
-          Sections trouvées : {{ importFound.join(' · ') }}
-        </p>
-      </div>
+      }
 
-      <p class="import-note" *ngIf="importNote">{{ importNote }}</p>
-      <p class="import-error" *ngIf="importError">{{ importError }}</p>
+      @if (importNote) {
+        <p class="import-note">{{ importNote }}</p>
+      }
+      @if (importError) {
+        <p class="import-error">{{ importError }}</p>
+      }
 
       <div class="section-list">
-        <div class="section-card" *ngFor="let section of sections; let i = index" [class.collapsed]="section.collapsed">
-
-          <div class="section-head">
-            <button type="button" class="btn-collapse" (click)="toggleCollapse(section)">
-              <lucide-icon [img]="section.collapsed ? ChevronRight : ChevronDown" [size]="16"></lucide-icon>
-            </button>
-            <input
-              type="text"
-              class="section-title-input"
-              [(ngModel)]="section.title"
-              [name]="'title-' + i"
-              placeholder="Nom de la section (ex: Combat)"
-            />
-            <button type="button" class="btn-remove" (click)="removeSection(i)" title="Supprimer cette section">
-              <lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
-            </button>
-          </div>
-
-          <textarea
-            *ngIf="!section.collapsed"
-            class="section-content"
-            [(ngModel)]="section.content"
-            [name]="'content-' + i"
-            rows="6"
-            placeholder="Décrivez les règles de cette section..."
-          ></textarea>
+        @for (section of sections; track section; let i = $index) {
+          <div class="section-card" [class.collapsed]="section.collapsed">
+            <div class="section-head">
+              <button type="button" class="btn-collapse" (click)="toggleCollapse(section)">
+                <lucide-icon [img]="section.collapsed ? ChevronRight : ChevronDown" [size]="16"></lucide-icon>
+              </button>
+              <input
+                type="text"
+                class="section-title-input"
+                [(ngModel)]="section.title"
+                [name]="'title-' + i"
+                placeholder="Nom de la section (ex: Combat)"
+                />
+                <button type="button" class="btn-remove" (click)="removeSection(i)" title="Supprimer cette section">
+                  <lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
+                </button>
+              </div>
+              @if (!section.collapsed) {
+                <textarea
+                  class="section-content"
+                  [(ngModel)]="section.content"
+                  [name]="'content-' + i"
+                  rows="6"
+                  placeholder="Décrivez les règles de cette section..."
+                ></textarea>
+              }
+            </div>
+          }
 
+          @if (sections.length === 0) {
+            <div class="empty-hint">
+              Aucune section pour l'instant — ajoutez-en une avec les boutons ci-dessous.
+            </div>
+          }
         </div>
 
-        <div *ngIf="sections.length === 0" class="empty-hint">
-          Aucune section pour l'instant — ajoutez-en une avec les boutons ci-dessous.
+        <div class="add-row">
+          <span class="add-label">Ajouter une section :</span>
+          @for (name of suggestedSections; track name) {
+            <button
+              type="button"
+              class="chip"
+              [class.disabled]="isSectionUsed(name)"
+              (click)="addSuggested(name)"
+              [disabled]="isSectionUsed(name)">
+              <lucide-icon [img]="Plus" [size]="12"></lucide-icon>
+              {{ name }}
+            </button>
+          }
+          <button type="button" class="chip chip-custom" (click)="addBlank()">
+            <lucide-icon [img]="Plus" [size]="12"></lucide-icon>
+            Autre…
+          </button>
         </div>
       </div>
 
-      <div class="add-row">
-        <span class="add-label">Ajouter une section :</span>
-        <button
-          type="button"
-          *ngFor="let name of suggestedSections"
-          class="chip"
-          [class.disabled]="isSectionUsed(name)"
-          (click)="addSuggested(name)"
-          [disabled]="isSectionUsed(name)">
-          <lucide-icon [img]="Plus" [size]="12"></lucide-icon>
-          {{ name }}
-        </button>
-        <button type="button" class="chip chip-custom" (click)="addBlank()">
-          <lucide-icon [img]="Plus" [size]="12"></lucide-icon>
-          Autre…
-        </button>
+      <!-- Templates de fiches PJ/PNJ -->
+      <div class="templates-area">
+        <h2 class="sections-title">Fiches de personnages</h2>
+        <p class="sections-hint">
+          Definissez la structure des fiches PJ et PNJ pour ce systeme. Les champs
+          universels (nom, portrait, header) sont automatiques — ne rajoutez ici
+          que les champs specifiques au systeme (Histoire, PV, Stats…).
+        </p>
+
+        <app-template-fields-editor
+          label="Champs de la fiche PJ"
+          hint="Affiches lors de la creation/edition d'un personnage joueur."
+          [fields]="characterTemplate"
+          [suggestions]="characterFieldSuggestions"
+          (fieldsChange)="characterTemplate = $event">
+        </app-template-fields-editor>
+
+        <app-template-fields-editor
+          label="Champs de la fiche PNJ"
+          hint="Affiches lors de la creation/edition d'un personnage non-joueur."
+          [fields]="npcTemplate"
+          [suggestions]="npcFieldSuggestions"
+          (fieldsChange)="npcTemplate = $event">
+        </app-template-fields-editor>
       </div>
-    </div>
 
-    <!-- Templates de fiches PJ/PNJ -->
-    <div class="templates-area">
-      <h2 class="sections-title">Fiches de personnages</h2>
-      <p class="sections-hint">
-        Definissez la structure des fiches PJ et PNJ pour ce systeme. Les champs
-        universels (nom, portrait, header) sont automatiques — ne rajoutez ici
-        que les champs specifiques au systeme (Histoire, PV, Stats…).
-      </p>
+      <div class="actions">
+        <button type="button" class="btn-primary" [disabled]="!name.trim()" (click)="submit()">
+          <lucide-icon [img]="Save" [size]="16"></lucide-icon>
+          {{ id ? 'Enregistrer' : 'Créer' }}
+        </button>
+        <button type="button" class="btn-secondary" (click)="back()">Annuler</button>
+      </div>
 
-      <app-template-fields-editor
-        label="Champs de la fiche PJ"
-        hint="Affiches lors de la creation/edition d'un personnage joueur."
-        [fields]="characterTemplate"
-        [suggestions]="characterFieldSuggestions"
-        (fieldsChange)="characterTemplate = $event">
-      </app-template-fields-editor>
-
-      <app-template-fields-editor
-        label="Champs de la fiche PNJ"
-        hint="Affiches lors de la creation/edition d'un personnage non-joueur."
-        [fields]="npcTemplate"
-        [suggestions]="npcFieldSuggestions"
-        (fieldsChange)="npcTemplate = $event">
-      </app-template-fields-editor>
-    </div>
-
-    <div class="actions">
-      <button type="button" class="btn-primary" [disabled]="!name.trim()" (click)="submit()">
-        <lucide-icon [img]="Save" [size]="16"></lucide-icon>
-        {{ id ? 'Enregistrer' : 'Créer' }}
-      </button>
-      <button type="button" class="btn-secondary" (click)="back()">Annuler</button>
     </div>
 
   </div>
-
-</div>
diff --git a/web/src/app/game-systems/game-system-edit/game-system-edit.component.ts b/web/src/app/game-systems/game-system-edit/game-system-edit.component.ts
index 9b417eb..434e0fc 100644
--- a/web/src/app/game-systems/game-system-edit/game-system-edit.component.ts
+++ b/web/src/app/game-systems/game-system-edit/game-system-edit.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { CommonModule } from '@angular/common';
+
 import { ActivatedRoute, Router } from '@angular/router';
 import { FormsModule } from '@angular/forms';
 import { LucideAngularModule, Save, ArrowLeft, Dices, Plus, Trash2, ChevronDown, ChevronRight, Upload } from 'lucide-angular';
@@ -41,7 +41,7 @@ const NPC_FIELD_SUGGESTIONS = ['Motivation', 'Apparence', 'Faction', 'Notes MJ']
 
 @Component({
     selector: 'app-game-system-edit',
-    imports: [CommonModule, FormsModule, LucideAngularModule, TemplateFieldsEditorComponent],
+    imports: [FormsModule, LucideAngularModule, TemplateFieldsEditorComponent],
     templateUrl: './game-system-edit.component.html',
     styleUrls: ['./game-system-edit.component.scss']
 })
diff --git a/web/src/app/game-systems/game-systems.component.html b/web/src/app/game-systems/game-systems.component.html
index 4bc73a0..ba85e5d 100644
--- a/web/src/app/game-systems/game-systems.component.html
+++ b/web/src/app/game-systems/game-systems.component.html
@@ -8,21 +8,27 @@
 
   <div class="gs-grid">
 
-    <div class="gs-card" *ngFor="let gs of gameSystems" (click)="edit(gs.id!)">
-      <div class="card-header">
-        <h2>{{ gs.name }}</h2>
-        <div class="card-actions">
-          <button class="icon-btn" (click)="delete(gs, $event)" title="Supprimer">
-            <lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
-          </button>
+    @for (gs of gameSystems; track gs) {
+      <div class="gs-card" (click)="edit(gs.id!)">
+        <div class="card-header">
+          <h2>{{ gs.name }}</h2>
+          <div class="card-actions">
+            <button class="icon-btn" (click)="delete(gs, $event)" title="Supprimer">
+              <lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
+            </button>
+          </div>
+        </div>
+        <p class="card-description">{{ gs.description || '(Pas de description)' }}</p>
+        <div class="card-footer">
+          @if (gs.author) {
+            <span class="author">par {{ gs.author }}</span>
+          }
+          @if (gs.isPublic) {
+            <span class="badge-public">public</span>
+          }
         </div>
       </div>
-      <p class="card-description">{{ gs.description || '(Pas de description)' }}</p>
-      <div class="card-footer">
-        <span *ngIf="gs.author" class="author">par {{ gs.author }}</span>
-        <span *ngIf="gs.isPublic" class="badge-public">public</span>
-      </div>
-    </div>
+    }
 
     <div class="gs-card card-new" (click)="create()">
       <div class="new-icon">
diff --git a/web/src/app/game-systems/game-systems.component.ts b/web/src/app/game-systems/game-systems.component.ts
index 57d515e..65428c6 100644
--- a/web/src/app/game-systems/game-systems.component.ts
+++ b/web/src/app/game-systems/game-systems.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { CommonModule } from '@angular/common';
+
 import { Router } from '@angular/router';
 import { LucideAngularModule, Dices, Plus, Pencil, Trash2 } from 'lucide-angular';
 import { GameSystemService } from '../services/game-system.service';
@@ -9,7 +9,7 @@ import { ConfirmDialogService } from '../shared/confirm-dialog/confirm-dialog.se
 
 @Component({
     selector: 'app-game-systems',
-    imports: [CommonModule, LucideAngularModule],
+    imports: [LucideAngularModule],
     templateUrl: './game-systems.component.html',
     styleUrls: ['./game-systems.component.scss']
 })
diff --git a/web/src/app/lore/folder-view/folder-view.component.html b/web/src/app/lore/folder-view/folder-view.component.html
index 44b2545..870b442 100644
--- a/web/src/app/lore/folder-view/folder-view.component.html
+++ b/web/src/app/lore/folder-view/folder-view.component.html
@@ -1,85 +1,92 @@
-<div class="folder-view" *ngIf="node">
-
-  <!-- Fil d'Ariane : Lore → ancêtres → dossier courant -->
-  <nav class="breadcrumb" aria-label="Fil d'Ariane">
-    <button type="button" class="crumb" (click)="navigateToLoreRoot()" *ngIf="lore">
-      {{ lore.name }}
-    </button>
-    <ng-container *ngFor="let ancestor of ancestors">
+@if (node) {
+  <div class="folder-view">
+    <!-- Fil d'Ariane : Lore → ancêtres → dossier courant -->
+    <nav class="breadcrumb" aria-label="Fil d'Ariane">
+      @if (lore) {
+        <button type="button" class="crumb" (click)="navigateToLoreRoot()">
+          {{ lore.name }}
+        </button>
+      }
+      @for (ancestor of ancestors; track ancestor) {
+        <lucide-icon [img]="ChevronRight" [size]="12" class="crumb-sep"></lucide-icon>
+        <button type="button" class="crumb" (click)="navigateToSubfolder(ancestor.id!)">
+          {{ ancestor.name }}
+        </button>
+      }
       <lucide-icon [img]="ChevronRight" [size]="12" class="crumb-sep"></lucide-icon>
-      <button type="button" class="crumb" (click)="navigateToSubfolder(ancestor.id!)">
-        {{ ancestor.name }}
-      </button>
-    </ng-container>
-    <lucide-icon [img]="ChevronRight" [size]="12" class="crumb-sep"></lucide-icon>
-    <span class="crumb current">{{ node.name }}</span>
-  </nav>
-
-  <!-- Header : icône + nom + actions -->
-  <div class="detail-header">
-    <div class="header-texts">
-      <h1>
-        <lucide-icon [img]="folderIcon" [size]="24" class="title-icon"></lucide-icon>
-        {{ node.name }}
-      </h1>
-      <p class="description">
-        {{ subfolders.length }} sous-dossier(s) · {{ pages.length }} page(s)
-      </p>
-    </div>
-    <div class="header-actions">
-      <button type="button" class="btn-secondary" (click)="navigateToEdit()" title="Modifier le dossier">
-        <lucide-icon [img]="Pencil" [size]="14"></lucide-icon>
-        Modifier
-      </button>
-      <button type="button" class="btn-danger" (click)="delete()" title="Supprimer le dossier et tout son contenu">
-        <lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
-        Supprimer
-      </button>
+      <span class="crumb current">{{ node.name }}</span>
+    </nav>
+    <!-- Header : icône + nom + actions -->
+    <div class="detail-header">
+      <div class="header-texts">
+        <h1>
+          <lucide-icon [img]="folderIcon" [size]="24" class="title-icon"></lucide-icon>
+          {{ node.name }}
+        </h1>
+        <p class="description">
+          {{ subfolders.length }} sous-dossier(s) · {{ pages.length }} page(s)
+        </p>
+      </div>
+      <div class="header-actions">
+        <button type="button" class="btn-secondary" (click)="navigateToEdit()" title="Modifier le dossier">
+          <lucide-icon [img]="Pencil" [size]="14"></lucide-icon>
+          Modifier
+        </button>
+        <button type="button" class="btn-danger" (click)="delete()" title="Supprimer le dossier et tout son contenu">
+          <lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
+          Supprimer
+        </button>
+      </div>
     </div>
+    <!-- Sous-dossiers -->
+    <section class="detail-section">
+      <div class="section-header">
+        <h2>Sous-dossiers</h2>
+        <button class="btn-add" (click)="navigateToCreateSubfolder()">
+          <lucide-icon [img]="Plus" [size]="14"></lucide-icon>
+          Nouveau sous-dossier
+        </button>
+      </div>
+      @if (subfolders.length > 0) {
+        <div class="items-grid">
+          @for (sub of subfolders; track sub) {
+            <div class="node-card" (click)="navigateToSubfolder(sub.id!)">
+              <lucide-icon [img]="Folder" [size]="24" class="node-icon"></lucide-icon>
+              <span class="node-name">{{ sub.name }}</span>
+            </div>
+          }
+        </div>
+      }
+      @if (subfolders.length === 0) {
+        <div class="empty-state">
+          <p>Aucun sous-dossier.</p>
+        </div>
+      }
+    </section>
+    <!-- Pages -->
+    <section class="detail-section">
+      <div class="section-header">
+        <h2>Pages</h2>
+        <button class="btn-add" (click)="navigateToCreatePage()">
+          <lucide-icon [img]="Plus" [size]="14"></lucide-icon>
+          Nouvelle page
+        </button>
+      </div>
+      @if (pages.length > 0) {
+        <div class="items-grid">
+          @for (page of pages; track page) {
+            <div class="node-card" (click)="navigateToPage(page.id!)">
+              <lucide-icon [img]="FileText" [size]="24" class="node-icon"></lucide-icon>
+              <span class="node-name">{{ page.title }}</span>
+            </div>
+          }
+        </div>
+      }
+      @if (pages.length === 0) {
+        <div class="empty-state">
+          <p>Aucune page dans ce dossier.</p>
+        </div>
+      }
+    </section>
   </div>
-
-  <!-- Sous-dossiers -->
-  <section class="detail-section">
-    <div class="section-header">
-      <h2>Sous-dossiers</h2>
-      <button class="btn-add" (click)="navigateToCreateSubfolder()">
-        <lucide-icon [img]="Plus" [size]="14"></lucide-icon>
-        Nouveau sous-dossier
-      </button>
-    </div>
-
-    <div class="items-grid" *ngIf="subfolders.length > 0">
-      <div class="node-card" *ngFor="let sub of subfolders" (click)="navigateToSubfolder(sub.id!)">
-        <lucide-icon [img]="Folder" [size]="24" class="node-icon"></lucide-icon>
-        <span class="node-name">{{ sub.name }}</span>
-      </div>
-    </div>
-
-    <div class="empty-state" *ngIf="subfolders.length === 0">
-      <p>Aucun sous-dossier.</p>
-    </div>
-  </section>
-
-  <!-- Pages -->
-  <section class="detail-section">
-    <div class="section-header">
-      <h2>Pages</h2>
-      <button class="btn-add" (click)="navigateToCreatePage()">
-        <lucide-icon [img]="Plus" [size]="14"></lucide-icon>
-        Nouvelle page
-      </button>
-    </div>
-
-    <div class="items-grid" *ngIf="pages.length > 0">
-      <div class="node-card" *ngFor="let page of pages" (click)="navigateToPage(page.id!)">
-        <lucide-icon [img]="FileText" [size]="24" class="node-icon"></lucide-icon>
-        <span class="node-name">{{ page.title }}</span>
-      </div>
-    </div>
-
-    <div class="empty-state" *ngIf="pages.length === 0">
-      <p>Aucune page dans ce dossier.</p>
-    </div>
-  </section>
-
-</div>
+}
diff --git a/web/src/app/lore/folder-view/folder-view.component.ts b/web/src/app/lore/folder-view/folder-view.component.ts
index efe583f..7c2aaf3 100644
--- a/web/src/app/lore/folder-view/folder-view.component.ts
+++ b/web/src/app/lore/folder-view/folder-view.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { CommonModule } from '@angular/common';
+
 import { ActivatedRoute, Router } from '@angular/router';
 import { forkJoin } from 'rxjs';
 import { LucideAngularModule, LucideIconData, Folder, FileText, Pencil, Trash2, Plus, ChevronRight } from 'lucide-angular';
@@ -24,7 +24,7 @@ import { ConfirmDialogService } from '../../shared/confirm-dialog/confirm-dialog
  */
 @Component({
     selector: 'app-folder-view',
-    imports: [CommonModule, LucideAngularModule],
+    imports: [LucideAngularModule],
     templateUrl: './folder-view.component.html',
     styleUrls: ['./folder-view.component.scss']
 })
diff --git a/web/src/app/lore/lore-create/lore-create.component.ts b/web/src/app/lore/lore-create/lore-create.component.ts
index 1a67b83..5aa28c2 100644
--- a/web/src/app/lore/lore-create/lore-create.component.ts
+++ b/web/src/app/lore/lore-create/lore-create.component.ts
@@ -1,11 +1,11 @@
 import { Component, EventEmitter, Output } from '@angular/core';
-import { CommonModule } from '@angular/common';
+
 import { ReactiveFormsModule, FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { LucideAngularModule, BookCopy, X } from 'lucide-angular';
 
 @Component({
     selector: 'app-lore-create',
-    imports: [CommonModule, ReactiveFormsModule, LucideAngularModule],
+    imports: [ReactiveFormsModule, LucideAngularModule],
     templateUrl: './lore-create.component.html',
     styleUrls: ['./lore-create.component.scss']
 })
diff --git a/web/src/app/lore/lore-detail/lore-detail.component.html b/web/src/app/lore/lore-detail/lore-detail.component.html
index 209c7f5..c6d5a2e 100644
--- a/web/src/app/lore/lore-detail/lore-detail.component.html
+++ b/web/src/app/lore/lore-detail/lore-detail.component.html
@@ -1,70 +1,78 @@
-<div class="lore-detail" *ngIf="lore">
-
-  <!-- ============ Header : mode lecture ============ -->
-  <div class="detail-header" *ngIf="!editing">
-    <div class="header-texts">
-      <h1>{{ lore.name }}</h1>
-      <p class="description">{{ lore.description }}</p>
-    </div>
-    <div class="header-actions">
-      <button type="button" class="btn-secondary" (click)="startEdit()" title="Modifier le Lore">
-        <lucide-icon [img]="Pencil" [size]="14"></lucide-icon>
-        Modifier
-      </button>
-      <button type="button" class="btn-danger" (click)="deleteLore()" title="Supprimer le Lore">
-        <lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
-        Supprimer
-      </button>
-    </div>
-  </div>
-
-  <!-- ============ Header : mode édition inline ============ -->
-  <div class="detail-header edit-mode" *ngIf="editing">
-    <div class="field">
-      <label for="lore-detail-edit-name">Nom</label>
-      <input id="lore-detail-edit-name" type="text" [(ngModel)]="editName" name="editName" required />
-    </div>
-    <div class="field">
-      <label for="lore-detail-edit-description">Description</label>
-      <textarea id="lore-detail-edit-description" [(ngModel)]="editDescription" name="editDescription" rows="3"></textarea>
-    </div>
-    <div class="header-actions">
-      <button type="button" class="btn-primary" (click)="saveEdit()" [disabled]="!editName.trim()">
-        Sauvegarder
-      </button>
-      <button type="button" class="btn-secondary" (click)="cancelEdit()">
-        Annuler
-      </button>
-    </div>
-  </div>
-
-  <!-- ============ Grille des dossiers racine ============ -->
-  <section class="detail-section nodes-section" *ngIf="!editing">
-    <div class="section-header">
-      <h2>Dossiers</h2>
-      <button class="btn-add" (click)="navigateToCreateNode()">
-        <lucide-icon [img]="Plus" [size]="14"></lucide-icon>
-        Nouveau dossier
-      </button>
-    </div>
-
-    <!-- rootNodes : uniquement les dossiers racine (pas les sous-dossiers,
-         qui sont visibles dans l'arbre de la sidebar). -->
-    <div class="nodes-grid" *ngIf="rootNodes.length > 0">
-      <div class="node-card" *ngFor="let node of rootNodes" (click)="navigateToFolder(node.id!)">
-        <lucide-icon [img]="Folder" [size]="24" class="node-icon"></lucide-icon>
-        <span class="node-name">{{ node.name }}</span>
+@if (lore) {
+  <div class="lore-detail">
+    <!-- ============ Header : mode lecture ============ -->
+    @if (!editing) {
+      <div class="detail-header">
+        <div class="header-texts">
+          <h1>{{ lore.name }}</h1>
+          <p class="description">{{ lore.description }}</p>
+        </div>
+        <div class="header-actions">
+          <button type="button" class="btn-secondary" (click)="startEdit()" title="Modifier le Lore">
+            <lucide-icon [img]="Pencil" [size]="14"></lucide-icon>
+            Modifier
+          </button>
+          <button type="button" class="btn-danger" (click)="deleteLore()" title="Supprimer le Lore">
+            <lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
+            Supprimer
+          </button>
+        </div>
       </div>
-    </div>
-
-    <div class="empty-state" *ngIf="rootNodes.length === 0">
-      <lucide-icon [img]="Folder" [size]="40" class="empty-icon"></lucide-icon>
-      <p>Aucun dossier pour le moment.</p>
-      <button class="btn-add-first" (click)="navigateToCreateNode()">
-        <lucide-icon [img]="Plus" [size]="14"></lucide-icon>
-        Créer votre premier dossier
-      </button>
-    </div>
-  </section>
-
-</div>
+    }
+    <!-- ============ Header : mode édition inline ============ -->
+    @if (editing) {
+      <div class="detail-header edit-mode">
+        <div class="field">
+          <label for="lore-detail-edit-name">Nom</label>
+          <input id="lore-detail-edit-name" type="text" [(ngModel)]="editName" name="editName" required />
+        </div>
+        <div class="field">
+          <label for="lore-detail-edit-description">Description</label>
+          <textarea id="lore-detail-edit-description" [(ngModel)]="editDescription" name="editDescription" rows="3"></textarea>
+        </div>
+        <div class="header-actions">
+          <button type="button" class="btn-primary" (click)="saveEdit()" [disabled]="!editName.trim()">
+            Sauvegarder
+          </button>
+          <button type="button" class="btn-secondary" (click)="cancelEdit()">
+            Annuler
+          </button>
+        </div>
+      </div>
+    }
+    <!-- ============ Grille des dossiers racine ============ -->
+    @if (!editing) {
+      <section class="detail-section nodes-section">
+        <div class="section-header">
+          <h2>Dossiers</h2>
+          <button class="btn-add" (click)="navigateToCreateNode()">
+            <lucide-icon [img]="Plus" [size]="14"></lucide-icon>
+            Nouveau dossier
+          </button>
+        </div>
+        <!-- rootNodes : uniquement les dossiers racine (pas les sous-dossiers,
+        qui sont visibles dans l'arbre de la sidebar). -->
+        @if (rootNodes.length > 0) {
+          <div class="nodes-grid">
+            @for (node of rootNodes; track node) {
+              <div class="node-card" (click)="navigateToFolder(node.id!)">
+                <lucide-icon [img]="Folder" [size]="24" class="node-icon"></lucide-icon>
+                <span class="node-name">{{ node.name }}</span>
+              </div>
+            }
+          </div>
+        }
+        @if (rootNodes.length === 0) {
+          <div class="empty-state">
+            <lucide-icon [img]="Folder" [size]="40" class="empty-icon"></lucide-icon>
+            <p>Aucun dossier pour le moment.</p>
+            <button class="btn-add-first" (click)="navigateToCreateNode()">
+              <lucide-icon [img]="Plus" [size]="14"></lucide-icon>
+              Créer votre premier dossier
+            </button>
+          </div>
+        }
+      </section>
+    }
+  </div>
+}
diff --git a/web/src/app/lore/lore-detail/lore-detail.component.ts b/web/src/app/lore/lore-detail/lore-detail.component.ts
index 970cba3..88a9fcb 100644
--- a/web/src/app/lore/lore-detail/lore-detail.component.ts
+++ b/web/src/app/lore/lore-detail/lore-detail.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
-import { CommonModule } from '@angular/common';
+
 import { FormsModule } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { LucideAngularModule, Folder, Plus, Pencil, Trash2 } from 'lucide-angular';
@@ -14,7 +14,7 @@ import { ConfirmDialogService } from '../../shared/confirm-dialog/confirm-dialog
 
 @Component({
     selector: 'app-lore-detail',
-    imports: [CommonModule, FormsModule, LucideAngularModule],
+    imports: [FormsModule, LucideAngularModule],
     templateUrl: './lore-detail.component.html',
     styleUrls: ['./lore-detail.component.scss']
 })
diff --git a/web/src/app/lore/lore-node-create/lore-node-create.component.html b/web/src/app/lore/lore-node-create/lore-node-create.component.html
index 6fcc85e..f148d96 100644
--- a/web/src/app/lore/lore-node-create/lore-node-create.component.html
+++ b/web/src/app/lore/lore-node-create/lore-node-create.component.html
@@ -14,14 +14,16 @@
         formControlName="name"
         placeholder="Ex: Personnages, Créatures..."
         [class.invalid]="form.get('name')?.invalid && form.get('name')?.touched"
-      />
+        />
     </div>
 
     <div class="field">
       <label>Dossier parent <span class="optional">(optionnel)</span></label>
       <select formControlName="parentId">
         <option value="">— Racine du Lore —</option>
-        <option *ngFor="let parent of availableParents" [value]="parent.id">{{ parent.name }}</option>
+        @for (parent of availableParents; track parent) {
+          <option [value]="parent.id">{{ parent.name }}</option>
+        }
       </select>
       <p class="hint">Laissez vide pour créer un dossier à la racine du lore</p>
     </div>
@@ -29,14 +31,15 @@
     <div class="field">
       <label>Icône</label>
       <div class="icon-grid">
-        <button
-          type="button"
-          class="icon-btn"
-          *ngFor="let option of iconOptions"
-          [class.selected]="selectedIcon === option.key"
-          (click)="selectIcon(option.key)">
-          <lucide-icon [img]="option.icon" [size]="18"></lucide-icon>
-        </button>
+        @for (option of iconOptions; track option) {
+          <button
+            type="button"
+            class="icon-btn"
+            [class.selected]="selectedIcon === option.key"
+            (click)="selectIcon(option.key)">
+            <lucide-icon [img]="option.icon" [size]="18"></lucide-icon>
+          </button>
+        }
       </div>
     </div>
 
diff --git a/web/src/app/lore/lore-node-create/lore-node-create.component.ts b/web/src/app/lore/lore-node-create/lore-node-create.component.ts
index 3bd71e3..c34bfbd 100644
--- a/web/src/app/lore/lore-node-create/lore-node-create.component.ts
+++ b/web/src/app/lore/lore-node-create/lore-node-create.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
-import { CommonModule } from '@angular/common';
+
 import { ReactiveFormsModule, FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { LucideAngularModule, LucideIconData } from 'lucide-angular';
@@ -14,7 +14,7 @@ import { LORE_ICON_OPTIONS, IconOption, resolveIcon } from '../lore-icons';
 
 @Component({
     selector: 'app-lore-node-create',
-    imports: [CommonModule, ReactiveFormsModule, LucideAngularModule],
+    imports: [ReactiveFormsModule, LucideAngularModule],
     templateUrl: './lore-node-create.component.html',
     styleUrls: ['./lore-node-create.component.scss']
 })
diff --git a/web/src/app/lore/lore-node-edit/lore-node-edit.component.html b/web/src/app/lore/lore-node-edit/lore-node-edit.component.html
index bf80652..14978d9 100644
--- a/web/src/app/lore/lore-node-edit/lore-node-edit.component.html
+++ b/web/src/app/lore/lore-node-edit/lore-node-edit.component.html
@@ -1,54 +1,52 @@
-<div class="page" *ngIf="node">
-
-  <header class="page-header">
-    <div>
-      <h1>Éditer le dossier</h1>
-      <p class="subtitle">
-        {{ childFolderCount }} sous-dossier(s) · {{ pageCount }} page(s)
-      </p>
-    </div>
-    <div class="header-actions">
-      <button type="button" class="btn-secondary" (click)="cancel()">Annuler</button>
-      <button
-        type="submit"
-        class="btn-primary"
-        [disabled]="form.invalid"
-        (click)="save()">
-        Sauvegarder
-      </button>
-    </div>
-  </header>
-
-  <form [formGroup]="form" class="edit-form">
-
-    <div class="field">
-      <label>Nom du dossier *</label>
-      <input type="text" formControlName="name" />
-    </div>
-
-    <div class="field">
-      <label>Dossier parent <span class="optional">(optionnel)</span></label>
-      <select formControlName="parentId">
-        <option value="">— Racine du Lore —</option>
-        <option *ngFor="let parent of availableParents" [value]="parent.id">{{ parent.name }}</option>
-      </select>
-      <p class="hint">Vous ne pouvez pas choisir un sous-dossier du dossier courant (cycle interdit)</p>
-    </div>
-
-    <div class="field">
-      <label>Icône</label>
-      <div class="icon-grid">
+@if (node) {
+  <div class="page">
+    <header class="page-header">
+      <div>
+        <h1>Éditer le dossier</h1>
+        <p class="subtitle">
+          {{ childFolderCount }} sous-dossier(s) · {{ pageCount }} page(s)
+        </p>
+      </div>
+      <div class="header-actions">
+        <button type="button" class="btn-secondary" (click)="cancel()">Annuler</button>
         <button
-          type="button"
-          class="icon-btn"
-          *ngFor="let option of iconOptions"
-          [class.selected]="selectedIcon === option.key"
-          (click)="selectIcon(option.key)">
-          <lucide-icon [img]="option.icon" [size]="18"></lucide-icon>
+          type="submit"
+          class="btn-primary"
+          [disabled]="form.invalid"
+          (click)="save()">
+          Sauvegarder
         </button>
       </div>
-    </div>
-
-  </form>
-
-</div>
+    </header>
+    <form [formGroup]="form" class="edit-form">
+      <div class="field">
+        <label>Nom du dossier *</label>
+        <input type="text" formControlName="name" />
+      </div>
+      <div class="field">
+        <label>Dossier parent <span class="optional">(optionnel)</span></label>
+        <select formControlName="parentId">
+          <option value="">— Racine du Lore —</option>
+          @for (parent of availableParents; track parent) {
+            <option [value]="parent.id">{{ parent.name }}</option>
+          }
+        </select>
+        <p class="hint">Vous ne pouvez pas choisir un sous-dossier du dossier courant (cycle interdit)</p>
+      </div>
+      <div class="field">
+        <label>Icône</label>
+        <div class="icon-grid">
+          @for (option of iconOptions; track option) {
+            <button
+              type="button"
+              class="icon-btn"
+              [class.selected]="selectedIcon === option.key"
+              (click)="selectIcon(option.key)">
+              <lucide-icon [img]="option.icon" [size]="18"></lucide-icon>
+            </button>
+          }
+        </div>
+      </div>
+    </form>
+  </div>
+}
diff --git a/web/src/app/lore/lore-node-edit/lore-node-edit.component.ts b/web/src/app/lore/lore-node-edit/lore-node-edit.component.ts
index c4e41b6..6ccd9b0 100644
--- a/web/src/app/lore/lore-node-edit/lore-node-edit.component.ts
+++ b/web/src/app/lore/lore-node-edit/lore-node-edit.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
-import { CommonModule } from '@angular/common';
+
 import { ReactiveFormsModule, FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { forkJoin } from 'rxjs';
@@ -32,7 +32,7 @@ import { LORE_ICON_OPTIONS, IconOption } from '../lore-icons';
  */
 @Component({
     selector: 'app-lore-node-edit',
-    imports: [CommonModule, ReactiveFormsModule, LucideAngularModule],
+    imports: [ReactiveFormsModule, LucideAngularModule],
     templateUrl: './lore-node-edit.component.html',
     styleUrls: ['./lore-node-edit.component.scss']
 })
diff --git a/web/src/app/lore/lore.component.html b/web/src/app/lore/lore.component.html
index 9401efa..f9adef0 100644
--- a/web/src/app/lore/lore.component.html
+++ b/web/src/app/lore/lore.component.html
@@ -8,18 +8,20 @@
 
   <div class="lore-grid">
 
-    <div class="lore-card" *ngFor="let lore of lores" (click)="navigateToDetail(lore.id!)">
-      <div class="card-header">
-        <lucide-icon [img]="Folder" [size]="20" class="card-icon"></lucide-icon>
-        <span class="card-date">Il y a 2h</span>
+    @for (lore of lores; track lore) {
+      <div class="lore-card" (click)="navigateToDetail(lore.id!)">
+        <div class="card-header">
+          <lucide-icon [img]="Folder" [size]="20" class="card-icon"></lucide-icon>
+          <span class="card-date">Il y a 2h</span>
+        </div>
+        <h2>{{ lore.name }}</h2>
+        <p class="card-description">{{ lore.description }}</p>
+        <div class="card-stats">
+          <span>📄 {{ lore.pageCount || 0 }} pages</span>
+          <span>🌳 {{ lore.nodeCount || 0 }} dossiers</span>
+        </div>
       </div>
-      <h2>{{ lore.name }}</h2>
-      <p class="card-description">{{ lore.description }}</p>
-      <div class="card-stats">
-        <span>📄 {{ lore.pageCount || 0 }} pages</span>
-        <span>🌳 {{ lore.nodeCount || 0 }} dossiers</span>
-      </div>
-    </div>
+    }
 
     <div class="lore-card card-new" (click)="openCreateModal()">
       <div class="new-icon">
@@ -35,8 +37,9 @@
 
 </div>
 
-<app-lore-create
-  *ngIf="showCreateModal"
-  (close)="onModalClose()"
-  (created)="onLoreCreated($event)">
-</app-lore-create>
+@if (showCreateModal) {
+  <app-lore-create
+    (close)="onModalClose()"
+    (created)="onLoreCreated($event)">
+  </app-lore-create>
+}
diff --git a/web/src/app/lore/lore.component.ts b/web/src/app/lore/lore.component.ts
index 41efeee..ee580f6 100644
--- a/web/src/app/lore/lore.component.ts
+++ b/web/src/app/lore/lore.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { CommonModule } from '@angular/common';
+
 import { Router } from '@angular/router';
 import { LucideAngularModule, BookOpen, Folder, Plus } from 'lucide-angular';
 import { LoreService } from '../services/lore.service';
@@ -9,7 +9,7 @@ import { LoreCreateComponent } from './lore-create/lore-create.component';
 
 @Component({
     selector: 'app-lore',
-    imports: [CommonModule, LucideAngularModule, LoreCreateComponent],
+    imports: [LucideAngularModule, LoreCreateComponent],
     templateUrl: './lore.component.html',
     styleUrls: ['./lore.component.scss']
 })
diff --git a/web/src/app/lore/page-create/page-create.component.html b/web/src/app/lore/page-create/page-create.component.html
index a839b5f..4f1e6be 100644
--- a/web/src/app/lore/page-create/page-create.component.html
+++ b/web/src/app/lore/page-create/page-create.component.html
@@ -17,64 +17,66 @@
     <div class="field">
       <label>Template *</label>
 
-      <div class="templates-grid" *ngIf="templates.length; else emptyTemplates">
-        <button
-          type="button"
-          class="template-card"
-          *ngFor="let t of templates"
-          [class.selected]="selectedTemplateId === t.id"
-          (click)="selectTemplate(t)">
-          <div class="template-card-head">
-            <lucide-icon [img]="FileText" [size]="16"></lucide-icon>
-            <span class="template-name">{{ t.name }}</span>
-          </div>
-          <p class="template-description">{{ t.description || '—' }}</p>
-        </button>
-
-        <!-- Carte "+" : sauvegarde le brouillon et part creer un nouveau template ;
-             template-create renverra ici via le mecanisme returnTo. -->
-        <a
-          class="template-card template-card-create"
-          [routerLink]="['/lore', loreId, 'templates', 'create']"
-          [queryParams]="{ returnTo: 'page-create' }"
-          (click)="saveDraft()"
-          title="Créer un nouveau template pour ce Lore">
-          <div class="template-card-head">
-            <lucide-icon [img]="Plus" [size]="16"></lucide-icon>
-            <span class="template-name">Créer un template</span>
-          </div>
-          <p class="template-description">
-            Vous reviendrez ici automatiquement, votre saisie sera conservée.
-          </p>
-        </a>
-      </div>
-
-      <ng-template #emptyTemplates>
+      @if (templates.length) {
+        <div class="templates-grid">
+          @for (t of templates; track t) {
+            <button
+              type="button"
+              class="template-card"
+              [class.selected]="selectedTemplateId === t.id"
+              (click)="selectTemplate(t)">
+              <div class="template-card-head">
+                <lucide-icon [img]="FileText" [size]="16"></lucide-icon>
+                <span class="template-name">{{ t.name }}</span>
+              </div>
+              <p class="template-description">{{ t.description || '—' }}</p>
+            </button>
+          }
+          <!-- Carte "+" : sauvegarde le brouillon et part creer un nouveau template ;
+          template-create renverra ici via le mecanisme returnTo. -->
+          <a
+            class="template-card template-card-create"
+            [routerLink]="['/lore', loreId, 'templates', 'create']"
+            [queryParams]="{ returnTo: 'page-create' }"
+            (click)="saveDraft()"
+            title="Créer un nouveau template pour ce Lore">
+            <div class="template-card-head">
+              <lucide-icon [img]="Plus" [size]="16"></lucide-icon>
+              <span class="template-name">Créer un template</span>
+            </div>
+            <p class="template-description">
+              Vous reviendrez ici automatiquement, votre saisie sera conservée.
+            </p>
+          </a>
+        </div>
+      } @else {
         <p class="empty-hint">
           Aucun template défini pour ce Lore.
           <a [routerLink]="['/lore', loreId, 'templates', 'create']" [queryParams]="{ returnTo: 'page-create' }" (click)="saveDraft()">Créer un template</a> d'abord.
         </p>
-      </ng-template>
+      }
+
     </div>
 
     <!-- Dossier de destination -->
     <div class="field">
       <label for="page-node">Dossier de destination *</label>
 
-      <ng-container *ngIf="nodes.length; else emptyFolders">
+      @if (nodes.length) {
         <select id="page-node" formControlName="nodeId">
           <option value="" disabled>Sélectionnez un dossier</option>
-          <option *ngFor="let node of nodes" [value]="node.id">{{ node.name }}</option>
+          @for (node of nodes; track node) {
+            <option [value]="node.id">{{ node.name }}</option>
+          }
         </select>
         <p class="hint">La page sera créée dans ce dossier</p>
-      </ng-container>
-
-      <ng-template #emptyFolders>
+      } @else {
         <p class="empty-hint">
           Aucun dossier dans ce Lore.
           <a [routerLink]="['/lore', loreId, 'nodes', 'create']" [queryParams]="{ returnTo: 'page-create' }" (click)="saveDraft()">Créer un dossier</a> d'abord.
         </p>
-      </ng-template>
+      }
+
     </div>
 
     <!-- Aide contextuelle -->
@@ -84,13 +86,15 @@
     </div>
 
     <!-- Erreur wizard (parsing &lt;values&gt; ou échec HTTP) -->
-    <div class="wizard-error" *ngIf="wizardError" role="alert">{{ wizardError }}</div>
+    @if (wizardError) {
+      <div class="wizard-error" role="alert">{{ wizardError }}</div>
+    }
 
     <!-- Actions -->
     <div class="actions-row">
       <button type="button" class="btn-secondary" (click)="cancel()">Annuler</button>
       <button type="button" class="btn-ai" (click)="openWizard()" [disabled]="!canSubmit"
-              title="Ouvrir l'assistant IA pour pré-remplir les champs">
+        title="Ouvrir l'assistant IA pour pré-remplir les champs">
         <lucide-icon [img]="Sparkles" [size]="14"></lucide-icon>
         Créer avec l'IA
       </button>
diff --git a/web/src/app/lore/page-create/page-create.component.ts b/web/src/app/lore/page-create/page-create.component.ts
index 9e1299f..af1eb34 100644
--- a/web/src/app/lore/page-create/page-create.component.ts
+++ b/web/src/app/lore/page-create/page-create.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
-import { CommonModule } from '@angular/common';
+
 import { ReactiveFormsModule, FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, Router, RouterModule } from '@angular/router';
 import { LucideAngularModule, FileText, Sparkles, Plus } from 'lucide-angular';
@@ -26,7 +26,7 @@ import { AiChatDrawerComponent, ChatPrimaryAction } from '../../shared/ai-chat-d
  */
 @Component({
     selector: 'app-page-create',
-    imports: [CommonModule, ReactiveFormsModule, RouterModule, LucideAngularModule, AiChatDrawerComponent],
+    imports: [ReactiveFormsModule, RouterModule, LucideAngularModule, AiChatDrawerComponent],
     templateUrl: './page-create.component.html',
     styleUrls: ['./page-create.component.scss']
 })
diff --git a/web/src/app/lore/page-edit/page-edit.component.html b/web/src/app/lore/page-edit/page-edit.component.html
index ee34b49..9889078 100644
--- a/web/src/app/lore/page-edit/page-edit.component.html
+++ b/web/src/app/lore/page-edit/page-edit.component.html
@@ -1,116 +1,114 @@
-<div class="page" *ngIf="page">
-
-  <app-breadcrumb [items]="breadcrumbItems"></app-breadcrumb>
-
-  <header class="page-header">
-    <div>
-      <h1>{{ page.title }}</h1>
-      <p class="subtitle">{{ template?.name || 'Page' }}</p>
-    </div>
-    <div class="header-actions">
-      <button type="button" class="btn-ai"
-              (click)="toggleChat()"
-              [disabled]="aiLoading"
-              [class.active]="chatOpen"
-              title="Ouvrir l'Assistant IA (chat ou remplissage automatique)">
-        <lucide-icon [img]="Sparkles" [size]="14"></lucide-icon>
-        {{ aiLoading ? 'Génération…' : 'Assistant IA' }}
-      </button>
-      <button type="button" class="btn-secondary" [routerLink]="['/lore', loreId, 'pages', pageId]">Annuler</button>
-      <button type="button" class="btn-danger" (click)="delete()">Supprimer</button>
-      <button type="button" class="btn-primary" (click)="save()" [disabled]="!title.trim()">
-        Sauvegarder
-      </button>
-    </div>
-  </header>
-
-  <div *ngIf="aiError" class="ai-error-banner" role="alert">
-    <span>{{ aiError }}</span>
-    <button type="button" class="ai-error-dismiss" (click)="aiError = null" aria-label="Fermer">×</button>
+@if (page) {
+  <div class="page">
+    <app-breadcrumb [items]="breadcrumbItems"></app-breadcrumb>
+    <header class="page-header">
+      <div>
+        <h1>{{ page.title }}</h1>
+        <p class="subtitle">{{ template?.name || 'Page' }}</p>
+      </div>
+      <div class="header-actions">
+        <button type="button" class="btn-ai"
+          (click)="toggleChat()"
+          [disabled]="aiLoading"
+          [class.active]="chatOpen"
+          title="Ouvrir l'Assistant IA (chat ou remplissage automatique)">
+          <lucide-icon [img]="Sparkles" [size]="14"></lucide-icon>
+          {{ aiLoading ? 'Génération…' : 'Assistant IA' }}
+        </button>
+        <button type="button" class="btn-secondary" [routerLink]="['/lore', loreId, 'pages', pageId]">Annuler</button>
+        <button type="button" class="btn-danger" (click)="delete()">Supprimer</button>
+        <button type="button" class="btn-primary" (click)="save()" [disabled]="!title.trim()">
+          Sauvegarder
+        </button>
+      </div>
+    </header>
+    @if (aiError) {
+      <div class="ai-error-banner" role="alert">
+        <span>{{ aiError }}</span>
+        <button type="button" class="ai-error-dismiss" (click)="aiError = null" aria-label="Fermer">×</button>
+      </div>
+    }
+    <form class="edit-form">
+      <!-- Identité ----------------------------------------------------- -->
+      <div class="field">
+        <label>Nom</label>
+        <input type="text" [(ngModel)]="title" name="title" required />
+      </div>
+      <div class="field">
+        <label>Dossier</label>
+        <select [(ngModel)]="nodeId" name="nodeId">
+          @for (node of nodes; track node) {
+            <option [value]="node.id">{{ node.name }}</option>
+          }
+        </select>
+        <p class="hint">Déplacez cette page dans un autre dossier</p>
+      </div>
+      <!-- Champs dynamiques du template -------------------------------- -->
+      @if (template?.fields?.length) {
+        <h2 class="section-title">Champs</h2>
+        @for (field of template!.fields; track field) {
+          <!-- Champ TEXT : textarea editable -->
+          @if (field.type === 'TEXT') {
+            <div class="field">
+              <label>{{ field.name }}</label>
+              <textarea
+                [(ngModel)]="values[field.name]"
+                [name]="'value_' + field.name"
+                rows="4"
+                [placeholder]="'Valeur pour ' + field.name + '...'">
+              </textarea>
+            </div>
+          }
+          <!-- Champ IMAGE : galerie editable. -->
+          @if (field.type === 'IMAGE') {
+            <div class="field">
+              <label>{{ field.name }}</label>
+              <app-image-gallery
+                [imageIds]="imageValues[field.name] || []"
+                [editable]="true"
+                [layout]="field.layout ?? 'GALLERY'"
+                (imageIdsChange)="imageValues[field.name] = $event">
+              </app-image-gallery>
+            </div>
+          }
+        }
+      }
+      <!-- Tags --------------------------------------------------------- -->
+      <h2 class="section-title">Tags</h2>
+      <div class="field">
+        <app-chips-input
+          [value]="tags"
+          (valueChange)="tags = $event"
+          placeholder="Ajouter un tag (Entrée pour valider)...">
+        </app-chips-input>
+        <p class="hint">Mots-clés libres pour classer et retrouver cette page</p>
+      </div>
+      <!-- Liens vers d'autres pages ----------------------------------- -->
+      <h2 class="section-title">Pages liées</h2>
+      <div class="field">
+        <app-lore-link-picker
+          [value]="relatedPageIds"
+          [availablePages]="allPages"
+          [excludePageId]="pageId"
+          [loreId]="loreId"
+          (valueChange)="relatedPageIds = $event">
+        </app-lore-link-picker>
+        <p class="hint">Cliquez sur un lien pour ouvrir la page associée</p>
+      </div>
+      <!-- Notes privées ----------------------------------------------- -->
+      <h2 class="section-title">Notes privées</h2>
+      <div class="field">
+        <textarea
+          [(ngModel)]="notes"
+          name="notes"
+          rows="4"
+          placeholder="Notes personnelles (non exportées vers FoundryVTT)">
+        </textarea>
+        <p class="hint">Visibles uniquement par vous. Utiles pour préparer vos sessions.</p>
+      </div>
+    </form>
   </div>
-
-  <form class="edit-form">
-
-    <!-- Identité ----------------------------------------------------- -->
-    <div class="field">
-      <label>Nom</label>
-      <input type="text" [(ngModel)]="title" name="title" required />
-    </div>
-
-    <div class="field">
-      <label>Dossier</label>
-      <select [(ngModel)]="nodeId" name="nodeId">
-        <option *ngFor="let node of nodes" [value]="node.id">{{ node.name }}</option>
-      </select>
-      <p class="hint">Déplacez cette page dans un autre dossier</p>
-    </div>
-
-    <!-- Champs dynamiques du template -------------------------------- -->
-    <ng-container *ngIf="template?.fields?.length">
-      <h2 class="section-title">Champs</h2>
-      <ng-container *ngFor="let field of template!.fields">
-        <!-- Champ TEXT : textarea editable -->
-        <div class="field" *ngIf="field.type === 'TEXT'">
-          <label>{{ field.name }}</label>
-          <textarea
-            [(ngModel)]="values[field.name]"
-            [name]="'value_' + field.name"
-            rows="4"
-            [placeholder]="'Valeur pour ' + field.name + '...'">
-          </textarea>
-        </div>
-        <!-- Champ IMAGE : galerie editable. -->
-        <div class="field" *ngIf="field.type === 'IMAGE'">
-          <label>{{ field.name }}</label>
-          <app-image-gallery
-            [imageIds]="imageValues[field.name] || []"
-            [editable]="true"
-            [layout]="field.layout ?? 'GALLERY'"
-            (imageIdsChange)="imageValues[field.name] = $event">
-          </app-image-gallery>
-        </div>
-      </ng-container>
-    </ng-container>
-
-    <!-- Tags --------------------------------------------------------- -->
-    <h2 class="section-title">Tags</h2>
-    <div class="field">
-      <app-chips-input
-        [value]="tags"
-        (valueChange)="tags = $event"
-        placeholder="Ajouter un tag (Entrée pour valider)...">
-      </app-chips-input>
-      <p class="hint">Mots-clés libres pour classer et retrouver cette page</p>
-    </div>
-
-    <!-- Liens vers d'autres pages ----------------------------------- -->
-    <h2 class="section-title">Pages liées</h2>
-    <div class="field">
-      <app-lore-link-picker
-        [value]="relatedPageIds"
-        [availablePages]="allPages"
-        [excludePageId]="pageId"
-        [loreId]="loreId"
-        (valueChange)="relatedPageIds = $event">
-      </app-lore-link-picker>
-      <p class="hint">Cliquez sur un lien pour ouvrir la page associée</p>
-    </div>
-
-    <!-- Notes privées ----------------------------------------------- -->
-    <h2 class="section-title">Notes privées</h2>
-    <div class="field">
-      <textarea
-        [(ngModel)]="notes"
-        name="notes"
-        rows="4"
-        placeholder="Notes personnelles (non exportées vers FoundryVTT)">
-      </textarea>
-      <p class="hint">Visibles uniquement par vous. Utiles pour préparer vos sessions.</p>
-    </div>
-
-  </form>
-
-</div>
+}
 
 <!-- Drawer chat IA (hors du .page pour pouvoir couvrir le viewport côté droit) -->
 <app-ai-chat-drawer
diff --git a/web/src/app/lore/page-edit/page-edit.component.ts b/web/src/app/lore/page-edit/page-edit.component.ts
index 29b3904..1b0d7ae 100644
--- a/web/src/app/lore/page-edit/page-edit.component.ts
+++ b/web/src/app/lore/page-edit/page-edit.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
-import { CommonModule } from '@angular/common';
+
 import { FormsModule } from '@angular/forms';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { forkJoin } from 'rxjs';
@@ -36,7 +36,7 @@ import { ConfirmDialogService } from '../../shared/confirm-dialog/confirm-dialog
  */
 @Component({
     selector: 'app-page-edit',
-    imports: [CommonModule, FormsModule, RouterLink, LucideAngularModule, ChipsInputComponent, LoreLinkPickerComponent, BreadcrumbComponent, AiChatDrawerComponent, ImageGalleryComponent],
+    imports: [FormsModule, RouterLink, LucideAngularModule, ChipsInputComponent, LoreLinkPickerComponent, BreadcrumbComponent, AiChatDrawerComponent, ImageGalleryComponent],
     templateUrl: './page-edit.component.html',
     styleUrls: ['./page-edit.component.scss']
 })
diff --git a/web/src/app/lore/page-view/page-view.component.html b/web/src/app/lore/page-view/page-view.component.html
index 55df30a..68b1198 100644
--- a/web/src/app/lore/page-view/page-view.component.html
+++ b/web/src/app/lore/page-view/page-view.component.html
@@ -1,72 +1,81 @@
-<div class="view-page" *ngIf="page">
-
-  <app-breadcrumb [items]="breadcrumbItems"></app-breadcrumb>
-
-  <header class="view-header">
-    <div>
-      <h1>{{ page.title }}</h1>
-      <p class="view-subtitle">{{ template?.name || 'Page' }}</p>
-    </div>
-    <div class="view-actions">
-      <button type="button" class="btn-primary" (click)="editMode()">
-        <lucide-icon [img]="Pencil" [size]="14"></lucide-icon>
-        Modifier
-      </button>
-      <button type="button" class="btn-danger" (click)="deletePage()" title="Supprimer la page">
-        <lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
-        Supprimer
-      </button>
-    </div>
-  </header>
-
-  <!-- Champs dynamiques du template (seuls les champs TEXT sont rendus ici ;
-       le support complet des champs IMAGE arrive a l'etape 5). -->
-  <ng-container *ngIf="template?.fields?.length">
-    <ng-container *ngFor="let field of template!.fields">
-      <section class="view-section" *ngIf="field.type === 'TEXT'">
-        <h2 class="view-section-title">{{ field.name }}</h2>
-        <p class="view-section-body" *ngIf="valueOf(field.name); else emptyField">{{ valueOf(field.name) }}</p>
-        <ng-template #emptyField>
-          <p class="view-section-empty">Non renseigné</p>
-        </ng-template>
+@if (page) {
+  <div class="view-page">
+    <app-breadcrumb [items]="breadcrumbItems"></app-breadcrumb>
+    <header class="view-header">
+      <div>
+        <h1>{{ page.title }}</h1>
+        <p class="view-subtitle">{{ template?.name || 'Page' }}</p>
+      </div>
+      <div class="view-actions">
+        <button type="button" class="btn-primary" (click)="editMode()">
+          <lucide-icon [img]="Pencil" [size]="14"></lucide-icon>
+          Modifier
+        </button>
+        <button type="button" class="btn-danger" (click)="deletePage()" title="Supprimer la page">
+          <lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
+          Supprimer
+        </button>
+      </div>
+    </header>
+    <!-- Champs dynamiques du template (seuls les champs TEXT sont rendus ici ;
+    le support complet des champs IMAGE arrive a l'etape 5). -->
+    @if (template?.fields?.length) {
+      @for (field of template!.fields; track field) {
+        @if (field.type === 'TEXT') {
+          <section class="view-section">
+            <h2 class="view-section-title">{{ field.name }}</h2>
+            @if (valueOf(field.name)) {
+              <p class="view-section-body">{{ valueOf(field.name) }}</p>
+            } @else {
+              <p class="view-section-empty">Non renseigné</p>
+            }
+          </section>
+        }
+        @if (field.type === 'IMAGE') {
+          <section class="view-section">
+            <h2 class="view-section-title">{{ field.name }}</h2>
+            <app-image-gallery
+              [imageIds]="imageIdsOf(field.name)"
+              [layout]="field.layout ?? 'GALLERY'">
+            </app-image-gallery>
+          </section>
+        }
+      }
+    }
+    <!-- Tags -->
+    @if ((page.tags?.length ?? 0) > 0) {
+      <section class="view-section">
+        <h2 class="view-section-title">Tags</h2>
+        <div class="view-chips">
+          @for (tag of page.tags; track tag) {
+            <span class="view-chip view-chip--tag">{{ tag }}</span>
+          }
+        </div>
       </section>
-      <section class="view-section" *ngIf="field.type === 'IMAGE'">
-        <h2 class="view-section-title">{{ field.name }}</h2>
-        <app-image-gallery
-          [imageIds]="imageIdsOf(field.name)"
-          [layout]="field.layout ?? 'GALLERY'">
-        </app-image-gallery>
+    }
+    <!-- Pages liées -->
+    @if ((page.relatedPageIds?.length ?? 0) > 0) {
+      <section class="view-section">
+        <h2 class="view-section-title">Pages liées</h2>
+        <div class="view-chips">
+          @for (relId of page.relatedPageIds; track relId) {
+            <a class="view-chip"
+              [routerLink]="['/lore', loreId, 'pages', relId]">
+              {{ titleOfRelated(relId) }}
+            </a>
+          }
+        </div>
       </section>
-    </ng-container>
-  </ng-container>
-
-  <!-- Tags -->
-  <section class="view-section" *ngIf="(page.tags?.length ?? 0) > 0">
-    <h2 class="view-section-title">Tags</h2>
-    <div class="view-chips">
-      <span class="view-chip view-chip--tag" *ngFor="let tag of page.tags">{{ tag }}</span>
-    </div>
-  </section>
-
-  <!-- Pages liées -->
-  <section class="view-section" *ngIf="(page.relatedPageIds?.length ?? 0) > 0">
-    <h2 class="view-section-title">Pages liées</h2>
-    <div class="view-chips">
-      <a class="view-chip"
-         *ngFor="let relId of page.relatedPageIds"
-         [routerLink]="['/lore', loreId, 'pages', relId]">
-        {{ titleOfRelated(relId) }}
-      </a>
-    </div>
-  </section>
-
-  <!-- Notes privées MJ -->
-  <section class="view-section view-section--private" *ngIf="page.notes?.trim()">
-    <h2 class="view-section-title">
-      <span class="view-section-icon">🔒</span>
-      Notes privées
-    </h2>
-    <p class="view-section-body">{{ page.notes }}</p>
-  </section>
-
-</div>
+    }
+    <!-- Notes privées MJ -->
+    @if (page.notes?.trim()) {
+      <section class="view-section view-section--private">
+        <h2 class="view-section-title">
+          <span class="view-section-icon">🔒</span>
+          Notes privées
+        </h2>
+        <p class="view-section-body">{{ page.notes }}</p>
+      </section>
+    }
+  </div>
+}
diff --git a/web/src/app/lore/page-view/page-view.component.ts b/web/src/app/lore/page-view/page-view.component.ts
index a87a6e6..35b5c42 100644
--- a/web/src/app/lore/page-view/page-view.component.ts
+++ b/web/src/app/lore/page-view/page-view.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
-import { CommonModule } from '@angular/common';
+
 import { ActivatedRoute, Router, RouterModule } from '@angular/router';
 import { forkJoin } from 'rxjs';
 import { LucideAngularModule, Pencil, Trash2 } from 'lucide-angular';
@@ -28,7 +28,7 @@ import { ConfirmDialogService } from '../../shared/confirm-dialog/confirm-dialog
  */
 @Component({
     selector: 'app-page-view',
-    imports: [CommonModule, RouterModule, LucideAngularModule, BreadcrumbComponent, ImageGalleryComponent],
+    imports: [RouterModule, LucideAngularModule, BreadcrumbComponent, ImageGalleryComponent],
     templateUrl: './page-view.component.html',
     styleUrls: ['./page-view.component.scss']
 })
diff --git a/web/src/app/lore/template-create/template-create.component.html b/web/src/app/lore/template-create/template-create.component.html
index 51190fd..8a899aa 100644
--- a/web/src/app/lore/template-create/template-create.component.html
+++ b/web/src/app/lore/template-create/template-create.component.html
@@ -23,22 +23,23 @@
       <div class="field">
         <label for="template-default-node">Dossier par défaut *</label>
 
-        <ng-container *ngIf="nodes.length; else emptyFolders">
+        @if (nodes.length) {
           <select id="template-default-node" formControlName="defaultNodeId">
             <option value="" disabled>Sélectionnez un dossier</option>
-            <option *ngFor="let node of nodes" [value]="node.id">{{ node.name }}</option>
+            @for (node of nodes; track node) {
+              <option [value]="node.id">{{ node.name }}</option>
+            }
           </select>
           <p class="hint">Les pages créées avec ce template seront placées dans ce dossier</p>
-        </ng-container>
-
-        <ng-template #emptyFolders>
+        } @else {
           <p class="empty-hint">
             Aucun dossier dans ce Lore.
             <a [routerLink]="['/lore', loreId, 'nodes', 'create']"
-               [queryParams]="{ returnTo: nodeCreateReturnTo }"
-               (click)="saveDraft()">Créer un dossier</a> d'abord.
+              [queryParams]="{ returnTo: nodeCreateReturnTo }"
+            (click)="saveDraft()">Créer un dossier</a> d'abord.
           </p>
-        </ng-template>
+        }
+
       </div>
 
     </div>
@@ -49,47 +50,51 @@
       <label class="section-label">Champs du template *</label>
 
       <ul class="fields-list">
-        <li class="field-row" *ngFor="let f of fields; let i = index; let first = first; let last = last">
-          <div class="reorder-stack">
-            <button type="button" class="btn-icon btn-reorder"
-                    (click)="moveField(i, -1)"
-                    [disabled]="first"
-                    aria-label="Monter d'un cran" title="Monter">
-              <lucide-icon [img]="ChevronUp" [size]="12"></lucide-icon>
+        @for (f of fields; track f; let i = $index; let first = $first; let last = $last) {
+          <li class="field-row">
+            <div class="reorder-stack">
+              <button type="button" class="btn-icon btn-reorder"
+                (click)="moveField(i, -1)"
+                [disabled]="first"
+                aria-label="Monter d'un cran" title="Monter">
+                <lucide-icon [img]="ChevronUp" [size]="12"></lucide-icon>
+              </button>
+              <button type="button" class="btn-icon btn-reorder"
+                (click)="moveField(i, 1)"
+                [disabled]="last"
+                aria-label="Descendre d'un cran" title="Descendre">
+                <lucide-icon [img]="ChevronDown" [size]="12"></lucide-icon>
+              </button>
+            </div>
+            <span class="field-chip" [class.field-chip-image]="f.type === 'IMAGE'">
+              <lucide-icon [img]="f.type === 'IMAGE' ? ImageIcon : Type" [size]="12"></lucide-icon>
+              {{ f.name }}
+            </span>
+            <button type="button"
+              class="btn-icon btn-type-toggle"
+              (click)="toggleFieldType(i)"
+              [attr.aria-label]="'Basculer vers ' + (f.type === 'TEXT' ? 'Image' : 'Texte')"
+              [title]="f.type === 'TEXT' ? 'Transformer en champ Image' : 'Transformer en champ Texte'">
+              {{ f.type === 'TEXT' ? 'Texte' : 'Image' }}
             </button>
-            <button type="button" class="btn-icon btn-reorder"
-                    (click)="moveField(i, 1)"
-                    [disabled]="last"
-                    aria-label="Descendre d'un cran" title="Descendre">
-              <lucide-icon [img]="ChevronDown" [size]="12"></lucide-icon>
+            @if (f.type === 'IMAGE') {
+              <select
+                class="layout-select"
+                [ngModel]="f.layout ?? 'GALLERY'"
+                [ngModelOptions]="{ standalone: true }"
+                (ngModelChange)="setFieldLayout(i, $event)"
+                title="Mise en page des images">
+                <option value="GALLERY">Grille</option>
+                <option value="HERO">Heros</option>
+                <option value="MASONRY">Mosaique</option>
+                <option value="CAROUSEL">Carrousel</option>
+              </select>
+            }
+            <button type="button" class="btn-icon" (click)="removeField(i)" aria-label="Supprimer">
+              <lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
             </button>
-          </div>
-          <span class="field-chip" [class.field-chip-image]="f.type === 'IMAGE'">
-            <lucide-icon [img]="f.type === 'IMAGE' ? ImageIcon : Type" [size]="12"></lucide-icon>
-            {{ f.name }}
-          </span>
-          <button type="button"
-                  class="btn-icon btn-type-toggle"
-                  (click)="toggleFieldType(i)"
-                  [attr.aria-label]="'Basculer vers ' + (f.type === 'TEXT' ? 'Image' : 'Texte')"
-                  [title]="f.type === 'TEXT' ? 'Transformer en champ Image' : 'Transformer en champ Texte'">
-            {{ f.type === 'TEXT' ? 'Texte' : 'Image' }}
-          </button>
-          <select *ngIf="f.type === 'IMAGE'"
-                  class="layout-select"
-                  [ngModel]="f.layout ?? 'GALLERY'"
-                  [ngModelOptions]="{ standalone: true }"
-                  (ngModelChange)="setFieldLayout(i, $event)"
-                  title="Mise en page des images">
-            <option value="GALLERY">Grille</option>
-            <option value="HERO">Heros</option>
-            <option value="MASONRY">Mosaique</option>
-            <option value="CAROUSEL">Carrousel</option>
-          </select>
-          <button type="button" class="btn-icon" (click)="removeField(i)" aria-label="Supprimer">
-            <lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
-          </button>
-        </li>
+          </li>
+        }
       </ul>
 
       <div class="field-row add-row">
diff --git a/web/src/app/lore/template-create/template-create.component.ts b/web/src/app/lore/template-create/template-create.component.ts
index aac152b..f359d83 100644
--- a/web/src/app/lore/template-create/template-create.component.ts
+++ b/web/src/app/lore/template-create/template-create.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
-import { CommonModule } from '@angular/common';
+
 import { FormsModule, ReactiveFormsModule, FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, Router, RouterModule } from '@angular/router';
 import { LucideAngularModule, Plus, Trash2, Type, Image as ImageIcon, ChevronUp, ChevronDown } from 'lucide-angular';
@@ -20,7 +20,7 @@ import { popReturnTo } from '../return-stack.helper';
  */
 @Component({
     selector: 'app-template-create',
-    imports: [CommonModule, FormsModule, ReactiveFormsModule, RouterModule, LucideAngularModule],
+    imports: [FormsModule, ReactiveFormsModule, RouterModule, LucideAngularModule],
     templateUrl: './template-create.component.html',
     styleUrls: ['./template-create.component.scss']
 })
diff --git a/web/src/app/lore/template-edit/template-edit.component.html b/web/src/app/lore/template-edit/template-edit.component.html
index 81e7824..7cef67d 100644
--- a/web/src/app/lore/template-edit/template-edit.component.html
+++ b/web/src/app/lore/template-edit/template-edit.component.html
@@ -1,117 +1,110 @@
-<div class="page" *ngIf="template">
-
-  <header class="page-header">
-    <div>
-      <h1>{{ template.name }}</h1>
-      <p class="subtitle">Template</p>
-    </div>
-    <div class="header-actions">
-      <button type="button" class="btn-danger" (click)="delete()">Supprimer</button>
-      <button type="button" class="btn-primary" (click)="save()" [disabled]="form.invalid">Sauvegarder</button>
-    </div>
-  </header>
-
-  <form [formGroup]="form" class="template-form">
-
-    <!-- Colonne gauche ---------------------------------------------- -->
-    <div class="col-left">
-
-      <div class="field">
-        <label for="template-edit-name">Nom</label>
-        <input id="template-edit-name" type="text" formControlName="name" />
+@if (template) {
+  <div class="page">
+    <header class="page-header">
+      <div>
+        <h1>{{ template.name }}</h1>
+        <p class="subtitle">Template</p>
       </div>
-
-      <div class="field">
-        <label for="template-edit-default-node">Dossier par défaut</label>
-        <select id="template-edit-default-node" formControlName="defaultNodeId">
-          <option value="">-- Aucun --</option>
-          <option *ngFor="let node of nodes" [value]="node.id">{{ node.name }}</option>
-        </select>
-        <p class="hint">Les pages créées avec ce template seront placées dans ce dossier par défaut</p>
+      <div class="header-actions">
+        <button type="button" class="btn-danger" (click)="delete()">Supprimer</button>
+        <button type="button" class="btn-primary" (click)="save()" [disabled]="form.invalid">Sauvegarder</button>
       </div>
-
-      <div class="field">
-        <label for="template-edit-description">Description</label>
-        <textarea id="template-edit-description" formControlName="description" rows="6"></textarea>
+    </header>
+    <form [formGroup]="form" class="template-form">
+      <!-- Colonne gauche ---------------------------------------------- -->
+      <div class="col-left">
+        <div class="field">
+          <label for="template-edit-name">Nom</label>
+          <input id="template-edit-name" type="text" formControlName="name" />
+        </div>
+        <div class="field">
+          <label for="template-edit-default-node">Dossier par défaut</label>
+          <select id="template-edit-default-node" formControlName="defaultNodeId">
+            <option value="">-- Aucun --</option>
+            @for (node of nodes; track node) {
+              <option [value]="node.id">{{ node.name }}</option>
+            }
+          </select>
+          <p class="hint">Les pages créées avec ce template seront placées dans ce dossier par défaut</p>
+        </div>
+        <div class="field">
+          <label for="template-edit-description">Description</label>
+          <textarea id="template-edit-description" formControlName="description" rows="6"></textarea>
+        </div>
       </div>
-
-    </div>
-
-    <!-- Colonne droite --------------------------------------------- -->
-    <div class="col-right">
-
-      <label class="section-label">Champs du template</label>
-
-      <ul class="fields-list">
-        <li class="field-row" *ngFor="let f of fields; let i = index; let first = first; let last = last">
-          <div class="reorder-stack">
-            <button type="button" class="btn-icon-ghost btn-reorder"
-                    (click)="moveField(i, -1)"
-                    [disabled]="first"
-                    aria-label="Monter d'un cran" title="Monter">
-              <lucide-icon [img]="ChevronUp" [size]="12"></lucide-icon>
-            </button>
-            <button type="button" class="btn-icon-ghost btn-reorder"
-                    (click)="moveField(i, 1)"
-                    [disabled]="last"
-                    aria-label="Descendre d'un cran" title="Descendre">
-              <lucide-icon [img]="ChevronDown" [size]="12"></lucide-icon>
-            </button>
-          </div>
-          <span class="field-chip"
+      <!-- Colonne droite --------------------------------------------- -->
+      <div class="col-right">
+        <label class="section-label">Champs du template</label>
+        <ul class="fields-list">
+          @for (f of fields; track f; let i = $index; let first = $first; let last = $last) {
+            <li class="field-row">
+              <div class="reorder-stack">
+                <button type="button" class="btn-icon-ghost btn-reorder"
+                  (click)="moveField(i, -1)"
+                  [disabled]="first"
+                  aria-label="Monter d'un cran" title="Monter">
+                  <lucide-icon [img]="ChevronUp" [size]="12"></lucide-icon>
+                </button>
+                <button type="button" class="btn-icon-ghost btn-reorder"
+                  (click)="moveField(i, 1)"
+                  [disabled]="last"
+                  aria-label="Descendre d'un cran" title="Descendre">
+                  <lucide-icon [img]="ChevronDown" [size]="12"></lucide-icon>
+                </button>
+              </div>
+              <span class="field-chip"
                 [class.field-chip-image]="f.type === 'IMAGE'"
                 [class.field-chip-existing]="f.type !== 'IMAGE' && isExistingField(f)"
                 [class.field-chip-new]="f.type !== 'IMAGE' && !isExistingField(f)">
-            <lucide-icon [img]="f.type === 'IMAGE' ? ImageIcon : Type" [size]="12"></lucide-icon>
-            {{ f.name }}
-          </span>
-          <button type="button"
-                  class="btn-icon-ghost btn-type-toggle"
-                  (click)="toggleFieldType(i)"
-                  [title]="f.type === 'TEXT' ? 'Transformer en champ Image' : 'Transformer en champ Texte'">
-            {{ f.type === 'TEXT' ? 'Texte' : 'Image' }}
-          </button>
-          <select *ngIf="f.type === 'IMAGE'"
+                <lucide-icon [img]="f.type === 'IMAGE' ? ImageIcon : Type" [size]="12"></lucide-icon>
+                {{ f.name }}
+              </span>
+              <button type="button"
+                class="btn-icon-ghost btn-type-toggle"
+                (click)="toggleFieldType(i)"
+                [title]="f.type === 'TEXT' ? 'Transformer en champ Image' : 'Transformer en champ Texte'">
+                {{ f.type === 'TEXT' ? 'Texte' : 'Image' }}
+              </button>
+              @if (f.type === 'IMAGE') {
+                <select
                   class="layout-select"
                   [ngModel]="f.layout ?? 'GALLERY'"
                   [ngModelOptions]="{ standalone: true }"
                   (ngModelChange)="setFieldLayout(i, $event)"
                   title="Mise en page des images">
-            <option value="GALLERY">Grille</option>
-            <option value="HERO">Heros</option>
-            <option value="MASONRY">Mosaique</option>
-            <option value="CAROUSEL">Carrousel</option>
+                  <option value="GALLERY">Grille</option>
+                  <option value="HERO">Heros</option>
+                  <option value="MASONRY">Mosaique</option>
+                  <option value="CAROUSEL">Carrousel</option>
+                </select>
+              }
+              <button type="button" class="btn-icon-danger" (click)="removeField(i)" aria-label="Supprimer">
+                <lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
+              </button>
+            </li>
+          }
+        </ul>
+        <div class="field-row add-row">
+          <input
+            type="text"
+            [(ngModel)]="newFieldName"
+            [ngModelOptions]="{ standalone: true }"
+            placeholder="+ Ajouter un champ"
+            (keydown.enter)="$event.preventDefault(); addField()" />
+          <select
+            class="type-select"
+            [(ngModel)]="newFieldType"
+            [ngModelOptions]="{ standalone: true }"
+            aria-label="Type du champ">
+            <option value="TEXT">Texte</option>
+            <option value="IMAGE">Image</option>
           </select>
-          <button type="button" class="btn-icon-danger" (click)="removeField(i)" aria-label="Supprimer">
-            <lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
+          <button type="button" class="btn-add" (click)="addField()" title="Ajouter le champ">
+            <lucide-icon [img]="Plus" [size]="14"></lucide-icon>
           </button>
-        </li>
-      </ul>
-
-      <div class="field-row add-row">
-        <input
-          type="text"
-          [(ngModel)]="newFieldName"
-          [ngModelOptions]="{ standalone: true }"
-          placeholder="+ Ajouter un champ"
-          (keydown.enter)="$event.preventDefault(); addField()" />
-        <select
-          class="type-select"
-          [(ngModel)]="newFieldType"
-          [ngModelOptions]="{ standalone: true }"
-          aria-label="Type du champ">
-          <option value="TEXT">Texte</option>
-          <option value="IMAGE">Image</option>
-        </select>
-        <button type="button" class="btn-add" (click)="addField()" title="Ajouter le champ">
-          <lucide-icon [img]="Plus" [size]="14"></lucide-icon>
-        </button>
+        </div>
+        <p class="hint">Texte = zone editable + generable par l'IA. Image = galerie d'illustrations.</p>
       </div>
-
-      <p class="hint">Texte = zone editable + generable par l'IA. Image = galerie d'illustrations.</p>
-
-    </div>
-
-  </form>
-
-</div>
+    </form>
+  </div>
+}
diff --git a/web/src/app/lore/template-edit/template-edit.component.ts b/web/src/app/lore/template-edit/template-edit.component.ts
index 292a6b7..b1f9040 100644
--- a/web/src/app/lore/template-edit/template-edit.component.ts
+++ b/web/src/app/lore/template-edit/template-edit.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
-import { CommonModule } from '@angular/common';
+
 import { FormsModule, ReactiveFormsModule, FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { forkJoin, Subject } from 'rxjs';
@@ -21,7 +21,7 @@ import { ConfirmDialogService } from '../../shared/confirm-dialog/confirm-dialog
  */
 @Component({
     selector: 'app-template-edit',
-    imports: [CommonModule, FormsModule, ReactiveFormsModule, LucideAngularModule],
+    imports: [FormsModule, ReactiveFormsModule, LucideAngularModule],
     templateUrl: './template-edit.component.html',
     styleUrls: ['./template-edit.component.scss']
 })
diff --git a/web/src/app/sessions/session-ai-chat-panel/session-ai-chat-panel.component.html b/web/src/app/sessions/session-ai-chat-panel/session-ai-chat-panel.component.html
index e358ffb..c2fe3f3 100644
--- a/web/src/app/sessions/session-ai-chat-panel/session-ai-chat-panel.component.html
+++ b/web/src/app/sessions/session-ai-chat-panel/session-ai-chat-panel.component.html
@@ -2,33 +2,43 @@
 
   <div #messagesContainer class="messages-area">
 
-    <div class="welcome-hint" *ngIf="messages.length === 0 && !currentAssistantText && !error">
-      <lucide-icon [img]="Sparkles" [size]="18"></lucide-icon>
-      <p>Pose une question à l'IA pendant la partie.</p>
-      <p class="welcome-sub">
-        Elle connaît ton univers, ta campagne, les règles du système et tout ce qui a été noté dans le journal.
-      </p>
-    </div>
+    @if (messages.length === 0 && !currentAssistantText && !error) {
+      <div class="welcome-hint">
+        <lucide-icon [img]="Sparkles" [size]="18"></lucide-icon>
+        <p>Pose une question à l'IA pendant la partie.</p>
+        <p class="welcome-sub">
+          Elle connaît ton univers, ta campagne, les règles du système et tout ce qui a été noté dans le journal.
+        </p>
+      </div>
+    }
 
-    <div *ngFor="let m of messages" class="msg" [class.msg--user]="m.role === 'user'" [class.msg--assistant]="m.role === 'assistant'">
-      <div class="msg-content">{{ m.content }}</div>
-      <button *ngIf="m.role === 'assistant'"
-              type="button"
-              class="msg-action"
-              [disabled]="!canSaveToJournal"
-              [title]="canSaveToJournal ? 'Ajouter cette réponse au journal' : 'Session terminée'"
-              (click)="onSaveToJournal(m.content)">
-        <lucide-icon [img]="BookmarkPlus" [size]="12"></lucide-icon>
-        Au journal
-      </button>
-    </div>
+    @for (m of messages; track m) {
+      <div class="msg" [class.msg--user]="m.role === 'user'" [class.msg--assistant]="m.role === 'assistant'">
+        <div class="msg-content">{{ m.content }}</div>
+        @if (m.role === 'assistant') {
+          <button
+            type="button"
+            class="msg-action"
+            [disabled]="!canSaveToJournal"
+            [title]="canSaveToJournal ? 'Ajouter cette réponse au journal' : 'Session terminée'"
+            (click)="onSaveToJournal(m.content)">
+            <lucide-icon [img]="BookmarkPlus" [size]="12"></lucide-icon>
+            Au journal
+          </button>
+        }
+      </div>
+    }
 
     <!-- Stream en cours : on affiche les tokens au fil de l'eau. -->
-    <div *ngIf="currentAssistantText" class="msg msg--assistant msg--streaming">
-      <div class="msg-content">{{ currentAssistantText }}<span class="cursor">▍</span></div>
-    </div>
+    @if (currentAssistantText) {
+      <div class="msg msg--assistant msg--streaming">
+        <div class="msg-content">{{ currentAssistantText }}<span class="cursor">▍</span></div>
+      </div>
+    }
 
-    <p class="error-hint" *ngIf="error">{{ error }}</p>
+    @if (error) {
+      <p class="error-hint">{{ error }}</p>
+    }
   </div>
 
   <div class="composer">
@@ -39,33 +49,37 @@
       rows="2"
       [placeholder]="isStreaming ? 'L’IA répond…' : 'Demande une idée, un rebondissement, une description…'"
       [disabled]="isStreaming"
-      (keydown.control.enter)="send()"></textarea>
+    (keydown.control.enter)="send()"></textarea>
 
     <div class="composer-actions">
       <button type="button"
-              class="btn-link"
-              [disabled]="messages.length === 0 && !currentAssistantText"
-              (click)="clearConversation()"
-              title="Effacer la conversation">
+        class="btn-link"
+        [disabled]="messages.length === 0 && !currentAssistantText"
+        (click)="clearConversation()"
+        title="Effacer la conversation">
         <lucide-icon [img]="Trash2" [size]="12"></lucide-icon>
       </button>
 
-      <button *ngIf="!isStreaming"
-              type="button"
-              class="btn-primary btn-send"
-              [disabled]="!input.trim()"
-              (click)="send()">
-        <lucide-icon [img]="Send" [size]="14"></lucide-icon>
-        Envoyer
-      </button>
+      @if (!isStreaming) {
+        <button
+          type="button"
+          class="btn-primary btn-send"
+          [disabled]="!input.trim()"
+          (click)="send()">
+          <lucide-icon [img]="Send" [size]="14"></lucide-icon>
+          Envoyer
+        </button>
+      }
 
-      <button *ngIf="isStreaming"
-              type="button"
-              class="btn-secondary btn-send"
-              (click)="cancelStream()">
-        <lucide-icon [img]="Square" [size]="14"></lucide-icon>
-        Stop
-      </button>
+      @if (isStreaming) {
+        <button
+          type="button"
+          class="btn-secondary btn-send"
+          (click)="cancelStream()">
+          <lucide-icon [img]="Square" [size]="14"></lucide-icon>
+          Stop
+        </button>
+      }
     </div>
   </div>
 
diff --git a/web/src/app/sessions/session-ai-chat-panel/session-ai-chat-panel.component.ts b/web/src/app/sessions/session-ai-chat-panel/session-ai-chat-panel.component.ts
index 8c453be..3e378fb 100644
--- a/web/src/app/sessions/session-ai-chat-panel/session-ai-chat-panel.component.ts
+++ b/web/src/app/sessions/session-ai-chat-panel/session-ai-chat-panel.component.ts
@@ -2,7 +2,7 @@ import {
   Component, EventEmitter, Input, OnChanges, OnDestroy, Output, SimpleChanges,
   ElementRef, ViewChild
 } from '@angular/core';
-import { CommonModule } from '@angular/common';
+
 import { FormsModule } from '@angular/forms';
 import {
   LucideAngularModule, Send, Sparkles, Trash2, BookmarkPlus, Square
@@ -23,7 +23,7 @@ import { AiChatService, ChatMessage } from '../../services/ai-chat.service';
  */
 @Component({
     selector: 'app-session-ai-chat-panel',
-    imports: [CommonModule, FormsModule, LucideAngularModule],
+    imports: [FormsModule, LucideAngularModule],
     templateUrl: './session-ai-chat-panel.component.html',
     styleUrls: ['./session-ai-chat-panel.component.scss']
 })
diff --git a/web/src/app/sessions/session-detail/session-detail.component.html b/web/src/app/sessions/session-detail/session-detail.component.html
index 739f71a..f41b62c 100644
--- a/web/src/app/sessions/session-detail/session-detail.component.html
+++ b/web/src/app/sessions/session-detail/session-detail.component.html
@@ -1,190 +1,193 @@
-<div class="session-detail" *ngIf="session">
-
-  <a class="back-link" [routerLink]="campaignId ? ['/campaigns', campaignId] : ['/campaigns']">
-    <lucide-icon [img]="ArrowLeft" [size]="14"></lucide-icon>
-    Retour à la campagne
-  </a>
-
-  <div class="detail-header">
-    <div class="header-texts">
-      <div class="title-row" *ngIf="!editingName">
-        <h1>
-          <lucide-icon [img]="Dices" [size]="24"></lucide-icon>
-          {{ session.name }}
-        </h1>
-        <button type="button" class="btn-icon" (click)="startRename()" title="Renommer la session">
-          <lucide-icon [img]="Pencil" [size]="14"></lucide-icon>
-        </button>
+@if (session) {
+  <div class="session-detail">
+    <a class="back-link" [routerLink]="campaignId ? ['/campaigns', campaignId] : ['/campaigns']">
+      <lucide-icon [img]="ArrowLeft" [size]="14"></lucide-icon>
+      Retour à la campagne
+    </a>
+    <div class="detail-header">
+      <div class="header-texts">
+        @if (!editingName) {
+          <div class="title-row">
+            <h1>
+              <lucide-icon [img]="Dices" [size]="24"></lucide-icon>
+              {{ session.name }}
+            </h1>
+            <button type="button" class="btn-icon" (click)="startRename()" title="Renommer la session">
+              <lucide-icon [img]="Pencil" [size]="14"></lucide-icon>
+            </button>
+          </div>
+        }
+        @if (editingName) {
+          <div class="title-row edit-mode">
+            <input type="text"
+              [(ngModel)]="editName"
+              name="editName"
+              (keydown.enter)="saveRename()"
+              (keydown.escape)="cancelRename()"
+              autofocus />
+            <button type="button" class="btn-icon" (click)="saveRename()" [disabled]="!editName.trim()" title="Valider">
+              <lucide-icon [img]="Check" [size]="14"></lucide-icon>
+            </button>
+            <button type="button" class="btn-icon" (click)="cancelRename()" title="Annuler">
+              Annuler
+            </button>
+          </div>
+        }
+        <div class="meta">
+          <span class="badge" [class.badge-active]="session.active">
+            {{ session.active ? 'En cours' : 'Terminée' }}
+          </span>
+          <span class="badge badge-muted">Démarrée le {{ session.startedAt | date:'dd/MM/yyyy HH:mm' }}</span>
+          @if (session.endedAt) {
+            <span class="badge badge-muted">
+              Terminée le {{ session.endedAt | date:'dd/MM/yyyy HH:mm' }}
+            </span>
+          }
+        </div>
       </div>
-
-      <div class="title-row edit-mode" *ngIf="editingName">
-        <input type="text"
-               [(ngModel)]="editName"
-               name="editName"
-               (keydown.enter)="saveRename()"
-               (keydown.escape)="cancelRename()"
-               autofocus />
-        <button type="button" class="btn-icon" (click)="saveRename()" [disabled]="!editName.trim()" title="Valider">
-          <lucide-icon [img]="Check" [size]="14"></lucide-icon>
+      <div class="header-actions">
+        @if (session.active) {
+          <button type="button" class="btn-secondary" (click)="endSession()">
+            <lucide-icon [img]="Square" [size]="14"></lucide-icon>
+            Terminer la session
+          </button>
+        }
+        <button type="button" class="btn-danger" (click)="deleteSession()">
+          <lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
+          Supprimer
         </button>
-        <button type="button" class="btn-icon" (click)="cancelRename()" title="Annuler">
-          Annuler
-        </button>
-      </div>
-
-      <div class="meta">
-        <span class="badge" [class.badge-active]="session.active">
-          {{ session.active ? 'En cours' : 'Terminée' }}
-        </span>
-        <span class="badge badge-muted">Démarrée le {{ session.startedAt | date:'dd/MM/yyyy HH:mm' }}</span>
-        <span class="badge badge-muted" *ngIf="session.endedAt">
-          Terminée le {{ session.endedAt | date:'dd/MM/yyyy HH:mm' }}
-        </span>
       </div>
     </div>
-
-    <div class="header-actions">
-      <button *ngIf="session.active" type="button" class="btn-secondary" (click)="endSession()">
-        <lucide-icon [img]="Square" [size]="14"></lucide-icon>
-        Terminer la session
-      </button>
-      <button type="button" class="btn-danger" (click)="deleteSession()">
-        <lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
-        Supprimer
-      </button>
-    </div>
-  </div>
-
-  <!-- ============ Mode jeu : 2 colonnes (journal + panneau référence) ============ -->
-  <div class="play-grid">
-
-    <!-- Colonne gauche : journal -->
-    <div class="play-main">
-
-      <!-- Ajouter une entrée -->
-      <section class="detail-section add-entry-section" *ngIf="session.active">
-        <div class="type-selector">
-          <button *ngFor="let type of entryTypes"
+    <!-- ============ Mode jeu : 2 colonnes (journal + panneau référence) ============ -->
+    <div class="play-grid">
+      <!-- Colonne gauche : journal -->
+      <div class="play-main">
+        <!-- Ajouter une entrée -->
+        @if (session.active) {
+          <section class="detail-section add-entry-section">
+            <div class="type-selector">
+              @for (type of entryTypes; track type) {
+                <button
                   type="button"
                   class="type-chip"
                   [class.type-chip--active]="newEntryType === type"
                   [style.--type-color]="entryTypeMeta[type].color"
                   (click)="newEntryType = type">
-            <lucide-icon [img]="typeIcons[type]" [size]="14"></lucide-icon>
-            {{ entryTypeMeta[type].label }}
-          </button>
-        </div>
-
-        <textarea class="entry-input"
-                  [(ngModel)]="newEntryContent"
-                  name="newEntryContent"
-                  rows="3"
-                  [placeholder]="'Ajouter une ' + entryTypeMeta[newEntryType].label.toLowerCase() + '…'"
-                  (keydown.control.enter)="submitNewEntry()"></textarea>
-
-        <div class="entry-input-footer">
-          <span class="hint">Ctrl + Entrée pour ajouter</span>
-          <button type="button"
-                  class="btn-primary"
-                  [disabled]="!newEntryContent.trim() || submittingEntry"
-                  (click)="submitNewEntry()">
-            <lucide-icon [img]="Plus" [size]="14"></lucide-icon>
-            Ajouter
-          </button>
-        </div>
-      </section>
-
-      <!-- Timeline -->
-      <section class="detail-section timeline-section">
-        <h2>Journal de session</h2>
-
-        <div class="empty-state" *ngIf="entries.length === 0">
-          <p>Aucune entrée pour le moment.</p>
-          <p class="hint" *ngIf="session.active">
-            Saisis une note, un évènement ou un jet ci-dessus pour commencer le journal.
-          </p>
-        </div>
-
-        <ul class="timeline" *ngIf="entries.length > 0">
-          <li class="timeline-entry"
-              *ngFor="let entry of entries"
-              [style.--type-color]="entryTypeMeta[entry.type].color">
-
-            <div class="entry-marker">
-              <lucide-icon [img]="typeIcons[entry.type]" [size]="14"></lucide-icon>
+                  <lucide-icon [img]="typeIcons[type]" [size]="14"></lucide-icon>
+                  {{ entryTypeMeta[type].label }}
+                </button>
+              }
             </div>
-
-            <div class="entry-body">
-              <!-- Mode lecture -->
-              <ng-container *ngIf="editingEntryId !== entry.id">
-                <div class="entry-header">
-                  <span class="entry-type">{{ entryTypeMeta[entry.type].label }}</span>
-                  <span class="entry-time">{{ entry.occurredAt | date:'HH:mm — dd/MM/yyyy' }}</span>
-                  <div class="entry-actions">
-                    <button type="button" class="btn-icon" (click)="startEditEntry(entry)" title="Modifier">
-                      <lucide-icon [img]="Pencil" [size]="12"></lucide-icon>
-                    </button>
-                    <button type="button" class="btn-icon btn-icon--danger" (click)="deleteEntry(entry)" title="Supprimer">
-                      <lucide-icon [img]="Trash2" [size]="12"></lucide-icon>
-                    </button>
+            <textarea class="entry-input"
+              [(ngModel)]="newEntryContent"
+              name="newEntryContent"
+              rows="3"
+              [placeholder]="'Ajouter une ' + entryTypeMeta[newEntryType].label.toLowerCase() + '…'"
+            (keydown.control.enter)="submitNewEntry()"></textarea>
+            <div class="entry-input-footer">
+              <span class="hint">Ctrl + Entrée pour ajouter</span>
+              <button type="button"
+                class="btn-primary"
+                [disabled]="!newEntryContent.trim() || submittingEntry"
+                (click)="submitNewEntry()">
+                <lucide-icon [img]="Plus" [size]="14"></lucide-icon>
+                Ajouter
+              </button>
+            </div>
+          </section>
+        }
+        <!-- Timeline -->
+        <section class="detail-section timeline-section">
+          <h2>Journal de session</h2>
+          @if (entries.length === 0) {
+            <div class="empty-state">
+              <p>Aucune entrée pour le moment.</p>
+              @if (session.active) {
+                <p class="hint">
+                  Saisis une note, un évènement ou un jet ci-dessus pour commencer le journal.
+                </p>
+              }
+            </div>
+          }
+          @if (entries.length > 0) {
+            <ul class="timeline">
+              @for (entry of entries; track entry) {
+                <li class="timeline-entry"
+                  [style.--type-color]="entryTypeMeta[entry.type].color">
+                  <div class="entry-marker">
+                    <lucide-icon [img]="typeIcons[entry.type]" [size]="14"></lucide-icon>
                   </div>
-                </div>
-                <p class="entry-content">{{ entry.content }}</p>
-              </ng-container>
-
-              <!-- Mode édition -->
-              <ng-container *ngIf="editingEntryId === entry.id">
-                <div class="type-selector type-selector--compact">
-                  <button *ngFor="let type of entryTypes"
-                          type="button"
-                          class="type-chip"
-                          [class.type-chip--active]="editEntryType === type"
-                          [style.--type-color]="entryTypeMeta[type].color"
-                          (click)="editEntryType = type">
-                    <lucide-icon [img]="typeIcons[type]" [size]="12"></lucide-icon>
-                    {{ entryTypeMeta[type].label }}
-                  </button>
-                </div>
-                <textarea class="entry-input"
-                          [(ngModel)]="editEntryContent"
-                          name="editEntryContent"
-                          rows="3"
-                          (keydown.control.enter)="saveEditEntry(entry)"
-                          (keydown.escape)="cancelEditEntry()"></textarea>
-                <div class="entry-input-footer">
-                  <button type="button" class="btn-secondary btn-sm" (click)="cancelEditEntry()">
-                    <lucide-icon [img]="X" [size]="12"></lucide-icon>
-                    Annuler
-                  </button>
-                  <button type="button"
+                  <div class="entry-body">
+                    <!-- Mode lecture -->
+                    @if (editingEntryId !== entry.id) {
+                      <div class="entry-header">
+                        <span class="entry-type">{{ entryTypeMeta[entry.type].label }}</span>
+                        <span class="entry-time">{{ entry.occurredAt | date:'HH:mm — dd/MM/yyyy' }}</span>
+                        <div class="entry-actions">
+                          <button type="button" class="btn-icon" (click)="startEditEntry(entry)" title="Modifier">
+                            <lucide-icon [img]="Pencil" [size]="12"></lucide-icon>
+                          </button>
+                          <button type="button" class="btn-icon btn-icon--danger" (click)="deleteEntry(entry)" title="Supprimer">
+                            <lucide-icon [img]="Trash2" [size]="12"></lucide-icon>
+                          </button>
+                        </div>
+                      </div>
+                      <p class="entry-content">{{ entry.content }}</p>
+                    }
+                    <!-- Mode édition -->
+                    @if (editingEntryId === entry.id) {
+                      <div class="type-selector type-selector--compact">
+                        @for (type of entryTypes; track type) {
+                          <button
+                            type="button"
+                            class="type-chip"
+                            [class.type-chip--active]="editEntryType === type"
+                            [style.--type-color]="entryTypeMeta[type].color"
+                            (click)="editEntryType = type">
+                            <lucide-icon [img]="typeIcons[type]" [size]="12"></lucide-icon>
+                            {{ entryTypeMeta[type].label }}
+                          </button>
+                        }
+                      </div>
+                      <textarea class="entry-input"
+                        [(ngModel)]="editEntryContent"
+                        name="editEntryContent"
+                        rows="3"
+                        (keydown.control.enter)="saveEditEntry(entry)"
+                      (keydown.escape)="cancelEditEntry()"></textarea>
+                      <div class="entry-input-footer">
+                        <button type="button" class="btn-secondary btn-sm" (click)="cancelEditEntry()">
+                          <lucide-icon [img]="X" [size]="12"></lucide-icon>
+                          Annuler
+                        </button>
+                        <button type="button"
                           class="btn-primary btn-sm"
                           [disabled]="!editEntryContent.trim()"
                           (click)="saveEditEntry(entry)">
-                    <lucide-icon [img]="Check" [size]="12"></lucide-icon>
-                    Sauvegarder
-                  </button>
-                </div>
-              </ng-container>
-            </div>
-
-          </li>
-        </ul>
-      </section>
+                          <lucide-icon [img]="Check" [size]="12"></lucide-icon>
+                          Sauvegarder
+                        </button>
+                      </div>
+                    }
+                  </div>
+                </li>
+              }
+            </ul>
+          }
+        </section>
+      </div>
+      <!-- Colonne droite : panneau référence (Dés / Personnages / Scènes) -->
+      <aside class="play-aside">
+        <app-session-reference-panel
+          [campaignId]="campaignId ?? ''"
+          [playthroughId]="session.playthroughId"
+          [sessionId]="session.id"
+          [canAddToJournal]="session.active"
+          (rolled)="onDiceRolled($event)"
+          (aiReplyToJournal)="onAiReplyToJournal($event)"
+          (noteToJournal)="onItemNoteToJournal($event)">
+        </app-session-reference-panel>
+      </aside>
     </div>
-
-    <!-- Colonne droite : panneau référence (Dés / Personnages / Scènes) -->
-    <aside class="play-aside">
-      <app-session-reference-panel
-        [campaignId]="campaignId ?? ''"
-        [playthroughId]="session.playthroughId"
-        [sessionId]="session.id"
-        [canAddToJournal]="session.active"
-        (rolled)="onDiceRolled($event)"
-        (aiReplyToJournal)="onAiReplyToJournal($event)"
-        (noteToJournal)="onItemNoteToJournal($event)">
-      </app-session-reference-panel>
-    </aside>
-
   </div>
-
-</div>
+}
diff --git a/web/src/app/sessions/session-dice-panel/session-dice-panel.component.html b/web/src/app/sessions/session-dice-panel/session-dice-panel.component.html
index 76663c4..e3ef072 100644
--- a/web/src/app/sessions/session-dice-panel/session-dice-panel.component.html
+++ b/web/src/app/sessions/session-dice-panel/session-dice-panel.component.html
@@ -2,13 +2,15 @@
 
   <div class="dice-controls">
     <div class="face-grid">
-      <button *ngFor="let f of faces"
-              type="button"
-              class="face-chip"
-              [class.face-chip--active]="selectedFace === f"
-              (click)="selectedFace = f">
-        d{{ f }}
-      </button>
+      @for (f of faces; track f) {
+        <button
+          type="button"
+          class="face-chip"
+          [class.face-chip--active]="selectedFace === f"
+          (click)="selectedFace = f">
+          d{{ f }}
+        </button>
+      }
     </div>
 
     <div class="dice-inputs">
@@ -28,34 +30,41 @@
     </button>
   </div>
 
-  <div class="dice-history" *ngIf="history.length > 0">
-    <div class="history-header">
-      <span>Derniers jets</span>
-      <button type="button" class="btn-link" (click)="clearHistory()" title="Vider l'historique local">
-        <lucide-icon [img]="Trash2" [size]="12"></lucide-icon>
-      </button>
-    </div>
-
-    <ul class="history-list">
-      <li *ngFor="let r of history" class="history-item">
-        <div class="history-text">
-          <span class="history-notation">{{ r.notation }}</span>
-          <span class="history-detail" *ngIf="r.rolls.length > 1">[{{ r.rolls.join(', ') }}]</span>
-          <span class="history-total">= {{ r.total }}</span>
-        </div>
-        <button type="button"
-                class="btn-icon"
-                [disabled]="!canAddToJournal"
-                [title]="canAddToJournal ? 'Ajouter au journal' : 'Session terminée'"
-                (click)="addToJournal(r)">
-          <lucide-icon [img]="BookmarkPlus" [size]="12"></lucide-icon>
+  @if (history.length > 0) {
+    <div class="dice-history">
+      <div class="history-header">
+        <span>Derniers jets</span>
+        <button type="button" class="btn-link" (click)="clearHistory()" title="Vider l'historique local">
+          <lucide-icon [img]="Trash2" [size]="12"></lucide-icon>
         </button>
-      </li>
-    </ul>
-  </div>
+      </div>
+      <ul class="history-list">
+        @for (r of history; track r) {
+          <li class="history-item">
+            <div class="history-text">
+              <span class="history-notation">{{ r.notation }}</span>
+              @if (r.rolls.length > 1) {
+                <span class="history-detail">[{{ r.rolls.join(', ') }}]</span>
+              }
+              <span class="history-total">= {{ r.total }}</span>
+            </div>
+            <button type="button"
+              class="btn-icon"
+              [disabled]="!canAddToJournal"
+              [title]="canAddToJournal ? 'Ajouter au journal' : 'Session terminée'"
+              (click)="addToJournal(r)">
+              <lucide-icon [img]="BookmarkPlus" [size]="12"></lucide-icon>
+            </button>
+          </li>
+        }
+      </ul>
+    </div>
+  }
 
-  <p class="placeholder-hint" *ngIf="history.length === 0">
-    Choisis un dé et lance.
-  </p>
+  @if (history.length === 0) {
+    <p class="placeholder-hint">
+      Choisis un dé et lance.
+    </p>
+  }
 
 </div>
diff --git a/web/src/app/sessions/session-dice-panel/session-dice-panel.component.ts b/web/src/app/sessions/session-dice-panel/session-dice-panel.component.ts
index f562657..d549252 100644
--- a/web/src/app/sessions/session-dice-panel/session-dice-panel.component.ts
+++ b/web/src/app/sessions/session-dice-panel/session-dice-panel.component.ts
@@ -1,5 +1,5 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { CommonModule } from '@angular/common';
+
 import { FormsModule } from '@angular/forms';
 import { LucideAngularModule, Dices, BookmarkPlus, Trash2 } from 'lucide-angular';
 
@@ -26,7 +26,7 @@ export interface DiceRollResult {
  */
 @Component({
     selector: 'app-session-dice-panel',
-    imports: [CommonModule, FormsModule, LucideAngularModule],
+    imports: [FormsModule, LucideAngularModule],
     templateUrl: './session-dice-panel.component.html',
     styleUrls: ['./session-dice-panel.component.scss']
 })
diff --git a/web/src/app/sessions/session-item-catalogs-panel/session-item-catalogs-panel.component.html b/web/src/app/sessions/session-item-catalogs-panel/session-item-catalogs-panel.component.html
index 775f5e0..12989a9 100644
--- a/web/src/app/sessions/session-item-catalogs-panel/session-item-catalogs-panel.component.html
+++ b/web/src/app/sessions/session-item-catalogs-panel/session-item-catalogs-panel.component.html
@@ -1,38 +1,57 @@
 <div class="sic-panel">
-  <p class="loading-hint" *ngIf="loading">Chargement…</p>
+  @if (loading) {
+    <p class="loading-hint">Chargement…</p>
+  }
 
   <!-- Liste des catalogues -->
-  <div *ngIf="!loading && !selected" class="sic-list">
-    <p class="empty-hint" *ngIf="catalogs.length === 0">
-      Aucun catalogue d'objets dans cette campagne.
-    </p>
-    <button *ngFor="let c of catalogs" type="button" class="sic-item" (click)="select(c)">
-      <lucide-icon [img]="Package" [size]="13"></lucide-icon>
-      <span class="sic-item-name">{{ c.name }}</span>
-      <span class="sic-item-count">{{ c.items.length }}</span>
-    </button>
-  </div>
+  @if (!loading && !selected) {
+    <div class="sic-list">
+      @if (catalogs.length === 0) {
+        <p class="empty-hint">
+          Aucun catalogue d'objets dans cette campagne.
+        </p>
+      }
+      @for (c of catalogs; track c) {
+        <button type="button" class="sic-item" (click)="select(c)">
+          <lucide-icon [img]="Package" [size]="13"></lucide-icon>
+          <span class="sic-item-name">{{ c.name }}</span>
+          <span class="sic-item-count">{{ c.items.length }}</span>
+        </button>
+      }
+    </div>
+  }
 
   <!-- Catalogue sélectionné -->
-  <div *ngIf="selected" class="sic-detail">
-    <button type="button" class="sic-back" (click)="backToList()">
-      <lucide-icon [img]="ChevronLeft" [size]="13"></lucide-icon> Catalogues
-    </button>
-    <h4>{{ selected.name }}</h4>
-
-    <div class="sic-group" *ngFor="let g of groups">
-      <div class="sic-group-title" *ngIf="g.category !== '—'">{{ g.category }}</div>
-      <div class="sic-obj" *ngFor="let it of g.items">
-        <div class="sic-obj-main">
-          <span class="sic-obj-name">{{ it.name }}</span>
-          <span class="sic-obj-price" *ngIf="it.price">{{ it.price }}</span>
-        </div>
-        <div class="sic-obj-desc" *ngIf="it.description">{{ it.description }}</div>
-        <button type="button" class="sic-note" (click)="note(it)" [disabled]="!canAddToJournal"
+  @if (selected) {
+    <div class="sic-detail">
+      <button type="button" class="sic-back" (click)="backToList()">
+        <lucide-icon [img]="ChevronLeft" [size]="13"></lucide-icon> Catalogues
+      </button>
+      <h4>{{ selected.name }}</h4>
+      @for (g of groups; track g) {
+        <div class="sic-group">
+          @if (g.category !== '—') {
+            <div class="sic-group-title">{{ g.category }}</div>
+          }
+          @for (it of g.items; track it) {
+            <div class="sic-obj">
+              <div class="sic-obj-main">
+                <span class="sic-obj-name">{{ it.name }}</span>
+                @if (it.price) {
+                  <span class="sic-obj-price">{{ it.price }}</span>
+                }
+              </div>
+              @if (it.description) {
+                <div class="sic-obj-desc">{{ it.description }}</div>
+              }
+              <button type="button" class="sic-note" (click)="note(it)" [disabled]="!canAddToJournal"
                 title="Consigner au journal (ex. achat)">
-          <lucide-icon [img]="BookmarkPlus" [size]="12"></lucide-icon> Journal
-        </button>
-      </div>
+                <lucide-icon [img]="BookmarkPlus" [size]="12"></lucide-icon> Journal
+              </button>
+            </div>
+          }
+        </div>
+      }
     </div>
-  </div>
+  }
 </div>
diff --git a/web/src/app/sessions/session-item-catalogs-panel/session-item-catalogs-panel.component.ts b/web/src/app/sessions/session-item-catalogs-panel/session-item-catalogs-panel.component.ts
index f1497cc..899bdb4 100644
--- a/web/src/app/sessions/session-item-catalogs-panel/session-item-catalogs-panel.component.ts
+++ b/web/src/app/sessions/session-item-catalogs-panel/session-item-catalogs-panel.component.ts
@@ -1,5 +1,5 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { CommonModule } from '@angular/common';
+
 import { LucideAngularModule, Package, BookmarkPlus, ChevronLeft } from 'lucide-angular';
 import { catchError, of } from 'rxjs';
 import { ItemCatalogService } from '../../services/item-catalog.service';
@@ -13,7 +13,7 @@ interface ItemGroup { category: string; items: CatalogItem[]; }
  */
 @Component({
     selector: 'app-session-item-catalogs-panel',
-    imports: [CommonModule, LucideAngularModule],
+    imports: [LucideAngularModule],
     templateUrl: './session-item-catalogs-panel.component.html',
     styleUrls: ['./session-item-catalogs-panel.component.scss']
 })
diff --git a/web/src/app/sessions/session-random-tables-panel/session-random-tables-panel.component.html b/web/src/app/sessions/session-random-tables-panel/session-random-tables-panel.component.html
index 0142c48..f13820c 100644
--- a/web/src/app/sessions/session-random-tables-panel/session-random-tables-panel.component.html
+++ b/web/src/app/sessions/session-random-tables-panel/session-random-tables-panel.component.html
@@ -1,51 +1,67 @@
 <div class="srt-panel">
-  <p class="loading-hint" *ngIf="loading">Chargement…</p>
+  @if (loading) {
+    <p class="loading-hint">Chargement…</p>
+  }
 
   <!-- Liste des tables -->
-  <div *ngIf="!loading && !selected" class="srt-list">
-    <p class="empty-hint" *ngIf="tables.length === 0">
-      Aucune table aléatoire dans cette campagne. Crée-en une depuis la sidebar.
-    </p>
-    <button *ngFor="let t of tables" type="button" class="srt-item" (click)="select(t)">
-      <lucide-icon [img]="Dices" [size]="13"></lucide-icon>
-      <span class="srt-item-name">{{ t.name }}</span>
-      <span class="srt-item-formula">{{ t.diceFormula }}</span>
-    </button>
-  </div>
+  @if (!loading && !selected) {
+    <div class="srt-list">
+      @if (tables.length === 0) {
+        <p class="empty-hint">
+          Aucune table aléatoire dans cette campagne. Crée-en une depuis la sidebar.
+        </p>
+      }
+      @for (t of tables; track t) {
+        <button type="button" class="srt-item" (click)="select(t)">
+          <lucide-icon [img]="Dices" [size]="13"></lucide-icon>
+          <span class="srt-item-name">{{ t.name }}</span>
+          <span class="srt-item-formula">{{ t.diceFormula }}</span>
+        </button>
+      }
+    </div>
+  }
 
   <!-- Table sélectionnée : jet -->
-  <div *ngIf="selected" class="srt-detail">
-    <button type="button" class="srt-back" (click)="backToList()">
-      <lucide-icon [img]="ChevronLeft" [size]="13"></lucide-icon> Tables
-    </button>
-
-    <h4>{{ selected.name }}</h4>
-
-    <button type="button" class="srt-roll" (click)="roll()">
-      <lucide-icon [img]="Dices" [size]="15"></lucide-icon>
-      Lancer {{ selected.diceFormula }}
-    </button>
-
-    <div class="srt-result" *ngIf="lastRoll">
-      <div class="srt-total">
-        {{ lastRoll.total }}
-        <span class="srt-rolls" *ngIf="lastRoll.rolls.length > 1">({{ lastRoll.rolls.join(' + ') }})</span>
-        →
-        <strong *ngIf="matched">{{ matched.label }}</strong>
-        <em *ngIf="!matched">aucune entrée</em>
-      </div>
-      <div class="srt-detail-text" *ngIf="matched?.detail">{{ matched?.detail }}</div>
-
-      <div class="srt-actions">
-        <button type="button" class="srt-act" (click)="addToJournal()" [disabled]="!canAddToJournal">
-          <lucide-icon [img]="BookmarkPlus" [size]="13"></lucide-icon> Journal
-        </button>
-        <button type="button" class="srt-act srt-act--ai" (click)="improvise()"
-                [disabled]="!matched || improvising || !canAddToJournal">
-          <lucide-icon [img]="Sparkles" [size]="13"></lucide-icon>
-          {{ improvising ? '…' : 'IA improvise' }}
-        </button>
-      </div>
+  @if (selected) {
+    <div class="srt-detail">
+      <button type="button" class="srt-back" (click)="backToList()">
+        <lucide-icon [img]="ChevronLeft" [size]="13"></lucide-icon> Tables
+      </button>
+      <h4>{{ selected.name }}</h4>
+      <button type="button" class="srt-roll" (click)="roll()">
+        <lucide-icon [img]="Dices" [size]="15"></lucide-icon>
+        Lancer {{ selected.diceFormula }}
+      </button>
+      @if (lastRoll) {
+        <div class="srt-result">
+          <div class="srt-total">
+            {{ lastRoll.total }}
+            @if (lastRoll.rolls.length > 1) {
+              <span class="srt-rolls">({{ lastRoll.rolls.join(' + ') }})</span>
+            }
+            →
+            @if (matched) {
+              <strong>{{ matched.label }}</strong>
+            }
+            @if (!matched) {
+              <em>aucune entrée</em>
+            }
+          </div>
+          @if (matched?.detail) {
+            <div class="srt-detail-text">{{ matched?.detail }}</div>
+          }
+          <div class="srt-actions">
+            <button type="button" class="srt-act" (click)="addToJournal()" [disabled]="!canAddToJournal">
+              <lucide-icon [img]="BookmarkPlus" [size]="13"></lucide-icon> Journal
+            </button>
+            <button type="button" class="srt-act srt-act--ai" (click)="improvise()"
+              [disabled]="!matched || improvising || !canAddToJournal">
+              <lucide-icon [img]="Sparkles" [size]="13"></lucide-icon>
+              {{ improvising ? '…' : 'IA improvise' }}
+            </button>
+          </div>
+        </div>
+      }
     </div>
-  </div>
+  }
 </div>
diff --git a/web/src/app/sessions/session-random-tables-panel/session-random-tables-panel.component.ts b/web/src/app/sessions/session-random-tables-panel/session-random-tables-panel.component.ts
index 3e0acc5..7671538 100644
--- a/web/src/app/sessions/session-random-tables-panel/session-random-tables-panel.component.ts
+++ b/web/src/app/sessions/session-random-tables-panel/session-random-tables-panel.component.ts
@@ -1,5 +1,5 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { CommonModule } from '@angular/common';
+
 import { LucideAngularModule, Dices, BookmarkPlus, Sparkles, ChevronLeft } from 'lucide-angular';
 import { catchError, of } from 'rxjs';
 import { RandomTableService } from '../../services/random-table.service';
@@ -18,7 +18,7 @@ import { DiceRollResult } from '../session-dice-panel/session-dice-panel.compone
  */
 @Component({
     selector: 'app-session-random-tables-panel',
-    imports: [CommonModule, LucideAngularModule],
+    imports: [LucideAngularModule],
     templateUrl: './session-random-tables-panel.component.html',
     styleUrls: ['./session-random-tables-panel.component.scss']
 })
diff --git a/web/src/app/sessions/session-reference-panel/session-reference-panel.component.html b/web/src/app/sessions/session-reference-panel/session-reference-panel.component.html
index ead2338..314bf64 100644
--- a/web/src/app/sessions/session-reference-panel/session-reference-panel.component.html
+++ b/web/src/app/sessions/session-reference-panel/session-reference-panel.component.html
@@ -2,44 +2,44 @@
 
   <nav class="ref-tabs">
     <button type="button"
-            class="ref-tab"
-            [class.ref-tab--active]="activeTab === 'ai'"
-            (click)="selectTab('ai')">
+      class="ref-tab"
+      [class.ref-tab--active]="activeTab === 'ai'"
+      (click)="selectTab('ai')">
       <lucide-icon [img]="Sparkles" [size]="14"></lucide-icon>
       IA
     </button>
     <button type="button"
-            class="ref-tab"
-            [class.ref-tab--active]="activeTab === 'dice'"
-            (click)="selectTab('dice')">
+      class="ref-tab"
+      [class.ref-tab--active]="activeTab === 'dice'"
+      (click)="selectTab('dice')">
       <lucide-icon [img]="Dices" [size]="14"></lucide-icon>
       Dés
     </button>
     <button type="button"
-            class="ref-tab"
-            [class.ref-tab--active]="activeTab === 'tables'"
-            (click)="selectTab('tables')">
+      class="ref-tab"
+      [class.ref-tab--active]="activeTab === 'tables'"
+      (click)="selectTab('tables')">
       <lucide-icon [img]="Table2" [size]="14"></lucide-icon>
       Tables
     </button>
     <button type="button"
-            class="ref-tab"
-            [class.ref-tab--active]="activeTab === 'objects'"
-            (click)="selectTab('objects')">
+      class="ref-tab"
+      [class.ref-tab--active]="activeTab === 'objects'"
+      (click)="selectTab('objects')">
       <lucide-icon [img]="Package" [size]="14"></lucide-icon>
       Objets
     </button>
     <button type="button"
-            class="ref-tab"
-            [class.ref-tab--active]="activeTab === 'characters'"
-            (click)="selectTab('characters')">
+      class="ref-tab"
+      [class.ref-tab--active]="activeTab === 'characters'"
+      (click)="selectTab('characters')">
       <lucide-icon [img]="User" [size]="14"></lucide-icon>
       PJ/PNJ
     </button>
     <button type="button"
-            class="ref-tab"
-            [class.ref-tab--active]="activeTab === 'scenes'"
-            (click)="selectTab('scenes')">
+      class="ref-tab"
+      [class.ref-tab--active]="activeTab === 'scenes'"
+      (click)="selectTab('scenes')">
       <lucide-icon [img]="Swords" [size]="14"></lucide-icon>
       Scènes
     </button>
@@ -48,104 +48,130 @@
   <div class="ref-content" [class.ref-content--fill]="activeTab === 'ai'">
 
     <!-- ====== IA ====== -->
-    <app-session-ai-chat-panel
-      *ngIf="activeTab === 'ai'"
-      [sessionId]="sessionId"
-      [canSaveToJournal]="canAddToJournal"
-      (saveToJournal)="onAiSaveToJournal($event)">
-    </app-session-ai-chat-panel>
+    @if (activeTab === 'ai') {
+      <app-session-ai-chat-panel
+        [sessionId]="sessionId"
+        [canSaveToJournal]="canAddToJournal"
+        (saveToJournal)="onAiSaveToJournal($event)">
+      </app-session-ai-chat-panel>
+    }
 
     <!-- ====== Dés ====== -->
-    <app-session-dice-panel
-      *ngIf="activeTab === 'dice'"
-      [canAddToJournal]="canAddToJournal"
-      (rolled)="onDiceRolled($event)">
-    </app-session-dice-panel>
+    @if (activeTab === 'dice') {
+      <app-session-dice-panel
+        [canAddToJournal]="canAddToJournal"
+        (rolled)="onDiceRolled($event)">
+      </app-session-dice-panel>
+    }
 
     <!-- ====== Tables aléatoires ====== -->
-    <app-session-random-tables-panel
-      *ngIf="activeTab === 'tables'"
-      [campaignId]="campaignId"
-      [canAddToJournal]="canAddToJournal"
-      (rolled)="onDiceRolled($event)"
-      (aiReplyToJournal)="onAiSaveToJournal($event)">
-    </app-session-random-tables-panel>
+    @if (activeTab === 'tables') {
+      <app-session-random-tables-panel
+        [campaignId]="campaignId"
+        [canAddToJournal]="canAddToJournal"
+        (rolled)="onDiceRolled($event)"
+        (aiReplyToJournal)="onAiSaveToJournal($event)">
+      </app-session-random-tables-panel>
+    }
 
     <!-- ====== Catalogues d'objets ====== -->
-    <app-session-item-catalogs-panel
-      *ngIf="activeTab === 'objects'"
-      [campaignId]="campaignId"
-      [canAddToJournal]="canAddToJournal"
-      (noteToJournal)="onItemNote($event)">
-    </app-session-item-catalogs-panel>
+    @if (activeTab === 'objects') {
+      <app-session-item-catalogs-panel
+        [campaignId]="campaignId"
+        [canAddToJournal]="canAddToJournal"
+        (noteToJournal)="onItemNote($event)">
+      </app-session-item-catalogs-panel>
+    }
 
     <!-- ====== Personnages (PJ + PNJ) ====== -->
-    <div *ngIf="activeTab === 'characters'" class="ref-list">
-      <p class="loading-hint" *ngIf="loadingChars">Chargement…</p>
-
-      <div *ngIf="!loadingChars">
-        <div class="ref-group" *ngIf="characters.length > 0">
-          <h4>
-            <lucide-icon [img]="User" [size]="13"></lucide-icon>
-            Personnages joueurs
-          </h4>
-          <button *ngFor="let c of characters"
-                  type="button"
-                  class="ref-item"
-                  (click)="openInNewTab(['campaigns', campaignId, 'playthroughs', playthroughId!, 'characters', c.id!])">
-            <span class="ref-item-name">{{ c.name }}</span>
-            <lucide-icon [img]="ExternalLink" [size]="12" class="ref-item-icon"></lucide-icon>
-          </button>
-        </div>
-
-        <div class="ref-group" *ngIf="npcs.length > 0">
-          <h4>
-            <lucide-icon [img]="Drama" [size]="13"></lucide-icon>
-            Personnages non-joueurs
-          </h4>
-          <button *ngFor="let n of npcs"
-                  type="button"
-                  class="ref-item"
-                  (click)="openInNewTab(['campaigns', campaignId, 'npcs', n.id!])">
-            <span class="ref-item-name">{{ n.name }}</span>
-            <lucide-icon [img]="ExternalLink" [size]="12" class="ref-item-icon"></lucide-icon>
-          </button>
-        </div>
-
-        <p class="empty-hint" *ngIf="characters.length === 0 && npcs.length === 0">
-          Aucun personnage dans cette campagne.
-        </p>
+    @if (activeTab === 'characters') {
+      <div class="ref-list">
+        @if (loadingChars) {
+          <p class="loading-hint">Chargement…</p>
+        }
+        @if (!loadingChars) {
+          <div>
+            @if (characters.length > 0) {
+              <div class="ref-group">
+                <h4>
+                  <lucide-icon [img]="User" [size]="13"></lucide-icon>
+                  Personnages joueurs
+                </h4>
+                @for (c of characters; track c) {
+                  <button
+                    type="button"
+                    class="ref-item"
+                    (click)="openInNewTab(['campaigns', campaignId, 'playthroughs', playthroughId!, 'characters', c.id!])">
+                    <span class="ref-item-name">{{ c.name }}</span>
+                    <lucide-icon [img]="ExternalLink" [size]="12" class="ref-item-icon"></lucide-icon>
+                  </button>
+                }
+              </div>
+            }
+            @if (npcs.length > 0) {
+              <div class="ref-group">
+                <h4>
+                  <lucide-icon [img]="Drama" [size]="13"></lucide-icon>
+                  Personnages non-joueurs
+                </h4>
+                @for (n of npcs; track n) {
+                  <button
+                    type="button"
+                    class="ref-item"
+                    (click)="openInNewTab(['campaigns', campaignId, 'npcs', n.id!])">
+                    <span class="ref-item-name">{{ n.name }}</span>
+                    <lucide-icon [img]="ExternalLink" [size]="12" class="ref-item-icon"></lucide-icon>
+                  </button>
+                }
+              </div>
+            }
+            @if (characters.length === 0 && npcs.length === 0) {
+              <p class="empty-hint">
+                Aucun personnage dans cette campagne.
+              </p>
+            }
+          </div>
+        }
       </div>
-    </div>
+    }
 
     <!-- ====== Scènes (arborescence aplatie) ====== -->
-    <div *ngIf="activeTab === 'scenes'" class="ref-list">
-      <p class="loading-hint" *ngIf="loadingTree">Chargement…</p>
-
-      <ng-container *ngIf="!loadingTree && treeData">
-        <p class="empty-hint" *ngIf="treeData.arcs.length === 0">
-          Aucun arc narratif. Construis le scénario de ta campagne pour le retrouver ici.
-        </p>
-
-        <div *ngFor="let arc of treeData.arcs" class="ref-group">
-          <h4>
-            <lucide-icon [img]="Swords" [size]="13"></lucide-icon>
-            {{ arc.name }}
-          </h4>
-
-          <div *ngFor="let chapter of chaptersOf(arc)" class="ref-subgroup">
-            <span class="ref-subgroup-title">{{ chapter.name }}</span>
-            <button *ngFor="let scene of scenesOf(chapter)"
-                    type="button"
-                    class="ref-item ref-item--nested"
-                    (click)="openInNewTab(['campaigns', campaignId, 'arcs', arc.id!, 'chapters', chapter.id!, 'scenes', scene.id!])">
-              <span class="ref-item-name">{{ scene.name }}</span>
-              <lucide-icon [img]="ExternalLink" [size]="12" class="ref-item-icon"></lucide-icon>
-            </button>
-          </div>
-        </div>
-      </ng-container>
-    </div>
+    @if (activeTab === 'scenes') {
+      <div class="ref-list">
+        @if (loadingTree) {
+          <p class="loading-hint">Chargement…</p>
+        }
+        @if (!loadingTree && treeData) {
+          @if (treeData.arcs.length === 0) {
+            <p class="empty-hint">
+              Aucun arc narratif. Construis le scénario de ta campagne pour le retrouver ici.
+            </p>
+          }
+          @for (arc of treeData.arcs; track arc) {
+            <div class="ref-group">
+              <h4>
+                <lucide-icon [img]="Swords" [size]="13"></lucide-icon>
+                {{ arc.name }}
+              </h4>
+              @for (chapter of chaptersOf(arc); track chapter) {
+                <div class="ref-subgroup">
+                  <span class="ref-subgroup-title">{{ chapter.name }}</span>
+                  @for (scene of scenesOf(chapter); track scene) {
+                    <button
+                      type="button"
+                      class="ref-item ref-item--nested"
+                      (click)="openInNewTab(['campaigns', campaignId, 'arcs', arc.id!, 'chapters', chapter.id!, 'scenes', scene.id!])">
+                      <span class="ref-item-name">{{ scene.name }}</span>
+                      <lucide-icon [img]="ExternalLink" [size]="12" class="ref-item-icon"></lucide-icon>
+                    </button>
+                  }
+                </div>
+              }
+            </div>
+          }
+        }
+      </div>
+    }
 
   </div>
 </div>
diff --git a/web/src/app/sessions/session-reference-panel/session-reference-panel.component.ts b/web/src/app/sessions/session-reference-panel/session-reference-panel.component.ts
index dc1a11c..04ebee7 100644
--- a/web/src/app/sessions/session-reference-panel/session-reference-panel.component.ts
+++ b/web/src/app/sessions/session-reference-panel/session-reference-panel.component.ts
@@ -1,5 +1,5 @@
 import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
-import { CommonModule } from '@angular/common';
+
 import { LucideAngularModule, User, Drama, Swords, Dices, ExternalLink, Sparkles, Table2, Package } from 'lucide-angular';
 import { catchError, of } from 'rxjs';
 import { CampaignService } from '../../services/campaign.service';
@@ -30,7 +30,7 @@ type TabId = 'dice' | 'tables' | 'objects' | 'characters' | 'scenes' | 'ai';
  */
 @Component({
     selector: 'app-session-reference-panel',
-    imports: [CommonModule, LucideAngularModule, SessionDicePanelComponent, SessionAiChatPanelComponent, SessionRandomTablesPanelComponent, SessionItemCatalogsPanelComponent],
+    imports: [LucideAngularModule, SessionDicePanelComponent, SessionAiChatPanelComponent, SessionRandomTablesPanelComponent, SessionItemCatalogsPanelComponent],
     templateUrl: './session-reference-panel.component.html',
     styleUrls: ['./session-reference-panel.component.scss']
 })
diff --git a/web/src/app/settings/ollama-model-manager/ollama-model-manager.component.html b/web/src/app/settings/ollama-model-manager/ollama-model-manager.component.html
index dfdc5b2..ebaeb8c 100644
--- a/web/src/app/settings/ollama-model-manager/ollama-model-manager.component.html
+++ b/web/src/app/settings/ollama-model-manager/ollama-model-manager.component.html
@@ -1,85 +1,109 @@
 <!-- Messages locaux a la gestion des modeles (pull / suppression) -->
-<div *ngIf="errorMessage" class="alert alert-error">
-  <lucide-icon [img]="AlertCircle" [size]="16"></lucide-icon>
-  <span>{{ errorMessage }}</span>
-</div>
-<div *ngIf="successMessage" class="alert alert-success">
-  <lucide-icon [img]="Check" [size]="16"></lucide-icon>
-  <span>{{ successMessage }}</span>
-</div>
+@if (errorMessage) {
+  <div class="alert alert-error">
+    <lucide-icon [img]="AlertCircle" [size]="16"></lucide-icon>
+    <span>{{ errorMessage }}</span>
+  </div>
+}
+@if (successMessage) {
+  <div class="alert alert-success">
+    <lucide-icon [img]="Check" [size]="16"></lucide-icon>
+    <span>{{ successMessage }}</span>
+  </div>
+}
 
 <!-- Liste des modeles installes avec bouton supprimer -->
-<div class="form-row" *ngIf="models.length > 0">
-  <label>Modeles installes</label>
-  <ul class="installed-models">
-    <li *ngFor="let m of models">
-      <span class="model-name">{{ m }}</span>
-      <button type="button" class="btn-icon btn-danger"
-              (click)="deleteModel(m)"
-              [disabled]="deletingModel === m"
-              [title]="'Supprimer ' + m">
-        <lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
-      </button>
-    </li>
-  </ul>
-</div>
+@if (models.length > 0) {
+  <div class="form-row">
+    <label>Modeles installes</label>
+    <ul class="installed-models">
+      @for (m of models; track m) {
+        <li>
+          <span class="model-name">{{ m }}</span>
+          <button type="button" class="btn-icon btn-danger"
+            (click)="deleteModel(m)"
+            [disabled]="deletingModel === m"
+            [title]="'Supprimer ' + m">
+            <lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
+          </button>
+        </li>
+      }
+    </ul>
+  </div>
+}
 
 <!-- Dialog de telechargement de modele -->
-<div class="modal-overlay" *ngIf="pullDialogOpen" (click)="closePullDialog()">
-  <div class="modal-content" (click)="$event.stopPropagation()">
-    <header class="modal-header">
-      <h3>Telecharger un modele Ollama</h3>
-      <button type="button" class="btn-icon" (click)="closePullDialog()" [disabled]="pullInProgress" title="Fermer">
-        <lucide-icon [img]="X" [size]="18"></lucide-icon>
-      </button>
-    </header>
-
-    <div class="modal-body">
-      <div *ngIf="!pullInProgress">
-        <label for="pull-name">Nom du modele</label>
-        <input id="pull-name" type="text" [(ngModel)]="pullModelName"
-               placeholder="ex: gemma4:e4b" autocomplete="off"
-               (keydown.enter)="startPull()">
-
-        <p class="hint">Suggestions :</p>
-        <div class="suggestions">
-          <button type="button" *ngFor="let s of pullSuggestions"
-                  class="suggestion-chip" (click)="selectSuggestion(s)">{{ s }}</button>
-        </div>
-        <p class="hint" style="margin-top: 0.75rem;">
-          La liste complete est sur <a href="https://ollama.com/library" target="_blank" rel="noopener">ollama.com/library</a>.
-        </p>
-      </div>
-
-      <div *ngIf="pullInProgress" class="pull-progress">
-        <div class="pull-status">{{ pullStatus }}</div>
-        <div class="progress-bar" *ngIf="pullTotal > 0">
-          <div class="progress-fill" [style.width.%]="pullPercent"></div>
-        </div>
-        <div class="progress-text" *ngIf="pullTotal > 0">
-          {{ formatBytes(pullCompleted) }} / {{ formatBytes(pullTotal) }} ({{ pullPercent }}%)
-        </div>
-        <div class="progress-text" *ngIf="pullTotal === 0">
-          Preparation...
-        </div>
+@if (pullDialogOpen) {
+  <div class="modal-overlay" (click)="closePullDialog()">
+    <div class="modal-content" (click)="$event.stopPropagation()">
+      <header class="modal-header">
+        <h3>Telecharger un modele Ollama</h3>
+        <button type="button" class="btn-icon" (click)="closePullDialog()" [disabled]="pullInProgress" title="Fermer">
+          <lucide-icon [img]="X" [size]="18"></lucide-icon>
+        </button>
+      </header>
+      <div class="modal-body">
+        @if (!pullInProgress) {
+          <div>
+            <label for="pull-name">Nom du modele</label>
+            <input id="pull-name" type="text" [(ngModel)]="pullModelName"
+              placeholder="ex: gemma4:e4b" autocomplete="off"
+              (keydown.enter)="startPull()">
+            <p class="hint">Suggestions :</p>
+            <div class="suggestions">
+              @for (s of pullSuggestions; track s) {
+                <button type="button"
+                class="suggestion-chip" (click)="selectSuggestion(s)">{{ s }}</button>
+              }
+            </div>
+            <p class="hint" style="margin-top: 0.75rem;">
+              La liste complete est sur <a href="https://ollama.com/library" target="_blank" rel="noopener">ollama.com/library</a>.
+            </p>
+          </div>
+        }
+        @if (pullInProgress) {
+          <div class="pull-progress">
+            <div class="pull-status">{{ pullStatus }}</div>
+            @if (pullTotal > 0) {
+              <div class="progress-bar">
+                <div class="progress-fill" [style.width.%]="pullPercent"></div>
+              </div>
+            }
+            @if (pullTotal > 0) {
+              <div class="progress-text">
+                {{ formatBytes(pullCompleted) }} / {{ formatBytes(pullTotal) }} ({{ pullPercent }}%)
+              </div>
+            }
+            @if (pullTotal === 0) {
+              <div class="progress-text">
+                Preparation...
+              </div>
+            }
+          </div>
+        }
       </div>
+      <footer class="modal-footer">
+        @if (pullInProgress) {
+          <button type="button" class="btn-secondary"
+            (click)="cancelPull()">
+            Annuler
+          </button>
+        }
+        @if (!pullInProgress) {
+          <button type="button" class="btn-secondary"
+            (click)="closePullDialog()">
+            Fermer
+          </button>
+        }
+        @if (!pullInProgress) {
+          <button type="button" class="btn-primary"
+            (click)="startPull()"
+            [disabled]="pullInProgress || !pullModelName.trim()">
+            <lucide-icon [img]="Download" [size]="14"></lucide-icon>
+            <span>Telecharger</span>
+          </button>
+        }
+      </footer>
     </div>
-
-    <footer class="modal-footer">
-      <button type="button" class="btn-secondary"
-              (click)="cancelPull()" *ngIf="pullInProgress">
-        Annuler
-      </button>
-      <button type="button" class="btn-secondary"
-              (click)="closePullDialog()" *ngIf="!pullInProgress">
-        Fermer
-      </button>
-      <button type="button" class="btn-primary"
-              (click)="startPull()"
-              [disabled]="pullInProgress || !pullModelName.trim()" *ngIf="!pullInProgress">
-        <lucide-icon [img]="Download" [size]="14"></lucide-icon>
-        <span>Telecharger</span>
-      </button>
-    </footer>
   </div>
-</div>
+}
diff --git a/web/src/app/settings/ollama-model-manager/ollama-model-manager.component.ts b/web/src/app/settings/ollama-model-manager/ollama-model-manager.component.ts
index f74941a..b5060e9 100644
--- a/web/src/app/settings/ollama-model-manager/ollama-model-manager.component.ts
+++ b/web/src/app/settings/ollama-model-manager/ollama-model-manager.component.ts
@@ -1,6 +1,6 @@
 import { Component, EventEmitter, Input, OnDestroy, Output } from '@angular/core';
 import { Subscription } from 'rxjs';
-import { CommonModule } from '@angular/common';
+
 import { FormsModule } from '@angular/forms';
 import { LucideAngularModule, Check, AlertCircle, Download, Trash2, X } from 'lucide-angular';
 import { SettingsService, OllamaPullEvent } from '../../services/settings.service';
@@ -19,7 +19,7 @@ import { ConfirmDialogService } from '../../shared/confirm-dialog/confirm-dialog
  */
 @Component({
     selector: 'app-ollama-model-manager',
-    imports: [CommonModule, FormsModule, LucideAngularModule],
+    imports: [FormsModule, LucideAngularModule],
     templateUrl: './ollama-model-manager.component.html',
     // Reutilise la feuille de style de l'ecran Parametres (modal, suggestions,
     // progress-bar, installed-models) pour un rendu strictement identique.
diff --git a/web/src/app/settings/settings.component.html b/web/src/app/settings/settings.component.html
index 333750b..e9cf63f 100644
--- a/web/src/app/settings/settings.component.html
+++ b/web/src/app/settings/settings.component.html
@@ -8,373 +8,417 @@
     <h1>Parametres</h1>
   </header>
 
-  <div *ngIf="errorMessage" class="alert alert-error">
-    <lucide-icon [img]="AlertCircle" [size]="16"></lucide-icon>
-    <span>{{ errorMessage }}</span>
-  </div>
-  <div *ngIf="successMessage" class="alert alert-success">
-    <lucide-icon [img]="Check" [size]="16"></lucide-icon>
-    <span>{{ successMessage }}</span>
-  </div>
-
-  <section class="card" *ngIf="settings">
-    <h2>Moteur IA</h2>
-    <p class="hint">Choix du fournisseur de modele de langage utilise par le chat et la generation de pages.</p>
-
-    <div class="form-row">
-      <label>Fournisseur</label>
-      <div class="radio-group">
-        <label class="radio">
-          <input type="radio" name="provider" value="ollama" [(ngModel)]="settings.llm_provider">
-          <span>Ollama (local)</span>
-        </label>
-        <label class="radio">
-          <input type="radio" name="provider" value="onemin" [(ngModel)]="settings.llm_provider">
-          <span>1min.ai (cloud)</span>
-        </label>
-        <label class="radio">
-          <input type="radio" name="provider" value="openrouter" [(ngModel)]="settings.llm_provider">
-          <span>OpenRouter (cloud)</span>
-        </label>
-        <label class="radio">
-          <input type="radio" name="provider" value="mistral" [(ngModel)]="settings.llm_provider">
-          <span>Mistral (cloud)</span>
-        </label>
-        <label class="radio">
-          <input type="radio" name="provider" value="gemini" [(ngModel)]="settings.llm_provider">
-          <span>Gemini (cloud)</span>
-        </label>
-      </div>
+  @if (errorMessage) {
+    <div class="alert alert-error">
+      <lucide-icon [img]="AlertCircle" [size]="16"></lucide-icon>
+      <span>{{ errorMessage }}</span>
     </div>
-  </section>
+  }
+  @if (successMessage) {
+    <div class="alert alert-success">
+      <lucide-icon [img]="Check" [size]="16"></lucide-icon>
+      <span>{{ successMessage }}</span>
+    </div>
+  }
+
+  @if (settings) {
+    <section class="card">
+      <h2>Moteur IA</h2>
+      <p class="hint">Choix du fournisseur de modele de langage utilise par le chat et la generation de pages.</p>
+      <div class="form-row">
+        <label>Fournisseur</label>
+        <div class="radio-group">
+          <label class="radio">
+            <input type="radio" name="provider" value="ollama" [(ngModel)]="settings.llm_provider">
+            <span>Ollama (local)</span>
+          </label>
+          <label class="radio">
+            <input type="radio" name="provider" value="onemin" [(ngModel)]="settings.llm_provider">
+            <span>1min.ai (cloud)</span>
+          </label>
+          <label class="radio">
+            <input type="radio" name="provider" value="openrouter" [(ngModel)]="settings.llm_provider">
+            <span>OpenRouter (cloud)</span>
+          </label>
+          <label class="radio">
+            <input type="radio" name="provider" value="mistral" [(ngModel)]="settings.llm_provider">
+            <span>Mistral (cloud)</span>
+          </label>
+          <label class="radio">
+            <input type="radio" name="provider" value="gemini" [(ngModel)]="settings.llm_provider">
+            <span>Gemini (cloud)</span>
+          </label>
+        </div>
+      </div>
+    </section>
+  }
 
   <!-- Bloc Ollama -->
-  <section class="card" *ngIf="settings && settings.llm_provider === 'ollama'">
-    <h2>Configuration Ollama</h2>
-
-    <div class="form-row">
-      <label for="ollama-url">URL du serveur Ollama</label>
-      <input id="ollama-url" type="text" [(ngModel)]="settings.ollama_base_url" placeholder="http://localhost:11434">
-    </div>
-
-    <div class="form-row">
-      <label for="ollama-model">Modele</label>
-      <div class="inline-select">
-        <select id="ollama-model" [(ngModel)]="settings.llm_model" (ngModelChange)="fetchOllamaModelInfo()">
-          <option *ngIf="ollamaModels.length === 0" [value]="settings.llm_model">{{ settings.llm_model }}</option>
-          <option *ngFor="let m of ollamaModels" [value]="m">{{ m }}</option>
-        </select>
-        <button type="button" class="btn-secondary" (click)="refreshModels()" [disabled]="loadingModels">
-          <lucide-icon [img]="RefreshCw" [size]="14"></lucide-icon>
-          <span>{{ loadingModels ? 'Chargement...' : 'Actualiser' }}</span>
-        </button>
-        <button type="button" class="btn-secondary" (click)="modelManager.openPullDialog()">
-          <lucide-icon [img]="Plus" [size]="14"></lucide-icon>
-          <span>Telecharger</span>
-        </button>
+  @if (settings && settings.llm_provider === 'ollama') {
+    <section class="card">
+      <h2>Configuration Ollama</h2>
+      <div class="form-row">
+        <label for="ollama-url">URL du serveur Ollama</label>
+        <input id="ollama-url" type="text" [(ngModel)]="settings.ollama_base_url" placeholder="http://localhost:11434">
       </div>
-      <p class="hint" *ngIf="ollamaModels.length === 0">Aucun modele detecte. Verifie que Ollama tourne et que l'URL est correcte.</p>
-    </div>
-
-    <!-- Gestion des modeles installes (liste + suppression + dialog de pull) -->
-    <app-ollama-model-manager
-      #modelManager
-      [models]="ollamaModels"
-      (modelsChanged)="refreshModels()"
-      (modelPulled)="onModelPulled($event)"
-      (modelDeleted)="onModelDeleted($event)">
-    </app-ollama-model-manager>
-  </section>
+      <div class="form-row">
+        <label for="ollama-model">Modele</label>
+        <div class="inline-select">
+          <select id="ollama-model" [(ngModel)]="settings.llm_model" (ngModelChange)="fetchOllamaModelInfo()">
+            @if (ollamaModels.length === 0) {
+              <option [value]="settings.llm_model">{{ settings.llm_model }}</option>
+            }
+            @for (m of ollamaModels; track m) {
+              <option [value]="m">{{ m }}</option>
+            }
+          </select>
+          <button type="button" class="btn-secondary" (click)="refreshModels()" [disabled]="loadingModels">
+            <lucide-icon [img]="RefreshCw" [size]="14"></lucide-icon>
+            <span>{{ loadingModels ? 'Chargement...' : 'Actualiser' }}</span>
+          </button>
+          <button type="button" class="btn-secondary" (click)="modelManager.openPullDialog()">
+            <lucide-icon [img]="Plus" [size]="14"></lucide-icon>
+            <span>Telecharger</span>
+          </button>
+        </div>
+        @if (ollamaModels.length === 0) {
+          <p class="hint">Aucun modele detecte. Verifie que Ollama tourne et que l'URL est correcte.</p>
+        }
+      </div>
+      <!-- Gestion des modeles installes (liste + suppression + dialog de pull) -->
+      <app-ollama-model-manager
+        #modelManager
+        [models]="ollamaModels"
+        (modelsChanged)="refreshModels()"
+        (modelPulled)="onModelPulled($event)"
+        (modelDeleted)="onModelDeleted($event)">
+      </app-ollama-model-manager>
+    </section>
+  }
 
   <!-- Bloc 1min.ai -->
-  <section class="card" *ngIf="settings && settings.llm_provider === 'onemin'">
-    <h2>Configuration 1min.ai</h2>
-
-    <div class="form-row">
-      <label for="onemin-key">Cle API</label>
-      <input
-        id="onemin-key"
-        type="password"
-        [(ngModel)]="oneminApiKeyInput"
-        [placeholder]="settings.onemin_api_key_set ? 'Cle configuree (laisser vide pour ne pas changer)' : 'Saisir votre cle API'">
-      <label class="checkbox" *ngIf="settings.onemin_api_key_set">
-        <input type="checkbox" [(ngModel)]="clearApiKey">
-        <span>Effacer la cle enregistree</span>
-      </label>
-    </div>
-
-    <div class="form-row">
-      <label for="onemin-provider">Fournisseur</label>
-      <select id="onemin-provider" [(ngModel)]="oneminProvider" (ngModelChange)="onProviderChange()">
-        <option *ngFor="let g of oneminGroups" [value]="g.provider">{{ g.provider }}</option>
-      </select>
-    </div>
-
-    <div class="form-row">
-      <label for="onemin-model">Modele</label>
-      <select id="onemin-model" [(ngModel)]="settings.onemin_model">
-        <option *ngFor="let m of currentProviderModels" [value]="m">{{ m }}</option>
-      </select>
-    </div>
-  </section>
-
-  <!-- Bloc OpenRouter -->
-  <section class="card" *ngIf="settings && settings.llm_provider === 'openrouter'">
-    <h2>Configuration OpenRouter</h2>
-
-    <div class="form-row">
-      <label for="openrouter-key">Cle API</label>
-      <input
-        id="openrouter-key"
-        type="password"
-        [(ngModel)]="openrouterApiKeyInput"
-        [placeholder]="settings.openrouter_api_key_set ? 'Cle configuree (laisser vide pour ne pas changer)' : 'Saisir votre cle API (sk-or-...)'">
-      <label class="checkbox" *ngIf="settings.openrouter_api_key_set">
-        <input type="checkbox" [(ngModel)]="clearOpenrouterKey">
-        <span>Effacer la cle enregistree</span>
-      </label>
-    </div>
-
-    <div class="form-row">
-      <label for="openrouter-model">Modele</label>
-      <label class="checkbox">
-        <input type="checkbox" [(ngModel)]="openrouterFreeOnly">
-        <span>Gratuits seulement</span>
-      </label>
-      <select id="openrouter-model" [(ngModel)]="settings.openrouter_model">
-        <option *ngFor="let o of openrouterSelectOptions" [value]="o.id">{{ o.label }}</option>
-      </select>
-      <p class="hint">
-        Liste chargee automatiquement depuis OpenRouter. Pour rester <strong>gratuit</strong> :
-        un modele marque <code>· gratuit</code> ou le routeur <code>openrouter/free</code>
-        (choisit un modele gratuit tout seul). Pour les imports, prefere un gratuit a
-        <strong>grand contexte</strong> (valeur « ctx »).
-      </p>
-    </div>
-  </section>
-
-  <!-- Bloc Mistral -->
-  <section class="card" *ngIf="settings && settings.llm_provider === 'mistral'">
-    <h2>Configuration Mistral</h2>
-
-    <div class="form-row">
-      <label for="mistral-key">Cle API</label>
-      <input
-        id="mistral-key"
-        type="password"
-        [(ngModel)]="mistralApiKeyInput"
-        [placeholder]="settings.mistral_api_key_set ? 'Cle configuree (laisser vide pour ne pas changer)' : 'Saisir votre cle API Mistral'">
-      <label class="checkbox" *ngIf="settings.mistral_api_key_set">
-        <input type="checkbox" [(ngModel)]="clearMistralKey">
-        <span>Effacer la cle enregistree</span>
-      </label>
-    </div>
-
-    <div class="form-row">
-      <label for="mistral-model">Modele</label>
-      <select id="mistral-model" [(ngModel)]="settings.mistral_model">
-        <option *ngFor="let o of mistralSelectOptions" [value]="o.id">{{ o.label }}</option>
-      </select>
-      <p class="hint">
-        Cle gratuite sur <code>console.mistral.ai</code> (tier « Experiment », sans CB).
-        Pour les imports, prefere <code>mistral-large-latest</code> (128k contexte, fidele
-        et bon en francais) ou <code>mistral-small-latest</code> (plus rapide).
-      </p>
-    </div>
-  </section>
-
-  <!-- Bloc Gemini -->
-  <section class="card" *ngIf="settings && settings.llm_provider === 'gemini'">
-    <h2>Configuration Gemini</h2>
-
-    <div class="form-row">
-      <label for="gemini-key">Cle API</label>
-      <input
-        id="gemini-key"
-        type="password"
-        [(ngModel)]="geminiApiKeyInput"
-        [placeholder]="settings.gemini_api_key_set ? 'Cle configuree (laisser vide pour ne pas changer)' : 'Saisir votre cle API Gemini'">
-      <label class="checkbox" *ngIf="settings.gemini_api_key_set">
-        <input type="checkbox" [(ngModel)]="clearGeminiKey">
-        <span>Effacer la cle enregistree</span>
-      </label>
-    </div>
-
-    <div class="form-row">
-      <label for="gemini-model">Modele</label>
-      <select id="gemini-model" [(ngModel)]="settings.gemini_model">
-        <option *ngFor="let o of geminiSelectOptions" [value]="o.id">{{ o.label }}</option>
-      </select>
-      <p class="hint">
-        Cle gratuite sur <code>aistudio.google.com</code> (sans CB). Ideal pour les imports :
-        <code>gemini-2.0-flash</code> a un <strong>contexte ~1M</strong> → un livre entier tient
-        en 1-2 appels (plus de morceaux perdus). Pense a monter la <strong>taille des morceaux</strong>
-        d'import pour en profiter.
-      </p>
-    </div>
-  </section>
-
-  <!-- Bloc Embeddings (Atelier RAG) : indépendant du modèle de CHAT ci-dessus. -->
-  <section class="card" *ngIf="settings">
-    <h2>Embeddings (Atelier RAG)</h2>
-    <p class="hint">
-      Modèle utilisé pour <strong>indexer les sources PDF</strong> des ateliers et y faire
-      de la recherche. C'est un modèle <strong>séparé</strong> du modèle de chat ci-dessus.
-    </p>
-
-    <div class="form-row">
-      <label>Fournisseur d'embeddings</label>
-      <div class="radio-group">
-        <label class="radio">
-          <input type="radio" name="embprovider" value="ollama" [(ngModel)]="settings.embedding_provider">
-          <span>Ollama (local, gratuit)</span>
-        </label>
-        <label class="radio">
-          <input type="radio" name="embprovider" value="mistral" [(ngModel)]="settings.embedding_provider">
-          <span>Mistral (cloud, EU)</span>
-        </label>
-      </div>
-    </div>
-
-    <!-- Ollama embeddings -->
-    <div *ngIf="settings.embedding_provider === 'ollama'">
+  @if (settings && settings.llm_provider === 'onemin') {
+    <section class="card">
+      <h2>Configuration 1min.ai</h2>
       <div class="form-row">
-        <label for="emb-ollama-model">Modèle d'embedding Ollama</label>
-        <input id="emb-ollama-model" type="text" [(ngModel)]="settings.ollama_embedding_model"
-               placeholder="nomic-embed-text">
-        <p class="hint">
-          Recommandé : <code>nomic-embed-text</code> (léger). Gratuit et illimité (local).
-        </p>
-      </div>
-      <div class="form-row">
-        <label class="checkbox">
-          <input type="checkbox" [(ngModel)]="settings.auto_pull_embedding_model">
-          <span>Installer automatiquement le modèle au démarrage s'il manque</span>
-        </label>
-      </div>
-    </div>
+        <label for="onemin-key">Cle API</label>
+        <input
+          id="onemin-key"
+          type="password"
+          [(ngModel)]="oneminApiKeyInput"
+          [placeholder]="settings.onemin_api_key_set ? 'Cle configuree (laisser vide pour ne pas changer)' : 'Saisir votre cle API'">
+          @if (settings.onemin_api_key_set) {
+            <label class="checkbox">
+              <input type="checkbox" [(ngModel)]="clearApiKey">
+              <span>Effacer la cle enregistree</span>
+            </label>
+          }
+        </div>
+        <div class="form-row">
+          <label for="onemin-provider">Fournisseur</label>
+          <select id="onemin-provider" [(ngModel)]="oneminProvider" (ngModelChange)="onProviderChange()">
+            @for (g of oneminGroups; track g) {
+              <option [value]="g.provider">{{ g.provider }}</option>
+            }
+          </select>
+        </div>
+        <div class="form-row">
+          <label for="onemin-model">Modele</label>
+          <select id="onemin-model" [(ngModel)]="settings.onemin_model">
+            @for (m of currentProviderModels; track m) {
+              <option [value]="m">{{ m }}</option>
+            }
+          </select>
+        </div>
+      </section>
+    }
 
-    <div class="form-row">
-      <label for="rag-topk">Extraits récupérés par question (couverture RAG)</label>
-      <input id="rag-topk" type="number" min="3" max="200" [(ngModel)]="settings.rag_top_k">
-      <p class="hint">
-        Plus haut = l'IA voit plus de passages par question (mieux pour les questions
-        larges « liste les… »), mais prompt plus long. Défaut 8. Avec un modèle
-        <strong>gros-contexte</strong> (Gemini), tu peux monter à <strong>50-150</strong> pour
-        une couverture quasi « document entier ». Pour les questions exhaustives, préfère
-        le bouton <strong>« Analyse approfondie »</strong> de l'atelier.
-      </p>
-    </div>
+    <!-- Bloc OpenRouter -->
+    @if (settings && settings.llm_provider === 'openrouter') {
+      <section class="card">
+        <h2>Configuration OpenRouter</h2>
+        <div class="form-row">
+          <label for="openrouter-key">Cle API</label>
+          <input
+            id="openrouter-key"
+            type="password"
+            [(ngModel)]="openrouterApiKeyInput"
+            [placeholder]="settings.openrouter_api_key_set ? 'Cle configuree (laisser vide pour ne pas changer)' : 'Saisir votre cle API (sk-or-...)'">
+            @if (settings.openrouter_api_key_set) {
+              <label class="checkbox">
+                <input type="checkbox" [(ngModel)]="clearOpenrouterKey">
+                <span>Effacer la cle enregistree</span>
+              </label>
+            }
+          </div>
+          <div class="form-row">
+            <label for="openrouter-model">Modele</label>
+            <label class="checkbox">
+              <input type="checkbox" [(ngModel)]="openrouterFreeOnly">
+              <span>Gratuits seulement</span>
+            </label>
+            <select id="openrouter-model" [(ngModel)]="settings.openrouter_model">
+              @for (o of openrouterSelectOptions; track o) {
+                <option [value]="o.id">{{ o.label }}</option>
+              }
+            </select>
+            <p class="hint">
+              Liste chargee automatiquement depuis OpenRouter. Pour rester <strong>gratuit</strong> :
+              un modele marque <code>· gratuit</code> ou le routeur <code>openrouter/free</code>
+              (choisit un modele gratuit tout seul). Pour les imports, prefere un gratuit a
+              <strong>grand contexte</strong> (valeur « ctx »).
+            </p>
+          </div>
+        </section>
+      }
 
-    <!-- Mistral embeddings -->
-    <div *ngIf="settings.embedding_provider === 'mistral'">
-      <div class="form-row">
-        <label for="emb-mistral-key">
-          Clé API Mistral
-          <span class="key-state" *ngIf="settings.mistral_api_key_set">✓ configurée</span>
-        </label>
-        <input id="emb-mistral-key" type="password" [(ngModel)]="mistralApiKeyInput"
-               [placeholder]="settings.mistral_api_key_set ? 'Clé configurée (laisser vide pour ne pas changer)' : 'Saisir votre clé API Mistral'">
-        <label class="checkbox" *ngIf="settings.mistral_api_key_set">
-          <input type="checkbox" [(ngModel)]="clearMistralKey">
-          <span>Effacer la clé enregistrée</span>
-        </label>
-        <p class="hint">
-          C'est la <strong>même clé</strong> que pour le chat Mistral (une seule clé partagée).
-          Soumis au rate limit du tier gratuit.
-        </p>
-      </div>
-      <div class="form-row">
-        <label for="emb-mistral-model">Modèle d'embedding Mistral</label>
-        <input id="emb-mistral-model" type="text" [(ngModel)]="settings.mistral_embedding_model"
-               placeholder="mistral-embed">
-      </div>
-    </div>
-  </section>
+      <!-- Bloc Mistral -->
+      @if (settings && settings.llm_provider === 'mistral') {
+        <section class="card">
+          <h2>Configuration Mistral</h2>
+          <div class="form-row">
+            <label for="mistral-key">Cle API</label>
+            <input
+              id="mistral-key"
+              type="password"
+              [(ngModel)]="mistralApiKeyInput"
+              [placeholder]="settings.mistral_api_key_set ? 'Cle configuree (laisser vide pour ne pas changer)' : 'Saisir votre cle API Mistral'">
+              @if (settings.mistral_api_key_set) {
+                <label class="checkbox">
+                  <input type="checkbox" [(ngModel)]="clearMistralKey">
+                  <span>Effacer la cle enregistree</span>
+                </label>
+              }
+            </div>
+            <div class="form-row">
+              <label for="mistral-model">Modele</label>
+              <select id="mistral-model" [(ngModel)]="settings.mistral_model">
+                @for (o of mistralSelectOptions; track o) {
+                  <option [value]="o.id">{{ o.label }}</option>
+                }
+              </select>
+              <p class="hint">
+                Cle gratuite sur <code>console.mistral.ai</code> (tier « Experiment », sans CB).
+                Pour les imports, prefere <code>mistral-large-latest</code> (128k contexte, fidele
+                et bon en francais) ou <code>mistral-small-latest</code> (plus rapide).
+              </p>
+            </div>
+          </section>
+        }
 
-  <!-- Bloc Fenetre de contexte : seulement pour Ollama (num_ctx est un vrai
-       parametre du modele local). Pour le cloud (1min/OpenRouter), on ne fixe rien :
-       on utilise ce que le modele accepte, et la jauge du chat s'affiche sans max. -->
-  <section class="card" *ngIf="settings && settings.llm_provider === 'ollama'">
-    <h2>Fenetre de contexte</h2>
+        <!-- Bloc Gemini -->
+        @if (settings && settings.llm_provider === 'gemini') {
+          <section class="card">
+            <h2>Configuration Gemini</h2>
+            <div class="form-row">
+              <label for="gemini-key">Cle API</label>
+              <input
+                id="gemini-key"
+                type="password"
+                [(ngModel)]="geminiApiKeyInput"
+                [placeholder]="settings.gemini_api_key_set ? 'Cle configuree (laisser vide pour ne pas changer)' : 'Saisir votre cle API Gemini'">
+                @if (settings.gemini_api_key_set) {
+                  <label class="checkbox">
+                    <input type="checkbox" [(ngModel)]="clearGeminiKey">
+                    <span>Effacer la cle enregistree</span>
+                  </label>
+                }
+              </div>
+              <div class="form-row">
+                <label for="gemini-model">Modele</label>
+                <select id="gemini-model" [(ngModel)]="settings.gemini_model">
+                  @for (o of geminiSelectOptions; track o) {
+                    <option [value]="o.id">{{ o.label }}</option>
+                  }
+                </select>
+                <p class="hint">
+                  Cle gratuite sur <code>aistudio.google.com</code> (sans CB). Ideal pour les imports :
+                  <code>gemini-2.0-flash</code> a un <strong>contexte ~1M</strong> → un livre entier tient
+                  en 1-2 appels (plus de morceaux perdus). Pense a monter la <strong>taille des morceaux</strong>
+                  d'import pour en profiter.
+                </p>
+              </div>
+            </section>
+          }
 
-    <!-- Ollama : slider borne par le max du modele -->
-    <div class="form-row" *ngIf="settings.llm_provider === 'ollama'">
-      <label for="llm-num-ctx">
-        Tokens alloues au modele
-        <span class="ctx-value">{{ settings.llm_num_ctx | number }}</span>
-        <span class="ctx-max" *ngIf="ollamaModelMaxContext > 0">
-          / {{ ollamaModelMaxContext | number }} max
-        </span>
-      </label>
-      <input
-        id="llm-num-ctx"
-        type="range"
-        [min]="CTX_MIN"
-        [max]="effectiveMaxContext"
-        step="1024"
-        [(ngModel)]="settings.llm_num_ctx"
-        class="ctx-slider">
-      <p class="hint" *ngIf="ollamaModelMaxContext > 0">
-        Le modele <strong>{{ settings.llm_model }}</strong> accepte jusqu'a
-        {{ ollamaModelMaxContext | number }} tokens. Plus la valeur est elevee, plus
-        l'IA peut tenir d'historique et de contexte — au prix de VRAM et de latence.
-      </p>
-      <p class="hint" *ngIf="ollamaModelMaxContext === 0">
-        Impossible de determiner la fenetre max du modele (Ollama injoignable ou modele
-        inconnu). Slider borne a {{ CTX_FALLBACK_MAX | number }} par securite.
-      </p>
-    </div>
+          <!-- Bloc Embeddings (Atelier RAG) : indépendant du modèle de CHAT ci-dessus. -->
+          @if (settings) {
+            <section class="card">
+              <h2>Embeddings (Atelier RAG)</h2>
+              <p class="hint">
+                Modèle utilisé pour <strong>indexer les sources PDF</strong> des ateliers et y faire
+                de la recherche. C'est un modèle <strong>séparé</strong> du modèle de chat ci-dessus.
+              </p>
+              <div class="form-row">
+                <label>Fournisseur d'embeddings</label>
+                <div class="radio-group">
+                  <label class="radio">
+                    <input type="radio" name="embprovider" value="ollama" [(ngModel)]="settings.embedding_provider">
+                    <span>Ollama (local, gratuit)</span>
+                  </label>
+                  <label class="radio">
+                    <input type="radio" name="embprovider" value="mistral" [(ngModel)]="settings.embedding_provider">
+                    <span>Mistral (cloud, EU)</span>
+                  </label>
+                </div>
+              </div>
+              <!-- Ollama embeddings -->
+              @if (settings.embedding_provider === 'ollama') {
+                <div>
+                  <div class="form-row">
+                    <label for="emb-ollama-model">Modèle d'embedding Ollama</label>
+                    <input id="emb-ollama-model" type="text" [(ngModel)]="settings.ollama_embedding_model"
+                      placeholder="nomic-embed-text">
+                      <p class="hint">
+                        Recommandé : <code>nomic-embed-text</code> (léger). Gratuit et illimité (local).
+                      </p>
+                    </div>
+                    <div class="form-row">
+                      <label class="checkbox">
+                        <input type="checkbox" [(ngModel)]="settings.auto_pull_embedding_model">
+                        <span>Installer automatiquement le modèle au démarrage s'il manque</span>
+                      </label>
+                    </div>
+                  </div>
+                }
+                <div class="form-row">
+                  <label for="rag-topk">Extraits récupérés par question (couverture RAG)</label>
+                  <input id="rag-topk" type="number" min="3" max="200" [(ngModel)]="settings.rag_top_k">
+                  <p class="hint">
+                    Plus haut = l'IA voit plus de passages par question (mieux pour les questions
+                    larges « liste les… »), mais prompt plus long. Défaut 8. Avec un modèle
+                    <strong>gros-contexte</strong> (Gemini), tu peux monter à <strong>50-150</strong> pour
+                    une couverture quasi « document entier ». Pour les questions exhaustives, préfère
+                    le bouton <strong>« Analyse approfondie »</strong> de l'atelier.
+                  </p>
+                </div>
+                <!-- Mistral embeddings -->
+                @if (settings.embedding_provider === 'mistral') {
+                  <div>
+                    <div class="form-row">
+                      <label for="emb-mistral-key">
+                        Clé API Mistral
+                        @if (settings.mistral_api_key_set) {
+                          <span class="key-state">✓ configurée</span>
+                        }
+                      </label>
+                      <input id="emb-mistral-key" type="password" [(ngModel)]="mistralApiKeyInput"
+                        [placeholder]="settings.mistral_api_key_set ? 'Clé configurée (laisser vide pour ne pas changer)' : 'Saisir votre clé API Mistral'">
+                        @if (settings.mistral_api_key_set) {
+                          <label class="checkbox">
+                            <input type="checkbox" [(ngModel)]="clearMistralKey">
+                            <span>Effacer la clé enregistrée</span>
+                          </label>
+                        }
+                        <p class="hint">
+                          C'est la <strong>même clé</strong> que pour le chat Mistral (une seule clé partagée).
+                          Soumis au rate limit du tier gratuit.
+                        </p>
+                      </div>
+                      <div class="form-row">
+                        <label for="emb-mistral-model">Modèle d'embedding Mistral</label>
+                        <input id="emb-mistral-model" type="text" [(ngModel)]="settings.mistral_embedding_model"
+                          placeholder="mistral-embed">
+                        </div>
+                      </div>
+                    }
+                  </section>
+                }
 
-  </section>
+                <!-- Bloc Fenetre de contexte : seulement pour Ollama (num_ctx est un vrai
+                parametre du modele local). Pour le cloud (1min/OpenRouter), on ne fixe rien :
+                on utilise ce que le modele accepte, et la jauge du chat s'affiche sans max. -->
+                @if (settings && settings.llm_provider === 'ollama') {
+                  <section class="card">
+                    <h2>Fenetre de contexte</h2>
+                    <!-- Ollama : slider borne par le max du modele -->
+                    @if (settings.llm_provider === 'ollama') {
+                      <div class="form-row">
+                        <label for="llm-num-ctx">
+                          Tokens alloues au modele
+                          <span class="ctx-value">{{ settings.llm_num_ctx | number }}</span>
+                          @if (ollamaModelMaxContext > 0) {
+                            <span class="ctx-max">
+                              / {{ ollamaModelMaxContext | number }} max
+                            </span>
+                          }
+                        </label>
+                        <input
+                          id="llm-num-ctx"
+                          type="range"
+                          [min]="CTX_MIN"
+                          [max]="effectiveMaxContext"
+                          step="1024"
+                          [(ngModel)]="settings.llm_num_ctx"
+                          class="ctx-slider">
+                          @if (ollamaModelMaxContext > 0) {
+                            <p class="hint">
+                              Le modele <strong>{{ settings.llm_model }}</strong> accepte jusqu'a
+                              {{ ollamaModelMaxContext | number }} tokens. Plus la valeur est elevee, plus
+                              l'IA peut tenir d'historique et de contexte — au prix de VRAM et de latence.
+                            </p>
+                          }
+                          @if (ollamaModelMaxContext === 0) {
+                            <p class="hint">
+                              Impossible de determiner la fenetre max du modele (Ollama injoignable ou modele
+                              inconnu). Slider borne a {{ CTX_FALLBACK_MAX | number }} par securite.
+                            </p>
+                          }
+                        </div>
+                      }
+                    </section>
+                  }
 
-  <!-- Bloc Import de PDF -->
-  <section class="card" *ngIf="settings">
-    <h2>Import de PDF</h2>
-    <div class="form-row">
-      <label for="import-chunk-tokens">Taille des morceaux a l'import (tokens)</label>
-      <input
-        id="import-chunk-tokens"
-        type="number"
-        min="2000"
-        step="1000"
-        [(ngModel)]="settings.import_chunk_tokens">
-      <p class="hint">
-        Lors de l'import d'un PDF (regles ou campagne), le texte est decoupe en morceaux
-        de cette taille avant d'etre analyse par l'IA. <strong>Plus gros = moins de morceaux</strong>,
-        donc plus rapide et moins de fragmentation/doublons — mais le morceau doit tenir dans
-        la fenetre du modele.
-        <br />
-        Repere : ~10 000 pour Ollama (16k de contexte) ; jusqu'a ~100 000 pour un modele a
-        grand contexte (ex : GPT-5 mini, 400k) afin de traiter un livre entier en une seule passe.
-        Attention : un gros morceau = generation plus longue (voir le timeout ci-dessous).
-      </p>
-    </div>
+                  <!-- Bloc Import de PDF -->
+                  @if (settings) {
+                    <section class="card">
+                      <h2>Import de PDF</h2>
+                      <div class="form-row">
+                        <label for="import-chunk-tokens">Taille des morceaux a l'import (tokens)</label>
+                        <input
+                          id="import-chunk-tokens"
+                          type="number"
+                          min="2000"
+                          step="1000"
+                          [(ngModel)]="settings.import_chunk_tokens">
+                          <p class="hint">
+                            Lors de l'import d'un PDF (regles ou campagne), le texte est decoupe en morceaux
+                            de cette taille avant d'etre analyse par l'IA. <strong>Plus gros = moins de morceaux</strong>,
+                            donc plus rapide et moins de fragmentation/doublons — mais le morceau doit tenir dans
+                            la fenetre du modele.
+                            <br />
+                            Repere : ~10 000 pour Ollama (16k de contexte) ; jusqu'a ~100 000 pour un modele a
+                            grand contexte (ex : GPT-5 mini, 400k) afin de traiter un livre entier en une seule passe.
+                            Attention : un gros morceau = generation plus longue (voir le timeout ci-dessous).
+                          </p>
+                        </div>
+                        <div class="form-row">
+                          <label for="llm-timeout">Timeout des appels IA (secondes)</label>
+                          <input
+                            id="llm-timeout"
+                            type="number"
+                            min="30"
+                            step="30"
+                            [(ngModel)]="settings.llm_timeout_seconds">
+                            <p class="hint">
+                              Delai max d'attente d'une reponse du modele. Si un import lourd echoue avec
+                              « delai depasse » (timeout), <strong>augmentez cette valeur</strong> (ex : 600)
+                              ou reduisez la taille des morceaux ci-dessus. Defaut : 300 s.
+                            </p>
+                          </div>
+                        </section>
+                      }
 
-    <div class="form-row">
-      <label for="llm-timeout">Timeout des appels IA (secondes)</label>
-      <input
-        id="llm-timeout"
-        type="number"
-        min="30"
-        step="30"
-        [(ngModel)]="settings.llm_timeout_seconds">
-      <p class="hint">
-        Delai max d'attente d'une reponse du modele. Si un import lourd echoue avec
-        « delai depasse » (timeout), <strong>augmentez cette valeur</strong> (ex : 600)
-        ou reduisez la taille des morceaux ci-dessus. Defaut : 300 s.
-      </p>
-    </div>
-  </section>
+                      <!-- Mises a jour conteneurs + licence Patreon + canal beta (sous-composant) -->
+                      <app-settings-updates-section></app-settings-updates-section>
 
-  <!-- Mises a jour conteneurs + licence Patreon + canal beta (sous-composant) -->
-  <app-settings-updates-section></app-settings-updates-section>
+                      @if (settings) {
+                        <div class="actions">
+                          <button class="btn-primary" (click)="save()" [disabled]="saving">
+                            <lucide-icon [img]="Save" [size]="16"></lucide-icon>
+                            <span>{{ saving ? 'Sauvegarde...' : 'Sauvegarder' }}</span>
+                          </button>
+                        </div>
+                      }
 
-  <div class="actions" *ngIf="settings">
-    <button class="btn-primary" (click)="save()" [disabled]="saving">
-      <lucide-icon [img]="Save" [size]="16"></lucide-icon>
-      <span>{{ saving ? 'Sauvegarde...' : 'Sauvegarder' }}</span>
-    </button>
-  </div>
-
-</div>
+                    </div>
diff --git a/web/src/app/settings/updates-section/updates-section.component.html b/web/src/app/settings/updates-section/updates-section.component.html
index 19d0abd..f8f620f 100644
--- a/web/src/app/settings/updates-section/updates-section.component.html
+++ b/web/src/app/settings/updates-section/updates-section.component.html
@@ -1,241 +1,289 @@
 <!-- Bloc Mises a jour (canal stable + canal beta Patreon fusionnes) -->
-<section class="card" *ngIf="config.updateCheckEnabled || licenseStatus?.enabled">
-  <h2>Mises a jour</h2>
-  <p class="hint">Verifie aupres du registry Docker si une nouvelle version
-    des conteneurs (core, brain, web) est disponible. Postgres et MinIO sont
+@if (config.updateCheckEnabled || licenseStatus?.enabled) {
+  <section class="card">
+    <h2>Mises a jour</h2>
+    <p class="hint">Verifie aupres du registry Docker si une nouvelle version
+      des conteneurs (core, brain, web) est disponible. Postgres et MinIO sont
     exclus — ils sont mis a jour manuellement.</p>
-
-  <div *ngIf="licenseSuccess" class="alert alert-success">
-    <lucide-icon [img]="Check" [size]="16"></lucide-icon>
-    <span>{{ licenseSuccess }}</span>
-  </div>
-
-  <!-- ====================================================== -->
-  <!-- Sous-section : canal stable                              -->
-  <!-- ====================================================== -->
-  <div class="channel-block" *ngIf="config.updateCheckEnabled">
-    <h3 class="channel-title">Canal stable</h3>
-
-    <div class="form-row">
-      <button type="button" class="btn-secondary" (click)="checkUpdates()" [disabled]="updateChecking">
-        <lucide-icon [img]="RefreshCw" [size]="14"></lucide-icon>
-        <span>{{ updateChecking ? 'Verification...' : 'Verifier maintenant' }}</span>
-      </button>
-    </div>
-
-    <div *ngIf="updateStatus && !updateStatus.enabled" class="hint">
-      Feature non configuree (WATCHTOWER_TOKEN absent).
-    </div>
-
-    <div *ngIf="updateStatus?.enabled">
-      <div *ngIf="updateStatus?.updateAvailable" class="alert alert-success">
-        <lucide-icon [img]="Download" [size]="16"></lucide-icon>
-        <span>Une mise a jour est disponible.</span>
-      </div>
-      <div *ngIf="updateStatus?.anyUnknown && !updateStatus?.updateAvailable" class="alert alert-warn">
-        <lucide-icon [img]="Download" [size]="16"></lucide-icon>
-        <span>Verification impossible (baseline absente ou registry injoignable).</span>
-      </div>
-      <div *ngIf="!updateStatus?.updateAvailable && !updateStatus?.anyUnknown" class="hint">
-        Tout est a jour (verifie le {{ updateStatus?.checkedAt | date:'short' }}).
-      </div>
-
-      <div class="form-row" *ngIf="updateStatus?.updateAvailable">
-        <button type="button" class="btn-primary" (click)="applyUpdate()" [disabled]="updateApplying">
-          <lucide-icon [img]="Download" [size]="16"></lucide-icon>
-          <span>{{ updateApplying ? 'Mise a jour en cours...' : 'Mettre a jour maintenant' }}</span>
-        </button>
-      </div>
-
-      <div *ngIf="updateMessage" class="alert alert-success">
+    @if (licenseSuccess) {
+      <div class="alert alert-success">
         <lucide-icon [img]="Check" [size]="16"></lucide-icon>
-        <span>{{ updateMessage }}</span>
+        <span>{{ licenseSuccess }}</span>
       </div>
-    </div>
-  </div>
-
-  <!-- ====================================================== -->
-  <!-- Sous-section : canal beta (Patreon)                      -->
-  <!-- ====================================================== -->
-  <div class="channel-block" *ngIf="licenseStatus?.enabled">
-    <h3 class="channel-title">
-      <lucide-icon [img]="Heart" [size]="16"></lucide-icon>
-      Canal beta &mdash; reserve aux patrons
-    </h3>
-    <p class="hint">
-      Soutiens LoreMind sur Patreon pour acceder aux nouvelles features en avant-premiere.
-      Le tier <strong>Compagnon</strong> (7&euro;/mois) ou superieur debloque ce canal.
-    </p>
-
-    <!-- Pas de licence installee -->
-    <ng-container *ngIf="licenseStatus?.status === 'NONE'">
-      <div class="form-row">
-        <button type="button" class="btn-primary" (click)="connectPatreon()">
-          <lucide-icon [img]="Link2" [size]="16"></lucide-icon>
-          <span>Connecter mon compte Patreon</span>
-        </button>
-      </div>
-      <p class="hint">
-        Une nouvelle fenetre va s'ouvrir vers Patreon. Apres autorisation, copie le token affiche
-        et colle-le ci-dessous.
-      </p>
-      <div class="form-row">
-        <label for="license-jwt">Token Patreon</label>
-        <input
-          id="license-jwt"
-          type="text"
-          [(ngModel)]="licenseJwtInput"
-          placeholder="eyJhbGciOiJFZERTQS..."
-          autocomplete="off"
-        >
-      </div>
-      <div class="form-row">
-        <button type="button" class="btn-primary" (click)="installLicense()" [disabled]="!licenseJwtInput.trim()">
-          <lucide-icon [img]="Check" [size]="16"></lucide-icon>
-          <span>Activer la licence</span>
-        </button>
-      </div>
-      <div *ngIf="licenseError" class="alert alert-error">
-        <lucide-icon [img]="AlertCircle" [size]="16"></lucide-icon>
-        <span>{{ licenseError }}</span>
-      </div>
-    </ng-container>
-
-    <!-- Licence installee (VALID / GRACE / EXPIRED / UNVERIFIABLE) -->
-    <ng-container *ngIf="licenseStatus && licenseStatus.status !== 'NONE'">
-      <div *ngIf="licenseStatus.status === 'VALID'" class="alert alert-success">
-        <lucide-icon [img]="Check" [size]="16"></lucide-icon>
-        <span>Compte Patreon connecte. Tier {{ tierLabel(licenseStatus.tierId) }} actif.</span>
-      </div>
-      <div *ngIf="licenseStatus.status === 'GRACE'" class="alert alert-warn">
-        <lucide-icon [img]="AlertCircle" [size]="16"></lucide-icon>
-        <span>
-          Connexion Patreon expiree, mais acces beta maintenu pendant la periode de tolerance.
-          Verifie que ton abonnement Patreon est toujours actif et clique sur "Verifier maintenant".
-        </span>
-      </div>
-      <div *ngIf="licenseStatus.status === 'EXPIRED'" class="alert alert-error">
-        <lucide-icon [img]="AlertCircle" [size]="16"></lucide-icon>
-        <span>
-          Connexion Patreon expiree depuis trop longtemps. Reconnecte-toi pour retrouver l'acces beta.
-        </span>
-      </div>
-      <div *ngIf="licenseStatus.status === 'UNVERIFIABLE'" class="alert alert-error">
-        <lucide-icon [img]="AlertCircle" [size]="16"></lucide-icon>
-        <span>Le token installe ne peut plus etre verifie. Reconnecte-toi.</span>
-      </div>
-
-      <ul class="license-info">
-        <li *ngIf="licenseStatus.tierId"><strong>Tier :</strong> {{ tierLabel(licenseStatus.tierId) }}</li>
-        <li *ngIf="licenseStatus.expiresAt">
-          <strong>Validite :</strong>
-          jusqu'au {{ formatDate(licenseStatus.expiresAt) }}
-          <span *ngIf="daysUntilExpiry !== null && daysUntilExpiry > 0">
-            (renouvellement dans {{ daysUntilExpiry }} jour<span *ngIf="daysUntilExpiry > 1">s</span>)
-          </span>
-        </li>
-        <li *ngIf="licenseStatus.lastRefreshAttemptAt">
-          <strong>Dernier refresh :</strong>
-          {{ formatDate(licenseStatus.lastRefreshAttemptAt) }}
-          <span *ngIf="licenseStatus.lastRefreshSucceeded === true" class="badge-ok">OK</span>
-          <span *ngIf="licenseStatus.lastRefreshSucceeded === false" class="badge-warn">echec</span>
-        </li>
-      </ul>
-
-      <div class="form-row form-row-inline">
-        <label class="checkbox">
-          <input
-            type="checkbox"
-            [checked]="licenseStatus.betaChannelEnabled"
-            (change)="toggleBetaChannel(!licenseStatus.betaChannelEnabled)"
-            [disabled]="licenseStatus.status !== 'VALID' && licenseStatus.status !== 'GRACE'"
-          >
-          <span>Activer le canal beta</span>
-        </label>
-      </div>
-
-      <div class="form-row form-row-actions">
-        <button type="button" class="btn-secondary" (click)="refreshLicense()" [disabled]="licenseLoading">
-          <lucide-icon [img]="RefreshCw" [size]="14"></lucide-icon>
-          <span>{{ licenseLoading ? 'Verification...' : 'Verifier maintenant' }}</span>
-        </button>
-        <button type="button" class="btn-secondary btn-danger" (click)="disconnectPatreon()">
-          <lucide-icon [img]="Unlink" [size]="14"></lucide-icon>
-          <span>Deconnecter Patreon</span>
-        </button>
-      </div>
-
-      <!-- Etat du canal beta -->
-      <div *ngIf="licenseStatus.betaChannelEnabled" class="beta-status">
-        <div *ngIf="betaChecking" class="hint">Verification des images beta...</div>
-        <div *ngIf="!betaChecking && betaStatus && !betaStatus.enabled" class="hint">
-          Indisponible : {{ betaStatus.disabledReason }}
-        </div>
-        <div *ngIf="!betaChecking && betaStatus?.enabled">
-          <div *ngIf="betaStatus?.anyUnknown" class="alert alert-warn">
-            <lucide-icon [img]="AlertCircle" [size]="16"></lucide-icon>
-            <span>Verification beta impossible (registry beta injoignable ou baseline absente).</span>
-          </div>
-        </div>
-      </div>
-
-      <!-- Bascule de canal (stable <-> beta) via sidecar switcher -->
-      <div class="channel-switch" *ngIf="channelStatus">
-        <div class="channel-current">
-          <span class="channel-label">Canal actuel :</span>
-          <span class="channel-badge"
-                [class.channel-stable]="channelStatus.currentChannel === 'stable'"
-                [class.channel-beta]="channelStatus.currentChannel === 'beta'">
-            {{ channelStatus.currentChannel === 'beta' ? 'Bêta' : 'Stable' }}
-          </span>
-        </div>
-
-        <!-- Sidecar dispo : boutons d'action -->
-        <ng-container *ngIf="channelStatus.switcherAvailable">
-          <!-- On stable -> proposer passage beta (uniquement si licence active) -->
-          <button *ngIf="channelStatus.currentChannel === 'stable'"
-                  type="button" class="btn-primary"
-                  [disabled]="switchInFlight"
-                  (click)="requestChannelSwitch('beta')">
-            <lucide-icon [img]="Download" [size]="14"></lucide-icon>
-            <span>{{ switchInFlight ? 'Bascule en cours...' : 'Passer sur le canal beta' }}</span>
+    }
+    <!-- ====================================================== -->
+    <!-- Sous-section : canal stable                              -->
+    <!-- ====================================================== -->
+    @if (config.updateCheckEnabled) {
+      <div class="channel-block">
+        <h3 class="channel-title">Canal stable</h3>
+        <div class="form-row">
+          <button type="button" class="btn-secondary" (click)="checkUpdates()" [disabled]="updateChecking">
+            <lucide-icon [img]="RefreshCw" [size]="14"></lucide-icon>
+            <span>{{ updateChecking ? 'Verification...' : 'Verifier maintenant' }}</span>
           </button>
-
-          <!-- On beta -> proposer retour stable -->
-          <button *ngIf="channelStatus.currentChannel === 'beta'"
-                  type="button" class="btn-secondary"
-                  [disabled]="switchInFlight"
-                  (click)="requestChannelSwitch('stable')">
-            <lucide-icon [img]="ArrowLeft" [size]="14"></lucide-icon>
-            <span>{{ switchInFlight ? 'Bascule en cours...' : 'Repasser sur le canal stable' }}</span>
-          </button>
-
-          <!-- Switch en cours : on prévient que la page va se rendre injoignable -->
-          <div *ngIf="switchInFlight" class="alert alert-warn">
-            <lucide-icon [img]="RefreshCw" [size]="16"></lucide-icon>
-            <span>Bascule en cours. L'application va etre indisponible 10 a 30 secondes — la page se rechargera automatiquement quand le nouveau Core sera pret.</span>
-          </div>
-
-          <!-- Erreur eventuelle remontee par le sidecar -->
-          <div *ngIf="switchError && !switchInFlight" class="alert alert-error">
-            <lucide-icon [img]="AlertCircle" [size]="16"></lucide-icon>
-            <span>{{ switchError }}</span>
-          </div>
-        </ng-container>
-
-        <!-- Sidecar PAS dispo : fallback instructions manuelles (vieilles installs) -->
-        <div *ngIf="!channelStatus.switcherAvailable" class="alert alert-warn">
-          <lucide-icon [img]="AlertCircle" [size]="16"></lucide-icon>
-          <span>
-            Le sidecar de bascule n'est pas installe. Pour beneficier du switch
-            automatique, recupere le dernier <code>docker-compose.yml</code> du repo
-            et fais <code>docker compose pull &amp;&amp; docker compose up -d</code> une
-            fois. Sinon, bascule manuellement en editant <code>IMAGE_NAMESPACE</code>
-            dans ton <code>.env</code> (<code>igmlcreation/loremind-</code> pour stable,
-            <code>igmlcreation/loremind-beta-</code> pour beta).
-          </span>
         </div>
+        @if (updateStatus && !updateStatus.enabled) {
+          <div class="hint">
+            Feature non configuree (WATCHTOWER_TOKEN absent).
+          </div>
+        }
+        @if (updateStatus?.enabled) {
+          <div>
+            @if (updateStatus?.updateAvailable) {
+              <div class="alert alert-success">
+                <lucide-icon [img]="Download" [size]="16"></lucide-icon>
+                <span>Une mise a jour est disponible.</span>
+              </div>
+            }
+            @if (updateStatus?.anyUnknown && !updateStatus?.updateAvailable) {
+              <div class="alert alert-warn">
+                <lucide-icon [img]="Download" [size]="16"></lucide-icon>
+                <span>Verification impossible (baseline absente ou registry injoignable).</span>
+              </div>
+            }
+            @if (!updateStatus?.updateAvailable && !updateStatus?.anyUnknown) {
+              <div class="hint">
+                Tout est a jour (verifie le {{ updateStatus?.checkedAt | date:'short' }}).
+              </div>
+            }
+            @if (updateStatus?.updateAvailable) {
+              <div class="form-row">
+                <button type="button" class="btn-primary" (click)="applyUpdate()" [disabled]="updateApplying">
+                  <lucide-icon [img]="Download" [size]="16"></lucide-icon>
+                  <span>{{ updateApplying ? 'Mise a jour en cours...' : 'Mettre a jour maintenant' }}</span>
+                </button>
+              </div>
+            }
+            @if (updateMessage) {
+              <div class="alert alert-success">
+                <lucide-icon [img]="Check" [size]="16"></lucide-icon>
+                <span>{{ updateMessage }}</span>
+              </div>
+            }
+          </div>
+        }
       </div>
-    </ng-container>
-  </div>
-</section>
+    }
+    <!-- ====================================================== -->
+    <!-- Sous-section : canal beta (Patreon)                      -->
+    <!-- ====================================================== -->
+    @if (licenseStatus?.enabled) {
+      <div class="channel-block">
+        <h3 class="channel-title">
+          <lucide-icon [img]="Heart" [size]="16"></lucide-icon>
+          Canal beta &mdash; reserve aux patrons
+        </h3>
+        <p class="hint">
+          Soutiens LoreMind sur Patreon pour acceder aux nouvelles features en avant-premiere.
+          Le tier <strong>Compagnon</strong> (7&euro;/mois) ou superieur debloque ce canal.
+        </p>
+        <!-- Pas de licence installee -->
+        @if (licenseStatus?.status === 'NONE') {
+          <div class="form-row">
+            <button type="button" class="btn-primary" (click)="connectPatreon()">
+              <lucide-icon [img]="Link2" [size]="16"></lucide-icon>
+              <span>Connecter mon compte Patreon</span>
+            </button>
+          </div>
+          <p class="hint">
+            Une nouvelle fenetre va s'ouvrir vers Patreon. Apres autorisation, copie le token affiche
+            et colle-le ci-dessous.
+          </p>
+          <div class="form-row">
+            <label for="license-jwt">Token Patreon</label>
+            <input
+              id="license-jwt"
+              type="text"
+              [(ngModel)]="licenseJwtInput"
+              placeholder="eyJhbGciOiJFZERTQS..."
+              autocomplete="off"
+              >
+          </div>
+          <div class="form-row">
+            <button type="button" class="btn-primary" (click)="installLicense()" [disabled]="!licenseJwtInput.trim()">
+              <lucide-icon [img]="Check" [size]="16"></lucide-icon>
+              <span>Activer la licence</span>
+            </button>
+          </div>
+          @if (licenseError) {
+            <div class="alert alert-error">
+              <lucide-icon [img]="AlertCircle" [size]="16"></lucide-icon>
+              <span>{{ licenseError }}</span>
+            </div>
+          }
+        }
+        <!-- Licence installee (VALID / GRACE / EXPIRED / UNVERIFIABLE) -->
+        @if (licenseStatus && licenseStatus.status !== 'NONE') {
+          @if (licenseStatus.status === 'VALID') {
+            <div class="alert alert-success">
+              <lucide-icon [img]="Check" [size]="16"></lucide-icon>
+              <span>Compte Patreon connecte. Tier {{ tierLabel(licenseStatus.tierId) }} actif.</span>
+            </div>
+          }
+          @if (licenseStatus.status === 'GRACE') {
+            <div class="alert alert-warn">
+              <lucide-icon [img]="AlertCircle" [size]="16"></lucide-icon>
+              <span>
+                Connexion Patreon expiree, mais acces beta maintenu pendant la periode de tolerance.
+                Verifie que ton abonnement Patreon est toujours actif et clique sur "Verifier maintenant".
+              </span>
+            </div>
+          }
+          @if (licenseStatus.status === 'EXPIRED') {
+            <div class="alert alert-error">
+              <lucide-icon [img]="AlertCircle" [size]="16"></lucide-icon>
+              <span>
+                Connexion Patreon expiree depuis trop longtemps. Reconnecte-toi pour retrouver l'acces beta.
+              </span>
+            </div>
+          }
+          @if (licenseStatus.status === 'UNVERIFIABLE') {
+            <div class="alert alert-error">
+              <lucide-icon [img]="AlertCircle" [size]="16"></lucide-icon>
+              <span>Le token installe ne peut plus etre verifie. Reconnecte-toi.</span>
+            </div>
+          }
+          <ul class="license-info">
+            @if (licenseStatus.tierId) {
+              <li><strong>Tier :</strong> {{ tierLabel(licenseStatus.tierId) }}</li>
+            }
+            @if (licenseStatus.expiresAt) {
+              <li>
+                <strong>Validite :</strong>
+                jusqu'au {{ formatDate(licenseStatus.expiresAt) }}
+                @if (daysUntilExpiry !== null && daysUntilExpiry > 0) {
+                  <span>
+                    (renouvellement dans {{ daysUntilExpiry }} jour@if (daysUntilExpiry > 1) {
+                    <span>s</span>
+                    })
+                  </span>
+                }
+              </li>
+            }
+            @if (licenseStatus.lastRefreshAttemptAt) {
+              <li>
+                <strong>Dernier refresh :</strong>
+                {{ formatDate(licenseStatus.lastRefreshAttemptAt) }}
+                @if (licenseStatus.lastRefreshSucceeded === true) {
+                  <span class="badge-ok">OK</span>
+                }
+                @if (licenseStatus.lastRefreshSucceeded === false) {
+                  <span class="badge-warn">echec</span>
+                }
+              </li>
+            }
+          </ul>
+          <div class="form-row form-row-inline">
+            <label class="checkbox">
+              <input
+                type="checkbox"
+                [checked]="licenseStatus.betaChannelEnabled"
+                (change)="toggleBetaChannel(!licenseStatus.betaChannelEnabled)"
+                [disabled]="licenseStatus.status !== 'VALID' && licenseStatus.status !== 'GRACE'"
+                >
+              <span>Activer le canal beta</span>
+            </label>
+          </div>
+          <div class="form-row form-row-actions">
+            <button type="button" class="btn-secondary" (click)="refreshLicense()" [disabled]="licenseLoading">
+              <lucide-icon [img]="RefreshCw" [size]="14"></lucide-icon>
+              <span>{{ licenseLoading ? 'Verification...' : 'Verifier maintenant' }}</span>
+            </button>
+            <button type="button" class="btn-secondary btn-danger" (click)="disconnectPatreon()">
+              <lucide-icon [img]="Unlink" [size]="14"></lucide-icon>
+              <span>Deconnecter Patreon</span>
+            </button>
+          </div>
+          <!-- Etat du canal beta -->
+          @if (licenseStatus.betaChannelEnabled) {
+            <div class="beta-status">
+              @if (betaChecking) {
+                <div class="hint">Verification des images beta...</div>
+              }
+              @if (!betaChecking && betaStatus && !betaStatus.enabled) {
+                <div class="hint">
+                  Indisponible : {{ betaStatus.disabledReason }}
+                </div>
+              }
+              @if (!betaChecking && betaStatus?.enabled) {
+                <div>
+                  @if (betaStatus?.anyUnknown) {
+                    <div class="alert alert-warn">
+                      <lucide-icon [img]="AlertCircle" [size]="16"></lucide-icon>
+                      <span>Verification beta impossible (registry beta injoignable ou baseline absente).</span>
+                    </div>
+                  }
+                </div>
+              }
+            </div>
+          }
+          <!-- Bascule de canal (stable <-> beta) via sidecar switcher -->
+          @if (channelStatus) {
+            <div class="channel-switch">
+              <div class="channel-current">
+                <span class="channel-label">Canal actuel :</span>
+                <span class="channel-badge"
+                  [class.channel-stable]="channelStatus.currentChannel === 'stable'"
+                  [class.channel-beta]="channelStatus.currentChannel === 'beta'">
+                  {{ channelStatus.currentChannel === 'beta' ? 'Bêta' : 'Stable' }}
+                </span>
+              </div>
+              <!-- Sidecar dispo : boutons d'action -->
+              @if (channelStatus.switcherAvailable) {
+                <!-- On stable -> proposer passage beta (uniquement si licence active) -->
+                @if (channelStatus.currentChannel === 'stable') {
+                  <button
+                    type="button" class="btn-primary"
+                    [disabled]="switchInFlight"
+                    (click)="requestChannelSwitch('beta')">
+                    <lucide-icon [img]="Download" [size]="14"></lucide-icon>
+                    <span>{{ switchInFlight ? 'Bascule en cours...' : 'Passer sur le canal beta' }}</span>
+                  </button>
+                }
+                <!-- On beta -> proposer retour stable -->
+                @if (channelStatus.currentChannel === 'beta') {
+                  <button
+                    type="button" class="btn-secondary"
+                    [disabled]="switchInFlight"
+                    (click)="requestChannelSwitch('stable')">
+                    <lucide-icon [img]="ArrowLeft" [size]="14"></lucide-icon>
+                    <span>{{ switchInFlight ? 'Bascule en cours...' : 'Repasser sur le canal stable' }}</span>
+                  </button>
+                }
+                <!-- Switch en cours : on prévient que la page va se rendre injoignable -->
+                @if (switchInFlight) {
+                  <div class="alert alert-warn">
+                    <lucide-icon [img]="RefreshCw" [size]="16"></lucide-icon>
+                    <span>Bascule en cours. L'application va etre indisponible 10 a 30 secondes — la page se rechargera automatiquement quand le nouveau Core sera pret.</span>
+                  </div>
+                }
+                <!-- Erreur eventuelle remontee par le sidecar -->
+                @if (switchError && !switchInFlight) {
+                  <div class="alert alert-error">
+                    <lucide-icon [img]="AlertCircle" [size]="16"></lucide-icon>
+                    <span>{{ switchError }}</span>
+                  </div>
+                }
+              }
+              <!-- Sidecar PAS dispo : fallback instructions manuelles (vieilles installs) -->
+              @if (!channelStatus.switcherAvailable) {
+                <div class="alert alert-warn">
+                  <lucide-icon [img]="AlertCircle" [size]="16"></lucide-icon>
+                  <span>
+                    Le sidecar de bascule n'est pas installe. Pour beneficier du switch
+                    automatique, recupere le dernier <code>docker-compose.yml</code> du repo
+                    et fais <code>docker compose pull &amp;&amp; docker compose up -d</code> une
+                    fois. Sinon, bascule manuellement en editant <code>IMAGE_NAMESPACE</code>
+                    dans ton <code>.env</code> (<code>igmlcreation/loremind-</code> pour stable,
+                    <code>igmlcreation/loremind-beta-</code> pour beta).
+                  </span>
+                </div>
+              }
+            </div>
+          }
+        }
+      </div>
+    }
+  </section>
+}
diff --git a/web/src/app/shared/ai-chat-drawer/ai-chat-drawer.component.html b/web/src/app/shared/ai-chat-drawer/ai-chat-drawer.component.html
index 9d39af8..a099916 100644
--- a/web/src/app/shared/ai-chat-drawer/ai-chat-drawer.component.html
+++ b/web/src/app/shared/ai-chat-drawer/ai-chat-drawer.component.html
@@ -7,66 +7,72 @@
   aria-label="Assistant IA">
 
   <!-- Poignee de redimensionnement (desactivee en mode wide) -->
-  <div
-    class="resize-handle"
-    *ngIf="!isWide"
-    (mousedown)="onResizeStart($event)"
-    role="separator"
-    aria-orientation="vertical"
-    aria-label="Redimensionner le panneau"
+  @if (!isWide) {
+    <div
+      class="resize-handle"
+      (mousedown)="onResizeStart($event)"
+      role="separator"
+      aria-orientation="vertical"
+      aria-label="Redimensionner le panneau"
     title="Glisser pour redimensionner"></div>
+  }
 
 
   <!-- Sidebar conversations (mode persistent uniquement) -->
-  <section class="conv-sidebar" *ngIf="persistent && sidebarOpen" aria-label="Conversations">
-    <div class="conv-sidebar-header">
-      <span class="conv-sidebar-title">Conversations</span>
-      <button type="button" class="conv-new-btn" (click)="startNewConversation()" [disabled]="isStreaming" title="Nouvelle conversation">
-        <lucide-icon [img]="MessageSquarePlus" [size]="16"></lucide-icon>
-      </button>
-    </div>
-    <ul class="conv-list">
-      <li *ngIf="conversations.length === 0" class="conv-empty">Aucune conversation</li>
-      <li
-        *ngFor="let c of conversations"
-        class="conv-item"
-        [class.active]="c.id === currentConversationId"
-        (click)="selectConversation(c)">
-        <span class="conv-item-title">{{ c.title }}</span>
-        <button
-          type="button"
-          class="conv-item-del"
-          (click)="deleteConversation(c, $event)"
-          [disabled]="isStreaming"
-          title="Supprimer">
-          <lucide-icon [img]="Trash2" [size]="12"></lucide-icon>
+  @if (persistent && sidebarOpen) {
+    <section class="conv-sidebar" aria-label="Conversations">
+      <div class="conv-sidebar-header">
+        <span class="conv-sidebar-title">Conversations</span>
+        <button type="button" class="conv-new-btn" (click)="startNewConversation()" [disabled]="isStreaming" title="Nouvelle conversation">
+          <lucide-icon [img]="MessageSquarePlus" [size]="16"></lucide-icon>
         </button>
-      </li>
-    </ul>
-  </section>
+      </div>
+      <ul class="conv-list">
+        @if (conversations.length === 0) {
+          <li class="conv-empty">Aucune conversation</li>
+        }
+        @for (c of conversations; track c) {
+          <li
+            class="conv-item"
+            [class.active]="c.id === currentConversationId"
+            (click)="selectConversation(c)">
+            <span class="conv-item-title">{{ c.title }}</span>
+            <button
+              type="button"
+              class="conv-item-del"
+              (click)="deleteConversation(c, $event)"
+              [disabled]="isStreaming"
+              title="Supprimer">
+              <lucide-icon [img]="Trash2" [size]="12"></lucide-icon>
+            </button>
+          </li>
+        }
+      </ul>
+    </section>
+  }
 
   <section class="conv-main">
 
     <header class="drawer-header">
-      <button
-        *ngIf="persistent"
-        type="button"
-        class="sidebar-toggle"
-        (click)="toggleSidebar()"
-        [attr.aria-label]="sidebarOpen ? 'Masquer la liste' : 'Afficher la liste'"
-        [title]="sidebarOpen ? 'Masquer la liste' : 'Afficher la liste'">
-        <lucide-icon [img]="sidebarOpen ? PanelLeftClose : PanelLeftOpen" [size]="16"></lucide-icon>
-      </button>
+      @if (persistent) {
+        <button
+          type="button"
+          class="sidebar-toggle"
+          (click)="toggleSidebar()"
+          [attr.aria-label]="sidebarOpen ? 'Masquer la liste' : 'Afficher la liste'"
+          [title]="sidebarOpen ? 'Masquer la liste' : 'Afficher la liste'">
+          <lucide-icon [img]="sidebarOpen ? PanelLeftClose : PanelLeftOpen" [size]="16"></lucide-icon>
+        </button>
+      }
 
       <div class="header-title-wrap">
-        <ng-container *ngIf="persistent && currentConversationId; else defaultTitle">
-          <ng-container *ngIf="!editingTitle; else editingTpl">
+        @if (persistent && currentConversationId) {
+          @if (!editingTitle) {
             <h2 class="header-title" [title]="currentTitle">{{ currentTitle || 'Nouvelle conversation' }}</h2>
             <button type="button" class="rename-btn" (click)="startRenameTitle()" title="Renommer" aria-label="Renommer">
               <lucide-icon [img]="Pencil" [size]="12"></lucide-icon>
             </button>
-          </ng-container>
-          <ng-template #editingTpl>
+          } @else {
             <input
               class="rename-input"
               type="text"
@@ -75,101 +81,125 @@
               (keyup.escape)="cancelRenameTitle()"
               (blur)="submitRenameTitle()"
               autofocus />
-          </ng-template>
-        </ng-container>
-        <ng-template #defaultTitle>
-          <h2 class="header-title">Assistant IA</h2>
-        </ng-template>
-      </div>
+            }
+          } @else {
+            <h2 class="header-title">Assistant IA</h2>
+          }
+        </div>
 
-      <button
-        type="button"
-        class="wide-toggle-btn"
-        (click)="toggleWide()"
-        [attr.aria-label]="isWide ? 'Reduire le panneau' : 'Agrandir le panneau'"
-        [title]="isWide ? 'Reduire' : 'Agrandir'">
-        <lucide-icon [img]="isWide ? Minimize2 : Maximize2" [size]="16"></lucide-icon>
-      </button>
-
-      <button type="button" class="close-btn" (click)="onClose()" aria-label="Fermer">
-        <lucide-icon [img]="X" [size]="18"></lucide-icon>
-      </button>
-    </header>
-
-    <div class="context-gauge" *ngIf="usage" [attr.data-level]="usageLevel"
-         [attr.title]="'System: ' + usage.system + ' · Historique: ' + usage.history + ' · Courant: ' + usage.current + (usageHasMax ? ' / ' + usage.max : '') + ' tokens'">
-      <!-- Barre seulement si on connaît le plafond (Ollama). Cloud : compteur seul. -->
-      <div class="gauge-bar" *ngIf="usageHasMax">
-        <div class="gauge-fill" [style.width.%]="usagePercent"></div>
-      </div>
-      <div class="gauge-label">
-        <span class="gauge-text">Contexte : {{ usageTotal }}<ng-container *ngIf="usageHasMax"> / {{ usage.max }}</ng-container> tokens</span>
-        <span class="gauge-percent" *ngIf="usageHasMax">{{ usagePercent }}%</span>
-      </div>
-    </div>
-
-    <div #messagesContainer class="messages">
-      <div class="msg msg-assistant md" *ngIf="messages.length === 0 && !currentAssistantText"
-           [innerHTML]="welcomeMessage | markdown">
-      </div>
-
-      <ng-container *ngFor="let m of messages">
-        <div *ngIf="m.role === 'user'" class="msg msg-user">{{ m.content }}</div>
-        <div *ngIf="m.role === 'assistant'" class="msg msg-assistant md"
-             [innerHTML]="m.content | markdown"></div>
-      </ng-container>
-
-      <div class="msg msg-assistant msg-streaming md" *ngIf="currentAssistantText">
-        <span [innerHTML]="currentAssistantText | markdown"></span><span class="caret"></span>
-      </div>
-
-      <div class="typing-indicator" *ngIf="isStreaming && !currentAssistantText" aria-live="polite">
-        <span></span><span></span><span></span>
-      </div>
-
-      <div class="msg msg-error" *ngIf="errorMessage" role="alert">
-        {{ errorMessage }}
-      </div>
-    </div>
-
-    <div class="primary-action" *ngIf="primaryAction">
-      <button
-        type="button"
-        class="primary-btn"
-        (click)="onPrimaryAction()"
-        [disabled]="isStreaming">
-        <lucide-icon [img]="Wand2" [size]="14"></lucide-icon>
-        {{ primaryAction.label }}
-      </button>
-    </div>
-
-    <div class="quick-suggestions" *ngIf="quickSuggestions.length">
-      <p class="quick-label">Suggestions rapides :</p>
-      <div class="quick-list">
         <button
           type="button"
-          class="quick-btn"
-          *ngFor="let s of quickSuggestions"
-          (click)="useQuickSuggestion(s)"
-          [disabled]="isStreaming">
-          <lucide-icon [img]="Lightbulb" [size]="12"></lucide-icon>
-          {{ s }}
+          class="wide-toggle-btn"
+          (click)="toggleWide()"
+          [attr.aria-label]="isWide ? 'Reduire le panneau' : 'Agrandir le panneau'"
+          [title]="isWide ? 'Reduire' : 'Agrandir'">
+          <lucide-icon [img]="isWide ? Minimize2 : Maximize2" [size]="16"></lucide-icon>
         </button>
+
+        <button type="button" class="close-btn" (click)="onClose()" aria-label="Fermer">
+          <lucide-icon [img]="X" [size]="18"></lucide-icon>
+        </button>
+      </header>
+
+      @if (usage) {
+        <div class="context-gauge" [attr.data-level]="usageLevel"
+          [attr.title]="'System: ' + usage.system + ' · Historique: ' + usage.history + ' · Courant: ' + usage.current + (usageHasMax ? ' / ' + usage.max : '') + ' tokens'">
+          <!-- Barre seulement si on connaît le plafond (Ollama). Cloud : compteur seul. -->
+          @if (usageHasMax) {
+            <div class="gauge-bar">
+              <div class="gauge-fill" [style.width.%]="usagePercent"></div>
+            </div>
+          }
+          <div class="gauge-label">
+            <span class="gauge-text">Contexte : {{ usageTotal }}@if (usageHasMax) {
+              / {{ usage.max }}
+            } tokens</span>
+            @if (usageHasMax) {
+              <span class="gauge-percent">{{ usagePercent }}%</span>
+            }
+          </div>
+        </div>
+      }
+
+      <div #messagesContainer class="messages">
+        @if (messages.length === 0 && !currentAssistantText) {
+          <div class="msg msg-assistant md"
+            [innerHTML]="welcomeMessage | markdown">
+          </div>
+        }
+
+        @for (m of messages; track m) {
+          @if (m.role === 'user') {
+            <div class="msg msg-user">{{ m.content }}</div>
+          }
+          @if (m.role === 'assistant') {
+            <div class="msg msg-assistant md"
+            [innerHTML]="m.content | markdown"></div>
+          }
+        }
+
+        @if (currentAssistantText) {
+          <div class="msg msg-assistant msg-streaming md">
+            <span [innerHTML]="currentAssistantText | markdown"></span><span class="caret"></span>
+          </div>
+        }
+
+        @if (isStreaming && !currentAssistantText) {
+          <div class="typing-indicator" aria-live="polite">
+            <span></span><span></span><span></span>
+          </div>
+        }
+
+        @if (errorMessage) {
+          <div class="msg msg-error" role="alert">
+            {{ errorMessage }}
+          </div>
+        }
       </div>
-    </div>
 
-    <form class="input-row" (ngSubmit)="send()">
-      <input
-        type="text"
-        [(ngModel)]="input"
-        name="chatInput"
-        placeholder="Posez une question..."
-        [disabled]="isStreaming"
-        autocomplete="off" />
-      <button type="submit" class="send-btn" [disabled]="!input.trim() || isStreaming" aria-label="Envoyer">
-        <lucide-icon [img]="Send" [size]="16"></lucide-icon>
-      </button>
-    </form>
+      @if (primaryAction) {
+        <div class="primary-action">
+          <button
+            type="button"
+            class="primary-btn"
+            (click)="onPrimaryAction()"
+            [disabled]="isStreaming">
+            <lucide-icon [img]="Wand2" [size]="14"></lucide-icon>
+            {{ primaryAction.label }}
+          </button>
+        </div>
+      }
 
-  </section>
-</aside>
+      @if (quickSuggestions.length) {
+        <div class="quick-suggestions">
+          <p class="quick-label">Suggestions rapides :</p>
+          <div class="quick-list">
+            @for (s of quickSuggestions; track s) {
+              <button
+                type="button"
+                class="quick-btn"
+                (click)="useQuickSuggestion(s)"
+                [disabled]="isStreaming">
+                <lucide-icon [img]="Lightbulb" [size]="12"></lucide-icon>
+                {{ s }}
+              </button>
+            }
+          </div>
+        </div>
+      }
+
+      <form class="input-row" (ngSubmit)="send()">
+        <input
+          type="text"
+          [(ngModel)]="input"
+          name="chatInput"
+          placeholder="Posez une question..."
+          [disabled]="isStreaming"
+          autocomplete="off" />
+          <button type="submit" class="send-btn" [disabled]="!input.trim() || isStreaming" aria-label="Envoyer">
+            <lucide-icon [img]="Send" [size]="16"></lucide-icon>
+          </button>
+        </form>
+
+      </section>
+    </aside>
diff --git a/web/src/app/shared/ai-chat-drawer/ai-chat-drawer.component.ts b/web/src/app/shared/ai-chat-drawer/ai-chat-drawer.component.ts
index a526d7c..a28a6de 100644
--- a/web/src/app/shared/ai-chat-drawer/ai-chat-drawer.component.ts
+++ b/web/src/app/shared/ai-chat-drawer/ai-chat-drawer.component.ts
@@ -1,4 +1,4 @@
-import { CommonModule } from '@angular/common';
+
 import { Component, ElementRef, EventEmitter, HostListener, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { LucideAngularModule, Lightbulb, Maximize2, MessageSquarePlus, Minimize2, PanelLeftClose, PanelLeftOpen, Pencil, Send, Sparkles, Trash2, Wand2, X } from 'lucide-angular';
@@ -31,7 +31,7 @@ export interface ChatPrimaryAction {
  */
 @Component({
     selector: 'app-ai-chat-drawer',
-    imports: [CommonModule, FormsModule, LucideAngularModule, MarkdownPipe],
+    imports: [FormsModule, LucideAngularModule, MarkdownPipe],
     templateUrl: './ai-chat-drawer.component.html',
     styleUrls: ['./ai-chat-drawer.component.scss']
 })
diff --git a/web/src/app/shared/breadcrumb/breadcrumb.component.html b/web/src/app/shared/breadcrumb/breadcrumb.component.html
index 15a2717..a3c8e98 100644
--- a/web/src/app/shared/breadcrumb/breadcrumb.component.html
+++ b/web/src/app/shared/breadcrumb/breadcrumb.component.html
@@ -1,12 +1,20 @@
-<nav class="breadcrumb" aria-label="Fil d'Ariane" *ngIf="items.length">
-  <ol>
-    <li *ngFor="let item of items; let last = last; trackBy: trackByIndex"
-        class="breadcrumb-item"
-        [class.current]="last">
-      <a *ngIf="item.route && !last"
-         [routerLink]="item.route"
-         class="breadcrumb-link">{{ item.label }}</a>
-      <span *ngIf="!item.route || last" class="breadcrumb-text">{{ item.label }}</span>
-    </li>
-  </ol>
-</nav>
+@if (items.length) {
+  <nav class="breadcrumb" aria-label="Fil d'Ariane">
+    <ol>
+      @for (item of items; track $index; let last = $last) {
+        <li
+          class="breadcrumb-item"
+          [class.current]="last">
+          @if (item.route && !last) {
+            <a
+              [routerLink]="item.route"
+            class="breadcrumb-link">{{ item.label }}</a>
+          }
+          @if (!item.route || last) {
+            <span class="breadcrumb-text">{{ item.label }}</span>
+          }
+        </li>
+      }
+    </ol>
+  </nav>
+}
diff --git a/web/src/app/shared/breadcrumb/breadcrumb.component.ts b/web/src/app/shared/breadcrumb/breadcrumb.component.ts
index e82213a..b609375 100644
--- a/web/src/app/shared/breadcrumb/breadcrumb.component.ts
+++ b/web/src/app/shared/breadcrumb/breadcrumb.component.ts
@@ -1,5 +1,5 @@
 import { Component, Input } from '@angular/core';
-import { CommonModule } from '@angular/common';
+
 import { RouterLink } from '@angular/router';
 
 /**
@@ -23,12 +23,11 @@ export interface BreadcrumbItem {
  */
 @Component({
     selector: 'app-breadcrumb',
-    imports: [CommonModule, RouterLink],
+    imports: [RouterLink],
     templateUrl: './breadcrumb.component.html',
     styleUrls: ['./breadcrumb.component.scss']
 })
 export class BreadcrumbComponent {
   @Input() items: BreadcrumbItem[] = [];
 
-  trackByIndex = (i: number) => i;
 }
diff --git a/web/src/app/shared/chips-input/chips-input.component.html b/web/src/app/shared/chips-input/chips-input.component.html
index 2413966..19fa8f9 100644
--- a/web/src/app/shared/chips-input/chips-input.component.html
+++ b/web/src/app/shared/chips-input/chips-input.component.html
@@ -1,10 +1,12 @@
 <div class="chips-wrapper">
-  <span class="chip" *ngFor="let tag of value; let i = index">
-    {{ tag }}
-    <button type="button" class="chip-remove" (click)="remove(i)" title="Retirer">
-      <lucide-icon [img]="X" [size]="12"></lucide-icon>
-    </button>
-  </span>
+  @for (tag of value; track tag; let i = $index) {
+    <span class="chip">
+      {{ tag }}
+      <button type="button" class="chip-remove" (click)="remove(i)" title="Retirer">
+        <lucide-icon [img]="X" [size]="12"></lucide-icon>
+      </button>
+    </span>
+  }
   <input
     type="text"
     class="chip-input"
diff --git a/web/src/app/shared/chips-input/chips-input.component.ts b/web/src/app/shared/chips-input/chips-input.component.ts
index a714b4d..f6cd97d 100644
--- a/web/src/app/shared/chips-input/chips-input.component.ts
+++ b/web/src/app/shared/chips-input/chips-input.component.ts
@@ -1,5 +1,5 @@
 import { Component, Input, Output, EventEmitter } from '@angular/core';
-import { CommonModule } from '@angular/common';
+
 import { FormsModule } from '@angular/forms';
 import { LucideAngularModule, X } from 'lucide-angular';
 
@@ -21,7 +21,7 @@ import { LucideAngularModule, X } from 'lucide-angular';
  */
 @Component({
     selector: 'app-chips-input',
-    imports: [CommonModule, FormsModule, LucideAngularModule],
+    imports: [FormsModule, LucideAngularModule],
     templateUrl: './chips-input.component.html',
     styleUrls: ['./chips-input.component.scss']
 })
diff --git a/web/src/app/shared/confirm-dialog/confirm-dialog-host.component.ts b/web/src/app/shared/confirm-dialog/confirm-dialog-host.component.ts
index d4bdb45..4be7d5c 100644
--- a/web/src/app/shared/confirm-dialog/confirm-dialog-host.component.ts
+++ b/web/src/app/shared/confirm-dialog/confirm-dialog-host.component.ts
@@ -7,19 +7,20 @@ import { ConfirmDialogService } from './confirm-dialog.service';
     selector: 'app-confirm-dialog-host',
     imports: [CommonModule, ConfirmDialogComponent],
     template: `
-    <app-confirm-dialog
-      *ngIf="(svc.state$ | async) as s"
-      [open]="s.open"
-      [title]="s.title"
-      [message]="s.message"
-      [details]="s.details"
-      [confirmLabel]="s.confirmLabel"
-      [cancelLabel]="s.cancelLabel"
-      [variant]="s.variant"
-      (confirmed)="svc.resolve(true)"
-      (cancelled)="svc.resolve(false)">
-    </app-confirm-dialog>
-  `
+    @if ((svc.state$ | async); as s) {
+      <app-confirm-dialog
+        [open]="s.open"
+        [title]="s.title"
+        [message]="s.message"
+        [details]="s.details"
+        [confirmLabel]="s.confirmLabel"
+        [cancelLabel]="s.cancelLabel"
+        [variant]="s.variant"
+        (confirmed)="svc.resolve(true)"
+        (cancelled)="svc.resolve(false)">
+      </app-confirm-dialog>
+    }
+    `
 })
 export class ConfirmDialogHostComponent {
   constructor(public svc: ConfirmDialogService) {}
diff --git a/web/src/app/shared/confirm-dialog/confirm-dialog.component.html b/web/src/app/shared/confirm-dialog/confirm-dialog.component.html
index faaf7be..1d4d314 100644
--- a/web/src/app/shared/confirm-dialog/confirm-dialog.component.html
+++ b/web/src/app/shared/confirm-dialog/confirm-dialog.component.html
@@ -1,34 +1,36 @@
-<div class="confirm-backdrop" *ngIf="open" (click)="onCancel()">
-  <div class="confirm-modal"
-       role="dialog"
-       aria-modal="true"
-       [attr.aria-label]="title"
-       [class.variant-warning]="variant === 'warning'"
-       [class.variant-danger]="variant === 'danger'"
-       [class.variant-info]="variant === 'info'"
-       (click)="$event.stopPropagation()">
-
-    <div class="confirm-header">
-      <div class="confirm-icon">
-        <lucide-icon [img]="TriangleAlert" [size]="22"></lucide-icon>
+@if (open) {
+  <div class="confirm-backdrop" (click)="onCancel()">
+    <div class="confirm-modal"
+      role="dialog"
+      aria-modal="true"
+      [attr.aria-label]="title"
+      [class.variant-warning]="variant === 'warning'"
+      [class.variant-danger]="variant === 'danger'"
+      [class.variant-info]="variant === 'info'"
+      (click)="$event.stopPropagation()">
+      <div class="confirm-header">
+        <div class="confirm-icon">
+          <lucide-icon [img]="TriangleAlert" [size]="22"></lucide-icon>
+        </div>
+        <h2>{{ title }}</h2>
+        <button type="button" class="btn-close" (click)="onCancel()" aria-label="Fermer">
+          <lucide-icon [img]="X" [size]="18"></lucide-icon>
+        </button>
+      </div>
+      <div class="confirm-body">
+        <p class="confirm-message">{{ message }}</p>
+        @if (details.length > 0) {
+          <ul class="confirm-details">
+            @for (line of details; track line) {
+              <li>{{ line }}</li>
+            }
+          </ul>
+        }
+      </div>
+      <div class="confirm-actions">
+        <button type="button" class="btn-secondary" (click)="onCancel()">{{ cancelLabel }}</button>
+        <button type="button" class="btn-confirm" (click)="onConfirm()">{{ confirmLabel }}</button>
       </div>
-      <h2>{{ title }}</h2>
-      <button type="button" class="btn-close" (click)="onCancel()" aria-label="Fermer">
-        <lucide-icon [img]="X" [size]="18"></lucide-icon>
-      </button>
     </div>
-
-    <div class="confirm-body">
-      <p class="confirm-message">{{ message }}</p>
-      <ul *ngIf="details.length > 0" class="confirm-details">
-        <li *ngFor="let line of details">{{ line }}</li>
-      </ul>
-    </div>
-
-    <div class="confirm-actions">
-      <button type="button" class="btn-secondary" (click)="onCancel()">{{ cancelLabel }}</button>
-      <button type="button" class="btn-confirm" (click)="onConfirm()">{{ confirmLabel }}</button>
-    </div>
-
   </div>
-</div>
+}
diff --git a/web/src/app/shared/confirm-dialog/confirm-dialog.component.ts b/web/src/app/shared/confirm-dialog/confirm-dialog.component.ts
index 7fbdd39..30aa931 100644
--- a/web/src/app/shared/confirm-dialog/confirm-dialog.component.ts
+++ b/web/src/app/shared/confirm-dialog/confirm-dialog.component.ts
@@ -1,12 +1,12 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { CommonModule } from '@angular/common';
+
 import { LucideAngularModule, TriangleAlert, X } from 'lucide-angular';
 
 export type ConfirmDialogVariant = 'warning' | 'danger' | 'info';
 
 @Component({
     selector: 'app-confirm-dialog',
-    imports: [CommonModule, LucideAngularModule],
+    imports: [LucideAngularModule],
     templateUrl: './confirm-dialog.component.html',
     styleUrls: ['./confirm-dialog.component.scss']
 })
diff --git a/web/src/app/shared/dynamic-fields-form/dynamic-fields-form.component.html b/web/src/app/shared/dynamic-fields-form/dynamic-fields-form.component.html
index dc30f96..024ef6a 100644
--- a/web/src/app/shared/dynamic-fields-form/dynamic-fields-form.component.html
+++ b/web/src/app/shared/dynamic-fields-form/dynamic-fields-form.component.html
@@ -1,56 +1,64 @@
-<div class="dff" *ngIf="fields?.length; else emptyTpl">
-  <div class="dff-field" *ngFor="let f of fields; trackBy: trackByName">
-    <label>{{ f.name }}</label>
-
-    <ng-container [ngSwitch]="f.type">
-      <textarea
-        *ngSwitchCase="'TEXT'"
-        rows="4"
-        [ngModel]="values[f.name] || ''"
-        (ngModelChange)="onTextChange(f, $event)"
-        [name]="'val-' + f.name"
-        placeholder="Renseignez {{ f.name }}…">
-      </textarea>
-
-      <input
-        *ngSwitchCase="'NUMBER'"
-        type="number"
-        [ngModel]="values[f.name] || ''"
-        (ngModelChange)="onTextChange(f, $event)"
-        [name]="'val-' + f.name"
-        placeholder="0"
-      />
-
-      <app-image-gallery
-        *ngSwitchCase="'IMAGE'"
-        [editable]="true"
-        [layout]="f.layout || 'GALLERY'"
-        [imageIds]="imagesFor(f)"
-        (imageIdsChange)="onImageIdsChange(f, $event)">
-      </app-image-gallery>
-
-      <!-- KEY_VALUE_LIST : grille d'inputs avec labels figes du template -->
-      <div *ngSwitchCase="'KEY_VALUE_LIST'" class="dff-kv-grid">
-        <div class="dff-kv-cell" *ngFor="let lbl of f.labels; trackBy: trackByLabel">
-          <span class="dff-kv-label">{{ lbl }}</span>
-          <input
-            type="text"
-            [ngModel]="kvValue(f, lbl)"
-            (ngModelChange)="onKvChange(f, lbl, $event)"
-            [name]="'kv-' + f.name + '-' + lbl"
-            placeholder="—"
-          />
-        </div>
-        <div *ngIf="!f.labels?.length" class="dff-kv-empty">
-          Aucun label defini dans le template pour ce champ.
-        </div>
+@if (fields?.length) {
+  <div class="dff">
+    @for (f of fields; track trackByName($index, f)) {
+      <div class="dff-field">
+        <label>{{ f.name }}</label>
+        @switch (f.type) {
+          @case ('TEXT') {
+            <textarea
+              rows="4"
+              [ngModel]="values[f.name] || ''"
+              (ngModelChange)="onTextChange(f, $event)"
+              [name]="'val-' + f.name"
+              placeholder="Renseignez {{ f.name }}…">
+            </textarea>
+          }
+          @case ('NUMBER') {
+            <input
+              type="number"
+              [ngModel]="values[f.name] || ''"
+              (ngModelChange)="onTextChange(f, $event)"
+              [name]="'val-' + f.name"
+              placeholder="0"
+              />
+          }
+          @case ('IMAGE') {
+            <app-image-gallery
+              [editable]="true"
+              [layout]="f.layout || 'GALLERY'"
+              [imageIds]="imagesFor(f)"
+              (imageIdsChange)="onImageIdsChange(f, $event)">
+            </app-image-gallery>
+          }
+          <!-- KEY_VALUE_LIST : grille d'inputs avec labels figes du template -->
+          @case ('KEY_VALUE_LIST') {
+            <div class="dff-kv-grid">
+              @for (lbl of f.labels; track trackByLabel($index, lbl)) {
+                <div class="dff-kv-cell">
+                  <span class="dff-kv-label">{{ lbl }}</span>
+                  <input
+                    type="text"
+                    [ngModel]="kvValue(f, lbl)"
+                    (ngModelChange)="onKvChange(f, lbl, $event)"
+                    [name]="'kv-' + f.name + '-' + lbl"
+                    placeholder="—"
+                    />
+                </div>
+              }
+              @if (!f.labels?.length) {
+                <div class="dff-kv-empty">
+                  Aucun label defini dans le template pour ce champ.
+                </div>
+              }
+            </div>
+          }
+        }
       </div>
-    </ng-container>
+    }
   </div>
-</div>
-
-<ng-template #emptyTpl>
+} @else {
   <div class="dff-empty">
     Aucun champ defini dans le template de ce systeme. Editez le GameSystem pour ajouter des champs.
   </div>
-</ng-template>
+}
+
diff --git a/web/src/app/shared/dynamic-fields-form/dynamic-fields-form.component.ts b/web/src/app/shared/dynamic-fields-form/dynamic-fields-form.component.ts
index 429d36a..bc7496f 100644
--- a/web/src/app/shared/dynamic-fields-form/dynamic-fields-form.component.ts
+++ b/web/src/app/shared/dynamic-fields-form/dynamic-fields-form.component.ts
@@ -1,5 +1,5 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { CommonModule } from '@angular/common';
+
 import { FormsModule } from '@angular/forms';
 import { TemplateField } from '../../services/template.model';
 import { ImageGalleryComponent } from '../image-gallery/image-gallery.component';
@@ -17,7 +17,7 @@ import { ImageGalleryComponent } from '../image-gallery/image-gallery.component'
  */
 @Component({
     selector: 'app-dynamic-fields-form',
-    imports: [CommonModule, FormsModule, ImageGalleryComponent],
+    imports: [FormsModule, ImageGalleryComponent],
     templateUrl: './dynamic-fields-form.component.html',
     styleUrls: ['./dynamic-fields-form.component.scss']
 })
diff --git a/web/src/app/shared/expandable-section/expandable-section.component.html b/web/src/app/shared/expandable-section/expandable-section.component.html
index 6f293cd..258788a 100644
--- a/web/src/app/shared/expandable-section/expandable-section.component.html
+++ b/web/src/app/shared/expandable-section/expandable-section.component.html
@@ -2,14 +2,18 @@
 
   <button type="button" class="section-header" (click)="toggle()">
     <span class="section-title">
-      <span class="section-icon" *ngIf="icon">{{ icon }}</span>
+      @if (icon) {
+        <span class="section-icon">{{ icon }}</span>
+      }
       {{ title }}
     </span>
     <lucide-icon [img]="isOpen ? ChevronUp : ChevronDown" [size]="16"></lucide-icon>
   </button>
 
-  <div class="section-content" *ngIf="isOpen">
-    <ng-content></ng-content>
-  </div>
+  @if (isOpen) {
+    <div class="section-content">
+      <ng-content></ng-content>
+    </div>
+  }
 
 </div>
diff --git a/web/src/app/shared/expandable-section/expandable-section.component.ts b/web/src/app/shared/expandable-section/expandable-section.component.ts
index aca1801..8c9512f 100644
--- a/web/src/app/shared/expandable-section/expandable-section.component.ts
+++ b/web/src/app/shared/expandable-section/expandable-section.component.ts
@@ -1,5 +1,5 @@
 import { Component, Input } from '@angular/core';
-import { CommonModule } from '@angular/common';
+
 import { LucideAngularModule, ChevronDown, ChevronUp } from 'lucide-angular';
 
 /**
@@ -13,7 +13,7 @@ import { LucideAngularModule, ChevronDown, ChevronUp } from 'lucide-angular';
  */
 @Component({
     selector: 'app-expandable-section',
-    imports: [CommonModule, LucideAngularModule],
+    imports: [LucideAngularModule],
     templateUrl: './expandable-section.component.html',
     styleUrls: ['./expandable-section.component.scss']
 })
diff --git a/web/src/app/shared/global-search/global-search.component.html b/web/src/app/shared/global-search/global-search.component.html
index 75afdda..9c18879 100644
--- a/web/src/app/shared/global-search/global-search.component.html
+++ b/web/src/app/shared/global-search/global-search.component.html
@@ -1,51 +1,59 @@
-<div class="gs-overlay" *ngIf="open" (click)="close()">
-  <div class="gs-modal" (click)="$event.stopPropagation()">
-
-    <div class="gs-input-row">
-      <lucide-icon [img]="Search" [size]="18" class="gs-search-icon"></lucide-icon>
-      <input
-        #searchInput
-        type="text"
-        class="gs-input"
-        placeholder="Rechercher dans LoreMind..."
-        [ngModel]="query"
-        (ngModelChange)="onQueryChange($event)" />
-      <span class="gs-kbd">ESC</span>
-    </div>
-
-    <div class="gs-results" *ngIf="results.length > 0">
-      <button
-        *ngFor="let r of results; let i = index"
-        class="gs-result"
-        [class.active]="i === activeIndex"
-        (mouseenter)="activeIndex = i"
-        (click)="select(r)">
-        <lucide-icon [img]="iconFor(r.kind)" [size]="16" class="gs-result-icon"></lucide-icon>
-        <div class="gs-result-body">
-          <div class="gs-result-title">{{ r.title }}</div>
-          <div class="gs-result-subtitle" *ngIf="r.subtitle">{{ r.subtitle }}</div>
-          <div class="gs-result-tag">{{ r.tag }}</div>
-        </div>
-      </button>
-    </div>
-
-    <div class="gs-empty" *ngIf="!loading && query.trim().length >= 2 && results.length === 0">
-      Aucun résultat
-    </div>
-    <div class="gs-empty" *ngIf="query.trim().length < 2">
-      Tape au moins 2 caractères
-    </div>
-
-    <div class="gs-footer">
-      <div class="gs-hints">
-        <span><kbd>↑</kbd><kbd>↓</kbd> naviguer</span>
-        <span><kbd>↵</kbd> sélectionner</span>
-        <span><kbd>ESC</kbd> fermer</span>
+@if (open) {
+  <div class="gs-overlay" (click)="close()">
+    <div class="gs-modal" (click)="$event.stopPropagation()">
+      <div class="gs-input-row">
+        <lucide-icon [img]="Search" [size]="18" class="gs-search-icon"></lucide-icon>
+        <input
+          #searchInput
+          type="text"
+          class="gs-input"
+          placeholder="Rechercher dans LoreMind..."
+          [ngModel]="query"
+          (ngModelChange)="onQueryChange($event)" />
+        <span class="gs-kbd">ESC</span>
+      </div>
+      @if (results.length > 0) {
+        <div class="gs-results">
+          @for (r of results; track r; let i = $index) {
+            <button
+              class="gs-result"
+              [class.active]="i === activeIndex"
+              (mouseenter)="activeIndex = i"
+              (click)="select(r)">
+              <lucide-icon [img]="iconFor(r.kind)" [size]="16" class="gs-result-icon"></lucide-icon>
+              <div class="gs-result-body">
+                <div class="gs-result-title">{{ r.title }}</div>
+                @if (r.subtitle) {
+                  <div class="gs-result-subtitle">{{ r.subtitle }}</div>
+                }
+                <div class="gs-result-tag">{{ r.tag }}</div>
+              </div>
+            </button>
+          }
+        </div>
+      }
+      @if (!loading && query.trim().length >= 2 && results.length === 0) {
+        <div class="gs-empty">
+          Aucun résultat
+        </div>
+      }
+      @if (query.trim().length < 2) {
+        <div class="gs-empty">
+          Tape au moins 2 caractères
+        </div>
+      }
+      <div class="gs-footer">
+        <div class="gs-hints">
+          <span><kbd>↑</kbd><kbd>↓</kbd> naviguer</span>
+          <span><kbd>↵</kbd> sélectionner</span>
+          <span><kbd>ESC</kbd> fermer</span>
+        </div>
+        @if (results.length > 0) {
+          <span class="gs-count">
+            {{ results.length }} résultat{{ results.length > 1 ? 's' : '' }}
+          </span>
+        }
       </div>
-      <span class="gs-count" *ngIf="results.length > 0">
-        {{ results.length }} résultat{{ results.length > 1 ? 's' : '' }}
-      </span>
     </div>
-
   </div>
-</div>
+}
diff --git a/web/src/app/shared/global-search/global-search.component.ts b/web/src/app/shared/global-search/global-search.component.ts
index 3271a88..63fee75 100644
--- a/web/src/app/shared/global-search/global-search.component.ts
+++ b/web/src/app/shared/global-search/global-search.component.ts
@@ -1,5 +1,5 @@
 import { Component, ElementRef, HostListener, OnDestroy, OnInit, ViewChild } from '@angular/core';
-import { CommonModule } from '@angular/common';
+
 import { FormsModule } from '@angular/forms';
 import { Router } from '@angular/router';
 import { BehaviorSubject, Subject, forkJoin, of } from 'rxjs';
@@ -31,7 +31,7 @@ interface SearchResult {
  */
 @Component({
     selector: 'app-global-search',
-    imports: [CommonModule, FormsModule, LucideAngularModule],
+    imports: [FormsModule, LucideAngularModule],
     templateUrl: './global-search.component.html',
     styleUrls: ['./global-search.component.scss']
 })
diff --git a/web/src/app/shared/icon-picker/icon-picker.component.ts b/web/src/app/shared/icon-picker/icon-picker.component.ts
index 36ef0e7..42e91c0 100644
--- a/web/src/app/shared/icon-picker/icon-picker.component.ts
+++ b/web/src/app/shared/icon-picker/icon-picker.component.ts
@@ -1,5 +1,5 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { CommonModule } from '@angular/common';
+
 import { LucideAngularModule, LucideIconData } from 'lucide-angular';
 
 export interface IconPickerOption {
@@ -20,21 +20,22 @@ export interface IconPickerOption {
  */
 @Component({
     selector: 'app-icon-picker',
-    imports: [CommonModule, LucideAngularModule],
+    imports: [LucideAngularModule],
     template: `
     <div class="icon-grid">
-      <button
-        type="button"
-        class="icon-btn"
-        *ngFor="let option of options"
-        [class.selected]="selected === option.key"
-        [attr.aria-pressed]="selected === option.key"
-        [title]="option.key"
-        (click)="pick(option.key)">
-        <lucide-icon [img]="option.icon" [size]="18"></lucide-icon>
-      </button>
+      @for (option of options; track option) {
+        <button
+          type="button"
+          class="icon-btn"
+          [class.selected]="selected === option.key"
+          [attr.aria-pressed]="selected === option.key"
+          [title]="option.key"
+          (click)="pick(option.key)">
+          <lucide-icon [img]="option.icon" [size]="18"></lucide-icon>
+        </button>
+      }
     </div>
-  `,
+    `,
     styleUrls: ['./icon-picker.component.scss']
 })
 export class IconPickerComponent {
diff --git a/web/src/app/shared/image-gallery/image-gallery.component.html b/web/src/app/shared/image-gallery/image-gallery.component.html
index 47f1907..57e8e2f 100644
--- a/web/src/app/shared/image-gallery/image-gallery.component.html
+++ b/web/src/app/shared/image-gallery/image-gallery.component.html
@@ -1,201 +1,261 @@
 <!-- Container avec classe dynamique selon le layout choisi. -->
-<div [ngSwitch]="effectiveLayout" class="gallery-root">
-
-  <!-- =================== HERO =================== -->
-  <ng-container *ngSwitchCase="'HERO'">
-    <div class="hero" *ngIf="imageIds.length > 0 || editable; else empty">
-      <div class="hero-main"
-           *ngIf="heroId"
-           (click)="openLightbox(heroId)"
-           role="button"
-           tabindex="0">
-        <img [src]="urlFor(heroId)" [alt]="'Illustration principale'" loading="lazy" />
-        <button type="button"
-                class="gallery-remove"
-                *ngIf="editable"
-                (click)="remove(heroId, $event)"
-                aria-label="Retirer cette image">
-          <lucide-icon [img]="X" [size]="14"></lucide-icon>
-        </button>
-      </div>
-
-      <div class="hero-rest" *ngIf="restIds.length > 0 || editable">
-        <div class="gallery-tile hero-thumb"
-             *ngFor="let id of restIds"
-             (click)="openLightbox(id)"
-             role="button"
-             tabindex="0">
-          <img [src]="urlFor(id)" [alt]="'Illustration ' + id" loading="lazy" />
-          <button type="button"
+<div class="gallery-root">
+  @switch (effectiveLayout) {
+    <!-- =================== HERO =================== -->
+    @case ('HERO') {
+      @if (imageIds.length > 0 || editable) {
+        <div class="hero">
+          @if (heroId) {
+            <div class="hero-main"
+              (click)="openLightbox(heroId)"
+              role="button"
+              tabindex="0">
+              <img [src]="urlFor(heroId)" [alt]="'Illustration principale'" loading="lazy" />
+              @if (editable) {
+                <button type="button"
+                  class="gallery-remove"
+                  (click)="remove(heroId, $event)"
+                  aria-label="Retirer cette image">
+                  <lucide-icon [img]="X" [size]="14"></lucide-icon>
+                </button>
+              }
+            </div>
+          }
+          @if (restIds.length > 0 || editable) {
+            <div class="hero-rest">
+              @for (id of restIds; track id) {
+                <div class="gallery-tile hero-thumb"
+                  (click)="openLightbox(id)"
+                  role="button"
+                  tabindex="0">
+                  <img [src]="urlFor(id)" [alt]="'Illustration ' + id" loading="lazy" />
+                  @if (editable) {
+                    <button type="button"
+                      class="gallery-remove"
+                      (click)="remove(id, $event)"
+                      aria-label="Retirer cette image">
+                      <lucide-icon [img]="X" [size]="14"></lucide-icon>
+                    </button>
+                  }
+                </div>
+              }
+              @if (editable) {
+                <app-image-uploader [compact]="true" (uploaded)="onUploaded($event)"></app-image-uploader>
+              }
+            </div>
+          }
+          <!-- Si pas de hero mais editable, on montre au moins l'uploader. -->
+          @if (!heroId && editable) {
+            <div class="hero-rest">
+              <app-image-uploader [compact]="true" (uploaded)="onUploaded($event)"></app-image-uploader>
+            </div>
+          }
+        </div>
+      } @else {
+        <div class="gallery-empty">
+          <lucide-icon [img]="ImageIcon" [size]="20"></lucide-icon>
+          <span>Aucune illustration</span>
+        </div>
+      }
+    }
+    <!-- =================== MASONRY =================== -->
+    @case ('MASONRY') {
+      @if (imageIds.length > 0 || editable) {
+        <div class="masonry">
+          @for (id of imageIds; track id) {
+            <div class="masonry-item"
+              (click)="openLightbox(id)"
+              role="button"
+              tabindex="0">
+              <img [src]="urlFor(id)" [alt]="'Illustration ' + id" loading="lazy" />
+              @if (editable) {
+                <button type="button"
                   class="gallery-remove"
-                  *ngIf="editable"
                   (click)="remove(id, $event)"
                   aria-label="Retirer cette image">
-            <lucide-icon [img]="X" [size]="14"></lucide-icon>
-          </button>
+                  <lucide-icon [img]="X" [size]="14"></lucide-icon>
+                </button>
+              }
+            </div>
+          }
+          @if (editable) {
+            <div class="masonry-item masonry-uploader">
+              <app-image-uploader [compact]="true" (uploaded)="onUploaded($event)"></app-image-uploader>
+            </div>
+          }
         </div>
-        <app-image-uploader *ngIf="editable" [compact]="true" (uploaded)="onUploaded($event)"></app-image-uploader>
-      </div>
-
-      <!-- Si pas de hero mais editable, on montre au moins l'uploader. -->
-      <div class="hero-rest" *ngIf="!heroId && editable">
-        <app-image-uploader [compact]="true" (uploaded)="onUploaded($event)"></app-image-uploader>
-      </div>
-    </div>
-  </ng-container>
-
-  <!-- =================== MASONRY =================== -->
-  <ng-container *ngSwitchCase="'MASONRY'">
-    <div class="masonry" *ngIf="imageIds.length > 0 || editable; else empty">
-      <div class="masonry-item"
-           *ngFor="let id of imageIds"
-           (click)="openLightbox(id)"
-           role="button"
-           tabindex="0">
-        <img [src]="urlFor(id)" [alt]="'Illustration ' + id" loading="lazy" />
-        <button type="button"
-                class="gallery-remove"
-                *ngIf="editable"
-                (click)="remove(id, $event)"
-                aria-label="Retirer cette image">
-          <lucide-icon [img]="X" [size]="14"></lucide-icon>
-        </button>
-      </div>
-      <div class="masonry-item masonry-uploader" *ngIf="editable">
-        <app-image-uploader [compact]="true" (uploaded)="onUploaded($event)"></app-image-uploader>
-      </div>
-    </div>
-  </ng-container>
-
-  <!-- =================== CAROUSEL =================== -->
-  <ng-container *ngSwitchCase="'CAROUSEL'">
-    <div class="carousel" *ngIf="imageIds.length > 0 || editable; else empty">
-      <button type="button"
+      } @else {
+        <div class="gallery-empty">
+          <lucide-icon [img]="ImageIcon" [size]="20"></lucide-icon>
+          <span>Aucune illustration</span>
+        </div>
+      }
+    }
+    <!-- =================== CAROUSEL =================== -->
+    @case ('CAROUSEL') {
+      @if (imageIds.length > 0 || editable) {
+        <div class="carousel">
+          @if (imageIds.length > 1) {
+            <button type="button"
               class="carousel-nav carousel-prev"
-              *ngIf="imageIds.length > 1"
               (click)="scrollCarousel(-1)"
               aria-label="Precedent">
-        <lucide-icon [img]="ChevronLeft" [size]="20"></lucide-icon>
-      </button>
-
-      <div class="carousel-track" #carouselTrack>
-        <div class="carousel-slide"
-             *ngFor="let id of imageIds"
-             (click)="openLightbox(id)"
-             role="button"
-             tabindex="0">
-          <img [src]="urlFor(id)" [alt]="'Illustration ' + id" loading="lazy" />
-          <button type="button"
-                  class="gallery-remove"
-                  *ngIf="editable"
-                  (click)="remove(id, $event)"
-                  aria-label="Retirer cette image">
-            <lucide-icon [img]="X" [size]="14"></lucide-icon>
-          </button>
-        </div>
-        <div class="carousel-slide carousel-uploader" *ngIf="editable">
-          <app-image-uploader [compact]="true" (uploaded)="onUploaded($event)"></app-image-uploader>
-        </div>
-      </div>
-
-      <button type="button"
+              <lucide-icon [img]="ChevronLeft" [size]="20"></lucide-icon>
+            </button>
+          }
+          <div class="carousel-track" #carouselTrack>
+            @for (id of imageIds; track id) {
+              <div class="carousel-slide"
+                (click)="openLightbox(id)"
+                role="button"
+                tabindex="0">
+                <img [src]="urlFor(id)" [alt]="'Illustration ' + id" loading="lazy" />
+                @if (editable) {
+                  <button type="button"
+                    class="gallery-remove"
+                    (click)="remove(id, $event)"
+                    aria-label="Retirer cette image">
+                    <lucide-icon [img]="X" [size]="14"></lucide-icon>
+                  </button>
+                }
+              </div>
+            }
+            @if (editable) {
+              <div class="carousel-slide carousel-uploader">
+                <app-image-uploader [compact]="true" (uploaded)="onUploaded($event)"></app-image-uploader>
+              </div>
+            }
+          </div>
+          @if (imageIds.length > 1) {
+            <button type="button"
               class="carousel-nav carousel-next"
-              *ngIf="imageIds.length > 1"
               (click)="scrollCarousel(1)"
               aria-label="Suivant">
-        <lucide-icon [img]="ChevronRight" [size]="20"></lucide-icon>
-      </button>
-    </div>
-  </ng-container>
-
-  <!-- =================== EDITORIAL =================== -->
-  <!-- Rendu adaptatif facon magazine : 1 image → hero, 2 → diptyque, 3 → feature + 2 satellites, 4+ → feature + 3 satellites. -->
-  <ng-container *ngSwitchCase="'EDITORIAL'">
-    <div class="editorial" *ngIf="imageIds.length > 0 || editable; else empty">
-      <div class="editorial-item"
-           *ngFor="let id of imageIds; let i = index"
-           [class.editorial-feature]="i === 0"
-           (click)="openLightbox(id)"
-           role="button"
-           tabindex="0">
-        <img [src]="urlFor(id)" [alt]="'Illustration ' + id" loading="lazy" />
-        <button type="button"
-                class="gallery-remove"
-                *ngIf="editable"
-                (click)="remove(id, $event)"
-                aria-label="Retirer cette image">
-          <lucide-icon [img]="X" [size]="14"></lucide-icon>
-        </button>
-      </div>
-      <div class="editorial-item editorial-uploader" *ngIf="editable">
-        <app-image-uploader [compact]="true" (uploaded)="onUploaded($event)"></app-image-uploader>
-      </div>
-    </div>
-  </ng-container>
-
-  <!-- =================== MAPS =================== -->
-  <!-- Cartes / plans : grandes vignettes, ratio natif preserve (pas de crop). -->
-  <ng-container *ngSwitchCase="'MAPS'">
-    <div class="maps" *ngIf="imageIds.length > 0 || editable; else empty">
-      <div class="map-tile"
-           *ngFor="let id of imageIds"
-           (click)="openLightbox(id)"
-           role="button"
-           tabindex="0">
-        <img [src]="urlFor(id)" [alt]="'Carte ' + id" loading="lazy" />
-        <button type="button"
-                class="gallery-remove"
-                *ngIf="editable"
-                (click)="remove(id, $event)"
-                aria-label="Retirer cette carte">
-          <lucide-icon [img]="X" [size]="14"></lucide-icon>
-        </button>
-      </div>
-      <div class="map-tile map-uploader" *ngIf="editable">
-        <app-image-uploader [compact]="true" (uploaded)="onUploaded($event)"></app-image-uploader>
-      </div>
-    </div>
-  </ng-container>
-
-  <!-- =================== GALLERY (default) =================== -->
-  <ng-container *ngSwitchDefault>
-    <div class="gallery" *ngIf="imageIds.length > 0 || editable; else empty">
-      <div class="gallery-tile"
-           *ngFor="let id of imageIds"
-           (click)="openLightbox(id)"
-           role="button"
-           tabindex="0">
-        <img [src]="urlFor(id)" [alt]="'Illustration ' + id" loading="lazy" />
-        <button type="button"
-                class="gallery-remove"
-                *ngIf="editable"
-                (click)="remove(id, $event)"
-                aria-label="Retirer cette image">
-          <lucide-icon [img]="X" [size]="14"></lucide-icon>
-        </button>
-      </div>
-      <app-image-uploader *ngIf="editable" [compact]="true" (uploaded)="onUploaded($event)"></app-image-uploader>
-    </div>
-  </ng-container>
-
+              <lucide-icon [img]="ChevronRight" [size]="20"></lucide-icon>
+            </button>
+          }
+        </div>
+      } @else {
+        <div class="gallery-empty">
+          <lucide-icon [img]="ImageIcon" [size]="20"></lucide-icon>
+          <span>Aucune illustration</span>
+        </div>
+      }
+    }
+    <!-- =================== EDITORIAL =================== -->
+    <!-- Rendu adaptatif facon magazine : 1 image → hero, 2 → diptyque, 3 → feature + 2 satellites, 4+ → feature + 3 satellites. -->
+    @case ('EDITORIAL') {
+      @if (imageIds.length > 0 || editable) {
+        <div class="editorial">
+          @for (id of imageIds; track id; let i = $index) {
+            <div class="editorial-item"
+              [class.editorial-feature]="i === 0"
+              (click)="openLightbox(id)"
+              role="button"
+              tabindex="0">
+              <img [src]="urlFor(id)" [alt]="'Illustration ' + id" loading="lazy" />
+              @if (editable) {
+                <button type="button"
+                  class="gallery-remove"
+                  (click)="remove(id, $event)"
+                  aria-label="Retirer cette image">
+                  <lucide-icon [img]="X" [size]="14"></lucide-icon>
+                </button>
+              }
+            </div>
+          }
+          @if (editable) {
+            <div class="editorial-item editorial-uploader">
+              <app-image-uploader [compact]="true" (uploaded)="onUploaded($event)"></app-image-uploader>
+            </div>
+          }
+        </div>
+      } @else {
+        <div class="gallery-empty">
+          <lucide-icon [img]="ImageIcon" [size]="20"></lucide-icon>
+          <span>Aucune illustration</span>
+        </div>
+      }
+    }
+    <!-- =================== MAPS =================== -->
+    <!-- Cartes / plans : grandes vignettes, ratio natif preserve (pas de crop). -->
+    @case ('MAPS') {
+      @if (imageIds.length > 0 || editable) {
+        <div class="maps">
+          @for (id of imageIds; track id) {
+            <div class="map-tile"
+              (click)="openLightbox(id)"
+              role="button"
+              tabindex="0">
+              <img [src]="urlFor(id)" [alt]="'Carte ' + id" loading="lazy" />
+              @if (editable) {
+                <button type="button"
+                  class="gallery-remove"
+                  (click)="remove(id, $event)"
+                  aria-label="Retirer cette carte">
+                  <lucide-icon [img]="X" [size]="14"></lucide-icon>
+                </button>
+              }
+            </div>
+          }
+          @if (editable) {
+            <div class="map-tile map-uploader">
+              <app-image-uploader [compact]="true" (uploaded)="onUploaded($event)"></app-image-uploader>
+            </div>
+          }
+        </div>
+      } @else {
+        <div class="gallery-empty">
+          <lucide-icon [img]="ImageIcon" [size]="20"></lucide-icon>
+          <span>Aucune illustration</span>
+        </div>
+      }
+    }
+    <!-- =================== GALLERY (default) =================== -->
+    @default {
+      @if (imageIds.length > 0 || editable) {
+        <div class="gallery">
+          @for (id of imageIds; track id) {
+            <div class="gallery-tile"
+              (click)="openLightbox(id)"
+              role="button"
+              tabindex="0">
+              <img [src]="urlFor(id)" [alt]="'Illustration ' + id" loading="lazy" />
+              @if (editable) {
+                <button type="button"
+                  class="gallery-remove"
+                  (click)="remove(id, $event)"
+                  aria-label="Retirer cette image">
+                  <lucide-icon [img]="X" [size]="14"></lucide-icon>
+                </button>
+              }
+            </div>
+          }
+          @if (editable) {
+            <app-image-uploader [compact]="true" (uploaded)="onUploaded($event)"></app-image-uploader>
+          }
+        </div>
+      } @else {
+        <div class="gallery-empty">
+          <lucide-icon [img]="ImageIcon" [size]="20"></lucide-icon>
+          <span>Aucune illustration</span>
+        </div>
+      }
+    }
+  }
 </div>
 
 <!-- Etat vide (lecture uniquement). -->
-<ng-template #empty>
-  <div class="gallery-empty">
-    <lucide-icon [img]="ImageIcon" [size]="20"></lucide-icon>
-    <span>Aucune illustration</span>
-  </div>
-</ng-template>
 
 <!-- Lightbox : image plein ecran sur fond noir, clic pour fermer. -->
-<div class="lightbox-backdrop"
-     *ngIf="lightboxId"
-     (click)="closeLightbox()"
-     role="dialog"
-     aria-label="Image en plein ecran">
-  <img [src]="urlFor(lightboxId)" alt="Image agrandie" class="lightbox-image" />
-  <button type="button" class="lightbox-close" (click)="closeLightbox()" aria-label="Fermer">
-    <lucide-icon [img]="X" [size]="24"></lucide-icon>
-  </button>
-</div>
+@if (lightboxId) {
+  <div class="lightbox-backdrop"
+    (click)="closeLightbox()"
+    role="dialog"
+    aria-label="Image en plein ecran">
+    <img [src]="urlFor(lightboxId)" alt="Image agrandie" class="lightbox-image" />
+    <button type="button" class="lightbox-close" (click)="closeLightbox()" aria-label="Fermer">
+      <lucide-icon [img]="X" [size]="24"></lucide-icon>
+    </button>
+  </div>
+}
diff --git a/web/src/app/shared/image-gallery/image-gallery.component.ts b/web/src/app/shared/image-gallery/image-gallery.component.ts
index dc4f53f..de2388e 100644
--- a/web/src/app/shared/image-gallery/image-gallery.component.ts
+++ b/web/src/app/shared/image-gallery/image-gallery.component.ts
@@ -1,5 +1,5 @@
 import { Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core';
-import { CommonModule } from '@angular/common';
+
 import { LucideAngularModule, X, Image as ImageIcon, ChevronLeft, ChevronRight } from 'lucide-angular';
 import { ImageService } from '../../services/image.service';
 import { Image } from '../../services/image.model';
@@ -27,7 +27,7 @@ import { ImageUploaderComponent } from '../image-uploader/image-uploader.compone
  */
 @Component({
     selector: 'app-image-gallery',
-    imports: [CommonModule, LucideAngularModule, ImageUploaderComponent],
+    imports: [LucideAngularModule, ImageUploaderComponent],
     templateUrl: './image-gallery.component.html',
     styleUrls: ['./image-gallery.component.scss']
 })
diff --git a/web/src/app/shared/image-uploader/image-uploader.component.html b/web/src/app/shared/image-uploader/image-uploader.component.html
index 9586d95..77562ad 100644
--- a/web/src/app/shared/image-uploader/image-uploader.component.html
+++ b/web/src/app/shared/image-uploader/image-uploader.component.html
@@ -1,51 +1,53 @@
 <!-- Mode compact : bouton "+ ajouter" carre, utilise dans les galeries. -->
-<ng-container *ngIf="compact; else dropZone">
+@if (compact) {
   <label class="upload-compact" [class.loading]="uploading" [title]="errorMessage || 'Ajouter une image'">
-    <ng-container *ngIf="!uploading; else spinner">
+    @if (!uploading) {
       <lucide-icon [img]="Upload" [size]="18"></lucide-icon>
       <span>Ajouter</span>
-    </ng-container>
+    } @else {
+      <div class="upload-spinner" aria-label="Upload en cours"></div>
+      <p class="upload-zone-hint">Upload en cours...</p>
+    }
     <input type="file"
-           accept="image/jpeg,image/png,image/webp,image/gif"
-           (change)="onFileSelected($event)"
-           [disabled]="uploading"
-           hidden />
+      accept="image/jpeg,image/png,image/webp,image/gif"
+      (change)="onFileSelected($event)"
+      [disabled]="uploading"
+      hidden />
   </label>
-  <p *ngIf="errorMessage" class="upload-error-inline">
-    <lucide-icon [img]="AlertCircle" [size]="12"></lucide-icon>
-    {{ errorMessage }}
-  </p>
-</ng-container>
-
-<!-- Mode standard : grande drop-zone cliquable. -->
-<ng-template #dropZone>
+  @if (errorMessage) {
+    <p class="upload-error-inline">
+      <lucide-icon [img]="AlertCircle" [size]="12"></lucide-icon>
+      {{ errorMessage }}
+    </p>
+  }
+} @else {
   <label class="upload-zone"
-         [class.drag-over]="dragOver"
-         [class.loading]="uploading"
-         (dragover)="onDragOver($event)"
-         (dragleave)="onDragLeave()"
-         (drop)="onDrop($event)">
-
-    <ng-container *ngIf="!uploading; else spinner">
+    [class.drag-over]="dragOver"
+    [class.loading]="uploading"
+    (dragover)="onDragOver($event)"
+    (dragleave)="onDragLeave()"
+    (drop)="onDrop($event)">
+    @if (!uploading) {
       <lucide-icon [img]="Upload" [size]="32"></lucide-icon>
       <p class="upload-zone-title">Glisse une image ici</p>
       <p class="upload-zone-hint">ou clique pour choisir un fichier (JPEG, PNG, WebP, GIF, max 10 Mo)</p>
-    </ng-container>
-
+    } @else {
+      <div class="upload-spinner" aria-label="Upload en cours"></div>
+      <p class="upload-zone-hint">Upload en cours...</p>
+    }
     <input type="file"
-           accept="image/jpeg,image/png,image/webp,image/gif"
-           (change)="onFileSelected($event)"
-           [disabled]="uploading"
-           hidden />
+      accept="image/jpeg,image/png,image/webp,image/gif"
+      (change)="onFileSelected($event)"
+      [disabled]="uploading"
+      hidden />
   </label>
+  @if (errorMessage) {
+    <p class="upload-error" role="alert">
+      <lucide-icon [img]="AlertCircle" [size]="14"></lucide-icon>
+      {{ errorMessage }}
+    </p>
+  }
+}
 
-  <p *ngIf="errorMessage" class="upload-error" role="alert">
-    <lucide-icon [img]="AlertCircle" [size]="14"></lucide-icon>
-    {{ errorMessage }}
-  </p>
-</ng-template>
+<!-- Mode standard : grande drop-zone cliquable. -->
 
-<ng-template #spinner>
-  <div class="upload-spinner" aria-label="Upload en cours"></div>
-  <p class="upload-zone-hint">Upload en cours...</p>
-</ng-template>
diff --git a/web/src/app/shared/image-uploader/image-uploader.component.ts b/web/src/app/shared/image-uploader/image-uploader.component.ts
index 6533ad5..a0b43bc 100644
--- a/web/src/app/shared/image-uploader/image-uploader.component.ts
+++ b/web/src/app/shared/image-uploader/image-uploader.component.ts
@@ -1,5 +1,5 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { CommonModule } from '@angular/common';
+
 import { LucideAngularModule, Upload, AlertCircle } from 'lucide-angular';
 import { ImageService } from '../../services/image.service';
 import { Image } from '../../services/image.model';
@@ -19,7 +19,7 @@ import { Image } from '../../services/image.model';
  */
 @Component({
     selector: 'app-image-uploader',
-    imports: [CommonModule, LucideAngularModule],
+    imports: [LucideAngularModule],
     templateUrl: './image-uploader.component.html',
     styleUrls: ['./image-uploader.component.scss']
 })
diff --git a/web/src/app/shared/lore-link-picker/lore-link-picker.component.html b/web/src/app/shared/lore-link-picker/lore-link-picker.component.html
index 619eee5..10e2e80 100644
--- a/web/src/app/shared/lore-link-picker/lore-link-picker.component.html
+++ b/web/src/app/shared/lore-link-picker/lore-link-picker.component.html
@@ -1,22 +1,26 @@
 <div class="picker">
 
   <!-- Chips des pages déjà liées -->
-  <div class="linked-chips" *ngIf="linkedPages.length > 0">
-    <span class="chip" *ngFor="let p of linkedPages">
-      <a
-        class="chip-label"
-        [href]="pageUrl(p.id!)"
-        target="_blank"
-        rel="noopener"
-        title="Ouvrir dans un nouvel onglet">
-        <lucide-icon [img]="Link2" [size]="12"></lucide-icon>
-        {{ p.title }}
-      </a>
-      <button type="button" class="chip-remove" (click)="remove(p.id!)" title="Retirer le lien">
-        <lucide-icon [img]="X" [size]="12"></lucide-icon>
-      </button>
-    </span>
-  </div>
+  @if (linkedPages.length > 0) {
+    <div class="linked-chips">
+      @for (p of linkedPages; track p) {
+        <span class="chip">
+          <a
+            class="chip-label"
+            [href]="pageUrl(p.id!)"
+            target="_blank"
+            rel="noopener"
+            title="Ouvrir dans un nouvel onglet">
+            <lucide-icon [img]="Link2" [size]="12"></lucide-icon>
+            {{ p.title }}
+          </a>
+          <button type="button" class="chip-remove" (click)="remove(p.id!)" title="Retirer le lien">
+            <lucide-icon [img]="X" [size]="12"></lucide-icon>
+          </button>
+        </span>
+      }
+    </div>
+  }
 
   <!-- Input + dropdown de suggestions -->
   <div class="search-wrapper">
@@ -28,15 +32,21 @@
       (focus)="dropdownOpen = true"
       (blur)="onBlur()" />
 
-    <ul class="suggestions" *ngIf="dropdownOpen && suggestions.length > 0">
-      <li *ngFor="let p of suggestions" (mousedown)="add(p)">
-        {{ p.title }}
-      </li>
-    </ul>
+    @if (dropdownOpen && suggestions.length > 0) {
+      <ul class="suggestions">
+        @for (p of suggestions; track p) {
+          <li (mousedown)="add(p)">
+            {{ p.title }}
+          </li>
+        }
+      </ul>
+    }
 
-    <p class="empty-hint" *ngIf="dropdownOpen && query && suggestions.length === 0">
-      Aucune page ne correspond
-    </p>
+    @if (dropdownOpen && query && suggestions.length === 0) {
+      <p class="empty-hint">
+        Aucune page ne correspond
+      </p>
+    }
   </div>
 
 </div>
diff --git a/web/src/app/shared/lore-link-picker/lore-link-picker.component.ts b/web/src/app/shared/lore-link-picker/lore-link-picker.component.ts
index 685e75d..5bc3bb0 100644
--- a/web/src/app/shared/lore-link-picker/lore-link-picker.component.ts
+++ b/web/src/app/shared/lore-link-picker/lore-link-picker.component.ts
@@ -1,5 +1,5 @@
 import { Component, Input, Output, EventEmitter } from '@angular/core';
-import { CommonModule } from '@angular/common';
+
 import { FormsModule } from '@angular/forms';
 import { LucideAngularModule, X, Link2 } from 'lucide-angular';
 import { Page } from '../../services/page.model';
@@ -26,7 +26,7 @@ import { Page } from '../../services/page.model';
  */
 @Component({
     selector: 'app-lore-link-picker',
-    imports: [CommonModule, FormsModule, LucideAngularModule],
+    imports: [FormsModule, LucideAngularModule],
     templateUrl: './lore-link-picker.component.html',
     styleUrls: ['./lore-link-picker.component.scss']
 })
diff --git a/web/src/app/shared/persona-view/persona-view.component.html b/web/src/app/shared/persona-view/persona-view.component.html
index 8df2854..1b1e510 100644
--- a/web/src/app/shared/persona-view/persona-view.component.html
+++ b/web/src/app/shared/persona-view/persona-view.component.html
@@ -1,108 +1,131 @@
-<div class="pv" *ngIf="persona">
-
-  <!-- Bandeau / Header -->
-  <div class="pv-banner" *ngIf="persona.headerImageId">
-    <img [src]="contentUrl(persona.headerImageId)" alt="" />
-    <div class="pv-banner-fade"></div>
-  </div>
-
-  <!-- En-tete : portrait + titre -->
-  <div class="pv-hero" [class.no-banner]="!persona.headerImageId">
-    <div class="pv-portrait" *ngIf="persona.portraitImageId">
-      <img [src]="contentUrl(persona.portraitImageId)" alt="" />
-    </div>
-
-    <div class="pv-title-block">
-      <h1 class="pv-name">{{ persona.name }}</h1>
-      <p *ngIf="subtitle" class="pv-subtitle">{{ subtitle }}</p>
-
-      <!-- Badges des NUMBER isoles (rendu compact, evite la grosse card pour 1 valeur) -->
-      <div *ngIf="heroBadges.length" class="pv-hero-badges">
-        <span *ngFor="let b of heroBadges" class="pv-hero-badge">
-          <span class="pv-hero-badge-label">{{ b.label }}</span>
-          <span class="pv-hero-badge-value">{{ b.value }}</span>
-        </span>
+@if (persona) {
+  <div class="pv">
+    <!-- Bandeau / Header -->
+    @if (persona.headerImageId) {
+      <div class="pv-banner">
+        <img [src]="contentUrl(persona.headerImageId)" alt="" />
+        <div class="pv-banner-fade"></div>
+      </div>
+    }
+    <!-- En-tete : portrait + titre -->
+    <div class="pv-hero" [class.no-banner]="!persona.headerImageId">
+      @if (persona.portraitImageId) {
+        <div class="pv-portrait">
+          <img [src]="contentUrl(persona.portraitImageId)" alt="" />
+        </div>
+      }
+      <div class="pv-title-block">
+        <h1 class="pv-name">{{ persona.name }}</h1>
+        @if (subtitle) {
+          <p class="pv-subtitle">{{ subtitle }}</p>
+        }
+        <!-- Badges des NUMBER isoles (rendu compact, evite la grosse card pour 1 valeur) -->
+        @if (heroBadges.length) {
+          <div class="pv-hero-badges">
+            @for (b of heroBadges; track b) {
+              <span class="pv-hero-badge">
+                <span class="pv-hero-badge-label">{{ b.label }}</span>
+                <span class="pv-hero-badge-value">{{ b.value }}</span>
+              </span>
+            }
+          </div>
+        }
       </div>
     </div>
-  </div>
-
-  <!-- Sections rendues dans l'ordre du template -->
-  <div class="pv-sections">
-    <ng-container *ngFor="let s of orderedSections">
-
-      <!-- TEXT -->
-      <section *ngIf="s.kind === 'TEXT'" class="pv-section">
-        <h2 class="pv-section-title">{{ s.name }}</h2>
-        <div class="pv-section-body">
-          <p class="pv-paragraph">
-            {{ firstParagraph(s.value) }}
-          </p>
-          <p *ngIf="restAfterFirstParagraph(s.value)" class="pv-paragraph">
-            {{ restAfterFirstParagraph(s.value) }}
-          </p>
+    <!-- Sections rendues dans l'ordre du template -->
+    <div class="pv-sections">
+      @for (s of orderedSections; track s) {
+        <!-- TEXT -->
+        @if (s.kind === 'TEXT') {
+          <section class="pv-section">
+            <h2 class="pv-section-title">{{ s.name }}</h2>
+            <div class="pv-section-body">
+              <p class="pv-paragraph">
+                {{ firstParagraph(s.value) }}
+              </p>
+              @if (restAfterFirstParagraph(s.value)) {
+                <p class="pv-paragraph">
+                  {{ restAfterFirstParagraph(s.value) }}
+                </p>
+              }
+            </div>
+          </section>
+        }
+        <!-- NUMBER_GROUP : NUMBER consecutifs - table si <=6, sinon liste 2 cols -->
+        @if (s.kind === 'NUMBER_GROUP') {
+          <section class="pv-section pv-section-number">
+            @if (s.entries.length <= 6) {
+              <div class="pv-kv-table" [style.--cols]="s.entries.length">
+                <div class="pv-kv-row pv-kv-row-labels">
+                  @for (e of s.entries; track e) {
+                    <div class="pv-kv-cell">{{ e.label }}</div>
+                  }
+                </div>
+                <div class="pv-kv-row pv-kv-row-values">
+                  @for (e of s.entries; track e) {
+                    <div class="pv-kv-cell">{{ e.value }}</div>
+                  }
+                </div>
+              </div>
+            } @else {
+              <div class="pv-kv-list">
+                @for (e of s.entries; track e) {
+                  <div class="pv-kv-list-row">
+                    <span class="pv-kv-list-label">{{ e.label }}</span>
+                    <span class="pv-kv-list-dots"></span>
+                    <span class="pv-kv-list-value">{{ e.value }}</span>
+                  </div>
+                }
+              </div>
+            }
+          </section>
+        }
+        <!-- KEY_VALUE_LIST : table style Foundry si <=6, sinon liste 2 cols (skills) -->
+        @if (s.kind === 'KEY_VALUE_LIST') {
+          <section class="pv-section pv-section-kv">
+            <h2 class="pv-section-title">{{ s.name }}</h2>
+            @if (s.entries.length <= 6) {
+              <div class="pv-kv-table" [style.--cols]="s.entries.length">
+                <div class="pv-kv-row pv-kv-row-labels">
+                  @for (e of s.entries; track e) {
+                    <div class="pv-kv-cell">{{ e.label }}</div>
+                  }
+                </div>
+                <div class="pv-kv-row pv-kv-row-values">
+                  @for (e of s.entries; track e) {
+                    <div class="pv-kv-cell">{{ e.value || '—' }}</div>
+                  }
+                </div>
+              </div>
+            } @else {
+              <div class="pv-kv-list">
+                @for (e of s.entries; track e) {
+                  <div class="pv-kv-list-row">
+                    <span class="pv-kv-list-label">{{ e.label }}</span>
+                    <span class="pv-kv-list-dots"></span>
+                    <span class="pv-kv-list-value">{{ e.value || '—' }}</span>
+                  </div>
+                }
+              </div>
+            }
+          </section>
+        }
+        <!-- IMAGE : galerie -->
+        @if (s.kind === 'IMAGE') {
+          <section class="pv-section pv-section-images">
+            <h2 class="pv-section-title">{{ s.name }}</h2>
+            <app-image-gallery [imageIds]="s.ids" [layout]="s.layout" [editable]="false">
+            </app-image-gallery>
+          </section>
+        }
+      }
+      <!-- Etat vide -->
+      @if (orderedSections.length === 0) {
+        <div class="pv-empty">
+          <lucide-icon [img]="BookOpen" [size]="32"></lucide-icon>
+          <p>Cette fiche est encore vide.</p>
         </div>
-      </section>
-
-      <!-- NUMBER_GROUP : NUMBER consecutifs - table si <=6, sinon liste 2 cols -->
-      <section *ngIf="s.kind === 'NUMBER_GROUP'" class="pv-section pv-section-number">
-        <ng-container *ngIf="s.entries.length <= 6; else numGroupList">
-          <div class="pv-kv-table" [style.--cols]="s.entries.length">
-            <div class="pv-kv-row pv-kv-row-labels">
-              <div class="pv-kv-cell" *ngFor="let e of s.entries">{{ e.label }}</div>
-            </div>
-            <div class="pv-kv-row pv-kv-row-values">
-              <div class="pv-kv-cell" *ngFor="let e of s.entries">{{ e.value }}</div>
-            </div>
-          </div>
-        </ng-container>
-        <ng-template #numGroupList>
-          <div class="pv-kv-list">
-            <div class="pv-kv-list-row" *ngFor="let e of s.entries">
-              <span class="pv-kv-list-label">{{ e.label }}</span>
-              <span class="pv-kv-list-dots"></span>
-              <span class="pv-kv-list-value">{{ e.value }}</span>
-            </div>
-          </div>
-        </ng-template>
-      </section>
-
-      <!-- KEY_VALUE_LIST : table style Foundry si <=6, sinon liste 2 cols (skills) -->
-      <section *ngIf="s.kind === 'KEY_VALUE_LIST'" class="pv-section pv-section-kv">
-        <h2 class="pv-section-title">{{ s.name }}</h2>
-        <ng-container *ngIf="s.entries.length <= 6; else kvList">
-          <div class="pv-kv-table" [style.--cols]="s.entries.length">
-            <div class="pv-kv-row pv-kv-row-labels">
-              <div class="pv-kv-cell" *ngFor="let e of s.entries">{{ e.label }}</div>
-            </div>
-            <div class="pv-kv-row pv-kv-row-values">
-              <div class="pv-kv-cell" *ngFor="let e of s.entries">{{ e.value || '—' }}</div>
-            </div>
-          </div>
-        </ng-container>
-        <ng-template #kvList>
-          <div class="pv-kv-list">
-            <div class="pv-kv-list-row" *ngFor="let e of s.entries">
-              <span class="pv-kv-list-label">{{ e.label }}</span>
-              <span class="pv-kv-list-dots"></span>
-              <span class="pv-kv-list-value">{{ e.value || '—' }}</span>
-            </div>
-          </div>
-        </ng-template>
-      </section>
-
-      <!-- IMAGE : galerie -->
-      <section *ngIf="s.kind === 'IMAGE'" class="pv-section pv-section-images">
-        <h2 class="pv-section-title">{{ s.name }}</h2>
-        <app-image-gallery [imageIds]="s.ids" [layout]="s.layout" [editable]="false">
-        </app-image-gallery>
-      </section>
-
-    </ng-container>
-
-    <!-- Etat vide -->
-    <div *ngIf="orderedSections.length === 0" class="pv-empty">
-      <lucide-icon [img]="BookOpen" [size]="32"></lucide-icon>
-      <p>Cette fiche est encore vide.</p>
+      }
     </div>
   </div>
-</div>
+}
diff --git a/web/src/app/shared/persona-view/persona-view.component.ts b/web/src/app/shared/persona-view/persona-view.component.ts
index 9674150..13bf869 100644
--- a/web/src/app/shared/persona-view/persona-view.component.ts
+++ b/web/src/app/shared/persona-view/persona-view.component.ts
@@ -1,5 +1,5 @@
 import { Component, Input } from '@angular/core';
-import { CommonModule } from '@angular/common';
+
 import { LucideAngularModule, BookOpen } from 'lucide-angular';
 import { TemplateField, ImageLayout } from '../../services/template.model';
 
@@ -34,7 +34,7 @@ export interface PersonaLike {
 
 @Component({
     selector: 'app-persona-view',
-    imports: [CommonModule, LucideAngularModule, ImageGalleryComponent],
+    imports: [LucideAngularModule, ImageGalleryComponent],
     templateUrl: './persona-view.component.html',
     styleUrls: ['./persona-view.component.scss']
 })
diff --git a/web/src/app/shared/playthrough-flags-manager/playthrough-flags-manager.component.html b/web/src/app/shared/playthrough-flags-manager/playthrough-flags-manager.component.html
index a1fa71e..9b3c63e 100644
--- a/web/src/app/shared/playthrough-flags-manager/playthrough-flags-manager.component.html
+++ b/web/src/app/shared/playthrough-flags-manager/playthrough-flags-manager.component.html
@@ -1,21 +1,27 @@
 <div class="flags-manager">
 
-  <p class="flags-empty" *ngIf="!loading && rows.length === 0">
-    Aucun fait référencé. Ajoutez une condition « Quand un fait est vrai » sur
-    au moins une quête pour qu'il apparaisse ici.
-  </p>
+  @if (!loading && rows.length === 0) {
+    <p class="flags-empty">
+      Aucun fait référencé. Ajoutez une condition « Quand un fait est vrai » sur
+      au moins une quête pour qu'il apparaisse ici.
+    </p>
+  }
 
-  <ul class="flag-list" *ngIf="rows.length > 0">
-    <li class="flag-row" *ngFor="let r of rows" [class.flag-on]="r.value">
-      <label class="flag-toggle">
-        <input type="checkbox" [checked]="r.value" (change)="toggle(r)" />
-        <span class="flag-toggle-slider"></span>
-      </label>
-      <div class="flag-info">
-        <span class="flag-name">{{ r.name }}</span>
-      </div>
-      <span class="flag-value">{{ r.value ? 'vrai' : 'faux' }}</span>
-    </li>
-  </ul>
+  @if (rows.length > 0) {
+    <ul class="flag-list">
+      @for (r of rows; track r) {
+        <li class="flag-row" [class.flag-on]="r.value">
+          <label class="flag-toggle">
+            <input type="checkbox" [checked]="r.value" (change)="toggle(r)" />
+            <span class="flag-toggle-slider"></span>
+          </label>
+          <div class="flag-info">
+            <span class="flag-name">{{ r.name }}</span>
+          </div>
+          <span class="flag-value">{{ r.value ? 'vrai' : 'faux' }}</span>
+        </li>
+      }
+    </ul>
+  }
 
 </div>
diff --git a/web/src/app/shared/playthrough-flags-manager/playthrough-flags-manager.component.ts b/web/src/app/shared/playthrough-flags-manager/playthrough-flags-manager.component.ts
index a515fdc..faa3d3f 100644
--- a/web/src/app/shared/playthrough-flags-manager/playthrough-flags-manager.component.ts
+++ b/web/src/app/shared/playthrough-flags-manager/playthrough-flags-manager.component.ts
@@ -1,5 +1,5 @@
 import { Component, Input, OnInit, OnChanges, SimpleChanges } from '@angular/core';
-import { CommonModule } from '@angular/common';
+
 import { FormsModule } from '@angular/forms';
 import { LucideAngularModule } from 'lucide-angular';
 import { CampaignFlagService } from '../../services/campaign-flag.service';
@@ -15,7 +15,7 @@ import { forkJoin } from 'rxjs';
  */
 @Component({
     selector: 'app-playthrough-flags-manager',
-    imports: [CommonModule, FormsModule, LucideAngularModule],
+    imports: [FormsModule, LucideAngularModule],
     templateUrl: './playthrough-flags-manager.component.html',
     styleUrls: ['./playthrough-flags-manager.component.scss']
 })
diff --git a/web/src/app/shared/prerequisite-editor/prerequisite-editor.component.html b/web/src/app/shared/prerequisite-editor/prerequisite-editor.component.html
index 784037d..c432e18 100644
--- a/web/src/app/shared/prerequisite-editor/prerequisite-editor.component.html
+++ b/web/src/app/shared/prerequisite-editor/prerequisite-editor.component.html
@@ -1,60 +1,66 @@
 <div class="prereq-editor">
 
-  <p class="prereq-editor-empty" *ngIf="prerequisites.length === 0">
-    Aucune condition — la quête est immédiatement disponible.
-  </p>
+  @if (prerequisites.length === 0) {
+    <p class="prereq-editor-empty">
+      Aucune condition — la quête est immédiatement disponible.
+    </p>
+  }
 
-  <ul class="prereq-list" *ngIf="prerequisites.length > 0">
-    <li class="prereq-row" *ngFor="let p of prerequisites; let i = index; trackBy: trackByIndex">
-
-      <ng-container [ngSwitch]="p.kind">
-
-        <!-- QUEST_COMPLETED -->
-        <ng-container *ngSwitchCase="'QUEST_COMPLETED'">
-          <span class="prereq-row-label">Quête terminée :</span>
-          <select class="prereq-input"
-                  [ngModel]="asQuestCompleted(p).questId"
-                  (ngModelChange)="onQuestIdChange(i, $event)"
-                  [ngModelOptions]="{ standalone: true }"
-                  [disabled]="availableQuests.length === 0">
-            <option *ngIf="availableQuests.length === 0" value="">(aucune autre quête)</option>
-            <option *ngFor="let q of availableQuests" [value]="q.id">{{ q.name }}</option>
-          </select>
-        </ng-container>
-
-        <!-- SESSION_REACHED -->
-        <ng-container *ngSwitchCase="'SESSION_REACHED'">
-          <span class="prereq-row-label">À partir de la session :</span>
-          <input type="number"
-                 class="prereq-input prereq-input-number"
-                 min="1"
-                 [ngModel]="asSessionReached(p).minSessionNumber"
-                 (ngModelChange)="onMinSessionChange(i, $event)"
-                 [ngModelOptions]="{ standalone: true }" />
-        </ng-container>
-
-        <!-- FLAG_SET -->
-        <ng-container *ngSwitchCase="'FLAG_SET'">
-          <span class="prereq-row-label">Quand le fait est vrai :</span>
-          <input type="text"
-                 class="prereq-input"
-                 placeholder="nom_du_fait"
-                 [attr.list]="'prereq-flag-list-' + i"
-                 [ngModel]="asFlagSet(p).flagName"
-                 (ngModelChange)="onFlagNameChange(i, $event)"
-                 [ngModelOptions]="{ standalone: true }" />
-          <datalist [attr.id]="'prereq-flag-list-' + i">
-            <option *ngFor="let f of availableFlags" [value]="f"></option>
-          </datalist>
-        </ng-container>
-
-      </ng-container>
-
-      <button type="button" class="prereq-remove" (click)="removeAt(i)" title="Retirer ce prérequis">
-        <lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
-      </button>
-    </li>
-  </ul>
+  @if (prerequisites.length > 0) {
+    <ul class="prereq-list">
+      @for (p of prerequisites; track $index; let i = $index) {
+        <li class="prereq-row">
+          @switch (p.kind) {
+            <!-- QUEST_COMPLETED -->
+            @case ('QUEST_COMPLETED') {
+              <span class="prereq-row-label">Quête terminée :</span>
+              <select class="prereq-input"
+                [ngModel]="asQuestCompleted(p).questId"
+                (ngModelChange)="onQuestIdChange(i, $event)"
+                [ngModelOptions]="{ standalone: true }"
+                [disabled]="availableQuests.length === 0">
+                @if (availableQuests.length === 0) {
+                  <option value="">(aucune autre quête)</option>
+                }
+                @for (q of availableQuests; track q) {
+                  <option [value]="q.id">{{ q.name }}</option>
+                }
+              </select>
+            }
+            <!-- SESSION_REACHED -->
+            @case ('SESSION_REACHED') {
+              <span class="prereq-row-label">À partir de la session :</span>
+              <input type="number"
+                class="prereq-input prereq-input-number"
+                min="1"
+                [ngModel]="asSessionReached(p).minSessionNumber"
+                (ngModelChange)="onMinSessionChange(i, $event)"
+                [ngModelOptions]="{ standalone: true }" />
+            }
+            <!-- FLAG_SET -->
+            @case ('FLAG_SET') {
+              <span class="prereq-row-label">Quand le fait est vrai :</span>
+              <input type="text"
+                class="prereq-input"
+                placeholder="nom_du_fait"
+                [attr.list]="'prereq-flag-list-' + i"
+                [ngModel]="asFlagSet(p).flagName"
+                (ngModelChange)="onFlagNameChange(i, $event)"
+                [ngModelOptions]="{ standalone: true }" />
+              <datalist [attr.id]="'prereq-flag-list-' + i">
+                @for (f of availableFlags; track f) {
+                  <option [value]="f"></option>
+                }
+              </datalist>
+            }
+          }
+          <button type="button" class="prereq-remove" (click)="removeAt(i)" title="Retirer ce prérequis">
+            <lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
+          </button>
+        </li>
+      }
+    </ul>
+  }
 
   <div class="prereq-add">
     <button type="button" class="btn-secondary prereq-add-btn" (click)="toggleAddMenu()">
@@ -63,17 +69,19 @@
       <lucide-icon [img]="ChevronDown" [size]="14"></lucide-icon>
     </button>
 
-    <div class="prereq-add-menu" *ngIf="addMenuOpen">
-      <button type="button" (click)="addPrerequisite('QUEST_COMPLETED')">
-        Après une autre quête
-      </button>
-      <button type="button" (click)="addPrerequisite('SESSION_REACHED')">
-        À partir d'une session
-      </button>
-      <button type="button" (click)="addPrerequisite('FLAG_SET')">
-        Quand un fait est vrai
-      </button>
-    </div>
+    @if (addMenuOpen) {
+      <div class="prereq-add-menu">
+        <button type="button" (click)="addPrerequisite('QUEST_COMPLETED')">
+          Après une autre quête
+        </button>
+        <button type="button" (click)="addPrerequisite('SESSION_REACHED')">
+          À partir d'une session
+        </button>
+        <button type="button" (click)="addPrerequisite('FLAG_SET')">
+          Quand un fait est vrai
+        </button>
+      </div>
+    }
   </div>
 
 </div>
diff --git a/web/src/app/shared/prerequisite-editor/prerequisite-editor.component.ts b/web/src/app/shared/prerequisite-editor/prerequisite-editor.component.ts
index 66a1f53..bb9194e 100644
--- a/web/src/app/shared/prerequisite-editor/prerequisite-editor.component.ts
+++ b/web/src/app/shared/prerequisite-editor/prerequisite-editor.component.ts
@@ -1,5 +1,5 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { CommonModule } from '@angular/common';
+
 import { FormsModule } from '@angular/forms';
 import { LucideAngularModule, Plus, Trash2, ChevronDown } from 'lucide-angular';
 import { Chapter, Prerequisite } from '../../services/campaign.model';
@@ -13,7 +13,7 @@ import { Chapter, Prerequisite } from '../../services/campaign.model';
  */
 @Component({
     selector: 'app-prerequisite-editor',
-    imports: [CommonModule, FormsModule, LucideAngularModule],
+    imports: [FormsModule, LucideAngularModule],
     templateUrl: './prerequisite-editor.component.html',
     styleUrls: ['./prerequisite-editor.component.scss']
 })
@@ -81,7 +81,6 @@ export class PrerequisiteEditorComponent {
   }
 
   /** trackBy stable pour *ngFor (sinon les inputs reset à chaque édition). */
-  trackByIndex(i: number): number { return i; }
 
   // === Casts typés pour le template ===
   // Angular strict templates ne fait pas le narrowing d'une union discriminée à travers
diff --git a/web/src/app/shared/quest-status-badge/quest-status-badge.component.html b/web/src/app/shared/quest-status-badge/quest-status-badge.component.html
index 7aec88c..302d972 100644
--- a/web/src/app/shared/quest-status-badge/quest-status-badge.component.html
+++ b/web/src/app/shared/quest-status-badge/quest-status-badge.component.html
@@ -1,4 +1,6 @@
 <span [class]="cssClass" [attr.aria-label]="label" [title]="label">
   <lucide-icon [img]="icon" [size]="14"></lucide-icon>
-  <span class="status-label" *ngIf="!compact">{{ label }}</span>
+  @if (!compact) {
+    <span class="status-label">{{ label }}</span>
+  }
 </span>
diff --git a/web/src/app/shared/quest-status-badge/quest-status-badge.component.ts b/web/src/app/shared/quest-status-badge/quest-status-badge.component.ts
index 68bb1c7..4d18d60 100644
--- a/web/src/app/shared/quest-status-badge/quest-status-badge.component.ts
+++ b/web/src/app/shared/quest-status-badge/quest-status-badge.component.ts
@@ -1,5 +1,5 @@
 import { Component, Input } from '@angular/core';
-import { CommonModule } from '@angular/common';
+
 import { LucideAngularModule, Lock, Circle, Play, CheckCircle2, LucideIconData } from 'lucide-angular';
 import { QuestStatus } from '../../services/campaign.model';
 
@@ -9,7 +9,7 @@ import { QuestStatus } from '../../services/campaign.model';
  */
 @Component({
     selector: 'app-quest-status-badge',
-    imports: [CommonModule, LucideAngularModule],
+    imports: [LucideAngularModule],
     templateUrl: './quest-status-badge.component.html',
     styleUrls: ['./quest-status-badge.component.scss']
 })
diff --git a/web/src/app/shared/rooms-editor/rooms-editor.component.html b/web/src/app/shared/rooms-editor/rooms-editor.component.html
index 9410574..ba75b39 100644
--- a/web/src/app/shared/rooms-editor/rooms-editor.component.html
+++ b/web/src/app/shared/rooms-editor/rooms-editor.component.html
@@ -1,122 +1,132 @@
 <div class="rooms-editor">
 
-  <p class="rooms-empty" *ngIf="rooms.length === 0">
-    Aucune pièce. La scène se comporte comme un beat narratif classique.
-    Ajoutez une première pièce pour la convertir en lieu explorable (donjon, crypte…).
-  </p>
+  @if (rooms.length === 0) {
+    <p class="rooms-empty">
+      Aucune pièce. La scène se comporte comme un beat narratif classique.
+      Ajoutez une première pièce pour la convertir en lieu explorable (donjon, crypte…).
+    </p>
+  }
 
-  <ul class="room-list" *ngIf="rooms.length > 0">
-    <li class="room-card" *ngFor="let r of rooms; let i = index; trackBy: trackById">
-
-      <!-- Header repliable -->
-      <header class="room-head" (click)="toggleExpanded(r.id)">
-        <button type="button" class="room-toggle" type="button">
-          <lucide-icon [img]="isExpanded(r.id) ? ChevronUp : ChevronDown" [size]="16"></lucide-icon>
-        </button>
-        <span class="room-index">#{{ i + 1 }}</span>
-        <input type="text" class="room-name-input"
-               [ngModel]="r.name"
-               (ngModelChange)="patch(r, { name: $event })"
-               (click)="$event.stopPropagation()"
-               placeholder="Nom de la pièce" />
-        <input type="number" class="room-floor-input"
-               [ngModel]="r.floor"
-               (ngModelChange)="patch(r, { floor: $event === null || $event === '' ? null : +$event })"
-               (click)="$event.stopPropagation()"
-               placeholder="Ét." title="Étage (0 = RdC)" />
-        <div class="room-actions" (click)="$event.stopPropagation()">
-          <button type="button" class="btn-icon" (click)="moveUp(r)" [disabled]="i === 0" title="Monter">↑</button>
-          <button type="button" class="btn-icon" (click)="moveDown(r)" [disabled]="i === rooms.length - 1" title="Descendre">↓</button>
-          <button type="button" class="btn-icon-danger" (click)="removeRoom(r)" title="Supprimer la pièce">
-            <lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
-          </button>
-        </div>
-      </header>
-
-      <!-- Corps déplié -->
-      <div class="room-body" *ngIf="isExpanded(r.id)">
-
-        <div class="field">
-          <label>Description (lue/résumée aux joueurs)</label>
-          <textarea rows="3"
-                    [ngModel]="r.description"
-                    (ngModelChange)="patch(r, { description: $event })"
-                    placeholder="Atmosphère, ce que voient les PJ en entrant…"></textarea>
-        </div>
-
-        <div class="field-row">
-          <div class="field">
-            <label>Ennemis / créatures / boss</label>
-            <textarea rows="3"
-                      [ngModel]="r.enemies"
-                      (ngModelChange)="patch(r, { enemies: $event })"
-                      placeholder="2 gobelins, 1 ogre boss (PV 60, AC 14)…"></textarea>
-          </div>
-          <div class="field">
-            <label>Loot / trésors</label>
-            <textarea rows="3"
-                      [ngModel]="r.loot"
-                      (ngModelChange)="patch(r, { loot: $event })"
-                      placeholder="50 po, potion de soin, clé en argent…"></textarea>
-          </div>
-        </div>
-
-        <div class="field-row">
-          <div class="field">
-            <label>Pièges / dangers</label>
-            <textarea rows="2"
-                      [ngModel]="r.traps"
-                      (ngModelChange)="patch(r, { traps: $event })"
-                      placeholder="Trappe (DC 15 Perception), flèches empoisonnées…"></textarea>
-          </div>
-          <div class="field">
-            <label>Notes MJ (privé)</label>
-            <textarea rows="2"
-                      [ngModel]="r.gmNotes"
-                      (ngModelChange)="patch(r, { gmNotes: $event })"
-                      placeholder="Le boss connaît les PJ par leur nom, indice…"></textarea>
-          </div>
-        </div>
-
-        <!-- Branches inter-pièces -->
-        <div class="field">
-          <label>
-            <lucide-icon [img]="GitBranch" [size]="14"></lucide-icon>
-            Sorties / portes vers d'autres pièces
-          </label>
-          <ul class="branch-list" *ngIf="(r.branches?.length ?? 0) > 0">
-            <li class="branch-row" *ngFor="let b of r.branches; let bi = index">
-              <input type="text" class="branch-label"
-                     [ngModel]="b.label"
-                     (ngModelChange)="updateBranch(r, bi, { label: $event })"
-                     placeholder="Porte nord" />
-              <span class="branch-arrow">→</span>
-              <select class="branch-target"
-                      [ngModel]="b.targetRoomId"
-                      (ngModelChange)="updateBranch(r, bi, { targetRoomId: $event })"
-                      [disabled]="otherRooms(r).length === 0">
-                <option *ngIf="otherRooms(r).length === 0" value="">(aucune autre pièce)</option>
-                <option *ngFor="let o of otherRooms(r)" [value]="o.id">{{ o.name }}</option>
-              </select>
-              <input type="text" class="branch-condition"
-                     [ngModel]="b.condition"
-                     (ngModelChange)="updateBranch(r, bi, { condition: $event })"
-                     placeholder="Condition (optionnelle)" />
-              <button type="button" class="btn-icon-danger" (click)="removeBranch(r, bi)">
-                <lucide-icon [img]="X" [size]="14"></lucide-icon>
+  @if (rooms.length > 0) {
+    <ul class="room-list">
+      @for (r of rooms; track trackById(i, r); let i = $index) {
+        <li class="room-card">
+          <!-- Header repliable -->
+          <header class="room-head" (click)="toggleExpanded(r.id)">
+            <button type="button" class="room-toggle" type="button">
+              <lucide-icon [img]="isExpanded(r.id) ? ChevronUp : ChevronDown" [size]="16"></lucide-icon>
+            </button>
+            <span class="room-index">#{{ i + 1 }}</span>
+            <input type="text" class="room-name-input"
+              [ngModel]="r.name"
+              (ngModelChange)="patch(r, { name: $event })"
+              (click)="$event.stopPropagation()"
+              placeholder="Nom de la pièce" />
+            <input type="number" class="room-floor-input"
+              [ngModel]="r.floor"
+              (ngModelChange)="patch(r, { floor: $event === null || $event === '' ? null : +$event })"
+              (click)="$event.stopPropagation()"
+              placeholder="Ét." title="Étage (0 = RdC)" />
+            <div class="room-actions" (click)="$event.stopPropagation()">
+              <button type="button" class="btn-icon" (click)="moveUp(r)" [disabled]="i === 0" title="Monter">↑</button>
+              <button type="button" class="btn-icon" (click)="moveDown(r)" [disabled]="i === rooms.length - 1" title="Descendre">↓</button>
+              <button type="button" class="btn-icon-danger" (click)="removeRoom(r)" title="Supprimer la pièce">
+                <lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
               </button>
-            </li>
-          </ul>
-          <button type="button" class="btn-secondary btn-small"
+            </div>
+          </header>
+          <!-- Corps déplié -->
+          @if (isExpanded(r.id)) {
+            <div class="room-body">
+              <div class="field">
+                <label>Description (lue/résumée aux joueurs)</label>
+                <textarea rows="3"
+                  [ngModel]="r.description"
+                  (ngModelChange)="patch(r, { description: $event })"
+                placeholder="Atmosphère, ce que voient les PJ en entrant…"></textarea>
+              </div>
+              <div class="field-row">
+                <div class="field">
+                  <label>Ennemis / créatures / boss</label>
+                  <textarea rows="3"
+                    [ngModel]="r.enemies"
+                    (ngModelChange)="patch(r, { enemies: $event })"
+                  placeholder="2 gobelins, 1 ogre boss (PV 60, AC 14)…"></textarea>
+                </div>
+                <div class="field">
+                  <label>Loot / trésors</label>
+                  <textarea rows="3"
+                    [ngModel]="r.loot"
+                    (ngModelChange)="patch(r, { loot: $event })"
+                  placeholder="50 po, potion de soin, clé en argent…"></textarea>
+                </div>
+              </div>
+              <div class="field-row">
+                <div class="field">
+                  <label>Pièges / dangers</label>
+                  <textarea rows="2"
+                    [ngModel]="r.traps"
+                    (ngModelChange)="patch(r, { traps: $event })"
+                  placeholder="Trappe (DC 15 Perception), flèches empoisonnées…"></textarea>
+                </div>
+                <div class="field">
+                  <label>Notes MJ (privé)</label>
+                  <textarea rows="2"
+                    [ngModel]="r.gmNotes"
+                    (ngModelChange)="patch(r, { gmNotes: $event })"
+                  placeholder="Le boss connaît les PJ par leur nom, indice…"></textarea>
+                </div>
+              </div>
+              <!-- Branches inter-pièces -->
+              <div class="field">
+                <label>
+                  <lucide-icon [img]="GitBranch" [size]="14"></lucide-icon>
+                  Sorties / portes vers d'autres pièces
+                </label>
+                @if ((r.branches?.length ?? 0) > 0) {
+                  <ul class="branch-list">
+                    @for (b of r.branches; track b; let bi = $index) {
+                      <li class="branch-row">
+                        <input type="text" class="branch-label"
+                          [ngModel]="b.label"
+                          (ngModelChange)="updateBranch(r, bi, { label: $event })"
+                          placeholder="Porte nord" />
+                        <span class="branch-arrow">→</span>
+                        <select class="branch-target"
+                          [ngModel]="b.targetRoomId"
+                          (ngModelChange)="updateBranch(r, bi, { targetRoomId: $event })"
+                          [disabled]="otherRooms(r).length === 0">
+                          @if (otherRooms(r).length === 0) {
+                            <option value="">(aucune autre pièce)</option>
+                          }
+                          @for (o of otherRooms(r); track o) {
+                            <option [value]="o.id">{{ o.name }}</option>
+                          }
+                        </select>
+                        <input type="text" class="branch-condition"
+                          [ngModel]="b.condition"
+                          (ngModelChange)="updateBranch(r, bi, { condition: $event })"
+                          placeholder="Condition (optionnelle)" />
+                        <button type="button" class="btn-icon-danger" (click)="removeBranch(r, bi)">
+                          <lucide-icon [img]="X" [size]="14"></lucide-icon>
+                        </button>
+                      </li>
+                    }
+                  </ul>
+                }
+                <button type="button" class="btn-secondary btn-small"
                   (click)="addBranch(r)"
                   [disabled]="otherRooms(r).length === 0">
-            <lucide-icon [img]="Plus" [size]="13"></lucide-icon>
-            Ajouter une sortie
-          </button>
-        </div>
-      </div>
-    </li>
-  </ul>
+                  <lucide-icon [img]="Plus" [size]="13"></lucide-icon>
+                  Ajouter une sortie
+                </button>
+              </div>
+            </div>
+          }
+        </li>
+      }
+    </ul>
+  }
 
   <button type="button" class="btn-primary" (click)="addRoom()">
     <lucide-icon [img]="Plus" [size]="14"></lucide-icon>
diff --git a/web/src/app/shared/rooms-editor/rooms-editor.component.ts b/web/src/app/shared/rooms-editor/rooms-editor.component.ts
index dc781a0..d1c0cbf 100644
--- a/web/src/app/shared/rooms-editor/rooms-editor.component.ts
+++ b/web/src/app/shared/rooms-editor/rooms-editor.component.ts
@@ -1,5 +1,5 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { CommonModule } from '@angular/common';
+
 import { FormsModule } from '@angular/forms';
 import { LucideAngularModule, Plus, Trash2, ChevronDown, ChevronUp, GitBranch, X } from 'lucide-angular';
 import { Room, RoomBranch } from '../../services/campaign.model';
@@ -15,7 +15,7 @@ import { Room, RoomBranch } from '../../services/campaign.model';
  */
 @Component({
     selector: 'app-rooms-editor',
-    imports: [CommonModule, FormsModule, LucideAngularModule],
+    imports: [FormsModule, LucideAngularModule],
     templateUrl: './rooms-editor.component.html',
     styleUrls: ['./rooms-editor.component.scss']
 })
diff --git a/web/src/app/shared/secondary-sidebar/secondary-sidebar.component.html b/web/src/app/shared/secondary-sidebar/secondary-sidebar.component.html
index f578c27..4fd56db 100644
--- a/web/src/app/shared/secondary-sidebar/secondary-sidebar.component.html
+++ b/web/src/app/shared/secondary-sidebar/secondary-sidebar.component.html
@@ -1,136 +1,154 @@
 <aside class="secondary-sidebar"
-       [class.collapsed]="isCollapsed"
-       [style.width.px]="isCollapsed ? null : width">
+  [class.collapsed]="isCollapsed"
+  [style.width.px]="isCollapsed ? null : width">
 
   <div class="collapse-toggle" (click)="toggleCollapse()">
     <lucide-icon [img]="isCollapsed ? PanelLeftOpen : PanelLeftClose" [size]="16"></lucide-icon>
   </div>
 
-  <ng-container *ngIf="!isCollapsed">
-
-    <button
-      *ngIf="titleRoute; else staticTitle"
-      type="button"
-      class="sidebar-title sidebar-title--link"
-      [class.active]="isTitleActive()"
-      title="Retour à l'accueil de la campagne"
-      (click)="clickTitle()">
-      <lucide-icon [img]="Home" [size]="14" class="sidebar-title-icon"></lucide-icon>
-      <span class="sidebar-title-text">{{ title }}</span>
-    </button>
-    <ng-template #staticTitle>
-      <h2 class="sidebar-title">{{ title }}</h2>
-    </ng-template>
-
-    <div class="actions-row" *ngIf="createActions.length">
+  @if (!isCollapsed) {
+    @if (titleRoute) {
       <button
-        *ngFor="let action of createActions"
-        class="btn-pill"
-        [class.primary]="action.variant === 'primary'"
-        [class.secondary]="action.variant === 'secondary'"
-        (click)="runAction(action)">
-        {{ action.label }}
+        type="button"
+        class="sidebar-title sidebar-title--link"
+        [class.active]="isTitleActive()"
+        title="Retour à l'accueil de la campagne"
+        (click)="clickTitle()">
+        <lucide-icon [img]="Home" [size]="14" class="sidebar-title-icon"></lucide-icon>
+        <span class="sidebar-title-text">{{ title }}</span>
       </button>
-    </div>
-
+    } @else {
+      <h2 class="sidebar-title">{{ title }}</h2>
+    }
+    @if (createActions.length) {
+      <div class="actions-row">
+        @for (action of createActions; track action) {
+          <button
+            class="btn-pill"
+            [class.primary]="action.variant === 'primary'"
+            [class.secondary]="action.variant === 'secondary'"
+            (click)="runAction(action)">
+            {{ action.label }}
+          </button>
+        }
+      </div>
+    }
     <div class="tree">
-      <ng-container *ngFor="let item of items">
+      @for (item of items; track item) {
         <ng-container *ngTemplateOutlet="treeNode; context: { $implicit: item, level: 0 }"></ng-container>
-      </ng-container>
+      }
     </div>
-
     <!-- Template récursif : un noeud d'arbre rend son bouton, puis ses enfants via ce même template -->
     <ng-template #treeNode let-item let-level="level">
-      <div class="tree-section-header" *ngIf="level === 0 && item.sectionHeaderBefore">
-        {{ item.sectionHeaderBefore }}
-      </div>
+      @if (level === 0 && item.sectionHeaderBefore) {
+        <div class="tree-section-header">
+          {{ item.sectionHeaderBefore }}
+        </div>
+      }
       <div class="tree-item" [style.padding-left.px]="level * 12">
         <div class="tree-row">
-          <button
-            *ngIf="!item.isAction && isExpandable(item)"
-            type="button"
-            class="chevron-btn"
-            (click)="clickChevron($event, item)">
-            <lucide-icon
-              [img]="isExpanded(item.id) ? ChevronDown : ChevronRight"
-              [size]="12">
-            </lucide-icon>
-          </button>
-          <span *ngIf="item.isAction || !isExpandable(item)" class="chevron-spacer"></span>
-
-          <button type="button" class="tree-btn"
-                  [class.action]="item.isAction"
-                  [class.active]="isActive(item)"
-                  (click)="clickItem(item)">
-            <lucide-icon
-              *ngIf="iconFor(item) as icon"
-              [img]="icon"
-              [size]="14"
-              class="item-icon">
-            </lucide-icon>
-            {{ item.label }}
-            <span class="tree-item-meta" *ngIf="!item.isAction && item.meta">{{ item.meta }}</span>
-          </button>
-
-          <!-- Actions de creation contextuelles, revelees au survol de la ligne -->
-          <span class="node-actions" *ngIf="item.createActions?.length">
+          @if (!item.isAction && isExpandable(item)) {
             <button
-              *ngFor="let a of item.createActions"
               type="button"
-              class="node-action-btn"
-              [title]="a.label"
-              [attr.aria-label]="a.label"
-              (click)="runCreateAction($event, a)">
-              <lucide-icon [img]="iconForAction(a)" [size]="16"></lucide-icon>
+              class="chevron-btn"
+              (click)="clickChevron($event, item)">
+              <lucide-icon
+                [img]="isExpanded(item.id) ? ChevronDown : ChevronRight"
+                [size]="12">
+              </lucide-icon>
             </button>
-          </span>
-        </div>
-        <div class="tree-children" *ngIf="isExpanded(item.id) && hasChildren(item)">
-          <ng-container *ngFor="let child of item.children">
-            <ng-container *ngTemplateOutlet="treeNode; context: { $implicit: child, level: level + 1 }"></ng-container>
-          </ng-container>
+          }
+          @if (item.isAction || !isExpandable(item)) {
+            <span class="chevron-spacer"></span>
+          }
+          <button type="button" class="tree-btn"
+            [class.action]="item.isAction"
+            [class.active]="isActive(item)"
+            (click)="clickItem(item)">
+            @if (iconFor(item); as icon) {
+              <lucide-icon
+                [img]="icon"
+                [size]="14"
+                class="item-icon">
+              </lucide-icon>
+            }
+            {{ item.label }}
+            @if (!item.isAction && item.meta) {
+              <span class="tree-item-meta">{{ item.meta }}</span>
+            }
+          </button>
+          <!-- Actions de creation contextuelles, revelees au survol de la ligne -->
+          @if (item.createActions?.length) {
+            <span class="node-actions">
+              @for (a of item.createActions; track a) {
+                <button
+                  type="button"
+                  class="node-action-btn"
+                  [title]="a.label"
+                  [attr.aria-label]="a.label"
+                  (click)="runCreateAction($event, a)">
+                  <lucide-icon [img]="iconForAction(a)" [size]="16"></lucide-icon>
+                </button>
+              }
+            </span>
+          }
         </div>
+        @if (isExpanded(item.id) && hasChildren(item)) {
+          <div class="tree-children">
+            @for (child of item.children; track child) {
+              <ng-container *ngTemplateOutlet="treeNode; context: { $implicit: child, level: level + 1 }"></ng-container>
+            }
+          </div>
+        }
       </div>
     </ng-template>
-
     <!-- Panneau bas (ex: Templates) ------------------------------------ -->
-    <section class="bottom-panel" *ngIf="bottomPanel">
-      <div class="panel-header-row">
-        <button class="panel-header" (click)="togglePanel()">
-          <span class="panel-title">{{ bottomPanel.title }}</span>
-          <lucide-icon
-            [img]="panelOpen ? ChevronDown : ChevronRight"
-            [size]="14">
-          </lucide-icon>
-        </button>
-        <button
-          *ngIf="bottomPanel.headerAction as action"
-          type="button"
-          class="panel-header-action"
-          [title]="action.label"
-          [attr.aria-label]="action.label"
-          (click)="runPanelHeaderAction($event, action)">
-          <lucide-icon [img]="Plus" [size]="14"></lucide-icon>
-        </button>
-      </div>
-      <ul class="panel-list" *ngIf="panelOpen">
-        <li *ngFor="let item of bottomPanel.items">
-          <button
-            class="panel-item"
-            [class.action]="item.isAction"
-            (click)="clickPanelItem(item)">
-            <span class="panel-item-label">{{ item.label }}</span>
-            <span class="panel-item-meta" *ngIf="item.meta">{{ item.meta }}</span>
+    @if (bottomPanel) {
+      <section class="bottom-panel">
+        <div class="panel-header-row">
+          <button class="panel-header" (click)="togglePanel()">
+            <span class="panel-title">{{ bottomPanel.title }}</span>
+            <lucide-icon
+              [img]="panelOpen ? ChevronDown : ChevronRight"
+              [size]="14">
+            </lucide-icon>
           </button>
-        </li>
-      </ul>
-    </section>
-
-  </ng-container>
+          @if (bottomPanel.headerAction; as action) {
+            <button
+              type="button"
+              class="panel-header-action"
+              [title]="action.label"
+              [attr.aria-label]="action.label"
+              (click)="runPanelHeaderAction($event, action)">
+              <lucide-icon [img]="Plus" [size]="14"></lucide-icon>
+            </button>
+          }
+        </div>
+        @if (panelOpen) {
+          <ul class="panel-list">
+            @for (item of bottomPanel.items; track item) {
+              <li>
+                <button
+                  class="panel-item"
+                  [class.action]="item.isAction"
+                  (click)="clickPanelItem(item)">
+                  <span class="panel-item-label">{{ item.label }}</span>
+                  @if (item.meta) {
+                    <span class="panel-item-meta">{{ item.meta }}</span>
+                  }
+                </button>
+              </li>
+            }
+          </ul>
+        }
+      </section>
+    }
+  }
 
   <!-- Poignée de redimensionnement sur le bord droit (masquée si replié) -->
-  <div class="resize-handle"
-       *ngIf="!isCollapsed"
-       (mousedown)="startResize($event)"
-       title="Glissez pour redimensionner"></div>
+  @if (!isCollapsed) {
+    <div class="resize-handle"
+      (mousedown)="startResize($event)"
+    title="Glissez pour redimensionner"></div>
+  }
 </aside>
diff --git a/web/src/app/shared/single-image-picker/single-image-picker.component.html b/web/src/app/shared/single-image-picker/single-image-picker.component.html
index caa416e..a2d518c 100644
--- a/web/src/app/shared/single-image-picker/single-image-picker.component.html
+++ b/web/src/app/shared/single-image-picker/single-image-picker.component.html
@@ -1,14 +1,15 @@
 <div class="sip">
   <div class="sip-frame" [style.aspectRatio]="aspectRatio">
-    <ng-container *ngIf="imageId; else uploadTpl">
+    @if (imageId) {
       <img [src]="contentUrl(imageId)" alt="" />
       <button type="button" class="sip-remove" (click)="remove()" title="Retirer l'image">
         <lucide-icon [img]="X" [size]="14"></lucide-icon>
       </button>
-    </ng-container>
-    <ng-template #uploadTpl>
+    } @else {
       <app-image-uploader [compact]="true" (uploaded)="onUploaded($event)"></app-image-uploader>
-    </ng-template>
+    }
   </div>
-  <small *ngIf="hint" class="sip-hint">{{ hint }}</small>
+  @if (hint) {
+    <small class="sip-hint">{{ hint }}</small>
+  }
 </div>
diff --git a/web/src/app/shared/single-image-picker/single-image-picker.component.ts b/web/src/app/shared/single-image-picker/single-image-picker.component.ts
index 7dea667..9eadfb1 100644
--- a/web/src/app/shared/single-image-picker/single-image-picker.component.ts
+++ b/web/src/app/shared/single-image-picker/single-image-picker.component.ts
@@ -1,5 +1,5 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { CommonModule } from '@angular/common';
+
 import { LucideAngularModule, X, Image as ImageIcon } from 'lucide-angular';
 import { ImageService } from '../../services/image.service';
 import { Image } from '../../services/image.model';
@@ -21,7 +21,7 @@ import { ImageUploaderComponent } from '../image-uploader/image-uploader.compone
  */
 @Component({
     selector: 'app-single-image-picker',
-    imports: [CommonModule, LucideAngularModule, ImageUploaderComponent],
+    imports: [LucideAngularModule, ImageUploaderComponent],
     templateUrl: './single-image-picker.component.html',
     styleUrls: ['./single-image-picker.component.scss']
 })
diff --git a/web/src/app/shared/template-fields-editor/template-fields-editor.component.html b/web/src/app/shared/template-fields-editor/template-fields-editor.component.html
index 2617f46..426a76e 100644
--- a/web/src/app/shared/template-fields-editor/template-fields-editor.component.html
+++ b/web/src/app/shared/template-fields-editor/template-fields-editor.component.html
@@ -1,103 +1,114 @@
 <div class="tfe">
   <div class="tfe-header">
     <h3 class="tfe-label">{{ label }}</h3>
-    <p *ngIf="hint" class="tfe-hint">{{ hint }}</p>
+    @if (hint) {
+      <p class="tfe-hint">{{ hint }}</p>
+    }
   </div>
 
   <div class="tfe-list">
-    <div class="tfe-item" *ngFor="let f of fields; let i = index">
-      <div class="tfe-row" [class.invalid]="isDuplicate(f, i) || !f.name.trim()">
-        <div class="tfe-row-controls">
-          <button type="button" class="btn-arrow" (click)="moveUp(i)" [disabled]="i === 0" title="Monter">
-            <lucide-icon [img]="ArrowUp" [size]="14"></lucide-icon>
-          </button>
-          <button type="button" class="btn-arrow" (click)="moveDown(i)" [disabled]="i === fields.length - 1" title="Descendre">
-            <lucide-icon [img]="ArrowDown" [size]="14"></lucide-icon>
-          </button>
-        </div>
-
-        <input
-          type="text"
-          class="tfe-name"
-          [(ngModel)]="f.name"
-          [name]="'name-' + i"
-          (ngModelChange)="onFieldChanged()"
-          placeholder="Nom du champ (ex: Histoire, PV...)"
-        />
-
-        <select
-          class="tfe-type"
-          [(ngModel)]="f.type"
-          [name]="'type-' + i"
-          (ngModelChange)="onFieldChanged()">
-          <option *ngFor="let opt of typeOptions" [value]="opt.value">{{ opt.label }}</option>
-        </select>
-
-        <select
-          class="tfe-layout"
-          *ngIf="f.type === 'IMAGE'"
-          [(ngModel)]="f.layout"
-          [name]="'layout-' + i"
-          (ngModelChange)="onFieldChanged()">
-          <option *ngFor="let opt of layoutOptions" [value]="opt.value">{{ opt.label }}</option>
-        </select>
-
-        <button type="button" class="btn-remove" (click)="remove(i)" title="Supprimer ce champ">
-          <lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
-        </button>
-      </div>
-
-      <!-- Sous-editeur des labels pour KEY_VALUE_LIST -->
-      <div class="tfe-labels" *ngIf="f.type === 'KEY_VALUE_LIST'">
-        <div class="tfe-labels-header">
-          <lucide-icon [img]="ListOrdered" [size]="12"></lucide-icon>
-          <span>Labels (cles fixes pour toutes les fiches)</span>
-        </div>
-        <div class="tfe-labels-list">
-          <div class="tfe-label-row" *ngFor="let lbl of f.labels; let li = index; trackBy: trackByIndex">
-            <button type="button" class="btn-arrow-mini" (click)="moveLabelUp(f, li)" [disabled]="li === 0" title="Monter">
-              <lucide-icon [img]="ArrowUp" [size]="11"></lucide-icon>
+    @for (f of fields; track f; let i = $index) {
+      <div class="tfe-item">
+        <div class="tfe-row" [class.invalid]="isDuplicate(f, i) || !f.name.trim()">
+          <div class="tfe-row-controls">
+            <button type="button" class="btn-arrow" (click)="moveUp(i)" [disabled]="i === 0" title="Monter">
+              <lucide-icon [img]="ArrowUp" [size]="14"></lucide-icon>
             </button>
-            <button type="button" class="btn-arrow-mini" (click)="moveLabelDown(f, li)" [disabled]="li === (f.labels?.length || 0) - 1" title="Descendre">
-              <lucide-icon [img]="ArrowDown" [size]="11"></lucide-icon>
-            </button>
-            <input
-              type="text"
-              class="tfe-label-input"
-              [ngModel]="lbl"
-              (ngModelChange)="updateLabelAt(f, li, $event)"
-              [name]="'lbl-' + i + '-' + li"
-              placeholder="Ex: FOR, DEX..."
-            />
-            <button type="button" class="btn-remove-mini" (click)="removeLabel(f, li)" title="Retirer ce label">
-              <lucide-icon [img]="X" [size]="11"></lucide-icon>
+            <button type="button" class="btn-arrow" (click)="moveDown(i)" [disabled]="i === fields.length - 1" title="Descendre">
+              <lucide-icon [img]="ArrowDown" [size]="14"></lucide-icon>
             </button>
           </div>
+          <input
+            type="text"
+            class="tfe-name"
+            [(ngModel)]="f.name"
+            [name]="'name-' + i"
+            (ngModelChange)="onFieldChanged()"
+            placeholder="Nom du champ (ex: Histoire, PV...)"
+            />
+          <select
+            class="tfe-type"
+            [(ngModel)]="f.type"
+            [name]="'type-' + i"
+            (ngModelChange)="onFieldChanged()">
+            @for (opt of typeOptions; track opt) {
+              <option [value]="opt.value">{{ opt.label }}</option>
+            }
+          </select>
+          @if (f.type === 'IMAGE') {
+            <select
+              class="tfe-layout"
+              [(ngModel)]="f.layout"
+              [name]="'layout-' + i"
+              (ngModelChange)="onFieldChanged()">
+              @for (opt of layoutOptions; track opt) {
+                <option [value]="opt.value">{{ opt.label }}</option>
+              }
+            </select>
+          }
+          <button type="button" class="btn-remove" (click)="remove(i)" title="Supprimer ce champ">
+            <lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
+          </button>
         </div>
-        <button type="button" class="chip chip-mini" (click)="addLabel(f)">
-          <lucide-icon [img]="Plus" [size]="11"></lucide-icon>
-          Ajouter un label
-        </button>
+        <!-- Sous-editeur des labels pour KEY_VALUE_LIST -->
+        @if (f.type === 'KEY_VALUE_LIST') {
+          <div class="tfe-labels">
+            <div class="tfe-labels-header">
+              <lucide-icon [img]="ListOrdered" [size]="12"></lucide-icon>
+              <span>Labels (cles fixes pour toutes les fiches)</span>
+            </div>
+            <div class="tfe-labels-list">
+              @for (lbl of f.labels; track $index; let li = $index) {
+                <div class="tfe-label-row">
+                  <button type="button" class="btn-arrow-mini" (click)="moveLabelUp(f, li)" [disabled]="li === 0" title="Monter">
+                    <lucide-icon [img]="ArrowUp" [size]="11"></lucide-icon>
+                  </button>
+                  <button type="button" class="btn-arrow-mini" (click)="moveLabelDown(f, li)" [disabled]="li === (f.labels?.length || 0) - 1" title="Descendre">
+                    <lucide-icon [img]="ArrowDown" [size]="11"></lucide-icon>
+                  </button>
+                  <input
+                    type="text"
+                    class="tfe-label-input"
+                    [ngModel]="lbl"
+                    (ngModelChange)="updateLabelAt(f, li, $event)"
+                    [name]="'lbl-' + i + '-' + li"
+                    placeholder="Ex: FOR, DEX..."
+                    />
+                  <button type="button" class="btn-remove-mini" (click)="removeLabel(f, li)" title="Retirer ce label">
+                    <lucide-icon [img]="X" [size]="11"></lucide-icon>
+                  </button>
+                </div>
+              }
+            </div>
+            <button type="button" class="chip chip-mini" (click)="addLabel(f)">
+              <lucide-icon [img]="Plus" [size]="11"></lucide-icon>
+              Ajouter un label
+            </button>
+          </div>
+        }
       </div>
-    </div>
+    }
 
-    <div *ngIf="fields.length === 0" class="tfe-empty">
-      Aucun champ pour l'instant — ajoutez-en avec les boutons ci-dessous.
-    </div>
+    @if (fields.length === 0) {
+      <div class="tfe-empty">
+        Aucun champ pour l'instant — ajoutez-en avec les boutons ci-dessous.
+      </div>
+    }
   </div>
 
   <div class="tfe-add">
     <span class="tfe-add-label">Ajouter :</span>
-    <button
-      type="button"
-      class="chip"
-      *ngFor="let s of suggestions"
-      [class.disabled]="isSuggestionUsed(s)"
-      [disabled]="isSuggestionUsed(s)"
-      (click)="addSuggestion(s)">
-      <lucide-icon [img]="Plus" [size]="12"></lucide-icon>
-      {{ s }}
-    </button>
+    @for (s of suggestions; track s) {
+      <button
+        type="button"
+        class="chip"
+        [class.disabled]="isSuggestionUsed(s)"
+        [disabled]="isSuggestionUsed(s)"
+        (click)="addSuggestion(s)">
+        <lucide-icon [img]="Plus" [size]="12"></lucide-icon>
+        {{ s }}
+      </button>
+    }
     <button type="button" class="chip chip-custom" (click)="addBlank('TEXT')">
       <lucide-icon [img]="Type" [size]="12"></lucide-icon>
       Texte
diff --git a/web/src/app/shared/template-fields-editor/template-fields-editor.component.ts b/web/src/app/shared/template-fields-editor/template-fields-editor.component.ts
index dc5c39d..dea4d40 100644
--- a/web/src/app/shared/template-fields-editor/template-fields-editor.component.ts
+++ b/web/src/app/shared/template-fields-editor/template-fields-editor.component.ts
@@ -1,5 +1,5 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { CommonModule } from '@angular/common';
+
 import { FormsModule } from '@angular/forms';
 import { LucideAngularModule, Plus, Trash2, ArrowUp, ArrowDown, Type, Image as ImageIcon, Hash, ListOrdered, X } from 'lucide-angular';
 import { TemplateField, FieldType, ImageLayout } from '../../services/template.model';
@@ -16,7 +16,7 @@ import { TemplateField, FieldType, ImageLayout } from '../../services/template.m
  */
 @Component({
     selector: 'app-template-fields-editor',
-    imports: [CommonModule, FormsModule, LucideAngularModule],
+    imports: [FormsModule, LucideAngularModule],
     templateUrl: './template-fields-editor.component.html',
     styleUrls: ['./template-fields-editor.component.scss']
 })
@@ -122,7 +122,6 @@ export class TemplateFieldsEditorComponent {
     this.onFieldChanged();
   }
 
-  trackByIndex = (i: number) => i;
 
   remove(index: number): void {
     const next = [...this.fields];
diff --git a/web/src/app/shared/update-banner/update-banner.component.html b/web/src/app/shared/update-banner/update-banner.component.html
index 796d2f7..7ef11a1 100644
--- a/web/src/app/shared/update-banner/update-banner.component.html
+++ b/web/src/app/shared/update-banner/update-banner.component.html
@@ -1,29 +1,30 @@
-<div
-  class="update-banner"
-  *ngIf="versionChecker.hasUpdate() && !dismissed"
-  role="status"
-  aria-live="polite"
->
-  <div class="banner-content">
-    <lucide-icon [img]="RefreshCw" [size]="16"></lucide-icon>
-    <span>
-      Une nouvelle version de LoreMind est disponible
-      (<strong>{{ versionChecker.remoteVersion() }}</strong>).
-      Recharge pour profiter des dernieres ameliorations.
-    </span>
-  </div>
-  <div class="banner-actions">
-    <button type="button" class="btn-reload" (click)="reload()">
-      Recharger
-    </button>
-    <button
-      type="button"
-      class="btn-dismiss"
-      (click)="dismiss()"
-      title="Fermer (sera reaffiche au prochain demarrage)"
-      aria-label="Fermer"
+@if (versionChecker.hasUpdate() && !dismissed) {
+  <div
+    class="update-banner"
+    role="status"
+    aria-live="polite"
     >
-      <lucide-icon [img]="X" [size]="16"></lucide-icon>
-    </button>
+    <div class="banner-content">
+      <lucide-icon [img]="RefreshCw" [size]="16"></lucide-icon>
+      <span>
+        Une nouvelle version de LoreMind est disponible
+        (<strong>{{ versionChecker.remoteVersion() }}</strong>).
+        Recharge pour profiter des dernieres ameliorations.
+      </span>
+    </div>
+    <div class="banner-actions">
+      <button type="button" class="btn-reload" (click)="reload()">
+        Recharger
+      </button>
+      <button
+        type="button"
+        class="btn-dismiss"
+        (click)="dismiss()"
+        title="Fermer (sera reaffiche au prochain demarrage)"
+        aria-label="Fermer"
+        >
+        <lucide-icon [img]="X" [size]="16"></lucide-icon>
+      </button>
+    </div>
   </div>
-</div>
+}
diff --git a/web/src/app/shared/update-banner/update-banner.component.ts b/web/src/app/shared/update-banner/update-banner.component.ts
index a339c14..24d72aa 100644
--- a/web/src/app/shared/update-banner/update-banner.component.ts
+++ b/web/src/app/shared/update-banner/update-banner.component.ts
@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { CommonModule } from '@angular/common';
+
 import { LucideAngularModule, RefreshCw, X } from 'lucide-angular';
 import { VersionCheckerService } from '../../services/version-checker.service';
 
@@ -10,7 +10,7 @@ import { VersionCheckerService } from '../../services/version-checker.service';
  */
 @Component({
     selector: 'app-update-banner',
-    imports: [CommonModule, LucideAngularModule],
+    imports: [LucideAngularModule],
     templateUrl: './update-banner.component.html',
     styleUrls: ['./update-banner.component.scss']
 })
diff --git a/web/src/app/sidebar/sidebar.component.html b/web/src/app/sidebar/sidebar.component.html
index 79192eb..97bc7af 100644
--- a/web/src/app/sidebar/sidebar.component.html
+++ b/web/src/app/sidebar/sidebar.component.html
@@ -18,29 +18,28 @@
   </div>
 
   <!-- Mode contextuel : liste des lores ou campagnes -->
-  <ng-container *ngIf="layoutConfig$ | async as config">
+  @if (layoutConfig$ | async; as config) {
     <div class="context-list">
-      <button
-        class="context-item"
-        *ngFor="let item of config.globalItems"
-        [class.active]="isActive(item.route)"
-        (click)="navigateTo(item.route)">
-        {{ item.name }}
-      </button>
+      @for (item of config.globalItems; track item) {
+        <button
+          class="context-item"
+          [class.active]="isActive(item.route)"
+          (click)="navigateTo(item.route)">
+          {{ item.name }}
+        </button>
+      }
     </div>
-
     <div class="spacer"></div>
-
     <button class="btn-back-all" (click)="navigateTo(config.globalBackRoute)">
       <lucide-icon [img]="ArrowLeft" [size]="14"></lucide-icon>
       <span>{{ config.globalBackLabel }}</span>
     </button>
-  </ng-container>
+  }
 
   <!-- Mode normal : spacer + outils -->
-  <ng-container *ngIf="!(layoutConfig$ | async)">
+  @if (!(layoutConfig$ | async)) {
     <div class="spacer"></div>
-  </ng-container>
+  }
 
   <div class="tools-section">
     <p class="tools-label">OUTILS</p>
@@ -53,15 +52,21 @@
       <lucide-icon [img]="Dices" [size]="16"></lucide-icon>
       <span>Systèmes de JDR</span>
     </button>
-    <button class="tool-btn" *ngIf="!config.demoMode">
-      <lucide-icon [img]="Download" [size]="16"></lucide-icon>
-      <span>Export VTT</span>
-    </button>
-    <button class="tool-btn" *ngIf="!config.demoMode" [class.active]="currentRoute.startsWith('/settings')" (click)="navigateTo('/settings')">
-      <lucide-icon [img]="Settings" [size]="16"></lucide-icon>
-      <span>Paramètres</span>
-      <span class="update-badge" *ngIf="updateAvailable$ | async" title="Mise a jour disponible">MAJ</span>
-    </button>
+    @if (!config.demoMode) {
+      <button class="tool-btn">
+        <lucide-icon [img]="Download" [size]="16"></lucide-icon>
+        <span>Export VTT</span>
+      </button>
+    }
+    @if (!config.demoMode) {
+      <button class="tool-btn" [class.active]="currentRoute.startsWith('/settings')" (click)="navigateTo('/settings')">
+        <lucide-icon [img]="Settings" [size]="16"></lucide-icon>
+        <span>Paramètres</span>
+        @if (updateAvailable$ | async) {
+          <span class="update-badge" title="Mise a jour disponible">MAJ</span>
+        }
+      </button>
+    }
   </div>
 
   <div class="sidebar-footer">
diff --git a/web/src/app/sidebar/sidebar.component.ts b/web/src/app/sidebar/sidebar.component.ts
index 4f96019..d97b6db 100644
--- a/web/src/app/sidebar/sidebar.component.ts
+++ b/web/src/app/sidebar/sidebar.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { AsyncPipe, NgIf, NgFor } from '@angular/common';
+import { AsyncPipe } from '@angular/common';
 import { Router } from '@angular/router';
 import { LucideAngularModule, Search, Download, Settings, ArrowLeft, Dices } from 'lucide-angular';
 import { LayoutService } from '../services/layout.service';
@@ -12,7 +12,7 @@ import packageJson from '../../../package.json';
 
 @Component({
     selector: 'app-sidebar',
-    imports: [AsyncPipe, NgIf, NgFor, LucideAngularModule],
+    imports: [AsyncPipe, LucideAngularModule],
     templateUrl: './sidebar.component.html',
     styleUrls: ['./sidebar.component.scss']
 })
diff --git a/web/src/main.ts b/web/src/main.ts
index 2c7eec8..e795dc0 100644
--- a/web/src/main.ts
+++ b/web/src/main.ts
@@ -3,7 +3,7 @@ import { AppComponent } from './app/app.component';
 import { PreloadAllModules, provideRouter, withPreloading } from '@angular/router';
 import { routes } from './app/app.routes';
 import { provideHttpClient, withInterceptors } from '@angular/common/http';
-import { APP_INITIALIZER } from '@angular/core';
+import { APP_INITIALIZER, provideZoneChangeDetection } from '@angular/core';
 import { ConfigService } from './app/services/config.service';
 import { sessionExpiredInterceptor } from './app/interceptors/session-expired.interceptor';
 
@@ -14,7 +14,7 @@ import { sessionExpiredInterceptor } from './app/interceptors/session-expired.in
 // (acceptable pour une app interne ou toutes les routes seront visitees).
 bootstrapApplication(AppComponent, {
   providers: [
-    provideRouter(routes, withPreloading(PreloadAllModules)),
+    provideZoneChangeDetection(),provideRouter(routes, withPreloading(PreloadAllModules)),
     provideHttpClient(withInterceptors([sessionExpiredInterceptor])),
     {
       provide: APP_INITIALIZER,
diff --git a/web/tsconfig.json b/web/tsconfig.json
index 237b041..8c5be9f 100644
--- a/web/tsconfig.json
+++ b/web/tsconfig.json
@@ -20,11 +20,7 @@
     "importHelpers": true,
     "target": "ES2022",
     "module": "ES2022",
-    "useDefineForClassFields": false,
-    "lib": [
-      "ES2022",
-      "dom"
-    ]
+    "useDefineForClassFields": false
   },
   "angularCompilerOptions": {
     "enableI18nLegacyMessageIdFormat": false,