/* ═══════════════════════════════════════
   MODE MJ (desktop uniquement)
═══════════════════════════════════════ */

#mj-overlay {
  position: fixed; inset: 0; z-index: 4998;
  display: none; flex-direction: column;
  background: var(--bg);
}

/* ── Topbar ── */
.mj-topbar {
  height: 54px; display: flex; align-items: center; gap: 10px; padding: 0 18px;
  background: var(--white); border-bottom: 1px solid rgba(0,0,0,.06); flex-shrink: 0;
}
.mj-topbar-left { display: flex; align-items: center; gap: 10px; }
.mj-topbar-title { font-size: 15px; font-weight: 900; color: var(--text); }
.mj-topbar-badge {
  font-size: 9px; font-weight: 900; color: var(--orange);
  background: var(--orange-l); padding: 2px 9px; border-radius: 99px; letter-spacing: .5px;
}
.mj-btn-combat {
  background: linear-gradient(135deg,var(--green),var(--green-d));
  border: none; border-radius: 10px; padding: 6px 14px;
  font-family: 'Nunito',sans-serif; font-size: 12px; font-weight: 900;
  color: #fff; cursor: pointer; box-shadow: 0 3px 8px rgba(61,175,142,.3);
  transition: filter .15s;
}
.mj-btn-combat:hover { filter: brightness(1.06); }
.mj-btn-export, .mj-btn-close {
  background: #F0F3F2; border: none; border-radius: 9px; padding: 6px 13px;
  font-family: 'Nunito',sans-serif; font-size: 12px; font-weight: 800;
  color: var(--text-mid); cursor: pointer; transition: background .15s;
}
.mj-btn-export:hover, .mj-btn-close:hover { background: var(--divider); }

/* ── Body ── */
.mj-body { flex: 1; display: flex; overflow: hidden; min-height: 0; }

/* ── Nav ── */
.mj-nav {
  width: 170px; background: var(--white); border-right: 1px solid rgba(0,0,0,.06);
  display: flex; flex-direction: column; flex-shrink: 0; padding: 8px 0;
}
.mj-nav-group {
  padding: 5px 14px 3px; font-size: 8.5px; font-weight: 900;
  color: var(--text-light); letter-spacing: 1.2px;
}
.mj-nav-btn {
  display: flex; align-items: center; width: 100%; padding: 8px 16px;
  border: none; background: transparent; cursor: pointer;
  font-family: 'Nunito',sans-serif; font-size: 12.5px; font-weight: 800;
  color: var(--text-mid); text-align: left; transition: all .1s;
}
.mj-nav-btn:hover { background: #F8FBF9; color: var(--text); }
.mj-nav-btn.on { background: var(--orange-l); color: var(--orange); }
.mj-nav-hr { height: 1px; background: rgba(0,0,0,.06); margin: 5px 12px; }

/* ── Liste ── */
.mj-list {
  width: 230px; background: var(--bg); border-right: 1px solid rgba(0,0,0,.06);
  display: flex; flex-direction: column; flex-shrink: 0;
}
.mj-list-hdr {
  padding: 10px 12px; background: var(--white); border-bottom: 1px solid rgba(0,0,0,.06);
  display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
}
.mj-list-title { font-size: 11px; font-weight: 900; color: var(--text); }
.mj-add-pill {
  font-size: 11px; font-weight: 900; color: var(--green-d);
  background: var(--green-l); border: none; border-radius: 8px; padding: 4px 10px;
  cursor: pointer; font-family: 'Nunito',sans-serif; transition: filter .15s;
}
.mj-add-pill:hover { filter: brightness(.93); }
.mj-list-body { flex: 1; padding: 8px; overflow-y: auto; display: flex; flex-direction: column; gap: 5px; }

/* Cards liste */
.mj-item-card {
  background: var(--white); border-radius: 13px; padding: 11px 13px;
  cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.05);
  display: flex; flex-direction: column; gap: 4px; transition: box-shadow .1s;
}
.mj-item-card:hover { box-shadow: 0 3px 10px rgba(0,0,0,.09); }
.mj-item-card.active { box-shadow: 0 0 0 2px var(--orange); }
.mj-item-name { font-size: 12.5px; font-weight: 900; color: var(--text); }
.mj-item-sub { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; color: var(--text-light); }

