init : tokens de marque et thème sémantique shadcn (direction dark tech + cyan)

- tokens.css : échelles fait-cyan (#16D5FF) et fait-gray (#545454) en oklch, statuts
- theme.css : variables sémantiques shadcn light/dark mappées sur les primitifs
- demo : page de validation de la direction visuelle

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

.gitignore

@@ -0,0 +1 @@
+node_modules/

README.md

@@ -0,0 +1,28 @@
+# @forgetaboutit/ui
+
+Design system Forget About IT — tokens de marque et thème sémantique pour les applications Tailwind v4 + shadcn/ui (fait-customers, leguidepourve, …).
+
+## Contenu
+
+- `src/tokens.css` — tokens primitifs : échelles `fait-cyan` (cyan logo `#16D5FF`) et `fait-gray` (anthracite logo `#545454`), couleurs de statut. Expose les utilitaires Tailwind (`bg-fait-cyan-400`, `text-fait-gray-200`, …).
+- `src/theme.css` — thème sémantique compatible shadcn/ui (`--background`, `--primary`, `--sidebar`, …) en light et dark. Direction : **dark tech + cyan** (dark = thème de référence).
+
+## Usage
+
+Installer depuis le repo git :
+
+```bash
+npm install git+https://git.fabout.it/hcloez/forgetaboutit-ui.git
+```
+
+Puis dans le `globals.css` de l'app :
+
+```css
+@import "tailwindcss";
+@import "@forgetaboutit/ui/theme.css"; /* importe aussi tokens.css */
+```
+
+Les composants shadcn consomment automatiquement les variables sémantiques. Règles d'usage dans les apps :
+
+- Toujours les tokens sémantiques (`text-foreground`, `bg-card`, `border-border`) — jamais de couleur hardcodée (`text-zinc-400`, `bg-[#16D5FF]`).
+- Les primitifs `fait-*` sont réservés aux cas où le sémantique ne suffit pas (illustrations, dégradés, marketing).

demo/direction-dark-tech.html

@@ -0,0 +1,403 @@
+<title>FAIT Design System — Direction dark tech + cyan</title>
+<style>
+  :root {
+    /* Primitifs — miroir exact de @forgetaboutit/ui tokens.css */
+    --cyan-50: oklch(0.975 0.018 215);
+    --cyan-100: oklch(0.945 0.038 215);
+    --cyan-200: oklch(0.895 0.075 215);
+    --cyan-300: oklch(0.855 0.105 215);
+    --cyan-400: oklch(0.82 0.13 215);
+    --cyan-500: oklch(0.74 0.125 220);
+    --cyan-600: oklch(0.64 0.115 224);
+    --cyan-700: oklch(0.54 0.098 228);
+    --cyan-800: oklch(0.45 0.078 230);
+    --cyan-900: oklch(0.38 0.06 232);
+    --cyan-950: oklch(0.28 0.048 235);
+    --gray-50: oklch(0.985 0.001 230);
+    --gray-100: oklch(0.962 0.002 230);
+    --gray-200: oklch(0.92 0.003 230);
+    --gray-300: oklch(0.86 0.004 230);
+    --gray-400: oklch(0.70 0.005 230);
+    --gray-500: oklch(0.55 0.005 230);
+    --gray-600: oklch(0.445 0.005 230);
+    --gray-700: oklch(0.38 0.005 231);
+    --gray-800: oklch(0.295 0.006 232);
+    --gray-850: oklch(0.255 0.006 233);
+    --gray-900: oklch(0.215 0.006 234);
+    --gray-925: oklch(0.185 0.006 235);
+    --gray-950: oklch(0.155 0.006 236);
+    --success: oklch(0.72 0.17 155);
+    --warning: oklch(0.8 0.16 85);
+    --danger: oklch(0.64 0.2 25);
+
+    /* Sémantique — thème light */
+    --background: oklch(1 0 0);
+    --foreground: var(--gray-900);
+    --card: oklch(1 0 0);
+    --primary: var(--cyan-700);
+    --primary-fg: oklch(0.99 0.005 215);
+    --secondary: var(--gray-100);
+    --secondary-fg: var(--gray-800);
+    --muted: var(--gray-100);
+    --muted-fg: var(--gray-500);
+    --accent: var(--cyan-50);
+    --accent-fg: var(--cyan-800);
+    --border: var(--gray-200);
+    --ring: var(--cyan-500);
+    --sidebar: var(--gray-50);
+    --sidebar-fg: var(--gray-900);
+    --sidebar-active-bg: var(--gray-200);
+    --shadow: 0 1px 2px oklch(0 0 0 / 0.06), 0 4px 16px oklch(0 0 0 / 0.05);
+
+    --font-sans: ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
+    --font-mono: ui-monospace, "Cascadia Code", Consolas, monospace;
+    --radius: 10px;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --background: var(--gray-950);
+      --foreground: var(--gray-100);
+      --card: var(--gray-925);
+      --primary: var(--cyan-400);
+      --primary-fg: var(--gray-950);
+      --secondary: var(--gray-850);
+      --secondary-fg: var(--gray-100);
+      --muted: var(--gray-850);
+      --muted-fg: var(--gray-400);
+      --accent: var(--cyan-950);
+      --accent-fg: var(--cyan-300);
+      --border: var(--gray-800);
+      --ring: var(--cyan-400);
+      --sidebar: var(--gray-925);
+      --sidebar-fg: var(--gray-100);
+      --sidebar-active-bg: var(--gray-800);
+      --shadow: 0 1px 2px oklch(0 0 0 / 0.4), 0 4px 20px oklch(0 0 0 / 0.35);
+    }
+  }
+  :root[data-theme="dark"] {
+    --background: var(--gray-950);
+    --foreground: var(--gray-100);
+    --card: var(--gray-925);
+    --primary: var(--cyan-400);
+    --primary-fg: var(--gray-950);
+    --secondary: var(--gray-850);
+    --secondary-fg: var(--gray-100);
+    --muted: var(--gray-850);
+    --muted-fg: var(--gray-400);
+    --accent: var(--cyan-950);
+    --accent-fg: var(--cyan-300);
+    --border: var(--gray-800);
+    --ring: var(--cyan-400);
+    --sidebar: var(--gray-925);
+    --sidebar-fg: var(--gray-100);
+    --sidebar-active-bg: var(--gray-800);
+    --shadow: 0 1px 2px oklch(0 0 0 / 0.4), 0 4px 20px oklch(0 0 0 / 0.35);
+  }
+  :root[data-theme="light"] {
+    --background: oklch(1 0 0);
+    --foreground: var(--gray-900);
+    --card: oklch(1 0 0);
+    --primary: var(--cyan-700);
+    --primary-fg: oklch(0.99 0.005 215);
+    --secondary: var(--gray-100);
+    --secondary-fg: var(--gray-800);
+    --muted: var(--gray-100);
+    --muted-fg: var(--gray-500);
+    --accent: var(--cyan-50);
+    --accent-fg: var(--cyan-800);
+    --border: var(--gray-200);
+    --ring: var(--cyan-500);
+    --sidebar: var(--gray-50);
+    --sidebar-fg: var(--gray-900);
+    --sidebar-active-bg: var(--gray-200);
+    --shadow: 0 1px 2px oklch(0 0 0 / 0.06), 0 4px 16px oklch(0 0 0 / 0.05);
+  }
+
+  * { box-sizing: border-box; }
+  body {
+    margin: 0;
+    background: var(--background);
+    color: var(--foreground);
+    font-family: var(--font-sans);
+    font-size: 15px;
+    line-height: 1.55;
+    -webkit-font-smoothing: antialiased;
+  }
+  .wrap { max-width: 1100px; margin: 0 auto; padding: 48px 24px 80px; display: flex; flex-direction: column; gap: 56px; }
+
+  /* ---------- Header ---------- */
+  header .eyebrow {
+    font-size: 12px; letter-spacing: 0.09em; text-transform: uppercase;
+    color: var(--accent-fg); font-weight: 600; margin: 0 0 10px;
+    display: flex; align-items: center; gap: 8px;
+  }
+  header .eyebrow::before {
+    content: ""; width: 14px; height: 14px; display: inline-block;
+    background: var(--primary);
+    clip-path: polygon(100% 0, 100% 100%, 0 50%);
+  }
+  header h1 { font-size: 34px; line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 12px; text-wrap: balance; }
+  header p { max-width: 62ch; color: var(--muted-fg); margin: 0; }
+  header strong { color: var(--foreground); font-weight: 600; }
+
+  h2 { font-size: 13px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted-fg); font-weight: 600; margin: 0 0 16px; }
+  section > p.note { color: var(--muted-fg); font-size: 13.5px; max-width: 70ch; margin: 14px 0 0; }
+
+  /* ---------- App frame ---------- */
+  .app {
+    display: grid; grid-template-columns: 210px 1fr;
+    border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
+    box-shadow: var(--shadow); min-width: 0;
+  }
+  @media (max-width: 720px) { .app { grid-template-columns: 1fr; } .app aside { display: none; } }
+
+  .app aside {
+    background: var(--sidebar); color: var(--sidebar-fg);
+    border-right: 1px solid var(--border);
+    padding: 18px 12px; display: flex; flex-direction: column; gap: 2px;
+  }
+  .brand { display: flex; align-items: center; gap: 9px; padding: 4px 10px 16px; font-weight: 700; letter-spacing: -0.01em; font-size: 14.5px; }
+  .brand .mark { width: 16px; height: 16px; background: var(--primary); clip-path: polygon(100% 0, 100% 100%, 0 50%); flex: none; }
+  .brand .it { color: var(--primary); }
+  .nav-item {
+    display: flex; align-items: center; gap: 10px;
+    padding: 7px 10px; border-radius: 8px; font-size: 13.5px;
+    color: var(--muted-fg); cursor: pointer;
+  }
+  .nav-item:hover { color: var(--foreground); background: color-mix(in oklab, var(--sidebar-active-bg) 45%, transparent); }
+  .nav-item.active { background: var(--sidebar-active-bg); color: var(--foreground); font-weight: 500; }
+  .nav-item svg { width: 15px; height: 15px; flex: none; opacity: 0.75; }
+  .nav-item.active svg { color: var(--primary); opacity: 1; }
+
+  .main { background: var(--background); padding: 24px 26px 30px; display: flex; flex-direction: column; gap: 22px; min-width: 0; }
+  .main-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
+  .main-head h3 { margin: 0; font-size: 19px; letter-spacing: -0.015em; }
+  .main-head .sub { color: var(--muted-fg); font-size: 13px; margin-top: 2px; }
+
+  /* KPI */
+  .kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
+  @media (max-width: 900px) { .kpis { grid-template-columns: repeat(2, 1fr); } }
+  .kpi { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
+  .kpi .label { font-size: 12px; color: var(--muted-fg); letter-spacing: 0.04em; text-transform: uppercase; font-weight: 500; }
+  .kpi .value { font-size: 24px; font-weight: 650; letter-spacing: -0.02em; margin-top: 4px; font-variant-numeric: tabular-nums; }
+  .kpi .delta { font-size: 12.5px; margin-top: 2px; color: var(--muted-fg); }
+  .kpi .delta.up { color: var(--success); }
+  .kpi .delta.warn { color: var(--warning); }
+
+  .cols { display: grid; grid-template-columns: 1.6fr 1fr; gap: 12px; align-items: start; }
+  @media (max-width: 900px) { .cols { grid-template-columns: 1fr; } }
+
+  .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); }
+  .card .card-head { padding: 13px 16px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
+  .card .card-head h4 { margin: 0; font-size: 14px; font-weight: 600; }
+  .card .card-head a { font-size: 12.5px; color: var(--accent-fg); text-decoration: none; font-weight: 500; }
+
+  .tbl-scroll { overflow-x: auto; }
+  table { border-collapse: collapse; width: 100%; font-size: 13.5px; min-width: 480px; }
+  thead th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted-fg); font-weight: 500; padding: 10px 16px; border-bottom: 1px solid var(--border); }
+  tbody td { padding: 11px 16px; border-bottom: 1px solid var(--border); }
+  tbody tr:last-child td { border-bottom: 0; }
+  tbody tr:hover { background: color-mix(in oklab, var(--muted) 40%, transparent); }
+  td.ref { font-family: var(--font-mono); font-size: 12.5px; color: var(--muted-fg); }
+  td.num { text-align: right; font-variant-numeric: tabular-nums; }
+
+  .pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; padding: 2.5px 9px; border-radius: 999px; white-space: nowrap; }
+  .pill::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
+  .pill.info { color: var(--accent-fg); background: color-mix(in oklab, var(--accent) 70%, transparent); }
+  .pill.ok { color: var(--success); background: color-mix(in oklab, var(--success) 14%, transparent); }
+  .pill.warn { color: var(--warning); background: color-mix(in oklab, var(--warning) 14%, transparent); }
+  .pill.crit { color: var(--danger); background: color-mix(in oklab, var(--danger) 14%, transparent); }
+
+  .quota { padding: 14px 16px; display: flex; flex-direction: column; gap: 14px; }
+  .quota .row .top { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 6px; }
+  .quota .row .top .who { font-weight: 500; }
+  .quota .row .top .val { color: var(--muted-fg); font-variant-numeric: tabular-nums; }
+  .bar { height: 6px; border-radius: 999px; background: var(--muted); overflow: hidden; }
+  .bar i { display: block; height: 100%; border-radius: 999px; background: var(--primary); }
+  .bar i.warn { background: var(--warning); }
+  .bar i.crit { background: var(--danger); }
+
+  /* ---------- Composants ---------- */
+  .swatch-panel { display: flex; flex-direction: column; gap: 22px; border: 1px solid var(--border); border-radius: 14px; padding: 22px; background: var(--card); box-shadow: var(--shadow); }
+  .row-flex { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
+  .group-label { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted-fg); font-weight: 600; margin-bottom: 8px; }
+
+  .btn { font: inherit; font-size: 13.5px; font-weight: 500; padding: 7px 15px; border-radius: 8px; border: 1px solid transparent; cursor: pointer; }
+  .btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
+  .btn.primary { background: var(--primary); color: var(--primary-fg); }
+  .btn.primary:hover { background: color-mix(in oklab, var(--primary) 88%, var(--foreground)); }
+  .btn.secondary { background: var(--secondary); color: var(--secondary-fg); }
+  .btn.outline { background: transparent; border-color: var(--border); color: var(--foreground); }
+  .btn.ghost { background: transparent; color: var(--muted-fg); }
+  .btn.ghost:hover { color: var(--foreground); background: var(--muted); }
+  .btn.destructive { background: var(--danger); color: white; }
+
+  .input { font: inherit; font-size: 13.5px; padding: 7px 12px; border-radius: 8px; border: 1px solid var(--border); background: transparent; color: var(--foreground); min-width: 220px; }
+  .input::placeholder { color: var(--muted-fg); }
+  .input:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; border-color: transparent; }
+
+  /* ---------- Échelles ---------- */
+  .scales { display: flex; flex-direction: column; gap: 18px; }
+  .scale { display: grid; grid-template-columns: 110px 1fr; gap: 14px; align-items: center; }
+  @media (max-width: 720px) { .scale { grid-template-columns: 1fr; gap: 6px; } }
+  .scale .name { font-family: var(--font-mono); font-size: 12.5px; color: var(--muted-fg); }
+  .chips { display: grid; grid-template-columns: repeat(11, 1fr); gap: 4px; }
+  .chip { height: 40px; border-radius: 6px; border: 1px solid color-mix(in oklab, var(--foreground) 8%, transparent); position: relative; }
+  .chip span { position: absolute; bottom: 3px; left: 0; right: 0; text-align: center; font-size: 9.5px; font-family: var(--font-mono); color: white; opacity: 0.85; }
+  .chip.lt span { color: black; }
+  .status-chips { display: flex; gap: 10px; flex-wrap: wrap; }
+  .status-chips .chip { width: 88px; height: 40px; }
+
+  footer { color: var(--muted-fg); font-size: 13px; border-top: 1px solid var(--border); padding-top: 20px; }
+  footer code { font-family: var(--font-mono); font-size: 12px; background: var(--muted); padding: 1.5px 6px; border-radius: 5px; }
+</style>
+
+<div class="wrap">
+  <header>
+    <p class="eyebrow">@forgetaboutit/ui · proposition de direction</p>
+    <h1>Dark tech + cyan — le design system Forget About IT</h1>
+    <p>Les deux couleurs du logo deviennent le socle du système : l'<strong>anthracite #545454</strong> engendre l'échelle de gris froids qui remplace le zinc, et le <strong>cyan #16D5FF</strong> devient la couleur primaire — réservée aux actions, à la navigation active et aux données mises en avant. Les statuts (succès, alerte, critique) restent sémantiques et ne se confondent jamais avec l'accent. Cette page utilise les tokens réels du package et respecte le thème de ton navigateur — bascule light/dark pour vérifier les deux mondes.</p>
+  </header>
+
+  <section>
+    <h2>Aperçu — admin fait-customers</h2>
+    <div class="app">
+      <aside>
+        <div class="brand"><span class="mark"></span>Forget About&nbsp;<span class="it">IT</span></div>
+        <div class="nav-item active"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="9" rx="1"/><rect x="14" y="3" width="7" height="5" rx="1"/><rect x="14" y="12" width="7" height="9" rx="1"/><rect x="3" y="16" width="7" height="5" rx="1"/></svg>Tableau de bord</div>
+        <div class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/></svg>Clients</div>
+        <div class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/></svg>Tickets</div>
+        <div class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>Temps</div>
+        <div class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 7H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z"/><path d="M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2"/></svg>Devis</div>
+        <div class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="2" width="20" height="8" rx="2"/><rect x="2" y="14" width="20" height="8" rx="2"/><path d="M6 6h.01M6 18h.01"/></svg>Infrastructure</div>
+        <div class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14.7 6.3a5 5 0 0 0-6.9 6.9L3 18v3h3l4.8-4.8a5 5 0 0 0 6.9-6.9l-3 3-2-2z"/></svg>Maintenance</div>
+        <div class="nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 3v18h18"/><path d="M7 13l3-3 4 4 5-6"/></svg>Rapports</div>
+      </aside>
+      <div class="main">
+        <div class="main-head">
+          <div>
+            <h3>Tableau de bord</h3>
+            <div class="sub">Lundi 6 juillet 2026 — tout est opérationnel</div>
+          </div>
+          <button class="btn primary">Nouvelle intervention</button>
+        </div>
+        <div class="kpis">
+          <div class="kpi"><div class="label">Clients actifs</div><div class="value">12</div><div class="delta up">+1 ce mois</div></div>
+          <div class="kpi"><div class="label">Tickets ouverts</div><div class="value">4</div><div class="delta warn">dont 1 critique</div></div>
+          <div class="kpi"><div class="label">Heures du mois</div><div class="value">37 h 30</div><div class="delta">dont 9 h facturables</div></div>
+          <div class="kpi"><div class="label">MRR</div><div class="value">4 250 €</div><div class="delta up">ARR 51 000 €</div></div>
+        </div>
+        <div class="cols">
+          <div class="card">
+            <div class="card-head"><h4>Tickets récents</h4><a href="#">Tout voir</a></div>
+            <div class="tbl-scroll">
+              <table>
+                <thead><tr><th>Réf.</th><th>Client</th><th>Objet</th><th>Statut</th><th style="text-align:right">SLA</th></tr></thead>
+                <tbody>
+                  <tr><td class="ref">#A4F2C1</td><td>Nextaura</td><td>VPN site-à-site instable</td><td><span class="pill crit">Critique</span></td><td class="num">1 h 12</td></tr>
+                  <tr><td class="ref">#B8E304</td><td>Studio Malt</td><td>Renouvellement certificat</td><td><span class="pill info">En cours</span></td><td class="num">6 h 40</td></tr>
+                  <tr><td class="ref">#C1D977</td><td>Alterion</td><td>Quota boîte mail dépassé</td><td><span class="pill warn">Attente client</span></td><td class="num">—</td></tr>
+                  <tr><td class="ref">#D5A016</td><td>Nextaura</td><td>Migration serveur de fichiers</td><td><span class="pill ok">Résolu</span></td><td class="num">—</td></tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+          <div class="card">
+            <div class="card-head"><h4>Forfaits — juillet</h4><a href="#">Détails</a></div>
+            <div class="quota">
+              <div class="row"><div class="top"><span class="who">Nextaura</span><span class="val">7 h 10 / 10 h</span></div><div class="bar"><i style="width:71%"></i></div></div>
+              <div class="row"><div class="top"><span class="who">Studio Malt</span><span class="val">4 h 45 / 5 h</span></div><div class="bar"><i class="warn" style="width:95%"></i></div></div>
+              <div class="row"><div class="top"><span class="who">Alterion</span><span class="val">8 h 20 / 8 h</span></div><div class="bar"><i class="crit" style="width:100%"></i></div></div>
+              <div class="row"><div class="top"><span class="who">Kervadec &amp; Fils</span><span class="val">1 h 05 / 4 h</span></div><div class="bar"><i style="width:27%"></i></div></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <p class="note">Le cyan n'apparaît que là où l'œil doit aller : l'action principale, l'entrée de navigation active, le lien. Tout le reste tient sur les gris anthracite — c'est ce contraste de rareté qui fait la signature.</p>
+  </section>
+
+  <section>
+    <h2>Composants</h2>
+    <div class="swatch-panel">
+      <div>
+        <div class="group-label">Boutons</div>
+        <div class="row-flex">
+          <button class="btn primary">Créer un devis</button>
+          <button class="btn secondary">Exporter</button>
+          <button class="btn outline">Filtrer</button>
+          <button class="btn ghost">Annuler</button>
+          <button class="btn destructive">Supprimer</button>
+        </div>
+      </div>
+      <div>
+        <div class="group-label">Statuts</div>
+        <div class="row-flex">
+          <span class="pill info">En cours</span>
+          <span class="pill ok">Résolu</span>
+          <span class="pill warn">Attente client</span>
+          <span class="pill crit">Critique</span>
+        </div>
+      </div>
+      <div>
+        <div class="group-label">Champs</div>
+        <div class="row-flex">
+          <input class="input" placeholder="Rechercher un client…">
+          <input class="input" value="contact@nextaura.fr">
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <section>
+    <h2>Tokens — échelles de marque</h2>
+    <div class="scales">
+      <div class="scale">
+        <div class="name">fait-cyan</div>
+        <div class="chips">
+          <div class="chip lt" style="background:var(--cyan-50)"><span>50</span></div>
+          <div class="chip lt" style="background:var(--cyan-100)"><span>100</span></div>
+          <div class="chip lt" style="background:var(--cyan-200)"><span>200</span></div>
+          <div class="chip lt" style="background:var(--cyan-300)"><span>300</span></div>
+          <div class="chip lt" style="background:var(--cyan-400)"><span>400</span></div>
+          <div class="chip" style="background:var(--cyan-500)"><span>500</span></div>
+          <div class="chip" style="background:var(--cyan-600)"><span>600</span></div>
+          <div class="chip" style="background:var(--cyan-700)"><span>700</span></div>
+          <div class="chip" style="background:var(--cyan-800)"><span>800</span></div>
+          <div class="chip" style="background:var(--cyan-900)"><span>900</span></div>
+          <div class="chip" style="background:var(--cyan-950)"><span>950</span></div>
+        </div>
+      </div>
+      <div class="scale">
+        <div class="name">fait-gray</div>
+        <div class="chips">
+          <div class="chip lt" style="background:var(--gray-50)"><span>50</span></div>
+          <div class="chip lt" style="background:var(--gray-100)"><span>100</span></div>
+          <div class="chip lt" style="background:var(--gray-200)"><span>200</span></div>
+          <div class="chip lt" style="background:var(--gray-300)"><span>300</span></div>
+          <div class="chip" style="background:var(--gray-400)"><span>400</span></div>
+          <div class="chip" style="background:var(--gray-500)"><span>500</span></div>
+          <div class="chip" style="background:var(--gray-600)"><span>600</span></div>
+          <div class="chip" style="background:var(--gray-700)"><span>700</span></div>
+          <div class="chip" style="background:var(--gray-800)"><span>800</span></div>
+          <div class="chip" style="background:var(--gray-900)"><span>900</span></div>
+          <div class="chip" style="background:var(--gray-950)"><span>950</span></div>
+        </div>
+      </div>
+      <div class="scale">
+        <div class="name">statuts</div>
+        <div class="status-chips">
+          <div class="chip" style="background:var(--success)"><span>success</span></div>
+          <div class="chip" style="background:var(--warning)"><span>warning</span></div>
+          <div class="chip" style="background:var(--danger)"><span>danger</span></div>
+        </div>
+      </div>
+    </div>
+    <p class="note">Le 400 du cyan est le #16D5FF exact du logo ; le 600 du gris est le #545454 exact. Les applications n'utilisent jamais ces primitifs directement — elles passent par les tokens sémantiques (<em>primary</em>, <em>background</em>, <em>muted</em>…) définis pour les deux thèmes.</p>
+  </section>
+
+  <footer>
+    Consommation : <code>npm install git+https://git.fabout.it/hcloez/forgetaboutit-ui.git</code> puis <code>@import "@forgetaboutit/ui/theme.css"</code> dans le globals.css — les composants shadcn héritent de tout, sans modification.
+  </footer>
+</div>

