Mise en ligne de la version 0.2.0

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

@@ -0,0 +1,37 @@
+<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>Nom de l'arc *</label>
+      <input
+        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>Description</label>
+      <textarea
+        formControlName="description"
+        placeholder="Décrivez l'arc narratif principal..."
+        rows="5">
+      </textarea>
+    </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-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-create/arc-create.component.ts

@@ -0,0 +1,95 @@
+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 { LayoutService, GlobalItem } from '../../services/layout.service';
+import { Campaign } from '../../services/campaign.model';
+import { loadCampaignTreeData, buildCampaignTree } from '../campaign-tree.helper';
+
+/**
+ * É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],
+  templateUrl: './arc-create.component.html',
+  styleUrls: ['./arc-create.component.scss']
+})
+export class ArcCreateComponent implements OnInit, OnDestroy {
+  readonly BookOpen = BookOpen;
+
+  form: FormGroup;
+  campaignId = '';
+  private existingArcCount = 0;
+
+  constructor(
+    private fb: FormBuilder,
+    private route: ActivatedRoute,
+    private router: Router,
+    private campaignService: CampaignService,
+    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)
+    }).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
+    }).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-edit/arc-edit.component.html

@@ -0,0 +1,143 @@
+<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>
+    </div>
+  </div>
+
+  <form [formGroup]="form" (ngSubmit)="submit()" class="edit-form">
+
+    <!-- Illustrations (galerie editable) -->
+    <div class="field">
+      <label>Illustrations</label>
+      <app-image-gallery
+        [imageIds]="illustrationImageIds"
+        [editable]="true"
+        (imageIdsChange)="illustrationImageIds = $event">
+      </app-image-gallery>
+      <small class="field-hint">Glisse-depose ou clique sur "+ Ajouter" pour uploader. JPEG, PNG, WebP ou GIF, 10 Mo max.</small>
+    </div>
+
+    <div class="field">
+      <label>Titre de l'arc *</label>
+      <input
+        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>Synopsis de l'arc</label>
+      <textarea
+        formControlName="description"
+        placeholder="Décrivez l'histoire principale de cet arc narratif..."
+        rows="5">
+      </textarea>
+    </div>
+
+    <div class="field-row">
+      <div class="field">
+        <label>Thèmes principaux</label>
+        <textarea
+          formControlName="themes"
+          placeholder="Quels sont les thèmes explorés dans cet arc ? (trahison, rédemption...)"
+          rows="4">
+        </textarea>
+      </div>
+      <div class="field">
+        <label>Enjeux globaux</label>
+        <textarea
+          formControlName="stakes"
+          placeholder="Quels sont les enjeux majeurs de cet arc pour les personnages ?"
+          rows="4">
+        </textarea>
+      </div>
+    </div>
+
+    <div class="field">
+      <label>Notes et planification du MJ</label>
+      <textarea
+        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>Récompenses et progression</label>
+      <textarea
+        formControlName="rewards"
+        placeholder="Quelles récompenses les joueurs obtiendront-ils ? Objets, niveaux, connaissances, contacts..."
+        rows="4">
+      </textarea>
+    </div>
+
+    <div class="field">
+      <label>Dénouement prévu</label>
+      <textarea
+        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>
+
+    <div class="form-actions">
+      <button type="submit" class="btn-primary" [disabled]="form.invalid">
+        Sauvegarder
+      </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>
+    </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-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-edit/arc-edit.component.ts

@@ -0,0 +1,186 @@
+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 { 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';
+
+/**
+ * É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],
+  templateUrl: './arc-edit.component.html',
+  styleUrls: ['./arc-edit.component.scss']
+})
+export class ArcEditComponent implements OnInit, OnDestroy {
+  readonly Trash2 = Trash2;
+  readonly Sparkles = Sparkles;
+
+  /** É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[] = [];
+
+  constructor(
+    private fb: FormBuilder,
+    private route: ActivatedRoute,
+    private router: Router,
+    private campaignService: CampaignService,
+    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)
+    }).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.illustrationImageIds = [...(arc.illustrationImageIds ?? [])];
+      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
+    }).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-view/arc-view.component.html

@@ -0,0 +1,74 @@
+<div class="view-page" *ngIf="arc">
+
+  <header class="view-header">
+    <div>
+      <h1>{{ 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>
+    </div>
+  </header>
+
+  <!-- Illustrations en tete de page (si presentes) -->
+  <section class="view-section" *ngIf="(arc.illustrationImageIds?.length ?? 0) > 0">
+    <app-image-gallery [imageIds]="arc.illustrationImageIds ?? []"></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-view/arc-view.component.scss

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

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

@@ -0,0 +1,107 @@
+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 } from 'lucide-angular';
+import { CampaignService } from '../../services/campaign.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;
+
+  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 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)
+    }).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']);
+  }
+
+  ngOnDestroy(): void {
+    this.layoutService.hide();
+  }
+}

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

@@ -0,0 +1,69 @@
+<div class="modal-backdrop" (click)="onCancel()">
+  <div class="modal" (click)="$event.stopPropagation()">
+
+    <div class="modal-header">
+      <h2>Créer une nouvelle Campagne</h2>
+      <button class="btn-close" (click)="onCancel()">
+        <lucide-icon [img]="X" [size]="18"></lucide-icon>
+      </button>
+    </div>
+
+    <form [formGroup]="form" (ngSubmit)="submit()">
+
+      <div class="field">
+        <label>Nom de la campagne *</label>
+        <input
+          type="text"
+          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>Description / Pitch</label>
+        <textarea
+          formControlName="description"
+          placeholder="Résumez l'intrigue principale de votre campagne..."
+          rows="5"
+        ></textarea>
+      </div>
+
+      <div class="field">
+        <label>Nombre de joueurs</label>
+        <input type="number" formControlName="playerCount" min="1" />
+      </div>
+
+      <div class="field">
+        <label>Univers associé</label>
+        <select 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="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>

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

@@ -0,0 +1,123 @@
+.modal-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.7);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 100;
+}
+
+.modal {
+  background: #111827;
+  border: 1px solid #1f2937;
+  border-radius: 16px;
+  padding: 2rem;
+  width: 100%;
+  max-width: 600px;
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 2rem;
+
+  h2 { color: white; font-size: 1.25rem; font-weight: 600; }
+}
+
+.btn-close {
+  background: transparent;
+  border: none;
+  color: #6b7280;
+  cursor: pointer;
+  padding: 0.25rem;
+  border-radius: 6px;
+  display: flex;
+  transition: color 0.2s;
+
+  &:hover { color: white; }
+}
+
+.field {
+  margin-bottom: 1.5rem;
+
+  label {
+    display: block;
+    font-size: 0.875rem;
+    color: #d1d5db;
+    margin-bottom: 0.5rem;
+  }
+
+  input, textarea {
+    width: 100%;
+    background: #1f2937;
+    border: 1px solid #374151;
+    border-radius: 8px;
+    padding: 0.75rem 1rem;
+    color: white;
+    font-size: 0.9rem;
+    outline: none;
+    resize: none;
+    transition: border-color 0.2s;
+
+    &::placeholder { color: #4b5563; }
+    &:focus { border-color: #6c63ff; }
+    &.invalid { border-color: #ef4444; }
+  }
+
+  input[type="number"] { width: 120px; }
+}
+
+.info-box {
+  background: #1f2937;
+  border-radius: 8px;
+  padding: 1rem 1.25rem;
+  margin-bottom: 2rem;
+  font-size: 0.875rem;
+  color: #9ca3af;
+  line-height: 1.8;
+
+  ul {
+    margin: 0.5rem 0 0 1.25rem;
+    li strong { color: #d1d5db; }
+  }
+}
+
+.modal-actions {
+  display: flex;
+  gap: 1rem;
+}
+
+.btn-primary {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1.5rem;
+  background: #6c63ff;
+  color: white;
+  border: none;
+  border-radius: 8px;
+  font-size: 0.9rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.2s;
+
+  &:hover:not(:disabled) { background: #5b52e0; }
+  &:disabled { opacity: 0.4; cursor: not-allowed; }
+}
+
+.btn-secondary {
+  padding: 0.75rem 1.5rem;
+  background: #1f2937;
+  color: #d1d5db;
+  border: 1px solid #374151;
+  border-radius: 8px;
+  font-size: 0.9rem;
+  cursor: pointer;
+  transition: background 0.2s;
+
+  &:hover { background: #374151; }
+}

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

@@ -0,0 +1,69 @@
+import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule, FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { LucideAngularModule, BookCopy, X } from 'lucide-angular';
+import { LoreService } from '../../services/lore.service';
+import { Lore } from '../../services/lore.model';
+
+/**
+ * Payload émis vers le parent à la création d'une campagne.
+ * `loreId` est optionnel (null = campagne sans univers associé).
+ */
+export interface CampaignCreatePayload {
+  name: string;
+  description: string;
+  playerCount: number;
+  loreId: string | null;
+}
+
+@Component({
+  selector: 'app-campaign-create',
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule, LucideAngularModule],
+  templateUrl: './campaign-create.component.html',
+  styleUrls: ['./campaign-create.component.scss']
+})
+export class CampaignCreateComponent implements OnInit {
+  @Output() close = new EventEmitter<void>();
+  @Output() created = new EventEmitter<CampaignCreatePayload>();
+
+  readonly BookCopy = BookCopy;
+  readonly X = X;
+
+  form: FormGroup;
+  /** Lores disponibles pour association. Chargés à l'ouverture de la modal. */
+  availableLores: Lore[] = [];
+
+  constructor(private fb: FormBuilder, private loreService: LoreService) {
+    this.form = this.fb.group({
+      name:        ['', Validators.required],
+      description: [''],
+      playerCount: [4, [Validators.required, Validators.min(1)]],
+      // Valeur par défaut : chaîne vide = "— Aucun lore associé —".
+      // Le service normalise ensuite ""/null en null côté backend.
+      loreId:      ['']
+    });
+  }
+
+  ngOnInit(): void {
+    this.loreService.getAllLores().subscribe({
+      next: (lores) => this.availableLores = lores,
+      error: () => this.availableLores = []
+    });
+  }
+
+  submit(): void {
+    if (this.form.invalid) return;
+    const raw = this.form.value;
+    this.created.emit({
+      name: raw.name,
+      description: raw.description,
+      playerCount: raw.playerCount,
+      loreId: raw.loreId ? raw.loreId : null
+    });
+  }
+
+  onCancel(): void {
+    this.close.emit();
+  }
+}

