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/components/settings/settings-help-box.tsx

@@ -0,0 +1,69 @@
+'use client'
+
+import { useState } from 'react'
+import { HelpCircle, ChevronDown, ChevronUp, ExternalLink } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+interface HelpStep {
+  icon?: string
+  text: string
+  link?: { label: string; href: string }
+}
+
+interface SettingsHelpBoxProps {
+  title: string
+  steps: HelpStep[]
+  defaultOpen?: boolean
+  className?: string
+}
+
+export function SettingsHelpBox({ title, steps, defaultOpen = false, className }: SettingsHelpBoxProps) {
+  const [open, setOpen] = useState(defaultOpen)
+
+  return (
+    <div className={cn('rounded-xl border border-blue-200/60 dark:border-blue-800/30 bg-blue-50/50 dark:bg-blue-950/10 overflow-hidden', className)}>
+      <button
+        type="button"
+        onClick={() => setOpen((v) => !v)}
+        className="w-full flex items-center gap-2 px-4 py-3 text-left hover:bg-blue-100/40 dark:hover:bg-blue-900/10 transition-colors"
+      >
+        <HelpCircle size={14} className="text-blue-500 dark:text-blue-400 shrink-0" />
+        <span className="text-[12px] font-semibold text-blue-700 dark:text-blue-300 flex-1">{title}</span>
+        {open ? (
+          <ChevronUp size={13} className="text-blue-400 shrink-0" />
+        ) : (
+          <ChevronDown size={13} className="text-blue-400 shrink-0" />
+        )}
+      </button>
+
+      {open && (
+        <ol className="px-4 pb-4 space-y-2">
+          {steps.map((step, i) => (
+            <li key={i} className="flex items-start gap-2.5">
+              <span className="w-5 h-5 rounded-full bg-blue-100 dark:bg-blue-900/40 text-blue-600 dark:text-blue-300 text-[10px] font-bold flex items-center justify-center shrink-0 mt-0.5">
+                {step.icon ?? i + 1}
+              </span>
+              <span className="text-[12px] text-blue-800 dark:text-blue-200 leading-relaxed">
+                {step.text}
+                {step.link && (
+                  <>
+                    {' '}
+                    <a
+                      href={step.link.href}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="inline-flex items-center gap-0.5 underline underline-offset-2 font-medium hover:text-blue-600"
+                    >
+                      {step.link.label}
+                      <ExternalLink size={10} />
+                    </a>
+                  </>
+                )}
+              </span>
+            </li>
+          ))}
+        </ol>
+      )}
+    </div>
+  )
+}