package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@forgetaboutit/ui",
+  "version": "0.1.0",
+  "description": "Design system Forget About IT — tokens et thème Tailwind v4 / shadcn",
+  "license": "UNLICENSED",
+  "repository": {
+    "type": "git",
+    "url": "https://git.fabout.it/hcloez/forgetaboutit-ui.git"
+  },
+  "exports": {
+    "./tokens.css": "./src/tokens.css",
+    "./theme.css": "./src/theme.css"
+  },
+  "files": [
+    "src"
+  ],
+  "peerDependencies": {
+    "tailwindcss": "^4.0.0"
+  }
+}

src/theme.css

@@ -0,0 +1,95 @@
+/*
+ * @forgetaboutit/ui — thème sémantique (compatible shadcn/ui)
+ *
+ * Mappe les tokens primitifs (tokens.css) sur les variables sémantiques
+ * shadcn : --background, --foreground, --primary, etc.
+ * Direction : "dark tech + cyan" — le dark est le thème de référence,
+ * le light reste soigné pour les pages publiques et emails.
+ *
+ * Usage dans une app Tailwind v4 :
+ *   @import "tailwindcss";
+ *   @import "@forgetaboutit/ui/tokens.css";
+ *   @import "@forgetaboutit/ui/theme.css";
+ */
+
+@import "./tokens.css";
+
+:root {
+  --radius: 0.625rem;
+
+  --background: oklch(1 0 0);
+  --foreground: var(--color-fait-gray-900);
+  --card: oklch(1 0 0);
+  --card-foreground: var(--color-fait-gray-900);
+  --popover: oklch(1 0 0);
+  --popover-foreground: var(--color-fait-gray-900);
+
+  --primary: var(--color-fait-cyan-700);
+  --primary-foreground: oklch(0.99 0.005 215);
+  --secondary: var(--color-fait-gray-100);
+  --secondary-foreground: var(--color-fait-gray-800);
+  --muted: var(--color-fait-gray-100);
+  --muted-foreground: var(--color-fait-gray-500);
+  --accent: var(--color-fait-cyan-50);
+  --accent-foreground: var(--color-fait-cyan-800);
+
+  --destructive: var(--color-fait-danger);
+  --destructive-foreground: oklch(0.99 0 0);
+  --border: var(--color-fait-gray-200);
+  --input: var(--color-fait-gray-200);
+  --ring: var(--color-fait-cyan-500);
+
+  --chart-1: var(--color-fait-cyan-500);
+  --chart-2: var(--color-fait-cyan-700);
+  --chart-3: var(--color-fait-gray-500);
+  --chart-4: var(--color-fait-success);
+  --chart-5: var(--color-fait-warning);
+
+  --sidebar: var(--color-fait-gray-50);
+  --sidebar-foreground: var(--color-fait-gray-900);
+  --sidebar-primary: var(--color-fait-cyan-700);
+  --sidebar-primary-foreground: oklch(0.99 0.005 215);
+  --sidebar-accent: var(--color-fait-gray-200);
+  --sidebar-accent-foreground: var(--color-fait-gray-900);
+  --sidebar-border: var(--color-fait-gray-200);
+  --sidebar-ring: var(--color-fait-cyan-500);
+}
+
+.dark {
+  --background: var(--color-fait-gray-950);
+  --foreground: var(--color-fait-gray-100);
+  --card: var(--color-fait-gray-925);
+  --card-foreground: var(--color-fait-gray-100);
+  --popover: var(--color-fait-gray-925);
+  --popover-foreground: var(--color-fait-gray-100);
+
+  --primary: var(--color-fait-cyan-400);
+  --primary-foreground: var(--color-fait-gray-950);
+  --secondary: var(--color-fait-gray-850);
+  --secondary-foreground: var(--color-fait-gray-100);
+  --muted: var(--color-fait-gray-850);
+  --muted-foreground: var(--color-fait-gray-400);
+  --accent: var(--color-fait-cyan-950);
+  --accent-foreground: var(--color-fait-cyan-300);
+
+  --destructive: var(--color-fait-danger);
+  --destructive-foreground: oklch(0.99 0 0);
+  --border: var(--color-fait-gray-800);
+  --input: var(--color-fait-gray-800);
+  --ring: var(--color-fait-cyan-400);
+
+  --chart-1: var(--color-fait-cyan-400);
+  --chart-2: var(--color-fait-cyan-600);
+  --chart-3: var(--color-fait-gray-400);
+  --chart-4: var(--color-fait-success);
+  --chart-5: var(--color-fait-warning);
+
+  --sidebar: var(--color-fait-gray-925);
+  --sidebar-foreground: var(--color-fait-gray-100);
+  --sidebar-primary: var(--color-fait-cyan-400);
+  --sidebar-primary-foreground: var(--color-fait-gray-950);
+  --sidebar-accent: var(--color-fait-gray-800);
+  --sidebar-accent-foreground: oklch(1 0 0);
+  --sidebar-border: var(--color-fait-gray-800);
+  --sidebar-ring: var(--color-fait-cyan-400);
+}

