diff --git a/apps/app/app.vue b/apps/app/app.vue
index f8eacfa..e034073 100644
--- a/apps/app/app.vue
+++ b/apps/app/app.vue
@@ -2,4 +2,5 @@
   <NuxtLayout>
     <NuxtPage />
   </NuxtLayout>
+  <UiToaster />
 </template>
diff --git a/apps/app/assets/css/main.css b/apps/app/assets/css/main.css
index 6fa76d0..b8f06e3 100644
--- a/apps/app/assets/css/main.css
+++ b/apps/app/assets/css/main.css
@@ -4,41 +4,119 @@
  * Design tokens — source unique de vérité (Tailwind v4 @theme).
  * Règle d'équipe : AUCUNE valeur en dur dans les composants.
  * On consomme ces tokens via les classes générées : bg-brand-600, text-ink-700,
- * rounded-card, font-sans, etc. Le design system détaillé viendra avec l'UX/UI.
+ * rounded-card, font-sans, shadow-card, etc.
+ *
+ * Direction "Chaleur professionnelle" (réfs Resume.io/Teal/Notion) :
+ * neutres chauds (stone), accent indigo profond, radius généreux, ombres douces.
+ *
+ * Exceptions admises à la règle tokens-only (décision revue 2026-06) :
+ * - `white`/`black` Tailwind : constantes universelles, autorisées sur fonds
+ *   sombres ou brand (text-white sur bg-brand-600, etc.).
+ * - Modificateurs d'opacité `/N` sur tokens (bg-brand-100/60…) : mécanisme
+ *   standard Tailwind v4 (color-mix), pas une valeur en dur.
+ * - Valeurs arbitraires ([…]) uniquement quand intrinsèques au composant
+ *   (ex. tailles texte du mini-mockup CvMockup) — jamais pour contourner
+ *   un token existant.
  */
 @theme {
-  /* Couleur de marque (placeholder neutre tant que le branding n'est pas tranché —
-     le naming/branding final viendra du CMO via THI-121 → ajuster ici uniquement). */
-  --color-brand-50: #eff6ff;
-  --color-brand-100: #dbeafe;
-  --color-brand-400: #60a5fa;
-  --color-brand-500: #3b82f6;
-  --color-brand-600: #2563eb;
-  --color-brand-700: #1d4ed8;
-
-  /* Texte & neutres */
-  --color-ink-100: #f3f4f6;
-  --color-ink-300: #d1d5db;
-  --color-ink-500: #6b7280;
-  --color-ink-700: #374151;
-  --color-ink-900: #111827;
-
-  /* États sémantiques */
-  --color-success-500: #16a34a;
-  --color-warning-500: #d97706;
-  --color-danger-500: #dc2626;
+  /* Marque — indigo profond (crédibilité) */
+  --color-brand-50: #eef2ff;
+  --color-brand-100: #e0e7ff;
+  --color-brand-200: #c7d2fe;
+  --color-brand-300: #a5b4fc;
+  --color-brand-400: #818cf8;
+  --color-brand-500: #6366f1;
+  --color-brand-600: #4f46e5;
+  --color-brand-700: #4338ca;
+  --color-brand-800: #3730a3;
+  --color-brand-900: #312e81;
+  --color-brand-950: #1e1b4b;
+
+  /* Texte & neutres — stone (chaleur) */
+  --color-ink-50: #fafaf9;
+  --color-ink-100: #f5f5f4;
+  --color-ink-200: #e7e5e4;
+  --color-ink-300: #d6d3d1;
+  --color-ink-400: #a8a29e;
+  --color-ink-500: #78716c;
+  --color-ink-600: #57534e;
+  --color-ink-700: #44403c;
+  --color-ink-800: #292524;
+  --color-ink-900: #1c1917;
+  --color-ink-950: #0c0a09;
+
+  /* États sémantiques — échelles fond (50/100), bordure (200), texte/action (600/700) */
+  --color-success-50: #f0fdf4;
+  --color-success-100: #dcfce7;
+  --color-success-200: #bbf7d0;
+  --color-success-500: #22c55e;
+  --color-success-600: #16a34a;
+  --color-success-700: #15803d;
+
+  --color-warning-50: #fffbeb;
+  --color-warning-100: #fef3c7;
+  --color-warning-200: #fde68a;
+  --color-warning-500: #f59e0b;
+  --color-warning-600: #d97706;
+  --color-warning-700: #b45309;
+
+  --color-danger-50: #fef2f2;
+  --color-danger-100: #fee2e2;
+  --color-danger-200: #fecaca;
+  --color-danger-500: #ef4444;
+  --color-danger-600: #dc2626;
+  --color-danger-700: #b91c1c;
 
   /* Surfaces & bordures */
   --color-surface: #ffffff;
-  --color-surface-muted: #f9fafb;
-  --color-border: #e5e7eb;
+  --color-surface-muted: #fafaf9;
+  --color-surface-warm: #f5f5f4;
+  --color-border: #e7e5e4;
+  --color-border-strong: #d6d3d1;
 
-  /* Typographie */
-  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
+  /* Typographie — chargée réellement via @nuxt/fonts (nuxt.config.ts) */
+  --font-sans:
+    'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
 
-  /* Rayons nommés */
-  --radius-card: 0.75rem;
-  --radius-control: 0.5rem;
+  /* Rayons nommés — généreux (direction chaleur pro) */
+  --radius-card: 1rem;
+  --radius-control: 0.625rem;
+
+  /* Ombres multi-couches très douces (style Stripe), teinte stone */
+  --shadow-xs: 0 1px 2px 0 rgb(28 25 23 / 0.04);
+  --shadow-sm: 0 1px 2px 0 rgb(28 25 23 / 0.04), 0 1px 3px 0 rgb(28 25 23 / 0.06);
+  --shadow-card: 0 1px 2px 0 rgb(28 25 23 / 0.04), 0 2px 8px -2px rgb(28 25 23 / 0.08);
+  --shadow-card-hover:
+    0 2px 4px -1px rgb(28 25 23 / 0.06), 0 8px 24px -4px rgb(28 25 23 / 0.12);
+  --shadow-pop:
+    0 4px 8px -2px rgb(28 25 23 / 0.08), 0 16px 40px -8px rgb(28 25 23 / 0.16);
+  --shadow-brand: 0 1px 2px 0 rgb(67 56 202 / 0.12), 0 4px 12px -2px rgb(79 70 229 / 0.25);
+
+  /* Animations utilitaires (toasts, entrées de sections) */
+  --animate-toast-in: toast-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+  --animate-fade-up: fade-up 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
+
+  @keyframes toast-in {
+    from {
+      opacity: 0;
+      transform: translateY(0.75rem) scale(0.97);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+  }
+
+  @keyframes fade-up {
+    from {
+      opacity: 0;
+      transform: translateY(0.5rem);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
 }
 
 html,
@@ -47,6 +125,20 @@ body,
   height: 100%;
 }
 
+body {
+  @apply bg-surface text-ink-800 antialiased;
+}
+
+/* Respecte la préférence utilisateur de mouvement réduit. */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
 /* ─── Print / PDF (cible : Chromium headless, PR 3) ─────────────────────────
  * Règles appliquées aussi bien au Ctrl+P du navigateur qu'au rendu Playwright.
  * Objectif : margins A4, pas d'éléments d'interface, couleurs préservées.
diff --git a/apps/app/components/landing/CvMockup.vue b/apps/app/components/landing/CvMockup.vue
new file mode 100644
index 0000000..083368b
--- /dev/null
+++ b/apps/app/components/landing/CvMockup.vue
@@ -0,0 +1,149 @@
+<script setup lang="ts">
+import { useLanding } from '~/composables/useLanding'
+
+/**
+ * Visuel hero : pile « avant / après » de deux mini-CV.
+ * - Derrière : le CV générique (lignes neutres, estompé).
+ * - Devant : le CV adapté à l'offre, avec les éléments réalignés surlignés
+ *   (bg-brand-100) et un badge « Match 87 % ».
+ *
+ * Le contenu du CV est un pseudo-contenu FICTIF purement décoratif
+ * (aria-hidden) — seuls les libellés (badge, avant/après) viennent de l'i18n.
+ */
+const { m } = useLanding()
+
+interface MockJob {
+  role: string
+  period: string
+  bullets: { text: string; highlight: boolean }[]
+}
+
+const JOBS: readonly MockJob[] = [
+  {
+    role: 'Cheffe de projets digitaux · Lumea',
+    period: '2021 – 2025',
+    bullets: [
+      { text: 'Pilotage de 12 campagnes multicanales (budget 150 k€)', highlight: true },
+      { text: '+40 % d’abonnés à la newsletter en un an', highlight: false },
+    ],
+  },
+  {
+    role: 'Chargée de communication · Atelier Verde',
+    period: '2018 – 2021',
+    bullets: [{ text: 'Refonte du site vitrine et de la stratégie de contenus', highlight: false }],
+  },
+]
+
+const SKILLS: readonly { label: string; highlight: boolean }[] = [
+  { label: 'Gestion de projet', highlight: true },
+  { label: 'SEO', highlight: true },
+  { label: 'HubSpot', highlight: false },
+  { label: 'Analyse de données', highlight: false },
+  { label: 'Brief créatif', highlight: false },
+]
+</script>
+
+<template>
+  <div class="relative mx-auto w-full max-w-sm" aria-hidden="true">
+    <!-- CV générique (derrière, estompé) -->
+    <div
+      class="absolute inset-0 -translate-x-4 translate-y-4 -rotate-3 rounded-card bg-surface p-5 opacity-80 shadow-card ring-1 ring-border"
+    >
+      <span
+        class="inline-flex rounded-full bg-ink-100 px-2.5 py-0.5 text-[10px] font-semibold uppercase tracking-widest text-ink-500"
+      >
+        {{ m.hero.mockup.beforeLabel }}
+      </span>
+      <div class="mt-4 flex items-center gap-3">
+        <div class="h-9 w-9 rounded-full bg-ink-200"></div>
+        <div class="space-y-1.5">
+          <div class="h-2.5 w-28 rounded-full bg-ink-200"></div>
+          <div class="h-2 w-36 rounded-full bg-ink-100"></div>
+        </div>
+      </div>
+      <div class="mt-5 space-y-2">
+        <div class="h-2 w-full rounded-full bg-ink-100"></div>
+        <div class="h-2 w-5/6 rounded-full bg-ink-100"></div>
+        <div class="h-2 w-3/4 rounded-full bg-ink-100"></div>
+        <div class="mt-4 h-2 w-1/3 rounded-full bg-ink-200"></div>
+        <div class="h-2 w-full rounded-full bg-ink-100"></div>
+        <div class="h-2 w-4/6 rounded-full bg-ink-100"></div>
+      </div>
+    </div>
+
+    <!-- CV adapté à l'offre (devant) -->
+    <div class="relative rotate-1 rounded-card bg-surface p-5 shadow-pop ring-1 ring-border">
+      <span class="absolute -top-3 right-4 drop-shadow-sm">
+        <UiBadge variant="success">{{ m.hero.mockup.badge }}</UiBadge>
+      </span>
+
+      <span
+        class="inline-flex rounded-full bg-brand-50 px-2.5 py-0.5 text-[10px] font-semibold uppercase tracking-widest text-brand-700 ring-1 ring-brand-100"
+      >
+        {{ m.hero.mockup.afterLabel }}
+      </span>
+
+      <!-- Identité -->
+      <div class="mt-4 flex items-center gap-3">
+        <div
+          class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-brand-600 text-xs font-bold text-white"
+        >
+          CR
+        </div>
+        <div class="min-w-0">
+          <p class="text-sm font-bold text-ink-900">Camille Roussel</p>
+          <p class="truncate text-[11px] text-ink-600">Cheffe de projets marketing · Nantes</p>
+        </div>
+      </div>
+
+      <!-- Accroche -->
+      <p class="mt-3 text-[10px] leading-relaxed text-ink-700">
+        <span class="rounded bg-brand-100 px-1 py-px font-medium text-brand-900">
+          6 ans de gestion de projets digitaux
+        </span>
+        au service de marques grand public, de la stratégie au déploiement.
+      </p>
+
+      <!-- Expérience -->
+      <p
+        class="mt-4 border-b border-border pb-1 text-[9px] font-semibold uppercase tracking-widest text-brand-700"
+      >
+        Expérience
+      </p>
+      <div v-for="job in JOBS" :key="job.role" class="mt-2.5">
+        <div class="flex items-baseline justify-between gap-2">
+          <p class="truncate text-[10px] font-semibold text-ink-900">{{ job.role }}</p>
+          <p class="shrink-0 text-[9px] text-ink-500">{{ job.period }}</p>
+        </div>
+        <ul class="mt-1 list-disc space-y-0.5 pl-3.5 marker:text-brand-400">
+          <li v-for="bullet in job.bullets" :key="bullet.text" class="text-[10px] text-ink-700">
+            <span
+              v-if="bullet.highlight"
+              class="rounded bg-brand-100 px-1 py-px font-medium text-brand-900"
+            >
+              {{ bullet.text }}
+            </span>
+            <template v-else>{{ bullet.text }}</template>
+          </li>
+        </ul>
+      </div>
+
+      <!-- Compétences -->
+      <p
+        class="mt-4 border-b border-border pb-1 text-[9px] font-semibold uppercase tracking-widest text-brand-700"
+      >
+        Compétences
+      </p>
+      <div class="mt-2 flex flex-wrap gap-1">
+        <span
+          v-for="skill in SKILLS"
+          :key="skill.label"
+          class="rounded-full px-2 py-0.5 text-[9px] font-medium"
+          :class="skill.highlight ? 'bg-brand-100 text-brand-800' : 'bg-ink-100 text-ink-700'"
+        >
+          {{ skill.label }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/app/components/landing/MagicLinkForm.vue b/apps/app/components/landing/MagicLinkForm.vue
index 60a5526..12358b0 100644
--- a/apps/app/components/landing/MagicLinkForm.vue
+++ b/apps/app/components/landing/MagicLinkForm.vue
@@ -1,30 +1,35 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { ref, useId } from 'vue'
+import { MailCheck } from '@lucide/vue'
 import { useLanding } from '~/composables/useLanding'
 
 /**
  * Formulaire d'inscription magic-link : champ e-mail + écran « lien envoyé ».
  * Microcopy conforme au doc validé (THI-128).
  *
+ * Monté plusieurs fois sur la landing (hero + CTA final) : les ids champ/erreur
+ * sont générés via useId() pour rester uniques dans le DOM (a11y).
+ *
  * Périmètre de CETTE issue = l'UI du flux. L'envoi réel du lien (génération de
  * token + e-mail) relève du WS auth/magic-link : on l'appelle via la prop
  * `onSubmit`, à brancher sur l'endpoint quand il existera. Par défaut le flux
  * affiche l'écran de confirmation sans prétendre avoir envoyé un e-mail.
  */
 const props = defineProps<{
-  /** Identifiant pour relier le label au champ (a11y). */
-  id?: string
   /** Brancher l'envoi réel du lien ici (WS auth). */
   onSubmit?: (email: string) => Promise<void>
 }>()
 
 const { m } = useLanding()
 
+const uid = useId()
+const fieldId = `${uid}-email`
+const errorId = `${uid}-error`
+
 const email = ref('')
 const status = ref<'idle' | 'pending' | 'sent'>('idle')
 const error = ref<string | null>(null)
 
-const fieldId = computed(() => props.id ?? 'magiclink-email')
 // Validation volontairement permissive (pas de regex exotique qui rejette des
 // e-mails valides) : présence d'un « @ » entouré de caractères, point ensuite.
 const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
@@ -49,9 +54,12 @@ async function submit() {
 
 <template>
   <div class="w-full max-w-md">
-    <form v-if="status !== 'sent'" class="flex flex-col gap-3" novalidate @submit.prevent="submit">
+    <form v-if="status !== 'sent'" novalidate @submit.prevent="submit">
       <label :for="fieldId" class="sr-only">{{ m.signup.emailLabel }}</label>
-      <div class="flex flex-col gap-3 sm:flex-row">
+      <div
+        class="flex flex-col gap-2 rounded-control bg-surface p-1.5 shadow-card ring-1 transition-shadow duration-300 ease-out focus-within:ring-2 focus-within:ring-brand-500 sm:flex-row sm:items-center"
+        :class="error ? 'ring-danger-500' : 'ring-border'"
+      >
         <input
           :id="fieldId"
           v-model="email"
@@ -60,18 +68,19 @@ async function submit() {
           autocomplete="email"
           :placeholder="m.signup.emailPlaceholder"
           :aria-invalid="error ? 'true' : undefined"
-          aria-describedby="magiclink-error"
-          class="flex-1 rounded-card border border-ink-500/30 bg-surface px-4 py-3 text-ink-900 shadow-sm outline-none focus:border-brand-600 focus:ring-2 focus:ring-brand-100"
+          :aria-describedby="error ? errorId : undefined"
+          class="h-10 w-full min-w-0 flex-1 rounded-control bg-transparent px-3 text-sm text-ink-900 placeholder:text-ink-500 focus:outline-none"
         />
-        <button
-          type="submit"
-          :disabled="status === 'pending'"
-          class="rounded-card bg-brand-600 px-6 py-3 font-semibold text-white shadow-sm transition hover:bg-brand-700 focus:outline-none focus:ring-2 focus:ring-brand-100 disabled:opacity-60"
-        >
+        <UiButton type="submit" :loading="status === 'pending'" class="sm:shrink-0">
           {{ m.signup.submit }}
-        </button>
+        </UiButton>
       </div>
-      <p id="magiclink-error" role="alert" class="min-h-5 text-sm text-danger-500">
+      <p
+        v-if="error"
+        :id="errorId"
+        role="alert"
+        class="mt-2 text-left text-sm font-medium text-danger-600"
+      >
         {{ error }}
       </p>
     </form>
@@ -79,10 +88,17 @@ async function submit() {
     <div
       v-else
       role="status"
-      class="rounded-card border border-success-500/30 bg-success-500/5 px-5 py-4 text-center"
+      class="flex animate-fade-up items-start gap-3 rounded-card bg-success-50 px-5 py-4 text-left ring-1 ring-success-200"
     >
-      <p class="font-semibold text-ink-900">{{ m.signup.sentTitle }}</p>
-      <p class="mt-1 text-sm text-ink-700">{{ m.signup.sentBody }}</p>
+      <MailCheck
+        class="mt-0.5 h-5 w-5 shrink-0 text-success-600"
+        :stroke-width="2"
+        aria-hidden="true"
+      />
+      <div>
+        <p class="font-semibold text-ink-900">{{ m.signup.sentTitle }}</p>
+        <p class="mt-1 text-sm text-ink-700">{{ m.signup.sentBody }}</p>
+      </div>
     </div>
   </div>
 </template>
diff --git a/apps/app/components/ui/Badge.vue b/apps/app/components/ui/Badge.vue
new file mode 100644
index 0000000..492249c
--- /dev/null
+++ b/apps/app/components/ui/Badge.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+// Pastille de statut/catégorie (ex. « Recommandé », niveau de compétence, score).
+const props = withDefaults(
+  defineProps<{ variant?: 'brand' | 'success' | 'warning' | 'danger' | 'neutral' }>(),
+  { variant: 'neutral' },
+)
+
+const VARIANTS = {
+  brand: 'bg-brand-50 text-brand-700 ring-brand-200',
+  success: 'bg-success-50 text-success-700 ring-success-200',
+  warning: 'bg-warning-50 text-warning-700 ring-warning-200',
+  danger: 'bg-danger-50 text-danger-700 ring-danger-200',
+  neutral: 'bg-ink-100 text-ink-600 ring-ink-200',
+} as const
+
+const classes = computed(() => VARIANTS[props.variant])
+</script>
+
+<template>
+  <span
+    class="inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-semibold ring-1"
+    :class="classes"
+  >
+    <slot />
+  </span>
+</template>
diff --git a/apps/app/components/ui/Card.vue b/apps/app/components/ui/Card.vue
index 8a66c24..cd2eba5 100644
--- a/apps/app/components/ui/Card.vue
+++ b/apps/app/components/ui/Card.vue
@@ -4,7 +4,7 @@ defineProps<{ title?: string }>()
 </script>
 
 <template>
-  <section class="rounded-card bg-surface p-6 shadow-sm ring-1 ring-border">
+  <section class="rounded-card bg-surface p-6 shadow-card ring-1 ring-border">
     <header v-if="title || $slots.header" class="mb-4">
       <slot name="header">
         <h2 class="text-lg font-semibold text-ink-900">{{ title }}</h2>
diff --git a/apps/app/components/ui/Dialog.vue b/apps/app/components/ui/Dialog.vue
new file mode 100644
index 0000000..cda1257
--- /dev/null
+++ b/apps/app/components/ui/Dialog.vue
@@ -0,0 +1,116 @@
+<script setup lang="ts">
+// Boîte de dialogue de confirmation (suppressions, actions irréversibles).
+// Usage : <UiDialog v-model:open="..." title="..." variant="danger" @confirm="..." />
+import { nextTick, ref, useId, watch } from 'vue'
+import { TriangleAlert } from '@lucide/vue'
+
+const props = withDefaults(
+  defineProps<{
+    title: string
+    description?: string
+    confirmLabel?: string
+    cancelLabel?: string
+    variant?: 'default' | 'danger'
+    /** Spinner sur le bouton de confirmation pendant l'action. */
+    loading?: boolean
+  }>(),
+  { confirmLabel: 'Confirmer', cancelLabel: 'Annuler', variant: 'default', loading: false },
+)
+
+const open = defineModel<boolean>('open', { default: false })
+const emit = defineEmits<{ confirm: [] }>()
+
+const titleId = useId()
+const panel = ref<HTMLElement | null>(null)
+const cancelButton = ref<{ $el: HTMLElement } | null>(null)
+
+function close() {
+  if (!props.loading) open.value = false
+}
+
+function onKeydown(event: KeyboardEvent) {
+  if (event.key === 'Escape') {
+    event.stopPropagation()
+    close()
+    return
+  }
+  // Piège de focus minimal : Tab reste dans le panneau.
+  if (event.key === 'Tab' && panel.value) {
+    const focusables = panel.value.querySelectorAll<HTMLElement>(
+      'button, [href], input, textarea, select, [tabindex]:not([tabindex="-1"])',
+    )
+    if (focusables.length === 0) return
+    const first = focusables[0]
+    const last = focusables[focusables.length - 1]
+    if (event.shiftKey && document.activeElement === first) {
+      event.preventDefault()
+      last.focus()
+    } else if (!event.shiftKey && document.activeElement === last) {
+      event.preventDefault()
+      first.focus()
+    }
+  }
+}
+
+watch(open, (isOpen) => {
+  if (isOpen) {
+    // Focus initial sur « Annuler » : l'action destructrice ne doit pas être le défaut.
+    nextTick(() => cancelButton.value?.$el?.focus())
+  }
+})
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition
+      enter-active-class="transition-opacity duration-200"
+      enter-from-class="opacity-0"
+      leave-active-class="transition-opacity duration-150"
+      leave-to-class="opacity-0"
+    >
+      <div
+        v-if="open"
+        class="fixed inset-0 z-50 flex items-end justify-center bg-ink-950/40 p-4 backdrop-blur-sm sm:items-center"
+        @click.self="close"
+        @keydown="onKeydown"
+      >
+        <div
+          ref="panel"
+          role="dialog"
+          aria-modal="true"
+          :aria-labelledby="titleId"
+          class="w-full max-w-md animate-toast-in rounded-card bg-surface p-6 shadow-pop"
+        >
+          <div class="flex items-start gap-4">
+            <div
+              v-if="variant === 'danger'"
+              class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-danger-50 text-danger-600"
+              aria-hidden="true"
+            >
+              <TriangleAlert class="h-5 w-5" :stroke-width="2" />
+            </div>
+            <div class="min-w-0 flex-1">
+              <h2 :id="titleId" class="text-base font-semibold text-ink-900">{{ title }}</h2>
+              <p v-if="description" class="mt-1.5 text-sm leading-relaxed text-ink-500">
+                {{ description }}
+              </p>
+              <slot />
+            </div>
+          </div>
+          <div class="mt-6 flex justify-end gap-3">
+            <UiButton ref="cancelButton" variant="secondary" :disabled="loading" @click="close">
+              {{ cancelLabel }}
+            </UiButton>
+            <UiButton
+              :variant="variant === 'danger' ? 'danger' : 'primary'"
+              :loading="loading"
+              @click="emit('confirm')"
+            >
+              {{ confirmLabel }}
+            </UiButton>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
diff --git a/apps/app/components/ui/FormField.vue b/apps/app/components/ui/FormField.vue
index 5ee05e8..dc7a332 100644
--- a/apps/app/components/ui/FormField.vue
+++ b/apps/app/components/ui/FormField.vue
@@ -16,7 +16,9 @@ defineProps<{
       {{ label }}<span v-if="required" class="text-danger-500" aria-hidden="true"> *</span>
     </label>
     <slot />
-    <p v-if="error" :id="`${fieldId}-error`" class="text-sm text-danger-500">{{ error }}</p>
+    <p v-if="error" :id="`${fieldId}-error`" aria-live="polite" class="text-sm text-danger-600">
+      {{ error }}
+    </p>
     <p v-else-if="hint" :id="`${fieldId}-hint`" class="text-sm text-ink-500">{{ hint }}</p>
   </div>
 </template>
diff --git a/apps/app/components/ui/Input.vue b/apps/app/components/ui/Input.vue
index 5011dfd..7c385d3 100644
--- a/apps/app/components/ui/Input.vue
+++ b/apps/app/components/ui/Input.vue
@@ -1,4 +1,8 @@
 <script setup lang="ts">
+// Les attributs natifs non déclarés (maxlength, autocomplete, min…) doivent
+// atterrir sur l'<input>, pas sur le wrapper UiFormField.
+defineOptions({ inheritAttrs: false })
+
 const props = withDefaults(
   defineProps<{
     label?: string
@@ -20,6 +24,7 @@ const { id, describedBy } = useField(props)
   <UiFormField :field-id="id" :label="label" :hint="hint" :error="error" :required="required">
     <input
       :id="id"
+      v-bind="$attrs"
       v-model="model"
       :type="type"
       :placeholder="placeholder"
diff --git a/apps/app/components/ui/Skeleton.vue b/apps/app/components/ui/Skeleton.vue
new file mode 100644
index 0000000..81f0904
--- /dev/null
+++ b/apps/app/components/ui/Skeleton.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+// Placeholder de chargement. Le parent fixe les dimensions via class :
+// <UiSkeleton class="h-4 w-48" /> — préférer plusieurs petits skeletons qui
+// épousent la forme du contenu final plutôt qu'un grand bloc.
+</script>
+
+<template>
+  <div class="animate-pulse rounded-control bg-ink-100" aria-hidden="true" />
+</template>
diff --git a/apps/app/components/ui/State.vue b/apps/app/components/ui/State.vue
index 4a9a95c..a1fa89e 100644
--- a/apps/app/components/ui/State.vue
+++ b/apps/app/components/ui/State.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 // État transversal d'une zone de contenu : chargement, erreur ou vide.
 // Le slot par défaut accueille une action (ex. bouton « Réessayer »).
+import { CircleAlert, Inbox } from '@lucide/vue'
+
 withDefaults(
   defineProps<{
     variant?: 'loading' | 'error' | 'empty'
@@ -19,13 +21,14 @@ withDefaults(
     <UiSpinner v-if="variant === 'loading'" class="h-8 w-8 text-brand-600" />
     <div
       v-else
-      class="flex h-12 w-12 items-center justify-center rounded-full text-xl font-semibold"
-      :class="variant === 'error' ? 'bg-danger-500/10 text-danger-500' : 'bg-ink-100 text-ink-500'"
+      class="flex h-12 w-12 items-center justify-center rounded-full"
+      :class="variant === 'error' ? 'bg-danger-50 text-danger-600' : 'bg-ink-100 text-ink-400'"
       aria-hidden="true"
     >
-      {{ variant === 'error' ? '!' : '∅' }}
+      <CircleAlert v-if="variant === 'error'" class="h-6 w-6" :stroke-width="1.75" />
+      <Inbox v-else class="h-6 w-6" :stroke-width="1.75" />
     </div>
-    <p v-if="title" class="font-medium text-ink-900">{{ title }}</p>
+    <p v-if="title" class="font-semibold text-ink-900">{{ title }}</p>
     <p v-if="description" class="max-w-sm text-sm text-ink-500">{{ description }}</p>
     <slot />
   </div>
diff --git a/apps/app/components/ui/Textarea.vue b/apps/app/components/ui/Textarea.vue
index 5cb40b5..ed918bc 100644
--- a/apps/app/components/ui/Textarea.vue
+++ b/apps/app/components/ui/Textarea.vue
@@ -1,4 +1,8 @@
 <script setup lang="ts">
+// Les attributs natifs non déclarés (maxlength, autocomplete…) doivent
+// atterrir sur le <textarea>, pas sur le wrapper UiFormField.
+defineOptions({ inheritAttrs: false })
+
 const props = withDefaults(
   defineProps<{
     label?: string
@@ -20,6 +24,7 @@ const { id, describedBy } = useField(props)
   <UiFormField :field-id="id" :label="label" :hint="hint" :error="error" :required="required">
     <textarea
       :id="id"
+      v-bind="$attrs"
       v-model="model"
       :rows="rows"
       :placeholder="placeholder"
diff --git a/apps/app/components/ui/Toaster.vue b/apps/app/components/ui/Toaster.vue
new file mode 100644
index 0000000..740f24d
--- /dev/null
+++ b/apps/app/components/ui/Toaster.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+// Pile de toasts (coin bas-droit). Monté UNE fois dans app.vue — les pages
+// déclenchent via useToast().success(...) / .error(...) / .info(...).
+import { CircleAlert, CircleCheck, Info, X } from '@lucide/vue'
+
+const { toasts, dismiss } = useToast()
+
+const ICONS = { success: CircleCheck, error: CircleAlert, info: Info } as const
+const ICON_CLASSES = {
+  success: 'text-success-600',
+  error: 'text-danger-600',
+  info: 'text-brand-600',
+} as const
+</script>
+
+<template>
+  <Teleport to="body">
+    <div
+      class="pointer-events-none fixed inset-x-4 bottom-4 z-50 flex flex-col items-end gap-2 sm:inset-x-auto sm:right-6 sm:bottom-6"
+      aria-live="polite"
+      aria-atomic="false"
+    >
+      <div
+        v-for="toast in toasts"
+        :key="toast.id"
+        class="pointer-events-auto flex w-full max-w-sm animate-toast-in items-start gap-3 rounded-card bg-surface p-4 shadow-pop ring-1 ring-border"
+        role="status"
+      >
+        <component
+          :is="ICONS[toast.variant]"
+          class="mt-0.5 h-5 w-5 shrink-0"
+          :class="ICON_CLASSES[toast.variant]"
+          :stroke-width="2"
+          aria-hidden="true"
+        />
+        <div class="min-w-0 flex-1">
+          <p class="text-sm font-semibold text-ink-900">{{ toast.title }}</p>
+          <p v-if="toast.description" class="mt-0.5 text-sm text-ink-500">
+            {{ toast.description }}
+          </p>
+        </div>
+        <button
+          type="button"
+          class="-m-1 shrink-0 rounded-control p-2 text-ink-500 transition-colors hover:bg-surface-warm hover:text-ink-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500"
+          aria-label="Fermer la notification"
+          @click="dismiss(toast.id)"
+        >
+          <X class="h-4 w-4" :stroke-width="2" aria-hidden="true" />
+        </button>
+      </div>
+    </div>
+  </Teleport>
+</template>
diff --git a/apps/app/components/ui/button-classes.ts b/apps/app/components/ui/button-classes.ts
index 6a90d36..a4907b0 100644
--- a/apps/app/components/ui/button-classes.ts
+++ b/apps/app/components/ui/button-classes.ts
@@ -7,15 +7,16 @@ export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger'
 export type ButtonSize = 'sm' | 'md' | 'lg'
 
 const BASE =
-  'inline-flex items-center justify-center gap-2 rounded-control font-medium transition-colors ' +
+  'inline-flex items-center justify-center gap-2 rounded-control font-semibold transition-all duration-200 ' +
   'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2 ' +
-  'disabled:cursor-not-allowed disabled:opacity-50'
+  'active:scale-[0.98] disabled:cursor-not-allowed disabled:opacity-50 disabled:active:scale-100'
 
 const VARIANTS: Record<ButtonVariant, string> = {
-  primary: 'bg-brand-600 text-brand-50 hover:bg-brand-700',
-  secondary: 'bg-surface text-ink-900 ring-1 ring-border hover:bg-surface-muted',
-  ghost: 'bg-transparent text-ink-700 hover:bg-surface-muted',
-  danger: 'bg-danger-500 text-surface hover:bg-danger-500/90',
+  primary: 'bg-brand-600 text-white shadow-brand hover:bg-brand-700 hover:shadow-card-hover',
+  secondary:
+    'bg-surface text-ink-800 shadow-xs ring-1 ring-border-strong hover:bg-surface-muted hover:ring-ink-400',
+  ghost: 'bg-transparent text-ink-600 hover:bg-surface-warm hover:text-ink-800',
+  danger: 'bg-danger-600 text-white shadow-xs hover:bg-danger-700',
 }
 
 const SIZES: Record<ButtonSize, string> = {
diff --git a/apps/app/composables/useAuth.ts b/apps/app/composables/useAuth.ts
index 41f4e76..594d2f4 100644
--- a/apps/app/composables/useAuth.ts
+++ b/apps/app/composables/useAuth.ts
@@ -10,13 +10,20 @@
 import { createAuthClient } from 'better-auth/client'
 import { magicLinkClient } from 'better-auth/client/plugins'
 
-// Singleton par page (SSR-safe : le composable est appelé côté client uniquement).
+// Singleton par contexte. Le client vanilla better-auth exige une URL ABSOLUE
+// quand on en fournit une (une relative type '/api/auth' est rejetée partout) :
+// - navigateur : on omet baseURL → il prend l'origine courante + '/api/auth'
+//   (chemin par défaut de Better Auth) ;
+// - SSR (le layout lit la session au rendu) : on la construit depuis
+//   runtimeConfig.public.appUrl.
 let _client: ReturnType<typeof createAuthClient> | null = null
 
 function getClient() {
   if (!_client) {
     _client = createAuthClient({
-      baseURL: '/api/auth',
+      ...(import.meta.server
+        ? { baseURL: `${useRuntimeConfig().public.appUrl}/api/auth` }
+        : {}),
       plugins: [magicLinkClient()],
     })
   }
diff --git a/apps/app/composables/useLanding.ts b/apps/app/composables/useLanding.ts
index c594224..7ae06bc 100644
--- a/apps/app/composables/useLanding.ts
+++ b/apps/app/composables/useLanding.ts
@@ -1,15 +1,17 @@
 import { fr, type LandingMessages } from '~/i18n/fr'
 import { BRAND } from '~/config/brand'
-import { PLANS } from '~/config/pricing'
+import { CREDIT_PACKS, FREE_GENERATIONS } from '~/config/pricing'
 
 /**
- * Remplace récursivement le placeholder `{brand}` par la constante BRAND dans
- * toute la copy. Tient lieu d'interpolation i18n minimale en attendant le
+ * Remplace récursivement les placeholders `{brand}` et `{freeGenerations}`
+ * dans toute la copy. Tient lieu d'interpolation i18n minimale en attendant le
  * module dédié (le contrat de clés reste identique).
  */
 function interpolate<T>(value: T): T {
   if (typeof value === 'string') {
-    return value.replace(/\{brand\}/g, BRAND) as T
+    return value
+      .replace(/\{brand\}/g, BRAND)
+      .replace(/\{freeGenerations\}/g, String(FREE_GENERATIONS)) as T
   }
   if (Array.isArray(value)) {
     return value.map((item) => interpolate(item)) as T
@@ -38,5 +40,11 @@ export function useLanding() {
     })),
   })
 
-  return { m, brand: BRAND, plans: PLANS, faqJsonLd }
+  return {
+    m,
+    brand: BRAND,
+    packs: CREDIT_PACKS,
+    freeGenerations: FREE_GENERATIONS,
+    faqJsonLd,
+  }
 }
diff --git a/apps/app/composables/useToast.ts b/apps/app/composables/useToast.ts
new file mode 100644
index 0000000..7fa875f
--- /dev/null
+++ b/apps/app/composables/useToast.ts
@@ -0,0 +1,47 @@
+/**
+ * Toasts globaux — feedback non bloquant (succès/erreur/info) après une action.
+ * État partagé via useState (SSR-safe) ; le rendu est assuré par <UiToaster />
+ * monté une seule fois dans app.vue.
+ */
+export interface ToastItem {
+  id: number
+  variant: 'success' | 'error' | 'info'
+  title: string
+  description?: string
+}
+
+export interface ToastOptions {
+  /** Durée d'affichage en ms ; 0 = persistant (fermeture manuelle). */
+  duration?: number
+}
+
+let nextId = 1
+
+export function useToast() {
+  const toasts = useState<ToastItem[]>('ui-toasts', () => [])
+
+  function dismiss(id: number) {
+    toasts.value = toasts.value.filter((t) => t.id !== id)
+  }
+
+  function push(toast: Omit<ToastItem, 'id'>, options?: ToastOptions): number {
+    const id = nextId++
+    toasts.value = [...toasts.value, { id, ...toast }]
+    const duration = options?.duration ?? (toast.variant === 'error' ? 6000 : 4000)
+    if (import.meta.client && duration > 0) {
+      setTimeout(() => dismiss(id), duration)
+    }
+    return id
+  }
+
+  return {
+    toasts,
+    dismiss,
+    success: (title: string, description?: string, options?: ToastOptions) =>
+      push({ variant: 'success', title, description }, options),
+    error: (title: string, description?: string, options?: ToastOptions) =>
+      push({ variant: 'error', title, description }, options),
+    info: (title: string, description?: string, options?: ToastOptions) =>
+      push({ variant: 'info', title, description }, options),
+  }
+}
diff --git a/apps/app/config/pricing.ts b/apps/app/config/pricing.ts
index 53e0668..76a8a62 100644
--- a/apps/app/config/pricing.ts
+++ b/apps/app/config/pricing.ts
@@ -1,22 +1,25 @@
 /**
  * Pricing — CONFIG, jamais figé en dur dans les composants.
  *
- * ⚠️ Arbitrage RÉSERVÉ AU RÉFÉRENT (pricing THI-119) : le montant exact et la
- * liste précise des features par plan sont à valider. Fourchette validée
- * 9–15 €/mois ; `PREMIUM_PRICE_EUR` est un PLACEHOLDER au milieu de la
- * fourchette, à confirmer avant tout go-live.
+ * Modèle acté (2026-06-10, fondateur) : 2 générations de CV OFFERTES pour tester,
+ * puis achat de PACKS DE CRÉDITS one-shot (Stripe Checkout, pas d'abonnement).
+ * 1 crédit = 1 génération de CV optimisé. Pas d'offre illimitée : c'est le seul
+ * scénario déficitaire (coût API ~0,30–0,40 € par génération, marge packs ~60 %).
  */
-export const PREMIUM_PRICE_EUR = 12 as const // placeholder 9–15 € — à arbitrer (THI-119)
 
-export interface PlanConfig {
-  /** clé i18n du plan dans i18n/fr.ts > pricing.plans */
-  key: 'free' | 'premium'
-  /** prix mensuel en € ; null = gratuit */
-  priceEur: number | null
+/** Générations offertes à l'inscription (aligné sur FREE_TIER_QUOTAS.generation). */
+export const FREE_GENERATIONS = 2 as const
+
+export interface CreditPackConfig {
+  /** clé i18n du pack dans i18n/fr.ts > pricing.packs */
+  key: 'starter' | 'standard'
+  priceEur: number
+  credits: number
+  /** Pack mis en avant visuellement (badge « Le plus populaire »). */
   featured: boolean
 }
 
-export const PLANS: readonly PlanConfig[] = [
-  { key: 'free', priceEur: null, featured: false },
-  { key: 'premium', priceEur: PREMIUM_PRICE_EUR, featured: true },
+export const CREDIT_PACKS: readonly CreditPackConfig[] = [
+  { key: 'starter', priceEur: 5, credits: 5, featured: false },
+  { key: 'standard', priceEur: 12, credits: 15, featured: true },
 ]
diff --git a/apps/app/i18n/fr.ts b/apps/app/i18n/fr.ts
index 390860c..33d6789 100644
--- a/apps/app/i18n/fr.ts
+++ b/apps/app/i18n/fr.ts
@@ -3,7 +3,10 @@
  * validé CMO « landing-copy », THI-128). AUCUN texte en dur dans les templates :
  * les composants lisent ces clés via useLanding().
  *
- * `{brand}` est un placeholder interpolé par useLanding() (config/brand.ts).
+ * Placeholders interpolés par useLanding() :
+ * - `{brand}` → constante BRAND (config/brand.ts)
+ * - `{freeGenerations}` → constante FREE_GENERATIONS (config/pricing.ts)
+ *
  * Structure pensée i18n : ce fichier devient le locale `fr` quand le module
  * i18n dédié sera branché (clés inchangées, swap trivial).
  */
@@ -13,30 +16,39 @@ export const fr = {
   meta: {
     title: '{brand} — CV adapté à chaque offre d’emploi, sans mentir',
     description:
-      'Reformulez et adaptez votre CV à chaque offre en quelques minutes. {brand} met en valeur votre expérience réelle — jamais de fausses compétences. Gratuit, sans mot de passe.',
+      'Adaptez votre CV à chaque offre en quelques minutes. {brand} met en valeur votre expérience réelle — jamais de fausses compétences. {freeGenerations} CV offerts, sans abonnement.',
+  },
+
+  nav: {
+    signIn: 'Se connecter',
   },
 
   hero: {
+    eyebrow: 'Votre prochain CV, taillé sur mesure',
     h1Lead: 'Un CV taillé pour chaque offre.',
     h1Accent: 'Sans jamais mentir.',
     subtitle:
       '{brand} reformule et hiérarchise votre expérience réelle pour coller à l’offre que vous visez. Jamais de fausses compétences — juste votre parcours, mis en valeur.',
     cta: 'Créer mon CV adapté — gratuit',
     trust:
-      'Sans carte bancaire · Lien de connexion par e-mail · Vos données restent privées (RGPD)',
-    visualBefore: 'CV générique',
-    visualAfter: 'CV réaligné sur l’offre',
-    visualNote: 'Aucune ligne inventée — uniquement réordonnée et reformulée.',
+      'Sans carte bancaire · {freeGenerations} CV offerts · Vos données restent privées (RGPD)',
+    mockup: {
+      badge: 'Match 87 %',
+      beforeLabel: 'CV générique',
+      afterLabel: 'CV adapté à l’offre',
+    },
   },
 
   problem: {
+    eyebrow: 'Le constat',
     h2: 'Le même CV pour 30 offres ? Les recruteurs le voient. Les ATS aussi.',
     body: 'Un CV générique se noie. Le réécrire à la main pour chaque offre prend une heure que vous n’avez pas. Et les générateurs « IA » règlent le problème en inventant des compétences que vous devrez assumer en entretien.',
     transition: 'Il y a une troisième voie.',
   },
 
   how: {
-    h2: 'Comment ça marche',
+    eyebrow: 'Comment ça marche',
+    h2: 'Trois étapes, quelques minutes.',
     steps: [
       {
         title: 'Importez votre parcours',
@@ -54,6 +66,7 @@ export const fr = {
   },
 
   guardrail: {
+    eyebrow: 'Notre engagement',
     h2: 'Optimisé, jamais inventé.',
     promise:
       '{brand} ne fabrique jamais de compétence, de diplôme ou d’expérience que vous n’avez pas. Notre IA hiérarchise, reformule et met en valeur ce qui existe déjà dans votre parcours — rien d’autre.',
@@ -70,6 +83,7 @@ export const fr = {
   },
 
   audience: {
+    eyebrow: 'Pour qui ?',
     h2: 'Pensé pour celles et ceux qui postulent vraiment.',
     cards: [
       { title: 'Jeunes diplômés', body: 'Faire ressortir l’essentiel d’un parcours court.' },
@@ -79,38 +93,63 @@ export const fr = {
   },
 
   pricing: {
-    h2: 'Commencez gratuitement. Passez Premium quand ça compte.',
-    perMonth: '/mois',
-    free: '0 €',
-    legal: 'Sans engagement · résiliable à tout moment.',
-    plans: {
-      free: {
-        name: 'Gratuit',
-        tagline: 'Idéal pour tester sur votre prochaine candidature.',
-        features: ['Adaptation à l’offre', 'Export du CV', 'Découverte du garde-fou'],
-        cta: 'Créer mon CV gratuit',
+    eyebrow: 'Tarifs simples',
+    h2: 'Vos {freeGenerations} premiers CV sont offerts.',
+    intro:
+      'Ensuite, des packs de crédits sans abonnement : 1 crédit = 1 CV adapté à une offre. Vous payez quand vous postulez, pas tous les mois.',
+    featuredBadge: 'Le plus populaire',
+    freePrice: '0 €',
+    creditsSuffix: 'crédits',
+    perCv: 'soit {price} par CV',
+    legal: 'Paiement sécurisé · Sans abonnement, sans engagement.',
+    free: {
+      name: 'Découverte',
+      creditsNote: '{freeGenerations} CV adaptés offerts',
+      tagline: 'Pour tester {brand} sur vos prochaines candidatures.',
+      features: [
+        '{freeGenerations} CV adaptés à une offre, offerts à l’inscription',
+        'Garde-fou anti-invention inclus',
+        'Export PDF prêt à envoyer',
+        'Sans carte bancaire',
+      ],
+      cta: 'Commencer gratuitement',
+    },
+    packs: {
+      starter: {
+        name: 'Pack Starter',
+        tagline: 'Pour une recherche ciblée, au rythme de vos candidatures.',
+        features: [
+          '1 crédit = 1 CV adapté à une offre',
+          'Toutes les fonctionnalités incluses',
+          'Paiement unique, sans abonnement',
+        ],
+        cta: 'Choisir Starter',
       },
-      premium: {
-        name: 'Premium',
-        tagline: 'Pour celles et ceux qui postulent en série.',
+      standard: {
+        name: 'Pack Standard',
+        tagline: 'Pour postuler en série, au meilleur prix par CV.',
         features: [
-          'Adaptations illimitées',
-          'Variantes par offre',
-          'Historique de candidatures',
-          'Exports avancés',
+          '1 crédit = 1 CV adapté à une offre',
+          'Le meilleur prix par CV',
+          'Paiement unique, sans abonnement',
         ],
-        cta: 'Passer Premium',
+        cta: 'Choisir Standard',
       },
     },
   },
 
   faq: {
+    eyebrow: 'On vous répond',
     h2: 'Questions fréquentes',
     items: [
       {
         q: 'Est-ce que {brand} invente des compétences ?',
         a: 'Non, jamais. C’est notre règle non négociable : on réordonne et reformule votre expérience réelle, on n’ajoute rien.',
       },
+      {
+        q: 'Combien ça coûte ?',
+        a: 'Vos {freeGenerations} premiers CV sont offerts à l’inscription. Ensuite, des packs de crédits sans abonnement : à partir de 1 € le CV adapté à une offre. Vous ne payez que ce que vous utilisez.',
+      },
       {
         q: 'Faut-il créer un mot de passe ?',
         a: 'Non — connexion par lien magique envoyé sur votre e-mail.',
@@ -133,14 +172,14 @@ export const fr = {
   finalCta: {
     h2: 'Votre prochaine candidature mérite mieux qu’un copier-coller.',
     cta: 'Créer mon CV adapté — gratuit',
-    trust: 'Sans carte bancaire · RGPD · Honnête par conception.',
+    trust: 'Sans carte bancaire · {freeGenerations} CV offerts · Honnête par conception.',
   },
 
   signup: {
     emailLabel: 'Votre e-mail',
     emailPlaceholder: 'vous@email.com',
     submit: 'Recevoir mon lien de connexion',
-    sentTitle: 'C’est envoyé ✉️',
+    sentTitle: 'C’est envoyé !',
     sentBody: 'Cliquez sur le lien dans votre e-mail pour continuer. Pensez aux indésirables.',
     errorInvalid: 'Cet e-mail ne semble pas valide — vérifiez et réessayez.',
     errorNetwork: 'Une erreur est survenue — réessayez dans un instant.',
diff --git a/apps/app/layouts/default.vue b/apps/app/layouts/default.vue
index 806fe47..a87d312 100644
--- a/apps/app/layouts/default.vue
+++ b/apps/app/layouts/default.vue
@@ -1,11 +1,190 @@
+<script setup lang="ts">
+import { ChevronDown, LogOut } from '@lucide/vue'
+import { BRAND } from '~/config/brand'
+
+const isDev = import.meta.dev
+const route = useRoute()
+const { session, signOut, pending } = useAuth()
+
+/** Snapshot minimal de la session Better Auth (atom nanostores côté client). */
+type SessionUser = { email?: string | null }
+type SessionSnapshot = { data?: { user?: SessionUser | null } | null }
+
+const user = ref<SessionUser | null>(null)
+let unsubscribeSession: (() => void) | undefined
+
+const userInitial = computed(() => user.value?.email?.charAt(0)?.toUpperCase() ?? '?')
+
+const navLinks = [
+  { label: 'Mon profil', to: '/profil' },
+  { label: 'Mon CV', to: '/cv/demo' },
+] as const
+
+function isActive(to: string) {
+  if (to === '/cv/demo') return route.path.startsWith('/cv')
+  return route.path === to || route.path.startsWith(`${to}/`)
+}
+
+// --- Menu utilisateur (dropdown maison) ---
+const menuOpen = ref(false)
+const menuRef = ref<HTMLElement | null>(null)
+const triggerRef = ref<HTMLButtonElement | null>(null)
+
+function onDocumentClick(event: MouseEvent) {
+  if (!menuOpen.value) return
+  if (menuRef.value && !menuRef.value.contains(event.target as Node)) {
+    menuOpen.value = false
+  }
+}
+
+function onDocumentKeydown(event: KeyboardEvent) {
+  if (event.key === 'Escape' && menuOpen.value) {
+    menuOpen.value = false
+    triggerRef.value?.focus()
+  }
+}
+
+async function handleSignOut() {
+  menuOpen.value = false
+  await signOut()
+  await navigateTo('/')
+}
+
+onMounted(() => {
+  document.addEventListener('click', onDocumentClick)
+  document.addEventListener('keydown', onDocumentKeydown)
+
+  // L'atom Better Auth n'est pas réactif pour Vue : on s'y abonne et on
+  // recopie l'utilisateur dans une ref locale (mise à jour aussi au signOut).
+  const atom = session as unknown as {
+    subscribe?: (listener: (value: SessionSnapshot) => void) => () => void
+  }
+  if (typeof atom?.subscribe === 'function') {
+    unsubscribeSession = atom.subscribe((value) => {
+      user.value = value?.data?.user ?? null
+    })
+  }
+})
+
+onBeforeUnmount(() => {
+  document.removeEventListener('click', onDocumentClick)
+  document.removeEventListener('keydown', onDocumentKeydown)
+  unsubscribeSession?.()
+})
+
+const year = new Date().getFullYear()
+</script>
+
 <template>
   <div class="flex min-h-full flex-col bg-surface-muted">
-    <header class="border-b border-border bg-surface">
-      <div class="mx-auto flex max-w-4xl items-center justify-between px-6 py-4">
-        <NuxtLink to="/" class="text-lg font-bold text-ink-900">CV Optimizer</NuxtLink>
-        <nav class="flex gap-4 text-sm text-ink-700">
-          <NuxtLink to="/ui" class="hover:text-brand-600">Design system</NuxtLink>
-        </nav>
+    <header class="sticky top-0 z-40 border-b border-border bg-surface/80 backdrop-blur">
+      <div class="mx-auto flex h-16 w-full max-w-4xl items-center justify-between gap-4 px-6">
+        <div class="flex min-w-0 items-center gap-6">
+          <NuxtLink
+            to="/"
+            class="flex shrink-0 items-center gap-2 rounded-control focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500"
+            :aria-label="`${BRAND} — retour à l'accueil`"
+          >
+            <span
+              class="flex h-8 w-8 items-center justify-center rounded-control bg-brand-600 text-sm font-bold text-white"
+              aria-hidden="true"
+            >
+              T
+            </span>
+            <span class="text-lg font-bold tracking-tight text-ink-900">{{ BRAND }}</span>
+          </NuxtLink>
+
+          <nav
+            v-if="user || isDev"
+            class="flex items-center gap-1"
+            aria-label="Navigation principale"
+          >
+            <template v-if="user">
+              <NuxtLink
+                v-for="link in navLinks"
+                :key="link.to"
+                :to="link.to"
+                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(link.to)
+                    ? 'bg-brand-50 text-brand-700'
+                    : 'text-ink-600 hover:bg-surface-muted hover:text-ink-900'
+                "
+                :aria-current="isActive(link.to) ? 'page' : undefined"
+              >
+                {{ 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>
+
+        <div v-if="user" ref="menuRef" class="relative shrink-0">
+          <button
+            id="account-menu-trigger"
+            ref="triggerRef"
+            type="button"
+            class="flex items-center gap-1.5 rounded-full p-1 transition-colors duration-300 ease-out hover:bg-surface-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500"
+            aria-haspopup="menu"
+            :aria-expanded="menuOpen"
+            aria-controls="account-menu"
+            aria-label="Menu du compte"
+            @click="menuOpen = !menuOpen"
+          >
+            <span
+              class="flex h-8 w-8 items-center justify-center rounded-full bg-brand-100 text-sm font-semibold text-brand-700"
+              aria-hidden="true"
+            >
+              {{ userInitial }}
+            </span>
+            <ChevronDown
+              class="h-4 w-4 text-ink-500 transition-transform duration-300 ease-out"
+              :class="menuOpen ? 'rotate-180' : ''"
+              :stroke-width="2"
+              aria-hidden="true"
+            />
+          </button>
+
+          <div
+            v-if="menuOpen"
+            id="account-menu"
+            role="menu"
+            aria-labelledby="account-menu-trigger"
+            class="absolute right-0 top-full z-50 mt-2 w-64 animate-fade-up rounded-card bg-surface p-1.5 shadow-pop ring-1 ring-border"
+          >
+            <p class="truncate px-3 py-2 text-sm text-ink-600" :title="user.email ?? undefined">
+              {{ user.email }}
+            </p>
+            <div role="separator" class="my-1 border-t border-border" />
+            <button
+              type="button"
+              role="menuitem"
+              :disabled="pending"
+              class="flex w-full items-center gap-2 rounded-control px-3 py-2 text-left text-sm font-medium text-ink-700 transition-colors duration-300 ease-out hover:bg-danger-50 hover:text-danger-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 disabled:cursor-not-allowed disabled:opacity-60"
+              @click="handleSignOut"
+            >
+              <LogOut class="h-4 w-4" :stroke-width="1.75" aria-hidden="true" />
+              Se déconnecter
+            </button>
+          </div>
+        </div>
+
+        <UiButton v-else size="sm" class="shrink-0" @click="navigateTo('/connexion')">
+          Essayer gratuitement
+        </UiButton>
       </div>
     </header>
 
@@ -13,9 +192,67 @@
       <slot />
     </main>
 
-    <footer class="border-t border-border bg-surface">
-      <div class="mx-auto max-w-4xl px-6 py-4 text-sm text-ink-500">
-        CV Optimizer — génération de CV adaptés aux offres.
+    <footer class="border-t border-border bg-surface-muted">
+      <div class="mx-auto w-full max-w-4xl px-6 py-10">
+        <div class="flex flex-col gap-10 sm:flex-row sm:items-start sm:justify-between">
+          <div class="max-w-xs space-y-3">
+            <NuxtLink
+              to="/"
+              class="inline-flex items-center gap-2 rounded-control focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500"
+              :aria-label="`${BRAND} — retour à l'accueil`"
+            >
+              <span
+                class="flex h-7 w-7 items-center justify-center rounded-control bg-brand-600 text-xs font-bold text-white"
+                aria-hidden="true"
+              >
+                T
+              </span>
+              <span class="text-base font-bold tracking-tight text-ink-900">{{ BRAND }}</span>
+            </NuxtLink>
+            <p class="text-sm text-ink-600">Ton CV, adapté à chaque offre. Sans stress.</p>
+          </div>
+
+          <div class="flex gap-12 sm:gap-16">
+            <div>
+              <p class="text-xs font-semibold uppercase tracking-wide text-ink-500">Produit</p>
+              <ul class="mt-3 space-y-2 text-sm">
+                <li>
+                  <a
+                    href="/#tarifs"
+                    class="text-ink-600 transition-colors duration-300 ease-out hover:text-ink-900"
+                  >
+                    Tarifs
+                  </a>
+                </li>
+                <li>
+                  <NuxtLink
+                    to="/connexion"
+                    class="text-ink-600 transition-colors duration-300 ease-out hover:text-ink-900"
+                  >
+                    Connexion
+                  </NuxtLink>
+                </li>
+              </ul>
+            </div>
+
+            <div>
+              <p class="text-xs font-semibold uppercase tracking-wide text-ink-500">Légal</p>
+              <ul class="mt-3 space-y-2 text-sm">
+                <!-- Pages légales à venir : placeholders non interactifs (pas de faux liens). -->
+                <li>
+                  <span class="cursor-default text-ink-400">Mentions légales</span>
+                </li>
+                <li>
+                  <span class="cursor-default text-ink-400">Confidentialité</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+
+        <p class="mt-10 border-t border-border pt-6 text-xs text-ink-500">
+          © {{ year }} {{ BRAND }}. Tous droits réservés.
+        </p>
       </div>
     </footer>
   </div>
diff --git a/apps/app/nuxt.config.ts b/apps/app/nuxt.config.ts
index 92e029b..ff3bcbb 100644
--- a/apps/app/nuxt.config.ts
+++ b/apps/app/nuxt.config.ts
@@ -6,6 +6,13 @@ export default defineNuxtConfig({
   compatibilityDate: '2025-01-01',
   devtools: { enabled: true },
 
+  // Chargement réel des fontes (self-hosted au build — pas de requête Google au runtime).
+  // La famille est consommée via le token --font-sans (assets/css/main.css).
+  modules: ['@nuxt/fonts'],
+  fonts: {
+    families: [{ name: 'Plus Jakarta Sans', provider: 'google', weights: [400, 500, 600, 700, 800] }],
+  },
+
   // TS strict des deux côtés (front Vue + serveur Nitro).
   typescript: {
     strict: true,
@@ -20,6 +27,7 @@ export default defineNuxtConfig({
       // Titre global de repli = nom de marque. La landing surcharge avec un
       // <title> SEO dédié ; le nom vient du token BRAND (config/brand.ts).
       title: 'Teven',
+      link: [{ rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' }],
     },
   },
 
diff --git a/apps/app/package.json b/apps/app/package.json
index 2aa4de6..7fcdada 100644
--- a/apps/app/package.json
+++ b/apps/app/package.json
@@ -17,6 +17,7 @@
   },
   "dependencies": {
     "@cvo/shared": "workspace:*",
+    "@lucide/vue": "^1.17.0",
     "@prisma/client": "^6.2.1",
     "better-auth": "^1.6.15",
     "nodemailer": "^8.0.10",
@@ -24,6 +25,7 @@
     "zod": "^4.4.3"
   },
   "devDependencies": {
+    "@nuxt/fonts": "^0.14.0",
     "@tailwindcss/vite": "^4.0.0",
     "@types/node": "^22.10.5",
     "@types/nodemailer": "^8.0.0",
diff --git a/apps/app/pages/connexion.vue b/apps/app/pages/connexion.vue
index 4d25059..48593cb 100644
--- a/apps/app/pages/connexion.vue
+++ b/apps/app/pages/connexion.vue
@@ -1,7 +1,11 @@
 <script setup lang="ts">
+import { ArrowLeft, MailCheck } from '@lucide/vue'
+import { BRAND } from '~/config/brand'
+
 definePageMeta({ layout: false }) // page plein-écran, pas de nav connectée
 
 const { signIn, pending, error } = useAuth()
+const toast = useToast()
 
 const email = ref('')
 const sent = ref(false)
@@ -11,67 +15,100 @@ async function handleSubmit() {
   const ok = await signIn(email.value)
   if (ok) sent.value = true
 }
+
+async function handleResend() {
+  if (!email.value) return
+  const ok = await signIn(email.value)
+  if (ok) toast.success('Lien renvoyé', `Jette un œil à ta boîte ${email.value}.`)
+}
+
+function changeEmail() {
+  sent.value = false
+  email.value = ''
+}
 </script>
 
 <template>
-  <div class="min-h-screen flex items-center justify-center bg-surface-muted px-4">
-    <div class="w-full max-w-sm bg-surface rounded-card shadow p-8 space-y-6">
-      <div class="text-center space-y-1">
-        <h1 class="text-xl font-semibold text-ink-900">Connexion</h1>
-        <p class="text-sm text-ink-500">CV Optimizer</p>
-      </div>
+  <div class="flex min-h-screen flex-col items-center justify-center bg-surface-muted px-4 py-10">
+    <NuxtLink
+      to="/"
+      class="mb-8 flex items-center gap-2 rounded-control focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500"
+      :aria-label="`${BRAND} — retour à l'accueil`"
+    >
+      <span
+        class="flex h-9 w-9 items-center justify-center rounded-control bg-brand-600 text-base font-bold text-white"
+        aria-hidden="true"
+      >
+        T
+      </span>
+      <span class="text-xl font-bold tracking-tight text-ink-900">{{ BRAND }}</span>
+    </NuxtLink>
 
+    <UiCard class="w-full max-w-md">
       <template v-if="!sent">
-        <form class="space-y-4" @submit.prevent="handleSubmit">
-          <div class="space-y-1">
-            <label for="email" class="block text-sm font-medium text-ink-700">
-              Adresse e-mail
-            </label>
-            <input
-              id="email"
-              v-model="email"
-              type="email"
-              required
-              autocomplete="email"
-              placeholder="vous@exemple.fr"
-              class="w-full rounded-card border border-ink-500/30 bg-surface px-3 py-2 text-sm text-ink-900 placeholder-ink-500 focus:outline-none focus:ring-2 focus:ring-brand-500 disabled:opacity-50"
-              :disabled="pending"
-            />
-          </div>
+        <div class="mb-6 space-y-1.5 text-center">
+          <h1 class="text-xl font-semibold text-ink-900">Content de te revoir</h1>
+          <p class="text-sm text-ink-600">
+            Entre ton email, on t'envoie un lien magique. Pas de mot de passe à retenir.
+          </p>
+        </div>
 
-          <p v-if="error" role="alert" class="text-sm text-danger-500">{{ error }}</p>
+        <form class="space-y-4" novalidate @submit.prevent="handleSubmit">
+          <UiInput
+            v-model="email"
+            type="email"
+            label="Email"
+            placeholder="toi@exemple.fr"
+            required
+            :disabled="pending"
+            :error="error ?? undefined"
+          />
 
-          <button
-            type="submit"
-            :disabled="pending || !email"
-            class="w-full rounded-card bg-brand-600 py-2 text-sm font-medium text-white hover:bg-brand-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-          >
-            <span v-if="pending">Envoi en cours…</span>
-            <span v-else>Recevoir un lien de connexion</span>
-          </button>
+          <UiButton type="submit" class="w-full" :loading="pending" :disabled="!email">
+            Recevoir mon lien de connexion
+          </UiButton>
         </form>
 
-        <p class="text-xs text-center text-ink-500">
-          Pas de mot de passe. Vous recevrez un lien valable 10 minutes.
+        <p class="mt-4 text-center text-xs text-ink-500">
+          Le lien est valable 10 minutes. Rien à installer, rien à retenir.
         </p>
       </template>
 
-      <template v-else>
-        <div class="text-center space-y-3">
-          <p class="text-success-500 font-medium">✓ Lien envoyé !</p>
-          <p class="text-sm text-ink-700">
-            Consultez votre boîte e-mail (<strong>{{ email }}</strong>) et cliquez sur le lien pour
-            vous connecter.
+      <div v-else class="animate-fade-up space-y-5 text-center">
+        <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-success-50">
+          <MailCheck class="h-6 w-6 text-success-600" :stroke-width="1.75" aria-hidden="true" />
+        </div>
+
+        <div class="space-y-1.5">
+          <h1 class="text-xl font-semibold text-ink-900">Vérifie ta boîte mail</h1>
+          <p class="text-sm text-ink-600">
+            On vient d'envoyer un lien de connexion à
+            <strong class="font-semibold text-ink-900">{{ email }}</strong
+            >. Clique dessus pour continuer — il est valable 10 minutes.
           </p>
-          <p class="text-xs text-ink-500">Le lien est valable 10 minutes.</p>
+        </div>
+
+        <div class="flex flex-col items-center gap-2">
+          <UiButton variant="ghost" size="sm" :loading="pending" @click="handleResend">
+            Renvoyer le lien
+          </UiButton>
           <button
-            class="text-sm text-brand-600 hover:underline"
-            @click="sent = false"
+            type="button"
+            class="rounded-control text-sm text-brand-700 underline-offset-4 transition-colors duration-300 ease-out hover:text-brand-600 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500"
+            @click="changeEmail"
           >
             Utiliser une autre adresse
           </button>
         </div>
-      </template>
-    </div>
+      </div>
+    </UiCard>
+
+    <NuxtLink
+      to="/"
+      class="mt-8 inline-flex items-center gap-1.5 rounded-control text-sm text-ink-600 transition-colors duration-300 ease-out hover:text-ink-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500"
+    >
+      <ArrowLeft class="h-4 w-4" :stroke-width="2" aria-hidden="true" />
+      Retour à l'accueil
+    </NuxtLink>
   </div>
 </template>
diff --git a/apps/app/pages/cv/demo.vue b/apps/app/pages/cv/demo.vue
index 3fe9cd3..7579a1c 100644
--- a/apps/app/pages/cv/demo.vue
+++ b/apps/app/pages/cv/demo.vue
@@ -1,13 +1,19 @@
 <script setup lang="ts">
 import type { RenderableCv, ProfileItemId } from '@cvo/shared'
 import { assertValidCv } from '@cvo/shared'
+import { Download } from '@lucide/vue'
 
 // Données de démo statiques — aucune donnée personnelle réelle.
 // Le moteur (THI-124) remplacera ceci par une vraie génération côté serveur.
 const DEMO_PROFILE_IDS: ProfileItemId[] = [
-  'identity-1', 'summary-1',
-  'exp-1', 'exp-1-b1', 'exp-1-b2',
-  'skill-ts', 'skill-vue', 'edu-1',
+  'identity-1',
+  'summary-1',
+  'exp-1',
+  'exp-1-b1',
+  'exp-1-b2',
+  'skill-ts',
+  'skill-vue',
+  'edu-1',
 ]
 
 const demoCv: RenderableCv = {
@@ -58,8 +64,16 @@ const demoCv: RenderableCv = {
       kind: 'skills',
       title: 'Compétences',
       entries: [
-        { id: 'sk-1', label: 'TypeScript', provenance: { profileItemId: 'skill-ts', reformulated: false } },
-        { id: 'sk-2', label: 'Vue 3', provenance: { profileItemId: 'skill-vue', reformulated: false } },
+        {
+          id: 'sk-1',
+          label: 'TypeScript',
+          provenance: { profileItemId: 'skill-ts', reformulated: false },
+        },
+        {
+          id: 'sk-2',
+          label: 'Vue 3',
+          provenance: { profileItemId: 'skill-vue', reformulated: false },
+        },
       ],
     },
     {
@@ -81,7 +95,8 @@ const demoCv: RenderableCv = {
 // Défense en profondeur : garde-fou provenance avant tout rendu.
 assertValidCv(demoCv, DEMO_PROFILE_IDS)
 
-// Export PDF : câblé sur /api/cv/export-pdf (PR 3, THI-125).
+// Export PDF via /api/cv/export-pdf (THI-125).
+const toast = useToast()
 const exporting = ref(false)
 
 async function handleExport() {
@@ -100,8 +115,11 @@ async function handleExport() {
     a.click()
     URL.revokeObjectURL(url)
   } catch (err) {
-    // Route export non encore déployée (PR 3) — erreur attendue en démo.
-    console.error('[cv/demo] export-pdf non disponible (PR 3):', err)
+    console.error('[cv/demo] export-pdf en échec:', err)
+    toast.error(
+      'Export impossible',
+      "Le PDF n'a pas pu être généré. Réessaie dans quelques instants.",
+    )
   } finally {
     exporting.value = false
   }
@@ -109,23 +127,34 @@ async function handleExport() {
 </script>
 
 <template>
-  <div class="min-h-screen bg-surface-muted py-10 print:bg-white print:py-0">
-    <!-- Barre d'actions — masquée à l'impression -->
-    <div class="mx-auto mb-6 flex w-full max-w-[210mm] items-center justify-between px-2 print:hidden">
-      <p class="text-sm text-ink-500">
-        Aperçu CV — <span class="font-medium text-ink-700">données de démo</span>
-      </p>
-      <button
-        type="button"
-        :disabled="exporting"
-        class="rounded-card bg-brand-600 px-4 py-2 text-sm font-medium text-brand-50 hover:bg-brand-700 disabled:opacity-60"
-        @click="handleExport"
-      >
-        {{ exporting ? 'Export en cours…' : 'Télécharger PDF' }}
-      </button>
+  <div class="bg-surface-muted print:bg-white">
+    <!-- Barre d'actions — chrome d'aperçu, masquée à l'impression. -->
+    <div
+      class="mx-auto mb-8 flex w-full max-w-[210mm] flex-col gap-4 sm:flex-row sm:items-center sm:justify-between print:hidden"
+    >
+      <div class="min-w-0">
+        <div class="flex flex-wrap items-center gap-2.5">
+          <h1 class="text-2xl font-bold tracking-tight text-ink-900">Aperçu de ton CV</h1>
+          <UiBadge variant="brand">Données de démo</UiBadge>
+        </div>
+        <p class="mt-1 text-sm text-ink-500">Vérifie le rendu, puis télécharge-le en un clic.</p>
+      </div>
+      <UiButton :loading="exporting" class="shrink-0" @click="handleExport">
+        <Download v-if="!exporting" class="h-4 w-4" :stroke-width="2" aria-hidden="true" />
+        Télécharger en PDF
+      </UiButton>
+    </div>
+
+    <!--
+      Feuille d'aperçu : seul le conteneur est stylé.
+      CvTemplate (.cv-page) reste intouché — parité stricte avec l'export PDF serveur.
+    -->
+    <div
+      class="mx-auto max-w-[210mm] overflow-hidden rounded-card shadow-pop ring-1 ring-border print:max-w-none print:overflow-visible print:rounded-none print:shadow-none print:ring-0"
+    >
+      <CvTemplate :cv="demoCv" />
     </div>
 
-    <!-- Rendu du CV (composant déterministe) -->
-    <CvTemplate :cv="demoCv" />
+    <p class="mt-5 text-center text-xs text-ink-400 print:hidden">Aperçu fidèle au PDF exporté.</p>
   </div>
 </template>
diff --git a/apps/app/pages/index.vue b/apps/app/pages/index.vue
index 527c86a..f43baf1 100644
--- a/apps/app/pages/index.vue
+++ b/apps/app/pages/index.vue
@@ -1,10 +1,26 @@
 <script setup lang="ts">
+import { ref, useId } from 'vue'
 import { useRuntimeConfig, useHead } from '#imports'
+import {
+  Briefcase,
+  Check,
+  ChevronDown,
+  ClipboardList,
+  Compass,
+  FileText,
+  GraduationCap,
+  ShieldCheck,
+  Sparkles,
+  X,
+} from '@lucide/vue'
 import { useLanding } from '~/composables/useLanding'
+import { buttonClasses } from '~/components/ui/button-classes'
 import MagicLinkForm from '~/components/landing/MagicLinkForm.vue'
+import CvMockup from '~/components/landing/CvMockup.vue'
+import type { CreditPackConfig } from '~/config/pricing'
 
 // Copy 100 % issue de useLanding() — aucun texte en dur (DoD i18n FR-first).
-const { m, brand, plans, faqJsonLd } = useLanding()
+const { m, brand, packs, faqJsonLd } = useLanding()
 
 const siteUrl = useRuntimeConfig().public.siteUrl
 
@@ -27,192 +43,358 @@ useHead({
   script: [{ type: 'application/ld+json', innerHTML: faqJsonLd }],
 })
 
-function priceLabel(priceEur: number | null): string {
-  return priceEur === null ? m.pricing.free : `${priceEur} €`
+// Icônes décoratives associées aux listes i18n (même ordre que la copy).
+const STEP_ICONS = [FileText, ClipboardList, Sparkles] as const
+const AUDIENCE_ICONS = [GraduationCap, Briefcase, Compass] as const
+
+// Prix au format FR : entier sans décimales (« 5 € »), sinon 2 décimales (« 0,80 € »).
+function formatEur(value: number): string {
+  const digits = Number.isInteger(value) ? 0 : 2
+  return new Intl.NumberFormat('fr-FR', {
+    style: 'currency',
+    currency: 'EUR',
+    minimumFractionDigits: digits,
+    maximumFractionDigits: digits,
+  }).format(value)
+}
+
+function perCvLabel(pack: CreditPackConfig): string {
+  return m.pricing.perCv.replace('{price}', formatEur(pack.priceEur / pack.credits))
+}
+
+// FAQ : accordéon accessible (un seul panneau ouvert, ids uniques via useId).
+const faqUid = useId()
+const openFaq = ref<number | null>(0)
+function toggleFaq(index: number) {
+  openFaq.value = openFaq.value === index ? null : index
 }
 </script>
 
 <template>
   <main id="top" class="min-h-full bg-surface text-ink-900">
+    <!-- Le header global (nav + connexion) vient du layout par défaut. -->
+
     <!-- Hero -->
-    <section class="mx-auto max-w-5xl px-6 pb-16 pt-20 text-center">
-      <h1 class="text-4xl font-bold leading-tight sm:text-5xl">
-        {{ m.hero.h1Lead }}<br />
-        <span class="text-brand-600">{{ m.hero.h1Accent }}</span>
-      </h1>
-      <p class="mx-auto mt-6 max-w-2xl text-lg text-ink-700">{{ m.hero.subtitle }}</p>
-      <div class="mt-8 flex justify-center">
-        <MagicLinkForm id="hero-email" />
-      </div>
-      <p class="mt-4 text-sm text-ink-500">{{ m.hero.trust }}</p>
-
-      <!-- Visuel avant/après (placeholder structuré ; asset hero = demande dédiée design) -->
-      <div class="mx-auto mt-12 grid max-w-3xl gap-4 sm:grid-cols-2">
-        <figure class="rounded-card border border-ink-500/20 bg-surface-muted p-5 text-left">
-          <figcaption class="text-xs font-semibold uppercase tracking-wide text-ink-500">
-            {{ m.hero.visualBefore }}
-          </figcaption>
-          <div class="mt-3 space-y-2" aria-hidden="true">
-            <div class="h-2 w-3/4 rounded bg-ink-500/20"></div>
-            <div class="h-2 w-full rounded bg-ink-500/20"></div>
-            <div class="h-2 w-5/6 rounded bg-ink-500/20"></div>
-          </div>
-        </figure>
-        <figure class="rounded-card border border-brand-500/40 bg-brand-50 p-5 text-left">
-          <figcaption class="text-xs font-semibold uppercase tracking-wide text-brand-700">
-            {{ m.hero.visualAfter }}
-          </figcaption>
-          <div class="mt-3 space-y-2" aria-hidden="true">
-            <div class="h-2 w-5/6 rounded bg-brand-500"></div>
-            <div class="h-2 w-full rounded bg-brand-500/60"></div>
-            <div class="h-2 w-2/3 rounded bg-ink-500/20"></div>
+    <section class="relative overflow-hidden">
+      <div
+        class="pointer-events-none absolute -top-24 right-[-10%] h-96 w-96 rounded-full bg-brand-100/60 blur-3xl"
+        aria-hidden="true"
+      ></div>
+      <div
+        class="mx-auto grid max-w-6xl items-center gap-14 px-6 pb-24 pt-12 lg:grid-cols-2 lg:gap-16 lg:pb-28 lg:pt-20"
+      >
+        <div class="relative">
+          <p class="text-xs font-semibold uppercase tracking-widest text-brand-600">
+            {{ m.hero.eyebrow }}
+          </p>
+          <h1 class="mt-4 text-4xl font-bold leading-[1.1] tracking-tight sm:text-5xl">
+            {{ m.hero.h1Lead }}<br />
+            <span class="text-brand-600">{{ m.hero.h1Accent }}</span>
+          </h1>
+          <p class="mt-6 max-w-xl text-lg leading-relaxed text-ink-600">{{ m.hero.subtitle }}</p>
+          <div class="mt-8">
+            <MagicLinkForm />
           </div>
-          <figcaption class="mt-3 text-xs text-ink-700">{{ m.hero.visualNote }}</figcaption>
-        </figure>
+          <p class="mt-4 text-sm text-ink-500">{{ m.hero.trust }}</p>
+        </div>
+
+        <!-- LE produit : pile avant/après de CV (CvMockup) -->
+        <div class="relative px-4 sm:px-8 lg:px-0">
+          <CvMockup />
+        </div>
       </div>
     </section>
 
     <!-- Problème -->
-    <section class="bg-surface-muted px-6 py-16">
+    <section class="bg-surface-muted px-6 py-20 sm:py-24">
       <div class="mx-auto max-w-3xl text-center">
-        <h2 class="text-2xl font-bold sm:text-3xl">{{ m.problem.h2 }}</h2>
-        <p class="mt-4 text-ink-700">{{ m.problem.body }}</p>
-        <p class="mt-4 font-semibold text-brand-600">{{ m.problem.transition }}</p>
+        <p class="text-xs font-semibold uppercase tracking-widest text-brand-600">
+          {{ m.problem.eyebrow }}
+        </p>
+        <h2 class="mt-4 text-3xl font-bold tracking-tight sm:text-4xl">{{ m.problem.h2 }}</h2>
+        <p class="mt-6 text-lg leading-relaxed text-ink-600">{{ m.problem.body }}</p>
+        <p class="mt-6 text-lg font-semibold text-brand-600">{{ m.problem.transition }}</p>
       </div>
     </section>
 
     <!-- Comment ça marche -->
-    <section class="px-6 py-16">
-      <div class="mx-auto max-w-5xl">
-        <h2 class="text-center text-2xl font-bold sm:text-3xl">{{ m.how.h2 }}</h2>
-        <ol class="mt-10 grid gap-8 md:grid-cols-3">
-          <li v-for="(step, i) in m.how.steps" :key="i" class="text-center">
-            <span
-              class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-brand-600 text-lg font-bold text-white"
-            >
-              {{ i + 1 }}
-            </span>
-            <h3 class="mt-4 text-lg font-semibold">{{ step.title }}</h3>
-            <p class="mt-2 text-ink-700">{{ step.body }}</p>
+    <section class="px-6 py-20 sm:py-24">
+      <div class="mx-auto max-w-6xl">
+        <div class="mx-auto max-w-2xl text-center">
+          <p class="text-xs font-semibold uppercase tracking-widest text-brand-600">
+            {{ m.how.eyebrow }}
+          </p>
+          <h2 class="mt-4 text-3xl font-bold tracking-tight sm:text-4xl">{{ m.how.h2 }}</h2>
+        </div>
+        <ol class="mt-14 grid gap-6 md:grid-cols-3">
+          <li
+            v-for="(step, i) in m.how.steps"
+            :key="i"
+            class="rounded-card bg-surface p-7 shadow-card ring-1 ring-border transition-shadow duration-300 ease-out hover:shadow-card-hover"
+          >
+            <div class="flex items-center justify-between">
+              <span
+                class="flex h-12 w-12 items-center justify-center rounded-control bg-brand-50 text-brand-600"
+              >
+                <component
+                  :is="STEP_ICONS[i]"
+                  class="h-6 w-6"
+                  :stroke-width="1.75"
+                  aria-hidden="true"
+                />
+              </span>
+              <span class="text-sm font-semibold tabular-nums text-ink-300" aria-hidden="true">
+                0{{ i + 1 }}
+              </span>
+            </div>
+            <h3 class="mt-5 text-lg font-semibold text-ink-900">{{ step.title }}</h3>
+            <p class="mt-2 leading-relaxed text-ink-600">{{ step.body }}</p>
           </li>
         </ol>
       </div>
     </section>
 
     <!-- Garde-fou (différenciateur cœur) -->
-    <section class="bg-ink-900 px-6 py-16 text-white">
-      <div class="mx-auto max-w-3xl text-center">
-        <h2 class="text-2xl font-bold sm:text-3xl">{{ m.guardrail.h2 }}</h2>
-        <p class="mt-4 text-white/80">{{ m.guardrail.promise }}</p>
-        <ul class="mx-auto mt-8 max-w-xl space-y-3 text-left">
+    <section class="bg-ink-900 px-6 py-20 text-white sm:py-24">
+      <div class="mx-auto grid max-w-6xl items-center gap-12 lg:grid-cols-2 lg:gap-16">
+        <div>
+          <span
+            class="inline-flex h-12 w-12 items-center justify-center rounded-control bg-white/10"
+          >
+            <ShieldCheck class="h-6 w-6 text-brand-300" :stroke-width="1.75" aria-hidden="true" />
+          </span>
+          <p class="mt-6 text-xs font-semibold uppercase tracking-widest text-brand-300">
+            {{ m.guardrail.eyebrow }}
+          </p>
+          <h2 class="mt-4 text-3xl font-bold tracking-tight sm:text-4xl">{{ m.guardrail.h2 }}</h2>
+          <p class="mt-6 leading-relaxed text-white/80">{{ m.guardrail.promise }}</p>
+          <p class="mt-6 font-medium text-white">{{ m.guardrail.reassurance }}</p>
+        </div>
+        <ul class="space-y-4">
           <li
             v-for="(p, i) in m.guardrail.proof"
             :key="i"
-            class="flex items-start gap-3 rounded-card bg-white/5 px-4 py-3"
+            class="flex items-start gap-4 rounded-card bg-white/5 px-5 py-4 ring-1 ring-white/10"
           >
-            <span class="text-lg" :class="p.ok ? 'text-success-500' : 'text-danger-500'">
-              {{ p.ok ? '✅' : '❌' }}
+            <span
+              class="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-full"
+              :class="
+                p.ok ? 'bg-success-500/20 text-success-500' : 'bg-danger-500/20 text-danger-500'
+              "
+            >
+              <Check v-if="p.ok" class="h-4 w-4" :stroke-width="2" aria-hidden="true" />
+              <X v-else class="h-4 w-4" :stroke-width="2" aria-hidden="true" />
             </span>
-            <span class="text-white/90">{{ p.text }}</span>
+            <span class="leading-relaxed text-white/90">{{ p.text }}</span>
           </li>
         </ul>
-        <p class="mt-6 font-medium text-white">{{ m.guardrail.reassurance }}</p>
       </div>
     </section>
 
     <!-- Pour qui -->
-    <section class="px-6 py-16">
-      <div class="mx-auto max-w-5xl">
-        <h2 class="text-center text-2xl font-bold sm:text-3xl">{{ m.audience.h2 }}</h2>
-        <div class="mt-10 grid gap-6 md:grid-cols-3">
+    <section class="px-6 py-20 sm:py-24">
+      <div class="mx-auto max-w-6xl">
+        <div class="mx-auto max-w-2xl text-center">
+          <p class="text-xs font-semibold uppercase tracking-widest text-brand-600">
+            {{ m.audience.eyebrow }}
+          </p>
+          <h2 class="mt-4 text-3xl font-bold tracking-tight sm:text-4xl">{{ m.audience.h2 }}</h2>
+        </div>
+        <div class="mt-14 grid gap-6 md:grid-cols-3">
           <article
             v-for="(c, i) in m.audience.cards"
             :key="i"
-            class="rounded-card border border-ink-500/20 bg-surface-muted p-6"
+            class="rounded-card bg-surface-muted p-7 ring-1 ring-border transition-shadow duration-300 ease-out hover:shadow-card"
           >
-            <h3 class="text-lg font-semibold">{{ c.title }}</h3>
-            <p class="mt-2 text-ink-700">{{ c.body }}</p>
+            <span
+              class="flex h-12 w-12 items-center justify-center rounded-control bg-brand-50 text-brand-600"
+            >
+              <component
+                :is="AUDIENCE_ICONS[i]"
+                class="h-6 w-6"
+                :stroke-width="1.75"
+                aria-hidden="true"
+              />
+            </span>
+            <h3 class="mt-5 text-lg font-semibold text-ink-900">{{ c.title }}</h3>
+            <p class="mt-2 leading-relaxed text-ink-600">{{ c.body }}</p>
           </article>
         </div>
       </div>
     </section>
 
-    <!-- Pricing -->
-    <section id="tarifs" class="bg-surface-muted px-6 py-16">
-      <div class="mx-auto max-w-4xl">
-        <h2 class="text-center text-2xl font-bold sm:text-3xl">{{ m.pricing.h2 }}</h2>
-        <div class="mt-10 grid gap-6 md:grid-cols-2">
+    <!-- Pricing : crédits one-shot, pas d'abonnement -->
+    <section id="tarifs" class="bg-surface-muted px-6 py-20 sm:py-24">
+      <div class="mx-auto max-w-6xl">
+        <div class="mx-auto max-w-2xl text-center">
+          <p class="text-xs font-semibold uppercase tracking-widest text-brand-600">
+            {{ m.pricing.eyebrow }}
+          </p>
+          <h2 class="mt-4 text-3xl font-bold tracking-tight sm:text-4xl">{{ m.pricing.h2 }}</h2>
+          <p class="mt-6 leading-relaxed text-ink-600">{{ m.pricing.intro }}</p>
+        </div>
+
+        <div class="mx-auto mt-14 grid max-w-5xl gap-6 md:grid-cols-3">
+          <!-- Carte « Gratuit » (2 générations offertes à l'inscription) -->
+          <article class="flex flex-col rounded-card bg-surface p-7 shadow-xs ring-1 ring-border">
+            <h3 class="text-lg font-semibold text-ink-900">{{ m.pricing.free.name }}</h3>
+            <p class="mt-1 text-sm text-ink-500">{{ m.pricing.free.tagline }}</p>
+            <p class="mt-5">
+              <span class="text-4xl font-bold tracking-tight text-ink-900">
+                {{ m.pricing.freePrice }}
+              </span>
+            </p>
+            <p class="mt-1 text-sm font-medium text-ink-600">{{ m.pricing.free.creditsNote }}</p>
+            <ul class="mt-6 flex-1 space-y-3 text-sm text-ink-700">
+              <li
+                v-for="(f, i) in m.pricing.free.features"
+                :key="i"
+                class="flex items-start gap-2.5"
+              >
+                <Check
+                  class="mt-0.5 h-4 w-4 shrink-0 text-success-600"
+                  :stroke-width="2"
+                  aria-hidden="true"
+                />
+                <span>{{ f }}</span>
+              </li>
+            </ul>
+            <NuxtLink to="/connexion" class="mt-8 w-full" :class="buttonClasses('secondary', 'lg')">
+              {{ m.pricing.free.cta }}
+            </NuxtLink>
+          </article>
+
+          <!-- Packs de crédits (config/pricing.ts, jamais en dur) -->
           <article
-            v-for="plan in plans"
-            :key="plan.key"
-            class="flex flex-col rounded-card border bg-surface p-6"
-            :class="plan.featured ? 'border-brand-600 shadow-md' : 'border-ink-500/20'"
+            v-for="pack in packs"
+            :key="pack.key"
+            class="relative flex flex-col rounded-card p-7"
+            :class="
+              pack.featured
+                ? 'bg-brand-50/50 shadow-card ring-2 ring-brand-600'
+                : 'bg-surface shadow-xs ring-1 ring-border'
+            "
           >
-            <h3 class="text-lg font-semibold">{{ m.pricing.plans[plan.key].name }}</h3>
-            <p class="mt-2">
-              <span class="text-3xl font-bold">{{ priceLabel(plan.priceEur) }}</span>
-              <span v-if="plan.priceEur !== null" class="text-ink-500">{{
-                m.pricing.perMonth
-              }}</span>
+            <span v-if="pack.featured" class="absolute -top-3 left-1/2 -translate-x-1/2">
+              <UiBadge variant="brand">{{ m.pricing.featuredBadge }}</UiBadge>
+            </span>
+            <h3 class="text-lg font-semibold text-ink-900">
+              {{ m.pricing.packs[pack.key].name }}
+            </h3>
+            <p class="mt-1 text-sm text-ink-500">{{ m.pricing.packs[pack.key].tagline }}</p>
+            <p class="mt-5">
+              <span class="text-4xl font-bold tracking-tight text-ink-900">
+                {{ formatEur(pack.priceEur) }}
+              </span>
+            </p>
+            <p class="mt-1 text-sm font-medium text-ink-600">
+              {{ pack.credits }} {{ m.pricing.creditsSuffix }} · {{ perCvLabel(pack) }}
             </p>
-            <p class="mt-1 text-sm text-ink-500">{{ m.pricing.plans[plan.key].tagline }}</p>
-            <ul class="mt-4 flex-1 space-y-2 text-sm text-ink-700">
-              <li v-for="(f, i) in m.pricing.plans[plan.key].features" :key="i" class="flex gap-2">
-                <span class="text-success-500">✓</span>{{ f }}
+            <ul class="mt-6 flex-1 space-y-3 text-sm text-ink-700">
+              <li
+                v-for="(f, i) in m.pricing.packs[pack.key].features"
+                :key="i"
+                class="flex items-start gap-2.5"
+              >
+                <Check
+                  class="mt-0.5 h-4 w-4 shrink-0 text-success-600"
+                  :stroke-width="2"
+                  aria-hidden="true"
+                />
+                <span>{{ f }}</span>
               </li>
             </ul>
-            <a
-              href="#top"
-              class="mt-6 rounded-card px-5 py-3 text-center font-semibold transition"
-              :class="
-                plan.featured
-                  ? 'bg-brand-600 text-white hover:bg-brand-700'
-                  : 'border border-brand-600 text-brand-600 hover:bg-brand-50'
-              "
+            <NuxtLink
+              to="/connexion"
+              class="mt-8 w-full"
+              :class="buttonClasses(pack.featured ? 'primary' : 'secondary', 'lg')"
             >
-              {{ m.pricing.plans[plan.key].cta }}
-            </a>
+              {{ m.pricing.packs[pack.key].cta }}
+            </NuxtLink>
           </article>
         </div>
-        <p class="mt-6 text-center text-sm text-ink-500">{{ m.pricing.legal }}</p>
+
+        <p class="mt-8 text-center text-sm text-ink-500">{{ m.pricing.legal }}</p>
       </div>
     </section>
 
     <!-- FAQ (+ JSON-LD FAQPage injecté via useHead) -->
-    <section class="px-6 py-16">
+    <section class="px-6 py-20 sm:py-24">
       <div class="mx-auto max-w-3xl">
-        <h2 class="text-center text-2xl font-bold sm:text-3xl">{{ m.faq.h2 }}</h2>
-        <dl class="mt-10 space-y-4">
+        <div class="text-center">
+          <p class="text-xs font-semibold uppercase tracking-widest text-brand-600">
+            {{ m.faq.eyebrow }}
+          </p>
+          <h2 class="mt-4 text-3xl font-bold tracking-tight sm:text-4xl">{{ m.faq.h2 }}</h2>
+        </div>
+        <div class="mt-12 space-y-3">
           <div
             v-for="(item, i) in m.faq.items"
             :key="i"
-            class="rounded-card border border-ink-500/20 p-5"
+            class="overflow-hidden rounded-card bg-surface ring-1 ring-border transition-shadow duration-300 ease-out"
+            :class="openFaq === i ? 'shadow-card' : ''"
           >
-            <dt class="font-semibold">{{ item.q }}</dt>
-            <dd class="mt-2 text-ink-700">{{ item.a }}</dd>
+            <h3>
+              <button
+                type="button"
+                class="flex w-full items-center justify-between gap-4 rounded-card px-5 py-4 text-left font-semibold text-ink-900 transition-colors duration-300 ease-out hover:text-brand-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand-500"
+                :aria-expanded="openFaq === i"
+                :aria-controls="`${faqUid}-panel-${i}`"
+                @click="toggleFaq(i)"
+              >
+                <span>{{ item.q }}</span>
+                <ChevronDown
+                  class="h-5 w-5 shrink-0 text-ink-500 transition-transform duration-300 ease-out"
+                  :class="openFaq === i ? 'rotate-180' : ''"
+                  :stroke-width="2"
+                  aria-hidden="true"
+                />
+              </button>
+            </h3>
+            <div
+              :id="`${faqUid}-panel-${i}`"
+              class="grid transition-[grid-template-rows] duration-300 ease-out"
+              :class="openFaq === i ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'"
+              :aria-hidden="openFaq === i ? undefined : 'true'"
+            >
+              <div class="overflow-hidden">
+                <p class="px-5 pb-5 leading-relaxed text-ink-600">{{ item.a }}</p>
+              </div>
+            </div>
           </div>
-        </dl>
+        </div>
       </div>
     </section>
 
     <!-- CTA final -->
-    <section class="bg-brand-600 px-6 py-16 text-center text-white">
-      <div class="mx-auto max-w-2xl">
-        <h2 class="text-2xl font-bold sm:text-3xl">{{ m.finalCta.h2 }}</h2>
-        <div class="mt-8 flex justify-center">
-          <MagicLinkForm id="final-email" />
+    <section
+      class="relative overflow-hidden bg-brand-600 px-6 py-20 text-center text-white sm:py-24"
+    >
+      <div
+        class="pointer-events-none absolute -bottom-32 left-1/2 h-80 w-[40rem] -translate-x-1/2 rounded-full bg-brand-500/40 blur-3xl"
+        aria-hidden="true"
+      ></div>
+      <div class="relative mx-auto max-w-2xl">
+        <h2 class="text-3xl font-bold tracking-tight sm:text-4xl">{{ m.finalCta.h2 }}</h2>
+        <div class="mt-10 flex justify-center">
+          <MagicLinkForm />
         </div>
         <p class="mt-4 text-sm text-white/80">{{ m.finalCta.trust }}</p>
       </div>
     </section>
 
     <!-- Footer -->
-    <footer class="border-t border-ink-500/20 bg-surface px-6 py-10">
+    <footer class="border-t border-border bg-surface px-6 py-10">
       <div
-        class="mx-auto flex max-w-5xl flex-col items-center gap-4 sm:flex-row sm:justify-between"
+        class="mx-auto flex max-w-6xl flex-col items-center gap-4 sm:flex-row sm:justify-between"
       >
-        <nav class="flex flex-wrap justify-center gap-x-6 gap-y-2 text-sm text-ink-700">
-          <a v-for="(l, i) in m.footer.links" :key="i" :href="l.href" class="hover:text-brand-600">
+        <nav class="flex flex-wrap justify-center gap-x-6 gap-y-2 text-sm text-ink-600">
+          <a
+            v-for="(l, i) in m.footer.links"
+            :key="i"
+            :href="l.href"
+            class="transition-colors duration-300 ease-out hover:text-brand-600"
+          >
             {{ l.label }}
           </a>
         </nav>
diff --git a/apps/app/pages/profil.vue b/apps/app/pages/profil.vue
index 7696ee9..4c083ac 100644
--- a/apps/app/pages/profil.vue
+++ b/apps/app/pages/profil.vue
@@ -1,45 +1,75 @@
 <script setup lang="ts">
-import type { ProfileDTO, ExperienceDTO, SkillDTO } from '@cvo/shared'
+import type { ProfileDTO, ExperienceDTO, SkillDTO, SkillLevel } from '@cvo/shared'
 import { SKILL_LEVELS } from '@cvo/shared'
+import {
+  Plus,
+  Trash2,
+  X,
+  Briefcase,
+  Wrench,
+  ClipboardPaste,
+  UserRound,
+} from '@lucide/vue'
 
 definePageMeta({ middleware: 'auth' })
 
-// ─── État ───────────────────────────────────────────────────────────────────
+const toast = useToast()
 
-const profile = ref<ProfileDTO | null>(null)
-const loadError = ref<string | null>(null)
-const saving = ref(false)
+// ─── Chargement du profil ────────────────────────────────────────────────────
 
-// ─── Chargement ─────────────────────────────────────────────────────────────
+const { data, status, error, refresh } = await useFetch<ProfileDTO | null>('/api/profile', {
+  lazy: true,
+})
 
-const { data, error, refresh } = await useFetch<ProfileDTO | null>('/api/profile')
-if (error.value) {
-  loadError.value = 'Impossible de charger le profil.'
-} else {
-  profile.value = data.value ?? null
-}
+const profile = computed(() => data.value ?? null)
+// Skeleton uniquement au premier chargement : les refresh suivants gardent le contenu affiché.
+const isLoading = computed(() => status.value === 'pending' && !data.value)
+
+const expCount = computed(() => profile.value?.experiences.length ?? 0)
+const skillCount = computed(() => profile.value?.skills.length ?? 0)
 
-// Formulaire en-tête
-const headline = ref(profile.value?.headline ?? '')
-const summary = ref(profile.value?.summary ?? '')
+// ─── Formulaire en-tête ──────────────────────────────────────────────────────
 
-// ─── Sauvegarde en-tête ──────────────────────────────────────────────────────
+const headline = ref('')
+const summary = ref('')
+let headerSynced = false
+
+// 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) {
+      headline.value = p.headline ?? ''
+      summary.value = p.summary ?? ''
+      headerSynced = true
+    }
+  },
+  { immediate: true },
+)
+
+const savingHeader = ref(false)
 
 async function saveHeader() {
-  saving.value = true
+  savingHeader.value = true
   try {
     const res = await $fetch<ProfileDTO>('/api/profile', {
       method: 'PUT',
       body: { headline: headline.value || null, summary: summary.value || null },
     })
-    profile.value = res
+    data.value = res
+    toast.success('En-tête enregistré', 'Ton intitulé et ton résumé sont à jour.')
+  } catch {
+    toast.error("L'enregistrement a échoué", 'Vérifie ta connexion puis réessaie.')
   } finally {
-    saving.value = false
+    savingHeader.value = false
   }
 }
 
-// ─── Expériences ────────────────────────────────────────────────────────────
+// ─── Expériences ─────────────────────────────────────────────────────────────
 
+const showExpForm = ref(false)
+const addingExp = ref(false)
 const expForm = reactive({
   title: '',
   company: '',
@@ -48,7 +78,17 @@ const expForm = reactive({
   description: '',
   skillsUsed: '',
 })
-const addingExp = ref(false)
+
+function resetExpForm() {
+  Object.assign(expForm, {
+    title: '',
+    company: '',
+    startDate: '',
+    endDate: '',
+    description: '',
+    skillsUsed: '',
+  })
+}
 
 async function addExperience() {
   addingExp.value = true
@@ -64,24 +104,42 @@ async function addExperience() {
         skillsUsed: expForm.skillsUsed.split(',').map((s) => s.trim()).filter(Boolean),
       },
     })
-    Object.assign(expForm, { title: '', company: '', startDate: '', endDate: '', description: '', skillsUsed: '' })
+    resetExpForm()
+    showExpForm.value = false
     await refresh()
-    profile.value = data.value ?? null
+    toast.success('Expérience ajoutée', 'Elle apparaît maintenant dans ton profil.')
+  } catch {
+    toast.error("L'ajout a échoué", 'Vérifie ta connexion puis réessaie.')
   } finally {
     addingExp.value = false
   }
 }
 
-async function deleteExperience(id: string) {
-  await $fetch(`/api/profile/experiences/${id}`, { method: 'DELETE' })
-  await refresh()
-  profile.value = data.value ?? null
+const periodFormatter = new Intl.DateTimeFormat('fr-FR', { month: 'short', year: 'numeric' })
+
+function formatPeriod(exp: ExperienceDTO): string | null {
+  if (!exp.startDate && !exp.endDate) return null
+  const end = exp.endDate ? periodFormatter.format(new Date(exp.endDate)) : "aujourd'hui"
+  if (!exp.startDate) return end
+  return `${periodFormatter.format(new Date(exp.startDate))} – ${end}`
 }
 
 // ─── Compétences ─────────────────────────────────────────────────────────────
 
-const skillForm = reactive({ label: '', level: '' as string, years: '' })
+const SKILL_LEVEL_LABELS: Record<SkillLevel, string> = {
+  BEGINNER: 'Débutant',
+  INTERMEDIATE: 'Intermédiaire',
+  ADVANCED: 'Avancé',
+  EXPERT: 'Expert',
+}
+
+const showSkillForm = ref(false)
 const addingSkill = ref(false)
+// `years` peut devenir un number : Vue applique le modificateur .number aux inputs type=number.
+const skillForm = reactive({ label: '', level: '' as string, years: '' as string | number })
+
+const levelSelectId = useId()
+const yearsInputId = useId()
 
 async function addSkill() {
   addingSkill.value = true
@@ -91,28 +149,69 @@ async function addSkill() {
       body: {
         label: skillForm.label,
         level: skillForm.level || null,
-        years: skillForm.years ? Number(skillForm.years) : null,
+        years: skillForm.years === '' ? null : Number(skillForm.years),
       },
     })
     Object.assign(skillForm, { label: '', level: '', years: '' })
     await refresh()
-    profile.value = data.value ?? null
+    toast.success('Compétence ajoutée')
+  } catch {
+    toast.error("L'ajout a échoué", 'Vérifie ta connexion puis réessaie.')
   } finally {
     addingSkill.value = false
   }
 }
 
-async function deleteSkill(id: string) {
-  await $fetch(`/api/profile/skills/${id}`, { method: 'DELETE' })
-  await refresh()
-  profile.value = data.value ?? null
+// ─── Suppressions (avec confirmation) ────────────────────────────────────────
+
+type DeleteTarget = { kind: 'experience' | 'skill'; 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 deleteDialogDescription = computed(() =>
+  deleteTarget.value
+    ? `« ${deleteTarget.value.label} » sera retirée de ton profil. Cette action est définitive.`
+    : '',
+)
+
+function askDeleteExperience(exp: ExperienceDTO) {
+  deleteTarget.value = { kind: 'experience', id: exp.id, label: `${exp.title} — ${exp.company}` }
+  deleteDialogOpen.value = true
 }
 
-// ─── Import copier-coller ────────────────────────────────────────────────────
+function askDeleteSkill(sk: SkillDTO) {
+  deleteTarget.value = { kind: 'skill', id: sk.id, label: sk.label }
+  deleteDialogOpen.value = true
+}
 
-const pasteText = ref('')
-const importing = ref(false)
-const importApplied = ref(false)
+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' })
+    }
+    await refresh()
+    deleteDialogOpen.value = false
+    toast.success(kind === 'experience' ? 'Expérience supprimée' : 'Compétence supprimée')
+  } catch {
+    toast.error('La suppression a échoué', 'Vérifie ta connexion puis réessaie.')
+  } finally {
+    deleting.value = false
+  }
+}
+
+// ─── Import copier-coller ────────────────────────────────────────────────────
 
 type ParsedProfile = {
   headline: string | null
@@ -121,10 +220,13 @@ type ParsedProfile = {
   skills: Omit<SkillDTO, 'id'>[]
 }
 
+const pasteText = ref('')
+const parsing = ref(false)
+const applyingImport = ref(false)
 const importResult = ref<ParsedProfile | null>(null)
 
 async function doParse() {
-  importing.value = true
+  parsing.value = true
   importResult.value = null
   try {
     const res = await $fetch<ParsedProfile>('/api/profile/import-text', {
@@ -132,14 +234,16 @@ async function doParse() {
       body: { text: pasteText.value },
     })
     importResult.value = res
+  } catch {
+    toast.error("L'analyse a échoué", 'Réessaie dans un instant, ou avec un autre texte.')
   } finally {
-    importing.value = false
+    parsing.value = false
   }
 }
 
 async function applyImport() {
   if (!importResult.value) return
-  saving.value = true
+  applyingImport.value = true
   try {
     const r = importResult.value
     await $fetch('/api/profile', {
@@ -154,220 +258,448 @@ async function applyImport() {
     }
     pasteText.value = ''
     importResult.value = null
-    importApplied.value = true
     await refresh()
-    profile.value = data.value ?? null
     headline.value = profile.value?.headline ?? ''
     summary.value = profile.value?.summary ?? ''
+    toast.success('Profil importé', 'Tes informations ont bien été enregistrées.')
+  } catch {
+    // Les écritures sont séquentielles : certaines ont pu aboutir avant l'échec.
+    await refresh()
+    toast.error(
+      "L'import a échoué",
+      'Certaines données ont pu être enregistrées — vérifie ton profil puis réessaie.',
+    )
   } finally {
-    saving.value = false
+    applyingImport.value = false
   }
 }
 </script>
 
 <template>
-  <div class="max-w-2xl mx-auto py-10 px-4 space-y-10">
-    <h1 class="text-2xl font-semibold text-ink-900">Mon profil</h1>
-
-    <p v-if="loadError" role="alert" class="text-danger-500 text-sm">{{ loadError }}</p>
-
-    <!-- ── En-tête profil ── -->
-    <section class="space-y-4">
-      <h2 class="text-lg font-medium text-ink-700">En-tête</h2>
-      <div class="space-y-3">
-        <div class="space-y-1">
-          <label for="headline" class="block text-sm font-medium text-ink-700">Intitulé de poste</label>
-          <input
-            id="headline"
-            v-model="headline"
-            type="text"
-            maxlength="150"
-            placeholder="ex. Développeur Full-Stack Vue / Node"
-            class="w-full rounded-card border border-ink-500/30 bg-surface px-3 py-2 text-sm text-ink-900 placeholder-ink-500 focus:outline-none focus:ring-2 focus:ring-brand-500"
-          />
+  <div class="mx-auto w-full max-w-3xl">
+    <!-- ── En-tête de page ── -->
+    <header>
+      <h1 class="text-2xl font-bold tracking-tight text-ink-900 sm:text-3xl">Mon profil</h1>
+      <p class="mt-2 max-w-xl text-sm leading-relaxed text-ink-500 sm:text-base">
+        Tes informations réelles, la matière première de tous tes CV. Plus ton profil est complet,
+        plus tes CV seront pertinents.
+      </p>
+
+      <div v-if="profile" class="mt-4 flex flex-wrap gap-2">
+        <span
+          class="inline-flex items-center gap-1.5 rounded-full bg-surface px-3 py-1 text-sm font-medium text-ink-600 shadow-xs ring-1 ring-border"
+        >
+          <Briefcase class="h-4 w-4 text-brand-600" :stroke-width="1.75" aria-hidden="true" />
+          {{ expCount }} {{ expCount > 1 ? 'expériences' : 'expérience' }}
+        </span>
+        <span
+          class="inline-flex items-center gap-1.5 rounded-full bg-surface px-3 py-1 text-sm font-medium text-ink-600 shadow-xs ring-1 ring-border"
+        >
+          <Wrench class="h-4 w-4 text-brand-600" :stroke-width="1.75" aria-hidden="true" />
+          {{ skillCount }} {{ skillCount > 1 ? 'compétences' : 'compétence' }}
+        </span>
+      </div>
+    </header>
+
+    <!-- ── Chargement initial : skeleton épousant les sections ── -->
+    <div v-if="isLoading" class="mt-8 space-y-6" role="status">
+      <span class="sr-only">Chargement de ton profil…</span>
+      <div class="rounded-card bg-surface p-6 shadow-card ring-1 ring-border">
+        <UiSkeleton class="mb-5 h-5 w-40" />
+        <div class="space-y-3">
+          <UiSkeleton class="h-10 w-full" />
+          <UiSkeleton class="h-24 w-full" />
+          <UiSkeleton class="h-10 w-36" />
         </div>
-        <div class="space-y-1">
-          <label for="summary" class="block text-sm font-medium text-ink-700">Résumé / accroche</label>
-          <textarea
-            id="summary"
-            v-model="summary"
-            rows="4"
-            maxlength="2000"
-            placeholder="Quelques phrases sur votre parcours et vos ambitions…"
-            class="w-full rounded-card border border-ink-500/30 bg-surface px-3 py-2 text-sm text-ink-900 placeholder-ink-500 focus:outline-none focus:ring-2 focus:ring-brand-500 resize-none"
-          />
+      </div>
+      <div class="rounded-card bg-surface p-6 shadow-card ring-1 ring-border">
+        <UiSkeleton class="mb-5 h-5 w-32" />
+        <div class="space-y-3">
+          <UiSkeleton class="h-16 w-full" />
+          <UiSkeleton class="h-16 w-full" />
         </div>
-        <button
-          :disabled="saving"
-          class="rounded-card bg-brand-600 px-4 py-2 text-sm font-medium text-white hover:bg-brand-700 disabled:opacity-50 transition-colors"
-          @click="saveHeader"
-        >
-          {{ saving ? 'Sauvegarde…' : 'Enregistrer' }}
-        </button>
       </div>
-    </section>
-
-    <!-- ── Expériences ── -->
-    <section class="space-y-4">
-      <h2 class="text-lg font-medium text-ink-700">Expériences</h2>
-
-      <ul v-if="profile?.experiences.length" class="space-y-3">
-        <li
-          v-for="exp in profile.experiences"
-          :key="exp.id"
-          class="bg-surface rounded-card border border-ink-500/20 p-4 flex justify-between gap-4"
-        >
-          <div>
-            <p class="font-medium text-ink-900">{{ exp.title }}</p>
-            <p class="text-sm text-ink-500">{{ exp.company }}</p>
+      <div class="rounded-card bg-surface p-6 shadow-card ring-1 ring-border">
+        <UiSkeleton class="mb-5 h-5 w-36" />
+        <div class="flex flex-wrap gap-2">
+          <UiSkeleton class="h-7 w-24 rounded-full" />
+          <UiSkeleton class="h-7 w-20 rounded-full" />
+          <UiSkeleton class="h-7 w-28 rounded-full" />
+          <UiSkeleton class="h-7 w-16 rounded-full" />
+        </div>
+      </div>
+    </div>
+
+    <!-- ── Erreur de chargement ── -->
+    <UiState
+      v-else-if="error"
+      variant="error"
+      title="Impossible de charger ton profil"
+      description="Une erreur est survenue. Vérifie ta connexion puis réessaie."
+      class="mt-8"
+    >
+      <UiButton variant="secondary" @click="refresh()">Réessayer</UiButton>
+    </UiState>
+
+    <!-- ── Contenu ── -->
+    <div v-else class="mt-8 space-y-10">
+      <!-- En-tête du profil -->
+      <section class="space-y-4" aria-labelledby="section-entete">
+        <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"
+          >
+            <UserRound class="h-5 w-5" :stroke-width="1.75" />
           </div>
-          <button
-            class="text-sm text-danger-500 hover:underline shrink-0"
-            @click="deleteExperience(exp.id)"
-          >Supprimer</button>
-        </li>
-      </ul>
-      <p v-else class="text-sm text-ink-500">Aucune expérience saisie.</p>
-
-      <!-- Formulaire ajout -->
-      <details class="rounded-card border border-ink-500/20 bg-surface-muted">
-        <summary class="cursor-pointer px-4 py-3 text-sm font-medium text-ink-700 select-none">
-          + Ajouter une expérience
-        </summary>
-        <div class="px-4 pb-4 pt-2 space-y-3">
-          <input v-model="expForm.title" type="text" placeholder="Titre du poste *" required
-            class="w-full rounded-card border border-ink-500/30 bg-surface px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-brand-500" />
-          <input v-model="expForm.company" type="text" placeholder="Entreprise *" required
-            class="w-full rounded-card border border-ink-500/30 bg-surface px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-brand-500" />
-          <div class="grid grid-cols-2 gap-3">
-            <input v-model="expForm.startDate" type="date" aria-label="Date de début"
-              class="w-full rounded-card border border-ink-500/30 bg-surface px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-brand-500" />
-            <input v-model="expForm.endDate" type="date" aria-label="Date de fin (vide = en cours)"
-              class="w-full rounded-card border border-ink-500/30 bg-surface px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-brand-500" />
+          <div>
+            <h2 id="section-entete" class="text-lg font-semibold text-ink-900">En-tête du profil</h2>
+            <p class="text-sm text-ink-500">Ton intitulé et ton accroche, repris en haut de tes CV.</p>
           </div>
-          <textarea v-model="expForm.description" rows="3" placeholder="Description (optionnel)"
-            class="w-full rounded-card border border-ink-500/30 bg-surface px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-brand-500 resize-none" />
-          <input v-model="expForm.skillsUsed" type="text" placeholder="Compétences utilisées (séparées par des virgules)"
-            class="w-full rounded-card border border-ink-500/30 bg-surface px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-brand-500" />
-          <button
-            :disabled="addingExp || !expForm.title || !expForm.company"
-            class="rounded-card bg-brand-600 px-4 py-2 text-sm font-medium text-white hover:bg-brand-700 disabled:opacity-50 transition-colors"
-            @click="addExperience"
-          >
-            {{ addingExp ? 'Ajout…' : 'Ajouter' }}
-          </button>
         </div>
-      </details>
-    </section>
-
-    <!-- ── Compétences ── -->
-    <section class="space-y-4">
-      <h2 class="text-lg font-medium text-ink-700">Compétences</h2>
-      <p class="text-xs text-ink-500">
-        Saisissez uniquement vos <strong>compétences réelles</strong> — elles seront la source de vérité du moteur de génération.
-      </p>
 
-      <ul v-if="profile?.skills.length" class="flex flex-wrap gap-2">
-        <li
-          v-for="sk in profile.skills"
-          :key="sk.id"
-          class="flex items-center gap-1 rounded-full bg-brand-100 px-3 py-1 text-sm text-brand-700"
-        >
-          <span>{{ sk.label }}</span>
-          <span v-if="sk.level" class="text-xs text-brand-500">({{ sk.level.toLowerCase() }})</span>
-          <button class="text-brand-500 hover:text-danger-500 ml-1 text-xs" @click="deleteSkill(sk.id)">✕</button>
-        </li>
-      </ul>
-      <p v-else class="text-sm text-ink-500">Aucune compétence saisie.</p>
-
-      <!-- Formulaire ajout compétence -->
-      <details class="rounded-card border border-ink-500/20 bg-surface-muted">
-        <summary class="cursor-pointer px-4 py-3 text-sm font-medium text-ink-700 select-none">
-          + Ajouter une compétence
-        </summary>
-        <div class="px-4 pb-4 pt-2 space-y-3">
-          <input v-model="skillForm.label" type="text" placeholder="Compétence (ex. TypeScript) *" required
-            class="w-full rounded-card border border-ink-500/30 bg-surface px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-brand-500" />
-          <div class="grid grid-cols-2 gap-3">
-            <select v-model="skillForm.level"
-              class="w-full rounded-card border border-ink-500/30 bg-surface px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-brand-500">
-              <option value="">Niveau (optionnel)</option>
-              <option v-for="l in SKILL_LEVELS" :key="l" :value="l">{{ l.charAt(0) + l.slice(1).toLowerCase() }}</option>
-            </select>
-            <input v-model="skillForm.years" type="number" min="0" max="50" placeholder="Années (optionnel)"
-              class="w-full rounded-card border border-ink-500/30 bg-surface px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-brand-500" />
+        <UiCard>
+          <form class="space-y-4" @submit.prevent="saveHeader">
+            <UiInput
+              v-model="headline"
+              label="Intitulé de poste"
+              placeholder="ex. Développeur Full-Stack Vue / Node"
+            />
+            <UiTextarea
+              v-model="summary"
+              label="Résumé / accroche"
+              :rows="4"
+              placeholder="Quelques phrases sur ton parcours et tes ambitions…"
+            />
+            <div class="flex justify-end">
+              <UiButton type="submit" :loading="savingHeader">Enregistrer</UiButton>
+            </div>
+          </form>
+        </UiCard>
+      </section>
+
+      <!-- Expériences -->
+      <section class="space-y-4" aria-labelledby="section-experiences">
+        <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"
+            >
+              <Briefcase class="h-5 w-5" :stroke-width="1.75" />
+            </div>
+            <div>
+              <h2 id="section-experiences" class="text-lg font-semibold text-ink-900">Expériences</h2>
+              <p class="text-sm text-ink-500">Tes postes passés et actuels.</p>
+            </div>
           </div>
-          <button
-            :disabled="addingSkill || !skillForm.label"
-            class="rounded-card bg-brand-600 px-4 py-2 text-sm font-medium text-white hover:bg-brand-700 disabled:opacity-50 transition-colors"
-            @click="addSkill"
-          >
-            {{ addingSkill ? 'Ajout…' : 'Ajouter' }}
-          </button>
+          <UiButton v-if="!showExpForm" variant="secondary" size="sm" @click="showExpForm = true">
+            <Plus class="h-4 w-4" :stroke-width="2" aria-hidden="true" />
+            Ajouter une expérience
+          </UiButton>
         </div>
-      </details>
-    </section>
-
-    <!-- ── Import copier-coller ── -->
-    <section class="space-y-4">
-      <h2 class="text-lg font-medium text-ink-700">Import par copier-coller</h2>
-      <p class="text-sm text-ink-500">
-        Copiez le texte de votre CV ou LinkedIn et collez-le ici. Une suggestion de profil sera générée
-        pour relecture — <strong>rien n'est enregistré avant votre confirmation</strong>.
-      </p>
 
-      <textarea
-        v-model="pasteText"
-        rows="8"
-        placeholder="Collez ici votre CV ou profil LinkedIn en texte brut…"
-        class="w-full rounded-card border border-ink-500/30 bg-surface px-3 py-2 text-sm text-ink-900 placeholder-ink-500 focus:outline-none focus:ring-2 focus:ring-brand-500 resize-y"
-      />
-
-      <button
-        :disabled="importing || pasteText.length < 10"
-        class="rounded-card bg-brand-600 px-4 py-2 text-sm font-medium text-white hover:bg-brand-700 disabled:opacity-50 transition-colors"
-        @click="doParse"
-      >
-        {{ importing ? 'Analyse…' : 'Analyser le texte' }}
-      </button>
-
-      <!-- Résultat de l'analyse -->
-      <div v-if="importResult" class="rounded-card border border-brand-100 bg-brand-50 p-4 space-y-3">
-        <p class="text-sm font-medium text-brand-700">Relecture avant enregistrement</p>
-        <div v-if="importResult.headline" class="text-sm text-ink-700">
-          <span class="font-medium">Intitulé :</span> {{ importResult.headline }}
-        </div>
-        <div v-if="importResult.summary" class="text-sm text-ink-700">
-          <span class="font-medium">Résumé :</span> {{ importResult.summary }}
+        <ul v-if="profile?.experiences.length" class="space-y-3">
+          <li
+            v-for="exp in profile.experiences"
+            :key="exp.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">{{ exp.title }}</p>
+              <p class="text-sm text-ink-600">{{ exp.company }}</p>
+              <p v-if="formatPeriod(exp)" class="mt-0.5 text-sm text-ink-500">
+                {{ formatPeriod(exp) }}
+              </p>
+              <p v-if="exp.description" class="mt-2 text-sm leading-relaxed text-ink-600 line-clamp-3">
+                {{ exp.description }}
+              </p>
+              <ul v-if="exp.skillsUsed.length" class="mt-2.5 flex flex-wrap gap-1.5">
+                <li v-for="s in exp.skillsUsed" :key="s">
+                  <UiBadge variant="neutral">{{ s }}</UiBadge>
+                </li>
+              </ul>
+            </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 l'expérience ${exp.title}`"
+              @click="askDeleteExperience(exp)"
+            >
+              <Trash2 class="h-4 w-4" :stroke-width="1.75" aria-hidden="true" />
+            </button>
+          </li>
+        </ul>
+        <div
+          v-else-if="!showExpForm"
+          class="flex flex-col items-center gap-2 rounded-card border border-dashed border-border-strong bg-surface px-6 py-8 text-center"
+        >
+          <Briefcase 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 expérience pour l'instant. Ajoute ta première expérience : c'est elle qui
+            nourrira tes CV.
+          </p>
         </div>
-        <div v-if="importResult.experiences.length">
-          <p class="text-sm font-medium text-ink-700">{{ importResult.experiences.length }} expérience(s) détectée(s)</p>
-          <ul class="text-xs text-ink-500 list-disc list-inside">
-            <li v-for="(e, i) in importResult.experiences" :key="i">{{ e.title }} — {{ e.company }}</li>
-          </ul>
+
+        <UiCard v-if="showExpForm" class="animate-fade-up">
+          <form class="space-y-4" @submit.prevent="addExperience">
+            <UiInput
+              v-model="expForm.title"
+              label="Intitulé du poste"
+              required
+              placeholder="ex. Chargée de clientèle"
+            />
+            <UiInput
+              v-model="expForm.company"
+              label="Entreprise"
+              required
+              placeholder="ex. Acme"
+            />
+            <div class="grid gap-4 sm:grid-cols-2">
+              <UiInput v-model="expForm.startDate" type="date" label="Date de début" />
+              <UiInput
+                v-model="expForm.endDate"
+                type="date"
+                label="Date de fin"
+                hint="Laisse vide si c'est ton poste actuel."
+              />
+            </div>
+            <UiTextarea
+              v-model="expForm.description"
+              label="Description"
+              :rows="3"
+              placeholder="Missions, résultats, contexte… (optionnel)"
+            />
+            <UiInput
+              v-model="expForm.skillsUsed"
+              label="Compétences mobilisées"
+              placeholder="ex. Relation client, Excel, Anglais"
+              hint="Sépare-les par des virgules."
+            />
+            <div class="flex flex-wrap justify-end gap-3">
+              <UiButton variant="ghost" :disabled="addingExp" @click="showExpForm = false">
+                Annuler
+              </UiButton>
+              <UiButton
+                type="submit"
+                :loading="addingExp"
+                :disabled="!expForm.title.trim() || !expForm.company.trim()"
+              >
+                Ajouter l'expérience
+              </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">
+          <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"
+            >
+              <Wrench class="h-5 w-5" :stroke-width="1.75" />
+            </div>
+            <div>
+              <h2 id="section-competences" class="text-lg font-semibold text-ink-900">Compétences</h2>
+              <p class="text-sm text-ink-500">
+                Uniquement tes compétences réelles : elles font foi pour la génération de tes CV.
+              </p>
+            </div>
+          </div>
+          <UiButton v-if="!showSkillForm" variant="secondary" size="sm" @click="showSkillForm = true">
+            <Plus class="h-4 w-4" :stroke-width="2" aria-hidden="true" />
+            Ajouter une compétence
+          </UiButton>
         </div>
-        <div v-if="importResult.skills.length">
-          <p class="text-sm font-medium text-ink-700">{{ importResult.skills.length }} compétence(s) détectée(s)</p>
-          <p class="text-xs text-ink-500">{{ importResult.skills.map((s) => s.label).join(', ') }}</p>
+
+        <ul v-if="profile?.skills.length" class="flex flex-wrap gap-2">
+          <li v-for="sk in profile.skills" :key="sk.id">
+            <UiBadge variant="brand" class="group pr-1.5">
+              <span>{{ sk.label }}</span>
+              <span v-if="sk.level" class="font-normal text-brand-500">
+                · {{ SKILL_LEVEL_LABELS[sk.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 compétence ${sk.label}`"
+                @click="askDeleteSkill(sk)"
+              >
+                <X class="h-3.5 w-3.5" :stroke-width="2" aria-hidden="true" />
+              </button>
+            </UiBadge>
+          </li>
+        </ul>
+        <div
+          v-else-if="!showSkillForm"
+          class="flex flex-col items-center gap-2 rounded-card border border-dashed border-border-strong bg-surface px-6 py-8 text-center"
+        >
+          <Wrench 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 compétence pour l'instant. Ajoute celles que tu maîtrises vraiment.
+          </p>
         </div>
-        <div class="flex gap-3">
-          <button
-            :disabled="saving"
-            class="rounded-card bg-success-500 px-4 py-2 text-sm font-medium text-white hover:opacity-90 disabled:opacity-50 transition-colors"
-            @click="applyImport"
-          >
-            {{ saving ? 'Enregistrement…' : 'Confirmer et enregistrer' }}
-          </button>
-          <button
-            class="rounded-card border border-ink-500/30 px-4 py-2 text-sm text-ink-700 hover:bg-surface-muted transition-colors"
-            @click="importResult = null"
+
+        <UiCard v-if="showSkillForm" class="animate-fade-up">
+          <form class="space-y-4" @submit.prevent="addSkill">
+            <UiInput
+              v-model="skillForm.label"
+              label="Compétence"
+              required
+              placeholder="ex. Gestion de projet"
+            />
+            <div class="grid gap-4 sm:grid-cols-2">
+              <div class="flex flex-col gap-1.5">
+                <label :for="levelSelectId" class="text-sm font-medium text-ink-700">Niveau</label>
+                <select
+                  :id="levelSelectId"
+                  v-model="skillForm.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 SKILL_LEVELS" :key="l" :value="l">
+                    {{ SKILL_LEVEL_LABELS[l] }}
+                  </option>
+                </select>
+              </div>
+              <div class="flex flex-col gap-1.5">
+                <label :for="yearsInputId" class="text-sm font-medium text-ink-700">
+                  Années de pratique
+                </label>
+                <input
+                  :id="yearsInputId"
+                  v-model="skillForm.years"
+                  type="number"
+                  min="0"
+                  max="50"
+                  placeholder="ex. 3"
+                  class="h-10 w-full rounded-control bg-surface px-3 text-sm text-ink-900 ring-1 ring-border transition placeholder:text-ink-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500"
+                />
+              </div>
+            </div>
+            <div class="flex flex-wrap justify-end gap-3">
+              <UiButton variant="ghost" :disabled="addingSkill" @click="showSkillForm = false">
+                Annuler
+              </UiButton>
+              <UiButton type="submit" :loading="addingSkill" :disabled="!skillForm.label.trim()">
+                Ajouter la compétence
+              </UiButton>
+            </div>
+          </form>
+        </UiCard>
+      </section>
+
+      <!-- Import copier-coller -->
+      <section class="space-y-4" aria-labelledby="section-import">
+        <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"
           >
-            Annuler
-          </button>
+            <ClipboardPaste class="h-5 w-5" :stroke-width="1.75" />
+          </div>
+          <div>
+            <h2 id="section-import" class="text-lg font-semibold text-ink-900">Import express</h2>
+            <p class="text-sm text-ink-500">
+              Colle le texte de ton CV ou de ton profil LinkedIn : on te propose une suggestion à
+              relire. Rien n'est enregistré sans ta confirmation.
+            </p>
+          </div>
         </div>
-      </div>
 
-      <p v-if="importApplied" class="text-sm text-success-500">✓ Profil importé et enregistré.</p>
-    </section>
+        <UiCard>
+          <form class="space-y-4" @submit.prevent="doParse">
+            <UiTextarea
+              v-model="pasteText"
+              label="Texte de ton CV ou profil LinkedIn"
+              :rows="8"
+              placeholder="Colle ici ton CV ou ton profil LinkedIn en texte brut…"
+            />
+            <div class="flex justify-end">
+              <UiButton
+                type="submit"
+                variant="secondary"
+                :loading="parsing"
+                :disabled="pasteText.length < 10"
+              >
+                Analyser le texte
+              </UiButton>
+            </div>
+          </form>
+
+          <!-- Relecture avant enregistrement -->
+          <div
+            v-if="importResult"
+            class="mt-4 animate-fade-up space-y-4 rounded-card bg-brand-50 p-4 ring-1 ring-brand-200 sm:p-5"
+          >
+            <div class="flex flex-wrap items-center gap-2">
+              <UiBadge variant="brand">Relecture</UiBadge>
+              <p class="text-sm font-medium text-brand-700">
+                Vérifie la suggestion : rien n'est encore enregistré.
+              </p>
+            </div>
+
+            <p v-if="importResult.headline" class="text-sm text-ink-700">
+              <span class="font-semibold">Intitulé :</span> {{ importResult.headline }}
+            </p>
+            <p v-if="importResult.summary" class="text-sm leading-relaxed text-ink-700">
+              <span class="font-semibold">Résumé :</span> {{ importResult.summary }}
+            </p>
+
+            <div v-if="importResult.experiences.length" class="space-y-1.5">
+              <p class="text-sm font-semibold text-ink-700">
+                {{ importResult.experiences.length }}
+                {{ importResult.experiences.length > 1 ? 'expériences détectées' : 'expérience détectée' }}
+              </p>
+              <ul class="space-y-1">
+                <li
+                  v-for="(e, i) in importResult.experiences"
+                  :key="i"
+                  class="flex items-center gap-2 text-sm text-ink-600"
+                >
+                  <Briefcase class="h-3.5 w-3.5 shrink-0 text-brand-500" :stroke-width="1.75" aria-hidden="true" />
+                  {{ e.title }} — {{ e.company }}
+                </li>
+              </ul>
+            </div>
+
+            <div v-if="importResult.skills.length" class="space-y-1.5">
+              <p class="text-sm font-semibold text-ink-700">
+                {{ importResult.skills.length }}
+                {{ importResult.skills.length > 1 ? 'compétences détectées' : 'compétence détectée' }}
+              </p>
+              <ul class="flex flex-wrap gap-1.5">
+                <li v-for="(s, i) in importResult.skills" :key="i">
+                  <UiBadge variant="neutral">{{ s.label }}</UiBadge>
+                </li>
+              </ul>
+            </div>
+
+            <div class="flex flex-wrap justify-end gap-3 pt-1">
+              <UiButton variant="ghost" :disabled="applyingImport" @click="importResult = null">
+                Annuler
+              </UiButton>
+              <UiButton :loading="applyingImport" @click="applyImport">
+                Confirmer et enregistrer
+              </UiButton>
+            </div>
+          </div>
+        </UiCard>
+      </section>
+    </div>
+
+    <!-- ── Confirmation de suppression ── -->
+    <UiDialog
+      v-model:open="deleteDialogOpen"
+      :title="deleteDialogTitle"
+      :description="deleteDialogDescription"
+      confirm-label="Supprimer"
+      variant="danger"
+      :loading="deleting"
+      @confirm="confirmDelete"
+    />
   </div>
 </template>
diff --git a/apps/app/pages/ui.vue b/apps/app/pages/ui.vue
index 3b49a27..9a49dcb 100644
--- a/apps/app/pages/ui.vue
+++ b/apps/app/pages/ui.vue
@@ -1,7 +1,32 @@
 <script setup lang="ts">
-// Catalogue léger du design system — référence visuelle + QA manuelle des composants.
-// Les WS profil/génération consomment ces mêmes composants.
+// 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)
 
@@ -9,15 +34,178 @@ 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="flex flex-col gap-10">
     <header>
-      <h1 class="text-2xl font-bold text-ink-900">Design system</h1>
-      <p class="mt-1 text-ink-500">Tokens Tailwind + composants UI de base (THI-127).</p>
+      <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>
 
+    <!-- ─── 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>
@@ -31,9 +219,14 @@ function simulate() {
         <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
@@ -42,12 +235,47 @@ function simulate() {
           required
           hint="Tel qu'il apparaîtra sur le CV."
         />
-        <UiInput v-model="sampleName" label="Email" type="email" error="Adresse email invalide." />
+        <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." />
@@ -63,5 +291,74 @@ function simulate() {
         </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>
 </template>
diff --git a/apps/app/public/favicon.svg b/apps/app/public/favicon.svg
new file mode 100644
index 0000000..b7ad32e
--- /dev/null
+++ b/apps/app/public/favicon.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <rect width="64" height="64" rx="14" fill="#4f46e5"/>
+  <path d="M18 22h28v7h-10v20h-8V29H18z" fill="#ffffff"/>
+  <rect x="18" y="14" width="28" height="4" rx="2" fill="#c7d2fe"/>
+</svg>
diff --git a/apps/app/test/button-classes.spec.ts b/apps/app/test/button-classes.spec.ts
index a066fb3..77e42ef 100644
--- a/apps/app/test/button-classes.spec.ts
+++ b/apps/app/test/button-classes.spec.ts
@@ -9,9 +9,9 @@ describe('buttonClasses', () => {
   })
 
   it('maps each variant to its brand-token classes', () => {
-    expect(buttonClasses('secondary')).toContain('ring-border')
+    expect(buttonClasses('secondary')).toContain('ring-border-strong')
     expect(buttonClasses('ghost')).toContain('bg-transparent')
-    expect(buttonClasses('danger')).toContain('bg-danger-500')
+    expect(buttonClasses('danger')).toContain('bg-danger-600')
   })
 
   it('maps each size to its dimensions', () => {
diff --git a/apps/app/test/usage.spec.ts b/apps/app/test/usage.spec.ts
index 2088325..bf082a1 100644
--- a/apps/app/test/usage.spec.ts
+++ b/apps/app/test/usage.spec.ts
@@ -81,6 +81,6 @@ describe('buildUsageSummary', () => {
     expect(summary.counter.generation).toBe(5)
     expect(summary.quotas.map((q) => q.type)).toEqual(['generation', 'export_pdf', 'extraction'])
     const gen = summary.quotas.find((q) => q.type === 'generation')!
-    expect(gen.exceeded).toBe(true) // 5/5 atteint
+    expect(gen.exceeded).toBe(true) // 5 utilisées ≥ quota gratuit (2)
   })
 })
diff --git a/packages/shared/src/usage.ts b/packages/shared/src/usage.ts
index 1e2ea80..3bfa86e 100644
--- a/packages/shared/src/usage.ts
+++ b/packages/shared/src/usage.ts
@@ -2,8 +2,9 @@
  * Metering & quotas (THI-126) — contrats partagés client ↔ serveur (Nitro).
  *
  * On mesure l'usage DÈS le MVP même si tout est gratuit, pour préparer le billing
- * freemium (abo ~9–15 €/mois). Pas de paywall Stripe au MVP : les quotas sont
- * paramétrables et appliqués côté serveur, mais aucune facturation n'est branchée.
+ * à crédits (2 générations offertes puis packs — voir config/pricing.ts). Pas de
+ * paywall Stripe au MVP : les quotas sont paramétrables et appliqués côté serveur,
+ * mais aucune facturation n'est branchée.
  *
  * Les fonctions de ce module sont PURES (aucun accès base / framework) → testables
  * unitairement et réutilisables côté front pour afficher l'usage courant.
@@ -58,12 +59,13 @@ export const EMPTY_USAGE_SNAPSHOT: UsageCounterSnapshot = {
 export type UsageQuotas = Partial<Record<UsageEventType, number>>
 
 /**
- * Palier gratuit du MVP. Pas de paywall : on autorise quelques générations/exports
- * gratuits par mois. À surcharger via config quand le billing freemium arrivera.
+ * Palier gratuit — modèle acté (2026-06) : 2 générations offertes pour tester,
+ * ensuite achat de crédits (config/pricing.ts). Les exports PDF sont plus larges
+ * (ré-export d'un CV déjà généré) mais bornés pour éviter l'abus de Chromium.
  */
 export const FREE_TIER_QUOTAS: UsageQuotas = {
-  generation: 5,
-  export_pdf: 5,
+  generation: 2,
+  export_pdf: 4,
 }
 
 /** État d'un quota pour un type donné, à afficher / à appliquer. */
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b3d035e..cb23ad9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -35,6 +35,9 @@ importers:
       '@cvo/shared':
         specifier: workspace:*
         version: link:../../packages/shared
+      '@lucide/vue':
+        specifier: ^1.17.0
+        version: 1.17.0(vue@3.5.35(typescript@5.9.3))
       '@prisma/client':
         specifier: ^6.2.1
         version: 6.19.3(prisma@6.19.3(magicast@0.5.3)(typescript@5.9.3))(typescript@5.9.3)
@@ -51,6 +54,9 @@ importers:
         specifier: ^4.4.3
         version: 4.4.3
     devDependencies:
+      '@nuxt/fonts':
+        specifier: ^0.14.0
+        version: 0.14.0(db0@0.3.4)(ioredis@5.11.1)(magicast@0.5.3)(vite@7.3.5(@types/node@22.19.20)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.48.0)(yaml@2.9.0))
       '@tailwindcss/vite':
         specifier: ^4.0.0
         version: 4.3.0(vite@7.3.5(@types/node@22.19.20)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.48.0)(yaml@2.9.0))
@@ -301,6 +307,10 @@ packages:
       commander:
         optional: true
 
+  '@capsizecss/unpack@4.0.0':
+    resolution: {integrity: sha512-VERIM64vtTP1C4mxQ5thVT9fK0apjPFobqybMtA1UdUujWka24ERHbRHFGmpbbhp73MhV+KSsHQH9C6uOTdEQA==}
+    engines: {node: '>=18'}
+
   '@clack/core@1.4.1':
     resolution: {integrity: sha512-FILJa1gGKEFTGZAJE9RpVhrjKz3c3h4ar60dSv6cGuDqufQ84YEIS3GAGvZiN+H6yaLbbvTFNejjCC4tXpZEuw==}
     engines: {node: '>= 20.12.0'}
@@ -742,6 +752,11 @@ packages:
   '@kwsites/promise-deferred@1.1.1':
     resolution: {integrity: sha512-GaHYm+c0O9MjZRu0ongGBRbinu8gVAMd2UZjji6jVmqKtZluZnptXGWhz1E8j8D2HJ3f/yMxKAUC0b+57wncIw==}
 
+  '@lucide/vue@1.17.0':
+    resolution: {integrity: sha512-6Q1ZHgr5FbmJzKWe5BxlNdjLj2lbmuH1zwDtVzUJofX0w9UREwKgq4F4jwKqFYyyIS4Rj3FiJvDi2k6djukmmw==}
+    peerDependencies:
+      vue: '>=3.0.1'
+
   '@mapbox/node-pre-gyp@2.0.3':
     resolution: {integrity: sha512-uwPAhccfFJlsfCxMYTwOdVfOz3xqyj8xYL3zJj8f0pb30tLohnnFPhLuqp4/qoEz8sNxe4SESZedcBojRefIzg==}
     engines: {node: '>=18'}
@@ -805,6 +820,9 @@ packages:
       '@vitejs/devtools':
         optional: true
 
+  '@nuxt/fonts@0.14.0':
+    resolution: {integrity: sha512-4uXQl9fa5F4ibdgU8zomoOcyMdnwgdem+Pi8JEqeDYI5yPR32Kam6HnuRr47dTb97CstaepAvXPWQUUHMtjsFQ==}
+
   '@nuxt/kit@3.21.8':
     resolution: {integrity: sha512-kg63DUPY5AHPn+9XM7u8rYcdWHXjzwfUscgRDuiC5YUciQ+xdLRhdwXelYFxEAx2nxJHossliiQXbMm/Fleivw==}
     engines: {node: '>=18.12.0'}
@@ -2718,6 +2736,23 @@ packages:
   flatted@3.4.2:
     resolution: {integrity: sha512-PjDse7RzhcPkIJwy5t7KPWQSZ9cAbzQXcafsetQoD7sOJRQlGikNbx7yZp2OotDnJyrDcbyRq3Ttb18iYOqkxA==}
 
+  fontaine@0.8.0:
+    resolution: {integrity: sha512-eek1GbzOdWIj9FyQH/emqW1aEdfC3lYRCHepzwlFCm5T77fBSRSyNRKE6/antF1/B1M+SfJXVRQTY9GAr7lnDg==}
+    engines: {node: '>=18.12.0'}
+
+  fontkitten@1.0.3:
+    resolution: {integrity: sha512-Wp1zXWPVUPBmfoa3Cqc9ctaKuzKAV6uLstRqlR56kSjplf5uAce+qeyYym7F+PHbGTk+tCEdkCW6RD7DX/gBZw==}
+    engines: {node: '>=20'}
+
+  fontless@0.2.1:
+    resolution: {integrity: sha512-mUWZ8w91/mw2KEcZ6gHNoNNmsAq9Wiw2IypIux5lM03nhXm+WSloXGUNuRETNTLqZexMgpt7Aj/v63qqrsWraQ==}
+    engines: {node: '>=18.12.0'}
+    peerDependencies:
+      vite: '*'
+    peerDependenciesMeta:
+      vite:
+        optional: true
+
   foreground-child@3.3.1:
     resolution: {integrity: sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==}
     engines: {node: '>=14'}
@@ -3139,6 +3174,9 @@ packages:
   lru-cache@5.1.1:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
 
+  magic-regexp@0.10.0:
+    resolution: {integrity: sha512-Uly1Bu4lO1hwHUW0CQeSWuRtzCMNO00CmXtS8N6fyvB3B979GOEEeAkiTUDsmbYLAbvpUS/Kt5c4ibosAzVyVg==}
+
   magic-regexp@0.11.0:
     resolution: {integrity: sha512-LG77Z/gVnwz7oaDpD4heX6ryl+lcr4l1B2gnP4MMvt2pGhGC1Dfj7dl1pXpP4ih+VQFLuAadeKVa+lARAzfW+Q==}
 
@@ -4001,6 +4039,9 @@ packages:
   text-decoder@1.2.7:
     resolution: {integrity: sha512-vlLytXkeP4xvEq2otHeJfSQIRyWxo/oZGEbXrtEEF9Hnmrdly59sUbzZ/QgyWuLYHctCHxFF4tRQZNQ9k60ExQ==}
 
+  tiny-inflate@1.0.3:
+    resolution: {integrity: sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==}
+
   tiny-invariant@1.3.3:
     resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==}
 
@@ -4114,6 +4155,9 @@ packages:
     resolution: {integrity: sha512-wH590V9VNgYH9g3lH9wWjTrUoKsjLF6sGLjhR4sH1LWpLmCOH0Zf7PukhDA8BiS7KHe4oPNkcTHqYkj7SOGUOw==}
     engines: {node: '>=20'}
 
+  unifont@0.7.4:
+    resolution: {integrity: sha512-oHeis4/xl42HUIeHuNZRGEvxj5AaIKR+bHPNegRq5LV1gdc3jundpONbjglKpihmJf+dswygdMJn3eftGIMemg==}
+
   unimport@6.3.0:
     resolution: {integrity: sha512-M+Dxk5W9WRd+8j56W9tp8lGW/dmMc7g5zj7BWQnEjKQhryBstqsi1V0izb0zHwSkEN8cSYV7K75/bykairV2tA==}
     engines: {node: '>=18.12.0'}
@@ -4740,6 +4784,10 @@ snapshots:
       cac: 6.7.14
       citty: 0.2.2
 
+  '@capsizecss/unpack@4.0.0':
+    dependencies:
+      fontkitten: 1.0.3
+
   '@clack/core@1.4.1':
     dependencies:
       fast-wrap-ansi: 0.2.2
@@ -5051,6 +5099,10 @@ snapshots:
 
   '@kwsites/promise-deferred@1.1.1': {}
 
+  '@lucide/vue@1.17.0(vue@3.5.35(typescript@5.9.3))':
+    dependencies:
+      vue: 3.5.35(typescript@5.9.3)
+
   '@mapbox/node-pre-gyp@2.0.3':
     dependencies:
       consola: 3.4.2
@@ -5187,6 +5239,46 @@ snapshots:
       - utf-8-validate
       - vue
 
+  '@nuxt/fonts@0.14.0(db0@0.3.4)(ioredis@5.11.1)(magicast@0.5.3)(vite@7.3.5(@types/node@22.19.20)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.48.0)(yaml@2.9.0))':
+    dependencies:
+      '@nuxt/devtools-kit': 3.2.4(magicast@0.5.3)(vite@7.3.5(@types/node@22.19.20)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.48.0)(yaml@2.9.0))
+      '@nuxt/kit': 4.4.8(magicast@0.5.3)
+      consola: 3.4.2
+      defu: 6.1.7
+      fontless: 0.2.1(db0@0.3.4)(ioredis@5.11.1)(vite@7.3.5(@types/node@22.19.20)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.48.0)(yaml@2.9.0))
+      h3: 1.15.11
+      magic-regexp: 0.10.0
+      ofetch: 1.5.1
+      pathe: 2.0.3
+      sirv: 3.0.2
+      tinyglobby: 0.2.17
+      ufo: 1.6.4
+      unifont: 0.7.4
+      unplugin: 3.0.0
+      unstorage: 1.17.5(db0@0.3.4)(ioredis@5.11.1)
+    transitivePeerDependencies:
+      - '@azure/app-configuration'
+      - '@azure/cosmos'
+      - '@azure/data-tables'
+      - '@azure/identity'
+      - '@azure/keyvault-secrets'
+      - '@azure/storage-blob'
+      - '@capacitor/preferences'
+      - '@deno/kv'
+      - '@netlify/blobs'
+      - '@planetscale/database'
+      - '@upstash/redis'
+      - '@vercel/blob'
+      - '@vercel/functions'
+      - '@vercel/kv'
+      - aws4fetch
+      - db0
+      - idb-keyval
+      - ioredis
+      - magicast
+      - uploadthing
+      - vite
+
   '@nuxt/kit@3.21.8(magicast@0.5.3)':
     dependencies:
       c12: 3.3.4(magicast@0.5.3)
@@ -7098,6 +7190,58 @@ snapshots:
 
   flatted@3.4.2: {}
 
+  fontaine@0.8.0:
+    dependencies:
+      '@capsizecss/unpack': 4.0.0
+      css-tree: 3.2.1
+      magic-regexp: 0.10.0
+      magic-string: 0.30.21
+      pathe: 2.0.3
+      ufo: 1.6.4
+      unplugin: 2.3.11
+
+  fontkitten@1.0.3:
+    dependencies:
+      tiny-inflate: 1.0.3
+
+  fontless@0.2.1(db0@0.3.4)(ioredis@5.11.1)(vite@7.3.5(@types/node@22.19.20)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.48.0)(yaml@2.9.0)):
+    dependencies:
+      consola: 3.4.2
+      css-tree: 3.2.1
+      defu: 6.1.7
+      esbuild: 0.27.7
+      fontaine: 0.8.0
+      jiti: 2.7.0
+      lightningcss: 1.32.0
+      magic-string: 0.30.21
+      ohash: 2.0.11
+      pathe: 2.0.3
+      ufo: 1.6.4
+      unifont: 0.7.4
+      unstorage: 1.17.5(db0@0.3.4)(ioredis@5.11.1)
+    optionalDependencies:
+      vite: 7.3.5(@types/node@22.19.20)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.48.0)(yaml@2.9.0)
+    transitivePeerDependencies:
+      - '@azure/app-configuration'
+      - '@azure/cosmos'
+      - '@azure/data-tables'
+      - '@azure/identity'
+      - '@azure/keyvault-secrets'
+      - '@azure/storage-blob'
+      - '@capacitor/preferences'
+      - '@deno/kv'
+      - '@netlify/blobs'
+      - '@planetscale/database'
+      - '@upstash/redis'
+      - '@vercel/blob'
+      - '@vercel/functions'
+      - '@vercel/kv'
+      - aws4fetch
+      - db0
+      - idb-keyval
+      - ioredis
+      - uploadthing
+
   foreground-child@3.3.1:
     dependencies:
       cross-spawn: 7.0.6
@@ -7476,6 +7620,16 @@ snapshots:
     dependencies:
       yallist: 3.1.1
 
+  magic-regexp@0.10.0:
+    dependencies:
+      estree-walker: 3.0.3
+      magic-string: 0.30.21
+      mlly: 1.8.2
+      regexp-tree: 0.1.27
+      type-level-regexp: 0.1.17
+      ufo: 1.6.4
+      unplugin: 2.3.11
+
   magic-regexp@0.11.0:
     dependencies:
       magic-string: 0.30.21
@@ -8569,6 +8723,8 @@ snapshots:
     transitivePeerDependencies:
       - react-native-b4a
 
+  tiny-inflate@1.0.3: {}
+
   tiny-invariant@1.3.3: {}
 
   tinybench@2.9.0: {}
@@ -8659,6 +8815,12 @@ snapshots:
 
   unicorn-magic@0.4.0: {}
 
+  unifont@0.7.4:
+    dependencies:
+      css-tree: 3.2.1
+      ofetch: 1.5.1
+      ohash: 2.0.11
+
   unimport@6.3.0(oxc-parser@0.132.0):
     dependencies:
       acorn: 8.16.0