From c860dabdc0406d5643a0a80732bea74fe436c443 Mon Sep 17 00:00:00 2001
From: Jules Neny <transformationsresilientes@gmail.com>
Date: Tue, 23 Jun 2026 12:13:33 +0200
Subject: [PATCH] =?UTF-8?q?feat(proposer):=20interface=205=20onglets=20+?=
 =?UTF-8?q?=20soumission=20R=C3=A9f=C3=A9rences=20vers=20NocoDB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Page /proposer avec 5 onglets (Écosystème/Réseau/Jobs/Outils/Références RAG)
- 5 form components + form-styles.css partagé
- Submit multi-type avec submission_type vers NocoDB
- Server route references.post.ts réécrite pour NocoDB (table ressources_references)
- redirect 301 /contribuer → /proposer
- Suppression references-pending.json
---
 app.vue                             |  12 +-
 components/FormEcosysteme.vue       | 184 +++++++
 components/FormJobs.vue             | 134 +++++
 components/FormOutils.vue           | 134 +++++
 components/FormReferences.vue       | 142 +++++
 components/FormReseau.vue           | 158 ++++++
 components/form-styles.css          | 240 +++++++++
 nuxt.config.ts                      |   1 +
 pages/contribuer.vue                | 792 +---------------------------
 pages/proposer.vue                  | 194 +++++++
 server/api/submit/index.post.ts     | 105 ++--
 server/api/submit/reference.post.ts |  74 +++
 12 files changed, 1322 insertions(+), 848 deletions(-)
 create mode 100644 components/FormEcosysteme.vue
 create mode 100644 components/FormJobs.vue
 create mode 100644 components/FormOutils.vue
 create mode 100644 components/FormReferences.vue
 create mode 100644 components/FormReseau.vue
 create mode 100644 components/form-styles.css
 create mode 100644 pages/proposer.vue
 create mode 100644 server/api/submit/reference.post.ts

diff --git a/app.vue b/app.vue
index 797a879..efa568e 100644
--- a/app.vue
+++ b/app.vue
@@ -114,9 +114,9 @@
         >
           Signaler
         </NuxtLink>
-        <!-- Proposer une ressource -->
+        <!-- Proposer une ressource (5 onglets) -->
         <NuxtLink
-          to="/contribuer"
+          to="/proposer"
           class="px-3 py-1.5 rounded-lg text-sm font-semibold transition-all hover:opacity-80 hidden sm:inline-flex items-center gap-1"
           style="background: var(--nav-accent); color: var(--nav-text);"
         >
@@ -143,13 +143,13 @@
           </svg>
         </button>
 
-        <!-- Mobile : contribuer icône -->
+        <!-- Mobile : proposer icône -->
         <NuxtLink
-          to="/contribuer"
+          to="/proposer"
           class="sm:hidden p-2 rounded-lg"
           style="background: var(--nav-accent); color: var(--nav-text);"
-          title="Contribuer une fiche"
-          aria-label="Contribuer"
+          title="Proposer une ressource"
+          aria-label="Proposer"
         >
           <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
             <line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
