# Templates de Documentation SmartStack

> **Objectif:** Documentation lisible par un metier, pas seulement par des developpeurs.
> Chaque module doit repondre a: "Qu'est-ce que ca m'apporte ?"

---

## STRUCTURE OBLIGATOIRE (Type: user)

Chaque documentation de module DOIT inclure ces sections dans cet ordre:

| # | Section | Objectif | Public cible |
|---|---------|----------|--------------|
| 1 | **Valeur Metier** | Pourquoi cette fonctionnalite existe (probleme + solution) | Decideurs, Managers |
| 2 | **Acces** | Navigation breadcrumb + URL | Utilisateurs |
| 3 | **Apercu de l'interface** | **Mock UI annote** reproduisant la page reelle | Utilisateurs |
| 4 | **Formulaire de creation** | **Mock UI annote** du formulaire de creation | Utilisateurs |
| 5 | **Vue detail** | **Mock UI annote** de la vue detail/edition | Utilisateurs |
| 6 | **Cas d'usage** | Exemples concrets avec personas | Utilisateurs finaux |
| 7 | **Fonctionnalites** | Liste detaillee des capacites avec exemples | Utilisateurs |
| 8 | **FAQ** | Questions non-techniques | Tous |
| 9 | **Reference technique** | Permissions, API, regles metier (collapsible) | Admins |

> **SUPPRIME:** Les sections "Benefices" et "Avant/Apres" ne sont plus incluses.
> Ce n'est pas un document de vente, mais une documentation utilisateur.

---

## REGLE FONDAMENTALE: Lire la vraie page AVANT de generer

> **OBLIGATOIRE:** Avant de generer le Mock UI, lire le composant TSX de la vraie page
> (ex: `TenantsTemplatePage.tsx`, `UsersPage.tsx`). Le Mock UI doit reproduire
> fidelement l'interface reelle, PAS une interface generique avec des KPI/tables.
>
> - Si la vraie page affiche 2 cartes template → le Mock UI montre 2 cartes template
> - Si la vraie page est un tableau de gestion → le Mock UI montre un tableau
> - Si la vraie page est un Kanban → le Mock UI montre un Kanban

---

## Mock UI TSX Approach (TYPE: user — PRIMARY)

> **Principe:** Pour les docs de type `user`, generer un **composant TSX autonome** (~400-600 lignes)
> avec des Mock UI **annotes** qui reproduisent fidelement les vraies pages
> de l'application. Chaque Mock UI est suivi d'annotations explicatives.
>
> **IMPORTANT:** NE PAS utiliser DocRenderer pour le type `user`. Generer un TSX standalone.

### Fichiers a generer par module

**1. Page TSX** (`index.tsx`, ~400-600 lignes) : Composant autonome avec Mock UI annotes.

**2. i18n dans les 4 langues** : FR (source), EN, DE, IT. Tous les fichiers sont generes.

### i18n JSON : Structure PLATE (pas de cle racine)

> **IMPORTANT:** Pour les pages standalone (type `user`), le JSON i18n doit etre **PLAT** (pas de cle racine).
> `useTranslation('docsAdministrationTenantsTemplate')` + `t('title')` resout en
> `docsAdministrationTenantsTemplate.title`. Si le JSON a une cle racine, ca devient
> `docsAdministrationTenantsTemplate.docsAdministrationTenantsTemplate.title` → ERREUR.

```json
// CORRECT pour standalone (type user) - JSON PLAT :
{
  "title": "Templates de Tenant",
  "subtitle": "Description...",
  "sections": { "businessValue": "Pourquoi ce module ?" }
}

// INCORRECT pour standalone :
{
  "docsAdministrationTenantsTemplate": {
    "title": "Templates de Tenant"
  }
}

// CORRECT pour DocRenderer (type developer/database/testing) - AVEC cle racine :
{
  "docsAdministrationUsers": {
    "overview": { "objective": "..." }
  }
}
```

---

## DocRenderer Approach (TYPE: developer|database|testing)

> **Usage:** Pour les docs `developer`, `database`, et `testing` uniquement.
> Genere un fichier de DONNEES (`doc-data.ts`, ~50 lignes) + un wrapper minimal.
> Le rendu est assure par le composant partage `DocRenderer` dans `web/.../components/docs/`.
> Voir [data-schema.md](data-schema.md) pour le mapping complet.

### Fichiers a generer par module

**1. Data file** (`doc-data.ts`) : Voir [data-schema.md](data-schema.md) pour le mapping complet.

