/* Parcours « Bien démarrer avec l'IA » (M41 à M49) : exercices de js/widgets/ia.js.
   Toutes les classes sont préfixées « ia- » ; couleurs et espacements viennent de tokens.css (thèmes clair et sombre). */
.ia { display: grid; gap: var(--space-3); min-width: 0; }
.ia pre { white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; margin: 0; }
.ia-lead { color: var(--text-2); margin: 0; }
.ia-h { margin: 0; font-size: var(--fs-md); }
.ia-fictif { margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text-2); font-size: var(--fs-sm); border: 1px dashed var(--border-strong); }

.ia-field { border: 0; margin: 0; padding: 0; display: grid; gap: var(--space-2); min-width: 0; }
.ia-field > legend { font-weight: 600; margin-bottom: var(--space-2); padding: 0; }
.ia-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; }
.ia-opt:hover { border-color: var(--border-strong); }
.ia-opt input { margin-top: .2em; flex: 0 0 auto; width: 1.1em; height: 1.1em; accent-color: var(--primary); }
.ia-opt:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.ia-inline { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ia-inline .ia-opt { padding: var(--space-1) var(--space-3); }

.ia-label { display: block; font-weight: 600; margin-bottom: var(--space-1); }
.ia-help { margin: 0 0 var(--space-1); color: var(--text-2); font-size: var(--fs-sm); }
.ia-step { display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--primary-soft); color: var(--primary-strong); font-size: var(--fs-sm); margin-right: .2em; }
.ia-textarea, .ia-select { width: 100%; max-width: 100%; box-sizing: border-box; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: var(--space-2); }
.ia-textarea { resize: vertical; min-height: 3.2em; line-height: 1.45; }
.ia-textarea:focus, .ia-select:focus, .ia-preview:focus, .ia-choice:focus, .ia [tabindex="-1"]:focus { outline: 2px solid var(--focus); outline-offset: 2px; }
.ia-row { display: grid; gap: var(--space-1); max-width: 36rem; }
.ia-fieldbox { display: grid; }

.ia-pb__grid { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
.ia-pb__fields { display: grid; gap: var(--space-3); min-width: 0; }
.ia-pb__side { display: grid; gap: var(--space-3); align-content: start; min-width: 0; }
.ia-side__title { margin: 0; font-size: var(--fs-md); }
@media (min-width: 64rem) {
  .ia-pb__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .ia-pb__side { position: sticky; top: calc(var(--header-h, 60px) + var(--space-3)); }
}
.ia-preview, .ia-out { font-family: var(--font-mono); font-size: var(--fs-sm); line-height: 1.5; padding: var(--space-3); border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-2); color: var(--text); }
.ia-preview { min-height: 6em; max-height: 26em; overflow: auto; }
.ia-out { border-left: 4px solid var(--border-strong); }

.ia-verdict { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-3); border-radius: var(--radius-sm); border: 1px solid var(--border); }
.ia-verdict p { margin: .2em 0 0; font-size: var(--fs-sm); }
.ia-verdict__score { font-weight: 700; font-size: var(--fs-lg); white-space: nowrap; }
.ia-verdict--ok { background: var(--success-soft); border-color: var(--success); }
.ia-verdict--warn { background: var(--warning-soft); border-color: var(--warning); }
.ia-verdict--ko { background: var(--danger-soft); border-color: var(--danger); }
.ia-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); font-size: var(--fs-sm); }
.ia-checks li { display: block; }
.ia-checks .is-ok > span:first-child { color: var(--success); }
.ia-checks .is-ko > span:first-child { color: var(--danger); }
.ia-tip { display: block; color: var(--text-2); margin-left: 1.4em; }
.ia-hint { margin: 0; color: var(--text-2); }

.ia-notes { border-top: 1px solid var(--border); padding-top: var(--space-3); display: grid; gap: var(--space-2); }
.ia-notes h4 { margin: 0; }
.ia-notes__list { margin: 0; padding-left: 1.2em; display: grid; gap: var(--space-2); }
.ia-notes__list li { display: grid; gap: var(--space-1); }

