/* ── Éditeur visuel en ligne ── */
#edt-crayon {
  position: fixed; right: 22px; bottom: 22px; z-index: 500;
  width: 52px; height: 52px; border-radius: 50%; border: none;
  background: var(--gradient-principal, #7c3aed); color: #fff;
  font-size: 22px; cursor: pointer;
  box-shadow: 0 6px 22px rgba(0,0,0,.5);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
#edt-crayon:hover { transform: scale(1.08); }
#edt-crayon.actif { background: var(--rouge, #e74c3c); transform: rotate(12deg) scale(1.08); }

#edt-barre {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 500;
  display: flex; align-items: center; gap: 10px;
  background: var(--surface, #141220); border: 1px solid var(--border-strong, #241e30);
  border-radius: 999px; padding: 9px 16px;
  box-shadow: 0 10px 34px rgba(0,0,0,.6);
}
#edt-barre[hidden] { display: none; }
.edt-titre {
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .07em; color: var(--accent-2, #a78bfa); margin-right: 4px;
}
.edt-btn {
  background: var(--surface-2, #1c1829); border: 1px solid var(--border, rgba(255,255,255,.06));
  color: var(--text, #edebf5); border-radius: 999px; padding: 7px 14px;
  font-size: 12.5px; font-weight: 700; cursor: pointer; font-family: inherit;
  white-space: nowrap;
}
.edt-btn:hover { filter: brightness(1.2); }
.edt-btn.principal { background: var(--gradient-principal, #7c3aed); border: none; color: #fff; }
.edt-btn.danger { color: var(--rouge, #f87171); border-color: rgba(248,113,113,.35); }
.edt-btn.danger:hover { background: rgba(248,113,113,.15); }

#edt-panneau {
  position: fixed; right: 22px; top: 86px; z-index: 500;
  width: 264px; max-height: calc(100vh - 190px); overflow-y: auto;
  background: var(--surface, #141220); border: 1px solid var(--border-strong, #241e30);
  border-radius: 16px; padding: 14px 16px;
  box-shadow: 0 14px 40px rgba(0,0,0,.6);
}
#edt-panneau[hidden] { display: none; }
.edt-vide { font-size: 12px; color: var(--text-faint, #6b6784); margin: 0; font-style: italic; }
.edt-cible {
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
  padding-bottom: 10px; border-bottom: 1px solid var(--border, rgba(255,255,255,.06));
}
.edt-cible code {
  flex: 1; min-width: 0; font-size: 11.5px; color: var(--accent-2, #a78bfa);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.edt-x { background: none; border: none; color: var(--text-faint); cursor: pointer; font-size: 12px; }

.edt-ligne { margin-bottom: 11px; }
.edt-ligne label {
  display: flex; align-items: baseline; gap: 6px;
  font-size: 11.5px; font-weight: 600; color: var(--text-dim, #b4afc6); margin-bottom: 4px;
}
.edt-ligne label span {
  margin-left: auto; font-size: 10.5px; color: var(--text-faint, #6b6784);
  max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.edt-ligne.mod label { color: var(--accent-2, #a78bfa); }
.edt-annul { background: none; border: none; color: var(--text-faint); cursor: pointer; font-size: 11px; }
.edt-ligne input[type="range"] { width: 100%; accent-color: var(--accent, #7c3aed); }
.edt-ligne input[type="color"] {
  width: 100%; height: 28px; padding: 0; border: 1px solid var(--border);
  border-radius: 6px; background: none; cursor: pointer;
}
.edt-ligne select {
  width: 100%; background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text); border-radius: 6px; padding: 5px 8px; font-size: 12px;
}

/* Mode édition : on met en évidence ce qu'on survole / sélectionne */
body.edt-mode *:hover:not(#edt-panneau):not(#edt-panneau *):not(#edt-barre):not(#edt-barre *):not(#edt-crayon) {
  outline: 1px dashed rgba(167, 139, 250, .55) !important;
  outline-offset: 1px !important;
  cursor: crosshair !important;
}
body.edt-mode .edt-selection {
  outline: 2px solid var(--accent-2, #a78bfa) !important;
  outline-offset: 2px !important;
}
body.edt-mode [draggable="true"] { cursor: grab !important; }
body.edt-mode .edt-drag { opacity: .4; }

/* ── Glisser-déposer de blocs ── */
.edt-compteur {
  font-size: 11px; font-weight: 700; color: var(--orange, #f59e0b);
  background: rgba(245,158,11,.14); border-radius: 999px; padding: 3px 10px;
}
.edt-compteur[hidden] { display: none; }

body.edt-mode .edt-deplacable {
  cursor: grab !important;
  outline: 1px dashed rgba(34, 211, 238, .45) !important;
  outline-offset: 2px !important;
}
body.edt-mode .edt-deplacable:hover {
  outline: 1px dashed rgba(34, 211, 238, .9) !important;
}
body.edt-mode .edt-drag { opacity: .35; cursor: grabbing !important; }

/* Trait d'insertion : au-dessus ou en dessous du bloc survolé */
body.edt-mode .edt-avant  { box-shadow: 0 -3px 0 0 var(--cyan, #22d3ee) !important; }
body.edt-mode .edt-apres  { box-shadow: 0  3px 0 0 var(--cyan, #22d3ee) !important; }