Ajout zone "Après l'histoire" + icône frise harmonisée

- Nouvelle section frise avec couleur prune (#8a6a8a)
- CSS light + dark theme
- Option ajoutée dans NocoDB
- Icône frise: sablier emoji remplacé par symbole plat

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

public/index.html

@@ -58,6 +58,7 @@ window.dispatchEvent(new Event('tiptap-loaded'));
     --terra: #b85c3a;
     --olive: #6a7a42;
     --blue-grey: #6a7a8a;
+    --plum: #8a6a8a;
     --shadow: rgba(92,61,46,0.10);
     --shadow-hover: rgba(92,61,46,0.18);
     --overlay: rgba(44,24,16,0.5);
@@ -81,6 +82,7 @@ window.dispatchEvent(new Event('tiptap-loaded'));
     --terra: #d4845a;
     --olive: #8aaa5a;
     --blue-grey: #8a9aaa;
+    --plum: #aa8aaa;
     --shadow: rgba(0,0,0,0.2);
     --shadow-hover: rgba(0,0,0,0.35);
     --overlay: rgba(0,0,0,0.6);
@@ -142,6 +144,7 @@ window.dispatchEvent(new Event('tiptap-loaded'));
   .acte-section[data-acte="Acte 1"] .acte-label { color: var(--brown); }
   .acte-section[data-acte="Acte 2"] .acte-label { color: var(--terra); }
   .acte-section[data-acte="Acte 3"] .acte-label { color: var(--olive); }
+  .acte-section[data-acte="Après l'histoire"] .acte-label { color: var(--plum); }
 
   /* Timeline line */
   .timeline-line { height: 3px; background: var(--border); display: flex; min-width: min-content; border-radius: 2px; }
@@ -150,6 +153,7 @@ window.dispatchEvent(new Event('tiptap-loaded'));
   .acte-section[data-acte="Acte 1"] .timeline-segment { background: var(--brown); }
   .acte-section[data-acte="Acte 2"] .timeline-segment { background: var(--terra); }
   .acte-section[data-acte="Acte 3"] .timeline-segment { background: var(--olive); }
+  .acte-section[data-acte="Après l'histoire"] .timeline-segment { background: var(--plum); }
 
   /* Cards row under each acte */
   .cards-row { display: flex; gap: 14px; padding: 16px 10px 10px; min-height: 140px; align-items: flex-start; }
@@ -169,6 +173,7 @@ window.dispatchEvent(new Event('tiptap-loaded'));
   .card[data-acte="Acte 1"] { border-top-color: var(--brown); }
   .card[data-acte="Acte 2"] { border-top-color: var(--terra); }
   .card[data-acte="Acte 3"] { border-top-color: var(--olive); }
+  .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 */
@@ -414,7 +419,7 @@ window.dispatchEvent(new Event('tiptap-loaded'));
     <div class="sidebar-logo">Tableau de bord</div>
     <div class="sidebar-project">Projet RdB</div>
     <div class="nav-item active" 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">&#9203;</span> Frise</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="sidebar-footer">Etienne & Myriam</div>
   </div>
@@ -609,7 +614,7 @@ window.dispatchEvent(new Event('tiptap-loaded'));
 </div>
 
 <script>
-const ACTES_FRISE = ["Avant l'histoire", "Acte 1", "Acte 2", "Acte 3"];
+const ACTES_FRISE = ["Avant l'histoire", "Acte 1", "Acte 2", "Acte 3", "Après l'histoire"];
 let records = [];
 let columns = {};
 let editingId = null;
@@ -1555,7 +1560,7 @@ let currentSceneId = null;
 let saveTimeout = null;
 let wordCounts = {}; // sceneId → word count (cached)
 
-const ACTE_ORDER = ["Avant l'histoire", 'Acte 1', 'Acte 2', 'Acte 3'];
+const ACTE_ORDER = ["Avant l'histoire", 'Acte 1', 'Acte 2', 'Acte 3', "Après l'histoire"];
 
 function statusSlug(s) {
   if (!s) return '';