feat(carte-o): brouillon des 17 accroches au survol (à valider par Jules)

Champ problematique ajouté aux 17 nodes de carte-o-source.yaml (source
éditoriale), propagé par build-carte-o.js, lu en priorité par l'infobulle
de CarteO.vue. Page temporaire /apercu-accroches pour la relecture :
À SUPPRIMER avant merge. Branche partie de wip/pont-tailwind4-20260817 :
ne pas merger telle quelle dans main (elle embarque le pont non validé),
cherry-pick de ce commit seul, sans la page d'aperçu.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SHuEiSieLhPY2uZbCu6uQb

src/components/vue/CarteO.vue

@@ -20,6 +20,7 @@ interface CarteNode {
   theme?: string
   path?: string
   domain?: string  // V1.2-O : domaine plateforme source (logo Brandfetch CDN)
+  problematique?: string  // P3 §3 : accroche au survol (brouillon MOE 29/09, a valider)
 }
 
 // V1.2-O : logos plateforme via Brandfetch CDN (visible zoom > 1.5x seulement)
@@ -364,7 +365,7 @@ function render() {
 
   // Tooltip <title>
   nodeGroups.append('title')
-    .text(d => `${d.label}\n[${d.family}]\n${truncate(d.resume || d.intention || '', 200)}`)
+    .text(d => `${d.label}\n[${d.family}]\n${truncate(d.problematique || d.resume || d.intention || '', 200)}`)
 
   // V1.3-D : Simulation force-directed fit-cadre + animation continue subtile
   // - link distance/strength differencies : TMIP (central) court/fort, autres essais souples

src/pages/apercu-accroches.astro

@@ -0,0 +1,44 @@
+---
+// Page TEMPORAIRE d'apercu des 17 accroches de la Carte O (P3 §3, brouillon MOE 29/09).
+// Sert a la relecture de Jules : chaque node avec l'accroche qui s'affichera au survol.
+// A SUPPRIMER avant tout merge dans main.
+import carte from '../../public/data/carte-o.json';
+export const prerender = true;
+const nodes = carte.nodes as Array<{ id: string; label: string; problematique?: string; niveau?: number }>;
+---
+<!doctype html>
+<html lang="fr">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="robots" content="noindex" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>apercu-accroches</title>
+    <style>
+      body { font-family: system-ui, sans-serif; background: #f7f4ee; color: #1d1d1b; margin: 0; padding: 32px 16px; }
+      main { max-width: 760px; margin: 0 auto; }
+      h1 { font-size: 1.1rem; font-weight: 600; margin: 0 0 4px; }
+      p.note { margin: 0 0 24px; color: #5b5a55; font-size: .9rem; }
+      ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
+      li { background: #fff; border: 1px solid #e3ded3; border-radius: 8px; padding: 12px 14px; }
+      li.centre { border-color: #1d1d1b; }
+      .label { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: #6b6a64; }
+      .id { font-family: ui-monospace, monospace; font-size: .7rem; color: #9a978f; margin-left: 6px; text-transform: none; }
+      .acc { font-size: 1.05rem; line-height: 1.4; margin-top: 4px; }
+      .manque { color: #b3261e; }
+    </style>
+  </head>
+  <body>
+    <main>
+      <h1>Carte O : accroches au survol (brouillon, à valider)</h1>
+      <p class="note">{nodes.filter((n) => n.problematique).length} accroches sur {nodes.length} nodes, lues dans <code>public/data/carte-o.json</code>.</p>
+      <ol>
+        {nodes.map((n, i) => (
+          <li class={n.niveau === 0 ? 'centre' : ''}>
+            <div class="label">{i + 1}. {n.label}<span class="id">{n.id}</span></div>
+            <div class={n.problematique ? 'acc' : 'acc manque'}>{n.problematique ?? 'aucune accroche'}</div>
+          </li>
+        ))}
+      </ol>
+    </main>
+  </body>
+</html>