feat: sprint 3 — profil utilisateur, badge plan, dropdown Header

- AuthContext.User : plan? { slug, name, level } | null
- UserBadge : nickname + badge plan.slug (fallback free)
- Header : dropdown click (Profil / Déconnexion) + click-outside
- ProfilePage : infos compte, badge plan, edit nickname (PATCH /users/me + re-fetch /auth/me → setUser)
- App : route /profile protégée
- useAuth : réexporte depuis AuthContext, fin de la dérive

frontend/src/components/UserBadge.tsx

@@ -0,0 +1,18 @@
+import type { User } from '../context/AuthContext';
+
+interface UserBadgeProps {
+  user: User;
+}
+
+export default function UserBadge({ user }: UserBadgeProps) {
+  const planLabel = user.plan?.slug ?? 'free';
+
+  return (
+    <span className="flex items-center gap-2">
+      <span className="font-mono text-xs text-od-accent">{user.nickname}</span>
+      <span className="font-mono text-[10px] px-1.5 py-0.5 rounded border border-od-border text-od-muted">
+        {planLabel}
+      </span>
+    </span>
+  );
+}

frontend/src/components/layout/Header.tsx

@@ -1,6 +1,8 @@
+import { useEffect, useRef, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { apiFetch } from '../../lib/api';
 import type { User } from '../../context/AuthContext';
+import UserBadge from '../UserBadge';
 
 interface HeaderProps {
   theme: 'dark' | 'light';
@@ -10,8 +12,23 @@ interface HeaderProps {
 }
 
 export default function Header({ theme, onToggleTheme, user, onLogout }: HeaderProps) {
+  const [open, setOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    function handleClick(e: MouseEvent) {
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener('mousedown', handleClick);
+    return () => document.removeEventListener('mousedown', handleClick);
+  }, [open]);
+
   async function handleLogout() {
     await apiFetch('/auth/logout', { method: 'POST' }).catch(() => {});
+    setOpen(false);
     onLogout();
   }
 
@@ -39,7 +56,7 @@ export default function Header({ theme, onToggleTheme, user, onLogout }: HeaderP
               Playlists
             </Link>
           )}
-          {user?.roles?.includes('admin') && (
+          {user?.roles?.some((r) => r === 'admin' || r === 'super_admin') && (
             <Link to="/admin" className="font-mono text-xs text-od-muted hover:text-od-accent transition-colors">
               admin
             </Link>
@@ -57,14 +74,31 @@ export default function Header({ theme, onToggleTheme, user, onLogout }: HeaderP
           </button>
 
           {user ? (
-            <div className="flex items-center gap-3">
-              <span className="font-mono text-xs text-od-accent">{user.nickname}</span>
+            <div className="relative" ref={dropdownRef}>
               <button
-                onClick={handleLogout}
-                className="font-mono text-xs text-od-muted hover:text-od-crit transition-colors"
+                onClick={() => setOpen((o) => !o)}
+                className="flex items-center gap-1.5 hover:opacity-80 transition-opacity"
               >
-                ↩
+                <UserBadge user={user} />
+                <span className="font-mono text-xs text-od-muted">▾</span>
               </button>
+              {open && (
+                <div className="absolute right-0 top-full mt-1 w-36 rounded border border-od-border bg-od-surface shadow-lg z-50">
+                  <Link
+                    to="/profile"
+                    onClick={() => setOpen(false)}
+                    className="block px-3 py-2 text-xs text-od-muted hover:text-od-text transition-colors"
+                  >
+                    Profil
+                  </Link>
+                  <button
+                    onClick={handleLogout}
+                    className="w-full text-left px-3 py-2 font-mono text-xs text-od-muted hover:text-od-crit transition-colors"
+                  >
+                    Déconnexion
+                  </button>
+                </div>
+              )}
             </div>
           ) : (
             <Link