/* « Démo sur mesure », questionnaire v3 (21/10/2026). Uses the site tokens from styles.css
   (--surface, --line, --primary…), so the page follows the site design; no external font or script. */
.demo-request{padding:64px 0 90px}
.demo-layout{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:48px;align-items:start}
.demo-aside{position:sticky;top:110px}
.demo-aside h2{font-size:clamp(24px,2.6vw,32px);line-height:1.1;letter-spacing:-.04em;margin:12px 0 8px}
.demo-aside .check-list{font-size:15px;color:var(--muted)}
.demo-card{padding:28px;min-width:0}
.demo-card [hidden]{display:none!important}
.demo-progress{margin-bottom:22px}
.demo-progress-label{margin:0 0 8px;font-size:14px;font-weight:700;color:var(--text)}
.demo-progress-bar{height:8px;border-radius:999px;background:var(--surface-soft);border:1px solid var(--line);overflow:hidden}
.demo-progress-bar span{display:block;height:100%;background:var(--primary);border-radius:inherit;transition:width .25s ease}
/* One short page at a time, with a page transition on every change. */
.demo-request .demo-page{padding:0;min-height:220px}
.demo-page.is-entering{animation:demo-page-in .28s ease-out both}
.demo-page.is-entering.from-back{animation-name:demo-page-back}
@keyframes demo-page-in{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
@keyframes demo-page-back{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}
.demo-page h2{font-size:clamp(24px,2.6vw,32px);letter-spacing:-.03em;line-height:1.15;margin:0 0 16px;outline:none}
/* Focus programmatique sur le titre de l'écran : sans cadre ; indicateur au clavier seulement. */
.demo-page h2:focus,.demo-page h2:focus-visible{outline:none}
.demo-keyboard .demo-page h2:focus-visible{outline:2px solid var(--primary);outline-offset:4px;border-radius:4px}
.demo-page>.dq-hint{margin:-6px 0 16px}
.demo-page .form-grid{gap:16px}
.demo-page .field{min-width:0}
.demo-page .field input:not([type=checkbox]):not([type=radio]),.demo-page .field textarea,.demo-page .field select{width:100%;min-width:0;min-height:46px}
.demo-page .field select{border-radius:8px;background:var(--bg)}
.demo-page .field select:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);outline:none}
.demo-page .field textarea{min-height:76px}
.dq-choice{border:0;margin:0;padding:0;min-width:0}
.dq-choice legend{font-size:13px;font-weight:700;padding:0;margin-bottom:8px}
.dq-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.dq-options:has(> :nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
.dq-option{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);cursor:pointer;font-size:14px;line-height:1.35;min-height:44px}
.demo-card input[type=checkbox],.demo-card input[type=radio]{accent-color:var(--primary);padding:0;min-height:0;margin:2px 0 0;flex:none;width:18px;height:18px;box-shadow:none}
.dq-option:has(input:checked){border-color:var(--primary);background:var(--primary-soft)}
.dq-option:has(input:focus-visible){outline:3px solid var(--primary-soft);outline-offset:1px}
.dq-hint{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.demo-functions-hint{margin:14px 0 0}
.demo-health{margin:14px 0 0}
.field-error{margin:4px 0 0;font-size:13px;font-weight:700;color:#a3261b}
[data-theme="dark"] .field-error{color:#ff9d8f}
[aria-invalid="true"]{border-color:#a3261b!important}
.demo-page .consent{font-size:14px;margin:14px 0 6px;align-items:flex-start}
.demo-turnstile{margin:14px 0 6px}
.demo-summary{margin:0 0 18px;border:1px solid var(--line);border-radius:14px;background:var(--surface-soft);padding:4px 16px;max-height:min(55vh,460px);overflow:auto;overscroll-behavior:contain}
.demo-summary:focus-visible{outline:3px solid var(--primary-soft);outline-offset:2px}
.demo-summary dt{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-weight:700;font-size:14px;padding-top:10px;border-top:1px solid var(--line)}
.demo-summary dt:first-child{border-top:0}
.demo-summary dd{margin:2px 0 10px;font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.demo-summary ul{margin:0;padding-left:18px}
.demo-summary li strong{color:var(--text);font-weight:600}
.demo-status{min-height:1.4em;margin:12px 0 0;font-weight:700;color:var(--text)}
.demo-status:empty{margin:0;min-height:0}
.demo-nav{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.demo-nav [data-demo-next],.demo-nav [data-demo-submit]{margin-left:auto}
.demo-nav .button{min-height:46px;font-size:14px}
.demo-nav .button:disabled{opacity:.5;cursor:not-allowed}
.demo-nav .demo-skip{border-color:transparent;color:var(--muted)}
.demo-express{margin-top:12px;text-align:right}
.demo-express .demo-link-button{font-weight:700}
.demo-saved{margin:14px 0 0;font-size:12px;color:var(--muted)}
.demo-link-button{border:0;background:none;padding:0;color:var(--primary);font:inherit;text-decoration:underline;cursor:pointer}
.demo-edit{flex:none;font-size:13px;font-weight:600}
.demo-hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.demo-success{outline:none}
.demo-success h2{font-size:clamp(24px,2.6vw,32px);letter-spacing:-.03em;line-height:1.15;margin:10px 0 12px}
/* Bulle « Clara » remontée par demo-request.js au-dessus de la barre d'actions (pages de la démo uniquement). */
body[data-page="demo-request"] .cs-chat-launcher.cs-clara{transition:transform .2s ease}
/* Message de bienvenue de Clara : main.js ne l'affiche pas sur les pages de formulaire (contact, essai,
   tarifs) ; masqué ici aussi pour ne jamais couvrir la barre d'actions du questionnaire. */
body[data-page="demo-request"] .cs-chat-welcome{display:none!important}
.demo-request-link{margin-block:0}
.demo-request-link .notice{margin:0 0 24px}
@media (max-width:900px){.demo-layout{grid-template-columns:1fr;gap:28px}.demo-aside{position:static}}
@media (max-width:640px){
  .demo-request{padding:36px 0 110px}
  .demo-card{padding:18px}
  .demo-page .form-grid{grid-template-columns:1fr}
  .dq-options,.dq-options:has(> :nth-child(3):last-child){grid-template-columns:1fr}
  .demo-nav .button{flex:1 1 auto}
  .demo-nav [data-demo-next],.demo-nav [data-demo-submit]{margin-left:0;flex-basis:100%;order:-1}
  .demo-express{text-align:left}
}
@media (prefers-reduced-motion:reduce){.demo-progress-bar span{transition:none}.demo-page.is-entering{animation:none}body[data-page="demo-request"] .cs-chat-launcher.cs-clara{transition:none}}