feat(shorts): page /shorts alimentee par le catalogue + refonte pro/mobile

SearchService.fetchCatalogShorts (type shorts via /api/search : cache, provenance, FF) + pont pur shorts-catalog.ts (mapping, meta, fraicheur, spec 27 assertions). WatchShortComponent : catalogue d'abord (feed, pagination, Pour toi), repli legacy, Twitch clips inchanges, avatars paresseux via channelMeta. UI facon YouTube : plein ecran 100dvh, fond d'ambiance, rail overlay 48px, meta/fraicheur/pastille provider, safe-area.

index.css

@@ -506,6 +506,46 @@ body {
     --shorts-chrome: 9rem;
   }
 }
+@media (max-width: 767px) {
+  /* Mobile : cadre quasi plein écran (seuls les chips + marges sont réservés). */
+  .shorts-frame {
+    --shorts-chrome: 8.5rem;
+  }
+}
+
+/* --- Shorts immersive stage (façon YouTube) -------------------------------- */
+/* Plein écran vertical : le cadre 9:16 flotte sur un fond d'ambiance tiré de
+   la vignette courante. `100dvh` (barres navigateur mobiles) avec repli. */
+.shorts-stage {
+  min-height: calc(var(--app-vh, 100dvh) - var(--header-offset, 0px));
+  touch-action: pan-y;
+  overscroll-behavior: contain;
+}
+.shorts-ambient {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  overflow: hidden;
+  background: #000;
+  pointer-events: none;
+}
+.shorts-ambient img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  filter: blur(48px) brightness(0.45);
+  transform: scale(1.2);
+}
+@media (prefers-reduced-motion: no-preference) {
+  .shorts-ambient img {
+    transition: opacity 0.4s ease;
+  }
+}
+/* Zone de méta basse : la safe-area des encoches ne doit jamais manger le
+   titre ou le bouton S'abonner. */
+.shorts-meta {
+  padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
+}
 
 /* --- Drawer / overlay plumbing -------------------------------------------- */
 /* Applied to <body> while a full-screen drawer or modal owns the viewport.