From 2a2eb5d9de5966eb934f139af3e0faa98ea0f7be Mon Sep 17 00:00:00 2001
From: tbeaumont79 <tbeaumont79@icloud.com>
Date: Sun, 21 Jun 2026 20:45:58 +0200
Subject: [PATCH] =?UTF-8?q?feat(candidatures):=20=C3=A9diteur=20de=20CV=20?=
 =?UTF-8?q?in-app,=20suivi,=20design=20par-CV=20&=20comp=C3=A9tences=20cl?=
 =?UTF-8?q?=C3=A9s?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Parcours complet : import/profil → offre → match → génération → édition → export,
avec persistance des candidatures (plus de perte au changement d'onglet).

Persistance & suivi
- Modèle Candidature (statuts brouillon→postulé→entretien→refusé/accepté),
  endpoints list/detail/patch/delete, page de suivi /candidatures.
- La génération persiste le CV et redirige vers l'éditeur.

Éditeur in-app (/candidatures/:id)
- Édition contenu (sections, textes, ordre, ajout/suppression) provenance-safe,
  aperçu live débouncé, sauvegarde, statut, export PDF, suppression.
- Apparence : disposition, couleurs, police, et tokens photo
  (position, taille en px, marge, padding, rayon sidebar).
- Recadrage interactif de la photo (déplacer + zoomer), sortie nette.

Compétences clés (phrases verbe d'action)
- Stockées au profil, extraites du CV importé, injectées au-dessus des
  expériences et ADAPTÉES à l'offre sans rien inventer (repli verbatim).

Profil
- Identité complète, langues, formations, « CV de base » (design + contenu)
  extrait d'un PDF ; import dédupliqué (plus de doublons au ré-import).

Rendu
- Gabarit maîtrisé + tokens (cv-html), export forcé sur 1 page (cut),
  élagage des sections vides, validation/bornage des tokens côté serveur.

Tests : 118 (app) + 6 (shared) ; typecheck clean. Page /ui supprimée.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .gitignore                                    |    1 +
 apps/app/.env.example                         |    4 +
 apps/app/components/cv/CvDesignPanel.vue      |  104 ++
 apps/app/components/cv/CvPhotoInput.vue       |  249 ++++
 apps/app/components/cv/CvTemplate.vue         |   34 +
 apps/app/layouts/default.vue                  |   17 +-
 apps/app/pages/candidature.vue                |  114 +-
 apps/app/pages/candidatures/[id].vue          |  611 ++++++++++
 apps/app/pages/candidatures/index.vue         |  106 ++
 apps/app/pages/profil.vue                     | 1004 ++++++++++++++++-
 apps/app/pages/ui.vue                         |  373 ------
 .../migration.sql                             |    6 +
 .../migration.sql                             |   25 +
 .../migration.sql                             |    2 +
 .../20260619122800_candidatures/migration.sql |   26 +
 .../migration.sql                             |    2 +
 apps/app/prisma/schema.prisma                 |   75 ++
 .../server/api/candidature/analyze.post.ts    |    1 +
 .../server/api/candidature/generate.post.ts   |  117 +-
 .../server/api/candidatures/[id].delete.ts    |   21 +
 apps/app/server/api/candidatures/[id].get.ts  |   19 +
 .../app/server/api/candidatures/[id].patch.ts |   54 +
 apps/app/server/api/candidatures/index.get.ts |   18 +
 apps/app/server/api/cv/export-pdf.post.ts     |   60 +-
 apps/app/server/api/cv/preview.post.ts        |   19 +
 .../server/api/profile/cv-design.delete.ts    |   20 +
 apps/app/server/api/profile/cv-design.put.ts  |   27 +
 .../api/profile/cv-design/extract.post.ts     |   72 ++
 apps/app/server/api/profile/education.post.ts |   44 +
 .../api/profile/education/[id].delete.ts      |   22 +
 .../server/api/profile/experiences.post.ts    |    2 +-
 apps/app/server/api/profile/index.get.ts      |    1 +
 apps/app/server/api/profile/index.put.ts      |   30 +-
 apps/app/server/api/profile/languages.post.ts |   41 +
 .../api/profile/languages/[id].delete.ts      |   22 +
 apps/app/server/api/usage/current.get.ts      |   10 +-
 .../app/server/services/cv-content-extract.ts |  162 +++
 apps/app/server/services/cv-design-extract.ts |   60 +
 apps/app/server/services/keyskills-adapt.ts   |   64 ++
 apps/app/server/services/matching.ts          |  194 +++-
 apps/app/server/utils/anthropic.ts            |   34 +-
 .../app/server/utils/candidature-serialize.ts |   54 +
 apps/app/server/utils/cv-design-tokens.ts     |   90 ++
 apps/app/server/utils/cv-design.ts            |   26 +
 apps/app/server/utils/cv-html.ts              |  282 +++--
 apps/app/server/utils/cv-render-input.ts      |   78 ++
 apps/app/server/utils/pdf.ts                  |   21 +-
 apps/app/server/utils/profile-serialize.ts    |   30 +-
 apps/app/test/candidature-serialize.spec.ts   |   46 +
 apps/app/test/cv-content-extract.spec.ts      |   50 +
 apps/app/test/cv-design-extract.spec.ts       |   46 +
 apps/app/test/cv-design-tokens.spec.ts        |   71 ++
 apps/app/test/cv-html.spec.ts                 |  158 ++-
 apps/app/test/cv-render-input.spec.ts         |   65 ++
 apps/app/test/keyskills-adapt.spec.ts         |   40 +
 apps/app/test/match-contracts.spec.ts         |    8 +
 apps/app/test/match-report.spec.ts            |    8 +
 apps/app/test/matching.spec.ts                |    8 +
 apps/app/test/photo-crop.spec.ts              |   44 +
 apps/app/test/profile-serialize.spec.ts       |   17 +
 apps/app/utils/photo-crop.ts                  |   48 +
 packages/shared/src/candidature.ts            |   56 +
 packages/shared/src/cv.ts                     |   59 +
 packages/shared/src/fixtures/sample-cv.ts     |    2 +-
 packages/shared/src/index.ts                  |   15 +-
 packages/shared/src/match.ts                  |   14 +-
 packages/shared/src/offer.ts                  |    7 +-
 packages/shared/src/profile.ts                |   70 ++
 packages/shared/src/provenance.ts             |    4 +-
 69 files changed, 4604 insertions(+), 680 deletions(-)
 create mode 100644 apps/app/components/cv/CvDesignPanel.vue
 create mode 100644 apps/app/components/cv/CvPhotoInput.vue
 create mode 100644 apps/app/pages/candidatures/[id].vue
 create mode 100644 apps/app/pages/candidatures/index.vue
 delete mode 100644 apps/app/pages/ui.vue
 create mode 100644 apps/app/prisma/migrations/20260619075016_profile_identity/migration.sql
 create mode 100644 apps/app/prisma/migrations/20260619082630_profile_languages/migration.sql
 create mode 100644 apps/app/prisma/migrations/20260619083557_profile_base_cv_design/migration.sql
 create mode 100644 apps/app/prisma/migrations/20260619122800_candidatures/migration.sql
 create mode 100644 apps/app/prisma/migrations/20260619133422_profile_key_skills/migration.sql
 create mode 100644 apps/app/server/api/candidatures/[id].delete.ts
 create mode 100644 apps/app/server/api/candidatures/[id].get.ts
 create mode 100644 apps/app/server/api/candidatures/[id].patch.ts
 create mode 100644 apps/app/server/api/candidatures/index.get.ts
 create mode 100644 apps/app/server/api/cv/preview.post.ts
 create mode 100644 apps/app/server/api/profile/cv-design.delete.ts
 create mode 100644 apps/app/server/api/profile/cv-design.put.ts
 create mode 100644 apps/app/server/api/profile/cv-design/extract.post.ts
 create mode 100644 apps/app/server/api/profile/education.post.ts
 create mode 100644 apps/app/server/api/profile/education/[id].delete.ts
 create mode 100644 apps/app/server/api/profile/languages.post.ts
 create mode 100644 apps/app/server/api/profile/languages/[id].delete.ts
 create mode 100644 apps/app/server/services/cv-content-extract.ts
 create mode 100644 apps/app/server/services/cv-design-extract.ts
 create mode 100644 apps/app/server/services/keyskills-adapt.ts
 create mode 100644 apps/app/server/utils/candidature-serialize.ts
 create mode 100644 apps/app/server/utils/cv-design-tokens.ts
 create mode 100644 apps/app/server/utils/cv-design.ts
 create mode 100644 apps/app/server/utils/cv-render-input.ts
 create mode 100644 apps/app/test/candidature-serialize.spec.ts
 create mode 100644 apps/app/test/cv-content-extract.spec.ts
 create mode 100644 apps/app/test/cv-design-extract.spec.ts
 create mode 100644 apps/app/test/cv-design-tokens.spec.ts
 create mode 100644 apps/app/test/cv-render-input.spec.ts
 create mode 100644 apps/app/test/keyskills-adapt.spec.ts
 create mode 100644 apps/app/test/photo-crop.spec.ts
 create mode 100644 apps/app/utils/photo-crop.ts
 create mode 100644 packages/shared/src/candidature.ts

diff --git a/.gitignore b/.gitignore
index acef788..394abb2 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,6 +3,7 @@ node_modules/
 .pnpm-store/
 
 # Nuxt
+.nuxt/
 apps/app/.nuxt/
 apps/app/.output/
 apps/app/.data/
diff --git a/apps/app/.env.example b/apps/app/.env.example
index df25a2f..f232577 100644
--- a/apps/app/.env.example
+++ b/apps/app/.env.example
@@ -14,6 +14,10 @@ APP_URL=http://localhost:3000
 # (THI-124 / flux candidature). Sans cette clé, /api/candidature/* répond 502.
 ANTHROPIC_API_KEY=sk-ant-changeme
 
+# Dev uniquement : si "true", désactive le quota de générations gratuites
+# (le modèle freemium reste codé ; à ne PAS activer en prod).
+# DISABLE_GENERATION_LIMIT=true
+
 # SMTP (optionnel en dev — si absent, le magic-link est loggé dans la console).
 # SMTP_HOST=smtp.example.fr
 # SMTP_PORT=587
diff --git a/apps/app/components/cv/CvDesignPanel.vue b/apps/app/components/cv/CvDesignPanel.vue
new file mode 100644
index 0000000..2d37b9e
--- /dev/null
+++ b/apps/app/components/cv/CvDesignPanel.vue
@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import type { CvDesign } from '@cvo/shared'
+
+// Le modèle est l'objet design entier ; on mute ses champs (deep watch parent).
+const design = defineModel<CvDesign>({ required: true })
+
+/** Polices Google proposées (alignées sur sanitizeFont : lettres/espaces/-). */
+const FONTS = ['Inter', 'Poppins', 'Lato', 'Roboto', 'Montserrat', 'Open Sans', 'Work Sans', 'Merriweather', 'Playfair Display']
+</script>
+
+<template>
+  <div class="space-y-4">
+    <!-- Disposition -->
+    <div class="flex flex-col gap-1.5">
+      <span class="text-sm font-medium text-ink-700">Disposition</span>
+      <div class="flex gap-2">
+        <button
+          type="button"
+          class="flex-1 rounded-control px-3 py-2 text-sm ring-1 transition"
+          :class="design.layout === 'single' ? 'bg-brand-50 text-brand-700 ring-brand-300' : 'bg-surface text-ink-600 ring-border hover:bg-ink-50'"
+          @click="design.layout = 'single'"
+        >
+          1 colonne
+        </button>
+        <button
+          type="button"
+          class="flex-1 rounded-control px-3 py-2 text-sm ring-1 transition"
+          :class="design.layout === 'sidebar-left' ? 'bg-brand-50 text-brand-700 ring-brand-300' : 'bg-surface text-ink-600 ring-border hover:bg-ink-50'"
+          @click="design.layout = 'sidebar-left'"
+        >
+          Sidebar
+        </button>
+      </div>
+    </div>
+
+    <!-- Couleurs -->
+    <div class="grid grid-cols-3 gap-3">
+      <label class="flex flex-col gap-1.5 text-sm text-ink-700">
+        Accent
+        <input v-model="design.accent" type="color" class="h-9 w-full cursor-pointer rounded-control ring-1 ring-border" />
+      </label>
+      <label v-if="design.layout === 'sidebar-left'" class="flex flex-col gap-1.5 text-sm text-ink-700">
+        Fond sidebar
+        <input v-model="design.sidebarBg" type="color" class="h-9 w-full cursor-pointer rounded-control ring-1 ring-border" />
+      </label>
+      <label v-if="design.layout === 'sidebar-left'" class="flex flex-col gap-1.5 text-sm text-ink-700">
+        Texte sidebar
+        <input v-model="design.sidebarFg" type="color" class="h-9 w-full cursor-pointer rounded-control ring-1 ring-border" />
+      </label>
+    </div>
+
+    <!-- Arrondi de la sidebar -->
+    <label v-if="design.layout === 'sidebar-left'" class="flex flex-col gap-1.5 text-sm font-medium text-ink-700">
+      Arrondi sidebar · {{ design.sidebarRadius ?? 0 }} mm
+      <input v-model.number="design.sidebarRadius" type="range" min="0" max="12" step="1" class="w-full accent-brand-600" />
+    </label>
+
+    <!-- Photo -->
+    <div class="grid grid-cols-2 gap-3">
+      <label class="flex flex-col gap-1.5 text-sm font-medium text-ink-700">
+        Photo — emplacement
+        <select
+          :value="design.photoPosition ?? 'header-right'"
+          class="h-10 rounded-control bg-surface px-3 text-sm text-ink-900 ring-1 ring-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500"
+          @change="design.photoPosition = ($event.target as HTMLSelectElement).value as 'header-right' | 'header-left' | 'sidebar'"
+        >
+          <option value="header-right">En-tête droite</option>
+          <option value="header-left">En-tête gauche</option>
+          <option value="sidebar">Sidebar</option>
+        </select>
+      </label>
+      <label class="flex flex-col gap-1.5 text-sm font-medium text-ink-700">
+        Photo — taille · {{ design.photoSize ?? 128 }} px
+        <input v-model.number="design.photoSize" type="range" min="64" max="360" step="4" class="w-full accent-brand-600" />
+      </label>
+    </div>
+
+    <!-- Marge de la photo au bord (en-tête) : 0 = bord à bord -->
+    <label class="flex flex-col gap-1.5 text-sm font-medium text-ink-700">
+      Photo — marge au bord · {{ design.photoMargin ?? 14 }} mm
+      <input v-model.number="design.photoMargin" type="range" min="0" max="16" step="1" class="w-full accent-brand-600" />
+      <span class="text-xs font-normal text-ink-400">0 = bord à bord (en-tête gauche/droite)</span>
+    </label>
+
+    <!-- Padding intérieur de la photo : espace autour de l'image dans sa case -->
+    <label class="flex flex-col gap-1.5 text-sm font-medium text-ink-700">
+      Photo — marge intérieure · {{ design.photoPadding ?? 0 }} mm
+      <input v-model.number="design.photoPadding" type="range" min="0" max="8" step="1" class="w-full accent-brand-600" />
+    </label>
+
+    <!-- Police -->
+    <label class="flex flex-col gap-1.5 text-sm font-medium text-ink-700">
+      Police
+      <select
+        :value="design.font ?? ''"
+        class="h-10 rounded-control bg-surface px-3 text-sm text-ink-900 ring-1 ring-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500"
+        @change="design.font = ($event.target as HTMLSelectElement).value || null"
+      >
+        <option value="">Par défaut</option>
+        <option v-for="f in FONTS" :key="f" :value="f">{{ f }}</option>
+      </select>
+    </label>
+  </div>
+</template>
diff --git a/apps/app/components/cv/CvPhotoInput.vue b/apps/app/components/cv/CvPhotoInput.vue
new file mode 100644
index 0000000..327217d
--- /dev/null
+++ b/apps/app/components/cv/CvPhotoInput.vue
@@ -0,0 +1,249 @@
+<script setup lang="ts">
+import { Upload, X, Crop, Check } from '@lucide/vue'
+import { fitCropSide, cropSideForZoom, clampCrop } from '../../utils/photo-crop'
+
+// data-URL carrée de la photo (ou null/undefined), recadrée côté client.
+const photo = defineModel<string | null | undefined>({ default: null })
+
+const input = ref<HTMLInputElement | null>(null)
+const busy = ref(false)
+
+// ─── État du recadrage ───────────────────────────────────────────────────────
+// Bornes de la résolution de sortie : on garde la résolution NATIVE du recadrage
+// (1:1, le plus net) entre MIN et MAX, sans agrandir une source plus petite.
+const MIN_OUTPUT = 256
+const MAX_OUTPUT = 768 // ~205 DPI à la taille max → net, et data-URL sous le plafond serveur
+const MAX_DATAURL_CHARS = 620_000 // marge sous le plafond serveur (700k) de sanitizeDataImage
+const VIEW = 256 // côté du viewport d'aperçu (px) — h-64 w-64
+
+const cropping = ref(false)
+/** Image source de la session (data-URL) : permet de re-recadrer sans ré-importer. */
+const originalSrc = ref<string | null>(null)
+const cropSrc = ref<string | null>(null) // source affichée dans le cropper
+const sourceImg = ref<HTMLImageElement | null>(null) // image décodée (pour le dessin)
+const naturalW = ref(0)
+const naturalH = ref(0)
+const zoom = ref(1) // [1, 3]
+const cropSide = ref(0) // côté du carré, en px source
+const cropX = ref(0)
+const cropY = ref(0)
+
+const displayScale = computed(() => (cropSide.value > 0 ? VIEW / cropSide.value : 1))
+
+/** Style de l'image dans le viewport : taille naturelle × échelle, translatée. */
+const imgStyle = computed(() => ({
+  width: `${naturalW.value * displayScale.value}px`,
+  height: `${naturalH.value * displayScale.value}px`,
+  transform: `translate(${-cropX.value * displayScale.value}px, ${-cropY.value * displayScale.value}px)`,
+}))
+
+/** Décode une data-URL et ouvre le cropper centré (zoom 1 = cover). */
+function openCropper(src: string) {
+  const img = new Image()
+  img.onload = () => {
+    sourceImg.value = img
+    naturalW.value = img.naturalWidth
+    naturalH.value = img.naturalHeight
+    zoom.value = 1 // zoom min = image entière (pas de recadrage imposé par défaut)
+    cropSide.value = fitCropSide(img.naturalWidth, img.naturalHeight)
+    const c = clampCrop(
+      naturalW.value,
+      naturalH.value,
+      cropSide.value,
+      (naturalW.value - cropSide.value) / 2,
+      (naturalH.value - cropSide.value) / 2,
+    )
+    cropX.value = c.x
+    cropY.value = c.y
+    cropSrc.value = src
+    cropping.value = true
+  }
+  img.src = src
+}
+
+async function onChange(e: Event) {
+  const file = (e.target as HTMLInputElement).files?.[0]
+  if (!file) return
+  busy.value = true
+  try {
+    const dataUrl = await new Promise<string>((resolve, reject) => {
+      const reader = new FileReader()
+      reader.onerror = () => reject(new Error('read'))
+      reader.onload = () => resolve(reader.result as string)
+      reader.readAsDataURL(file)
+    })
+    originalSrc.value = dataUrl
+    openCropper(dataUrl)
+  } catch {
+    /* ignore : photo inchangée */
+  } finally {
+    busy.value = false
+    if (input.value) input.value.value = ''
+  }
+}
+
+/** Rouvre le cropper : depuis l'original si dispo (session), sinon le carré stocké. */
+function reopenCropper() {
+  const src = originalSrc.value ?? photo.value
+  if (src) openCropper(src)
+}
+
+// ─── Zoom (recentré) ──────────────────────────────────────────────────────────
+function setZoom(next: number) {
+  const oldSide = cropSide.value
+  const centerX = cropX.value + oldSide / 2
+  const centerY = cropY.value + oldSide / 2
+  zoom.value = next
+  cropSide.value = cropSideForZoom(naturalW.value, naturalH.value, next)
+  const c = clampCrop(naturalW.value, naturalH.value, cropSide.value, centerX - cropSide.value / 2, centerY - cropSide.value / 2)
+  cropX.value = c.x
+  cropY.value = c.y
+}
+function onZoomInput(e: Event) {
+  setZoom(Number((e.target as HTMLInputElement).value) / 100)
+}
+function onWheel(e: WheelEvent) {
+  if (dragging.value) return // évite un saut : ancrage du drag figé au pointerdown
+  const next = Math.min(4, Math.max(1, zoom.value + (e.deltaY < 0 ? 0.1 : -0.1)))
+  setZoom(next)
+}
+
+// ─── Déplacement (Pointer Events : souris + tactile) ──────────────────────────
+const dragging = ref(false)
+let startX = 0
+let startY = 0
+let startCropX = 0
+let startCropY = 0
+
+function onPointerDown(e: PointerEvent) {
+  dragging.value = true
+  startX = e.clientX
+  startY = e.clientY
+  startCropX = cropX.value
+  startCropY = cropY.value
+  try {
+    ;(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId)
+  } catch {
+    /* capture non critique : le drag fonctionne sans */
+  }
+}
+function onPointerMove(e: PointerEvent) {
+  if (!dragging.value) return
+  const dx = (e.clientX - startX) / displayScale.value
+  const dy = (e.clientY - startY) / displayScale.value
+  const c = clampCrop(naturalW.value, naturalH.value, cropSide.value, startCropX - dx, startCropY - dy)
+  cropX.value = c.x
+  cropY.value = c.y
+}
+function onPointerUp() {
+  dragging.value = false
+}
+
+// ─── Validation / annulation ──────────────────────────────────────────────────
+function applyCrop() {
+  const img = sourceImg.value
+  if (!img) return
+  // Résolution de sortie = taille native du recadrage (1:1, le plus net), bornée.
+  const out = Math.min(MAX_OUTPUT, Math.max(MIN_OUTPUT, Math.round(cropSide.value)))
+  const canvas = document.createElement('canvas')
+  canvas.width = out
+  canvas.height = out
+  const ctx = canvas.getContext('2d')
+  if (!ctx) return
+  // Comble les marges (si l'image ne remplit pas le carré) en blanc — le JPEG n'a
+  // pas d'alpha, sans ce fond les zones non couvertes seraient noires.
+  ctx.fillStyle = '#ffffff'
+  ctx.fillRect(0, 0, out, out)
+  ctx.drawImage(img, cropX.value, cropY.value, cropSide.value, cropSide.value, 0, 0, out, out)
+  // Encode en JPEG en restant sous le plafond serveur : baisse la qualité si besoin.
+  let url = canvas.toDataURL('image/jpeg', 0.92)
+  for (const q of [0.85, 0.78, 0.7]) {
+    if (url.length <= MAX_DATAURL_CHARS) break
+    url = canvas.toDataURL('image/jpeg', q)
+  }
+  photo.value = url
+  closeCropper()
+}
+function cancelCrop() {
+  closeCropper()
+}
+/** Ferme le cropper et libère l'image décodée (on garde `originalSrc` pour la session). */
+function closeCropper() {
+  cropping.value = false
+  sourceImg.value = null
+  cropSrc.value = null
+}
+function removePhoto() {
+  photo.value = null
+  originalSrc.value = null
+  closeCropper()
+}
+</script>
+
+<template>
+  <div class="space-y-3">
+    <!-- Cropper -->
+    <div v-if="cropping" class="space-y-3">
+      <div
+        class="relative mx-auto h-64 w-64 cursor-move touch-none overflow-hidden rounded-card bg-white ring-1 ring-border"
+        role="img"
+        aria-label="Zone de recadrage — fais glisser pour déplacer"
+        @pointerdown="onPointerDown"
+        @pointermove="onPointerMove"
+        @pointerup="onPointerUp"
+        @pointercancel="onPointerUp"
+        @wheel.prevent="onWheel"
+      >
+        <img
+          v-if="cropSrc"
+          :src="cropSrc"
+          alt=""
+          draggable="false"
+          class="max-w-none origin-top-left select-none"
+          :style="imgStyle"
+        />
+      </div>
+
+      <label class="block text-sm font-medium text-ink-700">
+        Zoom
+        <input
+          type="range"
+          min="100"
+          max="400"
+          step="1"
+          :value="Math.round(zoom * 100)"
+          class="mt-1 w-full accent-brand-600"
+          @input="onZoomInput"
+        />
+      </label>
+
+      <div class="flex items-center gap-2">
+        <UiButton size="sm" @click="applyCrop">
+          <Check class="h-4 w-4" :stroke-width="2" aria-hidden="true" /> Valider le recadrage
+        </UiButton>
+        <UiButton variant="ghost" size="sm" @click="cancelCrop">Annuler</UiButton>
+      </div>
+    </div>
+
+    <!-- Aperçu + actions -->
+    <div v-else class="flex items-center gap-3">
+      <div
+        class="flex h-16 w-16 shrink-0 items-center justify-center overflow-hidden rounded-control bg-ink-100 ring-1 ring-border"
+        aria-hidden="true"
+      >
+        <img v-if="photo" :src="photo" alt="" class="h-full w-full object-cover" />
+        <Upload v-else class="h-5 w-5 text-ink-400" :stroke-width="1.75" />
+      </div>
+      <input ref="input" type="file" accept="image/png,image/jpeg,image/webp" class="sr-only" @change="onChange" />
+      <UiButton variant="secondary" size="sm" :loading="busy" @click="input?.click()">
+        {{ photo ? 'Changer la photo' : 'Ajouter une photo' }}
+      </UiButton>
+      <UiButton v-if="photo" variant="secondary" size="sm" @click="reopenCropper">
+        <Crop class="h-4 w-4" :stroke-width="2" aria-hidden="true" /> Recadrer
+      </UiButton>
+      <UiButton v-if="photo" variant="ghost" size="sm" aria-label="Retirer la photo" @click="removePhoto">
+        <X class="h-4 w-4" :stroke-width="2" aria-hidden="true" />
+      </UiButton>
+    </div>
+  </div>
+</template>
diff --git a/apps/app/components/cv/CvTemplate.vue b/apps/app/components/cv/CvTemplate.vue
index 0624804..50f7be9 100644
--- a/apps/app/components/cv/CvTemplate.vue
+++ b/apps/app/components/cv/CvTemplate.vue
@@ -18,6 +18,12 @@ function isEducation(s: CvSection): s is Extract<CvSection, { kind: 'education'
 function isSummary(s: CvSection): s is Extract<CvSection, { kind: 'summary' }> {
   return s.kind === 'summary'
 }
+function isKeySkills(s: CvSection): s is Extract<CvSection, { kind: 'keyskills' }> {
+  return s.kind === 'keyskills'
+}
+function isLanguages(s: CvSection): s is Extract<CvSection, { kind: 'languages' }> {
+  return s.kind === 'languages'
+}
 </script>
 
 <template>
@@ -116,6 +122,20 @@ function isSummary(s: CvSection): s is Extract<CvSection, { kind: 'summary' }> {
           {{ section.text }}
         </p>
 
+        <!-- Compétences clés (phrases) -->
+        <ul
+          v-else-if="isKeySkills(section)"
+          class="list-disc space-y-1 pl-4"
+        >
+          <li
+            v-for="entry in section.entries"
+            :key="entry.id"
+            class="text-sm leading-relaxed text-ink-700 marker:text-brand-500"
+          >
+            {{ entry.text }}
+          </li>
+        </ul>
+
         <!-- Expériences -->
         <div
           v-else-if="isExperience(section)"
@@ -179,6 +199,20 @@ function isSummary(s: CvSection): s is Extract<CvSection, { kind: 'summary' }> {
             <p class="shrink-0 text-xs text-ink-500">{{ entry.period }}</p>
           </div>
         </div>
+
+        <!-- Langues -->
+        <ul
+          v-else-if="isLanguages(section)"
+          class="flex flex-wrap gap-2"
+        >
+          <li
+            v-for="entry in section.entries"
+            :key="entry.id"
+            class="rounded-card bg-brand-50 px-3 py-1 text-xs font-medium text-brand-700"
+          >
+            {{ entry.label }}<span v-if="entry.level" class="font-normal text-brand-500"> · {{ entry.level }}</span>
+          </li>
+        </ul>
       </section>
     </main>
   </article>
diff --git a/apps/app/layouts/default.vue b/apps/app/layouts/default.vue
index 98a29ec..74a2e9b 100644
--- a/apps/app/layouts/default.vue
+++ b/apps/app/layouts/default.vue
@@ -18,11 +18,10 @@ const userInitial = computed(() => user.value?.email?.charAt(0)?.toUpperCase() ?
 const navLinks = [
   { label: 'Nouvelle candidature', to: '/candidature' },
   { label: 'Mon profil', to: '/profil' },
-  { label: 'Mon CV', to: '/cv/demo' },
+  { label: 'Mes candidatures', to: '/candidatures' },
 ] as const
 
 function isActive(to: string) {
-  if (to === '/cv/demo') return route.path.startsWith('/cv')
   return route.path === to || route.path.startsWith(`${to}/`)
 }
 
@@ -116,20 +115,6 @@ const year = new Date().getFullYear()
                 {{ link.label }}
               </NuxtLink>
             </template>
-
-            <NuxtLink
-              v-if="isDev"
-              to="/ui"
-              class="rounded-control px-3 py-1.5 text-sm font-medium transition-colors duration-300 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500"
-              :class="
-                isActive('/ui')
-                  ? 'bg-brand-50 text-brand-700'
-                  : 'text-ink-600 hover:bg-surface-muted hover:text-ink-900'
-              "
-              :aria-current="isActive('/ui') ? 'page' : undefined"
-            >
-              Design system
-            </NuxtLink>
           </nav>
         </div>
 
diff --git a/apps/app/pages/candidature.vue b/apps/app/pages/candidature.vue
index 96d44bb..39e95ef 100644
--- a/apps/app/pages/candidature.vue
+++ b/apps/app/pages/candidature.vue
@@ -3,8 +3,8 @@ import type {
   AnalyzeCandidatureRequest,
   AnalyzeCandidatureResponse,
   GenerateCandidatureRequest,
+  GenerateCandidatureResponse,
   ProfileDTO,
-  RenderableCv,
   UsageSummary,
 } from '@cvo/shared'
 import {
@@ -15,7 +15,7 @@ import {
   matchVerdict,
 } from '@cvo/shared'
 import type { MatchVerdict } from '@cvo/shared'
-import { ChevronRight, Download, RotateCcw, ShieldCheck, TriangleAlert } from '@lucide/vue'
+import { ChevronRight, TriangleAlert } from '@lucide/vue'
 
 definePageMeta({ middleware: 'auth' })
 
@@ -23,13 +23,14 @@ const toast = useToast()
 
 // ─── Machine à états du parcours ─────────────────────────────────────────────
 
-type Step = 'input' | 'analyzing' | 'scored' | 'generating' | 'done'
+// Le parcours s'arrête à `generating` : au succès on redirige vers l'éditeur
+// (/candidatures/:id) — le CV est persisté, donc plus de perte au changement d'onglet.
+type Step = 'input' | 'analyzing' | 'scored' | 'generating'
 const step = ref<Step>('input')
 
 const offerText = ref('')
 const offerError = ref('')
 const analysis = ref<AnalyzeCandidatureResponse | null>(null)
-const generatedCv = ref<RenderableCv | null>(null)
 
 // ─── Quota de générations (badge + gating des boutons) ───────────────────────
 
@@ -149,15 +150,18 @@ async function generate() {
   if (!analysis.value || quotaExhausted.value || step.value === 'generating') return
   step.value = 'generating'
   try {
-    const body: GenerateCandidatureRequest = { offer: analysis.value.offer }
-    const res = await $fetch<{ cv: RenderableCv }>(CANDIDATURE_GENERATE_PATH, {
+    const body: GenerateCandidatureRequest = {
+      offer: analysis.value.offer,
+      match: analysis.value.match,
+    }
+    const res = await $fetch<GenerateCandidatureResponse>(CANDIDATURE_GENERATE_PATH, {
       method: 'POST',
       body,
     })
-    generatedCv.value = res.cv
-    step.value = 'done'
-    toast.success('CV généré', "Ton CV adapté à l'offre est prêt.")
     await refreshUsage()
+    toast.success('CV généré', 'Ton CV est prêt — tu peux le personnaliser.')
+    // Persisté en base : on ouvre l'éditeur (le CV survit aux changements d'onglet).
+    await navigateTo(`/candidatures/${res.candidatureId}`)
   } catch (err) {
     step.value = 'scored'
     const status = errorStatus(err)
@@ -167,66 +171,29 @@ async function generate() {
       toast.error('Quota atteint', 'Tu as épuisé tes générations offertes.')
     } else if (status === 422) {
       toast.error('Génération impossible', errorMessage(err, 'Réessaie dans quelques instants.'))
+    } else if (status === 409) {
+      // Profil incomplet (vide ou nom manquant) : on relaie le message serveur,
+      // qui guide vers la page profil. Aucun crédit consommé.
+      toast.error('Profil à compléter', errorMessage(err, 'Complète ton profil puis réessaie.'))
     } else {
       toast.error('La génération a échoué', "Ton crédit n'a pas été consommé.")
     }
   }
 }
 
-// ─── Étape 3 : export PDF + nouvelle candidature ─────────────────────────────
-
-const exporting = ref(false)
-
-async function exportPdf() {
-  if (!generatedCv.value) return
-  exporting.value = true
-  try {
-    const res = await $fetch<ArrayBuffer>('/api/cv/export-pdf', {
-      method: 'POST',
-      body: generatedCv.value,
-      responseType: 'arrayBuffer',
-    })
-    const blob = new Blob([res], { type: 'application/pdf' })
-    const url = URL.createObjectURL(blob)
-    const a = document.createElement('a')
-    a.href = url
-    a.download = 'cv-teven.pdf'
-    a.click()
-    URL.revokeObjectURL(url)
-  } catch {
-    toast.error(
-      'Export impossible',
-      "Le PDF n'a pas pu être généré. Réessaie dans quelques instants.",
-    )
-  } finally {
-    exporting.value = false
-  }
-}
-
-async function resetFlow() {
-  offerText.value = ''
-  offerError.value = ''
-  analysis.value = null
-  generatedCv.value = null
-  step.value = 'input'
-  await refreshUsage()
-}
-
-// ─── A11y : focus déplacé sur le titre du résultat à chaque étape clé ────────
+// ─── A11y : focus déplacé sur le titre du résultat à l'étape « scored » ──────
 
 const scoredHeadingRef = ref<HTMLHeadingElement | null>(null)
-const doneHeadingRef = ref<HTMLHeadingElement | null>(null)
 
 watch(step, async (s) => {
-  if (s !== 'scored' && s !== 'done') return
+  if (s !== 'scored') return
   await nextTick()
-  const target = s === 'scored' ? scoredHeadingRef.value : doneHeadingRef.value
-  target?.focus()
+  scoredHeadingRef.value?.focus()
 })
 </script>
 
 <template>
-  <div class="w-full">
+  <div class="mx-auto w-full max-w-6xl px-6 py-10">
     <!-- ── En-tête de page ── -->
     <header class="flex flex-wrap items-start justify-between gap-4">
       <div>
@@ -428,45 +395,6 @@ watch(step, async (s) => {
             </div>
           </div>
         </UiCard>
-
-        <!-- Étape done : aperçu du CV généré + export -->
-        <div v-else-if="step === 'done' && generatedCv" class="animate-fade-up space-y-5">
-          <div class="flex flex-wrap items-center justify-between gap-4">
-            <h2
-              ref="doneHeadingRef"
-              tabindex="-1"
-              class="text-lg font-semibold text-ink-900 outline-none"
-            >
-              Ton CV adapté est prêt
-            </h2>
-            <div class="flex flex-wrap items-center gap-3">
-              <UiButton variant="secondary" @click="resetFlow">
-                <RotateCcw class="h-4 w-4" :stroke-width="2" aria-hidden="true" />
-                Nouvelle candidature
-              </UiButton>
-              <UiButton :loading="exporting" @click="exportPdf">
-                <Download v-if="!exporting" class="h-4 w-4" :stroke-width="2" aria-hidden="true" />
-                Télécharger en PDF
-              </UiButton>
-            </div>
-          </div>
-
-          <p class="flex items-center gap-1.5 text-xs text-ink-500">
-            <ShieldCheck
-              class="h-4 w-4 shrink-0 text-brand-600"
-              :stroke-width="1.75"
-              aria-hidden="true"
-            />
-            Contenu issu de ton profil uniquement — garde-fou anti-invention appliqué.
-          </p>
-
-          <!-- Feuille d'aperçu — fond blanc volontaire : parité avec le PDF exporté -->
-          <div
-            class="mx-auto w-full max-w-[210mm] overflow-hidden rounded-card bg-white shadow-pop ring-1 ring-border"
-          >
-            <CvTemplate :cv="generatedCv" />
-          </div>
-        </div>
       </div>
     </div>
   </div>
diff --git a/apps/app/pages/candidatures/[id].vue b/apps/app/pages/candidatures/[id].vue
new file mode 100644
index 0000000..44d2868
--- /dev/null
+++ b/apps/app/pages/candidatures/[id].vue
@@ -0,0 +1,611 @@
+<script setup lang="ts">
+import type {
+  CandidatureDTO,
+  CandidatureStatus,
+  CvDesign,
+  CvSection,
+  RenderableCv,
+} from '@cvo/shared'
+import { CANDIDATURE_STATUSES, CANDIDATURE_STATUS_LABELS } from '@cvo/shared'
+import {
+  ArrowLeft,
+  Download,
+  Trash2,
+  Plus,
+  X,
+  ChevronUp,
+  ChevronDown,
+  TriangleAlert,
+  Sparkles,
+} from '@lucide/vue'
+
+definePageMeta({ middleware: 'auth' })
+
+const route = useRoute()
+const toast = useToast()
+const id = route.params.id as string
+
+const {
+  data,
+  status: fetchStatus,
+  error,
+} = await useFetch<CandidatureDTO>(`/api/candidatures/${id}`, {
+  lazy: true,
+})
+const isLoading = computed(() => fetchStatus.value === 'pending' && !data.value)
+
+// Design par défaut côté client (miroir de DEFAULT_DESIGN serveur).
+const CLIENT_DEFAULT_DESIGN: CvDesign = {
+  layout: 'single',
+  accent: '#4f46e5',
+  sidebarBg: '#1f2937',
+  sidebarFg: '#f9fafb',
+  sidebarRadius: 0,
+  photoPosition: 'header-right',
+  photoSize: 128,
+  photoMargin: 14,
+  photoPadding: 0,
+  font: null,
+  photo: null,
+  summary: '',
+}
+
+// Copies de travail éditables.
+const cv = ref<RenderableCv | null>(null)
+const design = ref<CvDesign>({ ...CLIENT_DEFAULT_DESIGN })
+const statusValue = ref<CandidatureStatus>('DRAFT')
+let synced = false
+
+watch(
+  data,
+  (c) => {
+    if (c && !synced) {
+      cv.value = structuredClone(toRaw(c.cv))
+      design.value = c.design ? structuredClone(toRaw(c.design)) : { ...CLIENT_DEFAULT_DESIGN }
+      statusValue.value = c.status
+      synced = true
+    }
+  },
+  { immediate: true },
+)
+
+// ─── Provenance : tout nœud ajouté recopie un id donneur (jamais vide). ───────
+function donorId(): string {
+  return cv.value?.header.provenance.profileItemId || 'user-edit'
+}
+function newNodeId(): string {
+  // crypto.randomUUID dispo navigateur + Node 18+.
+  return globalThis.crypto?.randomUUID?.() ?? `n-${Date.now()}-${Math.round(Math.random() * 1e6)}`
+}
+
+// ─── Mutations de contenu (provenance-safe). ──────────────────────────────────
+function moveSection(i: number, dir: -1 | 1) {
+  if (!cv.value) return
+  const j = i + dir
+  const arr = cv.value.sections
+  if (j < 0 || j >= arr.length) return
+  ;[arr[i], arr[j]] = [arr[j]!, arr[i]!]
+}
+function addBullet(section: Extract<CvSection, { kind: 'experience' }>, entryIdx: number) {
+  const entry = section.entries[entryIdx]
+  if (!entry) return
+  entry.bullets.push({
+    id: newNodeId(),
+    text: '',
+    provenance: { profileItemId: entry.provenance.profileItemId || donorId(), reformulated: true },
+  })
+}
+function removeBullet(
+  section: Extract<CvSection, { kind: 'experience' }>,
+  entryIdx: number,
+  bulletIdx: number,
+) {
+  section.entries[entryIdx]?.bullets.splice(bulletIdx, 1)
+}
+function addExperienceEntry(section: Extract<CvSection, { kind: 'experience' }>) {
+  const did = section.entries[0]?.provenance.profileItemId || donorId()
+  section.entries.push({
+    id: newNodeId(),
+    role: '',
+    organization: '',
+    period: '',
+    bullets: [],
+    provenance: { profileItemId: did, reformulated: true },
+  })
+}
+function addSkillEntry(section: Extract<CvSection, { kind: 'skills' }>) {
+  const did = section.entries[0]?.provenance.profileItemId || donorId()
+  section.entries.push({
+    id: newNodeId(),
+    label: '',
+    provenance: { profileItemId: did, reformulated: true },
+  })
+}
+function addEducationEntry(section: Extract<CvSection, { kind: 'education' }>) {
+  const did = section.entries[0]?.provenance.profileItemId || donorId()
+  section.entries.push({
+    id: newNodeId(),
+    degree: '',
+    institution: '',
+    period: '',
+    provenance: { profileItemId: did, reformulated: true },
+  })
+}
+function addLanguageEntry(section: Extract<CvSection, { kind: 'languages' }>) {
+  const did = section.entries[0]?.provenance.profileItemId || donorId()
+  section.entries.push({
+    id: newNodeId(),
+    label: '',
+    level: '',
+    provenance: { profileItemId: did, reformulated: true },
+  })
+}
+// Suppression générique d'une entrée d'une section à entrées.
+function removeEntry(section: CvSection, idx: number) {
+  if ('entries' in section) section.entries.splice(idx, 1)
+}
+
+// Ajout d'une phrase « compétence clé » (verbe d'action). Provenance recopiée.
+// Plafond à 8 (aligné sur le profil / la persistance).
+function addKeySkillEntry(section: Extract<CvSection, { kind: 'keyskills' }>) {
+  if (section.entries.length >= 8) {
+    toast.error('Maximum atteint', '8 compétences clés au maximum.')
+    return
+  }
+  const did = section.entries[0]?.provenance.profileItemId || donorId()
+  section.entries.push({
+    id: newNodeId(),
+    text: '',
+    provenance: { profileItemId: did, reformulated: true },
+  })
+}
+
+/**
+ * Insère une section « Compétences clés » (phrases) au-dessus des expériences si
+ * elle n'existe pas déjà. Le contenu vient idéalement du profil à la génération ;
+ * ici on permet de l'ajouter/compléter à la main.
+ */
+function addKeySkillsSection() {
+  if (!cv.value) return
+  if (cv.value.sections.some((s) => s.kind === 'keyskills')) {
+    toast.error('Déjà présente', 'Une section « Compétences clés » existe déjà — édite-la.')
+    return
+  }
+  const section: CvSection = {
+    kind: 'keyskills',
+    title: 'Compétences clés',
+    entries: [
+      { id: newNodeId(), text: '', provenance: { profileItemId: donorId(), reformulated: true } },
+    ],
+  }
+  const expIdx = cv.value.sections.findIndex((s) => s.kind === 'experience')
+  cv.value.sections.splice(expIdx >= 0 ? expIdx : cv.value.sections.length, 0, section)
+}
+
+// ─── Aperçu live (débouncé). ──────────────────────────────────────────────────
+const previewHtml = ref('')
+let previewTimer: ReturnType<typeof setTimeout> | null = null
+async function refreshPreview() {
+  if (!cv.value) return
+  try {
+    previewHtml.value = await $fetch<string>('/api/cv/preview', {
+      method: 'POST',
+      body: { cv: cv.value, design: design.value },
+    })
+  } catch {
+    /* aperçu non bloquant : garder le dernier rendu */
+  }
+}
+watch(
+  [cv, design],
+  () => {
+    if (previewTimer) clearTimeout(previewTimer)
+    previewTimer = setTimeout(refreshPreview, 500)
+  },
+  { deep: true },
+)
+watch(cv, (v) => {
+  if (v && !previewHtml.value) refreshPreview()
+})
+
+// ─── Avertissement « 1 page » (heuristique, non bloquant). ────────────────────
+const overflowWarning = computed(() => {
+  if (!cv.value) return null
+  const exp = cv.value.sections.find((s) => s.kind === 'experience')
+  if (exp && exp.kind === 'experience') {
+    if (exp.entries.length > 6) return "Beaucoup d'expériences : le CV risque de dépasser une page."
+    if (exp.entries.some((e) => e.bullets.length > 4))
+      return "Certaines expériences ont >4 puces : risque de dépassement d'une page."
+  }
+  // Les compétences clés s'empilent au-dessus des expériences (colonne principale).
+  const ks = cv.value.sections.find((s) => s.kind === 'keyskills')
+  if (ks && ks.kind === 'keyskills') {
+    if (ks.entries.length > 6)
+      return 'Beaucoup de compétences clés : le CV risque de dépasser une page.'
+    if (ks.entries.some((e) => e.text.length > 200))
+      return "Des compétences clés très longues : risque de dépassement d'une page."
+  }
+  return null
+})
+
+// ─── Actions. ─────────────────────────────────────────────────────────────────
+const saving = ref(false)
+const exporting = ref(false)
+const deleting = ref(false)
+const deleteDialogOpen = ref(false)
+
+async function save() {
+  if (!cv.value) return
+  saving.value = true
+  try {
+    await $fetch(`/api/candidatures/${id}`, {
+      method: 'PATCH',
+      body: { cv: cv.value, design: design.value },
+    })
+    toast.success('Enregistré', 'Tes modifications sont sauvegardées.')
+  } catch {
+    toast.error("L'enregistrement a échoué", 'Vérifie ta connexion puis réessaie.')
+  } finally {
+    saving.value = false
+  }
+}
+
+async function updateStatus() {
+  try {
+    await $fetch(`/api/candidatures/${id}`, {
+      method: 'PATCH',
+      body: { status: statusValue.value },
+    })
+    toast.success('Statut mis à jour')
+  } catch {
+    toast.error('La mise à jour a échoué')
+  }
+}
+
+async function exportPdf() {
+  if (!cv.value) return
+  exporting.value = true
+  try {
+    const res = await $fetch<ArrayBuffer>('/api/cv/export-pdf', {
+      method: 'POST',
+      body: { cv: cv.value, design: design.value },
+      responseType: 'arrayBuffer',
+    })
+    const url = URL.createObjectURL(new Blob([res], { type: 'application/pdf' }))
+    const a = document.createElement('a')
+    a.href = url
+    a.download = 'cv.pdf'
+    a.click()
+    URL.revokeObjectURL(url)
+  } catch {
+    toast.error('Export impossible', 'Réessaie dans quelques instants.')
+  } finally {
+    exporting.value = false
+  }
+}
+
+async function confirmDelete() {
+  deleting.value = true
+  try {
+    await $fetch(`/api/candidatures/${id}`, { method: 'DELETE' })
+    deleteDialogOpen.value = false
+    toast.success('Candidature supprimée')
+    await navigateTo('/candidatures')
+  } catch {
+    toast.error('La suppression a échoué')
+  } finally {
+    deleting.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="mx-auto w-full max-w-7xl px-6 py-8">
+    <NuxtLink
+      to="/candidatures"
+      class="inline-flex items-center gap-1.5 text-sm text-ink-500 hover:text-ink-700"
+    >
+      <ArrowLeft class="h-4 w-4" :stroke-width="2" aria-hidden="true" /> Mes candidatures
+    </NuxtLink>
+
+    <div v-if="isLoading" class="mt-6"><UiSkeleton class="h-96 w-full rounded-card" /></div>
+    <UiState
+      v-else-if="error || !cv"
+      variant="error"
+      title="Candidature introuvable"
+      description="Elle a peut-être été supprimée."
+      class="mt-8"
+    />
+
+    <div
+      v-else
+      class="mt-6 lg:grid lg:grid-cols-[minmax(0,1fr)_minmax(0,1fr)] lg:items-start lg:gap-8"
+    >
+      <!-- Colonne édition -->
+      <div class="min-w-0 space-y-6">
+        <!-- Barre d'actions -->
+        <div
+          class="flex flex-wrap items-center gap-3 rounded-card bg-surface p-4 shadow-card ring-1 ring-border"
+        >
+          <select
+            v-model="statusValue"
+            class="h-10 rounded-control bg-surface px-3 text-sm text-ink-900 ring-1 ring-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500"
+            @change="updateStatus"
+          >
+            <option v-for="s in CANDIDATURE_STATUSES" :key="s" :value="s">
+              {{ CANDIDATURE_STATUS_LABELS[s] }}
+            </option>
+          </select>
+          <UiButton variant="secondary" size="sm" @click="addKeySkillsSection">
+            <Sparkles class="h-4 w-4" :stroke-width="2" aria-hidden="true" />
+            Compétences clés
+          </UiButton>
+          <div class="ml-auto flex flex-wrap gap-2">
+            <UiButton variant="ghost" :loading="deleting" @click="deleteDialogOpen = true">
+              <Trash2 class="h-4 w-4" :stroke-width="1.75" aria-hidden="true" />
+            </UiButton>
+            <UiButton variant="secondary" :loading="saving" @click="save">Enregistrer</UiButton>
+            <UiButton :loading="exporting" @click="exportPdf">
+              <Download class="h-4 w-4" :stroke-width="2" aria-hidden="true" /> Exporter
+            </UiButton>
+          </div>
+        </div>
+
+        <div
+          v-if="overflowWarning"
+          class="flex items-start gap-2 rounded-card bg-warning-50 p-3 text-sm text-warning-700 ring-1 ring-warning-200"
+        >
+          <TriangleAlert class="mt-0.5 h-4 w-4 shrink-0" :stroke-width="1.75" aria-hidden="true" />
+          <span>{{ overflowWarning }}</span>
+        </div>
+
+        <!-- Design -->
+        <UiCard>
+          <p class="mb-3 text-sm font-semibold text-ink-900">Apparence</p>
+          <div class="space-y-4">
+            <CvPhotoInput v-model="design.photo" />
+            <CvDesignPanel v-model="design" />
+          </div>
+        </UiCard>
+
+        <!-- En-tête -->
+        <UiCard>
+          <p class="mb-3 text-sm font-semibold text-ink-900">En-tête</p>
+          <div class="space-y-3">
+            <UiInput v-model="cv.header.fullName" label="Nom complet" />
+            <UiInput v-model="cv.header.headline" label="Intitulé / accroche" />
+            <div
+              v-for="(contact, ci) in cv.header.contacts"
+              :key="ci"
+              class="flex items-center gap-2"
+            >
+              <div class="flex-1">
+                <UiInput
+                  v-model="contact.value"
+                  :label="ci === 0 ? 'Contacts' : ''"
+                  :placeholder="contact.kind"
+                />
+              </div>
+              <button
+                type="button"
+                class="shrink-0 rounded-control p-2 text-ink-400 hover:bg-danger-50 hover:text-danger-600"
+                aria-label="Retirer ce contact"
+                @click="cv.header.contacts.splice(ci, 1)"
+              >
+                <X class="h-4 w-4" :stroke-width="2" aria-hidden="true" />
+              </button>
+            </div>
+          </div>
+        </UiCard>
+
+        <!-- Sections -->
+        <UiCard v-for="(section, si) in cv.sections" :key="si">
+          <div class="mb-3 flex items-center gap-2">
+            <div class="flex-1">
+              <UiInput v-model="section.title" label="" />
+            </div>
+            <button
+              type="button"
+              class="rounded-control p-2 text-ink-400 hover:bg-ink-100 disabled:opacity-40"
+              :disabled="si === 0"
+              aria-label="Monter"
+              @click="moveSection(si, -1)"
+            >
+              <ChevronUp class="h-4 w-4" :stroke-width="2" aria-hidden="true" />
+            </button>
+            <button
+              type="button"
+              class="rounded-control p-2 text-ink-400 hover:bg-ink-100 disabled:opacity-40"
+              :disabled="si === cv.sections.length - 1"
+              aria-label="Descendre"
+              @click="moveSection(si, 1)"
+            >
+              <ChevronDown class="h-4 w-4" :stroke-width="2" aria-hidden="true" />
+            </button>
+          </div>
+
+          <!-- Résumé -->
+          <UiTextarea v-if="section.kind === 'summary'" v-model="section.text" :rows="4" label="" />
+
+          <!-- Compétences clés (phrases, verbe d'action) -->
+          <div v-else-if="section.kind === 'keyskills'" class="space-y-2">
+            <div
+              v-for="(entry, ei) in section.entries"
+              :key="entry.id"
+              class="flex items-start gap-2"
+            >
+              <div class="flex-1">
+                <UiTextarea
+                  v-model="entry.text"
+                  :rows="2"
+                  label=""
+                  placeholder="Concevoir des applications web performantes…"
+                />
+              </div>
+              <button
+                type="button"
+                class="mt-1 shrink-0 rounded-control p-2 text-ink-400 hover:bg-danger-50 hover:text-danger-600"
+                aria-label="Retirer la phrase"
+                @click="removeEntry(section, ei)"
+              >
+                <X class="h-4 w-4" :stroke-width="2" aria-hidden="true" />
+              </button>
+            </div>
+            <UiButton variant="secondary" size="sm" @click="addKeySkillEntry(section)">
+              <Plus class="h-4 w-4" :stroke-width="2" aria-hidden="true" /> Ajouter une phrase
+            </UiButton>
+          </div>
+
+          <!-- Expériences -->
+          <div v-else-if="section.kind === 'experience'" class="space-y-4">
+            <div
+              v-for="(entry, ei) in section.entries"
+              :key="entry.id"
+              class="space-y-2 rounded-card bg-surface-muted p-3 ring-1 ring-border"
+            >
+              <div class="flex items-start justify-between gap-2">
+                <div class="grid flex-1 gap-2 sm:grid-cols-2">
+                  <UiInput v-model="entry.role" label="Poste" />
+                  <UiInput v-model="entry.organization" label="Entreprise" />
+                  <UiInput v-model="entry.period" label="Période" />
+                </div>
+                <button
+                  type="button"
+                  class="shrink-0 rounded-control p-2 text-ink-400 hover:bg-danger-50 hover:text-danger-600"
+                  aria-label="Retirer l'expérience"
+                  @click="removeEntry(section, ei)"
+                >
+                  <Trash2 class="h-4 w-4" :stroke-width="1.75" aria-hidden="true" />
+                </button>
+              </div>
+              <div
+                v-for="(bullet, bi) in entry.bullets"
+                :key="bullet.id"
+                class="flex items-center gap-2"
+              >
+                <div class="flex-1">
+                  <UiInput v-model="bullet.text" placeholder="Puce" />
+                </div>
+                <button
+                  type="button"
+                  class="shrink-0 rounded-control p-2 text-ink-400 hover:bg-danger-50 hover:text-danger-600"
+                  aria-label="Retirer la puce"
+                  @click="removeBullet(section, ei, bi)"
+                >
+                  <X class="h-4 w-4" :stroke-width="2" aria-hidden="true" />
+                </button>
+              </div>
+              <UiButton variant="ghost" size="sm" @click="addBullet(section, ei)">
+                <Plus class="h-3.5 w-3.5" :stroke-width="2" aria-hidden="true" /> Puce
+              </UiButton>
+            </div>
+            <UiButton variant="secondary" size="sm" @click="addExperienceEntry(section)">
+              <Plus class="h-4 w-4" :stroke-width="2" aria-hidden="true" /> Ajouter une expérience
+            </UiButton>
+          </div>
+
+          <!-- Compétences -->
+          <div v-else-if="section.kind === 'skills'" class="space-y-2">
+            <div
+              v-for="(entry, ei) in section.entries"
+              :key="entry.id"
+              class="flex items-center gap-2"
+            >
+              <div class="flex-1">
+                <UiInput v-model="entry.label" placeholder="Compétence" />
+              </div>
+              <button
+                type="button"
+                class="shrink-0 rounded-control p-2 text-ink-400 hover:bg-danger-50 hover:text-danger-600"
+                aria-label="Retirer"
+                @click="removeEntry(section, ei)"
+              >
+                <X class="h-4 w-4" :stroke-width="2" aria-hidden="true" />
+              </button>
+            </div>
+            <UiButton variant="secondary" size="sm" @click="addSkillEntry(section)">
+              <Plus class="h-4 w-4" :stroke-width="2" aria-hidden="true" /> Ajouter
+            </UiButton>
+          </div>
+
+          <!-- Formations -->
+          <div v-else-if="section.kind === 'education'" class="space-y-3">
+            <div
+              v-for="(entry, ei) in section.entries"
+              :key="entry.id"
+              class="space-y-2 rounded-card bg-surface-muted p-3 ring-1 ring-border"
+            >
+              <div class="flex items-start justify-between gap-2">
+                <div class="grid flex-1 gap-2 sm:grid-cols-2">
+                  <UiInput v-model="entry.degree" label="Diplôme" />
+                  <UiInput v-model="entry.institution" label="Établissement" />
+                  <UiInput v-model="entry.period" label="Période" />
+                </div>
+                <button
+                  type="button"
+                  class="shrink-0 rounded-control p-2 text-ink-400 hover:bg-danger-50 hover:text-danger-600"
+                  aria-label="Retirer"
+                  @click="removeEntry(section, ei)"
+                >
+                  <Trash2 class="h-4 w-4" :stroke-width="1.75" aria-hidden="true" />
+                </button>
+              </div>
+            </div>
+            <UiButton variant="secondary" size="sm" @click="addEducationEntry(section)">
+              <Plus class="h-4 w-4" :stroke-width="2" aria-hidden="true" /> Ajouter
+            </UiButton>
+          </div>
+
+          <!-- Langues -->
+          <div v-else-if="section.kind === 'languages'" class="space-y-2">
+            <div
+              v-for="(entry, ei) in section.entries"
+              :key="entry.id"
+              class="flex items-center gap-2"
+            >
+              <div class="flex-1">
+                <UiInput v-model="entry.label" placeholder="Langue" />
+              </div>
+              <UiInput v-model="entry.level" class="w-32" placeholder="Niveau" />
+              <button
+                type="button"
+                class="shrink-0 rounded-control p-2 text-ink-400 hover:bg-danger-50 hover:text-danger-600"
+                aria-label="Retirer"
+                @click="removeEntry(section, ei)"
+              >
+                <X class="h-4 w-4" :stroke-width="2" aria-hidden="true" />
+              </button>
+            </div>
+            <UiButton variant="secondary" size="sm" @click="addLanguageEntry(section)">
+              <Plus class="h-4 w-4" :stroke-width="2" aria-hidden="true" /> Ajouter
+            </UiButton>
+          </div>
+        </UiCard>
+      </div>
+
+      <!-- Colonne aperçu (sticky) -->
+      <div class="mt-6 lg:mt-0 lg:sticky lg:top-24">
+        <div class="overflow-hidden rounded-card bg-white shadow-pop ring-1 ring-border">
+          <iframe
+            v-if="previewHtml"
+            :srcdoc="previewHtml"
+            title="Aperçu du CV"
+            sandbox=""
+            class="aspect-[210/297] w-full border-0"
+          />
+          <div v-else class="aspect-[210/297] w-full animate-pulse bg-surface-muted" />
+        </div>
+      </div>
+    </div>
+
+    <UiDialog
+      v-model:open="deleteDialogOpen"
+      title="Supprimer cette candidature ?"
+      description="Le CV et le suivi associés seront retirés. Cette action est définitive."
+      confirm-label="Supprimer"
+      variant="danger"
+      :loading="deleting"
+      @confirm="confirmDelete"
+    />
+  </div>
+</template>
diff --git a/apps/app/pages/candidatures/index.vue b/apps/app/pages/candidatures/index.vue
new file mode 100644
index 0000000..6808c0e
--- /dev/null
+++ b/apps/app/pages/candidatures/index.vue
@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import type { CandidatureListItemDTO, CandidatureStatus } from '@cvo/shared'
+import { CANDIDATURE_STATUS_LABELS } from '@cvo/shared'
+import { FileText, Plus, ArrowRight } from '@lucide/vue'
+
+definePageMeta({ middleware: 'auth' })
+
+const { data, status, error } = await useFetch<CandidatureListItemDTO[]>('/api/candidatures', {
+  lazy: true,
+})
+
+const candidatures = computed(() => data.value ?? [])
+const isLoading = computed(() => status.value === 'pending' && !data.value)
+
+/** Couleur de badge par statut. */
+const STATUS_VARIANT: Record<CandidatureStatus, 'neutral' | 'brand' | 'warning' | 'danger' | 'success'> = {
+  DRAFT: 'neutral',
+  SUBMITTED: 'brand',
+  INTERVIEW: 'warning',
+  REJECTED: 'danger',
+  ACCEPTED: 'success',
+}
+
+const dateFmt = new Intl.DateTimeFormat('fr-FR', { day: 'numeric', month: 'short', year: 'numeric' })
+function formatDate(iso: string): string {
+  return dateFmt.format(new Date(iso))
+}
+</script>
+
+<template>
+  <div class="mx-auto w-full max-w-6xl px-6 py-10">
+    <header class="flex flex-wrap items-end justify-between gap-4">
+      <div>
+        <h1 class="text-2xl font-bold tracking-tight text-ink-900 sm:text-3xl">Mes candidatures</h1>
+        <p class="mt-2 max-w-2xl text-sm leading-relaxed text-ink-500 sm:text-base">
+          Tes CV générés et le suivi des offres auxquelles tu as postulé.
+        </p>
+      </div>
+      <NuxtLink to="/candidature">
+        <UiButton>
+          <Plus class="h-4 w-4" :stroke-width="2" aria-hidden="true" />
+          Nouvelle candidature
+        </UiButton>
+      </NuxtLink>
+    </header>
+
+    <!-- Chargement -->
+    <div v-if="isLoading" class="mt-8 space-y-3" role="status">
+      <span class="sr-only">Chargement…</span>
+      <UiSkeleton v-for="i in 3" :key="i" class="h-20 w-full rounded-card" />
+    </div>
+
+    <!-- Erreur -->
+    <UiState
+      v-else-if="error"
+      variant="error"
+      title="Impossible de charger tes candidatures"
+      description="Une erreur est survenue. Réessaie dans un instant."
+      class="mt-8"
+    />
+
+    <!-- Vide -->
+    <UiState
+      v-else-if="!candidatures.length"
+      variant="empty"
+      title="Aucune candidature pour l'instant"
+      description="Lance une nouvelle candidature : analyse l'offre, génère ton CV adapté, puis personnalise-le."
+      class="mt-8"
+    >
+      <NuxtLink to="/candidature">
+        <UiButton variant="secondary">Commencer</UiButton>
+      </NuxtLink>
+    </UiState>
+
+    <!-- Liste -->
+    <ul v-else class="mt-8 space-y-3">
+      <li v-for="c in candidatures" :key="c.id">
+        <NuxtLink
+          :to="`/candidatures/${c.id}`"
+          class="flex items-center justify-between gap-4 rounded-card bg-surface p-4 shadow-xs ring-1 ring-border transition-shadow duration-300 ease-out hover:shadow-card-hover sm:p-5"
+        >
+          <div class="flex min-w-0 items-center gap-3">
+            <div
+              class="flex h-10 w-10 shrink-0 items-center justify-center rounded-control bg-brand-50 text-brand-600"
+              aria-hidden="true"
+            >
+              <FileText class="h-5 w-5" :stroke-width="1.75" />
+            </div>
+            <div class="min-w-0">
+              <p class="truncate font-semibold text-ink-900">{{ c.label }}</p>
+              <p class="mt-0.5 text-sm text-ink-500">
+                Match {{ c.matchScore }}/100 · {{ formatDate(c.updatedAt) }}
+              </p>
+            </div>
+          </div>
+          <div class="flex shrink-0 items-center gap-3">
+            <UiBadge :variant="STATUS_VARIANT[c.status]">
+              {{ CANDIDATURE_STATUS_LABELS[c.status] }}
+            </UiBadge>
+            <ArrowRight class="h-4 w-4 text-ink-400" :stroke-width="2" aria-hidden="true" />
+          </div>
+        </NuxtLink>
+      </li>
+    </ul>
+  </div>
+</template>
diff --git a/apps/app/pages/profil.vue b/apps/app/pages/profil.vue
index 5d12af3..f4fee38 100644
--- a/apps/app/pages/profil.vue
+++ b/apps/app/pages/profil.vue
@@ -1,16 +1,30 @@
 <script setup lang="ts">
-import type { ProfileDTO, ExperienceDTO, SkillDTO, SkillLevel } from '@cvo/shared'
-import { SKILL_LEVELS } from '@cvo/shared'
+import type {
+  ProfileDTO,
+  ExperienceDTO,
+  SkillDTO,
+  SkillLevel,
+  LanguageDTO,
+  LanguageLevel,
+  EducationDTO,
+  CvDesign,
+  ParsedCvProfile,
+} from '@cvo/shared'
+import { SKILL_LEVELS, LANGUAGE_LEVELS } from '@cvo/shared'
 import {
   Plus,
   Trash2,
   X,
   Briefcase,
   Wrench,
+  Globe,
+  GraduationCap,
   ClipboardPaste,
   UserRound,
   ShieldCheck,
   ArrowRight,
+  FileText,
+  Upload,
 } from '@lucide/vue'
 
 definePageMeta({ middleware: 'auth' })
@@ -29,21 +43,47 @@ const isLoading = computed(() => status.value === 'pending' && !data.value)
 
 const expCount = computed(() => profile.value?.experiences.length ?? 0)
 const skillCount = computed(() => profile.value?.skills.length ?? 0)
+const languageCount = computed(() => profile.value?.languages.length ?? 0)
+const educationCount = computed(() => profile.value?.education.length ?? 0)
 
 // ─── Formulaire en-tête ──────────────────────────────────────────────────────
 
+const fullName = ref('')
+const email = ref('')
+const phone = ref('')
+const location = ref('')
+const linksText = ref('') // liens séparés par des virgules (UI) → string[] (API)
 const headline = ref('')
 const summary = ref('')
+const keySkills = ref<string[]>([]) // phrases « compétences clés » (verbe d'action)
 let headerSynced = false
 
+const KEY_SKILLS_MAX = 8
+function addKeySkill() {
+  if (keySkills.value.length >= KEY_SKILLS_MAX) {
+    toast.error('Maximum atteint', `${KEY_SKILLS_MAX} compétences clés au maximum.`)
+    return
+  }
+  keySkills.value.push('')
+}
+function removeKeySkill(i: number) {
+  keySkills.value.splice(i, 1)
+}
+
 // Pré-remplit le formulaire dès la première arrivée des données (fetch lazy),
 // sans écraser une saisie en cours lors des refresh suivants.
 watch(
   data,
   (p) => {
     if (p && !headerSynced) {
+      fullName.value = p.fullName ?? ''
+      email.value = p.email ?? ''
+      phone.value = p.phone ?? ''
+      location.value = p.location ?? ''
+      linksText.value = (p.links ?? []).join(', ')
       headline.value = p.headline ?? ''
       summary.value = p.summary ?? ''
+      keySkills.value = [...(p.keySkills ?? [])]
       headerSynced = true
     }
   },
@@ -55,14 +95,27 @@ const savingHeader = ref(false)
 async function saveHeader() {
   savingHeader.value = true
   try {
+    const links = linksText.value
+      .split(',')
+      .map((l) => l.trim())
+      .filter(Boolean)
     const res = await $fetch<ProfileDTO>('/api/profile', {
       method: 'PUT',
-      body: { headline: headline.value || null, summary: summary.value || null },
+      body: {
+        fullName: fullName.value.trim() || null,
+        email: email.value.trim() || null,
+        phone: phone.value.trim() || null,
+        location: location.value.trim() || null,
+        links,
+        keySkills: keySkills.value.map((s) => s.trim()).filter(Boolean),
+        headline: headline.value || null,
+        summary: summary.value || null,
+      },
     })
     data.value = res
-    toast.success('En-tête enregistré', 'Ton intitulé et ton résumé sont à jour.')
+    toast.success('En-tête enregistré', 'Ton identité et ton résumé sont à jour.')
   } catch {
-    toast.error("L'enregistrement a échoué", 'Vérifie ta connexion puis réessaie.')
+    toast.error("L'enregistrement a échoué", 'Vérifie ton nom et ton e-mail, puis réessaie.')
   } finally {
     savingHeader.value = false
   }
@@ -167,19 +220,109 @@ async function addSkill() {
   }
 }
 
+// ─── Langues ─────────────────────────────────────────────────────────────────
+
+const LANGUAGE_LEVEL_LABELS: Record<LanguageLevel, string> = {
+  A1: 'A1 (Débutant)',
+  A2: 'A2 (Élémentaire)',
+  B1: 'B1 (Intermédiaire)',
+  B2: 'B2 (Avancé)',
+  C1: 'C1 (Autonome)',
+  C2: 'C2 (Maîtrise)',
+  NATIVE: 'Natif',
+}
+
+const showLanguageForm = ref(false)
+const addingLanguage = ref(false)
+const languageForm = reactive({ label: '', level: '' as string })
+
+const languageLevelSelectId = useId()
+
+async function addLanguage() {
+  addingLanguage.value = true
+  try {
+    await $fetch('/api/profile/languages', {
+      method: 'POST',
+      body: {
+        label: languageForm.label,
+        level: languageForm.level || null,
+      },
+    })
+    Object.assign(languageForm, { label: '', level: '' })
+    await refresh()
+    toast.success('Langue ajoutée')
+  } catch {
+    toast.error("L'ajout a échoué", 'Vérifie ta connexion puis réessaie.')
+  } finally {
+    addingLanguage.value = false
+  }
+}
+
+// ─── Formations ──────────────────────────────────────────────────────────────
+
+const showEduForm = ref(false)
+const addingEdu = ref(false)
+const eduForm = reactive({ degree: '', school: '', startDate: '', endDate: '', description: '' })
+
+function resetEduForm() {
+  Object.assign(eduForm, { degree: '', school: '', startDate: '', endDate: '', description: '' })
+}
+
+function formatEduPeriod(ed: EducationDTO): string | null {
+  if (!ed.startDate && !ed.endDate) return null
+  const end = ed.endDate ? periodFormatter.format(new Date(ed.endDate)) : "aujourd'hui"
+  if (!ed.startDate) return end
+  return `${periodFormatter.format(new Date(ed.startDate))} – ${end}`
+}
+
+async function addEducation() {
+  addingEdu.value = true
+  try {
+    await $fetch('/api/profile/education', {
+      method: 'POST',
+      body: {
+        degree: eduForm.degree,
+        school: eduForm.school,
+        startDate: eduForm.startDate ? new Date(eduForm.startDate).toISOString() : null,
+        endDate: eduForm.endDate ? new Date(eduForm.endDate).toISOString() : null,
+        description: eduForm.description || null,
+      },
+    })
+    resetEduForm()
+    showEduForm.value = false
+    await refresh()
+    toast.success('Formation ajoutée', 'Elle apparaît maintenant dans ton profil.')
+  } catch {
+    toast.error("L'ajout a échoué", 'Vérifie ta connexion puis réessaie.')
+  } finally {
+    addingEdu.value = false
+  }
+}
+
 // ─── Suppressions (avec confirmation) ────────────────────────────────────────
 
-type DeleteTarget = { kind: 'experience' | 'skill'; id: string; label: string }
+type DeleteTarget = {
+  kind: 'experience' | 'skill' | 'language' | 'education'
+  id: string
+  label: string
+}
 
 const deleteTarget = ref<DeleteTarget | null>(null)
 const deleteDialogOpen = ref(false)
 const deleting = ref(false)
 
-const deleteDialogTitle = computed(() =>
-  deleteTarget.value?.kind === 'skill'
-    ? 'Supprimer cette compétence ?'
-    : 'Supprimer cette expérience ?',
-)
+const deleteDialogTitle = computed(() => {
+  switch (deleteTarget.value?.kind) {
+    case 'skill':
+      return 'Supprimer cette compétence ?'
+    case 'language':
+      return 'Supprimer cette langue ?'
+    case 'education':
+      return 'Supprimer cette formation ?'
+    default:
+      return 'Supprimer cette expérience ?'
+  }
+})
 const deleteDialogDescription = computed(() =>
   deleteTarget.value
     ? `« ${deleteTarget.value.label} » sera retirée de ton profil. Cette action est définitive.`
@@ -196,19 +339,37 @@ function askDeleteSkill(sk: SkillDTO) {
   deleteDialogOpen.value = true
 }
 
+function askDeleteLanguage(lang: LanguageDTO) {
+  deleteTarget.value = { kind: 'language', id: lang.id, label: lang.label }
+  deleteDialogOpen.value = true
+}
+
+function askDeleteEducation(ed: EducationDTO) {
+  deleteTarget.value = { kind: 'education', id: ed.id, label: `${ed.degree} — ${ed.school}` }
+  deleteDialogOpen.value = true
+}
+
 async function confirmDelete() {
   if (!deleteTarget.value) return
   deleting.value = true
   try {
     const { kind, id } = deleteTarget.value
-    if (kind === 'experience') {
-      await $fetch(`/api/profile/experiences/${id}`, { method: 'DELETE' })
-    } else {
-      await $fetch(`/api/profile/skills/${id}`, { method: 'DELETE' })
-    }
+    const resource = {
+      experience: 'experiences',
+      skill: 'skills',
+      language: 'languages',
+      education: 'education',
+    }[kind]
+    await $fetch(`/api/profile/${resource}/${id}`, { method: 'DELETE' })
     await refresh()
     deleteDialogOpen.value = false
-    toast.success(kind === 'experience' ? 'Expérience supprimée' : 'Compétence supprimée')
+    const successLabel = {
+      experience: 'Expérience supprimée',
+      skill: 'Compétence supprimée',
+      language: 'Langue supprimée',
+      education: 'Formation supprimée',
+    }[kind]
+    toast.success(successLabel)
   } catch {
     toast.error('La suppression a échoué', 'Vérifie ta connexion puis réessaie.')
   } finally {
@@ -246,6 +407,15 @@ async function doParse() {
   }
 }
 
+// ─── Dédup d'import : ne créer QUE les éléments absents du profil ────────────
+// Réimporter le même CV ne doit pas dupliquer. Comparaison insensible à la casse
+// et aux accents ; on dédoublonne aussi à l'intérieur d'un même lot d'import.
+function normKey(s: string): string {
+  return s.toLowerCase().normalize('NFD').replace(/[̀-ͯ]/g, '').replace(/\s+/g, ' ').trim()
+}
+const expKey = (title: string, company: string) => `${normKey(title)}|${normKey(company)}`
+const eduKey = (degree: string, school: string) => `${normKey(degree)}|${normKey(school)}`
+
 async function applyImport() {
   if (!importResult.value) return
   applyingImport.value = true
@@ -255,10 +425,20 @@ async function applyImport() {
       method: 'PUT',
       body: { headline: r.headline, summary: r.summary },
     })
+    const seenExp = new Set(
+      (profile.value?.experiences ?? []).map((e) => expKey(e.title, e.company)),
+    )
+    const seenSkills = new Set((profile.value?.skills ?? []).map((s) => normKey(s.label)))
     for (const exp of r.experiences) {
+      const key = expKey(exp.title, exp.company)
+      if (!exp.title.trim() || !exp.company.trim() || seenExp.has(key)) continue
+      seenExp.add(key)
       await $fetch('/api/profile/experiences', { method: 'POST', body: exp })
     }
     for (const sk of r.skills) {
+      const key = normKey(sk.label)
+      if (!sk.label.trim() || seenSkills.has(key)) continue
+      seenSkills.add(key)
       await $fetch('/api/profile/skills', { method: 'POST', body: sk })
     }
     pasteText.value = ''
@@ -278,6 +458,219 @@ async function applyImport() {
     applyingImport.value = false
   }
 }
+
+// ─── CV de base (capture de DA depuis un PDF) ─────────────────────────────────
+
+const baseDesign = computed<CvDesign | null>(() => profile.value?.baseCvDesign ?? null)
+const extractingDesign = ref(false)
+const savingDesign = ref(false)
+const removingDesign = ref(false)
+const designPreview = ref<CvDesign | null>(null)
+const parsedPreview = ref<ParsedCvProfile | null>(null)
+const cvFileInput = ref<HTMLInputElement | null>(null)
+
+function triggerCvUpload() {
+  cvFileInput.value?.click()
+}
+
+function clearCvPreview() {
+  designPreview.value = null
+  parsedPreview.value = null
+}
+
+// Édition de la proposition avant écriture (l'utilisateur reste la source de vérité).
+const parsedLinksText = computed<string>({
+  get: () => parsedPreview.value?.links.join(', ') ?? '',
+  set: (v) => {
+    if (parsedPreview.value) {
+      parsedPreview.value.links = v
+        .split(',')
+        .map((s) => s.trim())
+        .filter(Boolean)
+    }
+  },
+})
+function removeParsedExperience(i: number) {
+  parsedPreview.value?.experiences.splice(i, 1)
+}
+function removeParsedEducation(i: number) {
+  parsedPreview.value?.education.splice(i, 1)
+}
+function removeParsedSkill(i: number) {
+  parsedPreview.value?.skills.splice(i, 1)
+}
+function removeParsedLanguage(i: number) {
+  parsedPreview.value?.languages.splice(i, 1)
+}
+
+/** Convertit une date "YYYY-MM"/"YYYY-MM-DD" en ISO (ou null) pour les POST. */
+function toIsoOrNull(value: string | null): string | null {
+  if (!value) return null
+  const d = new Date(value.length === 7 ? `${value}-01` : value)
+  return Number.isNaN(d.getTime()) ? null : d.toISOString()
+}
+
+async function extractDesign(e: Event) {
+  const input = e.target as HTMLInputElement
+  const file = input.files?.[0]
+  if (!file) return
+  if (file.type !== 'application/pdf') {
+    toast.error('Format invalide', 'Choisis un fichier PDF.')
+    input.value = ''
+    return
+  }
+  extractingDesign.value = true
+  clearCvPreview()
+  try {
+    const form = new FormData()
+    form.append('file', file)
+    const res = await $fetch<{ design: CvDesign; parsed: ParsedCvProfile }>(
+      '/api/profile/cv-design/extract',
+      { method: 'POST', body: form },
+    )
+    designPreview.value = res.design
+    parsedPreview.value = res.parsed
+  } catch {
+    toast.error("L'analyse du CV a échoué", 'Réessaie dans un instant, ou avec un autre PDF.')
+  } finally {
+    extractingDesign.value = false
+    input.value = '' // permet de re-sélectionner le même fichier
+  }
+}
+
+/**
+ * Confirme l'import : enregistre le design + complète le profil depuis le PDF.
+ * Identité/intitulé/résumé : on ne remplit que les champs ENCORE VIDES (pas de
+ * clobber). Expériences / compétences / langues : ajoutées (additif).
+ */
+async function saveDesign() {
+  if (!designPreview.value) return
+  savingDesign.value = true
+  try {
+    await $fetch('/api/profile/cv-design', { method: 'PUT', body: designPreview.value })
+
+    const p = parsedPreview.value
+    if (p) {
+      // En-tête : remplir seulement les champs vides côté formulaire.
+      const headerPatch: Record<string, unknown> = {}
+      if (!fullName.value.trim() && p.fullName) headerPatch.fullName = p.fullName
+      if (!email.value.trim() && p.email) headerPatch.email = p.email
+      if (!phone.value.trim() && p.phone) headerPatch.phone = p.phone
+      if (!location.value.trim() && p.location) headerPatch.location = p.location
+      if (!linksText.value.trim() && p.links.length) headerPatch.links = p.links
+      if (!headline.value.trim() && p.headline) headerPatch.headline = p.headline
+      if (!summary.value.trim() && p.summary) headerPatch.summary = p.summary
+      if (!keySkills.value.length && p.keySkills.length) headerPatch.keySkills = p.keySkills
+      if (Object.keys(headerPatch).length) {
+        await $fetch('/api/profile', { method: 'PUT', body: headerPatch })
+      }
+
+      // Listes : ajout (additif) MAIS sans doublon — on ne crée que ce qui n'existe
+      // pas déjà (comparaison normalisée), et on dédoublonne au sein du lot importé.
+      // On saute aussi les entrées dont un champ requis est vide (sinon POST 400).
+      const seenExp = new Set(
+        (profile.value?.experiences ?? []).map((e) => expKey(e.title, e.company)),
+      )
+      for (const exp of p.experiences) {
+        if (!exp.title.trim() || !exp.company.trim()) continue
+        const key = expKey(exp.title, exp.company)
+        if (seenExp.has(key)) continue
+        seenExp.add(key)
+        await $fetch('/api/profile/experiences', {
+          method: 'POST',
+          body: {
+            title: exp.title,
+            company: exp.company,
+            startDate: toIsoOrNull(exp.startDate),
+            endDate: toIsoOrNull(exp.endDate),
+            description: exp.description || null,
+            skillsUsed: exp.skillsUsed,
+          },
+        })
+      }
+      const seenEdu = new Set(
+        (profile.value?.education ?? []).map((e) => eduKey(e.degree, e.school)),
+      )
+      for (const ed of p.education) {
+        if (!ed.degree.trim() || !ed.school.trim()) continue
+        const key = eduKey(ed.degree, ed.school)
+        if (seenEdu.has(key)) continue
+        seenEdu.add(key)
+        await $fetch('/api/profile/education', {
+          method: 'POST',
+          body: {
+            degree: ed.degree,
+            school: ed.school,
+            startDate: toIsoOrNull(ed.startDate),
+            endDate: toIsoOrNull(ed.endDate),
+            description: ed.description || null,
+          },
+        })
+      }
+      const seenSkills = new Set((profile.value?.skills ?? []).map((s) => normKey(s.label)))
+      for (const sk of p.skills) {
+        if (!sk.label.trim()) continue
+        const key = normKey(sk.label)
+        if (seenSkills.has(key)) continue
+        seenSkills.add(key)
+        await $fetch('/api/profile/skills', {
+          method: 'POST',
+          body: { label: sk.label, level: sk.level, years: sk.years },
+        })
+      }
+      const seenLang = new Set((profile.value?.languages ?? []).map((l) => normKey(l.label)))
+      for (const lang of p.languages) {
+        if (!lang.label.trim()) continue
+        const key = normKey(lang.label)
+        if (seenLang.has(key)) continue
+        seenLang.add(key)
+        await $fetch('/api/profile/languages', {
+          method: 'POST',
+          body: { label: lang.label, level: lang.level },
+        })
+      }
+    }
+
+    clearCvPreview()
+    await refresh()
+    // Re-synchronise le formulaire en-tête avec les valeurs fraîchement importées.
+    headerSynced = false
+    const fresh = profile.value
+    if (fresh) {
+      fullName.value = fresh.fullName ?? ''
+      email.value = fresh.email ?? ''
+      phone.value = fresh.phone ?? ''
+      location.value = fresh.location ?? ''
+      linksText.value = (fresh.links ?? []).join(', ')
+      headline.value = fresh.headline ?? ''
+      summary.value = fresh.summary ?? ''
+      keySkills.value = [...(fresh.keySkills ?? [])]
+      headerSynced = true
+    }
+    toast.success('CV importé', 'Design appliqué et profil complété depuis ton CV.')
+  } catch {
+    await refresh()
+    toast.error(
+      "L'import a échoué",
+      'Certaines données ont pu être enregistrées — vérifie ton profil puis réessaie.',
+    )
+  } finally {
+    savingDesign.value = false
+  }
+}
+
+async function removeDesign() {
+  removingDesign.value = true
+  try {
+    await $fetch('/api/profile/cv-design', { method: 'DELETE' })
+    await refresh()
+    toast.success('Design retiré', 'Tes CV utiliseront de nouveau le modèle par défaut.')
+  } catch {
+    toast.error('La suppression a échoué', 'Vérifie ta connexion puis réessaie.')
+  } finally {
+    removingDesign.value = false
+  }
+}
 </script>
 
 <template>
@@ -348,13 +741,37 @@ async function applyImport() {
                 En-tête du profil
               </h2>
               <p class="text-sm text-ink-500">
-                Ton intitulé et ton accroche, repris en haut de tes CV.
+                Ton identité, ton intitulé et ton accroche, repris en haut de tes CV.
               </p>
             </div>
           </div>
 
           <UiCard>
             <form class="space-y-4" @submit.prevent="saveHeader">
+              <UiInput
+                v-model="fullName"
+                label="Nom complet"
+                required
+                placeholder="ex. Camille Martin"
+                hint="Affiché en tête de tes CV."
+              />
+              <div class="grid gap-4 sm:grid-cols-2">
+                <UiInput
+                  v-model="email"
+                  type="email"
+                  label="E-mail de contact"
+                  placeholder="ex. camille.martin@email.fr"
+                  hint="Par défaut, l'e-mail de ton compte."
+                />
+                <UiInput v-model="phone" label="Téléphone" placeholder="ex. 06 12 34 56 78" />
+              </div>
+              <UiInput v-model="location" label="Localisation" placeholder="ex. Paris, France" />
+              <UiInput
+                v-model="linksText"
+                label="Liens"
+                placeholder="ex. https://linkedin.com/in/…, https://github.com/…"
+                hint="Sépare-les par des virgules (portfolio, LinkedIn, GitHub…)."
+              />
               <UiInput
                 v-model="headline"
                 label="Intitulé de poste"
@@ -366,8 +783,49 @@ async function applyImport() {
                 :rows="4"
                 placeholder="Quelques phrases sur ton parcours et tes ambitions…"
               />
+
+              <!-- Compétences clés : phrases (verbe d'action), section au-dessus des expériences du CV -->
+              <div class="space-y-2">
+                <div class="flex items-center justify-between">
+                  <span class="text-sm font-medium text-ink-700"
+                    >Compétences clés · {{ keySkills.length }}/{{ KEY_SKILLS_MAX }}</span
+                  >
+                  <span class="text-xs text-ink-400">Commence par un verbe d'action</span>
+                </div>
+                <div v-for="(_, i) in keySkills" :key="i" class="flex items-start gap-2">
+                  <div class="flex-1">
+                    <UiTextarea
+                      v-model="keySkills[i]"
+                      label=""
+                      :rows="2"
+                      :maxlength="300"
+                      placeholder="ex. Concevoir des applications web performantes en Vue 3 / TypeScript"
+                    />
+                  </div>
+                  <button
+                    type="button"
+                    class="mt-1 shrink-0 rounded-control p-2 text-ink-400 hover:bg-danger-50 hover:text-danger-600"
+                    aria-label="Retirer la compétence clé"
+                    @click="removeKeySkill(i)"
+                  >
+                    <X class="h-4 w-4" :stroke-width="2" aria-hidden="true" />
+                  </button>
+                </div>
+                <UiButton
+                  variant="secondary"
+                  size="sm"
+                  type="button"
+                  :disabled="keySkills.length >= KEY_SKILLS_MAX"
+                  @click="addKeySkill"
+                >
+                  <Plus class="h-4 w-4" :stroke-width="2" aria-hidden="true" /> Ajouter une phrase
+                </UiButton>
+              </div>
+
               <div class="flex justify-end">
-                <UiButton type="submit" :loading="savingHeader">Enregistrer</UiButton>
+                <UiButton type="submit" :loading="savingHeader" :disabled="!fullName.trim()">
+                  Enregistrer
+                </UiButton>
               </div>
             </form>
           </UiCard>
@@ -492,6 +950,108 @@ async function applyImport() {
           </UiCard>
         </section>
 
+        <!-- Formations -->
+        <section class="space-y-4" aria-labelledby="section-formations">
+          <div class="flex flex-wrap items-center justify-between gap-3">
+            <div class="flex items-center gap-3">
+              <div
+                class="flex h-9 w-9 shrink-0 items-center justify-center rounded-control bg-brand-50 text-brand-600"
+                aria-hidden="true"
+              >
+                <GraduationCap class="h-5 w-5" :stroke-width="1.75" />
+              </div>
+              <div>
+                <h2 id="section-formations" class="text-lg font-semibold text-ink-900">
+                  Formations
+                </h2>
+                <p class="text-sm text-ink-500">Tes diplômes et formations.</p>
+              </div>
+            </div>
+            <UiButton v-if="!showEduForm" variant="secondary" size="sm" @click="showEduForm = true">
+              <Plus class="h-4 w-4" :stroke-width="2" aria-hidden="true" />
+              Ajouter une formation
+            </UiButton>
+          </div>
+
+          <ul v-if="profile?.education.length" class="space-y-3">
+            <li
+              v-for="ed in profile.education"
+              :key="ed.id"
+              class="flex items-start justify-between gap-4 rounded-card bg-surface p-4 shadow-xs ring-1 ring-border transition-shadow duration-300 ease-out hover:shadow-card-hover sm:p-5"
+            >
+              <div class="min-w-0">
+                <p class="font-semibold text-ink-900">{{ ed.degree }}</p>
+                <p class="text-sm text-ink-600">{{ ed.school }}</p>
+                <p v-if="formatEduPeriod(ed)" class="mt-0.5 text-sm text-ink-500">
+                  {{ formatEduPeriod(ed) }}
+                </p>
+                <p
+                  v-if="ed.description"
+                  class="mt-2 text-sm leading-relaxed text-ink-600 line-clamp-3"
+                >
+                  {{ ed.description }}
+                </p>
+              </div>
+              <button
+                type="button"
+                class="shrink-0 rounded-control p-2 text-ink-400 transition-colors duration-300 ease-out hover:bg-danger-50 hover:text-danger-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-danger-500"
+                :aria-label="`Supprimer la formation ${ed.degree}`"
+                @click="askDeleteEducation(ed)"
+              >
+                <Trash2 class="h-4 w-4" :stroke-width="1.75" aria-hidden="true" />
+              </button>
+            </li>
+          </ul>
+          <div
+            v-else-if="!showEduForm"
+            class="flex flex-col items-center gap-2 rounded-card border border-dashed border-border-strong bg-surface px-6 py-8 text-center"
+          >
+            <GraduationCap class="h-6 w-6 text-ink-400" :stroke-width="1.75" aria-hidden="true" />
+            <p class="max-w-sm text-sm text-ink-500">
+              Aucune formation pour l'instant. Ajoute tes diplômes et titres.
+            </p>
+          </div>
+
+          <UiCard v-if="showEduForm" class="animate-fade-up">
+            <form class="space-y-4" @submit.prevent="addEducation">
+              <UiInput
+                v-model="eduForm.degree"
+                label="Diplôme / titre"
+                required
+                placeholder="ex. Titre RNCP Développeur web"
+              />
+              <UiInput
+                v-model="eduForm.school"
+                label="Établissement"
+                required
+                placeholder="ex. Donkey School"
+              />
+              <div class="grid gap-4 sm:grid-cols-2">
+                <UiInput v-model="eduForm.startDate" type="date" label="Date de début" />
+                <UiInput v-model="eduForm.endDate" type="date" label="Date de fin" />
+              </div>
+              <UiTextarea
+                v-model="eduForm.description"
+                label="Description"
+                :rows="3"
+                placeholder="Projets, mentions… (optionnel)"
+              />
+              <div class="flex flex-wrap justify-end gap-3">
+                <UiButton variant="ghost" :disabled="addingEdu" @click="showEduForm = false">
+                  Annuler
+                </UiButton>
+                <UiButton
+                  type="submit"
+                  :loading="addingEdu"
+                  :disabled="!eduForm.degree.trim() || !eduForm.school.trim()"
+                >
+                  Ajouter la formation
+                </UiButton>
+              </div>
+            </form>
+          </UiCard>
+        </section>
+
         <!-- Compétences -->
         <section class="space-y-4" aria-labelledby="section-competences">
           <div class="flex flex-wrap items-center justify-between gap-3">
@@ -601,6 +1161,103 @@ async function applyImport() {
           </UiCard>
         </section>
 
+        <!-- Langues -->
+        <section class="space-y-4" aria-labelledby="section-langues">
+          <div class="flex flex-wrap items-center justify-between gap-3">
+            <div class="flex items-center gap-3">
+              <div
+                class="flex h-9 w-9 shrink-0 items-center justify-center rounded-control bg-brand-50 text-brand-600"
+                aria-hidden="true"
+              >
+                <Globe class="h-5 w-5" :stroke-width="1.75" />
+              </div>
+              <div>
+                <h2 id="section-langues" class="text-lg font-semibold text-ink-900">Langues</h2>
+                <p class="text-sm text-ink-500">Les langues que tu parles, avec ton niveau.</p>
+              </div>
+            </div>
+            <UiButton
+              v-if="!showLanguageForm"
+              variant="secondary"
+              size="sm"
+              @click="showLanguageForm = true"
+            >
+              <Plus class="h-4 w-4" :stroke-width="2" aria-hidden="true" />
+              Ajouter une langue
+            </UiButton>
+          </div>
+
+          <ul v-if="profile?.languages.length" class="flex flex-wrap gap-2">
+            <li v-for="lang in profile.languages" :key="lang.id">
+              <UiBadge variant="brand" class="group pr-1.5">
+                <span>{{ lang.label }}</span>
+                <span v-if="lang.level" class="font-normal text-brand-500">
+                  · {{ LANGUAGE_LEVEL_LABELS[lang.level] }}
+                </span>
+                <button
+                  type="button"
+                  class="-my-1.5 ml-0.5 rounded-full p-1.5 text-brand-500 transition-colors duration-300 ease-out hover:bg-brand-100 hover:text-danger-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 group-hover:text-brand-600"
+                  :aria-label="`Supprimer la langue ${lang.label}`"
+                  @click="askDeleteLanguage(lang)"
+                >
+                  <X class="h-3.5 w-3.5" :stroke-width="2" aria-hidden="true" />
+                </button>
+              </UiBadge>
+            </li>
+          </ul>
+          <div
+            v-else-if="!showLanguageForm"
+            class="flex flex-col items-center gap-2 rounded-card border border-dashed border-border-strong bg-surface px-6 py-8 text-center"
+          >
+            <Globe class="h-6 w-6 text-ink-400" :stroke-width="1.75" aria-hidden="true" />
+            <p class="max-w-sm text-sm text-ink-500">
+              Aucune langue pour l'instant. Ajoute celles que tu parles.
+            </p>
+          </div>
+
+          <UiCard v-if="showLanguageForm" class="animate-fade-up">
+            <form class="space-y-4" @submit.prevent="addLanguage">
+              <UiInput
+                v-model="languageForm.label"
+                label="Langue"
+                required
+                placeholder="ex. Anglais"
+              />
+              <div class="flex flex-col gap-1.5">
+                <label :for="languageLevelSelectId" class="text-sm font-medium text-ink-700"
+                  >Niveau</label
+                >
+                <select
+                  :id="languageLevelSelectId"
+                  v-model="languageForm.level"
+                  class="h-10 w-full rounded-control bg-surface px-3 text-sm text-ink-900 ring-1 ring-border transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500"
+                >
+                  <option value="">Non précisé</option>
+                  <option v-for="l in LANGUAGE_LEVELS" :key="l" :value="l">
+                    {{ LANGUAGE_LEVEL_LABELS[l] }}
+                  </option>
+                </select>
+              </div>
+              <div class="flex flex-wrap justify-end gap-3">
+                <UiButton
+                  variant="ghost"
+                  :disabled="addingLanguage"
+                  @click="showLanguageForm = false"
+                >
+                  Annuler
+                </UiButton>
+                <UiButton
+                  type="submit"
+                  :loading="addingLanguage"
+                  :disabled="!languageForm.label.trim()"
+                >
+                  Ajouter la langue
+                </UiButton>
+              </div>
+            </form>
+          </UiCard>
+        </section>
+
         <!-- Import copier-coller -->
         <section class="space-y-4" aria-labelledby="section-import">
           <div class="flex items-center gap-3">
@@ -708,6 +1365,297 @@ async function applyImport() {
             </div>
           </UiCard>
         </section>
+
+        <!-- CV de base (capture de DA depuis un PDF) -->
+        <section class="space-y-4" aria-labelledby="section-cv-base">
+          <div class="flex items-center gap-3">
+            <div
+              class="flex h-9 w-9 shrink-0 items-center justify-center rounded-control bg-brand-50 text-brand-600"
+              aria-hidden="true"
+            >
+              <FileText class="h-5 w-5" :stroke-width="1.75" />
+            </div>
+            <div>
+              <h2 id="section-cv-base" class="text-lg font-semibold text-ink-900">CV de base</h2>
+              <p class="text-sm text-ink-500">
+                Upload ton CV actuel (PDF) : on en capture la mise en forme (couleurs, polices,
+                agencement) ET on pré-remplit ton profil (expériences, compétences, langues…) à
+                partir de son contenu. Tu relis avant d'enregistrer. Ton PDF n'est pas conservé.
+              </p>
+            </div>
+          </div>
+
+          <UiCard>
+            <!-- Input fichier caché, piloté par les boutons ci-dessous -->
+            <input
+              ref="cvFileInput"
+              type="file"
+              accept="application/pdf"
+              class="sr-only"
+              @change="extractDesign"
+            />
+
+            <!-- Thème déjà configuré -->
+            <div v-if="baseDesign && !designPreview" class="space-y-3">
+              <UiBadge variant="brand">Design actif</UiBadge>
+              <p class="text-sm leading-relaxed text-ink-700">{{ baseDesign.summary }}</p>
+              <div class="flex flex-wrap justify-end gap-3">
+                <UiButton variant="ghost" :loading="removingDesign" @click="removeDesign">
+                  Retirer
+                </UiButton>
+                <UiButton variant="secondary" :loading="extractingDesign" @click="triggerCvUpload">
+                  <Upload class="h-4 w-4" :stroke-width="2" aria-hidden="true" />
+                  Remplacer
+                </UiButton>
+              </div>
+            </div>
+
+            <!-- Relecture avant enregistrement -->
+            <div v-else-if="designPreview" class="space-y-4">
+              <div class="flex flex-wrap items-center gap-2">
+                <UiBadge variant="brand">Relecture</UiBadge>
+                <p class="text-sm font-medium text-brand-700">
+                  Détecté — rien n'est encore enregistré.
+                </p>
+              </div>
+              <p class="text-sm leading-relaxed text-ink-700">
+                <span class="font-semibold">Design :</span> {{ designPreview.summary }}
+              </p>
+              <div class="flex flex-wrap items-center gap-3 text-sm text-ink-600">
+                <span class="inline-flex items-center gap-1.5">
+                  <span
+                    class="inline-block h-4 w-4 rounded-full ring-1 ring-border"
+                    :style="{ backgroundColor: designPreview.accent }"
+                  />
+                  Accent
+                </span>
+                <span class="inline-flex items-center gap-1.5">
+                  <span
+                    class="inline-block h-4 w-4 rounded-full ring-1 ring-border"
+                    :style="{ backgroundColor: designPreview.sidebarBg }"
+                  />
+                  Sidebar
+                </span>
+                <span>{{
+                  designPreview.layout === 'sidebar-left' ? '2 colonnes' : '1 colonne'
+                }}</span>
+                <span v-if="designPreview.font">Police : {{ designPreview.font }}</span>
+              </div>
+
+              <!-- Contenu détecté — ÉDITABLE avant écriture -->
+              <div
+                v-if="parsedPreview"
+                class="max-h-[28rem] space-y-5 overflow-y-auto rounded-card bg-brand-50 p-4 ring-1 ring-brand-200"
+              >
+                <p class="text-sm font-semibold text-brand-700">
+                  Infos détectées — relis et corrige avant d'enregistrer
+                </p>
+
+                <!-- Identité -->
+                <div class="grid gap-3 sm:grid-cols-2">
+                  <UiInput v-model="parsedPreview.fullName" label="Nom complet" placeholder="—" />
+                  <UiInput
+                    v-model="parsedPreview.email"
+                    type="email"
+                    label="E-mail"
+                    placeholder="—"
+                  />
+                  <UiInput v-model="parsedPreview.phone" label="Téléphone" placeholder="—" />
+                  <UiInput v-model="parsedPreview.location" label="Localisation" placeholder="—" />
+                </div>
+                <UiInput v-model="parsedLinksText" label="Liens" hint="Séparés par des virgules." />
+                <UiInput
+                  v-model="parsedPreview.headline"
+                  label="Intitulé de poste"
+                  placeholder="—"
+                />
+                <UiTextarea
+                  v-model="parsedPreview.summary"
+                  label="Résumé"
+                  :rows="3"
+                  placeholder="—"
+                />
+
+                <!-- Compétences clés détectées -->
+                <div v-if="parsedPreview.keySkills.length" class="space-y-2">
+                  <p class="text-sm font-semibold text-brand-700">
+                    Compétences clés ({{ parsedPreview.keySkills.length }})
+                  </p>
+                  <div
+                    v-for="(_, i) in parsedPreview.keySkills"
+                    :key="i"
+                    class="flex items-start gap-2"
+                  >
+                    <div class="flex-1">
+                      <UiTextarea
+                        v-model="parsedPreview.keySkills[i]"
+                        label=""
+                        :rows="2"
+                        placeholder="—"
+                      />
+                    </div>
+                    <button
+                      type="button"
+                      class="mt-1 shrink-0 rounded-control p-2 text-ink-400 hover:bg-danger-50 hover:text-danger-600"
+                      aria-label="Retirer"
+                      @click="parsedPreview.keySkills.splice(i, 1)"
+                    >
+                      <X class="h-4 w-4" :stroke-width="2" aria-hidden="true" />
+                    </button>
+                  </div>
+                </div>
+
+                <!-- Expériences -->
+                <div v-if="parsedPreview.experiences.length" class="space-y-3">
+                  <p class="text-sm font-semibold text-brand-700">
+                    Expériences ({{ parsedPreview.experiences.length }})
+                  </p>
+                  <div
+                    v-for="(exp, i) in parsedPreview.experiences"
+                    :key="i"
+                    class="space-y-3 rounded-card bg-surface p-3 ring-1 ring-border"
+                  >
+                    <div class="flex items-start justify-between gap-3">
+                      <div class="grid flex-1 gap-3 sm:grid-cols-2">
+                        <UiInput v-model="exp.title" label="Poste" />
+                        <UiInput v-model="exp.company" label="Entreprise" />
+                        <UiInput v-model="exp.startDate" type="month" label="Début" />
+                        <UiInput v-model="exp.endDate" type="month" label="Fin (vide = en cours)" />
+                      </div>
+                      <button
+                        type="button"
+                        class="shrink-0 rounded-control p-2 text-ink-400 transition-colors hover:bg-danger-50 hover:text-danger-600"
+                        aria-label="Retirer cette expérience"
+                        @click="removeParsedExperience(i)"
+                      >
+                        <Trash2 class="h-4 w-4" :stroke-width="1.75" aria-hidden="true" />
+                      </button>
+                    </div>
+                    <UiTextarea v-model="exp.description" label="Description" :rows="2" />
+                  </div>
+                </div>
+
+                <!-- Formations -->
+                <div v-if="parsedPreview.education.length" class="space-y-3">
+                  <p class="text-sm font-semibold text-brand-700">
+                    Formations ({{ parsedPreview.education.length }})
+                  </p>
+                  <div
+                    v-for="(ed, i) in parsedPreview.education"
+                    :key="i"
+                    class="space-y-3 rounded-card bg-surface p-3 ring-1 ring-border"
+                  >
+                    <div class="flex items-start justify-between gap-3">
+                      <div class="grid flex-1 gap-3 sm:grid-cols-2">
+                        <UiInput v-model="ed.degree" label="Diplôme / titre" />
+                        <UiInput v-model="ed.school" label="Établissement" />
+                        <UiInput v-model="ed.startDate" type="month" label="Début" />
+                        <UiInput v-model="ed.endDate" type="month" label="Fin" />
+                      </div>
+                      <button
+                        type="button"
+                        class="shrink-0 rounded-control p-2 text-ink-400 transition-colors hover:bg-danger-50 hover:text-danger-600"
+                        aria-label="Retirer cette formation"
+                        @click="removeParsedEducation(i)"
+                      >
+                        <Trash2 class="h-4 w-4" :stroke-width="1.75" aria-hidden="true" />
+                      </button>
+                    </div>
+                    <UiTextarea v-model="ed.description" label="Description" :rows="2" />
+                  </div>
+                </div>
+
+                <!-- Compétences -->
+                <div v-if="parsedPreview.skills.length" class="space-y-2">
+                  <p class="text-sm font-semibold text-brand-700">
+                    Compétences ({{ parsedPreview.skills.length }})
+                  </p>
+                  <div
+                    v-for="(sk, i) in parsedPreview.skills"
+                    :key="i"
+                    class="flex items-center gap-2"
+                  >
+                    <UiInput v-model="sk.label" class="flex-1" placeholder="Compétence" />
+                    <select
+                      v-model="sk.level"
+                      class="h-10 rounded-control bg-surface px-2 text-sm text-ink-900 ring-1 ring-border"
+                    >
+                      <option :value="null">Niveau ?</option>
+                      <option v-for="l in SKILL_LEVELS" :key="l" :value="l">
+                        {{ SKILL_LEVEL_LABELS[l] }}
+                      </option>
+                    </select>
+                    <button
+                      type="button"
+                      class="shrink-0 rounded-control p-2 text-ink-400 hover:bg-danger-50 hover:text-danger-600"
+                      aria-label="Retirer cette compétence"
+                      @click="removeParsedSkill(i)"
+                    >
+                      <X class="h-4 w-4" :stroke-width="2" aria-hidden="true" />
+                    </button>
+                  </div>
+                </div>
+
+                <!-- Langues -->
+                <div v-if="parsedPreview.languages.length" class="space-y-2">
+                  <p class="text-sm font-semibold text-brand-700">
+                    Langues ({{ parsedPreview.languages.length }})
+                  </p>
+                  <div
+                    v-for="(lang, i) in parsedPreview.languages"
+                    :key="i"
+                    class="flex items-center gap-2"
+                  >
+                    <UiInput v-model="lang.label" class="flex-1" placeholder="Langue" />
+                    <select
+                      v-model="lang.level"
+                      class="h-10 rounded-control bg-surface px-2 text-sm text-ink-900 ring-1 ring-border"
+                    >
+                      <option :value="null">Niveau ?</option>
+                      <option v-for="l in LANGUAGE_LEVELS" :key="l" :value="l">
+                        {{ LANGUAGE_LEVEL_LABELS[l] }}
+                      </option>
+                    </select>
+                    <button
+                      type="button"
+                      class="shrink-0 rounded-control p-2 text-ink-400 hover:bg-danger-50 hover:text-danger-600"
+                      aria-label="Retirer cette langue"
+                      @click="removeParsedLanguage(i)"
+                    >
+                      <X class="h-4 w-4" :stroke-width="2" aria-hidden="true" />
+                    </button>
+                  </div>
+                </div>
+
+                <p class="pt-1 text-xs leading-relaxed text-brand-900/70">
+                  Expériences, compétences et langues seront ajoutées. Identité et résumé ne sont
+                  remplis que s'ils sont encore vides dans ton profil.
+                </p>
+              </div>
+
+              <div class="flex flex-wrap justify-end gap-3">
+                <UiButton variant="ghost" :disabled="savingDesign" @click="clearCvPreview">
+                  Annuler
+                </UiButton>
+                <UiButton :loading="savingDesign" @click="saveDesign">
+                  Utiliser et compléter le profil
+                </UiButton>
+              </div>
+            </div>
+
+            <!-- Aucun thème : invitation à uploader -->
+            <div v-else class="flex flex-col items-center gap-3 py-4 text-center">
+              <FileText class="h-6 w-6 text-ink-400" :stroke-width="1.75" aria-hidden="true" />
+              <p class="max-w-sm text-sm text-ink-500">
+                Aucun design importé. Tes CV utilisent le modèle par défaut.
+              </p>
+              <UiButton variant="secondary" :loading="extractingDesign" @click="triggerCvUpload">
+                <Upload class="h-4 w-4" :stroke-width="2" aria-hidden="true" />
+                Importer un PDF
+              </UiButton>
+            </div>
+          </UiCard>
+        </section>
       </div>
 
       <!-- Rail latéral : progression + repère honnêteté, sticky au scroll -->
@@ -729,6 +1677,24 @@ async function applyImport() {
               </dt>
               <dd class="text-sm font-semibold tabular-nums text-ink-900">{{ skillCount }}</dd>
             </div>
+            <div class="flex items-center justify-between">
+              <dt class="flex items-center gap-2 text-sm text-ink-600">
+                <Globe class="h-4 w-4 text-brand-600" :stroke-width="1.75" aria-hidden="true" />
+                Langues
+              </dt>
+              <dd class="text-sm font-semibold tabular-nums text-ink-900">{{ languageCount }}</dd>
+            </div>
+            <div class="flex items-center justify-between">
+              <dt class="flex items-center gap-2 text-sm text-ink-600">
+                <GraduationCap
+                  class="h-4 w-4 text-brand-600"
+                  :stroke-width="1.75"
+                  aria-hidden="true"
+                />
+                Formations
+              </dt>
+              <dd class="text-sm font-semibold tabular-nums text-ink-900">{{ educationCount }}</dd>
+            </div>
           </dl>
           <p class="mt-3 text-xs leading-relaxed text-ink-500">
             Plus ton profil est complet, plus tes CV générés seront pertinents.
diff --git a/apps/app/pages/ui.vue b/apps/app/pages/ui.vue
deleted file mode 100644
index 00d7087..0000000
--- a/apps/app/pages/ui.vue
+++ /dev/null
@@ -1,373 +0,0 @@
-<script setup lang="ts">
-// Catalogue du design system — référence visuelle + QA manuelle des composants.
-// Les WS profil/génération consomment ces mêmes composants et tokens.
-import type { Component } from 'vue'
-import {
-  Briefcase,
-  CircleAlert,
-  CircleCheck,
-  Download,
-  FileText,
-  GraduationCap,
-  Inbox,
-  Info,
-  Mail,
-  MapPin,
-  Pencil,
-  Plus,
-  Sparkles,
-  Trash2,
-  TriangleAlert,
-  X,
-} from '@lucide/vue'
-import { BRAND } from '~/config/brand'
-
-const toast = useToast()
-
-// ─── Boutons / formulaires ──────────────────────────────────────────────────
-const sampleName = ref('Camille Martin')
-const sampleEmail = ref('camille@exemple')
-const sampleBio = ref('')
-const loadingDemo = ref(false)
-
-function simulate() {
-  loadingDemo.value = true
-  setTimeout(() => (loadingDemo.value = false), 1500)
-}
-
-// ─── Dialogue de confirmation ───────────────────────────────────────────────
-const dialogOpen = ref(false)
-const dialogLoading = ref(false)
-
-function confirmDialogDemo() {
-  dialogLoading.value = true
-  setTimeout(() => {
-    dialogLoading.value = false
-    dialogOpen.value = false
-    toast.success('Offre supprimée', 'Démo : aucune donnée réelle touchée.')
-  }, 1200)
-}
-
-// ─── Icônes lucide utilisées dans l'app ─────────────────────────────────────
-const ICONS: { name: string; icon: Component }[] = [
-  { name: 'Download', icon: Download },
-  { name: 'FileText', icon: FileText },
-  { name: 'Sparkles', icon: Sparkles },
-  { name: 'Mail', icon: Mail },
-  { name: 'MapPin', icon: MapPin },
-  { name: 'Briefcase', icon: Briefcase },
-  { name: 'GraduationCap', icon: GraduationCap },
-  { name: 'Plus', icon: Plus },
-  { name: 'Pencil', icon: Pencil },
-  { name: 'Trash2', icon: Trash2 },
-  { name: 'Inbox', icon: Inbox },
-  { name: 'X', icon: X },
-  { name: 'CircleCheck', icon: CircleCheck },
-  { name: 'CircleAlert', icon: CircleAlert },
-  { name: 'Info', icon: Info },
-  { name: 'TriangleAlert', icon: TriangleAlert },
-]
-
-// ─── Tokens (classes en littéraux complets : requis par le scanner Tailwind) ─
-const SHADOWS = [
-  { name: 'shadow-xs', class: 'shadow-xs' },
-  { name: 'shadow-sm', class: 'shadow-sm' },
-  { name: 'shadow-card', class: 'shadow-card' },
-  { name: 'shadow-card-hover', class: 'shadow-card-hover' },
-  { name: 'shadow-pop', class: 'shadow-pop' },
-  { name: 'shadow-brand', class: 'shadow-brand' },
-]
-
-const BRAND_SCALE = [
-  { step: '50', class: 'bg-brand-50' },
-  { step: '100', class: 'bg-brand-100' },
-  { step: '200', class: 'bg-brand-200' },
-  { step: '300', class: 'bg-brand-300' },
-  { step: '400', class: 'bg-brand-400' },
-  { step: '500', class: 'bg-brand-500' },
-  { step: '600', class: 'bg-brand-600' },
-  { step: '700', class: 'bg-brand-700' },
-  { step: '800', class: 'bg-brand-800' },
-  { step: '900', class: 'bg-brand-900' },
-  { step: '950', class: 'bg-brand-950' },
-]
-
-const INK_SCALE = [
-  { step: '50', class: 'bg-ink-50' },
-  { step: '100', class: 'bg-ink-100' },
-  { step: '200', class: 'bg-ink-200' },
-  { step: '300', class: 'bg-ink-300' },
-  { step: '400', class: 'bg-ink-400' },
-  { step: '500', class: 'bg-ink-500' },
-  { step: '600', class: 'bg-ink-600' },
-  { step: '700', class: 'bg-ink-700' },
-  { step: '800', class: 'bg-ink-800' },
-  { step: '900', class: 'bg-ink-900' },
-  { step: '950', class: 'bg-ink-950' },
-]
-
-const SEMANTIC_SCALES = [
-  {
-    name: 'success',
-    swatches: [
-      { step: '50', class: 'bg-success-50' },
-      { step: '100', class: 'bg-success-100' },
-      { step: '200', class: 'bg-success-200' },
-      { step: '500', class: 'bg-success-500' },
-      { step: '600', class: 'bg-success-600' },
-      { step: '700', class: 'bg-success-700' },
-    ],
-  },
-  {
-    name: 'warning',
-    swatches: [
-      { step: '50', class: 'bg-warning-50' },
-      { step: '100', class: 'bg-warning-100' },
-      { step: '200', class: 'bg-warning-200' },
-      { step: '500', class: 'bg-warning-500' },
-      { step: '600', class: 'bg-warning-600' },
-      { step: '700', class: 'bg-warning-700' },
-    ],
-  },
-  {
-    name: 'danger',
-    swatches: [
-      { step: '50', class: 'bg-danger-50' },
-      { step: '100', class: 'bg-danger-100' },
-      { step: '200', class: 'bg-danger-200' },
-      { step: '500', class: 'bg-danger-500' },
-      { step: '600', class: 'bg-danger-600' },
-      { step: '700', class: 'bg-danger-700' },
-    ],
-  },
-]
-</script>
-
-<template>
-  <div class="mx-auto w-full max-w-6xl px-6 py-10">
-    <header class="mb-8">
-      <h1 class="text-2xl font-bold tracking-tight text-ink-900">Design system</h1>
-      <p class="mt-1 text-ink-500">
-        Le langage visuel de {{ BRAND }} — tokens, composants et retours d'état (QA visuelle).
-      </p>
-    </header>
-
-    <!-- Masonry 2 colonnes sur grand écran pour exploiter la largeur. -->
-    <div class="lg:gap-6 lg:[column-count:2] [&>*]:mb-6 [&>*]:break-inside-avoid">
-      <!-- ─── Palette ─────────────────────────────────────────────────────── -->
-      <UiCard title="Palette">
-        <div class="flex flex-col gap-6">
-          <div>
-            <h3 class="text-sm font-semibold text-ink-700">brand — indigo profond</h3>
-            <div class="mt-2 flex flex-wrap gap-1.5">
-              <div v-for="s in BRAND_SCALE" :key="s.step" class="flex flex-col items-center gap-1">
-                <div class="h-9 w-9 rounded-control ring-1 ring-ink-950/10" :class="s.class" />
-                <span class="text-[10px] text-ink-500">{{ s.step }}</span>
-              </div>
-            </div>
-          </div>
-          <div>
-            <h3 class="text-sm font-semibold text-ink-700">ink — neutres chauds (stone)</h3>
-            <div class="mt-2 flex flex-wrap gap-1.5">
-              <div v-for="s in INK_SCALE" :key="s.step" class="flex flex-col items-center gap-1">
-                <div class="h-9 w-9 rounded-control ring-1 ring-ink-950/10" :class="s.class" />
-                <span class="text-[10px] text-ink-500">{{ s.step }}</span>
-              </div>
-            </div>
-          </div>
-          <div class="grid gap-6 sm:grid-cols-3">
-            <div v-for="scale in SEMANTIC_SCALES" :key="scale.name">
-              <h3 class="text-sm font-semibold text-ink-700">{{ scale.name }}</h3>
-              <div class="mt-2 flex flex-wrap gap-1.5">
-                <div
-                  v-for="s in scale.swatches"
-                  :key="s.step"
-                  class="flex flex-col items-center gap-1"
-                >
-                  <div class="h-9 w-9 rounded-control ring-1 ring-ink-950/10" :class="s.class" />
-                  <span class="text-[10px] text-ink-500">{{ s.step }}</span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </UiCard>
-
-      <!-- ─── Ombres ──────────────────────────────────────────────────────── -->
-      <UiCard title="Ombres">
-        <div class="grid grid-cols-2 gap-6 rounded-control bg-surface-warm p-6 sm:grid-cols-3">
-          <div
-            v-for="s in SHADOWS"
-            :key="s.name"
-            class="flex h-24 items-center justify-center rounded-card bg-surface"
-            :class="s.class"
-          >
-            <code class="text-xs text-ink-500">{{ s.name }}</code>
-          </div>
-        </div>
-      </UiCard>
-
-      <!-- ─── Boutons ─────────────────────────────────────────────────────── -->
-      <UiCard title="Boutons">
-        <div class="flex flex-wrap items-center gap-3">
-          <UiButton>Primaire</UiButton>
-          <UiButton variant="secondary">Secondaire</UiButton>
-          <UiButton variant="ghost">Ghost</UiButton>
-          <UiButton variant="danger">Supprimer</UiButton>
-          <UiButton disabled>Désactivé</UiButton>
-          <UiButton :loading="loadingDemo" @click="simulate">Générer</UiButton>
-        </div>
-        <div class="mt-4 flex flex-wrap items-center gap-3">
-          <UiButton size="sm">Small</UiButton>
-          <UiButton size="md">Medium</UiButton>
-          <UiButton size="lg">Large</UiButton>
-          <UiButton variant="secondary">
-            <Download class="h-4 w-4" :stroke-width="2" aria-hidden="true" />
-            Avec icône
-          </UiButton>
-        </div>
-      </UiCard>
-
-      <!-- ─── Champs de formulaire ────────────────────────────────────────── -->
-      <UiCard title="Champs de formulaire">
-        <div class="flex flex-col gap-4">
-          <UiInput
-            v-model="sampleName"
-            label="Nom complet"
-            required
-            hint="Tel qu'il apparaîtra sur le CV."
-          />
-          <UiInput
-            v-model="sampleEmail"
-            label="Email"
-            type="email"
-            error="Adresse email invalide."
-          />
-          <UiInput label="Champ désactivé" placeholder="Indisponible" disabled />
-          <UiTextarea v-model="sampleBio" label="Accroche" placeholder="Quelques lignes…" />
-        </div>
-      </UiCard>
-
-      <!-- ─── Badges ──────────────────────────────────────────────────────── -->
-      <UiCard title="Badges">
-        <div class="flex flex-wrap items-center gap-3">
-          <UiBadge variant="brand">Recommandé</UiBadge>
-          <UiBadge variant="success">Validé</UiBadge>
-          <UiBadge variant="warning">À retravailler</UiBadge>
-          <UiBadge variant="danger">Manquant</UiBadge>
-          <UiBadge variant="neutral">Brouillon</UiBadge>
-        </div>
-      </UiCard>
-
-      <!-- ─── Icônes ──────────────────────────────────────────────────────── -->
-      <UiCard title="Icônes (lucide)">
-        <p class="mb-4 text-sm text-ink-500">
-          Toujours via <code class="text-xs">@lucide/vue</code>, stroke-width 1.75–2. Jamais
-          d'émojis ni de SVG inline ad hoc.
-        </p>
-        <ul class="grid grid-cols-2 gap-3 sm:grid-cols-4">
-          <li
-            v-for="item in ICONS"
-            :key="item.name"
-            class="flex flex-col items-center gap-2 rounded-control bg-surface-warm px-2 py-4"
-          >
-            <component
-              :is="item.icon"
-              class="h-5 w-5 text-ink-700"
-              :stroke-width="1.75"
-              aria-hidden="true"
-            />
-            <span class="text-xs text-ink-500">{{ item.name }}</span>
-          </li>
-        </ul>
-      </UiCard>
-
-      <!-- ─── États ───────────────────────────────────────────────────────── -->
-      <UiCard title="États (loading / erreur / vide)">
-        <div class="grid gap-4 sm:grid-cols-3">
-          <UiState variant="loading" title="Chargement…" description="Récupération des données." />
-          <UiState variant="error" title="Erreur" description="Impossible de charger le profil.">
-            <UiButton size="sm" variant="secondary">Réessayer</UiButton>
-          </UiState>
-          <UiState
-            variant="empty"
-            title="Aucune offre"
-            description="Ajoutez une offre pour commencer."
-          >
-            <UiButton size="sm">Ajouter</UiButton>
-          </UiState>
-        </div>
-      </UiCard>
-
-      <!-- ─── Skeleton ────────────────────────────────────────────────────── -->
-      <UiCard title="Skeleton (chargement)">
-        <p class="mb-4 text-sm text-ink-500">
-          Plusieurs petits skeletons qui épousent la forme du contenu final, plutôt qu'un grand
-          bloc.
-        </p>
-        <div class="rounded-control bg-surface-warm p-6">
-          <div class="max-w-sm rounded-card bg-surface p-5 shadow-card" aria-hidden="true">
-            <div class="flex items-center gap-3">
-              <UiSkeleton class="h-10 w-10" />
-              <div class="flex-1 space-y-2">
-                <UiSkeleton class="h-4 w-1/3" />
-                <UiSkeleton class="h-3 w-1/2" />
-              </div>
-            </div>
-            <div class="mt-4 space-y-2">
-              <UiSkeleton class="h-3 w-full" />
-              <UiSkeleton class="h-3 w-5/6" />
-              <UiSkeleton class="h-3 w-2/3" />
-            </div>
-          </div>
-        </div>
-      </UiCard>
-
-      <!-- ─── Toasts ──────────────────────────────────────────────────────── -->
-      <UiCard title="Toasts">
-        <p class="mb-4 text-sm text-ink-500">
-          Feedback non bloquant après une action — via <code class="text-xs">useToast()</code>.
-        </p>
-        <div class="flex flex-wrap items-center gap-3">
-          <UiButton
-            variant="secondary"
-            @click="toast.success('Profil enregistré', 'Tes modifications sont sauvegardées.')"
-          >
-            Toast succès
-          </UiButton>
-          <UiButton
-            variant="secondary"
-            @click="toast.error('Export impossible', 'Réessaie dans quelques instants.')"
-          >
-            Toast erreur
-          </UiButton>
-          <UiButton
-            variant="secondary"
-            @click="toast.info('Génération en cours', 'Cela prend environ une minute.')"
-          >
-            Toast info
-          </UiButton>
-        </div>
-      </UiCard>
-
-      <!-- ─── Dialogue de confirmation ────────────────────────────────────── -->
-      <UiCard title="Dialogue de confirmation">
-        <p class="mb-4 text-sm text-ink-500">
-          Pour les actions irréversibles — focus initial sur « Annuler », piège de focus, fermeture
-          avec Échap.
-        </p>
-        <UiButton variant="danger" @click="dialogOpen = true">Supprimer une offre…</UiButton>
-        <UiDialog
-          v-model:open="dialogOpen"
-          title="Supprimer cette offre ?"
-          description="L'offre et les CV générés associés seront définitivement supprimés."
-          confirm-label="Supprimer"
-          cancel-label="Annuler"
-          variant="danger"
-          :loading="dialogLoading"
-          @confirm="confirmDialogDemo"
-        />
-      </UiCard>
-    </div>
-  </div>
-</template>
diff --git a/apps/app/prisma/migrations/20260619075016_profile_identity/migration.sql b/apps/app/prisma/migrations/20260619075016_profile_identity/migration.sql
new file mode 100644
index 0000000..f323ece
--- /dev/null
+++ b/apps/app/prisma/migrations/20260619075016_profile_identity/migration.sql
@@ -0,0 +1,6 @@
+-- AlterTable
+ALTER TABLE "profiles" ADD COLUMN     "email" TEXT,
+ADD COLUMN     "fullName" TEXT,
+ADD COLUMN     "links" TEXT[],
+ADD COLUMN     "location" TEXT,
+ADD COLUMN     "phone" TEXT;
diff --git a/apps/app/prisma/migrations/20260619082630_profile_languages/migration.sql b/apps/app/prisma/migrations/20260619082630_profile_languages/migration.sql
new file mode 100644
index 0000000..fede5ff
--- /dev/null
+++ b/apps/app/prisma/migrations/20260619082630_profile_languages/migration.sql
@@ -0,0 +1,25 @@
+-- CreateEnum
+CREATE TYPE "LanguageLevel" AS ENUM ('A1', 'A2', 'B1', 'B2', 'C1', 'C2', 'NATIVE');
+
+-- CreateTable
+CREATE TABLE "languages" (
+    "id" TEXT NOT NULL,
+    "profileId" TEXT NOT NULL,
+    "label" TEXT NOT NULL,
+    "level" "LanguageLevel",
+    "orderIndex" INTEGER NOT NULL DEFAULT 0,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "deletedAt" TIMESTAMP(3),
+
+    CONSTRAINT "languages_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE INDEX "languages_profileId_idx" ON "languages"("profileId");
+
+-- CreateIndex
+CREATE INDEX "languages_deletedAt_idx" ON "languages"("deletedAt");
+
+-- AddForeignKey
+ALTER TABLE "languages" ADD CONSTRAINT "languages_profileId_fkey" FOREIGN KEY ("profileId") REFERENCES "profiles"("id") ON DELETE CASCADE ON UPDATE CASCADE;
diff --git a/apps/app/prisma/migrations/20260619083557_profile_base_cv_design/migration.sql b/apps/app/prisma/migrations/20260619083557_profile_base_cv_design/migration.sql
new file mode 100644
index 0000000..fbced7c
--- /dev/null
+++ b/apps/app/prisma/migrations/20260619083557_profile_base_cv_design/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "profiles" ADD COLUMN     "baseCvDesign" JSONB;
diff --git a/apps/app/prisma/migrations/20260619122800_candidatures/migration.sql b/apps/app/prisma/migrations/20260619122800_candidatures/migration.sql
new file mode 100644
index 0000000..3a30e08
--- /dev/null
+++ b/apps/app/prisma/migrations/20260619122800_candidatures/migration.sql
@@ -0,0 +1,26 @@
+-- CreateEnum
+CREATE TYPE "candidature_status" AS ENUM ('DRAFT', 'SUBMITTED', 'INTERVIEW', 'REJECTED', 'ACCEPTED');
+
+-- CreateTable
+CREATE TABLE "candidatures" (
+    "id" TEXT NOT NULL,
+    "userId" TEXT NOT NULL,
+    "label" TEXT NOT NULL,
+    "status" "candidature_status" NOT NULL DEFAULT 'DRAFT',
+    "offerSnapshot" JSONB NOT NULL,
+    "matchScore" INTEGER NOT NULL,
+    "matchReport" JSONB NOT NULL,
+    "generatedCv" JSONB NOT NULL,
+    "design" JSONB,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "deletedAt" TIMESTAMP(3),
+
+    CONSTRAINT "candidatures_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE INDEX "candidatures_userId_deletedAt_idx" ON "candidatures"("userId", "deletedAt");
+
+-- CreateIndex
+CREATE INDEX "candidatures_deletedAt_idx" ON "candidatures"("deletedAt");
diff --git a/apps/app/prisma/migrations/20260619133422_profile_key_skills/migration.sql b/apps/app/prisma/migrations/20260619133422_profile_key_skills/migration.sql
new file mode 100644
index 0000000..0ee102c
--- /dev/null
+++ b/apps/app/prisma/migrations/20260619133422_profile_key_skills/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "profiles" ADD COLUMN     "keySkills" TEXT[];
diff --git a/apps/app/prisma/schema.prisma b/apps/app/prisma/schema.prisma
index f475aa3..7cb3942 100644
--- a/apps/app/prisma/schema.prisma
+++ b/apps/app/prisma/schema.prisma
@@ -59,6 +59,17 @@ enum SkillLevel {
   EXPERT
 }
 
+// Niveau de maîtrise d'une langue — cadre européen (CEFR) + langue maternelle.
+enum LanguageLevel {
+  A1
+  A2
+  B1
+  B2
+  C1
+  C2
+  NATIVE
+}
+
 // Compte utilisateur — ancre d'authentification (le WS Auth y greffera Better
 // Auth + ses tables satellites). Données auth hébergées en FR/UE (RGPD).
 model User {
@@ -85,8 +96,19 @@ model Profile {
   id        String    @id @default(uuid())
   userId    String    @unique
   user      User      @relation(fields: [userId], references: [id], onDelete: Cascade)
+  // Identité affichée en tête de CV — FACTUELLE, jamais reformulée par le moteur
+  // (cf. @cvo/shared cv.ts). Injectée déterministe-ment dans le header généré.
+  fullName  String? // nom complet du candidat (ex. « Camille Martin »)
+  email     String? // email de contact affiché (défaut : email du compte)
+  phone     String? // téléphone de contact
+  location  String? // localisation (ex. « Paris, France »)
+  links     String[] // liens (portfolio, LinkedIn, GitHub…)
+  keySkills String[] // compétences clés : phrases (verbe d'action), section au-dessus des expériences
   headline  String? // intitulé court (ex. « Développeur Full-Stack »)
   summary   String? // résumé / accroche
+  // Thème « CV de base » capturé depuis un PDF (style uniquement, jamais de
+  // contenu) : { css, googleFont, summary }. Le PDF source n'est JAMAIS stocké.
+  baseCvDesign Json?
   createdAt DateTime  @default(now())
   updatedAt DateTime  @updatedAt
   deletedAt DateTime?
@@ -94,6 +116,7 @@ model Profile {
   experiences Experience[]
   skills      Skill[]
   education   Education[]
+  languages   Language[]
 
   @@index([deletedAt])
   @@map("profiles")
@@ -138,6 +161,23 @@ model Skill {
   @@map("skills")
 }
 
+// Langue déclarée par le candidat (n par profil).
+model Language {
+  id         String         @id @default(uuid())
+  profileId  String
+  profile    Profile        @relation(fields: [profileId], references: [id], onDelete: Cascade)
+  label      String // libellé libre (ex. « Français », « Anglais »)
+  level      LanguageLevel?
+  orderIndex Int            @default(0)
+  createdAt  DateTime       @default(now())
+  updatedAt  DateTime       @updatedAt
+  deletedAt  DateTime?
+
+  @@index([profileId])
+  @@index([deletedAt])
+  @@map("languages")
+}
+
 // Formation / diplôme (n par profil).
 model Education {
   id          String    @id @default(uuid())
@@ -158,6 +198,41 @@ model Education {
   @@map("education")
 }
 
+// ─────────────────────────────────────────────────────────────────────────────
+// Candidature — une candidature persistée = offre analysée + CV généré (éditable)
+// + suivi. Rend le CV durable (plus de perte au changement d'onglet) et alimente
+// la liste de suivi. `userId` opaque (même pattern que UsageEvent, pas de FK).
+// Json : offre/CV/design (jamais loggés ; RGPD = données du candidat, pas de tiers).
+// ─────────────────────────────────────────────────────────────────────────────
+enum CandidatureStatus {
+  DRAFT // brouillon
+  SUBMITTED // postulé
+  INTERVIEW // entretien
+  REJECTED // refusé
+  ACCEPTED // accepté
+
+  @@map("candidature_status")
+}
+
+model Candidature {
+  id            String            @id @default(uuid())
+  userId        String
+  label         String // titre dénormalisé pour la liste (= offre.title à la création)
+  status        CandidatureStatus @default(DRAFT)
+  offerSnapshot Json // AnalyzedOffer figée
+  matchScore    Int // dénormalisé depuis MatchReport.score (tri/badge)
+  matchReport   Json // MatchReport complet
+  generatedCv   Json // RenderableCv — copie de travail éditable
+  design        Json? // CvDesign par-candidature (null = fallback profil/défaut)
+  createdAt     DateTime          @default(now())
+  updatedAt     DateTime          @updatedAt
+  deletedAt     DateTime?
+
+  @@index([userId, deletedAt])
+  @@index([deletedAt])
+  @@map("candidatures")
+}
+
 // Metering — usage_events + usage_counters (THI-120 §2 · THI-126)
 //
 // On mesure l'usage DÈS le MVP (même gratuit) pour préparer le billing freemium.
diff --git a/apps/app/server/api/candidature/analyze.post.ts b/apps/app/server/api/candidature/analyze.post.ts
index 5d1cbfb..a81ff6f 100644
--- a/apps/app/server/api/candidature/analyze.post.ts
+++ b/apps/app/server/api/candidature/analyze.post.ts
@@ -44,6 +44,7 @@ export default defineEventHandler(async (event): Promise<AnalyzeCandidatureRespo
       experiences: { orderBy: { orderIndex: 'asc' } },
       skills: { orderBy: { orderIndex: 'asc' } },
       education: { orderBy: { orderIndex: 'asc' } },
+      languages: { orderBy: { orderIndex: 'asc' } },
     },
   })
   const profile = profileRow ? toProfileDTO(profileRow) : null
diff --git a/apps/app/server/api/candidature/generate.post.ts b/apps/app/server/api/candidature/generate.post.ts
index bce9120..6b97eb8 100644
--- a/apps/app/server/api/candidature/generate.post.ts
+++ b/apps/app/server/api/candidature/generate.post.ts
@@ -10,12 +10,16 @@
  * RGPD : ni l'offre, ni le profil, ni le CV ne sont loggés — seulement les tokens.
  */
 import { z } from 'zod'
+import { Prisma } from '@prisma/client'
 import {
   FREE_TIER_QUOTAS,
   ProvenanceError,
   QUOTA_EXCEEDED_CODE,
   type AnalyzedOffer,
-  type RenderableCv,
+  type CvContact,
+  type GenerateCandidatureResponse,
+  type MatchReport,
+  type ProfileDTO,
 } from '@cvo/shared'
 import { requireUserId } from '../../utils/session'
 import { prisma } from '../../utils/prisma'
@@ -23,6 +27,7 @@ import { NOT_DELETED, toProfileDTO } from '../../utils/profile-serialize'
 import { isUsageAllowed, recordUsageEvent } from '../../utils/metering'
 import { anthropicComplete, LlmError, type LlmComplete } from '../../utils/anthropic'
 import { matchProfileToOffer } from '../../services/matching'
+import { adaptKeySkills } from '../../services/keyskills-adapt'
 
 const bodySchema = z.object({
   offer: z.object({
@@ -31,23 +36,34 @@ const bodySchema = z.object({
     keywords: z.array(z.string()),
     seniority: z.enum(['junior', 'mid', 'senior', 'lead']).nullable(),
   }),
+  // Rapport de match déjà calculé à /analyze — persisté avec la candidature.
+  match: z.object({
+    score: z.number(),
+    reasons: z.array(z.string()),
+    matchedKeywords: z.array(z.string()),
+    missingKeywords: z.array(z.string()),
+  }),
 })
 
-export default defineEventHandler(async (event): Promise<{ cv: RenderableCv }> => {
+export default defineEventHandler(async (event): Promise<GenerateCandidatureResponse> => {
   const userId = requireUserId(event)
 
   const parsed = bodySchema.safeParse(await readBody(event))
   if (!parsed.success) {
     throw createError({
       statusCode: 400,
-      message: 'Corps invalide : { offer: AnalyzedOffer } attendu.',
+      message: 'Corps invalide : { offer: AnalyzedOffer, match: MatchReport } attendu.',
     })
   }
   const offer: AnalyzedOffer = parsed.data.offer
+  const match: MatchReport = parsed.data.match
 
   // Gate quota AVANT tout appel LLM (aucun token consommé si quota atteint).
+  // Bypass via env DISABLE_GENERATION_LIMIT=true (dev/temporaire — le modèle éco
+  // freemium reste en place, ce n'est PAS un illimité de prod).
   const now = new Date()
-  const allowed = await isUsageAllowed(prisma, userId, 'generation', FREE_TIER_QUOTAS, now)
+  const limitDisabled = process.env.DISABLE_GENERATION_LIMIT === 'true'
+  const allowed = limitDisabled || (await isUsageAllowed(prisma, userId, 'generation', FREE_TIER_QUOTAS, now))
   if (!allowed) {
     throw createError({
       statusCode: 403,
@@ -63,6 +79,7 @@ export default defineEventHandler(async (event): Promise<{ cv: RenderableCv }> =
       experiences: { orderBy: { orderIndex: 'asc' } },
       skills: { orderBy: { orderIndex: 'asc' } },
       education: { orderBy: { orderIndex: 'asc' } },
+      languages: { orderBy: { orderIndex: 'asc' } },
     },
   })
   const profile = profileRow ? toProfileDTO(profileRow) : null
@@ -74,6 +91,23 @@ export default defineEventHandler(async (event): Promise<{ cv: RenderableCv }> =
     })
   }
 
+  // Identité du candidat (nom + email par défaut) : factuelle, posée côté serveur
+  // — jamais inventée par le LLM. Le compte fournit l'email de repli.
+  const account = await prisma.user.findUnique({
+    where: { id: userId },
+    select: { name: true, email: true },
+  })
+  const fullName = (profile.fullName ?? '').trim() || (account?.name ?? '').trim()
+  if (!fullName) {
+    // Sans nom, le header du CV serait vide et l'export PDF échouerait (400).
+    // On guide vers le profil AVANT de consommer un appel LLM.
+    throw createError({
+      statusCode: 409,
+      message: 'Ajoute ton nom complet à ton profil',
+      data: { code: 'profile_name_missing' },
+    })
+  }
+
   // Mesure des tokens via onUsage (jamais de contenu).
   let tokensIn = 0
   let tokensOut = 0
@@ -89,13 +123,60 @@ export default defineEventHandler(async (event): Promise<{ cv: RenderableCv }> =
   try {
     const cv = await matchProfileToOffer(profile, offer, { complete })
 
+    // Identité = données factuelles : on écrase ce que le LLM a pu produire dans
+    // le header (nom + contacts) par les valeurs réelles du profil/compte. La
+    // provenance et l'accroche reformulée par le moteur sont conservées.
+    cv.header.fullName = fullName
+    cv.header.contacts = buildContacts(profile, account?.email ?? null)
+
+    // Compétences clés (phrases verbe d'action) : on PART des phrases réelles du
+    // profil et on les fait ADAPTER à l'offre (reformulation/priorisation), borné
+    // aux phrases sources — jamais d'ajout. Repli verbatim si l'adaptation échoue.
+    // Posées au-dessus des expériences ; provenance = profil (garde-fou satisfait).
+    if (profile.keySkills.length) {
+      let phrases = profile.keySkills
+      try {
+        phrases = await adaptKeySkills(profile.keySkills, offer, { complete })
+      } catch {
+        phrases = profile.keySkills
+      }
+      const keySection = {
+        kind: 'keyskills' as const,
+        title: 'Compétences clés',
+        entries: phrases.map((text, i) => ({
+          id: `ks-${i}`,
+          text,
+          provenance: { profileItemId: profile.id, reformulated: true },
+        })),
+      }
+      const expIdx = cv.sections.findIndex((s) => s.kind === 'experience')
+      cv.sections.splice(expIdx >= 0 ? expIdx : cv.sections.length, 0, keySection)
+    }
+
     await recordUsageEvent(
       prisma,
       { userId, type: 'generation', tokensIn, tokensOut, billable: false },
       new Date(),
     )
 
-    return { cv }
+    // Persiste la candidature (CV durable + suivi). Design seedé depuis le « CV de
+    // base » du profil (ou null → fallback au rendu). Statut initial = brouillon.
+    const candidature = await prisma.candidature.create({
+      data: {
+        userId,
+        label: offer.title,
+        offerSnapshot: offer as unknown as Prisma.InputJsonValue,
+        matchScore: Math.round(match.score),
+        matchReport: match as unknown as Prisma.InputJsonValue,
+        generatedCv: cv as unknown as Prisma.InputJsonValue,
+        design: profile.baseCvDesign
+          ? (profile.baseCvDesign as unknown as Prisma.InputJsonValue)
+          : Prisma.DbNull,
+      },
+      select: { id: true },
+    })
+
+    return { cv, candidatureId: candidature.id }
   } catch (err) {
     // Garde-fou de provenance : le LLM a produit un élément non sourcé — rejeté.
     if (err instanceof ProvenanceError) {
@@ -114,3 +195,29 @@ export default defineEventHandler(async (event): Promise<{ cv: RenderableCv }> =
     throw err
   }
 })
+
+/**
+ * Construit les contacts factuels du header à partir du profil (email du compte
+ * en repli). Aucune reformulation : valeurs reprises telles quelles.
+ */
+function buildContacts(profile: ProfileDTO, accountEmail: string | null): CvContact[] {
+  const contacts: CvContact[] = []
+  const email = (profile.email ?? '').trim() || (accountEmail ?? '').trim()
+  if (email) contacts.push({ kind: 'email', label: 'Email', value: email })
+  if (profile.phone?.trim()) contacts.push({ kind: 'phone', label: 'Téléphone', value: profile.phone.trim() })
+  if (profile.location?.trim()) contacts.push({ kind: 'location', label: 'Localisation', value: profile.location.trim() })
+  for (const raw of profile.links ?? []) {
+    const value = raw.trim()
+    if (value) contacts.push({ kind: 'link', label: linkLabel(value), value })
+  }
+  return contacts
+}
+
+/** Libellé lisible d'un lien (hôte sans `www.`), avec repli sur « Lien ». */
+function linkLabel(url: string): string {
+  try {
+    return new URL(url).hostname.replace(/^www\./, '')
+  } catch {
+    return 'Lien'
+  }
+}
diff --git a/apps/app/server/api/candidatures/[id].delete.ts b/apps/app/server/api/candidatures/[id].delete.ts
new file mode 100644
index 0000000..e232cff
--- /dev/null
+++ b/apps/app/server/api/candidatures/[id].delete.ts
@@ -0,0 +1,21 @@
+/**
+ * DELETE /api/candidatures/:id — soft-delete d'une candidature.
+ */
+import { requireUserId } from '../../utils/session'
+import { prisma } from '../../utils/prisma'
+import { NOT_DELETED } from '../../utils/profile-serialize'
+
+export default defineEventHandler(async (event) => {
+  const userId = requireUserId(event)
+  const id = getRouterParam(event, 'id')
+  if (!id) throw createError({ statusCode: 400, message: 'id requis.' })
+
+  const existing = await prisma.candidature.findFirst({
+    where: { id, userId, ...NOT_DELETED },
+    select: { id: true },
+  })
+  if (!existing) throw createError({ statusCode: 404, message: 'Candidature introuvable.' })
+
+  await prisma.candidature.update({ where: { id }, data: { deletedAt: new Date() } })
+  return { ok: true }
+})
diff --git a/apps/app/server/api/candidatures/[id].get.ts b/apps/app/server/api/candidatures/[id].get.ts
new file mode 100644
index 0000000..aa34df1
--- /dev/null
+++ b/apps/app/server/api/candidatures/[id].get.ts
@@ -0,0 +1,19 @@
+/**
+ * GET /api/candidatures/:id — candidature complète (offre + match + CV + design).
+ * Pour l'éditeur. 404 si absente / pas au propriétaire.
+ */
+import { requireUserId } from '../../utils/session'
+import { prisma } from '../../utils/prisma'
+import { NOT_DELETED } from '../../utils/profile-serialize'
+import { toCandidatureDTO } from '../../utils/candidature-serialize'
+
+export default defineEventHandler(async (event) => {
+  const userId = requireUserId(event)
+  const id = getRouterParam(event, 'id')
+  if (!id) throw createError({ statusCode: 400, message: 'id requis.' })
+
+  const row = await prisma.candidature.findFirst({ where: { id, userId, ...NOT_DELETED } })
+  if (!row) throw createError({ statusCode: 404, message: 'Candidature introuvable.' })
+
+  return toCandidatureDTO(row)
+})
diff --git a/apps/app/server/api/candidatures/[id].patch.ts b/apps/app/server/api/candidatures/[id].patch.ts
new file mode 100644
index 0000000..58a5569
--- /dev/null
+++ b/apps/app/server/api/candidatures/[id].patch.ts
@@ -0,0 +1,54 @@
+/**
+ * PATCH /api/candidatures/:id — met à jour une candidature (champs optionnels :
+ * cv, design, status, label). Le `cv` repasse le garde-fou de provenance avant
+ * persistance ; le `design` est re-normalisé. 404 si pas au propriétaire.
+ */
+import { Prisma } from '@prisma/client'
+import { CANDIDATURE_STATUSES, type CandidatureStatus } from '@cvo/shared'
+import { requireUserId } from '../../utils/session'
+import { prisma } from '../../utils/prisma'
+import { NOT_DELETED } from '../../utils/profile-serialize'
+import { parseRenderableCvBody } from '../../utils/cv-render-input'
+import { normalizeDesign } from '../../utils/cv-design-tokens'
+import { toCandidatureDTO } from '../../utils/candidature-serialize'
+
+export default defineEventHandler(async (event) => {
+  const userId = requireUserId(event)
+  const id = getRouterParam(event, 'id')
+  if (!id) throw createError({ statusCode: 400, message: 'id requis.' })
+
+  const existing = await prisma.candidature.findFirst({
+    where: { id, userId, ...NOT_DELETED },
+    select: { id: true },
+  })
+  if (!existing) throw createError({ statusCode: 404, message: 'Candidature introuvable.' })
+
+  const body = (await readBody(event)) as Record<string, unknown>
+  const data: Prisma.CandidatureUpdateInput = {}
+
+  if (body.cv !== undefined) {
+    // Re-applique la validation + garde-fou provenance (400/422 si invalide).
+    const cv = parseRenderableCvBody(body.cv)
+    data.generatedCv = cv as unknown as Prisma.InputJsonValue
+  }
+  if (body.design !== undefined) {
+    data.design =
+      body.design === null
+        ? Prisma.DbNull
+        : (normalizeDesign(body.design) as unknown as Prisma.InputJsonValue)
+  }
+  if (body.status !== undefined) {
+    if (!CANDIDATURE_STATUSES.includes(body.status as CandidatureStatus)) {
+      throw createError({ statusCode: 400, message: 'Statut invalide.' })
+    }
+    data.status = body.status as CandidatureStatus
+  }
+  if (body.label !== undefined) {
+    const label = String(body.label).trim().slice(0, 150)
+    if (!label) throw createError({ statusCode: 400, message: 'Libellé vide.' })
+    data.label = label
+  }
+
+  const row = await prisma.candidature.update({ where: { id }, data })
+  return toCandidatureDTO(row)
+})
diff --git a/apps/app/server/api/candidatures/index.get.ts b/apps/app/server/api/candidatures/index.get.ts
new file mode 100644
index 0000000..187b0ff
--- /dev/null
+++ b/apps/app/server/api/candidatures/index.get.ts
@@ -0,0 +1,18 @@
+/**
+ * GET /api/candidatures — liste des candidatures de l'utilisateur (suivi).
+ * Léger : on ne sélectionne pas les gros JSON (offre/CV/design).
+ */
+import { requireUserId } from '../../utils/session'
+import { prisma } from '../../utils/prisma'
+import { NOT_DELETED } from '../../utils/profile-serialize'
+import { toCandidatureListItemDTO } from '../../utils/candidature-serialize'
+
+export default defineEventHandler(async (event) => {
+  const userId = requireUserId(event)
+  const rows = await prisma.candidature.findMany({
+    where: { userId, ...NOT_DELETED },
+    orderBy: { updatedAt: 'desc' },
+    select: { id: true, label: true, status: true, matchScore: true, createdAt: true, updatedAt: true },
+  })
+  return rows.map(toCandidatureListItemDTO)
+})
diff --git a/apps/app/server/api/cv/export-pdf.post.ts b/apps/app/server/api/cv/export-pdf.post.ts
index 9d2af04..1ff9923 100644
--- a/apps/app/server/api/cv/export-pdf.post.ts
+++ b/apps/app/server/api/cv/export-pdf.post.ts
@@ -3,67 +3,27 @@
  * Corps : RenderableCv (JSON).
  * Réponse : PDF binaire (application/pdf), Content-Disposition: attachment.
  *
- * Flux : parse Zod → assertValidCv → buildCvHtml → renderHtmlToPdf.
+ * Flux : parse Zod + garde-fou provenance → buildCvHtml (thème « CV de base » si
+ * configuré) → renderHtmlToPdf.
  * Sécurité : données non loggées (RGPD) ; HTML échappé par buildCvHtml.
  */
 
-import { z } from 'zod'
-import { assertValidCv } from '@cvo/shared'
-import type { RenderableCv } from '@cvo/shared'
+import type { CvDesign } from '@cvo/shared'
 import { buildCvHtml } from '../../utils/cv-html'
 import { renderHtmlToPdf } from '../../utils/pdf'
-
-const Provenance = z.object({ profileItemId: z.string(), reformulated: z.boolean() })
-const Contact = z.object({ kind: z.enum(['email', 'phone', 'location', 'link']), label: z.string(), value: z.string() })
-const Bullet = z.object({ id: z.string(), text: z.string(), provenance: Provenance })
-const BaseEntry = z.object({ id: z.string(), provenance: Provenance })
-
-const Section = z.discriminatedUnion('kind', [
-  z.object({ kind: z.literal('summary'), title: z.string(), text: z.string(), provenance: Provenance }),
-  z.object({ kind: z.literal('experience'), title: z.string(), entries: z.array(BaseEntry.extend({ role: z.string(), organization: z.string(), period: z.string(), location: z.string().optional(), bullets: z.array(Bullet) })) }),
-  z.object({ kind: z.literal('skills'), title: z.string(), entries: z.array(BaseEntry.extend({ label: z.string() })) }),
-  z.object({ kind: z.literal('education'), title: z.string(), entries: z.array(BaseEntry.extend({ degree: z.string(), institution: z.string(), period: z.string() })) }),
-])
-
-const RenderableCvSchema = z.object({
-  header: z.object({ fullName: z.string().min(1), headline: z.string(), contacts: z.array(Contact), provenance: Provenance }),
-  sections: z.array(Section),
-  locale: z.literal('fr'),
-})
+import { loadBaseCvDesign } from '../../utils/cv-design'
+import { parseRenderInput } from '../../utils/cv-render-input'
 
 export default defineEventHandler(async (event) => {
-  const raw = await readBody(event)
-  const parsed = RenderableCvSchema.safeParse(raw)
-  if (!parsed.success) {
-    throw createError({ statusCode: 400, message: 'Corps invalide : ' + parsed.error.message })
-  }
-  const cv = parsed.data as RenderableCv
+  const { cv, design: bodyDesign } = parseRenderInput(await readBody(event))
 
-  // Garde-fou provenance. Au MVP : les profileItemIds déclarés dans le CV lui-même
-  // servent de proxy du profile_snapshot (THI-123 fournira les vrais ids).
-  try {
-    assertValidCv(cv, extractDeclaredIds(cv))
-  } catch (err) {
-    throw createError({ statusCode: 422, message: (err as Error).message })
-  }
+  // Design par-candidature (body) > thème de profil > défaut. Avec un design, on
+  // rend en pleine page (marges nulles) ; le gabarit gère ses paddings.
+  const design: CvDesign | null = bodyDesign ?? (await loadBaseCvDesign(event))
 
-  const pdfBuffer = await renderHtmlToPdf(buildCvHtml(cv))
+  const pdfBuffer = await renderHtmlToPdf(buildCvHtml(cv, design), { fullBleed: !!design })
 
   setHeader(event, 'Content-Type', 'application/pdf')
   setHeader(event, 'Content-Disposition', 'attachment; filename="cv.pdf"')
   return new Uint8Array(pdfBuffer)
 })
-
-/** Extrait tous les profileItemIds déclarés dans le CV (proxy de profile_snapshot au MVP). */
-function extractDeclaredIds(cv: RenderableCv): Set<string> {
-  const ids = new Set<string>()
-  const add = (p: { profileItemId: string } | undefined) => { if (p?.profileItemId) ids.add(p.profileItemId) }
-
-  add(cv.header?.provenance)
-  for (const s of cv.sections ?? []) {
-    if (s.kind === 'summary') { add(s.provenance) }
-    else if (s.kind === 'experience') { for (const e of s.entries) { add(e.provenance); for (const b of e.bullets) add(b.provenance) } }
-    else if (s.kind === 'skills' || s.kind === 'education') { for (const e of s.entries) add(e.provenance) }
-  }
-  return ids
-}
diff --git a/apps/app/server/api/cv/preview.post.ts b/apps/app/server/api/cv/preview.post.ts
new file mode 100644
index 0000000..5da6cd8
--- /dev/null
+++ b/apps/app/server/api/cv/preview.post.ts
@@ -0,0 +1,19 @@
+/**
+ * POST /api/cv/preview
+ * Corps : `RenderableCv` nu OU `{ cv, design? }`. Réponse : document HTML complet.
+ *
+ * Sert l'aperçu écran (iframe sandbox), même HTML que l'export PDF. Le design
+ * provient du body (éditeur, design par-candidature) sinon du profil sinon défaut.
+ */
+import type { CvDesign } from '@cvo/shared'
+import { buildCvHtml } from '../../utils/cv-html'
+import { loadBaseCvDesign } from '../../utils/cv-design'
+import { parseRenderInput } from '../../utils/cv-render-input'
+
+export default defineEventHandler(async (event) => {
+  const { cv, design } = parseRenderInput(await readBody(event))
+  const effective: CvDesign | null = design ?? (await loadBaseCvDesign(event))
+
+  setHeader(event, 'Content-Type', 'text/html; charset=utf-8')
+  return buildCvHtml(cv, effective)
+})
diff --git a/apps/app/server/api/profile/cv-design.delete.ts b/apps/app/server/api/profile/cv-design.delete.ts
new file mode 100644
index 0000000..80b31eb
--- /dev/null
+++ b/apps/app/server/api/profile/cv-design.delete.ts
@@ -0,0 +1,20 @@
+/**
+ * DELETE /api/profile/cv-design — Retire le thème « CV de base » (revient au
+ * template par défaut pour les futures générations).
+ */
+import { Prisma } from '@prisma/client'
+import { getAuthSession } from '../../utils/session'
+import { prisma } from '../../utils/prisma'
+import { NOT_DELETED } from '../../utils/profile-serialize'
+
+export default defineEventHandler(async (event) => {
+  const session = await getAuthSession(event)
+  if (!session?.user) throw createError({ statusCode: 401, message: 'Non authentifié.' })
+
+  const profile = await prisma.profile.findFirst({ where: { userId: session.user.id, ...NOT_DELETED } })
+  if (!profile) throw createError({ statusCode: 404, message: 'Profil introuvable.' })
+
+  // `DbNull` = NULL SQL (le champ Json nullable est vidé).
+  await prisma.profile.update({ where: { id: profile.id }, data: { baseCvDesign: Prisma.DbNull } })
+  return { ok: true }
+})
diff --git a/apps/app/server/api/profile/cv-design.put.ts b/apps/app/server/api/profile/cv-design.put.ts
new file mode 100644
index 0000000..048e237
--- /dev/null
+++ b/apps/app/server/api/profile/cv-design.put.ts
@@ -0,0 +1,27 @@
+/**
+ * PUT /api/profile/cv-design — Persiste les tokens de design « CV de base »
+ * (après relecture). Les tokens sont validés/normalisés (couleurs hex, police
+ * bornée, layout dans l'enum). Aucun CSS brut n'est stocké.
+ */
+import { Prisma } from '@prisma/client'
+import type { CvDesign } from '@cvo/shared'
+import { getAuthSession } from '../../utils/session'
+import { prisma } from '../../utils/prisma'
+import { NOT_DELETED } from '../../utils/profile-serialize'
+import { normalizeDesign } from '../../utils/cv-design-tokens'
+
+export default defineEventHandler(async (event) => {
+  const session = await getAuthSession(event)
+  if (!session?.user) throw createError({ statusCode: 401, message: 'Non authentifié.' })
+
+  const profile = await prisma.profile.findFirst({ where: { userId: session.user.id, ...NOT_DELETED } })
+  if (!profile) throw createError({ statusCode: 404, message: 'Profil introuvable.' })
+
+  const design: CvDesign = normalizeDesign(await readBody(event))
+
+  await prisma.profile.update({
+    where: { id: profile.id },
+    data: { baseCvDesign: design as unknown as Prisma.InputJsonValue },
+  })
+  return design
+})
diff --git a/apps/app/server/api/profile/cv-design/extract.post.ts b/apps/app/server/api/profile/cv-design/extract.post.ts
new file mode 100644
index 0000000..db9f40f
--- /dev/null
+++ b/apps/app/server/api/profile/cv-design/extract.post.ts
@@ -0,0 +1,72 @@
+/**
+ * POST /api/profile/cv-design/extract — étape 1 du « CV de base ».
+ *
+ * Corps : multipart, champ fichier = PDF du CV existant. Réponse : { design }
+ * (thème extrait, sanitisé) AVANT toute persistance — l'utilisateur relit puis
+ * confirme (cf. flux import-text). Le PDF n'est JAMAIS stocké ni loggé (RGPD) :
+ * seuls les tokens sont mesurés.
+ */
+import { requireUserId } from '../../../utils/session'
+import { prisma } from '../../../utils/prisma'
+import { recordUsageEvent } from '../../../utils/metering'
+import { anthropicComplete, LlmError, type LlmComplete } from '../../../utils/anthropic'
+import { extractCvDesign } from '../../../services/cv-design-extract'
+import { extractCvContent } from '../../../services/cv-content-extract'
+
+/** Borne de garde : marge confortable sous la limite API (32 Mo). */
+const MAX_PDF_BYTES = 8 * 1024 * 1024
+
+export default defineEventHandler(async (event) => {
+  const userId = requireUserId(event)
+
+  const parts = await readMultipartFormData(event)
+  const file = parts?.find((p) => p.filename && p.data?.length)
+  if (!file) {
+    throw createError({ statusCode: 400, message: 'Aucun fichier reçu.' })
+  }
+  if (file.type !== 'application/pdf') {
+    throw createError({ statusCode: 400, message: 'Le fichier doit être un PDF.' })
+  }
+  if (file.data.length > MAX_PDF_BYTES) {
+    throw createError({ statusCode: 413, message: 'PDF trop volumineux (8 Mo maximum).' })
+  }
+
+  // Mesure des tokens via onUsage (jamais de contenu).
+  let tokensIn = 0
+  let tokensOut = 0
+  const complete: LlmComplete = (req) =>
+    anthropicComplete({
+      ...req,
+      onUsage: (u) => {
+        tokensIn += u.inputTokens
+        tokensOut += u.outputTokens
+      },
+    })
+
+  const pdfBase64 = file.data.toString('base64')
+
+  try {
+    // Deux extractions indépendantes sur le même PDF : le STYLE (thème) et le
+    // CONTENU (à relire pour pré-remplir le profil). En parallèle.
+    const [design, parsed] = await Promise.all([
+      extractCvDesign(pdfBase64, { complete }),
+      extractCvContent(pdfBase64, { complete }),
+    ])
+
+    await recordUsageEvent(
+      prisma,
+      { userId, type: 'extraction', tokensIn, tokensOut, billable: false },
+      new Date(),
+    )
+
+    return { design, parsed }
+  } catch (err) {
+    if (err instanceof LlmError) {
+      throw createError({
+        statusCode: 502,
+        message: "L'analyse du CV a échoué, réessaie dans un instant",
+      })
+    }
+    throw err
+  }
+})
diff --git a/apps/app/server/api/profile/education.post.ts b/apps/app/server/api/profile/education.post.ts
new file mode 100644
index 0000000..7088d72
--- /dev/null
+++ b/apps/app/server/api/profile/education.post.ts
@@ -0,0 +1,44 @@
+/**
+ * POST /api/profile/education — Ajouter une formation au profil.
+ */
+import { z } from 'zod'
+import { getAuthSession } from '../../utils/session'
+import { prisma } from '../../utils/prisma'
+import { NOT_DELETED } from '../../utils/profile-serialize'
+
+const bodySchema = z.object({
+  degree: z.string().min(1).max(150),
+  school: z.string().min(1).max(150),
+  startDate: z.string().datetime({ offset: true }).nullable().optional(),
+  endDate: z.string().datetime({ offset: true }).nullable().optional(),
+  description: z.string().max(8000).nullable().optional(),
+  orderIndex: z.number().int().min(0).default(0),
+})
+
+export default defineEventHandler(async (event) => {
+  const session = await getAuthSession(event)
+  if (!session?.user) throw createError({ statusCode: 401, message: 'Non authentifié.' })
+
+  const profile = await prisma.profile.findFirst({ where: { userId: session.user.id, ...NOT_DELETED } })
+  if (!profile) throw createError({ statusCode: 404, message: 'Profil introuvable.' })
+
+  const body = await readBody(event)
+  const parsed = bodySchema.safeParse(body)
+  if (!parsed.success) throw createError({ statusCode: 400, message: 'Corps invalide.', data: parsed.error.flatten() })
+
+  const { degree, school, startDate, endDate, description, orderIndex } = parsed.data
+
+  const edu = await prisma.education.create({
+    data: {
+      profileId: profile.id,
+      degree,
+      school,
+      startDate: startDate ? new Date(startDate) : null,
+      endDate: endDate ? new Date(endDate) : null,
+      description: description ?? null,
+      orderIndex,
+    },
+  })
+
+  return { id: edu.id }
+})
diff --git a/apps/app/server/api/profile/education/[id].delete.ts b/apps/app/server/api/profile/education/[id].delete.ts
new file mode 100644
index 0000000..a478df9
--- /dev/null
+++ b/apps/app/server/api/profile/education/[id].delete.ts
@@ -0,0 +1,22 @@
+/**
+ * DELETE /api/profile/education/:id — Soft-delete d'une formation.
+ */
+import { getAuthSession } from '../../../utils/session'
+import { prisma } from '../../../utils/prisma'
+import { NOT_DELETED } from '../../../utils/profile-serialize'
+
+export default defineEventHandler(async (event) => {
+  const session = await getAuthSession(event)
+  if (!session?.user) throw createError({ statusCode: 401, message: 'Non authentifié.' })
+
+  const id = getRouterParam(event, 'id')
+  if (!id) throw createError({ statusCode: 400, message: 'id requis.' })
+
+  const edu = await prisma.education.findFirst({
+    where: { id, ...NOT_DELETED, profile: { userId: session.user.id, ...NOT_DELETED } },
+  })
+  if (!edu) throw createError({ statusCode: 404, message: 'Formation introuvable.' })
+
+  await prisma.education.update({ where: { id }, data: { deletedAt: new Date() } })
+  return { ok: true }
+})
diff --git a/apps/app/server/api/profile/experiences.post.ts b/apps/app/server/api/profile/experiences.post.ts
index 5a7b622..9d15234 100644
--- a/apps/app/server/api/profile/experiences.post.ts
+++ b/apps/app/server/api/profile/experiences.post.ts
@@ -11,7 +11,7 @@ const bodySchema = z.object({
   company: z.string().min(1).max(150),
   startDate: z.string().datetime({ offset: true }).nullable().optional(),
   endDate: z.string().datetime({ offset: true }).nullable().optional(),
-  description: z.string().max(2000).nullable().optional(),
+  description: z.string().max(8000).nullable().optional(),
   skillsUsed: z.array(z.string().max(80)).max(30).default([]),
   orderIndex: z.number().int().min(0).default(0),
 })
diff --git a/apps/app/server/api/profile/index.get.ts b/apps/app/server/api/profile/index.get.ts
index 372c193..68c2099 100644
--- a/apps/app/server/api/profile/index.get.ts
+++ b/apps/app/server/api/profile/index.get.ts
@@ -17,6 +17,7 @@ export default defineEventHandler(async (event) => {
       experiences: { orderBy: { orderIndex: 'asc' } },
       skills: { orderBy: { orderIndex: 'asc' } },
       education: { orderBy: { orderIndex: 'asc' } },
+      languages: { orderBy: { orderIndex: 'asc' } },
     },
   })
 
diff --git a/apps/app/server/api/profile/index.put.ts b/apps/app/server/api/profile/index.put.ts
index f9faf20..8a21b6e 100644
--- a/apps/app/server/api/profile/index.put.ts
+++ b/apps/app/server/api/profile/index.put.ts
@@ -8,8 +8,16 @@ import { prisma } from '../../utils/prisma'
 import { toProfileDTO } from '../../utils/profile-serialize'
 
 const bodySchema = z.object({
+  fullName: z.string().max(150).nullable().optional(),
+  email: z.string().email().max(254).nullable().optional(),
+  phone: z.string().max(40).nullable().optional(),
+  location: z.string().max(150).nullable().optional(),
+  links: z.array(z.string().url().max(500)).max(10).optional(),
+  // Borne large anti-abus ; le nettoyage réel (trim/vides/plafond 8 × 300 car.) se
+  // fait côté handler pour ne JAMAIS faire échouer toute la sauvegarde d'en-tête.
+  keySkills: z.array(z.string().max(2000)).max(100).optional(),
   headline: z.string().max(150).nullable().optional(),
-  summary: z.string().max(2000).nullable().optional(),
+  summary: z.string().max(8000).nullable().optional(),
 })
 
 export default defineEventHandler(async (event) => {
@@ -20,16 +28,33 @@ export default defineEventHandler(async (event) => {
   const parsed = bodySchema.safeParse(body)
   if (!parsed.success) throw createError({ statusCode: 400, message: 'Corps invalide.', data: parsed.error.flatten() })
 
-  const { headline, summary } = parsed.data
+  const { fullName, email, phone, location, links, keySkills, headline, summary } = parsed.data
+
+  // Nettoyage tolérant : trim, retrait des vides, plafond 8 phrases × 300 car. On
+  // tronque plutôt que rejeter → un excès ne fait pas échouer toute la sauvegarde.
+  const cleanedKeySkills =
+    keySkills?.map((s) => s.trim().slice(0, 300)).filter(Boolean).slice(0, 8)
 
   const profile = await prisma.profile.upsert({
     where: { userId: session.user.id },
     update: {
+      ...(fullName !== undefined && { fullName }),
+      ...(email !== undefined && { email }),
+      ...(phone !== undefined && { phone }),
+      ...(location !== undefined && { location }),
+      ...(links !== undefined && { links }),
+      ...(cleanedKeySkills !== undefined && { keySkills: cleanedKeySkills }),
       ...(headline !== undefined && { headline }),
       ...(summary !== undefined && { summary }),
     },
     create: {
       userId: session.user.id,
+      fullName: fullName ?? null,
+      email: email ?? null,
+      phone: phone ?? null,
+      location: location ?? null,
+      links: links ?? [],
+      keySkills: cleanedKeySkills ?? [],
       headline: headline ?? null,
       summary: summary ?? null,
     },
@@ -37,6 +62,7 @@ export default defineEventHandler(async (event) => {
       experiences: { orderBy: { orderIndex: 'asc' } },
       skills: { orderBy: { orderIndex: 'asc' } },
       education: { orderBy: { orderIndex: 'asc' } },
+      languages: { orderBy: { orderIndex: 'asc' } },
     },
   })
 
diff --git a/apps/app/server/api/profile/languages.post.ts b/apps/app/server/api/profile/languages.post.ts
new file mode 100644
index 0000000..e7ef484
--- /dev/null
+++ b/apps/app/server/api/profile/languages.post.ts
@@ -0,0 +1,41 @@
+/**
+ * POST /api/profile/languages — Ajouter une langue déclarée.
+ * Garde-fou : ces données saisies = seule source de vérité du moteur (THI-124).
+ */
+import { z } from 'zod'
+import { LANGUAGE_LEVELS } from '@cvo/shared'
+import { getAuthSession } from '../../utils/session'
+import { prisma } from '../../utils/prisma'
+import { NOT_DELETED } from '../../utils/profile-serialize'
+
+const bodySchema = z.object({
+  label: z.string().min(1).max(80),
+  level: z.enum(LANGUAGE_LEVELS as [string, ...string[]]).nullable().optional(),
+  orderIndex: z.number().int().min(0).default(0),
+})
+
+export default defineEventHandler(async (event) => {
+  const session = await getAuthSession(event)
+  if (!session?.user) throw createError({ statusCode: 401, message: 'Non authentifié.' })
+
+  const profile = await prisma.profile.findFirst({ where: { userId: session.user.id, ...NOT_DELETED } })
+  if (!profile) throw createError({ statusCode: 404, message: 'Profil introuvable.' })
+
+  const body = await readBody(event)
+  const parsed = bodySchema.safeParse(body)
+  if (!parsed.success) throw createError({ statusCode: 400, message: 'Corps invalide.', data: parsed.error.flatten() })
+
+  const { label, level, orderIndex } = parsed.data
+
+  const language = await prisma.language.create({
+    data: {
+      profileId: profile.id,
+      label,
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      level: (level as any) ?? null,
+      orderIndex,
+    },
+  })
+
+  return { id: language.id }
+})
diff --git a/apps/app/server/api/profile/languages/[id].delete.ts b/apps/app/server/api/profile/languages/[id].delete.ts
new file mode 100644
index 0000000..713d88a
--- /dev/null
+++ b/apps/app/server/api/profile/languages/[id].delete.ts
@@ -0,0 +1,22 @@
+/**
+ * DELETE /api/profile/languages/:id — Soft-delete d'une langue.
+ */
+import { getAuthSession } from '../../../utils/session'
+import { prisma } from '../../../utils/prisma'
+import { NOT_DELETED } from '../../../utils/profile-serialize'
+
+export default defineEventHandler(async (event) => {
+  const session = await getAuthSession(event)
+  if (!session?.user) throw createError({ statusCode: 401, message: 'Non authentifié.' })
+
+  const id = getRouterParam(event, 'id')
+  if (!id) throw createError({ statusCode: 400, message: 'id requis.' })
+
+  const language = await prisma.language.findFirst({
+    where: { id, ...NOT_DELETED, profile: { userId: session.user.id, ...NOT_DELETED } },
+  })
+  if (!language) throw createError({ statusCode: 404, message: 'Langue introuvable.' })
+
+  await prisma.language.update({ where: { id }, data: { deletedAt: new Date() } })
+  return { ok: true }
+})
diff --git a/apps/app/server/api/usage/current.get.ts b/apps/app/server/api/usage/current.get.ts
index bbb3cab..9a98939 100644
--- a/apps/app/server/api/usage/current.get.ts
+++ b/apps/app/server/api/usage/current.get.ts
@@ -1,4 +1,4 @@
-import type { UsageSummary } from '@cvo/shared'
+import type { UsageQuotas, UsageSummary } from '@cvo/shared'
 import { FREE_TIER_QUOTAS } from '@cvo/shared'
 import { prisma } from '../../utils/prisma'
 import { readUsageSummary } from '../../utils/metering'
@@ -8,5 +8,11 @@ import { requireUserId } from '../../utils/session'
 // l'utilisateur authentifié. Aucune donnée de contenu : uniquement des compteurs.
 export default defineEventHandler(async (event): Promise<UsageSummary> => {
   const userId = requireUserId(event)
-  return readUsageSummary(prisma, userId, FREE_TIER_QUOTAS, new Date())
+  // Cohérent avec le gate de /generate : si la limite est désactivée (dev), la
+  // génération est reportée comme illimitée (l'UI ne grise plus le bouton).
+  const quotas: UsageQuotas =
+    process.env.DISABLE_GENERATION_LIMIT === 'true'
+      ? { ...FREE_TIER_QUOTAS, generation: undefined }
+      : FREE_TIER_QUOTAS
+  return readUsageSummary(prisma, userId, quotas, new Date())
 })
diff --git a/apps/app/server/services/cv-content-extract.ts b/apps/app/server/services/cv-content-extract.ts
new file mode 100644
index 0000000..387afdb
--- /dev/null
+++ b/apps/app/server/services/cv-content-extract.ts
@@ -0,0 +1,162 @@
+/**
+ * Extraction de CONTENU — analyse le PDF d'un CV et en extrait les données
+ * factuelles pour pré-remplir le profil (identité, expériences, compétences,
+ * langues). N'invente rien : un champ absent vaut null / [].
+ *
+ * Distinct de cv-design-extract (qui ne capture que le STYLE). Le résultat est
+ * une PROPOSITION : l'utilisateur relit puis confirme avant toute écriture.
+ */
+import { SKILL_LEVELS, LANGUAGE_LEVELS, type ParsedCvProfile } from '@cvo/shared'
+import { anthropicComplete, LlmError, type LlmComplete } from '../utils/anthropic'
+
+const SYSTEM = `Tu extrais les informations factuelles d'un CV (fourni en PDF) pour pré-remplir un profil.
+RÈGLES :
+- N'invente RIEN. Si une information est absente du CV, mets null (ou [] pour les listes).
+- Recopie fidèlement : intitulés de poste, entreprises, écoles, libellés de compétences/langues.
+- Dates au format "YYYY-MM" (ou "YYYY-MM-DD"), ou null si absente/illisible. endDate null = poste en cours.
+- skillsUsed = compétences citées dans une expérience donnée (libellés courts).
+- level de compétence : un de ${SKILL_LEVELS.join('/')} si déductible, sinon null.
+- level de langue : un de ${LANGUAGE_LEVELS.join('/')} (CEFR) ou "NATIVE", sinon null.
+- education = formations/diplômes : degree (intitulé du diplôme/titre), school (établissement), dates, description (projets, mentions…).
+- keySkills = « compétences clés » : 2 à 5 phrases d'accroche commençant par un VERBE D'ACTION (ex. « Concevoir des applications web… », « Maîtriser l'écosystème Vue 3… »), reprises si le CV a une section de ce type ; sinon [].
+- headline = intitulé/accroche principal du candidat ; summary = résumé/à-propos s'il existe.`
+
+/** JSON Schema (structured outputs) — anyOf pour les nullable (cf. règles Anthropic). */
+const nullableString = { anyOf: [{ type: 'string' }, { type: 'null' }] }
+const nullableEnum = (values: readonly string[]) => ({
+  anyOf: [{ type: 'string', enum: [...values] }, { type: 'null' }],
+})
+
+const CV_CONTENT_SCHEMA = {
+  type: 'object',
+  additionalProperties: false,
+  properties: {
+    fullName: nullableString,
+    email: nullableString,
+    phone: nullableString,
+    location: nullableString,
+    links: { type: 'array', items: { type: 'string' } },
+    keySkills: { type: 'array', items: { type: 'string' } },
+    headline: nullableString,
+    summary: nullableString,
+    experiences: {
+      type: 'array',
+      items: {
+        type: 'object',
+        additionalProperties: false,
+        properties: {
+          title: { type: 'string' },
+          company: { type: 'string' },
+          startDate: nullableString,
+          endDate: nullableString,
+          description: nullableString,
+          skillsUsed: { type: 'array', items: { type: 'string' } },
+        },
+        required: ['title', 'company', 'startDate', 'endDate', 'description', 'skillsUsed'],
+      },
+    },
+    education: {
+      type: 'array',
+      items: {
+        type: 'object',
+        additionalProperties: false,
+        properties: {
+          degree: { type: 'string' },
+          school: { type: 'string' },
+          startDate: nullableString,
+          endDate: nullableString,
+          description: nullableString,
+        },
+        required: ['degree', 'school', 'startDate', 'endDate', 'description'],
+      },
+    },
+    skills: {
+      type: 'array',
+      items: {
+        type: 'object',
+        additionalProperties: false,
+        properties: {
+          label: { type: 'string' },
+          level: nullableEnum(SKILL_LEVELS),
+          years: { anyOf: [{ type: 'integer' }, { type: 'null' }] },
+        },
+        required: ['label', 'level', 'years'],
+      },
+    },
+    languages: {
+      type: 'array',
+      items: {
+        type: 'object',
+        additionalProperties: false,
+        properties: {
+          label: { type: 'string' },
+          level: nullableEnum(LANGUAGE_LEVELS),
+        },
+        required: ['label', 'level'],
+      },
+    },
+  },
+  required: ['fullName', 'email', 'phone', 'location', 'links', 'keySkills', 'headline', 'summary', 'experiences', 'education', 'skills', 'languages'],
+} as const
+
+export interface ExtractCvContentDeps {
+  complete: LlmComplete
+}
+
+/** Analyse le PDF (base64) et renvoie le contenu de profil proposé. */
+export async function extractCvContent(
+  pdfBase64: string,
+  deps: ExtractCvContentDeps = { complete: anthropicComplete },
+): Promise<ParsedCvProfile> {
+  const result = (await deps.complete({
+    system: SYSTEM,
+    user: [
+      { type: 'document', source: { type: 'base64', media_type: 'application/pdf', data: pdfBase64 } },
+      { type: 'text', text: 'Extrais les informations de ce CV pour pré-remplir un profil.' },
+    ],
+    schema: CV_CONTENT_SCHEMA as unknown as Record<string, unknown>,
+    costLabel: 'cv-content-extract',
+    maxTokens: 4096,
+  })) as Partial<ParsedCvProfile>
+
+  // Normalisation : null → '' pour les champs texte (éditables côté UI) ; les
+  // niveaux restent nullable. Le schéma garantit déjà la forme globale.
+  const raw = result as Record<string, unknown>
+  return {
+    fullName: (raw.fullName as string) ?? '',
+    email: (raw.email as string) ?? '',
+    phone: (raw.phone as string) ?? '',
+    location: (raw.location as string) ?? '',
+    links: (raw.links as string[]) ?? [],
+    keySkills: ((raw.keySkills as string[]) ?? [])
+      .filter((s) => typeof s === 'string' && s.trim())
+      .map((s) => s.trim().slice(0, 300))
+      .slice(0, 8),
+    headline: (raw.headline as string) ?? '',
+    summary: (raw.summary as string) ?? '',
+    experiences: ((raw.experiences as ParsedCvProfile['experiences']) ?? []).map((e) => ({
+      title: e.title ?? '',
+      company: e.company ?? '',
+      startDate: e.startDate ?? '',
+      endDate: e.endDate ?? '',
+      description: e.description ?? '',
+      skillsUsed: e.skillsUsed ?? [],
+    })),
+    education: ((raw.education as ParsedCvProfile['education']) ?? []).map((e) => ({
+      degree: e.degree ?? '',
+      school: e.school ?? '',
+      startDate: e.startDate ?? '',
+      endDate: e.endDate ?? '',
+      description: e.description ?? '',
+    })),
+    skills: ((raw.skills as ParsedCvProfile['skills']) ?? []).map((s) => ({
+      label: s.label ?? '',
+      level: s.level ?? null,
+      years: s.years ?? null,
+    })),
+    languages: ((raw.languages as ParsedCvProfile['languages']) ?? []).map((l) => ({
+      label: l.label ?? '',
+      level: l.level ?? null,
+    })),
+  }
+}
diff --git a/apps/app/server/services/cv-design-extract.ts b/apps/app/server/services/cv-design-extract.ts
new file mode 100644
index 0000000..7dbce07
--- /dev/null
+++ b/apps/app/server/services/cv-design-extract.ts
@@ -0,0 +1,60 @@
+/**
+ * Capture de DA — observe le PDF d'un CV et en extrait des TOKENS de design
+ * (disposition, couleurs, police) qui paramètrent le gabarit codé (cv-html.ts).
+ *
+ * On ne génère PAS de CSS : juste des paramètres validés → rendu toujours propre.
+ * Le contenu du CV reste fourni par le moteur (provenance garantie).
+ *
+ * `deps.complete` est injecté (réel en prod, faux en test).
+ */
+import type { CvDesign } from '@cvo/shared'
+import { anthropicComplete, type LlmComplete } from '../utils/anthropic'
+import { normalizeDesign } from '../utils/cv-design-tokens'
+
+const SYSTEM = `Tu observes le PDF d'un CV et tu en déduis des TOKENS de design (pas de CSS) :
+- layout : "sidebar-left" si le CV a une colonne latérale (bandeau de couleur sur un côté), sinon "single".
+- accent : la couleur d'accent dominante du CV (titres, filets, liens) en hex (#rrggbb).
+- sidebarBg : couleur de fond de la sidebar en hex (si pas de sidebar, propose une couleur sombre cohérente avec l'accent).
+- sidebarFg : couleur du texte sur la sidebar en hex (clair si sidebar sombre).
+- font : nom d'une police Google proche de celle du CV (ex. "Inter", "Poppins", "Lato"), ou null.
+- summary : 1 phrase en français décrivant le style (couleurs + disposition).
+N'invente pas de contenu. Donne des couleurs hex valides. Sois fidèle aux couleurs réelles du CV.`
+
+/** JSON Schema (structured outputs) — anyOf pour le nullable (cf. règles Anthropic). */
+const CV_DESIGN_SCHEMA = {
+  type: 'object',
+  additionalProperties: false,
+  properties: {
+    layout: { type: 'string', enum: ['single', 'sidebar-left'] },
+    accent: { type: 'string' },
+    sidebarBg: { type: 'string' },
+    sidebarFg: { type: 'string' },
+    font: { anyOf: [{ type: 'string' }, { type: 'null' }] },
+    summary: { type: 'string' },
+  },
+  required: ['layout', 'accent', 'sidebarBg', 'sidebarFg', 'font', 'summary'],
+} as const
+
+export interface ExtractCvDesignDeps {
+  complete: LlmComplete
+}
+
+/** Analyse le PDF (base64) et renvoie des tokens `CvDesign` validés/normalisés. */
+export async function extractCvDesign(
+  pdfBase64: string,
+  deps: ExtractCvDesignDeps = { complete: anthropicComplete },
+): Promise<CvDesign> {
+  const result = await deps.complete({
+    system: SYSTEM,
+    user: [
+      { type: 'document', source: { type: 'base64', media_type: 'application/pdf', data: pdfBase64 } },
+      { type: 'text', text: 'Déduis les tokens de design (disposition, couleurs, police) de ce CV.' },
+    ],
+    schema: CV_DESIGN_SCHEMA as unknown as Record<string, unknown>,
+    costLabel: 'cv-design-extract',
+    maxTokens: 512,
+  })
+
+  // Validation stricte : couleurs hex, police bornée, layout dans l'enum, défauts sinon.
+  return normalizeDesign(result)
+}
diff --git a/apps/app/server/services/keyskills-adapt.ts b/apps/app/server/services/keyskills-adapt.ts
new file mode 100644
index 0000000..8b1c556
--- /dev/null
+++ b/apps/app/server/services/keyskills-adapt.ts
@@ -0,0 +1,64 @@
+/**
+ * Adapte les « compétences clés » du profil à une offre — SANS inventer.
+ *
+ * Étape de génération : on part des phrases RÉELLES du profil (déjà rédigées par le
+ * candidat) et on les fait reformuler/réordonner/sélectionner par le LLM pour mettre
+ * en avant ce qui compte pour l'offre. Garde-fou anti-invention : le résultat est
+ * borné au NOMBRE de phrases sources (jamais d'ajout) ; en cas d'échec/vide, on
+ * retombe sur les phrases d'origine (verbatim). RGPD : aucun contenu loggé (tokens
+ * mesurés par anthropicComplete).
+ */
+import { type AnalyzedOffer } from '@cvo/shared'
+import { anthropicComplete, type LlmComplete } from '../utils/anthropic'
+
+const SYSTEM = `Tu adaptes les « compétences clés » d'un candidat à une offre, SANS mentir ni inventer.
+On te donne les compétences clés ACTUELLES du candidat (phrases factuelles, déjà rédigées) et l'offre analysée.
+Tu rends "keySkills" : ces mêmes compétences RÉÉCRITES / RÉORDONNÉES / SÉLECTIONNÉES pour mettre en avant
+ce qui compte le plus pour l'offre.
+RÈGLES ABSOLUES :
+- N'ajoute AUCUNE compétence, technologie, chiffre ou outil que les phrases sources n'attestent pas déjà.
+- Tu peux reformuler le style et changer l'ordre, retirer les moins pertinentes, mais JAMAIS en créer de nouvelles non fondées.
+- Chaque phrase reste fidèle au candidat et commence par un verbe d'action.
+- Tu rends AU PLUS autant de phrases que reçues (tu peux en rendre moins), jamais plus.`
+
+const SCHEMA = {
+  type: 'object',
+  additionalProperties: false,
+  properties: { keySkills: { type: 'array', items: { type: 'string' } } },
+  required: ['keySkills'],
+} as const
+
+export interface AdaptKeySkillsDeps {
+  complete: LlmComplete
+}
+
+/**
+ * Renvoie les compétences clés adaptées à l'offre (≤ nombre de phrases fournies,
+ * trim, sans vides). Repli sur `keySkills` d'origine si le LLM ne renvoie rien.
+ */
+export async function adaptKeySkills(
+  keySkills: string[],
+  offer: AnalyzedOffer,
+  deps: AdaptKeySkillsDeps = { complete: anthropicComplete },
+): Promise<string[]> {
+  if (keySkills.length === 0) return []
+
+  const result = (await deps.complete({
+    system: SYSTEM,
+    user: JSON.stringify({ offreAnalysee: offer, competencesClesActuelles: keySkills }),
+    schema: SCHEMA as unknown as Record<string, unknown>,
+    costLabel: 'keyskills-adapt',
+    effort: 'low',
+    maxTokens: 1024,
+  })) as { keySkills?: unknown }
+
+  const adapted = Array.isArray(result.keySkills)
+    ? result.keySkills
+        .filter((s): s is string => typeof s === 'string')
+        .map((s) => s.trim().slice(0, 300))
+        .filter(Boolean)
+        .slice(0, keySkills.length) // jamais plus de phrases que fournies (anti-invention)
+    : []
+
+  return adapted.length ? adapted : keySkills
+}
diff --git a/apps/app/server/services/matching.ts b/apps/app/server/services/matching.ts
index 3f9a1ac..d72e38d 100644
--- a/apps/app/server/services/matching.ts
+++ b/apps/app/server/services/matching.ts
@@ -25,23 +25,155 @@ RÈGLES ABSOLUES :
 - Le CONTENU vient EXCLUSIVEMENT du profil candidat fourni. N'invente JAMAIS une compétence, une expérience ou une réalisation absente du profil.
 - L'offre sert uniquement à TRIER et REFORMULER : réordonne les sections/éléments par pertinence et reformule les libellés, sans rien ajouter.
 - Chaque élément produit DOIT porter "provenance.profileItemId" = l'id EXACT de l'élément profil source. Mets "reformulated": true si tu as reformulé le libellé.
-- N'utilise QUE les id présents dans le profil. Aucun id inventé.`
+- N'utilise QUE les id présents dans le profil. Aucun id inventé.
+- Les langues déclarées (le cas échéant) vont dans une section "languages" ; chaque entrée porte son libellé et son niveau (ex. « Courant », « C1 », « Natif »), sourcée par l'id de la langue.
 
-/** Provenance attendue sur chaque nœud du CV. */
-const PROVENANCE_SCHEMA = {
-  type: 'object',
-  additionalProperties: false,
-  properties: {
-    profileItemId: { type: 'string' },
-    reformulated: { type: 'boolean' },
-  },
-  required: ['profileItemId', 'reformulated'],
-}
+CONCISION (le CV doit tenir sur UNE page A4) :
+- Résumé : 3 phrases maximum (≈ 350 caractères).
+- Par expérience : 2 à 4 puces MAXIMUM, les plus pertinentes pour l'offre. Chaque puce = 1 ligne (≈ 140 caractères max), commence par un verbe d'action, va à l'essentiel (résultat/impact). Pas de phrases à rallonge.
+- Priorise : mets en avant les expériences/compétences pertinentes pour l'offre ; reste synthétique. Mieux vaut court et percutant qu'exhaustif.`
+
+/**
+ * JSON Schema imposé à la sortie du matching (forme de `RenderableCv`).
+ *
+ * ⚠️ Le validateur de sortie structurée d'Anthropic est STRICT : tout objet doit
+ * porter `additionalProperties: false` explicite (cf. mémoire projet). De plus, la
+ * grammaire COMPILÉE a une taille limite : inliner les mêmes sous-schémas partout
+ * (provenance × chaque entrée × 5 variantes de section) fait dépasser cette limite
+ * → « compiled grammar is too large » (400 → 502). On factorise donc via `$defs` +
+ * `$ref` : le compilateur partage les productions et la grammaire reste compacte.
+ *
+ * `prov` = `#/$defs/prov` (référencé partout). Union de sections via `anyOf`.
+ */
+const REF = (name: string) => ({ $ref: `#/$defs/${name}` })
 
-/** JSON Schema imposé à la sortie du matching (forme de `RenderableCv`). */
 const RENDERABLE_CV_SCHEMA = {
   type: 'object',
   additionalProperties: false,
+  $defs: {
+    prov: {
+      type: 'object',
+      additionalProperties: false,
+      properties: { profileItemId: { type: 'string' }, reformulated: { type: 'boolean' } },
+      required: ['profileItemId', 'reformulated'],
+    },
+    contact: {
+      type: 'object',
+      additionalProperties: false,
+      properties: {
+        kind: { type: 'string', enum: ['email', 'phone', 'location', 'link'] },
+        label: { type: 'string' },
+        value: { type: 'string' },
+      },
+      required: ['kind', 'label', 'value'],
+    },
+    bullet: {
+      type: 'object',
+      additionalProperties: false,
+      properties: { id: { type: 'string' }, text: { type: 'string' }, provenance: REF('prov') },
+      required: ['id', 'text', 'provenance'],
+    },
+    exp: {
+      type: 'object',
+      additionalProperties: false,
+      properties: {
+        id: { type: 'string' },
+        role: { type: 'string' },
+        organization: { type: 'string' },
+        period: { type: 'string' },
+        // `location` optionnel (CvExperienceEntry.location?) → hors `required`.
+        location: { type: 'string' },
+        bullets: { type: 'array', items: REF('bullet') },
+        provenance: REF('prov'),
+      },
+      required: ['id', 'role', 'organization', 'period', 'bullets', 'provenance'],
+    },
+    skill: {
+      type: 'object',
+      additionalProperties: false,
+      properties: { id: { type: 'string' }, label: { type: 'string' }, provenance: REF('prov') },
+      required: ['id', 'label', 'provenance'],
+    },
+    edu: {
+      type: 'object',
+      additionalProperties: false,
+      properties: {
+        id: { type: 'string' },
+        degree: { type: 'string' },
+        institution: { type: 'string' },
+        period: { type: 'string' },
+        provenance: REF('prov'),
+      },
+      required: ['id', 'degree', 'institution', 'period', 'provenance'],
+    },
+    lang: {
+      type: 'object',
+      additionalProperties: false,
+      properties: {
+        id: { type: 'string' },
+        label: { type: 'string' },
+        level: { type: 'string' }, // libellé affiché (ex. « C1 », « Natif »)
+        provenance: REF('prov'),
+      },
+      required: ['id', 'label', 'level', 'provenance'],
+    },
+    // Union discriminée par `kind` (CvSection) — une variante par type de section.
+    section: {
+      anyOf: [
+        {
+          type: 'object',
+          additionalProperties: false,
+          properties: {
+            kind: { type: 'string', enum: ['summary'] },
+            title: { type: 'string' },
+            text: { type: 'string' },
+            provenance: REF('prov'),
+          },
+          required: ['kind', 'title', 'text', 'provenance'],
+        },
+        {
+          type: 'object',
+          additionalProperties: false,
+          properties: {
+            kind: { type: 'string', enum: ['experience'] },
+            title: { type: 'string' },
+            entries: { type: 'array', items: REF('exp') },
+          },
+          required: ['kind', 'title', 'entries'],
+        },
+        {
+          type: 'object',
+          additionalProperties: false,
+          properties: {
+            kind: { type: 'string', enum: ['skills'] },
+            title: { type: 'string' },
+            entries: { type: 'array', items: REF('skill') },
+          },
+          required: ['kind', 'title', 'entries'],
+        },
+        {
+          type: 'object',
+          additionalProperties: false,
+          properties: {
+            kind: { type: 'string', enum: ['education'] },
+            title: { type: 'string' },
+            entries: { type: 'array', items: REF('edu') },
+          },
+          required: ['kind', 'title', 'entries'],
+        },
+        {
+          type: 'object',
+          additionalProperties: false,
+          properties: {
+            kind: { type: 'string', enum: ['languages'] },
+            title: { type: 'string' },
+            entries: { type: 'array', items: REF('lang') },
+          },
+          required: ['kind', 'title', 'entries'],
+        },
+      ],
+    },
+  },
   properties: {
     locale: { type: 'string', enum: ['fr'] },
     header: {
@@ -50,12 +182,12 @@ const RENDERABLE_CV_SCHEMA = {
       properties: {
         fullName: { type: 'string' },
         headline: { type: 'string' },
-        contacts: { type: 'array', items: { type: 'object' } },
-        provenance: PROVENANCE_SCHEMA,
+        contacts: { type: 'array', items: REF('contact') },
+        provenance: REF('prov'),
       },
       required: ['fullName', 'headline', 'contacts', 'provenance'],
     },
-    sections: { type: 'array', items: { type: 'object' } },
+    sections: { type: 'array', items: REF('section') },
   },
   required: ['locale', 'header', 'sections'],
 } as const
@@ -64,12 +196,13 @@ export interface MatchDeps {
   complete: LlmComplete
 }
 
-/** Ids réels du profil : header + chaque expérience / compétence / formation. */
+/** Ids réels du profil : header + chaque expérience / compétence / formation / langue. */
 export function collectProfileItemIds(profile: ProfileDTO): Set<ProfileItemId> {
   const ids = new Set<ProfileItemId>([profile.id])
   for (const e of profile.experiences) ids.add(e.id)
   for (const s of profile.skills) ids.add(s.id)
   for (const ed of profile.education) ids.add(ed.id)
+  for (const l of profile.languages) ids.add(l.id)
   return ids
 }
 
@@ -82,9 +215,13 @@ export async function matchProfileToOffer(
   offer: AnalyzedOffer,
   deps: MatchDeps = { complete: anthropicComplete },
 ): Promise<RenderableCv> {
+  // keySkills (phrases) est injecté DÉTERMINISTE-ment côté generate.post (au-dessus
+  // des expériences) → on le retire du payload pour que le LLM ne les recopie pas
+  // dans skills/summary (doublon sémantique).
+  const { keySkills: _keySkills, ...profilReel } = profile
   const user = JSON.stringify({
     instructionsDeTri: offer,
-    profilReel: profile,
+    profilReel,
   })
 
   const cv = (await deps.complete({
@@ -93,10 +230,31 @@ export async function matchProfileToOffer(
     schema: RENDERABLE_CV_SCHEMA as unknown as Record<string, unknown>,
     costLabel: 'matching',
     effort: 'medium',
-    maxTokens: 8192,
+    // Profils riches (nombreuses expériences/compétences/langues) → sortie longue.
+    maxTokens: 16000,
   })) as RenderableCv
 
+  // Plafond déterministe (garantie « 1 page », indépendant du LLM) : on borne le
+  // nombre d'expériences et de puces. On supprime, jamais on n'invente → provenance
+  // intacte sur ce qui reste.
+  capCvLength(cv)
+
   // §3 — garde-fou déterministe : rejette tout élément non sourcé (hors LLM).
   assertValidCv(cv, collectProfileItemIds(profile))
   return cv
 }
+
+/** Bornes de longueur pour viser un CV sur une seule page A4. */
+const MAX_EXPERIENCES = 6
+const MAX_BULLETS_PER_EXPERIENCE = 4
+
+/** Tronque (en place) expériences et puces aux bornes ci-dessus. Ne fait que retirer. */
+function capCvLength(cv: RenderableCv): void {
+  for (const section of cv.sections) {
+    if (section.kind !== 'experience') continue
+    section.entries = section.entries.slice(0, MAX_EXPERIENCES)
+    for (const entry of section.entries) {
+      entry.bullets = entry.bullets.slice(0, MAX_BULLETS_PER_EXPERIENCE)
+    }
+  }
+}
diff --git a/apps/app/server/utils/anthropic.ts b/apps/app/server/utils/anthropic.ts
index 1bd03ef..9f766f8 100644
--- a/apps/app/server/utils/anthropic.ts
+++ b/apps/app/server/utils/anthropic.ts
@@ -21,11 +21,24 @@ const PRICING: Record<string, { in: number; out: number }> = {
   'claude-opus-4-8': { in: 5, out: 25 },
 }
 
+/**
+ * Bloc de contenu d'un message utilisateur. Permet d'envoyer un document (PDF)
+ * ou une image en plus du texte. Forme API Messages : le bloc `document`/`image`
+ * doit précéder le bloc texte. PDF en base64 : pas de beta header requis.
+ */
+export type LlmContentBlock =
+  | { type: 'text'; text: string }
+  | { type: 'document'; source: { type: 'base64'; media_type: 'application/pdf'; data: string } }
+  | { type: 'image'; source: { type: 'base64'; media_type: string; data: string } }
+
 export interface LlmRequest {
   /** Consignes système (rôle/tâche). Pas de contenu CV au-delà du strict nécessaire. */
   system: string
-  /** Message utilisateur : données structurées (profil réel + offre analysée). */
-  user: string
+  /**
+   * Message utilisateur : soit une string (cas courant : données structurées),
+   * soit une liste de blocs (texte + document PDF / image) pour la vision.
+   */
+  user: string | LlmContentBlock[]
   /** JSON Schema imposé à la sortie. */
   schema: Record<string, unknown>
   /** Étiquette de coût pour le log (ex. `offer-analysis`). JAMAIS de contenu. */
@@ -100,7 +113,22 @@ export const anthropicComplete: LlmComplete = async (req) => {
     },
     body: JSON.stringify(body),
   })
-  if (!res.ok) throw new LlmError(`Claude API ${res.status}`)
+  if (!res.ok) {
+    // Le corps d'erreur de l'API décrit le problème (schéma invalide, grammaire
+    // trop grande, etc.) — RGPD-safe (aucun contenu utilisateur). On le logge et
+    // on l'inclut dans l'erreur pour rendre les 502 diagnosticables.
+    let detail = ''
+    try {
+      const errBody = (await res.json()) as { error?: { message?: string } }
+      detail = errBody?.error?.message ?? ''
+    } catch {
+      /* corps non-JSON : on garde juste le statut */
+    }
+    console.warn(
+      JSON.stringify({ event: 'llm_error', label: req.costLabel, model, status: res.status, detail }),
+    )
+    throw new LlmError(`Claude API ${res.status}${detail ? `: ${detail}` : ''}`)
+  }
 
   const data = (await res.json()) as {
     stop_reason?: string
diff --git a/apps/app/server/utils/candidature-serialize.ts b/apps/app/server/utils/candidature-serialize.ts
new file mode 100644
index 0000000..33fc3e9
--- /dev/null
+++ b/apps/app/server/utils/candidature-serialize.ts
@@ -0,0 +1,54 @@
+/**
+ * Sérialisation Candidature (Prisma → DTO transport). Fonctions pures → testables
+ * sans base. Dates en ISO ; design re-normalisé ; gros JSON castés vers les types
+ * partagés. Les lignes soft-delete ne sont jamais exposées (filtre dans le where).
+ */
+import type {
+  AnalyzedOffer,
+  CandidatureDTO,
+  CandidatureListItemDTO,
+  CandidatureStatus,
+  MatchReport,
+  RenderableCv,
+} from '@cvo/shared'
+import { toIso } from './profile-serialize'
+import { normalizeDesign } from './cv-design-tokens'
+
+/** Forme Prisma minimale (sous-ensemble du modèle Candidature). */
+export interface CandidatureRow {
+  id: string
+  label: string
+  status: CandidatureStatus
+  matchScore: number
+  offerSnapshot: unknown
+  matchReport: unknown
+  generatedCv: unknown
+  design: unknown
+  createdAt: Date
+  updatedAt: Date
+}
+
+/** Vue liste (légère) — pas besoin des gros JSON. */
+export function toCandidatureListItemDTO(
+  row: Pick<CandidatureRow, 'id' | 'label' | 'status' | 'matchScore' | 'createdAt' | 'updatedAt'>,
+): CandidatureListItemDTO {
+  return {
+    id: row.id,
+    label: row.label,
+    status: row.status,
+    matchScore: row.matchScore,
+    createdAt: toIso(row.createdAt)!,
+    updatedAt: toIso(row.updatedAt)!,
+  }
+}
+
+/** Vue complète (éditeur). */
+export function toCandidatureDTO(row: CandidatureRow): CandidatureDTO {
+  return {
+    ...toCandidatureListItemDTO(row),
+    offer: row.offerSnapshot as AnalyzedOffer,
+    match: row.matchReport as MatchReport,
+    cv: row.generatedCv as RenderableCv,
+    design: row.design ? normalizeDesign(row.design) : null,
+  }
+}
diff --git a/apps/app/server/utils/cv-design-tokens.ts b/apps/app/server/utils/cv-design-tokens.ts
new file mode 100644
index 0000000..acd7529
--- /dev/null
+++ b/apps/app/server/utils/cv-design-tokens.ts
@@ -0,0 +1,90 @@
+/**
+ * Validation/normalisation des tokens de design « CV de base ».
+ *
+ * Les valeurs viennent d'une extraction LLM (donnée non fiable) ou d'anciens
+ * designs stockés (ancienne forme `{ css }`). On normalise toujours vers un
+ * `CvDesign` sûr : couleurs hex validées, police bornée, layout dans l'enum,
+ * sinon valeurs par défaut. Aucun CSS brut n'est jamais accepté.
+ */
+import type { CvDesign, CvLayout } from '@cvo/shared'
+
+/** Design par défaut (marque Teven) — utilisé sans « CV de base » configuré. */
+export const DEFAULT_DESIGN: CvDesign = {
+  layout: 'single',
+  accent: '#4f46e5',
+  sidebarBg: '#1f2937',
+  sidebarFg: '#f9fafb',
+  sidebarRadius: 0,
+  photoPosition: 'header-right',
+  photoSize: 128, // px
+  photoMargin: 14,
+  photoPadding: 0,
+  font: null,
+  photo: null,
+  summary: '',
+}
+
+/** Positions de photo autorisées. */
+const PHOTO_POSITIONS = ['header-right', 'header-left', 'sidebar'] as const
+
+/** Borne un nombre dans [min, max] (fallback si non numérique). */
+function sanitizeNumber(value: unknown, min: number, max: number, fallback: number): number {
+  const n = typeof value === 'number' ? value : Number(value)
+  if (!Number.isFinite(n)) return fallback
+  return Math.min(max, Math.max(min, n))
+}
+
+/** Plafond de la photo (data-URL) — ~700 Ko de base64 ≈ ~500 Ko décodés. */
+const MAX_PHOTO_CHARS = 700_000
+/** N'autorise que des images raster en data-URL base64 (pas de SVG → pas de script). */
+const DATA_IMAGE = /^data:image\/(?:png|jpe?g|webp);base64,[A-Za-z0-9+/=]+$/
+
+/**
+ * Renvoie une photo en data-URL raster valide et bornée, ou null. Rejette les
+ * URL distantes, le SVG (vecteur de script) et tout dépassement de taille.
+ */
+export function sanitizeDataImage(value: unknown): string | null {
+  if (typeof value !== 'string') return null
+  const v = value.trim()
+  if (v.length === 0 || v.length > MAX_PHOTO_CHARS) return null
+  return DATA_IMAGE.test(v) ? v : null
+}
+
+const HEX = /^#(?:[0-9a-f]{3}|[0-9a-f]{6})$/i
+
+/** Renvoie une couleur hex valide, ou le fallback. */
+export function sanitizeColor(value: unknown, fallback: string): string {
+  return typeof value === 'string' && HEX.test(value.trim()) ? value.trim() : fallback
+}
+
+/** Renvoie un nom de police « propre » (lettres/chiffres/espaces/-), ou null. */
+export function sanitizeFont(value: unknown): string | null {
+  if (typeof value !== 'string') return null
+  const cleaned = value.trim().slice(0, 40)
+  return /^[A-Za-z0-9 \-]+$/.test(cleaned) && cleaned.length > 0 ? cleaned : null
+}
+
+function sanitizeLayout(value: unknown): CvLayout {
+  return value === 'sidebar-left' ? 'sidebar-left' : 'single'
+}
+
+/** Normalise un objet quelconque (extraction LLM ou ancien stockage) en CvDesign sûr. */
+export function normalizeDesign(raw: unknown): CvDesign {
+  const r = (raw && typeof raw === 'object' ? raw : {}) as Record<string, unknown>
+  return {
+    layout: sanitizeLayout(r.layout),
+    accent: sanitizeColor(r.accent, DEFAULT_DESIGN.accent),
+    sidebarBg: sanitizeColor(r.sidebarBg, DEFAULT_DESIGN.sidebarBg),
+    sidebarFg: sanitizeColor(r.sidebarFg, DEFAULT_DESIGN.sidebarFg),
+    sidebarRadius: sanitizeNumber(r.sidebarRadius, 0, 12, 0),
+    photoPosition: PHOTO_POSITIONS.includes(r.photoPosition as (typeof PHOTO_POSITIONS)[number])
+      ? (r.photoPosition as CvDesign['photoPosition'])
+      : 'header-right',
+    photoSize: sanitizeNumber(r.photoSize, 64, 360, 128), // px
+    photoMargin: sanitizeNumber(r.photoMargin, 0, 16, 14),
+    photoPadding: sanitizeNumber(r.photoPadding, 0, 8, 0),
+    font: sanitizeFont(r.font),
+    photo: sanitizeDataImage(r.photo),
+    summary: typeof r.summary === 'string' ? r.summary.trim().slice(0, 500) : '',
+  }
+}
diff --git a/apps/app/server/utils/cv-design.ts b/apps/app/server/utils/cv-design.ts
new file mode 100644
index 0000000..27da0ce
--- /dev/null
+++ b/apps/app/server/utils/cv-design.ts
@@ -0,0 +1,26 @@
+/**
+ * Charge le thème « CV de base » de l'utilisateur courant (ou null).
+ * Mutualisé entre l'export PDF et l'aperçu pour garantir un rendu identique.
+ */
+import type { H3Event } from 'h3'
+import type { CvDesign } from '@cvo/shared'
+import { prisma } from './prisma'
+import { NOT_DELETED } from './profile-serialize'
+import { normalizeDesign } from './cv-design-tokens'
+
+/**
+ * Tokens de design « CV de base » de l'utilisateur courant, ou null (→ défaut).
+ *
+ * NON bloquant : si la requête n'est pas authentifiée (ex. page démo publique),
+ * on renvoie null → gabarit par défaut. Les tokens stockés sont re-normalisés
+ * (tolère un ancien format) avant rendu.
+ */
+export async function loadBaseCvDesign(event: H3Event): Promise<CvDesign | null> {
+  const userId = event.context.userId
+  if (!userId) return null
+  const profile = await prisma.profile.findFirst({
+    where: { userId, ...NOT_DELETED },
+    select: { baseCvDesign: true },
+  })
+  return profile?.baseCvDesign ? normalizeDesign(profile.baseCvDesign) : null
+}
diff --git a/apps/app/server/utils/cv-html.ts b/apps/app/server/utils/cv-html.ts
index 6e23ae0..f26bee4 100644
--- a/apps/app/server/utils/cv-html.ts
+++ b/apps/app/server/utils/cv-html.ts
@@ -1,53 +1,85 @@
 /**
- * Rendu côté serveur (Nitro) d'un RenderableCv en HTML complet auto-suffisant.
- * Aucune dépendance Vue côté serveur : la structure HTML est générée directement
- * à partir des données, pour être passée à Chromium (export PDF).
+ * Rendu serveur d'un RenderableCv en document HTML A4 auto-suffisant (export PDF
+ * + aperçu iframe). Le STYLE est un GABARIT CODÉ et testé à l'impression — pas du
+ * CSS généré par un LLM. On l'adapte au CV de l'utilisateur via des TOKENS
+ * (`CvDesign` : layout, accent, couleurs sidebar, police) injectés en variables
+ * CSS. Résultat : toujours propre, 1 page si le contenu le permet, proportions
+ * maîtrisées. Le contenu reste fourni par le moteur (provenance garantie).
  *
- * Les classes Tailwind utilisées ici sont un sous-ensemble des tokens @theme
- * définis dans main.css. Elles sont inlinées en CSS natif dans la balise <style>
- * pour que le document soit entièrement auto-suffisant (pas de CDN en headless).
- *
- * Doit rester synchronisé avec CvTemplate.vue. Si le design du composant Vue
- * évolue, mettre à jour `TOKENS` et la fonction `html()` en parallèle.
- *
- * Sécurité : `escape()` appliqué sur toutes les données utilisateur — pas
- * d'injection XSS possible dans le HTML rendu.
+ * Sécurité : `esc()` sur toutes les données utilisateur ; les tokens sont validés
+ * en amont (cv-design-tokens.ts : couleurs hex, police bornée).
  */
 
-import type { RenderableCv, CvSection } from '@cvo/shared'
+import type { RenderableCv, CvSection, CvDesign } from '@cvo/shared'
+import { DEFAULT_DESIGN } from './cv-design-tokens'
 
-// Tokens synchronisés avec @theme de main.css + styles A4 auto-suffisants pour Chromium.
-const CSS = `
-:root{--b50:#eff6ff;--b100:#dbeafe;--b500:#3b82f6;--b600:#2563eb;--b700:#1d4ed8;--i5:#6b7280;--i7:#374151;--i9:#111827;--sf:#fff;--r:.75rem;--fn:"Inter",ui-sans-serif,system-ui,sans-serif}
+// Gabarit maîtrisé. Variables : --accent, --side-bg, --side-fg, --cv-font.
+const TEMPLATE_CSS = `
 *{box-sizing:border-box;margin:0;padding:0}
-@page{size:A4 portrait;margin:12mm 14mm}
-body{font-family:var(--fn);color:var(--i9);background:var(--sf);-webkit-print-color-adjust:exact;print-color-adjust:exact}
-article{width:100%;max-width:210mm;margin:0 auto;font-size:14px;line-height:1.5}
-header{padding:32px 40px;border-bottom:1px solid rgba(107,114,128,.2)}
-h1{font-size:1.875rem;font-weight:700}
-.hl{margin-top:4px;font-size:1rem;font-weight:500;color:var(--b600)}
-.ct{margin-top:12px;display:flex;flex-wrap:wrap;gap:4px 20px;list-style:none}
-.ct li{font-size:.875rem;color:var(--i5)}
-main{padding:28px 40px;display:flex;flex-direction:column;gap:24px}
-section{break-inside:avoid}
-h2{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--b600);border-bottom:1px solid var(--b100);padding-bottom:4px;margin-bottom:12px}
-.sm{font-size:.875rem;line-height:1.625;color:var(--i7)}
-.xe{display:flex;flex-direction:column;gap:20px}
-.xr{break-inside:avoid}
-.xh{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
-.xn{font-size:.875rem;font-weight:600}
-.xo{font-size:.875rem;color:var(--i7)}
-.xp{font-size:.75rem;color:var(--i5);white-space:nowrap}
-.bl{margin-top:8px;padding-left:16px;display:flex;flex-direction:column;gap:4px}
-.bl li{font-size:.875rem;color:var(--i7)}
-.bl li::marker{color:var(--b500)}
-.sk{display:flex;flex-wrap:wrap;gap:8px;list-style:none}
-.sk li{background:var(--b50);color:var(--b700);font-size:.75rem;font-weight:500;padding:4px 12px;border-radius:var(--r)}
-.ee{display:flex;flex-direction:column;gap:12px}
-.er{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;break-inside:avoid}
-.ed{font-size:.875rem;font-weight:600}
-.ei{font-size:.875rem;color:var(--i7)}
-.ep{font-size:.75rem;color:var(--i5);white-space:nowrap}
+@page{size:A4;margin:0}
+html,body{background:#fff}
+.cv-root{
+  font-family:var(--cv-font,'Inter',ui-sans-serif,system-ui,'Segoe UI',sans-serif);
+  color:#1f2937;font-size:10.3pt;line-height:1.42;
+  /* -2px : évite qu'un arrondi sous-pixel (≈ +0.5px) ne déborde sur une 2e page
+     blanche quand le contenu remplit exactement la hauteur A4 (297mm). */
+  width:210mm;min-height:calc(297mm - 2px);margin:0 auto;background:#fff;
+  -webkit-print-color-adjust:exact;print-color-adjust:exact;
+}
+.cv-header{padding:13mm 14mm 5mm;display:flex;justify-content:flex-start;align-items:flex-start;gap:8mm}
+.cv-header-text{flex:1;min-width:0}
+/* Cadre = case carrée (taille + padding intérieur) ; l'image remplit le contenu.
+   --photo-padding = espace transparent autour de l'image (s'adapte au fond). */
+.cv-photo-frame{flex-shrink:0;box-sizing:border-box;width:var(--photo-size,128px);height:var(--photo-size,128px);padding:var(--photo-padding,0);border-radius:3mm}
+.cv-photo{display:block;width:100%;height:100%;border-radius:3mm;object-fit:cover;background:#e5e7eb}
+/* --photo-margin = distance souhaitée au bord de page (mm). On compense le padding
+   de l'en-tête (haut 13mm, côtés 14mm) par une marge négative → 0 = bord à bord. */
+.cv-photo-frame--hr{margin-top:calc(var(--photo-margin,14mm) - 13mm);margin-right:calc(var(--photo-margin,14mm) - 14mm)}
+.cv-photo-frame--hl{margin-top:calc(var(--photo-margin,14mm) - 13mm);margin-left:calc(var(--photo-margin,14mm) - 14mm)}
+.cv-side-photo{display:flex;justify-content:center;margin-bottom:5mm}
+.cv-name{font-size:25pt;font-weight:800;line-height:1.04;letter-spacing:-.4px;color:#111827}
+.cv-headline{margin-top:2.5mm;font-size:11.5pt;font-weight:600;color:var(--accent)}
+.cv-contacts{margin-top:3mm;display:flex;flex-wrap:wrap;gap:1.2mm 6mm;list-style:none;font-size:8.6pt;color:#6b7280}
+.cv-main{padding:0 14mm 14mm}
+.cv-section{break-inside:avoid}
+.cv-section + .cv-section{margin-top:6mm}
+.cv-section-title{font-size:9pt;font-weight:700;text-transform:uppercase;letter-spacing:1.4px;color:var(--accent);border-bottom:1.5px solid var(--accent);padding-bottom:1.3mm;margin-bottom:3mm}
+.cv-summary{font-size:9.6pt;line-height:1.5;color:#374151}
+.cv-keyskills{padding-left:4.5mm;display:flex;flex-direction:column;gap:1.5mm;list-style:disc}
+.cv-keyskill{font-size:9.6pt;line-height:1.4;color:#374151}
+.cv-keyskill::marker{color:var(--accent)}
+.cv-exps{display:flex;flex-direction:column;gap:4mm}
+.cv-exp{break-inside:avoid}
+.cv-exp-head{display:flex;justify-content:space-between;align-items:baseline;gap:4mm}
+.cv-exp-role{font-size:10.2pt;font-weight:700;color:#111827}
+.cv-exp-org{font-size:9.5pt;color:#374151}
+.cv-exp-period{flex-shrink:0;font-size:8.4pt;font-weight:600;color:var(--accent);white-space:nowrap}
+.cv-bullets{margin-top:1.5mm;padding-left:4.5mm;display:flex;flex-direction:column;gap:1mm}
+.cv-bullet{font-size:9.3pt;line-height:1.4;color:#374151}
+.cv-bullet::marker{color:var(--accent)}
+.cv-edus{display:flex;flex-direction:column;gap:3mm}
+.cv-edu{display:flex;justify-content:space-between;align-items:baseline;gap:4mm;break-inside:avoid}
+.cv-edu-degree{font-size:10pt;font-weight:700;color:#111827}
+.cv-edu-school{font-size:9.4pt;color:#374151}
+.cv-edu-period{flex-shrink:0;font-size:8.4pt;font-weight:600;color:var(--accent);white-space:nowrap}
+.cv-tags{display:flex;flex-wrap:wrap;gap:1.6mm;list-style:none}
+.cv-tag{font-size:8.5pt;font-weight:500;padding:1mm 2.6mm;border-radius:2mm;background:color-mix(in srgb,var(--accent) 12%,#fff);color:var(--accent)}
+
+/* ── Disposition sidebar à gauche ────────────────────────────────────────── */
+.cv-root--sidebar .cv-main{display:grid;grid-template-columns:33% 1fr;gap:0;padding:0;align-items:stretch}
+.cv-col--side{color:var(--side-fg);padding:6mm 6mm 12mm}
+.cv-col--main{padding:6mm 13mm 14mm 8mm}
+/* Mode BANDE (rayon 0) : fond peint sur la racine → pleine hauteur, se répète à
+   chaque page (pas de fragment). Header en blanc pour couvrir la bande en haut. */
+.cv-root--sidebar:not(.cv-root--side-rounded){background:linear-gradient(to right,var(--side-bg) 0 33%,#fff 33% 100%)}
+.cv-root--sidebar:not(.cv-root--side-rounded) .cv-header{background:#fff}
+/* Mode PANNEAU (rayon > 0) : sidebar = vraie boîte arrondie (s'arrête au contenu). */
+.cv-root--side-rounded .cv-col--side{background:var(--side-bg);border-radius:0 var(--side-radius,0) var(--side-radius,0) 0}
+.cv-col--side .cv-section + .cv-section,
+.cv-col--main .cv-section + .cv-section{margin-top:6mm}
+.cv-col--side .cv-section-title{color:var(--side-fg);border-bottom-color:color-mix(in srgb,var(--side-fg) 30%,transparent)}
+.cv-col--side .cv-summary{color:color-mix(in srgb,var(--side-fg) 88%,transparent)}
+.cv-col--side .cv-tag{background:color-mix(in srgb,var(--side-fg) 16%,transparent);color:var(--side-fg)}
 `
 
 /** Échappe les caractères HTML pour prévenir toute injection. */
@@ -62,47 +94,146 @@ function esc(s: string): string {
 
 function renderContacts(cv: RenderableCv): string {
   if (!cv.header.contacts.length) return ''
-  return `<ul class="ct">${cv.header.contacts.map((c) => `<li>${c.label ? `${esc(c.label)} · ` : ''}${esc(c.value)}</li>`).join('')}</ul>`
+  return `<ul class="cv-contacts">${cv.header.contacts
+    .map((c) => `<li class="cv-contact">${c.label ? `${esc(c.label)} · ` : ''}${esc(c.value)}</li>`)
+    .join('')}</ul>`
 }
 
-function renderSection(section: CvSection): string {
+function renderSectionBody(section: CvSection): string {
   switch (section.kind) {
     case 'summary':
-      return `<p class="sm">${esc(section.text)}</p>`
-
+      return `<p class="cv-summary">${esc(section.text)}</p>`
+    case 'keyskills':
+      return `<ul class="cv-keyskills">${section.entries
+        .map((e) => `<li class="cv-keyskill">${esc(e.text)}</li>`)
+        .join('')}</ul>`
     case 'experience': {
       const rows = section.entries.map((e) => {
         const loc = e.location ? ` · ${esc(e.location)}` : ''
-        const bl = e.bullets.length ? `<ul class="bl">${e.bullets.map((b) => `<li>${esc(b.text)}</li>`).join('')}</ul>` : ''
-        return `<div class="xr"><div class="xh"><div><p class="xn">${esc(e.role)}</p><p class="xo">${esc(e.organization)}${loc}</p></div><p class="xp">${esc(e.period)}</p></div>${bl}</div>`
+        const bl = e.bullets.length
+          ? `<ul class="cv-bullets">${e.bullets.map((b) => `<li class="cv-bullet">${esc(b.text)}</li>`).join('')}</ul>`
+          : ''
+        return `<div class="cv-exp"><div class="cv-exp-head"><div><p class="cv-exp-role">${esc(e.role)}</p><p class="cv-exp-org">${esc(e.organization)}${loc}</p></div><p class="cv-exp-period">${esc(e.period)}</p></div>${bl}</div>`
       })
-      return `<div class="xe">${rows.join('')}</div>`
+      return `<div class="cv-exps">${rows.join('')}</div>`
     }
-
     case 'skills':
-      return `<ul class="sk">${section.entries.map((e) => `<li>${esc(e.label)}</li>`).join('')}</ul>`
-
+      return `<ul class="cv-tags">${section.entries.map((e) => `<li class="cv-tag">${esc(e.label)}</li>`).join('')}</ul>`
+    case 'languages':
+      return `<ul class="cv-tags">${section.entries
+        .map((e) => `<li class="cv-tag">${esc(e.label)}${e.level ? ` · ${esc(e.level)}` : ''}</li>`)
+        .join('')}</ul>`
     case 'education': {
-      const rows = section.entries.map((e) => `<div class="er"><div><p class="ed">${esc(e.degree)}</p><p class="ei">${esc(e.institution)}</p></div><p class="ep">${esc(e.period)}</p></div>`)
-      return `<div class="ee">${rows.join('')}</div>`
+      const rows = section.entries.map(
+        (e) =>
+          `<div class="cv-edu"><div><p class="cv-edu-degree">${esc(e.degree)}</p><p class="cv-edu-school">${esc(e.institution)}</p></div><p class="cv-edu-period">${esc(e.period)}</p></div>`,
+      )
+      return `<div class="cv-edus">${rows.join('')}</div>`
     }
   }
 }
 
+function renderSection(section: CvSection): string {
+  return `<section class="cv-section cv-section--${section.kind}"><h2 class="cv-section-title">${esc(section.title)}</h2>${renderSectionBody(section)}</section>`
+}
+
 /**
- * Construit le document HTML complet auto-suffisant à partir d'un RenderableCv.
- * Destiné à être passé à Chromium headless pour l'export PDF.
- * Les données utilisateur sont systématiquement échappées.
+ * Élague les entrées vides et retire les sections devenues sans contenu — évite un
+ * titre orphelin + liste vide au rendu (cas atteignable via l'éditeur : suppression
+ * de toutes les phrases/puces). Couvre aperçu ET export, pour tous les types.
  */
-export function buildCvHtml(cv: RenderableCv): string {
-  const sectionsHtml = cv.sections
-    .map(
-      (s) => `    <section>
-      <h2>${esc(s.title)}</h2>
-      ${renderSection(s)}
-    </section>`,
-    )
-    .join('\n\n')
+function pruneSections(sections: CvSection[]): CvSection[] {
+  return sections
+    .map((s): CvSection => {
+      switch (s.kind) {
+        case 'summary':
+          return s
+        case 'keyskills':
+          return { ...s, entries: s.entries.filter((e) => e.text.trim() !== '') }
+        case 'skills':
+          return { ...s, entries: s.entries.filter((e) => e.label.trim() !== '') }
+        case 'languages':
+          return { ...s, entries: s.entries.filter((e) => e.label.trim() !== '') }
+        case 'education':
+          return { ...s, entries: s.entries.filter((e) => e.degree.trim() !== '' || e.institution.trim() !== '') }
+        case 'experience':
+          return {
+            ...s,
+            entries: s.entries
+              .map((e) => ({ ...e, bullets: e.bullets.filter((b) => b.text.trim() !== '') }))
+              .filter((e) => e.role.trim() !== '' || e.organization.trim() !== '' || e.bullets.length > 0),
+          }
+      }
+    })
+    .filter((s) => (s.kind === 'summary' ? s.text.trim() !== '' : s.entries.length > 0))
+}
+
+/** Sections qui vont dans la sidebar (layout `sidebar-left`). */
+const SIDEBAR_KINDS = new Set<CvSection['kind']>(['summary', 'skills', 'languages'])
+
+/** Lien <link> vers une police Google (nom déjà validé/borné côté serveur). */
+function googleFontLink(name: string | null): string {
+  if (!name) return ''
+  const family = encodeURIComponent(name.trim()).replace(/%20/g, '+')
+  return `<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=${family}:wght@400;500;600;700;800&display=swap" rel="stylesheet">`
+}
+
+/**
+ * Construit le document HTML A4 d'un RenderableCv, habillé par les tokens `design`
+ * (défaut : marque Teven). Données utilisateur systématiquement échappées.
+ */
+export function buildCvHtml(cv: RenderableCv, design: CvDesign | null = DEFAULT_DESIGN): string {
+  const d = design ?? DEFAULT_DESIGN
+
+  const sections = pruneSections(cv.sections)
+  const sidebarSections = sections.filter((s) => SIDEBAR_KINDS.has(s.kind))
+  const mainSections = sections.filter((s) => !SIDEBAR_KINDS.has(s.kind))
+  // Sidebar seulement si demandé ET s'il y a de quoi remplir la sidebar.
+  const useSidebar = d.layout === 'sidebar-left' && sidebarSections.length > 0
+
+  // Photo : data-URL déjà validée par sanitizeDataImage (raster only). Pas un
+  // contenu texte → pas d'esc() ; l'attribut est borné par la regex de validation.
+  // Position : `sidebar` (en haut de la sidebar, si 2 colonnes) sinon en-tête
+  // (gauche/droite). Repli en-tête-droite si `sidebar` mais layout 1 colonne.
+  const photoInSidebar = !!d.photo && d.photoPosition === 'sidebar' && useSidebar
+  const photoInHeader = !!d.photo && !photoInSidebar
+  // Image dans un cadre (taille + padding intérieur). En en-tête, la classe de
+  // position du cadre pilote la marge (var --photo-margin) → bord à bord.
+  const photoImg = `<img class="cv-photo" src="${d.photo}" alt="" />`
+  const frameClass = d.photoPosition === 'header-left' ? 'cv-photo-frame cv-photo-frame--hl' : 'cv-photo-frame cv-photo-frame--hr'
+  const headerPhoto = photoInHeader ? `<div class="${frameClass}">${photoImg}</div>` : ''
+  const sidePhotoHtml = photoInSidebar ? `<div class="cv-side-photo"><div class="cv-photo-frame">${photoImg}</div></div>` : ''
+
+  const sideInner = sidePhotoHtml + sidebarSections.map(renderSection).join('')
+  const mainHtml = useSidebar
+    ? `<div class="cv-col cv-col--side">${sideInner}</div>` +
+      `<div class="cv-col cv-col--main">${mainSections.map(renderSection).join('')}</div>`
+    : sections.map(renderSection).join('')
+
+  const fontVar = d.font ? `--cv-font:'${esc(d.font)}', ui-sans-serif, system-ui, sans-serif;` : ''
+  const radius = d.sidebarRadius ?? 0
+  const photoSize = d.photoSize ?? 128
+  const photoMargin = d.photoMargin ?? 14
+  const photoPadding = d.photoPadding ?? 0
+  const rootStyle = `--accent:${d.accent};--side-bg:${d.sidebarBg};--side-fg:${d.sidebarFg};--side-radius:${radius}mm;--photo-size:${photoSize}px;--photo-margin:${photoMargin}mm;--photo-padding:${photoPadding}mm;${fontVar}`
+  // Rayon 0 ⇒ bande pleine hauteur (robuste multi-pages) ; rayon > 0 ⇒ panneau arrondi.
+  const rootClass = useSidebar
+    ? radius > 0
+      ? 'cv-root cv-root--sidebar cv-root--side-rounded'
+      : 'cv-root cv-root--sidebar'
+    : 'cv-root'
+
+  const headerText = `<div class="cv-header-text">
+        <h1 class="cv-name">${esc(cv.header.fullName)}</h1>
+        <p class="cv-headline">${esc(cv.header.headline)}</p>
+        ${renderContacts(cv)}
+      </div>`
+  // Ordre DOM : photo à gauche ⇒ photo avant le texte ; sinon texte puis photo à droite.
+  const headerInner = photoInHeader
+    ? d.photoPosition === 'header-left'
+      ? headerPhoto + headerText
+      : headerText + headerPhoto
+    : headerText
 
   return `<!DOCTYPE html>
 <html lang="${esc(cv.locale)}">
@@ -110,18 +241,13 @@ export function buildCvHtml(cv: RenderableCv): string {
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>CV</title>
-  <style>${CSS}</style>
+  ${googleFontLink(d.font)}
+  <style>${TEMPLATE_CSS}</style>
 </head>
 <body>
-  <article id="cv-render">
-    <header>
-      <h1>${esc(cv.header.fullName)}</h1>
-      <p class="hl">${esc(cv.header.headline)}</p>
-      ${renderContacts(cv)}
-    </header>
-    <main>
-${sectionsHtml}
-    </main>
+  <article id="cv-render" class="${rootClass}" style="${rootStyle}">
+    <header class="cv-header">${headerInner}</header>
+    <main class="cv-main">${mainHtml}</main>
   </article>
 </body>
 </html>`
diff --git a/apps/app/server/utils/cv-render-input.ts b/apps/app/server/utils/cv-render-input.ts
new file mode 100644
index 0000000..0ef4456
--- /dev/null
+++ b/apps/app/server/utils/cv-render-input.ts
@@ -0,0 +1,78 @@
+/**
+ * Validation + garde-fou de provenance d'un RenderableCv reçu en corps de requête.
+ * Mutualisé entre l'export PDF et l'aperçu (mêmes règles, même rejet).
+ */
+import { z } from 'zod'
+import { assertValidCv } from '@cvo/shared'
+import type { CvDesign, RenderableCv } from '@cvo/shared'
+import { normalizeDesign } from './cv-design-tokens'
+
+const Provenance = z.object({ profileItemId: z.string(), reformulated: z.boolean() })
+const Contact = z.object({ kind: z.enum(['email', 'phone', 'location', 'link']), label: z.string(), value: z.string() })
+const Bullet = z.object({ id: z.string(), text: z.string(), provenance: Provenance })
+const BaseEntry = z.object({ id: z.string(), provenance: Provenance })
+
+const Section = z.discriminatedUnion('kind', [
+  z.object({ kind: z.literal('summary'), title: z.string(), text: z.string(), provenance: Provenance }),
+  z.object({ kind: z.literal('keyskills'), title: z.string(), entries: z.array(BaseEntry.extend({ text: z.string() })) }),
+  z.object({ kind: z.literal('experience'), title: z.string(), entries: z.array(BaseEntry.extend({ role: z.string(), organization: z.string(), period: z.string(), location: z.string().optional(), bullets: z.array(Bullet) })) }),
+  z.object({ kind: z.literal('skills'), title: z.string(), entries: z.array(BaseEntry.extend({ label: z.string() })) }),
+  z.object({ kind: z.literal('education'), title: z.string(), entries: z.array(BaseEntry.extend({ degree: z.string(), institution: z.string(), period: z.string() })) }),
+  z.object({ kind: z.literal('languages'), title: z.string(), entries: z.array(BaseEntry.extend({ label: z.string(), level: z.string() })) }),
+])
+
+export const RenderableCvSchema = z.object({
+  header: z.object({ fullName: z.string().min(1), headline: z.string(), contacts: z.array(Contact), provenance: Provenance }),
+  sections: z.array(Section),
+  locale: z.literal('fr'),
+})
+
+/** Extrait tous les profileItemIds déclarés dans le CV (proxy de profile_snapshot au MVP). */
+export function extractDeclaredIds(cv: RenderableCv): Set<string> {
+  const ids = new Set<string>()
+  const add = (p: { profileItemId: string } | undefined) => { if (p?.profileItemId) ids.add(p.profileItemId) }
+
+  add(cv.header?.provenance)
+  for (const s of cv.sections ?? []) {
+    if (s.kind === 'summary') { add(s.provenance) }
+    else if (s.kind === 'experience') { for (const e of s.entries) { add(e.provenance); for (const b of e.bullets) add(b.provenance) } }
+    else if (s.kind === 'keyskills' || s.kind === 'skills' || s.kind === 'education' || s.kind === 'languages') { for (const e of s.entries) add(e.provenance) }
+  }
+  return ids
+}
+
+/**
+ * Parse le corps en RenderableCv puis applique le garde-fou de provenance.
+ * Lève une 400 (corps invalide) ou une 422 (provenance) — comme avant.
+ */
+export function parseRenderableCvBody(raw: unknown): RenderableCv {
+  const parsed = RenderableCvSchema.safeParse(raw)
+  if (!parsed.success) {
+    throw createError({ statusCode: 400, message: 'Corps invalide : ' + parsed.error.message })
+  }
+  const cv = parsed.data as RenderableCv
+  try {
+    assertValidCv(cv, extractDeclaredIds(cv))
+  } catch (err) {
+    throw createError({ statusCode: 422, message: (err as Error).message })
+  }
+  return cv
+}
+
+/**
+ * Parse un corps de rendu acceptant DEUX formes :
+ *  - un `RenderableCv` nu (rétro-compat `/cv/demo`, ancien `candidature.vue`),
+ *  - `{ cv, design? }` (design par-candidature pour l'éditeur).
+ * Le `cv` est validé + garde-fou provenance ; `design` est normalisé (ou null).
+ */
+export function parseRenderInput(raw: unknown): { cv: RenderableCv; design: CvDesign | null } {
+  const isWrapped = !!raw && typeof raw === 'object' && 'cv' in (raw as Record<string, unknown>)
+  if (isWrapped) {
+    const r = raw as { cv: unknown; design?: unknown }
+    return {
+      cv: parseRenderableCvBody(r.cv),
+      design: r.design == null ? null : normalizeDesign(r.design),
+    }
+  }
+  return { cv: parseRenderableCvBody(raw), design: null }
+}
diff --git a/apps/app/server/utils/pdf.ts b/apps/app/server/utils/pdf.ts
index 6f00e72..5cf491b 100644
--- a/apps/app/server/utils/pdf.ts
+++ b/apps/app/server/utils/pdf.ts
@@ -25,12 +25,24 @@ function resolveChromiumPath(): string {
   return MAC_CHROME
 }
 
+/** Marges A4 par défaut (template par défaut). */
+const DEFAULT_MARGIN = { top: '12mm', right: '14mm', bottom: '12mm', left: '14mm' }
+/** Marges nulles : pour un thème « CV de base » qui gère lui-même ses paddings
+ *  (sidebar pleine page) via `@page{margin:0}` + paddings sur .cv-header/.cv-main. */
+const ZERO_MARGIN = { top: '0', right: '0', bottom: '0', left: '0' }
+
+export interface RenderPdfOptions {
+  /** true ⇒ marges nulles (le thème gère ses paddings). Défaut : marges A4. */
+  fullBleed?: boolean
+}
+
 /**
  * Convertit un fragment HTML en PDF A4.
- * @param html Fragment HTML complet (head + body) rendu par le template Vue.
+ * @param html Fragment HTML complet (head + body).
+ * @param opts `fullBleed` pour laisser un thème gérer ses propres marges.
  * @returns ArrayBuffer du PDF.
  */
-export async function renderHtmlToPdf(html: string): Promise<ArrayBuffer> {
+export async function renderHtmlToPdf(html: string, opts: RenderPdfOptions = {}): Promise<ArrayBuffer> {
   const executablePath = resolveChromiumPath()
   const browser = await chromium.launch({
     executablePath,
@@ -42,7 +54,10 @@ export async function renderHtmlToPdf(html: string): Promise<ArrayBuffer> {
     const pdfBuffer = await page.pdf({
       format: 'A4',
       printBackground: true,
-      margin: { top: '12mm', right: '14mm', bottom: '12mm', left: '14mm' },
+      margin: opts.fullBleed ? ZERO_MARGIN : DEFAULT_MARGIN,
+      // Le CV est un document 1 page : on ne sort QUE la 1re page. Tout débordement
+      // est coupé net (l'éditeur avertit en amont du risque de dépassement).
+      pageRanges: '1',
     })
     return pdfBuffer.buffer as ArrayBuffer
   } finally {
diff --git a/apps/app/server/utils/profile-serialize.ts b/apps/app/server/utils/profile-serialize.ts
index b47e089..97b4929 100644
--- a/apps/app/server/utils/profile-serialize.ts
+++ b/apps/app/server/utils/profile-serialize.ts
@@ -1,4 +1,5 @@
-import type { EducationDTO, ExperienceDTO, ProfileDTO, SkillDTO } from '@cvo/shared'
+import type { EducationDTO, ExperienceDTO, LanguageDTO, ProfileDTO, SkillDTO } from '@cvo/shared'
+import { normalizeDesign } from './cv-design-tokens'
 
 /**
  * Sérialisation Profil (Prisma → DTO transport) et fragment de filtre soft-delete.
@@ -54,13 +55,28 @@ interface EducationRow extends SoftDeletable {
   description: string | null
   orderIndex: number
 }
+interface LanguageRow extends SoftDeletable {
+  id: string
+  label: string
+  level: LanguageDTO['level']
+  orderIndex: number
+}
 interface ProfileRow {
   id: string
+  fullName: string | null
+  email: string | null
+  phone: string | null
+  location: string | null
+  links: string[]
+  keySkills: string[]
   headline: string | null
   summary: string | null
   experiences: ExperienceRow[]
   skills: SkillRow[]
   education: EducationRow[]
+  languages: LanguageRow[]
+  // Colonne Json Prisma — forme `CvDesign` (ou null). Validée à l'écriture.
+  baseCvDesign?: unknown
 }
 
 function toExperienceDTO(e: ExperienceRow): ExperienceDTO {
@@ -80,6 +96,10 @@ function toSkillDTO(s: SkillRow): SkillDTO {
   return { id: s.id, label: s.label, level: s.level, years: s.years, orderIndex: s.orderIndex }
 }
 
+function toLanguageDTO(l: LanguageRow): LanguageDTO {
+  return { id: l.id, label: l.label, level: l.level, orderIndex: l.orderIndex }
+}
+
 function toEducationDTO(ed: EducationRow): EducationDTO {
   return {
     id: ed.id,
@@ -99,10 +119,18 @@ function toEducationDTO(ed: EducationRow): EducationDTO {
 export function toProfileDTO(profile: ProfileRow): ProfileDTO {
   return {
     id: profile.id,
+    fullName: profile.fullName,
+    email: profile.email,
+    phone: profile.phone,
+    location: profile.location,
+    links: profile.links,
+    keySkills: profile.keySkills,
     headline: profile.headline,
     summary: profile.summary,
     experiences: activeOrdered(profile.experiences).map(toExperienceDTO),
     skills: activeOrdered(profile.skills).map(toSkillDTO),
     education: activeOrdered(profile.education).map(toEducationDTO),
+    languages: activeOrdered(profile.languages).map(toLanguageDTO),
+    baseCvDesign: profile.baseCvDesign ? normalizeDesign(profile.baseCvDesign) : null,
   }
 }
diff --git a/apps/app/test/candidature-serialize.spec.ts b/apps/app/test/candidature-serialize.spec.ts
new file mode 100644
index 0000000..dce503f
--- /dev/null
+++ b/apps/app/test/candidature-serialize.spec.ts
@@ -0,0 +1,46 @@
+import { describe, it, expect } from 'vitest'
+import { toCandidatureDTO, toCandidatureListItemDTO, type CandidatureRow } from '../server/utils/candidature-serialize'
+
+const baseRow: CandidatureRow = {
+  id: 'c1',
+  label: 'Dev Fullstack',
+  status: 'SUBMITTED',
+  matchScore: 78,
+  offerSnapshot: { title: 'Dev Fullstack', requiredSkills: ['Vue'], keywords: ['node'], seniority: 'mid' },
+  matchReport: { score: 78, reasons: ['ok'], matchedKeywords: ['vue'], missingKeywords: [] },
+  generatedCv: { locale: 'fr', header: { fullName: 'X', headline: 'Y', contacts: [], provenance: { profileItemId: 'p', reformulated: false } }, sections: [] },
+  design: { layout: 'sidebar-left', accent: '#123456', sidebarBg: '#000000', sidebarFg: '#ffffff', font: 'Inter', summary: '' },
+  createdAt: new Date('2026-06-01T10:00:00.000Z'),
+  updatedAt: new Date('2026-06-02T10:00:00.000Z'),
+}
+
+describe('toCandidatureListItemDTO', () => {
+  it('mappe les champs légers + dates ISO', () => {
+    const dto = toCandidatureListItemDTO(baseRow)
+    expect(dto).toEqual({
+      id: 'c1',
+      label: 'Dev Fullstack',
+      status: 'SUBMITTED',
+      matchScore: 78,
+      createdAt: '2026-06-01T10:00:00.000Z',
+      updatedAt: '2026-06-02T10:00:00.000Z',
+    })
+  })
+})
+
+describe('toCandidatureDTO', () => {
+  it('inclut offre/match/cv et normalise le design', () => {
+    const dto = toCandidatureDTO(baseRow)
+    expect(dto.offer.title).toBe('Dev Fullstack')
+    expect(dto.match.score).toBe(78)
+    expect(dto.cv.header.fullName).toBe('X')
+    expect(dto.design?.layout).toBe('sidebar-left')
+    expect(dto.design?.accent).toBe('#123456')
+    expect(dto.design?.photo).toBeNull() // normalisé (photo absente → null)
+  })
+
+  it('design null reste null', () => {
+    const dto = toCandidatureDTO({ ...baseRow, design: null })
+    expect(dto.design).toBeNull()
+  })
+})
diff --git a/apps/app/test/cv-content-extract.spec.ts b/apps/app/test/cv-content-extract.spec.ts
new file mode 100644
index 0000000..4d7c089
--- /dev/null
+++ b/apps/app/test/cv-content-extract.spec.ts
@@ -0,0 +1,50 @@
+import { describe, it, expect, vi } from 'vitest'
+import { extractCvContent } from '../server/services/cv-content-extract'
+import type { LlmComplete } from '../server/utils/anthropic'
+
+describe('extractCvContent', () => {
+  it('envoie le PDF en bloc document et normalise le contenu', async () => {
+    const complete = vi.fn(async (req) => {
+      const blocks = req.user as Array<{ type: string }>
+      expect(blocks[0]!.type).toBe('document')
+      return {
+        fullName: 'Camille Martin',
+        email: null,
+        phone: null,
+        location: 'Paris',
+        links: ['https://github.com/camille'],
+        headline: 'Dev full-stack',
+        summary: null,
+        experiences: [
+          {
+            title: 'Lead',
+            company: 'Acme',
+            startDate: '2021-01',
+            endDate: null,
+            description: null,
+            skillsUsed: ['Vue', 'Node'],
+          },
+        ],
+        skills: [{ label: 'TypeScript', level: 'EXPERT', years: 6 }],
+        languages: [{ label: 'Anglais', level: 'C1' }],
+      }
+    }) as unknown as LlmComplete
+
+    const parsed = await extractCvContent('UERG', { complete })
+
+    expect(parsed.fullName).toBe('Camille Martin')
+    expect(parsed.experiences).toHaveLength(1)
+    expect(parsed.experiences[0]!.company).toBe('Acme')
+    expect(parsed.skills[0]!.level).toBe('EXPERT')
+    expect(parsed.languages[0]!.label).toBe('Anglais')
+  })
+
+  it('tolère une réponse partielle (champs manquants → null/[])', async () => {
+    const complete = vi.fn(async () => ({ fullName: 'X' })) as unknown as LlmComplete
+    const parsed = await extractCvContent('UERG', { complete })
+    expect(parsed.experiences).toEqual([])
+    expect(parsed.skills).toEqual([])
+    expect(parsed.languages).toEqual([])
+    expect(parsed.email).toBe('')
+  })
+})
diff --git a/apps/app/test/cv-design-extract.spec.ts b/apps/app/test/cv-design-extract.spec.ts
new file mode 100644
index 0000000..fce90db
--- /dev/null
+++ b/apps/app/test/cv-design-extract.spec.ts
@@ -0,0 +1,46 @@
+import { describe, it, expect, vi } from 'vitest'
+import { extractCvDesign } from '../server/services/cv-design-extract'
+import type { LlmComplete } from '../server/utils/anthropic'
+
+describe('extractCvDesign', () => {
+  it('envoie le PDF en bloc document et renvoie des tokens normalisés', async () => {
+    const complete = vi.fn(async (req) => {
+      const blocks = req.user as Array<{ type: string }>
+      expect(blocks[0]!.type).toBe('document')
+      return {
+        layout: 'sidebar-left',
+        accent: '#2563eb',
+        sidebarBg: '#0f172a',
+        sidebarFg: '#ffffff',
+        font: '  Inter  ',
+        summary: '  Sobre, sidebar sombre  ',
+      }
+    }) as unknown as LlmComplete
+
+    const design = await extractCvDesign('UERG', { complete })
+
+    expect(design.layout).toBe('sidebar-left')
+    expect(design.accent).toBe('#2563eb')
+    expect(design.font).toBe('Inter') // trim
+    expect(design.summary).toBe('Sobre, sidebar sombre')
+  })
+
+  it('retombe sur des valeurs sûres si le modèle renvoie n’importe quoi', async () => {
+    const complete = vi.fn(async () => ({
+      layout: 'bogus',
+      accent: 'not-a-color',
+      sidebarBg: '#000',
+      sidebarFg: '#fff',
+      font: 'Inter; }<script>',
+      summary: 42,
+    })) as unknown as LlmComplete
+
+    const design = await extractCvDesign('UERG', { complete })
+
+    expect(design.layout).toBe('single') // enum invalide → défaut
+    expect(design.accent).toMatch(/^#[0-9a-f]{3,6}$/i) // couleur invalide → défaut
+    expect(design.sidebarBg).toBe('#000')
+    expect(design.font).toBeNull() // police non conforme → null
+    expect(design.summary).toBe('')
+  })
+})
diff --git a/apps/app/test/cv-design-tokens.spec.ts b/apps/app/test/cv-design-tokens.spec.ts
new file mode 100644
index 0000000..5a852f8
--- /dev/null
+++ b/apps/app/test/cv-design-tokens.spec.ts
@@ -0,0 +1,71 @@
+import { describe, it, expect } from 'vitest'
+import { sanitizeDataImage, normalizeDesign, DEFAULT_DESIGN } from '../server/utils/cv-design-tokens'
+
+const PNG = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUg=='
+const JPEG = 'data:image/jpeg;base64,/9j/4AAQSkZJRg=='
+const WEBP = 'data:image/webp;base64,UklGRhoAAABXRUJQ'
+
+describe('sanitizeDataImage', () => {
+  it('accepte png/jpeg/webp en data-URL', () => {
+    expect(sanitizeDataImage(PNG)).toBe(PNG)
+    expect(sanitizeDataImage(JPEG)).toBe(JPEG)
+    expect(sanitizeDataImage(WEBP)).toBe(WEBP)
+  })
+  it('rejette le SVG (vecteur de script)', () => {
+    expect(sanitizeDataImage('data:image/svg+xml;base64,PHN2Zz48L3N2Zz4=')).toBeNull()
+  })
+  it('rejette les URL distantes', () => {
+    expect(sanitizeDataImage('https://evil.test/x.png')).toBeNull()
+  })
+  it('rejette une data-URL trop volumineuse', () => {
+    expect(sanitizeDataImage('data:image/png;base64,' + 'A'.repeat(800_000))).toBeNull()
+  })
+  it('rejette le non-string', () => {
+    expect(sanitizeDataImage(undefined)).toBeNull()
+    expect(sanitizeDataImage(42)).toBeNull()
+  })
+})
+
+describe('normalizeDesign — photo', () => {
+  it('passe la photo valide, défaut null sinon', () => {
+    expect(normalizeDesign({ ...DEFAULT_DESIGN, photo: PNG }).photo).toBe(PNG)
+    expect(normalizeDesign({ ...DEFAULT_DESIGN, photo: 'nope' }).photo).toBeNull()
+    expect(normalizeDesign({}).photo).toBeNull()
+  })
+})
+
+describe('normalizeDesign — tokens de mise en page (bornage + enum)', () => {
+  it('borne sidebarRadius dans [0,12]', () => {
+    expect(normalizeDesign({ sidebarRadius: 99 }).sidebarRadius).toBe(12)
+    expect(normalizeDesign({ sidebarRadius: -5 }).sidebarRadius).toBe(0)
+    expect(normalizeDesign({ sidebarRadius: 'abc' }).sidebarRadius).toBe(0)
+    expect(normalizeDesign({ sidebarRadius: Infinity }).sidebarRadius).toBe(0)
+  })
+  it('borne photoSize en px dans [64,360], défaut 128', () => {
+    expect(normalizeDesign({ photoSize: 999 }).photoSize).toBe(360)
+    expect(normalizeDesign({ photoSize: 10 }).photoSize).toBe(64)
+    expect(normalizeDesign({}).photoSize).toBe(128)
+  })
+  it('borne photoMargin dans [0,16], défaut 14', () => {
+    expect(normalizeDesign({ photoMargin: 99 }).photoMargin).toBe(16)
+    expect(normalizeDesign({ photoMargin: -3 }).photoMargin).toBe(0)
+    expect(normalizeDesign({}).photoMargin).toBe(14)
+  })
+  it('borne photoPadding dans [0,8], défaut 0', () => {
+    expect(normalizeDesign({ photoPadding: 99 }).photoPadding).toBe(8)
+    expect(normalizeDesign({ photoPadding: -3 }).photoPadding).toBe(0)
+    expect(normalizeDesign({}).photoPadding).toBe(0)
+  })
+  it('contraint photoPosition à l’enum (défaut header-right)', () => {
+    expect(normalizeDesign({ photoPosition: 'header-left' }).photoPosition).toBe('header-left')
+    expect(normalizeDesign({ photoPosition: 'sidebar' }).photoPosition).toBe('sidebar')
+    expect(normalizeDesign({ photoPosition: 'top' }).photoPosition).toBe('header-right')
+    expect(normalizeDesign({ photoPosition: 42 }).photoPosition).toBe('header-right')
+  })
+  it('ancien design stocké (sans les nouveaux champs) → défauts remplis', () => {
+    const d = normalizeDesign({ layout: 'single', accent: '#000000' })
+    expect(d.sidebarRadius).toBe(0)
+    expect(d.photoPosition).toBe('header-right')
+    expect(d.photoSize).toBe(128)
+  })
+})
diff --git a/apps/app/test/cv-html.spec.ts b/apps/app/test/cv-html.spec.ts
index dc185d5..2d54977 100644
--- a/apps/app/test/cv-html.spec.ts
+++ b/apps/app/test/cv-html.spec.ts
@@ -104,9 +104,161 @@ describe('buildCvHtml', () => {
     expect(html).toContain('&lt;script&gt;')
   })
 
-  it('inclut les tokens CSS (@page A4, couleurs de marque)', () => {
+  it('rend un document A4 avec le gabarit codé', () => {
     const html = buildCvHtml(demoCv)
-    expect(html).toContain('A4 portrait')
-    expect(html).toContain('--b600')
+    expect(html).toContain('size:A4')
+    expect(html).toContain('class="cv-root"')
+    expect(html).toContain('cv-section cv-section--experience')
+    expect(html).toContain('class="cv-name"')
+  })
+
+  it('applique les tokens de design (accent, police) en variables CSS', () => {
+    const html = buildCvHtml(demoCv, {
+      layout: 'single',
+      accent: '#ff0000',
+      sidebarBg: '#111111',
+      sidebarFg: '#ffffff',
+      font: 'Poppins',
+      summary: 'Test',
+    })
+    expect(html).toContain('--accent:#ff0000')
+    expect(html).toContain("--cv-font:'Poppins'")
+    expect(html).toContain('fonts.googleapis.com/css2?family=Poppins')
+  })
+
+  it('passe en 2 colonnes pour le layout sidebar-left (avec sections de sidebar)', () => {
+    const html = buildCvHtml(demoCv, {
+      layout: 'sidebar-left',
+      accent: '#2563eb',
+      sidebarBg: '#0f172a',
+      sidebarFg: '#ffffff',
+      font: null,
+      summary: '',
+    })
+    expect(html).toContain('cv-root--sidebar')
+    expect(html).toContain('cv-col--side')
+    expect(html).toContain('cv-col--main')
+  })
+
+  it('rend la photo (data-URL) quand design.photo est défini, sinon non', () => {
+    const photo = 'data:image/jpeg;base64,/9j/4AAQSkZJRg=='
+    const withPhoto = buildCvHtml(demoCv, {
+      layout: 'single',
+      accent: '#2563eb',
+      sidebarBg: '#0f172a',
+      sidebarFg: '#ffffff',
+      font: null,
+      photo,
+      summary: '',
+    })
+    expect(withPhoto).toContain('<img class="cv-photo')
+    expect(withPhoto).toContain(photo)
+
+    expect(buildCvHtml(demoCv)).not.toContain('<img class="cv-photo')
+  })
+
+  const designBase = {
+    layout: 'single' as const,
+    accent: '#2563eb',
+    sidebarBg: '#0f172a',
+    sidebarFg: '#ffffff',
+    font: null,
+    summary: '',
+  }
+  const PHOTO = 'data:image/jpeg;base64,/9j/4AAQSkZJRg=='
+
+  // NB : les noms de classe apparaissent aussi dans le CSS → on cible l'attribut
+  // `class="..."` de l'article et les balises rendues, pas une sous-chaîne nue.
+  it('mode panneau (radius>0) : classe side-rounded sur l’article + var --side-radius', () => {
+    const html = buildCvHtml(demoCv, { ...designBase, layout: 'sidebar-left', sidebarRadius: 6 })
+    expect(html).toContain('class="cv-root cv-root--sidebar cv-root--side-rounded"')
+    expect(html).toContain('--side-radius:6mm')
+  })
+
+  it('rayon ignoré hors sidebar (layout single → article = cv-root simple)', () => {
+    const html = buildCvHtml(demoCv, { ...designBase, layout: 'single', sidebarRadius: 6 })
+    expect(html).toContain('class="cv-root"')
+  })
+
+  it('photoPosition sidebar (2 colonnes) → div cv-side-photo rendu', () => {
+    const html = buildCvHtml(demoCv, { ...designBase, layout: 'sidebar-left', photo: PHOTO, photoPosition: 'sidebar' })
+    expect(html).toContain('<div class="cv-side-photo">')
+  })
+
+  it('photoPosition sidebar mais layout single → repli en-tête (pas de div cv-side-photo)', () => {
+    const html = buildCvHtml(demoCv, { ...designBase, layout: 'single', photo: PHOTO, photoPosition: 'sidebar' })
+    expect(html).not.toContain('<div class="cv-side-photo">')
+    expect(html).toContain('<img class="cv-photo')
+  })
+
+  it('photoPosition header-left → <img> avant le <h1>; header-right → après', () => {
+    const left = buildCvHtml(demoCv, { ...designBase, photo: PHOTO, photoPosition: 'header-left' })
+    expect(left.indexOf('<img class="cv-photo')).toBeLessThan(left.indexOf('<h1 class="cv-name"'))
+    const right = buildCvHtml(demoCv, { ...designBase, photo: PHOTO, photoPosition: 'header-right' })
+    expect(right.indexOf('<h1 class="cv-name"')).toBeLessThan(right.indexOf('<img class="cv-photo'))
+  })
+
+  it('applique --photo-size en px', () => {
+    const html = buildCvHtml(demoCv, { ...designBase, photo: PHOTO, photoSize: 200 })
+    expect(html).toContain('--photo-size:200px')
+  })
+
+  it('applique --photo-margin (bord à bord)', () => {
+    const html = buildCvHtml(demoCv, { ...designBase, photo: PHOTO, photoMargin: 0 })
+    expect(html).toContain('--photo-margin:0mm')
+  })
+
+  it('applique --photo-padding et encadre l’image (cv-photo-frame)', () => {
+    const html = buildCvHtml(demoCv, { ...designBase, photo: PHOTO, photoPadding: 4 })
+    expect(html).toContain('--photo-padding:4mm')
+    expect(html).toContain('cv-photo-frame')
+    expect(html).toContain('<img class="cv-photo"') // image interne au cadre
+  })
+
+  it('rend une section keyskills en liste de phrases', () => {
+    const cv: RenderableCv = {
+      ...demoCv,
+      sections: [
+        {
+          kind: 'keyskills',
+          title: 'Compétences clés',
+          entries: [
+            { id: 'k1', text: 'Concevoir des apps web', provenance: { profileItemId: 'p', reformulated: false } },
+            { id: 'k2', text: 'Livrer du code testé', provenance: { profileItemId: 'p', reformulated: false } },
+          ],
+        },
+      ],
+    }
+    const html = buildCvHtml(cv)
+    expect(html).toContain('<ul class="cv-keyskills">')
+    expect(html).toContain('<li class="cv-keyskill">Concevoir des apps web</li>')
+    expect(html).toContain('<li class="cv-keyskill">Livrer du code testé</li>')
+  })
+
+  it('élague les entrées vides et ne rend pas une section keyskills vidée (pas de titre orphelin)', () => {
+    const withBlank: RenderableCv = {
+      ...demoCv,
+      sections: [
+        {
+          kind: 'keyskills',
+          title: 'Compétences clés',
+          entries: [
+            { id: 'k1', text: 'Concevoir des apps', provenance: { profileItemId: 'p', reformulated: false } },
+            { id: 'k2', text: '   ', provenance: { profileItemId: 'p', reformulated: false } },
+          ],
+        },
+      ],
+    }
+    const html = buildCvHtml(withBlank)
+    expect(html).toContain('<li class="cv-keyskill">Concevoir des apps</li>')
+    expect(html).not.toContain('<li class="cv-keyskill"></li>') // l'entrée vide est retirée
+
+    const allEmpty: RenderableCv = {
+      ...demoCv,
+      sections: [{ kind: 'keyskills', title: 'Compétences clés', entries: [{ id: 'k1', text: '', provenance: { profileItemId: 'p', reformulated: false } }] }],
+    }
+    const empty = buildCvHtml(allEmpty)
+    expect(empty).not.toContain('cv-section--keyskills') // section vide non rendue (pas de titre orphelin)
+    expect(empty).not.toContain('<ul class="cv-keyskills">')
   })
 })
diff --git a/apps/app/test/cv-render-input.spec.ts b/apps/app/test/cv-render-input.spec.ts
new file mode 100644
index 0000000..0bf200f
--- /dev/null
+++ b/apps/app/test/cv-render-input.spec.ts
@@ -0,0 +1,65 @@
+import { describe, it, expect } from 'vitest'
+import { parseRenderInput } from '../server/utils/cv-render-input'
+import type { RenderableCv } from '@cvo/shared'
+
+const prov = { profileItemId: 'p1', reformulated: false }
+const baseCv: RenderableCv = {
+  locale: 'fr',
+  header: { fullName: 'Camille', headline: 'Dev', contacts: [], provenance: prov },
+  sections: [],
+}
+
+describe('parseRenderInput — dual-shape', () => {
+  it('accepte un RenderableCv nu (design null)', () => {
+    const out = parseRenderInput(baseCv)
+    expect(out.cv.header.fullName).toBe('Camille')
+    expect(out.design).toBeNull()
+  })
+
+  it('accepte { cv, design } et normalise le design (couleur invalide → défaut)', () => {
+    const out = parseRenderInput({
+      cv: baseCv,
+      design: { layout: 'sidebar-left', accent: 'pas-une-couleur', sidebarBg: '#101010', sidebarFg: '#fff', font: 'Inter', summary: '' },
+    })
+    expect(out.design?.layout).toBe('sidebar-left')
+    expect(out.design?.accent).toMatch(/^#[0-9a-f]{3,6}$/i) // invalide → défaut
+    expect(out.design?.sidebarBg).toBe('#101010')
+  })
+})
+
+describe('parseRenderInput — garde-fou provenance (invariant éditeur)', () => {
+  it("rejette un nœud à profileItemId vide", () => {
+    const bad: RenderableCv = {
+      ...baseCv,
+      sections: [{ kind: 'summary', title: 'Profil', text: 'x', provenance: { profileItemId: '', reformulated: true } }],
+    }
+    expect(() => parseRenderInput(bad)).toThrow()
+  })
+
+  it('accepte un nœud à profileItemId recopié (non vide)', () => {
+    const ok: RenderableCv = {
+      ...baseCv,
+      sections: [{ kind: 'summary', title: 'Profil', text: 'x', provenance: { profileItemId: 'p1', reformulated: true } }],
+    }
+    expect(() => parseRenderInput(ok)).not.toThrow()
+  })
+})
+
+describe('parseRenderInput — section keyskills (phrases)', () => {
+  it('accepte une section keyskills à provenance non vide', () => {
+    const cv: RenderableCv = {
+      ...baseCv,
+      sections: [{ kind: 'keyskills', title: 'Compétences clés', entries: [{ id: 'k1', text: 'Concevoir…', provenance: { profileItemId: 'p1', reformulated: false } }] }],
+    }
+    const out = parseRenderInput(cv)
+    expect(out.cv.sections[0].kind).toBe('keyskills')
+  })
+
+  it('rejette une entrée keyskills à profileItemId vide', () => {
+    const bad: RenderableCv = {
+      ...baseCv,
+      sections: [{ kind: 'keyskills', title: 'Compétences clés', entries: [{ id: 'k1', text: 'x', provenance: { profileItemId: '', reformulated: false } }] }],
+    }
+    expect(() => parseRenderInput(bad)).toThrow()
+  })
+})
diff --git a/apps/app/test/keyskills-adapt.spec.ts b/apps/app/test/keyskills-adapt.spec.ts
new file mode 100644
index 0000000..542f977
--- /dev/null
+++ b/apps/app/test/keyskills-adapt.spec.ts
@@ -0,0 +1,40 @@
+import { describe, it, expect } from 'vitest'
+import type { AnalyzedOffer } from '@cvo/shared'
+import { adaptKeySkills } from '../server/services/keyskills-adapt'
+import { type LlmComplete } from '../server/utils/anthropic'
+
+const OFFER: AnalyzedOffer = { title: 'Dev Vue', requiredSkills: ['Vue.js'], keywords: ['SPA'], seniority: 'mid' }
+const SOURCE = ['Concevoir des apps Vue', 'Maîtriser Node.js', 'Livrer du code testé']
+
+const fakeLlm =
+  (payload: unknown): LlmComplete =>
+  async () =>
+    payload
+
+describe('adaptKeySkills — adaptation bornée (anti-invention)', () => {
+  it('renvoie les phrases adaptées (trim + sans vides)', async () => {
+    const out = await adaptKeySkills(SOURCE, OFFER, {
+      complete: fakeLlm({ keySkills: ['  Concevoir des SPA Vue.js  ', '', 'Livrer du code testé'] }),
+    })
+    expect(out).toEqual(['Concevoir des SPA Vue.js', 'Livrer du code testé'])
+  })
+
+  it('borne au nombre de phrases sources (jamais plus)', async () => {
+    const out = await adaptKeySkills(SOURCE, OFFER, {
+      complete: fakeLlm({ keySkills: ['a', 'b', 'c', 'd', 'e'] }),
+    })
+    expect(out).toHaveLength(3) // SOURCE en a 3
+  })
+
+  it('repli verbatim si le LLM ne renvoie rien d’exploitable', async () => {
+    const out = await adaptKeySkills(SOURCE, OFFER, { complete: fakeLlm({ keySkills: [] }) })
+    expect(out).toEqual(SOURCE)
+  })
+
+  it('liste vide en entrée → liste vide (aucun appel nécessaire)', async () => {
+    const out = await adaptKeySkills([], OFFER, {
+      complete: async () => { throw new Error('ne devrait pas être appelé') },
+    })
+    expect(out).toEqual([])
+  })
+})
diff --git a/apps/app/test/match-contracts.spec.ts b/apps/app/test/match-contracts.spec.ts
index e264f4f..a0d611b 100644
--- a/apps/app/test/match-contracts.spec.ts
+++ b/apps/app/test/match-contracts.spec.ts
@@ -46,6 +46,14 @@ describe('clampScore — bornage du score LLM', () => {
 /** Profil minimal : compétences + une expérience avec skillsUsed. */
 const PROFILE: ProfileDTO = {
   id: 'prof-1',
+  fullName: 'Léa Dupont',
+  email: null,
+  phone: null,
+  location: null,
+  links: [],
+  languages: [],
+  keySkills: [],
+  baseCvDesign: null,
   headline: 'Cheffe de projet digital',
   summary: 'Cinq ans en gestion de projet agile.',
   experiences: [
diff --git a/apps/app/test/match-report.spec.ts b/apps/app/test/match-report.spec.ts
index 1281292..bd969da 100644
--- a/apps/app/test/match-report.spec.ts
+++ b/apps/app/test/match-report.spec.ts
@@ -6,6 +6,14 @@ import { LlmError, type LlmComplete } from '../server/utils/anthropic'
 /** Profil réel minimal : la compétence TypeScript couvre l'offre OFFER. */
 const PROFILE: ProfileDTO = {
   id: 'prof-1',
+  fullName: 'Camille Martin',
+  email: null,
+  phone: null,
+  location: null,
+  links: [],
+  languages: [],
+  keySkills: [],
+  baseCvDesign: null,
   headline: 'Dev full-stack',
   summary: 'Quatre ans de TypeScript.',
   experiences: [
diff --git a/apps/app/test/matching.spec.ts b/apps/app/test/matching.spec.ts
index 0dd597b..f9d1ce7 100644
--- a/apps/app/test/matching.spec.ts
+++ b/apps/app/test/matching.spec.ts
@@ -12,6 +12,14 @@ import type { LlmComplete } from '../server/utils/anthropic'
 /** Profil réel minimal : 1 expérience + 1 compétence. Ids = source de vérité. */
 const PROFILE: ProfileDTO = {
   id: 'prof-1',
+  fullName: 'Camille Martin',
+  email: null,
+  phone: null,
+  location: null,
+  links: [],
+  languages: [],
+  keySkills: [],
+  baseCvDesign: null,
   headline: 'Dev full-stack',
   summary: 'Quatre ans de TypeScript.',
   experiences: [
diff --git a/apps/app/test/photo-crop.spec.ts b/apps/app/test/photo-crop.spec.ts
new file mode 100644
index 0000000..462ba6e
--- /dev/null
+++ b/apps/app/test/photo-crop.spec.ts
@@ -0,0 +1,44 @@
+import { describe, it, expect } from 'vitest'
+import { fitCropSide, coverCropSide, cropSideForZoom, clampCrop } from '../utils/photo-crop'
+
+describe('fitCropSide / coverCropSide', () => {
+  it('fit = plus grand côté (image entière) ; cover = plus petit', () => {
+    expect(fitCropSide(800, 600)).toBe(800)
+    expect(fitCropSide(400, 1000)).toBe(1000)
+    expect(coverCropSide(800, 600)).toBe(600)
+  })
+  it('plancher à 1 (jamais 0)', () => {
+    expect(fitCropSide(0, 0)).toBe(1)
+    expect(coverCropSide(0, 0)).toBe(1)
+  })
+})
+
+describe('cropSideForZoom', () => {
+  it('zoom 1 = image entière (plus grand côté)', () => {
+    expect(cropSideForZoom(800, 600, 1)).toBe(800)
+    expect(cropSideForZoom(600, 800, 1)).toBe(800)
+  })
+  it('zoomer réduit le carré ; borne le zoom à [1, max]', () => {
+    expect(cropSideForZoom(800, 800, 2)).toBe(400)
+    expect(cropSideForZoom(800, 800, 9, 4)).toBe(200) // borné à 4 → 800/4
+    expect(cropSideForZoom(800, 800, 0.5)).toBe(800) // borné à 1
+    expect(cropSideForZoom(800, 800, NaN)).toBe(800) // fallback 1
+  })
+})
+
+describe('clampCrop', () => {
+  it('carré dans l’image (cropSide ≤ dimension) : coin borné dans [0, dim - cropSide]', () => {
+    expect(clampCrop(800, 600, 600, -50, -50)).toEqual({ x: 0, y: 0 })
+    expect(clampCrop(800, 600, 600, 999, 999)).toEqual({ x: 200, y: 0 })
+    expect(clampCrop(800, 600, 400, 100, 80)).toEqual({ x: 100, y: 80 })
+  })
+  it('image plus petite que le carré (zoom dézoomé) : coin négatif autorisé (centrage)', () => {
+    // image 600x800, carré 800 → x ∈ [600-800, 0] = [-200, 0], y ∈ [0, 0]
+    expect(clampCrop(600, 800, 800, -500, 0)).toEqual({ x: -200, y: 0 })
+    expect(clampCrop(600, 800, 800, 50, 50)).toEqual({ x: 0, y: 0 })
+    expect(clampCrop(600, 800, 800, -100, 0)).toEqual({ x: -100, y: 0 })
+  })
+  it('valeurs non finies → 0', () => {
+    expect(clampCrop(800, 600, 400, NaN, Infinity)).toEqual({ x: 0, y: 0 })
+  })
+})
diff --git a/apps/app/test/profile-serialize.spec.ts b/apps/app/test/profile-serialize.spec.ts
index f7cb93f..39c0846 100644
--- a/apps/app/test/profile-serialize.spec.ts
+++ b/apps/app/test/profile-serialize.spec.ts
@@ -37,6 +37,12 @@ describe('toProfileDTO', () => {
   const d = (s: string) => new Date(s)
   const profile = {
     id: 'p1',
+    fullName: 'Camille Martin',
+    email: 'camille@exemple.fr',
+    phone: null,
+    location: 'Paris, France',
+    links: ['https://github.com/camille'],
+    keySkills: ['Concevoir des apps Vue/Node'],
     headline: 'Développeuse Full-Stack',
     summary: null,
     experiences: [
@@ -76,11 +82,22 @@ describe('toProfileDTO', () => {
     ],
     skills: [{ id: 's1', label: 'TypeScript', level: 'EXPERT' as const, years: 6, orderIndex: 0, deletedAt: null }],
     education: [],
+    languages: [
+      { id: 'l1', label: 'Anglais', level: 'C1' as const, orderIndex: 1, deletedAt: null },
+      { id: 'l-del', label: 'Espagnol', level: null, orderIndex: 0, deletedAt: d('2026-01-01T00:00:00.000Z') },
+      { id: 'l2', label: 'Français', level: 'NATIVE' as const, orderIndex: 0, deletedAt: null },
+    ],
   }
 
   it('maps to DTO, excludes soft-deleted children and keeps display order', () => {
     const dto = toProfileDTO(profile)
     expect(dto.id).toBe('p1')
+    expect(dto.fullName).toBe('Camille Martin')
+    expect(dto.email).toBe('camille@exemple.fr')
+    expect(dto.location).toBe('Paris, France')
+    expect(dto.links).toEqual(['https://github.com/camille'])
+    // langues : exclut la soft-delete, trie par orderIndex (l2 avant l1)
+    expect(dto.languages.map((l) => l.id)).toEqual(['l2', 'l1'])
     expect(dto.experiences.map((e) => e.id)).toEqual(['e1', 'e2'])
     expect(dto.experiences[0]!.startDate).toBe('2020-01-01T00:00:00.000Z')
     expect(dto.experiences[1]!.endDate).toBeNull()
diff --git a/apps/app/utils/photo-crop.ts b/apps/app/utils/photo-crop.ts
new file mode 100644
index 0000000..58e867c
--- /dev/null
+++ b/apps/app/utils/photo-crop.ts
@@ -0,0 +1,48 @@
+/**
+ * Géométrie pure du recadrage carré d'une photo, en pixels SOURCE. Sans DOM →
+ * testable. Le crop est un carré `{ x, y, cropSide }`.
+ *
+ * Zoom MINIMAL (= 1) = image ENTIÈRE visible (carré contenant toute l'image, donc
+ * marges possibles si la photo n'est pas carrée — comblées en blanc à l'export).
+ * Zoomer (zoom > 1) réduit le carré → recadre plus serré. Pas de zoom imposé par défaut.
+ */
+
+/** Côté du carré contenant TOUTE l'image (le plus grand côté). Zoom min. */
+export function fitCropSide(naturalW: number, naturalH: number): number {
+  return Math.max(1, Math.max(naturalW, naturalH))
+}
+
+/** Côté du carré « cover » (remplit le carré, recadre le surplus). Repère utile. */
+export function coverCropSide(naturalW: number, naturalH: number): number {
+  return Math.max(1, Math.min(naturalW, naturalH))
+}
+
+/** Côté du carré de crop pour un zoom donné (zoom 1 = image entière ; borné [1, maxZoom]). */
+export function cropSideForZoom(naturalW: number, naturalH: number, zoom: number, maxZoom = 4): number {
+  const z = Math.min(maxZoom, Math.max(1, Number.isFinite(zoom) ? zoom : 1))
+  return fitCropSide(naturalW, naturalH) / z
+}
+
+/**
+ * Borne le coin haut-gauche du carré. Si l'image est PLUS PETITE que le carré dans
+ * une dimension (zoom dézoomé), on autorise un coin négatif et on centre ; sinon le
+ * carré reste à l'intérieur de l'image (jamais de débordement non voulu).
+ */
+export function clampCrop(
+  naturalW: number,
+  naturalH: number,
+  cropSide: number,
+  x: number,
+  y: number,
+): { x: number; y: number } {
+  const loX = Math.min(0, naturalW - cropSide)
+  const hiX = Math.max(0, naturalW - cropSide)
+  const loY = Math.min(0, naturalH - cropSide)
+  const hiY = Math.max(0, naturalH - cropSide)
+  const cx = Number.isFinite(x) ? x : 0
+  const cy = Number.isFinite(y) ? y : 0
+  return {
+    x: Math.min(hiX, Math.max(loX, cx)),
+    y: Math.min(hiY, Math.max(loY, cy)),
+  }
+}
diff --git a/packages/shared/src/candidature.ts b/packages/shared/src/candidature.ts
new file mode 100644
index 0000000..0c1e450
--- /dev/null
+++ b/packages/shared/src/candidature.ts
@@ -0,0 +1,56 @@
+/**
+ * Contrats partagés — Candidature persistée (offre analysée + CV généré éditable
+ * + suivi). Le CV devient durable et alimente la liste de suivi des candidatures.
+ */
+import type { AnalyzedOffer } from './offer.js'
+import type { MatchReport } from './match.js'
+import type { CvDesign, RenderableCv } from './cv.js'
+
+/** Cycle de vie d'une candidature (miroir de l'enum SQL CandidatureStatus). */
+export type CandidatureStatus = 'DRAFT' | 'SUBMITTED' | 'INTERVIEW' | 'REJECTED' | 'ACCEPTED'
+
+export const CANDIDATURE_STATUSES: readonly CandidatureStatus[] = [
+  'DRAFT',
+  'SUBMITTED',
+  'INTERVIEW',
+  'REJECTED',
+  'ACCEPTED',
+] as const
+
+/** Libellés FR pour l'UI. */
+export const CANDIDATURE_STATUS_LABELS: Record<CandidatureStatus, string> = {
+  DRAFT: 'Brouillon',
+  SUBMITTED: 'Postulé',
+  INTERVIEW: 'Entretien',
+  REJECTED: 'Refusé',
+  ACCEPTED: 'Accepté',
+}
+
+/** Élément de liste (léger — pas de gros JSON). Pour la page de suivi. */
+export interface CandidatureListItemDTO {
+  id: string
+  label: string
+  status: CandidatureStatus
+  matchScore: number
+  createdAt: string // ISO-8601
+  updatedAt: string
+}
+
+/** Candidature complète (pour l'éditeur). */
+export interface CandidatureDTO extends CandidatureListItemDTO {
+  offer: AnalyzedOffer
+  match: MatchReport
+  cv: RenderableCv
+  /** Design par-candidature, ou null (→ fallback profil/défaut au rendu). */
+  design: CvDesign | null
+}
+
+/** PATCH /api/candidatures/:id — champs modifiables (tous optionnels). */
+export interface UpdateCandidatureRequest {
+  cv?: RenderableCv
+  design?: CvDesign | null
+  status?: CandidatureStatus
+  label?: string
+}
+
+export const CANDIDATURES_PATH = '/api/candidatures' as const
diff --git a/packages/shared/src/cv.ts b/packages/shared/src/cv.ts
index 1e26408..f55e936 100644
--- a/packages/shared/src/cv.ts
+++ b/packages/shared/src/cv.ts
@@ -11,6 +11,48 @@
  * La vérification est déterministe (voir `provenance.ts`), pas seulement un prompt.
  */
 
+/** Disposition générale d'un CV. */
+export type CvLayout = 'single' | 'sidebar-left'
+
+/**
+ * Tokens de design « CV de base » extraits d'un PDF uploadé par le candidat.
+ *
+ * ⚠️ Ne contient que des PARAMÈTRES de style (couleurs/police/disposition) —
+ * jamais de CSS brut ni de contenu. Le gabarit CV (codé, testé à l'impression)
+ * applique ces tokens via des variables CSS → rendu toujours propre, adapté au CV.
+ * Le contenu vient toujours du profil réel (`RenderableCv`, provenance garantie).
+ */
+export interface CvDesign {
+  /** Disposition : une colonne, ou sidebar à gauche. */
+  layout: CvLayout
+  /** Couleur d'accent (titres de section, accroche, filets) — hex. */
+  accent: string
+  /** Fond de la sidebar (layout `sidebar-left`) — hex. */
+  sidebarBg: string
+  /** Couleur du texte sur la sidebar — hex. */
+  sidebarFg: string
+  /** Rayon d'arrondi de la sidebar, en mm (0 = bord franc). */
+  sidebarRadius?: number
+  /** Emplacement de la photo. `sidebar` = en haut de la sidebar (layout 2 colonnes). */
+  photoPosition?: 'header-right' | 'header-left' | 'sidebar'
+  /** Taille de la photo (côté du carré), en PIXELS CSS. */
+  photoSize?: number
+  /** Distance de la photo au bord de page, en mm (0 = bord à bord). */
+  photoMargin?: number
+  /** Padding intérieur de la photo, en mm (espace autour de l'image dans sa case). */
+  photoPadding?: number
+  /** Nom de police Google à charger (ex. « Inter »), ou null (police par défaut). */
+  font: string | null
+  /**
+   * Photo de profil — data-URL raster validée (`data:image/png|jpeg|webp;base64,…`)
+   * ou null. STYLE only, jamais de contenu/provenance. Redimensionnée côté client
+   * (petite) ; re-validée serveur par `sanitizeDataImage` (plafond d'octets).
+   */
+  photo?: string | null
+  /** Résumé lisible du design capturé (pour l'UI de relecture). */
+  summary: string
+}
+
 /** Identifiant opaque d'un élément réel du profil (expérience, compétence, formation…). */
 export type ProfileItemId = string
 
@@ -85,15 +127,32 @@ export interface CvEducationEntry {
   provenance: Provenance
 }
 
+/** Entrée de langue. `level` = libellé affiché (ex. « Courant », « C1 », « Natif »). */
+export interface CvLanguageEntry {
+  id: CvNodeId
+  label: string
+  level: string
+  provenance: Provenance
+}
+
+/** Entrée « compétence clé » : une phrase d'accroche (idéalement un verbe d'action). */
+export interface CvKeySkillEntry {
+  id: CvNodeId
+  text: string
+  provenance: Provenance
+}
+
 /**
  * Section ordonnée du CV. Union discriminée par `kind` : le template rend chaque
  * variante de façon déterministe. MVP = 4 types de sections (1 seul template).
  */
 export type CvSection =
   | { kind: 'summary'; title: string; text: string; provenance: Provenance }
+  | { kind: 'keyskills'; title: string; entries: CvKeySkillEntry[] }
   | { kind: 'experience'; title: string; entries: CvExperienceEntry[] }
   | { kind: 'skills'; title: string; entries: CvSkillEntry[] }
   | { kind: 'education'; title: string; entries: CvEducationEntry[] }
+  | { kind: 'languages'; title: string; entries: CvLanguageEntry[] }
 
 /** Type littéral des variantes de section (pratique pour le rendu/exhaustivité). */
 export type CvSectionKind = CvSection['kind']
diff --git a/packages/shared/src/fixtures/sample-cv.ts b/packages/shared/src/fixtures/sample-cv.ts
index a3d28ae..61a4fab 100644
--- a/packages/shared/src/fixtures/sample-cv.ts
+++ b/packages/shared/src/fixtures/sample-cv.ts
@@ -5,7 +5,7 @@
  * Exerce les 4 types de sections + les puces imbriquées. La fixture de démo
  * riche (pagination multi-pages) viendra avec le template (THI-125).
  */
-import type { RenderableCv, ProfileItemId } from '../cv'
+import type { RenderableCv, ProfileItemId } from '../cv.js'
 
 /** Ids des éléments réels du profil exemple (équivalent d'un profile_snapshot). */
 export const SAMPLE_PROFILE_ITEM_IDS: readonly ProfileItemId[] = [
diff --git a/packages/shared/src/index.ts b/packages/shared/src/index.ts
index 4b04295..ff6571d 100644
--- a/packages/shared/src/index.ts
+++ b/packages/shared/src/index.ts
@@ -22,17 +22,20 @@ export interface HealthStatus {
 export const HEALTH_PATH = '/api/health' as const
 
 // Profil candidat — SEULE source de contenu du moteur (THI-123).
-export * from './profile'
+export * from './profile.js'
 
 // Contrat du CV structuré + garde-fou de provenance (THI-124 ↔ THI-125).
-export * from './cv'
-export * from './provenance'
+export * from './cv.js'
+export * from './provenance.js'
 
 // Metering & quotas (THI-126) — mesure d'usage + base billing freemium.
-export * from './usage'
+export * from './usage.js'
 
 // Analyse d'offre — consignes de tri/reformulation du moteur (THI-124).
-export * from './offer'
+export * from './offer.js'
 
 // Score de match + contrats API du flux « Nouvelle candidature ».
-export * from './match'
+export * from './match.js'
+
+// Candidature persistée (offre + CV éditable + suivi).
+export * from './candidature.js'
diff --git a/packages/shared/src/match.ts b/packages/shared/src/match.ts
index 1edd71a..b06bde1 100644
--- a/packages/shared/src/match.ts
+++ b/packages/shared/src/match.ts
@@ -9,8 +9,8 @@
  * CODE (déterministe, normalisation accents/casse) — le LLM ne fournit que le
  * score et ses raisons, bornés et revalidés ici.
  */
-import type { AnalyzedOffer } from './offer'
-import type { ProfileDTO } from './profile'
+import type { AnalyzedOffer } from './offer.js'
+import type { ProfileDTO } from './profile.js'
 
 /** Rapport de match affiché à l'utilisateur avant génération. */
 export interface MatchReport {
@@ -121,14 +121,20 @@ export interface AnalyzeCandidatureResponse {
   match: MatchReport
 }
 
-/** POST /api/candidature/generate — corps (l'offre analysée est renvoyée telle quelle). */
+/**
+ * POST /api/candidature/generate — corps. On renvoie l'offre analysée ET le
+ * rapport de match (déjà calculé à l'étape /analyze) pour les persister avec la
+ * candidature, sans recalcul LLM côté serveur.
+ */
 export interface GenerateCandidatureRequest {
   offer: AnalyzedOffer
+  match: MatchReport
 }
 
-/** POST /api/candidature/generate — réponse. */
+/** POST /api/candidature/generate — réponse : le CV + l'id de candidature créée. */
 export interface GenerateCandidatureResponse {
   cv: import('./cv').RenderableCv
+  candidatureId: string
 }
 
 /** Code d'erreur renvoyé (HTTP 403) quand le quota de générations est épuisé. */
diff --git a/packages/shared/src/offer.ts b/packages/shared/src/offer.ts
index 05ad869..2d2efda 100644
--- a/packages/shared/src/offer.ts
+++ b/packages/shared/src/offer.ts
@@ -41,7 +41,12 @@ export const ANALYZED_OFFER_SCHEMA = {
     title: { type: 'string' },
     requiredSkills: { type: 'array', items: { type: 'string' } },
     keywords: { type: 'array', items: { type: 'string' } },
-    seniority: { type: ['string', 'null'], enum: [...OFFER_SENIORITIES, null] },
+    // Nullable + enum : le validateur de sortie structurée d'Anthropic refuse
+    // `type: ['string','null']` avec un `enum` (ou un `null` dans l'enum). La
+    // forme `anyOf` est la seule acceptée pour un enum optionnel.
+    seniority: {
+      anyOf: [{ type: 'string', enum: [...OFFER_SENIORITIES] }, { type: 'null' }],
+    },
   },
   required: ['title', 'requiredSkills', 'keywords', 'seniority'],
 } as const
diff --git a/packages/shared/src/profile.ts b/packages/shared/src/profile.ts
index 904eff2..327045f 100644
--- a/packages/shared/src/profile.ts
+++ b/packages/shared/src/profile.ts
@@ -11,6 +11,8 @@
  * (`deletedAt` non null) ne sont jamais exposés ici.
  */
 
+import type { CvDesign } from './cv.js'
+
 /** Niveau de maîtrise déclaré d'une compétence (miroir de l'enum SQL SkillLevel). */
 export type SkillLevel = 'BEGINNER' | 'INTERMEDIATE' | 'ADVANCED' | 'EXPERT'
 
@@ -21,6 +23,19 @@ export const SKILL_LEVELS: readonly SkillLevel[] = [
   'EXPERT',
 ] as const
 
+/** Niveau de maîtrise d'une langue (miroir de l'enum SQL LanguageLevel) — CEFR + natif. */
+export type LanguageLevel = 'A1' | 'A2' | 'B1' | 'B2' | 'C1' | 'C2' | 'NATIVE'
+
+export const LANGUAGE_LEVELS: readonly LanguageLevel[] = [
+  'A1',
+  'A2',
+  'B1',
+  'B2',
+  'C1',
+  'C2',
+  'NATIVE',
+] as const
+
 /** Expérience professionnelle déclarée. `endDate` null = poste en cours. */
 export interface ExperienceDTO {
   id: string
@@ -44,6 +59,14 @@ export interface SkillDTO {
   orderIndex: number
 }
 
+/** Langue déclarée par le candidat. */
+export interface LanguageDTO {
+  id: string
+  label: string
+  level: LanguageLevel | null
+  orderIndex: number
+}
+
 /** Formation / diplôme déclaré. */
 export interface EducationDTO {
   id: string
@@ -58,9 +81,56 @@ export interface EducationDTO {
 /** Profil candidat complet, tel que relu/édité dans l'UI. */
 export interface ProfileDTO {
   id: string
+  /** Identité affichée en tête de CV — factuelle, jamais reformulée par le moteur. */
+  fullName: string | null
+  email: string | null
+  phone: string | null
+  location: string | null
+  /** Liens (portfolio, LinkedIn, GitHub…). */
+  links: string[]
   headline: string | null
   summary: string | null
+  /** Compétences clés : phrases d'accroche (verbe d'action), section au-dessus des expériences. */
+  keySkills: string[]
   experiences: ExperienceDTO[]
   skills: SkillDTO[]
   education: EducationDTO[]
+  languages: LanguageDTO[]
+  /** Thème « CV de base » capturé depuis un PDF, ou null si non configuré. */
+  baseCvDesign: CvDesign | null
+}
+
+/**
+ * Contenu de profil extrait d'un CV (PDF ou texte) — proposition ÉDITABLE à relire
+ * avant écriture. Champs texte : `''` = absent (compatibles v-model des inputs).
+ * Dates en `YYYY-MM` (ou `''`) ; converties en ISO à la persistance. Niveaux
+ * nullable (select « Niveau ? »). Rien n'est inventé : un champ absent vaut '' / [].
+ */
+export interface ParsedCvProfile {
+  fullName: string
+  email: string
+  phone: string
+  location: string
+  links: string[]
+  headline: string
+  summary: string
+  /** Phrases « compétences clés » (verbe d'action) extraites du CV, si présentes. */
+  keySkills: string[]
+  experiences: {
+    title: string
+    company: string
+    startDate: string
+    endDate: string
+    description: string
+    skillsUsed: string[]
+  }[]
+  education: {
+    degree: string
+    school: string
+    startDate: string
+    endDate: string
+    description: string
+  }[]
+  skills: { label: string; level: SkillLevel | null; years: number | null }[]
+  languages: { label: string; level: LanguageLevel | null }[]
 }
diff --git a/packages/shared/src/provenance.ts b/packages/shared/src/provenance.ts
index 400a8aa..e2d109b 100644
--- a/packages/shared/src/provenance.ts
+++ b/packages/shared/src/provenance.ts
@@ -13,7 +13,7 @@
  *    en profondeur, même si la sortie a déjà été contrôlée en amont).
  */
 
-import type { ProfileItemId, Provenance, RenderableCv } from './cv'
+import type { ProfileItemId, Provenance, RenderableCv } from './cv.js'
 
 /** Raison du rejet d'un élément. */
 export type ProvenanceViolationReason =
@@ -96,8 +96,10 @@ export function checkProvenance(
           )
         })
         break
+      case 'keyskills':
       case 'skills':
       case 'education':
+      case 'languages':
         section.entries?.forEach((entry, e) =>
           checkNode(entry.provenance, `${base}.entries[${e}]`, validIds, violations),
         )