/* ==========================================================================
   LLM ECO — CALCULATEUR DE DEVIS
   ========================================================================== */

/* ---- Sélecteur de prestation ---- */
.devis-services { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-3); margin-bottom: var(--sp-7); }
.devis-service { display: flex; flex-direction: column; gap: var(--sp-2); align-items: center; text-align: center; padding: var(--sp-5) var(--sp-3); border-radius: var(--r-md); background: var(--surface-1); border: 1px solid var(--line); color: var(--text-muted); transition: all var(--dur-fast) var(--ease-out); }
.devis-service:hover { transform: translateY(-3px); border-color: var(--line-strong); color: var(--text-base); }
.devis-service.is-active { border-color: var(--t-accent); background: color-mix(in srgb, var(--t-accent) 12%, var(--surface-1)); color: var(--text-strong); box-shadow: 0 0 0 1px var(--t-accent); }
.devis-service__ic { font-family: var(--font-mono); font-size: 1.3rem; color: var(--t-accent); }
.devis-service__label { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm); }

/* ---- Disposition calculateur ---- */
.devis-layout { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--sp-6); align-items: start; }

.devis-form { display: grid; gap: var(--sp-5); padding: var(--sp-6); border-radius: var(--r-lg); background: linear-gradient(180deg, var(--surface-1), var(--ink-900)); border: 1px solid var(--line); }
.devis-form__intro { color: var(--text-muted); font-size: var(--fs-sm); }
.devis-group { display: grid; gap: var(--sp-4); }
.devis-group + .devis-group { padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.devis-group__title { font-family: var(--font-display); font-weight: 600; color: var(--text-base); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: var(--tracking-wide); }

.dfield { display: grid; gap: 6px; }
.dfield > label { font-size: var(--fs-sm); font-weight: 600; color: var(--text-base); display: flex; justify-content: space-between; gap: var(--sp-3); }
.dfield .val { color: var(--t-accent); font-family: var(--font-mono); }
.dfield input[type=number], .dfield select { width: 100%; padding: 0.7rem 0.9rem; border-radius: var(--r-sm); background: var(--ink-950); border: 1px solid var(--line-strong); color: var(--text-strong); }
.dfield input:focus, .dfield select:focus { outline: none; border-color: var(--t-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--t-accent) 22%, transparent); }
.dfield input[type=range] { width: 100%; accent-color: var(--t-accent); }
.drow { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }

/* options à cocher */
.dopts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.dopt { display: flex; align-items: center; gap: var(--sp-3); padding: 0.7rem 0.9rem; border-radius: var(--r-sm); border: 1px solid var(--line); cursor: pointer; transition: border-color var(--dur-fast), background var(--dur-fast); }
.dopt:hover { border-color: var(--line-strong); }
.dopt input { accent-color: var(--t-accent); width: 18px; height: 18px; }
.dopt span { font-size: var(--fs-sm); color: var(--text-base); }
.dopt:has(input:checked) { border-color: var(--t-accent); background: color-mix(in srgb, var(--t-accent) 10%, transparent); }

/* ---- Récapitulatif (sticky) ---- */
.devis-summary { position: sticky; top: calc(var(--header-h) + var(--sp-3)); display: grid; gap: var(--sp-4); padding: var(--sp-6); border-radius: var(--r-lg); background: linear-gradient(160deg, color-mix(in srgb, var(--t-accent) 10%, var(--ink-850)), var(--ink-1000)); border: 1px solid var(--line-strong); }
.devis-summary__title { font-family: var(--font-display); font-weight: 700; color: var(--text-strong); }
.devis-lines { display: grid; gap: var(--sp-2); }
.devis-line { display: flex; justify-content: space-between; gap: var(--sp-4); font-size: var(--fs-sm); color: var(--text-muted); padding-bottom: var(--sp-2); border-bottom: 1px dashed var(--line); }
.devis-line span:last-child { color: var(--text-base); font-family: var(--font-mono); white-space: nowrap; }
.devis-line.is-sub { color: var(--text-faint); font-size: var(--fs-xs); }
.devis-total { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); margin-top: var(--sp-2); }
.devis-total__label { color: var(--text-muted); font-size: var(--fs-sm); }
.devis-total__amount { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.8rem, 4vw, 2.6rem); color: var(--text-strong); }
.devis-total__amount .cur { font-size: 0.5em; color: var(--t-accent); margin-left: 2px; }
.devis-range-note { font-size: var(--fs-xs); color: var(--text-faint); }
.devis-badge-est { display: inline-flex; align-items: center; gap: 6px; padding: 0.3rem 0.7rem; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 600; background: rgba(255,195,77,0.12); color: var(--warning); border: 1px solid rgba(255,195,77,0.3); width: fit-content; }
.devis-summary__note { font-size: var(--fs-xs); color: var(--text-faint); line-height: 1.5; }
.devis-summary__cta { display: grid; gap: var(--sp-2); margin-top: var(--sp-2); }
.devis-empty { color: var(--text-faint); font-size: var(--fs-sm); text-align: center; padding: var(--sp-5) 0; }

/* statut d'envoi */
.devis-sent { font-size: var(--fs-sm); padding: var(--sp-3); border-radius: var(--r-sm); display: none; }
.devis-sent.ok { display: block; background: rgba(47,211,154,0.12); color: var(--success); border: 1px solid rgba(47,211,154,0.3); }
.devis-sent.err { display: block; background: rgba(255,107,107,0.12); color: var(--danger); border: 1px solid rgba(255,107,107,0.3); }

@media (max-width: 920px) {
  .devis-services { grid-template-columns: repeat(3, 1fr); }
  .devis-layout { grid-template-columns: 1fr; }
  .devis-summary { position: static; }
}
@media (max-width: 520px) {
  .devis-services { grid-template-columns: repeat(2, 1fr); }
  .drow, .dopts { grid-template-columns: 1fr; }
}