@atlashub/smartstack-cli 3.39.0 → 3.41.0

package/templates/skills/documentation/templates.md

@@ -1,663 +1,662 @@
-# 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/platform/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>Platform</span> <span>›</span>
-            <span>Administration</span> <span>›</span>
-            <span className="font-semibold">{t('title')}</span>
-          </div>
-          <code className="mt-2 block text-xs text-[var(--text-secondary)]">
-            /platform/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)
+# 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)