/* =============================================================
   Calculateur de balcons · styles locaux.
   Source de vérité visuelle: DESIGN.md à la racine.
   100% via var(--token) · aucune couleur/rayon/ombre en dur.
   Pattern visuel reproduit de live-15-mai/balcony (cards + sticky preview),
   mais transposé en tokens cam-platform (Inter + JetBrains Mono, pill CTAs,
   --hairline borders, --canvas/--surface-soft surfaces).
   ============================================================= */

/* ===== Layout général ===== */

.balcon-app {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: var(--space-lg);
  align-items: start;
  max-width: var(--content-max);
  margin: 0 auto;
  font-size: 14px;
  color: var(--ink);
}

@media (max-width: 1100px) {
  .balcon-app { grid-template-columns: 1fr; }
}

/* ===== Cards de section ===== */

.bsections {
  display: flex;
  flex-direction: column;
  gap: var(--space-base);
}

.bcard {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-xl);
  overflow: hidden;
}
.bcard-head {
  padding: 14px 20px 10px;
  border-bottom: 1px solid var(--hairline-soft);
}
.bcard-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0;
  margin: 0;
}
.bcard-body {
  padding: 14px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Sub-section divider (used inside Floor info, etc.) */
.bsub-info {
  background: var(--surface-soft);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: 10px 14px;
  font-size: 13px;
  color: var(--body);
}
.bsub-info h4 {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.bsub-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 14px;
}
.bsub-info-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}
.bsub-info-row .num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  font-weight: 500;
}
.bsub-note {
  margin-top: 6px;
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
}

/* ===== Form fields ===== */

.bfield {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.bfield > label {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}
.bfield > .bsublabel {
  font-size: 12px;
  color: var(--muted);
}

.bgrid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 720px) {
  .bgrid-2 { grid-template-columns: 1fr; }
}

/* Inputs */

.binput,
.bselect {
  width: 100%;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: 9px 12px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  background: var(--input-bg);
  outline: none;
  transition: border-color 0.15s;
}
.binput.num,
.binput[type="number"] {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.binput:focus,
.bselect:focus { border-color: var(--primary); }
.binput::placeholder { color: var(--muted-soft); font-weight: 400; }
.binput.is-error,
.bselect.is-error { border-color: var(--semantic-down); }

/* Input avec suffixe (pi, $) */
.binput-with-suffix {
  position: relative;
  display: flex;
  align-items: center;
}
.binput-with-suffix .binput { padding-right: 36px; }
.binput-with-suffix .bsuffix {
  position: absolute;
  right: 12px;
  font-size: 12px;
  color: var(--muted);
  pointer-events: none;
}

/* Hide spinner */
.binput[type="number"]::-webkit-inner-spin-button,
.binput[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.binput[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* Required marker */
.brequired {
  color: var(--semantic-down);
  margin-left: 2px;
}

/* Inline error message */
.berror {
  font-size: 12px;
  color: var(--semantic-down);
  margin-top: 2px;
}

/* Divider visuel à l'intérieur d'une carte (ex: avant Quincaillerie) */
.bdim-hw-divider {
  height: 1px;
  background: var(--hairline);
  margin-top: 6px;
  margin-bottom: 2px;
}

/* Surface highlight (e.g. "Surface totale" box) */
.bhighlight {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 13px;
  background: var(--primary-soft);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  font-size: 13px;
}
.bhighlight-label {
  font-weight: 500;
  color: var(--ink);
}
.bhighlight-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--primary);
}

/* ===== Sticky cost preview ===== */

.bpreview {
  position: sticky;
  top: calc(var(--topbar-h) + var(--space-base));
  align-self: start;
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-xl);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - var(--topbar-h) - 2 * var(--space-base));
  overflow: hidden;
}
.bpreview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  border-bottom: 1px solid var(--hairline);
}
.bpreview-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.2px;
}
.bpreview-discount-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--r-full);
  border: 1px solid var(--hairline);
  background: var(--canvas);
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  transition: background 0.15s, color 0.15s;
}
.bpreview-discount-btn:hover { background: var(--surface-soft); color: var(--ink); }

