/* --------------------------------------------------------------------------
   Devis béton prêt à l'emploi (beton.html) — réutilise les variables et
   composants déjà définis dans app.css/stock.css (.pv-input, .qp-field-label,
   .btn-reorder, .btn-outline...).
-------------------------------------------------------------------------- */

.beton-content{ padding:0 18px 32px; }

.beton-recap{
  font-family:var(--mono); font-size:11.5px; color:var(--concrete); font-weight:600;
  margin-bottom:10px; padding:0 2px;
}

@keyframes beton-card-in{
  from{ opacity:0; transform:translateY(6px); }
  to{ opacity:1; transform:translateY(0); }
}

.beton-element-card{
  background:var(--white); border:1px solid var(--concrete-light); border-radius:var(--radius-md);
  padding:14px 16px; margin-bottom:12px;
  animation:beton-card-in 0.25s ease both;
}
.beton-element-top{ display:flex; align-items:flex-start; gap:10px; margin-bottom:12px; }

.beton-type-row{
  flex:1; display:flex; gap:6px; overflow-x:auto; padding-bottom:2px; scrollbar-width:none;
}
.beton-type-row::-webkit-scrollbar{ display:none; }
.beton-type-chip{
  display:flex; align-items:center; gap:5px; flex-shrink:0; white-space:nowrap;
  font-family:var(--body); font-size:11.5px; font-weight:600; color:var(--concrete);
  background:var(--concrete-light); border:none; border-radius:100px; padding:7px 12px 7px 8px;
  cursor:pointer; transition:background 0.2s, color 0.2s, transform 0.15s;
}
.beton-type-chip:hover{ transform:translateY(-1px); }
.beton-type-chip.active{ background:var(--signal); color:white; }
.beton-type-icon{ font-size:13px; line-height:1; }

.beton-element-remove{
  background:none; color:var(--concrete); border:none; width:30px; height:30px; flex-shrink:0;
  border-radius:9px; cursor:pointer; font-size:13px; transition:background 0.15s, color 0.15s;
}
.beton-element-remove:hover{ background:var(--danger-bg); color:var(--danger); }

.beton-element-fields{ display:flex; gap:10px; flex-wrap:wrap; }
.beton-field{ flex:1; min-width:110px; }
.beton-field label{ font-family:var(--mono); font-size:10.5px; color:var(--concrete); display:block; margin-bottom:4px; }
.beton-field input{
  width:100%; border:1px solid transparent; background:var(--concrete-light); border-radius:10px;
  padding:9px 10px; font-size:13px; font-family:var(--body); color:var(--ink); outline:none;
  transition:border-color 0.15s, background 0.15s;
}
.beton-field input:focus{ border-color:var(--signal); background:var(--white); }
.beton-element-vol{ text-align:right; font-family:var(--mono); font-size:11.5px; color:var(--concrete); margin-top:8px; }

.beton-element-footer{ display:flex; justify-content:space-between; align-items:center; margin-top:8px; }
.beton-element-duplicate{
  background:none; border:none; color:var(--signal); font-family:var(--body); font-size:11.5px;
  font-weight:600; cursor:pointer; padding:4px 0;
}
.beton-element-duplicate:hover{ text-decoration:underline; }

.beton-total-card{
  display:flex; justify-content:space-between; align-items:baseline; background:var(--card-soft);
  border-radius:var(--radius-md); padding:16px 18px; margin:16px 0;
}
.beton-total-card span:first-child{ font-size:13px; color:var(--concrete); }
.beton-total-card span:last-child{ font-family:var(--display); font-weight:800; font-size:19px; color:var(--ink); }

.beton-options select{
  width:100%; border:1px solid transparent; background:var(--concrete-light); border-radius:14px;
  padding:13px 16px; font-size:13.5px; font-family:var(--body); color:var(--ink); outline:none; margin-bottom:14px;
}
.beton-checkbox{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink); font-weight:500; }
.beton-checkbox input{ width:18px; height:18px; accent-color:var(--signal); }

.beton-estimate-card{
  background:var(--white); box-shadow:var(--shadow-soft); border-radius:var(--radius-md);
  padding:18px 20px; margin-top:16px; font-size:13px;
}
.beton-estimate-row{ display:flex; justify-content:space-between; padding:5px 0; color:var(--concrete); font-size:12.5px; }
.beton-estimate-row.total{
  flex-direction:column; align-items:flex-start; gap:2px;
  border-top:1px solid var(--concrete-light); margin-top:10px; padding-top:16px;
}
.beton-estimate-row.total > span:first-child{
  font-family:var(--mono); font-size:11px; font-weight:600; color:var(--concrete);
  text-transform:uppercase; letter-spacing:0.03em;
}
.beton-estimate-row.total > span:last-child{
  font-family:var(--display); font-weight:800; font-size:30px; color:var(--signal); line-height:1.2;
}
.beton-estimate-note{ font-size:11.5px; color:var(--concrete); margin-top:12px; line-height:1.5; }
.beton-warning{
  background:var(--warn-bg); color:var(--warn); font-size:12px; padding:10px 14px;
  border-radius:12px; margin-top:10px;
}

.beton-conditions{
  background:var(--blue-bg); border-radius:var(--radius-md); padding:16px 18px; margin-top:14px;
}
.beton-conditions-title{ font-family:var(--display); font-weight:700; font-size:13px; color:var(--blue); margin-bottom:8px; }
.beton-conditions ul{ margin:0; padding-left:18px; }
.beton-conditions li{ font-size:12px; color:var(--ink); line-height:1.6; margin-bottom:6px; }
.beton-conditions li:last-child{ margin-bottom:0; color:var(--concrete); font-style:italic; }
.beton-conditions b{ font-weight:700; }

.beton-quote-form{
  background:var(--card-soft); border-radius:var(--radius-md); padding:18px; margin-top:16px;
}

.beton-confirmation{
  background:var(--ok-bg); border-radius:var(--radius-md); padding:26px 20px; margin-top:16px; text-align:center;
}
.beton-confirmation-ref-row{ display:flex; align-items:center; justify-content:center; gap:10px; margin:10px 0; }
.beton-confirmation-ref{
  font-family:var(--display); font-weight:800; font-size:24px; letter-spacing:0.02em; color:var(--ok);
  animation:beton-card-in 0.35s ease both;
}
.beton-confirmation-copy{
  background:white; border:1px solid rgba(34,197,94,0.25); color:var(--ok); border-radius:10px;
  font-size:11.5px; font-weight:700; padding:6px 10px; cursor:pointer; transition:transform 0.15s;
}
.beton-confirmation-copy:hover{ transform:translateY(-1px); }
.beton-confirmation-email-note{ font-size:11.5px; color:var(--concrete); margin-top:10px; }