Merge branch 'feat/v11-i' into feat/page-cerveau-v1

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

.env.example

@@ -1,3 +1,6 @@
+# Kit (ex-ConvertKit) - newsletter infolettre
+KIT_API_SECRET_V4=kit_xxx
+
 # Behold.so feed IDs (voir docs/BEHOLD-SETUP.md)
 # 1) Inscris-toi sur https://behold.so/dashboard
 # 2) Connecte les 2 comptes Insta (@aep.politique + @julesneny)

package-lock.json

@@ -20,6 +20,9 @@
         "tailwindcss": "^4.2.4",
         "vue": "^3.5.34"
       },
+      "devDependencies": {
+        "js-yaml": "^4.1.1"
+      },
       "engines": {
         "node": ">=22.12.0"
       }

package.json

@@ -26,5 +26,8 @@
     "gray-matter": "^4.0.3",
     "tailwindcss": "^4.2.4",
     "vue": "^3.5.34"
+  },
+  "devDependencies": {
+    "js-yaml": "^4.1.1"
   }
 }

public/data/carte-o-source.yaml

@@ -0,0 +1,120 @@
+# Carte O AEP - source editoriale manuelle
+# Edite manuellement apres chaque publication
+# Build: npm run carte-o -> public/data/carte-o.json
+# statut: gestation (draft/en cours) | edite (publie)
+# nature: essai (texte politique) | projet (projet archi)
+# niveau: 0 (centre) | 1 (concepts force) | 2 (thematiques/projets)
+
+version: "1.1"
+
+centre:
+  id: "nouveau-contrat-social"
+  label: "Nouveau Contrat Social"
+  niveau: 0
+  nature: essai
+  statut: gestation
+  resume: "Assemblage de tout ce que j'ecris qui s'entrechoque - inventer un nouveau contrat social."
+
+concepts_force:
+  - id: "ncs-politique"
+    label: "Nouveau contrat social"
+    niveau: 1
+    nature: essai
+    statut: gestation
+    resume: "L'ecriture politique d'un futur habitable - essai central AEP."
+  - id: "medecine-corps-social"
+    label: "Medecine du corps social"
+    niveau: 1
+    nature: essai
+    statut: gestation
+    resume: "Diagnostiquer et soigner les pathologies du corps social - concept AEP mdcs."
+
+thematiques:
+  - id: "systemique"
+    label: "Systemique & complexite"
+    niveau: 2
+    nature: essai
+    statut: gestation
+  - id: "pratiques-collectives"
+    label: "Pratiques collectives"
+    niveau: 2
+    nature: essai
+    statut: gestation
+  - id: "art-narration"
+    label: "Art & narration"
+    niveau: 2
+    nature: essai
+    statut: gestation
+  - id: "pouvoir-domination"
+    label: "Rapport au pouvoir"
+    niveau: 2
+    nature: essai
+    statut: gestation
+  - id: "medias-critique"
+    label: "Medias & pensee critique"
+    niveau: 2
+    nature: essai
+    statut: gestation
+  - id: "justice-securite"
+    label: "Justice & securite"
+    niveau: 2
+    nature: essai
+    statut: gestation
+  - id: "sante-globale"
+    label: "Sante globale"
+    niveau: 2
+    nature: essai
+    statut: gestation
+  - id: "agriculture"
+    label: "Agriculture"
+    niveau: 2
+    nature: essai
+    statut: gestation
+  - id: "post-croissance"
+    label: "Post-croissance"
+    niveau: 2
+    nature: essai
+    statut: gestation
+  - id: "anthropocene"
+    label: "Anthropocene & effondrement"
+    niveau: 2
+    nature: essai
+    statut: gestation
+  - id: "education"
+    label: "Education a la transformation"
+    niveau: 2
+    nature: essai
+    statut: gestation
+  - id: "urbanisme"
+    label: "Urbanisme"
+    niveau: 2
+    nature: essai
+    statut: gestation
+  - id: "geopolitique"
+    label: "Geopolitique & decolonisation"
+    niveau: 2
+    nature: essai
+    statut: gestation
+  - id: "ia-technologie"
+    label: "IA & technologie"
+    niveau: 2
+    nature: essai
+    statut: gestation
+  - id: "spiritualite"
+    label: "Spiritualite"
+    niveau: 2
+    nature: essai
+    statut: gestation
+
+projets:
+  - id: "tmip"
+    label: "TMIP"
+    niveau: 2
+    nature: projet
+    statut: gestation
+    resume: "Transport, mobilite, industrie, politique - projet archi. Exemple de projet archi relie aux thematiques AEP."
+    liens_thematiques:
+      - "urbanisme"
+      - "justice-securite"
+      - "post-croissance"
+      - "agriculture"

scripts/build-carte-o.js

@@ -1,303 +1,127 @@
 #!/usr/bin/env node
