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/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>