feat(channel): page details chaine multi-providers avec onglets et infinite scroll

- Strategy Pattern front: ChannelProviderInterface + 6 providers (yt/dm/tw/pt/od/ru) + factory (ids longs/courts)
- ChannelContentService: cache par onglet/tri/recherche (TTL 5min), pagination nextPage
- ChannelPage: header (banniere/avatar/subs/description ...plus), tabs dynamiques par capabilities, grilles videos/shorts 9:16/playlists/live, recherche debounced, tri recent/populaire, infinite scroll IntersectionObserver, skeletons/empty/error
- Backend: GET /api/channels/:provider/:id/content (videos/shorts/playlists/live) natif par provider

src/components/themes/theme-page.component.html

@@ -1,8 +1,27 @@
 <div class="container mx-auto p-4 sm:p-6">
-  <h2 class="text-3xl font-bold mb-6 text-slate-100 border-l-4 border-red-500 pl-4 flex items-center gap-2">
+  <h2 class="text-3xl font-bold mb-4 text-slate-100 border-l-4 border-red-500 pl-4 flex items-center gap-2">
     <span>{{ themeLabel() }}</span>
   </h2>
 
+  <!-- Filtre Vidéos / Shorts : les deux formats ne sont plus mélangés sans contrôle -->
+  <div class="flex items-center gap-2 mb-6" role="tablist" aria-label="Filtrer vidéos ou shorts">
+    <button (click)="setContentFilter('all')" [attr.aria-pressed]="contentFilter() === 'all'"
+            class="px-3 py-1.5 rounded-full text-sm border transition-colors"
+            [class]="contentFilter() === 'all' ? 'bg-red-600 border-red-500 text-white' : 'bg-slate-800 border-slate-700 text-slate-300 hover:bg-slate-700'">
+      Tout
+    </button>
+    <button (click)="setContentFilter('videos')" [attr.aria-pressed]="contentFilter() === 'videos'"
+            class="px-3 py-1.5 rounded-full text-sm border transition-colors"
+            [class]="contentFilter() === 'videos' ? 'bg-red-600 border-red-500 text-white' : 'bg-slate-800 border-slate-700 text-slate-300 hover:bg-slate-700'">
+      Vidéos
+    </button>
+    <button (click)="setContentFilter('shorts')" [attr.aria-pressed]="contentFilter() === 'shorts'"
+            class="px-3 py-1.5 rounded-full text-sm border transition-colors"
+            [class]="contentFilter() === 'shorts' ? 'bg-red-600 border-red-500 text-white' : 'bg-slate-800 border-slate-700 text-slate-300 hover:bg-slate-700'">
+      Shorts
+    </button>
+  </div>
+
   <div class="space-y-10">
     <section *ngFor="let b of blocks()">
       <div class="flex items-center justify-between mb-3">
@@ -18,10 +37,13 @@
       <!-- Error / empty -->
       <div *ngIf="!b.loading && b.error" class="text-amber-300">{{ b.error }}</div>
       <div *ngIf="!b.loading && !b.error && b.items.length === 0" class="text-slate-400">{{ 'empty.noItems' | t }}</div>
+      <div *ngIf="!b.loading && !b.error && b.items.length > 0 && filteredItems(b).length === 0" class="text-slate-400">
+        Aucun {{ contentFilter() === 'shorts' ? 'Short' : 'vidéo' }} pour ce fournisseur — essayez l'autre filtre.
+      </div>
 
       <!-- Grid -->
-      <div *ngIf="!b.loading && !b.error && b.items.length" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
-        <a *ngFor="let v of b.items"
+      <div *ngIf="!b.loading && !b.error && filteredItems(b).length" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
+        <a *ngFor="let v of filteredItems(b)"
            [routerLink]="['/watch', v.videoId]"
            [queryParams]="watchQueryParams(b.provider, v)"
            [state]="{ video: v }"
@@ -31,6 +53,10 @@
             <div class="absolute top-2 right-2">
               <app-provider-badge [provider]="b.provider"></app-provider-badge>
             </div>
+            <div class="absolute top-2 left-2 flex gap-1">
+              <span *ngIf="kindOf(v, b.provider) === 'short'" class="bg-red-600 text-white text-[11px] font-bold px-1.5 py-0.5 rounded">SHORT</span>
+              <span *ngIf="kindOf(v, b.provider) === 'live'" class="bg-purple-600 text-white text-[11px] font-bold px-1.5 py-0.5 rounded">LIVE</span>
+            </div>
             <div class="absolute bottom-2 right-2 bg-black/70 text-white text-xs px-2 py-0.5 rounded" *ngIf="v.duration && v.duration > 0">
               {{ v.duration | duration }}
             </div>