Changement sur le Readme

Ajout d'une partie spécifique pour des PNJ dans la partie campagne

web/src/app/campaigns/arc/arc-create/arc-create.component.html

@@ -0,0 +1,44 @@
+<div class="arc-create-page">
+
+  <div class="page-header">
+    <h1>Créer un nouvel arc narratif</h1>
+  </div>
+
+  <form [formGroup]="form" (ngSubmit)="submit()" class="arc-form">
+
+    <div class="field">
+      <label for="arc-create-name">Nom de l'arc *</label>
+      <input
+        id="arc-create-name"
+        type="text"
+        formControlName="name"
+        placeholder="Ex: L'Ombre du Nord"
+        [class.invalid]="form.get('name')?.invalid && form.get('name')?.touched"
+      />
+    </div>
+
+    <div class="field">
+      <label for="arc-create-description">Description</label>
+      <textarea
+        id="arc-create-description"
+        formControlName="description"
+        placeholder="Décrivez l'arc narratif principal..."
+        rows="5">
+      </textarea>
+    </div>
+
+    <div class="field">
+      <label>Icône</label>
+      <app-icon-picker [options]="campaignIconOptions" [(selected)]="selectedIcon"></app-icon-picker>
+    </div>
+
+    <div class="form-actions">
+      <button type="submit" class="btn-primary" [disabled]="form.invalid">
+        Créer l'arc
+      </button>
+      <button type="button" class="btn-secondary" (click)="cancel()">Annuler</button>
+    </div>
+
+  </form>
+
+</div>

web/src/app/campaigns/arc/arc-create/arc-create.component.scss

@@ -0,0 +1,18 @@
+.arc-create-page {
+  padding: 2.5rem 2rem;
+  max-width: 640px;
+}
+
+// Override local : titre en violet (pas en blanc comme le .page-header global).
+.page-header h1 { color: #a5b4fc; }
+
+.arc-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+// Spécificité locale : le bouton "Créer l'arc" prend toute la largeur dispo.
+// Tous les autres styles (.field, .btn-primary de base, .btn-secondary, .form-actions)
+// sont fournis globalement par @app/styles/_forms.scss et _buttons.scss.
+.btn-primary { flex: 1; }

web/src/app/campaigns/arc/arc-create/arc-create.component.ts

@@ -0,0 +1,104 @@
+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';
+import { LucideAngularModule, BookOpen } from 'lucide-angular';
+import { CampaignService } from '../../../services/campaign.service';
+import { CharacterService } from '../../../services/character.service';
+import { NpcService } from '../../../services/npc.service';
+import { LayoutService, GlobalItem } from '../../../services/layout.service';
+import { Campaign } from '../../../services/campaign.model';
+import { loadCampaignTreeData, buildCampaignTree } from '../../campaign-tree.helper';
+import { IconPickerComponent } from '../../../shared/icon-picker/icon-picker.component';
+import { CAMPAIGN_ICON_OPTIONS } from '../../campaign-icons';
+
+/**
+ * Écran de création d'un nouvel Arc narratif (contexte Campagne).
+ * Formulaire simple : nom + description. L'ordre est auto-calculé depuis
+ * le nombre d'arcs existants dans la campagne courante.
+ */
+@Component({
+  selector: 'app-arc-create',
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule, LucideAngularModule, IconPickerComponent],
+  templateUrl: './arc-create.component.html',
+  styleUrls: ['./arc-create.component.scss']
+})
+export class ArcCreateComponent implements OnInit, OnDestroy {
+  readonly BookOpen = BookOpen;
+  readonly campaignIconOptions = CAMPAIGN_ICON_OPTIONS;
+
+  form: FormGroup;
+  campaignId = '';
+  selectedIcon: string | null = null;
+  private existingArcCount = 0;
+
+  constructor(
+    private fb: FormBuilder,
+    private route: ActivatedRoute,
+    private router: Router,
+    private campaignService: CampaignService,
+    private characterService: CharacterService,
+    private npcService: NpcService,
+    private layoutService: LayoutService
+  ) {
+    this.form = this.fb.group({
+      name:        ['', Validators.required],
+      description: ['']
+    });
+  }
+
+  ngOnInit(): void {
+    this.campaignId = this.route.snapshot.paramMap.get('campaignId')!;
+    this.loadLayout();
+  }
+
+  private loadLayout(): void {
+    forkJoin({
+      campaign: this.campaignService.getCampaignById(this.campaignId),
+      allCampaigns: this.campaignService.getAllCampaigns(),
+      treeData: loadCampaignTreeData(this.campaignService, this.campaignId, this.characterService, this.npcService)
+    }).subscribe(({ campaign, allCampaigns, treeData }) => {
+      this.existingArcCount = treeData.arcs.length;
+
+      const globalItems: GlobalItem[] = allCampaigns.map((c: Campaign) => ({
+        id: c.id!, name: c.name, route: `/campaigns/${c.id}`
+      }));
+
+      this.layoutService.show({
+        title: campaign.name,
+        items: buildCampaignTree(this.campaignId, treeData),
+        footerLabel: 'Toutes les campagnes',
+        createActions: [
+          { id: 'create-arc', label: '+ Nouvel arc', variant: 'primary', route: `/campaigns/${this.campaignId}/arcs/create` }
+        ],
+        globalItems,
+        globalBackLabel: 'Toutes les campagnes',
+        globalBackRoute: '/campaigns'
+      });
+    });
+  }
+
+  submit(): void {
+    if (this.form.invalid) return;
+    this.campaignService.createArc({
+      name: this.form.value.name,
+      description: this.form.value.description,
+      campaignId: this.campaignId,
+      order: this.existingArcCount + 1,
+      icon: this.selectedIcon
+    }).subscribe({
+      next: (created) => this.router.navigate(['/campaigns', this.campaignId, 'arcs', created.id]),
+      error: () => console.error('Erreur lors de la création de l\'arc')
+    });
+  }
+
+  cancel(): void {
+    this.router.navigate(['/campaigns', this.campaignId]);
+  }
+
+  ngOnDestroy(): void {
+    this.layoutService.hide();
+  }
+}

