/* Styles du graphe MJ, isolés de la carte. */
#graph-view {
  --graph-sea: #0a2636;
  --graph-sea-light: #194456;
  --graph-mist: #9bcabc;
  --graph-label: #f4f1e7;
  --graph-label-outline: #0a2534;
  padding: 10px 0 60px;
  color: var(--ink);
}
:root[data-theme="ghost"] #graph-view {
  --graph-sea: #091f38;
  --graph-sea-light: #174a55;
  --graph-mist: #a5dbc8;
  --graph-label-outline: #081e32;
}
.site-header nav a[aria-current="page"] { border-bottom: 2px solid var(--teal); }
.site-header .nav-atlas:not([aria-current="page"]) { border-bottom-color: transparent; }
.nav-mj { margin-left: 4px; padding: 3px 5px; border: 1px solid var(--line); color: var(--muted); font-size: 9px; letter-spacing: .08em; vertical-align: middle; }
.graph-intro { align-items: center; }
.graph-local-note { max-width: 100ch; margin: 0 0 12px; padding: 9px 13px; border-left: 2px solid var(--teal); background: var(--surface); color: var(--muted); font-size: 13px; line-height: 1.5; }
.graph-explore-bar { display: flex; align-items: end; justify-content: space-between; flex-wrap: wrap; gap: 9px 16px; margin-bottom: 9px; }
.graph-search { position: relative; z-index: 5; flex: 1 1 330px; max-width: 560px; }
.graph-search label { display: block; margin-bottom: 4px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.graph-search input { width: 100%; min-height: 40px; padding: 7px 12px; border: 1px solid var(--frame); background: var(--paper); color: var(--ink); font: inherit; font-size: 15px; }
.graph-search input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.graph-search-results { position: absolute; top: 100%; left: 0; right: 0; max-height: 340px; margin: 3px 0 0; padding: 5px; overflow-y: auto; list-style: none; border: 1px solid var(--frame); background: var(--paper); box-shadow: var(--shadow); }
.graph-search-results li { margin: 0; }
.graph-search-results li:not(:has(button)) { padding: 11px; color: var(--muted); }
.graph-search-results button { display: block; width: 100%; padding: 9px 11px; border: 0; background: transparent; color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.graph-search-results button:hover, .graph-search-results button:focus-visible { background: var(--inset); outline: 1px solid var(--teal); }
.graph-search-results small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
.graph-modes { display: flex; gap: 5px; }
.graph-modes button { min-height: 40px; padding: 7px 12px; border: 1px solid var(--frame); border-radius: 2px; background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; }
.graph-modes button[aria-pressed="true"] { border-color: var(--teal); background: color-mix(in srgb, var(--inset) 80%, var(--graph-mist)); box-shadow: inset 0 -2px var(--teal), 0 3px 10px #03152230; }
.graph-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 7px; margin-bottom: 7px; }
.graph-filter-family { display: flex; align-items: center; flex: 1 1 100%; min-width: 0; gap: 5px 9px; }
.graph-filter-caption { min-width: 60px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: 1.5px; }
.graph-filter { display: flex; flex-wrap: wrap; gap: 4px; }
.graph-filter-button, .graph-toggle, .graph-link-select, .graph-reset-filters { display: inline-flex; align-items: center; min-height: 34px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 2px; background: var(--surface); color: var(--ink); font-size: 12px; line-height: 1.2; }
.graph-filter-button:hover, .graph-filter-button[aria-pressed="true"] { border-color: var(--teal); background: color-mix(in srgb, var(--inset) 84%, var(--graph-mist)); }
.graph-filter-button[aria-pressed="true"] { box-shadow: inset 0 -2px var(--teal); }
.graph-reset-filters { border-color: var(--frame); color: var(--teal); }
.graph-reset-filters:hover { background: var(--inset); }
.graph-toggle { gap: 6px; cursor: pointer; }
.graph-toggle input { margin: 0; accent-color: var(--teal); }
.graph-link-select { gap: 6px; }
.graph-link-select select, .graph-trial-label select { min-width: 0; padding: 4px 6px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font: inherit; }
.graph-summary { min-height: 20px; margin: 0 0 9px; color: var(--muted); font-size: 12px; }
.graph-limit-note { margin: -3px 0 14px; padding: 9px 12px; border-left: 2px solid var(--teal); background: var(--inset); color: var(--ink); font-size: 12px; line-height: 1.5; }
.graph-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(275px, 300px); gap: 16px; align-items: start; }
.graph-stage { position: relative; min-width: 0; }
.graph-stage::after { position: absolute; inset: 9px; border: 1px solid #b9ded219; content: ''; pointer-events: none; }
#graph-svg {
  display: block; width: 100%; height: 610px;
  border: 1px solid #829f996b;
  background-color: var(--graph-sea);
  background-image:
    linear-gradient(90deg, #b4d7cd08 1px, transparent 1px),
    linear-gradient(#b4d7cd08 1px, transparent 1px),
    radial-gradient(ellipse at 50% 46%, transparent 30%, #03172377 100%),
    radial-gradient(ellipse at 50% 48%, #39707776 0%, #275b664b 31%, transparent 72%),
    radial-gradient(ellipse at 79% 13%, #6a9a9620 0%, transparent 42%),
    linear-gradient(155deg, var(--graph-sea-light), var(--graph-sea) 76%);
  background-size: 72px 72px, 72px 72px, auto, auto, auto, auto;
  box-shadow: inset 0 0 0 7px #061b286b, inset 0 0 85px #0318248c, 0 18px 40px #03101b5c;
  touch-action: none; cursor: grab;
}
#graph-svg.is-global {
  background-image:
    linear-gradient(90deg, #b4d7cd06 1px, transparent 1px),
    linear-gradient(#b4d7cd06 1px, transparent 1px),
    radial-gradient(ellipse at 50% 47%, transparent 34%, #03172369 100%),
    radial-gradient(ellipse at 50% 48%, #39707742 0%, transparent 72%),
    linear-gradient(155deg, var(--graph-sea-light), var(--graph-sea) 76%);
  background-size: 88px 88px, 88px 88px, auto, auto, auto;
}
#graph-svg.is-dragging { cursor: grabbing; }
#graph-svg:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.graph-edge { stroke: var(--graph-mist); stroke-width: 1.25px; stroke-opacity: .22; vector-effect: non-scaling-stroke; pointer-events: none; }
.graph-edge.is-neighbor { stroke: #b9e4d1; stroke-opacity: .82; stroke-width: 2.15px; filter: drop-shadow(0 0 2px #9bd8c075); }
.graph-edge.is-dimmed { stroke-opacity: .055; }
#graph-svg.is-global .graph-edge { stroke-opacity: .11; stroke-width: 1px; }
.graph-edge.is-geographic { stroke-width: .9px; stroke-opacity: .15; stroke-dasharray: 3 5; filter: none; }
.graph-edge.is-geographic.is-neighbor { stroke: #a1c9b9; stroke-width: 1.3px; stroke-opacity: .55; filter: none; }
.graph-edge.is-geographic.is-dimmed { stroke-opacity: .035; }
#graph-svg.is-global .graph-edge.is-geographic { stroke-opacity: .075; stroke-width: .8px; }
#graph-svg.is-global .graph-node-shape { stroke: #dce9d68c; stroke-width: 1.25px; }
#graph-svg.is-global .graph-node-inset { opacity: .58; }
#graph-svg.is-global .graph-node-mark { display: none; }
.graph-node { cursor: pointer; transition: opacity .18s ease; }
.graph-node-hit { fill: transparent; }
.graph-node-aura { fill: var(--node-accent, var(--teal)); opacity: 0; pointer-events: none; }
.graph-node-ring { fill: none; stroke: var(--node-accent, var(--teal)); stroke-width: 2px; opacity: 0; pointer-events: none; vector-effect: non-scaling-stroke; }
.graph-node-shape { fill: var(--node-accent, var(--teal)); stroke: #e8eee4c9; stroke-width: 1.8px; vector-effect: non-scaling-stroke; }
#graph-svg:not(.is-global) .graph-node-shape { filter: drop-shadow(0 2px 3px #031b28a6); }
.graph-node-inset { fill: var(--node-type-fill, #285360); stroke: #e9f0e178; stroke-width: 1px; pointer-events: none; vector-effect: non-scaling-stroke; }
.graph-node-mark { fill: none; stroke: #f0f3e7; stroke-width: 1.9px; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; vector-effect: non-scaling-stroke; }
.graph-node[data-type="character"] { --node-type-fill: #1a4553; }
.graph-node[data-type="event"] { --node-type-fill: #596478; }
.graph-node[data-type="place"] { --node-type-fill: #2e675f; }
.graph-node[data-type="faction"] { --node-type-fill: #495b71; }
.graph-node[data-type="document"] { --node-type-fill: #675f56; }
.graph-node[data-type="concept"] { --node-type-fill: #356677; }
.graph-node.is-selected .graph-node-aura { opacity: .13; }
.graph-node.is-center .graph-node-aura { opacity: .18; }
.graph-node.is-neighbor .graph-node-aura { opacity: .035; }
.graph-node.is-selected .graph-node-ring { opacity: .9; stroke-width: 2.8px; }
.graph-node.is-center .graph-node-ring { opacity: 1; stroke-width: 3.8px; filter: drop-shadow(0 0 6px var(--node-accent, var(--teal))); }
.graph-node.is-neighbor .graph-node-ring { opacity: .55; }
.graph-node.is-second-hop .graph-node-ring { opacity: .18; }
.graph-node.is-center .graph-node-shape { stroke: var(--graph-label); stroke-width: 2.8px; }
.graph-node-label { fill: var(--graph-label); stroke: var(--graph-label-outline); stroke-width: 2.8px; stroke-linejoin: round; paint-order: stroke fill; font-family: "Segoe UI", Arial, sans-serif; font-size: 14px; font-weight: 590; letter-spacing: -.01em; pointer-events: none; user-select: none; }
.graph-node.is-center .graph-node-label { font-size: 17px; stroke-width: 3.2px; }
.graph-node.is-selected .graph-node-label { font-weight: 700; }
.graph-node:hover .graph-node-shape, .graph-node:focus-visible .graph-node-shape, .graph-node.is-selected .graph-node-shape { stroke: var(--graph-label); stroke-width: 2.8px; filter: drop-shadow(0 0 8px var(--node-accent, var(--teal))); }
.graph-node.is-dimmed { opacity: .2; }
.graph-node.is-second-hop.is-dimmed { opacity: .55; }
.graph-node:focus-visible { outline: none; }
.graph-controls { position: absolute; z-index: 2; top: 13px; left: 13px; display: flex; gap: 5px; }
.graph-controls button { display: grid; place-items: center; min-width: 40px; min-height: 40px; padding: 5px; border: 1px solid #b0c9bb91; border-radius: 2px; background: #102f3fea; color: var(--graph-label); font-size: 19px; box-shadow: 0 4px 12px #04192766; }
.graph-controls button:hover { background: var(--inset); }
.graph-tooltip { position: absolute; z-index: 4; max-width: min(280px, 75%); padding: 8px 11px; border: 1px solid var(--frame); background: var(--ink); color: var(--paper); box-shadow: 0 5px 14px #03101b70; font-size: 13px; line-height: 1.3; pointer-events: none; overflow-wrap: anywhere; }
.graph-empty { position: absolute; z-index: 1; top: 50%; left: 50%; width: min(38ch, 80%); transform: translate(-50%, -50%); padding: 18px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); text-align: center; line-height: 1.6; }
.graph-side { min-width: 0; max-height: 610px; overflow-y: auto; padding: 18px; border: 1px solid var(--line); border-top: 2px solid var(--teal); background: linear-gradient(155deg, color-mix(in srgb, var(--surface) 88%, var(--graph-mist)), var(--surface) 48%, color-mix(in srgb, var(--surface) 87%, var(--graph-sea))); box-shadow: inset 0 0 0 5px #d5e9d608, 0 12px 30px #0418243d; line-height: 1.5; scrollbar-width: thin; }
.graph-side h2, .graph-side h3 { margin: 0 0 10px; font-family: "Palatino Linotype", Georgia, serif; font-weight: normal; }
.graph-side h2 { font-size: 28px; overflow-wrap: anywhere; }
.graph-side h3 { font-size: 18px; }
.graph-side p { color: var(--muted); }
.graph-type-legend { padding-bottom: 10px; margin-bottom: 15px; border-bottom: 1px solid var(--line); }
.graph-type-legend summary { display: flex; align-items: center; justify-content: space-between; gap: 7px; min-height: 36px; cursor: pointer; list-style: none; color: var(--ink); }
.graph-type-legend summary::-webkit-details-marker { display: none; }
.graph-type-legend summary::after { content: '⌄'; order: 3; color: var(--teal); font-size: 17px; line-height: 1; transition: transform .18s ease; }
.graph-type-legend[open] summary::after { transform: rotate(180deg); }
.graph-type-legend summary span { font-family: "Palatino Linotype", Georgia, serif; font-size: 18px; white-space: nowrap; }
.graph-type-legend summary small { color: var(--muted); font-size: 10px; text-align: right; line-height: 1.2; }
.graph-type-legend summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.graph-legend-body { padding-top: 9px; }
.graph-type-legend ul { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 0 0 8px; padding: 0; list-style: none; font-size: 11px; }
.graph-type-legend .eyebrow { margin-bottom: 7px; font-size: 9px; }
.graph-type-legend .eyebrow:not(:first-child) { margin-top: 11px; }
.graph-type-legend li { display: flex; align-items: center; gap: 7px; min-width: 0; min-height: 27px; padding: 4px 6px; border: 1px solid #b9d2c01c; background: #d8e8d909; }
.legend-shape { position: relative; display: inline-block; flex: 0 0 14px; width: 14px; height: 14px; border: 1px solid #e9f2e29c; background: #95c5b6; }
.legend-shape.character { border-radius: 50%; }
.legend-shape.event { transform: rotate(45deg) scale(.8); }
.legend-shape.place { border-radius: 2px; }
.legend-shape.faction { clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.legend-shape.document, .legend-shape.concept { border-radius: 50%; }
.legend-shape.document::after { position: absolute; inset: 4px 3px; border-top: 1px solid #123a48; border-bottom: 1px solid #123a48; content: ''; }
.legend-shape.concept::after { position: absolute; top: 4px; left: 4px; width: 4px; height: 4px; border: 1px solid #123a48; transform: rotate(45deg); content: ''; }
.graph-color-swatch { display: inline-block; flex: 0 0 15px; width: 15px; height: 15px; border: 1px solid #ffffffa3; border-radius: 50%; box-shadow: inset 0 0 0 2px #0a253566; }
.graph-legend-note { margin: 0; font-size: 12px; }
.graph-detail-meta, .graph-detail-foot { font-size: 12px; }
.graph-detail-trial { color: var(--teal) !important; font-size: 12px; }
.graph-detail h3 { padding-top: 14px; }
.graph-content-paragraph { white-space: pre-wrap; font-size: 13px; line-height: 1.6; }
.graph-open-sheet { display: block; width: 100%; margin: 13px 0 5px; padding: 10px 14px; border: 1px solid var(--teal); background: var(--inset); color: var(--ink); text-align: left; text-decoration: none; font-weight: 600; }
.graph-open-sheet:hover { background: var(--paper); }
.graph-center-node { width: 100%; margin: 4px 0 12px; padding: 9px 14px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-align: left; cursor: pointer; }
.graph-center-node:hover { border-color: var(--teal); background: var(--inset); }
.graph-neighbors { display: flex; flex-direction: column; gap: 7px; margin: 0 0 16px; padding: 0; list-style: none; }
.graph-neighbors li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; border-top: 1px solid var(--line); }
.graph-neighbors a { color: var(--ink); text-decoration-color: var(--teal); }
.graph-neighbors a:hover { color: var(--teal); }
.graph-neighbors small { flex: 0 0 auto; color: var(--muted); }
.graph-trial-label { display: flex; flex-direction: column; gap: 7px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.graph-trial-label select { width: 100%; font-size: 13px; }
@media (max-width: 900px) { .graph-layout { grid-template-columns: minmax(0, 1fr); } .graph-side { max-height: none; } }
@media (max-width: 700px) { #graph-view { padding-top: 4px; } .graph-explore-bar { align-items: stretch; } .graph-search { max-width: none; } .graph-modes { width: 100%; } .graph-modes button { flex: 1; } .graph-toolbar { gap: 6px; } .graph-filter-family { flex-wrap: wrap; } .graph-filter-caption { min-width: 100%; } .graph-filter-button, .graph-toggle, .graph-link-select, .graph-reset-filters { min-height: 34px; padding: 6px 9px; font-size: 12px; } #graph-svg { height: 440px; } .graph-side { padding: 16px; } .graph-node-label { font-size: 12px; } .graph-node.is-center .graph-node-label { font-size: 15px; } }
@media (prefers-reduced-motion: reduce) { .graph-node { transition: none; } }