/* Le portail d'AX Editor : l'interface de validation, la même pour l'équipe et pour les clients.
   Matière et jetons : css/base.css (charte Apollo X). Ici, seulement ce qui est propre au portail. */

.pt { min-height: 100dvh; }
.pt #app { display: flex; flex-direction: column; min-height: 100dvh; }
.pt [hidden] { display: none !important; }

/* ── Entrer ── */
.pt-auth { display: grid; place-items: center; flex: 1; padding: 24px 16px; }
.pt-auth-card { display: flex; flex-direction: column; gap: 14px; width: min(380px, 100%); padding: 26px 26px 22px; }
.pt-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 6px; color: var(--ink-title); font-size: 1.125rem; font-weight: 500; letter-spacing: -.03em; }
.pt-brand img { width: 38px; height: 38px; border-radius: 12px; box-shadow: 0 6px 18px rgb(20 50 95 / 18%); }
.pt-auth-card h1 { color: var(--ink-title); font-size: var(--t-lg); font-weight: 500; letter-spacing: -.02em; }
.pt-auth-card p { color: var(--ink-2); font-size: var(--t-sm); }
.pt-field { display: flex; flex-direction: column; gap: 5px; }
.pt-field > span { color: var(--ink-2); font-size: var(--t-xs); font-weight: 500; }
.pt-input, .pt-field input, .pt-field select {
  width: 100%; min-height: 40px; padding: 0 13px; border: 1px solid var(--glass-edge); border-radius: var(--r-sm);
  background: #ffffffb8; box-shadow: inset 0 0 0 1px rgb(20 50 95 / 9%); color: var(--ink); font-size: var(--t-md);
  transition: box-shadow var(--ui) ease, background-color var(--ui) ease;
}
.pt-field input:focus, .pt-input:focus { outline: none; background: #fff; box-shadow: inset 0 0 0 1px var(--focus), 0 0 0 3px rgb(0 193 196 / 18%); }
.pt-err { color: #B45309; font-size: var(--t-sm); }
.pt-hint { color: var(--ink-3) !important; font-size: var(--t-xs) !important; }
.pt-wide { width: 100%; min-height: 42px; font-size: var(--t-md); }

/* ── Le cadre ── */
.pt-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 8px max(18px, env(safe-area-inset-left)) 8px max(18px, env(safe-area-inset-right));
  background: linear-gradient(180deg, rgb(244 247 251 / 88%), rgb(244 247 251 / 62%)); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-bottom: 1px solid rgb(20 50 95 / 6%); }
.pt-top .pt-brand { margin: 0; font-size: .9375rem; }
.pt-top .pt-brand img { width: 28px; height: 28px; border-radius: 9px; box-shadow: none; }
.pt-clients { display: flex; align-items: center; gap: 6px; min-width: 0; margin-left: 6px; overflow-x: auto; scrollbar-width: none; }
.pt-clients::-webkit-scrollbar { display: none; }
.pt-cl { display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: 36px; padding: 4px 13px 4px 5px; border-radius: 999px; color: var(--ink-2); font-size: var(--t-sm); font-weight: 500; transition: background-color var(--ui) ease, color var(--ui) ease; }
.pt-cl[aria-current="true"] { background: #ffffffd9; box-shadow: var(--shadow-sm); color: var(--ink-title); }
@media (hover: hover) and (pointer: fine) { .pt-cl:hover { background: var(--glass-hover); color: var(--ink); } }
.pt-av { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 9px; overflow: hidden; background: #14325F; color: #fff; font-size: var(--t-2xs); font-weight: 600; }
.pt-av img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.pt-top-end { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.pt-me { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px 0 5px; border-radius: 999px; color: var(--ink-2); font-size: var(--t-sm); font-weight: 500; }
.pt-me i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(140deg, #00C1C4, #14325F); color: #fff; font-style: normal; font-size: var(--t-2xs); font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .pt-me:hover { background: var(--glass-hover); color: var(--ink); } }
.pt-menu { position: absolute; z-index: 40; min-width: 210px; padding: 6px; border: 1px solid var(--glass-edge); border-radius: var(--r-md); background: #fffffff2; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--shadow-pop); transform-origin: top right; animation: pt-pop var(--ui) var(--ease); }
.pt-menu button, .pt-menu a { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 36px; padding: 0 10px; border-radius: 10px; color: var(--ink); font-size: var(--t-sm); text-align: left; }
.pt-menu button:hover, .pt-menu a:hover { background: rgb(20 50 95 / 6%); }
.pt-menu small { display: block; padding: 6px 10px 8px; color: var(--ink-3); font-size: var(--t-xs); border-bottom: 1px solid var(--line); margin-bottom: 4px; }
@keyframes pt-pop { from { opacity: 0; transform: scale(.97) translateY(-4px); } }
.pt-apercu { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 32px; padding: 4px 14px; background: #14325F; color: #fff; font-size: var(--t-xs); }
.pt-apercu a { text-decoration: underline; text-underline-offset: 2px; }

.pt-main { flex: 1; width: min(1320px, 100%); margin: 0 auto; padding: 18px max(18px, env(safe-area-inset-left)) 40px max(18px, env(safe-area-inset-right)); }
.pt-sec { margin-bottom: 26px; }
.pt-sec > h2 { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; color: var(--ink-title); font-size: var(--t-lg); font-weight: 500; letter-spacing: -.025em; }
.pt-sec > h2 small { color: var(--ink-3); font-size: var(--t-sm); font-weight: 400; letter-spacing: 0; }
.pt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(164px, 1fr)); gap: 16px 14px; }
.pt-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; color: inherit; }
.pt-poster { position: relative; display: block; aspect-ratio: 9 / 16; overflow: hidden; border-radius: var(--r-lg); background: #0D2547; box-shadow: 0 8px 24px rgb(20 50 95 / 12%), inset 0 0 0 1px rgb(255 255 255 / 10%); transition: transform var(--panel) var(--ease), box-shadow var(--panel) var(--ease); }
.pt-poster img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 180ms ease; }
.pt-poster img.is-in { opacity: 1; }
.pt-poster .chip { position: absolute; left: 8px; top: 8px; background-color: #fffffff0; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.pt-poster .chip[data-tone="rose"] { background: #CFF6F6f5; }
.pt-poster .chip[data-tone="ok"] { background: #DCFCE7f5; }
.pt-n { position: absolute; right: 8px; top: 8px; display: inline-flex; align-items: center; gap: 4px; min-height: 21px; padding: 0 8px; border-radius: 999px; background: #00C1C4; color: #0D2547; font-size: var(--t-2xs); font-weight: 600; }
.pt-n .icon { width: 11px; height: 11px; stroke-width: 2; }
.pt-play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: #ffffff38; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px #ffffff70; color: #fff; opacity: 0; transition: opacity var(--ui) ease, transform var(--ui) var(--ease); transform: scale(.92); }
.pt-play .icon { width: 18px; height: 18px; fill: currentColor; stroke: none; margin-left: 2px; }
@media (hover: hover) and (pointer: fine) {
  .pt-card:hover .pt-poster { transform: translateY(-2px); box-shadow: 0 16px 36px rgb(20 50 95 / 20%), inset 0 0 0 1px rgb(255 255 255 / 14%); }
  .pt-card:hover .pt-play { opacity: 1; transform: none; }
}
.pt-card:active .pt-poster { transform: scale(.985); }
.pt-card-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 0 2px; }
.pt-card-t b { color: var(--ink); font-size: var(--t-base); font-weight: 500; line-height: 1.25; letter-spacing: -.01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pt-card-t small { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; color: var(--ink-3); font-size: var(--t-2xs); }
.pt-fm { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgb(20 50 95 / 14%); color: var(--ink-2); font-size: 10.5px; font-variant-numeric: var(--numeric); }
.pt-fm[data-ok="1"] { background: var(--ok-bg); box-shadow: none; color: var(--ok); }
.pt-fm .icon { width: 9px; height: 9px; stroke-width: 2.6; }
.pt-empty { display: grid; place-items: center; gap: 6px; padding: 54px 20px; border-radius: var(--r-xl); border: 1px dashed rgb(20 50 95 / 16%); color: var(--ink-3); font-size: var(--t-sm); text-align: center; }
.pt-empty b { color: var(--ink-title); font-size: var(--t-md); font-weight: 500; }

/* ── Une vidéo ── */
.pt-rv { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: 18px; flex: 1; width: min(1320px, 100%); margin: 0 auto; padding: 14px max(18px, env(safe-area-inset-left)) 18px max(18px, env(safe-area-inset-right)); align-items: start; }
.pt-stage { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pt-stage-top { display: flex; align-items: center; gap: 10px; min-height: 40px; }
.pt-ttl { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pt-ttl h1 { color: var(--ink-title); font-size: var(--t-lg); font-weight: 500; letter-spacing: -.025em; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-ttl small { color: var(--ink-3); font-size: var(--t-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-seg { position: relative; display: inline-flex; flex: none; padding: 3px; border-radius: 999px; background: rgb(20 50 95 / 7%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 60%); }
.pt-seg button { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 0 14px; border-radius: 999px; color: var(--ink-2); font-size: var(--t-sm); font-weight: 500; font-variant-numeric: var(--numeric); transition: color var(--ui) ease; }
.pt-seg button[aria-selected="true"] { color: var(--ink-title); }
.pt-seg button .icon { width: 11px; height: 11px; stroke-width: 2.6; color: var(--ok-dot); }
.pt-seg i { position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 0; width: 0; border-radius: 999px; background: #fff; box-shadow: 0 2px 8px rgb(20 50 95 / 14%); transition: transform var(--panel) var(--ease-rail), width var(--panel) var(--ease-rail); }
.pt-player-wrap { display: grid; place-items: center; min-height: 0; }
.pt-player { position: relative; width: min(100%, calc((100dvh - 198px) * var(--ar, .5625))); aspect-ratio: var(--ar, .5625); overflow: hidden; border-radius: var(--r-xl); background: #060A12; box-shadow: 0 18px 50px rgb(20 50 95 / 22%); transition: width var(--panel) var(--ease), aspect-ratio var(--panel) var(--ease); }
.pt-player video { width: 100%; height: 100%; object-fit: contain; background: #060A12; }
.pt-bigplay { position: absolute; inset: 0; display: grid; place-items: center; width: 100%; color: #fff; }
.pt-bigplay span { display: grid; place-items: center; width: 66px; height: 66px; border-radius: 50%; background: #ffffff30; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px #ffffff80, 0 8px 28px rgb(6 10 18 / 30%); transition: transform var(--ui) var(--ease), opacity var(--ui) ease; }
.pt-bigplay .icon { width: 24px; height: 24px; fill: currentColor; stroke: none; margin-left: 3px; }
.pt-player.is-playing .pt-bigplay span { opacity: 0; transform: scale(.9); }
.pt-ctl { display: flex; align-items: center; gap: 8px; width: min(100%, 760px); margin: 0 auto; padding: 5px 8px; border: 1px solid var(--glass-edge); border-radius: 999px; background: var(--glass); box-shadow: var(--shadow-sm); }
.pt-ctl .ib-only { flex: none; }
.pt-ctl .ib-only .icon { width: 16px; height: 16px; }
.pt-pp .icon { fill: currentColor; stroke: none; }
.pt-time { flex: none; color: var(--ink-2); font-size: var(--t-xs); font-variant-numeric: var(--numeric); }
.pt-scrub { position: relative; flex: 1; height: 34px; min-width: 60px; cursor: pointer; touch-action: none; }
.pt-scrub-track { position: absolute; left: 0; right: 0; top: 15px; height: 4px; border-radius: 4px; background: rgb(20 50 95 / 12%); overflow: hidden; }
.pt-scrub-fill { height: 100%; width: 100%; background: var(--green); transform-origin: left; transform: scaleX(0); }
.pt-scrub-band { position: absolute; top: 12px; height: 10px; border-radius: 5px; background: rgb(0 193 196 / 28%); box-shadow: inset 0 0 0 1px rgb(0 193 196 / 55%); pointer-events: none; }
.pt-scrub-thumb { position: absolute; top: 10px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #fff; box-shadow: 0 1px 5px rgb(20 50 95 / 35%), inset 0 0 0 1px rgb(20 50 95 / 10%); pointer-events: none; }
.pt-mark { position: absolute; top: 3px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #00C1C4; box-shadow: 0 0 0 2px #F4F7FB; cursor: pointer; transition: transform var(--fast) var(--ease); }
.pt-mark[data-role="equipe"] { background: #5B80B8; }
.pt-mark[data-fait="1"] { background: #94A3B8; }
.pt-mark:hover, .pt-mark.is-on { transform: scale(1.5); }

.pt-side { position: sticky; top: 72px; display: flex; flex-direction: column; max-height: calc(100dvh - 90px); overflow: hidden; }
.pt-side-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; padding: 14px 16px 10px; }
.pt-side-head p { flex-basis: 100%; color: var(--ink-2); font-size: var(--t-xs); }
.pt-cmp { display: flex; flex-direction: column; gap: 8px; margin: 0 12px; padding: 10px; border-radius: var(--r-md); background: #ffffffb8; box-shadow: inset 0 0 0 1px rgb(20 50 95 / 9%); transition: box-shadow var(--ui) ease, background-color var(--ui) ease; }
.pt-cmp:focus-within { background: #fff; box-shadow: inset 0 0 0 1px var(--focus), 0 0 0 3px rgb(0 193 196 / 16%); }
.pt-cmp textarea { width: 100%; min-height: 42px; max-height: 180px; padding: 2px 4px; border: 0; background: transparent; color: var(--ink); font-size: var(--t-md); line-height: 1.4; resize: none; }
.pt-cmp textarea:focus { outline: none; }
.pt-cmp textarea::placeholder { color: var(--ink-ghost); }
.pt-cmp-row { display: flex; align-items: center; gap: 6px; min-height: 30px; }
.pt-tc { display: inline-flex; align-items: center; gap: 5px; min-height: 26px; padding: 0 9px; border-radius: 999px; background: #CFF6F6; color: #0D2547; font-size: var(--t-xs); font-weight: 550; font-variant-numeric: var(--numeric); transition: background-color var(--ui) ease, transform var(--fast) var(--ease); }
.pt-tc:active { transform: scale(.96); }
.pt-tc .icon { width: 12px; height: 12px; }
.pt-tc--ghost { background: transparent; box-shadow: inset 0 0 0 1px rgb(20 50 95 / 16%); color: var(--ink-2); font-weight: 500; }
.pt-cmp-row .btn { margin-left: auto; }
.pt-cmp-hint { margin: 6px 16px 0; color: var(--ink-3); font-size: var(--t-2xs); }
.pt-notes { flex: 1; min-height: 60px; overflow-y: auto; padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; }
.pt-notes-t { display: flex; align-items: center; gap: 8px; padding: 6px 4px 2px; color: var(--ink-3); font-size: var(--t-2xs); font-weight: 500; text-transform: none; }
.pt-note { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px 9px; align-items: start; padding: 9px 10px; border-radius: var(--r-sm); background: #ffffff8c; box-shadow: inset 0 0 0 1px rgb(20 50 95 / 6%); transition: background-color var(--ui) ease, box-shadow var(--ui) ease; }
.pt-note.is-on { background: #fff; box-shadow: inset 0 0 0 1px rgb(0 193 196 / 55%); }
.pt-note[data-fait="1"], .pt-note[data-vieux="1"] { opacity: .62; }
.pt-note .pt-tc { grid-row: span 2; align-self: start; cursor: pointer; }
.pt-note[data-role="equipe"] .pt-tc { background: #DCE6F5; }
.pt-note p { color: var(--ink); font-size: var(--t-base); line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
.pt-note small { grid-column: 2; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 7px; color: var(--ink-3); font-size: var(--t-2xs); }
.pt-note small b { color: var(--ink-2); font-weight: 500; }
.pt-note-acts { grid-row: span 2; display: flex; gap: 0; opacity: 0; transition: opacity var(--ui) ease; }
.pt-note:hover .pt-note-acts, .pt-note:focus-within .pt-note-acts { opacity: 1; }
@media (hover: none) { .pt-note-acts { opacity: 1; } }
.pt-note-acts button { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--ink-3); }
.pt-note-acts button:hover { background: rgb(20 50 95 / 7%); color: var(--ink); }
.pt-note-acts .icon { width: 13px; height: 13px; }
.pt-note textarea { grid-column: 2; width: 100%; min-height: 60px; padding: 6px 8px; border: 0; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px var(--focus); color: var(--ink); font-size: var(--t-base); line-height: 1.4; resize: vertical; }
.pt-tag { display: inline-flex; align-items: center; min-height: 16px; padding: 0 6px; border-radius: 999px; background: #CFF6F6; color: #0D2547; font-size: 10px; font-weight: 550; }
.pt-tag[data-role="equipe"] { background: #DCE6F5; color: #1B3A6B; }
.pt-foot { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 14px; border-top: 1px solid var(--line); background: linear-gradient(180deg, #ffffff30, #ffffff90); }
.pt-foot p { color: var(--ink-2); font-size: var(--t-xs); text-align: center; }
.pt-foot .btn--primary { min-height: 44px; font-size: var(--t-md); }
.pt-okline { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border-radius: 999px; background: var(--ok-bg); color: var(--ok); font-size: var(--t-md); font-weight: 500; }
.pt-okline .icon { width: 17px; height: 17px; stroke-width: 2.2; }
.pt-lines { display: flex; flex-direction: column; gap: 5px; }
.pt-line { display: flex; align-items: center; gap: 8px; min-height: 26px; color: var(--ink-2); font-size: var(--t-xs); }
.pt-line b { color: var(--ink); font-weight: 500; font-variant-numeric: var(--numeric); min-width: 34px; }
.pt-line .chip { margin-left: auto; }

/* ── Les accès ── */
.pt-acces { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 18px; align-items: start; }
.pt-table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.pt-table th { padding: 8px 10px; color: var(--ink-3); font-size: var(--t-2xs); font-weight: 500; text-align: left; border-bottom: 1px solid var(--line); }
.pt-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.pt-table tr:last-child td { border-bottom: 0; }
.pt-table td b { display: block; color: var(--ink); font-weight: 500; }
.pt-table td small { color: var(--ink-3); font-size: var(--t-xs); }
.pt-table .pt-row-acts { display: flex; justify-content: flex-end; gap: 2px; white-space: nowrap; }
.pt-form { display: flex; flex-direction: column; gap: 12px; padding: 4px 20px 20px; }
.pt-roles { display: flex; gap: 6px; }
.pt-roles label, .pt-checks label { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgb(20 50 95 / 14%); color: var(--ink-2); font-size: var(--t-sm); cursor: pointer; transition: background-color var(--ui) ease, box-shadow var(--ui) ease, color var(--ui) ease; }
.pt-roles input, .pt-checks input { position: absolute; opacity: 0; pointer-events: none; }
.pt-roles label:has(input:checked), .pt-checks label:has(input:checked) { background: #14325F; box-shadow: none; color: #fff; }
.pt-roles label:has(input:focus-visible), .pt-checks label:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.pt-checks { display: flex; flex-wrap: wrap; gap: 6px; }
.pt-lien { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--r-md); background: #E9FBFB; box-shadow: inset 0 0 0 1px rgb(0 193 196 / 40%); }
.pt-lien p { color: #0D2547; font-size: var(--t-xs); }
.pt-lien code { display: block; padding: 8px 10px; border-radius: 8px; background: #fff; color: var(--ink); font-size: var(--t-xs); overflow-wrap: anywhere; user-select: all; }

/* ── Notifications ── */
.pt-toasts { position: fixed; left: 50%; top: max(66px, calc(env(safe-area-inset-top) + 58px)); z-index: 60; display: flex; flex-direction: column; align-items: center; gap: 8px; transform: translateX(-50%); pointer-events: none; }
.pt-toast { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 8px 6px 16px; border-radius: 999px; background: #0D2547f2; color: #fff; font-size: var(--t-sm); box-shadow: 0 10px 30px rgb(13 37 71 / 30%); pointer-events: auto; animation: pt-up var(--panel) var(--ease); }
.pt-toast > span { padding-right: 8px; }
.pt-toast button { min-height: 28px; padding: 0 11px; border-radius: 999px; background: #ffffff24; color: #fff; font-size: var(--t-xs); font-weight: 500; }
@keyframes pt-up { from { opacity: 0; transform: translateY(-8px); } }
.pt-shine { position: relative; overflow: hidden; }
.pt-shine::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, #ffffff40 50%, transparent 70%); transform: translateX(-100%); animation: pt-shine 1.4s ease-in-out infinite; }
@keyframes pt-shine { to { transform: translateX(100%); } }

@media (max-width: 900px) {
  .pt-rv { grid-template-columns: minmax(0, 1fr); padding-bottom: 0; }
  .pt-player { width: min(100%, calc(62dvh * var(--ar, .5625))); }
  .pt-side { position: static; max-height: none; overflow: visible; }
  .pt-notes { overflow: visible; }
  .pt-foot { position: sticky; bottom: 0; margin: 0 -1px -1px; border-radius: 0 0 var(--r-xl) var(--r-xl); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); background: #ffffffe0; padding-bottom: max(14px, env(safe-area-inset-bottom)); }
  .pt-acces { grid-template-columns: minmax(0, 1fr); }
  .pt-me span { display: none; }
  .pt-me { padding-right: 5px; }
  .pt-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px 10px; }
  .pt-table .pt-col-opt { display: none; }
}
.pt:has(.pt-apercu) .pt-player { width: min(100%, calc((100dvh - 232px) * var(--ar, .5625))); }
.pt:has(.pt-apercu) .pt-side { top: 104px; max-height: calc(100dvh - 122px); }
@media (max-width: 560px) {
  .pt-top .pt-brand b { display: none; }
  .pt-stage-top { flex-wrap: wrap; row-gap: 8px; }
  .pt-ttl { flex-basis: calc(100% - 50px); }
  .pt-seg { margin-left: 44px; }
  .pt-stage-top #dl { margin-left: auto; }
  .pt-time { font-size: var(--t-2xs); }
}
@media (prefers-reduced-motion: reduce) {
  .pt-poster, .pt-seg i, .pt-player, .pt-menu, .pt-toast { transition: none; animation: none; }
  .pt-shine::after { animation: none; }
}