diff --git a/web/src/app/campaigns/arc-create/arc-create.component.ts b/web/src/app/campaigns/arc-create/arc-create.component.ts
index 9fa518d..5ad16ec 100644
--- a/web/src/app/campaigns/arc-create/arc-create.component.ts
+++ b/web/src/app/campaigns/arc-create/arc-create.component.ts
@@ -5,6 +5,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { forkJoin } from 'rxjs';
 import { LucideAngularModule, BookOpen } from 'lucide-angular';
 import { CampaignService } from '../../services/campaign.service';
+import { CharacterService } from '../../services/character.service';
 import { LayoutService, GlobalItem } from '../../services/layout.service';
 import { Campaign } from '../../services/campaign.model';
 import { loadCampaignTreeData, buildCampaignTree } from '../campaign-tree.helper';
@@ -33,6 +34,7 @@ export class ArcCreateComponent implements OnInit, OnDestroy {
     private route: ActivatedRoute,
     private router: Router,
     private campaignService: CampaignService,
+    private characterService: CharacterService,
     private layoutService: LayoutService
   ) {
     this.form = this.fb.group({
@@ -50,7 +52,7 @@ export class ArcCreateComponent implements OnInit, OnDestroy {
     forkJoin({
       campaign: this.campaignService.getCampaignById(this.campaignId),
       allCampaigns: this.campaignService.getAllCampaigns(),
-      treeData: loadCampaignTreeData(this.campaignService, this.campaignId)
+      treeData: loadCampaignTreeData(this.campaignService, this.campaignId, this.characterService)
     }).subscribe(({ campaign, allCampaigns, treeData }) => {
       this.existingArcCount = treeData.arcs.length;
 
diff --git a/web/src/app/campaigns/arc-edit/arc-edit.component.ts b/web/src/app/campaigns/arc-edit/arc-edit.component.ts
index 8123f4e..31af867 100644
--- a/web/src/app/campaigns/arc-edit/arc-edit.component.ts
+++ b/web/src/app/campaigns/arc-edit/arc-edit.component.ts
@@ -6,6 +6,7 @@ import { forkJoin, of } from 'rxjs';
 import { switchMap } from 'rxjs/operators';
 import { LucideAngularModule, Trash2, Sparkles } from 'lucide-angular';
 import { CampaignService } from '../../services/campaign.service';
+import { CharacterService } from '../../services/character.service';
 import { PageService } from '../../services/page.service';
 import { LayoutService, GlobalItem } from '../../services/layout.service';
 import { PageTitleService } from '../../services/page-title.service';
@@ -68,6 +69,7 @@ export class ArcEditComponent implements OnInit, OnDestroy {
     private route: ActivatedRoute,
     private router: Router,
     private campaignService: CampaignService,
+    private characterService: CharacterService,
     private pageService: PageService,
     private layoutService: LayoutService,
     private pageTitleService: PageTitleService
@@ -105,7 +107,7 @@ export class ArcEditComponent implements OnInit, OnDestroy {
       campaign: this.campaignService.getCampaignById(this.campaignId),
       allCampaigns: this.campaignService.getAllCampaigns(),
       arc: this.campaignService.getArcById(this.arcId),
-      treeData: loadCampaignTreeData(this.campaignService, this.campaignId)
+      treeData: loadCampaignTreeData(this.campaignService, this.campaignId, this.characterService)
     }).pipe(
       switchMap(data => {
         const lid = data.campaign.loreId ?? null;
diff --git a/web/src/app/campaigns/arc-view/arc-view.component.ts b/web/src/app/campaigns/arc-view/arc-view.component.ts
index a1d186e..dfad88c 100644
--- a/web/src/app/campaigns/arc-view/arc-view.component.ts
+++ b/web/src/app/campaigns/arc-view/arc-view.component.ts
@@ -5,6 +5,7 @@ import { forkJoin, of } from 'rxjs';
 import { switchMap } from 'rxjs/operators';
 import { LucideAngularModule, Pencil, Trash2 } from 'lucide-angular';
 import { CampaignService } from '../../services/campaign.service';
+import { CharacterService } from '../../services/character.service';
 import { PageService } from '../../services/page.service';
 import { LayoutService, GlobalItem } from '../../services/layout.service';
 import { PageTitleService } from '../../services/page-title.service';
@@ -42,6 +43,7 @@ export class ArcViewComponent implements OnInit, OnDestroy {
     private route: ActivatedRoute,
     private router: Router,
     private campaignService: CampaignService,
+    private characterService: CharacterService,
     private pageService: PageService,
     private layoutService: LayoutService,
     private pageTitleService: PageTitleService
@@ -64,7 +66,7 @@ export class ArcViewComponent implements OnInit, OnDestroy {
       campaign: this.campaignService.getCampaignById(this.campaignId),
       allCampaigns: this.campaignService.getAllCampaigns(),
       arc: this.campaignService.getArcById(this.arcId),
-      treeData: loadCampaignTreeData(this.campaignService, this.campaignId)
+      treeData: loadCampaignTreeData(this.campaignService, this.campaignId, this.characterService)
     }).pipe(
       switchMap(data => {
         const lid = data.campaign.loreId ?? null;
diff --git a/web/src/app/campaigns/campaign-detail/campaign-detail.component.html b/web/src/app/campaigns/campaign-detail/campaign-detail.component.html
index 3a20de5..982f157 100644
--- a/web/src/app/campaigns/campaign-detail/campaign-detail.component.html
+++ b/web/src/app/campaigns/campaign-detail/campaign-detail.component.html
@@ -70,7 +70,7 @@
     </div>
   </div>
 
-  <section class="detail-section characters-section">
+  <section class="detail-section characters-section" *ngIf="!editing">
     <div class="section-header">
       <h2>Personnages joueurs</h2>
       <button class="btn-add" (click)="createCharacter()">
@@ -99,7 +99,7 @@
     </div>
   </section>
 
-  <section class="detail-section arcs-section">
+  <section class="detail-section arcs-section" *ngIf="!editing">
     <div class="section-header">
       <h2>Arcs narratifs</h2>
       <button class="btn-add" (click)="createArc()">
diff --git a/web/src/app/campaigns/campaign-detail/campaign-detail.component.ts b/web/src/app/campaigns/campaign-detail/campaign-detail.component.ts
index c094b33..b696281 100644
--- a/web/src/app/campaigns/campaign-detail/campaign-detail.component.ts
+++ b/web/src/app/campaigns/campaign-detail/campaign-detail.component.ts
@@ -77,8 +77,8 @@ export class CampaignDetailComponent implements OnInit, OnDestroy {
       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))
+        treeData: loadCampaignTreeData(this.campaignService, id, this.characterService).pipe(
+          catchError(() => of({ arcs: [], chaptersByArc: {}, scenesByChapter: {}, characters: [] } as CampaignTreeData))
         )
       }))
     ).subscribe(({ campaign, allCampaigns, treeData }) => {
@@ -111,8 +111,8 @@ export class CampaignDetailComponent implements OnInit, OnDestroy {
     forkJoin({
       campaign: this.campaignService.getCampaignById(id),
       allCampaigns: this.campaignService.getAllCampaigns(),
-      treeData: loadCampaignTreeData(this.campaignService, id).pipe(
-        catchError(() => of({ arcs: [], chaptersByArc: {}, scenesByChapter: {} } as CampaignTreeData))
+      treeData: loadCampaignTreeData(this.campaignService, id, this.characterService).pipe(
+        catchError(() => of({ arcs: [], chaptersByArc: {}, scenesByChapter: {}, characters: [] } as CampaignTreeData))
       )
     }).subscribe(({ campaign, allCampaigns, treeData }) => {
       this.campaign = campaign;
diff --git a/web/src/app/campaigns/campaign-tree.helper.ts b/web/src/app/campaigns/campaign-tree.helper.ts
index 7631fc1..9830882 100644
--- a/web/src/app/campaigns/campaign-tree.helper.ts
+++ b/web/src/app/campaigns/campaign-tree.helper.ts
@@ -1,8 +1,10 @@
 import { Observable, forkJoin, of } from 'rxjs';
 import { switchMap, map } from 'rxjs/operators';
 import { CampaignService } from '../services/campaign.service';
+import { CharacterService } from '../services/character.service';
 import { TreeItem } from '../services/layout.service';
 import { Arc, Chapter, Scene } from '../services/campaign.model';
+import { Character } from '../services/character.model';
 
 /**
  * Helper — charge l'arborescence complète d'une campagne (arcs -> chapitres -> scènes)
@@ -16,16 +18,21 @@ export interface CampaignTreeData {
   arcs: Arc[];
   chaptersByArc: Record<string, Chapter[]>;
   scenesByChapter: Record<string, Scene[]>;
+  characters: Character[];
 }
 
 export function loadCampaignTreeData(
   service: CampaignService,
-  campaignId: string
+  campaignId: string,
+  characterService: CharacterService
 ): Observable<CampaignTreeData> {
-  return service.getArcs(campaignId).pipe(
-    switchMap(arcs => {
+  return forkJoin({
+    arcs: service.getArcs(campaignId),
+    characters: characterService.getByCampaign(campaignId)
+  }).pipe(
+    switchMap(({ arcs, characters }) => {
       if (arcs.length === 0) {
-        return of({ arcs, chaptersByArc: {}, scenesByChapter: {} });
+        return of({ arcs, chaptersByArc: {}, scenesByChapter: {}, characters });
       }
       const chapterCalls = arcs.map(a =>
         service.getChapters(a.id!).pipe(map(chapters => ({ arcId: a.id!, chapters })))
@@ -40,7 +47,7 @@ export function loadCampaignTreeData(
           });
 
           if (allChapters.length === 0) {
-            return of({ arcs, chaptersByArc, scenesByChapter: {} });
+            return of({ arcs, chaptersByArc, scenesByChapter: {}, characters });
           }
           const sceneCalls = allChapters.map(c =>
             service.getScenes(c.id!).pipe(map(scenes => ({ chapterId: c.id!, scenes })))
@@ -49,7 +56,7 @@ export function loadCampaignTreeData(
             map(sceneResults => {
               const scenesByChapter: Record<string, Scene[]> = {};
               sceneResults.forEach(r => { scenesByChapter[r.chapterId] = r.scenes; });
-              return { arcs, chaptersByArc, scenesByChapter };
+              return { arcs, chaptersByArc, scenesByChapter, characters };
             })
           );
         })
@@ -67,9 +74,33 @@ export function buildCampaignTree(campaignId: string, data: CampaignTreeData): T
   // 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 sortedCharacters = [...data.characters].sort(byName);
+  const characterItems: TreeItem[] = sortedCharacters.map(ch => ({
+    id: `character-${ch.id}`,
+    label: ch.name,
+    route: `/campaigns/${campaignId}/characters/${ch.id}/edit`
+  }));
+
+  const charactersNode: TreeItem = {
+    id: 'characters-root',
+    label: 'Personnages',
+    iconKey: 'users',
+    children: characterItems,
+    meta: characterItems.length ? String(characterItems.length) : undefined,
+    sectionHeaderBefore: 'Personnages',
+    // Note : si pas d'arcs, le filet au-dessus de "Personnages" est masqué par CSS
+    // (:first-child), ce qui est voulu — on ne veut pas de ligne seule en haut.
+    createActions: [{
+      id: 'new-character',
+      label: 'Nouveau PJ',
+      route: `/campaigns/${campaignId}/characters/create`,
+      actionIcon: 'plus'
+    }]
+  };
+
   const sortedArcs = [...data.arcs].sort(byName);
 
-  return sortedArcs.map(arc => {
+  const arcNodes: TreeItem[] = sortedArcs.map((arc, idx) => {
     const sortedChapters = [...(data.chaptersByArc[arc.id!] ?? [])].sort(byName);
 
     const chapterItems: TreeItem[] = sortedChapters.map(ch => {
@@ -98,6 +129,8 @@ export function buildCampaignTree(campaignId: string, data: CampaignTreeData): T
       label: arc.name,
       children: chapterItems,
       route: `/campaigns/${campaignId}/arcs/${arc.id}`,
+      sectionHeaderBefore: idx === 0 ? 'Narration' : undefined,
+
       createActions: [{
         id: `new-chapter-${arc.id}`,
         label: 'Nouveau chapitre',
@@ -106,4 +139,6 @@ export function buildCampaignTree(campaignId: string, data: CampaignTreeData): T
       }]
     };
   });
+
+  return [...arcNodes, charactersNode];
 }
diff --git a/web/src/app/campaigns/chapter-create/chapter-create.component.ts b/web/src/app/campaigns/chapter-create/chapter-create.component.ts
index ceb950a..70134bc 100644
--- a/web/src/app/campaigns/chapter-create/chapter-create.component.ts
+++ b/web/src/app/campaigns/chapter-create/chapter-create.component.ts
@@ -5,6 +5,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { forkJoin } from 'rxjs';
 import { LucideAngularModule } from 'lucide-angular';
 import { CampaignService } from '../../services/campaign.service';
+import { CharacterService } from '../../services/character.service';
 import { LayoutService, GlobalItem } from '../../services/layout.service';
 import { Campaign } from '../../services/campaign.model';
 import { loadCampaignTreeData, buildCampaignTree } from '../campaign-tree.helper';
@@ -32,6 +33,7 @@ export class ChapterCreateComponent implements OnInit, OnDestroy {
     private route: ActivatedRoute,
     private router: Router,
     private campaignService: CampaignService,
+    private characterService: CharacterService,
     private layoutService: LayoutService
   ) {
     this.form = this.fb.group({
@@ -50,7 +52,7 @@ export class ChapterCreateComponent implements OnInit, OnDestroy {
     forkJoin({
       campaign: this.campaignService.getCampaignById(this.campaignId),
       allCampaigns: this.campaignService.getAllCampaigns(),
-      treeData: loadCampaignTreeData(this.campaignService, this.campaignId)
+      treeData: loadCampaignTreeData(this.campaignService, this.campaignId, this.characterService)
     }).subscribe(({ campaign, allCampaigns, treeData }) => {
       const currentArc = treeData.arcs.find(a => a.id === this.arcId);
       this.arcName = currentArc?.name ?? '';
diff --git a/web/src/app/campaigns/chapter-edit/chapter-edit.component.ts b/web/src/app/campaigns/chapter-edit/chapter-edit.component.ts
index fc9145d..0e9dba7 100644
--- a/web/src/app/campaigns/chapter-edit/chapter-edit.component.ts
+++ b/web/src/app/campaigns/chapter-edit/chapter-edit.component.ts
@@ -6,6 +6,7 @@ import { forkJoin, of } from 'rxjs';
 import { switchMap } from 'rxjs/operators';
 import { LucideAngularModule, Trash2, Sparkles } from 'lucide-angular';
 import { CampaignService } from '../../services/campaign.service';
+import { CharacterService } from '../../services/character.service';
 import { PageService } from '../../services/page.service';
 import { LayoutService, GlobalItem } from '../../services/layout.service';
 import { PageTitleService } from '../../services/page-title.service';
@@ -61,6 +62,7 @@ export class ChapterEditComponent implements OnInit, OnDestroy {
     private route: ActivatedRoute,
     private router: Router,
     private campaignService: CampaignService,
+    private characterService: CharacterService,
     private pageService: PageService,
     private layoutService: LayoutService,
     private pageTitleService: PageTitleService
@@ -98,7 +100,7 @@ export class ChapterEditComponent implements OnInit, OnDestroy {
       campaign: this.campaignService.getCampaignById(this.campaignId),
       allCampaigns: this.campaignService.getAllCampaigns(),
       chapter: this.campaignService.getChapterById(this.chapterId),
-      treeData: loadCampaignTreeData(this.campaignService, this.campaignId)
+      treeData: loadCampaignTreeData(this.campaignService, this.campaignId, this.characterService)
     }).pipe(
       switchMap(data => {
         const lid = data.campaign.loreId ?? null;
diff --git a/web/src/app/campaigns/chapter-graph/chapter-graph.component.ts b/web/src/app/campaigns/chapter-graph/chapter-graph.component.ts
index ceda7c2..8e652d2 100644
--- a/web/src/app/campaigns/chapter-graph/chapter-graph.component.ts
+++ b/web/src/app/campaigns/chapter-graph/chapter-graph.component.ts
@@ -4,6 +4,7 @@ import { ActivatedRoute, Router, RouterModule } from '@angular/router';
 import { forkJoin } from 'rxjs';
 import { LucideAngularModule, ArrowLeft } from 'lucide-angular';
 import { CampaignService } from '../../services/campaign.service';
+import { CharacterService } from '../../services/character.service';
 import { LayoutService, GlobalItem } from '../../services/layout.service';
 import { PageTitleService } from '../../services/page-title.service';
 import { Campaign, Chapter, Scene } from '../../services/campaign.model';
@@ -48,6 +49,7 @@ export class ChapterGraphComponent implements OnInit, OnDestroy {
     private route: ActivatedRoute,
     private router: Router,
     private campaignService: CampaignService,
+    private characterService: CharacterService,
     private layoutService: LayoutService,
     private pageTitleService: PageTitleService
   ) {}
@@ -67,7 +69,7 @@ export class ChapterGraphComponent implements OnInit, OnDestroy {
       allCampaigns: this.campaignService.getAllCampaigns(),
       chapter: this.campaignService.getChapterById(this.chapterId),
       scenes: this.campaignService.getScenes(this.chapterId),
-      treeData: loadCampaignTreeData(this.campaignService, this.campaignId)
+      treeData: loadCampaignTreeData(this.campaignService, this.campaignId, this.characterService)
     }).subscribe(({ campaign, allCampaigns, chapter, scenes, treeData }) => {
       this.chapter = chapter;
       this.scenes = scenes;
diff --git a/web/src/app/campaigns/chapter-view/chapter-view.component.ts b/web/src/app/campaigns/chapter-view/chapter-view.component.ts
index 8b6b56c..d5ab926 100644
--- a/web/src/app/campaigns/chapter-view/chapter-view.component.ts
+++ b/web/src/app/campaigns/chapter-view/chapter-view.component.ts
@@ -5,6 +5,7 @@ import { forkJoin, of } from 'rxjs';
 import { switchMap } from 'rxjs/operators';
 import { LucideAngularModule, Pencil, Network, Trash2 } from 'lucide-angular';
 import { CampaignService } from '../../services/campaign.service';
+import { CharacterService } from '../../services/character.service';
 import { PageService } from '../../services/page.service';
 import { LayoutService, GlobalItem } from '../../services/layout.service';
 import { PageTitleService } from '../../services/page-title.service';
@@ -41,6 +42,7 @@ export class ChapterViewComponent implements OnInit, OnDestroy {
     private route: ActivatedRoute,
     private router: Router,
     private campaignService: CampaignService,
+    private characterService: CharacterService,
     private pageService: PageService,
     private layoutService: LayoutService,
     private pageTitleService: PageTitleService
@@ -67,7 +69,7 @@ export class ChapterViewComponent implements OnInit, OnDestroy {
       campaign: this.campaignService.getCampaignById(this.campaignId),
       allCampaigns: this.campaignService.getAllCampaigns(),
       chapter: this.campaignService.getChapterById(this.chapterId),
-      treeData: loadCampaignTreeData(this.campaignService, this.campaignId)
+      treeData: loadCampaignTreeData(this.campaignService, this.campaignId, this.characterService)
     }).pipe(
       switchMap(data => {
         const lid = data.campaign.loreId ?? null;
diff --git a/web/src/app/campaigns/scene-create/scene-create.component.ts b/web/src/app/campaigns/scene-create/scene-create.component.ts
index 33129e6..0fe9d87 100644
--- a/web/src/app/campaigns/scene-create/scene-create.component.ts
+++ b/web/src/app/campaigns/scene-create/scene-create.component.ts
@@ -5,6 +5,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { forkJoin } from 'rxjs';
 import { LucideAngularModule } from 'lucide-angular';
 import { CampaignService } from '../../services/campaign.service';
+import { CharacterService } from '../../services/character.service';
 import { LayoutService, GlobalItem } from '../../services/layout.service';
 import { Campaign } from '../../services/campaign.model';
 import { loadCampaignTreeData, buildCampaignTree } from '../campaign-tree.helper';
@@ -33,6 +34,7 @@ export class SceneCreateComponent implements OnInit, OnDestroy {
     private route: ActivatedRoute,
     private router: Router,
     private campaignService: CampaignService,
+    private characterService: CharacterService,
     private layoutService: LayoutService
   ) {
     this.form = this.fb.group({
@@ -52,7 +54,7 @@ export class SceneCreateComponent implements OnInit, OnDestroy {
     forkJoin({
       campaign: this.campaignService.getCampaignById(this.campaignId),
       allCampaigns: this.campaignService.getAllCampaigns(),
-      treeData: loadCampaignTreeData(this.campaignService, this.campaignId)
+      treeData: loadCampaignTreeData(this.campaignService, this.campaignId, this.characterService)
     }).subscribe(({ campaign, allCampaigns, treeData }) => {
       const currentChapter = (treeData.chaptersByArc[this.arcId] ?? []).find(c => c.id === this.chapterId);
       this.chapterName = currentChapter?.name ?? '';
diff --git a/web/src/app/campaigns/scene-edit/scene-edit.component.ts b/web/src/app/campaigns/scene-edit/scene-edit.component.ts
index f0e9d3a..6c502b7 100644
--- a/web/src/app/campaigns/scene-edit/scene-edit.component.ts
+++ b/web/src/app/campaigns/scene-edit/scene-edit.component.ts
@@ -6,6 +6,7 @@ import { forkJoin, of } from 'rxjs';
 import { switchMap } from 'rxjs/operators';
 import { LucideAngularModule, Trash2, Sparkles } from 'lucide-angular';
 import { CampaignService } from '../../services/campaign.service';
+import { CharacterService } from '../../services/character.service';
 import { PageService } from '../../services/page.service';
 import { LayoutService, GlobalItem } from '../../services/layout.service';
 import { PageTitleService } from '../../services/page-title.service';
@@ -65,6 +66,7 @@ export class SceneEditComponent implements OnInit, OnDestroy {
     private route: ActivatedRoute,
     private router: Router,
     private campaignService: CampaignService,
+    private characterService: CharacterService,
     private pageService: PageService,
     private layoutService: LayoutService,
     private pageTitleService: PageTitleService
@@ -116,7 +118,7 @@ export class SceneEditComponent implements OnInit, OnDestroy {
       allCampaigns: this.campaignService.getAllCampaigns(),
       scene: this.campaignService.getSceneById(this.sceneId),
       chapterScenes: this.campaignService.getScenes(this.chapterId),
-      treeData: loadCampaignTreeData(this.campaignService, this.campaignId)
+      treeData: loadCampaignTreeData(this.campaignService, this.campaignId, this.characterService)
     }).pipe(
       switchMap(data => {
         const lid = data.campaign.loreId ?? null;
diff --git a/web/src/app/campaigns/scene-view/scene-view.component.ts b/web/src/app/campaigns/scene-view/scene-view.component.ts
index d3f38ad..84a3b9a 100644
--- a/web/src/app/campaigns/scene-view/scene-view.component.ts
+++ b/web/src/app/campaigns/scene-view/scene-view.component.ts
@@ -5,6 +5,7 @@ import { forkJoin, of } from 'rxjs';
 import { switchMap } from 'rxjs/operators';
 import { LucideAngularModule, Pencil, Trash2 } from 'lucide-angular';
 import { CampaignService } from '../../services/campaign.service';
+import { CharacterService } from '../../services/character.service';
 import { PageService } from '../../services/page.service';
 import { LayoutService, GlobalItem } from '../../services/layout.service';
 import { PageTitleService } from '../../services/page-title.service';
@@ -41,6 +42,7 @@ export class SceneViewComponent implements OnInit, OnDestroy {
     private route: ActivatedRoute,
     private router: Router,
     private campaignService: CampaignService,
+    private characterService: CharacterService,
     private pageService: PageService,
     private layoutService: LayoutService,
     private pageTitleService: PageTitleService
@@ -70,7 +72,7 @@ export class SceneViewComponent implements OnInit, OnDestroy {
       campaign: this.campaignService.getCampaignById(this.campaignId),
       allCampaigns: this.campaignService.getAllCampaigns(),
       scene: this.campaignService.getSceneById(this.sceneId),
-      treeData: loadCampaignTreeData(this.campaignService, this.campaignId)
+      treeData: loadCampaignTreeData(this.campaignService, this.campaignId, this.characterService)
     }).pipe(
       switchMap(data => {
         const lid = data.campaign.loreId ?? null;
diff --git a/web/src/app/lore/lore-detail/lore-detail.component.html b/web/src/app/lore/lore-detail/lore-detail.component.html
index 792b2b9..d853710 100644
--- a/web/src/app/lore/lore-detail/lore-detail.component.html
+++ b/web/src/app/lore/lore-detail/lore-detail.component.html
@@ -39,7 +39,7 @@
   </div>
 
   <!-- ============ Grille des dossiers racine ============ -->
-  <section class="detail-section nodes-section">
+  <section class="detail-section nodes-section" *ngIf="!editing">
     <div class="section-header">
       <h2>Dossiers</h2>
       <button class="btn-add" (click)="navigateToCreateNode()">
diff --git a/web/src/app/services/layout.service.ts b/web/src/app/services/layout.service.ts
index 43f7ac0..87b58b0 100644
--- a/web/src/app/services/layout.service.ts
+++ b/web/src/app/services/layout.service.ts
@@ -11,6 +11,11 @@ export interface TreeItem {
   iconKey?: string;
   /** Petit badge affiché à droite (ex: "3" pour compter les pages d'un dossier). */
   meta?: string;
+  /**
+   * Libellé de section affiché AU-DESSUS du nœud, avec un filet de séparation.
+   * Utilisé pour grouper visuellement des nœuds racines (ex: "Personnages" vs "Narration").
+   */
+  sectionHeaderBefore?: string;
   /**
    * Actions de creation contextuelles (ex: "+ Nouveau chapitre" sur un arc).
    * Affichees comme boutons icone au survol du noeud (repli visuel), et en
diff --git a/web/src/app/shared/secondary-sidebar/secondary-sidebar.component.html b/web/src/app/shared/secondary-sidebar/secondary-sidebar.component.html
index 9839a58..efcdd4c 100644
--- a/web/src/app/shared/secondary-sidebar/secondary-sidebar.component.html
+++ b/web/src/app/shared/secondary-sidebar/secondary-sidebar.component.html
@@ -29,6 +29,9 @@
 
     <!-- Template récursif : un noeud d'arbre rend son bouton, puis ses enfants via ce même template -->
     <ng-template #treeNode let-item let-level="level">
+      <div class="tree-section-header" *ngIf="level === 0 && item.sectionHeaderBefore">
+        {{ item.sectionHeaderBefore }}
+      </div>
       <div class="tree-item" [style.padding-left.px]="level * 12">
         <div class="tree-row">
           <button
diff --git a/web/src/app/shared/secondary-sidebar/secondary-sidebar.component.scss b/web/src/app/shared/secondary-sidebar/secondary-sidebar.component.scss
index 8cf5560..15e4bdf 100644
--- a/web/src/app/shared/secondary-sidebar/secondary-sidebar.component.scss
+++ b/web/src/app/shared/secondary-sidebar/secondary-sidebar.component.scss
@@ -110,6 +110,23 @@
   padding: 0.25rem 0;
 }
 
+// En-tête de section — groupe visuellement les nœuds racines (ex: Personnages / Narration).
+// Un filet au-dessus crée la séparation ; pas de filet pour la première section
+// (le titre suffit) — on cible ça via :not(:first-child).
+.tree-section-header {
+  font-size: 0.68rem;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: #9ca3af;
+  padding: 0.6rem 0.5rem 0.3rem;
+}
+.tree > .tree-section-header:not(:first-child) {
+  border-top: 1px solid #374151;
+  margin-top: 0.35rem;
+  padding-top: 0.6rem;
+}
+
 .tree-btn {
   display: flex;
   align-items: center;