From fb06f7da783406ab6fbcffc3726efdc120deb12d Mon Sep 17 00:00:00 2001
From: tbeaumont79 <tbeaumont79@icloud.com>
Date: Wed, 10 Jun 2026 15:32:20 +0200
Subject: [PATCH] =?UTF-8?q?feat(ui):=20exploiter=20la=20largeur=20d'=C3=A9?=
 =?UTF-8?q?cran=20sur=20les=20pages=20app?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Le shell contraignait le contenu à max-w-4xl (et /profil à max-w-3xl),
laissant beaucoup de vide latéral sur grand écran. On élargit et on passe
en multi-colonnes là où ça a du sens.

- Shell (layout) : header/main/footer en max-w-6xl.
- /profil : 2 colonnes sur lg — édition à gauche, rail sticky à droite
  (récap "Ton profil en bref" + repère honnêteté + lien vers l'exemple de
  CV). Retombe en une colonne sur mobile, rail en dessous.
- /cv/demo : feuille A4 à gauche + panneau d'actions sticky à droite
  (titre, badge démo, bouton export). CvTemplate intouché (parité PDF).
- /ui : catalogue en masonry 2 colonnes.

Vérifié visuellement (desktop + mobile, profil peuplé) ; lint, typecheck,
50 tests, prettier OK.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 apps/app/layouts/default.vue |   6 +-
 apps/app/pages/cv/demo.vue   |  47 ++-
 apps/app/pages/profil.vue    | 712 +++++++++++++++++++----------------
 apps/app/pages/ui.vue        | 385 ++++++++++---------
 4 files changed, 615 insertions(+), 535 deletions(-)

diff --git a/apps/app/layouts/default.vue b/apps/app/layouts/default.vue
index a87d312..4da8f7a 100644
--- a/apps/app/layouts/default.vue
+++ b/apps/app/layouts/default.vue
@@ -78,7 +78,7 @@ const year = new Date().getFullYear()
 <template>
   <div class="flex min-h-full flex-col bg-surface-muted">
     <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="mx-auto flex h-16 w-full max-w-6xl items-center justify-between gap-4 px-6">
         <div class="flex min-w-0 items-center gap-6">
           <NuxtLink
             to="/"
@@ -188,12 +188,12 @@ const year = new Date().getFullYear()
       </div>
     </header>
 
-    <main class="mx-auto w-full max-w-4xl flex-1 px-6 py-10">
+    <main class="mx-auto w-full max-w-6xl flex-1 px-6 py-10">
       <slot />
     </main>
 
     <footer class="border-t border-border bg-surface-muted">
