Ajout d'un mode "jeu" (possibilité de lancer des sessions dans une campagne). Cela permet de faire de prendre des notes en live au cours d'une partie et d'avoir plusieurs outils sous la main pour aider le mj :

- Possibilité de parler à une IA pour règle de jeu ou élément de lore / campagne au cours d'une partie comme aide mémoire
- Onglet dédié aux personnages de la campagne
- Onglet dédié aux scènes
- Onglet avec dès pour ceux qui souhaitent ;

Possibilité de rajouté une note en tant qu'évènement, jet de dès ou encore action du joueur par exemple. D'autres ajouts seront fait dans le futur (notamment des tables aléatoires pour PNJ en live).

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

@@ -196,4 +196,60 @@
     </div>
   </section>
 
+  <!-- ============ Sessions de jeu ============ -->
+  <section class="detail-section sessions-section" *ngIf="!editing">
+    <div class="section-header">
+      <h2>
+        <lucide-icon [img]="Dices" [size]="18"></lucide-icon>
+        Sessions de jeu
+      </h2>
+
+      <!-- Cas 1 : aucune session active dans l'app → on peut lancer -->
+      <button *ngIf="!activeSessionGlobal"
+              class="btn-add"
+              [disabled]="startingSession"
+              (click)="startSession()">
+        <lucide-icon [img]="Play" [size]="14"></lucide-icon>
+        Lancer une nouvelle session
+      </button>
+
+      <!-- Cas 2 : session active sur cette campagne → reprendre -->
+      <button *ngIf="activeSessionOnCurrentCampaign"
+              class="btn-add"
+              (click)="openSession(activeSessionOnCurrentCampaign)">
+        <lucide-icon [img]="Play" [size]="14"></lucide-icon>
+        Reprendre la session en cours
+      </button>
+
+      <!-- Cas 3 : session active sur une autre campagne → bloqué -->
+      <button *ngIf="isLaunchBlockedByOtherCampaign"
+              class="btn-add"
+              disabled
+              title="Une session est déjà en cours sur une autre campagne. Termine-la d'abord.">
+        <lucide-icon [img]="Play" [size]="14"></lucide-icon>
+        Session en cours ailleurs
+      </button>
+    </div>
+
+    <div class="sessions-grid" *ngIf="sessions.length > 0">
+      <div class="session-card"
+           *ngFor="let session of sessions"
+           [class.session-card--active]="session.active"
+           (click)="openSession(session)">
+        <lucide-icon [img]="Dices" [size]="20" class="session-icon"></lucide-icon>
+        <div class="session-info">
+          <span class="session-name">{{ session.name }}</span>
+          <span class="session-meta">
+            <span class="session-status" *ngIf="session.active">● En cours</span>
+            <span *ngIf="!session.active">Terminée le {{ session.endedAt | date:'dd/MM/yyyy' }}</span>
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <div class="empty-state empty-state--compact" *ngIf="sessions.length === 0">
+      <p>Aucune session de jeu pour le moment.</p>
+    </div>
+  </section>
+
 </div>

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

@@ -382,3 +382,57 @@
 
   &:hover { background: #5b52e0; }
 }
