feat(v13-d): Carte O Option B rectangle central + bandeau sommaire + legende + TMIP relie

- YAML carte-o-source : label central -> 'Une medecine du corps social pour
  ecrire un nouveau contrat social' (phrase pleine 3 lignes)
- YAML : projet TMIP gagne lien_central:true (edge explicite centre <-> projet)
- build-carte-o.js : addEdge accepte opts.central=true pour tagger les edges
  rattachees au noeud central (permet tuning force-link cote Vue)
- carte-o.json regenere : 17 nodes, 20 edges (vs 19 V1.2-O), tous les edges
  central->thematiques + central->tmip portent flag central:true
- CarteO.vue : noeud central rendu en RECT 300x64 fill encre (vs cercle r30),
  label blanc multi-tspan 3 lignes 13px font-weight 500 line-height 1.35
- CarteO.vue : splitCentralLabel reecrit pour wrap intelligent (3 lignes
  ~30 chars), preserve compat ' + ' (V1.2)
- CarteO.vue : force tuning V1.3 -> alphaDecay 0.025, velocityDecay 0.4,
  forceCollide +12 (CENTRAL_COLLIDE_RADIUS=160 pour le rect), forceX/Y
  strength 0.05 rappel cadre, link distance/strength differencies
  (central->projet = 90/0.6, central->essai = 200/0.3)
- CarteO.vue : hover handler selector etendu rect|circle
- CarteOWrapper.vue : CarteEdge gagne champ central?:boolean
- ColCentre.astro : tabs Chatbot retires (ChatbotV2 import retire aussi),
  remplaces par header bandeau 'Sommaire editorial d'architecture
  d'ecologie politique' (gauche, monospace 12px) + legende 3 symboles
  (publie ● / a venir ○ / projet 🟠) en droite

Build SSR : 5 pages prerender, 0 warning, 4.35s.

public/data/carte-o-source.yaml

@@ -12,7 +12,7 @@ version: "1.1"
 
 centre:
   id: "contrat-social-medecine-corps-social"
-  label: "Contrat social + Medecine du corps social"
+  label: "Une medecine du corps social pour ecrire un nouveau contrat social"
   niveau: 0
   nature: essai
   statut: gestation
@@ -119,6 +119,8 @@ projets:
     nature: projet
     statut: gestation
     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
     liens_thematiques:
       - "urbanisme"
       - "justice-securite"

public/data/carte-o.json

