diff --git a/.claude/settings.local.json b/.claude/settings.local.json
new file mode 100644
index 0000000..5f15b9d
--- /dev/null
+++ b/.claude/settings.local.json
@@ -0,0 +1,7 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(npm run *)"
+    ]
+  }
+}
diff --git a/app/Http/Controllers/AIAnalysisController.php b/app/Http/Controllers/AIAnalysisController.php
index a5cea22..264157d 100644
--- a/app/Http/Controllers/AIAnalysisController.php
+++ b/app/Http/Controllers/AIAnalysisController.php
@@ -23,8 +23,8 @@ class AIAnalysisController extends Controller
         }
 
         // Restriction: Une analyse tous les 7 jours maximum par candidat
-        // Le super_admin peut outrepasser cette restriction via le paramètre 'force'
-        $shouldCheckRestriction = !($request->force && auth()->user()->isSuperAdmin());
+        // Tout admin peut outrepasser cette restriction s'il utilise l'option 'force'
+        $shouldCheckRestriction = !$request->input('force', false);
 
         if ($shouldCheckRestriction && $candidate->ai_analysis && isset($candidate->ai_analysis['analyzed_at'])) {
             $lastAnalysis = Carbon::parse($candidate->ai_analysis['analyzed_at']);
diff --git a/app/Http/Controllers/AttemptController.php b/app/Http/Controllers/AttemptController.php
index 2886f96..2510d5b 100644
--- a/app/Http/Controllers/AttemptController.php
+++ b/app/Http/Controllers/AttemptController.php
@@ -149,7 +149,7 @@ class AttemptController extends Controller
         $this->authorizeAdmin();
 
         $request->validate([
-            'score' => 'required|numeric|min:0'
+            'score' => 'required|numeric|min:0|max:' . $answer->question->points
         ]);
 
         $answer->update(['score' => $request->score]);
diff --git a/app/Http/Controllers/CandidateController.php b/app/Http/Controllers/CandidateController.php
index e9916c4..ecd5331 100644
--- a/app/Http/Controllers/CandidateController.php
+++ b/app/Http/Controllers/CandidateController.php
@@ -103,12 +103,12 @@ class CandidateController extends Controller
             'jobPositions' => \App\Models\JobPosition::all(),
             'ai_config' => [
                 'default' => env('AI_DEFAULT_PROVIDER', 'ollama'),
-                'enabled_providers' => array_filter([
-                    'ollama' => true, // Toujours dispo car local ou simulé
+                'providers' => array_keys(array_filter([
+                    'ollama' => true,
                     'openai' => !empty(env('OPENAI_API_KEY')),
                     'anthropic' => !empty(env('ANTHROPIC_API_KEY')),
                     'gemini' => !empty(env('GEMINI_API_KEY')),
-                ], function($v) { return $v; })
+                ])),
             ]
         ];
 
diff --git a/app/Services/AIAnalysisService.php b/app/Services/AIAnalysisService.php
index 5b7ad9e..4f03420 100644
--- a/app/Services/AIAnalysisService.php
+++ b/app/Services/AIAnalysisService.php
@@ -151,7 +151,19 @@ class AIAnalysisService
         if (isset($data['score_global']) && !isset($data['match_score'])) {
             $normalized['match_score'] = $data['score_global'];
         }
+
+        if (isset($data['score']) && !isset($data['match_score'])) {
+            $normalized['match_score'] = $data['score'];
+        }
+
+        if (isset($data['points_forts']) && !isset($data['strengths'])) {
+            $normalized['strengths'] = $data['points_forts'];
+        }
         
+        if (isset($data['points_faibles']) && !isset($data['gaps'])) {
+            $normalized['gaps'] = $data['points_faibles'];
+        }
+
         if (isset($data['recommandation']) && !isset($data['verdict'])) {
             $normalized['verdict'] = $data['recommandation'];
         }
@@ -159,14 +171,63 @@ class AIAnalysisService
         if (isset($data['synthese']) && !isset($data['summary'])) {
             $normalized['summary'] = $data['synthese'];
         }
+
+        // List-specific normalization (handle list of objects or strings)
+        $cleanList = function($list) {
+            if (!is_array($list)) return [];
+            return array_map(function($item) {
+                if (is_array($item)) {
+                    $type = $item['type'] ?? $item['title'] ?? $item['category'] ?? null;
+                    $desc = $item['description'] ?? $item['value'] ?? $item['content'] ?? null;
+                    if ($type && $desc) return "{$type} : {$desc}";
+                    if ($desc) return $desc;
+                    if ($type) return $type;
+                    return json_encode($item);
+                }
+                return (string) $item;
+            }, $list);
+        };
+
+        if (isset($normalized['strengths'])) {
+            $normalized['strengths'] = $cleanList($normalized['strengths']);
+        }
         
