feat: lazy ReactPlayer, seed 11 vidéos YouTube (niveaux 0/1/2)

frontend/src/pages/VideoPage.tsx

@@ -1,8 +1,10 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, lazy, Suspense } from 'react';
 import { useParams, Link } from 'react-router-dom';
-import ReactPlayer from 'react-player';
 import { apiFetch } from '../lib/api';
 
+// Lazy — HLS/DASH chunks ne chargent que sur /video/:id, pas sur la homepage
+const ReactPlayer = lazy(() => import('react-player'));
+
 interface Video {
   id: number;
   title: string;
@@ -89,12 +91,14 @@ export default function VideoPage() {
       {/* Player */}
       <div className="overflow-hidden rounded border border-od-border bg-od-surface">
         <div className="aspect-video w-full">
-          <ReactPlayer
-            src={playerUrl}
-            width="100%"
-            height="100%"
-            controls
-          />
+          <Suspense fallback={<div className="h-full w-full bg-od-surface-hi animate-pulse" />}>
+            <ReactPlayer
+              src={playerUrl}
+              width="100%"
+              height="100%"
+              controls
+            />
+          </Suspense>
         </div>
       </div>