/* Otoolia — Fiches de révision */
.fx { --fx-b: var(--ot-border); }
.fx-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.fx-sel select { min-width: 200px; max-width: 320px; }
.fx-sm { padding: 7px 12px; font-size: .9rem; }
.fx-sp { flex: 1 1 auto; }
.fx-status { font-size: .88rem; color: var(--ot-muted, #64748b); }
.fx-status.is-ok { color: #15803d; } .fx-status.is-warn { color: #b45309; }
.fx-menu { position: relative; z-index: 30; display: flex; flex-wrap: wrap; gap: 6px; padding: 10px; margin: -4px 0 10px; border: 1px solid var(--fx-b); border-radius: 12px; background: var(--ot-surface); box-shadow: var(--ot-shadow); }
.fx-menu button { border: 1px solid var(--fx-b); background: var(--ot-surface-2); color: var(--ot-text); border-radius: 8px; padding: 6px 10px; cursor: pointer; font: inherit; font-size: .88rem; }
.fx-menu button:hover { border-color: var(--ot-brand); }
.fx-menu-t { width: 100%; font-size: .8rem; font-weight: 600; color: var(--ot-muted, #64748b); margin-top: 4px; }
.fx-tabs { display: none; gap: 6px; margin-bottom: 8px; }
.fx-tabs button { flex: 1; border: 1px solid var(--fx-b); background: var(--ot-surface); color: var(--ot-text); border-radius: 10px; padding: 8px; font: inherit; cursor: pointer; }
.fx-tabs button[aria-pressed="true"] { background: var(--ot-text); color: var(--ot-bg, #fff); }
.fx-main { display: grid; grid-template-columns: 220px minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.fx-side { position: sticky; top: 72px; max-height: calc(100vh - 90px); overflow: auto; display: flex; flex-direction: column; gap: 10px; }
.fx-search { width: 100%; }
.fx-toc { display: flex; flex-direction: column; gap: 2px; font-size: .9rem; }
.fx-toc a { color: var(--ot-text); text-decoration: none; padding: 3px 6px; border-radius: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-toc a:hover { background: var(--ot-surface-2); }
.fx-toc-ch { font-weight: 600; } .fx-toc-pt { padding-left: 16px !important; font-size: .86rem; }
.fx-toc .is-hidden { opacity: .45; text-decoration: line-through; }
.fx-set { border: 1px solid var(--fx-b); border-radius: 12px; padding: 8px 10px; background: var(--ot-surface); font-size: .88rem; }
.fx-set summary { cursor: pointer; font-weight: 600; }
.fx-set label { display: block; margin-top: 8px; }
.fx-set label .ot-input { width: 100%; margin-top: 2px; padding: 5px 8px; font-size: .88rem; }
.fx-set .fx-row { display: flex; gap: 8px; } .fx-set .fx-row label { flex: 1; }
.fx-set .fx-ck { display: block; }
.fx-set .fx-ck input[type=checkbox] { margin: 0 5px 0 0; vertical-align: -2px; }
.fx-set .fx-ck .ot-input { width: auto; } .fx-n { width: 56px !important; }
.fx-mac { font: .82rem/1.4 ui-monospace, Menlo, Consolas, monospace; }
.fx-hint { font-size: .82rem; color: var(--ot-muted, #64748b); margin: 6px 0; }
.fx-ed { min-width: 0; }
.fx-items { display: flex; flex-direction: column; gap: 8px; }
.fx-empty { padding: 20px; text-align: center; color: var(--ot-muted, #64748b); border: 1px dashed var(--fx-b); border-radius: 12px; }
.fx-it { border: 1px solid var(--fx-b); border-radius: 10px; background: var(--ot-surface); padding: 6px 8px; }
.fx-it.is-hidden { opacity: .55; }
.fx-it.is-filtered { display: none; }
.fx-it.is-drag { opacity: .4; }
.fx-it.is-over { box-shadow: 0 -3px 0 var(--ot-brand); } .fx-it.is-over.is-after { box-shadow: 0 3px 0 var(--ot-brand); }
.fx-it-ch, .fx-it-pt { display: flex; align-items: center; gap: 6px; }
.fx-it-ch { background: var(--ot-surface-2); margin-top: 6px; }
.fx-it-ch .fx-ti { font-weight: 700; font-size: 1.05rem; }
.fx-it-pt .fx-ti { font-weight: 600; }
.fx-it-pt { margin-left: 14px; }
.fx-it-b { border-left: 4px solid var(--c); margin-left: 14px; }
.fx-it-head { display: flex; align-items: center; gap: 6px; }
.fx-handle { cursor: grab; color: var(--ot-muted, #94a3b8); user-select: none; padding: 0 2px; font-size: 1.05rem; }
.fx-type { border: 1px solid var(--fx-b); border-radius: 6px; background: var(--ot-surface-2); color: var(--c); font: inherit; font-size: .85rem; font-weight: 600; padding: 3px 4px; max-width: 130px; }
.fx-ti { flex: 1 1 auto; min-width: 0; border: 1px solid transparent; background: transparent; color: var(--ot-text); font: inherit; padding: 4px 6px; border-radius: 6px; }
.fx-ti:hover, .fx-ti:focus { border-color: var(--fx-b); background: var(--ot-surface-2); outline: none; }
.fx-it-tools { display: flex; gap: 2px; flex: 0 0 auto; }
.fx-it-tools button, .fx-fold { border: none; background: none; color: var(--ot-muted, #64748b); cursor: pointer; font: inherit; font-size: .9rem; padding: 3px 5px; border-radius: 6px; }
.fx-it-tools button:hover, .fx-fold:hover { background: var(--ot-surface-2); color: var(--ot-text); }
.fx-fmt { display: flex; gap: 4px; margin: 4px 0; flex-wrap: wrap; }
.fx-fmt button { border: 1px solid var(--fx-b); background: var(--ot-surface-2); color: var(--ot-text); border-radius: 6px; padding: 2px 8px; font: inherit; font-size: .82rem; cursor: pointer; min-width: 28px; }
.fx-fmt button:hover { border-color: var(--ot-brand); }
.fx-x { width: 100%; resize: vertical; border: 1px solid var(--fx-b); border-radius: 8px; background: var(--ot-surface-2); color: var(--ot-text); font: .9rem/1.45 ui-monospace, Menlo, Consolas, monospace; padding: 6px 8px; min-height: 44px; }
.fx-x:focus { outline: 2px solid var(--ot-brand); background: var(--ot-surface); }
.fx-it-err { margin: 4px 0 0; color: #c0262d; font-size: .82rem; }
.fx-add { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 12px 0 6px; font-size: .88rem; }
.fx-add button { border: 1px solid var(--fx-b); border-left: 3px solid var(--c, var(--ot-text)); background: var(--ot-surface); color: var(--ot-text); border-radius: 8px; padding: 5px 9px; font: inherit; font-size: .85rem; cursor: pointer; }
.fx-add button:hover { border-color: var(--ot-brand); }
.fx-add select { width: auto; padding: 5px 8px; font-size: .85rem; }
.fx-pv { position: sticky; top: 72px; min-width: 0; }
.fx-pvbar { display: flex; align-items: center; gap: 4px; font-size: .85rem; color: var(--ot-muted, #64748b); margin-bottom: 6px; flex-wrap: wrap; }
.fx-zbtn { border: 1px solid var(--fx-b); background: var(--ot-surface); color: var(--ot-text); border-radius: 6px; padding: 2px 8px; cursor: pointer; font: inherit; }
.fx-pvscroll { max-height: calc(100vh - 120px); overflow: auto; background: #d9dee6; border-radius: 12px; padding: 12px; }
.fx-sizer { overflow: hidden; margin: 0 auto; }
.fx-zoom { transform-origin: top left; }
.fx-measure { position: absolute; left: -10000px; top: 0; visibility: hidden; }

/* ---------- La fiche (aperçu, mesure, impression) : toujours sur fond blanc ---------- */
.fx-sheet { color: #111; font-family: "Inter", "Segoe UI", Helvetica, Arial, sans-serif; line-height: 1.32; --sp: 1; }
.fx-page { width: 210mm; height: 297mm; background: #fff; box-sizing: border-box; margin: 0 0 14px; box-shadow: 0 2px 10px rgba(0,0,0,.18); display: flex; flex-direction: column; overflow: hidden; }
.fx-page.is-land { width: 297mm; height: 210mm; }
.fx-ph { display: flex; justify-content: space-between; align-items: flex-start; font-size: .85em; border-bottom: .3mm solid #999; margin-bottom: 1.5mm; box-sizing: border-box; color: #333; }
.fx-cols { display: flex; flex: 0 0 auto; }
.fx-col { flex: 0 0 auto; overflow: hidden; }
.fx-pfoot { text-align: center; font-size: .8em; color: #555; padding-top: 1.5mm; box-sizing: border-box; }
.fx-s-it { padding-bottom: calc(var(--sp) * 1.2mm); }
.fx-s-ch { font-size: 1.35em; margin: 0; padding: .4mm 0 .6mm; border-bottom: .5mm solid #1e293b; line-height: 1.15; }
.fx-s-pt { font-size: 1.12em; margin: 0; padding-top: .5mm; color: #1e293b; line-height: 1.15; }
.fx-s-b { border-left: .9mm var(--bs, solid) var(--c); padding: .6mm 0 .6mm 1.8mm; background: color-mix(in srgb, var(--c) 6%, #fff); }
.fx-s-b.fx-s-free { border-left: none; background: none; padding-left: 0; }
.fx-s-b.fx-s-ret, .fx-s-b.fx-s-thm { border-left-width: 1.4mm; }
.fx-s-b.fx-s-att { background: color-mix(in srgb, var(--c) 10%, #fff); }
.fx-s-h { font-size: .95em; margin-bottom: .3mm; }
.fx-s-lab { font-weight: 700; color: var(--c); margin-right: 1.2mm; text-transform: uppercase; font-size: .78em; letter-spacing: .02em; }
.fx-s-h b { font-weight: 700; }
.fx-s-x p { margin: 0 0 .5mm; } .fx-s-x p:last-child { margin-bottom: 0; }
.fx-s-x ul, .fx-s-x ol { margin: 0 0 .5mm; padding-left: 4mm; } .fx-s-x li { margin: 0; }
.fx-s-x .katex { font-size: 1.05em; }
.fx-s-x .katex-display { margin: .6mm 0; overflow-x: hidden; overflow-y: hidden; }
.fx-s-x img { max-width: 100%; }
.fx-err { color: #c0262d; background: #fde8e8; border-radius: 2px; font-family: ui-monospace, monospace; font-size: .9em; }
.fx-sheet.is-bw .fx-s-b, .is-bw .fx-s-b { --c: #222 !important; background: #fff; }
.is-bw .fx-s-b.fx-s-att { background: #f2f2f2; }

/* ---------- Assistant de formules ---------- */
.fx-dlg { width: min(860px, 96vw); max-height: 92vh; border: 1px solid var(--fx-b); border-radius: 14px; padding: 0; background: var(--ot-surface); color: var(--ot-text); }
.fx-dlg::backdrop { background: rgba(15, 23, 42, .45); }
.fx-dlg-in { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; max-height: 90vh; }
.fx-dlg-h { display: flex; justify-content: space-between; align-items: center; }
.fx-x-close { border: none; background: none; font-size: 1.1rem; cursor: pointer; color: var(--ot-text); }
.fx-ptabs { display: flex; flex-wrap: wrap; gap: 4px; }
.fx-ptabs button { border: 1px solid var(--fx-b); background: var(--ot-surface-2); color: var(--ot-text); border-radius: 999px; padding: 4px 10px; font: inherit; font-size: .82rem; cursor: pointer; }
.fx-ptabs button[aria-pressed="true"] { background: var(--ot-text); color: var(--ot-bg, #fff); }
.fx-pal { display: flex; flex-wrap: wrap; gap: 4px; max-height: 34vh; overflow: auto; padding: 4px; border: 1px solid var(--fx-b); border-radius: 10px; background: var(--ot-surface-2); }
.fx-pb { min-width: 44px; min-height: 38px; border: 1px solid var(--fx-b); background: #fff; color: #111; border-radius: 8px; cursor: pointer; padding: 2px 6px; font-size: .9rem; }
.fx-pb:hover, .fx-pf:hover { border-color: var(--ot-brand); }
.fx-fgroup { width: 100%; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-bottom: 6px; } .fx-fgroup b { width: 100%; font-size: .82rem; }
.fx-pf { border: 1px solid var(--fx-b); background: #fff; color: #111; border-radius: 8px; cursor: pointer; padding: 4px 8px; font-size: .88rem; }
.fx-pfw { display: inline-flex; align-items: center; gap: 2px; }
.fx-unfav { border: none; background: none; cursor: pointer; color: var(--ot-muted, #64748b); }
.fx-sc { width: 100%; font: .82rem/1.4 ui-monospace, monospace; }
.fx-mfwrap { border: 2px solid var(--ot-brand); border-radius: 10px; background: #fff; }
.fx-mf { display: block; width: 100%; font-size: 1.3rem; padding: 6px 8px; color: #111; background: #fff; border: none; min-height: 48px; }
.fx-lx { font-size: .82rem; } .fx-lx textarea { width: 100%; font: .85rem/1.4 ui-monospace, Menlo, monospace; margin-top: 2px; }
.fx-ferr { color: #c0262d; font-size: .85rem; margin: 0; min-height: 1.1em; }
.fx-fprev { min-height: 24px; text-align: center; overflow-x: auto; }
.fx-dlg-f { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fx-dlg-f .fx-ck { display: flex; align-items: center; gap: 4px; font-size: .88rem; }

/* ---------- Écrans étroits : un onglet Rédiger / Aperçu ---------- */
@media (max-width: 1180px) {
  .fx-main { grid-template-columns: 200px minmax(0, 1fr); }
  .fx-pv { grid-column: 1 / -1; position: static; }
}
@media (max-width: 760px) {
  .fx-tabs { display: flex; }
  .fx-main { grid-template-columns: minmax(0, 1fr); }
  .fx-side { position: static; max-height: none; }
  .fx[data-view="edit"] .fx-pv { display: none; }
  .fx[data-view="prev"] .fx-ed, .fx[data-view="prev"] .fx-side { display: none; }
  .fx-it-b, .fx-it-pt { margin-left: 0; }
  .fx-sel select { min-width: 0; max-width: 60vw; }
}

/* ---------- Impression : seules les pages de la fiche ---------- */
.fx-printroot { display: none; }
@media print {
  @page { size: A4; margin: 0; }
  html, body { background: #fff !important; margin: 0 !important; padding: 0 !important; }
  body > *:not(.fx-printroot) { display: none !important; }
  .fx-printroot { display: block !important; }
  .fx-printroot .fx-page { box-shadow: none; margin: 0; break-after: page; page-break-after: always; }
  .fx-printroot .fx-page:last-child { break-after: auto; page-break-after: auto; }
  .fx-sheet { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
/* page plus large que les autres outils : éditeur + aperçu côte à côte */
.ot-container.ot-container--wide { max-width: 1560px; }

/* ---------- Étape 2 : images et cours PDF ---------- */
.fx-s-fig { margin: .4mm auto .8mm; text-align: center; break-inside: avoid; }
.fx-s-fig img { display: block; width: 100%; height: auto; margin: 0 auto; }
.fx-s-fig figcaption { font-size: .85em; color: #444; font-style: italic; margin-top: .3mm; }
.fx-s-noimg { display: inline-block; padding: 2mm; border: .3mm dashed #c0262d; color: #c0262d; font-size: .85em; }
.fx-x.is-drop { outline: 2px dashed var(--ot-brand); background: var(--ot-surface); }
.fx-cdlg .fx-cwrap { text-align: center; background: #e2e8f0; border-radius: 10px; padding: 8px; }
.fx-ccan { max-width: 100%; cursor: crosshair; touch-action: none; }
.fx-row2 { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; font-size: .9rem; } .fx-row2 label { display: flex; align-items: center; gap: 6px; flex: 1 1 240px; } .fx-row2 .ot-input { flex: 1; }
.fx-pvsw { display: inline-flex; gap: 4px; margin-right: 8px; }
.fx-pvsw button { border: 1px solid var(--fx-b); background: var(--ot-surface); color: var(--ot-text); border-radius: 999px; padding: 3px 10px; font: inherit; font-size: .85rem; cursor: pointer; }
.fx-pvsw button[aria-pressed="true"] { background: var(--ot-text); color: var(--ot-bg, #fff); }
.fx-pvbar.is-pdf #fx-pinfo, .fx-pvbar.is-pdf .fx-zbtn { display: none; }
.fx-pdf { position: relative; }
.fx-pdfbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; font-size: .85rem; }
.fx-zbtn[aria-pressed="true"] { background: var(--ot-brand); color: #fff; border-color: var(--ot-brand); }
.fx-zbtn:disabled { opacity: .5; cursor: default; }
.fx-pdfname { color: var(--ot-muted, #64748b); font-size: .82rem; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-pdfdrop { border: 2px dashed var(--fx-b); border-radius: 12px; padding: 28px 18px; text-align: center; color: var(--ot-muted, #64748b); cursor: pointer; background: var(--ot-surface); }
.fx-pdfdrop:hover { border-color: var(--ot-brand); }
.fx-pdfpages { max-height: calc(100vh - 150px); overflow: auto; background: #d9dee6; border-radius: 12px; padding: 10px; }
.fx-pdfpages:empty { display: none; }
.fx-pdfpage { position: relative; margin: 0 auto 10px; background: #fff; box-shadow: 0 1px 6px rgba(0,0,0,.2); }
.fx-pdfpage canvas { display: block; }
.fx-pdfnum { position: absolute; left: -2px; top: -2px; font-size: 11px; background: rgba(15,23,42,.65); color: #fff; padding: 1px 5px; border-radius: 4px; z-index: 3; }
.fx-pdfpages.is-cap .fx-pdfpage { cursor: crosshair; }
.fx-pdfpages.is-cap .textLayer { pointer-events: none; user-select: none; }
.fx-capbox { position: absolute; border: 2px solid #2563eb; background: rgba(37,99,235,.12); z-index: 4; pointer-events: none; }
.fx-selins { position: absolute; z-index: 10; box-shadow: var(--ot-shadow); }
/* calque de texte de pdf.js (sélection) */
.textLayer { position: absolute; text-align: initial; inset: 0; overflow: clip; opacity: 1; line-height: 1; text-size-adjust: none; forced-color-adjust: none; transform-origin: 0 0; caret-color: CanvasText; z-index: 2; }
.textLayer :is(span, br) { color: transparent; position: absolute; white-space: pre; cursor: text; transform-origin: 0% 0%; }
.textLayer span.markedContent { top: 0; height: 0; }
.textLayer ::selection { background: rgba(37, 99, 235, .3); }
.textLayer br::selection { background: transparent; }
.textLayer .endOfContent { display: block; position: absolute; inset: 100% 0 0; z-index: 0; cursor: default; user-select: none; }
@media (max-width: 760px) {
  .fx[data-view="pdf"] .fx-ed, .fx[data-view="pdf"] .fx-side { display: none; }
  .fx[data-view="pdf"] .fx-pv { display: block; }
  .fx[data-view="pdf"] .fx-pvsw { display: none; }
}

/* ---------- Étape 3 : mode révision ---------- */
.fx-revbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; font-size: .85rem; }
.fx-revbar .fx-ck { display: flex; align-items: center; gap: 4px; }
.fx-revlist { display: flex; flex-direction: column; gap: 8px; max-height: calc(100vh - 150px); overflow: auto; padding: 2px; }
.fx-rcard { border: 1px solid var(--fx-b); border-left: 4px solid var(--c); border-radius: 10px; background: var(--ot-surface); padding: 8px 10px; }
.fx-rcard.is-ok { background: color-mix(in srgb, #16a34a 8%, var(--ot-surface)); } .fx-rcard.is-ko { background: color-mix(in srgb, #dc2626 8%, var(--ot-surface)); }
.fx-rpath { font-size: .75rem; color: var(--ot-muted, #64748b); }
.fx-rq { margin: 2px 0 6px; } .fx-rq .fx-s-lab { color: var(--c); }
.fx-ra { background: #fff; color: #111; border-radius: 8px; padding: 6px 8px; margin-bottom: 6px; font-size: 1rem; }
.fx-rbtns { display: flex; gap: 6px; flex-wrap: wrap; }
.fx-rok:hover { border-color: #16a34a; } .fx-rko:hover { border-color: #dc2626; }
@media (max-width: 760px) {
  .fx[data-view="rev"] .fx-ed, .fx[data-view="rev"] .fx-side { display: none; }
  .fx[data-view="rev"] .fx-pv { display: block; }
  .fx[data-view="rev"] .fx-pvsw { display: none; }
}