/* SpeakPro — résultats de correction automatique (Listening) et d'analyse (Writing) — 24/10/2026 */
.cx{ --cx-ink:#1E2430; --cx-ink2:#4A505B; --cx-mute:#6B707A; --cx-line:#E5DBCF; --cx-paper:#FBF8F3; --cx-navy:#10233F; --cx-copper:#A9552F;
  --cx-ok:#1F7A4D; --cx-ok-bg:#E6F3EC; --cx-ko:#A33A2B; --cx-ko-bg:#FBEAE7; --cx-wait:#8A5A00; --cx-wait-bg:#FFF4DC; --cx-na:#5F6670; --cx-na-bg:#F1EFEC;
  color:var(--cx-ink); font-size:15px; line-height:1.55; text-align:left; }
.cx *{ box-sizing:border-box; }
.cx h3{ font-size:17px; color:var(--cx-navy); margin:0 0 10px; }
.cx-card{ background:#fff; border:1px solid var(--cx-line); border-radius:16px; padding:18px; }
.cx-card + .cx-card{ margin-top:14px; }
.cx-kicker{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--cx-copper); margin:0 0 6px; }

/* En-tête de score */
.cx-head{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:18px; align-items:center; }
.cx-ring{ --p:0; width:112px; height:112px; border-radius:50%; display:grid; place-items:center; flex:none;
  background:conic-gradient(var(--cx-ring, var(--cx-copper)) calc(var(--p) * 1%), #EFE7DC 0); }
.cx-ring > div{ width:88px; height:88px; border-radius:50%; background:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.cx-ring b{ font-size:28px; line-height:1; color:var(--cx-navy); font-variant-numeric:tabular-nums; }
.cx-ring small{ font-size:12px; color:var(--cx-mute); margin-top:3px; }
.cx-ring.is-ok{ --cx-ring:var(--cx-ok); }
.cx-head-txt p{ margin:0; }
.cx-verdict{ font-size:17px; font-weight:700; color:var(--cx-navy); margin:0 0 4px !important; }
.cx-sub{ color:var(--cx-ink2); font-size:14.5px; }
.cx-stats{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.cx-pill{ display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:600; border-radius:999px; padding:5px 12px; }
.cx-pill--ok{ background:var(--cx-ok-bg); color:var(--cx-ok); }
.cx-pill--ko{ background:var(--cx-ko-bg); color:var(--cx-ko); }
.cx-pill--na{ background:var(--cx-na-bg); color:var(--cx-na); }

/* Détail des questions */
.cx-filter{ display:flex; flex-wrap:wrap; gap:6px; margin:16px 0 10px; }
.cx-filter button{ font:inherit; font-size:13.5px; font-weight:600; border:1px solid var(--cx-line); background:#fff; color:var(--cx-ink2); border-radius:999px; padding:7px 14px; cursor:pointer; min-height:36px; }
.cx-filter button.is-on{ background:var(--cx-navy); border-color:var(--cx-navy); color:#fff; }
.cx-qs{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.cx-q{ border:1px solid var(--cx-line); border-left-width:4px; border-radius:12px; padding:12px 14px; background:#fff; }
.cx-q.is-ok{ border-left-color:var(--cx-ok); }
.cx-q.is-ko{ border-left-color:var(--cx-ko); }
.cx-q.is-na{ border-left-color:#B8B2AA; }
.cx-q-top{ display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.cx-q-txt{ font-weight:600; color:var(--cx-navy); }
.cx-tag{ flex:none; font-size:12px; font-weight:700; border-radius:999px; padding:3px 9px; white-space:nowrap; }
.cx-tag--ok{ background:var(--cx-ok-bg); color:var(--cx-ok); }
.cx-tag--ko{ background:var(--cx-ko-bg); color:var(--cx-ko); }
.cx-tag--na{ background:var(--cx-na-bg); color:var(--cx-na); }
.cx-q dl{ margin:8px 0 0; display:grid; grid-template-columns:max-content minmax(0,1fr); gap:4px 10px; font-size:14px; }
.cx-q dt{ color:var(--cx-mute); }
.cx-q dd{ margin:0; overflow-wrap:anywhere; }
.cx-expl{ margin:8px 0 0; font-size:13.5px; color:var(--cx-ink2); background:var(--cx-paper); border-radius:8px; padding:8px 10px; }
.cx-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.cx-btn{ font:inherit; font-weight:700; font-size:14.5px; border-radius:999px; padding:11px 20px; border:1px solid transparent; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; text-decoration:none; }
.cx-btn--primary{ background:var(--cx-copper); color:#fff; }
.cx-btn--primary:hover{ background:#8E4626; }
.cx-btn--ghost{ background:#fff; color:var(--cx-navy); border-color:var(--cx-line); }
.cx-btn--ghost:hover{ border-color:var(--cx-navy); }
.cx-btn[disabled]{ opacity:.6; cursor:progress; }
.cx-note{ font-size:13px; color:var(--cx-mute); margin:12px 0 0; }

/* États */
.cx-state{ display:flex; gap:12px; align-items:flex-start; border-radius:14px; padding:14px 16px; }
.cx-state--busy{ background:var(--cx-paper); border:1px solid var(--cx-line); }
.cx-state--err{ background:var(--cx-ko-bg); color:#7A2A1F; }
.cx-state--warn{ background:var(--cx-wait-bg); color:#6B4500; }
.cx-state p{ margin:0; }
.cx-spin{ width:22px; height:22px; border-radius:50%; border:3px solid #EFE6DB; border-top-color:var(--cx-copper); animation:cx-spin .8s linear infinite; flex:none; margin-top:1px; }
@keyframes cx-spin{ to{ transform:rotate(360deg); } }

/* Writing : critères */
.cx-crit{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.cx-crit li{ display:grid; grid-template-columns:minmax(0,1fr) 64px; gap:4px 12px; align-items:center; }
.cx-crit-name{ font-weight:600; color:var(--cx-navy); font-size:14.5px; }
.cx-crit-name small{ font-weight:500; color:var(--cx-mute); margin-left:6px; white-space:nowrap; }
.cx-crit-score{ text-align:right; font-weight:700; font-variant-numeric:tabular-nums; color:var(--cx-navy); font-size:15px; }
.cx-bar{ grid-column:1 / -1; height:8px; border-radius:8px; background:#EFE7DC; overflow:hidden; }
.cx-bar i{ display:block; height:100%; border-radius:8px; background:var(--cx-copper); }
.cx-bar i.is-ok{ background:var(--cx-ok); }
.cx-bar i.is-low{ background:var(--cx-ko); }
.cx-crit-cmt{ grid-column:1 / -1; font-size:13.5px; color:var(--cx-ink2); margin:0; }

/* Writing : texte annoté */
.cx-text{ white-space:pre-wrap; font-size:15px; line-height:1.75; background:var(--cx-paper); border:1px solid var(--cx-line); border-radius:12px; padding:14px; overflow-wrap:anywhere; }
.cx-text mark{ background:#FBE3DD; color:inherit; border-bottom:2px solid var(--cx-ko); border-radius:3px; padding:0 1px; cursor:pointer; }
.cx-text mark.is-minor{ background:#FFF1D6; border-bottom-color:#C98A12; }
.cx-text mark sup{ font-size:10.5px; font-weight:700; color:var(--cx-ko); margin-left:1px; }
.cx-text mark.is-focus{ outline:2px solid var(--cx-navy); }
.cx-errs{ list-style:none; margin:12px 0 0; padding:0; display:grid; gap:10px; }
.cx-err{ border:1px solid var(--cx-line); border-radius:12px; padding:12px 14px; background:#fff; }
.cx-err-n{ display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--cx-navy); color:#fff; font-size:12px; font-weight:700; margin-right:8px; }
.cx-fix{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 10px; margin-top:4px; }
.cx-fix del{ color:var(--cx-ko); text-decoration-thickness:2px; overflow-wrap:anywhere; }
.cx-fix ins{ color:var(--cx-ok); text-decoration:none; font-weight:700; overflow-wrap:anywhere; }
.cx-err p{ margin:6px 0 0; font-size:13.5px; color:var(--cx-ink2); }
.cx-cat{ font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--cx-mute); margin-left:6px; }
.cx-list{ margin:0; padding-left:20px; display:grid; gap:6px; }
.cx-reco{ counter-reset:r; list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.cx-reco li{ counter-increment:r; position:relative; padding:10px 12px 10px 44px; background:var(--cx-paper); border-radius:10px; }
.cx-reco li::before{ content:counter(r); position:absolute; left:12px; top:10px; width:22px; height:22px; border-radius:50%; background:var(--cx-copper); color:#fff; font-size:12px; font-weight:700; display:grid; place-items:center; }
.cx-tabs{ display:flex; gap:6px; margin:0 0 10px; }
.cx-tabs button{ font:inherit; font-size:13.5px; font-weight:600; border:1px solid var(--cx-line); background:#fff; color:var(--cx-ink2); border-radius:999px; padding:7px 14px; cursor:pointer; min-height:36px; }
.cx-tabs button.is-on{ background:var(--cx-navy); border-color:var(--cx-navy); color:#fff; }
.cx-limits{ margin:0; padding:0; list-style:none; display:grid; gap:6px; }
.cx-limits li{ font-size:13.5px; background:var(--cx-wait-bg); color:#6B4500; border-radius:10px; padding:8px 12px; }
.cx-disclaimer{ font-size:12.5px; color:var(--cx-mute); margin:14px 0 0; }
.cx-mode{ display:inline-block; font-size:12px; font-weight:700; border-radius:999px; padding:3px 10px; background:#E8EEF8; color:var(--cx-navy); margin-left:8px; vertical-align:2px; }
.cx-mode.is-basic{ background:var(--cx-na-bg); color:var(--cx-na); }

@media (min-width:760px){
  .cx-card{ padding:22px 24px; }
  .cx-ring{ width:128px; height:128px; }
  .cx-ring > div{ width:100px; height:100px; }
  .cx-ring b{ font-size:32px; }
  .cx-grid2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
  .cx-grid2 > .cx-card + .cx-card{ margin-top:0; }
}
@media (max-width:420px){
  .cx-head{ grid-template-columns:1fr; justify-items:center; text-align:center; }
  .cx-stats{ justify-content:center; }
  .cx-q dl{ grid-template-columns:1fr; }
  .cx-q dt{ margin-top:4px; }
  .cx-actions .cx-btn{ flex:1 1 100%; }
}
@media (prefers-reduced-motion:reduce){ .cx-spin{ animation-duration:2.4s; } }