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/lib/api.ts

@@ -2,6 +2,12 @@
 // En prod : VITE_API_URL=https://origins.tetardtek.com/api
 const BASE = import.meta.env.VITE_API_URL || '/api';
 
+export class ApiError extends Error {
+  constructor(public readonly status: number, path: string) {
+    super(`API ${status}: ${path}`);
+  }
+}
+
 export async function apiFetch<T>(path: string, init?: RequestInit): Promise<T> {
   const res = await fetch(`${BASE}${path}`, {
     credentials: 'include', // transmet le cookie httpOnly automatiquement
@@ -13,7 +19,7 @@ export async function apiFetch<T>(path: string, init?: RequestInit): Promise<T>
   });
 
   if (!res.ok) {
-    throw new Error(`API ${res.status}: ${path}`);
+    throw new ApiError(res.status, path);
   }
 
   return res.json() as Promise<T>;

frontend/src/pages/AdminPage.tsx

@@ -50,7 +50,7 @@ export default function AdminPage() {
   const [tab, setTab] = useState<Tab>('videos');
 
   if (authLoading) return null;
-  if (!user?.roles?.includes('admin')) return <Navigate to="/" replace />;
+  if (!user?.roles?.some((r) => r === 'admin' || r === 'super_admin')) return <Navigate to="/" replace />;
 
   return (
     <div className="flex flex-col gap-6">

frontend/src/pages/PlaylistPage.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 import { useParams, Link } from 'react-router-dom';
-import { apiFetch } from '../lib/api';
+import { apiFetch, ApiError } from '../lib/api';
 
 interface Video {
   id: string;
@@ -35,8 +35,8 @@ export default function PlaylistPage() {
     if (!id) return;
     apiFetch<PlaylistResponse>(`/playlists/${id}`)
       .then((res) => setData(res.data))
-      .catch((err: Error) => {
-        if (err.message.includes('403')) setError('forbidden');
+      .catch((err: unknown) => {
+        if (err instanceof ApiError && err.status === 403) setError('forbidden');
         else setError('not_found');
       })
       .finally(() => setLoading(false));

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 && (

frontend/src/pages/VideoPage.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 import { useParams, Link } from 'react-router-dom';
-import { apiFetch } from '../lib/api';
+import { apiFetch, ApiError } from '../lib/api';
 import VideoPlayer from '../components/VideoPlayer';
 
 interface Video {
@@ -30,9 +30,9 @@ export default function VideoPage() {
     if (!id) return;
     apiFetch<VideoResponse>(`/videos/${id}`)
       .then((res) => setVideo(res.data.video))
-      .catch((err: Error) => {
-        if (err.message.includes('403')) setError('forbidden');
-        else if (err.message.includes('404')) setError('not_found');
+      .catch((err: unknown) => {
+        if (err instanceof ApiError && err.status === 403) setError('forbidden');
+        else if (err instanceof ApiError && err.status === 404) setError('not_found');
         else setError('unknown');
       })
       .finally(() => setLoading(false));