/* ARIEL TV's vertical trailer player, isolated from the official website. */
body.extraits-mode{overflow:hidden;background:#030c14;color:#fff}
.extraits-mode .header,.extraits-mode .app-sidebar,.extraits-mode .content-tabs,.extraits-mode footer,.extraits-mode .footer,.extraits-mode .offline-note{display:none!important}
.extraits-mode #app{margin:0!important;padding:0!important;min-height:0!important;height:100vh;height:100dvh}
.reels-stage{position:relative;height:100vh;height:100dvh;width:100%;max-width:600px;margin:auto;background:#03080d;isolation:isolate;color:#fff;overflow:hidden}
.reels-feed{height:100%;width:100%;overflow-y:auto;overscroll-behavior-y:contain;scroll-snap-type:y mandatory;scrollbar-width:none;touch-action:pan-y}
.reels-feed::-webkit-scrollbar{display:none}.reels-feed:focus-visible{outline:2px solid #73ded1;outline-offset:-3px}
.reel{position:relative;height:100%;width:100%;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden;background:#05111b}
.reel-visual{position:absolute;inset:0;overflow:hidden}.reel-details{display:contents}
.reel-poster,.reel-media,.reel-shade,.reel-tap{position:absolute;inset:0;width:100%;height:100%}
.reel-poster,.reel-media{object-fit:cover}.reel-poster{opacity:.72}.reel-media{background:transparent;pointer-events:none}
.reel-shade{pointer-events:none;background:linear-gradient(180deg,#02091199 0%,transparent 28%,#02091110 43%,#020911b8 69%,#020911fa 100%)}
.reel-tap{padding:0;border:0;background:transparent;cursor:pointer;z-index:1}
.reel-tap:focus-visible{outline:2px solid #73ded1;outline-offset:-4px}
.reel-is-paused .reel-tap:after{content:'▶';position:absolute;top:41%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:66px;height:66px;border-radius:50%;background:#102b43bd;color:#fff;font-size:24px;border:1px solid #ffffff70}
.reels-top{position:absolute;top:max(14px,env(safe-area-inset-top));left:16px;right:16px;z-index:5;display:flex;align-items:center;gap:12px;pointer-events:none}
.reels-top>*{pointer-events:auto}.reels-top h1{font-size:17px!important;letter-spacing:.03em;margin:0!important;color:#fff;flex:1}
.reels-top [data-reel-position]{font-size:11px;color:#e3edf4;background:#04121ca3;border-radius:20px;padding:6px 9px}
.reels-top a,.reels-top button,.reel-actions>button{display:grid;place-items:center;width:46px;height:46px;flex:0 0 auto;color:#fff;background:#112b4399;border:1px solid #e2edf538;border-radius:50%;backdrop-filter:blur(10px);padding:10px;cursor:pointer}
.reels-top svg,.reel-actions svg,.reel-swipe svg{width:25px;height:25px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.reel-step{width:36px!important;height:36px!important}.reel-step svg{width:20px;height:20px}
.reel-actions{position:absolute;right:19px;bottom:calc(204px + env(safe-area-inset-bottom));z-index:4;display:flex;flex-direction:column;align-items:center;gap:18px}
.reel-actions>button{width:53px;height:53px}.reel-actions>button[aria-pressed=true]{border-color:#e7c984;color:#f4d786;background:#163e47b8}
.reel-actions .reel-title-thumb{width:67px;height:67px;padding:0;border:2px solid #e9dfc4;background:#102b43;overflow:hidden}
.reel-title-thumb img{width:100%;height:100%;object-fit:cover}.reel-copy{position:absolute;z-index:3;left:23px;right:100px;bottom:calc(103px + env(safe-area-inset-bottom));text-align:left;pointer-events:none;text-shadow:0 1px 10px #000}
.reel-copy>*{pointer-events:auto}.reel-copy h2{font-size:clamp(22px,4vw,31px);line-height:1.15;letter-spacing:-.02em;margin:9px 0 13px;color:#fff;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.reel-label{display:inline-block;padding:4px 7px;border-radius:5px;background:#0b263cb8;color:#efdcab;font-size:9px;letter-spacing:.08em;font-weight:750}
.reel-meta{font-size:12px;font-weight:650;line-height:1.5;margin:0 0 9px;color:#edf4f8}
.reel-description{font-size:13px;line-height:1.55;color:#f1f5f8;margin:0 0 2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.reel-info{color:#fff;background:none;border:none;text-align:left;font-weight:750;padding:8px 0;min-height:38px;cursor:pointer;font-size:12px}
.reel-progress{display:flex;align-items:center;gap:12px;margin-top:8px}.reel-progress label{flex:1}.reel-progress input{width:100%;min-height:24px;touch-action:none;padding:0;accent-color:#f2d589;border:0;background:transparent}.reel-progress span{font-variant-numeric:tabular-nums;color:#dee9ef;font-size:12px;min-width:32px}
.reel-swipe{display:flex;align-items:center;gap:5px;margin:6px 0 0;color:#bed1dd;font-size:10px}.reel-swipe svg{width:13px;height:13px}
.reel-status{position:absolute;z-index:3;top:31%;left:12%;right:12%;text-align:center;color:#fff;font-size:13px;pointer-events:none;background:#071b2dbd;border-radius:12px;white-space:pre-line;padding:10px}.reel-status:empty{display:none}
.extraits-mode .bottom-nav{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;position:fixed!important;left:50%!important;right:auto!important;transform:translateX(-50%);bottom:calc(12px + env(safe-area-inset-bottom))!important;width:calc(100% - 32px)!important;max-width:568px;border:1px solid #71839270!important;border-radius:30px;background:#142638ec!important;box-shadow:0 8px 40px #0006;padding:9px 6px!important;z-index:30;backdrop-filter:blur(20px)}
.extraits-mode .bottom-nav a{color:#b8c9d7!important;min-height:48px;min-width:0;gap:5px;font-size:10px!important}.extraits-mode .bottom-nav a.active{color:#f5d786!important;background:#273c4dbd;border-radius:23px}.extraits-mode .bottom-nav svg{width:25px!important;height:25px!important}
.reel-share-field{position:absolute;bottom:170px;left:5%;width:90%;z-index:8;color:#fff;background:#132e43}
.reels-empty{min-height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:30px 25px 130px;gap:18px;color:#dce7ef}.reels-empty h2{font-size:22px}.reels-empty a{color:#f2d589}
@media(max-height:650px){.reel-copy{bottom:92px;left:18px;right:82px}.reel-copy h2{font-size:21px;margin:7px 0}.reel-description{-webkit-line-clamp:1;font-size:12px}.reel-actions{bottom:190px;right:16px;gap:12px}.reel-actions>button{width:43px;height:43px}.reel-actions .reel-title-thumb{width:51px;height:51px}.reel-meta{font-size:11px}.reel-swipe{display:none}.reel-progress{margin-top:0}.reel-label{font-size:8px}.reels-top{top:9px;gap:7px}}
/* Portrait tablets keep the frame proportional; a wider screen never stretches
   a vertical clip. Desktop and landscape share a spacious two-column layout. */
@media(min-width:600px) and (orientation:portrait){
  .reels-stage{width:min(100%,calc(100vh * .5625));width:min(100%,calc(100dvh * .5625));max-width:680px;border-inline:1px solid #28465a}
  .reel-poster,.reel-media{object-fit:contain}
  .reel-copy h2{font-size:clamp(25px,3.4vw,34px)}
}
@media(min-width:600px) and (orientation:landscape){
  .reels-stage{--reel-top:76px;--reel-bottom:108px;--reel-gap:36px;--reel-edge:28px;--reel-video-width:min(43%,calc((100vh - 184px) * .5625));--reel-video-width:min(43%,calc((100dvh - 184px) * .5625));max-width:1120px;background:#030c14}
  .reel{background:#030c14}
  .reel-visual{inset:var(--reel-top) auto var(--reel-bottom) var(--reel-edge);width:var(--reel-video-width);border:1px solid #2c4556;border-radius:16px;background:#000}
  .reel-poster,.reel-media{object-fit:contain}
  .reel-shade{background:linear-gradient(180deg,#02091140,transparent 35%,#02091155)}
  .reels-top{top:max(16px,env(safe-area-inset-top));left:var(--reel-edge);right:var(--reel-edge);gap:14px}
  .reels-top h1{font-size:21px!important}.reels-top [data-reel-position]{font-size:12px}
  .reel-details{position:absolute;top:var(--reel-top);bottom:var(--reel-bottom);left:calc(var(--reel-edge) + var(--reel-video-width) + var(--reel-gap));right:var(--reel-edge);display:flex;flex-direction:column;justify-content:safe center;gap:22px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#567386 transparent;padding:8px 12px 8px 0}
  .reel-copy{position:static;order:0;min-width:0;text-shadow:none;pointer-events:auto}
  .reel-copy h2{font-size:clamp(26px,3vw,40px);margin:14px 0 18px;-webkit-line-clamp:3}
  .reel-label{font-size:10px;background:#112b40;color:#f3dda5}
  .reel-meta{font-size:14px;color:#deebf2;margin-bottom:14px}
  .reel-description{font-size:15px;line-height:1.7;-webkit-line-clamp:4;color:#deebf2}
  .reel-info{font-size:14px;min-height:44px;color:#f4d786}
  .reel-progress{margin-top:14px;gap:16px}.reel-progress input{min-height:32px}.reel-progress span{font-size:13px}
  .reel-swipe{display:flex;font-size:12px;margin-top:12px;color:#b8cfdf}
  .reel-actions{position:static;order:1;align-self:flex-start;flex-direction:row;flex-wrap:wrap;gap:14px}
  .reel-actions>button{width:52px;height:52px}.reel-actions .reel-title-thumb{width:52px;height:52px}
  .reel-status{left:8%;right:8%;top:42%;font-size:13px}
  .reel-share-field{left:calc(var(--reel-edge) + var(--reel-video-width) + var(--reel-gap));right:var(--reel-edge);width:auto;bottom:116px}
  .extraits-mode .bottom-nav{max-width:620px}
}
@media(min-width:600px) and (orientation:landscape) and (max-height:650px){
  .reels-stage{--reel-top:66px;--reel-bottom:92px;--reel-gap:24px;--reel-edge:20px;--reel-video-width:min(42%,calc((100vh - 158px) * .5625));--reel-video-width:min(42%,calc((100dvh - 158px) * .5625))}
  .reel-details{gap:14px;padding-top:0;padding-bottom:0}
  .reel-copy h2{font-size:24px;line-height:1.15;margin:7px 0 10px;-webkit-line-clamp:2}
  .reel-meta{font-size:12px;margin-bottom:8px}.reel-description{font-size:13px;line-height:1.5;-webkit-line-clamp:2}
  .reel-label{font-size:9px}.reel-swipe{display:none}.reel-progress{margin-top:0}.reel-info{font-size:12px;min-height:40px}
  .reel-actions{gap:10px}.reel-actions>button,.reel-actions .reel-title-thumb{width:44px;height:44px}
  .reels-top{top:max(10px,env(safe-area-inset-top));gap:10px}.reels-top h1{font-size:18px!important}
  .extraits-mode .bottom-nav{bottom:calc(6px + env(safe-area-inset-bottom))!important;padding:6px!important}.extraits-mode .bottom-nav a{min-height:44px}
}
@media(max-width:359px){.reels-top{left:10px;right:10px;gap:6px}.reels-top [data-reel-position]{font-size:10px;padding:5px 7px}.reel-copy{left:16px;right:80px}.reel-copy h2{font-size:21px}.reel-actions{right:12px}.reel-actions>button{width:46px;height:46px}.reel-actions .reel-title-thumb{width:54px;height:54px}.extraits-mode .bottom-nav{width:calc(100% - 16px)!important}.extraits-mode .bottom-nav a{font-size:9px!important}}
@media(prefers-reduced-motion:reduce){.reels-feed{scroll-behavior:auto}}