src/tokens.css

@@ -0,0 +1,46 @@
+/*
+ * @forgetaboutit/ui — tokens primitifs de la marque
+ *
+ * Couleurs extraites du logo Forget About IT :
+ *   cyan  #16D5FF  → échelle fait-cyan (teinte oklch ~215)
+ *   gris  #545454  → échelle fait-gray (neutre légèrement froid, ~fait-gray-600)
+ *
+ * Expose les utilitaires Tailwind v4 : bg-fait-cyan-400, text-fait-gray-200, etc.
+ * Les applications consomment plutôt theme.css (tokens sémantiques).
+ */
+
+@theme {
+  /* --- Cyan de marque --- */
+  --color-fait-cyan-50: oklch(0.975 0.018 215);
+  --color-fait-cyan-100: oklch(0.945 0.038 215);
+  --color-fait-cyan-200: oklch(0.895 0.075 215);
+  --color-fait-cyan-300: oklch(0.855 0.105 215);
+  --color-fait-cyan-400: oklch(0.82 0.13 215); /* #16D5FF — cyan logo */
+  --color-fait-cyan-500: oklch(0.74 0.125 220);
+  --color-fait-cyan-600: oklch(0.64 0.115 224);
+  --color-fait-cyan-700: oklch(0.54 0.098 228);
+  --color-fait-cyan-800: oklch(0.45 0.078 230);
+  --color-fait-cyan-900: oklch(0.38 0.06 232);
+  --color-fait-cyan-950: oklch(0.28 0.048 235);
+
+  /* --- Gris anthracite de marque (neutre froid) --- */
+  --color-fait-gray-50: oklch(0.985 0.001 230);
+  --color-fait-gray-100: oklch(0.962 0.002 230);
+  --color-fait-gray-200: oklch(0.92 0.003 230);
+  --color-fait-gray-300: oklch(0.86 0.004 230);
+  --color-fait-gray-400: oklch(0.70 0.005 230);
+  --color-fait-gray-500: oklch(0.55 0.005 230);
+  --color-fait-gray-600: oklch(0.445 0.005 230); /* #545454 — anthracite logo */
+  --color-fait-gray-700: oklch(0.38 0.005 231);
+  --color-fait-gray-800: oklch(0.295 0.006 232);
+  --color-fait-gray-850: oklch(0.255 0.006 233);
+  --color-fait-gray-900: oklch(0.215 0.006 234);
+  --color-fait-gray-925: oklch(0.185 0.006 235);
+  --color-fait-gray-950: oklch(0.155 0.006 236);
+
+  /* --- Statuts --- */
+  --color-fait-success: oklch(0.72 0.17 155);
+  --color-fait-warning: oklch(0.8 0.16 85);
+  --color-fait-danger: oklch(0.64 0.2 25);
+  --color-fait-info: oklch(0.74 0.125 220);
+}