/*
 * editor.css — Feuille de style de l'éditeur Morphose
 * Chargée par index.html avec versionnage (?v=YYYYMMDD) pour éviter le cache.
 */

/* ── Variables ───────────────────────────────── */
:root {
  --bg:      #f2f3f5;
  --sidebar: #1e2433;
  --tabbar:  #13151f;
  --accent:  #4e8ef7;
  --card:    #ffffff;
  --border:  #dde1ea;
  --text:    #1a1a1a;
  --muted:   #6b7280;
  --radius:  5px;
}
body.dark {
  --bg:      #1e2233;
  --sidebar: #13151f;
  --tabbar:  #0e1018;
  --card:    #252840;
  --border:  #2d3550;
  --text:    #c8d0e8;
  --muted:   #6b7a9e;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px; line-height: 1.6;
  color: var(--text); background: var(--bg);
  height: 100dvh; display: flex; flex-direction: column;
}

/* ── Header ──────────────────────────────────── */
header {
  height: 50px; flex-shrink: 0;
  background: var(--sidebar); color: #fff;
  display: flex; align-items: center;
  padding: 0 1rem; gap: .65rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
header h1 { font-size: .92rem; font-weight: 700; letter-spacing: .02em; margin-right: auto; }
header h1 span { color: var(--accent); }

.hdr-btn {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius); color: #c8d0e8; cursor: pointer;
  font-size: .82rem; padding: .28rem .6rem; transition: background .15s; white-space: nowrap;
}
.hdr-btn:hover { background: rgba(255,255,255,.18); }

#key-input {
  padding: .28rem .6rem; border-radius: var(--radius);
  border: 1px solid #3d4560; background: #2d3447;
  color: #c8cfde; font-size: .8rem; width: 195px;
}
#key-input::placeholder { color: #5a6480; }

#btn-convert {
  padding: .32rem .9rem; background: var(--accent); color: #fff;
  border: none; border-radius: var(--radius);
  font-size: .84rem; font-weight: 600; cursor: pointer;
  transition: background .15s; white-space: nowrap;
}
#btn-convert:hover    { background: #3a7cf0; }
#btn-convert:disabled { background: #4d5a7a; cursor: default; }

#status-badge {
  font-size: .7rem; padding: .16rem .48rem; border-radius: 999px;
  font-weight: 600; background: #2d3447; color: #7a8399; white-space: nowrap;
}

/* ── Tab bar ─────────────────────────────────── */
#tabbar {
  display: flex; align-items: stretch;
  background: var(--tabbar); border-bottom: 1px solid rgba(255,255,255,.05);
  overflow-x: auto; flex-shrink: 0; height: 31px;
}
#tabbar::-webkit-scrollbar { height: 2px; }
#tabbar::-webkit-scrollbar-thumb { background: #3d4560; }

