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

public/data/carte-o-source.yaml

@@ -4,6 +4,8 @@
 # statut: gestation (draft/en cours) | edite (publie)
 # nature: essai (texte politique) | projet (projet archi)
 # niveau: 0 (centre) | 1 (concepts force) | 2 (thematiques/projets)
+# problematique (optionnel) : accroche affichee au survol du node (une tension, pas une definition)
+#   BROUILLON MOE 29/09 : les 17 textes sont a valider par Jules
 # domain (optionnel) : domaine plateforme source pour logo Brandfetch CDN
 #   - affiche logo en bas-droite du node si zoom > 1.5x
 #   - V1.2 par defaut : substack.com pour tous les essais AEP
@@ -16,6 +18,7 @@ centre:
   niveau: 0
   nature: essai
   statut: gestation
+  problematique: "Diagnostiquer avant de prescrire : où le corps social bloque-t-il, et quelle aiguille le débloque ?"
   resume: "Manifeste central AEP : inventer un nouveau contrat social et diagnostiquer/soigner les pathologies du corps social."
 
 concepts_force: []
@@ -26,90 +29,105 @@ thematiques:
     niveau: 2
     nature: essai
     statut: gestation
+    problematique: "Tout se tient : c'est pour ça qu'on ne répare rien en traitant les problèmes un par un."
     domain: "substack.com"
   - id: "pratiques-collectives"
     label: "Pratiques collectives"
     niveau: 2
     nature: essai
     statut: gestation
+    problematique: "Seul, chacun a raison et reste impuissant. Qu'est-ce qui fait passer du « je » au « nous » ?"
     domain: "substack.com"
   - id: "art-narration"
     label: "Art & narration"
     niveau: 2
     nature: essai
     statut: gestation
+    problematique: "On ne quitte pas un monde qu'on n'arrive pas à raconter autrement."
     domain: "substack.com"
   - id: "pouvoir-domination"
     label: "Rapport au pouvoir"
     niveau: 2
     nature: essai
     statut: gestation
+    problematique: "Le pouvoir des pires n'est pas un accident : c'est une mécanique. Laquelle démonter ?"
     domain: "substack.com"
   - id: "medias-critique"
     label: "Medias & pensee critique"
     niveau: 2
     nature: essai
     statut: gestation
+    problematique: "S'informer tous les jours et comprendre de moins en moins : à qui profite le bruit ?"
     domain: "substack.com"
   - id: "justice-securite"
     label: "Justice & securite"
     niveau: 2
     nature: essai
     statut: gestation
+    problematique: "Dure pour les faibles, douce pour les puissants : punir plus, ou réparer mieux ?"
     domain: "substack.com"
   - id: "sante-globale"
     label: "Sante globale"
     niveau: 2
     nature: essai
     statut: gestation
+    problematique: "Le burn-out est-il une maladie à soigner, ou le symptôme d'un travail à changer ?"
     domain: "substack.com"
   - id: "agriculture"
     label: "Agriculture"
     niveau: 2
     nature: essai
     statut: gestation
+    problematique: "Le sol vivant est une infrastructure à entretenir, pas un stock à vider."
     domain: "substack.com"
   - id: "post-croissance"
     label: "Post-croissance"
     niveau: 2
     nature: essai
     statut: gestation
+    problematique: "Performants jusqu'à casser : et si la robustesse valait mieux que la croissance ?"
     domain: "substack.com"
   - id: "anthropocene"
     label: "Anthropocene & effondrement"
     niveau: 2
     nature: essai
     statut: gestation
+    problematique: "Quand tout se dérègle en même temps, que protège-t-on en premier ?"
     domain: "substack.com"
   - id: "education"
     label: "Education a la transformation"
     niveau: 2
     nature: essai
     statut: gestation
+    problematique: "Former des esprits qui doutent, ou des rouages qui tiennent le rang ?"
     domain: "substack.com"
   - id: "urbanisme"
     label: "Urbanisme"
     niveau: 2
     nature: essai
     statut: gestation
