/* QCM : s'appuie sur les variables de css/tc.css (--ink, --copper, --pcb-dark, --line, --mute, --paper) */
    .qcm { max-width: 820px; margin: 0 auto; padding: 2.5rem 0 3.5rem; }
    .qcm .panel, .qcm .q-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 1.4rem 1.5rem; margin-bottom: 1rem; }
    .qcm #start { border: 2px solid var(--pcb, var(--pcb-dark)); box-shadow: 8px 8px 0 var(--copper); }
    .qcm h2 { font-weight: 800; font-size: 1.5rem; color: var(--pcb-dark); margin: 0 0 .5rem; }
    .qcm p { margin: 0 0 .8rem; }
    .qcm .form-label { font-weight: 600; margin-bottom: .3rem; }
    .qcm .form-control { border-color: var(--line); border-radius: 8px; padding: .6rem .8rem; }
    .qcm .form-control:focus { border-color: var(--copper); box-shadow: none; outline: 3px solid var(--copper); outline-offset: 3px; }
    .qcm .err { color: var(--copper-dark); min-height: 1.4rem; margin: .4rem 0 .6rem; font-size: .95rem; font-weight: 600; }
    .qcm code { font-family: "JetBrains Mono", monospace; font-size: .88em; background: #F1F2F5; color: var(--pcb-dark); padding: .1em .4em; border-radius: 5px; }

    .bar { position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem 1rem;
           background: var(--pcb-dark); color: #fff; padding: .7rem 1.1rem; border-bottom: 3px solid var(--copper); border-radius: 0 0 12px 12px; margin-bottom: 1.2rem; }
    .bar .who { font-weight: 600; }
    .bar .done { font-size: .92rem; color: #AEB3C2; }
    .bar .timer { font-family: "JetBrains Mono", monospace; font-size: 1.35rem; }
    .bar.low .timer { color: #FF8FA8; }

    .q-card legend { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 1.12rem; line-height: 1.35; float: none; width: 100%; padding: 0; margin-bottom: .85rem; }
    .q-card .num { color: var(--copper); margin-right: .35rem; }
    .opt { position: relative; display: block; margin-bottom: .45rem; cursor: pointer; }
    .opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
    .opt span { display: block; padding: .6rem .9rem; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
    .opt:hover span { border-color: var(--copper); }
    .opt input:focus-visible + span { outline: 3px solid var(--copper); outline-offset: 3px; }
    .opt input:checked + span { border-color: var(--copper); background: #FBE6EB; box-shadow: 3px 3px 0 var(--copper); }

    .q-card.ok { border-color: #BFE3CE; }
    .q-card.ko { border-color: #F1B8C5; }
    #review .opt { cursor: default; }
    .opt.good span { border-color: #11603B; background: #DDF1E6; color: #0B4A2D; }
    .opt.bad span { border-color: var(--copper-dark); background: #FBE6EB; color: var(--copper-dark); }
    .opt.good:hover span, .opt.bad:hover span { border-color: inherit; }
    .qcm .why { margin: .8rem 0 0; padding: .7rem .9rem; background: var(--paper); border-left: 3px solid var(--copper); border-radius: 0 8px 8px 0; font-size: .98rem; color: var(--mute); }
    .score { font-family: "Bricolage Grotesque", sans-serif; font-size: 3rem; font-weight: 800; line-height: 1; color: var(--pcb-dark); }
    [hidden] { display: none !important; }

    @media (max-width: 575.98px) {
      .qcm { padding: 1.5rem 0 2.5rem; }
      .qcm #start { box-shadow: 4px 4px 0 var(--copper); }
      .qcm .panel, .qcm .q-card { padding: 1.1rem 1rem; }
    }
    @media (prefers-reduced-motion: no-preference) { .opt span { transition: border-color .15s, background .15s; } }