feat: implement podcastIndexService using iTunes API for search and trending podcasts

backend/src/services/podcastIndexService.ts

@@ -59,14 +59,18 @@ export const podcastIndexService = {
     query: string,
     limit: number = 20,
   ): Promise<SearchResult[]> => {
+    const term = query.trim();
+    if (!term) return [];
+
     const response = await axios.get<ItunesSearchResponse>(
       'https://itunes.apple.com/search',
       {
         params: {
-          term: query,
+          term,
           media: 'podcast',
           entity: 'podcast',
-          limit: Math.min(limit, 50),
+          country: 'FR', // Prioritize French store
+          limit: Math.max(limit, 50), // Get more results to find the best match
         },
         timeout: 10000,
       }

frontend/src/components/EpisodeCard.tsx

@@ -1,12 +1,14 @@
+import React from 'react';
 import { Episode } from '../services/episodeService';
-import { Play, Clock, Calendar } from 'lucide-react';
+import { Play, Calendar } from 'lucide-react';
 
 interface EpisodeCardProps {
   episode: Episode;
   onPlay: (episode: Episode) => void;
+  onDetails?: (episode: Episode) => void;
 }
 
-export default function EpisodeCard({ episode, onPlay }: EpisodeCardProps) {
+export default function EpisodeCard({ episode, onPlay, onDetails }: EpisodeCardProps) {
   const podcast = typeof episode.podcastId === 'object' ? episode.podcastId : null;
   const pubDate = new Date(episode.pubDate).toLocaleDateString('fr-FR', {
     month: 'short',
@@ -16,13 +18,25 @@ export default function EpisodeCard({ episode, onPlay }: EpisodeCardProps) {
 
   const durationMinutes = Math.floor(episode.duration / 60);
 
+  const handleDetailsClick = (e: React.MouseEvent) => {
+    if (onDetails) {
+      e.stopPropagation();
+      onDetails(episode);
+    }
+  };
+
+  const handlePlayClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    onPlay(episode);
+  };
+
   return (
     <div 
-      className="group premium-glass rounded-[2rem] p-4 hover:bg-white/5 transition-all duration-500 border-white/5 hover:border-white/10 flex flex-col h-full cursor-pointer"
+      className="group premium-glass rounded-[2rem] p-4 hover:bg-[var(--bg-secondary)] transition-all duration-500 border border-[var(--border-color)] hover:border-[var(--accent-primary)]/30 flex flex-col h-full cursor-pointer relative"
-      onClick={() => onPlay(episode)}
+      onClick={handleDetailsClick}
     >
       {/* Visual Header */}
-      <div className="relative aspect-square rounded-2xl overflow-hidden mb-5 shadow-xl border border-white/5">
+      <div className="relative aspect-square rounded-2xl overflow-hidden mb-5 shadow-xl border border-[var(--border-color)]">
         {(episode.imageUrl || podcast?.imageUrl) ? (
           <img
             src={episode.imageUrl || podcast!.imageUrl}
@@ -30,12 +44,15 @@ export default function EpisodeCard({ episode, onPlay }: EpisodeCardProps) {
             className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
           />
         ) : (
-          <div className="w-full h-full bg-gradient-to-br from-accent-indigo to-accent-rose flex items-center justify-center text-4xl">🎙️</div>
+          <div className="w-full h-full bg-gradient-to-br from-[var(--accent-primary)] to-[var(--accent-secondary)] flex items-center justify-center text-4xl">🎙️</div>
         )}
         
         {/* Hover Play Button Overlay */}
-        <div className="absolute inset-0 bg-obsidian/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center backdrop-blur-[2px]">
+        <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center backdrop-blur-[2px]">
-          <div className="w-16 h-16 rounded-full bg-white text-obsidian flex items-center justify-center shadow-glow-indigo transform scale-90 group-hover:scale-100 transition-transform duration-500">
+          <div 
+            onClick={handlePlayClick}
+            className="w-16 h-16 rounded-full bg-white text-obsidian flex items-center justify-center shadow-glow-indigo transform scale-90 group-hover:scale-100 transition-transform duration-500 active:scale-95"
+          >
             <Play className="w-6 h-6 fill-current ml-1" />
           </div>
         </div>
@@ -49,17 +66,17 @@ export default function EpisodeCard({ episode, onPlay }: EpisodeCardProps) {
       {/* Content */}
       <div className="flex-1 flex flex-col">
         <div className="flex items-center gap-2 mb-2">
-           <span className="text-[9px] font-black text-accent-indigo uppercase tracking-[0.2em] truncate flex-1">
+           <span className="text-[9px] font-black text-[var(--accent-primary)] uppercase tracking-[0.2em] truncate flex-1">
              {podcast?.author || 'Artiste Premium'}
            </span>
         </div>
         
-        <h3 className="text-sm font-bold text-white line-clamp-2 mb-4 leading-relaxed group-hover:text-accent-indigo transition-colors flex-1">
+        <h3 className="text-sm font-bold line-clamp-2 mb-4 leading-relaxed group-hover:text-[var(--accent-primary)] transition-colors flex-1">
           {episode.title}
         </h3>
 
         {/* Footer Meta */}
-        <div className="flex items-center justify-between pt-4 border-t border-white/5 text-[10px] font-bold text-slate-500 uppercase tracking-widest">
+        <div className="flex items-center justify-between pt-4 border-t border-[var(--border-color)] text-[10px] font-bold text-[var(--text-secondary)] uppercase tracking-widest">
            <div className="flex items-center gap-1.5">
               <Calendar className="w-3.5 h-3.5" />
               <span>{pubDate}</span>
@@ -71,7 +88,7 @@ export default function EpisodeCard({ episode, onPlay }: EpisodeCardProps) {
       {episode.progress && !episode.progress.isCompleted && (
         <div className="absolute bottom-0 left-0 right-0 h-1 bg-white/5 rounded-b-[2rem] overflow-hidden">
            <div 
-             className="h-full bg-accent-indigo shadow-glow-indigo transition-all duration-1000"
+             className="h-full bg-[var(--accent-primary)] shadow-glow-indigo transition-all duration-1000"
              style={{ width: `${Math.min(100, (episode.progress.position / episode.duration) * 100)}%` }}
            />
         </div>

frontend/src/components/EpisodeDetails.tsx

@@ -0,0 +1,136 @@
+import React from 'react';
+import { X, Play, Clock, Calendar, BarChart2 } from 'lucide-react';
+import { Episode } from '../services/episodeService';
+
+interface EpisodeDetailsProps {
+  episode: Episode | null;
+  isOpen: boolean;
+  onClose: () => void;
+  onPlay: (episode: Episode) => void;
+}
+
+export default function EpisodeDetails({ episode, isOpen, onClose, onPlay }: EpisodeDetailsProps) {
+  if (!episode) return null;
+
+  const podcast = typeof episode.podcastId === 'object' ? episode.podcastId : null;
+  const durationMinutes = Math.floor(episode.duration / 60);
+  const pubDate = new Date(episode.pubDate).toLocaleDateString('fr-FR', {
+    day: 'numeric',
+    month: 'long',
+    year: 'numeric'
+  });
+
+  return (
+    <>
+      {/* Backdrop */}
+      <div 
+        className={`fixed inset-0 bg-black/60 backdrop-blur-sm z-[110] transition-opacity duration-500 ${isOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'}`}
+        onClick={onClose}
+      />
+
+      {/* Slide-over Panel */}
+      <div className={`fixed top-0 right-0 bottom-0 w-full max-w-2xl bg-[var(--bg-primary)] z-[120] shadow-2xl transform transition-transform duration-500 ease-[cubic-bezier(0.2,0.8,0.2,1)] overflow-y-auto ${isOpen ? 'translate-x-0' : 'translate-x-full'}`}>
+        
+        {/* Header Image Area */}
+        <div className="relative h-80 w-full overflow-hidden">
+           {episode.imageUrl || podcast?.imageUrl ? (
+             <img 
+               src={episode.imageUrl || podcast?.imageUrl} 
+               alt={episode.title} 
+               className="w-full h-full object-cover"
+             />
+           ) : (
+             <div className="w-full h-full bg-gradient-to-br from-[var(--accent-primary)] to-[var(--accent-secondary)]" />
+           )}
+           <div className="absolute inset-0 bg-gradient-to-t from-[var(--bg-primary)] via-[var(--bg-primary)]/40 to-transparent" />
+           
+           <button 
+             onClick={onClose}
+             className="absolute top-6 right-6 p-3 rounded-2xl bg-black/40 text-white backdrop-blur-md border border-white/10 hover:bg-black/60 transition-all"
+           >
+             <X className="w-6 h-6" />
+           </button>
+
+           <div className="absolute bottom-8 left-8 right-8">
+              <span className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-[var(--accent-primary)]/20 border border-[var(--accent-primary)]/30 text-[10px] font-black text-[var(--accent-primary)] uppercase tracking-widest mb-4">
+                 Episode Détails
+              </span>
+              <h2 className="text-3xl lg:text-4xl font-display font-black leading-tight">{episode.title}</h2>
+           </div>
+        </div>
+
+        {/* Content */}
+        <div className="p-8 lg:p-12">
+           {/* Meta Info */}
+           <div className="flex flex-wrap gap-8 mb-10 pb-8 border-b border-[var(--border-color)]">
+              <div className="flex items-center gap-3">
+                 <div className="w-10 h-10 rounded-xl bg-[var(--bg-secondary)] flex items-center justify-center text-[var(--text-secondary)]">
+                    <Clock className="w-5 h-5" />
+                 </div>
+                 <div>
+                    <p className="text-[10px] font-black text-[var(--text-secondary)] uppercase tracking-widest">Durée</p>
+                    <p className="font-bold">{durationMinutes} minutes</p>
+                 </div>
+              </div>
+              <div className="flex items-center gap-3">
+                 <div className="w-10 h-10 rounded-xl bg-[var(--bg-secondary)] flex items-center justify-center text-[var(--text-secondary)]">
+                    <Calendar className="w-5 h-5" />
+                 </div>
+                 <div>
+                    <p className="text-[10px] font-black text-[var(--text-secondary)] uppercase tracking-widest">Publié le</p>
+                    <p className="font-bold">{pubDate}</p>
+                 </div>
+              </div>
+              {episode.progress && (
+                 <div className="flex items-center gap-3">
+                    <div className="w-10 h-10 rounded-xl bg-[var(--bg-secondary)] flex items-center justify-center text-[var(--accent-primary)]">
+                       <BarChart2 className="w-5 h-5" />
+                    </div>
+                    <div>
+                       <p className="text-[10px] font-black text-[var(--text-secondary)] uppercase tracking-widest">Progression</p>
+                       <p className="font-bold">{Math.floor((episode.progress.position / episode.duration) * 100)}% écouté</p>
+                    </div>
+                 </div>
+              )}
+           </div>
+
+           {/* Action Bar */}
+           <div className="mb-12">
+              <button 
+                onClick={() => { onPlay(episode); onClose(); }}
+                className="w-full py-5 rounded-3xl bg-[var(--accent-primary)] text-white font-black uppercase tracking-[0.2em] shadow-glow-indigo hover:scale-[1.02] active:scale-95 transition-all flex items-center justify-center gap-4"
+              >
+                <Play className="w-6 h-6 fill-current" />
+                Lancer l'épisode
+              </button>
+           </div>
+
+           {/* Description */}
+           <div className="space-y-6">
+              <h3 className="text-xl font-display font-black">À propos de cet épisode</h3>
+              <div 
+                className="prose prose-invert max-w-none text-[var(--text-secondary)] leading-relaxed text-lg"
+                dangerouslySetInnerHTML={{ __html: episode.description }}
+              />
+           </div>
+
+           {/* Podcast Info */}
+           {podcast && (
+              <div className="mt-16 p-8 rounded-[2rem] bg-[var(--bg-secondary)] border border-[var(--border-color)] group hover:border-[var(--accent-primary)] transition-all">
+                 <div className="flex items-center gap-6">
+                    <div className="w-20 h-20 rounded-2xl overflow-hidden shadow-xl border border-[var(--border-color)]">
+                       <img src={podcast.imageUrl} alt={podcast.title} className="w-full h-full object-cover" />
+                    </div>
+                    <div className="flex-1">
+                       <p className="text-[10px] font-black text-[var(--accent-primary)] uppercase tracking-widest mb-1">Disponible sur le podcast</p>
+                       <h4 className="text-xl font-bold mb-1">{podcast.title}</h4>
+                       <p className="text-sm text-[var(--text-secondary)] font-bold uppercase tracking-widest">{podcast.author}</p>
+                    </div>
+                 </div>
+              </div>
+           )}
+        </div>
+      </div>
+    </>
+  );
+}

frontend/src/components/Navigation.tsx

@@ -1,5 +1,5 @@
 import { Link, useLocation } from 'react-router-dom';
-import { Home, Flame, PlusCircle, BookOpen, Library } from 'lucide-react';
+import { Home, Flame, PlusCircle, Library } from 'lucide-react';
 
 export default function Navigation() {
   const location = useLocation();
@@ -7,24 +7,24 @@ export default function Navigation() {
   const isActive = (path: string) => location.pathname === path;
 
   const navItems = [
-    { path: '/dashboard', label: 'Tableau de bord', icon: Home, color: 'text-accent-indigo' },
+    { path: '/dashboard', label: 'Dashboard', icon: Home },
-    { path: '/trending', label: 'Tendances', icon: Flame, color: 'text-accent-rose' },
+    { path: '/trending', label: 'Trending', icon: Flame },
-    { path: '/library', label: 'Bibliothèque', icon: Library, color: 'text-accent-cyan' },
+    { path: '/library', label: 'Library', icon: Library },
-    { path: '/add', label: 'Ajouter', icon: PlusCircle, color: 'text-accent-violet' },
+    { path: '/add', label: 'Add Podcast', icon: PlusCircle },
   ];
 
   return (
     <>
       {/* Desktop Sidebar */}
-      <nav className="fixed left-6 top-6 bottom-6 w-72 h-auto premium-glass z-50 p-6 hidden lg:flex flex-col gap-8 rounded-[2.5rem]">
+      <nav className="fixed left-6 top-6 bottom-6 w-72 h-auto premium-glass z-50 p-6 hidden lg:flex flex-col gap-8 rounded-[2.5rem] border border-[var(--border-color)]">
         {/* Logo */}
         <Link to="/" className="flex items-center gap-4 group">
-          <div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-accent-indigo to-accent-rose flex items-center justify-center text-2xl shadow-glow-indigo transition-transform group-hover:scale-110">
+          <div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-[var(--accent-primary)] to-[var(--accent-secondary)] flex items-center justify-center text-2xl shadow-glow-indigo transition-transform group-hover:scale-110">
             🎙️
           </div>
           <div className="flex flex-col">
-            <span className="text-xl font-display font-extrabold text-white tracking-tight">PODCASTIC</span>
+            <span className="text-xl font-display font-extrabold tracking-tight">PODCASTIC</span>
-            <span className="text-[10px] text-slate-500 font-bold uppercase tracking-[0.2em]">Premium Audio</span>
+            <span className="text-[10px] text-[var(--text-secondary)] font-bold uppercase tracking-[0.2em]">Premium Audio</span>
           </div>
         </Link>
 
@@ -39,28 +39,28 @@ export default function Navigation() {
                 to={item.path}
                 className={`group relative flex items-center gap-4 px-5 py-4 rounded-2xl transition-all duration-300 ${
                   active
-                    ? 'bg-white/10 text-white shadow-lg shadow-black/20'
+                    ? 'bg-[var(--accent-primary)]/10 text-[var(--accent-primary)] shadow-sm'
-                    : 'text-slate-400 hover:text-white hover:bg-white/5'
+                    : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-secondary)]'
                 }`}
               >
                 {active && (
-                  <div className="absolute left-0 w-1.5 h-6 rounded-full bg-accent-indigo shadow-[0_0_12px_rgba(99,102,241,0.8)]" />
+                  <div className="absolute left-0 w-1.5 h-6 rounded-full bg-[var(--accent-primary)] shadow-glow-indigo" />
                 )}
-                <ActiveIcon className={`w-5 h-5 transition-transform group-hover:scale-110 ${active ? 'text-accent-indigo' : ''}`} />
+                <ActiveIcon className={`w-5 h-5 transition-transform group-hover:scale-110 ${active ? 'text-[var(--accent-primary)]' : ''}`} />
-                <span className="text-sm font-semibold tracking-wide">{item.label}</span>
+                <span className="text-sm font-bold tracking-wide">{item.label}</span>
               </Link>
             );
           })}
         </div>
 
         {/* Footer */}
-        <div className="mt-auto pt-6 border-t border-white/5">
+        <div className="mt-auto pt-6 border-t border-[var(--border-color)]">
-          <p className="px-2 text-[10px] text-slate-700 font-bold uppercase tracking-widest">Podcastic © 2026</p>
+          <p className="px-2 text-[10px] text-[var(--text-secondary)] font-bold uppercase tracking-widest opacity-50">Podcastic Premium v1.0</p>
         </div>
       </nav>
 
       {/* Mobile Bottom Nav */}
-      <nav className="fixed bottom-6 left-6 right-6 h-20 premium-glass lg:hidden z-50 flex items-center justify-around px-4 rounded-[2rem] shadow-2xl">
+      <nav className="fixed bottom-6 left-6 right-6 h-20 premium-glass lg:hidden z-50 flex items-center justify-around px-4 rounded-[2rem] shadow-2xl border border-[var(--border-color)]">
         {navItems.map((item) => {
           const MobileIcon = item.icon;
           const active = isActive(item.path);
@@ -69,11 +69,11 @@ export default function Navigation() {
               key={item.path}
               to={item.path}
               className={`flex flex-col items-center gap-1.5 transition-all duration-300 ${
-                active ? 'scale-110 text-accent-indigo' : 'text-slate-500'
+                active ? 'scale-110 text-[var(--accent-primary)]' : 'text-[var(--text-secondary)]'
               }`}
             >
               <MobileIcon className="w-6 h-6" />
-              {active && <div className="w-1 h-1 rounded-full bg-accent-indigo shadow-[0_0_8px_rgba(99,102,241,1)]" />}
+              {active && <div className="w-1 h-1 rounded-full bg-[var(--accent-primary)] shadow-glow-indigo" />}
             </Link>
           );
         })}

frontend/src/pages/AddPodcast.tsx

@@ -5,6 +5,7 @@ import { podcastService } from '../services/podcastService';
 import { episodeService, Episode } from '../services/episodeService';
 import Header from '../components/Header';
 import EpisodeCard from '../components/EpisodeCard';
+import EpisodeDetails from '../components/EpisodeDetails';
 import AudioPlayer from '../components/AudioPlayer';
 import { Search, Plus, Loader, Rss, Check, Globe, Sparkles, PlusCircle, LayoutGrid, ListMusic } from 'lucide-react';
 import { authService } from '../services/authService';
@@ -21,6 +22,8 @@ export default function AddPodcast() {
   const [rssError, setRssError] = useState<string | null>(null);
   const [rssSuccess, setRssSuccess] = useState<string | null>(null);
   const [selectedEpisode, setSelectedEpisode] = useState<Episode | null>(null);
+  const [detailsEpisode, setDetailsEpisode] = useState<Episode | null>(null);
+  const [isDetailsOpen, setIsDetailsOpen] = useState(false);
   
   // Modal state
   const [showSuccessModal, setShowSuccessModal] = useState(false);
@@ -38,6 +41,11 @@ export default function AddPodcast() {
     loadUser();
   }, []);
 
+  const handleOpenDetails = (episode: Episode) => {
+    setDetailsEpisode(episode);
+    setIsDetailsOpen(true);
+  };
+
   // Podcast Discovery Query
   const { data: searchResults, isLoading: isSearching } = useQuery({
     queryKey: ['discover', 'search', searchQuery],
@@ -119,13 +127,13 @@ export default function AddPodcast() {
       <main className="max-w-5xl mx-auto">
         {/* RSS Input Area */}
         <div className="premium-glass p-8 rounded-[3rem] mb-12 relative overflow-hidden">
-           <div className="absolute top-0 right-0 w-32 h-32 bg-accent-indigo/5 blur-[50px]" />
+           <div className="absolute top-0 right-0 w-32 h-32 bg-[var(--accent-primary)]/5 blur-[50px]" />
            <div className="relative z-10">
               <div className="flex items-center gap-3 mb-6">
                 <div className="w-10 h-10 rounded-xl bg-accent-rose/10 flex items-center justify-center text-accent-rose shadow-glow-indigo">
                    <Rss className="w-5 h-5" />
                 </div>
-                <h3 className="text-xl font-display font-black text-white">Flux RSS Direct</h3>
+                <h3 className="text-xl font-display font-black">Flux RSS Direct</h3>
               </div>
               
               <form onSubmit={handleRssSubscribe} className="flex flex-col sm:flex-row gap-4">
@@ -158,21 +166,21 @@ export default function AddPodcast() {
                  <div className="w-10 h-10 rounded-xl bg-accent-indigo/10 flex items-center justify-center text-accent-indigo shadow-glow-indigo">
                     <Search className="w-5 h-5" />
                  </div>
-                 <h3 className="text-xl font-display font-black text-white">Recherche Intelligente</h3>
+                 <h3 className="text-xl font-display font-black">Recherche Intelligente</h3>
               </div>
 
               {/* Tabs */}
-              <div className="flex p-1 rounded-2xl bg-white/[0.03] border border-white/5">
+              <div className="flex p-1 rounded-2xl bg-[var(--bg-secondary)] border border-[var(--border-color)]">
                  <button 
                   onClick={() => setSearchType('podcasts')}
-                  className={`flex items-center gap-2 px-4 py-2 rounded-xl text-[10px] font-black uppercase tracking-widest transition-all ${searchType === 'podcasts' ? 'bg-white text-obsidian shadow-lg' : 'text-slate-500 hover:text-white'}`}
+                  className={`flex items-center gap-2 px-4 py-2 rounded-xl text-[10px] font-black uppercase tracking-widest transition-all ${searchType === 'podcasts' ? 'bg-[var(--accent-primary)] text-white shadow-lg' : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)]'}`}
                  >
                     <LayoutGrid className="w-3 h-3" />
                     Podcasts
                  </button>
                  <button 
                   onClick={() => setSearchType('episodes')}
-                  className={`flex items-center gap-2 px-4 py-2 rounded-xl text-[10px] font-black uppercase tracking-widest transition-all ${searchType === 'episodes' ? 'bg-white text-obsidian shadow-lg' : 'text-slate-500 hover:text-white'}`}
+                  className={`flex items-center gap-2 px-4 py-2 rounded-xl text-[10px] font-black uppercase tracking-widest transition-all ${searchType === 'episodes' ? 'bg-[var(--accent-primary)] text-white shadow-lg' : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)]'}`}
                  >
                     <ListMusic className="w-3 h-3" />
                     Épisodes
@@ -183,44 +191,44 @@ export default function AddPodcast() {
            <div className="relative group">
               <input
                 type="text"
-                placeholder={searchType === 'podcasts' ? "Trouvez un podcast par titre ou auteur..." : "Cherchez un sujet dans tous les épisodes..."}
+                placeholder={searchType === 'podcasts' ? "Trouvez un podcast (Base iTunes FR)..." : "Cherchez un sujet dans tous les épisodes..."}
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}
-                className="input-premium !py-6 !pl-16 text-xl shadow-2xl transition-all group-hover:bg-white/[0.05]"
+                className="input-premium !py-6 !pl-16 text-xl shadow-2xl transition-all group-hover:bg-[var(--bg-secondary)]"
               />
-              <Sparkles className="absolute left-6 top-1/2 -translate-y-1/2 w-6 h-6 text-slate-500 group-focus-within:text-accent-indigo transition-colors" />
+              <Sparkles className="absolute left-6 top-1/2 -translate-y-1/2 w-6 h-6 text-slate-500 group-focus-within:text-[var(--accent-primary)] transition-colors" />
            </div>
         </div>
 
         {/* Dynamic Results Grid */}
         {(isSearching || isSearchingEpisodes) ? (
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-             {[1,2,3].map(i => <div key={i} className="premium-glass rounded-[2.5rem] h-64 animate-pulse bg-white/5" />)}
+             {[1,2,3].map(i => <div key={i} className="premium-glass rounded-[2.5rem] h-64 animate-pulse" />)}
           </div>
         ) : searchType === 'podcasts' && searchResults?.podcasts && searchResults.podcasts.length > 0 ? (
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 pb-32">
             {searchResults.podcasts.map((podcast) => (
-              <div key={podcast.id} className="group premium-glass rounded-[2.5rem] overflow-hidden flex flex-col hover:bg-white/[0.05] transition-all duration-500">
+              <div key={podcast.id} className="group premium-glass rounded-[2.5rem] overflow-hidden flex flex-col hover:bg-[var(--bg-secondary)] transition-all duration-500">
                 <div className="relative aspect-[16/10] overflow-hidden">
                    {podcast.imageUrl ? (
                      <img src={podcast.imageUrl} alt={podcast.title} className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" />
                    ) : (
                      <div className="w-full h-full bg-gradient-to-br from-slate-800 to-obsidian flex items-center justify-center text-4xl">🎙️</div>
                    )}
-                   <div className="absolute inset-0 bg-gradient-to-t from-obsidian via-transparent to-transparent opacity-60" />
+                   <div className="absolute inset-0 bg-gradient-to-t from-[var(--bg-primary)] via-transparent to-transparent opacity-60" />
                 </div>
 
                 <div className="p-6 flex flex-col flex-1">
-                  <h3 className="text-lg font-bold text-white mb-2 line-clamp-2 leading-tight group-hover:text-accent-indigo transition-colors">{podcast.title}</h3>
+                  <h3 className="text-lg font-bold mb-2 line-clamp-2 leading-tight group-hover:text-[var(--accent-primary)] transition-colors">{podcast.title}</h3>
-                  <p className="text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-4 truncate">{podcast.author || 'Inconnu'}</p>
+                  <p className="text-[10px] font-bold text-[var(--text-secondary)] uppercase tracking-widest mb-4 truncate">{podcast.author || 'Inconnu'}</p>
                   
                   <button
                     onClick={() => handleSubscribe(podcast)}
                     disabled={subscribingId === podcast.id || subscribeMutation.isPending || isSubscribed(podcast.rssUrl)}
                     className={`mt-auto w-full py-3.5 rounded-2xl font-bold uppercase tracking-widest text-[10px] transition-all duration-300 flex items-center justify-center gap-2 ${
                       isSubscribed(podcast.rssUrl)
-                        ? 'bg-accent-cyan/10 text-accent-cyan border border-accent-cyan/20'
+                        ? 'bg-[var(--accent-secondary)]/10 text-[var(--accent-secondary)] border border-[var(--accent-secondary)]/20'
-                        : 'bg-white text-obsidian hover:bg-accent-indigo hover:text-white'
+                        : 'bg-[var(--text-primary)] text-[var(--bg-primary)] hover:bg-[var(--accent-primary)] hover:text-white'
                     }`}
                   >
                     {subscribingId === podcast.id ? <Loader className="w-4 h-4 animate-spin" /> : isSubscribed(podcast.rssUrl) ? <><Check className="w-4 h-4" /> Membre</> : <><Plus className="w-4 h-4" /> S'abonner</>}
@@ -232,14 +240,19 @@ export default function AddPodcast() {
         ) : searchType === 'episodes' && episodeResults?.episodes && episodeResults.episodes.length > 0 ? (
           <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 pb-32">
              {episodeResults.episodes.map((episode) => (
-                <EpisodeCard key={episode._id} episode={episode} onPlay={setSelectedEpisode} />
+                <EpisodeCard 
+                  key={episode._id} 
+                  episode={episode} 
+                  onPlay={setSelectedEpisode} 
+                  onDetails={handleOpenDetails}
+                />
              ))}
           </div>
         ) : searchQuery.length >= 2 ? (
           <div className="premium-glass p-20 rounded-[3rem] text-center max-w-lg mx-auto">
             <Globe className="w-12 h-12 text-slate-700 mx-auto mb-6" />
-            <p className="text-white font-bold uppercase tracking-widest text-sm mb-2">Aucun signal trouvé</p>
+            <p className="font-bold uppercase tracking-widest text-sm mb-2">Aucun résultat sur iTunes FR</p>
-            <p className="text-slate-500 text-xs">Vérifiez l'orthographe ou changez de type de recherche.</p>
+            <p className="text-[var(--text-secondary)] text-xs">Vérifiez l'orthographe ou essayez un nom d'auteur.</p>
           </div>
         ) : (
           <div className="text-center py-20 opacity-30">
@@ -250,11 +263,18 @@ export default function AddPodcast() {
         )}
       </main>
 
+      <EpisodeDetails 
+        episode={detailsEpisode}
+        isOpen={isDetailsOpen}
+        onClose={() => setIsDetailsOpen(false)}
+        onPlay={setSelectedEpisode}
+      />
+
       {selectedEpisode && (
         <AudioPlayer
           episode={selectedEpisode}
           onClose={() => setSelectedEpisode(null)}
-          userId={user?._id}
+          userId={user?.id}
         />
       )}
 

frontend/src/pages/Dashboard.tsx

@@ -7,10 +7,24 @@ import EpisodeCard from '../components/EpisodeCard';
 import AudioPlayer from '../components/AudioPlayer';
 import { Sparkles, Play, Clock, TrendingUp } from 'lucide-react';
 
+import EpisodeCard from '../components/EpisodeCard';
+import EpisodeDetails from '../components/EpisodeDetails';
+
 export default function Dashboard() {
   const [user, setUser] = useState<any>(null);
   const [selectedEpisode, setSelectedEpisode] = useState<Episode | null>(null);
+  const [detailsEpisode, setDetailsEpisode] = useState<Episode | null>(null);
+  const [isDetailsOpen, setIsDetailsOpen] = useState(false);
   const [loading, setLoading] = useState(true);
+  const [episodes, setEpisodes] = useState<Episode[]>([]);
+  const [skip, setSkip] = useState(0);
+  const [hasMore, setHasMore] = useState(true);
+  const LIMIT = 32;
+
+  const handleOpenDetails = (episode: Episode) => {
+    setDetailsEpisode(episode);
+    setIsDetailsOpen(true);
+  };
 
   // Load user
   useEffect(() => {
@@ -28,14 +42,37 @@ export default function Dashboard() {
     loadUser();
   }, []);
 
-  // Fetch latest episodes
+  // Fetch episodes with pagination
-  const { data: episodesData, isLoading: episodesLoading } = useQuery({
+  const { data: episodesData, isLoading: episodesLoading, isFetching: episodesFetching } = useQuery({
-    queryKey: ['episodes', 'latest'],
+    queryKey: ['episodes', 'latest', skip],
-    queryFn: () => episodeService.getLatestEpisodes(30),
+    queryFn: () => episodeService.getLatestEpisodes(LIMIT, skip),
     enabled: !!user,
-    staleTime: 5 * 60 * 1000, // 5 minutes
+    staleTime: 5 * 60 * 1000,
   });
 
+  useEffect(() => {
+    if (episodesData?.episodes) {
+      if (skip === 0) {
+        setEpisodes(episodesData.episodes);
+      } else {
+        setEpisodes(prev => {
+          // Prevent duplicates
+          const newEpisodes = episodesData.episodes.filter(
+            (newEp: any) => !prev.some(oldEp => oldEp._id === newEp._id)
+          );
+          return [...prev, ...newEpisodes];
+        });
+      }
+      setHasMore(episodesData.episodes.length === LIMIT);
+    }
+  }, [episodesData, skip]);
+
+  const loadMore = () => {
+    if (hasMore && !episodesFetching) {
+      setSkip(prev => prev + LIMIT);
+    }
+  };
+
   const handleLogout = async () => {
     try {
       await authService.logout();
@@ -46,13 +83,13 @@ export default function Dashboard() {
     }
   };
 
-  // Extract episodes in progress
+  // Extract episodes in progress (using all loaded episodes)
-  const episodesInProgress = episodesData?.episodes?.filter(e => e.progress && !e.progress.isCompleted) || [];
+  const episodesInProgress = episodes?.filter(e => e.progress && !e.progress.isCompleted) || [];
 
   if (loading) {
     return (
       <div className="min-h-screen flex items-center justify-center">
-        <div className="w-12 h-12 rounded-full border-4 border-white/5 border-t-accent-indigo animate-spin" />
+        <div className="w-12 h-12 rounded-full border-4 border-[var(--border-color)] border-t-[var(--accent-primary)] animate-spin" />
       </div>
     );
   }
@@ -79,7 +116,7 @@ export default function Dashboard() {
                  Découvrez les nouveautés de votre univers audio.
               </h2>
               <p className="text-[var(--text-secondary)] text-lg mb-8 max-w-xl leading-relaxed">
-                 Vous avez {episodesData?.count || 0} nouveaux épisodes qui n'attendent que vous. Prêt pour une immersion ?
+                 Vous avez des nouveaux épisodes qui n'attendent que vous. Prêt pour une immersion ?
               </p>
               <div className="flex flex-wrap gap-4">
                  {episodesInProgress.length > 0 ? (
@@ -96,9 +133,9 @@ export default function Dashboard() {
                        Découvrir
                     </button>
                  )}
-                 <button className="px-6 py-3 rounded-2xl bg-[var(--bg-secondary)] text-[var(--text-secondary)] font-bold text-sm hover:bg-[var(--accent-primary)]/10 transition-all border border-[var(--border-color)]">
+                 <Link to="/trending" className="px-6 py-3 rounded-2xl bg-[var(--bg-secondary)] text-[var(--text-secondary)] font-bold text-sm hover:bg-[var(--accent-primary)]/10 transition-all border border-[var(--border-color)] flex items-center justify-center">
                     Parcourir les tendances
-                 </button>
+                 </Link>
               </div>
            </div>
         </div>
@@ -113,11 +150,12 @@ export default function Dashboard() {
                 <h3 className="text-2xl font-display font-black">Continuer l'écoute</h3>
              </div>
              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
-                {episodesInProgress.map((episode) => (
+                {episodesInProgress.slice(0, 4).map((episode) => (
                   <EpisodeCard
                     key={`progress-${episode._id}`}
                     episode={episode}
                     onPlay={setSelectedEpisode}
+                    onDetails={handleOpenDetails}
                   />
                 ))}
              </div>
@@ -132,25 +170,41 @@ export default function Dashboard() {
               </div>
               <h3 className="text-2xl font-display font-black">Récemment Publiés</h3>
            </div>
-           <span className="text-[10px] font-bold text-[var(--text-secondary)] uppercase tracking-widest px-3 py-1 rounded-lg border border-[var(--border-color)]">{episodesData?.episodes?.length || 0} EPISODES</span>
+           <span className="text-[10px] font-bold text-[var(--text-secondary)] uppercase tracking-widest px-3 py-1 rounded-lg border border-[var(--border-color)]">{episodes.length} CHARGÉS</span>
         </div>
 
-        {episodesLoading ? (
+        {episodesLoading && skip === 0 ? (
           <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
             {[1, 2, 3, 4].map(i => (
               <div key={i} className="premium-glass rounded-[2rem] h-80 animate-pulse bg-white/[0.02]" />
             ))}
           </div>
-        ) : episodesData?.episodes && episodesData.episodes.length > 0 ? (
+        ) : episodes.length > 0 ? (
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
+          <>
-            {episodesData.episodes.map((episode) => (
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8 mb-16">
+              {episodes.map((episode) => (
                 <EpisodeCard
-                key={episode._id}
+                  key={`${skip}-${episode._id}`}
                   episode={episode}
                   onPlay={setSelectedEpisode}
+                  onDetails={handleOpenDetails}
                 />
               ))}
             </div>
+            
+            {hasMore && (
+              <div className="flex justify-center pb-20">
+                <button
+                  onClick={loadMore}
+                  disabled={episodesFetching}
+                  className="px-10 py-4 rounded-2xl bg-[var(--bg-secondary)] border border-[var(--border-color)] text-[10px] font-black uppercase tracking-[0.2em] hover:bg-[var(--accent-primary)]/10 hover:border-[var(--accent-primary)] transition-all flex items-center gap-3"
+                >
+                  {episodesFetching ? <Loader className="w-4 h-4 animate-spin" /> : <RefreshCcw className="w-4 h-4" />}
+                  {episodesFetching ? 'Chargement...' : 'Charger la suite'}
+                </button>
+              </div>
+            )}
+          </>
         ) : (
           <div className="premium-glass p-16 rounded-[3rem] text-center max-w-2xl mx-auto border-dashed border-white/10">
             <div className="text-4xl mb-6 opacity-40">🧘</div>
@@ -158,11 +212,19 @@ export default function Dashboard() {
             <p className="text-slate-500 text-sm leading-relaxed mb-8">
               Vous n'avez pas encore d'épisodes ici. Abonnez-vous à vos podcasts favoris pour commencer votre collection.
             </p>
-            <button className="neon-button">Explorer les podcasts</button>
+            <Link to="/trending" className="neon-button">Explorer les podcasts</Link>
           </div>
         )}
       </main>
 
+      {/* Episode Slide-over Details */}
+      <EpisodeDetails 
+        episode={detailsEpisode}
+        isOpen={isDetailsOpen}
+        onClose={() => setIsDetailsOpen(false)}
+        onPlay={setSelectedEpisode}
+      />
+
       {/* Audio Player Management */}
       {selectedEpisode && (
         <AudioPlayer

frontend/src/pages/Trending.tsx

@@ -42,17 +42,49 @@ export default function Trending() {
     loadUser();
   }, []);
 
-  const { data: trendingData, isLoading } = useQuery({
-    queryKey: ['discover', 'trending', selectedGenre],
-    queryFn: () => discoveryService.getTrendingPodcasts(30, selectedGenre),
-    staleTime: 30 * 60 * 1000,
-  });
-
   const { data: subsData } = useQuery({
     queryKey: ['podcasts', 'subscriptions'],
     queryFn: () => podcastService.getUserSubscriptions(),
   });
 
+  const [skip, setSkip] = useState(0);
+  const [podcasts, setPodcasts] = useState<any[]>([]);
+  const [hasMore, setHasMore] = useState(true);
+  const LIMIT = 30;
+
+  const { data: trendingData, isLoading, isFetching } = useQuery({
+    queryKey: ['discover', 'trending', selectedGenre, skip],
+    queryFn: () => discoveryService.getTrendingPodcasts(LIMIT, selectedGenre),
+    staleTime: 30 * 60 * 1000,
+  });
+
+  useEffect(() => {
+    if (trendingData?.podcasts) {
+      if (skip === 0) {
+        setPodcasts(trendingData.podcasts);
+      } else {
+        setPodcasts(prev => {
+          const newItems = trendingData.podcasts.filter(
+            (p: any) => !prev.some(old => old.id === p.id)
+          );
+          return [...prev, ...newItems];
+        });
+      }
+      setHasMore(trendingData.podcasts.length === LIMIT);
+    }
+  }, [trendingData, skip]);
+
+  // Reset skip when genre changes
+  useEffect(() => {
+    setSkip(0);
+  }, [selectedGenre]);
+
+  const loadMore = () => {
+    if (hasMore && !isFetching) {
+      setSkip(prev => prev + LIMIT);
+    }
+  };
+
   const isSubscribed = (rssUrl: string) => {
     return subsData?.podcasts.some(p => p.rssUrl === rssUrl);
   };
@@ -132,15 +164,16 @@ export default function Trending() {
           </div>
         </div>
 
-        {isLoading ? (
+        {isLoading && skip === 0 ? (
           <div className="flex flex-col items-center justify-center py-32">
              <div className="w-12 h-12 rounded-full border-4 border-[var(--border-color)] border-t-[var(--accent-primary)] animate-spin mb-4" />
              <p className="text-[var(--text-secondary)] font-bold uppercase tracking-widest text-[10px]">Analyse des tendances...</p>
           </div>
-        ) : trendingData?.podcasts && trendingData.podcasts.length > 0 ? (
+        ) : podcasts.length > 0 ? (
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+          <>
-            {trendingData.podcasts.map((podcast, index) => (
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
-              <div key={podcast.id} className="group premium-glass rounded-[2.5rem] overflow-hidden flex flex-col hover:bg-[var(--bg-secondary)] transition-all duration-500">
+              {podcasts.map((podcast, index) => (
+                <div key={`${skip}-${podcast.id}`} className="group premium-glass rounded-[2.5rem] overflow-hidden flex flex-col hover:bg-[var(--bg-secondary)] transition-all duration-500">
                   <div className="relative aspect-[16/10] overflow-hidden">
                      {podcast.imageUrl ? (
                        <img
@@ -195,6 +228,20 @@ export default function Trending() {
                 </div>
               ))}
             </div>
+
+            {hasMore && (
+              <div className="flex justify-center pb-32">
+                 <button 
+                  onClick={loadMore}
+                  disabled={isFetching}
+                  className="px-10 py-4 rounded-2xl bg-[var(--bg-secondary)] border border-[var(--border-color)] text-[10px] font-black uppercase tracking-[0.2em] hover:bg-[var(--accent-primary)]/10 hover:border-[var(--accent-primary)] transition-all flex items-center gap-3"
+                 >
+                    {isFetching ? <Loader className="w-4 h-4 animate-spin" /> : <TrendingUp className="w-4 h-4" />}
+                    {isFetching ? 'Chargement...' : 'Charger la suite'}
+                 </button>
+              </div>
+            )}
+          </>
         ) : (
            <div className="premium-glass p-20 rounded-[3rem] text-center">
               <Sparkles className="w-12 h-12 text-slate-700 mx-auto mb-6" />