/* ===== widget « éditeur en direct » : un vrai éditeur de site (façon Webflow) où trois personnes
   travaillent en même temps. Tout en cqw : il s'adapte à la taille de son cadre. Animé par cms.js. ===== */
.cms{--bg:#1E1E1E;--bg2:#2B2B2B;--bg3:#383838;--li:#3A3A3A;--tx:#D9D9D9;--tx2:#9A9A9A;--bleu:#146EF5;
  position:absolute;inset:0;container-type:inline-size;background:var(--bg);overflow:hidden;
  font-family:Inter,"Figtree",system-ui,sans-serif;color:var(--tx);line-height:1.2;-webkit-font-smoothing:antialiased}
/* les unités cqw d'un conteneur ne s'appliquent qu'à ses enfants : la taille de base se pose sur eux,
   sinon elle se calcule sur l'écran entier et tout le texte gonfle */
.cms>*{font-size:1.25cqw}
.cms *{box-sizing:border-box}
.cms svg{display:block}
/* barre du haut */
.cms-top{position:absolute;left:0;right:0;top:0;height:4.4cqw;display:flex;align-items:center;background:var(--bg);border-bottom:.1cqw solid var(--li)}
.cms-logo{width:4.4cqw;height:100%;display:grid;place-items:center;border-right:.1cqw solid var(--li)}
.cms-logo span{font:800 1.7cqw/1 var(--font,system-ui);color:#fff;letter-spacing:-.05em}
.cms-page-sel{display:flex;align-items:center;gap:.8cqw;padding:0 1.6cqw;height:100%;border-right:.1cqw solid var(--li);color:var(--tx)}
.cms-page-sel small{color:var(--tx2)}
.cms-modes{display:flex;gap:.4cqw;margin:0 auto}
.cms-modes span{width:2.9cqw;height:2.6cqw;border-radius:.4cqw;display:grid;place-items:center;color:var(--tx2)}
.cms-modes span.on{background:var(--bg3);color:#fff}
.cms-modes svg{width:1.5cqw;height:1.5cqw}
.cms-w{padding:0 1.4cqw;color:var(--tx2);font-variant-numeric:tabular-nums}
.cms-avs{display:flex;padding:0 1.2cqw}
.cms-avs i{width:2.4cqw;height:2.4cqw;border-radius:50%;margin-left:-.6cqw;border:.2cqw solid var(--bg);display:grid;place-items:center;
  font:700 1cqw/1 system-ui;font-style:normal;color:#141414}
.cms-pub{margin-right:1cqw;padding:.9cqw 1.5cqw;white-space:nowrap;border-radius:.5cqw;background:var(--bleu);color:#fff;font-weight:600}
.cms-pub.ok{background:#1F9D55}
/* colonne d'icônes */
.cms-rail{position:absolute;left:0;top:4.4cqw;bottom:0;width:4.4cqw;border-right:.1cqw solid var(--li);display:flex;flex-direction:column;align-items:center;gap:.6cqw;padding-top:1cqw}
.cms-rail span{width:3cqw;height:3cqw;border-radius:.5cqw;display:grid;place-items:center;color:var(--tx2)}
.cms-rail span.on{background:var(--bg3);color:#fff}
.cms-rail svg{width:1.6cqw;height:1.6cqw}
/* panneau Ajouter */
.cms-add{position:absolute;left:4.4cqw;top:4.4cqw;bottom:0;width:19cqw;border-right:.1cqw solid var(--li);background:var(--bg);overflow:hidden;padding:1.2cqw}
.cms-add h6{margin:0 0 1cqw;font-size:1.3cqw;font-weight:600;color:#fff}
.cms-onglets{display:flex;gap:1.4cqw;border-bottom:.1cqw solid var(--li);margin-bottom:1cqw}
.cms-onglets span{padding-bottom:.8cqw;color:var(--tx2)}.cms-onglets span.on{color:#fff;box-shadow:inset 0 -.2cqw #fff}
.cms-cherche{display:flex;align-items:center;gap:.7cqw;height:2.6cqw;padding:0 .9cqw;border-radius:.5cqw;background:var(--bg2);color:var(--tx2);margin-bottom:1.2cqw}
.cms-cherche svg{width:1.2cqw;height:1.2cqw}
.cms .cms-rub{display:flex;justify-content:space-between;margin:0 0 .8cqw;color:var(--tx2);font-size:1.1cqw}
.cms-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6cqw;margin-bottom:1.4cqw}
.cms-grid span{aspect-ratio:1/.95;border-radius:.5cqw;background:var(--bg2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7cqw;
  color:var(--tx2);font-size:1cqw;outline:.25cqw solid transparent;outline-offset:-.25cqw;transition:outline-color .2s}
.cms-grid span svg{width:2.6cqw;height:2cqw;color:#8E8E8E}
.cms-grid span.tenu{outline-color:var(--bleu)}
/* canvas */
.cms-canvas{position:absolute;left:23.4cqw;right:21cqw;top:4.4cqw;bottom:0;background:#141414;padding:1.4cqw}
.cms-page{position:relative;height:100%;overflow:hidden;background:#FFF5F7;box-shadow:0 0 0 .1cqw #000;container-type:inline-size}
.cms-page img{display:block;width:100%;height:auto}
.cms-hov,.cms-sel{position:absolute;pointer-events:none;border:.18cqw solid var(--bleu);opacity:0;transition:opacity .2s,left .35s,top .35s,width .35s,height .35s}
.cms-hov{border-style:dashed;opacity:0}.cms-hov.on,.cms-sel.on{opacity:1}
.cms-sel b,.cms-hov b{position:absolute;left:-.18cqw;bottom:100%;padding:.35cqw .7cqw;background:var(--bleu);color:#fff;font-size:1cqw;font-weight:600;white-space:nowrap;border-radius:.3cqw .3cqw 0 0}
.cms-sel em{position:absolute;right:-.18cqw;top:100%;padding:.3cqw .6cqw;background:var(--bleu);color:#fff;font-size:.95cqw;font-style:normal;border-radius:0 0 .3cqw .3cqw;font-variant-numeric:tabular-nums}
.cms-sel i{position:absolute;width:.9cqw;height:.9cqw;background:#fff;border:.18cqw solid var(--bleu)}
.cms-sel i:nth-of-type(1){left:-.5cqw;top:-.5cqw}.cms-sel i:nth-of-type(2){right:-.5cqw;top:-.5cqw}
.cms-sel i:nth-of-type(3){left:-.5cqw;bottom:-.5cqw}.cms-sel i:nth-of-type(4){right:-.5cqw;bottom:-.5cqw}
/* le titre remplace celui du site (capturé sans titre) : même place, même taille, en cqw de la page (1280 px = 100cqw) */
.cms-titre{position:absolute;left:7.5cqw;top:18.98cqw;width:44cqw;font:400 4.69cqw/1 "Cormorant Garamond",Georgia,serif;color:#171717;
  transition:font-size .25s,color .3s}
.cms-titre i{font-style:italic;color:var(--tt,#E05A87);transition:color .3s}
.cms-bloc{position:absolute;left:7.5cqw;top:63cqw;padding:2.2cqw 3.6cqw;border-radius:99px;background:#E05A87;color:#fff;font:600 2.4cqw/1 system-ui;
  opacity:0;transform:scale(.6);transition:opacity .25s,transform .35s cubic-bezier(.34,1.56,.64,1);box-shadow:0 1cqw 2cqw -1cqw rgba(0,0,0,.6)}
.cms-bloc.on{opacity:1;transform:none}
.cms-drop{position:absolute;left:6.8cqw;top:62cqw;width:36cqw;height:9cqw;border-radius:99px;border:.2cqw dashed var(--bleu);background:rgba(20,110,245,.12);opacity:0;transition:opacity .2s}
.cms-drop.on{opacity:1}
/* panneau de style */
.cms-style{position:absolute;right:0;top:4.4cqw;bottom:0;width:21cqw;border-left:.1cqw solid var(--li);background:var(--bg);overflow:hidden}
.cms-st-onglets{display:flex;border-bottom:.1cqw solid var(--li)}
.cms-st-onglets span{flex:1;white-space:nowrap;text-align:center;padding:1cqw 0;color:var(--tx2)}.cms-st-onglets span.on{color:#fff;box-shadow:inset 0 -.2cqw #fff}
.cms-sec{padding:1cqw 1.2cqw;border-bottom:.1cqw solid var(--li)}
.cms-sec h6{margin:0 0 .9cqw;font-size:1.15cqw;font-weight:600;color:#fff;display:flex;justify-content:space-between}
.cms-sec h6 small{color:var(--tx2);font-weight:400}
.cms-classe{display:flex;align-items:center;gap:.5cqw;height:2.6cqw;padding:0 .6cqw;border-radius:.4cqw;background:var(--bg2)}
.cms-classe span{padding:.4cqw .7cqw;border-radius:.3cqw;background:var(--bleu);color:#fff;font-size:1.05cqw}
.cms-row{display:grid;grid-template-columns:5.5cqw 1fr;align-items:center;gap:.8cqw;margin-bottom:.7cqw;color:var(--tx2);font-size:1.05cqw}
.cms-champ{height:2.4cqw;display:flex;align-items:center;justify-content:space-between;padding:0 .7cqw;border-radius:.35cqw;background:var(--bg2);color:#fff;
  font-variant-numeric:tabular-nums;transition:box-shadow .2s}
.cms-champ.on{box-shadow:inset 0 0 0 .18cqw var(--bleu)}
.cms-champ small{color:var(--tx2)}
.cms-seg{display:flex;height:2.4cqw;border-radius:.35cqw;background:var(--bg2);overflow:hidden}
.cms-seg span{flex:1;display:grid;place-items:center;color:var(--tx2);font-size:1cqw}.cms-seg span.on{background:var(--bg3);color:#fff}
.cms-boite{position:relative;height:9cqw;border-radius:.4cqw;background:var(--bg2);display:grid;place-items:center;font-size:1cqw;color:var(--tx2)}
.cms-boite::before{content:"";position:absolute;inset:2.2cqw 3.4cqw;border:.1cqw dashed #5A5A5A;border-radius:.3cqw}
.cms-boite b{position:absolute;font-weight:500;color:#fff;font-size:1cqw}
.cms-boite b:nth-of-type(1){top:.6cqw}.cms-boite b:nth-of-type(2){bottom:.6cqw}.cms-boite b:nth-of-type(3){left:1.2cqw}.cms-boite b:nth-of-type(4){right:1.2cqw}
.cms-coul{display:flex;align-items:center;gap:.7cqw}
.cms-coul i{width:1.6cqw;height:1.6cqw;border-radius:.3cqw;background:var(--tt,#E05A87);transition:background .3s}
.cms-pal{display:flex;gap:.5cqw;margin-top:.7cqw}
.cms-pal span{width:1.9cqw;height:1.9cqw;border-radius:.3cqw}
/* curseurs */
.cms-cur{position:absolute;left:0;top:0;width:3.4cqw;z-index:6;transform:translate(var(--x,50cqw),var(--y,30cqw));will-change:transform}
.cms-cur svg{width:100%;height:auto;filter:drop-shadow(0 .2cqw .4cqw rgba(0,0,0,.5));transition:transform .08s}
.cms-cur svg path{fill:var(--c)}
.cms-cur b{position:absolute;left:70%;top:95%;padding:.6cqw 1.1cqw;border-radius:.7cqw;white-space:nowrap;font:700 1.45cqw/1 system-ui;border:.15cqw solid #fff;box-shadow:0 .3cqw .8cqw rgba(0,0,0,.45);color:#141414;background:var(--c)}
.cms-cur.clic svg{transform:scale(.8)}
.c1{--c:#8FD9FF}.c2{--c:#9BE3A8}.c3{--c:#C9B8FF}
.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}
@keyframes cmsOnde{from{transform:scale(.2);opacity:1}to{transform:scale(1);opacity:0}}
.cms-fant{position:absolute;z-index:5;width:6cqw;height:5.6cqw;border-radius:.5cqw;background:#333;outline:.25cqw solid var(--bleu);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.5cqw;color:#fff;font-size:1cqw;pointer-events:none;opacity:.92;box-shadow:0 1cqw 2cqw -.6cqw rgba(0,0,0,.6)}
.cms-fant svg{width:2.6cqw;height:2cqw;color:#bbb}
.cms-com{position:absolute;z-index:6;width:19cqw;padding:.9cqw 1.1cqw;border-radius:1cqw 1cqw 1cqw .2cqw;background:#C9B8FF;color:#141414;
  font:600 1.15cqw/1.3 system-ui;box-shadow:0 1cqw 2cqw -.8cqw rgba(0,0,0,.6);opacity:0;transform:translateY(.8cqw) scale(.9);transform-origin:0 100%;
  transition:opacity .3s,transform .35s cubic-bezier(.34,1.56,.64,1)}
.cms-com small{display:block;font-weight:500;opacity:.7;margin-bottom:.3cqw}
.cms-com.on{opacity:1;transform:none}

/* étiquette du curseur à gauche quand il approche du bord droit, pour ne pas être coupée */
.cms-cur.g b{left:auto;right:70%}
.cms-cherche{white-space:nowrap;overflow:hidden}
.cms-onglets{white-space:nowrap;overflow:hidden}

/* version « zoomée » comme la référence : seul le coin gauche de l'éditeur, agrandi, posé sur un fond pastel */
.cms-zoom{position:relative;overflow:hidden;background:#EAE3FA;border:2px solid var(--ink,#221726);border-radius:18px;box-shadow:3px 4px 0 0 var(--ink,#221726)}
.cms-zoom-in{position:absolute;left:9%;top:9%;width:200%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;
  border:2px solid var(--ink,#221726);box-shadow:0 30px 60px -20px rgba(34,23,38,.45)}

/* posé dans une page, le widget ne doit rien hériter des règles du site (.exp p, h6…) */
.cms p,.cms h5,.cms h6{margin:0;letter-spacing:normal;text-transform:none}
.cms .cms-rub{margin:0 0 .8cqw;font-size:1.1cqw;line-height:1.2;color:var(--tx2)}
.cms .cms-add h6{margin:0 0 1cqw}.cms .cms-sec h6{margin:0 0 .9cqw}


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

/* survol d'un élément du panneau Ajouter, et champ de recherche actif */
.cms-grid span{transition:background .2s,color .2s,outline-color .2s}
.cms-grid span.survol{background:#3A3A3A;color:#fff}.cms-grid span.survol svg{color:#fff}
.cms-cherche{transition:box-shadow .2s}.cms-cherche.on{box-shadow:inset 0 0 0 .18cqw var(--bleu);color:#fff}