/* =====================================================================
   vues/questions.css — Questions de cours (§8.13), préfixe .qc-
   Une vue = un objet central : la question, son barème, sa réponse.
   Tokens de tokens.css uniquement (DIRECTION-UX §2-§4) ; mobile 390 px.
   ===================================================================== */
.qc-head { margin-bottom: var(--sp-4); }
.qc-matiere { display: grid; gap: var(--sp-4); max-width: var(--gab-atelier); margin-bottom: var(--sp-4); }
.qc-matiere-l { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: flex-end; }
.qc-matiere-l .field { flex: 1 1 240px; min-width: 0; }
.qc-matiere .input, .qc-filtres .input, .qc-choix .input { width: 100%; max-width: 100%; min-width: 0; text-overflow: ellipsis; }
.qc-matiere, .qc-choix, .qc-q { min-width: 0; overflow-wrap: anywhere; }
.qc-raison { font-size: var(--t-small); }
.qc-gabarit { border-top: 1px solid var(--hairline); padding-top: var(--sp-3); display: grid; gap: var(--sp-2); }
.qc-gabarit-t { font-family: var(--serif, Spectral, serif); font-size: var(--t-h4); font-weight: 600; display: flex; align-items: center; gap: var(--sp-2); margin: 0; }
.qc-gabarit-s, .qc-gabarit-e, .qc-note { font-size: var(--t-small); margin: 0; }
.qc-alerte { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: 0; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--warn-line); background: var(--warn-bg); color: var(--warn-ink); border-radius: var(--r-m); font-size: var(--t-small); }
.qc-attentes summary { cursor: pointer; font-size: var(--t-ui); font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.qc-attentes ul { margin: var(--sp-2) 0 0; padding-left: var(--sp-5); display: grid; gap: var(--sp-2); font-size: var(--t-small); }
.qc-cite { font-size: var(--t-caption); }

.qc-onglets { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 1px solid var(--hairline); padding-bottom: 6px; margin-bottom: var(--sp-4); max-width: var(--gab-atelier); }
.qc-onglet { font-family: var(--sans); font-size: var(--t-ui); padding: 7px 12px; border: 1px solid transparent; border-radius: var(--r-m); background: none; color: var(--ink-soft); cursor: pointer; min-height: 44px; }
.qc-onglet:hover { border-color: var(--accent-line); background: var(--accent-tint); }
.qc-onglet.is-on { background: var(--accent-tint); border-color: var(--accent-line); color: var(--ink); font-weight: 600; }

.qc-choix, .qc-repondre, .qc-confronter, .qc-construire, .qc-serie, .qc-qcm, .qc-oral, .qc-mesures { max-width: var(--gab-atelier); display: grid; gap: var(--sp-4); }
.qc-filtres { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.qc-filtres .input { flex: 1 1 160px; min-width: 0; }
.qc-compte { font-size: var(--t-small); margin: 0; font-variant-numeric: tabular-nums; }
.qc-groupe { display: grid; gap: var(--sp-2); }
.qc-groupe-t { font-family: var(--sans); font-size: var(--t-caption); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); margin: 0; }
.qc-generees summary { cursor: pointer; font-size: var(--t-ui); color: var(--ink-soft); min-height: 44px; display: flex; align-items: center; }
.qc-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.qc-q { border: 1px solid var(--hairline); border-radius: var(--r-m); padding: var(--sp-3); background: var(--card); display: grid; gap: var(--sp-1); }
.qc-q:hover { border-color: var(--accent-line); }
.qc-q-generee { border-style: dashed; }
.qc-q-e { margin: 0; font-family: var(--serif, Spectral, serif); font-size: var(--t-lecture); line-height: 1.5; }
.qc-q-m { margin: 0; font-size: var(--t-small); font-variant-numeric: tabular-nums; }
.qc-q-sous { margin: 0; padding-left: var(--sp-5); font-size: var(--t-body); }
.qc-q-b { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin: 0; }
.qc-q-a { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.qc-q-a:empty { display: none; }

.pill.qc-pill-corrige { background: var(--ok-tint); color: var(--ok-text); border: 1px solid var(--ok-line); }
.pill.qc-pill-piste { background: var(--react-tint); color: var(--react-text); }
.pill.qc-pill-freq { background: var(--a-tint); color: var(--a-text); }
.pill.qc-pill-generee, .pill.qc-pill-construite { background: var(--card-2); color: var(--ink-soft); border: 1px dashed var(--hairline); }
.pill.qc-pill-reussie { background: var(--ok-tint); color: var(--ok-text); }
.pill.qc-pill-partielle { background: var(--warn-bg); color: var(--warn-ink); }
.pill.qc-pill-ratee, .pill.qc-pill-non-traitee { background: var(--danger-tint); color: var(--danger-text); }

/* Répondre : l'objet central est l'énoncé et la page blanche. */
.qc-enonce { font-family: var(--serif, Spectral, serif); font-size: var(--t-h4); line-height: 1.55; margin: 0; }
.qc-budget { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: baseline; font-size: var(--t-small); font-variant-numeric: tabular-nums; }
.qc-budget b { font-size: var(--t-h3); font-family: var(--serif, Spectral, serif); }
.qc-chrono { font-variant-numeric: tabular-nums; font-size: var(--t-h3); font-weight: 600; }
.qc-chrono.is-depasse { color: var(--danger-text); }
.qc-bloc { display: grid; gap: var(--sp-1); }
.qc-bloc textarea, .qc-trait textarea { width: 100%; min-height: 88px; font-family: var(--serif, Spectral, serif); font-size: var(--t-body); line-height: 1.6; resize: vertical; }
.qc-bloc-aide { font-size: var(--t-caption); }
.qc-controles { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); }
.qc-controle { font-size: var(--t-small); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-s); border: 1px solid var(--hairline); display: grid; gap: 2px; }
.qc-controle-avertissement { border-color: var(--warn-line); background: var(--warn-bg); color: var(--warn-ink); }
.qc-controle-s { font-size: var(--t-caption); opacity: .85; }
.qc-estimation { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: flex-end; }
.qc-estimation .input { width: 8rem; }
.qc-cache { padding: var(--sp-3); border: 1px dashed var(--hairline); border-radius: var(--r-m); font-size: var(--t-small); color: var(--ink-soft); display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; justify-content: space-between; }
.qc-support { padding: var(--sp-3); border-left: 4px solid var(--gold-line); background: var(--gold-tint); border-radius: var(--r-s); white-space: pre-wrap; font-size: var(--t-body); }

