/* ============================================================
   EDITOR.CSS — layout et composants du nouvel éditeur /create
   Chargé après tailwind/style/editor-theme. Couleurs plates,
   spectre uniquement en segments nets.
   ============================================================ */

body.ed-body {
  background: var(--ink-0);
  color: var(--chalk);
  font-family: system-ui, "Segoe UI", Roboto, sans-serif;
  margin: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ---------- Topbar ---------- */
.ed-topbar {
  display: flex; align-items: center; gap: 16px;
  height: 52px; padding: 0 16px;
  background: var(--ink-1);
  border-bottom: 1px solid var(--line-soft);
  flex-shrink: 0;
}
.ed-topbar .beta {
  font-family: var(--font-mono, monospace); font-size: 10px; font-weight: 700;
  letter-spacing: .08em;
  color: var(--tier-b);
  background: color-mix(in srgb, var(--tier-b) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--tier-b) 30%, transparent);
  padding: 2px 8px; border-radius: 999px;
}
.ed-topbar .spacer { flex: 1; }
.ed-top-link {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; text-decoration: none;
  color: var(--muted); padding: 7px 12px; border-radius: 8px;
}
.ed-top-link:hover { color: var(--chalk); background: var(--ink-2); }
.ed-lang {
  display: flex; gap: 2px; border: 1px solid var(--line);
  border-radius: 8px; padding: 2px;
}
.ed-lang button {
  font-family: var(--font-mono, monospace); font-size: 11px; font-weight: 700;
  padding: 4px 8px; border-radius: 6px; border: 0; cursor: pointer;
  background: transparent; color: var(--faint);
}
.ed-lang button:hover { color: var(--chalk); }

/* ---------- Layout principal ---------- */
.ed-main {
  display: flex; flex: 1; min-height: 0;
}
.ed-board {
  flex: 1; min-width: 0; overflow-y: auto;
  padding: 14px 18px 40px;
}
.ed-side {
  width: 400px; flex-shrink: 0;
  display: flex; flex-direction: column; min-height: 0;
  background: var(--ink-1);
  border-left: 1px solid var(--line-soft);
}
@media (min-width: 1280px) { .ed-side { width: 520px; } }

/* Mobile : colonne, sidebar d'abord (comme v1) */
@media (max-width: 1023px) {
  body.ed-body { height: auto; overflow: auto; }
  .ed-main { flex-direction: column; }
  .ed-side { order: -1; width: 100%; border-left: 0; border-bottom: 1px solid var(--line-soft); min-height: 52vh; }
  .ed-board { overflow: visible; }
}

/* ---------- Toolbar ---------- */
.ed-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-wrap: wrap;
  padding: 10px 12px; margin-bottom: 14px;
  background: var(--ink-1);
  border: 1px solid var(--line-soft); border-radius: 12px;
  position: sticky; top: 0; z-index: 10;
}
.ed-toolbar .group { display: flex; align-items: center; gap: 8px; }
.ed-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600;
  padding: 8px 14px; border-radius: 9px; border: 1px solid var(--line);
  background: var(--ink-2); color: var(--muted); cursor: pointer;
}
.ed-btn:hover { color: var(--chalk); border-color: var(--muted); }
.ed-btn:active { transform: scale(.97); }
.ed-btn.danger:hover { color: var(--tier-s); border-color: color-mix(in srgb, var(--tier-s) 40%, transparent); }
.ed-btn.primary {
  background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
  font-weight: 700;
}
.ed-btn.primary:hover { background: #ff7580; border-color: #ff7580; color: var(--accent-ink); }
.ed-btn.primary svg { stroke: var(--accent-ink); }
.ed-btn.publish {
  background: transparent; color: var(--tier-c);
  border-color: color-mix(in srgb, var(--tier-c) 35%, transparent);
}
.ed-btn.publish:hover {
  background: color-mix(in srgb, var(--tier-c) 10%, transparent);
  color: var(--tier-c); border-color: var(--tier-c);
}
.ed-btn.publish svg { stroke: var(--tier-c); }

/* ---------- Board ---------- */
#tier-container {
  border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden; user-select: none; margin-bottom: 12px;
  background: var(--ink-1);
}

/* ---------- Modals (feedback / publier / conditions) ---------- */
.ed-modal {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5, 6, 10, .8); padding: 16px;
}
.ed-modal.hidden { display: none; }
.ed-modal-box {
  background: var(--ink-1); border: 1px solid var(--line);
  border-radius: 14px; width: 100%; max-width: 540px;
  max-height: 85vh; display: flex; flex-direction: column; overflow: hidden;
}
.ed-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--line-soft);
}
.ed-modal-head h3 { margin: 0; font-size: 17px; font-weight: 700; color: var(--chalk); }
.ed-modal-close {
  background: none; border: 0; color: var(--faint); cursor: pointer; padding: 4px;
  border-radius: 6px; line-height: 0;
}
.ed-modal-close:hover { color: var(--tier-s); background: var(--ink-2); }
.ed-modal-body { padding: 20px; overflow-y: auto; }
.ed-modal-foot {
  padding: 14px 20px; border-top: 1px solid var(--line-soft);
  display: flex; justify-content: flex-end; gap: 10px; align-items: center;
}

/* Formulaires */
.ed-field { margin-bottom: 14px; }
.ed-field label {
  display: block; font-size: 13px; font-weight: 600;
  color: var(--muted); margin-bottom: 6px;
}
.ed-input {
  width: 100%; box-sizing: border-box;
  background: var(--ink-2); border: 1px solid var(--line);
  color: var(--chalk); border-radius: 9px;
  padding: 10px 12px; font-size: 14px; outline: none;
}
.ed-input:focus { border-color: var(--tier-d); }
textarea.ed-input { resize: vertical; }
.ed-check { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--muted); }
.ed-check input { accent-color: var(--tier-c); width: 15px; height: 15px; }
.ed-check button { background: none; border: 0; padding: 0; cursor: pointer; color: var(--tier-d); font-size: 13px; text-decoration: underline; text-underline-offset: 2px; }

.ed-alert { border-radius: 9px; padding: 10px 12px; font-size: 13px; margin-bottom: 12px; }
.ed-alert.error { background: color-mix(in srgb, var(--tier-s) 10%, transparent); color: var(--tier-s); border: 1px solid color-mix(in srgb, var(--tier-s) 30%, transparent); }
.ed-alert.success { background: color-mix(in srgb, var(--tier-c) 10%, transparent); color: var(--tier-c); border: 1px solid color-mix(in srgb, var(--tier-c) 30%, transparent); }
.ed-alert.hidden { display: none; }

.ed-count {
  font-family: var(--font-mono, monospace); font-size: 12px; color: var(--faint);
  margin-right: auto;
}
.ed-count b { color: var(--tier-d); font-size: 15px; }

/* Terms : listes propres, plat */
.ed-terms h4 { margin: 0 0 8px; font-size: 14px; font-weight: 700; color: var(--tier-a); }
.ed-terms ul { list-style: none; margin: 0 0 18px; padding: 0; }
.ed-terms li { font-size: 13.5px; color: var(--muted); padding: 5px 0 5px 16px; position: relative; line-height: 1.55; }
.ed-terms li::before { content: "–"; position: absolute; left: 0; color: var(--faint); }

/* Spinner inline */
.ed-spinner {
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid transparent; border-top-color: currentColor;
  animation: ed-spin .7s linear infinite; display: inline-block;
}
.ed-spinner.hidden { display: none; }
@keyframes ed-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ed-spinner { animation: none; } }