/* TransformDay Filtre — Repère Formation · Transformation Day Édition 2 (21 novembre 2026) */
[hidden]{display:none!important}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-size:14px}
img{max-width:100%}
/* Layout: two-pane studio — controls left, live 9:16 preview right; stacks on phones. Single deliberate night-blue look. */
:root{
  --night:#070F4E; --blue:#2855FF; --gold:#FFE135; --ink:#0A1250; --muted:#A9B3E8; --field:#0E1A6A; --line:rgba(255,255,255,.14); --ok:#3BD38A;
  --f:"Montserrat",system-ui,sans-serif; color-scheme:dark;
}
html,body{background:var(--night);color:#fff}
body{font-family:var(--f);background:radial-gradient(1200px 600px at 85% -10%,#2a3cff55,transparent 60%),radial-gradient(900px 500px at -10% 110%,#6a2bd855,transparent 60%),var(--night)}
.wrap{max-width:1180px;margin:0 auto;padding-block:28px 48px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
header{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:14px}
header img{height:46px;border-radius:12px;background:#F3F2F8;padding:6px 10px}
.eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:800}
h1{font-size:clamp(28px,4.4vw,46px);line-height:1.05;margin:4px 0 0;font-weight:900;text-wrap:balance}
h1 em{font-style:normal;color:var(--gold)}
.lede{color:var(--muted);max-width:62ch;margin:6px 0 0;font-size:15px;line-height:1.55}
.grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:28px;align-items:start;margin-top:22px}
@media (max-width:860px){.grid{grid-template-columns:1fr}}
.panel{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:20px;padding:22px;display:grid;gap:20px;min-width:0}
.step{display:grid;gap:10px;min-width:0}
.step h2{margin:0;font-size:15px;font-weight:800;display:flex;align-items:center;gap:10px}
.step h2 span{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--gold);color:var(--ink);font-size:14px;flex:none}
label{font-size:13px;color:var(--muted);font-weight:700}
input[type=text]{width:100%;box-sizing:border-box;font:600 16px var(--f);padding:13px 14px;border-radius:12px;border:1px solid var(--line);background:var(--field);color:#fff}
input:focus-visible,button:focus-visible,.drop:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.seg{display:grid;grid-template-columns:1fr 1fr;background:var(--field);border-radius:14px;padding:4px;border:1px solid var(--line)}
.seg button{font:800 14px var(--f);padding:11px;border:0;border-radius:10px;background:transparent;color:#fff;cursor:pointer}
.seg button[aria-pressed=true]{background:var(--gold);color:var(--ink)}
.drop{border:2px dashed #4D63E8;border-radius:16px;padding:16px;display:flex;gap:14px;align-items:center;cursor:pointer;background:#0D1866}
.drop:hover{border-color:var(--gold)}
.drop .ic{width:46px;height:46px;border-radius:50%;background:var(--blue);display:grid;place-items:center;flex:none}
.drop strong{display:block;font-size:15px}.drop small{color:var(--muted)}
.row{display:flex;gap:10px;flex-wrap:wrap}
.chip{font:700 13px var(--f);padding:9px 14px;border-radius:999px;border:1px solid var(--line);background:transparent;color:#fff;cursor:pointer}
.chip[aria-pressed=true]{background:var(--gold);color:var(--ink);border-color:var(--gold)}
input[type=range]{width:100%;accent-color:var(--gold)}
.cta{font:900 17px var(--f);padding:16px 20px;border-radius:14px;border:0;background:var(--gold);color:var(--ink);cursor:pointer;width:100%}
.cta:disabled{opacity:.55;cursor:progress}
.ghost{font:700 14px var(--f);padding:12px 16px;border-radius:12px;border:1px solid var(--line);background:transparent;color:#fff;cursor:pointer}
.note{font-size:13px;color:var(--muted);line-height:1.5;margin:0}
.status{font-size:14px;font-weight:700;margin:0;min-height:1.3em}
.bar{height:10px;border-radius:6px;background:var(--field);overflow:hidden;border:1px solid var(--line)}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),#ffb340)}
.preview{position:sticky;top:calc(env(safe-area-inset-top,0px) + 16px);display:grid;gap:10px}
.frame{border-radius:24px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.45);border:1px solid var(--line);background:#000;aspect-ratio:9/16;max-width:100%}
.frame canvas,.frame img,.frame video{width:100%;height:100%;display:block;touch-action:pan-y;object-fit:cover}
.frame.cropping{outline:4px solid var(--gold);outline-offset:-4px}
.frame.cropping canvas{touch-action:none;cursor:grab}
.mbar{display:none}
@media (max-width:860px){
  .preview{position:static;order:-1;max-width:300px;margin:0 auto;width:100%}
  .grid{display:flex;flex-direction:column}
  body{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
  .mbar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:20;background:rgba(7,15,78,.96);border-top:1px solid var(--line);
    padding:12px max(16px,env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
}
.save{background:#3BD38A;color:#062A1A}
#outVid{width:100%;max-width:260px;border-radius:18px;border:1px solid var(--line);background:#000;justify-self:center}
.hint{font-size:12px;color:var(--muted);text-align:center;margin:0}
.caption{background:var(--field);border:1px solid var(--line);border-radius:14px;padding:14px;font-size:14px;line-height:1.5;white-space:pre-wrap;margin:0;overflow-wrap:anywhere}
.ideas{margin:0;padding-left:18px;color:#DCE3FF;font-size:14px;line-height:1.6}
#result{display:grid;gap:8px}