.tab {
  display: flex; align-items: center; gap: .35rem;
  padding: 0 .7rem; font-size: .73rem;
  color: #6b7a9e; cursor: pointer;
  border-right: 1px solid rgba(255,255,255,.04);
  white-space: nowrap; user-select: none;
  transition: background .1s, color .1s;
}
.tab:hover { background: rgba(255,255,255,.05); color: #a0adcc; }
.tab.active { background: var(--bg); color: var(--text); border-bottom: 2px solid var(--accent); }

.tab-title-input {
  font-size: .73rem; background: #2d3447; border: 1px solid var(--accent);
  border-radius: 3px; color: #e0e6f8; padding: .03rem .28rem; width: 110px;
}
.tab-close {
  background: none; border: none; cursor: pointer;
  color: inherit; font-size: .82rem; padding: 0; opacity: .35;
}
.tab-close:hover { opacity: 1; color: #f87171; }

#btn-new-tab {
  padding: 0 .8rem; background: none; border: none;
  color: #4d5a7a; cursor: pointer; font-size: 1.05rem; line-height: 31px; flex-shrink: 0;
}
#btn-new-tab:hover { color: var(--accent); }

/* ── Toolbar ─────────────────────────────────── */
#toolbar {
  display: flex; align-items: center; gap: .38rem;
  padding: .38rem .75rem;
  background: var(--card); border-bottom: 1px solid var(--border);
  flex-shrink: 0; flex-wrap: wrap;
}
.tb-label { font-size: .65rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.sep      { color: var(--border); }

.tb-btn {
  font-size: .71rem; padding: .19rem .48rem;
  border: 1px solid var(--border); border-radius: 4px;
  background: var(--bg); color: var(--text);
  cursor: pointer; font-family: monospace;
  transition: background .1s; white-space: nowrap;
}
.tb-btn:hover    { background: var(--border); }
.tb-btn:disabled { opacity: .4; cursor: default; }

.tb-accent { background: #eef3ff; border-color: #a5b4fc; color: #3730a3; }
.tb-accent:hover { background: #dde5ff; }
body.dark .tb-accent { background: #1e2a50; border-color: #4e6acd; color: #93c5fd; }

.tb-undo { background: #fef9ee; border-color: #fcd34d; color: #92400e; }
.tb-undo:hover { background: #fef3c7; }
body.dark .tb-undo { background: #2a2010; border-color: #b45309; color: #fcd34d; }

.tb-file-label {
  font-size: .71rem; padding: .19rem .48rem;
  border: 1px solid var(--border); border-radius: 4px;
  background: var(--bg); color: var(--text);
  cursor: pointer; font-family: monospace;
  transition: background .1s; user-select: none; white-space: nowrap;
}
.tb-file-label:hover { background: var(--border); }

#char-count { margin-left: auto; font-size: .68rem; color: var(--muted); white-space: nowrap; }

/* ── Main panels ─────────────────────────────── */
#main {
  display: grid; grid-template-columns: 1fr 1fr;
  flex: 1; min-height: 0;
}
#main[data-fs="source"]  #panel-preview { display: none; }
#main[data-fs="source"]  #panel-source  { grid-column: 1 / -1; }
#main[data-fs="preview"] #panel-source  { display: none; }
#main[data-fs="preview"] #panel-preview { grid-column: 1 / -1; }

.panel { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
#panel-source { border-right: 1px solid var(--border); }

.panel-header {
  display: flex; align-items: center;
  padding: .26rem .75rem;
  font-size: .63rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); background: var(--bg);
  border-bottom: 1px solid var(--border); flex-shrink: 0; gap: .4rem;
}
.panel-header em { font-style: italic; font-weight: normal; }

.btn-expand {
  margin-left: auto; background: none; border: none;
  cursor: pointer; color: var(--muted); font-size: .9rem;
  padding: 0 .2rem; transition: color .1s;
}
.btn-expand:hover { color: var(--accent); }

/* ── CodeMirror ──────────────────────────────── */
#cm-host { flex: 1; min-height: 0; overflow: hidden; }
#cm-host .CodeMirror {
  height: 100%;
  font-family: "Fira Code", "Cascadia Code", Consolas, monospace;
  font-size: .83rem; line-height: 1.65;
}
body:not(.dark) #cm-host .CodeMirror { background: var(--bg); color: var(--text); }
.CodeMirror-gutters { background: var(--bg); border-right: 1px solid var(--border); }
body.dark .CodeMirror-gutters { background: #161925; }
.CodeMirror-linenumber { color: var(--muted); }

/* Coloration Morphose */
.cm-header   { font-weight: bold; color: #1d4ed8; }
.cm-keyword  { color: #7c3aed; font-weight: bold; }   /* ::: blocs */
.cm-string   { color: #b45309; }                       /* $$ inline */
.cm-string-2 { color: #0369a1; }                       /* $$$ display */
.cm-meta     { color: #0f766e; font-weight: bold; }    /* @func{} */
.cm-def      { color: #15803d; }                       /* directive options */
.cm-comment  { color: #9ca3af; font-style: italic; }
.cm-variable-2 { color: #6d28d9; }                    /* listes */
.cm-strong   { font-weight: 800; color: #111827; }     /* **gras** — couleur renforcée */
.cm-em       { font-style: italic; color: #374151; }   /* *italique* */
body.dark .cm-header   { color: #93c5fd; }
body.dark .cm-keyword  { color: #c084fc; }
body.dark .cm-string   { color: #fbbf24; }
body.dark .cm-string-2 { color: #38bdf8; }
body.dark .cm-meta     { color: #34d399; }
body.dark .cm-def      { color: #86efac; }
body.dark .cm-strong   { color: #ffffff; font-weight: 800; }
body.dark .cm-em       { font-style: italic; color: #d1d5db; }

/* ── CodeMirror curseur & sélection ─────────── */
/* Le curseur par défaut est noir — invisible en dark mode */
.CodeMirror-cursor {
  border-left: 2px solid var(--text) !important;
}
/* Sélection de texte */
.CodeMirror-selected,
.CodeMirror-focused .CodeMirror-selected {
  background: rgba(78,142,247,.28) !important;  /* accent bleu semi-transparent */
}
/* Ligne active */
.CodeMirror-activeline-background {
  background: rgba(78,142,247,.06) !important;
}
body.dark .CodeMirror-activeline-background {
  background: rgba(78,142,247,.10) !important;
}

/* ── Preview ─────────────────────────────────── */
#preview {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 1rem 1.25rem; background: var(--card);
}
#preview p { margin: .4em 0; }
#preview h1 { font-size: 1.4rem; border-bottom: 2px solid var(--border); padding-bottom: .25rem; margin: .6rem 0; }
#preview h2 { font-size: 1.1rem; margin: .5rem 0; }
#preview h3 { font-size: .95rem; margin: .4rem 0; }
#preview ul, #preview ol { padding-left: 1.5rem; margin: .4rem 0; }
#preview li { margin: .12rem 0; }
#preview code { font-family: monospace; background: #f0f0f0; padding: .1rem .3rem; border-radius: 3px; font-size: .83em; }
#preview pre  { background: #f5f5f5; padding: .65rem .9rem; border-radius: 4px; font-size: .82rem; margin: .45rem 0; overflow-x: auto; }
#preview pre code { background: none; padding: 0; }
#preview table { border-collapse: collapse; width: 100%; margin: .45rem 0; font-size: .88rem; }
#preview th, #preview td { border: 1px solid #ddd; padding: .3rem .55rem; }
#preview th { background: #f5f5f5; font-weight: 600; }
#preview tr:nth-child(even) { background: #fafafa; }
#preview hr { border: none; border-top: 1px solid #ddd; margin: .65rem 0; }
#preview blockquote { border-left: 3px solid #ccc; margin: .45rem 0; padding: .2rem .65rem; color: #555; }
#preview figure { text-align: center; margin: .65rem 0; }
#preview figure img { max-width: 100%; border-radius: 4px; }
#preview figcaption { font-size: .8rem; color: #888; font-style: italic; margin-top: .25rem; }

/* blocs sémantiques */
#preview .maths_bloc { margin: .65rem 0; padding: .65rem .9rem; border-radius: 4px; border-left: 4px solid #aaa; }
#preview .maths_bloc h1 { font-size: .88rem; font-weight: 700; margin: 0 0 .4rem; border: none; padding: 0; text-transform: uppercase; letter-spacing: .04em; }
#preview .maths_bloc .maths_bloc { margin: .4rem 0 0; }
#preview .maths_theoreme   { background: #eef3ff; border-color: #4a6fa5; }
#preview .maths_theoreme   h1 { color: #4a6fa5; }
#preview .maths_definition { background: #efffee; border-color: #3a8a5a; }
#preview .maths_definition h1 { color: #3a8a5a; }
#preview .maths_propriete  { background: #fff8ee; border-color: #c07030; }
#preview .maths_propriete  h1 { color: #c07030; }
#preview .maths_corollaire { background: #f8f0ff; border-color: #7a50a0; }
#preview .maths_corollaire h1 { color: #7a50a0; }
#preview .maths_exemple    { background: #fffcee; border-color: #a09030; }
#preview .maths_exemple    h1 { color: #a09030; }
#preview .maths_remarque      { background: #f5f5f5; border-color: #888; }
#preview .maths_remarque   h1 { color: #555; }
#preview .maths_exercice      { background: #fff5f0; border-color: #c05030; }
#preview .maths_exercice   h1 { color: #c05030; }
#preview .maths_demonstration { background: #f4f5f7; border-color: #6b7280; }
#preview .maths_demonstration h1 { color: #4b5563; }
#preview .maths_demonstration .qed { text-align: right; font-size: 1rem; margin: .3rem 0 0; color: #4b5563; }

/* :::solution — collapsible <details>/<summary> */
#preview details.maths_solution { margin: .65rem 0; border-radius: 4px; border-left: 4px solid #0ea5e9; background: #f0f9ff; }
#preview details.maths_solution > summary { padding: .55rem .9rem; font-size: .88rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #0369a1; cursor: pointer; list-style: none; user-select: none; }
#preview details.maths_solution > summary::-webkit-details-marker { display: none; }
#preview details.maths_solution > summary::before { content: "▶ "; font-size: .75em; transition: transform .15s; display: inline-block; }
#preview details.maths_solution[open] > summary::before { content: "▼ "; }
#preview details.maths_solution > *:not(summary) { padding: 0 .9rem .65rem; }

/* récurrence */
#preview .maths_recurrence           { background: #f0fff4; border-color: #22c55e; }
#preview .maths_recurrence > h1      { color: #15803d; }
#preview .maths_recurrence .rec-section { margin: .55rem 0 .55rem .5rem; padding-left: .75rem; border-left: 3px solid #86efac; }
#preview .maths_recurrence .rec-label  { font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #16a34a; margin: 0 0 .25rem; }

/* systeme — inside math-block, no extra CSS needed */

/* figure */
#preview figure.maths_figure        { margin: .8rem 0; text-align: center; }
#preview figure.maths_figure img    { max-width: 100%; height: auto; border-radius: 3px; }
#preview figure.maths_figure figcaption { font-size: .8rem; color: #555; margin-top: .35rem; font-style: italic; }

/* formule, code, verbatim */
#preview .formule       { background: #f0f8ff; border: 1px solid #aac; border-radius: 4px; padding: .5rem .75rem; margin: .45rem 0; text-align: center; }
#preview .formule_titre { font-size: .78rem; font-weight: 600; color: #336; margin-bottom: .25rem; text-transform: uppercase; letter-spacing: .04em; }
#preview .code_bloc     { background: #1e293b; border-radius: 4px; overflow: hidden; margin: .45rem 0; }
#preview .code_titre    { font-size: .75rem; color: #94a3b8; background: #0f172a; padding: .25rem .75rem; border-bottom: 1px solid #334155; font-family: monospace; }
#preview .code_bloc pre { margin: 0; padding: .65rem .85rem; background: transparent; color: #e2e8f0; font-size: .82rem; }
#preview .code_bloc pre code { background: none; color: inherit; padding: 0; }
#preview .verbatim      { background: #fafafa; border: 1px dashed #ccc; padding: .5rem .75rem; margin: .45rem 0; font-family: monospace; white-space: pre-wrap; font-size: .83rem; color: #374151; }

/* Markdown inline — rendu dans le panneau preview */
#preview strong, #preview b { font-weight: 700; }
#preview em, #preview i     { font-style: italic; }

/* inline */
#preview .important { font-weight: bold; color: #c0392b; }
#preview .moyen     { color: #2471a3; font-weight: 600; }
#preview .exergue   { font-style: italic; color: #27ae60; }
#preview .code_word { font-family: monospace; background: #f0f0f0; padding: .1rem .3rem; border-radius: 3px; font-size: .83em; }
#preview .alerte    { font-weight: bold; color: #991b1b; background: #fee2e2; padding: .1em .3em; border-radius: 3px; }
#preview .math-block { display: block; text-align: center; margin: .45rem 0; overflow-x: auto; }

/* :::equation — bloc numéroté */
#preview .maths_equation { display: block; text-align: center; margin: .55rem 0; overflow-x: auto; position: relative; }
#preview .maths_equation::after { content: none; } /* numérotation via \tag dans MathJax */

/* META header — titre/auteur/date visibles en haut du rendu */
#preview header.doc-meta { text-align: center; border-bottom: 2px solid var(--border); padding-bottom: .6rem; margin-bottom: 1rem; }
#preview header.doc-meta h1.doc-titre { font-size: 1.5rem; font-weight: 700; margin: 0 0 .25rem; border: none; padding: 0; }
#preview header.doc-meta .doc-auteur { font-style: italic; color: var(--muted); margin: .1rem 0; font-size: .9rem; }
#preview header.doc-meta .doc-date   { color: var(--muted); font-size: .82rem; margin: .1rem 0; }

/* ref{} — liens vers les équations, figures et blocs numérotés */
#preview a.ref-eq, #preview a.ref-fig, #preview a.ref-bloc { color: var(--accent); text-decoration: none; font-weight: 600; }
#preview a.ref-eq:hover, #preview a.ref-fig:hover, #preview a.ref-bloc:hover { text-decoration: underline; }

/* ── Status bar ──────────────────────────────── */
#statusbar {
  height: 22px; flex-shrink: 0;
  background: var(--sidebar); color: #5a6480;
  font-size: .66rem; display: flex; align-items: center;
  padding: 0 .85rem; gap: .7rem;
}
#statusbar .sep { color: #2d3447; }
#statusbar strong { color: #8896b3; }

/* ── Bouton Auto (header) ────────────────────── */
#btn-auto.active {
  background: rgba(78,142,247,.28);
  border-color: var(--accent);
  color: #7eb8ff;
}

/* ── Overlay modal ───────────────────────────── */
/* [hidden] doit explicitement annuler display:flex/block car la feuille
   auteur a priorité sur le user-agent stylesheet qui gère hidden. */
.modal-overlay[hidden], .modal-box[hidden] { display: none !important; }

.modal-overlay {
  display: block;
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,.52);
}

/* ── Boîte modale ────────────────────────────── */
.modal-box {
  display: flex; flex-direction: column;
  position: fixed; z-index: 1001;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: var(--card); border: 1px solid var(--border);
  border-radius: 8px; box-shadow: 0 8px 32px rgba(0,0,0,.28);
  min-width: 340px; max-width: 560px; width: 92%;
}

.modal-header {
  display: flex; align-items: center; gap: .5rem;
  padding: .65rem 1rem;
  font-weight: 600; font-size: .88rem;
  border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.modal-close {
  margin-left: auto; background: none; border: none;
  cursor: pointer; color: var(--muted); font-size: .9rem;
  padding: .1rem .3rem; border-radius: 3px; line-height: 1;
}
.modal-close:hover { background: var(--border); color: var(--text); }

.modal-body { padding: .85rem 1rem; overflow-y: auto; max-height: 70vh; }
.modal-hint  { font-size: .78rem; color: var(--muted); margin-bottom: .6rem; }

.modal-footer {
  display: flex; justify-content: flex-end; align-items: center; gap: .5rem;
  padding: .6rem 1rem; border-top: 1px solid var(--border); flex-shrink: 0;
}
.btn-primary {
  padding: .3rem .8rem; background: var(--accent); color: #fff;
  border: none; border-radius: var(--radius); cursor: pointer;
  font-size: .82rem; font-weight: 600;
}
.btn-primary:hover    { background: #3a7cf0; }
.btn-primary:disabled { opacity: .5; cursor: default; }
.btn-secondary {
  padding: .3rem .75rem; background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius);
  cursor: pointer; font-size: .82rem;
}
.btn-secondary:hover { background: var(--border); }

/* ── Modal Directives ────────────────────────── */
.dir-checks { display: flex; flex-direction: column; gap: .42rem; margin-bottom: .7rem; }
.dir-checks label {
  display: flex; align-items: center; gap: .4rem;
  font-size: .83rem; cursor: pointer;
}
.dir-checks input[type=checkbox] { width: 14px; height: 14px; flex-shrink: 0; cursor: pointer; }

.dir-lang-row { margin-bottom: .6rem; font-size: .83rem; }
.dir-lang-row select {
  margin-left: .35rem; font-size: .82rem;
  padding: .14rem .3rem; border-radius: 3px;
  border: 1px solid var(--border); background: var(--bg); color: var(--text);
}

.dir-sep { border: none; border-top: 1px solid var(--border); margin: .65rem 0; }

.dir-custom-label { font-size: .74rem; color: var(--muted); margin-bottom: .4rem; }
.dir-custom-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: .35rem;
}
.dir-custom-row label {
  display: flex; flex-direction: column; font-size: .72rem;
  color: var(--muted); gap: .18rem;
}
.dir-custom-row input {
  font-size: .8rem; padding: .22rem .4rem;
  border: 1px solid var(--border); border-radius: 3px;
  background: var(--bg); color: var(--text);
}
.dir-custom-row input:focus { outline: 1px solid var(--accent); }

/* ── Modal Math ──────────────────────────────── */
#math-input {
  width: 100%; font-family: "Fira Code", Consolas, monospace; font-size: .82rem;
  padding: .4rem .55rem; border: 1px solid var(--border); border-radius: 4px;
  background: var(--bg); color: var(--text); resize: vertical;
  margin-bottom: .55rem;
}
#math-input:focus { outline: 1px solid var(--accent); }

.math-result-row {
  display: flex; align-items: flex-start; gap: .55rem;
  min-height: 1.7rem; margin-top: .3rem;
}
.math-result-label {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); flex-shrink: 0; min-width: 52px; margin-top: .18rem;
}
#math-result-latex {
  font-family: "Fira Code", Consolas, monospace; font-size: .8rem;
  background: var(--bg); padding: .15rem .42rem;
  border-radius: 3px; border: 1px solid var(--border);
  word-break: break-all; flex: 1;
}
#math-result-render { font-size: 1rem; flex: 1; }

/* ── Modal Raccourcis ────────────────────────── */
.keys-table { width: 100%; border-collapse: collapse; }
.keys-table td {
  padding: .35rem .5rem; font-size: .82rem;
  border-bottom: 1px solid var(--border);
}
.keys-table tr:last-child td { border-bottom: none; }
.keys-table td:first-child { width: 52%; }
.keys-table kbd {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 3px; padding: .07rem .32rem;
  font-size: .77rem; font-family: monospace;
}

/* ── Print / PDF ─────────────────────────────── */
@media print {
  header, #tabbar, #toolbar, #panel-source, #statusbar { display: none !important; }
  body { height: auto; display: block; background: #fff; }
  #main { display: block; }
  #panel-preview { display: block !important; }
  #preview { height: auto; overflow: visible; padding: 1rem 1.5rem; }
}

/* ── Responsive ──────────────────────────────── */
@media (max-width: 680px) {
  #main { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
  #panel-source { border-right: none; border-bottom: 1px solid var(--border); }
}