/* Rewatch Studio Pro : réglages à gauche, scène au centre, générations Pro à droite. Reprend les variables de studio.css. */
.pro{--c:var(--clip)}
body.pro{height:auto;min-height:100%}
.pro-app{display:grid;grid-template-columns:400px minmax(0,1fr) 264px;grid-template-areas:"panel scene hist";height:calc(100svh - 58px)}
.soon{min-height:calc(100svh - 58px);display:grid;place-items:center;padding:40px 16px;text-align:center;background:radial-gradient(ellipse 70% 60% at 50% 35%,#151517 0%,var(--deep) 70%)}
.soon div{max-width:520px}
.soon h1{font-size:clamp(2.2rem,5vw,3.6rem);font-weight:800;font-stretch:75%;text-transform:uppercase;line-height:.92;letter-spacing:-.01em;margin:0 0 14px}
.soon p{color:var(--mute);margin:0 0 22px}

/* panneau de réglages */
.panel{grid-area:panel;display:flex;flex-direction:column;min-height:0;background:var(--night);border-right:1px solid var(--line)}
.ptabs{display:flex;gap:2px;padding:10px 12px 0;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none;flex:none}
.ptabs::-webkit-scrollbar{display:none}
.ptabs button{flex:none;border:0;background:transparent;color:var(--mute);font-weight:700;font-size:.92rem;padding:10px 12px 12px;cursor:pointer;position:relative;border-radius:10px 10px 0 0}
.ptabs button:hover{color:var(--text)}
.ptabs button[aria-selected="true"]{color:var(--text)}
.ptabs button[aria-selected="true"]::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2px;border-radius:2px;background:var(--clip)}
.pane{flex:1;min-height:0;display:flex;flex-direction:column;margin:0}
.pane[hidden]{display:none!important}
.pscroll{flex:1;min-height:0;overflow-y:auto;padding:14px 14px 18px;scrollbar-width:thin;display:flex;flex-direction:column;gap:16px}
.pfoot{flex:none;padding:10px 14px 14px;border-top:1px solid var(--line);background:var(--night)}
.go.wide{width:100%;justify-content:space-between;margin:0;padding:13px 18px}
.go[aria-busy="true"]{opacity:.6;cursor:wait}
.pmsg{margin:0 0 8px;font-size:.84rem;color:var(--mute)}
.pmsg:empty{display:none}
.pmsg.err{color:var(--music)}
.pmsg a{color:var(--text);font-weight:700}

/* champs */
.grp{display:flex;flex-direction:column;gap:7px;min-width:0;border:0;margin:0;padding:0}
.grp legend,.lbl{font-size:.8rem;font-weight:700;color:var(--mute);padding:0;margin:0 0 7px}
.lbl{margin:0}
.lblrow{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.count{font-size:.76rem;color:var(--mute)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px 12px}
.ta,.inp,.sel{width:100%;background:var(--deep);border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:.95rem;line-height:1.45}
.ta{resize:vertical;min-height:84px}
.ta::placeholder,.inp::placeholder{color:#71717a}
.ta:focus,.inp:focus,.sel:focus{outline:none;border-color:var(--clip)}
.sel{appearance:none;padding-right:30px;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--mute) 50%),linear-gradient(135deg,var(--mute) 50%,transparent 50%);background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.sel option{background:var(--surface)}
.fixed{margin:0;padding:10px 12px;border:1px dashed var(--line);border-radius:12px;color:var(--mute);font-size:.9rem}
.hint{margin:0;color:var(--mute);font-size:.84rem}
#vNeed{color:var(--clip)}
.muted{color:var(--mute);font-weight:500}
.consent{margin:0}
.switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:.9rem;font-weight:600;min-height:42px}
.switch input{position:absolute;opacity:0;width:1px;height:1px}
.switch .track{width:40px;height:24px;border-radius:999px;background:var(--raise);border:1px solid var(--line);position:relative;flex:none;transition:background .15s}
.switch .track::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--mute);transition:transform .15s,background .15s}
.switch input:checked+.track{background:var(--clip);border-color:var(--clip)}
.switch input:checked+.track::after{transform:translateX(16px);background:#0a0a0a}
.switch input:disabled+.track{opacity:.55}
.switch input:focus-visible+.track{outline:2px solid var(--clip);outline-offset:2px}

/* cartes de modèle */
.models{display:flex;flex-direction:column;gap:8px}
.mgrid{display:flex;flex-direction:column;gap:6px}
.mcard{display:flex;flex-direction:column;gap:3px;width:100%;text-align:left;padding:11px 12px;border-radius:14px;border:1px solid var(--line);background:var(--surface);cursor:pointer}
.mcard:hover{border-color:#3f3f46}
.mcard[aria-pressed="true"]{border-color:var(--clip);box-shadow:inset 0 0 0 1px var(--clip)}
.mtop{display:flex;align-items:center;gap:8px;justify-content:space-between}
.mtop b{font-size:.98rem}
.mcard .tag{font-size:.7rem;font-weight:800;color:var(--deep);background:var(--text);border-radius:999px;padding:2px 8px;white-space:nowrap}
.mcard[aria-pressed="true"] .tag{background:var(--clip)}
.mmid{display:flex;justify-content:space-between;gap:8px;font-size:.78rem;color:var(--mute)}
.mmid span{color:var(--text);font-weight:600}
.mblurb{font-size:.82rem;color:var(--mute);line-height:1.35}
.linkbtn.mtoggle{align-self:flex-start;padding:2px 0;font-size:.84rem;font-weight:600;color:var(--text);text-decoration-color:var(--line);text-underline-offset:3px}
.linkbtn.mtoggle:hover{text-decoration-color:var(--clip)}

/* indicateur de mode */
.modeTag{display:inline-flex;align-items:center;gap:6px;font-size:.76rem;font-weight:700;color:var(--text);background:var(--raise);border-radius:999px;padding:3px 10px}
.modeTag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--mute)}
.modeTag[data-m="i2v"]::before{background:var(--video)}
.modeTag[data-m="flf"]::before{background:var(--clip)}

