/* v2/styles/lesson-content.css
   Habillage KUT des scènes de cours (type "content").
   Tokens uniquement, aucune couleur de palette en dur (règle BRAND.md). */
.scene-content { max-width: 760px; margin: 0 auto; padding: var(--sp-4); text-align: left; }
.lc-title { margin: 0 0 var(--sp-4); font-family: var(--font-display); }
.lc-blocks > * { margin-bottom: var(--sp-4); }
.lc-text p { line-height: var(--lh-body); color: var(--c-ink); }

/* Encadrés — succès (défaut) / avertissement / astuce, couleurs sémantiques KUT */
.lc-callout {
  border-left: 4px solid var(--c-action);
  background: var(--c-action-soft);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
}
.lc-callout-warning { border-left-color: var(--c-error); background: color-mix(in srgb, var(--c-error) 8%, var(--c-bg)); }
.lc-callout-tip     { border-left-color: var(--c-step-2); background: color-mix(in srgb, var(--c-step-2) 8%, var(--c-bg)); }
.lc-callout-title { font-weight: 700; margin-bottom: var(--sp-1); color: var(--c-ink); }
.lc-callout-body  { color: var(--c-ink); line-height: var(--lh-body); }

/* Tables de décision */
.lc-table-wrap { overflow-x: auto; }
.lc-table { border-collapse: collapse; width: 100%; font-size: var(--fs-sm); }
.lc-table th, .lc-table td { border: 1px solid var(--c-border); padding: var(--sp-2) var(--sp-3); text-align: left; vertical-align: top; line-height: 1.45; }
.lc-table thead th { background: var(--c-page); color: var(--c-ink); font-weight: 700; }
.lc-table-wrap figcaption { font-size: var(--fs-xs); color: var(--c-ink-soft); margin-top: var(--sp-1); }

/* Prédire-puis-révéler */
.lc-predict { background: var(--c-surface-soft); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); }
.lc-predict-prompt { font-weight: 600; margin: 0 0 var(--sp-2); color: var(--c-ink); }
.lc-predict-answer { margin-top: var(--sp-3); line-height: var(--lh-body); }
.lc-predict-answer[hidden] { display: none; }

/* Récupération active (auto-test inline) */
.lc-retrieval { background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); }
.lc-retrieval-q { font-weight: 600; margin: 0 0 var(--sp-2); color: var(--c-ink); }
.lc-retrieval-opts { display: flex; flex-direction: column; gap: var(--sp-2); }
.lc-retrieval-opt {
  text-align: left; padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--c-border); border-radius: var(--r-sm);
  background: var(--c-bg); color: var(--c-ink); cursor: pointer;
  font-size: var(--fs-sm);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.lc-retrieval-opt:hover { border-color: var(--c-action); }
.lc-retrieval-opt.correct { border-color: var(--c-action); background: var(--c-action-soft); }
.lc-retrieval-opt.incorrect { border-color: var(--c-error); background: color-mix(in srgb, var(--c-error) 8%, var(--c-bg)); }
.lc-retrieval-feedback { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--c-ink-soft); }
.lc-retrieval-feedback[hidden] { display: none; }

.lc-continue { margin-top: var(--sp-6); }