:root {
  --bg: #15171c;
  --panel: #1d2027;
  --panel-2: #252932;
  --line: #333845;
  --text: #e8e6e1;
  --muted: #9aa0ab;
  --ocre: #e0a43a;
  --ocre-dim: #8a6626;
  --ok: #5bbf72;
  --danger: #d9534f;
  --select: #4fb3ff;
  --sidebar-w: 380px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.4 system-ui, "Segoe UI", Roboto, sans-serif;
}

body { display: flex; overflow: hidden; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 6px;
}
button { cursor: pointer; padding: 5px 10px; }
button:disabled { opacity: .45; cursor: not-allowed; }
button:hover { border-color: var(--ocre-dim); }
input, select { padding: 5px 8px; }
input:focus, select:focus, textarea:focus { outline: 1px solid var(--ocre); }

/* ------------------------------------------------------------------ sidebar */

#sidebar, .sidebar {
  width: var(--sidebar-w);
  flex: none;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border-right: 1px solid var(--line);
  z-index: 2;
}

.brand { padding: 14px 16px 10px; border-bottom: 1px solid var(--line); }
.brand h1 { margin: 0 0 8px; font-size: 19px; color: var(--ocre); }
.brand h1 span { color: var(--muted); font-weight: 400; font-size: 14px; }

.progress { display: flex; align-items: center; gap: 10px; }
.progress-bar { flex: 1; height: 8px; background: var(--panel-2); border-radius: 4px; overflow: hidden; }
#progress-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--ocre-dim), var(--ocre)); transition: width .3s; }
#progress-text { font-variant-numeric: tabular-nums; color: var(--muted); min-width: 70px; text-align: right; }

/* Étapes de la quête : une pastille par étape, cliquable pour filtrer. */
.quest { margin-top: 10px; }
.quest summary, .fold summary { cursor: pointer; color: var(--muted); font-size: 13px; user-select: none; }
.quest summary span, .fold summary span { color: var(--ocre); }
.fold-body { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.quest-steps { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 4px; margin-top: 8px; }
.quest-steps button {
  padding: 3px 0 4px;
  font-size: 11px;
  line-height: 1.2;
  position: relative;
  overflow: hidden;
}
.quest-steps button b { display: block; font-size: 12px; }
.quest-steps button .bar { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--ok); }
.quest-steps button.boss b { color: #d58bff; }
.quest-steps button.done { border-color: var(--ok); color: var(--ok); }
.quest-steps button.active { background: var(--ocre-dim); border-color: var(--ocre); color: #fff; }
.quest-steps button.final { cursor: default; opacity: .7; }
.quest-follow { display: block; margin-top: 8px; font-size: 12px; color: var(--muted); }

.tag-boss { color: #d58bff; font-weight: 600; }

.layers { font-size: 13px; color: var(--muted); column-gap: 12px; row-gap: 4px; }
.layers i, .hints-pop i[class^="lg-"] { display: inline-block; width: 16px; height: 16px; margin-right: 2px; vertical-align: -3px; background-size: contain; }
.lg-dj { background-image: url(images/icons/dungeon.png); }
.lg-dj.plain { filter: grayscale(.6); opacity: .75; }
.lg-zaap { background-image: url(images/icons/zaap.png); }

/* Entrées de donjon : icône officielle + pastille du nombre de boss restants. */
.dj-icon { position: relative; width: 28px; height: 28px; }
.dj-icon img, .map-ico { width: 100%; height: 100%; display: block; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .8)); }
.dj-icon .badge {
  position: absolute; right: -6px; top: -6px;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: #8e3fc2; border: 1px solid #fff; color: #fff;
  font-size: 10px; font-weight: 700; line-height: 14px; text-align: center;
}
.dj-icon.done .badge { background: var(--ok); }
/* Plusieurs donjons au même endroit : icône « empilée » + nombre de donjons. */
.dj-icon.stack::before {
  content: ""; position: absolute; inset: 0;
  background: url(images/icons/dungeon.png) center / contain no-repeat;
  transform: translate(5px, -4px); opacity: .55; z-index: -1;
}
.dj-icon .count {
  position: absolute; left: -6px; bottom: -6px;
  padding: 0 3px; border-radius: 6px;
  background: #222; border: 1px solid #d58bff; color: #fff;
  font-size: 10px; font-weight: 700; line-height: 13px;
}
.leaflet-tooltip div + div { margin-top: 2px; }
/* Popup de plusieurs donjons : un bloc par donjon, l'ensemble défile. */
.leaflet-popup-content { max-height: 65vh; overflow-y: auto; }
.popup + .popup { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 10px; }
.dj-icon.plain { opacity: .75; }
.dj-icon.plain img { filter: grayscale(.6) drop-shadow(0 1px 2px rgba(0, 0, 0, .8)); }
.dj-icon.sel { border-radius: 50%; box-shadow: 0 0 0 3px var(--select), 0 0 12px var(--select); }

.controls { padding: 10px 16px; display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid var(--line); }
#search { width: 100%; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row > select { flex: 1; min-width: 0; }
.row label { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.row input[type=number] { width: 70px; }
.check { cursor: pointer; font-size: 13px; }

.segmented { gap: 0; }
.segmented button { flex: 1; border-radius: 0; }
.segmented button:first-child { border-radius: 6px 0 0 6px; }
.segmented button:last-child { border-radius: 0 6px 6px 0; }
.segmented button + button { margin-left: -1px; } /* bords superposés : celui survolé ou actif passe devant */
.segmented button { position: relative; }
.segmented button:hover, .segmented button:focus-visible { z-index: 2; }
.segmented button.active { z-index: 1; }
.segmented button.active { background: var(--ocre-dim); border-color: var(--ocre-dim); color: #fff; }

.list-count { padding: 6px 16px; color: var(--muted); font-size: 12px; flex: none; }

.list { list-style: none; margin: 0; padding: 2px 8px 8px; overflow-y: auto; flex: 1; min-height: 110px; }
.list li {
  display: grid;
  grid-template-columns: 22px 40px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
}
.list li:hover { background: var(--panel-2); }
.list li.selected { background: #263446; outline: 1px solid var(--select); outline-offset: -1px; }
.list li.captured .name { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--ok); }
.list li.captured img { opacity: .5; }
.list li.offmap .zones::before { content: "⚠ "; }
.list li.list-section {
  display: block; cursor: default; margin-top: 10px; padding: 6px 8px 2px;
  color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
  border-top: 1px solid var(--line); border-radius: 0;
}
.list li.list-section:hover { background: none; }
.list li.monster .name { font-weight: 500; }
.list img { width: 40px; height: 40px; object-fit: contain; }
.list .name { font-weight: 600; }
.list .sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list .lvl { font-size: 12px; color: var(--ocre); font-variant-numeric: tabular-nums; }
.list .lvl .kind-icon { width: 20px; height: 20px; vertical-align: middle; margin-right: 6px; }
.list .meta { min-width: 0; }
.list input[type=checkbox], .popup input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--ok); cursor: pointer; }

.tools { padding: 10px 16px; border-top: 1px solid var(--line); display: flex; gap: 6px; flex-wrap: wrap; }
.tools .danger:hover { border-color: var(--danger); color: var(--danger); }
.data-info { width: 100%; font-size: 11px; color: var(--muted); }

/* ---------------------------------------------------------------------- map */

#map { flex: 1; height: 100%; background: #0e1014; }
.leaflet-container { background: #0e1014; font: inherit; }

.hover-info {
  position: fixed;
  left: calc(var(--sidebar-w) + 12px);
  bottom: 12px;
  z-index: 1000;
  background: rgba(21, 23, 28, .92);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 10px;
  pointer-events: none;
  max-width: 420px;
}
.hover-info b { color: var(--ocre); font-variant-numeric: tabular-nums; }

.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--panel); color: var(--text); }
.leaflet-popup-content { margin: 12px 14px; min-width: 260px; }
.leaflet-container a.leaflet-popup-close-button { color: var(--muted); }
.popup h3 { margin: 0 0 2px; color: var(--ocre); font-size: 15px; }
.popup .sub { color: var(--muted); font-size: 12px; margin-bottom: 8px; }
.popup-scroll { max-height: 300px; overflow-y: auto; }
.popup ul { list-style: none; margin: 0; padding: 0; }
.popup h4 { margin: 10px 0 4px; font-size: 13px; color: var(--ocre); }
.popup h4 small { color: var(--muted); font-weight: 400; }
.popup li { display: grid; grid-template-columns: 20px 32px 1fr; gap: 6px; align-items: center; padding: 3px 0; }
.popup li img { width: 32px; height: 32px; object-fit: contain; }
.popup li.captured span { color: var(--muted); text-decoration: line-through; }
.popup li span small { display: block; color: var(--muted); }
.popup .actions { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.popup .empty { color: var(--muted); font-style: italic; }

.cell-highlight { pointer-events: none; }

/* ------------------------------------------------------------------ dialogs */

.toast {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 2000;
  background: var(--panel-2);
  border: 1px solid var(--ocre-dim);
  border-radius: 6px;
  padding: 8px 14px;
}

dialog { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 8px; width: min(520px, 92vw); }
dialog::backdrop { background: rgba(0, 0, 0, .6); }
dialog h2 { margin-top: 0; color: var(--ocre); font-size: 17px; }
dialog textarea { width: 100%; font-family: ui-monospace, Consolas, monospace; font-size: 12px; padding: 8px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }

.fatal {
  position: fixed; inset: 0; z-index: 5000;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); padding: 24px; text-align: center; white-space: pre-line;
}