diff --git a/components/FormEcosysteme.vue b/components/FormEcosysteme.vue
new file mode 100644
index 0000000..1882424
--- /dev/null
+++ b/components/FormEcosysteme.vue
@@ -0,0 +1,184 @@
+<template>
+  <form @submit.prevent="submit" class="proposer-form" novalidate>
+    <div class="field-group" :class="{ 'field-error': errors.nom }">
+      <label for="eco-nom">Nom de l'organisation <span class="required">*</span></label>
+      <input id="eco-nom" v-model="form.nom" type="text" placeholder="Ex : UNSFA, Maison de l'Architecture..." autocomplete="organization" @blur="validateField('nom')" />
+      <span v-if="errors.nom" class="error-msg" role="alert">{{ errors.nom }}</span>
+    </div>
+
+    <div class="field-group" :class="{ 'field-error': errors.url }">
+      <label for="eco-url">Site web <span class="label-hint">(optionnel — recommandé pour l'enrichissement IA)</span></label>
+      <input id="eco-url" v-model="form.url" type="url" placeholder="https://..." @blur="validateField('url')" />
+      <span v-if="errors.url" class="error-msg" role="alert">{{ errors.url }}</span>
+    </div>
+
+    <div class="field-group" :class="{ 'field-error': errors.description_user }">
+      <label for="eco-desc">Description courte <span class="required">*</span> <span class="label-hint">(50 à 500 caractères)</span></label>
+      <textarea id="eco-desc" v-model="form.description_user" rows="4" placeholder="Présente l'organisation en quelques mots : ses missions, son public, ce qu'elle apporte..." @blur="validateField('description_user')" />
+      <div class="field-meta">
+        <span v-if="errors.description_user" class="error-msg" role="alert">{{ errors.description_user }}</span>
+        <span v-else class="char-count" :class="{ 'char-warn': form.description_user.length > 450 }">{{ form.description_user.length }}/500</span>
+      </div>
+    </div>
+
+    <div class="field-group" :class="{ 'field-error': errors.echelle }">
+      <fieldset>
+        <legend>Échelle <span class="required">*</span> <span class="label-hint">(une seule)</span></legend>
+        <div class="radio-group">
+          <label v-for="opt in ECHELLES" :key="opt" class="radio-label" :class="{ active: form.echelle === opt }">
+            <input type="radio" :value="opt" v-model="form.echelle" name="eco-echelle" @change="validateField('echelle')" />{{ opt }}
+          </label>
+        </div>
+      </fieldset>
+      <span v-if="errors.echelle" class="error-msg" role="alert">{{ errors.echelle }}</span>
+    </div>
+
+    <div class="field-group" :class="{ 'field-error': errors.fonctions }">
+      <fieldset>
+        <legend>Fonctions <span class="required">*</span> <span class="label-hint">(1 à 5 — l'ordre de clic = priorité)</span></legend>
+        <div class="checkbox-grid">
+          <label v-for="fn in FONCTIONS" :key="fn" class="checkbox-label" :class="{ active: form.fonctions.includes(fn), disabled: !form.fonctions.includes(fn) && form.fonctions.length >= 5 }">
+            <input type="checkbox" :value="fn" :checked="form.fonctions.includes(fn)" :disabled="!form.fonctions.includes(fn) && form.fonctions.length >= 5" @change="toggleFonction(fn)" />
+            <span class="fn-order" v-if="form.fonctions.includes(fn)">{{ form.fonctions.indexOf(fn) + 1 }}</span>{{ fn }}
+          </label>
+        </div>
+      </fieldset>
+      <span v-if="errors.fonctions" class="error-msg" role="alert">{{ errors.fonctions }}</span>
+    </div>
+
+    <div class="field-group" :class="{ 'field-error': errors.territoire }">
+      <fieldset>
+        <legend>Territoire <span class="required">*</span></legend>
+        <div class="radio-group">
+          <label v-for="t in TERRITOIRES" :key="t" class="radio-label" :class="{ active: form.territoire === t }">
+            <input type="radio" :value="t" v-model="form.territoire" name="eco-territoire" @change="validateField('territoire')" />{{ t }}
+          </label>
+        </div>
+      </fieldset>
+      <span v-if="errors.territoire" class="error-msg" role="alert">{{ errors.territoire }}</span>
+    </div>
+
+    <div class="field-group" :class="{ 'field-error': errors.localisation_ville }">
+      <label for="eco-ville">Ville principale <span class="label-hint">(optionnel — pour la géolocalisation sur la carte)</span></label>
+      <input id="eco-ville" v-model="form.localisation_ville" type="text" placeholder="Ex : Paris, Lyon, Bordeaux..." />
+      <span v-if="errors.localisation_ville" class="error-msg" role="alert">{{ errors.localisation_ville }}</span>
+    </div>
+
+    <div class="field-group" :class="{ 'field-error': errors.submitted_by_email }">
+      <label for="eco-email">Ton email <span class="label-hint">(optionnel — pour le suivi de modération)</span></label>
+      <input id="eco-email" v-model="form.submitted_by_email" type="email" placeholder="ton@email.fr" autocomplete="email" @blur="validateField('submitted_by_email')" />
+      <span v-if="errors.submitted_by_email" class="error-msg" role="alert">{{ errors.submitted_by_email }}</span>
+    </div>
+
+    <div v-if="serverError" class="server-error" role="alert"><strong>Erreur :</strong> {{ serverError }}</div>
+
+    <div class="form-actions">
+      <button type="submit" class="btn-primary" :disabled="submitting">{{ submitting ? 'Envoi en cours...' : 'Proposer la fiche →' }}</button>
+    </div>
+    <p class="form-note">Ta fiche sera examinée par l'équipe avant publication.</p>
+  </form>
+</template>
+
+<script setup lang="ts">
+import { z } from 'zod'
+
+const ECHELLES = ['National', 'Régional', 'Local'] as const
+const TERRITOIRES = ['Métropole', 'Guadeloupe', 'Martinique', 'Guyane', 'La Réunion', 'Mayotte'] as const
+const FONCTIONS = ['Juridique', 'Technique', 'Économique', 'Administratif', 'Chantier', 'Comptabilité', 'Développement', 'Formation', 'Gestion d\'agence', 'Santé mentale'] as const
+
+const Schema = z.object({
+  nom: z.string().min(3, 'Minimum 3 caractères').max(150, 'Maximum 150 caractères').trim(),
+  url: z.string().url('URL invalide (commencer par https://)').optional().or(z.literal('')),
+  description_user: z.string().min(50, 'Minimum 50 caractères').max(500, 'Maximum 500 caractères').trim(),
+  echelle: z.enum(ECHELLES, { errorMap: () => ({ message: 'Sélectionne une échelle' }) }),
+  fonctions: z.array(z.string()).min(1, 'Sélectionne au moins une fonction').max(5, 'Maximum 5 fonctions'),
+  territoire: z.enum(TERRITOIRES, { errorMap: () => ({ message: 'Sélectionne un territoire' }) }),
+  localisation_ville: z.string().max(100).optional(),
+  submitted_by_email: z.string().email('Email invalide').optional().or(z.literal('')),
+})
+
+const emit = defineEmits<{ success: [] }>()
+
+const form = reactive({
+  nom: '', url: '', description_user: '', echelle: '' as string,
+  fonctions: [] as string[], territoire: '' as string,
+  localisation_ville: '', submitted_by_email: '',
+})
+const errors = reactive<Record<string, string>>({})
+const submitting = ref(false)
+const serverError = ref('')
+
+function validateField(field: string) {
+  const partial = Schema.partial()
+  const result = partial.safeParse({ [field]: (form as any)[field] })
+  if (!result.success) {
+    const fieldErrors = result.error.flatten().fieldErrors
+    errors[field] = fieldErrors[field]?.[0] ?? ''
+  } else {
+    delete errors[field]
+  }
+}
+
+function validateAll(): boolean {
+  const result = Schema.safeParse(form)
+  if (!result.success) {
+    const flat = result.error.flatten().fieldErrors
+    Object.assign(errors, Object.fromEntries(Object.entries(flat).map(([k, v]) => [k, v?.[0] ?? ''])))
+    return false
+  }
+  Object.keys(errors).forEach(k => delete errors[k])
+  return true
+}
+
+function toggleFonction(fn: string) {
+  const idx = form.fonctions.indexOf(fn)
+  if (idx >= 0) form.fonctions.splice(idx, 1)
+  else if (form.fonctions.length < 5) form.fonctions.push(fn)
+  validateField('fonctions')
+}
+
+async function submit() {
+  serverError.value = ''
+  if (!validateAll()) {
+    await nextTick()
+    const firstError = document.querySelector('.field-error')
+    firstError?.scrollIntoView({ behavior: 'smooth', block: 'center' })
+    return
+  }
+  submitting.value = true
+  try {
+    await $fetch('/api/submit', {
+      method: 'POST',
+      body: {
+        submission_type: 'ecosysteme',
+        nom: form.nom,
+        url: form.url || undefined,
+        description_user: form.description_user,
+        echelle: form.echelle,
+        fonctions: form.fonctions,
+        territoire: form.territoire,
+        localisation_ville: form.localisation_ville || undefined,
+        submitted_by_email: form.submitted_by_email || undefined,
+      },
+    })
+    emit('success')
+  } catch (e: any) {
+    const status = e?.status ?? e?.statusCode
+    if (status === 429) {
+      serverError.value = 'Tu as déjà soumis 3 fiches aujourd\'hui. Réessaie demain.'
+    } else if (status === 422 && e?.data) {
+      const fieldErrors = e.data
+      Object.entries(fieldErrors).forEach(([k, v]) => { errors[k] = Array.isArray(v) ? v[0] : String(v) })
+      serverError.value = 'Certains champs sont invalides — vérifie les erreurs ci-dessus.'
+    } else {
+      serverError.value = 'Une erreur s\'est produite. Réessaie dans quelques instants.'
+    }
+  } finally {
+    submitting.value = false
+  }
+}
+</script>
+
+<style scoped>
+@import './form-styles.css';
+</style>
diff --git a/components/FormJobs.vue b/components/FormJobs.vue
new file mode 100644
index 0000000..6f30683
--- /dev/null
+++ b/components/FormJobs.vue
@@ -0,0 +1,134 @@
+<template>
+  <form @submit.prevent="submit" class="proposer-form" novalidate>
+    <div class="field-group" :class="{ 'field-error': errors.nom }">
+      <label for="job-nom">Nom de la plateforme / job board <span class="required">*</span></label>
+      <input id="job-nom" v-model="form.nom" type="text" placeholder="Ex : Houzz, Architoo, BOAMP..." @blur="validateField('nom')" />
+      <span v-if="errors.nom" class="error-msg" role="alert">{{ errors.nom }}</span>
+    </div>
+
+    <div class="field-group">
+      <label for="job-type">Type de plateforme <span class="label-hint">(optionnel)</span></label>
+      <div class="radio-group">
+        <label v-for="t in TYPES" :key="t" class="radio-label" :class="{ active: form.type_plateforme === t }">
+          <input type="radio" :value="t" v-model="form.type_plateforme" name="job-type" />{{ LABELS[t] }}
+        </label>
+      </div>
+    </div>
+
+    <div class="field-group" :class="{ 'field-error': errors.url }">
+      <label for="job-url">Site web <span class="required">*</span></label>
+      <input id="job-url" v-model="form.url" type="url" placeholder="https://..." @blur="validateField('url')" />
+      <span v-if="errors.url" class="error-msg" role="alert">{{ errors.url }}</span>
+    </div>
+
+    <div class="field-group" :class="{ 'field-error': errors.description_user }">
+      <label for="job-desc">Description courte <span class="required">*</span> <span class="label-hint">(50 à 500 caractères)</span></label>
+      <textarea id="job-desc" v-model="form.description_user" rows="4" placeholder="Décris la plateforme : qui la gère, quel type de missions, quel modèle économique..." @blur="validateField('description_user')" />
+      <div class="field-meta">
+        <span v-if="errors.description_user" class="error-msg" role="alert">{{ errors.description_user }}</span>
+        <span v-else class="char-count" :class="{ 'char-warn': form.description_user.length > 450 }">{{ form.description_user.length }}/500</span>
+      </div>
+    </div>
+
+    <div class="field-group" :class="{ 'field-error': errors.submitted_by_email }">
+      <label for="job-email">Ton email <span class="label-hint">(optionnel — pour le suivi)</span></label>
+      <input id="job-email" v-model="form.submitted_by_email" type="email" placeholder="ton@email.fr" autocomplete="email" @blur="validateField('submitted_by_email')" />
+      <span v-if="errors.submitted_by_email" class="error-msg" role="alert">{{ errors.submitted_by_email }}</span>
+    </div>
+
+    <div v-if="serverError" class="server-error" role="alert"><strong>Erreur :</strong> {{ serverError }}</div>
+
+    <div class="form-actions">
+      <button type="submit" class="btn-primary" :disabled="submitting">{{ submitting ? 'Envoi en cours...' : 'Proposer →' }}</button>
+    </div>
+    <p class="form-note">Ta proposition sera examinée par l'équipe avant publication.</p>
+  </form>
+</template>
+
+<script setup lang="ts">
+import { z } from 'zod'
+
+const TYPES = ['mise-en-relation', 'appel-offre-public', 'communaute-pro'] as const
+const LABELS: Record<string, string> = { 'mise-en-relation': 'Mise en relation (B2C)', 'appel-offre-public': 'Appels d\'offres publics', 'communaute-pro': 'Communauté pro' }
+
+const Schema = z.object({
+  nom: z.string().min(3, 'Minimum 3 caractères').max(150, 'Maximum 150 caractères').trim(),
+  url: z.string().url('URL invalide (commencer par https://)'),
+  description_user: z.string().min(50, 'Minimum 50 caractères').max(500, 'Maximum 500 caractères').trim(),
+  type_plateforme: z.string().optional(),
+  submitted_by_email: z.string().email('Email invalide').optional().or(z.literal('')),
+})
+
+const emit = defineEmits<{ success: [] }>()
+
+const form = reactive({
+  nom: '', url: '', description_user: '', type_plateforme: '', submitted_by_email: '',
+})
+const errors = reactive<Record<string, string>>({})
+const submitting = ref(false)
+const serverError = ref('')
+
+function validateField(field: string) {
+  const partial = Schema.partial()
+  const result = partial.safeParse({ [field]: (form as any)[field] })
+  if (!result.success) {
+    const fieldErrors = result.error.flatten().fieldErrors
+    errors[field] = fieldErrors[field]?.[0] ?? ''
+  } else {
+    delete errors[field]
+  }
+}
+
+function validateAll(): boolean {
+  const result = Schema.safeParse(form)
+  if (!result.success) {
+    const flat = result.error.flatten().fieldErrors
+    Object.assign(errors, Object.fromEntries(Object.entries(flat).map(([k, v]) => [k, v?.[0] ?? ''])))
+    return false
+  }
+  Object.keys(errors).forEach(k => delete errors[k])
+  return true
+}
+
+async function submit() {
+  serverError.value = ''
+  if (!validateAll()) {
+    await nextTick()
+    const firstError = document.querySelector('.field-error')
+    firstError?.scrollIntoView({ behavior: 'smooth', block: 'center' })
+    return
+  }
+  submitting.value = true
+  try {
+    await $fetch('/api/submit', {
+      method: 'POST',
+      body: {
+        submission_type: 'job',
+        nom: form.nom,
+        url: form.url,
+        description_user: form.description_user,
+        type_plateforme: form.type_plateforme || undefined,
+        submitted_by_email: form.submitted_by_email || undefined,
+      },
+    })
+    emit('success')
+  } catch (e: any) {
+    const status = e?.status ?? e?.statusCode
+    if (status === 429) {
+      serverError.value = 'Tu as déjà soumis 3 fiches aujourd\'hui. Réessaie demain.'
+    } else if (status === 422 && e?.data) {
+      const fieldErrors = e.data
+      Object.entries(fieldErrors).forEach(([k, v]) => { errors[k] = Array.isArray(v) ? v[0] : String(v) })
+      serverError.value = 'Certains champs sont invalides — vérifie les erreurs ci-dessus.'
+    } else {
+      serverError.value = 'Une erreur s\'est produite. Réessaie dans quelques instants.'
+    }
+  } finally {
+    submitting.value = false
+  }
+}
+</script>
+
+<style scoped>
+@import './form-styles.css';
+</style>
diff --git a/components/FormOutils.vue b/components/FormOutils.vue
new file mode 100644
index 0000000..4656f86
--- /dev/null
+++ b/components/FormOutils.vue
@@ -0,0 +1,134 @@
+<template>
+  <form @submit.prevent="submit" class="proposer-form" novalidate>
+    <div class="field-group" :class="{ 'field-error': errors.nom }">
+      <label for="out-nom">Nom de l'outil <span class="required">*</span></label>
+      <input id="out-nom" v-model="form.nom" type="text" placeholder="Ex : Simulateur Autonomie, FreeCAD..." @blur="validateField('nom')" />
+      <span v-if="errors.nom" class="error-msg" role="alert">{{ errors.nom }}</span>
+    </div>
+
+    <div class="field-group">
+      <label>Catégorie <span class="label-hint">(optionnelle)</span></label>
+      <div class="radio-group">
+        <label v-for="c in CATEGORIES" :key="c" class="radio-label" :class="{ active: form.categorie === c }">
+          <input type="radio" :value="c" v-model="form.categorie" name="out-categorie" />{{ LABELS[c] }}
+        </label>
+      </div>
+    </div>
+
+    <div class="field-group" :class="{ 'field-error': errors.url }">
+      <label for="out-url">Site web / lien <span class="label-hint">(optionnel — si pas de lien direct)</span></label>
+      <input id="out-url" v-model="form.url" type="url" placeholder="https://..." @blur="validateField('url')" />
+      <span v-if="errors.url" class="error-msg" role="alert">{{ errors.url }}</span>
+    </div>
+
+    <div class="field-group" :class="{ 'field-error': errors.description_user }">
+      <label for="out-desc">Description courte <span class="required">*</span> <span class="label-hint">(50 à 500 caractères)</span></label>
+      <textarea id="out-desc" v-model="form.description_user" rows="4" placeholder="Décris l'outil : à quoi il sert, pour quel usage, ce qui le rend utile..." @blur="validateField('description_user')" />
+      <div class="field-meta">
+        <span v-if="errors.description_user" class="error-msg" role="alert">{{ errors.description_user }}</span>
+        <span v-else class="char-count" :class="{ 'char-warn': form.description_user.length > 450 }">{{ form.description_user.length }}/500</span>
+      </div>
+    </div>
+
+    <div class="field-group" :class="{ 'field-error': errors.submitted_by_email }">
+      <label for="out-email">Ton email <span class="label-hint">(optionnel — pour le suivi)</span></label>
+      <input id="out-email" v-model="form.submitted_by_email" type="email" placeholder="ton@email.fr" autocomplete="email" @blur="validateField('submitted_by_email')" />
+      <span v-if="errors.submitted_by_email" class="error-msg" role="alert">{{ errors.submitted_by_email }}</span>
+    </div>
+
+    <div v-if="serverError" class="server-error" role="alert"><strong>Erreur :</strong> {{ serverError }}</div>
+
+    <div class="form-actions">
+      <button type="submit" class="btn-primary" :disabled="submitting">{{ submitting ? 'Envoi en cours...' : 'Proposer →' }}</button>
+    </div>
+    <p class="form-note">Ta proposition sera examinée par l'équipe avant publication.</p>
+  </form>
+</template>
+
+<script setup lang="ts">
+import { z } from 'zod'
+
+const CATEGORIES = ['simulateur', 'logiciel', 'guide', 'autre'] as const
+const LABELS: Record<string, string> = { simulateur: 'Simulateur', logiciel: 'Logiciel / app', guide: 'Guide / ressource', autre: 'Autre' }
+
+const Schema = z.object({
+  nom: z.string().min(3, 'Minimum 3 caractères').max(150, 'Maximum 150 caractères').trim(),
+  url: z.string().url('URL invalide').optional().or(z.literal('')),
+  description_user: z.string().min(50, 'Minimum 50 caractères').max(500, 'Maximum 500 caractères').trim(),
+  categorie: z.string().optional(),
+  submitted_by_email: z.string().email('Email invalide').optional().or(z.literal('')),
+})
+
+const emit = defineEmits<{ success: [] }>()
+
+const form = reactive({
+  nom: '', url: '', description_user: '', categorie: '', submitted_by_email: '',
+})
+const errors = reactive<Record<string, string>>({})
+const submitting = ref(false)
+const serverError = ref('')
+
+function validateField(field: string) {
+  const partial = Schema.partial()
+  const result = partial.safeParse({ [field]: (form as any)[field] })
+  if (!result.success) {
+    const fieldErrors = result.error.flatten().fieldErrors
+    errors[field] = fieldErrors[field]?.[0] ?? ''
+  } else {
+    delete errors[field]
+  }
+}
+
+function validateAll(): boolean {
+  const result = Schema.safeParse(form)
+  if (!result.success) {
+    const flat = result.error.flatten().fieldErrors
+    Object.assign(errors, Object.fromEntries(Object.entries(flat).map(([k, v]) => [k, v?.[0] ?? ''])))
+    return false
+  }
+  Object.keys(errors).forEach(k => delete errors[k])
+  return true
+}
+
+async function submit() {
+  serverError.value = ''
+  if (!validateAll()) {
+    await nextTick()
+    const firstError = document.querySelector('.field-error')
+    firstError?.scrollIntoView({ behavior: 'smooth', block: 'center' })
+    return
+  }
+  submitting.value = true
+  try {
+    await $fetch('/api/submit', {
+      method: 'POST',
+      body: {
+        submission_type: 'outil',
+        nom: form.nom,
+        url: form.url || undefined,
+        description_user: form.description_user,
+        categorie: form.categorie || undefined,
+        submitted_by_email: form.submitted_by_email || undefined,
+      },
+    })
+    emit('success')
+  } catch (e: any) {
+    const status = e?.status ?? e?.statusCode
+    if (status === 429) {
+      serverError.value = 'Tu as déjà soumis 3 fiches aujourd\'hui. Réessaie demain.'
+    } else if (status === 422 && e?.data) {
+      const fieldErrors = e.data
+      Object.entries(fieldErrors).forEach(([k, v]) => { errors[k] = Array.isArray(v) ? v[0] : String(v) })
+      serverError.value = 'Certains champs sont invalides — vérifie les erreurs ci-dessus.'
+    } else {
+      serverError.value = 'Une erreur s\'est produite. Réessaie dans quelques instants.'
+    }
+  } finally {
+    submitting.value = false
+  }
+}
+</script>
+
+<style scoped>
+@import './form-styles.css';
+</style>
diff --git a/components/FormReferences.vue b/components/FormReferences.vue
new file mode 100644
index 0000000..7f40cf0
--- /dev/null
+++ b/components/FormReferences.vue
@@ -0,0 +1,142 @@
+<template>
+  <form @submit.prevent="submit" class="proposer-form" novalidate>
+    <div class="field-group" :class="{ 'field-error': errors.titre }">
+      <label for="ref-titre">Titre du livre / document <span class="required">*</span></label>
+      <input id="ref-titre" v-model="form.titre" type="text" placeholder="Ex : Repenser l'architecture..." @blur="validateField('titre')" />
+      <span v-if="errors.titre" class="error-msg" role="alert">{{ errors.titre }}</span>
+    </div>
+
+    <div class="field-group" :class="{ 'field-error': errors.auteur }">
+      <label for="ref-auteur">Auteur·ice(s) <span class="required">*</span></label>
+      <input id="ref-auteur" v-model="form.auteur" type="text" placeholder="Ex : Philippe Rahm, Doina Petrescu..." @blur="validateField('auteur')" />
+      <span v-if="errors.auteur" class="error-msg" role="alert">{{ errors.auteur }}</span>
+    </div>
+
+    <div class="field-group" :class="{ 'field-error': errors.url }">
+      <label for="ref-url">Lien <span class="label-hint">(optionnel — éditeur, статье, PDF…)</span></label>
+      <input id="ref-url" v-model="form.url" type="url" placeholder="https://..." @blur="validateField('url')" />
+      <span v-if="errors.url" class="error-msg" role="alert">{{ errors.url }}</span>
+    </div>
+
+    <div class="field-group" :class="{ 'field-error': errors.description }">
+      <label for="ref-desc">Description de l'ouvrage <span class="required">*</span> <span class="label-hint">(50 à 1000 caractères)</span></label>
+      <textarea id="ref-desc" v-model="form.description" rows="4" placeholder="Présente l'ouvrage : thèse principale, approche, pourquoi c'est important..." @blur="validateField('description')" />
+      <div class="field-meta">
+        <span v-if="errors.description" class="error-msg" role="alert">{{ errors.description }}</span>
+        <span v-else class="char-count" :class="{ 'char-warn': form.description.length > 900 }">{{ form.description.length }}/1000</span>
+      </div>
+    </div>
+
+    <div class="field-group">
+      <label for="ref-pertinence">Pertinence pour le RAG <span class="label-hint">(optionnel — en quoi cette référence est utile ?)</span></label>
+      <textarea id="ref-pertinence" v-model="form.pertinence_rag" rows="2" placeholder="Ex : Excellente source sur l'architecture participative..." maxlength="500" />
+    </div>
+
+    <div class="field-group">
+      <label for="ref-hashtags">Hashtags <span class="label-hint">(optionnel — séparés par des virgules)</span></label>
+      <input id="ref-hashtags" v-model="form.hashtags" type="text" placeholder="Ex : écologie, participation, matériaux bio..." />
+    </div>
+
+    <div class="field-group" :class="{ 'field-error': errors.submitted_by_email }">
+      <label for="ref-email">Ton email <span class="label-hint">(optionnel — pour le suivi)</span></label>
+      <input id="ref-email" v-model="form.submitted_by_email" type="email" placeholder="ton@email.fr" autocomplete="email" @blur="validateField('submitted_by_email')" />
+      <span v-if="errors.submitted_by_email" class="error-msg" role="alert">{{ errors.submitted_by_email }}</span>
+    </div>
+
+    <div v-if="serverError" class="server-error" role="alert"><strong>Erreur :</strong> {{ serverError }}</div>
+
+    <div class="form-actions">
+      <button type="submit" class="btn-primary" :disabled="submitting">{{ submitting ? 'Envoi en cours...' : 'Proposer la référence →' }}</button>
+    </div>
+    <p class="form-note">Ta référence sera examinée avant d'être intégrée au fonds documentaire RAG.</p>
+  </form>
+</template>
+
+<script setup lang="ts">
+import { z } from 'zod'
+
+const Schema = z.object({
+  titre: z.string().min(3, 'Minimum 3 caractères').max(200, 'Maximum 200 caractères').trim(),
+  auteur: z.string().min(2, 'Minimum 2 caractères').max(200, 'Maximum 200 caractères').trim(),
+  url: z.string().url('URL invalide').optional().or(z.literal('')),
+  description: z.string().min(50, 'Minimum 50 caractères').max(1000, 'Maximum 1000 caractères').trim(),
+  pertinence_rag: z.string().max(500).optional(),
+  hashtags: z.string().max(300).optional(),
+  submitted_by_email: z.string().email('Email invalide').optional().or(z.literal('')),
+})
+
+const emit = defineEmits<{ success: [] }>()
+
+const form = reactive({
+  titre: '', auteur: '', url: '', description: '',
+  pertinence_rag: '', hashtags: '', submitted_by_email: '',
+})
+const errors = reactive<Record<string, string>>({})
+const submitting = ref(false)
+const serverError = ref('')
+
+function validateField(field: string) {
+  const partial = Schema.partial()
+  const result = partial.safeParse({ [field]: (form as any)[field] })
+  if (!result.success) {
+    const fieldErrors = result.error.flatten().fieldErrors
+    errors[field] = fieldErrors[field]?.[0] ?? ''
+  } else {
+    delete errors[field]
+  }
+}
+
+function validateAll(): boolean {
+  const result = Schema.safeParse(form)
+  if (!result.success) {
+    const flat = result.error.flatten().fieldErrors
+    Object.assign(errors, Object.fromEntries(Object.entries(flat).map(([k, v]) => [k, v?.[0] ?? ''])))
+    return false
+  }
+  Object.keys(errors).forEach(k => delete errors[k])
+  return true
+}
+
+async function submit() {
+  serverError.value = ''
+  if (!validateAll()) {
+    await nextTick()
+    const firstError = document.querySelector('.field-error')
+    firstError?.scrollIntoView({ behavior: 'smooth', block: 'center' })
+    return
+  }
+  submitting.value = true
+  try {
+    await $fetch('/api/submit/reference', {
+      method: 'POST',
+      body: {
+        titre: form.titre,
+        auteur: form.auteur,
+        url: form.url || undefined,
+        description: form.description,
+        pertinence_rag: form.pertinence_rag || undefined,
+        hashtags: form.hashtags || undefined,
+        submitted_by_email: form.submitted_by_email || undefined,
+      },
+    })
+    emit('success')
+  } catch (e: any) {
+    const status = e?.status ?? e?.statusCode
+    if (status === 429) {
+      serverError.value = 'Tu as déjà soumis 3 fiches aujourd\'hui. Réessaie demain.'
+    } else if (status === 422 && e?.data) {
+      const fieldErrors = e.data
+      Object.entries(fieldErrors).forEach(([k, v]) => { errors[k] = Array.isArray(v) ? v[0] : String(v) })
+      serverError.value = 'Certains champs sont invalides — vérifie les erreurs ci-dessus.'
+    } else {
+      serverError.value = 'Une erreur s\'est produite. Réessaie dans quelques instants.'
+    }
+  } finally {
+    submitting.value = false
+  }
+}
+</script>
+
+<style scoped>
+@import './form-styles.css';
+</style>
diff --git a/components/FormReseau.vue b/components/FormReseau.vue
new file mode 100644
index 0000000..0a94c5d
--- /dev/null
+++ b/components/FormReseau.vue
@@ -0,0 +1,158 @@
+<template>
+  <form @submit.prevent="submit" class="proposer-form" novalidate>
+    <div class="field-group" :class="{ 'field-error': errors.nom }">
+      <label for="res-nom">Nom du réseau / collectif / ressource <span class="required">*</span></label>
+      <input id="res-nom" v-model="form.nom" type="text" placeholder="Ex : Collectif des Arpenteurs, Archi'Résilience..." @blur="validateField('nom')" />
+      <span v-if="errors.nom" class="error-msg" role="alert">{{ errors.nom }}</span>
+    </div>
+
+    <div class="field-group" :class="{ 'field-error': errors.type_principal }">
+      <fieldset>
+        <legend>Type <span class="label-hint">(optionnel)</span></legend>
+        <div class="radio-group">
+          <label v-for="t in TYPES" :key="t" class="radio-label" :class="{ active: form.type_principal === t }">
+            <input type="radio" :value="t" v-model="form.type_principal" name="res-type" />{{ LABELS[t] }}
+          </label>
+        </div>
+      </fieldset>
+    </div>
+
+    <div class="field-group" :class="{ 'field-error': errors.url }">
+      <label for="res-url">Site web <span class="label-hint">(optionnel)</span></label>
+      <input id="res-url" v-model="form.url" type="url" placeholder="https://..." @blur="validateField('url')" />
+      <span v-if="errors.url" class="error-msg" role="alert">{{ errors.url }}</span>
+    </div>
+
+    <div class="field-group" :class="{ 'field-error': errors.description_user }">
+      <label for="res-desc">Description courte <span class="required">*</span> <span class="label-hint">(50 à 500 caractères)</span></label>
+      <textarea id="res-desc" v-model="form.description_user" rows="4" placeholder="Présente ce réseau/collectif : son objet, son échelle, ce qui le distingue..." @blur="validateField('description_user')" />
+      <div class="field-meta">
+        <span v-if="errors.description_user" class="error-msg" role="alert">{{ errors.description_user }}</span>
+        <span v-else class="char-count" :class="{ 'char-warn': form.description_user.length > 450 }">{{ form.description_user.length }}/500</span>
+      </div>
+    </div>
+
+    <div class="field-group">
+      <label for="res-ville">Ville principale <span class="label-hint">(optionnel)</span></label>
+      <input id="res-ville" v-model="form.localisation_ville" type="text" placeholder="Ex : Paris, Lyon..." />
+    </div>
+
+    <div class="field-group">
+      <label for="res-projet-lien">Lien vers un projet / réalisation <span class="label-hint">(optionnel)</span></label>
+      <input id="res-projet-lien" v-model="form.projet_lien" type="url" placeholder="https://..." />
+    </div>
+
+    <div class="field-group">
+      <label for="res-projet-adresse">Adresse du projet <span class="label-hint">(optionnel)</span></label>
+      <input id="res-projet-adresse" v-model="form.projet_adresse" type="text" placeholder="Ex : 12 rue des Lilas, 75000 Paris" />
+    </div>
+
+    <div class="field-group" :class="{ 'field-error': errors.submitted_by_email }">
+      <label for="res-email">Ton email <span class="label-hint">(optionnel — pour le suivi)</span></label>
+      <input id="res-email" v-model="form.submitted_by_email" type="email" placeholder="ton@email.fr" autocomplete="email" @blur="validateField('submitted_by_email')" />
+      <span v-if="errors.submitted_by_email" class="error-msg" role="alert">{{ errors.submitted_by_email }}</span>
+    </div>
+
+    <div v-if="serverError" class="server-error" role="alert"><strong>Erreur :</strong> {{ serverError }}</div>
+
+    <div class="form-actions">
+      <button type="submit" class="btn-primary" :disabled="submitting">{{ submitting ? 'Envoi en cours...' : 'Proposer →' }}</button>
+    </div>
+    <p class="form-note">Ta proposition sera examinée par l'équipe avant publication.</p>
+  </form>
+</template>
+
+<script setup lang="ts">
+import { z } from 'zod'
+
+const TYPES = ['agence', 'collectif', 'reseau', 'asso', 'ressource'] as const
+const LABELS: Record<string, string> = { agence: 'Agence', collectif: 'Collectif', reseau: 'Réseau', asso: 'Association', ressource: 'Ressource' }
+
+const Schema = z.object({
+  nom: z.string().min(3, 'Minimum 3 caractères').max(150, 'Maximum 150 caractères').trim(),
+  type_principal: z.string().optional(),
+  url: z.string().url('URL invalide').optional().or(z.literal('')),
+  description_user: z.string().min(50, 'Minimum 50 caractères').max(500, 'Maximum 500 caractères').trim(),
+  localisation_ville: z.string().max(100).optional(),
+  projet_lien: z.string().url('URL invalide').optional().or(z.literal('')),
+  projet_adresse: z.string().max(200).optional(),
+  submitted_by_email: z.string().email('Email invalide').optional().or(z.literal('')),
+})
+
+const emit = defineEmits<{ success: [] }>()
+
+const form = reactive({
+  nom: '', type_principal: '', url: '', description_user: '',
+  localisation_ville: '', projet_lien: '', projet_adresse: '', submitted_by_email: '',
+})
+const errors = reactive<Record<string, string>>({})
+const submitting = ref(false)
+const serverError = ref('')
+
+function validateField(field: string) {
+  const partial = Schema.partial()
+  const result = partial.safeParse({ [field]: (form as any)[field] })
+  if (!result.success) {
+    const fieldErrors = result.error.flatten().fieldErrors
+    errors[field] = fieldErrors[field]?.[0] ?? ''
+  } else {
+    delete errors[field]
+  }
+}
+
+function validateAll(): boolean {
+  const result = Schema.safeParse(form)
+  if (!result.success) {
+    const flat = result.error.flatten().fieldErrors
+    Object.assign(errors, Object.fromEntries(Object.entries(flat).map(([k, v]) => [k, v?.[0] ?? ''])))
+    return false
+  }
+  Object.keys(errors).forEach(k => delete errors[k])
+  return true
+}
+
+async function submit() {
+  serverError.value = ''
+  if (!validateAll()) {
+    await nextTick()
+    const firstError = document.querySelector('.field-error')
+    firstError?.scrollIntoView({ behavior: 'smooth', block: 'center' })
+    return
+  }
+  submitting.value = true
+  try {
+    await $fetch('/api/submit', {
+      method: 'POST',
+      body: {
+        submission_type: 'reseau',
+        nom: form.nom,
+        type_principal: form.type_principal || undefined,
+        url: form.url || undefined,
+        description_user: form.description_user,
+        localisation_ville: form.localisation_ville || undefined,
+        projet_lien: form.projet_lien || undefined,
+        projet_adresse: form.projet_adresse || undefined,
+        submitted_by_email: form.submitted_by_email || undefined,
+      },
+    })
+    emit('success')
+  } catch (e: any) {
+    const status = e?.status ?? e?.statusCode
+    if (status === 429) {
+      serverError.value = 'Tu as déjà soumis 3 fiches aujourd\'hui. Réessaie demain.'
+    } else if (status === 422 && e?.data) {
+      const fieldErrors = e.data
+      Object.entries(fieldErrors).forEach(([k, v]) => { errors[k] = Array.isArray(v) ? v[0] : String(v) })
+      serverError.value = 'Certains champs sont invalides — vérifie les erreurs ci-dessus.'
+    } else {
+      serverError.value = 'Une erreur s\'est produite. Réessaie dans quelques instants.'
+    }
+  } finally {
+    submitting.value = false
+  }
+}
+</script>
+
+<style scoped>
+@import './form-styles.css';
+</style>
diff --git a/components/form-styles.css b/components/form-styles.css
new file mode 100644
index 0000000..9e12fd4
--- /dev/null
+++ b/components/form-styles.css
@@ -0,0 +1,240 @@
+.proposer-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+}
+
+.field-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+
+.field-group label,
+.field-group legend {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--nav-text);
+  display: block;
+}
+
+.field-group fieldset {
+  border: none;
+  padding: 0;
+  margin: 0;
+}
+
+.required { color: #c0392b; }
+
+.label-hint {
+  font-weight: 400;
+  color: var(--nav-text-muted);
+  font-size: 0.8rem;
+  margin-left: 0.25rem;
+}
+
+.field-group input[type="text"],
+.field-group input[type="url"],
+.field-group input[type="email"],
+.field-group textarea {
+  width: 100%;
+  padding: 0.625rem 0.875rem;
+  border: 1px solid rgba(26, 34, 56, 0.2);
+  border-radius: 8px;
+  font-size: 0.9rem;
+  color: var(--nav-text);
+  background: var(--nav-surface);
+  font-family: inherit;
+  transition: border-color 0.15s, box-shadow 0.15s;
+  box-sizing: border-box;
+}
+
+.field-group input:focus,
+.field-group textarea:focus {
+  outline: none;
+  border-color: var(--nav-primary-solid);
+  box-shadow: 0 0 0 2px rgba(245, 179, 66, 0.4);
+}
+
+.field-group textarea {
+  resize: vertical;
+  min-height: 100px;
+}
+
+.field-error input,
+.field-error textarea {
+  border-color: #c0392b !important;
+}
+
+.error-msg {
+  font-size: 0.8rem;
+  color: #c0392b;
+}
+
+.field-meta {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.char-count {
+  font-size: 0.75rem;
+  color: var(--nav-text-muted);
+}
+
+.char-warn {
+  color: #e67e22;
+}
+
+.radio-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-top: 0.375rem;
+}
+
+.radio-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.375rem 0.75rem;
+  border: 1px solid rgba(26, 34, 56, 0.2);
+  border-radius: 6px;
+  font-size: 0.85rem;
+  color: var(--nav-text);
+  background: var(--nav-surface);
+  cursor: pointer;
+  transition: all 0.15s;
+  user-select: none;
+}
+
+.radio-label input[type="radio"] {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.radio-label:hover {
+  border-color: var(--nav-primary-solid);
+  background: var(--nav-bg-alt);
+}
+
+.radio-label.active {
+  background: var(--nav-primary);
+  border-color: transparent;
+  color: var(--nav-text-on-primary);
+}
+
+.checkbox-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.5rem;
+  margin-top: 0.375rem;
+}
+
+@media (max-width: 400px) {
+  .checkbox-grid { grid-template-columns: 1fr; }
+}
+
+.checkbox-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.375rem 0.75rem;
+  border: 1px solid rgba(26, 34, 56, 0.2);
+  border-radius: 6px;
+  font-size: 0.85rem;
+  color: var(--nav-text);
+  background: var(--nav-surface);
+  cursor: pointer;
+  transition: all 0.15s;
+  user-select: none;
+  position: relative;
+}
+
+.checkbox-label input[type="checkbox"] {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.checkbox-label:hover:not(.disabled) {
+  border-color: var(--nav-primary-solid);
+  background: var(--nav-bg-alt);
+}
+
+.checkbox-label.active {
+  background: var(--nav-primary);
+  border-color: transparent;
+  color: var(--nav-text-on-primary);
+}
+
+.checkbox-label.disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.fn-order {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  background: var(--nav-accent);
+  color: var(--nav-text);
+  border-radius: 50%;
+  font-size: 0.7rem;
+  font-weight: 700;
+  flex-shrink: 0;
+}
+
+.server-error {
+  padding: 0.875rem 1rem;
+  background: #fdf0ee;
+  border: 1px solid #e74c3c;
+  border-radius: 8px;
+  font-size: 0.875rem;
+  color: #c0392b;
+}
+
+.form-actions {
+  display: flex;
+  gap: 0.75rem;
+  justify-content: flex-end;
+  margin-top: 0.5rem;
+}
+
+.btn-primary {
+  padding: 0.75rem 1.5rem;
+  background: var(--nav-primary);
+  color: var(--nav-text-on-primary);
+  border: none;
+  border-radius: 8px;
+  font-size: 0.9rem;
+  font-weight: 600;
+  cursor: pointer;
+  font-family: inherit;
+  transition: background 0.15s, opacity 0.15s;
+}
+
+.btn-primary:hover:not(:disabled) {
+  background: rgba(26, 34, 56, 0.75);
+}
+
+.btn-primary:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.form-note {
+  font-size: 0.75rem;
+  color: var(--nav-text-muted);
+  text-align: center;
+  margin: 0;
+}
+
+@media (max-width: 480px) {
+  .form-actions { flex-direction: column-reverse; }
+  .btn-primary { width: 100%; justify-content: center; }
+}
diff --git a/nuxt.config.ts b/nuxt.config.ts
index e14b2d8..13db4a0 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -24,6 +24,7 @@ export default defineNuxtConfig({
     codevBaseId: '',             // NUXT_CODEV_BASE_ID - base NocoDB (ex: pipilvsi7dibo80)
     codevAdminPassword: 'admin2026', // NUXT_CODEV_ADMIN_PASSWORD
     ragPeUrl: process.env.RAG_PE_URL || 'http://localhost:9621',
+    referencesTableId: process.env.REFERENCES_TABLE_ID || process.env.NUXT_REFERENCES_TABLE_ID || '',
   },
 
   // Leaflet ne fonctionne pas en SSR — forcer le rendu côté client
diff --git a/pages/contribuer.vue b/pages/contribuer.vue
index 0ee47a7..c0a41e3 100644
--- a/pages/contribuer.vue
+++ b/pages/contribuer.vue
@@ -1,795 +1,7 @@
 <template>
-  <div class="contribuer-page">
-    <div class="contribuer-inner">
-      <!-- Retour -->
-      <NuxtLink to="/" class="back-link">
-        ← Retour à la carte
-      </NuxtLink>
-
-      <!-- En-tête -->
-      <div class="contribuer-header">
-        <h1>Proposer une ressource</h1>
-        <p class="contribuer-subtitle">
-          Tu connais une organisation utile aux architectes qui n'est pas encore référencée ?
-          Soumets-la ici — une IA enrichira la fiche et on validera sous 7 jours.
-        </p>
-        <p class="contribuer-hint">
-          Si tu n'as pas le temps de tout remplir, laisse-nous juste le lien — on extraira les infos du site.
-          Mais une description de toi, c'est toujours plus vivant et plus précis.
-        </p>
-      </div>
-
-      <!-- Message succès -->
-      <div v-if="success" class="success-block" role="status" aria-live="polite">
-        <div class="success-icon">✓</div>
-        <h2>Merci !</h2>
-        <p>Ta fiche est en cours de traitement.</p>
-        <p class="success-detail">
-          Une IA va scraper le site et enrichir la description.
-          Jules (et bientôt une équipe de modération) valide sous 7 jours.
-        </p>
-        <button type="button" class="btn-secondary" @click="reset">
-          Proposer une autre fiche
-        </button>
-      </div>
-
-      <!-- Formulaire -->
-      <form v-else @submit.prevent="submit" class="contribuer-form" novalidate>
-
-        <!-- Nom -->
-        <div class="field-group" :class="{ 'field-error': errors.nom }">
-          <label for="nom">Nom de l'organisation <span class="required">*</span></label>
-          <input
-            id="nom"
-            v-model="form.nom"
-            type="text"
-            placeholder="Ex : UNSFA, Maison de l'Architecture..."
-            autocomplete="organization"
-            @blur="validateField('nom')"
-          />
-          <span v-if="errors.nom" class="error-msg" role="alert">{{ errors.nom }}</span>
-        </div>
-
-        <!-- URL -->
-        <div class="field-group" :class="{ 'field-error': errors.url }">
-          <label for="url">
-            Site web
-            <span class="label-hint">(optionnel — recommandé pour l'enrichissement IA)</span>
-          </label>
-          <input
-            id="url"
-            v-model="form.url"
-            type="url"
-            placeholder="https://..."
-            @blur="validateField('url')"
-          />
-          <span v-if="errors.url" class="error-msg" role="alert">{{ errors.url }}</span>
-        </div>
-
-        <!-- Description -->
-        <div class="field-group" :class="{ 'field-error': errors.description_user }">
-          <label for="description_user">
-            Description courte <span class="required">*</span>
-            <span class="label-hint">(50 à 500 caractères)</span>
-          </label>
-          <textarea
-            id="description_user"
-            v-model="form.description_user"
-            rows="4"
-            placeholder="Présente l'organisation en quelques mots : ses missions, son public, ce qu'elle apporte..."
-            @blur="validateField('description_user')"
-          />
-          <div class="field-meta">
-            <span v-if="errors.description_user" class="error-msg" role="alert">
-              {{ errors.description_user }}
-            </span>
-            <span v-else class="char-count" :class="{ 'char-warn': form.description_user.length > 450 }">
-              {{ form.description_user.length }}/500
-            </span>
-          </div>
-        </div>
-
-        <!-- Échelle -->
-        <div class="field-group" :class="{ 'field-error': errors.echelle }">
-          <fieldset>
-            <legend>
-              Échelle <span class="required">*</span>
-              <span class="label-hint">(une seule)</span>
-            </legend>
-            <div class="radio-group">
-              <label
-                v-for="opt in ECHELLES"
-                :key="opt"
-                class="radio-label"
-                :class="{ active: form.echelle === opt }"
-              >
-                <input
-                  type="radio"
-                  :value="opt"
-                  v-model="form.echelle"
-                  name="echelle"
-                  @change="validateField('echelle')"
-                />
-                {{ opt }}
-              </label>
-            </div>
-          </fieldset>
-          <span v-if="errors.echelle" class="error-msg" role="alert">{{ errors.echelle }}</span>
-        </div>
-
-        <!-- Fonctions -->
-        <div class="field-group" :class="{ 'field-error': errors.fonctions }">
-          <fieldset>
-            <legend>
-              Fonctions <span class="required">*</span>
-              <span class="label-hint">(1 à 5 — l'ordre de clic = priorité)</span>
-            </legend>
-            <div class="checkbox-grid">
-              <label
-                v-for="fn in FONCTIONS"
-                :key="fn"
-                class="checkbox-label"
-                :class="{
-                  active: form.fonctions.includes(fn),
-                  disabled: !form.fonctions.includes(fn) && form.fonctions.length >= 5,
-                }"
-              >
-                <input
-                  type="checkbox"
-                  :value="fn"
-                  :checked="form.fonctions.includes(fn)"
-                  :disabled="!form.fonctions.includes(fn) && form.fonctions.length >= 5"
-                  @change="toggleFonction(fn)"
-                />
-                <span class="fn-order" v-if="form.fonctions.includes(fn)">
-                  {{ form.fonctions.indexOf(fn) + 1 }}
-                </span>
-                {{ fn }}
-              </label>
-            </div>
-          </fieldset>
-          <span v-if="errors.fonctions" class="error-msg" role="alert">{{ errors.fonctions }}</span>
-        </div>
-
-        <!-- Territoire -->
-        <div class="field-group" :class="{ 'field-error': errors.territoire }">
-          <fieldset>
-            <legend>
-              Territoire <span class="required">*</span>
-            </legend>
-            <div class="radio-group">
-              <label
-                v-for="t in TERRITOIRES"
-                :key="t"
-                class="radio-label"
-                :class="{ active: form.territoire === t }"
-              >
-                <input
-                  type="radio"
-                  :value="t"
-                  v-model="form.territoire"
-                  name="territoire"
-                  @change="validateField('territoire')"
-                />
-                {{ t }}
-              </label>
-            </div>
-          </fieldset>
-          <span v-if="errors.territoire" class="error-msg" role="alert">{{ errors.territoire }}</span>
-        </div>
-
-        <!-- Ville -->
-        <div class="field-group" :class="{ 'field-error': errors.localisation_ville }">
-          <label for="localisation_ville">
-            Ville principale
-            <span class="label-hint">(optionnel — pour la géolocalisation sur la carte)</span>
-          </label>
-          <input
-            id="localisation_ville"
-            v-model="form.localisation_ville"
-            type="text"
-            placeholder="Ex : Paris, Lyon, Bordeaux..."
-          />
-          <span v-if="errors.localisation_ville" class="error-msg" role="alert">
-            {{ errors.localisation_ville }}
-          </span>
-        </div>
-
-        <!-- Email -->
-        <div class="field-group" :class="{ 'field-error': errors.submitted_by_email }">
-          <label for="submitted_by_email">
-            Ton email
-            <span class="label-hint">(optionnel — pour le suivi de modération)</span>
-          </label>
-          <input
-            id="submitted_by_email"
-            v-model="form.submitted_by_email"
-            type="email"
-            placeholder="ton@email.fr"
-            autocomplete="email"
-            @blur="validateField('submitted_by_email')"
-          />
-          <span v-if="errors.submitted_by_email" class="error-msg" role="alert">
-            {{ errors.submitted_by_email }}
-          </span>
-        </div>
-
-        <!-- Erreur globale -->
-        <div v-if="serverError" class="server-error" role="alert">
-          <strong>Erreur :</strong> {{ serverError }}
-        </div>
-
-        <!-- Actions -->
-        <div class="form-actions">
-          <NuxtLink to="/" class="btn-secondary">Annuler</NuxtLink>
-          <button
-            type="submit"
-            class="btn-primary"
-            :disabled="submitting"
-          >
-            {{ submitting ? 'Envoi en cours...' : 'Proposer la fiche →' }}
-          </button>
-        </div>
-
-        <p class="form-note">
-          Ta fiche sera examinée par l'équipe avant publication.
-        </p>
-      </form>
-    </div>
-  </div>
+  <div />
 </template>
 
 <script setup lang="ts">
-import { z } from 'zod'
-
-// ── Constantes ────────────────────────────────────────────────────────────────
-
-const ECHELLES = ['National', 'Régional', 'Local'] as const
-const TERRITOIRES = ['Métropole', 'Guadeloupe', 'Martinique', 'Guyane', 'La Réunion', 'Mayotte'] as const
-const FONCTIONS = [
-  'Juridique', 'Technique', 'Économique', 'Administratif', 'Chantier',
-  'Comptabilité', 'Développement', 'Formation', 'Gestion d\'agence', 'Santé mentale',
-] as const
-
-// ── Schéma Zod (côté client — miroir du serveur) ──────────────────────────────
-
-const SubmitSchema = z.object({
-  nom: z.string().min(3, 'Minimum 3 caractères').max(150, 'Maximum 150 caractères').trim(),
-  url: z.string().url('URL invalide (commencer par https://)').optional().or(z.literal('')),
-  description_user: z.string().min(50, 'Minimum 50 caractères').max(500, 'Maximum 500 caractères').trim(),
-  echelle: z.enum(ECHELLES, { errorMap: () => ({ message: 'Sélectionne une échelle' }) }),
-  fonctions: z.array(z.string()).min(1, 'Sélectionne au moins une fonction').max(5, 'Maximum 5 fonctions'),
-  territoire: z.enum(TERRITOIRES, { errorMap: () => ({ message: 'Sélectionne un territoire' }) }),
-  localisation_ville: z.string().max(100).optional(),
-  submitted_by_email: z.string().email('Email invalide').optional().or(z.literal('')),
-})
-
-// ── État du formulaire ────────────────────────────────────────────────────────
-
-const form = reactive({
-  nom: '',
-  url: '',
-  description_user: '',
-  echelle: '' as typeof ECHELLES[number] | '',
-  fonctions: [] as string[],
-  territoire: '' as typeof TERRITOIRES[number] | '',
-  localisation_ville: '',
-  submitted_by_email: '',
-})
-
-const errors = reactive<Record<string, string>>({})
-const submitting = ref(false)
-const success = ref(false)
-const serverError = ref('')
-const trackingUrl = ref<string | null>(null)
-
-// ── Validation champ par champ ────────────────────────────────────────────────
-
-function validateField(field: string) {
-  const partial = SubmitSchema.partial()
-  const result = partial.safeParse({ [field]: (form as any)[field] })
-  if (!result.success) {
-    const fieldErrors = result.error.flatten().fieldErrors
-    errors[field] = fieldErrors[field]?.[0] ?? ''
-  } else {
-    delete errors[field]
-  }
-}
-
-function validateAll(): boolean {
-  const result = SubmitSchema.safeParse(form)
-  if (!result.success) {
-    const flat = result.error.flatten().fieldErrors
-    Object.assign(errors, Object.fromEntries(
-      Object.entries(flat).map(([k, v]) => [k, v?.[0] ?? ''])
-    ))
-    return false
-  }
-  Object.keys(errors).forEach(k => delete errors[k])
-  return true
-}
-
-// ── Gestion fonctions (ordre de clic = priorité) ──────────────────────────────
-
-function toggleFonction(fn: string) {
-  const idx = form.fonctions.indexOf(fn)
-  if (idx >= 0) {
-    form.fonctions.splice(idx, 1)
-  } else if (form.fonctions.length < 5) {
-    form.fonctions.push(fn)
-  }
-  validateField('fonctions')
-}
-
-// ── Soumission ────────────────────────────────────────────────────────────────
-
-async function submit() {
-  serverError.value = ''
-
-  if (!validateAll()) {
-    // Scroll vers la première erreur
-    await nextTick()
-    const firstError = document.querySelector('.field-error')
-    firstError?.scrollIntoView({ behavior: 'smooth', block: 'center' })
-    return
-  }
-
-  submitting.value = true
-
-  try {
-    const result: any = await $fetch('/api/submit', {
-      method: 'POST',
-      body: {
-        nom: form.nom,
-        url: form.url || undefined,
-        description_user: form.description_user,
-        echelle: form.echelle,
-        fonctions: form.fonctions,
-        territoire: form.territoire,
-        localisation_ville: form.localisation_ville || undefined,
-        submitted_by_email: form.submitted_by_email || undefined,
-      },
-    })
-
-    trackingUrl.value = result.trackingUrl ?? null
-    success.value = true
-  } catch (e: any) {
-    const status = e?.status ?? e?.statusCode
-    if (status === 429) {
-      serverError.value = 'Tu as déjà soumis 3 fiches aujourd\'hui. Réessaie demain.'
-    } else if (status === 422 && e?.data) {
-      // Erreurs Zod serveur → mapper sur le formulaire
-      const fieldErrors = e.data
-      Object.entries(fieldErrors).forEach(([k, v]) => {
-        errors[k] = Array.isArray(v) ? v[0] : String(v)
-      })
-      serverError.value = 'Certains champs sont invalides — vérifie les erreurs ci-dessus.'
-    } else {
-      serverError.value = 'Une erreur s\'est produite. Réessaie dans quelques instants.'
-    }
-  } finally {
-    submitting.value = false
-  }
-}
-
-function reset() {
-  Object.assign(form, {
-    nom: '', url: '', description_user: '', echelle: '',
-    fonctions: [], territoire: '', localisation_ville: '', submitted_by_email: '',
-  })
-  Object.keys(errors).forEach(k => delete errors[k])
-  success.value = false
-  serverError.value = ''
-  trackingUrl.value = null
-}
-
-// ── Meta ──────────────────────────────────────────────────────────────────────
-
-useHead({ title: 'Proposer une ressource — AEP' })
+navigateTo('/proposer', { redirectCode: 301 })
 </script>
-
-<style scoped>
-/* ── Layout ─────────────────────────────────────────────────────────────────── */
-
-.contribuer-page {
-  min-height: 100vh;
-  background: var(--nav-bg);
-  padding: 1.5rem 1rem 4rem;
-}
-
-.contribuer-inner {
-  max-width: 640px;
-  margin: 0 auto;
-}
-
-/* ── Retour ──────────────────────────────────────────────────────────────────── */
-
-.back-link {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.25rem;
-  font-size: 0.875rem;
-  color: var(--nav-primary-solid);
-  opacity: 0.7;
-  text-decoration: none;
-  margin-bottom: 1.5rem;
-  transition: opacity 0.15s;
-}
-
-.back-link:hover {
-  opacity: 1;
-}
-
-/* ── En-tête ─────────────────────────────────────────────────────────────────── */
-
-.contribuer-header {
-  margin-bottom: 2rem;
-}
-
-.contribuer-header h1 {
-  font-size: 1.5rem;
-  font-weight: 700;
-  color: var(--nav-text);
-  margin: 0 0 0.5rem;
-}
-
-.contribuer-subtitle {
-  font-size: 0.9rem;
-  color: var(--nav-text-muted);
-  line-height: 1.5;
-  margin: 0 0 0.5rem;
-}
-
-.contribuer-hint {
-  font-size: 0.82rem;
-  color: var(--nav-text-muted);
-  opacity: 0.75;
-  line-height: 1.5;
-  margin: 0;
-}
-
-/* ── Succès ──────────────────────────────────────────────────────────────────── */
-
-.success-block {
-  background: var(--nav-surface);
-  border: 1px solid rgba(26, 34, 56, 0.15);
-  border-radius: 12px;
-  padding: 2rem 1.5rem;
-  text-align: center;
-}
-
-.success-icon {
-  width: 48px;
-  height: 48px;
-  background: rgba(26, 34, 56, 0.1);
-  color: var(--nav-text);
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 1.25rem;
-  font-weight: 700;
-  margin: 0 auto 1rem;
-}
-
-.success-block h2 {
-  font-size: 1.25rem;
-  font-weight: 700;
-  color: var(--nav-text);
-  margin: 0 0 0.5rem;
-}
-
-.success-block p {
-  font-size: 0.9rem;
-  color: var(--nav-text-muted);
-  margin: 0 0 0.5rem;
-  line-height: 1.5;
-}
-
-.success-detail {
-  font-size: 0.85rem !important;
-}
-
-.success-tracking {
-  font-size: 0.85rem !important;
-  margin-top: 1rem !important;
-}
-
-.tracking-link {
-  color: var(--nav-primary-solid);
-  font-size: 0.8rem;
-  word-break: break-all;
-}
-
-/* ── Formulaire ──────────────────────────────────────────────────────────────── */
-
-.contribuer-form {
-  display: flex;
-  flex-direction: column;
-  gap: 1.25rem;
-}
-
-/* ── Champ générique ─────────────────────────────────────────────────────────── */
-
-.field-group {
-  display: flex;
-  flex-direction: column;
-  gap: 0.375rem;
-}
-
-.field-group label,
-.field-group legend {
-  font-size: 0.875rem;
-  font-weight: 600;
-  color: var(--nav-text);
-  display: block;
-}
-
-.field-group fieldset {
-  border: none;
-  padding: 0;
-  margin: 0;
-}
-
-.required {
-  color: #c0392b;
-}
-
-.label-hint {
-  font-weight: 400;
-  color: var(--nav-text-muted);
-  font-size: 0.8rem;
-  margin-left: 0.25rem;
-}
-
-.field-group input[type="text"],
-.field-group input[type="url"],
-.field-group input[type="email"],
-.field-group textarea {
-  width: 100%;
-  padding: 0.625rem 0.875rem;
-  border: 1px solid rgba(26, 34, 56, 0.2);
-  border-radius: 8px;
-  font-size: 0.9rem;
-  color: var(--nav-text);
-  background: var(--nav-surface);
-  font-family: inherit;
-  transition: border-color 0.15s, box-shadow 0.15s;
-  box-sizing: border-box;
-}
-
-.field-group input:focus,
-.field-group textarea:focus {
-  outline: none;
-  border-color: var(--nav-primary-solid);
-  box-shadow: 0 0 0 2px rgba(245, 179, 66, 0.4);
-}
-
-.field-group textarea {
-  resize: vertical;
-  min-height: 100px;
-}
-
-/* Erreur champ */
-
-.field-error input,
-.field-error textarea {
-  border-color: #c0392b !important;
-}
-
-.error-msg {
-  font-size: 0.8rem;
-  color: #c0392b;
-}
-
-.field-meta {
-  display: flex;
-  justify-content: flex-end;
-}
-
-.char-count {
-  font-size: 0.75rem;
-  color: var(--nav-text-muted);
-}
-
-.char-warn {
-  color: #e67e22;
-}
-
-/* ── Radio (Échelle + Territoire) ────────────────────────────────────────────── */
-
-.radio-group {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-  margin-top: 0.375rem;
-}
-
-.radio-label {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.375rem;
-  padding: 0.375rem 0.75rem;
-  border: 1px solid rgba(26, 34, 56, 0.2);
-  border-radius: 6px;
-  font-size: 0.85rem;
-  color: var(--nav-text);
-  background: var(--nav-surface);
-  cursor: pointer;
-  transition: all 0.15s;
-  user-select: none;
-}
-
-.radio-label input[type="radio"] {
-  position: absolute;
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-
-.radio-label:hover {
-  border-color: var(--nav-primary-solid);
-  background: var(--nav-bg-alt);
-}
-
-.radio-label.active {
-  background: var(--nav-primary);
-  border-color: transparent;
-  color: var(--nav-text-on-primary);
-}
-
-/* ── Checkboxes (Fonctions) ──────────────────────────────────────────────────── */
-
-.checkbox-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 0.5rem;
-  margin-top: 0.375rem;
-}
-
-@media (max-width: 400px) {
-  .checkbox-grid {
-    grid-template-columns: 1fr;
-  }
-}
-
-.checkbox-label {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.375rem;
-  padding: 0.375rem 0.75rem;
-  border: 1px solid rgba(26, 34, 56, 0.2);
-  border-radius: 6px;
-  font-size: 0.85rem;
-  color: var(--nav-text);
-  background: var(--nav-surface);
-  cursor: pointer;
-  transition: all 0.15s;
-  user-select: none;
-  position: relative;
-}
-
-.checkbox-label input[type="checkbox"] {
-  position: absolute;
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-
-.checkbox-label:hover:not(.disabled) {
-  border-color: var(--nav-primary-solid);
-  background: var(--nav-bg-alt);
-}
-
-.checkbox-label.active {
-  background: var(--nav-primary);
-  border-color: transparent;
-  color: var(--nav-text-on-primary);
-}
-
-.checkbox-label.disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
-
-.fn-order {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 18px;
-  height: 18px;
-  background: var(--nav-accent);
-  color: var(--nav-text);
-  border-radius: 50%;
-  font-size: 0.7rem;
-  font-weight: 700;
-  flex-shrink: 0;
-}
-
-/* ── Erreur serveur ──────────────────────────────────────────────────────────── */
-
-.server-error {
-  padding: 0.875rem 1rem;
-  background: #fdf0ee;
-  border: 1px solid #e74c3c;
-  border-radius: 8px;
-  font-size: 0.875rem;
-  color: #c0392b;
-}
-
-/* ── Actions ──────────────────────────────────────────────────────────────────── */
-
-.form-actions {
-  display: flex;
-  gap: 0.75rem;
-  justify-content: flex-end;
-  margin-top: 0.5rem;
-}
-
-.btn-primary {
-  padding: 0.75rem 1.5rem;
-  background: var(--nav-primary);
-  color: var(--nav-text-on-primary);
-  border: none;
-  border-radius: 8px;
-  font-size: 0.9rem;
-  font-weight: 600;
-  cursor: pointer;
-  font-family: inherit;
-  transition: background 0.15s, opacity 0.15s;
-}
-
-.btn-primary:hover:not(:disabled) {
-  background: rgba(26, 34, 56, 0.75);
-}
-
-.btn-primary:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.btn-secondary {
-  padding: 0.75rem 1.25rem;
-  background: transparent;
-  color: var(--nav-text-muted);
-  border: 1px solid rgba(26, 34, 56, 0.2);
-  border-radius: 8px;
-  font-size: 0.9rem;
-  cursor: pointer;
-  font-family: inherit;
-  text-decoration: none;
-  display: inline-flex;
-  align-items: center;
-  transition: border-color 0.15s, color 0.15s;
-}
-
-.btn-secondary:hover {
-  border-color: var(--nav-primary-solid);
-  color: var(--nav-text);
-}
-
-.form-note {
-  font-size: 0.75rem;
-  color: var(--nav-text-muted);
-  text-align: center;
-  margin: 0;
-}
-
-/* ── Responsive ──────────────────────────────────────────────────────────────── */
-
-@media (max-width: 480px) {
-  .contribuer-page {
-    padding: 1rem 0.75rem 3rem;
-  }
-
-  .form-actions {
-    flex-direction: column-reverse;
-  }
-
-  .btn-primary,
-  .btn-secondary {
-    width: 100%;
-    justify-content: center;
-  }
-}
-</style>
diff --git a/pages/proposer.vue b/pages/proposer.vue
new file mode 100644
index 0000000..83d753f
--- /dev/null
+++ b/pages/proposer.vue
@@ -0,0 +1,194 @@
+<template>
+  <div class="proposer-page">
+    <div class="proposer-inner">
+      <NuxtLink to="/" class="back-link">← Retour à la carte</NuxtLink>
+
+      <div class="proposer-header">
+        <h1>Proposer une ressource</h1>
+        <p class="proposer-subtitle">
+          Tu connais quelque chose d'utile qui n'est pas encore référencé sur AEP ?
+          Choisis la catégorie ci-dessous et soumets-le — on valide sous 7 jours.
+        </p>
+      </div>
+
+      <div v-if="success" class="success-block" role="status" aria-live="polite">
+        <div class="success-icon">✓</div>
+        <h2>Merci !</h2>
+        <p>Ta proposition est en attente de modération.</p>
+        <p class="success-detail">Jules valide manuellement chaque entrée avant publication.</p>
+        <button type="button" class="btn-secondary" @click="reset">Proposer autre chose</button>
+      </div>
+
+      <template v-else>
+        <div class="tabs-bar">
+          <button
+            v-for="tab in TABS"
+            :key="tab.id"
+            type="button"
+            class="tab-btn"
+            :class="{ 'tab-btn--active': activeTab === tab.id }"
+            @click="activeTab = tab.id"
+          >{{ tab.label }}</button>
+        </div>
+
+        <div class="tab-content">
+          <FormEcosysteme v-if="activeTab === 'ecosysteme'" @success="onSuccess" />
+          <FormReseau v-else-if="activeTab === 'reseau'" @success="onSuccess" />
+          <FormJobs v-else-if="activeTab === 'jobs'" @success="onSuccess" />
+          <FormOutils v-else-if="activeTab === 'outils'" @success="onSuccess" />
+          <FormReferences v-else-if="activeTab === 'references'" @success="onSuccess" />
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const TABS = [
+  { id: 'ecosysteme', label: 'Écosystème / Entraide' },
+  { id: 'reseau', label: 'Réseau AEP' },
+  { id: 'jobs', label: 'Jobs' },
+  { id: 'outils', label: 'Outils' },
+  { id: 'references', label: 'Références RAG' },
+] as const
+
+const activeTab = ref<string>('ecosysteme')
+const success = ref(false)
+
+function onSuccess() {
+  success.value = true
+}
+
+function reset() {
+  success.value = false
+  activeTab.value = 'ecosysteme'
+}
+
+useHead({ title: 'Proposer une ressource — AEP' })
+</script>
+
+<style scoped>
+.proposer-page {
+  min-height: 100vh;
+  background: var(--nav-bg);
+  padding: 1.5rem 1rem 4rem;
+}
+.proposer-inner {
+  max-width: 680px;
+  margin: 0 auto;
+}
+.back-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-size: 0.875rem;
+  color: var(--nav-primary-solid);
+  opacity: 0.7;
+  text-decoration: none;
+  margin-bottom: 1.5rem;
+  transition: opacity 0.15s;
+}
+.back-link:hover { opacity: 1; }
+.proposer-header { margin-bottom: 1.5rem; }
+.proposer-header h1 {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: var(--nav-text);
+  margin: 0 0 0.5rem;
+}
+.proposer-subtitle {
+  font-size: 0.9rem;
+  color: var(--nav-text-muted);
+  line-height: 1.5;
+  margin: 0;
+}
+
+.tabs-bar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+  margin-bottom: 1.5rem;
+  border-bottom: 1px solid var(--nav-bg-alt);
+  padding-bottom: 0;
+}
+.tab-btn {
+  padding: 0.5rem 0.9rem;
+  font-size: 0.8rem;
+  font-weight: 500;
+  color: var(--nav-text-muted);
+  background: transparent;
+  border: none;
+  border-bottom: 2px solid transparent;
+  cursor: pointer;
+  font-family: inherit;
+  transition: color 0.15s, border-color 0.15s;
+  white-space: nowrap;
+}
+.tab-btn:hover { color: var(--nav-text); }
+.tab-btn--active {
+  color: var(--nav-text);
+  border-bottom-color: var(--nav-primary-solid);
+  font-weight: 600;
+}
+.tab-content {
+  min-height: 300px;
+}
+
+.success-block {
+  background: var(--nav-surface);
+  border: 1px solid rgba(26, 34, 56, 0.15);
+  border-radius: 12px;
+  padding: 2rem 1.5rem;
+  text-align: center;
+}
+.success-icon {
+  width: 48px; height: 48px;
+  background: rgba(26, 34, 56, 0.1);
+  color: var(--nav-text);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.25rem;
+  font-weight: 700;
+  margin: 0 auto 1rem;
+}
+.success-block h2 {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: var(--nav-text);
+  margin: 0 0 0.5rem;
+}
+.success-block p {
+  font-size: 0.9rem;
+  color: var(--nav-text-muted);
+  margin: 0 0 0.5rem;
+  line-height: 1.5;
+}
+.success-detail { font-size: 0.85rem !important; }
+
+.btn-secondary {
+  padding: 0.75rem 1.25rem;
+  background: transparent;
+  color: var(--nav-text-muted);
+  border: 1px solid rgba(26, 34, 56, 0.2);
+  border-radius: 8px;
+  font-size: 0.9rem;
+  cursor: pointer;
+  font-family: inherit;
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  margin-top: 0.5rem;
+  transition: border-color 0.15s, color 0.15s;
+}
+.btn-secondary:hover {
+  border-color: var(--nav-primary-solid);
+  color: var(--nav-text);
+}
+
+@media (max-width: 480px) {
+  .proposer-page { padding: 1rem 0.75rem 3rem; }
+  .tabs-bar { overflow-x: auto; flex-wrap: nowrap; }
+}
+</style>
diff --git a/server/api/submit/index.post.ts b/server/api/submit/index.post.ts
index a9c4f77..ae0e66b 100644
--- a/server/api/submit/index.post.ts
+++ b/server/api/submit/index.post.ts
@@ -1,8 +1,8 @@
 /**
  * POST /api/submit
  *
- * Soumission d'une nouvelle organisation par un utilisateur.
- * - Validation Zod côté serveur
+ * Soumission multi-type (ecosysteme / reseau / job / outil).
+ * - Validation Zod côté serveur (champs communs + par type)
  * - Rate limit Redis : 3 soumissions / IP / jour
  * - Géocodage Nominatim (optionnel — fallback silencieux)
  * - INSERT NocoDB : moderation_status=pending, ai_processed=false
@@ -15,62 +15,49 @@
 import { z } from 'zod'
 import { checkRateLimit } from '~/server/utils/rateLimit'
 
-// ── Schéma Zod ────────────────────────────────────────────────────────────────
+const SUBMISSION_TYPES = ['ecosysteme', 'reseau', 'job', 'outil'] as const
 
 const FONCTIONS = [
-  'Juridique',
-  'Technique',
-  'Économique',
-  'Administratif',
-  'Chantier',
-  'Comptabilité',
-  'Développement',
-  'Formation',
-  'Gestion d\'agence',
-  'Santé mentale',
+  'Juridique', 'Technique', 'Économique', 'Administratif', 'Chantier',
+  'Comptabilité', 'Développement', 'Formation', 'Gestion d\'agence', 'Santé mentale',
 ] as const
 
 const ECHELLES = ['National', 'Régional', 'Local'] as const
 
 const TERRITOIRES = [
-  'Métropole',
-  'Guadeloupe',
-  'Martinique',
-  'Guyane',
-  'La Réunion',
-  'Mayotte',
+  'Métropole', 'Guadeloupe', 'Martinique', 'Guyane', 'La Réunion', 'Mayotte',
 ] as const
 
+const TYPES_PRINCIPAUX = ['agence', 'collectif', 'reseau', 'asso', 'ressource'] as const
+
+const TYPES_PLATEFORME = ['mise-en-relation', 'appel-offre-public', 'communaute-pro'] as const
+
+const CATEGORIES_OUTIL = ['simulateur', 'logiciel', 'guide', 'autre'] as const
+
 export const SubmitSchema = z.object({
+  // Champs communs
   nom: z.string().min(3, 'Minimum 3 caractères').max(150, 'Maximum 150 caractères').trim(),
-  url: z
-    .string()
-    .url('URL invalide')
-    .optional()
-    .or(z.literal(''))
-    .transform((v) => v || undefined),
-  description_user: z
-    .string()
-    .min(50, 'Minimum 50 caractères')
-    .max(500, 'Maximum 500 caractères')
-    .trim(),
-  echelle: z.enum(ECHELLES, { errorMap: () => ({ message: 'Échelle invalide' }) }),
-  fonctions: z
-    .array(z.enum(FONCTIONS))
-    .min(1, 'Sélectionne au moins une fonction')
-    .max(5, 'Maximum 5 fonctions'),
-  territoire: z.enum(TERRITOIRES, { errorMap: () => ({ message: 'Territoire invalide' }) }),
-  localisation_ville: z
-    .string()
-    .max(100)
-    .optional()
-    .transform((v) => v?.trim() || undefined),
-  submitted_by_email: z
-    .string()
-    .email('Email invalide')
-    .optional()
-    .or(z.literal(''))
-    .transform((v) => v || undefined),
+  url: z.string().url('URL invalide').optional().or(z.literal('')).transform(v => v || undefined),
+  description_user: z.string().min(50, 'Minimum 50 caractères').max(500, 'Maximum 500 caractères').trim(),
+  submitted_by_email: z.string().email('Email invalide').optional().or(z.literal('')).transform(v => v || undefined),
+  submission_type: z.enum(SUBMISSION_TYPES, { errorMap: () => ({ message: 'Type de soumission invalide' }) }),
+
+  // Champs écosystème
+  echelle: z.enum(ECHELLES).optional(),
+  fonctions: z.array(z.enum(FONCTIONS)).min(1).max(5).optional(),
+  territoire: z.enum(TERRITOIRES).optional(),
+  localisation_ville: z.string().max(100).optional().transform(v => v?.trim() || undefined),
+
+  // Champs réseau
+  type_principal: z.enum(TYPES_PRINCIPAUX).optional(),
+  projet_lien: z.string().url('URL invalide').optional().or(z.literal('')),
+  projet_adresse: z.string().max(200).optional().transform(v => v?.trim() || undefined),
+
+  // Champs job
+  type_plateforme: z.enum(TYPES_PLATEFORME).optional(),
+
+  // Champs outil
+  categorie: z.enum(CATEGORIES_OUTIL).optional(),
 })
 
 export type SubmitInput = z.infer<typeof SubmitSchema>
@@ -148,22 +135,36 @@ export default defineEventHandler(async (event) => {
   const nocoBaseId = config.nocodbBase
 
   const payload: Record<string, unknown> = {
+    submission_type: data.submission_type,
     nom: data.nom,
     url: data.url || null,
     description_user: data.description_user,
-    echelle: data.echelle,
-    tags_fonction: data.fonctions.join(','),
-    territoire: data.territoire,
-    localisation_ville: data.localisation_ville || null,
     submitted_by_email: data.submitted_by_email || null,
     moderation_status: 'pending',
-    scrape_status: data.url ? 'pending' : 'no_link',
     ai_processed: false,
     submitted_at: new Date().toISOString(),
     latitude,
     longitude,
   }
 
+  // Champs spécifiques selon le type
+  if (data.submission_type === 'ecosysteme') {
+    payload.echelle = data.echelle
+    payload.tags_fonction = data.fonctions?.join(',')
+    payload.territoire = data.territoire
+    payload.localisation_ville = data.localisation_ville || null
+    payload.scrape_status = data.url ? 'pending' : 'no_link'
+  } else if (data.submission_type === 'reseau') {
+    payload.type_principal = data.type_principal
+    payload.projet_lien = data.projet_lien || null
+    payload.projet_adresse = data.projet_adresse || null
+    payload.localisation_ville = data.localisation_ville || null
+  } else if (data.submission_type === 'job') {
+    payload.type_plateforme = data.type_plateforme
+  } else if (data.submission_type === 'outil') {
+    payload.categorie = data.categorie
+  }
+
   // NocoDB v1 endpoint
   const insertUrl = `${nocodbUrl}/api/v1/db/data/noco/${nocoBaseId}/${orgTableId}`
 
diff --git a/server/api/submit/reference.post.ts b/server/api/submit/reference.post.ts
new file mode 100644
index 0000000..0e08543
--- /dev/null
+++ b/server/api/submit/reference.post.ts
@@ -0,0 +1,74 @@
+import { z } from 'zod'
+import { checkRateLimit } from '~/server/utils/rateLimit'
+
+const ReferenceSchema = z.object({
+  titre: z.string().min(3, 'Minimum 3 caractères').max(200, 'Maximum 200 caractères').trim(),
+  auteur: z.string().min(2, 'Minimum 2 caractères').max(200, 'Maximum 200 caractères').trim(),
+  url: z.string().url('URL invalide').optional().or(z.literal('')).transform(v => v || undefined),
+  description: z.string().min(50, 'Minimum 50 caractères').max(1000, 'Maximum 1000 caractères').trim(),
+  pertinence_rag: z.string().max(500, 'Maximum 500 caractères').optional().transform(v => v?.trim() || undefined),
+  hashtags: z.string().max(300, 'Maximum 300 caractères').optional().transform(v => v?.trim() || undefined),
+  submitted_by_email: z.string().email('Email invalide').optional().or(z.literal('')).transform(v => v || undefined),
+})
+
+export type ReferenceInput = z.infer<typeof ReferenceSchema>
+
+export default defineEventHandler(async (event) => {
+  const ip = getHeader(event, 'x-forwarded-for')?.split(',')[0].trim() || event.node.req.socket?.remoteAddress || '0.0.0.0'
+
+  const allowed = await checkRateLimit(ip, 'submit-reference', 3)
+  if (!allowed) {
+    throw createError({ statusCode: 429, statusMessage: 'Trop de soumissions. Réessaie demain.' })
+  }
+
+  const body = await readBody(event)
+  const parsed = ReferenceSchema.safeParse(body)
+
+  if (!parsed.success) {
+    throw createError({
+      statusCode: 422,
+      statusMessage: 'Validation échouée',
+      data: parsed.error.flatten().fieldErrors,
+    })
+  }
+
+  const data = parsed.data
+
+  const payload: Record<string, unknown> = {
+    titre: data.titre,
+    auteur: data.auteur,
+    url: data.url || null,
+    description: data.description,
+    pertinence_rag: data.pertinence_rag || null,
+    hashtags: data.hashtags ? data.hashtags.split(',').map(h => h.trim()).filter(Boolean).join(',') : null,
+    submitted_by_email: data.submitted_by_email || null,
+    moderation_status: 'pending',
+    submitted_at: new Date().toISOString(),
+  }
+
+  const config = useRuntimeConfig()
+  const insertUrl = `${config.nocodbUrl}/api/v1/db/data/noco/${config.nocodbBase}/${config.referencesTableId}`
+
+  let insertedRecord: any
+  try {
+    insertedRecord = await $fetch(insertUrl, {
+      method: 'POST',
+      headers: {
+        'xc-token': config.nocodbToken,
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(payload),
+    })
+  } catch (e: any) {
+    console.error('[reference] Erreur NocoDB insert:', e?.message ?? e)
+    throw createError({ statusCode: 502, statusMessage: 'Erreur serveur — réessaie dans quelques instants.' })
+  }
+
+  const referenceId = insertedRecord?.Id ?? insertedRecord?.id ?? null
+
+  return {
+    status: 201,
+    referenceId,
+    message: 'Ta référence est en attente de modération.',
+  }
+})