**2. Page wrapper** (`index.tsx`, ~10 lignes) :
```tsx
import { DocRenderer } from '@/components/docs';
import { docData } from './doc-data';

export default function {ModuleName}DocPage() {
  return <DocRenderer data={docData} backPath="/docs/business/{app}" />;
}
```

---

## Composant Helper: Annotation

> **OBLIGATOIRE** pour chaque section Mock UI. Un Mock sans explication ne sert a rien.

```tsx
import { Info } from 'lucide-react';

function Annotation({ text }: { text: string }) {
  return (
    <div className="flex items-start gap-2 p-2.5 rounded-lg bg-blue-500/5 border border-blue-500/15 text-sm text-blue-700 dark:text-blue-400">
      <Info className="w-4 h-4 mt-0.5 flex-shrink-0" />
      <span>{text}</span>
    </div>
  );
}
```

**Utilisation:** Apres chaque bloc Mock UI, ajouter un `<div className="space-y-2 mt-4">` contenant
les `<Annotation text={t('section.annotations.key')} />` pour chaque element visuel.

### Exemple d'annotation apres un Mock UI

```tsx
{/* Mock UI card ici */}
<div className="card p-6">...</div>

{/* Annotations explicatives */}
<div className="space-y-2 mt-4">
  <Annotation text={t('interface.annotations.icon')} />
  <Annotation text={t('interface.annotations.title')} />
  <Annotation text={t('interface.annotations.code')} />
  <Annotation text={t('interface.annotations.defaultBadge')} />
  <Annotation text={t('interface.annotations.cta')} />
</div>
```

---

## Template TSX Mock UI (TYPE: user)

