/* Scènes compactes : la couleur distingue les usages, le mouvement montre le changement. */
:root { --lesson-blue:#245bcc; --lesson-purple:#7541b6; --lesson-green:#226d47; --lesson-amber:#86510c; --lesson-blue-bg:#edf3ff; --lesson-purple-bg:#f4eeff; --lesson-green-bg:#eaf6ee; --lesson-amber-bg:#fff5df; }
:root[data-theme='dark'] { --lesson-blue:#a7c6ff; --lesson-purple:#d6b7ff; --lesson-green:#a2e4bc; --lesson-amber:#ffd18e; --lesson-blue-bg:#202d45; --lesson-purple-bg:#332540; --lesson-green-bg:#20362b; --lesson-amber-bg:#3c3020; }
.lesson-lab { --lesson-color:var(--lesson-blue); --lesson-bg:var(--lesson-blue-bg); padding:clamp(22px,3vw,36px); margin-block:8px 64px; border:1px solid var(--line); border-radius:28px; background:var(--surface-frost); box-shadow:0 12px 40px rgb(0 0 0 / 4%); scroll-margin-top:120px; }
.lesson-lab--purple { --lesson-color:var(--lesson-purple); --lesson-bg:var(--lesson-purple-bg); }
.lesson-lab--green { --lesson-color:var(--lesson-green); --lesson-bg:var(--lesson-green-bg); }
.lesson-lab { --wf-app-bg:#f6f8fc; --wf-paper:#fff; --wf-ink:#202124; --wf-muted:#5f6368; --wf-border:#dfe3eb; }
:root[data-theme='dark'] .lesson-lab { --wf-app-bg:#202127; --wf-paper:#292b33; --wf-ink:#eceef4; --wf-muted:#bcc1cb; --wf-border:#484c58; }
.lesson-card-mark { margin-bottom:20px; }
.card-icon { display:grid; place-items:center; width:48px; height:48px; border-radius:15px; background:var(--lesson-blue-bg); color:var(--lesson-blue); margin-bottom:20px; }
.card-icon svg { width:26px; height:26px; }
.card:nth-child(3n+2) .card-icon { background:var(--lesson-purple-bg); color:var(--lesson-purple); }
.card:nth-child(3n+3) .card-icon { background:var(--lesson-green-bg); color:var(--lesson-green); }
.lesson-info-nav { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:40px; }
.lesson-info-nav > a { display:flex; align-items:center; gap:12px; padding:14px; border:1px solid var(--line); border-radius:16px; background:var(--surface-solid); color:var(--text); text-decoration:none; font-size:.82rem; }
.lesson-info-nav > a > span:last-child { margin-left:auto; }
.lesson-state-mark { margin-bottom:24px; }
.lesson-state-mark .lesson-icon { width:70px; height:70px; border-radius:22px; }
.lesson-state-mark svg { width:34px; height:34px; }
[id^='information-'] { scroll-margin-top:120px; }
input:not([type='hidden']):not([type='checkbox']):not([type='radio']), textarea, select, .theme-control select { font-size:16px; }
.lesson-heading { display:grid; grid-template-columns:1.25fr 1fr; align-items:end; gap:24px; margin-bottom:24px; }
.lesson-heading h2 { font-size:clamp(1.7rem,2.8vw,2.6rem); letter-spacing:-.045em; line-height:1.14; margin:0; }
.lesson-heading .eyebrow { color:var(--lesson-color); font-size:.72rem; margin-bottom:10px; }
.lesson-heading > p { color:var(--muted); font-size:.95rem; margin:0; max-width:430px; }
.lesson-layout { display:grid; grid-template-columns:minmax(220px,.42fr) minmax(0,1fr); gap:24px; align-items:start; }
.lesson-layout > *, .lesson-stage, .lesson-scene { min-width:0; }
.lesson-step-list, .lesson-choices { display:grid; gap:10px; }
.lesson-step-list > button, .lesson-choices > button { display:flex; gap:12px; align-items:center; width:100%; min-height:60px; padding:13px 16px; border:1px solid var(--line); border-radius:16px; color:var(--text); background:var(--surface-solid); text-align:left; line-height:1.4; font:inherit; font-size:.9rem; transition:background .22s,color .22s,border-color .22s; }
.lesson-step-list > button > span { display:grid; place-items:center; width:32px; height:32px; flex-shrink:0; border-radius:10px; color:var(--lesson-color); background:var(--lesson-bg); font-size:.75rem; font-weight:600; }
.lesson-step-list > [aria-selected='true'], .lesson-choices > [aria-selected='true'] { border-color:var(--lesson-color); background:var(--lesson-bg); box-shadow:inset 3px 0 var(--lesson-color); }
.lesson-step-list > [aria-selected='true'] > span { background:var(--lesson-color); color:var(--surface-solid); }
.lesson-choices > button > span:last-child { margin-left:auto; }
.lesson-stage { border-radius:20px; }
.lesson-scene + .lesson-scene, .lesson-choice-result + .lesson-choice-result { margin-top:20px; }
.lesson-lab.is-enhanced .lesson-scene, .lesson-lab.is-enhanced .lesson-choice-result { margin-top:0; }
.lesson-window { border:1px solid var(--line); border-radius:18px; overflow:hidden; background:var(--surface-solid); }
.lesson-window-bar { display:flex; align-items:center; gap:9px; min-height:52px; padding:12px 18px; border-bottom:1px solid var(--line); background:var(--surface-soft); font-size:.78rem; }
.lesson-window-bar > img, .lesson-window-bar > svg { width:24px; height:24px; object-fit:contain; flex-shrink:0; }
.lesson-window-bar > span { margin-left:auto; color:var(--muted); font-size:.65rem; }
.lesson-window-body { padding:22px; min-height:245px; }
.lesson-window-body p { font-size:.92rem; line-height:1.65; margin-bottom:14px; }
.lesson-window-body h3 { font-size:1.3rem; margin:0 0 16px; letter-spacing:-.035em; }
.lesson-window-body h4 { font-size:1rem; margin-bottom:14px; }
.lesson-bubble { padding:14px 17px; border:1px solid var(--line); border-radius:4px 16px 16px 16px; margin-right:20px; }
.lesson-bubble + .lesson-bubble { margin-top:16px; }
.lesson-bubble--you { margin:0 0 0 30px; border:0; border-radius:16px 4px 16px 16px; background:var(--lesson-bg); }
.lesson-bubble small { display:block; font-size:.68rem; color:var(--muted); margin-bottom:8px; }
.lesson-bubble > :last-child, .lesson-paper > :last-child, .lesson-window-body > :last-child { margin-bottom:0; }
.lesson-pieces { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.lesson-pieces > span { padding:7px 10px; background:var(--lesson-bg); color:var(--lesson-color); border-radius:8px; font-size:.76rem; }
.lesson-caption { padding:14px 2px 0; color:var(--muted); font-size:.8rem; line-height:1.5; margin-bottom:0; }
.lesson-controls { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; padding-top:20px; margin-top:20px; border-top:1px solid var(--line); }
.lesson-controls > p { color:var(--muted); font-size:.78rem; margin:0; }
.lesson-controls > button { font-size:.82rem; min-height:46px; }
.lesson-note { font-size:.7rem; color:var(--muted); margin:16px 0 0; line-height:1.6; }
.lesson-jump { display:inline-flex; align-items:center; gap:12px; margin-top:10px; padding-block:10px; font-size:.87rem; font-weight:550; min-height:44px; }
.lesson-checks { list-style:none; padding:0; margin:0 0 18px; display:grid; gap:10px; }
.lesson-checks li { display:flex; align-items:start; gap:10px; line-height:1.5; font-size:.88rem; padding:0; }
.lesson-checks svg { color:var(--lesson-green); width:19px; height:19px; flex-shrink:0; margin-top:1px; }
.lesson-tag { display:inline-flex; padding:6px 10px; border-radius:8px; color:var(--lesson-green); background:var(--lesson-green-bg); font-size:.73rem; line-height:1.5; }
.lesson-tag--amber { color:var(--lesson-amber); background:var(--lesson-amber-bg); }
.lesson-muted { color:var(--muted); }
.lesson-icon { display:grid; place-items:center; width:42px; height:42px; border-radius:13px; flex-shrink:0; color:var(--lesson-blue); background:var(--lesson-blue-bg); }
.lesson-icon svg { width:23px; height:23px; }
.lesson-icon--purple { color:var(--lesson-purple); background:var(--lesson-purple-bg); }
.lesson-icon--green { color:var(--lesson-green); background:var(--lesson-green-bg); }
.lesson-choice-result { padding:24px; border:1px solid var(--line); border-radius:20px; background:var(--surface-solid); }
.lesson-choice-result > h3 { font-size:1.7rem; line-height:1.15; letter-spacing:-.04em; margin-block:16px 12px; }
.lesson-choice-result > p { color:var(--muted); font-size:.92rem; }
.lesson-choice-result > .button { margin-top:14px; font-size:.83rem; }
.lesson-choice-result .lesson-window-body { min-height:0; }
.lesson-mail-peek { display:grid; gap:9px; }
.lesson-mail-peek > span { font-size:.7rem; color:var(--lesson-blue); }
.lesson-product { display:grid; grid-template-columns:120px 1fr; gap:22px; }
.lesson-product-art { display:grid; place-items:center; min-height:160px; border-radius:16px; background:var(--lesson-purple-bg); color:var(--lesson-purple); }
.lesson-product-art svg { width:70px; height:70px; }
.lesson-feedback { padding:13px 16px; margin-top:18px; border-radius:12px; background:var(--lesson-bg); font-size:.82rem; line-height:1.55; }
.lesson-mini-filter { display:flex; gap:8px; margin-bottom:16px; }
.lesson-mini-filter > span { padding:5px 10px; font-size:.7rem; background:var(--surface-soft); border-radius:8px; }
.lesson-mini-filter > span:first-child { color:var(--lesson-color); background:var(--lesson-bg); }
.lesson-task { display:flex; gap:10px; align-items:center; padding:12px 0; border-top:1px solid var(--line); font-size:.85rem; }
.lesson-task > span { margin-left:auto; font-size:.65rem; color:var(--muted); }
.lesson-task.is-done { color:var(--lesson-green); }
.lesson-compare { display:flex; gap:30px; align-items:center; justify-content:center; margin:5px 0 28px; }
.lesson-compare > div { display:grid; justify-items:center; gap:12px; }
.lesson-compare img { width:36px; height:36px; }
:root[data-theme='dark'] .lesson-compare img[src$='openai-black.svg'] { filter:invert(1); }
.lesson-site-preview { padding:20px; background:var(--lesson-green-bg); border-radius:14px; margin-bottom:18px; }
.lesson-site-preview > span:first-child { font-size:.65rem; color:var(--lesson-green); }
.lesson-site-preview h3 { margin-top:14px; }
.lesson-site-tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:20px 0; }
.lesson-site-tiles > span { display:grid; place-items:center; height:70px; background:var(--surface-solid); border-radius:12px; }
.lesson-site-tiles svg { width:28px; height:28px; color:var(--lesson-green); }
.lesson-fake-button { display:inline-block; padding:9px 14px; border-radius:10px; font-size:.74rem; background:var(--surface-solid); color:var(--lesson-green); }
.lesson-sticky-grid { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:20px; }
.lesson-sticky-grid > span { background:var(--lesson-purple-bg); padding:18px 14px; border-radius:5px 12px 12px 12px; font-size:.8rem; }
.lesson-kanban { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.lesson-kanban > div { background:var(--surface-soft); padding:12px; border-radius:12px; min-height:165px; font-size:.75rem; }
.lesson-kanban strong { display:block; color:var(--lesson-color); font-size:.7rem; margin-bottom:20px; }
.lesson-kanban span { display:block; padding:12px 10px; border:1px solid var(--line); border-radius:9px; background:var(--surface-solid); }
.lesson-module-number { display:flex; align-items:center; gap:12px; }
.lesson-module-number > span { display:grid; place-items:center; width:36px; height:36px; border-radius:11px; background:var(--lesson-blue-bg); color:var(--lesson-blue); font-size:.9rem; }
.card:nth-child(3n+2) .lesson-module-number > span { background:var(--lesson-purple-bg); color:var(--lesson-purple); }
.card:nth-child(3n+3) .lesson-module-number > span { background:var(--lesson-green-bg); color:var(--lesson-green); }
.lesson-disclosure { width:100%; margin-top:10px; }
.lesson-disclosure summary { display:flex; justify-content:space-between; align-items:center; gap:12px; min-height:48px; padding:12px 15px; color:var(--lesson-blue); background:var(--lesson-blue-bg); border-radius:12px; cursor:pointer; font-size:.85rem; }
.lesson-disclosure summary::-webkit-details-marker { display:none; }
.lesson-disclosure[open] summary > span { transform:rotate(45deg); }
.lesson-disclosure .prompt-text { margin-top:16px; }
.lesson-disclosure > ul { margin-top:16px; font-size:.87rem; }
.lesson-disclosure[data-exercise-answer] { margin-block:24px; }
.lesson-disclosure[data-exercise-answer] > :not(summary) { margin-top:18px; }
.lesson-days { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:12px; }
.lesson-days > a { display:flex; flex-direction:column; align-items:center; gap:9px; padding:14px 8px; border:1px solid var(--line); border-radius:16px; color:var(--text); text-align:center; text-decoration:none; }
.lesson-days > a > span { display:grid; place-items:center; width:40px; height:40px; border-radius:13px; color:var(--lesson-blue); background:var(--lesson-blue-bg); font-weight:600; font-size:.85rem; }
.lesson-days strong { font-size:.75rem; font-weight:550; }
.lesson-days small { font-size:.68rem; color:var(--muted); }
.lesson-days > a.is-done { border-color:var(--lesson-green); background:var(--lesson-green-bg); }
.lesson-days > a.is-done > span { color:var(--lesson-green); background:var(--surface-solid); }
.lesson-progress { display:flex; align-items:center; gap:20px; margin-top:24px; }
.lesson-progress progress { display:block; flex:1; max-width:420px; min-width:0; height:10px; border:0; border-radius:99px; overflow:hidden; background:var(--surface-soft); accent-color:var(--lesson-green); }
.lesson-progress progress::-webkit-progress-bar { background:var(--surface-soft); }
.lesson-progress progress::-webkit-progress-value { background:var(--lesson-green); border-radius:99px; }
.lesson-progress p { margin:0; color:var(--muted); font-size:.82rem; }
.lesson-day-action { margin-block:24px 40px; }
.lesson-day-action [aria-pressed='true'] { background:var(--lesson-green-bg); color:var(--lesson-green); border-color:var(--lesson-green); }
/* Les pages gardent leur contenu détaillé, mais l’exemple arrive plus vite. */
@media (min-width:980px) { .page-hero { padding-block:48px 30px; } .page-hero h1 { font-size:clamp(2.8rem,4.1vw,4rem); line-height:1.08; } .page-hero .lead { max-width:850px; font-size:1.12rem; } .page-hero p:not(.lead) { font-size:.88rem; } }
.lesson-lab.is-enhanced .is-active .lesson-window, .lesson-lab.is-enhanced .lesson-choice-result.is-active { animation:lesson-enter .35s var(--ease) both; }
@keyframes lesson-enter { from { opacity:.35; transform:translateY(8px); } to { opacity:1; transform:none; } }
@media (max-width:679px) {
 .lesson-info-nav { grid-template-columns:1fr; gap:8px; }
 .lesson-lab { width:calc(100% - 28px); padding:22px 17px; margin-bottom:44px; border-radius:24px; scroll-margin-top:102px; }
 .lesson-heading { grid-template-columns:1fr; gap:12px; margin-bottom:20px; }
 .lesson-heading h2 { font-size:1.65rem; }
 .lesson-heading > p { font-size:.9rem; line-height:1.5; }
 .lesson-layout { grid-template-columns:1fr; gap:16px; }
 .lesson-step-list { grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
 .lesson-step-list > button { flex-direction:column; align-items:center; gap:8px; text-align:center; padding:10px 5px; min-height:78px; font-size:.875rem; }
 .lesson-step-list > [aria-selected='true'] { box-shadow:inset 0 -3px var(--lesson-color); }
 .lesson-step-list > button > span { width:27px; height:27px; border-radius:8px; font-size:.7rem; }
 .lesson-choices { gap:8px; }
 .lesson-choices > button { min-height:60px; padding:10px 12px; font-size:.9rem; }
 .lesson-window-bar { padding:10px 13px; font-size:.75rem; gap:8px; }
 .lesson-window-bar > span { font-size:.6rem; }
 .lesson-window-body { padding:17px 14px; min-height:220px; }
 .lesson-window-body p { font-size:.88rem; }
 .lesson-bubble { padding:12px; margin-right:8px; }
 .lesson-bubble--you { margin-left:8px; margin-right:0; }
 .lesson-checks li { font-size:.88rem; }
 .lesson-controls { margin-top:16px; padding-top:16px; gap:12px; }
 .lesson-controls > p { font-size:.73rem; flex:1 1 125px; }
 .lesson-controls > button { flex:1 1 155px; padding-inline:12px; }
 .lesson-choice-result { padding:20px 16px; }
 .lesson-choice-result > h3 { font-size:1.55rem; }
 .lesson-choice-result > .button { width:100%; }
 .lesson-product { grid-template-columns:1fr; gap:16px; }
 .lesson-product-art { min-height:85px; }
 .lesson-product-art svg { width:42px; height:42px; }
 .lesson-kanban { grid-template-columns:1fr; gap:8px; }
 .lesson-kanban > div { min-height:0; display:grid; grid-template-columns:80px 1fr; gap:10px; align-items:center; }
 .lesson-kanban strong { margin:0; }
 .lesson-days { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
 .lesson-days > a { flex-direction:row; text-align:left; padding:10px; gap:9px; flex-wrap:wrap; }
 .lesson-days > a > span { width:30px; height:30px; border-radius:10px; }
 .lesson-days strong { font-size:.77rem; }
 .lesson-days small { margin-left:39px; margin-top:-7px; }
 .lesson-days > a:last-child { grid-column:1 / -1; }
 .lesson-progress { flex-direction:column; align-items:stretch; gap:12px; }
 .lesson-progress progress { width:100%; max-width:none; flex:auto; }
}
@media (prefers-reduced-motion:reduce) { .lesson-lab *, .lesson-lab *::before, .lesson-lab *::after { animation:none !important; transition:none !important; } }
@media (forced-colors:active) { .lesson-lab, .lesson-window, .lesson-choice-result { border:1px solid CanvasText; } .lesson-step-list [aria-selected='true'], .lesson-choices [aria-selected='true'], .lesson-days .is-done { outline:2px solid Highlight; } .lesson-icon, .lesson-tag, .lesson-pieces > span { color:CanvasText; } }