/* Scoped visual workshop styles. */
#pane-visuel { scroll-margin-top: 110px; }
#visual-practice { scroll-margin-top: 110px; }
.visual-intro { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 36px; }
.visual-intro img { display: block; width: 100%; height: auto; border-radius: 12px; }
.visual-kicker { color: var(--blue); font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.visual-intro h2 { margin: 16px 0; font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.2; }
.visual-intro p { color: var(--text-soft); line-height: 1.8; }
.visual-intro .btn { margin: 12px 0; }
.visual-note { font-size: .85rem; }
.visual-toolbar, .visual-navigation { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--text-soft); font-size: .85rem; }
.visual-progress { width: 100%; height: 6px; margin: 14px 0 24px; accent-color: var(--blue); }
.visual-title { font-size: clamp(1.35rem, 3vw, 1.9rem); color: var(--text); text-transform: none; letter-spacing: -.02em; margin: 0 0 24px; }
.visual-layout { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); gap: 32px; align-items: start; }
.visual-document figure { margin: 0 0 12px; }
.visual-document img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--border); }
.visual-document figcaption { font-size: .72rem; color: var(--text-soft); margin-top: 8px; }
.visual-help { margin-top: 18px; color: var(--text-soft); font-size: .85rem; line-height: 1.7; }
.visual-help summary { cursor: pointer; font-weight: 600; }
.visual-instruction { margin: 0 0 20px; line-height: 1.7; color: var(--text-soft); }
.visual-audio { margin-bottom: 22px; flex-wrap: wrap; }
.visual-audio select { padding: 6px; border: 1px solid var(--border); border-radius: 6px; color: var(--text); background: var(--panel); }
.visual-choices { border: 0; margin: 0 0 20px; padding: 0; min-width: 0; }
.visual-choices legend { font-size: 1.05rem; font-weight: 650; line-height: 1.6; margin-bottom: 16px; padding: 0; }
.visual-choice { display: flex; align-items: center; gap: 10px; padding: 14px; margin-bottom: 10px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; font-size: .95rem; line-height: 1.5; }
.visual-choice input { margin: 0; flex: 0 0 auto; accent-color: var(--blue); }
.visual-choice.selected { border-color: var(--blue); background: var(--panel-soft); }
.visual-choice:focus-within { outline: 2px solid var(--blue); outline-offset: 2px; }
.visual-letter { font-weight: 700; color: var(--blue); }
.visual-choice.is-correct { border-color: #16815d; border-width: 2px; }
.visual-choice.is-wrong { border-color: #cc534c; border-style: dashed; }
.visual-feedback { border-left: 3px solid var(--blue); background: var(--panel-soft); padding: 16px; margin-bottom: 20px; line-height: 1.7; }
.visual-feedback p { margin: 8px 0 0; color: var(--text-soft); }
.visual-navigation { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--border); flex-wrap: wrap; }
#pane-visuel button:disabled { opacity: .5; cursor: not-allowed; }
.visual-results { max-width: 760px; margin: auto; }
.visual-results .visual-title { margin-top: 14px; }
.visual-results p { line-height: 1.8; color: var(--text-soft); }
.visual-review { margin: 24px 0; }
.visual-review details { border-bottom: 1px solid var(--border); padding: 16px 0; }
.visual-review summary { cursor: pointer; font-weight: 600; line-height: 1.5; }
.visual-dialog { width: min(1100px, 94vw); max-height: 92vh; padding: 18px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); color: var(--text); }
.visual-dialog::backdrop { background: rgb(12 24 40 / .72); }
.visual-dialog img { display: block; width: 100%; height: auto; margin-top: 12px; }
.visual-image-scroll { clear: both; overflow: auto; max-height: 72vh; }
.visual-zoom-help { font-size: .8rem; color: var(--text-soft); }
.visual-dialog .btn { float: right; }
.visual-dialog-heading { margin: 8px 0; font-size: 1rem; }
.visual-shortcut { margin: 16px 0; }
@media (max-width: 760px) {
  .visual-dialog img { min-width: 720px; max-width: none; }
  .visual-intro, .visual-layout { grid-template-columns: minmax(0,1fr); gap: 24px; }
  .visual-intro img { max-height: 220px; object-fit: cover; }
  .visual-toolbar { align-items: start; }
  .visual-navigation > span { order: 3; width: 100%; text-align: center; }
  .visual-navigation .btn { font-size: .8rem; padding: 12px; }
  .visual-layout .visual-document { max-width: 100%; }
  /* Keep every practice category readable instead of collapsing to emoji only. */
  .tef-tabs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; overflow: visible; }
  .tef-tab, .tef-tab:not(.active) { font-size: .73rem; padding: 10px 6px; white-space: normal; }
  .tef-tab .tab-emoji, .tef-tab:not(.active) .tab-emoji { font-size: 1rem; margin-right: 4px; }
}