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
wip(pont): pont Tailwind 4 câblé + pont-test.astro + carte-o.json (session défrichage 17/08, mis à l'abri le 22/09)
2026-09-29 14:06:25 +02:00 · 2026-09-22 14:05:12 +02:00 · 2026-07-07 17:55:43 +02:00 · 2026-07-07 17:53:26 +02:00 · 2026-07-07 17:49:44 +02:00 · 2026-07-07 17:45:13 +02:00
43 changed files with 1575 additions and 396 deletions
@@ -0,0 +1,16 @@
+FROM node:22-alpine AS builder
+WORKDIR /app
+COPY package*.json ./
+RUN npm ci
+COPY . .
+RUN npm run build
+
+FROM node:22-alpine
+WORKDIR /app
+COPY --from=builder /app/dist ./dist
+COPY --from=builder /app/node_modules ./node_modules
+COPY --from=builder /app/package*.json ./
+EXPOSE 3000
+ENV HOST=0.0.0.0
+ENV PORT=3000
+CMD ["node", "./dist/server/entry.mjs"]
@@ -3,14 +3,22 @@ import { defineConfig } from 'astro/config';
 import vue from '@astrojs/vue';
 import node from '@astrojs/node';
 import tailwindcss from '@tailwindcss/vite';
+import sitemap from '@astrojs/sitemap';

 // PC7 — bascule SSR (mode 'server' Astro 6) pour endpoint /api/chatbot proxy.
 // Toutes les pages publiques restent statiques via `export const prerender = true`.
 // Coolify deploy (PC8) : `node ./dist/server/entry.mjs` (Node adapter standalone).
+// PC8 — sitemap auto-genere + site URL pour canonical + redirects SEO.
 export default defineConfig({
+  site: 'https://trans-former.fr',
  output: 'server',
  adapter: node({ mode: 'standalone' }),
-  integrations: [vue()],
+  integrations: [
+    vue(),
+    sitemap({
+      filter: (page) => !page.includes('/api/'),
+    }),
+  ],
  vite: {
    plugins: [tailwindcss()],
  },
@@ -9,8 +9,11 @@
      "version": "0.0.1",
      "dependencies": {
        "@astrojs/node": "^10.1.0",
+        "@astrojs/sitemap": "^3.7.2",
        "@astrojs/vue": "^6.0.1",
+        "@fontsource-variable/roboto-condensed": "^5.2.8",
        "@tailwindcss/vite": "^4.2.4",
+        "@transformer/ui": "git+https://git.trans-former.fr/jules/design-system.git",
        "@types/d3": "^7.4.3",
        "astro": "^6.3.1",
        "d3": "^7.9.0",
@@ -97,6 +100,17 @@
        "node": ">=22.12.0"
      }
    },
+    "node_modules/@astrojs/sitemap": {
+      "version": "3.7.2",
+      "resolved": "https://registry.npmjs.org/@astrojs/sitemap/-/sitemap-3.7.2.tgz",
+      "integrity": "sha512-PqkzkcZTb5ICiyIR8VoKbIAP/laNRXi5tw616N1Ckk+40oNB8Can1AzVV56lrbC5GKSZFCyJYUVYqVivMisvpA==",
+      "license": "MIT",
+      "dependencies": {
+        "sitemap": "^9.0.0",
+        "stream-replace-string": "^2.0.0",
+        "zod": "^4.3.6"
+      }
+    },
    "node_modules/@astrojs/telemetry": {
      "version": "3.3.2",
      "resolved": "https://registry.npmjs.org/@astrojs/telemetry/-/telemetry-3.3.2.tgz",
@@ -1064,6 +1078,15 @@
        "node": ">=18"
      }
    },
+    "node_modules/@fontsource-variable/roboto-condensed": {
+      "version": "5.2.8",
+      "resolved": "https://registry.npmjs.org/@fontsource-variable/roboto-condensed/-/roboto-condensed-5.2.8.tgz",
+      "integrity": "sha512-aIZ2kYSoJHkTI4z8x/PRgKX6Zb9TTtSE/u+fUYeiwL+5trP9rhYYEEeNjRttaMqRgoDHcSueArdRZ43wf/i2Kw==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
    "node_modules/@img/colour": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.1.0.tgz",
@@ -2344,6 +2367,11 @@
        "vite": "^5.2.0 || ^6 || ^7 || ^8"
      }
    },
+    "node_modules/@transformer/ui": {
+      "version": "0.1.0",
+      "resolved": "git+https://git.trans-former.fr/jules/design-system.git#b7f4f21b7c41258d976a878a8a3c2d4ce45a2ede",
+      "license": "UNLICENSED"
+    },
    "node_modules/@types/d3": {
      "version": "7.4.3",
      "resolved": "https://registry.npmjs.org/@types/d3/-/d3-7.4.3.tgz",
@@ -2651,6 +2679,24 @@
        "@types/unist": "*"
      }
    },
+    "node_modules/@types/node": {
+      "version": "24.12.4",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-24.12.4.tgz",
+      "integrity": "sha512-GUUEShf+PBCGW2KaXwcIt3Yk+e3pkKwWKb9GSyM9WQVE+ep2jzmHdGsHzu4wgcZy5fN9FBdVzjpBQsYlpfpgLA==",
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~7.16.0"
+      }
+    },
+    "node_modules/@types/sax": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/@types/sax/-/sax-1.2.7.tgz",
+      "integrity": "sha512-rO73L89PJxeYM3s3pPPjiPgVVcymqU490g0YO5n5By0k2Erzj6tay/4lr1CHAAU4JyOWd1rpQ8bCf6cZfHU96A==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
    "node_modules/@types/unist": {
      "version": "3.0.3",
      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
@@ -2926,6 +2972,12 @@
        "url": "https://github.com/sponsors/jonschlinkert"
      }
    },
+    "node_modules/arg": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
+      "license": "MIT"
+    },
    "node_modules/argparse": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -6972,6 +7024,25 @@
      "integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==",
      "license": "MIT"
    },
+    "node_modules/sitemap": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/sitemap/-/sitemap-9.0.1.tgz",
+      "integrity": "sha512-S6hzjGJSG3d6if0YoF5kTyeRJvia6FSTBroE5fQ0bu1QNxyJqhhinfUsXi9fH3MgtXODWvwo2BDyQSnhPQ88uQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "^24.9.2",
+        "@types/sax": "^1.2.1",
+        "arg": "^5.0.0",
+        "sax": "^1.4.1"
+      },
+      "bin": {
+        "sitemap": "dist/esm/cli.js"
+      },
+      "engines": {
+        "node": ">=20.19.5",
+        "npm": ">=10.8.2"
+      }
+    },
    "node_modules/slash": {
      "version": "5.1.0",
      "resolved": "https://registry.npmjs.org/slash/-/slash-5.1.0.tgz",
@@ -7030,6 +7101,12 @@
        "node": ">= 0.8"
      }
    },
+    "node_modules/stream-replace-string": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/stream-replace-string/-/stream-replace-string-2.0.0.tgz",
+      "integrity": "sha512-TlnjJ1C0QrmxRNrON00JvaFFlNh5TTG00APw23j74ET7gkQpTASi6/L2fuiav8pzK715HXtUeClpBTw2NPSn6w==",
+      "license": "MIT"
+    },
    "node_modules/stringify-entities": {
      "version": "4.0.4",
      "resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-4.0.4.tgz",
@@ -7212,6 +7289,12 @@
      "integrity": "sha512-Ql87qFHB3s/De2ClA9e0gsnS6zXG27SkTiSJwjCc9MebbfapQfuPzumMIUMi38ezPZVNFcHI9sUIepeQfw8J8Q==",
      "license": "MIT"
    },
+    "node_modules/undici-types": {
+      "version": "7.16.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.16.0.tgz",
+      "integrity": "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==",
+      "license": "MIT"
+    },
    "node_modules/unicorn-magic": {
      "version": "0.4.0",
      "resolved": "https://registry.npmjs.org/unicorn-magic/-/unicorn-magic-0.4.0.tgz",
@@ -16,8 +16,11 @@
  },
  "dependencies": {
    "@astrojs/node": "^10.1.0",
+    "@astrojs/sitemap": "^3.7.2",
    "@astrojs/vue": "^6.0.1",
+    "@fontsource-variable/roboto-condensed": "^5.2.8",
    "@tailwindcss/vite": "^4.2.4",
+    "@transformer/ui": "git+https://git.trans-former.fr/jules/design-system.git",
    "@types/d3": "^7.4.3",
    "astro": "^6.3.1",
    "d3": "^7.9.0",
@@ -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
@@ -12,10 +14,11 @@ 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
+  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,7 +136,10 @@ 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
    liens_thematiques:
      - "urbanisme"
      - "justice-securite"
@@ -1,16 +1,17 @@
 {
  "version": "1.1",
-  "generatedAt": "2026-05-11T16:47:45.459Z",
+  "generatedAt": "2026-09-29T12:05:12.880Z",
  "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",
      "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,69 +201,90 @@
      "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": [
    {
      "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",
@@ -0,0 +1,46 @@
+# trans-former.fr
+
+> Page-cerveau de Jules NENY. Architecture, ecologie, politique : un commun a
+> construire ensemble. Manifeste et infrastructure vivante.
+
+## A propos
+
+Jules NENY est architecte, ecrivain, penseur politique. Il porte le projet AEP
+(Agences d'Ecologie Politique) - reseau de structures locales pour articuler
+ecologie, social et politique au niveau du territoire.
+
+Ce site est l'epicentre de son ecosysteme : manifeste, journal cross-platform,
+carte AEP des bifurcations, mindmap des thematiques de la pensee AEP.
+
+## Sections
+
+- /                          : page-cerveau (hub : journal + mindmap + Insta)
+- /manifeste                 : manifeste fondateur (V1)
+- /manifeste/commander       : pre-inscription version imprimee
+- /a-propos                  : parcours et intention
+- /mentions-legales          : mentions legales
+
+## Ecosysteme
+
+- aep.trans-former.fr        : cartes AEP (cartobifurcation + trouver du taf)
+- manifeste.trans-former.fr  : ancien blog (archives 2024-2026)
+- automate.trans-former.fr   : workflows n8n (journal cross-platform)
+- podcast.trans-former.fr    : podcast Castopod
+- calculs.trans-former.fr    : simulateurs autonomie energetique
+
+## Reseaux
+
+- Substack : julesneny.substack.com (Architecture d'ecologie politique)
+- Instagram @aep.politique   : carousels manifeste
+- Instagram @julesneny       : peinture / poesie / Corse
+- LinkedIn                   : journal pro / building public
+- Gitea                      : git.trans-former.fr/jules (code open source)
+
+## Politique d'usage
+
+Le contenu du site est explicitement ouvert a l'indexation et a la citation
+par les LLMs (GPTBot, ClaudeBot, Google-Extended, Applebot-Extended, PerplexityBot).
+
+L'auteur souhaite que la pensee AEP soit largement diffusee.
+
+Pour citer ce site : "Jules NENY, trans-former.fr, [date d'acces]"
@@ -0,0 +1,19 @@
+User-agent: *
+Allow: /
+
+User-agent: GPTBot
+Allow: /
+
+User-agent: ClaudeBot
+Allow: /
+
+User-agent: Google-Extended
+Allow: /
+
+User-agent: Applebot-Extended
+Allow: /
+
+User-agent: PerplexityBot
+Allow: /
+
+Sitemap: https://trans-former.fr/sitemap-index.xml
@@ -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) {
@@ -55,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)
  }

@@ -70,11 +76,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)
    }
@@ -1,9 +1,10 @@
 ---
-// 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.
+// V1.4-C : cadre Carte O + bouton toggle desktop + drag fix (window listeners) + preview hydration (client:load) + transitions.
 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,55 +20,63 @@ 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
+       V1.4-C1 : cadre 1px renforce (border-neutral-300) + transition height pour toggle collapse desktop -->
  <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%;"
+    class="rounded flex flex-col overflow-hidden bg-white"
+    style="min-height: 0; flex: 1 1 33%; border: 1px solid #CBD5E1; border-radius: 6px; transition: flex-basis 0.3s ease, min-height 0.3s ease;"
+    data-collapsed="false"
  >
-    <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"
-      >
-        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>
-
-    <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"
-      >
-        <CarteOWrapper client:visible />
+    <!-- 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;"
+    >
+      <span class="text-xs truncate" style="color: #475569;">
+        Sommaire éditorial d'architecture d'écologie politique
+      </span>
+      <div class="flex items-center gap-3 shrink-0">
+        <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>
+        <!-- V1.4-C2 : bouton toggle Carte O desktop (replier/deployer la zone HAUT) -->
+        <button
+          id="col-centre-haut-toggle-desktop"
+          type="button"
+          aria-label="Replier la Carte O"
+          class="hidden md:inline-flex items-center justify-center w-5 h-5 text-neutral-500 hover:text-neutral-900 cursor-pointer transition-colors"
+          style="font-size: 10px; line-height: 1;"
+          title="Replier la Carte O"
+        >
+          <span id="col-centre-haut-toggle-icon">▼</span>
+        </button>
      </div>
-      <div
-        id="panel-chatbot"
-        role="tabpanel"
-        aria-labelledby="tab-chatbot"
-        data-tab-panel="chatbot"
-        class="absolute inset-0 hidden"
-      >
-        <ChatbotV2 client:visible />
+    </header>
+
+    <div id="col-centre-haut-body" class="flex-1 overflow-hidden relative" style="transition: opacity 0.25s ease;">
+      <div id="panel-mindmap" class="absolute inset-0">
+        <CarteOWrapper client:visible />
      </div>
    </div>
  </section>
@@ -93,16 +102,23 @@ import PreviewArticle from '../vue/PreviewArticle.vue';

  <!-- MILIEU (V1.2-P) : preview article inseree entre Carte O et iframe AEP.
       Pas de border ici - PreviewArticle.vue gere son propre conteneur.
-       shrink-0 pour preserver sa taille auto, sinon flex pourrait l'ecraser. -->
-  <div id="col-centre-preview-slot" class="shrink-0" style="display: contents;">
-    <PreviewArticle client:visible />
+       shrink-0 pour preserver sa taille auto, sinon flex pourrait l'ecraser.
+       V1.4-E1 : client:load (vs client:visible) pour garantir hydration immediate des listeners
+                  'preview-open' / 'journal-item-click' (le v-if rendait l'observer aveugle).
+       V1.4-bis FIX 3 : le wrapper en display:contents masquait l'astro-island au flex layout.
+       On passe en flex container explicite (column) + l'astro-island prend display:block.
+       Quand mode=null, PreviewArticle renvoie rien → le slot ne prend pas de hauteur.
+       Quand mode=manifeste/article, le slot grandit pour contenir la preview. -->
+  <div id="col-centre-preview-slot" class="shrink-0 flex flex-col">
+    <PreviewArticle client:load />
  </div>

-  <!-- BAS (default flex-1 base 67%) : iframe carte AEP toujours visible -->
+  <!-- BAS (default flex-1 base 67%) : iframe carte AEP toujours visible
+       V1.4-E2 : transition flex-basis 0.3s ease (smooth quand preview ouvre/ferme) -->
  <section
    id="col-centre-bas"
    class="border border-neutral-200 rounded overflow-hidden bg-white"
-    style="min-height: 0; flex: 1 1 67%;"
+    style="min-height: 0; flex: 1 1 67%; transition: flex-basis 0.3s ease;"
  >
    <div class="h-full min-h-[60vh] md:min-h-[400px]">
      <EmbedDynamique client:visible />
@@ -110,12 +126,45 @@ import PreviewArticle from '../vue/PreviewArticle.vue';
  </section>
 </div>

+<style>
+  /* V1.4-bis FIX 3 : force l'astro-island a se comporter comme block dans le slot preview,
+     sinon le default inline empeche le contenu Vue (border + bg) de se rendre correctement
+     dans le flex column de la col centre. */
+  #col-centre-preview-slot > astro-island {
+    display: block;
+    width: 100%;
+  }
+  /* V1.4-bis FIX 4 : scrollbar visible sur la col centre quand preview ouverte
+     (overflow:auto au lieu de natif fin qui se cache). Style WebKit + Firefox. */
+  #col-centre-grid[data-preview-open="true"] {
+    scrollbar-width: thin;
+    scrollbar-color: #94A3B8 #FAFAF7;
+  }
+  #col-centre-grid[data-preview-open="true"]::-webkit-scrollbar {
+    width: 10px;
+  }
+  #col-centre-grid[data-preview-open="true"]::-webkit-scrollbar-track {
+    background: #FAFAF7;
+  }
+  #col-centre-grid[data-preview-open="true"]::-webkit-scrollbar-thumb {
+    background: #94A3B8;
+    border-radius: 5px;
+    border: 2px solid #FAFAF7;
+  }
+  #col-centre-grid[data-preview-open="true"]::-webkit-scrollbar-thumb:hover {
+    background: #64748B;
+  }
+</style>
+
 <script>