+    problematique: "Couler du béton neuf, ou transformer ce qui est déjà là ?"
     domain: "substack.com"
   - id: "geopolitique"
     label: "Geopolitique & decolonisation"
     niveau: 2
     nature: essai
     statut: gestation
+    problematique: "Notre confort repose sur un empire qui n'a jamais vraiment pris fin. Qui paie l'addition ?"
     domain: "substack.com"
   - id: "ia-technologie"
     label: "IA & technologie"
     niveau: 2
     nature: essai
     statut: gestation
+    problematique: "Un outil qui pense à notre place nous rend-il plus libres, ou plus dépendants ?"
     domain: "substack.com"
   - id: "spiritualite"
     label: "Spiritualite"
     niveau: 2
     nature: essai
     statut: gestation
+    problematique: "Retrouver du sens sans retomber dans le dogme, ni dans le développement personnel."
     domain: "substack.com"
 
 projets:
@@ -118,6 +136,7 @@ projets:
     niveau: 2
     nature: projet
     statut: gestation
+    problematique: "7,6 millions de maisons périurbaines : une impasse, ou le plus grand chantier de transformation du pays ?"
     resume: "Transport, mobilite, industrie, politique - projet archi. Exemple de projet archi relie aux thematiques AEP."
     # V1.3-D : lien explicite au noeud central (pont vision <-> pratique)
     lien_central: true

public/data/carte-o.json