web/src/app/campaigns/arc/arc-edit/arc-edit.component.html

@@ -0,0 +1,165 @@
+<div class="edit-page">
+
+  <div class="page-header">
+    <div>
+      <h1>{{ arc?.name || 'Arc' }}</h1>
+      <p class="subtitle">Arc narratif</p>
+    </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">
+        <lucide-icon [img]="Sparkles" [size]="14"></lucide-icon>
+        Assistant IA
+      </button>
+      <button type="button" class="btn-secondary" (click)="cancel()">Annuler</button>
+      <button type="button" class="btn-danger" (click)="delete()">
+        <lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
+        Supprimer
+      </button>
+      <button type="button" class="btn-primary" (click)="submit()" [disabled]="form.invalid">
+        Sauvegarder
+      </button>
+    </div>
+  </div>
+
+  <form [formGroup]="form" (ngSubmit)="submit()" class="edit-form">
+
+    <!-- Illustrations (galerie editable, rendu editorial) -->
+    <div class="field">
+      <label>Illustrations</label>
+      <app-image-gallery
+        [imageIds]="illustrationImageIds"
+        [editable]="true"
+        [layout]="'EDITORIAL'"
+        (imageIdsChange)="illustrationImageIds = $event">
+      </app-image-gallery>
+      <small class="field-hint">Ambiances, portraits, visuels evocateurs de l'arc. JPEG, PNG, WebP ou GIF, 10 Mo max.</small>
+    </div>
+
+    <!-- Cartes & plans -->
+    <div class="field">
+      <label>Cartes &amp; plans</label>
+      <app-image-gallery
+        [imageIds]="mapImageIds"
+        [editable]="true"
+        [layout]="'MAPS'"
+        (imageIdsChange)="mapImageIds = $event">
+      </app-image-gallery>
+      <small class="field-hint">Cartes regionales et plans utiles aux joueurs pour situer l'action.</small>
+    </div>
+
+    <div class="field">
+      <label for="arc-edit-name">Titre de l'arc *</label>
+      <input
+        id="arc-edit-name"
+        type="text"
+        formControlName="name"
+        placeholder="Ex: L'Ombre du Nord"
+        [class.invalid]="form.get('name')?.invalid && form.get('name')?.touched"
+      />
+    </div>
+
+    <div class="field">
+      <label for="arc-edit-description">Synopsis de l'arc</label>
+      <textarea
+        id="arc-edit-description"
+        formControlName="description"
+        placeholder="Décrivez l'histoire principale de cet arc narratif..."
+        rows="5">
+      </textarea>
+    </div>
+
+    <div class="field">
+      <label>Icône</label>
+      <app-icon-picker [options]="campaignIconOptions" [(selected)]="selectedIcon"></app-icon-picker>
+    </div>
+
+    <div class="field-row">
+      <div class="field">
+        <label for="arc-edit-themes">Thèmes principaux</label>
+        <textarea
+          id="arc-edit-themes"
+          formControlName="themes"
+          placeholder="Quels sont les thèmes explorés dans cet arc ? (trahison, rédemption...)"
+          rows="4">
+        </textarea>
+      </div>
+      <div class="field">
+        <label for="arc-edit-stakes">Enjeux globaux</label>
+        <textarea
+          id="arc-edit-stakes"
+          formControlName="stakes"
+          placeholder="Quels sont les enjeux majeurs de cet arc pour les personnages ?"
+          rows="4">
+        </textarea>
+      </div>
+    </div>
+
+    <div class="field">
+      <label for="arc-edit-gm-notes">Notes et planification du MJ</label>
+      <textarea
+        id="arc-edit-gm-notes"
+        formControlName="gmNotes"
+        placeholder="Vos notes sur la direction de l'arc, les twists prévus, les révélations importantes..."
+        rows="5">
+      </textarea>
+      <small class="field-hint">Ces notes sont privées et ne seront pas exportées vers FoundryVTT.</small>
+    </div>
+
+    <div class="field">
+      <label for="arc-edit-rewards">Récompenses et progression</label>
+      <textarea
+        id="arc-edit-rewards"
+        formControlName="rewards"
+        placeholder="Quelles récompenses les joueurs obtiendront-ils ? Objets, niveaux, connaissances, contacts..."
+        rows="4">
+      </textarea>
+    </div>
+
+    <div class="field">
+      <label for="arc-edit-resolution">Dénouement prévu</label>
+      <textarea
+        id="arc-edit-resolution"
+        formControlName="resolution"
+        placeholder="Comment cet arc devrait-il se terminer ? Quelles sont les issues possibles ?"
+        rows="4">
+      </textarea>
+    </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>
+
+    <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>
+
+  </form>
+
+</div>
+
+<!-- Drawer chat IA (hors .edit-page pour couvrir le viewport à droite) -->
+<app-ai-chat-drawer
+  [campaignId]="campaignId"
+  entityType="arc"
+  [entityId]="arcId"
+  [isOpen]="chatOpen"
+  welcomeMessage="Je vois cet arc. Demande-moi d'enrichir ses thèmes, ses enjeux ou son dénouement."
+  [quickSuggestions]="chatQuickSuggestions"
+  (close)="chatOpen = false">
+</app-ai-chat-drawer>

