/* editor.css — styles de l'éditeur CodiSite */

:root {
  --ed-bg:      #1a2332;
  --ed-text:    #cdd9e5;
  --ed-border:  #2d3f52;
  --ed-dark:    #0f1923;
  --ed-mid:     #152030;
  --ed-muted:   #7a9ab8;
  --ed-muted2:  #4a6a8a;
  --ed-muted3:  #3a5570;
  --ed-input:   #162030;
  --ed-tab-on:  #cdd9e5;
  --ed-panel-colors: #111d2a;
  --ed-panel-nav:    #0f1d2c;
  --ed-panel-texte:  #14202e;
  --ed-hover-bg: rgba(255,255,255,.10);
  --ed-hover-bg-soft: rgba(255,255,255,.07);
  --ed-hover-bg-faint: rgba(255,255,255,.06);
  --ed-scrollbar: #2d3f52;
}

body.theme-light {
  --ed-bg:      #f4f1ea;
  --ed-text:    #2a3340;
  --ed-border:  #d8d2c4;
  --ed-dark:    #e8e3d8;
  --ed-mid:     #eee9de;
  --ed-muted:   #6a6052;
  --ed-muted2:  #8a8070;
  --ed-muted3:  #9a9080;
  --ed-input:   #fdfbf6;
  --ed-tab-on:  #2a3340;
  --ed-panel-colors: #ece6d8;
  --ed-panel-nav:    #eae4d6;
  --ed-panel-texte:  #ece6d8;
  --ed-hover-bg: rgba(0,0,0,.06);
  --ed-hover-bg-soft: rgba(0,0,0,.04);
  --ed-hover-bg-faint: rgba(0,0,0,.035);
  --ed-scrollbar: #d8d2c4;
}
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-sans);
  background: var(--ed-bg); color: var(--ed-text);
  height: 100vh; display: flex; flex-direction: column; overflow: hidden;
}

