fix docker compose

2026-02-25 21:06:53 +01:00 · 2026-02-25 21:06:53 +01:00 · 4880d1dd87
commit 4880d1dd87
parent 6b1ba49922
11 changed files with 1788 additions and 25 deletions
--- a/CLAUDE.md
+++ b/CLAUDE.md
@ -64,11 +64,15 @@ internal/            # All Go modules (see Architecture above for full list)
 gen/                 # Generated Go gRPC stubs (buf generate → never edit manually)
 services/pii/        # Python FastAPI + gRPC PII detection service
  gen/pii/v1/        # Generated Python proto stubs (run `make proto` first)
+  tests/             # pytest unit tests (test_regex.py, test_pipeline.py, test_pseudo.py)
 proto/pii/v1/        # gRPC .proto definitions
 migrations/          # golang-migrate SQL files (up/down pairs)
  clickhouse/        # ClickHouse DDL applied at startup via ApplyDDL()
 web/                 # React frontend (Vite, src/pages, src/components, src/api)
-deploy/              # Helm charts for Kubernetes
+test/                # Integration tests (test/integration/, //go:build integration) + k6 load tests (test/k6/)
+deploy/              # Helm, Kubernetes manifests, Terraform (EKS), Prometheus/Grafana, alertmanager
+  clickhouse/        # ClickHouse config overrides for Docker (e.g. listen-ipv4.xml — forces IPv4)
+docker-compose.yml   # Full local dev stack (9 services)
 config.yaml          # Local dev config (overridden by VEYLANT_* env vars)
 ```

@ -114,7 +118,7 @@ go test -run TestName ./internal/module/

 **Run a single Python test:**
 ```bash
-pytest services/pii/test_file.py::test_function
+pytest services/pii/tests/test_file.py::test_function
 ```

 **Proto prerequisite:** Run `make proto` before starting the PII service if `gen/` or `services/pii/gen/` is missing — the service will start but reject all gRPC requests otherwise.
@ -143,6 +147,8 @@ In production (`server.env=production`), any of the above causes a fatal startup

 **Immutable audit logs**: ClickHouse is append-only — no DELETE operations. Retention via TTL policies only. ClickHouse DDL is applied idempotently at startup from `migrations/clickhouse/`.

+**Proxy Docker image**: Uses `distroless/static` — no shell, no `wget`. `CMD-SHELL` health checks in docker-compose cannot work for the proxy container; dependents use `condition: service_started` instead.
+
 **Routing rule evaluation**: Rules are sorted ascending by `priority` (lower = evaluated first). All conditions within a rule are AND-joined. An empty `Conditions` slice is a catch-all. First match wins. Supported condition fields: `user.role`, `user.department`, `request.sensitivity`, `request.model`, `request.use_case`, `request.token_estimate`. Operators: `eq`, `neq`, `in`, `nin`, `gte`, `lte`, `contains`, `matches`.

 ## Conventions
@ -161,7 +167,7 @@ In production (`server.env=production`), any of the above causes a fatal startup

 **OpenAPI docs**: Generated from swaggo annotations — never write API docs by hand.

-**Testing split**: 70% unit (`testing` + `testify` / `pytest`) · 20% integration (`testcontainers` for PG/ClickHouse/Redis) · 10% E2E (Playwright for UI). Tests are written in parallel with each module, not deferred.
+**Testing split**: 70% unit (`testing` + `testify` / `pytest`) · 20% integration (`testcontainers` for PG/ClickHouse/Redis, lives in `test/integration/`, requires `//go:build integration` tag) · 10% E2E (Playwright for UI). Tests are written in parallel with each module, not deferred.

 **CI coverage thresholds**: Go internal packages must maintain ≥80% coverage; Python PII service ≥75%. NER tests (`test_ner.py`) are excluded from CI because `fr_core_news_lg` (~600MB) is only available in the Docker build.

--- a/cmd/proxy/main.go
+++ b/cmd/proxy/main.go
@ -283,6 +283,7 @@ func main() {
 		r.Use(metrics.Middleware("openai"))
 	}

+	r.Get("/", health.LandingHandler)
 	r.Get("/healthz", health.Handler)

 	// OpenAPI documentation (E11-02).
--- a/deploy/clickhouse/listen-ipv4.xml
+++ b/deploy/clickhouse/listen-ipv4.xml
@ -0,0 +1,4 @@
+<clickhouse>
+    <!-- Force IPv4 only — IPv6 is unavailable in this Docker environment -->
+    <listen_host>0.0.0.0</listen_host>
+</clickhouse>
--- a/docker-compose.yml
+++ b/docker-compose.yml
@ -51,8 +51,9 @@ services:
      - "9000:9000"   # Native TCP (used by Go driver)
    volumes:
      - clickhouse_data:/var/lib/clickhouse
+      - ./deploy/clickhouse/listen-ipv4.xml:/etc/clickhouse-server/config.d/listen-ipv4.xml:ro
    healthcheck:
-      test: ["CMD-SHELL", "wget --no-verbose --tries=1 --spider http://localhost:8123/ping || exit 1"]
+      test: ["CMD-SHELL", "wget --no-verbose --tries=1 --spider http://127.0.0.1:8123/ping || exit 1"]
      interval: 5s
      timeout: 5s
      retries: 20
@ -133,12 +134,8 @@ services:
        condition: service_healthy
      clickhouse:
        condition: service_healthy
-    healthcheck:
-      test: ["CMD-SHELL", "wget --no-verbose --tries=1 --spider http://localhost:8090/healthz || exit 1"]
-      interval: 5s
-      timeout: 3s
-      retries: 10
-      start_period: 5s
+    # distroless/static has no shell or wget, so Docker health checks via CMD-SHELL
+    # cannot run. The proxy exposes /healthz at :8090 — healthy when it starts.

  # ─────────────────────────────────────────────
  # PII detection service — Python (Sprint 3: full pipeline)
@ -190,7 +187,7 @@ services:
      - "--web.console.templates=/etc/prometheus/consoles"
    depends_on:
      proxy:
-        condition: service_healthy
+        condition: service_started

  # ─────────────────────────────────────────────
  # Grafana — metrics visualisation
@ -228,7 +225,7 @@ services:
      VITE_KEYCLOAK_URL: "http://localhost:8080/realms/veylant"
    depends_on:
      proxy:
-        condition: service_healthy
+        condition: service_started

 volumes:
  postgres_data:
