/* ===== widget « code en direct » : éditeur de code + aperçu du site qui se recharge.
   Même principe que cms.css : unités cqw, version coupée dans .wz (carte pastel à bordures). ===== */
.cod{position:absolute;inset:0;container-type:inline-size;background:#1F1F24;overflow:hidden;font-family:Inter,"Figtree",system-ui,sans-serif;color:#C9CCD6;-webkit-font-smoothing:antialiased}
.cod>*{font-size:1.3cqw}
.cod *{box-sizing:border-box}.cod p,.cod h6{margin:0}
.cod-top{position:absolute;left:0;right:0;top:0;height:4.2cqw;display:flex;align-items:center;background:#18181C;border-bottom:.1cqw solid #2C2C33}
.cod-pts{display:flex;gap:.8cqw;padding:0 1.6cqw}.cod-pts i{width:1.1cqw;height:1.1cqw;border-radius:50%;background:#3A3A42}
.cod-ong{height:100%;display:flex;align-items:center;gap:.8cqw;padding:0 1.8cqw;color:#8A8D98;border-right:.1cqw solid #2C2C33}
.cod-ong.on{background:#1F1F24;color:#fff;box-shadow:inset 0 .2cqw #6E8BFF}
.cod-ong b{width:1.1cqw;height:1.1cqw;border-radius:.2cqw;background:#E8743B}.cod-ong.css b{background:#4F8CF5}
.cod-avs{margin-left:auto;display:flex;padding:0 1.4cqw}
.cod-avs i{width:2.4cqw;height:2.4cqw;border-radius:50%;margin-left:-.6cqw;border:.2cqw solid #18181C;display:grid;place-items:center;font:700 1cqw/1 system-ui;font-style:normal;color:#141414}
.cod-act{position:absolute;left:0;top:4.2cqw;bottom:0;width:4cqw;background:#18181C;border-right:.1cqw solid #2C2C33;display:flex;flex-direction:column;align-items:center;gap:1.6cqw;padding-top:1.6cqw;color:#6B6E79}
.cod-act svg{width:1.8cqw;height:1.8cqw}.cod-act .on{color:#fff}
.cod-arbre{position:absolute;left:4cqw;top:4.2cqw;bottom:0;width:17cqw;background:#1B1B20;border-right:.1cqw solid #2C2C33;padding:1.4cqw 0}
.cod-arbre h6{padding:0 1.4cqw;margin-bottom:1cqw;font-size:1.05cqw;font-weight:600;letter-spacing:.08em;color:#8A8D98}
.cod-arbre p{display:flex;align-items:center;gap:.8cqw;padding:.55cqw 1.4cqw .55cqw calc(1.4cqw + var(--n,0) * 1.4cqw);color:#B7BAC5;white-space:nowrap}
.cod-arbre p.on{background:#2A2D3A;color:#fff}
.cod-arbre p i{width:1.1cqw;height:1.1cqw;border-radius:.2cqw;background:var(--c,#6B6E79);flex:none}
.cod-ed{position:absolute;left:21cqw;right:0;top:4.2cqw;bottom:3cqw;padding:1.8cqw 0;font:400 1.55cqw/2.35cqw "JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace}
.cod-l{display:block;white-space:pre;overflow:hidden;transition:background .3s}
.cod-l::before{content:attr(data-n);display:inline-block;width:4.6cqw;text-align:right;padding-right:1.6cqw;color:#4E515C}
.cod-l.on{background:rgba(110,139,255,.09)}
.cod-l.neuve{animation:codNeuve .25s ease-out}
@keyframes codNeuve{from{max-height:0;opacity:0}to{max-height:3cqw;opacity:1}}
.k{color:#F07FA6}.a{color:#9CDCFE}.v{color:#C3E88D}.t{color:#E5E7EF}.cm{color:#6A7082;font-style:italic}
.cod-caret{display:inline-block;width:.18cqw;height:1.9cqw;margin-left:.05cqw;background:#9BE3A8;vertical-align:-.35cqw;animation:codClign 1s steps(1) infinite}
@keyframes codClign{50%{opacity:0}}
.cod-etat{position:absolute;left:21cqw;right:0;bottom:0;height:3cqw;display:flex;align-items:center;gap:2cqw;padding:0 1.6cqw;background:#18181C;border-top:.1cqw solid #2C2C33;color:#8A8D98;font-size:1.05cqw}
.cod-etat .sv{display:flex;align-items:center;gap:.6cqw}.cod-etat .sv i{width:.9cqw;height:.9cqw;border-radius:50%;background:#9BE3A8}
.cod-etat .sv.mod i{background:#F5C451}
.cod-etat em{margin-left:auto;font-style:normal}
/* aperçu du site, fenêtre flottante qui se recharge */
.cod-prev{position:absolute;left:36cqw;top:31cqw;width:36cqw;border-radius:1cqw;overflow:hidden;background:#fff;box-shadow:0 2.4cqw 5cqw -1.4cqw rgba(0,0,0,.7),0 0 0 .1cqw rgba(255,255,255,.12)}
.cod-prev-barre{height:3cqw;display:flex;align-items:center;gap:.7cqw;padding:0 1.2cqw;background:#F1F1F3;color:#6B6E79;font-size:1cqw}
.cod-prev-barre i{width:.9cqw;height:.9cqw;border-radius:50%;background:#D5D5DA}
.cod-prev-barre span{margin-left:1cqw;flex:1;padding:.5cqw 1cqw;border-radius:99px;background:#fff}
.cod-prev-page{position:relative;container-type:inline-size;aspect-ratio:1280/800}
.cod-prev-page img{display:block;width:100%;height:auto}
.cod-badge{position:absolute;left:58.6cqw;top:49cqw;display:flex;align-items:center;gap:1.2cqw;padding:1.3cqw 2.2cqw;border-radius:99px;background:#fff;color:#0F2A6B;
  font:700 2.4cqw/1 Montserrat,system-ui,sans-serif;box-shadow:0 1cqw 2cqw -.8cqw rgba(0,0,0,.5);opacity:0;transform:translateY(1.5cqw) scale(.9);transition:opacity .3s,transform .4s cubic-bezier(.34,1.56,.64,1)}
.cod-badge b{width:1.6cqw;height:1.6cqw;border-radius:50%;background:#E0433F}
.cod-badge.on{opacity:1;transform:none}
.cod-badge.sel{outline:.4cqw solid #8FD9FF;outline-offset:.6cqw}
.cod-toast{position:absolute;right:1.4cqw;top:4.4cqw;padding:.8cqw 1.3cqw;border-radius:.8cqw;background:#18181C;color:#fff;font-size:1.05cqw;display:flex;gap:.6cqw;align-items:center;
  opacity:0;transform:translateY(-.8cqw);transition:opacity .25s,transform .3s}
.cod-toast.on{opacity:1;transform:none}.cod-toast i{width:.9cqw;height:.9cqw;border-radius:50%;background:#9BE3A8}
/* curseurs (mêmes que l'éditeur) */
.cod .cms-cur{position:absolute;left:0;top:0;width:2.4cqw;z-index:6;transform:translate(var(--x,50cqw),var(--y,30cqw));will-change:transform}
.cod .cms-cur svg{display:block;width:100%;height:auto;filter:drop-shadow(0 .2cqw .4cqw rgba(0,0,0,.5));transition:transform .08s}
.cod .cms-cur svg path{fill:var(--c)}
.cod .cms-cur b{position:absolute;left:70%;top:95%;padding:.5cqw .9cqw;border-radius:.6cqw;white-space:nowrap;font:600 1.15cqw/1 system-ui;color:#141414;background:var(--c)}
.cod .cms-cur.g b{left:auto;right:70%}
.cod .cms-cur.clic svg{transform:scale(.8)}
.cod .c1{--c:#8FD9FF}.cod .c2{--c:#9BE3A8}
.cod .cms-onde{position:absolute;width:3.6cqw;height:3.6cqw;margin:-1.8cqw 0 0 -1.8cqw;border-radius:50%;border:.25cqw solid var(--c);z-index:5;pointer-events:none;animation:cmsOnde .5s ease-out forwards}
/* carte coupée générique (à réutiliser pour tous les widgets) */
.wz{position:relative;overflow:hidden;background:var(--wz,#EAE3FA);border:2px solid var(--ink,#221726);border-radius:18px;box-shadow:3px 4px 0 0 var(--ink,#221726)}
.wz-in{position:absolute;left:9%;top:9%;width:var(--wzw,140%);aspect-ratio:var(--wza,5/4);border-radius:14px;overflow:hidden;border:2px solid var(--ink,#221726);box-shadow:0 30px 60px -20px rgba(34,23,38,.45)}

/* ===== version composition (vignette Développement) : pas d'appli zoomée, deux fenêtres posées
   sur la carte : le code en haut à gauche, le site en bas à droite ===== */
.cod.compo{background:transparent}
.cod.compo .cod-act,.cod.compo .cod-arbre{display:none}
.cod.compo .cod-fen{position:absolute;left:6cqw;top:7cqw;width:82cqw;height:62cqw;border-radius:2cqw;overflow:hidden;background:#1F1F24;
  border:.25cqw solid #221726;box-shadow:0 3cqw 6cqw -2cqw rgba(34,23,38,.5)}
.cod.compo .cod-top{height:7cqw;border-radius:0}
.cod.compo .cod-top>*{font-size:2.2cqw}
.cod.compo .cod-pts i{width:1.8cqw;height:1.8cqw}.cod.compo .cod-pts{gap:1.2cqw;padding:0 2.6cqw}
.cod.compo .cod-ong{padding:0 2.4cqw;gap:1.2cqw}.cod.compo .cod-ong b{width:1.8cqw;height:1.8cqw}
.cod.compo .cod-avs i{width:3.8cqw;height:3.8cqw;font-size:1.5cqw;margin-left:-1cqw}
.cod.compo .cod-ed{left:0;top:7cqw;bottom:5cqw;padding:2.6cqw 0;font-size:2.45cqw;line-height:3.9cqw}
.cod.compo .cod-l::before{width:6.4cqw;padding-right:2.4cqw}
.cod.compo .cod-caret{height:3cqw;width:.3cqw}
.cod.compo .cod-etat{left:0;height:5cqw;font-size:1.8cqw;gap:3cqw;padding:0 2.6cqw}
.cod.compo .cod-etat .sv i{width:1.4cqw;height:1.4cqw}
.cod.compo .cod-prev{left:32cqw;top:48cqw;width:62cqw;border-radius:1.8cqw;border:.25cqw solid #221726}
.cod.compo .cod-prev-barre{height:5cqw;font-size:1.7cqw;gap:1cqw;padding:0 2cqw}
.cod.compo .cod-prev-barre i{width:1.4cqw;height:1.4cqw}
.cod.compo .cod-toast{right:4cqw;top:41cqw;font-size:1.8cqw;padding:1.3cqw 2cqw;border-radius:1.2cqw;gap:1cqw;border:.2cqw solid #221726}
.cod.compo .cod-toast i{width:1.4cqw;height:1.4cqw}
.cod.compo .cms-cur{width:6.8cqw}.cod.compo .cms-cur b{font-size:2.9cqw;padding:1.2cqw 2.2cqw;border-radius:1.6cqw!important}
.cod.compo .cms-onde{width:6cqw;height:6cqw;margin:-3cqw 0 0 -3cqw}
/* posé dans une page : les lignes (des <p>) ne doivent pas prendre la taille des textes du site (.exp p) */
.cod p.cod-l,.cod .cod-arbre p{font:inherit;color:inherit;margin:0;letter-spacing:normal}
.cod .cod-ed{color:#C9CCD6}

/* curseurs façon multijoueur (comme la référence) : flèche arrondie pleine, reflet, fine ombre ; étiquette en pastille */
.cod .cms-cur svg path.cf{fill:var(--c);stroke:rgba(20,20,20,.55);stroke-width:.9px;stroke-linejoin:round;paint-order:normal}
.cod .cms-cur svg path.ch{fill:none;stroke:rgba(255,255,255,.55);stroke-width:1.1px;stroke-linecap:round}
.cod .cms-cur svg{filter:drop-shadow(0 .25cqw .5cqw rgba(0,0,0,.35))}
.cod .cms-cur b{border:none!important;box-shadow:0 .25cqw .7cqw rgba(0,0,0,.3)!important;border-radius:.8cqw!important}