@@ -1,6 +1,6 @@
 {
   "version": "1.1",
-  "generatedAt": "2026-08-17T11:48:54.594Z",
+  "generatedAt": "2026-09-29T12:05:12.880Z",
   "nodes": [
     {
       "id": "contrat-social-medecine-corps-social",
@@ -10,7 +10,8 @@
       "statut": "gestation",
       "resume": "Manifeste central AEP : inventer un nouveau contrat social et diagnostiquer/soigner les pathologies du corps social.",
       "radius": 30,
-      "family": "concept"
+      "family": "concept",
+      "problematique": "Diagnostiquer avant de prescrire : où le corps social bloque-t-il, et quelle aiguille le débloque ?"
     },
     {
       "id": "systemique",
@@ -21,7 +22,8 @@
       "resume": null,
       "radius": 12,
       "family": "concept",
-      "domain": "substack.com"
+      "domain": "substack.com",
+      "problematique": "Tout se tient : c'est pour ça qu'on ne répare rien en traitant les problèmes un par un."
     },
     {
       "id": "pratiques-collectives",
@@ -32,7 +34,8 @@
       "resume": null,
       "radius": 12,
       "family": "concept",
-      "domain": "substack.com"
+      "domain": "substack.com",
+      "problematique": "Seul, chacun a raison et reste impuissant. Qu'est-ce qui fait passer du « je » au « nous » ?"
     },
     {
       "id": "art-narration",
@@ -43,7 +46,8 @@
       "resume": null,
       "radius": 12,
       "family": "concept",
-      "domain": "substack.com"
+      "domain": "substack.com",
+      "problematique": "On ne quitte pas un monde qu'on n'arrive pas à raconter autrement."
     },
     {
       "id": "pouvoir-domination",
@@ -54,7 +58,8 @@
       "resume": null,
       "radius": 12,
       "family": "concept",
-      "domain": "substack.com"
+      "domain": "substack.com",
+      "problematique": "Le pouvoir des pires n'est pas un accident : c'est une mécanique. Laquelle démonter ?"
     },
     {
       "id": "medias-critique",
@@ -65,7 +70,8 @@
       "resume": null,
       "radius": 12,
       "family": "concept",
-      "domain": "substack.com"
+      "domain": "substack.com",
+      "problematique": "S'informer tous les jours et comprendre de moins en moins : à qui profite le bruit ?"
     },
     {
       "id": "justice-securite",
@@ -76,7 +82,8 @@
       "resume": null,
       "radius": 12,
       "family": "concept",
-      "domain": "substack.com"
+      "domain": "substack.com",
+      "problematique": "Dure pour les faibles, douce pour les puissants : punir plus, ou réparer mieux ?"
     },
     {
       "id": "sante-globale",
@@ -87,7 +94,8 @@
       "resume": null,
       "radius": 12,
       "family": "concept",
-      "domain": "substack.com"
+      "domain": "substack.com",
+      "problematique": "Le burn-out est-il une maladie à soigner, ou le symptôme d'un travail à changer ?"
     },
     {
       "id": "agriculture",
@@ -98,7 +106,8 @@
       "resume": null,
       "radius": 12,
       "family": "concept",
-      "domain": "substack.com"
+      "domain": "substack.com",
+      "problematique": "Le sol vivant est une infrastructure à entretenir, pas un stock à vider."
     },
     {
       "id": "post-croissance",
@@ -109,7 +118,8 @@
       "resume": null,
       "radius": 12,
       "family": "concept",
-      "domain": "substack.com"
+      "domain": "substack.com",
+      "problematique": "Performants jusqu'à casser : et si la robustesse valait mieux que la croissance ?"
     },
     {
       "id": "anthropocene",
@@ -120,7 +130,8 @@
       "resume": null,
       "radius": 12,
       "family": "concept",
-      "domain": "substack.com"
+      "domain": "substack.com",
+      "problematique": "Quand tout se dérègle en même temps, que protège-t-on en premier ?"
     },
     {
       "id": "education",
@@ -131,7 +142,8 @@
       "resume": null,
       "radius": 12,
       "family": "concept",
-      "domain": "substack.com"
+      "domain": "substack.com",
+      "problematique": "Former des esprits qui doutent, ou des rouages qui tiennent le rang ?"
     },
     {
       "id": "urbanisme",
@@ -142,7 +154,8 @@
       "resume": null,
       "radius": 12,
       "family": "concept",
-      "domain": "substack.com"
+      "domain": "substack.com",
+      "problematique": "Couler du béton neuf, ou transformer ce qui est déjà là ?"
     },
     {
       "id": "geopolitique",
@@ -153,7 +166,8 @@
       "resume": null,
       "radius": 12,
       "family": "concept",
-      "domain": "substack.com"
+      "domain": "substack.com",
+      "problematique": "Notre confort repose sur un empire qui n'a jamais vraiment pris fin. Qui paie l'addition ?"
     },
     {
       "id": "ia-technologie",
@@ -164,7 +178,8 @@
       "resume": null,
       "radius": 12,
       "family": "concept",
-      "domain": "substack.com"
+      "domain": "substack.com",
+      "problematique": "Un outil qui pense à notre place nous rend-il plus libres, ou plus dépendants ?"
     },
     {
       "id": "spiritualite",
@@ -175,7 +190,8 @@
       "resume": null,
       "radius": 12,
       "family": "concept",
-      "domain": "substack.com"
+      "domain": "substack.com",
+      "problematique": "Retrouver du sens sans retomber dans le dogme, ni dans le développement personnel."
     },
     {
       "id": "tmip",
@@ -185,7 +201,8 @@
       "statut": "gestation",
       "resume": "Transport, mobilite, industrie, politique - projet archi. Exemple de projet archi relie aux thematiques AEP.",
       "radius": 18,
-      "family": "ressource"
+      "family": "ressource",
+      "problematique": "7,6 millions de maisons périurbaines : une impasse, ou le plus grand chantier de transformation du pays ?"
     }
   ],
   "edges": [

scripts/build-carte-o.js

@@ -59,6 +59,8 @@ async function main() {
     }
     // V1.2-O : propage le champ optionnel domain (logo plateforme via Brandfetch CDN)
     if (obj.domain) node.domain = obj.domain
+    // P3 §3 : accroche problematisee affichee au survol (une tension, pas une definition)
+    if (obj.problematique) node.problematique = obj.problematique
     nodes.push(node)
   }
 

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>