/* =====================================================================
   RAGING BOARD — même direction artistique que Raging Page et Raging Draw :
   mêmes couleurs de fond, mêmes typographies (Inter, Fraunces pour le nom),
   même colonne sombre, mêmes boutons, mêmes volets. La couleur de l'outil est le vert.
===================================================================== */
:root{
  --paper:#FCFDFE; --ink:#23262E; --ink-soft:#5C6270;
  --studio:#262535; --studio-2:#2F2E44; --studio-text:#EDEEF5; --studio-text-dim:#9A99B0; --hair-dark:#3B3A52;
  --accent:#22A06B; --accent-h:#1B8A5B; --accent-2:#177A4F; --accent-soft:#C3E8D4; --accent-tint:#22A06B1a; --accent-ink:#0F4D31; --accent-rail:#7FD1A8;
  --hair:#DADFE6; --backdrop:#EEF1F5; --editor-backdrop:#DCE0E7; --surface:#fff; --surface-soft:#F7F9FB; --surface-soft-2:#F2F5F8;
  --chip-bg:#00000009; --overlay-hover:#00000008; --danger:#D64545; --ok:#2F9E44;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --shadow-sm:0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.07);
  --shadow-md:0 2px 4px rgba(16,24,40,.05), 0 8px 20px -6px rgba(16,24,40,.14);
  --focus-ring:0 0 0 3px rgba(34,160,107,.24);

  --stage-halo:#F4F6F9; --stage-dot:rgba(16,24,40,.08);}
html[data-theme="dark"]{
  --backdrop:#101114; --editor-backdrop:#0A0B0D; --ink:#ECEDF0; --ink-soft:#9DA1AB; --hair:#2A2C32;
  --surface:#18191D; --surface-soft:#1E1F24; --surface-soft-2:#1E1F24; --chip-bg:#ffffff10; --overlay-hover:#ffffff0d;
  --accent-tint:#22A06B26; --accent-ink:#9BE0BD; --accent-soft:#1F5A40;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 8px 22px -8px rgba(0,0,0,.6);
  --studio:#141518; --studio-2:#1C1D21; --hair-dark:#26282D; --studio-text-dim:#8D919B;

  --stage-halo:#16171B; --stage-dot:rgba(255,255,255,.05);}
*{box-sizing:border-box;}
html, body{height:100%;}
body{margin:0; background:var(--backdrop); color:var(--ink); font-family:var(--sans); -webkit-font-smoothing:antialiased; font-feature-settings:'cv11','ss01'; letter-spacing:-.003em;}
button{font-family:inherit; cursor:pointer; color:inherit;}
input, select, textarea{font-family:inherit; color:var(--ink);}
::selection{background:#BFE8D3;}
#app{height:100vh; display:flex; overflow:hidden;}
.hidden{display:none !important;}
.icon{width:15px; height:15px; flex:none;}

/* ---------- Boutons ---------- */
.btn{border:1px solid var(--hair); background:var(--surface); color:var(--ink); padding:10px 16px; border-radius:6px; font-size:14px; font-weight:500; display:inline-flex; align-items:center; gap:8px; text-decoration:none; transition:background .12s, border-color .12s, box-shadow .12s, color .12s;}
.btn:hover{border-color:var(--accent-soft);}
.btn:disabled{opacity:.4; cursor:default;}
.btn-primary{background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600; box-shadow:0 1px 2px rgba(23,122,79,.35);}
.btn-primary:hover{background:var(--accent-h); border-color:var(--accent-h);}
.btn-primary .icon{color:#fff;}
.btn-ghost{background:transparent; border-color:transparent;}
.btn-ghost:hover{background:var(--overlay-hover); border-color:transparent;}
.btn-sm{padding:6px 10px; font-size:13px;}
.btn.danger{color:#B4232C;} .btn.danger:hover{border-color:#F2C4C7; background:#D9363E0f;}
.btn-play{color:var(--accent-2); border-color:var(--accent-soft); background:var(--accent-tint); font-weight:600;} .btn-play .icon{color:var(--accent);}
html[data-theme="dark"] .btn-play{color:var(--accent-ink);}
.btn:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{outline:none; box-shadow:var(--focus-ring);}
.ib{width:30px; height:30px; flex:none; display:inline-flex; align-items:center; justify-content:center; border-radius:7px; border:1px solid transparent; background:transparent; color:var(--ink-soft); text-decoration:none; transition:background .12s, color .12s, border-color .12s;}
.ib:hover{background:var(--overlay-hover); color:var(--ink);}
.ib:disabled{opacity:.35; cursor:default; background:transparent;}
.ib.on{background:var(--accent-tint); color:var(--accent); border-color:rgba(34,160,107,.25);}
.ib.sm{width:26px; height:26px;}
.ib .icon{width:16px; height:16px;}
.ib.danger:hover{color:var(--danger); background:rgba(214,69,69,.08);}
.lang-flags{display:flex; gap:2px; padding:2px; border-radius:999px; background:var(--chip-bg); margin:0 2px;}
.lang-flag{font-size:11.5px; font-weight:700; letter-spacing:.03em; line-height:1; padding:6px 11px; border-radius:999px; border:1px solid transparent; background:transparent; color:var(--ink-soft);}
.lang-flag:hover{color:var(--ink);}
.lang-flag.active{color:#fff; background:var(--accent); border-color:var(--accent);}
.seg{display:inline-flex; gap:2px; padding:3px; border-radius:9px; background:var(--surface-soft-2); max-width:100%;}
html[data-theme="dark"] .seg{background:#ffffff0a;}
.seg button{display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:6px 10px; border:0; border-radius:7px; background:transparent; color:var(--ink-soft); font-size:12.5px; font-weight:600; white-space:nowrap; min-width:0;}
.seg button:hover{color:var(--ink);}
.seg button.on{background:var(--surface); color:var(--ink); box-shadow:var(--shadow-sm);}
html[data-theme="dark"] .seg button.on{background:#2A2C32;}
.seg button .icon{width:14px; height:14px;}
.seg.wide{display:flex; width:100%; margin-bottom:4px;} .seg.wide button{flex:1; padding:7px 6px;}
.seg .fig{width:13px; height:16px;}
.seg button span{overflow:hidden; text-overflow:ellipsis;}

/* ---------- Le nom ---------- */
.mm-word{display:inline-flex; align-items:center; line-height:0; white-space:nowrap; user-select:none;}
.mm-word svg{display:block; height:1em; width:5.405em;}
.mm-word .w1{fill:var(--ink);} .mm-word .w2{fill:var(--accent);}

/* ---------- La colonne sombre ---------- */
.rail{width:240px; flex:none; background:var(--studio); color:var(--studio-text); display:flex; flex-direction:column; box-shadow:inset -1px 0 0 rgba(0,0,0,.28); min-height:0;}
.rail-brand{height:60px; flex:none; padding:0 18px; display:flex; align-items:center; gap:11px; border-bottom:1px solid var(--hair-dark); text-decoration:none;}
.rail-brand:hover{opacity:.85;}
.rail-logo{flex:none; display:block; border-radius:7px;}
.rail .mm-word{font-size:27px;} .rail .mm-word .w1{fill:#fff;} .rail .mm-word .w2{fill:var(--accent-rail);}
.rail-project{margin:14px 12px 4px; padding:10px 12px 11px; border-radius:10px; background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.08); color:#fff; font-size:14px; font-weight:600; line-height:1.35; word-break:break-word;}
.rail-project::before{content:attr(data-label); display:block; margin-bottom:3px; font-size:10.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--studio-text-dim);}
.rail-nav{flex:1; overflow-y:auto; padding:2px 10px 12px; scrollbar-width:thin; scrollbar-color:rgba(120,128,150,.4) transparent; overscroll-behavior:contain;}
.rail-group{padding:14px 12px 5px; font-size:10.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--studio-text-dim); opacity:.85;}
.rail-item{position:relative; width:100%; display:flex; align-items:center; gap:12px; padding:8px 12px; margin:1px 0; border:0; border-radius:8px; background:transparent; font-size:14px; font-weight:500; color:var(--studio-text-dim); text-align:left; user-select:none; outline:none; transition:background .12s, color .12s;}
.rail-item > *{pointer-events:none;}
.rail-item .icon{width:16px; height:16px; opacity:.85;}
.rail-item .rn{flex:none; width:18px; height:18px; display:grid; place-items:center; border-radius:50%; border:1.3px solid currentColor; font-size:10.5px; font-weight:700; font-style:normal; opacity:.9;}
.rail-item .lbl{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.rail-item .rb{flex:none; min-width:20px; padding:0 6px; border-radius:999px; background:rgba(255,255,255,.1); color:#fff; font-size:11px; line-height:18px; text-align:center;}
.rail-item:hover{background:rgba(255,255,255,.07); color:#fff;}
.rail-item:focus-visible{box-shadow:0 0 0 2px rgba(127,209,168,.6);}
.rail-item.active{background:rgba(34,160,107,.22); color:#fff;}
.rail-item.active .icon{opacity:1; color:var(--accent-rail);}
.rail-item.active .rn{background:var(--accent); border-color:var(--accent); color:#fff;}
.rail-item::before{content:''; position:absolute; left:-10px; top:7px; bottom:7px; width:3px; border-radius:0 3px 3px 0; background:var(--accent-rail); opacity:0; transform:scaleY(.35); transition:opacity .15s ease, transform .15s ease;}
.rail-item.active::before{opacity:1; transform:scaleY(1);}
.rail-item.dim:not(.active){opacity:.55;}
.rail-bottom{padding:12px 18px; font-size:12px; letter-spacing:.01em; color:var(--studio-text-dim); border-top:1px solid var(--hair-dark); display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap;}

/* ---------- La barre du haut ---------- */
.main-col{flex:1; display:flex; flex-direction:column; min-width:0;}
.topbar{height:60px; flex:none; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 16px 0 14px; background:var(--surface); box-shadow:0 1px 0 var(--hair); position:relative; z-index:6; min-width:0;}
.topbar-left, .topbar-right{display:flex; align-items:center; gap:4px; min-width:0;}
.topbar-left{flex:1 1 auto;}
.topbar-right{flex:none;}
.topbar .btn.btn-primary{padding:8px 15px; margin-left:6px;}
.tb-div{flex:none; width:1px; height:22px; background:var(--hair); margin:0 8px;}
.tb-title{min-width:80px; width:min(320px, 28vw); padding:7px 10px; border:1px solid transparent; border-radius:8px; background:transparent; font-size:15px; font-weight:600; letter-spacing:-.01em; text-overflow:ellipsis;}
.tb-title:hover{border-color:var(--hair);}
.tb-title:focus{outline:none; border-color:var(--accent); box-shadow:var(--focus-ring); background:var(--surface);}
.save-status{display:inline-flex; align-items:center; gap:7px; padding:5px 11px; border-radius:999px; background:var(--surface-soft-2); font-size:12.5px; font-weight:500; color:var(--ink-soft); white-space:nowrap; margin-left:6px; overflow:hidden; text-overflow:ellipsis;}
.save-status i{width:6px; height:6px; border-radius:50%; background:var(--ok); opacity:.85; flex:none;}
.save-status.bad{background:rgba(214,74,58,.14); color:var(--danger);} .save-status.bad i{background:var(--danger);}
.menu-wrap{position:relative;}
.menu{position:absolute; right:0; top:calc(100% + 8px); width:330px; padding:6px; background:var(--surface); border:1px solid var(--hair); border-radius:12px; box-shadow:var(--shadow-md); z-index:20;}
.menu button, .xlist button{display:flex; gap:12px; align-items:flex-start; width:100%; padding:10px 10px; border:0; border-radius:8px; background:transparent; text-align:left;}
.menu button:hover, .xlist button:hover{background:var(--accent-tint);}
.menu .icon, .xlist .icon{width:18px; height:18px; margin-top:1px; color:var(--accent);}
.menu b, .xlist b{display:block; font-size:14px; font-weight:600;}
.menu small, .xlist small{display:block; margin-top:2px; font-size:12.5px; line-height:1.4; color:var(--ink-soft);}
.xlist{display:flex; flex-direction:column; gap:6px; margin-top:8px;} .xlist button{border:1px solid var(--hair); padding:12px;}

/* ---------- Le centre : l'image du plan ---------- */
.work{flex:1; min-height:0; display:flex;}
.center{flex:1; min-width:0; display:flex; flex-direction:column; background:var(--editor-backdrop);}
/* l'espace autour de l'image : une table lumineuse discrète (un halo au centre et une trame de points, comme un plan de travail) */
.stage-area{background:radial-gradient(ellipse 70% 60% at 50% 45%, var(--stage-halo) 0%, transparent 70%), radial-gradient(circle, var(--stage-dot) 1px, transparent 1.3px) 0 0 / 22px 22px;}
.stage{box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 22px 44px -18px rgba(16,24,40,.45), 0 0 0 1px rgba(16,24,40,.12);}
.stage-area{flex:1; min-height:0; display:flex; flex-direction:column; padding:12px 18px 8px; gap:10px;}
.shot-head{flex:none; display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:34px;}
.sh-l, .sh-r{display:flex; align-items:center; gap:6px; min-width:0;}
.sh-l{flex:1; overflow:hidden; white-space:nowrap;} .sh-r{flex:none;}
.sh-no{padding:5px 10px; border-radius:7px; background:var(--accent-2); color:#fff; font-size:13px; font-weight:700; letter-spacing:.01em;}
.sh-of{font-size:13px; color:var(--ink-soft); margin-right:4px;}
.sh-chip{display:inline-flex; align-items:center; gap:5px; padding:4px 9px; border-radius:999px; background:var(--surface); box-shadow:0 0 0 1px var(--hair); font-size:12.5px; font-weight:500; color:var(--ink); white-space:nowrap;}
.sh-chip.mv{color:var(--accent-2);} .sh-chip .icon{width:13px; height:13px;}
html[data-theme="dark"] .sh-chip.mv{color:var(--accent-ink);}
.sh-auto{display:inline-flex; align-items:center; gap:5px; margin-left:4px; font-size:12.5px; color:var(--ink-soft); cursor:help;}
.sh-auto .icon{width:13px; height:13px; color:var(--ok);}
.sh-r .seg{background:var(--surface); box-shadow:0 0 0 1px var(--hair);}
.sh-r .seg button.on{background:var(--accent-tint); color:var(--accent-ink); box-shadow:inset 0 0 0 1px var(--accent-soft);}
.sh-r .ib{background:var(--surface); box-shadow:0 0 0 1px var(--hair);}
.sh-r .ib.on{background:var(--accent-tint); box-shadow:0 0 0 1px var(--accent-soft);}
.sh-r .tb-div{margin:0 2px;}
.stage-wrap{flex:1; min-height:0; display:flex; align-items:center; justify-content:center;}
.stage{position:relative; border-radius:6px; overflow:hidden; box-shadow:0 14px 36px -14px rgba(16,24,40,.5), 0 0 0 1px rgba(16,24,40,.1); background:#DCE0E7;}
.stage canvas{display:block; width:100%; height:100%; cursor:grab; touch-action:none;}
.stage.final .handles{display:none;}
.stage.final::after{content:''; position:absolute; inset:0; box-shadow:inset 0 0 0 3px var(--accent); border-radius:6px; pointer-events:none;}
.thirds{position:absolute; inset:0; pointer-events:none;}
.thirds i{position:absolute; background:#ffffff59; box-shadow:0 0 0 .5px #0000001a;}
.thirds i:nth-child(1){left:33.33%; top:0; bottom:0; width:1px;} .thirds i:nth-child(2){left:66.66%; top:0; bottom:0; width:1px;}
.thirds i:nth-child(3){top:33.33%; left:0; right:0; height:1px;} .thirds i:nth-child(4){top:66.66%; left:0; right:0; height:1px;}
.warn{position:absolute; left:12px; top:12px; max-width:calc(100% - 24px); display:flex; align-items:center; gap:9px; padding:7px 8px 7px 12px; border-radius:999px; background:#FFF6E6; color:#6B4300; font-size:12.5px; font-weight:500; box-shadow:0 6px 18px rgba(10,10,20,.2); animation:pop .2s cubic-bezier(.2,.8,.3,1);}
.warn .icon{color:#C8761E;}
.warn button{border:0; border-radius:999px; padding:4px 11px; background:#C8761E; color:#fff; font-size:12px; font-weight:600;}
@keyframes pop{from{opacity:0; transform:translateY(-4px) scale(.98);}}
.under{flex:none; display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap;}
.dock{display:flex; align-items:center; gap:2px; padding:4px; border-radius:12px; background:var(--surface); box-shadow:0 0 0 1px var(--hair), 0 8px 22px rgba(10,10,20,.1);}
.dk{width:32px; height:32px; display:flex; align-items:center; justify-content:center; padding:0; border:0; border-radius:8px; background:transparent; color:var(--ink-soft); touch-action:none; user-select:none; transition:background .12s, color .12s;}
.dk svg{width:14px; height:14px; fill:currentColor; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}
.dk:hover{background:var(--overlay-hover); color:var(--ink);}
.dk.on{background:var(--accent); color:#fff;}
.dk-sep{width:1px; height:20px; background:var(--hair); margin:0 3px;}
.hint{display:flex; align-items:center; gap:8px; max-width:560px; font-size:12.5px; line-height:1.4; color:var(--ink-soft);}
.hint i{flex:none; width:6px; height:6px; border-radius:50%; background:var(--accent);}
.rec{position:absolute; inset:auto 10px 10px auto; display:flex; align-items:center; gap:10px; padding:8px 8px 8px 12px; border-radius:9px; background:var(--surface); box-shadow:var(--shadow-md); font-size:13.5px; font-weight:600; font-variant-numeric:tabular-nums;}
.rec-dot{width:10px; height:10px; border-radius:50%; background:#D9363E; animation:blink 1s infinite;}
@keyframes blink{50%{opacity:.25;}}
.nogl{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; gap:8px; padding:30px; text-align:center; font-size:14px; line-height:1.5; color:var(--ink-soft);}
.nogl b{color:var(--ink); font-size:16px;}

/* ---------- Les poignées au-dessus des têtes (jamais dans les exports : elles sont hors de l'image 3D) ---------- */
.handles{position:absolute; inset:0; pointer-events:none; overflow:hidden;}
.hd{position:absolute; left:0; top:0; width:0; height:0; pointer-events:none;}
.hd-move{position:absolute; left:-11px; top:-31px; width:22px; height:28px; padding:0; border:0; background:transparent; pointer-events:auto; cursor:grab; touch-action:none; opacity:.72; transform-origin:50% 100%; transform:scale(.86); transition:opacity .15s, transform .15s;}
.hd-move svg{display:block; width:22px; height:28px; overflow:visible; filter:drop-shadow(0 2px 3px rgba(15,77,49,.3));}
.hd-move .pin{fill:#FCFDFE; stroke:#22A06B; stroke-width:1.7; stroke-linejoin:round;}
.hd-move .ft{fill:none; stroke:#0F4D31;} .hd-move .fe{fill:#0F4D31;} .hd-move .fh{fill:#FCFDFE;}
.hd:hover .hd-move, .hd.busy .hd-move{opacity:1; transform:scale(1.08);}
.hd.on .hd-move{opacity:1; transform:scale(1);}
.hd.on .hd-move .pin{fill:#22A06B; stroke:#FCFDFE;}
.hd.on .hd-move .ft{stroke:#FCFDFE;} .hd.on .hd-move .fe{fill:#FCFDFE;} .hd.on .hd-move .fh{fill:#0F4D31;}
.hd.busy .hd-move{cursor:grabbing;}
.hd-turn{position:absolute; left:12px; top:-30px; width:20px; height:20px; padding:0; display:grid; place-items:center; border:1.5px solid #fff; border-radius:50%; background:#ffffffe6; color:var(--accent-2); pointer-events:auto; cursor:ew-resize; touch-action:none; box-shadow:0 2px 5px rgba(16,24,40,.25); opacity:0; transition:opacity .15s;}
.hd-turn svg{width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.hd:hover .hd-turn, .hd.on .hd-turn, .hd.busy .hd-turn{opacity:1;}
.hd-name{position:absolute; left:0; top:-52px; transform:translateX(-50%); padding:2px 8px; border-radius:999px; background:#23262Ed9; color:#fff; font-size:11px; font-weight:600; white-space:nowrap; opacity:0; transition:opacity .15s; pointer-events:none;}
.hd:hover .hd-name, .hd.busy .hd-name{opacity:1;}
.hd-crowd .hd-move{left:-34px; top:-30px; width:auto; height:28px; display:flex; align-items:center; gap:6px; padding:0 11px; border-radius:999px; background:#fff; color:var(--accent-2); font-size:12px; font-weight:700; box-shadow:0 3px 10px rgba(15,77,49,.25), inset 0 0 0 1.5px #7FD1A8; opacity:.85; transform:none; height:24px; padding:0 9px; font-size:11.5px;}
.hd-crowd:hover .hd-move, .hd-crowd.on .hd-move{opacity:1; transform:none;}
.hd-crowd .hd-move .icon{width:15px; height:15px;}
.hd-crowd.on .hd-move{background:var(--accent); color:#fff; box-shadow:0 3px 10px rgba(15,77,49,.35);}
.hd-crowd .hd-turn{left:44px; top:-27px;}
@keyframes bob{0%, 100%{transform:translateY(0);} 50%{transform:translateY(-5px);}}
@media (prefers-reduced-motion:reduce){ .hd-move{animation:none;} }
body.dragging, body.dragging *{cursor:grabbing !important; user-select:none;}

/* ---------- Le volet de droite ---------- */
.side{width:328px; flex:none; display:flex; flex-direction:column; background:var(--surface); box-shadow:-1px 0 0 var(--hair); min-height:0; z-index:2;}
.side-body{flex:1; overflow-y:auto; padding:4px 0 28px; scrollbar-width:thin; scrollbar-color:rgba(120,128,150,.4) transparent;}
.ph{display:flex; align-items:flex-start; gap:12px; padding:16px 16px 6px;}
.ph-ico{flex:none; width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:var(--accent-tint); color:var(--accent);}
.ph-ico .icon{width:18px; height:18px;}
.ph b{display:block; font-size:15px; font-weight:700; letter-spacing:-.01em; line-height:1.3;}
.ph small{display:block; font-size:12.5px; color:var(--ink-soft); line-height:1.5; margin-top:3px;}
.pb{padding:0 16px;}
.fly-lbl{margin:18px 0 8px; font-size:10.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-soft); display:flex; align-items:center; gap:6px;}
.fly-lbl .cnt{margin-left:auto; letter-spacing:0; font-weight:600; color:var(--accent-2);}
.fly-note{margin:8px 0 6px; font-size:12.5px; line-height:1.5; color:var(--ink-soft);}
.fly-note.keys{font-size:12px;}
.pbtns{display:flex; gap:6px; flex-wrap:wrap; margin:12px 0 4px;}
.ptiles{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.ptiles.three{grid-template-columns:1fr 1fr 1fr;}
.ptile{display:flex; flex-direction:column; align-items:stretch; gap:7px; padding:5px 5px 8px; border:1px solid var(--hair); border-radius:10px; background:var(--surface); font-size:13px; font-weight:600; color:var(--ink); text-align:left; transition:border-color .12s, box-shadow .12s;}
.ptile span{padding:0 4px;}
.ptile:hover{border-color:var(--accent);}
.ptile.on{border-color:var(--accent); box-shadow:var(--focus-ring);}
.ptile.sm{align-items:center; justify-content:center; flex-direction:row; gap:5px; padding:10px 4px; font-size:12px; text-align:center; color:var(--accent-2);}
.ptile.sm span{padding:0;}
.ptile.sm .icon{color:var(--accent); width:13px; height:13px;}
.sw{display:block; aspect-ratio:16/9; border-radius:7px; box-shadow:inset 0 0 0 1px #0000001a; background-size:cover !important; background-position:center !important;}
.sw-house{background:linear-gradient(160deg, #86B3D9 0 35%, #8C4A3A 35% 52%, #E6DDCC 52% 80%, #7C9A5A 80%);}
.sw-roof{background:linear-gradient(160deg, #6F9CC9 0 45%, #A6ACB4 45% 60%, #8D9198 60%);}
.sw-warehouse{background:linear-gradient(160deg, #6E737B 0 25%, #9AA0A8 25% 60%, #E3B53A 60% 64%, #8A8E95 64%);}
.sw-garage{background:linear-gradient(160deg, #A8ADB5 0 55%, #8D9198 55%);}
.sw-office{background:linear-gradient(160deg, #E6E2DA 0 55%, #7A5C42 55%);}
.sw-alley{background:linear-gradient(160deg, #9DB3C8 0 22%, #9A8B7E 22% 70%, #2F6E4F 70%);}
.sw-taxi{background:linear-gradient(160deg, #8FB3D4 0 40%, #E8B923 40% 72%, #24262B 72%);}
.sw-living{background:linear-gradient(160deg, #D9D2C5 0 55%, #5A6B7C 55%);}
.sw-cafe{background:linear-gradient(160deg, #C9B9A3 0 55%, #6E5440 55%);}
.sw-park{background:linear-gradient(160deg, #82B0D8 0 45%, #4E7C58 45% 62%, #6F8F5A 62%);}
.sw-hall{background:linear-gradient(160deg, #D8D4CC 0 55%, #7A3B37 55%);}
.sw-street{background:linear-gradient(160deg, #86AFD3 0 30%, #B39C86 30% 62%, #4A4E55 62%);}
.sw-beach{background:linear-gradient(160deg, #79AED8 0 40%, #4F86A3 40% 58%, #DDCCA3 58%);}
.sw-stadium{background:linear-gradient(160deg, #6E9CC8 0 28%, #8D9198 28% 52%, #4F8A4A 52%);}
.sw-country{background:linear-gradient(160deg, #86B3D9 0 40%, #C9B26A 40% 60%, #7C9A5A 60%);}
.crow{display:flex; align-items:center; gap:4px; margin-bottom:6px; padding-right:4px; border:1px solid var(--hair); border-radius:9px; transition:border-color .12s, background .12s;}
.crow:hover{border-color:var(--accent-soft);}
.crow.on{border-color:var(--accent); background:var(--accent-tint);}
.crow-main{flex:1; min-width:0; display:flex; align-items:center; gap:10px; padding:8px 10px; border:0; background:transparent; font-size:14px; font-weight:500; text-align:left;}
.crow-main span{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.crow-main em{font-style:normal; font-size:11.5px; font-weight:600; color:var(--accent-2);}
.crow-main .icon{color:var(--accent);}
html[data-theme="dark"] .crow-main em{color:var(--accent-ink);}
.fig{width:15px; height:19px; flex:none; display:block;}
.crow-main .fig{width:18px; height:22px;}
.figs{display:grid; grid-template-columns:repeat(4, 1fr); gap:6px;}
.fig-t{display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 2px 6px; border:1px solid var(--hair); border-radius:9px; background:var(--surface-soft); color:var(--ink-soft);}
.fig-t .fig{width:22px; height:28px;}
.fig-t small{font-size:10.5px; font-weight:600; line-height:1.15; text-align:center;}
.fig-t:hover{border-color:var(--accent); background:var(--surface); color:var(--ink);}
.fig-t.on{border-color:var(--accent); background:var(--surface); color:var(--ink); box-shadow:inset 0 0 0 1px var(--accent);}
.fig-t:disabled{opacity:.38; cursor:default; border-color:var(--hair); background:var(--surface-soft);}
.chips{display:flex; flex-wrap:wrap; gap:6px;}
.chip{display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border:1px solid var(--hair); border-radius:999px; background:var(--surface); font-size:12.5px; font-weight:500;}
.chip:hover{border-color:var(--accent); color:var(--accent-ink);}
.poses{display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; margin-top:8px;}
.pose-t{display:flex; flex-direction:column; gap:4px; padding:3px 3px 6px; border:1px solid var(--hair); border-radius:9px; background:var(--surface); font-size:11px; font-weight:600; color:var(--ink-soft); text-align:center; line-height:1.2;}
.pose-t img{display:block; width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:6px; background:#E7EBF0;}
.pose-t:hover{border-color:var(--accent); color:var(--ink);}
.pose-t.on{border-color:var(--accent); box-shadow:var(--focus-ring); color:var(--ink);}
.sizes{display:grid; grid-template-columns:repeat(3, 1fr); gap:6px;}
.size-t{display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 4px 7px; border:1px solid var(--hair); border-radius:9px; background:var(--surface); color:var(--ink-soft); line-height:1.15;}
.size-t .sg{width:44px; height:27px; color:var(--ink-soft);}
.size-t b{font-size:12.5px; color:var(--ink);}
.size-t small{font-size:10px; text-align:center;}
.size-t:hover{border-color:var(--accent);}
.size-t.on{border-color:var(--accent); background:var(--accent-tint); box-shadow:inset 0 0 0 1px var(--accent);}
.size-t.on .sg{color:var(--accent);}
.angs{display:grid; grid-template-columns:repeat(3, 1fr); gap:6px;}
.ang-t{display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 4px 7px; border:1px solid var(--hair); border-radius:9px; background:var(--surface); font-size:11px; font-weight:600; color:var(--ink-soft); line-height:1.2; text-align:center;}
.mg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}
.ang-t:hover{border-color:var(--accent); color:var(--ink);}
.ang-t.on{border-color:var(--accent); background:var(--accent-tint); color:var(--accent-ink); box-shadow:inset 0 0 0 1px var(--accent);}
.cars{display:grid; grid-template-columns:1fr 1fr; gap:6px;}
.car-t{display:flex; align-items:center; gap:9px; padding:8px; border:1px solid var(--hair); border-radius:9px; background:var(--surface); font-size:12px; font-weight:600; color:var(--ink); text-align:left; line-height:1.25;}
.car-t .sg{width:36px; height:22px; flex:none; color:var(--accent);}
.car-t:hover{border-color:var(--accent); background:var(--accent-tint);}
.looks{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:6px;}
.look-t{display:flex; flex-direction:column; gap:6px; padding:4px 4px 8px; border:1px solid var(--hair); border-radius:10px; background:var(--surface); font-size:13px; font-weight:600;}
.look-t img{display:block; width:100%; aspect-ratio:16/9; border-radius:6px; object-fit:cover;}
.look-t:hover{border-color:var(--accent);}
.look-t.on{border-color:var(--accent); box-shadow:var(--focus-ring);}
.part-h{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px;}
.part-h b{font-size:14.5px;} .part-h span{font-size:12.5px; color:var(--ink-soft);}
.fr{display:grid; grid-template-columns:100px 1fr 48px; align-items:center; gap:8px; margin:6px 0;}
.fl{font-size:12.5px; color:var(--ink-soft); line-height:1.25;}
.fv{font-size:12.5px; font-weight:600; text-align:right; font-variant-numeric:tabular-nums;}
.fr input[type=range]{width:100%; min-width:0;}
.ftog{position:relative; display:flex; align-items:center; justify-content:space-between; gap:12px; margin:8px 0; font-size:13px; line-height:1.4; cursor:pointer;}
/* la case cachée reste dans son interrupteur (sinon, tout en bas d'un long volet, elle agrandissait la page entière) */
.ftog input{position:absolute; opacity:0; pointer-events:none;}
.ftog .tg{flex:none; width:34px; height:20px; border-radius:999px; background:var(--hair); position:relative; transition:background .15s;}
.ftog .tg::after{content:''; position:absolute; left:2px; top:2px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.25); transition:transform .15s;}
.ftog input:checked + .tg{background:var(--accent);}
.ftog input:checked + .tg::after{transform:translateX(14px);}
.ftog input:focus-visible + .tg{box-shadow:var(--focus-ring);}
.fld{display:block; margin:0 0 10px;}
.fld > span{display:block; font-size:12.5px; font-weight:500; color:var(--ink-soft); margin-bottom:5px;}
.fld input, .fld textarea, .fld select{width:100%; padding:8px 10px; border:1px solid var(--hair); border-radius:8px; background:var(--surface-soft); font-size:13.5px; line-height:1.45; resize:vertical;}
.fld input:focus, .fld textarea:focus, .fld select:focus{outline:none; border-color:var(--accent); box-shadow:var(--focus-ring); background:var(--surface);}
.g2{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px;}
.how{margin:10px 0 0; padding-left:22px; display:grid; gap:11px; font-size:13px; line-height:1.5; color:var(--ink-soft);}
.how b{display:block; color:var(--ink);}
.how li::marker{color:var(--accent); font-weight:700;}

/* ---------- En bas : le storyboard ---------- */
.board{flex:none; background:var(--surface); box-shadow:0 -1px 0 var(--hair); padding:10px 16px 12px;}
.board-h{display:flex; align-items:center; gap:10px; margin-bottom:9px; flex-wrap:wrap;}
.board-h > b{font-size:10.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-soft);}
.board-h > span{font-size:12.5px; color:var(--ink-soft);}
.board-h .grow{flex:1;}
.cards{display:flex; gap:10px; overflow-x:auto; padding:2px 2px 4px; align-items:stretch; scrollbar-width:thin;}
.shot-card{flex:none; width:188px; display:flex; flex-direction:column; gap:6px; padding:5px; border:1px solid var(--hair); border-radius:10px; background:var(--surface); text-align:left; transition:border-color .12s, box-shadow .12s, transform .12s;}
.shot-card:hover{border-color:var(--accent-soft); transform:translateY(-1px);}
.shot-card.on{border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft);}
.shot-card.now{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent);}
.shot-card.drag{opacity:.4;}
.shot-card.drop-l{box-shadow:-4px 0 0 var(--accent);} .shot-card.drop-r{box-shadow:4px 0 0 var(--accent);}
.sc-img{position:relative; display:block; aspect-ratio:16/9; border-radius:6px; overflow:hidden; background:#DCE0E7;}
.sc-img img{display:block; width:100%; height:100%; object-fit:cover;}
.sc-n{position:absolute; top:5px; left:5px; min-width:22px; padding:1px 7px; border-radius:6px; background:#23262Ecc; color:#fff; font-size:11.5px; font-weight:700; text-align:center;}
.shot-card.on .sc-n, .sv-card.on .sc-n{background:var(--accent-2);}
.sc-sc{position:absolute; top:5px; right:5px; padding:1px 6px; border-radius:5px; background:#ffffffd9; color:#23262E; font-size:10.5px; font-weight:600;}
.sc-d{position:absolute; bottom:5px; right:5px; padding:1px 6px; border-radius:5px; background:#23262Ebf; color:#fff; font-size:10.5px; font-variant-numeric:tabular-nums;}
.sc-mv{position:absolute; bottom:4px; left:5px; width:22px; height:22px; display:grid; place-items:center; border-radius:6px; background:#ffffffe0; color:var(--accent-2);}
.sc-mv .mg{width:15px; height:15px;}
.sc-now{position:absolute; top:5px; left:34px; padding:1px 7px; border-radius:6px; background:var(--accent); color:#fff; font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;}
.sc-t{display:block; padding:0 3px 1px; font-size:12px; line-height:1.35; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.sc-t b{color:var(--accent-ink); margin-right:5px;}
.add-col{flex:none; display:flex; flex-direction:column; gap:8px; width:138px;}
.add-shot{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; border:1.5px dashed var(--accent-soft); border-radius:10px; background:var(--accent-tint); color:var(--accent-2); font-size:13px; font-weight:600;}
html[data-theme="dark"] .add-shot{color:var(--accent-ink);}
.add-shot small{font-size:11px; font-weight:500; opacity:.8;}
.add-shot:hover{border-color:var(--accent); border-style:solid;}
.add-shot .icon{width:18px; height:18px;}
.add-shot.rev{flex:none; flex-direction:row; gap:6px; padding:8px; font-size:12.5px;}
.add-steps{flex:none; display:grid; grid-template-columns:1fr 1fr; gap:6px;} .add-steps .add-shot.rev{flex-direction:column; gap:2px; padding:6px 4px; font-size:11.5px;}
.board-tip{flex:none; align-self:center; max-width:260px; margin:0 0 0 6px; font-size:12.5px; line-height:1.5; color:var(--ink-soft);}

/* ---------- La planche entière ---------- */
.sheet-view{flex:1; min-height:0; overflow-y:auto; padding:18px 22px 28px;}
.sv-h{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:14px;}
.sv-h b{font-size:18px; letter-spacing:-.01em;} .sv-h span{font-size:13px; color:var(--ink-soft);}
.sv-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:16px;}
.sv-card{display:flex; flex-direction:column; gap:8px; padding:8px; border-radius:12px; background:var(--surface); box-shadow:0 0 0 1px var(--hair), var(--shadow-sm);}
.sv-card.on{box-shadow:0 0 0 2px var(--accent);}
.sv-img{position:relative; display:block; padding:0; border:0; border-radius:7px; overflow:hidden; aspect-ratio:16/9; background:#DCE0E7;}
.sv-img img{display:block; width:100%; height:100%; object-fit:cover; transition:transform .2s;}
.sv-img:hover img{transform:scale(1.03);}
.sv-meta{display:flex; flex-direction:column; gap:2px; padding:0 2px;}
.sv-meta b{font-size:13px;} .sv-meta span{font-size:11.5px; color:var(--accent-2);}
html[data-theme="dark"] .sv-meta span{color:var(--accent-ink);}
.sv-card textarea{width:100%; padding:7px 9px; border:1px solid var(--hair); border-radius:8px; background:var(--surface-soft); font-size:13px; line-height:1.45; resize:vertical;}
.sv-card textarea.dl{font-style:italic;}
.sv-card textarea:focus{outline:none; border-color:var(--accent); box-shadow:var(--focus-ring); background:var(--surface);}
.sv-add{min-height:120px; align-self:start; padding:30px 10px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; border:1.5px dashed var(--accent-soft); border-radius:12px; background:var(--accent-tint); color:var(--accent-2); font-size:13.5px; font-weight:600;}
.sv-add:hover{border-color:var(--accent);}

/* ---------- Lire le storyboard ---------- */
.play-box, .play-bar, .play-stop{display:none;}
.stage.playing .play-box{display:flex; flex-direction:column; gap:3px; position:absolute; left:50%; bottom:22px; transform:translateX(-50%); max-width:80%; padding:9px 14px; border-radius:10px; background:#23262Ed9; color:#fff; font-size:13.5px; line-height:1.4; text-align:center; pointer-events:none;}
.play-box b{font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:#BFE8D3;} .play-box i{color:#D6D9DF;}
.stage.playing .play-bar{display:block; position:absolute; left:0; right:0; bottom:0; height:4px; background:#00000033;}
.play-bar i{display:block; height:100%; width:0; background:var(--accent);}
.stage.playing .play-stop{display:flex; align-items:center; gap:6px; position:absolute; top:10px; right:10px; padding:6px 11px; border:0; border-radius:999px; background:#fff; color:#23262E; font-size:13px; font-weight:600; box-shadow:var(--shadow-md);}
.stage.playing .handles, .stage.playing .thirds, .stage.playing .warn{display:none !important;}

/* ---------- Boîtes, accueil, toasts ---------- */
.modal-bd{position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:16px; background:rgba(20,22,28,.42); animation:fade .15s ease;}
@keyframes fade{from{opacity:0;}}
.modal{width:min(560px, 100%); max-height:90vh; overflow:auto; padding:22px 24px; background:var(--surface); border-radius:14px; box-shadow:0 18px 48px rgba(10,10,20,.28); animation:pop .2s cubic-bezier(.2,.8,.3,1);}
.modal.sm{width:min(420px, 100%);}
.modal h3{margin:0; font-size:18px; letter-spacing:-.01em;}
.modal p{margin:10px 0 0; font-size:14px; line-height:1.55; color:var(--ink-soft);}
.modal-f{display:flex; justify-content:flex-end; gap:8px; margin-top:18px;}
.intro-card{width:min(500px, 100%); padding:8px 8px 18px;}
.intro-h{padding:14px 16px 4px;} .intro-h b{font-size:18px;}
.intro-steps{list-style:none; margin:12px 16px 0; padding:0; display:flex; flex-direction:column; border:1px solid var(--hair); border-radius:12px; overflow:hidden;}
.intro-steps li{display:flex; gap:12px; padding:12px 14px; font-size:13px; line-height:1.5; color:var(--ink-soft); background:var(--surface-soft);}
.intro-steps li + li{border-top:1px solid var(--hair);}
.intro-steps b{display:block; color:var(--ink); font-size:14px;}
.intro-card .modal-f{padding:0 16px;}
#toasts{position:fixed; left:50%; bottom:28px; transform:translateX(-50%); z-index:60; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none;}
.toast{display:flex; align-items:center; gap:10px; max-width:min(560px, 90vw); padding:10px 16px; border-radius:999px; background:#262535; color:#EDEEF5; font-size:13.5px; font-weight:500; box-shadow:0 10px 30px rgba(10,10,20,.35); animation:pop .2s cubic-bezier(.2,.8,.3,1); transition:opacity .3s, transform .3s;}
.toast::before{content:''; width:7px; height:7px; border-radius:50%; background:var(--accent-rail); flex:none;}
.toast.warn::before{background:#F2994A;}
.toast.out{opacity:0; transform:translateY(6px);}

/* ---------- Curseurs ---------- */
input[type=range]{-webkit-appearance:none; appearance:none; height:20px; background:transparent; cursor:pointer;}
input[type=range]::-webkit-slider-runnable-track{height:4px; border-radius:2px; background:var(--hair);}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:14px; height:14px; margin-top:-5px; border-radius:50%; background:#fff; border:2px solid var(--accent); box-shadow:0 1px 3px rgba(0,0,0,.2);}
input[type=range]::-moz-range-track{height:4px; border-radius:2px; background:var(--hair);}
input[type=range]::-moz-range-thumb{width:12px; height:12px; border-radius:50%; background:#fff; border:2px solid var(--accent);}

/* ---------- Écrans plus étroits ---------- */
@media (max-width:1600px){ .sh-auto{display:none;} }
@media (max-width:1380px){ .rail{width:210px;} .side{width:308px;} .sh-chip.mv{display:none;} }
@media (max-width:1180px){
  .rail{width:64px;}
  .rail .mm-word, .rail-project, .rail-group, .rail-item .lbl, .rail-bottom, .rail-item .rb{display:none;}
  .rail-brand{padding:0; justify-content:center;}
  .rail-nav{padding:10px 8px;}
  .rail-item{justify-content:center; padding:10px;}
  .rail-item::before{left:-8px;}
  .tb-lbl, .save-status{display:none;}
}
@media (max-width:900px){
  .shot-head{flex-wrap:wrap;} .sh-l{flex:1 1 100%;}
  #app{flex-direction:column; height:auto; min-height:100vh; overflow:visible;}
  .rail{width:100%; flex-direction:row; align-items:center; overflow-x:auto; box-shadow:none; position:sticky; top:0; z-index:8;}
  .rail-brand{height:52px; border:0; padding:0 12px; flex:none;}
  .rail-nav{display:flex; flex:none; gap:2px; padding:6px 8px; overflow:visible;}
  .rail-item{width:auto; flex:none; padding:8px 10px;}
  .rail-item::before{display:none;}
  .topbar{height:54px; padding:0 8px; gap:6px;}
  .lang-flags, .topbar .tb-div{display:none;}
  .tb-title{width:40vw;}
  .work{flex-direction:column;}
  .center{flex:none;}
  .stage-area{flex:none; padding:10px 10px 6px;}
  .stage-wrap{flex:none; height:calc((100vw - 20px) * 9 / 16);}
  .side{width:100%; box-shadow:0 -1px 0 var(--hair);}
  .side-body{overflow:visible;}
  .hint{display:none;}
  .sh-r .seg button{padding:6px 8px;}
  .warn{font-size:11.5px;}
}
@media (max-width:480px){
  .dock .dk-sep:nth-of-type(2), .dock [data-nav="up"], .dock [data-nav="down"]{display:none;}
  .sh-r .seg button{font-size:0; gap:0;} .sh-r .seg button .icon{width:16px; height:16px;}
  .shot-card{width:156px;}
}

/* ---------- Poses rangées par familles, couleurs de la moto ---------- */
.pose-g{margin:14px 0 2px; font-size:11.5px; font-weight:600; color:var(--ink-soft);}
.qsw{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:4px 0 6px;}
.qsw button{width:26px; height:26px; padding:0; border:0; border-radius:50%; background:var(--c); box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);}
.qsw button.on{box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--accent);}
.vadd{display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; margin-bottom:10px;}
.vadd .btn{justify-content:center; padding-left:6px; padding-right:6px;}
.seg.seats{flex-wrap:wrap;}
.seg.ratios{flex-wrap:wrap;}
.seg.ratios button{gap:6px;}
.rbox{display:inline-block; flex:none; box-sizing:border-box; border:1.4px solid currentColor; border-radius:2px; opacity:.75;}
.seg.ratios button{flex:1 1 30%;}
/* plein écran : l'image prend toute la place */
body.fs-fake{overflow:hidden;}
/* des volets plus calmes : le titre, une ligne d'explication, et le contenu */
.ph{padding:16px 16px 4px;}
.side .ph-ico{display:none;}
.ph small{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.sh-room{display:inline-flex; align-items:center; gap:5px; padding:0 4px 0 9px; border-radius:999px; background:var(--accent-tint); color:var(--accent-2); font-size:12.5px; font-weight:600;}
.sh-room .icon{width:13px; height:13px;}
.sh-room select{border:0; background:transparent; color:inherit; font:inherit; padding:4px 2px; cursor:pointer; outline:none;}
html[data-theme="dark"] .sh-room{color:var(--accent-ink);}
.chip.on{border-color:var(--accent); background:var(--accent-tint); color:var(--accent-2);}
.chip small{font-size:11px; opacity:.7; margin-left:3px;}
.pro{margin:0 0 6px; padding-left:18px; font-size:12.5px; line-height:1.55; color:var(--ink-soft);} .pro li{margin-bottom:5px;}
/* supprimer un plan : la corbeille sur chaque vignette (visible au survol, toujours sur le plan en cours) */
.sc-wrap{position:relative; flex:none; display:flex;}
.sc-del{position:absolute; top:9px; right:9px; z-index:2; width:26px; height:26px; display:flex; align-items:center; justify-content:center; padding:0; border:0; border-radius:7px; background:rgba(18,19,22,.72); color:#fff; opacity:0; transition:opacity .12s, background .12s;}
.sc-del .icon{width:14px; height:14px;}
.sc-wrap:hover .sc-del, .sc-wrap:focus-within .sc-del, .sv-card:hover .sc-del, .sc-del:focus-visible{opacity:1;}
.sc-del:hover{background:#C4373B;}
.sv-card{position:relative;}
.sv-del{top:16px; right:16px;}
@media (hover:none){ .sc-del{opacity:1;} }
.toast-act{margin-left:4px; padding:3px 10px; border:0; border-radius:999px; background:rgba(255,255,255,.14); color:#fff; font:inherit; font-weight:600; cursor:pointer;}
.toast-act:hover{background:rgba(255,255,255,.24);}
/* ---------- Des volets mieux rangés ----------
   le titre reste en haut quand on fait défiler, les longues listes ont une barre de catégories,
   et chaque partie est séparée par un filet */
.side .ph{position:sticky; top:-4px; z-index:3; background:var(--surface); padding:16px 16px 10px; box-shadow:0 1px 0 var(--hair);}
.ph-t{min-width:0; flex:1;}
.jump{display:flex; flex-wrap:wrap; gap:4px; margin-top:10px;}
.jump::-webkit-scrollbar{display:none;}
.jump button{flex:none; padding:5px 10px; border:0; border-radius:999px; background:var(--surface-soft-2); color:var(--ink-soft); font-size:12px; font-weight:600; white-space:nowrap;}
.jump button:hover{background:var(--accent-tint); color:var(--accent-2);}
html[data-theme="dark"] .jump button:hover{color:var(--accent-ink);}
.side .pb > .fly-lbl, .side .pb > .pose-g{scroll-margin-top:120px;}
.side .pb > .fly-lbl:not(:first-child){margin-top:20px; padding-top:16px; border-top:1px solid var(--hair);}
.side .pose-g{margin:20px 0 8px; padding-top:16px; border-top:1px solid var(--hair); font-size:10.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-soft);}
.side .pb > .pose-g:first-child, .side .pb > .fly-lbl:first-child{border-top:0; padding-top:0; margin-top:16px;}
.seg.wide.wrap{flex-wrap:wrap;} .seg.wide.wrap button{flex:1 1 30%;}
.vtile{display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px 6px 10px; border:1px solid var(--hair); border-radius:10px; background:var(--surface); color:var(--ink); font-size:12.5px; font-weight:600;}
.vtile .icon{width:22px; height:22px; color:var(--accent);}
.vtile:hover{border-color:var(--accent); background:var(--accent-tint);}
/* Discord : la pastille dans la barre du haut, et une ligne sur l'accueil */
.dsc-svg{width:17px; height:13px; fill:#5865F2; flex:none;}
.dsc-pill{display:inline-flex; align-items:center; gap:7px; height:32px; padding:0 11px; margin-right:6px; border:1px solid var(--hair); border-radius:999px; background:var(--surface); color:var(--ink); text-decoration:none; font-size:13px; font-weight:600; white-space:nowrap; transition:border-color .15s, background .15s;}
.dsc-pill:hover{border-color:#5865F266; background:#5865F212;}
.dsc-pill em{font-style:normal; font-size:10px; font-weight:700; letter-spacing:.04em; padding:2px 5px; border-radius:999px; background:#5865F21A; color:#4752C4;}
.dsc-pill em:empty{display:none;}
html[data-theme="dark"] .dsc-pill em{color:#9EA6FF;}
@media (max-width:900px){ .dsc-pill span, .dsc-pill em{display:none;} .dsc-pill{width:32px; padding:0; justify-content:center;} }
.intro-dsc{display:flex; align-items:center; gap:12px; margin:8px 16px 0; padding:11px 14px; border:1px solid var(--hair); border-radius:11px; color:var(--ink-soft); text-decoration:none; font-size:12.5px; line-height:1.45; transition:border-color .15s, background .15s;}
.intro-dsc:hover{border-color:#5865F266; background:#5865F20D;}
.intro-dsc .dsc-svg{width:24px; height:18px;}
.intro-dsc b{display:block; color:var(--ink); font-size:13px;}
/* ---------- Le plan de la maison, sur l'image ---------- */
.hplan{position:absolute; left:10px; bottom:10px; z-index:4; display:flex; flex-direction:column; gap:7px; padding:8px; max-width:216px; border-radius:12px; background:var(--surface); color:var(--ink); box-shadow:0 0 0 1px var(--hair), 0 10px 26px rgba(10,10,20,.16); font-size:12px; user-select:none;}
.stage.playing .hplan, .stage.final .hplan{display:none;}
.hp-h{display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
.hp-tog{display:inline-flex; align-items:center; gap:6px; padding:4px 7px; border:0; border-radius:7px; background:transparent; color:var(--ink); font:inherit; font-weight:600;}
.hp-tog .icon{width:14px; height:14px; color:var(--accent);} .hp-tog span{color:var(--ink-soft); font-weight:500;}
.hp-tog:hover{background:var(--overlay-hover);}
.hp-tabs{display:flex; gap:2px; padding:2px; border-radius:8px; background:var(--chip-bg);}
.hp-tabs button{padding:3px 6px; border:0; border-radius:6px; background:transparent; color:var(--ink-soft); font:inherit; font-size:11.5px; font-weight:600; white-space:nowrap;}
.hp-tabs button:hover{color:var(--ink);} .hp-tabs button.on{background:var(--accent); color:#fff;}
.hp-svg{display:block; width:200px; height:auto; cursor:crosshair;}
.hp-floor{fill:var(--surface-soft-2); stroke:var(--hair); stroke-width:1.5;}
.hp-wall{stroke:var(--ink-soft); stroke-width:2.4; stroke-linecap:round; pointer-events:none;}
.hp-stair{fill:var(--chip-bg); pointer-events:none;} .hp-step{stroke:var(--hair); stroke-width:1; pointer-events:none;}
.hp-room{cursor:pointer;} .hp-room rect{fill:transparent; transition:fill .12s;}
.hp-room text{fill:var(--ink-soft); font-size:9.5px; font-weight:600; text-anchor:middle; pointer-events:none;}
.hp-room:hover rect{fill:var(--accent-tint);} .hp-room:hover text{fill:var(--ink);}
.hp-room.on rect{fill:var(--accent-tint); stroke:var(--accent); stroke-width:1.4;} .hp-room.on text{fill:var(--accent-ink);}
.hp-char{fill:var(--c); stroke:var(--surface); stroke-width:1.4; pointer-events:none;}
.hp-cam{pointer-events:none;} .hp-cam path{fill:rgba(34,160,107,.28);} .hp-cam circle{fill:var(--accent); stroke:var(--surface); stroke-width:1.4;}
.hp-f{display:flex; flex-direction:column; align-items:stretch; gap:5px; max-width:200px;}
.hp-f span{color:var(--ink-soft); font-size:10.5px; line-height:1.3;}
.hp-bring{flex:none; justify-content:center; display:inline-flex; align-items:center; gap:5px; padding:5px 8px; border:1px solid var(--hair); border-radius:7px; background:var(--surface); color:var(--ink); font:inherit; font-size:11.5px; font-weight:600;}
.hp-bring .icon{width:12px; height:12px; color:var(--ink-soft);} .hp-bring:hover{border-color:var(--accent); color:var(--accent-ink);}
@media (max-width:700px){ .hp-svg{width:170px;} .hp-f span{display:none;} }
html[data-theme="dark"] .pose-t img{background:#262930;}

/* =====================================================================
   L'ACCUEIL : MES STORYBOARDS (même charpente que Raging Page et Raging Draw)
===================================================================== */
body.on-home #app{display:none;}
body:not(.on-home) #home{display:none;}
body.on-home{overflow:auto; background:var(--backdrop);}
#home{min-height:100vh; display:flex; flex-direction:column; background:var(--backdrop); color:var(--ink);}
.bh-top{position:sticky; top:0; z-index:5; height:60px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 24px; background:var(--surface); box-shadow:0 1px 0 var(--hair);}
.bh-brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink);}
.bh-brand .bh-logo{border-radius:8px;} .bh-brand .mm-word{font-size:34px;}
.bh-links{display:flex; align-items:center; gap:4px;}
.bh-l{display:inline-flex; align-items:center; gap:8px; padding:7px 10px; border-radius:7px; color:var(--ink); text-decoration:none; font-size:13.5px; font-weight:500; white-space:nowrap;}
.bh-l svg{width:20px; height:20px; border-radius:5px; flex:none;}
.bh-l:hover{background:var(--overlay-hover);}
.bh-l.bh-guide svg{width:15px; height:15px; border-radius:0; color:var(--ink-soft);}
.bh-sep{width:1px; height:22px; background:var(--hair); margin:0 6px;}
.bh-links .dsc-pill{margin:0 6px 0 2px;}
.bh-body{flex:1; width:100%; max-width:1180px; margin:0 auto; display:grid; grid-template-columns:268px 1fr; gap:30px; padding:28px 24px 48px;}
.bh-side{display:flex; flex-direction:column; gap:14px;}
.bh-new{width:100%; justify-content:center; height:46px; font-size:15px; border-radius:10px;}
.bh-navs{display:flex; flex-direction:column; gap:2px;}
.bh-nav{display:flex; align-items:center; gap:12px; padding:10px 12px; border:0; border-radius:9px; background:transparent; color:var(--ink); text-decoration:none; font:inherit; font-size:14px; font-weight:500; text-align:left;}
.bh-nav:hover{background:var(--overlay-hover);}
.bh-nav .icon{width:17px; height:17px; flex:none; color:var(--ink-soft);}
.bh-nav span{display:flex; flex-direction:column;} .bh-nav small{font-size:12px; color:var(--ink-soft); font-weight:400; margin-top:1px;}
.bh-nav.sup .icon{color:#D9363E; fill:#D9363E;}
.bh-nav.dsc .dsc-svg{width:17px; height:13px;}
.bh-tip{display:flex; gap:9px; margin:6px 12px 0; font-size:12.5px; line-height:1.5; color:var(--ink-soft);}
.bh-tip .icon{width:15px; height:15px; flex:none; margin-top:2px;}
.bh-about{margin-top:auto; padding:18px 12px 0; border-top:1px solid var(--hair);}
.bh-about .mm-word{font-size:22px;} .bh-about p{margin:8px 0 0; font-size:13px; line-height:1.5; color:var(--ink-soft);}
.bh-main-h{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:18px;}
.bh-main-h h1{margin:0; font-size:28px; font-weight:700; letter-spacing:-.02em;}
.bh-count{padding:2px 9px; border-radius:999px; background:var(--chip-bg); color:var(--ink-soft); font-size:12.5px; font-weight:600;}
.bh-resume{margin-left:auto; display:inline-flex; align-items:center; gap:8px; padding:7px 10px 7px 12px; border:0; border-radius:8px; background:transparent; color:var(--accent-2); font:inherit; font-size:13.5px; max-width:360px;}
.bh-resume span{color:var(--ink-soft); font-weight:500;} .bh-resume b{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .bh-resume .icon{width:14px; height:14px; flex:none;}
.bh-resume:hover{background:var(--accent-tint);}
html[data-theme="dark"] .bh-resume{color:var(--accent-ink);}
.bh-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(232px, 1fr)); gap:16px;}
.bh-card{position:relative; display:flex; flex-direction:column; border:1px solid var(--hair); border-radius:12px; background:var(--surface); box-shadow:var(--shadow-sm); overflow:hidden; transition:border-color .15s, box-shadow .15s, transform .15s;}
.bh-card:hover{border-color:var(--accent-soft); box-shadow:var(--shadow-md); transform:translateY(-2px);}
.bh-open{display:flex; flex-direction:column; padding:0; border:0; background:transparent; color:inherit; font:inherit; text-align:left;}
.bh-img{position:relative; display:block; aspect-ratio:16/9; background:var(--surface-soft-2);}
.bh-img img{display:block; width:100%; height:100%; object-fit:cover;}
.bh-noimg{position:absolute; inset:0; display:grid; place-items:center; opacity:.5;}
.bh-n{position:absolute; left:8px; bottom:8px; padding:2px 8px; border-radius:999px; background:rgba(14,15,18,.72); color:#fff; font-size:11.5px; font-weight:600;}
.bh-t{display:flex; flex-direction:column; gap:3px; padding:11px 13px 13px;}
.bh-t b{font-size:14.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding-right:80px;}
.bh-t small{font-size:12px; color:var(--ink-soft);}
.bh-acts{position:absolute; right:8px; bottom:10px; display:flex; gap:2px; opacity:.0; transition:opacity .12s;}
.bh-card:hover .bh-acts, .bh-card:focus-within .bh-acts{opacity:1;}
@media (hover:none){ .bh-acts{opacity:1;} }
.bh-empty{display:flex; flex-direction:column; align-items:center; gap:12px; padding:70px 20px; border:1px dashed var(--hair); border-radius:14px; background:var(--surface); text-align:center;}
.bh-empty svg{border-radius:12px;} .bh-empty p{max-width:380px; margin:6px 0; color:var(--ink-soft); line-height:1.55;}
@media (max-width:980px){ .bh-l span{display:none;} .bh-l{padding:7px;} }
@media (max-width:760px){
  .bh-body{grid-template-columns:1fr; padding:18px 16px 40px; gap:20px;}
  .bh-top{padding:0 12px; gap:8px;} .bh-brand .mm-word{font-size:24px;} .bh-brand .bh-logo{width:32px; height:32px;}
  .bh-links .bh-l, .bh-sep{display:none;} .bh-links .bh-l:first-child{display:inline-flex;}
  .dsc-pill span, .dsc-pill em{display:none;}
  .bh-about{display:none;} .bh-resume{margin-left:0;}
}
@media (max-width:760px){ #home .lang-flags{display:flex;} #home .lang-flag{padding:5px 8px;} }
/* les trois outils, en petit (comme dans Raging Page et Raging Draw) */
.app-trio{display:inline-flex; align-items:center; gap:2px; padding:3px; margin-left:4px; border-radius:10px; background:var(--chip-bg);}
.app-trio .at-i{display:flex; padding:3px; border-radius:7px; opacity:.72; transition:opacity .12s, background .12s;}
.app-trio a.at-i:hover{opacity:1; background:var(--surface); box-shadow:var(--shadow-sm);}
.app-trio .at-i.on{opacity:1; background:var(--surface); box-shadow:var(--shadow-sm);}
.app-trio svg{width:24px; height:24px; display:block; border-radius:6px;}
/* les trois outils, en petit (comme dans Raging Page et Raging Draw) */
.app-trio{display:inline-flex; align-items:center; gap:2px; padding:3px; margin-left:4px; border-radius:10px; background:var(--chip-bg);}
.app-trio .at-i{display:flex; padding:3px; border-radius:7px; opacity:.72; transition:opacity .12s, background .12s;}
.app-trio a.at-i:hover{opacity:1; background:var(--surface); box-shadow:var(--shadow-sm);}
.app-trio .at-i.on{opacity:1; background:var(--surface); box-shadow:var(--shadow-sm);}
.app-trio svg{width:24px; height:24px; display:block; border-radius:6px;}

/* l'astuce de l'accueil : un petit encart compact, aux couleurs de l'outil (2 lignes au plus) */
.bh-tip{margin-top:12px; padding:8px 10px; gap:8px; border:1px solid var(--hair); border-radius:8px; background:var(--surface); align-items:flex-start;}
.bh-tip:hover{border-color:var(--accent);}
.bh-tip .icon{width:14px; height:14px; margin-top:1px; color:var(--accent);}
.bh-tip > span{display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; font-size:11.5px; line-height:1.4; color:var(--ink-soft); margin:0;}
.bh-tip .tip-k{font-size:9.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin-right:6px;}

/* ---------- L'immersion : tout l'atelier en plein écran, l'image au centre, les outils resserrés ---------- */
#app:fullscreen{height:100vh; width:100vw; background:#0B0C0E;}
body.fs-fake #app{position:fixed; inset:0; z-index:50; height:auto;}
body.imm .topbar{display:none;}
body.imm .center{background:#0E0F12;} body.imm .stage-area{background:none;}
body.imm .stage-area{padding:10px 16px 8px;}
body.imm .stage-area .shot-head{color:#E9ECEF;}
body.imm .sh-of{color:#9DA1AB;}
body.imm .stage{box-shadow:0 20px 50px -18px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.06);}
body.imm .rail{width:62px;}
body.imm .rail-brand{padding:0; justify-content:center;}
body.imm .rail-brand .mm-word, body.imm .rail-project, body.imm .rail-bottom, body.imm .rail-item .lbl, body.imm .rail-item .rb{display:none;}
body.imm .rail-nav{padding:4px 8px 12px;}
body.imm .rail-group{height:1px; padding:0; margin:10px 6px; font-size:0; background:var(--hair-dark);}
body.imm .rail-item{justify-content:center; padding:10px 0;}
body.imm .rail-item::before{left:-8px;}
body.imm .hint{display:none;}
body.imm.imm-clean .rail, body.imm.imm-clean .side, body.imm.imm-clean .board, body.imm.imm-clean .under{display:none;}
body.imm.imm-clean .stage-area{padding:10px 18px;}

/* ---------- La barre du haut, comme dans Raging Page et Raging Draw ---------- */
.topbar .btn{border-color:transparent; background:transparent; font-weight:500; padding:7px 11px; font-size:14px; white-space:nowrap; border-radius:8px;}
.topbar .btn:hover:not(:disabled){background:var(--overlay-hover); border-color:transparent;}
.topbar .btn .icon{color:var(--ink-soft);}
.topbar .btn:disabled{opacity:.4; cursor:default;}
.topbar .btn.tb-ic{padding:7px 9px;}
.topbar .btn.btn-primary{background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600; padding:8px 15px;}
.topbar .btn.btn-primary:hover{background:var(--accent-h); border-color:var(--accent-h);}
.topbar .btn.btn-primary .icon{color:#fff;}
.topbar .btn.tb-box{border-color:var(--hair); background:var(--surface); box-shadow:var(--shadow-sm); margin:0 2px; gap:6px;}
.topbar .btn.tb-box:hover{border-color:var(--accent-soft); background:var(--surface-soft);}
.topbar .btn.tb-back{display:inline-flex; align-items:center; justify-content:center; gap:7px; width:32px; height:32px; padding:0; border:0; border-radius:999px; background:var(--chip-bg); color:var(--ink); font-size:13.5px; font-weight:600; box-shadow:none;}
.topbar .btn.tb-back .icon{width:14px; height:14px; color:currentColor;}
.topbar .btn.tb-back:hover{background:var(--accent-tint); color:var(--accent-ink);}
html[data-theme="dark"] .topbar .btn.tb-back:hover{color:var(--accent-rail);}
.topbar .tb-title{width:min(240px, 18vw);}
.topbar .save-status{margin-left:0; flex:none;}
@media (max-width:1280px){ .topbar .btn[data-act="full"] .tb-lbl{display:none;} }
.topbar .btn.tb-back .tb-lbl{display:none;}
@media (max-width:1100px){ .topbar .btn.tb-box .tb-lbl{display:none;} }
/* les pièces d'un lieu, toujours en vue : on clique un nom, la caméra y va */
.hp-lbl{display:inline-flex; align-items:center; gap:6px; padding:4px 7px; font-weight:600;} .hp-lbl .icon{width:14px; height:14px; color:var(--accent);}
.hp-chev{width:6px; height:6px; margin:0 1px 2px 2px; border-right:1.6px solid var(--ink-soft); border-bottom:1.6px solid var(--ink-soft); transform:rotate(45deg);} .hp-chev.up{margin-bottom:-2px; transform:rotate(-135deg);}
.hp-rooms{display:flex; flex-wrap:wrap; gap:4px;}
.hp-chip{padding:4px 8px; border:1px solid var(--hair); border-radius:999px; background:var(--surface); color:var(--ink); font:inherit; font-size:11.5px; font-weight:600; white-space:nowrap; cursor:pointer;}
.hp-chip:hover{border-color:var(--accent); color:var(--accent-ink);} .hp-chip.on{border-color:var(--accent); background:var(--accent); color:#fff;}
.hp-tip{display:flex; align-items:center; gap:6px; padding:5px 6px 5px 9px; border-radius:8px; background:var(--accent-tint); color:var(--accent-ink); font-size:11px; font-weight:600; line-height:1.3;}
.hp-tip button{flex:none; display:inline-flex; padding:3px; border:0; border-radius:5px; background:transparent; color:inherit;} .hp-tip button .icon{width:11px; height:11px;} .hp-tip button:hover{background:var(--overlay-hover);}
.hplan{max-width:min(330px, calc(100% - 20px));}
body.imm-clean .hplan{display:none;}
/* les mouvements de caméra, par famille */
.angs.moves .mv-g{grid-column:1/-1; margin:8px 0 1px; color:var(--ink-soft); font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;}
.angs.moves .mv-g:first-child{margin-top:0;}
.mv-tip{display:flex; gap:7px; align-items:flex-start; padding:8px 10px; border-radius:9px; background:var(--accent-tint); color:var(--accent-ink);}
.mv-tip .icon{flex:none; width:14px; height:14px; margin-top:1px;}
/* les plans tout prêts : une ligne par recette, ce qu'elle raconte en dessous */
.recipes{display:grid; grid-template-columns:1fr 1fr; gap:6px;}
.rcp{display:flex; align-items:center; gap:8px; padding:7px 8px; border:1px solid var(--hair); border-radius:9px; background:var(--surface); color:var(--ink); font:inherit; text-align:left; cursor:pointer;}
.rcp .sg{flex:none; width:30px; height:19px; color:var(--ink-soft);}
.rcp span{display:flex; flex-direction:column; gap:1px; min-width:0;}
.rcp b{font-size:11.5px; font-weight:600; line-height:1.2;}
.rcp small{color:var(--ink-soft); font-size:10px; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.rcp:hover{border-color:var(--accent);} .rcp:hover .sg{color:var(--accent);}
/* les repères pro, par-dessus l'image */
.tech{position:absolute; inset:0; pointer-events:none; overflow:hidden;}
.tech .safe{position:absolute; border:1px dashed #ffffff8c; box-shadow:0 0 0 .5px #00000022;}
.tech .sa{inset:5%;} .tech .st{inset:10%; border-style:dotted; border-color:#ffffff66;}
.tech .ctr{position:absolute; left:50%; top:50%; width:18px; height:18px; margin:-9px 0 0 -9px; background:linear-gradient(#ffffffb3,#ffffffb3) center/1px 100% no-repeat, linear-gradient(#ffffffb3,#ffffffb3) center/100% 1px no-repeat;}
.tech .hz{position:absolute; left:-10%; right:-10%; height:0; border-top:1.5px solid #f2c94ccc; box-shadow:0 0 0 .5px #0000002a;}
.tech .hud{position:absolute; left:10px; top:10px; display:flex; gap:5px; flex-wrap:wrap; font:600 10.5px/1 var(--font, inherit); font-variant-numeric:tabular-nums;}
.tech .hud > *{padding:4px 6px; border-radius:5px; background:#14161cb3; color:#fff;} .tech .hud b{background:var(--accent);}
.stage.playing .tech, .stage.final .tech{display:none !important;}
/* la transition pendant la lecture (fondu, fondu au noir, flash) */
.play-fx{position:absolute; inset:0; z-index:3; opacity:0; pointer-events:none;}
.sw-hospital{background:linear-gradient(160deg, #F2F4F3 0 30%, #DCE6E3 30% 70%, #BFC8C7 70%);}
.sw-metro{background:linear-gradient(160deg, #E9ECEE 0 25%, #1A1E25 25% 45%, #2E5A8C 45% 62%, #4A4E55 62%);}
.sw-bar{background:linear-gradient(160deg, #2A2422 0 30%, #6E3A2E 30% 60%, #5A3A26 60%);}
/* le moment de la journée, sous l'image, à côté des boutons de déplacement */
.tod-box{gap:2px;}
.tod-b{display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 11px; border:0; border-radius:8px; background:transparent; color:var(--ink-soft); font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; transition:background .12s, color .12s;}
.tod-b .icon{width:14px; height:14px;}
.tod-b:hover{background:var(--overlay-hover); color:var(--ink);}
.tod-b.on[data-v="day"]{background:#F3D46B; color:#3A2E08;}
.tod-b.on[data-v="dusk"]{background:#E58A5A; color:#fff;}
.tod-b.on[data-v="night"]{background:#2B3A66; color:#fff;}
@media (max-width:1100px){ .tod-b span{display:none;} .tod-b{padding:0 9px;} }
/* le visage : sept expressions, chacune avec son petit dessin */
.faces{display:grid; grid-template-columns:repeat(4, 1fr); gap:6px;}
.face-t{display:flex; flex-direction:column; align-items:center; gap:3px; padding:7px 2px 6px; border:1px solid var(--hair); border-radius:9px; background:var(--surface); color:var(--ink-soft); font:inherit; font-size:10.5px; font-weight:600; cursor:pointer;}
.face-t:hover{border-color:var(--accent); color:var(--ink);}
.face-t.on{border-color:var(--accent); background:var(--accent-tint); color:var(--accent-ink); box-shadow:inset 0 0 0 1px var(--accent);}
.face-g{width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round;}
.face-g .e{fill:currentColor; stroke:none;}
/* les objets à poser : une vignette 3D de chacun */
.oadd{display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; margin-bottom:6px;}
.otile{display:flex; flex-direction:column; align-items:stretch; gap:3px; padding:4px 4px 6px; border:1px solid var(--hair); border-radius:9px; background:var(--surface); color:var(--ink); font:inherit; font-size:11px; font-weight:600; text-align:center; cursor:pointer;}
.otile img{width:100%; aspect-ratio:5/4; object-fit:cover; border-radius:6px; background:var(--surface-soft-2);}
.otile:hover{border-color:var(--accent);}
/* le nom du personnage */
.name-f{display:flex; flex-direction:column; gap:4px; margin:10px 0 2px;}
/* « Ton propre lieu » : importer la photo de son vrai décor */
#view.drop{outline:3px dashed var(--accent); outline-offset:-6px;}
/* les couleurs d'un personnage */
.cols{margin:2px 0 12px; border:1px solid var(--hair); border-radius:10px; background:var(--surface-soft);}
.cols summary{display:flex; align-items:center; gap:7px; padding:8px 10px; cursor:pointer; font-size:12.5px; font-weight:500; color:var(--ink-soft); list-style:none;}
.cols summary::-webkit-details-marker{display:none;}
.cols summary::after{content:''; margin-left:4px; width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); transition:transform .15s;}
.cols[open] summary::after{transform:rotate(-135deg);}
.cols summary .icon{width:15px; height:15px; color:var(--accent-ink);}
.cols summary > span{flex:1;}
.cols .lnk{margin:0 10px 10px; padding:0; border:0; background:none; font-size:12px; color:var(--accent-ink); text-decoration:underline; cursor:pointer;}
.col-r{display:flex; flex-direction:column; gap:4px; padding:0 10px 8px;}
.col-r > span{font-size:12px; color:var(--ink-soft);}
.sws{display:flex; flex-wrap:wrap; gap:3px;}
.swc{position:relative; width:19px; height:19px; flex:none; padding:0; border-radius:50%; border:1px solid rgba(0,0,0,.18); background:var(--c); cursor:pointer;}
.swc:hover{transform:scale(1.12);}
.swc.on{box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--accent);}
.swc:focus-visible{outline:none; box-shadow:var(--focus-ring);}
.swc.any{background:conic-gradient(#e0533d, #e3a33a, #5e7f6a, #3f6e7a, #7a5a9a, #e0533d); overflow:hidden;}
.swc.any input{position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; padding:0; border:0;}

/* ---------- R20 : les volets dans la DA de Raging Studio (comme Raging Draw) ----------
   Un titre de section court, en gras, sans majuscules forcées ; une ligne grise d'information sous le titre du volet ;
   plus de paragraphes d'explication (ils sont dans les infobulles). */
.fly-lbl{margin:18px 0 9px; font-size:13.5px; font-weight:600; letter-spacing:0; text-transform:none; color:var(--ink);}
.fly-lbl .cnt{font-size:12px; font-weight:500; color:var(--ink-soft);}
.lbl-sub{font-style:normal; font-weight:400; font-size:12px; color:var(--ink-soft);}
.side .pb > .fly-lbl:not(:first-child){margin-top:18px; padding-top:16px;}
.side .ph small{font-size:12.5px; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
/* « Ma photo » : une ligne, comme « Commencer avec une photo » dans Draw */
.myplace{width:100%; display:flex; align-items:center; gap:11px; margin:2px 0 4px; padding:10px 12px; border:1px solid var(--hair); border-radius:10px; background:var(--surface); color:var(--ink); font:inherit; text-align:left; cursor:pointer;}
.myplace:hover{border-color:var(--accent);}
.myplace.on{border-color:var(--accent); background:var(--accent-tint);}
.myplace > .icon{width:15px; height:15px; margin-left:auto; color:var(--ink-soft);}
.mp-ic{flex:none; width:32px; height:32px; display:grid; place-items:center; border-radius:9px; background:var(--accent-tint); color:var(--accent);}
.mp-ic .icon{width:16px; height:16px;}
.mp-t{display:flex; flex-direction:column; min-width:0;}
.mp-t b{font-size:13.5px; font-weight:600;}
.mp-t small{font-size:12px; color:var(--ink-soft);}
/* une indication courte : une icône et une ligne */
.empty-n{display:flex; align-items:center; gap:9px; margin:4px 0; padding:10px 12px; border-radius:10px; background:var(--surface-soft); font-size:12.5px; line-height:1.4; color:var(--ink-soft);}
.empty-n .icon{flex:none; width:16px; height:16px; color:var(--accent);}
.meta-n{margin:0; font-size:12.5px; color:var(--ink-soft);}
.ftog > span small{display:block; font-size:11.5px; color:var(--ink-soft);}
/* l'aide : des lignes « geste — effet », comme une carte de raccourcis */
.kv{display:grid; grid-template-columns:auto 1fr; gap:0; margin:0; font-size:12.5px;}
.kv dt, .kv dd{margin:0; padding:6px 0; border-bottom:1px solid var(--hair);}
.kv dt{padding-right:12px; color:var(--ink); font-weight:500; white-space:nowrap;}
.kv dd{color:var(--ink-soft); text-align:right;}
.kv dt:last-of-type, .kv dd:last-of-type{border-bottom:0;}
.how{gap:8px; font-size:12.5px;}
.how b{display:inline; margin-right:5px;}
.board-tip b{display:block; color:var(--ink); font-weight:600;}
.rcp{padding:8px 9px;}
.rcp b{font-size:12px;}
/* les sous-groupes (debout, assis… / les classiques, l'objectif…) : même famille, un cran plus discrets */
.pose-g, .mv-g{text-transform:none !important; letter-spacing:0 !important; font-size:12px !important; font-weight:600 !important; color:var(--ink-soft) !important;}
.side .pb > .angs.moves:first-child, .side .pb > .angs.moves{margin-top:14px;}
.kv{grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr);}
.kv dt{white-space:normal;}
.kv dd{text-align:left;}
.who-n{font-size:12px; font-weight:500; margin-left:5px;}
.side .pose-g{font-size:13.5px !important; color:var(--ink) !important;}
/* la barre d'aide sous l'image garde toujours la même place : un texte plus long se coupe au lieu de passer à la ligne
   (sinon l'image se redimensionnait au milieu d'un geste) */
.hint{flex:1 1 220px; min-width:0; white-space:nowrap;}
.hint > span, .hint{overflow:hidden; text-overflow:ellipsis;}
/* « Mon lieu » : les motifs (sol, murs, plafond), en petites vignettes */
.txs{display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; margin:2px 0 8px;}
.tx{display:flex; flex-direction:column; align-items:stretch; gap:3px; padding:3px 3px 5px; border:1px solid var(--hair); border-radius:9px; background:var(--surface); color:var(--ink); font:inherit; font-size:10.5px; font-weight:600; text-align:center; cursor:pointer; min-width:0;}
.tx i{display:flex; align-items:center; justify-content:center; aspect-ratio:1; border-radius:6px; background:var(--surface-soft-2) center/cover; color:var(--ink-soft);}
.tx i .icon{width:16px; height:16px;}
.tx span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.tx:hover{border-color:var(--accent);} .tx.on{border-color:var(--accent); background:var(--accent-tint); box-shadow:var(--focus-ring);}
.mm-sws{margin:0 0 6px;}
.mm-p{font-size:12.5px; color:var(--ink-soft); line-height:1.45; margin:8px 0;}
.mm-p .lnk{padding:0; border:0; background:none; font:inherit; color:var(--accent-ink); text-decoration:underline; cursor:pointer;}
.mm-new{width:100%; justify-content:center;}
.mm-sub{margin:10px 0 6px; font-size:12px; font-weight:600; color:var(--ink-soft);}
.mm-row{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:6px 0 8px;}
.mm-row > span{font-size:12.5px; color:var(--ink-soft);}
.swc.none{background:linear-gradient(135deg, transparent 44%, var(--ink-soft) 44%, var(--ink-soft) 56%, transparent 56%), var(--surface);}
.pb .seg.wide + .seg.wide{margin-top:6px;}


/* =====================================================================
   LE BANC DE MONTAGE : les plans en colonne à gauche, l'image au centre (bien plus grande, donc plus nette),
   l'inspecteur à onglets à droite. La barre du haut porte le logo.
===================================================================== */
#app{display:block;}
.main-col{height:100vh;}
.tb-brand{display:flex; align-items:center; gap:9px; flex:none; padding:0 6px 0 2px; text-decoration:none;}
.tb-brand:hover{opacity:.85;}
.tb-brand .rail-logo{border-radius:7px;}
.tb-brand .mm-word{font-size:23px;}
/* la colonne des plans */
.shots{width:232px; flex:none; display:flex; flex-direction:column; min-height:0; padding:12px 12px 6px; background:var(--surface); box-shadow:1px 0 0 var(--hair); z-index:2;}
.shots .board-h{flex-wrap:nowrap; margin-bottom:8px; gap:8px;}
.shots .board-h > b{font-size:11px;}
.shots .board-h2{display:flex; gap:6px; margin-bottom:10px;}
.shots .board-h2 .seg{flex:1; min-width:0;}
.shots .board-h2 .seg button{flex:1; justify-content:center; padding-left:6px; padding-right:6px;}
.shots .board-h2 .seg button .icon{display:none;}
.shots .board-h .btn-play{height:30px; width:30px; padding:0; justify-content:center; font-size:0; gap:0;}
.shots .board-h > span{white-space:nowrap;}
.btn.sq{width:30px; height:30px; padding:0; justify-content:center;}
.shots .cards{flex:1; min-height:0; flex-direction:column; align-items:stretch; overflow-x:hidden; overflow-y:auto; gap:8px; padding:2px 2px 10px; overscroll-behavior:contain;}
.shots .sc-wrap{display:block;}
.shots .shot-card{width:100%;}
.shots .shot-card:hover{transform:none;}
.shots .shot-card.drop-l{box-shadow:0 -4px 0 var(--accent);} .shots .shot-card.drop-r{box-shadow:0 4px 0 var(--accent);}
.shots .add-col{width:100%; gap:6px;}
.shots .add-shot{flex:none; padding:12px 6px;}
.shots .board-tip{align-self:stretch; max-width:none; margin:2px 2px 0; font-size:12px;}
/* l'inspecteur : ses onglets en haut, le volet dessous */
.side{width:360px;}
.tabs{flex:none; display:grid; grid-template-columns:repeat(6, 1fr); gap:2px; padding:6px 6px 5px; border-bottom:1px solid var(--hair);}
.tab{position:relative; display:flex; flex-direction:column; align-items:center; gap:3px; min-width:0; padding:7px 2px 6px; border:0; border-radius:8px; background:transparent; color:var(--ink-soft); font:inherit; font-size:10.5px; font-weight:600; cursor:pointer;}
.tab > *{pointer-events:none;}
.tab .icon{width:17px; height:17px;}
.tab span{max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.tab:hover{background:var(--overlay-hover); color:var(--ink);}
.tab:focus-visible{outline:none; box-shadow:var(--focus-ring);}
.tab.active{background:var(--accent-tint); color:var(--accent-2);}
html[data-theme="dark"] .tab.active{color:var(--accent-ink);}
.tab .tb-n{position:absolute; top:3px; right:5px; min-width:16px; padding:0 4px; border-radius:999px; background:var(--accent); color:#fff; font-size:9.5px; font-style:normal; line-height:15px; text-align:center;}
.side-in{flex:1; min-height:0; display:flex; flex-direction:column;}
@media (max-width:1380px){ .shots{width:204px;} .side{width:332px;} }
@media (max-width:1180px){ .shots{width:168px;} .shots .sc-t{display:none;} .tb-brand .mm-word{display:none;} }
@media (max-width:900px){
  #app, .main-col{height:auto;}
  .work{flex-direction:column;}
  .center{order:1;} .shots{order:2; width:100%; box-shadow:0 -1px 0 var(--hair);} .side{order:3; width:100%;}
  .shots .cards{flex-direction:row; overflow-x:auto; overflow-y:visible;}
  .shots .sc-wrap{flex:none;} .shots .shot-card{width:188px;} .shots .sc-t{display:block;} .shots .add-col{width:138px; flex:none;}
  .tabs{position:sticky; top:0; z-index:6; background:var(--surface); grid-template-columns:repeat(11, minmax(54px, 1fr)); overflow-x:auto;}
}
@media (max-width:480px){ .shots .shot-card{width:156px;} }

/* ---------- La visite guidée : on éclaire une partie de l'atelier, une bulle explique ---------- */
.tour{position:fixed; inset:0; z-index:70; animation:fade .15s ease;}
.tour-veil{position:absolute; inset:0; background:rgba(20,22,28,.5);}
.tour-hole{position:absolute; border-radius:12px; box-shadow:0 0 0 2px var(--accent), 0 0 0 9999px rgba(20,22,28,.5); pointer-events:none; transition:left .2s ease, top .2s ease, width .2s ease, height .2s ease;}
.tour-card{position:absolute; width:min(330px, calc(100vw - 28px)); padding:16px 16px 12px; background:var(--surface); color:var(--ink); border-radius:14px; box-shadow:0 18px 48px rgba(10,10,20,.3), 0 0 0 1px var(--hair); animation:pop .2s cubic-bezier(.2,.8,.3,1);}
.tour-h{display:flex; flex-direction:column; gap:6px;}
.tour-h b{font-size:15.5px; font-weight:700; letter-spacing:-.01em; line-height:1.3;}
.tour-n{align-self:flex-start; padding:2px 8px; border-radius:999px; background:var(--accent-tint); color:var(--accent-2); font-size:11px; font-weight:700; font-variant-numeric:tabular-nums;}
html[data-theme="dark"] .tour-n{color:var(--accent-ink);}
.tour-card p{margin:8px 0 0; font-size:13.5px; line-height:1.55; color:var(--ink-soft);}
.tour-dots{display:flex; gap:4px; margin:14px 0 12px;}
.tour-dots i{flex:1; height:3px; border-radius:2px; background:var(--hair);}
.tour-dots i.on{background:var(--accent);}
.tour-f{display:flex; align-items:center; gap:6px;}
.tour-f .grow{flex:1;}
.tour-f .btn{gap:5px;}
.tour-f .btn .icon{width:13px; height:13px;}
.tour-skip{border-color:transparent; background:transparent; color:var(--ink-soft);}
.tour-skip:hover{color:var(--ink);}
/* dans Aide : l'entrée de la visite */
.tour-cta{display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; margin:2px 0 14px; padding:12px; border-radius:12px; background:var(--accent-tint); color:var(--accent-ink);}
.tour-cta > .icon{flex:none; width:18px; height:18px; color:var(--accent);}
.tour-cta > span{flex:1; min-width:170px; font-size:12.5px; line-height:1.45;}
.tour-cta > span b{display:block; font-size:13px; color:var(--ink);}
.tour-cta .btn{margin-left:auto;}
/* la visite guidée, en haut à droite : bien visible pour les nouveaux, discrète pour les autres */
.topbar .btn.tb-tour{gap:6px; margin-right:6px; padding:6px 12px 6px 10px; border-radius:999px; background:var(--accent-tint); color:var(--accent-2); font-size:13.5px; font-weight:600;}
.topbar .btn.tb-tour .icon{color:var(--accent);}
.topbar .btn.tb-tour:hover{background:var(--accent-soft); color:var(--accent-ink);}
html[data-theme="dark"] .topbar .btn.tb-tour{color:var(--accent-ink);}
html[data-theme="dark"] .topbar .btn.tb-tour:hover{background:var(--accent-soft); color:#fff;}
@media (max-width:1180px){ .topbar .btn.tb-tour{padding:7px 9px;} }
/* le frigo : fermé ou ouvert, rempli ou non, et qui l'ouvre */
.fridge-c{margin:12px 0 4px; padding:10px 12px 12px; border:1px solid var(--hair); border-radius:12px; background:var(--surface-soft);}
.fridge-h{display:flex; align-items:center; gap:7px; margin-bottom:8px; font-size:13px;}
.fridge-h .icon{width:15px; height:15px; color:var(--accent);}
.fridge-c .ftog{margin:8px 0 6px;}
.fridge-c .ftog small{display:block; font-size:11px; color:var(--ink-soft);}
.fridge-by{width:100%; justify-content:center;}
.fridge-l{margin:12px 0 6px; font-size:12px; font-weight:600; color:var(--ink-soft);}
.fridge-c .cars{margin:0;}