fix: ApiError typée + error handling pages video/playlists/admin

- api.ts : ApiError class (status: number) — remplace Error générique
- VideoPage/PlaylistPage : instanceof ApiError au lieu de message.includes()
- PlaylistsPage : fetchError + createError — silent catch supprimé
- AdminPage : guard roles.some() aligné Header (super_admin inclus)

frontend/src/pages/PlaylistsPage.tsx

@@ -21,8 +21,10 @@ export default function PlaylistsPage() {
   const [owned, setOwned] = useState<Playlist[]>([]);
   const [shared, setShared] = useState<(Playlist & { permission: 'view' | 'edit' })[]>([]);
   const [loading, setLoading] = useState(true);
+  const [fetchError, setFetchError] = useState<string | null>(null);
   const [createTitle, setCreateTitle] = useState('');
   const [creating, setCreating] = useState(false);
+  const [createError, setCreateError] = useState<string | null>(null);
 
   useEffect(() => {
     apiFetch<PlaylistsResponse>('/playlists')
@@ -30,7 +32,7 @@ export default function PlaylistsPage() {
         setOwned(res.data.owned);
         setShared(res.data.shared);
       })
-      .catch(() => {})
+      .catch(() => setFetchError('Impossible de charger les playlists.'))
       .finally(() => setLoading(false));
   }, []);
 
@@ -38,6 +40,7 @@ export default function PlaylistsPage() {
     e.preventDefault();
     if (!createTitle.trim() || creating) return;
     setCreating(true);
+    setCreateError(null);
     try {
       const res = await apiFetch<{ success: boolean; data: { playlist: Playlist } }>(
         '/playlists',
@@ -45,7 +48,9 @@ export default function PlaylistsPage() {
       );
       setOwned((prev) => [res.data.playlist, ...prev]);
       setCreateTitle('');
-    } catch {}
+    } catch {
+      setCreateError('Impossible de créer la playlist.');
+    }
     setCreating(false);
   }
 
@@ -59,6 +64,10 @@ export default function PlaylistsPage() {
     );
   }
 
+  if (fetchError) {
+    return <p className="text-sm text-od-crit">{fetchError}</p>;
+  }
+
   return (
     <div className="flex flex-col gap-10">
 
@@ -67,6 +76,7 @@ export default function PlaylistsPage() {
       </section>
 
       {/* Créer */}
+      <div className="flex flex-col gap-1">
       <form onSubmit={handleCreate} className="flex gap-2">
         <input
           type="text"
@@ -83,6 +93,8 @@ export default function PlaylistsPage() {
           +
         </button>
       </form>
+      {createError && <p className="font-mono text-xs text-od-crit">{createError}</p>}
+      </div>
 
       {/* Mes playlists */}
       {owned.length > 0 && (