web/src/app/campaigns/campaign-detail/campaign-detail.component.html

@@ -0,0 +1,93 @@
+<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>
+      </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="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 class="arcs-section">
+    <div class="section-header">
+      <h2>Arcs narratifs</h2>
+      <button class="btn-add">
+        <lucide-icon [img]="Plus" [size]="14"></lucide-icon>
+        Nouvel arc
+      </button>
+    </div>
+
+    <div class="arcs-grid" *ngIf="arcs.length > 0">
+      <div class="arc-card" *ngFor="let arc of arcs">
+        <lucide-icon [img]="Swords" [size]="24" class="arc-icon"></lucide-icon>
+        <span class="arc-name">{{ arc.name }}</span>
+        <span class="arc-meta">{{ arc.chapterCount || 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">
+        <lucide-icon [img]="Plus" [size]="14"></lucide-icon>
+        Créer votre premier arc
+      </button>
+    </div>
+  </div>
+
+</div>

web/src/app/campaigns/campaign-detail/campaign-detail.component.scss

@@ -0,0 +1,203 @@
+.campaign-detail {
+  padding: 2.5rem 2rem;
+}
+
+.detail-header {
+  margin-bottom: 2.5rem;
+
+  h1 {
+    font-size: 1.75rem;
+    font-weight: 700;
+    color: white;
+    margin-bottom: 0.5rem;
+  }
+
+  .description {
+    color: #6b7280;
+    font-size: 0.95rem;
+    line-height: 1.6;
+    margin-bottom: 1rem;
+  }
+
+  .meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    align-items: center;
+  }
+
+  .badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    background: #1e3a5f;
+    color: #60a5fa;
+    font-size: 0.75rem;
+    font-weight: 600;
+    padding: 0.25rem 0.75rem;
+    border-radius: 999px;
+    text-decoration: none;
+  }
+
+  // Lien cliquable vers le Lore associé (weak cross-context link).
+  .badge-lore {
+    background: #2d2450;
+    color: #a78bfa;
+    transition: background 0.15s ease;
+
+    &:hover {
+      background: #3d3168;
+      cursor: pointer;
+    }
+  }
+
+  // Cas dégradé : loreId renseigné mais Lore introuvable (supprimé).
+  .badge-lore-missing {
+    background: #3a1e1e;
+    color: #f87171;
+    font-style: italic;
+  }
+}
+
+.detail-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1.5rem;
+
+  .header-texts { flex: 1; min-width: 0; }
+
+  .header-actions {
+    display: flex;
+    gap: 0.5rem;
+    flex-shrink: 0;
+  }
+
+  // Variante mode édition : champs empilés verticalement.
+  &.edit-mode {
+    flex-direction: column;
+    align-items: stretch;
+
+    .field {
+      display: flex;
+      flex-direction: column;
+      gap: 0.35rem;
+      margin-bottom: 1rem;
+
+      label { color: #9ca3af; font-size: 0.8rem; font-weight: 500; }
+      input, textarea, select {
+        background: #0f172a;
+        border: 1px solid #1f2937;
+        border-radius: 8px;
+        color: white;
+        padding: 0.6rem 0.85rem;
+        font-size: 0.9rem;
+        font-family: inherit;
+
+        &:focus { outline: none; border-color: #6c63ff; }
+      }
+      textarea { resize: vertical; }
+    }
+
+    .header-actions { justify-content: flex-end; }
+  }
+}
+
+// Boutons partagés.
+.btn-primary, .btn-secondary, .btn-danger {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.5rem 1rem;
+  border: none;
+  border-radius: 8px;
+  font-size: 0.85rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.15s;
+
+  &:disabled { opacity: 0.5; cursor: not-allowed; }
+}
+
+.btn-primary   { background: #6c63ff; color: white;  &:hover:not(:disabled) { background: #5b52e0; } }
+.btn-secondary { background: #1f2937; color: #d1d5db; &:hover:not(:disabled) { background: #374151; } }
+.btn-danger    { background: #3a1e1e; color: #f87171; &:hover:not(:disabled) { background: #5a2e2e; } }
+
+.section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 1.5rem;
+
+  h2 { color: #d1d5db; font-size: 1rem; font-weight: 600; }
+}
+
+.btn-add {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.5rem 1rem;
+  background: #6c63ff;
+  color: white;
+  border: none;
+  border-radius: 8px;
+  font-size: 0.85rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.2s;
+
+  &:hover { background: #5b52e0; }
+}
+
+.arcs-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  gap: 1rem;
+}
+
+.arc-card {
+  background: #111827;
+  border: 1px solid #1f2937;
+  border-radius: 10px;
+  padding: 1.25rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  cursor: pointer;
+  transition: border-color 0.2s, transform 0.2s;
+
+  &:hover { border-color: #6c63ff; transform: translateY(-2px); }
+
+  .arc-icon { color: #6c63ff; }
+  .arc-name  { color: white; font-size: 0.9rem; font-weight: 600; }
+  .arc-meta  { color: #6b7280; font-size: 0.75rem; }
+}
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  padding: 4rem 2rem;
+  color: #6b7280;
+
+  .empty-icon { color: #374151; }
+  p { font-size: 0.95rem; }
+}
+
+.btn-add-first {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.6rem 1.25rem;
+  background: #6c63ff;
+  color: white;
+  border: none;
+  border-radius: 8px;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.2s;
+
+  &:hover { background: #5b52e0; }
+}

web/src/app/campaigns/campaign-detail/campaign-detail.component.ts

@@ -0,0 +1,194 @@
+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 } from 'lucide-angular';
+import { Router, RouterLink } from '@angular/router';
+import { forkJoin, of } from 'rxjs';
+import { catchError, switchMap, filter, map } from 'rxjs/operators';
+import { CampaignService } from '../../services/campaign.service';
+import { LoreService } from '../../services/lore.service';
+import { LayoutService, GlobalItem } from '../../services/layout.service';
+import { PageTitleService } from '../../services/page-title.service';
+import { Campaign, Arc } from '../../services/campaign.model';
+import { Lore } from '../../services/lore.model';
+import { loadCampaignTreeData, buildCampaignTree, CampaignTreeData } from '../campaign-tree.helper';
+
+@Component({
+  selector: 'app-campaign-detail',
+  standalone: true,
+  imports: [CommonModule, FormsModule, LucideAngularModule, RouterLink],
+  templateUrl: './campaign-detail.component.html',
+  styleUrls: ['./campaign-detail.component.scss']
+})
+export class CampaignDetailComponent implements OnInit, OnDestroy {
+  readonly Swords = Swords;
+  readonly Plus = Plus;
+  readonly Globe = Globe;
+  readonly Pencil = Pencil;
+  readonly Trash2 = Trash2;
+
+  campaign: Campaign | null = null;
+  arcs: Arc[] = [];
+  /** Lore associé si `campaign.loreId` est renseigné ; sinon null. */
+  linkedLore: Lore | null = null;
+  /** Lores disponibles pour changer l'association en mode édition. */
+  availableLores: Lore[] = [];
+
+  /** Mode édition inline. */
+  editing = false;
+  editName = '';
+  editDescription = '';
+  editLoreId = '';
+
+  constructor(
+    private route: ActivatedRoute,
+    private router: Router,
+    private campaignService: CampaignService,
+    private loreService: LoreService,
+    private layoutService: LayoutService,
+    private pageTitleService: PageTitleService
+  ) {}
+
+  ngOnInit(): void {
+    // switchMap annule automatiquement le load précédent si l'utilisateur
+    // change de campagne avant que le forkJoin ne réponde — évite qu'une
+    // réponse en retard écrase des données plus récentes (race condition).
+    this.route.paramMap.pipe(
+      map(pm => pm.get('id')),
+      filter((id): id is string => !!id && id !== this.campaign?.id),
+      switchMap(id => forkJoin({
+        campaign: this.campaignService.getCampaignById(id),
+        allCampaigns: this.campaignService.getAllCampaigns(),
+        treeData: loadCampaignTreeData(this.campaignService, id).pipe(
+          catchError(() => of({ arcs: [], chaptersByArc: {}, scenesByChapter: {} } as CampaignTreeData))
+        )
+      }))
+    ).subscribe(({ campaign, allCampaigns, treeData }) => {
+      this.campaign = campaign;
+      this.editing = false;
+      this.loadLinkedLore(campaign);
+      this.arcs = treeData.arcs;
+      this.showLayout(allCampaigns, treeData);
+      this.pageTitleService.set(campaign.name);
+    });
+  }
+
+  /**
+   * Recharge explicitement après une mise à jour locale (ex: saveEdit).
+   * Contrairement au flux ngOnInit, on bypass le filter sur l'ID puisqu'on
+   * veut rafraîchir même si l'ID n'a pas changé.
+   */
+  private reload(id: string): void {
+    forkJoin({
+      campaign: this.campaignService.getCampaignById(id),
+      allCampaigns: this.campaignService.getAllCampaigns(),
+      treeData: loadCampaignTreeData(this.campaignService, id).pipe(
+        catchError(() => of({ arcs: [], chaptersByArc: {}, scenesByChapter: {} } as CampaignTreeData))
+      )
+    }).subscribe(({ campaign, allCampaigns, treeData }) => {
+      this.campaign = campaign;
+      this.editing = false;
+      this.loadLinkedLore(campaign);
+      this.arcs = treeData.arcs;
+      this.showLayout(allCampaigns, treeData);
+      this.pageTitleService.set(campaign.name);
+    });
+  }
+
+  /**
+   * Charge le Lore associé (si loreId présent). On swallow l'erreur :
+   * si le Lore a été supprimé entre-temps, on affiche simplement "Univers introuvable".
+   */
+  private loadLinkedLore(campaign: Campaign): void {
+    if (!campaign.loreId) {
+      this.linkedLore = null;
+      return;
+    }
+    this.loreService.getLoreById(campaign.loreId).pipe(
+      catchError(() => of(null))
+    ).subscribe(lore => this.linkedLore = lore);
+  }
+
+  private showLayout(allCampaigns: Campaign[], data: CampaignTreeData): void {
+    const campaignId = this.campaign!.id!;
+    const globalItems: GlobalItem[] = allCampaigns.map(c => ({
+      id: c.id!,
+      name: c.name,
+      route: `/campaigns/${c.id}`
+    }));
+
+    this.layoutService.show({
+      title: this.campaign!.name,
+      items: buildCampaignTree(campaignId, data),
+      footerLabel: 'Toutes les campagnes',
+      createActions: [
+        { id: 'create-arc', label: '+ Nouvel arc', variant: 'primary', route: `/campaigns/${campaignId}/arcs/create` }
+      ],
+      globalItems,
+      globalBackLabel: 'Toutes les campagnes',
+      globalBackRoute: '/campaigns'
+    });
+  }
+
+  // ─────────────── Édition / suppression de la Campagne ───────────────
+
+  startEdit(): void {
+    if (!this.campaign) return;
+    this.editName = this.campaign.name;
+    this.editDescription = this.campaign.description ?? '';
+    this.editLoreId = this.campaign.loreId ?? '';
+    // On charge les Lores disponibles pour le select uniquement à l'entrée en mode édition.
+    this.loreService.getAllLores().subscribe({
+      next: (lores) => this.availableLores = lores,
+      error: () => this.availableLores = []
+    });
+    this.editing = true;
+  }
+
+  cancelEdit(): void {
+    this.editing = false;
+  }
+
+  saveEdit(): void {
+    if (!this.campaign || !this.editName.trim()) return;
+    this.campaignService.updateCampaign(this.campaign.id!, {
+      name: this.editName.trim(),
+      description: this.editDescription,
+      playerCount: this.campaign.playerCount ?? 0,
+      loreId: this.editLoreId ? this.editLoreId : null
+    }).subscribe({
+      next: (updated) => {
+        this.campaign = updated;
+        this.editing = false;
+        // Recharge pour actualiser le badge "Univers" et le titre sidebar.
+        this.reload(updated.id!);
+      },
+      error: () => console.error('Erreur lors de la mise à jour de la campagne')
+    });
+  }
+
+  /**
+   * Suppression protégée : refus si la campagne contient des arcs.
+   * Les arcs contiennent potentiellement des chapitres/scènes construits longuement.
+   */
+  deleteCampaign(): void {
+    if (!this.campaign) return;
+    if (this.arcs.length > 0) {
+      alert(
+        `Impossible de supprimer "${this.campaign.name}" : elle contient encore ${this.arcs.length} arc(s).\n` +
+        `Videz la campagne (arcs et chapitres) avant de la supprimer.`
+      );
+      return;
+    }
+    if (!confirm(`Supprimer définitivement la campagne "${this.campaign.name}" ?`)) return;
+    this.campaignService.deleteCampaign(this.campaign.id!).subscribe({
+      next: () => this.router.navigate(['/campaigns']),
+      error: () => console.error('Erreur lors de la suppression de la campagne')
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.layoutService.hide();
+  }
+}

web/src/app/campaigns/campaign-tree.helper.ts

@@ -0,0 +1,109 @@
+import { Observable, forkJoin, of } from 'rxjs';
+import { switchMap, map } from 'rxjs/operators';
+import { CampaignService } from '../services/campaign.service';
+import { TreeItem } from '../services/layout.service';
+import { Arc, Chapter, Scene } from '../services/campaign.model';
+
+/**
+ * Helper — charge l'arborescence complète d'une campagne (arcs -> chapitres -> scènes)
+ * et la transforme en TreeItem[] pour la secondary sidebar.
+ *
+ * Pourquoi un helper et pas un service ? C'est de la logique de présentation
+ * (mapping REST -> ViewModel de la sidebar), pas du domaine métier.
+ */
+
+export interface CampaignTreeData {
+  arcs: Arc[];
+  chaptersByArc: Record<string, Chapter[]>;
+  scenesByChapter: Record<string, Scene[]>;
+}
+
+export function loadCampaignTreeData(
+  service: CampaignService,
+  campaignId: string
+): Observable<CampaignTreeData> {
+  return service.getArcs(campaignId).pipe(
+    switchMap(arcs => {
+      if (arcs.length === 0) {
+        return of({ arcs, chaptersByArc: {}, scenesByChapter: {} });
+      }
+      const chapterCalls = arcs.map(a =>
+        service.getChapters(a.id!).pipe(map(chapters => ({ arcId: a.id!, chapters })))
+      );
+      return forkJoin(chapterCalls).pipe(
+        switchMap(chapterResults => {
+          const chaptersByArc: Record<string, Chapter[]> = {};
+          const allChapters: Chapter[] = [];
+          chapterResults.forEach(r => {
+            chaptersByArc[r.arcId] = r.chapters;
+            allChapters.push(...r.chapters);
+          });
+
+          if (allChapters.length === 0) {
+            return of({ arcs, chaptersByArc, scenesByChapter: {} });
+          }
+          const sceneCalls = allChapters.map(c =>
+            service.getScenes(c.id!).pipe(map(scenes => ({ chapterId: c.id!, scenes })))
+          );
+          return forkJoin(sceneCalls).pipe(
+            map(sceneResults => {
+              const scenesByChapter: Record<string, Scene[]> = {};
+              sceneResults.forEach(r => { scenesByChapter[r.chapterId] = r.scenes; });
+              return { arcs, chaptersByArc, scenesByChapter };
+            })
+          );
+        })
+      );
+    })
+  );
+}
+
+export function buildCampaignTree(campaignId: string, data: CampaignTreeData): TreeItem[] {
+  // Tri FR avec `numeric: true` pour que "1. Intro", "2. Voyage", "10. Final" soient
+  // classés 1, 2, 10 (et pas 1, 10, 2). `sensitivity: 'base'` ignore la casse.
+  const byName = (a: { name: string }, b: { name: string }) =>
+    a.name.localeCompare(b.name, 'fr', { numeric: true, sensitivity: 'base' });
+
+  // IDs préfixés par type pour éviter les collisions dans LayoutService.expanded
+  // (chaque entité a sa propre séquence IDENTITY en base → arc.id=1 et chapter.id=1
+  // peuvent coexister et se marchaient sur les pieds dans le Set<string> global).
+  const sortedArcs = [...data.arcs].sort(byName);
+
+  return sortedArcs.map(arc => {
+    const sortedChapters = [...(data.chaptersByArc[arc.id!] ?? [])].sort(byName);
+
+    const chapterItems: TreeItem[] = sortedChapters.map(ch => {
+      const sortedScenes = [...(data.scenesByChapter[ch.id!] ?? [])].sort(byName);
+
+      const sceneItems: TreeItem[] = sortedScenes.map(sc => ({
+        id: `scene-${sc.id}`,
+        label: sc.name,
+        route: `/campaigns/${campaignId}/arcs/${arc.id}/chapters/${ch.id}/scenes/${sc.id}`
+      }));
+      sceneItems.push({
+        id: `new-scene-${ch.id}`,
+        label: '+ Nouvelle scène',
+        isAction: true,
+        route: `/campaigns/${campaignId}/arcs/${arc.id}/chapters/${ch.id}/scenes/create`
+      });
+      return {
+        id: `chapter-${ch.id}`,
+        label: ch.name,
+        children: sceneItems,
+        route: `/campaigns/${campaignId}/arcs/${arc.id}/chapters/${ch.id}`
+      };
+    });
+    chapterItems.push({
+      id: `new-chapter-${arc.id}`,
+      label: '+ Nouveau chapitre',
+      isAction: true,
+      route: `/campaigns/${campaignId}/arcs/${arc.id}/chapters/create`
+    });
+    return {
+      id: `arc-${arc.id}`,
+      label: arc.name,
+      children: chapterItems,
+      route: `/campaigns/${campaignId}/arcs/${arc.id}`
+    };
+  });
+}

web/src/app/campaigns/campaigns.component.html

@@ -0,0 +1,42 @@
+<div class="campaigns-page">
+
+  <div class="campaigns-hero">
+    <lucide-icon [img]="Map" [size]="56" class="hero-icon"></lucide-icon>
+    <h1>Vos Campagnes</h1>
+    <p class="hero-subtitle">Rejoignez une campagne ou créez-en de nouvelles</p>
+  </div>
+
+  <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>
+      </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">
+        <lucide-icon [img]="Plus" [size]="20"></lucide-icon>
+      </div>
+      <h2>Nouvelle Campagne</h2>
+      <p class="card-description">Créez une nouvelle aventure</p>
+    </div>
+
+  </div>
+
+  <p class="tip">💡 Astuce : Organisez vos arcs et chapitres pour ne rien oublier de vos aventures</p>
+
+</div>
+
+<app-campaign-create
+  *ngIf="showCreateModal"
+  (close)="onModalClose()"
+  (created)="onCampaignCreated($event)">
+</app-campaign-create>

web/src/app/campaigns/campaigns.component.scss

@@ -0,0 +1,99 @@
+.campaigns-page {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 3rem 2rem;
+  min-height: 100%;
+}
+
+.campaigns-hero {
+  text-align: center;
+  margin-bottom: 3rem;
+
+  .hero-icon { display: block; margin-bottom: 1rem; color: #6c63ff; }
+
+  h1 { font-size: 2rem; font-weight: 700; color: white; margin-bottom: 0.5rem; }
+
+  .hero-subtitle { color: #6b7280; font-size: 0.95rem; }
+}
+
+.campaigns-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1.5rem;
+  width: 100%;
+  max-width: 900px;
+}
+
+.campaign-card {
+  background: #111827;
+  border: 1px solid #1f2937;
+  border-radius: 12px;
+  padding: 1.5rem;
+  cursor: pointer;
+  transition: border-color 0.2s, transform 0.2s;
+
+  &:hover {
+    border-color: #6c63ff;
+    transform: translateY(-3px);
+  }
+
+  .card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1rem;
+  }
+
+  .status-badge {
+    font-size: 0.7rem;
+    padding: 0.2rem 0.6rem;
+    border-radius: 999px;
+    font-weight: 600;
+
+    &.en-cours  { background: #1e3a5f; color: #60a5fa; }
+    &.terminée  { background: #1a3a2a; color: #4ade80; }
+    &.en-pause  { background: #3a2a1a; color: #fb923c; }
+  }
+
+  .card-date { font-size: 0.75rem; color: #6b7280; }
+
+  h2 { color: white; font-size: 1.1rem; margin-bottom: 0.5rem; }
+
+  .card-description { color: #6b7280; font-size: 0.875rem; line-height: 1.5; margin-bottom: 1rem; }
+
+  .card-stats {
+    display: flex;
+    gap: 1rem;
+    font-size: 0.8rem;
+    color: #4b5563;
+  }
+}
+
+.card-new {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border-style: dashed;
+  border-color: #374151;
+  text-align: center;
+
+  .new-icon {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 50%;
+    background: #1f2937;
+    color: #6c63ff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 0.75rem;
+  }
+}
+
+.tip {
+  margin-top: 3rem;
+  font-size: 0.8rem;
+  color: #4b5563;
+}

web/src/app/campaigns/campaigns.component.ts

@@ -0,0 +1,60 @@
+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';
+import { Campaign } from '../services/campaign.model';
+import { CampaignCreateComponent, CampaignCreatePayload } from './campaign-create/campaign-create.component';
+
+@Component({
+  selector: 'app-campaigns',
+  standalone: true,
+  imports: [CommonModule, LucideAngularModule, CampaignCreateComponent],
+  templateUrl: './campaigns.component.html',
+  styleUrls: ['./campaigns.component.scss']
+})
+export class CampaignsComponent implements OnInit {
+  readonly Map = Map;
+  readonly Plus = Plus;
+
+  campaigns: Campaign[] = [];
+  showCreateModal = false;
+
+  constructor(
+    private router: Router,
+    private campaignService: CampaignService
+  ) {}
+
+  ngOnInit(): void {
+    this.loadCampaigns();
+  }
+
+  loadCampaigns(): void {
+    this.campaignService.getAllCampaigns().subscribe({
+      next: (data) => this.campaigns = data,
+      error: () => this.campaigns = []
+    });
+  }
+
+  openCreateModal(): void {
+    this.showCreateModal = true;
+  }
+
+  onModalClose(): void {
+    this.showCreateModal = false;
+  }
+
+  onCampaignCreated(data: CampaignCreatePayload): void {
+    this.campaignService.createCampaign(data).subscribe({
+      next: () => {
+        this.showCreateModal = false;
+        this.loadCampaigns();
+      },
+      error: () => console.error('Erreur lors de la création de la campagne')
+    });
+  }
+
+  navigateToDetail(id: string): void {
+    this.router.navigate(['/campaigns', id]);
+  }
+}

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

@@ -0,0 +1,38 @@
+<div class="chapter-create-page">
+
+  <div class="page-header">
+    <h1>Créer un nouveau chapitre</h1>
+    <p class="arc-ref" *ngIf="arcName">Arc : {{ arcName }}</p>
+  </div>
+
+  <form [formGroup]="form" (ngSubmit)="submit()" class="chapter-form">
+
+    <div class="field">
+      <label>Nom du chapitre *</label>
+      <input
+        type="text"
+        formControlName="name"
+        placeholder="Ex: Chapitre 1: Les Disparitions"
+        [class.invalid]="form.get('name')?.invalid && form.get('name')?.touched"
+      />
+    </div>
+
+    <div class="field">
+      <label>Description</label>
+      <textarea
+        formControlName="description"
+        placeholder="Décrivez ce chapitre..."
+        rows="5">
+      </textarea>
+    </div>
+
+    <div class="form-actions">
+      <button type="submit" class="btn-primary" [disabled]="form.invalid">
+        Créer le chapitre
+      </button>
+      <button type="button" class="btn-secondary" (click)="cancel()">Annuler</button>
+    </div>
+
+  </form>
+
+</div>

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

@@ -0,0 +1,21 @@
+.chapter-create-page {
+  padding: 2.5rem 2rem;
+  max-width: 640px;
+}
+
+// Overrides locaux :
+// - titre en violet (au lieu de blanc comme le .page-header global)
+// - sous-titre .arc-ref spécifique à cet écran (référence à l'arc parent)
+.page-header {
+  h1 { color: #a5b4fc; }
+  .arc-ref { color: #6b7280; font-size: 0.85rem; margin: 0; }
+}
+
+.chapter-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+// Le bouton "Créer" prend toute la largeur restante.
+.btn-primary { flex: 1; }

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

@@ -0,0 +1,97 @@
+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 } from 'lucide-angular';
+import { CampaignService } from '../../services/campaign.service';
+import { LayoutService, GlobalItem } from '../../services/layout.service';
+import { Campaign } from '../../services/campaign.model';
+import { loadCampaignTreeData, buildCampaignTree } from '../campaign-tree.helper';
+
+/**
+ * Écran de création d'un nouveau chapitre rattaché à un arc.
+ * Route : /campaigns/:campaignId/arcs/:arcId/chapters/create
+ */
+@Component({
+  selector: 'app-chapter-create',
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule, LucideAngularModule],
+  templateUrl: './chapter-create.component.html',
+  styleUrls: ['./chapter-create.component.scss']
+})
+export class ChapterCreateComponent implements OnInit, OnDestroy {
+  form: FormGroup;
+  campaignId = '';
+  arcId = '';
+  arcName = '';
+  private existingChapterCount = 0;
+
+  constructor(
+    private fb: FormBuilder,
+    private route: ActivatedRoute,
+    private router: Router,
+    private campaignService: CampaignService,
+    private layoutService: LayoutService
+  ) {
+    this.form = this.fb.group({
+      name:        ['', Validators.required],
+      description: ['']
+    });
+  }
+
+  ngOnInit(): void {
+    this.campaignId = this.route.snapshot.paramMap.get('campaignId')!;
+    this.arcId = this.route.snapshot.paramMap.get('arcId')!;
+    this.loadLayout();
+  }
+
+  private loadLayout(): void {
+    forkJoin({
+      campaign: this.campaignService.getCampaignById(this.campaignId),
+      allCampaigns: this.campaignService.getAllCampaigns(),
+      treeData: loadCampaignTreeData(this.campaignService, this.campaignId)
+    }).subscribe(({ campaign, allCampaigns, treeData }) => {
+      const currentArc = treeData.arcs.find(a => a.id === this.arcId);
+      this.arcName = currentArc?.name ?? '';
+      this.existingChapterCount = treeData.chaptersByArc[this.arcId]?.length ?? 0;
+
+      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.createChapter({
+      name: this.form.value.name,
+      description: this.form.value.description,
+      arcId: this.arcId,
+      order: this.existingChapterCount + 1
+    }).subscribe({
+      next: (created) => this.router.navigate(['/campaigns', this.campaignId, 'arcs', this.arcId, 'chapters', created.id]),
+      error: () => console.error('Erreur lors de la création du chapitre')
+    });
+  }
+
+  cancel(): void {
+    this.router.navigate(['/campaigns', this.campaignId]);
+  }
+
+  ngOnDestroy(): void {
+    this.layoutService.hide();
+  }
+}

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

@@ -0,0 +1,125 @@
+<div class="edit-page">
+
+  <div class="page-header">
+    <div>
+      <h1>{{ chapter?.name || 'Chapitre' }}</h1>
+      <p class="subtitle">Chapitre</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 ce chapitre">
+        <lucide-icon [img]="Sparkles" [size]="14"></lucide-icon>
+        Assistant IA
+      </button>
+    </div>
+  </div>
+
+  <form [formGroup]="form" (ngSubmit)="submit()" class="edit-form">
+
+    <!-- Illustrations (galerie editable) -->
+    <div class="field">
+      <label>Illustrations</label>
+      <app-image-gallery
+        [imageIds]="illustrationImageIds"
+        [editable]="true"
+        (imageIdsChange)="illustrationImageIds = $event">
+      </app-image-gallery>
+      <small class="field-hint">Ajoute des cartes, portraits ou ambiances pour illustrer ce chapitre.</small>
+    </div>
+
+    <div class="field">
+      <label>Titre du chapitre *</label>
+      <input
+        type="text"
+        formControlName="name"
+        placeholder="Ex: Chapitre 1: Les Disparitions"
+        [class.invalid]="form.get('name')?.invalid && form.get('name')?.touched"
+      />
+    </div>
+
+    <div class="field">
+      <label>Synopsis du chapitre</label>
+      <textarea
+        formControlName="description"
+        placeholder="Décrivez brièvement ce qui se passe dans ce chapitre..."
+        rows="5">
+      </textarea>
+    </div>
+
+    <div class="field">
+      <label>Notes du Maître de Jeu</label>
+      <textarea
+        formControlName="gmNotes"
+        placeholder="Vos notes privées sur le déroulement du chapitre, les événements clés, les rebondissements..."
+        rows="6">
+      </textarea>
+      <small class="field-hint">Ces notes sont privées et ne seront pas exportées vers FoundryVTT.</small>
+    </div>
+
+    <div class="field-row">
+      <div class="field">
+        <label>Objectifs des joueurs</label>
+        <textarea
+          formControlName="playerObjectives"
+          placeholder="Que doivent accomplir les joueurs dans ce chapitre ?"
+          rows="4">
+        </textarea>
+      </div>
+      <div class="field">
+        <label>Enjeux narratifs</label>
+        <textarea
+          formControlName="narrativeStakes"
+          placeholder="Quels sont les enjeux dramatiques ?"
+          rows="4">
+        </textarea>
+      </div>
+    </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>
+
+    <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>
+
+    <div class="form-actions">
+      <button type="submit" class="btn-primary" [disabled]="form.invalid">
+        Sauvegarder
+      </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>
+    </div>
+
+  </form>
+
+</div>
+
+<!-- Drawer chat IA (hors .edit-page pour couvrir le viewport à droite) -->
+<app-ai-chat-drawer
+  [campaignId]="campaignId"
+  entityType="chapter"
+  [entityId]="chapterId"
+  [isOpen]="chatOpen"
+  welcomeMessage="Je vois ce chapitre. Demande-moi d'étoffer ses objectifs, ses enjeux ou sa scène d'ouverture."
+  [quickSuggestions]="chatQuickSuggestions"
+  (close)="chatOpen = false">
+</app-ai-chat-drawer>

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

@@ -0,0 +1,31 @@
+.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;
+  }
+}
+
+.edit-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+// Override local : bouton Supprimer poussé à droite (voir _buttons.scss pour la base).
+.btn-danger {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  margin-left: auto;
+}

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

@@ -0,0 +1,173 @@
+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 { PageService } from '../../services/page.service';
+import { LayoutService, GlobalItem } from '../../services/layout.service';
+import { PageTitleService } from '../../services/page-title.service';
+import { Campaign, Chapter } 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';
+
+/**
+ * Écran de détail/modification d'un Chapitre.
+ * Route : /campaigns/:campaignId/arcs/:arcId/chapters/:chapterId
+ *
+ * Inclut le picker de pages Lore (B2 cross-context) si la campagne parente
+ * est associée à un Lore.
+ */
+@Component({
+  selector: 'app-chapter-edit',
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule, LucideAngularModule, LoreLinkPickerComponent, AiChatDrawerComponent, ImageGalleryComponent],
+  templateUrl: './chapter-edit.component.html',
+  styleUrls: ['./chapter-edit.component.scss']
+})
+export class ChapterEditComponent implements OnInit, OnDestroy {
+  readonly Trash2 = Trash2;
+  readonly Sparkles = Sparkles;
+
+  /** État drawer chat IA (b5.7 — intégration Campagne). */
+  chatOpen = false;
+  readonly chatQuickSuggestions = [
+    'Propose des objectifs clairs pour les joueurs dans ce chapitre',
+    'Imagine 2 tensions narratives qui relancent l\'intérêt en milieu de chapitre',
+    'Suggère une scène d\'ouverture marquante'
+  ];
+
+  toggleChat(): void { this.chatOpen = !this.chatOpen; }
+
+  form: FormGroup;
+  campaignId = '';
+  arcId = '';
+  chapterId = '';
+  chapter: Chapter | null = null;
+
+  availablePages: Page[] = [];
+  loreId: string | null = null;
+  relatedPageIds: string[] = [];
+  illustrationImageIds: string[] = [];
+
+  constructor(
+    private fb: FormBuilder,
+    private route: ActivatedRoute,
+    private router: Router,
+    private campaignService: CampaignService,
+    private pageService: PageService,
+    private layoutService: LayoutService,
+    private pageTitleService: PageTitleService
+  ) {
+    this.form = this.fb.group({
+      name:             ['', Validators.required],
+      description:      [''],
+      gmNotes:          [''],
+      playerObjectives: [''],
+      narrativeStakes:  ['']
+    });
+  }
+
+  ngOnInit(): void {
+    // On s'abonne à paramMap plutôt que de lire snapshot une fois : Angular
+    // réutilise le composant quand on navigue entre chapitres 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')!;
+      const newChapterId = pm.get('chapterId')!;
+      if (newChapterId !== this.chapterId ||
+          newArcId !== this.arcId ||
+          newCampaignId !== this.campaignId) {
+        this.campaignId = newCampaignId;
+        this.arcId = newArcId;
+        this.chapterId = newChapterId;
+        this.loadAll();
+      }
+    });
+  }
+
+  private loadAll(): void {
+    forkJoin({
+      campaign: this.campaignService.getCampaignById(this.campaignId),
+      allCampaigns: this.campaignService.getAllCampaigns(),
+      chapter: this.campaignService.getChapterById(this.chapterId),
+      treeData: loadCampaignTreeData(this.campaignService, this.campaignId)
+    }).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, chapter, treeData, pages, loreId }) => {
+      this.chapter = chapter;
+      this.pageTitleService.set(chapter.name);
+      this.loreId = loreId;
+      this.availablePages = pages;
+      this.relatedPageIds = [...(chapter.relatedPageIds ?? [])];
+      this.illustrationImageIds = [...(chapter.illustrationImageIds ?? [])];
+      this.form.patchValue({
+        name:             chapter.name,
+        description:      chapter.description ?? '',
+        gmNotes:          chapter.gmNotes ?? '',
+        playerObjectives: chapter.playerObjectives ?? '',
+        narrativeStakes:  chapter.narrativeStakes ?? ''
+      });
+
+      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.chapter) return;
+    this.campaignService.updateChapter(this.chapterId, {
+      name:             this.form.value.name,
+      description:      this.form.value.description,
+      arcId:            this.arcId,
+      order:            this.chapter.order ?? 1,
+      gmNotes:          this.form.value.gmNotes,
+      playerObjectives: this.form.value.playerObjectives,
+      narrativeStakes:  this.form.value.narrativeStakes,
+      relatedPageIds:   this.relatedPageIds,
+      illustrationImageIds: this.illustrationImageIds
+    }).subscribe({
+      next: () => this.router.navigate(['/campaigns', this.campaignId, 'arcs', this.arcId, 'chapters', this.chapterId]),
+      error: () => console.error('Erreur lors de la sauvegarde')
+    });
+  }
+
+  delete(): void {
+    if (!confirm(`Supprimer le chapitre "${this.chapter?.name}" ? Cette action est irréversible.`)) return;
+    this.campaignService.deleteChapter(this.chapterId).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, 'chapters', this.chapterId]);
+  }
+
+  ngOnDestroy(): void {
+    this.layoutService.hide();
+  }
+}

web/src/app/campaigns/chapter-graph/chapter-graph.component.html

@@ -0,0 +1,64 @@
+<div class="graph-page">
+
+  <div class="page-header">
+    <div>
+      <h1>{{ chapter?.name || 'Chapitre' }} — Carte</h1>
+      <p class="subtitle">Organigramme des scènes et de leurs branches narratives</p>
+    </div>
+    <button type="button" class="btn-secondary" (click)="back()">
+      <lucide-icon [img]="ArrowLeft" [size]="14"></lucide-icon>
+      Retour au chapitre
+    </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>
+
+  <div class="graph-container" *ngIf="scenes.length > 0">
+    <svg [attr.width]="svgWidth" [attr.height]="svgHeight" class="graph-svg">
+      <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="#6b7280" />
+        </marker>
+      </defs>
+
+      <g class="edges">
+        <g class="edge" *ngFor="let edge of edges">
+          <line [attr.x1]="edge.x1" [attr.y1]="edge.y1"
+                [attr.x2]="edge.x2" [attr.y2]="edge.y2"
+                stroke="#6b7280" 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">
+            {{ edge.label }}
+          </text>
+        </g>
+      </g>
+
+      <g class="nodes">
+        <g class="node" *ngFor="let node of nodes" (click)="openScene(node.id)">
+          <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"
+                [attr.y]="node.y + NODE_HEIGHT / 2 + 5"
+                text-anchor="middle"
+                class="node-label">
+            {{ node.displayName }}
+          </text>
+        </g>
+      </g>
+    </svg>
+
+    <small class="graph-hint">
+      💡 Cliquez sur une scène pour l'ouvrir. Les scènes non reliées au point d'entrée (scène d'ordre 1) apparaissent en bas.
+    </small>
+  </div>
+
+</div>

web/src/app/campaigns/chapter-graph/chapter-graph.component.scss

@@ -0,0 +1,86 @@
+.graph-page {
+  padding: 2.5rem 2rem;
+  max-width: 100%;
+}
+
+.page-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-bottom: 2rem;
+
+  .subtitle {
+    color: #6b7280;
+    font-size: 0.9rem;
+    margin: 0.25rem 0 0;
+  }
+}
+
+.graph-empty {
+  padding: 2rem;
+  text-align: center;
+  color: #6b7280;
+  background: #f9fafb;
+  border-radius: 8px;
+  border: 1px dashed #d1d5db;
+}
+
+.graph-container {
+  background: #fafafa;
+  border: 1px solid #e5e7eb;
+  border-radius: 12px;
+  padding: 20px;
+  overflow: auto;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+}
+
+.graph-svg {
+  display: block;
+  max-width: 100%;
+}
+
+.node {
+  cursor: pointer;
+
+  .node-box {
+    fill: #ffffff;
+    stroke: #1f2937;
+    stroke-width: 2;
+    transition: fill 0.15s ease, stroke 0.15s ease;
+  }
+
+  .node-label {
+    font-size: 0.9rem;
+    font-weight: 500;
+    fill: #1f2937;
+    pointer-events: none;
+  }
+
+  &:hover .node-box {
+    fill: #eef2ff;
+    stroke: #4f46e5;
+  }
+}
+
+.edge-label {
+  font-size: 0.75rem;
+  fill: #4b5563;
+  font-style: italic;
+  // Halo blanc autour du texte pour garantir la lisibilité même s'il passe
+  // sur une ligne ou un autre élément.
+  paint-order: stroke;
+  stroke: #fafafa;
+  stroke-width: 3px;
+  stroke-linejoin: round;
+}
+
+.graph-hint {
+  display: block;
+  margin-top: 1rem;
+  color: #6b7280;
+  font-size: 0.85rem;
+}

web/src/app/campaigns/chapter-graph/chapter-graph.component.ts

@@ -0,0 +1,204 @@
+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';
+import { CampaignService } from '../../services/campaign.service';
+import { LayoutService, GlobalItem } from '../../services/layout.service';
+import { PageTitleService } from '../../services/page-title.service';
+import { Campaign, Chapter, Scene } from '../../services/campaign.model';
+import { loadCampaignTreeData, buildCampaignTree } from '../campaign-tree.helper';
+
+interface GraphNode { id: string; name: string; displayName: string; x: number; y: number; }
+interface GraphEdge { label: string; x1: number; y1: number; x2: number; y2: number; labelX: number; labelY: number; }
+
+/**
+ * Vue graphique d'un chapitre : organigramme des scènes et branches narratives.
+ * Layout custom (BFS par niveaux) en SVG — évite une dépendance lourde type ngx-graph.
+ */
+@Component({
+  selector: 'app-chapter-graph',
+  standalone: true,
+  imports: [CommonModule, RouterModule, LucideAngularModule],
+  templateUrl: './chapter-graph.component.html',
+  styleUrls: ['./chapter-graph.component.scss']
+})
+export class ChapterGraphComponent implements OnInit, OnDestroy {
+  readonly ArrowLeft = ArrowLeft;
+
+  campaignId = '';
+  arcId = '';
+  chapterId = '';
+  chapter: Chapter | null = null;
+  scenes: Scene[] = [];
+
+  nodes: GraphNode[] = [];
+  edges: GraphEdge[] = [];
+
+  readonly NODE_WIDTH = 220;
+  readonly NODE_HEIGHT = 64;
+  readonly H_SPACING = 50;
+  readonly V_SPACING = 90;
+  readonly MAX_LABEL_CHARS = 26;
+
+  svgWidth = 600;
+  svgHeight = 400;
+
+  constructor(
+    private route: ActivatedRoute,
+    private router: Router,
+    private campaignService: CampaignService,
+    private layoutService: LayoutService,
+    private pageTitleService: PageTitleService
+  ) {}
+
+  ngOnInit(): void {
+    this.route.paramMap.subscribe(pm => {
+      this.campaignId = pm.get('campaignId')!;
+      this.arcId = pm.get('arcId')!;
+      this.chapterId = pm.get('chapterId')!;
+      this.load();
+    });
+  }
+
+  private load(): void {
+    forkJoin({
+      campaign: this.campaignService.getCampaignById(this.campaignId),
+      allCampaigns: this.campaignService.getAllCampaigns(),
+      chapter: this.campaignService.getChapterById(this.chapterId),
+      scenes: this.campaignService.getScenes(this.chapterId),
+      treeData: loadCampaignTreeData(this.campaignService, this.campaignId)
+    }).subscribe(({ campaign, allCampaigns, chapter, scenes, treeData }) => {
+      this.chapter = chapter;
+      this.scenes = scenes;
+      this.pageTitleService.set(`${chapter.name} — Carte`);
+      this.buildGraph();
+
+      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: [],
+        globalItems,
+        globalBackLabel: 'Toutes les campagnes',
+        globalBackRoute: '/campaigns'
+      });
+    });
+  }
+
+  /**
+   * Layout en niveaux par BFS depuis la scène d'entrée (order le plus bas).
+   * Scènes non atteignables rassemblées dans un niveau "orphelin" tout en bas.
+   */
+  private buildGraph(): void {
+    if (this.scenes.length === 0) {
+      this.nodes = []; this.edges = [];
+      this.svgWidth = 600; this.svgHeight = 200;
+      return;
+    }
+
+    const sorted = [...this.scenes].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+    const entry = sorted[0];
+
+    const levelOf = new Map<string, number>();
+    levelOf.set(entry.id!, 0);
+    const queue: string[] = [entry.id!];
+    while (queue.length > 0) {
+      const curId = queue.shift()!;
+      const curLevel = levelOf.get(curId)!;
+      const curScene = this.scenes.find(s => s.id === curId);
+      if (!curScene?.branches) continue;
+      for (const b of curScene.branches) {
+        if (!levelOf.has(b.targetSceneId)) {
+          levelOf.set(b.targetSceneId, curLevel + 1);
+          queue.push(b.targetSceneId);
+        }
+      }
+    }
+
+    const reachableMax = levelOf.size > 0 ? Math.max(...Array.from(levelOf.values())) : 0;
+    const orphanLevel = reachableMax + 1;
+    for (const s of this.scenes) {
+      if (!levelOf.has(s.id!)) levelOf.set(s.id!, orphanLevel);
+    }
+
+    const byLevel = new Map<number, Scene[]>();
+    for (const s of this.scenes) {
+      const lvl = levelOf.get(s.id!)!;
+      if (!byLevel.has(lvl)) byLevel.set(lvl, []);
+      byLevel.get(lvl)!.push(s);
+    }
+
+    const maxPerLevel = Math.max(...Array.from(byLevel.values()).map(arr => arr.length));
+    const rowWidth = maxPerLevel * this.NODE_WIDTH + (maxPerLevel - 1) * this.H_SPACING;
+
+    const nodes: GraphNode[] = [];
+    for (const [lvl, arr] of byLevel.entries()) {
+      const count = arr.length;
+      const levelWidth = count * this.NODE_WIDTH + (count - 1) * this.H_SPACING;
+      const startX = (rowWidth - levelWidth) / 2;
+      arr.forEach((s, i) => {
+        nodes.push({
+          id: s.id!,
+          name: s.name,
+          displayName: this.truncate(s.name),
+          x: startX + i * (this.NODE_WIDTH + this.H_SPACING),
+          y: lvl * (this.NODE_HEIGHT + this.V_SPACING)
+        });
+      });
+    }
+
+    const nodeMap = new Map(nodes.map(n => [n.id, n]));
+    const edges: GraphEdge[] = [];
+    for (const scene of this.scenes) {
+      const from = nodeMap.get(scene.id!);
+      if (!from || !scene.branches) continue;
+      // On positionne chaque label a une fraction t differente de l'arete selon
+      // son index parmi les sorties du meme noeud source. Evite le chevauchement
+      // des labels au milieu quand plusieurs aretes convergent/divergent.
+      const siblings = scene.branches.filter(b => nodeMap.has(b.targetSceneId));
+      const count = siblings.length;
+      siblings.forEach((b, idx) => {
+        const to = nodeMap.get(b.targetSceneId)!;
+        const x1 = from.x + this.NODE_WIDTH / 2;
+        const y1 = from.y + this.NODE_HEIGHT;
+        const x2 = to.x + this.NODE_WIDTH / 2;
+        const y2 = to.y;
+        // t ∈ [0.25, 0.55] : labels plutot pres de la source, echelonnes.
+        const t = count === 1 ? 0.5 : 0.25 + (idx / (count - 1)) * 0.3;
+        edges.push({
+          label: b.label,
+          x1, y1, x2, y2,
+          labelX: x1 + (x2 - x1) * t,
+          labelY: y1 + (y2 - y1) * t - 4
+        });
+      });
+    }
+
+    this.nodes = nodes;
+    this.edges = edges;
+    this.svgWidth = Math.max(rowWidth + 40, 600);
+    this.svgHeight = (orphanLevel + 1) * (this.NODE_HEIGHT + this.V_SPACING) + 40;
+  }
+
+  private truncate(text: string): string {
+    return text.length > this.MAX_LABEL_CHARS
+      ? text.slice(0, this.MAX_LABEL_CHARS - 1) + '…'
+      : text;
+  }
+
+  openScene(sceneId: string): void {
+    this.router.navigate(['/campaigns', this.campaignId, 'arcs', this.arcId, 'chapters', this.chapterId, 'scenes', sceneId]);
+  }
+
+  back(): void {
+    this.router.navigate(['/campaigns', this.campaignId, 'arcs', this.arcId, 'chapters', this.chapterId]);
+  }
+
+  ngOnDestroy(): void {
+    this.layoutService.hide();
+  }
+}

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

@@ -0,0 +1,65 @@
+<div class="view-page" *ngIf="chapter">
+
+  <header class="view-header">
+    <div>
+      <h1>{{ chapter.name }}</h1>
+      <p class="view-subtitle">Chapitre</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>
+    </div>
+  </header>
+
+  <!-- Illustrations -->
+  <section class="view-section" *ngIf="(chapter.illustrationImageIds?.length ?? 0) > 0">
+    <app-image-gallery [imageIds]="chapter.illustrationImageIds ?? []"></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">
+    <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>
+    </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>

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

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

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

@@ -0,0 +1,118 @@
+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, Network } from 'lucide-angular';
+import { CampaignService } from '../../services/campaign.service';
+import { PageService } from '../../services/page.service';
+import { LayoutService, GlobalItem } from '../../services/layout.service';
+import { PageTitleService } from '../../services/page-title.service';
+import { Campaign, Chapter } 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 Chapitre (lecture seule).
+ * Route : /campaigns/:campaignId/arcs/:arcId/chapters/:chapterId
+ */
+@Component({
+  selector: 'app-chapter-view',
+  standalone: true,
+  imports: [CommonModule, RouterModule, LucideAngularModule, ImageGalleryComponent],
+  templateUrl: './chapter-view.component.html',
+  styleUrls: ['./chapter-view.component.scss']
+})
+export class ChapterViewComponent implements OnInit, OnDestroy {
+  readonly Pencil = Pencil;
+  readonly Network = Network;
+
+  campaignId = '';
+  arcId = '';
+  chapterId = '';
+  chapter: Chapter | null = null;
+
+  loreId: string | null = null;
+  availablePages: Page[] = [];
+
+  constructor(
+    private route: ActivatedRoute,
+    private router: Router,
+    private campaignService: CampaignService,
+    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')!;
+      const newChapterId = pm.get('chapterId')!;
+      if (newChapterId !== this.chapterId ||
+          newArcId !== this.arcId ||
+          newCampaignId !== this.campaignId) {
+        this.campaignId = newCampaignId;
+        this.arcId = newArcId;
+        this.chapterId = newChapterId;
+        this.load();
+      }
+    });
+  }
+
+  private load(): void {
+    forkJoin({
+      campaign: this.campaignService.getCampaignById(this.campaignId),
+      allCampaigns: this.campaignService.getAllCampaigns(),
+      chapter: this.campaignService.getChapterById(this.chapterId),
+      treeData: loadCampaignTreeData(this.campaignService, this.campaignId)
+    }).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, chapter, treeData, pages, loreId }) => {
+      this.chapter = chapter;
+      this.loreId = loreId;
+      this.availablePages = pages;
+      this.pageTitleService.set(chapter.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, 'chapters', this.chapterId, 'edit'
+    ]);
+  }
+
+  openGraph(): void {
+    this.router.navigate([
+      '/campaigns', this.campaignId, 'arcs', this.arcId, 'chapters', this.chapterId, 'graph'
+    ]);
+  }
+
+  ngOnDestroy(): void {
+    this.layoutService.hide();
+  }
+}

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