web/src/app/campaigns/arc/arc-edit/arc-edit.component.scss

@@ -0,0 +1,34 @@
+.edit-page {
+  padding: 2.5rem 2rem;
+  max-width: 640px;
+}
+
+// Header local : titre à gauche, actions (Assistant IA) à droite.
+.page-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+
+  .header-actions {
+    display: flex;
+    gap: 0.5rem;
+  }
+}
+
+// Formulaire vertical classique.
+.edit-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+// Override local : dans ce header, le bouton Supprimer est poussé à droite
+// via margin-left auto (les boutons Annuler/Sauvegarder restent groupés à gauche).
+// Styles de base fournis globalement par @app/styles/_buttons.scss (.btn-danger).
+.btn-danger {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  margin-left: auto;
+}

web/src/app/campaigns/arc/arc-edit/arc-edit.component.ts

@@ -0,0 +1,200 @@
+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';
+import { switchMap } from 'rxjs/operators';
+import { LucideAngularModule, Trash2, Sparkles } from 'lucide-angular';
+import { CampaignService } from '../../../services/campaign.service';
+import { CharacterService } from '../../../services/character.service';
+import { NpcService } from '../../../services/npc.service';
+import { PageService } from '../../../services/page.service';
+import { LayoutService, GlobalItem } from '../../../services/layout.service';
+import { PageTitleService } from '../../../services/page-title.service';
+import { Campaign, Arc } from '../../../services/campaign.model';
+import { Page } from '../../../services/page.model';
+import { loadCampaignTreeData, buildCampaignTree } from '../../campaign-tree.helper';
+import { LoreLinkPickerComponent } from '../../../shared/lore-link-picker/lore-link-picker.component';
+import { AiChatDrawerComponent } from '../../../shared/ai-chat-drawer/ai-chat-drawer.component';
+import { ImageGalleryComponent } from '../../../shared/image-gallery/image-gallery.component';
+import { IconPickerComponent } from '../../../shared/icon-picker/icon-picker.component';
+import { CAMPAIGN_ICON_OPTIONS } from '../../campaign-icons';
+
+/**
+ * Écran de détail/modification d'un Arc.
+ * Route : /campaigns/:campaignId/arcs/:arcId
+ *
+ * Intègre le picker de pages Lore (phase B2 cross-context) :
+ * si la campagne parente est associée à un Lore (`campaign.loreId`), les pages
+ * de ce Lore sont proposées dans un autocomplete pour lier cet arc à des
+ * personnages / lieux / objets du Lore.
+ */
+@Component({
+  selector: 'app-arc-edit',
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule, LucideAngularModule, LoreLinkPickerComponent, AiChatDrawerComponent, ImageGalleryComponent, IconPickerComponent],
+  templateUrl: './arc-edit.component.html',
+  styleUrls: ['./arc-edit.component.scss']
+})
+export class ArcEditComponent implements OnInit, OnDestroy {
+  readonly Trash2 = Trash2;
+  readonly Sparkles = Sparkles;
+  readonly campaignIconOptions = CAMPAIGN_ICON_OPTIONS;
+  selectedIcon: string | null = null;
+
+  /** État drawer chat IA (b5.7 — intégration Campagne). */
+  chatOpen = false;
+  readonly chatQuickSuggestions = [
+    'Propose 3 thèmes majeurs pour cet arc',
+    'Imagine des enjeux qui mettent la pression sur les joueurs',
+    'Suggère un dénouement en deux actes'
+  ];
+
+  toggleChat(): void { this.chatOpen = !this.chatOpen; }
+
+  form: FormGroup;
+  campaignId = '';
+  arcId = '';
+  arc: Arc | null = null;
+
+  /** Pages disponibles pour le picker (vide si la campagne n'a pas de loreId). */
+  availablePages: Page[] = [];
+  /** ID du Lore associé à la campagne (null si campagne sans univers). */
+  loreId: string | null = null;
+  /** IDs des pages liées à cet arc (bind sur app-lore-link-picker). */
+  relatedPageIds: string[] = [];
+
+  /** IDs des images illustrant cet arc (bind sur app-image-gallery editable). */
+  illustrationImageIds: string[] = [];
+  /** IDs des images utilisees comme cartes / plans (outil de table). */
+  mapImageIds: string[] = [];
+
+  constructor(
+    private fb: FormBuilder,
+    private route: ActivatedRoute,
+    private router: Router,
+    private campaignService: CampaignService,
+    private characterService: CharacterService,
+    private npcService: NpcService,
+    private pageService: PageService,
+    private layoutService: LayoutService,
+    private pageTitleService: PageTitleService
+  ) {
+    this.form = this.fb.group({
+      name:        ['', Validators.required],
+      description: [''],
+      themes:      [''],
+      stakes:      [''],
+      gmNotes:     [''],
+      rewards:     [''],
+      resolution:  ['']
+    });
+  }
+
+  ngOnInit(): void {
+    // On s'abonne à paramMap plutôt que de lire snapshot une fois : Angular
+    // réutilise le composant quand on navigue entre arcs frères via l'arbre
+    // (même route pattern), et ngOnInit ne se relance pas.
+    this.route.paramMap.subscribe(pm => {
+      const newCampaignId = pm.get('campaignId')!;
+      const newArcId = pm.get('arcId')!;
+      if (newArcId !== this.arcId || newCampaignId !== this.campaignId) {
+        this.campaignId = newCampaignId;
+        this.arcId = newArcId;
+        this.loadAll();
+      }
+    });
+  }
+
+  private loadAll(): void {
+    // On déclenche d'abord les 4 appels indépendants, puis on charge les pages
+    // du Lore associé UNIQUEMENT si la campagne en a un (switchMap conditionnel).
+    forkJoin({
+      campaign: this.campaignService.getCampaignById(this.campaignId),
+      allCampaigns: this.campaignService.getAllCampaigns(),
+      arc: this.campaignService.getArcById(this.arcId),
+      treeData: loadCampaignTreeData(this.campaignService, this.campaignId, this.characterService, this.npcService)
+    }).pipe(
+      switchMap(data => {
+        const lid = data.campaign.loreId ?? null;
+        // Pas de loreId → pas de picker, on retourne une liste vide.
+        const pages$ = lid ? this.pageService.getByLoreId(lid) : of([] as Page[]);
+        return pages$.pipe(
+          switchMap(pages => of({ ...data, pages, loreId: lid }))
+        );
+      })
+    ).subscribe(({ campaign, allCampaigns, arc, treeData, pages, loreId }) => {
+      this.arc = arc;
+      this.loreId = loreId;
+      this.availablePages = pages;
+      this.relatedPageIds = [...(arc.relatedPageIds ?? [])];
+      this.selectedIcon = arc.icon ?? null;
+      this.illustrationImageIds = [...(arc.illustrationImageIds ?? [])];
+      this.mapImageIds = [...(arc.mapImageIds ?? [])];
+      this.pageTitleService.set(arc.name);
+      this.form.patchValue({
+        name:        arc.name,
+        description: arc.description ?? '',
+        themes:      arc.themes ?? '',
+        stakes:      arc.stakes ?? '',
+        gmNotes:     arc.gmNotes ?? '',
+        rewards:     arc.rewards ?? '',
+        resolution:  arc.resolution ?? ''
+      });
+
+      const globalItems: GlobalItem[] = allCampaigns.map((c: Campaign) => ({
+        id: c.id!, name: c.name, route: `/campaigns/${c.id}`
+      }));
+
+      this.layoutService.show({
+        title: campaign.name,
+        items: buildCampaignTree(this.campaignId, treeData),
+        footerLabel: 'Toutes les campagnes',
+        createActions: [
+          { id: 'create-arc', label: '+ Nouvel arc', variant: 'primary', route: `/campaigns/${this.campaignId}/arcs/create` }
+        ],
+        globalItems,
+        globalBackLabel: 'Toutes les campagnes',
+        globalBackRoute: '/campaigns'
+      });
+    });
+  }
+
+  submit(): void {
+    if (this.form.invalid || !this.arc) return;
+    this.campaignService.updateArc(this.arcId, {
+      name:           this.form.value.name,
+      description:    this.form.value.description,
+      campaignId:     this.campaignId,
+      order:          this.arc.order ?? 1,
+      themes:         this.form.value.themes,
+      stakes:         this.form.value.stakes,
+      gmNotes:        this.form.value.gmNotes,
+      rewards:        this.form.value.rewards,
+      resolution:     this.form.value.resolution,
+      relatedPageIds: this.relatedPageIds,
+      illustrationImageIds: this.illustrationImageIds,
+      mapImageIds:    this.mapImageIds,
+      icon:           this.selectedIcon
+    }).subscribe({
+      next: () => this.router.navigate(['/campaigns', this.campaignId, 'arcs', this.arcId]),
+      error: () => console.error('Erreur lors de la sauvegarde')
+    });
+  }
+
+  delete(): void {
+    if (!confirm(`Supprimer l'arc "${this.arc?.name}" ? Cette action est irréversible.`)) return;
+    this.campaignService.deleteArc(this.arcId).subscribe({
+      next: () => this.router.navigate(['/campaigns', this.campaignId]),
+      error: () => console.error('Erreur lors de la suppression')
+    });
+  }
+
+  cancel(): void {
+    this.router.navigate(['/campaigns', this.campaignId, 'arcs', this.arcId]);
+  }
+
+  ngOnDestroy(): void {
+    this.layoutService.hide();
+  }
+}