.ia-ba__cols { display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 52rem) { .ia-ba__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.ia-ba__col { display: grid; gap: var(--space-2); align-content: start; min-width: 0; padding: var(--space-3); border-radius: var(--radius); border: 1px solid var(--border); }
.ia-ba__col--weak { background: var(--danger-soft); }
.ia-ba__col--strong { background: var(--success-soft); }
.ia-ba__tag { margin: 0; font-weight: 600; font-size: var(--fs-sm); }

.ia-optfb { display: grid; gap: var(--space-1); border-radius: var(--radius-sm); }
.ia-optfb.is-ok .ia-opt, .ia-fc__item.is-ok, .ia-dl__item.is-ok, .ia-bilan__item.is-ok { border-color: var(--success); background: var(--success-soft); }
.ia-optfb.is-ko .ia-opt, .ia-fc__item.is-ko, .ia-dl__item.is-ko, .ia-bilan__item.is-ko { border-color: var(--danger); background: var(--danger-soft); }
.ia-optfb.is-mid .ia-opt { border-color: var(--warning); background: var(--warning-soft); }
.ia-fb { margin: 0 0 var(--space-1); padding: 0 var(--space-3); font-size: var(--fs-sm); line-height: 1.5; }
.ia-score { margin: 0; font-weight: 600; }

.ia-fc__list, .ia-dl__list, .ia-bilan__list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-3); counter-reset: ia; }
.ia-fc__item, .ia-dl__item, .ia-bilan__item { display: grid; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); min-width: 0; }
.ia-claim { margin: 0; padding-left: var(--space-3); border-left: 3px solid var(--primary); font-style: italic; }
.ia-dl__t { margin: 0; font-weight: 600; }
.ia-dl__btns { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ia-light { position: relative; }
.ia-light input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ia-light span { display: inline-block; padding: var(--space-2) var(--space-3); border: 2px solid var(--border-strong); border-radius: 999px; cursor: pointer; background: var(--surface); }
.ia-light input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.ia-light input:checked + span { font-weight: 700; border-color: var(--text); background: var(--surface-3); }
.ia-light input:disabled + span { cursor: default; }
.ia-legend { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-1); font-size: var(--fs-sm); }

.ia-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); }
.ia-card p { margin: 0; }
.ia-card--ok { border-color: var(--success); background: var(--success-soft); }
.ia-card__title { font-weight: 700; font-size: var(--fs-md); }
.ia-progress { margin: 0; color: var(--text-2); font-size: var(--fs-sm); }
.ia-case { margin: 0; font-size: var(--fs-md); font-weight: 600; }
.ia-comp { display: block; font-size: var(--fs-sm); color: var(--primary-strong); text-transform: none; }
.ia-q { display: block; margin-top: var(--space-1); }

.ia-chat__log { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.ia-msg { max-width: 92%; padding: var(--space-2) var(--space-3); border-radius: var(--radius); border: 1px solid var(--border); }
.ia-msg__who { display: block; font-size: var(--fs-xs); font-weight: 700; color: var(--text-2); margin-bottom: var(--space-1); }
.ia-msg__t { white-space: pre-wrap; overflow-wrap: anywhere; }
.ia-msg--u { justify-self: end; background: var(--primary-soft); }
.ia-msg--ai { justify-self: start; background: var(--surface-2); }
.ia-msg--fb { justify-self: stretch; max-width: none; background: transparent; border-style: dashed; font-size: var(--fs-sm); }
.ia-choice { display: block; width: 100%; text-align: left; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); cursor: pointer; line-height: 1.45; }
.ia-choice:hover { border-color: var(--primary); background: var(--primary-soft); }

.ia-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); font-size: var(--fs-sm); }
.ia-steps li { padding: var(--space-1) var(--space-3); border-radius: 999px; border: 1px solid var(--border); color: var(--text-2); }
.ia-steps .is-current { border-color: var(--primary); color: var(--text); font-weight: 700; }
.ia-steps .is-done { color: var(--success); }
.ia-pj__body { display: grid; gap: var(--space-3); min-width: 0; }
.ia-grille td, .ia-grille th { vertical-align: top; }

/* Textes préformatés et cas pratiques dans les leçons (hors des exercices) */
pre.ia-out, pre.ia-preview { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0 0 var(--space-3); max-width: 100%; box-sizing: border-box; }
.ia-cas { display: grid; gap: var(--space-1); margin: 0; }
.ia-cas dt { font-weight: 700; margin-top: var(--space-2); }
.ia-cas dd { margin: 0; min-width: 0; }
.ia-cas dd pre.ia-out { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) { .ia * { transition: none !important; animation: none !important; } }

/* Impression d'une seule zone (notes, grille, bilan) */
@media print {
  body.ia-printing * { visibility: hidden !important; }
  body.ia-printing .ia-print-zone, body.ia-printing .ia-print-zone * { visibility: visible !important; }
  body.ia-printing .ia-print-zone { position: absolute; left: 0; top: 0; width: 100%; }
  body.ia-printing .ia-print-zone button { display: none !important; }
}