/* ── Détail ── */
.mj-detail { flex: 1; background: var(--bg); display: flex; flex-direction: column; overflow: hidden; }
.mj-detail-empty {
  flex: 1; display: flex; align-items: center; justify-content: center;
  text-align: center; font-size: 13px; font-weight: 700; color: var(--text-light);
  line-height: 1.8;
}
.mj-detail-hdr {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 14px 18px; background: var(--white); border-bottom: 1px solid rgba(0,0,0,.06);
  flex-shrink: 0; gap: 12px;
}
.mj-detail-hdr-left { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mj-detail-body { flex: 1; padding: 16px 18px; overflow-y: auto; }

/* Inputs titres */
.mj-title-input {
  font-family: 'Nunito',sans-serif; font-size: 16px; font-weight: 900;
  color: var(--text); border: none; background: transparent; outline: none; width: 100%;
}
.mj-title-input::placeholder { color: var(--text-light); }
.mj-subtitle-input {
  font-family: 'Nunito',sans-serif; font-size: 11px; font-weight: 700;
  color: var(--text-light); border: none; background: transparent; outline: none; width: 100%;
}
.mj-subtitle-input::placeholder { color: var(--text-light); opacity: .6; }

/* Tabs (même pattern que player) */
.mj-tabs { display: flex; gap: 1px; padding: 0 18px; background: var(--white); border-bottom: 1px solid rgba(0,0,0,.06); flex-shrink: 0; }
.mj-tab {
  padding: 10px 14px; font-size: 12px; font-weight: 800;
  font-family: 'Nunito',sans-serif; cursor: pointer; border: none;
  background: transparent; color: var(--text-light);
  border-bottom: 2.5px solid transparent; margin-bottom: -1px;
  border-radius: 7px 7px 0 0; transition: all .15s;
}
.mj-tab:hover { color: var(--text-mid); background: #F8FBF9; }
.mj-tab.on { color: var(--orange); border-bottom-color: var(--orange); }

/* ── Boutons actions ── */
.mj-btn-launch {
  background: linear-gradient(135deg,var(--green),var(--green-d));
  border: none; border-radius: 11px; padding: 8px 16px;
  font-family: 'Nunito',sans-serif; font-size: 13px; font-weight: 900;
  color: #fff; cursor: pointer; box-shadow: 0 4px 12px rgba(61,175,142,.3);
  white-space: nowrap; transition: filter .15s;
}
.mj-btn-launch:hover { filter: brightness(1.06); }
.mj-btn-danger {
  background: var(--red-l); border: 1.5px solid rgba(255,107,107,.3); border-radius: 9px;
  padding: 6px 12px; font-family: 'Nunito',sans-serif; font-size: 12px; font-weight: 800;
  color: var(--red); cursor: pointer; transition: filter .15s;
}
.mj-btn-danger:hover { filter: brightness(.92); }
.mj-btn-secondary {
  background: var(--surface); border: 1.5px solid var(--divider); border-radius: 9px;
  padding: 6px 12px; font-family: 'Nunito',sans-serif; font-size: 12px; font-weight: 800;
  color: var(--text-mid); cursor: pointer; transition: background .15s;
}
.mj-btn-secondary:hover { background: var(--divider); }
.mj-btn-sm-danger {
  width: 26px; height: 26px; border-radius: 7px; background: var(--red-l);
  border: none; color: var(--red); font-size: 15px; font-weight: 900;
  cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: filter .15s;
}
.mj-btn-sm-danger:hover { filter: brightness(.88); }
.mj-btn-sm {
  height: 26px; padding: 0 10px; border-radius: 7px; background: var(--surface);
  border: 1px solid var(--divider); color: var(--text-mid); font-family: 'Nunito', sans-serif;
  font-size: 11px; font-weight: 800; cursor: pointer; display: inline-flex; align-items: center;
  gap: 4px; transition: background .15s;
}
.mj-btn-sm:hover { background: var(--divider); color: var(--text); }

/* ── Layout deux colonnes (rencontres) ── */
.mj-two-col { display: flex; gap: 14px; }
.mj-col { flex: 1; min-width: 0; }

/* ── Participant row ── */
.mj-participant-row {
  background: var(--white); border-radius: 12px; padding: 10px 12px;
  display: flex; align-items: center; gap: 10px;
  box-shadow: 0 2px 5px rgba(0,0,0,.05); margin-bottom: 6px;
}
.mj-p-av {
  width: 36px; height: 36px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 900; color: #fff; flex-shrink: 0;
}
.mj-p-name { font-size: 13px; font-weight: 900; color: var(--text); }
.mj-p-sub { font-size: 10px; font-weight: 700; color: var(--text-light); }
.mj-qty-ctrl { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
.mj-qty-btn {
  width: 24px; height: 24px; border-radius: 7px; border: 1.5px solid rgba(92,200,168,.4);
  background: var(--green-l); color: var(--green-d); font-size: 13px; font-weight: 900;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: filter .15s;
}
.mj-qty-btn:hover { filter: brightness(.92); }
.mj-qty-val { font-size: 15px; font-weight: 900; color: var(--text); min-width: 20px; text-align: center; }

/* Ajout depuis bestiaire */
.mj-bestiary-add-row {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  background: var(--white); border-radius: 10px; cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,.04); margin-bottom: 5px; transition: box-shadow .1s;
}
.mj-bestiary-add-row:hover { box-shadow: 0 3px 10px rgba(0,0,0,.08); }

/* ── Pills ── */
.mj-pill { font-size: 9px; font-weight: 900; padding: 2px 7px; border-radius: 99px; }
.mj-pill-red { background: var(--red-l); color: var(--red); }

/* ── Empty states ── */
.mj-empty { text-align: center; padding: 40px 16px; color: var(--text-light); font-size: 13px; font-weight: 700; line-height: 1.8; }
.mj-empty-sm { font-size: 12px; font-weight: 700; color: var(--text-light); padding: 12px; text-align: center; }

/* ── Section labels ── */
.sec-lbl { font-size: 8.5px; font-weight: 900; color: var(--text-light); letter-spacing: 1.2px; margin-bottom: 10px; }

/* Mode MJ desktop only */
@media (max-width: 1099px) { #btn-mj { display: none !important; } }

/* ── Sessions : éditeur de document ── */
.mj-session-body {
  display: flex; flex: 1; overflow: hidden; min-height: 0;
}
.mj-doc-editor {
  flex: 1; padding: 14px 18px; display: flex; flex-direction: column;
  overflow: hidden; background: var(--bg);
}

/* ── Champ « Propriétaire » (tag PNJ cliquable / édition au clic) ── */
/* Au repos : transparent ; en édition : fond blanc + contour violet. */
.mj-owner-view {
  min-height: 38px; padding: 8px 12px; box-sizing: border-box;
  border: 1.5px solid var(--divider); border-radius: 10px; background: transparent;
  cursor: text; display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-family: 'Nunito', sans-serif; font-size: 13px; font-weight: 600; color: var(--text);
  transition: border-color .1s;
}
.mj-owner-view:hover { border-color: rgba(167,139,250,.4); }
.mj-owner-ph { color: var(--text-light); font-weight: 600; }
.mj-owner-input {
  width: 100%; box-sizing: border-box; min-height: 38px; padding: 8px 12px;
  border: 1.5px solid rgba(167,139,250,.45); border-radius: 10px; background: var(--white);
  font-family: 'Nunito', sans-serif; font-size: 13px; font-weight: 600; color: var(--text);
  outline: none; box-shadow: 0 0 0 3px var(--purple-l);
}
.mj-owner-input::placeholder { color: var(--text-light); font-weight: 600; }

/* ── Barre de mise en forme (segmented control) ── */
.mj-format-bar {
  display: inline-flex; gap: 2px; margin-bottom: 10px; padding: 3px;
  background: var(--surface); border: 1.5px solid var(--divider);
  border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.05);
  transition: opacity .12s;
}
.mj-format-bar.off { opacity: .45; pointer-events: none; }
.mj-fmt-btn {
  width: 32px; height: 30px; border-radius: 7px; border: none; background: transparent;
  color: var(--text-mid); font-family: 'Nunito', sans-serif; font-size: 15px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .1s, color .1s, box-shadow .1s, transform .05s;
}
.mj-fmt-btn:hover { background: var(--white); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.mj-fmt-btn:active { transform: translateY(1px); }
.mj-fmt-btn.active {
  background: var(--purple); color: #fff;
  box-shadow: 0 1px 4px rgba(167,139,250,.5);
}

/* ── Éditeur par blocs (toujours rendu, clic pour éditer) ── */
.mj-doc-scroll {
  flex: 1; overflow-y: auto;
  border: 1.5px solid var(--divider); border-radius: 12px;
  padding: 10px 14px; background: var(--white);
}
.mj-blocks { display: flex; flex-direction: column; }
/* Variante encadrée (descriptions d'objets / lieux / PNJ) */
.mj-blocks-boxed {
  border: 1.5px solid var(--divider); border-radius: 12px;
  padding: 10px 14px; background: var(--white); min-height: 140px;
}
.mj-block {
  border-radius: 8px; padding: 2px 8px; margin: 1px -8px;
  cursor: text; transition: background .08s;
}
.mj-block:hover { background: var(--surface); }
.mj-block.editing { background: transparent; cursor: auto; }
.mj-block-empty { color: var(--text-light); font-style: italic; font-size: 13px; opacity: .7; }
.mj-block-edit {
  width: 100%; box-sizing: border-box; display: block;
  border: 1.5px solid rgba(167,139,250,.45); border-radius: 8px;
  padding: 8px 10px; margin: 1px 0;
  font-family: 'Nunito', sans-serif; font-size: 13.5px; font-weight: 600;
  color: var(--text); line-height: 1.75; background: var(--white);
  resize: none; overflow: hidden; outline: none;
  box-shadow: 0 0 0 3px var(--purple-l);
}
.mj-block-edit::placeholder { color: var(--text-light); font-weight: 600; }

/* ── Bloc paragraphe en contenteditable riche (option D) ── */
/* font-weight 400 (et non 600 hérité de .mj-block-edit) pour que l'apparence en
   édition soit IDENTIQUE à la lecture : le **gras** (700) ressort franchement. */
.mj-block-rich {
  white-space: pre-wrap; word-break: break-word; min-height: 1.75em;
  height: auto; overflow: visible; cursor: text; font-weight: 400;
}
.mj-block-rich strong, .mj-block-rich b { font-weight: 700; }

/* ── Éditeur de liste multi-niveaux (§7) ── */
.mj-list-edit {
  width: 100%; box-sizing: border-box; display: block;
  border: 1.5px solid rgba(167,139,250,.45); border-radius: 8px;
  padding: 8px 10px; margin: 1px 0;
  font-family: 'Nunito', sans-serif; font-size: 13.5px; font-weight: 400;
  color: var(--text); line-height: 1.75; background: var(--white);
  outline: none; box-shadow: 0 0 0 3px var(--purple-l);
}
.mj-li {
  position: relative; padding-left: calc(var(--lvl, 0) * 20px + 18px);
  white-space: pre-wrap; word-break: break-word; min-height: 1.6em;
}
.mj-li::before {
  content: '•'; position: absolute; left: calc(var(--lvl, 0) * 20px);
  color: var(--purple); font-weight: 700;
}
.mj-li[data-level="1"]::before { content: '◦'; }
.mj-li[data-level="2"]::before { content: '▪'; }
.mj-li strong, .mj-li b { font-weight: 700; }
.mj-block-rich:empty::before {
  content: attr(data-ph); color: var(--text-light); font-weight: 600; pointer-events: none;
}
/* Titres / citation en édition : apparence identique au rendu lecture */
.mj-rich-h1 { font-size: 22px; font-weight: 900; color: var(--purple); margin: 6px 0 2px; }
.mj-rich-h2 { font-size: 19px; font-weight: 900; color: var(--text);   margin: 4px 0 2px; }
.mj-rich-h3 { font-size: 16px; font-weight: 800; color: var(--text);   margin: 2px 0; }
.mj-rich-quote {
  border-left: 3px solid var(--purple); background: var(--purple-l);
  padding: 8px 12px; border-radius: 0 8px 8px 0; font-style: italic;
}
.mj-rich-h1 strong, .mj-rich-h1 b, .mj-rich-h2 strong, .mj-rich-h2 b, .mj-rich-h3 strong, .mj-rich-h3 b { font-weight: 900; }
/* Puces atomiques (widgets & @tags) insérées dans la prose éditée */
.mj-pill {
  display: inline-block; vertical-align: baseline; white-space: nowrap;
  user-select: all; -webkit-user-select: all; cursor: pointer;
}
/* Puce-widget : le visuel interactif (.mj-wdg) vit à l'intérieur ; pas de cadre propre */
.mj-pill-wdg { padding: 0; }
.mj-blocks-tail { flex: 1; min-height: 60px; cursor: text; }

/* ── Formulaire d'insertion de widget (spec §5.1) ── */
#mj-wdg-form { position: fixed; inset: 0; z-index: 11050; display: none; }  /* au-dessus de #mj-overlay (4998) */
.mj-wf-backdrop { position: absolute; inset: 0; background: rgba(20,24,33,.35); }
.mj-wf-card {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: min(360px, calc(100vw - 32px)); background: var(--white);
  border-radius: 14px; box-shadow: 0 18px 60px rgba(0,0,0,.3); padding: 18px;
}
.mj-wf-title { font-size: 15px; font-weight: 900; color: var(--text); margin-bottom: 14px; }
.mj-wf-row { display: block; margin-bottom: 12px; }
.mj-wf-lbl { display: block; font-size: 11px; font-weight: 800; color: var(--text-light); margin-bottom: 4px; }
.mj-wf-input {
  width: 100%; box-sizing: border-box; padding: 8px 10px;
  border: 1.5px solid #E8ECF0; border-radius: 8px; outline: none;
  font-family: 'Nunito', sans-serif; font-size: 13.5px; font-weight: 600; color: var(--text);
}
.mj-wf-input:focus { border-color: var(--purple); }
.mj-wf-textarea { min-height: 96px; resize: vertical; line-height: 1.5; font-weight: 600; }
.mj-wf-bar { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.mj-wf-cancel, .mj-wf-ok {
  padding: 8px 16px; border-radius: 99px; font-family: 'Nunito', sans-serif;
  font-size: 13px; font-weight: 800; cursor: pointer; border: 1.5px solid transparent;
}
.mj-wf-cancel { background: var(--surface); color: var(--text-mid); border-color: #E8ECF0; }
.mj-wf-ok { background: var(--purple); color: #fff; }
.mj-wf-ok:hover { filter: brightness(1.05); }

/* ── Combo dans l'éditeur : déclencheur cliquable + popup de choix custom ── */
/* (un <select> natif est peu fiable dans un contenteditable → liste maison) */
.mj-block-rich .mj-wdg-combo { cursor: pointer; }
.mj-wdg-combo-val { font-weight: 800; }
#mj-wdg-pick { position: fixed; inset: 0; z-index: 11060; display: none; }  /* au-dessus de #mj-overlay (4998) */

/* Menu contextuel widget (clic droit) : Modifier / Supprimer */
#mj-wdg-ctx, #mj-item-ctx { position: fixed; inset: 0; z-index: 11070; display: none; }
.mj-wdgctx-backdrop { position: absolute; inset: 0; }
.mj-wdgctx-card {
  position: absolute; min-width: 156px; padding: 5px;
  background: var(--white); border: 1.5px solid var(--divider); border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,.18);
}
.mj-wdgctx-item {
  display: flex; align-items: center; gap: 8px; padding: 8px 11px; border-radius: 7px;
  font-family: 'Nunito', sans-serif; font-size: 12.5px; font-weight: 700; color: var(--text); cursor: pointer;
}
.mj-wdgctx-item:hover { background: var(--surface); }
.mj-wdgctx-item.danger { color: var(--red, #F2675F); }
.mj-wdgctx-item.danger:hover { background: rgba(242,103,95,.10); }
.mj-pick-back { position: absolute; inset: 0; }
.mj-pick-menu {
  position: absolute; background: var(--white); border: 1px solid #E8ECF0;
  border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.18); padding: 4px;
  min-width: 120px; max-height: 260px; overflow-y: auto;
}
.mj-pick-opt {
  padding: 7px 12px; border-radius: 7px; font-size: 13px; font-weight: 700;
  color: var(--text); cursor: pointer; white-space: nowrap;
}
.mj-pick-opt:hover { background: var(--purple-l); }
.mj-pick-opt.sel { color: var(--purple); background: var(--purple-l); }

/* ── Éditeur de tableau en grille (WYSIWYG) ── */
.mj-tedit-wrap {
  margin: 6px 0; padding: 10px; border-radius: 10px;
  border: 1.5px solid rgba(167,139,250,.45); background: var(--white);
  box-shadow: 0 0 0 3px var(--purple-l); overflow-x: auto;
}
.mj-tedit { border-collapse: separate; border-spacing: 0; }
.mj-tedit th, .mj-tedit td { padding: 0; }
.mj-tedit-th { position: relative; }
.mj-tedit-cell {
  box-sizing: border-box; min-width: 90px; width: 100%; padding: 7px 10px;
  border: 1px solid rgba(110,130,150,.38); background: var(--white);
  font-family: 'Nunito', sans-serif; font-size: 12.5px; font-weight: 600; color: var(--text);
  outline: none;
}
.mj-tedit-cell:focus { border-color: var(--purple); box-shadow: inset 0 0 0 1px var(--purple); }
.mj-tedit-head { font-weight: 900; background: var(--surface); }
.mj-tedit-ctrl { width: 22px; text-align: center; vertical-align: middle; }
.mj-tedit-del {
  width: 18px; height: 18px; border-radius: 5px; border: none; cursor: pointer;
  background: transparent; color: var(--text-light); font-size: 11px; line-height: 1;
}
.mj-tedit-del:hover { background: var(--red, #F2675F); color: #fff; }
.mj-tedit-th .mj-tedit-del { position: absolute; top: 2px; right: 2px; }
.mj-tedit-bar { display: flex; gap: 6px; margin-top: 8px; }
.mj-tedit-add, .mj-tedit-done {
  padding: 5px 11px; border-radius: 8px; border: 1.5px solid var(--divider);
  background: var(--surface); font-family: 'Nunito', sans-serif; font-size: 11px;
  font-weight: 800; color: var(--text-mid); cursor: pointer;
}
.mj-tedit-add:hover { background: var(--white); color: var(--text); }
.mj-tedit-done { margin-left: auto; background: var(--purple); color: #fff; border-color: var(--purple); }

/* ── Sessions : arborescence (style explorateur) ── */
.mj-tree-node { display: flex; flex-direction: column; }
.mj-tree-folder {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 8px; border-radius: 9px; cursor: pointer;
  font-size: 12.5px; font-weight: 900; color: var(--text);
  transition: background .1s;
}
.mj-tree-folder:hover { background: var(--white); }
.mj-tree-folder.active { background: var(--white); box-shadow: 0 0 0 2px var(--orange); }
.mj-tree-chevron { width: 10px; flex-shrink: 0; font-size: 9px; color: var(--text-light); text-align: center; }
.mj-tree-ico { flex-shrink: 0; font-size: 13px; }
.mj-tree-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mj-tree-count {
  flex-shrink: 0; font-size: 9.5px; font-weight: 800; color: var(--text-light);
  background: var(--surface); border-radius: 99px; padding: 1px 7px;
}
.mj-tree-children {
  display: flex; flex-direction: column; gap: 2px;
  margin: 2px 0 2px 13px; padding-left: 8px;
  border-left: 1.5px solid var(--divider);
}
.mj-tree-doc {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px; border-radius: 8px; cursor: pointer;
  font-size: 12px; font-weight: 800; color: var(--text-mid); transition: all .1s;
}
.mj-tree-doc:hover { background: var(--white); color: var(--text); }
.mj-tree-doc.active { background: var(--white); color: var(--orange); box-shadow: 0 2px 6px rgba(0,0,0,.05); }
.mj-tree-add {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 8px; border-radius: 8px; cursor: pointer;
  font-size: 11.5px; font-weight: 800; color: var(--green-d); opacity: .85;
}
.mj-tree-add:hover { background: var(--green-l); opacity: 1; }

/* ── Rencontres : formulaire ajout manuel ── */
.mj-enc-add-form {
  background: var(--white); border-radius: 12px; padding: 12px 14px;
  box-shadow: 0 2px 6px rgba(0,0,0,.05); margin-bottom: 6px;
}
.mj-enc-chip {
  padding: 5px 10px; border-radius: 8px; border: 1.5px solid var(--divider);
  background: transparent; font-family: 'Nunito',sans-serif; font-size: 11px;
  font-weight: 900; color: var(--text-mid); cursor: pointer; transition: all .1s;
}
.mj-enc-chip:hover { background: var(--surface); color: var(--text); }
.mj-enc-chip.active { font-weight: 900; }
.mj-field-input {
  width: 100%; padding: 9px 12px; border-radius: 10px; box-sizing: border-box;
  border: 1.5px solid var(--divider); background: var(--white);
  font-family: 'Nunito',sans-serif; font-size: 13px; font-weight: 700;
  color: var(--text); outline: none; transition: border-color .15s;
}
.mj-field-input:focus { border-color: var(--green); }

/* ── Volet sessions collapsible ── */
.mj-list { transition: width .2s ease; }

/* ── Tags @ref (liens dans les scénarios) ── */
.mj-tag {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 0 7px; border-radius: 99px;
  font-weight: 800; font-size: .92em; line-height: 1.5;
  cursor: pointer; white-space: nowrap;
  border: 1px solid transparent; transition: filter .12s;
}
.mj-tag:hover { filter: brightness(.95); }
.mj-tag-scenario  { background: var(--orange-l); color: var(--orange); }
.mj-tag-encounter { background: var(--red-l);    color: var(--red);    }
.mj-tag-npc       { background: #FFF3CC;         color: #B8860B;        }
.mj-tag-objet     { background: var(--green-l);  color: var(--green-d); }
.mj-tag-lieu      { background: var(--blue-l);   color: var(--blue);    }
.mj-tag-asset     { background: var(--purple-l); color: var(--purple); }
.mj-tag.broken {
  background: var(--red-l); color: var(--red);
  border: 1px dashed var(--red); cursor: pointer;
  text-decoration: line-through; opacity: .8;
}
.mj-tag.broken:hover { opacity: 1; }

/* Menu « créer depuis un tag cassé » */
#mj-create-menu { position: fixed; inset: 0; z-index: 11002; display: none; }
.mj-create-backdrop { position: absolute; inset: 0; }
.mj-create-card {
  position: fixed; min-width: 210px;
  background: var(--white); border: 1px solid rgba(0,0,0,.1);
  border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.18); padding: 6px;
}
.mj-create-hdr { font-size: 11px; font-weight: 800; color: var(--text-light); padding: 6px 9px 8px; }
.mj-create-opt {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 9px; border-radius: 8px; cursor: pointer;
  font-size: 12.5px; font-weight: 700; color: var(--text);
}
.mj-create-opt:hover { background: var(--surface); }

/* ── Autocomplétion @ ── */
.mj-ac {
  position: fixed; z-index: 11000;
  min-width: 220px; max-width: 320px; max-height: 240px; overflow-y: auto;
  background: var(--white); border: 1px solid rgba(0,0,0,.1);
  border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.18); padding: 5px;
}
.mj-ac-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 9px; border-radius: 8px; cursor: pointer;
  font-size: 12.5px; font-weight: 700; color: var(--text);
}
.mj-ac-item.sel, .mj-ac-item:hover { background: var(--bg); }
.mj-ac-ico  { font-size: 14px; flex-shrink: 0; }
.mj-ac-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mj-ac-type {
  flex-shrink: 0; font-size: 9px; font-weight: 900;
  letter-spacing: .5px; text-transform: uppercase; color: var(--text-light);
}
.mj-ac-empty { padding: 10px; font-size: 12px; color: var(--text-light); text-align: center; }

/* ── Aperçu au survol d'un tag ── */
.mj-tag-preview {
  position: fixed; z-index: 11001; pointer-events: none;
  background: var(--white); border: 1px solid rgba(0,0,0,.12);
  border-radius: 12px; box-shadow: 0 10px 32px rgba(0,0,0,.22);
  padding: 0; overflow: hidden; max-width: 300px;
}
.mj-tag-preview > img { display: block; max-width: 280px; max-height: 220px; object-fit: contain; }

/* Cartes (combat / pnj / scénario) */
.mj-prev-card { padding: 11px 13px; max-width: 280px; }
.mj-prev-title { font-size: 13px; font-weight: 900; color: var(--text); line-height: 1.3; }
.mj-prev-sub   { font-size: 11px; font-weight: 700; color: var(--text-light); margin-top: 2px; }
.mj-prev-list  { margin-top: 8px; display: flex; flex-direction: column; gap: 3px; }
.mj-prev-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 12px; font-weight: 700; color: var(--text);
}
.mj-prev-qty   { font-size: 11px; font-weight: 900; color: var(--text-light); flex-shrink: 0; }
.mj-prev-empty { font-size: 11px; color: var(--text-light); font-style: italic; margin-top: 6px; }
.mj-prev-excerpt {
  margin-top: 8px; font-size: 12px; font-weight: 600; color: var(--text-mid);
  line-height: 1.6; max-width: 254px;
}
.mj-prev-npc-card { display: flex; gap: 10px; align-items: center; }
.mj-prev-portrait {
  width: 46px; height: 46px; border-radius: 11px; object-fit: cover; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 900; color: #fff;
}
.mj-prev-portrait.ph { background: var(--purple); }
.mj-prev-badge {
  display: inline-block; margin-top: 4px;
  font-size: 10px; font-weight: 900; padding: 2px 8px; border-radius: 99px;
}

/* ── Rétroliens « Référencé par » : bouton + sidebar ── */
.mj-btn-refs {
  background: var(--surface); border: 1px solid var(--divider); border-radius: 9px;
  padding: 7px 11px; font-family: 'Nunito', sans-serif; font-size: 12px; font-weight: 900;
  color: var(--text-mid); cursor: pointer; flex-shrink: 0; transition: background .12s;
}
.mj-btn-refs:hover { background: var(--divider); }

#mj-refs { position: fixed; inset: 0; z-index: 10002; display: none; }
#mj-refs.open { display: block; }
.mj-refs-backdrop { position: absolute; inset: 0; background: rgba(44,62,80,.28); }
.mj-refs-panel {
  position: absolute; top: 0; right: 0; height: 100%;
  width: 320px; max-width: 86vw;
  background: var(--white); box-shadow: -8px 0 32px rgba(0,0,0,.18);
  display: flex; flex-direction: column; animation: mjRefsIn .2s ease;
}
@keyframes mjRefsIn { from { transform: translateX(24px); opacity: .5; } to { transform: none; opacity: 1; } }
.mj-refs-hdr {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  padding: 14px 16px; border-bottom: 1px solid rgba(0,0,0,.06);
  font-size: 13px; font-weight: 900; color: var(--text);
}
.mj-refs-hdr .btn-icon { margin-left: auto; }
.mj-refs-list { flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.mj-refs-item {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 10px; border-radius: 10px; cursor: pointer; transition: background .1s;
}
.mj-refs-item:hover { background: var(--surface); }
.mj-refs-doc  { font-size: 12.5px; font-weight: 800; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mj-refs-sess { font-size: 11px; font-weight: 700; color: var(--text-light); margin-top: 1px; }

/* ═══════════════════════════════════════
   Widgets interactifs /switch /cycle /compteur
═══════════════════════════════════════ */
.mj-wdg {
  display: inline-flex; align-items: center; gap: 6px; vertical-align: middle;
  padding: 2px 9px; margin: 0 2px; border-radius: 99px;
  font-family: 'Nunito', sans-serif; font-size: 12px; font-weight: 800; line-height: 1.4;
  border: 1.5px solid var(--divider, #E8ECF0); background: var(--surface, #F5F7F8);
  cursor: pointer; user-select: none; -webkit-user-select: none;
}
.mj-wdg-label { white-space: nowrap; }

/* switch on/off */
.mj-wdg-switch.off { color: var(--text-light); }
.mj-wdg-switch.on  { color: var(--green-d); background: var(--green-l); border-color: rgba(92,200,168,.4); }
.mj-wdg-switch .mj-wdg-knob {
  width: 26px; height: 15px; border-radius: 99px; background: #CDD6DE;
  position: relative; flex-shrink: 0; transition: background .15s;
}
.mj-wdg-switch .mj-wdg-knob::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 11px; height: 11px; border-radius: 50%; background: #fff; transition: transform .15s;
}
.mj-wdg-switch.on .mj-wdg-knob { background: var(--green); }
.mj-wdg-switch.on .mj-wdg-knob::after { transform: translateX(11px); }

/* combo : liste déroulante (largeur ajustée à l'option courante via JS) */
.mj-wdg-combo { color: var(--purple); background: var(--purple-l); border-color: rgba(167,139,250,.35); }
.mj-wdg-combo .mj-wdg-select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  border: none; outline: none; cursor: pointer; padding: 0 15px 0 2px;
  font-family: 'Nunito', sans-serif; font-size: 12px; font-weight: 900; color: var(--purple);
  background: transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M2 3.5 L5 6.5 L8 3.5' fill='none' stroke='%23A78BFA' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 1px center;
  background-size: 10px;
}
.mj-wdg-combo .mj-wdg-select::-ms-expand { display: none; }

/* compteur : « − valeur unité + » */
.mj-wdg-count { cursor: default; background: var(--white); }
.mj-wdg-count .mj-wdg-btn {
  width: 20px; height: 20px; border-radius: 6px; border: none; background: var(--surface, #F5F7F8);
  color: var(--text-mid); font-family: 'Nunito', sans-serif; font-size: 14px; font-weight: 900;
  line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.mj-wdg-count .mj-wdg-btn:hover { background: var(--green-l); color: var(--green-d); }
.mj-wdg-count .mj-wdg-val { min-width: 16px; text-align: center; font-weight: 900; color: var(--text); }
.mj-wdg-unit { color: var(--text-light); font-weight: 800; font-size: 11px; }

/* todo : case à cocher (barré quand cochée) */
.mj-wdg-todo { color: var(--text); }
.mj-wdg-todo .mj-wdg-box {
  width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid #CDD6DE; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 900; color: #fff;
}
.mj-wdg-todo.done { color: var(--text-light); }
.mj-wdg-todo.done .mj-wdg-box   { background: var(--green); border-color: var(--green); }
.mj-wdg-todo.done .mj-wdg-label { text-decoration: line-through; }

/* jauge : horloge segmentée */
.mj-wdg-gauge { background: var(--white); }
.mj-wdg-segs  { display: inline-flex; gap: 3px; align-items: center; }
.mj-wdg-seg {
  width: 13px; height: 13px; border-radius: 4px; border: 1.5px solid #D8CFC6;
  background: transparent; cursor: pointer; flex-shrink: 0; transition: background .12s;
}
.mj-wdg-seg.on { background: #F0883E; border-color: #F0883E; }
.mj-wdg-gauge-txt { font-size: 10px; font-weight: 800; color: var(--text-light); }

/* details : bloc repliable (élément <details> natif) */
.mj-wdg-details {
  display: block; margin: 6px 0; overflow: hidden;
  border: 1.5px solid var(--divider, #E8ECF0); border-radius: 10px; background: var(--surface, #F5F7F8);
}
.mj-wdg-details > summary {
  cursor: pointer; padding: 9px 14px; list-style: none; user-select: none;
  font-family: 'Nunito', sans-serif; font-size: 12.5px; font-weight: 800; color: var(--text);
}
.mj-wdg-details > summary::-webkit-details-marker { display: none; }
.mj-wdg-details > summary::before {
  content: '▶'; font-size: 9px; margin-right: 7px; color: var(--text-light);
  display: inline-block; transition: transform .12s;
}
.mj-wdg-details[open] > summary::before { transform: rotate(90deg); }
.mj-wdg-details-body { padding: 8px 16px 14px; font-size: 12.5px; color: var(--text-mid); line-height: 1.6; }
/* Le contenu rendu (renderMarkdown) ne doit pas ajouter de marge haute parasite */
.mj-wdg-details-body > div:first-child > :first-child { margin-top: 0; }