Améliore l'UX de la bande de pages : carré + nom en dessous, flèches précédent/suivant, défilement au survol

Chaque carte devient carré (numéro) + nom tronqué SOUS le carré, avec
les actions (réordonner/renommer/supprimer) au-dessus plutôt que sur
le côté. Ajoute deux flèches aux extrémités de la bande pour faire
défiler la VUE (distinct du réordonnancement par carte). Un titre
tronqué défile au survol de la souris (marquee), mesuré dynamiquement
— jamais pour un titre qui tient déjà.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

static/document/js/document-editor.js

@@ -575,6 +575,19 @@ function forgeDocStartRenamingPage(pageId) {
   titleEl.addEventListener('keydown', onKeydown);
 }
 
+function forgeDocApplyTitleMarquee(titleEl) {
+  // "défile au passage de la souris" (retour utilisateur du 21/09/2026) :
+  // seuls les titres RÉELLEMENT tronqués défilent au survol — mesuré ici
+  // (scrollWidth vs clientWidth), jamais un défilement systématique qui
+  // ferait sauter les titres courts sans raison.
+  const textEl = titleEl.querySelector('.docPageListTitleText');
+  const overflow = textEl.scrollWidth - titleEl.clientWidth;
+  if (overflow > 0) {
+    titleEl.classList.add('has-overflow');
+    titleEl.style.setProperty('--marquee-distance', `${overflow}px`);
+  }
+}
+
 function forgeDocRenderPageList() {
   const container = document.getElementById('docPageList');
   if (!container) return;
@@ -588,13 +601,14 @@ function forgeDocRenderPageList() {
          role="button"
          tabindex="0"
          data-page-id="${p.id}">
-      <span class="docPageListTitle">${forgeDocEscapeHtml(p.title)}</span>
       <div class="docPageListActions">
-        <button type="button" class="docPageListMove" data-dir="up" data-page-id="${p.id}" aria-label="Déplacer vers le haut" title="Déplacer vers le haut"${index === 0 ? ' disabled' : ''}>↑</button>
-        <button type="button" class="docPageListMove" data-dir="down" data-page-id="${p.id}" aria-label="Déplacer vers le bas" title="Déplacer vers le bas"${index === pages.length - 1 ? ' disabled' : ''}>↓</button>
+        <button type="button" class="docPageListMove" data-dir="up" data-page-id="${p.id}" aria-label="Déplacer vers la gauche" title="Déplacer vers la gauche"${index === 0 ? ' disabled' : ''}>←</button>
+        <button type="button" class="docPageListMove" data-dir="down" data-page-id="${p.id}" aria-label="Déplacer vers la droite" title="Déplacer vers la droite"${index === pages.length - 1 ? ' disabled' : ''}>→</button>
         <button type="button" class="docPageListRename" data-page-id="${p.id}" aria-label="Renommer cette page" title="Renommer cette page">✎</button>
         <button type="button" class="docPageListDelete" data-page-id="${p.id}" aria-label="Supprimer cette page" title="Supprimer cette page"${pages.length <= 1 ? ' disabled' : ''}>✕</button>
       </div>
+      <div class="docPageListSquare">${index + 1}</div>
+      <span class="docPageListTitle"><span class="docPageListTitleText">${forgeDocEscapeHtml(p.title)}</span></span>
     </div>
   `).join('');
 
@@ -627,10 +641,24 @@ function forgeDocRenderPageList() {
       forgeDocDeletePage(Number(btn.dataset.pageId));
     });
   });
+  container.querySelectorAll('.docPageListTitle').forEach(forgeDocApplyTitleMarquee);
   const addBtn = document.getElementById('docPageListAdd');
   if (addBtn) addBtn.onclick = () => forgeDocAddPage();
 }
 
+function forgeDocBindPageStripNav() {
+  const container = document.getElementById('docPageList');
+  const prevBtn = document.getElementById('docPageStripPrev');
+  const nextBtn = document.getElementById('docPageStripNext');
+  if (!container || !prevBtn || !nextBtn) return;
+  // Fait défiler la VUE de la bande (pas la page active — retour
+  // utilisateur du 21/09/2026 : "affiche les flèches ... en plus", donc
+  // une navigation visuelle distincte des ←/→ par carte qui, eux,
+  // réordonnent). Défilement d'environ une carte + son espacement.
+  prevBtn.addEventListener('click', () => container.scrollBy({ left: -110, behavior: 'smooth' }));
+  nextBtn.addEventListener('click', () => container.scrollBy({ left: 110, behavior: 'smooth' }));
+}
+
 function forgeDocBindPageNavPill() {
   document.getElementById('docPagePrevBtn').addEventListener('click', () => {
     const pages = forgeDocOrderedPages();
@@ -2755,6 +2783,7 @@ function forgeDocInit() {
   forgeDocBindKeyboardShortcuts();
   forgeDocBindScenarioTreeModal();
   forgeDocRenderPageList();
+  forgeDocBindPageStripNav();
   forgeDocBindPageNavPill();
   forgeDocUpdateHistoryButtons();