feat(oki): fondations de la migration vers la stack souveraine OKI

Architecture décidée et documentée dans ADR.md : SvelteKit natif en
fichiers plats plutôt que Strapi (55 outils, données statiques,
souveraineté et budget performance prioritaires — doctrine §1.2, §4.4).

- frontend/ : SvelteKit 2 + Svelte 5 (runes), adapter-static, 58 pages
  prérendues, CSS natif en @layer (reset→tokens→base→layouts→components),
  tokens oklch(), container queries, typo fluide clamp(), 2 polices WOFF2
  auto-hébergées (Atkinson Hyperlegible, Fraunces), zéro CDN tiers
- i18n FR/gcf typé (clé manquante = erreur de build), bascule Kréyòl
  persistée en localStorage, micro-textes créoles (« Ou pa manké ayen »)
- Composants : ToolCard, DifficultyBadge (forme+texte+couleur, jamais la
  couleur seule), CategoryNav (≤5 entrées, divulgation progressive),
  SearchBar (raccourci /), LanguageSwitcher, EndMarker
- content/ : 55 fiches migrées depuis src/ (script frontend/scripts/
  migrate-tools.mjs, idempotent), licences SPDX reprises de directory.json
- docs/ : DESIGN_SYSTEM.md et CONTENT_GUIDE.md

Budgets vérifiés : JS 41 Ko gzip, CSS 2,9 Ko gzip, svelte-check 0 erreur.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

frontend/src/lib/components/ToolCard.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+  import DifficultyBadge from './DifficultyBadge.svelte'
+  import { t } from '$lib/i18n/index.svelte'
+
+  interface CardTool {
+    name: string
+    slug: string
+    difficulty: 'beginner' | 'intermediate' | 'advanced'
+    license?: string
+    color?: string
+    monogram?: string
+    tags: string[]
+    excerpt: string
+  }
+
+  let { tool }: { tool: CardTool } = $props()
+</script>
+
+<article class="card">
+  <header class="cluster">
+    <span class="monogram" style:--tool-color={tool.color} aria-hidden="true">
+      {tool.monogram ?? tool.name.slice(0, 2)}
+    </span>
+    <h3><a href="/outils/{tool.slug}">{tool.name}</a></h3>
+  </header>
+
+  <p class="excerpt"><span class="visually-hidden">{t('tool.why')} : </span>{tool.excerpt}</p>
+
+  <footer class="cluster">
+    <DifficultyBadge difficulty={tool.difficulty} />
+    {#if tool.license}
+      <span class="meta">{tool.license}</span>
+    {/if}
+    {#each tool.tags as tag (tag)}
+      <span class="meta">{tag}</span>
+    {/each}
+  </footer>
+</article>
+
+<style>
+  .card {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    padding: var(--space-3);
+    border: 1px solid var(--oki-line);
+    border-left: 4px solid var(--oki-jaune);
+    border-radius: var(--radius-2);
+    background: var(--oki-surface);
+    height: 100%;
+  }
+
+  .monogram {
+    display: grid;
+    place-items: center;
+    inline-size: 2.5rem;
+    block-size: 2.5rem;
+    border-radius: var(--radius-2);
+    background: var(--tool-color, var(--oki-surface-2));
+    color: white;
+    font-weight: 700;
+    font-size: var(--text-0);
+  }
+
+  h3 {
+    font-size: var(--text-2);
+  }
+
+  /* toute la carte est cliquable via le pseudo-élément du lien —
+     un vrai <a>, pas de div cliquable (doctrine §4.3) */
+  h3 a {
+    text-decoration: none;
+  }
+  h3 a::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+  }
+  h3 a:focus-visible::after {
+    outline: var(--focus-ring);
+    outline-offset: -3px;
+    border-radius: var(--radius-2);
+  }
+
+  .excerpt {
+    color: var(--oki-ink-2);
+    font-size: var(--text-0);
+    flex-grow: 1;
+  }
+
+  .meta {
+    font-size: var(--text-0);
+    color: var(--oki-ink-2);
+    border: 1px solid var(--oki-line);
+    border-radius: var(--radius-2);
+    padding: 0.1em 0.6em;
+  }
+</style>