-  // Poignee repli zone HAUT (mobile only)
+  // Poignee repli zone HAUT (mobile only) + toggle desktop V1.4-C2
  const grid = document.getElementById('col-centre-grid');
  const haut = document.getElementById('col-centre-haut');
  const bas = document.getElementById('col-centre-bas');
  const poignee = document.getElementById('col-centre-poignee');
+  const toggleDesktop = document.getElementById('col-centre-haut-toggle-desktop');
+  const toggleDesktopIcon = document.getElementById('col-centre-haut-toggle-icon');
+  const hautBody = document.getElementById('col-centre-haut-body');

  // Sauvegarde flex-basis defaults pour restaure apres fermeture preview
  let defaultHautFlex = '1 1 33%';
@@ -147,6 +196,44 @@ import PreviewArticle from '../vue/PreviewArticle.vue';
    applyRepliState(next);
  });

+  // V1.4-C2 : bouton toggle Carte O desktop (replier/deployer la zone HAUT).
+  // Etat distinct de l'etat mobile (clef differente) pour permettre persistance par device.
+  // Replie : flex 0 0 36px (juste le bandeau header reste visible), body masque.
+  // Deploye : restaure flex-basis precedent (default 33% ou drag-resize sauvegarde).
+  const applyDesktopCollapseState = (collapsed: boolean) => {
+    if (!haut) return;
+    if (grid && grid.dataset.previewOpen === 'true') return; // skip si preview ouverte (preview pilote la mise en page)
+    if (collapsed) {
+      haut.style.flex = '0 0 36px';
+      haut.dataset.collapsed = 'true';
+      if (hautBody) hautBody.style.opacity = '0';
+      if (toggleDesktopIcon) toggleDesktopIcon.textContent = '▶';
+      toggleDesktop?.setAttribute('aria-label', 'Deployer la Carte O');
+      toggleDesktop?.setAttribute('title', 'Deployer la Carte O');
+    } else {
+      // Restaure flex-basis precedent (drag-resize ou default)
+      haut.style.flex = defaultHautFlex;
+      haut.dataset.collapsed = 'false';
+      if (hautBody) hautBody.style.opacity = '1';
+      if (toggleDesktopIcon) toggleDesktopIcon.textContent = '▼';
+      toggleDesktop?.setAttribute('aria-label', 'Replier la Carte O');
+      toggleDesktop?.setAttribute('title', 'Replier la Carte O');
+    }
+  };
+
+  const savedDesktopCollapsed = sessionStorage.getItem('tf-carte-o-collapsed') === 'true';
+  if (savedDesktopCollapsed) {
+    // applique apres que defaultHautFlex soit defini (deja le cas)
+    applyDesktopCollapseState(true);
+  }
+
+  toggleDesktop?.addEventListener('click', () => {
+    const current = sessionStorage.getItem('tf-carte-o-collapsed') === 'true';
+    const next = !current;
+    sessionStorage.setItem('tf-carte-o-collapsed', String(next));
+    applyDesktopCollapseState(next);
+  });
+
  // V1.2-P : preview ouverte = container scrollable, Carte O et iframe AEP figes en vh.
  const applyPreviewState = (open: boolean) => {
    if (!grid || !haut || !bas) return;
@@ -175,7 +262,9 @@ import PreviewArticle from '../vue/PreviewArticle.vue';
    }
  };

-  window.addEventListener('journal-item-click', () => {
+  // V1.2-P : ouverture preview article via journal-item-click
+  // V1.3-E : ouverture preview unifiee via preview-open (article OU manifeste)
+  const openPreview = () => {
    applyPreviewState(true);
    // Scroll vers la preview apres mount
    requestAnimationFrame(() => {
@@ -185,7 +274,9 @@ import PreviewArticle from '../vue/PreviewArticle.vue';
        grid.scrollTo({ top: Math.max(0, previewTop - 8), behavior: 'smooth' });
      }
    });
-  });
+  };
+  window.addEventListener('journal-item-click', openPreview);
+  window.addEventListener('preview-open', openPreview);
  window.addEventListener('preview-close', () => {
    applyPreviewState(false);
  });
@@ -199,19 +290,37 @@ import PreviewArticle from '../vue/PreviewArticle.vue';
    let startHautH = 0;
    let containerH = 0;

+    // V1.4-bis FIX 1 : overlay full-screen pendant drag.
+    // ROOT CAUSE : l'iframe AEP (EmbedDynamique) capture les pointer events des qu'on
+    // depasse sa zone — mouseup tombe dans l'iframe et n'arrive jamais au parent window.
+    // SOLUTION : creer un <div fixed inset-0 z-9998> AU MOMENT DU mousedown, qui
+    // intercepte tous les events (mousemove + mouseup) pendant le drag. Au mouseup,
+    // on retire l'overlay. Garantie : peu importe ce qu'il y a en dessous (iframe,
+    // Vue island, browser chrome), l'overlay capte la fin du drag.
+    const overlayDuringDrag = document.createElement('div');
+    overlayDuringDrag.style.cssText = 'position:fixed;inset:0;z-index:9998;cursor:row-resize;display:none;background:transparent;';
+    overlayDuringDrag.setAttribute('aria-hidden', 'true');
+    document.body.appendChild(overlayDuringDrag);
+
    dragHandle.addEventListener('mousedown', (e: MouseEvent) => {
      if (grid.dataset.previewOpen === 'true') return;
      if (sessionStorage.getItem('tf-haut-replie') === 'true') return;
+      if (sessionStorage.getItem('tf-carte-o-collapsed') === 'true') return;
      isDragging = true;
      startY = e.clientY;
      startHautH = haut.getBoundingClientRect().height;
      containerH = grid.getBoundingClientRect().height;
      document.body.style.cursor = 'row-resize';
      document.body.style.userSelect = 'none';
+      // Suspend transitions pendant drag pour responsivite
+      haut.style.transition = 'none';
+      bas.style.transition = 'none';
+      // Active l'overlay : capture tous les events tant qu'on draggue
+      overlayDuringDrag.style.display = 'block';
      e.preventDefault();
    });

-    document.addEventListener('mousemove', (e: MouseEvent) => {
+    const onMouseMove = (e: MouseEvent) => {
      if (!isDragging) return;
      const delta = e.clientY - startY;
      const newHautH = Math.min(Math.max(startHautH + delta, containerH * 0.2), containerH * 0.8);
@@ -219,24 +328,42 @@ import PreviewArticle from '../vue/PreviewArticle.vue';
      const basPct = 100 - hautPct;
      haut.style.flex = `1 1 ${hautPct.toFixed(1)}%`;
      bas.style.flex = `1 1 ${basPct.toFixed(1)}%`;
-    });
+    };

