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/sessions/session-reference-panel/session-reference-panel.component.scss

@@ -0,0 +1,143 @@
+.reference-panel {
+  display: flex;
+  flex-direction: column;
+  background: #0d1117;
+  border: 1px solid #1f2937;
+  border-radius: 12px;
+  overflow: hidden;
+  height: 100%;
+  min-height: 0;
+}
+
+// ─────────────── Tabs ───────────────
+.ref-tabs {
+  display: flex;
+  background: #111827;
+  border-bottom: 1px solid #1f2937;
+}
+
+.ref-tab {
+  flex: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.35rem;
+  background: transparent;
+  color: #9ca3af;
+  border: none;
+  padding: 0.7rem 0.5rem;
+  font-size: 0.8rem;
+  font-weight: 500;
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+  transition: color 0.15s, border-color 0.15s, background 0.15s;
+
+  &:hover { color: #e5e7eb; background: rgba(108, 99, 255, 0.06); }
+
+  &--active {
+    color: #c4bdff;
+    border-bottom-color: #6c63ff;
+    background: rgba(108, 99, 255, 0.1);
+  }
+}
+
+.ref-content {
+  padding: 1rem;
+  overflow-y: auto;
+  flex: 1;
+  min-height: 0;
+}
+
+/*
+ * Onglet IA : on retire l'overflow du conteneur (le panneau de chat gère
+ * son propre scroll interne pour les messages) et on force display flex
+ * pour que l'enfant prenne toute la hauteur.
+ */
+.ref-content--fill {
+  display: flex;
+  overflow: hidden;
+
+  > app-session-ai-chat-panel {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+  }
+}
+
+// ─────────────── Listes (PJ/PNJ/Scènes) ───────────────
+.ref-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.ref-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+
+  h4 {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    color: #9ca3af;
+    font-size: 0.72rem;
+    text-transform: uppercase;
+    letter-spacing: 0.4px;
+    margin: 0 0 0.25rem 0;
+  }
+}
+
+.ref-subgroup {
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+  padding-left: 0.25rem;
+  margin-top: 0.35rem;
+
+  .ref-subgroup-title {
+    color: #6b7280;
+    font-size: 0.72rem;
+    margin-bottom: 0.15rem;
+  }
+}
+
+.ref-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.5rem;
+  background: #111827;
+  border: 1px solid #1f2937;
+  color: #e5e7eb;
+  font-size: 0.82rem;
+  text-align: left;
+  padding: 0.45rem 0.65rem;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: border-color 0.15s, background 0.15s;
+
+  &:hover { border-color: #6c63ff; background: #131c2e; }
+
+  &--nested { padding-left: 0.9rem; }
+
+  .ref-item-name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .ref-item-icon {
+    color: #6b7280;
+    flex-shrink: 0;
+  }
+}
+
+.loading-hint,
+.empty-hint {
+  color: #6b7280;
+  font-size: 0.8rem;
+  font-style: italic;
+  text-align: center;
+  margin: 0.5rem 0;
+}