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"],