feat: commentaires façon Notion — ancres jaunes, tiroir refondu, réactions emoji sur texte (v7.64.0)

- Réaction sur texte : bouton 🙂+ (« React to selected text ») dans la toolbar
  de sélection → sélecteur d'émoji EXISTANT en mode réaction (en-tête = texte
  sélectionné + ✋, onglets masqués, ligne Recent au-dessus de la grille
  People, Filter… et barre de catégories avec + custom inchangés)
- Backend : migration 37 text_reactions (UNIQUE plage × emoji × utilisateur →
  POST idempotent) + GET/POST /api/pages/{id}/reactions (GET groupé par plage
  emoji/count/mine, POST toggle, 400 sur plage vide)
- Affichage : plage commentée/réagie peinte en jaune (_paintAnchors après
  render/loadComments/loadReactions), pastille 😀+compte après la plage, clic
  pastille = rouvrir le sélecteur, clic ancre = ouvrir et centrer le fil
- Pastilles = annotations : gtTok/gtMd les ignorent (y compris le chemin
  rapide innerText) et les offsets _srcOffset/_srcNodeLen les excluent → le
  texte sauvé est identique (vérifié dans le e2e)
- Tiroir refondu : carte de fil (avatar, nom, horodatage, ✓ toggle
  resolve/reopen, ⋯ → Copy link #cmt-<id>/Delete), saisie « Add a comment... »
  avec @ et envoi ↑/Entrée ; #cmt-<id> ouvre et centre le fil au chargement ;
  loadComments + loadReactions à l'ouverture (commentCount enfin renseigné)
- Fixes : resolveComment ne pouvait pas rouvrir (toujours resolved:true) ;
  showCommentBtn ignorait les sélections à ancre élément (bouton 💬 jamais
  affiché)
- Tests : tests/test_v764_comments_reactions.py (8, dont toggle API réel),
  e2e/v764_comments_reactions.spec.js (8 étapes) — 3/3 specs e2e verts,
  suite complète 1383 passed / 0 failed, ruff OK, OpenAPI 7.64.0 (526 chemins)

static/css/app.css

@@ -3154,6 +3154,95 @@ button.breadcrumb-current { max-width: 260px; }
 .fd-msheet .slash-item { padding: 12px 10px; font-size: 15px; }
 .fd-msheet .slash-item:active { background: var(--bg-hover); }
 
+/* ══ v7.64 — Commentaires & réactions façon Notion ══
+   Ancres jaunes (texte commenté), pastilles de réaction, tiroir refondu ══ */
+.fd-anchor {
+  background: rgba(255, 213, 0, .32);
+  border-radius: 2px;
+  cursor: pointer;
+}
+.fd-anchor-done { background: rgba(255, 255, 255, .10); }
+.fd-anchor-react { background: rgba(255, 213, 0, .28); }
+.fd-react-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  margin-left: 4px;
+  padding: 0 5px;
+  height: 19px;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: var(--bg-secondary);
+  cursor: pointer;
+  vertical-align: middle;
+  font-size: 11px;
+  line-height: 1;
+  user-select: none;
+}
+.fd-react-chip:hover { background: var(--bg-hover); }
+.fd-react-chip img { width: 12px; height: 12px; object-fit: contain; }
+.fd-react-n { font-size: 10px; color: var(--text-dim); }
+
+/* Tiroir de commentaires (fil + saisie) */
+.comment-thread {
+  position: relative;
+  margin-bottom: 12px;
+  padding: 10px 12px;
+  background: var(--bg-secondary, #2a2a2a);
+  border: 1px solid var(--border, #333);
+  border-radius: 10px;
+}
+.comment-thread.has-anchor { border-left: 3px solid var(--accent, #2383E2); }
+.comment-thread.is-resolved { opacity: .55; }
+.thread-flash { outline: 2px solid var(--accent, #2383E2); outline-offset: 2px; }
+.ct-head { display: flex; align-items: center; gap: 8px; position: relative; }
+.ct-avatar {
+  width: 24px; height: 24px; border-radius: 50%; color: #fff; flex-shrink: 0;
+  display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700;
+}
+.ct-name { font-size: 12px; font-weight: 600; color: var(--text-primary); }
+.ct-time { font-size: 11px; color: var(--text-dim); margin-left: auto; }
+.ct-actions { display: flex; gap: 2px; margin-left: 2px; }
+.ct-act {
+  width: 24px; height: 24px; border: none; background: transparent; border-radius: 5px;
+  color: var(--text-dim); font-size: 13px; line-height: 1; cursor: pointer;
+}
+.ct-act:hover { background: var(--bg-hover); color: var(--text-primary); }
+.ct-act.is-on { color: var(--accent, #2383E2); }
+.ct-menu {
+  position: absolute; right: 0; top: 28px; z-index: 6; min-width: 156px; padding: 4px;
+  background: var(--bg-modal); border: 1px solid var(--border); border-radius: 8px;
+  box-shadow: 0 8px 24px rgba(0,0,0,.4);
+}
+.ct-menu-item {
+  display: block; width: 100%; text-align: left; padding: 7px 10px; font-size: 13px;
+  color: var(--text-primary); background: none; border: none; border-radius: 5px; cursor: pointer;
+}
+.ct-menu-item:hover { background: var(--bg-hover); }
+.ct-menu-item.is-danger { color: #e5484d; }
+.ct-body { font-size: 13px; white-space: pre-wrap; margin-top: 6px; color: var(--text-primary); }
+.ct-anchor-label { font-size: 10px; color: var(--text-dim); margin-top: 6px; }
+.comments-drawer-input { border-top: 1px solid var(--border, #333); padding: 12px 16px; }
+.ct-input-row { display: flex; gap: 6px; align-items: flex-end; }
+.ct-input-row textarea {
+  flex: 1; min-width: 0; background: var(--bg-secondary, #2a2a2a);
+  border: 1px solid var(--border, #333); border-radius: 8px; color: var(--text-primary);
+  font-size: 13px; font-family: inherit; line-height: 1.4; padding: 8px 10px; resize: none; outline: none;
+}
+.ct-input-row textarea:focus { border-color: var(--accent, #2383E2); }
+.ct-input-actions { display: flex; gap: 4px; align-items: center; padding-bottom: 2px; }
+.ct-send {
+  width: 30px; height: 30px; border-radius: 50%; background: var(--accent, #2383E2); color: #fff;
+  border: none; font-size: 15px; line-height: 1; cursor: pointer; flex-shrink: 0;
+}
+.ct-send:disabled { opacity: .4; cursor: default; }
+
+/* Bouton « React to selected text » de la toolbar de sélection */
+.ft-react-ico { position: relative; font-size: 15px; line-height: 1; }
+.ft-react-plus {
+  position: absolute; right: -5px; top: -4px; font-size: 9px; font-weight: 700; color: var(--text-dim);
+}
+
 /* EDITOR STATUSBAR */
 .editor-statusbar {
   position: fixed;