```tsx
// web/smartstack-web/src/pages/docs/business/{application}/{module}/index.tsx

import { Link } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import {
  ArrowLeft,
  Info,
  Target,
  Lightbulb,
  Users,
  Zap,
  ChevronDown,
  // + icones specifiques au module
} from 'lucide-react';

// ═══════════════════════════════════════════════════
// Helper: Annotation (obligatoire pour chaque Mock UI)
// ═══════════════════════════════════════════════════
function Annotation({ text }: { text: string }) {
  return (
    <div className="flex items-start gap-2 p-2.5 rounded-lg bg-blue-500/5 border border-blue-500/15 text-sm text-blue-700 dark:text-blue-400">
      <Info className="w-4 h-4 mt-0.5 flex-shrink-0" />
      <span>{text}</span>
    </div>
  );
}

// ═══════════════════════════════════════════════════
// Data: API Endpoints (extraits du vrai controller)
// ═══════════════════════════════════════════════════
const apiEndpoints = [
  // Remplir avec les vrais endpoints du controller
  { method: 'GET', path: '/api/...', handler: 'GetAll', permission: '...' },
];

// ═══════════════════════════════════════════════════
// Data: Business Rules (extraites du domain/tests)
// ═══════════════════════════════════════════════════
const businessRules = [
  // Remplir avec les vraies regles metier
  { id: 'BR-001', rule: '...' },
];

export default function {Module}DocPage() {
  const { t } = useTranslation('docsAdministration{Module}');

  return (
    <div className="space-y-8 max-w-5xl mx-auto pb-12">
      {/* BREADCRUMB + BACK */}
      <div>
        <Link to="/docs/business/administration/tenants"
          className="inline-flex items-center gap-1.5 text-sm text-[var(--text-secondary)] hover:text-[var(--color-primary-600)] mb-4">
          <ArrowLeft className="w-4 h-4" />
          {t('nav.backToParent')}
        </Link>
      </div>

      {/* HEADER */}
      <div>
        <h1 className="text-3xl font-bold mb-4 flex items-center gap-3">
          <ModuleIcon className="w-8 h-8 text-[var(--color-primary-600)]" />
          {t('title')}
        </h1>
        <p className="text-xl text-[var(--color-primary-600)] font-medium mb-2">
          {t('valueProposition')}
        </p>
        <p className="text-lg text-[var(--text-secondary)]">
          {t('subtitle')}
        </p>
      </div>

      {/* ══════════════════════════════════════════════════════════════════ */}
      {/* SECTION 1: VALEUR METIER - Pourquoi ca existe ?                   */}
      {/* ══════════════════════════════════════════════════════════════════ */}
      <section id="valeur" className="scroll-mt-4">
        <h2 className="text-2xl font-bold mb-4 flex items-center gap-2">
          <span className="w-8 h-8 rounded-full bg-[var(--color-primary-600)] text-white flex items-center justify-center text-sm">1</span>
          {t('sections.businessValue')}
        </h2>

        <div className="card p-6">
          <div className="mb-6">
            <h3 className="font-semibold mb-3 flex items-center gap-2">
              <Target className="w-5 h-5 text-red-500" />
              {t('sections.problem')}
            </h3>
            <p className="text-[var(--text-secondary)]">{t('problem')}</p>
          </div>

          <div className="p-4 rounded-lg bg-green-500/10 border border-green-500/20">
            <h3 className="font-semibold mb-2 flex items-center gap-2 text-green-700">
              <Lightbulb className="w-5 h-5" />
              {t('sections.solution')}
            </h3>
            <p className="text-[var(--text-secondary)]">{t('solution')}</p>
          </div>
        </div>
      </section>

      {/* ══════════════════════════════════════════════════════════════════ */}
      {/* SECTION 2: ACCES - Navigation                                     */}
      {/* ══════════════════════════════════════════════════════════════════ */}
      <section id="acces" className="scroll-mt-4">
        <h2 className="text-2xl font-bold mb-4 flex items-center gap-2">
          <span className="w-8 h-8 rounded-full bg-[var(--color-primary-600)] text-white flex items-center justify-center text-sm">2</span>
          {t('sections.access')}
        </h2>
        <div className="card p-6">
          {/* Breadcrumb de navigation et URL */}
          <div className="flex items-center gap-2 text-sm">
            <span>Administration</span> <span>›</span>
            <span className="font-semibold">{t('title')}</span>
          </div>
          <code className="mt-2 block text-xs text-[var(--text-secondary)]">
            /administration/{module}
          </code>
        </div>
      </section>

      {/* ══════════════════════════════════════════════════════════════════ */}
      {/* SECTION 3: APERCU DE L'INTERFACE — Mock UI ANNOTE                 */}
      {/* ══════════════════════════════════════════════════════════════════ */}
      {/*                                                                    */}
      {/* IMPORTANT: Le Mock UI ci-dessous doit reproduire fidelement       */}
      {/* la VRAIE page TSX du module. Lire le composant source d'abord.    */}
      {/*                                                                    */}
      {/* Exemples:                                                          */}
      {/*   - TenantsTemplatePage → 2 cartes template (Personal + Business)  */}
      {/*   - UsersPage → tableau de gestion avec filtres                    */}
      {/*   - TicketsPage → Kanban board avec colonnes par statut            */}
      {/* ══════════════════════════════════════════════════════════════════ */}
      <section id="interface" className="scroll-mt-4">
        <h2 className="text-2xl font-bold mb-4 flex items-center gap-2">
          <span className="w-8 h-8 rounded-full bg-[var(--color-primary-600)] text-white flex items-center justify-center text-sm">3</span>
          {t('sections.interface')}
        </h2>

        {/* Mock UI reproduisant la vraie page */}
        <div className="card p-6">
          {/* ... MOCK UI FIDELE A LA VRAIE PAGE ... */}
        </div>

        {/* ANNOTATIONS OBLIGATOIRES apres le Mock UI */}
        <div className="space-y-2 mt-4">
          <Annotation text={t('interface.annotations.element1')} />
          <Annotation text={t('interface.annotations.element2')} />
          {/* ... une annotation par element visuel important ... */}
        </div>
      </section>

      {/* ══════════════════════════════════════════════════════════════════ */}
      {/* SECTION 4: FORMULAIRE DE CREATION — Mock UI ANNOTE                */}
      {/* ══════════════════════════════════════════════════════════════════ */}
      <section id="form" className="scroll-mt-4">
        <h2 className="text-2xl font-bold mb-4 flex items-center gap-2">
          <span className="w-8 h-8 rounded-full bg-[var(--color-primary-600)] text-white flex items-center justify-center text-sm">4</span>
          {t('sections.createForm')}
        </h2>

        {/* Paragraphe d'introduction */}
        <p className="text-[var(--text-secondary)] mb-4">{t('form.desc')}</p>

        {/* Mock UI du formulaire */}
        <div className="border border-[var(--border-color)] rounded-lg p-6 bg-[var(--bg-secondary)]">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            {/* Champs de formulaire adaptes au module */}
          </div>
          <div className="flex items-center gap-3 mt-6 pt-6 border-t border-[var(--border-color)]">
            <button className="px-4 py-2 bg-[var(--color-primary-600)] text-white rounded-lg">
              {t('form.create')}
            </button>
            <button className="px-4 py-2 border border-[var(--border-color)] rounded-lg">
              {t('form.cancel')}
            </button>
          </div>
        </div>

        {/* ANNOTATIONS OBLIGATOIRES apres le formulaire */}
        <div className="space-y-2 mt-4">
          <Annotation text={t('form.annotations.field1')} />
          <Annotation text={t('form.annotations.field2')} />
          <Annotation text={t('form.annotations.actions')} />
        </div>
      </section>

      {/* ══════════════════════════════════════════════════════════════════ */}
      {/* SECTION 5: VUE DETAIL — Mock UI ANNOTE                            */}
      {/* ══════════════════════════════════════════════════════════════════ */}
      <section id="detail" className="scroll-mt-4">
        <h2 className="text-2xl font-bold mb-4 flex items-center gap-2">
          <span className="w-8 h-8 rounded-full bg-[var(--color-primary-600)] text-white flex items-center justify-center text-sm">5</span>
          {t('sections.detailView')}
        </h2>

        {/* Paragraphe d'introduction */}
        <p className="text-[var(--text-secondary)] mb-4">{t('detail.desc')}</p>

        {/* Mock UI de la vue detail */}
        <div className="card p-6">
          {/* ... MOCK UI FIDELE A LA VRAIE VUE DETAIL ... */}
        </div>

        {/* ANNOTATIONS OBLIGATOIRES */}
        <div className="space-y-2 mt-4">
          <Annotation text={t('detail.annotations.header')} />
          <Annotation text={t('detail.annotations.tabs')} />
          <Annotation text={t('detail.annotations.stats')} />
        </div>
      </section>

      {/* ══════════════════════════════════════════════════════════════════ */}
      {/* SECTION 6: CAS D'USAGE - Exemples concrets                        */}
      {/* ══════════════════════════════════════════════════════════════════ */}
      <section id="cas-usage" className="scroll-mt-4">
        <h2 className="text-2xl font-bold mb-4 flex items-center gap-2">
          <span className="w-8 h-8 rounded-full bg-[var(--color-primary-600)] text-white flex items-center justify-center text-sm">6</span>
          {t('sections.useCases')}
        </h2>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          {[1, 2, 3].map((i) => (
            <div key={i} className="card p-6">
              <div className="flex items-center gap-3 mb-4">
                <div className="w-10 h-10 rounded-full bg-blue-500/10 flex items-center justify-center">
                  <Users className="w-5 h-5 text-blue-600" />
                </div>
                <div>
                  <div className="font-semibold">{t(`useCases.${i}.persona`)}</div>
                  <div className="text-sm text-[var(--text-secondary)]">{t(`useCases.${i}.role`)}</div>
                </div>
              </div>
              <div className="space-y-3">
                <div className="text-sm">
                  <span className="font-medium text-[var(--text-secondary)]">Situation:</span>
                  <p>{t(`useCases.${i}.situation`)}</p>
                </div>
                <div className="text-sm p-3 rounded-lg bg-green-500/5 border border-green-500/15">
                  <span className="font-medium text-green-600">Avec la fonctionnalite:</span>
                  <p>{t(`useCases.${i}.withFeature`)}</p>
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* ══════════════════════════════════════════════════════════════════ */}
      {/* SECTION 7: FONCTIONNALITES DETAILLEES                             */}
      {/* ══════════════════════════════════════════════════════════════════ */}
      <section id="fonctionnalites" className="scroll-mt-4">
        <h2 className="text-2xl font-bold mb-4 flex items-center gap-2">
          <span className="w-8 h-8 rounded-full bg-[var(--color-primary-600)] text-white flex items-center justify-center text-sm">7</span>
          {t('sections.features')}
        </h2>

        <div className="space-y-4">
          {[1, 2, 3, 4, 5].map((i) => (
            <div key={i} className="card p-6">
              <div className="flex items-start gap-4">
                <div className="w-10 h-10 rounded-lg bg-[var(--color-primary-600)]/10 flex items-center justify-center flex-shrink-0">
                  <Zap className="w-5 h-5 text-[var(--color-primary-600)]" />
                </div>
                <div className="flex-1">
                  <h3 className="font-semibold mb-2">{t(`features.${i}.title`)}</h3>
                  <p className="text-[var(--text-secondary)] mb-3">{t(`features.${i}.description`)}</p>
                  <div className="p-3 rounded-lg bg-[var(--bg-secondary)] text-sm">
                    <span className="font-medium text-[var(--color-primary-600)]">Exemple: </span>
                    {t(`features.${i}.example`)}
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* ══════════════════════════════════════════════════════════════════ */}
      {/* SECTION 8: FAQ                                                    */}
      {/* ══════════════════════════════════════════════════════════════════ */}
      <section id="faq" className="scroll-mt-4">
        <h2 className="text-2xl font-bold mb-4 flex items-center gap-2">
          <span className="w-8 h-8 rounded-full bg-[var(--color-primary-600)] text-white flex items-center justify-center text-sm">8</span>
          {t('sections.faq')}
        </h2>

        <div className="space-y-3">
          {[1, 2, 3, 4, 5].map((i) => (
            <details key={i} className="card group">
              <summary className="p-4 cursor-pointer hover:bg-[var(--bg-secondary)] rounded-lg font-medium flex items-center justify-between">
                {t(`faq.${i}.question`)}
                <ChevronDown className="w-4 h-4 text-[var(--text-secondary)] group-open:rotate-180 transition-transform" />
              </summary>
              <div className="px-4 pb-4 text-sm text-[var(--text-secondary)]">
                {t(`faq.${i}.answer`)}
              </div>
            </details>
          ))}
        </div>
      </section>

      {/* ══════════════════════════════════════════════════════════════════ */}
      {/* SECTION 9: REFERENCE TECHNIQUE (collapsible)                      */}
      {/* ══════════════════════════════════════════════════════════════════ */}
      <section id="reference" className="scroll-mt-4">
        <details className="card">
          <summary className="p-4 cursor-pointer hover:bg-[var(--bg-secondary)] rounded-lg font-semibold flex items-center gap-2">
            <span className="w-8 h-8 rounded-full bg-gray-500/10 text-gray-600 flex items-center justify-center text-sm">9</span>
            {t('sections.technicalRef')}
          </summary>
          <div className="p-6 pt-2 space-y-8">

            {/* Regles metier */}
            <div>
              <h3 className="font-semibold mb-3">{t('techRef.businessRules')}</h3>
              <div className="overflow-x-auto">
                <table className="w-full text-sm">
                  <thead>
                    <tr className="bg-[var(--bg-secondary)]">
                      <th className="text-left py-2 px-3 w-24">ID</th>
                      <th className="text-left py-2 px-3">Regle</th>
                    </tr>
                  </thead>
                  <tbody>
                    {businessRules.map((rule) => (
                      <tr key={rule.id} className="border-b border-[var(--border-color)]">
                        <td className="py-2 px-3 font-mono text-xs">{rule.id}</td>
                        <td className="py-2 px-3">{t(`techRef.rules.${rule.id}`)}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>

            {/* API Endpoints */}
            <div>
              <h3 className="font-semibold mb-3">{t('techRef.apiEndpoints')}</h3>
              <div className="overflow-x-auto">
                <table className="w-full text-sm">
                  <thead>
                    <tr className="bg-[var(--bg-secondary)]">
                      <th className="text-left py-2 px-3">Method</th>
                      <th className="text-left py-2 px-3">Endpoint</th>
                      <th className="text-left py-2 px-3">Handler</th>
                      <th className="text-left py-2 px-3">Permission</th>
                    </tr>
                  </thead>
                  <tbody>
                    {apiEndpoints.map((ep, i) => (
                      <tr key={i} className="border-b border-[var(--border-color)]">
                        <td className="py-2 px-3">
                          <span className={`px-2 py-0.5 rounded text-xs font-medium ${
                            ep.method === 'GET' ? 'bg-blue-500/10 text-blue-600' :
                            ep.method === 'POST' ? 'bg-green-500/10 text-green-600' :
                            ep.method === 'PUT' ? 'bg-orange-500/10 text-orange-600' :
                            ep.method === 'PATCH' ? 'bg-purple-500/10 text-purple-600' :
                            'bg-red-500/10 text-red-600'
                          }`}>{ep.method}</span>
                        </td>
                        <td className="py-2 px-3 font-mono text-xs">{ep.path}</td>
                        <td className="py-2 px-3 text-[var(--text-secondary)]">{ep.handler}</td>
                        <td className="py-2 px-3 font-mono text-xs">{ep.permission}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>

          </div>
        </details>
      </section>
    </div>
  );
}
```

