* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #f6f3ee;
  --bar: #2f4b3f;
  --bar-text: #f2efe9;
  --male: #dbe7f4;
  --male-border: #7fa3c8;
  --female: #f7e3e6;
  --female-border: #cf93a0;
  --neutral: #eeeade;
  --neutral-border: #b3a98c;
  --masked-bg: #efefef;
  --masked-border: #bdbdbd;
  --accent: #a06a2c;
  --link: #9a917d;
  --panel-bg: #fffdf9;
}
html, body { height: 100%; }
body {
  font-family: "Segoe UI", system-ui, sans-serif;
  background: var(--bg);
  display: flex; flex-direction: column;
  overflow: hidden;
}

/* ---------- barre haute ---------- */
#topbar {
  background: var(--bar); color: var(--bar-text);
  display: flex; align-items: center; gap: 12px;
  padding: 8px 14px; flex-wrap: wrap; z-index: 20;
}
.brand { font-weight: 600; font-size: 1.05rem; white-space: nowrap; }
.search-wrap { position: relative; flex: 1 1 180px; max-width: 340px; }
#search {
  width: 100%; padding: 6px 10px; border: none; border-radius: 6px;
  font-size: .95rem; background: #fffdf9;
}
#search-results {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: #fffdf9; color: #333; border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0,0,0,.25); max-height: 300px; overflow-y: auto; z-index: 30;
}
#search-results div { padding: 7px 10px; cursor: pointer; font-size: .9rem; }
#search-results div:hover { background: #f0e9dc; }
#search-results .dates { color: #888; font-size: .8rem; margin-left: 6px; }
.controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mode-group { display: flex; border-radius: 6px; overflow: hidden; }
button.mode {
  border: none; padding: 6px 10px; cursor: pointer; font-size: .85rem;
  background: #47665a; color: var(--bar-text);
}
button.mode.active { background: var(--accent); font-weight: 600; }
label.gen { font-size: .9rem; display: flex; align-items: center; gap: 3px; }
label.gen select { border: none; border-radius: 4px; padding: 3px; }
.mask-toggle { font-size: .85rem; display: flex; align-items: center; gap: 5px; cursor: pointer; }
#fit {
  border: none; border-radius: 6px; padding: 5px 10px; cursor: pointer;
  background: #47665a; color: var(--bar-text); font-size: 1rem;
}
.identity { display: flex; align-items: center; gap: 10px; margin-left: auto; font-size: .85rem; }
.identity a { color: var(--bar-text); text-decoration: none; opacity: .9; }
.identity a:hover { opacity: 1; text-decoration: underline; }
.identity .who { opacity: .8; }
#logout { border: 1px solid #ffffff55; background: none; color: var(--bar-text);
  border-radius: 6px; padding: 4px 9px; cursor: pointer; font-size: .8rem; }
#logout:hover { background: #ffffff22; }

/* ---------- zone principale ---------- */
main { flex: 1; position: relative; overflow: hidden; }
#canvas { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
#canvas:active { cursor: grabbing; }

/* nœuds */
.node rect {
  rx: 8px;
  stroke-width: 1.5px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.12));
  cursor: pointer;
}
.node.male rect { fill: var(--male); stroke: var(--male-border); }
.node.female rect { fill: var(--female); stroke: var(--female-border); }
.node.unknown rect { fill: var(--neutral); stroke: var(--neutral-border); }
.node.masked rect {
  fill: var(--masked-bg); stroke: var(--masked-border); stroke-dasharray: 4 3;
}
.node.dead rect { fill-opacity: .55; }
.node.center rect { stroke-width: 3px; stroke: var(--accent); }
.node text { pointer-events: none; fill: #333; }
.node .l-given { font-size: 12.5px; font-weight: 600; }
.node .l-surname { font-size: 11.5px; letter-spacing: .3px; }
.node .l-dates { font-size: 10.5px; fill: #777; }
.node.masked .l-alive { font-size: 9.5px; font-style: italic; fill: #888; }
.link { fill: none; stroke: var(--link); stroke-width: 1.4px; }
.link.union { stroke-width: 3.5px; stroke-linecap: round; }
.link.filiation { stroke-width: 2px; }
.union-label { font-size: 10.5px; font-weight: 600; fill: #a09880; }

/* ---------- panneau détail ---------- */
#panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: 360px; max-width: 100%;
  background: var(--panel-bg); box-shadow: -3px 0 16px rgba(0,0,0,.18);
  overflow-y: auto; padding: 18px; z-index: 10;
}
#panel.hidden, .hidden { display: none; }
#panel-close {
  position: absolute; top: 10px; right: 12px; border: none; background: none;
  font-size: 1.1rem; cursor: pointer; color: #888;
}
#panel h2 { font-size: 1.15rem; margin-bottom: 2px; color: #2f4b3f; padding-right: 24px; }
#panel .subtitle { color: #888; font-size: .85rem; margin-bottom: 10px; }
#panel .portraits { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
#panel .portraits img {
  max-width: 105px; max-height: 130px; border-radius: 6px; cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
#panel section { margin: 14px 0; }
#panel h3 {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .6px;
  color: var(--accent); margin-bottom: 6px; border-bottom: 1px solid #eadfce; padding-bottom: 3px;
}
#panel ul { list-style: none; }
#panel li { padding: 3px 0; font-size: .92rem; }
#panel .plink { color: #2f4b3f; cursor: pointer; text-decoration: underline dotted; }
#panel .tag {
  font-size: .72rem; background: #eee; border-radius: 4px; padding: 1px 5px;
  color: #777; margin-left: 5px; vertical-align: 1px;
}
#panel .muted { color: #999; font-style: italic; }
#panel .note-text { white-space: pre-wrap; font-size: .88rem; background: #f7f2e8;
  border-radius: 6px; padding: 8px; }
#panel .doc-link { font-size: .88rem; }
#panel .center-btn {
  margin-top: 4px; border: 1px solid var(--accent); background: none; color: var(--accent);
  border-radius: 6px; padding: 6px 10px; cursor: pointer; font-size: .85rem;
}
#panel .center-btn:hover { background: var(--accent); color: white; }

/* ---------- barre de statut ---------- */
#statusbar {
  background: #e8e2d5; color: #6d6553; font-size: .78rem; padding: 3px 14px;
}

/* ---------- mobile ---------- */
@media (max-width: 700px) {
  #topbar { gap: 8px; padding: 6px 8px; }
  .brand { font-size: .95rem; }
  #panel { width: 100%; }
  .controls { gap: 6px; }
  button.mode { padding: 5px 7px; font-size: .78rem; }
  .mask-toggle { font-size: .78rem; }
}