From 291bf5e9735472fddec49f0fe5495cba569e9833 Mon Sep 17 00:00:00 2001
From: Etienne Delvarre <etiennedelvarre@Mac-mini-de-Etienne.local>
Date: Wed, 3 Jun 2026 11:19:54 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20statuts=20=E2=86=92=20tags,=20panneau?=
 =?UTF-8?q?=20fiche,=20personnages=20enrichis,=20ic=C3=B4nes=20SVG?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Statut absorbé par les tags (migration serveur, couleurs réservées, pas d'exclusivité)
- Dropdown Statut supprimé (frise, rédaction, modale)
- Filtre par tag ajouté en page Rédaction
- Panneau fiche sticky en Rédaction (résumé, intérêt narratif, implications, tags, personnages, commentaires)
- Fiches personnages : champs Origines et influences + Backstory (migration NocoDB)
- Liens scènes automatiques sur les fiches personnages
- Markdown (marked.js + DOMPurify) sur les fiches personnages
- Icônes SVG sidebar (étoile, frise, crayon, avatar, livre)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 public/index.html | 983 +++++++++++++++++++++++++++++++++++++++++-----
 server.js         | 214 +++++++++-
 2 files changed, 1107 insertions(+), 90 deletions(-)

diff --git a/public/index.html b/public/index.html
index e325327..33a51af 100644
--- a/public/index.html
+++ b/public/index.html
@@ -6,6 +6,8 @@
 <title>Tableau de bord — RdB</title>
 <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Lora:ital,wght@0,400;0,500;0,600;1,400&display=swap" rel="stylesheet">
 <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.6/Sortable.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/marked@15.0.0/marked.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/dompurify@3.2.4/dist/purify.min.js"></script>
 <script type="module">
 import { Editor, Mark } from 'https://esm.sh/@tiptap/core@2.11.7';
 import StarterKit from 'https://esm.sh/@tiptap/starter-kit@2.11.7';
@@ -100,7 +102,12 @@ window.dispatchEvent(new Event('tiptap-loaded'));
   .nav-item { padding: 12px 18px; margin: 2px 14px; border-radius: 10px; font-size: 17px; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; gap: 10px; }
   .nav-item:hover { background: var(--border); color: var(--text); }
   .nav-item.active { background: var(--border); color: var(--text); font-weight: 500; }
-  .nav-icon { width: 34px; height: 34px; font-size: 17px; background: var(--border); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
+  .nav-icon { width: 34px; height: 34px; background: var(--border); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
+  .nav-icon svg { width: 16px; height: 16px; stroke: var(--text-muted); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
+  .nav-item.active .nav-icon svg { stroke: var(--text); }
+  .nav-icon svg.fill-icon { fill: var(--text-muted); stroke: none; }
+  .nav-item.active .nav-icon svg.fill-icon { fill: var(--text); }
+  .nav-item.active .nav-icon .frise-dot { fill: var(--text); }
   .sidebar-footer { margin-top: auto; padding: 16px 22px; font-size: 13px; color: var(--text-hint); }
 
   /* Main */
@@ -165,6 +172,9 @@ window.dispatchEvent(new Event('tiptap-loaded'));
   .card.sortable-chosen { box-shadow: 0 6px 20px var(--shadow-hover); }
   .card-title { font-family: 'Playfair Display', serif; font-size: 18px; font-weight: 600; margin-bottom: 8px; color: var(--text); }
   .card-summary { font-size: 15px; color: var(--text-muted); line-height: 1.5; margin-bottom: 12px; display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; }
+  .card-summary p { margin: 0 0 4px; }
+  .card-summary ul, .card-summary ol { margin: 0 0 4px; padding-left: 18px; }
+  .card-summary li { margin-bottom: 2px; }
   .card-meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
   .card-badge { font-size: 13px; padding: 4px 10px; border-radius: 8px; font-weight: 500; }
   .card-likes { display: flex; gap: 4px; margin-left: auto; }
@@ -205,7 +215,7 @@ window.dispatchEvent(new Event('tiptap-loaded'));
   .card[data-acte="Après l'histoire"] { border-top-color: var(--plum); }
   .card[data-acte="En attente"] { border-top-color: var(--border); }
 
-  /* Status badge colors */
+  /* Status badge colors (now applied to tags) */
   .badge-validee { background: #eef3e8; color: #5a7a3a; }
   .badge-etudier { background: #f5f0e4; color: #a07850; }
   .badge-abandonnee { background: var(--border); color: var(--text-hint); text-decoration: line-through; }
@@ -214,6 +224,28 @@ window.dispatchEvent(new Event('tiptap-loaded'));
   .dark .badge-validee { background: #2a3520; color: #8aaa6a; }
   .dark .badge-conflit { background: #3a2020; color: #c06060; }
   .badge-perso { background: var(--bg); color: var(--text-muted); border: 1px solid var(--border); }
+  .badge-tag { background: #ede8e0; color: #6b5a4a; border: 1px solid #d4c9ba; font-size: 12px; }
+  .dark .badge-tag { background: #3a3020; color: #c4a870; border-color: #5a4a30; }
+
+  /* Personnages enrichis */
+  .perso-card-section { margin-top: 10px; }
+  .perso-card-section-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-hint); font-weight: 600; margin-bottom: 4px; }
+  .perso-card-text { font-size: 14px; color: var(--text-muted); line-height: 1.5; }
+  .perso-card-text p { margin: 0 0 4px; }
+  .perso-card-text ul, .perso-card-text ol { margin: 0 0 4px; padding-left: 18px; }
+  .perso-card-scenes { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border-light); }
+  .perso-card-scenes a { font-size: 13px; color: var(--accent); text-decoration: none; cursor: pointer; }
+  .perso-card-scenes a:hover { text-decoration: underline; color: var(--accent-hover); }
+  .perso-card-scenes-list { display: flex; flex-wrap: wrap; gap: 4px 10px; }
+
+  /* Tags input */
+  .tags-input-container { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-input); align-items: center; min-height: 36px; }
+  .tags-input-container:focus-within { border-color: var(--accent); }
+  .tags-input { border: none; outline: none; font-size: 13px; font-family: 'Lora', serif; color: var(--text); background: transparent; flex: 1; min-width: 80px; padding: 2px 0; }
+  .tag-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; background: #ede8e0; color: #6b5a4a; border-radius: 6px; font-size: 12px; font-family: 'Lora', serif; }
+  .dark .tag-chip { background: #3a3020; color: #c4a870; }
+  .tag-chip-remove { cursor: pointer; font-size: 14px; line-height: 1; opacity: 0.6; }
+  .tag-chip-remove:hover { opacity: 1; }
 
   /* ── Waiting zone (bottom) ── */
   .waiting-zone { border-top: 2px dashed var(--border); padding: 14px 24px; background: var(--bg-alt); flex-shrink: 0; }
@@ -361,6 +393,13 @@ window.dispatchEvent(new Event('tiptap-loaded'));
   .tag-add { padding: 8px 16px; border-radius: 20px; font-size: 14px; border: 1px dashed var(--border); background: transparent; color: var(--text-hint); cursor: pointer; font-family: 'Lora', serif; }
   .tag-add:hover { background: var(--bg-alt); color: var(--text); }
 
+  .list-item-desc-preview { font-size: 14px; color: var(--text-muted); line-height: 1.6; margin-top: 4px; }
+  .list-item-desc-preview ul, .list-item-desc-preview ol { margin: 4px 0 4px 20px; }
+  .list-item-desc-preview li { margin: 2px 0; }
+  .list-item-desc-preview p { margin: 4px 0; }
+  .list-item-desc-preview p:first-child { margin-top: 0; }
+  .list-item-desc-preview p:last-child { margin-bottom: 0; }
+
   .list-item-text { flex: 1; }
   .list-item-remove { display: none; cursor: pointer; color: var(--text-hint); font-size: 14px; margin-left: 8px; }
   .list-item:hover .list-item-remove { display: inline; }
@@ -370,7 +409,10 @@ window.dispatchEvent(new Event('tiptap-loaded'));
 
 
   /* ── Vue Rédaction ── */
-  .redaction-layout { display: flex; height: calc(100vh - 60px); }
+  .redaction-filters { background: var(--bg-alt); border-bottom: 1px solid var(--border); padding: 8px 28px; display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
+  .redaction-filters select, .redaction-filters input { padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; font-family: 'Lora', serif; color: var(--text); background: var(--bg-input); outline: none; }
+  .redaction-filters label { font-size: 12px; color: var(--text-hint); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
+  .redaction-layout { display: flex; height: calc(100vh - 100px); }
   .binder { width: 260px; flex-shrink: 0; background: var(--bg-alt); border-right: 1px solid var(--border); overflow-y: auto; padding: 16px 0; display: flex; flex-direction: column; }
   .binder-acte { padding: 0 12px; margin-bottom: 4px; }
   .binder-acte-title { font-family: 'Playfair Display', serif; font-size: 13px; font-weight: 700; color: var(--text-hint); text-transform: uppercase; letter-spacing: 0.5px; padding: 10px 12px 6px; cursor: pointer; user-select: none; }
@@ -380,10 +422,6 @@ window.dispatchEvent(new Event('tiptap-loaded'));
   .binder-scene.active { background: var(--accent); color: #fff; }
   .dark .binder-scene.active { color: var(--bg); }
   .binder-scene .scene-status { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
-  .binder-scene .scene-status.validee { background: #5a7a3a; }
-  .binder-scene .scene-status.a-etudier { background: #c4a030; }
-  .binder-scene .scene-status.abandonnee { background: #a08a76; }
-  .binder-scene .scene-status.en-conflit { background: #8b3030; }
   .binder-scene .scene-words { font-size: 11px; color: var(--text-light); margin-left: auto; white-space: nowrap; }
   .binder-scene.active .scene-words { color: rgba(255,255,255,0.6); }
 
@@ -402,6 +440,23 @@ window.dispatchEvent(new Event('tiptap-loaded'));
   .editor-body .tiptap li { margin-bottom: 4px; }
   .editor-body .tiptap hr { border: none; border-top: 1px solid var(--border); margin: 24px 0; }
   .editor-body .tiptap blockquote { border-left: 3px solid var(--accent); padding-left: 16px; color: var(--text-muted); font-style: italic; margin: 16px 0; }
+  /* Panneau fiche (intention) — sticky en haut de l'éditeur */
+  .editor-fiche { background: var(--bg-alt); border-bottom: 1px solid var(--border); font-size: 14px; color: var(--text-muted); line-height: 1.5; }
+  .editor-fiche-toggle { display: flex; align-items: center; gap: 8px; padding: 8px 32px; cursor: pointer; user-select: none; }
+  .editor-fiche-toggle:hover { background: var(--border-light); }
+  .editor-fiche-toggle-icon { font-size: 12px; transition: transform 0.2s; color: var(--text-hint); }
+  .editor-fiche-toggle-icon.open { transform: rotate(90deg); }
+  .editor-fiche-toggle-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-hint); font-weight: 600; }
+  .editor-fiche-content { padding: 0 32px 14px; display: none; }
+  .editor-fiche-content.open { display: block; }
+  .editor-fiche-field { margin-bottom: 10px; }
+  .editor-fiche-field-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-hint); font-weight: 600; margin-bottom: 3px; }
+  .editor-fiche-field-value { color: var(--text); }
+  .editor-fiche-field-value p { margin: 0 0 4px; }
+  .editor-fiche-field-value ul, .editor-fiche-field-value ol { margin: 0 0 4px; padding-left: 18px; }
+  .editor-fiche-tags { display: flex; gap: 4px; flex-wrap: wrap; }
+  .editor-fiche-persos { display: flex; gap: 6px; flex-wrap: wrap; }
+
   .editor-toolbar { display: flex; gap: 2px; padding: 8px 32px; border-bottom: 1px solid var(--border-light); background: var(--bg); }
   .editor-toolbar button { background: none; border: none; padding: 6px 10px; border-radius: 4px; cursor: pointer; font-size: 14px; color: var(--text-muted); font-family: 'Lora', serif; }
   .editor-toolbar button:hover { background: var(--bg-alt); color: var(--text); }
@@ -436,6 +491,32 @@ window.dispatchEvent(new Event('tiptap-loaded'));
 
   .toolbar-sep { width: 1px; background: var(--border); margin: 4px 6px; }
 
+  /* ── Pages Personnages & Ressources ── */
+  .page-content { padding: 28px; overflow-y: auto; height: calc(100vh - 60px); }
+  .page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
+  .page-header h2 { font-family: 'Playfair Display', serif; font-size: 28px; font-weight: 600; margin: 0; }
+
+  .perso-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
+  .perso-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 20px; cursor: pointer; transition: box-shadow 0.15s; }
+  .perso-card:hover { box-shadow: 0 4px 14px var(--shadow-hover); }
+  .perso-card-name { font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 600; margin-bottom: 4px; }
+  .perso-card-role { font-size: 14px; color: var(--accent); margin-bottom: 8px; font-weight: 500; }
+  .perso-card-desc { font-size: 14px; color: var(--text-muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
+  .perso-card-tags { margin-top: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
+
+  .res-filters { display: flex; gap: 12px; align-items: center; margin-bottom: 20px; flex-wrap: wrap; }
+  .res-filters select, .res-filters input { padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; font-family: 'Lora', serif; color: var(--text); background: var(--bg-input); outline: none; }
+  .res-filters label { font-size: 12px; color: var(--text-hint); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
+  .res-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
+  .res-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; cursor: pointer; transition: box-shadow 0.15s; }
+  .res-card:hover { box-shadow: 0 4px 14px var(--shadow-hover); }
+  .res-card-img { width: 100%; height: 160px; object-fit: cover; background: var(--bg-alt); }
+  .res-card-body { padding: 14px 16px; }
+  .res-card-title { font-family: 'Playfair Display', serif; font-size: 16px; font-weight: 600; margin-bottom: 4px; }
+  .res-card-cat { font-size: 12px; color: var(--accent); font-weight: 500; margin-bottom: 6px; }
+  .res-card-desc { font-size: 13px; color: var(--text-muted); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
+  .res-card-tags { margin-top: 8px; display: flex; gap: 4px; flex-wrap: wrap; }
+
   /* Responsive */
   @media (max-width: 768px) {
     .sidebar { display: none; }
@@ -453,9 +534,11 @@ window.dispatchEvent(new Event('tiptap-loaded'));
   <div class="sidebar">
     <div class="sidebar-logo">Tableau de bord</div>
     <div class="sidebar-project">Projet RdB</div>
-    <div class="nav-item" data-view="vision" onclick="switchView('vision')"><span class="nav-icon">&#9733;</span> Vision</div>
-    <div class="nav-item" data-view="frise" onclick="switchView('frise')"><span class="nav-icon">&#9868;</span> Frise</div>
-    <div class="nav-item" data-view="redaction" onclick="switchView('redaction')"><span class="nav-icon">&#9998;</span> Rédaction</div>
+    <div class="nav-item" data-view="vision" onclick="switchView('vision')"><span class="nav-icon"><svg viewBox="0 0 24 24"><polygon points="12,2 15.1,8.3 22,9.2 17,14.1 18.2,21 12,17.8 5.8,21 7,14.1 2,9.2 8.9,8.3" stroke-width="1.6" fill="none"/></svg></span> Vision</div>
+    <div class="nav-item" data-view="frise" onclick="switchView('frise')"><span class="nav-icon"><svg viewBox="0 0 24 24"><line x1="3" y1="12" x2="21" y2="12"/><circle cx="3" cy="12" r="3"/><circle cx="12" cy="12" r="3"/><circle cx="21" cy="12" r="3"/></svg></span> Frise</div>
+    <div class="nav-item" data-view="redaction" onclick="switchView('redaction')"><span class="nav-icon"><svg viewBox="0 0 24 24"><path d="M17 3l4 4L7 21H3v-4L17 3z"/><line x1="14" y1="6" x2="18" y2="10"/></svg></span> Rédaction</div>
+    <div class="nav-item" data-view="personnages" onclick="switchView('personnages')"><span class="nav-icon"><svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8"/></svg></span> Personnages</div>
+    <div class="nav-item" data-view="ressources" onclick="switchView('ressources')"><span class="nav-icon"><svg viewBox="0 0 24 24"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg></span> Ressources</div>
     <div class="sidebar-footer">Etienne & Myriam</div>
   </div>
   <div class="main">
@@ -476,17 +559,22 @@ window.dispatchEvent(new Event('tiptap-loaded'));
           <select id="filter-perso" onchange="applyFilters()"><option value="">Tous</option></select>
         </div>
         <div class="filter-group">
-          <label>Statut</label>
-          <select id="filter-statut" onchange="applyFilters()"><option value="">Tous</option></select>
-        </div>
-        <div class="filter-group">
-          <label>Type</label>
-          <select id="filter-type" onchange="applyFilters()"><option value="">Tous</option></select>
+          <label>Tag</label>
+          <select id="filter-tag" onchange="applyFilters()"><option value="">Tous</option></select>
         </div>
         <div class="filter-group">
           <label>Recherche</label>
           <input type="text" id="filter-search" placeholder="Mot-cle..." oninput="applyFilters()">
         </div>
+        <div class="filter-group">
+          <label>Tri</label>
+          <select id="filter-sort" onchange="applyFilters()">
+            <option value="ordre">Ordre (défaut)</option>
+            <option value="date-desc">Plus récentes</option>
+            <option value="date-asc">Plus anciennes</option>
+            <option value="alpha">Alphabétique</option>
+          </select>
+        </div>
         <button class="btn-clear-filters" onclick="clearFilters()">Effacer</button>
       </div>
       <div class="frise-wrapper">
@@ -557,6 +645,20 @@ window.dispatchEvent(new Event('tiptap-loaded'));
     </div>
     <!-- ══ VUE RÉDACTION ══ -->
     <div class="view" id="view-redaction">
+      <div class="redaction-filters">
+        <div class="filter-group">
+          <label>Personnage</label>
+          <select id="red-filter-perso" onchange="buildBinder()"><option value="">Tous</option></select>
+        </div>
+        <div class="filter-group">
+          <label>Tag</label>
+          <select id="red-filter-tag" onchange="buildBinder()"><option value="">Tous</option></select>
+        </div>
+        <div class="filter-group">
+          <label>Recherche</label>
+          <input type="text" id="red-filter-search" placeholder="Mot-clé..." oninput="buildBinder()">
+        </div>
+      </div>
       <div class="redaction-layout">
         <div class="binder" id="binder"></div>
         <div class="editor-pane" id="editor-pane">
@@ -566,6 +668,13 @@ window.dispatchEvent(new Event('tiptap-loaded'));
               <div class="editor-scene-title" id="editor-title"></div>
               <div class="editor-scene-meta" id="editor-meta"></div>
             </div>
+            <div class="editor-fiche" id="editor-fiche">
+              <div class="editor-fiche-toggle" onclick="toggleFiche()">
+                <span class="editor-fiche-toggle-icon" id="fiche-toggle-icon">&#9656;</span>
+                <span class="editor-fiche-toggle-label">Fiche</span>
+              </div>
+              <div class="editor-fiche-content" id="editor-fiche-content"></div>
+            </div>
             <div class="editor-toolbar" id="editor-toolbar"></div>
             <div class="editor-body"><div id="editor-content"></div></div>
             <div class="word-count" id="word-count"></div>
@@ -573,6 +682,38 @@ window.dispatchEvent(new Event('tiptap-loaded'));
         </div>
       </div>
     </div>
+    <!-- ══ VUE PERSONNAGES ══ -->
+    <div class="view" id="view-personnages">
+      <div class="page-content">
+        <div class="page-header">
+          <h2>Personnages</h2>
+          <button class="btn-new" onclick="openPersoModal()">+ Nouveau personnage</button>
+        </div>
+        <div class="perso-grid" id="perso-grid"></div>
+      </div>
+    </div>
+
+    <!-- ══ VUE RESSOURCES ══ -->
+    <div class="view" id="view-ressources">
+      <div class="page-content">
+        <div class="page-header">
+          <h2>Ressources</h2>
+          <button class="btn-new" onclick="openResModal()">+ Nouvelle ressource</button>
+        </div>
+        <div class="res-filters">
+          <div class="filter-group">
+            <label>Catégorie</label>
+            <select id="res-filter-cat" onchange="renderRessources()"><option value="">Toutes</option></select>
+          </div>
+          <div class="filter-group">
+            <label>Recherche</label>
+            <input type="text" id="res-filter-search" placeholder="Mot-clé..." oninput="renderRessources()">
+          </div>
+        </div>
+        <div class="res-grid" id="res-grid"></div>
+      </div>
+    </div>
+
     <div class="editor-saving" id="editor-saving">Enregistré</div>
     <div class="comment-popup" id="comment-popup" style="display:none;">
       <div class="comment-popup-author" id="comment-popup-author"></div>
@@ -600,14 +741,10 @@ window.dispatchEvent(new Event('tiptap-loaded'));
       <div class="field field-title">
         <input type="text" id="f-title" placeholder="Titre de l'idee...">
       </div>
-      <div class="field-row">
-        <div class="field">
-          <label>Type</label>
-          <select id="f-type"><option value="">—</option></select>
-        </div>
-        <div class="field">
-          <label>Statut</label>
-          <select id="f-statut"><option value="">—</option></select>
+      <div class="field">
+        <label>Tags</label>
+        <div class="tags-input-container" id="f-tags">
+          <input type="text" class="tags-input" id="f-tags-input" placeholder="Ajouter un tag..." onkeydown="if(event.key==='Enter'){event.preventDefault();addTag()}">
         </div>
       </div>
       <div class="field-row">
@@ -659,6 +796,52 @@ window.dispatchEvent(new Event('tiptap-loaded'));
   </div>
 </div>
 
+<!-- Modale Personnage -->
+<div class="modal-overlay" id="perso-modal">
+  <div class="modal">
+    <div class="modal-header">
+      <span style="font-family:'Playfair Display',serif;font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--text-hint);" id="perso-modal-label">Nouveau personnage</span>
+      <button class="modal-close" onclick="closePersoModal()">&times;</button>
+    </div>
+    <div class="modal-body">
+      <div class="field field-title"><input type="text" id="fp-nom" placeholder="Nom du personnage..."></div>
+      <div class="field"><label>Rôle</label><input type="text" id="fp-role" placeholder="Héros, antagoniste, allié..." style="width:100%;padding:8px 12px;border:1px solid var(--border);border-radius:8px;font-size:14px;font-family:'Lora',serif;color:var(--text);background:var(--bg-input);"></div>
+      <div class="field"><label>Description</label><textarea id="fp-desc" placeholder="Personnalité, arc, motivations..." rows="4"></textarea></div>
+      <div class="field"><label>Origines et influences</label><textarea id="fp-origines" placeholder="D'où vient le personnage, quels personnages de fiction l'ont inspiré..." rows="3"></textarea></div>
+      <div class="field"><label>Backstory</label><textarea id="fp-backstory" placeholder="Son passé, ce qui l'a façonné avant le début de l'histoire..." rows="4"></textarea></div>
+      <div class="field"><label>Tags</label><input type="text" id="fp-tags" placeholder="Tags séparés par des virgules..." style="width:100%;padding:8px 12px;border:1px solid var(--border);border-radius:8px;font-size:14px;font-family:'Lora',serif;color:var(--text);background:var(--bg-input);"></div>
+      <div class="modal-actions">
+        <button class="btn-delete" id="btn-delete-perso" onclick="deletePerso()" style="display:none;">Supprimer</button>
+        <button class="btn-save" onclick="savePerso()">Enregistrer</button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Modale Ressource -->
+<div class="modal-overlay" id="res-modal">
+  <div class="modal">
+    <div class="modal-header">
+      <span style="font-family:'Playfair Display',serif;font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--text-hint);" id="res-modal-label">Nouvelle ressource</span>
+      <button class="modal-close" onclick="closeResModal()">&times;</button>
+    </div>
+    <div class="modal-body">
+      <div class="field field-title"><input type="text" id="fr-titre" placeholder="Titre de la ressource..."></div>
+      <div class="field-row">
+        <div class="field"><label>Catégorie</label><select id="fr-cat"><option value="">—</option><option>Image</option><option>Lien</option><option>Carte</option><option>Note</option><option>Référence</option></select></div>
+        <div class="field"><label>Tags</label><input type="text" id="fr-tags" placeholder="Tags séparés par des virgules..." style="width:100%;padding:8px 12px;border:1px solid var(--border);border-radius:8px;font-size:14px;font-family:'Lora',serif;color:var(--text);background:var(--bg-input);"></div>
+      </div>
+      <div class="field"><label>URL</label><input type="text" id="fr-url" placeholder="https://..." style="width:100%;padding:8px 12px;border:1px solid var(--border);border-radius:8px;font-size:14px;font-family:'Lora',serif;color:var(--text);background:var(--bg-input);"></div>
+      <div class="field"><label>Image</label><input type="file" id="fr-image-input" accept="image/*" onchange="previewResImage(this)" style="font-family:'Lora',serif;font-size:13px;"><div id="fr-image-preview" style="margin-top:8px;"></div></div>
+      <div class="field"><label>Description</label><textarea id="fr-desc" placeholder="Notes, contexte..." rows="4"></textarea></div>
+      <div class="modal-actions">
+        <button class="btn-delete" id="btn-delete-res" onclick="deleteRes()" style="display:none;">Supprimer</button>
+        <button class="btn-save" onclick="saveRes()">Enregistrer</button>
+      </div>
+    </div>
+  </div>
+</div>
+
 <script>
 const ACTES_FRISE = ["Avant l'histoire", "Acte 1", "Acte 2", "Acte 3", "Après l'histoire"];
 let records = [];
@@ -673,16 +856,24 @@ function switchView(name) {
   try { localStorage.setItem('tdb-rdb-view', name); } catch(e) {}
   const topTitle = document.querySelector('.topbar-title');
   const btnNew = document.querySelector('.btn-new');
+  // Hide topbar new button (each page has its own)
+  const topBtnNew = document.querySelector('.topbar-right > .btn-new');
+  if (topBtnNew) topBtnNew.style.display = 'none';
+
   if (name === 'vision') {
     topTitle.textContent = 'Vision';
-    if (btnNew) btnNew.style.display = 'none';
   } else if (name === 'redaction') {
     topTitle.textContent = 'Rédaction';
-    if (btnNew) btnNew.style.display = 'none';
     buildBinder();
+  } else if (name === 'personnages') {
+    topTitle.textContent = 'Personnages';
+    loadPersonnages();
+  } else if (name === 'ressources') {
+    topTitle.textContent = 'Ressources';
+    loadRessources();
   } else {
     topTitle.textContent = 'Frise';
-    if (btnNew) btnNew.style.display = '';
+    if (topBtnNew) topBtnNew.style.display = '';
   }
 }
 
@@ -710,26 +901,52 @@ function populateFilterOptions() {
   });
   persoSel.value = curPerso;
 
-  // Statut and Type from column options
-  ['Statut', 'Type'].forEach(name => {
-    const sel = document.getElementById(`filter-${name.toLowerCase()}`);
-    const cur = sel.value;
-    sel.innerHTML = '<option value="">Tous</option>';
-    if (columns[name]) {
-      columns[name].options.forEach(o => {
-        const opt = document.createElement('option');
-        opt.value = o; opt.textContent = o;
-        sel.appendChild(opt);
-      });
-    }
-    sel.value = cur;
+  // Tags from data (free text, not from column options)
+  const tagSet = new Set();
+  records.forEach(r => {
+    if (r.Tags) r.Tags.split(',').forEach(t => { const trimmed = t.trim(); if (trimmed) tagSet.add(trimmed); });
   });
+  const tagSel = document.getElementById('filter-tag');
+  const curTag = tagSel.value;
+  tagSel.innerHTML = '<option value="">Tous</option>';
+  [...tagSet].sort((a, b) => a.localeCompare(b, 'fr')).forEach(t => {
+    const opt = document.createElement('option');
+    opt.value = t; opt.textContent = t;
+    tagSel.appendChild(opt);
+  });
+  tagSel.value = curTag;
+
+  // Populate Rédaction filters (same data)
+  const redPersoSel = document.getElementById('red-filter-perso');
+  if (redPersoSel) {
+    const curRP = redPersoSel.value;
+    while (redPersoSel.options.length > 1) redPersoSel.remove(1);
+    [...persoSet].sort().forEach(p => {
+      const opt = document.createElement('option');
+      opt.value = p; opt.textContent = p;
+      redPersoSel.appendChild(opt);
+    });
+    redPersoSel.value = curRP;
+  }
+  const redTagSel = document.getElementById('red-filter-tag');
+  if (redTagSel) {
+    const curRT = redTagSel.value;
+    while (redTagSel.options.length > 1) redTagSel.remove(1);
+    [...tagSet].sort((a, b) => a.localeCompare(b, 'fr')).forEach(t => {
+      const opt = document.createElement('option');
+      opt.value = t; opt.textContent = t;
+      redTagSel.appendChild(opt);
+    });
+    redTagSel.value = curRT;
+  }
 }
 
 function applyFilters() {
+  // Re-render frise if sort changed (sort is applied during render)
+  renderFrise();
+
   const perso = document.getElementById('filter-perso').value;
-  const statut = document.getElementById('filter-statut').value;
-  const type = document.getElementById('filter-type').value;
+  const tag = document.getElementById('filter-tag').value;
   const search = document.getElementById('filter-search').value.toLowerCase().trim();
 
   document.querySelectorAll('.card').forEach(card => {
@@ -739,8 +956,7 @@ function applyFilters() {
 
     let visible = true;
     if (perso && !(r.Personnage || '').split(',').map(s => s.trim()).includes(perso)) visible = false;
-    if (statut && r.Statut !== statut) visible = false;
-    if (type && r.Type !== type) visible = false;
+    if (tag && !(r.Tags || '').split(',').map(s => s.trim()).includes(tag)) visible = false;
     if (search) {
       const haystack = [r.Title, r['Résumé'], r.Personnage, r['Intérêt narratif'], r.Implications, r.Origine].filter(Boolean).join(' ').toLowerCase();
       if (!haystack.includes(search)) visible = false;
@@ -759,23 +975,22 @@ function applyFilters() {
 
 function clearFilters() {
   document.getElementById('filter-perso').value = '';
-  document.getElementById('filter-statut').value = '';
-  document.getElementById('filter-type').value = '';
+  document.getElementById('filter-tag').value = '';
   document.getElementById('filter-search').value = '';
+  document.getElementById('filter-sort').value = 'ordre';
   applyFilters();
 }
 
-const statusClass = s => {
-  if (!s) return '';
-  const map = { 'À étudier': 'badge-etudier', 'Validée': 'badge-validee', 'Abandonnée': 'badge-abandonnee', 'En conflit': 'badge-conflit' };
-  return map[s] || 'badge-etudier';
-};
+const STATUS_TAGS = { 'À étudier': 'badge-etudier', 'Validée': 'badge-validee', 'Abandonnée': 'badge-abandonnee', 'En conflit': 'badge-conflit' };
+const STATUS_COLORS = { 'À étudier': '#c4a030', 'Validée': '#5a7a3a', 'Abandonnée': '#a08a76', 'En conflit': '#8b3030' };
+function tagBadgeClass(tagName) {
+  return STATUS_TAGS[tagName] || 'badge-tag';
+}
 
 function makeCard(r) {
   const card = document.createElement('div');
   card.className = 'card';
   card.dataset.id = r.Id;
-  card.dataset.type = r.Type || '';
   card.dataset.acte = r.Acte || 'En attente';
   card.onclick = () => openEdit(r.Id);
 
@@ -790,10 +1005,9 @@ function makeCard(r) {
 
   card.innerHTML = `
     <div class="card-title">${esc(r.Title || '')}</div>
-    ${r['Résumé'] ? `<div class="card-summary">${esc(r['Résumé'])}</div>` : ''}
+    ${r['Résumé'] ? `<div class="card-summary">${renderMarkdown(r['Résumé'])}</div>` : ''}
     <div class="card-meta">
-      ${r.Statut ? `<span class="card-badge ${statusClass(r.Statut)}">${esc(r.Statut)}</span>` : ''}
-      ${r.Type ? `<span class="card-badge badge-perso">${esc(r.Type)}</span>` : ''}
+      ${(r.Tags || '').split(',').filter(t => t.trim()).map(t => `<span class="card-badge ${tagBadgeClass(t.trim())}">${esc(t.trim())}</span>`).join('')}
       ${persos}
       ${commentBadge}
       <span class="card-likes">
@@ -894,6 +1108,13 @@ function toggleCommentAuthor() {
   btn.textContent = commentAuthor === 'E' ? 'Etienne' : 'Myriam';
 }
 
+function sortRecords(a, b, mode) {
+  if (mode === 'date-desc') return new Date(b.CreatedAt || 0) - new Date(a.CreatedAt || 0);
+  if (mode === 'date-asc') return new Date(a.CreatedAt || 0) - new Date(b.CreatedAt || 0);
+  if (mode === 'alpha') return (a.Title || '').localeCompare(b.Title || '', 'fr');
+  return (a.Ordre || 0) - (b.Ordre || 0);
+}
+
 function renderFrise() {
   const area = document.getElementById('timeline-area');
   area.innerHTML = '';
@@ -902,10 +1123,12 @@ function renderFrise() {
   const container = document.createElement('div');
   container.style.cssText = 'display:flex; min-width:min-content;';
 
+  const sortMode = document.getElementById('filter-sort')?.value || 'ordre';
+
   ACTES_FRISE.forEach(acte => {
     const acteRecords = records
       .filter(r => (r.Acte || 'En attente') === acte)
-      .sort((a, b) => (a.Ordre || 0) - (b.Ordre || 0));
+      .sort((a, b) => sortRecords(a, b, sortMode));
 
     const section = document.createElement('div');
     section.className = 'acte-section';
@@ -946,7 +1169,7 @@ function renderFrise() {
   waitingCards.innerHTML = '';
   const waitingRecords = records
     .filter(r => !r.Acte || r.Acte === 'En attente')
-    .sort((a, b) => (a.Ordre || 0) - (b.Ordre || 0));
+    .sort((a, b) => sortRecords(a, b, sortMode));
 
   waitingRecords.forEach(r => waitingCards.appendChild(makeCard(r)));
 
@@ -994,10 +1217,10 @@ async function handleDrop(evt) {
 }
 
 function populateSelects() {
-  ['Type', 'Statut', 'Acte'].forEach(name => {
+  ['Acte'].forEach(name => {
     const sel = document.getElementById(`f-${name.toLowerCase()}`);
     if (!sel || !columns[name]) return;
-    sel.innerHTML = '<option value="">—</option>';
+    while (sel.options.length > 1) sel.remove(1);
     columns[name].options.forEach(o => {
       const opt = document.createElement('option');
       opt.value = o; opt.textContent = o;
@@ -1052,8 +1275,8 @@ function openNew() {
   editingId = null;
   document.getElementById('modal-label').textContent = 'Nouvelle idee';
   document.getElementById('f-title').value = '';
-  document.getElementById('f-type').value = '';
-  document.getElementById('f-statut').value = 'À étudier';
+  renderModalTags(['À étudier']);
+  document.getElementById('f-tags-input').value = '';
   document.getElementById('f-acte').value = 'En attente';
   document.getElementById('f-resume').value = '';
   document.getElementById('f-interet').value = '';
@@ -1074,8 +1297,8 @@ function openEdit(id) {
   editingId = id;
   document.getElementById('modal-label').textContent = 'Modifier';
   document.getElementById('f-title').value = r.Title || '';
-  document.getElementById('f-type').value = r.Type || '';
-  document.getElementById('f-statut').value = r.Statut || '';
+  renderModalTags((r.Tags || '').split(',').map(s => s.trim()).filter(Boolean));
+  document.getElementById('f-tags-input').value = '';
   document.getElementById('f-acte').value = r.Acte || '';
   document.getElementById('f-resume').value = r['Résumé'] || '';
   document.getElementById('f-interet').value = r['Intérêt narratif'] || '';
@@ -1110,8 +1333,7 @@ async function saveCard() {
 
   const data = {
     Title: document.getElementById('f-title').value,
-    Type: document.getElementById('f-type').value || null,
-    Statut: document.getElementById('f-statut').value || null,
+    Tags: getModalTags().join(', ') || null,
     Acte: document.getElementById('f-acte').value || 'En attente',
     Personnage: persos.join(',') || null,
     'Résumé': document.getElementById('f-resume').value || null,
@@ -1159,7 +1381,6 @@ async function loadData() {
   columns = await colRes.json();
   populateSelects();
   populateFilterOptions();
-  renderFrise();
   applyFilters();
   // Restore last active view
   try {
@@ -1174,11 +1395,59 @@ function esc(s) {
   return d.innerHTML;
 }
 
+// Sanitize HTML string and return a DocumentFragment (safe for appendChild)
+function createSanitizedFragment(html) {
+  const clean = typeof DOMPurify !== 'undefined' ? DOMPurify.sanitize(html) : esc(html);
+  const tpl = document.createElement('template');
+  tpl.innerHTML = clean;
+  return tpl.content;
+}
+
+// Render Markdown to sanitized HTML string
+function renderMarkdown(text) {
+  if (!text) return '';
+  const raw = typeof marked !== 'undefined' ? marked.parse(text) : esc(text);
+  return typeof DOMPurify !== 'undefined' ? DOMPurify.sanitize(raw) : esc(text);
+}
+
+// ── Tags input ──
+function getModalTags() {
+  return [...document.querySelectorAll('#f-tags .tag-chip')].map(c => c.dataset.tag);
+}
+
+function renderModalTags(tags) {
+  const container = document.getElementById('f-tags');
+  container.querySelectorAll('.tag-chip').forEach(c => c.remove());
+  const input = document.getElementById('f-tags-input');
+  (tags || []).forEach(tag => {
+    const chip = document.createElement('span');
+    chip.className = 'tag-chip';
+    chip.dataset.tag = tag;
+    chip.innerHTML = `${esc(tag)}<span class="tag-chip-remove" onclick="this.parentElement.remove()">&times;</span>`;
+    container.insertBefore(chip, input);
+  });
+}
+
+function addTag() {
+  const input = document.getElementById('f-tags-input');
+  const val = input.value.trim();
+  if (!val) return;
+  const current = getModalTags();
+  if (!current.includes(val)) {
+    renderModalTags([...current, val]);
+  }
+  input.value = '';
+}
+
 document.getElementById('modal').addEventListener('click', e => {
   if (e.target === document.getElementById('modal')) closeModal();
 });
 document.addEventListener('keydown', e => {
-  if (e.key === 'Escape') closeModal();
+  if (e.key === 'Escape') {
+    closeModal();
+    if (typeof closePersoModal === 'function') closePersoModal();
+    if (typeof closeResModal === 'function') closeResModal();
+  }
 });
 
 loadData();
@@ -1344,14 +1613,41 @@ function renderList(section, containerId, cssClass) {
     const descEl = document.createElement('div');
     descEl.className = 'list-item-desc';
     descEl.contentEditable = 'true';
-    descEl.textContent = item.desc || '';
-    descEl.style.display = hasDesc ? 'block' : 'none';
-    descEl.setAttribute('data-placeholder', 'Développer...');
+    descEl.setAttribute('data-placeholder', 'Développer... (Markdown : - item pour les listes)');
+    descEl.style.display = 'none';
+    // Render Markdown preview (sanitized)
+    const descPreview = document.createElement('div');
+    descPreview.className = 'list-item-desc-preview';
+    descPreview.style.display = 'none';
+    if (hasDesc) {
+      const rawHtml = typeof marked !== 'undefined' ? marked.parse(item.desc) : esc(item.desc);
+      descPreview.textContent = '';
+      descPreview.appendChild(createSanitizedFragment(rawHtml));
+      descPreview.style.display = 'block';
+    }
+    descPreview.onclick = () => {
+      descPreview.style.display = 'none';
+      descEl.style.display = 'block';
+      descEl.textContent = items[i].desc || '';
+      descEl.focus();
+    };
     descEl.addEventListener('blur', () => {
       const v = descEl.textContent.trim();
       if (v !== (items[i].desc || '')) { items[i].desc = v; saveVisionSection(section, JSON.stringify(items)); }
-      if (!v) { descEl.style.display = 'none'; div.classList.remove('expanded'); }
+      descEl.style.display = 'none';
+      if (v) {
+        const rawHtml = typeof marked !== 'undefined' ? marked.parse(v) : esc(v);
+        descPreview.textContent = '';
+        descPreview.appendChild(createSanitizedFragment(rawHtml));
+        descPreview.style.display = 'block';
+      } else {
+        descPreview.style.display = 'none';
+        div.classList.remove('expanded');
+        expandBtn.textContent = '▸';
+        expandBtn.title = 'Développer';
+      }
     });
+    content.appendChild(descPreview);
     content.appendChild(descEl);
 
     const bullet = document.createElement('span');
@@ -1362,14 +1658,33 @@ function renderList(section, containerId, cssClass) {
 
     const expandBtn = document.createElement('span');
     expandBtn.className = 'list-item-expand';
-    expandBtn.textContent = hasDesc ? '' : 'développer →';
-    expandBtn.style.display = hasDesc ? 'none' : '';
+    expandBtn.textContent = hasDesc ? '▾' : '▸';
+    expandBtn.title = hasDesc ? 'Réduire' : 'Développer';
+    expandBtn.style.cursor = 'pointer';
     expandBtn.onclick = () => {
-      descEl.style.display = 'block';
-      div.classList.add('expanded');
-      expandBtn.style.display = 'none';
-      descEl.focus();
+      if (div.classList.contains('expanded')) {
+        div.classList.remove('expanded');
+        descPreview.style.display = 'none';
+        descEl.style.display = 'none';
+        expandBtn.textContent = '▸';
+        expandBtn.title = 'Développer';
+      } else {
+        div.classList.add('expanded');
+        if (items[i].desc) {
+          const rawHtml = typeof marked !== 'undefined' ? marked.parse(items[i].desc) : esc(items[i].desc);
+          descPreview.textContent = '';
+          descPreview.appendChild(createSanitizedFragment(rawHtml));
+          descPreview.style.display = 'block';
+        } else {
+          descEl.style.display = 'block';
+          descEl.textContent = '';
+          descEl.focus();
+        }
+        expandBtn.textContent = '▾';
+        expandBtn.title = 'Réduire';
+      }
     };
+    if (hasDesc) div.classList.add('expanded');
 
     const removeBtn = document.createElement('span');
     removeBtn.className = 'list-item-remove';
@@ -1459,8 +1774,9 @@ function renderMoodboard() {
         window.addEventListener('mousemove', onMove);
         window.addEventListener('mouseup', onUp);
       });
-      // Scroll to zoom
+      // Ctrl+scroll to zoom (prevents accidental zoom)
       imgDiv.addEventListener('wheel', (e) => {
+        if (!e.ctrlKey && !e.metaKey) return;
         e.preventDefault();
         const delta = e.deltaY > 0 ? -10 : 10;
         item.zoom = Math.max(100, Math.min(400, (item.zoom ?? 100) + delta));
@@ -1742,6 +2058,366 @@ async function loadVision() {
 
 loadVision();
 
+// ══════════════════════════════════════════════════════
+// ══ PERSONNAGES ══
+// ══════════════════════════════════════════════════════
+
+let personnages = [];
+let editingPersoId = null;
+
+async function loadPersonnages() {
+  try {
+    const res = await fetch('/api/personnages');
+    if (res.status === 401) return;
+    const data = await res.json();
+    personnages = data.list || [];
+    renderPersonnages();
+  } catch (e) { console.error('Personnages load error:', e); }
+}
+
+function renderPersonnages() {
+  const grid = document.getElementById('perso-grid');
+  grid.textContent = '';
+  personnages.forEach(p => {
+    const card = document.createElement('div');
+    card.className = 'perso-card';
+    card.onclick = () => openPersoEdit(p.Id);
+
+    // Header
+    const nameEl = document.createElement('div');
+    nameEl.className = 'perso-card-name';
+    nameEl.textContent = p.Nom || '';
+    card.appendChild(nameEl);
+
+    if (p.Role) {
+      const roleEl = document.createElement('div');
+      roleEl.className = 'perso-card-role';
+      roleEl.textContent = p.Role;
+      card.appendChild(roleEl);
+    }
+
+    // Description (markdown)
+    if (p.Description) {
+      const descEl = document.createElement('div');
+      descEl.className = 'perso-card-desc perso-card-text';
+      descEl.appendChild(createSanitizedFragment(renderMarkdown(p.Description)));
+      card.appendChild(descEl);
+    }
+
+    // Origines et influences (markdown)
+    if (p.Origines) {
+      const section = document.createElement('div');
+      section.className = 'perso-card-section';
+      const title = document.createElement('div');
+      title.className = 'perso-card-section-title';
+      title.textContent = 'Origines et influences';
+      section.appendChild(title);
+      const text = document.createElement('div');
+      text.className = 'perso-card-text';
+      text.appendChild(createSanitizedFragment(renderMarkdown(p.Origines)));
+      section.appendChild(text);
+      card.appendChild(section);
+    }
+
+    // Backstory (markdown)
+    if (p.Backstory) {
+      const section = document.createElement('div');
+      section.className = 'perso-card-section';
+      const title = document.createElement('div');
+      title.className = 'perso-card-section-title';
+      title.textContent = 'Backstory';
+      section.appendChild(title);
+      const text = document.createElement('div');
+      text.className = 'perso-card-text';
+      text.appendChild(createSanitizedFragment(renderMarkdown(p.Backstory)));
+      section.appendChild(text);
+      card.appendChild(section);
+    }
+
+    // Tags
+    const tagList = (p.Tags || '').split(',').filter(t => t.trim());
+    if (tagList.length) {
+      const tagsEl = document.createElement('div');
+      tagsEl.className = 'perso-card-tags';
+      tagList.forEach(t => {
+        const badge = document.createElement('span');
+        badge.className = `card-badge ${tagBadgeClass(t.trim())}`;
+        badge.textContent = t.trim();
+        tagsEl.appendChild(badge);
+      });
+      card.appendChild(tagsEl);
+    }
+
+    // Liens scènes automatiques
+    const linkedScenes = records.filter(r =>
+      r.Personnage && r.Personnage.split(',').map(s => s.trim()).includes(p.Nom)
+    );
+    if (linkedScenes.length) {
+      const scenesEl = document.createElement('div');
+      scenesEl.className = 'perso-card-scenes';
+      const scenesTitle = document.createElement('div');
+      scenesTitle.className = 'perso-card-section-title';
+      scenesTitle.textContent = `Scènes (${linkedScenes.length})`;
+      scenesEl.appendChild(scenesTitle);
+      const list = document.createElement('div');
+      list.className = 'perso-card-scenes-list';
+      linkedScenes.forEach(scene => {
+        const link = document.createElement('a');
+        link.textContent = scene.Title;
+        link.onclick = (e) => { e.stopPropagation(); switchView('frise'); setTimeout(() => openEdit(scene.Id), 200); };
+        list.appendChild(link);
+      });
+      scenesEl.appendChild(list);
+      card.appendChild(scenesEl);
+    }
+
+    grid.appendChild(card);
+  });
+}
+
+function openPersoModal() {
+  editingPersoId = null;
+  document.getElementById('perso-modal-label').textContent = 'Nouveau personnage';
+  document.getElementById('fp-nom').value = '';
+  document.getElementById('fp-role').value = '';
+  document.getElementById('fp-desc').value = '';
+  document.getElementById('fp-origines').value = '';
+  document.getElementById('fp-backstory').value = '';
+  document.getElementById('fp-tags').value = '';
+  document.getElementById('btn-delete-perso').style.display = 'none';
+  document.getElementById('perso-modal').classList.add('open');
+}
+
+function openPersoEdit(id) {
+  const p = personnages.find(x => x.Id === id);
+  if (!p) return;
+  editingPersoId = id;
+  document.getElementById('perso-modal-label').textContent = 'Modifier';
+  document.getElementById('fp-nom').value = p.Nom || '';
+  document.getElementById('fp-role').value = p.Role || '';
+  document.getElementById('fp-desc').value = p.Description || '';
+  document.getElementById('fp-origines').value = p.Origines || '';
+  document.getElementById('fp-backstory').value = p.Backstory || '';
+  document.getElementById('fp-tags').value = p.Tags || '';
+  document.getElementById('btn-delete-perso').style.display = 'block';
+  document.getElementById('perso-modal').classList.add('open');
+}
+
+function closePersoModal() {
+  document.getElementById('perso-modal').classList.remove('open');
+  editingPersoId = null;
+}
+
+async function savePerso() {
+  const data = {
+    Nom: document.getElementById('fp-nom').value,
+    Role: document.getElementById('fp-role').value || null,
+    Description: document.getElementById('fp-desc').value || null,
+    Origines: document.getElementById('fp-origines').value || null,
+    Backstory: document.getElementById('fp-backstory').value || null,
+    Tags: document.getElementById('fp-tags').value || null,
+  };
+  if (editingPersoId) {
+    await fetch(`/api/personnages/${editingPersoId}`, {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(data),
+    });
+  } else {
+    await fetch('/api/personnages', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(data),
+    });
+  }
+  closePersoModal();
+  await loadPersonnages();
+}
+
+async function deletePerso() {
+  if (!editingPersoId || !confirm('Supprimer ce personnage ?')) return;
+  await fetch(`/api/personnages/${editingPersoId}`, { method: 'DELETE' });
+  closePersoModal();
+  await loadPersonnages();
+}
+
+document.getElementById('perso-modal').addEventListener('click', e => {
+  if (e.target === document.getElementById('perso-modal')) closePersoModal();
+});
+
+// ══════════════════════════════════════════════════════
+// ══ RESSOURCES ══
+// ══════════════════════════════════════════════════════
+
+let ressources = [];
+let editingResId = null;
+let pendingResImage = null; // dataUrl for new upload
+
+async function loadRessources() {
+  try {
+    const res = await fetch('/api/ressources');
+    if (res.status === 401) return;
+    const data = await res.json();
+    ressources = data.list || [];
+    populateResCatFilter();
+    renderRessources();
+  } catch (e) { console.error('Ressources load error:', e); }
+}
+
+function populateResCatFilter() {
+  const catSet = new Set();
+  ressources.forEach(r => { if (r.Categorie) catSet.add(r.Categorie); });
+  const sel = document.getElementById('res-filter-cat');
+  const cur = sel.value;
+  sel.innerHTML = '<option value="">Toutes</option>';
+  [...catSet].sort().forEach(c => {
+    const opt = document.createElement('option');
+    opt.value = c; opt.textContent = c;
+    sel.appendChild(opt);
+  });
+  sel.value = cur;
+}
+
+function renderRessources() {
+  const grid = document.getElementById('res-grid');
+  grid.innerHTML = '';
+  const filterCat = document.getElementById('res-filter-cat')?.value || '';
+  const filterSearch = (document.getElementById('res-filter-search')?.value || '').toLowerCase().trim();
+
+  ressources.forEach(r => {
+    if (filterCat && r.Categorie !== filterCat) return;
+    if (filterSearch) {
+      const hay = [r.Titre, r.Description, r.Tags, r.Categorie].filter(Boolean).join(' ').toLowerCase();
+      if (!hay.includes(filterSearch)) return;
+    }
+
+    const card = document.createElement('div');
+    card.className = 'res-card';
+    card.onclick = () => openResEdit(r.Id);
+    const tags = (r.Tags || '').split(',').filter(t => t.trim()).map(t =>
+      `<span class="card-badge badge-tag" style="font-size:11px;padding:2px 6px;">${esc(t.trim())}</span>`
+    ).join('');
+
+    let imgHtml = '';
+    if (r.Image) {
+      imgHtml = `<img class="res-card-img" src="${esc(r.Image)}" alt="">`;
+    }
+
+    card.innerHTML = `
+      ${imgHtml}
+      <div class="res-card-body">
+        <div class="res-card-title">${esc(r.Titre || '')}</div>
+        ${r.Categorie ? `<div class="res-card-cat">${esc(r.Categorie)}</div>` : ''}
+        ${r.Description ? `<div class="res-card-desc">${esc(r.Description)}</div>` : ''}
+        ${tags ? `<div class="res-card-tags">${tags}</div>` : ''}
+      </div>
+    `;
+    grid.appendChild(card);
+  });
+}
+
+function openResModal() {
+  editingResId = null;
+  pendingResImage = null;
+  document.getElementById('res-modal-label').textContent = 'Nouvelle ressource';
+  document.getElementById('fr-titre').value = '';
+  document.getElementById('fr-cat').value = '';
+  document.getElementById('fr-tags').value = '';
+  document.getElementById('fr-url').value = '';
+  document.getElementById('fr-desc').value = '';
+  document.getElementById('fr-image-input').value = '';
+  document.getElementById('fr-image-preview').innerHTML = '';
+  document.getElementById('btn-delete-res').style.display = 'none';
+  document.getElementById('res-modal').classList.add('open');
+}
+
+function openResEdit(id) {
+  const r = ressources.find(x => x.Id === id);
+  if (!r) return;
+  editingResId = id;
+  pendingResImage = null;
+  document.getElementById('res-modal-label').textContent = 'Modifier';
+  document.getElementById('fr-titre').value = r.Titre || '';
+  document.getElementById('fr-cat').value = r.Categorie || '';
+  document.getElementById('fr-tags').value = r.Tags || '';
+  document.getElementById('fr-url').value = r.URL || '';
+  document.getElementById('fr-desc').value = r.Description || '';
+  document.getElementById('fr-image-input').value = '';
+  document.getElementById('fr-image-preview').innerHTML = r.Image ? `<img src="${esc(r.Image)}" style="max-width:200px;max-height:120px;border-radius:8px;">` : '';
+  document.getElementById('btn-delete-res').style.display = 'block';
+  document.getElementById('res-modal').classList.add('open');
+}
+
+function closeResModal() {
+  document.getElementById('res-modal').classList.remove('open');
+  editingResId = null;
+  pendingResImage = null;
+}
+
+function previewResImage(input) {
+  const file = input.files[0];
+  if (!file) return;
+  const reader = new FileReader();
+  reader.onload = e => {
+    pendingResImage = e.target.result;
+    document.getElementById('fr-image-preview').innerHTML = `<img src="${e.target.result}" style="max-width:200px;max-height:120px;border-radius:8px;">`;
+  };
+  reader.readAsDataURL(file);
+}
+
+async function saveRes() {
+  let imagePath = null;
+
+  // Upload image if new one selected
+  if (pendingResImage) {
+    const upRes = await fetch('/api/ressource-upload', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ dataUrl: pendingResImage }),
+    });
+    if (upRes.ok) {
+      const upData = await upRes.json();
+      imagePath = upData.path;
+    }
+  }
+
+  const data = {
+    Titre: document.getElementById('fr-titre').value,
+    Categorie: document.getElementById('fr-cat').value || null,
+    Tags: document.getElementById('fr-tags').value || null,
+    URL: document.getElementById('fr-url').value || null,
+    Description: document.getElementById('fr-desc').value || null,
+  };
+  if (imagePath) data.Image = imagePath;
+
+  if (editingResId) {
+    await fetch(`/api/ressources/${editingResId}`, {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(data),
+    });
+  } else {
+    await fetch('/api/ressources', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(data),
+    });
+  }
+  closeResModal();
+  await loadRessources();
+}
+
+async function deleteRes() {
+  if (!editingResId || !confirm('Supprimer cette ressource ?')) return;
+  await fetch(`/api/ressources/${editingResId}`, { method: 'DELETE' });
+  closeResModal();
+  await loadRessources();
+}
+
+document.getElementById('res-modal').addEventListener('click', e => {
+  if (e.target === document.getElementById('res-modal')) closeResModal();
+});
+
 // ══════════════════════════════════════════════════════
 // ══ RÉDACTION — Binder + TipTap Editor ══
 // ══════════════════════════════════════════════════════
@@ -1753,20 +2429,25 @@ let wordCounts = {}; // sceneId → word count (cached)
 
 const ACTE_ORDER = ["Avant l'histoire", 'Acte 1', 'Acte 2', 'Acte 3', "Après l'histoire"];
 
-function statusSlug(s) {
-  if (!s) return '';
-  return s.normalize('NFD').replace(/[\u0300-\u036f]/g, '').toLowerCase().replace(/\s+/g, '-').replace(/[^a-z0-9-]/g, '');
-}
-
 function buildBinder() {
   const binder = document.getElementById('binder');
   // Group scenes by acte (exclude "En attente", only include Scène and Événement types relevant to writing)
   const grouped = {};
   ACTE_ORDER.forEach(a => { grouped[a] = []; });
 
+  const redPerso = document.getElementById('red-filter-perso')?.value || '';
+  const redTag = document.getElementById('red-filter-tag')?.value || '';
+  const redSearch = (document.getElementById('red-filter-search')?.value || '').toLowerCase().trim();
+
   (records || []).forEach(r => {
     const acte = r.Acte;
     if (!acte || acte === 'En attente') return;
+    if (redPerso && !(r.Personnage || '').split(',').map(s => s.trim()).includes(redPerso)) return;
+    if (redTag && !(r.Tags || '').split(',').map(s => s.trim()).includes(redTag)) return;
+    if (redSearch) {
+      const haystack = [r.Title, r['Résumé'], r.Personnage].filter(Boolean).join(' ').toLowerCase();
+      if (!haystack.includes(redSearch)) return;
+    }
     if (grouped[acte]) grouped[acte].push(r);
   });
 
@@ -1777,9 +2458,9 @@ function buildBinder() {
   legend.className = 'binder-legend';
   const legendTitle = document.createElement('div');
   legendTitle.className = 'binder-legend-title';
-  legendTitle.textContent = 'Statuts';
+  legendTitle.textContent = 'Tags statut';
   legend.appendChild(legendTitle);
-  [['#c4a030', 'À étudier'], ['#5a7a3a', 'Validée'], ['#a08a76', 'Abandonnée'], ['#8b3030', 'En conflit']].forEach(([color, label]) => {
+  Object.entries(STATUS_COLORS).forEach(([label, color]) => {
     const item = document.createElement('div');
     item.className = 'binder-legend-item';
     const dot = document.createElement('span');
@@ -1811,10 +2492,14 @@ function buildBinder() {
     scenes.forEach(scene => {
       const el = document.createElement('div');
       el.className = 'binder-scene' + (scene.Id === currentSceneId ? ' active' : '');
-      const slug = statusSlug(scene.Statut);
+      const sceneTags = (scene.Tags || '').split(',').map(t => t.trim()).filter(Boolean);
+      const statusDots = sceneTags
+        .filter(t => STATUS_COLORS[t])
+        .map(t => `<span class="scene-status" style="background:${STATUS_COLORS[t]}"></span>`)
+        .join('');
       const wc = wordCounts[scene.Id] || 0;
       totalWords += wc;
-      el.innerHTML = `<span class="scene-status ${slug}"></span><span class="scene-name">${esc(scene.Title)}</span>${wc ? `<span class="scene-words">${wc}</span>` : ''}`;
+      el.innerHTML = `${statusDots || '<span class="scene-status"></span>'}<span class="scene-name">${esc(scene.Title)}</span>${wc ? `<span class="scene-words">${wc}</span>` : ''}`;
       el.onclick = () => openScene(scene);
       acteDiv.appendChild(el);
     });
@@ -1844,11 +2529,13 @@ async function openScene(scene) {
   document.getElementById('editor-title').textContent = scene.Title;
   const meta = [];
   if (scene.Acte) meta.push(scene.Acte);
-  if (scene.Type) meta.push(scene.Type);
-  if (scene.Statut) meta.push(scene.Statut);
+  if (scene.Tags) meta.push(scene.Tags);
   if (scene.Personnage) meta.push(scene.Personnage);
   document.getElementById('editor-meta').textContent = meta.join(' · ');
 
+  // Panneau fiche (intention)
+  buildFichePanel(scene);
+
   // Load content from API
   try {
     const res = await fetch(`/api/contenu/${scene.Id}`);
@@ -1862,6 +2549,124 @@ async function openScene(scene) {
   }
 }
 
+// ── Panneau fiche (intention) ──
+let ficheOpen = false;
+try { ficheOpen = localStorage.getItem('tdb-fiche-open') === '1'; } catch(e) {}
+
+function toggleFiche() {
+  ficheOpen = !ficheOpen;
+  document.getElementById('editor-fiche-content').classList.toggle('open', ficheOpen);
+  document.getElementById('fiche-toggle-icon').classList.toggle('open', ficheOpen);
+  try { localStorage.setItem('tdb-fiche-open', ficheOpen ? '1' : '0'); } catch(e) {}
+}
+
+function buildFichePanel(scene) {
+  const container = document.getElementById('editor-fiche-content');
+  container.textContent = '';
+
+  const fields = [
+    { label: 'Résumé', value: scene['Résumé'] },
+    { label: 'Intérêt narratif', value: scene['Intérêt narratif'] },
+    { label: 'Implications', value: scene.Implications },
+    { label: 'Origine', value: scene.Origine },
+    { label: 'Lien rédaction', value: scene['Lien rédaction'] },
+  ];
+
+  let hasContent = false;
+  fields.forEach(f => {
+    if (!f.value) return;
+    hasContent = true;
+    const field = document.createElement('div');
+    field.className = 'editor-fiche-field';
+    const label = document.createElement('div');
+    label.className = 'editor-fiche-field-label';
+    label.textContent = f.label;
+    field.appendChild(label);
+    const val = document.createElement('div');
+    val.className = 'editor-fiche-field-value';
+    val.appendChild(createSanitizedFragment(renderMarkdown(f.value)));
+    field.appendChild(val);
+    container.appendChild(field);
+  });
+
+  // Tags
+  const tagList = (scene.Tags || '').split(',').map(t => t.trim()).filter(Boolean);
+  if (tagList.length) {
+    hasContent = true;
+    const field = document.createElement('div');
+    field.className = 'editor-fiche-field';
+    const label = document.createElement('div');
+    label.className = 'editor-fiche-field-label';
+    label.textContent = 'Tags';
+    field.appendChild(label);
+    const tagsEl = document.createElement('div');
+    tagsEl.className = 'editor-fiche-tags';
+    tagList.forEach(t => {
+      const badge = document.createElement('span');
+      badge.className = `card-badge ${tagBadgeClass(t)}`;
+      badge.textContent = t;
+      tagsEl.appendChild(badge);
+    });
+    field.appendChild(tagsEl);
+    container.appendChild(field);
+  }
+
+  // Personnages
+  const persos = (scene.Personnage || '').split(',').map(p => p.trim()).filter(Boolean);
+  if (persos.length) {
+    hasContent = true;
+    const field = document.createElement('div');
+    field.className = 'editor-fiche-field';
+    const label = document.createElement('div');
+    label.className = 'editor-fiche-field-label';
+    label.textContent = 'Personnages';
+    field.appendChild(label);
+    const persosEl = document.createElement('div');
+    persosEl.className = 'editor-fiche-persos';
+    persos.forEach(p => {
+      const badge = document.createElement('span');
+      badge.className = 'card-badge badge-perso';
+      badge.textContent = p;
+      persosEl.appendChild(badge);
+    });
+    field.appendChild(persosEl);
+    container.appendChild(field);
+  }
+
+  // Commentaires de la fiche
+  const comments = parseComments(scene.Commentaires);
+  if (comments.length) {
+    hasContent = true;
+    const field = document.createElement('div');
+    field.className = 'editor-fiche-field';
+    const label = document.createElement('div');
+    label.className = 'editor-fiche-field-label';
+    label.textContent = `Commentaires (${comments.length})`;
+    field.appendChild(label);
+    const list = document.createElement('div');
+    comments.forEach(c => {
+      const item = document.createElement('div');
+      item.style.cssText = 'margin-bottom:6px;';
+      const author = document.createElement('span');
+      author.style.cssText = 'font-weight:600;font-size:12px;';
+      author.textContent = (c.auteur === 'M' ? 'Myriam' : 'Etienne') + ' — ';
+      item.appendChild(author);
+      const text = document.createElement('span');
+      text.textContent = c.texte || '';
+      item.appendChild(text);
+      list.appendChild(item);
+    });
+    field.appendChild(list);
+    container.appendChild(field);
+  }
+
+  // Afficher/masquer le panneau selon l'état mémorisé
+  const ficheEl = document.getElementById('editor-fiche');
+  ficheEl.style.display = hasContent ? '' : 'none';
+  container.classList.toggle('open', ficheOpen && hasContent);
+  document.getElementById('fiche-toggle-icon').classList.toggle('open', ficheOpen && hasContent);
+}
+
 function initEditor(html) {
   // Destroy previous editor
   if (tiptapEditor) { tiptapEditor.destroy(); tiptapEditor = null; }
diff --git a/server.js b/server.js
index fa94ed8..4c006bf 100644
--- a/server.js
+++ b/server.js
@@ -16,6 +16,8 @@ const NOCODB_BASE_ID = process.env.NOCODB_BASE_ID || '';
 const NOCODB_TABLE_ID = process.env.NOCODB_TABLE_ID || '';
 const NOCODB_VISION_TABLE_ID = process.env.NOCODB_VISION_TABLE_ID || '';
 const NOCODB_CONTENU_TABLE_ID = process.env.NOCODB_CONTENU_TABLE_ID || '';
+const NOCODB_PERSONNAGES_TABLE_ID = process.env.NOCODB_PERSONNAGES_TABLE_ID || '';
+const NOCODB_RESSOURCES_TABLE_ID = process.env.NOCODB_RESSOURCES_TABLE_ID || '';
 
 // Auth
 function makeToken(ts) {
@@ -266,6 +268,119 @@ app.put('/api/contenu/:sceneId', requireAuth, async (req, res) => {
   }
 });
 
+// ── Personnages API ──
+
+function personnagesProxy(tableIdVar) {
+  return NOCODB_PERSONNAGES_TABLE_ID;
+}
+
+app.get('/api/personnages', requireAuth, async (req, res) => {
+  if (!NOCODB_PERSONNAGES_TABLE_ID) return res.json({ list: [] });
+  try {
+    const url = `${NOCODB_URL}/api/v1/db/data/noco/${NOCODB_BASE_ID}/${NOCODB_PERSONNAGES_TABLE_ID}?limit=100&sort=Nom`;
+    const r = await fetch(url, { headers: { 'xc-token': NOCODB_TOKEN } });
+    res.json(await r.json());
+  } catch (e) { res.status(500).json({ error: e.message }); }
+});
+
+app.post('/api/personnages', requireAuth, async (req, res) => {
+  if (!NOCODB_PERSONNAGES_TABLE_ID) return res.status(400).json({ error: 'Table non configurée' });
+  try {
+    const url = `${NOCODB_URL}/api/v1/db/data/noco/${NOCODB_BASE_ID}/${NOCODB_PERSONNAGES_TABLE_ID}`;
+    const r = await fetch(url, {
+      method: 'POST',
+      headers: { 'xc-token': NOCODB_TOKEN, 'Content-Type': 'application/json' },
+      body: JSON.stringify(req.body),
+    });
+    res.status(r.status).json(await r.json());
+  } catch (e) { res.status(500).json({ error: e.message }); }
+});
+
+app.patch('/api/personnages/:id', requireAuth, async (req, res) => {
+  if (!NOCODB_PERSONNAGES_TABLE_ID) return res.status(400).json({ error: 'Table non configurée' });
+  try {
+    const url = `${NOCODB_URL}/api/v1/db/data/noco/${NOCODB_BASE_ID}/${NOCODB_PERSONNAGES_TABLE_ID}/${req.params.id}`;
+    const r = await fetch(url, {
+      method: 'PATCH',
+      headers: { 'xc-token': NOCODB_TOKEN, 'Content-Type': 'application/json' },
+      body: JSON.stringify(req.body),
+    });
+    res.status(r.status).json(await r.json());
+  } catch (e) { res.status(500).json({ error: e.message }); }
+});
+
+app.delete('/api/personnages/:id', requireAuth, async (req, res) => {
+  if (!NOCODB_PERSONNAGES_TABLE_ID) return res.status(400).json({ error: 'Table non configurée' });
+  try {
+    const url = `${NOCODB_URL}/api/v1/db/data/noco/${NOCODB_BASE_ID}/${NOCODB_PERSONNAGES_TABLE_ID}/${req.params.id}`;
+    const r = await fetch(url, { method: 'DELETE', headers: { 'xc-token': NOCODB_TOKEN } });
+    res.status(r.status).json({ ok: true });
+  } catch (e) { res.status(500).json({ error: e.message }); }
+});
+
+// ── Ressources API ──
+
+app.get('/api/ressources', requireAuth, async (req, res) => {
+  if (!NOCODB_RESSOURCES_TABLE_ID) return res.json({ list: [] });
+  try {
+    const url = `${NOCODB_URL}/api/v1/db/data/noco/${NOCODB_BASE_ID}/${NOCODB_RESSOURCES_TABLE_ID}?limit=200&sort=-CreatedAt`;
+    const r = await fetch(url, { headers: { 'xc-token': NOCODB_TOKEN } });
+    res.json(await r.json());
+  } catch (e) { res.status(500).json({ error: e.message }); }
+});
+
+app.post('/api/ressources', requireAuth, async (req, res) => {
+  if (!NOCODB_RESSOURCES_TABLE_ID) return res.status(400).json({ error: 'Table non configurée' });
+  try {
+    const url = `${NOCODB_URL}/api/v1/db/data/noco/${NOCODB_BASE_ID}/${NOCODB_RESSOURCES_TABLE_ID}`;
+    const r = await fetch(url, {
+      method: 'POST',
+      headers: { 'xc-token': NOCODB_TOKEN, 'Content-Type': 'application/json' },
+      body: JSON.stringify(req.body),
+    });
+    res.status(r.status).json(await r.json());
+  } catch (e) { res.status(500).json({ error: e.message }); }
+});
+
+app.patch('/api/ressources/:id', requireAuth, async (req, res) => {
+  if (!NOCODB_RESSOURCES_TABLE_ID) return res.status(400).json({ error: 'Table non configurée' });
+  try {
+    const url = `${NOCODB_URL}/api/v1/db/data/noco/${NOCODB_BASE_ID}/${NOCODB_RESSOURCES_TABLE_ID}/${req.params.id}`;
+    const r = await fetch(url, {
+      method: 'PATCH',
+      headers: { 'xc-token': NOCODB_TOKEN, 'Content-Type': 'application/json' },
+      body: JSON.stringify(req.body),
+    });
+    res.status(r.status).json(await r.json());
+  } catch (e) { res.status(500).json({ error: e.message }); }
+});
+
+app.delete('/api/ressources/:id', requireAuth, async (req, res) => {
+  if (!NOCODB_RESSOURCES_TABLE_ID) return res.status(400).json({ error: 'Table non configurée' });
+  try {
+    const url = `${NOCODB_URL}/api/v1/db/data/noco/${NOCODB_BASE_ID}/${NOCODB_RESSOURCES_TABLE_ID}/${req.params.id}`;
+    const r = await fetch(url, { method: 'DELETE', headers: { 'xc-token': NOCODB_TOKEN } });
+    res.status(r.status).json({ ok: true });
+  } catch (e) { res.status(500).json({ error: e.message }); }
+});
+
+// Ressource image upload
+app.post('/api/ressource-upload', requireAuth, (req, res) => {
+  try {
+    const { dataUrl } = req.body;
+    if (!dataUrl || !dataUrl.startsWith('data:image/')) return res.status(400).json({ error: 'Invalid image' });
+    const matches = dataUrl.match(/^data:image\/(\w+);base64,(.+)$/);
+    if (!matches) return res.status(400).json({ error: 'Invalid format' });
+    const ext = matches[1] === 'jpeg' ? 'jpg' : matches[1];
+    const buffer = Buffer.from(matches[2], 'base64');
+    const uploadDir = path.join(__dirname, 'public', 'uploads');
+    if (!fs.existsSync(uploadDir)) fs.mkdirSync(uploadDir, { recursive: true });
+    const filename = `res-${Date.now()}.${ext}`;
+    fs.writeFileSync(path.join(uploadDir, filename), buffer);
+    res.json({ path: `/uploads/${filename}?t=${Date.now()}` });
+  } catch (e) { res.status(500).json({ error: e.message }); }
+});
+
 // ── Hero image upload (file too large for NocoDB LongText) ──
 const fs = require('fs');
 
@@ -319,4 +434,101 @@ app.get('/', (req, res) => {
 // Static files (login.html is public, index.html is gated above)
 app.use(express.static(path.join(__dirname, 'public'), { index: false }));
 
-app.listen(PORT, () => console.log(`TdB RdB — port ${PORT}`));
+// ── Startup migration: ensure Tags column exists ──
+async function ensureTagsColumn() {
+  try {
+    const url = `${NOCODB_URL}/api/v2/meta/tables/${NOCODB_TABLE_ID}`;
+    const r = await fetch(url, { headers: { 'xc-token': NOCODB_TOKEN } });
+    const table = await r.json();
+    const hasTagsCol = (table.columns || []).some(c => c.title === 'Tags');
+    if (!hasTagsCol) {
+      const createUrl = `${NOCODB_URL}/api/v2/meta/tables/${NOCODB_TABLE_ID}/columns`;
+      const cr = await fetch(createUrl, {
+        method: 'POST',
+        headers: { 'xc-token': NOCODB_TOKEN, 'Content-Type': 'application/json' },
+        body: JSON.stringify({ column_name: 'Tags', title: 'Tags', uidt: 'LongText' }),
+      });
+      if (cr.ok) {
+        console.log('Tags column created');
+        // Migrate existing Type values to Tags
+        const recUrl = `${NOCODB_URL}/api/v1/db/data/noco/${NOCODB_BASE_ID}/${NOCODB_TABLE_ID}?limit=200&fields=Id,Type`;
+        const recR = await fetch(recUrl, { headers: { 'xc-token': NOCODB_TOKEN } });
+        const recData = await recR.json();
+        for (const rec of (recData.list || [])) {
+          if (rec.Type) {
+            const patchUrl = `${NOCODB_URL}/api/v1/db/data/noco/${NOCODB_BASE_ID}/${NOCODB_TABLE_ID}/${rec.Id}`;
+            await fetch(patchUrl, {
+              method: 'PATCH',
+              headers: { 'xc-token': NOCODB_TOKEN, 'Content-Type': 'application/json' },
+              body: JSON.stringify({ Tags: rec.Type }),
+            });
+          }
+        }
+        console.log('Type values migrated to Tags');
+      }
+    }
+  } catch (e) {
+    console.error('Tags migration error:', e.message);
+  }
+}
+
+// ── Startup migration: Statut → Tags (one-time) ──
+async function migrateStatutToTags() {
+  try {
+    const recUrl = `${NOCODB_URL}/api/v1/db/data/noco/${NOCODB_BASE_ID}/${NOCODB_TABLE_ID}?limit=200&fields=Id,Statut,Tags`;
+    const recR = await fetch(recUrl, { headers: { 'xc-token': NOCODB_TOKEN } });
+    const recData = await recR.json();
+    let migrated = 0;
+    for (const rec of (recData.list || [])) {
+      if (rec.Statut) {
+        const existingTags = (rec.Tags || '').split(',').map(t => t.trim()).filter(Boolean);
+        if (!existingTags.includes(rec.Statut)) {
+          existingTags.push(rec.Statut);
+        }
+        const patchUrl = `${NOCODB_URL}/api/v1/db/data/noco/${NOCODB_BASE_ID}/${NOCODB_TABLE_ID}/${rec.Id}`;
+        await fetch(patchUrl, {
+          method: 'PATCH',
+          headers: { 'xc-token': NOCODB_TOKEN, 'Content-Type': 'application/json' },
+          body: JSON.stringify({ Tags: existingTags.join(', '), Statut: null }),
+        });
+        migrated++;
+      }
+    }
+    if (migrated > 0) console.log(`Statut migrated to Tags for ${migrated} records`);
+  } catch (e) {
+    console.error('Statut migration error:', e.message);
+  }
+}
+
+// ── Startup migration: ensure Personnages columns (Origines, Backstory) ──
+async function ensurePersonnagesColumns() {
+  if (!NOCODB_PERSONNAGES_TABLE_ID) return;
+  try {
+    const url = `${NOCODB_URL}/api/v2/meta/tables/${NOCODB_PERSONNAGES_TABLE_ID}`;
+    const r = await fetch(url, { headers: { 'xc-token': NOCODB_TOKEN } });
+    const table = await r.json();
+    const existing = (table.columns || []).map(c => c.title);
+    for (const col of ['Origines', 'Backstory']) {
+      if (!existing.includes(col)) {
+        const createUrl = `${NOCODB_URL}/api/v2/meta/tables/${NOCODB_PERSONNAGES_TABLE_ID}/columns`;
+        await fetch(createUrl, {
+          method: 'POST',
+          headers: { 'xc-token': NOCODB_TOKEN, 'Content-Type': 'application/json' },
+          body: JSON.stringify({ column_name: col, title: col, uidt: 'LongText' }),
+        });
+        console.log(`Personnages column '${col}' created`);
+      }
+    }
+  } catch (e) {
+    console.error('Personnages columns migration error:', e.message);
+  }
+}
+
+app.listen(PORT, () => {
+  console.log(`TdB RdB — port ${PORT}`);
+  if (NOCODB_TOKEN) {
+    ensureTagsColumn();
+    migrateStatutToTags();
+    ensurePersonnagesColumns();
+  }
+});