---

## Structure i18n (4 langues obligatoires)

> **IMPORTANT:** Generer les 4 langues: FR (source), EN, DE, IT.
> Chaque fichier i18n est au format **PLAT** (pas de cle racine) pour les pages standalone.

### Fichier: `docs-administration-{module}.json`

```json
{
  "nav": {
    "backToParent": "Retour a {Parent}"
  },
  "title": "Nom du module",
  "valueProposition": "Une phrase percutante resumant la valeur",
  "subtitle": "Description en 1-2 phrases",

  "sections": {
    "businessValue": "Pourquoi ce module ?",
    "problem": "Le probleme",
    "solution": "La solution",
    "access": "Acces",
    "interface": "Apercu de l'interface",
    "createForm": "Formulaire de creation",
    "detailView": "Vue detail",
    "useCases": "Exemples d'utilisation",
    "benefits": "Benefices concrets",
    "beforeAfter": "Avant / Apres",
    "features": "Ce que vous pouvez faire",
    "faq": "Questions frequentes",
    "technicalRef": "Reference technique (administrateurs)"
  },

  "problem": "Description du probleme AVANT cette fonctionnalite",
  "solution": "Comment ce module resout le probleme",

  "access": {
    "navigation": "Navigation"
  },

  "interface": {
    "sectionTitle": "Titre de la sous-section",
    "annotations": {
      "element1": "Explication de l'element visuel 1 du Mock UI",
      "element2": "Explication de l'element visuel 2 du Mock UI"
    }
  },

  "form": {
    "desc": "Ce formulaire permet de creer un nouveau...",
    "fieldLabel1": "Label du champ",
    "create": "Creer",
    "cancel": "Annuler",
    "annotations": {
      "field1": "Explication du champ 1",
      "field2": "Explication du champ 2",
      "actions": "Explication des boutons d'action"
    }
  },

  "detail": {
    "desc": "La vue detail s'ouvre lorsque...",
    "annotations": {
      "header": "Explication de l'en-tete",
      "tabs": "Explication des onglets",
      "stats": "Explication des indicateurs"
    }
  },

  "useCases": {
    "1": {
      "persona": "Sophie",
      "role": "Administratrice plateforme",
      "situation": "Sophie doit...",
      "withFeature": "Elle utilise..."
    }
  },

  "features": {
    "1": {
      "title": "Nom de la fonctionnalite",
      "description": "Explication claire",
      "example": "Exemple concret"
    }
  },

  "faq": {
    "1": {
      "question": "Question non-technique ?",
      "answer": "Reponse claire et concise."
    }
  },

  "techRef": {
    "businessRules": "Regles metier",
    "apiEndpoints": "Points de terminaison API",
    "rules": {
      "BR-001": "Description de la regle metier 1",
      "BR-002": "Description de la regle metier 2"
    }
  }
}
```