-      <div class="mx-auto w-full max-w-4xl px-6 py-10">
+      <div class="mx-auto w-full max-w-6xl 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
diff --git a/apps/app/pages/cv/demo.vue b/apps/app/pages/cv/demo.vue
index 7579a1c..10f2500 100644
--- a/apps/app/pages/cv/demo.vue
+++ b/apps/app/pages/cv/demo.vue
@@ -128,33 +128,40 @@ async function handleExport() {
 
 <template>
   <div class="bg-surface-muted print:bg-white">
-    <!-- Barre d'actions — chrome d'aperçu, masquée à l'impression. -->
+    <!--
+      Aperçu type "feuille + inspecteur" : la feuille A4 occupe l'espace à gauche,
+      le panneau d'actions est au-dessus sur mobile, à droite (sticky) sur desktop.
+    -->
     <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"
+      class="flex flex-col gap-8 lg:flex-row-reverse lg:items-start lg:justify-center print:block"
     >
-      <div class="min-w-0">
+      <!-- Panneau d'actions — chrome d'aperçu, masqué à l'impression. -->
+      <aside class="w-full shrink-0 lg:sticky lg:top-24 lg:w-72 print:hidden">
         <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>
+        <p class="mt-2 text-sm leading-relaxed text-ink-500">
+          Voici à quoi ressemblera un CV généré par Teven. Vérifie le rendu, puis télécharge-le.
+        </p>
+        <UiButton :loading="exporting" class="mt-5 w-full" @click="handleExport">
+          <Download v-if="!exporting" class="h-4 w-4" :stroke-width="2" aria-hidden="true" />
+          Télécharger en PDF
+        </UiButton>
+        <p class="mt-4 text-xs leading-relaxed text-ink-400">
+          Le PDF téléchargé est strictement identique à cet aperçu.
+        </p>
+      </aside>
 
-    <!--
-      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" />
+      <!--
+        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 w-full max-w-[210mm] shrink-0 overflow-hidden rounded-card shadow-pop ring-1 ring-border lg:mx-0 print:mx-0 print:max-w-none print:overflow-visible print:rounded-none print:shadow-none print:ring-0"
+      >
+        <CvTemplate :cv="demoCv" />
+      </div>
     </div>
-
-    <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/profil.vue b/apps/app/pages/profil.vue
index 4c083ac..a95f5a5 100644
--- a/apps/app/pages/profil.vue
+++ b/apps/app/pages/profil.vue
@@ -9,6 +9,8 @@ import {
   Wrench,
   ClipboardPaste,
   UserRound,
+  ShieldCheck,
+  ArrowRight,
 } from '@lucide/vue'
 
 definePageMeta({ middleware: 'auth' })
@@ -101,7 +103,10 @@ async function addExperience() {
         startDate: expForm.startDate ? new Date(expForm.startDate).toISOString() : null,
         endDate: expForm.endDate ? new Date(expForm.endDate).toISOString() : null,
         description: expForm.description || null,
-        skillsUsed: expForm.skillsUsed.split(',').map((s) => s.trim()).filter(Boolean),
+        skillsUsed: expForm.skillsUsed
+          .split(',')
+          .map((s) => s.trim())
+          .filter(Boolean),
       },
     })
     resetExpForm()
@@ -276,29 +281,14 @@ async function applyImport() {
 </script>
 
 <template>
-  <div class="mx-auto w-full max-w-3xl">
+  <div class="w-full">
     <!-- ── 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">
+      <p class="mt-2 max-w-2xl 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 ── -->
@@ -341,354 +331,428 @@ async function applyImport() {
       <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>
-          <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>
-        </div>
-
-        <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">
+    <!-- ── Contenu : édition à gauche, rail sticky à droite ── -->
+    <div v-else class="mt-8 lg:grid lg:grid-cols-[minmax(0,1fr)_22rem] lg:items-start lg:gap-8">
+      <div class="min-w-0 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"
             >
-              <Briefcase class="h-5 w-5" :stroke-width="1.75" />
+              <UserRound 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>
-          <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>
-
-        <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 }}
+              <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>
-              <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>
 
-        <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" />
+          <UiCard>
+            <form class="space-y-4" @submit.prevent="saveHeader">
               <UiInput
-                v-model="expForm.endDate"
-                type="date"
-                label="Date de fin"
-                hint="Laisse vide si c'est ton poste actuel."
+                v-model="headline"
+                label="Intitulé de poste"
+                placeholder="ex. Développeur Full-Stack Vue / Node"
               />
-            </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()"
+              <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"
               >
-                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>
+                <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>
+            <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>
-          <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>
 
-        <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>
+          <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="-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)"
+                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)"
               >
-                <X class="h-3.5 w-3.5" :stroke-width="2" aria-hidden="true" />
+                <Trash2 class="h-4 w-4" :stroke-width="1.75" 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>
+            </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>
 
-        <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"
+          <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()"
                 >
-                  <option value="">Non précisé</option>
-                  <option v-for="l in SKILL_LEVELS" :key="l" :value="l">
-                    {{ SKILL_LEVEL_LABELS[l] }}
-                  </option>
-                </select>
+                  Ajouter l'expérience
+                </UiButton>
               </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"
-                />
+            </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>
-            <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>
+            <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>
 
-      <!-- Import copier-coller -->
-      <section class="space-y-4" aria-labelledby="section-import">
-        <div class="flex items-center gap-3">
+          <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
-            class="flex h-9 w-9 shrink-0 items-center justify-center rounded-control bg-brand-50 text-brand-600"
-            aria-hidden="true"
+            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"
           >
-            <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.
+            <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>
 
-        <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>
+          <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>
 
-          <!-- 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é.
+        <!-- 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"
+            >
+              <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>
 
-            <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"
+          <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"
                 >
