feat: aide contextuelle dans les paramètres (SettingsHelpBox)

- Nouveau composant SettingsHelpBox (accordéon bleu, étapes numérotées)
- Intégrations: aide Google Calendar + aide Readwise (inline, avant les boutons)
- MCP: explication de ce qu'est MCP et comment l'utiliser
- IA: explication des fournisseurs, BYOK, Ollama, quotas
- Données: explication import/export/ré-indexation/suppression compte

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

memento-note/app/(main)/settings/integrations/page.tsx

@@ -3,6 +3,7 @@
 import { useState, useEffect } from 'react'
 import { BookOpen, Loader2, Check, X, RefreshCw, Trash2, CalendarDays } from 'lucide-react'
 import { toast } from 'sonner'
+import { SettingsHelpBox } from '@/components/settings/settings-help-box'
 
 export default function IntegrationsPage() {
   // ── Readwise ───────────────────────────────────────────────────────────
@@ -158,13 +159,24 @@ export default function IntegrationsPage() {
         </div>
 
         {!calConnected ? (
-          <button
-            onClick={handleCalConnect}
-            className="px-4 py-2 text-sm font-semibold bg-ink text-paper rounded-xl hover:bg-ink/80 transition-all flex items-center gap-2"
-          >
-            <CalendarDays size={14} />
-            Connecter Google Calendar
-          </button>
+          <div className="space-y-3">
+            <SettingsHelpBox
+              title="Comment fonctionne Google Calendar ?"
+              steps={[
+                { text: 'Cliquez "Connecter Google Calendar" — vous serez redirigé vers Google pour autoriser l\'accès.' },
+                { text: 'Une fois connecté, revenez ici et cliquez "Événements aujourd\'hui" pour voir votre agenda.' },
+                { text: 'Sur chaque événement, cliquez "+ Note" pour créer automatiquement une note de réunion avec template (Ordre du jour / Notes / Actions).' },
+                { text: 'La note s\'ouvre directement dans Momento — ajoutez vos notes en temps réel pendant la réunion.' },
+              ]}
+            />
+            <button
+              onClick={handleCalConnect}
+              className="px-4 py-2 text-sm font-semibold bg-ink text-paper rounded-xl hover:bg-ink/80 transition-all flex items-center gap-2"
+            >
+              <CalendarDays size={14} />
+              Connecter Google Calendar
+            </button>
+          </div>
         ) : (
           <div className="space-y-3">
             <div className="flex flex-wrap gap-2">
@@ -226,12 +238,16 @@ export default function IntegrationsPage() {
 
         {!rwConnected && (
           <div className="space-y-3">
-            <p className="text-[12px] text-concrete">
-              Trouvez votre token sur{' '}
-              <a href="https://readwise.io/access_token" target="_blank" rel="noopener noreferrer" className="text-brand-accent underline">
-                readwise.io/access_token
-              </a>
-            </p>
+            <SettingsHelpBox
+              title="Comment fonctionne Readwise ?"
+              steps={[
+                { text: 'Copiez votre token d\'accès Readwise.', link: { label: 'readwise.io/access_token', href: 'https://readwise.io/access_token' } },
+                { text: 'Collez-le dans le champ ci-dessous et cliquez "Connecter". La première synchronisation importe tous vos livres et articles.' },
+                { text: 'Chaque livre devient une note dans un carnet "Readwise 📚" — avec tous vos surlignages organisés.' },
+                { text: 'Pour mettre à jour avec de nouveaux surlignages, revenez ici et cliquez "Synchroniser maintenant".' },
+                { icon: '💡', text: 'Astuce : créez des flashcards IA depuis une note Readwise (bouton 🎓 dans l\'éditeur) pour réviser vos lectures.' },
+              ]}
+            />
             <div className="flex gap-2">
               <input
                 type="password"