Evolutions :

- Ajout d'icônes dans la scène, chapitre et arc
- Possibilité de bouger les cases dans la partie graphe et les textes associés si ces derniers ne sont pas visibles
- Changement sur le thème du graphe : mode sombre et plus blanc
- Barre d'action en haut, même pour la partie scène
- Mode sticky corrigé : plus de trou entre le haut du navigateur web et de la barre d'action

Passage version 0.6.5

brain/app/main.py

@@ -40,7 +40,7 @@ from app.infrastructure.onemin_adapter import OneMinAiLLMProvider
 app = FastAPI(
     title="LoreMind Brain",
     description="Backend IA pour la génération de contenu narratif.",
-    version="0.6.2",
+    version="0.6.5",
 )
 
 

core/pom.xml

@@ -14,7 +14,7 @@
 
     <groupId>com.loremind</groupId>
     <artifactId>loremind-core</artifactId>
-    <version>0.6.2</version>
+    <version>0.6.5</version>
     <name>LoreMind Core</name>
     <description>Backend Core - Architecture Hexagonale</description>
 

core/src/main/java/com/loremind/application/campaigncontext/ArcService.java

@@ -36,11 +36,16 @@ public class ArcService {
     public record DeletionImpact(int chapters, int scenes) {}
 
     public Arc createArc(String name, String description, String campaignId, int order) {
+        return createArc(name, description, campaignId, order, null);
+    }
+
+    public Arc createArc(String name, String description, String campaignId, int order, String icon) {
         Arc arc = Arc.builder()
                 .name(name)
                 .description(description)
                 .campaignId(campaignId)
                 .order(order)
+                .icon(icon)
                 .build();
         return arcRepository.save(arc);
     }

core/src/main/java/com/loremind/application/campaigncontext/ChapterService.java

@@ -30,11 +30,16 @@ public class ChapterService {
     public record DeletionImpact(int scenes) {}
 
     public Chapter createChapter(String name, String description, String arcId, int order) {
+        return createChapter(name, description, arcId, order, null);
+    }
+
+    public Chapter createChapter(String name, String description, String arcId, int order, String icon) {
         Chapter chapter = Chapter.builder()
                 .name(name)
                 .description(description)
                 .arcId(arcId)
                 .order(order)
+                .icon(icon)
                 .build();
         return chapterRepository.save(chapter);
     }

core/src/main/java/com/loremind/application/campaigncontext/SceneService.java

@@ -26,11 +26,16 @@ public class SceneService {
     }
 
     public Scene createScene(String name, String description, String chapterId, int order) {
+        return createScene(name, description, chapterId, order, null);
+    }
+
+    public Scene createScene(String name, String description, String chapterId, int order, String icon) {
         Scene scene = Scene.builder()
                 .name(name)
                 .description(description)
                 .chapterId(chapterId)
                 .order(order)
+                .icon(icon)
                 .build();
         return sceneRepository.save(scene);
     }

core/src/main/java/com/loremind/domain/campaigncontext/Arc.java

@@ -21,6 +21,9 @@ public class Arc {
     private String campaignId;       // Référence vers la Campaign parente
     private int order;               // Ordre de l'arc dans la campagne
 
+    /** Cle d'icone choisie par l'utilisateur (cf. CAMPAIGN_ICON_OPTIONS cote front). */
+    private String icon;
+
     // Champs narratifs enrichis (voir docs/maquettes/campagne/détail/)
     private String themes;           // Thèmes principaux explorés dans cet arc
     private String stakes;           // Enjeux globaux pour les personnages

core/src/main/java/com/loremind/domain/campaigncontext/Chapter.java

@@ -21,6 +21,9 @@ public class Chapter {
     private String arcId;              // Référence vers l'Arc parent
     private int order;                 // Ordre du chapitre dans l'arc
 
+    /** Cle d'icone choisie par l'utilisateur (cf. CAMPAIGN_ICON_OPTIONS cote front). */
+    private String icon;
+
     // Champs narratifs enrichis (voir docs/maquettes/campagne/détail/)
     private String gmNotes;            // Notes privées du MJ (non exportées vers FoundryVTT)
     private String playerObjectives;   // Objectifs des joueurs dans ce chapitre

core/src/main/java/com/loremind/domain/campaigncontext/Scene.java

@@ -21,6 +21,9 @@ public class Scene {
     private String chapterId;              // Référence vers le Chapter parent
     private int order;                     // Ordre de la scène dans le chapitre
 
+    /** Cle d'icone choisie par l'utilisateur (cf. CAMPAIGN_ICON_OPTIONS cote front). */
+    private String icon;
+
     // === Contexte et ambiance ===
     private String location;               // Lieu de la scène (ex: Taverne du Dragon d'Or)
     private String timing;                 // Moment (ex: Soir, à la tombée de la nuit)

core/src/main/java/com/loremind/infrastructure/persistence/entity/ArcJpaEntity.java

@@ -37,6 +37,9 @@ public class ArcJpaEntity {
     @Column(name = "\"order\"", nullable = false)
     private int order;
 
+    @Column
+    private String icon;
+
     // Champs narratifs enrichis — ajoutés automatiquement par Hibernate DDL (ddl-auto=update)
     @Column(columnDefinition = "TEXT")
     private String themes;

core/src/main/java/com/loremind/infrastructure/persistence/entity/ChapterJpaEntity.java

@@ -37,6 +37,9 @@ public class ChapterJpaEntity {
     @Column(name = "\"order\"", nullable = false)
     private int order;
 
+    @Column
+    private String icon;
+
     // Champs narratifs enrichis — ajoutés automatiquement par Hibernate DDL (ddl-auto=update)
     @Column(name = "gm_notes", columnDefinition = "TEXT")
     private String gmNotes;

core/src/main/java/com/loremind/infrastructure/persistence/entity/SceneJpaEntity.java

@@ -39,6 +39,9 @@ public class SceneJpaEntity {
     @Column(name = "\"order\"", nullable = false)
     private int order;
 
+    @Column
+    private String icon;
+
     // Champs narratifs enrichis — ajoutés automatiquement par Hibernate (ddl-auto=update)
 
     // Contexte et ambiance

core/src/main/java/com/loremind/infrastructure/persistence/postgres/PostgresArcRepository.java

@@ -71,6 +71,7 @@ public class PostgresArcRepository implements ArcRepository {
                 .description(jpaEntity.getDescription())
                 .campaignId(jpaEntity.getCampaignId().toString())
                 .order(jpaEntity.getOrder())
+                .icon(jpaEntity.getIcon())
                 .themes(jpaEntity.getThemes())
                 .stakes(jpaEntity.getStakes())
                 .gmNotes(jpaEntity.getGmNotes())
@@ -99,6 +100,7 @@ public class PostgresArcRepository implements ArcRepository {
                 .description(arc.getDescription())
                 .campaignId(Long.parseLong(arc.getCampaignId()))
                 .order(arc.getOrder())
+                .icon(arc.getIcon())
                 .themes(arc.getThemes())
                 .stakes(arc.getStakes())
                 .gmNotes(arc.getGmNotes())

core/src/main/java/com/loremind/infrastructure/persistence/postgres/PostgresChapterRepository.java

@@ -71,6 +71,7 @@ public class PostgresChapterRepository implements ChapterRepository {
                 .description(jpaEntity.getDescription())
                 .arcId(jpaEntity.getArcId().toString())
                 .order(jpaEntity.getOrder())
+                .icon(jpaEntity.getIcon())
                 .gmNotes(jpaEntity.getGmNotes())
                 .playerObjectives(jpaEntity.getPlayerObjectives())
                 .narrativeStakes(jpaEntity.getNarrativeStakes())
@@ -96,6 +97,7 @@ public class PostgresChapterRepository implements ChapterRepository {
                 .description(chapter.getDescription())
                 .arcId(Long.parseLong(chapter.getArcId()))
                 .order(chapter.getOrder())
+                .icon(chapter.getIcon())
                 .gmNotes(chapter.getGmNotes())
                 .playerObjectives(chapter.getPlayerObjectives())
                 .narrativeStakes(chapter.getNarrativeStakes())

core/src/main/java/com/loremind/infrastructure/persistence/postgres/PostgresSceneRepository.java

@@ -71,6 +71,7 @@ public class PostgresSceneRepository implements SceneRepository {
                 .description(jpaEntity.getDescription())
                 .chapterId(jpaEntity.getChapterId().toString())
                 .order(jpaEntity.getOrder())
+                .icon(jpaEntity.getIcon())
                 .location(jpaEntity.getLocation())
                 .timing(jpaEntity.getTiming())
                 .atmosphere(jpaEntity.getAtmosphere())
@@ -104,6 +105,7 @@ public class PostgresSceneRepository implements SceneRepository {
                 .description(scene.getDescription())
                 .chapterId(Long.parseLong(scene.getChapterId()))
                 .order(scene.getOrder())
+                .icon(scene.getIcon())
                 .location(scene.getLocation())
                 .timing(scene.getTiming())
                 .atmosphere(scene.getAtmosphere())

core/src/main/java/com/loremind/infrastructure/web/controller/ArcController.java

@@ -28,7 +28,7 @@ public class ArcController {
     @PostMapping
     public ResponseEntity<ArcDTO> createArc(@RequestBody ArcDTO arcDTO) {
         Arc arc = arcMapper.toDomain(arcDTO);
-        Arc createdArc = arcService.createArc(arc.getName(), arc.getDescription(), arc.getCampaignId(), arc.getOrder());
+        Arc createdArc = arcService.createArc(arc.getName(), arc.getDescription(), arc.getCampaignId(), arc.getOrder(), arc.getIcon());
         return ResponseEntity.ok(arcMapper.toDTO(createdArc));
     }
 

core/src/main/java/com/loremind/infrastructure/web/controller/ChapterController.java

@@ -28,7 +28,7 @@ public class ChapterController {
     @PostMapping
     public ResponseEntity<ChapterDTO> createChapter(@RequestBody ChapterDTO chapterDTO) {
         Chapter chapter = chapterMapper.toDomain(chapterDTO);
-        Chapter createdChapter = chapterService.createChapter(chapter.getName(), chapter.getDescription(), chapter.getArcId(), chapter.getOrder());
+        Chapter createdChapter = chapterService.createChapter(chapter.getName(), chapter.getDescription(), chapter.getArcId(), chapter.getOrder(), chapter.getIcon());
         return ResponseEntity.ok(chapterMapper.toDTO(createdChapter));
     }
 

core/src/main/java/com/loremind/infrastructure/web/controller/SceneController.java

@@ -28,7 +28,7 @@ public class SceneController {
     @PostMapping
     public ResponseEntity<SceneDTO> createScene(@RequestBody SceneDTO sceneDTO) {
         Scene scene = sceneMapper.toDomain(sceneDTO);
-        Scene createdScene = sceneService.createScene(scene.getName(), scene.getDescription(), scene.getChapterId(), scene.getOrder());
+        Scene createdScene = sceneService.createScene(scene.getName(), scene.getDescription(), scene.getChapterId(), scene.getOrder(), scene.getIcon());
         return ResponseEntity.ok(sceneMapper.toDTO(createdScene));
     }
 

core/src/main/java/com/loremind/infrastructure/web/dto/campaigncontext/ArcDTO.java

@@ -17,6 +17,9 @@ public class ArcDTO {
     private String campaignId;
     private int order;
 
+    /** Cle d'icone (cf. CAMPAIGN_ICON_OPTIONS cote front). */
+    private String icon;
+
     // Champs narratifs enrichis
     private String themes;
     private String stakes;

core/src/main/java/com/loremind/infrastructure/web/dto/campaigncontext/ChapterDTO.java

@@ -17,6 +17,9 @@ public class ChapterDTO {
     private String arcId;
     private int order;
 
+    /** Cle d'icone (cf. CAMPAIGN_ICON_OPTIONS cote front). */
+    private String icon;
+
     // Champs narratifs enrichis
     private String gmNotes;
     private String playerObjectives;

core/src/main/java/com/loremind/infrastructure/web/dto/campaigncontext/SceneDTO.java

@@ -17,6 +17,9 @@ public class SceneDTO {
     private String chapterId;
     private int order;
 
+    /** Cle d'icone (cf. CAMPAIGN_ICON_OPTIONS cote front). */
+    private String icon;
+
     // Champs narratifs enrichis
     private String location;
     private String timing;

core/src/main/java/com/loremind/infrastructure/web/mapper/ArcMapper.java

@@ -24,6 +24,7 @@ public class ArcMapper {
         dto.setDescription(arc.getDescription());
         dto.setCampaignId(arc.getCampaignId());
         dto.setOrder(arc.getOrder());
+        dto.setIcon(arc.getIcon());
         dto.setThemes(arc.getThemes());
         dto.setStakes(arc.getStakes());
         dto.setGmNotes(arc.getGmNotes());
@@ -46,6 +47,7 @@ public class ArcMapper {
                 .description(dto.getDescription())
                 .campaignId(dto.getCampaignId())
                 .order(dto.getOrder())
+                .icon(dto.getIcon())
                 .themes(dto.getThemes())
                 .stakes(dto.getStakes())
                 .gmNotes(dto.getGmNotes())

core/src/main/java/com/loremind/infrastructure/web/mapper/ChapterMapper.java

@@ -24,6 +24,7 @@ public class ChapterMapper {
         dto.setDescription(chapter.getDescription());
         dto.setArcId(chapter.getArcId());
         dto.setOrder(chapter.getOrder());
+        dto.setIcon(chapter.getIcon());
         dto.setGmNotes(chapter.getGmNotes());
         dto.setPlayerObjectives(chapter.getPlayerObjectives());
         dto.setNarrativeStakes(chapter.getNarrativeStakes());
@@ -44,6 +45,7 @@ public class ChapterMapper {
                 .description(dto.getDescription())
                 .arcId(dto.getArcId())
                 .order(dto.getOrder())
+                .icon(dto.getIcon())
                 .gmNotes(dto.getGmNotes())
                 .playerObjectives(dto.getPlayerObjectives())
                 .narrativeStakes(dto.getNarrativeStakes())

core/src/main/java/com/loremind/infrastructure/web/mapper/SceneMapper.java

@@ -27,6 +27,7 @@ public class SceneMapper {
         dto.setDescription(scene.getDescription());
         dto.setChapterId(scene.getChapterId());
         dto.setOrder(scene.getOrder());
+        dto.setIcon(scene.getIcon());
         dto.setLocation(scene.getLocation());
         dto.setTiming(scene.getTiming());
         dto.setAtmosphere(scene.getAtmosphere());
@@ -59,6 +60,7 @@ public class SceneMapper {
                 .description(dto.getDescription())
                 .chapterId(dto.getChapterId())
                 .order(dto.getOrder())
+                .icon(dto.getIcon())
                 .location(dto.getLocation())
                 .timing(dto.getTiming())
                 .atmosphere(dto.getAtmosphere())

web/e2e/tests/lore/page-create.spec.ts

@@ -50,7 +50,21 @@ test.describe('Page creation', () => {
     expect(created?.nodeId).toBe(seeded.rootFolderId);
   });
 
-  test('submit is disabled until title, template and folder are set', async ({ page }) => {
+  test('submit is disabled until title, template and folder are set', async ({ page, request }) => {
+    // On seed un 2ᵉ template pour empêcher l'auto-sélection (qui se déclenche
+    // quand un seul template a un defaultNodeId valide). Avec deux candidats,
+    // l'utilisateur doit choisir explicitement → on retrouve le comportement
+    // initial du test : submit disabled tant qu'un template n'est pas cliqué.
+    const secondFolderRes = await request.post('/api/lore-nodes', {
+      data: { loreId: seeded.id, name: 'Autre dossier', icon: 'folder', description: '' },
+    });
+    const secondFolderId = (await secondFolderRes.json()).id;
+    await seedTemplate(request, {
+      loreId: seeded.id,
+      defaultNodeId: secondFolderId,
+      name: `Second template ${Date.now()}`,
+    });
+
     await page.goto(`/lore/${seeded.id}/pages/create`);
 
     const submit = page.getByRole('button', { name: /^Créer la page$/i });
@@ -66,6 +80,8 @@ test.describe('Page creation', () => {
   test('entering on a folder-scoped route preselects that folder', async ({ page, request }) => {
     const pageTitle = `Page scoped ${Date.now()}`;
 
+    // Dossier sans template par défaut → pas d'auto-sélection de template,
+    // l'utilisateur clique manuellement (ce qu'on veut tester ici).
     const secondFolderRes = await request.post('/api/lore-nodes', {
       data: { loreId: seeded.id, name: 'Autre dossier', icon: 'folder', description: '' },
     });
@@ -87,4 +103,31 @@ test.describe('Page creation', () => {
     const pages = await getPagesForLore(request, seeded.id);
     expect(pages.find((p) => p.title === pageTitle)?.nodeId).toBe(secondFolderId);
   });
+
+  test('auto-selects the template on free route when it is the only candidate', async ({ page }) => {
+    // Le seed donne EXACTEMENT 1 template avec defaultNodeId valide → la
+    // logique d'auto-sélection doit s'enclencher au chargement.
+    await page.goto(`/lore/${seeded.id}/pages/create`);
+
+    await expect(page.locator('.template-card.selected', { hasText: template.name })).toBeVisible();
+    await expect(page.locator('#page-node')).toHaveValue(seeded.rootFolderId);
+
+    // Conséquence : juste taper un titre suffit pour activer le submit.
+    const submit = page.getByRole('button', { name: /^Créer la page$/i });
+    await expect(submit).toBeDisabled();
+    await page.getByLabel(/Titre de la page/i).fill('Auto');
+    await expect(submit).toBeEnabled();
+  });
+
+  test('auto-selects the template on folder-scoped route when its defaultNodeId matches', async ({
+    page,
+  }) => {
+    // Le template seedé pointe sur seeded.rootFolderId — entrer sur la route
+    // folder-scoped de ce dossier doit auto-sélectionner ce template.
+    await page.goto(`/lore/${seeded.id}/nodes/${seeded.rootFolderId}/pages/create`);
+
+    await expect(page.locator('.template-card.selected', { hasText: template.name })).toBeVisible();
+    await expect(page.locator('#page-node')).toHaveValue(seeded.rootFolderId);
+    await expect(page.locator('#page-node')).toBeDisabled();
+  });
 });

web/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "loremind-web",
-  "version": "0.6.1",
+  "version": "0.6.5",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "loremind-web",
-      "version": "0.6.1",
+      "version": "0.6.5",
       "dependencies": {
         "@angular/animations": "^17.0.0",
         "@angular/common": "^17.0.0",

web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "loremind-web",
-  "version": "0.6.2",
+  "version": "0.6.5",
   "description": "LoreMind Frontend - Angular",
   "scripts": {
     "ng": "ng",

web/src/app/app.component.scss

@@ -5,6 +5,10 @@
 
 .main-content {
   flex: 1;
-  padding: 2rem;
+  // padding-top: 0 — sinon le contenu defile dans la zone de padding
+  // au-dessus du `.page-header` sticky (top: 0 pin sur l'edge interne du
+  // padding-box). Chaque page-wrapper definit deja son propre padding-top
+  // qui devient l'unique source d'espacement haut.
+  padding: 0 2rem 2rem;
   overflow-y: auto;
 }

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

@@ -27,6 +27,11 @@
       </textarea>
     </div>
 
+    <div class="field">
+      <label>Icône</label>
+      <app-icon-picker [options]="campaignIconOptions" [(selected)]="selectedIcon"></app-icon-picker>
+    </div>
+
     <div class="form-actions">
       <button type="submit" class="btn-primary" [disabled]="form.invalid">
         Créer l'arc

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

@@ -9,6 +9,8 @@ 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';
+import { IconPickerComponent } from '../../shared/icon-picker/icon-picker.component';
+import { CAMPAIGN_ICON_OPTIONS } from '../campaign-icons';
 
 /**
  * Écran de création d'un nouvel Arc narratif (contexte Campagne).
@@ -18,15 +20,17 @@ import { loadCampaignTreeData, buildCampaignTree } from '../campaign-tree.helper
 @Component({
   selector: 'app-arc-create',
   standalone: true,
-  imports: [CommonModule, ReactiveFormsModule, LucideAngularModule],
+  imports: [CommonModule, ReactiveFormsModule, LucideAngularModule, IconPickerComponent],
   templateUrl: './arc-create.component.html',
   styleUrls: ['./arc-create.component.scss']
 })
 export class ArcCreateComponent implements OnInit, OnDestroy {
   readonly BookOpen = BookOpen;
+  readonly campaignIconOptions = CAMPAIGN_ICON_OPTIONS;
 
   form: FormGroup;
   campaignId = '';
+  selectedIcon: string | null = null;
   private existingArcCount = 0;
 
   constructor(
@@ -80,7 +84,8 @@ export class ArcCreateComponent implements OnInit, OnDestroy {
       name: this.form.value.name,
       description: this.form.value.description,
       campaignId: this.campaignId,
-      order: this.existingArcCount + 1
+      order: this.existingArcCount + 1,
+      icon: this.selectedIcon
     }).subscribe({
       next: (created) => this.router.navigate(['/campaigns', this.campaignId, 'arcs', created.id]),
       error: () => console.error('Erreur lors de la création de l\'arc')

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

@@ -13,6 +13,14 @@
         <lucide-icon [img]="Sparkles" [size]="14"></lucide-icon>
         Assistant IA
       </button>
+      <button type="button" class="btn-secondary" (click)="cancel()">Annuler</button>
+      <button type="button" class="btn-danger" (click)="delete()">
+        <lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
+        Supprimer
+      </button>
+      <button type="button" class="btn-primary" (click)="submit()" [disabled]="form.invalid">
+        Sauvegarder
+      </button>
     </div>
   </div>
 
@@ -63,6 +71,11 @@
       </textarea>
     </div>
 
+    <div class="field">
+      <label>Icône</label>
+      <app-icon-picker [options]="campaignIconOptions" [(selected)]="selectedIcon"></app-icon-picker>
+    </div>
+
     <div class="field-row">
       <div class="field">
         <label for="arc-edit-themes">Thèmes principaux</label>
@@ -136,17 +149,6 @@
       </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>

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

@@ -16,6 +16,8 @@ import { loadCampaignTreeData, buildCampaignTree } from '../campaign-tree.helper
 import { LoreLinkPickerComponent } from '../../shared/lore-link-picker/lore-link-picker.component';
 import { AiChatDrawerComponent } from '../../shared/ai-chat-drawer/ai-chat-drawer.component';
 import { ImageGalleryComponent } from '../../shared/image-gallery/image-gallery.component';
+import { IconPickerComponent } from '../../shared/icon-picker/icon-picker.component';
+import { CAMPAIGN_ICON_OPTIONS } from '../campaign-icons';
 
 /**
  * Écran de détail/modification d'un Arc.
@@ -29,13 +31,15 @@ import { ImageGalleryComponent } from '../../shared/image-gallery/image-gallery.
 @Component({
   selector: 'app-arc-edit',
   standalone: true,
-  imports: [CommonModule, ReactiveFormsModule, LucideAngularModule, LoreLinkPickerComponent, AiChatDrawerComponent, ImageGalleryComponent],
+  imports: [CommonModule, ReactiveFormsModule, LucideAngularModule, LoreLinkPickerComponent, AiChatDrawerComponent, ImageGalleryComponent, IconPickerComponent],
   templateUrl: './arc-edit.component.html',
   styleUrls: ['./arc-edit.component.scss']
 })
 export class ArcEditComponent implements OnInit, OnDestroy {
   readonly Trash2 = Trash2;
   readonly Sparkles = Sparkles;
+  readonly campaignIconOptions = CAMPAIGN_ICON_OPTIONS;
+  selectedIcon: string | null = null;
 
   /** État drawer chat IA (b5.7 — intégration Campagne). */
   chatOpen = false;
@@ -122,6 +126,7 @@ export class ArcEditComponent implements OnInit, OnDestroy {
       this.loreId = loreId;
       this.availablePages = pages;
       this.relatedPageIds = [...(arc.relatedPageIds ?? [])];
+      this.selectedIcon = arc.icon ?? null;
       this.illustrationImageIds = [...(arc.illustrationImageIds ?? [])];
       this.mapImageIds = [...(arc.mapImageIds ?? [])];
       this.pageTitleService.set(arc.name);
@@ -167,7 +172,8 @@ export class ArcEditComponent implements OnInit, OnDestroy {
       resolution:     this.form.value.resolution,
       relatedPageIds: this.relatedPageIds,
       illustrationImageIds: this.illustrationImageIds,
-      mapImageIds:    this.mapImageIds
+      mapImageIds:    this.mapImageIds,
+      icon:           this.selectedIcon
     }).subscribe({
       next: () => this.router.navigate(['/campaigns', this.campaignId, 'arcs', this.arcId]),
       error: () => console.error('Erreur lors de la sauvegarde')

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

@@ -2,7 +2,10 @@
 
   <header class="view-header">
     <div>
-      <h1>{{ arc.name }}</h1>
+      <h1>
+        <lucide-icon *ngIf="arc.icon" [img]="resolveCampaignIcon(arc.icon)" [size]="22" class="title-icon"></lucide-icon>
+        {{ arc.name }}
+      </h1>
       <p class="view-subtitle">Arc narratif</p>
     </div>
     <div class="view-actions">

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

@@ -4,6 +4,7 @@ import { ActivatedRoute, Router, RouterModule } from '@angular/router';
 import { forkJoin, of } from 'rxjs';
 import { switchMap } from 'rxjs/operators';
 import { LucideAngularModule, Pencil, Trash2 } from 'lucide-angular';
+import { resolveCampaignIcon } from '../campaign-icons';
 import { CampaignService } from '../../services/campaign.service';
 import { CharacterService } from '../../services/character.service';
 import { PageService } from '../../services/page.service';
@@ -29,6 +30,7 @@ import { ImageGalleryComponent } from '../../shared/image-gallery/image-gallery.
 export class ArcViewComponent implements OnInit, OnDestroy {
   readonly Pencil = Pencil;
   readonly Trash2 = Trash2;
+  readonly resolveCampaignIcon = resolveCampaignIcon;
 
   campaignId = '';
   arcId = '';

web/src/app/campaigns/campaign-icons.ts

@@ -0,0 +1,66 @@
+import {
+  Bookmark,
+  Theater, Drama, Compass, Flag, Calendar, Map, Castle, Tent,
+  Swords, Skull, Crown, Heart, Eye, Footprints, Dice5, Hourglass,
+  Flame, Snowflake, Cloud, Sun, Moon, Star, Zap, Target,
+  Music, MessageCircle, Lock, Key as KeyIcon, Coins, Gift,
+  LucideIconData
+} from 'lucide-angular';
+
+// Type local equivalent a IconOption de lore-icons. Duplique volontairement
+// pour eviter une dependance circulaire (lore-icons importe ce fichier).
+export interface CampaignIconOption {
+  key: string;
+  icon: LucideIconData;
+}
+
+/**
+ * Banque d'icones dediee aux entites narratives d'une campagne (arc, chapitre, scene).
+ *
+ * Pourquoi separe de LORE_ICON_OPTIONS ? Les icones lore sont plutot orientees
+ * "objets de monde" (chateau, foret, dragon...). Ici on est sur du sequencement
+ * narratif et de la mise en scene : ambiances, actes, decisions. Cles uniques
+ * (prefixees `c-` quand un nom existerait deja dans le lore) pour eviter les
+ * collisions avec LORE_ICON_OPTIONS — le resolver consulte les deux registres.
+ */
+export const CAMPAIGN_ICON_OPTIONS: CampaignIconOption[] = [
+  { key: 'c-theater',      icon: Theater },
+  { key: 'c-drama',        icon: Drama },
+  { key: 'c-compass',      icon: Compass },
+  { key: 'c-flag',         icon: Flag },
+  { key: 'c-calendar',     icon: Calendar },
+  { key: 'c-map',          icon: Map },
+  { key: 'c-castle',       icon: Castle },
+  { key: 'c-tent',         icon: Tent },
+  { key: 'c-swords',       icon: Swords },
+  { key: 'c-skull',        icon: Skull },
+  { key: 'c-crown',        icon: Crown },
+  { key: 'c-heart',        icon: Heart },
+  { key: 'c-eye',          icon: Eye },
+  { key: 'c-footprints',   icon: Footprints },
+  { key: 'c-dice',         icon: Dice5 },
+  { key: 'c-hourglass',    icon: Hourglass },
+  { key: 'c-flame',        icon: Flame },
+  { key: 'c-snowflake',    icon: Snowflake },
+  { key: 'c-cloud',        icon: Cloud },
+  { key: 'c-sun',          icon: Sun },
+  { key: 'c-moon',         icon: Moon },
+  { key: 'c-star',         icon: Star },
+  { key: 'c-zap',          icon: Zap },
+  { key: 'c-target',       icon: Target },
+  { key: 'c-music',        icon: Music },
+  { key: 'c-message',      icon: MessageCircle },
+  { key: 'c-lock',         icon: Lock },
+  { key: 'c-key',          icon: KeyIcon },
+  { key: 'c-coins',        icon: Coins },
+  { key: 'c-gift',         icon: Gift },
+];
+
+/** Icone par defaut quand une entite narrative n'en a pas. */
+export const DEFAULT_CAMPAIGN_ICON: LucideIconData = Bookmark;
+
+/** Resolveur dedie. Prefere passer par `resolveIcon` dans lore-icons qui consulte les deux. */
+export function resolveCampaignIcon(key: string | null | undefined): LucideIconData {
+  if (!key) return DEFAULT_CAMPAIGN_ICON;
+  return CAMPAIGN_ICON_OPTIONS.find(o => o.key === key)?.icon ?? DEFAULT_CAMPAIGN_ICON;
+}

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

@@ -109,11 +109,13 @@ export function buildCampaignTree(campaignId: string, data: CampaignTreeData): T
       const sceneItems: TreeItem[] = sortedScenes.map(sc => ({
         id: `scene-${sc.id}`,
         label: sc.name,
+        iconKey: sc.icon ?? undefined,
         route: `/campaigns/${campaignId}/arcs/${arc.id}/chapters/${ch.id}/scenes/${sc.id}`
       }));
       return {
         id: `chapter-${ch.id}`,
         label: ch.name,
+        iconKey: ch.icon ?? undefined,
         children: sceneItems,
         route: `/campaigns/${campaignId}/arcs/${arc.id}/chapters/${ch.id}`,
         createActions: [{
@@ -127,6 +129,7 @@ export function buildCampaignTree(campaignId: string, data: CampaignTreeData): T
     return {
       id: `arc-${arc.id}`,
       label: arc.name,
+      iconKey: arc.icon ?? undefined,
       children: chapterItems,
       route: `/campaigns/${campaignId}/arcs/${arc.id}`,
       sectionHeaderBefore: idx === 0 ? 'Narration' : undefined,

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

@@ -28,6 +28,11 @@
       </textarea>
     </div>
 
+    <div class="field">
+      <label>Icône</label>
+      <app-icon-picker [options]="campaignIconOptions" [(selected)]="selectedIcon"></app-icon-picker>
+    </div>
+
     <div class="form-actions">
       <button type="submit" class="btn-primary" [disabled]="form.invalid">
         Créer le chapitre

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

@@ -9,6 +9,8 @@ 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';
+import { IconPickerComponent } from '../../shared/icon-picker/icon-picker.component';
+import { CAMPAIGN_ICON_OPTIONS } from '../campaign-icons';
 
 /**
  * Écran de création d'un nouveau chapitre rattaché à un arc.
@@ -17,11 +19,14 @@ import { loadCampaignTreeData, buildCampaignTree } from '../campaign-tree.helper
 @Component({
   selector: 'app-chapter-create',
   standalone: true,
-  imports: [CommonModule, ReactiveFormsModule, LucideAngularModule],
+  imports: [CommonModule, ReactiveFormsModule, LucideAngularModule, IconPickerComponent],
   templateUrl: './chapter-create.component.html',
   styleUrls: ['./chapter-create.component.scss']
 })
 export class ChapterCreateComponent implements OnInit, OnDestroy {
+  readonly campaignIconOptions = CAMPAIGN_ICON_OPTIONS;
+  selectedIcon: string | null = null;
+
   form: FormGroup;
   campaignId = '';
   arcId = '';
@@ -82,7 +87,8 @@ export class ChapterCreateComponent implements OnInit, OnDestroy {
       name: this.form.value.name,
       description: this.form.value.description,
       arcId: this.arcId,
-      order: this.existingChapterCount + 1
+      order: this.existingChapterCount + 1,
+      icon: this.selectedIcon
     }).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')

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

@@ -13,6 +13,14 @@
         <lucide-icon [img]="Sparkles" [size]="14"></lucide-icon>
         Assistant IA
       </button>
+      <button type="button" class="btn-secondary" (click)="cancel()">Annuler</button>
+      <button type="button" class="btn-danger" (click)="delete()">
+        <lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
+        Supprimer
+      </button>
+      <button type="button" class="btn-primary" (click)="submit()" [disabled]="form.invalid">
+        Sauvegarder
+      </button>
     </div>
   </div>
 
@@ -63,6 +71,11 @@
       </textarea>
     </div>
 
+    <div class="field">
+      <label>Icône</label>
+      <app-icon-picker [options]="campaignIconOptions" [(selected)]="selectedIcon"></app-icon-picker>
+    </div>
+
     <div class="field">
       <label for="chapter-edit-gm-notes">Notes du Maître de Jeu</label>
       <textarea
@@ -116,17 +129,6 @@
       </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>

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

@@ -16,6 +16,8 @@ import { loadCampaignTreeData, buildCampaignTree } from '../campaign-tree.helper
 import { LoreLinkPickerComponent } from '../../shared/lore-link-picker/lore-link-picker.component';
 import { AiChatDrawerComponent } from '../../shared/ai-chat-drawer/ai-chat-drawer.component';
 import { ImageGalleryComponent } from '../../shared/image-gallery/image-gallery.component';
+import { IconPickerComponent } from '../../shared/icon-picker/icon-picker.component';
+import { CAMPAIGN_ICON_OPTIONS } from '../campaign-icons';
 
 /**
  * Écran de détail/modification d'un Chapitre.
@@ -27,13 +29,15 @@ import { ImageGalleryComponent } from '../../shared/image-gallery/image-gallery.
 @Component({
   selector: 'app-chapter-edit',
   standalone: true,
-  imports: [CommonModule, ReactiveFormsModule, LucideAngularModule, LoreLinkPickerComponent, AiChatDrawerComponent, ImageGalleryComponent],
+  imports: [CommonModule, ReactiveFormsModule, LucideAngularModule, LoreLinkPickerComponent, AiChatDrawerComponent, ImageGalleryComponent, IconPickerComponent],
   templateUrl: './chapter-edit.component.html',
   styleUrls: ['./chapter-edit.component.scss']
 })
 export class ChapterEditComponent implements OnInit, OnDestroy {
   readonly Trash2 = Trash2;
   readonly Sparkles = Sparkles;
+  readonly campaignIconOptions = CAMPAIGN_ICON_OPTIONS;
+  selectedIcon: string | null = null;
 
   /** État drawer chat IA (b5.7 — intégration Campagne). */
   chatOpen = false;
@@ -113,6 +117,7 @@ export class ChapterEditComponent implements OnInit, OnDestroy {
       this.loreId = loreId;
       this.availablePages = pages;
       this.relatedPageIds = [...(chapter.relatedPageIds ?? [])];
+      this.selectedIcon = chapter.icon ?? null;
       this.illustrationImageIds = [...(chapter.illustrationImageIds ?? [])];
       this.mapImageIds = [...(chapter.mapImageIds ?? [])];
       this.form.patchValue({
@@ -153,7 +158,8 @@ export class ChapterEditComponent implements OnInit, OnDestroy {
       narrativeStakes:  this.form.value.narrativeStakes,
       relatedPageIds:   this.relatedPageIds,
       illustrationImageIds: this.illustrationImageIds,
-      mapImageIds:      this.mapImageIds
+      mapImageIds:      this.mapImageIds,
+      icon:             this.selectedIcon
     }).subscribe({
       next: () => this.router.navigate(['/campaigns', this.campaignId, 'arcs', this.arcId, 'chapters', this.chapterId]),
       error: () => console.error('Erreur lors de la sauvegarde')

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

@@ -16,11 +16,16 @@
   </div>
 
   <div class="graph-container" *ngIf="scenes.length > 0">
-    <svg [attr.width]="svgWidth" [attr.height]="svgHeight" class="graph-svg">
+    <svg #svgEl
+         [attr.width]="svgWidth" [attr.height]="svgHeight"
+         class="graph-svg"
+         (pointermove)="onPointerMove($event)"
+         (pointerup)="onPointerUp($event)"
+         (pointercancel)="onPointerUp($event)">
       <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" />
+          <path d="M 0 0 L 10 5 L 0 10 z" fill="#b8c0cc" />
         </marker>
       </defs>
 
@@ -28,20 +33,25 @@
         <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"
+                stroke="#b8c0cc" 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">
+                class="edge-label"
+                [class.dragging]="draggingLabelKey === edge.key"
+                (pointerdown)="onLabelPointerDown($event, edge)">
             {{ edge.label }}
           </text>
         </g>
       </g>
 
       <g class="nodes">
-        <g class="node" *ngFor="let node of nodes" (click)="openScene(node.id)">
+        <g class="node"
+           [class.dragging]="draggingId === node.id"
+           *ngFor="let node of nodes"
+           (pointerdown)="onPointerDown($event, node)">
           <title>{{ node.name }}</title>
           <rect [attr.x]="node.x" [attr.y]="node.y"
                 [attr.width]="NODE_WIDTH" [attr.height]="NODE_HEIGHT"
@@ -57,7 +67,7 @@
     </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.
+      💡 Cliquez sur une scène pour l'ouvrir, ou glissez-la pour réorganiser la carte. Les scènes non reliées au point d'entrée (scène d'ordre 1) apparaissent en bas.
     </small>
   </div>
 

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

@@ -11,7 +11,7 @@
   margin-bottom: 2rem;
 
   .subtitle {
-    color: #6b7280;
+    color: #9ca3af;
     font-size: 0.9rem;
     margin: 0.25rem 0 0;
   }
@@ -20,15 +20,17 @@
 .graph-empty {
   padding: 2rem;
   text-align: center;
-  color: #6b7280;
+  color: #9ca3af;
-  background: #f9fafb;
+  background: #14141f;
   border-radius: 8px;
-  border: 1px dashed #d1d5db;
+  border: 1px dashed #374151;
 }
 
 .graph-container {
-  background: #fafafa;
+  // Fond legerement plus sombre que la couleur des noeuds : creuse l'image
-  border: 1px solid #e5e7eb;
+  // sans aller jusqu'au noir pur (qui « brulerait » par contraste).
+  background: #0d0d18;
+  border: 1px solid #374151;
   border-radius: 12px;
   padding: 20px;
   overflow: auto;
@@ -41,14 +43,27 @@
 .graph-svg {
   display: block;
   max-width: 100%;
+  // Empeche le browser de clipper le contenu qui depasserait le viewport SVG
+  // pendant un drag — le scroll du conteneur prend le relais.
+  overflow: visible;
+  // Évite que le navigateur intercepte le drag pour faire de la sélection texte
+  // ou du panning natif sur les nœuds.
+  touch-action: none;
+  user-select: none;
 }
 
 .node {
-  cursor: pointer;
+  cursor: grab;
+  // Ombre portee douce pour detacher chaque noeud du fond. Faible alpha pour
+  // rester subtil sur fond sombre, large diffusion pour rester organique.
+  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
 
   .node-box {
-    fill: #ffffff;
+    // Indigo desature : reprend la palette accent (#6c63ff) en version assombrie
-    stroke: #1f2937;
+    // pour donner du caractere aux noeuds sans saturer la vue. Bordure assortie
+    // un peu plus claire pour bien dessiner le contour.
+    fill: #1f1d3a;
+    stroke: #4f4a7a;
     stroke-width: 2;
     transition: fill 0.15s ease, stroke 0.15s ease;
   }
@@ -56,31 +71,47 @@
   .node-label {
     font-size: 0.9rem;
     font-weight: 500;
-    fill: #1f2937;
+    fill: #f3f4f6;
     pointer-events: none;
   }
 
   &:hover .node-box {
-    fill: #eef2ff;
+    fill: #2c2952;
-    stroke: #4f46e5;
+    stroke: #8b80ff;
+  }
+
+  &.dragging {
+    cursor: grabbing;
+    .node-box {
+      fill: #2c2952;
+      stroke: #8b80ff;
+      filter: drop-shadow(0 4px 10px rgba(108, 99, 255, 0.35));
+    }
   }
 }
 
 .edge-label {
   font-size: 0.75rem;
-  fill: #4b5563;
+  fill: #e5e7eb;
   font-style: italic;
-  // Halo blanc autour du texte pour garantir la lisibilité même s'il passe
+  cursor: grab;
-  // sur une ligne ou un autre élément.
+  // Halo sombre autour du texte pour rester lisible quand un label passe
+  // par-dessus une arête ou un autre nœud. Aligne sur la couleur du fond.
   paint-order: stroke;
-  stroke: #fafafa;
+  stroke: #0d0d18;
-  stroke-width: 3px;
+  stroke-width: 4px;
   stroke-linejoin: round;
+
+  &:hover { fill: #ffffff; }
+  &.dragging {
+    cursor: grabbing;
+    fill: #ffffff;
+  }
 }
 
 .graph-hint {
   display: block;
   margin-top: 1rem;
-  color: #6b7280;
+  color: #9ca3af;
   font-size: 0.85rem;
 }

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

@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit, OnDestroy, ElementRef, ViewChild } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ActivatedRoute, Router, RouterModule } from '@angular/router';
 import { forkJoin } from 'rxjs';
@@ -11,7 +11,7 @@ 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; }
+interface GraphEdge { key: string; 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.
@@ -45,6 +45,24 @@ export class ChapterGraphComponent implements OnInit, OnDestroy {
   svgWidth = 600;
   svgHeight = 400;
 
+  @ViewChild('svgEl') svgEl?: ElementRef<SVGSVGElement>;
+
+  // Etat de drag : id du noeud manipule, offset entre le pointeur et le coin
+  // haut-gauche du noeud (en coords SVG), et flag indiquant qu'un mouvement
+  // significatif a eu lieu (pour distinguer clic vs glisser).
+  draggingId: string | null = null;
+  draggingLabelKey: string | null = null;
+  private dragOffsetX = 0;
+  private dragOffsetY = 0;
+  private dragMoved = false;
+  private readonly DRAG_THRESHOLD = 4;
+
+  // Decalage manuel applique a chaque label d'arete, indexe par cle stable
+  // (sourceId|targetId|branchIdx). Persiste a travers les recalculs d'aretes
+  // pour que le label suive son arete quand on deplace un noeud, tout en
+  // conservant le repositionnement manuel de l'utilisateur.
+  private labelOffsets = new Map<string, { dx: number; dy: number }>();
+
   constructor(
     private route: ActivatedRoute,
     private router: Router,
@@ -153,7 +171,18 @@ export class ChapterGraphComponent implements OnInit, OnDestroy {
       });
     }
 
-    const nodeMap = new Map(nodes.map(n => [n.id, n]));
+    this.nodes = nodes;
+    this.recomputeEdges();
+    this.svgWidth = Math.max(rowWidth + 40, 600);
+    this.svgHeight = (orphanLevel + 1) * (this.NODE_HEIGHT + this.V_SPACING) + 40;
+  }
+
+  /**
+   * Recalcule la geometrie des aretes a partir des positions courantes des noeuds.
+   * Appele apres le layout initial et apres chaque deplacement manuel d'un noeud.
+   */
+  private recomputeEdges(): void {
+    const nodeMap = new Map(this.nodes.map(n => [n.id, n]));
     const edges: GraphEdge[] = [];
     for (const scene of this.scenes) {
       const from = nodeMap.get(scene.id!);
@@ -171,19 +200,158 @@ export class ChapterGraphComponent implements OnInit, OnDestroy {
         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;
+        const key = `${scene.id}|${b.targetSceneId}|${idx}`;
+        const offset = this.labelOffsets.get(key) ?? { dx: 0, dy: 0 };
         edges.push({
+          key,
           label: b.label,
           x1, y1, x2, y2,
-          labelX: x1 + (x2 - x1) * t,
+          labelX: x1 + (x2 - x1) * t + offset.dx,
-          labelY: y1 + (y2 - y1) * t - 4
+          labelY: y1 + (y2 - y1) * t - 4 + offset.dy
         });
       });
     }
-
-    this.nodes = nodes;
     this.edges = edges;
-    this.svgWidth = Math.max(rowWidth + 40, 600);
+  }
-    this.svgHeight = (orphanLevel + 1) * (this.NODE_HEIGHT + this.V_SPACING) + 40;
+
+  /**
+   * Convertit des coordonnees ecran (PointerEvent) en coordonnees SVG via la CTM
+   * inverse. Necessaire car le SVG peut etre redimensionne par max-width.
+   */
+  private toSvgCoords(evt: PointerEvent): { x: number; y: number } {
+    const svg = this.svgEl?.nativeElement;
+    if (!svg) return { x: evt.clientX, y: evt.clientY };
+    const pt = svg.createSVGPoint();
+    pt.x = evt.clientX;
+    pt.y = evt.clientY;
+    const ctm = svg.getScreenCTM();
+    if (!ctm) return { x: evt.clientX, y: evt.clientY };
+    const local = pt.matrixTransform(ctm.inverse());
+    return { x: local.x, y: local.y };
+  }
+
+  onPointerDown(evt: PointerEvent, node: GraphNode): void {
+    // Bouton gauche uniquement.
+    if (evt.button !== 0) return;
+    evt.preventDefault();
+    const { x, y } = this.toSvgCoords(evt);
+    this.draggingId = node.id;
+    this.dragOffsetX = x - node.x;
+    this.dragOffsetY = y - node.y;
+    this.dragMoved = false;
+    (evt.target as Element).setPointerCapture?.(evt.pointerId);
+  }
+
+  onPointerMove(evt: PointerEvent): void {
+    const { x, y } = this.toSvgCoords(evt);
+
+    if (this.draggingLabelKey) {
+      const edge = this.edges.find(e => e.key === this.draggingLabelKey);
+      if (!edge) return;
+      const newX = x - this.dragOffsetX;
+      const newY = y - this.dragOffsetY;
+      if (!this.dragMoved && Math.hypot(newX - edge.labelX, newY - edge.labelY) < this.DRAG_THRESHOLD) return;
+      this.dragMoved = true;
+      // Recalcule la position automatique courante puis stocke la difference,
+      // pour que l'offset reste valable meme apres deplacement d'un noeud.
+      const auto = this.autoLabelPosition(edge.key);
+      if (auto) {
+        this.labelOffsets.set(edge.key, { dx: newX - auto.x, dy: newY - auto.y });
+      }
+      edge.labelX = newX;
+      edge.labelY = newY;
+      return;
+    }
+
+    if (!this.draggingId) return;
+    const node = this.nodes.find(n => n.id === this.draggingId);
+    if (!node) return;
+    // Empeche le noeud de partir en coordonnees negatives : sinon il sort
+    // du viewport SVG et se fait clipper par le navigateur (le SVG a
+    // overflow: hidden par defaut quand on lui donne width/height explicites).
+    const newX = Math.max(0, x - this.dragOffsetX);
+    const newY = Math.max(0, y - this.dragOffsetY);
+    if (!this.dragMoved) {
+      const dx = newX - node.x;
+      const dy = newY - node.y;
+      if (Math.hypot(dx, dy) >= this.DRAG_THRESHOLD) this.dragMoved = true;
+      else return;
+    }
+    node.x = newX;
+    node.y = newY;
+    this.recomputeEdges();
+    this.fitSvgToNodes();
+  }
+
+  /**
+   * Recalcule la position "auto" (sans offset manuel) du label d'une arete
+   * a partir de sa cle. Utilise pour deriver le delta a stocker pendant le drag.
+   */
+  private autoLabelPosition(key: string): { x: number; y: number } | null {
+    const [sourceId, targetId, idxStr] = key.split('|');
+    const idx = Number(idxStr);
+    const scene = this.scenes.find(s => s.id === sourceId);
+    if (!scene?.branches) return null;
+    const siblings = scene.branches.filter(b => this.nodes.some(n => n.id === b.targetSceneId));
+    const count = siblings.length;
+    if (idx >= count) return null;
+    const from = this.nodes.find(n => n.id === sourceId);
+    const to = this.nodes.find(n => n.id === targetId);
+    if (!from || !to) return null;
+    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;
+    const t = count === 1 ? 0.5 : 0.25 + (idx / (count - 1)) * 0.3;
+    return { x: x1 + (x2 - x1) * t, y: y1 + (y2 - y1) * t - 4 };
+  }
+
+  onLabelPointerDown(evt: PointerEvent, edge: GraphEdge): void {
+    if (evt.button !== 0) return;
+    // Empeche l'event de remonter au <g class="node"> ou au svg, sinon on
+    // declencherait aussi un drag de noeud.
+    evt.stopPropagation();
+    evt.preventDefault();
+    const { x, y } = this.toSvgCoords(evt);
+    this.draggingLabelKey = edge.key;
+    this.dragOffsetX = x - edge.labelX;
+    this.dragOffsetY = y - edge.labelY;
+    this.dragMoved = false;
+    (evt.target as Element).setPointerCapture?.(evt.pointerId);
+  }
+
+  /**
+   * Agrandit le SVG si un noeud s'approche du bord droit ou bas, pour eviter
+   * que le contenu deplace soit rogne. On ne reduit jamais en-dessous de la
+   * taille initiale du layout pour rester stable visuellement.
+   */
+  private fitSvgToNodes(): void {
+    const margin = 40;
+    let maxX = 600;
+    let maxY = 200;
+    for (const n of this.nodes) {
+      if (n.x + this.NODE_WIDTH + margin > maxX) maxX = n.x + this.NODE_WIDTH + margin;
+      if (n.y + this.NODE_HEIGHT + margin > maxY) maxY = n.y + this.NODE_HEIGHT + margin;
+    }
+    if (maxX > this.svgWidth) this.svgWidth = maxX;
+    if (maxY > this.svgHeight) this.svgHeight = maxY;
+  }
+
+  onPointerUp(evt: PointerEvent): void {
+    if (this.draggingLabelKey) {
+      this.draggingLabelKey = null;
+      this.dragMoved = false;
+      (evt.target as Element).releasePointerCapture?.(evt.pointerId);
+      return;
+    }
+    if (!this.draggingId) return;
+    const id = this.draggingId;
+    const moved = this.dragMoved;
+    this.draggingId = null;
+    this.dragMoved = false;
+    (evt.target as Element).releasePointerCapture?.(evt.pointerId);
+    // Si le pointeur n'a pas reellement bouge, on traite comme un clic d'ouverture.
+    if (!moved) this.openScene(id);
   }
 
   private truncate(text: string): string {

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

@@ -2,7 +2,10 @@
 
   <header class="view-header">
     <div>
-      <h1>{{ chapter.name }}</h1>
+      <h1>
+        <lucide-icon *ngIf="chapter.icon" [img]="resolveCampaignIcon(chapter.icon)" [size]="22" class="title-icon"></lucide-icon>
+        {{ chapter.name }}
+      </h1>
       <p class="view-subtitle">Chapitre</p>
     </div>
     <div class="view-actions">

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

@@ -4,6 +4,7 @@ import { ActivatedRoute, Router, RouterModule } from '@angular/router';
 import { forkJoin, of } from 'rxjs';
 import { switchMap } from 'rxjs/operators';
 import { LucideAngularModule, Pencil, Network, Trash2 } from 'lucide-angular';
+import { resolveCampaignIcon } from '../campaign-icons';
 import { CampaignService } from '../../services/campaign.service';
 import { CharacterService } from '../../services/character.service';
 import { PageService } from '../../services/page.service';
@@ -29,6 +30,7 @@ export class ChapterViewComponent implements OnInit, OnDestroy {
   readonly Pencil = Pencil;
   readonly Network = Network;
   readonly Trash2 = Trash2;
+  readonly resolveCampaignIcon = resolveCampaignIcon;
 
   campaignId = '';
   arcId = '';

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

@@ -28,6 +28,11 @@
       </textarea>
     </div>
 
+    <div class="field">
+      <label>Icône</label>
+      <app-icon-picker [options]="campaignIconOptions" [(selected)]="selectedIcon"></app-icon-picker>
+    </div>
+
     <div class="form-actions">
       <button type="submit" class="btn-primary" [disabled]="form.invalid">
         Créer la scène

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

@@ -9,6 +9,8 @@ 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';
+import { IconPickerComponent } from '../../shared/icon-picker/icon-picker.component';
+import { CAMPAIGN_ICON_OPTIONS } from '../campaign-icons';
 
 /**
  * Écran de création d'une nouvelle scène rattachée à un chapitre.
@@ -17,11 +19,14 @@ import { loadCampaignTreeData, buildCampaignTree } from '../campaign-tree.helper
 @Component({
   selector: 'app-scene-create',
   standalone: true,
-  imports: [CommonModule, ReactiveFormsModule, LucideAngularModule],
+  imports: [CommonModule, ReactiveFormsModule, LucideAngularModule, IconPickerComponent],
   templateUrl: './scene-create.component.html',
   styleUrls: ['./scene-create.component.scss']
 })
 export class SceneCreateComponent implements OnInit, OnDestroy {
+  readonly campaignIconOptions = CAMPAIGN_ICON_OPTIONS;
+  selectedIcon: string | null = null;
+
   form: FormGroup;
   campaignId = '';
   arcId = '';
@@ -84,7 +89,8 @@ export class SceneCreateComponent implements OnInit, OnDestroy {
       name: this.form.value.name,
       description: this.form.value.description,
       chapterId: this.chapterId,
-      order: this.existingSceneCount + 1
+      order: this.existingSceneCount + 1,
+      icon: this.selectedIcon
     }).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')

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

@@ -13,6 +13,14 @@
         <lucide-icon [img]="Sparkles" [size]="14"></lucide-icon>
         Assistant IA
       </button>
+      <button type="button" class="btn-secondary" (click)="cancel()">Annuler</button>
+      <button type="button" class="btn-danger" (click)="delete()">
+        <lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
+        Supprimer
+      </button>
+      <button type="button" class="btn-primary" (click)="submit()" [disabled]="form.invalid">
+        Sauvegarder
+      </button>
     </div>
   </div>
 
@@ -63,6 +71,11 @@
       </textarea>
     </div>
 
+    <div class="field">
+      <label>Icône</label>
+      <app-icon-picker [options]="campaignIconOptions" [(selected)]="selectedIcon"></app-icon-picker>
+    </div>
+
     <!-- Section : Contexte et ambiance -->
     <app-expandable-section title="Contexte et ambiance" icon="📍" [initiallyOpen]="true">
       <div class="field-row">
@@ -218,17 +231,6 @@
       </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>

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

@@ -17,6 +17,8 @@ import { ExpandableSectionComponent } from '../../shared/expandable-section/expa
 import { LoreLinkPickerComponent } from '../../shared/lore-link-picker/lore-link-picker.component';
 import { AiChatDrawerComponent } from '../../shared/ai-chat-drawer/ai-chat-drawer.component';
 import { ImageGalleryComponent } from '../../shared/image-gallery/image-gallery.component';
+import { IconPickerComponent } from '../../shared/icon-picker/icon-picker.component';
+import { CAMPAIGN_ICON_OPTIONS } from '../campaign-icons';
 
 /**
  * Écran de détail/modification d'une Scène.
@@ -25,13 +27,15 @@ import { ImageGalleryComponent } from '../../shared/image-gallery/image-gallery.
 @Component({
   selector: 'app-scene-edit',
   standalone: true,
-  imports: [CommonModule, ReactiveFormsModule, LucideAngularModule, ExpandableSectionComponent, LoreLinkPickerComponent, AiChatDrawerComponent, ImageGalleryComponent],
+  imports: [CommonModule, ReactiveFormsModule, LucideAngularModule, ExpandableSectionComponent, LoreLinkPickerComponent, AiChatDrawerComponent, ImageGalleryComponent, IconPickerComponent],
   templateUrl: './scene-edit.component.html',
   styleUrls: ['./scene-edit.component.scss']
 })
 export class SceneEditComponent implements OnInit, OnDestroy {
   readonly Trash2 = Trash2;
   readonly Sparkles = Sparkles;
+  readonly campaignIconOptions = CAMPAIGN_ICON_OPTIONS;
+  selectedIcon: string | null = null;
 
   /** État drawer chat IA (b5.7 — intégration Campagne). */
   chatOpen = false;
@@ -131,6 +135,7 @@ export class SceneEditComponent implements OnInit, OnDestroy {
       this.loreId = loreId;
       this.availablePages = pages;
       this.relatedPageIds = [...(scene.relatedPageIds ?? [])];
+      this.selectedIcon = scene.icon ?? null;
       this.illustrationImageIds = [...(scene.illustrationImageIds ?? [])];
       this.mapImageIds = [...(scene.mapImageIds ?? [])];
       this.siblingScenes = chapterScenes.filter(s => s.id !== this.sceneId);
@@ -184,7 +189,8 @@ export class SceneEditComponent implements OnInit, OnDestroy {
       relatedPageIds:       this.relatedPageIds,
       illustrationImageIds: this.illustrationImageIds,
       mapImageIds:          this.mapImageIds,
-      branches:             this.branches
+      branches:             this.branches,
+      icon:                 this.selectedIcon
     }).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')

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

@@ -2,7 +2,10 @@
 
   <header class="view-header">
     <div>
-      <h1>{{ scene.name }}</h1>
+      <h1>
+        <lucide-icon *ngIf="scene.icon" [img]="resolveCampaignIcon(scene.icon)" [size]="22" class="title-icon"></lucide-icon>
+        {{ scene.name }}
+      </h1>
       <p class="view-subtitle">Scène</p>
     </div>
     <div class="view-actions">

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

@@ -4,6 +4,7 @@ import { ActivatedRoute, Router, RouterModule } from '@angular/router';
 import { forkJoin, of } from 'rxjs';
 import { switchMap } from 'rxjs/operators';
 import { LucideAngularModule, Pencil, Trash2 } from 'lucide-angular';
+import { resolveCampaignIcon } from '../campaign-icons';
 import { CampaignService } from '../../services/campaign.service';
 import { CharacterService } from '../../services/character.service';
 import { PageService } from '../../services/page.service';
@@ -28,6 +29,7 @@ import { ImageGalleryComponent } from '../../shared/image-gallery/image-gallery.
 export class SceneViewComponent implements OnInit, OnDestroy {
   readonly Pencil = Pencil;
   readonly Trash2 = Trash2;
+  readonly resolveCampaignIcon = resolveCampaignIcon;
 
   campaignId = '';
   arcId = '';

web/src/app/interceptors/session-expired.interceptor.ts

@@ -0,0 +1,65 @@
+import { HttpInterceptorFn, HttpErrorResponse } from '@angular/common/http';
+import { catchError, throwError } from 'rxjs';
+
+/**
+ * Detecte la perte de session demo (orchestrateur) via les codes 401/502 sur
+ * les appels /api/*, affiche un overlay puis force un rechargement de la page.
+ * Le reload renvoie l'utilisateur sur la page "Preparation" pour creer une
+ * nouvelle session sans qu'il ait a faire Ctrl+Shift+R.
+ *
+ * Cet interceptor est inerte en mode normal (non-demo) : si le backend natif
+ * renvoie un 401 legitime, ca declenche aussi le reload, ce qui est sans
+ * consequence puisqu'aucun flux d'auth utilisateur n'existe encore cote app.
+ */
+
+// Module-level flag : evite de declencher overlay + reload plusieurs fois si
+// plusieurs appels echouent en parallele juste apres l'expiration.
+let alreadyTriggered = false;
+
+export const sessionExpiredInterceptor: HttpInterceptorFn = (req, next) => {
+  return next(req).pipe(
+    catchError((err) => {
+      const isApiCall = req.url.includes('/api/');
+      const isSessionLoss =
+        err instanceof HttpErrorResponse && (err.status === 401 || err.status === 502);
+
+      if (isApiCall && isSessionLoss && !alreadyTriggered) {
+        alreadyTriggered = true;
+        showExpiredOverlay();
+        setTimeout(() => window.location.reload(), 2500);
+      }
+      return throwError(() => err);
+    })
+  );
+};
+
+function showExpiredOverlay(): void {
+  const overlay = document.createElement('div');
+  overlay.setAttribute('data-session-expired', 'true');
+  overlay.style.cssText = [
+    'position:fixed', 'inset:0',
+    'background:rgba(26,22,37,0.96)',
+    'color:#e4def5',
+    'display:flex', 'flex-direction:column',
+    'align-items:center', 'justify-content:center',
+    'gap:1rem',
+    'font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif',
+    'z-index:99999',
+    'text-align:center', 'padding:2rem',
+  ].join(';');
+  overlay.innerHTML = `
+    <div style="font-size:1.5rem;color:#b794f4;">✦ Votre session démo a expiré</div>
+    <div style="color:#aaa0c5;max-width:420px;line-height:1.5;">
+      Une nouvelle session va être préparée automatiquement.<br>
+      Vos données précédentes ne sont pas conservées.
+    </div>
+    <div style="
+      width:32px;height:32px;margin-top:0.5rem;
+      border:3px solid rgba(183,148,244,0.2);
+      border-top-color:#b794f4;border-radius:50%;
+      animation:sex-spin 1s linear infinite;
+    "></div>
+    <style>@keyframes sex-spin{to{transform:rotate(360deg)}}</style>
+  `;
+  document.body.appendChild(overlay);
+}

web/src/app/lore/lore-icons.ts

@@ -4,6 +4,7 @@ import {
   BookOpen, Scroll, Wand2, Sparkles, TreePine, Mountain,
   Ship, Flame, Star, Moon, Key, Globe, Compass, LucideIconData
 } from 'lucide-angular';
+import { CAMPAIGN_ICON_OPTIONS } from '../campaigns/campaign-icons';
 
 /**
  * Registre partagé d'icônes disponibles pour les dossiers (LoreNode).
@@ -46,8 +47,15 @@ export const LORE_ICON_OPTIONS: IconOption[] = [
 /** Icône par défaut pour un dossier sans icône. */
 export const DEFAULT_FOLDER_ICON: LucideIconData = Folder;
 
-/** Résout une clé d'icône en LucideIconData. Fallback : icône dossier par défaut. */
+/**
+ * Résout une clé d'icône en LucideIconData. Consulte LORE_ICON_OPTIONS puis
+ * CAMPAIGN_ICON_OPTIONS pour permettre à la sidebar partagée d'afficher
+ * indifféremment des icônes de dossiers (lore) ou d'arcs/chapitres/scènes
+ * (campagne). Fallback : icône dossier par défaut.
+ */
 export function resolveIcon(key: string | null | undefined): LucideIconData {
   if (!key) return DEFAULT_FOLDER_ICON;
-  return LORE_ICON_OPTIONS.find(o => o.key === key)?.icon ?? DEFAULT_FOLDER_ICON;
+  const loreMatch = LORE_ICON_OPTIONS.find(o => o.key === key);
+  if (loreMatch) return loreMatch.icon;
+  return CAMPAIGN_ICON_OPTIONS.find(o => o.key === key)?.icon ?? DEFAULT_FOLDER_ICON;
 }

web/src/app/lore/template-create/template-create.component.ts

@@ -42,7 +42,8 @@ export class TemplateCreateComponent implements OnInit, OnDestroy {
    */
   fields: TemplateField[] = [
     { name: 'Nom', type: 'TEXT' },
-    { name: 'Description', type: 'TEXT' }
+    { name: 'Description', type: 'TEXT' },
+    { name: 'Illustration', type: 'IMAGE', layout: 'GALLERY' }
   ];
   /** Valeur courante de l'input d'ajout de champ (non binding direct pour reset facile). */
   newFieldName = '';

web/src/app/lore/template-edit/template-edit.component.html

@@ -103,7 +103,7 @@
           <option value="TEXT">Texte</option>
           <option value="IMAGE">Image</option>
         </select>
-        <button type="button" class="btn-add" (click)="addField()">
+        <button type="button" class="btn-add" (click)="addField()" title="Ajouter le champ">
           <lucide-icon [img]="Plus" [size]="14"></lucide-icon>
         </button>
       </div>

web/src/app/lore/template-edit/template-edit.component.scss

@@ -198,18 +198,7 @@
     &::placeholder { color: #6b7280; }
   }
 
-  &.add-row {
+  &.add-row { margin-top: 0.5rem; }
-    margin-top: 0.25rem;
-    border: 1px dashed #2a2a3d;
-    border-radius: 6px;
-    padding: 0;
-
-    input {
-      border: none;
-      background: transparent;
-      &:focus { border: none; }
-    }
-  }
 
   .reorder-stack {
     display: flex;

web/src/app/services/campaign.model.ts

@@ -29,6 +29,9 @@ export interface Arc {
   order?: number;
   chapterCount?: number;
 
+  /** Cle d'icone choisie par l'utilisateur (cf. CAMPAIGN_ICON_OPTIONS). */
+  icon?: string | null;
+
   // Champs narratifs enrichis
   themes?: string;
   stakes?: string;
@@ -52,6 +55,7 @@ export interface ArcCreate {
   description?: string;
   campaignId: string;
   order: number;
+  icon?: string | null;
 
   themes?: string;
   stakes?: string;
@@ -70,6 +74,7 @@ export interface Chapter {
   description?: string;
   arcId: string;
   order?: number;
+  icon?: string | null;
 
   // Champs narratifs enrichis
   gmNotes?: string;
@@ -86,6 +91,7 @@ export interface ChapterCreate {
   description?: string;
   arcId: string;
   order: number;
+  icon?: string | null;
 
   gmNotes?: string;
   playerObjectives?: string;
@@ -112,6 +118,7 @@ export interface Scene {
   description?: string;        // = Description courte dans l'UI
   chapterId: string;
   order?: number;
+  icon?: string | null;
 
   // Champs narratifs enrichis
   location?: string;
@@ -136,6 +143,7 @@ export interface SceneCreate {
   description?: string;
   chapterId: string;
   order: number;
+  icon?: string | null;
 
   location?: string;
   timing?: string;

web/src/app/shared/icon-picker/icon-picker.component.scss

@@ -0,0 +1,31 @@
+.icon-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  background: #1f2937;
+  border: 1px solid #374151;
+  border-radius: 8px;
+  padding: 0.75rem;
+}
+
+.icon-btn {
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  color: #9ca3af;
+  cursor: pointer;
+  transition: all 0.15s;
+
+  &:hover { background: #374151; color: white; }
+
+  &.selected {
+    background: #1e1b4b;
+    border-color: #6c63ff;
+    color: #a5b4fc;
+  }
+}

web/src/app/shared/icon-picker/icon-picker.component.ts

@@ -0,0 +1,54 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { LucideAngularModule, LucideIconData } from 'lucide-angular';
+
+export interface IconPickerOption {
+  key: string;
+  icon: LucideIconData;
+}
+
+/**
+ * Petit composant reutilisable : grille d'icones cliquables avec selection unique.
+ * Utilise par les formulaires de creation / edition d'arcs, chapitres et scenes
+ * (ainsi que potentiellement les dossiers du Lore plus tard).
+ *
+ * Usage :
+ *   <app-icon-picker [options]="iconOptions" [(selected)]="selectedIcon"></app-icon-picker>
+ *
+ * Le composant est purement presentationnel : il n'interroge pas le registre
+ * d'icones lui-meme — l'appelant lui passe la banque a afficher.
+ */
+@Component({
+  selector: 'app-icon-picker',
+  standalone: true,
+  imports: [CommonModule, LucideAngularModule],
+  template: `
+    <div class="icon-grid">
+      <button
+        type="button"
+        class="icon-btn"
+        *ngFor="let option of options"
+        [class.selected]="selected === option.key"
+        [attr.aria-pressed]="selected === option.key"
+        [title]="option.key"
+        (click)="pick(option.key)">
+        <lucide-icon [img]="option.icon" [size]="18"></lucide-icon>
+      </button>
+    </div>
+  `,
+  styleUrls: ['./icon-picker.component.scss']
+})
+export class IconPickerComponent {
+  @Input() options: IconPickerOption[] = [];
+  @Input() selected: string | null = null;
+  /** Permet le binding two-way `[(selected)]`. */
+  @Output() selectedChange = new EventEmitter<string | null>();
+  /** Si true, recliquer sur l'icone actuellement selectionnee la deselectionne. */
+  @Input() allowDeselect = true;
+
+  pick(key: string): void {
+    const next = this.allowDeselect && this.selected === key ? null : key;
+    this.selected = next;
+    this.selectedChange.emit(next);
+  }
+}

web/src/main.ts

@@ -2,9 +2,10 @@ import { bootstrapApplication } from '@angular/platform-browser';
 import { AppComponent } from './app/app.component';
 import { PreloadAllModules, provideRouter, withPreloading } from '@angular/router';
 import { routes } from './app/app.routes';
-import { provideHttpClient } from '@angular/common/http';
+import { provideHttpClient, withInterceptors } from '@angular/common/http';
 import { APP_INITIALIZER } from '@angular/core';
 import { ConfigService } from './app/services/config.service';
+import { sessionExpiredInterceptor } from './app/interceptors/session-expired.interceptor';
 
 // withPreloading(PreloadAllModules) : une fois l'app initiale rendue, Angular
 // telecharge en arriere-plan tous les chunks lazy-loades. Consequence : la
@@ -14,7 +15,7 @@ import { ConfigService } from './app/services/config.service';
 bootstrapApplication(AppComponent, {
   providers: [
     provideRouter(routes, withPreloading(PreloadAllModules)),
-    provideHttpClient(),
+    provideHttpClient(withInterceptors([sessionExpiredInterceptor])),
     {
       provide: APP_INITIALIZER,
       useFactory: (config: ConfigService) => () => config.load(),

web/src/styles/_view.scss

@@ -35,6 +35,26 @@
       color: white;
       margin: 0 0 0.3rem;
       line-height: 1.2;
+      display: flex;
+      align-items: center;
+      gap: 0.6rem;
+
+      // Pastille violette autour de l'icone. <lucide-icon> est inline par
+      // defaut : sans inline-flex le SVG se cale en haut-gauche de la boite
+      // au lieu d'etre centre. On fixe aussi la taille pour que la pastille
+      // soit toujours carree quelle que soit l'icone.
+      .title-icon {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 36px;
+        height: 36px;
+        color: #a5b4fc;
+        background: #1e1b4b;
+        border: 1px solid #4338ca;
+        border-radius: 8px;
+        flex-shrink: 0;
+      }
     }
     .view-subtitle {
       color: #9ca3af;