-// Scrape AEP/Articles/ thematic folders -> public/data/carte-o.json
-// Two frontmatter formats supported :
-//   1. YAML standard between --- delimiters
-//   2. Legacy "MOC : [[X]]\nSource : ...\nTags : ...\nDate : ...\n***" header
-//
-// Wikilinks [[X]] in body -> edges (resolved by label match against scraped nodes).
-// Family inferred from theme directory name (5 AEP families).
-// V1 cap : top 150 nodes by degree if scrape > 300 nodes.
-
 import fs from 'node:fs/promises'
 import path from 'node:path'
 import { fileURLToPath } from 'node:url'
-import matter from 'gray-matter'
-import { globby } from 'globby'
+import yaml from 'js-yaml'
 
 const __filename = fileURLToPath(import.meta.url)
 const __dirname = path.dirname(__filename)
 
 const REPO_ROOT = path.resolve(__dirname, '..')
-const ARTICLES_ROOT = 'C:/Users/jules/Dropbox/ATIS - IPCJRA/2 CASQUETTES/Penseur politique/AEP/Articles'
+const SOURCE = path.join(REPO_ROOT, 'public/data/carte-o-source.yaml')
 const OUTPUT = path.join(REPO_ROOT, 'public/data/carte-o.json')
-const NODE_CAP_V1 = 150
 
