:root { --ink:#f7f4ed; --muted:#a7a29a; --line:#2a2928; --orange:#ff5c35; --lime:#c9ff55; --panel:#151514; }
* { box-sizing:border-box; }
html { background:#0b0b0a; color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif; }
body { margin:0; min-height:100vh; overflow-x:hidden; background:radial-gradient(circle at 50% -20%,#27231d 0,transparent 42%); }
.glow { position:fixed; width:360px; height:360px; border-radius:50%; filter:blur(110px); opacity:.12; pointer-events:none; }
.glow-one { background:var(--orange); top:12%; left:-180px; }.glow-two { background:var(--lime); right:-220px; bottom:8%; }
main { width:min(1160px,calc(100% - 40px)); margin:auto; padding:44px 0 80px; position:relative; }
.brand { font-size:13px; letter-spacing:.24em; font-weight:800; display:flex; align-items:center; gap:10px; }
.brand-logo { width:min(190px,54vw); margin:0; }
.brand-logo img { display:block; width:100%; height:auto; object-fit:contain; }
.hero-top { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:26px; }
.hero-actions { display:flex; align-items:center; justify-content:flex-end; gap:10px; }
.language-toggle { display:inline-flex; padding:3px; border:1px solid #3b3935; border-radius:999px; background:#11100f; }
.language-toggle button { margin:0; padding:7px 10px; min-width:38px; border-radius:999px; background:transparent; color:#a9a29a; font-size:11px; letter-spacing:.04em; gap:0; }
.language-toggle button:hover { transform:none; filter:none; color:#f7f4ed; }
.language-toggle button.active { background:var(--orange); color:#fff; }
.back-to-songs { display:inline-flex; align-items:center; gap:8px; border:1px solid #3b3935; border-radius:999px; padding:10px 14px; color:var(--ink); text-decoration:none; font-size:12px; font-weight:750; background:rgba(255,255,255,.04); }
.back-to-songs:hover { transform:translateY(-1px); border-color:#6b6254; background:rgba(255,255,255,.07); }
.brand span { display:grid; place-items:center; width:29px; height:29px; background:var(--ink); color:#0b0b0a; border-radius:50%; font-family:Georgia,serif; font-size:18px; }
.hero { padding:70px 0 58px; max-width:900px; }
.eyebrow { color:var(--lime); letter-spacing:.18em; font-weight:700; font-size:12px; margin:0 0 20px; }
h1 { font:500 clamp(48px,8vw,92px)/.94 Georgia,"Times New Roman",serif; letter-spacing:-.045em; margin:0; }
h1 em { color:var(--orange); font-weight:400; }
.intro { color:var(--muted); max-width:630px; font-size:18px; line-height:1.65; margin:30px 0 0; }
.workspace { display:grid; grid-template-columns:minmax(0,1fr) 360px; align-items:start; gap:22px; }
form,.job-panel,.review-panel { background:color-mix(in srgb,var(--panel) 94%,transparent); border:1px solid var(--line); border-radius:20px; padding:34px; box-shadow:0 24px 80px #0005; }
.job-panel { position:sticky; top:22px; text-align:center; }
.section-title { display:flex; gap:15px; align-items:flex-start; text-align:left; margin-bottom:30px; }
.section-title>span { color:var(--orange); font:italic 20px Georgia,serif; }
h2 { font-size:21px; margin:0 0 5px; }.section-title p { color:var(--muted); font-size:13px; margin:0; }
.auth-panel { display:flex; align-items:center; justify-content:space-between; gap:18px; margin:0 0 22px; padding:16px 18px; border:1px solid #403d38; border-radius:12px; background:#121210; box-shadow:inset 0 1px 0 #ffffff08; }
.auth-panel strong { display:block; color:#f0ece4; font-size:13px; letter-spacing:.02em; }
.auth-panel p { margin:7px 0 0; color:#c7c0b7; font-size:13px; line-height:1.45; }
.auth-email { display:inline-block; color:#f7f4ed; font-weight:700; margin-right:10px; }
.auth-badge { display:inline-flex; align-items:center; gap:6px; border:1px solid #5f7f33; border-radius:999px; padding:3px 8px; color:#d8ff9c; background:#1c2714; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; }
.auth-badge:before { content:""; width:6px; height:6px; border-radius:50%; background:var(--lime); box-shadow:0 0 0 3px #c9ff5520; }
.auth-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.auth-actions .secondary { margin:0; padding:10px 13px; font-size:12px; gap:8px; color:#e4ded4; border-color:#4a4640; background:#181715; }
.auth-actions .secondary:hover { border-color:#6f675c; background:#201e1b; }
.oauth-button span { display:grid; place-items:center; width:18px; height:18px; }
.oauth-button .oauth-copy { display:inline; width:auto; height:auto; }
.oauth-button svg { display:block; width:18px; height:18px; }
.oauth-button.apple span { border-radius:50%; background:#fff; color:#111; font-weight:900; font-size:14px; }
.grid { display:grid; gap:18px; }.grid.two { grid-template-columns:1fr 1fr; }
.project-history { margin:0 0 22px; padding:16px; border:1px solid #34312d; border-radius:12px; background:#10100f; }
.history-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; color:#d8d4cc; font-size:13px; margin-bottom:11px; }
.history-heading span { color:#77726b; }
.history-heading-actions { display:flex; align-items:center; gap:10px; }
.history-clear { margin:0; padding:8px 11px; font-size:11px; color:#d8d4cc; }
.history-list { display:grid; gap:8px; }.history-item { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px; padding:11px 12px; border:1px solid #2e2c29; border-radius:9px; background:#151513; }
.history-item strong,.history-item small { display:block; }.history-item small { margin-top:3px; }.history-item button { padding:9px 13px; font-size:12px; }
.history-row-actions { display:flex; align-items:center; gap:8px; }
.history-item .history-remove { width:34px; height:34px; min-width:34px; justify-content:center; padding:0; border:1px solid #3b3935; background:transparent; color:#aaa39a; font-size:19px; line-height:1; gap:0; }
.history-item .history-remove:hover { color:#fff; border-color:#ff5c35; background:#ff5c3514; }
label { display:block; color:#d8d4cc; font-size:13px; font-weight:650; letter-spacing:.01em; margin:0 0 20px; }
input,textarea { width:100%; margin-top:9px; border:1px solid #353330; border-radius:10px; background:#0e0e0d; color:var(--ink); padding:14px 15px; font:inherit; font-weight:450; outline:none; transition:.2s; }
textarea { resize:vertical; min-height:190px; line-height:1.55; }
input:focus,textarea:focus { border-color:var(--orange); box-shadow:0 0 0 3px #ff5c3518; }
small { display:block; color:#78746e; margin-top:6px; font-weight:400; }
.actions { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:8px; }
.automatic-note { color:var(--muted); font-size:13px; line-height:1.5; margin:0; max-width:390px; }
.check { display:flex; align-items:center; gap:9px; color:var(--muted); margin:0; font-weight:450; }.check input { width:auto; margin:0; accent-color:var(--orange); }
.mode-picker,.format-picker,.source-picker { border:0; padding:0; margin:8px 0 20px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.format-picker,.source-picker { grid-template-columns:repeat(2,minmax(0,1fr)); }
.mode-picker legend,.format-picker legend,.source-picker legend { color:#d8d4cc; font-size:13px; font-weight:650; margin-bottom:10px; }
.mode-card,.format-card { display:flex; gap:11px; align-items:flex-start; padding:15px; border:1px solid #353330; border-radius:12px; margin:0; cursor:pointer; background:#0e0e0d; }
.mode-card:has(input:checked),.format-card:has(input:checked) { border-color:var(--orange); box-shadow:0 0 0 2px #ff5c3518; }
.mode-card input,.format-card input { width:auto; margin:3px 0 0; accent-color:var(--orange); }.mode-card strong,.mode-card small,.format-card strong,.format-card small { display:block; }.mode-card small,.format-card small { line-height:1.4; }
.upload-fields { margin-top:22px; display:grid; gap:16px; }
.lyrics-option { margin:4px 0 22px; }
button,.download { border:0; border-radius:999px; background:var(--orange); color:white; padding:14px 20px; font-weight:750; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:28px; transition:.2s; }
button:hover,.download:hover { transform:translateY(-2px); filter:brightness(1.08); }button:disabled { opacity:.5; cursor:wait; }
button b { font-size:20px; }.secondary { background:transparent; border:1px solid #3b3935; color:var(--muted); margin-top:25px; }
.error { background:#381c18; border:1px solid #7d3026; color:#ffb5a6; border-radius:9px; padding:12px 14px; font-size:13px; text-align:left; }
.progress-ring { --progress:0deg; width:135px; height:135px; border-radius:50%; display:grid; place-items:center; margin:12px auto 22px; background:conic-gradient(var(--orange) var(--progress),#282624 0); position:relative; }
.progress-ring:after { content:""; position:absolute; inset:8px; background:var(--panel); border-radius:50%; }.progress-ring strong { z-index:1; font:500 30px Georgia,serif; }
.progress-track { height:4px; border-radius:10px; background:#292725; overflow:hidden; }.progress-track i { display:block; width:0; height:100%; background:var(--lime); transition:width .5s; }
.step-list { list-style:none; padding:0; margin:22px 0; text-align:left; display:grid; gap:8px; }
.step-list li { color:#68645e; font-size:11px; padding-left:22px; position:relative; }
.step-list li:before { content:""; position:absolute; left:2px; top:3px; width:8px; height:8px; border:1px solid #55514c; border-radius:50%; }
.step-list li.done { color:#a8a39b; }.step-list li.done:before { background:var(--lime); border-color:var(--lime); }
.step-list li.active { color:var(--ink); font-weight:700; }.step-list li.active:before { background:var(--orange); border-color:var(--orange); box-shadow:0 0 0 4px #ff5c3522; }
.subtitle-state { border:1px solid #34312d; border-radius:8px; padding:9px!important; color:#aaa49a!important; }
.job-panel h3 { margin:22px 0 7px; }.job-panel>p { color:var(--muted); line-height:1.5; font-size:14px; }
.video-result { margin-top:25px; }.video-result video { width:100%; border-radius:10px; background:#050505; display:block; margin-bottom:14px; }.download { justify-content:center; width:100%; }
.video-result .secondary { margin-top:12px; }
.video-result .notice { margin:13px 0 0; text-align:left; }
footer { border-top:1px solid var(--line); color:#77736c; display:flex; justify-content:space-between; padding:20px max(20px,calc((100vw - 1160px)/2)); font-size:11px; letter-spacing:.15em; }
.review-panel { margin-top:24px; }
.creative-editor { display:grid; grid-template-columns:1fr 1fr; gap:16px; }.creative-editor .wide { grid-column:1/-1; }
.creative-editor textarea { min-height:110px; }
.review-toolbar { display:flex; gap:12px; margin:0 0 24px; }.review-toolbar .secondary { margin:0; }
.notice { color:#c9c4bb; background:#1c1b19; border:1px solid #34312e; border-radius:10px; padding:13px 15px; margin-bottom:22px; font-size:13px; }
.scene-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.scene-card { border:1px solid #302e2b; border-radius:15px; overflow:hidden; background:#10100f; }
.scene-visual { aspect-ratio:16/9; background:#080808; position:relative; }.scene-visual img { width:100%; height:100%; object-fit:cover; display:block; }.scene-number { position:absolute; top:10px; left:10px; background:#0b0b0bdd; border:1px solid #ffffff24; border-radius:999px; padding:6px 9px; font-size:11px; }
.scene-card.regenerating .scene-visual::after { content:"Régénération de cette image…"; position:absolute; inset:0; display:grid; place-items:center; padding:20px; color:#fff; font-weight:700; text-align:center; background:#080808b8; backdrop-filter:blur(3px); }
.scene-body { padding:17px; }.scene-meta { display:flex; justify-content:space-between; color:#77726b; font-size:11px; margin-bottom:13px; }
.scene-body textarea { min-height:80px; }.scene-body label { margin-bottom:12px; }.scene-options { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
select { width:100%; margin-top:9px; border:1px solid #353330; border-radius:10px; background:#0e0e0d; color:var(--ink); padding:12px; }
.style-notice { margin:-10px 0 20px; padding:12px 14px; border:1px solid #514b42; border-left:3px solid var(--orange); border-radius:9px; background:#181612; color:#d9d2c8; font-size:13px; line-height:1.45; }
.style-notice strong { display:block; color:#f7f4ed; font-size:12px; margin-bottom:4px; text-transform:uppercase; letter-spacing:.08em; }
.style-notice span { display:block; }
.scene-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }.scene-actions button { font-size:12px; padding:10px 13px; gap:5px; }.scene-actions .secondary { margin:0; }
.upload-label { margin:0; display:inline-flex; align-items:center; border:1px solid #3b3935; border-radius:999px; color:var(--muted); padding:9px 12px; cursor:pointer; font-size:12px; }.upload-label input { display:none; }
.approval-bar { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:28px; padding-top:24px; border-top:1px solid var(--line); }
.subtitle-settings { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; align-items:end; }
.subtitle-settings label { margin-bottom:12px; }.subtitle-settings .check { grid-column:1/-1; }
.subtitle-style-settings { display:grid; grid-template-columns:1.4fr .7fr .7fr .7fr .8fr 1fr 1fr; gap:12px; align-items:end; margin-bottom:22px; }
.subtitle-style-settings label { margin-bottom:0; }
.subtitle-style-settings input,.subtitle-style-settings select { height:42px; padding:9px 11px; }
.subtitle-style-settings input[type="color"] { padding:5px; }
.subtitle-style-settings .check { align-self:center; color:#b9b3aa; font-size:12px; line-height:1.25; }
.subtitle-style-settings .check input { width:auto; height:auto; margin-right:7px; }
.subtitle-workbench { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px; align-items:start; }
.subtitle-lyrics-column { max-height:680px; overflow:auto; padding-right:5px; }
.subtitle-video-column { position:sticky; top:22px; display:grid; gap:12px; }
.subtitle-video-frame { position:relative; aspect-ratio:16/9; background:#050505; border:1px solid #302e2b; border-radius:12px; overflow:hidden; }
.subtitle-video-frame video { width:100%; height:100%; display:block; object-fit:contain; background:#050505; }
.subtitle-preview { position:absolute; left:8%; right:8%; bottom:7%; min-height:42px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:9px 14px; color:#fff; font-weight:800; line-height:1.2; text-align:center; text-shadow:0 2px 8px #000,0 0 2px #000; background:linear-gradient(180deg,#0000,#0008); border-radius:8px; pointer-events:none; white-space:pre-wrap; }
.subtitle-preview-line { display:block; width:100%; max-width:100%; animation:subtitle-rise .24s ease-out both; }
@keyframes subtitle-rise { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
.subtitle-timeline { display:flex; min-height:70px; gap:3px; overflow-x:auto; padding:8px; border:1px solid #302e2b; border-radius:12px; background:#0f0f0e; }
.subtitle-timeline-segment { min-width:54px; align-items:flex-start; justify-content:space-between; gap:5px; padding:8px 7px; border-radius:7px; background:#211f1d; color:#b9b3aa; font-size:10px; text-align:left; overflow:hidden; }
.subtitle-timeline-segment:hover { transform:none; filter:brightness(1.12); }
.subtitle-timeline-segment.active { background:var(--orange); color:#fff; box-shadow:0 0 0 2px #ff5c3533; }
.timeline-position,.timeline-text { display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.timeline-position { opacity:.72; font-weight:800; }
.timeline-text { margin-top:4px; line-height:1.2; }
.subtitle-cues { display:grid; gap:6px; }
.subtitle-cue { display:grid; grid-template-columns:68px minmax(0,1fr) 68px 64px; gap:8px; align-items:center; padding:7px 8px; border:1px solid transparent; border-radius:8px; background:transparent; }
.subtitle-cue.active { border-color:var(--orange); box-shadow:0 0 0 2px #ff5c351f; background:#171210; }
.subtitle-cue input { margin:0; border-color:transparent; background:transparent; padding:6px 4px; border-radius:6px; }
.subtitle-cue input:focus { border-color:#504b45; background:#0e0e0d; box-shadow:none; }
.cue-start,.cue-end { color:#868078; font-size:11px; font-variant-numeric:tabular-nums; text-align:center; }
.cue-text { color:var(--ink); font-size:13px; }
.cue-row-actions { display:flex; justify-content:flex-end; gap:4px; }
.subtitle-cue .cue-add-below,.subtitle-cue .cue-remove { width:28px; height:28px; justify-content:center; padding:0; border-radius:8px; background:transparent; color:#8f8880; font-size:15px; }
.subtitle-cue .cue-add-below:hover,.subtitle-cue .cue-remove:hover { transform:none; background:#34201b; color:#ffb5a6; }
.subtitle-cue .cue-add-below:hover { background:#26301d; color:var(--lime); }
.subtitle-actions { display:flex; gap:10px; }.subtitle-actions .secondary,.approval-bar>.secondary { margin:0; }
[hidden] { display:none!important; }
@media (max-width:850px) { .workspace { grid-template-columns:1fr; }.job-panel { position:static; }.hero { padding-top:55px; }.grid.two,.creative-editor,.scene-grid,.subtitle-workbench { grid-template-columns:1fr; }.creative-editor .wide { grid-column:auto; }.subtitle-video-column { position:static; order:-1; }.subtitle-lyrics-column { max-height:none; overflow:visible; padding-right:0; }.subtitle-settings,.subtitle-style-settings { grid-template-columns:1fr 1fr; }.subtitle-cue { grid-template-columns:58px minmax(0,1fr) 58px 58px; gap:5px; } }
@media (max-width:560px) { main { width:min(100% - 24px,1160px); padding-top:24px; }.hero { padding-bottom:38px; }.hero-top { align-items:flex-start; flex-direction:column; gap:14px; margin-bottom:22px; }.hero-actions { width:100%; justify-content:space-between; }.back-to-songs { justify-content:center; }form,.job-panel,.review-panel { padding:24px 18px; border-radius:15px; }.actions,.approval-bar,.auth-panel { align-items:stretch; flex-direction:column; }.auth-actions { justify-content:stretch; }.auth-actions button { width:100%; justify-content:center; }.actions button,.approval-bar button { width:100%; justify-content:space-between; }.mode-picker,.format-picker,.source-picker { grid-template-columns:1fr; }footer { flex-direction:column; gap:8px; } }