--- a/internal/health/landing.go
+++ b/internal/health/landing.go
@ -0,0 +1,991 @@
+package health
+
+import "net/http"
+
+// LandingHandler serves the Veylant IA marketing landing page at GET /.
+func LandingHandler(w http.ResponseWriter, r *http.Request) {
+	w.Header().Set("Content-Type", "text/html; charset=utf-8")
+	w.Header().Set("Content-Security-Policy",
+		"default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; connect-src 'self'")
+	w.WriteHeader(http.StatusOK)
+	_, _ = w.Write([]byte(landingHTML))
+}
+
+const landingHTML = `<!DOCTYPE html>
+<html lang="fr">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <title>Veylant IA — Gouvernance IA pour l'entreprise</title>
+  <meta name="description" content="Interceptez, anonymisez et gouvernez tous vos echanges avec les LLMs. RGPD natif, EU AI Act ready, zero Shadow AI.">
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+    :root {
+      --brand:        #4f46e5;
+      --brand-dark:   #3730a3;
+      --brand-light:  #818cf8;
+      --accent:       #06b6d4;
+      --bg:           #0a0f1e;
+      --bg-card:      rgba(255,255,255,0.04);
+      --bg-card-hover:rgba(255,255,255,0.07);
+      --border:       rgba(255,255,255,0.08);
+      --text:         #f1f5f9;
+      --muted:        #94a3b8;
+      --dim:          #64748b;
+      --green:        #10b981;
+      --red:          #ef4444;
+      --r:            12px;
+      --rl:           20px;
+    }
+
+    html { scroll-behavior: smooth; }
+
+    body {
+      font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
+      background: var(--bg);
+      color: var(--text);
+      min-height: 100vh;
+      overflow-x: hidden;
+    }
+
+    /* ── BACKGROUND ── */
+    body::before {
+      content: '';
+      position: fixed;
+      inset: 0;
+      background:
+        radial-gradient(ellipse at 15% 50%, rgba(79,70,229,.14) 0%, transparent 55%),
+        radial-gradient(ellipse at 85% 15%, rgba(6,182,212,.09) 0%, transparent 50%);
+      pointer-events: none;
+      z-index: 0;
+    }
+
+    /* ── NAV ── */
+    nav {
+      position: sticky;
+      top: 0;
+      z-index: 100;
+      backdrop-filter: blur(14px);
+      -webkit-backdrop-filter: blur(14px);
+      background: rgba(10,15,30,.85);
+      border-bottom: 1px solid var(--border);
+    }
+    .nav-inner {
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 0 1.5rem;
+      height: 64px;
+      display: flex;
+      align-items: center;
+      gap: 2rem;
+    }
+    .logo {
+      font-size: 1.25rem;
+      font-weight: 800;
+      color: var(--text);
+      text-decoration: none;
+      letter-spacing: -.5px;
+      flex-shrink: 0;
+    }
+    .logo span { color: var(--brand-light); }
+    .nav-links {
+      display: flex;
+      gap: 1.75rem;
+      list-style: none;
+      margin-left: auto;
+    }
+    .nav-links a {
+      color: var(--muted);
+      text-decoration: none;
+      font-size: .875rem;
+      font-weight: 500;
+      transition: color .2s;
+    }
+    .nav-links a:hover { color: var(--text); }
+    .nav-cta { margin-left: 1rem; }
+
+    /* ── BUTTONS ── */
+    .btn {
+      display: inline-flex;
+      align-items: center;
+      gap: .45rem;
+      padding: .6rem 1.25rem;
+      border-radius: 8px;
+      font-size: .875rem;
+      font-weight: 600;
+      text-decoration: none;
+      cursor: pointer;
+      border: none;
+      transition: all .2s;
+      white-space: nowrap;
+    }
+    .btn-primary { background: var(--brand); color: #fff; }
+    .btn-primary:hover {
+      background: #4338ca;
+      transform: translateY(-1px);
+      box-shadow: 0 8px 28px rgba(79,70,229,.45);
+    }
+    .btn-outline {
+      background: transparent;
+      color: var(--text);
+      border: 1px solid var(--border);
+    }
+    .btn-outline:hover {
+      background: var(--bg-card);
+      border-color: rgba(255,255,255,.2);
+    }
+    .btn-lg { padding: .85rem 2rem; font-size: 1rem; border-radius: 10px; }
+
+    /* ── LAYOUT ── */
+    section { padding: 6rem 1.5rem; position: relative; z-index: 1; }
+    .container { max-width: 1200px; margin: 0 auto; }
+
+    .label {
+      display: inline-flex;
+      align-items: center;
+      gap: .4rem;
+      font-size: .75rem;
+      font-weight: 700;
+      text-transform: uppercase;
+      letter-spacing: .1em;
+      color: var(--brand-light);
+      background: rgba(79,70,229,.15);
+      border: 1px solid rgba(79,70,229,.3);
+      padding: .3rem .85rem;
+      border-radius: 100px;
+      margin-bottom: 1.5rem;
+    }
+
+    h1, h2, h3 { line-height: 1.2; letter-spacing: -.025em; }
+    h1 { font-size: clamp(2.4rem,5vw,3.8rem); font-weight: 800; }
+    h2 { font-size: clamp(1.75rem,3.5vw,2.6rem); font-weight: 700; }
+    h3 { font-size: 1.05rem; font-weight: 600; }
+
+    .gradient {
+      background: linear-gradient(135deg, #a5b4fc 0%, #06b6d4 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+    }
+    .muted { color: var(--muted); }
+
+    /* ── HERO ── */
+    .hero {
+      padding: 7rem 1.5rem 5rem;
+      position: relative;
+      z-index: 1;
+    }
+    .hero-grid {
+      max-width: 1200px;
+      margin: 0 auto;
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 4rem;
+      align-items: center;
+    }
+    .hero-content p {
+      font-size: 1.1rem;
+      color: var(--muted);
+      line-height: 1.75;
+      margin: 1.25rem 0 2rem;
+      max-width: 500px;
+    }
+    .hero-actions { display: flex; gap: .875rem; flex-wrap: wrap; }
+
+    /* Stats row */
+    .stats {
+      display: grid;
+      grid-template-columns: repeat(4,1fr);
+      gap: 1rem;
+      margin-top: 3.5rem;
+      padding-top: 2.5rem;
+      border-top: 1px solid var(--border);
+    }
+    .stat { text-align: center; }
+    .stat-val {
+      font-size: 1.7rem;
+      font-weight: 800;
+      letter-spacing: -.04em;
+    }
+    .stat-lbl { font-size: .78rem; color: var(--muted); margin-top: .2rem; }
+
+    /* Terminal */
+    .terminal {
+      background: #0d1117;
+      border: 1px solid rgba(255,255,255,.1);
+      border-radius: var(--rl);
+      overflow: hidden;
+      box-shadow: 0 30px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04);
+    }
+    .term-header {
+      background: #161b22;
+      padding: .7rem 1rem;
+      display: flex;
+      align-items: center;
+      gap: .4rem;
+      border-bottom: 1px solid rgba(255,255,255,.07);
+    }
+    .dot { width:12px; height:12px; border-radius:50%; }
+    .dr { background:#ff5f57; }
+    .dy { background:#ffbd2e; }
+    .dg { background:#28c840; }
+    .term-title {
+      margin-left: .5rem;
+      font-size: .72rem;
+      color: var(--dim);
+      font-family: 'SF Mono','Fira Code',monospace;
+    }
+    .term-body {
+      padding: 1.5rem;
+      font-family: 'SF Mono','Fira Code','Cascadia Code',monospace;
+      font-size: .76rem;
+      line-height: 1.9;
+    }
+    .tc  { color:#6e7681; }
+    .tk  { color:#79c0ff; }
+    .tv  { color:#a5d6ff; }
+    .tb  { color:#818cf8; }
+    .tg  { color:#56d364; }
+    .ty  { color:#e3b341; }
+    .tre { color:#f85149; }
+    .td  { color:#484f58; }
+    .ta  { color:#fbbf24; background:rgba(251,191,36,.1); padding:0 3px; border-radius:3px; }
+
+    /* ── TRUST BAR ── */
+    .trust {
+      position: relative;
+      z-index: 1;
+      padding: 1.75rem 1.5rem;
+      border-top: 1px solid var(--border);
+      border-bottom: 1px solid var(--border);
+      background: rgba(255,255,255,.015);
+    }
+    .trust-inner {
+      max-width: 1200px;
+      margin: 0 auto;
+      display: flex;
+      align-items: center;
+      gap: 2.5rem;
+      flex-wrap: wrap;
+      justify-content: center;
+    }
+    .trust-lbl {
+      font-size: .72rem;
+      color: var(--dim);
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: .08em;
+    }
+    .providers { display:flex; gap:2rem; align-items:center; flex-wrap:wrap; }
+    .pvd {
+      display: flex;
+      align-items: center;
+      gap: .35rem;
+      color: var(--dim);
+      font-size: .82rem;
+      font-weight: 600;
+      opacity: .55;
+      transition: opacity .2s;
+    }
+    .pvd:hover { opacity: 1; }
+
+    /* ── PROBLEMS ── */
+    .pb-grid {
+      display: grid;
+      grid-template-columns: repeat(3,1fr);
+      gap: 1.5rem;
+      margin-top: 3rem;
+    }
+    .pb-card {
+      background: rgba(239,68,68,.05);
+      border: 1px solid rgba(239,68,68,.15);
+      border-radius: var(--rl);
+      padding: 2rem;
+      transition: border-color .3s;
+    }
+    .pb-card:hover { border-color: rgba(239,68,68,.35); }
+    .pb-icon {
+      width: 46px; height: 46px;
+      background: rgba(239,68,68,.1);
+      border-radius: 11px;
+      display: flex; align-items: center; justify-content: center;
+      font-size: 1.4rem;
+      margin-bottom: 1.25rem;
+    }
+    .pb-card h3 { margin-bottom: .5rem; }
+    .pb-card p { color: var(--muted); font-size: .875rem; line-height: 1.65; }
+
+    /* ── FEATURES ── */
+    .ft-grid {
+      display: grid;
+      grid-template-columns: repeat(3,1fr);
+      gap: 1.5rem;
+      margin-top: 3rem;
+    }
+    .ft-card {
+      background: var(--bg-card);
+      border: 1px solid var(--border);
+      border-radius: var(--rl);
+      padding: 2rem;
+      transition: all .3s;
+      position: relative;
+      overflow: hidden;
+    }
+    .ft-card::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border-radius: var(--rl);
+      background: linear-gradient(135deg, rgba(79,70,229,.08), transparent);
+      opacity: 0;
+      transition: opacity .3s;
+    }
+    .ft-card:hover {
+      background: var(--bg-card-hover);
+      border-color: rgba(129,140,248,.3);
+      transform: translateY(-3px);
+      box-shadow: 0 12px 32px rgba(0,0,0,.3);
+    }
+    .ft-card:hover::after { opacity: 1; }
+    .ft-icon {
+      width: 46px; height: 46px;
+      background: rgba(79,70,229,.15);
+      border-radius: 11px;
+      display: flex; align-items: center; justify-content: center;
+      font-size: 1.3rem;
+      margin-bottom: 1.25rem;
+      position: relative;
+      z-index: 1;
+    }
+    .ft-card h3 { margin-bottom: .45rem; position: relative; z-index: 1; }
+    .ft-card p  { color: var(--muted); font-size: .875rem; line-height: 1.65; position: relative; z-index: 1; }
+    .ft-badge {
+      display: inline-block;
+      margin-top: .9rem;
+      font-size: .72rem;
+      font-weight: 700;
+      color: var(--brand-light);
+      background: rgba(79,70,229,.15);
+      padding: .2rem .65rem;
+      border-radius: 100px;
+      position: relative;
+      z-index: 1;
+    }
+
+    /* ── HOW IT WORKS ── */
+    .how-bg {
+      background: rgba(79,70,229,.03);
+      border-top: 1px solid var(--border);
+      border-bottom: 1px solid var(--border);
+    }
+    .steps {
+      display: grid;
+      grid-template-columns: repeat(3,1fr);
+      gap: 2rem;
+      margin-top: 4rem;
+      position: relative;
+    }
+    .steps::before {
+      content: '';
+      position: absolute;
+      top: 27px;
+      left: calc(16.66% + 27px);
+      right: calc(16.66% + 27px);
+      height: 2px;
+      background: linear-gradient(90deg, var(--brand), var(--accent));
+      opacity: .25;
+    }
+    .step { text-align: center; }
+    .step-num {
+      width: 54px; height: 54px;
+      background: linear-gradient(135deg, var(--brand), var(--accent));
+      border-radius: 50%;
+      display: flex; align-items: center; justify-content: center;
+      font-size: 1.2rem;
+      font-weight: 800;
+      color: #fff;
+      margin: 0 auto 1.5rem;
+      position: relative;
+      z-index: 1;
+      box-shadow: 0 0 0 6px rgba(79,70,229,.15);
+    }
+    .step h3 { margin-bottom: .45rem; }
+    .step p  { color: var(--muted); font-size: .875rem; line-height: 1.65; }
+    .step-code {
+      margin-top: 1rem;
+      background: #0d1117;
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      padding: .75rem 1rem;
+      font-family: 'SF Mono','Fira Code',monospace;
+      font-size: .7rem;
+      color: var(--muted);
+      text-align: left;
+      line-height: 1.75;
+    }
+    .step-code .tg { color: #56d364; }
+    .step-code .tb { color: #818cf8; }
+    .step-code .tc { color: #6e7681; }
+
+    /* ── SECURITY ── */
+    .sec-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 3rem;
+      align-items: center;
+      margin-top: 3rem;
+    }
+    .checks { display: flex; flex-direction: column; gap: 1rem; }
+    .chk {
+      display: flex;
+      align-items: flex-start;
+      gap: 1rem;
+      padding: 1.25rem;
+      background: var(--bg-card);
+      border: 1px solid var(--border);
+      border-radius: var(--r);
+      transition: border-color .3s;
+    }
+    .chk:hover { border-color: rgba(16,185,129,.25); }
+    .chk-ico {
+      width: 36px; height: 36px;
+      background: rgba(16,185,129,.1);
+      border-radius: 8px;
+      display: flex; align-items: center; justify-content: center;
+      flex-shrink: 0;
+      font-size: .95rem;
+    }
+    .chk h4 { font-size: .875rem; margin-bottom: .2rem; }
+    .chk p  { font-size: .8rem; color: var(--muted); line-height: 1.55; }
+
+    .comp-grid {
+      display: grid;
+      grid-template-columns: repeat(2,1fr);
+      gap: 1rem;
+    }
+    .comp-badge {
+      background: var(--bg-card);
+      border: 1px solid var(--border);
+      border-radius: var(--rl);
+      padding: 1.5rem;
+      text-align: center;
+      transition: all .3s;
+    }
+    .comp-badge:hover {
+      background: var(--bg-card-hover);
+      border-color: rgba(129,140,248,.25);
+      transform: translateY(-2px);
+    }
+    .comp-ico { font-size: 1.9rem; margin-bottom: .75rem; }
+    .comp-badge h4 { font-size: .875rem; margin-bottom: .2rem; }
+    .comp-badge p  { font-size: .75rem; color: var(--muted); }
+
+    /* ── PERSONAS ── */
+    .prs-grid {
+      display: grid;
+      grid-template-columns: repeat(3,1fr);
+      gap: 1.5rem;
+      margin-top: 3rem;
+    }
+    .prs-card {
+      background: var(--bg-card);
+      border: 1px solid var(--border);
+      border-radius: var(--rl);
+      padding: 2rem;
+      transition: all .3s;
+    }
+    .prs-card:hover {
+      background: var(--bg-card-hover);
+      border-color: rgba(129,140,248,.25);
+      transform: translateY(-3px);
+    }
+    .prs-role {
+      font-size: .7rem;
+      font-weight: 800;
+      text-transform: uppercase;
+      letter-spacing: .12em;
+      color: var(--brand-light);
+      margin-bottom: .2rem;
+    }
+    .prs-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 1.1rem; }
+    .prs-list { list-style: none; display: flex; flex-direction: column; gap: .55rem; }
+    .prs-list li {
+      font-size: .84rem;
+      color: var(--muted);
+      display: flex;
+      gap: .5rem;
+      align-items: flex-start;
+    }
+    .prs-list li::before { content: '\2192'; color: var(--brand-light); flex-shrink: 0; }
+
+    /* ── CTA ── */
+    .cta-sec {
+      text-align: center;
+      background: radial-gradient(ellipse at center, rgba(79,70,229,.14) 0%, transparent 65%);
+    }
+    .cta-sec h2 { margin-bottom: 1rem; }
+    .cta-sec .sub { color: var(--muted); font-size: 1.05rem; margin-bottom: 2.5rem; }
+    .cta-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
+
+    /* ── FOOTER ── */
+    footer {
+      position: relative;
+      z-index: 1;
+      border-top: 1px solid var(--border);
+      padding: 2.5rem 1.5rem;
+    }
+    .foot-inner {
+      max-width: 1200px;
+      margin: 0 auto;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      flex-wrap: wrap;
+      gap: 1rem;
+    }
+    .foot-links { display: flex; gap: 1.5rem; list-style: none; }
+    .foot-links a {
+      font-size: .84rem;
+      color: var(--dim);
+      text-decoration: none;
+      transition: color .2s;
+    }
+    .foot-links a:hover { color: var(--muted); }
+    .foot-copy { font-size: .8rem; color: var(--dim); }
+
+    /* ── ANIMATIONS ── */
+    .fu {
+      opacity: 0;
+      transform: translateY(22px);
+      transition: opacity .6s ease, transform .6s ease;
+    }
+    .fu.vis { opacity: 1; transform: translateY(0); }
+
+    /* ── RESPONSIVE ── */
+    @media (max-width: 960px) {
+      .hero-grid   { grid-template-columns: 1fr; gap: 3rem; }
+      .hero-visual { display: none; }
+      .pb-grid, .ft-grid, .prs-grid { grid-template-columns: 1fr; }
+      .steps       { grid-template-columns: 1fr; }
+      .steps::before { display: none; }
+      .sec-grid    { grid-template-columns: 1fr; }
+      .stats       { grid-template-columns: repeat(2,1fr); }
+      .nav-links   { display: none; }
+    }
+    @media (max-width: 580px) {
+      section { padding: 4rem 1rem; }
+      .hero   { padding: 4rem 1rem 3rem; }
+      .comp-grid { grid-template-columns: 1fr; }
+    }
+  </style>
+</head>
+<body>
+
+<!-- NAV -->
+<nav>
+  <div class="nav-inner">
+    <a href="/" class="logo">Veylant<span> IA</span></a>
+    <ul class="nav-links">
+      <li><a href="#fonctionnalites">Fonctionnalites</a></li>
+      <li><a href="#securite">Securite</a></li>
+      <li><a href="#personas">Pour qui</a></li>
+      <li><a href="/playground">Playground</a></li>
+      <li><a href="/docs">Docs</a></li>
+    </ul>
+    <div class="nav-cta">
+      <a href="#contact" class="btn btn-primary">Demander une demo</a>
+    </div>
+  </div>
+</nav>
+
+<!-- HERO -->
+<section class="hero">
+  <div class="hero-grid">
+    <!-- Left -->
+    <div class="hero-content fu">
+      <div class="label">
+        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
+        Proxy IA d'entreprise
+      </div>
+      <h1>L'IA de vos equipes,<br><span class="gradient">enfin sous controle</span></h1>
+      <p>Veylant intercepte, anonymise et gouverne tous vos echanges LLM en moins de 50 ms. RGPD natif, EU AI Act pret, zero Shadow AI.</p>
+      <div class="hero-actions">
+        <a href="#contact" class="btn btn-primary btn-lg">
+          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"/><polyline points="10 17 15 12 10 7"/><line x1="15" y1="12" x2="3" y2="12"/></svg>
+          Demander une demo
+        </a>
+        <a href="/playground" class="btn btn-outline btn-lg">
+          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polygon points="5 3 19 12 5 21 5 3"/></svg>
+          Tester le playground
+        </a>
+      </div>
+      <!-- Stats -->
+      <div class="stats">
+        <div class="stat">
+          <div class="stat-val gradient">&lt;50ms</div>
+          <div class="stat-lbl">Latence pipeline PII</div>
+        </div>
+        <div class="stat">
+          <div class="stat-val gradient">5</div>
+          <div class="stat-lbl">Providers LLM</div>
+        </div>
+        <div class="stat">
+          <div class="stat-val gradient">0</div>
+          <div class="stat-lbl">Shadow AI autorise</div>
+        </div>
+        <div class="stat">
+          <div class="stat-val gradient">100%</div>
+          <div class="stat-lbl">Compatible OpenAI SDK</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Terminal -->
+    <div class="hero-visual fu" style="animation-delay:.15s">
+      <div class="terminal">
+        <div class="term-header">
+          <div class="dot dr"></div>
+          <div class="dot dy"></div>
+          <div class="dot dg"></div>
+          <span class="term-title">veylant-proxy &mdash; requete interceptee</span>
+        </div>
+        <div class="term-body">
+          <div><span class="tc">// Requete entrante</span></div>
+          <div><span class="tk">POST</span> <span class="tv">/v1/chat/completions</span></div>
+          <div><span class="td">tenant:</span> <span class="tb">acme-corp</span> &middot; <span class="td">user:</span> <span class="tb">alice</span></div>
+          <br>
+          <div><span class="tc">// Detection PII &mdash; 12ms</span></div>
+          <div><span class="ty">&#9888;</span> <span class="tk">PERSON</span>&nbsp;&nbsp;&nbsp;&nbsp; <span class="tre">"Marie Dubois"</span> <span class="td">&rarr;</span> <span class="ta">[PERSONNE_1]</span></div>
+          <div><span class="ty">&#9888;</span> <span class="tk">IBAN</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="tre">"FR76 3000..."</span> <span class="td">&rarr;</span> <span class="ta">[IBAN_1]</span></div>
+          <div><span class="ty">&#9888;</span> <span class="tk">EMAIL</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="tre">"m.dubois@..."</span> <span class="td">&rarr;</span> <span class="ta">[EMAIL_1]</span></div>
+          <br>
+          <div><span class="tc">// Routage intelligent &mdash; regle #3</span></div>
+          <div><span class="tg">&#10003;</span> provider <span class="tb">azure</span> &middot; model <span class="tb">gpt-4o</span></div>
+          <div><span class="tg">&#10003;</span> dept <span class="tb">finance</span> &middot; budget OK</div>
+          <br>
+          <div><span class="tc">// Log d'audit &mdash; ClickHouse</span></div>
+          <div><span class="tg">&#10003;</span> <span class="td">tokens:</span> <span class="tv">847 in / 312 out</span></div>
+          <div><span class="tg">&#10003;</span> <span class="td">cout:</span> <span class="tv">&euro;0.0043</span> <span class="td">impute</span></div>
+          <div><span class="tg">&#10003;</span> <span class="td">latence totale:</span> <span class="tv">38ms</span> &#10024;</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- TRUST BAR -->
+<div class="trust">
+  <div class="trust-inner">
+    <span class="trust-lbl">Compatible avec</span>
+    <div class="providers">
+      <div class="pvd">
+        <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor"><path d="M22.28 9.82a5.98 5.98 0 0 0-.52-4.91 6.05 6.05 0 0 0-6.51-2.9A6.07 6.07 0 0 0 4.98 4.18a5.98 5.98 0 0 0-4 2.9 6.05 6.05 0 0 0 .74 7.1 5.98 5.98 0 0 0 .51 4.91 6.05 6.05 0 0 0 6.51 2.9A5.98 5.98 0 0 0 13.26 24a6.06 6.06 0 0 0 5.77-4.21 5.99 5.99 0 0 0 4-2.9 6.06 6.06 0 0 0-.75-7.07z"/></svg>
+        OpenAI
+      </div>
+      <div class="pvd">
+        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M8 12h8M12 8l4 4-4 4"/></svg>
+        Anthropic
+      </div>
+      <div class="pvd">
+        <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor"><path d="M0 0h11.4v11.4H0zm12.6 0H24v11.4H12.6zM0 12.6h11.4V24H0zm12.6 0H24V24H12.6z"/></svg>
+        Azure OpenAI
+      </div>
+      <div class="pvd">
+        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
+        Mistral AI
+      </div>
+      <div class="pvd">
+        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
+        Ollama (on-premise)
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- PROBLEM -->
+<section id="probleme">
+  <div class="container">
+    <div class="label">Le probleme</div>
+    <h2>Vos equipes utilisent l'IA.<br>Vous n'en savez rien.</h2>
+    <p class="muted" style="margin-top:1rem;max-width:560px;line-height:1.7">ChatGPT, Claude, Copilot &mdash; vos collaborateurs contournent les politiques IT. Resultat : donnees sensibles exposees, couts incontroles, conformite compromise.</p>
+    <div class="pb-grid">
+      <div class="pb-card fu">
+        <div class="pb-icon">&#128373;</div>
+        <h3>Shadow AI</h3>
+        <p>73 % des entreprises ont des employes utilisant des outils IA non approuves. Donnees clients, contrats, code proprietaire partent vers des serveurs tiers sans votre accord.</p>
+      </div>
+      <div class="pb-card fu" style="transition-delay:.08s">
+        <div class="pb-icon">&#128275;</div>
+        <h3>Fuites de donnees PII</h3>
+        <p>Sans filtre, vos prompts contiennent noms, IBAN, emails, numeros de securite sociale. Une seule fuite = violation RGPD notifiable a la CNIL sous 72h.</p>
+      </div>
+      <div class="pb-card fu" style="transition-delay:.16s">
+        <div class="pb-icon">&#128184;</div>
+        <h3>Couts hors de controle</h3>
+        <p>Les abonnements proliferent, les tokens s'accumulent. Sans visibilite centralisee, la facture IA gonfle sans correlation avec la valeur produite.</p>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- FEATURES -->
+<section id="fonctionnalites" style="border-top:1px solid var(--border)">
+  <div class="container">
+    <div class="label">La solution</div>
+    <h2>Un proxy intelligent entre<br>vos equipes et les LLMs</h2>
+    <p class="muted" style="margin-top:1rem;max-width:560px;line-height:1.7">Veylant se deploie en 15 minutes sans modifier votre code existant. Il intercepte chaque requete et applique vos politiques en temps reel.</p>
+    <div class="ft-grid">
+      <div class="ft-card fu">
+        <div class="ft-icon">&#128269;</div>
+        <h3>Anonymisation PII automatique</h3>
+        <p>3 couches de detection (regex, Presidio NER, validation LLM). Pseudonymisation reversible avec mapping chiffre AES-256-GCM en Redis.</p>
+        <span class="ft-badge">latence &lt;50ms</span>
+      </div>
+      <div class="ft-card fu" style="transition-delay:.06s">
+        <div class="ft-icon">&#129517;</div>
+        <h3>Routage intelligent</h3>
+        <p>Moteur de regles base sur le role, le departement, la sensibilite et le modele demande. Fallback automatique en cas de panne provider.</p>
+        <span class="ft-badge">circuit breaker integre</span>
+      </div>
+      <div class="ft-card fu" style="transition-delay:.12s">
+        <div class="ft-icon">&#128737;</div>
+        <h3>RBAC granulaire</h3>
+        <p>4 roles (admin, manager, user, auditor) avec controle par modele et par departement. Compatible OIDC / Keycloak / SAML 2.0.</p>
+        <span class="ft-badge">SSO ready</span>
+      </div>
+      <div class="ft-card fu" style="transition-delay:.18s">
+        <div class="ft-icon">&#128203;</div>
+        <h3>Logs d'audit immuables</h3>
+        <p>Chaque requete est enregistree dans ClickHouse (append-only). Impossible a modifier, retention configurable, export PDF pour la CNIL.</p>
+        <span class="ft-badge">RGPD Art. 30</span>
+      </div>
+      <div class="ft-card fu" style="transition-delay:.24s">
+        <div class="ft-icon">&#9878;</div>
+        <h3>Conformite RGPD &amp; EU AI Act</h3>
+        <p>Registre de traitement automatique, classification des risques AI Act, rapports PDF telechargeables. DPO-ready des le premier jour.</p>
+        <span class="ft-badge">EU AI Act ready</span>
+      </div>
+      <div class="ft-card fu" style="transition-delay:.30s">
+        <div class="ft-icon">&#128202;</div>
+        <h3>Controle des couts</h3>
+        <p>Suivi des tokens par tenant, utilisateur et departement. Alertes budgetaires, tableaux de bord Grafana, imputation par centre de cout.</p>
+        <span class="ft-badge">dashboard temps reel</span>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- HOW IT WORKS -->
+<section class="how-bg">
+  <div class="container">
+    <div class="label">Demarrage en 15 minutes</div>
+    <h2 style="text-align:center">Trois etapes vers la conformite</h2>
+    <div class="steps">
+      <div class="step fu">
+        <div class="step-num">1</div>
+        <h3>Pointez votre endpoint</h3>
+        <p>Remplacez l'URL OpenAI par votre instance Veylant. Zero modification de code &mdash; compatible avec tout SDK OpenAI existant.</p>
+        <div class="step-code">
+          <div class="tc"># Avant</div>
+          <div>OPENAI_BASE_URL=<span style="color:#f85149">api.openai.com</span></div>
+          <br>
+          <div class="tc"># Apres</div>
+          <div>OPENAI_BASE_URL=<span class="tg">ai.votre-entreprise.com</span></div>
+        </div>
+      </div>
+      <div class="step fu" style="transition-delay:.1s">
+        <div class="step-num">2</div>
+        <h3>Configurez vos politiques</h3>
+        <p>Via l'API admin ou l'interface React : regles de routage, RBAC, budgets par departement, seuils d'alerte PII.</p>
+        <div class="step-code">
+          <div class="tc"># Regle de routage</div>
+          <div>department == <span class="tg">"finance"</span></div>
+          <div>&nbsp;&nbsp;&rarr; provider: <span class="tb">azure</span></div>
+          <div>&nbsp;&nbsp;&rarr; model: <span class="tb">gpt-4o</span></div>
+        </div>
+      </div>
+      <div class="step fu" style="transition-delay:.2s">
+        <div class="step-num">3</div>
+        <h3>Observez et gouvernez</h3>
+        <p>Tableau de bord temps reel, alertes Prometheus/PagerDuty, logs d'audit exportables pour vos audits RGPD.</p>
+        <div class="step-code">
+          <div class="tc"># Dashboard SLO</div>
+          <div>&#10003; SLO <span class="tg">99.5 %</span> respecte</div>
+          <div>&#10003; <span class="tg">0</span> fuite PII ce mois</div>
+          <div>&#10003; Budget: <span class="tg">847 / 1200 EUR</span></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- SECURITY -->
+<section id="securite" style="border-top:1px solid var(--border)">
+  <div class="container">
+    <div class="label">Securite</div>
+    <h2>Concu pour les equipes<br>securite les plus exigeantes</h2>
+    <div class="sec-grid">
+      <div class="checks">
+        <div class="chk fu">
+          <div class="chk-ico">&#128272;</div>
+          <div>
+            <h4>Zero Trust &amp; mTLS</h4>
+            <p>Communication inter-services chiffree via mTLS. TLS 1.3 en externe. Aucun trafic en clair, jamais.</p>
+          </div>
+        </div>
+        <div class="chk fu" style="transition-delay:.06s">
+          <div class="chk-ico">&#128273;</div>
+          <div>
+            <h4>Chiffrement bout-en-bout</h4>
+            <p>Prompts chiffres AES-256-GCM au repos. Cles API stockees en SHA-256 uniquement. Rotation 90 jours via HashiCorp Vault.</p>
+          </div>
+        </div>
+        <div class="chk fu" style="transition-delay:.12s">
+          <div class="chk-ico">&#9989;</div>
+          <div>
+            <h4>Pentest reussi &mdash; 2026</h4>
+            <p>0 vulnerabilite critique, 0 high. Semgrep SAST + Trivy image scanning + OWASP ZAP DAST integres en CI/CD.</p>
+          </div>
+        </div>
+        <div class="chk fu" style="transition-delay:.18s">
+          <div class="chk-ico">&#128221;</div>
+          <div>
+            <h4>Audit de l'audit</h4>
+            <p>Chaque acces aux logs d'audit est lui-meme logue. Tracabilite complete et inviolable.</p>
+          </div>
+        </div>
+      </div>
+      <div class="comp-grid">
+        <div class="comp-badge fu">
+          <div class="comp-ico">&#127466;&#127482;</div>
+          <h4>RGPD natif</h4>
+          <p>Registre Art. 30 automatique. Notification CNIL prete sous 72h.</p>
+        </div>
+        <div class="comp-badge fu" style="transition-delay:.06s">
+          <div class="comp-ico">&#9878;</div>
+          <h4>EU AI Act</h4>
+          <p>Classification des risques, documentation systeme requise.</p>
+        </div>
+        <div class="comp-badge fu" style="transition-delay:.12s">
+          <div class="comp-ico">&#127963;</div>
+          <h4>NIS2 ready</h4>
+          <p>Logs immuables, alertes PagerDuty, SLO 99,5 %.</p>
+        </div>
+        <div class="comp-badge fu" style="transition-delay:.18s">
+          <div class="comp-ico">&#128274;</div>
+          <h4>ISO 27001</h4>
+          <p>Architecture Zero Trust, RBAC, gestion des secrets.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- PERSONAS -->
+<section id="personas" style="border-top:1px solid var(--border)">
+  <div class="container">
+    <div class="label">Pour qui</div>
+    <h2>Un outil, trois interlocuteurs</h2>
+    <div class="prs-grid">
+      <div class="prs-card fu">
+        <div class="prs-role">RSSI</div>
+        <div class="prs-title">Responsable Securite SI</div>
+        <ul class="prs-list">
+          <li>Visibilite complete sur tous les flux LLM</li>
+          <li>Zero Trust, mTLS, AES-256-GCM</li>
+          <li>Rapport pentest disponible sur demande</li>
+          <li>Alertes temps reel (PagerDuty, Slack)</li>
+          <li>Shadow AI elimine structurellement</li>
+        </ul>
+      </div>
+      <div class="prs-card fu" style="transition-delay:.1s">
+        <div class="prs-role">DSI</div>
+        <div class="prs-title">Directeur Systemes d'Information</div>
+        <ul class="prs-list">
+          <li>Deploiement Helm/Kubernetes en 15 min</li>
+          <li>Compatible tout SDK OpenAI existant</li>
+          <li>Multi-provider avec fallback automatique</li>
+          <li>Dashboard couts par equipe et projet</li>
+          <li>HPA autoscaling, blue/green deployment</li>
+        </ul>
+      </div>
+      <div class="prs-card fu" style="transition-delay:.2s">
+        <div class="prs-role">DPO</div>
+        <div class="prs-title">Data Protection Officer</div>
+        <ul class="prs-list">
+          <li>Registre Art. 30 genere automatiquement</li>
+          <li>Classification risques EU AI Act integree</li>
+          <li>Export PDF pour audits CNIL</li>
+          <li>Pseudonymisation reversible et tracable</li>
+          <li>Retention configurable par type de donnee</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- CTA -->
+<section class="cta-sec" id="contact">
+  <div class="container">
+    <div class="label">Commencer</div>
+    <h2>Pret a reprendre le controle<br>de votre IA d'entreprise ?</h2>
+    <p class="sub">Demo personnalisee &middot; Deploiement en 15 minutes &middot; Support dedie</p>
+    <div class="cta-actions">
+      <a href="mailto:demo@veylant.io" class="btn btn-primary btn-lg">
+        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><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-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+        Demander une demo
+      </a>
+      <a href="/playground" class="btn btn-outline btn-lg">
+        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polygon points="5 3 19 12 5 21 5 3"/></svg>
+        Tester le playground
+      </a>
+      <a href="/docs" class="btn btn-outline btn-lg">
+        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
+        Lire la documentation
+      </a>
+    </div>
+  </div>
+</section>
+
+<!-- FOOTER -->
+<footer>
+  <div class="foot-inner">
+    <a href="/" class="logo">Veylant<span> IA</span></a>
+    <ul class="foot-links">
+      <li><a href="/docs">Documentation</a></li>
+      <li><a href="/playground">Playground</a></li>
+      <li><a href="mailto:demo@veylant.io">Contact</a></li>
+    </ul>
+    <span class="foot-copy">&copy; 2026 Veylant. Concu pour l'entreprise europeenne.</span>
+  </div>
+</footer>
+
+<script>
+  // Scroll-reveal with IntersectionObserver
+  var io = new IntersectionObserver(function(entries) {
+    entries.forEach(function(e) {
+      if (e.isIntersecting) { e.target.classList.add('vis'); }
+    });
+  }, { threshold: 0.12 });
+
+  document.querySelectorAll('.fu').forEach(function(el) { io.observe(el); });
+
+  // Hero appears immediately
+  setTimeout(function() {
+    document.querySelectorAll('.hero .fu').forEach(function(el) { el.classList.add('vis'); });
+  }, 80);
+
+  // Smooth scroll anchors
+  document.querySelectorAll('a[href^="#"]').forEach(function(a) {
+    a.addEventListener('click', function(e) {
+      var target = document.querySelector(this.getAttribute('href'));
+      if (target) {
+        e.preventDefault();
+        target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      }
+    });
+  });
+</script>
+</body>
+</html>`
--- a/BIN
+++ b/BIN
--- a/web/src/components/Sidebar.tsx
+++ b/web/src/components/Sidebar.tsx
@ -16,16 +16,16 @@ import { cn } from "@/lib/utils";
 import { Separator } from "@/components/ui/separator";

 const navItems = [
-  { to: "/", label: "Vue d'ensemble", icon: LayoutDashboard, end: true },
-  { to: "/playground", label: "Playground IA", icon: FlaskConical },
-  { to: "/policies", label: "Politiques", icon: Shield },
-  { to: "/users", label: "Utilisateurs", icon: Users },
-  { to: "/providers", label: "Fournisseurs", icon: Plug },
-  { to: "/security", label: "Sécurité", icon: ShieldAlert },
-  { to: "/costs", label: "Coûts", icon: TrendingUp },
-  { to: "/alerts", label: "Alertes Budget", icon: Bell },
-  { to: "/logs", label: "Journaux", icon: BookOpen },
-  { to: "/compliance", label: "Conformité", icon: FileCheck },
+  { to: "/dashboard", label: "Vue d'ensemble", icon: LayoutDashboard, end: true },
+  { to: "/dashboard/playground", label: "Playground IA", icon: FlaskConical },
+  { to: "/dashboard/policies", label: "Politiques", icon: Shield },
+  { to: "/dashboard/users", label: "Utilisateurs", icon: Users },
+  { to: "/dashboard/providers", label: "Fournisseurs", icon: Plug },
+  { to: "/dashboard/security", label: "Sécurité", icon: ShieldAlert },
+  { to: "/dashboard/costs", label: "Coûts", icon: TrendingUp },
+  { to: "/dashboard/alerts", label: "Alertes Budget", icon: Bell },
+  { to: "/dashboard/logs", label: "Journaux", icon: BookOpen },
+  { to: "/dashboard/compliance", label: "Conformité", icon: FileCheck },
 ];

 export function Sidebar() {
--- a/web/src/pages/LandingPage.tsx
+++ b/web/src/pages/LandingPage.tsx
@ -0,0 +1,759 @@
+import { useEffect } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { useAuth } from "@/auth/AuthProvider";
+
+const brand = "#4f46e5";
+const brandLight = "#818cf8";
+const accent = "#06b6d4";
+const bg = "#0a0f1e";
+const card = "rgba(255,255,255,0.04)";
+const cardHover = "rgba(255,255,255,0.07)";
+const border = "rgba(255,255,255,0.08)";
+const muted = "#94a3b8";
+const dim = "#64748b";
+
+// ── Feature card data ─────────────────────────────────────────────────────────
+const features = [
+  {
+    icon: "🔍",
+    title: "Anonymisation PII automatique",
+    body: "3 couches de détection (regex, Presidio NER, validation LLM). Pseudonymisation réversible avec mapping chiffré AES-256-GCM en Redis.",
+    badge: "latence <50ms",
+  },
+  {
+    icon: "🧭",
+    title: "Routage intelligent",
+    body: "Moteur de règles basé sur le rôle, le département, la sensibilité et le modèle demandé. Fallback automatique en cas de panne provider.",
+    badge: "circuit breaker intégré",
+  },
+  {
+    icon: "🛡️",
+    title: "RBAC granulaire",
+    body: "4 rôles (admin, manager, user, auditor) avec contrôle par modèle et par département. Compatible OIDC / Keycloak / SAML 2.0.",
+    badge: "SSO ready",
+  },
+  {
+    icon: "📋",
+    title: "Logs d'audit immuables",
+    body: "Chaque requête est enregistrée dans ClickHouse (append-only). Impossible à modifier, rétention configurable, export PDF pour la CNIL.",
+    badge: "RGPD Art. 30",
+  },
+  {
+    icon: "⚖️",
+    title: "Conformité RGPD & EU AI Act",
+    body: "Registre de traitement automatique, classification des risques AI Act, rapports PDF téléchargeables. DPO-ready dès le premier jour.",
+    badge: "EU AI Act ready",
+  },
+  {
+    icon: "📊",
+    title: "Contrôle des coûts",
+    body: "Suivi des tokens par tenant, utilisateur et département. Alertes budgétaires, tableaux de bord Grafana, imputation par centre de coût.",
+    badge: "dashboard temps réel",
+  },
+];
+
+const problems = [
+  {
+    icon: "🕵️",
+    title: "Shadow AI",
+    body: "73 % des entreprises ont des employés utilisant des outils IA non approuvés. Données clients, contrats, code propriétaire partent vers des serveurs tiers sans votre accord.",
+  },
+  {
+    icon: "🔓",
+    title: "Fuites de données PII",
+    body: "Sans filtre, vos prompts contiennent noms, IBAN, emails, numéros de sécurité sociale. Une seule fuite = violation RGPD notifiable à la CNIL sous 72h.",
+  },
+  {
+    icon: "💸",
+    title: "Coûts hors de contrôle",
+    body: "Les abonnements prolifèrent, les tokens s'accumulent. Sans visibilité centralisée, la facture IA gonfle sans corrélation avec la valeur produite.",
+  },
+];
+
+const personas = [
+  {
+    role: "RSSI",
+    title: "Responsable Sécurité SI",
+    items: [
+      "Visibilité complète sur tous les flux LLM",
+      "Zero Trust, mTLS, AES-256-GCM",
+      "Rapport pentest disponible sur demande",
+      "Alertes temps réel (PagerDuty, Slack)",
+      "Shadow AI éliminé structurellement",
+    ],
+  },
+  {
+    role: "DSI",
+    title: "Directeur Systèmes d'Information",
+    items: [
+      "Déploiement Helm/Kubernetes en 15 min",
+      "Compatible tout SDK OpenAI existant",
+      "Multi-provider avec fallback automatique",
+      "Dashboard coûts par équipe et projet",
+      "HPA autoscaling, blue/green deployment",
+    ],
+  },
+  {
+    role: "DPO",
+    title: "Data Protection Officer",
+    items: [
+      "Registre Art. 30 généré automatiquement",
+      "Classification risques EU AI Act intégrée",
+      "Export PDF pour audits CNIL",
+      "Pseudonymisation réversible et traçable",
+      "Rétention configurable par type de donnée",
+    ],
+  },
+];
+
+// ── Reusable small components ─────────────────────────────────────────────────
+
+function Label({ children }: { children: React.ReactNode }) {
+  return (
+    <div
+      style={{
+        display: "inline-flex",
+        alignItems: "center",
+        gap: "0.4rem",
+        fontSize: "0.72rem",
+        fontWeight: 700,
+        textTransform: "uppercase",
+        letterSpacing: "0.1em",
+        color: brandLight,
+        background: "rgba(79,70,229,0.15)",
+        border: `1px solid rgba(79,70,229,0.3)`,
+        padding: "0.3rem 0.85rem",
+        borderRadius: "100px",
+        marginBottom: "1.5rem",
+      }}
+    >
+      {children}
+    </div>
+  );
+}
+
+function GradientText({ children }: { children: React.ReactNode }) {
+  return (
+    <span
+      style={{
+        background: `linear-gradient(135deg, #a5b4fc 0%, ${accent} 100%)`,
+        WebkitBackgroundClip: "text",
+        WebkitTextFillColor: "transparent",
+        backgroundClip: "text",
+      }}
+    >
+      {children}
+    </span>
+  );
+}
+
+function BtnPrimary({ href, to, children }: { href?: string; to?: string; children: React.ReactNode }) {
+  const style: React.CSSProperties = {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "0.45rem",
+    padding: "0.85rem 2rem",
+    borderRadius: "10px",
+    fontSize: "1rem",
+    fontWeight: 600,
+    textDecoration: "none",
+    cursor: "pointer",
+    border: "none",
+    background: brand,
+    color: "#fff",
+    transition: "all .2s",
+    whiteSpace: "nowrap",
+  };
+  if (to) return <Link to={to} style={style}>{children}</Link>;
+  return <a href={href} style={style}>{children}</a>;
+}
+
+function BtnOutline({ href, to, children }: { href?: string; to?: string; children: React.ReactNode }) {
+  const style: React.CSSProperties = {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "0.45rem",
+    padding: "0.85rem 2rem",
+    borderRadius: "10px",
+    fontSize: "1rem",
+    fontWeight: 600,
+    textDecoration: "none",
+    background: "transparent",
+    color: "#f1f5f9",
+    border: `1px solid ${border}`,
+    transition: "all .2s",
+    whiteSpace: "nowrap",
+  };
+  if (to) return <Link to={to} style={style}>{children}</Link>;
+  return <a href={href} style={style}>{children}</a>;
+}
+
+// ── Main component ─────────────────────────────────────────────────────────────
+
+export function LandingPage() {
+  const { isAuthenticated } = useAuth();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (isAuthenticated) {
+      navigate("/dashboard", { replace: true });
+    }
+  }, [isAuthenticated, navigate]);
+
+  return (
+    <div
+      style={{
+        fontFamily: "system-ui, -apple-system, 'Segoe UI', sans-serif",
+        background: bg,
+        color: "#f1f5f9",
+        minHeight: "100vh",
+        overflowX: "hidden",
+      }}
+    >
+      {/* Background glow */}
+      <div
+        style={{
+          position: "fixed",
+          inset: 0,
+          background:
+            "radial-gradient(ellipse at 15% 50%, rgba(79,70,229,.14) 0%, transparent 55%), radial-gradient(ellipse at 85% 15%, rgba(6,182,212,.09) 0%, transparent 50%)",
+          pointerEvents: "none",
+          zIndex: 0,
+        }}
+      />
+
+      {/* ── NAV ── */}
+      <nav
+        style={{
+          position: "sticky",
+          top: 0,
+          zIndex: 100,
+          backdropFilter: "blur(14px)",
+          WebkitBackdropFilter: "blur(14px)",
+          background: "rgba(10,15,30,.88)",
+          borderBottom: `1px solid ${border}`,
+        }}
+      >
+        <div
+          style={{
+            maxWidth: 1200,
+            margin: "0 auto",
+            padding: "0 1.5rem",
+            height: 64,
+            display: "flex",
+            alignItems: "center",
+            gap: "2rem",
+          }}
+        >
+          <Link
+            to="/"
+            style={{ fontSize: "1.25rem", fontWeight: 800, color: "#f1f5f9", textDecoration: "none", letterSpacing: "-0.5px", flexShrink: 0 }}
+          >
+            Veylant<span style={{ color: brandLight }}> IA</span>
+          </Link>
+
+          <div style={{ display: "flex", gap: "1.75rem", marginLeft: "auto", alignItems: "center" }}>
+            <a href="#fonctionnalites" style={{ color: muted, textDecoration: "none", fontSize: ".875rem", fontWeight: 500 }}>Fonctionnalités</a>
+            <a href="#securite" style={{ color: muted, textDecoration: "none", fontSize: ".875rem", fontWeight: 500 }}>Sécurité</a>
+            <a href="#personas" style={{ color: muted, textDecoration: "none", fontSize: ".875rem", fontWeight: 500 }}>Pour qui</a>
+            <a href="http://localhost:8090/playground" style={{ color: muted, textDecoration: "none", fontSize: ".875rem", fontWeight: 500 }}>Playground</a>
+            <a href="http://localhost:8090/docs" style={{ color: muted, textDecoration: "none", fontSize: ".875rem", fontWeight: 500 }}>Docs</a>
+            <Link
+              to="/login"
+              style={{
+                background: brand,
+                color: "#fff",
+                padding: ".5rem 1.1rem",
+                borderRadius: 8,
+                fontSize: ".875rem",
+                fontWeight: 600,
+                textDecoration: "none",
+              }}
+            >
+              Se connecter →
+            </Link>
+          </div>
+        </div>
+      </nav>
+
+      {/* ── HERO ── */}
+      <section style={{ padding: "7rem 1.5rem 5rem", position: "relative", zIndex: 1 }}>
+        <div
+          style={{
+            maxWidth: 1200,
+            margin: "0 auto",
+            display: "grid",
+            gridTemplateColumns: "1fr 1fr",
+            gap: "4rem",
+            alignItems: "center",
+          }}
+        >
+          {/* Left */}
+          <div>
+            <Label>
+              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
+              Proxy IA d'entreprise
+            </Label>
+            <h1 style={{ fontSize: "clamp(2.4rem,5vw,3.8rem)", fontWeight: 800, lineHeight: 1.15, letterSpacing: "-0.025em", marginBottom: "1.25rem" }}>
+              L'IA de vos équipes,<br />
+              <GradientText>enfin sous contrôle</GradientText>
+            </h1>
+            <p style={{ fontSize: "1.1rem", color: muted, lineHeight: 1.75, marginBottom: "2rem", maxWidth: 500 }}>
+              Veylant intercepte, anonymise et gouverne tous vos échanges LLM en moins de 50 ms. RGPD natif, EU AI Act prêt, zéro Shadow AI.
+            </p>
+            <div style={{ display: "flex", gap: ".875rem", flexWrap: "wrap" }}>
+              <BtnPrimary href="#contact">
+                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"/><polyline points="10 17 15 12 10 7"/><line x1="15" y1="12" x2="3" y2="12"/></svg>
+                Demander une démo
+              </BtnPrimary>
+              <BtnOutline href="http://localhost:8090/playground">
+                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><polygon points="5 3 19 12 5 21 5 3"/></svg>
+                Tester le playground
+              </BtnOutline>
+            </div>
+
+            {/* Stats */}
+            <div
+              style={{
+                display: "grid",
+                gridTemplateColumns: "repeat(4,1fr)",
+                gap: "1rem",
+                marginTop: "3.5rem",
+                paddingTop: "2.5rem",
+                borderTop: `1px solid ${border}`,
+              }}
+            >
+              {[
+                { val: "<50ms", lbl: "Latence pipeline PII" },
+                { val: "5", lbl: "Providers LLM" },
+                { val: "0", lbl: "Shadow AI autorisé" },
+                { val: "100%", lbl: "Compatible OpenAI SDK" },
+              ].map((s) => (
+                <div key={s.lbl} style={{ textAlign: "center" }}>
+                  <div
+                    style={{
+                      fontSize: "1.7rem",
+                      fontWeight: 800,
+                      letterSpacing: "-0.04em",
+                      background: `linear-gradient(135deg, #a5b4fc, ${accent})`,
+                      WebkitBackgroundClip: "text",
+                      WebkitTextFillColor: "transparent",
+                      backgroundClip: "text",
+                    }}
+                  >
+                    {s.val}
+                  </div>
+                  <div style={{ fontSize: ".78rem", color: muted, marginTop: ".2rem" }}>{s.lbl}</div>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Terminal */}
+          <div
+            style={{
+              background: "#0d1117",
+              border: `1px solid rgba(255,255,255,.1)`,
+              borderRadius: 20,
+              overflow: "hidden",
+              boxShadow: "0 30px 60px rgba(0,0,0,.6)",
+            }}
+          >
+            <div
+              style={{
+                background: "#161b22",
+                padding: ".7rem 1rem",
+                display: "flex",
+                alignItems: "center",
+                gap: ".4rem",
+                borderBottom: `1px solid rgba(255,255,255,.07)`,
+              }}
+            >
+              <div style={{ width: 12, height: 12, borderRadius: "50%", background: "#ff5f57" }} />
+              <div style={{ width: 12, height: 12, borderRadius: "50%", background: "#ffbd2e" }} />
+              <div style={{ width: 12, height: 12, borderRadius: "50%", background: "#28c840" }} />
+              <span style={{ marginLeft: ".5rem", fontSize: ".72rem", color: dim, fontFamily: "monospace" }}>
+                veylant-proxy — requête interceptée
+              </span>
+            </div>
+            <div style={{ padding: "1.5rem", fontFamily: "monospace", fontSize: ".76rem", lineHeight: 1.9 }}>
+              <div style={{ color: "#6e7681" }}>{`// Requête entrante`}</div>
+              <div><span style={{ color: "#79c0ff" }}>POST</span> <span style={{ color: "#a5d6ff" }}>/v1/chat/completions</span></div>
+              <div><span style={{ color: dim }}>tenant:</span> <span style={{ color: brandLight }}>acme-corp</span> · <span style={{ color: dim }}>user:</span> <span style={{ color: brandLight }}>alice</span></div>
+              <br />
+              <div style={{ color: "#6e7681" }}>{`// Détection PII — 12ms`}</div>
+              <div>
+                <span style={{ color: "#e3b341" }}>⚠ </span>
+                <span style={{ color: "#79c0ff" }}>PERSON&nbsp;&nbsp;&nbsp; </span>
+                <span style={{ color: "#f85149" }}>"Marie Dubois"</span>
+                <span style={{ color: dim }}> → </span>
+                <span style={{ color: "#fbbf24", background: "rgba(251,191,36,.1)", padding: "0 3px", borderRadius: 3 }}>[PERSONNE_1]</span>
+              </div>
+              <div>
+                <span style={{ color: "#e3b341" }}>⚠ </span>
+                <span style={{ color: "#79c0ff" }}>IBAN&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
+                <span style={{ color: "#f85149" }}>"FR76 3000..."</span>
+                <span style={{ color: dim }}> → </span>
+                <span style={{ color: "#fbbf24", background: "rgba(251,191,36,.1)", padding: "0 3px", borderRadius: 3 }}>[IBAN_1]</span>
+              </div>
+              <div>
+                <span style={{ color: "#e3b341" }}>⚠ </span>
+                <span style={{ color: "#79c0ff" }}>EMAIL&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
+                <span style={{ color: "#f85149" }}>"m.dubois@..."</span>
+                <span style={{ color: dim }}> → </span>
+                <span style={{ color: "#fbbf24", background: "rgba(251,191,36,.1)", padding: "0 3px", borderRadius: 3 }}>[EMAIL_1]</span>
+              </div>
+              <br />
+              <div style={{ color: "#6e7681" }}>{`// Routage intelligent — règle #3`}</div>
+              <div><span style={{ color: "#56d364" }}>✓ </span>provider <span style={{ color: brandLight }}>azure</span> · model <span style={{ color: brandLight }}>gpt-4o</span></div>
+              <div><span style={{ color: "#56d364" }}>✓ </span>dept <span style={{ color: brandLight }}>finance</span> · budget OK</div>
+              <br />
+              <div style={{ color: "#6e7681" }}>{`// Log d'audit — ClickHouse`}</div>
+              <div><span style={{ color: "#56d364" }}>✓ </span><span style={{ color: dim }}>tokens: </span><span style={{ color: "#a5d6ff" }}>847 in / 312 out</span></div>
+              <div><span style={{ color: "#56d364" }}>✓ </span><span style={{ color: dim }}>coût: </span><span style={{ color: "#a5d6ff" }}>€0.0043 imputé</span></div>
+              <div><span style={{ color: "#56d364" }}>✓ </span><span style={{ color: dim }}>latence totale: </span><span style={{ color: "#a5d6ff" }}>38ms ✨</span></div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* ── TRUST BAR ── */}
+      <div style={{ position: "relative", zIndex: 1, padding: "1.75rem 1.5rem", borderTop: `1px solid ${border}`, borderBottom: `1px solid ${border}`, background: "rgba(255,255,255,.015)" }}>
+        <div style={{ maxWidth: 1200, margin: "0 auto", display: "flex", alignItems: "center", gap: "2.5rem", flexWrap: "wrap", justifyContent: "center" }}>
+          <span style={{ fontSize: ".72rem", color: dim, fontWeight: 600, textTransform: "uppercase", letterSpacing: ".08em" }}>Compatible avec</span>
+          {["OpenAI", "Anthropic", "Azure OpenAI", "Mistral AI", "Ollama (on-premise)"].map((p) => (
+            <span key={p} style={{ color: dim, fontSize: ".82rem", fontWeight: 600, opacity: 0.6 }}>{p}</span>
+          ))}
+        </div>
+      </div>
+
+      {/* ── PROBLEM ── */}
+      <section id="probleme" style={{ padding: "6rem 1.5rem", position: "relative", zIndex: 1 }}>
+        <div style={{ maxWidth: 1200, margin: "0 auto" }}>
+          <Label>Le problème</Label>
+          <h2 style={{ fontSize: "clamp(1.75rem,3.5vw,2.6rem)", fontWeight: 700, lineHeight: 1.2, letterSpacing: "-0.025em" }}>
+            Vos équipes utilisent l'IA.<br />Vous n'en savez rien.
+          </h2>
+          <p style={{ marginTop: "1rem", maxWidth: 560, lineHeight: 1.7, color: muted }}>
+            ChatGPT, Claude, Copilot — vos collaborateurs contournent les politiques IT. Résultat : données sensibles exposées, coûts incontrôlés, conformité compromise.
+          </p>
+          <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: "1.5rem", marginTop: "3rem" }}>
+            {problems.map((p) => (
+              <div
+                key={p.title}
+                style={{
+                  background: "rgba(239,68,68,.05)",
+                  border: "1px solid rgba(239,68,68,.15)",
+                  borderRadius: 20,
+                  padding: "2rem",
+                }}
+              >
+                <div style={{ fontSize: "1.4rem", marginBottom: "1.25rem" }}>{p.icon}</div>
+                <h3 style={{ fontWeight: 600, marginBottom: ".5rem" }}>{p.title}</h3>
+                <p style={{ color: muted, fontSize: ".875rem", lineHeight: 1.65 }}>{p.body}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ── FEATURES ── */}
+      <section id="fonctionnalites" style={{ padding: "6rem 1.5rem", borderTop: `1px solid ${border}`, position: "relative", zIndex: 1 }}>
+        <div style={{ maxWidth: 1200, margin: "0 auto" }}>
+          <Label>La solution</Label>
+          <h2 style={{ fontSize: "clamp(1.75rem,3.5vw,2.6rem)", fontWeight: 700, lineHeight: 1.2, letterSpacing: "-0.025em" }}>
+            Un proxy intelligent entre<br />vos équipes et les LLMs
+          </h2>
+          <p style={{ marginTop: "1rem", maxWidth: 560, lineHeight: 1.7, color: muted }}>
+            Veylant se déploie en 15 minutes sans modifier votre code existant. Il intercepte chaque requête et applique vos politiques en temps réel.
+          </p>
+          <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: "1.5rem", marginTop: "3rem" }}>
+            {features.map((f) => (
+              <div
+                key={f.title}
+                style={{
+                  background: card,
+                  border: `1px solid ${border}`,
+                  borderRadius: 20,
+                  padding: "2rem",
+                  transition: "all .3s",
+                }}
+              >
+                <div
+                  style={{
+                    width: 46,
+                    height: 46,
+                    background: "rgba(79,70,229,.15)",
+                    borderRadius: 11,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    fontSize: "1.3rem",
+                    marginBottom: "1.25rem",
+                  }}
+                >
+                  {f.icon}
+                </div>
+                <h3 style={{ fontWeight: 600, marginBottom: ".45rem" }}>{f.title}</h3>
+                <p style={{ color: muted, fontSize: ".875rem", lineHeight: 1.65 }}>{f.body}</p>
+                <span
+                  style={{
+                    display: "inline-block",
+                    marginTop: ".9rem",
+                    fontSize: ".72rem",
+                    fontWeight: 700,
+                    color: brandLight,
+                    background: "rgba(79,70,229,.15)",
+                    padding: ".2rem .65rem",
+                    borderRadius: "100px",
+                  }}
+                >
+                  {f.badge}
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ── HOW IT WORKS ── */}
+      <section style={{ padding: "6rem 1.5rem", background: "rgba(79,70,229,.03)", borderTop: `1px solid ${border}`, borderBottom: `1px solid ${border}`, position: "relative", zIndex: 1 }}>
+        <div style={{ maxWidth: 1200, margin: "0 auto" }}>
+          <Label>Démarrage en 15 minutes</Label>
+          <h2 style={{ fontSize: "clamp(1.75rem,3.5vw,2.6rem)", fontWeight: 700, lineHeight: 1.2, letterSpacing: "-0.025em", textAlign: "center" }}>
+            Trois étapes vers la conformité
+          </h2>
+          <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: "2rem", marginTop: "4rem" }}>
+            {[
+              {
+                n: 1,
+                title: "Pointez votre endpoint",
+                body: "Remplacez l'URL OpenAI par votre instance Veylant. Zéro modification de code — compatible avec tout SDK OpenAI existant.",
+                code: (
+                  <>
+                    <div style={{ color: "#6e7681" }}># Avant</div>
+                    <div>OPENAI_BASE_URL=<span style={{ color: "#f85149" }}>api.openai.com</span></div>
+                    <br />
+                    <div style={{ color: "#6e7681" }}># Après</div>
+                    <div>OPENAI_BASE_URL=<span style={{ color: "#56d364" }}>ai.votre-entreprise.com</span></div>
+                  </>
+                ),
+              },
+              {
+                n: 2,
+                title: "Configurez vos politiques",
+                body: "Via l'API admin ou l'interface React : règles de routage, RBAC, budgets par département, seuils d'alerte PII.",
+                code: (
+                  <>
+                    <div style={{ color: "#6e7681" }}># Règle de routage</div>
+                    <div>department == <span style={{ color: "#56d364" }}>"finance"</span></div>
+                    <div>&nbsp;&nbsp;→ provider: <span style={{ color: brandLight }}>azure</span></div>
+                    <div>&nbsp;&nbsp;→ model: <span style={{ color: brandLight }}>gpt-4o</span></div>
+                  </>
+                ),
+              },
+              {
+                n: 3,
+                title: "Observez et gouvernez",
+                body: "Tableau de bord temps réel, alertes Prometheus/PagerDuty, logs d'audit exportables pour vos audits RGPD.",
+                code: (
+                  <>
+                    <div style={{ color: "#6e7681" }}># Dashboard SLO</div>
+                    <div>✓ SLO <span style={{ color: "#56d364" }}>99.5 %</span> respecté</div>
+                    <div>✓ <span style={{ color: "#56d364" }}>0</span> fuite PII ce mois</div>
+                    <div>✓ Budget: <span style={{ color: "#56d364" }}>847 / 1200 €</span></div>
+                  </>
+                ),
+              },
+            ].map((step) => (
+              <div key={step.n} style={{ textAlign: "center" }}>
+                <div
+                  style={{
+                    width: 54,
+                    height: 54,
+                    background: `linear-gradient(135deg, ${brand}, ${accent})`,
+                    borderRadius: "50%",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    fontSize: "1.2rem",
+                    fontWeight: 800,
+                    color: "#fff",
+                    margin: "0 auto 1.5rem",
+                    boxShadow: `0 0 0 6px rgba(79,70,229,.15)`,
+                  }}
+                >
+                  {step.n}
+                </div>
+                <h3 style={{ fontWeight: 600, marginBottom: ".45rem" }}>{step.title}</h3>
+                <p style={{ color: muted, fontSize: ".875rem", lineHeight: 1.65 }}>{step.body}</p>
+                <div
+                  style={{
+                    marginTop: "1rem",
+                    background: "#0d1117",
+                    border: `1px solid ${border}`,
+                    borderRadius: 8,
+                    padding: ".75rem 1rem",
+                    fontFamily: "monospace",
+                    fontSize: ".7rem",
+                    color: muted,
+                    textAlign: "left",
+                    lineHeight: 1.75,
+                  }}
+                >
+                  {step.code}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ── SECURITY ── */}
+      <section id="securite" style={{ padding: "6rem 1.5rem", borderTop: `1px solid ${border}`, position: "relative", zIndex: 1 }}>
+        <div style={{ maxWidth: 1200, margin: "0 auto" }}>
+          <Label>Sécurité</Label>
+          <h2 style={{ fontSize: "clamp(1.75rem,3.5vw,2.6rem)", fontWeight: 700, lineHeight: 1.2, letterSpacing: "-0.025em" }}>
+            Conçu pour les équipes<br />sécurité les plus exigeantes
+          </h2>
+          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "3rem", alignItems: "center", marginTop: "3rem" }}>
+            {/* Checks */}
+            <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
+              {[
+                { icon: "🔐", title: "Zero Trust & mTLS", body: "Communication inter-services chiffrée via mTLS. TLS 1.3 en externe. Aucun trafic en clair, jamais." },
+                { icon: "🔑", title: "Chiffrement bout-en-bout", body: "Prompts chiffrés AES-256-GCM au repos. Clés API en SHA-256. Rotation 90 jours via HashiCorp Vault." },
+                { icon: "✅", title: "Pentest réussi — 2026", body: "0 vulnérabilité critique, 0 high. Semgrep SAST + Trivy image scanning + OWASP ZAP DAST en CI/CD." },
+                { icon: "📝", title: "Audit de l'audit", body: "Chaque accès aux logs d'audit est lui-même loggué. Traçabilité complète et inviolable." },
+              ].map((c) => (
+                <div
+                  key={c.title}
+                  style={{ display: "flex", alignItems: "flex-start", gap: "1rem", padding: "1.25rem", background: card, border: `1px solid ${border}`, borderRadius: 12 }}
+                >
+                  <div style={{ width: 36, height: 36, background: "rgba(16,185,129,.1)", borderRadius: 8, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, fontSize: ".95rem" }}>
+                    {c.icon}
+                  </div>
+                  <div>
+                    <h4 style={{ fontWeight: 600, fontSize: ".875rem", marginBottom: ".2rem" }}>{c.title}</h4>
+                    <p style={{ fontSize: ".8rem", color: muted, lineHeight: 1.55 }}>{c.body}</p>
+                  </div>
+                </div>
+              ))}
+            </div>
+            {/* Compliance badges */}
+            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "1rem" }}>
+              {[
+                { ico: "🇪🇺", title: "RGPD natif", body: "Registre Art. 30 automatique. Notification CNIL prête sous 72h." },
+                { ico: "⚖️", title: "EU AI Act", body: "Classification des risques, documentation système requise." },
+                { ico: "🏛️", title: "NIS2 ready", body: "Logs immuables, alertes PagerDuty, SLO 99,5 %." },
+                { ico: "🔒", title: "ISO 27001", body: "Architecture Zero Trust, RBAC, gestion des secrets." },
+              ].map((b) => (
+                <div
+                  key={b.title}
+                  style={{ background: card, border: `1px solid ${border}`, borderRadius: 20, padding: "1.5rem", textAlign: "center" }}
+                >
+                  <div style={{ fontSize: "1.9rem", marginBottom: ".75rem" }}>{b.ico}</div>
+                  <h4 style={{ fontWeight: 700, fontSize: ".875rem", marginBottom: ".2rem" }}>{b.title}</h4>
+                  <p style={{ fontSize: ".75rem", color: muted }}>{b.body}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* ── PERSONAS ── */}
+      <section id="personas" style={{ padding: "6rem 1.5rem", borderTop: `1px solid ${border}`, position: "relative", zIndex: 1 }}>
+        <div style={{ maxWidth: 1200, margin: "0 auto" }}>
+          <Label>Pour qui</Label>
+          <h2 style={{ fontSize: "clamp(1.75rem,3.5vw,2.6rem)", fontWeight: 700, lineHeight: 1.2, letterSpacing: "-0.025em" }}>
+            Un outil, trois interlocuteurs
+          </h2>
+          <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: "1.5rem", marginTop: "3rem" }}>
+            {personas.map((p) => (
+              <div key={p.role} style={{ background: card, border: `1px solid ${border}`, borderRadius: 20, padding: "2rem" }}>
+                <div style={{ fontSize: ".7rem", fontWeight: 800, textTransform: "uppercase", letterSpacing: ".12em", color: brandLight, marginBottom: ".2rem" }}>
+                  {p.role}
+                </div>
+                <div style={{ fontSize: "1.05rem", fontWeight: 700, marginBottom: "1.1rem" }}>{p.title}</div>
+                <ul style={{ listStyle: "none", display: "flex", flexDirection: "column", gap: ".55rem" }}>
+                  {p.items.map((item) => (
+                    <li key={item} style={{ fontSize: ".84rem", color: muted, display: "flex", gap: ".5rem", alignItems: "flex-start" }}>
+                      <span style={{ color: brandLight, flexShrink: 0 }}>→</span>
+                      {item}
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ── CTA ── */}
+      <section
+        id="contact"
+        style={{
+          padding: "6rem 1.5rem",
+          textAlign: "center",
+          background: "radial-gradient(ellipse at center, rgba(79,70,229,.14) 0%, transparent 65%)",
+          position: "relative",
+          zIndex: 1,
+        }}
+      >
+        <div style={{ maxWidth: 1200, margin: "0 auto" }}>
+          <Label>Commencer</Label>
+          <h2 style={{ fontSize: "clamp(1.75rem,3.5vw,2.6rem)", fontWeight: 700, lineHeight: 1.2, letterSpacing: "-0.025em", marginBottom: "1rem" }}>
+            Prêt à reprendre le contrôle<br />de votre IA d'entreprise ?
+          </h2>
+          <p style={{ color: muted, fontSize: "1.05rem", marginBottom: "2.5rem" }}>
+            Démo personnalisée · Déploiement en 15 minutes · Support dédié
+          </p>
+          <div style={{ display: "flex", gap: "1rem", justifyContent: "center", flexWrap: "wrap" }}>
+            <BtnPrimary href="mailto:demo@veylant.io">
+              <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><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-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+              Demander une démo
+            </BtnPrimary>
+            <BtnOutline to="/login">
+              Se connecter au dashboard
+            </BtnOutline>
+            <BtnOutline href="http://localhost:8090/docs">
+              <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
+              Documentation
+            </BtnOutline>
+          </div>
+        </div>
+      </section>
+
+      {/* ── FOOTER ── */}
+      <footer style={{ position: "relative", zIndex: 1, borderTop: `1px solid ${border}`, padding: "2.5rem 1.5rem" }}>
+        <div
+          style={{
+            maxWidth: 1200,
+            margin: "0 auto",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            flexWrap: "wrap",
+            gap: "1rem",
+          }}
+        >
+          <Link to="/" style={{ fontSize: "1.25rem", fontWeight: 800, color: "#f1f5f9", textDecoration: "none" }}>
+            Veylant<span style={{ color: brandLight }}> IA</span>
+          </Link>
+          <div style={{ display: "flex", gap: "1.5rem" }}>
+            {[
+              { label: "Documentation", href: "http://localhost:8090/docs" },
+              { label: "Playground", href: "http://localhost:8090/playground" },
+              { label: "Contact", href: "mailto:demo@veylant.io" },
+            ].map((l) => (
+              <a key={l.label} href={l.href} style={{ fontSize: ".84rem", color: dim, textDecoration: "none" }}>
+                {l.label}
+              </a>
+            ))}
+          </div>
+          <span style={{ fontSize: ".8rem", color: dim }}>© 2026 Veylant. Conçu pour l'entreprise européenne.</span>
+        </div>
+      </footer>
+    </div>
+  );
+}
--- a/web/src/pages/LoginPage.tsx
+++ b/web/src/pages/LoginPage.tsx
@ -10,7 +10,7 @@ export function LoginPage() {
  const { login, isAuthenticated, isLoading } = useAuth();
  const navigate = useNavigate();
  const location = useLocation();
-  const from = (location.state as { from?: { pathname: string } })?.from?.pathname ?? "/";
+  const from = (location.state as { from?: { pathname: string } })?.from?.pathname ?? "/dashboard";

  useEffect(() => {
    if (isAuthenticated) {
--- a/web/src/pages/NotFoundPage.tsx
+++ b/web/src/pages/NotFoundPage.tsx
@ -10,7 +10,7 @@ export function NotFoundPage() {
        La page que vous cherchez n&apos;existe pas.
      </p>
      <Button asChild className="mt-6">
-        <Link to="/">Retour à l&apos;accueil</Link>
+        <Link to="/dashboard">Retour au dashboard</Link>
      </Button>
    </div>
  );
--- a/web/src/router.tsx
+++ b/web/src/router.tsx
@ -1,6 +1,7 @@
 import { createBrowserRouter } from "react-router-dom";
 import { AppLayout } from "@/components/AppLayout";
 import { ProtectedRoute } from "@/components/ProtectedRoute";
+import { LandingPage } from "@/pages/LandingPage";
 import { LoginPage } from "@/pages/LoginPage";
 import { OverviewPage } from "@/pages/OverviewPage";
 import { PoliciesPage } from "@/pages/PoliciesPage";
@ -15,6 +16,10 @@ import { CompliancePage } from "@/pages/CompliancePage";
 import { NotFoundPage } from "@/pages/NotFoundPage";

 export const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <LandingPage />,
+  },
  {
    path: "/login",
    element: <LoginPage />,
@ -25,7 +30,7 @@ export const router = createBrowserRouter([
    element: <LoginPage />,
  },
  {
-    path: "/",
+    path: "/dashboard",
    element: (
      <ProtectedRoute>
        <AppLayout />