From db03b7085487ed608f57123dc058ff7a5b8f728c Mon Sep 17 00:00:00 2001
From: Bruno Charest <bruno.charest@gmail.com>
Date: Sat, 26 Sep 2026 14:27:29 -0400
Subject: [PATCH] feat(watch): bouton cinema visible uniquement au survol du
 lecteur

---
 src/components/watch/watch.component.html | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/watch/watch.component.html b/src/components/watch/watch.component.html
index a55c3a3..1a67404 100644
--- a/src/components/watch/watch.component.html
+++ b/src/components/watch/watch.component.html
@@ -5,11 +5,12 @@
       <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="relative overflow-hidden rounded-2xl bg-black shadow-2xl ring-1 ring-white/10">
+        <section aria-label="Lecteur vidéo" class="group relative overflow-hidden rounded-2xl bg-black shadow-2xl ring-1 ring-white/10">
           <button (click)="toggleCinema()" [attr.aria-pressed]="cinemaMode()"
                   [title]="cinemaMode() ? 'Quitter le mode cinéma (Échap)' : 'Mode cinéma : élargir la vidéo (T)'"
                   [attr.aria-label]="cinemaMode() ? 'Quitter le mode cinéma' : 'Activer le mode cinéma'"
-                  class="absolute right-3 top-12 z-10 inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-xs font-semibold shadow-lg transition focus:outline-none focus-visible:ring-2 focus-visible:ring-red-400"
+                  class="absolute right-3 top-12 z-10 inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-xs font-semibold shadow-lg transition-opacity focus-visible:opacity-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-red-400"
+                  [class.opacity-0]="!cinemaMode()" [class.group-hover:opacity-100]="!cinemaMode()" [class.group-focus-within:opacity-100]="!cinemaMode()"
                   [class.bg-red-600]="cinemaMode()" [class.text-white]="cinemaMode()"
                   [class.bg-black/70]="!cinemaMode()" [class.text-slate-200]="!cinemaMode()" [class.hover:bg-black/90]="!cinemaMode()">
             <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">