.approval.interactive-demo { max-width: none; }
.interactive-demo .approval-intro p { font-size: 1rem; }
.interactive-demo .approval-intro .fiction-note { font-size: .875rem; }
.demo-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 0 22px 16px; }
.demo-controls label, .contact-form label { display: flex; flex-direction: column; gap: 8px; font-size: .875rem; font-weight: 600; }
.demo-controls select, .contact-form input, .contact-form select, .contact-form textarea {
  width: 100%; min-width: 0; padding: 12px; border: 1px solid var(--control-border); border-radius: 6px;
  background: var(--bg); color: var(--ink); font: 1rem/1.4 var(--font-body);
}
.demo-controls select:focus-visible, .contact-form :is(input, select, textarea):focus-visible {
  outline: 3px solid var(--focus); outline-offset: 3px;
}
.demo-business { margin: 0; padding: 0 22px 18px; font-size: .875rem; color: var(--muted); }
.demo-panes { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); border-top: 1px solid var(--border); }
.demo-pane { min-width: 0; padding: 22px; border-bottom: 0; }
.demo-pane h3 { margin: 0 0 20px; font: 500 1.375rem/1.3 var(--font-heading); }
.visitor-pane { background: var(--bg); }
.merchant-pane { border-left: 1px solid var(--border); }
.demo-label { display: block; font-size: .875rem; font-weight: 600; margin-bottom: 8px; color: var(--muted); }
.demo-bubble { margin: 0 0 24px; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; font-size: 1rem; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.demo-response { background: var(--green-soft); border-color: var(--green-border); color: var(--green-ink); }
.demo-wait { border-left: 3px solid var(--arnica); padding: 8px 0 8px 14px; color: var(--muted); font-size: 1rem; line-height: 1.6; }
.merchant-pane .approval-head { padding: 12px; border: 1px solid var(--arnica); border-radius: 6px; margin-bottom: 16px; }
.merchant-pane .approval-status, .merchant-pane .approval-meta { font-size: .875rem; }
.merchant-request { font-size: .875rem; line-height: 1.5; color: var(--muted); margin: 0 0 16px; }
.merchant-pane .approval-field { font: 1rem/1.6 var(--font-body); }
.demo-internal { color: var(--muted); font-size: .875rem; line-height: 1.5; margin: 12px 0 16px; }
.demo-outcome { font-size: 1rem; line-height: 1.5; padding: 12px; border: 1px solid var(--green-border); border-radius: 6px; background: var(--green-soft); }
.demo-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.demo-journal { margin-top: 20px; border-top: 1px solid var(--border); padding-top: 16px; color: var(--muted); font-size: .875rem; line-height: 1.6; }
.demo-journal summary { cursor: pointer; color: var(--ink); }
.demo-journal ol { padding-left: 20px; margin-bottom: 0; }
.demo-views { display: none; }
.mobile-result { display: none; }
.contact-form { --focus: var(--link); width: 100%; max-width: 820px; padding: 28px; background: var(--bg); color: var(--ink); border: 1px solid var(--border); border-radius: 10px; }
.contact-form fieldset { padding: 0; border: 0; margin: 0; min-width: 0; }
.contact-form legend { font: 500 1.5rem/1.3 var(--font-heading); padding: 0 0 24px; }
.contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-bottom: 24px; }
.contact-wide { grid-column: 1 / -1; }
.contact-form label span { font-weight: 400; color: var(--muted); }
.contact-form textarea { resize: vertical; }
.contact-form ::placeholder { color: var(--faint); opacity: 1; }
.contact-form input[aria-invalid="true"], .contact-form textarea[aria-invalid="true"], .contact-form select[aria-invalid="true"] { border-color: var(--danger); }
.contact-form .btn-arnica { border: 0; cursor: pointer; }
.contact-form button:disabled { opacity: .6; cursor: wait; }
.cta-band .contact-form p { font-size: .875rem; line-height: 1.6; max-width: none; margin: 16px 0 0; color: var(--muted); }
.cta-band .contact-form #contact-error { color: var(--danger); }
.cta-band .contact-form .contact-success { color: var(--green-ink); font-size: 1rem; }
.contact-form #contact-retry { margin-top: 16px; }
.contact-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.cta-band .contact-fallback a { color: var(--band-ink); text-underline-offset: 3px; }
#donnees-contact { scroll-margin-top: 140px; }
@media (max-width: 759px) {
  .demo-controls, .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .demo-views { display: flex; gap: 8px; padding: 0 22px 18px; }
  .demo-views button { flex: 1; padding: 12px 6px; font: 600 .875rem/1.3 var(--font-body); border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--ink); cursor: pointer; }
  .demo-views button[aria-pressed="true"] { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
  .demo-panes { grid-template-columns: minmax(0, 1fr); }
  .merchant-pane { border-left: 0; }
  .mobile-result { display: inline-block; }
  .contact-form { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}