docs: section IA dans le guide d'utilisation + nav

frontend/index.html

@@ -781,6 +781,7 @@
             <li><a href="#help-fichiers" class="help-nav-link">📁 Fichiers</a></li>
             <li><a href="#help-personnalisation" class="help-nav-link">🎨 Personnalisation</a></li>
             <li><a href="#help-raccourcis" class="help-nav-link">⌨️ Raccourcis</a></li>
+            <li><a href="#help-ai" class="help-nav-link">🤖 IA Éditeur</a></li>
             <li><a href="#help-astuces" class="help-nav-link">💡 Astuces</a></li>
           </ul>
         </nav>
@@ -1079,6 +1080,80 @@
             </ul>
           </section>
 
+          <section class="help-section" id="help-ai">
+            <h2>🤖 Intelligence Artificielle dans l'Éditeur</h2>
+            <p>ObsiGate intègre un assistant IA directement dans l'éditeur de texte. Pour l'activer, configurez au moins un provider AI dans le fichier <code>.env</code> (DeepSeek, OpenRouter ou Gemini).</p>
+
+            <h3>Activation</h3>
+            <ol>
+              <li>Ajoutez votre clé API dans <code>.env</code> : <code>DEEPSEEK_API_KEY=sk-...</code></li>
+              <li>Redémarrez le conteneur : <code>docker compose down && docker compose up -d --build</code></li>
+              <li>Ouvrez un fichier en mode Édition (bouton ✏️ Éditer)</li>
+              <li>La barre d'outils AI apparaît sous le titre de l'éditeur</li>
+            </ol>
+
+            <h3>Barre d'outils AI</h3>
+            <p>La barre d'outils contient les boutons suivants :</p>
+            <ul>
+              <li><strong>✦ AI</strong> — Complétion inline (<kbd>Ctrl+J</kbd>). Complète automatiquement le texte là où se trouve le curseur.</li>
+              <li><strong>Éditer ▾</strong> — Menu de modification du texte sélectionné :
+                <ul>
+                  <li>🪄 <strong>Improve writing</strong> : Améliore la qualité, la clarté et le flux du texte</li>
+                  <li>🔤 <strong>Fix spelling & grammar</strong> : Corrige les fautes d'orthographe et de grammaire</li>
+                  <li>📏 <strong>Make shorter</strong> : Rend le texte plus concis tout en préservant l'information</li>
+                  <li>📐 <strong>Make longer</strong> : Ajoute des détails, exemples ou explications</li>
+                  <li>📋 <strong>Simplify language</strong> : Simplifie le langage, évite le jargon</li>
+                </ul>
+              </li>
+              <li><strong>Ton ▾</strong> — Change le ton du texte :
+                <ul>
+                  <li>💼 <strong>Professional</strong> : Ton formel et professionnel</li>
+                  <li>💬 <strong>Casual</strong> : Ton décontracté et conversationnel</li>
+                </ul>
+              </li>
+              <li><strong>Traduire ▾</strong> — Traduit le texte sélectionné vers une autre langue :
+                <ul>
+                  <li>🇬🇧 English · 🇨🇳 Chinese · 🇯🇵 Japanese · 🇩🇪 German · 🇫🇷 French · 🇪🇸 Spanish</li>
+                </ul>
+              </li>
+              <li><strong>Générer ▾</strong> — Génère du contenu à partir de la sélection :
+                <ul>
+                  <li>ℹ️ <strong>Explain this</strong> : Explique le texte sélectionné de façon claire</li>
+                  <li>📝 <strong>Summarize</strong> : Résume le texte de façon concise</li>
+                  <li>✏️ <strong>Continue writing</strong> : Continue l'écriture à partir du texte</li>
+                </ul>
+              </li>
+              <li><strong>💬 Réécrire</strong> — Réécrit le texte selon vos instructions personnalisées. Une boîte de dialogue vous demande votre instruction.</li>
+              <li><strong>🧰 Boîte ▾</strong> — Outils de conversion :
+                <ul>
+                  <li>📋 <strong>Convert to list</strong> : Transforme le texte en liste Markdown</li>
+                  <li>📊 <strong>Convert to table</strong> : Transforme en tableau Markdown</li>
+                  <li>⚙️ <strong>Generate frontmatter</strong> : Génère un bloc YAML frontmatter</li>
+                  <li>🔷 <strong>Convert to canvas</strong> : Convertit en diagramme Mermaid.js</li>
+                </ul>
+              </li>
+            </ul>
+
+            <h3>Indicateurs visuels</h3>
+            <ul>
+              <li>Pendant une requête AI, un toast <strong>⏳ AI: traitement en cours...</strong> s'affiche</li>
+              <li>Une fois terminé, <strong>AI: texte traité ✓</strong> confirme le succès</li>
+              <li>En cas d'erreur de clé API : <strong>AI: clé API invalide</strong></li>
+            </ul>
+
+            <h3>Sauvegarde automatique</h3>
+            <p>L'éditeur sauvegarde automatiquement après 2 secondes d'inactivité. Le bouton de sauvegarde <strong>flashe en vert</strong> brièvement pour confirmer.</p>
+
+            <h3>Providers supportés</h3>
+            <table>
+              <tr><th>Provider</th><th>Variable .env</th><th>Modèle par défaut</th></tr>
+              <tr><td>DeepSeek</td><td><code>DEEPSEEK_API_KEY</code></td><td><code>deepseek-chat</code></td></tr>
+              <tr><td>OpenRouter</td><td><code>OPENROUTER_API_KEY</code></td><td><code>openai/gpt-4o-mini</code></td></tr>
+              <tr><td>Gemini</td><td><code>GEMINI_API_KEY</code></td><td><code>gemini-2.0-flash</code></td></tr>
+            </table>
+            <p>Pour changer de provider par défaut : <code>AI_DEFAULT_PROVIDER=openrouter</code></p>
+          </section>
+
           <section class="help-section" id="help-astuces">
             <h2>💡 Astuces et bonnes pratiques</h2>