.bpreview-body {
  padding: 14px 18px;
  flex: 1 1 auto;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bpreview-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bpreview-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  color: var(--muted);
}
.bpreview-meta-row strong {
  color: var(--ink);
  font-weight: 500;
}
.bpreview-meta-row .num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.bpreview-warning {
  font-size: 13px;
  font-style: italic;
  color: var(--accent-yellow);
}

.bpreview-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--primary);
  cursor: pointer;
  align-self: flex-start;
}
.bpreview-toggle:hover { text-decoration: underline; }

.bpreview-divider {
  height: 1px;
  background: var(--hairline);
}

.bpreview-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bpreview-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  gap: 8px;
}
.bpreview-item-lbl {
  color: var(--body);
}
.bpreview-item .num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--primary);
  font-weight: 500;
}
.bpreview-item.highlighted .bpreview-item-lbl {
  color: var(--ink);
  font-weight: 500;
}
.bpreview-item-detail {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
  color: var(--muted);
  padding-left: 14px;
}
.bpreview-item-detail .num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.bpreview-totals {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--hairline);
}
.bpreview-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}
.bpreview-row-lbl {
  color: var(--body);
}
.bpreview-row .num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  font-weight: 500;
}
.bpreview-row.discount .num { color: var(--semantic-up); }
.bpreview-row.profit .bpreview-row-lbl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.bpreview-row.profit .num { color: var(--primary); }
.bpreview-row.profit .binput {
  width: 64px;
  padding: 4px 8px;
  text-align: right;
  font-size: 13px;
}
.bpreview-row.total {
  font-size: 18px;
  font-weight: 600;
  border-top: 1px solid var(--hairline);
  padding-top: 10px;
}
.bpreview-row.total .bpreview-row-lbl { color: var(--ink); }
.bpreview-row.total .num { font-weight: 600; font-size: 18px; }
.bpreview-row.subtotal {
  border-top: 1px solid var(--hairline);
  padding-top: 8px;
}

.bpreview-foot {
  border-top: 1px solid var(--hairline);
  padding: 12px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}

/* PDF address warning */
.bpreview-warn-box {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  font-size: 13px;
  color: var(--semantic-down);
  background: var(--surface-soft);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
}

/* ===== Sub-pane (sub-options visibles conditionnellement) ===== */

.bpane {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--surface-soft);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: 12px 14px;
}
.bpane-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}
.bpane-divider {
  height: 1px;
  background: var(--hairline);
  margin: 4px 0;
}

/* ===== Toggle buttons (Standard / Fer-angle, etc.) ===== */

.btoggle {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.btoggle-btn {
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--canvas);
  padding: 7px 12px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.btoggle-btn:hover { background: var(--surface-strong); }
.btoggle-btn.active {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary);
}
.btoggle-hint {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  font-size: 12px;
  color: var(--muted);
  margin-left: 4px;
}
.btoggle-btn.active .btoggle-hint { color: var(--primary); }

/* ===== Checkbox ===== */

.bcheckbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
}
.bcheckbox input {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
  cursor: pointer;
}

/* ===== Header bar du calculateur ===== */
.bheader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: var(--space-base);
}
.bheader h2 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.3px;
  margin: 0;
}
.bheader-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Mode embed · slot gauche du header (contient le bouton 'Retour aux
   calculateurs' rendu par le parent via options.onBack). */
.bheader-embed-left {
  display: flex;
  align-items: center;
}
.bback-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px;
  background: var(--surface-soft);
  border: 1px solid var(--hairline);
  color: var(--body);
  border-radius: var(--r-pill);
  font-family: inherit; font-size: 12px; font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.bback-btn:hover {
  background: var(--canvas);
  color: var(--primary);
  border-color: var(--primary);
}

/* ===== Section Ventilation : form + liste de trappes ===== */

.bvent-form {
  display: grid;
  grid-template-columns: 1fr 1fr 100px;
  gap: 12px;
}
@media (max-width: 600px) {
  .bvent-form { grid-template-columns: 1fr; }
}

.bbtn-vent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 36px;
  border-radius: var(--r-md);
  border: 1px solid var(--hairline);
  background: var(--surface-strong);
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.bbtn-vent[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
.bbtn-vent.is-valid {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
}
.bbtn-vent.is-edit:not(.is-valid) {
  background: var(--canvas);
  border-color: var(--primary);
  color: var(--primary);
}
.bbtn-vent .bicon {
  display: inline-flex;
}
.bbtn-vent .bicon svg {
  width: 14px;
  height: 14px;
}

.bvent-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bvent-list-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 6px 0 4px;
}
.bvent-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bvent-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  background: var(--surface-soft);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
}
.bvent-row-text {
  font-size: 13px;
  color: var(--ink);
}
.bvent-row-type { font-weight: 500; }
.bvent-row-sep { color: var(--muted); }
.bvent-row-qty { color: var(--muted); }
.bvent-row-price {
  margin-left: 6px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--primary);
}
.bvent-row-actions {
  display: flex;
  gap: 4px;
}

