:root{--bg:#f4f6fa;--surface:#fff;--line:#e6e7ec;--line2:#d3d5dd;--ink:#1b1e33;--muted:#6c6f80;
      --accent:#185fa5;--docfont:Arial,sans-serif;--docsize:10pt;--ok:#0f8a4f;--warn:#e0900c;--bad:#e0425a;--rec:#e0425a;
      /* surfaces and tints, redefined by the dark theme below */
      --cardline:#e9ebf2;--soft:#f7f8fb;--tint:#f2f7fd;--tintline:#d6e5f6;--ink2:#33405a;--tplink:#7b8496;--faint:#98a1b3;
      --warnbg:#fff6e0;--warnline:#f3d38a;--warnink:#6b4a00;--okbg:#e9f7ef;--okline:#bfe5cf;--okink:#0c6e40;
      --badbg:#fdecef;--badline:#f2b3be;--badink:#a1173c;--pill:#eef1f6;--newbg:#e3eefb;--newink:#185fa5;--target:#ffe58f;
      --markold:#ffe2a8;--markoff:#cfe3f8;--micoff:#b9c2cf;--shadow:rgba(24,95,165,.14);--tplbg:#fff3c4;
      --page:linear-gradient(180deg,#0f2b46 0%,#123a52 22%,#1d5170 46%,#2f7f8e 72%,#5bbf9a 100%)}
/* dark theme (« thème sombre » in the header, kept per browser): same layout and fonts */
:root[data-theme="dark"]{color-scheme:dark;--surface:#171e2b;--line:#2a3345;--line2:#3a465c;--ink:#e3e7ef;--muted:#9aa4b8;
      --accent:#2b74c0;--cardline:#252e40;--soft:#1d2534;--tint:#182638;--tintline:#2a4260;--ink2:#c3cddd;--tplink:#8f99ac;--faint:#6f7a8f;
      --warnbg:#33290f;--warnline:#6b5420;--warnink:#f2d38c;--okbg:#10291d;--okline:#1f5238;--okink:#7fd9a8;
      --badbg:#3a1820;--badline:#6e2a37;--badink:#f4a3b2;--pill:#252e40;--newbg:#1d3550;--newink:#9cc8f5;--target:#6b5a12;
      --markold:#5c4715;--markoff:#1f3d5c;--micoff:#3a465c;--shadow:rgba(0,0,0,.5);--tplbg:#3d3512;
      --page:linear-gradient(180deg,#070d16 0%,#0a1522 40%,#0d1d2c 75%,#0f2430 100%)}
*{box-sizing:border-box}
body{margin:0;color:var(--ink);font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;font-size:15px;line-height:1.5;
     min-height:100vh;background:var(--page)}
/* pas de fond animé : il ralentissait l'éditeur sur les postes modestes */
.wrap{max-width:900px;margin:0 auto;padding:14px 14px 80px}
button,input,textarea,select{font-family:inherit;font-size:15px}
.spacer{flex:1}.muted{color:var(--muted)}
[hidden]{display:none!important}
.top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.logo{width:30px;height:30px;border-radius:8px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;flex:none}
.title{font-size:17px;font-weight:600;color:#eaf4ff;text-shadow:0 1px 8px rgba(0,0,0,.3)}
.whoami{color:#eaf4ff;font-size:13px}
.themesw{display:inline-flex;gap:5px;align-items:center;cursor:pointer;user-select:none}
.themesw input{margin:0;cursor:pointer}
.status{font-size:12px;padding:3px 10px;border-radius:999px;background:#fbe9c8;color:#8a5b00}
.status.ok{background:#d9f2e4;color:#0c6e40}
.status.bad{background:#fdecef;color:#a1173c}
.banner{border-radius:12px;padding:9px 13px;margin-bottom:10px;font-size:13.5px}
.banner.rule{background:var(--warnbg);border:1px solid var(--warnline);color:var(--warnink)}
.banner.close{background:var(--badbg);border:1px solid var(--badline);color:#8a1030}
:root[data-theme="dark"] .banner.close{color:var(--badink)}
.tabs{display:flex;gap:8px;margin:12px 0}
.tab{flex:1;text-align:center;padding:9px;border:1.5px solid var(--line2);border-radius:11px;background:var(--surface);cursor:pointer;font-weight:600}
.tab.on{background:var(--accent);border-color:var(--accent);color:#fff}
.card{background:var(--surface);border:1px solid var(--cardline);border-radius:16px;padding:16px;margin-bottom:14px;
      box-shadow:0 1px 2px rgba(27,30,51,.04),0 10px 28px -16px var(--shadow)}
.bt{font-size:12px;color:var(--muted);display:flex;gap:8px;align-items:center;margin-bottom:8px;flex-wrap:wrap}
.micbar{display:flex;align-items:center;gap:10px;margin:14px 0 4px;flex-wrap:wrap}
.mic{flex:1;min-width:180px;padding:14px;border:none;border-radius:12px;font-size:16px;font-weight:700;cursor:pointer;background:var(--accent);color:#fff}
.mic.rec{background:var(--rec);animation:pulse 1.2s infinite}
.mic:disabled{background:var(--micoff);cursor:default;animation:none}
.newcase{padding:12px 18px;border:2px solid var(--line2);border-radius:12px;font-size:16px;font-weight:700;cursor:pointer;background:var(--surface);color:var(--ink)}
.newcase:hover:not(:disabled){border-color:var(--accent)}.newcase:disabled{opacity:.5;cursor:default}
@keyframes pulse{50%{opacity:.75}}
.btn{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border:1px solid var(--line2);border-radius:9px;background:var(--surface);color:var(--ink);cursor:pointer}
.btn.primary{background:var(--ok);border-color:var(--ok);color:#fff;font-weight:600}
.btn.blue{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.btn.bad{color:var(--bad);border-color:var(--badline)}
.btn.small{font-size:12.5px;padding:6px 10px}
.btn:disabled{opacity:.55;cursor:default}
.livebox{font-family:var(--docfont);font-size:var(--docsize);background:var(--soft);border:1.5px solid var(--line);border-radius:11px;padding:11px 13px;min-height:64px;max-height:38vh;overflow:auto;white-space:pre-wrap;margin-top:10px}
.livebox .prevtxt{color:var(--faint)}
.livebox .cur{color:var(--ink)}
.rate{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border:1px solid var(--line2);border-radius:999px;background:var(--surface);cursor:pointer;font-size:12px;color:var(--muted);font-weight:600}
.rate.on{background:var(--accent);border-color:var(--accent);color:#fff}
.lbl{font-size:12px;font-weight:600;letter-spacing:.03em;color:var(--muted);margin:14px 0 5px}
.panel{background:var(--soft);border:1.5px solid var(--line);border-radius:11px;padding:10px 12px;white-space:pre-wrap;min-height:22px}
.panel.live2 mark{background:var(--markold)}
.panel.off mark{background:var(--markoff)}
mark{border-radius:4px;padding:0 2px;color:inherit}
textarea.ref{font-family:var(--docfont);font-size:var(--docsize);width:100%;border:1.5px solid var(--line2);border-radius:11px;padding:11px 12px;min-height:200px;resize:vertical;line-height:1.5;
             background:var(--surface);color:var(--ink)}
textarea.ref:focus,input.txt:focus{outline:none;border-color:var(--accent)}
input.txt{width:100%;border:1.5px solid var(--line2);border-radius:10px;padding:10px 12px;background:var(--surface);color:var(--ink)}
.rowb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px}
audio{width:100%;margin-top:8px}
.hint{color:var(--muted);font-size:12px;margin-top:8px}
.err{background:var(--badbg);color:var(--badink);border-radius:10px;padding:10px 12px;margin-top:10px}
.takerow{border:1px solid var(--line);border-radius:10px;padding:8px 10px;margin-top:8px;background:var(--soft)}
.takerow .snip{font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.center{max-width:560px;margin:8vh auto 0}
.consent p,.consent li{font-size:14px}
.toast{position:fixed;left:50%;top:14%;transform:translateX(-50%);z-index:100;background:var(--surface);border:1px solid var(--line2);border-radius:14px;
       padding:12px 20px;font-size:15px;font-weight:600;box-shadow:0 12px 40px -12px rgba(27,30,51,.35);animation:toastin .35s ease}
@keyframes toastin{from{opacity:0;transform:translateX(-50%) translateY(-10px)}}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:10px}
table{border-collapse:collapse;width:100%;font-size:13px}
th,td{border-bottom:1px solid var(--line);padding:6px 6px;text-align:left;vertical-align:top}
th{color:var(--muted);font-weight:600;font-size:12px}
.pill{font-size:11.5px;padding:1px 7px;border-radius:999px;background:var(--pill);color:var(--muted)}
.pill.red{background:var(--badbg);color:var(--badink)}.pill.green{background:#d9f2e4;color:#0c6e40}
:root[data-theme="dark"] .pill.green{background:var(--okbg);color:var(--okink)}
pre.diag{background:#0e1020;color:#b9e5b0;font-size:11.5px;border-radius:8px;padding:8px 10px;margin:0 0 8px;max-height:160px;overflow:auto;white-space:pre-wrap}
@media (max-width:600px){.wrap{padding:10px 10px 60px}.mic{min-width:140px}.newcase{flex:1 1 100%}}
/* templates: recognition, review, library */
select.tsel{max-width:100%;padding:6px 9px;border:1.5px solid var(--line2);border-radius:9px;background:var(--surface);color:var(--ink)}
.report{font-family:var(--docfont);font-size:var(--docsize);background:var(--surface);border:1.5px solid var(--line);border-radius:11px;padding:12px 14px;margin-top:10px;line-height:1.5}
.report .rl{white-space:pre-wrap}
/* template sentences (not dictated, to check): highlighted, in the template's own formatting
   (tester 2026-10-29: grey italic changed it); the highlight is never copied */
.report .rl.tpl,.report p.tpl{background:var(--tplbg);width:fit-content;max-width:100%;border-radius:3px}
.ed .ProseMirror p.tpl{background:var(--tplbg);border-radius:3px}
.tplsample{background:var(--tplbg);border-radius:3px;padding:0 3px}
/* bold / underline come from the line's markup (lineHtml): the house style, or the template's own */
.report .rtitle{letter-spacing:.02em}
.report .rsec{color:var(--ink2);margin-top:6px}
.checks{display:flex;flex-direction:column;gap:5px;font-size:13px}
.ck{padding:6px 10px;border-radius:9px;background:var(--soft);border:1px solid var(--line)}
.ck.warn{background:var(--warnbg);border-color:var(--warnline);color:var(--warnink)}
.ck.ok{background:var(--okbg);border-color:var(--okline);color:var(--okink)}
.ck.ask{border-style:dashed}
.tplrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;border:1px solid var(--line);border-radius:10px;padding:7px 10px;margin-top:6px;background:var(--soft)}
.tplrow .nm{font-weight:600}
.tplpre{white-space:pre-wrap;font-family:var(--docfont);font-size:var(--docsize);background:var(--surface);border:1px dashed var(--line2);border-radius:9px;padding:8px 10px;margin-top:6px}
.livebox .cur.ins{background:var(--newbg);border-radius:4px;padding:0 2px}
/* ⓘ next to a section title, and the explanations it opens ("info" is a check level: .ck.info) */
.infobtn{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-left:4px;vertical-align:middle;
      border:1.5px solid var(--accent);border-radius:50%;background:var(--surface);color:var(--accent);cursor:pointer;user-select:none;
      font:italic 700 12px Arial,sans-serif;letter-spacing:0}
.infobtn.on{background:var(--accent);color:#fff}
/* « Ma dictée »: a box as wide as its lines (--col, about 12 words by default) that the person
   resizes from its corner handle, sideways like up and down (the width is kept as --col) */
.dictwrap{position:relative}
textarea.dictbox{--col:68ch;width:calc(var(--col) + 31px);min-width:220px;max-width:100%;resize:both;
                 padding-left:14px;padding-right:14px;scrollbar-gutter:stable}
textarea.dictbox.just{text-align:justify}
@media (max-width:600px){textarea.dictbox{width:auto!important;resize:vertical}}
/* editors (Tiptap / ProseMirror): « Ma dictée » and the report's "Modifier"; Arial 10 pt */
.ed{font-family:var(--docfont);font-size:var(--docsize);line-height:1.5;color:var(--ink);background:var(--surface);border:1.5px solid var(--line2);
    border-radius:11px;min-height:200px;height:260px;overflow:auto;resize:vertical;scrollbar-gutter:stable;cursor:text}
.ed:focus-within{border-color:var(--accent)}
.ed .ProseMirror{position:relative;outline:none;min-height:100%;padding:11px 14px;white-space:pre-wrap;white-space:break-spaces;
    overflow-wrap:break-word;font-variant-ligatures:none;font-feature-settings:"liga" 0}
.ed .ProseMirror p,.report p{margin:0}
.ed .ProseMirror ul,.report ul{margin:0;padding-left:22px}
.ed .ProseMirror li{position:relative}
.ed .ProseMirror-hideselection *::selection{background:transparent}
.ed .ProseMirror-hideselection{caret-color:transparent}
.ed .ProseMirror p.is-editor-empty:first-child::before{content:attr(data-placeholder);float:left;height:0;color:#9aa3b5;pointer-events:none;font-style:italic}
.ed.dictbox{--col:68ch;width:calc(var(--col) + 31px);min-width:220px;max-width:100%;resize:both}
.ed.just .ProseMirror{text-align:justify}
.ed.repbox{height:380px;margin-top:8px}
.rate.fmt{min-width:26px;justify-content:center}
/* dictation marks: what a take will replace, where it will go, what it just wrote */
.dict-target{background:var(--target);border-radius:2px}
.dict-caret{display:inline-block;width:2px;height:1.15em;margin:0 -1px;vertical-align:text-bottom;background:var(--warn);animation:pulse 1s infinite}
.dict-new{color:var(--newink);background:var(--newbg);border-radius:2px}
.dict-new.flash{animation:dictflash 1.6s ease-out}
@keyframes dictflash{from{background:#a9cdf5}}
@media (max-width:600px){.ed.dictbox{width:auto!important;resize:vertical}}
.helpbox{font-size:12.5px;line-height:1.55;color:var(--ink2);background:var(--tint);border:1px solid var(--tintline);border-radius:10px;padding:8px 11px;margin:2px 0 8px}
/* on a wide screen (the Dictée tab widens the page), two columns: the dictation controls, the
   live text and « Ma dictée » on the left, as wide as the box; on the right, never under 380 px
   (the box stops growing there), the report's generator, the report and its checks; stacked
   under 1000 px */
.wrap.wide{max-width:1380px}
.reph{margin-top:0;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.reph .muted{font-weight:400;letter-spacing:0}
.reppane .report{margin-top:6px}
@media (min-width:1000px){
  .duo{display:grid;grid-template-columns:min-content minmax(380px,1fr);gap:14px;align-items:start}
  .duo>.dictcol,.duo>.repcol{min-width:0}
  .duo .ed.dictbox,.duo textarea.dictbox{max-width:calc(min(1380px,100vw) - 473px)}
  /* a report on screen: it is the main box, the dictation column narrows */
  .duo.after{grid-template-columns:minmax(300px,32%) minmax(0,1fr)}
  .duo.after .ed.dictbox,.duo.after textarea.dictbox{width:auto!important;max-width:100%;resize:vertical}
}
.lbl.row{display:flex;align-items:center;gap:8px}
.dictcard.small .ed.dictbox,.dictcard.small textarea.dictbox{height:22vh!important;min-height:120px;resize:none}
.duo.after .livebox{min-height:40px;max-height:22vh}
/* the main card: the report's settings, then the trame (no report yet) or the report */
.card.main .crset.compact .rowb{margin-top:6px}
.card.main .trame{margin-top:6px;border-top:1px solid var(--line);padding-top:2px}
.card.main .trbody{max-height:none}
.card.main .repbody{margin-top:8px;border-top:1px solid var(--line);padding-top:2px}
/* TARDOC coding proposal under the report */
.tardoc{margin-top:10px;border:1px solid var(--line);border-radius:10px;background:var(--soft);padding:8px 10px;font-size:13px}
.tdh{display:flex;gap:6px 8px;align-items:center;flex-wrap:wrap}
.tdtot{font-weight:700}
.tdins{display:inline-flex;gap:5px;align-items:center;font-size:12.5px;color:var(--muted);cursor:pointer}
.tdcodes{margin-top:4px;font-family:var(--docfont);font-size:12.5px;overflow-wrap:anywhere}
.tddet{margin-top:6px}
.tdtab{overflow-x:auto}
.tdtab table{width:100%;border-collapse:collapse;font-size:12.5px;background:var(--surface)}
.tdtab td.n,.tdtab th.n{text-align:right;white-space:nowrap}.tdtab td.nw{white-space:nowrap}
.tdopts{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:6px 12px;margin-top:8px}
.tdopt{display:flex;gap:4px 6px;align-items:center;flex-wrap:wrap;font-size:12.5px}
.tdopt label{display:inline-flex;gap:5px;align-items:center;flex-wrap:wrap}
.tdopt.wide{grid-column:1/-1}
.tdc{flex-basis:100%;color:var(--muted);font-size:11.5px;line-height:1.35}
.rate.tdp{padding:0 7px;font-size:11.5px}
.rate.tdmore{color:var(--warnink);border-color:var(--warnline);background:var(--warnbg)}
.tdopt select.tsel{padding:3px 6px;font-size:12.5px;max-width:100%}
.tdopt input[type=number],.tdfoot input[type=number]{width:64px;padding:2px 6px;border:1.5px solid var(--line2);border-radius:7px;font-size:12.5px;background:var(--surface);color:var(--ink)}
.tdopt .found{color:var(--okink);font-size:11.5px}
.tdnote{margin-top:5px;color:var(--muted);font-size:12px}
.tdhint{margin-top:5px;color:var(--warnink);font-size:12px}
.tdfoot{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
/* the trame beside « Ma dictée »: the template's items, ✓ those already dictated (their normal
   sentence will not be used) */
.trbody{font-family:var(--docfont);font-size:var(--docsize);line-height:1.45;max-height:46vh;overflow:auto}
.trtitle{font-weight:700;letter-spacing:.02em;margin-bottom:3px}
.trsec{font-weight:600;color:var(--ink2);margin-top:6px}
.tritem{position:relative;padding:1px 0 1px 18px}
.tritem .trk{position:absolute;left:0;top:1px;width:14px;text-align:center;color:var(--faint)}
.tritem .trn{color:var(--tplink);font-style:italic}
.tritem.ok .trk{color:var(--ok);font-weight:700}
.tritem.ok .trn{text-decoration:line-through;text-decoration-color:var(--faint)}
.trname{font-weight:400;letter-spacing:0}
/* captures (OCR): a zone to paste or drop a screenshot into, and its text */
.ocrrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:10px}
.ocrzone{border:1.5px dashed var(--line2);border-radius:11px;padding:9px 11px;font-size:12.5px;background:var(--soft);cursor:pointer;outline:none}
.ocrzone:focus,.ocrzone.drag{border-color:var(--accent);background:var(--tint)}
.ocrzone.busy{opacity:.7;cursor:progress}
textarea.ocrtxt{min-height:90px;margin-top:6px}
/* « non mentionné » TARDOC elements under the report, the consigne box, what a consigne changed */
.tdmiss{margin-top:8px;display:flex;gap:5px 6px;align-items:center;flex-wrap:wrap;font-size:12px}
.rate.tdadd{color:var(--newink);border-color:var(--tintline);background:var(--tint)}
.rate.tdadd .tdgain{font-weight:400;color:var(--muted)}
.rate.tdadd.off{opacity:.5;cursor:default}
.consigne{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:8px}
.consigne input.txt{flex:1;min-width:200px;padding:7px 10px;font-size:13px}
.report p.rev{background:var(--newbg);border-radius:3px}
/* the report's click menu: a line under the pointer, then the changes it can take */
.reppane .report .rl[data-li],.reppane .report.edv>p{cursor:pointer;border-radius:3px}
@media (hover:hover){.reppane .report .rl[data-li]:hover,.reppane .report.edv>p:hover{background:var(--tint)}}
.wmenu{position:absolute;z-index:90;min-width:220px;max-width:min(360px,calc(100vw - 16px));background:var(--surface);border:1px solid var(--line2);
       border-radius:10px;padding:4px;box-shadow:0 12px 32px -12px rgba(27,30,51,.35);font-size:13px}
.wmh{font-size:11px;font-weight:600;letter-spacing:.03em;color:var(--muted);text-transform:uppercase;padding:6px 8px 2px}
.wmi{padding:5px 8px;border-radius:7px;cursor:pointer;color:var(--ink)}
.wmi:hover{background:var(--tint)}