@@ -0,0 +1,38 @@
+<div class="scene-create-page">
+
+  <div class="page-header">
+    <h1>Créer une nouvelle scène</h1>
+    <p class="chapter-ref" *ngIf="chapterName">Chapitre : {{ chapterName }}</p>
+  </div>
+
+  <form [formGroup]="form" (ngSubmit)="submit()" class="scene-form">
+
+    <div class="field">
+      <label>Nom de la scène *</label>
+      <input
+        type="text"
+        formControlName="name"
+        placeholder="Ex: Arrivée au village"
+        [class.invalid]="form.get('name')?.invalid && form.get('name')?.touched"
+      />
+    </div>
+
+    <div class="field">
+      <label>Description</label>
+      <textarea
+        formControlName="description"
+        placeholder="Décrivez la scène, les événements clés, les PNJ présents..."
+        rows="6">
+      </textarea>
+    </div>
+
+    <div class="form-actions">
+      <button type="submit" class="btn-primary" [disabled]="form.invalid">
+        Créer la scène
+      </button>
+      <button type="button" class="btn-secondary" (click)="cancel()">Annuler</button>
+    </div>
+
+  </form>
+
+</div>

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

@@ -0,0 +1,18 @@
+.scene-create-page {
+  padding: 2.5rem 2rem;
+  max-width: 640px;
+}
+
+// Overrides locaux : titre violet + sous-titre .chapter-ref (parent de la scène).
+.page-header {
+  h1 { color: #a5b4fc; }
+  .chapter-ref { color: #6b7280; font-size: 0.85rem; margin: 0; }
+}
+
+.scene-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.btn-primary { flex: 1; }

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

@@ -0,0 +1,99 @@
+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 } from 'lucide-angular';
+import { CampaignService } from '../../services/campaign.service';
+import { LayoutService, GlobalItem } from '../../services/layout.service';
+import { Campaign } from '../../services/campaign.model';
+import { loadCampaignTreeData, buildCampaignTree } from '../campaign-tree.helper';
+
+/**
+ * Écran de création d'une nouvelle scène rattachée à un chapitre.
+ * Route : /campaigns/:campaignId/arcs/:arcId/chapters/:chapterId/scenes/create
+ */
+@Component({
+  selector: 'app-scene-create',
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule, LucideAngularModule],
+  templateUrl: './scene-create.component.html',
+  styleUrls: ['./scene-create.component.scss']
+})
+export class SceneCreateComponent implements OnInit, OnDestroy {
+  form: FormGroup;
+  campaignId = '';
+  arcId = '';
+  chapterId = '';
+  chapterName = '';
+  private existingSceneCount = 0;
+
+  constructor(
+    private fb: FormBuilder,
+    private route: ActivatedRoute,
+    private router: Router,
+    private campaignService: CampaignService,
+    private layoutService: LayoutService
+  ) {
+    this.form = this.fb.group({
+      name:        ['', Validators.required],
+      description: ['']
+    });
+  }
+
+  ngOnInit(): void {
+    this.campaignId = this.route.snapshot.paramMap.get('campaignId')!;
+    this.arcId = this.route.snapshot.paramMap.get('arcId')!;
+    this.chapterId = this.route.snapshot.paramMap.get('chapterId')!;
+    this.loadLayout();
+  }
+
+  private loadLayout(): void {
+    forkJoin({
+      campaign: this.campaignService.getCampaignById(this.campaignId),
+      allCampaigns: this.campaignService.getAllCampaigns(),
+      treeData: loadCampaignTreeData(this.campaignService, this.campaignId)
+    }).subscribe(({ campaign, allCampaigns, treeData }) => {
+      const currentChapter = (treeData.chaptersByArc[this.arcId] ?? []).find(c => c.id === this.chapterId);
+      this.chapterName = currentChapter?.name ?? '';
+      this.existingSceneCount = treeData.scenesByChapter[this.chapterId]?.length ?? 0;
+
+      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.createScene({
+      name: this.form.value.name,
+      description: this.form.value.description,
+      chapterId: this.chapterId,
+      order: this.existingSceneCount + 1
+    }).subscribe({
+      next: (created) => this.router.navigate(['/campaigns', this.campaignId, 'arcs', this.arcId, 'chapters', this.chapterId, 'scenes', created.id]),
+      error: () => console.error('Erreur lors de la création de la scène')
+    });
+  }
+
+  cancel(): void {
+    this.router.navigate(['/campaigns', this.campaignId]);
+  }
+
+  ngOnDestroy(): void {
+    this.layoutService.hide();
+  }
+}

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

@@ -0,0 +1,228 @@
+<div class="edit-page">
+
+  <div class="page-header">
+    <div>
+      <h1>{{ scene?.name || 'Scène' }}</h1>
+      <p class="subtitle">Scène</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 cette scène">
+        <lucide-icon [img]="Sparkles" [size]="14"></lucide-icon>
+        Assistant IA
+      </button>
+    </div>
+  </div>
+
+  <form [formGroup]="form" (ngSubmit)="submit()" class="edit-form">
+
+    <!-- Illustrations (galerie editable) -->
+    <div class="field">
+      <label>Illustrations</label>
+      <app-image-gallery
+        [imageIds]="illustrationImageIds"
+        [editable]="true"
+        (imageIdsChange)="illustrationImageIds = $event">
+      </app-image-gallery>
+      <small class="field-hint">Carte du lieu, portrait des PNJ presents, ambiance visuelle...</small>
+    </div>
+
+    <div class="field">
+      <label>Titre de la scène *</label>
+      <input
+        type="text"
+        formControlName="name"
+        placeholder="Ex: Arrivée au village"
+        [class.invalid]="form.get('name')?.invalid && form.get('name')?.touched"
+      />
+    </div>
+
+    <div class="field">
+      <label>Description courte *</label>
+      <textarea
+        formControlName="description"
+        placeholder="Résumé en une ou deux phrases de ce qui se passe..."
+        rows="3">
+      </textarea>
+    </div>
+
+    <!-- Section : Contexte et ambiance -->
+    <app-expandable-section title="Contexte et ambiance" icon="📍" [initiallyOpen]="true">
+      <div class="field-row">
+        <div class="field">
+          <label>Lieu</label>
+          <input type="text" formControlName="location" placeholder="Ex: Taverne du Dragon d'Or" />
+        </div>
+        <div class="field">
+          <label>Moment</label>
+          <input type="text" formControlName="timing" placeholder="Ex: Soir, à la tombée de la nuit" />
+        </div>
+      </div>
+      <div class="field">
+        <label>Ambiance et atmosphère</label>
+        <textarea
+          formControlName="atmosphere"
+          placeholder="Décrivez l'ambiance générale de la scène (sons, odeurs, lumière, émotions...)"
+          rows="4">
+        </textarea>
+      </div>
+    </app-expandable-section>
+
+    <!-- Section : Narration pour les joueurs -->
+    <app-expandable-section title="Narration pour les joueurs" icon="📖">
+      <div class="field">
+        <textarea
+          formControlName="playerNarration"
+          placeholder="Le texte que vous lirez aux joueurs pour planter le décor de cette scène..."
+          rows="6">
+        </textarea>
+        <small class="field-hint">Ce texte peut être lu directement à vos joueurs.</small>
+      </div>
+    </app-expandable-section>
+
+    <!-- Section : Notes et secrets du MJ (privé) -->
+    <app-expandable-section title="Notes et secrets du MJ" icon="🔒" variant="private">
+      <div class="field">
+        <textarea
+          formControlName="gmSecretNotes"
+          placeholder="Informations cachées, indices, éléments secrets que les joueurs ne doivent pas connaître..."
+          rows="5">
+        </textarea>
+        <small class="field-hint">Ces notes sont privées et visibles uniquement par le MJ.</small>
+      </div>
+    </app-expandable-section>
+
+    <!-- Section : Choix et conséquences -->
+    <app-expandable-section title="Choix et conséquences" icon="🔀">
+      <div class="field">
+        <textarea
+          formControlName="choicesConsequences"
+          placeholder="Décrivez les différentes options qui s'offrent aux joueurs et leurs conséquences..."
+          rows="5">
+        </textarea>
+      </div>
+    </app-expandable-section>
+
+    <!-- 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>
+        </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 -->
+    <app-expandable-section title="Combat ou rencontre" icon="⚔️">
+      <div class="field">
+        <label>Difficulté estimée</label>
+        <input type="text" formControlName="combatDifficulty" placeholder="Ex: Moyenne, 3 gobelins niveau 2" />
+      </div>
+      <div class="field">
+        <label>Ennemis et créatures</label>
+        <textarea
+          formControlName="enemies"
+          placeholder="Liste des ennemis présents dans cette scène..."
+          rows="4">
+        </textarea>
+      </div>
+    </app-expandable-section>
+
+    <!-- Section : Pages Lore associées (B2 cross-context) -->
+    <app-expandable-section title="Pages Lore associées" icon="🔗" *ngIf="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.
+        </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>
+
+    <div class="form-actions">
+      <button type="submit" class="btn-primary" [disabled]="form.invalid">
+        Sauvegarder
+      </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>
+    </div>
+
+  </form>
+
+</div>
+
+<!-- Drawer chat IA (hors .edit-page pour couvrir le viewport à droite) -->
+<app-ai-chat-drawer
+  [campaignId]="campaignId"
+  entityType="scene"
+  [entityId]="sceneId"
+  [isOpen]="chatOpen"
+  welcomeMessage="Je vois cette scène. Demande-moi d'enrichir son ambiance, sa narration ou ses choix."
+  [quickSuggestions]="chatQuickSuggestions"
+  (close)="chatOpen = false">
+</app-ai-chat-drawer>

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

@@ -0,0 +1,83 @@
+.edit-page {
+  padding: 2.5rem 2rem;
+  max-width: 760px;
+}
+
+// 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;
+  }
+}
+
+.edit-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+// Override local : bouton Supprimer poussé à droite (voir _buttons.scss pour la base).
+.btn-danger {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  margin-left: auto;
+}
+
+// Branches narratives : cartes empilées avec libellé / cible / condition / bouton retirer.
+.branches-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.branch-item {
+  position: relative;
+  padding: 1rem;
+  background: #f9fafb;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.btn-add-branch {
+  align-self: flex-start;
+  padding: 0.5rem 0.9rem;
+  background: transparent;
+  color: #1f2937;
+  border: 1px dashed #9ca3af;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 0.9rem;
+
+  &:hover {
+    background: #f3f4f6;
+    border-color: #1f2937;
+  }
+}
+
+.btn-remove-branch {
+  align-self: flex-end;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  padding: 0.35rem 0.7rem;
+  background: transparent;
+  color: #b91c1c;
+  border: 1px solid #fca5a5;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 0.85rem;
+
+  &:hover {
+    background: #fef2f2;
+  }
+}

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

