/* Une démo se lit comme une scène entière, avec ses commandes au même endroit. */
html { scroll-padding-top: 96px; }
html.has-reading-progress body::after { content: none; animation: none; }
.reading-progress { position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: 100; pointer-events: none; background: var(--gradient); transform: scaleX(0); transform-origin: left center; contain: paint; }
.workflow-demo { scroll-margin-top: 12px; padding: 24px; margin-block: 24px 64px; }
.lesson-lab, [id^='information-'], .article-body h2, .article-body h3, .prose h2[id^='jour-'] { scroll-margin-top: 12px; }
.workflow-demo > .section-heading { display: block; max-width: none; margin-bottom: 14px; }
.workflow-demo > .section-heading h2 { font-size: clamp(1.8rem, 2.5vw, 2.1rem); letter-spacing: -.04em; line-height: 1.14; margin-bottom: 0; }
.workflow-demo > .section-heading > p:last-child { display: none; }
.wf-tabs { margin-bottom: 14px; }
.wf-tab-short { display: none; }
.workflow-demo.is-enhanced .wf-panel { margin-top: 0; }
.wf-panel-heading { margin-bottom: 0; }
.wf-workbench { padding-block: 0; border: 0; }
.wf-before { display: none; }
.wf-workbench { display: block; }
.wf-toolbar { margin-top: 16px; min-height: 54px; }
.wf-counter { display: inline-flex; align-items: center; font-size: .78rem; font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
.wf-disclaimer { font-size: .75rem; margin-top: 14px; color: var(--muted); }
.wf-disclaimer summary { display: flex; align-items: center; gap: 8px; min-height: 32px; width: fit-content; list-style: none; }
.wf-disclaimer summary::-webkit-details-marker { display: none; }
.wf-disclaimer summary::after { content: '+'; font-size: 1rem; }
.wf-disclaimer[open] summary::after { content: '−'; }
.wf-disclaimer p { margin: 8px 0 0; max-width: 90ch; }
.workflow-demo.is-enhanced .wf-panel { --wf-scene-height: 380px; }
.workflow-demo.is-enhanced .wf-app { min-height: var(--wf-scene-height); }
.workflow-demo .wf-appbar { padding: 12px 16px; }
.workflow-demo .wf-docs-menu { display: none; }
.workflow-demo .wf-docs-tools { padding-block: 8px; }
.workflow-demo .wf-docs-desk { padding: 14px 20px; }
.workflow-demo .wf-docs-page { min-height: 230px; padding: 18px 22px; }
.workflow-demo .wf-docs-page h4 { margin-bottom: 12px; }
.workflow-demo .wf-docs-block { margin-top: 10px; }
.workflow-demo .wf-docs-outline li { padding-block: 4px; }
.workflow-demo .wf-docs-comment { margin-top: 12px; }
.workflow-demo .wf-approved { margin-top: 12px; }
.workflow-demo .wf-gmail-layout { min-height: 310px; }
.workflow-demo .wf-app { transition: border-color .25s; }
.workflow-demo .wf-scene.is-entering .wf-app { animation: vivant-scene .4s var(--ease) both; }
@keyframes vivant-scene { from { opacity: .65; transform: translateY(7px); } to { opacity: 1; transform: none; } }

@media (min-width: 980px) {
 .workflow-demo.is-enhanced .wf-panel { display: grid; grid-template-columns: 250px minmax(0, 1fr); grid-template-rows: auto 1fr auto; gap: 12px 28px; }
 .workflow-demo.is-enhanced .wf-panel-heading { grid-column: 1; grid-row: 1; align-items: start; gap: 10px; }
 .workflow-demo .wf-panel-heading h3 { font-size: 1.1rem; line-height: 1.35; }
 .workflow-demo .wf-panel-heading p { font-size: .875rem; line-height: 1.5; }
 .workflow-demo.is-enhanced .wf-path { grid-column: 1; grid-row: 2; grid-template-columns: 1fr; align-content: start; gap: 8px; margin: 0; }
 .workflow-demo .wf-path button { flex-direction: row; gap: 12px; min-height: 56px; padding: 5px 8px; text-align: left; font-size: .875rem; }
 .workflow-demo .wf-step-icon { width: 40px; height: 40px; border-radius: 12px; }
 .workflow-demo .wf-path li:not(:last-child)::after { width: 1px; height: 13px; left: 28px; top: 51px; }
 .workflow-demo.is-enhanced .wf-workbench { grid-column: 2; grid-row: 1 / span 2; }
 .workflow-demo.is-enhanced .wf-toolbar { grid-column: 1 / -1; grid-row: 3; margin: 0; padding-top: 14px; border-top: 1px solid var(--line); }
 .workflow-demo .wf-toolbar p { flex: 1 1 300px; }
 .learning-hero { padding-block: 48px; }
 main > .section:not(.workflow-demo) > .section-heading { display: grid; grid-template-columns: 1.12fr 1fr; align-items: end; gap: 20px 36px; max-width: none; margin-bottom: 30px; }
 main > .section:not(.workflow-demo) > .section-heading > h2 { margin: 0; font-size: clamp(2rem, 2.6vw, 2.65rem); letter-spacing: -.04em; }
 main > .section:not(.workflow-demo) > .section-heading > p:last-child:not(.eyebrow) { margin: 0; font-size: 1rem; max-width: 55ch; }
 main > .section:not(.workflow-demo) > .section-heading > .eyebrow { display: none; }
 .lesson-lab { padding: 28px; margin-bottom: 52px; }
 .lesson-heading { margin-bottom: 20px; }
 .lesson-controls { margin-top: 16px; padding-top: 16px; }
 .lesson-window-body { min-height: 225px; }
}

/* Une couleur accompagne le choix ; les textes gardent leur contraste. */
.lesson-choices > button, .lesson-step-list > button { box-shadow: none; }
.lesson-choices > button[aria-selected='true'], .lesson-step-list > button[aria-selected='true'] { box-shadow: none; }
.lesson-icon, .card-icon, .lesson-module-number > span { transition: transform .3s var(--ease); }
.text-link, .lesson-jump { text-decoration-thickness: 1px; text-underline-offset: .3em; }
.lesson-step-list > button:active, .lesson-choices > button:active { transform: scale(.985); }
@media (hover: hover) and (pointer: fine) {
 :is(.card, .build-card, .course-cards > article):is(:hover, :focus-within) .lesson-icon { transform: translateY(-3px) rotate(-4deg); }
 .lesson-disclosure summary:hover, .lesson-days a:hover { background: var(--lesson-blue-bg); }
 .wf-path button:hover .wf-step-icon { transform: translateY(-2px); }
}
.wf-step-icon { transition: transform .25s var(--ease), color .25s, background .25s; }
.wf-path [aria-current='step'] .wf-step-icon { box-shadow: none; }

@media (min-width: 680px) and (max-width: 979px) {
 .workflow-demo > .section-heading { display: block; }
 .workflow-demo > .section-heading h2 { margin-bottom: 12px; }
 .wf-panel-heading { margin-bottom: 14px; }
 .wf-path { margin-bottom: 14px; }
}
@media (max-width: 679px) {
 html { scroll-padding-top: 80px; }
 .workflow-demo { padding: 18px 14px; scroll-margin-top: 10px; border-radius: 24px; }
 .workflow-demo > .section-heading { margin-bottom: 14px; }
 .workflow-demo > .section-heading h2 { font-size: 1.5rem; margin-bottom: 0; }
 .workflow-demo > .section-heading > p:last-child { display: none; }
 .wf-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 14px; }
 .wf-tabs button { flex-direction: column; gap: 4px; padding: 7px 5px; min-height: 54px; border-radius: 14px; font-size: .8125rem; line-height: 1.3; }
 .wf-tab-long { display: none; }
 .wf-tab-short { display: inline; }
 .wf-tabs img { width: 20px; height: 20px; }
 .wf-panel-heading { margin-bottom: 12px; gap: 4px; }
 .wf-panel-heading h3 { font-size: .95rem; }
 .wf-panel-heading p { display: none; }
 .workflow-demo.is-enhanced .wf-panel { display: grid; grid-template-columns: minmax(0, 1fr); }
 .workflow-demo.is-enhanced .wf-panel-heading { grid-row: 1; }
 .workflow-demo.is-enhanced .wf-workbench, .workflow-demo.is-enhanced .wf-path { grid-row: 2; grid-column: 1; }
 .workflow-demo.is-enhanced .wf-path { align-self: start; justify-self: end; z-index: 1; width: 176px; margin: 4px 6px 0 0; }
 .workflow-demo .wf-path li:not(:last-child)::after { display: none; }
 .wf-path button { min-height: 46px; gap: 0; padding: 3px; }
 .wf-path button > span:last-of-type { display: none; }
 .wf-step-icon { width: 36px; height: 36px; border-radius: 11px; }
 .wf-path li:not(:last-child)::after { top: 22px; }
 .workflow-demo.is-enhanced .wf-panel { --wf-scene-height: 310px; }
 .workflow-demo .wf-gmail-layout { min-height: 260px; }
 .workflow-demo .wf-appbar { padding: 10px 190px 10px 10px; min-height: 54px; }
 .workflow-demo .wf-appbrand { gap: 6px; }
 .workflow-demo .wf-appbrand strong { font-size: .8125rem; }
 .workflow-demo .wf-appbrand img { width: 20px; height: 20px; }
 .workflow-demo .wf-simulation, .workflow-demo .wf-inbox-tabs, .workflow-demo .wf-inbox-row--muted { display: none; }
 .workflow-demo .wf-docs-desk { padding: 10px; }
 .workflow-demo .wf-docs-page { min-height: 215px; padding: 14px; }
 .workflow-demo .wf-docs-menu, .workflow-demo .wf-docs-tools { display: none; }
 .workflow-demo .wf-docs-comment { padding: 10px; }
 .workflow-demo .wf-mail-subject { padding-top: 12px; }
 .workflow-demo .wf-mail-person { margin-bottom: 10px; }
 .workflow-demo .wf-mail-body p { line-height: 1.5; margin-bottom: 6px; }
 .workflow-demo .wf-draft-fields { padding-block: 8px; gap: 5px; }
 .workflow-demo .wf-draft-heading { padding-block: 10px; }
 .workflow-demo .wf-draft-fields + .wf-mail-body { padding-top: 10px; }
 .workflow-demo .wf-draft-format { display: none; }
 .workflow-demo .wf-draft-footer { padding-top: 8px; }
 .wf-toolbar { gap: 8px; margin-top: 12px; }
 .wf-counter { order: 3; }
 .wf-toolbar .button { font-size: .8125rem; min-height: 44px; padding: 10px 12px; }
 .wf-toolbar p { flex: 1 1 180px; order: 4; min-height: 0; font-size: .8125rem; line-height: 1.45; }
 .wf-disclaimer { margin-top: 8px; font-size: .75rem; }
 .wf-disclaimer summary { min-height: 36px; }
 .workflow-demo .wf-ai-preparation li { font-size: .875rem; }
 .lesson-lab { margin-bottom: 36px; }
 .lesson-card-mark { margin-bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) {
 .workflow-demo .wf-scene.is-entering .wf-app { animation: none; }
 .lesson-icon, .card-icon, .lesson-module-number > span, .wf-step-icon { transition: none; transform: none !important; }
 .lesson-step-list > button:active, .lesson-choices > button:active { transform: none; }
}
@media print { .workflow-demo.is-enhanced .wf-panel { display: block; } }