:root { color-scheme: dark; --bg:#10131a; --surface:#191e28; --surface-2:#212835; --line:#313a49; --ink:#ecf0f5; --muted:#919baa; --accent:#d5f670; --accent-dark:#111813; --red:#ff9d98; --r:16px; font-family:Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; }
*{box-sizing:border-box} html{min-height:100%;scroll-behavior:smooth} body{margin:0;background:var(--bg);color:var(--ink);min-height:100vh} button,input,select,textarea{font:inherit} button{cursor:pointer} button:disabled{cursor:not-allowed;opacity:.5} [hidden]{display:none!important} a{color:inherit} :focus-visible{outline:2px solid var(--accent);outline-offset:3px} ::selection{background:var(--accent);color:#111}
body::before{position:fixed;z-index:-1;inset:0;content:"";pointer-events:none;background:radial-gradient(ellipse 70% 35% at 50% -20%,rgba(120,148,152,.13),transparent)}
.eyebrow{margin:0;text-transform:uppercase;letter-spacing:.19em;font-size:10px;font-weight:800;color:var(--accent)}
.dot{color:var(--accent)}
.logo{width:40px;height:40px;flex:none;border-radius:10px;background:var(--accent);color:#111b1b;display:grid;place-items:center;position:relative;font-size:17px;font-weight:900;letter-spacing:-.08em}.logo i{position:absolute;width:10px;height:3px;background:#111;right:7px;bottom:7px;border-radius:5px}.logo--large{width:66px;height:66px;border-radius:16px;font-size:28px}.logo--large i{width:17px;height:5px;bottom:12px;right:12px}
.button{border:1px solid transparent;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;gap:13px;padding:12px 17px;font-size:13px;font-weight:740;white-space:nowrap;transition:background .18s,border-color .18s,transform .18s}.button:hover:not(:disabled){transform:translateY(-1px)}.button--primary{color:#111910;background:var(--accent)}.button--primary:hover:not(:disabled){background:#e5ff95}.button--outline{border-color:#465061;background:transparent;color:#e9edf2}.button--outline:hover:not(:disabled){border-color:#a0abba;background:#252b36}.button--subtle{background:transparent;color:#bbc2ce}.button--subtle:hover:not(:disabled){background:#252a34}.button--small{padding:9px 12px;font-size:12px}.button--wide{width:100%}
.login-page{min-height:100svh;display:flex;align-items:center;justify-content:center;padding:32px 20px}.login-card{width:100%;max-width:440px;background:linear-gradient(165deg,#1d2330,#151a23);border:1px solid #303947;border-radius:22px;padding:38px;box-shadow:0 22px 90px #0005}.login-card .logo{margin-bottom:30px}.login-card h1{font-size:clamp(32px,5vw,42px);letter-spacing:-.065em;line-height:1.07;margin:10px 0}.login-subtitle{line-height:1.6;font-size:14px;color:#aab4c2;margin:16px 0 34px}.login-form label{display:block;color:#c5ceda;font-size:12px;font-weight:700;margin:0 0 9px}.login-form input{width:100%;border:1px solid #435065;border-radius:10px;background:#101620;color:#fff;font-size:30px;letter-spacing:.52em;text-align:center;padding:11px;margin-bottom:18px}.login-form input::placeholder{font-size:20px;letter-spacing:.4em;color:#677385}.login-footnote{font-size:11px;color:#697585;text-align:center;margin:30px 0 0}.error-message{font-size:13px;color:var(--red)}
.topbar{border-bottom:1px solid #29313c;background:#12161ecc}.topbar-inner{max-width:1420px;margin:auto;padding:18px 42px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;align-items:center;gap:13px}.brand strong,.brand small{display:block}.brand strong{font-size:15px;letter-spacing:-.035em}.brand small{font-size:8px;font-weight:800;letter-spacing:.22em;color:var(--muted);margin-top:4px}.header-actions{display:flex;align-items:center;gap:24px}.header-pill{display:flex;align-items:center;gap:9px;font-size:11px;color:#9eabba}.pulse,.status-dot{background:var(--accent);border-radius:50%;width:7px;height:7px;box-shadow:0 0 12px #d5f6706e}.logout-form{margin:0}
.studio{max-width:1420px;margin:auto;padding:50px 42px 22px}.studio-head{display:flex;justify-content:space-between;gap:25px;align-items:center;margin-bottom:35px}.studio-head h1{font-size:clamp(29px,3.4vw,46px);letter-spacing:-.055em;line-height:1.12;margin:13px 0}.studio-head h1 em{font-weight:450;font-style:normal;color:#a9b6c4}.studio-head>div>p:last-child{font-size:13px;color:var(--muted);max-width:700px;line-height:1.7}.eyebrow-line{display:inline-block;width:20px;height:1px;background:var(--accent);vertical-align:middle;margin-right:7px}
.import-card{max-width:930px;margin:20px auto 65px;background:#1a202a;border:1px solid var(--line);border-radius:19px;padding:34px}.card-heading{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:23px;margin-bottom:28px}.card-heading h2{font-size:25px;letter-spacing:-.035em;margin:7px 0 0}.card-counter{font-size:10px;color:#768496;letter-spacing:.17em;font-weight:900}.form-field label{display:block;font-size:13px;font-weight:700;margin-bottom:11px}.required{color:var(--accent)}.id-input{display:flex;align-items:center;background:#10151d;border:1px solid #3a4757;border-radius:10px;overflow:hidden;max-width:530px}.id-input>span{font-size:19px;font-weight:900;padding:0 20px;color:var(--accent);border-right:1px solid #364250}.id-input input{border:0;outline:0;background:none;color:#fff;font-size:16px;padding:17px;width:100%;font-variant-numeric:tabular-nums}.id-input:focus-within{border-color:var(--accent)}.field-hint{color:#8794a4;font-size:11px;line-height:1.5;display:block;margin-top:8px}.upload-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:30px 0 24px}.file-drop{position:relative;border:1px dashed #485669;border-radius:13px;padding:24px;background:#151b25;min-height:189px;display:flex;flex-direction:column;align-items:start;cursor:pointer;transition:border-color .2s,background .2s}.file-drop:hover,.file-drop:focus-within,.file-drop.has-file{border-color:var(--accent);background:#1a241f}.file-drop input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}.file-marker{font-size:10px;font-weight:800;color:#798899;letter-spacing:.12em}.file-icon{font-size:27px;font-weight:300;color:var(--accent);position:absolute;right:22px;top:17px}.file-drop strong{font-size:17px;margin:23px 0 2px;letter-spacing:-.025em}.file-drop>span:nth-of-type(4){color:#9ba7b5;font-size:12px}.file-name{font-size:11px;color:var(--accent);margin-top:12px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.form-footer{border-top:1px solid var(--line);padding-top:22px;display:flex;justify-content:space-between;align-items:center;gap:20px}.form-footer .field-hint{max-width:310px}.message{min-height:15px;font-size:12px;line-height:1.5;color:var(--accent);margin:12px 0 0}.message.is-error{color:var(--red)}
.editor-section{margin:22px 0 40px}.editor-topline{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;gap:15px}.section-chip{font-size:9px;letter-spacing:.16em;color:var(--accent);font-weight:850}.editor-topline h2{font-size:19px;margin:5px 0 0;letter-spacing:-.035em}.status-group{display:flex;align-items:center;gap:9px;color:#aab7c3;font-size:11px}.editor-layout{display:grid;grid-template-columns:minmax(0,1fr) 285px;gap:24px;align-items:start}.player-column{min-width:0}.player-frame,.subtitle-box,.player-toolbar,.edit-actions,.editor-instruction,.player-column>.message{width:100%}.player-frame{position:relative;aspect-ratio:16/9;background:#050607;overflow:hidden;border-radius:10px 10px 0 0}.video-host,.video-host iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}.video-placeholder{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;flex-direction:column;gap:16px;background:linear-gradient(150deg,#131924,#070b0f);color:#a5b1bf;font-size:12px;pointer-events:none}.spinner{width:30px;height:30px;border-radius:50%;border:2px solid #526170;border-top-color:var(--accent);animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.subtitle-box{background:#181818;padding:12px 20px;min-height:86px;display:grid;place-items:center;border-radius:0 0 10px 10px}.subtitle-caption{font-family:Arial,Helvetica,sans-serif;font-size:clamp(16px,1.85vw,22px);font-weight:450;line-height:1.4;text-align:center;color:#fff;white-space:pre-line;overflow-wrap:anywhere;width:100%;height:2.8em;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;align-content:center}.subtitle-caption.can-edit{cursor:text}.subtitle-caption.can-edit:hover{color:#e0faa2}.caption-editor{height:2.8em;min-height:2.8em;max-height:2.8em;resize:none;padding:0 8px;color:#fff;text-align:center;line-height:1.4;font-size:clamp(16px,1.85vw,22px);font-family:Arial,Helvetica,sans-serif;border:1px solid var(--accent);background:#2b3030;border-radius:6px;width:100%;outline:0}.edit-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:10px 0 0}.edit-hint{color:#a8b2bf;font-size:11px;margin-right:auto}.player-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:12px;min-height:45px}.toolbar-left,.toolbar-right{display:flex;align-items:center;gap:12px;min-width:0}.toolbar-left label{font-size:10px;color:#8795a4;font-weight:850;letter-spacing:.15em}.toolbar-left select{max-width:190px;padding:9px 33px 9px 12px;background:#202733;color:#edf2f6;border:1px solid #414d5c;border-radius:8px;font-size:12px;cursor:pointer}.clock{font-size:12px;letter-spacing:.05em;color:#aab6c4;font-variant-numeric:tabular-nums}.toolbar-separator{width:1px;height:18px;background:#3b4553}.editor-instruction{font-size:11px;color:#7f8d9d;margin:13px 0 0}.side-panel{border:1px solid var(--line);border-radius:14px;padding:22px;background:#191f29}.panel-section{padding:3px 0}.panel-title{display:flex;align-items:center;gap:10px}.panel-title h3{font-size:14px;letter-spacing:-.02em;margin:0}.panel-icon{display:grid;place-items:center;width:28px;height:28px;background:#2c3541;border-radius:8px;color:var(--accent);font-size:17px}.panel-description{color:#9aa7b8;font-size:11px;line-height:1.75;margin:13px 0 17px}.panel-divider{height:1px;background:var(--line);margin:23px 0}.download-rows{display:grid;gap:9px}.download-entry{display:flex;align-items:center;justify-content:space-between;gap:7px;background:#111822;border:1px solid #384454;padding:11px 10px;border-radius:9px}.download-entry-main{min-width:0}.download-entry-main strong,.download-entry-main small{display:block}.download-entry-main strong{font-size:12px}.download-entry-main small{color:#8a99a9;font-size:10px;max-width:145px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:5px}.download-button{background:#334036;color:var(--accent);padding:7px 10px;text-decoration:none;border-radius:7px;font-size:12px;font-weight:800;white-space:nowrap}.download-button:hover{background:#45593f}.original-link{display:inline-block;color:#9caaba;font-size:10px;text-underline-offset:3px;margin-top:4px}.progress-card{border:1px solid #323f4b;border-radius:10px;padding:15px;background:#131922}.progress-card span,.progress-card strong,.progress-card small{display:block}.progress-card span{font-size:9px;letter-spacing:.16em;color:#8190a0;font-weight:850}.progress-card strong{font-size:28px;letter-spacing:-.03em;margin:9px 0;font-variant-numeric:tabular-nums}.progress-card small{font-size:10px;color:#7c8a9b}.keyboard-shortcut{display:flex;align-items:center;justify-content:space-between;gap:9px;font-size:10px;color:#9ba7b5}.keyboard-shortcut kbd{font-family:inherit;font-size:10px;color:#cbd5df;border:1px solid #485563;border-radius:4px;padding:5px 6px;background:#232c38}.app-footer{padding:27px 0 10px;border-top:1px solid #26313d;display:flex;justify-content:space-between;gap:15px;color:#687787;font-size:9px;font-weight:750;letter-spacing:.15em}.footer-divider{color:var(--accent);padding:0 5px}
@media(max-width:980px){.editor-layout{grid-template-columns:minmax(0,1fr)}.side-panel{display:block}.side-panel .panel-divider{height:1px;width:100%;margin:23px 0}.keyboard-shortcut{display:flex}.keyboard-shortcut kbd{display:inline-block;margin-right:3px}}
@media(max-width:680px){.topbar-inner{padding:14px 18px}.header-pill{display:none}.studio{padding:29px 15px 15px}.studio-head{align-items:flex-start;flex-direction:column;margin-bottom:23px;gap:10px}.studio-head h1{font-size:31px}.studio-head .button{align-self:flex-start}.import-card{padding:22px 17px}.upload-grid{grid-template-columns:1fr;gap:12px}.file-drop{min-height:150px;padding:18px}.file-drop strong{margin-top:12px}.form-footer{align-items:stretch;flex-direction:column}.form-footer .button{width:100%}.subtitle-box{min-height:74px;padding:8px 10px}.subtitle-caption,.caption-editor{font-size:16px}.player-toolbar{align-items:flex-start;gap:8px;flex-wrap:wrap}.toolbar-left{gap:7px}.toolbar-left select{max-width:140px}.toolbar-right{gap:7px}.side-panel{display:block;padding:18px}.side-panel .panel-divider{height:1px;width:100%;margin:20px 0}.edit-actions{flex-wrap:wrap}.edit-hint{width:100%}.editor-topline{align-items:flex-start}.status-group{margin-top:9px}.app-footer{font-size:8px;letter-spacing:.04em}.login-card{padding:28px 24px}}

/* v1.1 — Console d'horodatage à droite du lecteur */
.timing-section .panel-description { margin-bottom:13px; }
.timing-display { display:grid; gap:8px; }
.timing-row { display:grid; gap:5px; background:#121923; border:1px solid #354253; border-radius:9px; padding:11px 12px; }
.timing-label { color:#91a1b3; font-size:9px; letter-spacing:.14em; font-weight:850; }
.timing-value { appearance:none; border:1px solid transparent; border-radius:6px; padding:4px 0; margin:0; background:transparent; color:var(--accent); font-size:clamp(15px,1.5vw,20px); font-weight:720; font-variant-numeric:tabular-nums; letter-spacing:.015em; text-align:left; width:100%; white-space:nowrap; }
.timing-value:disabled { cursor:default; opacity:1; color:#d7dfe7; }
.timing-value:not(:disabled) { cursor:text; }
.timing-value:not(:disabled):hover { background:#28333a; border-color:#506049; }
.timing-empty { margin:10px 0 0; color:#8290a1; font-size:11px; line-height:1.5; }
.timing-edit-button { width:100%; margin-top:12px; }
.timing-form { display:grid; gap:7px; }
.timing-form label { color:#9daaba; font-weight:750; font-size:10px; letter-spacing:.11em; text-transform:uppercase; margin-top:7px; }
.timing-form input { width:100%; min-width:0; padding:11px 9px; border-radius:8px; border:1px solid #576577; background:#0c131b; color:var(--accent); font-variant-numeric:tabular-nums; font-size:16px; letter-spacing:.025em; }
.timing-form input:focus { border-color:var(--accent); outline:2px solid #d5f67020; }
.timing-form small { line-height:1.6; color:#91a0af; font-size:10px; margin:4px 0 7px; }
.timing-actions { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:6px; }
@media (max-width:980px) { .timing-value { font-size:19px; } }


/* v1.2 — Deux pistes simultanées et import direct dans le studio */
.subtitle-stack{width:100%;display:flex;flex-direction:column;gap:7px;margin-top:7px}
.subtitle-box{position:relative;border-radius:9px;min-height:84px;padding:16px 18px 10px}
.subtitle-box[data-track="en"]{background:#181818;border:1px solid #333b46}
.subtitle-track-tag{position:absolute;top:4px;left:9px;font-size:9px;font-weight:800;letter-spacing:.12em;color:#8895a5;pointer-events:none}
.subtitle-box.is-selected{outline:1px solid #d5f67065;outline-offset:0}
.subtitle-caption:empty::after{content:" ";white-space:pre}
.track-toggles{flex-wrap:wrap}
.track-toolbar-label,.timing-track-label{font-size:10px;font-weight:850;letter-spacing:.13em;color:#8998aa}
.track-toggle{display:inline-flex;gap:7px;align-items:center;background:#222b35;border:1px solid #3b4a57;padding:8px 11px;border-radius:7px;color:#e1e8ee;font-size:12px;cursor:pointer;letter-spacing:normal!important}
.track-toggle input{accent-color:var(--accent);width:15px;height:15px}
.timing-track-label{display:block;margin:16px 0 8px}
.timing-track-select{width:100%;padding:10px 12px;border:1px solid #435267;border-radius:8px;background:#111923;color:#e9f0fa;font-size:12px}
.secondary-import{width:100%;display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:18px;padding:13px 14px;border:1px dashed #46546a;border-radius:10px;background:#171e28}
.secondary-import>div{flex:1 1 175px}
.secondary-import strong,.secondary-import small{display:block}
.secondary-import strong{font-size:12px}
.secondary-import small{color:#96a4b4;font-size:10px;line-height:1.5;margin-top:4px}
.secondary-file-button{position:relative;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border:1px solid #4b5969;border-radius:8px;padding:9px 11px;color:#e0e9f4;font-size:12px;font-weight:700;overflow:hidden}
.secondary-file-button input{position:absolute;inset:0;opacity:0;width:100%;cursor:pointer}
.secondary-file-button:focus-within{outline:2px solid var(--accent)}
.secondary-filename{font-size:11px;color:var(--accent);max-width:210px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.subtitle-box .caption-editor{max-height:2.8em}
@media(max-width:680px){.subtitle-stack{gap:6px}.subtitle-box{min-height:74px;padding:15px 9px 7px}.secondary-import{align-items:stretch}.secondary-file-button,.secondary-import .button{width:100%}.timing-track-select{font-size:14px}}