---

## Checklist Documentation (TYPE: user)

Avant de valider une documentation de module `user`, verifier:

- [ ] **Standalone TSX** (PAS DocRenderer, PAS doc-data.ts)
- [ ] **Lecture de la vraie page** TSX source AVANT generation du Mock UI
- [ ] **Mock UI Section 3: Interface** reproduisant fidelement la vraie page
- [ ] **Mock UI Section 4: Formulaire** avec champs du vrai formulaire
- [ ] **Mock UI Section 5: Vue detail** avec onglets/stats de la vraie page
- [ ] **Annotations** sur chaque section Mock UI (composant `Annotation`)
- [ ] **Proposition de valeur** claire en 1 phrase
- [ ] **Probleme/Solution** du point de vue utilisateur (pas technique)
- [ ] **2-3 cas d'usage** avec personas nommes
- [ ] **5 fonctionnalites** avec exemples concrets
- [ ] **5 FAQ** non-techniques
- [ ] **Reference technique** collapsible: regles metier + API endpoints reels
- [ ] **Semantic colors** (`var(--success-*)`, `var(--error-*)`, etc.)
- [ ] **i18n** via `useTranslation()` — pas de texte hardcode
- [ ] **i18n 4 langues** : FR, EN, DE, IT (JSON plat, pas de cle racine)
- [ ] **PAS de section "Benefices"** ni "Avant/Apres"

---

## Templates Techniques (inchanges)

Les templates pour `developer`, `database`, et `testing` restent techniques car leur public est developpeur.

(voir le contenu precedent pour ces templates)
