From a70d7b9797edc40efbb3bb208d5f2ae35d7ad591 Mon Sep 17 00:00:00 2001
From: Bruno Charest <bruno.charest@gmail.com>
Date: Sat, 26 Sep 2026 09:56:04 -0400
Subject: [PATCH] feat(watch,themes): transcript en sidebar, seek fiable,
 player instantane, bande themes repliable

- watch: panneau transcription deplace en tete de sidebar au-dessus de
  A suivre (+ scroll auto a l'ouverture sur mobile)
- seek transcript: seekTo postMessage YouTube (sans rechargement),
  time= Twitch VOD, t= Odysee, start= Rumble (start/dm/pt existants)
- watch: lecteur monte des les parametres de route (embed natif),
  squelettes partiels pendant /details au lieu du plein ecran
- themes-nav: bouton replier/deplier persistant (localStorage),
  barre fine avec theme actif quand repliee, cles i18n FR/EN
---
 .../themes/themes-nav.component.html          |   36 +-
 src/components/themes/themes-nav.component.ts |   25 +-
 src/components/watch/watch.component.html     | 1022 +++++++++--------
 src/components/watch/watch.component.ts       |   77 +-
 src/services/i18n.service.ts                  |   42 +
 5 files changed, 694 insertions(+), 508 deletions(-)

diff --git a/src/components/themes/themes-nav.component.html b/src/components/themes/themes-nav.component.html
index f700cc7..cb9d1a9 100644
--- a/src/components/themes/themes-nav.component.html
+++ b/src/components/themes/themes-nav.component.html
@@ -1,4 +1,19 @@
-<nav class="sticky top-16 left-0 right-0 z-40 w-full relative"
+@if (collapsed()) {
+  <!-- Barre repliée : fine, rouvrable à tout moment -->
+  <div class="sticky top-16 left-0 right-0 z-40 flex w-full items-center gap-2 border-b border-slate-700/60 bg-slate-800/60 px-3 py-1 backdrop-blur-sm">
+    <span class="text-xs font-medium text-slate-400">{{ 'themes.title' | t : 'Thèmes' }}</span>
+    @if (activeThemeLabel(); as label) {
+      <span class="rounded-full border border-red-500/60 bg-slate-100/10 px-2 py-0.5 text-xs text-white">{{ label }}</span>
+    }
+    <button type="button" (click)="toggleCollapsed()" [attr.aria-expanded]="false" aria-controls="themes-bar"
+            [title]="'themes.show' | t : 'Afficher la bande des thèmes'"
+            class="ml-auto inline-flex items-center gap-1 rounded-full px-2 py-1 text-xs font-semibold text-slate-300 transition hover:bg-slate-700 hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-red-500">
+      <span>{{ 'themes.show' | t : 'Afficher' }}</span>
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" /></svg>
+    </button>
+  </div>
+} @else {
+<nav id="themes-bar" class="sticky top-16 left-0 right-0 z-40 w-full relative"
      [ngClass]="{
        'bg-slate-800 border-b border-slate-700': isDarkTheme(),
        'bg-slate-900 border-b border-slate-800': isBlackTheme(),
@@ -24,6 +39,18 @@
     »
   </button>
 
+  <!-- Replier la bande -->
+  <button type="button" (click)="toggleCollapsed()" [attr.aria-expanded]="true" aria-controls="themes-bar"
+          [title]="'themes.hide' | t : 'Masquer la bande des thèmes'"
+          class="absolute right-12 top-1/2 z-10 hidden h-9 w-9 -translate-y-1/2 items-center justify-center rounded-full shadow transition focus:outline-none focus-visible:ring-2 focus-visible:ring-red-500 md:flex"
+          [ngClass]="{
+            'bg-white/90 border border-slate-300 text-slate-700 hover:bg-slate-100': isLightTheme(),
+            'bg-slate-800/90 border border-slate-700 text-slate-200 hover:bg-slate-700': isDarkTheme() || isBlackTheme() || isBlueTheme()
+          }"
+          aria-label="Masquer la bande des thèmes">
+    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clip-rule="evenodd" /></svg>
+  </button>
+
   <div class="w-full overflow-x-auto no-scrollbar" #scroll (wheel)="onWheel($event)">
     <ul role="tablist" aria-label="Themes" class="flex gap-2 px-12 py-2 min-w-max items-center">
       <li *ngFor="let t of displayedThemes(); let i = index" class="shrink-0">
@@ -45,6 +72,13 @@
           <span>{{ themesSvc.i18nLabel(t) }}</span>
         </button>
       </li>
+      <li class="shrink-0 md:hidden">
+        <button type="button" (click)="toggleCollapsed()"
+                class="px-3 py-1.5 rounded-full text-xs font-semibold text-slate-400 border border-slate-700 whitespace-nowrap">
+          {{ 'themes.hide' | t : 'Masquer' }}
+        </button>
+      </li>
     </ul>
   </div>
 </nav>
+}
diff --git a/src/components/themes/themes-nav.component.ts b/src/components/themes/themes-nav.component.ts
index 172f01b..35bb13b 100644
--- a/src/components/themes/themes-nav.component.ts
+++ b/src/components/themes/themes-nav.component.ts
@@ -2,12 +2,15 @@ import { ChangeDetectionStrategy, Component, ElementRef, QueryList, ViewChild, V
 import { CommonModule } from '@angular/common';
 import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';
 import { ThemesService } from '../../services/themes.service';
+import { TranslatePipe } from '../../pipes/translate.pipe';
+
+const THEMES_BAR_COLLAPSED_KEY = 'newtube.themesBarCollapsed';
 
 @Component({
   selector: 'app-themes-nav',
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [CommonModule],
+  imports: [CommonModule, TranslatePipe],
   templateUrl: './themes-nav.component.html'
 })
 export class ThemesNavComponent implements OnDestroy {
@@ -19,6 +22,26 @@ export class ThemesNavComponent implements OnDestroy {
   activeSlug = this.themesSvc.activeSlug;
   displayedThemes = () => this.themes();
 
+  /** Bande repliée/dépliée (persistée) : la barre reste masquable en permanence. */
+  collapsed = signal<boolean>((() => {
+    try { return localStorage.getItem(THEMES_BAR_COLLAPSED_KEY) === '1'; } catch { return false; }
+  })());
+
+  toggleCollapsed(): void {
+    const next = !this.collapsed();
+    this.collapsed.set(next);
+    try { localStorage.setItem(THEMES_BAR_COLLAPSED_KEY, next ? '1' : '0'); } catch {}
+  }
+
+  activeThemeLabel(): string {
+    try {
+      const slug = this.activeSlug();
+      const found = this.themes().find((t) => t.slug === slug);
+      if (found) return this.themesSvc.i18nLabel(found);
+    } catch {}
+    return '';
+  }
+
   @ViewChildren('pill', { read: ElementRef }) pills!: QueryList<ElementRef<HTMLButtonElement>>;
   @ViewChild('scroll', { static: false }) scrollRef?: ElementRef<HTMLDivElement>;
 
diff --git a/src/components/watch/watch.component.html b/src/components/watch/watch.component.html
index 4d893ee..cda1cf0 100644
--- a/src/components/watch/watch.component.html
+++ b/src/components/watch/watch.component.html
@@ -1,15 +1,536 @@
 <div class="mx-auto w-full max-w-7xl px-4 py-4 sm:px-6 lg:px-8 lg:py-6">
-  @if (loading()) {
-    <div class="animate-pulse grid gap-6 lg:grid-cols-[minmax(0,1fr)_360px]">
+  @if (video(); as v) {
+    <div class="grid gap-6 lg:grid-cols-[minmax(0,1fr)_360px] xl:gap-8">
+      <!-- ============ Colonne principale ============ -->
+      <div class="min-w-0">
+        <!-- Lecteur : monté dès que l'URL d'embed est calculable (route),
+             sans attendre /details, suggestions ou historique. -->
+        <section aria-label="Lecteur vidéo" class="overflow-hidden rounded-2xl bg-black shadow-2xl ring-1 ring-white/10">
+          <div class="aspect-video">
+            @if (embedUrl(); as src) {
+              <iframe #embedFrame class="h-full w-full" [src]="src" frameborder="0"
+                      referrerpolicy="origin"
+                      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                      allowfullscreen title="Lecteur vidéo"></iframe>
+            } @else if (videoSource()) {
+              <app-video-player
+                [videoSource]="videoSource()"
+                [startPositionSeconds]="startPositionSeconds()"
+                [watchHistoryId]="watchHistoryId()"
+              ></app-video-player>
+            } @else {
+              <div class="flex h-full w-full items-center justify-center gap-3 text-slate-400" aria-label="Chargement du lecteur">
+                <svg class="h-8 w-8 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true">
+                  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                </svg>
+                <span class="text-sm">Chargement du lecteur…</span>
+              </div>
+            }
+          </div>
+        </section>
+
+        @if (loading()) {
+          <!-- Squelette des métadonnées pendant /details (le player joue déjà) -->
+          <div class="mt-4 animate-pulse space-y-3" aria-hidden="true">
+            <div class="h-6 w-3/4 rounded bg-slate-800"></div>
+            <div class="h-4 w-1/3 rounded bg-slate-800"></div>
+            <div class="flex items-center gap-3 rounded-2xl border border-slate-700/60 bg-slate-800/50 p-4">
+              <div class="h-11 w-11 rounded-full bg-slate-800"></div>
+              <div class="h-4 w-40 rounded bg-slate-800"></div>
+            </div>
+          </div>
+        } @else {
+          @if (availableQualities().length > 0) {
+            <div class="mt-3 flex items-center gap-2 text-sm text-slate-400">
+              <label for="qualitySel" class="font-medium">Qualité</label>
+              <select id="qualitySel" #qsel class="rounded-lg border border-slate-700 bg-slate-800 px-2 py-1 text-sm text-slate-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-red-400"
+                      (change)="onSelectQuality(qsel.value)">
+                <option value="">Auto</option>
+                @for (q of availableQualities(); track q) {
+                  <option [value]="q">{{ q }}</option>
+                }
+              </select>
+            </div>
+          }
+
+          <!-- Titre + métadonnées -->
+          <section class="mt-4" aria-label="Informations vidéo">
+            <h1 class="text-xl font-bold leading-snug text-white sm:text-2xl">{{ v.title || 'Vidéo sans titre' }}</h1>
+            <p class="mt-1.5 text-sm text-slate-400">
+              {{ formatViewsFr(v.views) }} <span aria-hidden="true" class="mx-1">•</span> {{ formatDateAbsFr(v.uploadedDate) }}
+              @if (v.duration > 0) {
+                <span aria-hidden="true" class="mx-1">•</span> {{ v.duration | duration }}
+              }
+            </p>
+          </section>
+
+          <!-- Chaîne + actions -->
+          <section class="mt-4 rounded-2xl border border-slate-700/60 bg-slate-800/50 p-3 sm:p-4" aria-label="Chaîne et actions">
+            <div class="flex flex-wrap items-center gap-3">
+              <a *ngIf="canSubscribe(); else plainIdentity"
+                 [routerLink]="['/channel', subscribeProvider(), subscribeExternalId()]"
+                 class="flex min-w-0 flex-1 items-center gap-3 rounded-xl p-1 transition hover:bg-slate-700/40 focus:outline-none focus-visible:ring-2 focus-visible:ring-red-400"
+                 title="Ouvrir la page de la chaîne">
+                @if (channelAvatarUrl(); as avatar) {
+                  <img [src]="avatar" [alt]="v.uploaderName" (error)="onAvatarError()"
+                       class="h-11 w-11 shrink-0 rounded-full bg-slate-700 object-cover" loading="lazy" referrerpolicy="no-referrer">
+                } @else {
+                  <div class="flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-slate-700 text-lg font-bold text-slate-200"
+                       [attr.aria-label]="v.uploaderName">{{ channelInitial() }}</div>
+                }
+                <div class="min-w-0">
+                  <div class="truncate font-semibold text-slate-100">{{ v.uploaderName || channelMeta()?.title || 'Chaîne inconnue' }}</div>
+                  @if (channelSubsLabel(); as subs) {
+                    <div class="text-sm text-slate-400">{{ subs }} abonnés</div>
+                  }
+                </div>
+              </a>
+              <ng-template #plainIdentity>
+                <div class="flex min-w-0 flex-1 items-center gap-3">
+                  @if (channelAvatarUrl(); as avatar) {
+                    <img [src]="avatar" [alt]="v.uploaderName" (error)="onAvatarError()"
+                         class="h-11 w-11 shrink-0 rounded-full bg-slate-700 object-cover" loading="lazy" referrerpolicy="no-referrer">
+                  } @else {
+                    <div class="flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-slate-700 text-lg font-bold text-slate-200"
+                         [attr.aria-label]="v.uploaderName">{{ channelInitial() }}</div>
+                  }
+                  <div class="min-w-0">
+                    <div class="truncate font-semibold text-slate-100">{{ v.uploaderName || channelMeta()?.title || 'Chaîne inconnue' }}</div>
+                    @if (channelSubsLabel(); as subs) {
+                      <div class="text-sm text-slate-400">{{ subs }} abonnés</div>
+                    }
+                  </div>
+                </div>
+              </ng-template>
+              @if (canSubscribe() && isLoggedIn()) {
+                <span title="Raccourci clavier : S">
+                  <app-subscribe-button
+                    [provider]="subscribeProvider()!"
+                    [externalId]="subscribeExternalId()!"
+                    [channelMeta]="channelMeta()"
+                    (subscribed)="onSubscribedFromWatch($event)"
+                    (unsubscribed)="onUnsubscribedFromWatch()">
+                  </app-subscribe-button>
+                </span>
+              } @else if (canSubscribe() && !isLoggedIn()) {
+                <a routerLink="/auth/login" title="Connectez-vous pour vous abonner (raccourci : S une fois connecté)"
+                   class="inline-flex items-center gap-2 rounded-lg border border-slate-600 bg-slate-800/70 px-3 py-1.5 text-sm font-semibold text-slate-200 transition hover:bg-slate-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-red-400">
+                  S'abonner
+                </a>
+              }
+            </div>
+            @if (subscribeError(); as err) {
+              <div class="mt-2 text-sm text-red-300" role="alert">{{ err }}</div>
+            }
+            @if (subServiceError(); as serr) {
+              <div class="mt-2 text-sm text-red-300" role="alert">{{ serr }}</div>
+            }
+
+            <!-- Barre d'actions -->
+            <div class="mt-3 flex flex-wrap items-center gap-2 border-t border-slate-700/60 pt-3" role="toolbar" aria-label="Actions vidéo">
+              <span class="inline-flex items-center gap-1.5 rounded-full bg-slate-700/70 px-3 py-1.5 text-sm text-slate-200" title="Mentions J'aime">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.43a2 2 0 001.106 1.787l.09.044a2 2 0 002.253-.334l.09-.092l3.535-3.536a2 2 0 00.586-1.414V5a2 2 0 00-2-2H9a2 2 0 00-2 2v5.333z" /></svg>
+                <span class="tabular-nums">{{ formatNumber(v.likes) }}</span>
+              </span>
+              @if (isLoggedIn()) {
+                <button (click)="toggleLike()" [disabled]="likeBusy()"
+                        [attr.aria-pressed]="liked()" [title]="liked() ? 'Ne plus aimer' : 'J\'aime'"
+                        class="inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-sm font-semibold transition focus:outline-none focus-visible:ring-2 focus-visible:ring-red-400 disabled:cursor-not-allowed disabled:opacity-60"
+                        [class.bg-red-600]="liked()" [class.text-white]="liked()"
+                        [class.bg-slate-700]="!liked()" [class.text-slate-200]="!liked()" [class.hover:bg-slate-600]="!liked()">
+                  <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" [attr.fill]="liked() ? 'currentColor' : 'none'" stroke="currentColor" stroke-width="2" aria-hidden="true">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 21s-6.716-4.248-9.193-6.725A6 6 0 0112 5.414 6 6 0 0121.193 14.275C18.716 16.752 12 21 12 21z" />
+                  </svg>
+                  <span>{{ liked() ? 'Aimée' : 'J\'aime' }}</span>
+                </button>
+                @if (likeError(); as lerr) {
+                  <span class="text-xs text-red-300" role="alert">{{ lerr }}</span>
+                }
+              }
+              @if (isLoggedIn()) {
+                <app-add-to-playlist [provider]="provider()" [videoId]="v.videoId" [title]="v.title" [thumbnail]="v.thumbnail"></app-add-to-playlist>
+              }
+              <button (click)="copyLink()" title="Copier le lien de la vidéo"
+                      class="inline-flex items-center gap-1.5 rounded-full bg-slate-700 px-3 py-1.5 text-sm font-semibold text-slate-200 transition hover:bg-slate-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-red-400">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+                  <path d="M16 1a3 3 0 013 3v10a3 3 0 01-3 3H6a3 3 0 01-3-3V4a3 3 0 013-3h10zm0 2H6a1 1 0 00-1 1v10a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1z"/>
+                  <path d="M18 7h2a3 3 0 013 3v10a3 3 0 01-3 3H10a3 3 0 01-3-3v-2h2v2a1 1 0 001 1h10a1 1 0 001-1V10a1 1 0 00-1-1h-2V7z"/>
+                </svg>
+                <span>{{ linkCopied() ? 'Lien copié !' : 'Partager' }}</span>
+              </button>
+              <button (click)="toggleTranscript()" [attr.aria-expanded]="transcriptOpen()" aria-controls="transcript-panel"
+                      [title]="transcriptOpen() ? 'Masquer la transcription' : 'Afficher la transcription'"
+                      class="inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-sm font-semibold transition focus:outline-none focus-visible:ring-2 focus-visible:ring-red-400"
+                      [class.bg-red-600]="transcriptOpen()" [class.text-white]="transcriptOpen()"
+                      [class.bg-slate-700]="!transcriptOpen()" [class.text-slate-200]="!transcriptOpen()" [class.hover:bg-slate-600]="!transcriptOpen()">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                  <path fill-rule="evenodd" d="M4 4a2 2 0 012-2h8a2 2 0 012 2v12a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 0v12h8V4H6zm1 2a1 1 0 011-1h4a1 1 0 110 2H8a1 1 0 01-1-1zm0 3a1 1 0 011-1h4a1 1 0 110 2H8a1 1 0 01-1-1zm0 3a1 1 0 011-1h2a1 1 0 110 2H8a1 1 0 01-1-1z" clip-rule="evenodd" />
+                </svg>
+                <span>Transcription</span>
+              </button>
+              @if (isLoggedIn()) {
+                <button (click)="openDownloadPanel()" title="Télécharger la vidéo"
+                        class="inline-flex items-center gap-1.5 rounded-full bg-slate-700 px-3 py-1.5 text-sm font-semibold text-slate-200 transition hover:bg-slate-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-red-400">
+                  <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                    <path d="M10 3a1 1 0 011 1v7l2.293-2.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L9 11V4a1 1 0 011-1z" />
+                    <path d="M4 17a1 1 0 011-1h10a1 1 0 110 2H5a1 1 0 01-1-1z" />
+                  </svg>
+                  <span>Télécharger</span>
+                </button>
+              }
+              <a [href]="openOnProviderUrl() || '#'" target="_blank" rel="noopener noreferrer"
+                 class="inline-flex items-center gap-1.5 rounded-full bg-slate-700 px-3 py-1.5 text-sm font-semibold text-slate-200 transition hover:bg-slate-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-red-400"
+                 [class.pointer-events-none]="!openOnProviderUrl()" [class.opacity-60]="!openOnProviderUrl()"
+                 title="Ouvrir sur le site du fournisseur">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                  <path d="M10 3a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 11-2 0V5.414l-7.293 7.293a1 1 0 01-1.414-1.414L14.586 4H11a1 1 0 01-1-1z"/>
+                  <path d="M5 4a1 1 0 011-1h3a1 1 0 110 2H7v8h8v-2a1 1 0 112 0v3a1 1 0 01-1 1H6a1 1 0 01-1-1V4z"/>
+                </svg>
+                <span>Ouvrir</span>
+              </a>
+            </div>
+          </section>
+
+          <!-- Description -->
+          <section class="mt-4 rounded-2xl border border-slate-700/60 bg-slate-800/50 p-4" aria-label="Description">
+            <h2 class="text-sm font-semibold uppercase tracking-wide text-slate-400">Description</h2>
+            <p class="mt-2 whitespace-pre-wrap text-sm leading-relaxed text-slate-200" [class.line-clamp-3]="!showFullDescription()">
+              {{ hasDescription() ? descriptionText() : 'Aucune description disponible.' }}
+            </p>
+            @if (showMoreAvailable()) {
+              <button (click)="toggleDescription()" class="mt-2 rounded text-sm font-semibold text-red-400 transition hover:text-red-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-red-400">
+                {{ showFullDescription() ? 'Réduire' : 'Afficher plus' }}
+              </button>
+            }
+          </section>
+
+          <!-- Téléchargement -->
+          @if (isLoggedIn() && downloadOpen()) {
+            <section class="mt-4 rounded-2xl border border-slate-700 bg-slate-800/70 p-4" aria-label="Téléchargement">
+              <div class="flex items-center justify-between gap-3">
+                <h2 class="font-semibold text-slate-100">Téléchargement</h2>
+                <button (click)="closeDownloadPanel()" title="Fermer le panneau de téléchargement"
+                        class="rounded-full p-1.5 text-slate-400 transition hover:bg-slate-700 hover:text-slate-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-red-400" aria-label="Fermer">
+                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" /></svg>
+                </button>
+              </div>
+              <div class="mt-3 flex flex-wrap items-end gap-4">
+                <div class="min-w-[240px] flex-1">
+                  <label for="fmtSel" class="mb-1 block text-sm text-slate-400">Format / Qualité</label>
+                  @if (formatsLoading()) {
+                    <div class="text-sm text-slate-400">Chargement des formats…</div>
+                  } @else if (downloadFormats().length > 0) {
+                    <select id="fmtSel" #fmtSel class="w-full rounded-lg border border-slate-700 bg-slate-900 px-2 py-2 text-slate-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-red-400"
+                            (change)="selectedFormatId.set(fmtSel.value || null)">
+                      <option value="">Auto (meilleur)</option>
+                      @for (f of downloadFormats(); track f.id) {
+                        <option [value]="f.id">{{ f.label }}</option>
+                      }
+                    </select>
+                  } @else if (downloadError()) {
+                    <div class="text-sm text-red-300">{{ downloadError() }}</div>
+                  } @else {
+                    <div class="text-sm text-slate-400">Aucun format disponible.</div>
+                  }
+                </div>
+                <div class="flex items-center gap-2">
+                  <input id="audioOnly" #audioChk type="checkbox" class="h-4 w-4 accent-red-500"
+                         (change)="audioOnly.set(audioChk.checked)" />
+                  <label for="audioOnly" class="text-sm text-slate-300">Audio uniquement</label>
+                </div>
+                <div class="ml-auto">
+                  @if (!jobId()) {
+                    <button (click)="startDownload()" class="rounded-lg bg-red-600 px-4 py-2 font-semibold text-white transition hover:bg-red-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-red-400">
+                      Démarrer
+                    </button>
+                  } @else {
+                    <button (click)="cancelDownload()" class="rounded-lg bg-slate-700 px-4 py-2 text-white transition hover:bg-slate-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-red-400">
+                      Annuler
+                    </button>
+                  }
+                </div>
+              </div>
+              @if (jobId()) {
+                <div class="mt-4">
+                  <div class="mb-1 flex items-center gap-2 text-sm text-slate-300">
+                    <span>Statut :</span>
+                    <span class="font-semibold">{{ jobState() || 'en attente' }}</span>
+                    <span aria-hidden="true">•</span>
+                    <span class="tabular-nums">Progression : {{ jobProgress() }} %</span>
+                  </div>
+                  <div class="h-2.5 w-full rounded-full bg-slate-900" role="progressbar" [attr.aria-valuenow]="jobProgress()" aria-valuemin="0" aria-valuemax="100">
+                    <div class="h-2.5 rounded-full bg-red-600 transition-all" [style.width.%]="jobProgress()"></div>
+                  </div>
+                </div>
+                @if (jobFileReady()) {
+                  <div class="mt-4 flex items-center gap-3">
+                    <button (click)="downloadFile()" class="rounded-lg bg-green-600 px-4 py-2 font-semibold text-white transition hover:bg-green-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-green-400">
+                      Télécharger le fichier
+                    </button>
+                    @if (jobFileSize(); as size) {
+                      <span class="text-sm text-slate-400">{{ formatBytes(size) }}</span>
+                    }
+                  </div>
+                }
+              }
+              @if (downloadError() && !formatsLoading()) {
+                <div class="mt-3 flex flex-wrap items-center gap-3" role="alert">
+                  <span class="text-sm text-red-300">{{ downloadError() }}</span>
+                  <button (click)="retryFormats()" class="rounded-full bg-slate-700 px-3 py-1 text-xs font-semibold text-slate-200 transition hover:bg-slate-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-red-400">
+                    Réessayer
+                  </button>
+                </div>
+              }
+            </section>
+          }
+
+          <!-- Commentaires -->
+          <section class="mt-8" aria-label="Commentaires">
+            <div class="mb-4 flex flex-wrap items-center justify-between gap-3">
+              <h2 class="text-xl font-bold text-white">{{ v.comments.length }} commentaire{{ v.comments.length > 1 ? 's' : '' }}</h2>
+              @if (v.comments.length > 0) {
+                <div class="flex items-center gap-2">
+                  <button (click)="onSummarizeComments()"
+                          [disabled]="isSummarizing() || !geminiReady"
+                          class="flex items-center gap-2 rounded-full bg-slate-700 px-3 py-2 text-sm font-semibold text-slate-100 transition hover:bg-slate-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-red-400 disabled:cursor-not-allowed disabled:bg-slate-800 disabled:text-slate-400">
+                    @if (isSummarizing()) {
+                      <svg class="h-5 w-5 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true">
+                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                      </svg>
+                      <span>Résumé en cours…</span>
+                    } @else {
+                      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-yellow-300" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                        <path fill-rule="evenodd" d="M10 3a1 1 0 011 1v2.586l1.707-1.707a1 1 0 111.414 1.414l-1.707 1.707H15a1 1 0 110 2h-2.586l1.707 1.707a1 1 0 11-1.414 1.414L11 12.414V15a1 1 0 11-2 0v-2.586l-1.707 1.707a1 1 0 11-1.414-1.414L7.586 11H5a1 1 0 110-2h2.586L5.793 7.293a1 1 0 111.414-1.414L9 7.586V5a1 1 0 011-1z" clip-rule="evenodd" />
+                      </svg>
+                      <span>Résumer les commentaires</span>
+                    }
+                  </button>
+                </div>
+              }
+            </div>
+            @if (!geminiReady && geminiReason && v.comments.length > 0) {
+              <div class="mb-4 text-xs text-amber-300">{{ geminiReason }}</div>
+            }
+            @if (isSummarizing() || summary() || summaryError()) {
+              <div class="mb-6">
+                @if (isSummarizing() && !summary() && !summaryError()) {
+                  <div class="animate-pulse rounded-xl bg-slate-800 p-4">
+                    <div class="mb-3 h-4 w-1/4 rounded bg-slate-700"></div>
+                    <div class="space-y-2">
+                      <div class="h-4 rounded bg-slate-700"></div>
+                      <div class="h-4 w-5/6 rounded bg-slate-700"></div>
+                      <div class="h-4 w-3/4 rounded bg-slate-700"></div>
+                    </div>
+                  </div>
+                } @else if (summary(); as summaryText) {
+                  <div class="rounded-xl border border-slate-700 bg-gradient-to-br from-slate-800 to-slate-800/50 p-4">
+                    <h3 class="flex items-center gap-2 text-lg font-bold text-yellow-300">
+                      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                        <path fill-rule="evenodd" d="M10 3a1 1 0 011 1v2.586l1.707-1.707a1 1 0 111.414 1.414l-1.707 1.707H15a1 1 0 110 2h-2.586l1.707 1.707a1 1 0 11-1.414 1.414L11 12.414V15a1 1 0 11-2 0v-2.586l-1.707 1.707a1 1 0 11-1.414-1.414L7.586 11H5a1 1 0 110-2h2.586L5.793 7.293a1 1 0 111.414-1.414L9 7.586V5a1 1 0 011-1z" clip-rule="evenodd" />
+                      </svg>
+                      <span>Résumé IA</span>
+                    </h3>
+                    <p class="mt-2 whitespace-pre-wrap text-slate-300">{{ summaryText }}</p>
+                  </div>
+                } @else if (summaryError(); as errorText) {
+                  <div class="rounded-xl border border-red-700 bg-red-900/50 p-4 text-red-300" role="alert">
+                    <p>{{ errorText }}</p>
+                  </div>
+                }
+              </div>
+            }
+            @if (v.comments.length > 0) {
+              <div class="space-y-5">
+                @for (comment of v.comments; track comment.author + comment.commentedTime) {
+                  <article class="flex items-start gap-3">
+                    <img [src]="comment.thumbnail" alt="" class="h-10 w-10 shrink-0 rounded-full bg-slate-700" loading="lazy">
+                    <div class="min-w-0 flex-1">
+                      <div class="flex flex-wrap items-center gap-x-2 text-sm">
+                        <span class="font-semibold text-slate-200">{{ comment.author }}</span>
+                        <span class="text-slate-500">{{ comment.commentedTime }}</span>
+                      </div>
+                      <p class="mt-1 break-words text-sm leading-relaxed text-slate-300">{{ comment.commentText }}</p>
+                    </div>
+                  </article>
+                }
+              </div>
+            } @else {
+              <p class="rounded-xl bg-slate-800/50 p-4 text-center text-sm text-slate-400">Aucun commentaire pour cette vidéo.</p>
+            }
+          </section>
+        }
+      </div>
+
+      <!-- ============ Sidebar : transcription puis suggestions ============ -->
+      <aside class="min-w-0" aria-label="Transcription et vidéos suivantes">
+        <div class="space-y-4 lg:sticky lg:top-4">
+          @if (loading()) {
+            <div class="animate-pulse space-y-4" aria-hidden="true">
+              @for (item of [1,2,3,4,5]; track item) {
+                <div class="flex items-start gap-3">
+                  <div class="h-24 w-40 shrink-0 rounded-xl bg-slate-800"></div>
+                  <div class="flex-1 space-y-2 pt-1">
+                    <div class="h-4 rounded bg-slate-800"></div>
+                    <div class="h-4 w-2/3 rounded bg-slate-800"></div>
+                  </div>
+                </div>
+              }
+            </div>
+          } @else {
+            @if (transcriptOpen()) {
+              <section id="transcript-panel" class="rounded-2xl border border-slate-700 bg-slate-800/70 p-4" role="region" aria-label="Transcription">
+                <div class="flex flex-wrap items-center gap-3">
+                  <h2 class="font-semibold text-slate-100">Transcription</h2>
+                  @if (transcriptAvailable() && transcriptLines().length > 0) {
+                    <span class="rounded-full bg-slate-700/70 px-2.5 py-0.5 text-xs tabular-nums text-slate-300">{{ transcriptCountLabel() }}</span>
+                  }
+                  <div class="ml-auto flex flex-wrap items-center gap-2">
+                    @if (transcriptLanguages().length > 0) {
+                      <label class="flex items-center gap-2 text-sm text-slate-400">
+                        Langue
+                        <select #langSel class="rounded-lg border border-slate-700 bg-slate-900 px-2 py-1 text-sm text-slate-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-red-400"
+                                [value]="selectedTranscriptLang()"
+                                (change)="onTranscriptLangChange(langSel.value)">
+                          @for (lang of transcriptLanguages(); track lang) {
+                            <option [value]="lang" [selected]="lang === selectedTranscriptLang()">{{ lang }}</option>
+                          }
+                        </select>
+                      </label>
+                    }
+                    @if (transcriptAvailable() && transcriptLines().length > 0) {
+                      <button (click)="toggleTranscriptAutoScroll()" [attr.aria-pressed]="transcriptAutoScroll()" title="Suivre la lecture automatiquement"
+                              class="rounded-full px-2.5 py-1 text-xs font-semibold transition focus:outline-none focus-visible:ring-2 focus-visible:ring-red-400"
+                              [class.bg-red-600]="transcriptAutoScroll()" [class.text-white]="transcriptAutoScroll()"
+                              [class.bg-slate-700]="!transcriptAutoScroll()" [class.text-slate-300]="!transcriptAutoScroll()">
+                        Suivi {{ transcriptAutoScroll() ? 'activé' : 'coupé' }}
+                      </button>
+                      <button (click)="copyTranscript()" title="Copier la transcription filtrée"
+                              class="rounded-full bg-slate-700 px-2.5 py-1 text-xs font-semibold text-slate-200 transition hover:bg-slate-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-red-400">
+                        {{ transcriptCopied() ? 'Copié !' : 'Copier' }}
+                      </button>
+                    }
+                  </div>
+                </div>
+                @if (transcriptAvailable() && transcriptLines().length > 0) {
+                  <div class="relative mt-3">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" /></svg>
+                    <input #tsearch type="search" placeholder="Rechercher dans la transcription…" [value]="transcriptSearch()"
+                           (input)="onTranscriptSearch(tsearch.value)" aria-label="Rechercher dans la transcription"
+                           class="w-full rounded-xl border border-slate-700 bg-slate-900 py-2 pl-9 pr-9 text-sm text-slate-200 placeholder:text-slate-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-red-400" />
+                    @if (transcriptSearch()) {
+                      <button (click)="clearTranscriptSearch()" title="Effacer la recherche" aria-label="Effacer la recherche"
+                              class="absolute right-2 top-1/2 -translate-y-1/2 rounded-full p-1 text-slate-400 transition hover:bg-slate-700 hover:text-slate-200">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" /></svg>
+                      </button>
+                    }
+                  </div>
+                }
+                @if (transcriptLoading()) {
+                  <div class="mt-4 space-y-2" aria-live="polite" aria-busy="true">
+                    @for (sk of [1,2,3,4,5]; track sk) {
+                      <div class="flex gap-3">
+                        <div class="h-4 w-12 shrink-0 rounded bg-slate-700"></div>
+                        <div class="h-4 flex-1 rounded bg-slate-700"></div>
+                      </div>
+                    }
+                    <p class="pt-1 text-sm text-slate-400">Chargement de la transcription…</p>
+                  </div>
+                } @else if (transcriptAvailable() && transcriptLines().length > 0) {
+                  @if (filteredTranscriptLines().length > 0) {
+                    <p class="mt-2 text-xs text-slate-500">Cliquez sur un horodatage pour sauter à ce passage.</p>
+                    <div class="mt-2 max-h-96 space-y-1 overflow-y-auto rounded-xl bg-slate-900/50 p-2" (scroll)="onTranscriptScroll($event)" tabindex="0" aria-label="Lignes de transcription">
+                      @for (line of filteredTranscriptLines(); track trackTranscriptLine($index, line); let i = $index) {
+                        <div [id]="'tr-line-' + i"
+                             class="flex items-baseline gap-3 rounded-lg px-2 py-1.5 text-sm transition"
+                             [class.bg-red-500/15]="i === transcriptActiveIndex()"
+                             [class.ring-1]="i === transcriptActiveIndex()" [class.ring-red-500/40]="i === transcriptActiveIndex()">
+                          <button (click)="seekTranscript(line.t)" [title]="'Aller à ' + formatTimestamp(line.t)"
+                                  class="shrink-0 rounded px-1 font-mono text-xs tabular-nums text-red-300 transition hover:bg-red-500/20 hover:text-red-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-red-400">
+                            {{ formatTimestamp(line.t) }}
+                          </button>
+                          <span class="min-w-0 flex-1 leading-relaxed" [class.text-white]="i === transcriptActiveIndex()" [class.text-slate-300]="i !== transcriptActiveIndex()">{{ line.text }}</span>
+                        </div>
+                      }
+                    </div>
+                  } @else {
+                    <div class="mt-3 rounded-xl bg-slate-900/50 p-4 text-center">
+                      <p class="text-sm text-slate-300">Aucun passage ne correspond à « {{ transcriptSearch() }} ».</p>
+                      <button (click)="clearTranscriptSearch()" class="mt-2 text-sm font-semibold text-red-400 hover:text-red-300">Effacer la recherche</button>
+                    </div>
+                  }
+                } @else {
+                  @if (transcriptReason() === 'no_subtitles' || (!transcriptError() && transcriptLanguages().length === 0)) {
+                    <div class="mt-3 rounded-xl bg-slate-900/50 p-4 text-center">
+                      <p class="text-sm text-slate-400">Aucun sous-titre disponible pour cette vidéo.</p>
+                    </div>
+                  } @else {
+                    <div class="mt-3 rounded-xl bg-slate-900/50 p-4 text-center">
+                      <p class="text-sm text-slate-400">{{ transcriptError() || 'Aucun sous-titre disponible pour cette vidéo.' }}</p>
+                      @if (transcriptRetryable()) {
+                        <button (click)="retryTranscript()"
+                                class="mt-3 inline-flex items-center gap-2 rounded-full bg-slate-700 px-3 py-1.5 text-sm font-semibold text-slate-100 transition hover:bg-slate-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-red-400">
+                          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                            <path fill-rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01-.61-1.276z" clip-rule="evenodd" />
+                          </svg>
+                          Réessayer
+                        </button>
+                      }
+                    </div>
+                  }
+                }
+              </section>
+            }
+            <section aria-label="Vidéos suivantes">
+              <h2 class="mb-3 text-lg font-bold text-white">À suivre</h2>
+              <div class="space-y-2">
+                @for (related of v.relatedStreams; track related.videoId) {
+                  <div class="group rounded-xl p-2 transition hover:bg-slate-800/60 focus-within:bg-slate-800/60">
+                    <a [routerLink]="['/watch', related.videoId]" [queryParams]="watchQueryParams(related)" [state]="{ video: related }" class="flex items-start gap-3 rounded-lg focus:outline-none focus-visible:ring-2 focus-visible:ring-red-400">
+                      <div class="relative w-40 shrink-0">
+                        <img [src]="related.thumbnail" [alt]="related.title" class="h-24 w-full rounded-xl object-cover" loading="lazy">
+                        <div class="absolute right-1.5 top-1.5">
+                          <app-provider-badge [provider]="related.provider"></app-provider-badge>
+                        </div>
+                        @if (related.duration && related.duration > 0) {
+                          <div class="absolute bottom-1.5 right-1.5 rounded bg-black/75 px-1.5 py-0.5 text-[10px] tabular-nums text-white">
+                            {{ related.duration | duration }}
+                          </div>
+                        }
+                      </div>
+                      <div class="min-w-0 flex-1">
+                        <h3 class="line-clamp-2 text-sm font-semibold leading-snug text-slate-100 group-hover:text-red-300">{{ related.title }}</h3>
+                        <div class="mt-1 text-xs tabular-nums text-slate-400">{{ formatNumber(related.views) }} vues</div>
+                      </div>
+                    </a>
+                    <div class="mt-1.5 pl-1">
+                      <app-channel-identity
+                        size="sm"
+                        [provider]="related.provider"
+                        [externalId]="related.channelExternalId ?? null"
+                        [avatarUrl]="related.channelAvatarUrl || related.uploaderAvatar || null"
+                        [name]="related.uploaderName || null"
+                      ></app-channel-identity>
+                    </div>
+                  </div>
+                } @empty {
+                  <p class="rounded-xl bg-slate-800/50 p-4 text-center text-sm text-slate-400">Aucune suggestion pour le moment.</p>
+                }
+              </div>
+            </section>
+          }
+        </div>
+      </aside>
+    </div>
+  } @else if (loading()) {
+    <!-- Premier affichage, avant même le placeholder vidéo -->
+    <div class="grid animate-pulse gap-6 lg:grid-cols-[minmax(0,1fr)_360px]" aria-hidden="true">
       <div>
         <div class="aspect-video rounded-2xl bg-slate-800"></div>
         <div class="mt-4 space-y-3">
           <div class="h-6 w-3/4 rounded bg-slate-800"></div>
           <div class="h-4 w-1/2 rounded bg-slate-800"></div>
-          <div class="flex items-center gap-3 pt-2">
-            <div class="h-10 w-10 rounded-full bg-slate-800"></div>
-            <div class="h-4 w-40 rounded bg-slate-800"></div>
-          </div>
         </div>
       </div>
       <div class="space-y-4">
@@ -24,495 +545,6 @@
         }
       </div>
     </div>
-  } @else if (video(); as v) {
-    <div class="grid gap-6 lg:grid-cols-[minmax(0,1fr)_360px] xl:gap-8">
-      <!-- ============ Colonne principale ============ -->
-      <div class="min-w-0">
-        <!-- Lecteur -->
-        <section aria-label="Lecteur vidéo" class="overflow-hidden rounded-2xl bg-black shadow-2xl ring-1 ring-white/10">
-          <div class="aspect-video">
-            @if (embedUrl(); as src) {
-              <iframe #embedFrame class="h-full w-full" [src]="src" frameborder="0"
-                      referrerpolicy="origin"
-                      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-                      allowfullscreen title="Lecteur vidéo"></iframe>
-            } @else {
-              <app-video-player
-                [videoSource]="videoSource()"
-                [startPositionSeconds]="startPositionSeconds()"
-                [watchHistoryId]="watchHistoryId()"
-              ></app-video-player>
-            }
-          </div>
-        </section>
-
-        @if (availableQualities().length > 0) {
-          <div class="mt-3 flex items-center gap-2 text-sm text-slate-400">
-            <label for="qualitySel" class="font-medium">Qualité</label>
-            <select id="qualitySel" #qsel class="rounded-lg border border-slate-700 bg-slate-800 px-2 py-1 text-sm text-slate-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-red-400"
-                    (change)="onSelectQuality(qsel.value)">
-              <option value="">Auto</option>
-              @for (q of availableQualities(); track q) {
-                <option [value]="q">{{ q }}</option>
-              }
-            </select>
-          </div>
-        }
-
-        <!-- Titre + métadonnées -->
-        <section class="mt-4" aria-label="Informations vidéo">
-          <h1 class="text-xl font-bold leading-snug text-white sm:text-2xl">{{ v.title || 'Vidéo sans titre' }}</h1>
-          <p class="mt-1.5 text-sm text-slate-400">
-            {{ formatViewsFr(v.views) }} <span aria-hidden="true" class="mx-1">•</span> {{ formatDateAbsFr(v.uploadedDate) }}
-            @if (v.duration > 0) {
-              <span aria-hidden="true" class="mx-1">•</span> {{ v.duration | duration }}
-            }
-          </p>
-        </section>
-
-        <!-- Chaîne + actions -->
-        <section class="mt-4 rounded-2xl border border-slate-700/60 bg-slate-800/50 p-3 sm:p-4" aria-label="Chaîne et actions">
-          <div class="flex flex-wrap items-center gap-3">
-            <a *ngIf="canSubscribe(); else plainIdentity"
-               [routerLink]="['/channel', subscribeProvider(), subscribeExternalId()]"
-               class="flex min-w-0 flex-1 items-center gap-3 rounded-xl p-1 transition hover:bg-slate-700/40 focus:outline-none focus-visible:ring-2 focus-visible:ring-red-400"
-               title="Ouvrir la page de la chaîne">
-              @if (channelAvatarUrl(); as avatar) {
-                <img [src]="avatar" [alt]="v.uploaderName" (error)="onAvatarError()"
-                     class="h-11 w-11 shrink-0 rounded-full bg-slate-700 object-cover" loading="lazy" referrerpolicy="no-referrer">
-              } @else {
-                <div class="flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-slate-700 text-lg font-bold text-slate-200"
-                     [attr.aria-label]="v.uploaderName">{{ channelInitial() }}</div>
-              }
-              <div class="min-w-0">
-                <div class="truncate font-semibold text-slate-100">{{ v.uploaderName || channelMeta()?.title || 'Chaîne inconnue' }}</div>
-                @if (channelSubsLabel(); as subs) {
-                  <div class="text-sm text-slate-400">{{ subs }} abonnés</div>
-                }
-              </div>
-            </a>
-            <ng-template #plainIdentity>
-              <div class="flex min-w-0 flex-1 items-center gap-3">
-                @if (channelAvatarUrl(); as avatar) {
-                  <img [src]="avatar" [alt]="v.uploaderName" (error)="onAvatarError()"
-                       class="h-11 w-11 shrink-0 rounded-full bg-slate-700 object-cover" loading="lazy" referrerpolicy="no-referrer">
-                } @else {
-                  <div class="flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-slate-700 text-lg font-bold text-slate-200"
-                       [attr.aria-label]="v.uploaderName">{{ channelInitial() }}</div>
-                }
-                <div class="min-w-0">
-                  <div class="truncate font-semibold text-slate-100">{{ v.uploaderName || channelMeta()?.title || 'Chaîne inconnue' }}</div>
-                  @if (channelSubsLabel(); as subs) {
-                    <div class="text-sm text-slate-400">{{ subs }} abonnés</div>
-                  }
-                </div>
-              </div>
-            </ng-template>
-            @if (canSubscribe() && isLoggedIn()) {
-              <span title="Raccourci clavier : S">
-                <app-subscribe-button
-                  [provider]="subscribeProvider()!"
-                  [externalId]="subscribeExternalId()!"
-                  [channelMeta]="channelMeta()"
-                  (subscribed)="onSubscribedFromWatch($event)"
-                  (unsubscribed)="onUnsubscribedFromWatch()">
-                </app-subscribe-button>
-              </span>
-            } @else if (canSubscribe() && !isLoggedIn()) {
-              <a routerLink="/auth/login" title="Connectez-vous pour vous abonner (raccourci : S une fois connecté)"
-                 class="inline-flex items-center gap-2 rounded-lg border border-slate-600 bg-slate-800/70 px-3 py-1.5 text-sm font-semibold text-slate-200 transition hover:bg-slate-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-red-400">
-                S'abonner
-              </a>
-            }
-          </div>
-          @if (subscribeError(); as err) {
-            <div class="mt-2 text-sm text-red-300" role="alert">{{ err }}</div>
-          }
-          @if (subServiceError(); as serr) {
-            <div class="mt-2 text-sm text-red-300" role="alert">{{ serr }}</div>
-          }
-
-          <!-- Barre d'actions -->
-          <div class="mt-3 flex flex-wrap items-center gap-2 border-t border-slate-700/60 pt-3" role="toolbar" aria-label="Actions vidéo">
-            <span class="inline-flex items-center gap-1.5 rounded-full bg-slate-700/70 px-3 py-1.5 text-sm text-slate-200" title="Mentions J'aime">
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.43a2 2 0 001.106 1.787l.09.044a2 2 0 002.253-.334l.09-.092l3.535-3.536a2 2 0 00.586-1.414V5a2 2 0 00-2-2H9a2 2 0 00-2 2v5.333z" /></svg>
-              <span class="tabular-nums">{{ formatNumber(v.likes) }}</span>
-            </span>
-            @if (isLoggedIn()) {
-              <button (click)="toggleLike()" [disabled]="likeBusy()"
-                      [attr.aria-pressed]="liked()" [title]="liked() ? 'Ne plus aimer' : 'J\'aime'"
-                      class="inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-sm font-semibold transition focus:outline-none focus-visible:ring-2 focus-visible:ring-red-400 disabled:cursor-not-allowed disabled:opacity-60"
-                      [class.bg-red-600]="liked()" [class.text-white]="liked()"
-                      [class.bg-slate-700]="!liked()" [class.text-slate-200]="!liked()" [class.hover:bg-slate-600]="!liked()">
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" [attr.fill]="liked() ? 'currentColor' : 'none'" stroke="currentColor" stroke-width="2" aria-hidden="true">
-                  <path stroke-linecap="round" stroke-linejoin="round" d="M12 21s-6.716-4.248-9.193-6.725A6 6 0 0112 5.414 6 6 0 0121.193 14.275C18.716 16.752 12 21 12 21z" />
-                </svg>
-                <span>{{ liked() ? 'Aimée' : 'J\'aime' }}</span>
-              </button>
-              @if (likeError(); as lerr) {
-                <span class="text-xs text-red-300" role="alert">{{ lerr }}</span>
-              }
-            }
-            @if (isLoggedIn()) {
-              <app-add-to-playlist [provider]="provider()" [videoId]="v.videoId" [title]="v.title" [thumbnail]="v.thumbnail"></app-add-to-playlist>
-            }
-            <button (click)="copyLink()" title="Copier le lien de la vidéo"
-                    class="inline-flex items-center gap-1.5 rounded-full bg-slate-700 px-3 py-1.5 text-sm font-semibold text-slate-200 transition hover:bg-slate-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-red-400">
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
-                <path d="M16 1a3 3 0 013 3v10a3 3 0 01-3 3H6a3 3 0 01-3-3V4a3 3 0 013-3h10zm0 2H6a1 1 0 00-1 1v10a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1z"/>
-                <path d="M18 7h2a3 3 0 013 3v10a3 3 0 01-3 3H10a3 3 0 01-3-3v-2h2v2a1 1 0 001 1h10a1 1 0 001-1V10a1 1 0 00-1-1h-2V7z"/>
-              </svg>
-              <span>{{ linkCopied() ? 'Lien copié !' : 'Partager' }}</span>
-            </button>
-            <button (click)="toggleTranscript()" [attr.aria-expanded]="transcriptOpen()" aria-controls="transcript-panel"
-                    [title]="transcriptOpen() ? 'Masquer la transcription' : 'Afficher la transcription'"
-                    class="inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-sm font-semibold transition focus:outline-none focus-visible:ring-2 focus-visible:ring-red-400"
-                    [class.bg-red-600]="transcriptOpen()" [class.text-white]="transcriptOpen()"
-                    [class.bg-slate-700]="!transcriptOpen()" [class.text-slate-200]="!transcriptOpen()" [class.hover:bg-slate-600]="!transcriptOpen()">
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                <path fill-rule="evenodd" d="M4 4a2 2 0 012-2h8a2 2 0 012 2v12a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 0v12h8V4H6zm1 2a1 1 0 011-1h4a1 1 0 110 2H8a1 1 0 01-1-1zm0 3a1 1 0 011-1h4a1 1 0 110 2H8a1 1 0 01-1-1zm0 3a1 1 0 011-1h2a1 1 0 110 2H8a1 1 0 01-1-1z" clip-rule="evenodd" />
-              </svg>
-              <span>Transcription</span>
-            </button>
-            @if (isLoggedIn()) {
-              <button (click)="openDownloadPanel()" title="Télécharger la vidéo"
-                      class="inline-flex items-center gap-1.5 rounded-full bg-slate-700 px-3 py-1.5 text-sm font-semibold text-slate-200 transition hover:bg-slate-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-red-400">
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                  <path d="M10 3a1 1 0 011 1v7l2.293-2.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L9 11V4a1 1 0 011-1z" />
-                  <path d="M4 17a1 1 0 011-1h10a1 1 0 110 2H5a1 1 0 01-1-1z" />
-                </svg>
-                <span>Télécharger</span>
-              </button>
-            }
-            <a [href]="openOnProviderUrl() || '#'" target="_blank" rel="noopener noreferrer"
-               class="inline-flex items-center gap-1.5 rounded-full bg-slate-700 px-3 py-1.5 text-sm font-semibold text-slate-200 transition hover:bg-slate-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-red-400"
-               [class.pointer-events-none]="!openOnProviderUrl()" [class.opacity-60]="!openOnProviderUrl()"
-               title="Ouvrir sur le site du fournisseur">
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                <path d="M10 3a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 11-2 0V5.414l-7.293 7.293a1 1 0 01-1.414-1.414L14.586 4H11a1 1 0 01-1-1z"/>
-                <path d="M5 4a1 1 0 011-1h3a1 1 0 110 2H7v8h8v-2a1 1 0 112 0v3a1 1 0 01-1 1H6a1 1 0 01-1-1V4z"/>
-              </svg>
-              <span>Ouvrir</span>
-            </a>
-          </div>
-        </section>
-
-        <!-- Description -->
-        <section class="mt-4 rounded-2xl border border-slate-700/60 bg-slate-800/50 p-4" aria-label="Description">
-          <h2 class="text-sm font-semibold uppercase tracking-wide text-slate-400">Description</h2>
-          <p class="mt-2 whitespace-pre-wrap text-sm leading-relaxed text-slate-200" [class.line-clamp-3]="!showFullDescription()">
-            {{ hasDescription() ? descriptionText() : 'Aucune description disponible.' }}
-          </p>
-          @if (showMoreAvailable()) {
-            <button (click)="toggleDescription()" class="mt-2 text-sm font-semibold text-red-400 transition hover:text-red-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-red-400 rounded">
-              {{ showFullDescription() ? 'Réduire' : 'Afficher plus' }}
-            </button>
-          }
-        </section>
-
-        <!-- Téléchargement -->
-        @if (isLoggedIn() && downloadOpen()) {
-          <section class="mt-4 rounded-2xl border border-slate-700 bg-slate-800/70 p-4" aria-label="Téléchargement">
-            <div class="flex items-center justify-between gap-3">
-              <h2 class="font-semibold text-slate-100">Téléchargement</h2>
-              <button (click)="closeDownloadPanel()" title="Fermer le panneau de téléchargement"
-                      class="rounded-full p-1.5 text-slate-400 transition hover:bg-slate-700 hover:text-slate-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-red-400" aria-label="Fermer">
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" /></svg>
-              </button>
-            </div>
-            <div class="mt-3 flex flex-wrap items-end gap-4">
-              <div class="min-w-[240px] flex-1">
-                <label for="fmtSel" class="mb-1 block text-sm text-slate-400">Format / Qualité</label>
-                @if (formatsLoading()) {
-                  <div class="text-sm text-slate-400">Chargement des formats…</div>
-                } @else if (downloadFormats().length > 0) {
-                  <select id="fmtSel" #fmtSel class="w-full rounded-lg border border-slate-700 bg-slate-900 px-2 py-2 text-slate-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-red-400"
-                          (change)="selectedFormatId.set(fmtSel.value || null)">
-                    <option value="">Auto (meilleur)</option>
-                    @for (f of downloadFormats(); track f.id) {
-                      <option [value]="f.id">{{ f.label }}</option>
-                    }
-                  </select>
-                } @else if (downloadError()) {
-                  <div class="text-sm text-red-300">{{ downloadError() }}</div>
-                } @else {
-                  <div class="text-sm text-slate-400">Aucun format disponible.</div>
-                }
-              </div>
-              <div class="flex items-center gap-2">
-                <input id="audioOnly" #audioChk type="checkbox" class="h-4 w-4 accent-red-500"
-                       (change)="audioOnly.set(audioChk.checked)" />
-                <label for="audioOnly" class="text-sm text-slate-300">Audio uniquement</label>
-              </div>
-              <div class="ml-auto">
-                @if (!jobId()) {
-                  <button (click)="startDownload()" class="rounded-lg bg-red-600 px-4 py-2 font-semibold text-white transition hover:bg-red-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-red-400">
-                    Démarrer
-                  </button>
-                } @else {
-                  <button (click)="cancelDownload()" class="rounded-lg bg-slate-700 px-4 py-2 text-white transition hover:bg-slate-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-red-400">
-                    Annuler
-                  </button>
-                }
-              </div>
-            </div>
-            @if (jobId()) {
-              <div class="mt-4">
-                <div class="mb-1 flex items-center gap-2 text-sm text-slate-300">
-                  <span>Statut :</span>
-                  <span class="font-semibold">{{ jobState() || 'en attente' }}</span>
-                  <span aria-hidden="true">•</span>
-                  <span class="tabular-nums">Progression : {{ jobProgress() }} %</span>
-                </div>
-                <div class="h-2.5 w-full rounded-full bg-slate-900" role="progressbar" [attr.aria-valuenow]="jobProgress()" aria-valuemin="0" aria-valuemax="100">
-                  <div class="h-2.5 rounded-full bg-red-600 transition-all" [style.width.%]="jobProgress()"></div>
-                </div>
-              </div>
-              @if (jobFileReady()) {
-                <div class="mt-4 flex items-center gap-3">
-                  <button (click)="downloadFile()" class="rounded-lg bg-green-600 px-4 py-2 font-semibold text-white transition hover:bg-green-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-green-400">
-                    Télécharger le fichier
-                  </button>
-                  @if (jobFileSize(); as size) {
-                    <span class="text-sm text-slate-400">{{ formatBytes(size) }}</span>
-                  }
-                </div>
-              }
-            }
-            @if (downloadError() && !formatsLoading()) {
-              <div class="mt-3 flex flex-wrap items-center gap-3" role="alert">
-                <span class="text-sm text-red-300">{{ downloadError() }}</span>
-                <button (click)="retryFormats()" class="rounded-full bg-slate-700 px-3 py-1 text-xs font-semibold text-slate-200 transition hover:bg-slate-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-red-400">
-                  Réessayer
-                </button>
-              </div>
-            }
-          </section>
-        }
-
-        <!-- Transcription -->
-        @if (transcriptOpen()) {
-          <section id="transcript-panel" class="mt-4 rounded-2xl border border-slate-700 bg-slate-800/70 p-4" role="region" aria-label="Transcription">
-            <div class="flex flex-wrap items-center gap-3">
-              <h2 class="font-semibold text-slate-100">Transcription</h2>
-              @if (transcriptAvailable() && transcriptLines().length > 0) {
-                <span class="rounded-full bg-slate-700/70 px-2.5 py-0.5 text-xs tabular-nums text-slate-300">{{ transcriptCountLabel() }}</span>
-              }
-              <div class="ml-auto flex flex-wrap items-center gap-2">
-                @if (transcriptLanguages().length > 0) {
-                  <label class="flex items-center gap-2 text-sm text-slate-400">
-                    Langue
-                    <select #langSel class="rounded-lg border border-slate-700 bg-slate-900 px-2 py-1 text-sm text-slate-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-red-400"
-                            [value]="selectedTranscriptLang()"
-                            (change)="onTranscriptLangChange(langSel.value)">
-                      @for (lang of transcriptLanguages(); track lang) {
-                        <option [value]="lang" [selected]="lang === selectedTranscriptLang()">{{ lang }}</option>
-                      }
-                    </select>
-                  </label>
-                }
-                @if (transcriptAvailable() && transcriptLines().length > 0) {
-                  <button (click)="toggleTranscriptAutoScroll()" [attr.aria-pressed]="transcriptAutoScroll()" title="Suivre la lecture automatiquement"
-                          class="rounded-full px-2.5 py-1 text-xs font-semibold transition focus:outline-none focus-visible:ring-2 focus-visible:ring-red-400"
-                          [class.bg-red-600]="transcriptAutoScroll()" [class.text-white]="transcriptAutoScroll()"
-                          [class.bg-slate-700]="!transcriptAutoScroll()" [class.text-slate-300]="!transcriptAutoScroll()">
-                    Suivi {{ transcriptAutoScroll() ? 'activé' : 'coupé' }}
-                  </button>
-                  <button (click)="copyTranscript()" title="Copier la transcription filtrée"
-                          class="rounded-full bg-slate-700 px-2.5 py-1 text-xs font-semibold text-slate-200 transition hover:bg-slate-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-red-400">
-                    {{ transcriptCopied() ? 'Copié !' : 'Copier' }}
-                  </button>
-                }
-              </div>
-            </div>
-            @if (transcriptAvailable() && transcriptLines().length > 0) {
-              <div class="relative mt-3">
-                <svg xmlns="http://www.w3.org/2000/svg" class="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" /></svg>
-                <input #tsearch type="search" placeholder="Rechercher dans la transcription…" [value]="transcriptSearch()"
-                       (input)="onTranscriptSearch(tsearch.value)" aria-label="Rechercher dans la transcription"
-                       class="w-full rounded-xl border border-slate-700 bg-slate-900 py-2 pl-9 pr-9 text-sm text-slate-200 placeholder:text-slate-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-red-400" />
-                @if (transcriptSearch()) {
-                  <button (click)="clearTranscriptSearch()" title="Effacer la recherche" aria-label="Effacer la recherche"
-                          class="absolute right-2 top-1/2 -translate-y-1/2 rounded-full p-1 text-slate-400 transition hover:bg-slate-700 hover:text-slate-200">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" /></svg>
-                  </button>
-                }
-              </div>
-            }
-            @if (transcriptLoading()) {
-              <div class="mt-4 space-y-2" aria-live="polite" aria-busy="true">
-                @for (sk of [1,2,3,4,5]; track sk) {
-                  <div class="flex gap-3">
-                    <div class="h-4 w-12 shrink-0 rounded bg-slate-700"></div>
-                    <div class="h-4 flex-1 rounded bg-slate-700"></div>
-                  </div>
-                }
-                <p class="pt-1 text-sm text-slate-400">Chargement de la transcription…</p>
-              </div>
-            } @else if (transcriptAvailable() && transcriptLines().length > 0) {
-              @if (filteredTranscriptLines().length > 0) {
-                <p class="mt-2 text-xs text-slate-500">Cliquez sur un horodatage pour sauter à ce passage.</p>
-                <div class="mt-2 max-h-96 space-y-1 overflow-y-auto rounded-xl bg-slate-900/50 p-2" (scroll)="onTranscriptScroll($event)" tabindex="0" aria-label="Lignes de transcription">
-                  @for (line of filteredTranscriptLines(); track trackTranscriptLine($index, line); let i = $index) {
-                    <div [id]="'tr-line-' + i"
-                         class="flex items-baseline gap-3 rounded-lg px-2 py-1.5 text-sm transition"
-                         [class.bg-red-500/15]="i === transcriptActiveIndex()"
-                         [class.ring-1]="i === transcriptActiveIndex()" [class.ring-red-500/40]="i === transcriptActiveIndex()">
-                      <button (click)="seekTranscript(line.t)" [title]="'Aller à ' + formatTimestamp(line.t)"
-                              class="shrink-0 rounded px-1 font-mono text-xs tabular-nums text-red-300 transition hover:bg-red-500/20 hover:text-red-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-red-400">
-                        {{ formatTimestamp(line.t) }}
-                      </button>
-                      <span class="min-w-0 flex-1 leading-relaxed" [class.text-white]="i === transcriptActiveIndex()" [class.text-slate-300]="i !== transcriptActiveIndex()">{{ line.text }}</span>
-                    </div>
-                  }
-                </div>
-              } @else {
-                <div class="mt-3 rounded-xl bg-slate-900/50 p-4 text-center">
-                  <p class="text-sm text-slate-300">Aucun passage ne correspond à « {{ transcriptSearch() }} ».</p>
-                  <button (click)="clearTranscriptSearch()" class="mt-2 text-sm font-semibold text-red-400 hover:text-red-300">Effacer la recherche</button>
-                </div>
-              }
-            } @else {
-              @if (transcriptReason() === 'no_subtitles' || (!transcriptError() && transcriptLanguages().length === 0)) {
-                <div class="mt-3 rounded-xl bg-slate-900/50 p-4 text-center">
-                  <p class="text-sm text-slate-400">Aucun sous-titre disponible pour cette vidéo.</p>
-                </div>
-              } @else {
-                <div class="mt-3 rounded-xl bg-slate-900/50 p-4 text-center">
-                  <p class="text-sm text-slate-400">{{ transcriptError() || 'Aucun sous-titre disponible pour cette vidéo.' }}</p>
-                  @if (transcriptRetryable()) {
-                    <button (click)="retryTranscript()"
-                            class="mt-3 inline-flex items-center gap-2 rounded-full bg-slate-700 px-3 py-1.5 text-sm font-semibold text-slate-100 transition hover:bg-slate-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-red-400">
-                      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                        <path fill-rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01-.61-1.276z" clip-rule="evenodd" />
-                      </svg>
-                      Réessayer
-                    </button>
-                  }
-                </div>
-              }
-            }
-          </section>
-        }
-
-        <!-- Commentaires -->
-        <section class="mt-8" aria-label="Commentaires">
-          <div class="mb-4 flex flex-wrap items-center justify-between gap-3">
-            <h2 class="text-xl font-bold text-white">{{ v.comments.length }} commentaire{{ v.comments.length > 1 ? 's' : '' }}</h2>
-            @if (v.comments.length > 0) {
-              <div class="flex items-center gap-2">
-                <button (click)="onSummarizeComments()"
-                        [disabled]="isSummarizing() || !geminiReady"
-                        class="flex items-center gap-2 rounded-full bg-slate-700 px-3 py-2 text-sm font-semibold text-slate-100 transition hover:bg-slate-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-red-400 disabled:cursor-not-allowed disabled:bg-slate-800 disabled:text-slate-400">
-                  @if (isSummarizing()) {
-                    <svg class="h-5 w-5 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true">
-                      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                      <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-                    </svg>
-                    <span>Résumé en cours…</span>
-                  } @else {
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-yellow-300" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                      <path fill-rule="evenodd" d="M10 3a1 1 0 011 1v2.586l1.707-1.707a1 1 0 111.414 1.414l-1.707 1.707H15a1 1 0 110 2h-2.586l1.707 1.707a1 1 0 11-1.414 1.414L11 12.414V15a1 1 0 11-2 0v-2.586l-1.707 1.707a1 1 0 11-1.414-1.414L7.586 11H5a1 1 0 110-2h2.586L5.793 7.293a1 1 0 111.414-1.414L9 7.586V5a1 1 0 011-1z" clip-rule="evenodd" />
-                    </svg>
-                    <span>Résumer les commentaires</span>
-                  }
-                </button>
-              </div>
-            }
-          </div>
-          @if (!geminiReady && geminiReason && v.comments.length > 0) {
-            <div class="mb-4 text-xs text-amber-300">{{ geminiReason }}</div>
-          }
-          @if (isSummarizing() || summary() || summaryError()) {
-            <div class="mb-6">
-              @if (isSummarizing() && !summary() && !summaryError()) {
-                <div class="animate-pulse rounded-xl bg-slate-800 p-4">
-                  <div class="mb-3 h-4 w-1/4 rounded bg-slate-700"></div>
-                  <div class="space-y-2">
-                    <div class="h-4 rounded bg-slate-700"></div>
-                    <div class="h-4 w-5/6 rounded bg-slate-700"></div>
-                    <div class="h-4 w-3/4 rounded bg-slate-700"></div>
-                  </div>
-                </div>
-              } @else if (summary(); as summaryText) {
-                <div class="rounded-xl border border-slate-700 bg-gradient-to-br from-slate-800 to-slate-800/50 p-4">
-                  <h3 class="flex items-center gap-2 text-lg font-bold text-yellow-300">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                      <path fill-rule="evenodd" d="M10 3a1 1 0 011 1v2.586l1.707-1.707a1 1 0 111.414 1.414l-1.707 1.707H15a1 1 0 110 2h-2.586l1.707 1.707a1 1 0 11-1.414 1.414L11 12.414V15a1 1 0 11-2 0v-2.586l-1.707 1.707a1 1 0 11-1.414-1.414L7.586 11H5a1 1 0 110-2h2.586L5.793 7.293a1 1 0 111.414-1.414L9 7.586V5a1 1 0 011-1z" clip-rule="evenodd" />
-                    </svg>
-                    <span>Résumé IA</span>
-                  </h3>
-                  <p class="mt-2 whitespace-pre-wrap text-slate-300">{{ summaryText }}</p>
-                </div>
-              } @else if (summaryError(); as errorText) {
-                <div class="rounded-xl border border-red-700 bg-red-900/50 p-4 text-red-300" role="alert">
-                  <p>{{ errorText }}</p>
-                </div>
-              }
-            </div>
-          }
-          @if (v.comments.length > 0) {
-            <div class="space-y-5">
-              @for (comment of v.comments; track comment.author + comment.commentedTime) {
-                <article class="flex items-start gap-3">
-                  <img [src]="comment.thumbnail" alt="" class="h-10 w-10 shrink-0 rounded-full bg-slate-700" loading="lazy">
-                  <div class="min-w-0 flex-1">
-                    <div class="flex flex-wrap items-center gap-x-2 text-sm">
-                      <span class="font-semibold text-slate-200">{{ comment.author }}</span>
-                      <span class="text-slate-500">{{ comment.commentedTime }}</span>
-                    </div>
-                    <p class="mt-1 break-words text-sm leading-relaxed text-slate-300">{{ comment.commentText }}</p>
-                  </div>
-                </article>
-              }
-            </div>
-          } @else {
-            <p class="rounded-xl bg-slate-800/50 p-4 text-center text-sm text-slate-400">Aucun commentaire pour cette vidéo.</p>
-          }
-        </section>
-      </div>
-
-      <!-- ============ Sidebar ============ -->
-      <aside class="min-w-0" aria-label="Vidéos suivantes">
-        <div class="lg:sticky lg:top-4">
-          <h2 class="mb-3 text-lg font-bold text-white">À suivre</h2>
-          <div class="space-y-2">
-            @for (related of v.relatedStreams; track related.videoId) {
-              <div class="group rounded-xl p-2 transition hover:bg-slate-800/60 focus-within:bg-slate-800/60">
-                <a [routerLink]="['/watch', related.videoId]" [queryParams]="watchQueryParams(related)" [state]="{ video: related }" class="flex items-start gap-3 rounded-lg focus:outline-none focus-visible:ring-2 focus-visible:ring-red-400">
-                  <div class="relative w-40 shrink-0">
-                    <img [src]="related.thumbnail" [alt]="related.title" class="h-24 w-full rounded-xl object-cover" loading="lazy">
-                    <div class="absolute right-1.5 top-1.5">
-                      <app-provider-badge [provider]="related.provider"></app-provider-badge>
-                    </div>
-                    @if (related.duration && related.duration > 0) {
-                      <div class="absolute bottom-1.5 right-1.5 rounded bg-black/75 px-1.5 py-0.5 text-[10px] tabular-nums text-white">
-                        {{ related.duration | duration }}
-                      </div>
-                    }
-                  </div>
-                  <div class="min-w-0 flex-1">
-                    <h3 class="line-clamp-2 text-sm font-semibold leading-snug text-slate-100 group-hover:text-red-300">{{ related.title }}</h3>
-                    <div class="mt-1 text-xs tabular-nums text-slate-400">{{ formatNumber(related.views) }} vues</div>
-                  </div>
-                </a>
-                <div class="mt-1.5 pl-1">
-                  <app-channel-identity
-                    size="sm"
-                    [provider]="related.provider"
-                    [externalId]="related.channelExternalId ?? null"
-                    [avatarUrl]="related.channelAvatarUrl || related.uploaderAvatar || null"
-                    [name]="related.uploaderName || null"
-                  ></app-channel-identity>
-                </div>
-              </div>
-            } @empty {
-              <p class="rounded-xl bg-slate-800/50 p-4 text-center text-sm text-slate-400">Aucune suggestion pour le moment.</p>
-            }
-          </div>
-        </div>
-      </aside>
-    </div>
   } @else {
     <div class="py-20 text-center">
       <h2 class="text-2xl font-bold text-slate-300">Vidéo introuvable</h2>
diff --git a/src/components/watch/watch.component.ts b/src/components/watch/watch.component.ts
index ead5a14..5a47246 100644
--- a/src/components/watch/watch.component.ts
+++ b/src/components/watch/watch.component.ts
@@ -377,9 +377,11 @@ export class WatchComponent implements OnDestroy, AfterViewInit {
         // ?video= exige un id de VOD numérique ; un login (non numérique) sans
         // ?channel= doit être traité comme une chaîne (résultats de recherche).
         const chan = ch || (!/^\d+$/.test(String(id || '')) && id ? id : null);
+        // Les VOD acceptent time=1h2m3s (seek au chargement, ex. transcript).
+        const timeParam = !chan && start > 0 ? `&time=${encodeURIComponent(this.formatTwitchTime(start))}` : '';
         const qs = chan
           ? `?channel=${encodeURIComponent(chan)}&${parentParams}&autoplay=false`
-          : `?video=${encodeURIComponent(id)}&${parentParams}&autoplay=false`;
+          : `?video=${encodeURIComponent(id)}&${parentParams}&autoplay=false${timeParam}`;
         const u = base + qs;
         return this.sanitizer.bypassSecurityTrustResourceUrl(u);
       }
@@ -391,13 +393,15 @@ export class WatchComponent implements OnDestroy, AfterViewInit {
         return this.sanitizer.bypassSecurityTrustResourceUrl(u);
       }
       if (p === 'odysee') {
+        // t=secondes : repris au chargement (seek transcript / reprise).
+        const tParam = start > 0 ? `&t=${start}` : '';
         const slug = this.odyseeSlug();
         if (slug) {
-          const u = `https://odysee.com/$/embed/${slug}?autoplay=1&muted=1`;
+          const u = `https://odysee.com/$/embed/${slug}?autoplay=1&muted=1${tParam}`;
           return this.sanitizer.bypassSecurityTrustResourceUrl(u);
         }
         // Fallback (may fail if slug absent)
-        const u = `https://odysee.com/$/embed/${encodeURIComponent(id)}?autoplay=1&muted=1`;
+        const u = `https://odysee.com/$/embed/${encodeURIComponent(id)}?autoplay=1&muted=1${tParam}`;
         return this.sanitizer.bypassSecurityTrustResourceUrl(u);
       }
       if (p === 'rumble') {
@@ -418,9 +422,12 @@ export class WatchComponent implements OnDestroy, AfterViewInit {
           videoId = id.replace(/^v/, '');
         }
         
-        // Construire l'URL d'embed officielle de Rumble
+        // Construire l'URL d'embed officielle de Rumble (start=secondes :
+        // repris au chargement pour seek transcript / reprise ; ignoré
+        // silencieusement si non supporté par le player embarqué).
         if (videoId) {
-          const embedUrl = `https://rumble.com/embed/${videoId}/?pub=4&autoplay=1`;
+          const startParam = start > 0 ? `&start=${start}` : '';
+          const embedUrl = `https://rumble.com/embed/${videoId}/?pub=4&autoplay=1${startParam}`;
           return this.sanitizer.bypassSecurityTrustResourceUrl(embedUrl);
         }
       }
@@ -965,6 +972,11 @@ export class WatchComponent implements OnDestroy, AfterViewInit {
       if (this.transcriptLines().length === 0 && !this.transcriptLoading()) {
         this.loadTranscript();
       }
+      // Le panneau vit dans la sidebar : sur mobile elle est sous le
+      // contenu principal, on l'amène à l'écran (sans saut sur desktop).
+      setTimeout(() => {
+        try { document.getElementById('transcript-panel')?.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); } catch {}
+      }, 80);
     } else {
       this.stopTranscriptClock();
     }
@@ -1056,27 +1068,58 @@ export class WatchComponent implements OnDestroy, AfterViewInit {
     this.loadTranscript();
   }
 
-  /** Clic sur un timestamp : saute à ce moment (natif direct, iframe via ?start=). */
+  /** Clic sur un timestamp : saute à ce moment sans recharger si possible. */
   seekTranscript(seconds: number): void {
     const t = Math.max(0, Math.floor(Number(seconds) || 0));
+    const p = this.provider();
+    // 1) Lecteur natif : seek direct sur <video>.
     try {
       const native = this.nativePlayer?.el;
-      if (native && Number.isFinite(native.duration)) {
-        native.currentTime = t;
-        try { native.play?.(); } catch {}
+      if (native && Number.isFinite(native.duration || NaN)) {
+        try { native.currentTime = t; } catch {}
+        try { native.play?.()?.catch?.(() => {}); } catch {}
         this.startPositionSeconds.set(t);
         this.updateTranscriptActive(t);
         this.scrollTranscriptTo(t);
         return;
       }
     } catch {}
-    // Embeds cross-origin (YouTube/Dailymotion/PeerTube/Odysee) : on
-    // reconstruit l'URL d'embed avec le offset (embedUrl dépend du signal).
+    // 2) YouTube : commande seekTo via postMessage (enablejsapi=1) : pas de
+    // rechargement d'iframe, repositionnement instantané.
+    if (p === 'youtube' && this.seekYouTubeEmbed(t)) {
+      this.updateTranscriptActive(t);
+      this.scrollTranscriptTo(t);
+      return;
+    }
+    // 3) Autres embeds : l'URL est reconstruite avec le offset temporel
+    // (embedUrl réagit au signal startPositionSeconds) : Dailymotion et
+    // PeerTube (start=), Twitch VOD (time=1h2m3s), Odysee (t=), Rumble
+    // (start=). Sans param supporté, l'iframe recharge à l'identique.
     this.startPositionSeconds.set(t);
     this.updateTranscriptActive(t);
     this.scrollTranscriptTo(t);
   }
 
+  /**
+   * Envoie seekTo au player YouTube embarqué (IFrame Player API via
+   * postMessage). Retourne false si l'iframe n'est pas (encore) prête.
+   */
+  private seekYouTubeEmbed(seconds: number): boolean {
+    try {
+      const frame = this.embedFrame?.nativeElement;
+      const win = frame?.contentWindow;
+      if (!frame || !win) return false;
+      const msg = JSON.stringify({ event: 'command', func: 'seekTo', args: [seconds, true] });
+      try { win.postMessage(msg, '*'); } catch { return false; }
+      // Le player expose l'API JS ~1 s après chargement : on rejoue la
+      // commande une fois pour les seeks précoces.
+      setTimeout(() => { try { win.postMessage(msg, '*'); } catch {} }, 800);
+      return true;
+    } catch {
+      return false;
+    }
+  }
+
   onTranscriptSearch(value: string): void {
     this.transcriptSearch.set(String(value ?? ''));
   }
@@ -1134,6 +1177,18 @@ export class WatchComponent implements OnDestroy, AfterViewInit {
     return h > 0 ? `${h}:${pad(m)}:${pad(sec)}` : `${m}:${pad(sec)}`;
   }
 
+  /** Formatte des secondes pour le param `time=` du player Twitch (1h2m3s). */
+  private formatTwitchTime(totalSeconds: number): string {
+    const s = Math.max(0, Math.floor(Number(totalSeconds) || 0));
+    const h = Math.floor(s / 3600);
+    const m = Math.floor((s % 3600) / 60);
+    const sec = s % 60;
+    let out = `${sec}s`;
+    if (m > 0 || h > 0) out = `${m}m${out}`;
+    if (h > 0) out = `${h}h${out}`;
+    return out;
+  }
+
   private updateTranscriptActive(currentSec: number): void {
     const lines = this.transcriptLines();
     if (!lines.length) return;
diff --git a/src/services/i18n.service.ts b/src/services/i18n.service.ts
index 9fedf49..93427f6 100644
--- a/src/services/i18n.service.ts
+++ b/src/services/i18n.service.ts
@@ -71,6 +71,9 @@ const EN: Record<string, string> = {
   'themes.categories': 'Categories',
   'themes.backToThemes': 'Back to themes',
   'themes.changeProvider': 'Change provider',
+  'themes.title': 'Themes',
+  'themes.show': 'Show',
+  'themes.hide': 'Hide',
   // Common
   'common.error': 'An error occurred.',
   'empty.noItems': 'No items.',
@@ -81,13 +84,31 @@ const EN: Record<string, string> = {
   'filter.sort.recent': 'Most recent',
   'filter.sort.viewed': 'Most viewed',
   'filter.sort.longest': 'Longest',
+  'filter.sort.relevance': 'Relevance',
+  'filter.sort.date': 'Date',
+  'filter.sort.views': 'Views',
   'filter.duration': 'Duration',
   'filter.duration.any': 'Any',
   'filter.duration.short': 'Short (<10m)',
   'filter.duration.medium': 'Medium (10–30m)',
   'filter.duration.long': 'Long (30m+)',
+  'filter.type': 'Type',
+  'filter.type.any': 'Any',
+  'filter.type.video': 'Video',
+  'filter.type.live': 'Live',
+  'filter.type.recorded': 'Recorded',
+  'filter.type.short': 'Shorts',
+  'filter.type.channel': 'Channel',
   'filter.language': 'Language',
+  'filter.language.any': 'Any',
+  'filter.language.en': 'English',
+  'filter.language.fr': 'French',
   'filter.date': 'Date',
+  'filter.date.any': 'Any',
+  'filter.date.day': 'Last 24h',
+  'filter.date.week': 'Last week',
+  'filter.date.month': 'Last month',
+  'filter.date.year': 'Last year',
   // Optional per-theme labels
   'theme.finance-crypto': 'Finance & Crypto',
   'theme.gaming': 'Gaming',
@@ -186,6 +207,9 @@ const FR: Record<string, string> = {
   'themes.categories': 'Catégories',
   'themes.backToThemes': 'Retour aux thèmes',
   'themes.changeProvider': 'Changer de provider',
+  'themes.title': 'Thèmes',
+  'themes.show': 'Afficher',
+  'themes.hide': 'Masquer',
   // Common
   'common.error': 'Une erreur est survenue.',
   'empty.noItems': 'Aucun élément.',
@@ -196,13 +220,31 @@ const FR: Record<string, string> = {
   'filter.sort.recent': 'Plus récents',
   'filter.sort.viewed': 'Plus vus',
   'filter.sort.longest': 'Plus longs',
+  'filter.sort.relevance': 'Pertinence',
+  'filter.sort.date': 'Date',
+  'filter.sort.views': 'Vues',
   'filter.duration': 'Durée',
   'filter.duration.any': 'Toute',
   'filter.duration.short': 'Courte (<10m)',
   'filter.duration.medium': 'Moyenne (10–30m)',
   'filter.duration.long': 'Longue (30m+)',
+  'filter.type': 'Type',
+  'filter.type.any': 'Tous',
+  'filter.type.video': 'Vidéo',
+  'filter.type.live': 'Direct',
+  'filter.type.recorded': 'Rediffusion',
+  'filter.type.short': 'Shorts',
+  'filter.type.channel': 'Chaîne',
   'filter.language': 'Langue',
+  'filter.language.any': 'Toutes',
+  'filter.language.en': 'Anglais',
+  'filter.language.fr': 'Français',
   'filter.date': 'Date',
+  'filter.date.any': 'Toutes',
+  'filter.date.day': '24 dernières h',
+  'filter.date.week': 'Semaine dernière',
+  'filter.date.month': 'Mois dernier',
+  'filter.date.year': 'Année dernière',
   // Optional per-theme labels
   'theme.finance-crypto': 'Finance & Crypto',
   'theme.gaming': 'Jeux vidéo',