/* ============================================================================
   cloe-anglais.css - Moteur de test CLOE Anglais (erosophia.eu)
   S'aligne sur les variables de thème du site (--bg-article, --text-color,
   --border-color, --shadow-color) comme linguaskill-general.css : le
   clair/sombre suit automatiquement.
   Palette CLOE (charte CCI France) : orange #E45300, bleu marine #1B2B5B,
   bandeau de consigne bleu clair #DDEEF7.
   ========================================================================== */

:root {
    --cl-orange: #E45300;
    --cl-navy:   #1B2B5B;
    --cl-strip:  #DDEEF7;
    --cl-strip-text: #1B2B5B;
    --cl-green:  #3fa34d;
    --cl-yellow: #f2b807;
    --cl-red:    #d92c2c;
}

.cl-container { max-width: 980px; margin: 0 auto; padding: 16px; color: var(--text-color); }

/* -- Cartes -------------------------------------------------------------- */
.cl-card {
    background: var(--bg-article, #fff);
    border: 1px solid var(--border-color, #ddd);
    border-radius: 12px;
    box-shadow: 0 3px 14px var(--shadow-color, rgba(0,0,0,.08));
    padding: 22px 24px;
    margin: 16px 0;
}
/* Passation : contenu à plat, comme l'examen réel. */
.cl-card.cl-task, .cl-card.cl-review, .cl-card.cl-result-head {
    background: none; border: none; box-shadow: none; border-radius: 0; padding: 8px 0;
}
.cl-warn { color: #b00020; }
.cl-hint { font-size: .9em; opacity: .75; margin: 10px 0 4px; }
.cl-js-only { display: none; }
html.js .cl-js-only, body.js .cl-js-only { display: block; }
.cl-js-only.cl-bank, .cl-js-only.cl-reorder-pool { display: none; }
html.js .cl-bank.cl-js-only, html.js .cl-reorder-pool.cl-js-only { display: flex; }

/* ============================================================================
   PASSATION — fidèle aux captures des guides du candidat 2025 (CAN_03, p. 6-10)
   Carte blanche à bordure fine, en-tête « Question N / compétence », chrono
   gris, barre verte de temps ÉCOULÉ, titre marine léger, bandeau cyan clair,
   cases blanches à contour gris, boutons de banque marine #021556.
   Police : Montserrat pour les titres si disponible, sinon celle du site.
   ========================================================================== */
:root {
    --cl-exam-navy:   #021556;   /* boutons de banque, bordure « Incident technique ? » */
    --cl-exam-title:  #1c2a63;   /* titres de question */
    --cl-exam-strip:  #e4f9fe;   /* bandeau de consigne */
    --cl-exam-green:  #5ba558;   /* barre de temps */
    --cl-exam-grey:   #6d6d6d;   /* chrono, temps total */
    --cl-exam-border: #d9d9d9;   /* cases, cartes */
    --cl-exam-text:   #2b2b2b;
}
.cl-form { background: #fff; color: var(--cl-exam-text); border: 1px solid var(--cl-exam-border); border-radius: 4px; box-shadow: 0 2px 10px rgba(0,0,0,.06); margin: 8px 0 24px; overflow: hidden; }
.cl-form .cl-card.cl-task { padding: 8px 32px 20px; }

/* -- Chrome : en-tête de question ---------------------------------------- */
.cl-chrome { position: sticky; top: 0; z-index: 20; background: #fff; }
.cl-chrome-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 32px 14px; }
.cl-qhead { display: flex; flex-direction: column; min-width: 160px; }
.cl-qnum  { font-family: Montserrat, "Segoe UI", system-ui, sans-serif; font-size: 1.6em; font-weight: 400; color: #1a1a1a; line-height: 1.1; }
.cl-qcomp { font-size: .82em; color: #333; margin-top: 2px; }
.cl-qtimer { font-size: 1em; color: var(--cl-exam-grey); white-space: nowrap; }
.cl-qright { display: flex; align-items: center; gap: 18px; font-size: .95em; color: var(--cl-exam-grey); white-space: nowrap; }
.cl-incident { background: #fff; border: 1px solid var(--cl-exam-navy); border-radius: 3px; padding: 6px 12px; font-size: .85em; color: var(--cl-exam-navy); cursor: pointer; }
.cl-incident:hover { background: var(--cl-exam-navy); color: #fff; }
/* Barre de temps : pleine largeur sous l'en-tête, se REMPLIT avec le temps écoulé
   (capture : 9 s sur 90 = 10 % de vert). Verte, puis jaune, puis rouge. */
.cl-timebar { order: 99; width: 100%; height: 5px; background: #eee; margin: 0; border-radius: 0; overflow: hidden; }
.cl-chrome .cl-qhead .cl-timebar { display: none; }             /* déplacée hors du bloc titre */
.cl-chrome > .cl-timebar { display: block; }
.cl-timebar-fill { height: 100%; width: 0; background: var(--cl-exam-green); transition: width .25s linear, background .3s; }
.cl-chrome[data-phase="yellow"] .cl-timebar-fill { background: var(--cl-yellow); }
.cl-chrome[data-phase="red"]    .cl-timebar-fill { background: var(--cl-red); }
.cl-chrome[data-phase="red"]    .cl-qtimer      { color: var(--cl-red); }
.cl-chrome.is-expired .cl-qtimer { animation: cl-blink 1s steps(2) infinite; }
@keyframes cl-blink { to { opacity: .35; } }

/* Titre + bandeau de consigne */
.cl-qtitle { font-family: Montserrat, "Segoe UI", system-ui, sans-serif; text-align: center; font-weight: 400; font-size: 1.75em; color: var(--cl-exam-title); margin: 22px 32px 14px; line-height: 1.3; }
.cl-instr { max-width: 860px; margin: 0 auto 8px; padding: 12px 16px; background: var(--cl-exam-strip); color: var(--cl-exam-title); font-size: .84em; text-align: center; border-radius: 3px; }
/* Consigne de partie de l'oral : titre + paragraphe, alignés à gauche, aérés */
.cl-instr--oral { text-align: left; max-width: none; margin: 0 0 20px; padding: 14px 20px 12px; font-size: .9em; line-height: 1.5; border: 0; border-radius: 0; }
.cl-instr--oral .cl-instr-title { display: block; font-size: 1.05em; margin-bottom: 6px; letter-spacing: .01em; }
.cl-instr--oral p { margin: 0; }

/* -- Textes et blancs ---------------------------------------------------- */
.cl-text { font-size: 1.05em; line-height: 2.1; margin: 22px 0 10px; color: var(--cl-exam-text); }
.cl-text-passage { text-align: center; line-height: 1.55; margin: 20px auto 6px; max-width: 860px; border: none; padding: 0; }
.cl-gap-input, .cl-slot, .cl-dropdown {
    display: inline-block; vertical-align: middle; box-sizing: border-box;
    height: 34px; margin: 0 6px; padding: 2px 8px; font: inherit; color: inherit;
    background: #fff; border: 1px solid var(--cl-exam-border); border-radius: 2px;
}
.cl-gap-input { width: 9em; }
.cl-gap-input:focus, .cl-dropdown:focus { outline: 2px solid var(--cl-exam-navy); outline-offset: 1px; }
.cl-dropdown { width: 6.5em; padding: 2px 4px; }

/* -- Banque de mots ------------------------------------------------------ */
.cl-slot { min-width: 9em; line-height: 28px; cursor: pointer; position: relative; text-align: center; }
.cl-slot-num { display: none; }
.cl-slot.is-active, .cl-slot:focus-visible { border-color: var(--cl-exam-navy); box-shadow: inset 0 0 0 1px var(--cl-exam-navy); outline: none; }
.cl-slot.is-target { background: #eef3ff; border-color: var(--cl-exam-navy); }
.cl-slot.is-filled { border-color: var(--cl-exam-navy); color: var(--cl-exam-navy); }
.cl-slot .cl-noscript-select { margin-left: 4px; }
.cl-bank { flex-wrap: wrap; gap: 14px 24px; justify-content: center; margin: 18px 0 8px; padding-top: 22px; border-top: 1px solid #e6e6e6; }
.cl-bank-word { min-width: 140px; padding: 8px 20px; font: inherit; cursor: pointer; background: var(--cl-exam-navy); color: #fff; border: 1px solid var(--cl-exam-navy); border-radius: 2px; }
.cl-bank-word:hover { filter: brightness(1.25); }
.cl-bank-word.is-active { background: var(--cl-orange); border-color: var(--cl-orange); }
.cl-bank-word.is-used { opacity: .3; text-decoration: line-through; }

/* -- Réordonnancements (clic uniquement) --------------------------------- */
.cl-token { display: inline-block; font: inherit; padding: 5px 9px; cursor: pointer; background: #fff; color: var(--cl-exam-text); border: 1px solid var(--cl-exam-border); border-radius: 2px; }
.cl-token:hover { border-color: var(--cl-exam-navy); }
.cl-token.is-used { visibility: hidden; }
.cl-token-fixed { border: none; background: transparent; cursor: default; padding: 5px 4px; }
.cl-token-placed { position: relative; padding-right: 24px; border-color: var(--cl-exam-navy); color: var(--cl-exam-navy); }
.cl-token-placed::after { content: "✕"; position: absolute; right: 7px; top: 50%; transform: translateY(-50%); font-size: .7em; opacity: .5; }
.cl-token-placed:hover { border-color: var(--cl-red); color: var(--cl-red); }
.cl-token-placed:hover::after { opacity: 1; }
.cl-reorder-target { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; min-height: 2.6em; padding: 8px 12px; margin: 18px 0 6px; }
.cl-reorder-pool { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 10px 0 14px; padding: 0; border: none; }
.cl-reorder-line { display: contents; }
.cl-reorder-target::before, .cl-reorder-pool::before { content: none; }
.cl-insert { width: 12px; height: 30px; padding: 0; border: none; background: transparent; cursor: pointer; position: relative; flex: none; }
.cl-insert::before { content: ""; position: absolute; left: 5px; top: 5px; bottom: 5px; width: 2px; background: #d0d0d0; border-radius: 1px; }
.cl-insert:hover::before, .cl-insert.is-active::before { background: var(--cl-orange); width: 3px; left: 4px; }
.cl-insert.is-active { background: rgba(228,83,0,.12); border-radius: 3px; }
/* Texte à reconstituer : phrases à gauche en cases, texte reconstitué à droite en texte nu */
.cl-text-reorder .cl-treorder-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 36px; align-items: start; margin-top: 20px; }
.cl-text-reorder .cl-reorder-pool { flex-direction: column; align-items: stretch; margin: 0; gap: 12px; }
.cl-text-reorder .cl-reorder-target { flex-direction: column; align-items: stretch; margin: 0; padding: 0; }
.cl-text-reorder .cl-reorder-line { display: flex; flex-direction: column; gap: 10px; }
.cl-token-sentence { text-align: center; white-space: normal; line-height: 1.45; padding: 8px 12px; }
.cl-text-reorder .cl-token-fixed, .cl-text-reorder .cl-token-placed { border: none; background: transparent; text-align: center; color: var(--cl-exam-text); }
.cl-text-reorder .cl-token-placed { padding-right: 24px; cursor: pointer; }
.cl-text-reorder .cl-token-placed:hover { color: var(--cl-red); }
.cl-text-reorder .cl-insert { width: 100%; height: 12px; }
.cl-text-reorder .cl-insert::before { left: 8px; right: 8px; top: 5px; bottom: auto; width: auto; height: 2px; }
.cl-text-reorder .cl-insert:hover::before, .cl-text-reorder .cl-insert.is-active::before { height: 3px; width: auto; left: 8px; }
.cl-noscript-text { width: 100%; padding: 6px; font: inherit; }
@media (max-width: 720px) { .cl-text-reorder .cl-treorder-layout { grid-template-columns: 1fr; } }

/* -- QCM ------------------------------------------------------------------ */
.cl-question { text-align: center; }
.cl-prompt { font-weight: 700; margin: 22px 0 18px; }
.cl-options { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; }
.cl-option { display: flex; align-items: center; gap: 12px; padding: 6px 8px; cursor: pointer; border: 1px solid transparent; border-radius: 4px; background: transparent; }
.cl-option:hover { background: #f5f7fb; }
.cl-option input[type="radio"] { accent-color: var(--cl-exam-navy); width: 1.15em; height: 1.15em; margin: 0; }
.cl-option:has(input:checked) { background: #eef3ff; }

/* -- Écoute comptée ------------------------------------------------------ */
.cl-audio { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 6px 0 0; }
.cl-audio audio { display: none; }
.cl-audio-play { font: inherit; padding: 8px 18px; cursor: pointer; background: #f1f3f4; color: #1a1a1a; border: none; border-radius: 22px; }
.cl-audio-play:hover { background: #e4e7e9; }
.cl-audio-play:disabled { opacity: .45; cursor: not-allowed; }
.cl-audio-plays { font-size: .88em; color: var(--cl-exam-grey); }
.cl-audio.is-exhausted .cl-audio-plays { color: var(--cl-red); }
.cl-audio-progress { flex: 0 1 140px; height: 4px; background: #d5d5d5; border-radius: 2px; overflow: hidden; }
.cl-audio-progress-fill { display: block; height: 100%; width: 0; background: #1a1a1a; }

/* -- Validation ---------------------------------------------------------- */
.cl-actions { text-align: center; margin: 26px 0 10px; }
.cl-validate {
    font: inherit; font-size: 1.05em; padding: 10px 34px; cursor: pointer;
    background: var(--cl-exam-navy, #021556); color: #fff; border: none; border-radius: 2px;
}
.cl-validate:hover { filter: brightness(1.08); }
.cl-validate:disabled { opacity: .5; cursor: wait; }

/* -- Attestation de résultats (barres de niveau) ------------------------- */
.cl-attest { margin: 20px 0; }
.cl-attest-title { font-size: 1.05em; font-weight: 600; margin: 18px 0 8px; color: var(--cl-navy); }
.cl-attest-row { display: grid; grid-template-columns: 200px 1fr 52px; align-items: center; gap: 12px; margin: 8px 0; }
.cl-attest-label { font-size: .92em; }
.cl-attest-bar { position: relative; display: block; height: 22px; background: var(--border-color, #eee); border-radius: 3px; overflow: hidden; }
.cl-attest-fill { position: absolute; left: 0; top: 0; bottom: 0; opacity: .85; }
.cl-attest-tick {
    position: absolute; top: 0; bottom: 0; width: 16.66%; font-size: .68em; line-height: 22px; text-align: center;
    border-right: 1px solid rgba(0,0,0,.12); color: rgba(0,0,0,.55); z-index: 1;
}
.cl-attest-tick[data-level="A1"] { left: 0; }      .cl-attest-tick[data-level="A2"] { left: 16.66%; }
.cl-attest-tick[data-level="B1"] { left: 33.33%; } .cl-attest-tick[data-level="B2"] { left: 50%; }
.cl-attest-tick[data-level="C1"] { left: 66.66%; } .cl-attest-tick[data-level="C2"] { left: 83.33%; border-right: 0; }
.cl-attest-level { display: inline-block; text-align: center; font-weight: 700; color: #fff; padding: 3px 0; border-radius: 4px; background: #9aa5b1; }
.cl-attest-global { display: flex; align-items: center; gap: 16px; margin: 12px 0 20px; }
.cl-attest-global .cl-attest-level { font-size: 1.4em; padding: 8px 16px; }
@media (max-width: 600px) { .cl-attest-row { grid-template-columns: 1fr; gap: 4px; } }

/* -- Écran de correction ------------------------------------------------- */
.cl-review-item { padding: 12px 0; border-bottom: 1px solid var(--border-color, #eee); }
.cl-review-item .cl-ok  { color: var(--cl-green); font-weight: 600; }
.cl-review-item .cl-ko  { color: var(--cl-red);   font-weight: 600; }
.cl-review-expl { font-size: .92em; opacity: .85; margin-top: 4px; }

/* -- Intro / profil ------------------------------------------------------ */
.cl-intro h2 { color: var(--cl-navy); margin-top: 0; }
.cl-profile { border: 1px solid var(--border-color, #ddd); border-radius: 8px; padding: 14px 18px; margin: 18px 0; }
.cl-profile legend { padding: 0 8px; font-weight: 600; color: var(--cl-navy); }
.cl-field { display: block; margin: 12px 0; }
.cl-field > span { display: block; font-weight: 600; margin-bottom: 4px; }
.cl-field input[type="text"], .cl-field select {
    width: 100%; max-width: 480px; padding: 7px 10px; font: inherit;
    border: 1px solid var(--border-color, #aaa); border-radius: 4px; background: var(--bg-article, #fff); color: inherit;
}
.cl-field small { display: block; opacity: .7; margin-top: 3px; }
.cl-notice { text-align: center; }

/* -- Tableaux de correction ---------------------------------------------- */
.cl-table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: .95em; }
.cl-table th, .cl-table td { border-bottom: 1px solid var(--border-color, #e5e5e5); padding: 8px 10px; text-align: left; vertical-align: top; }
.cl-table tr.is-ok td:first-child { color: var(--cl-green); font-weight: 600; }
.cl-table tr.is-ko td:first-child { color: var(--cl-red);   font-weight: 600; }
.cl-review-item summary { cursor: pointer; padding: 6px 0; }
.cl-results-title { color: var(--cl-navy); }
.cl-actions-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; }
.cl-actions-row form { margin: 0; }
/* -- Impression (attestation) : même débridage que linguaskill-general.css --- */
.cl-print-head { display: none; }
@media print {
    .cl-actions, .cl-chrome, #footer-placeholder, .cta-progression, [class*="cta-"], .cl-rubric-details,
    header, nav, .navbar, .site-header, .hero, footer, .site-footer, canvas.webgl, .env-banner { display: none !important; }
    audio { display: none !important; }
    /* Débloquer le flux : les conteneurs du site (overflow/height/position) piègent
       sinon le contenu sur une seule page avec un défilement interne. */
    html, body, main, .cl-main, .cl-container, .cl-card, .cl-review-item, .cl-attest,
    #content, #main, #page, #wrapper, .content, .main, .page, .wrapper, .site-wrapper, .page-wrapper, .site-content {
        overflow: visible !important; max-height: none !important; height: auto !important; position: static !important;
    }
    body { -webkit-print-color-adjust: exact; print-color-adjust: exact; background: #fff !important; }
    .cl-print-head { display: flex !important; align-items: center; justify-content: space-between; gap: 20px;
        padding: 4px 0 12px; margin: 0 0 14px; border-bottom: 2px solid #110e23; font-weight: 700; }
    .cl-print-head small { font-weight: 400; color: #4a5261; }
    .cl-print-logo { display: flex; align-items: center; gap: 14px; color: #110e23; }
    .cl-print-logo svg { height: 30px; width: auto; display: block; }
    .cl-print-exam { font-weight: 800; font-size: 1.05em; padding-left: 14px; border-left: 2px solid #110e23; }
    .cl-review-item { break-inside: avoid; }
    .cl-review-item summary::marker, .cl-review-item summary::-webkit-details-marker { display: none; }
    .cl-table { font-size: .85em; }
    .cl-attest-fill, .cl-attest-level { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
}

/* -- Entretien oral ------------------------------------------------------ */
.cl-brief { background: var(--cl-strip); color: var(--cl-strip-text); padding: 12px 16px !important; border-radius: 6px; }
.cl-evaluator-tile { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.cl-evaluator-avatar { font-size: 1.6em; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--cl-navy); color: #fff; }
.cl-evaluator-name { font-weight: 600; color: var(--cl-navy); }
.cl-evaluator-wave { display: none; width: 60px; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--cl-orange) 0 40%, transparent 40% 60%, var(--cl-orange) 60%); }
.cl-evaluator.is-speaking .cl-evaluator-wave { display: inline-block; animation: cl-wave .8s linear infinite; }
@keyframes cl-wave { to { background-position: 60px 0; } }
.cl-eval-turn { display: none; }
.cl-eval-turn.is-text, .cl-evaluator.is-blocked .cl-eval-turn { display: block; }
.cl-eval-text { font-style: italic; opacity: .85; }
.cl-eval-play[hidden] { display: none; }
.cl-recorder { opacity: .85; transition: opacity .3s; }
.cl-recorder.is-recording { opacity: 1; }
/* Hors enregistrement : pas de point rouge ni de « à vous de parler », mais un libellé d'attente neutre */
.cl-recorder:not(.is-recording) .cl-rec-dot, .cl-recorder:not(.is-recording) .cl-rec-label { display: none; }
.cl-rec-wait { font-weight: 500; color: var(--text-color, #444); opacity: .7; }
.cl-recorder.is-recording .cl-rec-wait { display: none; }
.cl-rec-indicator { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--cl-red); }
.cl-rec-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--cl-red); }
.cl-recorder.is-recording .cl-rec-dot { animation: cl-blink 1s steps(2) infinite; }
.cl-rec-level { height: 6px; margin: 10px 0; background: var(--border-color, #e3e3e3); border-radius: 3px; overflow: hidden; }
.cl-rec-level-fill { display: block; height: 100%; width: 0; background: var(--cl-green); transition: width .1s; }
.cl-rec-file { display: none; }
.cl-rec-file.is-visible { display: block; margin: 10px 0; }
html:not(.js) .cl-rec-file { display: block; }
.cl-cue { margin-top: 0; }
.cl-turn-eval, .cl-turn-you, .cl-model { margin: 10px 0; }
.cl-turn-you audio, .cl-model audio { display: block; margin: 6px 0; max-width: 100%; }
.cl-transcript { padding: 10px 14px; border-left: 3px solid var(--cl-navy); background: rgba(27,43,91,.04); }
.cl-model { padding: 10px 14px; border-left: 3px solid var(--cl-green); background: rgba(63,163,77,.05); }
.cl-attest-combined { border-top: 1px solid var(--border-color, #eee); padding-top: 14px; }
.cl-ai-card h3 { margin-top: 0; color: var(--cl-navy); }
.cl-ai-crit { display: flex; gap: 14px; align-items: flex-start; margin: 10px 0; }
.cl-ai-crit .cl-attest-level { min-width: 44px; padding: 6px 0; }
.cl-ai-crit p { margin: 2px 0 0; }
.cl-ai-sub { font-weight: 600; margin: 12px 0 4px; }
.cl-ai-errors code { background: rgba(217,44,44,.08); padding: 2px 6px; border-radius: 3px; }
.cl-ai-suggestion { margin-top: 12px; padding: 10px 14px; background: rgba(228,83,0,.08); border-radius: 6px; }
.cl-rubric-details summary { cursor: pointer; font-weight: 600; margin: 16px 0 8px; }
.cl-rubric-wrap { overflow-x: auto; }
.cl-rubric td, .cl-rubric th { font-size: .82em; min-width: 140px; }
.cl-rubric tbody th { text-align: left; min-width: 120px; }

/* -- Échantillon gratuit : mise en garde « ce n'est pas votre niveau » -------- */
.cl-free-caveat {
    max-width: min(760px, 100%); margin: 12px auto 18px; padding: 12px 16px;
    background: rgba(228,83,0,.07); border: 1px solid rgba(228,83,0,.35); border-left-width: 4px;
    border-radius: 6px; font-size: .95em;
}

/* -- Vérification du matériel (écran de démarrage de l'oral) --------------- */
.cl-setup { border: 1px solid var(--border-color, #ddd); border-radius: 8px; padding: 12px 18px; margin: 18px 0; }
.cl-setup-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 8px 0; }
.cl-setup-num { width: 26px; height: 26px; border-radius: 50%; background: var(--cl-navy); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: .85em; }
.cl-setup-hint { font-size: .9em; opacity: .8; }
.cl-setup-playback { max-width: 260px; }

/* Situation (en poste / étudiant) de l'écran de démarrage oral */
.cl-status { border: 0; padding: 0; margin: 0 0 14px; }
.cl-status legend { font-weight: 600; margin-bottom: 6px; }
.cl-status label { display: inline-flex; align-items: center; gap: 6px; margin: 0 18px 4px 0; }
.cl-status input[type=radio] { width: 17px; height: 17px; margin: 0; }
.cl-status small { display: block; opacity: .75; margin-top: 2px; }

/* En-tête oral : bouton « Incident technique ? » à gauche du statut, comme à l'écrit */
.cl-oral-chrome .cl-qright { display: flex; align-items: center; gap: 12px; justify-content: flex-end; }