/* ------------------------------------------------------------------
   Habillage de l'éditeur. Ne concerne que la page hôte : le CV lui-même
   est rendu dans une iframe, donc template/style.css (qui cible body,
   h2, p, ul…) ne peut pas déborder sur cette interface, ni l'inverse.
   ------------------------------------------------------------------ */

:root {
  --bg: #eef0f2;
  --panel: #ffffff;
  --bar: #1b2733;
  --bar-text: #e8edf2;
  --line: #d3d8dd;
  --muted: #6b7681;
  --accent: #1f4e5f;
  --danger: #8c2f2f;
  --bar-h: 48px;
  --title-h: 26px;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: #1a1a1a;
  font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---------- barre d'outils ---------- */

.toolbar {
  flex: 0 0 var(--bar-h);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  background: var(--bar);
  color: var(--bar-text);
}

.brand {
  font-weight: 700;
  letter-spacing: 0.02em;
}

.spacer { flex: 1; }

.status {
  font-size: 12.5px;
  color: #9fb0bf;
  white-space: nowrap;
}

.status.over { color: #ffb4a2; font-weight: 600; }

.btn {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  border: 0;
  border-radius: 6px;
  padding: 7px 13px;
  cursor: pointer;
  white-space: nowrap;
}

.btn-primary { background: var(--accent); color: #fff; }
.btn-ghost { background: rgba(255, 255, 255, 0.1); color: var(--bar-text); }
.btn:hover { filter: brightness(1.18); }
.btn:active { transform: translateY(1px); }

/* ---------- bandeau d'erreur ---------- */

.error {
  flex: 0 0 auto;
  padding: 8px 14px;
  background: #fbe6e6;
  border-bottom: 1px solid #e8c4c4;
  color: var(--danger);
  font-size: 13px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: pre-wrap;
}

/* ---------- deux volets ---------- */

.split {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(300px, 40%) 1fr;
}

.pane {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.pane-editor { border-right: 1px solid var(--line); }

.pane-title {
  flex: 0 0 var(--title-h);
  display: flex;
  align-items: center;
  padding: 0 12px;
  background: #e2e6ea;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}

#source {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  border: 0;
  outline: 0;
  resize: none;
  padding: 14px;
  background: var(--panel);
  color: #1a1a1a;
  font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  tab-size: 2;
}

/* ---------- aperçu ---------- */

.stage {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 14px;
}

/* .scaler porte la hauteur réelle après mise à l'échelle, pour que la
   barre de défilement du .stage reste juste. */
.scaler {
  transform-origin: top left;
  margin: 0 auto;
}

#preview {
  display: block;
  border: 0;
  background: transparent;
}

/* ---------- écrans étroits : volets empilés ---------- */

@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; grid-template-rows: 40% 60%; }
  .pane-editor { border-right: 0; border-bottom: 1px solid var(--line); }
}