@@ -0,0 +1,228 @@
+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 { PageService } from '../../services/page.service';
+import { LayoutService, GlobalItem } from '../../services/layout.service';
+import { PageTitleService } from '../../services/page-title.service';
+import { Campaign, Scene, SceneBranch } from '../../services/campaign.model';
+import { Page } from '../../services/page.model';
+import { loadCampaignTreeData, buildCampaignTree } from '../campaign-tree.helper';
+import { ExpandableSectionComponent } from '../../shared/expandable-section/expandable-section.component';
+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';
+
+/**
+ * Écran de détail/modification d'une Scène.
+ * Route : /campaigns/:campaignId/arcs/:arcId/chapters/:chapterId/scenes/:sceneId
+ */
+@Component({
+  selector: 'app-scene-edit',
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule, LucideAngularModule, ExpandableSectionComponent, LoreLinkPickerComponent, AiChatDrawerComponent, ImageGalleryComponent],
+  templateUrl: './scene-edit.component.html',
+  styleUrls: ['./scene-edit.component.scss']
+})
+export class SceneEditComponent implements OnInit, OnDestroy {
+  readonly Trash2 = Trash2;
+  readonly Sparkles = Sparkles;
+
+  /** État drawer chat IA (b5.7 — intégration Campagne). */
+  chatOpen = false;
+  readonly chatQuickSuggestions = [
+    'Propose une ambiance sensorielle immersive pour cette scène',
+    'Suggère une narration d\'ouverture à lire aux joueurs',
+    'Imagine 2 choix avec conséquences marquantes'
+  ];
+
+  toggleChat(): void { this.chatOpen = !this.chatOpen; }
+
+  form: FormGroup;
+  campaignId = '';
+  arcId = '';
+  chapterId = '';
+  sceneId = '';
+  scene: Scene | null = null;
+
+  availablePages: Page[] = [];
+  loreId: string | null = null;
+  relatedPageIds: string[] = [];
+  illustrationImageIds: string[] = [];
+
+  /** Scènes du chapitre courant (hors scène éditée) — alimente le dropdown des cibles. */
+  siblingScenes: Scene[] = [];
+  /** Branches narratives (état local mutable, persisté au submit). */
+  branches: SceneBranch[] = [];
+
+  constructor(
+    private fb: FormBuilder,
+    private route: ActivatedRoute,
+    private router: Router,
+    private campaignService: CampaignService,
+    private pageService: PageService,
+    private layoutService: LayoutService,
+    private pageTitleService: PageTitleService
+  ) {
+    this.form = this.fb.group({
+      name:                 ['', Validators.required],
+      description:          [''],
+      // Contexte et ambiance
+      location:             [''],
+      timing:               [''],
+      atmosphere:           [''],
+      // Narration
+      playerNarration:      [''],
+      // Secrets MJ
+      gmSecretNotes:        [''],
+      // Choix
+      choicesConsequences:  [''],
+      // Combat
+      combatDifficulty:     [''],
+      enemies:              ['']
+    });
+  }
+
+  ngOnInit(): void {
+    // On s'abonne à paramMap plutôt que de lire snapshot une fois : Angular
+    // réutilise le composant quand on navigue entre scènes 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')!;
+      const newChapterId = pm.get('chapterId')!;
+      const newSceneId = pm.get('sceneId')!;
+      if (newSceneId !== this.sceneId ||
+          newChapterId !== this.chapterId ||
+          newArcId !== this.arcId ||
+          newCampaignId !== this.campaignId) {
+        this.campaignId = newCampaignId;
+        this.arcId = newArcId;
+        this.chapterId = newChapterId;
+        this.sceneId = newSceneId;
+        this.loadAll();
+      }
+    });
+  }
+
+  private loadAll(): void {
+    forkJoin({
+      campaign: this.campaignService.getCampaignById(this.campaignId),
+      allCampaigns: this.campaignService.getAllCampaigns(),
+      scene: this.campaignService.getSceneById(this.sceneId),
+      chapterScenes: this.campaignService.getScenes(this.chapterId),
+      treeData: loadCampaignTreeData(this.campaignService, this.campaignId)
+    }).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, scene, chapterScenes, treeData, pages, loreId }) => {
+      this.scene = scene;
+      this.pageTitleService.set(scene.name);
+      this.loreId = loreId;
+      this.availablePages = pages;
+      this.relatedPageIds = [...(scene.relatedPageIds ?? [])];
+      this.illustrationImageIds = [...(scene.illustrationImageIds ?? [])];
+      this.siblingScenes = chapterScenes.filter(s => s.id !== this.sceneId);
+      this.branches = (scene.branches ?? []).map(b => ({ ...b }));
+      this.form.patchValue({
+        name:                 scene.name,
+        description:          scene.description ?? '',
+        location:             scene.location ?? '',
+        timing:               scene.timing ?? '',
+        atmosphere:           scene.atmosphere ?? '',
+        playerNarration:      scene.playerNarration ?? '',
+        gmSecretNotes:        scene.gmSecretNotes ?? '',
+        choicesConsequences:  scene.choicesConsequences ?? '',
+        combatDifficulty:     scene.combatDifficulty ?? '',
+        enemies:              scene.enemies ?? ''
+      });
+
+      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.scene) return;
+    this.campaignService.updateScene(this.sceneId, {
+      name:                 this.form.value.name,
+      description:          this.form.value.description,
+      chapterId:            this.chapterId,
+      order:                this.scene.order ?? 1,
+      location:             this.form.value.location,
+      timing:               this.form.value.timing,
+      atmosphere:           this.form.value.atmosphere,
+      playerNarration:      this.form.value.playerNarration,
+      gmSecretNotes:        this.form.value.gmSecretNotes,
+      choicesConsequences:  this.form.value.choicesConsequences,
+      combatDifficulty:     this.form.value.combatDifficulty,
+      enemies:              this.form.value.enemies,
+      relatedPageIds:       this.relatedPageIds,
+      illustrationImageIds: this.illustrationImageIds,
+      branches:             this.branches
+    }).subscribe({
+      next: () => this.router.navigate(['/campaigns', this.campaignId, 'arcs', this.arcId, 'chapters', this.chapterId, 'scenes', this.sceneId]),
+      error: () => console.error('Erreur lors de la sauvegarde')
+    });
+  }
+
+  delete(): void {
+    if (!confirm(`Supprimer la scène "${this.scene?.name}" ? Cette action est irréversible.`)) return;
+    this.campaignService.deleteScene(this.sceneId).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, 'chapters', this.chapterId, 'scenes', this.sceneId]);
+  }
+
+  // ─────────────── Gestion des branches narratives ───────────────
+
+  trackByIndex = (i: number) => i;
+
+  addBranch(): void {
+    this.branches.push({ label: '', targetSceneId: '', condition: '' });
+  }
+
+  removeBranch(index: number): void {
+    this.branches.splice(index, 1);
+  }
+
+  updateBranchLabel(index: number, value: string): void {
+    this.branches[index].label = value;
+  }
+
+  updateBranchTarget(index: number, value: string): void {
+    this.branches[index].targetSceneId = value;
+  }
+
+  updateBranchCondition(index: number, value: string): void {
+    this.branches[index].condition = value;
+  }
+
+  ngOnDestroy(): void {
+    this.layoutService.hide();
+  }
+}

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

