Intégration du graphe et du multi-branche pour la partie campagne

web/src/app/app.routes.ts

@@ -19,6 +19,7 @@ export const routes: Routes = [
   { path: 'campaigns/:campaignId/arcs/:arcId/edit', loadComponent: () => import('./campaigns/arc-edit/arc-edit.component').then(m => m.ArcEditComponent) },
   { path: 'campaigns/:campaignId/arcs/:arcId/chapters/create', loadComponent: () => import('./campaigns/chapter-create/chapter-create.component').then(m => m.ChapterCreateComponent) },
   { path: 'campaigns/:campaignId/arcs/:arcId/chapters/:chapterId', loadComponent: () => import('./campaigns/chapter-view/chapter-view.component').then(m => m.ChapterViewComponent) },
+  { path: 'campaigns/:campaignId/arcs/:arcId/chapters/:chapterId/graph', loadComponent: () => import('./campaigns/chapter-graph/chapter-graph.component').then(m => m.ChapterGraphComponent) },
   { path: 'campaigns/:campaignId/arcs/:arcId/chapters/:chapterId/edit', loadComponent: () => import('./campaigns/chapter-edit/chapter-edit.component').then(m => m.ChapterEditComponent) },
   { path: 'campaigns/:campaignId/arcs/:arcId/chapters/:chapterId/scenes/create', loadComponent: () => import('./campaigns/scene-create/scene-create.component').then(m => m.SceneCreateComponent) },
   { path: 'campaigns/:campaignId/arcs/:arcId/chapters/:chapterId/scenes/:sceneId', loadComponent: () => import('./campaigns/scene-view/scene-view.component').then(m => m.SceneViewComponent) },

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

@@ -6,6 +6,11 @@
       <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

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

@@ -3,7 +3,7 @@ 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 { 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';
@@ -26,6 +26,7 @@ import { ImageGalleryComponent } from '../../shared/image-gallery/image-gallery.
 })
 export class ChapterViewComponent implements OnInit, OnDestroy {
   readonly Pencil = Pencil;
+  readonly Network = Network;
 
   campaignId = '';
   arcId = '';
@@ -105,6 +106,12 @@ export class ChapterViewComponent implements OnInit, OnDestroy {
     ]);
   }
 
+  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-edit/scene-edit.component.html

@@ -105,6 +105,64 @@
       </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">

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

@@ -29,3 +29,55 @@
   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

@@ -9,7 +9,7 @@ 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 { 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';
@@ -54,6 +54,11 @@ export class SceneEditComponent implements OnInit, OnDestroy {
   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,
@@ -109,6 +114,7 @@ export class SceneEditComponent implements OnInit, OnDestroy {
       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 => {
@@ -116,13 +122,15 @@ export class SceneEditComponent implements OnInit, OnDestroy {
         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 }) => {
+    ).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 ?? '',
@@ -170,7 +178,8 @@ export class SceneEditComponent implements OnInit, OnDestroy {
       combatDifficulty:     this.form.value.combatDifficulty,
       enemies:              this.form.value.enemies,
       relatedPageIds:       this.relatedPageIds,
-      illustrationImageIds: this.illustrationImageIds
+      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')
@@ -189,6 +198,30 @@ export class SceneEditComponent implements OnInit, OnDestroy {
     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/services/campaign.model.ts

@@ -87,6 +87,16 @@ export interface ChapterCreate {
   illustrationImageIds?: string[];
 }
 
+/**
+ * Branche narrative : sortie possible d'une scène vers une autre du même chapitre.
+ * Pendant TS du Value Object Java SceneBranch.
+ */
+export interface SceneBranch {
+  label: string;
+  targetSceneId: string;
+  condition?: string;
+}
+
 export interface Scene {
   id?: string;
   name: string;
@@ -106,6 +116,9 @@ export interface Scene {
 
   relatedPageIds?: string[];
   illustrationImageIds?: string[];
+
+  /** Sorties narratives (graphe intra-chapitre). */
+  branches?: SceneBranch[];
 }
 
 export interface SceneCreate {
@@ -125,4 +138,5 @@ export interface SceneCreate {
 
   relatedPageIds?: string[];
   illustrationImageIds?: string[];
+  branches?: SceneBranch[];
 }

web/src/app/shared/expandable-section/expandable-section.component.scss

@@ -2,7 +2,9 @@
   background: #1f2937;
   border: 1px solid #374151;
   border-radius: 8px;
-  overflow: hidden;
+  // Pas de overflow: hidden : les dropdowns en position absolute (ex. LoreLinkPicker)
+  // doivent pouvoir deborder du conteneur. Le padding interne evite tout debordement
+  // visuel des coins arrondis en rendu normal.
 
   &.private {
     border-color: #7f1d1d;