.bicon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--r-sm);
  border: none;
  background: transparent;
  color: var(--primary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.bicon-btn:hover { background: var(--surface-strong); }
.bicon-btn.is-danger { color: var(--semantic-down); }
.bicon-btn.is-danger:hover { background: rgba(207, 32, 47, 0.08); }
.bicon-btn svg { width: 16px; height: 16px; }

/* ===== Drawer "Gestion des prix" · 6 onglets + accordions =====
   Override LOCAL de la largeur du drawer-panel (assets/styles.css fixe
   `clamp(640px, 50vw, 820px)` pour le drawer du Cost Sheet · on l'élargit
   uniquement pour le drawer balcon pour donner de la place aux 2 colonnes
   d'accordéons). Sous 1100px on retombe au comportement par défaut.
*/
#bprice-overlay .drawer-panel {
  width: clamp(820px, 80vw, 1280px);
}
@media (max-width: 1100px) {
  #bprice-overlay .drawer-panel { width: clamp(640px, 90vw, 1100px); }
}
@media (max-width: 768px) {
  #bprice-overlay .drawer-panel { width: 100vw; }
}

/* Conteneur 2-colonnes pour les accordions (sauf onglet Liens qui a son
   propre layout via .bdep-grid). Sur mobile / petit écran : 1 colonne.
   On utilise column-count (flow CSS) plutôt que grid pour éviter les
   trous d'alignement quand un accordion ouvert est très haut à côté
   d'un petit accordion fermé. */
.bacc-cols {
  column-count: 2;
  column-gap: 12px;
}
@media (max-width: 900px) {
  .bacc-cols { column-count: 1; }
}


.bprice-tabs {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 18px;
  background: var(--surface-soft);
  border-radius: var(--r-md);
  padding: 4px;
}
@media (max-width: 720px) {
  .bprice-tabs { grid-template-columns: repeat(3, 1fr); border-radius: var(--r-md); }
}
.bprice-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: transparent;
  border: none;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  border-radius: var(--r-sm);
  transition: background 0.15s, color 0.15s;
}
.bprice-tab:hover { color: var(--ink); background: var(--canvas); }
.bprice-tab.active {
  background: var(--canvas);
  color: var(--ink);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.bprice-tab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bprice-tab-icon svg {
  width: 14px;
  height: 14px;
}
@media (max-width: 720px) {
  .bprice-tab span:last-child { display: none; }
  .bprice-tab-icon svg { width: 16px; height: 16px; }
}

.bprice-pane { display: none; }
.bprice-pane.active { display: block; }

/* ===== Accordion (sections d'un onglet) ===== */

.bacc {
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--canvas);
  overflow: hidden;
  /* En layout column-count : empêche un accordion de se faire couper
     entre deux colonnes, et ajoute le spacing vertical (gap n'existe
     pas pour les CSS columns). */
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  margin-bottom: 12px;
  /* width: 100% pour que les colonnes mesurent correctement */
  width: 100%;
}
.bacc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: transparent;
  border: none;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
