/* ================================================================
   SCHEMA-BUILDER v1.0.1 — feuille de style du widget
   Préfixe de classes : .sb-  (isolé, aucune collision avec DND/RELIE/DTT)
   Variables surchargeables par [id="…"] { --sb-… } comme pour RELIE.
   ================================================================ */
.schema-builder-widget{
  --sb-accent:#2b7bbb;
  --sb-wire:#222;
  --sb-node:#b9c4cf;
  --sb-ok:#2e9e5b;
  --sb-ko:#d1495b;
  --sb-warn:#e58a00;
  --sb-slot:#2b7bbb33;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:#1d2733;
  max-width:760px;
}
.schema-builder-widget p{margin:.4em 0 .8em}
.schema-builder-widget .fw{font-weight:700;color:var(--sb-accent)}

.sb-toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:8px}

.schema-builder-widget .sb-tool {
  border: 1px solid #cdd7e1;
  background-color: #fff;
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 12px;
  text-transform: none !important;
  color: #000;
  font-weight: normal;
  cursor: pointer;
  user-select: none;
}

/* Survol d’un bouton inactif */
.schema-builder-widget .sb-tool:not([aria-pressed="true"]):hover {
  background-color: #f0f3f6;
  border-color: #aebdca;
  color: #000;
}

/* Bouton actif, avec ou sans survol */
.schema-builder-widget .sb-tool[aria-pressed="true"],
.schema-builder-widget .sb-tool[aria-pressed="true"]:hover {
  background-color: var(--sb-accent) !important;
  border-color: var(--sb-accent) !important;
  color: #fff !important;
}

/* Bouton « Vider le circuit » — style identique à circuit-lab (.cl-tool-vider) */
.schema-builder-widget .sb-tool-vider{margin-left:auto;color:#a23b4a;border-color:#e6c2c8}
.schema-builder-widget .sb-tool-vider:not([aria-pressed="true"]):hover{background-color:#fbeef0;border-color:#e6c2c8;color:#a23b4a}

.schema-builder-widget .sb-hint {
  margin-left: auto;
  color: #5a6b7b;
  font-size: 12px;
}

.sb-workspace{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-start}

/* --- plan de travail (grille) --- */
.sb-board{
  position:relative;flex:1 1 420px;min-width:320px;
  background:#fafcff;border:1px solid #dce4ec;border-radius:12px;
  touch-action:none;
}
.sb-board svg{display:block;width:100%;height:auto}
.sb-svg-grid circle{fill:var(--sb-node)}
.sb-wire-line{stroke:var(--sb-wire);stroke-width:3;stroke-linecap:round}
.sb-topology-wrong .sb-wire-line{stroke:var(--sb-warn)}
.sb-current-layer{pointer-events:none}
.sb-current-arrow polygon{fill:var(--sb-accent)}
.sb-current-arrow.correct polygon{fill:var(--sb-ok)}
.sb-current-arrow.wrong polygon{fill:var(--sb-ko)}
.sb-preview{stroke:var(--sb-accent);stroke-width:3;stroke-dasharray:5 5;stroke-linecap:round;opacity:.7}
.sb-sym-bg{fill:#fafcff}
.sb-sym-mark{stroke:var(--sb-wire);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.sb-sym-fill{fill:var(--sb-wire)}
.sb-sym-text{font:700 16px system-ui,sans-serif;fill:var(--sb-wire)}
.sb-sym-sign{font:700 13px system-ui,sans-serif;fill:var(--sb-wire)}
.sb-symbol.correct .sb-sym-mark,.sb-symbol.correct .sb-sym-wire{stroke:var(--sb-ok)}
.sb-symbol.wrong   .sb-sym-mark,.sb-symbol.wrong   .sb-sym-wire{stroke:var(--sb-ko)}
.sb-symbol.is-moving .sb-sym-mark,.sb-symbol.is-moving .sb-sym-wire{stroke:var(--sb-accent)}
.sb-symbol.is-moving .sb-sym-bg{stroke:var(--sb-accent);stroke-width:2;fill:#e8f3fb}
.sb-sym-wire{stroke:var(--sb-wire);stroke-width:3;stroke-linecap:round}

/* --- palette --- */
.sb-palette{
  flex:0 0 210px;display:flex;flex-direction:column;gap:4px;
  padding:10px;border:1px solid #dce4ec;border-radius:12px;background:#fff;
}
.sb-palette h4{margin:0 0 2px;font-size:13px;color:#5a6b7b;font-weight:700}
.sb-pal-group{margin-bottom:4px}
.sb-pal-group h5{
  margin:6px 0 4px;font-size:11px;text-transform:uppercase;letter-spacing:.03em;
  color:#8493a1;font-weight:700;
}
.sb-pal-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}

.sb-sym{
  display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;
  border:1px solid #cdd7e1;border-radius:8px;padding:6px 4px;
  cursor:grab;background:#fff;user-select:none;touch-action:none;color:inherit;font:inherit;
  text-transform: none;
}

/* Survol d’un symbole non sélectionné */
.schema-builder-widget .sb-sym:not(.is-selected):hover {
  background-color: #f0f3f6;
  border-color: #aebdca;
  box-shadow: 0 2px 6px rgba(15, 76, 92, .12);
}

/* Symbole sélectionné, même pendant le survol */
.schema-builder-widget .sb-sym.is-selected,
.schema-builder-widget .sb-sym.is-selected:hover {
  background-color: #e8f4f7 !important;
  border-color: #147e99 !important;
  color: #0f4c5c !important;
  box-shadow: 0 0 0 2px rgba(20, 126, 153, .18);
}

.schema-builder-widget .sb-sym:focus-visible {
  outline: 2px solid #2b7bbb;
  outline-offset: 2px;
}

.sb-sym svg{flex:none}
.sb-sym span{font-size:11px;line-height:1.1}
.sb-ghost{position:fixed;pointer-events:none;z-index:9999;opacity:.85;transform:translate(-50%,-50%)}

/* --- actions / score : même charte que RELIE v4 --- */
.sb-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid #e7eef6;
}
.schema-builder-widget .sb-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;
}
.schema-builder-widget .sb-actions button:hover{filter:brightness(.95)}
.schema-builder-widget .sb-actions button:focus-visible{
  outline:2px solid #2b7bbb;
  outline-offset:2px;
}
.schema-builder-widget .sb-actions button[disabled]{
  opacity:.5;
  cursor:not-allowed;
  filter:none;
}
.schema-builder-widget .sb-actions .sb-retry{
  background:#f0f3f6;
  border-color:#cfd9e6;
  color:#0f4c5c;
}
.schema-builder-widget .sb-actions .sb-solution:hover,
.schema-builder-widget.sb-locked .sb-actions .sb-solution{
  background:rgba(255,245,191,.54);
  border-color:#ffb913;
  color:#6a4d08;
}
.sb-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;
}
.sb-feedback{margin-top:8px;font-size:13px;color:#41505f;min-height:1.2em}
.sb-feedback li{margin:.15em 0}
.sb-locked .sb-board,.sb-locked .sb-palette{opacity:.65;pointer-events:none}