Bande de pages : un seul carré visible (la page active), les flèches changent de page

Remplace le bandeau scrollable multi-cartes par un vrai carrousel
une-page-à-la-fois : un seul carré affiché (la page active), les
grandes flèches ‹/› aux extrémités changent directement la page
affichée (au lieu de juste faire défiler la vue). Les petites flèches
←/→ au-dessus du carré restent pour réordonner la page active parmi
ses sœurs, sans changer l'affichage — distinctes des flèches de
navigation.

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

static/document/js/document-editor.js

@@ -592,36 +592,40 @@ function forgeDocRenderPageList() {
   const container = document.getElementById('docPageList');
   if (!container) return;
   const pages = forgeDocOrderedPages();
-  // div + role="button" ici, jamais <button> : la rangée contient de
-  // vrais <button> d'action (monter/descendre/renommer/supprimer), qu'un
-  // <button> englobant ne pourrait pas contenir validement. L'équivalent
-  // clavier (Entrée/Espace) est posé plus bas.
-  container.innerHTML = pages.map((p, index) => `
-    <div class="docPageListItem ${p.id === window.forgeDocState.activePageId ? 'is-active' : ''}"
-         role="button"
-         tabindex="0"
-         data-page-id="${p.id}">
+  const index = pages.findIndex((p) => p.id === window.forgeDocState.activePageId);
+  const p = pages[index];
+  // Un seul carré visible : la page ACTIVE (retour utilisateur du
+  // 22/09/2026 : "un seul carré page visible") — les grandes flèches
+  // ‹/› de .docPageStrip CHANGENT la page affichée (voir
+  // forgeDocBindPageStripNav), distinctes des petites flèches ←/→
+  // ci-dessous qui réordonnent la page active parmi ses sœurs sans
+  // changer l'affichage. div + role="button" ici, jamais <button> : la
+  // carte contient de vrais <button> d'action, qu'un <button> englobant
+  // ne pourrait pas contenir validement. L'équivalent clavier
+  // (Entrée/Espace) est posé plus bas.
+  container.innerHTML = `
+    <div class="docPageListItem is-active" role="button" tabindex="0" data-page-id="${p.id}">
       <div class="docPageListActions">
-        <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="docPageListMove" data-dir="up" data-page-id="${p.id}" aria-label="Réordonner vers la gauche" title="Réordonner vers la gauche"${index === 0 ? ' disabled' : ''}>←</button>
+        <button type="button" class="docPageListMove" data-dir="down" data-page-id="${p.id}" aria-label="Réordonner vers la droite" title="Réordonner 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>
+      <span class="docPageListCounter">${index + 1} / ${pages.length}</span>
     </div>
-  `).join('');
+  `;
 
-  container.querySelectorAll('.docPageListItem[data-page-id]').forEach((item) => {
-    item.addEventListener('click', (e) => {
-      if (e.target.closest('.docPageListActions')) return;
-      forgeDocSwitchPage(Number(item.dataset.pageId));
-    });
-    item.addEventListener('keydown', (e) => {
-      if (e.key !== 'Enter' && e.key !== ' ') return;
-      e.preventDefault();
-      forgeDocSwitchPage(Number(item.dataset.pageId));
-    });
+  const item = container.querySelector('.docPageListItem[data-page-id]');
+  item.addEventListener('click', (e) => {
+    if (e.target.closest('.docPageListActions')) return;
+    forgeDocSwitchPage(Number(item.dataset.pageId));
+  });
+  item.addEventListener('keydown', (e) => {
+    if (e.key !== 'Enter' && e.key !== ' ') return;
+    e.preventDefault();
+    forgeDocSwitchPage(Number(item.dataset.pageId));
   });
   container.querySelectorAll('.docPageListMove').forEach((btn) => {
     btn.addEventListener('click', (e) => {
@@ -642,21 +646,35 @@ function forgeDocRenderPageList() {
     });
   });
   container.querySelectorAll('.docPageListTitle').forEach(forgeDocApplyTitleMarquee);
+
+  const prevBtn = document.getElementById('docPageStripPrev');
+  const nextBtn = document.getElementById('docPageStripNext');
+  if (prevBtn) prevBtn.disabled = index <= 0;
+  if (nextBtn) nextBtn.disabled = index >= pages.length - 1;
+
   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' }));
+  if (!prevBtn || !nextBtn) return;
+  // Les flèches ‹/› CHANGENT la page affichée (retour utilisateur du
+  // 22/09/2026 : "les flèches ne servent pas qu'à naviguer mais aussi à
+  // changer de page") — lecture dynamique de l'ordre courant à chaque
+  // clic (même principe que forgeDocBindPageNavPill), jamais un index
+  // figé au moment du binding.
+  prevBtn.addEventListener('click', () => {
+    const pages = forgeDocOrderedPages();
+    const index = pages.findIndex((p) => p.id === window.forgeDocState.activePageId);
+    if (index > 0) forgeDocSwitchPage(pages[index - 1].id);
+  });
+  nextBtn.addEventListener('click', () => {
+    const pages = forgeDocOrderedPages();
+    const index = pages.findIndex((p) => p.id === window.forgeDocState.activePageId);
+    if (index < pages.length - 1) forgeDocSwitchPage(pages[index + 1].id);
+  });
 }
 
 function forgeDocBindPageNavPill() {