-// 5 AEP families : palette refined after first scrape.
-const FAMILY_COLORS = {
-  penseur:   '#3b82f6',  // blue
-  concept:   '#10b981',  // green
-  methode:   '#f59e0b',  // amber
-  collectif: '#ef4444',  // red
-  ressource: '#8b5cf6',  // violet
+// radius par niveau + nature
+function getRadius(niveau, nature) {
+  if (niveau === 0) return 28
+  if (niveau === 1) return 18
+  if (niveau === 2 && nature === 'projet') return 14
+  return 10
 }
 
-function slugify(str) {
-  return String(str || '')
-    .normalize('NFD').replace(/[̀-ͯ]/g, '')
-    .toLowerCase()
-    .replace(/[^a-z0-9]+/g, '-')
-    .replace(/^-+|-+$/g, '')
-    .slice(0, 80) || 'untitled'
+// compat backward : nature -> family
+function getFamily(nature) {
+  return nature === 'projet' ? 'ressource' : 'concept'
 }
 
-function inferFamily(signals) {
-  // signals = { title, theme, path, tags, content }
-  const haystack = [
-    signals.title,
-    signals.theme,
-    signals.path,
-    Array.isArray(signals.tags) ? signals.tags.join(' ') : signals.tags,
-    (signals.content || '').slice(0, 800),
-  ].filter(Boolean).join(' ').toLowerCase()
+// thematiques rattachees directement au centre (ni ncs-politique ni medecine-corps-social)
+const CENTRE_THEMATIQUES = new Set([
+  'medias-critique',
+  'justice-securite',
+  'agriculture',
+  'urbanisme',
+  'geopolitique',
+])
 
-  // Order matters : check most specific first.
-  // METHODE : process, outils, comment-faire
-  if (/m[ée]thode|outil|pratique|community.organizing|alinsky\b|comment\b|process|protocole|recette|guide|how.to|chantier|d[ée]marche/.test(haystack)) {
-    return 'methode'
-  }
-  // PENSEUR : noms propres, auteurs, figures
-  if (/penseur|auteur|figure|harari|alinsky|piven|chouard|branco|mamdani|shift|graeber|bourdieu|lordon|stiegler|d[ée]bord|illich|gorz|servigne|vidal|haupt|pisani|lalo|rosa/.test(haystack)) {
-    return 'penseur'
-  }
-  // COLLECTIF : organisations, mouvements, réseaux
-  if (/collectif|r[ée]seau|asso|union|coop|mouvement|piraterie|sociale|syndicat|comit[ée]|crise.de.la.profession|nyc|mamdani|chantier/.test(haystack)) {
-    return 'collectif'
-  }
-  // CONCEPT : notions, théories, critiques
-  if (/concept|notion|th[ée]orie|critique|fiction|kakistocratie|imp[ée]rialisme|robustesse|sycophan|d[ée]construction|paradoxe|dialectique|ontologie|capitalisme|n[ée]olib[ée]ral|d[ée]mocratie|biais|illusion/.test(haystack)) {
-    return 'concept'
-  }
-  // RESSOURCE : par défaut (articles brouillon, idées, agendas)
-  return 'ressource'
-}
+const NCS_THEMATIQUES = new Set([
+  'systemique',
+  'pratiques-collectives',
+  'pouvoir-domination',
+  'post-croissance',
+  'education',
+])
 
-// Fallback parser for legacy "MOC : [[X]]\nSource : ...\nDate : ...\n***\n" headers.
-function parseLegacyHeader(raw) {
-  const lines = raw.split(/\r?\n/)
-  const fm = {}
-  let bodyStart = 0
-  let foundHeader = false
-
-  for (let i = 0; i < Math.min(lines.length, 30); i++) {
-    const line = lines[i]
-    if (/^\s*\*\*\*\s*$/.test(line)) {
-      bodyStart = i + 1
-      foundHeader = true
-      break
-    }
-    const m = line.match(/^([A-Za-zÀ-ÿ ]+)\s*:\s*(.+)$/)
-    if (m) {
-      const key = m[1].trim().toLowerCase()
-      fm[key] = m[2].trim()
-    }
-  }
-
-  if (!foundHeader) return { data: {}, content: raw }
-
-  // Parse tags (space-separated #tag tokens).
-  if (fm.tags) {
-    fm.tags = fm.tags.match(/#[\w/-]+/g) || []
-  }
-  return {
-    data: fm,
-    content: lines.slice(bodyStart).join('\n'),
-  }
-}
-
-function safeParseFrontmatter(raw) {
-  // Try YAML first.
-  try {
-    const parsed = matter(raw)
-    if (Object.keys(parsed.data).length > 0) return parsed
-  } catch (_) {
-    // YAML parse failed, fall through.
-  }
-  return parseLegacyHeader(raw)
-}
-
-function extractFirstParagraph(content, maxLen = 220) {
-  // Skip headings, code blocks, callout/quote markers.
-  const cleaned = content
-    .replace(/^---[\s\S]*?---\n/, '')
-    .replace(/```[\s\S]*?```/g, '')
-    .split(/\n\n+/)
-    .map(p => p.trim())
-    .filter(p => p && !p.startsWith('#') && !p.startsWith('---') && !p.startsWith('|'))
-  // Prefer first paragraph that looks like prose (not a list).
-  const prose = cleaned.find(p => !/^\s*[->*•\d+\.\s]/.test(p) && p.length > 30)
-  const first = prose || cleaned[0] || ''
-  // Strip wikilinks, bold, italics, callout markers.
-  return first
-    .replace(/\[\[([^\]|]+)(?:\|[^\]]+)?\]\]/g, '$1')
-    .replace(/[*_>]+/g, '')
-    .replace(/\s+/g, ' ')
-    .trim()
-    .slice(0, maxLen)
-}
-
-function extractWikilinks(content) {
-  // Match [[Target]], [[Target|alias]], [[Target#section]]
-  // Skip image embeds ![[...]]
-  const matches = [...content.matchAll(/(?<!!)\[\[([^\]|#]+)(?:[#|][^\]]*)?\]\]/g)]
-  return matches.map(m => m[1].trim()).filter(Boolean)
-}
+const MDCS_THEMATIQUES = new Set([
+  'art-narration',
+  'sante-globale',
+  'spiritualite',
+  'ia-technologie',
+  'anthropocene',
+])
 
 async function main() {
-  console.log('[carte-o] Scraping', ARTICLES_ROOT)
-
-  // Glob all .md recursively under Articles/.
-  const mdFiles = await globby(['**/*.md'], {
-    cwd: ARTICLES_ROOT,
-    absolute: true,
-    gitignore: false,
-  })
-  console.log(`[carte-o] Found ${mdFiles.length} markdown files`)
+  const raw = await fs.readFile(SOURCE, 'utf-8')
+  const data = yaml.load(raw)
 
   const nodes = []
-  const edgesRaw = []
-  const themeStats = {}
-
-  for (const mdFile of mdFiles) {
-    let raw
-    try {
-      raw = await fs.readFile(mdFile, 'utf-8')
-    } catch (e) {
-      console.warn(`[carte-o] Skip unreadable ${mdFile}`)
-      continue
-    }
-
-    const relPath = path.relative(ARTICLES_ROOT, mdFile).replace(/\\/g, '/')
-    const segments = relPath.split('/')
-    const baseName = path.basename(mdFile, '.md')
-
-    // Theme = first or second segment depending on structure.
-    // E.g. "AEP ARTICLES, BROUILLON/AEP IA/file.md" -> theme = "AEP IA"
-    //      "AEP ARTICLES, BROUILLON/file.md" -> theme = "AEP ARTICLES, BROUILLON"
-    //      "Livre - le nouveau contrat social/file.md" -> theme = "Livre"
-    let theme = segments[0]
-    if (segments.length >= 3 && segments[0].startsWith('AEP ARTICLES')) {
-      theme = segments[1]
-    }
-
-    const { data: fm, content } = safeParseFrontmatter(raw)
-    const title = fm.titre || fm.title || baseName.replace(/^!\s*/, '').trim()
-    const slug = slugify(title)
-    const family = inferFamily({
-      title,
-      theme,
-      path: relPath,
-      tags: fm.tags,
-      content,
-    })
-    const intention = fm.intention || extractFirstParagraph(content)
-
-    nodes.push({
-      id: slug,
-      label: title,
-      family,
-      intention,
-      slug,
-      theme,
-      path: relPath,
-    })
-
-    themeStats[theme] = (themeStats[theme] || 0) + 1
-
-    // Collect wikilinks.
-    const wikilinks = extractWikilinks(content)
-    for (const target of wikilinks) {
-      edgesRaw.push({ source: slug, targetLabel: target })
-    }
-  }
-
-  // Deduplicate nodes by id (collisions on same slug).
-  const nodeById = new Map()
-  for (const n of nodes) {
-    if (!nodeById.has(n.id)) {
-      nodeById.set(n.id, n)
-    }
-  }
-  const dedupNodes = [...nodeById.values()]
-
-  // Resolve edges : match targetLabel against node label or id.
-  const labelToId = new Map()
-  for (const n of dedupNodes) {
-    labelToId.set(slugify(n.label), n.id)
-    labelToId.set(n.label.toLowerCase(), n.id)
-  }
-
-  const edgesResolved = []
+  const edges = []
   const edgeSet = new Set()
-  for (const e of edgesRaw) {
-    const candidates = [
-      slugify(e.targetLabel),
-      e.targetLabel.toLowerCase(),
-    ]
-    let targetId = null
-    for (const c of candidates) {
-      if (labelToId.has(c)) {
-        targetId = labelToId.get(c)
-        break
-      }
-    }
-    if (!targetId || targetId === e.source) continue
-    const key = e.source < targetId ? `${e.source}→${targetId}` : `${targetId}→${e.source}`
-    if (edgeSet.has(key)) continue
+
+  function addEdge(source, target) {
+    const key = source < target ? `${source}|${target}` : `${target}|${source}`
+    if (edgeSet.has(key)) return
     edgeSet.add(key)
-    edgesResolved.push({ source: e.source, target: targetId })
+    edges.push({ source, target })
   }
 
-  // Compute degree for each node.
-  const degree = new Map()
-  for (const e of edgesResolved) {
-    degree.set(e.source, (degree.get(e.source) || 0) + 1)
-    degree.set(e.target, (degree.get(e.target) || 0) + 1)
+  function addNode(obj) {
+    nodes.push({
+      id: obj.id,
+      label: obj.label,
+      niveau: obj.niveau,
+      nature: obj.nature,
+      statut: obj.statut,
+      resume: obj.resume || null,
+      radius: getRadius(obj.niveau, obj.nature),
+      family: getFamily(obj.nature),
+    })
   }
 
-  // V1 cap : if > NODE_CAP_V1 nodes, keep top N by degree.
-  let finalNodes = dedupNodes
-  if (dedupNodes.length > NODE_CAP_V1) {
-    finalNodes = [...dedupNodes]
-      .sort((a, b) => (degree.get(b.id) || 0) - (degree.get(a.id) || 0))
-      .slice(0, NODE_CAP_V1)
-    console.log(`[carte-o] Capped from ${dedupNodes.length} to ${NODE_CAP_V1} nodes (top by degree)`)
+  const centreId = data.centre.id
+  addNode(data.centre)
+
+  for (const cf of data.concepts_force) {
+    addNode(cf)
+    addEdge(centreId, cf.id)
   }
 
-  const finalNodeIds = new Set(finalNodes.map(n => n.id))
-  const finalEdges = edgesResolved.filter(e => finalNodeIds.has(e.source) && finalNodeIds.has(e.target))
-
-  // Family distribution stats.
-  const familyDist = {}
-  for (const n of finalNodes) {
-    familyDist[n.family] = (familyDist[n.family] || 0) + 1
+  for (const th of data.thematiques) {
+    addNode(th)
+    if (NCS_THEMATIQUES.has(th.id)) {
+      addEdge('ncs-politique', th.id)
+    } else if (MDCS_THEMATIQUES.has(th.id)) {
+      addEdge('medecine-corps-social', th.id)
+    } else if (CENTRE_THEMATIQUES.has(th.id)) {
+      addEdge(centreId, th.id)
+    }
+  }
+
+  for (const proj of data.projets) {
+    addNode(proj)
+    for (const thId of (proj.liens_thematiques || [])) {
+      addEdge(proj.id, thId)
+    }
   }
 
-  // Ensure output dir exists.
   await fs.mkdir(path.dirname(OUTPUT), { recursive: true })
   await fs.writeFile(
     OUTPUT,
     JSON.stringify({
-      meta: {
-        generated: new Date().toISOString(),
-        source: 'AEP/Articles',
-        nodeCount: finalNodes.length,
-        edgeCount: finalEdges.length,
-        familyDistribution: familyDist,
-        familyColors: FAMILY_COLORS,
-        themeStats,
-      },
-      nodes: finalNodes,
-      edges: finalEdges,
+      version: data.version,
+      generatedAt: new Date().toISOString(),
+      nodes,
+      edges,
     }, null, 2),
     'utf-8',
   )
 
-  console.log(`[carte-o] OK : ${finalNodes.length} nodes / ${finalEdges.length} edges`)
-  console.log(`[carte-o] Families :`, familyDist)
-  console.log(`[carte-o] Output : ${OUTPUT}`)
+  console.log(`[carte-o] OK : ${nodes.length} nodes / ${edges.length} edges -> ${OUTPUT}`)
 }
 
 main().catch(err => {
   console.error('[carte-o] FAIL', err)
   process.exit(1)
 })
+
+// V1 scrape vault - reactiver en V1.2 pour enrichissement automatique
+// Source : scripts/build-carte-o.js@be7fc09 (scrape AEP/Articles globby + gray-matter + wikilinks edges)

src/components/astro/ColJournal.astro

@@ -1,56 +1,102 @@
 ---
-// ColJournal - colonne gauche : CTA Manifeste + Hashtags accordeon + Journal (PC6)
-// 7 hashtags = 7 plateformes (cf delta 15 du PILOTE-PC.md)
 import JournalList from '../vue/JournalList.vue';
 
-const hashtags = [
-  { tag: '#manifeste',       plateforme: 'Blog trans-former.fr',   canal: 'ecriture longue' },
-  { tag: '#building-public', plateforme: 'LinkedIn',               canal: 'journal pro' },
-  { tag: '#politique',       plateforme: 'Substack',               canal: 'pensee AEP' },
-  { tag: '#aep-politique',   plateforme: 'Insta @aep.politique',   canal: 'carrousels manifeste' },
-  { tag: '#peinture',        plateforme: 'Insta @julesneny',       canal: 'art / poesie / Corse' },
-  { tag: '#podcast',         plateforme: 'Castopod',               canal: 'podcast.trans-former.fr' },
-  { tag: '#stack',           plateforme: 'GitHub',                 canal: 'open source' },
+const categories = [
+  {
+    id: 'politique',
+    label: 'Politique',
+    color: '#1d4ed8',
+    hashtags: ['#politique', '#aep-politique'],
+    plateformes: [
+      { id: 'instagram', label: '@aep.politique', url: 'https://www.instagram.com/aep.politique/' },
+      { id: 'castopod', label: 'Podcast', url: 'https://podcast.trans-former.fr' },
+      { id: 'substack', label: 'Substack', url: 'https://julesneny.substack.com' },
+    ],
+    hasSelector: true,
+  },
+  {
+    id: 'art',
+    label: 'Art',
+    color: '#dc2626',
+    hashtags: ['#peinture', '#art'],
+    plateformes: [
+      { id: 'instagram', label: '@julesneny', url: 'https://www.instagram.com/julesneny/' },
+    ],
+    hasSelector: false,
+  },
+  {
+    id: 'outils',
+    label: 'Outils',
+    color: '#16a34a',
+    hashtags: ['#stack', '#building-public'],
+    plateformes: [
+      { id: 'gitea', label: 'Gitea', url: 'https://git.trans-former.fr/jules' },
+    ],
+    hasSelector: false,
+  },
 ];
 ---
 <div class="h-full flex flex-col p-4 pt-20 md:pt-6 gap-5">
-  <!-- CTA Manifeste -->
-  <a
-    href="/manifeste"
-    class="block px-4 py-3 bg-neutral-900 text-white rounded-lg font-medium text-center hover:bg-neutral-700 transition-colors shadow-sm"
-  >
-    Lire le manifeste &rarr;
-  </a>
 
   <!-- Hashtags accordeon -->
   <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">7 plateformes</span>
+      <span class="text-xs text-neutral-400 font-normal">3 categories</span>
     </summary>
-    <ul class="mt-3 space-y-2 text-sm">
-      {hashtags.map(({ tag, plateforme, canal }) => (
-        <li>
-          <label class="flex items-start gap-2 cursor-pointer hover:bg-neutral-50 rounded p-1 -m-1 transition-colors">
-            <input
-              type="checkbox"
-              data-hashtag={tag}
-              class="mt-1 accent-neutral-900"
-              checked
-            />
-            <span class="flex-1">
-              <span class="font-mono text-neutral-700 text-[13px]">{tag}</span>
-              <span class="block text-xs text-neutral-500 leading-snug">
-                {plateforme} ; {canal}
-              </span>
-            </span>
-          </label>
-        </li>
+
+    <div class="mt-3 flex flex-wrap gap-2" id="category-badges">
+      {categories.map((cat) => (
+        <button
+          type="button"
+          data-category-id={cat.id}
+          data-hashtags={cat.hashtags.join(',')}
+          data-color={cat.color}
+          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};`}
+        >
+          {cat.label}
+        </button>
       ))}
-    </ul>
+    </div>
+
+    <!-- Selecteur plateforme Politique -->
+    <div id="politique-selector" class="mt-2 hidden flex gap-2">
+      {categories[0].plateformes.map((p) => (
+        <button
+          type="button"
+          data-platform-id={p.id}
+          class="platform-pill"
+          style="font-family:'Courier New',Courier,monospace;font-size:12px;padding:2px 8px;border-radius:12px;cursor:pointer;border:1px solid #1d4ed8;background:transparent;color:#1d4ed8;"
+        >
+          {p.label}
+        </button>
+      ))}
+    </div>
+
+    <!-- Bouton Replier -->
+    <div class="mt-3 flex justify-end">
+      <button
+        type="button"
+        id="accordion-close"
+        class="text-xs text-neutral-400 underline cursor-pointer bg-transparent border-0 p-0"
+      >
+        replier
+      </button>
+    </div>
+
+    <!-- Bouton Manifeste -->
+    <a
+      href="/manifeste"
+      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;"
+    >
+      Manifeste - Lire
+    </a>
   </details>
 
-  <!-- Journal chrono (skeleton, slot rempli par PC6) -->
+  <!-- Journal chrono -->
   <section class="border-t border-neutral-200 pt-4 flex-1 overflow-y-auto">
     <h2 class="font-semibold mb-3 flex items-center justify-between">
       <span>Journal</span>
@@ -63,41 +109,170 @@ const hashtags = [
 </div>
 
 <script>
-  // Hashtags accordeon : ferme par defaut mobile, ouvert desktop (>= 768px)
   const accordion = document.getElementById('hashtags-accordion') as HTMLDetailsElement | null;
   if (accordion) {
     const mql = window.matchMedia('(min-width: 768px)');
-    const apply = () => {
-      accordion.open = mql.matches;
-    };
+    const apply = () => { accordion.open = mql.matches; };
     apply();
     mql.addEventListener('change', apply);
   }
 
-  // Persistence filtres hashtags (localStorage)
-  const checkboxes = document.querySelectorAll<HTMLInputElement>('[data-hashtag]');
-  const STORAGE_KEY = 'tf-hashtag-filters';
-  let stored: Record<string, boolean> = {};
-  try {
-    stored = JSON.parse(localStorage.getItem(STORAGE_KEY) || '{}');
-  } catch {
-    stored = {};
+  const closeBtn = document.getElementById('accordion-close');
+  if (closeBtn && accordion) {
+    closeBtn.addEventListener('click', () => { accordion.open = false; });
   }
 
-  checkboxes.forEach((cb) => {
-    const tag = cb.dataset.hashtag;
-    if (!tag) return;
-    if (tag in stored) cb.checked = stored[tag];
-    cb.addEventListener('change', () => {
-      stored[tag] = cb.checked;
-      try {
-        localStorage.setItem(STORAGE_KEY, JSON.stringify(stored));
-      } catch {
-        // mode prive : on continue silencieusement
+  const STORAGE_KEY = 'tf-hashtag-filters';
+  const PLATFORM_KEY = 'tf-platform-filter';
+
+  // Active state : map categoryId -> boolean
+  const activeCategories: Record<string, boolean> = { politique: true, art: true, outils: true };
+
+  // Platform filter : map categoryId -> platformId | null
+  const platformFilters: Record<string, string | null> = { politique: null };
+
+  // Load persisted state
+  try {
+    const storedHashtags = JSON.parse(localStorage.getItem(STORAGE_KEY) || '{}') as Record<string, boolean>;
+    // Derive category active state from hashtag values
+    const politiqueHashtags = ['#politique', '#aep-politique'];
+    const artHashtags = ['#peinture', '#art'];
+    const outilsHashtags = ['#stack', '#building-public'];
+
+    const allPolitique = politiqueHashtags.every(h => storedHashtags[h] !== false);
+    const allArt = artHashtags.every(h => storedHashtags[h] !== false);
+    const allOutils = outilsHashtags.every(h => storedHashtags[h] !== false);
+
+    if (Object.keys(storedHashtags).length > 0) {
+      activeCategories['politique'] = allPolitique;
+      activeCategories['art'] = allArt;
+      activeCategories['outils'] = allOutils;
+    }
+  } catch { /* mode prive */ }
+
+  try {
+    const storedPlatform = JSON.parse(localStorage.getItem(PLATFORM_KEY) || '{}') as Record<string, string | null>;
+    if (storedPlatform.politique !== undefined) {
+      platformFilters['politique'] = storedPlatform.politique;
+    }
+  } catch { /* mode prive */ }
+
+  const buildHashtagPayload = () => {
+    const hashtags: Record<string, boolean> = {};
+    const catHashtags: Record<string, string[]> = {
+      politique: ['#politique', '#aep-politique'],
+      art: ['#peinture', '#art'],
+      outils: ['#stack', '#building-public'],
+    };
+    for (const [catId, tags] of Object.entries(catHashtags)) {
+      const active = activeCategories[catId] ?? true;
+      for (const tag of tags) {
+        hashtags[tag] = active;
       }
-      window.dispatchEvent(
-        new CustomEvent('hashtag-filter-change', { detail: { ...stored } })
-      );
+    }
+    return hashtags;
+  };
+
+  const persist = () => {
+    try {
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(buildHashtagPayload()));
+      localStorage.setItem(PLATFORM_KEY, JSON.stringify(platformFilters));
+    } catch { /* mode prive */ }
+  };
+
+  const dispatchHashtag = () => {
+    window.dispatchEvent(new CustomEvent('hashtag-filter-change', { detail: buildHashtagPayload() }));
+  };
+
+  const dispatchPlatform = (platform: string | null) => {
+    window.dispatchEvent(new CustomEvent('platform-filter-change', { detail: { platform } }));
+  };
+
+  const updateBadgeStyle = (btn: HTMLElement, active: boolean) => {
+    const color = btn.dataset.color || '#000';
+    if (active) {
+      btn.style.background = color;
+      btn.style.color = '#fff';
+      btn.style.border = `1px solid ${color}`;
+    } else {
+      btn.style.background = 'transparent';
+      btn.style.color = color;
+      btn.style.border = `1px solid ${color}`;
+    }
+  };
+
+  const updatePolitiqueSelector = () => {
+    const selector = document.getElementById('politique-selector');
+    if (!selector) return;
+    if (activeCategories['politique']) {
+      selector.classList.remove('hidden');
+      selector.style.display = 'flex';
+    } else {
+      selector.classList.add('hidden');
+      selector.style.display = 'none';
+    }
+  };
+
+  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 = '#1d4ed8';
+        pill.style.color = '#fff';
+      } else {
+        pill.style.background = 'transparent';
+        pill.style.color = '#1d4ed8';
+      }
+    });
+  };
+
+  // Init badge styles
+  const badges = document.querySelectorAll<HTMLElement>('.category-badge');
+  badges.forEach((btn) => {
+    const catId = btn.dataset.categoryId || '';
+    updateBadgeStyle(btn, activeCategories[catId] ?? true);
+
+    btn.addEventListener('click', () => {
+      activeCategories[catId] = !(activeCategories[catId] ?? true);
+      updateBadgeStyle(btn, activeCategories[catId]);
+      updatePolitiqueSelector();
+      if (!activeCategories['politique']) {
+        platformFilters['politique'] = null;
+        updatePillStyles();
+        dispatchPlatform(null);
+      }
+      persist();
+      dispatchHashtag();
     });
   });
+
+  // Init selector
+  updatePolitiqueSelector();
+  updatePillStyles();
+
+  // Platform pills
+  const pills = document.querySelectorAll<HTMLElement>('.platform-pill');
+  pills.forEach((pill) => {
+    pill.addEventListener('click', () => {
+      const pid = pill.dataset.platformId || null;
+      // Toggle : click on active pill deselects it
+      if (platformFilters['politique'] === pid) {
+        platformFilters['politique'] = null;
+      } else {
+        platformFilters['politique'] = pid;
+      }
+      updatePillStyles();
+      persist();
+      dispatchPlatform(platformFilters['politique']);
+    });
+  });
+
+  // Apply persisted filters on init
+  persist();
+  dispatchHashtag();
+  if (platformFilters['politique']) {
+    dispatchPlatform(platformFilters['politique']);
+  }
 </script>

src/components/astro/Footer.astro

@@ -0,0 +1,70 @@
+---
+// Footer.astro - CTA infolettre Kit + nav footer
+---
+<footer class="border-t border-neutral-200 px-6 py-8 text-sm bg-white">
+  <div class="max-w-3xl mx-auto">
+    <h3 class="font-semibold mb-1" style="font-family: 'Courier New', Courier, monospace;">
+      S'abonner a la lettre
+    </h3>
+    <p class="text-neutral-600 text-xs mb-3">
+      1-2 emails par mois - pas de spam - desinscription en 1 clic.
+    </p>
+    <form id="subscribe-form" class="flex gap-2 max-w-md">
+      <input
+        type="email"
+        name="email"
+        required
+        placeholder="ton@email.fr"
+        class="flex-1 px-3 py-2 border border-neutral-300 rounded-lg text-sm focus:outline-none focus:border-neutral-900"
+      />
+      <button
+        type="submit"
+        class="px-4 py-2 bg-neutral-900 text-white rounded-lg text-sm hover:bg-neutral-700 transition-colors"
+      >
+        s'abonner
+      </button>
+    </form>
+    <p id="subscribe-msg" class="mt-2 text-xs text-neutral-500 min-h-[1rem]"></p>
+    <nav class="mt-6 flex flex-wrap gap-4 text-xs text-neutral-500">
+      <a href="/manifeste" class="hover:text-neutral-900">Manifeste</a>
+      <a href="/a-propos" class="hover:text-neutral-900">A propos</a>
+      <a href="/mentions-legales" class="hover:text-neutral-900">Mentions legales</a>
+      <a href="https://www.instagram.com/aep.politique/" target="_blank" rel="noopener" class="hover:text-neutral-900">@aep.politique</a>
+    </nav>
+  </div>
+</footer>
+
+<script>
+  const form = document.getElementById('subscribe-form') as HTMLFormElement | null;
+  const msg = document.getElementById('subscribe-msg') as HTMLParagraphElement | null;
+
+  form?.addEventListener('submit', async (e) => {
+    e.preventDefault();
+    if (!msg || !form) return;
+
+    const emailInput = form.elements.namedItem('email') as HTMLInputElement;
+    const email = emailInput?.value?.trim() ?? '';
+    if (!email) return;
+
+    msg.textContent = 'envoi...';
+
+    try {
+      const r = await fetch('/api/subscribe', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email }),
+      });
+      const data = await r.json();
+      if (data.ok) {
+        msg.textContent = data.already
+          ? 'tu es deja abonne - a tres vite.'
+          : 'merci ! check ta boite mail (parfois spam).';
+        form.reset();
+      } else {
+        msg.textContent = `souci : ${data.error || 'reessaie plus tard'}`;
+      }
+    } catch {
+      msg.textContent = 'erreur reseau - reessaie plus tard';
+    }
+  });
+</script>

src/components/vue/JournalList.vue

@@ -20,6 +20,7 @@ interface JournalPayload {
 
 const items = ref<JournalItem[]>([])
 const filters = ref<Record<string, boolean>>({})
+const platformFilter = ref<string | null>(null)
 const loading = ref(true)
 const errored = ref(false)
 const empty = ref(false)
@@ -45,9 +46,15 @@ const onFilterChange = (e: Event) => {
   }
 }
 
+const onPlatformChange = (e: Event) => {
+  const ce = e as CustomEvent
+  platformFilter.value = ce.detail?.platform ?? null
+}
+
 onMounted(async () => {
   loadFilters()
   window.addEventListener('hashtag-filter-change', onFilterChange as EventListener)
+  window.addEventListener('platform-filter-change', onPlatformChange as EventListener)
   try {
     const res = await fetch(JOURNAL_URL, { cache: 'no-store' })
     if (!res.ok) {
@@ -67,17 +74,28 @@ onMounted(async () => {
 
 onUnmounted(() => {
   window.removeEventListener('hashtag-filter-change', onFilterChange as EventListener)
+  window.removeEventListener('platform-filter-change', onPlatformChange as EventListener)
 })
 
 const visibleItems = computed(() => {
-  // Tous les filtres faux = aucun affiche ; tous true ou aucune cle = tout afficher
   const keys = Object.keys(filters.value)
-  if (keys.length === 0) return items.value
-  const activeKeys = keys.filter((k) => filters.value[k])
-  // Si l'utilisateur a explicitement décoché tous les hashtags, on n'affiche rien
-  if (activeKeys.length === 0 && keys.some((k) => filters.value[k] === false)) return []
-  if (activeKeys.length === 0) return items.value
-  return items.value.filter((it) => activeKeys.includes(it.hashtag))
+  let filtered: JournalItem[]
+  if (keys.length === 0) {
+    filtered = items.value
+  } else {
+    const activeKeys = keys.filter((k) => filters.value[k])
+    if (activeKeys.length === 0 && keys.some((k) => filters.value[k] === false)) {
+      filtered = []
+    } else if (activeKeys.length === 0) {
+      filtered = items.value
+    } else {
+      filtered = items.value.filter((it) => activeKeys.includes(it.hashtag))
+    }
+  }
+  if (platformFilter.value) {
+    filtered = filtered.filter((it) => it.platform === platformFilter.value)
+  }
+  return filtered
 })
 
 const formatDate = (iso: string) => {

src/layouts/BaseLayout.astro

@@ -1,5 +1,6 @@
 ---
 import '../styles/global.css';
+import Footer from '../components/astro/Footer.astro';
 
 interface Props {
   title?: string;
@@ -29,5 +30,6 @@ const {
   </head>
   <body class="m-0 bg-white text-neutral-900 antialiased">
     <slot />
+    <Footer />
   </body>
 </html>

src/pages/api/subscribe.ts

@@ -0,0 +1,71 @@
+import type { APIRoute } from 'astro'
+
+export const prerender = false
+
+const KIT_API_BASE = 'https://api.kit.com/v4'
+
+export const POST: APIRoute = async ({ request }) => {
+  const KIT_API_KEY = import.meta.env.KIT_API_SECRET_V4
+  if (!KIT_API_KEY) {
+    return new Response(JSON.stringify({ error: 'config_missing' }), {
+      status: 500,
+      headers: { 'Content-Type': 'application/json' },
+    })
+  }
+
+  let body: { email: string; first_name?: string }
+  try {
+    body = await request.json()
+  } catch {
+    return new Response(JSON.stringify({ error: 'invalid_json' }), {
+      status: 400,
+      headers: { 'Content-Type': 'application/json' },
+    })
+  }
+
+  const email = (body.email || '').trim().toLowerCase()
+  if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+    return new Response(JSON.stringify({ error: 'invalid_email' }), {
+      status: 400,
+      headers: { 'Content-Type': 'application/json' },
+    })
+  }
+
+  try {
+    const upstream = await fetch(`${KIT_API_BASE}/subscribers`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'X-Kit-Api-Key': KIT_API_KEY,
+      },
+      body: JSON.stringify({
+        email_address: email,
+        first_name: body.first_name || undefined,
+        state: 'active',
+      }),
+      signal: AbortSignal.timeout(10000),
+    })
+
+    if (upstream.ok) {
+      return new Response(JSON.stringify({ ok: true }), {
+        status: 200,
+        headers: { 'Content-Type': 'application/json' },
+      })
+    }
+    if (upstream.status === 422) {
+      return new Response(JSON.stringify({ ok: true, already: true }), {
+        status: 200,
+        headers: { 'Content-Type': 'application/json' },
+      })
+    }
+    return new Response(
+      JSON.stringify({ error: 'kit_failed', status: upstream.status }),
+      { status: 502, headers: { 'Content-Type': 'application/json' } }
+    )
+  } catch (e) {
+    return new Response(
+      JSON.stringify({ error: 'upstream_failed', detail: (e as Error).message }),
+      { status: 502, headers: { 'Content-Type': 'application/json' } }
+    )
+  }
+}