-                  <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>
+                  Analyser le texte
+                </UiButton>
+              </div>
+            </form>
 
-            <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' }}
+            <!-- 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>
-              <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 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>
 
-            <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>
+      <!-- Rail latéral : progression + repère honnêteté, sticky au scroll -->
+      <aside class="mt-10 space-y-4 lg:mt-0 lg:sticky lg:top-24">
+        <div class="rounded-card bg-surface p-5 shadow-card ring-1 ring-border">
+          <h2 class="text-sm font-semibold text-ink-900">Ton profil en bref</h2>
+          <dl class="mt-3 space-y-2.5">
+            <div class="flex items-center justify-between">
+              <dt class="flex items-center gap-2 text-sm text-ink-600">
+                <Briefcase class="h-4 w-4 text-brand-600" :stroke-width="1.75" aria-hidden="true" />
+                Expériences
+              </dt>
+              <dd class="text-sm font-semibold tabular-nums text-ink-900">{{ expCount }}</dd>
+            </div>
+            <div class="flex items-center justify-between">
+              <dt class="flex items-center gap-2 text-sm text-ink-600">
+                <Wrench class="h-4 w-4 text-brand-600" :stroke-width="1.75" aria-hidden="true" />
+                Compétences
+              </dt>
+              <dd class="text-sm font-semibold tabular-nums text-ink-900">{{ skillCount }}</dd>
             </div>
+          </dl>
+          <p class="mt-3 text-xs leading-relaxed text-ink-500">
+            Plus ton profil est complet, plus tes CV générés seront pertinents.
+          </p>
+        </div>
+
+        <div class="rounded-card bg-brand-50 p-5 ring-1 ring-brand-100">
+          <div class="flex items-center gap-2 text-brand-700">
+            <ShieldCheck class="h-5 w-5 shrink-0" :stroke-width="1.75" aria-hidden="true" />
+            <p class="text-sm font-semibold">Toujours honnête</p>
           </div>
-        </UiCard>
-      </section>
+          <p class="mt-2 text-sm leading-relaxed text-brand-900/80">
+            Teven ne s'invente jamais de compétences : il hiérarchise et reformule ce que tu as
+            réellement fait.
+          </p>
+          <NuxtLink
+            to="/cv/demo"
+            class="mt-3 inline-flex items-center gap-1 rounded text-sm font-semibold text-brand-700 transition-colors duration-300 ease-out hover:text-brand-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2"
+          >
+            Voir un exemple de CV
+            <ArrowRight class="h-4 w-4" :stroke-width="2" aria-hidden="true" />
+          </NuxtLink>
+        </div>
+      </aside>
     </div>
 
     <!-- ── Confirmation de suppression ── -->