@@ -1,10 +1,10 @@
 {
   "version": "1.1",
-  "generatedAt": "2026-05-11T16:47:45.459Z",
+  "generatedAt": "2026-05-11T17:59:41.381Z",
   "nodes": [
     {
       "id": "contrat-social-medecine-corps-social",
-      "label": "Contrat social + Medecine du corps social",
+      "label": "Une medecine du corps social pour ecrire un nouveau contrat social",
       "niveau": 0,
       "nature": "essai",
       "statut": "gestation",
@@ -191,63 +191,83 @@
   "edges": [
     {
       "source": "contrat-social-medecine-corps-social",
-      "target": "systemique"
+      "target": "systemique",
+      "central": true
     },
     {
       "source": "contrat-social-medecine-corps-social",
-      "target": "pratiques-collectives"
+      "target": "pratiques-collectives",
+      "central": true
     },
     {
       "source": "contrat-social-medecine-corps-social",
-      "target": "art-narration"
+      "target": "art-narration",
+      "central": true
     },
     {
       "source": "contrat-social-medecine-corps-social",
-      "target": "pouvoir-domination"
+      "target": "pouvoir-domination",
+      "central": true
     },
     {
       "source": "contrat-social-medecine-corps-social",
-      "target": "medias-critique"
+      "target": "medias-critique",
+      "central": true
     },
     {
       "source": "contrat-social-medecine-corps-social",
-      "target": "justice-securite"
+      "target": "justice-securite",
+      "central": true
     },
     {
       "source": "contrat-social-medecine-corps-social",
-      "target": "sante-globale"
+      "target": "sante-globale",
+      "central": true
     },
     {
       "source": "contrat-social-medecine-corps-social",
-      "target": "agriculture"
+      "target": "agriculture",
+      "central": true
     },
     {
       "source": "contrat-social-medecine-corps-social",
-      "target": "post-croissance"
+      "target": "post-croissance",
+      "central": true
     },
     {
       "source": "contrat-social-medecine-corps-social",
-      "target": "anthropocene"
+      "target": "anthropocene",
+      "central": true
     },
     {
       "source": "contrat-social-medecine-corps-social",
-      "target": "education"
+      "target": "education",
+      "central": true
     },
     {
       "source": "contrat-social-medecine-corps-social",
-      "target": "urbanisme"
+      "target": "urbanisme",
+      "central": true
     },
     {
       "source": "contrat-social-medecine-corps-social",
-      "target": "geopolitique"
+      "target": "geopolitique",
+      "central": true
     },
     {
       "source": "contrat-social-medecine-corps-social",
-      "target": "ia-technologie"
+      "target": "ia-technologie",
+      "central": true
     },
     {
       "source": "contrat-social-medecine-corps-social",
-      "target": "spiritualite"
+      "target": "spiritualite",
+      "central": true
+    },
+    {
+      "source": "contrat-social-medecine-corps-social",
+      "target": "tmip",
+      "central": true
     },
     {
       "source": "tmip",

scripts/build-carte-o.js

@@ -35,11 +35,15 @@ async function main() {
   const edges = []
   const edgeSet = new Set()
 
-  function addEdge(source, target) {
+  function addEdge(source, target, opts = {}) {
     const key = source < target ? `${source}|${target}` : `${target}|${source}`
     if (edgeSet.has(key)) return
     edgeSet.add(key)
-    edges.push({ source, target })
+    const edge = { source, target }
+    // V1.3-D : tag les edges au noeud central pour permettre tuning force-link
+    // (TMIP relie au centre = link court/fort, autres essais = link standard)
+    if (opts.central) edge.central = true
+    edges.push(edge)
   }
 
   function addNode(obj) {
@@ -70,11 +74,15 @@ async function main() {
   // toutes les thematiques rattachees directement au noeud central
   for (const th of data.thematiques) {
     addNode(th)
-    addEdge(centreId, th.id)
+    addEdge(centreId, th.id, { central: true })
   }
 
   for (const proj of data.projets) {
     addNode(proj)
+    // V1.3-D : edge explicite projet -> central (pont vision <-> pratique)
+    if (proj.lien_central) {
+      addEdge(centreId, proj.id, { central: true })
+    }
     for (const thId of (proj.liens_thematiques || [])) {
       addEdge(proj.id, thId)
     }

src/components/astro/ColCentre.astro

@@ -1,9 +1,9 @@
 ---
-// Centre - HAUT : tabs (Carte O mindmap | Chatbot RAG branche PC7).
+// Centre - HAUT : Carte O mindmap (V1.3-D : onglet Chatbot retire, bandeau "Sommaire editorial" + legende).
 //          MILIEU : preview article (V1.2-P) - inseree au clic journal-item-click.
 //          BAS  : iframe carte AEP (toujours visible).
+// V1.3-D : ChatbotV2 retire du DOM (backlog V2). Pour reactivation -> reintroduire le tab + panel.
 import CarteOWrapper from '../vue/CarteOWrapper.vue';
-import ChatbotV2 from '../vue/ChatbotV2.vue';
 import EmbedDynamique from '../vue/EmbedDynamique.vue';
 import PreviewArticle from '../vue/PreviewArticle.vue';
 ---
@@ -19,56 +19,49 @@ import PreviewArticle from '../vue/PreviewArticle.vue';
   data-preview-open="false"
   style="height: 100%; overflow-y: hidden;"
 >
-  <!-- HAUT (default flex-1 base 33%) : tabs Carte O / Chatbot -->
+  <!-- HAUT (default flex-1 base 33%) : V1.3-D bandeau "Sommaire editorial" + legende + Carte O plein espace -->
   <section
     id="col-centre-haut"
     class="border border-neutral-200 rounded flex flex-col overflow-hidden bg-white"
     style="min-height: 0; flex: 1 1 33%;"
   >
-    <nav role="tablist" aria-label="Vues centrales" class="flex border-b border-neutral-200 px-1 pt-1">
+    <!-- V1.3-D : bandeau header (titre gauche + legende droite) -->
-      <button
+    <header
-        type="button"
+      class="flex items-center justify-between gap-3 px-3 py-2 border-b border-neutral-200 shrink-0"
-        role="tab"
+      style="font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;"
-        id="tab-mindmap"
-        aria-controls="panel-mindmap"
-        aria-selected="true"
-        data-tab="mindmap"
-        class="tab-btn px-3 py-2 text-sm border-b-2 border-neutral-900 font-medium text-neutral-900"
     >
-        Carte O
+      <span class="text-xs truncate" style="color: #475569;">
-      </button>
+        Sommaire éditorial d'architecture d'écologie politique
-      <button
+      </span>
-        type="button"
+      <ul class="flex items-center gap-3 shrink-0 text-xs" style="color: #475569;" aria-label="Légende">
-        role="tab"
+        <li class="flex items-center gap-1.5">
-        id="tab-chatbot"
+          <span
-        aria-controls="panel-chatbot"
+            aria-hidden="true"
-        aria-selected="false"
+            style="width: 8px; height: 8px; border-radius: 999px; background: #0F172A; display: inline-block;"
-        data-tab="chatbot"
+          ></span>
-        class="tab-btn px-3 py-2 text-sm border-b-2 border-transparent text-neutral-500 hover:text-neutral-900"
+          <span>publié</span>
-      >
+        </li>
-        Chatbot
+        <li class="flex items-center gap-1.5">
-      </button>
+          <span
-    </nav>
+            aria-hidden="true"
+            style="width: 8px; height: 8px; border-radius: 999px; background: transparent; border: 1px solid #0F172A; display: inline-block;"
+          ></span>
+          <span>à venir</span>
+        </li>
+        <li class="flex items-center gap-1.5">
+          <span
+            aria-hidden="true"
+            style="width: 8px; height: 8px; border-radius: 999px; background: #B45309; display: inline-block;"
+          ></span>
+          <span>projet</span>
+        </li>
+      </ul>
+    </header>
 
     <div class="flex-1 overflow-hidden relative">
-      <div
+      <div id="panel-mindmap" class="absolute inset-0">
-        id="panel-mindmap"
-        role="tabpanel"
-        aria-labelledby="tab-mindmap"
-        data-tab-panel="mindmap"
-        class="absolute inset-0"
-      >
         <CarteOWrapper client:visible />
       </div>
-      <div
-        id="panel-chatbot"
-        role="tabpanel"
-        aria-labelledby="tab-chatbot"
-        data-tab-panel="chatbot"
-        class="absolute inset-0 hidden"
-      >
-        <ChatbotV2 client:visible />
-      </div>
     </div>
   </section>
 
@@ -260,28 +253,5 @@ import PreviewArticle from '../vue/PreviewArticle.vue';
     });
   }
 
-  // Tabs toggle.
+  // V1.3-D : tabs Chatbot retires, plus de toggle a gerer (un seul panel Carte O).
-  const tabs = document.querySelectorAll<HTMLButtonElement>('[data-tab]');
-  const panels = document.querySelectorAll<HTMLElement>('[data-tab-panel]');
-
-  tabs.forEach((tab) => {
-    tab.addEventListener('click', () => {
-      const target = tab.dataset.tab;
-      if (!target) return;
-
-      tabs.forEach((t) => {
-        const active = t.dataset.tab === target;
-        t.setAttribute('aria-selected', active ? 'true' : 'false');
-        t.classList.toggle('border-neutral-900', active);
-        t.classList.toggle('border-transparent', !active);
-        t.classList.toggle('font-medium', active);
-        t.classList.toggle('text-neutral-900', active);
-        t.classList.toggle('text-neutral-500', !active);
-      });
-
-      panels.forEach((p) => {
-        p.classList.toggle('hidden', p.dataset.tabPanel !== target);
-      });
-    });
-  });
 </script>

src/components/vue/CarteO.vue

@@ -25,12 +25,18 @@ interface CarteNode {
 // V1.2-O : logos plateforme via Brandfetch CDN (visible zoom > 1.5x seulement)
 const BRANDFETCH_CLIENT_ID = '4ae58bd85c8140eab0cee72f40656120'
 const LOGO_ZOOM_THRESHOLD = 1.5
+
+// V1.3-D : dimensions rectangle central (phrase manifeste 3 lignes)
+const CENTRAL_W = 300
+const CENTRAL_H = 64
+const CENTRAL_COLLIDE_RADIUS = 160  // demi-largeur + marge
 const logoUrl = (domain: string) =>
   `https://cdn.brandfetch.io/${domain}/w/64/h/64?c=${BRANDFETCH_CLIENT_ID}`
 
 interface CarteEdge {
   source: string | CarteNode
   target: string | CarteNode
+  central?: boolean  // V1.3-D : link au noeud central (court/fort)
 }
 
 const props = withDefaults(defineProps<{
@@ -118,25 +124,38 @@ function truncate(str: string, max: number): string {
   return str.length > max ? str.slice(0, max - 1) + '…' : str
 }
 
-// Split intelligent du label central sur 2-3 lignes (autour de "+")
+// V1.3-D : Wrap intelligent du label central sur 3 lignes (rectangle 300x64).
-function splitCentralLabel(label: string): string[] {
+// Phrase cible : "Une medecine du corps social pour ecrire un nouveau contrat social"
+// Heuristique : decoupe en mots, repartit sur ~3 lignes de longueur equilibree.
+function splitCentralLabel(label: string, maxLines = 3, maxCharsPerLine = 30): string[] {
   if (!label) return ['']
-  // priorite : split sur " + " si present
+  // Fallback : pivot legacy " + " (V1.2 backward compat)
   if (label.includes(' + ')) {
     const parts = label.split(' + ')
     return [parts[0].trim(), '+', parts.slice(1).join(' + ').trim()]
   }
-  // fallback : split a peu pres au milieu sur un espace
+  const words = label.split(/\s+/).filter(Boolean)
-  if (label.length > 14) {
+  if (words.length <= 1) return [label]
-    const mid = Math.floor(label.length / 2)
+
-    const left = label.lastIndexOf(' ', mid)
+  // Repartit en lignes en respectant maxCharsPerLine, max maxLines lignes
-    const right = label.indexOf(' ', mid)
+  const lines: string[] = []
-    const cut = (mid - left <= right - mid && left > 0) ? left : right
+  let current = ''
-    if (cut > 0) {
+  for (const w of words) {
-      return [label.slice(0, cut).trim(), label.slice(cut).trim()]
+    const next = current ? `${current} ${w}` : w
+    if (next.length > maxCharsPerLine && current && lines.length < maxLines - 1) {
+      lines.push(current)
+      current = w
+    } else {
+      current = next
     }
   }
-  return [label]
+  if (current) lines.push(current)
+  // Si plus de lignes que prevu (mots tres longs), concatene les dernieres
+  while (lines.length > maxLines) {
+    const last = lines.pop()!
+    lines[lines.length - 1] = `${lines[lines.length - 1]} ${last}`
+  }
+  return lines
 }
 
 function buildSimNodes(): SimNode[] {
@@ -232,18 +251,33 @@ function render() {
     .style('cursor', 'pointer')
     .on('click', (_event, d) => emit('node-click', { node: d as CarteNode, x: (d as SimNode).x || 0, y: (d as SimNode).y || 0 }))
     .on('mouseover', function (_event, d) {
-      d3.select(this).select('circle')
+      // V1.3-D : selecteur etendu rect|circle (rect pour central, circle pour autres)
+      d3.select(this).select('rect, circle')
         .transition().duration(120)
         .attr('stroke-width', strokeWidthFor(d) + 1.5)
     })
     .on('mouseout', function (_event, d) {
-      d3.select(this).select('circle')
+      d3.select(this).select('rect, circle')
         .transition().duration(120)
         .attr('stroke-width', strokeWidthFor(d))
     })
 
-  // Cercle
+  // V1.3-D : nœud central = rectangle 300x64 (phrase 3 lignes), autres = cercle
-  nodeGroups.append('circle')
+  const isCentral = (d: SimNode) => d.niveau === 0
+
+  nodeGroups.filter(isCentral)
+    .append('rect')
+    .attr('x', -CENTRAL_W / 2)
+    .attr('y', -CENTRAL_H / 2)
+    .attr('width', CENTRAL_W)
+    .attr('height', CENTRAL_H)
+    .attr('rx', 6)
+    .attr('fill', d => colorFor(d))
+    .attr('stroke', d => strokeFor(d))
+    .attr('stroke-width', d => strokeWidthFor(d))
+
+  nodeGroups.filter(d => !isCentral(d))
+    .append('circle')
     .attr('r', d => getRadius(d))
     .attr('fill', d => colorFor(d))
     .attr('stroke', d => strokeFor(d))
@@ -256,10 +290,10 @@ function render() {
     const inside = labelInsideFor(d)
 
     if (inside && d.niveau === 0) {
-      // Noeud central : label en 2 lignes inscrites au centre
+      // V1.3-D : noeud central = rectangle, label 3 lignes 13px line-height 1.35
-      const parts = splitCentralLabel(d.label)
+      const fs = isMobile.value ? 11 : 13
-      const lineHeight = isMobile.value ? 10 : 12
+      const lineHeight = Math.round(fs * 1.35)
-      const fs = isMobile.value ? 9 : 11
+      const parts = splitCentralLabel(d.label, 3, isMobile.value ? 22 : 30)
       const startY = -((parts.length - 1) * lineHeight) / 2
       parts.forEach((line, i) => {
         g.append('text')
@@ -269,7 +303,7 @@ function render() {
           .attr('y', startY + i * lineHeight)
           .attr('font-size', fs)
           .attr('font-family', 'system-ui, sans-serif')
-          .attr('font-weight', 'bold')
+          .attr('font-weight', '500')
           .attr('fill', '#FFFFFF')
           .attr('pointer-events', 'none')
           .text(line)
@@ -332,21 +366,54 @@ function render() {
   nodeGroups.append('title')
     .text(d => `${d.label}\n[${d.family}]\n${truncate(d.resume || d.intention || '', 200)}`)
 
-  // Simulation force avec charges differenciees par niveau
+  // V1.3-D : Simulation force-directed fit-cadre + animation continue subtile
+  // - link distance/strength differencies : TMIP (central) court/fort, autres essais souples
+  // - collide +12 zero overlap labels
+  // - forceX/Y faibles rappel cadre
+  // - alphaDecay 0.025 (anime sans vertige)
   simulation = d3.forceSimulation<SimNode, SimLink>(simNodes)
     .force('link', d3.forceLink<SimNode, SimLink>(simLinks)
       .id(d => d.id)
-      .distance(80)
+      .distance(l => {
-      .strength(0.35))
+        const link = l as SimLink & { central?: boolean }
+        // Lien central -> TMIP (projet) = court (90), autres centraux (essais) = standard (200)
+        if (link.central) {
+          const tgt = link.target as SimNode
+          const src = link.source as SimNode
+          const other = (tgt.niveau === 0 ? src : tgt) as SimNode
+          if (other.nature === 'projet') return 90
+          return 200
+        }
+        return 180
+      })
+      .strength(l => {
+        const link = l as SimLink & { central?: boolean }
+        if (link.central) {
+          const tgt = link.target as SimNode
+          const src = link.source as SimNode
+          const other = (tgt.niveau === 0 ? src : tgt) as SimNode
+          if (other.nature === 'projet') return 0.6
+          return 0.3
+        }
+        return 0.3
+      }))
     .force('charge', d3.forceManyBody<SimNode>().strength(d => {
-      if (d.niveau === 0) return -800
+      if (d.niveau === 0) return -1200
       if (d.niveau === 1) return -400
-      if (d.niveau === 2) return -150
+      if (d.niveau === 2) return -180
       return -220
     }))
     .force('center', d3.forceCenter(width.value / 2, height.value / 2))
-    .force('collide', d3.forceCollide<SimNode>().radius(d => getRadius(d) + 6))
+    .force('x', d3.forceX<SimNode>(width.value / 2).strength(0.05))
-    .alphaDecay(0.03)
+    .force('y', d3.forceY<SimNode>(height.value / 2).strength(0.05))
+    .force('collide', d3.forceCollide<SimNode>().radius(d => {
+      // V1.3-D : central traite comme zone large (rect 300x64 -> rayon equivalent 160)
+      if (d.niveau === 0) return CENTRAL_COLLIDE_RADIUS
+      return getRadius(d) + 12
+    }))
+    .alphaDecay(0.025)
+    .velocityDecay(0.4)
+    .alphaMin(0.001)
     .on('tick', tick)
 
   // Bind drag once simulation exists.
@@ -409,6 +476,8 @@ onMounted(() => {
     }
     if (simulation) {
       simulation.force('center', d3.forceCenter(width.value / 2, height.value / 2))
+      simulation.force('x', d3.forceX<SimNode>(width.value / 2).strength(0.05))
+      simulation.force('y', d3.forceY<SimNode>(height.value / 2).strength(0.05))
       simulation.alpha(0.3).restart()
     }
   })

src/components/vue/CarteOWrapper.vue

@@ -19,6 +19,7 @@ interface CarteNode {
 interface CarteEdge {
   source: string
   target: string
+  central?: boolean  // V1.3-D : edges au noeud central (tuning force-link)
 }
 
 interface CarteData {