/* ── Topbar ── */
.topbar {
  height: 40px; background: var(--ed-dark);
  border-bottom: 1px solid var(--ed-border);
  display: flex; align-items: center; gap: .4rem;
  padding: 0 .7rem; flex-shrink: 0; overflow-x: auto;
}
.topbar-brand { font-weight:700; font-size:.9rem; color:#6aabea; white-space:nowrap; margin-right:.2rem; }
.title-input {
  flex:1; min-width:100px; max-width:240px;
  background:var(--ed-input); border:1px solid var(--ed-border); border-radius:3px;
  color:var(--ed-text); padding:.2rem .5rem; font-size:.82rem;
  font-family:var(--font-sans);
}
.title-input:focus { outline:none; border-color:#6aabea; }
.tsep { width:1px; height:16px; background:var(--ed-border); flex-shrink:0; margin:0 .15rem; }
.tbtn {
  background:rgba(255,255,255,.06); border:1px solid var(--ed-border);
  color:var(--ed-muted); border-radius:3px; padding:.18rem .55rem; font-size:.75rem;
  font-family:var(--font-sans); font-weight:600; cursor:pointer; white-space:nowrap; flex-shrink:0;
  text-decoration:none; display:inline-flex; align-items:center;
}
.tbtn:hover { background:rgba(255,255,255,.13); color:#e8e4da; }
.tbtn.on  { background:#1d4a7a; color:#90caff; border-color:#2c6fad; }
.tbtn.grn { background:#1a4a2a; color:#7ec89a; border-color:#27713d; }
.tbtn.grn:hover { background:#235e33; }
.tbtn:disabled { opacity:.35; cursor:not-allowed; }
.tbtn:disabled:hover { background:var(--ed-hover-bg-faint); color:var(--ed-muted); }

/* ── Onglets de la barre d'outils ── */
.toolbar-tabs {
  background: var(--ed-dark); border-bottom: 1px solid var(--ed-border);
  display: flex; align-items: center; padding: 0 .5rem; gap: .15rem;
  flex-shrink: 0; overflow-x: auto; min-height: 28px;
}
.tbtab {
  background: transparent; border: 1px solid transparent; color: #5a7a9a;
  border-radius: 3px 3px 0 0; padding: .22rem .65rem; font-size: .72rem;
  font-family: var(--font-sans); font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; cursor: pointer; white-space: nowrap; flex-shrink: 0;
}
.tbtab:hover { background: var(--ed-hover-bg-soft); color: var(--ed-muted); }
.tbtab.on {
  background: var(--ed-mid); color: var(--ed-tab-on);
  border-color: var(--ed-border); border-bottom-color: var(--ed-mid);
}

/* Bouton qui ouvre la modale Formules — poussé à droite de la
   ligne d'onglets et accentué (couleur d'accent) pour bien le
   distinguer des onglets classiques, puisqu'il ouvre une fenêtre
   plutôt qu'un panneau de la même barre. */
.tbtab-modal {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: .35rem;
  color: #6aabea; border-color: transparent;
}
.tbtab-modal:hover { background: var(--ed-hover-bg-soft); color: #8cc3f5; }
.tbtab-modal i { font-size: .95em; }

/* ── Modale Formules ── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center;
  padding: 2rem;
}
.modal-overlay[hidden] { display: none !important; }
.modal-box {
  background: var(--ed-mid); border: 1px solid var(--ed-border);
  border-radius: 8px; box-shadow: 0 12px 40px rgba(0,0,0,.4);
  width: min(820px, 100%); max-height: min(640px, 100%);
  display: flex; flex-direction: column; overflow: hidden;
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .7rem 1rem; border-bottom: 1px solid var(--ed-border);
  background: var(--ed-dark); flex-shrink: 0;
}
.modal-header span {
  font-family: var(--font-sans); font-weight: 700; font-size: .9rem;
  color: var(--ed-text); text-transform: uppercase; letter-spacing: .05em;
}
.modal-close {
  background: transparent; border: 1px solid transparent; border-radius: 4px;
  color: var(--ed-muted); font-size: 1rem; line-height: 1; cursor: pointer;
  padding: .25rem .55rem;
}
.modal-close:hover { background: var(--ed-hover-bg-soft); color: var(--ed-text); }
.modal-body {
  overflow-y: auto; padding: .8rem 1rem;
  flex: 1; min-height: 0;
}
/* Les boutons de formules gardent leur apparence habituelle, le
   conteneur passe juste de .toolbar-panel (ligne d'onglets) à
   .modal-body (fenêtre dédiée) — flex-wrap déjà géré par
   .toolbar-formulas existant. */
.modal-body.toolbar-formulas {
  background: transparent; max-height: none;
  display: flex; flex-wrap: wrap; align-items: center;
}

/* ── Barre de recherche dans une modale (Icônes) ── */
.modal-search {
  padding: .65rem 1rem; border-bottom: 1px solid var(--ed-border);
  background: var(--ed-dark); flex-shrink: 0;
}
.modal-search input {
  width: 100%; box-sizing: border-box;
  background: var(--ed-input); border: 1px solid var(--ed-border);
  border-radius: 4px; color: var(--ed-text);
  padding: .45rem .7rem; font-size: .85rem; font-family: var(--font-sans);
}
.modal-search input:focus { outline: none; border-color: #6aabea; }

/* ── Grille d'icônes (modale Icônes) ── */
.toolbar-icons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: .4rem;
}
.icon-btn {
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  padding: .6rem .3rem; text-align: center;
  font-family: var(--font-sans);
}
.icon-btn i { font-size: 1.3rem; }
.icon-btn-label {
  font-size: .68rem; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}
.icon-btn[hidden] { display: none; }
.icons-empty-msg {
  grid-column: 1 / -1; text-align: center;
  color: var(--ed-muted3); font-size: .85rem; padding: 1.5rem 0;
  font-family: var(--font-sans);
}

/* ── Panneau actif — base commune ── */
.toolbar {
  background: var(--ed-mid); border-bottom:1px solid var(--ed-border);
  display:flex; align-items:center; padding:.2rem .5rem; gap:.12rem;
  flex-shrink:0; overflow-x:auto; min-height:32px; flex-wrap: wrap;
}
.toolbar-panel .tbbtn { font-family: var(--font-sans); }
.toolbar-panel[hidden] { display: none !important; }
.tbbtn {
  background:transparent; border:1px solid transparent; color:var(--ed-muted);
  border-radius:3px; padding:.18rem .5rem; font-size:.74rem;
  font-weight:600; cursor:pointer; white-space:nowrap;
  line-height:1.4; flex-shrink:0;
}
.tbbtn:hover { background:var(--ed-hover-bg); color:var(--ed-text); border-color:var(--ed-border); }
.tbsep { width:1px; height:14px; background:var(--ed-border); margin:0 .18rem; flex-shrink:0; }

/* Le panneau Texte garde la police mono pour les marqueurs Markdown bruts */
#panel-texte .tbbtn { font-family: var(--font-mono); }

/* ── Panneau couleurs ── */
.toolbar-colors { background: var(--ed-panel-colors); }

.tbbtn-color {
  font-family: var(--font-sans);
  font-size: .72rem;
  padding: .16rem .5rem;
  border-radius: 3px;
}
.tbbtn-color.tc-rouge  { color: #e05c4a; }
.tbbtn-color.tc-bleu   { color: #5aaee8; }
.tbbtn-color.tc-vert   { color: #4ec87a; }
.tbbtn-color.tc-orange { color: #e09050; }
.tbbtn-color.tc-violet { color: #c07ae0; }
.tbbtn-color.tc-rose   { color: #e06aa8; }
.tbbtn-color.tc-marron { color: #b08850; }
.tbbtn-color.tc-gris   { color: #8a9ab0; }
.tbbtn-color.tc-cyan   { color: #30bcd0; }
.tbbtn-color.tc-indigo { color: #8090e8; }
.tbbtn-color.tc-ocre   { color: #c8a030; }
.tbbtn-color:hover {
  background: rgba(255,255,255,.10);
  border-color: var(--ed-border);
  filter: brightness(1.25);
}

/* ── Panneau nav ── */
.toolbar-nav { background: var(--ed-panel-nav); }

/* ── Panneau formules : multi-ligne avec labels de groupe ── */
.toolbar-formulas {
  background: var(--ed-panel-texte);
  flex-wrap: wrap;
  max-height: 140px;
  overflow-y: auto;
  align-items: center;
}
.tb-group-label {
  font-size: .62rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ed-muted3);
  white-space: nowrap; flex-shrink: 0;
  margin: .25rem .5rem .25rem 0;
  /* force un retour à la ligne avant chaque nouveau groupe */
  flex-basis: 100%;
}
.tb-group-label:first-child { margin-top: 0; }
.toolbar-formulas .tbbtn { font-family: var(--font-sans); }

/* ── Zone principale ── */
.main { flex:1; display:flex; overflow:hidden; }

/* ── Volet éditeur ── */
.pane-ed { display:flex; flex-direction:column; overflow:hidden; flex:1; min-width:0; }
.pane-label {
  background:var(--ed-dark); color:var(--ed-muted2); font-size:.65rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.08em;
  padding:.18rem .65rem; border-bottom:1px solid var(--ed-border); flex-shrink:0;
  display:flex; align-items:center; justify-content:space-between;
}
.pane-label-btns { display:flex; gap:.15rem; }
.pane-lbtn {
  background:transparent; border:1px solid transparent; color:var(--ed-muted2);
  border-radius:3px; padding:.08rem .3rem; font-size:.68rem; font-weight:700;
  font-family:var(--font-sans); cursor:pointer; line-height:1.3;
}
.pane-lbtn:hover { background:var(--ed-hover-bg-soft); color:var(--ed-muted); }
.pane-lbtn:disabled { opacity:.3; cursor:not-allowed; }

.ed-wrap { flex:1; display:flex; overflow:hidden; }
.ed-lines {
  width:34px; flex-shrink:0; background:var(--ed-dark); border-right:1px solid var(--ed-border);
  padding:.55rem 0; overflow:hidden; user-select:none;
  font-size:.78rem; line-height:1.6; font-family:var(--font-mono);
  color:var(--ed-muted3); text-align:right;
}
.ed-lines span { display:block; padding-right:6px; }
.ed-lines span.ln-fold {
  cursor: pointer;
  color: var(--ed-muted);
  font-size: .85rem;
  transition: color .12s ease;
}
.ed-lines span.ln-fold:hover { color: #6aabea; }

#ta {
  flex:1; resize:none; border:none; outline:none;
  background:var(--ed-bg); color:var(--ed-text);
  font-family:var(--font-mono); font-size:.85rem; line-height:1.6;
  padding:.55rem .65rem; tab-size:2;
  scrollbar-width:thin; scrollbar-color:var(--ed-scrollbar) transparent;
}
#ta::-webkit-scrollbar { width:6px; }
#ta::-webkit-scrollbar-thumb { background:var(--ed-scrollbar); border-radius:3px; }

/* ── Séparateur redimensionnable ── */
.resizer {
  width:5px; flex-shrink:0; background:var(--ed-border);
  cursor:col-resize; transition:background .15s;
}
.resizer:hover, .resizer.drag { background:#2c6fad; }

/* ── Volet preview ── */
.pane-prev { display:flex; flex-direction:column; overflow:hidden; flex:1; min-width:0; }
#prev-scroll { flex:1; overflow-y:auto; background:var(--bg); }
#prev {
  padding:1.2rem 1.5rem; color:var(--text);
  font-family:var(--font-sans); font-size:.97rem; line-height:1.7;
}

/* Modes */
body.m-split .pane-ed,
body.m-split .pane-prev  { display:flex; }
body.m-split .resizer    { display:block; }
body.m-ed   .pane-prev   { display:none; }
body.m-ed   .resizer     { display:none; }
body.m-prev .pane-ed     { display:none; }
body.m-prev .resizer     { display:none; }
body.m-ext  .pane-prev   { display:none; }
body.m-ext  .resizer     { display:none; }

/* ── Statusbar ── */
.statusbar {
  height:20px; flex-shrink:0; background:var(--ed-dark);
  border-top:1px solid var(--ed-border);
  display:flex; align-items:center; gap:1rem;
  padding:0 .8rem; font-size:.68rem; color:var(--ed-muted3);
}
.statusbar b { color:#5a7a9a; }
#st-save { margin-left:auto; color:#3a6a3a; }
#prev h1 { font-size:1.4em;color:var(--bg-nav);font-weight:700;margin:0 0 .4rem;border-bottom:1px solid var(--border);padding-bottom:.3rem; }
#prev h2 { font-size:1.1em;color:var(--bg-nav);font-weight:700;margin:1.2rem 0 .3rem;border-bottom:1px solid var(--border);padding-bottom:.2rem; }
#prev h3 { font-size:1em;font-weight:700;color:var(--bg-nav);margin:.7rem 0 .15rem;text-decoration:underline;text-underline-offset:3px; }
#prev h4 { font-size:.95em;font-weight:700;font-style:italic;margin:.5rem 0 .1rem;text-decoration:underline;text-underline-offset:3px; }
#prev h5 { display:none; }
#prev p  { margin:.3rem 0; }
#prev ul,#prev ol { padding-left:1.6rem;margin:.3rem 0; }
#prev li { margin:.15rem 0; }
#prev del { text-decoration:line-through;color:var(--muted); }
#prev u  { text-decoration:underline;text-underline-offset:2px; }
#prev mark.hl { background:#fff176;color:inherit;border-radius:2px;padding:0 .1em; }
#prev sup { font-size:.75em;vertical-align:super; }
#prev sub { font-size:.75em;vertical-align:sub; }
#prev code { background:#ece9e0;padding:.1em .3em;border-radius:3px;font-family:var(--font-mono);font-size:.87em;color:#c0392b; }
#prev pre { background:#1e2a38;color:#e8e4da;padding:.7rem 1rem;border-radius:var(--radius);overflow-x:auto;margin:.6rem 0;font-size:.85em;line-height:1.5;border-left:3px solid #6aabea; }
#prev pre code { background:none;color:inherit;padding:0; }
#prev blockquote { border-left:3px solid var(--accent);padding:.3rem .8rem;margin:.5rem 0;color:var(--muted);font-style:italic;background:#f0ede6;border-radius:0 var(--radius) var(--radius) 0; }
#prev table { width:100%;border-collapse:collapse;margin:.7rem 0;font-size:.92em; }
#prev th { background:var(--bg-nav);color:#e8e4da;padding:.35rem .7rem;text-align:left;font-size:.85em;border:1px solid rgba(255,255,255,.15); }
#prev td { padding:.32rem .7rem;border:1px solid var(--border);vertical-align:top; }
#prev tr:nth-child(even) td { background:#f5f3ee; }
#prev figure.img-wrap { display:flex;justify-content:center;margin:.8rem 0; }
#prev figure.img-wrap img,#prev img { display:block;max-width:100%;margin:.6rem auto;border-radius:var(--radius); }
#prev hr { border:none;border-top:1px solid var(--border);margin:1.2rem 0; }
#prev a { color:var(--accent); }
#prev .task-list { list-style:none;padding-left:.5rem; }
#prev .task-item label { display:flex;align-items:flex-start;gap:.4rem;cursor:pointer; }
#prev .task-check { margin-top:.2em;accent-color:var(--accent); }
#prev .task-item:has(.task-check:checked) label { color:var(--muted);text-decoration:line-through; }
#prev .fiche-hdr { border-bottom:1px solid var(--border);padding-bottom:.5rem;margin-bottom:.8rem; }
#prev .fiche-hdr h1 { border:none;padding:0;margin:.2rem 0 0;font-size:1.5em; }
#prev .h1-sep { font-size:.72em;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:1.4rem 0 .6rem;padding-bottom:.3rem;border-bottom:1px solid var(--border); }
.prev-hi { background:rgba(44,111,173,.1);border-radius:3px;transition:background .3s; }

/* ── Couleurs de texte dans la preview ── */
#prev .tc-rouge  { color: #c0392b; }
#prev .tc-bleu   { color: #1a5fa0; }
#prev .tc-vert   { color: #1e8449; }
#prev .tc-orange { color: #ca6f1e; }
#prev .tc-violet { color: #7d3c98; }
#prev .tc-rose   { color: #c0408a; }
#prev .tc-marron { color: #7b5a2a; }
#prev .tc-gris   { color: #5a6476; }
#prev .tc-noir   { color: #1a1a1a; }
#prev .tc-cyan   { color: #0e7490; }
#prev .tc-indigo { color: #3730a3; }
#prev .tc-ocre   { color: #a16207; }

/* ── Règles Seyès dans la preview éditeur ── */
#prev figure.seyes-wrap {
  display: block;
  margin: .8rem 0;
  width: 100%;
}
#prev figure.seyes-wrap img {
  width: 100% !important;
  max-width: 100%;
  border-radius: 0;
  height: auto;
  display: block;
}

/* ── Admonitions dans la preview ── */
#prev .admonition {
  border-left: 4px solid #ccc;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: 1rem 0; overflow: hidden;
}
#prev .admonition-title {
font-family: var(--font-sans); font-weight: 700;
font-size: .78em; text-transform: uppercase; letter-spacing: .07em;
padding: .35rem .85rem;
display: flex; align-items: center; gap: .45rem;
}
/* Icône Font Awesome injectée en HTML par editor-pipeline.js,
   alignée comme dans le rendu final (../style.css). */
#prev .admonition-title i {
  width: 1em; text-align: center; flex-shrink: 0;
  line-height: 1; font-size: 1.1em;
}
#prev .admonition-body { padding: .6rem .85rem; }
#prev .admonition-body p:first-child { margin-top: 0; }
#prev .admonition-body p:last-child  { margin-bottom: 0; }

#prev .admonition-cours     { border-color: #a93226; }
#prev .admonition-cours .admonition-title  { background: #f5b7b1; color: #7b241c; }
#prev .admonition-cours .admonition-body   { background: #fdedec; }

/* exemple → mauve violet */
#prev .admonition-exemple   { border-color: #7d3c98; }
#prev .admonition-exemple .admonition-title { background: #d7bde2; color: #4a235a; }
#prev .admonition-exemple .admonition-body  { background: #f5eef8; }

/* protocole → bleu cobalt */
#prev .admonition-protocole { border-color: #1a6fb5; }
#prev .admonition-protocole .admonition-title { background: #aed6f1; color: #154360; }
#prev .admonition-protocole .admonition-body  { background: #ebf5fb; }

#prev .admonition-exercice  { border-color: #1e8449; }
#prev .admonition-exercice .admonition-title { background: #a9dfbf; color: #145a32; }
#prev .admonition-exercice .admonition-body  { background: #eafaf1; }

#prev .admonition-remarque  { border-color: #ca6f1e; }
#prev .admonition-remarque .admonition-title { background: #f9d79b; color: #784212; }
#prev .admonition-remarque .admonition-body  { background: #fef9e7; }

#prev .admonition-warning   { border-color: #b7950b; }
#prev .admonition-warning .admonition-title { background: #f7dc6f; color: #7d6608; }
#prev .admonition-warning .admonition-body  { background: #fefde7; }

#prev .admonition-info      { border-color: #2471a3; }
#prev .admonition-info .admonition-title { background: #85c1e9; color: #1a4f72; }
#prev .admonition-info .admonition-body  { background: #eaf4fb; }

#prev .admonition-success   { border-color: #1d8348; }
#prev .admonition-success .admonition-title { background: #82e0aa; color: #145a32; }
#prev .admonition-success .admonition-body  { background: #e9f7ef; }

#prev .admonition-danger    { border-color: #922b21; }
#prev .admonition-danger .admonition-title { background: #f1948a; color: #641e16; }
#prev .admonition-danger .admonition-body  { background: #fdedec; }