/* Confronter */
.qc-conf-cols { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 900px) { .qc-conf-cols { grid-template-columns: 1fr 1fr; } }
.qc-texte { white-space: pre-wrap; font-family: var(--serif, Spectral, serif); font-size: var(--t-body); line-height: 1.6; margin: 0; }
.qc-items { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); }
.qc-item { display: flex; gap: var(--sp-2); align-items: flex-start; font-size: var(--t-body); min-height: 36px; }
.qc-item input { margin-top: 4px; width: 18px; height: 18px; }
.qc-item-p { font-variant-numeric: tabular-nums; color: var(--ink-soft); font-size: var(--t-small); white-space: nowrap; }
.qc-points { display: flex; flex-wrap: wrap; gap: var(--sp-4); font-variant-numeric: tabular-nums; }
.qc-points b { font-size: var(--t-h3); }
.qc-relais { display: grid; gap: var(--sp-2); }
.qc-relais-l { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); }
.qc-relais-l li { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; font-size: var(--t-small); }

/* Série */
.qc-barre { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.qc-barre-q { min-width: 44px; min-height: 44px; border-radius: var(--r-m); border: 1px solid var(--hairline); background: var(--card); font-variant-numeric: tabular-nums; cursor: pointer; }
.qc-barre-q.is-on { background: var(--accent-tint); border-color: var(--accent-line); font-weight: 700; }
.qc-barre-q.is-fait { border-color: var(--ok-line); }
.qc-repartition { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); font-variant-numeric: tabular-nums; font-size: var(--t-small); }

/* QCM et oral */
.qc-options { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.qc-option { display: flex; gap: var(--sp-2); align-items: flex-start; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--hairline); border-radius: var(--r-m); min-height: 44px; }
.qc-option.is-bonne { border-color: var(--ok-line); background: var(--ok-tint); }
.qc-option.is-fausse { border-color: var(--danger-line); background: var(--danger-tint); }
.qc-plan { display: grid; gap: var(--sp-2); }
.qc-plan textarea { width: 100%; min-height: 64px; }

/* Mesures */
.qc-mesures-g { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.qc-stat { border: 1px solid var(--hairline); border-radius: var(--r-m); padding: var(--sp-3); display: grid; gap: 2px; }
.qc-stat b { font-size: var(--t-h2); font-variant-numeric: tabular-nums; font-family: var(--serif, Spectral, serif); }

@media (max-width: 600px) {
  .qc-onglets { flex-wrap: nowrap; overflow-x: auto; }
  .qc-q { padding: var(--sp-2); }
  .qc-enonce { font-size: var(--t-lecture); }
}