Supprime la couche de formes libres, déplace la navigation de page dans le panneau gauche

Formes libres (rectangle/cercle/triangle/trait) retirées de bout en
bout (bibliothèque, rendu, panneau Propriétés, grille d'accroche,
JS/CSS associés) — fonctionnalité non retenue.

La bande de vignettes visuelles des pages au-dessus du canevas est
remplacée par une section "Pages" dans le panneau de gauche (liste
simple : ajouter/renommer/réordonner (haut/bas)/supprimer), à la
place de l'ex-catégorie "Mise en page" de la bibliothèque. La route
document_edit ne rend plus qu'une seule page (celle affichée) au
chargement, au lieu de toutes les pages pour alimenter les anciennes
vignettes.

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

static/document/document-editor.css

@@ -260,12 +260,6 @@ body.objectEditBody > main.content {
   margin-bottom: 10px;
 }
 
-.docShapesGrid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 8px;
-}
-
 .docLibItem {
   border: 1px solid var(--doc-border);
   border-radius: 10px;
@@ -279,14 +273,6 @@ body.objectEditBody > main.content {
   box-shadow: var(--doc-glow);
 }
 
-.docLibItem--shape {
-  padding: 10px 8px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 6px;
-}
-
 .docLibItem--row {
   padding: 9px 10px;
   display: flex;
@@ -315,10 +301,6 @@ body.objectEditBody > main.content {
   flex-shrink: 0;
 }
 
-.docLibIcon--rectangle::before { content: "▭"; }
-.docLibIcon--cercle::before { content: "○"; }
-.docLibIcon--triangle::before { content: "△"; }
-.docLibIcon--trait::before { content: "―"; }
 .docLibIcon--paragraphe::before { content: "¶"; }
 .docLibIcon--image::before { content: "🖼"; }
 .docLibIcon--bouton::before { content: "⬚"; }
@@ -387,8 +369,7 @@ body.objectEditBody > main.content {
 
 /* Enfant qui reçoit le HTML rendu (voir #docPage vs #docPageContent dans
    document-editor.js — le rafraîchissement du canevas ne remplace QUE ce
-   contenu, jamais .docPage elle-même, pour que .docSnapGridOverlay,
-   sa voisine, survive à chaque rafraîchissement). */
+   contenu, jamais .docPage elle-même). */
 .docPageContent {
   display: flex;
   flex-direction: column;
@@ -447,17 +428,6 @@ body.objectEditBody > main.content {
   box-shadow: inset -3px 0 0 0 var(--doc-accent);
 }
 
-.docShape[data-element-id] {
-  padding: 0;
-  margin: 0;
-  border-radius: 0;
-}
-
-.docShape[data-element-id].docSelected {
-  outline: 2px solid var(--doc-accent);
-  background: transparent;
-}
-
 .docText {
   outline: none;
 }
@@ -1096,27 +1066,6 @@ img.docImage {
   padding: 10px;
 }
 
-/* ---- grille d'accroche (formes libres) — voir docs/plan/PLAN.md,
-   "grille d'accroche réelle" : visible en overlay pendant le déplacement
-   d'une forme (voir .docPage--dragging-shape ci-dessous), jamais
-   décorative. */
-.docSnapGridOverlay {
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-  z-index: 1;
-  opacity: 0;
-  transition: opacity 0.1s ease;
-  background-image:
-    linear-gradient(to right, rgb(255 95 46 / 12%) 1px, transparent 1px),
-    linear-gradient(to bottom, rgb(255 95 46 / 12%) 1px, transparent 1px);
-  background-size: var(--doc-snap-size, 8px) var(--doc-snap-size, 8px);
-}
-
-.docPage.docPage--dragging-shape .docSnapGridOverlay {
-  opacity: 1;
-}
-
 .docZoomPill {
   position: absolute;
   bottom: 24px;
@@ -1213,125 +1162,53 @@ img.docImage {
   white-space: nowrap;
 }
 
-/* ---- Bande de VIGNETTES MINIATURES des pages, au-dessus de la page
-   ET centrée dans le conteneur du milieu (.docCanvasArea, jamais toute
-   la largeur de l'éditeur par-dessus les panneaux latéraux — retour
-   utilisateur du 21/09/2026 : "je préfère avoir des miniatures ...
-   centré dans le conteneur du milieu"). Chaque vignette affiche un
-   VRAI rendu réduit du contenu de sa page (voir .docPageThumbInner plus
-   bas, et rendered_pages côté serveur dans routes/document/
-   document_edit.py) — jamais une carte générique numéro/titre. Masquée
-   en Mode Aperçu (voir la règle .docEditor3--preview plus bas), qui a
-   sa propre navigation via .docPageNavPill ci-dessus. ---- */
-.docPageThumbs {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: flex-end;
-  flex-wrap: wrap;
-  gap: 16px;
-  padding: 4px 20px 28px;
-  flex-shrink: 0;
-}
-
-.docPageThumbCard {
+/* ---- 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. ---- */
+.docPageSection {
   display: flex;
   flex-direction: column;
-  align-items: center;
-  gap: 6px;
-  flex-shrink: 0;
-  border: none;
-  background: none;
-  padding: 0;
-  cursor: pointer;
-  font-family: inherit;
+  gap: 8px;
 }
 
-.docPageThumbCard.is-dragging {
-  opacity: 0.4;
-}
-
-.docPageThumbCard:focus-visible {
-  outline: 2px solid var(--doc-accent);
-  outline-offset: 2px;
-  border-radius: 10px;
-}
-
-.docPageThumbFrame {
-  /* <span> (jamais <div>, invalide comme enfant direct d'un <button> —
-     voir templates/document/document_edit.html) : display:block requis
-     pour que width/aspect-ratio s'appliquent normalement. */
-  display: block;
-  position: relative;
-  width: 132px;
-  aspect-ratio: 4 / 3;
-  border: 2px solid var(--doc-border);
-  border-radius: 10px;
-  overflow: hidden;
-  background: var(--doc-card);
-  box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
-  transition: border-color 0.15s ease, transform 0.15s ease;
-}
-
-.docPageThumbCard:hover .docPageThumbFrame {
-  border-color: var(--doc-accent);
-  transform: translateY(-2px);
-}
-
-.docPageThumbCard.is-active .docPageThumbFrame {
-  border-color: var(--doc-accent);
-  box-shadow: 0 0 0 2px var(--doc-accent);
-}
-
-/* Astuce "scale inverse" pour une vraie vignette : le contenu est rendu
-   à sa largeur RÉELLE (voir .docPage, 760px) puis réduit visuellement —
-   jamais un second moteur de rendu séparé pour les miniatures, c'est le
-   MÊME rendu que le canevas principal, juste redimensionné en CSS. Le
-   cadre (.docPageThumbFrame) le rogne verticalement s'il dépasse — un
-   support de formation "page" est proche d'un format diapositive, ce
-   recadrage reste représentatif. */
-.docPageThumbInner {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 760px;
-  transform: scale(0.1737);
-  transform-origin: top left;
-  pointer-events: none;
-}
-
-.docPageThumbDelete {
-  position: absolute;
-  top: 4px;
-  right: 4px;
-  display: none;
-  align-items: center;
-  justify-content: center;
-  width: 18px;
-  height: 18px;
-  border-radius: 50%;
-  border: none;
-  background: rgb(11 14 20 / 65%);
-  color: #fff;
-  font-size: 10px;
-  cursor: pointer;
-}
-
-.docPageThumbCard:hover .docPageThumbDelete {
+.docPageList {
   display: flex;
+  flex-direction: column;
+  gap: 4px;
 }
 
-.docPageThumbDelete:hover {
-  background: var(--doc-quiz-danger-border);
+.docPageListItem {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 7px 8px;
+  border: 1px solid var(--doc-border);
+  border-radius: 8px;
+  background: var(--doc-card);
+  cursor: pointer;
 }
 
-.docPageThumbs.docPageTabs--single .docPageThumbDelete {
-  display: none;
+.docPageListItem:hover {
+  border-color: var(--doc-accent);
 }
 
-.docPageThumbLabel {
-  max-width: 132px;
-  font-size: 12px;
+.docPageListItem.is-active {
+  border-color: var(--doc-accent);
+  box-shadow: 0 0 0 1px var(--doc-accent);
+}
+
+.docPageListItem:focus-visible {
+  outline: 2px solid var(--doc-accent);
+  outline-offset: 1px;
+}
+
+.docPageListTitle {
+  flex: 1;
+  min-width: 0;
+  font-size: 12.5px;
   font-weight: 600;
   color: var(--doc-muted);
   overflow: hidden;
@@ -1339,11 +1216,11 @@ img.docImage {
   white-space: nowrap;
 }
 
-.docPageThumbCard.is-active .docPageThumbLabel {
+.docPageListItem.is-active .docPageListTitle {
   color: var(--doc-text);
 }
 
-.docPageThumbLabel[contenteditable="true"] {
+.docPageListTitle[contenteditable="true"] {
   outline: none;
   border-bottom: 1px solid var(--doc-accent);
   cursor: text;
@@ -1351,21 +1228,41 @@ img.docImage {
   color: var(--doc-text);
 }
 
-.docPageThumbAddCard .docPageThumbFrame {
+.docPageListActions {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  flex-shrink: 0;
+}
+
+.docPageListActions button {
+  width: 20px;
+  height: 20px;
+  border: none;
+  border-radius: 5px;
+  background: transparent;
+  color: var(--doc-muted);
+  font-size: 11px;
+  cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
-  border-style: dashed;
-  color: var(--doc-muted);
-  font-size: 24px;
-  font-weight: 700;
-  box-shadow: none;
 }
 
-.docPageThumbAddCard:hover .docPageThumbFrame {
+.docPageListActions button:hover:not(:disabled) {
+  background: var(--doc-bg-2);
   color: var(--doc-text);
 }
 
+.docPageListActions button:disabled {
+  opacity: 0.3;
+  cursor: default;
+}
+
+.docPageListDelete:hover:not(:disabled) {
+  color: var(--doc-quiz-danger-border);
+}
+
 /* ---- RIGHT SIDEBAR : Propriétés ---- */
 .docField {
   display: flex;
@@ -1606,8 +1503,7 @@ img.docImage {
 .docEditor3.docEditor3--preview .docSidebarLeft,
 .docEditor3.docEditor3--preview .docSidebarRight,
 .docEditor3.docEditor3--preview .docBottomNav,
-.docEditor3.docEditor3--preview .docZoomPill,
-.docEditor3.docEditor3--preview .docPageThumbs {
+.docEditor3.docEditor3--preview .docZoomPill {
   display: none;
 }