:root{color-scheme:dark;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;--nav:calc(66px + env(safe-area-inset-bottom,0px));--ink:#f7f7f9;--red:#ef3e40}
*{box-sizing:border-box}html,body{height:100%;margin:0;background:#070708;color:var(--ink);overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}a{color:inherit}.defs{position:absolute;width:0;height:0;overflow:hidden}
#app{position:relative;width:100%;max-width:560px;height:100%;height:100dvh;margin:0 auto;overflow:hidden;background:#080809;isolation:isolate}
.topbar{position:absolute;z-index:60;top:0;left:0;right:0;display:flex;align-items:center;justify-content:flex-start;padding:calc(env(safe-area-inset-top,0px) + 12px) 18px 15px;pointer-events:none;transition:opacity .3s;background:linear-gradient(180deg,rgba(0,0,0,.28),transparent)}.topbar a{display:inline-flex;pointer-events:auto}.topbar img{width:129px;height:auto;max-height:46px;object-fit:contain;object-position:left center}
.feed{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;scroll-snap-type:y mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;touch-action:pan-y;outline:none}.feed::-webkit-scrollbar{display:none}
.scene{height:100%;height:100dvh;min-height:440px;width:100%;position:relative;overflow:hidden;scroll-snap-align:start;scroll-snap-stop:always;background:#0a0a0b;isolation:isolate}
.scene-photo{position:absolute;inset:0;overflow:hidden;pointer-events:none}.scene-photo img{width:100%;height:100%;object-fit:cover;object-position:center 28%;display:block;filter:brightness(.58) contrast(1.05) saturate(.90);transform:scale(1.028)}.scene-photo.photo-syamali img{object-position:78% 50%;transform:scale(1.38)}.scene-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.17) 0%,rgba(0,0,0,.10) 23%,rgba(0,0,0,.51) 45%,rgba(0,0,0,.64) 66%,rgba(0,0,0,.96) 94%)}
.scene.is-playing .scene-photo img{filter:brightness(.3) saturate(.65)}.scene.is-playing .scene-photo:after{background:linear-gradient(180deg,#0009 0%,#0008 31%,#000b 68%,#000 100%)}
.scene-body{position:absolute;top:clamp(164px,27.3dvh,288px);left:0;right:0;z-index:1;display:flex;flex-direction:column;align-items:stretch}
.player-area{position:relative;margin:0 16px;aspect-ratio:16/9;min-height:200px;max-height:calc(100dvh - 330px);background:#050506;overflow:hidden;border-radius:7px;box-shadow:0 22px 55px rgba(0,0,0,.47)}
.player-area .yt-mount{position:absolute;inset:0;width:100%;height:100%;z-index:3}.player-area iframe{display:block;width:100%!important;height:100%!important;position:absolute;inset:0;border:0;background:#000;z-index:3;touch-action:auto}
.poster-button{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border:0;width:100%;height:100%;padding:0;background:#101113;overflow:hidden;cursor:pointer;touch-action:pan-x}.poster-button img{width:100%;height:100%;object-fit:cover;filter:brightness(.75);display:block}.poster-button:after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,#0000 0%,#0004 100%);pointer-events:none}.play-mark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:63px;height:63px;border:1px solid #fff7;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.58);backdrop-filter:blur(8px);color:white;z-index:2;transition:transform var(--duration-press,120ms) var(--ease-out,ease-out),background-color var(--duration-state,180ms)}.play-mark svg{width:29px;height:29px;margin-left:3px}.poster-button:active .play-mark{transform:translate(-50%,-50%) scale(.93)}.poster-button:focus-visible{outline:3px solid white;outline-offset:-4px}
.scene-meta{display:grid;grid-template-columns:minmax(0,1fr) 43px;align-items:end;gap:12px;margin:20px 20px 0;min-height:unset}.scene-copy{min-width:0}.scene-artist{font-size:clamp(24px,6.9vw,33px);font-weight:760;letter-spacing:-.05em;line-height:1.08;margin:0 0 7px;text-shadow:0 3px 12px #0006;max-width:100%;overflow-wrap:break-word}.scene-artist.long{font-size:clamp(20px,5.45vw,27px);letter-spacing:-.04em}.scene-title{font-size:14px;line-height:1.35;color:#e7e6e9;margin:0 0 9px;max-width:100%;font-weight:500;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-overflow:ellipsis;text-shadow:0 2px 7px #000}
.scene-description{font-size:12.75px;line-height:1.45;color:rgba(245,244,246,.79);font-weight:400;letter-spacing:.001em;margin:0;max-width:43ch;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden;text-overflow:ellipsis;text-shadow:0 2px 10px rgba(0,0,0,.55);text-wrap:pretty}.meta-actions{display:flex;flex-direction:column;gap:3px;align-items:center;justify-content:flex-end;padding-bottom:0}.meta-action{width:42px;height:43px;background:none;border:0;display:grid;place-items:center;padding:8px;border-radius:12px;flex:0 0 auto}.meta-action svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.85}.meta-action:active{transform:scale(.92)}.meta-action.is-liked{color:#ff485a}.meta-action.is-liked svg{fill:currentColor;stroke:currentColor}.meta-action.is-saved svg{fill:#fff;stroke:#fff}.meta-action:focus-visible,.story-link:focus-visible{outline:2px solid white;outline-offset:2px}
.story-link{align-self:flex-start;margin:18px 20px 0;color:#fff;font-size:12px;font-weight:610;letter-spacing:.015em;text-decoration:none;display:inline-flex;align-items:center;gap:8px;min-height:32px}.story-link svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.story-link:active{opacity:.65}
#sjr-app-nav{transition:opacity .24s ease,visibility .24s ease;background:rgba(8,8,10,.96);max-width:560px;z-index:70}#sjr-app-nav svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}#sjr-app-nav .current:after{content:"";width:16px;height:2px;background:var(--red);position:absolute;bottom:calc(5px + env(safe-area-inset-bottom,0px));border-radius:4px}
#app.is-watching:not(.controls-visible) .topbar,#app.is-watching:not(.controls-visible) #sjr-app-nav{opacity:0;pointer-events:none;visibility:hidden}
.toast{position:absolute;z-index:80;left:50%;transform:translateX(-50%);bottom:calc(var(--nav) + 24px);max-width:calc(100% - 50px);min-width:max-content;background:#19191c;border:1px solid #ffffff29;border-radius:14px;padding:10px 15px;font-size:12px;box-shadow:0 9px 30px #0009;white-space:normal;text-align:center}.toast[hidden]{display:none}
.error-link{position:absolute;inset:0;z-index:5;background:#0b0b0d;display:flex;justify-content:center;align-items:center;flex-direction:column;gap:12px;padding:20px;text-align:center;font-size:13px}.error-link a{color:white;padding:11px 15px;border:1px solid #8888;border-radius:8px;text-decoration:none}
@media(max-width:355px){.scene-description{font-size:11.5px;line-height:1.42;-webkit-line-clamp:4}.scene-body{top:clamp(128px,25dvh,188px)}.player-area{margin-inline:12px}.scene-meta{margin:17px 15px 0;gap:7px}.scene-artist{font-size:24px}.scene-title{font-size:12px}.meta-action{width:36px;height:40px}.meta-action svg{width:21px}.story-link{margin:9px 15px 0}.topbar{padding-left:14px}.topbar img{width:117px}}
@media(max-height:690px){.scene-description{font-size:11.5px;-webkit-line-clamp:4}.scene-title{margin-bottom:6px}.scene-body{top:clamp(124px,24dvh,200px)}.scene-meta{margin-top:13px;min-height:72px}.scene-artist{font-size:23px;margin-bottom:4px}.scene-title{font-size:12px}.story-link{margin-top:7px}.topbar img{width:117px}}
@media(min-width:560px){.scene-description{font-size:13.25px;max-width:51ch}#app{box-shadow:0 0 90px #000a}.scene-body{top:clamp(220px,29dvh,310px)}.player-area{margin-inline:21px}.scene-meta{margin:23px 28px 0}.story-link{margin-left:28px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;scroll-behavior:auto!important}}

/* Captions are part of the scene, not a label explaining the interface. */
@media(min-height:740px){.scene-title{font-size:14.5px}}
@media(max-height:605px){.scene-body{top:clamp(105px,20dvh,135px)}.scene-artist{font-size:21px}.scene-description{-webkit-line-clamp:4;font-size:10.75px;line-height:1.32}.scene-meta{margin-top:10px}.meta-action{width:36px;height:34px}.meta-action svg{width:19px;height:19px}.story-link{font-size:11px;margin-top:1px;min-height:22px}}
@media (prefers-reduced-motion:no-preference){.meta-action.is-liked svg{animation:heart-pop var(--duration-state,180ms) var(--ease-out,ease-out)}@keyframes heart-pop{from{transform:scale(.94)}to{transform:scale(1)}}}

/* V5: une seule scène de visionnage, vraie photo, lecteur 16:9 et légende ancrée.
   Pas de compteur, de catalogue, de consigne, de label technique. */
.scene-photo img{filter:brightness(.90) contrast(1.08) saturate(.98);object-position:center 32%;transform:scale(1.06);transition:none}
.scene-photo.photo-syamali img{object-position:78% 42%;transform:scale(1.46)}
.scene-photo:after{background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.03) 23%,rgba(0,0,0,.04) 38%,rgba(0,0,0,.24) 52%,rgba(0,0,0,.72) 69%,rgba(0,0,0,.97) 92%)}
.scene.is-playing .scene-photo img{filter:brightness(.47) saturate(.78)}
.scene.is-playing .scene-photo:after{background:linear-gradient(180deg,rgba(0,0,0,.46),rgba(0,0,0,.25) 38%,rgba(0,0,0,.73) 70%,#050505 100%)}
.scene-body{position:absolute;inset:0;z-index:1;display:block;pointer-events:none}
.player-area{position:absolute;top:clamp(118px,27dvh,250px);left:0;right:0;margin:0;min-height:200px;max-height:none;aspect-ratio:16/9;border-radius:0;background:#050505;box-shadow:0 13px 36px rgba(0,0,0,.36);pointer-events:auto}
.poster-button{touch-action:pan-x}
.poster-button img{filter:brightness(.88);object-position:center}
.play-mark{width:56px;height:56px;background:#000a;border:1px solid #fff9;backdrop-filter:blur(10px)}
.play-mark svg{width:27px;height:27px}
.scene-meta{position:absolute;bottom:calc(var(--nav) + 27px);left:0;right:0;display:grid;grid-template-columns:minmax(0,1fr) 46px;gap:13px;align-items:end;margin:0;padding:0 18px;pointer-events:none;min-height:0}
.scene-copy,.meta-actions{pointer-events:auto}
.scene-artist{margin:0 0 10px;font-size:inherit;font-weight:inherit;line-height:1.05;letter-spacing:0;max-width:100%;overflow:visible}
.artist-chip{color:#fff;display:flex;align-items:center;gap:10px;min-height:40px;text-decoration:none;width:max-content;max-width:100%;outline-offset:5px}
.artist-chip strong{font-size:clamp(21px,6.15vw,28px);font-weight:760;letter-spacing:-.045em;line-height:1.05;overflow-wrap:anywhere}
.scene-artist.long .artist-chip strong{font-size:clamp(17px,4.8vw,23px)}
.artist-avatar{width:39px;height:39px;flex:0 0 39px;object-fit:cover;object-position:center 26%;border-radius:50%;border:1px solid rgba(255,255,255,.70);box-shadow:0 2px 13px #0009;background:#242427}
.scene-title{font-size:15px;font-weight:680;color:#fff;letter-spacing:-.015em;line-height:1.25;margin:0 0 7px}
.scene-description{font-size:13.25px;line-height:1.45;color:rgba(250,250,250,.88);max-width:45ch;font-weight:410;margin:0;-webkit-line-clamp:4;text-shadow:0 1px 9px #000a}
.meta-actions{align-items:center;gap:7px;justify-content:flex-end;padding-bottom:0}
.meta-action{width:45px;height:47px;border-radius:50%;padding:10px;background:rgba(9,9,11,.18);transition:background-color var(--duration-state,180ms),transform var(--duration-press,120ms) var(--ease-out,ease-out)}
.meta-action svg{width:25px;height:25px;filter:drop-shadow(0 2px 4px #0009)}
.meta-action:active{transform:scale(.96)}
.meta-action:hover{background:rgba(17,17,19,.35)}
.story-link{margin:11px 0 0;min-height:30px;color:#fff;font-size:12px;font-weight:670;letter-spacing:-.01em;text-shadow:0 1px 8px #000}
.story-link svg{width:15px;height:15px}
.double-heart{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%) scale(.35);color:white;opacity:0;pointer-events:none;z-index:15;filter:drop-shadow(0 5px 22px #000b)}
.double-heart svg{height:100px;width:100px;fill:white;stroke:#fff;stroke-width:1}
.double-heart.burst{animation:sjr-heart-burst .6s ease-out forwards}
@keyframes sjr-heart-burst{0%{opacity:0;transform:translate(-50%,-50%) scale(.25)}25%{opacity:1;transform:translate(-50%,-50%) scale(1.12)}65%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.22)}}
.meta-action.heart-reaction svg{animation:sjr-heart-pop var(--duration-state,180ms) var(--ease-out,ease-out)}
@keyframes sjr-heart-pop{from{transform:scale(.94)}to{transform:scale(1)}}
/* Réduire les zones invisibles sur les petits écrans sans rogner les légendes. */
@media(max-width:355px){.topbar img{width:117px}.player-area{top:clamp(104px,25.5dvh,174px);margin:0;left:0;right:0;min-height:200px}.scene-meta{padding:0 13px;gap:8px;bottom:calc(var(--nav) + 10px);grid-template-columns:minmax(0,1fr) 38px}.artist-avatar{width:31px;height:31px;flex-basis:31px}.artist-chip{gap:8px;min-height:34px}.artist-chip strong{font-size:21px}.scene-artist.long .artist-chip strong{font-size:17px}.scene-artist{margin-bottom:6px}.scene-title{font-size:12.5px;margin-bottom:5px}.scene-description{font-size:11.25px;line-height:1.4;-webkit-line-clamp:4}.meta-actions{gap:4px}.meta-action{width:38px;height:38px;padding:8px}.meta-action svg{width:21px;height:21px}.story-link{margin-top:6px;min-height:24px;font-size:11.5px}}
@media(max-height:690px) and (min-width:356px){.player-area{top:clamp(108px,23.5dvh,180px)}.scene-meta{bottom:calc(var(--nav) + 12px)}.scene-description{font-size:11.85px;line-height:1.34;-webkit-line-clamp:3}.scene-artist{margin-bottom:6px}.scene-title{margin-bottom:5px}.artist-avatar{width:33px;height:33px;flex-basis:33px}.artist-chip strong{font-size:22px}.meta-actions{gap:2px}.meta-action{width:40px;height:40px;padding:8px}.story-link{margin-top:6px}}
@media(min-width:560px){.scene-body{top:0}.player-area{top:clamp(210px,26dvh,285px);left:0;right:0;margin:0}.scene-meta{margin:0;padding:0 26px;bottom:calc(var(--nav) + 29px)}.story-link{margin-left:0}.scene-description{font-size:14px;max-width:48ch}}
@media(max-height:605px){.player-area{top:clamp(90px,23dvh,130px)}.scene-meta{bottom:calc(var(--nav) + 8px)}.scene-artist{margin-bottom:4px}.scene-title{margin-bottom:4px}.scene-description{font-size:10.75px;line-height:1.29;-webkit-line-clamp:3}.artist-avatar{width:29px;height:29px;flex-basis:29px}.artist-chip{min-height:29px}.artist-chip strong{font-size:20px}.story-link{margin-top:3px;min-height:22px}}
@media(prefers-reduced-motion:reduce){.double-heart.burst,.meta-action.heart-reaction svg{animation:none}}

/* Native video experiment — do not alter the V5 composition. */
.player-area .sjr-native-video{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;z-index:3;touch-action:pan-y;}
.player-area .inline-retry{border:1px solid rgba(255,255,255,.22);color:#fff;background:rgba(255,255,255,.10);border-radius:12px;padding:9px 16px;cursor:pointer;margin-top:6px;font:inherit;}
.error-link p{margin:5px 0 0;max-width:30ch;line-height:1.4;opacity:.76;}