web/src/app/campaigns/arc/arc-view/arc-view.component.html

@@ -0,0 +1,87 @@
+<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 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>
+
+  <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">
+    <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>
+    </section>
+
+    <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>
+    </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>

web/src/app/campaigns/arc/arc-view/arc-view.component.scss

@@ -0,0 +1 @@
+// Styles partagés via styles/_view.scss

web/src/app/campaigns/arc/arc-view/arc-view.component.ts

@@ -0,0 +1,146 @@
+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';
+import { LucideAngularModule, Pencil, Trash2 } from 'lucide-angular';
+import { resolveCampaignIcon } from '../../campaign-icons';
+import { CampaignService } from '../../../services/campaign.service';
+import { CharacterService } from '../../../services/character.service';
+import { NpcService } from '../../../services/npc.service';
+import { PageService } from '../../../services/page.service';
+import { LayoutService, GlobalItem } from '../../../services/layout.service';
+import { PageTitleService } from '../../../services/page-title.service';
+import { Campaign, Arc } from '../../../services/campaign.model';
+import { Page } from '../../../services/page.model';
+import { loadCampaignTreeData, buildCampaignTree } from '../../campaign-tree.helper';
+import { ImageGalleryComponent } from '../../../shared/image-gallery/image-gallery.component';
+
+/**
+ * Écran de consultation d'un Arc narratif (lecture seule).
+ * Route : /campaigns/:campaignId/arcs/:arcId
+ * Bouton "Modifier" → /campaigns/:campaignId/arcs/:arcId/edit
+ */
+@Component({
+  selector: 'app-arc-view',
+  standalone: true,
+  imports: [CommonModule, RouterModule, LucideAngularModule, ImageGalleryComponent],
+  templateUrl: './arc-view.component.html',
+  styleUrls: ['./arc-view.component.scss']
+})
+export class ArcViewComponent implements OnInit, OnDestroy {
+  readonly Pencil = Pencil;
+  readonly Trash2 = Trash2;
+  readonly resolveCampaignIcon = resolveCampaignIcon;
+
+  campaignId = '';
+  arcId = '';
+  arc: Arc | null = null;
+
+  /** ID du Lore associé à la campagne (null si pas d'univers lié). */
+  loreId: string | null = null;
+  /** Pages du Lore — pour résoudre relatedPageIds en titres. */
+  availablePages: Page[] = [];
+
+  constructor(
+    private route: ActivatedRoute,
+    private router: Router,
+    private campaignService: CampaignService,
+    private characterService: CharacterService,
+    private npcService: NpcService,
+    private pageService: PageService,
+    private layoutService: LayoutService,
+    private pageTitleService: PageTitleService
+  ) {}
+
+  ngOnInit(): void {
+    this.route.paramMap.subscribe(pm => {
+      const newCampaignId = pm.get('campaignId')!;
+      const newArcId = pm.get('arcId')!;
+      if (newArcId !== this.arcId || newCampaignId !== this.campaignId) {
+        this.campaignId = newCampaignId;
+        this.arcId = newArcId;
+        this.load();
+      }
+    });
+  }
+
+  private load(): void {
+    forkJoin({
+      campaign: this.campaignService.getCampaignById(this.campaignId),
+      allCampaigns: this.campaignService.getAllCampaigns(),
+      arc: this.campaignService.getArcById(this.arcId),
+      treeData: loadCampaignTreeData(this.campaignService, this.campaignId, this.characterService, this.npcService)
+    }).pipe(
+      switchMap(data => {
+        const lid = data.campaign.loreId ?? null;
+        const pages$ = lid ? this.pageService.getByLoreId(lid) : of([] as Page[]);
+        return pages$.pipe(switchMap(pages => of({ ...data, pages, loreId: lid })));
+      })
+    ).subscribe(({ campaign, allCampaigns, arc, treeData, pages, loreId }) => {
+      this.arc = arc;
+      this.loreId = loreId;
+      this.availablePages = pages;
+      this.pageTitleService.set(arc.name);
+
+      const globalItems: GlobalItem[] = allCampaigns.map((c: Campaign) => ({
+        id: c.id!, name: c.name, route: `/campaigns/${c.id}`
+      }));
+      this.layoutService.show({
+        title: campaign.name,
+        items: buildCampaignTree(this.campaignId, treeData),
+        footerLabel: 'Toutes les campagnes',
+        createActions: [
+          { id: 'create-arc', label: '+ Nouvel arc', variant: 'primary', route: `/campaigns/${this.campaignId}/arcs/create` }
+        ],
+        globalItems,
+        globalBackLabel: 'Toutes les campagnes',
+        globalBackRoute: '/campaigns'
+      });
+    });
+  }
+
+  titleOfRelated(pageId: string): string {
+    return this.availablePages.find(p => p.id === pageId)?.title ?? '(page supprimée)';
+  }
+
+  editMode(): void {
+    this.router.navigate(['/campaigns', this.campaignId, 'arcs', this.arcId, 'edit']);
+  }
+
+  /**
+   * Suppression en cascade : récupère d'abord le compte de chapitres / scènes
+   * qui tomberont avec l'arc, l'annonce dans la confirmation, puis délègue au
+   * backend (transaction atomique).
+   */
+  deleteArc(): void {
+    if (!this.arc) return;
+    const arc = this.arc;
+    this.campaignService.getArcDeletionImpact(arc.id!).subscribe({
+      next: impact => {
+        const parts: string[] = [];
+        if (impact.chapters > 0) parts.push(`${impact.chapters} chapitre${impact.chapters > 1 ? 's' : ''}`);
+        if (impact.scenes > 0) parts.push(`${impact.scenes} scène${impact.scenes > 1 ? 's' : ''}`);
+
+        const lines = [`Supprimer l'arc "${arc.name}" ?`];
+        if (parts.length) {
+          lines.push('');
+          lines.push(`Cette action supprimera aussi : ${parts.join(', ')}.`);
+        }
+        lines.push('');
+        lines.push('Cette action est irréversible.');
+
+        if (!confirm(lines.join('\n'))) return;
+        this.campaignService.deleteArc(arc.id!).subscribe({
+          next: () => this.router.navigate(['/campaigns', this.campaignId]),
+          error: () => console.error('Erreur lors de la suppression de l\'arc')
+        });
+      },
+      error: () => console.error('Impossible de récupérer les dépendances de l\'arc')
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.layoutService.hide();
+  }
+}