.bacc-header:hover { background: var(--surface-soft); }
.bacc-chev {
  display: inline-flex;
  align-items: center;
  color: var(--muted);
  transition: transform 0.2s;
}
.bacc-chev svg { width: 14px; height: 14px; }
.bacc-header:not(.is-open) .bacc-chev { transform: rotate(-90deg); }
.bacc-body {
  padding: 4px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-top: 1px solid var(--hairline-soft);
}
.bacc-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--primary-soft);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  font-size: 13px;
  color: var(--primary);
}
.bacc-note-tag {
  display: inline-block;
  padding: 2px 8px;
  background: var(--primary);
  color: var(--on-primary);
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Groupe de prix dans une accordion-body */
.bprice-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bprice-group-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.bprice-table {
  display: grid;
  grid-template-columns: 1fr 130px 80px;
  gap: 6px 12px;
  align-items: center;
}
@media (max-width: 600px) {
  .bprice-table { grid-template-columns: 1fr 110px 60px; }
}
.bprice-th {
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--hairline);
}
.bprice-th.r { text-align: right; }
.bprice-row-lbl {
  font-size: 13px;
  color: var(--ink);
}
.bprice-row-unit {
  font-size: 11px;
  color: var(--muted);
}

/* ===== Tab Dépendances ===== */

.bdep-intro {
  margin-bottom: 18px;
  padding: 14px 16px;
  background: var(--surface-soft);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
}
.bdep-intro strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
}
.bdep-intro p {
  font-size: 13px;
  color: var(--body);
  margin: 0;
}

.bdep-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 720px) {
  .bdep-grid { grid-template-columns: 1fr; }
}

.bdep-card {
  padding: 12px 14px;
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--primary);
  border-radius: var(--r-md);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bdep-card-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.bdep-trigger {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 600;
  background: var(--primary-soft);
  color: var(--primary);
}
.bdep-arrow {
  color: var(--muted);
  font-size: 13px;
}
.bdep-effect {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 500;
  border: 1px solid var(--hairline);
  color: var(--body);
  background: var(--surface-soft);
}
.bdep-desc {
  margin: 0;
  font-size: 12px;
  color: var(--body);
  line-height: 1.5;
}

/* ===== Toast (notification flash) ===== */

.btoast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--ink);
  color: var(--canvas);
  padding: 10px 18px;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  z-index: 300;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
}
.btoast.show {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Color swatch (cercle de couleur à côté d'un nom) ===== */
.bcolor-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: var(--r-full);
  border: 1px solid var(--hairline);
  flex-shrink: 0;
}

/* ===== Pill toggle « Eye / Eye-off » (afficher/masquer les prix) ===== */
.bprice-toggle {
  position: relative;
  width: 56px;
  height: 28px;
  border-radius: var(--r-pill);
  background: var(--surface-strong);
  border: 1px solid var(--hairline);
  padding: 2px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.bprice-toggle.is-on {
  background: var(--primary-soft);
  border-color: var(--primary);
}
.bprice-toggle-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--r-full);
  background: var(--canvas);
  color: var(--muted);
  transition: transform 0.2s, color 0.2s, background 0.2s;
}
.bprice-toggle.is-on .bprice-toggle-thumb {
  transform: translateX(28px);
  color: var(--primary);
  background: var(--canvas);
}
.bprice-toggle-thumb svg {
  width: 14px;
  height: 14px;
}

/* ============================================================
   @media print · sortie PDF / impression
   Cache la chrome de la plateforme (sidebar, topbar) et les
   contrôles non-imprimables (boutons "Gérer les prix",
   toggle prix, boutons PDF eux-mêmes, drawer).
   Garde le formulaire + l'aperçu des coûts.
   ============================================================ */
@media print {
  /* Layout shell · masquer la chrome */
  .sidebar,
  .topbar,
  .bheader-actions,
  .bpreview-actions,
  .bprice-overlay {
    display: none !important;
  }

  /* Reprendre toute la largeur, fond blanc (économie d'encre) */
  body, .main, .content {
    background: #fff !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .content { padding: 12px !important; }

  /* L'aperçu des coûts (sticky sidebar) -> bloc normal en bas */
  .balcon-app { display: block !important; }
  .bpreview {
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    margin-top: 16px !important;
    page-break-inside: avoid;
  }

  /* Inputs/selects en lecture-seule visuelle */
  .binput, .bselect {
    border: 1px solid #ccc !important;
    background: #fff !important;
  }

  /* Évite les sauts de page disgracieux au milieu d'une carte */
  .bcard, .bsub-info { page-break-inside: avoid; }
}