diff --git a/apps/app/pages/ui.vue b/apps/app/pages/ui.vue
index 9a49dcb..09b1689 100644
--- a/apps/app/pages/ui.vue
+++ b/apps/app/pages/ui.vue
@@ -144,221 +144,230 @@ const SEMANTIC_SCALES = [
 </script>
 
 <template>
-  <div class="flex flex-col gap-10">
-    <header>
+  <div>
+    <header class="mb-8">
       <h1 class="text-2xl font-bold tracking-tight text-ink-900">Design system</h1>
       <p class="mt-1 text-ink-500">
         Le langage visuel de {{ BRAND }} — tokens, composants et retours d'état (QA visuelle).
       </p>
     </header>
 
-    <!-- ─── 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>
+    <!-- Masonry 2 colonnes sur grand écran pour exploiter la largeur. -->
+    <div class="lg:gap-6 lg:[column-count:2] [&>*]:mb-6 [&>*]:break-inside-avoid">
+      <!-- ─── Palette ─────────────────────────────────────────────────────── -->
+      <UiCard title="Palette">
+        <div class="flex flex-col gap-6">
+          <div>
+            <h3 class="text-sm font-semibold text-ink-700">brand — indigo profond</h3>
+            <div class="mt-2 flex flex-wrap gap-1.5">
+              <div v-for="s in BRAND_SCALE" :key="s.step" class="flex flex-col items-center gap-1">
+                <div class="h-9 w-9 rounded-control ring-1 ring-ink-950/10" :class="s.class" />
+                <span class="text-[10px] text-ink-500">{{ s.step }}</span>
+              </div>
             </div>
           </div>
-        </div>
-        <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>
+            <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 scale.swatches"
-                :key="s.step"
-                class="flex flex-col items-center gap-1"
-              >
+              <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>
-      </div>
-    </UiCard>
+      </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>
+      <!-- ─── 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>
-      </div>
-    </UiCard>
+      </UiCard>
 
-    <!-- ─── Boutons ─────────────────────────────────────────────────────── -->
-    <UiCard title="Boutons">
-      <div class="flex flex-wrap items-center gap-3">
-        <UiButton>Primaire</UiButton>
-        <UiButton variant="secondary">Secondaire</UiButton>
-        <UiButton variant="ghost">Ghost</UiButton>
-        <UiButton variant="danger">Supprimer</UiButton>
-        <UiButton disabled>Désactivé</UiButton>
-        <UiButton :loading="loadingDemo" @click="simulate">Générer</UiButton>
-      </div>
-      <div class="mt-4 flex flex-wrap items-center gap-3">
-        <UiButton size="sm">Small</UiButton>
-        <UiButton size="md">Medium</UiButton>
-        <UiButton size="lg">Large</UiButton>
-        <UiButton variant="secondary">
-          <Download class="h-4 w-4" :stroke-width="2" aria-hidden="true" />
-          Avec icône
-        </UiButton>
-      </div>
-    </UiCard>
+      <!-- ─── Boutons ─────────────────────────────────────────────────────── -->
+      <UiCard title="Boutons">
+        <div class="flex flex-wrap items-center gap-3">
+          <UiButton>Primaire</UiButton>
+          <UiButton variant="secondary">Secondaire</UiButton>
+          <UiButton variant="ghost">Ghost</UiButton>
+          <UiButton variant="danger">Supprimer</UiButton>
+          <UiButton disabled>Désactivé</UiButton>
+          <UiButton :loading="loadingDemo" @click="simulate">Générer</UiButton>
+        </div>
+        <div class="mt-4 flex flex-wrap items-center gap-3">
+          <UiButton size="sm">Small</UiButton>
+          <UiButton size="md">Medium</UiButton>
+          <UiButton size="lg">Large</UiButton>
+          <UiButton variant="secondary">
+            <Download class="h-4 w-4" :stroke-width="2" aria-hidden="true" />
+            Avec icône
+          </UiButton>
+        </div>
+      </UiCard>
 
-    <!-- ─── Champs de formulaire ────────────────────────────────────────── -->
-    <UiCard title="Champs de formulaire">
-      <div class="flex flex-col gap-4">
-        <UiInput
-          v-model="sampleName"
-          label="Nom complet"
-          required
-          hint="Tel qu'il apparaîtra sur le CV."
-        />
-        <UiInput v-model="sampleEmail" label="Email" type="email" error="Adresse email invalide." />
-        <UiInput label="Champ désactivé" placeholder="Indisponible" disabled />
-        <UiTextarea v-model="sampleBio" label="Accroche" placeholder="Quelques lignes…" />
-      </div>
-    </UiCard>
+      <!-- ─── Champs de formulaire ────────────────────────────────────────── -->
+      <UiCard title="Champs de formulaire">
+        <div class="flex flex-col gap-4">
+          <UiInput
+            v-model="sampleName"
+            label="Nom complet"
+            required
+            hint="Tel qu'il apparaîtra sur le CV."
+          />
+          <UiInput
+            v-model="sampleEmail"
+            label="Email"
+            type="email"
+            error="Adresse email invalide."
+          />
+          <UiInput label="Champ désactivé" placeholder="Indisponible" disabled />
+          <UiTextarea v-model="sampleBio" label="Accroche" placeholder="Quelques lignes…" />
+        </div>
+      </UiCard>
 
-    <!-- ─── Badges ──────────────────────────────────────────────────────── -->
-    <UiCard title="Badges">
-      <div class="flex flex-wrap items-center gap-3">
-        <UiBadge variant="brand">Recommandé</UiBadge>
-        <UiBadge variant="success">Validé</UiBadge>
-        <UiBadge variant="warning">À retravailler</UiBadge>
-        <UiBadge variant="danger">Manquant</UiBadge>
-        <UiBadge variant="neutral">Brouillon</UiBadge>
-      </div>
-    </UiCard>
+      <!-- ─── 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>
+      <!-- ─── Icônes ──────────────────────────────────────────────────────── -->
+      <UiCard title="Icônes (lucide)">
+        <p class="mb-4 text-sm text-ink-500">
+          Toujours via <code class="text-xs">@lucide/vue</code>, stroke-width 1.75–2. Jamais
+          d'émojis ni de SVG inline ad hoc.
+        </p>
+        <ul class="grid grid-cols-2 gap-3 sm:grid-cols-4">
+          <li
+            v-for="item in ICONS"
+            :key="item.name"
+            class="flex flex-col items-center gap-2 rounded-control bg-surface-warm px-2 py-4"
+          >
+            <component
+              :is="item.icon"
+              class="h-5 w-5 text-ink-700"
+              :stroke-width="1.75"
+              aria-hidden="true"
+            />
+            <span class="text-xs text-ink-500">{{ item.name }}</span>
+          </li>
+        </ul>
+      </UiCard>
 
-    <!-- ─── États ───────────────────────────────────────────────────────── -->
-    <UiCard title="États (loading / erreur / vide)">
-      <div class="grid gap-4 sm:grid-cols-3">
-        <UiState variant="loading" title="Chargement…" description="Récupération des données." />
-        <UiState variant="error" title="Erreur" description="Impossible de charger le profil.">
-          <UiButton size="sm" variant="secondary">Réessayer</UiButton>
-        </UiState>
-        <UiState
-          variant="empty"
-          title="Aucune offre"
-          description="Ajoutez une offre pour commencer."
-        >
-          <UiButton size="sm">Ajouter</UiButton>
-        </UiState>
-      </div>
-    </UiCard>
+      <!-- ─── États ───────────────────────────────────────────────────────── -->
+      <UiCard title="États (loading / erreur / vide)">
+        <div class="grid gap-4 sm:grid-cols-3">
+          <UiState variant="loading" title="Chargement…" description="Récupération des données." />
+          <UiState variant="error" title="Erreur" description="Impossible de charger le profil.">
+            <UiButton size="sm" variant="secondary">Réessayer</UiButton>
+          </UiState>
+          <UiState
+            variant="empty"
+            title="Aucune offre"
+            description="Ajoutez une offre pour commencer."
+          >
+            <UiButton size="sm">Ajouter</UiButton>
+          </UiState>
+        </div>
+      </UiCard>
 
-    <!-- ─── Skeleton ────────────────────────────────────────────────────── -->
-    <UiCard title="Skeleton (chargement)">
-      <p class="mb-4 text-sm text-ink-500">
-        Plusieurs petits skeletons qui épousent la forme du contenu final, plutôt qu'un grand bloc.
-      </p>
-      <div class="rounded-control bg-surface-warm p-6">
-        <div class="max-w-sm rounded-card bg-surface p-5 shadow-card" aria-hidden="true">
-          <div class="flex items-center gap-3">
-            <UiSkeleton class="h-10 w-10" />
-            <div class="flex-1 space-y-2">
-              <UiSkeleton class="h-4 w-1/3" />
-              <UiSkeleton class="h-3 w-1/2" />
+      <!-- ─── 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 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>
+      </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>
+      <!-- ─── 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>
+      <!-- ─── Dialogue de confirmation ────────────────────────────────────── -->
+      <UiCard title="Dialogue de confirmation">
+        <p class="mb-4 text-sm text-ink-500">
+          Pour les actions irréversibles — focus initial sur « Annuler », piège de focus, fermeture
+          avec Échap.
+        </p>
+        <UiButton variant="danger" @click="dialogOpen = true">Supprimer une offre…</UiButton>
+        <UiDialog
+          v-model:open="dialogOpen"
+          title="Supprimer cette offre ?"
+          description="L'offre et les CV générés associés seront définitivement supprimés."
+          confirm-label="Supprimer"
+          cancel-label="Annuler"
+          variant="danger"
+          :loading="dialogLoading"
+          @confirm="confirmDialogDemo"
+        />
+      </UiCard>
+    </div>
   </div>
 </template>