/* Parcours « Anglais pour francophones » (M50 et suivants) : exercices de js/widgets/anglais.js.
   Classes préfixées « en- » ; couleurs et espacements de tokens.css (thèmes clair et sombre). */
.en { display: grid; gap: var(--space-3); min-width: 0; }
.en-h { margin: 0; font-weight: 600; font-size: var(--fs-md); }
.en-small { margin: 0; color: var(--text-2); font-size: var(--fs-sm); }
.en-note { margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--surface-2); border: 1px dashed var(--border-strong); color: var(--text-2); font-size: var(--fs-sm); }
.en-note--bad { border-style: solid; border-color: var(--danger); background: var(--danger-soft); color: var(--text); }
.en-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.en-tools, .en-inline { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; border: 0; margin: 0; padding: 0; }
.en-chip { display: inline-flex; gap: .4em; align-items: center; padding: var(--space-1) var(--space-3); border: 1px solid var(--border); border-radius: 999px; background: var(--surface); cursor: pointer; font-size: var(--fs-sm); }
.en-chip:focus-within, .en-opt:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.en-chip input, .en-opt input { accent-color: var(--primary); }

.en-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.en-line { display: flex; gap: var(--space-2); align-items: flex-start; padding: var(--space-2); border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); }
.en-line--on { border-color: var(--primary); background: var(--primary-soft); }
.en-play { flex: 0 0 auto; width: 2.2em; height: 2.2em; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text); cursor: pointer; font: inherit; }
.en-play:hover { border-color: var(--primary); }
.en-play:focus-visible, .en-stepbtn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.en-line__txt { display: grid; gap: .15em; min-width: 0; overflow-wrap: anywhere; line-height: 1.5; }
.en-who { color: var(--primary-strong); }
.en-ipa { color: var(--text-2); font-family: var(--font-mono); font-size: var(--fs-sm); }
.en-fr { color: var(--text-2); font-size: var(--fs-sm); font-style: italic; }
.en-hidden { color: var(--text-2); font-style: italic; }

.en-task { padding: var(--space-3); border-left: 4px solid var(--primary); background: var(--surface-2); border-radius: var(--radius-sm); }
.en-task p { margin: 0 0 var(--space-2); } .en-task p:last-child { margin: 0; }
.en-playback { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.en-playback audio { max-width: 100%; }
.en-recdot { width: .8em; height: .8em; border-radius: 50%; background: var(--danger); animation: en-blink 1s steps(2) infinite; }
@keyframes en-blink { 50% { opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .en-recdot { animation: none; } }

.en-grid, .en-q { border: 1px solid var(--border); border-radius: var(--radius-sm); margin: 0; padding: var(--space-3); display: grid; gap: var(--space-2); min-width: 0; }
.en-grid > legend, .en-q > legend { font-weight: 600; padding: 0 var(--space-1); line-height: 1.45; }
.en-grid__row { display: grid; gap: var(--space-1); }
@media (min-width: 40rem) { .en-grid__row { grid-template-columns: minmax(0, 1fr) 13rem; align-items: center; } }
.en-opt { display: flex; gap: var(--space-2); align-items: flex-start; padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; line-height: 1.45; }
.en-opt input { margin-top: .2em; flex: 0 0 auto; }
.en-choices { display: grid; gap: var(--space-2); }
@media (min-width: 40rem) { .en-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.en-tag { display: inline-block; margin-left: .3em; padding: 0 .5em; border-radius: 999px; background: var(--primary-soft); color: var(--primary-strong); font-size: var(--fs-sm); font-weight: 600; }
.en-num { color: var(--text-2); font-weight: 600; }

.en-gap__list { display: grid; gap: var(--space-2); }
.en-gap__item { padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); display: grid; gap: var(--space-1); }
.en-gap__q { line-height: 2.1; overflow-wrap: anywhere; }
.en-ok { border-color: var(--success); background: var(--success-soft); }
.en-bad { border-color: var(--warning); background: var(--warning-soft); }
.en-input, .en-textarea, .en-select { font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: .15em .5em; max-width: 100%; box-sizing: border-box; }
.en-gap__q .en-input { width: 9em; margin: 0 .3em; }
.en-input--wide { display: block; width: 100%; margin-top: var(--space-1); padding: var(--space-2); }
.en-textarea { width: 100%; padding: var(--space-2); line-height: 1.5; resize: vertical; }
.en-select { width: 100%; padding: var(--space-1) var(--space-2); }
.en-input:focus, .en-textarea:focus, .en-select:focus, .en [tabindex="-1"]:focus { outline: 2px solid var(--focus); outline-offset: 2px; }
.en-label { display: block; font-weight: 600; }
.en-score { margin: 0; font-weight: 600; }

.en-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1); }
.en-stepbtn { font: inherit; font-size: var(--fs-sm); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; }
.en-steps--on .en-stepbtn { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-strong); font-weight: 600; }
.en-stepbtn:disabled { opacity: .5; cursor: not-allowed; }
.en-text { margin: 0; padding: var(--space-3); border-left: 4px solid var(--border-strong); background: var(--surface-2); border-radius: var(--radius-sm); line-height: 1.6; }
.en-details { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); background: var(--surface); }
.en-details summary { cursor: pointer; font-weight: 600; }
.en-details p { margin: var(--space-2) 0 0; }
.en-key { margin: var(--space-2) 0; padding-left: 1.4em; display: grid; gap: var(--space-1); font-size: var(--fs-sm); }
.en-card { padding: var(--space-3) var(--space-4); border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface-2); display: grid; gap: var(--space-2); }
.en-card p { margin: 0; }
.en-card--ok { border-color: var(--success); background: var(--success-soft); }
.en-built, .en-pool { margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-1); align-items: center; min-height: 2.4em; }
.en-built { padding: var(--space-1) var(--space-2); border-bottom: 2px dashed var(--border-strong); }
.en-word { font: inherit; padding: .2em .7em; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text); cursor: pointer; }
.en-word--on { background: var(--primary-soft); border-color: var(--primary); color: var(--primary-strong); }
.en-word:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.en-word:disabled { cursor: default; opacity: .85; }
.en-wok { color: var(--success); font-weight: 600; }
.en-wbad { color: var(--danger); font-weight: 600; text-decoration: underline wavy; }
.en-err__form { display: grid; gap: var(--space-2); }
@media (min-width: 48rem) { .en-err__form { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; } .en-err__form .btn-row { grid-column: 1 / -1; } }