fix(shorts): tiroir ⓘ sous le header, coins arrondis, ligne fournisseur visible

- Mobile : le panneau d'informations démarre à `var(--header-offset)` (bas du
  header fixe z-50) au lieu de `top: 0` — ses 56 premiers px passaient
  DERRIÈRE le header (bouton Fermer compris). Même motif que le drawer latéral
  de app.component.html ; `md:static` neutralise ce top au bureau.
- Le cadre vidéo est arrondi partout (`rounded-2xl`, plus `rounded-none` sous
  768 px).
- La ligne de couleur du fournisseur était invisible sur /shorts : l'iframe
  positionnée peint par-dessus l'outline du cadre. Redessinée en overlay
  `.shorts-frame[data-video-provider]::after` (bord 1 px `var(--prov)`,
  `border-radius: inherit`, z-index 5 sous le chrome, pointer-events: none).

Vérifié au navigateur (harnais Playwright local) en mobile 390x844 ET desktop
1280x900 : gap tiroir/header, coins, couleur calculée du ::after, et avant/après
sur l'instance de test locale.

index.css

@@ -740,6 +740,19 @@ body {
    `outline` plutôt que `border` : zéro effet sur la boîte (les cadres sont
    dimensionnés en aspect-ratio) et le rayon suit automatiquement. */
 [data-video-provider] { outline: 1px solid var(--prov, transparent); outline-offset: -1px; }
+/* /shorts : le cadre contient une iframe positionnée, qui peint PAR-DESSUS
+   l'outline du parent → la ligne fournisseur y est invisible. On la
+   redessine en overlay au-dessus de l'iframe (z-index 5 : sous le chrome
+   du cadre, z-10/z-20, et `pointer-events: none` laisse passer les gestes). */
+.shorts-frame[data-video-provider]::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border: 1px solid var(--prov, transparent);
+  border-radius: inherit;
+  pointer-events: none;
+  z-index: 5;
+}
 [data-video-provider="youtube"],
 [data-video-provider="yt"] { --prov: #dc2626; }
 [data-video-provider="dailymotion"],

src/components/shorts/watch-short.component.html

@@ -23,7 +23,7 @@
     <div class="relative flex min-w-0 flex-1 items-center justify-center" style="max-width: 560px;">
       <!-- Video frame (9:16). `translateY` pendant un glissement tactile : tout
            le chrome (rail, méta, FAB) reste solidaire de l'image. -->
-      <div #shortsFrame class="shorts-frame relative shrink-0 overflow-hidden bg-black rounded-none ring-0 shadow-none sm:rounded-2xl sm:ring-1 sm:ring-white/10 sm:shadow-2xl"
+      <div #shortsFrame class="shorts-frame relative shrink-0 overflow-hidden bg-black rounded-2xl ring-0 shadow-none sm:ring-1 sm:ring-white/10 sm:shadow-2xl"
            [attr.data-video-provider]="providerOf(current())"
            [style.transform]="dragOffset() ? 'translateY(' + dragOffset() + 'px)' : null">
         @if (embedUrl(); as url) {
@@ -303,7 +303,12 @@
          d'API commentaires). -->
     @if (infoOpen()) {
       <div class="fixed inset-0 z-20 bg-black/60 md:hidden" (click)="toggleInfo()"></div>
+      <!-- Mobile : le tiroir démarre EN DESSOUS du header fixe (z-50) — sinon
+           ses 56 premiers px passent DERRIÈRE le header (même motif que le
+           drawer latéral de app.component.html). Au bureau `md:static`
+           neutralise ce top. -->
       <aside class="shorts-info fixed inset-y-0 right-0 z-30 w-[min(340px,88vw)] min-h-0 overflow-y-auto border-l border-white/10 bg-slate-950/95 backdrop-blur-md md:static md:z-10 md:self-stretch md:h-auto md:w-[340px] md:shrink-0 md:rounded-2xl md:border md:border-white/10 md:bg-slate-900/70"
+             [style.top]="'var(--header-offset)'"
              aria-label="Informations sur le short" (click)="$event.stopPropagation()">
         @if (current(); as v) {
           <div class="p-4">