@@ -0,0 +1,90 @@
+<div class="view-page" *ngIf="scene">
+
+  <header class="view-header">
+    <div>
+      <h1>{{ 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>
+    </div>
+  </header>
+
+  <!-- Illustrations -->
+  <section class="view-section" *ngIf="(scene.illustrationImageIds?.length ?? 0) > 0">
+    <app-image-gallery [imageIds]="scene.illustrationImageIds ?? []"></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>
+    </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>
+
+</div>

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

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

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

@@ -0,0 +1,116 @@
+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 } from 'lucide-angular';
+import { CampaignService } from '../../services/campaign.service';
+import { PageService } from '../../services/page.service';
+import { LayoutService, GlobalItem } from '../../services/layout.service';
+import { PageTitleService } from '../../services/page-title.service';
+import { Campaign, Scene } 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'une Scène (lecture seule).
+ * Route : /campaigns/:campaignId/arcs/:arcId/chapters/:chapterId/scenes/:sceneId
+ */
+@Component({
+  selector: 'app-scene-view',
+  standalone: true,
+  imports: [CommonModule, RouterModule, LucideAngularModule, ImageGalleryComponent],
+  templateUrl: './scene-view.component.html',
+  styleUrls: ['./scene-view.component.scss']
+})
+export class SceneViewComponent implements OnInit, OnDestroy {
+  readonly Pencil = Pencil;
+
+  campaignId = '';
+  arcId = '';
+  chapterId = '';
+  sceneId = '';
+  scene: Scene | null = null;
+
+  loreId: string | null = null;
+  availablePages: Page[] = [];
+
+  constructor(
+    private route: ActivatedRoute,
+    private router: Router,
+    private campaignService: CampaignService,
+    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')!;
+      const newChapterId = pm.get('chapterId')!;
+      const newSceneId = pm.get('sceneId')!;
+      if (newSceneId !== this.sceneId ||
+          newChapterId !== this.chapterId ||
+          newArcId !== this.arcId ||
+          newCampaignId !== this.campaignId) {
+        this.campaignId = newCampaignId;
+        this.arcId = newArcId;
+        this.chapterId = newChapterId;
+        this.sceneId = newSceneId;
+        this.load();
+      }
+    });
+  }
+
+  private load(): void {
+    forkJoin({
+      campaign: this.campaignService.getCampaignById(this.campaignId),
+      allCampaigns: this.campaignService.getAllCampaigns(),
+      scene: this.campaignService.getSceneById(this.sceneId),
+      treeData: loadCampaignTreeData(this.campaignService, this.campaignId)
+    }).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, scene, treeData, pages, loreId }) => {
+      this.scene = scene;
+      this.loreId = loreId;
+      this.availablePages = pages;
+      this.pageTitleService.set(scene.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,
+      'chapters', this.chapterId, 'scenes', this.sceneId, 'edit'
+    ]);
+  }
+
+  ngOnDestroy(): void {
+    this.layoutService.hide();
+  }
+}