+
+// ─────────────── Sessions de jeu (Play Context) ───────────────
+.sessions-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: 0.75rem;
+}
+
+.session-card {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  background: #111827;
+  border: 1px solid #1f2937;
+  border-radius: 10px;
+  padding: 0.9rem 1rem;
+  cursor: pointer;
+  transition: border-color 0.2s, transform 0.2s;
+
+  &:hover { border-color: #6c63ff; transform: translateY(-1px); }
+
+  &--active {
+    border-color: #10b981;
+    background: linear-gradient(180deg, #0d1f1a 0%, #111827 100%);
+  }
+
+  .session-icon { color: #6c63ff; flex-shrink: 0; }
+
+  .session-info {
+    display: flex;
+    flex-direction: column;
+    gap: 0.2rem;
+    min-width: 0;
+  }
+
+  .session-name {
+    color: white;
+    font-size: 0.9rem;
+    font-weight: 600;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .session-meta {
+    color: #6b7280;
+    font-size: 0.75rem;
+  }
+
+  .session-status {
+    color: #10b981;
+    font-weight: 600;
+  }
+}

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

@@ -2,7 +2,7 @@ import { Component, OnInit, OnDestroy } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ActivatedRoute } from '@angular/router';
 import { FormsModule } from '@angular/forms';
-import { LucideAngularModule, Swords, Plus, Globe, Pencil, Trash2, User, Dices, Drama, Check } from 'lucide-angular';
+import { LucideAngularModule, Swords, Plus, Globe, Pencil, Trash2, User, Dices, Drama, Check, Play } from 'lucide-angular';
 import { Router, RouterLink } from '@angular/router';
 import { forkJoin, of } from 'rxjs';
 import { catchError, switchMap, filter, map } from 'rxjs/operators';
@@ -12,6 +12,8 @@ import { GameSystemService } from '../../../services/game-system.service';
 import { GameSystem } from '../../../services/game-system.model';
 import { CharacterService } from '../../../services/character.service';
 import { NpcService } from '../../../services/npc.service';
+import { SessionService } from '../../../services/session.service';
+import { Session } from '../../../services/session.model';
 import { Character } from '../../../services/character.model';
 import { Npc } from '../../../services/npc.model';
 import { LayoutService } from '../../../services/layout.service';
@@ -38,6 +40,7 @@ export class CampaignDetailComponent implements OnInit, OnDestroy {
   readonly Dices = Dices;
   readonly Drama = Drama;
   readonly Check = Check;
+  readonly Play = Play;
 
   campaign: Campaign | null = null;
   arcs: Arc[] = [];
@@ -55,6 +58,16 @@ export class CampaignDetailComponent implements OnInit, OnDestroy {
   characters: Character[] = [];
   /** Fiches de personnages non-joueurs (PNJ) de la campagne. */
   npcs: Npc[] = [];
+  /** Sessions de jeu (passées et en cours) liées à cette campagne. */
+  sessions: Session[] = [];
+  /**
+   * Session active globale (toutes campagnes confondues).
+   * Sert à désactiver le bouton "Lancer" si une session tourne déjà ailleurs.
+   * Null si aucune session active dans l'app.
+   */
+  activeSessionGlobal: Session | null = null;
+  /** Indicateur de lancement en cours pour éviter les double-clics. */
+  startingSession = false;
 
   /** Mode édition inline. */
   editing = false;
@@ -78,6 +91,7 @@ export class CampaignDetailComponent implements OnInit, OnDestroy {
     private gameSystemService: GameSystemService,
     private characterService: CharacterService,
     private npcService: NpcService,
+    private sessionService: SessionService,
     private layoutService: LayoutService,
     private pageTitleService: PageTitleService,
     private confirmDialog: ConfirmDialogService
@@ -104,6 +118,7 @@ export class CampaignDetailComponent implements OnInit, OnDestroy {
       this.loadLinkedGameSystem(campaign);
       this.loadCharacters(campaign.id!);
       this.loadNpcs(campaign.id!);
+      this.loadSessions(campaign.id!);
       this.arcs = treeData.arcs;
       this.chapterCountByArc = this.computeChapterCounts(treeData);
       this.showLayout(allCampaigns, treeData);
@@ -138,6 +153,7 @@ export class CampaignDetailComponent implements OnInit, OnDestroy {
       this.loadLinkedGameSystem(campaign);
       this.loadCharacters(campaign.id!);
       this.loadNpcs(campaign.id!);
+      this.loadSessions(campaign.id!);
       this.arcs = treeData.arcs;
       this.chapterCountByArc = this.computeChapterCounts(treeData);
       this.showLayout(allCampaigns, treeData);
@@ -184,6 +200,55 @@ export class CampaignDetailComponent implements OnInit, OnDestroy {
     ).subscribe(list => this.npcs = list);
   }
 
+  /**
+   * Charge les sessions de cette campagne ET la session active globale.
+   * La session globale conditionne si le bouton "Lancer" est activable
+   * (règle métier : une seule session active simultanément dans l'app).
+   */
+  private loadSessions(campaignId: string): void {
+    this.sessionService.getSessions(campaignId).pipe(
+      catchError(() => of([] as Session[]))
+    ).subscribe(list => this.sessions = list);
+
+    this.sessionService.getActiveSession().pipe(
+      catchError(() => of(null))
+    ).subscribe(active => this.activeSessionGlobal = active);
+  }
+
+  /** True si une session est active mais sur une AUTRE campagne (lancement bloqué). */
+  get isLaunchBlockedByOtherCampaign(): boolean {
+    return !!this.activeSessionGlobal
+      && !!this.campaign
+      && this.activeSessionGlobal.campaignId !== this.campaign.id;
+  }
+
+  /** Session active sur la campagne courante (le MJ joue déjà ici). */
+  get activeSessionOnCurrentCampaign(): Session | null {
+    if (!this.activeSessionGlobal || !this.campaign) return null;
+    return this.activeSessionGlobal.campaignId === this.campaign.id
+      ? this.activeSessionGlobal
+      : null;
+  }
+
+  startSession(): void {
+    if (!this.campaign || this.startingSession || this.isLaunchBlockedByOtherCampaign) return;
+    this.startingSession = true;
+    this.sessionService.startSession(this.campaign.id!).subscribe({
+      next: session => {
+        this.startingSession = false;
+        this.router.navigate(['/sessions', session.id]);
+      },
+      error: () => {
+        this.startingSession = false;
+        console.error('Erreur lors du lancement de la session');
+      }
+    });
+  }
+
+  openSession(session: Session): void {
+    this.router.navigate(['/sessions', session.id]);
+  }
+
   createCharacter(): void {
     if (!this.campaign) return;
     this.router.navigate(['/campaigns', this.campaign.id, 'characters', 'create']);