Audit complet de mise en forme — Bouton (3e élément du tableau)

Implémente toutes les options manquantes identifiées pour l'élément
Bouton : typographie (gras/italique/transformation/police/taille/
espacement des lettres/couleur), icône SVG optionnelle avec position
(avant/après le texte) et taille réglables — au-delà de l'Étiquette,
qui n'a qu'une icône fixe —, tous les attributs de boîte partagés déjà
créés pour Titre/Paragraphe/Image, et un effet visuel universel au
survol/clic.

Deux ajouts transversaux demandés pendant le test : un réglage "les 4
côtés de la bordure à la fois" dans le module de boîte partagé
(bénéficie automatiquement à tous les éléments qui l'utilisent), et le
glisser-déposer d'un élément du canevas vers une autre page via le
panneau Pages (le mécanisme serveur existait déjà pour la pagination
automatique, seule l'interaction manuelle manquait).

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

static/document/document-editor.css

@@ -626,7 +626,16 @@ img.docImage {
   display: block;
 }
 
+/* display:inline-flex + gap (au lieu du bloc simple d'origine) : accueille
+   l'icône optionnelle avant/après le texte (retour utilisateur du
+   26/09/2026, audit — colonne "Icône" : "aucune icône à côté du texte du
+   bouton, contrairement au badge") sans avoir à gérer d'espacement en
+   dur — sans icône, .docButtonLabel reste seul enfant, gap n'a alors
+   aucun effet visible (rien à espacer). */
 .docButton {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
   border: none;
   border-radius: 999px;
   padding: 10px 22px;
@@ -635,6 +644,39 @@ img.docImage {
   background: var(--doc-accent);
   color: #14100c;
   cursor: pointer;
+  transition: filter 0.15s ease, transform 0.08s ease;
+}
+
+/* États interactifs (retour utilisateur du 26/09/2026, audit — colonne
+   "États interactifs" : "aucune notion d'état n'existe") — un effet
+   UNIVERSEL (jamais configurable par bouton, volontairement : une
+   couleur de survol par instance aurait exigé une propriété CSS
+   personnalisée par bouton, fragile et sans grande valeur ajoutée pour
+   du contenu de formation) suffit à donner un vrai retour visuel
+   survol/actif à TOUS les boutons, y compris ceux déjà créés. "Désactivé"
+   volontairement laissé de côté : un bouton de contenu n'est pas un
+   vrai contrôle de formulaire, aucun état "désactivé" n'a de sens ici
+   (voir docs/plan/AUDIT_MISE_EN_FORME.md). */
+.docButton:hover {
+  filter: brightness(0.92);
+}
+
+.docButton:active {
+  transform: scale(0.97);
+}
+
+.docButtonIcon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 1em;
+  height: 1em;
+}
+
+.docButtonIcon svg {
+  width: 100%;
+  height: 100%;
 }
 
 .docList {
@@ -1510,6 +1552,15 @@ img.docImage {
   box-shadow: 0 0 0 1px var(--doc-accent);
 }
 
+/* Cible de dépôt d'un élément du canevas glissé depuis une AUTRE page
+   (retour utilisateur du 26/09/2026), distincte de .is-dragging
+   (glisser une PAGE) et de .is-active (page actuellement affichée). */
+.docPageRow--dropTarget {
+  border-color: var(--doc-accent);
+  border-style: dashed;
+  box-shadow: 0 0 0 2px var(--doc-accent);
+}
+
 .docPageRow:focus-visible {
   outline: 2px solid var(--doc-accent);
   outline-offset: 1px;