/* Inline editor (edit.js) — only shown when served locally by serve.js */
.edit-bar { position: fixed; left: 16px; bottom: 76px; z-index: 9998; display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 14px;
  background: rgba(20,20,24,.92); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(12px); box-shadow: 0 12px 40px rgba(0,0,0,.45);
  font: 500 14px/1 "Inter Tight", system-ui, sans-serif; color: #fff; mix-blend-mode: normal; }
.edit-bar > :not([data-act=toggle]) { display: none; }
.edit-bar.is-editing > * { display: inline-flex; }
.edit-bar.is-editing [data-act=toggle] { display: none; }
.edit-count { padding: 0 8px; color: #b9b9c3; font-size: 13px; white-space: nowrap; }
.edit-btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 13px; border-radius: 10px; border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06); color: #fff; cursor: pointer; font: inherit; text-decoration: none; white-space: nowrap; }
.edit-btn:hover { background: rgba(255,255,255,.14); }
.edit-btn:disabled { opacity: .4; cursor: default; }
.edit-btn--primary { background: #fff; color: #000; border-color: #fff; font-weight: 600; }
.edit-btn--primary:hover { background: #e8e8e8; }
.edit-btn--main { padding: 10px 16px; }

/* editing state: normal cursor, visible editable zones, no custom cursor */
body.is-editing, body.is-editing * { cursor: auto !important; }
body.is-editing .cursor { display: none; }
body.is-editing [data-bind] { cursor: text !important; outline: 1px dashed rgba(122,167,255,.55); outline-offset: 3px; border-radius: 3px; transition: outline-color .15s, background .15s; }
body.is-editing [data-bind]:hover { outline: 1px solid rgba(122,167,255,.9); background: rgba(122,167,255,.08); }
body.is-editing [data-bind]:focus { outline: 2px solid #7aa7ff; background: rgba(122,167,255,.12); }
body.is-editing [data-bind].is-changed { outline-color: #e8b54a; }
body.is-editing [data-bind]:empty::before { content: "…"; opacity: .4; }
body.is-editing .edit-btn, body.is-editing .edit-btn * { cursor: pointer !important; }

/* image controls on hover (always visible on touch screens) */
.edit-img { position: absolute; top: 10px; right: 10px; z-index: 40; display: none; gap: 6px; }
body.is-editing [data-bind-img]:hover > .edit-img { display: flex; }
@media (hover: none) { body.is-editing .edit-img { display: flex; } }
body.is-editing [data-bind-img] { outline: 1px dashed rgba(122,167,255,.35); outline-offset: -1px; }

.edit-toast { position: fixed; left: 50%; bottom: 140px; z-index: 9999; transform: translate(-50%, 10px); opacity: 0; padding: 10px 16px; border-radius: 10px;
  background: #fff; color: #000; font: 500 14px "Inter Tight", system-ui, sans-serif; transition: opacity .25s, transform .25s; pointer-events: none; }
.edit-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.edit-toast.is-error { background: #ff6b6b; color: #fff; }
@media (max-width: 700px) { .edit-bar { left: 8px; right: 8px; bottom: 70px; flex-wrap: wrap; } }

/* tools picker */
.tool__remove { margin-left: 2px; width: 16px; height: 16px; border: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; font-size: 12px; line-height: 16px; cursor: pointer; padding: 0; }
.tool__remove:hover { background: #ff6b6b; }
.chip--add-tool { border: 1px dashed rgba(122,167,255,.7) !important; color: #b8ceff; background: rgba(122,167,255,.08); cursor: pointer; font: inherit; font-size: 12px; text-transform: none; letter-spacing: 0; }
.chip--add-tool:hover { background: rgba(122,167,255,.18); }
.edit-tools { position: absolute; z-index: 9999; width: 300px; padding: 12px; border-radius: 14px; background: #17171b; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 16px 50px rgba(0,0,0,.5); color: #fff; font: 14px/1.4 "Inter Tight", system-ui, sans-serif; }
.edit-tools__title { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: #9a9aa6; }
.edit-tools__list { display: flex; flex-direction: column; gap: 4px; max-height: 320px; overflow-y: auto; }
.edit-tools__row { display: flex; align-items: center; gap: 10px; padding: 5px 6px; border-radius: 8px; cursor: pointer; }
.edit-tools__row:hover { background: rgba(255,255,255,.06); }
.edit-tools__row input { accent-color: #7aa7ff; width: 16px; height: 16px; }
.edit-tools__new { display: flex; gap: 6px; margin-top: 10px; }
.edit-tools__new input { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 9px; border: 1px solid rgba(255,255,255,.14); background: #0f0f12; color: #fff; font: inherit; }
.edit-tools__hint { margin: 8px 0 0; font-size: 12px; color: #8a8a95; }
body.is-editing .edit-tools, body.is-editing .edit-tools * { cursor: auto !important; }
body.is-editing .edit-tools label, body.is-editing .edit-tools button, body.is-editing .chip--add-tool, body.is-editing .tool__remove { cursor: pointer !important; }
/* French texts still to be proofread */
body.is-editing [data-bind].needs-review { outline: 1px dashed #e8b54a; background: rgba(232,181,74,.08); }
/* before/after markers in edit mode */
.edit-add-mk { position: absolute; left: 12px; bottom: 12px; z-index: 5; }
body.is-editing .cmp__mk { cursor: grab !important; outline: 2px dashed rgba(255,255,255,.7); outline-offset: 2px; }
body.is-editing .cmp__mk:active { cursor: grabbing !important; }
body.is-editing .cmp__legend [data-bind]:empty::before { content: "Texte du repère…"; opacity: .45; }
/* image fit controls */
.edit-img { flex-wrap: wrap; justify-content: flex-end; max-width: calc(100% - 20px); }
.edit-fit { display: inline-flex; gap: 2px; padding: 2px; border-radius: 12px; background: rgba(20,20,24,.85); border: 1px solid rgba(255,255,255,.14); }
.edit-fit .edit-btn { border: 0; background: transparent; padding: 7px 10px; }
.edit-fit .edit-btn[aria-pressed="true"] { background: #fff; color: #000; }
.edit-hint { align-self: center; padding: 6px 10px; border-radius: 10px; background: rgba(20,20,24,.85); color: #d6d6de; font: 12px "Inter Tight", system-ui, sans-serif; }
body.is-editing .fit-img--cover { cursor: move !important; }

/* music popover sits above the edit bar on localhost */
body:has(.edit-bar) .player { bottom: 140px; }