feat(design-system): reskin Charcoal — tokens dark-default + sidebar navy permanent

- Remplacement intégral index.css par palette Charcoal (DESIGN_SYSTEM.md v2.0)
- Dark = thème par défaut, .light = override via @custom-variant light
- Sidebar navy #0C1528 permanent (identique dark+light)
- Script anti-FOUC inline dans index.html
- Layout : radial-gradient sur <main>, sidebar 230px, max-w-[1100px]
- Renommage tokens Boréal→Charcoal sur ~45 composants
- Inversion dark: → baseline + light: sur primitives shadcn
- Fix logo blanc forcé dans sidebar
- ADR 006 mis à jour

Typecheck: OK · Tests: 122/122 ✅

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/features/historique/components/SimulationListItem.tsx

@@ -25,31 +25,33 @@ export function SimulationListItem({ item }: Props) {
   return (
     <Link
       to={`/rapport/${item.id}`}
-      className="block rounded-lg border border-line bg-surface p-4 shadow-sm transition-colors duration-150 hover:border-expria hover:bg-surface-hover focus-visible:outline-none focus-visible:shadow-focus"
+      className="block rounded-lg border border-border bg-surface p-4 shadow-card transition-colors duration-150 hover:border-brand hover:bg-surface-hover focus-visible:outline-none focus-visible:shadow-focus"
     >
       <div className="flex items-start justify-between gap-3">
         <div className="min-w-0 space-y-1">
           <div className="flex flex-wrap items-center gap-2">
-            <span className="text-sm font-semibold text-ink-1">{formatTache(item.tache)}</span>
+            <span className="text-sm font-semibold text-ink-primary">
+              {formatTache(item.tache)}
+            </span>
             {isExam && <Badge variant="nclc">Examen</Badge>}
             {!hasScore && <Badge variant="neutral">En cours</Badge>}
           </div>
-          <p className="text-xs text-ink-4">{formatRelativeDate(item.created_at)}</p>
+          <p className="text-xs text-ink-secondary">{formatRelativeDate(item.created_at)}</p>
         </div>
 
         {hasScore ? (
           <div className="shrink-0 text-right">
-            <p className="tabular-nums text-ink-1">
+            <p className="tabular-nums text-ink-primary">
               <span className="text-xl font-bold">{item.score}</span>
-              <span className="text-sm font-medium text-ink-4">/20</span>
+              <span className="text-sm font-medium text-ink-secondary">/20</span>
             </p>
-            <p className="text-xs text-ink-4 tabular-nums">
+            <p className="text-xs text-ink-secondary tabular-nums">
               NCLC {item.nclc}
               {item.nclc_cible ? ` / cible ${item.nclc_cible}` : ''}
             </p>
           </div>
         ) : (
-          <div className="shrink-0 text-right text-xs text-ink-4">Score à venir</div>
+          <div className="shrink-0 text-right text-xs text-ink-secondary">Score à venir</div>
         )}
       </div>
     </Link>

src/features/historique/components/SimulationsList.tsx

@@ -35,15 +35,15 @@ const PLACEHOLDER_WIDTHS = ['w-3/4', 'w-full', 'w-3/5', 'w-4/5'] as const
 
 function BlurredPreview({ onUpgrade }: { onUpgrade: () => void }) {
   return (
-    <div className="relative min-h-[240px] overflow-hidden rounded-lg border border-line bg-canvas-2">
+    <div className="relative min-h-[240px] overflow-hidden rounded-lg border border-border bg-surface">
       <div className="space-y-3 p-4 opacity-25 blur-sm" aria-hidden="true">
         {PLACEHOLDER_WIDTHS.map((w, i) => (
-          <div key={i} className={`h-16 rounded bg-ink-4 ${w}`} />
+          <div key={i} className={`h-16 rounded bg-surface-hover ${w}`} />
         ))}
       </div>
       <div className="absolute inset-0 flex flex-col items-center justify-center gap-3 px-4">
-        <Lock className="size-5 text-ink-4" aria-hidden="true" />
-        <p className="text-sm font-medium text-ink-2">Historique disponible en Standard</p>
+        <Lock className="size-5 text-ink-secondary" aria-hidden="true" />
+        <p className="text-sm font-medium text-ink-primary">Historique disponible en Standard</p>
         <Button variant="upgrade" size="sm" onClick={onUpgrade}>
           Passer en Standard
         </Button>
@@ -56,7 +56,7 @@ function ListSkeleton() {
   return (
     <div className="space-y-3" aria-busy="true" aria-label="Chargement de l'historique…">
       {Array.from({ length: 5 }).map((_, i) => (
-        <div key={i} className="h-20 animate-pulse rounded-lg bg-canvas-2" />
+        <div key={i} className="h-20 animate-pulse rounded-lg bg-surface" />
       ))}
     </div>
   )
@@ -65,8 +65,8 @@ function ListSkeleton() {
 function EmptyState() {
   return (
     <Card variant="default" className="space-y-3 p-6 text-center">
-      <p className="text-sm text-ink-2">Aucune simulation pour le moment.</p>
-      <p className="text-xs text-ink-4">
+      <p className="text-sm text-ink-primary">Aucune simulation pour le moment.</p>
+      <p className="text-xs text-ink-secondary">
         Lancez votre première simulation pour commencer à construire votre historique.
       </p>
       <div className="flex justify-center">
@@ -134,7 +134,7 @@ export function SimulationsList({
           <Button variant="secondary" size="sm" onClick={onPrev} disabled={isFirst}>
             Précédent
           </Button>
-          <p className="text-xs text-ink-4 tabular-nums" aria-live="polite">
+          <p className="text-xs text-ink-secondary tabular-nums" aria-live="polite">
             Page {page} sur {totalPages} — {data.pagination.total} simulations
           </p>
           <Button variant="secondary" size="sm" onClick={onNext} disabled={isLast}>

src/features/historique/pages/HistoriquePage.tsx

@@ -29,16 +29,16 @@ export function HistoriquePage() {
   return (
     <main className="mx-auto max-w-3xl space-y-6 px-4 py-6">
       <header className="space-y-1">
-        <h1 className="text-lg font-semibold text-ink-1">Historique</h1>
-        <p className="text-sm text-ink-3">
+        <h1 className="text-lg font-semibold text-ink-primary">Historique</h1>
+        <p className="text-sm text-ink-secondary">
           Retrouvez toutes vos simulations passées et leur progression.
         </p>
       </header>
 
       {isPlanLoading || !planData ? (
         <div className="space-y-3" aria-busy="true">
-          <div className="h-20 animate-pulse rounded-lg bg-canvas-2" />
-          <div className="h-20 animate-pulse rounded-lg bg-canvas-2" />
+          <div className="h-20 animate-pulse rounded-lg bg-surface" />
+          <div className="h-20 animate-pulse rounded-lg bg-surface" />
         </div>
       ) : (
         <SimulationsList