From 122170c3fd718231cb35b62aa0a30de729232c62 Mon Sep 17 00:00:00 2001
From: r-dev <matthieu@yuno.malio.fr>
Date: Mon, 6 Apr 2026 11:33:08 +0200
Subject: [PATCH] feat(ui) : add documentation page

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/app/pages/doc.vue | 1000 ++++++++++++++++++++++++++++++++++++
 1 file changed, 1000 insertions(+)
 create mode 100644 frontend/app/pages/doc.vue

diff --git a/frontend/app/pages/doc.vue b/frontend/app/pages/doc.vue
new file mode 100644
index 0000000..406d8a5
--- /dev/null
+++ b/frontend/app/pages/doc.vue
@@ -0,0 +1,1000 @@
+<template>
+    <main class="min-h-screen bg-gradient-to-br from-base-200/50 via-base-100 to-base-200/30">
+        <div class="container mx-auto max-w-7xl px-4 py-10">
+            <!-- Mobile TOC toggle -->
+            <div class="lg:hidden mb-6">
+                <button
+                    class="btn btn-outline btn-sm gap-2 w-full justify-between"
+                    @click="mobileMenuOpen = !mobileMenuOpen"
+                >
+                    <span class="flex items-center gap-2">
+                        <IconLucideBookOpen class="w-4 h-4" />
+                        Sommaire
+                    </span>
+                    <IconLucideChevronDown
+                        class="w-4 h-4 transition-transform duration-300"
+                        :class="{ 'rotate-180': mobileMenuOpen }"
+                    />
+                </button>
+                <Transition name="slide">
+                    <nav
+                        v-show="mobileMenuOpen"
+                        class="mt-2 card bg-base-100 border border-base-300 shadow-lg"
+                    >
+                        <ul class="menu menu-sm p-3">
+                            <li v-for="section in sections" :key="section.id">
+                                <a
+                                    :href="`#${section.id}`"
+                                    class="flex items-center gap-2 rounded-lg"
+                                    :class="activeSection === section.id
+                                        ? 'bg-primary text-primary-content font-semibold'
+                                        : 'text-base-content/70 hover:bg-base-200'"
+                                    @click.prevent="scrollTo(section.id)"
+                                >
+                                    <component :is="section.icon" class="w-4 h-4 shrink-0" />
+                                    {{ section.label }}
+                                </a>
+                            </li>
+                        </ul>
+                    </nav>
+                </Transition>
+            </div>
+
+            <div class="flex gap-10">
+                <!-- Sidebar desktop -->
+                <aside class="hidden lg:block w-60 shrink-0">
+                    <nav class="sticky top-20 max-h-[calc(100vh-6rem)] overflow-y-auto">
+                        <p class="text-[10px] font-bold uppercase tracking-[0.2em] text-base-content/30 mb-4 px-3">
+                            Guide
+                        </p>
+                        <ul class="space-y-0.5">
+                            <li v-for="section in sections" :key="section.id">
+                                <a
+                                    :href="`#${section.id}`"
+                                    class="flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm transition-all duration-200"
+                                    :class="activeSection === section.id
+                                        ? 'bg-primary text-primary-content font-semibold shadow-sm'
+                                        : 'text-base-content/60 hover:text-base-content hover:bg-base-200/60'"
+                                    @click.prevent="scrollTo(section.id)"
+                                >
+                                    <component :is="section.icon" class="w-4 h-4 shrink-0" />
+                                    {{ section.label }}
+                                </a>
+                            </li>
+                        </ul>
+                    </nav>
+                </aside>
+
+                <!-- Contenu principal -->
+                <div class="flex-1 min-w-0 space-y-20">
+                    <!-- En-tete -->
+                    <header>
+                        <div class="flex items-center gap-4 mb-3">
+                            <div class="w-14 h-14 rounded-2xl bg-primary/10 flex items-center justify-center">
+                                <IconLucideBookOpen class="w-7 h-7 text-primary" />
+                            </div>
+                            <div>
+                                <h1 class="text-3xl font-extrabold text-base-content tracking-tight">Guide d'utilisation</h1>
+                                <p class="text-base-content/40 text-sm mt-1">Tout ce qu'il faut savoir pour utiliser Inventory</p>
+                            </div>
+                        </div>
+                    </header>
+
+                    <!-- ==================== 1. COMMENT C'EST ORGANISE ==================== -->
+                    <section id="organisation" :ref="el => setSectionRef('organisation', el)" class="scroll-mt-24">
+                        <SectionTitle icon="IconLucideNetwork" color="primary">
+                            Comment c'est organise ?
+                        </SectionTitle>
+
+                        <p class="text-base-content/70 mb-6 leading-relaxed">
+                            L'application range vos equipements comme des poupees russes : chaque niveau contient le suivant.
+                            Voici les 5 niveaux, du plus grand au plus petit :
+                        </p>
+
+                        <!-- Arbre visuel simplifie -->
+                        <div class="card bg-base-100 border border-base-300 shadow-sm mb-8 overflow-hidden">
+                            <div class="card-body p-6">
+                                <div class="space-y-0">
+                                    <!-- Site -->
+                                    <div class="flex items-center gap-4">
+                                        <div class="w-11 h-11 rounded-xl bg-primary/15 flex items-center justify-center shrink-0">
+                                            <IconLucideFactory class="w-5 h-5 text-primary" />
+                                        </div>
+                                        <div>
+                                            <span class="font-bold text-base-content">Le site</span>
+                                            <span class="text-base-content/50"> &mdash; votre usine, votre atelier, votre entrepot</span>
+                                        </div>
+                                    </div>
+                                    <div class="ml-5 border-l-2 border-primary/20 h-4"></div>
+
+                                    <!-- Machine -->
+                                    <div class="flex items-center gap-4 ml-8">
+                                        <div class="w-11 h-11 rounded-xl bg-secondary/15 flex items-center justify-center shrink-0">
+                                            <IconLucideCog class="w-5 h-5 text-secondary" />
+                                        </div>
+                                        <div>
+                                            <span class="font-bold text-base-content">La machine</span>
+                                            <span class="text-base-content/50"> &mdash; la presse, le tour, la ligne de production</span>
+                                        </div>
+                                    </div>
+                                    <div class="ml-13 border-l-2 border-secondary/20 h-4"></div>
+
+                                    <!-- Composant -->
+                                    <div class="flex items-center gap-4 ml-16">
+                                        <div class="w-11 h-11 rounded-xl bg-accent/15 flex items-center justify-center shrink-0">
+                                            <IconLucideBoxes class="w-5 h-5 text-accent" />
+                                        </div>
+                                        <div>
+                                            <span class="font-bold text-base-content">Le composant</span>
+                                            <span class="text-base-content/50"> &mdash; le moteur, la pompe, le tableau electrique</span>
+                                        </div>
+                                    </div>
+                                    <div class="ml-21 border-l-2 border-accent/20 h-4"></div>
+
+                                    <!-- Piece & Produit -->
+                                    <div class="ml-24 grid grid-cols-1 sm:grid-cols-2 gap-4">
+                                        <div class="flex items-center gap-3">
+                                            <div class="w-11 h-11 rounded-xl bg-warning/15 flex items-center justify-center shrink-0">
+                                                <IconLucideWrench class="w-5 h-5 text-warning" />
+                                            </div>
+                                            <div>
+                                                <span class="font-bold text-base-content">La piece</span>
+                                                <p class="text-xs text-base-content/50">Joint, roulement, courroie...</p>
+                                            </div>
+                                        </div>
+                                        <div class="flex items-center gap-3">
+                                            <div class="w-11 h-11 rounded-xl bg-success/15 flex items-center justify-center shrink-0">
+                                                <IconLucideDroplets class="w-5 h-5 text-success" />
+                                            </div>
+                                            <div>
+                                                <span class="font-bold text-base-content">Le produit</span>
+                                                <p class="text-xs text-base-content/50">Huile, graisse, liquide...</p>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Piece vs Produit -->
+                        <h3 class="font-bold text-base-content mb-4 text-lg">Quelle difference entre une piece et un produit ?</h3>
+                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
+                            <div class="card bg-warning/5 border border-warning/20">
+                                <div class="card-body p-5">
+                                    <div class="flex items-center gap-2 mb-3">
+                                        <IconLucideWrench class="w-5 h-5 text-warning" />
+                                        <h4 class="font-bold text-base-content">Une piece</h4>
+                                    </div>
+                                    <p class="text-sm text-base-content/70">
+                                        C'est quelque chose qu'on <strong>monte</strong> physiquement sur la machine
+                                        et qu'on <strong>remplace</strong> quand c'est use. Un joint, un roulement, un capteur.
+                                    </p>
+                                </div>
+                            </div>
+                            <div class="card bg-success/5 border border-success/20">
+                                <div class="card-body p-5">
+                                    <div class="flex items-center gap-2 mb-3">
+                                        <IconLucideDroplets class="w-5 h-5 text-success" />
+                                        <h4 class="font-bold text-base-content">Un produit</h4>
+                                    </div>
+                                    <p class="text-sm text-base-content/70">
+                                        C'est quelque chose qu'on <strong>consomme</strong> et qu'on
+                                        <strong>rachete regulierement</strong>. De l'huile, de la graisse, un degraissant.
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="alert shadow-sm mb-4">
+                            <IconLucideInfo class="w-5 h-5 shrink-0 text-info" />
+                            <p class="text-sm">
+                                <strong>Bon a savoir :</strong> un composant peut contenir d'autres composants a l'interieur.
+                                Par exemple, un moteur peut contenir un reducteur, qui lui-meme contient des roulements.
+                                C'est comme des boites dans des boites.
+                            </p>
+                        </div>
+                    </section>
+
+                    <!-- ==================== 2. CREER UNE MACHINE ==================== -->
+                    <section id="machines" :ref="el => setSectionRef('machines', el)" class="scroll-mt-24">
+                        <SectionTitle icon="IconLucideCog" color="secondary">
+                            Creer une machine
+                        </SectionTitle>
+
+                        <p class="text-base-content/70 mb-6 leading-relaxed">
+                            Pour ajouter une nouvelle machine dans l'application, suivez ces etapes :
+                        </p>
+
+                        <div class="space-y-4 mb-8">
+                            <StepCard n="1" title="Choisissez le site">
+                                Dans quel batiment ou atelier se trouve la machine ?
+                                Selectionnez-le dans la liste.
+                            </StepCard>
+                            <StepCard n="2" title="Remplissez la fiche">
+                                Donnez un nom a la machine, sa reference, son prix si vous le connaissez,
+                                et le(s) fournisseur(s) qui l'ont fournie.
+                            </StepCard>
+                            <StepCard n="3" title="Ajoutez les composants">
+                                Quels sont les gros elements de cette machine ? Un moteur, une pompe, un variateur ?
+                                Ajoutez-les un par un. (Voir la section suivante.)
+                            </StepCard>
+                            <StepCard n="4" title="Ajoutez les pieces et produits">
+                                Certaines pieces ou produits sont lies directement a la machine
+                                (pas a un composant en particulier). Ajoutez-les ici.
+                            </StepCard>
+                            <StepCard n="5" title="Completez avec documents et infos supplementaires">
+                                Joignez des photos, plans, factures, et remplissez les informations supplementaires
+                                propres a cette machine (voir section Champs personnalises).
+                            </StepCard>
+                        </div>
+
+                        <div class="alert shadow-sm mb-2">
+                            <IconLucideCopy class="w-5 h-5 shrink-0 text-info" />
+                            <p class="text-sm">
+                                <strong>Astuce :</strong> si vous avez plusieurs machines identiques,
+                                utilisez le bouton <strong>"Cloner"</strong> pour dupliquer une machine existante
+                                avec tout son contenu. Il ne reste plus qu'a ajuster les details.
+                            </p>
+                        </div>
+                    </section>
+
+                    <!-- ==================== 3. LES COMPOSANTS ==================== -->
+                    <section id="composants" :ref="el => setSectionRef('composants', el)" class="scroll-mt-24">
+                        <SectionTitle icon="IconLucideBoxes" color="accent">
+                            Les composants d'une machine
+                        </SectionTitle>
+
+                        <p class="text-base-content/70 mb-6 leading-relaxed">
+                            Un composant, c'est un <strong>gros morceau</strong> de votre machine : le moteur,
+                            la pompe, le tableau electrique, le verin... Chaque composant a besoin de pieces
+                            et de produits pour fonctionner.
+                        </p>
+
+                        <!-- Explication emplacements -->
+                        <h3 class="font-bold text-base-content mb-4 text-lg">Le systeme d'emplacements</h3>
+                        <p class="text-base-content/70 mb-4 text-sm leading-relaxed">
+                            Quand vous ajoutez un composant a une machine, l'application cree automatiquement
+                            des <strong>emplacements vides</strong> a remplir. C'est comme un formulaire pre-fait :
+                            il vous indique tout ce qu'il faut pour que le composant soit complet.
+                        </p>
+
+                        <div class="card bg-base-100 border border-base-300 shadow-sm mb-6">
+                            <div class="card-body p-5">
+                                <p class="text-xs font-bold uppercase tracking-wider text-base-content/30 mb-4">Exemple : vous ajoutez une pompe hydraulique</p>
+                                <div class="space-y-3">
+                                    <div class="flex items-center gap-3 bg-warning/5 rounded-lg px-4 py-3 border border-warning/10">
+                                        <IconLucideWrench class="w-5 h-5 text-warning shrink-0" />
+                                        <div>
+                                            <p class="font-semibold text-sm">Emplacement piece : "Joint principal"</p>
+                                            <p class="text-xs text-base-content/50">A remplir avec le joint que vous utilisez vraiment</p>
+                                        </div>
+                                    </div>
+                                    <div class="flex items-center gap-3 bg-warning/5 rounded-lg px-4 py-3 border border-warning/10">
+                                        <IconLucideWrench class="w-5 h-5 text-warning shrink-0" />
+                                        <div>
+                                            <p class="font-semibold text-sm">Emplacement piece : "Roulement"</p>
+                                            <p class="text-xs text-base-content/50">A remplir avec le roulement en place</p>
+                                        </div>
+                                    </div>
+                                    <div class="flex items-center gap-3 bg-success/5 rounded-lg px-4 py-3 border border-success/10">
+                                        <IconLucideDroplets class="w-5 h-5 text-success shrink-0" />
+                                        <div>
+                                            <p class="font-semibold text-sm">Emplacement produit : "Huile hydraulique"</p>
+                                            <p class="text-xs text-base-content/50">A remplir avec l'huile utilisee</p>
+                                        </div>
+                                    </div>
+                                    <div class="flex items-center gap-3 bg-accent/5 rounded-lg px-4 py-3 border border-accent/10">
+                                        <IconLucideBoxes class="w-5 h-5 text-accent shrink-0" />
+                                        <div>
+                                            <p class="font-semibold text-sm">Emplacement composant : "Moteur electrique"</p>
+                                            <p class="text-xs text-base-content/50">Un composant dans un composant (comme des poupees russes)</p>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="alert shadow-sm mb-2">
+                            <IconLucideInfo class="w-5 h-5 shrink-0 text-info" />
+                            <p class="text-sm">
+                                <strong>Pas de panique :</strong> un emplacement peut rester vide. Vous n'etes pas oblige
+                                de tout remplir d'un coup. Completez au fur et a mesure, a votre rythme.
+                            </p>
+                        </div>
+                    </section>
+
+                    <!-- ==================== 4. PIECES ET PRODUITS ==================== -->
+                    <section id="pieces-produits" :ref="el => setSectionRef('pieces-produits', el)" class="scroll-mt-24">
+                        <SectionTitle icon="IconLucideWrench" color="warning">
+                            Pieces et produits
+                        </SectionTitle>
+
+                        <p class="text-base-content/70 mb-6 leading-relaxed">
+                            Les pieces et les produits sont les elements les plus "petits" de l'application.
+                            Ils peuvent etre rattaches a un composant (via un emplacement) ou directement a une machine.
+                        </p>
+
+                        <div class="grid grid-cols-1 md:grid-cols-2 gap-5 mb-8">
+                            <div class="card bg-base-100 border border-base-300 shadow-sm">
+                                <div class="card-body p-5">
+                                    <h4 class="font-bold text-base-content flex items-center gap-2 mb-3">
+                                        <span class="badge badge-warning">Piece</span>
+                                        Creer une piece
+                                    </h4>
+                                    <p class="text-sm text-base-content/70">
+                                        Donnez-lui un nom, une reference, choisissez son modele type
+                                        (voir section suivante), indiquez la quantite et le fournisseur.
+                                    </p>
+                                </div>
+                            </div>
+                            <div class="card bg-base-100 border border-base-300 shadow-sm">
+                                <div class="card-body p-5">
+                                    <h4 class="font-bold text-base-content flex items-center gap-2 mb-3">
+                                        <span class="badge badge-success">Produit</span>
+                                        Creer un produit
+                                    </h4>
+                                    <p class="text-sm text-base-content/70">
+                                        Meme chose : un nom, une reference, un modele type, et le fournisseur.
+                                        Les produits n'ont pas de quantite (c'est du consommable).
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="alert shadow-sm mb-2">
+                            <IconLucideDroplets class="w-5 h-5 shrink-0 text-info" />
+                            <p class="text-sm">
+                                <strong>Bon a savoir :</strong> une piece peut elle-meme avoir besoin de produits.
+                                Par exemple, un roulement a besoin de graisse. L'application gere ca automatiquement
+                                si c'est prevu dans le modele type de la piece.
+                            </p>
+                        </div>
+                    </section>
+
+                    <!-- ==================== 5. MODELES TYPES ==================== -->
+                    <section id="modeles-types" :ref="el => setSectionRef('modeles-types', el)" class="scroll-mt-24">
+                        <SectionTitle icon="IconLucideLayoutTemplate" color="primary">
+                            Les modeles types
+                        </SectionTitle>
+
+                        <!-- Analogie simple -->
+                        <div class="card bg-primary/5 border border-primary/20 mb-8">
+                            <div class="card-body p-6">
+                                <h3 class="font-bold text-base-content text-lg mb-3 flex items-center gap-2">
+                                    <IconLucideLightbulb class="w-5 h-5 text-primary" />
+                                    C'est quoi ?
+                                </h3>
+                                <p class="text-base-content/70 leading-relaxed mb-4">
+                                    Imaginez un <strong>bon de commande type</strong> : il liste tout ce qu'il faut pour un
+                                    equipement donne. Un modele type, c'est exactement pareil. Vous le creez une seule fois,
+                                    et ensuite chaque fois que vous ajoutez un equipement de ce type, la liste est deja pre-remplie.
+                                </p>
+                                <p class="text-base-content/70 leading-relaxed">
+                                    <strong>Exemple :</strong> vous creez un modele type "Pompe hydraulique" qui dit :
+                                    "il faut 2 joints, 1 roulement, et de l'huile hydraulique". A chaque nouvelle pompe,
+                                    ces emplacements sont crees automatiquement. Plus besoin de tout refaire a la main.
+                                </p>
+                            </div>
+                        </div>
+
+                        <!-- 3 familles -->
+                        <h3 class="font-bold text-base-content mb-4 text-lg">Il existe 3 familles de modeles</h3>
+                        <p class="text-base-content/70 mb-4 text-sm">
+                            Un modele type s'applique a une seule famille d'element :
+                        </p>
+                        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
+                            <div class="card bg-accent/5 border border-accent/20">
+                                <div class="card-body p-5">
+                                    <div class="flex items-center gap-2 mb-3">
+                                        <IconLucideBoxes class="w-5 h-5 text-accent" />
+                                        <span class="font-bold text-base-content">Pour les composants</span>
+                                    </div>
+                                    <p class="text-sm text-base-content/60">
+                                        Peut prevoir des emplacements pour des pieces, des produits,
+                                        et meme d'autres composants a l'interieur.
+                                    </p>
+                                </div>
+                            </div>
+                            <div class="card bg-warning/5 border border-warning/20">
+                                <div class="card-body p-5">
+                                    <div class="flex items-center gap-2 mb-3">
+                                        <IconLucideWrench class="w-5 h-5 text-warning" />
+                                        <span class="font-bold text-base-content">Pour les pieces</span>
+                                    </div>
+                                    <p class="text-sm text-base-content/60">
+                                        Peut prevoir des emplacements pour des produits.
+                                        Par exemple : un roulement qui a besoin de graisse.
+                                    </p>
+                                </div>
+                            </div>
+                            <div class="card bg-success/5 border border-success/20">
+                                <div class="card-body p-5">
+                                    <div class="flex items-center gap-2 mb-3">
+                                        <IconLucideDroplets class="w-5 h-5 text-success" />
+                                        <span class="font-bold text-base-content">Pour les produits</span>
+                                    </div>
+                                    <p class="text-sm text-base-content/60">
+                                        Pas d'emplacements prevus. Un produit est un consommable simple,
+                                        il ne contient rien d'autre.
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Reference automatique -->
+                        <h3 class="font-bold text-base-content mb-4 text-lg">
+                            <IconLucideHash class="w-5 h-5 inline text-base-content/50 mr-1" />
+                            Reference automatique
+                        </h3>
+                        <p class="text-base-content/70 mb-4 text-sm leading-relaxed">
+                            Pour les modeles de composants et de pieces, vous pouvez definir une
+                            <strong>formule de reference</strong> qui genere automatiquement un code unique
+                            pour chaque element, a partir de ses informations.
+                        </p>
+                        <div class="card bg-base-200/50 border border-base-300 shadow-sm mb-8">
+                            <div class="card-body p-5">
+                                <div class="flex flex-col sm:flex-row items-start sm:items-center gap-4">
+                                    <div>
+                                        <p class="text-xs text-base-content/40 mb-1">Formule :</p>
+                                        <code class="bg-base-300/50 px-3 py-1.5 rounded-lg text-sm font-mono text-primary">
+                                            {site}-{type}-{numero}
+                                        </code>
+                                    </div>
+                                    <IconLucideArrowRight class="w-5 h-5 text-base-content/20 shrink-0 hidden sm:block" />
+                                    <div>
+                                        <p class="text-xs text-base-content/40 mb-1">Resultat :</p>
+                                        <code class="bg-primary/10 px-3 py-1.5 rounded-lg text-sm font-mono text-primary font-bold">
+                                            LYON-POMPE-001
+                                        </code>
+                                    </div>
+                                </div>
+                                <p class="text-xs text-base-content/40 mt-3">
+                                    La reference se met a jour automatiquement quand les informations changent.
+                                </p>
+                            </div>
+                        </div>
+
+                        <!-- Synchronisation -->
+                        <h3 class="font-bold text-base-content mb-4 text-lg">
+                            <IconLucideRefreshCw class="w-5 h-5 inline text-base-content/50 mr-1" />
+                            Mettre a jour les elements existants
+                        </h3>
+                        <p class="text-base-content/70 mb-4 text-sm leading-relaxed">
+                            Vous avez modifie un modele type (par exemple, ajoute un emplacement "filtre"
+                            a votre modele de pompe) et vous voulez que <strong>toutes les pompes deja creees</strong>
+                            recoivent aussi ce nouvel emplacement ? C'est possible grace a la synchronisation :
+                        </p>
+                        <div class="card bg-base-100 border border-base-300 shadow-sm mb-4">
+                            <div class="card-body p-5">
+                                <ul class="steps steps-horizontal w-full text-xs sm:text-sm">
+                                    <li class="step step-primary">Modifier le modele</li>
+                                    <li class="step step-primary">Voir l'apercu</li>
+                                    <li class="step step-primary">Confirmer</li>
+                                    <li class="step step-primary">C'est fait !</li>
+                                </ul>
+                            </div>
+                        </div>
+                        <div class="alert shadow-sm mb-2">
+                            <IconLucideLightbulb class="w-5 h-5 shrink-0 text-info" />
+                            <p class="text-sm">
+                                <strong>Astuce :</strong> cette fonction est surtout utile au debut, quand vous etes
+                                en train de configurer l'application et que les modeles evoluent souvent.
+                                Un apercu est toujours affiche avant d'appliquer les changements.
+                            </p>
+                        </div>
+                    </section>
+
+                    <!-- ==================== 6. FOURNISSEURS ==================== -->
+                    <section id="fournisseurs" :ref="el => setSectionRef('fournisseurs', el)" class="scroll-mt-24">
+                        <SectionTitle icon="IconLucideTruck" color="primary">
+                            Fournisseurs
+                        </SectionTitle>
+
+                        <p class="text-base-content/70 mb-6 leading-relaxed">
+                            Vous pouvez enregistrer vos fournisseurs dans l'application et les associer a
+                            n'importe quel element : machine, composant, piece ou produit.
+                        </p>
+
+                        <div class="grid grid-cols-1 md:grid-cols-2 gap-5 mb-6">
+                            <div class="card bg-base-100 border border-base-300 shadow-sm">
+                                <div class="card-body p-5">
+                                    <h4 class="font-bold text-base-content flex items-center gap-2 mb-2">
+                                        <IconLucidePlus class="w-4 h-4 text-primary" />
+                                        Creer un fournisseur
+                                    </h4>
+                                    <p class="text-sm text-base-content/70">
+                                        Allez dans Administration > Fournisseurs et ajoutez le nom
+                                        et les coordonnees de votre fournisseur.
+                                    </p>
+                                </div>
+                            </div>
+                            <div class="card bg-base-100 border border-base-300 shadow-sm">
+                                <div class="card-body p-5">
+                                    <h4 class="font-bold text-base-content flex items-center gap-2 mb-2">
+                                        <IconLucideLink class="w-4 h-4 text-primary" />
+                                        Associer a un element
+                                    </h4>
+                                    <p class="text-sm text-base-content/70">
+                                        Sur la fiche de n'importe quel element, vous pouvez ajouter un ou
+                                        plusieurs fournisseurs avec leur reference propre.
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="alert shadow-sm mb-2">
+                            <IconLucideInfo class="w-5 h-5 shrink-0 text-info" />
+                            <p class="text-sm">
+                                <strong>Reference fournisseur :</strong> chaque fournisseur peut avoir sa propre reference
+                                pour le meme produit. Par exemple, un roulement SKF peut avoir la reference "6205-2Z"
+                                chez un fournisseur et "SKF-6205-ZZ" chez un autre.
+                            </p>
+                        </div>
+                    </section>
+
+                    <!-- ==================== 7. DOCUMENTS ==================== -->
+                    <section id="documents" :ref="el => setSectionRef('documents', el)" class="scroll-mt-24">
+                        <SectionTitle icon="IconLucideFileText" color="primary">
+                            Documents
+                        </SectionTitle>
+
+                        <p class="text-base-content/70 mb-6 leading-relaxed">
+                            Vous pouvez joindre des fichiers (PDF, images, etc.) a n'importe quel element de
+                            l'application. Chaque document a un type pour faciliter le tri :
+                        </p>
+
+                        <div class="flex flex-wrap gap-2 mb-8">
+                            <span class="badge badge-lg gap-2 py-3">
+                                <IconLucideBook class="w-4 h-4" />
+                                Documentation
+                            </span>
+                            <span class="badge badge-lg gap-2 py-3">
+                                <IconLucideFileSpreadsheet class="w-4 h-4" />
+                                Devis
+                            </span>
+                            <span class="badge badge-lg gap-2 py-3">
+                                <IconLucideReceipt class="w-4 h-4" />
+                                Facture
+                            </span>
+                            <span class="badge badge-lg gap-2 py-3">
+                                <IconLucideRuler class="w-4 h-4" />
+                                Plan
+                            </span>
+                            <span class="badge badge-lg gap-2 py-3">
+                                <IconLucideCamera class="w-4 h-4" />
+                                Photo
+                            </span>
+                            <span class="badge badge-lg gap-2 py-3">
+                                <IconLucideFile class="w-4 h-4" />
+                                Autre
+                            </span>
+                        </div>
+
+                        <p class="text-sm text-base-content/60">
+                            Les documents sont consultables et telechargeables directement depuis la fiche
+                            de l'element auquel ils sont rattaches.
+                        </p>
+                    </section>
+
+                    <!-- ==================== 8. CHAMPS PERSONNALISES ==================== -->
+                    <section id="champs-personnalises" :ref="el => setSectionRef('champs-personnalises', el)" class="scroll-mt-24">
+                        <SectionTitle icon="IconLucideSettings" color="primary">
+                            Informations supplementaires (champs personnalises)
+                        </SectionTitle>
+
+                        <p class="text-base-content/70 mb-6 leading-relaxed">
+                            En plus des informations de base (nom, reference, fournisseur...),
+                            vous pouvez ajouter des <strong>informations supplementaires</strong> sur mesure
+                            pour chaque element. Par exemple : un numero de serie, une date de garantie,
+                            une puissance en kW, etc.
+                        </p>
+
+                        <!-- Chaque element a ses champs -->
+                        <h3 class="font-bold text-base-content mb-4 text-lg">Qui peut avoir des informations supplementaires ?</h3>
+                        <p class="text-base-content/70 mb-4 text-sm">
+                            Tout le monde ! Mais la facon de les definir est differente :
+                        </p>
+
+                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8">
+                            <div class="card bg-secondary/5 border border-secondary/20">
+                                <div class="card-body p-5">
+                                    <div class="flex items-center gap-2 mb-3">
+                                        <IconLucideCog class="w-5 h-5 text-secondary" />
+                                        <span class="font-bold text-base-content">Sur une machine</span>
+                                    </div>
+                                    <p class="text-sm text-base-content/70 mb-3">
+                                        Vous ajoutez les champs <strong>directement sur la machine</strong>,
+                                        un par un. Chaque machine peut avoir ses propres champs.
+                                    </p>
+                                    <div class="bg-base-200/50 rounded-lg p-3 text-xs space-y-1 text-base-content/60">
+                                        <p class="font-semibold text-base-content/40">Exemples :</p>
+                                        <p>Date de mise en service</p>
+                                        <p>Numero d'inventaire</p>
+                                        <p>Cout d'acquisition</p>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="card bg-accent/5 border border-accent/20">
+                                <div class="card-body p-5">
+                                    <div class="flex items-center gap-2 mb-3">
+                                        <IconLucideBoxes class="w-5 h-5 text-accent" />
+                                        <span class="font-bold text-base-content">Sur composant, piece, produit</span>
+                                    </div>
+                                    <p class="text-sm text-base-content/70 mb-3">
+                                        Les champs sont definis <strong>dans le modele type</strong>.
+                                        Tous les elements du meme modele partagent les memes champs.
+                                    </p>
+                                    <div class="bg-base-200/50 rounded-lg p-3 text-xs space-y-1 text-base-content/60">
+                                        <p class="font-semibold text-base-content/40">Exemple pour "Pompe hydraulique" :</p>
+                                        <p>Debit max (nombre)</p>
+                                        <p>Type de fluide (liste de choix)</p>
+                                        <p>Certifie ATEX (oui/non)</p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Types de champs -->
+                        <h3 class="font-bold text-base-content mb-4 text-lg">Les types d'informations possibles</h3>
+                        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 mb-8">
+                            <div class="card bg-base-100 border border-base-300 shadow-sm">
+                                <div class="card-body p-4">
+                                    <div class="flex items-center gap-2 mb-2">
+                                        <IconLucideType class="w-4 h-4 text-primary" />
+                                        <span class="font-bold text-sm">Texte</span>
+                                    </div>
+                                    <p class="text-xs text-base-content/60">Saisie libre au clavier</p>
+                                    <div class="mt-2 bg-base-200/50 rounded px-2 py-1.5 text-xs text-base-content/40 italic">
+                                        Acier inoxydable 316L
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="card bg-base-100 border border-base-300 shadow-sm">
+                                <div class="card-body p-4">
+                                    <div class="flex items-center gap-2 mb-2">
+                                        <IconLucideHash class="w-4 h-4 text-primary" />
+                                        <span class="font-bold text-sm">Nombre</span>
+                                    </div>
+                                    <p class="text-xs text-base-content/60">Uniquement des chiffres</p>
+                                    <div class="mt-2 bg-base-200/50 rounded px-2 py-1.5 text-xs text-base-content/40 italic">
+                                        1500 tours/min
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="card bg-base-100 border border-base-300 shadow-sm">
+                                <div class="card-body p-4">
+                                    <div class="flex items-center gap-2 mb-2">
+                                        <IconLucideList class="w-4 h-4 text-primary" />
+                                        <span class="font-bold text-sm">Liste de choix</span>
+                                    </div>
+                                    <p class="text-xs text-base-content/60">Choisir parmi des options</p>
+                                    <div class="mt-2 bg-base-200/50 rounded px-2 py-1.5 text-xs text-base-content/40 italic">
+                                        Gauche / Droite / Centre
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="card bg-base-100 border border-base-300 shadow-sm">
+                                <div class="card-body p-4">
+                                    <div class="flex items-center gap-2 mb-2">
+                                        <IconLucideToggleLeft class="w-4 h-4 text-primary" />
+                                        <span class="font-bold text-sm">Oui / Non</span>
+                                    </div>
+                                    <p class="text-xs text-base-content/60">Juste cocher ou decocher</p>
+                                    <div class="mt-2 bg-base-200/50 rounded px-2 py-1.5 text-xs text-base-content/40 italic">
+                                        ATEX certifie : Oui
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="card bg-base-100 border border-base-300 shadow-sm">
+                                <div class="card-body p-4">
+                                    <div class="flex items-center gap-2 mb-2">
+                                        <IconLucideCalendar class="w-4 h-4 text-primary" />
+                                        <span class="font-bold text-sm">Date</span>
+                                    </div>
+                                    <p class="text-xs text-base-content/60">Choisir une date dans le calendrier</p>
+                                    <div class="mt-2 bg-base-200/50 rounded px-2 py-1.5 text-xs text-base-content/40 italic">
+                                        15/03/2026
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Champs contextuels -->
+                        <h3 class="font-bold text-base-content mb-4 text-lg">
+                            <IconLucideAlertTriangle class="w-5 h-5 inline text-warning mr-1" />
+                            Champs visibles uniquement dans une machine
+                        </h3>
+
+                        <div class="card bg-warning/5 border border-warning/20 mb-6">
+                            <div class="card-body p-6">
+                                <p class="text-base-content/70 leading-relaxed mb-4">
+                                    Quand vous creez un champ dans un modele type (pour un composant, une piece ou un produit),
+                                    vous pouvez choisir : <strong>est-ce que ce champ doit apparaitre partout,
+                                    ou seulement quand on regarde l'element depuis une machine ?</strong>
+                                </p>
+                                <p class="text-base-content/70 leading-relaxed mb-4">
+                                    <strong>Pourquoi ?</strong> Certaines informations n'ont de sens que quand
+                                    l'element est monte sur une machine. Par exemple, la "position sur la machine"
+                                    d'une pompe : dans le catalogue, la pompe n'est montee nulle part, donc ce champ
+                                    ne sert a rien. Mais quand on regarde cette pompe depuis la fiche d'une machine,
+                                    on veut savoir ou elle est installee.
+                                </p>
+                            </div>
+                        </div>
+
+                        <p class="text-sm font-semibold text-base-content mb-3">Voici la difference :</p>
+                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8">
+                            <div class="card bg-base-100 border-2 border-base-300">
+                                <div class="card-body p-5">
+                                    <p class="font-bold text-sm text-base-content mb-1">Dans le catalogue</p>
+                                    <p class="text-xs text-base-content/40 mb-4">Quand on consulte l'element tout seul</p>
+                                    <div class="space-y-2 text-sm">
+                                        <div class="flex justify-between">
+                                            <span class="text-base-content/70">Debit max</span>
+                                            <span>120 L/min</span>
+                                        </div>
+                                        <div class="flex justify-between">
+                                            <span class="text-base-content/70">ATEX</span>
+                                            <span>Oui</span>
+                                        </div>
+                                        <div class="border-t border-dashed border-base-300 pt-2 mt-2">
+                                            <div class="flex justify-between opacity-30">
+                                                <span class="line-through">Position sur la machine</span>
+                                                <span class="text-xs italic">pas affiche ici</span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="card bg-base-100 border-2 border-primary/30">
+                                <div class="card-body p-5">
+                                    <p class="font-bold text-sm text-base-content mb-1">Depuis une machine</p>
+                                    <p class="text-xs text-base-content/40 mb-4">Quand on regarde l'element dans sa machine</p>
+                                    <div class="space-y-2 text-sm">
+                                        <div class="flex justify-between">
+                                            <span class="text-base-content/70">Debit max</span>
+                                            <span>120 L/min</span>
+                                        </div>
+                                        <div class="flex justify-between">
+                                            <span class="text-base-content/70">ATEX</span>
+                                            <span>Oui</span>
+                                        </div>
+                                        <div class="border-t border-primary/20 pt-2 mt-2">
+                                            <div class="flex justify-between bg-primary/10 rounded px-2 py-1.5">
+                                                <span class="text-base-content font-medium">Position sur la machine</span>
+                                                <span class="font-bold">Secteur B - Ligne 3</span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Options -->
+                        <h3 class="font-bold text-base-content mb-4 text-lg">Options des champs</h3>
+                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
+                            <div class="card bg-base-100 border border-base-300 shadow-sm">
+                                <div class="card-body p-4">
+                                    <h4 class="font-bold text-sm flex items-center gap-2">
+                                        <IconLucideAsterisk class="w-4 h-4 text-error" />
+                                        Obligatoire
+                                    </h4>
+                                    <p class="text-xs text-base-content/60 mt-1">
+                                        L'element ne peut pas etre sauvegarde tant que ce champ n'est pas rempli.
+                                    </p>
+                                </div>
+                            </div>
+                            <div class="card bg-base-100 border border-base-300 shadow-sm">
+                                <div class="card-body p-4">
+                                    <h4 class="font-bold text-sm flex items-center gap-2">
+                                        <IconLucideClipboardCheck class="w-4 h-4 text-base-content/50" />
+                                        Valeur par defaut
+                                    </h4>
+                                    <p class="text-xs text-base-content/60 mt-1">
+                                        Le champ est pre-rempli automatiquement a la creation. Vous pouvez le modifier apres.
+                                    </p>
+                                </div>
+                            </div>
+                            <div class="card bg-base-100 border border-base-300 shadow-sm">
+                                <div class="card-body p-4">
+                                    <h4 class="font-bold text-sm flex items-center gap-2">
+                                        <IconLucideList class="w-4 h-4 text-base-content/50" />
+                                        Options de la liste
+                                    </h4>
+                                    <p class="text-xs text-base-content/60 mt-1">
+                                        Pour les champs "liste de choix", vous definissez les options possibles.
+                                    </p>
+                                </div>
+                            </div>
+                            <div class="card bg-base-100 border border-base-300 shadow-sm">
+                                <div class="card-body p-4">
+                                    <h4 class="font-bold text-sm flex items-center gap-2">
+                                        <IconLucideArrowUpDown class="w-4 h-4 text-base-content/50" />
+                                        Ordre d'affichage
+                                    </h4>
+                                    <p class="text-xs text-base-content/60 mt-1">
+                                        Vous choisissez dans quel ordre les champs apparaissent sur la fiche.
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                    </section>
+
+                    <!-- Footer spacer -->
+                    <div class="h-32" />
+                </div>
+            </div>
+        </div>
+    </main>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, type Component as VueComponent, defineComponent, h } from 'vue'
+import { useHead } from '#imports'
+
+// Icons
+import IconLucideBookOpen from '~icons/lucide/book-open'
+import IconLucideNetwork from '~icons/lucide/network'
+import IconLucideFactory from '~icons/lucide/factory'
+import IconLucideCog from '~icons/lucide/cog'
+import IconLucideBoxes from '~icons/lucide/boxes'
+import IconLucideWrench from '~icons/lucide/wrench'
+import IconLucideDroplets from '~icons/lucide/droplets'
+import IconLucideCheck from '~icons/lucide/check'
+import IconLucideInfo from '~icons/lucide/info'
+import IconLucideCopy from '~icons/lucide/copy'
+import IconLucideLayoutTemplate from '~icons/lucide/layout-template'
+import IconLucideLightbulb from '~icons/lucide/lightbulb'
+import IconLucideHash from '~icons/lucide/hash'
+import IconLucideArrowRight from '~icons/lucide/arrow-right'
+import IconLucideRefreshCw from '~icons/lucide/refresh-cw'
+import IconLucideTruck from '~icons/lucide/truck'
+import IconLucidePlus from '~icons/lucide/plus'
+import IconLucideLink from '~icons/lucide/link'
+import IconLucideFileText from '~icons/lucide/file-text'
+import IconLucideBook from '~icons/lucide/book'
+import IconLucideFileSpreadsheet from '~icons/lucide/file-spreadsheet'
+import IconLucideReceipt from '~icons/lucide/receipt'
+import IconLucideRuler from '~icons/lucide/ruler'
+import IconLucideCamera from '~icons/lucide/camera'
+import IconLucideFile from '~icons/lucide/file'
+import IconLucideSettings from '~icons/lucide/settings'
+import IconLucideType from '~icons/lucide/type'
+import IconLucideToggleLeft from '~icons/lucide/toggle-left'
+import IconLucideCalendar from '~icons/lucide/calendar'
+import IconLucideAlertTriangle from '~icons/lucide/alert-triangle'
+import IconLucideClipboardCheck from '~icons/lucide/clipboard-check'
+import IconLucideAsterisk from '~icons/lucide/asterisk'
+import IconLucideArrowUpDown from '~icons/lucide/arrow-up-down'
+import IconLucideList from '~icons/lucide/list'
+import IconLucideChevronDown from '~icons/lucide/chevron-down'
+
+useHead({ title: 'Documentation' })
+
+// ─── Inline sub-components ───
+
+const iconMap: Record<string, VueComponent> = {
+    IconLucideNetwork,
+    IconLucideCog,
+    IconLucideBoxes,
+    IconLucideWrench,
+    IconLucideLayoutTemplate,
+    IconLucideTruck,
+    IconLucideFileText,
+    IconLucideSettings,
+}
+
+const SectionTitle = defineComponent({
+    props: {
+        icon: { type: String, required: true },
+        color: { type: String, default: 'primary' },
+    },
+    setup(props, { slots }) {
+        return () => h('div', { class: 'flex items-center gap-3 mb-6' }, [
+            h(iconMap[props.icon] ?? 'span', { class: `w-6 h-6 text-${props.color}` }),
+            h('h2', { class: 'text-2xl font-bold text-base-content tracking-tight' }, slots.default?.()),
+        ])
+    },
+})
+
+const StepCard = defineComponent({
+    props: {
+        n: { type: String, required: true },
+        title: { type: String, required: true },
+    },
+    setup(props, { slots }) {
+        return () => h('div', { class: 'flex gap-4 items-start' }, [
+            h('div', {
+                class: 'w-9 h-9 rounded-full bg-primary/10 text-primary font-bold text-sm flex items-center justify-center shrink-0 mt-0.5',
+            }, props.n),
+            h('div', {}, [
+                h('p', { class: 'font-bold text-base-content' }, props.title),
+                h('p', { class: 'text-sm text-base-content/60 mt-0.5' }, slots.default?.()),
+            ]),
+        ])
+    },
+})
+
+// ─── Sections ───
+
+interface Section {
+    id: string
+    label: string
+    icon: VueComponent
+}
+
+const sections: Section[] = [
+    { id: 'organisation', label: 'Organisation', icon: IconLucideNetwork },
+    { id: 'machines', label: 'Machines', icon: IconLucideCog },
+    { id: 'composants', label: 'Composants', icon: IconLucideBoxes },
+    { id: 'pieces-produits', label: 'Pieces & Produits', icon: IconLucideWrench },
+    { id: 'modeles-types', label: 'Modeles types', icon: IconLucideLayoutTemplate },
+    { id: 'fournisseurs', label: 'Fournisseurs', icon: IconLucideTruck },
+    { id: 'documents', label: 'Documents', icon: IconLucideFileText },
+    { id: 'champs-personnalises', label: 'Champs perso', icon: IconLucideSettings },
+]
+
+const activeSection = ref('organisation')
+const mobileMenuOpen = ref(false)
+
+const sectionRefs = new Map<string, Element>()
+
+function setSectionRef(id: string, el: unknown) {
+    if (el instanceof Element) {
+        sectionRefs.set(id, el)
+    }
+}
+
+function scrollTo(id: string) {
+    const el = document.getElementById(id)
+    if (el) {
+        el.scrollIntoView({ behavior: 'smooth' })
+        mobileMenuOpen.value = false
+    }
+}
+
+let observer: IntersectionObserver | null = null
+
+onMounted(() => {
+    observer = new IntersectionObserver(
+        (entries) => {
+            for (const entry of entries) {
+                if (entry.isIntersecting) {
+                    activeSection.value = entry.target.id
+                }
+            }
+        },
+        {
+            rootMargin: '-20% 0px -60% 0px',
+            threshold: 0,
+        },
+    )
+
+    for (const el of sectionRefs.values()) {
+        observer.observe(el)
+    }
+})
+
+onUnmounted(() => {
+    observer?.disconnect()
+})
+</script>
+
+<style scoped>
+.slide-enter-active,
+.slide-leave-active {
+    transition: max-height 0.25s ease, opacity 0.25s ease;
+    overflow: hidden;
+}
+.slide-enter-from,
+.slide-leave-to {
+    max-height: 0;
+    opacity: 0;
+}
+.slide-enter-to,
+.slide-leave-from {
+    max-height: 30rem;
+    opacity: 1;
+}
+</style>