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

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']
 })