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.
merge(v13-p0): iframe AEP skeleton timeout fallback fix loading stuck
2026-05-11 20:00:30 +02:00 · 2026-05-11 19:53:54 +02:00 · 2026-05-11 19:52:57 +02:00
7 changed files with 210 additions and 121 deletions
--- a/public/data/carte-o-source.yaml
+++ b/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"
--- a/public/data/carte-o.json
+++ b/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",
--- a/scripts/build-carte-o.js
+++ b/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)
    }
--- a/src/components/astro/ColCentre.astro
+++ b/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">
-      <button
-        type="button"
-        role="tab"
-        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"
+    <!-- V1.3-D : bandeau header (titre gauche + legende droite) -->
+    <header
+      class="flex items-center justify-between gap-3 px-3 py-2 border-b border-neutral-200 shrink-0"
+      style="font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;"
    >
-        Carte O
-      </button>
-      <button
-        type="button"
-        role="tab"
-        id="tab-chatbot"
-        aria-controls="panel-chatbot"
-        aria-selected="false"
-        data-tab="chatbot"
-        class="tab-btn px-3 py-2 text-sm border-b-2 border-transparent text-neutral-500 hover:text-neutral-900"
-      >
-        Chatbot
-      </button>
-    </nav>
+      <span class="text-xs truncate" style="color: #475569;">
+        Sommaire éditorial d'architecture d'écologie politique
+      </span>
+      <ul class="flex items-center gap-3 shrink-0 text-xs" style="color: #475569;" aria-label="Légende">
+        <li class="flex items-center gap-1.5">
+          <span
+            aria-hidden="true"
+            style="width: 8px; height: 8px; border-radius: 999px; background: #0F172A; display: inline-block;"
+          ></span>
+          <span>publié</span>
+        </li>
+        <li class="flex items-center gap-1.5">
+          <span
+            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
-        id="panel-mindmap"
-        role="tabpanel"
-        aria-labelledby="tab-mindmap"
-        data-tab-panel="mindmap"
-        class="absolute inset-0"
-      >
+      <div id="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.
-  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);
-      });
-    });
-  });
+  // V1.3-D : tabs Chatbot retires, plus de toggle a gerer (un seul panel Carte O).
 </script>
--- a/src/components/vue/CarteO.vue
+++ b/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 "+")
-function splitCentralLabel(label: string): string[] {
+// V1.3-D : Wrap intelligent du label central sur 3 lignes (rectangle 300x64).
+// 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
-  if (label.length > 14) {
-    const mid = Math.floor(label.length / 2)
-    const left = label.lastIndexOf(' ', mid)
-    const right = label.indexOf(' ', mid)
-    const cut = (mid - left <= right - mid && left > 0) ? left : right
-    if (cut > 0) {
-      return [label.slice(0, cut).trim(), label.slice(cut).trim()]
+  const words = label.split(/\s+/).filter(Boolean)
+  if (words.length <= 1) return [label]
+
+  // Repartit en lignes en respectant maxCharsPerLine, max maxLines lignes
+  const lines: string[] = []
+  let current = ''
+  for (const w of words) {
+    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
-  nodeGroups.append('circle')
+  // V1.3-D : nœud central = rectangle 300x64 (phrase 3 lignes), autres = cercle
+  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
-      const parts = splitCentralLabel(d.label)
-      const lineHeight = isMobile.value ? 10 : 12
-      const fs = isMobile.value ? 9 : 11
+      // V1.3-D : noeud central = rectangle, label 3 lignes 13px line-height 1.35
+      const fs = isMobile.value ? 11 : 13
+      const lineHeight = Math.round(fs * 1.35)
+      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)
-      .strength(0.35))
+      .distance(l => {
+        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))
-    .alphaDecay(0.03)
+    .force('x', d3.forceX<SimNode>(width.value / 2).strength(0.05))
+    .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()
    }
  })
--- a/src/components/vue/CarteOWrapper.vue
+++ b/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 {
--- a/src/components/vue/EmbedDynamique.vue
+++ b/src/components/vue/EmbedDynamique.vue
@@ -23,24 +23,43 @@ const iframeStyle = computed(() => ({
  transformOrigin: '0 0',
 }))

+let fallbackTimer: ReturnType<typeof setTimeout> | null = null
+
+const revealIframe = () => {
+  if (iframeRef.value) {
+    iframeRef.value.classList.remove('opacity-0')
+    iframeRef.value.classList.add('opacity-100')
+  }
+  skeletonHidden.value = true
+}
+
 onMounted(() => {
  if (wrapperRef.value && typeof ResizeObserver !== 'undefined') {
    updateScale()
    resizeObs = new ResizeObserver(updateScale)
    resizeObs.observe(wrapperRef.value)
  }
+  // Fallback : si @load ne fire pas dans 2.5s (transform/scale peut bloquer l'event),
+  // on revele quand meme l'iframe pour ne pas laisser le skeleton infini.
+  fallbackTimer = setTimeout(() => {
+    revealIframe()
+  }, 2500)
 })
 onUnmounted(() => {
  resizeObs?.disconnect()
  resizeObs = null
+  if (fallbackTimer) {
+    clearTimeout(fallbackTimer)
+    fallbackTimer = null
+  }
 })

 const onIframeLoad = () => {
-  if (iframeRef.value) {
-    iframeRef.value.classList.remove('opacity-0')
-    iframeRef.value.classList.add('opacity-100')
+  if (fallbackTimer) {
+    clearTimeout(fallbackTimer)
+    fallbackTimer = null
  }
-  skeletonHidden.value = true
+  revealIframe()
 }
 </script>

@@ -51,7 +70,7 @@ const onIframeLoad = () => {
        <div
          v-if="!skeletonHidden"
          id="embed-skeleton"
-          class="absolute inset-0 flex items-center justify-center bg-neutral-50 animate-pulse z-10"
+          class="absolute inset-0 flex items-center justify-center bg-neutral-50 animate-pulse"
        >
          <span class="text-neutral-400 text-sm">Chargement de la carte AEP...</span>
        </div>