/* ===== Atelier — ajouts « en direct » et finitions ===== */

/* Statut de connexion + personnes en ligne */
.stat{display:inline-flex;align-items:center;gap:7px;color:var(--mu);font-size:12px;padding:5px 11px;border-radius:99px;background:var(--hov)}
.stat i{width:8px;height:8px;border-radius:50%;background:#9aa0ad;transition:background .3s}
.stat[data-s=ok] i{background:#2ec55f}
.stat[data-s=sync] i{background:#ffa04d;animation:pulse 1s infinite}
.stat[data-s=err] i{background:#ff5555;animation:pulse .8s infinite}
@keyframes pulse{50%{opacity:.35;transform:scale(.75)}}
#who{display:flex;align-items:center;padding-left:6px}
.av{width:28px;height:28px;padding:0;border-radius:50%;border:2px solid var(--pn);margin-left:-7px;color:#fff;font-weight:700;font-size:12px;transition:transform .15s}
.av:first-child{margin-left:0}
.av:hover{transform:translateY(-2px);z-index:1}
.av.me{cursor:pointer;outline:2px solid var(--ac);outline-offset:1px}
.more{margin-left:6px;color:var(--mu);font-size:12px}

/* Curseurs des autres personnes (taille constante, quel que soit le zoom) */
#cursors{position:absolute;left:0;top:0;transform-origin:0 0;pointer-events:none;z-index:9000}
#tools{z-index:9500}
.rc{position:absolute;left:0;top:0;transform-origin:0 0;transition:transform .12s linear,opacity .3s;will-change:transform}
.rc.hid{opacity:0}.rc.idle{opacity:.35}
.rc svg{display:block;filter:drop-shadow(0 1px 2px rgba(0,0,0,.3))}
.rc path{fill:var(--cc)}
.rc span{position:absolute;left:14px;top:18px;background:var(--cc);color:#fff;border-radius:7px;padding:2px 8px;font-size:12px;font-weight:600;white-space:nowrap;box-shadow:0 2px 6px rgba(0,0,0,.2)}

/* Éléments : apparition, déplacement fluide, « soulevé » pendant le glisser */
.it{transition:box-shadow .15s,transform .15s}
.it.ani,.it.lv{transition:left .14s ease-out,top .14s ease-out,width .14s ease-out,height .14s ease-out,box-shadow .15s,transform .15s}
.it.lv{transition-timing-function:linear;transition-duration:.07s}
.it.lift{box-shadow:0 18px 40px rgba(20,24,40,.28)!important;transform:scale(1.012);cursor:grabbing!important}
.it.pop{animation:pop .4s cubic-bezier(.2,.9,.3,1.25) backwards}
.it.out{opacity:0;transform:scale(.9);transition:opacity .2s,transform .2s}
@keyframes pop{0%{transform:scale(.82);opacity:0}100%{transform:scale(1);opacity:1}}
.image{background:var(--hov);border-radius:4px}

/* « Tout voir » et boutons de zoom : mouvement doux */
#view.smooth{transition:background-position .45s cubic-bezier(.2,.8,.2,1),background-size .45s cubic-bezier(.2,.8,.2,1)}
#view.smooth #world,#view.smooth #cursors{transition:transform .45s cubic-bezier(.2,.8,.2,1)}

/* Boutons, messages */
button{transition:background .15s,transform .1s}
button:active{transform:scale(.96)}
#toast{animation:tin .25s ease}
@keyframes tin{from{opacity:0;transform:translate(-50%,10px)}}

/* Dépôt de fichiers */
#drop{position:fixed;inset:12px;z-index:35;display:grid;place-items:center;border:3px dashed var(--ac);border-radius:22px;background:rgba(66,98,255,.07);color:var(--ac);font:600 20px "Segoe UI",system-ui,sans-serif;opacity:0;pointer-events:none;transition:opacity .15s}
#drop.on{opacity:1}

/* Écran d'ouverture */
#boot{position:fixed;inset:0;z-index:50;display:grid;place-content:center;justify-items:center;gap:14px;background:var(--bg);color:var(--mu);transition:opacity .4s}
#boot.out{opacity:0;pointer-events:none}
#boot .spin{width:30px;height:30px;border-radius:50%;border:3px solid var(--bd);border-top-color:var(--ac);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
.stat em{font-style:normal}

/* Élément en cours de modification par quelqu'un d'autre : verrouillé */
.it.rl{outline:2px solid var(--rc);outline-offset:2px;cursor:not-allowed!important}
.it.rl *{pointer-events:none!important}
.it.rl>.bar,.it.rl>.h{display:none!important}
.it.rl::before{content:attr(data-by);position:absolute;left:-2px;top:-27px;background:var(--rc);color:#fff;font-size:11px;font-weight:600;padding:3px 9px;border-radius:7px;white-space:nowrap;z-index:7;pointer-events:none}