-        if (isset($data['points_vigilance']) && !isset($data['gaps'])) {
-            // Handle if points_vigilance is a list of objects (as in user's prompt)
-            if (is_array($data['points_vigilance']) && isset($data['points_vigilance'][0]) && is_array($data['points_vigilance'][0])) {
-                $normalized['gaps'] = array_map(fn($i) => ($i['type'] ?? '') . ': ' . ($i['description'] ?? ''), $data['points_vigilance']);
-            } else {
-                $normalized['gaps'] = $data['points_vigilance'];
+        if (isset($normalized['gaps'])) {
+            $normalized['gaps'] = $cleanList($normalized['gaps']);
+        }
+
+        if (isset($normalized['elements_bloquants'])) {
+            $normalized['elements_bloquants'] = $cleanList($normalized['elements_bloquants']);
+        }
+
+        // Ensure match_score is a numeric value and handle common AI formatting quirks
+        if (isset($normalized['match_score'])) {
+            $scoreValue = $normalized['match_score'];
+            
+            if (is_string($scoreValue)) {
+                // If AI returns something like "18/20", take the first part
+                if (str_contains($scoreValue, '/')) {
+                    $scoreValue = explode('/', $scoreValue)[0];
+                }
+                // Convert comma to dot for European decimals
+                $scoreValue = str_replace(',', '.', $scoreValue);
+                // Keep only digits and the first decimal point
+                $scoreValue = preg_replace('/[^0-9.]/', '', $scoreValue);
             }
+            
+            $num = (float)$scoreValue;
+            
+            // If the AI returned a ratio beneath 1 (e.g. 0.85 for 85%), scale it up
+            if ($num > 0 && $num < 1.1 && !is_int($normalized['match_score'])) {
+                 // But be careful: a score of "1" might honestly be 1/100
+                 // but 0.95 is almost certainly a ratio.
+                 if ($num < 1 || str_contains((string)$normalized['match_score'], '.')) {
+                    $num *= 100;
+                 }
+            }
+            
+            // Cap at 100
+            $normalized['match_score'] = (int) min(100, round($num));
         }
 
         // Ensure default keys exist even if empty
@@ -175,6 +236,9 @@ class AIAnalysisService
         $normalized['verdict'] = $normalized['verdict'] ?? "Indéterminé";
         $normalized['strengths'] = $normalized['strengths'] ?? [];
         $normalized['gaps'] = $normalized['gaps'] ?? [];
+        $normalized['scores_detailles'] = $normalized['scores_detailles'] ?? null;
+        $normalized['elements_bloquants'] = $normalized['elements_bloquants'] ?? [];
+        $normalized['questions_entretien_suggerees'] = $normalized['questions_entretien_suggerees'] ?? [];
 
         return $normalized;
     }
diff --git a/config/ai.php b/config/ai.php
index 5053638..10dab6a 100644
--- a/config/ai.php
+++ b/config/ai.php
@@ -22,7 +22,8 @@ return [
             - gaps: liste des compétences manquantes ou points de vigilance
             - verdict: une conclusion (Favorable, Très Favorable, Réservé, Défavorable)
             - scores_detailles: un objet avec des clés (ex: technique, experience, soft_skills) contenant 'score' (0-100) et 'justification'
-            - elements_bloquants: liste des points critiques qui pourraient invalider la candidature (ou liste vide si aucun)",
+            - elements_bloquants: liste des points critiques qui pourraient invalider la candidature (ou liste vide si aucun)
+            - questions_entretien_suggerees: liste de 5 questions pertinentes à poser au candidat lors de l'entretien",
     ],
 
     'providers' => [
diff --git a/resources/css/app.css b/resources/css/app.css
index b5c61c9..83b3153 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -1,3 +1,4 @@
+@import './tokens.css';
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
\ No newline at end of file
diff --git a/resources/css/tokens.css b/resources/css/tokens.css
new file mode 100644
index 0000000..4df992f
--- /dev/null
+++ b/resources/css/tokens.css
@@ -0,0 +1,271 @@
+/**
+ * design-tokens/tokens.css
+ * Variables CSS globales — RecruitQuizz / CABM
+ * À importer dans resources/css/app.css :
+ *   @import '../../../design-tokens/tokens.css';
+ */
+
+/* ─── COULEURS ────────────────────────────────────────────────────────────── */
+:root {
+  /* Primaires */
+  --color-primary:        #1a4b8c;
+  --color-primary-dark:   #122f5a;
+  --color-primary-light:  #3a7abf;
+  --color-primary-soft:   rgba(26, 75, 140, 0.08);
+
+  /* Accent */
+  --color-accent:         #c8102e;
+  --color-accent-soft:    rgba(200, 16, 46, 0.10);
+
+  /* Or (highlight) */
+  --color-gold:           #f5a800;
+  --color-gold-soft:      rgba(245, 168, 0, 0.12);
+  --color-gold-on:        #3a2800;   /* texte sur fond or */
+
+  /* Neutres warm */
+  --color-bg:             #f0ece4;   /* fond global */
+  --color-surface:        #faf9f7;   /* cartes */
+  --color-sand:           #e8e0d0;   /* sable */
+  --color-border:         rgba(45, 45, 45, 0.07);
+
+  /* Texte */
+  --color-text:           #2d2d2d;
+  --color-text-muted:     rgba(45, 45, 45, 0.50);
+  --color-text-faint:     rgba(45, 45, 45, 0.28);
+
+  /* Sémantiques */
+  --color-success:        #10b981;
+  --color-success-soft:   rgba(16, 185, 129, 0.10);
+  --color-warning:        #f5a800;
+  --color-danger:         #c8102e;
+  --color-info:           #3a7abf;
+
+  /* Sidebar */
+  --sidebar-bg:           #1a4b8c;
+  --sidebar-text:         rgba(255, 255, 255, 0.72);
+  --sidebar-active-bg:    #f5a800;
+  --sidebar-active-text:  #3a2800;
+  --sidebar-border:       rgba(255, 255, 255, 0.07);
+  --sidebar-width:        220px;
+  --sidebar-width-sm:     64px;
+
+  /* Layout */
+  --header-height:        60px;
+  --navbar-height:        40px;
+}
+
+/* ─── DARK MODE ───────────────────────────────────────────────────────────── */
+.dark {
+  --color-primary:        #4a8fd4;
+  --color-primary-soft:   rgba(74, 143, 212, 0.12);
+
+  --color-bg:             #0f1923;
+  --color-surface:        #162130;
+  --color-border:         rgba(255, 255, 255, 0.06);
+
+  --color-text:           #e8e8e8;
+  --color-text-muted:     rgba(232, 232, 232, 0.50);
+  --color-text-faint:     rgba(232, 232, 232, 0.25);
+
+  --color-success:        #34d399;
+  --color-success-soft:   rgba(16, 185, 129, 0.12);
+  --color-accent:         #ff4d6a;
+
+  --sidebar-bg:           #0a111a;
+  --sidebar-border:       rgba(255, 255, 255, 0.05);
+}
+
+/* ─── TYPOGRAPHIE ─────────────────────────────────────────────────────────── */
+:root {
+  --font-sans:     'Nunito', 'Helvetica Neue', Arial, sans-serif;
+  --font-serif:    'Merriweather', Georgia, serif;
+  --font-mono:     'JetBrains Mono', 'Fira Code', monospace;
+
+  /* Échelle */
+  --text-2xs:  0.625rem;   /* 10px — labels uppercase */
+  --text-xs:   0.75rem;    /* 12px */
+  --text-sm:   0.8125rem;  /* 13px */
+  --text-base: 0.875rem;   /* 14px */
+  --text-md:   1rem;       /* 16px */
+  --text-lg:   1.0625rem;  /* 17px */
+  --text-xl:   1.125rem;   /* 18px */
+  --text-2xl:  1.25rem;    /* 20px */
+  --text-3xl:  1.5rem;     /* 24px */
+  --text-4xl:  2rem;       /* 32px */
+}
+
+/* ─── ESPACEMENT ──────────────────────────────────────────────────────────── */
+:root {
+  --space-1:  4px;
+  --space-2:  8px;
+  --space-3:  12px;
+  --space-4:  16px;
+  --space-5:  20px;
+  --space-6:  24px;
+  --space-7:  28px;
+  --space-8:  32px;
+  --space-10: 40px;
+  --space-12: 48px;
+  --space-16: 64px;
+}
+
+/* ─── RAYONS ──────────────────────────────────────────────────────────────── */
+:root {
+  --radius-sm:    6px;
+  --radius:       8px;
+  --radius-md:    10px;
+  --radius-lg:    12px;
+  --radius-xl:    14px;
+  --radius-2xl:   16px;
+  --radius-3xl:   20px;
+  --radius-full:  9999px;
+  /* Tokens sémantiques */
+  --radius-card:  16px;
+  --radius-btn:   10px;
+  --radius-badge: 20px;
+  --radius-input: 10px;
+}
+
+/* ─── OMBRES ──────────────────────────────────────────────────────────────── */
+:root {
+  --shadow-xs:      0 1px 3px rgba(0,0,0,0.05);
+  --shadow-sm:      0 1px 4px rgba(0,0,0,0.07);
+  --shadow:         0 2px 8px rgba(0,0,0,0.09);
+  --shadow-md:      0 4px 16px rgba(0,0,0,0.10);
+  --shadow-lg:      0 8px 28px rgba(0,0,0,0.12);
+  --shadow-primary: 0 4px 16px rgba(26,75,140,0.20);
+  --shadow-gold:    0 4px 16px rgba(245,168,0,0.30);
+  --shadow-accent:  0 4px 16px rgba(200,16,46,0.18);
+}
+
+/* ─── TRANSITIONS ─────────────────────────────────────────────────────────── */
+:root {
+  --transition-fast:   120ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition:        180ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-slow:   300ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+/* ─── COMPOSANTS DE BASE ──────────────────────────────────────────────────── */
+
+/* --- Carte --- */
+.rq-card {
+  background:    var(--color-surface);
+  border:        1px solid var(--color-border);
+  border-radius: var(--radius-card);
+  box-shadow:    var(--shadow-sm);
+}
+
+/* --- Bouton primaire (or) --- */
+.rq-btn {
+  display:         inline-flex;
+  align-items:     center;
+  justify-content: center;
+  gap:             6px;
+  padding:         10px 20px;
+  border:          none;
+  border-radius:   var(--radius-btn);
+  font-family:     var(--font-sans);
+  font-weight:     800;
+  font-size:       var(--text-sm);
+  text-transform:  uppercase;
+  letter-spacing:  0.08em;
+  cursor:          pointer;
+  transition:      all var(--transition);
+}
+.rq-btn-primary {
+  background:  var(--color-gold);
+  color:       var(--color-gold-on);
+  box-shadow:  var(--shadow-gold);
+}
+.rq-btn-primary:hover {
+  filter:    brightness(1.06);
+  transform: translateY(-1px);
+  box-shadow: 0 6px 20px rgba(245,168,0,0.40);
+}
+.rq-btn-ghost {
+  background:   transparent;
+  color:        var(--color-text);
+  border:       1.5px solid var(--color-border);
+}
+.rq-btn-ghost:hover {
+  background:   var(--color-primary-soft);
+  border-color: var(--color-primary);
+  color:        var(--color-primary);
+}
+
+/* --- Input --- */
+.rq-input {
+  width:         100%;
+  padding:       10px 14px;
+  border-radius: var(--radius-input);
+  border:        1.5px solid var(--color-border);
+  background:    var(--color-surface);
+  color:         var(--color-text);
+  font-family:   var(--font-sans);
+  font-size:     var(--text-base);
+  font-weight:   600;
+  outline:       none;
+  transition:    border-color var(--transition);
+}
+.rq-input:focus {
+  border-color: var(--color-primary);
+  box-shadow:   0 0 0 3px var(--color-primary-soft);
+}
+
+/* --- Badge statut --- */
+.rq-badge {
+  display:        inline-block;
+  padding:        3px 10px;
+  border-radius:  var(--radius-badge);
+  font-size:      var(--text-2xs);
+  font-weight:    800;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+}
+.rq-badge--pending  { background: rgba(45,45,45,0.06); color: rgba(45,45,45,0.55); }
+.rq-badge--ongoing  { background: rgba(58,122,191,0.10); color: #1a4b8c; }
+.rq-badge--done     { background: rgba(16,185,129,0.10); color: #059669; }
+.rq-badge--rejected { background: rgba(200,16,46,0.10);  color: #c8102e; }
+
+.dark .rq-badge--pending  { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.45); }
+.dark .rq-badge--ongoing  { background: rgba(58,122,191,0.20);  color: #7ab8f5; }
+.dark .rq-badge--done     { background: rgba(16,185,129,0.15);  color: #34d399; }
+.dark .rq-badge--rejected { background: rgba(255,77,106,0.15);  color: #ff8099; }
+
+/* --- Label section uppercase --- */
+.rq-label {
+  font-size:      var(--text-2xs);
+  font-weight:    900;
+  text-transform: uppercase;
+  letter-spacing: 0.16em;
+  color:          var(--color-text-faint);
+}
+
+/* --- Score bar --- */
+.rq-score-bar {
+  height:        5px;
+  background:    rgba(45,45,45,0.08);
+  border-radius: 99px;
+  overflow:      hidden;
+}
+.rq-score-bar__fill {
+  height:        100%;
+  border-radius: 99px;
+  transition:    width 0.4s ease;
+}
+.rq-score-bar__fill--high   { background: var(--color-success); }
+.rq-score-bar__fill--mid    { background: var(--color-gold); }
+.rq-score-bar__fill--low    { background: var(--color-accent); }
+
+/* --- Animations utilitaires --- */
+@keyframes rq-fade-in {
+  from { opacity: 0; transform: translateY(6px); }
+  to   { opacity: 1; transform: translateY(0);   }
+}
+@keyframes rq-slide-in {
+  from { opacity: 0; transform: translateX(-8px); }
+  to   { opacity: 1; transform: translateX(0);    }
+}
+.rq-animate-fade  { animation: rq-fade-in  0.2s ease-out; }
+.rq-animate-slide { animation: rq-slide-in 0.2s ease-out; }
diff --git a/resources/js/Components/Rq/RqBadge.vue b/resources/js/Components/Rq/RqBadge.vue
new file mode 100644
index 0000000..8ba5fa0
--- /dev/null
+++ b/resources/js/Components/Rq/RqBadge.vue
@@ -0,0 +1,35 @@
+<script setup>
+/**
+ * RqBadge.vue — Badge de statut candidat
+ *
+ * @prop status  'en_attente' | 'en_cours' | 'termine' | 'refuse'
+ * @prop label   Override du texte affiché (optionnel)
+ */
+const props = defineProps({
+    status: { type: String, required: true },
+    label:  { type: String, default: null },
+});
+
+const labels = {
+    en_attente: 'En attente',
+    en_cours:   'En cours',
+    termine:    'Terminé',
+    refuse:     'Refusé',
+};
+
+const displayLabel = props.label ?? labels[props.status] ?? props.status;
+</script>
+
+<template>
+    <span
+        :class="[
+            'inline-block px-2.5 py-0.5 rounded-full text-2xs font-black uppercase tracking-[0.12em]',
+            status === 'en_attente' && 'bg-ink/5 text-ink/55',
+            status === 'en_cours'   && 'bg-primary/10 text-primary',
+            status === 'termine'    && 'bg-success/10 text-success',
+            status === 'refuse'     && 'bg-accent/10 text-accent',
+        ]"
+    >
+        {{ displayLabel }}
+    </span>
+</template>
diff --git a/resources/js/Components/Rq/RqButton.vue b/resources/js/Components/Rq/RqButton.vue
new file mode 100644
index 0000000..8faffd5
--- /dev/null
+++ b/resources/js/Components/Rq/RqButton.vue
@@ -0,0 +1,45 @@
+<script setup>
+/**
+ * RqButton.vue — Bouton principal RecruitQuizz
+ *
+ * @prop variant  'primary' | 'ghost' | 'danger' | 'outline'
+ * @prop size     'sm' | 'md' | 'lg'
+ * @prop disabled Boolean
+ * @prop loading  Boolean — affiche un spinner
+ * @prop icon     SVG path string optionnel (gauche du label)
+ */
+defineProps({
+    variant:  { type: String, default: 'primary' },
+    size:     { type: String, default: 'md' },
+    disabled: { type: Boolean, default: false },
+    loading:  { type: Boolean, default: false },
+});
+</script>
+
+<template>
+    <button
+        v-bind="$attrs"
+        :disabled="disabled || loading"
+        :class="[
+            // Base
+            'inline-flex items-center justify-center gap-1.5 font-sans font-extrabold uppercase tracking-[0.08em] transition-all duration-150 select-none focus:outline-none focus:ring-2 focus:ring-offset-2 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed',
+            // Size
+            size === 'sm' && 'text-2xs px-3.5 py-2 rounded-lg',
+            size === 'md' && 'text-xs px-5 py-2.5 rounded-[10px]',
+            size === 'lg' && 'text-sm px-7 py-3.5 rounded-[10px]',
+            // Variant
+            variant === 'primary' && 'bg-highlight text-highlight-dark shadow-gold hover:brightness-105 hover:-translate-y-px hover:shadow-lg focus:ring-highlight/50',
+            variant === 'ghost'   && 'bg-transparent text-ink border border-ink/10 hover:bg-primary/5 hover:border-primary hover:text-primary focus:ring-primary/30',
+            variant === 'outline' && 'bg-transparent text-primary border-2 border-primary hover:bg-primary hover:text-white focus:ring-primary/30',
+            variant === 'danger'  && 'bg-accent/10 text-accent border border-accent/20 hover:bg-accent hover:text-white focus:ring-accent/30',
+        ]"
+    >
+        <!-- Spinner -->
+        <svg v-if="loading" class="animate-spin h-4 w-4 opacity-70" viewBox="0 0 24 24" fill="none">
+            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
+            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"/>
+        </svg>
+
+        <slot />
+    </button>
+</template>
diff --git a/resources/js/Components/Rq/RqCard.vue b/resources/js/Components/Rq/RqCard.vue
new file mode 100644
index 0000000..c812746
--- /dev/null
+++ b/resources/js/Components/Rq/RqCard.vue
@@ -0,0 +1,33 @@
+<script setup>
+/**
+ * RqCard.vue — Carte conteneur RecruitQuizz
+ *
+ * @prop padding  'none' | 'sm' | 'md' | 'lg'
+ * @prop hover    Boolean — active l'effet de survol (lift)
+ * @prop accent   'primary' | 'gold' | 'green' | 'red' — bordure colorée en bas
+ */
+defineProps({
+    padding: { type: String, default: 'md' },
+    hover:   { type: Boolean, default: false },
+    accent:  { type: String, default: null },
+});
+</script>
+
+<template>
+    <div
+        :class="[
+            'bg-surface rounded-2xl border border-ink/[0.07] shadow-sm',
+            hover && 'transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md',
+            accent === 'primary' && 'border-b-2 border-b-primary',
+            accent === 'gold'    && 'border-b-2 border-b-highlight',
+            accent === 'green'   && 'border-b-2 border-b-success',
+            accent === 'red'     && 'border-b-2 border-b-accent',
+            padding === 'none' && 'overflow-hidden',
+            padding === 'sm'   && 'p-4',
+            padding === 'md'   && 'p-5',
+            padding === 'lg'   && 'p-6',
+        ]"
+    >
+        <slot />
+    </div>
+</template>
diff --git a/resources/js/Components/Rq/RqInput.vue b/resources/js/Components/Rq/RqInput.vue
new file mode 100644
index 0000000..1939fc3
--- /dev/null
+++ b/resources/js/Components/Rq/RqInput.vue
@@ -0,0 +1,65 @@
+<script setup>
+/**
+ * RqInput.vue — Champ de saisie RecruitQuizz
+ *
+ * @prop modelValue  String (v-model)
+ * @prop placeholder String
+ * @prop type        String (text, email, password, search…)
+ * @prop icon        'search' | 'mail' | 'lock' — icône préfixe
+ * @prop error       String — message d'erreur
+ * @prop label       String — label au-dessus du champ
+ */
+import { computed } from 'vue';
+
+const props = defineProps({
+    modelValue:  { type: String, default: '' },
+    placeholder: { type: String, default: '' },
+    type:        { type: String, default: 'text' },
+    icon:        { type: String, default: null },
+    error:       { type: String, default: null },
+    label:       { type: String, default: null },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const iconPaths = {
+    search: 'M11 17.25a6.25 6.25 0 110-12.5 6.25 6.25 0 010 12.5zM16 16l4.5 4.5',
+    mail:   'M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2zM22 6l-10 7L2 6',
+    lock:   'M19 11H5a2 2 0 00-2 2v7a2 2 0 002 2h14a2 2 0 002-2v-7a2 2 0 00-2-2zM7 11V7a5 5 0 0110 0v4',
+};
+</script>
+
+<template>
+    <div class="flex flex-col gap-1.5 w-full">
+        <!-- Label -->
+        <label v-if="label" class="text-2xs font-black uppercase tracking-[0.14em] text-ink/50">
+            {{ label }}
+        </label>
+
+        <!-- Input wrapper -->
+        <div class="relative">
+            <!-- Icon -->
+            <span v-if="icon" class="absolute left-3 top-1/2 -translate-y-1/2 text-ink/30 pointer-events-none">
+                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <path :d="iconPaths[icon]" />
+                </svg>
+            </span>
+
+            <input
+                :type="type"
+                :value="modelValue"
+                :placeholder="placeholder"
+                @input="emit('update:modelValue', $event.target.value)"
+                :class="[
+                    'w-full rounded-[10px] border bg-surface font-sans text-sm font-semibold text-ink placeholder:text-ink/30 outline-none transition-all duration-150',
+                    'focus:border-primary focus:ring-2 focus:ring-primary/15',
+                    icon ? 'pl-9 pr-4 py-2.5' : 'px-4 py-2.5',
+                    error ? 'border-accent focus:border-accent focus:ring-accent/15' : 'border-ink/10',
+                ]"
+            />
+        </div>
+
+        <!-- Error -->
+        <p v-if="error" class="text-2xs font-bold text-accent">{{ error }}</p>
+    </div>
+</template>
diff --git a/resources/js/Components/Rq/RqScoreBar.vue b/resources/js/Components/Rq/RqScoreBar.vue
new file mode 100644
index 0000000..b57887c
--- /dev/null
+++ b/resources/js/Components/Rq/RqScoreBar.vue
@@ -0,0 +1,38 @@
+<script setup>
+/**
+ * RqScoreBar.vue — Barre de score pondéré
+ *
+ * @prop value   Number — score actuel
+ * @prop max     Number — score maximum (défaut 20)
+ * @prop showLabel Boolean — affiche "X/max" à droite
+ */
+import { computed } from 'vue';
+
+const props = defineProps({
+    value:     { type: Number, required: true },
+    max:       { type: Number, default: 20 },
+    showLabel: { type: Boolean, default: true },
+});
+
+const pct = computed(() => Math.min(100, (props.value / props.max) * 100));
+
+const colorClass = computed(() => {
+    if (pct.value >= 80) return 'bg-success';
+    if (pct.value >= 60) return 'bg-highlight';
+    return 'bg-accent';
+});
+</script>
+
+<template>
+    <div class="flex items-center gap-2.5 w-full">
+        <div class="flex-1 h-[5px] bg-ink/[0.07] rounded-full overflow-hidden">
+            <div
+                :class="['h-full rounded-full transition-all duration-500', colorClass]"
+                :style="{ width: `${pct}%` }"
+            />
+        </div>
+        <span v-if="showLabel" class="text-xs font-black text-ink tabular-nums min-w-[44px] text-right">
+            {{ value }}<span class="text-[9px] text-ink/40 font-semibold">/{{ max }}</span>
+        </span>
+    </div>
+</template>
diff --git a/resources/js/Components/Rq/RqStatCard.vue b/resources/js/Components/Rq/RqStatCard.vue
new file mode 100644
index 0000000..6619719
--- /dev/null
+++ b/resources/js/Components/Rq/RqStatCard.vue
@@ -0,0 +1,54 @@
+<script setup>
+/**
+ * RqStatCard.vue — Carte KPI dashboard admin
+ *
+ * @prop label   String — libellé (ex: "Total Candidats")
+ * @prop value   String | Number — valeur principale
+ * @prop sub     String — sous-texte (ex: "+3 ce mois")
+ * @prop color   'primary' | 'gold' | 'green' | 'sky' | 'red'
+ * @prop unit    String — unité affichée après la valeur (ex: "/ 20")
+ */
+import { computed } from 'vue';
+
+const props = defineProps({
+    label: { type: String, required: true },
+    value: { type: [String, Number], required: true },
+    sub:   { type: String, default: null },
+    color: { type: String, default: 'primary' },
+    unit:  { type: String, default: null },
+});
+
+const colorMap = {
+    primary: { text: 'text-primary',   glow: 'from-primary/10' },
+    gold:    { text: 'text-highlight',  glow: 'from-highlight/15' },
+    green:   { text: 'text-success',    glow: 'from-success/10' },
+    sky:     { text: 'text-primary-light', glow: 'from-primary-light/10' },
+    red:     { text: 'text-accent',     glow: 'from-accent/10' },
+};
+
+const c = computed(() => colorMap[props.color] ?? colorMap.primary);
+</script>
+
+<template>
+    <div class="relative bg-surface rounded-2xl border border-ink/[0.07] shadow-sm p-5 overflow-hidden
+                transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md group cursor-default">
+
+        <!-- Label -->
+        <p class="text-2xs font-black uppercase tracking-[0.18em] text-ink/40 mb-2.5">
+            {{ label }}
+        </p>
+
+        <!-- Value -->
+        <p :class="['font-serif font-black leading-none', c.text]"
+           style="font-size: clamp(1.75rem, 2.5vw, 2.25rem);">
+            {{ value }}
+            <span v-if="unit" class="text-base font-sans font-bold text-ink/30 ml-1">{{ unit }}</span>
+        </p>
+
+        <!-- Sub -->
+        <p v-if="sub" class="mt-1.5 text-2xs font-semibold text-ink/40">{{ sub }}</p>
+
+        <!-- Decorative blob -->
+        <div :class="['absolute bottom-0 right-0 w-20 h-20 rounded-full bg-gradient-radial to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500', c.glow]" />
+    </div>
+</template>
diff --git a/resources/js/Layouts/AdminLayout.vue b/resources/js/Layouts/AdminLayout.vue
index 10d2830..4a26199 100644
--- a/resources/js/Layouts/AdminLayout.vue
+++ b/resources/js/Layouts/AdminLayout.vue
@@ -1,203 +1,264 @@
 <script setup>
+/**
+ * AdminLayout.vue — Layout principal admin redesigné
+ * RecruitQuizz v2.4
+ *
+ * Changements vs version précédente :
+ * - Sidebar 220px (collapsible → 64px) avec transition douce
+ * - Header 60px épuré, titre avec accent bar or
+ * - Fond neutral (#f0ece4) sur le contenu principal
+ * - Items nav : rounded-xl, active bg-highlight text-highlight-dark
+ * - Footer sidebar : avatar + nom + version + logout
+ */
 import { ref } from 'vue';
-import { Link } from '@inertiajs/vue3';
-import ApplicationLogo from '@/Components/ApplicationLogo.vue';
+import { Link, usePage } from '@inertiajs/vue3';
 import Dropdown from '@/Components/Dropdown.vue';
 import DropdownLink from '@/Components/DropdownLink.vue';
 import EnvironmentBanner from '@/Components/EnvironmentBanner.vue';
 
+const page = usePage();
 const isSidebarOpen = ref(true);
+
+// ─── Navigation ────────────────────────────────────────────────────────────
+
+const navItems = [
+    {
+        route: 'dashboard',
+        label: 'Tableau de bord',
+        icon: 'M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2V9z M9 22V12h6v10',
+    },
+    {
+        route: 'admin.candidates.index',
+        match: 'admin.candidates.*',
+        label: 'Candidats',
+        icon: 'M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2 M9 11a4 4 0 100-8 4 4 0 000 8z M23 21v-2a4 4 0 00-3-3.87 M16 3.13a4 4 0 010 7.75',
+    },
+    {
+        route: 'admin.quizzes.index',
+        match: 'admin.quizzes.*',
+        label: 'Quiz',
+        icon: 'M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2M9 12l2 2 4-4',
+    },
+    {
+        route: 'admin.job-positions.index',
+        match: 'admin.job-positions.*',
+        label: 'Fiches de Poste',
+        icon: 'M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z',
+    },
+    {
+        route: 'admin.comparative',
+        label: 'Comparateur',
+        icon: 'M18 20V10 M12 20V4 M6 20v-6',
+    },
+];
+
+const superAdminItems = [
+    {
+        route: 'admin.tenants.index',
+        match: 'admin.tenants.*',
+        label: 'Structures',
+        icon: 'M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4',
+    },
+    {
+        route: 'admin.users.index',
+        match: 'admin.users.*',
+        label: 'Équipe SaaS',
+        icon: 'M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z',
+    },
+    {
+        route: 'admin.logs.index',
+        match: 'admin.logs.*',
+        label: 'Logs connexion',
+        icon: 'M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01',
+    },
+];
+
+const isActive = (item) => {
+    if (item.match) return route().current(item.match);
+    return route().current(item.route);
+};
 </script>
 
 <template>
     <EnvironmentBanner />
-    <div class="min-h-screen bg-sand flex text-anthracite font-sans selection:bg-highlight selection:text-anthracite">
-        <!-- Sidebar -->
+
+    <div class="min-h-screen flex bg-neutral font-sans text-ink selection:bg-highlight selection:text-highlight-dark">
+
+        <!-- ─── Sidebar ──────────────────────────────────────────────────── -->
         <aside
-            :class="[isSidebarOpen ? 'w-64' : 'w-20']"
-            class="hidden md:flex flex-col bg-primary transition-all duration-300 shadow-xl z-20"
+            :class="[
+                isSidebarOpen ? 'w-[220px]' : 'w-16',
+                'hidden md:flex flex-col bg-primary shadow-xl z-20 transition-all duration-300 shrink-0'
+            ]"
         >
-            <div class="h-16 flex items-center px-5 bg-primary/90 border-b border-white/10">
-                <Link :href="route('dashboard')" class="flex items-center gap-3 overflow-hidden ml-1">
-                    <div class="w-8 h-8 bg-highlight rounded flex items-center justify-center shrink-0 shadow-sm shadow-highlight/20">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-[#3a2800]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9l-.707.707M12 18v3m4.95-4.95l.707.707M12 3c-4.418 0-8 3.582-8 8 0 2.209.895 4.209 2.343 5.657L12 21l5.657-5.343A7.994 7.994 0 0020 11c0-4.418-3.582-8-8-8z" />
+            <!-- Logo -->
+            <div class="h-[60px] flex items-center border-b border-white/[0.07] px-4 shrink-0">
+                <Link :href="route('dashboard')" class="flex items-center gap-3 overflow-hidden">
+                    <!-- Icône -->
+                    <div class="w-[30px] h-[30px] bg-highlight rounded-lg flex items-center justify-center shrink-0 shadow-gold">
+                        <svg class="w-4 h-4 text-highlight-dark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+                            <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
                         </svg>
                     </div>
-                    <span v-if="isSidebarOpen" class="font-serif font-black text-xl tracking-tight whitespace-nowrap text-white">RECRU<span class="text-accent italic px-0.5">IT</span></span>
+                    <!-- Wordmark -->
+                    <Transition name="fade">
+                        <span v-if="isSidebarOpen" class="font-serif font-black text-[17px] text-white tracking-tight whitespace-nowrap">
+                            RECRU<span class="text-highlight italic">IT</span>
+                        </span>
+                    </Transition>
                 </Link>
             </div>
 
-            <nav class="flex-1 py-6 px-3 space-y-1.5 overflow-y-auto custom-scrollbar">
-                <Link
-                    :href="route('dashboard')"
-                    class="flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all duration-300 font-subtitle font-bold text-sm"
-                    :class="[route().current('dashboard') ? 'bg-highlight text-[#3a2800] shadow-md shadow-highlight/20' : 'text-white/70 hover:bg-white/10 hover:text-white']"
-                >
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
-                    </svg>
-                    <span v-if="isSidebarOpen" class="truncate">Tableau de bord</span>
-                </Link>
+            <!-- Nav principale -->
+            <nav class="flex-1 px-2.5 py-4 space-y-0.5 overflow-y-auto scrollbar-thin scrollbar-thumb-white/10 scrollbar-track-transparent">
+                <!-- Items principaux -->
+                <template v-for="item in navItems" :key="item.route">
+                    <Link
+                        :href="route(item.route)"
+                        :title="!isSidebarOpen ? item.label : undefined"
+                        :class="[
+                            'flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all duration-150 font-sans font-bold text-[12.5px] tracking-[0.01em]',
+                            isSidebarOpen ? '' : 'justify-center',
+                            isActive(item)
+                                ? 'bg-highlight text-highlight-dark shadow-md shadow-highlight/20'
+                                : 'text-white/70 hover:bg-white/10 hover:text-white',
+                        ]"
+                    >
+                        <svg class="w-[17px] h-[17px] shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <path :d="item.icon"/>
+                        </svg>
+                        <span v-if="isSidebarOpen" class="truncate">{{ item.label }}</span>
+                    </Link>
+                </template>
 
-                <Link
-                    :href="route('admin.candidates.index')"
-                    class="flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all duration-300 font-subtitle font-bold text-sm"
-                    :class="[route().current('admin.candidates.*') ? 'bg-highlight text-[#3a2800] shadow-md shadow-highlight/20' : 'text-white/70 hover:bg-white/10 hover:text-white']"
-                >
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
-                    </svg>
-                    <span v-if="isSidebarOpen" class="truncate">Candidats</span>
-                </Link>
+                <!-- Section super admin -->
+                <template v-if="$page.props.auth.user.role === 'super_admin'">
+                    <div class="pt-4 pb-2">
+                        <div
+                            v-if="isSidebarOpen"
+                            class="px-3 text-[9px] font-black uppercase tracking-[0.18em] text-white/25"
+                        >Configuration</div>
+                        <div v-else class="h-px w-8 mx-auto bg-white/10" />
+                    </div>
 
-                <Link
-                    :href="route('admin.quizzes.index')"
-                    class="flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all duration-300 font-subtitle font-bold text-sm"
-                    :class="[route().current('admin.quizzes.*') ? 'bg-highlight text-[#3a2800] shadow-md shadow-highlight/20' : 'text-white/70 hover:bg-white/10 hover:text-white']"
-                >
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-                    </svg>
-                    <span v-if="isSidebarOpen" class="truncate">Quiz</span>
-                </Link>
-
-                <Link
-                    :href="route('admin.job-positions.index')"
-                    class="flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all duration-300 font-subtitle font-bold text-sm"
-                    :class="[route().current('admin.job-positions.*') ? 'bg-highlight text-[#3a2800] shadow-md shadow-highlight/20' : 'text-white/70 hover:bg-white/10 hover:text-white']"
-                >
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-                    </svg>
-                    <span v-if="isSidebarOpen" class="truncate">Fiches de Poste</span>
-                </Link>
-
-                <Link
-                    :href="route('admin.comparative')"
-                    class="flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all duration-300 font-subtitle font-bold text-sm"
-                    :class="[route().current('admin.comparative') ? 'bg-highlight text-[#3a2800] shadow-md shadow-highlight/20' : 'text-white/70 hover:bg-white/10 hover:text-white']"
-                >
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
-                    </svg>
-                    <span v-if="isSidebarOpen" class="truncate">Comparateur</span>
-                </Link>
-
-                <div v-if="$page.props.auth.user.role === 'super_admin'" class="pt-4 pb-2">
-                    <div v-show="isSidebarOpen" class="px-3 text-[10px] font-black uppercase tracking-widest text-white/30">Configuration</div>
-                    <div v-show="!isSidebarOpen" class="h-[1px] w-8 mx-auto bg-white/10"></div>
-                </div>
-
-                <Link
-                    v-if="$page.props.auth.user.role === 'super_admin'"
-                    :href="route('admin.tenants.index')"
-                    class="flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all duration-300 font-subtitle font-bold text-sm"
-                    :class="[route().current('admin.tenants.*') ? 'bg-highlight text-[#3a2800] shadow-md shadow-highlight/20' : 'text-white/70 hover:bg-white/10 hover:text-white']"
-                >
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
-                    </svg>
-                    <span v-if="isSidebarOpen" class="truncate">Structures</span>
-                </Link>
-
-                <Link
-                    v-if="$page.props.auth.user.role === 'super_admin'"
-                    :href="route('admin.users.index')"
-                    class="flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all duration-300 font-subtitle font-bold text-sm"
-                    :class="[route().current('admin.users.*') ? 'bg-highlight text-[#3a2800] shadow-md shadow-highlight/20' : 'text-white/70 hover:bg-white/10 hover:text-white']"
-                >
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
-                    </svg>
-                    <span v-if="isSidebarOpen" class="truncate">Équipe SaaS</span>
-                </Link>
-
-                <Link
-                    v-if="$page.props.auth.user.role === 'super_admin'"
-                    :href="route('admin.logs.index')"
-                    class="flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all duration-300 font-subtitle font-bold text-sm"
-                    :class="[route().current('admin.logs.*') ? 'bg-highlight text-[#3a2800] shadow-md shadow-highlight/20' : 'text-white/70 hover:bg-white/10 hover:text-white']"
-                >
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
-                    </svg>
-                    <span v-if="isSidebarOpen" class="truncate">Logs de connexion</span>
-                </Link>
+                    <template v-for="item in superAdminItems" :key="item.route">
+                        <Link
+                            :href="route(item.route)"
+                            :title="!isSidebarOpen ? item.label : undefined"
+                            :class="[
+                                'flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all duration-150 font-sans font-bold text-[12.5px] tracking-[0.01em]',
+                                isSidebarOpen ? '' : 'justify-center',
+                                isActive(item)
+                                    ? 'bg-highlight text-highlight-dark shadow-md shadow-highlight/20'
+                                    : 'text-white/70 hover:bg-white/10 hover:text-white',
+                            ]"
+                        >
+                            <svg class="w-[17px] h-[17px] shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                <path :d="item.icon"/>
+                            </svg>
+                            <span v-if="isSidebarOpen" class="truncate">{{ item.label }}</span>
+                        </Link>
+                    </template>
+                </template>
             </nav>
 
-            <div class="p-4 border-t border-white/10 bg-primary/80">
-                <button
-                    @click="isSidebarOpen = !isSidebarOpen"
-                    class="flex items-center justify-center w-full h-10 rounded-lg text-white/50 hover:bg-white/10 hover:text-white transition-all duration-300"
-                >
-                    <svg v-if="isSidebarOpen" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 19l-7-7 7-7m8 14l-7-7 7-7" />
-                    </svg>
-                    <svg v-else xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5l7 7-7 7M5 5l7 7-7 7" />
-                    </svg>
-                </button>
-                <div v-show="isSidebarOpen" class="mt-4 text-[9px] font-bold uppercase tracking-widest text-[#3a7abf] text-center">
-                    App v{{ $page.props.app_version }}
-                </div>
-            </div>
-        </aside>
-
-        <!-- Main Content -->
-        <div class="flex-1 flex flex-col min-w-0 overflow-hidden bg-neutral">
-            <header class="h-16 shrink-0 flex items-center justify-between px-8 bg-white border-b border-anthracite/5 shadow-sm z-10 relative">
-                <div>
-                    <h2 v-if="$slots.header" class="font-serif font-black text-xl text-primary capitalize tracking-tight flex items-center gap-3">
-                        <div class="w-1.5 h-6 bg-highlight rounded-full hidden md:block"></div>
-                        <slot name="header" />
-                    </h2>
-                </div>
-
-                <div class="flex items-center gap-4">
+            <!-- Footer sidebar : user + collapse -->
+            <div class="px-3 py-3 border-t border-white/[0.07] shrink-0">
+                <!-- User info (sidebar ouverte) -->
+                <div v-if="isSidebarOpen" class="flex items-center gap-2.5 mb-3">
+                    <div class="w-8 h-8 rounded-full bg-highlight flex items-center justify-center text-[12px] font-black text-highlight-dark shrink-0">
+                        {{ $page.props.auth.user.name.charAt(0) }}
+                    </div>
+                    <div class="overflow-hidden flex-1 min-w-0">
+                        <div class="text-[12px] font-bold text-white truncate">{{ $page.props.auth.user.name }}</div>
+                        <div class="text-[10px] text-white/40 truncate">{{ $page.props.auth.user.role }}</div>
+                    </div>
                     <Dropdown align="right" width="48">
                         <template #trigger>
-                            <button class="flex items-center gap-2 text-sm font-subtitle font-bold hover:text-primary transition-colors cursor-pointer py-2">
-                                <div class="w-8 h-8 rounded-full bg-sand flex items-center justify-center text-primary border border-primary/10">
-                                    {{ $page.props.auth.user.name.charAt(0) }}
-                                </div>
-                                <span class="hidden md:block">{{ $page.props.auth.user.name }}</span>
-                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-anthracite/40" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+                            <button class="p-1.5 rounded-lg text-white/40 hover:text-white hover:bg-white/10 transition-colors">
+                                <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                    <circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/>
                                 </svg>
                             </button>
                         </template>
                         <template #content>
                             <DropdownLink :href="route('profile.edit')">Paramètres du profil</DropdownLink>
-                            <DropdownLink :href="route('admin.backup')" as="a" class="!text-sky font-bold" v-if="$page.props.auth.user.role === 'super_admin'">Sauvegarde Base de données</DropdownLink>
-                            <div class="border-t border-anthracite/5 my-1"></div>
-                            <DropdownLink :href="route('logout')" method="post" as="button" class="!text-accent font-bold">Se déconnecter</DropdownLink>
+                            <DropdownLink
+                                v-if="$page.props.auth.user.role === 'super_admin'"
+                                :href="route('admin.backup')"
+                                as="a"
+                                class="!text-primary-light font-bold"
+                            >Sauvegarde BDD</DropdownLink>
+                            <div class="border-t border-ink/5 my-1"/>
+                            <DropdownLink :href="route('logout')" method="post" as="button" class="!text-accent font-bold">
+                                Se déconnecter
+                            </DropdownLink>
                         </template>
                     </Dropdown>
                 </div>
+
+                <!-- Collapse button -->
+                <button
+                    @click="isSidebarOpen = !isSidebarOpen"
+                    class="flex items-center justify-center w-full h-9 rounded-xl text-white/40 hover:bg-white/10 hover:text-white transition-all duration-200"
+                    :title="isSidebarOpen ? 'Réduire' : 'Agrandir'"
+                >
+                    <svg class="w-4 h-4 transition-transform duration-300" :class="isSidebarOpen ? '' : 'rotate-180'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M15 18l-6-6 6-6"/>
+                    </svg>
+                </button>
+
+                <!-- Version -->
+                <div v-if="isSidebarOpen" class="mt-2 text-center text-[9px] font-bold uppercase tracking-[0.12em] text-white/20">
+                    v{{ $page.props.app_version }}
+                </div>
+            </div>
+        </aside>
+
+        <!-- ─── Main ─────────────────────────────────────────────────────── -->
+        <div class="flex-1 flex flex-col min-w-0 overflow-hidden">
+
+            <!-- Header -->
+            <header class="h-[60px] shrink-0 flex items-center justify-between px-8 bg-surface border-b border-ink/[0.05] shadow-xs z-10">
+                <div class="flex items-center gap-3">
+                    <!-- Accent bar -->
+                    <div class="w-[3px] h-5 bg-highlight rounded-full hidden md:block" />
+                    <!-- Page title -->
+                    <h2 v-if="$slots.header" class="font-serif font-black text-[17px] text-primary tracking-tight">
+                        <slot name="header" />
+                    </h2>
+                </div>
+
+                <div class="flex items-center gap-3">
+                    <!-- Slot pour actions contextuelles (ex: bouton "Nouveau") -->
+                    <slot name="actions" />
+
+                    <!-- Badge rôle -->
+                    <span
+                        v-if="$page.props.auth.user.role === 'super_admin'"
+                        class="bg-gradient-to-r from-accent to-highlight text-white px-3 py-1 rounded-full text-[9px] font-black tracking-widest uppercase shadow-sm"
+                    >GOD MODE</span>
+                    <span
+                        v-else-if="$page.props.auth.user.tenant"
+                        class="bg-primary/10 text-primary px-3 py-1 rounded-full text-[9px] font-black tracking-widest uppercase border border-primary/20"
+                    >{{ $page.props.auth.user.tenant.name }}</span>
+                </div>
             </header>
 
-            <main class="flex-1 overflow-y-auto p-4 md:p-8">
+            <!-- Content -->
+            <main class="flex-1 overflow-y-auto p-7">
                 <slot />
             </main>
+
         </div>
     </div>
 </template>
 
-<style>
-/* Firefox scrollbar config for sidebar */
-.custom-scrollbar {
-    scrollbar-width: thin;
-    scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
-}
-.custom-scrollbar::-webkit-scrollbar {
-    width: 4px;
-}
-.custom-scrollbar::-webkit-scrollbar-track {
-    background: transparent;
-}
-.custom-scrollbar::-webkit-scrollbar-thumb {
-    background-color: rgba(255, 255, 255, 0.1);
-    border-radius: 10px;
-}
+<style scoped>
+.fade-enter-active, .fade-leave-active { transition: opacity 0.15s ease; }
+.fade-enter-from, .fade-leave-to       { opacity: 0; }
+
+/* Scrollbar sidebar Firefox */
+.scrollbar-thin          { scrollbar-width: thin; }
+.scrollbar-thumb-white\/10 { scrollbar-color: rgba(255,255,255,0.1) transparent; }
 </style>
diff --git a/resources/js/Layouts/AdminLayout.vue.backup b/resources/js/Layouts/AdminLayout.vue.backup
new file mode 100644
index 0000000..10d2830
--- /dev/null
+++ b/resources/js/Layouts/AdminLayout.vue.backup
@@ -0,0 +1,203 @@
+<script setup>
+import { ref } from 'vue';
+import { Link } from '@inertiajs/vue3';
+import ApplicationLogo from '@/Components/ApplicationLogo.vue';
+import Dropdown from '@/Components/Dropdown.vue';
+import DropdownLink from '@/Components/DropdownLink.vue';
+import EnvironmentBanner from '@/Components/EnvironmentBanner.vue';
+
+const isSidebarOpen = ref(true);
+</script>
+
+<template>
+    <EnvironmentBanner />
+    <div class="min-h-screen bg-sand flex text-anthracite font-sans selection:bg-highlight selection:text-anthracite">
+        <!-- Sidebar -->
+        <aside
+            :class="[isSidebarOpen ? 'w-64' : 'w-20']"
+            class="hidden md:flex flex-col bg-primary transition-all duration-300 shadow-xl z-20"
+        >
+            <div class="h-16 flex items-center px-5 bg-primary/90 border-b border-white/10">
+                <Link :href="route('dashboard')" class="flex items-center gap-3 overflow-hidden ml-1">
+                    <div class="w-8 h-8 bg-highlight rounded flex items-center justify-center shrink-0 shadow-sm shadow-highlight/20">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-[#3a2800]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9l-.707.707M12 18v3m4.95-4.95l.707.707M12 3c-4.418 0-8 3.582-8 8 0 2.209.895 4.209 2.343 5.657L12 21l5.657-5.343A7.994 7.994 0 0020 11c0-4.418-3.582-8-8-8z" />
+                        </svg>
+                    </div>
+                    <span v-if="isSidebarOpen" class="font-serif font-black text-xl tracking-tight whitespace-nowrap text-white">RECRU<span class="text-accent italic px-0.5">IT</span></span>
+                </Link>
+            </div>
+
+            <nav class="flex-1 py-6 px-3 space-y-1.5 overflow-y-auto custom-scrollbar">
+                <Link
+                    :href="route('dashboard')"
+                    class="flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all duration-300 font-subtitle font-bold text-sm"
+                    :class="[route().current('dashboard') ? 'bg-highlight text-[#3a2800] shadow-md shadow-highlight/20' : 'text-white/70 hover:bg-white/10 hover:text-white']"
+                >
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
+                    </svg>
+                    <span v-if="isSidebarOpen" class="truncate">Tableau de bord</span>
+                </Link>
+
+                <Link
+                    :href="route('admin.candidates.index')"
+                    class="flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all duration-300 font-subtitle font-bold text-sm"
+                    :class="[route().current('admin.candidates.*') ? 'bg-highlight text-[#3a2800] shadow-md shadow-highlight/20' : 'text-white/70 hover:bg-white/10 hover:text-white']"
+                >
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
+                    </svg>
+                    <span v-if="isSidebarOpen" class="truncate">Candidats</span>
+                </Link>
+
+                <Link
+                    :href="route('admin.quizzes.index')"
+                    class="flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all duration-300 font-subtitle font-bold text-sm"
+                    :class="[route().current('admin.quizzes.*') ? 'bg-highlight text-[#3a2800] shadow-md shadow-highlight/20' : 'text-white/70 hover:bg-white/10 hover:text-white']"
+                >
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                    </svg>
+                    <span v-if="isSidebarOpen" class="truncate">Quiz</span>
+                </Link>
+
+                <Link
+                    :href="route('admin.job-positions.index')"
+                    class="flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all duration-300 font-subtitle font-bold text-sm"
+                    :class="[route().current('admin.job-positions.*') ? 'bg-highlight text-[#3a2800] shadow-md shadow-highlight/20' : 'text-white/70 hover:bg-white/10 hover:text-white']"
+                >
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                    </svg>
+                    <span v-if="isSidebarOpen" class="truncate">Fiches de Poste</span>
+                </Link>
+
+                <Link
+                    :href="route('admin.comparative')"
+                    class="flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all duration-300 font-subtitle font-bold text-sm"
+                    :class="[route().current('admin.comparative') ? 'bg-highlight text-[#3a2800] shadow-md shadow-highlight/20' : 'text-white/70 hover:bg-white/10 hover:text-white']"
+                >
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
+                    </svg>
+                    <span v-if="isSidebarOpen" class="truncate">Comparateur</span>
+                </Link>
+
+                <div v-if="$page.props.auth.user.role === 'super_admin'" class="pt-4 pb-2">
+                    <div v-show="isSidebarOpen" class="px-3 text-[10px] font-black uppercase tracking-widest text-white/30">Configuration</div>
+                    <div v-show="!isSidebarOpen" class="h-[1px] w-8 mx-auto bg-white/10"></div>
+                </div>
+
+                <Link
+                    v-if="$page.props.auth.user.role === 'super_admin'"
+                    :href="route('admin.tenants.index')"
+                    class="flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all duration-300 font-subtitle font-bold text-sm"
+                    :class="[route().current('admin.tenants.*') ? 'bg-highlight text-[#3a2800] shadow-md shadow-highlight/20' : 'text-white/70 hover:bg-white/10 hover:text-white']"
+                >
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
+                    </svg>
+                    <span v-if="isSidebarOpen" class="truncate">Structures</span>
+                </Link>
+
+                <Link
+                    v-if="$page.props.auth.user.role === 'super_admin'"
+                    :href="route('admin.users.index')"
+                    class="flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all duration-300 font-subtitle font-bold text-sm"
+                    :class="[route().current('admin.users.*') ? 'bg-highlight text-[#3a2800] shadow-md shadow-highlight/20' : 'text-white/70 hover:bg-white/10 hover:text-white']"
+                >
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
+                    </svg>
+                    <span v-if="isSidebarOpen" class="truncate">Équipe SaaS</span>
+                </Link>
+
+                <Link
+                    v-if="$page.props.auth.user.role === 'super_admin'"
+                    :href="route('admin.logs.index')"
+                    class="flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all duration-300 font-subtitle font-bold text-sm"
+                    :class="[route().current('admin.logs.*') ? 'bg-highlight text-[#3a2800] shadow-md shadow-highlight/20' : 'text-white/70 hover:bg-white/10 hover:text-white']"
+                >
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
+                    </svg>
+                    <span v-if="isSidebarOpen" class="truncate">Logs de connexion</span>
+                </Link>
+            </nav>
+
+            <div class="p-4 border-t border-white/10 bg-primary/80">
+                <button
+                    @click="isSidebarOpen = !isSidebarOpen"
+                    class="flex items-center justify-center w-full h-10 rounded-lg text-white/50 hover:bg-white/10 hover:text-white transition-all duration-300"
+                >
+                    <svg v-if="isSidebarOpen" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 19l-7-7 7-7m8 14l-7-7 7-7" />
+                    </svg>
+                    <svg v-else xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5l7 7-7 7M5 5l7 7-7 7" />
+                    </svg>
+                </button>
+                <div v-show="isSidebarOpen" class="mt-4 text-[9px] font-bold uppercase tracking-widest text-[#3a7abf] text-center">
+                    App v{{ $page.props.app_version }}
+                </div>
+            </div>
+        </aside>
+
+        <!-- Main Content -->
+        <div class="flex-1 flex flex-col min-w-0 overflow-hidden bg-neutral">
+            <header class="h-16 shrink-0 flex items-center justify-between px-8 bg-white border-b border-anthracite/5 shadow-sm z-10 relative">
+                <div>
+                    <h2 v-if="$slots.header" class="font-serif font-black text-xl text-primary capitalize tracking-tight flex items-center gap-3">
+                        <div class="w-1.5 h-6 bg-highlight rounded-full hidden md:block"></div>
+                        <slot name="header" />
+                    </h2>
+                </div>
+
+                <div class="flex items-center gap-4">
+                    <Dropdown align="right" width="48">
+                        <template #trigger>
+                            <button class="flex items-center gap-2 text-sm font-subtitle font-bold hover:text-primary transition-colors cursor-pointer py-2">
+                                <div class="w-8 h-8 rounded-full bg-sand flex items-center justify-center text-primary border border-primary/10">
+                                    {{ $page.props.auth.user.name.charAt(0) }}
+                                </div>
+                                <span class="hidden md:block">{{ $page.props.auth.user.name }}</span>
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-anthracite/40" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+                                </svg>
+                            </button>
+                        </template>
+                        <template #content>
+                            <DropdownLink :href="route('profile.edit')">Paramètres du profil</DropdownLink>
+                            <DropdownLink :href="route('admin.backup')" as="a" class="!text-sky font-bold" v-if="$page.props.auth.user.role === 'super_admin'">Sauvegarde Base de données</DropdownLink>
+                            <div class="border-t border-anthracite/5 my-1"></div>
+                            <DropdownLink :href="route('logout')" method="post" as="button" class="!text-accent font-bold">Se déconnecter</DropdownLink>
+                        </template>
+                    </Dropdown>
+                </div>
+            </header>
+
+            <main class="flex-1 overflow-y-auto p-4 md:p-8">
+                <slot />
+            </main>
+        </div>
+    </div>
+</template>
+
+<style>
+/* Firefox scrollbar config for sidebar */
+.custom-scrollbar {
+    scrollbar-width: thin;
+    scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
+}
+.custom-scrollbar::-webkit-scrollbar {
+    width: 4px;
+}
+.custom-scrollbar::-webkit-scrollbar-track {
+    background: transparent;
+}
+.custom-scrollbar::-webkit-scrollbar-thumb {
+    background-color: rgba(255, 255, 255, 0.1);
+    border-radius: 10px;
+}
+</style>
diff --git a/resources/js/Pages/Admin/Candidates/Show.vue b/resources/js/Pages/Admin/Candidates/Show.vue
index 286f246..fa80716 100644
--- a/resources/js/Pages/Admin/Candidates/Show.vue
+++ b/resources/js/Pages/Admin/Candidates/Show.vue
@@ -20,12 +20,9 @@ const props = defineProps({
 
 const page = usePage();
 const flashSuccess = computed(() => page.props.flash?.success);
-
 const activeTab = ref('overview');
 
-const positionForm = useForm({
-    job_position_id: props.candidate.job_position_id || ''
-});
+const positionForm = useForm({ job_position_id: props.candidate.job_position_id || '' });
 
 const showEditDetailsModal = ref(false);
 const detailsForm = useForm({
@@ -34,43 +31,20 @@ const detailsForm = useForm({
     phone: props.candidate.phone || '',
     linkedin_url: props.candidate.linkedin_url || '',
 });
-
 const updateDetails = () => {
     detailsForm.put(route('admin.candidates.update', props.candidate.id), {
         preserveScroll: true,
-        onSuccess: () => {
-            showEditDetailsModal.value = false;
-        },
+        onSuccess: () => { showEditDetailsModal.value = false; },
     });
 };
+const updatePosition = () => positionForm.patch(route('admin.candidates.update-position', props.candidate.id), { preserveScroll: true });
 
-const updatePosition = () => {
-    positionForm.patch(route('admin.candidates.update-position', props.candidate.id), {
-        preserveScroll: true,
-    });
-};
-
-const tenantForm = useForm({
-    tenant_id: props.candidate.tenant_id || ''
-});
-
-const updateTenant = () => {
-    tenantForm.patch(route('admin.candidates.update-tenant', props.candidate.id), {
-        preserveScroll: true,
-    });
-};
-
-const toggleSelection = () => {
-    router.patch(route('admin.candidates.toggle-selection', props.candidate.id), {}, { preserveScroll: true });
-};
+const tenantForm = useForm({ tenant_id: props.candidate.tenant_id || '' });
+const updateTenant = () => tenantForm.patch(route('admin.candidates.update-tenant', props.candidate.id), { preserveScroll: true });
+const toggleSelection = () => router.patch(route('admin.candidates.toggle-selection', props.candidate.id), {}, { preserveScroll: true });
 
 const selectedDocument = ref(null);
-
-const docForm = useForm({
-    cv: null,
-    cover_letter: null,
-    _method: 'PUT' // For file upload via PUT in Laravel
-});
+const docForm = useForm({ cv: null, cover_letter: null, _method: 'PUT' });
 
 const rawInterviewDetails = props.candidate.interview_details || {};
 const notesForm = useForm({
@@ -80,7 +54,7 @@ const notesForm = useForm({
         appreciation: rawInterviewDetails.appreciation || 0,
         soft_skills: rawInterviewDetails.soft_skills || [
             { name: 'Communication & Pédagogie', score: 0 },
-            { name: 'Esprit d\'équipe & Collaboration', score: 0 },
+            { name: "Esprit d'équipe & Collaboration", score: 0 },
             { name: 'Résolution de problèmes & Logique', score: 0 },
             { name: 'Adaptabilité & Résilience', score: 0 },
             { name: 'Autonomie & Proactivité', score: 0 }
@@ -96,246 +70,135 @@ const scoreForm = useForm({
 
 const isPreview = ref(true);
 const renderedNotes = computed(() => marked.parse(notesForm.notes || ''));
-
 const openAttempts = ref([]);
-
 const toggleAttempt = (id) => {
-    if (openAttempts.value.includes(id)) {
-        openAttempts.value = openAttempts.value.filter(item => item !== id);
-    } else {
-        openAttempts.value.push(id);
-    }
+    openAttempts.value = openAttempts.value.includes(id)
+        ? openAttempts.value.filter(i => i !== id)
+        : [...openAttempts.value, id];
 };
-
-const formatDateTime = (date) => {
-    return new Date(date).toLocaleString('fr-FR', {
-        day: '2-digit',
-        month: '2-digit',
-        year: 'numeric',
-        hour: '2-digit',
-        minute: '2-digit'
-    });
-};
-
+const formatDateTime = (date) => new Date(date).toLocaleString('fr-FR', { day:'2-digit', month:'2-digit', year:'numeric', hour:'2-digit', minute:'2-digit' });
 const deleteCandidate = () => {
-    if (confirm('Voulez-vous vraiment supprimer ce candidat ? Toutes ses données seront DEFINITIVEMENT perdues.')) {
+    if (confirm('Supprimer ce candidat ? Toutes ses données seront définitivement perdues.'))
         router.delete(route('admin.candidates.destroy', props.candidate.id));
-    }
 };
-
 const deleteAttempt = (id) => {
-    if (confirm('Voulez-vous vraiment supprimer cette tentative de test ? Cette action sera enregistrée dans les logs.')) {
-        router.delete(route('admin.attempts.destroy', id), {
-            preserveScroll: true
-        });
-    }
+    if (confirm('Supprimer cette tentative ?'))
+        router.delete(route('admin.attempts.destroy', id), { preserveScroll: true });
 };
-
 const resetPassword = () => {
-    if (confirm('Générer un nouveau mot de passe pour ce candidat ?')) {
+    if (confirm('Générer un nouveau mot de passe ?'))
         router.post(route('admin.candidates.reset-password', props.candidate.id));
-    }
 };
-
-const updateDocuments = () => {
-    docForm.post(route('admin.candidates.update', props.candidate.id), {
-        onSuccess: () => {
-            docForm.reset();
-        },
-    });
-};
-
-
+const updateDocuments = () => docForm.post(route('admin.candidates.update', props.candidate.id), { onSuccess: () => docForm.reset() });
 const saveScores = () => {
-    scoreForm.patch(route('admin.candidates.update-scores', props.candidate.id), {
-        preserveScroll: true,
-    });
+    scoreForm.cv_score = Math.min(20, Math.max(0, scoreForm.cv_score));
+    scoreForm.motivation_score = Math.min(10, Math.max(0, scoreForm.motivation_score));
+    scoreForm.interview_score = Math.min(30, Math.max(0, scoreForm.interview_score));
+    scoreForm.patch(route('admin.candidates.update-scores', props.candidate.id), { preserveScroll: true });
 };
-
-const openPreview = (doc) => {
-    selectedDocument.value = doc;
+const openPreview = (doc) => { selectedDocument.value = doc; };
+const updateAnswerScore = (answerId, score, max) => {
+    const clamped = Math.min(max, Math.max(0, parseFloat(score) || 0));
+    router.patch(route('admin.answers.update-score', answerId), { score: clamped }, { preserveScroll: true });
 };
-
-const updateAnswerScore = (answerId, score) => {
-    router.patch(route('admin.answers.update-score', answerId), {
-        score: score
-    }, {
-        preserveScroll: true,
-    });
+const clampScore = (key, max) => {
+    if (scoreForm[key] > max) scoreForm[key] = max;
+    if (scoreForm[key] < 0) scoreForm[key] = 0;
 };
 
 // ─── Radar Chart ──────────────────────────────────────────────────────────────
 const radarCanvasRef = ref(null);
 let radarChartInstance = null;
 
-// Calcul du score test (meilleure tentative ramenée sur 20)
 const bestTestScore = computed(() => {
-    if (!props.candidate.attempts || props.candidate.attempts.length === 0) return 0;
+    if (!props.candidate.attempts?.length) return 0;
     const finished = props.candidate.attempts.filter(a => a.finished_at && a.max_score > 0);
-    if (finished.length === 0) return 0;
-    return Math.max(...finished.map(a => (a.score / a.max_score) * 20));
+    return finished.length ? Math.max(...finished.map(a => (a.score / a.max_score) * 20)) : 0;
 });
-
-// Calculated Soft Skills average
 const softSkillsScore = computed(() => {
     const skills = notesForm.interview_details.soft_skills || [];
-    if (skills.length === 0) return 0;
-    const total = skills.reduce((acc, s) => acc + (parseFloat(s.score) || 0), 0);
-    return Number((total / skills.length).toFixed(1));
+    if (!skills.length) return 0;
+    return Number((skills.reduce((a, s) => a + (parseFloat(s.score) || 0), 0) / skills.length).toFixed(1));
 });
-
-// Données radar normalisées en % (chaque axe / son max)
 const radarData = computed(() => ([
     Math.round((parseFloat(scoreForm.cv_score) / 20) * 100),
     Math.round((parseFloat(scoreForm.motivation_score) / 10) * 100),
     Math.round((parseFloat(scoreForm.interview_score) / 30) * 100),
     Math.round((bestTestScore.value / 20) * 100),
-    Math.round((softSkillsScore.value / 10) * 100), // Max is 10 for avg soft skills
+    Math.round((softSkillsScore.value / 10) * 100),
 ]));
 
 const buildRadarChart = () => {
     if (!radarCanvasRef.value) return;
-    if (radarChartInstance) {
-        radarChartInstance.destroy();
-        radarChartInstance = null;
-    }
-
-    const isDark = false; // Désactivation forcée du mode sombre
-    const gridColor = isDark ? 'rgba(148,163,184,0.15)' : 'rgba(100,116,139,0.15)';
-    const labelColor = isDark ? '#94a3b8' : '#64748b';
-
+    if (radarChartInstance) { radarChartInstance.destroy(); radarChartInstance = null; }
     radarChartInstance = new Chart(radarCanvasRef.value, {
         type: 'radar',
         data: {
             labels: ['Analyse CV', 'Lettre Motiv.', 'Entretien', 'Test Technique', 'Soft Skills'],
             datasets: [{
-                label: 'Profil Candidat (%)',
+                label: 'Profil (%)',
                 data: radarData.value,
-                backgroundColor: 'rgba(99,102,241,0.15)',
-                borderColor: 'rgba(99,102,241,0.9)',
+                backgroundColor: 'rgba(26,75,140,0.12)',
+                borderColor: '#1a4b8c',
                 borderWidth: 2.5,
-                pointBackgroundColor: 'rgba(99,102,241,1)',
+                pointBackgroundColor: '#f5a800',
                 pointBorderColor: '#fff',
                 pointBorderWidth: 2,
                 pointRadius: 5,
                 pointHoverRadius: 7,
-                pointHoverBackgroundColor: 'rgba(139,92,246,1)',
             }]
         },
         options: {
-            responsive: true,
-            maintainAspectRatio: true,
-            animation: { duration: 700, easing: 'easeInOutQuart' },
+            responsive: true, maintainAspectRatio: true,
+            animation: { duration: 600, easing: 'easeInOutQuart' },
             plugins: {
                 legend: { display: false },
-                tooltip: {
-                    callbacks: {
-                        label: (ctx) => ` ${ctx.raw}%`,
-                    },
-                    backgroundColor: isDark ? '#1e293b' : '#fff',
-                    titleColor: isDark ? '#e2e8f0' : '#0f172a',
-                    bodyColor: isDark ? '#94a3b8' : '#475569',
-                    borderColor: isDark ? '#334155' : '#e2e8f0',
-                    borderWidth: 1,
-                    padding: 10,
-                    cornerRadius: 10,
-                }
+                tooltip: { callbacks: { label: (ctx) => ` ${ctx.raw}%` }, backgroundColor:'#fff', titleColor:'#1a4b8c', bodyColor:'#2d2d2d', borderColor:'rgba(45,45,45,0.1)', borderWidth:1, padding:10, cornerRadius:10 }
             },
             scales: {
                 r: {
-                    min: 0,
-                    max: 100,
-                    ticks: {
-                        stepSize: 25,
-                        color: labelColor,
-                        backdropColor: 'transparent',
-                        font: { size: 9, weight: 'bold' },
-                        callback: (v) => v + '%',
-                    },
-                    grid: { color: gridColor },
-                    angleLines: { color: gridColor },
-                    pointLabels: {
-                        color: labelColor,
-                        font: { size: 11, weight: 'bold' },
-                    }
+                    min: 0, max: 100,
+                    ticks: { stepSize:25, color:'rgba(45,45,45,0.3)', backdropColor:'transparent', font:{size:9,weight:'bold'}, callback: v => v+'%' },
+                    grid: { color:'rgba(45,45,45,0.07)' },
+                    angleLines: { color:'rgba(45,45,45,0.07)' },
+                    pointLabels: { color:'rgba(45,45,45,0.55)', font:{size:11,weight:'bold'} }
                 }
             }
         }
     });
 };
 
-onMounted(() => {
-    nextTick(() => buildRadarChart());
+onMounted(() => nextTick(() => buildRadarChart()));
+onUnmounted(() => { if (radarChartInstance) radarChartInstance.destroy(); });
+watch(() => [scoreForm.cv_score, scoreForm.motivation_score, scoreForm.interview_score, bestTestScore.value, softSkillsScore.value], () => {
+    if (radarChartInstance) { radarChartInstance.data.datasets[0].data = radarData.value; radarChartInstance.update(); }
 });
+watch(activeTab, t => { if (t === 'overview') nextTick(() => buildRadarChart()); });
 
-onUnmounted(() => {
-    if (radarChartInstance) radarChartInstance.destroy();
-});
-
-// Mise à jour du radar quand les scores changent
-watch(
-    () => [scoreForm.cv_score, scoreForm.motivation_score, scoreForm.interview_score, bestTestScore.value, softSkillsScore.value],
-    () => {
-        if (radarChartInstance) {
-            radarChartInstance.data.datasets[0].data = radarData.value;
-            radarChartInstance.update();
-        }
-    }
-);
-
-// Ré-initialisation du radar lors du switch d'onglet
-watch(activeTab, (newTab) => {
-    if (newTab === 'overview') {
-        nextTick(() => buildRadarChart());
-    }
-});
-// ──────────────────────────────────────────────────────────────────────────────
-
+// ─── AI ───────────────────────────────────────────────────────────────────────
 const aiAnalysis = ref(props.candidate.ai_analysis || null);
 const isAnalyzing = ref(false);
 const selectedProvider = ref(props.ai_config?.default || 'ollama');
 const forceAnalysis = ref(false);
 
-// ─── Interview Scoring Logic ───────────────────────────────────────────────────
 const calculatedInterviewScore = computed(() => {
-    const qScore = (notesForm.interview_details.questions || []).reduce((acc, q) => acc + (parseFloat(q.score) || 0), 0);
-    const appScore = parseFloat(notesForm.interview_details.appreciation) || 0;
-    return Math.min(30, qScore + appScore);
+    const qScore = (notesForm.interview_details.questions || []).reduce((a, q) => a + (parseFloat(q.score) || 0), 0);
+    return Math.min(30, qScore + (parseFloat(notesForm.interview_details.appreciation) || 0));
 });
 
-// Auto-populate questions from AI analysis if empty
-watch(aiAnalysis, (newVal) => {
-    if (newVal && newVal.questions_entretien_suggerees && (!notesForm.interview_details.questions || notesForm.interview_details.questions.length === 0)) {
-        notesForm.interview_details.questions = newVal.questions_entretien_suggerees.map(q => ({
-            question: q,
-            score: 0,
-            comment: ''
-        }));
+watch(aiAnalysis, (val) => {
+    if (val?.questions_entretien_suggerees && !notesForm.interview_details.questions?.length) {
+        notesForm.interview_details.questions = val.questions_entretien_suggerees.map(q => ({ question: q, score: 0, comment: '' }));
     }
 }, { immediate: true });
 
-// Sync with global score form and auto-save logic
-watch(calculatedInterviewScore, (newVal) => {
-    scoreForm.interview_score = newVal;
-});
+watch(calculatedInterviewScore, v => { scoreForm.interview_score = v; });
 
-const saveNotes = () => {
-    notesForm.transform((data) => ({
-        ...data,
-        interview_score: calculatedInterviewScore.value
-    })).patch(route('admin.candidates.update-notes', props.candidate.id), {
-        preserveScroll: true,
-        onSuccess: () => {
-            // Update raw candidate data to reflect the new score in computed fields if necessary
-            props.candidate.interview_score = calculatedInterviewScore.value;
-            props.candidate.interview_details = notesForm.interview_details;
-        }
-    });
-};
+const saveNotes = () => notesForm.transform(d => ({ ...d, interview_score: calculatedInterviewScore.value }))
+    .patch(route('admin.candidates.update-notes', props.candidate.id), { preserveScroll: true });
 
-// Error Modal state
 const showErrorModal = ref(false);
-const modalErrorMessage = ref("");
+const modalErrorMessage = ref('');
 
 const runAI = async () => {
     if (!props.candidate.job_position_id) {
@@ -343,1093 +206,612 @@ const runAI = async () => {
         showErrorModal.value = true;
         return;
     }
-
     isAnalyzing.value = true;
     try {
-        const response = await axios.post(route('admin.candidates.analyze', props.candidate.id), {
-            provider: selectedProvider.value,
-            force: forceAnalysis.value
-        });
-        aiAnalysis.value = response.data;
-    } catch (error) {
-        console.error('AI Analysis Error:', error);
-        modalErrorMessage.value = error.response?.data?.error || "Une erreur est survenue lors de l'analyse.";
+        const r = await axios.post(route('admin.candidates.analyze', props.candidate.id), { provider: selectedProvider.value, force: forceAnalysis.value });
+        aiAnalysis.value = r.data;
+    } catch (e) {
+        modalErrorMessage.value = e.response?.data?.error || "Erreur lors de l'analyse.";
         showErrorModal.value = true;
-    } finally {
-        isAnalyzing.value = false;
-    }
+    } finally { isAnalyzing.value = false; }
 };
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+const statusMap = {
+    en_attente: { label:'En attente', cls:'bg-ink/5 text-ink/55' },
+    en_cours:   { label:'En cours',   cls:'bg-primary/10 text-primary' },
+    termine:    { label:'Terminé',    cls:'bg-success/10 text-success' },
+    refuse:     { label:'Refusé',     cls:'bg-accent/10 text-accent' },
+};
+const statusInfo = computed(() => statusMap[props.candidate.status] ?? statusMap.en_attente);
+
+const scoreColor = (pct) => pct >= 80 ? 'text-success' : pct >= 60 ? 'text-highlight' : 'text-accent';
+const barColor  = (pct) => pct >= 80 ? 'bg-success' : pct >= 60 ? 'bg-highlight' : 'bg-accent';
 </script>
 
 <template>
-    <Head :title="'Candidat - ' + candidate.user.name" />
+    <Head :title="`${candidate.user.name} — Profil`" />
 
     <AdminLayout>
         <template #header>
-            <div class="flex items-center gap-4">
-                <Link :href="route('admin.candidates.index')" class="p-2 hover:bg-slate-100 dark:hover:bg-slate-700 rounded-lg transition-colors">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
-                    </svg>
+            <div class="flex items-center gap-3">
+                <Link :href="route('admin.candidates.index')" class="text-ink/30 hover:text-primary transition-colors">
+                    <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg>
                 </Link>
-                <span>Détails Candidat</span>
+                <span class="text-ink/20">/</span>
+                <span>{{ candidate.user.name }}</span>
             </div>
         </template>
 
-        <!-- Flash Messages -->
-        <div v-if="flashSuccess" class="mb-8 p-6 bg-emerald-50 dark:bg-emerald-900/20 border border-emerald-200 dark:border-emerald-800 rounded-2xl flex items-center gap-4 animate-in fade-in slide-in-from-top-4 duration-500">
-            <div class="p-2 bg-emerald-500 rounded-lg text-white">
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
-                </svg>
+        <!-- ─── Flash ─────────────────────────────────────────────────────── -->
+        <Transition enter-active-class="transition ease-out duration-200" enter-from-class="opacity-0 -translate-y-2" leave-active-class="transition ease-in duration-150" leave-to-class="opacity-0 -translate-y-2">
+            <div v-if="flashSuccess" class="mb-5 flex items-center gap-3 bg-success/10 border border-success/20 text-success rounded-xl px-5 py-3 text-sm font-bold">
+                <svg class="w-4 h-4 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>
+                {{ flashSuccess }}
             </div>
-            <div class="flex-1">
-                <p class="font-bold text-emerald-800 dark:text-emerald-400">Action réussie !</p>
-                <p class="text-emerald-700 dark:text-emerald-500 text-sm">{{ flashSuccess }}</p>
-            </div>
-        </div>
+        </Transition>
 
-        <div class="space-y-8">
-            <!-- Hero Header (En-tête de Profil) -->
-            <div class="bg-white rounded-3xl shadow-sm border border-anthracite/5 overflow-visible z-10 sticky top-0 md:top-4">
-                <div class="h-16 md:h-20 bg-primary rounded-t-3xl relative overflow-hidden flex items-center px-8 relative">
-                    <div class="absolute inset-0 bg-[url('https://www.mediterranee-agglo.fr/sites/default/files/images/banniere-CABM-3.jpg')] opacity-10 bg-cover bg-center mix-blend-overlay"></div>
-                    <!-- Actions globales alignées à droite et stylées Or du midi -->
-                    <div class="ml-auto relative z-10 flex flex-wrap items-center justify-end gap-3 pt-2">
-                        <a :href="route('admin.candidates.export-dossier', candidate.id)" class="px-4 py-1.5 bg-[#e0b04c] text-[#3a2800] rounded-xl text-[10px] uppercase font-black font-subtitle flex items-center gap-2 hover:bg-[#e0b04c]/80 transition-all shadow-lg active:scale-95" title="Télécharger le rapport de synthèse">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-                            </svg>
-                            Rapport (PDF)
-                        </a>
-                        <a :href="route('admin.candidates.export-zip', candidate.id)" class="px-4 py-1.5 bg-[#e0b04c] text-[#3a2800] rounded-xl text-[10px] uppercase font-black font-subtitle flex items-center gap-2 hover:bg-[#e0b04c]/80 transition-all shadow-lg active:scale-95" title="Télécharger le dossier complet avec originaux">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" />
-                            </svg>
-                            Dossier Complet (ZIP)
-                        </a>
-                        <SecondaryButton @click="resetPassword" class="!px-3 !py-1 text-[10px] uppercase font-bold tracking-widest !bg-white/10 !border-none !text-white hover:!bg-white/20">Réinitialiser MDP</SecondaryButton>
-                        <DangerButton @click="deleteCandidate" class="!px-3 !py-1 text-[10px] uppercase font-bold tracking-widest !bg-accent hover:!bg-accent/80 !border-none">Supprimer</DangerButton>
+        <!-- ─── Layout: Sidebar + Main ────────────────────────────────────── -->
+        <div class="flex gap-5 items-start">
+
+            <!-- ══ Left panel ══════════════════════════════════════════════ -->
+            <div class="w-[280px] shrink-0 flex flex-col gap-4">
+
+                <!-- Identity card -->
+                <div class="bg-surface rounded-2xl border border-ink/[0.07] shadow-sm">
+                    <!-- Header band -->
+                    <div class="h-16 bg-primary relative rounded-t-2xl overflow-hidden">
+                        <div class="absolute inset-0 opacity-10" style="background: radial-gradient(circle at top right, #f5a800, transparent 70%)"></div>
+                        <!-- Selection star -->
+                        <button @click="toggleSelection" :title="candidate.is_selected ? 'Retirer la sélection' : 'Retenir ce candidat'"
+                            class="absolute top-3 right-3 p-1.5 rounded-lg transition-all"
+                            :class="candidate.is_selected ? 'text-highlight bg-highlight/20' : 'text-white/30 hover:text-highlight hover:bg-white/10'">
+                            <svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
+                        </button>
+                    </div>
+
+                    <!-- Avatar (overlapping) -->
+                    <div class="relative flex justify-center -mt-8 mb-3 z-10">
+                        <div class="w-16 h-16 rounded-full bg-sand border-4 border-surface flex items-center justify-center text-2xl font-black text-primary shadow-sm">
+                            {{ candidate.user.name.charAt(0) }}
+                        </div>
+                    </div>
+
+                    <div class="px-5 pb-5 text-center">
+                        <h2 class="font-serif font-black text-base text-ink leading-tight mb-1">{{ candidate.user.name }}</h2>
+                        <p class="text-xs text-ink/50 font-semibold mb-3">{{ candidate.job_position?.title || 'Poste non assigné' }}</p>
+                        <span :class="['inline-block px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-[0.12em]', statusInfo.cls]">
+                            {{ statusInfo.label }}
+                        </span>
+
+                        <!-- Contacts -->
+                        <div class="mt-4 space-y-2 text-left">
+                            <div class="flex items-center gap-2.5 text-xs text-ink/55 font-semibold">
+                                <svg class="w-3.5 h-3.5 text-ink/30 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2zM22 6l-10 7L2 6"/></svg>
+                                <span class="truncate">{{ candidate.user.email }}</span>
+                            </div>
+                            <div v-if="candidate.phone" class="flex items-center gap-2.5 text-xs text-ink/55 font-semibold">
+                                <svg class="w-3.5 h-3.5 text-ink/30 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z"/></svg>
+                                <span>{{ candidate.phone }}</span>
+                            </div>
+                            <a v-if="candidate.linkedin_url" :href="candidate.linkedin_url" target="_blank" class="flex items-center gap-2.5 text-xs text-primary font-bold hover:underline">
+                                <svg class="w-3.5 h-3.5 shrink-0" fill="currentColor" viewBox="0 0 24 24"><path d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z"/><circle cx="4" cy="4" r="2"/></svg>
+                                LinkedIn
+                            </a>
+                        </div>
+
+                        <!-- Actions -->
+                        <div class="mt-5 grid grid-cols-2 gap-2">
+                            <button @click="showEditDetailsModal = true"
+                                class="flex items-center justify-center gap-1.5 py-2 rounded-[10px] border border-ink/10 bg-transparent text-xs font-extrabold uppercase tracking-[0.07em] text-ink hover:bg-primary/5 hover:border-primary hover:text-primary transition-all duration-150">
+                                <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
+                                Éditer
+                            </button>
+                            <a :href="route('admin.candidates.export-dossier', candidate.id)" target="_blank"
+                                class="flex items-center justify-center gap-1.5 py-2 rounded-[10px] border border-ink/10 bg-transparent text-xs font-extrabold uppercase tracking-[0.07em] text-ink hover:bg-primary/5 hover:border-primary hover:text-primary transition-all duration-150">
+                                <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
+                                Exporter
+                            </a>
+                        </div>
+                        <button @click="toggleSelection"
+                            :class="['mt-2 w-full flex items-center justify-center gap-2 py-2.5 rounded-[10px] border-none text-xs font-extrabold uppercase tracking-[0.08em] transition-all duration-150',
+                                candidate.is_selected
+                                    ? 'bg-highlight/15 text-highlight border border-highlight/30 hover:bg-highlight/25'
+                                    : 'bg-highlight text-highlight-dark shadow-gold hover:brightness-105 hover:-translate-y-px']">
+                            <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="1.5"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
+                            {{ candidate.is_selected ? 'Retirer la sélection' : 'Retenir ce candidat' }}
+                        </button>
                     </div>
                 </div>
-                
-                <div class="px-6 md:px-8 pb-6 flex flex-col md:flex-row gap-6 relative">
-                    <!-- Avatar flottant -->
-                    <div class="w-24 h-24 md:w-32 md:h-32 bg-white rounded-3xl shadow-xl border-4 border-white flex items-center justify-center text-4xl md:text-5xl font-serif font-black text-primary -mt-12 md:-mt-16 relative z-10 shrink-0">
-                        {{ candidate.user.name.charAt(0) }}
-                    </div>
-                    
-                    <!-- Infos Principales -->
-                    <div class="flex-1 pt-2 md:pt-4 flex flex-col md:flex-row justify-between gap-6">
+
+                <!-- Score global card -->
+                <div class="bg-primary rounded-2xl p-5 relative overflow-hidden">
+                    <div class="absolute inset-0 opacity-10" style="background: radial-gradient(circle at bottom right, #f5a800, transparent 60%)"></div>
+                    <div class="relative z-10">
+                        <p class="text-[9px] font-black uppercase tracking-[0.18em] text-white/40 mb-2">Score Global Pondéré</p>
+                        <div class="flex items-end gap-2 mb-4">
+                            <span class="font-serif font-black text-4xl text-highlight leading-none">{{ candidate.weighted_score }}</span>
+                            <span class="text-sm text-white/40 font-semibold mb-1">/ 20</span>
+                        </div>
+                        <!-- Mini bars -->
                         <div class="space-y-2">
-                            <div class="flex items-center gap-3">
-                                <h3 class="text-2xl md:text-3xl font-serif font-black text-primary">{{ candidate.user.name }}</h3>
-                                <button @click="showEditDetailsModal = true" class="text-anthracite/20 hover:text-highlight transition-colors bg-neutral/50 p-1.5 rounded-lg">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
-                                    </svg>
-                                </button>
-                                <button 
-                                    @click="toggleSelection"
-                                    class="flex items-center gap-1.5 px-3 py-1 rounded-full text-[10px] font-subtitle uppercase tracking-[0.2em] transition-all ml-2 border"
-                                    :class="candidate.is_selected ? 'bg-highlight/10 text-[#3a2800] border-highlight/30' : 'bg-neutral text-anthracite/40 border-anthracite/5 hover:border-highlight hover:text-highlight'"
-                                    :title="candidate.is_selected ? 'Retirer des retenus' : 'Marquer pour entretien'"
-                                >
-                                    <svg v-if="candidate.is_selected" xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" viewBox="0 0 20 20" fill="currentColor">
-                                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
-                                    </svg>
-                                    <svg v-else xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
-                                    </svg>
-                                    {{ candidate.is_selected ? 'Retenu' : 'Sélectionner' }}
-                                </button>
-                            </div>
-                            
-                            <div class="flex flex-wrap items-center gap-4 text-xs font-medium text-anthracite/60 font-subtitle">
-                                <span class="flex items-center gap-1.5">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 opacity-50" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /></svg>
-                                    {{ candidate.user.email }}
-                                </span>
-                                <span v-if="candidate.phone" class="flex items-center gap-1.5 relative before:content-['•'] before:absolute before:-left-3 before:text-anthracite/20 ml-2">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 opacity-50" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" /></svg>
-                                    {{ candidate.phone }}
-                                </span>
-                                <a v-if="candidate.linkedin_url" :href="candidate.linkedin_url" target="_blank" class="flex items-center gap-1.5 hover:text-primary transition-colors relative before:content-['•'] before:absolute before:-left-3 before:text-anthracite/20 ml-2">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 opacity-50 m-0.5" fill="currentColor" viewBox="0 0 24 24"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/></svg>
-                                    LinkedIn
-                                </a>
-                            </div>
-                        </div>
-                        
-                        <!-- Sélecteurs (Poste & Structure) -->
-                        <div class="flex flex-col sm:flex-row gap-4 lg:min-w-[400px]">
-                            <div class="flex-1 space-y-1.5">
-                                <label class="text-[9px] font-subtitle font-black uppercase tracking-[0.2em] text-anthracite/40">Fiche de Poste ciblée</label>
-                                <select 
-                                    v-model="positionForm.job_position_id" 
-                                    @change="updatePosition"
-                                    class="w-full bg-neutral/50 border border-anthracite/5 rounded-xl py-2 px-3 text-xs font-bold text-primary focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all cursor-pointer shadow-sm"
-                                >
-                                    <option value="">Non assigné (Candidature spontanée)</option>
-                                    <option v-for="pos in jobPositions" :key="pos.id" :value="pos.id">
-                                        {{ pos.title }}
-                                    </option>
-                                </select>
-                            </div>
-
-                            <div v-if="page.props.auth.user.role === 'super_admin'" class="flex-1 space-y-1.5">
-                                <label class="text-[9px] font-subtitle font-black uppercase tracking-[0.2em] text-anthracite/40">Structure (Tenant)</label>
-                                <select 
-                                    v-model="tenantForm.tenant_id" 
-                                    @change="updateTenant"
-                                    class="w-full bg-neutral/50 border border-anthracite/5 rounded-xl py-2 px-3 text-xs font-bold text-primary focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all cursor-pointer shadow-sm"
-                                >
-                                    <option value="">Aucune structure</option>
-                                    <option v-for="tenant in tenants" :key="tenant.id" :value="tenant.id">
-                                        {{ tenant.name }}
-                                    </option>
-                                </select>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div> <!-- Fin Hero Header (387) -->
-
-                <!-- Tabs Navigation -->
-                <div class="border-t border-anthracite/5 px-6 md:px-8 bg-neutral/30 rounded-b-3xl">
-                    <div class="flex items-center gap-8 overflow-x-auto no-scrollbar">
-                        <button 
-                            @click="activeTab = 'overview'" 
-                            class="px-4 py-4 text-xs font-subtitle uppercase tracking-widest transition-all relative whitespace-nowrap"
-                            :class="activeTab === 'overview' ? 'text-primary font-black' : 'text-anthracite/40 hover:text-primary/70 font-bold'"
-                        >
-                            Vue d'ensemble
-                            <div v-if="activeTab === 'overview'" class="absolute bottom-0 left-0 right-0 h-0.5 bg-primary rounded-t-full"></div>
-                        </button>
-                        <button 
-                            @click="activeTab = 'ai_analysis'" 
-                            class="px-4 py-4 text-xs font-subtitle uppercase tracking-widest transition-all relative whitespace-nowrap"
-                            :class="activeTab === 'ai_analysis' ? 'text-primary font-black' : 'text-anthracite/40 hover:text-primary/70 font-bold'"
-                        >
-                            Analyse IA
-                            <div v-if="activeTab === 'ai_analysis'" class="absolute bottom-0 left-0 right-0 h-0.5 bg-primary rounded-t-full"></div>
-                        </button>
-                        <button 
-                            @click="activeTab = 'interview'" 
-                            class="px-4 py-4 text-xs font-subtitle uppercase tracking-widest transition-all relative whitespace-nowrap"
-                            :class="activeTab === 'interview' ? 'text-primary font-black' : 'text-anthracite/40 hover:text-primary/70 font-bold'"
-                        >
-                            Évaluation & Entretien
-                            <div v-if="activeTab === 'interview'" class="absolute bottom-0 left-0 right-0 h-0.5 bg-primary rounded-t-full"></div>
-                        </button>
-                        <button 
-                            @click="activeTab = 'documents'" 
-                            class="px-4 py-4 text-xs font-subtitle uppercase tracking-widest transition-all relative whitespace-nowrap flex items-center gap-2"
-                            :class="activeTab === 'documents' ? 'text-primary font-black' : 'text-anthracite/40 hover:text-primary/70 font-bold'"
-                        >
-                            Documents
-                            <span class="px-1.5 py-0.5 bg-anthracite/5 rounded text-[9px] min-w-[20px] text-center" :class="{ 'bg-primary/10 text-primary': activeTab === 'documents' }">{{ candidate.documents?.length || 0 }}</span>
-                            <div v-if="activeTab === 'documents'" class="absolute bottom-0 left-0 right-0 h-0.5 bg-primary rounded-t-full"></div>
-                        </button>
-                        <button 
-                            @click="activeTab = 'tests'" 
-                            class="px-4 py-4 text-xs font-subtitle uppercase tracking-widest transition-all relative whitespace-nowrap"
-                            :class="activeTab === 'tests' ? 'text-primary font-black' : 'text-anthracite/40 hover:text-primary/70 font-bold'"
-                        >
-                            Tests
-                            <div v-if="activeTab === 'tests'" class="absolute bottom-0 left-0 right-0 h-0.5 bg-primary rounded-t-full"></div>
-                        </button>
-                    </div>
-                </div>
-
-            <!-- Tab Content: Overview -->
-            <div v-if="activeTab === 'overview'" class="space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-500">
-                <!-- Scores Dashboard -->
-                <div class="bg-white dark:bg-slate-800 rounded-3xl shadow-xl border border-slate-200 dark:border-slate-700 overflow-hidden">
-                    <div class="p-8 bg-gradient-to-br from-slate-900 to-slate-800 text-white flex flex-col md:flex-row md:items-center justify-between gap-8">
-                        <div class="flex items-center gap-6">
-                            <div class="relative flex items-center justify-center">
-                                <svg class="w-24 h-24 transform -rotate-90">
-                                    <circle cx="48" cy="48" r="40" stroke="currentColor" stroke-width="8" fill="transparent" class="text-slate-700" />
-                                    <circle cx="48" cy="48" r="40" stroke="currentColor" stroke-width="8" fill="transparent" class="text-indigo-500"
-                                        :stroke-dasharray="251.2"
-                                        :stroke-dashoffset="251.2 - (candidate.weighted_score / 20) * 251.2"
-                                        stroke-linecap="round"
-                                    />
-                                </svg>
-                                <span class="absolute text-2xl font-black">{{ candidate.weighted_score }}</span>
-                            </div>
-                            <div>
-                                <h3 class="text-2xl font-black tracking-tight mb-1">Score Global</h3>
-                                <p class="text-slate-400 text-sm font-medium">Note pondérée sur 20</p>
-                            </div>
-                        </div>
-                        <div class="flex gap-4">
-                            <PrimaryButton @click="saveScores" v-if="scoreForm.isDirty" class="!bg-indigo-500 hover:!bg-indigo-400 !border-none animate-bounce">
-                                Enregistrer les modifications
-                            </PrimaryButton>
-                        </div>
-                    </div>
-
-                    <div class="p-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-                        <!-- CV Score -->
-                        <div class="group">
-                            <label class="text-[10px] font-black uppercase tracking-widest text-slate-400 mb-3 block">Analyse CV /20</label>
-                            <div class="relative">
-                                <input type="number" v-model="scoreForm.cv_score" min="0" max="20" step="0.5" 
-                                    class="w-full bg-slate-50 dark:bg-slate-900 border-none rounded-2xl p-4 font-black text-xl text-indigo-600 focus:ring-2 focus:ring-indigo-500/20 transition-all" />
-                                <div class="absolute right-4 top-1/2 -translate-y-1/2 text-slate-300 font-bold">/ 20</div>
-                            </div>
-                        </div>
-
-                        <!-- Letter Score -->
-                        <div class="group">
-                            <label class="text-[10px] font-black uppercase tracking-widest text-slate-400 mb-3 block">Lettre Motiv. /10</label>
-                            <div class="relative">
-                                <input type="number" v-model="scoreForm.motivation_score" min="0" max="10" step="0.5" 
-                                    class="w-full bg-slate-50 dark:bg-slate-900 border-none rounded-2xl p-4 font-black text-xl text-emerald-600 focus:ring-2 focus:ring-emerald-500/20 transition-all" />
-                                <div class="absolute right-4 top-1/2 -translate-y-1/2 text-slate-300 font-bold">/ 10</div>
-                            </div>
-                        </div>
-
-                        <!-- Interview Score -->
-                        <div class="group">
-                            <label class="text-[10px] font-black uppercase tracking-widest text-slate-400 mb-3 block">Entretien /30</label>
-                            <div class="relative">
-                                <input type="number" v-model="scoreForm.interview_score" min="0" max="30" step="0.5" 
-                                    class="w-full bg-slate-50 dark:bg-slate-900 border-none rounded-2xl p-4 font-black text-xl text-purple-600 focus:ring-2 focus:ring-purple-500/20 transition-all" />
-                                <div class="absolute right-4 top-1/2 -translate-y-1/2 text-slate-300 font-bold">/ 30</div>
-                            </div>
-                        </div>
-
-                        <!-- Test Score (Read Only) -->
-                        <div class="group">
-                            <label class="text-[10px] font-black uppercase tracking-widest text-slate-400 mb-3 block">Test Technique /20</label>
-                            <div class="w-full bg-slate-100 dark:bg-slate-900/50 rounded-2xl p-4 flex items-center justify-between border-2 border-dashed border-slate-200 dark:border-slate-700">
-                                <span class="font-black text-xl text-slate-500">
-                                    {{ candidate.attempts.length > 0 ? (Math.max(...candidate.attempts.map(a => a.max_score > 0 ? a.score/a.max_score : 0)) * 20).toFixed(2) : '0.00' }}
-                                </span>
-                                <div class="p-2 bg-white dark:bg-slate-800 rounded-lg shadow-sm font-bold text-[10px] text-slate-400">
-                                    / 20
+                            <div v-for="(item, i) in [
+                                { label:'CV', val: scoreForm.cv_score, max:20 },
+                                { label:'Lettre', val: scoreForm.motivation_score, max:10 },
+                                { label:'Entretien', val: scoreForm.interview_score, max:30 },
+                                { label:'Test', val: bestTestScore, max:20 },
+                            ]" :key="i" class="flex items-center gap-2">
+                                <span class="text-[9px] font-black text-white/35 uppercase w-14 shrink-0">{{ item.label }}</span>
+                                <div class="flex-1 h-1.5 bg-white/10 rounded-full overflow-hidden">
+                                    <div class="h-full bg-white/60 rounded-full transition-all duration-500" :style="{width: `${Math.min(100,(item.val/item.max)*100)}%`}" />
                                 </div>
+                                <span class="text-[9px] font-black text-white/50 tabular-nums w-8 text-right">{{ parseFloat(item.val).toFixed(1) }}</span>
                             </div>
                         </div>
                     </div>
                 </div>
 
-                <!-- Radar Chart Section -->
-                <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700 p-8">
-                    <div class="flex items-center justify-between mb-6">
-                        <h4 class="text-xl font-bold flex items-center gap-3">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z" />
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z" />
-                            </svg>
-                            Profil de Compétences
-                        </h4>
-                        <div class="flex flex-col items-end gap-1">
-                            <span class="text-[10px] font-black uppercase tracking-widest text-slate-400">Score global</span>
-                            <span class="text-2xl font-black text-indigo-600">{{ candidate.weighted_score }}<span class="text-sm text-slate-300 font-normal ml-1">/20</span></span>
+                <!-- AI Summary card (if analysed) -->
+                <div v-if="aiAnalysis" class="bg-surface rounded-2xl border border-ink/[0.07] shadow-sm p-5">
+                    <div class="flex items-center justify-between mb-3">
+                        <span class="text-[9px] font-black uppercase tracking-[0.16em] text-ink/35">Analyse IA</span>
+                        <div :class="['w-9 h-9 rounded-full flex items-center justify-center text-[11px] font-black',
+                            aiAnalysis.match_score >= 80 ? 'bg-success/12 text-success' :
+                            aiAnalysis.match_score >= 60 ? 'bg-highlight/15 text-highlight-on' : 'bg-accent/10 text-accent']">
+                            {{ aiAnalysis.match_score }}%
                         </div>
                     </div>
-
-                    <div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
-                        <!-- Radar Canvas -->
-                        <div class="relative flex items-center justify-center">
-                            <canvas ref="radarCanvasRef" class="max-h-72"></canvas>
-                        </div>
-
-                        <!-- Score Breakdown Legend -->
-                        <div class="space-y-4">
-                            <!-- CV -->
-                            <div class="group">
-                                <div class="flex justify-between items-center mb-1.5">
-                                    <span class="text-xs font-black uppercase tracking-widest text-slate-500">Analyse CV</span>
-                                    <span class="text-sm font-black text-indigo-600">{{ scoreForm.cv_score }} <span class="text-slate-300 font-normal">/ 20</span></span>
-                                </div>
-                                <div class="h-2 bg-slate-100 dark:bg-slate-700 rounded-full overflow-hidden">
-                                    <div 
-                                        class="h-full bg-gradient-to-r from-indigo-400 to-indigo-600 rounded-full transition-all duration-700"
-                                        :style="{ width: (scoreForm.cv_score / 20 * 100) + '%' }"
-                                    ></div>
-                                </div>
-                            </div>
-
-                            <!-- Motivation -->
-                            <div class="group">
-                                <div class="flex justify-between items-center mb-1.5">
-                                    <span class="text-xs font-black uppercase tracking-widest text-slate-500">Lettre de Motivation</span>
-                                    <span class="text-sm font-black text-emerald-600">{{ scoreForm.motivation_score }} <span class="text-slate-300 font-normal">/ 10</span></span>
-                                </div>
-                                <div class="h-2 bg-slate-100 dark:bg-slate-700 rounded-full overflow-hidden">
-                                    <div 
-                                        class="h-full bg-gradient-to-r from-emerald-400 to-emerald-600 rounded-full transition-all duration-700"
-                                        :style="{ width: (scoreForm.motivation_score / 10 * 100) + '%' }"
-                                    ></div>
-                                </div>
-                            </div>
-
-                            <!-- Entretien -->
-                            <div class="group">
-                                <div class="flex justify-between items-center mb-1.5">
-                                    <span class="text-xs font-black uppercase tracking-widest text-slate-500">Entretien</span>
-                                    <span class="text-sm font-black text-purple-600">{{ scoreForm.interview_score }} <span class="text-slate-300 font-normal">/ 30</span></span>
-                                </div>
-                                <div class="h-2 bg-slate-100 dark:bg-slate-700 rounded-full overflow-hidden">
-                                    <div 
-                                        class="h-full bg-gradient-to-r from-purple-400 to-purple-600 rounded-full transition-all duration-700"
-                                        :style="{ width: (scoreForm.interview_score / 30 * 100) + '%' }"
-                                    ></div>
-                                </div>
-                            </div>
-
-                            <!-- Test Technique -->
-                            <div class="group">
-                                <div class="flex justify-between items-center mb-1.5">
-                                    <span class="text-xs font-black uppercase tracking-widest text-slate-500">Test Technique</span>
-                                    <span class="text-sm font-black text-amber-600">{{ bestTestScore.toFixed(2) }} <span class="text-slate-300 font-normal">/ 20</span></span>
-                                </div>
-                                <div class="h-2 bg-slate-100 dark:bg-slate-700 rounded-full overflow-hidden">
-                                    <div 
-                                        class="h-full bg-gradient-to-r from-amber-400 to-amber-600 rounded-full transition-all duration-700"
-                                        :style="{ width: (bestTestScore / 20 * 100) + '%' }"
-                                    ></div>
-                                </div>
-                                </div>
-                            </div>
-                        </div>
-
-                        <!-- Score footer note -->
-                        <p class="text-[10px] text-slate-400 italic pt-6 border-t border-slate-100 dark:border-slate-700">
-                            Chaque axe est normalisé sur 100% par rapport à son barème maximum.
-                        </p>
-                    </div>
+                    <p class="text-xs text-ink/60 font-semibold leading-relaxed line-clamp-4">{{ aiAnalysis.synthese }}</p>
                 </div>
-            </div> <!-- Fin Overview Tab Content -->
 
-            <!-- Tab Content: AI Analysis -->
-            <div v-if="activeTab === 'ai_analysis'" class="space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-500">
-                <div class="bg-white dark:bg-slate-800 rounded-3xl shadow-lg border border-slate-200 dark:border-slate-700 p-10 overflow-hidden relative">
-                    <div class="flex flex-col xl:flex-row xl:items-center justify-between gap-8 mb-10 border-b border-slate-100 dark:border-slate-700 pb-8">
-                        <div>
-                            <h3 class="font-black text-3xl mb-4 flex items-center gap-4 flex-wrap">
-                                <div class="p-3 bg-indigo-500 text-white rounded-2xl shadow-indigo-200 shadow-lg">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9l-.707.707M12 21v-1m4.243-4.243l-.707-.707m2.828-9.9l-.707.707" />
-                                    </svg>
-                                </div>
-                                <span>Analyse IA de la Candidature</span>
-                                <div class="flex items-center gap-3">
-                                    <span v-if="aiAnalysis?.provider" class="text-sm px-4 py-1 rounded-full bg-slate-100 dark:bg-slate-900 text-slate-500 uppercase font-black border border-slate-200 dark:border-slate-700">
-                                        {{ aiAnalysis.provider }}
-                                    </span>
-                                    <span v-if="aiAnalysis?.analyzed_at" class="text-xs text-slate-400 italic font-medium">
-                                        Effectuée le {{ new Date(aiAnalysis.analyzed_at).toLocaleDateString('fr-FR', { day: 'numeric', month: 'long', year: 'numeric' }) }}
-                                    </span>
-                                </div>
-                            </h3>
-                            <p class="text-sm text-slate-400 mt-2 uppercase font-black tracking-[0.2em]">Moteur décisionnel assisté par Intelligence Artificielle</p>
-                        </div>
-                        
-                        <div class="flex flex-wrap items-center gap-6">
-                            <!-- Provider Selector -->
-                            <div v-if="props.ai_config?.enabled_providers" class="flex items-center bg-slate-100 dark:bg-slate-900/80 p-2 rounded-2xl border border-slate-200 dark:border-slate-800">
-                                <button 
-                                    v-for="provider in Object.keys(props.ai_config.enabled_providers)" 
-                                    :key="provider"
-                                    @click="selectedProvider = provider"
-                                    class="px-6 py-2.5 text-xs font-black uppercase tracking-widest rounded-xl transition-all"
-                                    :class="selectedProvider === provider ? 'bg-white dark:bg-slate-800 shadow-xl text-indigo-600' : 'text-slate-400 hover:text-slate-600 dark:hover:text-slate-300'"
-                                >
-                                    {{ provider }}
-                                </button>
-                            </div>
+                <!-- Fiche de poste -->
+                <div class="bg-surface rounded-2xl border border-ink/[0.07] shadow-sm p-5">
+                    <p class="text-[9px] font-black uppercase tracking-[0.16em] text-ink/35 mb-3">Fiche de Poste</p>
+                    <select v-model="positionForm.job_position_id" @change="updatePosition"
+                        class="w-full rounded-[10px] border border-ink/10 bg-neutral px-3 py-2 text-sm font-semibold text-ink focus:border-primary focus:ring-2 focus:ring-primary/15 outline-none transition-all">
+                        <option value="">— Non assigné —</option>
+                        <option v-for="p in jobPositions" :key="p.id" :value="p.id">{{ p.title }}</option>
+                    </select>
+                </div>
 
-                            <!-- Force option for Super Admin -->
-                            <div v-if="$page.props.auth.user.role === 'super_admin'" class="flex items-center gap-3 px-5 py-3 bg-red-50 dark:bg-red-900/10 border border-red-100 dark:border-red-900/30 rounded-2xl">
-                                <input 
-                                    type="checkbox" 
-                                    id="forceAnalysis" 
-                                    v-model="forceAnalysis" 
-                                    class="rounded-lg border-red-300 text-red-600 focus:ring-red-500/20 w-5 h-5 cursor-pointer"
-                                />
-                                <label for="forceAnalysis" class="text-xs font-black uppercase tracking-widest text-red-600 cursor-pointer select-none">
-                                    Forcer (Bypass 7j)
-                                </label>
-                            </div>
-
-                            <PrimaryButton 
-                                @click="runAI" 
-                                :disabled="isAnalyzing"
-                                class="!bg-indigo-600 hover:!bg-indigo-500 !border-none !rounded-2xl !py-4 !px-8 group shadow-xl shadow-indigo-200 dark:shadow-none"
-                            >
-                                <span v-if="isAnalyzing" class="flex items-center gap-3">
-                                    <svg class="animate-spin h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-                                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-                                    </svg>
-                                    <span class="font-black uppercase tracking-widest text-xs">Analyse en cours...</span>
-                                </span>
-                                <span v-else class="flex items-center gap-3">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 group-hover:scale-110 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-                                    </svg>
-                                    <span class="font-black uppercase tracking-widest text-xs">Lancer l'analyse complète</span>
-                                </span>
-                            </PrimaryButton>
-                        </div>
-                    </div>
-
-                    <!-- AI Results -->
-                    <div v-if="aiAnalysis" class="space-y-12 animate-in fade-in slide-in-from-bottom-6 duration-1000">
-                        <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
-                            <div class="lg:col-span-1 bg-slate-50 dark:bg-slate-900/50 p-8 rounded-[2.5rem] border border-slate-100 dark:border-slate-800 text-center flex flex-col items-center justify-center shadow-inner">
-                                <div class="text-xs font-black uppercase tracking-[0.2em] text-slate-400 mb-6">Score Global</div>
-                                <div class="text-7xl font-black text-indigo-600 mb-6 tracking-tighter">{{ aiAnalysis.match_score }}%</div>
-                                <div 
-                                    class="px-6 py-2 rounded-2xl text-xs font-black uppercase tracking-widest shadow-sm"
-                                    :class="[
-                                        aiAnalysis.match_score >= 80 ? 'bg-emerald-100 text-emerald-700' :
-                                        aiAnalysis.match_score >= 60 ? 'bg-amber-100 text-amber-700' :
-                                        'bg-red-100 text-red-700'
-                                    ]"
-                                >
-                                    {{ aiAnalysis.verdict }}
-                                </div>
-                            </div>
-                            <div class="lg:col-span-3 bg-indigo-50/30 dark:bg-indigo-900/10 p-10 rounded-[2.5rem] border border-indigo-100/50 dark:border-indigo-900/30">
-                                <div class="text-xs font-black uppercase tracking-[0.2em] text-indigo-400 mb-6">Synthèse du Profil & Potentiel</div>
-                                <p class="text-2xl leading-relaxed text-slate-700 dark:text-slate-300 font-medium italic">
-                                    " {{ aiAnalysis.summary }} "
-                                </p>
-                            </div>
-                        </div>
-
-                        <div class="grid grid-cols-1 md:grid-cols-2 gap-10">
-                            <!-- Strengths -->
-                            <div class="space-y-6">
-                                <h5 class="flex items-center gap-3 text-sm font-black uppercase tracking-widest text-emerald-500">
-                                    <div class="w-8 h-8 rounded-xl bg-emerald-100 dark:bg-emerald-900/20 flex items-center justify-center">
-                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
-                                        </svg>
-                                    </div>
-                                    Points Forts Identifiés
-                                </h5>
-                                <div class="grid grid-cols-1 gap-4">
-                                    <div v-for="(strength, idx) in aiAnalysis.strengths" :key="idx" class="flex items-start gap-4 p-5 bg-emerald-50/30 dark:bg-emerald-900/10 rounded-3xl border border-emerald-100/50 dark:border-emerald-800/30 transition-hover hover:border-emerald-300">
-                                        <div class="mt-1 flex-shrink-0 w-5 h-5 bg-emerald-500 rounded-full flex items-center justify-center text-white text-[10px] font-bold">✓</div>
-                                        <span class="text-lg text-slate-700 dark:text-slate-300">{{ strength }}</span>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <!-- Gaps -->
-                            <div class="space-y-6">
-                                <h5 class="flex items-center gap-3 text-sm font-black uppercase tracking-widest text-amber-500">
-                                    <div class="w-8 h-8 rounded-xl bg-amber-100 dark:bg-amber-900/20 flex items-center justify-center">
-                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
-                                        </svg>
-                                    </div>
-                                    Points de Vigilance / Gaps
-                                </h5>
-                                <div class="grid grid-cols-1 gap-4">
-                                    <div v-for="(gap, idx) in aiAnalysis.gaps" :key="idx" class="flex items-start gap-4 p-5 bg-amber-50/30 dark:bg-amber-900/10 rounded-3xl border border-amber-100/50 dark:border-amber-800/30 hover:border-amber-300 transition-colors">
-                                        <div class="mt-1 flex-shrink-0 w-5 h-5 bg-amber-500 rounded-full flex items-center justify-center text-white text-[10px] font-bold">!</div>
-                                        <span class="text-lg text-slate-700 dark:text-slate-300">{{ gap }}</span>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-
-                        <!-- Detailed Scores (if available) -->
-                        <div v-if="aiAnalysis.scores_detailles" class="space-y-8">
-                            <h5 class="text-sm font-black uppercase tracking-widest text-indigo-500 border-l-4 border-indigo-500 pl-4">Détail des scores par dimension</h5>
-                            <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
-                                <div v-for="(details, key) in aiAnalysis.scores_detailles" :key="key" class="bg-white dark:bg-slate-900 border border-slate-100 dark:border-slate-800 p-8 rounded-[2rem] shadow-sm hover:shadow-xl transition-all duration-300 group">
-                                    <div class="flex justify-between items-center mb-6">
-                                        <span class="text-xs font-black uppercase tracking-[0.1em] text-slate-400 group-hover:text-indigo-500 transition-colors">
-                                            {{ key.replace(/_/g, ' ') }}
-                                        </span>
-                                        <span class="text-2xl font-black text-indigo-600 bg-indigo-50 dark:bg-indigo-900/30 px-4 py-1 rounded-xl">{{ details.score }}%</span>
-                                    </div>
-                                    <div class="h-3 bg-slate-100 dark:bg-slate-800 rounded-full mb-6 overflow-hidden">
-                                        <div class="h-full bg-gradient-to-r from-indigo-400 to-indigo-600 rounded-full transition-all duration-1000 group-hover:from-indigo-500 group-hover:to-purple-600" :style="{ width: details.score + '%' }"></div>
-                                    </div>
-                                    <p class="text-sm text-slate-500 dark:text-slate-400 leading-relaxed font-medium">{{ details.justification }}</p>
-                                </div>
-                            </div>
-                        </div>
-
-                        <!-- Blocking Elements -->
-                        <div v-if="aiAnalysis.elements_bloquants?.length > 0 && aiAnalysis.elements_bloquants[0] !== ''" class="p-10 bg-red-50/50 dark:bg-red-900/10 border-2 border-dashed border-red-200 dark:border-red-900/30 rounded-[3rem]">
-                            <h5 class="flex items-center gap-4 text-sm font-black uppercase tracking-widest text-red-600 mb-8">
-                                <div class="w-10 h-10 rounded-2xl bg-red-100 dark:bg-red-900/30 flex items-center justify-center">
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
-                                    </svg>
-                                </div>
-                                Signaux Critiques / Éléments Bloquants
-                            </h5>
-                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-                                <div v-for="(item, idx) in aiAnalysis.elements_bloquants" :key="idx" class="flex items-center gap-4 p-6 bg-white dark:bg-slate-900 rounded-[2rem] border border-red-100 dark:border-red-900/20 text-lg text-red-700 dark:text-red-400 font-black shadow-sm">
-                                    <span class="w-3 h-3 bg-red-500 rounded-full animate-pulse"></span>
-                                    {{ item }}
-                                </div>
-                            </div>
-                        </div>
-
-                    </div>
-                    <div v-else-if="!isAnalyzing" class="py-24 border-4 border-dashed border-slate-100 dark:border-slate-800 rounded-[3rem] text-center bg-slate-50/50 dark:bg-slate-900/20">
-                        <div class="w-20 h-20 bg-white dark:bg-slate-800 rounded-3xl flex items-center justify-center mx-auto mb-6 shadow-lg">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-slate-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
-                            </svg>
-                        </div>
-                        <p class="text-xl text-slate-400 font-bold uppercase tracking-widest">En attente d'analyse IA</p>
-                        <p class="text-slate-400 mt-2">Cliquez sur le bouton ci-dessus pour lancer le moteur décisionnel.</p>
-                    </div>
-                    
-                    <div v-if="isAnalyzing" class="absolute inset-0 bg-white/80 dark:bg-slate-800/80 backdrop-blur-md z-20 flex flex-col items-center justify-center gap-6">
-                        <div class="flex gap-2 animate-bounce">
-                            <div class="w-4 h-4 bg-indigo-500 rounded-full"></div>
-                            <div class="w-4 h-4 bg-purple-500 rounded-full"></div>
-                            <div class="w-4 h-4 bg-indigo-500 rounded-full"></div>
-                        </div>
-                        <div class="text-center">
-                            <p class="text-2xl font-black text-indigo-600 uppercase tracking-[0.2em] mb-2">Traitement IA en cours</p>
-                            <p class="text-slate-500 font-medium">Analyse sémantique et pondération des scores...</p>
-                        </div>
+                <!-- Danger zone -->
+                <div class="bg-surface rounded-2xl border border-ink/[0.07] shadow-sm p-5">
+                    <p class="text-[9px] font-black uppercase tracking-[0.16em] text-ink/35 mb-3">Actions</p>
+                    <div class="space-y-2">
+                        <button @click="resetPassword"
+                            class="w-full py-2 px-3 rounded-[10px] border border-ink/10 text-xs font-extrabold uppercase tracking-[0.07em] text-ink/60 hover:bg-ink/5 transition-all text-left flex items-center gap-2">
+                            <svg class="w-3.5 h-3.5 text-ink/30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0110 0v4"/></svg>
+                            Réinitialiser MDP
+                        </button>
+                        <button @click="deleteCandidate"
+                            class="w-full py-2 px-3 rounded-[10px] border border-accent/20 bg-accent/5 text-xs font-extrabold uppercase tracking-[0.07em] text-accent hover:bg-accent hover:text-white transition-all text-left flex items-center gap-2">
+                            <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6"/><path d="M10 11v6M14 11v6"/><path d="M9 6V4a1 1 0 011-1h4a1 1 0 011 1v2"/></svg>
+                            Supprimer le candidat
+                        </button>
                     </div>
                 </div>
             </div>
 
-            <!-- Tab Content: Interview -->
-            <div v-if="activeTab === 'interview'" class="space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-500">
-                <!-- Interview Questions & Interactive Evaluation -->
-                <div v-if="notesForm.interview_details.questions?.length > 0" class="space-y-10">
-                    <div class="flex items-center justify-between gap-4">
-                        <h5 class="text-sm font-black uppercase tracking-widest text-[#004f82] border-l-4 border-[#004f82] pl-4">Évaluation de l'entretien</h5>
-                        <div class="flex items-center gap-6">
-                            <div class="px-5 py-2 bg-[#004f82]/5 dark:bg-[#004f82]/30 rounded-2xl border border-[#004f82]/20 dark:border-[#004f82]/50 hidden sm:block">
-                                <span class="text-[10px] font-black uppercase text-[#004f82]/80 block tracking-[0.2em]">Score Questions</span>
-                                <span class="text-xl font-black text-[#004f82]">{{ (notesForm.interview_details.questions || []).reduce((acc, q) => acc + (parseFloat(q.score) || 0), 0) }} / 20</span>
+            <!-- ══ Right panel ═════════════════════════════════════════════ -->
+            <div class="flex-1 min-w-0 flex flex-col gap-4">
+
+                <!-- Tabs card -->
+                <div class="bg-surface rounded-2xl border border-ink/[0.07] shadow-sm overflow-hidden flex flex-col">
+                    <!-- Tab bar -->
+                    <div class="flex border-b border-ink/[0.07] overflow-x-auto scrollbar-none">
+                        <button v-for="tab in [
+                            { id:'overview',  label:'Vue d\'ensemble' },
+                            { id:'ai_analysis', label:'Analyse IA' },
+                            { id:'interview', label:'Évaluation' },
+                            { id:'documents', label:'Documents', count: candidate.documents?.length },
+                            { id:'tests',     label:'Tests', count: candidate.attempts?.length },
+                        ]" :key="tab.id" @click="activeTab = tab.id"
+                            class="relative flex items-center gap-2 px-5 py-4 text-[11px] font-black uppercase tracking-[0.1em] whitespace-nowrap transition-all duration-150"
+                            :class="activeTab === tab.id ? 'text-primary' : 'text-ink/35 hover:text-ink/60'">
+                            {{ tab.label }}
+                            <span v-if="tab.count != null" :class="['text-[9px] px-1.5 py-0.5 rounded font-black', activeTab===tab.id ? 'bg-primary/10 text-primary' : 'bg-ink/5 text-ink/40']">{{ tab.count }}</span>
+                            <div v-if="activeTab === tab.id" class="absolute bottom-0 left-0 right-0 h-0.5 bg-primary rounded-t-full" />
+                        </button>
+                    </div>
+
+                    <!-- ── Tab: Vue d'ensemble ── -->
+                    <div v-if="activeTab === 'overview'" class="p-6 space-y-6">
+
+                        <!-- Save scores button -->
+                        <div v-if="scoreForm.isDirty" class="flex justify-end">
+                            <button @click="saveScores"
+                                class="flex items-center gap-2 px-5 py-2.5 rounded-[10px] bg-highlight text-highlight-dark text-xs font-extrabold uppercase tracking-[0.08em] shadow-gold hover:brightness-105 transition-all">
+                                <svg class="w-3.5 h-3.5 animate-pulse" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21H5a2 2 0 01-2-2V5a2 2 0 012-2h11l5 5v11a2 2 0 01-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></svg>
+                                Enregistrer les modifications
+                            </button>
+                        </div>
+
+                        <!-- Score inputs grid -->
+                        <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
+                            <div v-for="(item, i) in [
+                                { label:'Analyse CV', key:'cv_score', max:20, color:'text-primary' },
+                                { label:'Lettre Motiv.', key:'motivation_score', max:10, color:'text-success' },
+                                { label:'Entretien', key:'interview_score', max:30, color:'text-sky-600', readonly:true },
+                                { label:'Test Technique', key:'_test', max:20, color:'text-highlight', readonly:true },
+                            ]" :key="i" class="bg-neutral rounded-xl p-4">
+                                <p class="text-[9px] font-black uppercase tracking-[0.14em] text-ink/35 mb-2">{{ item.label }}</p>
+                                <div class="relative">
+                                    <input v-if="!item.readonly"
+                                        type="number" v-model="scoreForm[item.key]" :min="0" :max="item.max" step="0.5"
+                                        @input="clampScore(item.key, item.max)"
+                                        class="w-full bg-surface border border-ink/10 rounded-lg px-3 py-2 font-black text-lg focus:border-primary focus:ring-2 focus:ring-primary/15 outline-none transition-all"
+                                        :class="item.color" />
+                                    <div v-else class="w-full bg-surface border border-ink/10 rounded-lg px-3 py-2 font-black text-lg" :class="item.color">
+                                        {{ item.key === '_test' ? bestTestScore.toFixed(2) : scoreForm[item.key] }}
+                                    </div>
+                                    <span class="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-ink/25 font-bold">/ {{ item.max }}</span>
+                                </div>
                             </div>
-                            <div class="px-5 py-2 bg-[#e0b04c]/10 dark:bg-[#e0b04c]/30 rounded-2xl border border-[#e0b04c]/30 dark:border-[#e0b04c]/50">
-                                <span class="text-[10px] font-black uppercase text-[#8b6508] block tracking-[0.2em]">Total Entretien</span>
-                                <span class="text-xl font-black text-[#8b6508]">{{ calculatedInterviewScore }} / 30</span>
+                        </div>
+
+                        <!-- Radar chart -->
+                        <div class="grid md:grid-cols-2 gap-6 items-center">
+                            <div class="flex items-center justify-center">
+                                <canvas ref="radarCanvasRef" class="max-h-64 w-full" />
+                            </div>
+                            <div class="space-y-3">
+                                <div v-for="(item, i) in [
+                                    { label:'Analyse CV',     val: scoreForm.cv_score,        max:20 },
+                                    { label:'Lettre Motiv.',  val: scoreForm.motivation_score, max:10 },
+                                    { label:'Entretien',      val: scoreForm.interview_score,  max:30 },
+                                    { label:'Test Technique', val: bestTestScore,              max:20 },
+                                    { label:'Soft Skills',    val: softSkillsScore,            max:10 },
+                                ]" :key="i">
+                                    <div class="flex items-center justify-between mb-1">
+                                        <span class="text-[10px] font-black uppercase tracking-[0.1em] text-ink/45">{{ item.label }}</span>
+                                        <span class="text-xs font-black" :class="scoreColor(Math.round((item.val/item.max)*100))">{{ parseFloat(item.val).toFixed(1) }}<span class="text-[9px] text-ink/30 font-semibold">/ {{ item.max }}</span></span>
+                                    </div>
+                                    <div class="h-1.5 bg-ink/[0.06] rounded-full overflow-hidden">
+                                        <div :class="['h-full rounded-full transition-all duration-500', barColor(Math.round((item.val/item.max)*100))]" :style="{width: `${Math.min(100,(item.val/item.max)*100)}%`}" />
+                                    </div>
+                                </div>
                             </div>
                         </div>
                     </div>
-                    
-                    <div class="grid grid-cols-1 gap-6">
-                        <div v-for="(q, idx) in notesForm.interview_details.questions" :key="idx" class="p-8 bg-neutral/30 dark:bg-slate-900/40 border border-anthracite/5 dark:border-slate-800 rounded-[2.5rem] group hover:bg-white dark:hover:bg-slate-800 hover:shadow-2xl hover:border-primary/20 transition-all duration-500">
-                            <div class="flex items-start gap-6 mb-8 text-left">
-                                <div class="w-12 h-12 shrink-0 rounded-2xl bg-white dark:bg-slate-700 shadow-lg flex items-center justify-center text-primary group-hover:bg-primary group-hover:text-white transition-all duration-300">
-                                    <span class="text-xl font-black">{{ idx + 1 }}</span>
+
+                    <!-- ── Tab: Analyse IA ── -->
+                    <div v-if="activeTab === 'ai_analysis'" class="p-6">
+                        <!-- Run AI -->
+                        <div class="flex items-center gap-3 mb-6 flex-wrap">
+                            <select v-model="selectedProvider" class="min-w-[140px] w-auto rounded-[10px] border border-ink/10 bg-neutral px-4 py-2 text-sm font-bold text-ink focus:border-primary focus:ring-2 focus:ring-primary/15 outline-none cursor-pointer hover:border-ink/20 transition-colors">
+                                <option v-for="p in ai_config?.providers" :key="p" :value="p">{{ p.toUpperCase() }}</option>
+                            </select>
+                            <label class="flex items-center gap-2 text-xs font-semibold text-ink/55 cursor-pointer">
+                                <input type="checkbox" v-model="forceAnalysis" class="rounded border-ink/20 text-primary focus:ring-primary/30" />
+                                Forcer une nouvelle analyse
+                            </label>
+                            <button @click="runAI" :disabled="isAnalyzing"
+                                class="flex items-center gap-2 px-5 py-2.5 rounded-[10px] bg-primary text-white text-xs font-extrabold uppercase tracking-[0.08em] shadow-primary hover:brightness-110 transition-all disabled:opacity-50">
+                                <svg v-if="isAnalyzing" class="w-3.5 h-3.5 animate-spin" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" class="opacity-25"/><path fill="currentColor" class="opacity-75" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"/></svg>
+                                <svg v-else class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9.5 2A2.5 2.5 0 017 4.5v0A2.5 2.5 0 014.5 7v0A2.5 2.5 0 012 9.5v5A2.5 2.5 0 004.5 17v0A2.5 2.5 0 007 19.5v0A2.5 2.5 0 009.5 22h5a2.5 2.5 0 002.5-2.5v0a2.5 2.5 0 002.5-2.5v0a2.5 2.5 0 002.5-2.5v-5a2.5 2.5 0 00-2.5-2.5v0A2.5 2.5 0 0017 4.5v0A2.5 2.5 0 0014.5 2h-5z"/></svg>
+                                {{ isAnalyzing ? 'Analyse en cours…' : 'Lancer l\'analyse IA' }}
+                            </button>
+                        </div>
+
+                        <div v-if="aiAnalysis" class="space-y-5">
+                            <!-- Match score + synthèse -->
+                            <div class="flex items-start gap-5 p-5 rounded-xl border border-ink/[0.07] bg-neutral">
+                                <div :class="['w-14 h-14 rounded-full flex items-center justify-center text-lg font-black shrink-0',
+                                    aiAnalysis.match_score >= 80 ? 'bg-success/12 text-success' :
+                                    aiAnalysis.match_score >= 60 ? 'bg-highlight/15 text-highlight' : 'bg-accent/10 text-accent']">
+                                    {{ aiAnalysis.match_score }}%
                                 </div>
-                                <div class="flex-1">
-                                    <input 
-                                        v-if="!candidate.interview_details"
-                                        v-model="q.question" 
-                                        class="w-full bg-transparent border-none p-0 text-2xl font-black text-anthracite dark:text-slate-100 tracking-tight leading-snug focus:ring-0 placeholder:text-slate-300"
-                                        placeholder="Saisissez votre question personnalisée..."
-                                    />
-                                    <p v-else class="text-2xl font-black text-anthracite dark:text-slate-100 tracking-tight leading-snug">{{ q.question }}</p>
+                                <div>
+                                    <p class="text-[9px] font-black uppercase tracking-[0.14em] text-ink/35 mb-1">Adéquation poste</p>
+                                    <p class="text-base font-semibold text-ink/70 leading-relaxed">{{ aiAnalysis.summary || aiAnalysis.synthese }}</p>
                                 </div>
                             </div>
-                            
-                            <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
-                                <div class="lg:col-span-3">
-                                    <label class="text-[10px] font-black uppercase tracking-[0.2em] text-anthracite/50 mb-4 block">Note Qualité / 4</label>
-                                    <div class="flex gap-2">
-                                        <button 
-                                            v-for="score in [0, 1, 2, 3, 4]" 
-                                            :key="score"
-                                            @click="q.score = score"
-                                            type="button"
-                                            class="w-full h-12 rounded-xl border-2 font-black transition-all"
-                                            :class="[
-                                                q.score === score 
-                                                ? 'bg-primary border-primary text-white shadow-lg shadow-primary/30 dark:shadow-none' 
-                                                : 'bg-white dark:bg-slate-900 border-anthracite/10 dark:border-slate-800 text-anthracite/50 hover:border-primary/50'
-                                            ]"
-                                        >
-                                            {{ score }}
+
+                            <!-- Scores détaillés -->
+                            <div v-if="aiAnalysis.scores_detailles" class="grid grid-cols-2 md:grid-cols-3 gap-4">
+                                <div v-for="(data, key) in aiAnalysis.scores_detailles" :key="key" class="p-4 rounded-xl border border-ink/[0.05] bg-neutral/50">
+                                    <div class="flex items-center justify-between mb-2">
+                                        <span class="text-[10px] font-black uppercase tracking-widest text-ink/40">{{ key }}</span>
+                                        <span class="text-xs font-black text-primary">{{ data.score }}%</span>
+                                    </div>
+                                    <div class="h-1.5 bg-ink/5 rounded-full overflow-hidden mb-3">
+                                        <div class="h-full bg-primary rounded-full" :style="{ width: `${data.score}%` }" />
+                                    </div>
+                                    <p class="text-xs text-ink/55 leading-relaxed font-semibold italic">{{ data.justification }}</p>
+                                </div>
+                            </div>
+
+                            <!-- Points forts / faibles / bloquants -->
+                            <div class="grid md:grid-cols-2 gap-4">
+                                <div class="p-4 rounded-xl bg-success/5 border border-success/15">
+                                    <p class="text-[9px] font-black uppercase tracking-[0.14em] text-success/70 mb-3">Points forts</p>
+                                    <ul class="space-y-2">
+                                        <li v-for="(p, i) in (aiAnalysis.strengths || aiAnalysis.points_forts)" :key="i" class="flex items-start gap-2 text-sm font-semibold text-ink/70 leading-snug">
+                                            <svg class="w-3.5 h-3.5 text-success shrink-0 mt-0.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>
+                                            {{ p }}
+                                        </li>
+                                    </ul>
+                                </div>
+                                <div class="p-4 rounded-xl bg-accent/5 border border-accent/15">
+                                    <p class="text-[9px] font-black uppercase tracking-[0.14em] text-accent/70 mb-3">Points d'attention</p>
+                                    <ul class="space-y-2">
+                                        <li v-for="(p, i) in (aiAnalysis.gaps || aiAnalysis.points_faibles)" :key="i" class="flex items-start gap-2 text-sm font-semibold text-ink/70 leading-snug">
+                                            <svg class="w-3.5 h-3.5 text-accent shrink-0 mt-0.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
+                                            {{ p }}
+                                        </li>
+                                    </ul>
+                                </div>
+                            </div>
+
+                            <!-- Éléments bloquants -->
+                            <div v-if="aiAnalysis.elements_bloquants?.length" class="p-4 rounded-xl bg-accent border border-accent/30 text-white shadow-lg shadow-accent/20">
+                                <div class="flex items-center gap-2 mb-3">
+                                    <svg class="w-4 h-4 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
+                                    <p class="text-[10px] font-black uppercase tracking-widest">Points Critiques / Bloquants</p>
+                                </div>
+                                <ul class="space-y-1.5">
+                                    <li v-for="(p, i) in aiAnalysis.elements_bloquants" :key="i" class="text-xs font-bold flex items-center gap-2">
+                                        <div class="w-1 h-1 rounded-full bg-white/50" /> {{ p }}
+                                    </li>
+                                </ul>
+                            </div>
+
+                            <!-- Questions suggérées -->
+                            <div v-if="aiAnalysis.questions_entretien_suggerees?.length" class="p-5 rounded-xl border border-primary/10 bg-primary/5">
+                                <p class="text-[9px] font-black uppercase tracking-[0.14em] text-primary mb-4">Questions d'entretien suggérées</p>
+                                <div class="grid md:grid-cols-2 gap-4">
+                                    <div v-for="(q, i) in aiAnalysis.questions_entretien_suggerees" :key="i" class="flex gap-3">
+                                        <span class="text-primary/30 font-serif font-black text-lg italic leading-none">{{ i + 1 }}</span>
+                                        <p class="text-sm font-bold text-ink/70 leading-relaxed">{{ q }}</p>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- Verdict -->
+                            <div v-if="aiAnalysis.verdict || aiAnalysis.recommandation" class="p-4 rounded-xl bg-highlight/10 border border-highlight/20 border-l-4 border-l-highlight">
+                                <div class="flex items-center justify-between mb-2">
+                                    <p class="text-[9px] font-black uppercase tracking-[0.14em] text-highlight">Verdict Final</p>
+                                    <span class="px-2 py-0.5 rounded bg-highlight text-highlight-dark text-[10px] font-black">{{ aiAnalysis.verdict || 'Analyse en cours' }}</span>
+                                </div>
+                                <p class="text-base font-semibold text-ink/70 leading-relaxed">{{ aiAnalysis.recommandation || aiAnalysis.summary }}</p>
+                            </div>
+                        </div>
+
+                        <div v-else class="flex flex-col items-center justify-center py-16 text-center">
+                            <div class="w-14 h-14 rounded-full bg-primary/8 flex items-center justify-center mb-4">
+                                <svg class="w-7 h-7 text-primary/40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9.5 2A2.5 2.5 0 017 4.5v0A2.5 2.5 0 014.5 7v0A2.5 2.5 0 012 9.5v5A2.5 2.5 0 004.5 17v0A2.5 2.5 0 007 19.5v0A2.5 2.5 0 009.5 22h5a2.5 2.5 0 002.5-2.5v0a2.5 2.5 0 002.5-2.5v0a2.5 2.5 0 002.5-2.5v-5a2.5 2.5 0 00-2.5-2.5v0A2.5 2.5 0 0017 4.5v0A2.5 2.5 0 0014.5 2h-5z"/></svg>
+                            </div>
+                            <p class="text-sm font-bold text-ink/40">Aucune analyse disponible</p>
+                            <p class="text-xs text-ink/30 mt-1">Lancez une analyse IA pour obtenir un profil détaillé.</p>
+                        </div>
+                    </div>
+
+                    <!-- ── Tab: Évaluation & Entretien ── -->
+                    <div v-if="activeTab === 'interview'" class="p-6 space-y-6">
+                        <!-- Notes admin -->
+                        <div>
+                            <div class="flex items-center justify-between mb-3">
+                                <p class="text-[9px] font-black uppercase tracking-[0.16em] text-ink/35">Notes & compte-rendu</p>
+                                <button @click="isPreview = !isPreview" class="text-[10px] font-bold uppercase tracking-wider text-primary/60 hover:text-primary transition-colors">
+                                    {{ isPreview ? 'Éditer' : 'Prévisualiser' }}
+                                </button>
+                            </div>
+                            <div v-if="!isPreview">
+                                <textarea v-model="notesForm.notes" rows="6"
+                                    class="w-full rounded-xl border border-ink/10 bg-neutral px-4 py-3 text-sm font-semibold text-ink leading-relaxed focus:border-primary focus:ring-2 focus:ring-primary/15 outline-none resize-y transition-all"
+                                    placeholder="Saisir vos notes… (Markdown supporté)" />
+                            </div>
+                            <div v-else class="min-h-[120px] p-4 rounded-xl border border-ink/[0.07] bg-neutral prose prose-sm max-w-none text-ink/70" v-html="renderedNotes || '<p class=\'text-ink/30 italic\'>Aucune note.</p>'" />
+                        </div>
+
+                        <!-- Soft skills -->
+                        <div>
+                            <p class="text-[9px] font-black uppercase tracking-[0.16em] text-ink/35 mb-3">Soft Skills <span class="text-ink/20">/10</span></p>
+                            <div class="space-y-3">
+                                <div v-for="(skill, i) in notesForm.interview_details.soft_skills" :key="i" class="flex items-center gap-4 p-3 rounded-xl bg-neutral">
+                                    <span class="flex-1 text-xs font-semibold text-ink/70">{{ skill.name }}</span>
+                                    <div class="flex gap-1.5">
+                                        <button v-for="n in [0,2,4,6,8,10]" :key="n" @click="skill.score = n"
+                                            :class="['w-7 h-7 rounded-lg text-[10px] font-black transition-all border',
+                                                skill.score === n ? 'bg-primary text-white border-primary' : 'bg-surface border-ink/10 text-ink/40 hover:border-primary/40 hover:text-primary']">
+                                            {{ n }}
                                         </button>
                                     </div>
                                 </div>
-                                <div class="lg:col-span-9">
-                                    <label class="text-[10px] font-black uppercase tracking-[0.2em] text-anthracite/50 mb-4 block">Commentaires & Détails de l'échange</label>
-                                    <textarea 
-                                        v-model="q.comment" 
-                                        rows="2" 
-                                        class="w-full bg-white dark:bg-slate-900/50 border-2 border-transparent focus:border-primary/30 focus:ring-0 rounded-3xl p-6 text-base font-medium transition-all placeholder:text-slate-300"
-                                        :placeholder="'Analyse de la réponse pour la question ' + (idx + 1) + '...'"
-                                    ></textarea>
-                                </div>
                             </div>
                         </div>
-                    </div>
 
-                    <!-- Soft Skills Grid -->
-                    <div class="space-y-10 mt-16 pt-10 border-t-2 border-dashed border-anthracite/10 dark:border-slate-800">
-                        <div class="flex items-center justify-between gap-4 mb-8">
-                            <h5 class="text-sm font-black uppercase tracking-widest text-[#004f82] border-l-4 border-[#004f82] pl-4">Évaluation des Soft Skills</h5>
-                            <div class="px-5 py-2 bg-[#004f82]/5 dark:bg-[#004f82]/30 rounded-2xl border border-[#004f82]/20 dark:border-[#004f82]/50">
-                                <span class="text-[10px] font-black uppercase text-[#004f82]/70 block tracking-[0.2em]">Moyenne Soft Skills</span>
-                                <span class="text-xl font-black text-[#004f82]">{{ (notesForm.interview_details.soft_skills.reduce((acc, s) => acc + (parseFloat(s.score) || 0), 0) / Math.max(1, notesForm.interview_details.soft_skills.length)).toFixed(1) }} / 10</span>
-                            </div>
-                        </div>
-                        
-                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-                            <div v-for="(skill, idx) in notesForm.interview_details.soft_skills" :key="idx" class="p-6 bg-neutral/30 dark:bg-slate-900/40 border border-anthracite/5 dark:border-slate-800 rounded-[2rem] hover:shadow-xl hover:border-primary/20 transition-all duration-300">
-                                <div class="flex justify-between items-center mb-5">
-                                    <span class="font-bold text-anthracite dark:text-slate-200 flex-1">{{ skill.name }}</span>
-                                    <span class="text-sm font-black px-3 py-1 rounded-xl" 
-                                        :class="skill.score >= 8 ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30' : skill.score >= 5 ? 'bg-amber-100 text-amber-700 dark:bg-amber-900/30' : skill.score > 0 ? 'bg-red-100 text-red-700 dark:bg-red-900/30' : 'bg-anthracite/10 text-anthracite/60 dark:bg-slate-800'">
-                                        {{ skill.score }} / 10
-                                    </span>
-                                </div>
-                                
-                                <div class="flex gap-1.5 h-10 w-full group/slider">
-                                    <button 
-                                        v-for="val in 10" 
-                                        :key="val"
-                                        @click="skill.score = val"
-                                        type="button"
-                                        class="flex-1 rounded-lg transition-all border border-transparent hover:scale-110 relative"
-                                        :class="[
-                                            skill.score >= val 
-                                            ? (skill.score >= 8 ? 'bg-[#004f82]' : skill.score >= 5 ? 'bg-[#e0b04c]' : 'bg-[#a30000]')
-                                            : 'bg-anthracite/10 dark:bg-slate-800 hover:bg-anthracite/20 dark:hover:bg-slate-700'
-                                        ]"
-                                    >
-                                        <!-- Affichage du chiffre au survol sur PC -->
-                                        <span class="absolute inset-0 flex items-center justify-center text-xs font-black opacity-0 group-hover/slider:opacity-100 hover:!opacity-100" 
-                                              :class="skill.score >= val ? 'text-white/80' : 'text-anthracite/50'">
-                                            {{ val }}
-                                        </span>
-                                    </button>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    
-                    <!-- Overall Appreciation -->
-                    <div class="relative p-10 bg-primary/5 dark:bg-primary/20 border-4 border-dashed border-primary/20 dark:border-primary/30 rounded-[3rem] mt-16 group hover:border-primary/40 transition-all duration-500">
-                        <div class="grid grid-cols-1 md:grid-cols-4 gap-12 items-center">
-                            <div class="md:col-span-1 text-center md:text-left">
-                                <label class="text-[10px] font-black uppercase tracking-[0.2em] text-primary/70 mb-6 block">Note Appréciation / 10</label>
-                                <div class="relative inline-flex items-center">
-                                    <input 
-                                        type="number" 
-                                        v-model="notesForm.interview_details.appreciation" 
-                                        min="0" max="10" step="0.5" 
-                                        class="w-40 bg-white dark:bg-slate-800 border-none rounded-[2rem] p-6 font-black text-4xl text-primary text-center shadow-2xl focus:ring-4 focus:ring-primary/10 transition-all" 
-                                    />
-                                    <span class="ml-4 text-2xl font-black text-anthracite/40">/ 10</span>
-                                </div>
-                            </div>
-                            <div class="md:col-span-3">
-                                <div class="flex flex-col md:flex-row items-center justify-end gap-10">
-                                    <div class="text-right">
-                                        <span class="text-[10px] font-black uppercase tracking-[0.2em] text-anthracite/60 block mb-2">Pondération Totale Entretien</span>
-                                        <div class="text-6xl font-black text-highlight tracking-tighter">
-                                            {{ calculatedInterviewScore }}<span class="text-2xl text-anthracite/30 font-normal ml-3">/ 30</span>
-                                        </div>
-                                    </div>
-                                    <PrimaryButton 
-                                        @click="saveNotes" 
-                                        :disabled="notesForm.processing" 
-                                        class="!px-12 !py-6 !rounded-[2rem] shadow-2xl transition-all hover:-translate-y-1 active:scale-95 flex flex-col items-center gap-1 group"
-                                    >
-                                        <span class="text-lg font-black tracking-tight">Enregistrer l'évaluation</span>
-                                        <span class="text-[10px] font-black uppercase tracking-widest opacity-60">Calcul des scores & profil radar</span>
-                                    </PrimaryButton>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <!-- Notes Section (Full Width) -->
-                <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700 p-8">
-                    <div class="flex items-center justify-between mb-6">
-                        <h4 class="text-xl font-bold flex items-center gap-2">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-amber-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
-                            </svg>
-                            Notes d'entretien & Préparation
-                        </h4>
-                        <div class="flex items-center gap-4">
-                            <div class="flex items-center bg-slate-100 dark:bg-slate-900 p-1 rounded-xl">
-                                <button 
-                                    @click="isPreview = false"
-                                    class="px-4 py-1.5 text-[10px] font-black uppercase tracking-widest rounded-lg transition-all"
-                                    :class="!isPreview ? 'bg-white dark:bg-slate-800 shadow-sm text-indigo-600' : 'text-slate-500'"
-                                >
-                                    Édition
-                                </button>
-                                <button 
-                                    @click="isPreview = true"
-                                    class="px-4 py-1.5 text-[10px] font-black uppercase tracking-widest rounded-lg transition-all"
-                                    :class="isPreview ? 'bg-white dark:bg-slate-800 shadow-sm text-indigo-600' : 'text-slate-500'"
-                                >
-                                    Aperçu
-                                </button>
-                            </div>
-
-                            <div v-if="notesForm.isDirty" class="flex items-center gap-2 animate-pulse">
-                                <PrimaryButton @click="saveNotes" class="!px-4 !py-1 text-[10px]" :disabled="notesForm.processing">
-                                    Enregistrer
-                                </PrimaryButton>
-                            </div>
-                            <div v-else class="flex items-center gap-2 text-emerald-500">
-                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
-                                </svg>
-                                <span class="text-[10px] font-black uppercase tracking-widest">Enregistré</span>
-                            </div>
-                        </div>
-                    </div>
-
-                    <!-- Markdown Help Guide -->
-                    <div v-if="!isPreview" class="mb-6 grid grid-cols-2 md:grid-cols-4 gap-2">
-                        <div class="p-2 border border-slate-100 dark:border-slate-700/50 rounded-lg text-[10px] text-slate-500 dark:text-slate-400">
-                            <code class="text-indigo-500 font-bold"># Titre</code>, <code class="text-indigo-500 font-bold">## Sous-titre</code>
-                        </div>
-                        <div class="p-2 border border-slate-100 dark:border-slate-700/50 rounded-lg text-[10px] text-slate-500 dark:text-slate-400">
-                            <code class="text-indigo-500 font-bold">**Gras**</code>, <code class="text-indigo-500 font-bold">*Italique*</code>
-                        </div>
-                        <div class="p-2 border border-slate-100 dark:border-slate-700/50 rounded-lg text-[10px] text-slate-500 dark:text-slate-400">
-                            <code class="text-indigo-500 font-bold">* Liste</code>, <code class="text-indigo-500 font-bold">1. Liste num.</code>
-                        </div>
-                        <div class="p-2 border border-slate-100 dark:border-slate-700/50 rounded-lg text-[10px] text-slate-500 dark:text-slate-400">
-                            <code class="text-indigo-500 font-bold">> Citation</code>, <code class="text-indigo-500 font-bold">--- (Ligne)</code>
-                        </div>
-                    </div>
-                    
-                    <div class="relative group">
-                        <div v-if="isPreview" 
-                             class="prose dark:prose-invert prose-slate max-w-none w-full bg-slate-50 dark:bg-slate-900 rounded-2xl p-8 min-h-[300px] text-sm leading-relaxed"
-                             v-html="renderedNotes">
-                        </div>
-                        <textarea 
-                            v-else
-                            v-model="notesForm.notes"
-                            rows="12"
-                            class="w-full bg-slate-50 dark:bg-slate-900 border-none rounded-2xl p-6 text-sm selection:bg-indigo-100 dark:selection:bg-indigo-900 focus:ring-2 focus:ring-indigo-500/20 transition-all placeholder:text-slate-300 dark:placeholder:text-slate-600 leading-relaxed font-mono"
-                            placeholder="Rédigez ici vos questions (utilisez # pour les titres, * pour les listes...)"
-                        ></textarea>
-                        
-                        <div v-if="!isPreview" class="absolute bottom-4 right-4 text-[9px] font-bold text-slate-400 opacity-60 flex items-center gap-1">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" viewBox="0 0 20 20" fill="currentColor">
-                                <path fill-rule="evenodd" d="M2.166 4.999A11.954 11.954 0 0010 1.944 11.954 11.954 0 0017.834 5c.11.65.166 1.32.166 2.001 0 5.225-3.34 9.67-8 11.317C5.34 16.67 2 12.225 2 7c0-.682.057-1.35.166-2.001zm11.541 3.708a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
-                            </svg>
-                            Markdown Supporté
-                        </div>
-                    </div>
-                </div>
-            </div> <!-- Fin Interview Tab -->
-
-            <!-- Tab Content: Tests -->
-            <div v-if="activeTab === 'tests'" class="space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-500">
-                <!-- Historique des Tests (Full Width) -->
-                <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700 p-8">
-                    <h3 class="text-xl font-bold mb-8 flex items-center justify-between">
-                        Historique des Tests
-                        <span class="text-sm font-normal text-slate-400">{{ candidate.attempts.length }} tentative(s)</span>
-                    </h3>
-
-                    <div v-if="candidate.attempts.length > 0" class="space-y-6">
-                        <div v-for="attempt in candidate.attempts" :key="attempt.id" class="bg-slate-50 dark:bg-slate-900 rounded-3xl border border-slate-200 dark:border-slate-800 overflow-hidden group">
-                            <!-- Attempt Header -->
-                            <div 
-                                @click="toggleAttempt(attempt.id)"
-                                class="p-6 flex flex-col md:flex-row md:items-center justify-between gap-6 cursor-pointer hover:bg-slate-100 dark:hover:bg-slate-800/50 transition-colors"
-                            >
-                                <div class="flex items-center gap-6">
-                                    <div class="px-5 py-3 bg-white dark:bg-slate-800 rounded-2xl border border-slate-200 dark:border-slate-700 shadow-sm text-center min-w-[100px]">
-                                        <div class="text-[10px] uppercase font-black tracking-widest text-slate-400">Score</div>
-                                        <div class="text-xl font-black text-indigo-600 dark:text-indigo-400">
-                                            {{ attempt.score }}<span class="text-slate-300 dark:text-slate-600 mx-1">/</span>{{ attempt.max_score || '?' }}
-                                        </div>
-                                    </div>
-                                    <div>
-                                        <h4 class="text-xl font-black uppercase tracking-tight">{{ attempt.quiz?.title ?? 'Quiz supprimé' }}</h4>
-                                        <div class="text-xs text-slate-400 mt-1 uppercase font-bold tracking-widest">
-                                            Fini le {{ formatDateTime(attempt.finished_at) }}
-                                        </div>
-                                    </div>
-                                </div>
-                                
-                                <div class="flex items-center gap-4 self-end md:self-auto">
-                                    <button 
-                                        @click.stop="deleteAttempt(attempt.id)"
-                                        class="p-3 text-slate-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-xl transition-all"
-                                        title="Supprimer ce test"
-                                    >
-                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
-                                        </svg>
-                                    </button>
-                                    <div class="w-10 h-10 rounded-full bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 flex items-center justify-center text-slate-400 group-hover:text-indigo-600 group-hover:border-indigo-500 transition-all shadow-sm">
-                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 transition-transform duration-300" :class="{ 'rotate-180': openAttempts.includes(attempt.id) }" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
-                                        </svg>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <!-- Accordion Content -->
-                            <div v-show="openAttempts.includes(attempt.id)" class="border-t border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-800/50 divide-y divide-slate-100 dark:divide-slate-800 animate-in slide-in-from-top-2 duration-300">
-                                <div v-for="(answer, aIdx) in attempt.answers" :key="answer.id" class="p-8">
-                                    <div class="flex items-start gap-6">
-                                        <div class="w-10 h-10 rounded-2xl bg-slate-50 dark:bg-slate-900 border border-slate-100 dark:border-slate-800 flex items-center justify-center font-black text-xs shrink-0 text-slate-400">
-                                            {{ String(aIdx + 1).padStart(2, '0') }}
-                                        </div>
+                        <!-- Questions entretien -->
+                        <div v-if="notesForm.interview_details.questions?.length">
+                            <p class="text-[9px] font-black uppercase tracking-[0.16em] text-ink/35 mb-3">Questions d'entretien</p>
+                            <div class="space-y-3">
+                                <div v-for="(q, i) in notesForm.interview_details.questions" :key="i" class="p-4 rounded-xl border border-ink/[0.07] bg-neutral">
+                                    <p class="text-xs font-bold text-ink mb-3">{{ i + 1 }}. {{ q.question }}</p>
+                                    <div class="flex gap-3">
                                         <div class="flex-1">
-                                            <h5 class="text-sm font-bold text-slate-700 dark:text-slate-300 mb-4 leading-relaxed">{{ answer.question.label }}</h5>
-                                            
-                                            <!-- QCM Answer -->
-                                            <div v-if="answer.question.type === 'qcm'" class="flex items-center">
-                                                <div 
-                                                    class="px-5 py-3 rounded-2xl text-[13px] font-bold border flex items-center gap-3 shadow-sm"
-                                                    :class="[
-                                                        answer.option.is_correct 
-                                                        ? 'bg-emerald-50 text-emerald-700 border-emerald-200 dark:bg-emerald-900/20 dark:border-emerald-800 dark:text-emerald-400' 
-                                                        : 'bg-red-50 text-red-700 border-red-200 dark:bg-red-900/20 dark:border-red-800 dark:text-red-400'
-                                                    ]"
-                                                >
-                                                    <div class="p-1 rounded-full bg-white/50 dark:bg-black/20">
-                                                        <svg v-if="answer.option.is_correct" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
-                                                        </svg>
-                                                        <svg v-else xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-                                                        </svg>
-                                                    </div>
-                                                    {{ answer.option.option_text }}
-                                                </div>
-                                            </div>
-
-                                            <!-- Open Answer -->
-                                            <div v-else class="space-y-4">
-                                                <div class="p-6 bg-slate-50 dark:bg-slate-900 border border-slate-100 dark:border-slate-800 rounded-3xl text-[13px] text-slate-600 dark:text-slate-400 leading-relaxed italic shadow-inner">
-                                                    " {{ answer.text_content || 'Aucune réponse fournie.' }} "
-                                                </div>
-                                                
-                                                <!-- Score Input for Open Question -->
-                                                <div class="flex items-center gap-4 bg-slate-50 dark:bg-slate-900/50 p-4 rounded-2xl border border-dashed border-slate-200 dark:border-slate-700">
-                                                    <div class="text-[10px] font-black uppercase tracking-widest text-slate-400">Note Attribuée :</div>
-                                                    <div class="flex items-center gap-2">
-                                                        <input 
-                                                            type="number" 
-                                                            v-model="answer.score" 
-                                                            min="0" 
-                                                            :max="answer.question.points" 
-                                                            step="0.5"
-                                                            @change="updateAnswerScore(answer.id, answer.score)"
-                                                            class="w-20 bg-white dark:bg-slate-800 border-none rounded-xl py-1 px-3 font-black text-indigo-600 focus:ring-2 focus:ring-indigo-500/20 transition-all text-center"
-                                                        />
-                                                        <span class="text-xs font-bold text-slate-300">/ {{ answer.question.points }}</span>
-                                                    </div>
-                                                    <div class="text-[9px] text-slate-400 italic">Enregistré au clic/changement</div>
-                                                </div>
-                                            </div>
+                                            <label class="text-[9px] font-black uppercase tracking-wider text-ink/30 mb-1 block">Commentaire</label>
+                                            <input v-model="q.comment" type="text" placeholder="Réponse du candidat…"
+                                                class="w-full rounded-lg border border-ink/10 bg-surface px-3 py-2 text-xs font-semibold text-ink focus:border-primary focus:ring-2 focus:ring-primary/15 outline-none" />
+                                        </div>
+                                        <div class="w-20">
+                                            <label class="text-[9px] font-black uppercase tracking-wider text-ink/30 mb-1 block">Score /5</label>
+                                            <input v-model="q.score" type="number" min="0" max="5" step="0.5"
+                                                class="w-full rounded-lg border border-ink/10 bg-surface px-3 py-2 text-xs font-black text-primary focus:border-primary focus:ring-2 focus:ring-primary/15 outline-none text-center" />
                                         </div>
                                     </div>
                                 </div>
                             </div>
                         </div>
-                    </div>
-                    <div v-else class="py-12 text-center text-slate-400 italic">
-                        Ce candidat n'a pas encore terminé de test.
-                    </div>
-                </div>
-            </div> <!-- Fin Tests Tab -->
 
-            <!-- Tab Content: Documents -->
-            <div v-if="activeTab === 'documents'" class="space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-500">
-                <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700 p-8">
-                    <h4 class="font-bold mb-6 flex items-center gap-2 text-xl">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-[#004f82]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" />
-                        </svg>
-                        Gestion des Documents
-                    </h4>
-                    
-                    <div v-if="candidate.documents?.length === 0" class="py-8 text-center text-slate-400 italic bg-neutral/10 rounded-xl border border-dashed border-anthracite/10">
-                        Aucun document disponible pour ce candidat.
+                        <!-- Save -->
+                        <div class="flex justify-end">
+                            <button @click="saveNotes" :disabled="notesForm.processing"
+                                class="flex items-center gap-2 px-5 py-2.5 rounded-[10px] bg-highlight text-highlight-dark text-xs font-extrabold uppercase tracking-[0.08em] shadow-gold hover:brightness-105 transition-all disabled:opacity-50">
+                                <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21H5a2 2 0 01-2-2V5a2 2 0 012-2h11l5 5v11a2 2 0 01-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></svg>
+                                Enregistrer
+                            </button>
+                        </div>
                     </div>
 
-                    <div v-else class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
-                        <button 
-                            v-for="doc in candidate.documents" 
-                            :key="doc.id"
-                            @click="openPreview(doc)"
-                            class="flex items-center justify-between p-5 bg-neutral/20 border border-anthracite/5 rounded-2xl hover:bg-neutral/50 transition-colors group text-left"
-                        >
-                            <div class="flex items-center gap-4">
-                                <div class="p-3 bg-white rounded-xl shadow-sm group-hover:bg-primary group-hover:text-white transition-colors">
-                                    <svg v-if="doc.type === 'cv'" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-                                    </svg>
-                                    <svg v-else xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+                    <!-- ── Tab: Documents ── -->
+                    <div v-if="activeTab === 'documents'" class="p-6 space-y-5">
+                        <!-- Documents list -->
+                        <div class="space-y-2.5">
+                            <div v-for="doc in candidate.documents" :key="doc.id"
+                                class="flex items-center gap-4 p-4 rounded-xl border border-ink/[0.07] hover:bg-neutral transition-colors">
+                                <div :class="['w-10 h-10 rounded-xl flex items-center justify-center shrink-0', doc.type === 'cv' ? 'bg-primary/10' : 'bg-accent/10']">
+                                    <svg :class="['w-5 h-5', doc.type === 'cv' ? 'text-primary' : 'text-accent']" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                        <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/>
                                     </svg>
                                 </div>
+                                <div class="flex-1 min-w-0">
+                                    <p class="text-sm font-bold text-ink truncate">{{ doc.original_name }}</p>
+                                    <p class="text-xs text-ink/40 font-semibold">{{ doc.type === 'cv' ? 'Curriculum Vitæ' : 'Lettre de motivation' }}</p>
+                                </div>
+                                <a :href="route('admin.documents.show', doc.id)" target="_blank"
+                                    class="px-4 py-2 rounded-lg border border-ink/10 text-xs font-extrabold uppercase tracking-[0.07em] text-ink/60 hover:bg-primary/5 hover:border-primary hover:text-primary transition-all">
+                                    Voir
+                                </a>
+                            </div>
+                            <div v-if="!candidate.documents?.length" class="text-center py-10 text-ink/30 text-sm font-semibold italic">
+                                Aucun document uploadé.
+                            </div>
+                        </div>
+
+                        <!-- Document preview -->
+                        <div v-if="selectedDocument" class="rounded-xl border border-ink/[0.07] overflow-hidden">
+                            <iframe :src="route('admin.documents.show', selectedDocument.id)" class="w-full h-[500px] border-none" />
+                        </div>
+
+                        <!-- Upload form -->
+                        <form @submit.prevent="updateDocuments" class="p-5 rounded-xl border border-ink/[0.07] bg-neutral space-y-4">
+                            <p class="text-[9px] font-black uppercase tracking-[0.16em] text-ink/35">Uploader des documents</p>
+                            <div class="grid md:grid-cols-2 gap-4">
+                                <div>
+                                    <label class="text-[9px] font-black uppercase tracking-[0.12em] text-ink/40 mb-2 block">CV (PDF)</label>
+                                    <input type="file" accept=".pdf" @change="docForm.cv = $event.target.files[0]"
+                                        class="w-full text-xs text-ink/60 file:mr-3 file:py-2 file:px-4 file:rounded-lg file:border-0 file:bg-primary file:text-white file:text-xs file:font-bold file:uppercase file:tracking-wider hover:file:bg-primary-dark file:cursor-pointer" />
+                                </div>
                                 <div>
-                                    <div class="text-sm font-black uppercase tracking-tight text-primary">{{ doc.type === 'cv' ? 'Curriculum Vitae' : 'Lettre de Motivation' }}</div>
-                                    <div class="text-[11px] text-slate-500 font-medium mt-1 truncate">{{ doc.original_name }}</div>
+                                    <label class="text-[9px] font-black uppercase tracking-[0.12em] text-ink/40 mb-2 block">Lettre de motivation (PDF)</label>
+                                    <input type="file" accept=".pdf" @change="docForm.cover_letter = $event.target.files[0]"
+                                        class="w-full text-xs text-ink/60 file:mr-3 file:py-2 file:px-4 file:rounded-lg file:border-0 file:bg-primary file:text-white file:text-xs file:font-bold file:uppercase file:tracking-wider hover:file:bg-primary-dark file:cursor-pointer" />
                                 </div>
                             </div>
-                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-slate-400 group-hover:translate-x-1 group-hover:text-primary transition-all" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
-                            </svg>
-                        </button>
-                    </div>
-
-                    <div class="pt-8 border-t border-anthracite/5">
-                        <h5 class="text-sm font-black uppercase text-anthracite/60 tracking-widest mb-6">Ajouter ou Remplacer les documents</h5>
-                        <form @submit.prevent="updateDocuments" class="space-y-6">
-                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-                                <div class="relative group/file">
-                                    <label class="flex flex-col items-center justify-center p-6 bg-neutral/20 border-2 border-dashed border-anthracite/10 rounded-2xl cursor-pointer hover:border-primary hover:bg-neutral/40 transition-all">
-                                        <div class="mb-3 p-2 bg-white rounded-lg shadow-sm group-hover/file:bg-primary group-hover/file:text-white transition-colors">
-                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-slate-400 group-hover/file:text-white transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" /></svg>
-                                        </div>
-                                        <span class="text-xs font-black uppercase tracking-tight text-primary mb-1">Nouveau CV (PDF)</span>
-                                        <span class="text-[10px] text-slate-400 truncate w-full text-center">{{ docForm.cv ? docForm.cv.name : 'Cliquer pour parcourir...' }}</span>
-                                        <input type="file" class="hidden" @input="docForm.cv = $event.target.files[0]" accept="application/pdf" />
-                                    </label>
-                                    <InputError :message="docForm.errors.cv" class="mt-2" />
-                                </div>
-                                <div class="relative group/file">
-                                    <label class="flex flex-col items-center justify-center p-6 bg-neutral/20 border-2 border-dashed border-anthracite/10 rounded-2xl cursor-pointer hover:border-accent hover:bg-neutral/40 transition-all">
-                                        <div class="mb-3 p-2 bg-white rounded-lg shadow-sm group-hover/file:bg-accent group-hover/file:text-white transition-colors">
-                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-slate-400 group-hover/file:text-white transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" /></svg>
-                                        </div>
-                                        <span class="text-xs font-black uppercase tracking-tight text-accent mb-1">Nouvelle Lettre (PDF)</span>
-                                        <span class="text-[10px] text-slate-400 truncate w-full text-center">{{ docForm.cover_letter ? docForm.cover_letter.name : 'Cliquer pour parcourir...' }}</span>
-                                        <input type="file" class="hidden" @input="docForm.cover_letter = $event.target.files[0]" accept="application/pdf" />
-                                    </label>
-                                    <InputError :message="docForm.errors.cover_letter" class="mt-2" />
-                                </div>
-                            </div>
-                            <PrimaryButton class="!px-8 py-3 text-sm" :disabled="docForm.processing || (!docForm.cv && !docForm.cover_letter)">
-                                Enregistrer les nouveaux documents
-                            </PrimaryButton>
+                            <button type="submit" :disabled="docForm.processing"
+                                class="px-5 py-2.5 rounded-[10px] bg-highlight text-highlight-dark text-xs font-extrabold uppercase tracking-[0.08em] shadow-gold hover:brightness-105 transition-all disabled:opacity-50">
+                                Envoyer
+                            </button>
                         </form>
                     </div>
-                </div>
-                </div> <!-- Fin Documents Tab Content (1241) -->
 
+                    <!-- ── Tab: Tests ── -->
+                    <div v-if="activeTab === 'tests'" class="p-6 space-y-3">
+                        <div v-if="!candidate.attempts?.length" class="text-center py-12 text-ink/30 text-sm font-semibold italic">
+                            Aucune tentative de test enregistrée.
+                        </div>
 
-        <!-- Document Preview Modal -->
-        <Modal :show="!!selectedDocument" @close="selectedDocument = null" max-width="4xl">
-            <div class="p-6 h-[80vh] flex flex-col">
-                <div class="flex justify-between items-center mb-4">
-                    <h3 class="text-xl font-bold">Aperçu : {{ selectedDocument.original_name }}</h3>
-                    <SecondaryButton @click="selectedDocument = null">Fermer</SecondaryButton>
+                        <div v-for="attempt in candidate.attempts" :key="attempt.id"
+                            class="rounded-xl border border-ink/[0.07] overflow-hidden">
+                            <!-- Attempt header -->
+                            <button @click="toggleAttempt(attempt.id)"
+                                class="w-full flex items-center justify-between p-4 hover:bg-neutral transition-colors text-left">
+                                <div class="flex items-center gap-4">
+                                    <div :class="['w-9 h-9 rounded-lg flex items-center justify-center text-xs font-black shrink-0',
+                                        attempt.finished_at ? 'bg-success/12 text-success' : 'bg-highlight/15 text-highlight']">
+                                        {{ attempt.finished_at && attempt.max_score > 0 ? ((attempt.score / attempt.max_score) * 20).toFixed(1) : '…' }}
+                                    </div>
+                                    <div>
+                                        <p class="text-sm font-bold text-ink">{{ attempt.quiz?.title }}</p>
+                                        <p class="text-xs text-ink/40 font-semibold">{{ formatDateTime(attempt.started_at) }}</p>
+                                    </div>
+                                </div>
+                                <div class="flex items-center gap-3">
+                                    <span :class="['text-[10px] font-black uppercase tracking-[0.12em] px-2.5 py-1 rounded-full',
+                                        attempt.finished_at ? 'bg-success/10 text-success' : 'bg-highlight/12 text-highlight']">
+                                        {{ attempt.finished_at ? 'Terminé' : 'En cours' }}
+                                    </span>
+                                    <svg :class="['w-4 h-4 text-ink/30 transition-transform duration-200', openAttempts.includes(attempt.id) ? 'rotate-180' : '']" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>
+                                </div>
+                            </button>
+
+                            <!-- Attempt detail -->
+                            <div v-if="openAttempts.includes(attempt.id)" class="border-t border-ink/[0.07] p-4 bg-neutral space-y-3">
+                                <div class="flex justify-between items-center mb-2">
+                                    <span class="text-[9px] font-black uppercase tracking-[0.14em] text-ink/35">Détail des réponses</span>
+                                    <button @click="deleteAttempt(attempt.id)" class="text-[10px] font-bold text-accent/60 hover:text-accent uppercase tracking-wider transition-colors">
+                                        Supprimer
+                                    </button>
+                                </div>
+                                <div v-for="answer in attempt.answers" :key="answer.id"
+                                    class="p-3 rounded-xl bg-surface border border-ink/[0.07]">
+                                    <p class="text-xs font-bold text-ink mb-2">{{ answer.question?.label }}</p>
+                                    <div class="flex items-center justify-between gap-4">
+                                        <div class="flex-1">
+                                            <p class="text-xs text-ink/55 font-semibold">
+                                                {{ answer.option?.option_text || answer.text_content || '—' }}
+                                            </p>
+                                            <span v-if="answer.question?.type === 'qcm'" :class="['text-[9px] font-black uppercase tracking-wider mt-1 inline-block',
+                                                answer.option?.is_correct ? 'text-success' : 'text-accent']">
+                                                {{ answer.option?.is_correct ? '✓ Correct' : '✗ Incorrect' }}
+                                            </span>
+                                        </div>
+                                        <div v-if="answer.question?.type === 'open'" class="flex items-center gap-2 shrink-0">
+                                            <input type="number" :value="answer.score" min="0" :max="answer.question.points" step="0.5"
+                                                @change="updateAnswerScore(answer.id, $event.target.value, answer.question.points)"
+                                                class="w-16 rounded-lg border border-ink/10 bg-neutral px-2 py-1.5 text-xs font-black text-primary text-center focus:border-primary focus:ring-2 focus:ring-primary/15 outline-none" />
+                                            <span class="text-[10px] text-ink/30 font-bold">/ {{ answer.question.points }}</span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                </div><!-- end tabs card -->
+            </div><!-- end right panel -->
+        </div><!-- end flex layout -->
+
+        <!-- ─── Modal: Éditer les infos ────────────────────────────────────── -->
+        <Modal :show="showEditDetailsModal" @close="showEditDetailsModal = false" max-width="lg">
+            <div class="p-6 space-y-5">
+                <h3 class="font-serif font-black text-lg text-primary">Modifier les informations</h3>
+                <div class="grid md:grid-cols-2 gap-4">
+                    <div v-for="(field, key) in { name:'Nom complet', email:'Email', phone:'Téléphone', linkedin_url:'LinkedIn URL' }" :key="key">
+                        <label class="text-[9px] font-black uppercase tracking-[0.14em] text-ink/35 mb-1.5 block">{{ field }}</label>
+                        <input v-model="detailsForm[key]" type="text"
+                            class="w-full rounded-[10px] border border-ink/10 bg-neutral px-3 py-2.5 text-sm font-semibold text-ink focus:border-primary focus:ring-2 focus:ring-primary/15 outline-none" />
+                        <InputError :message="detailsForm.errors[key]" class="mt-1" />
+                    </div>
                 </div>
-                <div class="flex-1 bg-slate-100 dark:bg-slate-900 rounded-lg overflow-hidden border border-slate-200 dark:border-slate-700">
-                    <iframe 
-                        v-if="selectedDocument" 
-                        :src="route('admin.documents.show', selectedDocument.id)" 
-                        class="w-full h-full"
-                    ></iframe>
+                <div class="flex justify-end gap-3 pt-2">
+                    <SecondaryButton @click="showEditDetailsModal = false">Annuler</SecondaryButton>
+                    <button @click="updateDetails" :disabled="detailsForm.processing"
+                        class="px-5 py-2.5 rounded-[10px] bg-highlight text-highlight-dark text-xs font-extrabold uppercase tracking-[0.08em] shadow-gold hover:brightness-105 transition-all disabled:opacity-50">
+                        Enregistrer
+                    </button>
                 </div>
             </div>
         </Modal>
+
+        <!-- ─── Modal: Erreur IA ────────────────────────────────────────────── -->
+        <Modal :show="showErrorModal" @close="showErrorModal = false" max-width="md">
+            <div class="p-6 space-y-4">
+                <div class="flex items-center gap-3">
+                    <div class="w-10 h-10 rounded-full bg-accent/10 flex items-center justify-center shrink-0">
+                        <svg class="w-5 h-5 text-accent" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
+                    </div>
+                    <h3 class="font-serif font-black text-base text-ink">Erreur d'analyse</h3>
+                </div>
+                <p class="text-sm text-ink/60 font-semibold leading-relaxed">{{ modalErrorMessage }}</p>
+                <div class="flex justify-end">
+                    <button @click="showErrorModal = false"
+                        class="px-5 py-2.5 rounded-[10px] bg-accent text-white text-xs font-extrabold uppercase tracking-[0.08em] hover:brightness-110 transition-all">
+                        Fermer
+                    </button>
+                </div>
+            </div>
+        </Modal>
+
     </AdminLayout>
-
-    <!-- Edit Details Modal -->
-    <Modal :show="showEditDetailsModal" @close="showEditDetailsModal = false">
-        <div class="p-6">
-            <h2 class="text-lg font-black uppercase tracking-tight text-slate-900 dark:text-white mb-6">Modifier les informations</h2>
-            
-            <form @submit.prevent="updateDetails" class="space-y-4">
-                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-                    <div>
-                        <label class="block text-[10px] font-black uppercase tracking-widest text-slate-400 mb-1">Nom complet</label>
-                        <input 
-                            v-model="detailsForm.name" 
-                            type="text" 
-                            class="w-full bg-slate-50 dark:bg-slate-900 border-slate-200 dark:border-slate-700 rounded-xl focus:ring-indigo-500/20 focus:border-indigo-500 transition-all font-bold text-sm"
-                            placeholder="Ex: Jean Dupont"
-                        />
-                        <InputError :message="detailsForm.errors.name" class="mt-1" />
-                    </div>
-                    <div>
-                        <label class="block text-[10px] font-black uppercase tracking-widest text-slate-400 mb-1">Email</label>
-                        <input 
-                            v-model="detailsForm.email" 
-                            type="email" 
-                            class="w-full bg-slate-50 dark:bg-slate-900 border-slate-200 dark:border-slate-700 rounded-xl focus:ring-indigo-500/20 focus:border-indigo-500 transition-all font-bold text-sm"
-                            placeholder="Email candidat"
-                        />
-                        <InputError :message="detailsForm.errors.email" class="mt-1" />
-                    </div>
-                </div>
-
-                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-                    <div>
-                        <label class="block text-[10px] font-black uppercase tracking-widest text-slate-400 mb-1">Téléphone</label>
-                        <input 
-                            v-model="detailsForm.phone" 
-                            type="text" 
-                            class="w-full bg-slate-50 dark:bg-slate-900 border-slate-200 dark:border-slate-700 rounded-xl focus:ring-indigo-500/20 focus:border-indigo-500 transition-all font-bold text-sm"
-                            placeholder="Ex: 06 12 34 56 78"
-                        />
-                        <InputError :message="detailsForm.errors.phone" class="mt-1" />
-                    </div>
-                    <div>
-                        <label class="block text-[10px] font-black uppercase tracking-widest text-slate-400 mb-1">URL LinkedIn</label>
-                        <input 
-                            v-model="detailsForm.linkedin_url" 
-                            type="url" 
-                            class="w-full bg-slate-50 dark:bg-slate-900 border-slate-200 dark:border-slate-700 rounded-xl focus:ring-indigo-500/20 focus:border-indigo-500 transition-all font-bold text-sm"
-                            placeholder="https://linkedin.com/in/..."
-                        />
-                        <InputError :message="detailsForm.errors.linkedin_url" class="mt-1" />
-                    </div>
-                </div>
-
-                <div class="flex justify-end gap-3 pt-4">
-                    <SecondaryButton @click="showEditDetailsModal = false" type="button">Annuler</SecondaryButton>
-                    <PrimaryButton :class="{ 'opacity-25': detailsForm.processing }" :disabled="detailsForm.processing">
-                        Enregistrer les modifications
-                    </PrimaryButton>
-                </div>
-            </form>
-        </div>
-    </Modal>
-
-    <!-- Error Modal -->
-    <Modal :show="showErrorModal" @close="showErrorModal = false" maxWidth="md">
-        <div class="p-6">
-            <div class="flex items-center gap-4 mb-4 text-red-600">
-                <div class="flex-shrink-0 w-12 h-12 bg-red-100 dark:bg-red-900/30 rounded-full flex items-center justify-center">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
-                    </svg>
-                </div>
-                <h2 class="text-xl font-bold">Attention</h2>
-            </div>
-            
-            <p class="text-slate-600 dark:text-slate-400 mb-6">
-                {{ modalErrorMessage }}
-            </p>
-
-            <div class="flex justify-end">
-                <PrimaryButton @click="showErrorModal = false" class="!bg-red-600 hover:!bg-red-500 !border-none">
-                    Fermer
-                </PrimaryButton>
-            </div>
-        </div>
-    </Modal>
 </template>
diff --git a/resources/views/app.blade.php b/resources/views/app.blade.php
index 558aac4..2fa4332 100644
--- a/resources/views/app.blade.php
+++ b/resources/views/app.blade.php
@@ -10,6 +10,9 @@
         <!-- Fonts -->
         <link rel="preconnect" href="https://fonts.bunny.net">
         <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@700;900&family=Nunito:wght@400;600;700;800;900&display=swap" rel="stylesheet" />
 
         <!-- Scripts -->
         @routes
diff --git a/tailwind.config.js b/tailwind.config.js
index 2c5b836..e8ef2c2 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -14,19 +14,147 @@ export default {
 
     theme: {
         extend: {
+            // ─── COULEURS ────────────────────────────────────────────────
             colors: {
-                primary: '#1a4b8c',       // Bleu Méditerranée
-                accent: '#c8102e',        // Rouge Occitan
-                highlight: '#f5a800',     // Or du Midi
-                sky: '#3a7abf',           // Bleu ciel
-                sand: '#e8e0d0',          // Sable garrigue
-                anthracite: '#2d2d2d',    // Anthracite
-                neutral: '#f0ece4',       // Fond neutre
+                // Palette principale — CABM
+                primary: {
+                    DEFAULT: '#1a4b8c',   // Bleu Méditerranée
+                    dark:    '#122f5a',   // Bleu nuit
+                    light:   '#3a7abf',   // Bleu ciel (ex: sky)
+                },
+                accent: {
+                    DEFAULT: '#c8102e',   // Rouge Occitan
+                    soft:    'rgba(200,16,46,0.10)',
+                },
+                highlight: {
+                    DEFAULT: '#f5a800',   // Or du Midi
+                    soft:    'rgba(245,168,0,0.12)',
+                    dark:    '#3a2800',   // Texte sur fond or
+                },
+                // Neutres chauds
+                sand:      '#e8e0d0',    // Sable garrigue (ex: sand)
+                neutral:   '#f0ece4',    // Fond neutre warm
+                surface:   '#faf9f7',    // Surface carte (ex: white)
+                // Texte
+                ink: {
+                    DEFAULT: '#2d2d2d',  // Anthracite
+                    muted:   'rgba(45,45,45,0.50)',
+                    faint:   'rgba(45,45,45,0.28)',
+                },
+                // Dark mode
+                dark: {
+                    bg:      '#0f1923',
+                    surface: '#162130',
+                    sidebar: '#0a111a',
+                    border:  'rgba(255,255,255,0.06)',
+                },
+                // Sémantiques
+                success: '#10b981',
+                warning: '#f5a800',
+                danger:  '#c8102e',
+                info:    '#3a7abf',
+
+                // Compat rétro (garde les anciens noms fonctionnels)
+                anthracite: '#2d2d2d',
+                sky:        '#3a7abf',
             },
+
+            // ─── TYPOGRAPHIE ─────────────────────────────────────────────
             fontFamily: {
-                sans: ['Helvetica Neue', 'Arial', 'sans-serif'],
-                serif: ['Merriweather', 'Georgia', 'serif'],
+                sans:     ['Nunito', 'Helvetica Neue', 'Arial', 'sans-serif'],
+                serif:    ['Merriweather', 'Georgia', 'serif'],
                 subtitle: ['Nunito', 'Gill Sans', 'sans-serif'],
+                mono:     ['JetBrains Mono', 'Fira Code', 'monospace'],
+            },
+            fontSize: {
+                '2xs': ['0.625rem', { lineHeight: '1rem',    letterSpacing: '0.12em' }],  // 10px — labels caps
+                'xs':  ['0.75rem',  { lineHeight: '1.25rem'                          }],  // 12px
+                'sm':  ['0.8125rem',{ lineHeight: '1.375rem'                         }],  // 13px
+                'base':['0.875rem', { lineHeight: '1.5rem'                           }],  // 14px
+                'md':  ['1rem',     { lineHeight: '1.625rem'                         }],  // 16px
+                'lg':  ['1.0625rem',{ lineHeight: '1.75rem'                          }],  // 17px
+                'xl':  ['1.125rem', { lineHeight: '1.75rem'                          }],  // 18px
+                '2xl': ['1.25rem',  { lineHeight: '1.875rem'                         }],  // 20px
+                '3xl': ['1.5rem',   { lineHeight: '2rem'                             }],  // 24px
+                '4xl': ['2rem',     { lineHeight: '2.25rem', letterSpacing: '-0.02em'}],  // 32px
+            },
+
+            // ─── ESPACEMENT ──────────────────────────────────────────────
+            // Garde l'échelle Tailwind standard + quelques tokens nommés
+            spacing: {
+                'sidebar':    '220px',
+                'sidebar-sm': '64px',
+                'header':     '60px',
+                'navbar':     '40px',
+            },
+
+            // ─── BORDER RADIUS ───────────────────────────────────────────
+            borderRadius: {
+                'none':  '0',
+                'sm':    '6px',
+                'DEFAULT':'8px',
+                'md':    '10px',
+                'lg':    '12px',
+                'xl':    '14px',
+                '2xl':   '16px',
+                '3xl':   '20px',
+                '4xl':   '28px',
+                'full':  '9999px',
+                // Tokens sémantiques
+                'card':  '16px',
+                'btn':   '10px',
+                'badge': '20px',
+                'input': '10px',
+            },
+
+            // ─── OMBRES ──────────────────────────────────────────────────
+            boxShadow: {
+                'xs':   '0 1px 3px rgba(0,0,0,0.05)',
+                'sm':   '0 1px 4px rgba(0,0,0,0.07)',
+                'DEFAULT':'0 2px 8px rgba(0,0,0,0.09)',
+                'md':   '0 4px 16px rgba(0,0,0,0.10)',
+                'lg':   '0 8px 28px rgba(0,0,0,0.12)',
+                'xl':   '0 16px 48px rgba(0,0,0,0.14)',
+                // Sémantiques couleurs
+                'primary': '0 4px 16px rgba(26,75,140,0.20)',
+                'gold':    '0 4px 16px rgba(245,168,0,0.30)',
+                'accent':  '0 4px 16px rgba(200,16,46,0.18)',
+                // Dark mode
+                'dark-sm': '0 2px 12px rgba(0,0,0,0.30)',
+                'dark-md': '0 4px 24px rgba(0,0,0,0.40)',
+                'none':    'none',
+            },
+
+            // ─── TRANSITIONS ─────────────────────────────────────────────
+            transitionDuration: {
+                'fast':    '120ms',
+                'DEFAULT': '180ms',
+                'slow':    '300ms',
+            },
+            transitionTimingFunction: {
+                'smooth': 'cubic-bezier(0.4, 0, 0.2, 1)',
+                'spring': 'cubic-bezier(0.34, 1.56, 0.64, 1)',
+            },
+
+            // ─── ANIMATIONS ──────────────────────────────────────────────
+            keyframes: {
+                'fade-in': {
+                    from: { opacity: '0', transform: 'translateY(6px)' },
+                    to:   { opacity: '1', transform: 'translateY(0)'   },
+                },
+                'slide-in': {
+                    from: { opacity: '0', transform: 'translateX(-8px)' },
+                    to:   { opacity: '1', transform: 'translateX(0)'    },
+                },
+                'pulse-gold': {
+                    '0%, 100%': { boxShadow: '0 0 0 0 rgba(245,168,0,0.3)' },
+                    '50%':      { boxShadow: '0 0 0 6px rgba(245,168,0,0)' },
+                },
+            },
+            animation: {
+                'fade-in':   'fade-in 0.2s ease-out',
+                'slide-in':  'slide-in 0.2s ease-out',
+                'pulse-gold':'pulse-gold 2s ease-in-out infinite',
             },
         },
     },