-    document.addEventListener('mouseup', () => {
-      if (isDragging) {
-        isDragging = false;
-        document.body.style.cursor = '';
-        document.body.style.userSelect = '';
-        const hf = haut.style.flex;
-        const bf = bas.style.flex;
-        if (hf) {
-          sessionStorage.setItem('tf-centre-haut-flex', hf);
-          defaultHautFlex = hf;
-        }
-        if (bf) {
-          sessionStorage.setItem('tf-centre-bas-flex', bf);
-          defaultBasFlex = bf;
-        }
+    const stopDrag = () => {
+      if (!isDragging) return;
+      isDragging = false;
+      // Retire l'overlay (rend le reste de la page de nouveau interactif)
+      overlayDuringDrag.style.display = 'none';
+      document.body.style.cursor = '';
+      document.body.style.userSelect = '';
+      // Restaure transitions
+      haut.style.transition = 'flex-basis 0.3s ease, min-height 0.3s ease';
+      bas.style.transition = 'flex-basis 0.3s ease';
+      const hf = haut.style.flex;
+      const bf = bas.style.flex;
+      if (hf) {
+        sessionStorage.setItem('tf-centre-haut-flex', hf);
+        defaultHautFlex = hf;
      }
+      if (bf) {
+        sessionStorage.setItem('tf-centre-bas-flex', bf);
+        defaultBasFlex = bf;
+      }
+    };
+
+    // V1.4-bis : ecoute mousemove + mouseup SUR L'OVERLAY (le plus haut z-index garantit capture).
+    overlayDuringDrag.addEventListener('mousemove', onMouseMove);
+    overlayDuringDrag.addEventListener('mouseup', stopDrag);
+    overlayDuringDrag.addEventListener('pointerup', stopDrag);
+    overlayDuringDrag.addEventListener('mouseleave', stopDrag);
+    // Backup window listeners (pour le cas tres rare ou l'overlay n'aurait pas pris le focus)
+    window.addEventListener('mouseup', stopDrag);
+    window.addEventListener('pointerup', stopDrag);
+    window.addEventListener('blur', stopDrag);
+    // Si la souris revient dans la fenetre sans bouton enfonce, on stoppe
+    window.addEventListener('mouseenter', (e: MouseEvent) => {
+      if (isDragging && e.buttons === 0) stopDrag();
    });

    // Restaurer position depuis sessionStorage
@@ -260,28 +387,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>
@@ -1,24 +1,18 @@
 ---
 import InstaFeed from '../vue/InstaFeed.vue';

-// Feed IDs Behold a remplir apres inscription Behold (voir docs/BEHOLD-SETUP.md)
-const FEED_AEP = import.meta.env.PUBLIC_BEHOLD_AEP || 'PLACEHOLDER_AEP';
-const FEED_JULESNENY = import.meta.env.PUBLIC_BEHOLD_JULESNENY || 'PLACEHOLDER_JULESNENY';
+const JULESNENY_FEED = Array.from(
+  { length: 13 },
+  (_, i) => `/images/instagram/feed/feed-${String(i + 1).padStart(2, '0')}.jpg`
+);
 ---
-<div class="h-full overflow-y-auto">
+<div class="h-full overflow-hidden">
  <InstaFeed
    client:visible
-    feedId={FEED_AEP}
-    account="@aep.politique"
-    accountUrl="https://www.instagram.com/aep.politique/"
-    fallbackBio="Carrousels manifeste AEP ; pensee politique eco-architecture"
-  />
-
-  <InstaFeed
-    client:visible
-    feedId={FEED_JULESNENY}
-    account="@julesneny"
+    account="Jules Neny"
    accountUrl="https://www.instagram.com/julesneny/"
-    fallbackBio="Peinture, poesie, Corse ; archives visuelles personnelles"
+    secondAccount="AEP"
+    secondAccountUrl="https://www.instagram.com/aep.politique/"
+    feedImages={JULESNENY_FEED}
  />
 </div>
@@ -1,11 +1,17 @@
 ---
 import JournalList from '../vue/JournalList.vue';

+// V1.4-bis FIX 5 : couleurs pills actives attenuees (60% color + 40% papier).
+// Active = fill couleur ATTENUEE (muted) + texte encre #0F172A (contraste WCAG ≥4.5:1).
+// Inactive = transparent + border + texte couleur 100% (inchange).
+// Mix 60/40 : moins agressif que 100% mais reste lisible (vs 30/70 pastels V1.3 trop dilues).
 const categories = [
  {
    id: 'politique',
    label: 'Politique',
    color: '#B5443A',
+    muted: '#C8867E',
+    pastel: '#E5C3BE',
    hashtags: ['#politique', '#aep-politique'],
    plateformes: [
      { id: 'instagram', label: 'Court', url: 'https://www.instagram.com/aep.politique/' },
@@ -18,6 +24,8 @@ const categories = [
    id: 'art',
    label: 'Art',
    color: '#5B6B3A',
+    muted: '#8F9A78',
+    pastel: '#CACFBE',
    hashtags: ['#peinture', '#art'],
    plateformes: [
      { id: 'instagram', label: '@julesneny', url: 'https://www.instagram.com/julesneny/' },
@@ -28,12 +36,26 @@ const categories = [
    id: 'outils',
    label: 'Outils',
    color: '#475569',
+    muted: '#7B848E',
+    pastel: '#C4C8CC',
    hashtags: ['#stack', '#building-public'],
    plateformes: [
      { id: 'gitea', label: 'Gitea', url: 'https://git.trans-former.fr/jules' },
    ],
    hasSelector: false,
  },
+  {
+    id: 'pro',
+    label: 'Pro',
+    color: '#0F172A',
+    muted: '#566375',
+    pastel: '#C4C8CC',
+    hashtags: ['#building-public', '#pro'],
+    plateformes: [
+      { id: 'linkedin', label: 'LinkedIn', url: 'https://www.linkedin.com/in/jules-neny/' },
+    ],
+    hasSelector: false,
+  },
 ];
 ---
 <div class="h-full flex flex-col p-4 pt-20 md:pt-6 gap-5">
@@ -42,7 +64,7 @@ const categories = [
  <details id="hashtags-accordion" class="border-t border-neutral-200 pt-4">
    <summary class="font-semibold cursor-pointer select-none flex items-center justify-between">
      <span>Hashtags</span>
-      <span class="text-xs text-neutral-400 font-normal">3 categories</span>
+      <span class="text-xs text-neutral-400 font-normal">4 categories</span>
    </summary>

    <div class="mt-3 flex flex-wrap gap-2" id="category-badges">
@@ -52,16 +74,18 @@ const categories = [
          data-category-id={cat.id}
          data-hashtags={cat.hashtags.join(',')}
          data-color={cat.color}
+          data-muted={cat.muted}
+          data-pastel={cat.pastel}
          data-has-selector={cat.hasSelector ? 'true' : 'false'}
          class="category-badge"
-          style={`background:${cat.color};color:#fff;font-family:'Courier New',Courier,monospace;font-size:13px;padding:3px 10px;border-radius:4px;cursor:pointer;border:1px solid ${cat.color};`}
+          style={`background:${cat.muted};color:#0F172A;font-family:'Courier New',Courier,monospace;font-size:13px;padding:3px 10px;border-radius:4px;cursor:pointer;border:1px solid ${cat.muted};`}
        >
          {cat.label}
        </button>
      ))}
    </div>

-    <!-- Selecteur plateforme Politique -->
+    <!-- Selecteur plateforme Politique (V1.4-B : transparent en fill inactive) -->
    <div id="politique-selector" class="mt-2 hidden flex gap-2">
      {categories[0].plateformes.map((p) => (
        <button
@@ -86,9 +110,10 @@ const categories = [
      </button>
    </div>

-    <!-- Bouton Manifeste -->
+    <!-- Bouton Manifeste (V1.3-E : sur "/" -> preview centrale, ailleurs -> page complete) -->
    <a
      href="/manifeste"
+      data-manifeste-link
      class="block mt-3 px-4 py-2 bg-neutral-900 text-white font-bold text-sm text-center rounded-lg hover:bg-neutral-700 transition-colors"
      style="font-family:'Courier New',Courier,monospace;"
    >
@@ -126,7 +151,7 @@ const categories = [
  const PLATFORM_KEY = 'tf-platform-filter';

  // Active state : map categoryId -> boolean
-  const activeCategories: Record<string, boolean> = { politique: true, art: true, outils: true };
+  const activeCategories: Record<string, boolean> = { politique: true, art: true, outils: true, pro: true };

  // Platform filter : map categoryId -> platformId | null
  const platformFilters: Record<string, string | null> = { politique: null };
@@ -138,15 +163,18 @@ const categories = [
    const politiqueHashtags = ['#politique', '#aep-politique'];
    const artHashtags = ['#peinture', '#art'];
    const outilsHashtags = ['#stack', '#building-public'];
+    const proHashtags = ['#building-public', '#pro'];

    const allPolitique = politiqueHashtags.every(h => storedHashtags[h] !== false);
    const allArt = artHashtags.every(h => storedHashtags[h] !== false);
    const allOutils = outilsHashtags.every(h => storedHashtags[h] !== false);
+    const allPro = proHashtags.every(h => storedHashtags[h] !== false);

    if (Object.keys(storedHashtags).length > 0) {
      activeCategories['politique'] = allPolitique;
      activeCategories['art'] = allArt;
      activeCategories['outils'] = allOutils;
+      activeCategories['pro'] = allPro;
    }
  } catch { /* mode prive */ }

@@ -163,6 +191,7 @@ const categories = [
      politique: ['#politique', '#aep-politique'],
      art: ['#peinture', '#art'],
      outils: ['#stack', '#building-public'],
+      pro: ['#building-public', '#pro'],
    };
    for (const [catId, tags] of Object.entries(catHashtags)) {
      const active = activeCategories[catId] ?? true;
@@ -188,12 +217,17 @@ const categories = [
    window.dispatchEvent(new CustomEvent('platform-filter-change', { detail: { platform } }));
  };

+  // V1.4-bis FIX 5 : pill active en couleur ATTENUEE (data-muted) + texte encre #0F172A.
+  // Inactive : transparent + texte couleur 100% + border couleur 100% (inchange).
+  // Pourquoi encre #0F172A au lieu de blanc : sur fond attenue (#C8867E etc.), le ratio
+  // contraste blanc tombe ~3.5:1 (limite). Encre #0F172A donne ratio ≥6:1 sur tous les muted.
  const updateBadgeStyle = (btn: HTMLElement, active: boolean) => {
    const color = btn.dataset.color || '#000';
+    const muted = btn.dataset.muted || color;
    if (active) {
-      btn.style.background = color;
-      btn.style.color = '#fff';
-      btn.style.border = `1px solid ${color}`;
+      btn.style.background = muted;
+      btn.style.color = '#0F172A';
+      btn.style.border = `1px solid ${muted}`;
    } else {
      btn.style.background = 'transparent';
      btn.style.color = color;
@@ -213,14 +247,17 @@ const categories = [
    }
  };

+  // V1.4-bis FIX 5 : sub-pills Politique, active en brique ATTENUEE #C8867E + encre.
+  // Active (ou aucun filtre) = fill #C8867E + texte encre #0F172A.
+  // Inactive = transparent + texte brique 100% + border brique 100%.
  const updatePillStyles = () => {
    const pills = document.querySelectorAll<HTMLElement>('.platform-pill');
    const active = platformFilters['politique'];
    pills.forEach((pill) => {
      const pid = pill.dataset.platformId;
      if (!active || pid === active) {
-        pill.style.background = '#B5443A';
-        pill.style.color = '#fff';
+        pill.style.background = '#C8867E';
+        pill.style.color = '#0F172A';
      } else {
        pill.style.background = 'transparent';
        pill.style.color = '#B5443A';
@@ -275,4 +312,17 @@ const categories = [
  if (platformFilters['politique']) {
    dispatchPlatform(platformFilters['politique']);
  }
+
+  // V1.3-E : intercept clics liens Manifeste -> preview centrale (uniquement sur racine /)
+  // Tagger les liens [data-manifeste-link] et router vers event 'preview-open' si on est sur /.
+  // Sinon : laisser la navigation native vers /manifeste.
+  document.querySelectorAll<HTMLAnchorElement>('a[data-manifeste-link]').forEach((el) => {
+    el.addEventListener('click', (e) => {
+      if (window.location.pathname === '/') {
+        e.preventDefault();
+        window.dispatchEvent(new CustomEvent('preview-open', { detail: { type: 'manifeste' } }));
+      }
+      // sinon : navigation normale vers /manifeste (fallback SEO + no-JS)
+    });
+  });
 </script>
@@ -1,30 +1,32 @@
 ---
-// Footer.astro - V1.2-L : 1 ligne 3 zones (nav / subscribe / logos RS)
-// Style monochrome encre #0F172A palette terre V1.2
+// Footer.astro - V1.4-F : 1 ligne 3 zones (nav / subscribe / logos RS).
+// Alignement vertical centre + padding-y reduit (py-2) pour profil plus fin.
+// Subscribe input/button compact (py-1) cale sur baseline des autres elements.
 ---
-<footer class="border-t border-neutral-200 px-6 py-4 bg-[#FAFAF7] text-[#0F172A]">
-  <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-3 md:gap-6">
+<footer class="border-t border-neutral-200 px-6 py-2 bg-[#FAFAF7] text-[#0F172A]">
+  <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-2 md:gap-6">

    <!-- ZONE GAUCHE : liens nav -->
-    <nav class="flex gap-4 text-xs justify-center md:justify-start">
-      <a href="/manifeste" class="opacity-60 hover:opacity-100 transition-opacity">Manifeste</a>
+    <nav class="flex gap-4 text-xs items-center justify-center md:justify-start">
+      <a href="/manifeste" data-manifeste-link class="opacity-60 hover:opacity-100 transition-opacity">Manifeste</a>
      <a href="/a-propos" class="opacity-60 hover:opacity-100 transition-opacity">A propos</a>
      <a href="/mentions-legales" class="opacity-60 hover:opacity-100 transition-opacity">Mentions legales</a>
    </nav>

-    <!-- ZONE CENTRE : subscribe form compact (endpoint /api/subscribe V1.1-I) -->
-    <div class="flex flex-col items-center gap-1">
+    <!-- ZONE CENTRE : subscribe form compact (endpoint /api/subscribe V1.1-I).
+         V1.4-F : padding-y reduit (py-1) pour caler input sur la baseline des liens + logos. -->
+    <div class="flex flex-col items-center gap-0.5">
      <form id="subscribe-form" class="flex gap-2 items-center">
        <input
          type="email"
          name="email"
          required
          placeholder="ton@email.fr"
-          class="px-3 py-1.5 border border-neutral-300 rounded text-xs focus:outline-none focus:border-[#0F172A] bg-white"
+          class="px-3 py-1 border border-neutral-300 rounded text-xs focus:outline-none focus:border-[#0F172A] bg-white leading-tight"
        />
        <button
          type="submit"
-          class="px-3 py-1.5 bg-[#0F172A] text-white rounded text-xs hover:bg-[#475569] transition-colors whitespace-nowrap"
+          class="px-3 py-1 bg-[#0F172A] text-white rounded text-xs hover:bg-[#475569] transition-colors whitespace-nowrap leading-tight"
        >
          s'abonner
        </button>
@@ -33,17 +35,34 @@
    </div>

    <!-- ZONE DROITE : logos RS cliquables (SVG inline, fill #0F172A 60%) -->
-    <div class="flex gap-3 items-center justify-center md:justify-end text-[#0F172A]">
-      <!-- Instagram -->
+    <!-- V1.3-F : gap-4 mobile / gap-6 desktop pour espacer les logos. V1.4-F : items-center force baseline. -->
+    <div class="flex gap-4 md:gap-6 items-center justify-center md:justify-end text-[#0F172A]">
+      <!-- V1.4-bis FIX 6 : Instagram x2 (AEP politique + Jules perso) avec aria-labels distincts.
+           V1.4-bis FIX 7 : SVG simplifie (camera carree avec coins arrondis, lentille, point flash) — rendu propre net. -->
      <a
        href="https://www.instagram.com/aep.politique/"
        target="_blank"
        rel="noopener noreferrer"
        aria-label="Instagram @aep.politique"
+        title="@aep.politique"
        class="opacity-60 hover:opacity-100 transition-opacity"
      >
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-[18px] h-[18px] md:w-5 md:h-5" fill="currentColor" aria-hidden="true">
-          <path d="M12 2.163c3.204 0 3.584.012 4.85.07 1.366.062 2.633.336 3.608 1.311.975.975 1.249 2.242 1.311 3.608.058 1.266.069 1.646.069 4.85s-.012 3.584-.07 4.85c-.062 1.366-.336 2.633-1.311 3.608-.975.975-2.242 1.249-3.608 1.311-1.266.058-1.646.07-4.85.07s-3.584-.012-4.85-.07c-1.366-.062-2.633-.336-3.608-1.311-.975-.975-1.249-2.242-1.311-3.608C2.175 15.647 2.163 15.267 2.163 12s.012-3.584.07-4.85c.062-1.366.336-2.633 1.311-3.608.975-.975 2.242-1.249 3.608-1.311 1.266-.058 1.646-.07 4.85-.07zm0 1.838c-3.15 0-3.522.012-4.766.069-1.024.047-1.58.218-1.95.362-.49.19-.84.418-1.207.786-.367.367-.595.717-.786 1.207-.144.37-.315.926-.362 1.95-.057 1.244-.069 1.616-.069 4.766s.012 3.522.069 4.766c.047 1.024.218 1.58.362 1.95.19.49.418.84.786 1.207.367.367.717.595 1.207.786.37.144.926.315 1.95.362 1.244.057 1.616.069 4.766.069s3.522-.012 4.766-.069c1.024-.047 1.58-.218 1.95-.362.49-.19.84-.418 1.207-.786.367-.367.595-.717.786-1.207.144-.37.315-.926.362-1.95.057-1.244.069-1.616.069-4.766s-.012-3.522-.069-4.766c-.047-1.024-.218-1.58-.362-1.95-.19-.49-.418-.84-.786-1.207-.367-.367-.717-.595-1.207-.786-.37-.144-.926-.315-1.95-.362C15.522 4.013 15.15 4.001 12 4.001zm0 3.135a4.864 4.864 0 110 9.728 4.864 4.864 0 010-9.728zm0 8.027a3.162 3.162 0 100-6.325 3.162 3.162 0 000 6.325zm6.187-8.249a1.137 1.137 0 11-2.275 0 1.137 1.137 0 012.275 0z"/>
+          <path d="M7.75 2C4.574 2 2 4.574 2 7.75v8.5C2 19.426 4.574 22 7.75 22h8.5C19.426 22 22 19.426 22 16.25v-8.5C22 4.574 19.426 2 16.25 2h-8.5zM4 7.75A3.75 3.75 0 017.75 4h8.5A3.75 3.75 0 0120 7.75v8.5A3.75 3.75 0 0116.25 20h-8.5A3.75 3.75 0 014 16.25v-8.5zM12 7a5 5 0 100 10 5 5 0 000-10zm0 2a3 3 0 110 6 3 3 0 010-6zm5.5-3.5a1 1 0 100 2 1 1 0 000-2z"/>
+        </svg>
+      </a>
+
+      <!-- Instagram @julesneny (compte perso/art) -->
+      <a
+        href="https://www.instagram.com/julesneny/"
+        target="_blank"
+        rel="noopener noreferrer"
+        aria-label="Instagram @julesneny"
+        title="@julesneny"
+        class="opacity-60 hover:opacity-100 transition-opacity"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-[18px] h-[18px] md:w-5 md:h-5" fill="currentColor" aria-hidden="true">
+          <path d="M7.75 2C4.574 2 2 4.574 2 7.75v8.5C2 19.426 4.574 22 7.75 22h8.5C19.426 22 22 19.426 22 16.25v-8.5C22 4.574 19.426 2 16.25 2h-8.5zM4 7.75A3.75 3.75 0 017.75 4h8.5A3.75 3.75 0 0120 7.75v8.5A3.75 3.75 0 0116.25 20h-8.5A3.75 3.75 0 014 16.25v-8.5zM12 7a5 5 0 100 10 5 5 0 000-10zm0 2a3 3 0 110 6 3 3 0 010-6zm5.5-3.5a1 1 0 100 2 1 1 0 000-2z"/>
        </svg>
      </a>

@@ -125,4 +144,16 @@
      msg.textContent = 'erreur reseau - reessaie plus tard';
    }
  });
+
+  // V1.3-E : intercept clics liens Manifeste depuis le footer -> preview centrale sur racine.
+  // Sur /a-propos, /mentions-legales, /manifeste lui-meme : navigation normale.
+  document.querySelectorAll<HTMLAnchorElement>('a[data-manifeste-link]').forEach((el) => {
+    el.addEventListener('click', (e) => {
+      if (window.location.pathname === '/') {
+        e.preventDefault();
+        window.dispatchEvent(new CustomEvent('preview-open', { detail: { type: 'manifeste' } }));
+      }
+      // sinon : navigation normale vers /manifeste
+    });
+  });
 </script>
@@ -5,7 +5,7 @@
 <button
  id="hamburger-trigger"
  type="button"
-  class="fixed top-4 right-4 z-50 p-3 bg-white/95 border border-neutral-200 rounded-lg shadow-md hover:bg-white transition-colors md:top-6 md:right-6"
+  class="fixed top-4 right-4 z-50 p-3 bg-white/95 border border-neutral-200 rounded-lg shadow-md hover:bg-white transition-colors md:hidden"
  aria-label="Ouvrir le menu"
  aria-expanded="false"
  aria-controls="hamburger-drawer"
@@ -1,52 +1,80 @@
 ---
-// SiteHeader.astro - V1.2-M : bandeau header pleine largeur identite site
-// Palette terre figee : papier #FAFAF7, encre #0F172A, encre douce #475569
-// Composition retenue : 2 lignes hierarchique
-//   ligne 1 : "Trans-Former" wordmark dominant (semibold tracking serre)
-//   ligne 2 : "Jules Neny" + baseline italique cote a cote (separateur point median)
-// Rationale : le wordmark domine sans ecraser ; la baseline reste lisible ;
-// composition adaptee a un manifeste (hierarchie typographique forte).
-// Hauteur : ~64px desktop / ~48px mobile (compacte)
-// Baseline raccourcie mobile : "architecture politique du vivant"
+// SiteHeader.astro - V1.3-C : header 1 ligne fine, liens cliquables, phrase intention Roboto Condensed
+// Palette V1.3 figee : papier #FAFAF7, encre #0F172A, encre douce #475569, border #E5E7EB
+// Composition :
+//   Desktop (>= md) : 1 ligne ~44px - Trans-Former | Jules Neny | architecture d'ecologie politique  [phrase intention right-aligned, Roboto Condensed]
+//   Mobile (< md)   : 2 lignes compactes - ligne 1 Trans-Former / ligne 2 Jules Neny . AEP (cliquables) - phrase intention masquee
+// Liens :
+//   Trans-Former -> /
+//   Jules Neny   -> /a-propos
+//   architecture d'ecologie politique -> https://aep.trans-former.fr (same-tab, site frere coherent)
+// Typo phrase intention : Roboto Condensed Variable @fontsource (weight 400, font-stretch 75%)
+import '@fontsource-variable/roboto-condensed/wght.css';
 ---
 <header
  class="site-header w-full border-b border-[#E5E7EB] bg-[#FAFAF7] text-[#0F172A] px-4 md:px-6 flex items-center"
  role="banner"
 >
-  <a
-    href="/"
-    class="flex flex-col md:flex-row md:items-baseline gap-x-3 gap-y-0 no-underline text-[#0F172A] hover:text-[#0F172A]"
-    aria-label="trans-former.fr - retour accueil"
+  <!-- Bloc identite (gauche) -->
+  <nav
+    class="flex flex-col md:flex-row md:items-baseline gap-x-2 gap-y-0.5 flex-shrink-0"
+    aria-label="identite site"
  >
-    <!-- Ligne 1 : wordmark dominant -->
-    <span
-      class="font-semibold tracking-tight text-[#0F172A] text-[17px] md:text-[20px] leading-none"
+    <!-- Ligne 1 desktop = wordmark inline ; mobile = ligne dediee -->
+    <a
+      href="/"
+      class="font-semibold tracking-tight text-[#0F172A] hover:text-[#0F172A] text-[15px] md:text-[16px] leading-none no-underline hover:underline underline-offset-2 decoration-1"
+      aria-label="trans-former.fr - accueil"
    >
      Trans-Former
-    </span>
+    </a>

-    <!-- Ligne 2 (desktop : inline ; mobile : sous wordmark) : Jules Neny + baseline -->
-    <span class="flex items-baseline gap-2 text-[#475569] leading-none">
-      <span class="text-[11px] md:text-[13px]">Jules Neny</span>
+    <!-- Bloc secondaire : Jules Neny . AEP (mobile : ligne 2 ; desktop : inline) -->
+    <span class="flex items-baseline gap-1.5 text-[#475569] leading-none">
+      <span class="text-[#94A3B8] hidden md:inline" aria-hidden="true">·</span>
+      <a
+        href="/a-propos"
+        class="text-[12px] md:text-[13px] text-[#475569] hover:text-[#0F172A] no-underline hover:underline underline-offset-2 decoration-1"
+      >
+        Jules Neny
+      </a>
      <span class="text-[#94A3B8]" aria-hidden="true">·</span>
-      <!-- Baseline longue : desktop / Baseline courte : mobile -->
-      <span class="italic text-[11px] md:text-[13px] hidden sm:inline">
-        architecture d'ecologie politique
-      </span>
-      <span class="italic text-[11px] inline sm:hidden">
-        architecture politique du vivant
-      </span>
+      <a
+        href="https://aep.trans-former.fr"
+        class="text-[12px] md:text-[13px] text-[#475569] hover:text-[#0F172A] no-underline hover:underline underline-offset-2 decoration-1"
+      >
+        architecture d'écologie politique
+      </a>
    </span>
-  </a>
+  </nav>
+
+  <!-- Phrase intention (droite, desktop only) - Roboto Condensed allongee -->
+  <p
+    class="intention hidden md:block ml-auto pl-6 text-right text-[#475569] text-[11px] leading-tight max-w-[55%]"
+  >
+    Comment créer une pratique systémique, créative et collective de transformation sociale pour répondre à l'effondrement et restaurer notre capacité à habiter la Terre dans l'Anthropocène&nbsp;?
+  </p>
 </header>

 <style>
  .site-header {
-    height: 48px;
+    height: 44px;
  }
-  @media (min-width: 768px) {
+  @media (max-width: 767px) {
    .site-header {
-      height: 64px;
+      height: auto;
+      min-height: 48px;
+      padding-top: 6px;
+      padding-bottom: 6px;
    }
  }
+  /* Phrase intention : Roboto Condensed Variable, font-stretch 75% (allongement vertical condense)
+     Cantonnee a .intention pour eviter contagion stack Inter */
+  .intention {
+    font-family: 'Roboto Condensed Variable', 'Roboto Condensed', sans-serif;
+    font-weight: 400;
+    font-stretch: 75%;
+    font-style: italic;
+    letter-spacing: 0.01em;
+  }
 </style>
@@ -20,17 +20,24 @@ 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)
 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 +125,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 +252,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 +291,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 +304,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)
@@ -330,23 +365,58 @@ 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)}`)

-  // 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)
+    // V1.4-C1 : rappel horizontal/vertical renforce (0.05 -> 0.08) + collide +14 (vs +12)
+    // pour mieux contenir les nodes dans le cadre visible de la zone Carte O.
+    .force('x', d3.forceX<SimNode>(width.value / 2).strength(0.08))
+    .force('y', d3.forceY<SimNode>(height.value / 2).strength(0.08))
+    .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) + 14
+    }))
+    .alphaDecay(0.025)
+    .velocityDecay(0.4)
+    .alphaMin(0.001)
    .on('tick', tick)

  // Bind drag once simulation exists.
@@ -409,6 +479,9 @@ onMounted(() => {
    }
    if (simulation) {
      simulation.force('center', d3.forceCenter(width.value / 2, height.value / 2))
+      // V1.4-C1 : aligne avec la simulation initiale (strength 0.08)
+      simulation.force('x', d3.forceX<SimNode>(width.value / 2).strength(0.08))
+      simulation.force('y', d3.forceY<SimNode>(height.value / 2).strength(0.08))
      simulation.alpha(0.3).restart()
    }
  })
@@ -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 {
@@ -1,57 +1,16 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
-
-interface BeholdPost {
-  id: string;
-  permalink: string;
-  mediaUrl: string;
-  thumbnailUrl?: string;
-  caption?: string;
-  mediaType: 'IMAGE' | 'VIDEO' | 'CAROUSEL_ALBUM';
-  timestamp: string;
-}
-
-const props = defineProps<{
-  feedId: string;
+defineProps<{
  account: string;
  accountUrl: string;
-  fallbackBio?: string;
+  secondAccount: string;
+  secondAccountUrl: string;
+  feedImages: string[]; // ordonné du plus récent (haut) au plus ancien (bas)
 }>();
-
-const posts = ref<BeholdPost[]>([]);
-const loading = ref(true);
-const error = ref<string | null>(null);
-
-const isPlaceholder = (id: string) => !id || id.startsWith('PLACEHOLDER_');
-
-onMounted(async () => {
-  if (isPlaceholder(props.feedId)) {
-    loading.value = false;
-    error.value = 'no-feed-id';
-    return;
-  }
-  try {
-    const controller = new AbortController();
-    const timeoutId = setTimeout(() => controller.abort(), 5000);
-    const res = await fetch(`https://feeds.behold.so/${props.feedId}`, {
-      signal: controller.signal,
-    });
-    clearTimeout(timeoutId);
-    if (!res.ok) throw new Error(`Behold returned ${res.status}`);
-    const data = await res.json();
-    const items: BeholdPost[] = Array.isArray(data) ? data : (data.posts ?? []);
-    posts.value = items.slice(0, 6);
-  } catch (e) {
-    error.value = (e as Error).message || 'fetch-error';
-  } finally {
-    loading.value = false;
-  }
-});
 </script>

 <template>
-  <section class="border-b border-neutral-200 last:border-b-0">
-    <header class="px-4 py-3 flex items-center justify-between">
+  <section class="h-full flex flex-col border-b border-neutral-200 last:border-b-0">
+    <header class="shrink-0 px-4 py-2 flex items-center justify-between gap-3">
      <a
        :href="accountUrl"
        target="_blank"
@@ -60,48 +19,62 @@ onMounted(async () => {
      >
        {{ account }}
      </a>
-      <span v-if="loading" class="text-xs text-neutral-400">...</span>
-    </header>
-
-    <div v-if="loading" class="grid grid-cols-2 gap-1 p-1">
-      <div
-        v-for="i in 4"
-        :key="i"
-        class="aspect-square bg-neutral-100 animate-pulse"
-      />
-    </div>
-
-    <div
-      v-else-if="posts.length"
-      class="grid grid-cols-2 gap-1 p-1"
-    >
      <a
-        v-for="post in posts"
-        :key="post.id"
-        :href="post.permalink"
+        :href="secondAccountUrl"
        target="_blank"
        rel="noopener"
-        class="block aspect-square overflow-hidden group"
+        class="font-medium text-sm text-neutral-500 hover:underline hover:text-neutral-800"
      >
-        <img
-          :src="post.thumbnailUrl || post.mediaUrl"
-          :alt="post.caption?.slice(0, 80) || account"
-          loading="lazy"
-          class="w-full h-full object-cover group-hover:scale-105 transition-transform"
-        />
+        {{ secondAccount }}
      </a>
-    </div>
+    </header>

-    <div v-else class="p-4 text-sm text-neutral-600">
-      <p v-if="fallbackBio" class="mb-3">{{ fallbackBio }}</p>
+    <div class="insta-feed-scroll flex-1 min-h-0">
      <a
        :href="accountUrl"
        target="_blank"
        rel="noopener"
-        class="inline-block px-3 py-2 bg-neutral-900 text-white rounded-lg text-sm"
+        :aria-label="`Voir le compte Instagram ${account}`"
      >
-        Voir sur Instagram &rarr;
+        <img
+          v-for="(src, i) in feedImages"
+          :key="i"
+          :src="src"
+          alt=""
+          loading="lazy"
+          class="block w-full feed-img"
+        />
      </a>
    </div>
+
+    <div class="shrink-0 px-2 py-1">
+      <span
+        class="block text-center px-3 py-1 bg-neutral-200 text-neutral-400 rounded text-xs cursor-not-allowed"
+        aria-disabled="true"
+        title="Boutique — bientôt disponible"
+      >
+        Boutique
+      </span>
+    </div>
  </section>
 </template>
+
+<style scoped>
+.insta-feed-scroll {
+  overflow-y: auto;
+  scrollbar-width: thin;
+}
+.insta-feed-scroll::-webkit-scrollbar {
+  width: 6px;
+}
+.insta-feed-scroll::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.25);
+  border-radius: 3px;
+}
+.insta-feed-scroll::-webkit-scrollbar-track {
+  background: transparent;
+}
+.feed-img + .feed-img {
+  margin-top: 2px;
+}
+</style>
@@ -0,0 +1,165 @@
+<script setup lang="ts">
+// V1.3-E : contenu manifeste pour preview centrale (mode racine /).
+// TODO V1.4 : extraire contenu manifeste dans src/content/manifeste.md (content collection)
+//             pour avoir une source unique partagee avec src/pages/manifeste.astro.
+//             Actuellement : duplication consciente du texte (~50 lignes) entre les 2 fichiers.
+//             Si modif texte -> repercuter aux 2 endroits (this file + manifeste.astro).
+</script>
+
+<template>
+  <article class="manifeste-content px-4 md:px-6 py-6 md:py-8 bg-white">
+
+    <!-- En-tete -->
+    <header class="mb-8 md:mb-10">
+      <p class="text-[10px] uppercase tracking-widest text-neutral-500 mb-2">
+        Manifeste
+      </p>
+      <h1 class="text-xl md:text-2xl font-semibold text-neutral-900 leading-tight">
+        Architecture d'Écologie Politique
+      </h1>
+      <p class="mt-3 text-neutral-600 text-sm md:text-base leading-relaxed">
+        Un commun vivant pour bifurquer ; ensemble, lentement, par accumulation de petits gestes situés.
+      </p>
+      <!-- V1.3-F : CTA "commander" deplace tout en bas (apres lecture). Le seul lien d'entete = page complete. -->
+      <div class="mt-5 flex flex-wrap gap-2">
+        <a
+          href="/manifeste"
+          class="inline-block px-4 py-2 border border-neutral-300 text-neutral-700 rounded-lg text-sm hover:border-neutral-900 hover:text-neutral-900 transition-colors"
+          title="Ouvrir la page complete dans un nouvel onglet"
+          target="_blank"
+          rel="noopener"
+        >
+          Page complète &rarr;
+        </a>
+      </div>
+    </header>
+
+    <!-- Corps du manifeste -->
+    <div class="text-neutral-800 text-[14px] md:text-[15px] leading-[1.7] space-y-4">
+
+      <p class="italic text-neutral-700">
+        Un quart des architectes vivent sous le seuil de pauvreté. La moitié de nos heures, non facturées. Nos cotisations, parmi les plus lourdes des professions réglementées. Et le secteur du bâtiment, à lui seul, pèse 34% des émissions mondiales de gaz à effet de serre.
+      </p>
+
+      <p>
+        Quelque chose s'est rompu ; pas dans nos vies, dans les cadres qui les contiennent.
+      </p>
+
+      <p>
+        Notre profession ne traverse pas une simple crise. Elle reflète l'effondrement d'un monde qui confond performance et destruction, signature et silence, expertise et soumission.
+      </p>
+
+      <hr class="border-neutral-200 my-6" />
+
+      <h2 class="text-base md:text-lg font-semibold text-neutral-900 mt-8 mb-3">
+        Ce que nous voyons.
+      </h2>
+
+      <p>
+        À l'échelle du métier, une profession structurellement sous l'eau, qui absorbe les tensions d'un système extractiviste ; et porte la responsabilité quand d'autres captent la valeur.
+      </p>
+
+      <p>
+        À l'échelle des corps, une culture qui rend l'exploitation désirable : métier-passion, modèle starchitecte, isolement libéral, moteur critique délégitimant. Nous tenons. Nous payons.
+      </p>
+
+      <p>
+        À l'échelle du monde, l'effondrement écologique et social qui avance, pendant que notre voix s'efface du débat public. Notre silence le sert.
+      </p>
+
+      <hr class="border-neutral-200 my-6" />
+
+      <h2 class="text-base md:text-lg font-semibold text-neutral-900 mt-8 mb-3">
+        Ce que nous refusons.
+      </h2>
+
+      <p>
+        Nous ne signerons plus pour des projets qui détruisent.<br />
+        Nous n'isolerons plus celles et ceux qui doutent.<br />
+        Nous ne porterons plus seul-es ce qui doit se penser, se faire ; et se soigner ; ensemble.
+      </p>
+
+      <hr class="border-neutral-200 my-6" />
+
+      <!-- Pivot : centre emotionnel du texte (italique + retrait) -->
+      <blockquote class="my-8 md:my-10 px-4 md:px-6 py-4 border-l-4 border-neutral-900 italic text-neutral-800 text-sm md:text-base leading-relaxed">
+        <p class="font-medium not-italic mb-2 text-neutral-900">
+          Et pourtant, quelque chose tient.
+        </p>
+        <p>
+          Pas l'espoir naïf, ni la promesse héroïque. Quelque chose de plus humble : la fatigue commune reconnue, et l'envie qui revient de ne plus économiser sa vie.
+        </p>
+      </blockquote>
+
+      <hr class="border-neutral-200 my-6" />
+
+      <h2 class="text-base md:text-lg font-semibold text-neutral-900 mt-8 mb-3">
+        Ce que nous tentons.
+      </h2>
+
+      <p>
+        <em class="font-semibold not-italic">Partager.</em> Nos parcours, nos doutes, nos bifurcations. Se former les un-es les autres. Se tendre la main. Documenter ce qui marche, ce qui rate. Le personnel devient politique quand il se met en commun.
+      </p>
+
+      <p>
+        <em class="font-semibold not-italic">Construire.</em> L'infrastructure collective qui nous a manqué. Cartes d'entraide, communs documentés, gouvernance horizontale, financement transparent, infra souveraine. <strong>Architecture d'Écologie Politique</strong> : un commun vivant, ouvert, biorégional, ancré.
+      </p>
+
+      <p>
+        <em class="font-semibold not-italic">Pratiquer une médecine du corps social.</em> Diagnostiquer les infrastructures qui défaillent ; l'éducation, la justice, la sécurité, l'énergie, la santé, le logement, l'agriculture. Proposer des reconfigurations situées, territoire par territoire. Reprendre le pouvoir par la base. Écrire, lentement, un nouveau contrat social.
+      </p>
+
+      <p>
+        <em class="font-semibold not-italic">Commencer par les marges.</em> Là où le corps social souffre le plus, là où il est le plus prêt à changer. Ne pas décider à la place ; faire émerger. Transparence totale, sur le process et sur l'argent. Tendresse militante : la lucidité sans le mépris, l'engagement sans la dureté.
+      </p>
+
+      <hr class="border-neutral-200 my-6" />
+
+      <h2 class="text-base md:text-lg font-semibold text-neutral-900 mt-8 mb-3">
+        Architectes, allié-es, habitant-es.
+      </h2>
+
+      <p>
+        Nous avons un travail à faire ensemble. Lentement, patiemment, par accumulation de petits gestes situés. Pas pour fuir ; pour bifurquer.
+      </p>
+
+      <!-- Chute : italique, separee -->
+      <p class="mt-6 md:mt-8 italic text-neutral-900 text-sm md:text-base leading-relaxed">
+        Nos métiers sont des médecines. Reprenons-en le pouls ; à mains nues, ensemble.
+      </p>
+    </div>
+
+    <!-- V1.3-F : CTA commander version papier — bord rouge brique #B5443A, signal politique fort.
+         Place en bas, apres lecture : j'achete, tranquille. -->
+    <section class="mt-10 pt-6 border-t border-neutral-200 text-center">
+      <p class="text-xs italic text-neutral-500 mb-3">
+        Manifeste lu. J'achete la version papier, tranquille.
+      </p>
+      <a
+        href="/manifeste/commander"
+        class="inline-block px-5 py-2.5 border-2 border-[#B5443A] text-[#0F172A] bg-[#FAFAF7] font-medium text-sm hover:bg-[#E5C3BE] transition-colors"
+      >
+        Commander la version papier
+      </a>
+    </section>
+
+    <!-- Footer simple : lien vers page complete pour les detail (mouvements, etc.) -->
+    <footer class="mt-6 pt-4 border-t border-neutral-200 text-center">
+      <a
+        href="/manifeste"
+        target="_blank"
+        rel="noopener"
+        class="text-xs text-neutral-500 hover:text-neutral-900 underline"
+      >
+        Voir la page complète (mouvements M/S/XL, liens articles) &rarr;
+      </a>
+    </footer>
+
+  </article>
+</template>
+
+<style scoped>
+.manifeste-content {
+  font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+}
+</style>
@@ -1,5 +1,14 @@
 <script setup lang="ts">
+// V1.3-E : PreviewArticle gere 2 modes :
+//   - 'article' (V1.2-P existant) : teaser + embed Substack / Instagram / CTA propagation
+//   - 'manifeste' (V1.3-E)        : affiche <ManifesteContent /> dans la preview centrale
+// Events ecoutes :
+//   - 'journal-item-click'   -> mode 'article' (legacy V1.2-P, conserve tel quel)
+//   - 'preview-open'         -> nouvel event unifie, payload { type: 'article' | 'manifeste', data?: ... }
+//   - 'preview-close-request'-> close externe
+// Event emis : 'preview-close' (utilise par ColCentre pour restaurer la mise en page).
 import { ref, computed, onMounted, onUnmounted } from 'vue'
+import ManifesteContent from './ManifesteContent.vue'

 interface JournalItem {
  id: string
@@ -12,28 +21,50 @@ interface JournalItem {
  thumbnail: string | null
 }

+type PreviewMode = 'article' | 'manifeste' | null
+
+const mode = ref<PreviewMode>(null)
 const selectedItem = ref<JournalItem | null>(null)

 const onJournalItemClick = (e: Event) => {
  const ce = e as CustomEvent
-  if (ce.detail?.item) selectedItem.value = ce.detail.item
+  if (ce.detail?.item) {
+    selectedItem.value = ce.detail.item
+    mode.value = 'article'
+  }
+}
+
+const onPreviewOpen = (e: Event) => {
+  const ce = e as CustomEvent
+  const type = ce.detail?.type
+  if (type === 'manifeste') {
+    mode.value = 'manifeste'
+    selectedItem.value = null
+  } else if (type === 'article' && ce.detail?.item) {
+    selectedItem.value = ce.detail.item
+    mode.value = 'article'
+  }
 }

 const onPreviewCloseExternal = () => {
  selectedItem.value = null
+  mode.value = null
 }

 onMounted(() => {
  window.addEventListener('journal-item-click', onJournalItemClick as EventListener)
+  window.addEventListener('preview-open', onPreviewOpen as EventListener)
  window.addEventListener('preview-close-request', onPreviewCloseExternal as EventListener)
 })
 onUnmounted(() => {
  window.removeEventListener('journal-item-click', onJournalItemClick as EventListener)
+  window.removeEventListener('preview-open', onPreviewOpen as EventListener)
  window.removeEventListener('preview-close-request', onPreviewCloseExternal as EventListener)
 })

 const close = () => {
  selectedItem.value = null
+  mode.value = null
  window.dispatchEvent(new CustomEvent('preview-close'))
 }

@@ -81,9 +112,10 @@ const formatDate = (iso: string) => {
 </script>

 <template>
-  <div v-if="selectedItem" class="preview-article border border-neutral-200 rounded overflow-hidden bg-white flex flex-col">
+  <Transition name="preview-fade">
+  <div v-if="mode" class="preview-article border border-neutral-200 rounded overflow-hidden bg-white flex flex-col">

-    <!-- Header : reset + hashtag -->
+    <!-- Header : reset + label (hashtag article OU "Manifeste") -->
    <div class="flex items-center justify-between px-4 py-2 border-b border-neutral-200 bg-white">
      <button
        class="text-xs text-neutral-500 hover:text-neutral-900 flex items-center gap-1"
@@ -92,61 +124,97 @@ const formatDate = (iso: string) => {
      >
        - Retour a la carte
      </button>
-      <span class="text-xs text-neutral-400" style="font-family: 'Courier New', Courier, monospace;">
+      <span
+        v-if="mode === 'article' && selectedItem"
+        class="text-xs text-neutral-400"
+        style="font-family: 'Courier New', Courier, monospace;"
+      >
        {{ selectedItem.hashtag }}
      </span>
+      <span
+        v-else-if="mode === 'manifeste'"
+        class="text-xs text-neutral-400"
+        style="font-family: 'Courier New', Courier, monospace;"
+      >
+        #manifeste
+      </span>
    </div>

-    <!-- Teaser -->
-    <div class="px-4 py-3 border-b border-neutral-100 bg-neutral-50">
-      <p class="text-[11px] text-neutral-500 mb-1">{{ formatDate(selectedItem.date) }} - {{ selectedItem.platform }}</p>
-      <h3 class="text-sm font-semibold text-neutral-900 leading-snug mb-1">{{ selectedItem.titre }}</h3>
-      <p v-if="selectedItem.extrait" class="text-xs text-neutral-600 leading-relaxed line-clamp-3">
-        {{ selectedItem.extrait }}
-      </p>
-      <img
-        v-if="selectedItem.thumbnail"
-        :src="selectedItem.thumbnail"
-        :alt="selectedItem.titre"
-        class="mt-2 w-full max-h-28 object-cover rounded"
-        loading="lazy"
-      />
+    <!-- Mode 'manifeste' : contenu manifeste -->
+    <div v-if="mode === 'manifeste'" class="bg-white">
+      <ManifesteContent />
    </div>

-    <!-- Embed live (Substack ou Instagram) -->
-    <div v-if="embedUrl" class="bg-white" style="height: 60vh; min-height: 400px;">
-      <iframe
-        :src="embedUrl"
-        class="w-full h-full border-0"
-        :title="selectedItem.titre"
-        loading="lazy"
-        sandbox="allow-scripts allow-same-origin allow-popups allow-forms allow-top-navigation"
-      ></iframe>
-    </div>
+    <!-- Mode 'article' : V1.2-P legacy -->
+    <template v-else-if="mode === 'article' && selectedItem">
+      <!-- Teaser -->
+      <div class="px-4 py-3 border-b border-neutral-100 bg-neutral-50">
+        <p class="text-[11px] text-neutral-500 mb-1">{{ formatDate(selectedItem.date) }} - {{ selectedItem.platform }}</p>
+        <h3 class="text-sm font-semibold text-neutral-900 leading-snug mb-1">{{ selectedItem.titre }}</h3>
+        <p v-if="selectedItem.extrait" class="text-xs text-neutral-600 leading-relaxed line-clamp-3">
+          {{ selectedItem.extrait }}
+        </p>
+        <img
+          v-if="selectedItem.thumbnail"
+          :src="selectedItem.thumbnail"
+          :alt="selectedItem.titre"
+          class="mt-2 w-full max-h-28 object-cover rounded"
+          loading="lazy"
+        />
+      </div>

-    <!-- Carte incitative (autres plateformes) -->
-    <div v-else class="flex flex-col items-start justify-center px-4 py-6">
-      <p class="text-xs text-neutral-500 mb-3 italic">Embed non disponible pour cette plateforme.</p>
-      <a
-        :href="selectedItem.url"
-        target="_blank"
-        rel="noopener noreferrer"
-        class="inline-block px-4 py-2 bg-neutral-900 text-white text-sm rounded-lg hover:bg-neutral-700 transition-colors"
-      >
-        Voir sur {{ platformLabel(selectedItem.platform) }} ->
-      </a>
-    </div>
+      <!-- Embed live (Substack ou Instagram) -->
+      <div v-if="embedUrl" class="bg-white" style="height: 60vh; min-height: 400px;">
+        <iframe
+          :src="embedUrl"
+          class="w-full h-full border-0"
+          :title="selectedItem.titre"
+          loading="lazy"
+          sandbox="allow-scripts allow-same-origin allow-popups allow-forms allow-top-navigation"
+        ></iframe>
+      </div>

-    <!-- CTA propagation universel -->
-    <div class="px-4 py-3 border-t border-neutral-100">
-      <a
-        :href="selectedItem.url"
-        target="_blank"
-        rel="noopener noreferrer"
-        class="text-xs text-neutral-500 hover:text-neutral-900 underline"
-      >
-        Continuer sur {{ platformLabel(selectedItem.platform) }} - commenter, partager
-      </a>
-    </div>
+      <!-- Carte incitative (autres plateformes) -->
+      <div v-else class="flex flex-col items-start justify-center px-4 py-6">
+        <p class="text-xs text-neutral-500 mb-3 italic">Embed non disponible pour cette plateforme.</p>
+        <a
+          :href="selectedItem.url"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="inline-block px-4 py-2 bg-neutral-900 text-white text-sm rounded-lg hover:bg-neutral-700 transition-colors"
+        >
+          Voir sur {{ platformLabel(selectedItem.platform) }} ->
+        </a>
+      </div>
+
+      <!-- CTA propagation universel -->
+      <div class="px-4 py-3 border-t border-neutral-100">
+        <a
+          :href="selectedItem.url"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="text-xs text-neutral-500 hover:text-neutral-900 underline"
+        >
+          Continuer sur {{ platformLabel(selectedItem.platform) }} - commenter, partager
+        </a>
+      </div>
+    </template>
  </div>
+  </Transition>
 </template>
+
+<style scoped>
+/* V1.4-E2 : animation legere ouverture/fermeture preview (fade + slide-up subtil) */
+.preview-fade-enter-active,
+.preview-fade-leave-active {
+  transition: opacity 0.25s ease, transform 0.25s ease;
+}
+.preview-fade-enter-from {
+  opacity: 0;
+  transform: translateY(8px);
+}
+.preview-fade-leave-to {
+  opacity: 0;
+  transform: translateY(4px);
+}
+</style>
@@ -6,34 +6,113 @@ import SiteHeader from '../components/astro/SiteHeader.astro';
 interface Props {
  title?: string;
  description?: string;
+  ogImage?: string;
+  canonical?: string;
+  /** Article JSON-LD : passer true sur les pages articles (manifeste, etc.) */
+  isArticle?: boolean;
+  articleDate?: string;
+  articleDescription?: string;
 }

 const {
-  title = 'trans-former.fr',
-  description = "Architecture d'ecologie politique - journal, carte conceptuelle, manifeste",
+  title,
+  description,
+  ogImage,
+  canonical,
+  isArticle = false,
+  articleDate,
+  articleDescription,
 } = Astro.props;
+
+const SITE_NAME = 'trans-former.fr';
+const SITE_URL = 'https://trans-former.fr';
+const DEFAULT_DESC = "Architecture, ecologie, politique : un commun a construire ensemble. Manifeste et infrastructure vivante de Jules NENY.";
+const DEFAULT_OG = '/og-default.png';
+
+const fullTitle = title ? `${title} - ${SITE_NAME}` : SITE_NAME;
+const finalDesc = description || DEFAULT_DESC;
+const finalCanonical = canonical || new URL(Astro.url.pathname, SITE_URL).href;
+const finalOg = ogImage || DEFAULT_OG;
+const finalOgAbsolute = finalOg.startsWith('http') ? finalOg : `${SITE_URL}${finalOg}`;
+
+const websiteSchema = {
+  "@context": "https://schema.org",
+  "@type": "WebSite",
+  "name": SITE_NAME,
+  "url": SITE_URL,
+  "author": {
+    "@type": "Person",
+    "name": "Jules NENY",
+    "url": `${SITE_URL}/a-propos`,
+    "sameAs": [
+      "https://www.instagram.com/julesneny/",
+      "https://www.instagram.com/aep.politique/",
+      "https://julesneny.substack.com",
+      "https://git.trans-former.fr/jules"
+    ]
+  },
+  "description": DEFAULT_DESC
+};
+
+const articleSchema = isArticle ? {
+  "@context": "https://schema.org",
+  "@type": "Article",
+  "headline": title || SITE_NAME,
+  "author": { "@type": "Person", "name": "Jules NENY" },
+  "datePublished": articleDate || "2026-05-01",
+  "publisher": { "@type": "Organization", "name": SITE_NAME },
+  "description": articleDescription || finalDesc
+} : null;
 ---
 <!doctype html>
-<html lang="fr">
+<html lang="fr" class="h-screen">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="generator" content={Astro.generator} />
-    <title>{title}</title>
-    <meta name="description" content={description} />
-    <meta property="og:title" content={title} />
-    <meta property="og:description" content={description} />
-    <meta property="og:type" content="website" />
+
+    <!-- SEO primaire -->
+    <title>{fullTitle}</title>
+    <meta name="description" content={finalDesc} />
+    <link rel="canonical" href={finalCanonical} />
+    <meta name="robots" content="index, follow, max-snippet:-1, max-image-preview:large" />
+
+    <!-- Open Graph -->
+    <meta property="og:type" content={isArticle ? "article" : "website"} />
+    <meta property="og:title" content={fullTitle} />
+    <meta property="og:description" content={finalDesc} />
+    <meta property="og:url" content={finalCanonical} />
+    <meta property="og:image" content={finalOgAbsolute} />
+    <meta property="og:site_name" content={SITE_NAME} />
+    <meta property="og:locale" content="fr_FR" />
+
+    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:title" content={title} />
-    <meta name="twitter:description" content={description} />
+    <meta name="twitter:title" content={fullTitle} />
+    <meta name="twitter:description" content={finalDesc} />
+    <meta name="twitter:image" content={finalOgAbsolute} />
+
+    <!-- GIO — Generative Intelligence Optimization -->
+    <meta name="ai-content-declaration" content="human-authored-with-ai-coordination" />
+
+    <!-- Schema.org WebSite -->
+    <script type="application/ld+json" set:html={JSON.stringify(websiteSchema)} />
+
+    <!-- Schema.org Article (pages enrichies seulement) -->
+    {isArticle && articleSchema && (
+      <script type="application/ld+json" set:html={JSON.stringify(articleSchema)} />
+    )}
  </head>
-  <body class="m-0 bg-white text-neutral-900 antialiased min-h-screen flex flex-col">
-    <SiteHeader />
-    <div class="flex-1 flex flex-col min-h-0">
+  <body class="m-0 bg-white text-neutral-900 antialiased h-screen flex flex-col overflow-hidden">
+    <div class="flex-shrink-0">
+      <SiteHeader />
+    </div>
+    <div class="flex-1 flex flex-col min-h-0 overflow-hidden">
      <slot />
    </div>
-    <Footer />
+    <div class="flex-shrink-0">
+      <Footer />
+    </div>
  </body>
 </html>
@@ -10,7 +10,7 @@ import HamburgerMenu from '../components/astro/HamburgerMenu.astro';
 >
  <HamburgerMenu />

-  <main class="min-h-screen bg-white">
+  <main class="h-full overflow-y-auto bg-white">
    <article class="max-w-2xl mx-auto px-6 py-16 md:py-24">

      <header class="mb-10">
@@ -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>
@@ -0,0 +1,196 @@
+import type { APIRoute } from 'astro'
+
+export const prerender = false
+
+const KIT_API_BASE = 'https://api.kit.com/v4'
+const TAG_NAME = 'AEP - sans perso'
+
+function htmlPage(title: string, heading: string, message: string): string {
+  return `<!doctype html>
+<html lang="fr">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>${title} — trans-former.fr</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body class="bg-neutral-50 text-neutral-900 min-h-screen flex items-center justify-center p-6">
+    <main class="max-w-md w-full bg-white rounded-xl shadow-sm border border-neutral-200 p-8 text-center">
+      <h1 class="text-2xl font-semibold mb-4">${heading}</h1>
+      <p class="text-neutral-600 leading-relaxed">${message}</p>
+      <a href="https://www.trans-former.fr"
+         class="mt-6 inline-block text-sm text-neutral-500 underline underline-offset-2 hover:text-neutral-900">
+        &larr; Retour sur trans-former.fr
+      </a>
+    </main>
+  </body>
+</html>`
+}
+
+async function getSubscriberByEmail(email: string, apiKey: string): Promise<string | null> {
+  const url = `${KIT_API_BASE}/subscribers?email_address=${encodeURIComponent(email)}`
+  const res = await fetch(url, {
+    headers: { 'X-Kit-Api-Key': apiKey },
+    signal: AbortSignal.timeout(10000),
+  })
+  if (!res.ok) return null
+  const data = await res.json()
+  if (!data?.subscribers?.length) return null
+  return String(data.subscribers[0].id)
+}
+
+async function getTagId(apiKey: string): Promise<number | null> {
+  const url = `${KIT_API_BASE}/tags`
+  const res = await fetch(url, {
+    headers: { 'X-Kit-Api-Key': apiKey },
+    signal: AbortSignal.timeout(10000),
+  })
+  if (!res.ok) return null
+  const data = await res.json()
+  const tag = data?.tags?.find((t: any) => t.name === TAG_NAME)
+  return tag?.id ?? null
+}
+
+async function tagSubscriber(subscriberId: string, tagId: number, apiKey: string): Promise<boolean> {
+  const url = `${KIT_API_BASE}/tags/${tagId}/subscribers`
+  const res = await fetch(url, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      'X-Kit-Api-Key': apiKey,
+    },
+    body: JSON.stringify({ id: subscriberId }),
+    signal: AbortSignal.timeout(10000),
+  })
+  return res.ok || res.status === 409
+}
+
+async function untagSubscriber(subscriberId: string, tagId: number, apiKey: string): Promise<boolean> {
+  const url = `${KIT_API_BASE}/tags/${tagId}/subscribers/${subscriberId}`
+  const res = await fetch(url, {
+    method: 'DELETE',
+    headers: { 'X-Kit-Api-Key': apiKey },
+    signal: AbortSignal.timeout(10000),
+  })
+  return res.ok || res.status === 404
+}
+
+export const GET: APIRoute = async ({ url }) => {
+  const KIT_API_KEY = import.meta.env.KIT_API_SECRET_V4
+  if (!KIT_API_KEY) {
+    return new Response(htmlPage(
+      'Erreur',
+      'Configuration manquante',
+      'Le service de désinscription n\'est pas configuré. Contacte-moi à <a href="mailto:julesneny8@gmail.com" class="underline">julesneny8@gmail.com</a>.'
+    ), {
+      status: 500,
+      headers: { 'Content-Type': 'text/html; charset=utf-8' },
+    })
+  }
+
+  const email = (url.searchParams.get('email') || '').trim().toLowerCase()
+  const action = url.searchParams.get('action')
+
+  if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+    return new Response(htmlPage(
+      'Lien invalide',
+      'Lien invalide',
+      'Le lien que tu as suivi est incomplet ou mal formé. Essaye de copier-coller l\'URL complète depuis l\'email.'
+    ), {
+      status: 400,
+      headers: { 'Content-Type': 'text/html; charset=utf-8' },
+    })
+  }
+
+  if (action !== 'unsubscribe' && action !== 'resubscribe') {
+    return new Response(htmlPage(
+      'Action inconnue',
+      'Action inconnue',
+      'Le lien que tu as suivi ne correspond à aucune action connue.'
+    ), {
+      status: 400,
+      headers: { 'Content-Type': 'text/html; charset=utf-8' },
+    })
+  }
+
+  try {
+    const subscriberId = await getSubscriberByEmail(email, KIT_API_KEY)
+    if (!subscriberId) {
+      return new Response(htmlPage(
+        'Email inconnu',
+        'Email inconnu',
+        'Cet email n\'est pas abonné à la newsletter. Si tu penses qu\'il s\'agit d\'une erreur, écris-moi à <a href="mailto:julesneny8@gmail.com" class="underline">julesneny8@gmail.com</a>.'
+      ), {
+        status: 404,
+        headers: { 'Content-Type': 'text/html; charset=utf-8' },
+      })
+    }
+
+    const tagId = await getTagId(KIT_API_KEY)
+    if (!tagId) {
+      return new Response(htmlPage(
+        'Erreur',
+        'Configuration manquante',
+        'Le tag de désinscription est introuvable. Contacte-moi à <a href="mailto:julesneny8@gmail.com" class="underline">julesneny8@gmail.com</a>.'
+      ), {
+        status: 500,
+        headers: { 'Content-Type': 'text/html; charset=utf-8' },
+      })
+    }
+
+    if (action === 'unsubscribe') {
+      const result = await tagSubscriber(subscriberId, tagId, KIT_API_KEY)
+      if (!result) {
+        return new Response(htmlPage(
+          'Erreur',
+          'Erreur technique',
+          'Une erreur est survenue lors de la désinscription. Réessaie ou écris-moi à <a href="mailto:julesneny8@gmail.com" class="underline">julesneny8@gmail.com</a>.'
+        ), {
+          status: 500,
+          headers: { 'Content-Type': 'text/html; charset=utf-8' },
+        })
+      }
+      return new Response(htmlPage(
+        'Désinscription réussie',
+        'Tu es désinscrit·e',
+        'Tu ne recevras plus les lettres «&nbsp;perso&nbsp;» de l\'infolettre <em>Architecture d\'Écologie Politique</em>. Tu continues à recevoir les textes de fond.<br><br>Si tu changes d\'avis, un lien de réabonnement est disponible dans chaque email de fond.'
+      ), {
+        status: 200,
+        headers: { 'Content-Type': 'text/html; charset=utf-8' },
+      })
+    }
+
+    if (action === 'resubscribe') {
+      const result = await untagSubscriber(subscriberId, tagId, KIT_API_KEY)
+      if (!result) {
+        return new Response(htmlPage(
+          'Erreur',
+          'Erreur technique',
+          'Une erreur est survenue lors du réabonnement. Réessaie ou écris-moi à <a href="mailto:julesneny8@gmail.com" class="underline">julesneny8@gmail.com</a>.'
+        ), {
+          status: 500,
+          headers: { 'Content-Type': 'text/html; charset=utf-8' },
+        })
+      }
+      return new Response(htmlPage(
+        'Réabonnement réussi',
+        'Tu es de nouveau abonné·e',
+        'Tu recevras à nouveau les lettres «&nbsp;perso&nbsp;» de l\'infolettre <em>Architecture d\'Écologie Politique</em>. Merci de ton intérêt !'
+      ), {
+        status: 200,
+        headers: { 'Content-Type': 'text/html; charset=utf-8' },
+      })
+    }
+
+    return new Response(null, { status: 400 })
+  } catch (e) {
+    return new Response(htmlPage(
+      'Erreur',
+      'Erreur technique',
+      'Une erreur inattendue est survenue. Réessaie ou écris-moi à <a href="mailto:julesneny8@gmail.com" class="underline">julesneny8@gmail.com</a>.'
+    ), {
+      status: 500,
+      headers: { 'Content-Type': 'text/html; charset=utf-8' },
+    })
+  }
+}
@@ -15,22 +15,117 @@ import PopupOnboarding from '../components/astro/PopupOnboarding.astro';
  <MobileTabBar />
  <PopupOnboarding />

-  <!-- Desktop : grid 3 colonnes (header 64px deja consommes par SiteHeader, on prend le reste) -->
+  <!-- Desktop : grid 3 colonnes V1.4-A avec toggle CACHER latéraux (bidirectionnel).
+       Layout dynamique pilote par CSS vars --col-left / --col-right (320px visible, 0 cache).
+       Re-clic = bidirectionnel : col reapparait, centre se retracte. sessionStorage persist.
+       V1.4-bis FIX 2 : suppression du couplage display:none + width:0 (conflit grid).
+       On utilise EXCLUSIVEMENT --col-left/--col-right (0px = aside disparait visuellement).
+       Le contenu de l'aside est cache via visibility hidden (preserve la place 0 sans bug grid).
+       Grid template utilise minmax(0,1fr) pour que la col centre ne s'effondre pas quand les
+       voisins sont a 0 (cas critique 2 togglees). -->
  <div
-    class="hidden md:grid md:grid-cols-[320px_1fr_320px] overflow-hidden"
-    style="height: calc(100vh - 64px);"
+    id="desktop-grid"
+    class="hidden md:grid h-full overflow-hidden relative"
+    style="grid-template-columns: var(--col-left, 320px) minmax(0, 1fr) var(--col-right, 320px);"
  >
-    <aside class="border-r border-neutral-200 overflow-y-auto"><ColJournal /></aside>
-    <main class="overflow-hidden"><ColCentre /></main>
-    <aside class="border-l border-neutral-200 overflow-y-auto"><ColInsta /></aside>
+    <aside id="col-left-aside" class="border-r border-neutral-200 overflow-hidden h-full"><div class="h-full overflow-y-auto"><ColJournal /></div></aside>
+    <main class="overflow-hidden h-full relative" style="min-width: 0;">
+      <ColCentre />
+      <!-- Toggle gauche : pose sur le bord gauche de la colonne centrale.
+           Icone < quand col visible (clic = cacher) ; > quand col cachee (clic = rouvrir). -->
+      <button
+        type="button"
+        id="toggle-col-left"
+        aria-label="Cacher/afficher colonne gauche"
+        class="hidden md:flex absolute left-0 top-1/2 -translate-y-1/2 z-20 w-5 h-12 items-center justify-center bg-white border border-neutral-200 border-l-0 rounded-r text-neutral-500 hover:bg-neutral-50 hover:text-neutral-900 transition-colors cursor-pointer"
+        style="font-family:'Courier New',Courier,monospace;font-size:14px;line-height:1;"
+      >
+        <span id="toggle-col-left-icon">&lsaquo;</span>
+      </button>
+      <!-- Toggle droite : pose sur le bord droit de la colonne centrale.
+           Icone > quand col visible (clic = cacher) ; < quand col cachee (clic = rouvrir). -->
+      <button
+        type="button"
+        id="toggle-col-right"
+        aria-label="Cacher/afficher colonne droite"
+        class="hidden md:flex absolute right-0 top-1/2 -translate-y-1/2 z-20 w-5 h-12 items-center justify-center bg-white border border-neutral-200 border-r-0 rounded-l text-neutral-500 hover:bg-neutral-50 hover:text-neutral-900 transition-colors cursor-pointer"
+        style="font-family:'Courier New',Courier,monospace;font-size:14px;line-height:1;"
+      >
+        <span id="toggle-col-right-icon">&rsaquo;</span>
+      </button>
+    </main>
+    <aside id="col-right-aside" class="border-l border-neutral-200 overflow-hidden h-full"><div class="h-full overflow-y-auto"><ColInsta /></div></aside>
  </div>

-  <!-- Mobile : SwipeContainer Vue island - header 48px + tabbar 44px = 92px reserves -->
-  <div class="md:hidden overflow-hidden" style="height: calc(100dvh - 48px - 44px); margin-top: 44px;">
+  <!-- Mobile : SwipeContainer Vue island - tabbar 44px reserve dans la zone flex-1 -->
+  <div class="md:hidden h-full overflow-hidden" style="padding-top: 44px;">
    <SwipeContainer client:load>
      <ColJournal slot="left" />
      <ColCentre slot="center" />
      <ColInsta slot="right" />
    </SwipeContainer>
  </div>
+
+  <script>
+    // V1.4-A : toggle CACHER colonnes laterales (bidirectionnel, focus simple).
+    // - Clic bouton gauche / droite -> cache la col concernee (width 0 + display:none).
+    // - Re-clic -> re-affiche. ColCentre s'elargit ou se retracte selon le grid recalcul.
+    // - Etat persiste en sessionStorage (survit aux refresh dans la meme tab).
+    const KEY_LEFT = 'tf-col-left-collapsed';
+    const KEY_RIGHT = 'tf-col-right-collapsed';
+
+    const grid = document.getElementById('desktop-grid') as HTMLElement | null;
+    const asideLeft = document.getElementById('col-left-aside') as HTMLElement | null;
+    const asideRight = document.getElementById('col-right-aside') as HTMLElement | null;
+    const btnLeft = document.getElementById('toggle-col-left') as HTMLButtonElement | null;
+    const btnRight = document.getElementById('toggle-col-right') as HTMLButtonElement | null;
+    const iconLeft = document.getElementById('toggle-col-left-icon');
+    const iconRight = document.getElementById('toggle-col-right-icon');
+
+    let collapsedLeft = false;
+    let collapsedRight = false;
+
+    try {
+      collapsedLeft = sessionStorage.getItem(KEY_LEFT) === '1';
+      collapsedRight = sessionStorage.getItem(KEY_RIGHT) === '1';
+    } catch { /* mode prive */ }
+
+    // V1.4-bis FIX 2 : UNE SEULE technique (CSS var width 0px) — pas de display:none
+    // qui creait un conflit grid : quand display:none + grid-column 0 cohabitent,
+    // certains navigateurs ne recalculent pas la col centre correctement → centre disparu.
+    // Maintenant : aside reste dans le flux avec width 0 (overflow hidden cache le contenu)
+    // + le contenu interne avec visibility hidden pour ne pas etre focusable au tab.
+    const apply = () => {
+      if (!grid) return;
+      grid.style.setProperty('--col-left', collapsedLeft ? '0px' : '320px');
+      grid.style.setProperty('--col-right', collapsedRight ? '0px' : '320px');
+      // Aside reste en flux (display: '' par defaut) pour ne pas casser le grid template.
+      // Visibility hidden + tabindex -1 sur le contenu pour empecher interaction inutile.
+      if (asideLeft) {
+        asideLeft.style.visibility = collapsedLeft ? 'hidden' : '';
+        asideLeft.setAttribute('aria-hidden', collapsedLeft ? 'true' : 'false');
+      }
+      if (asideRight) {
+        asideRight.style.visibility = collapsedRight ? 'hidden' : '';
+        asideRight.setAttribute('aria-hidden', collapsedRight ? 'true' : 'false');
+      }
+      // Icones : pointe vers la direction d'ouverture (sens depliage).
+      if (iconLeft) iconLeft.innerHTML = collapsedLeft ? '&rsaquo;' : '&lsaquo;';
+      if (iconRight) iconRight.innerHTML = collapsedRight ? '&lsaquo;' : '&rsaquo;';
+    };
+
+    apply();
+
+    btnLeft?.addEventListener('click', () => {
+      collapsedLeft = !collapsedLeft;
+      try { sessionStorage.setItem(KEY_LEFT, collapsedLeft ? '1' : '0'); } catch { /* mode prive */ }
+      apply();
+    });
+
+    btnRight?.addEventListener('click', () => {
+      collapsedRight = !collapsedRight;
+      try { sessionStorage.setItem(KEY_RIGHT, collapsedRight ? '1' : '0'); } catch { /* mode prive */ }
+      apply();
+    });
+  </script>
 </BaseLayout>
@@ -7,10 +7,13 @@ import HamburgerMenu from '../components/astro/HamburgerMenu.astro';
 <BaseLayout
  title="Manifeste - Architecture d'Ecologie Politique"
  description="Manifeste AEP : un commun vivant pour une architecture d'ecologie politique. Architectes, allie-es, habitant-es."
+  isArticle={true}
+  articleDate="2026-05-01"
+  articleDescription="Manifeste fondateur des Agences d'Ecologie Politique - un commun vivant pour bifurquer ensemble."
 >
  <HamburgerMenu />

-  <main class="min-h-screen bg-white">
+  <main class="h-full overflow-y-auto bg-white">
    <article class="max-w-2xl mx-auto px-6 py-16 md:py-24">

      <!-- En-tete -->
@@ -24,14 +27,7 @@ import HamburgerMenu from '../components/astro/HamburgerMenu.astro';
        <p class="mt-4 text-neutral-600 text-base md:text-lg leading-relaxed">
          Un commun vivant pour bifurquer ; ensemble, lentement, par accumulation de petits gestes situes.
        </p>
-        <div class="mt-8">
-          <a
-            href="/manifeste/commander"
-            class="inline-block px-5 py-2.5 border border-neutral-900 text-neutral-900 rounded-lg font-medium hover:bg-neutral-900 hover:text-white transition-colors"
-          >
-            Commander la version imprimee
-          </a>
-        </div>
+        <!-- V1.3-F : CTA "commander" deplace tout en bas de page (apres avoir lu). -->
      </header>

      <!-- Corps du manifeste -->
@@ -203,6 +199,20 @@ import HamburgerMenu from '../components/astro/HamburgerMenu.astro';
        </div>
      </section>

+      <!-- V1.3-F : CTA commander version papier — bord rouge brique #B5443A, signal politique fort.
+           Place en bas : le lecteur a lu, il sait ce qu'il achete. Tranquille. -->
+      <section class="mt-16 pt-10 border-t border-neutral-200 text-center">
+        <p class="text-sm italic text-neutral-500 mb-4">
+          Manifeste lu. J'achete la version papier, tranquille.
+        </p>
+        <a
+          href="/manifeste/commander"
+          class="inline-block px-6 py-3 border-2 border-[#B5443A] text-[#0F172A] bg-[#FAFAF7] font-medium text-base hover:bg-[#E5C3BE] transition-colors"
+        >
+          Commander la version papier
+        </a>
+      </section>
+
      <!-- En lire plus -->
      <footer class="mt-16 pt-10 border-t border-neutral-200 text-center">
        <p class="text-neutral-600 mb-4">En lire plus</p>
@@ -10,7 +10,7 @@ import HamburgerMenu from '../../components/astro/HamburgerMenu.astro';
 >
  <HamburgerMenu />

-  <main class="min-h-screen bg-white">
+  <main class="h-full overflow-y-auto bg-white">
    <article class="max-w-xl mx-auto px-6 py-16 md:py-24">

      <header class="mb-10">
@@ -10,7 +10,7 @@ import HamburgerMenu from '../components/astro/HamburgerMenu.astro';
 >
  <HamburgerMenu />

-  <main class="min-h-screen bg-white">
+  <main class="h-full overflow-y-auto bg-white">
    <article class="max-w-2xl mx-auto px-6 py-16 md:py-24">

      <header class="mb-10">
@@ -0,0 +1,20 @@
+---
+// Page TEMPORAIRE de test du pont Tailwind 4 (@transformer/ui) — P3 §1.
+// Sert a verifier que le pont compile les utilitaires et que les tokens
+// se resolvent en vraies valeurs. A supprimer apres validation.
+export const prerender = true;
+---
+<!doctype html>
+<html lang="fr">
+  <head><meta charset="utf-8" /><title>pont-test</title></head>
+  <body class="bg-bg text-text">
+    <div class="bg-surface text-text-muted border-border">surface / muted / border</div>
+    <div class="bg-primary text-on-primary">primary / on-primary</div>
+    <div class="bg-accent text-on-accent">accent / on-accent</div>
+    <div class="text-link hover:text-link-hover">lien</div>
+    <div class="bg-success bg-warning bg-danger">etats</div>
+    <div class="font-(family-name:--font-heading) rounded-(--radius-md) shadow-(--shadow-md) ease-(--ease-out)">
+      syntaxe var arbitraire (namespaces non mappes)
+    </div>
+  </body>
+</html>
@@ -1,4 +1,9 @@
@import "tailwindcss";
+/* Pont design system (P3 §1) : tokens + mappings @theme Tailwind 4.
+   Pas de reset.css ni theme/*.css tant que la palette racine n'est pas tranchee —
+   le bridge seul ne change aucun rendu (il ne definit que des variables). */
+@import "@transformer/ui/tokens.css";
+@import "@transformer/ui/tailwind.css";

 /* Typographie monospace - labels editoriaux (V1.1-G.1) */
 .font-mono-editorial,
Author	SHA1	Message	Date
Jules NenyandClaude Opus 5.5	fec977a58f	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	2026-09-29 14:06:25 +02:00
Jules NenyandClaude Fable 5.1	6a01db1833	wip(pont): pont Tailwind 4 câblé + pont-test.astro + carte-o.json (session défrichage 17/08, mis à l'abri le 22/09) Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>	2026-09-22 14:05:12 +02:00
Jules NenyandClaude Sonnet 5	f642160d4b	fix(insta): feed remplit toute la hauteur de colonne, Boutique collée en bas La zone de scroll avait une max-height fixe (420px) alors que la colonne fait toute la hauteur de la page -> gros bandeau blanc entre le feed et le footer. Passe en flex-col (header shrink-0, feed flex-1 scrollable, Boutique shrink-0 collée en bas), le feed occupe maintenant tout l'espace disponible. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>	2026-07-07 17:55:43 +02:00
Jules NenyandClaude Sonnet 5	d58911a7e8	feat(insta): simplifie - 2 comptes en header, Boutique seule en bas Retire les 3 onglets (trop petits, moches). Header : "Jules Neny" (compte actif, lien direct) + "AEP" (lien direct vers @aep.politique, pas encore de feed dédié). Bande du bas : uniquement "Boutique" (placeholder désactivé). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>	2026-07-07 17:53:26 +02:00
Jules NenyandClaude Sonnet 5	5a4a8fbc2b	feat(insta): 3 onglets (artistique/boutique/politique) + bande réduite Réduit le padding de la bande d'actions (py-3->py-1, gap serré) pour coller au feed. Ajoute un 3e onglet "Compte Insta politique" en placeholder désactivé, à côté de "Boutique", en prévision d'une navigation à onglets entre les comptes @julesneny (artistique, actif) et @aep.politique (à venir). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>	2026-07-07 17:49:44 +02:00
Jules NenyandClaude Sonnet 5	aa819600f5	feat(insta): remplace la grille 3x3 par un feed scrollable (13 captures) Empile les 13 captures d'écran du feed réel (IMG_5439..5451, plus récent en haut, plus ancien en bas) dans une colonne overflow-y:auto avec scrollbar fine, pour permettre de naviguer dans le feed sans quitter le site. Petit gap 2px entre chaque capture (façon séparation Instagram). Dédoublonnage pixel des zones de chevauchement tenté (corrélation de luminance par ligne) mais abandonné : signal pas assez discriminant sur ce contenu (fonds crème uniformes). Chevauchement naturel accepté. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>	2026-07-07 17:45:13 +02:00
Jules NenyandClaude Sonnet 5	11499a147c	feat(insta): remplace Behold (jamais configuré) par galerie statique @julesneny ColInsta n'affichait que le fallback bio depuis PC5 (feed IDs Behold jamais renseignés, login Facebook Business trop lourd). Retire le bloc @aep.politique (jugé insatisfaisant) et remplace InstaFeed par une galerie 3x3 statique de 9 vignettes réelles (croppées depuis le dernier screenshot du feed), avec boutons Compte Insta + Boutique (placeholder désactivé, en attente d'URL). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>	2026-07-07 17:05:41 +02:00
Jules Neny	7e7ddfbfbf	feat(api): ajoute endpoint /api/aep-perso (desinscription/reabonnement)	2026-07-04 11:55:15 +02:00
Jules Neny	36feace21f	fix(deploy): node 20-alpine -> 22-alpine (astro 6 requires node 22)	2026-05-12 12:03:08 +02:00
Jules Neny	0e65156fa0	feat(v1): page-cerveau LIVE - PC0-PC8 + V1.1-V1.4-bis	2026-05-12 11:31:23 +02:00
Jules Neny	020cf0a162	chore: rebuild carte-o.json (17 nodes/20 edges, prebuild auto)	2026-05-12 11:29:38 +02:00
Jules Neny	1c4dce2fa4	feat(deploy): Dockerfile multi-stage Node 20-alpine pour Coolify Build stage : npm ci + npm run build (inclut prebuild carte-o.js). Runtime : node:20-alpine, dist/ + node_modules copiees, EXPOSE 3000, HOST/PORT env. Start command Coolify : node ./dist/server/entry.mjs	2026-05-12 11:29:30 +02:00
Jules Neny	cde95cdf61	feat(gio): llms.txt + Schema.org WebSite+Person JSON-LD + meta ai-content-declaration - public/llms.txt : description structuree ecosysteme Jules NENY pour LLMs (sections/reseaux/politique d'usage) - BaseLayout.astro : Schema.org WebSite + Person JSON-LD (sameAs Insta + Substack + Gitea) ; Schema.org Article conditionnel via isArticle prop - Meta ai-content-declaration : human-authored-with-ai-coordination	2026-05-12 11:29:20 +02:00
Jules Neny	f099463636	feat(seo): sitemap + robots.txt + meta OG/Twitter/canonical + site URL - Installe @astrojs/sitemap ; integre dans astro.config.mjs avec filtre /api/ - Ajoute site: 'https://trans-former.fr' pour canonical absolues - BaseLayout : props ogImage + canonical + isArticle + articleDate ; meta description/canonical/robots/OG/Twitter Card complets ; suppression doublons - manifeste.astro : passe isArticle=true pour Schema.org Article - public/robots.txt : open index + GPTBot/ClaudeBot/Google-Extended/Applebot-Extended/PerplexityBot explicites	2026-05-12 11:29:02 +02:00
Jules Neny	d01301e40b	merge(v14-bis): drag overlay + toggle minmax + manifeste preview slot + scrollbar + couleurs muted + Insta x2	2026-05-12 00:49:43 +02:00
Jules Neny	dbba7dee3a	fix(v14-bis): drag handle overlay + toggle gauche + manifeste preview + scrollbar visible + couleurs attenuees + 2e logo insta FIX 1 drag handle : overlay full-screen z-9998 capture mouseup garanti (iframe AEP capturait les events — overlay au-dessus de tout au mousedown) FIX 2 toggle gauche : minmax(0,1fr) + visibility hidden au lieu de display:none (conflit display:none + width:0 effondrait la col centre quand 2 cols togglees) FIX 3 manifeste preview : slot flex-col + astro-island display:block (display:contents masquait astro-island au flex layout, preview ne s'inserait pas) FIX 4 scrollbar visible : overflow-y:auto + scrollbar-color custom #94A3B8 (style WebKit + Firefox uniquement quand data-preview-open=true) FIX 5 couleurs attenuees : data-muted #C8867E/#8F9A78/#7B848E/#566375 + texte encre FIX 6 Insta x2 : @aep.politique + @julesneny avec aria-labels et titles distincts FIX 7 SVG Insta : path simple (camera carree + lentille) au lieu du path complexe	2026-05-12 00:49:01 +02:00
Jules Neny	3baeb0378c	merge(v14-cde): Carte O cadre + bouton toggle desktop + drag mouseup fix + manifeste preview client:load + transitions	2026-05-12 00:31:21 +02:00
Jules Neny	6db93d9c5a	merge(v14-abf): toggle cols fix + pastels revert + footer compact aligned	2026-05-12 00:31:20 +02:00
Jules Neny	5a628fd85b	fix(v14-cde): Carte O cadre + bouton replier desktop + drag mouseup fix + manifeste preview event + transitions - C1 : cadre 1px #CBD5E1 + radius 6px autour section centre-haut (Carte O zone). Force tuning CarteO.vue : forceX/Y strength 0.05 -> 0.08, collide radius +12 -> +14 pour mieux contenir les nodes dans le cadre visible. - C2 : bouton toggle Carte O desktop (icone triangle dans le bandeau, a cote de la legende). Replie a flex 0 0 36px (header reste visible, body masque avec opacity 0). Persistance sessionStorage 'tf-carte-o-collapsed'. - D : fix drag handle qui ne se decliquait pas au mouseup. Listeners poses sur window (vs document) + ajout pointerup/mouseleave/blur/mouseenter-buttons-0 pour couvrir tous les flux utilisateur (sortie iframe, perte focus, relache hors-page). Suspension transitions CSS pendant le drag (pas de lag). - E1 : PreviewArticle hydration client:load (vs client:visible) - le v-if rendait l'IntersectionObserver aveugle, donc les listeners 'preview-open' n'etaient jamais installes. Resultat : clic manifeste -> preview ne s'ouvrait pas. - E2 : Transition Vue preview-fade (opacity + translateY 8px, 250ms ease) + transitions CSS flex-basis 0.3s ease sur sections haut/bas pour smooth UX.	2026-05-12 00:30:42 +02:00
Jules Neny	bc7e394913	fix(v14-abf): toggle cols cacher seulement bidirectionnel + revert pastels transparent + footer align	2026-05-12 00:28:52 +02:00
Jules Neny	b48b66bd76	merge(v13-f): palette desopacifiee + toggle cols + footer gap + manifeste CTA bord rouge	2026-05-11 20:15:17 +02:00
Jules Neny	e012d11bee	feat(v13-f): palette desopacifiee pills + toggle cols laterales + footer gap-6 + manifeste CTA bord rouge	2026-05-11 20:14:28 +02:00
Jules Neny	8703d056d9	merge(v13-e): manifeste UX preview centrale + page /manifeste preserve	2026-05-11 20:09:07 +02:00
Jules Neny	b4f6d63f33	feat(v13-e): manifeste UX preview centrale (racine) + page /manifeste preserve standalone	2026-05-11 20:08:20 +02:00
Jules Neny	8e7125b426	merge(v13-d): Carte O Option B rectangle central + bandeau sommaire + legende + TMIP	2026-05-11 20:01:34 +02:00
Jules Neny	6b9f6bf751	merge(v13-c): header 1-line cliquables + phrase intention Roboto Condensed	2026-05-11 20:01:33 +02:00
Jules Neny	372cb62229	merge(v13-bg): layout 1 ecran fixe + Pro/LinkedIn + hamburger desktop hide	2026-05-11 20:01:33 +02:00
Jules Neny	8f8b0c5f4c	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.	2026-05-11 20:00:30 +02:00
Jules Neny	aa410ce7aa	feat(v13-bg): layout 1 ecran fixe + hamburger desktop hide + categorie Pro	2026-05-11 20:00:16 +02:00
Jules Neny	e90a7e12ef	feat(v13-c): header 1-line cliquables + phrase intention Roboto Condensed	2026-05-11 19:58:07 +02:00
Jules Neny	e43ec60ecf	merge(v13-p0): iframe AEP skeleton timeout fallback fix loading stuck	2026-05-11 19:53:54 +02:00