/* emplacements d'image */
.frames{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.slot{display:flex;flex-direction:column;gap:5px;min-width:0}
.slot .cap{font-size:.76rem;color:var(--mute)}
.slot .cap.err{color:var(--music)}
.sbox{position:relative;aspect-ratio:4/3;border-radius:14px;border:1px dashed #3f3f46;background:var(--deep);display:flex;flex-direction:column;overflow:hidden}
.slot.need .sbox{border-color:var(--clip);border-style:solid;box-shadow:0 0 0 3px rgba(255,45,122,.18)}
.sbox .add{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:0;background:transparent;cursor:pointer;color:var(--text);font-weight:700;font-size:.84rem;padding:8px;border-radius:13px}
.sbox .add:hover{background:var(--surface)}
.sbox .add svg{opacity:.8}
.sbox .mine{border:0;border-top:1px solid var(--line);background:transparent;padding:7px;font-size:.78rem;font-weight:700;color:var(--mute);cursor:pointer}
.sbox .mine:hover{color:var(--text);background:var(--surface)}
.sbox.has{border-style:solid;border-color:var(--line);background:#000}
.sbox.has img{width:100%;height:100%;object-fit:cover}
.sbox.busy{align-items:center;justify-content:center;gap:8px;color:var(--mute);font-size:.84rem}
.x{position:absolute;top:6px;right:6px;width:30px;height:30px;border-radius:50%;border:0;background:rgba(10,10,11,.78);display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(6px)}
.x:hover{background:var(--clip);color:#0a0a0a}
.spin{width:20px;height:20px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--clip);animation:spin 1s linear infinite}
.refs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.rthumb{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;background:#000;border:1px solid var(--line)}
.rthumb img{width:100%;height:100%;object-fit:cover}
.rthumb .x{width:24px;height:24px;top:4px;right:4px}
.slot.mini .sbox{aspect-ratio:1}
.slot.mini .cap{display:none}
.slot.mini .sbox .add{font-size:.74rem;gap:2px}
.slot.mini .sbox .mine{font-size:.68rem;padding:4px 2px}

/* puces */
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip-t{border:1px solid var(--line);background:transparent;border-radius:999px;padding:6px 12px;font-size:.84rem;font-weight:600;color:var(--mute);cursor:pointer}
.chip-t:hover{color:var(--text);border-color:#3f3f46}
.chip-t[aria-pressed="true"]{background:var(--text);color:var(--deep);border-color:var(--text)}
.fxchip{display:inline-flex;align-items:center;gap:6px;padding:4px 4px 4px 12px;border-radius:999px;background:rgba(255,45,122,.14);border:1px solid var(--clip);font-weight:700;font-size:.86rem;align-self:flex-start}
.fxchip button{width:26px;height:26px;border-radius:50%;border:0;background:transparent;display:grid;place-items:center;cursor:pointer}
.fxchip button:hover{background:var(--clip);color:#0a0a0a}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:12px;padding:3px;background:var(--deep);align-self:flex-start}
.seg button{min-width:38px;height:34px;border:0;background:transparent;border-radius:9px;font-weight:700;cursor:pointer;color:var(--mute)}
.seg button[aria-checked="true"]{background:var(--text);color:var(--deep)}

/* effets */
.fxbar{display:flex;flex-direction:column;gap:10px}
.fxbar .search{margin:0}
.fxgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.fx{position:relative;display:flex;flex-direction:column;text-align:left;padding:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface);cursor:pointer}
.fx:hover{border-color:#52525b}
.fx[aria-pressed="true"]{border-color:var(--clip);box-shadow:inset 0 0 0 1px var(--clip)}
.fxm{position:relative;aspect-ratio:16/10;background:linear-gradient(150deg,#232326 0%,#0d0d0f 70%);overflow:hidden}
.fxm img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fxn{display:none}
.fxm.noimg img{display:none}
.fxm.noimg .fxn{display:flex;align-items:flex-end;position:absolute;inset:0;padding:12px;font-weight:800;font-stretch:78%;font-size:1.35rem;line-height:.95;text-transform:uppercase;color:#f4f4f5;background:radial-gradient(circle at 80% 15%,rgba(255,45,122,.28),transparent 55%)}
.fxt{padding:8px 10px 10px}
.fxt b{display:block;font-size:.88rem;line-height:1.2}
.fxt small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--mute);font-size:.74rem;line-height:1.3;margin-top:3px}
.fxi{position:absolute;top:7px;left:7px;font-size:.68rem;font-weight:700;background:rgba(10,10,11,.78);padding:3px 8px;border-radius:999px;backdrop-filter:blur(6px)}

/* outils */
.tools{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tcard{display:flex;flex-direction:column;gap:3px;text-align:left;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:var(--surface);cursor:pointer}
.tcard:hover{border-color:#3f3f46}
.tcard[aria-pressed="true"]{border-color:var(--clip);box-shadow:inset 0 0 0 1px var(--clip)}
.tcard b{font-size:.92rem}
.tcard small{font-size:.76rem;color:var(--mute);line-height:1.3}
#tInputs{display:flex;flex-direction:column;gap:16px}
#tInputs:empty{display:none}
#tImgSlot{max-width:180px}
.vpick{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.vpick button{position:relative;aspect-ratio:9/16;padding:0;border:2px solid transparent;border-radius:10px;overflow:hidden;background:#000;cursor:pointer}
.vpick button[aria-checked="true"]{border-color:var(--clip)}
.vpick img,.vpick video{width:100%;height:100%;object-fit:cover}

/* Cast */
.castlist{display:flex;flex-direction:column;gap:8px}
.castc{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.castc img{width:52px;height:52px;border-radius:10px;object-fit:cover;background:var(--raise)}
.castc b{display:block;font-size:.95rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.castc small{color:var(--mute);font-size:.78rem}
.cacts{display:flex;gap:6px;align-items:center}
.castnew{display:flex;flex-direction:column;gap:14px;padding:14px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg,var(--surface),var(--night))}
.castnew h2{margin:0;font-size:1rem}
.castnew .slot{max-width:200px}
.castnew .btn.main{align-self:flex-start}
.btn.sm{padding:7px 11px;font-size:.82rem;border-radius:10px}
.iconbtn{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:transparent;display:grid;place-items:center;cursor:pointer;flex:none}
.iconbtn:hover{border-color:var(--mute)}

/* scène */
.scene{grid-area:scene;min-width:0;min-height:0;padding:22px;display:flex;background:radial-gradient(ellipse 70% 60% at 50% 40%,#151517 0%,var(--deep) 70%)}
.stagebox{flex:1;min-width:0;min-height:0;container-type:size;display:grid;place-items:center}
.frame{--r:.5625;position:relative;aspect-ratio:var(--r);width:min(100cqw,100cqh * var(--r));border-radius:22px;overflow:hidden;background:#000;box-shadow:0 30px 90px -30px rgba(0,0,0,.9),0 0 0 1px var(--line);display:grid;place-items:center}
.frame.idle{background:repeating-linear-gradient(135deg,#0d0d0f 0 14px,#101013 14px 28px)}
.frame>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.45}
.fcap{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:22px;max-width:320px}
.fcap b{font-size:1.15rem;line-height:1.2}
.fcap span{color:var(--mute);font-size:.88rem}
.frame.fail{--r:1;width:min(100cqw,420px);aspect-ratio:auto;padding:30px 0;background:var(--surface)}
.frame.fail b{color:var(--music)}
.sheen{position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,45,122,.09) 50%,transparent 70%);background-size:220% 100%}
@media (prefers-reduced-motion:no-preference){.sheen{animation:pvsh 1.8s linear infinite}}
.psteps{list-style:none;margin:6px 0 4px;padding:0;display:flex;flex-direction:column;gap:8px;text-align:left}
.psteps li{display:flex;align-items:center;gap:10px;color:var(--mute);font-size:.92rem}
.psteps li i{width:16px;height:16px;border-radius:50%;border:2px solid var(--line);flex:0 0 16px}
.psteps li.doing{color:var(--text);font-weight:700}
.psteps li.doing i{border-color:var(--clip);border-top-color:transparent}
@media (prefers-reduced-motion:no-preference){.psteps li.doing i{animation:spin 1s linear infinite}}
.psteps li.done{color:var(--text)}
.psteps li.done i{background:var(--video);border-color:var(--video)}

/* résultat */
.result{width:100%;height:100%;display:flex;flex-direction:column;gap:14px;min-height:0}
.result .media{flex:1;min-height:0;container-type:size;display:grid;place-items:center}
.result .media>video,.result .media>img{max-width:100cqw;max-height:100cqh;width:auto;height:auto;border-radius:18px;background:#000;box-shadow:0 30px 90px -30px rgba(0,0,0,.9),0 0 0 1px var(--line)}
.result .media>video{min-width:min(100cqw,220px)}
.result .media.igrid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:10px;place-items:stretch}
.igrid.n2{grid-template-rows:minmax(0,1fr)}
.igrid.n3,.igrid.n4{grid-template-rows:repeat(2,minmax(0,1fr))}
.itile{position:relative;padding:0;border:2px solid transparent;border-radius:14px;overflow:hidden;background:#000;cursor:pointer;min-height:0}
.itile[aria-pressed="true"]{border-color:var(--clip)}
.itile img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.media.audio{display:flex;flex-direction:column;justify-content:center;gap:18px;max-width:560px;margin:0 auto;width:100%}
.wave{display:flex;align-items:center;gap:5px;height:120px}
.wave i{flex:1;height:var(--h);border-radius:4px;background:linear-gradient(var(--clip),#7a1640)}
.rbar{flex:none;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px}
.rtitle{font-size:1rem;display:flex;gap:10px;align-items:baseline}
.acts{display:flex;flex-wrap:wrap;gap:8px}
.acts .btn{padding:9px 12px;font-size:.86rem}

/* retouche au pinceau */
.mask{width:100%;height:100%;display:flex;flex-direction:column;gap:12px;min-height:0}
.mbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:.86rem;font-weight:700}
.mbar input[type=range]{accent-color:var(--clip);width:160px}
.mtip{color:var(--mute);font-weight:500;margin-left:auto}
.mstage{flex:1;min-height:0;display:grid;place-items:center}
.mwrap{position:relative;border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px var(--line);background:#000}
.mwrap img{position:absolute;inset:0;width:100%;height:100%}
.mwrap canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.55;cursor:crosshair;touch-action:none}

/* générations Pro */
.history{grid-area:hist;display:flex;flex-direction:column;min-height:0;background:var(--night);border-left:1px solid var(--line)}
.history h2{font-size:.82rem;font-weight:700;color:var(--mute);margin:16px 14px 10px}
.hlist{overflow-y:auto;padding:0 12px 16px;display:grid;grid-template-columns:1fr 1fr;gap:8px;align-content:start;scrollbar-width:thin}
.hitem{position:relative;aspect-ratio:9/16;padding:0;border-radius:12px;overflow:hidden;background:var(--raise);border:1px solid var(--line);cursor:pointer}
.hitem[aria-pressed="true"]{border-color:var(--clip);box-shadow:0 0 0 1px var(--clip)}
.hitem img,.hitem video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hitem .st{position:absolute;inset:0;display:grid;place-items:center;align-content:center;text-align:center;font-size:.76rem;font-weight:700;padding:8px;color:var(--mute)}
.hitem .st.run{color:var(--text)}
.hitem .st.run::before{content:"";display:block;width:20px;height:20px;margin:0 auto 6px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--clip);animation:spin 1s linear infinite}
.hitem .t{position:absolute;left:0;right:0;bottom:0;padding:18px 7px 6px;font-size:.7rem;font-weight:700;line-height:1.2;background:linear-gradient(transparent,rgba(10,10,11,.92));text-align:left}
.hitem .nb{position:absolute;top:6px;right:6px;font-size:.68rem;font-weight:800;background:rgba(10,10,11,.8);border-radius:999px;padding:2px 7px}

/* sélecteur « My images » */
.picker{border:1px solid var(--line);border-radius:20px;background:var(--surface);color:var(--text);padding:0;width:min(640px,calc(100vw - 32px));max-height:min(80svh,640px)}
.picker::backdrop{background:rgba(0,0,0,.7);backdrop-filter:blur(4px)}
.pkhead{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line)}
.pkhead h2{margin:0;font-size:1.05rem}
.pkgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px;padding:14px 16px 18px;overflow-y:auto;max-height:calc(min(80svh,640px) - 64px)}
.pkgrid button{aspect-ratio:1;padding:0;border:2px solid transparent;border-radius:12px;overflow:hidden;background:#000;cursor:pointer}
.pkgrid button:hover,.pkgrid button:focus-visible{border-color:var(--clip)}
.pkgrid img{width:100%;height:100%;object-fit:cover}

/* tablette : les générations passent sous la scène */
@media (max-width:1180px){
  .pro-app{grid-template-columns:360px minmax(0,1fr);grid-template-areas:"panel scene" "panel hist";grid-template-rows:minmax(0,1fr) auto}
  .history{border-left:0;border-top:1px solid var(--line)}
  .history h2{margin:10px 14px 8px}
  .hlist{display:flex;overflow-x:auto;overflow-y:hidden;padding:0 12px 12px}
  .hitem{flex:0 0 74px}
}
/* téléphone : une seule colonne */
@media (max-width:860px){
  .pro-app{display:block;height:auto}
  .panel{border-right:0}
  .ptabs{position:sticky;top:58px;z-index:10;background:var(--night);padding:6px 8px 0}
  .pscroll{overflow:visible;padding:14px 16px 18px}
  .pfoot{position:sticky;bottom:0;z-index:5;padding:10px 16px calc(12px + env(safe-area-inset-bottom))}
  .scene{padding:16px;border-top:1px solid var(--line);scroll-margin-top:58px}
  .stagebox{height:min(78svh,640px)}
  .stagebox[data-k="idle"]{height:min(56svh,460px)}
  .history{border-top:1px solid var(--line)}
  .hlist{display:grid;grid-template-columns:repeat(3,1fr);overflow:visible;padding:0 16px 24px}
  .hitem{flex:none}
  .mtip{margin-left:0;flex-basis:100%}
  .mbar input[type=range]{flex:1;width:auto;min-width:100px}
}
@media (max-width:400px){.grid2{grid-template-columns:1fr 1fr;gap:12px 10px}.refs{grid-template-columns:repeat(3,1fr)}.vpick{grid-template-columns:repeat(3,1fr)}}
