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/document-editor.css

@@ -1165,26 +1165,66 @@ img.docImage {
 /* ---- Section "Pages" du panneau GAUCHE (retour utilisateur du
    21/09/2026 : "une section qui s'ajoute dans le panneau de gauche pour
    ajouter une page et naviguer entre elles", à la place de l'ex-
-   catégorie "Mise en page"/formes libres, supprimée) — une simple liste
-   (pas de vignette visuelle), toujours visible en tête du panneau. ---- */
+   catégorie "Mise en page"/formes libres, supprimée) — un bandeau
+   HORIZONTAL défilant à hauteur FIXE (retour utilisateur du 21/09/2026 :
+   "ce système n'est pas bien il faut un système de slide horizontale" —
+   une liste verticale grandissait sans limite avec beaucoup de pages),
+   toujours visible en tête du panneau. Cartes texte (pas de vignette
+   visuelle). ---- */
 .docPageSection {
   display: flex;
   flex-direction: column;
   gap: 8px;
 }
 
-.docPageList {
+/* Bandeau : flèches précédent/suivant AUX EXTRÉMITÉS (retour utilisateur
+   du 21/09/2026 : "affiche les flèches ... en plus", donc en supplément
+   des ←/→ par carte, qui eux réordonnent) — font défiler la VUE de la
+   bande, jamais la page active. */
+.docPageStrip {
   display: flex;
-  flex-direction: column;
+  align-items: center;
   gap: 4px;
 }
 
+.docPageStripNav {
+  flex-shrink: 0;
+  width: 22px;
+  height: 72px;
+  border: 1px solid var(--doc-border);
+  border-radius: 6px;
+  background: var(--doc-card);
+  color: var(--doc-muted);
+  font-size: 15px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.docPageStripNav:hover {
+  border-color: var(--doc-accent);
+  color: var(--doc-text);
+}
+
+.docPageList {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: row;
+  gap: 6px;
+  overflow: auto hidden;
+  padding-bottom: 4px;
+}
+
 .docPageListItem {
   display: flex;
+  flex-direction: column;
   align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  padding: 7px 8px;
+  gap: 4px;
+  flex-shrink: 0;
+  width: 72px;
+  padding: 4px;
   border: 1px solid var(--doc-border);
   border-radius: 8px;
   background: var(--doc-card);
@@ -1205,44 +1245,21 @@ img.docImage {
   outline-offset: 1px;
 }
 
-.docPageListTitle {
-  flex: 1;
-  min-width: 0;
-  font-size: 12.5px;
-  font-weight: 600;
-  color: var(--doc-muted);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.docPageListItem.is-active .docPageListTitle {
-  color: var(--doc-text);
-}
-
-.docPageListTitle[contenteditable="true"] {
-  outline: none;
-  border-bottom: 1px solid var(--doc-accent);
-  cursor: text;
-  user-select: text;
-  color: var(--doc-text);
-}
-
 .docPageListActions {
   display: flex;
   align-items: center;
+  justify-content: center;
   gap: 2px;
-  flex-shrink: 0;
 }
 
 .docPageListActions button {
-  width: 20px;
-  height: 20px;
+  width: 16px;
+  height: 16px;
   border: none;
-  border-radius: 5px;
+  border-radius: 4px;
   background: transparent;
   color: var(--doc-muted);
-  font-size: 11px;
+  font-size: 9px;
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -1263,6 +1280,62 @@ img.docImage {
   color: var(--doc-quiz-danger-border);
 }
 
+.docPageListSquare {
+  width: 40px;
+  height: 40px;
+  border-radius: 6px;
+  background: var(--doc-bg-2);
+  border: 1px solid var(--doc-border);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--doc-muted);
+}
+
+.docPageListItem.is-active .docPageListSquare {
+  border-color: var(--doc-accent);
+  color: var(--doc-accent);
+}
+
+/* Titre SOUS le carré, tronqué, qui défile au survol si tronqué (retour
+   utilisateur du 21/09/2026) — .has-overflow n'est posé que si le texte
+   dépasse réellement (voir forgeDocApplyTitleMarquee), jamais un
+   défilement systématique qui ferait sauter les titres courts. */
+.docPageListTitle {
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.docPageListTitleText {
+  display: inline-block;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--doc-muted);
+  transition: transform 0.6s ease;
+}
+
+.docPageListItem.is-active .docPageListTitleText {
+  color: var(--doc-text);
+}
+
+.docPageListTitle.has-overflow:hover .docPageListTitleText {
+  transform: translateX(calc(-1 * var(--marquee-distance, 0px)));
+}
+
+.docPageListTitle[contenteditable="true"] {
+  outline: none;
+  cursor: text;
+  user-select: text;
+}
+
+.docPageListTitle[contenteditable="true"] .docPageListTitleText {
+  border-bottom: 1px solid var(--doc-accent);
+  color: var(--doc-text);
+}
+
 /* ---- RIGHT SIDEBAR : Propriétés ---- */
 .docField {
   display: flex;

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();
 

templates/document/document_edit.html

@@ -97,6 +97,12 @@
       <div class="docSidebar docSidebarLeft" id="docSidebarLeft">
         <div class="docPageSection">
           <div class="docSectionLabel">Pages</div>
+          <div class="docPageStrip">
+            <button type="button"
+                    class="docPageStripNav"
+                    id="docPageStripPrev"
+                    aria-label="Défiler vers la gauche"
+                    title="Défiler vers la gauche">‹</button>
             <div class="docPageList" id="docPageList">
               {% for page in pages %}
                 <div class="docPageListItem {{ 'is-active' if page.id == active_page.id else '' }}"
@@ -109,20 +115,19 @@
                      validement. L'équivalent clavier (Entrée/Espace) est posé côté JS
                      (forgeDocRenderPageList), donc le finding clavier de Sonar est un faux positif
                      : l'analyseur statique ne voit pas les addEventListener dynamiques. #}
-                <span class="docPageListTitle">{{ page.title }}</span>
                   <div class="docPageListActions">
                     <button type="button"
                             class="docPageListMove"
                             data-dir="up"
                             data-page-id="{{ page.id }}"
-                          aria-label="Déplacer vers le haut"
-                          title="Déplacer vers le haut">↑</button>
+                            aria-label="Déplacer vers la gauche"
+                            title="Déplacer vers la gauche">←</button>
                     <button type="button"
                             class="docPageListMove"
                             data-dir="down"
                             data-page-id="{{ page.id }}"
-                          aria-label="Déplacer vers le bas"
-                          title="Déplacer vers le bas">↓</button>
+                            aria-label="Déplacer vers la droite"
+                            title="Déplacer vers la droite">→</button>
                     <button type="button"
                             class="docPageListRename"
                             data-page-id="{{ page.id }}"
@@ -134,9 +139,17 @@
                             aria-label="Supprimer cette page"
                             title="Supprimer cette page">✕</button>
                   </div>
+                  <div class="docPageListSquare">{{ loop.index }}</div>
+                  <span class="docPageListTitle"><span class="docPageListTitleText">{{ page.title }}</span></span>
                 </div>
               {% endfor %}
             </div>
+            <button type="button"
+                    class="docPageStripNav"
+                    id="docPageStripNext"
+                    aria-label="Défiler vers la droite"
+                    title="Défiler vers la droite">›</button>
+          </div>
           <button type="button" class="docBtnSecondary docPageListAdd" id="docPageListAdd">+ Ajouter une page</button>
         </div>
         {% for category_key, category in element_library.items() %}