/* ------------------------------------------------------------------- mobile */

/* Téléphone : carte en haut, panneau en bas qui défile en entier (la liste
   garde une hauteur minimale au lieu d'être écrasée par les filtres). */
@media (max-width: 760px) {
  body { flex-direction: column-reverse; }
  #sidebar, .sidebar { width: 100%; height: 55%; border-right: none; border-top: 1px solid var(--line); overflow-y: auto; }
  #map { height: 45%; }
  .list { flex: none; min-height: 240px; overflow-y: visible; }
  .hover-info { left: auto; right: 12px; top: 12px; bottom: auto; max-width: calc(100% - 80px); }
}

/* ------------------------------------------------------------ modes */

.mode-status { padding: 16px; color: var(--muted); }

/* Barre des modes : centrée au-dessus de la carte, repliable en un onglet. */
.modebar {
  position: fixed;
  top: 0;
  left: calc(var(--sidebar-w) + (100vw - var(--sidebar-w) - var(--dock-w, 0px)) / 2);
  transform: translateX(-50%);
  z-index: 1100;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: max-content;
  max-width: calc(100vw - var(--sidebar-w) - var(--dock-w, 0px) - 120px);
}
.modebar-items {
  display: flex; gap: 4px; align-items: center; flex-wrap: wrap; justify-content: center;
  padding: 6px 8px;
  background: rgba(21, 23, 28, .92);
  border: 1px solid var(--line); border-top: none;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .5);
}
.modebar-items button { border-radius: 6px; padding: 5px 12px; }
.modebar-items button.active { background: var(--ocre-dim); border-color: var(--ocre); color: #fff; }
.modebar-items select { max-width: 200px; }
#modebar-toggle {
  padding: 0 14px; font-size: 13px; line-height: 18px;
  border-top: none; border-radius: 0 0 6px 6px;
  background: rgba(21, 23, 28, .92);
}
#modebar-toggle .down { display: none; }
.modebar.collapsed .modebar-items { display: none; }
.modebar.collapsed #modebar-toggle { padding: 2px 12px; }
.modebar.collapsed #modebar-toggle .up { display: none; }
.modebar.collapsed #modebar-toggle .down { display: inline; }

@media (max-width: 760px) {
  .modebar { left: 50%; max-width: calc(100vw - 24px); }
}

/* Panneau de gauche replié : onglet ◀ / ▶ sur son bord (app.js, dofus-side-collapsed-v1). */
body.side-collapsed { --sidebar-w: 0px; }
body.side-collapsed #sidebar, body.side-collapsed .sidebar { display: none; }
#side-toggle {
  position: fixed; top: 50%; left: var(--sidebar-w); transform: translateY(-50%); z-index: 1100;
  width: 18px; height: 56px; padding: 0; font-size: 11px;
  border-left: none; border-radius: 0 6px 6px 0;
  background: rgba(21, 23, 28, .92); color: var(--muted);
}
#side-toggle:hover { color: #fff; }
@media (max-width: 760px) { #side-toggle { display: none; } body.side-collapsed #sidebar:not([hidden]), body.side-collapsed .sidebar:not([hidden]) { display: flex; } }

/* Bestiaire : sélection multiple, une couleur par monstre. */
.b-selection { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 16px 0; }
.b-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 4px 2px 8px; border: 1px solid; border-radius: 12px;
  background: var(--panel-2); font-size: 12px;
}
.b-chip i { width: 8px; height: 8px; border-radius: 50%; }
.b-chip button { padding: 0 5px; border: none; background: none; font-size: 12px; }
.b-chip .b-goto { color: var(--select); }
.b-clear { font-size: 12px; padding: 2px 8px; }
.b-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line); justify-self: center; }
#sidebar-bestiary .list li { grid-template-columns: 14px 40px 1fr auto; }
#sidebar-bestiary .list li.selected { outline: 2px solid; outline-offset: -2px; background: #263446; }
.popup li.b-pop { grid-template-columns: 12px 32px 1fr; cursor: pointer; border-radius: 4px; }
.popup li.b-pop:hover { background: var(--panel-2); }
.b-hint { color: var(--muted); align-self: center; }

