/* Simulations commerciales: mêmes tokens et shell que les démos existantes. */
.commerce-controls { border:0; padding:0; margin:24px 0 0; min-width:0 }
.commerce-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(24px,4vw,56px) }
.commerce-grid > div { min-width:0 }
.commerce-grid fieldset { border:1px solid var(--line); border-radius:12px; margin:16px 0; padding:16px; min-width:0 }
.commerce-grid legend { font-weight:600 }
.commerce-field { display:grid; gap:8px; margin:18px 0; font-weight:600 }
.commerce-field input,.commerce-field select { width:100%; min-width:0; padding:12px; color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:8px }
.commerce-option { display:flex; align-items:center; gap:12px; min-height:44px; padding:6px 0 }
.commerce-option input { flex:0 0 auto; width:20px; height:20px; accent-color:var(--ink) }
.commerce-option small { display:block; margin-top:6px }
.commerce-summary { background:var(--sage); padding:20px; border-radius:12px; margin-bottom:20px }
.commerce-summary dl div { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; margin:16px 0 }
.commerce-summary dd { margin:0 }
.commerce-group,.commerce-setting { border-bottom:1px solid var(--line); padding:12px 0 }
.commerce-group summary { padding:10px 0; cursor:pointer; font-weight:600; min-height:44px }
.commerce-setting { margin-left:16px }
.commerce-tasks { padding-left:24px }
.commerce-tasks li { border-bottom:1px solid var(--line); padding:12px 0 }
.commerce-tasks p { margin:8px 0; font-weight:600 }
.commerce-field progress { width:100%; height:20px; accent-color:var(--ink) }
.commerce-dialog { width:min(600px,calc(100% - 32px)); max-height:85dvh; overflow:auto; padding:clamp(20px,4vw,40px); border:1px solid var(--line); border-radius:16px; color:var(--ink); background:var(--paper) }
.commerce-dialog::backdrop { background:rgb(32 35 31 / .5) }
.commerce-dialog h3 { font-size:1.5rem }
.commerce-dialog [data-dialog-body] { line-height:1.7 }
.commerce-demo button { white-space:normal; max-width:100% }
.commerce-demo mark { background:var(--lime); color:var(--ink) }
@media(max-width:767px) { .commerce-grid { grid-template-columns:minmax(0,1fr) } }