/* ================================================================
   MOLECULE-BUILDER v1.0.0 — feuille de style du widget
   Préfixe de classes : .mb-  (isolé, aucune collision)
   Variables surchargeables par [id="…"] { --mb-… }
   Charte alignée sur SCHEMA-BUILDER / CIRCUIT-LAB / RELIE v4.
   ================================================================ */
.molecule-builder-widget{
  --mb-accent:#2b7bbb;
  --mb-bond:#3a4450;
  --mb-ok:#2e9e5b;
  --mb-ko:#d1495b;
  --mb-warn:#e58a00;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:#1d2733;
  max-width:860px;
}
.molecule-builder-widget p{margin:.4em 0 .8em}
.molecule-builder-widget .fw{font-weight:700;color:var(--mb-accent)}
.molecule-builder-widget sub{font-size:.72em;line-height:0}

.mb-instruction{font-size:15px}

/* --- barre d'outils --- */
.mb-toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:8px}
.molecule-builder-widget .mb-hint{color:#5a6b7b;font-size:12px}
.molecule-builder-widget .mb-tool{
  margin-left:auto;
  border:1px solid #cdd7e1;background-color:#fff;border-radius:8px;
  padding:5px 10px;font-size:12px;font-family:inherit;
  text-transform:none !important;color:#000;font-weight:normal;
  cursor:pointer;user-select:none;
}
.molecule-builder-widget .mb-tool:hover{background-color:#f0f3f6;border-color:#aebdca}
.molecule-builder-widget .mb-tool-clear{color:#a23b4a;border-color:#e6c2c8}
.molecule-builder-widget .mb-tool-clear:hover{background-color:#fbeef0;border-color:#e6c2c8;color:#a23b4a}

/* --- espace de travail --- */
.mb-workspace{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-start}

.mb-board{
  position:relative;flex:1 1 420px;min-width:280px;
  background:#fafcff;border:1px solid #dce4ec;border-radius:12px;
  touch-action:none;overflow:hidden;
}
.mb-board svg{display:block;width:100%;height:auto}

/* --- liaisons --- */
.mb-bond-line{stroke:var(--mb-bond);stroke-width:4;stroke-linecap:round}
.mb-bond-hit{stroke:transparent;stroke-width:16;cursor:pointer}
.mb-bond:hover .mb-bond-line{stroke:var(--mb-ko)}
.mb-locked .mb-bond-hit{cursor:default}
.mb-locked .mb-bond:hover .mb-bond-line{stroke:var(--mb-bond)}

/* --- valences libres : la molécule n'est pas terminée --- */
.mb-free{stroke:#9aa8b6;stroke-width:3;stroke-linecap:round;stroke-dasharray:2 4}

/* --- atomes --- */
.mb-atom{cursor:grab}
.mb-atom-disc{stroke-width:2.5}
.mb-atom-label{font:700 15px system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;pointer-events:none}
.mb-dragging .mb-atom{cursor:grabbing}
.mb-locked .mb-atom{cursor:default}

/* --- formule sous une molécule terminée --- */
.mb-label-host{position:absolute;inset:0;pointer-events:none}
.mb-mol-formula{
  position:absolute;transform:translate(-50%,0);
  font-size:13px;font-weight:700;color:#41505f;white-space:nowrap;
  background:rgba(250,252,255,.82);padding:0 4px;border-radius:4px;
}

/* --- palette --- */
.mb-palette{
  flex:0 0 200px;display:flex;flex-direction:column;gap:6px;
  padding:10px;border:1px solid #dce4ec;border-radius:12px;background:#fff;
}
.mb-pal-title{margin:0 0 2px;font-size:13px;color:#5a6b7b;font-weight:700}
.mb-pal-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}

.molecule-builder-widget .mb-atom-btn{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  border:1px solid #cdd7e1;border-radius:8px;padding:7px 4px;
  background:#fff;cursor:grab;user-select:none;touch-action:none;
  font:inherit;color:inherit;text-transform:none;
}
.molecule-builder-widget .mb-atom-btn:hover{
  background-color:#f0f3f6;border-color:#aebdca;
  box-shadow:0 2px 6px rgba(15,76,92,.12);
}
.molecule-builder-widget .mb-atom-btn:focus-visible{outline:2px solid var(--mb-accent);outline-offset:2px}
.mb-chip{
  display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;border:2px solid;
  font-weight:700;font-size:14px;
}
.mb-chip-name{font-size:10px;line-height:1.1;color:#5a6b7b;text-align:center}

/* --- corbeille --- */
.mb-trash{
  margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:1px;
  border:2px dashed #d9c2c6;border-radius:8px;padding:12px 6px;
  color:#a23b4a;background:#fdf7f8;text-align:center;
  /* même main que les atomes de la palette et ceux du plan */
  cursor:grab;user-select:none;
  transition:background-color .12s,border-color .12s,transform .12s;
}
.mb-trash span{font-size:12px;font-weight:700}
.mb-trash small{font-size:10px;color:#b08088;line-height:1.15}
/* survol pendant un glisser : la cible de dépôt doit être évidente */
.mb-trash.mb-trash-hot{
  background:#f7d9de;border-color:#a23b4a;border-style:solid;
  transform:scale(1.04);
}
.mb-trash.mb-trash-hot small{color:#8d3341}
/* pendant un glisser, la main reste fermée partout, corbeille comprise */
.mb-dragging .mb-trash,.mb-trash.mb-trash-hot{cursor:grabbing}

/* --- fantôme de glisser-déposer --- */
.mb-ghost{
  position:fixed;pointer-events:none;z-index:9999;
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;border:2px solid;
  font:700 15px system-ui,sans-serif;opacity:.9;
  transform:translate(-50%,-50%);
  box-shadow:0 3px 10px rgba(15,76,92,.25);
}

/* --- molécules demandées ---
   Les pastilles n'apparaissent qu'une fois la molécule réussie, ou après
   un clic sur Correction. `display:flex` bat la règle [hidden] du
   navigateur : il faut donc rétablir display:none explicitement. */
.mb-targets{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.mb-targets[hidden]{display:none}
.mb-target{
  display:flex;align-items:center;gap:10px;
  border:1px solid #dce4ec;border-left:4px solid #cdd7e1;border-radius:8px;
  padding:6px 10px;background:#fff;
}
.mb-target[hidden]{display:none}
.molecule-builder-widget .mb-3d[hidden]{display:none}
.mb-target.correct{border-left-color:var(--mb-ok);background:#f2fbf5}
.mb-target.wrong{border-left-color:var(--mb-ko);background:#fdf5f6}
.mb-target-head{display:flex;flex-direction:column;line-height:1.2}
.mb-target-formula{font-weight:800;font-size:14px;color:#1d2733}
.mb-target-name{font-size:11px;color:#5a6b7b}

.molecule-builder-widget .mb-3d{
  border:1px solid #cdd7e1;background:#fff;border-radius:6px;
  padding:3px 8px;font:700 11px inherit;color:#0f4c5c;
  text-transform:none;cursor:pointer;
}
.molecule-builder-widget .mb-3d:hover:not([disabled]){background:#e8f4f7;border-color:#147e99}
.molecule-builder-widget .mb-3d[disabled]{opacity:.35;cursor:not-allowed}

/* --- actions / score : même charte que RELIE v4 --- */
.mb-actions{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  margin-top:12px;padding-top:12px;border-top:1px solid #e7eef6;
}
.molecule-builder-widget .mb-actions button{
  appearance:none;-webkit-appearance:none;
  padding:8px 14px;border:1px solid #0f6d86;border-radius:8px;
  background:#147e99;color:#fff;font-family:inherit;font-size:12pt;
  font-weight:normal;line-height:1.1;text-transform:uppercase;cursor:pointer;
}
.molecule-builder-widget .mb-actions button:hover{filter:brightness(.95)}
.molecule-builder-widget .mb-actions button:focus-visible{outline:2px solid var(--mb-accent);outline-offset:2px}
.molecule-builder-widget .mb-actions button[disabled]{opacity:.5;cursor:not-allowed;filter:none}
.molecule-builder-widget .mb-actions .mb-retry{background:#f0f3f6;border-color:#cfd9e6;color:#0f4c5c}
.molecule-builder-widget .mb-actions .mb-solution:hover,
.molecule-builder-widget.mb-locked .mb-actions .mb-solution{
  background:rgba(255,245,191,.54);border-color:#ffb913;color:#6a4d08;
}
.mb-score{
  margin-left:auto;padding:8px 14px;display:inline-flex;align-items:center;
  font-weight:800;color:#0f4c5c;font-family:Arial,sans-serif;font-size:12pt;
}
.mb-feedback{margin-top:8px;font-size:13px;color:#41505f;min-height:1.2em}
.mb-feedback ul{margin:0;padding-left:1.1em}
.mb-feedback li{margin:.15em 0}

.mb-locked .mb-palette,.mb-locked .mb-toolbar{opacity:.65;pointer-events:none}
.mb-config-error{border:2px dashed var(--mb-ko);padding:10px;border-radius:8px}

/* --- mode portrait : palette en barre horizontale --- */
.mb-portrait .mb-workspace{flex-direction:column-reverse}
.mb-portrait .mb-palette{
  flex:1 1 auto;width:100%;flex-direction:row;align-items:center;
  gap:8px;overflow-x:auto;
}
.mb-portrait .mb-pal-title{display:none}
.mb-portrait .mb-pal-grid{display:flex;gap:6px;flex:0 0 auto}
.mb-portrait .mb-atom-btn{min-width:56px}
.mb-portrait .mb-trash{
  margin-top:0;margin-left:auto;flex:0 0 auto;flex-direction:row;gap:6px;align-items:center;
}
.mb-portrait .mb-trash small{display:none}
.mb-portrait .mb-board{width:100%}

/* --- modale 3D --- */
.mb-modal{
  position:fixed;inset:0;z-index:10000;
  display:flex;align-items:center;justify-content:center;
  background:rgba(16,26,36,.55);padding:16px;
}
.mb-modal-box{
  background:#fff;border-radius:14px;overflow:hidden;
  width:min(680px,100%);max-height:90vh;display:flex;flex-direction:column;
  box-shadow:0 18px 50px rgba(9,20,32,.35);
}
.mb-modal-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 14px;border-bottom:1px solid #e7eef6;
}
.mb-modal-title{font-weight:800;color:#0f4c5c;font-size:15px}
.mb-modal-close{
  border:none;background:transparent;font-size:26px;line-height:1;
  color:#5a6b7b;cursor:pointer;padding:0 4px;
}
.mb-modal-close:hover{color:#1d2733}
/* Le viewer fixe lui-même sa hauteur via --mv-ratio (molecule-viewer.css).
   On ne lui impose donc rien : le min-height n'est qu'un filet de sécurité
   si molecule-viewer.css n'est pas chargé sur la page. */
.mb-modal .molecule-viewer{flex:0 0 auto;min-height:200px}
.mb-modal-box{overflow-y:auto}
.mb-modal-warn{padding:24px;text-align:center;color:#a23b4a;font-size:13px}