Panneau gauche à onglets : "Pages" (gestion complète) et "Mise en page" (bibliothèque)

Remplace le carrousel une-page-à-la-fois par un panneau dédié plein
hauteur : liste verticale scrollable de toutes les pages, réordonnage
par glisser OU boutons haut/bas (accessibilité clavier), renommer
(crayon, édition en ligne), supprimer (protégé contre la suppression
de la dernière page), ajouter. La bibliothèque d'éléments passe dans
un second onglet "Mise en page", contenu inchangé. "Mise en page"
actif par défaut au chargement.

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

static/document/document-editor.css

@@ -1162,183 +1162,186 @@ img.docImage {
   white-space: nowrap;
 }
 
-/* ---- 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) — un CARROUSEL
-   une-page-à-la-fois (retour utilisateur du 22/09/2026 : "un seul carré
-   page visible, les flèches ne servent pas qu'à naviguer mais aussi à
-   changer de page") : un seul carré = la page ACTIVE, hauteur fixe quel
-   que soit le nombre de pages. Carte texte (pas de vignette visuelle). ---- */
-.docPageSection {
+/* ---- Panneau GAUCHE à ONGLETS (retour utilisateur du 23/09/2026 :
+   "il dois avoir deux onglets [...] un onglet page [...] un onglet mise
+   en page avec les fonctionnalité et la disposition actuel sans la
+   section page") : "Pages" (gestion complète, panneau dédié plein
+   hauteur) et "Mise en page" (bibliothèque d'éléments, inchangée). ---- */
+.docSidebarTabs {
   display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-/* ‹/› CHANGENT la page affichée (voir forgeDocBindPageStripNav) — à ne
-   pas confondre avec les petites flèches ←/→ DANS la carte, qui elles
-   réordonnent la page active parmi ses sœurs sans changer l'affichage. */
-.docPageStrip {
-  display: flex;
-  align-items: stretch;
-  gap: 4px;
-}
-
-.docPageStripNav {
   flex-shrink: 0;
-  width: 22px;
-  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;
+  border-bottom: 1px solid var(--doc-border);
+  margin: -20px -16px 0;
+  padding: 0 8px;
 }
 
-.docPageStripNav:hover:not(:disabled) {
-  border-color: var(--doc-accent);
+.docSidebarTab {
+  flex: 1;
+  padding: 10px 8px;
+  border: none;
+  border-bottom: 2px solid transparent;
+  background: none;
+  color: var(--doc-muted);
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.docSidebarTab:hover {
   color: var(--doc-text);
 }
 
-.docPageStripNav:disabled {
-  opacity: 0.3;
-  cursor: default;
+.docSidebarTab.is-active {
+  color: var(--doc-accent);
+  border-bottom-color: var(--doc-accent);
 }
 
-.docPageList {
+.docSidebarTabPanel {
+  display: flex;
+  flex-direction: column;
+  gap: 22px;
+  min-height: 0;
   flex: 1;
-  min-width: 0;
-  display: flex;
-  justify-content: center;
+}
+
+#docTabPanelPages {
+  gap: 8px;
 }
 
-.docPageListItem {
+.docPageManagerList {
   display: flex;
   flex-direction: column;
-  align-items: center;
   gap: 4px;
-  width: 100%;
-  padding: 6px;
+  overflow-y: auto;
+}
+
+.docPageRow {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 7px 8px;
   border: 1px solid var(--doc-border);
   border-radius: 8px;
   background: var(--doc-card);
   cursor: pointer;
 }
 
-.docPageListItem:hover {
+.docPageRow.is-dragging {
+  opacity: 0.4;
+}
+
+.docPageRow:hover {
   border-color: var(--doc-accent);
 }
 
-.docPageListItem.is-active {
+.docPageRow.is-active {
   border-color: var(--doc-accent);
   box-shadow: 0 0 0 1px var(--doc-accent);
 }
 
-.docPageListItem:focus-visible {
+.docPageRow:focus-visible {
   outline: 2px solid var(--doc-accent);
   outline-offset: 1px;
 }
 
-.docPageListActions {
+.docPageRowHandle {
+  flex-shrink: 0;
+  color: var(--doc-muted);
+  font-size: 13px;
+  cursor: grab;
+}
+
+.docPageRowNumber {
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+  border-radius: 5px;
+  background: var(--doc-bg-2);
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 2px;
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--doc-muted);
 }
 
-.docPageListActions button {
-  width: 16px;
-  height: 16px;
+.docPageRow.is-active .docPageRowNumber {
+  color: var(--doc-accent);
+}
+
+/* Titre 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. */
+.docPageRowTitle {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.docPageRowTitleText {
+  display: inline-block;
+  font-size: 12.5px;
+  font-weight: 600;
+  color: var(--doc-muted);
+  transition: transform 0.6s ease;
+}
+
+.docPageRow.is-active .docPageRowTitleText {
+  color: var(--doc-text);
+}
+
+.docPageRowTitle.has-overflow:hover .docPageRowTitleText {
+  transform: translateX(calc(-1 * var(--marquee-distance, 0px)));
+}
+
+.docPageRowTitle[contenteditable="true"] {
+  outline: none;
+  cursor: text;
+  user-select: text;
+}
+
+.docPageRowTitle[contenteditable="true"] .docPageRowTitleText {
+  border-bottom: 1px solid var(--doc-accent);
+  color: var(--doc-text);
+}
+
+.docPageRowActions {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  flex-shrink: 0;
+}
+
+.docPageRowActions button {
+  width: 20px;
+  height: 20px;
   border: none;
-  border-radius: 4px;
+  border-radius: 5px;
   background: transparent;
   color: var(--doc-muted);
-  font-size: 9px;
+  font-size: 11px;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
-.docPageListActions button:hover:not(:disabled) {
+.docPageRowActions button:hover:not(:disabled) {
   background: var(--doc-bg-2);
   color: var(--doc-text);
 }
 
-.docPageListActions button:disabled {
+.docPageRowActions button:disabled {
   opacity: 0.3;
   cursor: default;
 }
 
-.docPageListDelete:hover:not(:disabled) {
+.docPageRowDelete:hover:not(:disabled) {
   color: var(--doc-quiz-danger-border);
 }
 
-.docPageListSquare {
-  width: 100%;
-  aspect-ratio: 1;
-  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);
-}
-
-.docPageListCounter {
-  font-size: 10px;
-  color: var(--doc-muted);
-}
-
 /* ---- RIGHT SIDEBAR : Propriétés ---- */
 .docField {
   display: flex;