/* Ressources : onglets des métiers avec leur icône officielle. */
.r-jobs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.r-jobs button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 2px; font-size: 10px; }
.r-jobs button img { width: 26px; height: 26px; }
.r-jobs button span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.r-jobs button.active { background: var(--ocre-dim); border-color: var(--ocre); color: #fff; }
#sidebar-resources .list li { grid-template-columns: 14px 40px 1fr auto; }
#sidebar-resources .list li.selected { outline: 2px solid; outline-offset: -2px; background: #263446; }

/* Menu des calques d'icônes (modes Bestiaire et Ressources). */
.hints-menu { position: relative; }
.hints-pop {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 1200;
  width: 260px; max-height: 60vh; overflow-y: auto;
  padding: 8px 10px; display: flex; flex-direction: column; gap: 4px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .6);
}
.hints-pop label { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.hints-pop img { width: 20px; height: 20px; }
.hints-pop small { color: var(--muted); margin-left: auto; }
.hints-actions { display: flex; gap: 6px; margin-bottom: 4px; }
.hints-actions button { flex: 1; font-size: 12px; padding: 2px 6px; }

/* Nombre de ressources écrit sur chaque case. */
.r-label { display: flex; flex-wrap: wrap; align-items: center; align-content: center; justify-content: center; gap: 2px; pointer-events: none; }
.r-label span {
  min-width: 18px; padding: 0 4px; border-radius: 8px; border: 2px solid;
  background: rgba(15, 17, 22, .85); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 13px; text-align: center;
}

/* Butin : fiche détaillée (objet → monstres, ou monstre → objets). */
.l-detail { margin: 8px 8px 0; padding: 8px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; max-height: 45%; overflow-y: auto; flex: none; }
.l-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.l-head img { width: 40px; height: 40px; object-fit: contain; }
.l-head > div { flex: 1; min-width: 0; }
.l-head .b-x { border: none; background: none; font-size: 18px; padding: 0 6px; }
.l-head .b-back { font-size: 15px; padding: 2px 7px; border: 1px solid var(--line); border-radius: 5px; color: var(--select); }
.l-head .b-back:hover { background: rgba(120,170,255,.15); }
.l-muted { color: var(--muted); font-size: 12px; }
.l-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.l-table th { text-align: left; color: var(--muted); font-weight: 500; border-bottom: 1px solid var(--line); padding: 3px 4px; }
.l-table td { padding: 4px; border-bottom: 1px solid rgba(255, 255, 255, .05); vertical-align: middle; }
.l-table tr[data-mon], .l-table tr[data-item] { cursor: pointer; }
.l-table tr:hover td { background: rgba(255, 255, 255, .04); }
.l-table td:first-child { display: flex; gap: 6px; align-items: center; }
.l-table td img { width: 28px; height: 28px; object-fit: contain; flex: none; }
.l-table small { display: block; color: var(--muted); }
.l-table small a { color: var(--select); text-decoration: none; }
.l-table em { color: #f0c048; font-style: normal; }
.l-p { white-space: nowrap; color: var(--ocre); font-weight: 600; text-align: right; }
#sidebar-loot .list li { grid-template-columns: 4px 40px 1fr auto; }

/* Paramètres / Metamob */
#settings-btn { font-size: 15px; padding: 3px 10px; }
.settings h3 { margin: 4px 0 8px; font-size: 14px; color: var(--text); }
.mm-field { display: flex; flex-direction: column; gap: 4px; margin: 10px 0; font-size: 13px; color: var(--muted); }
.mm-key { display: flex; gap: 4px; }
.mm-key input { flex: 1; font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
.mm-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 8px 0; }
.mm-status { font-size: 13px; color: var(--muted); }
.mm-status.ok, .settings .ok { color: var(--ok); }
.mm-status.warn, .settings .warn { color: #f0c048; }
.mm-status.err, .settings .err { color: var(--danger); }
.mm-preview { margin: 8px 0; padding: 8px 10px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; font-size: 13px; display: flex; flex-direction: column; gap: 4px; }
.mm-note { font-size: 12px; color: var(--muted); }

/* Itinéraire (mode Quête) */
.route-panel {
  position: fixed; top: 60px; right: 12px; bottom: 40px; z-index: 1050;
  width: 340px; max-width: calc(100vw - var(--sidebar-w) - 40px);
  display: flex; flex-direction: column;
  background: rgba(29, 32, 39, .97); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .6);
}
.route-panel header { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.route-panel h2 { margin: 0; font-size: 15px; color: var(--ocre); }
.route-panel header button { border: none; background: none; font-size: 18px; }
.route-opts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 12px; font-size: 13px; color: var(--muted); }
.route-opts select { max-width: 200px; }
.route-summary { padding: 0 12px 8px; font-size: 13px; }
.route-summary .warn { color: #f0c048; }
.route-steps { margin: 0; padding: 0 12px 12px 34px; overflow-y: auto; flex: 1; font-size: 13px; }
.route-steps li { padding: 6px 0; border-bottom: 1px solid rgba(255, 255, 255, .06); cursor: pointer; }
.route-steps li::marker { color: #22c3ff; font-weight: 700; }
.route-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.route-head button { margin-left: auto; font-size: 11px; padding: 1px 6px; }
.route-zaap { color: #22c3ff; }
.route-who { color: var(--muted); font-size: 12px; }
.route-num { display: flex; align-items: center; justify-content: center; }
.route-num span {
  width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: #22c3ff; color: #08202a; font-size: 11px; font-weight: 800; border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
}
.route-num.start span { background: #fff; color: #08202a; }
@media (max-width: 760px) { .route-panel { left: 12px; right: 12px; width: auto; max-width: none; top: 12px; bottom: 56%; } }

/* La roue des paramètres reste tout à droite de la barre, après les calques. */
#settings-btn { order: 99; }

/* Fiche objet : sections récolte / craft / drop / utilisé dans. */
.l-detail h4 { margin: 10px 0 4px; font-size: 13px; color: var(--ocre); }
.l-detail h4 small { color: var(--muted); font-weight: 400; }
.l-src { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.l-src img { width: 22px; height: 22px; }
.l-src button { font-size: 12px; padding: 2px 8px; }
.l-ings { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.l-ings li { display: flex; align-items: center; gap: 6px; font-size: 12px; cursor: pointer; padding: 2px 4px; border-radius: 4px; }
.l-ings li:hover { background: rgba(255, 255, 255, .05); }
.l-ings img { width: 24px; height: 24px; object-fit: contain; }
.l-ings small { color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 0 3px; margin-left: 2px; }

/* PNJ & quêtes */
.n-dot { width: 10px; height: 10px; border-radius: 50%; border: 1px solid #111; justify-self: center; }
.n-dot.big { width: 18px; height: 18px; flex: none; }
.n-ico { font-size: 22px; text-align: center; }
#sidebar-npcs .list li { grid-template-columns: 4px 32px 1fr auto; }
.n-pos, .n-steps { margin: 0; padding-left: 18px; font-size: 12px; }
.n-pos li, .n-steps li { padding: 3px 0; }
.n-pos li { cursor: pointer; list-style: none; margin-left: -18px; }
.n-pos small, .n-steps small { color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 0 3px; }
.n-pos button, .n-step button { font-size: 11px; padding: 0 6px; margin-left: 4px; }
.n-step { margin: 2px 0 2px 4px; font-size: 12px; }
.n-link { color: var(--select); cursor: pointer; }

/* Almanax */
#almanax-btn { order: 98; }
.almanax { width: min(560px, 94vw); }
#alx-body { max-height: 65vh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
/* Croix de fermeture en haut ; détaché : seul le contenu défile (pas de double barre de défilement). */
.almanax h2 { display: flex; align-items: center; gap: 2px; }
.almanax h2 .alx-close { order: 3; font-size: 18px; border: none; background: none; padding: 0 4px; }
.almanax h2 .b-detach, .almanax h2 .b-dock { float: none !important; order: 1; }
.almanax h2 .b-detach { margin-left: auto; }
.almanax h2 .b-dock { order: 2; }
.almanax.float { flex-direction: column; overflow: hidden; }
.almanax.float[open] { display: flex; }
.almanax.float > form { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.almanax.float #alx-body { flex: 1; min-height: 0; max-height: none; }
.alx-day { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); font-size: 13px; }
.alx-day.today { border-color: var(--ocre); }
.alx-day header { display: flex; flex-direction: column; margin-bottom: 6px; }
.alx-day header b { color: var(--ocre); text-transform: capitalize; }
.alx-offer { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 4px; border-radius: 6px; }
.alx-offer:hover { background: rgba(255, 255, 255, .05); }
.alx-offer img { width: 36px; height: 36px; }
.alx-offer small { display: block; color: var(--muted); }
.alx-bonus { color: var(--text); margin-top: 4px; }
.alx-event { color: #f0c048; }

/* Exploration */
.x-progress { padding: 10px 16px 0; }
#x-fill { height: 100%; width: 0; background: linear-gradient(90deg, #2f7a45, var(--ok)); transition: width .3s; }
#x-text { font-variant-numeric: tabular-nums; color: var(--muted); min-width: 70px; text-align: right; }
.x-list li.list-section span { float: right; text-transform: none; }
.x-list li.x-group { font-size: 13px; }
.x-list li.x-group.done .name { color: var(--ok); }

/* ------------------------------------------------------------ mode Quêtes */
.q-progress { padding: 10px 16px 0; }
#q-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--ocre-dim), var(--ocre)); transition: width .3s; }
#q-text { font-variant-numeric: tabular-nums; color: var(--muted); min-width: 90px; text-align: right; font-size: 12px; }
.q-detail { max-height: 58%; }
.l-detail.float { position: fixed; z-index: 1150; margin: 0; max-height: none; resize: both; overflow: auto; min-width: 280px; min-height: 200px; box-shadow: 0 10px 30px rgba(0,0,0,.55); border-color: #5a6170; }
.float .float-head { cursor: move; user-select: none; }
.float .l-head { cursor: move; user-select: none; position: sticky; top: -8px; background: var(--panel-2); z-index: 1; margin: -8px -8px 6px; padding: 8px; border-bottom: 1px solid var(--line); }
.float.dragging { opacity: .85; }
.float-off { display: none !important; }
/* Fiche collée au bord droit (⇥) : pleine hauteur, largeur réglée par la poignée .dock-grip (app.js, makeDetachable). */
.float.dock-right { left: auto !important; right: 0; top: 0; bottom: 0; height: auto !important; resize: none; border-radius: 0; border-right: none; border-top: none; border-bottom: none; box-shadow: -6px 0 20px rgba(0,0,0,.45); }
dialog.float.dock-right { height: 100vh !important; max-height: 100vh; }
.dock-grip { position: fixed; top: 0; bottom: 0; width: 8px; z-index: 1160; cursor: ew-resize; }
.dock-grip:hover, .dock-grip.active { background: rgba(212, 160, 60, .35); }
body.dock-resizing { cursor: ew-resize; user-select: none; }
.float.dock-right .l-head { top: -8px; }
.q-bar .q-begin { background: #3a6b3f; border-color: #5bbf72; color: #fff; font-weight: 600; }
.q-trust { margin: 6px 0; font-size: 12px; color: #aeb4be; }
.q-trust > summary { cursor: pointer; }
.q-trust.warn > summary { color: #e8b04a; }
.q-trust ul { margin: 4px 0 4px 18px; padding: 0; }
.q-trust li { margin: 2px 0; }
.q-crit code { font-size: 11px; }
.q-st { width: 18px; text-align: center; font-size: 13px; }
.q-st-available { color: var(--ocre); }
.q-st-started { color: #ff2e88; }
.q-st-done { color: var(--ok); }
.q-st-locked { opacity: .6; }
.q-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0; font-size: 12px; }
.q-bar button { font-size: 11px; }
.q-desc { font-size: 12px; color: #cfd3da; margin: 2px 0 4px; line-height: 1.4; }
.q-line { font-size: 12px; margin: 2px 0 6px; }
.q-line summary { cursor: pointer; color: var(--muted); }
.q-line div { font-style: italic; color: #cfd3da; padding: 4px 0 0 14px; line-height: 1.4; }
.q-objs { list-style: none; margin: 4px 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.q-objs li { display: grid; grid-template-columns: 18px 20px 1fr; gap: 4px; align-items: start; font-size: 12.5px; padding: 4px; border-radius: 6px; cursor: pointer; }
.q-objs li:hover { background: rgba(255, 255, 255, .04); }
.q-objs li.done > div { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--ok); }
.q-objs li.current { background: rgba(255, 46, 136, .12); outline: 1px solid rgba(255, 46, 136, .6); }
.q-objs li.flash { outline: 2px solid var(--select); }
.q-num { font-size: 11px; font-weight: 800; color: var(--ocre); text-align: center; padding-top: 2px; }
.q-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 3px; font-size: 11.5px; text-decoration: none; }
.q-meta button { font-size: 11px; padding: 1px 6px; }
.q-pos { color: var(--muted); }
.q-pos[data-goto] { cursor: pointer; }
.q-pos[data-goto]:hover { color: var(--select); }
.q-pos.approx { color: #e8b04a; }
.q-rew { font-size: 12px; color: #cfd3da; margin: 4px 0 2px; }
.q-kind { width: 22px; height: 22px; flex: none; margin-right: 4px; }
.q-kwrap { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; }
.q-kwrap .q-kind { width: 28px; height: 28px; margin: 0; }
.q-kwrap .q-st { position: absolute; right: -2px; bottom: -4px; font-size: 11px; }
.l-head .q-kind { width: 30px; height: 30px; }
.q-kinds { display: flex; flex-wrap: wrap; gap: 4px; }
.q-kinds button { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; padding: 2px 6px; opacity: .65; }
.q-kinds button.active { opacity: 1; outline: 1px solid #f0c048; background: rgba(240,192,72,.15); }
.q-kinds img { width: 18px; height: 18px; }
.q-plan { margin: 8px 0; padding: 6px 8px; border: 1px solid #3a3f4a; border-radius: 6px; background: rgba(240,192,72,.06); }
.q-plan > summary { cursor: pointer; font-weight: 600; }
.q-plan h5 { margin: 8px 0 3px; font-size: 12px; color: #f0c048; }
.q-xp { margin-top: 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.q-xp label { font-size: 12px; color: #9aa0ab; }
.q-xp input { width: 56px; }
.q-need { list-style: none; margin: 0; padding: 0; font-size: 12px; }
.q-need li { padding: 2px 0; }
.q-need li.done { opacity: .5; text-decoration: line-through; }
.q-need button { font-size: 11px; padding: 0 5px; }
.q-orig { color: #aeb4be; font-size: 11px; margin-left: 10px; }
.q-note-xp { font-size: 11px; margin-top: 6px; }
.q-item { cursor: pointer; text-decoration: underline dotted; }
.q-chain { margin: 6px 0; font-size: 12px; }
.q-chain summary { cursor: pointer; color: var(--ocre); }
.q-link.direct span:last-child { font-weight: 600; }
.q-link.q-st-done span:last-child { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--ok); }
.q-warn { font-size: 12px; color: #ff9a7a; margin: 6px 0; }
.q-crit code { font-size: 11px; word-break: break-all; }
.q-guides { font-size: 12px; color: var(--muted); margin-top: 10px; padding-top: 6px; border-top: 1px solid var(--line); }
.q-guides a { color: var(--select); }
.q-noob { margin: 10px 0 4px; padding: 6px 8px; border: 1px solid #3a3f4a; border-radius: 6px; background: rgba(120,170,255,.05); font-size: 12.5px; }
.q-noob > summary { cursor: pointer; font-weight: 600; }
.q-noob > summary small { font-weight: 400; color: var(--muted); }
.q-noob-warn { font-size: 11.5px; color: var(--muted); margin: 6px 0; }
.q-noob-body { line-height: 1.45; overflow-wrap: anywhere; }
.q-noob-body .nb-p { margin: 6px 0; }
.q-noob-body .nb-row { display: flex; flex-wrap: wrap; gap: 0 10px; align-items: flex-start; }
.q-noob-body .nb-col { flex: 1 1 140px; min-width: 0; }
.q-noob-body figure { margin: 6px 0; text-align: center; }
.q-noob-body img { max-width: 100%; height: auto; border-radius: 4px; cursor: zoom-in; }
.q-noob-body ul { margin: 4px 0; padding-left: 18px; }
.q-noob-body h5 { margin: 10px 0 4px; font-size: 12.5px; color: #f0c048; }
.q-noob-body a { color: var(--select); }
.q-noob-body .nb-xy { font: inherit; font-size: 11.5px; padding: 0 4px; margin: 0 1px; border: 1px solid #4a6a9a; border-radius: 4px; background: rgba(120,170,255,.12); color: #bcd4ff; cursor: copy; }
.q-noob-body .nb-xy:hover { background: rgba(120,170,255,.28); }
.q-noob-step { margin: 10px 0; padding: 6px 8px; border: 1px solid #4a6a9a; border-radius: 6px; background: rgba(120,170,255,.06); font-size: 12.5px; }
.q-noob-step-head { font-weight: 600; margin-bottom: 4px; }
.q-noob-more { display: block; width: 100%; margin: 4px 0; font-size: 11.5px; }
.qa-noob { margin: 6px 0 2px; }
.q-mini-dots { display: flex; flex-wrap: wrap; gap: 3px; margin: 4px 0 6px; }
.q-mini-dot { min-width: 24px; padding: 1px 5px; font-size: 11px; border-radius: 10px; border: 1px solid #4a6a9a; background: transparent; color: var(--muted); cursor: pointer; }
.q-mini-dot.done { background: rgba(91,191,114,.18); border-color: #5bbf72; color: #a9e2b6; }
.q-mini-dot.cur { background: #4a8ae8; border-color: #4a8ae8; color: #fff; font-weight: 600; }
.q-mini-say { margin: 4px 0 6px; padding: 4px 8px; border-left: 3px solid #f0c048; background: rgba(240,192,72,.08); border-radius: 0 4px 4px 0; }
.q-mini-say b { color: #f0c048; }
.q-xy.bad { border-color: #c76b4f; color: #ff9a7a; }
.q-mini-more { margin: 6px 0; padding: 4px 6px; border: 1px dashed #4a6a9a; border-radius: 5px; }
.q-mini-more > summary { cursor: pointer; color: #bcd4ff; font-size: 12px; }
.q-mini-pin { display: flex; align-items: center; justify-content: center; }
.q-mini-pin span { padding: 0 5px; min-width: 18px; text-align: center; font: 600 11px/18px sans-serif; color: #fff; background: rgba(74,138,232,.55); border: 1px solid #bcd4ff; border-radius: 4px; transform: rotate(0deg); }
.q-mini-pin.cur span { background: #4a8ae8; box-shadow: 0 0 0 3px rgba(74,138,232,.35); }
.q-mini-pin.bad span { background: rgba(199,107,79,.7); border-color: #ffb39a; }
.q-noob-body table { border-collapse: collapse; font-size: 11.5px; }
.q-noob-body td, .q-noob-body th { border: 1px solid var(--line); padding: 2px 4px; }
.q-pin.approx span { border-style: dashed; }
.q-pin.low span { opacity: .7; }
.q-pos.low { color: #c98a5a; }
.q-note { font-size: 12px; color: #cfd3da; margin: 6px 0; }
.q-pin.cur span { width: 26px; height: 26px; box-shadow: 0 0 0 3px rgba(255, 46, 136, .45), 0 1px 4px rgba(0, 0, 0, .6); }
.q-pin span { width: 100%; padding: 0 4px; border-radius: 11px; color: #1a1205; white-space: nowrap; }
.q-pin.cur span { width: 100%; }

/* Copier un nom : titre de fiche cliquable, 📋 au survol des noms des listes */
.l-head b { cursor: copy; }
.l-head b:hover { text-decoration: underline dotted; }
.copy-btn { border: none; background: none; padding: 0 3px; margin-left: 4px; font-size: 11px; cursor: copy; opacity: 0; vertical-align: middle; }
li:hover .copy-btn, .leaflet-popup .name:hover .copy-btn { opacity: .75; }
.copy-btn:hover { opacity: 1 !important; }

/* Bestiaire : fiche butin du monstre */
.b-detail { max-height: 50%; }
.b-detail .l-table tr[data-item] { cursor: pointer; }
.b-note { font-size: 11px; margin-top: 6px; }
.b-chip { cursor: pointer; }
.b-chip.shown { background: rgba(255,255,255,.08); }

/* ⚙ Paramètres → Sauvegarde */
#bk { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 8px; }
#share { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 8px; }
.share-row { align-items: center; gap: 6px; }
#share-url { flex: 1; min-width: 0; }
.bk-list { margin: 4px 0 4px 18px; padding: 0; font-size: 12px; }
.bk-file span { display: inline-block; padding: 4px 10px; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; background: var(--panel-2); }
#bk-text { width: 100%; box-sizing: border-box; font-size: 11px; }
button.danger { border-color: #c0504d; color: #ffb3b0; }

/* Niveau du personnage (⚙) : quêtes et drops hors niveau */
.l-table tr.off-level img { opacity: .4; filter: grayscale(1); }
.l-table tr.off-level td, .l-table tr.off-level td .l-p, .l-table tr.off-level a { color: var(--muted); }
.l-table tr.off-level .lv-bad, .lv-bad { display: block; color: #ff4d4d; font-size: 11px; font-weight: 600; margin-top: 2px; }
.list .lvl.q-badlvl { color: #ff8a80; }
.char-lvl input { width: 70px; margin-left: 6px; }

/* Fenêtres détachées hors fiches : itinéraire, Almanax */
.route-panel.float, dialog.float { position: fixed; margin: 0; inset: auto; max-width: none; max-height: none; resize: both; overflow: auto; z-index: 1150; box-shadow: 0 10px 30px rgba(0,0,0,.55); }
dialog.float h2 .b-detach, .route-panel header .b-detach, dialog h2 .b-dock, .route-panel header .b-dock { font-size: 16px; }
dialog.float h2 .b-detach, dialog h2 .b-dock { float: right; }

/* Menu Calques : sections (commun, Quête de l'Ocre, icônes officielles) */
.hints-sec { display: flex; flex-direction: column; gap: 6px; }
.hints-sec + .hints-sec:not([hidden]) { border-top: 1px solid var(--line); padding-top: 6px; margin-top: 4px; }
.hints-title { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.hints-pop i[class^="lg-"] { width: 20px; height: 20px; flex: none; }
.route-here { font-size: 11px; color: #5bbf72; white-space: nowrap; }

/* Quêtes : onglets Quêtes / Alignements, barres de progression */
.q-tabs { display: flex; gap: 4px; padding: 0 12px 6px; }
.q-tabs button { flex: 1; padding: 6px 4px; font-size: 13px; }
.q-tabs button.active { background: #8a6420; border-color: #c8952e; color: #fff; }
.q-tab { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.q-tab[hidden], .q-off-tab { display: none !important; }
.q-pbar { height: 4px; background: rgba(255,255,255,.08); border-radius: 2px; overflow: hidden; }
.q-pbar i { display: block; height: 100%; background: #f0c048; border-radius: 2px; }
.q-pbar.full i { background: #5bbf72; }
.q-pbar-list { margin-top: 4px; max-width: 180px; }
.q-pbar-detail { flex: 1 1 100%; height: 6px; margin-top: 4px; }

/* Quêtes : cartes traversées par la quête */
.q-worlds { font-size: 12px; margin: 6px 0; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.q-worlds button { font-size: 11px; padding: 2px 7px; }
.q-worlds button.here { outline: 1px solid #f0c048; }
.q-worlds button.cur { background: rgba(255,46,136,.18); border-color: #ff2e88; }

/* Quêtes : alignements (quest-align.js) */
.qa-controls { flex: none; }
.qa-row { display: flex; gap: 4px; align-items: center; }
.qa-row select, .qa-row .qa-name { flex: 1; min-width: 0; }
.qa-row button { padding: 3px 8px; }
.qa-row button.qa-armed { font-weight: 600; }
.qa-add { position: relative; }
.qa-add .qa-search { width: 100%; box-sizing: border-box; }
.qa-sugg { list-style: none; margin: 2px 0 0; padding: 4px; position: absolute; left: 0; right: 0; top: 100%; z-index: 20; max-height: 320px; overflow-y: auto;
  background: var(--panel); border: 1px solid #5a6170; border-radius: 6px; box-shadow: 0 6px 18px rgba(0,0,0,.5); }
.qa-sugg li { display: flex; align-items: center; gap: 6px; padding: 3px 6px; border-radius: 4px; cursor: pointer; font-size: 13px; }
.qa-sugg li:hover, .qa-sugg li.qa-hot { background: rgba(255,255,255,.07); }
.qa-sugg li .qa-sn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qa-sugg li small { color: var(--muted); white-space: nowrap; }
.qa-sugg li.qa-more { cursor: default; font-size: 12px; }
.qa-sugg li.qa-more:hover { background: none; }
.qa-box:not(.float) { flex: 1 1 auto; max-height: none; min-height: 0; margin-bottom: 8px; }
.qa-float-note { padding: 8px 16px; }
.qa-empty { font-size: 13px; color: var(--muted); padding: 6px 2px; line-height: 1.5; }
.qa-empty button { margin-top: 6px; }
.qa-prog { margin: 2px 0 8px; }
.qa-pbar { height: 8px; border-radius: 4px; }
.qa-pbar i { border-radius: 4px; }
.qa-prog-txt { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 4px; font-size: 13px; }
.qa-undo { margin-left: auto; font-size: 11px; padding: 1px 6px; }
.qa-sec { margin: 6px 0; }
.qa-sec > summary { cursor: pointer; font-weight: 600; color: var(--ocre); font-size: 13px; margin-bottom: 4px; }
.qa-sec > summary small { color: var(--muted); font-weight: 400; }
.qa-quests, .qa-shared { list-style: none; margin: 0; padding: 0; }
.qa-quests li { display: flex; align-items: flex-start; gap: 6px; padding: 4px 2px; border-bottom: 1px solid rgba(255,255,255,.05); }
.qa-quests li.done .qa-qn { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--ok); }
.qa-quests .q-kwrap { width: 32px; flex: none; }
.qa-quests .q-kwrap .q-kind { width: 24px; height: 24px; }
.qa-qmeta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; font-size: 13px; }
.qa-pbar-mini { margin-top: 2px; max-width: 200px; }
.qa-warn { font-size: 11px; color: #ff9a7a; }
.qa-rm { border: none; background: none; font-size: 16px; padding: 0 4px; color: var(--muted); }
.qa-rm:hover { color: var(--danger); }
.qa-qn { cursor: pointer; }
.qa-qn:hover { color: var(--select); text-decoration: underline; }
.qa-shared li { font-size: 12px; padding: 2px 4px; border-radius: 4px; cursor: pointer; }
.qa-shared li:hover { background: rgba(255,255,255,.05); }
.qa-sum { font-size: 12px; color: #cfd3da; margin-bottom: 4px; }
.qa-stops { list-style: none; margin: 0; padding: 0; }
.qa-stop { padding: 6px 4px; border-bottom: 1px solid rgba(255,255,255,.06); border-left: 3px solid transparent; border-radius: 4px; }
.qa-stop.cur { border-left-color: #ff2e88; background: rgba(255,46,136,.08); }
.qa-stop.flash { outline: 2px solid var(--select); }
.qa-stop-head { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.qa-stop.placed .qa-lbl { cursor: pointer; }
.qa-stop.placed .qa-lbl:hover b { color: var(--select); }
.qa-lbl { flex: 1; min-width: 0; }
.qa-num { flex: none; min-width: 20px; height: 20px; padding: 0 3px; box-sizing: border-box; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
  background: #f0c048; color: #1a1205; font-size: 11px; font-weight: 800; }
.qa-stop.cur .qa-num { background: #ff2e88; color: #fff; }
.qa-nopos .qa-num { background: #555b66; color: #fff; }
.qa-curtag { font-size: 10px; color: #ff2e88; border: 1px solid #ff2e88; border-radius: 8px; padding: 0 5px; white-space: nowrap; }
.qa-go { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 3px 0 2px 26px; font-size: 12px; }
.qa-go button { font-size: 11px; padding: 1px 6px; }
.qa-world { color: #b46bff; font-weight: 600; }
.qa-items { list-style: none; margin: 2px 0 0 26px; padding: 0; font-size: 12px; color: #cfd3da; }
.qa-items li { display: flex; align-items: flex-start; gap: 6px; padding: 1px 0; }
.qa-items .qa-qn { color: var(--ocre); }
.qa-stop input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--ok); cursor: pointer; flex: none; margin: 1px 0 0; }
.qa-h5 { margin: 10px 0 3px; font-size: 12px; color: var(--muted); }
.qa-h5 small { font-weight: 400; }
.qa-note { font-size: 11px; margin-top: 6px; }
.q-bar .qa-addbtn { font-size: 12px; padding: 2px 8px; }
.q-bar .qa-addbtn.in { border-color: #c8952e; color: #f0c048; }
.qa-menu { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 4px 0 6px; padding: 6px; border: 1px solid #5a6170; border-radius: 6px; background: var(--panel); }
.qa-menu button { font-size: 12px; padding: 2px 8px; }
.qa-menu button.in { border-color: #5bbf72; color: #8fe0a2; }
.qa-wchip { font-size: 11px; padding: 1px 7px; flex: none; color: #d6b8ff; border-color: #6d4b99; background: rgba(180,107,255,.12); }
.qa-wsep { margin: 8px 0 2px; }
.qa-wsep button { width: 100%; text-align: left; font-size: 12px; padding: 4px 8px; color: #d6b8ff; border: 1px dashed #8a63c0; background: rgba(180,107,255,.10); }
.qa-wsep button:hover { background: rgba(180,107,255,.22); }
.qa-whint { font-size: 12px; margin: 4px 0 6px; padding: 6px; border: 1px solid #6d4b99; border-radius: 6px; background: rgba(180,107,255,.08); display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.qa-whint button { font-size: 11px; padding: 2px 7px; }
.qa-whint[hidden] { display: none; }

/* Quête de l'Ocre : nombre d'archis par zone (option Calques) ; légende du menu */
.zone-count span { font-size: 12px; }
.hints-pop i.lg-num { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 16px; flex: none; border: 2px solid #ea9a35; border-radius: 8px; background: rgba(15,17,22,.85); color: #fff; font: 700 10px/1 sans-serif; font-style: normal; }

/* Alignements : récapitulatif « Mes alignements » */
.qa-all { margin: 6px 0; font-size: 12px; }
.qa-all > summary { cursor: pointer; color: var(--ocre, #f0c048); }
.qa-all-list { list-style: none; margin: 4px 0 0; padding: 0; max-height: 220px; overflow-y: auto; }
.qa-all-list li { padding: 5px 6px; border: 1px solid var(--line); border-radius: 6px; margin-bottom: 4px; cursor: pointer; }
.qa-all-list li:hover { background: var(--panel-2); }
.qa-all-list li.cur { border-color: #c8952e; background: rgba(240,192,72,.08); }
.qa-all-head { display: flex; align-items: center; gap: 6px; }
.qa-all-head b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qa-tag { color: #f0c048; }
.qa-all-head .qa-all-del:hover { border-color: #c0504d; color: #ffb3b0; }
.qa-all-head .qa-armed { width: auto; padding: 0 6px; font-size: 11px; font-weight: 600; }

/* Fiche de quête : raccourcis par étape (cocher jusqu'ici / décocher à partir d'ici) */
.q-steptools { display: inline-flex; gap: 4px; margin-left: 8px; vertical-align: middle; }
.q-steptools button { font-size: 10px; padding: 1px 6px; font-weight: 400; }

/* Alignement : bouton « ＋ Quête » dans l'en-tête, lien « quêtes faites » des suggestions */
.qa-addq { font-size: 11px; padding: 1px 7px; margin-left: 6px; vertical-align: middle; }
.qa-sugg li.qa-more a { color: var(--ocre, #f0c048); }
/* Alignement détaché : champ d'ajout dans l'en-tête de la fenêtre */
.l-head:has(> .qa-add-in) { flex-wrap: wrap; }
.qa-add.qa-add-in { flex: 0 0 100%; order: 9; margin-top: 6px; cursor: auto; }
.float .qa-addq { display: none; }
/* Alignement : arrêts faits (barrés, décochables) en tête du plan */
.qa-stop.qa-done { opacity: .62; }
.qa-stop.qa-done:hover { opacity: .9; }
.qa-stop.qa-done .qa-lbl b, .qa-stop.qa-done .qa-items li > span { text-decoration: line-through; }
.qa-stop.qa-done .qa-num { background: #3c8a4e; color: #fff; }
.qa-donetag { margin-left: auto; font-size: 10px; color: #7fd38f; border: 1px solid #3c8a4e; border-radius: 8px; padding: 0 6px; }
.qa-donemore { list-style: none; margin: 2px 0 6px; }
.qa-donemore button { font-size: 11px; padding: 1px 8px; }
/* Noms copiables dans les textes (fiches de quête, alignements) : 📋 au survol du nom seulement */
.cp { position: relative; cursor: copy; }
.cp:hover { text-decoration: underline dotted; text-underline-offset: 2px; }
[data-item] .cp, [data-open] .cp { cursor: inherit; }
li:hover .cp .copy-btn, .cp .copy-btn { opacity: 0; position: absolute; left: 100%; top: 50%; transform: translateY(-50%); margin: 0 0 0 2px; background: var(--panel-2); border-radius: 4px; z-index: 2; }
li .cp:hover .copy-btn, .cp:hover .copy-btn { opacity: .85; }
.nm-ico { width: 20px; height: 20px; object-fit: contain; vertical-align: middle; margin: -3px 3px -2px 1px; }
/* Raccourci « ⚡ zaap + travel » (une commande pour les deux) */
.zt-btn { border-color: #3d7fb8 !important; color: #9fd0ff !important; }
.zt-btn:hover { background: rgba(61,127,184,.18) !important; }

/* Fiche de quête : commutateur Fiche complète / Pas à pas, et vue pas à pas */
.q-views { display: flex; gap: 4px; margin: 6px 0; }
.q-views button { flex: 1; font-size: 12px; padding: 4px 6px; }
.q-views button.active { background: #8a6a22; border-color: #c8952e; color: #fff; }
.q-stepview { display: flex; flex-direction: column; gap: 6px; }
.q-stepview h4 { margin: 2px 0 0; }
.q-scount { font-size: 12px; color: var(--muted); }
.q-sstart { font-size: 12px; padding: 5px 8px; border: 1px dashed #c8952e; border-radius: 6px; }
.q-scur { border: 1px solid #ff2e88; background: rgba(255,46,136,.08); border-radius: 8px; padding: 8px 10px; }
.q-scur .q-stext { font-size: 15px; line-height: 1.35; margin-bottom: 6px; }
.q-sroute code { color: #9fd0ff; font-size: 11px; }
.q-snote { font-size: 11px; margin-top: 4px; }
.q-snext-quests { margin: 8px 0; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; }
.q-snext-list { font-size: 12px; opacity: .8; }
.q-snext-list ol { margin: 2px 0 0; padding-left: 22px; }
.q-snext-list li { margin: 2px 0; }
.q-stepnav { display: flex; gap: 6px; }
.q-stepnav button { flex: 1; padding: 6px; }
.q-stepnav .q-snext { flex: 2; background: #2f6b3d; border-color: #4caf6a; color: #fff; font-weight: 600; }
.q-stepnav .q-snext:hover { background: #3a8049; }
.q-stepdone { padding: 10px; text-align: center; color: #7fd38f; font-weight: 600; }
.q-autocopy { font-size: 12px; }
.q-pin.q-pin-next { opacity: .7; }
.q-mkchain { margin: 4px 0 6px; font-size: 12px; border-color: #c8952e; color: #f0c048; }

/* Liens du guide vers une vraie quête : statut + niveau (mode-quests.js, noobLinks). */
.q-noob-body a.q-glink { text-decoration: none; padding: 0 3px; border-radius: 4px; background: var(--panel-2); }
.q-noob-body a.q-glink:hover { text-decoration: underline; }
.q-noob-body a.q-glink small { color: var(--muted); }
.q-noob-body a.q-glink.q-st-done { color: #7fc77f; }

/* Bestiaire : onglets des monstres sélectionnés (mode-bestiary.js, tabsHtml) : carrés portrait (nom au survol), au-dessus
   de la fiche détachée (.b-tabs-out, élément de body) ou dans son en-tête. */
.l-head:has(.b-tabs) { flex-wrap: wrap; }
.l-head > .b-tabs { flex: 1 0 100%; order: 10; display: flex; align-items: flex-end; gap: 2px; margin-top: 4px; cursor: default; }
.b-tabs-out { position: fixed; z-index: 1151; display: flex; align-items: flex-end; gap: 2px; height: 36px; }
.b-tabs-strip { flex: 1; display: flex; align-items: flex-end; gap: 3px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; min-width: 0; padding-top: 4px; }
.b-tabs-strip::-webkit-scrollbar { display: none; }
.b-tab { position: relative; flex: none; width: 34px; height: 30px; padding: 1px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-bottom: 3px solid var(--c, var(--muted)); border-radius: 6px 6px 0 0; background: var(--panel); }
.b-tabs-out .b-tab { border-bottom-width: 0; border-top: 3px solid var(--c, var(--muted)); background: var(--panel-2); box-shadow: 0 -2px 6px rgba(0,0,0,.35); }
.b-tab img { filter: brightness(.8); }
.b-tab:hover img, .b-tab.cur img { filter: none; }
.b-tab:hover { background: #2c313b; }
.b-tab.cur { opacity: 1; height: 33px; background: #263446; border-color: var(--c, var(--muted)); }
.b-tabs-out .b-tab.cur { background: var(--panel-2); border-color: #5a6170; border-top-color: var(--c, var(--muted)); }
.b-tabs-out .b-tab:not(.cur) { background: #1b1e24; }
.b-tabs-out .b-tab:not(.cur):hover { background: #2c313b; }
.b-tab img, .l-head .b-tab img { width: 26px; height: 26px; object-fit: contain; }
.b-tab i { position: absolute; top: -2px; right: -2px; display: none; width: 14px; height: 14px; line-height: 13px; font-size: 11px; font-style: normal; text-align: center;
  border-radius: 50%; background: #3a3f4a; color: #fff; }
.b-tab:hover i { display: block; }
.b-tab i:hover { background: #c0392b; }
.b-tabnav { flex: none; align-self: center; padding: 0 6px; font-size: 15px; border-radius: 5px; }
.b-tab.preview { border-style: dashed; }
.b-preview { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 8px; padding: 5px 8px; font-size: 12px; color: var(--muted); border: 1px dashed var(--line); border-radius: 6px; }
.b-preview button { padding: 3px 9px; }
#sidebar-bestiary .list li.previewing { outline: 2px dashed #fff; outline-offset: -2px; background: #263446; }
.l-head .b-recenter { font-size: 15px; }
.b-dot.pv { background: transparent; box-shadow: inset 0 0 0 2px #fff; }
/* Alignements : pas à pas (quest-align.js, renderStepView). */
.qa-viewsw { margin: 6px 0; }
.qa-stepview .qa-stop { list-style: none; margin: 6px 0; }
.qa-items li.qa-cur-it { background: rgba(74,138,232,.15); border-radius: 4px; }
.qa-step-q { margin: 6px 0 2px; font-size: 12.5px; }
.qa-pin.qa-pale { opacity: .55; }
.q-noob-ok { color: #7fc77f; font-weight: 600; }
/* Mode Donjons (mode-dungeons.js). */
#sidebar-dungeons .list li { grid-template-columns: 4px 40px 1fr auto; }
.d-hasguide { font-size: 11px; }
.d-mons { list-style: none; margin: 0 0 6px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 2px 8px; }
.d-mons li { display: flex; align-items: center; gap: 6px; padding: 2px 4px; border-radius: 5px; cursor: pointer; font-size: 12.5px; }
.d-mons li:hover { background: var(--panel); }
.d-mons img { width: 30px; height: 30px; object-fit: contain; flex: none; }
.d-mons small { color: var(--muted); }
.d-go { margin: 4px 0 8px; }
.d-sec { margin: 4px 0; }
.dj-icon.d-sel { transform: scale(1.35); filter: drop-shadow(0 0 4px #ffd25a); }
.d-noguide { margin-top: 8px; }
/* Infos en bas des panneaux : repliées en une ligne (app.js, body.info-open). */
.tools .data-info { cursor: pointer; }
.tools .data-info::before { content: 'ℹ Infos ▸'; display: block; font-size: 11px; color: var(--muted); }
.tools .data-info:hover::before { color: var(--text, #fff); }
body.info-open .tools .data-info::before { content: 'ℹ Infos ▾'; margin-bottom: 3px; }
body:not(.info-open) .tools .data-info { font-size: 0; line-height: 0; }
body:not(.info-open) .tools .data-info::before { line-height: 1.4; }
body:not(.info-open) .tools .data-info > * { display: none; }
footer.tools:has(> .data-info:only-child) { padding-top: 6px; padding-bottom: 6px; }
/* Départs de quêtes sur la carte (mode-quests.js renderStarts). */
.q-start-ico { position: relative; width: 26px; height: 26px; cursor: pointer; filter: drop-shadow(0 1px 2px #000c); }
.q-start-ico img { width: 26px; height: 26px; }
.q-start-ico.q-st-done img, .q-start-ico.q-st-locked img { opacity: .55; }
.q-start-ico .q-st { position: absolute; right: -5px; bottom: -4px; font-size: 11px; width: auto; text-shadow: 0 0 3px #000, 0 0 2px #000; }
.q-start-ico b { position: absolute; left: -6px; top: -6px; min-width: 14px; height: 14px; padding: 0 3px; border-radius: 7px; background: #1b1e24; border: 1px solid var(--line); color: var(--text); font: 600 9px/12px system-ui, sans-serif; text-align: center; }
.popup li.q-start-pop { grid-template-columns: 36px 1fr; }
.q-start-pop .q-kwrap { width: 34px; }
.q-start-pop .q-kwrap .q-kind { width: 28px; height: 28px; }
.q-start-pop .q-kwrap .q-st { display: inline; text-decoration: none; }
.hints-sec .q-st-row .q-st { display: inline-block; width: 20px; margin-right: 2px; }
/* Petites étapes du guide : posées au-dessus de leur case (iconAnchor), pointe vers la case. */
.q-mini-pin span { position: relative; }
.q-mini-pin span::after { content: ''; position: absolute; left: 50%; bottom: -7px; margin-left: -4px; border: 4px solid transparent; border-top: 4px solid #bcd4ff; border-bottom: 0; }
.popup li small .kind-icon { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; display: inline; }
/* Niveau d'un monstre au-dessus du tien (Bestiaire). */
.lv-orange { color: #f0a040 !important; }
.lv-red { color: #ff5a4f !important; font-weight: 600; }
/* Bestiaire : légende de la coloration par niveau. */
.b-lvl-legend { margin: 2px 0 4px 24px; font-size: 11px; }
.b-lvl-scale { display: flex; height: 8px; border-radius: 4px; overflow: hidden; }
.b-lvl-scale i { flex: 1; }
.b-lvl-ends { display: flex; justify-content: space-between; color: var(--muted); margin-top: 2px; }
#b-kind button { display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 4px; white-space: nowrap; }
#b-kind button .kind-icon { width: 16px; height: 16px; margin: 0; display: inline-block; }
/* Poignée du bord bas d'une fiche dans le panneau de gauche (app.js makeDetachable : hauteur réglable). */
.panel-grip { position: relative; flex: none; height: 10px; margin: -2px 8px -4px; z-index: 5; cursor: ns-resize; }
.panel-grip[hidden] { display: none; }
.panel-grip::after { content: ''; position: absolute; left: 50%; top: 2px; width: 36px; margin-left: -18px; height: 4px; border-radius: 2px; background: var(--line); opacity: .8; }
.panel-grip:hover::after, .panel-grip.active::after { background: var(--ocre); opacity: 1; }
body.panel-resizing { cursor: ns-resize; user-select: none; }
/* Aller à une case (app.js gotoCell) : bouton 📍 en bas à gauche de la carte, repère posé sur la case. */
.goto { position: fixed; left: calc(var(--sidebar-w) + 12px); bottom: 12px; z-index: 1001; display: flex; gap: 6px; align-items: center; }
.goto > button { width: 34px; height: 34px; padding: 0; font-size: 16px; border-radius: 6px; background: rgba(21, 23, 28, .92); border: 1px solid var(--line); cursor: pointer; }
.goto > button:hover, .goto > button.active { border-color: var(--ocre); }
.goto form { display: flex; gap: 4px; background: rgba(21, 23, 28, .95); border: 1px solid var(--ocre); border-radius: 6px; padding: 3px; }
.goto form[hidden] { display: none; }
.goto input { width: 120px; font-variant-numeric: tabular-nums; }
@media (min-width: 761px) { .hover-info { left: calc(var(--sidebar-w) + 54px); } }
.goto-pin { position: absolute; left: 0; top: 0; transform: translate(-50%, -100%); pointer-events: auto; cursor: pointer; display: flex; flex-direction: column; align-items: center; filter: drop-shadow(0 2px 3px #000c); }
.goto-pin b { background: #e8414e; color: #fff; font: 700 11px/1 system-ui, sans-serif; padding: 4px 6px; border-radius: 5px; border: 2px solid #fff; white-space: nowrap; font-variant-numeric: tabular-nums; }
.goto-pin::after { content: ''; width: 0; height: 0; border: 7px solid transparent; border-top: 9px solid #fff; margin-top: -1px; }
@media (max-width: 760px) { .goto { left: 12px; } }
/* Fiche objet : caractéristiques et panoplie (mode-loot.js, data/items.js). */
.l-fx { list-style: none; margin: 2px 0 6px; padding: 0 0 0 4px; font-size: 12.5px; columns: 2; column-gap: 12px; }
.l-fx li { break-inside: avoid; padding: 1px 0; color: #9fd68a; }
.l-fx li.fx-neg { color: #ff7b72; }
.l-weapon { font-size: 12.5px; margin: 2px 0 4px; color: var(--text); }
.l-set li.cur { cursor: default; background: rgba(240, 160, 64, .12); }
.l-setbonus { display: flex; flex-direction: column; gap: 4px; margin: 6px 0; }
.l-setbonus > details { border-left: 2px solid var(--line); padding-left: 6px; }
.l-setbonus b { font-size: 12px; color: var(--ocre); }
.l-detail h4 a.l-setlink { font-size: 11px; font-weight: 400; color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 1px 7px; margin-left: 4px; text-decoration: none; }
.l-detail h4 a.l-setlink:hover { border-color: var(--ocre); color: var(--ocre); }
/* Menu du clic droit sur la carte (app.js). */
.map-ctx { position: fixed; z-index: 3000; min-width: 230px; background: #1b1e24; border: 1px solid var(--line); border-radius: 8px; padding: 4px; box-shadow: 0 6px 20px #000a; display: flex; flex-direction: column; }
.map-ctx[hidden] { display: none; }
.map-ctx-head { padding: 4px 8px 6px; font-weight: 700; color: var(--ocre); font-variant-numeric: tabular-nums; border-bottom: 1px solid var(--line); margin-bottom: 3px; }
.map-ctx button { all: unset; display: flex; align-items: baseline; gap: 6px; padding: 5px 8px; border-radius: 5px; cursor: pointer; font-size: 13px; color: var(--text); }
.map-ctx button:hover { background: rgba(255, 255, 255, .07); }
.map-ctx button small { margin-left: auto; padding-left: 10px; color: var(--muted); font-size: 11px; }
.map-ctx button.here small { color: var(--ocre); }
.map-ctx-sep { margin: 4px 0 2px; padding: 5px 8px 2px; border-top: 1px solid var(--line); font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.l-fx li { display: flex; align-items: center; gap: 5px; }
.l-fx .fx-ic { width: 16px; height: 16px; flex: none; object-fit: contain; }
.l-fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 4px; user-select: none; }
.l-fold > summary::-webkit-details-marker { display: none; }
.l-fold > summary::before { content: '▶'; color: var(--ocre); font-size: 12px; width: 16px; flex: none; text-align: center; transition: transform .15s; }
.l-fold[open] > summary::before { transform: rotate(90deg); }
.l-fold > summary h4 { margin: 8px 0 4px; }
.l-tier > summary { cursor: pointer; font-size: 12px; user-select: none; }
.l-tier > summary small { color: var(--muted); margin-left: 4px; }
.l-tier .l-fx { margin-top: 2px; }
/* Succès dans les modes Donjons / Quêtes / Bestiaire (mode-dungeons.js, mode-quests.js, mode-bestiary.js ; DofusAch). */
.ach-list { list-style: none; margin: 2px 0 6px; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ach-row { display: flex; align-items: flex-start; gap: 6px; padding: 3px 4px; border-radius: 5px; font-size: 12.5px; }
.ach-row:hover { background: var(--panel); }
.ach-row > input { margin: 2px 0 0; flex: none; }
.ach-row > div { min-width: 0; flex: 1; }
.ach-row.done .ach-name { color: var(--muted); text-decoration: line-through; }
.ach-row.tp { opacity: .8; }
.ach-st { flex: none; width: 14px; text-align: center; color: var(--muted); }
.ach-row.done .ach-st { color: #7fd07f; }
.ach-name { cursor: pointer; }
.ach-name:hover { color: var(--ocre); text-decoration: underline; }
.ach-pts { color: var(--muted); margin-left: 4px; white-space: nowrap; }
.ach-chal { display: flex; align-items: flex-start; gap: 5px; margin-top: 2px; font-size: 12px; }
.ach-chal img { width: 20px; height: 20px; object-fit: contain; flex: none; background: #d9cfb8; border-radius: 4px; padding: 1px; } /* pictos du client sombres : fond clair */
.ach-chal small { color: var(--muted); }
.ach-tp { font-size: 11.5px; margin: 0 0 6px 4px; }
.ach-badge { font-size: 11px; color: var(--muted); white-space: nowrap; }
.ach-badge.full { color: #7fd07f; }
/* Objets d'apparat (mode Objets, DOFUS_ITEMS.items[].ap). */
.l-ap { display: inline-block; font-size: 10.5px; line-height: 1.3; padding: 0 5px; border-radius: 8px; border: 1px solid #b48cff; color: #cdb4ff; background: rgba(180, 140, 255, .12); }
/* Fenêtre « par-dessus le jeu » (app.js pipOpen, Document Picture-in-Picture) : la fiche remplit la fenêtre, plus serrée. */
body.pip-body { margin: 0; overflow: hidden; background: var(--bg, #15171c); }
.in-pip { position: static !important; inset: auto !important; width: auto !important; height: 100vh !important; max-height: none !important;
  margin: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: auto !important;
  resize: none !important; display: block; padding: 8px 10px !important; box-sizing: border-box; font-size: 12.5px; }
.in-pip[hidden] { display: none !important; }
.in-pip .b-detach, .in-pip .b-dock { display: none !important; }
.in-pip .float-head, .in-pip .l-head { cursor: default; }
body.pip-body .toast { left: 50%; right: auto; bottom: 10px; transform: translateX(-50%); }
.b-pip { font-size: 13px; }

/* En-tête des fiches : boutons (◀ à gauche ; 🎯 🗗 ⇤/⧉ ⇥ × à droite) sur une ligne à eux, au-dessus du nom,
   pour que le titre garde toute la largeur. ::before = espace entre ◀ et les autres, ::after = retour à la ligne. */
.l-head { flex-wrap: wrap; row-gap: 2px; }
.l-head > .b-back { order: -3; }
.l-head::before { content: ''; order: -2; flex: 1; }
.l-head > .b-x:not(.b-back) { order: -1; }
.l-head::after { content: ''; order: 0; flex: 0 0 100%; height: 0; }
.l-head > :not(.b-x) { order: 1; }
.l-head > .b-tabs { order: 10; }
.qa-add.qa-add-in { order: 9; }
/* … et cette ligne de boutons = barre de titre (fond plus foncé, trait dessous), tailles de boutons harmonisées. */
.l-detail .l-head, .l-detail.float .l-head { margin: -8px -8px 6px; padding: 0 8px 6px; border-radius: 7px 7px 0 0; row-gap: 0;
  background: var(--panel-2) linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.3)) top / 100% 28px no-repeat; }
.l-detail .l-head::after { flex-basis: calc(100% + 16px); margin: 0 -8px 6px; border-top: 1px solid var(--line); }
.l-detail .l-head > .b-x { height: 28px; padding: 0 6px; font-size: 15px; line-height: 0; display: inline-flex; align-items: center; }
.l-detail .l-head > .b-pip, .l-detail .l-head > .b-recenter, .l-detail .l-head > .b-detach { font-size: 13px; }
.l-detail .l-head > .b-back { height: 20px; padding: 0 6px; font-size: 11px; margin-right: 2px; }
/* ⇤ ⇥ : un peu plus grandes, même police (alignées entre elles) */
.l-detail .l-head > .b-arrow { font-size: 18px; font-family: 'Segoe UI Symbol', 'Segoe UI', sans-serif; padding-bottom: 2px; }
/* Bestiaire : « ⚔ Comment le battre » (guides Dofus pour les Noobs : avis de recherche, boss de donjon) */
.b-fight-src { margin: 6px 0 2px; font-size: 12.5px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.b-fight-src a { color: var(--ocre, #f0c048); font-weight: 600; }
.b-fight-src button { font-size: 11px; padding: 1px 7px; }
.b-fight .q-noob { margin: 4px 0; }
/* ⚙ Compte (sync.js) */
#sy .sy-row input { flex: 1; min-width: 0; }
#sy .sy-new { margin: 6px 0; } #sy .sy-new summary { cursor: pointer; color: var(--ocre, #f0c048); }
.sy-warn { color: #ffb86b; } .sy-msg { color: #ffb86b; min-height: 1em; margin: 4px 0; }
.sy-banner { position: fixed; top: 8px; left: 50%; transform: translateX(-50%); z-index: 3000; background: var(--panel-2); border: 1px solid #ffb86b;
  border-radius: 8px; padding: 6px 10px; box-shadow: 0 6px 20px rgba(0,0,0,.5); font-size: 13px; }
.sy-banner[hidden] { display: none; }

/* Mention Leaflet en bas à droite de la carte : masquée */
.leaflet-control-attribution.leaflet-control {
    display: none;
}
/* ⚙ Paramètres : titre collé en haut (reste visible au défilement) avec une croix pour fermer */
.settings .settings-head { position: sticky; top: -14px; z-index: 2; display: flex; align-items: center; margin: -14px -14px 8px; padding: 12px 14px 10px;
  background: var(--panel); border-bottom: 1px solid var(--line); }
.settings .settings-x { margin-left: auto; border: none; background: none; font-size: 22px; line-height: 1; padding: 0 4px; cursor: pointer; color: var(--muted); }
.settings .settings-x:hover { color: var(--text); }
.sy-invite { margin: 10px 0 4px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: rgba(240,192,72,.06); }
/* Guides DofusNoob : bloc « caractéristiques du monstre » (tools/lib/noob-html.mjs, statsBlock) */
.nb-stats { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: center; margin: 6px 0 10px; padding: 8px; border: 1px solid var(--line); border-radius: 6px; background: rgba(0,0,0,.18); }
.nb-stats .nb-st-mon { grid-row: span 3; width: 72px; height: 72px; object-fit: contain; }
.nb-st-row { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.nb-st { display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px; }
.nb-st b { font-weight: 600; }
.nb-st.zero, .nb-st-res td.zero { opacity: .45; }
.nb-st-ic { width: 18px; height: 18px; object-fit: contain; vertical-align: middle; }
.nb-st-res { border-collapse: collapse; font-size: 12px; }
.nb-st-res th, .nb-st-res td { padding: 1px 6px; text-align: center; }
.nb-st-res td:first-child { text-align: left; color: var(--muted); padding-left: 0; }
.nb-st-res td.neg { color: var(--danger, #ff6b6b); }
#sy .sy-newcode { padding: 0 7px; margin: 0 4px; }
/* ⚙ Compte → 👑 Gestion des comptes */
#sy .sy-admin { margin: 8px 0; } #sy .sy-admin > summary { cursor: pointer; color: var(--ocre, #f0c048); font-weight: 600; }
.sy-acc { list-style: none; margin: 6px 0; padding: 0; }
.sy-acc li { padding: 6px 0; border-bottom: 1px solid var(--line); }
.sy-acc li.blocked { opacity: .65; }
.sy-acc-act { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.sy-acc-act button { font-size: 11px; padding: 1px 7px; }
.sy-tag { font-size: 10.5px; padding: 0 6px; border-radius: 8px; background: rgba(120,170,255,.15); }
.sy-tag.bad { background: rgba(255,90,90,.2); }
#sy .sy-pw { margin: 6px 0; } #sy .sy-pw > summary { cursor: pointer; color: var(--ocre, #f0c048); }
/* ⚙ Compte : état de la connexion en couleur */
#sy .sy-who { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; border: 1px solid; margin: 4px 0 6px; }
#sy .sy-who b { color: var(--ocre, #f0c048); font-size: 14px; }
#sy .sy-who button { margin-left: auto; }
#sy .sy-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
#sy .sy-who.sy-ok { background: rgba(91,191,114,.12); border-color: rgba(91,191,114,.5); } #sy .sy-ok .sy-dot { background: #5bbf72; box-shadow: 0 0 6px #5bbf72; }
#sy .sy-who.sy-busy { background: rgba(63,182,255,.1); border-color: rgba(63,182,255,.45); } #sy .sy-busy .sy-dot { background: #3fb6ff; box-shadow: 0 0 6px #3fb6ff; }
#sy .sy-who.sy-err { background: rgba(255,122,26,.1); border-color: rgba(255,122,26,.5); } #sy .sy-err .sy-dot { background: #ff7a1a; box-shadow: 0 0 6px #ff7a1a; }
#sy .sy-state { margin: 0 0 6px; font-size: 12.5px; font-weight: 600; }
#sy .sy-state.sy-ok { color: #5bbf72; } #sy .sy-state.sy-busy { color: #3fb6ff; } #sy .sy-state.sy-err { color: #ff9a4a; }
#sy h3 { color: var(--ocre, #f0c048); }
/* ⚙ Ton personnage : classe */
#char h3 { display: flex; align-items: center; gap: 6px; }
#char-head img { width: 28px; height: 28px; object-fit: contain; vertical-align: middle; }
.char-breed-row { display: flex; align-items: center; gap: 8px; margin: 8px 0 4px; }
.char-breed-name { font-weight: 600; color: var(--ocre, #f0c048); }
.char-sex { margin-left: auto; display: inline-flex; }
.char-sex button { padding: 1px 10px; }
.char-breeds { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 4px; margin: 4px 0 6px; }
.char-b { padding: 2px; border: 1px solid var(--line); border-radius: 6px; background: rgba(0,0,0,.2); cursor: pointer; opacity: .75; }
.char-b:hover { opacity: 1; border-color: #5a6170; }
.char-b.on { opacity: 1; border-color: var(--ocre, #f0c048); background: rgba(240,192,72,.15); box-shadow: 0 0 6px rgba(240,192,72,.4); }
.char-b img { width: 38px; height: 38px; object-fit: contain; display: block; margin: auto; }