/* Enveloppe de la page dédiée ; les trois démonstrations utilisent les styles du site existant. */
.sm-demonstrations-page .header nav { gap: 24px; }
.sm-demonstrations-page .sm-demo-hero { padding-block: 30px 48px; }
.sm-demo-breadcrumb { margin-bottom: 36px; color: #596b87; font-size: .875rem; line-height: 1.7; }
.sm-demo-breadcrumb a { text-decoration: underline; text-underline-offset: 4px; }
.sm-demo-hero h1 { max-width: 920px; margin-top: 18px; font-size: clamp(2.8rem, 5.5vw, 4.7rem); line-height: 1.1; }
.sm-demo-hero h1 em { color: #245bff; font-style: normal; }
.sm-demo-lead { max-width: 820px; margin-top: 22px; font-size: 1.1rem; line-height: 1.85; color: #485a78; }
.sm-demo-notice, .sm-demo-nojs { max-width: 820px; margin-top: 22px; padding: 16px 20px; border: 1px solid #cbd8ee; border-radius: 10px; background: #f2f6ff; font-size: .9375rem; line-height: 1.8; color: #3e5476; }
.sm-demonstrations-page .examples-section { padding-block: 58px 70px; }
.sm-demonstrations-page .demo-cards button[aria-selected="true"] > span,
.sm-demonstrations-page .demo-cards button[aria-selected="true"] small { color: #fff; }
.sm-demonstrations-page .demo-shell, .sm-demonstrations-page .dash-main,
.sm-demonstrations-page .reading-grid > *, .sm-demonstrations-page .site-demo-grid > *,
.sm-demonstrations-page .ai-workspace > * { min-width: 0; }
.sm-demonstrations-page .trace-preview pre { max-width: 100%; overflow-x: auto; }
.sm-demonstrations-page .email-example p, .sm-demonstrations-page .news-preview p,
.sm-demonstrations-page .history-list, .sm-demonstrations-page .source-document p { overflow-wrap: anywhere; }
.sm-demonstrations-page .sm-demo-next { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding-block: 60px; }
.sm-demo-next h2 { margin-top: 14px; font-size: clamp(1.9rem, 3vw, 2.7rem); }
.sm-demo-next p:not(.eyebrow) { max-width: 690px; margin-top: 16px; color: #485a78; line-height: 1.85; }
.sm-demo-next > .button { flex-shrink: 0; }
.sm-demonstrations-page:not(.js) .demo-cards,
.sm-demonstrations-page:not(.js) .menu-toggle,
.sm-demonstrations-page:not(.js) .scenario-picker,
.sm-demonstrations-page:not(.js) .demo-shell form button,
.sm-demonstrations-page:not(.js) .demo-shell button[type="button"] { display: none; }
.sm-demonstrations-page:not(.js) [role="tabpanel"][hidden] { display: block !important; margin-top: 44px; padding-top: 30px; border-top: 1px solid #cbd8ee; }
@media (max-width: 900px) {
  .sm-demonstrations-page .sm-demo-next { align-items: flex-start; flex-direction: column; gap: 26px; }
}
@media (max-width: 650px) {
  .sm-demonstrations-page .sm-demo-hero { padding-block: 22px 36px; }
  .sm-demo-breadcrumb { margin-bottom: 26px; }
  .sm-demo-hero h1 { font-size: clamp(2.5rem, 10.5vw, 3.6rem); }
  .sm-demo-lead { font-size: 1rem; }
  .sm-demo-notice, .sm-demo-nojs { padding: 14px 16px; font-size: .875rem; }
  .sm-demonstrations-page .examples-section { padding-block: 40px 48px; }
  .sm-demonstrations-page .sm-demo-next { padding-block: 42px; }
  .sm-demo-next > .button { width: 100%; }
}
@media print {
  .sm-demonstrations-page .examples-section { display: block; padding-block: 20px; }
  .sm-demonstrations-page [role="tabpanel"][hidden] { display: block !important; }
  .sm-demonstrations-page .sm-demo-next, .sm-demonstrations-page .demo-cards,
  .sm-demonstrations-page .demo-shell button { display: none; }
}