%%{init: {'theme': 'base', 'flowchart': {'nodeSpacing': 40, 'rankSpacing': 50}}}%%
flowchart TB
    subgraph infra ["Infrastructure - Docker / Traefik"]
        traefik["Traefik<br/>Reverse Proxy<br/>SSL termination"]
        compose["docker-compose.yml<br/>infra/"]
    end

    subgraph frontend ["Frontend - apps/portal"]
        nextjs["Next.js 15<br/>React 19 + TypeScript"]
        r3f["React Three Fiber<br/>Scenes 3D"]
        tailwind["Tailwind CSS<br/>+ Radix + shadcn/ui"]
        zustand["Zustand<br/>State management"]
        tanstack["TanStack Query<br/>Data fetching"]
        intl["next-intl<br/>i18n"]
    end

    subgraph backend ["Backend - services/event-hub"]
        fastify["Fastify<br/>API REST + tRPC"]
        socketio["Socket.IO<br/>Temps reel / WebSocket"]
        zod["Zod<br/>Validation schemas"]
    end

    subgraph sdk ["Packages - packages/widget-sdk"]
        widget_sdk["Widget SDK<br/>Embeds + iframes sandboxes"]
        events["Systeme d evenements<br/>postMessage"]
    end

    subgraph identity ["Identite - IAM"]
        keycloak["Keycloak<br/>npagnun:8080<br/>OIDC / JWT"]
    end

    subgraph data ["Donnees (prevu)"]
        postgres["PostgreSQL<br/>Prisma ORM"]
        redis["Redis<br/>Cache + sessions"]
    end

    subgraph monitoring ["Observabilite (prevu)"]
        otel["OpenTelemetry"]
        sentry["Sentry<br/>Error tracking"]
        posthog["PostHog<br/>Analytics"]
    end

    subgraph tooling ["Tooling"]
        turbo["TurboRepo<br/>Monorepo"]
        pnpm["PNPM<br/>Package manager"]
    end

    traefik --> nextjs
    traefik --> fastify
    nextjs --> zustand
    nextjs --> tanstack
    nextjs --> r3f
    nextjs --> tailwind
    nextjs --> intl
    tanstack -->|"API calls"| fastify
    fastify --> socketio
    fastify --> zod
    fastify -->|"Prisma"| postgres
    fastify --> redis
    nextjs -->|"OIDC"| keycloak
    fastify -->|"Token verify"| keycloak
    widget_sdk --> events
    widget_sdk -->|"iframe"| nextjs
    turbo --> frontend
    turbo --> backend
    turbo --> sdk

    classDef infraStyle fill:#2a3a4a,stroke:#6a8aaa,color:#b0d0e8
    classDef feStyle fill:#1e3a5f,stroke:#4a90d9,color:#a8d0f0
    classDef beStyle fill:#1e4a2e,stroke:#4a9a6a,color:#a8e0c0
    classDef sdkStyle fill:#3a1e5f,stroke:#8a6ad9,color:#c8b0f0
    classDef iamStyle fill:#4a1e3a,stroke:#d94a8a,color:#f0a8c8
    classDef storStyle fill:#4a3a1e,stroke:#d9a84a,color:#f0d8a8
    classDef dormStyle fill:#2a2a2a,stroke:#666,color:#999
    classDef toolStyle fill:#3a3a1e,stroke:#9a9a4a,color:#e0e0a8

    class traefik,compose infraStyle
    class nextjs,r3f,tailwind,zustand,tanstack,intl feStyle
    class fastify,socketio,zod beStyle
    class widget_sdk,events sdkStyle
    class keycloak iamStyle
    class postgres,redis storStyle
    class otel,sentry,posthog dormStyle
    class turbo,pnpm toolStyle

    style data stroke-dasharray: 5 5
    style monitoring stroke-dasharray: 5 5