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

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>
-                  <p className="text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-4 truncate">{podcast.author || 'Inconnu'}</p>
+                  <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-[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-white text-obsidian hover:bg-accent-indigo hover:text-white'
+                        ? 'bg-[var(--accent-secondary)]/10 text-[var(--accent-secondary)] border border-[var(--accent-secondary)]/20'
+                        : '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="text-slate-500 text-xs">Vérifiez l'orthographe ou changez de type de recherche.</p>
+            <p className="font-bold uppercase tracking-widest text-sm mb-2">Aucun résultat sur iTunes FR</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
-  const { data: episodesData, isLoading: episodesLoading } = useQuery({
-    queryKey: ['episodes', 'latest'],
-    queryFn: () => episodeService.getLatestEpisodes(30),
+  // Fetch episodes with pagination
+  const { data: episodesData, isLoading: episodesLoading, isFetching: episodesFetching } = useQuery({
+    queryKey: ['episodes', 'latest', skip],
+    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
-  const episodesInProgress = episodesData?.episodes?.filter(e => e.progress && !e.progress.isCompleted) || [];
+  // Extract episodes in progress (using all loaded episodes)
+  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 ? (
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
-            {episodesData.episodes.map((episode) => (
-              <EpisodeCard
-                key={episode._id}
-                episode={episode}
-                onPlay={setSelectedEpisode}
-              />
-            ))}
-          </div>
+        ) : episodes.length > 0 ? (
+          <>
+            <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={`${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,69 +164,84 @@ 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 ? (
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-            {trendingData.podcasts.map((podcast, index) => (
-              <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-200 to-slate-400 dark:from-slate-800 dark:to-obsididan flex items-center justify-center text-4xl">🎙️</div>
-                   )}
-                   <div className="absolute top-4 left-4 px-3 py-1 rounded-full bg-black/40 backdrop-blur-md border border-white/10 text-[10px] font-black text-white uppercase tracking-widest">
-                      Rank #{index + 1}
-                   </div>
-                   <div className="absolute inset-0 bg-gradient-to-t from-[var(--bg-primary)] via-transparent to-transparent opacity-60" />
-                </div>
+        ) : podcasts.length > 0 ? (
+          <>
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
+              {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
+                         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-200 to-slate-400 dark:from-slate-800 dark:to-obsididan flex items-center justify-center text-4xl">🎙️</div>
+                     )}
+                     <div className="absolute top-4 left-4 px-3 py-1 rounded-full bg-black/40 backdrop-blur-md border border-white/10 text-[10px] font-black text-white uppercase tracking-widest">
+                        Rank #{index + 1}
+                     </div>
+                     <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-1 flex flex-col">
-                  <h3 className="text-lg font-bold mb-2 line-clamp-2 leading-tight group-hover:text-[var(--accent-primary)] transition-colors">
-                    {podcast.title}
-                  </h3>
-                  {podcast.author && (
-                    <p className="text-xs font-bold text-[var(--text-secondary)] uppercase tracking-widest mb-4 truncate">{podcast.author}</p>
-                  )}
-                  <p className="text-xs text-[var(--text-secondary)] line-clamp-3 mb-6 leading-relaxed flex-1 opacity-80">
-                    {podcast.description}
-                  </p>
-                  
-                  <button
-                    onClick={() => handleSubscribe(podcast)}
-                    disabled={subscribingId === podcast.id || subscribeMutation.isPending || isSubscribed(podcast.rssUrl)}
-                    className={`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-[var(--accent-secondary)]/10 text-[var(--accent-secondary)] border border-[var(--accent-secondary)]/20 cursor-default'
-                        : 'bg-[var(--text-primary)] text-[var(--bg-primary)] hover:bg-[var(--accent-primary)] hover:text-white shadow-lg active:scale-95'
-                    }`}
-                  >
-                    {subscribingId === podcast.id ? (
-                      <Loader className="w-4 h-4 animate-spin" />
-                    ) : isSubscribed(podcast.rssUrl) ? (
-                      <>
-                        <Check className="w-4 h-4" />
-                        À l'écoute
-                      </>
-                    ) : (
-                      <>
-                        <Plus className="w-4 h-4" />
-                        S'abonner
-                      </>
+                  <div className="p-6 flex-1 flex flex-col">
+                    <h3 className="text-lg font-bold mb-2 line-clamp-2 leading-tight group-hover:text-[var(--accent-primary)] transition-colors">
+                      {podcast.title}
+                    </h3>
+                    {podcast.author && (
+                      <p className="text-xs font-bold text-[var(--text-secondary)] uppercase tracking-widest mb-4 truncate">{podcast.author}</p>
                     )}
-                  </button>
+                    <p className="text-xs text-[var(--text-secondary)] line-clamp-3 mb-6 leading-relaxed flex-1 opacity-80">
+                      {podcast.description}
+                    </p>
+                    
+                    <button
+                      onClick={() => handleSubscribe(podcast)}
+                      disabled={subscribingId === podcast.id || subscribeMutation.isPending || isSubscribed(podcast.rssUrl)}
+                      className={`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-[var(--accent-secondary)]/10 text-[var(--accent-secondary)] border border-[var(--accent-secondary)]/20 cursor-default'
+                          : 'bg-[var(--text-primary)] text-[var(--bg-primary)] hover:bg-[var(--accent-primary)] hover:text-white shadow-lg active:scale-95'
+                      }`}
+                    >
+                      {subscribingId === podcast.id ? (
+                        <Loader className="w-4 h-4 animate-spin" />
+                      ) : isSubscribed(podcast.rssUrl) ? (
+                        <>
+                          <Check className="w-4 h-4" />
+                          À l'écoute
+                        </>
+                      ) : (
+                        <>
+                          <Plus className="w-4 h-4" />
+                          S'abonner
+                        </>
+                      )}
+                    </button>
+                  </div>
                 </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>
+            )}
+          </>
         ) : (
            <div className="premium-glass p-20 rounded-[3rem] text-center">
               <Sparkles className="w-12 h-12 text-slate-700 mx-auto mb-6" />